/* ---------------------------------------------------------------------------
   The Culture Check — page styles for culture-check.html, crew-check.html and
   the internal gap report. Loads after styles.css (tokens) and site.css
   (header, footer, buttons). Design: "Culture Check" Claude Design handoff.
   --------------------------------------------------------------------------- */

body.ccpage{padding-bottom:0}
body.ccpage header .navwrap{gap:22px}
.cc-tag{font-family:var(--font-label);font-weight:400;font-size:13px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--brown-600);white-space:nowrap}

/* shared primitives */
.cc-label{font-family:var(--font-label);font-weight:400;font-size:13px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--gold-500);display:block}
.cc-label.rust{color:var(--rust-600)}
.cc-label.inv{color:var(--gold-400)}
.cc-label.muted{color:var(--text-muted)}
.cc-label.brown{color:var(--brown-800)}
.cc h1,.cc h2,.cc h3{color:var(--brown-800)}
.cc h1 em,.cc h2 em,.cc h3 em{font-style:italic;color:var(--rust-600)}
.cc .lede{font-size:18px;font-weight:300;line-height:1.7;color:var(--text-secondary);text-wrap:pretty}
.cc-narrow{max-width:760px;margin:0 auto;padding:0 24px}
.cc-wide{max-width:var(--container-max);margin:0 auto;padding:0 32px}
.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-heading);font-weight:700;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;padding:16px 32px;font-size:17px;letter-spacing:-0.03em;transition:background var(--duration-standard) var(--ease-standard),color var(--duration-standard) var(--ease-standard),border-color var(--duration-standard) var(--ease-standard),opacity var(--duration-standard) var(--ease-standard)}
.cc-btn.primary{background:var(--rust-600);color:var(--cream-50)}
.cc-btn.primary:hover{background:var(--accent-primary-hover);color:var(--cream-50)}
.cc-btn.quiet{background:transparent;color:var(--brown-800);border-color:var(--border-strong)}
.cc-btn.quiet:hover{background:var(--surface-tint)}
.cc-btn[disabled],.cc-btn[aria-disabled="true"]{opacity:0.4;cursor:not-allowed}
.cc-btn[disabled]:hover,.cc-btn[aria-disabled="true"]:hover{background:var(--rust-600)}
.cc-btn:focus-visible,.cc-opt:focus-visible,.cc-chip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.cc-tex{position:absolute;inset:0;background:url('img/texture-paper-espresso.jpg') center/cover;opacity:0.32;pointer-events:none}
.cc-mark{width:34px;display:block}
[hidden]{display:none !important}

/* 01 intro */
.cc-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));min-height:calc(100vh - 95px)}
.cc-intro .text{padding:88px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;max-width:680px;justify-self:end;width:100%}
.cc-intro h1{font-size:clamp(36px,4.4vw,52px);line-height:1;margin:18px 0 22px;text-wrap:balance}
.cc-intro .lede{max-width:520px}
.cc-intro .facts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:26px}.facts .fmark{width:15px;height:15px;display:block;flex:none}
.cc-intro .facts span{font-family:var(--font-label);font-weight:400;font-size:13px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--brown-800)}
.cc-intro .go{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:36px}
.cc-intro .panel{background:var(--brown-800);position:relative;overflow:hidden;display:flex;align-items:center;padding:88px clamp(24px,5vw,72px)}
.cc-intro .panel .in{position:relative;max-width:520px}
.cc-intro .panel .cc-mark{margin-bottom:26px}
.cc-intro blockquote{font-family:var(--font-quote);font-weight:300;font-size:clamp(22px,2.2vw,28px);line-height:1.5;color:var(--cream-100);margin-top:16px;text-wrap:pretty}
.cc-intro blockquote em{font-style:italic;color:var(--gold-400)}

