/* self-hosted faces - latin subset, woff2, swap */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/archivo-latin.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}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.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{
  /* page — light, warm neutral with a faint green bias */
  --page:#F7F8F6; --page-2:#EFF2EF; --card:#FFFFFF; --card-2:#F4F6F4;
  --line:#E1E6E2; --line-2:#CCD5D0;
  /* brand */
  --ink:#123A31; --ink-h:#0D2C25;              /* deep green: primary button, logo */
  --brass:#D9A441; --brass-ink:#875E10; --brass-soft:#FAF2DF; --brass-line:#E8CE93;
  --teal:#17705E; --teal-soft:#E6F4F0; --teal-line:#A9D9CC;
  --rose:#A93B27; --rose-soft:#FBEDEA; --rose-line:#EBBFB6;
  /* text */
  --text:#10201C; --text-2:#4C5C57; --text-3:#5B6A65;
  /* product screens stay dark on purpose */
  --s-bg:#0B1512; --s-bg2:#122019; --s-line:#243A32; --s-line2:#314C42;
  --s-text:#ECF3F0; --s-text2:#9FB2AC; --s-text3:#7C8F89; --s-brass:#E7B65C; --s-mint:#6FDCC0; --s-rose:#EE8873;
  --display:'Archivo','Archivo Fallback','Helvetica Neue',Arial,sans-serif;
  --body:'Inter','Inter Fallback','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono','Consolas',monospace;
  /* type scale - every size on the site comes from here */
  --t-3xl:clamp(2.6rem,6vw,4.2rem);   --t-2xl:clamp(2rem,4.2vw,3.1rem);
  --t-xl:clamp(1.45rem,2.6vw,2.05rem); --t-lg:1.25rem; --t-md:1.08rem;
  --t-base:16.5px; --t-sm:15px; --t-xs:13.5px; --t-2xs:11.5px;
  /* on-ink: the palette every dark surface was reinventing for itself */
  --on-ink:#FFFFFF; --on-ink-2:#C7D6D0; --on-ink-3:#A9C4BC;
  --on-ink-line:#28453C; --on-ink-accent:#E9C87E; --on-ink-deep:#0B2A23;
  --sand:#F6F1E7; --sand-2:#EFE8D9;
  /* --line-3 is for control boundaries only: 1.4.11 wants 3:1, --line-2 is 1.5:1 */
  --line-3:#7E8F89;
  /* 4px spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --wrap:1180px; --r-pill:100px; --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --sh:0 18px 44px -22px rgba(18,58,49,.28);
  --sh-s:0 2px 6px -2px rgba(18,58,49,.10);

  /* ---- motion scales -------------------------------------------------
     Two, and a fence between them. --m is the default and is used by
     everything. --m-big is the feature scale and is allowed in exactly three
     places: h2.dsp, .till and .tl. Anything else reaching for it is a mistake -
     "cinematic where relevant" becomes cinematic everywhere within a few
     months unless the exceptions stay enumerable. */
  --m:180ms; --m-in:240ms; --e:cubic-bezier(.2,.8,.2,1);
  --m-travel:10px; --m-stagger:40ms;
  --m-big:520ms; --e-big:cubic-bezier(.16,1,.3,1); --m-travel-big:28px;
  /* lets height transition to and from auto where supported; without it the
     FAQ accordion can only snap. Inert everywhere else. */
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box}
body{background:var(--page);color:var(--text);font-family:var(--body);font-size:var(--t-base);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%} a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.06;letter-spacing:-.022em;text-wrap:balance;font-weight:800;color:var(--text)}
p{margin:0} ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.hero-field :focus-visible,.sec.deep :focus-visible,.till :focus-visible,.bezel :focus-visible{outline-color:var(--on-ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--brass-line)}
.eyebrow.center{justify-content:center}
h1{font-size:clamp(2.4rem,5.8vw,3.9rem);font-weight:900}
h2{font-size:clamp(1.85rem,3.7vw,2.7rem)}
h3{font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
.lede{color:var(--text-2);font-size:clamp(1.02rem,1.5vw,1.15rem);max-width:56ch}
.muted{color:var(--text-2)}
.sec{padding:clamp(56px,7.5vw,96px) 0;border-top:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:62ch}
.sec-head.center{margin:0 auto;align-items:center;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15px;padding:13px 22px;border-radius:var(--r-s);border:1px solid transparent;cursor:pointer;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--on-ink);box-shadow:0 8px 20px -10px rgba(18,58,49,.5)}
.btn-primary:hover{background:var(--ink-h)}
.btn-ghost{border-color:var(--line-3);color:var(--text);background:var(--card)}
.btn-ghost:hover{border-color:var(--ink);box-shadow:var(--sh-s)}
.btn-lg{padding:16px 28px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:560px){.btn-row{width:100%}.btn-row .btn{flex:1 1 46%}}

.hdr{position:sticky;top:0;z-index:60;background:rgba(247,248,246,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:70px}
/* ---- wordmark ----
   The word is display type, the number is mono with tabular figures, because on
   this site every figure is mono. The brass hyphen is the join, and it is the
   only piece of colour in the mark at header size. */
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--text);text-decoration:none}
.logo-g{flex:none;border-radius:8px}
.wm{display:inline-flex;align-items:baseline;line-height:1}
.wm-w{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.045em;
  color:var(--ink)}
.wm-h{font-family:var(--display);font-weight:800;font-size:20px;color:var(--brass);
  margin:0 .06em;letter-spacing:-.02em}
.wm-n{font-family:var(--mono);font-weight:500;font-size:18px;letter-spacing:-.01em;
  color:var(--brass-ink);font-variant-numeric:tabular-nums}
.logo:hover .wm-h{color:var(--brass-ink)}
/* the footer carries it a size up, where the mark has room to breathe */
.logo-lg .wm-w,.logo-lg .wm-h{font-size:23px}
.logo-lg .wm-n{font-size:20.5px}
.logo-lg .logo-g{width:32px;height:32px}
/* on ink, the word flips to the light tone and the number keeps the brass */
.sec.deep .logo .wm-w,.hero-field .logo .wm-w{color:var(--on-ink)}
.sec.deep .logo .wm-n,.hero-field .logo .wm-n{color:var(--on-ink-accent)}


.nav{display:flex;gap:4px;margin-left:8px}
.nav a{font-size:14.5px;font-weight:500;color:var(--text-2);padding:8px 12px;border-radius:var(--r-s);transition:.15s}
.nav a:hover{color:var(--text);background:var(--page-2)}
.nav a.on{color:var(--ink);background:var(--teal-soft)}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.tel{font-family:var(--mono);font-size:13.5px;color:var(--text-2)}
.tel:hover{color:var(--ink)}
.burger{display:none;margin-left:auto;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-s);width:42px;height:38px;cursor:pointer;color:var(--text);align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}
.mnav{display:none;border-bottom:1px solid var(--line);background:var(--card);padding:12px 0 20px}
.mnav.open{display:block}
.mnav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}
.mnav .btn{margin-top:16px;width:100%}
/* six nav items measure 593px: below ~1040 the header CTA overflows */
@media(max-width:1040px){.nav,.hdr-cta{display:none}.burger{display:flex}}

/* ---- product screens: deliberately dark ---- */
.till-shell{display:flex;flex-direction:column;gap:12px;min-width:0}
.mode-row{display:flex;gap:4px;padding:4px;background:var(--page-2);border:1px solid var(--line);border-radius:var(--r-s);width:fit-content;max-width:100%}
.mode{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:4px;background:none;border:0;color:var(--text-3);cursor:pointer;transition:.15s;white-space:nowrap}
.mode:hover{color:var(--text)}
.mode[aria-selected="true"]{background:var(--ink);color:var(--on-ink);font-weight:600}
.till{background:var(--s-bg);border:1px solid var(--s-line);border-radius:var(--r-m);box-shadow:var(--sh);overflow:hidden;min-width:0;color:var(--s-text)}
.till-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--s-line);font-family:var(--mono);font-size:11.5px;color:var(--s-text3);letter-spacing:.04em}
/* The ring is a pseudo-element scaling and fading, not a growing box-shadow.
   A box-shadow keyframe repaints every frame for as long as it runs, and this
   one runs forever on 38 elements across all 36 pages. transform and opacity
   composite instead, so the same effect costs the main thread nothing. */
.dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--s-mint);flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--s-mint);animation:pulse 2.6s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3.2);opacity:0}}
.till-bar .sp{margin-left:auto}
.till-body{padding:16px;display:grid;gap:14px}
.till-panel[hidden]{display:none}
.till-panel{display:grid;gap:13px}
.till-field{display:flex;align-items:center;gap:10px;background:var(--s-bg2);border:1px solid var(--s-line);border-radius:var(--r-s);padding:11px 13px;font-family:var(--mono);font-size:13px;color:var(--s-text3)}
.till-field b{color:var(--s-text);font-weight:400}
.lines{border:1px solid var(--s-line);border-radius:var(--r-s);overflow:hidden}
.line{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 13px;border-bottom:1px solid var(--s-line);font-size:14px;color:var(--s-text)}
.line:last-child{border-bottom:0}
.line .sku{font-family:var(--mono);font-size:11px;color:var(--s-text3);letter-spacing:.05em;display:block;margin-top:2px}
.line .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--s-text)}
.till-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:4px}
.total{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--s-text)}
.total .lbl{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-text3)}
.total .val{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.05rem);font-weight:800;letter-spacing:-.03em;color:var(--s-text)}
.flag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:100px;border:1px solid}
.flag.warn{color:var(--s-brass);border-color:#6b5220;background:rgba(231,182,92,.1)}
.flag.ok{color:var(--s-mint);border-color:#25604f;background:rgba(111,220,192,.1)}
.flag.hot{color:var(--s-rose);border-color:#6d3129;background:rgba(238,136,115,.1)}

.stat .k{font-family:var(--display);font-size:clamp(1.35rem,2.5vw,1.8rem);font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.stat .v{font-size:14px;color:var(--text-2)}

.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:40px;border-top:1px solid var(--line)}
.f{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.f .ic{width:40px;height:40px;border-radius:10px;border:1px solid var(--brass-line);display:flex;align-items:center;justify-content:center;background:var(--brass-soft);color:var(--brass-ink)}
.f h3{margin-bottom:5px}
.f p{font-size:14.5px;color:var(--text-2)}
@media(max-width:820px){.feat{grid-template-columns:1fr;gap:0}}

.booker{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);align-items:center;margin-top:36px}
@media(max-width:900px){.booker{grid-template-columns:1fr}}
.checklist{display:grid;gap:14px;margin-top:26px}
.checklist li{display:grid;grid-template-columns:20px 1fr;gap:13px;font-size:15px;color:var(--text-2)}
.checklist .m{color:var(--teal);font-family:var(--mono);font-size:13px;line-height:1.5}
.checklist b{color:var(--text);font-weight:600}
.sym{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.sym span{font-family:var(--display);font-weight:800;font-size:14px;padding:9px 16px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--card);color:var(--text);box-shadow:var(--sh-s)}
.flow{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-s)}
.fl{background:var(--card);padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.fl .s{font-family:var(--mono);font-size:11px;color:var(--brass-ink);letter-spacing:.1em}
.fl .t{font-size:14.5px}
.fl .t small{display:block;font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.04em;margin-top:3px}
.fl .z{font-family:var(--mono);font-size:11px;color:var(--teal);letter-spacing:.06em}

.ind .chips{margin-top:0}
.ind .chip{font-size:12px;padding:7px 12px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chip{font-family:var(--mono);font-size:12.5px;padding:8px 14px;border-radius:100px;border:1px solid var(--line-2);color:var(--text-2);background:var(--card)}

.hw{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.hwc{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);box-shadow:var(--sh-s)}
.dev{height:132px;border-radius:var(--r-s);background:var(--s-bg);border:1px solid var(--s-line);display:flex;align-items:center;justify-content:center;padding:16px}
.screen{width:100%;height:100%;border-radius:5px;border:1px solid var(--s-line2);background:var(--s-bg2);position:relative;overflow:hidden}
.screen::after{content:"";position:absolute;left:10%;right:10%;top:22%;height:2px;background:var(--s-brass);box-shadow:0 9px 0 0 rgba(111,220,192,.45),0 18px 0 0 rgba(255,255,255,.12),0 27px 0 0 rgba(255,255,255,.08)}
.dev.hand .screen{width:52%;border-radius:9px}
.dev.kds .screen{height:78%}
.dev.kiosk .screen{width:60%;height:100%;border-radius:8px}
.hwc h3{font-size:1.05rem}
.hwc p{font-size:14px;color:var(--text-2)}
.hwc .spec{font-family:var(--mono);font-size:11.5px;color:var(--text-3);letter-spacing:.04em;border-top:1px solid var(--line);padding-top:11px;margin-top:auto}
@media(max-width:960px){.hw{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hw{grid-template-columns:1fr}}

.plan{display:flex;flex-direction:column;gap:18px;padding:30px 26px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card);box-shadow:var(--sh-s)}
.plan.hero-plan{border-color:var(--brass-line);background:linear-gradient(180deg,var(--brass-soft),var(--card) 42%);box-shadow:var(--sh)}
.plan .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink)}
.plan .price{font-family:var(--mono);font-size:2.4rem;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink)}
.plan .price small{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--text-3);letter-spacing:.04em;display:block;margin-top:4px}
.plan ul{display:grid;gap:10px;font-size:14.5px;color:var(--text-2)}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;border-left:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:rotate(-45deg)}
.plan .btn{width:100%;margin-top:auto}

.tw{overflow-x:auto;margin-top:36px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);background:var(--page-2)}
td:not(:first-child){font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text-2)}
tr:last-child td{border-bottom:0}
.srcs{margin-top:22px;font-family:var(--mono);font-size:11.5px;line-height:1.95;color:var(--text-3)}
.srcs a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.srcs a:hover{color:var(--ink)}

.asks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:36px;border-top:1px solid var(--line)}
.ask{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.ask .n{font-family:var(--mono);font-size:12px;color:var(--brass-ink);padding-top:3px}
.ask p{font-size:14.5px;color:var(--text-2);margin-top:4px}
.ask h3{font-size:1rem}
@media(max-width:820px){.asks{grid-template-columns:1fr}}

.faq{margin-top:36px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;position:relative;font-family:var(--display);font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
/* Drawn rather than typed. A glyph swap from + to - cannot animate; two
   strokes can, so the vertical one collapses into the horizontal. */
summary::after,summary::before{content:"";position:absolute;right:0;top:50%;background:var(--brass-ink)}
summary::after{width:14px;height:1.6px;transform:translateY(-50%)}
summary::before{width:1.6px;height:14px;right:6.2px;transform:translateY(-50%);
  transition:transform var(--m) var(--e)}
details[open] summary::before{transform:translateY(-50%) scaleY(0)}
details p{padding:0 0 22px;color:var(--text-2);max-width:70ch;font-size:15px}

.band{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--card)}
.band::before{content:"";position:absolute;left:50%;top:-280px;transform:translateX(-50%);width:780px;height:540px;background:radial-gradient(ellipse,rgba(217,164,65,.18),transparent 64%);pointer-events:none}
.band-in{position:relative;padding:clamp(56px,8vw,92px) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}

.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);margin-top:44px;align-items:start}
form{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
input,select,textarea{font-family:var(--body);font-size:15px;color:var(--text);background:var(--card);border:1px solid var(--line-3);border-radius:var(--r-s);padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
textarea{min-height:110px;resize:vertical}
input::placeholder,textarea::placeholder{color:#93A29C}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.consent{display:flex;gap:11px;align-items:flex-start;font-family:var(--body);font-size:13.5px;color:var(--text-2);text-transform:none;letter-spacing:0}
.consent input{width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--ink)}
.form-ok{display:none;padding:16px;border:1px solid var(--teal-line);background:var(--teal-soft);border-radius:var(--r-s);color:var(--teal);font-size:14.5px}
.form-ok.on{display:block}
.aside{display:grid;gap:22px;padding:28px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);box-shadow:var(--sh-s)}
.aside .item{display:grid;gap:5px}
.aside .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.aside .v{font-size:16px;font-weight:600}
.aside .v a:hover{color:var(--ink)}
@media(max-width:880px){.form-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

/* NB: the class is .hero-simple - see the hero rules further down. The
   .phero rules that used to live here matched nothing and were removed. */

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
/* the quote card sat centred beside a column 300px taller, leaving the section
   trailing off into nothing: it fills the row instead */
.wrap.wide{align-items:stretch}
.wrap.wide>.card{display:flex;flex-direction:column;justify-content:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}

.ftr{border-top:1px solid var(--line);background:var(--page-2);padding:56px 0 32px}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.ftr h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:14px}
.ftr ul{display:grid;gap:10px}
.ftr a{font-size:14.5px;color:var(--text-2)}
.ftr a:hover{color:var(--ink)}
.ftr .blurb{font-size:14.5px;color:var(--text-2);max-width:36ch;margin-top:14px}
.ftr-btm{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--text-3)}
@media(max-width:880px){.ftr-grid{grid-template-columns:1fr 1fr}}

