/* Warrick Brothers Tree Service, ad funnel.
   A funnel is a different animal to a site: one column, one decision per screen,
   nothing to wander off into. There is no site nav here on purpose.

   EVERY COLOUR BELOW IS SAMPLED FROM THE LOGO FILE, not chosen. The mark measures
   85.5% deep green #003c30, 6.1% orange #f09018, plus grey and a little sky blue,
   which confirms the client's stated brand colours by measurement rather than by
   memory. --green renders back to #013c30, so the token IS his green.

   THE ROLE SPLIT. Green carries structure, buttons and everything that says who
   we are. Orange is the signal only. It is the complement of a tree service
   plate, which is why it separates instead of fighting.

   ORANGE DISCIPLINE, and it is the same trap the gold had on the parent build.
   --accent at 73.8% lightness measures 2.23:1 on paper and cannot carry text.
   It is permitted for rules, ticks, dots, underline marks and icon strokes.
   Where orange must read AS TEXT, use --accent-ink (5.32:1) and nowhere else.
   Buttons are green on paper or paper on green, never orange, which also avoids
   the green-site-with-orange-buttons reflex every competitor in this trade runs.

   All thirteen pairs were measured, not eyeballed. */

@font-face{font-family:Archivo;src:url(../fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(../fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:oklch(97.2% 0.008 78);         /* warm bone, tinted toward the orange */
  --paper-2:oklch(94.6% 0.011 78);
  --paper-3:oklch(91.0% 0.014 78);
  --ink:oklch(20.0% 0.018 174);          /* never #000, given the green cast */
  --ink-2:oklch(32.0% 0.020 172);
  --ink-3:oklch(47.0% 0.016 168);
  --green:oklch(31.8% 0.060 174.2);      /* SAMPLED #003c30, 85.5% of the mark */
  --green-deep:oklch(22.0% 0.048 174);   /* dark sections and the footer */
  --green-line:oklch(58.0% 0.045 172);   /* rules on dark, 4.06:1 */
  --green-soft:oklch(94.0% 0.022 172);
  --accent:oklch(73.8% 0.162 63.4);      /* SAMPLED #f09018, the sun in the mark */
  --accent-ink:oklch(52.0% 0.135 55);    /* the ONLY orange permitted as text */
  --accent-soft:oklch(89.0% 0.075 68);
  --danger:oklch(47% 0.17 27);

  --gutter:clamp(1.1rem,4.5vw,2.5rem);
  --ease-q:cubic-bezier(0.22,1,0.36,1);
  --ease-e:cubic-bezier(0.16,1,0.3,1);
  --t-fast:220ms; --t-mid:520ms;
}

*,*::before,*::after{box-sizing:border-box}
/* [hidden] is display:none at specificity 0,1,0, so any component rule that
   sets its own display (.btn is inline-flex) ties and wins on source order.
   Every hidden element in this build would silently stay visible. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:where(a){color:inherit}

body{
  background:var(--paper);color:var(--ink-2);
  font-family:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis-weight:none;
  overflow-x:hidden;
}
h1,h2,h3{color:var(--ink);font-weight:750;text-wrap:balance}
.wrap{width:min(1120px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{width:min(680px,100%);margin-inline:auto}

.mono{font-family:'Plex Mono',ui-monospace,Menlo,monospace;font-size:.76rem;
  letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--accent-ink);outline-offset:3px;border-radius:3px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- header: logo and a phone number, nothing else ---------- */
.fhdr{background:var(--paper);border-bottom:1px solid var(--paper-3);position:sticky;top:0;z-index:40}
.fhdr__in{display:flex;align-items:center;gap:1rem;min-height:68px}
.fhdr__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
/* The mark is a circular crest, aspect 1.081, so it is a BADGE and not a lockup.
   Its own banner text is illegible below about 200px, so the company name is set
   in the page's type beside it rather than rendered from the file. */
.fhdr__badge img{width:42px;height:auto}
.fhdr__name{display:flex;flex-direction:column;line-height:1.05}
.fhdr__name b{font-weight:750;font-size:.9375rem;letter-spacing:-.015em;color:var(--ink)}
.fhdr__name i{font-style:normal;font-weight:500;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
@media (max-width:380px){.fhdr__name i{display:none}}
.fhdr__tel{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  text-decoration:none;font-weight:700;color:var(--ink);white-space:nowrap;font-size:.9375rem}
.fhdr__tel svg{width:16px;height:16px;color:var(--green);flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--green);--fg:oklch(98% 0.008 100);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.0625rem 1.75rem;border:0;border-radius:3px;background:var(--bg);color:var(--fg);
  font-weight:700;font-size:1.0625rem;text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;transition:transform var(--t-fast) var(--ease-q);
  min-height:56px;
}
.btn>*{position:relative;z-index:1}
.btn::after{content:'';position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform 360ms var(--ease-e)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]::after{transform:translateY(101%)}
.btn--wide{width:100%}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--paper-3);min-height:48px;
  padding:.75rem 1.25rem;font-size:.9375rem}
