/* inner.css — every page except the home page, in the home's dark "Electric Signal" design ("Reading column", owner decision 2026-10-13). Loaded AFTER home.css, which supplies the tokens, the font, the base reset, the header, the footer, buttons, the aurora, .sec-eyebrow, .pr-rim and the [data-reveal] scroll-in. This sheet adds no colour token of its own: only home.css's custom properties and the rgba() forms of them that home.css already uses. Page shell (website/README.md, "Inner pages", has the full skeleton): main#main.doc.inner-page .inner-hero aurora + signal grid behind the page title .doc-head.inner-col eyebrow, h1, lead .inner-body reading column; "On this page" beside it from 1240px, above it below nav.inner-toc[hidden] filled and shown by inner.js .inner-main the page's .doc-section blocks, then .doc-legal Components inside .inner-main: .doc-section (h2, h3, p, ul, ol), .qa (+ .qa-row/.qa-label), .doc-steps/.doc-step, .modes/.mode, .press-shots, .inner-figure, .collect, .doc-facts, .note, .actions, .store-badge, .path, .tag, .inner-panel, .promo-code (campaign pages), .doc-legal. */ /* ----- Shell ----- */ .inner-page { --col: 760px; --toc: 236px; --toc-gap: clamp(24px, 3vw, 56px); --header-clear: 88px; } @media (prefers-reduced-motion: no-preference) { html:has(.inner-page) { scroll-behavior: smooth; } } .inner-col { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; } /* home.css styles some of its section ids directly. Inner pages reuse a few of those ids (live anchors that can't change), so undo the home-only hairline and scroll offset here; :is() of ids under .inner-page outweighs a bare id. */ .inner-page :is(#how, #get, #faq, #pricing) { border-top: 0; scroll-margin-top: var(--header-clear); } /* Prose defaults sit inside :where() at element weight, so any component class overrides them. */ :where(.inner-page) p { color: var(--text-soft); font-size: 17.5px; line-height: 1.7; text-wrap: pretty; } :where(.inner-page) p + p { margin-top: 16px; } :where(.inner-page) h3 { margin: 0; } :where(.inner-page) strong { font-weight: 700; color: var(--text); } .inner-page a:not(.btn):not(.store-badge) { text-decoration-color: rgba(184,255,249,.4); text-underline-offset: 3px; } .inner-page a:not(.btn):not(.store-badge):hover { text-decoration-color: var(--tip); } /* A quieter button beside .btn-primary (home.css has only the primary). */ .btn-secondary { color: var(--text); background: rgba(184,255,249,.04); box-shadow: 0 0 0 1px rgba(184,255,249,.35) inset; } .btn-secondary:hover { color: var(--tip); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(184,255,249,.7) inset, 0 0 40px -12px rgba(43,212,219,.7); } /* ----- Page top: the home's aurora and signal grid behind the title ----- */ .inner-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); } .inner-hero::before { /* the home hero's fine grid, fading out */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(184,255,249,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(184,255,249,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 35%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 55% 70% at 50% 35%, #000 10%, transparent 75%); } .inner-hero .aurora span { opacity: .3; } /* The aurora and the panel rim hold still here (owner decision 2026-10-13): their loops would run as long as a page is read, with no pause control (WCAG 2.2.2). Each shows its first frame. */ .inner-page .aurora span, .inner-page .pr-rim::before { animation: none; } /* :is() can't hold a ::before */ .inner-hero::after { /* a hairline that fades in from both sides, under the title */ content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(1040px, 100% - 2 * var(--gutter)); height: 1px; background: linear-gradient(90deg, transparent, rgba(43,212,219,.5), rgba(76,94,255,.5), transparent); } .doc-head { text-align: center; } .doc-head .eyebrow { /* spaced capitals over a short accent-to-indigo bar (owner pick 2026-10-23, replacing the lit pill) */ display: inline-block; margin-bottom: 22px; padding-bottom: 12px; font: 600 13px/1.4 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); background: linear-gradient(90deg, var(--accent), var(--indigo)) center bottom / 36px 2px no-repeat; } .doc-head h1 { margin: 0 auto; max-width: 18em; font-weight: 800; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; background: linear-gradient(180deg, #ffffff 0%, var(--text) 45%, var(--tip) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .doc-head .doc-lead { max-width: 40em; margin: 24px auto 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--text-soft); } .doc-head .doc-lead + .doc-lead { margin-top: 14px; } /* ----- The reading column, with "On this page" beside it on wide screens ----- */ .inner-body { padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 9vw, 136px); } .inner-main { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; counter-reset: qa; } .inner-toc { width: min(var(--col), 100% - 2 * var(--gutter)); margin: 0 auto clamp(24px, 3vw, 40px); padding: 20px 22px; border-radius: 20px; background: linear-gradient(180deg, rgba(20,28,31,.7), rgba(9,13,19,.8)); box-shadow: 0 0 0 1px var(--hair) inset; } .inner-toc[hidden] { display: none; } .inner-toc-title { margin-bottom: 10px; font: 600 11.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .inner-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px 24px; } .inner-toc li { counter-increment: toc; } .inner-page .inner-toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 6px 8px; margin-inline: -8px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14.5px; line-height: 1.4; transition: color 160ms var(--ease), background-color 160ms var(--ease); } .inner-toc a::before { content: counter(toc, decimal-leading-zero); content: counter(toc, decimal-leading-zero) / ""; font: 600 11.5px/1.75 var(--mono); color: rgba(159,176,180,.7); } .inner-page .inner-toc a:hover { color: var(--text); background: rgba(255,255,255,.04); } .inner-page .inner-toc a[aria-current] { color: var(--tip); background: rgba(43,212,219,.08); } .inner-toc a[aria-current]::before { color: var(--accent); } @media (min-width: 720px) and (max-width: 1239px) { .inner-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1240px) { .inner-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--col)) minmax(0, 1fr); align-items: start; } .inner-main { grid-column: 2; grid-row: 1; width: auto; } .inner-toc { grid-column: 1; grid-row: 1; justify-self: end; position: sticky; top: var(--header-clear); /* Never wider than the side track minus the gap and the page gutter. */ width: min(var(--toc), 100% - var(--toc-gap) - var(--gutter)); max-height: calc(100vh - var(--header-clear) - 24px); overflow-y: auto; overscroll-behavior: contain; /* Right padding takes a link's 8px bleed, which would otherwise scroll the list sideways; the extra 5px right and below keep home.css's focus ring (2px, offset 3px) inside the clip. */ margin: 8px var(--toc-gap) 0 0; padding: 0 13px 5px 18px; background: none; box-shadow: none; border-radius: 0; border-left: 1px solid var(--hair); } .inner-page .inner-toc a { font-size: 14px; } } /* ----- Sections ----- */ .doc-section { position: relative; scroll-margin-top: var(--header-clear); } .doc-section + .doc-section { margin-top: clamp(72px, 8vw, 112px); } .doc-section > .sec-eyebrow { margin-bottom: 12px; } .doc-section > h2 { margin: 0 0 22px; font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; scroll-margin-top: var(--header-clear); background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--tip) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; max-width: 100%; } .doc-section > h3 { margin: 36px 0 12px; font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; color: var(--text); scroll-margin-top: var(--header-clear); } .doc-section ul:not([class]), .doc-section ol:not([class]) { margin: 16px 0 0; padding-left: 1.2em; color: var(--text-soft); font-size: 17px; line-height: 1.7; } .doc-section li + li { margin-top: 6px; } .doc-section li::marker { color: var(--accent); } .doc-section ul:not([class]) + p, .doc-section ol:not([class]) + p { margin-top: 16px; } /* ----- Inline UI names: a small lit key ----- */ .path { padding: 1px 7px; border-radius: 6px; font-size: .9em; font-weight: 600; color: var(--tip); background: rgba(184,255,249,.06); box-shadow: 0 0 0 1px rgba(184,255,249,.16) inset; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ----- Pro tag: the home's lit Pro chip ----- */ .tag { display: inline-flex; align-items: center; vertical-align: .2em; margin-left: 8px; padding: 5px 10px 4px; border-radius: var(--pill); font: 700 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-accent); background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 0 1px rgba(184,255,249,.5) inset, 0 0 18px -4px rgba(43,212,219,.8); } /* ----- Question / answer cards: the home's bento card, numbered. A card holds either an h3 and plain

s (FAQ), or an h3 and two .qa-rows (problem: Why, then the lit Fix). ----- */ .qa { counter-increment: qa; position: relative; overflow: hidden; isolation: isolate; scroll-margin-top: var(--header-clear); padding: clamp(22px, 2.4vw, 32px); border-radius: 24px; background: linear-gradient(180deg, rgba(20,28,31,.78), rgba(9,13,19,.85)); box-shadow: 0 0 0 1px var(--hair) inset, 0 30px 60px -40px rgba(0,0,0,.9); transition: box-shadow 300ms var(--ease); } .qa + .qa { margin-top: 16px; } .doc-section > h2 + .qa, .doc-section > p + .qa { margin-top: 24px; } .qa::before { /* a soft teal wash from the top-left corner, as on the home's cards */ content: ""; position: absolute; z-index: -1; inset: -50% auto auto -20%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(43,212,219,.12), transparent); pointer-events: none; } .qa::after { /* the number, top right */ content: counter(qa, decimal-leading-zero); content: counter(qa, decimal-leading-zero) / ""; position: absolute; top: clamp(22px, 2.4vw, 32px); right: clamp(22px, 2.4vw, 32px); font: 600 12px/1.9 var(--mono); letter-spacing: .08em; color: rgba(159,176,180,.6); } .qa:target, .qa:hover { box-shadow: 0 0 0 1px rgba(43,212,219,.3) inset, 0 0 50px -24px rgba(43,212,219,.55), 0 30px 60px -40px rgba(0,0,0,.9); } .qa > h3 { margin: 0 40px 18px 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 780; letter-spacing: -.02em; line-height: 1.2; color: var(--text); text-wrap: balance; } .qa > p { font-size: 16.5px; line-height: 1.65; } .qa-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; } .qa-row p { font-size: 16.5px; line-height: 1.65; } .qa-label { justify-self: start; margin-top: 3px; padding: 5px 9px 4px; border-radius: var(--pill); font: 700 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); box-shadow: 0 0 0 1px rgba(159,176,180,.3) inset; } .qa-row + .qa-row { /* the fix: a lit inset panel, so the eye lands on it */ margin-top: 16px; padding: 16px 18px 16px 16px; margin-inline: -4px; border-radius: 16px; background: rgba(43,212,219,.05); box-shadow: 0 0 0 1px rgba(43,212,219,.2) inset; } .qa-row + .qa-row .qa-label { color: var(--on-accent); background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 0 1px rgba(184,255,249,.5) inset, 0 0 16px -4px rgba(43,212,219,.8); } .qa-row + .qa-row p { color: var(--text); } /* A fix that lists several cases (a

of

s): each case after the first on its own lit rule. */ .qa-row > div > p + p { margin-top: 10px; padding-left: 14px; border-left: 2px solid rgba(43,212,219,.45); } /* ----- Numbered steps: the home's timeline nodes on a glowing rail ----- */ .doc-steps { list-style: none; position: relative; margin: 28px 0 0; padding: 0 0 0 64px; counter-reset: step; } .doc-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--tip) 55%, var(--indigo-soft)); box-shadow: 0 0 12px rgba(43,212,219,.5); } .doc-step { counter-increment: step; position: relative; padding-bottom: 32px; } .doc-step:last-child { padding-bottom: 0; } .doc-step::before { content: counter(step); content: counter(step) / ""; position: absolute; left: -64px; top: -4px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 800 17px/1 var(--font); color: var(--on-accent); background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(184,255,249,.4), 0 0 28px -4px rgba(43,212,219,.8); } .doc-step h3 { margin: 4px 0 8px; font-size: 21px; font-weight: 760; letter-spacing: -.02em; line-height: 1.2; color: var(--text); } .doc-step p { font-size: 16.5px; } .doc-steps + p { margin-top: 32px; } /* ----- Cards in a grid: .modes holds .mode cards (3 across; .modes-2 for two). The second card takes the home's indigo look so a pair reads as two different things. ----- */ .modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .modes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mode { position: relative; padding: clamp(22px, 2.4vw, 30px); border-radius: 22px; background: linear-gradient(180deg, rgba(20,28,31,.78), rgba(9,13,19,.85)); box-shadow: 0 0 0 1px var(--hair) inset, 0 30px 60px -40px rgba(0,0,0,.9); } .modes-2 > .mode:nth-child(2) { background: linear-gradient(180deg, rgba(24,30,58,.85), rgba(9,13,22,.92)); box-shadow: 0 0 0 1px rgba(143,155,255,.28) inset, 0 0 80px -30px rgba(76,94,255,.7), 0 30px 60px -40px rgba(0,0,0,.9); } .mode h3 { margin: 0; font-size: 22px; font-weight: 780; letter-spacing: -.02em; line-height: 1.15; color: var(--text); } .inner-page .mode h3 a { color: inherit; text-decoration: none; } .inner-page .mode h3 a:hover { color: var(--tip); } .mode h3 a::after { content: " →"; content: " →" / ""; color: var(--accent); } .mode-when { display: block; margin: 8px 0 12px; font: 600 11.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .modes-2 > .mode:nth-child(2) .mode-when, .modes-2 > .mode:nth-child(2) h3 a::after { color: var(--indigo-soft); } .mode p { font-size: 16px; color: var(--muted); } .modes + p { margin-top: 28px; } /* ----- Image downloads (/press/): .press-shots holds figures, each a linked thumbnail over its caption, two across (one below 640px). ----- */ .press-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .press-shots figure { margin: 0; padding: 10px 10px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(20,28,31,.78), rgba(9,13,19,.85)); box-shadow: 0 0 0 1px var(--hair) inset; } .press-shots a { display: block; border-radius: 12px; overflow: hidden; } .press-shots img { display: block; width: 100%; height: auto; } .press-shots figcaption { margin: 12px 6px 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-soft); } /* ----- A screen capture in a device frame: .inner-figure holds home.css's .dev.dev-tab frame (which draws the tablet, in landscape) and a caption under it. ----- */ .inner-figure { margin: 28px 0 0; } .inner-figure figcaption { margin: 14px 6px 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; } /* ----- A picture under the page title (the Galaxy Tab S12 page's render): wider than the reading column, rounded, on the hero's aurora. Loaded eagerly: it is the page's largest paint. ----- */ .inner-hero-shot { width: min(1040px, 100% - 2 * var(--gutter)); margin: clamp(32px, 4vw, 56px) auto 0; } .inner-hero-shot img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px var(--hair), 0 30px 80px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(43,212,219,.35); } /* ----- Record cards: .collect and .doc-facts share one dark card with hairline rows ----- */ .collect, .doc-facts { margin-top: 24px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(20,28,31,.78), rgba(9,13,19,.85)); box-shadow: 0 0 0 1px var(--hair) inset; } /* Question / short answer rows (privacy's "what we collect"). */ .collect-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 14px 20px; border-bottom: 1px solid rgba(184,255,249,.08); } .collect-row:last-child { border-bottom: 0; } .collect-row p, .collect-row p + p { margin: 0; font-size: 16px; } .collect-row .collect-answer { color: var(--tip); font-weight: 600; } .collect-row .collect-answer[data-answer="some"] { color: var(--text); } /* "yes, some": not lit as a clean no */ .collect + p, .collect + .note { margin-top: 24px; } /* Labelled facts (a company's details, an address): a plain