.chat-btn{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:100px;border:0;background:var(--ink);color:var(--on-ink);font-family:var(--body);font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 14px 30px -12px rgba(18,58,49,.6);transition:transform .18s}
.chat-btn:hover{transform:translateY(-2px)}
.chat-panel{position:fixed;right:20px;bottom:84px;z-index:81;width:min(340px,calc(100vw - 40px));background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--sh);overflow:hidden}
.chat-panel[hidden]{display:none}
.chat-hd{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.chat-hd .dot{background:var(--teal)}
.chat-hd b{font-family:var(--display);font-weight:800;font-size:15px}
.chat-hd button{margin-left:auto;background:none;border:0;color:var(--text-3);font-size:19px;cursor:pointer;line-height:1}
.chat-bd{padding:16px 18px;display:grid;gap:10px}
.chat-bd p{font-size:14px;color:var(--text-2)}
.chat-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--page);font-size:14.5px;font-weight:600}
.chat-opt:hover{border-color:var(--ink)}
.chat-opt span{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.05em;font-weight:400;margin-left:auto}
@media(max-width:560px){.chat-btn{right:14px;bottom:14px;padding:12px 17px}.chat-panel{right:14px;bottom:74px}}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-ink);padding:10px 16px;z-index:99;border-radius:0 0 6px 0}
.skip:focus{left:0}
/* ---- Wise-grade: pills, generous shapes, tonal sections ---- */
.btn{border-radius:100px;padding:15px 26px;font-size:15.5px}
.btn-lg{padding:18px 34px;font-size:17px}
h1{font-size:var(--t-3xl);line-height:1.02;letter-spacing:-.03em}
h2{font-size:var(--t-2xl);letter-spacing:-.028em}
.lede{font-size:clamp(1.08rem,1.7vw,1.28rem);line-height:1.55;max-width:52ch}
.sec{padding:clamp(64px,9vw,120px) 0}
.sec.tone{background:var(--sand);border-top:0}
.sec.tone + .sec{border-top:0}
.sec.deep{background:var(--ink);border-top:0}
.sec.deep h2,.sec.deep h3{color:var(--on-ink)}
.sec.deep .lede,.sec.deep p{color:var(--on-ink-2)}
.sec.deep .eyebrow{color:var(--on-ink-accent)}
.sec.deep .eyebrow::before{background:#5C7A70}
.sec.deep .f{border-bottom-color:var(--on-ink-line)}
.sec.deep .feat{border-top-color:var(--on-ink-line)}
.sec.deep .f .ic{background:#1B4C41;border-color:#2E5D51;color:var(--on-ink-accent)}
.sec.deep .checklist li{color:var(--on-ink-2)}
.sec.deep .checklist b{color:var(--on-ink)}
.sec.deep .checklist .m{color:#7FE0C6}

/* ---- price calculator: the hero is the tool ---- */
.stepper .val{min-width:56px;text-align:center;font-family:var(--display);font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums}
.calc-cta .btn{width:100%}


/* ================= multi-page nav with dropdowns ================= */
.hdr-in{gap:22px}
.nav{gap:2px;position:relative}
.navitem{position:relative}
.navitem>a,.navitem>button{display:flex;align-items:center;gap:6px;position:relative;font-family:var(--body);font-size:var(--t-sm);font-weight:500;color:var(--text-2);padding:9px 13px;border-radius:100px;background:none;border:0;cursor:pointer;transition:.15s}
.navitem>a:hover,.navitem>button:hover{color:var(--text);background:var(--page-2)}
.navitem>a.on,.navitem>button.on{color:var(--ink);background:var(--teal-soft)}
.navitem .car{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.navitem.open .car{transform:rotate(-135deg) translate(-3px,-3px)}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 26px 60px -26px rgba(18,58,49,.35);padding:14px;z-index:70;display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px)}
/* a transparent bridge across the 10px gap: travelling to the panel must not
   leave the item, or mouseleave closes the menu under the pointer */
.drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.navitem.open .drop{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.drop.one{min-width:320px;grid-template-columns:1fr}
/* the later nav items sit near the right edge: a 560px panel anchored left
   runs off the viewport, so those open rightwards instead */
.nav .navitem:nth-last-child(-n+3) .drop{left:auto;right:0}
@media(max-width:1200px){.nav .navitem:nth-last-child(-n+4) .drop{left:auto;right:0}}
.drop a{display:grid;gap:3px;padding:12px 14px;border-radius:var(--r-m)}
.drop a:hover{background:var(--page-2)}
.drop a b{font-size:14.5px;font-weight:600;color:var(--text)}
.drop a span{font-size:13px;color:var(--text-3);line-height:1.45}
.drop .grouphd{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:8px 14px 4px}

/* mobile menu */
.mnav{padding:8px 0 24px;max-height:calc(100vh - 70px);overflow-y:auto}
.mgroup{border-bottom:1px solid var(--line)}
.mgroup>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:15px 0;background:none;border:0;font-family:var(--body);font-size:16px;font-weight:600;color:var(--text);cursor:pointer}
.mgroup>button .car{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.mgroup.open>button .car{transform:rotate(-135deg)}
.msub{display:none;padding:0 0 14px}
.mgroup.open .msub{display:grid;gap:2px}
.msub a{display:block;padding:10px 0 10px 14px;font-size:15px;color:var(--text-2);border-bottom:0}
.mnav>.wrap>a.mlink{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:16px}

/* rich page furniture */
.hero-simple{background:var(--sand);border-bottom:1px solid var(--line);padding:clamp(48px,7vw,86px) 0}
.hero-simple .in{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
/* the measure belongs on the text, not on the container: capping .wrap made
   the hero a 677px block adrift in a 1889px band */
.hero-simple h1{max-width:20ch}
.hero-simple .lede{max-width:58ch}
.hero-simple .crumbs{margin-bottom:-4px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);background:var(--card);border:1px solid var(--brass-line);padding:7px 14px;border-radius:100px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
@media(max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:28px;display:flex;flex-direction:column;gap:11px}
.card h3{font-size:1.1rem}
.card p{font-size:14.5px;color:var(--text-2)}
.card .more{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.card:hover .more{gap:12px}
a.card:hover{border-color:var(--line-2);box-shadow:var(--sh-s)}
.quote-big{max-width:44ch;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.025em;line-height:1.18}
.numline{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
@media(max-width:820px){.numline{grid-template-columns:1fr}}
.numline .n{font-family:var(--display);font-size:clamp(2.2rem,4.5vw,3rem);font-weight:900;letter-spacing:-.035em;color:var(--ink);line-height:1}
.numline p{font-size:14.5px;color:var(--text-2);margin-top:8px}
.crumbs{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.crumbs a:hover{color:var(--ink)}

/* ============ product imagery frames ============ */
.shot{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--s-bg);border:1px solid var(--s-line);box-shadow:0 34px 80px -34px rgba(18,58,49,.5)}
.shot img{display:block;width:100%;height:auto}
.shot-chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--s-line);background:var(--s-bg2)}
.shot-chrome i{width:9px;height:9px;border-radius:50%;background:#2E4A40}
.shot-chrome .lbl{margin-left:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--s-text3)}
.shot-cap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-top:12px;text-align:center}
.bezel{padding:14px;background:linear-gradient(180deg,#1B2A25,#0E1815);border-radius:calc(var(--r-l) + 8px);box-shadow:0 40px 90px -40px rgba(18,58,49,.55)}
.bezel .till{border-radius:var(--r-m);box-shadow:none}
.bezel .stand{height:10px;width:34%;margin:12px auto 0;border-radius:0 0 8px 8px;background:#243830}

/* ============ richer layout furniture ============ */
/* 1fr floors at min-content, so a wide child (the .kv table) pushed the single
   column to 298px inside a 237px container at 320px wide. minmax(0,...) lets the
   track actually shrink. */
.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,72px);align-items:center}
.wide.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
@media(max-width:940px){.wide,.wide.flip{grid-template-columns:minmax(0,1fr)}}
.eyebrow-lg{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-ink)}
.lead-in{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--text-2);max-width:50ch}
.kv{display:grid;grid-template-columns:auto 1fr;gap:0;border-top:1px solid var(--line)}
.kv>div{padding:16px 0;border-bottom:1px solid var(--line)}
.kv>div:nth-child(odd){font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding-right:32px;white-space:nowrap}
.kv>div:nth-child(even){font-size:15px;color:var(--text)}
.note-inline{font-family:var(--mono);font-size:11.5px;color:var(--text-3);margin-top:14px}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--teal-soft);border:1px solid var(--teal-line);padding:8px 15px;border-radius:100px}

/* ============ clean hero + rate strip ============ */
.hero-single .lede{max-width:56ch}
.hero-single .eyebrow{white-space:nowrap}


/* --- display type: big, tight, uppercase --- */
.dsp{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.022em;line-height:.94;text-wrap:balance}
.h-xl{font-size:clamp(2.5rem,6.6vw,5.2rem)}
.h-lg{font-size:clamp(2rem,4.6vw,3.4rem)}
.sec-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:60ch;margin:0 auto}
.sec-center .sub{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--text-2);max-width:52ch}

/* --- full-bleed colour field hero --- */
.hero-field{background:var(--ink);color:var(--on-ink);padding:clamp(56px,8vw,104px) 0 0;position:relative}
.hero-field .dsp{color:var(--on-ink)}
.hero-field .sub{color:var(--on-ink-2);font-size:clamp(1rem,1.5vw,1.15rem);max-width:54ch}
.hero-field-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.btn-cream{background:var(--sand);color:var(--ink)}
.btn-cream:hover{background:var(--on-ink)}
.link-u{color:var(--on-ink);font-weight:600;font-size:15.5px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.link-u:hover{color:var(--sand)}
.hero-field-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(40px,5vw,64px);transform:translateY(clamp(28px,4vw,56px))}
@media(max-width:900px){.hero-field-cards{grid-template-columns:1fr;transform:translateY(32px)}}
.fc{border-radius:var(--r-xl);padding:30px 28px;display:flex;flex-direction:column;gap:10px;min-height:210px}
.fc h3{font-size:1.18rem;letter-spacing:-.015em}
.fc p{font-size:14.5px;line-height:1.5}
.fc .go{margin-top:auto;font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.fc-a{background:var(--on-ink-deep);color:var(--on-ink)}.fc-a h3{color:var(--on-ink)}.fc-a p{color:var(--on-ink-3)}.fc-a .go{color:var(--sand)}
.fc-b{background:var(--sand);color:var(--text)}.fc-b p{color:var(--text-2)}.fc-b .go{color:var(--ink)}
.fc-c{background:var(--teal-soft);color:var(--text)}.fc-c p{color:var(--text-2)}.fc-c .go{color:var(--ink)}
.hero-field-spacer{height:clamp(40px,5vw,64px)}
/* the banner is the hero's own proof row, so it carries the overlap */
.hero-field .pb{margin-top:clamp(40px,5vw,64px);transform:translateY(clamp(28px,4vw,56px))}


/* --- card row that routes to pages --- */
/* four cards, so the row always fills - a stranded fifth card looked broken */
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
@media(max-width:1000px){.route{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.route{grid-template-columns:1fr}}
.rc{display:flex;flex-direction:column;gap:0}
.rc .viz{aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);
  box-shadow:var(--sh-s)}
/* a hairline of the card's own accent along the top, so the tile reads as a
   designed surface rather than a block of colour */
.rc .viz::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:currentColor;
  opacity:.55}
.rc h3{font-size:1.08rem;margin-top:18px;letter-spacing:-.012em}
.rc p{font-size:14px;color:var(--text-2);margin-top:8px;line-height:1.5}
.rc .go{margin-top:12px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.rc:hover .viz{transform:translateY(-3px)}
.rc .viz{transition:transform .2s ease,box-shadow .2s ease}
.rc:hover .viz{box-shadow:var(--sh)}
.rc .ic-lg{width:44%;height:44%}
.v1{background:var(--on-ink-deep)}.v2{background:var(--sand)}.v3{background:var(--teal-soft)}.v4{background:var(--brass-soft)}.v5{background:#16443A}
/* ---- icon sprite ---- */
.ic,.ic-lg{display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic{width:18px;height:18px}
.ic-lg{width:58%;height:58%}
.ftr .ic{width:14px;height:14px;color:var(--text-3);margin-right:8px}

/* --- 3-state comparison table --- */
.cmp2{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;font-size:14.5px}
.cmp2 th,.cmp2 td{padding:18px 16px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp2 thead th{font-family:var(--body);font-weight:700;font-size:14.5px;color:var(--text);background:var(--page-2);text-transform:none;letter-spacing:0;padding:18px 16px}
.cmp2 thead th.mine{background:var(--teal-soft);color:var(--ink);border-radius:var(--r-m) var(--r-m) 0 0}
.cmp2 thead th.mine small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--teal);margin-top:4px;font-weight:500}
.cmp2 td.mine{background:var(--teal-soft)}
.cmp2 tr:last-child td.mine{border-radius:0 0 var(--r-m) var(--r-m)}
.cmp2 td.rowh{text-align:left;font-weight:600;color:var(--text);background:var(--card);min-width:230px}
.cmp2 td.rowh small{display:block;font-weight:400;font-size:12.5px;color:var(--text-3);margin-top:3px}
.cmp2 .val{font-weight:700;font-size:15.5px}
.st{display:block;font-size:19px;line-height:1}
.st.yes{color:var(--teal)}.st.no{color:var(--text-2)}.st.part{color:var(--brass-ink)}
.cmp2 .cap{display:block;font-size:12.5px;color:var(--text-3);margin-top:5px}
.cmp-sum{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:34px}
.cmp-sum span{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.cmp-sum i{color:var(--teal);font-style:normal;font-size:17px}

/* --- CTA band above footer (reference 2) --- */
.getintouch{background:var(--ink);border-radius:var(--r-l);padding:26px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-bottom:44px}
.getintouch b{color:var(--on-ink);font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2vw,1.45rem)}
.getintouch a{color:var(--brass);font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2vw,1.45rem)}
.getintouch a:hover{color:var(--brass-line)}

/* --- denser footer --- */
.ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:28px}
.ftr ul{gap:8px}
.ftr a{font-size:13.5px}
@media(max-width:980px){.ftr-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.ftr-grid{grid-template-columns:1fr 1fr}}
.cmp2 td,.cmp2 td:not(:first-child){font-family:var(--body);font-variant-numeric:normal}
.cmp2 td.rowh small{font-family:var(--body)}

