/* ============================================================
   Form pages: Waitlist, Contact, Login, 404, Accept invite.
   Loaded after site.css and pages.css; reuses their tokens and the pages.css
   form kit (.form .field .help .err .count .form-actions .form-note
   .form-banner .form-success). Only what the kit does not cover lives here.

   Layout   .fpage > .wrap.fgrid > .fhead (H1 + lede), .fform (the panel), .fside
            (what you get / what happens next). One column on a phone in the
            order head, form, side; two columns from 1000px.
   Panel    the form sits on paper: <form class="form s-paper"> so the kit's
            paper theme applies to the fields.
   States   .form-status (banner host), .form-slow, .form-summary, .form-success,
            .form-fail, .fb (banner internals).
   ============================================================ */

[hidden]{display:none!important}

/* ---------- layout ---------- */
.fpage{padding:56px 0 96px}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "form" "side";gap:36px 64px;align-items:start}
.fhead{grid-area:head;min-width:0}
.fform{grid-area:form;min-width:0}
.fside{grid-area:side;min-width:0}
@media(min-width:1000px){
  .fgrid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"head form" "side form";grid-template-rows:auto 1fr}
}
.fhead h1{font-size:clamp(40px,6vw,80px);max-width:13ch}
.fhead .lede{margin-top:24px;max-width:44ch;font-size:clamp(18px,1.5vw,21px);line-height:1.5}
.fhead .route{margin-top:18px;font-size:clamp(17px,1.3vw,19px);font-weight:600;line-height:1.45}

.fside-h{max-width:none;margin-bottom:14px;font-size:clamp(22px,2vw,26px);line-height:1.15;letter-spacing:-.03em}
.fside .nextq{margin-top:20px}
.fside-note{display:flex;flex-wrap:wrap;align-items:center;gap:0 .4em;min-height:44px;margin-top:18px;font-size:17px;line-height:1.45}
.fside .doodle{width:min(340px,100%);margin-top:30px}

/* inline links get a 44px hit area without changing the line */
.fside-note a,.route a,.form-note a,.nf-note a,.fb a,.form-fail a,.form-success a{font-weight:700}
.fside-note a,.route a,.form-note a,.nf-note a,.login-notes a,.fcheck-help a,.form-fail a{padding:14px 0}

/* ---------- ink button: the quiet one on dark pages ---------- */
.btn--ink{background:var(--chalk);border-color:var(--chalk);color:var(--sea)}
.btn--ink:hover{background:var(--signal);border-color:var(--signal);color:var(--sea)}
.btn--sea{background:var(--sea);border-color:var(--sea);color:var(--chalk)}
.btn--sea:hover{background:transparent;border-color:var(--sea);color:var(--sea)}

/* ---------- the paper panel ---------- */
.fform .form{max-width:none;padding:clamp(22px,3vw,34px) clamp(20px,3vw,34px) clamp(24px,3vw,34px);position:relative}
.fform textarea{min-height:112px}
.fform textarea[readonly]{opacity:.62;border-style:dashed;cursor:not-allowed}
.field .err[hidden],.field .count[hidden]{display:none}
.fform .form-actions{margin-top:26px}
.fform .form-actions .btn{min-width:176px}
.fform .btn:hover{background:var(--sea);border-color:var(--sea);color:var(--chalk)}
.fform .form-note{margin-top:14px;max-width:none}
.form-note a{color:var(--p-link);text-decoration:underline;text-decoration-thickness:2px}
.form-slow{font-size:14.5px;font-weight:700;line-height:1.4;color:var(--p-dim)}
.form-slow:empty{display:none}

