/* trestislogic.co.uk, shared by every page.
   Bright, precise paper with soft forest-tinted depth, and one dark section:
   the live demo's night desk, dark because the office has closed. Archivo
   variable only; headlines run wide (112 to 115) and heavy, body at 100.
   Radii follow hierarchy: stage 28, panels 24, tiles 18, controls 10.

   Contrast (WCAG 2.2), measured by a script over every pair:
   Paper: ink 15.09:1, forest 8.99:1, muted 5.37:1. Amber is graphics and
   focus only, never text: 3.0013:1 on paper (passes unrounded); on forest
   2.994:1, so forest surfaces use --amber-lift, 3.53:1.
   Night stage: paper 15.71:1, --on-night 8.82:1 (6.29:1 on the stage glow,
   5.99:1 on the end card, 5.75:1 on the sleeping duty card over the glow);
   duty note text 7.15:1, its time 5.57:1; office strip 9.65:1, its time
   7.52:1; firm-name field text 9.34:1, its border 3.84:1.
   Phone: ink on thread 15.29:1, muted 5.43:1 (4.83:1 on a text bubble).
   Lock hint (white at .72) 5.71:1 on the lock's lightest stop, 6.35:1 on
   its amber foot.
   Trust folds (phones): chevron 9.98:1 on a tile, 7.46:1 on the alert glow;
   amber ring 3.33:1 on a tile; the alert tile's ring is #E39A4B, 3.54:1 on
   its glow, since --amber-lift is 2.93:1 there.
   Log: ink on the highlight 12.62:1, on the flag 14.33:1.
   Ink on the amber button 5.94:1; muted on white 5.96:1.
   "It can also take on" panel: ink 14.16:1, forest heading 8.43:1, the
   tick 7.18:1 on its circle (the circle is decoration, 1.17:1).
   Forest bands: --on-forest 5.40:1 on the quiz glow, 4.75:1 on the alert
   tile and footer glows (so those glows stay at .55 alpha).
   Rings and borders (3:1 minimum): amber-lift 6.18:1 on night, 4.20:1 on
   the end card, 3.33:1 on the quiz glow; forest ring in the phone 9.10:1;
   pill border 4.46:1 on night, 3.84:1 on the stage glow; field border
   3.99:1. */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(/fonts/archivo.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --paper:#F1F4EE;
  --surface:#FFFFFF;
  --forest:#1F4A3D;
  --forest-2:#2B6150;
  --ink:#14201C;
  --muted:#5C6660;
  --rule:#D2D9CE;
  --line:rgba(31,74,61,.12);
  --field:#77827B;
  --amber:#C97A2B;
  --amber-lift:#D4893A;
  --on-forest:#B8C8BF;
  --night:#0C1D17;
  --night-2:#15302A;
  --on-night:#A9BDB3;

  --shadow-1:0 1px 2px rgba(20,48,40,.05),0 4px 14px -6px rgba(20,48,40,.10);
  --shadow-2:0 1px 2px rgba(20,48,40,.05),0 18px 40px -18px rgba(20,48,40,.24);
  --shadow-device:0 2px 3px rgba(0,0,0,.35),0 34px 70px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);

  --r-stage:28px;
  --r-panel:24px;
  --r-tile:18px;
  --r-ctl:10px;

  --font:'Archivo','Helvetica Neue',Arial,sans-serif;
  --wide:112%;

  --t-board:clamp(38px,5.6vw,72px);
  --t-h1:clamp(28px,4.6vw,40px);
  --t-h2:clamp(28px,3.6vw,44px);
  --t-h3:20px;
  --t-body:17px;
  --t-small:14.5px;

  --wrap:1200px;
  --wrap-text:760px;
  --gutter:24px;
  --target:44px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  font-weight:400;
  font-stretch:100%;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--forest)}
strong,b{font-weight:600}
img,svg{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Headlines */
h1,h2,h3,h4,.board{margin:0;color:var(--forest);line-height:1.1}
p{text-wrap:pretty}
.board{
  font-size:var(--t-board);font-stretch:var(--wide);font-weight:760;
  line-height:.98;letter-spacing:-.028em;
}
h1{font-size:var(--t-h1);font-stretch:110%;font-weight:720;letter-spacing:-.018em;margin-bottom:10px}
h2{font-size:var(--t-h2);font-stretch:110%;font-weight:720;letter-spacing:-.02em;line-height:1.05}
h3{font-size:var(--t-h3);font-stretch:105%;font-weight:650;line-height:1.2;letter-spacing:-.005em}
h4{font-size:16px;font-weight:650}
p,li{margin:0 0 1em}
ul,ol{padding-left:22px}

/* Layout */
.wrap{max-width:var(--wrap-text);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Header: sticky, frosted, with a hairline once the page scrolls */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(241,244,238,.86);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.site-header.scrolled,body:not(.home) .site-header{border-bottom-color:var(--line)}
.site-header.scrolled{box-shadow:0 8px 24px -18px rgba(20,48,40,.35)}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin:0 auto;padding:14px var(--gutter);
}
.logo{display:flex;align-items:center;width:170px;min-height:var(--target)}
.logo svg{display:block;width:100%;height:auto}
.back{
  display:inline-flex;align-items:center;min-height:var(--target);
  font-size:15px;font-weight:600;text-decoration:none;color:var(--forest);
}
.back:hover{text-decoration:underline}

/* Legal pages */
.doc main{padding:56px 0 72px}
.doc h2{font-size:var(--t-h3);font-stretch:105%;font-weight:680;letter-spacing:0;margin:40px 0 10px}
.updated{display:block;color:var(--muted);font-size:var(--t-small);margin-bottom:34px}

/* 404 */
.lost{display:flex;flex-direction:column;min-height:100vh}
.lost main{flex:1;padding:64px 0 72px}
.lost .code{color:var(--muted);font-size:var(--t-small);font-weight:600;margin:0 0 12px}
.lost h1{font-size:var(--t-board);font-stretch:var(--wide);font-weight:760;letter-spacing:-.028em;line-height:.98;margin-bottom:18px}
.links{margin-top:28px;padding-top:12px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:0 24px}
.links a{display:inline-flex;align-items:center;min-height:var(--target);font-weight:600}
.lost-foot{border-top:1px solid var(--rule);color:var(--muted);font-size:var(--t-small);padding:22px 0}
.sent h1{font-size:var(--t-h1);font-stretch:110%;font-weight:720;letter-spacing:-.018em;line-height:1.15;max-width:22em}

/* Footer on forest, with a glow */
.site-footer{
  background:radial-gradient(60% 120% at 0% 0%,rgba(43,97,80,.55),transparent 70%),var(--forest);
  color:var(--paper);padding:40px 0;
}
.site-footer .wrap{max-width:var(--wrap)}
.legal{
  display:flex;flex-wrap:wrap;gap:4px 20px;
  color:var(--on-forest);font-size:var(--t-small);line-height:1.6;
}
.legal span{display:inline-flex;align-items:center;min-height:var(--target)}
.legal a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--on-forest);text-decoration:none}
.legal a:hover{text-decoration:underline}