.btn--ghost::after{background:var(--paper-2)}
.btn--ghost:hover,.btn--ghost:focus-visible{--fg:var(--ink)}

/* ---------- benefit strip ----------
   The epoxy funnel runs a four up trust row above the headline. Same idea,
   built responsive rather than as duplicated mobile-only and desktop-only
   sections, which is what that build does and is its worst habit. */
.strip{background:var(--green-deep);color:oklch(93% .012 108)}
.strip__in{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;padding-block:.875rem}
@media (min-width:820px){.strip__in{grid-template-columns:repeat(4,1fr);text-align:center;justify-items:center}}
.strip span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8125rem;font-weight:600;line-height:1.25}
.strip svg{width:14px;height:14px;color:var(--accent);flex:0 0 auto}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2rem,5vh,3.5rem) clamp(1.5rem,4vh,2.5rem);text-align:center}
.hero__pill{display:inline-flex;align-items:center;gap:.55rem;background:var(--green-soft);
  color:oklch(32% 0.06 132);padding:.5rem .9rem;border-radius:100px;
  font-family:'Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:500;margin-bottom:1.25rem}
.hero__pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.hero h1{font-size:clamp(2rem,6.2vw,3.5rem);line-height:1.04;letter-spacing:-0.03em;
  font-weight:800;margin-bottom:1rem}
.hero h1 .hl{color:var(--green);position:relative;white-space:nowrap}
.hero__sub{font-size:clamp(1.0625rem,2.4vw,1.25rem);color:var(--ink-2);max-width:52ch;
  margin:0 auto 1.75rem}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .75rem;margin-top:1.5rem}
.trust li{display:inline-flex;align-items:center;gap:.45rem;font-size:.875rem;
  color:var(--ink-2);font-weight:600}
.trust svg{width:15px;height:15px;color:var(--green);flex:0 0 auto}

/* ---------- the survey card. modelled on a GHL survey, not a typeform. ------
   One question per card, options as tappable tiles with an icon, an explicit
   Next button. No auto advance, because auto advance on a mis-tap is a lost
   lead and there is no way back from a wrong answer you did not see. */
.survey{
  background:var(--paper);border:1px solid var(--paper-3);border-radius:6px;
  box-shadow:0 1px 2px oklch(21% .02 135/.04),0 12px 34px oklch(21% .02 135/.07);
  overflow:hidden;
}
.survey__bar{height:5px;background:var(--paper-3);position:relative;overflow:hidden}
.survey__bar i{position:absolute;inset:0;background:var(--green);transform-origin:left;
  transform:scaleX(0);transition:transform 420ms var(--ease-q)}
.survey__top{display:flex;align-items:center;gap:1rem;padding:.9rem 1.25rem;
  border-bottom:1px solid var(--paper-3);background:var(--paper-2)}
.survey__step{font-family:'Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500}
.survey__back{margin-left:auto;background:none;border:0;cursor:pointer;padding:.35rem .5rem;
  display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-3);font-size:.875rem;font-weight:600}
.survey__back:hover{color:var(--ink)}
.survey__back[hidden]{display:none}
.survey__body{padding:clamp(1.25rem,4vw,2rem)}

