/*
 * Go Avatar and Go Answer: the look from the design documents.
 *
 * ONE FILE FOR ALL SIX SCREENS rather than the same CSS inlined six times. The funnel
 * is one continuous experience -- somebody goes home, preview, plans, pay, setup,
 * dashboard in a single sitting -- and six copies of a type scale is six chances for
 * one screen to drift and nobody to notice until it is live.
 *
 * SELF-HOSTED FONTS, NOT GOOGLE'S CDN. The document links fonts.googleapis.com, which
 * this application's content security policy blocks outright: the page renders in
 * Arial Black, every heading is wrong, and the only tell is document.fonts.size being
 * zero. Served from our own origin they simply work.
 *
 * INSTRUMENT SERIF IS THE WHOLE CHARACTER OF THE DESIGN. Large, light, with an italic
 * used as emphasis inside headlines. It is not a heavy sans at 32px, which is what
 * these screens were before and what made them look like software rather than a
 * product somebody chose.
 */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif-ext.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif-italic-ext.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/inter.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/inter-ext.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0A1026;
  --night:#0E1633;
  --panel:#141D40;
  --blue:#223573;
  --orange:#FF4800;
  --amber:#FFA06B;
  --cream:#F8F4EE;
  --line:#E3DACB;
  --gline:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.08);
  --paper:#F4F6FD;
  --quiet:#E3E8F7;
  --mute:#D3D9F0;
  --live:#22c55e;
  --warn:#FFC98A;
  --bad:#FF8E73;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

body{margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:860px}

/*
 * THE TYPE. Serif, light weight, very large, tight leading -- and the italic inside a
 * headline is the one piece of colour in the whole system.
 */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0;color:#fff}
h1{font-size:clamp(44px,7vw,84px);line-height:.98}
h2{font-size:clamp(34px,5vw,58px);line-height:1.02}
h3{font-size:clamp(24px,3vw,34px);line-height:1.1}
h1 em,h2 em,h3 em{font-style:italic;color:var(--amber)}
.lead{font-size:21px;color:var(--quiet);margin:22px 0 0;max-width:58ch;line-height:1.55}

.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:16px}
.nav .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.nav .brand span{font:800 21px var(--body);letter-spacing:-.01em}
.nav .brand b{color:var(--orange)}

/* Pill buttons, with the glow the document gives the orange one. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;
  cursor:pointer;font:700 16px var(--body);border-radius:999px;padding:16px 28px;
  text-decoration:none;transition:transform .15s,background .15s;color:#fff}
.btn:hover{transform:translateY(-2px)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:default;transform:none}
.btn-orange{background:linear-gradient(180deg,#ff5a17,#ff4800);
  box-shadow:0 14px 34px -12px rgba(255,72,0,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-glass{background:var(--glass);border:1px solid var(--gline)}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-quiet{background:transparent;color:var(--mute);padding:16px 8px;
  text-decoration:underline;font-weight:600}
.btn-quiet:hover{color:#fff;transform:none}
.btn-wide{width:100%}
.btn-small{padding:11px 20px;font-size:14px}

.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Panels. A plain hairline, never a coloured edge. */
.panel{background:var(--panel);border:1px solid var(--gline);border-radius:30px;
  padding:44px 40px}
.panel + .panel{margin-top:22px}
.panel h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:8px}
.panel .sub{color:var(--quiet);margin:0 0 30px;font-size:18px;max-width:60ch}

.plans{display:grid;gap:22px;align-items:stretch}
@media(min-width:860px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--gline);border-radius:30px;padding:36px 30px;color:#fff;
  cursor:pointer;transition:border-color .15s,box-shadow .15s}
.plan:hover{border-color:rgba(255,255,255,.3)}
.plan input{position:absolute;opacity:0;width:1px;height:1px}
.plan.on{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,72,0,.18)}
.plan h3{font-size:clamp(28px,3vw,36px)}
.plan .mins{font-weight:600;color:var(--quiet);margin-top:2px}
.plan .price{font:400 clamp(54px,6vw,76px)/1 var(--serif);margin:24px 0 4px}
.plan .price small{font:600 16px var(--body);color:var(--quiet);margin-left:4px}
.plan hr{border:0;border-top:1px solid var(--gline);margin:22px 0;width:100%}
.plan ul{list-style:none;display:grid;gap:10px;font-size:16px;margin:0 0 28px;padding:0}
.plan li{display:flex;gap:10px;color:var(--quiet)}
/* A plain tick. Colouring it is the tell that gets these pages rejected. */
.plan li::before{content:"\2713";color:inherit;opacity:.65;flex:none}
.plan .btn{margin-top:auto}

label.f{display:block;font-weight:600;color:#fff;margin:0 0 7px;font-size:16px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font:500 17px var(--body);padding:15px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.3);background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:none;
  box-shadow:0 0 0 4px rgba(255,72,0,.18)}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:20px}

/* Choice cards, as the document's .face and .fplan. */
.opts{display:grid;gap:14px;margin-bottom:24px}
@media(min-width:720px){.opts{grid-template-columns:repeat(3,1fr)}
  .opts.two{grid-template-columns:repeat(2,1fr)}}
.opt{position:relative;display:block;cursor:pointer;border:1px solid var(--gline);
  border-radius:22px;padding:20px 19px;background:var(--glass);
  transition:border-color .15s,box-shadow .15s}