/* mono is a real mono now: labels stay tracked, numbers get tabular figures */
.eyebrow,.crumbs,.kicker,.plan .tag,.total .lbl,.flag,.till-bar,.line .sku,
.fl .s,.fl .z,.fl .t small,.hwc .spec,.srcs,.note-inline,.shot-cap,.sec-center .eyebrow,
.aside .k,label,.step .n,.ask .n,.ftr h4,.ftr-btm,.chat-opt span,.mode,.chip,
.kv>div:nth-child(odd),.cmp2 thead th.mine small{font-family:var(--mono);font-weight:500}
.eyebrow,.crumbs,.kicker,.plan .tag,.total .lbl,.flag,.aside .k,label,
.step .n,.ask .n,.ftr h4,.cmp2 thead th.mine small{letter-spacing:.08em}
.srcs,.note-inline,.shot-cap,.hwc .spec,.line .sku,.till-bar,.fl .t small{letter-spacing:.01em}
/* every figure on the site is mono and tabular - the cheapest enterprise signal there is */
.line .amt,.total,.plan .price,.cmp2 .val,.fc-n,.kn-n,.step .n,.n-big,.stat-n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.fc-n{font-family:var(--mono);font-weight:500;font-size:clamp(2.3rem,4.4vw,3rem);letter-spacing:-.025em;line-height:1;display:block;font-variant-numeric:tabular-nums}
.fc-a .fc-n{color:var(--sand)}.fc-b .fc-n{color:var(--ink)}.fc-c .fc-n{color:var(--ink)}
.fc h3{font-size:1.02rem;font-weight:700;letter-spacing:-.005em;margin-top:6px}
.fc p{margin-top:4px}

/* --- "things you only know" — the character section --- */
.knows{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:960px){.knows{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.knows{grid-template-columns:1fr}}
.kn{background:var(--card);padding:34px 30px 32px;display:flex;flex-direction:column;gap:10px}
.kn-n{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--brass-ink)}
.kn h3{font-size:1.14rem;font-weight:800;letter-spacing:-.015em;line-height:1.22}
.kn p{font-size:14.5px;color:var(--text-2);line-height:1.55}

/* --- numbered process steps — same grid as .knows, four across --- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:44px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);padding:30px 26px;display:flex;flex-direction:column;gap:10px}
.step .n{font-size:11.5px;font-weight:600;color:var(--brass-ink)}
.step h3{font-size:1.1rem;font-weight:800;letter-spacing:-.015em;line-height:1.22}
.step p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.sec-center h2 br{display:block}

/* --- unfilled real-world values: visible, never mistaken for content --- */
.tbc{font-family:var(--mono);font-size:.92em;letter-spacing:.04em;color:var(--brass-ink);background:var(--brass-soft);border:1px dashed var(--brass-line);border-radius:4px;padding:1px 6px;white-space:nowrap}

/* --- legal / plain-text pages --- */
.prose{max-width:72ch;display:flex;flex-direction:column;gap:22px}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin-top:18px}
.prose h3{font-size:1.05rem;font-weight:700}
.prose p,.prose li{color:var(--text-2);font-size:15.5px;line-height:1.7}
.prose ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.prose .upd{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.prose .callout{border-left:2px solid var(--brass-line);background:var(--brass-soft);padding:16px 18px;border-radius:0 var(--r-s) var(--r-s) 0}
.prose .callout p{color:var(--text-2)}

/* category deck: the head-term sentence directly under a hero */
.sec.deck{padding-top:52px;padding-bottom:52px}
.sec.deck{padding-bottom:0}
.sec.deck+.sec{padding-top:clamp(56px,7vw,96px)}
.sec.deck .sec-center{max-width:64ch;gap:14px}
.sec.deck h2{font-size:var(--t-xl);letter-spacing:-.02em}
.sec.deck .sub{font-size:clamp(.98rem,1.4vw,1.06rem);line-height:1.6}
@media(max-width:660px){.sec.deck{padding-top:38px;padding-bottom:0}}

/* ================= motion system =================
   Four primitives, defined once. The `js` class is set by an inline head
   script only when the browser can actually run the observer, so with JS off
   or unsupported nothing is ever hidden. */

/* reveal - 12px rise and fade as a section enters. Transform and opacity only,
   so no element ever changes size and CLS stays at zero. */
html.js main>section{
  opacity:0;transform:translateY(12px);
  transition:opacity .4s cubic-bezier(.22,.61,.36,1),transform .4s cubic-bezier(.22,.61,.36,1)}
html.js main>section.is-in{opacity:1;transform:none}
/* Tab can reach a control inside a section that has not revealed yet. Without
   this the focus ring is on an element at opacity:0 and the page looks frozen
   to anyone navigating by keyboard. */
html.js main>section:focus-within{opacity:1;transform:none}
/* a hero is the LCP element: never hidden, never animated */
html.js main>section.hero-field,html.js main>section.hero-simple{opacity:1;transform:none;transition:none}
/* the first section after a hero is usually in view on load: no stagger there */
html.js main>section:nth-of-type(-n+2){transition-delay:0s}

/* state - 180ms on everything that used to snap */
.drop{transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.navitem.open .drop{transition:opacity .18s ease,transform .18s ease,visibility 0s}
.mnav{transition:max-height .22s ease,opacity .18s ease}
details>summary{transition:color .18s ease}
.mode{transition:background .18s ease,color .18s ease}
.till-panel{animation:panel-in .18s ease both}
@keyframes panel-in{from{opacity:0}to{opacity:1}}

/* lift - the existing 2px hover, now with depth behind it */
.card,.kn,.fc,.plan,.hwc,.rc,.step{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover,.kn:hover,.fc:hover,.plan:hover,.hwc:hover,.rc:hover{
  transform:translateY(-2px);box-shadow:var(--sh);border-color:var(--line-2)}

@media(prefers-reduced-motion:reduce){
  html.js main>section{opacity:1!important;transform:none!important;transition:none!important}
  .card:hover,.kn:hover,.fc:hover,.plan:hover,.hwc:hover,.rc:hover{transform:none;box-shadow:none}
  .till-panel{animation:none}
}

/* ================= footer as a navigation surface ================= */
.ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--s5);align-items:start}
.ftr-brand .blurb{max-width:34ch}
.ftr-addr{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--text-3);
  line-height:1.9;margin-top:var(--s4);letter-spacing:.02em}
.ftr-col h4{margin:0 0 var(--s3)}
.ftr-t{all:unset;display:block;width:100%;cursor:default;font:inherit;color:inherit}
/* above 760px these open nothing: JS disables them so they leave the tab order */
.ftr-t[disabled]{cursor:default}
.ftr-col ul{display:flex;flex-direction:column;gap:7px}
.ftr-col a{display:flex;align-items:center;line-height:1.35}
.ftr-soon{display:flex;align-items:center;font-size:13.5px;color:var(--text-3);font-style:italic}
/* links without a trade icon still line up with the ones that have one */
.ftr-col a:not(:has(.ic)),.ftr-soon{padding-left:22px}
/* the chat button sits over the legal strip otherwise */
.ftr-btm{padding-bottom:64px}
@media(max-width:560px){.ftr-btm{padding-bottom:76px}}
@media(max-width:1080px){.ftr-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){
  .ftr-grid{grid-template-columns:1fr;gap:0}
  .ftr-brand{margin-bottom:var(--s5)}
  /* a 21-item list would bury the legal strip on a phone, so columns fold */
  .ftr-col{border-top:1px solid var(--line)}
  .ftr-col h4{margin:0}
  .ftr-t{cursor:pointer;padding:var(--s4) 0;display:flex;align-items:center;justify-content:space-between}
  .ftr-t::after{content:"+";font-size:16px;color:var(--text-3);transition:transform .18s ease}
  .ftr-t[aria-expanded="true"]::after{content:"\2212"}
  html.js .ftr-col ul{display:none;padding-bottom:var(--s4)}
  html.js .ftr-col.open ul{display:flex}
}

/* ================= trade directory ================= */
.trades{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:var(--s7);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:940px){.trades{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.trades{grid-template-columns:1fr}}
.tr{background:var(--card);padding:26px 24px;display:flex;flex-direction:column;gap:10px;
  scroll-margin-top:90px}
.sec.tone .tr{background:var(--card)}
.tr-h{display:flex;align-items:center;gap:12px}
.ic-tr{width:26px;height:26px;color:var(--brass-ink);flex:none}
.tr h3{font-size:1.05rem;letter-spacing:-.012em}
.tr p{font-size:14.5px;color:var(--text-2);line-height:1.55}
.tr-f{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:2px}
.tr-f li{font-size:13.5px;color:var(--text-2);padding-left:16px;position:relative;line-height:1.5}
.tr-f li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--brass-line)}
.tr .go{margin-top:auto;padding-top:var(--s3)}

/* ================= the honesty block ================= */
.honest{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:var(--s7);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:860px){.honest{grid-template-columns:1fr}}
.hn{background:var(--card);padding:28px 26px}
.hn h3{font-size:1.02rem;margin-bottom:var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--line)}
.hn ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.hn li{font-size:14px;color:var(--text-2);line-height:1.55;padding-left:20px;position:relative}
.hn li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px}
.hn-yes li::before{content:"\2713";color:var(--teal)}
.hn-yes h3{color:var(--teal)}
.hn-no{background:var(--sand)}
.hn-no li::before{content:"\2715";color:var(--rose)}
.hn-no h3{color:var(--rose)}
.hn-soon li::before{content:"\2192";color:var(--brass-ink)}
.hn-soon h3{color:var(--brass-ink)}
.hn-note{font-size:13px;color:var(--text-3);line-height:1.6;margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--line-2)}

/* ================= partner marks ================= */
.pmwall{margin-top:var(--s7)}
.pm-lead{font-size:15px;color:var(--text-2);max-width:56ch;margin-bottom:var(--s5)}
/* auto-fit so the row always fills, whatever the partner count */
.pm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.pm{background:var(--card);display:flex;align-items:center;justify-content:center;
  padding:30px 18px;min-height:96px;transition:background .18s ease}
