/*
 * Go Pitch: a sales video that turns into a live conversation.
 *
 * ITS OWN SHEET, NOT GO AVATAR'S, because it is its own product. The design document
 * for each of these sets a different display face on purpose -- Go Right Music is
 * Montserrat, Go Avatar is a serif, and this is Bricolage Grotesque. They are meant to
 * read as three products from one company rather than three copies of one product, and
 * unifying them was a call I made once and David overruled.
 *
 * The component names deliberately match goavatar.css -- .wrap, .btn, .panel, .plan,
 * .steps -- so a fix to a funnel screen's markup ports between products without being
 * rewritten. What differs is the tokens and the face, which is exactly what should.
 *
 * SELF-HOSTED FONTS. The document links fonts.googleapis.com, which this application's
 * policy blocks: the page renders in a fallback, every heading is wrong, and the only
 * tell is document.fonts.size being zero.
 */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/bricolage.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:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/bricolage-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:#0B0F1E;
  --night:#10162A;
  --panel:#161D36;
  --orange:#FF4800;
  --amber:#FFA06B;
  --paper:#FFFFFF;
  --quiet:#E4E8F6;
  --mute:#C3CAE4;
  --gline:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06);
  --live:#22c55e;
  --warn:#FFC98A;
  --bad:#FF8E73;
  --head:"Bricolage Grotesque","Segoe UI",system-ui,sans-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(--quiet);
  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:880px}

/*
 * THE TYPE. A tight, heavy display sans rather than Go Avatar's serif, and the accent
 * is a colour change rather than an italic, because this face has no italic worth
 * using at display size.
 */
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.025em;margin:0;color:#fff}
h1{font-size:clamp(42px,6.6vw,80px);line-height:.98}
h2{font-size:clamp(32px,4.6vw,54px);line-height:1.03}
h3{font-size:clamp(22px,2.6vw,30px);line-height:1.15}
h1 em,h2 em,h3 em{font-style:normal;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 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}
}

.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%}

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

.panel{background:var(--panel);border:1px solid var(--gline);border-radius:28px;
  padding:40px 36px}
.panel + .panel{margin-top:22px}
.panel .sub{color:var(--quiet);margin:0 0 28px;font-size:18px;max-width:60ch}

.grid{display:grid;gap:20px}
@media(min-width:860px){.grid{grid-template-columns:repeat(4,1fr)}
  .grid.three{grid-template-columns:repeat(3,1fr)}
  .grid.two{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel);border:1px solid var(--gline);border-radius:24px;
  padding:28px 26px;color:#fff}
.card .meta{color:var(--quiet);font-size:16px;margin:8px 0 0}

.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:28px;padding:36px 30px;color:#fff;
  transition:border-color .15s,box-shadow .15s}
.plan.on{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,72,0,.18)}
.plan .mins{font-weight:600;color:var(--quiet);margin-top:2px}
.plan .price{font:700 clamp(50px,5.6vw,72px)/1 var(--head);letter-spacing:-.03em;margin:24px 0 4px}
.plan .price small{font:600 16px var(--body);color:var(--quiet);margin-left:4px;letter-spacing:0}
.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:.6;flex:none}
.plan .chosen{margin:auto 0 0;padding-top:18px;font-size:15px;color:var(--amber)}

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,.28);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}

.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}
.err{color:var(--bad);font-weight:600;font-size:16px;margin:14px 0 0;min-height:24px}
.ok{color:var(--live);font-weight:700}

.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:60px;padding-bottom:100px}
section{padding:72px 0}
section.band{background:rgba(255,255,255,.03)}