/* Phone Terminal page (12 Oct 2026). The phone home page's language: the navy ground, the raised navy cards, the logo blue and the Terminal greys; headings in the hero face, copy in IBM Plex Sans. Compact opening (eyebrow, sentence) → Monitor (the phone home page's Terminal window) → Analyze (the Terminal page's own panel, laid out for the phone) → the five benefits → the closing link and the footer. Desktop is unchanged. */ #mobile-signals { display: none; } /* Inter as a variable face for the word Quantsion at 600, as on the phone home page (the same files). */ @font-face{ font-family: "Inter Text"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter/inter-variable-latin-ext-20261014.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family: "Inter Text"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter/inter-variable-latin-20261014.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @media (max-width: 760px) { body[data-page="signals"] { --psv-bg-deep-rgb: 13 31 61; background: #132d58; } /* a window wider than the phone column (481–760 px, a narrow desktop window or a tablet): the navy runs to both edges, the scrollbar gutter included */ /* this sheet is loaded by this page alone, so the root can be painted directly (no :has(), which made every DOM change re-check the whole page while scrolling) */ html { background-color: #132d58; } /* the site footer's social icons stand once on phones, in the page foot (D-107) */ .footer-social { display: none; } body[data-page="signals"] > #main-content { background: transparent; } body[data-page="signals"] .signals-page { width: 100%; max-width: none; margin: 0; padding: 0; display: block; } body[data-page="signals"] .signals-page > :not(#mobile-signals) { display: none; } /* The legal links and copyright under the page, as on the phone home page. */ body[data-page="signals"] > .site-footer { display: block; padding-block: 22px 32px; background: #132d58; border-top: 0; color: #7f93a8; } body[data-page="signals"] > .site-footer .footer-inner { flex-direction: column-reverse; align-items: flex-start; gap: 14px; width: 100%; max-width: 480px; margin-inline: auto; padding-inline: 26px; box-sizing: border-box; } body[data-page="signals"] > .site-footer .footer-links { flex-wrap: wrap; gap: 10px 20px; padding-top: 18px; border-top: 1px solid rgb(145 184 216 / .18); width: 100%; } body[data-page="signals"] > .site-footer .footer-links a { color: #a9b8c8; text-decoration: none; } body[data-page="signals"] > .site-footer .footer-company { color: #a9b8c8; } /* the company lines in the legal links' colour (owner, 18 Oct 2026, D-208) */ #mobile-signals { --navy: #132d58; --surface: #163567; --blue: #338cff; --blue-text: #8dbbff; --text: #e6edf5; --copy: #a9b8c8; --muted: #7f93a8; --heading: #f3f7fe; --accent: #8bbcff; --body: #c0cfe3; --action: #174c91; --line: rgb(145 184 216 / .18); --line-strong: rgb(151 196 230 / .34); --sans: "Inter", "IBM Plex Sans", Arial, sans-serif; --psv-font-hero: "IBM Plex Sans", Arial, sans-serif; --psv-hero-weight: 700; --mono: "IBM Plex Mono", Consolas, monospace; --pad: 26px; --gap: 52px; --radius: 12px; display: block; width: 100%; max-width: 480px; margin: 0 auto; padding: 0; color: var(--text); background: var(--navy); font: 400 16px/1.5 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #mobile-signals * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #mobile-signals [id] { scroll-margin-top: 70px; } /* 1 · The opening: the eyebrow and the sentence, as on the phone Technology page. */ #mobile-signals .mq-open { padding: 52px var(--pad) 0; } #mobile-signals .mq-hero { margin: 0; color: var(--heading); font: 800 clamp(29px, 8.4vw, 36px)/1.08 var(--psv-font-hero); letter-spacing: -.035em; text-wrap: balance; } /* the sentence's promise said plainly, as the phone home page introduces the Terminal */ #mobile-signals .mq-intro { margin: 16px 0 0; color: var(--body); font: 400 15px/1.55 var(--sans); text-wrap: pretty; } #mobile-signals .mq-intro mark { background: none; color: var(--accent); font-weight: 600; } #mobile-signals .mq-open + .mq-sec { padding-top: 52px; } /* The sections' rhythm. */ #mobile-signals .mq-sec { padding: var(--gap) var(--pad) 0; } #mobile-signals .mq-eyebrow { margin: 0 0 12px; color: var(--copy); font: 600 11px/1.3 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; } /* Monitor and Analyze read as the home page's readings: the label with its blue mark, the two-tone heading, the copy, then the live screen. */ #mobile-signals .mq-label { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; } #mobile-signals .mq-label::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--blue); border-radius: 1px; } #mobile-signals .mq-k { color: var(--copy); font: 600 11px/1 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; } #mobile-signals .mq-h2 { margin: 0; color: var(--heading); font: 800 clamp(29px, 8.4vw, 36px)/1.08 var(--psv-font-hero); letter-spacing: -.035em; text-wrap: balance; } #mobile-signals .mq-h2 mark { background: none; color: var(--blue); } #mobile-signals .mq-lead { margin: 16px 0 0; color: var(--body); font: 400 15px/1.55 var(--sans); text-wrap: pretty; } /* 2 · Monitor: the Terminal window of the phone home page, unchanged. */ #mobile-signals .terminal-window { margin: 24px 0 0; overflow: hidden; background: #132d58; border: 1px solid rgba(151,196,230,.34); border-radius: 12px; box-shadow: 0 22px 48px -28px rgba(3,10,22,.85); color: #e6edf5; } #mobile-signals .tw-markets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid rgba(145,184,216,.18); } #mobile-signals .tw-markets button { min-height: 42px; padding: 0; margin-bottom: -1px; color: #7f93a8; background: none; border: 0; border-bottom: 2px solid transparent; font: 500 11px/1 var(--psv-font-mono, "IBM Plex Mono", monospace); letter-spacing: .06em; } #mobile-signals .tw-markets .is-sel { color: #e6edf5; border-bottom-color: #e6edf5; } #mobile-signals .tw-horizons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px 13px; border-bottom: 1px solid rgba(145,184,216,.12); } #mobile-signals .tw-horizons button { min-height: 34px; padding: 0; border-radius: 6px; color: #7f93a8; background: none; border: 0; border-bottom: 2px solid transparent; font: 500 11px/1 var(--psv-font-mono, "IBM Plex Mono", monospace); white-space: nowrap; } #mobile-signals .tw-horizons .is-sel { color: #e6edf5; background: rgba(104,194,238,.12); border-bottom-color: transparent; } #mobile-signals .tw-rows { margin: 0; padding: 3px 13px 4px; list-style: none; } #mobile-signals .tw-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 28px; align-items: center; column-gap: 7px; min-height: 26px; padding: 4px 0; box-sizing: border-box; border-bottom: 1px solid rgba(145,184,216,.09); cursor: pointer; } #mobile-signals .tw-rows li:last-child { border-bottom: 0; } #mobile-signals .tw-rows li:focus-visible { outline: 1px solid #68c2ee; outline-offset: 1px; } #mobile-signals .tw-name { color: #e6edf5; font: 500 12.5px/1.15 var(--sans); overflow-wrap: normal; hyphens: manual; } #mobile-signals .tw-trace { width: 46px; height: 14px; overflow: visible; } #mobile-signals .tw-trace polyline { fill: none; stroke: #68c2ee; stroke-width: 1.2; vector-effect: non-scaling-stroke; } #mobile-signals .tw-trace circle { fill: #68c2ee; } #mobile-signals .tw-value { color: #e6edf5; font: 500 12.5px/1 var(--psv-font-mono, "IBM Plex Mono", monospace); font-variant-numeric: tabular-nums; text-align: right; } #mobile-signals .tw-change { color: #a9b8c8; font: 400 10px/1 var(--psv-font-mono, "IBM Plex Mono", monospace); font-variant-numeric: tabular-nums; } #mobile-signals .tw-note { margin: 0; padding: 9px 13px 11px; border-top: 1px solid rgba(145,184,216,.12); color: #7f93a8; font: 400 10px/1.3 var(--psv-font-mono, "IBM Plex Mono", monospace); } #mobile-signals .terminal-window.is-fresh .tw-value, #mobile-signals .terminal-window.is-fresh .tw-change, #mobile-signals .terminal-window.is-fresh .tw-trace { animation: mq-tw-in .32s ease-out; } @keyframes mq-tw-in { from { opacity: .25; } to { opacity: 1; } } /* 3 · Analyze: the Terminal page's own panel, in the Terminal window's frame. */ #mobile-signals .tm-panel.tm-analyze { --psv-u: 1px; width: 100%; max-width: none; min-height: 0; margin: 24px 0 0; overflow: hidden; border: 1px solid rgba(151,196,230,.34); border-radius: 12px; box-shadow: 0 22px 48px -28px rgba(3,10,22,.85); } #mobile-signals .tm-analyze .tm-head { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 13px 11px; } #mobile-signals .tm-analyze .tm-head__id { display: flex; flex-direction: column; gap: 4px; font-size: 15px; } #mobile-signals .tm-analyze .tm-head__id > span { font: 400 11px/1.35 var(--mono); color: #a9b8c8; letter-spacing: 0; } #mobile-signals .tm-analyze .tm-head__meta { font: 400 11px/1.35 var(--mono); color: #a9b8c8; } #mobile-signals .tm-analyze .tm-head__meta b { color: #e6edf5; font-size: 15px; } /* All measures stay reachable in the page's vertical flow. */ #mobile-signals .tm-analyze .tm-mlist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 10px 13px; overflow: visible; border-bottom: 1px solid rgba(145,184,216,.12); } #mobile-signals .tm-analyze .tm-mlist::-webkit-scrollbar { display: none; } #mobile-signals .tm-analyze .tm-mlist > button { min-width: 0; display: inline-flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 34px; padding: 8px; border: 1px solid rgba(145,184,216,.18); border-radius: 6px; white-space: normal; overflow-wrap: anywhere; font: 500 12px/1 var(--sans); } #mobile-signals .tm-analyze .tm-mlist > button[aria-selected="true"] { border-color: rgba(104,194,238,.6); background: rgba(104,194,238,.12); } #mobile-signals .tm-analyze .tm-mlist > button > span { overflow: visible; text-overflow: clip; } #mobile-signals .tm-analyze .tm-mlist b { font: 500 11.5px/1 var(--mono); } /* the four horizons: a quarter each, value over state */ #mobile-signals .tm-analyze .tm-strip--hz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } #mobile-signals .tm-analyze .tm-strip--hz > button { display: block; min-width: 0; padding: 9px 8px 9px 10px; font: 400 10.5px/1.35 var(--mono); white-space: normal; text-align: left; } #mobile-signals .tm-analyze .tm-strip--hz > button i { display: block; margin-bottom: 3px; font-size: 10px; } #mobile-signals .tm-analyze .tm-strip--hz > button b { font-size: 12.5px; } #mobile-signals .tm-analyze .tm-strip--hz > button em { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the chart over the readings */ #mobile-signals .tm-analyze .tm-split { display: flex; flex-direction: column; min-width: 0; } #mobile-signals .tm-analyze .tm-side { order: -1; border-left: 0; border-bottom: 1px solid rgba(145,184,216,.12); } #mobile-signals .tm-analyze .tm-chart { height: 214px; min-height: 0; margin: 12px 13px; flex: none; } #mobile-signals .tm-analyze .tm-def { padding: 0 13px 12px; } #mobile-signals .tm-analyze .tm-def p { font: 400 12.5px/1.5 var(--sans); } /* the readings: name, value and change, contribution */ #mobile-signals .tm-analyze .tm-table--evidence.is-fixed, #mobile-signals .tm-analyze .tm-table { width: 100%; min-width: 0; table-layout: fixed; } /* with the range, trace and time cells out, the contribution takes the third column */ #mobile-signals .tm-analyze .tm-table--evidence col:nth-child(1) { width: auto; } #mobile-signals .tm-analyze .tm-table--evidence col:nth-child(2) { width: 78px; } #mobile-signals .tm-analyze .tm-table--evidence col:nth-child(3) { width: 96px; } #mobile-signals .tm-analyze .tm-table--evidence col:nth-child(n + 4) { width: 0; } #mobile-signals .tm-analyze .tm-table--evidence :is(th, td):nth-child(3), #mobile-signals .tm-analyze .tm-table--evidence :is(th, td):nth-child(n + 5) { display: none; } #mobile-signals .tm-analyze .tm-table--evidence :is(th, td) { padding-inline: 13px 0; } #mobile-signals .tm-analyze .tm-table--evidence :is(th, td):nth-child(2) { padding-left: 4px; } #mobile-signals .tm-analyze .tm-table--evidence :is(th, td):nth-child(4) { padding-inline: 4px 13px; } #mobile-signals .tm-analyze .tm-table--evidence tr.tm-group > td, #mobile-signals .tm-analyze .tm-table--evidence tr.tm-row--un > td { padding-right: 13px; } #mobile-signals .tm-analyze .tm-table--evidence td:first-child > small { white-space: normal; text-overflow: clip; } /* the column heads close their tracking so the longest language keeps its word */ #mobile-signals .tm-analyze .tm-table--evidence th { letter-spacing: .04em; } #mobile-signals .tm-analyze .tm-foot { padding: 10px 13px 12px; font: 400 10px/1.45 var(--mono); } /* the panel's type as the Terminal window sets it on the phone: names and values at 12.5 px, descriptions in the copy face, nothing under 10 px */ #mobile-signals .tm-analyze .tm-table--evidence .tm-name { font: 500 12.5px/1.3 var(--sans); letter-spacing: 0; color: #e6edf5; } #mobile-signals .tm-analyze .tm-table--evidence td:first-child > small { display: block; margin-top: 2px; font: 400 11px/1.35 var(--sans); letter-spacing: 0; color: #a9b8c8; } #mobile-signals .tm-analyze .tm-table--evidence .tm-tag { font: 500 10px/1 var(--mono); letter-spacing: .04em; } #mobile-signals .tm-analyze .tm-table--evidence .tm-val { font: 500 12.5px/1.2 var(--mono); letter-spacing: 0; } #mobile-signals .tm-analyze .tm-table--evidence .tm-val small { font: 400 10px/1 var(--mono); letter-spacing: 0; } #mobile-signals .tm-analyze .tm-table--evidence tr.tm-group td, #mobile-signals .tm-analyze .tm-table--evidence tr.tm-group td :is(i, b) { font: 500 10.5px/1.3 var(--mono); font-style: normal; letter-spacing: .08em; } #mobile-signals .tm-analyze .tm-table--evidence tr.tm-row--un td { font: 400 13px/1.4 var(--sans); color: #7f93a8; } #mobile-signals .tm-analyze .tm-def i { font: 500 10px/1.4 var(--mono); letter-spacing: .1em; } /* the chart on the navy card the home page's charts stand on */ #mobile-signals .tm-analyze .tm-chart { --tc-navy: #e6edf5; --tc-blue: #338cff; --tc-muted: #a9b8c8; --tc-soft: #7f93a8; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } #mobile-signals .tm-analyze .tm-chart__window { fill: rgb(51 140 255 / .10); } #mobile-signals .tm-analyze .tm-chart__grid { stroke: rgb(145 184 216 / .14); } #mobile-signals .tm-analyze .tm-chart__zero { stroke: rgb(145 184 216 / .42); } #mobile-signals .tm-analyze .tm-chart__mark { stroke: rgb(145 184 216 / .3); } #mobile-signals .tm-analyze .tm-chart__area { fill: rgb(51 140 255 / .16); } #mobile-signals .tm-analyze .tm-chart__extreme { fill: var(--surface); } #mobile-signals .tm-analyze .tm-chart__dot { stroke: var(--surface); } #mobile-signals .tm-analyze .tm-chart__tag { fill: var(--blue); } #mobile-signals .tm-analyze .tm-chart__tip-text { fill: #132d58; } #mobile-signals .tm-analyze .tm-chart__probe { fill: var(--surface); } /* 4 · The benefits, one under the other as the Technology cards run. */ #mobile-signals .mq-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; } #mobile-signals .mq-card { margin: 0; padding: 16px 16px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } #mobile-signals .mq-card h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--heading); font: 800 19px/1.2 var(--psv-font-hero); letter-spacing: -.02em; text-wrap: balance; } #mobile-signals .mq-no { flex: none; color: var(--blue); font: 600 12px/1 var(--mono); letter-spacing: 0; } #mobile-signals .mq-card p { margin: 12px 0 0; color: var(--body); font: 400 15px/1.55 var(--sans); text-wrap: pretty; } #mobile-signals .mq-early { margin: 14px 0 0; } #mobile-signals .mq-early svg { display: block; width: 100%; height: 204px; overflow: visible; } #mobile-signals .mq-early .mq-k { font: 600 9.5px/1 var(--sans); letter-spacing: 1px; fill: var(--copy); } #mobile-signals .mq-early .mq-k--accent { fill: var(--blue-text); } /* a word over a rule keeps the card's colour around it, the rule stops at its edge */ #mobile-signals .mq-early .mq-k--halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; } #mobile-signals .mq-early .mq-rule { stroke: var(--line); stroke-width: 1; } #mobile-signals .mq-early .mq-price { fill: none; stroke: var(--text); stroke-opacity: .85; stroke-width: 1.6; stroke-linejoin: round; } #mobile-signals .mq-early .mq-force { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; } #mobile-signals .mq-early .mq-force-area { fill: var(--blue); fill-opacity: .16; } #mobile-signals .mq-early .mq-signal-rule { stroke: var(--blue); stroke-opacity: .8; stroke-width: 1.4; } #mobile-signals .mq-early .mq-signal-dot { fill: var(--blue); } #mobile-signals .mq-early .mq-break-rule { stroke: var(--text); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 5; } #mobile-signals .mq-early .mq-gain { stroke: var(--blue); stroke-opacity: .85; stroke-width: 1.2; } #mobile-signals .mq-early :is(.mq-signal-rule, .mq-signal-dot, .mq-break-rule, text) { transition: opacity .3s ease; } /* 5 · The closing: the desktop closing's link, then the footer. */ #mobile-signals .mq-next { padding: 76px var(--pad) 0; } #mobile-signals .hn-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 11px 16px; border: 1px solid #5686bf; border-radius: 8px; color: #fff; background: var(--action); font: 500 16px/1.3 var(--sans); text-align: left; text-decoration: none; } #mobile-signals .mq-next-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #mobile-signals .mq-next-txt strong { font: 600 12px/1.3 var(--sans); letter-spacing: 1.6px; } #mobile-signals .mq-next-txt > span { color: rgb(230 237 245 / .78); font: 400 13.5px/1.35 var(--sans); } #mobile-signals .hn-action svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #mobile-signals .hn-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } #mobile-signals .end { height: 52px; } #mobile-signals .hn-foot { padding: 28px var(--pad) 0; border-top: 1px solid var(--line); } #mobile-signals .hn-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 0; padding: 0; list-style: none; } #mobile-signals .hn-pages a { display: inline-block; padding: 4px 0; font: 500 15px/1.3 var(--sans); color: #c0cfe3; text-decoration: none; } /* Sections rise in once, as on the home page. */ #mobile-signals .rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); } #mobile-signals .rv.in { opacity: 1; transform: none; } } /* the narrowest phones: names wrap between words only, so the longest word gets the room */ @media (max-width: 340px) { #mobile-signals .tw-rows { padding: 3px 10px 4px; } #mobile-signals .tw-rows li { grid-template-columns: minmax(0, 1fr) 34px 42px 26px; column-gap: 5px; } #mobile-signals .tw-name { font-size: 11.5px; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { #mobile-signals .rv { opacity: 1; transform: none; transition: none; } } /* Headings in capitals (owner, 13 Oct 2026, D-125); capitals take a little less negative tracking. */ @media (max-width: 760px) { #mobile-signals :is(.mq-hero, .mq-h2, .mq-card h3) { text-transform: uppercase; letter-spacing: -.015em; } /* One heading standard on every phone page (owner, 13 Oct 2026, D-126): the page and section headings are 28 px on a 390 px phone (the card headings reach the same size on their narrower measure), and the first line of text sits 52 px under the header: the label where there is one, the heading below it at the same gap. */ #mobile-signals :is(.mq-hero, .mq-h2) { font-size: clamp(22px, calc((100vw - 52px) / 12.07), 29px); line-height: 1.08; } /* The page heading at the phone home's poster size, as on the other pages (owner, 15 Oct 2026): one size in every language, words wrap freely into balanced lines and the blue sentences start their own line. */ #mobile-signals .mq-open #mq-title { font-size: clamp(24px, calc((100vw - 2 * var(--pad)) / 9.1), 44px); line-height: 1.04; letter-spacing: -.025em; } #mobile-signals #mq-title span { display: block; text-wrap: balance; } #mobile-signals #mq-title mark { display: block; background: none; color: var(--blue); } } /* The word Quantsion inside the page's paragraphs: the opening wordmark's light blue, a little heavier, as on the other phone pages (owner, 15 Oct 2026). */ @media (max-width: 760px) { #mobile-signals .q-brand { color: #67a4ff; font-family: "Inter Text", "Inter", Arial, sans-serif; font-weight: 600; } }