.pm:hover{background:var(--card-2)}
.pm span{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;
  color:var(--ink);text-align:center;line-height:1.15}
.pm img{max-height:34px;width:auto;object-fit:contain}
.pm-booker span{color:var(--brass-ink);letter-spacing:.01em}
.pm-family span{font-size:1rem}
.pm-tm{font-size:11.5px;line-height:1.7;color:var(--text-3);margin-top:var(--s4);max-width:78ch}

/* ================= the price banner ================= */
.pb{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.pb-note{grid-column:1/-1;background:var(--card);padding:16px 24px;font-size:13px;
  color:var(--text-3);font-family:var(--mono);letter-spacing:.02em;border-top:1px solid var(--line)}
.pb-n{background:var(--card);padding:30px 26px;display:flex;flex-direction:column;gap:8px}
.pb-f{font-family:var(--mono);font-weight:500;font-size:clamp(2.2rem,4.4vw,2.9rem);
  letter-spacing:-.025em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pb-n b{font-size:1.02rem;font-weight:700;font-family:var(--display);letter-spacing:-.01em}
.pb-n p{font-size:14px;color:var(--text-2);line-height:1.55}
@media(max-width:860px){.pb{grid-template-columns:1fr}}
/* on the ink hero */
.pb-dark,.pb-dark .pb-n,.pb-dark .pb-note{background:var(--on-ink-deep);border-color:var(--on-ink-line)}
.pb-dark{border-color:var(--on-ink-line)}
.pb-dark .pb-f{color:var(--on-ink)}
.pb-dark .pb-n b{color:var(--on-ink)}
.pb-dark .pb-n p{color:var(--on-ink-2)}
.pb-dark .pb-note{color:var(--on-ink-3);border-top-color:var(--on-ink-line)}

/* ================= price tables ================= */
.scroller{overflow-x:auto;margin-top:var(--s6)}
.pt{border-collapse:collapse;width:100%;min-width:520px}
.pt caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);padding-bottom:12px}
.pt th,.pt td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);
  vertical-align:baseline;background:var(--card)}
.pt thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;border-bottom:1px solid var(--line-2)}
.pt tbody th{font-family:var(--body);font-weight:600;font-size:15px;color:var(--text);text-transform:none;letter-spacing:0;background:var(--card)}
.pt tbody th small{display:block;font-family:var(--body);font-weight:400;font-size:13px;color:var(--text-2);text-transform:none;letter-spacing:0;
  margin-top:4px;max-width:52ch;line-height:1.5}
.pt td{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-m{font-size:1.15rem;font-weight:500;color:var(--ink)}
.pt-w{font-size:14px;color:var(--text-3)}
.pt-poa{font-family:var(--body);font-size:13.5px;color:var(--text-3)}
.pt tbody tr:last-child th,.pt tbody tr:last-child td{border-bottom:0}
.pt-2 tbody th{font-weight:500}

/* ================= what is included ================= */
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:var(--s6);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:660px){.incl{grid-template-columns:1fr}}
.in{background:var(--card);padding:18px 22px;display:flex;gap:12px;align-items:baseline;
  font-size:14.5px;color:var(--text-2)}
.in span{color:var(--teal);font-family:var(--mono);flex:none}

/* ================= worked examples ================= */
.wexs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:var(--s6);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:860px){.wexs{grid-template-columns:1fr}}
.wex{background:var(--card);padding:26px 24px}
.wex h3{font-size:1.02rem}
.wex ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.wex li{font-family:var(--mono);font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}
.wex p{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}

/* ================= trust bar ================= */
.sec-trust{padding-top:var(--s7);padding-bottom:0}
.sec-trust+.sec.deck{padding-top:var(--s7)}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:760px){.trust{grid-template-columns:repeat(2,1fr)}}
.tb{background:var(--card);padding:24px 22px;display:flex;flex-direction:column;gap:4px}
.tb-n{font-family:var(--mono);font-weight:500;font-size:1.85rem;letter-spacing:-.03em;
  color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.tb b{font-size:13.5px;font-weight:400;color:var(--text-2);line-height:1.45}
/* the footer headings are h3 now, and must not inherit the h3 type ramp */
.ftr h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;margin:0 0 var(--s3);line-height:1.4}

/* ================= real screenshots ================= */
.shot-fig{margin:var(--s6) 0 0}
.shot-fig+.shot-fig{margin-top:var(--s5)}
.shot img{display:block;width:100%;height:auto}
.sec.deep .shot-cap{color:var(--on-ink-3)}

/* ================= what it does today ================= */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:var(--s7);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
@media(max-width:1000px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.caps{grid-template-columns:1fr}}
.caps>.cap{background:var(--card);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.ic-cap{width:24px;height:24px;color:var(--brass-ink)}
.caps>.cap h3{font-size:1.02rem;letter-spacing:-.012em}
.caps>.cap p{font-size:14px;color:var(--text-2);line-height:1.55}
.caps>.cap .go{margin-top:auto;padding-top:var(--s3)}

/* ================= comparison honesty panel ================= */
.honestly{background:var(--sand);border:1px solid var(--brass-line);border-radius:var(--r-l);
  padding:26px 28px;margin-top:var(--s6)}
.honestly h3{font-size:1.05rem;color:var(--brass-ink)}
.honestly p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-top:10px}
.srcs{margin-top:var(--s5)}

/* ================= market comparison table ================= */
.mkt{border-collapse:collapse;width:100%;min-width:760px}
.mkt caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);padding-bottom:12px}
.mkt th,.mkt td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  vertical-align:top;background:var(--card)}
.mkt thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;border-bottom:1px solid var(--line-2);background:var(--sand)}
.mkt tbody th{font-family:var(--body);font-weight:700;font-size:15px;color:var(--text);text-transform:none;letter-spacing:0;white-space:nowrap;background:var(--card)}
.mkt tbody th small{display:block;font-family:var(--body);font-weight:400;font-size:12px;
  color:var(--text-3);text-transform:none;letter-spacing:0;margin-top:5px;white-space:normal;
  max-width:26ch;line-height:1.45}
.mkt .val{display:block;font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums}
.mkt .cap{display:block;font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.45}
.mkt tr.mine th,.mkt tr.mine td,.mkt tr.mine th small{background:var(--teal-soft)}
.mkt tr.mine .val{color:var(--ink)}
.mkt tbody tr:last-child th,.mkt tbody tr:last-child td{border-bottom:0}

/* ================= WCAG 2.2 SC 2.5.8 target size =================
   List and call-to-action links were rendering 15-22px tall on a phone. The
   inline-in-a-sentence exception does not cover navigation lists or CTAs, so
   these get a real 24px target. */
.ftr a,.ftr-btm a,.go,.more,.link-u,.crumbs a,
.more a,.v a,.go a{min-height:24px;display:inline-flex;align-items:center}
.ftr-col a{padding:2px 0}
.ftr-btm a{padding:3px 2px}
.tr-f li{min-height:auto}

/* ================= measure =================
   Source lines and inline notes were running to ~197 characters. Nothing on a
   page should exceed roughly 75. */
.srcs,.note-inline,.pm-tm,.hn-note{max-width:74ch}
.pb-note{max-width:none}
.pb-note>span{display:block;max-width:74ch}
.sec-head .lede,.prose p{max-width:70ch}

/* =================================================================
   HOMEPAGE SECTIONS + HEADER/FOOTER — responsive rebuild
   Breakpoints used throughout: 1560 (large desktop), 1180 (laptop),
   1040 (nav collapses), 820/760 (tablet), 560 (phone).
   ================================================================= */

/* on a very wide screen the 1180px column left ~400px of gutter either side */
@media(min-width:1560px){:root{--wrap:1320px}}

/* ---------------- header ----------------
   The CTA cluster used to wrap: nav 625 + cta 332 + logo filled the whole
   1132px content box with nothing to give. WhatsApp is gone from here (the
   floating chat button offers it already), nav padding and gaps are fluid,
   and every child is nowrap so this cannot come back silently. */
.hdr-in{gap:clamp(12px,2vw,28px)}
.hdr-in>*{white-space:nowrap}
.nav{min-width:0;flex-wrap:nowrap}
.navitem>a,.navitem>button{padding:9px clamp(8px,.9vw,13px)}
.hdr-cta{gap:clamp(8px,1vw,14px)}
.tel{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;
  color:var(--text-2);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:7px 15px;min-height:38px;transition:color .15s,border-color .15s}
.tel:hover{color:var(--ink);border-color:var(--line-3)}
.ic-tel{width:15px;height:15px;flex:none;color:var(--brass-ink)}
/* laptops: the number goes before the button does */
@media(max-width:1180px){.hdr-cta .tel{display:none}}
.mnav-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
/* .mnav a is display:block and wins over .btn, which killed the centring */
.mnav-cta .btn{display:inline-flex;width:100%;padding:14px 22px;border-bottom:0}
.tel-m{width:100%;justify-content:center;min-height:46px;font-size:15px}
.tel-m .ic-tel{width:17px;height:17px}

/* ---------------- home deck: sentence and proof, side by side ---------------- */
.deck-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.deck-split .deck-txt h2{text-align:left}
.deck-split .sub{margin-top:16px;max-width:60ch;color:var(--text-2);
  font-size:clamp(.98rem,1.4vw,1.06rem);line-height:1.6}
.deck-split .trust{grid-template-columns:1fr 1fr}

@media(max-width:900px){.deck-in{grid-template-columns:1fr;gap:clamp(24px,4vw,32px)}}
@media(max-width:420px){.deck-split .trust{grid-template-columns:1fr}}

/* ---------------- what it does today: rail + eight real links ----------------
   Every tile is an <a>. Before this the only hit target in a 200px cell was
   "See the till", which had no colour and no underline in this context. */
/* A sticky left rail was 460px tall beside an 874px grid: 415px of empty
   column. The heading spans instead, in the same shape as the band below it,
   so the two sections read as one system. */
.band-h{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);align-items:end;
  padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--line)}
.band-t{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-top:14px;max-width:22ch}
.band-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.band-side .lede{font-size:15.5px;line-height:1.6;max-width:38ch}
@media(max-width:820px){.band-h{grid-template-columns:1fr;align-items:start}
  .band-t{max-width:none}.band-side .lede{max-width:52ch}}

