/* ═══════════════════════════════════════════════════════════ Components ═══════════════════════════════════════════════════════════ */ /* ── floating dock nav ──────────────────────────────────── */ /* Full-bleed bar: brand | nav (left-clustered, wraps to a second row when the links outgrow the width) | actions. The radius is a rounded rect, not a pill — a pill's end curvature swallows the first link once the nav runs two rows tall. */ .dock{ position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100; width:calc(100% - 32px);max-width:none; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px; padding:11px;border-radius:28px; background:rgba(9,9,13,.5);border:1px solid var(--bd); backdrop-filter:blur(20px) saturate(180%); transition:background .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e),top .45s var(--e); } .dock.stuck{background:rgba(9,9,13,.88);border-color:var(--bd-2); box-shadow:0 18px 50px -22px rgba(0,0,0,.9)} /* The macOS desktop shell runs frameless, so the system paints its window buttons at roughly x 20–76, y 12–32 — straight over the dock's left end, where the logotype is. Drop the whole bar (and everything pinned to it) below them rather than indenting the mark and leaving a gap. The shell's preload sets .mac-shell on ; in a browser this never matches. */ .mac-shell .dock{top:44px} .mac-shell .sheet{top:118px} .mac-shell body::before{height:144px} /* the dock flips to ink-on-paper while it floats over a light band */ .dock.inv{background:rgba(242,239,231,.66);border-color:rgba(16,16,21,.12)} .dock.inv.stuck{background:rgba(242,239,231,.92);border-color:rgba(16,16,21,.16); box-shadow:0 18px 50px -26px rgba(16,16,21,.55)} .dock.inv .brand{color:var(--ink)} /* the tile stays ink over the light band — a dark chip on paper reads as deliberate, where a second light tile would just dissolve into it */ .dock.inv .brand .mk{border-color:rgba(16,16,21,.14); box-shadow:0 6px 18px -10px rgba(16,16,21,.7),inset 0 1px 0 rgba(255,255,255,.06)} .dock.inv .dnav a{color:#4E4E5A} .dock.inv .dnav a:hover{color:var(--ink);background:rgba(16,16,21,.06)} .dock.inv .dnav a.on{color:var(--ink)} .dock.inv .btn-g{background:rgba(255,255,255,.55);border-color:rgba(16,16,21,.2);color:var(--ink)} .dock.inv .btn-g:hover{background:rgba(255,255,255,.9);border-color:rgba(16,16,21,.32)} .dock.inv .btn-p{background:var(--ink);color:var(--paper); box-shadow:0 10px 30px -16px rgba(16,16,21,.8)} .dock.inv .burger{border-color:rgba(16,16,21,.18);background:rgba(16,16,21,.05)} .dock.inv .burger span{background:var(--ink)} /* One weight, one face, no italic — the mark carries the colour, so the name does not have to. SF Pro Display's own tracking is loose at this size; -.028em is what brings it back to a logotype. */ /* nowrap + no shrink + a max-content floor: below 720px the dock turns into a flex row, and a flex item with no floor collapses to min-content — which for this string is one word per line. The logotype never yields and never breaks a line; when space runs out it is the nav that wraps. */ .brand{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:590;letter-spacing:-.028em; justify-self:start;padding-left:11px;padding-right:4px;white-space:nowrap; flex-shrink:0;min-width:max-content} /* The tile is ink, not the ramp. The ramp lives on the mark inside it, which is the only thing on the page that should be pulling the eye this hard. flex:0 0 auto keeps it square — squeezed, 42px of radius 13 reads as a pill. */ .brand .mk{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(155deg,#1B1B29 0%,#0E0E14 62%,#09090E 100%); border:1px solid rgba(185,166,255,.24); box-shadow:0 0 26px -10px rgba(124,92,255,.75),inset 0 1px 0 rgba(255,255,255,.06)} .brand .mk svg{width:23px;height:23px;display:block} /* The dock now runs the full window width, but the tight padding stays: it is what lets the longest nav hold a single row on ordinary desktop widths before the wrap has to step in. */ /* Left-clustered next to the brand, and allowed to wrap: on narrower windows the links fold into a second row instead of vanishing into the burger. */ .dnav{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap; gap:2px;justify-self:stretch;min-width:0} .dnav a{position:relative;display:inline-flex;align-items:center;gap:7px; padding:10px 12px;border-radius:999px;font-size:14.5px;color:#fff; transition:color .25s,background .25s} .dnav a:hover{color:var(--fg);background:var(--surf-2)} .dnav a.on{color:var(--fg)} .dnav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px; background:var(--grad);border-radius:2px} /* link glyphs — same icon engine as the rest of the site; the motion grammar idles until the link is hovered so the bar does not shimmer at rest */ .dnav a svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;opacity:1;transition:opacity .25s} .dnav a:hover svg,.dnav a.on svg{opacity:1} .dnav a svg .mv{animation-play-state:paused} .dnav a:hover svg .mv{animation-play-state:running} /* the caret is a real element (JS inserts it), because ::after is already taken by the active-link underline */ .dnav a .crt{width:5px;height:5px;flex:0 0 auto;border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px); opacity:.5;transition:transform .25s var(--e),opacity .25s} .dnav a[aria-expanded="true"] .crt{transform:rotate(225deg) translate(1px,1px);opacity:.9} /* ── megamenu panels ──────────────────────────────────────── One full-width panel per hub link, appended inside the dock so it inherits the fixed anchoring and spans the whole bar. Hover or focus opens it. */ .mega{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:99;display:none; border-radius:22px;border:1px solid var(--bd-2);background:rgba(9,9,13,.95); backdrop-filter:blur(24px) saturate(160%);padding:clamp(18px,2vw,26px); box-shadow:0 34px 90px -34px rgba(0,0,0,.9)} .mega.show{display:block;animation:sheetIn .3s var(--e)} .mega-in{display:grid;grid-template-columns:minmax(200px,250px) 1fr;gap:clamp(20px,2.6vw,40px)} .mega-k{display:block;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--v-lt)} .mega-l p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--fg-2)} .mega-go{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--fg); border-bottom:1px solid var(--bd-2);padding-bottom:2px;transition:.2s} .mega-go:hover{color:var(--v-lt);border-color:var(--v)} .mega-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:4px;align-content:start} .mega-g a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px; transition:background .2s} .mega-g a:hover{background:var(--surf-2)} .mega-g .gi{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center; background:var(--surf);border:1px solid var(--bd);color:var(--v-lt)} .mega-g .gi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .mega-g .gi .mv{animation-play-state:paused} .mega-g a:hover .gi .mv{animation-play-state:running} .mega-g b{display:block;font-size:14px;font-weight:530;letter-spacing:-.012em;color:var(--fg)} .mega-g em{display:block;font-style:normal;margin-top:2px;font-size:12.5px;line-height:1.45; color:var(--fg-3)} /* ink-on-paper flip, matching the dock's own inversion */ .dock.inv .mega{background:rgba(242,239,231,.97);border-color:rgba(16,16,21,.14); box-shadow:0 34px 90px -40px rgba(16,16,21,.5)} .dock.inv .mega-l p{color:#4E4E5A} .dock.inv .mega-go{color:var(--ink);border-color:rgba(16,16,21,.2)} .dock.inv .mega-g a:hover{background:rgba(16,16,21,.06)} .dock.inv .mega-g .gi{background:rgba(16,16,21,.05);border-color:rgba(16,16,21,.12)} .dock.inv .mega-g b{color:var(--ink)} .dock.inv .mega-g em{color:#4E4E5A} .dact{display:flex;align-items:center;gap:10px;justify-self:end} .dock .sp{display:none} .dock .btn-sm{height:44px;padding:0 20px;font-size:14.5px} .burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--bd); background:var(--surf);flex-direction:column;align-items:center;justify-content:center;gap:5px} .burger span{display:block;width:18px;height:1.6px;background:var(--fg);border-radius:2px; transition:transform .35s var(--e),opacity .25s} .dock.open .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .dock.open .burger span:nth-child(2){opacity:0} .dock.open .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} /* ── the sliver above the dock ────────────────────────────── The dock floats at top:18px, so there is a transparent strip between it and the top of the window, and the dock's own fill is only half-opaque before it sticks. Scrolled content runs straight through both: an eyebrow tag surfaces above the nav and a headline's ascenders sit inside it, which reads as a rendering fault rather than as depth. One fixed scrim covers the strip and the band behind the dock. It carries the blur, so the type passing underneath dissolves instead of ghosting, and its lower edge is masked to nothing so the scrim itself never draws a line across the page. */ body::before{ content:"";position:fixed;top:0;left:0;right:0;height:118px; z-index:98;pointer-events:none;opacity:0; background:linear-gradient(180deg,rgba(8,8,11,.92) 0%,rgba(8,8,11,.72) 100%); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%); /* solid past the dock's own bottom edge (88px), then gone */ -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%); transition:opacity .45s var(--e),background .45s var(--e); } /* it follows the dock's own inversion over the light bands */ body:has(.dock.inv)::before{ background:linear-gradient(180deg,rgba(242,239,231,.92) 0%,rgba(242,239,231,.72) 100%); } body:has(.dock.stuck)::before{opacity:1} .sheet{ position:fixed;inset:92px 20px auto;z-index:99;border-radius:var(--r-lg); background:rgba(9,9,13,.95);border:1px solid var(--bd-2);backdrop-filter:blur(24px); padding:12px;display:none; /* The sheet is fixed and grows with its contents, so past a certain number of links it runs off the bottom of the screen — and because nothing here scrolls, the entries below the fold become unreachable rather than merely out of sight. On a 812px phone the last thing to disappear is "Open the app". Capping the height and scrolling inside keeps every entry reachable however long the menu gets. dvh, not vh: on mobile browsers vh is the height with the address bar hidden, which is exactly the amount by which this would still overflow. */ max-height:calc(100vh - 112px); max-height:calc(100dvh - 112px); overflow-y:auto; /* Stops the scroll chaining into the page behind once the sheet hits its end. */ overscroll-behavior:contain; } .sheet.show{display:block;animation:sheetIn .35s var(--e)} @keyframes sheetIn{from{opacity:0;transform:translateY(-10px)}} .sheet a{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:12px; font-size:17px;color:var(--fg-2);transition:.2s} .sheet a:hover{background:var(--surf-2);color:var(--fg)} .sheet a svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;opacity:.72} .sheet a svg .mv{animation-play-state:paused} .sheet a.cta{margin-top:8px;justify-content:center;text-align:center;font-weight:540; background:var(--fg);color:#0A0A0D} .sheet a.cta:hover{background:var(--fg);color:#0A0A0D;transform:translateY(-1px)} /* A labelled group inside the sheet. The institutional services are a set — spliced into the flat list they read as six more peers of "Why" and "How", which buries them and makes the menu longer without making it clearer. The rule and the label are what turn them back into one thing. */ .sheet-h{ display:block;padding:16px 18px 6px;font-family:var(--sans);font-size:11px; font-weight:600;line-height:1;letter-spacing:.13em;text-transform:uppercase; color:var(--fg-3);border-top:1px solid var(--bd-2);margin-top:8px; } .sheet-h:first-child{border-top:0;margin-top:0} /* Indented so the group reads as subordinate to its label, and a notch down in size so the primary navigation still wins the eye. */ .sheet a.sub{padding-left:30px;font-size:15.5px;position:relative} .sheet a.sub::before{ content:"";position:absolute;left:18px;top:50%;width:4px;height:1px; background:var(--fg-4);transform:translateY(-50%);transition:.2s; } .sheet a.sub:hover::before{width:8px;background:var(--v)} /* The dock is auto 1fr auto and the nav wraps inside its 1fr track, so the logotype and the CTAs never pay for a long link list — the links fold onto a second row instead. The ladder down: the secondary CTA drops first, then below 720px the wrapped rows would eat too much of a phone screen and the whole nav falls back to the burger. Quick start is reachable from the sheet menu and the footer either way. */ @media (max-width:1300px){ .dock .btn.hide-sm{display:none} } /* two rows are possible from here down — give the fixed scrim the extra height so scrolled content still dissolves behind the taller bar */ @media (max-width:1680px){ body::before{height:168px} .mac-shell body::before{height:194px} } @media (max-width:720px){ .dnav{display:none} .burger{display:flex} .dock{display:flex;border-radius:999px} .dact{margin-left:auto} } @media (max-width:560px){ .dock{gap:10px} .dock .btn{display:none} .brand{padding-left:6px;font-size:17px;gap:11px} .brand .mk{width:38px;height:38px;border-radius:12px} .brand .mk svg{width:21px;height:21px} } /* ── hero ───────────────────────────────────────────────── */ .hero{padding-top:clamp(128px,17vh,200px);padding-bottom:clamp(60px,7vw,104px); position:relative;overflow:hidden} .hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center} .hero .h1{margin:28px 0 0;max-width:26ch} .hero .lede{margin-top:26px;max-width:58ch} .hero .acts{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;justify-content:center} .hero .micro{display:flex;gap:24px;margin-top:28px;flex-wrap:wrap;justify-content:center; font:400 13px/1 var(--sans);color:var(--fg-3)} .hero .micro span{display:flex;align-items:center;gap:7px} .hero .micro svg{width:13px;height:13px;stroke:var(--lime);fill:none;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} @media (max-width:560px){ .hero .acts{width:100%;flex-direction:column;gap:10px} .hero .acts .btn{width:100%} .hero .micro{gap:12px 20px;font-size:12.5px} } /* the optic plate — a halo centred on the live preview, so the artwork reads as the fixation point the app actually creates */ .window-wrap{position:relative;width:100%;max-width:1040px; margin-top:clamp(48px,6.5vw,84px);display:flex;justify-content:center} .hero-art{ position:absolute;z-index:0;pointer-events:none; top:50%;left:50%;transform:translate(-50%,-50%); width:min(1760px,178vw);opacity:.8; } .hero-art img{width:100%;height:auto} @media (max-width:900px){.hero-art{opacity:.5;width:210vw}} /* app window — the product's one differentiated moment, given the room it deserves. */ .window{ position:relative;z-index:1;width:100%; border-radius:var(--r-xl);overflow:hidden; background:linear-gradient(180deg,rgba(20,20,30,.92),rgba(8,8,13,.96)); border:1px solid var(--bd-2); box-shadow:0 70px 160px -55px rgba(91,63,224,.75), 0 0 0 1px rgba(255,255,255,.035) inset, 0 2px 0 rgba(255,255,255,.05) inset; } .window::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(124,92,255,.2),transparent 62%); } .wbar{position:relative;display:flex;align-items:center;gap:10px;padding:14px 18px; border-bottom:1px solid var(--bd)} .wbar .lights{display:flex;gap:6px} .wbar .lights i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.13)} .wbar .ttl{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-left:8px} .wbar .pill{margin-left:auto;display:flex;align-items:center;gap:8px; font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; padding:6px 12px;border-radius:999px;border:1px solid rgba(124,92,255,.35); background:rgba(124,92,255,.12);color:var(--v-lt)} .stage{position:relative;height:clamp(300px,38vw,420px);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:clamp(16px,2.4vw,28px)} .stage .railv{position:absolute;left:50%;top:32px;bottom:58px;width:1px; background:linear-gradient(transparent,rgba(255,255,255,.13) 20%,rgba(255,255,255,.13) 80%,transparent)} .stage .tick{position:absolute;left:50%;transform:translateX(-50%);width:12px;height:1px; background:rgba(124,92,255,.75)} .stage .tick.a{top:32px}.stage .tick.b{bottom:58px} #ic{width:clamp(76px,10vw,112px);aspect-ratio:1;color:var(--c-lt); filter:drop-shadow(0 10px 38px rgba(34,211,238,.45))} #ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15; stroke-linecap:round;stroke-linejoin:round} #wd{font:500 clamp(38px,6vw,68px)/1 var(--mono);letter-spacing:-.035em;color:var(--fg);white-space:nowrap} #wd .pl{color:rgba(246,245,242,.6)} #wd .pv{color:var(--amber);text-shadow:0 0 28px rgba(255,176,32,.55)} #cp{position:absolute;bottom:18px;left:0;right:0;text-align:center;padding:0 22px;min-height:18px; font-size:12.5px;color:var(--fg-3)} #cp b{color:var(--v-lt);font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase} /* ── marquee ────────────────────────────────────────────── */ .mq{position:relative;z-index:2;padding:clamp(26px,3vw,40px) 0; border-block:1px solid var(--bd);overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .mq-t{display:flex;width:max-content;animation:slide 46s linear infinite} .mq:hover .mq-t{animation-play-state:paused} @keyframes slide{to{transform:translateX(-50%)}} .mq-t>div{display:flex;align-items:center} .mq-i{display:flex;align-items:center;gap:11px;padding:0 26px;flex:0 0 auto} .mq-i .g{width:26px;height:26px;color:var(--v-lt);opacity:.85} .mq-i .g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .mq-i span{font:500 16px/1 var(--mono);letter-spacing:-.02em;color:var(--fg-2)} .mq-i .sep{color:var(--fg-4)} @media (prefers-reduced-motion:reduce){.mq-t{animation:none}} /* ── bento ──────────────────────────────────────────────── */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .bento .card{display:flex;flex-direction:column} /* insets absorb leftover row height instead of leaving dead space */ .bento .card>.inset{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center} .sp3{grid-column:span 3}.sp2{grid-column:span 2}.sp4{grid-column:span 4}.sp6{grid-column:span 6} @media (max-width:1000px){ .bento{grid-template-columns:repeat(2,1fr)} .sp3,.sp2,.sp4{grid-column:span 1}.sp6{grid-column:span 2} } @media (max-width:640px){ .bento{grid-template-columns:1fr} .sp3,.sp2,.sp4,.sp6{grid-column:span 1} } .card-b .h4{margin:18px 0 9px} .card-b p{font-size:14.5px;line-height:1.62;color:var(--fg-2)} .card-meta{margin-top:auto;padding-top:20px; font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)} /* visual insets inside bento cards */ .inset{margin-top:20px;border-radius:var(--r);border:1px solid var(--bd); background:rgba(0,0,0,.32);overflow:hidden;position:relative} .paper .inset{background:rgba(16,16,21,.045)} /* dual sense demo */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd)} .duo figure{margin:0;padding:24px 18px;background:var(--bg-1);text-align:center} .duo .s{font-size:13px;line-height:1.55;color:var(--fg-3);min-height:56px} .duo .s b{color:var(--fg);font-weight:500;border-bottom:1px solid var(--v);padding-bottom:1px} .duo .g{width:48px;height:48px;margin:16px auto 12px;color:var(--c-lt)} .duo .g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3; stroke-linecap:round;stroke-linejoin:round} .duo figcaption{font:500 9px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)} .duo figcaption b{color:var(--v-lt);font-weight:500} /* motion primitive strip */ .prims{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd)} .prims figure{margin:0;padding:20px 8px 16px;background:var(--bg-1);text-align:center} .prims .g{width:30px;height:30px;margin:0 auto 12px;color:var(--c-lt)} .prims .g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round} .prims figcaption{font:500 8.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)} /* waveform */ .wave{display:flex;align-items:center;justify-content:center;gap:3px;height:86px;padding:0 18px} .wave i{display:block;width:3px;border-radius:2px;background:var(--grad);opacity:.85; animation:wv 1.5s var(--e-io) infinite} @keyframes wv{0%,100%{height:8px}50%{height:var(--h,30px)}} @media (prefers-reduced-motion:reduce){.wave i{animation:none;height:var(--h,30px)}} /* coverage bar */ .cov{padding:22px} .cov .row{display:flex;align-items:center;gap:12px;padding:7px 0} .cov .row .lb{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--fg-3);width:84px;flex:0 0 auto} .cov .row .tr{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden} .cov .row .fi{display:block;height:100%;border-radius:3px;background:var(--grad);width:0; transition:width 1.4s var(--e);transition-delay:var(--dd,0ms)} .in .cov .row .fi{width:var(--w,50%)} .cov .row .pc{font:500 11px/1 var(--mono);color:var(--fg-2);width:44px;text-align:right;flex:0 0 auto} /* ── stat band ──────────────────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd); border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden} .stats div{background:var(--bg-1);padding:clamp(22px,2.6vw,34px)} .stats b{display:block;font-size:clamp(30px,3.6vw,46px);font-weight:590;letter-spacing:-.04em;color:var(--fg)} .stats span{display:block;margin-top:10px;font:500 10px/1.4 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--fg-3)} @media (max-width:720px){.stats{grid-template-columns:1fr 1fr}} /* ── sticky narrative ───────────────────────────────────── */ .narr{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,5vw,80px);align-items:start} .narr-l{position:sticky;top:110px} .narr-r>*+*{margin-top:clamp(20px,2.6vw,34px)} .narr-r p{font-size:clamp(17px,1.5vw,20.5px);line-height:1.64;color:var(--fg-2);letter-spacing:-.01em} .narr-r p strong{color:var(--fg);font-weight:500} .quote{padding:clamp(26px,3.2vw,38px);border-radius:var(--r-lg);border:1px solid var(--bd); background:linear-gradient(150deg,rgba(124,92,255,.13),rgba(34,211,238,.045));position:relative;overflow:hidden} .quote p{font-family:var(--serif)!important;font-style:italic;font-weight:400; font-size:clamp(26px,3vw,40px)!important;line-height:1.14;letter-spacing:-.015em; color:var(--fg)!important} .quote .k{display:block;margin-top:18px;font:500 10px/1 var(--mono);letter-spacing:.18em; text-transform:uppercase;color:var(--v-lt)} @media (max-width:900px){.narr{grid-template-columns:1fr}.narr-l{position:static}} /* problem cards */ .probs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .probs .card-b b{display:block;font-family:var(--serif);font-style:normal;font-weight:400; font-size:clamp(46px,5.4vw,68px);letter-spacing:-.02em;line-height:.9;color:var(--v-lt)} .probs .h4{margin:18px 0 8px} @media (max-width:820px){.probs{grid-template-columns:1fr}} /* ── tier ladder ────────────────────────────────────────── */ .tiers{border-radius:var(--r-lg);border:1px solid var(--bd);overflow:hidden;background:var(--surf)} .tier{display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:center; padding:24px clamp(18px,2.4vw,28px);border-top:1px solid var(--bd); transition:background .4s var(--e);cursor:default;position:relative} .tier:first-child{border-top:0} .tier:hover{background:var(--surf-2)} .tier .n{width:36px;height:36px;border-radius:11px;display:grid;place-items:center; font:500 13px/1 var(--mono);color:#0A0A0D;background:var(--grad); box-shadow:0 0 24px -8px rgba(124,92,255,.9)} .tier:nth-child(4) .n{background:linear-gradient(140deg,#22D3EE,#38BDF8)} .tier:nth-child(5) .n{background:linear-gradient(140deg,#64748B,#94A3B8)} /* The numbers are coloured by role, not by position: the violet ramp is "there is a build here", cyan is the extension, grey is the one with nothing to build. On the apps page that list is seven long, which slides the last two past the rules above — so scope the shift to that list rather than switching everything to nth-last-child, which would repaint the four-item list on the Gym page too. */ .tiers.seven .tier:nth-child(4) .n, .tiers.seven .tier:nth-child(5) .n{background:var(--grad)} .tiers.seven .tier:nth-child(6) .n{background:linear-gradient(140deg,#22D3EE,#38BDF8)} .tiers.seven .tier:nth-child(7) .n{background:linear-gradient(140deg,#64748B,#94A3B8)} .tier .h4{margin-bottom:6px} .tier p{font-size:14.5px;line-height:1.6;color:var(--fg-2);max-width:64ch} .tier code{font:500 12.5px/1 var(--mono);color:var(--c-lt);background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.2);padding:2px 7px;border-radius:6px} .tier .mt{text-align:right;font:500 10px/1.8 var(--mono);letter-spacing:.13em; text-transform:uppercase;color:var(--fg-3);white-space:nowrap} .tier .mt b{display:block;color:var(--fg);font-weight:500} @media (max-width:760px){ .tier{grid-template-columns:36px 1fr;gap:14px;align-items:start} .tier .mt{grid-column:2;text-align:left;margin-top:8px} } /* two-column layout for the paper "what" band */ .plate{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:start} .plate-art{position:sticky;top:110px} .plate-art img{width:100%;height:auto;mix-blend-mode:multiply} .plate-cap{margin-top:18px;font:500 10px/1.7 var(--mono);letter-spacing:.17em; text-transform:uppercase;color:var(--fg-3);text-align:center} @media (max-width:900px){ .plate{grid-template-columns:1fr} .plate-art{position:static;max-width:440px;margin-inline:auto} } /* lexicon field behind the audience section */ #who{overflow:hidden} .who-art{position:absolute;z-index:0;pointer-events:none; top:-6%;right:-14%;width:min(980px,86vw);opacity:.5; -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 72%); mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000,transparent 72%)} .who-art img{width:100%;height:auto} @media (max-width:900px){.who-art{opacity:.3;right:-30%}} /* ── audience grid ──────────────────────────────────────── */ .auds{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .auds .card-b{padding:24px 22px 26px} .auds .h4{font-size:17px;margin:16px 0 8px} .auds p{font-size:13.5px;line-height:1.6} @media (max-width:1000px){.auds{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.auds{grid-template-columns:1fr}} .cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .cloud span{font-size:13.5px;color:var(--fg-2);padding:8px 14px;border-radius:999px; border:1px solid var(--bd);background:var(--surf);transition:.3s var(--e)} .cloud span:hover{border-color:var(--bd-3);color:var(--fg);background:var(--surf-2);transform:translateY(-1px)} /* ── feature panel (dyslexia) ───────────────────────────── */ .feat{position:relative;border-radius:var(--r-xl);padding:1px;overflow:hidden;isolation:isolate} .feat::before{content:"";position:absolute;inset:-120%;z-index:-1; background:conic-gradient(from var(--ang),transparent 0 62%,#B9A6FF 76%,#22D3EE 86%,transparent 96%); animation:spin 7s linear infinite} @keyframes spin{to{--ang:360deg}} @media (prefers-reduced-motion:reduce){.feat::before{animation:none;background:linear-gradient(120deg,#B9A6FF,#22D3EE)}} .feat-in{border-radius:calc(var(--r-xl) - 1px);background:linear-gradient(160deg,#0C0C13,#08080B); padding:clamp(26px,3.4vw,48px);display:grid;grid-template-columns:.92fr 1.08fr; gap:clamp(26px,3.4vw,52px)} .feat h3{margin:20px 0 18px} .feat .lede{font-size:16px} .feat .disc{margin-top:22px;padding-top:20px;border-top:1px solid var(--bd); font-size:13.5px;line-height:1.65;color:var(--fg-3)} .feat ol{list-style:none;padding:0;margin:0;counter-reset:f} .feat li{counter-increment:f;display:grid;grid-template-columns:28px 1fr;gap:16px; padding:15px 0;border-top:1px solid var(--bd)} .feat li:first-child{border-top:0;padding-top:0} .feat li::before{content:"0" counter(f);font:500 10.5px/1.8 var(--mono);color:var(--v-lt);letter-spacing:.06em} .feat li h5{font-size:15.5px;font-weight:560;letter-spacing:-.018em;margin-bottom:5px} .feat li p{font-size:13.5px;line-height:1.6;color:var(--fg-2)} .feat code{font:500 12px/1 var(--mono);color:var(--c-lt);background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.2);padding:2px 6px;border-radius:5px;white-space:nowrap} @media (max-width:900px){.feat-in{grid-template-columns:1fr}} /* ── uses: chips + panel ────────────────────────────────── */ .chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);mask-image:linear-gradient(90deg,#000 96%,transparent)} .chips::-webkit-scrollbar{display:none} .chips button{flex:0 0 auto;padding:10px 16px;border-radius:999px;border:1px solid var(--bd); background:var(--surf);color:var(--fg-2);font-size:13.5px;white-space:nowrap; transition:.3s var(--e)} .chips button:hover{color:var(--fg);border-color:var(--bd-2)} .chips button.on{background:var(--fg);color:#0A0A0D;border-color:var(--fg);font-weight:500} .upanel{margin-top:16px;display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,2.6vw,40px); padding:clamp(26px,3.2vw,44px);border-radius:var(--r-xl);border:1px solid var(--bd); background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.014));min-height:246px} .upanel .num{font:500 10.5px/1 var(--mono);letter-spacing:.2em;color:var(--v-lt);margin-bottom:16px} .upanel h3{margin-bottom:14px} .upanel p{font-size:16.5px;line-height:1.66;color:var(--fg-2);max-width:58ch} .uset{align-self:start;border-radius:var(--r);border:1px solid var(--bd);background:rgba(0,0,0,.3);padding:18px 20px} .uset .r{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--bd); font:500 12px/1.5 var(--mono)} .uset .r:first-of-type{border-top:0;padding-top:0} .uset .r em{font-style:normal;color:var(--fg-3);letter-spacing:.12em;text-transform:uppercase;font-size:9.5px} .uset .r b{color:var(--c-lt);font-weight:500;text-align:right} .ufade{animation:uf .45s var(--e)} @keyframes uf{from{opacity:0;transform:translateY(8px)}} @media (max-width:820px){.upanel{grid-template-columns:1fr}} /* ── pricing ────────────────────────────────────────────── */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch} .plan{display:flex;flex-direction:column;padding:clamp(26px,3vw,36px)} .plan .pk{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)} .plan h3{margin:16px 0 0;font-size:22px;letter-spacing:-.026em} .plan .amt{margin:18px 0 6px;font-size:clamp(40px,4.6vw,56px);font-weight:590;letter-spacing:-.045em;line-height:1} .plan .amt small{font-size:14px;font-weight:400;letter-spacing:-.005em;color:var(--fg-3)} .plan .who{font-size:14px;line-height:1.6;color:var(--fg-2);padding-bottom:24px;margin-bottom:24px; border-bottom:1px solid var(--bd)} .plan ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:11px} .plan li{display:flex;gap:11px;font-size:14px;line-height:1.5;color:var(--fg-2)} .plan li svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;stroke:var(--lime);fill:none; stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .plan .btn{margin-top:auto} .plan-hot{padding:1px;border-radius:var(--r-lg);position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(160deg,rgba(185,166,255,.6),rgba(34,211,238,.24),rgba(255,255,255,.06))} .plan-hot .plan{border-radius:calc(var(--r-lg) - 1px);background:linear-gradient(170deg,#12101F,#0A0A10);height:100%} .plan-hot .tagl{position:absolute;top:0;right:0;z-index:3;font:500 9.5px/1 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:#0A0A0D;background:var(--grad);padding:8px 14px;border-radius:0 var(--r-lg) 0 12px} @media (max-width:940px){.plans{grid-template-columns:1fr}} /* ── closing cta ────────────────────────────────────────── */ .cta-b{position:relative;text-align:center;border-radius:var(--r-2xl);overflow:hidden; padding:clamp(52px,7.5vw,104px) clamp(24px,4vw,60px); border:1px solid var(--bd-2); background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(124,92,255,.26),transparent 62%), linear-gradient(180deg,#0C0C14,#08080C)} .cta-b .gridbg{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000,transparent 74%); mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000,transparent 74%)} .cta-b .h2{margin:22px auto 0;max-width:24ch} .cta-b p{margin:20px auto 0;max-width:52ch;color:var(--fg-2);font-size:17px;line-height:1.62} .cta-b .acts{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap} /* ── platforms · apps page ──────────────────────────────── */ .plats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .plat{display:flex;flex-direction:column;padding:clamp(24px,2.6vw,30px)} .plat .os{width:44px;height:44px;border-radius:13px;display:grid;place-items:center; background:var(--surf-2);border:1px solid var(--bd-2)} .plat .os svg{width:23px;height:23px;fill:var(--fg);stroke:none} .plat h3{margin:20px 0 6px;font-size:19px;letter-spacing:-.026em} .plat .sub{font:500 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--v-lt)} .plat p{margin:14px 0 0;font-size:14px;line-height:1.62;color:var(--fg-2)} .plat dl{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--bd); display:grid;grid-template-columns:auto 1fr;gap:9px 14px; font:500 11px/1.4 var(--mono);letter-spacing:.04em} .plat dt{color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px;align-self:center} .plat dd{margin:0;color:var(--fg-2);text-align:right} .plat .btn{margin-top:26px} .plat .alt{margin-top:11px;text-align:center;font-size:12.5px;color:var(--fg-3)} .plat .alt a{color:var(--fg-2);border-bottom:1px solid var(--bd-2);transition:.18s} .plat .alt a:hover{color:var(--v-lt);border-color:var(--v)} @media (max-width:1080px){.plats{grid-template-columns:1fr 1fr}} @media (max-width:600px){.plats{grid-template-columns:1fr}} /* Six platforms (index.html, apps.html) want three across, not four squeezed — institutions.html still offers four branded builds and keeps the 4-up grid. Specificity is (0,2,0) here, so the breakpoints above cannot reach these and each one is restated. */ .plats.six{grid-template-columns:repeat(3,1fr)} @media (max-width:1080px){.plats.six{grid-template-columns:1fr 1fr}} @media (max-width:600px){.plats.six{grid-template-columns:1fr}} /* release status strip */ .rel{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:26px; padding:16px 20px;border-radius:var(--r);border:1px solid var(--bd);background:var(--surf); font-size:13.5px;line-height:1.55;color:var(--fg-2)} .rel b{color:var(--fg);font-weight:530} .rel .st{font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--amber);background:rgba(255,176,32,.11);border:1px solid rgba(255,176,32,.3); padding:7px 11px;border-radius:999px;flex:0 0 auto} /* ── parity matrix ──────────────────────────────────────── */ .mx{border-radius:var(--r-lg);border:1px solid var(--bd);overflow:hidden;background:var(--surf)} .mx table{width:100%;border-collapse:collapse} .mx th,.mx td{padding:15px 18px;text-align:left;border-top:1px solid var(--bd);vertical-align:middle} .mx thead th{border-top:0;background:rgba(255,255,255,.035); font:500 9.5px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)} .mx thead th:not(:first-child),.mx td:not(:first-child){text-align:center;width:13%} .mx tbody th{font-size:14.5px;font-weight:450;letter-spacing:-.012em;color:var(--fg);width:auto} .mx tbody th small{display:block;margin-top:4px;font-size:12.5px;color:var(--fg-3);font-weight:400;letter-spacing:0} .mx tbody tr:hover{background:var(--surf-2)} .mx i{display:inline-block;width:17px;height:17px;border-radius:50%;position:relative} .mx i.y{background:rgba(180,255,57,.13);box-shadow:inset 0 0 0 1px rgba(180,255,57,.4)} .mx i.y::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:4px; border-left:1.7px solid var(--lime);border-bottom:1.7px solid var(--lime); transform:translateY(-1px) rotate(-45deg)} .mx i.n{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--bd-2)} .mx i.n::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:1.6px; background:var(--fg-4);border-radius:2px} .mx td em{font-style:normal;font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)} @media (max-width:820px){ .mx{overflow-x:auto} .mx table{min-width:660px} } /* Seven columns instead of five: the platform columns give up two points each so the capability label still gets a third of the table, and the horizontal scroll has to start earlier. */ .mx.wide thead th:not(:first-child),.mx.wide td:not(:first-child){width:11%} @media (max-width:1040px){ .mx.wide{overflow-x:auto} .mx.wide table{min-width:880px} } /* ── numbered flow ──────────────────────────────────────── */ .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:fl} .flow .card-b{counter-increment:fl;position:relative} .flow .card-b::before{content:"0" counter(fl);display:block;margin-bottom:16px; font:500 10.5px/1 var(--mono);letter-spacing:.2em;color:var(--v-lt)} .flow .h4{margin:0 0 9px} .flow kbd{font:500 11.5px/1 var(--mono);background:var(--surf-2);border:1px solid var(--bd-2); border-bottom-width:2px;border-radius:6px;padding:3px 7px;color:var(--fg)} @media (max-width:860px){.flow{grid-template-columns:1fr}}