/* Roark vertical landing pages — tokens lifted from roark.ai's own brand stylesheet. */
:root{
  --brand:#006838; --brand-hover:#005530; --wash:#e2efe7; --dark:#13201a;
  --ink:#1c1a18; --body:#54514d; --muted:#8a8682; --faint:#a8a5a0;
  --border:#e2ded7; --border-soft:#eceae5;
  --bg:#faf9f7; --surface:#f5f3f0; --surface-2:#f0eeeb;
  --amber:#8a5a00; --amber-wash:#fdf4e3; --amber-border:#f0e2c4;
  --red:#a33;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --bodyf:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font-family:var(--bodyf);font-size:15.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono);font-feature-settings:"ss01" on}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--brand);text-decoration:none;font-weight:500}
a:hover{color:var(--brand-hover)}
img{max-width:100%}

.dotgrid{background-image:radial-gradient(circle,rgba(0,0,0,.06) 1px,transparent 0);background-size:16px 16px}
.grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* internal banner */
.internal{background:var(--dark);color:#e8eae6;padding:9px 0;font-family:var(--mono);font-size:11.5px}
.internal .wrap{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.internal b{color:#9cc4a9;font-weight:500}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(250,249,247,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:12px;height:60px}
.logo{display:flex;align-items:center;gap:9px}
.logo img{width:26px;height:26px;border-radius:6px;display:block}
.logo span{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.03em}
.nav-sp{flex:1}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
  background:var(--wash);border:1px solid #cfe3d6;padding:4px 10px;border-radius:999px;white-space:nowrap;font-weight:500}
.badge.new{color:var(--amber);background:#fbeed3;border-color:var(--amber-border)}
.navlink{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:400}
.navlink:hover{color:var(--brand)}

/* internal offer toggle — review affordance, not a customer-facing control */
.oseg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px}
.oseg button{font-family:var(--mono);font-size:11px;border:0;background:transparent;color:var(--body);
  padding:5px 11px;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease}
.oseg button[aria-pressed="true"]{background:var(--brand);color:#fff}
.oseg button[aria-pressed="true"][data-offer="prop"]{background:#b8860b}
.oseg button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:760px){.nav-hide{display:none}}

/* buttons */
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-family:var(--bodyf);
  font-weight:600;font-size:14.5px;padding:11px 22px;border-radius:999px;transition:background .18s ease;border:0;cursor:pointer}
.cta:hover{background:var(--brand-hover);color:#fff}
.cta.sm{padding:8px 16px;font-size:13px}
.cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--border)}
.cta.ghost:hover{background:var(--surface);color:var(--ink)}
.ctarow{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;align-items:center}

/* sections */
section{padding:64px 0;border-bottom:1px solid var(--border)}
.slabel{font-family:var(--mono);font-size:11.5px;color:var(--brand);letter-spacing:.06em;margin-bottom:14px;font-weight:500}
h2.sh{font-family:var(--display);font-feature-settings:"ss01" on;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;
  letter-spacing:-.03em;color:var(--ink);font-weight:600;max-width:26ch}
.ssub{margin-top:12px;max-width:64ch}

/* hero */
.hero{padding:72px 0 60px;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero .dots{position:absolute;inset:0;opacity:.5;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent)}
.hero .wrap{position:relative}
.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:34px}}
h1{font-family:var(--display);font-feature-settings:"ss01" on;font-weight:600;font-size:clamp(1.95rem,4.2vw,2.85rem);
  line-height:1.06;letter-spacing:-.035em;color:var(--ink)}
.lede{margin-top:18px;font-size:16.5px;line-height:1.65;max-width:54ch}
.lede strong{color:var(--ink);font-weight:600}
.chips{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11.5px;color:var(--body);background:var(--surface);border:1px solid var(--border);
  padding:5px 11px;border-radius:999px}
.chip b{color:var(--brand);font-weight:500}

/* scored-call visual */
.callcard{border:1px solid var(--border);border-radius:16px;background:#fff;padding:18px;box-shadow:0 1px 3px rgba(28,26,24,.04)}
.cc-head{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border-soft);
  font-family:var(--mono);font-size:11px;color:var(--muted)}
.cc-dot{width:6px;height:6px;border-radius:999px;background:var(--brand);flex:none}
.wave{display:flex;align-items:center;gap:2.5px;height:52px;margin:16px 0}
/* height:100% is load-bearing — the bars are empty <i>, so under align-items:center
   they'd collapse to zero content height and the waveform would render blank. */
.wave i{flex:1;height:100%;background:#cfe3d6;border-radius:2px;transform-origin:center;animation:bar 1.1s ease-in-out infinite}
.wave i.hot{background:var(--brand)}
@keyframes bar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.cc-rows{display:flex;flex-direction:column;gap:0}
.cc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border-soft);font-size:13px}
.cc-row .nm{flex:1;color:var(--ink)}
.cc-row .sc{font-family:var(--mono);font-size:11.5px}
.pass .sc{color:var(--brand)} .fail .sc{color:var(--red)}
.tick{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
.tick.p{color:var(--brand);background:var(--wash);border:1px solid #cfe3d6}
.tick.f{color:var(--red);background:#fdeeee;border:1px solid #f3d6d6}

/* logos */
.logos{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:26px;opacity:.5}
.logos img{height:18px;width:auto;filter:grayscale(1)}
.logos img.sq{height:28px} /* BCG ships square with the wordmark inside */
.logos-label{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.05em}

/* failure list */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr}}
.fcard{border:1px solid var(--border);border-radius:13px;background:#fff;padding:20px;transition:border-color .2s ease}
.fcard:hover{border-color:#cfc9c0}
.fcard h3{font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
  display:flex;align-items:flex-start;gap:9px;line-height:1.3}
.fcard h3 svg{flex:none;margin-top:4px}
.fcard p{margin-top:8px;font-size:13.5px;line-height:1.6;padding-left:21px}
.fnote{margin-top:10px;padding-left:21px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}

/* checks */
.checks{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.check{font-family:var(--mono);font-size:12px;color:var(--ink);background:#fff;border:1px solid var(--border);
  padding:7px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.check::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--brand)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--border);border-radius:13px;background:#fff;padding:18px;position:relative}
.step .n{font-family:var(--mono);font-size:11px;color:var(--brand);letter-spacing:.06em}
.step h4{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);margin-top:6px;letter-spacing:-.015em}
.step p{margin-top:6px;font-size:13px;line-height:1.55}

/* form */
.formwrap{display:grid;grid-template-columns:1fr .9fr;gap:34px;margin-top:30px;align-items:start}
@media(max-width:900px){.formwrap{grid-template-columns:1fr}}
form{border:1px solid var(--border);border-radius:16px;background:#fff;padding:26px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.frow{grid-template-columns:1fr}}
.field{margin-bottom:16px}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
input,select{width:100%;font-family:var(--bodyf);font-size:14.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--border);border-radius:9px;padding:10px 12px;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,104,56,.1)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--red)}
input::placeholder{color:var(--faint)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8682' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.err{display:block;font-family:var(--mono);font-size:11px;color:var(--red);margin-top:5px;min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* segmented role control */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{display:block;margin:0;text-transform:none;letter-spacing:0;height:100%}
/* Visually hidden, but keyboard-focusable. Pin the size: the global input{width:100%}
   would otherwise resolve against the viewport and sprawl a 1280px box over the next column. */
.seg input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
/* height:100% so both role boxes match — the grid stretches the label, not this. */
.seg .opt{display:block;height:100%;border:1px solid var(--border);border-radius:10px;padding:11px 13px;cursor:pointer;
  background:var(--bg);transition:border-color .15s ease,background .15s ease}
.seg .opt b{display:block;font-family:var(--bodyf);font-size:14px;color:var(--ink);font-weight:600;text-transform:none;letter-spacing:-.01em}
/* font-family is explicit: the global label{} rule sets mono, which small would inherit. */
.seg .opt small{display:block;font-family:var(--bodyf);font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.4}
.seg input:checked + .opt{border-color:var(--brand);background:var(--wash)}
.seg input:focus-visible + .opt{outline:2px solid var(--brand);outline-offset:2px}

.formside h3{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.formside ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:11px}
.formside li{display:flex;gap:9px;font-size:14px;line-height:1.55;align-items:flex-start}
.formside li svg{flex:none;margin-top:5px}
.trust{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.7}

.done{text-align:center;padding:28px 10px}
.done .big{font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:12px}
.done p{margin-top:8px;font-size:14px}
.formnote{margin-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--faint);line-height:1.6}

footer{padding:40px 0 56px;color:var(--faint);font-family:var(--mono);font-size:11.5px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted);font-weight:400}

/* index page — a plain directory of the eight */
.idx{padding:60px 0}
.idx .lede{margin-top:14px;font-size:16px;color:var(--muted)}
.idxnote{margin-top:28px;font-size:11px;color:var(--faint);line-height:1.7;max-width:70ch}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
@media(max-width:900px){.igrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.igrid{grid-template-columns:1fr}}
.icard{border:1px solid var(--border);border-radius:13px;background:#fff;padding:20px;display:block;transition:border-color .2s ease,box-shadow .2s ease}
.icard:hover{border-color:#cfc9c0;box-shadow:0 1px 3px rgba(28,26,24,.05)}
.icard .vn{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.icard h3{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--ink);margin-top:9px;line-height:1.28;letter-spacing:-.02em}
.icard .go{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--brand)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}