.q{display:none}
.q[data-on="true"]{display:block;animation:qin 360ms var(--ease-q) both}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .q[data-on="true"]{animation:none}
  .survey__bar i{transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
.q__h{font-size:clamp(1.25rem,3.4vw,1.625rem);line-height:1.22;letter-spacing:-0.015em;
  margin-bottom:.4rem}
.q__hint{font-size:.9375rem;color:var(--ink-3);margin-bottom:1.25rem}

/* icon radio tiles */
.opts{display:grid;gap:.625rem;margin-bottom:1.25rem}
.opts--2{grid-template-columns:1fr}
@media (min-width:560px){.opts--2{grid-template-columns:1fr 1fr}}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{
  display:flex;align-items:center;gap:.875rem;width:100%;cursor:pointer;
  padding:.9375rem 1rem;border:1.5px solid var(--paper-3);border-radius:5px;
  background:var(--paper);transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast);
  font-weight:600;color:var(--ink);line-height:1.3;min-height:60px;
}
.opt label:hover{border-color:var(--green);background:var(--green-soft)}
.opt input:focus-visible+label{outline:2.5px solid var(--accent-ink);outline-offset:2px}
.opt input:checked+label{border-color:var(--green);background:var(--green-soft);
  box-shadow:inset 0 0 0 1px var(--green)}
.opt__ic{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:5px;
  background:var(--paper-2);color:var(--green);transition:background var(--t-fast),color var(--t-fast);
}
.opt input:checked+label .opt__ic{background:var(--green);color:oklch(97% .01 100)}
.opt__ic svg{width:22px;height:22px}
.opt__t{flex:1 1 auto;min-width:0}
.opt__t small{display:block;font-weight:500;font-size:.8125rem;color:var(--ink-3);margin-top:.1rem}
.opt input:checked+label .opt__t small{color:oklch(40% .04 130)}
.opt__tick{width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--paper-3);
  display:grid;place-items:center;color:transparent;transition:all var(--t-fast)}
.opt input:checked+label .opt__tick{background:var(--green);border-color:var(--green);color:oklch(97% .01 100)}
.opt__tick svg{width:12px;height:12px}

/* text fields */
.f{display:grid;gap:.4rem;margin-bottom:1rem}
.f label{font-weight:650;font-size:.9375rem;color:var(--ink)}
.f input,.f textarea{width:100%;padding:.9375rem 1rem;background:var(--paper);
  border:1.5px solid var(--paper-3);border-radius:5px;color:var(--ink);min-height:54px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.f textarea{min-height:110px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px oklch(42.8% .078 131/.15)}
.f input[aria-invalid=true],.f textarea[aria-invalid=true]{border-color:var(--danger)}
.err{font-size:.8125rem;color:var(--danger);font-weight:600}
.q__err{margin-bottom:.75rem}

.q__foot{display:flex;flex-direction:column;gap:.75rem}
.q__note{font-size:.8125rem;color:var(--ink-3);text-align:center}

/* out of area */
.oob{text-align:center;padding:clamp(1.5rem,5vw,2.5rem)}
.oob__ic{width:56px;height:56px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink)}
.oob__ic svg{width:28px;height:28px}
.oob h2{font-size:1.5rem;margin-bottom:.75rem}
.oob p{max-width:44ch;margin:0 auto 1rem}

/* the inline booking stage that replaces the questions in the same card */
.bk-stage{animation:qin 360ms var(--ease-q) both}
@media (prefers-reduced-motion:reduce){.bk-stage{animation:none}}

/* ---------- booking ---------- */
.bk{display:grid;gap:1.5rem}
.bk__sum[hidden]{display:none}
.bk__sum{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.875rem 1rem;
  background:var(--green-soft);border-radius:5px;font-size:.9375rem;color:oklch(30% .05 132)}
.bk__sum b{font-weight:750}
.days{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin}
.day{flex:0 0 auto;min-width:78px;padding:.75rem .5rem;border:1.5px solid var(--paper-3);
  border-radius:5px;background:var(--paper);cursor:pointer;text-align:center;
  transition:border-color var(--t-fast),background var(--t-fast)}
.day:hover:not([disabled]){border-color:var(--green)}
.day[aria-pressed=true]{border-color:var(--green);background:var(--green-soft);
  box-shadow:inset 0 0 0 1px var(--green)}