/* the honesty note closes the section rather than propping up a column */
.rail-note{margin-top:var(--s5);padding:clamp(20px,2.4vw,26px) clamp(22px,2.6vw,30px);
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--brass);
  border-radius:var(--r-m);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px}
.rail-note>div{max-width:74ch}
.rail-note h3{font-size:.98rem;color:var(--brass-ink);margin-bottom:6px}
.rail-note p{font-size:14px;color:var(--text-2);line-height:1.6}
.rail-note .go{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  font-weight:600;color:var(--ink);flex:none}
.rail-note:hover .arw{transform:translateX(4px)}
.caps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);
  margin-top:clamp(28px,3.5vw,44px);
  background:none;border:0;border-radius:0;overflow:visible}
.caps>.cap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:22px;gap:9px;transition:border-color .15s,transform .15s,box-shadow .15s}
.caps>.cap:hover{border-color:var(--brass-line);transform:translateY(-2px);box-shadow:var(--sh-s)}
.caps>.cap .ic-cap{width:20px;height:20px;padding:9px;box-sizing:content-box;
  background:var(--brass-soft);border-radius:var(--r-s);margin-bottom:4px;
  transition:background .15s,color .15s}
.caps>.cap:hover .ic-cap{background:var(--ink);color:var(--on-ink)}
.caps>.cap .go{margin-top:auto;padding-top:var(--s3);display:inline-flex;align-items:center;
  gap:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.arw{width:15px;height:1.5px;background:currentColor;position:relative;flex:none;
  transition:transform .18s}
.arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg)}
.caps>.cap:hover .arw{transform:translateX(4px)}
@media(max-width:1180px){.caps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.caps{grid-template-columns:1fr}}

/* ---------------- things you only know ----------------
   Was the identical hairline grid to .caps, stacked straight after it. Now a
   warm band and an editorial list: no cells, no borders, nothing to confuse
   with the linked tiles above. */
.knows-band{background:var(--sand);border-top:0}
/* the heading ran to five lines in a half-width column with the whole
   top-right of the band empty: it spans, and the standfirst sits beside it */
.knows-h{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);align-items:end;
  padding-bottom:clamp(24px,3vw,36px);border-bottom:1px solid var(--brass-line)}
.knows-t{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-top:14px;max-width:28ch}
.knows-band .sub{color:var(--text-2);font-size:clamp(1rem,1.4vw,1.1rem);max-width:34ch}
.knows{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-top:0;background:none;border:0;border-radius:0;overflow:visible}
.knows .kn{background:none;display:flex;flex-direction:column;gap:10px;
  padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,34px) clamp(30px,3.4vw,40px) 0;
  border-bottom:1px solid var(--sand-2)}
.knows .kn-n{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;color:var(--brass);
  letter-spacing:-.02em}
.knows .kn h3{font-size:1.1rem;line-height:1.25}
.knows .kn p{font-size:14.5px;color:var(--text-2)}
/* the last row carries the band, not a rule under it */
.knows .kn:nth-last-child(-n+3){border-bottom:0;padding-bottom:0}
@media(max-width:1000px){
  .knows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .knows .kn:nth-last-child(-n+3){border-bottom:1px solid var(--sand-2);
    padding-bottom:clamp(30px,3.4vw,40px)}
  .knows .kn:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
}
@media(max-width:820px){.knows-h{grid-template-columns:1fr;align-items:start}
  .knows-t{max-width:none}.knows-band .sub{max-width:52ch}}
@media(max-width:600px){
  .knows{grid-template-columns:1fr}
  .knows .kn{padding-right:0}
  .knows .kn:nth-last-child(-n+3){border-bottom:1px solid var(--sand-2);
    padding-bottom:clamp(30px,3.4vw,40px)}
  .knows .kn:last-child{border-bottom:0;padding-bottom:0}
}

/* ---------------- footer ----------------
   The retail list is 25 items: as a single column it set the footer height at
   762px against a 224px brand column. It flows in two now and nothing is cut. */
/* brand + five equal link columns. The Retail column used to be a 1.9fr block
   flowing 21 trades into 2-3 sub-columns, which wrapped a third of the names. */
.ftr-grid{grid-template-columns:1.4fr repeat(5,minmax(0,1fr));
  gap:var(--s5) clamp(18px,1.8vw,28px)}
/* at 1320px of wrap the trade list balances the other columns in three */
@media(max-width:1280px){.ftr-grid{grid-template-columns:1fr repeat(4,minmax(0,1fr))}
  .ftr-brand{grid-column:1/-1}}
@media(max-width:980px){.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .ftr-grid{grid-template-columns:1fr}
  /* the fold applies to the wide column too, or the 26 trades stay open */

}

/* the WhatsApp line was inline text at heading size — it is the only action in
   the band, so it is a button */
.getintouch{justify-content:space-between;gap:16px 28px;
  padding:clamp(22px,3vw,30px) clamp(22px,3vw,36px)}
.getintouch .btn{flex:none;font-family:var(--body);font-size:15px;color:var(--ink)}
.getintouch .btn:hover{color:var(--ink)}
@media(max-width:620px){
  .getintouch{flex-direction:column;align-items:stretch;text-align:center}
  .getintouch .btn{width:100%}
}


/* ================= site-wide audit fixes =================
   Found by measuring all 29 pages at 1440 / 900 / 390. */

/* status pills in the till mock broke across two lines on a phone: they stay
   on one line and the row stacks instead */
.flag{white-space:nowrap}
.till-foot{flex-wrap:wrap;row-gap:10px}
@media(max-width:480px){
  .till-foot{align-items:flex-start}
  .flag{font-size:10.5px;padding:5px 9px;letter-spacing:.06em}
}

/* a 254-character source note was set centred: footnotes read left */
.srcs{text-align:left}
.sec-center .srcs,.sec-center .note-inline{margin-left:auto;margin-right:auto}

/* centred hero copy past ~52 characters a line stops being scannable */
.hero-field .sub,.hero-single .sub{max-width:52ch}

/* "Running in a real shop" broke inside its pill on a 320px screen */
.badge{white-space:nowrap}
@media(max-width:400px){.badge{font-size:12.5px;padding:7px 12px;gap:6px}}

/* .hero-field-in centres its children, so an h1 whose longest word is wider
   than the column overflowed 27px each side at 320px. body{overflow-x:hidden}
   was hiding it. */
.dsp{overflow-wrap:break-word;min-width:0}
@media(max-width:360px){.h-xl{font-size:clamp(1.95rem,9vw,2.5rem)}}

/* ---------- TRADE HUB INDEX (trades.html) ----------
   Deliberately not the full trade card: trades.html and retail.html were 86%
   identical on 6-grams, which is straight cannibalisation. */
.tixs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tix{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:64px;
     border:1px solid var(--line);border-radius:12px;background:var(--card);
     text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tix:hover{border-color:var(--brass);transform:translateY(-2px)}
.tix .ic-tix{flex:0 0 26px;width:26px;height:26px}
.tix .ic-tix svg{width:100%;height:100%}
.tix-n{font-weight:650;line-height:1.25;flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.tix-g{font-size:var(--t-xs);color:var(--text-3);white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:1180px){.tixs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.tixs{grid-template-columns:repeat(2,minmax(0,1fr))}.tix-g{display:none}}
@media(max-width:560px){.tixs{grid-template-columns:1fr}}

/* ---------- GUIDE CROSS-LINKS ---------- */
.glist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.glist a{display:flex;align-items:center;min-height:56px;padding:14px 18px;
         border:1px solid var(--line);border-radius:12px;background:var(--card);
         text-decoration:none;color:var(--ink);font-weight:600;line-height:1.3;
         transition:border-color .15s,transform .15s}
.glist a:hover{border-color:var(--brass);transform:translateY(-2px)}
@media(max-width:900px){.glist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.glist{grid-template-columns:1fr}}

/* ---------- RELATED READING ---------- */
.sec.rel{padding-top:clamp(40px,5vw,64px)}
.rellist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rellist a{display:flex;align-items:center;gap:10px;min-height:56px;padding:14px 18px;
           border:1px solid var(--line);border-radius:12px;background:var(--card);
           text-decoration:none;color:var(--ink);font-weight:600;line-height:1.3;
           transition:border-color .15s,transform .15s}
.rellist a::before{content:"\2192";color:var(--brass);flex:0 0 auto;font-weight:700}
.rellist a:hover{border-color:var(--brass);transform:translateY(-2px)}
@media(max-width:900px){.rellist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.rellist{grid-template-columns:1fr}}

/* ---------- FOUNDER STORY TIMELINE ---------- */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:tl}
.tl-i{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(20px,3vw,44px);
      padding:22px 0;border-top:1px solid var(--line);position:relative}
.tl-i:first-child{border-top:0}
.tl-w{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--brass);font-weight:600;padding-top:4px;line-height:1.5}
.tl-b h3{font-size:clamp(1.05rem,1.5vw,1.25rem);margin:0 0 6px;line-height:1.3}
.tl-b p{margin:0;color:var(--text-2);max-width:68ch;line-height:1.6}
/* the rule doubles as the spine, so no pseudo-element dot is needed */
@media(max-width:760px){
  .tl-i{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .tl-w{padding-top:0}
}

/* ---------- SIGNED BYLINE (only rendered when CFG['founder'] is set) ---------- */
.sig{margin-top:26px;display:flex;flex-direction:column;gap:2px;
     padding-left:16px;border-left:3px solid var(--brass)}
.sig-n{font-weight:650;color:var(--ink)}
.sig-r{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
       text-transform:uppercase;color:var(--text-3)}

/* ---------- ABOUT: FACTS STRIP ---------- */
.facts{list-style:none;margin:28px 0 0;padding:0;display:grid;
       grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts li{background:var(--card);padding:16px 14px;display:flex;flex-direction:column;gap:6px}
.facts-n{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;color:var(--ink);line-height:1}
.facts-t{font-size:12.5px;color:var(--text-2);line-height:1.4}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.facts{grid-template-columns:1fr}}

/* ---------- ABOUT: TIMELINE SPINE ----------
   The year column doubles as the rail. A dot on the line gives the eye something
   to travel down, which eight stacked rows otherwise do not. */
.tl{list-style:none;margin:0;padding:0}
.tl-i{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,3vw,40px);
      padding:24px 0 24px 0;position:relative;border-top:1px solid var(--line)}
.tl-i:first-child{border-top:0}
.tl-w{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
      color:var(--brass);font-weight:600;line-height:1.5;padding-top:3px}