/* 02 questions */
.cc-q{padding:56px 0 96px}
.cc-q .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.cc-q .top .remind{font-family:var(--font-quote);font-style:italic;font-size:16px;color:var(--text-secondary)}
.cc-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:14px}
.cc-progress i{display:block;height:4px;border-radius:2px;background:var(--tan-300);transition:background var(--duration-standard) var(--ease-standard)}
.cc-progress i.done{background:var(--gold-500)}
.cc-progress i.now{background:var(--rust-600)}
.cc-cards{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.cc-card{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px 28px 24px}
.cc-card .stmt{display:flex;gap:16px;align-items:baseline}
.cc-card .num{font-family:var(--font-label);font-weight:400;font-size:14px;color:var(--gold-500);flex:none}
.cc-card .stmt p{font-size:19px;line-height:1.5;color:var(--brown-800);text-wrap:pretty;margin:0}
.cc-opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:20px;list-style:none;padding:0}
.cc-opt{width:100%;background:var(--cream-50);color:var(--brown-800);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:12px 4px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font:inherit;letter-spacing:inherit;transition:background var(--duration-standard) var(--ease-standard),border-color var(--duration-standard) var(--ease-standard),color var(--duration-standard) var(--ease-standard)}
.cc-opt:hover{border-color:var(--rust-600)}
.cc-opt .n{font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1}
.cc-opt .l{font-family:var(--font-label);font-weight:400;font-size:11px;letter-spacing:-0.01em;text-transform:uppercase;white-space:nowrap}
.cc-opt[aria-pressed="true"]{background:var(--rust-600);color:var(--cream-50);border-color:var(--rust-600)}
.cc-ends{display:none;justify-content:space-between;margin-top:8px;font-family:var(--font-label);font-weight:400;font-size:11px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--brown-600)}
.cc-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:32px}
.cc-nav .right{display:flex;align-items:center;gap:16px}
.cc-nav .count{font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--text-muted)}
.cc-nav .cc-btn.quiet{padding:14px 26px;font-size:15px}
.cc-nav .cc-btn.primary{padding:15px 30px;font-size:16px}