.day[disabled]{opacity:.4;cursor:not-allowed}
.day .dow{display:block;font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.day .dnum{display:block;font-size:1.25rem;font-weight:750;color:var(--ink);line-height:1.2}
.day .dmon{display:block;font-size:.72rem;color:var(--ink-3)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem}
.slot{padding:.875rem .5rem;border:1.5px solid var(--paper-3);border-radius:5px;background:var(--paper);
  cursor:pointer;font-weight:650;color:var(--ink);min-height:52px;
  transition:border-color var(--t-fast),background var(--t-fast)}
.slot:hover{border-color:var(--green)}
.slot[aria-pressed=true]{border-color:var(--green);background:var(--green);color:oklch(97% .01 100)}
.bk__empty{padding:1.25rem;text-align:center;color:var(--ink-3);background:var(--paper-2);border-radius:5px}
.bk__load{display:flex;align-items:center;gap:.6rem;color:var(--ink-3);font-size:.9375rem}
.spin{width:16px;height:16px;border:2px solid var(--paper-3);border-top-color:var(--green);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:1.6s}}

/* ---------- content sections ---------- */
.sec{padding-block:clamp(2.5rem,7vh,4.5rem)}
.sec--band{background:var(--paper-2)}
.sec--dark{background:var(--green-deep);color:oklch(89% .014 110)}
.sec--dark h2,.sec--dark h3{color:oklch(97% .01 100)}
.sec--dark p{color:oklch(87% .014 110)}
.sec h2{font-size:clamp(1.625rem,4.4vw,2.5rem);line-height:1.1;letter-spacing:-0.02em;
  margin-bottom:.75rem}
.sec__lead{font-size:1.125rem;max-width:56ch}
.center{text-align:center}
.center .sec__lead{margin-inline:auto}

.pair{display:grid;gap:.75rem;margin-top:1.75rem}
@media (min-width:620px){.pair{grid-template-columns:1fr 1fr;gap:1rem}}
.pair figure{margin:0;position:relative;background:var(--paper-2);border-radius:5px;overflow:hidden}
.pair img{width:100%;height:auto}
.pair figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:oklch(96% .012 100);
  padding:.5rem .75rem;font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.pair figcaption .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}

.steps{display:grid;gap:0;margin-top:1.5rem}
.step{display:grid;gap:.3rem 1.25rem;padding-block:1.25rem;border-top:1px solid var(--paper-3)}
.sec--dark .step{border-color:oklch(38% .035 135)}
.step:last-child{border-bottom:1px solid var(--paper-3)}
.sec--dark .step:last-child{border-color:oklch(38% .035 135)}
.step .n{font-family:'Plex Mono',monospace;font-size:.76rem;letter-spacing:.1em;color:var(--accent-ink);font-weight:500}
.sec--dark .step .n{color:var(--accent)}
.step h3{font-size:1.0625rem;font-weight:700}
.step p{font-size:.9375rem}
@media (min-width:700px){.step{grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr);align-items:baseline}}

.faq{display:grid;gap:1rem;margin-top:1.5rem;max-width:70ch}
.faq h3{font-size:1.0625rem;margin-bottom:.25rem}
.faq p{font-size:.9375rem}

.ftr{background:var(--green-deep);color:oklch(86% .014 110);padding-block:2rem;font-size:.875rem}
.ftr a{color:oklch(92% .014 105)}
.ftr__in{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center}

/* reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-mid) var(--ease-q),transform var(--t-mid) var(--ease-q)}
.js .rv.is-in,.rv.is-in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ============================================================
   SETTER TOOL. Staff facing, denser than the funnel on purpose:
   this gets used twenty times a day, so it optimises for speed of
   operation rather than for persuasion.
   ============================================================ */
.set__top{margin-bottom:1.25rem}

/* running summary so the setter can see the whole booking at a glance */
.sum{
  position:sticky;top:68px;z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem;
  background:var(--paper-2);border:1px solid var(--paper-3);border-radius:5px;
  padding:.65rem .85rem;margin-bottom:1.5rem;
  font-size:.875rem;font-weight:650;color:var(--ink);
}
.sum__b--empty{color:var(--ink-3);font-weight:500}
.sum__sep{color:var(--paper-3);font-weight:400}

