/* ========================================================================== Mynato — landing page Brand world: Moss, dark-first. One accent colour, no second colour. Built to SPEC-B-page.md. Owns nothing the sky animation touches. ========================================================================== */ /* --- 1. Ground ----------------------------------------------------------- */ /* TWO brand worlds, switchable from the header. Moss is the default and is what `:root` carries; Myna is opt-in via [data-brand="myna"] on . Nothing else in the sheet knows which one is on — every rule downstream reads the same six tokens. The sky animation re-reads them on mutation. */ :root{ /* Moss. The original. Dark-first, one accent, no second colour. */ --bg:#0D1310; --panel:#161E19; --surface:rgba(22,30,25,.62); --surface-line:rgba(95,195,140,.12); --ink:#E4EBE5; --mute:#7E8F84; --line:#243029; --acc:#5FC38C; --acc-ink:#0D1310; --mark:#51A77E; --mark-dark:#243029; --beak:#F2B933; --beak-shade:#A9761A; --glint:#FFFFFF; --wall:linear-gradient(165deg,#22563C,#12301F 50%,#08150E); /* identical to the Moss direction you picked: ui-rounded first, so SF Pro Rounded wins on a Mac and no installed webfont can pre-empt it. Figtree led the stack before — if you have it installed, it was overriding. */ /* "SF Pro Rounded" MUST come first. `ui-rounded` is honoured by Safari but unrecognised by Chrome, which falls through to its default standard font — a serif. That made the page rounded in one browser and Times in the other. */ --fd:"SF Pro Rounded",ui-rounded,-apple-system,system-ui,"Avenir Next",sans-serif; --fu:-apple-system,BlinkMacSystemFont,"Avenir Next",sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --r-kbd:6px; --r-in:10px; --r-btn:12px; --r-card:16px; /* ONE content measure. Every section, box, list and figure on the page is this wide and no other. Mixing 640 / 680 / 840 / 900 is what made the page look assembled rather than designed. */ /* TWO widths, and only two. Every text block — prose, grids, lists, cards, FAQ — is --content, so they all share one left and one right edge. Only the hero figure breaks out to --figure, which reads as deliberate because it is a picture, not a column of words. */ /* ONE width for the entire page. Hero figure, demo rows, tables, prose — all of it. A second "figure" width was what made the page feel like two pages stapled together. Running prose caps at --read, centred, which is symmetric and therefore reads as intentional rather than misaligned. */ --content:1040px; --read:58ch; --gutter:32px; /* ONE padding value for every card, cell and box on the page, and one gap. Mixing 20/22/24/26/28 is what made the spacing look hand-tuned per box. */ --pad:28px; --gap:16px; --section:128px; /* real air between movements */ --e-micro:140ms ease-out; --e-state:240ms cubic-bezier(.2,0,0,1); } /* --- Moss, light ---------------------------------------------------------- */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#EEF0EC; --panel:#FAFBF9; --ink:#131A15; --mute:#5F6F63; --line:#D8DDD6; --acc:#2F6B4A; --acc-ink:#FAFBF9; --surface:rgba(250,251,249,.66); --surface-line:rgba(47,107,74,.14); } } :root[data-theme="light"]{ --bg:#EEF0EC; --panel:#FAFBF9; --ink:#131A15; --mute:#5F6F63; --line:#D8DDD6; --acc:#2F6B4A; --acc-ink:#FAFBF9; --surface:rgba(250,251,249,.66); --surface-line:rgba(47,107,74,.14); } :root[data-theme="dark"]{ --bg:#0D1310; --panel:#161E19; --ink:#E4EBE5; --mute:#7E8F84; --line:#243029; --acc:#5FC38C; --acc-ink:#0D1310; --surface:rgba(22,30,25,.62); --surface-line:rgba(95,195,140,.12); } /* --- Myna ----------------------------------------------------------------- */ /* Palette taken from the logo: near-black bird, amber beak, warm paper. One accent, and it is the beak yellow. Must sit after every Moss rule — the [data-brand] blocks carry one extra attribute each so they win the specificity tie against the Moss [data-theme] rules above. */ :root[data-brand="myna"]{ --bg:#0E1013; --panel:#171A1E; --ink:#EDEAE3; --mute:#8B8E88; --line:#262A2E; --acc:#F2B933; --acc-ink:#14120E; --mark:#A9761A; --mark-dark:#14161A; --beak:#F2B933; --beak-shade:#A9761A; --glint:#FFFFFF; --surface:rgba(23,26,30,.62); --surface-line:rgba(242,185,51,.13); --wall:linear-gradient(165deg,#3A3226,#1C1913 52%,#0C0B08); } @media (prefers-color-scheme: light){ :root[data-brand="myna"]:not([data-theme="dark"]){ --bg:#F6F2EC; --panel:#FFFDF8; --ink:#14161A; --mute:#5E6159; --line:#E3DED3; --acc:#A9761A; --acc-ink:#FFFDF8; --surface:rgba(255,253,248,.66); --surface-line:rgba(169,118,26,.18); } } :root[data-brand="myna"][data-theme="light"]{ --bg:#F6F2EC; --panel:#FFFDF8; --ink:#14161A; --mute:#5E6159; --line:#E3DED3; --acc:#A9761A; --acc-ink:#FFFDF8; --surface:rgba(255,253,248,.66); --surface-line:rgba(169,118,26,.18); } :root[data-brand="myna"][data-theme="dark"]{ --bg:#0E1013; --panel:#171A1E; --ink:#EDEAE3; --mute:#8B8E88; --line:#262A2E; --acc:#F2B933; --acc-ink:#14120E; --surface:rgba(23,26,30,.62); --surface-line:rgba(242,185,51,.13); } /* --- 2. Base ------------------------------------------------------------- */ /* Selection uses the brand accent, not the OS blue — a stray system colour is the fastest way to make a considered page look unfinished. */ ::selection{background:var(--acc);color:var(--acc-ink);text-shadow:none} ::-moz-selection{background:var(--acc);color:var(--acc-ink);text-shadow:none} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--fu); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .4s ease,color .4s ease; } /* the sky sits behind everything; every content wrapper lifts above it */ /* width/height are required: is a replaced element, so inset:0 alone leaves it at its intrinsic 300x150 instead of stretching. */ #sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} header,main,footer{position:relative;z-index:1} .wrap{max-width:calc(var(--content) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)} h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.024em;text-wrap:balance;margin:0} h1{font-size:clamp(42px,7vw,72px);line-height:1.02} h2{font-size:clamp(28px,4vw,40px);line-height:1.08} h3{font-size:20px;line-height:1.25;letter-spacing:-.018em} h4{font-size:17px;line-height:1.3;letter-spacing:-.016em} p{margin:0} a{color:inherit} :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px} .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--acc);color:var(--acc-ink); padding:10px 18px;border-radius:0 0 var(--r-in) 0; font-size:15px;font-weight:600;text-decoration:none; } .skip:focus{left:0} .vh{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* --- 3. Header ----------------------------------------------------------- */ .site-head{padding:20px 0} .site-head .in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5)} .brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--fd);font-size:17px;font-weight:600;letter-spacing:-.02em;text-decoration:none} .brand svg{width:20px;height:20px;color:var(--acc);display:block} /* The full lockup — bird, wordmark and tagline. 2.11:1, so the height drives it. */ .brand--logo{gap:0} .brand--logo svg{width:auto;height:52px;aspect-ratio:1505/938;color:inherit} footer .brand--logo svg{height:74px} @media (max-width:640px){ .brand--logo svg{height:40px} } .head-link{font-size:15px;text-decoration:none;color:var(--ink)} .head-link:hover{text-decoration:underline} .head-link:focus-visible{text-decoration:underline} /* Brand switch. A two-position segmented control, not a hover affordance and not an icon — both states are always visible and always labelled. */ .head-right{display:flex;align-items:center;gap:var(--s5)} .brandsw{ display:flex;align-items:center;gap:2px;padding:2px; border:1px solid var(--line);border-radius:999px;background:var(--surface); transition:border-color var(--e-state) } .brandsw button{ font:inherit;font-size:12px;font-weight:600;letter-spacing:-.01em; padding:5px 11px;border:0;border-radius:999px;cursor:pointer; background:transparent;color:var(--mute); transition:background var(--e-state),color var(--e-state) } .brandsw button:hover{color:var(--ink)} .brandsw button[aria-pressed="true"]{background:var(--acc);color:var(--acc-ink)} .brandsw button:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media(max-width:520px){.brandsw button{padding:5px 9px;font-size:11.5px}} /* --- 4. Hero ------------------------------------------------------------- */ .hero{padding:110px 0 0;text-align:center} .eyebrow{ display:inline-flex;align-items:center;gap:7px; font-size:13px;color:var(--mute); border:1px solid var(--line);border-radius:100px; padding:6px 14px 6px 10px;margin-bottom:var(--s5); } .eyebrow svg{width:15px;height:15px;color:var(--acc);flex:none} .hero .dek{ font-size:clamp(17px,2.1vw,20px);color:var(--mute); max-width:48ch;margin:22px auto 0;line-height:1.55; text-wrap:balance; } .btnrow{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:var(--s6);flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;gap:9px; font-family:var(--fu);font-size:16px;font-weight:600;letter-spacing:-.01em; padding:13px 24px;border-radius:var(--r-btn); border:none;cursor:pointer;text-decoration:none; background:var(--acc);color:var(--acc-ink); transition:transform var(--e-micro),filter var(--e-micro); } .btn:hover{transform:translateY(-1px);filter:brightness(1.06)} .btn svg{width:17px;height:17px;flex:none} .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)} .btn.ghost:hover{filter:none;box-shadow:inset 0 0 0 1px var(--mute)} .micro{font-size:13px;color:var(--mute);margin-top:var(--s4)} /* --- 5. The Mac mock ------------------------------------------------------ */ .mac{ margin:72px auto 0;max-width:var(--content);width:calc(100% - var(--gutter) * 2); border-radius:var(--r-card);overflow:hidden; background:var(--wall); box-shadow:0 34px 80px -22px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.10); } .mbar{ height:26px;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s3); background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); color:#fff;font-size:12px; } .mbar .app{font-weight:700;letter-spacing:-.01em} .mbar .mi{opacity:.82;font-size:11.5px} .mbar .right{margin-left:auto;display:flex;align-items:center;gap:var(--s3)} .mbar .right>svg{width:15px;height:15px;opacity:.9;display:block} .mbar .slot{display:flex;align-items:center;padding:2px;border-radius:5px;background:rgba(255,255,255,.22)} .mbar .slot svg{width:18px;height:18px;display:block} .mbar .clock{font-size:11.5px;opacity:.92;font-variant-numeric:tabular-nums} @media(max-width:640px){.mbar .mi{display:none}} .desk{padding:var(--s6) var(--s5) 42px;display:flex;justify-content:center} .win{ width:100%;max-width:640px;border-radius:var(--r-btn);overflow:hidden; background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:var(--ink); box-shadow:0 22px 50px -12px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.28); } .win-bar{display:flex;align-items:center;gap:var(--s2);padding:10px 13px;border-bottom:1px solid var(--line)} .tl{display:flex;gap:7px} .tl i{width:11px;height:11px;border-radius:50%;display:block} .tl i:nth-child(1){background:#FF5F57} .tl i:nth-child(2){background:#FEBC2E} .tl i:nth-child(3){background:#28C840} .win-title{font-size:12.5px;color:var(--mute);margin-left:var(--s1)} .win-body{padding:20px 20px var(--s5);min-height:150px;text-align:left} .to{font-size:13px;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:14px} .msg{font-size:16px;line-height:1.6;min-height:1.6em} .typed{ display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom; border-right:2px solid var(--acc);max-width:100%; animation:type 10s steps(46) infinite,fadeline 10s linear infinite,caret 900ms step-end infinite; } @keyframes type{ 0%,6%{width:0} 56%,100%{width:46ch} } @keyframes fadeline{ 0%,92%{opacity:1} 97%,100%{opacity:0} } @keyframes caret{50%{border-color:transparent}} .hud{ display:inline-flex;align-items:center;gap:9px;margin-top:20px; padding:7px 13px 7px 10px;border-radius:100px; background:var(--acc);color:var(--acc-ink); font-size:12.5px;font-weight:600; animation:hud 10s infinite; } @keyframes hud{ 0%{opacity:0} 3%,60%{opacity:1} 66%,100%{opacity:0} } .hud .lvl{display:flex;gap:2.5px;align-items:center;height:13px} .hud .lvl i{width:2.5px;border-radius:2px;background:currentColor;animation:lv 900ms ease-in-out infinite} .hud .lvl i:nth-child(1){height:5px;animation-delay:0s} .hud .lvl i:nth-child(2){height:11px;animation-delay:.12s} .hud .lvl i:nth-child(3){height:7px;animation-delay:.24s} .hud .lvl i:nth-child(4){height:13px;animation-delay:.36s} .hud .lvl i:nth-child(5){height:6px;animation-delay:.48s} @keyframes lv{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}} .hud kbd{font-family:var(--mono);background:none;box-shadow:none;padding:0;font-size:12.5px} /* --- 6. Sections --------------------------------------------------------- */ .sec{padding:var(--section) 0} .sec + .sec{padding-top:0} .sec.tight{padding-top:0} /* Section titles carry the accent; the hero h1 stays in ink so it remains the loudest thing on the page and the green reads as rhythm, not decoration. */ .sec h2{color:var(--acc)} .sec-h{text-align:center;margin-bottom:var(--s7)} .sec-h p{color:var(--mute);max-width:var(--read);margin:var(--s4) auto 0;font-size:17.5px;line-height:1.65} /* three beats */ .beats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)} .beat{background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--surface-line);border-radius:var(--r-card);padding:var(--pad)} .beat{text-align:center} .beat .ic{ width:38px;height:38px;border-radius:11px;margin-left:auto;margin-right:auto; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc);margin-bottom:18px; } .beat .ic svg{width:21px;height:21px} .beat h3{margin-bottom:var(--s2)} .beat p{color:var(--mute);font-size:15px;line-height:1.55} /* app tiles */ .apps{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:760px;margin:0 auto} .tile{width:60px;text-align:center} .tile .sq{ width:60px;height:60px;border-radius:14px; display:flex;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,.18),inset 0 .5px 0 rgba(255,255,255,.28); } .tile .sq svg{width:34px;height:34px} .tile span{display:block;font-size:11.5px;color:var(--mute);margin-top:var(--s2);letter-spacing:-.005em} .apps-more{text-align:center;color:var(--mute);font-size:15px;margin-top:30px;max-width:52ch;margin-left:auto;margin-right:auto} /* automations */ .split{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center} .split p{color:var(--mute);margin-top:18px;font-size:16.5px;max-width:44ch} .uses{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:var(--s3)} .uses li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px} .uses svg{width:17px;height:17px;color:var(--acc);flex:none;margin-top:3px} .term{ border-radius:var(--r-btn);overflow:hidden; background:#111;color:#E6E6E0; box-shadow:0 20px 44px -14px rgba(0,0,0,.55),0 0 0 .5px rgba(0,0,0,.4); } .term-bar{display:flex;align-items:center;gap:var(--s2);padding:10px 13px;background:#1C1C1A} .term-bar .t{font-size:12px;color:#8B8A82;margin-left:var(--s1)} .term pre{margin:0;padding:18px 18px 22px;font-family:var(--mono);font-size:12.5px;line-height:1.85;overflow-x:auto} .term .c{color:#7C7B72} .term .p{color:var(--acc)} /* details rail */ .rail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)} .rail>div{border:1px solid var(--surface-line);border-radius:var(--r-card);text-align:center} .rail svg{margin-left:auto;margin-right:auto} .rail>div{background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:var(--pad)} .rail svg{width:20px;height:20px;color:var(--acc);margin-bottom:14px;display:block} .rail h4{margin-bottom:6px} .rail p{font-size:15px;color:var(--mute);line-height:1.5} /* faq */ /* .faq.prose beats .prose{text-align:center} on specificity — relying on source order here is what centred the answers. */ /* the block spans the page measure like every other block; only the running answers cap at --read, centred inside it */ .faq,.faq.prose{border-top:1px solid var(--line);text-align:center;max-width:none} .faq details{border-bottom:1px solid var(--line)} .faq summary{ display:flex;align-items:center;justify-content:center;gap:14px; padding:var(--pad) 0;cursor:pointer;list-style:none; transition:color var(--e-micro); } .faq summary::-webkit-details-marker{display:none} .faq summary:hover h4{color:var(--acc)} .faq summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px} .faq h4{margin:0;transition:color var(--e-micro)} .faq details[open] summary h4{color:var(--acc)} .chev{ flex:none;width:11px;height:11px;position:relative; transition:transform var(--e-state); } .chev::before,.chev::after{ content:"";position:absolute;top:50%;left:0; width:11px;height:1.5px;background:var(--mute);border-radius:1px; transition:transform var(--e-state),background var(--e-micro); } .chev::after{transform:rotate(90deg)} .faq details[open] .chev::after{transform:rotate(0deg)} .faq details[open] .chev::before,.faq details[open] .chev::after{background:var(--acc)} .faq .ans{padding:0 0 var(--pad)} .faq .ans p{color:var(--mute);font-size:16px;line-height:1.68;max-width:var(--read);margin:0 auto 12px} .faq .ans p:last-child{margin-bottom:0} .faq details[open] .ans{animation:ansIn var(--e-state) both} @keyframes ansIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* --- 7. Closer + form ---------------------------------------------------- */ .closer{text-align:center;padding:var(--section) 0} .closer h2{font-size:clamp(30px,4.6vw,46px);line-height:1.05;max-width:18ch;margin:0 auto} .signup{max-width:400px;margin:34px auto 0;text-align:left} .signup .lab{display:block;font-size:15px;margin-bottom:10px} .form{display:flex;gap:9px} .form input{ flex:1;min-width:0; font-family:var(--fu);font-size:15px;padding:12px 15px; border-radius:var(--r-in);border:1px solid var(--line); background:var(--panel);color:var(--ink); } .form input::placeholder{color:var(--mute)} .form button{ font-family:var(--fu);font-size:15px;font-weight:600; padding:12px 18px;border-radius:var(--r-in);border:none; background:var(--acc);color:var(--acc-ink);cursor:pointer;white-space:nowrap; transition:filter var(--e-micro); } .form button:hover{filter:brightness(1.06)} .form button[disabled]{opacity:.6;cursor:default} .form-note{font-size:13px;color:var(--mute);margin-top:var(--s3)} .form-msg{font-size:15px;color:var(--ink);margin-top:var(--s3)} .signup [data-swap]{transition:opacity var(--e-state)} .signup.busy [data-swap]{opacity:.55} .done{font-size:15px;color:var(--ink)} /* --- 8. Footer ----------------------------------------------------------- */ footer{border-top:1px solid var(--line);padding:34px 0 60px;margin-top:0} .foot{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:flex-start} .foot small{color:var(--mute);font-size:12.5px;display:block;line-height:1.7;margin-top:var(--s3)} .foot .links{display:flex;gap:20px;font-size:13.5px} .foot .links a{color:var(--mute);text-decoration:none} .foot .links a:hover{color:var(--ink);text-decoration:underline} /* --- 9. Breakpoints ------------------------------------------------------ */ @media(max-width:880px){ .split{grid-template-columns:1fr;gap:34px} .rail{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .beats{grid-template-columns:1fr} } @media(max-width:640px){ :root{--gutter:20px} .sec{padding:var(--s8) 0} .closer{padding:var(--s8) 0 var(--s8)} .hero{padding-top:var(--s7)} .desk{padding:20px 14px 28px} } @media(max-width:460px){ .rail{grid-template-columns:1fr} .form{flex-direction:column} .form button{width:100%} } /* --- 10. Reduced motion --------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .typed{width:46ch;opacity:1;border-right-color:var(--acc)} .hud{opacity:1} .hud .lvl i{transform:none} .btn:hover{transform:none} } /* --- 11. Long-form prose sections ---------------------------------------- */ /* .prose sets no width: .wrap owns the measure, and an equal-specificity override here is exactly the cascade collision that broke the layout. */ .prose{text-align:center} .prose h2{margin-bottom:var(--s6)} .prose .lead{text-align:center;margin-left:auto;margin-right:auto} .prose h2.h-small{font-size:clamp(22px,2.8vw,28px)} .lead{font-size:17px;line-height:1.75;color:var(--mute);margin-bottom:var(--s5);max-width:var(--read);margin-left:auto;margin-right:auto} .lead:last-child{margin-bottom:0} .lead.muted-p{font-size:15px;opacity:.85} /* --- spoken examples ------------------------------------------------------ */ .says{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)} .say{border:1px solid var(--surface-line);border-radius:var(--r-card)} .say{text-align:center;background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:var(--pad);display:flex;flex-direction:column;gap:9px} .say .q{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--acc)} .say .a{font-size:15px;color:var(--mute);line-height:1.5} @media(max-width:640px){.says{grid-template-columns:1fr}} /* --- three (or four) steps ------------------------------------------------ */ .steps{ list-style:none;counter-reset:step;padding:0;margin:0; display:grid;gap:var(--gap); } .steps li{border:1px solid var(--surface-line);border-radius:var(--r-card)} .steps li{ text-align:center;counter-increment:step;background:var(--surface); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); padding:calc(var(--pad) + 16px) var(--pad) var(--pad);position:relative;font-size:16px;color:var(--mute);line-height:1.55; } .steps li::before{ content:counter(step);position:absolute;left:0;right:0;top:12px; font-family:var(--mono);font-size:12px;color:var(--acc); font-variant-numeric:tabular-nums; } .steps li b{color:var(--ink);font-weight:600} /* --- pricing -------------------------------------------------------------- */ .tiers{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)} @media(max-width:760px){.tiers{grid-template-columns:1fr}} .tier{ text-align:center;background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--surface-line); border-radius:var(--r-card);padding:var(--pad); } .tier.lead-tier{border-color:var(--acc)} .tier h3{font-size:16px;font-weight:600;margin-bottom:var(--s3)} .tier .price{ font-family:var(--fd);font-size:38px;font-weight:600;letter-spacing:-.03em; line-height:1;margin-bottom:var(--s5); } .tier .price span{font-family:var(--fu);font-size:14px;font-weight:400;color:var(--mute);letter-spacing:0} .tier ul{list-style:none;padding:0;margin:0 0 var(--s5);display:grid;gap:10px} .tier li{font-size:15.5px;color:var(--mute);line-height:1.45;position:relative} .tier .fine{font-size:13.5px;color:var(--mute);line-height:1.55;margin:0} .tier .fine b{color:var(--ink);font-weight:600} /* --- 12. Use-case previews ------------------------------------------------ Four small stylised windows. Illustrations, exactly like the hero mock — not screenshots, and nothing here claims to be a recording. */ .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)} @media(max-width:640px){.shots{grid-template-columns:1fr}} .shot{ background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--surface-line);border-radius:var(--r-card); overflow:hidden;text-align:left; } .shot-bar{ display:flex;align-items:center;gap:var(--s2); padding:11px 14px;border-bottom:1px solid var(--surface-line); } .shot-bar .tl i{width:9px;height:9px} .shot-bar .t{font-size:12px;color:var(--mute);margin-left:var(--s1);font-weight:600} .shot-body{padding:var(--pad);min-height:112px;display:flex;flex-direction:column;gap:10px} .shot .field{font-size:12px;color:var(--mute)} .shot .line{font-size:14.5px;line-height:1.5;color:var(--ink)} .shot .line em{font-style:normal;color:var(--acc)} .shot .url{ font-size:12.5px;color:var(--mute);background:color-mix(in srgb,var(--ink) 8%,transparent); border-radius:100px;padding:6px 12px;display:inline-block; } .shot .code{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--mute)} .shot .code b{color:var(--ink);font-weight:400} .shot .mini{ display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto; font-size:11.5px;font-weight:600;color:var(--acc); } .shot .mini i{width:6px;height:6px;border-radius:50%;background:var(--acc);display:block} .shot .bubble{ background:var(--acc);color:var(--acc-ink);border-radius:16px 16px 4px 16px; padding:9px 13px;font-size:14px;align-self:flex-end;max-width:80%; } /* --- 13. Demos ------------------------------------------------------------ Alternating rows: copy one side, scene the other. Every scene is a stylised illustration animated in CSS — transform and opacity only, so it stays smooth — and none of them is or claims to be a screen recording. */ .demos{ max-width:var(--content);width:calc(100% - var(--gutter) * 2); margin:0 auto;display:grid;gap:calc(var(--section) * .62); } .demo-row{display:grid;grid-template-columns:1fr 1.15fr;gap:calc(var(--gap) * 3);align-items:center} .demo-row:nth-child(even) .demo-copy{order:2} @media(max-width:880px){ .demo-row{grid-template-columns:1fr;gap:var(--gap)} .demo-row:nth-child(even) .demo-copy{order:0} .demos{gap:calc(var(--section) * .6)} } .demo-copy{text-align:center;padding:var(--pad)} .demo-n{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--acc);margin-bottom:14px; } .demo-copy h3{font-size:clamp(21px,2.4vw,27px);margin-bottom:12px} .demo-copy p{color:var(--mute);font-size:16.5px;line-height:1.65;max-width:34ch;margin:0 auto} @media (prefers-reduced-motion: reduce){ .scene *{animation:none !important} .d1 .type1{width:34ch} .d2 .new{opacity:1}.d2 .old{opacity:0}.d2 .mark{transform:scaleX(1);opacity:.2} .d3 .vanish{opacity:.3} .d4 .fill{transform:scaleX(1)}.d4 .line{opacity:1;transform:none}.d4 .still{opacity:1} .d5 .voc::after{transform:scaleX(1)} } /* --- 13b. Demo surfaces — five deliberately different form factors -------- The whole point: no shared wrapper. One real window, one chromeless page, one chat, one document, one list. Identical title bars five times over is what makes a page read as machine-made. */ .demo-box{border-radius:var(--r-card);overflow:hidden;box-shadow:0 22px 50px -24px rgba(0,0,0,.6)} .scene{padding:var(--pad);text-align:left;position:relative;display:flex;flex-direction:column;gap:11px} .scene .field{font-size:12px;color:var(--mute)} .scene .line{font-size:15.5px;line-height:1.6;color:var(--ink)} .scene .said{ align-self:flex-start;margin-top:auto;font-size:13px;color:var(--acc); border:1px solid var(--surface-line);border-radius:100px;padding:7px 14px; background:color-mix(in srgb,var(--acc) 10%,transparent); } .caret{display:inline-block;width:2px;height:1em;background:var(--acc);vertical-align:-2px;margin-left:1px} /* 1 · a Mac window, with a menu bar. The only one that gets full chrome. */ .fx-window{background:var(--wall);padding:0 0 18px} .w-menubar{ height:24px;display:flex;align-items:center;gap:14px;padding:0 12px; background:rgba(255,255,255,.15);color:#fff;font-size:11px; } .w-app{font-weight:700} .w-right{margin-left:auto;display:flex;align-items:center;gap:9px} .w-slot{display:flex;padding:2px;border-radius:4px;background:rgba(255,255,255,.24)} .w-slot svg{width:15px;height:15px;color:#fff} .w-inner{ margin:18px 18px 0;border-radius:10px;overflow:hidden; background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); box-shadow:0 12px 30px -12px rgba(0,0,0,.6); } .w-title{ display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:12px;color:var(--mute); border-bottom:1px solid var(--surface-line); } .w-title .tl i{width:9px;height:9px} /* 2 · no chrome. A writing surface, warmer and flatter than everything else. */ .fx-paper{ background:color-mix(in srgb,var(--ink) 5%,var(--surface)); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid var(--surface-line); } .fx-paper .scene{padding:calc(var(--pad) + 10px);min-height:200px} .p-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)} .p-body{font-size:19px;line-height:1.6;color:var(--ink);margin:0} /* 3 · a chat thread. Bubbles, an avatar, no title bar. */ .fx-chat{background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--surface-line)} .c-head{ display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13.5px;font-weight:600; border-bottom:1px solid var(--surface-line); } .c-av{ width:24px;height:24px;border-radius:50%;display:grid;place-items:center; background:var(--acc);color:var(--acc-ink);font-size:12px;font-weight:700; } .fx-chat .scene{gap:9px} .c-in,.c-out{font-size:14.5px;line-height:1.45;padding:9px 13px;max-width:78%} .c-in{align-self:flex-start;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);border-radius:15px 15px 15px 4px} .c-out{align-self:flex-end;background:var(--acc);color:var(--acc-ink);border-radius:15px 15px 4px 15px} /* 4 · a document page. Lighter than the page around it, with margins. */ .fx-page{background:color-mix(in srgb,var(--ink) 11%,var(--surface));border:1px solid var(--surface-line)} .fx-page .scene{padding:22px 34px 26px} .pg-pill{ align-self:flex-end;display:inline-flex;align-items:center;gap:7px; font-size:11.5px;font-weight:600;color:var(--acc); border:1px solid var(--surface-line);border-radius:100px;padding:5px 11px; background:color-mix(in srgb,var(--acc) 9%,transparent); } .pg-time{font-variant-numeric:tabular-nums} .dot2{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse2 1.5s ease-in-out infinite} @keyframes pulse2{0%,100%{opacity:1}50%{opacity:.25}} .pg-line{font-size:14.5px;line-height:1.75;color:var(--ink);margin:0} .d4 .track{position:relative;height:3px;border-radius:3px;background:color-mix(in srgb,var(--ink) 14%,transparent);margin-top:2px} .d4 .fill{position:absolute;inset:0;border-radius:3px;background:var(--acc);transform-origin:left;transform:scaleX(0);animation:d4fill 11s linear infinite} @keyframes d4fill{0%{transform:scaleX(0)}92%,100%{transform:scaleX(1)}} .d4 .tick{position:absolute;left:30%;top:-4px;bottom:-4px;width:1px;background:var(--mute);opacity:.7} .d4 .tickrow{font-size:10.5px;color:var(--mute);margin-left:22%;margin-top:-6px} /* 5 · a checklist. Rows and tick circles — no window anywhere. */ .fx-list{background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--surface-line)} .l-head{padding:14px 18px 0;font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .fx-list .scene{gap:0;padding:10px 18px 18px} .l-row{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--surface-line)} .l-row:last-of-type{border-bottom:none} .l-tick{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--mute);flex:none} .l-tick.done{background:var(--acc);border-color:var(--acc)} /* --- shared scene animations --------------------------------------------- */ .scene .hudlet{ display:inline-flex;align-items:center;gap:8px;align-self:flex-start; font-size:12px;font-weight:600;color:var(--acc-ink);background:var(--acc); border-radius:100px;padding:6px 12px; } .scene .hudlet .lvl{display:flex;gap:2.5px;align-items:center;height:11px} .scene .hudlet .lvl i{width:2.5px;border-radius:2px;background:currentColor;height:11px} .scene .keys{position:absolute;right:var(--pad);bottom:var(--pad);display:flex;gap:5px} .scene .keys kbd{font-family:var(--mono);font-size:11px;padding:4px 7px;border-radius:5px; background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mute)} .d1 .type1{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:d1type 9s steps(34) infinite} @keyframes d1type{0%,14%{width:0}52%,88%{width:34ch}100%{width:0}} .d1 .caret{animation:blinkc .9s step-end infinite} @keyframes blinkc{50%{opacity:0}} .d1 .hudlet{animation:d1hud 9s infinite} @keyframes d1hud{0%,6%{opacity:0;transform:translateY(4px)}12%,54%{opacity:1;transform:none}62%,100%{opacity:0;transform:translateY(4px)}} .d1 .hudlet .lvl i{animation:d1lvl .85s ease-in-out infinite} .d1 .hudlet .lvl i:nth-child(2){animation-delay:.1s} .d1 .hudlet .lvl i:nth-child(3){animation-delay:.2s} .d1 .hudlet .lvl i:nth-child(4){animation-delay:.3s} .d1 .hudlet .lvl i:nth-child(5){animation-delay:.4s} @keyframes d1lvl{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} .d1 .keys kbd{animation:d1key 9s infinite} .d1 .keys kbd:nth-child(2){animation-delay:.06s} .d1 .keys kbd:nth-child(3){animation-delay:.12s} @keyframes d1key{0%,4%{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mute)} 9%,52%{background:var(--acc);color:var(--acc-ink)}62%,100%{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mute)}} /* inline-grid stacks both words in one cell, so the span sizes to the wider of the two and the sentence never shifts or leaves a gap mid-swap */ .d2 .swap{position:relative;display:inline-grid} .d2 .old,.d2 .new{grid-area:1/1} .d2 .mark{position:absolute;inset:-3px -5px;border-radius:5px;background:var(--acc);transform:scaleX(0);transform-origin:left;opacity:0;animation:d2mark 8s infinite} @keyframes d2mark{0%,34%{transform:scaleX(0);opacity:0}42%,56%{transform:scaleX(1);opacity:.26}70%,100%{transform:scaleX(1);opacity:0}} .d2 .new{color:var(--acc);opacity:0;animation:d2in 8s infinite} .d2 .old{animation:d2out 8s infinite} @keyframes d2out{0%,54%{opacity:1;filter:blur(0)}60%,100%{opacity:0;filter:blur(3px)}} @keyframes d2in{0%,54%{opacity:0;filter:blur(3px)}62%,100%{opacity:1;filter:blur(0)}} .d2 .said{animation:saidIn 8s infinite} @keyframes saidIn{0%,12%{opacity:0;transform:translateY(6px)}20%,66%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(6px)}} .d3 .vanish{animation:d3go 7.5s infinite;overflow:hidden} @keyframes d3go{0%,52%{opacity:1;max-height:60px;transform:none;filter:blur(0)} 66%{opacity:0;max-height:60px;transform:translateX(14px);filter:blur(4px)} 72%,94%{opacity:0;max-height:0;padding-top:0;padding-bottom:0} 100%{opacity:1;max-height:60px;filter:blur(0)}} .d3 .said{animation:saidIn 7.5s infinite} .d4 .pg-line{opacity:0;transform:translateY(6px)} .d4 .l1{animation:d4line 11s infinite;animation-delay:.6s} .d4 .l2{animation:d4line 11s infinite;animation-delay:3.6s} .d4 .l3{animation:d4line 11s infinite;animation-delay:6.6s} @keyframes d4line{0%{opacity:0;transform:translateY(6px)}6%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(6px)}} .d5 .voc{position:relative;color:var(--acc);font-weight:600} .d5 .voc::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-2px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;border-radius:2px} .d5 .v1::after{animation:d5u 9s infinite;animation-delay:.4s} .d5 .v2::after{animation:d5u 9s infinite;animation-delay:1.5s} @keyframes d5u{0%{transform:scaleX(0)}10%,78%{transform:scaleX(1)}90%,100%{transform:scaleX(0)}} .d5 .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .d5 .chips span{font-size:12px;color:var(--mute);border:1px solid var(--surface-line);border-radius:100px;padding:5px 11px} .d5 .chips span:nth-child(1){animation:d5chip 9s infinite;animation-delay:.4s} .d5 .chips span:nth-child(2){animation:d5chip 9s infinite;animation-delay:1.5s} @keyframes d5chip{0%,4%{border-color:var(--surface-line);color:var(--mute)}12%,74%{border-color:var(--acc);color:var(--acc)}86%,100%{border-color:var(--surface-line);color:var(--mute)}} /* --- 14. Merged commands block ------------------------------------------- */ .cmds{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)} @media(max-width:640px){.cmds{grid-template-columns:1fr}} .cmd{ background:var(--surface);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--surface-line);border-radius:var(--r-card); padding:var(--pad);display:flex;flex-direction:column;gap:7px; } .cmd b{font-size:17px;font-weight:600;color:var(--acc);letter-spacing:-.01em} .cmd span{font-size:14.5px;color:var(--mute);line-height:1.5} .cmds-foot{margin:var(--s6) auto 0;max-width:var(--read);font-size:15.5px;color:var(--mute);line-height:1.65} /* --- 15. Pricing table --------------------------------------------------- A real comparison table: features down the left, two columns across. Marks are cell VALUES, not icons decorating a label, which keeps the house rule ("no icons before text") intact while still reading as a tick sheet. */ .ptable{ background:var(--surface);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid var(--surface-line);border-radius:var(--r-card);overflow:hidden; } .prow{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center; border-top:1px solid var(--surface-line)} .prow:first-child{border-top:none} .pcell{padding:14px var(--pad);text-align:center;font-size:15.5px} .pcell.pfeat{text-align:left;color:var(--mute)} .pcell.ppro{background:color-mix(in srgb,var(--acc) 7%,transparent)} .phead .pcell{padding:var(--pad);display:flex;flex-direction:column;gap:4px} .pname{font-size:13px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .pamt{font-family:var(--fd);font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)} .phead .ppro .pamt{color:var(--acc)} .pper{font-size:13px;color:var(--mute);line-height:1.45} .yes,.no{display:inline-block;width:17px;height:17px;position:relative} .yes::before,.yes::after{content:"";position:absolute;background:var(--acc);border-radius:2px} .yes::before{width:6px;height:2px;left:1px;top:9px;transform:rotate(45deg)} .yes::after{width:12px;height:2px;left:4px;top:7px;transform:rotate(-50deg)} .no::before{content:"";position:absolute;width:11px;height:2px;left:3px;top:8px; background:var(--mute);opacity:.45;border-radius:2px} .pfoot .pcell{padding:var(--pad);display:flex;flex-direction:column;gap:10px;align-items:center} .pnote{font-size:13px;color:var(--mute);line-height:1.5;max-width:26ch} .btn.small{font-size:15px;padding:11px 20px} .pafter{margin:var(--s6) auto 0;max-width:var(--read);text-align:center} .pafter p{font-size:16px;line-height:1.7;color:var(--mute);margin-bottom:var(--s4)} .pafter p:last-child{margin-bottom:0} .pafter b{color:var(--ink);font-weight:600} .pfine{font-size:14.5px !important} @media(max-width:760px){ .prow{grid-template-columns:1fr} .phead{grid-template-columns:1fr 1fr} .phead .pfeat{display:none} .pcell.pfeat{text-align:center;padding-bottom:4px;color:var(--ink)} .pcell[data-l]{padding-top:4px} .pcell[data-l]::before{content:attr(data-l) " ";font-size:12px;color:var(--mute);margin-right:8px} .prow:not(.phead):not(.pfoot){padding-bottom:10px} .pfoot{grid-template-columns:1fr} } /* --- 16. Footer, with room for SEO --------------------------------------- */ footer{border-top:1px solid var(--line);padding:var(--section) 0 var(--s8);margin-top:0} .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gap);text-align:left} @media(max-width:880px){.foot-top{grid-template-columns:1fr 1fr;gap:var(--s6)}} @media(max-width:520px){.foot-top{grid-template-columns:1fr}} .foot-brand p{font-size:14px;color:var(--mute);line-height:1.6;margin-top:14px;max-width:34ch} .foot-made{font-size:13px !important;opacity:.8} .foot-nav h4{font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase; color:var(--mute);margin-bottom:14px;font-weight:400} .foot-nav{display:flex;flex-direction:column;gap:10px} .foot-nav a{font-size:14.5px;color:var(--ink);text-decoration:none;opacity:.85} .foot-nav a:hover{color:var(--acc);opacity:1} .foot-bottom{ display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between; margin-top:var(--section);padding-top:var(--s5);border-top:1px solid var(--line); font-size:12.5px;color:var(--mute); } /* ========================================================================== 17. DESIGN PASS — spacing, hierarchy, and the small elements that make a page feel composed rather than assembled. Later in the file on purpose: these are the intended values and they win. ========================================================================== */ /* --- vertical rhythm: one gap between movements, tight inside them ------- */ .sec{padding:var(--section) 0} .sec + .sec{padding-top:0} .sec.tight{padding-top:0} .hero{padding:clamp(80px,11vh,140px) 0 0} .mac{margin-top:clamp(48px,7vh,84px)} .closer{padding:var(--section) 0} @media(max-width:640px){:root{--section:84px;--pad:22px}} /* --- section headers: eyebrow, title, one line. That is the whole pattern. */ .sec-h{text-align:center;margin-bottom:clamp(40px,5vh,64px)} .sec-h.narrow{max-width:var(--read);margin-left:auto;margin-right:auto} .brow{ display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--mute);margin-bottom:18px; } .sec-h h2{font-size:clamp(30px,4.4vw,46px);line-height:1.04;letter-spacing:-.03em} .sec-h h2.h-small{font-size:clamp(24px,3vw,32px)} .sec-h p{ color:var(--mute);font-size:17px;line-height:1.65; max-width:var(--read);margin:20px auto 0; } .sec-h p + p{margin-top:14px} /* --- hero ---------------------------------------------------------------- */ h1{font-size:clamp(40px,6.6vw,74px);line-height:1.0;letter-spacing:-.035em} .hero .dek{font-size:clamp(17px,2vw,20px);max-width:none;margin-top:24px} .eyebrow{font-size:12.5px;padding:6px 15px 6px 11px;margin-bottom:28px;letter-spacing:.01em} .btn{padding:14px 26px;border-radius:13px;font-size:15.5px} .btn:hover{transform:translateY(-1px)} .micro{font-size:12.5px;margin-top:18px;letter-spacing:.01em} /* --- commands: quieter, tighter, no paragraph ---------------------------- */ .cmds{grid-template-columns:repeat(4,1fr);gap:var(--gap)} @media(max-width:880px){.cmds{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.cmds{grid-template-columns:1fr}} .cmd{padding:24px 20px;gap:9px;text-align:center;align-items:center} .cmd b{font-size:15.5px} .cmd span{font-size:13px} .cmds-foot{display:none} /* --- steps: the number is the graphic --------------------------------- */ .steps{grid-template-columns:repeat(3,1fr);gap:var(--gap)} @media(max-width:760px){.steps{grid-template-columns:1fr}} .steps li{ padding:30px 24px 28px;display:flex;flex-direction:column;gap:8px; align-items:center;text-align:center; } .steps li::before{ position:static;font-family:var(--fd);font-size:34px;font-weight:600; color:var(--acc);opacity:.32;line-height:1;margin-bottom:6px;letter-spacing:-.03em; } .steps li b{font-size:16.5px;color:var(--ink);font-weight:600} .steps li span{font-size:14px;color:var(--mute);line-height:1.5;max-width:24ch} /* --- demos: more air, calmer copy column --------------------------------- */ .demos{gap:clamp(56px,8vh,92px)} .demo-row{grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px)} .demo-copy{padding:0} .demo-n{ font-size:12px;letter-spacing:.22em;color:var(--acc);opacity:.75;margin-bottom:16px; font-variant-numeric:tabular-nums; } .demo-copy h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.028em;margin-bottom:14px} .demo-copy p{font-size:16px;line-height:1.6;max-width:28ch} /* --- pricing: give the free-tier promise real weight --------------------- */ .pafter{margin-top:var(--s7);max-width:var(--read)} .pkeep{ font-size:17px !important;line-height:1.7;color:var(--ink) !important; border-top:1px solid var(--surface-line);padding-top:var(--s5); } .pkeep b{color:var(--acc)} .pfine{margin-top:var(--s5) !important;font-size:14.5px !important;color:var(--mute) !important} .pamt{font-size:clamp(34px,4vw,44px)} .pcell{padding:15px var(--pad)} .prow:hover .pfeat{color:var(--ink)} .prow{transition:none} /* --- faq: quieter rows --------------------------------------------------- */ .faq{max-width:var(--read);margin:0 auto;text-align:left} .faq summary{justify-content:space-between;padding:22px 0;gap:24px} .faq h4{font-size:16.5px} .faq .ans{padding:0 0 24px} .faq .ans p{max-width:none;font-size:15.5px} /* --- close --------------------------------------------------------------- */ .closer h2{font-size:clamp(30px,4.6vw,48px);max-width:16ch} .signup{margin-top:var(--s7);max-width:400px} .signup .lab{display:none} .form-note{margin-top:14px;text-align:center} /* --- footer -------------------------------------------------------------- */ footer{padding:var(--section) 0 var(--s7)} .foot-bottom{margin-top:var(--s8)} /* ========================================================================== 18. REFINEMENT — measure, type consistency, and surfaces. ========================================================================== */ /* --- 18.1 measure: nothing wraps after four words ------------------------ */ .demo-copy p{max-width:36ch;font-size:16.5px;line-height:1.6} .steps li span{max-width:32ch} .cmd span{max-width:none} .pnote{max-width:32ch} .sec-h p{max-width:var(--read)} .foot-brand p{max-width:38ch} @media(max-width:880px){.demo-copy p{max-width:46ch;margin-left:auto;margin-right:auto}} /* --- 18.2 type: anything that acts as a title uses the display face ------ `b` inside a card was inheriting the UI face while a sibling h3 used the display face, so two things doing the same job looked like two systems. */ .steps li b, .cmd b, .c-head span, .w-app, .pkeep b{ font-family:var(--fd); letter-spacing:-.018em; font-weight:600; } .steps li b{font-size:17px} .cmd b{font-size:16px;letter-spacing:-.012em} h3,h4{letter-spacing:-.024em} /* labels are the one deliberate exception: mono, uppercase, tracked out */ .brow,.demo-n,.pname,.p-meta,.l-head,.foot-nav h4{font-family:var(--mono);font-weight:400} /* --- 18.3 surfaces: real material, not flat rectangles ------------------- */ .cmd,.steps li,.tier,.ptable,.demo-box,.beat,.rail>div{ background-image:linear-gradient(180deg, color-mix(in srgb,var(--ink) 3%,transparent) 0%, transparent 42%); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent), 0 1px 2px rgba(0,0,0,.18); transition:border-color var(--e-micro),transform var(--e-micro); } .cmd:hover,.steps li:hover{border-color:color-mix(in srgb,var(--acc) 26%,transparent)} .demo-box{ box-shadow: inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent), 0 28px 60px -30px rgba(0,0,0,.72); } .ptable{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent),0 20px 48px -32px rgba(0,0,0,.6)} .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .btn.ghost{box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)} .eyebrow{background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)} /* --- 18.4 a divider between movements, so the page has joints ----------- */ .sec + .sec > .wrap:first-child .brow{position:relative} .sec + .sec > .wrap:first-child .brow::before{ content:"";position:absolute;left:50%;top:-56px;transform:translateX(-50%); width:1px;height:34px; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 45%,transparent)); } .sec + .sec > .wrap:first-child .brow::after{ content:"";position:absolute;left:50%;top:-20px;transform:translateX(-50%); width:4px;height:4px;border-radius:50%;background:var(--acc);opacity:.55; } /* --- 18.5 alignment: one centred axis, everywhere ----------------------- */ .wrap>.sec-h,.wrap>.cmds,.wrap>.steps,.wrap>.ptable,.wrap>.faq,.wrap>.pafter{margin-left:auto;margin-right:auto} .demos{margin-left:auto;margin-right:auto} .demo-copy{display:flex;flex-direction:column;align-items:center;justify-content:center} /* --- 18.6 pricing table polish ------------------------------------------ */ .prow:not(.phead):not(.pfoot):nth-of-type(even) .pfeat{background:color-mix(in srgb,var(--ink) 2%,transparent)} .pcell.ppro{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--acc) 16%,transparent)} .phead .ppro{background:color-mix(in srgb,var(--acc) 11%,transparent)} .pfoot .ppro{background:color-mix(in srgb,var(--acc) 9%,transparent)} /* --- 18.7 no orphans. Balance short copy, tidy long copy. ---------------- */ .demo-copy p,.steps li span,.cmd span,.pnote,.micro,.hero .dek,.sec-h p,.form-note{ text-wrap:balance; } .pkeep,.faq .ans p,.foot-brand p{text-wrap:pretty} h1,h2,h3,h4,.cmd b,.steps li b{text-wrap:balance} /* --- 16. The two promise cards, under the pricing table ------------------- Appended last on purpose: .pafter is styled in three earlier places (sections 15 and the refinement pass) and every one of those assumed a narrow centred column of paragraphs. Overriding here, at the end, is the honest fix — going back to edit three scattered blocks would leave the next person guessing which one is live. */ .pafter{ max-width:none; /* was --read; now matches the table */ margin:var(--s6) auto 0; display:grid;grid-template-columns:1fr 1fr;gap:var(--gap); text-align:left; } .pafter p{margin-bottom:0;font-size:15.5px;line-height:1.6;color:var(--mute)} .pcard{ background:var(--surface); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid var(--surface-line);border-radius:var(--r-card); padding:var(--pad); display:flex;flex-direction:column;gap:var(--s3); } /* The mono eyebrow, same family as .pname / .brow so the page keeps one voice */ .pcard-k{ font-family:var(--mono);font-size:12px;font-weight:400; letter-spacing:.14em;text-transform:uppercase;color:var(--mute); } .pcard h3{font-size:21px;letter-spacing:-.02em;color:var(--ink)} /* Card A — what stays free. Text-only chips: the house rule bans icons before text, and six ticks would have been six icons. */ .pchips{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:7px;padding-top:var(--s2)} .pchips li{ font-size:13px;color:var(--mute);line-height:1; border:1px solid var(--surface-line);border-radius:100px;padding:7px 12px; } /* Card B — the only discount there will ever be, so it gets the accent edge and the price set at the same size as the table's own figures. No struck -through $43: that is banned outright, and the saving is stated in words. */ .pcard-student{ border-color:color-mix(in srgb,var(--acc) 42%,transparent); background: linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,transparent),transparent 62%), var(--surface); } .pcard-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .poff{ font-family:var(--fu);font-size:12px;font-weight:700;letter-spacing:-.005em; background:var(--acc);color:var(--acc-ink); border-radius:100px;padding:5px 11px;line-height:1;white-space:nowrap; } .pstud-amt{display:flex;align-items:baseline;gap:9px;margin:2px 0 0} .pstud-amt b{ font-family:var(--fd);font-size:clamp(34px,4vw,44px);font-weight:600; letter-spacing:-.03em;line-height:1;color:var(--acc); } .pstud-amt span{font-size:14px;color:var(--mute)} .pstud-link{ margin-top:auto;align-self:flex-start; font-size:14.5px;font-weight:600;color:var(--acc);text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--acc) 45%,transparent); padding-bottom:1px;transition:border-color var(--e-micro); } .pstud-link:hover{border-bottom-color:var(--acc)} @media(max-width:760px){ .pafter{grid-template-columns:1fr} } /* ========================================================================== Document pages — privacy, terms, refunds, students -------------------------------------------------------------------------- Legal text is the one place on this site that is read rather than scanned, so it gets a left-aligned narrow measure instead of the centred marketing rhythm. Nobody has ever enjoyed reading a centred privacy policy. Deliberately plain: no cards, no accent panels, no icons. A legal page that looks designed reads as marketing, which is the opposite of what it is for. ========================================================================== */ .doc{max-width:var(--read);margin:0 auto;text-align:left} .doc-head{margin-bottom:var(--s7)} .doc-head h1{margin-bottom:var(--s3)} .doc-updated{color:var(--mute);font-size:15px} .doc h2{color:var(--ink);font-size:23px;margin:var(--s7) 0 var(--s3);text-align:left} .doc h3{color:var(--ink);font-size:18px;margin:var(--s6) 0 var(--s2);text-align:left} .doc p,.doc li{color:var(--mute);font-size:16.5px;line-height:1.7} .doc p{margin:0 0 var(--s4)} .doc ul{margin:0 0 var(--s4);padding-left:1.25em} .doc li{margin-bottom:var(--s2)} .doc strong{color:var(--ink);font-weight:600} .doc a{color:var(--acc)} .doc hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0} /* The short-version table at the top of the privacy policy. It is the only part most people read, so it comes first and is the one styled element. */ .doc-summary{width:100%;border-collapse:collapse;margin:0 0 var(--s6)} .doc-summary td{padding:var(--s3) 0;border-bottom:1px solid var(--line); font-size:16px;line-height:1.55;vertical-align:top} .doc-summary td:first-child{color:var(--ink);padding-right:var(--s5);width:42%} .doc-summary td:last-child{color:var(--mute)} /* A quiet note at the end of a document — contact details, mostly. */ .doc-note{border-top:1px solid var(--line);margin-top:var(--s7);padding-top:var(--s5)} .doc-note p{margin-bottom:var(--s2)} @media (max-width:600px){ .doc-summary td{display:block;border-bottom:0;padding:2px 0} .doc-summary td:first-child{width:auto;padding-right:0;padding-top:var(--s3)} .doc-summary tr{display:block;border-bottom:1px solid var(--line);padding-bottom:var(--s3)} } /* resting: the beak is shut. It only opens to sing. */ #mascot .jaw{transform:rotate(-26deg)} #mascot[data-state="idle"] .head{animation:m-drift 6s ease-in-out infinite} #mascot[data-state="idle"] .wing{animation:m-settle 7s ease-in-out infinite} @keyframes m-drift{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}} @keyframes m-settle{0%,90%,100%{transform:rotate(0)}94%{transform:rotate(-8deg)}97%{transform:rotate(3deg)}} #mascot[data-state="look"] .head{animation:m-look 4s ease-in-out} @keyframes m-look{0%{transform:rotate(0)}25%,45%{transform:rotate(-16deg)} 60%,80%{transform:rotate(13deg)}100%{transform:rotate(0)}} #mascot[data-state="sing"] .jaw{animation:m-sing 1.6s ease-in-out} @keyframes m-sing{0%,100%{transform:rotate(-26deg)} 20%{transform:rotate(-3deg)}35%{transform:rotate(-22deg)} 55%{transform:rotate(-1deg)}75%{transform:rotate(-24deg)}} #mascot[data-state="preen"] .head{animation:m-preen 3.6s ease-in-out} #mascot[data-state="preen"] .wing{animation:m-liftwing 3.6s ease-in-out} @keyframes m-preen{0%,20%{transform:rotate(0)}42%,60%{transform:rotate(52deg) translateY(22px)} 68%{transform:rotate(44deg) translateY(17px)}76%{transform:rotate(52deg) translateY(22px)} 92%,100%{transform:rotate(0)}} @keyframes m-liftwing{0%,20%{transform:rotate(0)}42%,76%{transform:rotate(-13deg)} 92%,100%{transform:rotate(0)}} #mascot[data-state="fly"] .wing{animation:m-flap .34s ease-in-out infinite alternate} #mascot[data-state="fly"] .legs{transform:translateY(-34px) scaleY(.5)} @keyframes m-flap{from{transform:rotate(-20deg)}to{transform:rotate(32deg)}} #mascot .legs{transition:transform .4s cubic-bezier(.3,1.3,.5,1)} @media (max-width:720px){ #mascot{width:66px} } @media (prefers-reduced-motion: reduce){ #mascot{transition:none} #mascot *{animation:none !important;transition:none !important} } /* ------------------------------------------------------------------ mascot The mark, alive. Smaller than a logo on purpose — it is a creature on the page, not a badge. The head NEVER rotates: the neck belongs to the swoosh, so turning the head tore it off. Character comes from tilting and hopping the whole bird, which cannot come apart. */ #mascot{position:fixed;left:0;top:0;width:58px;z-index:3;pointer-events:none; will-change:transform;transition:transform .95s cubic-bezier(.34,.9,.36,1)} #mascot svg{width:100%;height:auto;display:block;overflow:visible} #mascot .wing{transform-box:view-box;transform-origin:668px 432px} #mascot .jaw{transform-box:view-box;transform-origin:929px 232px;opacity:0} #mascot .legsinner{transform-box:view-box;transform-origin:650px 560px; transition:transform .38s cubic-bezier(.3,1.3,.5,1)} #mascot .tilt{transform-box:view-box;transform-origin:660px 700px} /* Mouth SHUT is the default and the resting state: the upper mandible alone is a closed beak, so the lower jaw is simply not shown until it sings. */ #mascot[data-state="sing"] .jaw{opacity:1;animation:m-sing 1.5s ease-in-out} @keyframes m-sing{0%,100%{transform:rotate(-30deg)} 18%{transform:rotate(-2deg)}34%{transform:rotate(-24deg)} 52%{transform:rotate(0deg)}72%{transform:rotate(-26deg)}} #mascot[data-state="idle"] .wing{animation:m-settle 7s ease-in-out infinite} @keyframes m-settle{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-10deg)}96%{transform:rotate(4deg)}} /* looking about = the whole animal leans, so nothing detaches */ #mascot[data-state="look"] svg{animation:m-look 3.4s ease-in-out} @keyframes m-look{0%,100%{transform:rotate(0) scaleX(1)} 22%,40%{transform:rotate(-7deg) scaleX(1)} 58%{transform:rotate(0) scaleX(-1)}78%{transform:rotate(5deg) scaleX(-1)}} #mascot[data-state="preen"] svg{animation:m-preen 3.2s ease-in-out} #mascot[data-state="preen"] .wing{animation:m-lift 3.2s ease-in-out} @keyframes m-preen{0%,18%{transform:rotate(0)}40%,66%{transform:rotate(26deg)} 88%,100%{transform:rotate(0)}} @keyframes m-lift{0%,18%{transform:rotate(0)}40%,74%{transform:rotate(-16deg)} 88%,100%{transform:rotate(0)}} /* the walk-hop: a real bird bounces, it does not glide */ #mascot[data-state="hop"] svg{animation:m-hop .5s ease-in-out 2} @keyframes m-hop{0%,100%{transform:translateY(0) rotate(0)} 35%{transform:translateY(-9px) rotate(-5deg)}70%{transform:translateY(0) rotate(2deg)}} #mascot[data-state="fly"] .wing{animation:m-flap .3s ease-in-out infinite alternate} #mascot[data-state="fly"] .legsinner{transform:translateY(-26px) scaleY(.45)} @keyframes m-flap{from{transform:rotate(-22deg)}to{transform:rotate(34deg)}} @media (max-width:720px){ #mascot{width:44px} } @media (prefers-reduced-motion: reduce){ #mascot,#mascot *{transition:none !important;animation:none !important} } /* ------------------------------------------------------- hero brand block The plain lockup and the pronunciation. Sized in ch/rem off the type scale so it tracks the rest of the page rather than being pinned to a pixel. */ .brandblock{display:flex;flex-direction:column;align-items:center;gap:.55rem; margin:0 0 2.1rem;text-align:center} .bl-logo{width:min(430px,72vw);height:auto;aspect-ratio:1645/525;display:block} .pron{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.30em; text-transform:lowercase;color:var(--mute);display:flex;gap:.15em;align-items:baseline} .pron span{color:var(--ink)} .pron i{color:var(--acc);font-style:normal;transform:translateY(-.06em)} .pron-note{margin:0;font-size:12px;color:var(--mute);letter-spacing:.01em} .pron-note i{color:var(--acc);font-style:normal;padding:0 .12em} @media (max-width:720px){ .bl-logo{width:min(300px,80vw)} .pron{font-size:11px;letter-spacing:.24em} .pron-note{font-size:11px} }