/* 03 about you */
.cc-about{padding:56px 0 96px}
.cc-about h2{font-size:36px;line-height:1.1;margin:14px 0 10px}
.cc-about .lede{font-size:17px}
.cc-about .block{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.cc-about .block:first-of-type{margin-top:40px}
.cc-about .ask{font-family:var(--font-heading);font-weight:700;font-size:19px;line-height:1.3;color:var(--brown-800)}
.cc-about textarea,.cc-about input{appearance:none;-webkit-appearance:none;width:100%;background:var(--white);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:13px 15px;font-family:var(--font-body);font-size:17px;line-height:1.55;color:var(--brown-800);letter-spacing:-0.03em}
.cc-about textarea{resize:vertical;min-height:120px}
.cc-about textarea:focus,.cc-about input:focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.cc-about input:user-invalid{border-color:var(--rust-600)}
.cc-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.cc-chip{background:var(--white);color:var(--brown-800);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:11px 18px;font-family:var(--font-label);font-weight:400;font-size:13px;letter-spacing:-0.01em;text-transform:uppercase;cursor:pointer;transition:background var(--duration-standard) var(--ease-standard),border-color var(--duration-standard) var(--ease-standard)}
.cc-chip:hover{border-color:var(--rust-600)}
.cc-chip[aria-pressed="true"]{background:var(--rust-600);color:var(--cream-50);border-color:var(--rust-600)}
.cc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.cc-fields label{display:flex;flex-direction:column;gap:6px}
.cc-fields label span{font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--brown-600)}
.cc-fields label span .opt{color:var(--text-muted);text-transform:none;letter-spacing:-0.03em;font-weight:400}
.cc-about .note{font-size:15px;font-weight:300;font-style:italic;line-height:1.6;color:var(--text-secondary);margin:0}
.cc-about .cc-nav{margin-top:40px}
.cc-about .err{display:none;font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--rust-600);margin-top:14px}
.cc-about .err.on{display:block}
.cc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 04 results */
.cc-res-hero{background:var(--brown-800);position:relative;overflow:hidden}
.cc-res-hero .in{position:relative;max-width:var(--container-max);margin:0 auto;padding:88px 32px 80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px;align-items:end}
.cc-score{display:flex;align-items:baseline;gap:10px;margin-top:22px}
.cc-score b{font-family:var(--font-heading);font-weight:700;font-size:clamp(96px,12vw,148px);line-height:0.85;letter-spacing:-0.05em;color:var(--cream-100)}
.cc-score span{font-family:var(--font-label);font-weight:400;font-size:18px;color:var(--gold-400)}
.cc-res-hero h1{font-size:clamp(36px,4vw,48px);line-height:1.05;color:var(--cream-100);margin-top:22px}
.cc-res-hero .verdict{font-family:var(--font-quote);font-style:italic;font-size:22px;line-height:1.4;color:var(--gold-400);margin-top:8px}
.cc-res-hero .read{display:flex;flex-direction:column;gap:16px;max-width:540px}
.cc-res-hero .read p{font-size:18px;font-weight:300;line-height:1.7;color:var(--text-inverse-muted);text-wrap:pretty;margin:0}
.cc-res-hero .read p+p{color:var(--cream-100)}
.cc-start{margin-top:80px;background:var(--surface-tint);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px;align-items:center}
.cc-start h2{font-size:36px;line-height:1.1;margin-top:12px}
.cc-start .q{font-size:16px;font-weight:300;line-height:1.6;color:var(--text-secondary);margin-top:8px}
.cc-start .meta{display:flex;align-items:center;gap:12px;margin-top:18px}
.cc-start .meta b{font-family:var(--font-heading);font-weight:700;font-size:22px;color:var(--brown-800)}
.cc-start .meta b small{font-family:var(--font-label);font-size:14px;color:var(--brown-600);font-weight:400}
.cc-start .line{font-family:var(--font-heading);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.2;letter-spacing:-0.03em;color:var(--rust-600);text-wrap:pretty;margin:0}
.cc-pill{display:inline-block;font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--cream-50);padding:5px 10px;border-radius:var(--radius-sm);background:var(--brown-600)}
.cc-pill.strength,.cc-pill.same{background:var(--sage-600)}
.cc-pill.holding,.cc-pill.known{background:var(--gold-500)}
.cc-pill.weak,.cc-pill.blind{background:var(--rust-600)}
.cc-pill.harder{background:var(--brown-600)}
.cc-areas{margin-top:72px}
.cc-rows{display:flex;flex-direction:column;margin-top:20px;border-top:1px solid var(--border-subtle)}
.cc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px 40px;align-items:center;padding:26px 0;border-bottom:1px solid var(--border-subtle)}
.cc-row .ttl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cc-row h3{font-size:21px;margin:0}
.cc-row .here{font-family:var(--font-label);font-weight:400;font-size:11px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--rust-600);border:1px solid var(--rust-600);border-radius:var(--radius-sm);padding:3px 7px}
.cc-bar{display:flex;align-items:center;gap:14px;margin-top:14px}
.cc-bar .track{flex:1;height:8px;border-radius:4px;background:var(--cream-100);position:relative;overflow:hidden}
.cc-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--brown-600);transition:width 600ms var(--ease-standard)}
.cc-bar .val{font-family:var(--font-label);font-weight:400;font-size:15px;color:var(--brown-800);flex:none;min-width:52px;text-align:right}
.cc-row .band{display:block;margin-top:8px;font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:-0.01em;text-transform:uppercase}
.strength .fill,.same .fill{background:var(--sage-600)}
.holding .fill,.known .fill{background:var(--gold-500)}
.weak .fill,.blind .fill{background:var(--rust-600)}
.cc-row.strength .band{color:var(--sage-600)}
.cc-row.holding .band{color:var(--gold-500)}
.cc-row.weak .band{color:var(--rust-600)}
.cc-row .line{font-size:17px;font-weight:300;line-height:1.6;color:var(--text-secondary);text-wrap:pretty;margin:0}
.cc-bridge{background:var(--ink-900);margin-top:96px;padding:96px 32px;text-align:center}
.cc-bridge .cc-mark{margin:0 auto 26px}
.cc-bridge p.big{font-family:var(--font-quote);font-weight:300;font-size:clamp(24px,2.6vw,32px);line-height:1.45;color:var(--cream-100);max-width:820px;margin:0 auto;text-wrap:balance}
.cc-bridge p.big em{font-style:italic;color:var(--gold-400)}
.cc-bridge .go{margin-top:36px;display:flex;justify-content:center;flex-wrap:wrap;gap:16px 28px;align-items:center}
.cc-bridge .go .cc-btn{padding:18px 36px;font-size:18px}
.cc-bridge .or{font-family:var(--font-label);font-weight:400;font-size:14px;letter-spacing:-0.01em;color:var(--text-inverse-muted)}
.cc-bridge .or a{color:var(--gold-400)}
.cc-bridge .sub{font-size:15px;font-weight:300;line-height:1.6;color:var(--text-inverse-muted);margin:18px auto 0;max-width:460px}
.cc-fine{padding:28px 32px 40px;max-width:var(--container-max);margin:0 auto}
.cc-fine p{font-family:var(--font-label);font-size:12px;line-height:1.6;color:var(--text-muted);margin:0}
.cc-fine p+p{margin-top:8px}
.cc-fine a{color:var(--brown-600);text-decoration:underline}