.set{border-top:1px solid var(--paper-3);padding-block:1.4rem}
.set--last{border-bottom:1px solid var(--paper-3)}
.set__h{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.set__n{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  background:var(--green);color:oklch(97% .01 100);
  display:grid;place-items:center;
  font-family:'Plex Mono',monospace;font-size:.75rem;font-weight:500;
}
.set__h h2{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.set__b{display:flex;flex-direction:column;gap:.75rem}
.set__note{font-size:.8438rem;color:var(--ink-3)}

.results{display:grid;gap:.4rem}
.res{
  display:grid;gap:.1rem;text-align:left;width:100%;cursor:pointer;
  padding:.7rem .85rem;border:1.5px solid var(--paper-3);border-radius:5px;
  background:var(--paper);transition:border-color var(--t-fast),background var(--t-fast);
}
.res:hover,.res:focus-visible{border-color:var(--green);background:var(--green-soft)}
.res__n{font-weight:700;color:var(--ink);font-size:.9375rem}
.res__m{font-size:.8125rem;color:var(--ink-3)}

.chosen{
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem .9rem;border-radius:5px;
  background:var(--green-soft);box-shadow:inset 0 0 0 1.5px var(--green);
}
.chosen__t{display:grid;gap:.1rem;min-width:0;flex:1 1 auto}
.chosen__t strong{color:var(--ink);font-size:.9375rem}
.chosen__t span{font-size:.8125rem;color:oklch(40% .04 130)}

.lnk{
  background:none;border:0;padding:.3rem 0;cursor:pointer;
  color:var(--green);font-weight:650;font-size:.875rem;text-align:left;
  text-decoration:underline;text-underline-offset:3px;
}
.lnk:hover{color:var(--ink)}
.lnk--block{align-self:flex-start}

.newc{display:grid;gap:.75rem;padding:.9rem;background:var(--paper-2);border-radius:5px}

.types{display:grid;gap:.6rem}
@media (min-width:560px){.types{grid-template-columns:1fr 1fr}}
.type{
  display:flex;align-items:center;gap:.8rem;cursor:pointer;text-align:left;
  padding:.9rem 1rem;border:1.5px solid var(--paper-3);border-radius:5px;
  background:var(--paper);min-height:64px;
  transition:border-color var(--t-fast),background var(--t-fast);
}
.type:hover{border-color:var(--green);background:var(--green-soft)}
.type[aria-pressed=true]{border-color:var(--green);background:var(--green-soft);
  box-shadow:inset 0 0 0 1px var(--green)}
.type__ic{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:5px;
  background:var(--paper-2);color:var(--green);
}
.type[aria-pressed=true] .type__ic{background:var(--green);color:oklch(97% .01 100)}
.type__ic svg{width:20px;height:20px}
.type__t{font-weight:700;color:var(--ink);font-size:.9375rem;line-height:1.25}
.type__t small{display:block;font-weight:500;font-size:.8125rem;color:var(--ink-3);margin-top:.1rem}
.type[aria-pressed=true] .type__t small{color:oklch(40% .04 130)}

.done{
  border:1px solid var(--paper-3);border-radius:6px;background:var(--card,var(--paper));
  padding:clamp(1.5rem,5vw,2.25rem);text-align:center;
  display:flex;flex-direction:column;gap:1rem;align-items:center;
  box-shadow:0 1px 2px oklch(21% .02 135/.04),0 12px 34px oklch(21% .02 135/.07);
}
.done:focus{outline:none}
.done__ic{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);color:var(--green);
}
.done__ic svg{width:26px;height:26px}
.done h2{font-size:1.5rem}
.done__dl{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;
  text-align:left;margin:0;width:100%;max-width:24rem;
}
.done__dl dt{
  font-family:'Plex Mono',monospace;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding-top:.15rem;
}
.done__dl dd{margin:0;color:var(--ink);font-weight:650;font-size:.9375rem}
.done .btn{margin-top:.5rem}


/* ---------- setter tabs ---------- */
.tabs{
  display:flex;gap:.25rem;padding:.25rem;margin-bottom:1.25rem;
  background:var(--paper-2);border:1px solid var(--paper-3);border-radius:6px;
}
.tab{
  flex:1 1 0;padding:.7rem .8rem;border:0;border-radius:4px;background:transparent;
  cursor:pointer;font-weight:650;font-size:.9375rem;color:var(--ink-3);
  transition:background var(--t-fast),color var(--t-fast);min-height:44px;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{
  background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px oklch(21% .02 135/.08),0 1px 1px oklch(21% .02 135/.04);
}

/* ---------- client brief ---------- */
.cb{display:flex;flex-direction:column;gap:1.1rem}

.cb__hd{
  display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;
  padding:1rem 1.15rem;background:var(--green-soft);border-radius:6px;
}
.cb__hd h2{font-size:1.125rem;font-weight:750;letter-spacing:-.015em}
.cb__hd p{font-size:.875rem;color:oklch(38% .05 132);margin-top:.15rem}
.cb__tel{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  background:var(--green);color:oklch(97% .01 100);padding:.6rem .9rem;border-radius:5px;
  font-weight:700;font-size:.9375rem;white-space:nowrap;
}
.cb__tel svg{width:15px;height:15px}

.cb__rules{display:grid;gap:.6rem}
@media (min-width:720px){.cb__rules{grid-template-columns:repeat(3,1fr)}}
.cbr{
  padding:.8rem .9rem;border-radius:6px;background:var(--paper);
  box-shadow:inset 0 0 0 1.5px oklch(55% .16 28 / .3);
}
.cbr__t{
  display:block;font-family:'Plex Mono',monospace;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:500;color:oklch(47% .17 27);margin-bottom:.3rem;
}
.cbr p{font-size:.8125rem;color:var(--ink-2);line-height:1.45}

.cb__grid{display:grid;gap:.85rem}
@media (min-width:820px){
  .cb__grid{grid-template-columns:1fr 1fr}
  .cbs--wide{grid-column:1 / -1}
}
.cbs{
  padding:1rem 1.15rem;background:var(--paper);border:1px solid var(--paper-3);border-radius:6px;
}
.cbs h3{
  font-family:'Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:var(--ink-3);margin-bottom:.7rem;
}
.cbs__note{
  font-size:.8125rem;color:var(--ink-3);line-height:1.5;margin-top:.75rem;
  padding-top:.7rem;border-top:1px solid var(--paper-3);
}
.cbs__note b{color:var(--ink-2)}

/* label plus value, stays readable at any width */
.kvl{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.kvl li{display:grid;gap:.05rem .9rem;font-size:.875rem;line-height:1.5}
@media (min-width:480px){.kvl li{grid-template-columns:6.5rem 1fr}}
.kvl b{
  font-family:'Plex Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding-top:.25rem;
}
.kvl span{color:var(--ink-2)}
.kvl--no span{color:var(--ink)}
.kvl--no b{color:oklch(47% .17 27)}

/* tick and cross list */
.tl{display:grid;gap:.42rem;margin:0;padding:0;list-style:none}
.tl li{
  position:relative;padding-left:1.5rem;font-size:.875rem;color:var(--ink-2);line-height:1.5;
}
.tl li b{color:var(--ink)}
.tl li::before{
  position:absolute;left:0;top:.05em;width:1rem;text-align:center;
  font-weight:700;font-size:.875rem;
}
.tl .yes::before{content:'\2713';color:var(--green)}
.tl .no::before{content:'\00d7';color:oklch(47% .17 27);font-size:1.05rem;line-height:1.15}
.tl .warn::before{content:'!';color:oklch(55% .15 55)}
.tl .no,.tl .warn{color:var(--ink)}

/* question and answer */
.qa{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
@media (min-width:620px){.qa li{display:grid;grid-template-columns:15rem 1fr;gap:.15rem 1rem}}
.qa li{font-size:.875rem;line-height:1.5}
.qa b{color:var(--ink);font-weight:700}
.qa span{color:var(--ink-2)}
.qa em{font-style:normal;font-weight:700;color:oklch(47% .17 27)}

/* his own words */
.qt{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}
.qt li{
  font-size:.875rem;color:var(--ink-2);line-height:1.5;
  padding-left:.85rem;box-shadow:inset 2px 0 0 var(--accent);
}
.qt li b{color:var(--ink)}


/* The setter can be anywhere in the world, so the grid says out loud which
   clock it is on. Times on this page are the customer's, never the device's. */
.set__tz{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:.9rem;padding:.5rem .7rem;
  border-left:2px solid var(--accent);
  background:var(--paper-2);
  font-family:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;letter-spacing:.055em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.45;
}