/* ---------------------------------------------------------------
   PALETTE STATUS: LOCKED — "Cool Concrete", see DESIGN.md

   Resolved away from the original warm-paper proposal, which read
   too close to a competitor's cream + terracotta look. Ground is
   cool grey, not warm cream; the fire accent is unchanged.

   All color flows from these variables. Changing the palette means
   editing this block only; nothing downstream hardcodes a color.

   Shared by every page (index.html, client-onboarding-calendar/) —
   this file is the single source of truth for the design system;
   nothing should re-declare these rules inline in a page again.
   --------------------------------------------------------------- */
:root{
  --ink:#14161A;
  --ink-soft:#4B4F56;
  --ink-faint:#868B93;
  --paper:#F2F3F5;
  --paper-warm:#E7E9EB;
  --rule:#D4D7DB;
  --fire:#E1440F;
  --fire-deep:#B93409;
  --fire-tint:#FBEAE2;
  --on-fire:#FFFFFF;
  --surface-lift:#FFFFFF;

  --step--1:clamp(.82rem,.78rem + .18vw,.9rem);
  --step-0:clamp(1.02rem,.98rem + .2vw,1.13rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  --step-3:clamp(2rem,1.5rem + 2.2vw,3.4rem);
  --step-4:clamp(2.6rem,1.7rem + 4vw,5.4rem);

  --gap:clamp(3.5rem,7vw,7rem);
  --pad:clamp(1.25rem,4vw,2rem);
  --maxw:1120px;
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:var(--measure)}

/* Hero eyebrow was removed as redundant with the nav wordmark directly above;
   this spacer holds the space so the h1 doesn't shift up. */
.hero-spacer{
  height:calc(var(--step--1) * 1.6);
  margin:0 0 1.5rem;
}

/* Section label: used sparingly, only on sections that have no other
   heading (Testimonials) or whose headline doesn't name the content
   (Copy samples). Not a default — see DESIGN.md. */
.reg{
  display:flex;align-items:center;gap:.9rem;
  margin:0 0 1.5rem;
}
.reg::after{
  content:"";flex:1;height:1px;background:var(--rule);
}
.reg span{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:var(--step--1);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fire);
  font-weight:500;
  white-space:nowrap;
}
.reg::before{
  content:"";width:11px;height:11px;flex:none;
  background:var(--fire);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(242,243,245,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.85rem;
}
.mark{
  font-weight:800;letter-spacing:-.02em;font-size:1.12rem;
  text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;gap:.55rem;
}
.mark i{
  width:10px;height:10px;background:var(--fire);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  background:var(--fire);color:var(--on-fire);
  font-weight:700;font-size:var(--step-0);
  letter-spacing:-.01em;
  padding:.85em 1.7em;
  border:0;border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 1px 0 var(--fire-deep);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{background:var(--fire-deep);transform:translateY(-1px);box-shadow:0 3px 0 var(--fire-deep)}
.btn:active{transform:translateY(0);box-shadow:0 1px 0 var(--fire-deep)}
.btn-sm{padding:.6em 1.2em;font-size:var(--step--1)}
.btn-lg{padding:1em 2.4em;font-size:var(--step-1)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--fire);outline-offset:3px;border-radius:2px}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(3.5rem,9vw,7rem) var(--gap)}
.hero h1{
  font-size:var(--step-4);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.035em;
  margin:0 0 1.1rem;
  max-width:15ch;
}
.hero .sub{
  font-size:var(--step-2);
  line-height:1.25;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  margin:0 0 1.4rem;
  max-width:24ch;
}
.hero .examples{
  font-size:var(--step-0);
  color:var(--ink-soft);
  max-width:46ch;
  margin:0 0 2.2rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:end;
}
.hero-aside{
  border-left:1px solid var(--rule);
  padding-left:clamp(1.25rem,3vw,2.5rem);
}
.hero-aside dl{margin:0;display:grid;gap:1.35rem}
.hero-aside dt{
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:.15rem;
}
.hero-aside dd{
  margin:0;font-weight:700;font-size:var(--step-1);
  letter-spacing:-.02em;line-height:1.15;
}

/* ---------- Sections ---------- */
section{padding-block:var(--gap)}
.sec-alt{background:var(--paper-warm);border-block:1px solid var(--rule)}
h2{
  font-size:var(--step-3);
  font-weight:800;line-height:1.02;letter-spacing:-.03em;
  margin:0 0 1rem;max-width:20ch;
}
.sec-sub{
  font-size:var(--step-1);color:var(--ink-soft);
  max-width:56ch;margin:0 0 3rem;line-height:1.45;
}

