/* ═══════════════════════════════════════════════════════════════════════════ IMPAUER NETWORK — MOBILE LAYER Loaded in after site.css / site-sections.css, so nothing repaints after first paint. Every selector carries a leading `html` (or an extra class) so it outranks the page-level rules by SPECIFICITY rather than by source order — the layer works no matter where a page declares its styles. EVERY rule lives inside a max-width media query. Nothing here can reach 1024px and above, so the approved desktop (1200 / 1280 / 1366 / 1440 / 1536 / 1920) is byte-for-byte unchanged. Breakpoints ≤ 374 small mobile ≤ 767 phone composition ≤ 430 standard mobile ≤ 900 mobile experience (menu, stacked heroes) ≤ 599 large mobile ≤ 1023 tablet corrections ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────── 1. tablet + mobile corrections ───────────────── */ @media (max-width: 1023px) { /* dynamic viewport units: iOS/Android toolbars must never crop a stage */ /* the intro follows the hero directly now — sized to content, not the viewport */ html #onenet .cs-intro { min-height: 0; } html #onenet.cs-flat .cs-scene { min-height: 78vh; min-height: 78svh; } html #manifesto.hp-section { min-height: 88vh; min-height: 88svh; } html #mf-hero { min-height: auto; } /* headline composition: intended line breaks, never a broken word */ html h1, html h2, html h3, html .bh, html .wh, html .bsub, html .site-hero-title, html .subpage-hero__title, html .cs-title { hyphens: none; word-break: normal; overflow-wrap: normal; } /* nothing is laid out to a width the phone does not have */ html .split > *, html .fut-cmp > *, html .ns-layout > *, html .aa-wrap > * { min-width: 0; } /* touch targets — one rule for every action on the site */ html .btn, html .link-arrow, html .cmp-tab { min-height: 48px; } html .gf-legal a, html .site-footer .fnav a { min-height: 44px; display: inline-flex; align-items: center; } } /* ───────────────────────── 2. header + navigation ───────────────────────── */ @media (max-width: 900px) { html .site-nav { height: 62px; } html .site-nav .logo-chip img { width: clamp(112px, 34vw, 138px); } html .site-nav .menu-btn { width: 48px; height: 48px; border-color: rgba(190, 214, 255, 0.16); } html .site-nav .menu-btn:active { border-color: var(--blue); } html .mobile-menu { inset: 62px 0 0 0; padding-top: 20px; } html .mobile-menu a { font-size: clamp(24px, 7.4vw, 30px); padding: 18px 2px; } html .mobile-menu a[aria-current="page"], html .mobile-menu a[aria-current="page"] .mn { color: var(--blue); } /* the menu's action keeps the button type scale, not the 28px link scale */ html .mobile-menu a.btn { margin-top: 26px; min-height: 56px; font: 600 13px/1.2 var(--f-mono); letter-spacing: 0.13em; border-bottom: 0; } html .mobile-menu a.btn::before { flex: 1; width: auto; } html body.menu-open { overscroll-behavior: none; } } /* ────────────── 2a. one network — pinned stage sequence ────────────────── */ /* The phone now runs the same pinned story as the desktop: the stage area stays put while five stages replace each other in the same spot. The track gives each stage roughly one screen of scroll, which is one deliberate step per stage without trapping the reader for too long. */ @media (max-width: 900px) { html #onenet .cs-track { height: 270vh; height: 270svh; } html #onenet .cs-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } html #onenet .cs-scene { position: absolute; inset: 0; min-height: 0; display: block; border-top: 0; } /* the copy sits slightly above centre of the pinned area — one column, one place */ html #onenet .cs-copy { position: absolute; left: 0; right: 0; top: 44%; width: 100%; max-width: none; transform: translateY(-50%); padding: 0 max(20px, env(safe-area-inset-left)); align-items: center; text-align: center; } html #onenet .cs-art { background-position: center; background-size: cover; } /* vertical shading, since the art now sits behind the copy rather than beside it */ html #onenet .cs-shade { background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 34%, rgba(0,0,0,0.7) 68%, rgba(0,0,0,0.92) 100%); } html #onenet .cs-num { margin-bottom: 18px; } html #onenet .cs-title { margin-bottom: 20px; max-width: 100%; } html #onenet .cs-line { margin-bottom: 22px; max-width: 30ch; font-size: clamp(17px, 4.4vw, 20px); } html #onenet .cs-cat { max-width: 100%; font-size: clamp(12px, 3.2vw, 13.5px); } html #onenet .cs-cat::before { margin-bottom: 16px; } /* progress: five counters centred under the stage, the current one in blue */ html #onenet .cs-prog { display: flex; left: 0; right: 0; justify-content: center; gap: 18px; bottom: calc(26px + env(safe-area-inset-bottom)); font-size: 11.5px; letter-spacing: 0.18em; } } @media (max-width: 767px) { html #onenet .cs-title { font-size: clamp(38px, 10.6vw, 48px); } html #onenet .cs-copy { top: 42%; } } /* ────────────── 2g. PauerAI — real world intelligence, pinned on mobile ─── */ /* The desktop map's three columns cannot work on a phone, so the same sequence is recomposed vertically: the core sits above one audience slot, and each audience replaces the previous one in that slot as the paths are drawn. */ @media (max-width: 900px) { html #ai-map .map-track { height: 220vh; height: 220svh; } html #ai-map .map-stage { position: sticky; top: 62px; height: calc(100vh - 62px); height: calc(100svh - 62px); display: flex; align-items: center; overflow: hidden; } html #ai-map .map-in { padding: 0; padding-inline: max(20px, env(safe-area-inset-left)); } html #ai-map .map-head { grid-template-columns: 1fr; gap: 16px; } html #ai-map .map-head h2 { max-width: none; font-size: clamp(30px, 8.6vw, 40px); line-height: 1.02; letter-spacing: -0.032em; } html #ai-map .map-sub { margin-bottom: 10px; font-size: clamp(19px, 5.2vw, 24px); } html #ai-map .map-copy { max-width: none; font-size: clamp(16px, 4.2vw, 17.5px); line-height: 1.55; } /* core above, one audience slot below */ html #ai-map .map-grid { margin-top: 26px; grid-template-columns: 1fr; grid-template-rows: auto auto; column-gap: 0; row-gap: 18px; counter-reset: aud; } html #ai-map .map-core { grid-area: 1 / 1; align-self: center; min-height: clamp(150px, 34vw, 210px); } html #ai-map .map-aud, html #ai-map .map-aud.tl, html #ai-map .map-aud.tr, html #ai-map .map-aud.bl, html #ai-map .map-aud.br { grid-area: 2 / 1; justify-self: stretch; max-width: none; text-align: left; padding-top: 26px; counter-increment: aud; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), transform .28s var(--ease); transform: translateY(8px); } html #ai-map .map-aud.cur { opacity: 1; visibility: visible; transform: none; } /* the stage number doubles as the progress read-out */ html #ai-map .map-aud::before { content: "0" counter(aud) " / 04"; position: absolute; left: 0; top: 0; font: 500 11px var(--f-mono); letter-spacing: 0.2em; color: var(--blue); } html #ai-map .map-aud h3 { margin-bottom: 8px; min-height: 0; font-size: clamp(26px, 7.4vw, 32px); line-height: 1.06; } html #ai-map .map-aud p { max-width: none; min-height: 108px; font-size: clamp(16px, 4.2vw, 17.5px); line-height: 1.55; } /* the path anchor moves to the top of the shared slot so the core still draws a real connection to the audience being shown */ html #ai-map .map-aud .dot, html #ai-map .map-aud.tl .dot, html #ai-map .map-aud.tr .dot, html #ai-map .map-aud.bl .dot, html #ai-map .map-aud.br .dot { top: 8px; left: 50%; right: auto; transform: translateX(-50%); } } @media (max-width: 374px) { html #ai-map .map-head h2 { font-size: 27px; } html #ai-map .map-aud h3 { font-size: 24px; } html #ai-map .map-aud p { font-size: 15.5px; min-height: 120px; } } @media (max-width: 767px) and (max-height: 700px) { html #ai-map .map-head { gap: 10px; } html #ai-map .map-head h2 { font-size: 25px; } html #ai-map .map-sub { margin-bottom: 6px; font-size: 17px; } html #ai-map .map-copy { font-size: 15px; line-height: 1.45; } html #ai-map .map-grid { margin-top: 16px; row-gap: 12px; } html #ai-map .map-core { min-height: 120px; } html #ai-map .map-aud h3 { font-size: 21px; } html #ai-map .map-aud p { font-size: 14.5px; line-height: 1.45; min-height: 92px; } } /* ────────────── 2f. PauerAI — meet PauerAI, pinned on mobile ───────────── */ /* The phone runs the same three-act intelligence plane as the desktop: the ecosystem labels are positioned around the live core by the same renderer, so the categories read as connected to PauerAI rather than as a static list. */ @media (max-width: 900px) { html #ai-meet .ip-track { height: 240vh; height: 240svh; } html #ai-meet .ip-stage { position: sticky; top: 62px; height: calc(100vh - 62px); height: calc(100svh - 62px); display: grid; place-items: center; padding: 0; } html #ai-meet .ip-content { width: 100%; padding-inline: max(20px, env(safe-area-inset-left)); } html #ai-meet .ip-context { top: 16px; gap: 4px; } html #ai-meet .ip-context b { font-size: 17px; } html #ai-meet .ip-context span { font-size: 10.5px; letter-spacing: 0.22em; } html #ai-meet .ip-act1 h2 { margin-bottom: 16px; max-width: none; font-size: clamp(32px, 9vw, 42px); line-height: 1.03; white-space: normal; } html #ai-meet .ip-act1 .ip-sub { margin-bottom: 34px; font-size: clamp(17px, 4.8vw, 21px); } html #ai-meet .ip-lines { gap: 18px; max-width: none; } html #ai-meet .ip-lines p { font-size: clamp(18px, 5vw, 22px); line-height: 1.4; } html #ai-meet .ip-act2 p { max-width: none; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.08; letter-spacing: -0.035em; } html #ai-meet .ip-act3 h3 { margin-bottom: 26px; font-size: clamp(24px, 7vw, 32px); } html #ai-meet .ip-prin { grid-template-columns: 1fr 1fr; gap: 14px 12px; max-width: none; } html #ai-meet .ip-prin span:nth-child(4) { grid-column: auto; } html #ai-meet .ip-prin span:nth-child(5) { grid-column: 1 / -1; } html #ai-meet .ip-prin span { padding-top: 14px; font-size: 14px; line-height: 1.2; } html #ai-meet .ip-eco b { font-size: 10.5px; letter-spacing: 0.14em; } } @media (max-width: 374px) { html #ai-meet .ip-act1 h2 { font-size: 28px; } html #ai-meet .ip-lines p { font-size: 17px; } html #ai-meet .ip-act2 p { font-size: 24px; } html #ai-meet .ip-prin span { font-size: 13px; } } @media (max-width: 767px) and (max-height: 700px) { html #ai-meet .ip-act1 h2 { margin-bottom: 12px; font-size: 26px; } html #ai-meet .ip-act1 .ip-sub { margin-bottom: 22px; font-size: 15.5px; } html #ai-meet .ip-lines { gap: 12px; } html #ai-meet .ip-lines p { font-size: 16px; } html #ai-meet .ip-act2 p { font-size: 22px; } html #ai-meet .ip-act3 h3 { margin-bottom: 18px; font-size: 21px; } html #ai-meet .ip-prin span { padding-top: 10px; font-size: 12.5px; } } /* ────────────── 2e. gPoW — productive consensus, built on scroll ────────── */ /* The introduction scrolls normally, then the stage pins and the six principles are revealed one at a time in the same place. */ @media (max-width: 767px) { html #gp-productive .pc-cue { display: flex; align-items: center; gap: 8px; margin: 26px 0 0; font: 500 11.5px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8B98AC; transition: opacity .3s var(--ease); } html #gp-productive .pc-cue span { color: var(--blue); font-size: 14px; } html #gp-productive .pc-cue.used { opacity: 0; } html #gp-productive .pc-track { position: relative; height: 372vh; height: 372svh; } /* the pinned composition is centred in the usable viewport, so the stage reads as one balanced block rather than a short card with a void beneath it */ html #gp-productive .pc-sticky { position: sticky; top: 96px; min-height: calc(100vh - 136px); display: grid; align-content: center; min-height: calc(100vh - 136px); min-height: calc(100svh - 136px); display: grid; align-content: center; grid-template-rows: auto auto; padding: 0; } /* one slot, one position: every principle lands on the same lines */ html #gp-productive .prin-grid { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: pc; } html #gp-productive .prin { grid-area: 1 / 1; padding-top: 58px; counter-increment: pc; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), transform .28s var(--ease); transform: translateY(10px); } /* the stage number carries the sequence, matching the numbering used across the page's other technical lists */ html #gp-productive .prin::after { content: "0" counter(pc); position: absolute; left: 0; top: 24px; font: 500 12px var(--f-mono); letter-spacing: 0.2em; color: var(--blue); } html #gp-productive .prin.on { opacity: 1; visibility: visible; transform: none; } html #gp-productive .prin h3 { min-height: 84px; font-size: clamp(29px, 8.4vw, 37px); line-height: 1.05; } html #gp-productive .prin p { min-height: 128px; font-size: clamp(16.5px, 4.4vw, 18.5px); line-height: 1.58; } /* progress: six stops, the passed ones stay lit */ html #gp-productive .pc-prog { display: flex; align-items: center; gap: 14px; margin-top: 40px; font: 500 11px var(--f-mono); letter-spacing: 0.18em; } html #gp-productive .pc-pt { color: rgba(233,240,250,0.32); transition: color .35s var(--ease); } html #gp-productive .pc-pt.done { color: rgba(233,240,250,0.6); } html #gp-productive .pc-pt.on { color: var(--blue); } } @media (prefers-reduced-motion: reduce) { html #gp-productive .prin { transition: opacity .2s linear; transform: none; } } /* ────────────── 2d. gPoW — consensus at a glance ───────────────────────── */ @media (max-width: 1023px) { /* overflow-x: auto makes the other axis a scroll container too, which leaves a stray vertical scrollbar inside the table — only sideways scroll belongs here, and the static sideways hint is replaced by the tabbed comparison */ html #gp-matrix .cmp-scroll { overflow-y: hidden; } html #gp-matrix .cmp-hint { display: none; } html #gp-matrix .cmp-wrap, html #gp-matrix .cmp-layout { max-width: 100%; min-width: 0; } } @media (max-width: 767px) { /* the comparison becomes a guided sequence: the introduction scrolls away, then the stage pins and each model replaces the previous one in place */ html #gp-matrix { display: block; overflow: visible; padding-block: clamp(72px, 12vw, 88px) 40px; } /* the track carries the scroll distance for three stages; the panel itself stays content-sized, so the light band ends soon after the last row */ html #gp-matrix .cmp-track { position: relative; height: 235vh; height: 235svh; } html #gp-matrix .cmp-mobile { position: sticky; top: 96px; height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; justify-content: flex-start; } html #gp-matrix .cmp-panels { display: grid; } html #gp-matrix .cmp-panel { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; pointer-events: none; } html #gp-matrix .cmp-panel.on { opacity: 1; visibility: visible; pointer-events: auto; } html #gp-matrix .cmp-count { order: 3; } html #gp-matrix .cmp-intro { margin-bottom: 4px; } html #gp-matrix .cmp-cue { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 500 11.5px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #7A8AA5; transition: opacity .3s var(--ease); } html #gp-matrix .cmp-cue span { color: var(--blue); font-size: 14px; } html #gp-matrix .cmp-cue.used { opacity: 0; } html #gp-matrix .cmp-count { display: block; order: 3; margin: 14px 0 0; font: 500 11.5px var(--f-mono); letter-spacing: 0.18em; color: #8B98AC; } /* values change in place: the rows never move, only the answers cross-fade */ html #gp-matrix .cmp-panel.on { animation: cmpIn .2s var(--ease); } } @keyframes cmpIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } /* short viewports: the whole panel has to live inside 100svh minus its offset, so the reserved row height goes and the feature number sits inline */ @media (max-width: 767px) and (max-height: 700px) { html #gp-matrix .cmp-mobile { top: 66px; } html #gp-matrix .cmp-cue { display: none; } html #gp-matrix .cmp-tab { min-height: 44px; padding: 8px 12px; font-size: 12px; } html #gp-matrix .cmp-row { min-height: 44px; padding: 9px 0; gap: 12px; } html #gp-matrix .cmp-row .f { font-size: 15px; } html #gp-matrix .cmp-row .f i { display: inline; margin: 0 8px 0 0; } html #gp-matrix .cmp-row .v { font-size: 14.5px; } html #gp-matrix .cmp-row .v.yes { font-size: 18px; } html #gp-matrix .cmp-count { margin-top: 10px; } } @media (prefers-reduced-motion: reduce) { html #gp-matrix .cmp-panel.on { animation: none; } } /* ────────────── 2h. homepage architecture — four mobile chapters ───────── */ /* The desktop reads the four components as copy-beside-diagram rows. On a phone each one becomes its own chapter: label, title and one supporting sentence arrive, then the diagram module pins in the optical centre of the screen and plays, then the chapter releases into the next. One rhythm for gPoW, ADE, PauerAI and PauerCoin; the rail runs quietly down the far edge and never shares a column with the content. */ @media (max-width: 767px) { html #technology { --arch-gutter: max(clamp(20px, 5.5vw, 40px), env(safe-area-inset-right)); /* the page-level rule clips this section on the x axis, which would make it the sticky constraint container and stop the chapters pinning; the root already clips the x axis at these widths */ overflow-x: visible; } /* the content owns the full column — the rail moves out into the page margin */ html #technology .arch-sys { margin-top: clamp(52px, 10vw, 78px); padding-left: 0; } html #technology .arch-rail { left: calc(-1 * var(--arch-gutter) + clamp(6px, 2.2vw, 10px)); top: 10px; bottom: 10px; width: 1px; background: rgba(80,122,185,.14); } html #technology .arch-railNode { left: -3.5px; width: 8px; height: 8px; border-width: 1px; border-color: rgba(80,122,185,.4); transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); } html #technology .arch-railNode.on { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 3px rgba(77,143,232,.16), 0 0 12px rgba(77,143,232,.5); } /* one chapter. The pin's scroll room is a real in-flow block after the module (not row padding): Chrome only holds a sticky element while flow content follows it. */ html #technology .arch-row { display: block; gap: 0; padding: clamp(58px, 10vw, 88px) 0 0; } html #technology .arch-row + .arch-row { border-top: 0; } html #technology .arch-row::after { content: ""; display: block; height: clamp(150px, 28vh, 250px); height: clamp(150px, 28svh, 250px); } /* editorial opening: quiet blue label, tight strong title, one sentence */ html #technology .arch-ex { padding-bottom: 0; } html #technology .arch-ex .arch-eyebrow { font-size: 10.5px; letter-spacing: .3em; color: var(--blue); } html #technology .arch-ex h3 { margin-top: 18px; font-size: clamp(28px, 7.8vw, 35px); line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; max-width: 15ch; } html #technology .arch-ex p { margin-top: 16px; max-width: 33ch; font-size: clamp(16px, 4.3vw, 17.5px); line-height: 1.62; color: #A9B7CB; } /* ── the module: the chapter's focal object ───────────────────────────── A real card with clean outer margins, generous internal air, the diagram centred in its own stage and the takeaway reading as a statement. */ html #technology .arch-panel { position: sticky; top: calc(62px + clamp(16px, 4vh, 38px)); top: calc(62px + clamp(16px, 4svh, 38px)); margin-top: clamp(32px, 6vh, 48px); margin-top: clamp(32px, 6svh, 48px); border: 1px solid rgba(96,140,205,.3); border-radius: 20px; background: radial-gradient(120% 80% at 50% 0%, rgba(45,96,170,.18) 0%, rgba(8,14,26,0) 62%), linear-gradient(180deg, rgba(13,21,37,.92) 0%, rgba(6,10,19,.86) 100%); box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(158,196,255,.08); /* the module keeps a clean 12px margin either side and gives the rest of the width to the diagram, so its internal labels stay legible */ margin-inline: calc(-1 * (var(--arch-gutter) - 12px)); padding: clamp(18px, 4.6vw, 24px) 8px 0; overflow: hidden; } html #technology .arch-panel svg { width: 100%; } /* the three landscape diagrams sit optically centred in the usable viewport, so the pinned moment reads as one object in open space. The offset is derived from the module's own height: the diagram keeps its 520:300 ratio inside the card, plus the card's air and takeaway block. */ html #technology .arch-panel:has(#p1), html #technology .arch-panel:has(#p2), html #technology .arch-panel:has(#p3) { top: max(calc(62px + clamp(16px, 4vh, 38px)), calc(62px + (100vh - 62px - (57.7vw - 30px) - 190px) / 2)); top: max(calc(62px + clamp(16px, 4svh, 38px)), calc(62px + (100svh - 62px - (57.7vw - 30px) - 190px) / 2)); } /* PauerCoin's diagram is authored portrait — fitted to the usable height so it never runs past the fold on a short phone */ html #technology .arch-panel:has(#p4) svg { max-height: none; } /* ── the takeaway: a supporting statement, not footer text ─────────────── */ /* ── the takeaway: two art-directed layers, one system on every card ──── a quiet keyword line, then the branded conclusion in blue. Both are authored to hold one line at phone widths, so no break is accidental. */ html #technology .arch-cap { margin: clamp(22px, 4.6vw, 28px) 0 0; padding: clamp(20px, 4.4vw, 24px) clamp(4px, 1.5vw, 8px) clamp(20px, 4.4vw, 24px); border-top: 1px solid rgba(96,140,205,.16); font-size: 13px; line-height: 1.7; letter-spacing: .085em; word-spacing: .1em; color: #C6D4E8; /* each layer is authored to hold one line, so balancing (which splits a nearly-full line into two even ones) would undo the art direction */ text-wrap: normal; } html #technology .arch-cap .cl { display: block; font-size: 13px; line-height: 1.55; } html #technology .arch-cap b, html #technology .arch-cap b.cl { display: block; margin-top: 13px; color: var(--blue); font-weight: 600; font-size: 14px; letter-spacing: .07em; line-height: 1.55; } /* internal legibility at phone scale: the smallest technical labels step up so every label in the diagram still reads inside the card */ html #p1 text { font-size: 16px; } /* the block's three payload rows: the phone type scale needs more room than the desktop geometry gives it, so the block, its bands and their text are re-laid out here (SVG geometry properties are settable from CSS) — every label now sits comfortably inside its row */ html #p1 #p1block { x: 264px; width: 238px; } html #p1 .p1bandbg { x: 272px; width: 224px; height: 48px; } html #p1 .p1rule { x: 272px; height: 48px; } /* each row rises three units so the label clears the row's top edge and the sub-label clears its bottom edge — even padding on all four sides */ html #p1 .p1band[data-b="0"] .p1bandbg, html #p1 .p1band[data-b="0"] .p1rule { y: 74px; } html #p1 .p1band[data-b="1"] .p1bandbg, html #p1 .p1band[data-b="1"] .p1rule { y: 126px; } html #p1 .p1band[data-b="2"] .p1bandbg, html #p1 .p1band[data-b="2"] .p1rule { y: 178px; } html #p1 .p1lab { font-size: 14.5px; } html #p1 .p1desc { font-size: 13.5px; } /* the "any compute" chip: a taller box so its label is optically centred */ html #p1 #p1any rect { y: 127px; height: 30px; } html #p1 #p1any text { font-size: 14px; } html #p2 #p2lab { font-size: 22px; } html #p2 text { font-size: 17px; } html #p3 text { font-size: 17px; } html #p4 .p4lab, html #p4 .p4supl { font-size: 18px; } html #p4 .p4ul { font-size: 17px; } html #p4 .p4mini { font-size: 15px; } html #p4 .p4supn { font-size: 21px; } } /* the smallest phones: one step down so both takeaway layers still hold their authored single lines */ @media (max-width: 400px) { html #technology .arch-cap, html #technology .arch-cap .cl { font-size: 12.5px; letter-spacing: .07em; } html #technology .arch-cap b, html #technology .arch-cap b.cl { font-size: 13.5px; letter-spacing: .06em; } } @media (max-width: 374px) { html #technology .arch-ex h3 { font-size: 26px; } html #technology .arch-cap, html #technology .arch-cap .cl { font-size: 12px; letter-spacing: .055em; } html #technology .arch-cap b, html #technology .arch-cap b.cl { font-size: 13px; letter-spacing: .05em; } } /* short phones: the same composition, one step tighter, so a pinned module and its takeaway always clear the fold */ @media (max-width: 767px) and (max-height: 700px) { html #technology .arch-row { padding-top: clamp(44px, 8vw, 64px); } html #technology .arch-row::after { height: clamp(120px, 24vh, 190px); height: clamp(120px, 24svh, 190px); } html #technology .arch-panel { margin-top: clamp(22px, 4vh, 32px); margin-top: clamp(22px, 4svh, 32px); padding-top: 16px; } html #technology .arch-cap { margin-top: 16px; padding-block: 14px 16px; } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { html #technology .arch-panel { position: static; } html #technology .arch-row::after { height: clamp(24px, 4vw, 40px); } } /* ────────────── 2i. built for — one ecosystem, two waves ───────────────── */ /* The phone runs the same idea as the desktop orbit, recomposed: the cube is the anchor and the eight participants share four slots around it. Wave one (consumers, businesses, developers, AI) resolves quickly, recedes, and wave two (enterprises, tokenization, infrastructure, global commerce) takes the same positions — so the network stays while its participants change. */ @media (max-width: 767px) { /* the section clips its x axis, which would make it the sticky constraint container; the root already clips at these widths */ html #adoption { overflow-x: visible; } /* the stage pins; the room it holds for is one real block after it */ html #adoption .wrap::after { content: ""; display: block; height: 84vh; height: 84svh; } html #adoption .orb { position: sticky; top: calc(62px + clamp(10px, 2.4vh, 24px)); top: calc(62px + clamp(10px, 2.4svh, 24px)); width: 100%; max-width: 420px; margin: clamp(18px, 4vh, 34px) auto 0; width: 100%; max-width: 420px; margin: clamp(18px, 4vh, 34px) auto 0; margin: clamp(18px, 4svh, 34px) auto 0; aspect-ratio: auto; height: clamp(400px, 62vh, 540px); height: clamp(400px, 62svh, 540px); } html #adoption svg.orings { display: none; } /* one soft field behind the anchor, at half the desktop strength */ html #adoption .o-halo { display: block; inset: 12% 4%; background: radial-gradient(ellipse 40% 34% at 50% 50%, rgba(61,141,227,.16), transparent 72%); } /* the cube: centred, the one thing that never moves */ html #adoption .cube-core { position: absolute; left: 50%; top: 50%; width: clamp(96px, 30vw, 124px); margin: 0; transform: translate(-50%, -50%); } /* four slots, shared by both waves. The icon centre is placed with a margin rather than a transform, so transform stays free for the wave motion. */ html #adoption .onode { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 108px; margin-left: -54px; margin-top: -23px; height: auto; transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s step-end; } html #adoption .onode .ic { position: static; width: 46px; } /* the section's environment is pale, so the labels are set in the deep Impauer navy the page uses for this band — readable at a glance, never dependent on a hover state a phone does not have */ html #adoption .onode .lb { position: static; width: 100%; font: 550 14.5px/1.3 var(--f-display); letter-spacing: -0.008em; text-align: center; white-space: normal; color: #14243C; min-height: 2.6em; } /* touch devices keep the resting colour through :hover and :focus, so a sticky hover after a tap can never wash a label out */ html #adoption .onode:hover .lb, html #adoption .onode:focus-visible .lb { color: #14243C; } /* wave one */ html #adoption .n-con { left: 50%; top: 9%; } html #adoption .n-bus { left: 20%; top: 41%; } html #adoption .n-dev { left: 80%; top: 41%; } html #adoption .n-ai { left: 50%; top: 86%; } /* wave two takes the same four slots */ html #adoption .n-ent { left: 50%; top: 9%; } html #adoption .n-tok { left: 20%; top: 41%; } html #adoption .n-inf { left: 80%; top: 41%; } html #adoption .n-gc { left: 50%; top: 86%; } /* connective traces: one thin blue line per slot, pointing at the anchor */ html #adoption .onode::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .34s var(--ease) .12s; } /* the traces stay quieter than the labels: cube first, icons second, labels clearly readable, connections last */ html #adoption .n-con::after, html #adoption .n-ent::after { left: 50%; top: calc(100% + 4px); width: 1px; height: clamp(18px, 5vh, 34px); left: 50%; top: calc(100% + 4px); width: 1px; height: clamp(18px, 5vh, 34px); height: clamp(18px, 5svh, 34px); background: linear-gradient(180deg, rgba(46,111,220,.3), rgba(46,111,220,0)); } html #adoption .n-ai::after, html #adoption .n-gc::after { left: 50%; bottom: calc(100% + 6px); width: 1px; height: clamp(18px, 5vh, 34px); left: 50%; bottom: calc(100% + 6px); width: 1px; height: clamp(18px, 5vh, 34px); height: clamp(18px, 5svh, 34px); background: linear-gradient(0deg, rgba(46,111,220,.3), rgba(46,111,220,0)); } html #adoption .n-bus::after, html #adoption .n-tok::after { left: 100%; top: 23px; height: 1px; width: clamp(14px, 5vw, 26px); background: linear-gradient(90deg, rgba(46,111,220,.3), rgba(46,111,220,0)); } html #adoption .n-dev::after, html #adoption .n-inf::after { right: 100%; top: 23px; height: 1px; width: clamp(14px, 5vw, 26px); background: linear-gradient(270deg, rgba(46,111,220,.3), rgba(46,111,220,0)); } html #adoption .orb.go .onode::after { opacity: 1; } /* wave two rests off-stage until the driver hands over (the driver writes the live state inline, so nothing in the desktop cascade can fight it) */ html #adoption .n-ent, html #adoption .n-tok, html #adoption .n-inf, html #adoption .n-gc { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97); } /* each wave resolves inside half a second, not several */ html #adoption .orb.go .cube-core { transition-duration: .5s, .5s; transition-delay: 0s, 0s; } html #adoption .cube-core .i-top { transition-delay: .1s, .1s; } html #adoption .cube-core .i-left, html #adoption .cube-core .i-right { transition-delay: .18s, .18s; } html #adoption .orb.go .onode .ic { transition-duration: .34s, .34s, .25s, .25s; transition-delay: calc(.08s + var(--i) * .08s), calc(.08s + var(--i) * .08s), 0s, 0s; } html #adoption .orb.go .onode .lb { transition-duration: .34s, .25s; transition-delay: calc(.08s + var(--i) * .08s), 0s; } /* both waves' icons and labels are present as soon as the stage is lit — the node itself carries the wave's entrance, so the second wave arrives on its own 0–260ms rhythm rather than replaying the first wave's stagger */ html #adoption .orb.go .n-ent .ic, html #adoption .orb.go .n-tok .ic, html #adoption .orb.go .n-inf .ic, html #adoption .orb.go .n-gc .ic, html #adoption .orb.go .n-ent .lb, html #adoption .orb.go .n-tok .lb, html #adoption .orb.go .n-inf .lb, html #adoption .orb.go .n-gc .lb { transition-delay: 0s; } } @media (max-width: 374px) { html #adoption .onode { width: 96px; margin-left: -48px; } html #adoption .onode .lb { font-size: 13.5px; } } /* reduced motion: no pinning, no waves — one calm stacked ecosystem list */ @media (prefers-reduced-motion: reduce) and (max-width: 767px) { html #adoption .orb { position: static; height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 14px; } html #adoption .wrap::after { display: none; } html #adoption .cube-core { position: static; transform: none; grid-column: 1 / -1; order: 5; margin: 6px auto; } html #adoption .onode { position: static; margin: 0; width: auto; } html #adoption .onode::after { display: none; } html #adoption .n-con { order: 1; grid-column: 1 / -1; } html #adoption .n-bus { order: 2; } html #adoption .n-dev { order: 3; } html #adoption .n-ai { order: 4; grid-column: 1 / -1; } html #adoption .n-ent { order: 6; grid-column: 1 / -1; } html #adoption .n-tok { order: 7; } html #adoption .n-inf { order: 8; } html #adoption .n-gc { order: 9; grid-column: 1 / -1; } html #adoption .n-ent, html #adoption .n-tok, html #adoption .n-inf, html #adoption .n-gc { opacity: 1; visibility: visible; transform: none; } } /* ────────────── 2j. PauerCoin — the double value creation engine ────────── */ /* The desktop pins this stage once and scrubs the whole story from scroll: demand rises into the coin, supply contracts toward it, the two converge and the conclusion lands. The phone now runs that same scrubbed sequence, only recomposed vertically — demand above the coin, supply below it — with the coin as the dominant object and the arrows reduced to short directional traces rather than one oversized arrow. */ @media (max-width: 767px) { html #pc-tokenomics.tk-pin .tk-track { height: 215vh; height: 215svh; } html #pc-tokenomics.tk-pin .tk-stage { top: 62px; height: calc(100vh - 62px); height: calc(100svh - 62px); align-items: center; } html #pc-tokenomics .tk-engine { justify-content: center; gap: clamp(12px, 2vh, 20px); gap: clamp(12px, 2svh, 20px); padding: clamp(10px, 2vh, 22px) max(20px, env(safe-area-inset-left)); padding: clamp(10px, 2svh, 22px) max(20px, env(safe-area-inset-left)); } html #pc-tokenomics .tk-engine-title { font-size: clamp(27px, 8vw, 36px); line-height: 1.02; letter-spacing: -0.032em; } html #pc-tokenomics .tk-engine-lead { margin-top: 10px; max-width: 30ch; margin-inline: auto; font-size: clamp(15px, 4vw, 16.5px); line-height: 1.5; } /* one column: demand, the coin, supply — the coin holds the centre */ html #pc-tokenomics .tk-forces { display: flex; flex-direction: column; align-items: center; row-gap: clamp(10px, 1.6vh, 18px); row-gap: clamp(10px, 1.6svh, 18px); max-width: 420px; } html #pc-tokenomics .tk-force, html #pc-tokenomics .tk-force.left, html #pc-tokenomics .tk-force.right { display: block; max-width: 100%; text-align: center; } html #pc-tokenomics .tk-force.left { order: 1; } html #pc-tokenomics .tk-core { order: 2; } html #pc-tokenomics .tk-force.right { order: 3; } html #pc-tokenomics .tk-force h4 { margin-bottom: 6px; white-space: normal; font-size: clamp(20px, 5.6vw, 24px); line-height: 1.1; } html #pc-tokenomics .tk-force p { max-width: 32ch; margin-inline: auto; font-size: clamp(14.5px, 3.9vw, 15.5px); line-height: 1.48; } /* the directional trace: short, centred, drawn by the same scrub */ html #pc-tokenomics .tk-diagram { width: 88px; min-height: 0; height: clamp(26px, 4.4vh, 40px); margin: clamp(8px, 1.4vh, 14px) auto 0; height: clamp(26px, 4.4svh, 40px); margin: clamp(8px, 1.4svh, 14px) auto 0; } html #pc-tokenomics .tk-diagram svg { height: 100%; } html #pc-tokenomics .tk-force.right .tk-diagram { margin: 0 auto clamp(8px, 1.4vh, 14px); margin: 0 auto clamp(8px, 1.4svh, 14px); } /* the coin is the hero: most of the usable width, never taller than its share of the stage, with its own light unclipped */ html #pc-tokenomics .tk-core { width: min(86vw, 40vh); width: min(86vw, 40svh); max-width: 360px; } /* the state each force is in is legible without hover: the active heading takes the brand blue and its trace brightens */ html #pc-tokenomics .tk-force h4 { transition: color .24s var(--ease); } html #pc-tokenomics .tk-diagram { transition: filter .24s var(--ease); } html #pc-tokenomics[data-hi="demand"] .tk-force.left h4, html #pc-tokenomics[data-hi="both"] .tk-force.left h4 { color: var(--blue); } html #pc-tokenomics[data-hi="demand"] .tk-diagram.demand, html #pc-tokenomics[data-hi="both"] .tk-diagram.demand { filter: brightness(1.55); } html #pc-tokenomics[data-hi="supply"] .tk-force.right h4, html #pc-tokenomics[data-hi="both"] .tk-force.right h4 { color: var(--blue); } html #pc-tokenomics[data-hi="supply"] .tk-diagram.supply, html #pc-tokenomics[data-hi="both"] .tk-diagram.supply { filter: brightness(1.55); } html #pc-tokenomics[data-hi="both"] .tk-core-ring { opacity: 1; } /* the inactive force stays readable — secondary, never hidden */ html #pc-tokenomics[data-hi="demand"] .tk-force.right p, html #pc-tokenomics[data-hi="supply"] .tk-force.left p { color: #7D8CA4; } html #pc-tokenomics .tk-force { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* the conclusion: one tight statement under a hairline */ html #pc-tokenomics .tk-payoff-wrap { margin-top: clamp(12px, 2vh, 22px); margin-top: clamp(12px, 2svh, 22px); padding-top: clamp(14px, 2.2vh, 22px); padding-top: clamp(14px, 2.2svh, 22px); } html #pc-tokenomics .tk-payoff { font-size: clamp(16px, 4.4vw, 19px); line-height: 1.34; max-width: 34ch; margin-inline: auto; } } /* if the animation clock has stalled, the scrubbed stage can never reveal — the pin is dropped and the whole engine reads as one stacked composition, so nobody can land on two screens of empty black */ @media (max-width: 767px) { html.anim-stalled #pc-tokenomics.tk-pin .tk-track { height: auto; } html.anim-stalled #pc-tokenomics.tk-pin .tk-stage { position: static; height: auto; } html.anim-stalled #pc-tokenomics .tk-engine { position: relative; inset: auto; pointer-events: auto; padding-block: clamp(56px, 10vw, 96px); } html.anim-stalled #pc-tokenomics .tk-engine, html.anim-stalled #pc-tokenomics .tk-engine-head, html.anim-stalled #pc-tokenomics .tk-force, html.anim-stalled #pc-tokenomics .tk-payoff-wrap { opacity: 1 !important; transform: none !important; } html.anim-stalled #pc-tokenomics .tk-arrow-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } html.anim-stalled #pc-tokenomics .tk-arrow-head { opacity: 1 !important; } html.anim-stalled #pc-tokenomics .tk-core { --coinO: 1; --coreScale: 1; --haloO: .45; --ringO: .7; } } @media (max-width: 374px) { html #pc-tokenomics .tk-engine { padding-inline: max(16px, env(safe-area-inset-left)); } html #pc-tokenomics .tk-engine-title { font-size: 25px; } html #pc-tokenomics .tk-force h4 { font-size: 19px; } html #pc-tokenomics .tk-core { width: min(88vw, 36vh); width: min(88vw, 36svh); } } /* ────────────── 2c. gPoW — why consensus must evolve, pinned on mobile ──── */ /* The phone runs the same story as the desktop: the introduction plays first, parks into a compact label, then each generation replaces the previous one in the same place while the field evolves behind it. */ @media (max-width: 900px) { html #gp-evolve .ce-track { height: 290vh; height: 290svh; } html #gp-evolve .ce-stage { position: sticky; top: 62px; height: calc(100vh - 62px); height: calc(100svh - 62px); display: block; padding: 0; } html #gp-evolve .ce-canvas { opacity: 1; } /* the veil now shades top-to-bottom, since the field sits under the copy */ html #gp-evolve .ce-veil { background: linear-gradient(180deg, #EEF3F8 0%, rgba(238,243,248,0.96) 30%, rgba(238,243,248,0.72) 56%, rgba(238,243,248,0.3) 100%); } /* one fixed composition: the stage owns the geometry, so every generation lands on exactly the same lines no matter how long its copy runs */ html #gp-evolve .ce-wrap { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0 max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); } html #gp-evolve .ce-plate { position: relative; display: block; height: 100%; max-width: 100%; } html #gp-evolve .ce-intro { position: absolute; top: 88px; left: 0; right: 0; } html #gp-evolve .ce-intro h2 { margin-bottom: 14px; font-size: clamp(32px, 9.4vw, 44px); line-height: 1.0; } html #gp-evolve .ce-intro .ce-sub { margin-bottom: 18px; font-size: clamp(17px, 4.8vw, 21px); } html #gp-evolve .ce-intro .ce-lede { font-size: clamp(15.5px, 4.2vw, 17px); line-height: 1.55; } /* the persistent label: same words, small, out of the subject's way */ html #gp-evolve .ce-context { top: 18px; left: max(20px, env(safe-area-inset-left)); gap: 8px; } html #gp-evolve .ce-context b { font-size: 21px; letter-spacing: -0.02em; } html #gp-evolve .ce-context span { font-size: 12.5px; line-height: 1.3; } /* one subject slot: same top edge, top-aligned, for all three generations and the closing statement — never centred on its own content height */ html #gp-evolve .ce-gens, html #gp-evolve .ce-final { left: 0; right: 0; width: auto; max-width: none; top: 196px; transform: none; align-items: start; } html #gp-evolve .ce-gens { align-content: start; } html #gp-evolve .ce-gen .era { margin-bottom: 16px; font-size: 12px; letter-spacing: 0.2em; } /* the title area is reserved, so a two-line name never pushes the copy down */ html #gp-evolve .ce-gen h3 { margin-bottom: 16px; min-height: 70px; font-size: clamp(28px, 8vw, 36px); line-height: 1.02; } html #gp-evolve .ce-gen p { min-height: 190px; max-width: none; font-size: clamp(15.5px, 4.1vw, 17px); line-height: 1.5; } html #gp-evolve .ce-final p { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.1; } html #gp-evolve .ce-final p + p { margin-top: 14px; } /* the rail stays functional: three stops, filled as the story advances */ html #gp-evolve .ce-rail { left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); gap: 10px; padding-inline: max(20px, env(safe-area-inset-left)); } html #gp-evolve .ce-rail .ce-pt { font-size: 11px; gap: 7px; } } @media (min-width: 431px) and (max-width: 767px) { html #gp-evolve .ce-wrap { padding-inline: 24px; } } @media (max-width: 374px) { html #gp-evolve .ce-wrap { padding-inline: max(16px, env(safe-area-inset-left)); } html #gp-evolve .ce-gen h3 { font-size: 26px; min-height: 58px; } html #gp-evolve .ce-gen p { font-size: 15px; } html #gp-evolve .ce-final p { font-size: 24px; } } /* short viewports (small phones, landscape): one shared step down so the three stages stay pixel-aligned and the copy always clears the progress rail */ @media (max-width: 767px) and (max-height: 700px) { html #gp-evolve .ce-intro { top: 54px; } html #gp-evolve .ce-intro h2 { margin-bottom: 10px; font-size: clamp(26px, 8.4vw, 32px); } html #gp-evolve .ce-intro .ce-sub { margin-bottom: 12px; font-size: 15.5px; } html #gp-evolve .ce-intro .ce-lede { font-size: 14.5px; line-height: 1.5; } html #gp-evolve .ce-context { top: 12px; gap: 6px; } html #gp-evolve .ce-context b { font-size: 17px; } html #gp-evolve .ce-context span { font-size: 11px; } html #gp-evolve .ce-gens, html #gp-evolve .ce-final { top: 108px; } html #gp-evolve .ce-gen .era { margin-bottom: 10px; font-size: 11px; } html #gp-evolve .ce-gen h3 { margin-bottom: 10px; min-height: 50px; font-size: 23px; } html #gp-evolve .ce-gen p { min-height: 138px; font-size: 14.5px; line-height: 1.45; } html #gp-evolve .ce-final p { font-size: 22px; } html #gp-evolve .ce-rail { bottom: calc(14px + env(safe-area-inset-bottom)); } } /* the three freedom statements each hold on one line — "Anyone can participate." is the longest, so it sets the phone size */ @media (max-width: 767px) { html #freedom .fr-manif .line { display: block; white-space: nowrap; font-size: clamp(23px, 7.5vw, 36px); } } @media (max-width: 374px) { html #onenet .cs-title { font-size: 34px; } html #onenet .cs-copy { padding-inline: max(16px, env(safe-area-inset-left)); } html #onenet .cs-prog { gap: 13px; } } /* ────────────── 2b. unified mobile hero top offset ─────────────────────── */ /* One token drives the distance from the sticky header to the first line of hero content on every page, so every mobile hero starts at the same height: 62px nav + 60px = 122px on tablet, + 68px = 130px on a phone, + 56px = 118px on the smallest handsets — plus the notch inset where the device reports one. Every hero (home, gPoW, ADE, PauerAI, PauerCoin, manifesto) reads this one value, so the content never sits jammed under the header. */ @media (max-width: 1023px) { html:root { --m-hero-top: max(60px, calc(env(safe-area-inset-top) + 60px)); } } @media (max-width: 767px) { html:root { --m-hero-top: max(68px, calc(env(safe-area-inset-top) + 68px)); } } @media (max-width: 374px) { html:root { --m-hero-top: max(56px, calc(env(safe-area-inset-top) + 56px)); } } /* ───────────────────────── 3. homepage hero ─────────────────────────────── */ /* The mobile composition — copy on clean black, artwork as its own band beneath the actions — now runs to 900px, arriving with the mobile menu. */ @media (max-width: 900px) { html #hero { padding: 0 8px 8px; } html #hero .stage { display: block; min-height: 0; --hm-art: clamp(240px, 78vw, 400px); padding: var(--m-hero-top) 0 calc(var(--hm-art) + 32px); } html #hero .hero-inner { padding: 0 max(20px, env(safe-area-inset-left)) 0; } html #hero .core { top: auto; bottom: 0; right: 0; left: 0; width: 100%; height: var(--hm-art); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); } html #hero .core .heroart, html #hero.in .core .heroart { object-fit: cover; object-position: 58% center; opacity: 1; } html #hero .coreFade { top: auto; height: var(--hm-art); background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,0) 58%); } html #hero .fadeL, html #hero .lum-b, html #hero .lum-c { display: none; } html #hero .lum-a { width: 150%; height: 60%; right: -25%; top: auto; bottom: -10%; } /* tablet band: the two-line composition, one step down in scale */ html body.home-page #hero h1.site-hero-title { font-size: clamp(46px, 6.4vw, 56px); line-height: 1; letter-spacing: -0.034em; max-width: 100%; } html body.home-page #hero .sub { margin-top: 24px; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.55; max-width: 46ch; } html #hero .hero-cta { margin-top: 30px; } } /* tablet: the page caps the closing phrase at 10em, which wraps "Growth" onto its own line even though the column has 145px of room to spare. Lifting the cap only inside this band keeps the two-line composition; 1024–1099 keeps the approved behaviour and ≥1100 already has its own nowrap rule. */ @media (min-width: 768px) and (max-width: 1023px) { html body.home-page #hero h1 .h1-d .lineclip:last-child > span { max-width: none; } } @media (max-width: 767px) { /* The phone headline holds three deliberate lines: Decentralized AI / that Powers / Economic Growth The size is derived from the real measure rather than guessed — the longest line ("Economic Growth") runs 7.93px per 1px of font-size in Geist, and the content width is the viewport less the stage inset and the inner padding. calc(12vw - 6px) keeps that line inside the column from 320 to 599px, so the composition never collapses into five lines. */ html body.home-page #hero h1.site-hero-title { font-size: clamp(31px, calc(12vw - 6px), 47px); line-height: 1.02; letter-spacing: -0.032em; } html body.home-page #hero .sub { margin-top: 26px; font-size: clamp(16.5px, 4.4vw, 18.5px); line-height: 1.5; max-width: 32ch; } html body.home-page #hero .sub .s1 { display: block; } html #hero .hero-cta { margin-top: 32px; } /* the hero keeps the action rail on the phone — same element as desktop, phone proportions */ html #hero .hero-cta .btn { width: auto; min-height: 48px; justify-content: flex-start; padding: 0; border-radius: 0; background: none; color: var(--white); box-shadow: none; gap: 14px; font-size: 12.5px; letter-spacing: 0.14em; } html #hero .hero-cta .btn::before { display: block; flex: none; width: 56px; } html #hero .hero-cta .btn::after { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #02060F; border: 1px solid var(--blue); font-size: 16px; padding: 0; } html #hero .hero-cta .btn:active::after { transform: scale(.96); } } @media (max-width: 374px) { html #hero .hero-inner { padding-inline: max(16px, env(safe-area-inset-left)); } /* the smallest phones: statement lines wrap rather than run past the edge */ } @media (min-width: 431px) and (max-width: 767px) { html #hero .hero-inner { padding-inline: 24px; } } /* ───────────────────────── 4. homepage sections ─────────────────────────── */ @media (max-width: 900px) { /* "One Network. One Economy. / Infinite Possibilities." overflowed its column at 46px and lost its final letters — sized to the real measure. */ html body.home-page #onenet h2.fw-rv { font-size: clamp(32px, 10.6vw, 44px); line-height: 1.04; letter-spacing: -0.032em; } /* ── the opening statement, art directed for the phone ────────────────── Three deliberate lines — one complete sentence each, the blue payoff last — instead of one long string breaking wherever it runs out of room. */ html body.home-page #onenet h2.fw-rv .fw-s { display: block; } html body.home-page #onenet h2.fw-rv br { display: none; } html body.home-page #onenet h2.fw-rv .b { display: block; margin-top: .2em; } html #onenet .cs-intro { padding-block: clamp(56px, 8vw, 84px) clamp(110px, 14vw, 128px); } } /* ─────── 4b. one network — the opening statement on the phone ──────────── */ @media (max-width: 767px) { html #onenet .cs-intro { justify-content: flex-start; padding: clamp(48px, 7vh, 72px) max(20px, env(safe-area-inset-left)) clamp(88px, 13vh, 116px); padding: clamp(48px, 7svh, 72px) max(20px, env(safe-area-inset-left)) clamp(88px, 13svh, 116px); } html #onenet .fw-eyebrow { gap: 10px; font-size: 10.5px; letter-spacing: .3em; color: var(--blue); } html #onenet .fw-eyebrow::before { width: 24px; } html body.home-page #onenet h2.fw-rv { margin-top: 22px; font-size: clamp(34px, 9.9vw, 46px); line-height: 1.0; letter-spacing: -0.034em; max-width: 100%; text-wrap: normal; } html #onenet .fw-sub { margin-top: clamp(26px, 4vh, 34px); margin-top: clamp(26px, 4svh, 34px); max-width: 26ch; font-size: clamp(19px, 5.2vw, 22px); line-height: 1.24; font-weight: 600; } /* the sector line: two balanced rows, hairline separators instead of dots */ html #onenet .fw-ticker { margin-top: clamp(28px, 4.4vh, 38px); margin-top: clamp(28px, 4.4svh, 38px); justify-content: flex-start; align-items: center; column-gap: 0; row-gap: 12px; font-size: 11px; letter-spacing: .22em; color: #93A9C8; } html #onenet .fw-ticker i { display: inline-flex; align-items: center; justify-content: center; width: 26px; padding: 0; color: transparent; } html #onenet .fw-ticker i::before { content: ""; width: 1px; height: 11px; background: rgba(122,170,240,.42); } /* the third separator becomes the line break, so the rows are authored: AI · FINANCE · COMMERCE / INFRASTRUCTURE · COMMUNICATIONS */ html #onenet .fw-ticker i:nth-of-type(3) { flex: 0 0 100%; width: auto; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; } html #onenet .fw-ticker i:nth-of-type(3)::before { display: none; } html #onenet .fw-body { margin-top: clamp(24px, 3.6vh, 32px); margin-top: clamp(24px, 3.6svh, 32px); max-width: 34ch; font-size: clamp(16px, 4.3vw, 17.5px); line-height: 1.62; color: #A2B0C6; } html #onenet .cs-cue { left: max(20px, env(safe-area-inset-left)); bottom: 30px; font-size: 10px; } } @media (min-width: 431px) and (max-width: 767px) { html #onenet .cs-intro { padding-inline: 24px; } html #onenet .cs-cue { left: 24px; } } @media (max-width: 374px) { html #onenet .cs-intro { padding-inline: max(16px, env(safe-area-inset-left)); } html body.home-page #onenet h2.fw-rv { font-size: 31px; } html #onenet .fw-ticker { letter-spacing: .18em; } html #onenet .fw-ticker i { width: 20px; } } /* ───────────────────────── 5. product-page heroes ───────────────────────── */ /* ONE mobile hero system for gPoW / ADE / PauerAI / PauerCoin. A single centred inner column, one type scale, one spacing rhythm, one artwork band. Pages supply only their words, imagery and focal point. */ @media (max-width: 900px) { /* the mobile nav really is 62px — the token follows it, so every calc(100svh - var(--nav-h)) and the menu overlay meet the bar exactly */ html:root { --nav-h: 62px; } html:root { --subhero-title-size: clamp(34px, 8.4vw, 52px); --subhero-tagline-size: clamp(18px, 4.6vw, 21px); --subhero-copy: 100%; } html .subpage-hero { --m-art-h: clamp(240px, 78vw, 400px); min-height: 0; align-items: flex-start; padding: var(--m-hero-top) 0 calc(var(--m-art-h) + 32px); } html .subpage-hero__container { padding-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); } html .subpage-hero__content { width: 100%; max-width: 100%; } html .subpage-hero__product { font-size: clamp(30px, 8vw, 44px); } html .subpage-hero__eyebrow { white-space: nowrap; } /* the signature callout stacks its two statements on tablet too, so the white setup / blue conclusion structure holds on every non-desktop tier */ html .subpage-hero__tagline { display: block; width: auto; max-width: 100%; white-space: normal; } html .subpage-hero__tagline > span { display: block; } /* ART: the whole delivered composition is shown — sized to fit, bled past both edges so it reads large, bottom-aligned, black-backed */ html .subpage-hero__visual { inset: auto 0 0 0; top: auto; width: auto; height: var(--m-art-h); transform: none; background-size: contain; background-repeat: no-repeat; background-position: var(--m-art-focal, center) bottom; animation-name: none; opacity: 1; } /* per-page artwork heights are set by un-queried #id rules, so the shared band height is claimed at id strength — all four pages, one height */ html #gp-hero .subpage-hero__visual, html #ade-hero .subpage-hero__visual, html #ai-hero .subpage-hero__visual, html #pc-hero .subpage-hero__visual, html #ai-hero .ai-sphere-stage { height: var(--m-art-h); } html .subpage-hero__visual::after { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 16%, rgba(0,0,0,0) 44%); } html .subpage-hero__actions { margin-top: 30px; } /* the homepage artwork and PauerAI's stage join the same system */ html #hero .core { left: 0; right: 0; width: auto; } html #hero .core .heroart, html #hero.in .core .heroart { object-fit: contain; object-position: center bottom; } html #ai-hero .ai-sphere-stage { left: 0; right: 0; width: auto; animation-name: none; opacity: 1; } html #ai-hero .ai-sphere, html #ai-hero .ai-sphere.is-in { object-fit: contain; object-position: center bottom; animation-name: none; opacity: 1; } html #ai-hero .ai-sphere-stage > canvas { animation-name: none; opacity: 1; } } /* tablet: the artwork sits in a centred column at its own scale */ @media (min-width: 768px) and (max-width: 900px) { html .subpage-hero { --m-art-h: clamp(340px, 46vw, 440px); } html .subpage-hero__visual { inset: auto max(0px, calc((100% - 760px) / 2)) 0; background-size: contain; background-position: center bottom; } html #hero .stage { --hm-art: clamp(340px, 46vw, 440px); } html #hero .core, html #ai-hero .ai-sphere-stage { left: max(0px, calc((100% - 760px) / 2)); right: max(0px, calc((100% - 760px) / 2)); } } /* ───── 5b. the phone hero — one shared responsive system ─────────────── */ /* Below 768px all four product heroes are one composition, top to bottom: eyebrow → product name → statement → supporting copy → signature → artwork → next step. Everything is in normal flow, so nothing can overlap, the artwork owns its own band (whole image, never cropped, never wider than the phone) and the hero ends exactly where its content ends. */ @media (max-width: 767px) { html:root { --subhero-eyebrow-size: 11.5px; --subhero-title-size: clamp(32px, 8.8vw, 36px); --subhero-subtitle-size: clamp(18px, 4.9vw, 20px); --subhero-body-size: clamp(16px, 4.3vw, 17px); --subhero-tagline-size: clamp(17px, 4.6vw, 19px); --subhero-gap-eyebrow: 12px; --subhero-gap-product: 20px; --subhero-gap-title: 18px; --subhero-gap-subtitle: 14px; --subhero-gap-body: 12px; --subhero-gap-tagline: 20px; } html .subpage-hero { --m-art-h: min(calc(100vw / 1.6), 300px); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); padding: clamp(36px, 5vh, 52px) 0 24px; padding: clamp(36px, 5svh, 52px) 0 24px; } html .subpage-hero__container { order: 1; width: 100%; } html .subpage-hero__content { width: 100%; max-width: 100%; margin: 0; text-align: left; align-items: flex-start; } /* the page name is visible again and leads the stack, straight after the eyebrow */ html .subpage-hero__eyebrow { order: -2; display: block; font-weight: 600; letter-spacing: 0.22em; padding: 0; white-space: nowrap; } html .subpage-hero__product { order: -1; position: static; width: 100%; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 0 0 var(--subhero-gap-product); padding: 0; font-size: clamp(28px, 7.6vw, 32px); line-height: 1.06; letter-spacing: -0.03em; animation: subheroProductIn .7s var(--ease) both; } html .subpage-hero__product::after { width: 40px; margin-top: 14px; } html .subpage-hero__title { line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; width: 100%; max-width: 100%; text-wrap: balance; } html .subpage-hero__title .subpage-hero__line, html #pc-hero .subpage-hero__title .subpage-hero__line { display: inline; white-space: normal; min-width: 0; } html .subpage-hero__title .subpage-hero__line + .subpage-hero__line::before { content: " "; } html #pc-hero { --subhero-title-size: clamp(32px, 8.8vw, 36px); } html .subpage-hero__subtitle { line-height: 1.35; font-weight: 500; max-width: 100%; margin-inline: 0; } html #pc-hero .subpage-hero__subtitle { max-width: 100%; white-space: normal; font-size: var(--subhero-subtitle-size); letter-spacing: -0.015em; } html .subpage-hero__body { margin-inline: 0; max-width: 100%; line-height: 1.6; color: #B7C4D8; } html .subpage-hero__tagline { display: block; align-self: flex-start; width: auto; max-width: 100%; text-align: left; margin-inline: 0; margin-top: var(--subhero-gap-tagline); padding-left: 16px; font-size: var(--subhero-tagline-size); font-weight: 600; line-height: 1.4; letter-spacing: -0.012em; } html .subpage-hero__tagline > span { display: block; } html .subpage-hero__tagline > span + span { margin-top: 1px; } html .subpage-hero__tagline::before { top: 0; transform: none; height: 100%; width: 2px; } html .subpage-hero__actions { align-self: stretch; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 26px; } html .subpage-hero__actions .btn { width: 100%; min-height: 52px; justify-content: space-between; } html .subpage-hero__actions .btn::before { flex: 1; width: auto; } /* ARTWORK: its own in-flow band under the copy — the whole composition, fitted inside the phone's width, never bled past an edge */ html .subpage-hero__visual, html #gp-hero .subpage-hero__visual, html #ade-hero .subpage-hero__visual, html #ai-hero .subpage-hero__visual, html #pc-hero .subpage-hero__visual { order: 2; position: relative; inset: auto; top: auto; width: 100%; height: var(--m-art-h); margin: 18px 0 0; transform: none; animation: none; opacity: 1; background-size: contain; background-repeat: no-repeat; background-position: center center; } html .subpage-hero__visual::after { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, #000 100%); } /* PauerAI's stage joins the same band; its desktop side-veil is not needed */ html #ai-hero .ai-sphere-stage { order: 2; position: relative; inset: auto; top: auto; width: 100%; height: var(--m-art-h); margin: 18px 0 0; transform: none; animation: none; opacity: 1; } html #ai-hero .ai-sphere, html #ai-hero .ai-sphere.is-in { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; animation: none; opacity: 1; transform: none; } html #ai-hero .ai-sphere-veil { display: none; } /* the next step: one quiet arrow under the artwork, a real 48px target */ html .subpage-hero__next { order: 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 6px auto 0; border-radius: 50%; border: 1px solid rgba(190,214,255,.18); color: var(--blue); text-decoration: none; font: 500 15px/1 var(--f-mono); animation: subheroTagIn .7s var(--ease) .5s both; } html .subpage-hero__next:active { border-color: var(--blue); } } /* side padding steps with the phone, matching the rest of the mobile system */ @media (min-width: 431px) and (max-width: 767px) { html .subpage-hero__container { padding-inline: 24px; } } @media (max-width: 374px) { html .subpage-hero__container { padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); } } /* short phones (SE-class): the same composition, one shared step tighter */ @media (max-width: 767px) and (max-height: 700px) { html:root { --subhero-gap-product: 20px; --subhero-gap-title: 18px; --subhero-gap-subtitle: 14px; --subhero-gap-tagline: 20px; } html .subpage-hero { --m-art-h: min(calc(100vw / 1.7), 240px); } } /* ───────────────────────── 6. actions ───────────────────────────────────── */ @media (max-width: 767px) { /* the manifesto label joins the shared eyebrow system: one small blue mono line above the headline on every page, no chip on phones */ html #mf-hero .pill { border: 0; background: none; padding: 0; min-height: 0; font: 500 12px/1.2 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); } html #mf-hero .pill .dot { display: none; } } @media (max-width: 767px) { html .btn { min-height: 52px; } } /* ───────────────────────── 7. tables + horizontal scrollers ─────────────── */ @media (max-width: 1023px) { /* readable data on a phone; the swipe affordance is added by mobile.js */ html .wp table { font-size: 15px; } html .wp figure table, html .wp table.mt { font-size: 16px; } html .m-swipe { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 500 12px var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8B98AC; transition: opacity .3s var(--ease); } html .m-swipe[data-used="1"] { opacity: 0; } html .section-light .m-swipe, html .wp .m-swipe { color: #5F7290; } html .m-swipe i { font-style: normal; color: var(--blue); } /* scroll containers behave like one gesture, never a trap */ html [data-mscroll], html .cmp-tabs, html .wp .tw, html .wp nav.rail { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } } /* ───────────────────────── 8. long-form reading ─────────────────────────── */ @media (max-width: 767px) { html .wp .shell { padding-inline: max(20px, env(safe-area-inset-left)); padding-top: var(--m-hero-top); } html .wp p, html .wp li { font-size: 17px; line-height: 1.62; } html .wp .split { grid-template-columns: 1fr; } html #mf-hero { padding-block: var(--m-hero-top) 96px; } } /* ────────────── 9a. mobile pre-footer closings ──────────────────────────── */ /* One closing system for every route. The shared .prefooter-cta shell keeps its own wording and artwork per page; the phone gets one alignment, one type scale, one CTA treatment and one hand-off into the footer. */ @media (max-width: 767px) { html .prefooter-cta { padding: 84px 0 calc(36px + env(safe-area-inset-bottom)); } html .prefooter-cta.prefooter-cta.prefooter-cta > .wrap-wide, html .prefooter-cta.prefooter-cta.prefooter-cta .prefooter-cta__inner { width: 100%; padding-inline: max(20px, env(safe-area-inset-left)); align-items: stretch; text-align: left; } /* long paragraphs read left-aligned; nothing is a narrow centred column */ html .prefooter-cta .gp-head { align-items: stretch; text-align: left; } html .prefooter-cta .bh { max-width: none; margin: 0; text-align: left; font-size: clamp(34px, 9.6vw, 44px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: normal; } html .prefooter-cta .bsub { max-width: 34ch; margin: 24px 0 0; text-align: left; font-size: clamp(16.5px, 4.4vw, 18.5px); line-height: 1.6; text-wrap: pretty; } html .prefooter-cta .bcopy { max-width: 34ch; margin: 20px 0 0; text-align: left; font-size: clamp(16px, 4.2vw, 17.5px); line-height: 1.6; } html .prefooter-cta .cta-tag { margin: 26px 0 0; text-align: left; font-size: 13px; } /* the page artwork stays in the lower half, clear of the reading area */ html .prefooter-cta .gp-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 58%); mask-image: linear-gradient(180deg, transparent 0, #000 58%); } /* one CTA treatment site-wide: the homepage action rail — label, fine blue line, circular arrow node. No filled rectangle; the whole rail is the target. */ html .prefooter-cta .wp-row { flex-direction: column; align-items: flex-start; width: 100%; gap: 14px; margin-top: 30px !important; } html .prefooter-cta .wp-row .btn { width: auto; max-width: none; min-height: 48px; padding: 0; box-sizing: border-box; justify-content: flex-start; gap: 14px; border-radius: 0; background: none; box-shadow: none; white-space: nowrap; font-size: 12.5px; letter-spacing: 0.14em; color: var(--white); } html .prefooter-cta .wp-row .btn::before { display: block; flex: none; width: 56px; } html .prefooter-cta .wp-row .btn::after { order: 2; width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #02060F; border: 1px solid var(--blue); box-shadow: none; font-size: 16px; line-height: 1; padding: 0; } html .prefooter-cta .wp-row .btn:active::after { transform: scale(.96); } /* the same deliberate hand-off into the footer on every page */ html .prefooter-cta .gp-head::after { content: ""; display: block; height: 1px; margin-top: 44px; background: linear-gradient(90deg, rgba(90,155,234,0) 0%, rgba(90,155,234,0.35) 50%, rgba(90,155,234,0) 100%); } /* the manifesto keeps its editorial close — only its height and hand-off join */ html #mf-close { padding-bottom: calc(48px + env(safe-area-inset-bottom)); } html #mf-close p.big { margin-top: 40px; max-width: none; } html #mf-close .cta-tag { margin: 30px 0 0; font-size: 13px; } html #mf-close .wp-row { margin-top: 22px; } /* homepage closing + manifesto closing: the same rail as every other route */ html #manifesto .pcta-row .btn, html #mf-close .wp-row .btn { width: auto; min-height: 48px; justify-content: flex-start; gap: 14px; padding: 0; font-size: 12.5px; letter-spacing: 0.14em; } html #manifesto .pcta-row .btn::before, html #mf-close .wp-row .btn::before { flex: none; width: 56px; } html #mf-close::after { content: ""; display: block; height: 1px; margin-top: 52px; background: linear-gradient(90deg, rgba(150,170,196,0) 0%, rgba(90,155,234,0.35) 50%, rgba(150,170,196,0) 100%); } } @media (min-width: 431px) and (max-width: 767px) { html .prefooter-cta.prefooter-cta.prefooter-cta > .wrap-wide { padding-inline: 24px; } } @media (max-width: 374px) { html .prefooter-cta.prefooter-cta.prefooter-cta > .wrap-wide { padding-inline: max(16px, env(safe-area-inset-left)); } html .prefooter-cta .bh { font-size: 30px; } html .prefooter-cta .wp-row .btn { font-size: 12px; } } /* tablet: copy and artwork share the width instead of stretching the phone composition across the page */ @media (min-width: 768px) and (max-width: 1023px) { html .prefooter-cta { padding-block: 104px 88px; } html .prefooter-cta .bh { max-width: 20ch; } html .prefooter-cta .bsub { max-width: 52ch; } } /* ───────────────────────── 9. mobile footer ─────────────────────────────── */ /* Below 768px the desktop sitemap is replaced by a compact closing section. 768–1023px keeps the existing two-column tablet grid, only tighter. */ @media (max-width: 1023px) { html .gfooter, html .gfooter.site-footer { padding: clamp(56px, 9vw, 72px) 0 calc(28px + env(safe-area-inset-bottom)); } } @media (max-width: 767px) { html .gfooter .gf-grid, html .gfooter .gf-bar { display: none; } html .gfooter .gf-cube { display: none; } html .gfooter .wrap-wide { width: 100%; padding-inline: max(22px, env(safe-area-inset-left)); } html .gfooter .gf-m { display: block; text-align: left; } /* ── the network statement: the footer opens on meaning, not on a logo ── */ html .gf-m-ind { padding-top: clamp(4px, 2vw, 12px); } html .gf-m-ind h3 { margin: 0 0 18px; font-family: var(--f-display); font-size: clamp(20px, 5.6vw, 23px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: #FFFFFF; } html .gf-m-ind p { margin: 0; max-width: 36ch; font-family: var(--f-sans); font-size: clamp(15px, 4.1vw, 16.5px); line-height: 1.62; color: #93A1B5; } html .gf-m-ind p + p { margin-top: 16px; } /* navigation groups — three identical collapsed accordions */ html .gf-m-nav { margin-top: clamp(40px, 7vw, 56px); border-top: 1px solid rgba(112, 179, 255, 0.14); } html .gf-m-grp { border-bottom: 1px solid rgba(112, 179, 255, 0.14); } html .gf-m-grp h3 { margin: 0; font: inherit; } html .gf-m-h { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0; gap: 12px; appearance: none; background: none; border: 0; cursor: pointer; text-align: left; font: 500 12.5px var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #FFFFFF; } html .gf-m-h .gf-m-ic { position: relative; flex: none; width: 12px; height: 12px; } html .gf-m-h .gf-m-ic::before, html .gf-m-h .gf-m-ic::after { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; background: var(--blue); transition: transform .22s var(--ease); } html .gf-m-h .gf-m-ic::after { transform: rotate(90deg); } html .gf-m-grp.is-open .gf-m-h .gf-m-ic::after { transform: rotate(0deg); } html .gf-m-h:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } html .gf-m-p { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .26s var(--ease), opacity .18s linear; } html .gf-m-grp.is-open .gf-m-p { max-height: 320px; opacity: 1; } html .gf-m-p ul { list-style: none; margin: 0; padding: 0 0 10px; } html .gf-m-p li { margin: 0; } html .gf-m-p a { display: flex; align-items: center; min-height: 44px; font-family: var(--f-sans); font-size: 15.5px; line-height: 1.35; color: #B8C4D4; } html .gf-m-p a[aria-current="page"] { color: var(--blue); } html .gf-m-p a:active { color: #FFFFFF; } /* ── utility area: status, then explorer + copyright, then community ──── */ html .gf-m-base { display: block; margin-top: clamp(32px, 6vw, 44px); padding-top: 22px; border-top: 1px solid rgba(112, 179, 255, 0.14); } html .gf-m-base .gf-status { display: inline-flex; font: 500 11.5px var(--f-mono); letter-spacing: 0.14em; color: #AAB5C6; } html .gf-m-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 14px; } html .gf-m-legal a { min-height: 44px; display: inline-flex; align-items: center; font-family: var(--f-sans); font-size: 14px; color: #8E9CB2; } html .gf-m-legal a:active { color: var(--blue); } html .gf-m-copy { font-family: var(--f-sans); font-size: 13.5px; line-height: 1.5; color: #7E8EA6; } /* icon-only community marks, evenly spaced on their own row */ html .gfooter .gf-m-social { justify-content: flex-start; width: auto; gap: 26px; margin-top: 10px; padding-bottom: clamp(4px, 2vw, 10px); } html .gfooter .gf-m-social a { gap: 0; min-width: 44px; min-height: 44px; justify-content: flex-start; color: #93A1B5; } html .gfooter .gf-m-social a:active { color: var(--blue); } html .gfooter .gf-m-social a svg { width: 19px; height: 19px; } } @media (max-width: 374px) { html .gfooter .wrap-wide { padding-inline: 18px; } html .gf-m-ind h3 { font-size: 19px; } html .gf-m-ind p { font-size: 14.5px; } html .gfooter .gf-m-social { gap: 22px; } } @media (min-width: 431px) and (max-width: 767px) { html .gfooter .wrap-wide { padding-inline: 26px; } } /* tablet: a compact two-column footer — brand and statement left, the link groups stacked right. Tap targets stay 44px, so the row gap comes down to match rather than adding to it. */ @media (min-width: 768px) and (max-width: 1023px) { html .gfooter .gf-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px clamp(40px, 6vw, 72px); } html .gfooter .gf-brand { grid-column: 1; grid-row: 1 / span 2; max-width: 44ch; text-align: left; } html .gfooter .gf-brand p { margin-inline: 0; } html .gfooter .gf-col { text-align: left; } html .gfooter .gf-col h4 { margin-bottom: 8px; } html .gfooter .gf-col ul { gap: 0; align-items: flex-start; } html .gfooter .gf-col a { display: inline-flex; align-items: center; min-height: 44px; } html .gfooter .gf-bar { margin-top: clamp(34px, 4vw, 48px); } html .gfooter .gf-cube { opacity: .03; } /* one route to the explorer, not three: Resources keeps it, the duplicate link and the repeat in the bottom bar step aside */ html .gfooter .gf-dup { display: none; } } /* ─── 9b. homepage hero artwork — the phone-native economy scene ─────────── */ /* The desktop raster is a wide, right-weighted composition; cropped to a phone column it reads as texture rather than a scene. Below 900px a portrait plate takes over: cube centred, city behind it, growth curve rising to the right. It occupies the lower ~half of the hero and rises *under* the CTAs, so the copy and the scene read as one image instead of stacked blocks. */ @media (max-width: 900px) { html #hero .stage { --hm-art: clamp(360px, 112vw, 620px); padding-bottom: calc(var(--hm-art) - 104px); } /* generous side bleed keeps the scene immersive at 320px without shrinking the cube; the auto width lets the insets do the sizing */ html #hero .core { left: 0; right: 0; width: auto; top: auto; bottom: 0; height: var(--hm-art); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 19%); mask-image: linear-gradient(180deg, transparent 0, #000 19%); } html #hero .core .heroart, html #hero.in .core .heroart { object-fit: cover; object-position: 56% 54%; opacity: 1; transform: none; } /* the overlay only has to protect the copy zone now — the lower two thirds of the plate stay at full strength so the cube glow carries the section */ html #hero .coreFade { top: auto; bottom: 0; height: var(--hm-art); background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.62) 12%, rgba(0,0,0,.16) 30%, rgba(0,0,0,0) 50%); } /* slow breathing bloom seated on the cube, plus the existing side luminance pulled down so the blue frames the headline from the edges */ html #hero .core .corepulse { position: absolute; left: 50%; bottom: 26%; width: 78%; aspect-ratio: 1; transform: translateX(-50%); z-index: 1; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(47,139,255,.30) 0%, rgba(30,111,255,.12) 42%, rgba(0,0,0,0) 68%); animation: mHeroBreathe 7.5s ease-in-out infinite; } html #hero .lum-a { width: 150%; height: 68%; right: -25%; top: auto; bottom: -14%; } } @keyframes mHeroBreathe { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.09); } } @media (max-width: 767px) { /* One above-the-fold composition: the stage fills the first screen, the copy sits below a fluid band of breathing room, and the artwork is pinned to the bottom edge — rising up behind the CTA so headline, action and scene read as a single image on load. Every value is fluid in the viewport height so short, standard and tall phones share one system. */ html #hero .stage { display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(100vh - var(--nav-h) - 8px); min-height: calc(100svh - var(--nav-h) - 8px); --hm-top: clamp(56px, 9vh, 96px); --hm-top: clamp(56px, 9svh, 96px); --hm-art: clamp(340px, 58vh, 620px); --hm-art: clamp(340px, 58svh, 620px); --hm-rise: clamp(96px, 14vh, 128px); --hm-rise: clamp(96px, 14svh, 128px); padding-top: calc(var(--hm-top) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--hm-art) - var(--hm-rise)); } html body.home-page #hero .sub { margin-top: clamp(18px, 2.8svh, 24px); } html #hero .hero-cta { margin-top: clamp(24px, 3.4svh, 30px); } /* the plate: framed around the cube, mask opening earlier so the scene is already present just beneath the action */ html #hero .core { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.6) 14%, #000 30%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.6) 14%, #000 30%); } html #hero .core .heroart, html #hero.in .core .heroart { object-position: 54% 62%; } html #hero .coreFade { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.7) 10%, rgba(0,0,0,.22) 26%, rgba(0,0,0,0) 44%); } } /* short phones (≤ 700px tall): tighten rhythm and the plate's rise so the CTA stays clear of the scene without shrinking the headline */ @media (max-width: 767px) and (max-height: 700px) { html #hero .stage { --hm-top: clamp(40px, 7svh, 56px); --hm-rise: 80px; } html body.home-page #hero .sub { margin-top: 16px; } html #hero .hero-cta { margin-top: 22px; } } /* phones in landscape: no viewport-tall stage, a shallow scene under the copy */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) { html #hero .stage { min-height: 0; --hm-top: 28px; --hm-art: 240px; --hm-rise: 60px; padding-top: calc(var(--hm-top) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--hm-art) - var(--hm-rise)); } } /* ───────────────────────── 10. motion ──────────────────────────────────── */ @media (max-width: 900px) { /* stage stories arrive briskly rather than drifting in */ html .m-rv > * { transition-duration: .5s !important; } } @media (prefers-reduced-motion: reduce) and (max-width: 1023px) { html .subpage-hero__visual, html .subpage-hero__product, html .subpage-hero__tagline, html .subpage-hero__tagline::before, html #hero .core .corepulse { animation: none !important; } } /* ───────────────────────── 9. one mobile type scale ───────────────────────── Every route, one hierarchy. The hero H1 is the largest text on the page; section headings sit one step below it; nothing secondary may outgrow it. Declared last, at the same specificity the page rules use, so it wins. */ @media (max-width: 767px) { html:root { --m-h1: clamp(36px, 9.6vw, 40px); --m-h2: clamp(30px, 8.4vw, 34px); --m-h3: clamp(21px, 5.8vw, 24px); --m-body: clamp(16px, 4.3vw, 17px); --m-eyebrow: clamp(11px, 3vw, 12px); } html body.home-page #hero h1.site-hero-title { font-size: var(--m-h1); line-height: 1.06; } } /* narrow phones: the headline follows the real measure so "Decentralized AI" and "Economic Growth" each hold one line (three lines total, never five) */ @media (max-width: 374px) { html body.home-page #hero h1.site-hero-title { font-size: clamp(28px, calc(12vw - 10px), 36px); line-height: 1.04; } } @media (max-width: 767px) { html body .bh, html body .h2, html body .gp-section .bh, html body #future .bh, html body #technology .bh, html body #adoption .bh, html body #economics .bh, html body #freedom .fr-h, html body.home-page #onenet h2.fw-rv, html body #onenet .cs-title, html body #manifesto.hp-section h2, html body .prefooter-cta .bh, html body .pcta h2, html body #ai-map .map-head h2, html body #gp-evolve .ce-intro h2, html body #ai-meet .ip-act1 h2, html body #ade-model .aa-intro h2, html body #ade-model.aa-flat .aa-scene h3, html body #ade-model.aa-flat .aa-final p, html body #gp-matrix .cmp-intro h2, html body #pc-foundations .ce-intro h2, html body #pc-foundations .ce-gen h3, html body #ai-meet .ip-lines p, html body #ai-meet .ip-lines span, html body #ai-evolve .evolve-words span { font-size: var(--m-h2) !important; line-height: 1.08 !important; letter-spacing: -0.03em; } html body #manifesto .mwrap > p { font-size: var(--m-h2) !important; line-height: 1.08 !important; } html body #freedom .fr-manif .line { font-size: clamp(26px, 7.4vw, 30px); } html body .wh, html body .bsub, html body .h3, html body #technology .arch-ex h3, html body #ai-map .map-aud h3, html body #ai-meet .ip-act2 p { font-size: var(--m-h3) !important; line-height: 1.2; } html body .bcopy, html body .lede, html body .fw-body, html body #technology .arch-ex p, html body #ai-map .map-copy, html body #ai-map .map-aud p, html body #onenet .cs-line { font-size: var(--m-body); line-height: 1.6; } /* eyebrows: one size, one tracking, always a single line */ html body .slabel, html body .eyebrow, html body #onenet .fw-eyebrow, html body #onenet .cs-cue, html body #technology .arch-eyebrow, html body .dlabel, html body .subpage-hero__eyebrow, html body #onenet .cs-cat, html body #onenet .cs-num, html body #manifesto .prin i.pnum, html body #ai-meet .ip-eco b { font-size: var(--m-eyebrow) !important; letter-spacing: 0.18em; white-space: nowrap; } html body #onenet .cs-cue { flex-wrap: nowrap; } html body #onenet .cs-cue b { white-space: nowrap; } } /* the in-between widths (768–1023): labels that were wrapping into two lines inside their container-query columns hold one line */ @media (min-width: 768px) and (max-width: 1023px) { html body #onenet .cs-cue { white-space: nowrap; } html body #onenet .cs-cue b { white-space: nowrap; } html body .gfooter .gf-col a { white-space: nowrap; } } /* no accidental horizontal scroll on any phone */ @media (max-width: 767px) { html, body { overflow-x: clip; } } /* ═════════════════ JOIN THE NETWORK — phone layer ═════════════════ Designed for the phone rather than shrunk: full-width field, full-width filled action with the arrow inside the box, generous tap area. Matches the site-wide mobile CTA treatment already used by .prefooter-cta .wp-row. */ @media (max-width: 767px) { html .jn-form { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: none; } html .jn-input { min-height: 56px; padding: 0 16px; font-size: 16px; /* 16px keeps iOS from zooming */ border-radius: 2px; } /* the submit stays inside the field: arrow node only, 44px target, no filled block */ html .jn-input { padding-right: 64px; } html .jn-submit { right: 6px; min-height: 44px; padding: 0 0 0 4px; gap: 0; } html .jn-submit .jn-submit-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } html .jn-submit .jn-submit-a { width: 40px; height: 40px; font-size: 16px; } html .jn-under { margin-top: 12px; gap: 8px; max-width: none; } html .jn-note { font-size: 11.5px; line-height: 1.55; letter-spacing: 0.06em; } html .jn-msg { font-size: 14px; } /* pre-footer band: stacked, compact, never competing with the primary section */ html .jn-band { padding-block: clamp(36px, 9vw, 52px) clamp(40px, 10vw, 56px); } html .jn-band .jn-band-in { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-inline: max(clamp(20px, 5.5vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right)); } html .jn-band .jn-band-h { margin-top: 12px; font-size: clamp(22px, 6.4vw, 27px); line-height: 1.16; text-wrap: normal; } html .jn-band .jn-band-p { margin-top: 10px; max-width: 34ch; font-size: 15px; line-height: 1.6; } /* contextual CTA rows read as one stacked block */ html .jn-cta-row { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 40px; padding-top: 26px; } html .jn-cta-row .jn-cta-label { flex: none; max-width: 34ch; font-size: 15px; } html .jn-cta-row .btn { width: auto; max-width: none; min-height: 48px; box-sizing: border-box; padding: 0; justify-content: flex-start; gap: 14px; border-radius: 0; white-space: nowrap; font-size: 12.5px; letter-spacing: 0.14em; background: none; color: var(--white); box-shadow: none; } html .jn-cta-row .btn::before { display: block; flex: none; width: 56px; } html .jn-cta-row .btn::after { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: #02060F; border: 1px solid var(--blue); font-size: 16px; padding: 0; } /* modal: sheet-like, full width, safe-area aware */ html .jn-modal { padding: 0; place-items: end stretch; } html .jn-modal .jn-panel { max-width: none; border-radius: 2px 2px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 30px max(22px, env(safe-area-inset-left)) max(30px, env(safe-area-inset-bottom)); max-height: 92vh; max-height: 92dvh; transform: translateY(24px); } html .jn-modal.open .jn-panel { transform: none; } html .jn-modal .jn-m-h { margin-top: 12px; font-size: clamp(24px, 6.8vw, 30px); line-height: 1.16; } html .jn-modal .jn-m-p { margin: 12px 0 24px; font-size: 15px; } html .jn-modal .jn-close { top: 8px; right: 8px; } html .jn-done { gap: 14px; } html .jn-done .jn-node { width: 38px; height: 38px; } html .jn-done .jn-done-h { font-size: 20px; } html .jn-done .jn-done-p { font-size: 15px; } } /* very narrow phones (320–360px): tighter labels, nothing clipped */ @media (max-width: 360px) { html .jn-cta-row .btn { font-size: 11.5px; letter-spacing: 0.1em; } html .jn-band .jn-band-h { font-size: 21px; } html .jn-note { font-size: 11px; } } /* tablets: the two-up row returns, but the field never squeezes below reading width */ @media (min-width: 768px) and (max-width: 1023px) { html .jn-form { grid-template-columns: minmax(260px, 1fr) auto; gap: 16px; max-width: 620px; } html .jn-band .jn-form { max-width: 100%; } html .jn-band .jn-band-p { max-width: 48ch; } }