.tl-b{position:relative;padding-left:30px}
.tl-b::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
              border-radius:50%;background:var(--card);border:2.5px solid var(--brass);z-index:1}
.tl-b::after{content:"";position:absolute;left:5px;top:20px;bottom:-48px;width:1px;
             background:var(--line)}
.tl-i:last-child .tl-b::after{display:none}
.tl-b h3{font-size:clamp(1.05rem,1.5vw,1.2rem);margin:0 0 6px;line-height:1.3}
.tl-b p{margin:0;color:var(--text-2);max-width:66ch;line-height:1.62}
@media(max-width:760px){
  .tl-i{grid-template-columns:1fr;gap:4px;padding:20px 0}
  .tl-w{padding-top:0;padding-left:30px}
  .tl-b::before{top:-20px}
  .tl-b::after{top:-9px;bottom:-40px}
}

/* ---------- CONSENT BANNER ----------
   Accept and Reject are peer buttons: UK GDPR requires refusing to be as easy
   as accepting, so there is no "manage" maze between the two. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--card);
    border-top:1px solid var(--line-2);box-shadow:0 -18px 40px -24px rgba(18,58,49,.45)}
.cc-in{max-width:var(--wrap);margin:0 auto;padding:20px clamp(16px,4vw,32px);
       display:grid;gap:16px}
.cc-txt h2{font-size:1.05rem;margin:0 0 6px}
.cc-txt p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55;max-width:82ch}
.cc-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* an author display rule beats the UA [hidden] rule, so every element the
   consent script toggles needs this or it never hides */
.cc[hidden],.cc-opts[hidden],.cc-btns [hidden]{display:none}
.cc-opt{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;
        border:1px solid var(--line);border-radius:10px;font-size:13px;line-height:1.45}
.cc-opt input{margin-top:2px;flex:0 0 auto}
.cc-opt span{color:var(--text-2)}
.cc-opt b{display:block;color:var(--ink);margin-bottom:2px}
.cc-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cc-link{all:unset;cursor:pointer;font-size:13.5px;color:var(--text-2);
         text-decoration:underline;text-underline-offset:3px;padding:8px 2px;min-height:24px}
.cc-link:hover{color:var(--ink)}
.ftr-cc{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:3px 2px}
.ftr-cc:hover{color:var(--ink)}
@media(max-width:760px){
  .cc-opts{grid-template-columns:1fr}
  .cc-btns .btn{flex:1 1 auto;justify-content:center}
  .cc-in{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* ---------- POLICY TABLE + INLINE CONSENT LINK ---------- */
.tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:12px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tbl th{text-align:left;padding:12px 14px;background:var(--page-2);color:var(--ink);
        font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
        font-weight:600;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--text-2);
        vertical-align:top;line-height:1.5}
.tbl tr:last-child td{border-bottom:0}
.tbl code{font-family:var(--mono);font-size:12.5px;color:var(--ink);
          background:var(--page-2);padding:2px 6px;border-radius:5px}
.cc-inline{all:unset;cursor:pointer;color:var(--ink);text-decoration:underline;
           text-underline-offset:3px;font:inherit}
.cc-inline:hover{color:var(--brass)}

/* ================= mobile: card grids become scroll rails =================
   Measured at 375x812 before this existed: the home page ran 15,050px - 18.5
   phone screens - and retail 12,742px. Almost none of that was prose. Every
   long block was a desktop card grid stacking into a single column, at 220 to
   390px a card, so a phone showed two cards per screen and nothing else.

   Turning those grids into one horizontally scrolled row takes the tallest
   block on the site (the eighteen trades, 6,561px) to 466px. Retail goes
   15.7 screens to 7.9, the home page 18.5 to 12.

   Nothing is hidden and nothing is collapsed: every card stays in the DOM in
   source order, so in-page anchors, search engines, find-on-page and reader
   mode are all unaffected. It is the same content on a different axis.

   Not applied to .deep or the timeline: those cards carry long prose, and
   constraining them to 80% of the viewport makes them TALLER, not shorter. */
@media(max-width:719px){
  .caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts{
    grid-template-columns:none;
    grid-auto-flow:column;
    /* 82% leaves the next card visibly peeking, which is what tells somebody
       there is more to the right. A rail whose cards end flush with the screen
       edge reads as a single card. */
    grid-auto-columns:82%;
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    /* full bleed out of the 24px page gutter, so the rail runs to both screen
       edges while the first card still lines up with the heading above it */
    margin-inline:-24px;
    padding-inline:24px;
    scroll-padding-inline:24px;
    padding-bottom:14px;
    /* these grids fake hairline borders with a 2px gap over a line-coloured
       background; in a rail that becomes a stripe between cards */
    background:none;
    border:0;
    border-radius:0;
    overflow-y:visible;
  }
  .caps>*,.knows>*,.steps>*,.route>*,.trades>*,.tixs>*,.glist>*,.rellist>*,.facts>*{
    scroll-snap-align:start;
  }
  /* the cards were relying on the grid background for their edges */
  .caps>.cap,.knows>.kn,.steps>.step,.trades>.tr{
    border:1px solid var(--line);
    border-radius:var(--r-m,12px);
  }
  /* a slim visible scrollbar is a second affordance, for anyone who does not
     read the peek */
  .caps::-webkit-scrollbar,.knows::-webkit-scrollbar,.steps::-webkit-scrollbar,
  .route::-webkit-scrollbar,.trades::-webkit-scrollbar,.tixs::-webkit-scrollbar,
  .glist::-webkit-scrollbar,.rellist::-webkit-scrollbar,.facts::-webkit-scrollbar{height:4px}
  .caps::-webkit-scrollbar-thumb,.knows::-webkit-scrollbar-thumb,.steps::-webkit-scrollbar-thumb,
  .route::-webkit-scrollbar-thumb,.trades::-webkit-scrollbar-thumb,.tixs::-webkit-scrollbar-thumb,
  .glist::-webkit-scrollbar-thumb,.rellist::-webkit-scrollbar-thumb,.facts::-webkit-scrollbar-thumb{
    background:var(--line-2);border-radius:99px}
  /* the link rails are single-line chips; a card-width column wastes the row */
  .glist,.rellist,.tixs{grid-auto-columns:66%}
}

/* ================= motion, second pass =================
   The reveal above moves whole sections. What was missing is what happens
   INSIDE one: eight cards arriving together reads as a page redraw, the same
   eight arriving 45ms apart reads as deliberate. Still transform and opacity
   only, so it stays on the compositor and costs no layout. */

/* stagger - children of a revealed section arrive in sequence */
html.js main>section .caps>*,
html.js main>section .knows>*,
html.js main>section .steps>*,
html.js main>section .route>*,
html.js main>section .trades>*,
html.js main>section .tixs>*,
html.js main>section .glist>*,
html.js main>section .rellist>*,
html.js main>section .facts>*{
  opacity:0;transform:translateY(10px);
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),transform .38s cubic-bezier(.22,.61,.36,1)}
html.js main>section.is-in .caps>*,
html.js main>section.is-in .knows>*,
html.js main>section.is-in .steps>*,
html.js main>section.is-in .route>*,
html.js main>section.is-in .trades>*,
html.js main>section.is-in .tixs>*,
html.js main>section.is-in .glist>*,
html.js main>section.is-in .rellist>*,
html.js main>section.is-in .facts>*{opacity:1;transform:none}
/* only the first six are delayed. Past that the eye has already read the
   pattern, and an eighteen-card rail would otherwise take a second to finish
   arriving - most of it off-screen to the right, where nobody is looking. */
html.js main>section.is-in :is(.caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts)>*:nth-child(1){transition-delay:.00s}
html.js main>section.is-in :is(.caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts)>*:nth-child(2){transition-delay:.05s}
html.js main>section.is-in :is(.caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts)>*:nth-child(3){transition-delay:.10s}
html.js main>section.is-in :is(.caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts)>*:nth-child(4){transition-delay:.15s}
html.js main>section.is-in :is(.caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts)>*:nth-child(5){transition-delay:.20s}
html.js main>section.is-in :is(.caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts)>*:nth-child(n+6){transition-delay:.25s}

/* header - condenses once the page has moved, so the hero owns the first
   screen and everything after it gets a smaller, firmer bar. Height is
   animated on a sticky element that nothing below depends on, so this costs
   one paint and no reflow of the document. */
.hdr{transition:box-shadow .22s ease,background .22s ease}
.hdr-in{transition:height .22s cubic-bezier(.22,.61,.36,1)}
html.scrolled .hdr{background:rgba(247,248,246,.94);box-shadow:0 1px 0 var(--line),0 10px 24px -20px rgba(18,58,49,.5)}
html.scrolled .hdr-in{height:60px}

/* links that lead somewhere - the arrow moves before the page does */
.go,.rc .go,.card .go{transition:color .18s ease}
.go::after{display:inline-block;transition:transform .18s cubic-bezier(.22,.61,.36,1)}
a:hover>.go::after,.go:hover::after,.card:hover .go::after,.rc:hover .go::after{transform:translateX(3px)}

/* press - a button that does not acknowledge the tap feels broken on a phone,
   where there is no hover state to have told you it was live */
.btn:active{transform:translateY(1px) scale(.985)}
.tr:active,.cap:active,.kn:active{transform:scale(.99)}

/* hover lift is a pointer idea. On touch it only ever fires as a stuck state
   after the tap, so it is scoped to devices that actually have a pointer. */
@media(hover:none){
  .card:hover,.kn:hover,.fc:hover,.plan:hover,.hwc:hover,.rc:hover{transform:none;box-shadow:none}
}

@media(prefers-reduced-motion:reduce){
  html.js main>section :is(.caps,.knows,.steps,.route,.trades,.tixs,.glist,.rellist,.facts)>*{
    opacity:1!important;transform:none!important;transition:none!important}
  .hdr-in{transition:none}
  .btn:active,.tr:active,.cap:active,.kn:active{transform:none}
}

/* ================= motion phase 1: consistency =================
   182 of 224 component classes had no motion at all. None of what follows
   should be noticeable; it should only be noticeable by its absence, which is
   what the site felt like before it.

   Everything here is on the default scale. Three of these components toggle
   `display`, which cannot transition, so they use allow-discrete and
   @starting-style: the animation happens where the browser supports it and the
   old instant behaviour survives everywhere else. That is why none of it
   animates height instead - height is not a compositor property, and these run
   while the page may also be scrolling.

   The one exception is the FAQ, below: a disclosure IS a height change and
   there is no other way to express it. It is a one-off on click rather than
   anything continuous, and it is gated on ::details-content support. */