/* ---------- Lead section ---------- */
.lead-body{max-width:var(--measure);font-size:var(--step-1);line-height:1.5}
.lead-body p{margin:0 0 .85rem}
.lead-verdict{
  font-weight:800;font-size:var(--step-2);
  letter-spacing:-.02em;color:var(--fire);
  margin:1.6rem 0 0 !important;
}
.options{
  margin-top:3.5rem;
  display:grid;gap:0;
  border-top:1px solid var(--rule);
}
.opt{
  padding:2.2rem 0;
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,20ch) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);
  align-items:start;
}
.opt h3{
  margin:0;font-size:var(--step-1);font-weight:800;
  letter-spacing:-.02em;line-height:1.15;
}
.opt-body{margin:0;color:var(--ink-soft);max-width:60ch}
.opt-body p{margin:0 0 .7rem}
.opt-body p:last-child{margin-bottom:0}

/* ---------- Logic / arguments ---------- */
.video-slot{
  margin:0 0 3.5rem;
  max-width:820px;
}
.video-frame{
  border:1px solid var(--rule);
  background:var(--surface-lift);
  padding:.5rem;
  border-radius:3px;
  box-shadow:0 1px 2px rgba(20,22,26,.05),0 12px 28px -18px rgba(20,22,26,.3);
}
.video-placeholder{
  aspect-ratio:16/9;
  background:var(--paper-warm);
  border:1px dashed var(--rule);
  display:grid;place-content:center;
  text-align:center;gap:.4rem;
  color:var(--ink-faint);
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;
}
.args{
  display:grid;gap:0;
  border-top:1px solid var(--rule);
  counter-reset:arg;
}
.arg{
  counter-increment:arg;
  border-bottom:1px solid var(--rule);
  padding:1.9rem 0;
  display:grid;
  grid-template-columns:4.5rem minmax(0,1fr);
  gap:clamp(.75rem,3vw,2rem);
  align-items:baseline;
}
.arg::before{
  content:counter(arg,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--step--1);
  color:var(--fire);
  letter-spacing:.06em;
  font-weight:500;
}
.arg p{
  margin:0;font-size:var(--step-1);
  line-height:1.4;letter-spacing:-.012em;
  max-width:52ch;font-weight:500;
}

/* ---------- Testimonials ---------- */
.tgrid{
  display:flex;
  gap:clamp(1.75rem,4vw,2.75rem);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
.tgrid::-webkit-scrollbar{height:6px}
.tgrid::-webkit-scrollbar-track{background:transparent}
.tgrid::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
.tcard{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 10px 26px -22px rgba(20,22,26,.5);
  flex:0 0 auto;
  width:clamp(300px,34vw,420px);
  scroll-snap-align:start;
}
.tcard .vid{background:var(--ink);line-height:0}
.tcard .meta{padding:1.15rem 1.25rem 1.3rem}
.tcard .name{
  font-weight:800;font-size:var(--step-0);
  letter-spacing:-.015em;margin:0 0 .25rem;line-height:1.25;
}
.tcard .role{
  margin:0;font-size:var(--step--1);color:var(--ink-faint);
  line-height:1.4;
}
.tnote{
  margin:.7rem 0 0;font-size:var(--step--1);
  color:var(--ink-faint);font-style:italic;line-height:1.45;
  padding-top:.7rem;border-top:1px solid var(--rule);
}

/* ---------- Samples ---------- */
.samples{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1.75rem,4vw,2.5rem);
  align-items:start;
}
.sample{
  border:1px solid var(--rule);
  background:var(--surface-lift);
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 10px 26px -22px rgba(20,22,26,.5);
}
.sample .shot{
  height:340px;overflow:hidden;
  border-bottom:1px solid var(--rule);
  background:var(--paper-warm);
  position:relative;
}
.sample .shot img{
  width:100%;height:auto;object-fit:cover;object-position:top center;
}
.sample .shot[data-lightbox]{cursor:zoom-in}
.sample .shot[data-lightbox]:focus-visible{outline:2.5px solid var(--fire);outline-offset:-2px}
.zoom-hint{
  position:absolute;right:.6rem;bottom:.6rem;
  background:rgba(20,22,26,.78);color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--step--1);letter-spacing:.05em;
  padding:.35em .7em;border-radius:2px;
  pointer-events:none;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(20,22,26,.92);
  display:none;
  overflow-y:auto;
  padding:4.5rem 1.5rem 3rem;
}
.lightbox.is-open{display:block}
.lightbox-scroll{max-width:1000px;margin-inline:auto}
.lightbox-scroll img{
  width:100%;height:auto;display:block;
  border-radius:3px;
  box-shadow:0 20px 60px -20px rgba(20,22,26,.6);
}
.lightbox-close{
  position:fixed;top:1.25rem;right:1.25rem;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-lift);color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;
  font-size:1.5rem;line-height:1;cursor:pointer;
  z-index:101;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.lightbox-close:hover{background:var(--fire);color:var(--on-fire);border-color:var(--fire)}
.sample .cap{
  padding:1rem 1.15rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--step--1);
  letter-spacing:.05em;
  color:var(--ink-soft);
  line-height:1.45;
}