/* the honeypot: out of sight, out of the tab order, out of the accessibility tree */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- error summary (Contact) ---------- */
.form-summary{margin-bottom:22px;padding:14px 18px 12px;background:#F7D6CD;color:var(--sea)}
.fs-title{font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.3;color:var(--flag-deep)}
.form-summary ul{list-style:none;margin-top:4px}
.form-summary a{display:flex;align-items:center;min-height:44px;font-weight:600;font-size:15.5px;line-height:1.35;color:var(--sea);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.form-summary a:hover{text-decoration-thickness:2px}

/* ---------- failure banner: sits directly above the button ---------- */
.form-status:empty{display:none}
.fb{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;margin-top:22px}
.fb p{margin:0}
.fb-title{font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.3}
.fb-text p+p{margin-top:4px;font-weight:600}
.fb-text .fb-more{font-size:14.5px}
.fb a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fb-retry{justify-self:start;min-height:44px;padding:0 18px;font:inherit;font-weight:700;letter-spacing:-.01em;color:var(--chalk);background:var(--sea);border:2px solid var(--sea);border-radius:3px;cursor:pointer;transition:background .18s,color .18s}
.fb-retry:hover{background:transparent;color:var(--sea)}
.fb-retry:focus-visible{outline-color:var(--sea)}

/* ---------- success and fail panels (replace the form in place) ---------- */
.fform .form-success,.fform .form-fail{max-width:none}
.form-success,.form-fail{padding:clamp(22px,3vw,32px) clamp(20px,3vw,34px) clamp(22px,3vw,30px)}
.form-fail{background:var(--flag);color:var(--sea)}
.form-success h2,.form-fail h2{max-width:14ch;font-size:clamp(28px,3.2vw,38px);line-height:1.04;letter-spacing:-.04em}
.form-fail h2{max-width:18ch}
.form-success h2:focus,.form-fail h2:focus{outline:none}
.form-success p,.form-fail p{margin-top:10px;font-size:17px;font-weight:500;line-height:1.45}
.form-success .fs-line,.form-fail .fs-line{font-size:18px;font-weight:600}
.form-success .fs-line b{font-weight:800;overflow-wrap:anywhere}
.form-success .fs-sub{font-size:15.5px}
.fs-fig{margin:22px 0 10px}
.fpage .fs-fig .doodle{width:min(300px,100%);margin:0;color:var(--sea)}
.fs-fig figcaption{margin-top:8px;max-width:34ch;font-size:15px;font-weight:600;line-height:1.4}
.form-success .nextq{margin-top:6px}
.fs-fix{display:inline-flex;align-items:center;min-height:44px;padding:0;font:inherit;font-weight:700;color:inherit;background:none;border:0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;cursor:pointer}
.fs-fix:hover{text-decoration-thickness:3px}
.fs-fix:focus-visible{outline-color:var(--sea)}
.form-success a:not(.nextq):not(.btn),.form-fail a{text-decoration:underline;text-underline-offset:4px}
.form-success .btn--sea{color:var(--chalk)}
.form-success .btn--sea:hover{background:transparent;border-color:var(--sea);color:var(--sea)}

/* ---------- colour the doodles for the surface they sit on ---------- */
.fpage .doodle{color:var(--chalk)}
.fpage .form-success .doodle{color:var(--sea)}

/* ---------- waitlist: nav and footer button marked as the current page ---------- */
a.btn[aria-current="page"]{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- contact: what happens next ---------- */
.steps{list-style:none;counter-reset:step;border-top:2px solid var(--p-ink)}
.steps li{counter-increment:step;display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0 18px;border-bottom:1px solid var(--p-rule);font-size:17px;line-height:1.45;color:var(--p-ink)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--p-accent);border-radius:50%;font-family:var(--mono);font-weight:700;font-size:13px;line-height:1;color:var(--p-accent)}

/* ---------- login ---------- */
.phero .lede.lede--single{max-width:34ch}
.login-act{margin-top:30px}
.login-notes{margin-top:38px;max-width:640px}
.login-notes h2{max-width:none;font-weight:800;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.025em;line-height:1.25;color:var(--p-accent)}
.login-notes a{color:var(--chalk);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- 404 ---------- */
.nf-act{margin-top:30px}
.nf-note{margin-top:14px;max-width:44ch;font-size:16px;line-height:1.5;color:var(--chalk-dim)}
.nf-note a{color:var(--chalk);text-decoration:underline;text-underline-offset:4px}
.phero .nf-art{width:min(520px,100%);margin-left:auto}
@media(max-width:999px){.phero .nf-art{margin-left:0}}
.phero .wheel-art{width:min(380px,100%);margin-left:auto}
@media(max-width:999px){.phero .wheel-art{margin-left:0;width:min(300px,100%)}}

/* ---------- accept invite: the four states ---------- */
.fcheck{display:grid;gap:12px;max-width:40ch}
.fcheck .fcheck-now{display:flex;align-items:center;gap:14px;font-size:clamp(18px,1.6vw,21px);font-weight:700;letter-spacing:-.01em}
.fcheck .fcheck-now::before{content:"";flex:none;width:20px;height:20px;border:3px solid var(--signal);border-right-color:transparent;border-radius:50%;animation:p-spin .9s linear infinite}
/* a way out if the check never finishes: appears after 5 seconds, always present with reduced motion */
.fcheck .fcheck-help{font-size:16px;line-height:1.5;color:var(--chalk-dim);animation:late-in .01s 5s backwards}
.fcheck .fcheck-help a{color:var(--chalk);font-weight:700;text-underline-offset:4px}
@keyframes late-in{from{opacity:0;visibility:hidden}}
.form-lede{font-size:17px;line-height:1.5;color:var(--p-ink);margin-bottom:22px}
.form-banner--ok{background:var(--mint)}
.ai-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:22px}

/* accept-invite: the Kraken setup block under "Password set." */
.ai-kraken{margin-top:26px;padding-top:22px;border-top:1px solid currentColor;border-top-color:rgba(0,0,0,.18)}
.ai-kraken h3{font-size:clamp(20px,2.2vw,26px);line-height:1.1;letter-spacing:-.03em}
.ai-kraken .ai-lbl{margin-top:16px;font-size:15px;font-weight:700}
.ai-code{display:flex;gap:12px;align-items:flex-start;margin-top:8px;padding:12px 14px;background:rgba(0,0,0,.07);border-radius:10px}
.ai-code code,.ai-code pre{flex:1;min-width:0;margin:0;font:600 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word;user-select:all}
.ai-copy{flex:none;padding:8px 14px;font-size:14px}
@media (max-width:560px){.ai-code{flex-direction:column}.ai-copy{align-self:flex-start}}