/* ---- the FAQ answer, where the browser can interpolate to auto ---- */
@supports selector(::details-content){
  details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size var(--m-in) var(--e), content-visibility var(--m-in) allow-discrete;
  }
  details[open]::details-content{block-size:auto}
}

/* ---- mobile menu ---- */
.mnav{
  opacity:0;
  transition:opacity var(--m) var(--e), display var(--m) var(--e) allow-discrete;
}
.mnav.open{opacity:1}
@starting-style{.mnav.open{opacity:0}}
/* The groups arrive in sequence, so the panel unfolds rather than appears.
   Deliberately an animation and not a transition on the wrapper: the panel
   starts at display:none, and a transition has no start value to move from. */
.mnav.open .mgroup,.mnav.open .mnav-cta{
  animation:mnav-item var(--m-in) var(--e) both}
.mnav.open .mgroup:nth-child(1){animation-delay:calc(var(--m-stagger) * 1)}
.mnav.open .mgroup:nth-child(2){animation-delay:calc(var(--m-stagger) * 2)}
.mnav.open .mgroup:nth-child(3){animation-delay:calc(var(--m-stagger) * 3)}
.mnav.open .mgroup:nth-child(4){animation-delay:calc(var(--m-stagger) * 4)}
.mnav.open .mgroup:nth-child(n+5){animation-delay:calc(var(--m-stagger) * 5)}
.mnav.open .mnav-cta{animation-delay:calc(var(--m-stagger) * 6)}
@keyframes mnav-item{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the burger becomes the close it turns into */
.burger span,.burger span::before,.burger span::after{
  transition:transform var(--m) var(--e), opacity var(--m) var(--e)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

/* ---- footer columns ---- */
@media(max-width:760px){
  html.js .ftr-col ul{
    opacity:0;
    transition:opacity var(--m) var(--e), display var(--m) var(--e) allow-discrete}
  html.js .ftr-col.open ul{opacity:1}
  @starting-style{html.js .ftr-col.open ul{opacity:0}}
}

/* ---- form fields ---- */
/* A field that does not respond to focus reads as disabled for the first
   moment, which on an enquiry form is the worst possible moment. */
input,select,textarea{
  transition:border-color var(--m) var(--e), box-shadow var(--m) var(--e),
             background var(--m) var(--e)}
input:focus,select:focus,textarea:focus{
  border-color:var(--brass); outline:none;
  box-shadow:0 0 0 3px var(--brass-soft)}
label{transition:color var(--m) var(--e)}
label:focus-within{color:var(--brass-ink)}
input:user-invalid,textarea:user-invalid{border-color:var(--rose)}
input:user-invalid:focus,textarea:user-invalid:focus{box-shadow:0 0 0 3px var(--rose-soft)}

/* ---- everything else that snapped ---- */
.chip,.tix,.crumbs a,.tbl tbody tr,.cmp2 tbody tr,.ftr-col a,.mnav a,.faq summary{
  transition:color var(--m) var(--e), background var(--m) var(--e),
             border-color var(--m) var(--e)}
.chip:hover{border-color:var(--line-2);color:var(--text)}
.tbl tbody tr:hover,.cmp2 tbody tr:hover{background:var(--card-2)}
.crumbs a:hover{color:var(--brass-ink)}
.ftr-t::after{transition:transform var(--m) var(--e)}

@media(prefers-reduced-motion:reduce){
  .mnav,.mnav.open .mgroup,.mnav.open .mnav-cta,
  html.js .ftr-col ul,.burger span,.burger span::before,.burger span::after,
  summary::before,details::details-content{
    transition:none!important;animation:none!important}
  .mnav{opacity:1}
  html.js .ftr-col.open ul{opacity:1}
}

/* ================= motion phase 2: set-pieces =================
   The only three places the feature scale is allowed. Everything else on the
   site uses --m. */

/* ---- display headings rise out of a mask (h2.dsp, 27 headings, 19 pages) ----
   Each line is wrapped at build time. The mask is the outer span; the inner one
   is what moves. The padding/negative-margin pair stops the mask clipping
   descenders - without it the tails of g, y and p are shaved off. */
h2.dsp .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
html.js h2.dsp .ln>span{display:block;transform:translateY(110%);
  transition:transform var(--m-big) var(--e-big)}
html.js main>section.is-in h2.dsp .ln>span{transform:none}
html.js h2.dsp .ln:nth-child(2)>span{transition-delay:70ms}
html.js h2.dsp .ln:nth-child(3)>span{transition-delay:140ms}
html.js h2.dsp .ln:nth-child(n+4)>span{transition-delay:210ms}

/* ---- the about timeline draws itself ----
   The rule and the markers already exist; they start collapsed and grow as the
   section arrives. transform only, so the layout never moves. */
html.js .tl .tl-b::after{transform:scaleY(0);transform-origin:top;
  transition:transform var(--m-big) var(--e-big)}
html.js .tl .tl-b::before{transform:scale(0);
  transition:transform var(--m-in) cubic-bezier(.34,1.4,.64,1)}
html.js main>section.is-in .tl .tl-b::after{transform:scaleY(1)}
html.js main>section.is-in .tl .tl-b::before{transform:scale(1)}
/* each year lands after the line reaches it */
html.js .tl .tl-i:nth-child(1) .tl-b::before{transition-delay:.10s}
html.js .tl .tl-i:nth-child(1) .tl-b::after{transition-delay:.10s}
html.js .tl .tl-i:nth-child(2) .tl-b::before{transition-delay:.25s}
html.js .tl .tl-i:nth-child(2) .tl-b::after{transition-delay:.25s}
html.js .tl .tl-i:nth-child(3) .tl-b::before{transition-delay:.40s}
html.js .tl .tl-i:nth-child(3) .tl-b::after{transition-delay:.40s}
html.js .tl .tl-i:nth-child(4) .tl-b::before{transition-delay:.55s}
html.js .tl .tl-i:nth-child(4) .tl-b::after{transition-delay:.55s}
html.js .tl .tl-i:nth-child(n+5) .tl-b::before{transition-delay:.70s}
html.js .tl .tl-i:nth-child(n+5) .tl-b::after{transition-delay:.70s}

@media(prefers-reduced-motion:reduce){
  html.js h2.dsp .ln>span{transform:none!important;transition:none!important}
  html.js .tl .tl-b::before,html.js .tl .tl-b::after{
    transform:none!important;transition:none!important}
}

/* ---- the till rings up a sale ----
   Triggered by the till entering the viewport, not by its section doing so.
   The section is 2,300px tall and the 2.5s reveal fallback fires regardless of
   scroll position, so gating on the section played the whole sequence 3,349px
   below the fold, to nobody. Registered with the existing observer - no second
   one - and with no fallback: if it never fires the till just sits there fully
   rendered, which is the correct still state.

   Scoped to the panel that is actually showing. Switching tabs re-renders a
   panel that was display:none, which restarts these animations - so Stock and
   Z-read deal themselves in too, rather than appearing fully formed. */
@keyframes till-line{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes till-flag{
  0%  {opacity:0;transform:scale(.9)}
  60% {opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes till-total{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
html.js .till-shell.is-in .till-panel:not([hidden]) .line{
  animation:till-line 300ms var(--e) both}
html.js .till-shell.is-in .till-panel:not([hidden]) .line:nth-child(1){animation-delay:120ms}
html.js .till-shell.is-in .till-panel:not([hidden]) .line:nth-child(2){animation-delay:230ms}
html.js .till-shell.is-in .till-panel:not([hidden]) .line:nth-child(3){animation-delay:340ms}
html.js .till-shell.is-in .till-panel:not([hidden]) .line:nth-child(4){animation-delay:450ms}
html.js .till-shell.is-in .till-panel:not([hidden]) .line:nth-child(n+5){animation-delay:560ms}
/* the age-restricted line is the third, so the flag trips just after it lands */
/* Entrance and breathe are one declaration, because they are the same
   property: declared separately the later rule replaces the earlier one and
   the flag never trips at all. The breathe starts as the trip finishes. */
html.js .till-shell.is-in .till-panel:not([hidden]) .flag.warn{
  animation:till-flag 380ms var(--e) 520ms both,
            flag-breathe 3.4s ease-in-out 1000ms infinite}
html.js .till-shell.is-in .till-panel:not([hidden]) .flag:not(.warn){
  animation:till-flag 380ms var(--e) 520ms both}
html.js .till-shell.is-in .till-panel:not([hidden]) .total{
  animation:till-total 320ms var(--e) both;animation-delay:700ms}

@media(prefers-reduced-motion:reduce){
  html.js .till-shell.is-in .till-panel .line,
  html.js .till-shell.is-in .till-panel .flag,
  html.js .till-shell.is-in .till-panel .total{animation:none!important}
}

/* ================= motion phase 3: ambient =================
   Three, not thirty. A page reads as alive at three instances and restless at
   ten, and the honest fix for wanting more is usually to make one of these
   better rather than add a fourth.

   Everything here loops, so everything here stops when it is not on screen.
   Without JS nothing is paused - the animations simply run, as they did
   before - so this can only ever make things cheaper, never break them. */
html.js .dot::after,
html.js .till-panel .flag,
html.js .band .btn-primary::after{animation-play-state:paused}
html.js .dot.amb-on::after,
html.js .till-panel .flag.amb-on,
html.js .band .btn-primary.amb-on::after{animation-play-state:running}

/* 1. the sync line keeps time with the dot beside it */
.till-bar .sp{margin-left:auto}
html.js .dot.amb-on~.sp{animation:sync-beat 2.6s infinite}
@keyframes sync-beat{0%,72%,100%{opacity:.62}12%{opacity:1}}

/* 2. a slow sheen across the main call to action - once every eight seconds,
      so it is noticed rather than watched */
.band .btn-primary{position:relative;overflow:hidden;isolation:isolate}
.band .btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:sheen 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sheen{0%,88%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* 3. the age check asks to be dealt with - the animation itself is declared
      with the sale above, since they share the property; this only defines the
      keyframes and the pause. */
@keyframes flag-breathe{0%,100%{opacity:.82}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .dot::after{animation:none;opacity:0}
  .band .btn-primary::after,
  html.js .dot.amb-on~.sp{animation:none!important}
  html.js .till-shell.is-in .till-panel .flag{animation:none!important;opacity:1}
}