/* Sample caption, results variant: real performance stats, not a one-line
   label, so it reuses the Label/Value Row language instead of cramming
   numbers into the mono caption style. */
.sample .cap.cap-stats{
  padding:1.15rem 1.25rem 1.35rem;
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  letter-spacing:normal;
  line-height:1.5;
}
.cap-group{margin-bottom:1rem}
.cap-group:last-of-type{margin-bottom:0}
.cap-group-label{
  margin:0 0 .5rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:var(--step--1);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);
}
.cap-stats-grid{
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem 1rem;
}
.cap-stats-grid dt{
  font-size:var(--step--1);
  color:var(--ink-soft);
  line-height:1.35;
}
.cap-stats-grid dd{
  margin:.15rem 0 0;
  font-weight:800;
  font-size:var(--step-0);
  color:var(--ink);
  letter-spacing:-.01em;
}
.cap-note{
  display:inline-block;
  margin-left:.25rem;
  font-weight:500;
  font-size:var(--step--1);
  color:var(--ink-soft);
}
.cap-headline{
  margin:0;
  font-weight:800;
  font-size:var(--step-2);
  letter-spacing:-.02em;
  color:var(--fire);
  line-height:1.15;
}
.cap-group + .cap-headline,
.cap-stats-grid + .cap-headline{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--rule);
}
.cap-headline span{
  display:block;
  margin-top:.3rem;
  font-weight:500;
  font-size:var(--step--1);
  letter-spacing:normal;
  color:var(--ink-soft);
}
.sample-wide{grid-column:1/-1;max-width:820px}
.doc-link{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:2.5rem;
  font-weight:700;font-size:var(--step-1);
  color:var(--fire);
  text-decoration:none;
  border:1.5px solid var(--fire);
  border-radius:2px;
  padding:.8em 1.6em;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.doc-link:hover{background:var(--fire);color:var(--on-fire);transform:translateY(-1px)}
.doc-link:active{transform:translateY(0)}
.doc-link::after{content:"→";transition:transform .18s ease}
.doc-link:hover::after{transform:translateX(3px)}

/* ---------- Close ---------- */
.close{
  background:var(--ink);color:var(--paper);
  border-block:0;
}
.close h2{color:var(--paper);max-width:24ch}
.close .price{
  font-size:var(--step-4);font-weight:800;
  letter-spacing:-.04em;line-height:1;
  margin:1.5rem 0 .35rem;
}
.close .price small{
  font-size:var(--step-1);font-weight:500;
  color:rgba(242,243,245,.62);letter-spacing:-.01em;
}
.close-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.terms{
  list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(242,243,245,.16);
}
.terms li{
  padding:1.05rem 0 1.05rem 2rem;
  border-bottom:1px solid rgba(242,243,245,.16);
  position:relative;
  color:rgba(242,243,245,.88);
  line-height:1.45;
}
.terms li::before{
  content:"";position:absolute;left:0;top:1.55rem;
  width:9px;height:9px;background:var(--fire);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.close .btn{margin-top:2rem}

/* Q&A disclosure: subordinate to the primary CTA. The question is plain
   text; only the "book a call" line beneath it is the actual link/toggle,
   which opens a frameless calendar embed beneath it. */
.qa-lead{
  margin:1.75rem 0 .15rem;
  font-size:var(--step--1);
  color:rgba(242,243,245,.72);
  line-height:1.5;
  max-width:34ch;
}
.qa-toggle{
  display:block;
  margin-top:0;
  background:none;border:0;padding:0;
  font-family:inherit;font-size:var(--step--1);
  color:rgba(242,243,245,.72);
  text-decoration:underline;
  text-underline-offset:.2em;
  cursor:pointer;
  text-align:left;
  max-width:34ch;
  line-height:1.5;
  transition:color .18s ease;
}
.qa-toggle:hover{color:var(--fire)}

/* Calendar embed: deliberately frameless — no border, shadow, padding,
   or card chrome, so the widget sits flush with its container instead
   of reading as another bordered card. Shared by the Q&A disclosure
   here and by client-onboarding-calendar/. */
.calendar-embed iframe{
  width:100%;
  height:750px;
  border:0;
  display:block;
}
.qa-panel{
  margin-top:0;
}
.qa-panel[hidden]{display:none}
.qa-panel:not([hidden]){margin-top:2rem}

/* ---------- Footer ---------- */
footer{
  padding-block:2.5rem;
  border-top:1px solid var(--rule);
  font-size:var(--step--1);color:var(--ink-faint);
}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}

/* ---------- Motion ---------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rise.in{opacity:1;transform:none}

@media (max-width:860px){
  .hero-grid,.close-grid{grid-template-columns:1fr}
  .hero-aside{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:1.75rem}
  .opt{grid-template-columns:1fr;gap:.6rem}
  .arg{grid-template-columns:2.75rem minmax(0,1fr)}
  .hero h1{max-width:none}
  .calendar-embed iframe{height:640px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}