.opt:hover{border-color:rgba(255,255,255,.3)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt.on{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,72,0,.18)}
.opt b{display:block;font:700 17px var(--body);color:#fff;margin-bottom:3px}
.opt span{display:block;font-size:15px;color:var(--quiet)}

.note{font-size:16px;color:var(--quiet);background:var(--glass);
  border:1px solid var(--gline);border-radius:18px;padding:18px 20px;margin:0 0 26px;
  max-width:62ch;line-height:1.6}
.notice{border-radius:22px;padding:20px 22px;margin-bottom:20px;
  background:rgba(255,160,107,.1);border:1px solid rgba(255,160,107,.36);color:var(--warn)}
.notice b{display:block;font:700 17px var(--body);color:#fff;margin-bottom:4px}
.notice.stop{background:rgba(255,142,115,.1);border-color:rgba(255,142,115,.4);color:var(--bad)}

.err{color:var(--bad);font-weight:600;font-size:16px;margin:14px 0 0;min-height:24px}
.ok{color:var(--live);font-weight:700}

code.snip{display:block;background:#060B1C;color:var(--quiet);border:1px solid var(--gline);
  border-radius:16px;padding:16px 18px;word-break:break-all;margin:0 0 16px;
  font:500 14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}

.foot{font-size:14.5px;color:var(--mute);margin:30px 0 0;line-height:1.8}
.foot a{color:var(--quiet)}

main .wrap{padding-top:64px;padding-bottom:100px}

/*
 * The setup stepper.
 *
 * A MAP OF WHERE THEY ARE, which is not an eyebrow. The distinction matters: a row of
 * tracked-caps text sitting above a headline is decoration and is banned here, but a
 * person halfway through a five-step job needs to see the five steps and which ones
 * are behind them.
 */
.steps{display:flex;flex-wrap:wrap;gap:9px;margin:44px 0 30px;padding:0;list-style:none}
.steps li{display:flex;align-items:center;gap:9px;padding:10px 17px;border-radius:999px;
  background:var(--glass);border:1px solid var(--gline);color:var(--mute);
  font-size:15px;cursor:default}
.steps li.ok,.steps li.on{cursor:pointer}
.steps li.on{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.steps li.ok{color:#fff}
.steps li i{font-style:normal;width:23px;height:23px;border-radius:50%;flex:none;
  display:grid;place-items:center;font:700 12px var(--body);background:rgba(255,255,255,.16)}
.steps li.ok i{background:#fff;color:var(--ink)}

/*
 * The nav logo.
 *
 * TWO CASES, BECAUSE THERE ARE TWO KINDS OF ARTWORK. The product marks (Go Avatar,
 * Go Answer) are drawn on white, so they sit on a white plaque exactly as the design
 * document does it -- without one, the artwork's own background reads as a hard
 * rectangle against the navy. The platform logo is already drawn for dark and needs
 * no chip, so it gets none.
 */
/* Specific enough to beat any generic nav image rule. That exact collision made the
   mark render at 38px while the stylesheet plainly said 66, which is the kind of
   thing you only find by measuring the element rather than reading the file. */
.nav .brand img.plogo{height:66px;width:auto;display:block;background:#fff;
  border-radius:14px;padding:6px 13px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.nav .brand img.glogo{height:40px;width:auto;display:block}
@media(max-width:720px){
  .nav .brand img.plogo{height:44px;padding:4px 9px}
  .nav .brand img.glogo{height:30px}
}

/*
 * The usage panel.
 *
 * THE THREE NUMBERS ARE THE WHOLE POINT, so they are set in the display serif at a
 * size nothing else on the page competes with: what they paid, what they used, what
 * is left. Everything else on this screen is secondary to those.
 */
.use{display:grid;gap:22px;margin-top:26px}
@media(min-width:720px){.use{grid-template-columns:repeat(3,1fr)}}
.use div b{display:block;font:400 clamp(40px,4.5vw,56px)/1 var(--serif);color:#fff}
.use div span{display:block;font-size:15.5px;color:var(--quiet);margin-top:6px}

.meter{height:10px;border-radius:999px;background:rgba(255,255,255,.12);
  overflow:hidden;margin:0 0 12px}
.meter i{display:block;height:100%;border-radius:999px;background:#fff}
.meter.hot i{background:linear-gradient(90deg,#ff5a17,#ff4800)}
.meterlab{font-size:16px;color:var(--quiet);margin:0}

.state{font-size:17px;color:var(--quiet);margin:0 0 20px}
.state b{color:#fff;font-weight:700}

/* The plan summary line above the card fields, and the small print under them. */
.sum{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:0 0 18px;border-bottom:1px solid var(--gline);margin-bottom:26px;
  color:var(--quiet)}
.sum b{font:400 clamp(30px,3.2vw,40px)/1 var(--serif);color:#fff}
#pay-el{margin:0 0 22px;min-height:40px}
.small{font-size:15px;color:var(--quiet);margin:16px 0 0}
.small.centred{text-align:center}
.terms{font-size:14.5px;color:var(--mute);margin:18px 0 0;line-height:1.6}
.terms a{color:var(--quiet)}
.paid{text-align:center;padding:14px 0}

/*
 * "Most people choose this one".
 *
 * A SENTENCE AT THE FOOT OF THE CARD, not a tracked-caps pill in its corner. The
 * design document uses the pill; pills, kickers and small-caps labels are the exact
 * family of things that get these pages rejected here, and a plain sentence does the
 * same job without announcing that a template wrote it.
 */
.plan .chosen{margin:auto 0 0;padding-top:18px;font-size:15px;color:var(--amber)}