/* 05 crew check — one phone-width column */
body.crewpage{background:var(--cream-50)}
.crew{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.crew-intro{flex:1;background:var(--brown-800);position:relative;overflow:hidden;display:flex;flex-direction:column;padding:48px 26px 36px;min-height:100vh}
.crew-intro .in{position:relative;display:flex;flex-direction:column;flex:1}
.crew-intro .lock{height:34px;align-self:flex-start;width:auto}
.crew-intro .bottom{margin-top:auto;padding-top:48px}
.crew-intro h1{font-size:34px;line-height:1.02;color:var(--cream-100);margin:12px 0 18px}
.crew-intro h1 em{color:var(--gold-400)}
.crew-intro p{font-size:18px;font-weight:300;line-height:1.55;color:var(--cream-100);margin:0}
.crew-intro .cc-label{margin-top:22px;color:var(--text-inverse-muted)}
.crew-intro .cc-btn{width:100%;margin-top:28px;padding:17px}
.crew-intro .who{margin-top:14px;font-family:var(--font-label);font-size:12px;letter-spacing:-0.01em;color:var(--text-inverse-muted);text-align:center}
.crew-q{display:flex;flex-direction:column;min-height:100vh}
.crew-q .head{padding:28px 20px 14px;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--cream-50);z-index:5}
.crew-q .head .row{display:flex;justify-content:space-between}
.crew-q .cc-progress{gap:4px;margin-top:10px}
.crew-q .list{flex:1;padding:18px 20px 24px;display:flex;flex-direction:column;gap:22px}
.crew-q .item p{font-size:17px;line-height:1.4;color:var(--brown-800);margin:0}
.crew-q .cc-opts{gap:6px;margin-top:10px}
.crew-q .cc-opt{height:46px;padding:0;justify-content:center;background:var(--white)}
.crew-q .cc-opt .l{display:none}
.crew-q .cc-opt[aria-pressed="true"]{background:var(--rust-600)}
.crew-q .cc-ends{display:flex;margin-top:6px}
.crew-q .foot{padding:14px 20px 28px;border-top:1px solid var(--border-subtle);display:flex;gap:10px;position:sticky;bottom:0;background:var(--cream-50)}
.crew-q .foot .cc-btn{flex:1;padding:15px;font-size:16px}
.crew-q .foot .cc-btn.quiet{flex:0 0 auto}
.crew-close{padding:40px 20px 28px;min-height:100vh;display:flex;flex-direction:column}
.crew-close .ask{font-family:var(--font-heading);font-weight:700;font-size:20px;line-height:1.25;color:var(--brown-800);margin-top:14px;display:block}
.crew-close textarea{appearance:none;-webkit-appearance:none;width:100%;margin-top:12px;min-height:120px;background:var(--white);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:12px;font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--brown-800);letter-spacing:-0.03em;resize:vertical}
.crew-close textarea:focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.crew-close .ask+.ask{margin-top:26px}
.crew-roles{display:flex;flex-direction:column;gap:8px;margin-top:12px;list-style:none;padding:0}
.crew-roles .cc-chip{height:50px;display:flex;align-items:center;padding:0 16px;text-align:left}
.crew-close .send{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:10px}
.crew-close .send .cc-btn{width:100%;padding:16px;font-size:16px}
.crew-close .err{display:none;font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--rust-600)}
.crew-close .err.on{display:block}
.crew-done{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:52px 26px 32px}
.crew-done .cc-mark{margin-bottom:24px}
.crew-done h1{font-size:34px;line-height:1.05}
.crew-done p{font-size:18px;font-weight:300;line-height:1.6;color:var(--text-secondary);margin-top:16px}
.crew-done p.quiet{font-size:16px;font-style:italic}
.crew-done p.fine{font-family:var(--font-label);font-size:12px;line-height:1.6;color:var(--text-muted);margin-top:28px}
.crew-nocode{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:52px 26px}
.crew-nocode h1{font-size:30px;line-height:1.1}
.crew-nocode p{font-size:17px;font-weight:300;line-height:1.6;color:var(--text-secondary);margin-top:14px}

