/* ═══════════════════════════════════════════════════════════ FIELDCUT. THE LANDING PAGE Rebuilt 16 September 2026 to read the way spacefs.com reads: a floating pill nav, a hero over pinned product art, a quiet feature trio, one honest price, an FAQ, a close. Rebuilt again 24 September 2026. The hero and how it works are one pinned stage: the line centred, FieldCut's window small under it, and the scroll growing the window to the size of the screen and playing four photographs of the real app inside it (scripts/app-shots.mjs). Nothing here invents a value. Every colour, radius, shadow, weight, size, space and duration is a var(--fc-*) from ui/css/tokens.css, which is frozen. Every .btn / .chip box model comes from ui/css/components.css — this file never redefines them, only places them. The page follows the device, white in light and black in dark. The pictures in the window are the app in dark, the way it ships. Only transform and opacity are ever transitioned. Never `all`. ═══════════════════════════════════════════════════════════ */ html{scroll-behavior:smooth} body{-webkit-tap-highlight-color:transparent} main{position:relative;overflow:clip} /* The bar lives in styles/bar.css, shared with the changelog. */ @media (max-width:600px),(pointer:coarse) and (max-width:768px){ .desk-only{display:none} } /* ── THE STAGE ─────────────────────────────────────────── Rebuilt 24 September 2026, on Swayam's pick: the line centred with the app's window small under it, and the scroll bringing that window up into the middle of the screen, larger but still a screen with room around it, then playing open, see, sort and the folders on disk inside it, then the features sliding up over it. Two layouts from one piece of markup. html.stage-live (set in unless reduced motion is asked for) pins it and hands the window's position to the script at the bottom of index.html, which only ever writes five numbers: --x, --y, --w, --h and --r. Without it, the same markup is an ordinary page: the line, the four screens one under the other, and their words under them. */ .stage{position:relative} .how-anchor{display:block;height:0} .hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--fc-s-4); padding:clamp(104px,15vh,160px) var(--fc-gut) var(--fc-s-8)} .hero-chip{margin:0;animation:rise var(--fc-dur-slow) var(--fc-ease-out) both} /* The headline. Line one at full ink, line two quiet, rising into place one after the other on load. */ .lede{font-size:var(--fc-fs-11);line-height:var(--fc-lh-tight);letter-spacing:var(--fc-ls-tight); margin:0;text-wrap:balance} .lede .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em} .lede .ln>i{display:block;font-style:normal;transform:translateY(105%); animation:lnUp var(--fc-dur-slow) var(--fc-ease-out) calc(var(--fc-stagger) * 2) forwards} .lede .ln:nth-child(2)>i{animation-delay:calc(var(--fc-stagger) * 5)} .lede .quiet{color:var(--fc-fg2)} @keyframes lnUp{to{transform:none}} .sub{font-size:var(--fc-fs-lead);line-height:1.5;color:var(--fc-fg2);max-width:var(--fc-prose-narrow); margin:0;text-wrap:pretty; animation:rise var(--fc-dur-slow) var(--fc-ease-out) calc(var(--fc-stagger) * 8) both} .acts{display:flex;align-items:center;justify-content:center;gap:var(--fc-s-4);flex-wrap:wrap; margin-top:var(--fc-s-3); animation:rise var(--fc-dur-slow) var(--fc-ease-out) calc(var(--fc-stagger) * 11) backwards} @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* THE WINDOW. A MacBook screen: 16:10, the shape every picture in it was taken at, so each one fills it exactly. */ .win{ position:relative;width:100%;aspect-ratio:16 / 10;margin:0; border-radius:var(--r,var(--fc-r-xl));overflow:hidden;background:var(--fc-photo); box-shadow:0 0 0 1px var(--fc-photo-line),var(--fc-sh-float); } .shot{display:block} .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0} /* THE WORDS. Four of them, one per screen. */ .says{list-style:none;margin:0;padding:0} .say .kicker{display:flex;align-items:center;gap:var(--fc-s-2);margin:0 0 var(--fc-s-2)} .say .kicker .num{color:var(--fc-fg3)} .say-t{font-size:var(--fc-fs-8);line-height:var(--fc-lh-snug);letter-spacing:var(--fc-ls-tight); font-weight:var(--fc-fw-mid);margin:0 0 var(--fc-s-2);text-wrap:balance} .say-p{font-size:var(--fc-fs-read);line-height:1.55;color:var(--fc-fg2);margin:0;text-wrap:pretty} /* ── Without the script: an ordinary page. ── */ html:not(.stage-live) .win-at{padding:0 var(--fc-gut)} html:not(.stage-live) .win{aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible; display:flex;flex-direction:column;gap:var(--fc-s-7)} html:not(.stage-live) .shot{aspect-ratio:16 / 10;border-radius:var(--fc-r-xl);overflow:hidden; box-shadow:0 0 0 1px var(--fc-photo-line),var(--fc-sh-float)} html:not(.stage-live) .says{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--fc-s-7);padding:var(--fc-s-8) var(--fc-gut) 0} /* ── Pinned. ── */ .stage-live .stage{height:485svh} /* "How it works" lands on the grown window, not back on the headline. */ .stage-live .how-anchor{position:absolute;left:0;top:82svh} .stage-live .stick{position:sticky;top:0;height:100svh;overflow:hidden} .stage-live .hero-copy{position:absolute;inset:0 0 auto 0; opacity:var(--copy-o,1);transform:translateY(var(--copy-y,0px))} .stage-live .stick.is-past .hero-copy{visibility:hidden} .stage-live .win-at{position:absolute;left:0;top:0; width:var(--w,64vw);height:var(--h,40vw);transform:translate(var(--x,18vw),var(--y,64svh)); contain:layout paint} .stage-live .win{height:100%;aspect-ratio:auto; animation:winIn var(--fc-dur-slow) var(--fc-ease-out) calc(var(--fc-stagger) * 12) backwards} @keyframes winIn{from{opacity:0;transform:translateY(40px)}} .stage-live .shot{position:absolute;inset:0;opacity:0;transform:scale(1.012); transition:opacity 420ms var(--fc-ease),transform 700ms var(--fc-ease-out)} .stage-live .shot.is-on{opacity:1;transform:none} /* The words sit under the window, centred. They arrive once the window has settled, and change with the picture. (The rules below first place them on a sheet of glass in the window's corner, which is what they did when the window filled the screen; .says-below, always set now, overrides it.) */ .stage-live .says{position:absolute;left:0;top:0;display:grid; width:min(400px,calc(var(--w,64vw) - 2 * var(--fc-s-5))); transform:translate(calc(var(--x,18vw) + var(--fc-s-5)),calc(var(--y,64svh) + var(--h,40vw) - var(--fc-s-5) - 100%)); padding:var(--fc-s-5);border-radius:var(--fc-r-panel); background:var(--fc-glass);-webkit-backdrop-filter:var(--fc-glass-fx);backdrop-filter:var(--fc-glass-fx); box-shadow:var(--fc-sh-pop); opacity:0;visibility:hidden; transition:opacity var(--fc-dur-slow) var(--fc-ease-out),visibility 0s linear var(--fc-dur-slow)} .stage-live .stick.is-grown .says{opacity:1;visibility:visible;transition-delay:0s} .stage-live .say{grid-area:1 / 1;opacity:0;transform:translateY(8px); transition:opacity var(--fc-dur-out) var(--fc-ease-in),transform var(--fc-dur-out) var(--fc-ease-in)} .stage-live .say.is-on{opacity:1;transform:none; transition:opacity var(--fc-dur-slow) var(--fc-ease-out) 80ms,transform var(--fc-dur-slow) var(--fc-ease-out) 80ms} .stage-live .stick.says-below .says{ left:0;right:0;margin-inline:auto;width:min(560px,calc(100% - 2 * var(--fc-gut)));text-align:center; transform:translateY(calc(var(--y,64svh) + var(--h,40vw) + var(--fc-s-6))); padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0} .stage-live .stick.says-below .say{display:flex;flex-direction:column;align-items:center} @media (max-width:760px){ .lede{font-size:var(--fc-fs-10)} .acts .btn{flex:1 1 220px} .hero-copy{padding-top:clamp(88px,12vh,120px)} .say-t{font-size:var(--fc-fs-7)} html:not(.stage-live) .shot{border-radius:var(--fc-radius)} } @media (prefers-reduced-motion:reduce){ .lede .ln>i,.sub,.acts,.hero-chip,.win{animation:none;transform:none;opacity:1} } /* ── THE FEATURE TRIO ─────────────────────────────────────── While the stage is pinned, this comes up over the last screen like a sheet: pulled up by 40% of a screen, drawn above the window, and given the page's own colour so the window disappears under it. */ .trio{padding:var(--fc-s-10) 0} .stage-live .trio{position:relative;z-index:2;margin-top:-40svh;background:var(--fc-canvas); border-radius:var(--fc-r-xl) var(--fc-r-xl) 0 0; /* In dark the sheet and the app are nearly the same black, so its edge is drawn as a hairline that follows the rounded corners. */ box-shadow:inset 0 1px 0 var(--fc-border)} .trio-head{max-width:var(--fc-prose-max);margin:0 0 var(--fc-s-8)} .trio-head h2{ font-size:var(--fc-fs-10);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight); line-height:var(--fc-lh-snug);margin:0 0 var(--fc-s-4); } .trio-head p{font-size:var(--fc-fs-lead);color:var(--fc-fg2);line-height:1.5;margin:0} .trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fc-s-8)} .trio-item{display:flex;flex-direction:column;gap:var(--fc-s-3)} .trio-num{font-size:var(--fc-fs-2);color:var(--fc-fg3)} .trio-item h3{font-size:var(--fc-fs-9);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-snug);margin:0} .trio-item p{font-size:var(--fc-fs-read);color:var(--fc-fg2);line-height:1.55;margin:0} @media (max-width:760px){ .trio-grid{grid-template-columns:1fr;gap:var(--fc-s-7)} } /* ── THE REVEAL ─────────────────────────────────────────── One scroll effect, used everywhere on the page: a block fades up as it arrives, once, then is never watched again. Transform and opacity only. Anything the checkout script unhides is deliberately left out of this. */ [data-reveal]{opacity:0;transform:translateY(28px); transition:opacity var(--fc-dur-slow) var(--fc-ease-out),transform var(--fc-dur-slow) var(--fc-ease-out)} [data-reveal="1"]{transition-delay:calc(var(--fc-stagger) * 2)} [data-reveal="2"]{transition-delay:calc(var(--fc-stagger) * 4)} [data-reveal].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none} } /* ── PRICING ─────────────────────────────────────────────── The close section carries both states at once and shows one. The page's own default — no class on at all — is early access, so a visitor whose browser never manages to read flags.json is shown the state that cannot take their money. */ /* Hiding is written as "the other state is on", never as a bare .only-early{display:none}: several of these blocks are a .ticks or a .btn whose own display rule is further down this file and would win a tie. Saying it through puts a class in front of it and settles it. The half that is showing is never given a display at all, so each block keeps whatever layout it was built with. */ html:not(.early) .only-early{display:none} html.early .only-open{display:none} html:not(.early) details.only-early,html.early details.only-open{display:none} html:not(.early) a.only-early,html.early a.only-open{display:none} .only-early[hidden],.only-open[hidden]{display:none} /* The install step, the same way: the download button once flags.json names the signed installer (), the Terminal line until then. */ html:not(.signed) .only-signed,html.signed .only-line{display:none} html:not(.signed) a.only-signed,html.signed p.only-line,html.signed details.only-line,html.signed video.only-line{display:none} .early-get{display:flex;flex-direction:column;align-items:center;gap:var(--fc-s-3);width:100%;margin-top:var(--fc-s-2)} .early-get .btn{width:100%} .early-form{ display:flex;flex-direction:column;gap:var(--fc-s-2);width:100%;max-width:460px;margin:var(--fc-s-2) auto 0;text-align:left; animation:rise var(--fc-dur-slow) var(--fc-ease-out) both; } .early-form label{display:block;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em; color:var(--fc-fg2);margin-top:var(--fc-s-3)} .early-form label:first-child{margin-top:0} .early-form input{ width:100%;background:transparent;border:1px solid var(--fc-border);border-radius:var(--fc-r-sm);color:var(--fc-fg); padding:var(--fc-s-3) var(--fc-s-4);font-size:var(--fc-fs-5);font-family:inherit;outline:none; transition:border-color var(--fc-dur) var(--fc-ease); } .early-form input::placeholder{color:var(--fc-fg3)} .early-form input:hover{border-color:var(--fc-border2)} .early-form input:focus{border-color:var(--fc-fg);outline:var(--fc-bw2) solid var(--fc-ring);outline-offset:2px} .early-form .fld-note{margin:var(--fc-s-2) 0 var(--fc-s-4)} .early-form .btn{width:100%} .early-form .btn:disabled{opacity:.6;cursor:progress} .dl-link{width:100%;margin-top:var(--fc-s-2)} /* The answer to an early access request: centred like the rest of the card, because it replaces the form rather than sitting under it. */ .early-done{display:flex;flex-direction:column;align-items:center;gap:var(--fc-s-2);width:100%;margin-top:var(--fc-s-2)} .early-done .issued-l{margin:0;text-align:center} .early-done .install-p{text-align:center} /* ── PRICING ─────────────────────────────────────────────── */ .close{position:relative;z-index:1;padding:var(--fc-s-10) 0 var(--fc-s-9);scroll-margin-top:80px} /* On /get/ the close is the whole page: the card sits in the middle of the screen, clear of the fixed bar (64px tall, which is --fc-s-8), with the footer below the fold rather than pressed up under the card. */ .get-page .close{min-height:100svh;display:flex;align-items:center;padding:calc(var(--fc-s-8) + var(--fc-s-7)) 0 var(--fc-s-9)} .get-page .close > .wrap{width:100%} .plan-card{ max-width:560px;margin:0 auto;background:var(--fc-bg);border-radius:var(--fc-r-panel); box-shadow:var(--fc-sh-1);padding:var(--fc-s-8) var(--fc-s-7); display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--fc-s-4); } .close-t{font-size:var(--fc-fs-9);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-snug);margin:0} .close-p{color:var(--fc-fg2);font-size:var(--fc-fs-read);line-height:1.55;margin:0;max-width:44ch} .ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--fc-s-2);text-align:left;align-self:stretch} .ticks li{display:flex;align-items:baseline;gap:var(--fc-s-2);color:var(--fc-fg2);font-size:var(--fc-fs-4)} .ticks li::before{content:'✓';color:var(--fc-ac-ink);font-weight:var(--fc-fw-mid);flex-shrink:0} .pitch{display:flex;flex-direction:column;align-items:center;gap:var(--fc-s-3);width:100%;margin-top:var(--fc-s-2)} .pitch .btn{width:100%} .pitch-alt{font:inherit;font-size:var(--fc-fs-4);color:var(--fc-fg2);background:none;border:0; min-height:var(--fc-hit);padding:var(--fc-s-2) 0;cursor:pointer; text-decoration:underline;text-decoration-color:var(--fc-border);text-underline-offset:4px; transition:color var(--fc-dur-tap) var(--fc-ease)} .pitch-alt:hover{color:var(--fc-fg)} .pitch-alt b{color:var(--fc-fg);font-weight:var(--fc-fw)} .buy{width:100%;max-width:460px;margin:0 auto;text-align:left; display:flex;flex-direction:column;gap:var(--fc-s-4);animation:rise var(--fc-dur-slow) var(--fc-ease-out) both} .foot-link{font:inherit;font-size:inherit;color:var(--fc-fg2);background:none;border:0;padding:0;cursor:pointer; text-decoration:underline;text-decoration-color:var(--fc-border);text-underline-offset:3px} .foot-link:hover{color:var(--fc-fg)} .step{width:100%;max-width:460px;margin:var(--fc-s-6) auto 0;text-align:left; display:flex;flex-direction:column;align-items:stretch;gap:var(--fc-s-3); animation:rise var(--fc-dur-slow) var(--fc-ease-out) both} .step .kicker{display:flex;align-items:center;gap:var(--fc-s-3)} .step-n{display:none;width:24px;height:24px;border-radius:var(--fc-r-sm);background:var(--fc-ac);color:var(--fc-ac-on); font-size:var(--fc-fs-2);font-weight:var(--fc-fw-up);align-items:center;justify-content:center;flex:none} .close.issued .step-n{display:inline-flex} .issued-l{color:var(--fc-ok);margin:var(--fc-s-6) 0 0;text-align:left;width:100%;max-width:460px} .install-p{color:var(--fc-fg2);margin:0;max-width:44ch} .line{display:flex;align-items:center;gap:var(--fc-s-3);flex-wrap:wrap;margin:0; padding:var(--fc-s-3) var(--fc-s-4);border:1px solid var(--fc-border);border-radius:var(--fc-radius)} .line code{font-family:var(--fc-font-mono);font-size:var(--fc-fs-3);color:var(--fc-fg);word-break:break-all} .line-copy{font:inherit;font-size:var(--fc-fs-2);color:var(--fc-fg2);background:none;cursor:pointer; min-height:var(--fc-hit);border:1px solid var(--fc-border);border-radius:var(--fc-r-pill);padding:var(--fc-s-1) var(--fc-s-3); transition:color var(--fc-dur-tap) var(--fc-ease),border-color var(--fc-dur-tap) var(--fc-ease)} .line-copy:hover{color:var(--fc-fg);border-color:var(--fc-border2)} .install-film{display:block;width:100%;height:auto;aspect-ratio:1280/800; border-radius:var(--fc-radius);background:var(--fc-bg2);box-shadow:0 0 0 1px var(--fc-border)} .foot-line{width:100%;margin:var(--fc-s-7) 0 0;font-size:var(--fc-fs-note);color:var(--fc-fg2);text-align:center} @media (max-width:760px){ .close{padding:var(--fc-s-8) 0 var(--fc-s-7)} .plan-card{padding:var(--fc-s-6) var(--fc-s-5)} } /* ═══════════════════════════════════════════════════════════ THE CHECKOUT. Moved from the download page with its script, unchanged. Every id and class below is one src/checkout.js writes into, or reads from — never renamed, only restyled. ═══════════════════════════════════════════════════════════ */ .actions{display:flex;flex-wrap:wrap;gap:var(--fc-s-3);margin-bottom:var(--fc-s-5);width:100%} .actions .btn{flex:1 1 auto;min-width:200px} .pending{border:1px solid var(--fc-border);border-radius:var(--fc-radius);padding:var(--fc-s-5);max-width:46ch} .pending b{display:block;font-weight:var(--fc-fw-up);color:var(--fc-fg);margin-bottom:var(--fc-s-2)} .pending p{font-size:var(--fc-fs-4);color:var(--fc-fg2);line-height:var(--fc-lh-prose)} .meta{display:flex;flex-wrap:wrap;gap:var(--fc-s-2) var(--fc-s-5); font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em;font-variant-numeric:tabular-nums; color:var(--fc-fg2)} .meta span{display:inline-flex;align-items:center;gap:var(--fc-s-2)} .meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--fc-border2);flex-shrink:0} .buyer{max-width:100%;margin-bottom:var(--fc-s-4);width:100%} .buyer label{display:block;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em; color:var(--fc-fg2);margin-bottom:var(--fc-s-2)} .buyer input{width:100%;background:transparent;border:1px solid var(--fc-border);border-radius:var(--fc-r-sm);color:var(--fc-fg); padding:var(--fc-s-3) var(--fc-s-4);font-size:var(--fc-fs-5);font-family:inherit;outline:none; transition:border-color var(--fc-dur) var(--fc-ease)} .buyer input::placeholder{color:var(--fc-fg3)} .buyer input:hover{border-color:var(--fc-border2)} /* The kit's own .input:focus draws a 2px ink ring at 2px offset. These fields had outline:none with only a border-colour change standing in for it, which is the one thing AGENTS.md says never to do — and it was on the name, email and country of the checkout, the highest-stakes form on the site. */ .buyer input:focus{border-color:var(--fc-fg); outline:var(--fc-bw2) solid var(--fc-ring);outline-offset:2px} .buyer #email-fld{margin-top:var(--fc-s-4)} .fld-note{font-size:var(--fc-fs-3);color:var(--fc-fg2);line-height:1.5;margin-top:var(--fc-s-2)} .buy-line{font-size:var(--fc-fs-4);color:var(--fc-fg2);line-height:1.55;margin-bottom:var(--fc-s-5)} .buy-line b{color:var(--fc-fg);font-weight:var(--fc-fw);font-family:var(--fc-font-mono);font-variant-numeric:tabular-nums} .buyer select{width:100%;background:transparent;border:1px solid var(--fc-border); border-radius:var(--fc-r-sm);color:var(--fc-fg);padding:var(--fc-s-3) var(--fc-s-4);font-size:var(--fc-fs-5); font-family:inherit;outline:none;transition:border-color var(--fc-dur) var(--fc-ease)} .buyer select:hover{border-color:var(--fc-border2)} .buyer select:focus{border-color:var(--fc-fg);outline:var(--fc-bw2) solid var(--fc-ring);outline-offset:2px} .buyer select option{background:var(--fc-bg);color:var(--fc-fg)} .buyer #country-fld{margin-top:var(--fc-s-4)} .plans{display:grid;margin-bottom:var(--fc-s-5);border:1px solid var(--fc-border);border-radius:var(--fc-radius);overflow:hidden;width:100%} .plan{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--fc-s-1) var(--fc-s-3); width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--fc-border); color:var(--fc-fg);font-family:inherit;padding:var(--fc-s-4) var(--fc-s-4);cursor:pointer; transition:background-color var(--fc-dur) var(--fc-ease)} .plan:first-child{border-top:0} .plan:hover{background:var(--fc-bg2)} .plan:active{transform:scale(var(--fc-press))} .plan:focus-visible{outline-offset:-3px} .plan::before{content:'';grid-row:1 / span 2;align-self:start;margin-top:var(--fc-s-1); width:14px;height:14px;border-radius:var(--fc-r-sm);border:1px solid var(--fc-border2); box-shadow:inset 0 0 0 3px var(--fc-bg); transition:background-color var(--fc-dur) var(--fc-ease),border-color var(--fc-dur) var(--fc-ease)} .plan[aria-pressed="true"]{background:var(--fc-bg2)} .plan[aria-pressed="true"]::before{background:var(--fc-fg);border-color:var(--fc-fg)} .plan-n{grid-column:2;font-size:var(--fc-fs-5);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-mid)} .plan-p{grid-column:3;font-family:var(--fc-font-mono);font-size:var(--fc-fs-4);color:var(--fc-fg2);white-space:nowrap; font-variant-numeric:tabular-nums} .plan[aria-pressed="true"] .plan-p{color:var(--fc-fg)} .plan-d{grid-column:2;font-size:var(--fc-fs-3);color:var(--fc-fg2);line-height:1.45} .plan-tag{display:inline-block;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em; color:var(--fc-fg2);border:1px solid var(--fc-border);border-radius:var(--fc-r-pill);padding:var(--fc-s-1) var(--fc-s-2) var(--fc-s-0); margin-left:var(--fc-s-2);vertical-align:2px} .pay-msg{font-size:var(--fc-fs-4);color:var(--fc-fg);line-height:1.5;margin-bottom:var(--fc-s-4);width:100%} .paid{border:1px solid var(--fc-border);border-radius:var(--fc-radius);padding:var(--fc-s-5);margin-bottom:var(--fc-s-5); width:100%;max-width:460px;margin-left:auto;margin-right:auto;text-align:left} .paid .warn-l{color:var(--fc-ok)} .paid b{display:block;font-weight:var(--fc-fw-up);color:var(--fc-fg);font-size:var(--fc-fs-5);margin-bottom:var(--fc-s-3)} .paid p{font-size:var(--fc-fs-4);color:var(--fc-fg2);line-height:var(--fc-lh-prose);margin-top:var(--fc-s-3)} .warn-l{display:block;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em; color:var(--fc-fg2);margin-bottom:var(--fc-s-3)} .cmd{display:flex;align-items:center;gap:var(--fc-s-3);margin-top:var(--fc-s-3); border:1px solid var(--fc-border);border-radius:var(--fc-r-sm);background:var(--fc-bg);padding:var(--fc-s-3)} .cmd code{font-family:var(--fc-font-mono);font-size:var(--fc-fs-4);color:var(--fc-fg);letter-spacing:.04em; font-variant-numeric:tabular-nums;overflow-x:auto;white-space:nowrap;flex:1;min-width:0} .copy{flex-shrink:0;font-family:var(--fc-font-mono);font-size:var(--fc-fs-1);letter-spacing:.01em; color:var(--fc-fg);background:transparent; border:1px solid var(--fc-border);border-radius:var(--fc-r-sm);padding:var(--fc-s-2) var(--fc-s-3);cursor:pointer; min-height:var(--fc-hit); transition:background-color var(--fc-dur) var(--fc-ease),color var(--fc-dur) var(--fc-ease),border-color var(--fc-dur) var(--fc-ease)} .copy:hover{background:var(--fc-fg);color:var(--fc-bg);border-color:var(--fc-fg)} .copy:active{transform:scale(var(--fc-press))} .copy.done,.copy.done:hover{background:transparent;color:var(--fc-ok);border-color:var(--fc-ok)} /* ── FAQ ─────────────────────────────────────────────────── Rewritten 23 September 2026. Two things were wrong with it: the answer sat 12px under its question and then straight on the hairline, so a row read as one dense lump with a line ruled through it, and
opens in a single frame with nothing in between, which reads as a jump. So the row breathes — 24px above and below the question, then 32px under the answer before the rule — and the opening is something you can watch: the answer's box is a one-row grid whose row goes from nothing to its own height, and the words rise into it. */ .faq{padding:var(--fc-s-10) 0} .faq-head h2{font-size:var(--fc-fs-10);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight); line-height:var(--fc-lh-snug);margin:0 0 var(--fc-s-8);max-width:var(--fc-prose-max);text-wrap:balance} .faq-list{max-width:var(--fc-prose-max);border-top:1px solid var(--fc-border)} .faq-list details{border-bottom:1px solid var(--fc-border)} /* The padding belongs to the summary, not to the
around it: only the summary toggles the row, so padding on the parent looks like a big target and is not one. With it here the whole row is the control, and --fc-hit guarantees the 40px the kit asks for even on a one-word question. */ .faq-list summary{ position:relative; display:flex;align-items:center;justify-content:space-between;gap:var(--fc-s-5);cursor:pointer; min-height:var(--fc-hit);padding:var(--fc-s-5) 0; font-size:var(--fc-fs-6);font-weight:var(--fc-fw-mid);color:var(--fc-fg);list-style:none; } .faq-list summary::-webkit-details-marker{display:none} /* The plus that becomes a minus. Two bars, not one mark turned over: the upright one takes a quarter turn and goes, and the flat one never moves, so the answer is opened by something being taken away rather than by a symbol spinning. Transform and opacity only. */ .faq-list summary::after{ content:'';flex-shrink:0;width:var(--fc-s-5);height:var(--fc-s-5); background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat; color:var(--fc-fg3);transition:color var(--fc-dur-tap) var(--fc-ease); } .faq-list summary::before{ content:'';position:absolute;top:50%;right:calc(var(--fc-s-5) / 2); width:1.5px;height:12px;background:currentColor;color:var(--fc-fg3); transform:translate(50%,-50%); transition:transform var(--fc-dur) var(--fc-ease-out),opacity var(--fc-dur-out) var(--fc-ease), color var(--fc-dur-tap) var(--fc-ease); } .faq-list summary:hover::after,.faq-list summary:hover::before{color:var(--fc-ac-ink)} .faq-list details.is-open summary::before{transform:translate(50%,-50%) rotate(90deg);opacity:0} .faq-list details.is-open summary::after{color:var(--fc-fg2)} /* The answer. A one-row grid whose row goes from nothing to its own height — the one way an accordion can open and shut that does not need a height measured in JavaScript first. */ .faq-a{ display:grid;grid-template-rows:0fr; transition:grid-template-rows 260ms var(--fc-ease-out); } .faq-a>div{overflow:hidden;min-height:0} .faq-list details.is-open .faq-a{grid-template-rows:1fr} /* leaving is shorter and softer than arriving */ .faq-list details:not(.is-open) .faq-a{transition-duration:var(--fc-dur-out);transition-timing-function:var(--fc-ease-in)} .faq-list details p{ margin:0 0 var(--fc-s-6);color:var(--fc-fg2); font-size:var(--fc-fs-read);line-height:var(--fc-lh-prose);max-width:var(--fc-prose-narrow); text-wrap:pretty; opacity:0;transform:translateY(-6px); transition:opacity var(--fc-dur-out) var(--fc-ease-in),transform var(--fc-dur-out) var(--fc-ease-in); } .faq-list details.is-open p{ opacity:1;transform:none; transition:opacity 220ms var(--fc-ease-out) 80ms,transform 220ms var(--fc-ease-out) 80ms; } @media (prefers-reduced-motion:reduce){ .faq-a{transition:none} .faq-list details[open] .faq-a{grid-template-rows:1fr} .faq-list details[open] p{opacity:1;transform:none;transition:none} .faq-list summary::after{transition:none} } /* No JavaScript:
still opens, so the answer must still show. */ .js .faq-list details:not(.is-open) p{pointer-events:none} html:not(.js) .faq-a{grid-template-rows:1fr} html:not(.js) .faq-list details[open] p{opacity:1;transform:none} /* ── OUTRO ───────────────────────────────────────────────── */ .outro{ background:var(--fc-fg);color:var(--fc-canvas);padding:var(--fc-s-10) 0; display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--fc-s-6); } .outro h2{font-size:var(--fc-fs-10);font-weight:var(--fc-fw-mid);letter-spacing:var(--fc-ls-tight);line-height:var(--fc-lh-snug);margin:0} .outro .btn--primary{background:var(--fc-canvas);color:var(--fc-fg)} .outro .btn--ghost{border-color:var(--fc-canvas);color:var(--fc-canvas)} @media (max-width:760px){ .trio,.faq{padding:var(--fc-s-8) 0} .outro{padding:var(--fc-s-8) 0} }