/* Focus */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.site-footer :focus-visible,.band :focus-visible,.stage :focus-visible,.t-alert :focus-visible{outline-color:var(--amber-lift)}

@media (max-width:680px){
  :root{--t-body:16px;--gutter:20px}
  .doc main{padding:40px 0 56px}
  .logo{width:145px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== Landing page ===== */
[hidden]{display:none!important}
html:not(.js) .js-only{display:none}
.home .logo{width:120px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--target);
  padding:10px 20px;border:1px solid var(--forest);border-radius:var(--r-ctl);
  background:var(--forest);color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(20,48,40,.25),0 6px 16px -8px rgba(31,74,61,.7);
  font:inherit;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,border-color .18s,color .18s;
}
.btn:hover{background:#245446;border-color:#245446;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{font-size:15px;padding:0 14px}
.btn-lg{min-height:52px;padding:12px 24px}
.btn-ghost{background:var(--surface);color:var(--forest);border-color:var(--line);box-shadow:var(--shadow-1)}
.btn-ghost:hover{background:var(--surface);border-color:rgba(31,74,61,.35)}
.btn-light{background:var(--paper);border-color:var(--paper);color:var(--forest);box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 20px -10px rgba(0,0,0,.5)}
.btn-light:hover{background:#fff;border-color:#fff}
.btn-ghost-light{background:transparent;border-color:rgba(241,244,238,.45);color:var(--paper);box-shadow:none}
.btn-ghost-light:hover{background:rgba(241,244,238,.1);border-color:var(--paper)}
.btn-amber{background:var(--amber-lift);border-color:var(--amber-lift);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -10px rgba(212,137,58,.8)}
.btn-amber:hover{background:#DD9750;border-color:#DD9750}
.btn-night{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.45);color:var(--paper);box-shadow:none}
.btn-night:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.btn[disabled]{opacity:.6;cursor:wait}
.text-link{display:inline-flex;align-items:center;min-height:var(--target);font-weight:600}

/* Header */
.hnav{display:flex;align-items:center;gap:4px}
.tel,.icon-link{display:inline-flex;align-items:center;gap:8px;min-width:var(--target);min-height:var(--target);justify-content:center;font-weight:600;text-decoration:none;border-radius:var(--r-ctl)}
.tel svg,.icon-link svg{width:22px;height:22px;fill:var(--forest)}
.icon-link:hover,.tel:hover{background:rgba(31,74,61,.06)}
.tel-num{display:none}
.hdr-cta{margin-left:6px}

/* Hero */
.hero{padding:44px 0 40px}
.hero .board{margin-bottom:22px;max-width:15em;text-wrap:balance}
.hero-row{display:grid;gap:4px 48px}
.who{font-size:18px;max-width:34em;margin-bottom:14px}
.ticks{list-style:none;padding:0;margin:0 0 26px}
.ticks li{position:relative;margin:0;padding:5px 0 5px 30px;font-weight:600}
.ticks li::before{
  content:"";position:absolute;left:5px;top:.55em;width:7px;height:13px;
  border:solid var(--amber);border-width:0 3px 3px 0;transform:rotate(45deg);
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-cta .text-link{margin-left:8px}

/* ===== The live demo: the desk after closing time ===== */
.demo-sec{padding:8px 0 24px}
.stage{
  position:relative;overflow:hidden;
  background:
    radial-gradient(55% 45% at 82% 8%,rgba(212,137,58,.16),transparent 70%),
    radial-gradient(60% 55% at 0% 100%,rgba(43,97,80,.42),transparent 72%),
    var(--night);
  color:var(--paper);
  border-radius:var(--r-stage);
  padding:40px;
  box-shadow:0 40px 80px -40px rgba(12,29,23,.7);
}
.stage::before{ /* the lamp: a faint warm pool across the top edge */
  content:"";position:absolute;left:50%;top:-1px;width:70%;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(212,137,58,.7),transparent);
}
.stage h2{color:var(--paper)}
.stage h3,.stage h4{color:var(--paper)}
.stage-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:28px}
.stage-head .sub{color:var(--on-night);margin:12px 0 0;max-width:36em}
.stage-label{
  margin:0;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  color:var(--on-night);font-size:13.5px;line-height:1.35;
}
.stage-label::before{flex:none;content:"";width:7px;height:7px;border-radius:50%;background:var(--amber-lift);box-shadow:0 0 10px var(--amber-lift)}

/* Picker and the playing bar */
.controls{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:20px;margin-bottom:24px;
}
.picker h3,.now h3{font-size:16px;font-stretch:100%;font-weight:600;letter-spacing:0;margin:0 0 12px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  min-height:var(--target);padding:0 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.04);color:var(--paper);
  font:inherit;font-size:15.5px;font-weight:500;cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s;
}
.pill:hover{background:rgba(255,255,255,.1)}
.pill[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--night);font-weight:600}
.firm-name{margin-top:18px;max-width:340px}
.firm-name label{display:block;margin:0 0 6px;color:var(--on-night);font-size:14px;font-weight:600}
.firm-name input{
  width:100%;min-height:var(--target);padding:0 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06);color:var(--paper);
  font:inherit;font-size:16px;
}
.firm-name input:focus{outline:2px solid var(--amber-lift);outline-offset:2px}
.firm-hint{margin:6px 0 0;color:var(--on-night);font-size:13px}
.pick-jobs{margin-top:20px}
.job-picks{display:grid;gap:8px}
.job-pick{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:52px;padding:12px 16px;text-align:left;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.06);color:var(--paper);
  font:inherit;font-size:16px;font-weight:600;line-height:1.3;cursor:pointer;
  transition:background-color .18s,border-color .18s,transform .18s var(--ease);
}
.job-pick:hover{background:rgba(255,255,255,.11);border-color:rgba(212,137,58,.6)}
.job-pick svg{flex:none;width:20px;height:20px;color:var(--amber-lift);transition:transform .18s var(--ease)}
.job-pick:hover svg{transform:translateX(3px)}
.now{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.now > div{flex:1}
.now h3{margin:0}
.now p{margin:0;color:var(--on-night);flex:1 1 20em}
.demo-error{margin:0;color:var(--paper);font-weight:600}

/* The desk */
.desk{display:grid;gap:28px}
.device-label{margin:0 0 10px;color:var(--on-night);font-size:13.5px;font-weight:600}

/* The customer's phone */
.phone-wrap{justify-self:center;width:100%;max-width:360px}
.phone{
  padding:9px;border-radius:46px;
  background:linear-gradient(160deg,#2A3934,#0B1411 60%);
  box-shadow:var(--shadow-device),inset 0 0 0 1px rgba(255,255,255,.1);
}
.screen{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  height:620px;border-radius:37px;
  background:#F3F5F2;color:var(--ink);
}
.screen :focus-visible,.screen .choice:focus,.screen input:focus,.screen select:focus{outline:2px solid var(--forest);outline-offset:2px}
.status{
  position:relative;z-index:3;flex:none;
  display:flex;align-items:center;justify-content:space-between;
  height:46px;padding:4px 26px 0 30px;font-size:14px;font-weight:650;color:var(--ink);
}
.screen:has(.lock:not([hidden])) .status{color:#fff}
.island{position:absolute;left:50%;top:10px;width:92px;height:26px;margin-left:-46px;border-radius:14px;background:#050908}
.sig{display:flex;align-items:flex-end;gap:2px;height:11px}
.sig i{display:block;width:3px;border-radius:1px;background:currentColor}
.sig i:nth-child(1){height:4px}.sig i:nth-child(2){height:6px}.sig i:nth-child(3){height:8px}.sig i:nth-child(4){height:11px}

.lock{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;padding-top:96px;
  background:
    radial-gradient(80% 50% at 50% 100%,rgba(212,137,58,.28),transparent 70%),
    linear-gradient(180deg,#244F42,#0E231C);
  color:#fff;
}
.lock p{margin:0}
.lock-day{font-size:17px;font-weight:500;opacity:.9}
.lock-time{font-size:76px;font-weight:300;font-stretch:100%;line-height:1;letter-spacing:-.02em}
.lock-hint{margin-top:18px!important;font-size:15px;font-weight:500;color:rgba(255,255,255,.72)}

.banner{
  position:absolute;z-index:4;left:10px;right:10px;top:50px;
  padding:10px 14px;border-radius:18px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -8px rgba(12,29,23,.45);
  font-size:13.5px;line-height:1.35;
  opacity:0;transform:translateY(-130%);pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s;
}
.banner.on{opacity:1;transform:none}
.banner strong{display:block;font-size:13px}
.banner span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}

.compose{flex:1;overflow:auto;padding:14px 20px 20px;background:#fff}
.compose h4{color:var(--ink);font-size:22px;font-stretch:108%;font-weight:700;margin:6px 0 16px}
.compose h4:focus{outline:none}
.cfield{margin-bottom:14px}
.cfield label{display:block;margin-bottom:5px;color:var(--muted);font-size:14px;font-weight:600}
.cfield input,.cfield select{
  display:block;width:100%;min-height:46px;padding:10px 12px;
  border:1px solid var(--field);border-radius:var(--r-ctl);background:#fff;color:var(--ink);
  font:inherit;font-size:16px;-webkit-appearance:none;appearance:none;
}
.select{position:relative;display:block}
.select select{padding-right:40px}
.select::after{
  content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;
  border:solid var(--forest);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none;
}
.compose-err{margin:0 0 12px;color:#9B2C1C;font-size:14.5px;font-weight:600}
.compose-err:empty{display:none}
.send{width:100%;min-height:50px;margin-top:4px}

.convo{flex:1;display:flex;flex-direction:column;min-height:0}
.convo-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-hd{
  flex:none;display:flex;align-items:center;gap:10px;padding:6px 16px 10px;
  border-bottom:1px solid var(--line);background:#fff;font-weight:650;font-size:15px;
}
.avatar{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--forest);color:var(--paper);font-size:12px;font-weight:700;
}
.thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:16px 12px}
.thread:focus{outline:none}
.thread:focus-visible{outline:2px solid var(--forest);outline-offset:-3px}
.msg{max-width:86%;padding:10px 13px;border-radius:18px;font-size:14.5px;line-height:1.42;animation:msgin .4s var(--ease) both}
.msg p{margin:0}
.msg .meta{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.msg-gap{align-self:center;margin:4px 0;padding:3px 10px;border-radius:999px;background:rgba(20,48,40,.08);color:var(--muted);font-size:12px;font-weight:600;animation:msgin .4s var(--ease) both}
.msg-out{align-self:flex-end;background:var(--forest);color:var(--paper);border-bottom-right-radius:6px}
.msg-out .meta{color:var(--on-forest);text-align:right}
.msg-email{align-self:stretch;max-width:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1)}
.mail-hd{display:flex;justify-content:space-between;gap:8px}
.mail-hd .meta{margin:0}
.mail-from{font-weight:700}
.mail-subj{font-weight:600;margin:2px 0 6px!important}
.msg-sms{align-self:flex-start;background:#E2E9E4;border-bottom-left-radius:6px}
.msg-copy{align-self:stretch;max-width:none;background:var(--paper);border:1px dashed var(--line);border-radius:14px;font-size:13.5px}
.copy-to{font-weight:700;color:var(--forest)}
/* WhatsApp: the enquiry games' other channel */
.convo.wa .convo-hd{background:#0B6E5F;color:#fff;border-bottom:0}
.screen:has(.convo.wa:not([hidden])) .status{background:#0B6E5F;color:#fff}
.convo.wa .avatar{background:#fff;color:#0B6E5F}
.convo.wa .thread{background:#EFEAE2}
.convo.wa .msg{border-radius:10px;box-shadow:0 1px 1px rgba(11,20,26,.12)}
.convo.wa .msg-out{background:#D9FDD3;color:var(--ink);border-top-right-radius:3px}
.convo.wa .msg-out .meta{color:#4F5B55}
.msg-wa{align-self:flex-start;background:#fff;border-top-left-radius:3px!important}
.msg-wa .meta{text-align:right}
.wa-ticks{width:16px;height:10px;margin-left:4px;vertical-align:-1px;color:#1F7FB0}
.convo.wa .msg-gap{background:rgba(255,255,255,.85);color:#4F5B55}
.convo.wa .msg-call{background:rgba(255,255,255,.85)}
.msg-call{align-self:center;background:#E7ECE8;color:#46504A;font-size:13.5px;font-weight:600;border-radius:999px;padding:6px 14px}
.reply{flex:none;padding:12px 12px 16px;background:#fff;border-top:1px solid var(--line)}
.ask{margin:0 0 8px;color:var(--muted);font-size:13.5px;font-weight:600}
.ask:focus{outline:none}
.ask:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.choices{display:grid;gap:8px}
.choice{
  width:100%;min-height:var(--target);padding:9px 14px;text-align:left;
  border:1.5px solid var(--forest);border-radius:14px;background:#fff;color:var(--forest);
  font:inherit;font-size:15px;font-weight:600;line-height:1.3;cursor:pointer;
  transition:background-color .15s,color .15s;
}
.choice:hover{background:var(--forest);color:var(--paper)}

/* Your office */
.office{display:grid;gap:16px;align-content:start;min-width:0}
.office > .device-label{margin:0 0 -6px}
.closed{
  padding:18px 20px;border-radius:var(--r-tile);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),var(--night-2);
  border:1px solid rgba(255,255,255,.08);
}
.closed p{margin:0}
.closed-clock{font-size:40px;font-weight:300;line-height:1.05;letter-spacing:-.01em;color:var(--paper)}
.closed-day{margin-top:6px!important;font-weight:600;color:var(--paper)}
.closed-hours{margin-top:4px!important;color:var(--on-night);font-size:13.5px;line-height:1.45}
/* The duty phone sleeps (flat, dim, a faint handset) until its first text
   wakes it; the lit gradient sits on ::before so it can fade in */
.duty{
  position:relative;display:flex;flex-direction:column;min-height:180px;padding:16px;border-radius:26px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  transition:border-color .4s,box-shadow .4s;
}
.duty::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(170deg,#23443A,#0F241D);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transition:opacity .4s;
}
.duty > *{position:relative}
.duty.woke{border-color:rgba(255,255,255,.12);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.duty.woke::before{opacity:1}
.duty:not(.woke) .notes{flex:1;place-items:center}
.duty:not(.woke) .duty-cap::before{display:none}
.duty:not(.woke) .notes::before{content:"";width:24px;height:40px;border:2px solid rgba(255,255,255,.16);border-radius:7px}
.duty.buzz{animation:buzz .5s linear 2}
.duty-cap{min-height:28px;margin:0 0 10px;color:var(--on-night);font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.duty-cap::before{content:"";width:18px;height:28px;border:2px solid currentColor;border-radius:5px;opacity:.8}
.notes{display:grid;gap:8px}
.note{
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
  font-size:14px;line-height:1.4;animation:msgin .45s var(--ease) both;
}
.note p{margin:0}
.note-hd{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:13px;margin-bottom:2px!important}
.note .meta{color:#CFDBD4;font-weight:500}
.log-card{
  container-type:inline-size;min-width:0;
  padding:16px 18px 8px;border-radius:var(--r-tile);
  background:var(--surface);color:var(--ink);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.7);
}
.log-card h4{color:var(--ink);margin:0 0 8px;font-size:15px}
.log{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.35}
.log th{padding:6px 8px 8px 0;text-align:left;color:var(--muted);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line)}
.log td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.log tr:last-child td{border-bottom:0}
.log .lit-row td,.log td.lit{animation:lit 2.6s ease-out both}
.log .new td:first-child{font-weight:650}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:#ECF0EB;color:var(--ink)}
.tag-go{background:#D3E8DB}
.tag-flag{background:#F7DDBD}
.flag-row td{padding:0 0 10px;border-bottom:1px solid var(--line);background:none}
.flag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:#FBEBD6;font-size:13px;font-weight:600;animation:msgin .45s var(--ease) both}
.flag svg{width:14px;height:14px;color:#A35F1C}
@container (max-width:600px){
  .log thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .log tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .log tr:last-child{border-bottom:0}
  .log td{padding:0;border:0}
  .log td::before{content:attr(data-label);display:block;color:var(--muted);font-size:11.5px;font-weight:600}
  .log .flag-row{padding-top:0}
  .log .flag-row td{grid-column:1/-1;padding:0}
  .log .flag-row td::before{content:none}
  .log .tag{white-space:normal}
}
@media (max-width:899px){.duty{min-height:96px}}

/* The office strip: below 900 the office sits under the phone, out of view
   while you play, so the latest thing it saw shows here too */
.strip{margin-top:18px}
.strip-card{
  border-radius:18px;overflow:hidden;
  background:linear-gradient(170deg,#23443A,#0F241D);border:1px solid rgba(255,255,255,.12);
  font-size:14px;line-height:1.4;
}
.strip-row{padding:12px 14px}
.strip-row + .strip-row{border-top:1px solid rgba(255,255,255,.1)}
.strip-row p{margin:0}
.strip-hd{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;margin-bottom:2px!important}
.strip-hd .meta{color:#CFDBD4;font-weight:500}
.strip-row .tag{margin-left:8px}
.strip-row .flag{margin-top:8px;color:var(--ink)}
.strip-row.ping{animation:msgin .45s var(--ease) both,edge 1.8s ease-out both}
@keyframes edge{0%,40%{box-shadow:inset 3px 0 0 var(--amber-lift)}100%{box-shadow:inset 3px 0 0 rgba(212,137,58,0)}}
@media (min-width:900px){.strip{display:none}}

/* The end card */
.endcard{
  margin-top:28px;padding:28px;border-radius:var(--r-panel);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--night-2);
  border:1px solid rgba(255,255,255,.12);
  animation:msgin .5s var(--ease) both;
}
.endcard h3{font-size:clamp(22px,2.6vw,28px);font-stretch:110%;font-weight:720;letter-spacing:-.015em;margin:0 0 18px}
.endcard h3:focus{outline:none}
.endcard h3:focus-visible{outline:2px solid var(--amber-lift);outline-offset:6px}
/* headings and prompts the demo moves focus to get a soft rounded ring that hugs the text */
#pick-firm-h,.ask,.endcard h3{width:fit-content;max-width:100%}
#pick-firm-h:focus-visible,.ask:focus-visible,.endcard h3:focus-visible{border-radius:10px}
.compare{width:100%;border-collapse:collapse;margin-bottom:14px}
.compare th,.compare td{padding:12px 16px 12px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid rgba(255,255,255,.1)}
.compare thead th{padding-top:0;font-size:14px;color:var(--paper);font-weight:600}
.compare thead th:nth-child(2){box-shadow:inset 0 -2px 0 var(--amber-lift)}
.compare tbody th{color:var(--on-night);font-weight:500;font-size:15px;width:26%}
.compare tbody td:nth-child(2){font-size:clamp(20px,2.4vw,26px);font-stretch:110%;font-weight:700;color:var(--paper);width:30%}
.compare tbody td:nth-child(3){color:var(--on-night)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare tbody td.end-words:nth-child(2){font-size:clamp(17px,1.7vw,20px);line-height:1.3}
.end-note{margin:0 0 20px;color:var(--on-night);font-size:13.5px}
.end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn-quiet{
  min-height:var(--target);padding:0 8px;border:0;background:none;color:var(--paper);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(241,244,238,.45);text-underline-offset:4px;
}
.btn-quiet:hover{text-decoration-color:currentColor}

@keyframes msgin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lit{0%,35%{background:rgba(212,137,58,.3)}100%{background:rgba(212,137,58,0)}}
@keyframes buzz{
  0%,100%{transform:none}
  20%{transform:translateX(-3px) rotate(-1deg)}
  40%{transform:translateX(3px) rotate(1deg)}
  60%{transform:translateX(-2px) rotate(-.5deg)}
  80%{transform:translateX(2px) rotate(.5deg)}
}

/* The slip: a day-book page of timed entries (quiz step c) */
.slip-label{font-size:var(--t-small);margin:0 0 8px}
.slip{
  background:#fff;color:var(--ink);padding:18px 22px 20px;border-radius:16px;
  box-shadow:inset 0 3px 0 var(--amber-lift),0 20px 40px -24px rgba(0,0,0,.6);
  font-size:15.5px;line-height:1.45;
}
.slip-hd{margin:0 0 8px;color:var(--forest);font-weight:700;font-stretch:110%}
.slip-rows{list-style:none;margin:0;padding:0}
.slip-rows li{display:grid;grid-template-columns:5.4em 1fr;gap:12px;margin:0;padding:8px 0;border-top:1px solid var(--line)}
.slip-rows .t{color:var(--muted)}
.slip-ft{margin:0;padding-top:10px;border-top:2px solid var(--forest);color:var(--forest);font-weight:600}
.slip.play .slip-rows li,.slip.play .slip-ft{opacity:0;animation:rowin .35s ease-out forwards}
.slip.play .slip-rows li:nth-child(1){animation-delay:.3s}
.slip.play .slip-rows li:nth-child(2){animation-delay:.9s}
.slip.play .slip-rows li:nth-child(3){animation-delay:1.5s}
.slip.play .slip-rows li:nth-child(4){animation-delay:2.1s}
.slip.play .slip-rows li:nth-child(5){animation-delay:2.7s}
.slip.play .slip-rows li:nth-child(6){animation-delay:3.3s}
.slip.play .slip-ft{animation-delay:3.4s}
@keyframes rowin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* The diagnostic band: forest with a glow, a raised glass panel */
.band{
  background:
    radial-gradient(55% 70% at 0% 0%,rgba(43,97,80,.95),transparent 70%),
    radial-gradient(45% 55% at 100% 100%,rgba(212,137,58,.13),transparent 70%),
    var(--forest);
  color:var(--paper);padding:88px var(--gutter);
}
.panel{
  max-width:720px;margin:0 auto;padding:40px 44px;
  background:rgba(10,30,24,.28);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -40px rgba(0,0,0,.55);
}
.band h2{color:var(--paper)}
.band .sub{color:var(--on-forest);margin:12px 0 0}
.band a{color:var(--paper)}
.band a.btn-light{color:var(--forest)}
.progress{position:relative;display:flex;justify-content:space-between;align-items:center;height:8px;margin:30px 0 8px;border-radius:999px;background:rgba(184,200,191,.2)}
.progress i{position:relative;z-index:1;width:8px;height:8px;border-radius:50%;background:rgba(184,200,191,.6)}
.progress-fill{position:absolute;left:0;top:0;height:8px;width:8px;border-radius:999px;background:linear-gradient(90deg,var(--amber-lift),#E6A864);transition:width .45s var(--ease)}
.panel[data-step="2"] .progress-fill{width:25%}
.panel[data-step="3"] .progress-fill{width:50%}
.panel[data-step="4"] .progress-fill{width:75%}
.panel[data-step="5"] .progress-fill{width:100%}
.progress-meta{display:flex;justify-content:space-between;gap:12px;margin:0 0 20px;color:var(--on-forest);font-size:var(--t-small)}
.progress-meta p{margin:0}
.progress-meta[hidden]{display:none}
.band form{margin-top:28px}
.js .band form{margin-top:0}
.step{border:0;padding:0;margin:0 0 32px;min-width:0}
.js .step{display:none;margin-bottom:20px}
.js .step.is-current{display:block;animation:rowin .35s var(--ease)}
.step legend{padding:0;margin-bottom:14px}
.step-h{color:var(--paper);font-size:22px}
.step-h:focus{outline:none}
.options{display:grid;gap:8px}
.opt{
  display:flex;align-items:center;gap:14px;min-height:54px;padding:10px 16px;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.04);
  cursor:pointer;line-height:1.35;transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--amber-lift)}
/* WebKit drops :focus-visible when arrow keys move between radios, so radios ring on :focus */
.opt input:focus{outline:2px solid var(--amber-lift);outline-offset:3px}
.opt:hover{background:rgba(255,255,255,.08)}
.opt:has(input:checked){background:rgba(241,244,238,.12);border-color:var(--amber-lift);box-shadow:inset 0 0 0 1px var(--amber-lift);font-weight:600}
.unsure-note{margin-top:20px}
.unsure-note p{margin-bottom:12px}
.band .slip-label{color:var(--on-forest)}
.slider{margin-bottom:20px}
.slider label{display:block;font-weight:600}
.slider-row{display:flex;align-items:center;gap:16px}
.slider-row output{min-width:3.6em;text-align:right;font-weight:700;font-size:22px;font-stretch:110%}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:var(--target);margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--on-forest)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--amber-lift);border:3px solid var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s var(--ease)}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--on-forest)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--amber-lift);border:3px solid var(--paper)}
.estimate{border-top:1px solid rgba(184,200,191,.3);padding-top:18px;margin-top:6px}
.est-lead{margin:0 0 4px;color:var(--on-forest)}
.estimate ul{list-style:none;padding:0;margin:0 0 10px}
.estimate li{margin:0;font-size:24px;font-weight:720;font-stretch:112%;letter-spacing:-.01em;line-height:1.25}
.est-hours{margin:0;font-weight:600}
.est-fee{margin:8px 0 0}
.fine{color:var(--on-forest);font-size:var(--t-small);margin:12px 0 0}
.fields{display:grid;gap:14px;margin:18px 0 22px}
.field span{display:block;font-weight:600;margin-bottom:5px}
.field input,.fee input{
  width:100%;min-height:48px;padding:10px 12px;border:1px solid #fff;border-radius:var(--r-ctl);
  background:#fff;color:var(--ink);font:inherit;
}
.fee{margin-bottom:20px}
.fee label{display:block;font-weight:600;margin-bottom:5px}
.fee-row{position:relative;max-width:12em}
.fee-pre{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.fee input{padding-left:28px}
.form-error{margin:0;font-weight:600}
.form-error:empty{display:none}
.step-nav{display:flex;gap:12px;margin-top:8px}
.step-nav #step-next{margin-left:auto}
.success p{font-size:20px;font-weight:600;margin:28px 0 0}
.success:focus{outline:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Sections on paper */
.section{padding:88px 0}
.section-head{margin-bottom:32px;max-width:48em}
.section .sub{color:var(--muted);font-size:18px;margin:12px 0 0;max-width:40em}

/* The jobs */
.switch{display:inline-flex;flex-wrap:wrap;gap:4px;margin:0 0 24px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-1)}
.switch button{
  min-height:var(--target);padding:0 18px;border:0;border-radius:999px;
  background:transparent;color:var(--forest);font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;
  transition:background-color .2s,color .2s;
}
.switch button:hover{background:rgba(31,74,61,.07)}
.switch button[aria-pressed="true"]{background:var(--forest);color:var(--paper)}
@media (max-width:519px){
  .switch{display:grid;grid-template-columns:repeat(2,1fr);border-radius:18px}
  .switch button{padding:6px 8px;border-radius:14px;font-size:14.5px;line-height:1.2}
}
.job-list{display:grid;gap:16px;align-items:start}
.job{
  display:flex;flex-direction:column;gap:14px;min-width:0;
  padding:26px 28px 18px;border:1px solid var(--line);border-radius:var(--r-tile);
  background:var(--surface);box-shadow:var(--shadow-1);
}
.job h3,.job p{margin:0}
.quote{font-size:18px;line-height:1.45;color:var(--ink)}
.ba{margin:0;display:grid}
.ba > div{display:grid;grid-template-columns:5.6em 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ba dt{color:var(--muted);font-size:var(--t-small);font-weight:600;padding-top:1px}
.ba dd{margin:0;font-size:15.5px;line-height:1.45}
.ba-with dt{color:var(--forest)}
.ba-with dd{color:var(--forest);font-weight:600}
.ba .v-agent,.ba .v-broker{display:block}
.job details{margin-top:auto;border-top:1px solid var(--line)}
.job summary{
  display:flex;align-items:center;justify-content:space-between;min-height:var(--target);
  list-style:none;cursor:pointer;font-weight:600;color:var(--forest);font-size:15.5px;
}
.job summary::-webkit-details-marker{display:none}
.job summary::after{
  content:"";width:9px;height:9px;margin-right:6px;
  border:solid var(--forest);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.job details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.handled{padding:4px 0 10px;font-size:15.5px}
.handled p + p{margin-top:6px}
.handled .lbl + p{margin-top:2px}
.handled p + .lbl{margin-top:14px}
.lbl{color:var(--muted);font-size:var(--t-small);font-weight:600}
.v-tag{font-weight:600}
.js .v-tag{display:none}
.js .job-list[data-sector="estate"] [data-sectors]:not([data-sectors~="estate"]),
.js .job-list[data-sector="letting"] [data-sectors]:not([data-sectors~="letting"]),
.js .job-list[data-sector="broker"] [data-sectors]:not([data-sectors~="broker"]),
.js .job-list[data-sector="adviser"] [data-sectors]:not([data-sectors~="adviser"]){display:none}
.js .job-list[data-sector="broker"] .v-agent,
.js .job-list:not([data-sector="broker"]) .v-broker{display:none}
.feature{padding:32px 32px 18px}
.feature .job-main{display:flex;flex-direction:column;gap:14px}
.feature .quote{font-size:clamp(19px,2vw,23px);line-height:1.35;font-weight:500;max-width:22em}
.ba-big{grid-template-columns:1fr 1fr;gap:0 24px}
.ba-big > div{display:flex;flex-direction:column;gap:4px;grid-template-columns:none;padding:16px 0 4px}
.ba-big dd{display:flex;flex-direction:column}
.ba-lead{font-size:15px;font-weight:500;color:var(--muted)}
.ba-with .ba-lead{color:var(--forest)}
.fig{white-space:nowrap;font-size:clamp(40px,5vw,64px);font-stretch:115%;font-weight:700;letter-spacing:-.03em;line-height:1}
.ba-without .fig{color:var(--muted);font-weight:600}
.fca{margin:0;padding:14px 18px;border-radius:12px;background:rgba(31,74,61,.06);font-size:var(--t-small)}
/* secondary jobs: lighter than the tiles (tint, no shadow), ticked, on a grid */
.also{margin-top:28px;padding:24px 28px 26px;border:1px solid var(--line);border-radius:var(--r-tile);background:rgba(31,74,61,.04)}
.also h3{font-size:19px;font-stretch:108%;font-weight:680;letter-spacing:-.01em}
.also ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px 28px}
.also li{position:relative;margin:0;padding:1px 0 0 34px;min-height:22px;font-size:15.5px;line-height:1.4;color:var(--ink)}
.also li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:rgba(31,74,61,.1)}
.also li::after{
  content:"";position:absolute;left:8px;top:5px;width:5px;height:9px;
  border:solid var(--forest);border-width:0 2px 2px 0;transform:rotate(45deg);
}
@media (min-width:600px){.also ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.also ul{grid-template-columns:repeat(4,1fr)}}

/* How it goes */
.how{padding-top:96px}
.stats{margin:0 0 48px;display:grid;gap:0}
.stats > div{display:flex;flex-direction:column-reverse;gap:4px;padding:18px 0;border-top:1px solid var(--line)}
.stats dt{color:var(--muted);font-size:15px}
.stats dd{margin:0;color:var(--forest);font-size:clamp(34px,3.6vw,46px);font-stretch:115%;font-weight:700;letter-spacing:-.03em;line-height:1}
.timeline{list-style:none;padding:0;margin:0 0 24px;counter-reset:step}
.timeline li{position:relative;margin:0;padding:3px 0 26px 50px;counter-increment:step}
.timeline li::before{
  content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--forest);color:var(--paper);font-weight:700;font-stretch:110%;font-size:15px;
  box-shadow:0 0 0 5px var(--paper);
}
.timeline li::after{content:"";position:absolute;left:15px;top:38px;bottom:4px;width:2px;background:var(--rule)}
.timeline li:last-child::after{display:none}
.founding{display:inline-block;margin:0;padding:10px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--forest);font-weight:600;box-shadow:var(--shadow-1)}

/* Bento tiles: trust, and "Why not just use what you've got?" */
.bento{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.tile{
  margin:0;min-width:0;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r-tile);
  background:var(--surface);box-shadow:var(--shadow-1);
}
.tile p{margin:0}
.tile p + p,.tile .stmt + p{margin-top:8px}
.fold{display:flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;gap:12px;margin:-10px 0;padding:10px 0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.fold svg{flex:none;width:22px;height:22px;transition:transform .2s ease}
.fold[aria-expanded="true"] svg{transform:rotate(180deg)}
.tile.open .fold{margin-bottom:-4px}
.t-alert .fold:focus-visible{outline-color:#E39A4B}
.stmt{font-size:21px;font-stretch:108%;font-weight:680;letter-spacing:-.01em;line-height:1.22;color:var(--forest)}
.t-alert{
  background:radial-gradient(70% 90% at 0% 0%,rgba(43,97,80,.55),transparent 70%),var(--forest);
  border-color:var(--forest);color:var(--on-forest);box-shadow:var(--shadow-2);
}
.t-alert .stmt{color:var(--paper);font-size:clamp(24px,2.6vw,32px)}
.t-ico{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.t-ico p + p{margin-top:0}
.shield{width:36px;height:36px;color:var(--forest)}
.t-ico p{font-weight:600;line-height:1.35}
.ico-no{padding:5px 14px;border:1.5px solid var(--forest);border-radius:999px;color:var(--forest);font-stretch:112%;font-weight:700;letter-spacing:.04em}
.t-data h3{font-size:clamp(22px,2.4vw,28px);font-stretch:110%;font-weight:720;letter-spacing:-.015em}
.tile-sub{color:var(--muted);margin:8px 0 18px!important}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:0 32px}
.checks li{position:relative;margin:0;padding:10px 0 10px 30px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45}
.checks li::before{
  content:"";position:absolute;left:6px;top:15px;width:6px;height:11px;
  border:solid var(--forest);border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* Close */
.close{padding-top:24px}
.close-panel{
  padding:48px;border-radius:var(--r-panel);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-2);
}
.close-panel .sub{margin-bottom:28px}
.contact{display:flex;flex-direction:column;gap:12px;max-width:420px}
.wa-btn svg{flex:none;width:22px;height:22px;fill:currentColor}
/* in the close it sits under buttons, so it drops the pill that would read as one */
.close-panel .founding{display:flex;align-items:center;gap:10px;margin-top:24px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.close-panel .founding::before{flex:none;content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}

/* Footer on the home page */
.foot-area{color:var(--on-forest);font-size:var(--t-small);margin:0 0 6px}

/* The floating WhatsApp button, phones only */
.wa-float{display:none}

/* Scroll reveals: set up by main.js only when motion is welcome */
.reveals .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveals .reveal:not(.in){opacity:0;transform:translateY(8px)}

@media (max-width:419px){
  .hdr-cta{display:none}
}
@media (max-width:679px){
  .home .site-footer{padding-bottom:124px}
  .wa-float{
    display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:30;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
    width:56px;height:56px;border-radius:50%;
    background:var(--forest);box-shadow:0 10px 28px -8px rgba(12,29,23,.7),inset 0 1px 0 rgba(255,255,255,.15);
    transition:opacity .25s,transform .25s var(--ease),visibility .25s;
  }
  .wa-float svg{width:28px;height:28px;fill:#fff}
  .wa-float.away{opacity:0;visibility:hidden;transform:translateY(12px) scale(.9)}
  .demo-sec .wrap-wide{padding:0}
  .stage{border-radius:0;padding:32px var(--gutter) 28px}
  .controls{padding:16px}
  .band{padding:56px 12px}
  .panel{padding:28px 20px}
  .section{padding:64px 0}
  .job,.tile{padding:22px 20px}
  .also{padding:20px 20px 22px}
  .feature{padding:24px 20px 14px}
  .ba-big{grid-template-columns:1fr}
  .close-panel{padding:28px 20px}
  .endcard{padding:22px 18px}
  .compare,.compare thead,.compare tbody{display:block}
  .compare tr{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;border-bottom:1px solid rgba(255,255,255,.1);align-items:baseline}
  .compare tr:last-child{border-bottom:0}
  .compare th,.compare td{padding:0;border:0;width:auto!important}
  .compare thead td{display:none}
  .compare thead th{padding-bottom:8px}
  .compare tbody tr{padding:9px 0}
  .compare tbody th{grid-column:1/-1;margin-bottom:2px;font-size:14px}
  .compare tbody td:nth-child(2){font-size:22px}
  .compare tbody td.end-words:nth-child(2){font-size:17px}
  .endcard h3{margin-bottom:12px}
}
@media (min-width:680px){
  .tel-num{display:inline}
  .contact{flex-direction:row;flex-wrap:wrap;max-width:none}
  .stats{grid-template-columns:repeat(3,1fr);gap:24px}
  .checks{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .t-8,.t-end{grid-column:span 2} /* the trust grid's odd last tile fills its row */
}
@media (min-width:780px){
  .job-list{grid-template-columns:1fr 1fr}
  .job.feature,.job.span,.fca{grid-column:1/-1}
}
@media (min-width:900px){
  .hero{padding:72px 0 64px}
  .hero-row{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .who{font-size:19px;margin-bottom:28px}
  .ticks{padding-left:28px;border-left:1px solid var(--line)}
  .hero-cta{margin-top:4px}
  .picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:0 32px;align-items:start}
  #pick-firm-h{grid-column:1;grid-row:1}
  #pick-firms{grid-column:1;grid-row:2}
  .firm-name{grid-column:1;grid-row:3}
  .pick-jobs{grid-column:2;grid-row:1 / span 3;margin-top:0}
  .desk{grid-template-columns:340px minmax(0,1fr);gap:32px;align-items:start}
  .phone-wrap{justify-self:stretch}
  .screen{height:640px}
  .office{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .office > .device-label,.log-card{grid-column:1/-1}
  .timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
  .timeline li{padding:48px 0 0}
  .timeline li::after{left:44px;right:-16px;top:15px;bottom:auto;width:auto;height:2px}
  .bento{grid-template-columns:repeat(12,1fr)}
  .t-4{grid-column:span 4}
  .t-8{grid-column:span 8}
  .t-6{grid-column:span 6}
  /* trust grid: data beside CRM and Your words, so neither stretches */
  .t-data{grid-row:span 2}
  .stats > div{padding-top:22px;border-top:2px solid var(--forest)}
}