/* small screens */
@media (max-width:560px){
  .cc-opt{padding:12px 2px 10px}
  .cc-opt .l{display:none}
  .cc-ends{display:flex}
  .cc-card{padding:22px 18px 20px}
  .cc-card .stmt p{font-size:17px}
  .cc-nav{flex-wrap:wrap}
  .cc-nav .right{margin-left:auto}
  .cc-intro .text,.cc-intro .panel{padding-top:56px;padding-bottom:56px}
  .cc-intro{min-height:0}
  .cc-res-hero .in{padding:64px 24px 56px}
  .cc-wide,.cc-fine{padding-left:24px;padding-right:24px}
  .cc-bridge{padding:72px 24px}
  .cc-about h2{font-size:30px}
  .cc-start h2{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .cc-bar .fill,.cc-progress i,.cc-opt,.cc-chip,.cc-btn{transition:none}
}

/* Home-page footer, ported verbatim so the two pages match. The .ftr rules
   reference index.html's token vocabulary, which this page does not load, so
   those five values are scoped onto .ftr here. */
.ftr{--ink:#1e1d1b;--cream:#f2ebdc;--gold-l:#bd9c74;--muted:#cdbfae;--lek:Lekton,ui-monospace,monospace}
.ftr{background:var(--ink);color:var(--muted);padding:56px 0 110px;font-size:16px}.ftr{padding-bottom:40px}.ftr .cols{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}.ftr .logo{height:52px;width:auto;margin-bottom:20px}.ftr h4{margin:0 0 10px;font-family:var(--lek);font-weight:400;font-size:15px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--gold-l)}.ftr ul{list-style:none;margin:0;padding:0}.ftr li a{display:inline-flex;align-items:center;min-height:40px;color:var(--muted);text-decoration:none}.ftr li a:hover{color:var(--cream)}.ftr h4.sp{margin-top:22px}.ftr .ccb .s .cclock{height:34px;width:auto}

/* The footer markup was ported from the homepage but these component rules
   were not, so the container had no gutter and the Cowboy Creative block lost
   its card entirely. Scoped under .ftr so nothing leaks into the page above. */
.ftr .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,28px)}
.ftr .social{display:flex;gap:10px}
.ftr .social a{width:44px;height:44px;border-radius:99px;border:1px solid rgba(242,235,220,.28);display:inline-flex;align-items:center;justify-content:center;color:var(--cream)}
.ftr .social a:hover{border-color:var(--gold-l);color:var(--cream)}
.ftr .social svg{width:18px;height:18px;fill:currentColor}
.ftr .ccb{margin-top:44px;padding:24px;border-radius:6px;border:1px solid rgba(242,235,220,.16);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between}
.ftr .ccb .s{display:flex;gap:14px;align-items:flex-start;flex:1 1 420px}
.ftr .ccb .s img{width:18px;margin-top:5px;flex:none}
.ftr .ccb p{margin:0;color:var(--cream)}
.ftr .ccb a.go{font-family:var(--lek);font-size:16px;letter-spacing:-0.01em;text-transform:uppercase;color:var(--gold-l);min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px}
.ftr .ccb a.go:hover{color:var(--cream)}

/* Below 360px the row wraps mid-pair and strands a separator. */
@media(max-width:359px){.cc-intro .facts .fmark{display:none}.cc-intro .facts{gap:6px 14px}}