/* ⚠️ unicode-range is REQUIRED on every one of these, not decoration. Without it the browser
     uses the latin file for all text and falls back per-glyph to a system font for anything it
     does not contain, so an accented name rendered mid-word in the wrong typeface. With it, the
     -ext file is fetched ONLY when such a character appears — a visitor who never types one
     downloads nothing extra.
     Ranges are Google's own, read from their CSS on 2026-08-16 rather than retyped, and are
     identical across all three families. If you add a family, take its ranges the same way:
     these are not values to reconstruct from memory.
     Hanken is one variable file across 400-700 (proved 2026-08-16: Google serves the range, and
     the file is byte-identical to the storefront copy). Space Mono is static, hence two weights. */
/* Bricolage Grotesque 500 800 — latin-ext */
  @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-500_800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  /* Bricolage Grotesque 500 800 — latin */
  @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-500_800-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;}
  /* Hanken Grotesk 400 700 — latin-ext */
  @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/hanken-grotesk-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  /* Hanken Grotesk 400 700 — latin */
  @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/hanken-grotesk-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;}
  /* Space Mono 400 — latin-ext */
  @font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/space-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  /* Space Mono 400 — latin */
  @font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/space-mono-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;}
  /* Space Mono 700 — latin-ext */
  @font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
  /* Space Mono 700 — latin */
  @font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/space-mono-700-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{
    --ink:#171513; --ink-soft:#403a35; --paper:#fff;
    --coral:#f0543c; --coral-deep:#d23b26; --coral-ink:#7c1d0f;
    --coral-wash:#fff0ec; --coral-line:#ffd7cd;
    --line:#eae6e1; --blue:#1f4dff;
    /* NEW TOKEN from the Replit palette: a warmer, slightly lifted dark, distinct from
       --ink. Used for the two dark bands and the footer. Decide whether to keep it or
       fold back to --ink before this ships. */
    --ink-warm:#211e1b;
    --dark-soft:#c9c4be;
    /* the live site's error/attention yellow. Only used for :user-invalid on the demo form,
       where a red error state would vanish against the coral band. */
    --sun:#ffcf3a;
    --display:'Bricolage Grotesque',system-ui,sans-serif;
    --body:'Hanken Grotesk',system-ui,sans-serif;
    --mono:'Space Mono',ui-monospace,monospace;
    --ease:cubic-bezier(.2,.7,.2,1);
  }
  .skip-link{position:absolute;left:14px;top:-60px;z-index:200;background:var(--ink);color:#fff;
             padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;
             font-family:var(--display);transition:top .12s var(--ease);}
  .skip-link:focus{top:14px;outline:3px solid var(--blue);outline-offset:2px;}
  /* The header is sticky at 81px, so an anchor jump lands the target UNDER it: every
     nav link put its section heading behind the bar. scroll-padding-top on the scroll
     container fixes all of them at once, including #main from the skip link, and works
     for keyboard focus scrolling too. */
  html{scroll-padding-top:96px;}
  /* The features page stacks a SECOND sticky bar (the category filter) under the
     header, 144px in total, so the homepage value left every anchor 48px underneath
     it. The footer links straight to #certs, which landed behind the filter.
     :has() scopes this to the page that actually has the filter, so the value cannot
     drift from the markup the way a hardcoded body class would. */
  html:has(.fp-filter){scroll-padding-top:164px;}
  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  /* ONE container width for the whole page. There used to be a second 960px tier for
     pricing, FAQ and the demo band, which meant the page ran 1152 x6, narrowed to 912 x3,
     then sprang back to 1152 for the footer. Sections here are distinguished by BACKGROUND
     (bone / coral-wash / dark / red / coral band), and a width change stacked on top of a
     colour change reads as a mistake rather than an intention.
     Line length is capped LOCALLY on the text that needs it (--measure below), never by
     narrowing the container: a paragraph's comfort is not a reason to drag the card, the
     band and the section edges in with it. */
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
  /* ~66 characters of Hanken at 17px. Safe as a ch unit ONLY because it is applied to the
     text element itself; ch on a CONTAINER resolves against the container's font, which is
     what broke four headlines earlier in this build. */
  :root{--measure:66ch;}
  h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-0.03em;text-wrap:balance;}
  /* Max 74px, not 92px. At 92px "Your tickets." is ~660px wide and the hero's left column is
     ~470px, so every line wrapped in two, the headline grew to 433px tall and pushed the CTAs
     below the fold. Size the display type to the column it lives in. */
  h1{font-weight:800;font-size:clamp(44px,5.6vw,74px);line-height:.96;}
  h2{font-weight:800;font-size:clamp(34px,5vw,62px);line-height:1.0;}
  h3{font-weight:700;font-size:clamp(21px,2.2vw,26px);line-height:1.15;}
  img{display:block;max-width:100%;}
  a{color:inherit;}
  section{padding:clamp(72px,9vw,132px) 0;}
  .kick{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;}
  .lede{font-size:clamp(18px,2vw,22px);color:var(--ink-soft);line-height:1.55;}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;
       font-size:17px;text-decoration:none;padding:17px 30px;border-radius:14px;border:1.5px solid transparent;cursor:pointer;min-height:56px;
       transition:transform .14s var(--ease),background .16s;}
  .btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
  .btn-coral{background:var(--coral-deep);color:#fff;box-shadow:0 10px 24px -12px rgba(210,59,38,.7);}
  .btn-coral:hover{background:#b02f1d;transform:translateY(-2px);}
  .btn-out{background:var(--paper);color:var(--ink);border-color:var(--coral-line);}
  .btn-out:hover{border-color:var(--coral-deep);color:var(--coral-ink);}
  .btn-white{background:#fff;color:var(--ink);}
  .btn-white:focus-visible{outline-color:#fff;}
  .btn-sm{padding:12px 20px;font-size:15px;min-height:46px;border-radius:12px;}

  /* ---------- 1 header ---------- */
  .hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--coral-wash);}
  .hdr-in{max-width:1200px;margin:0 auto;padding:0 24px;height:80px;display:flex;align-items:center;gap:20px;position:relative;}
  /* The real arch mark + the wordmark as LIVE TEXT, rather than the flat hatch-logo-nav.png.
     Three reasons: the PNG's wordmark is a softer charcoal where this is true --ink; it was
     rendering at 47% scale so it softened on standard-DPI screens; and a baked-in dark
     wordmark cannot go white for the footer, where the same lockup has to sit on --ink-warm.
     Bricolage Grotesque 800 is the same face the logo is drawn in. */
  /* width:fit-content matters in the footer: flex:0 0 auto does nothing for a GRID item,
     so the link stretched the full 525px cell and swallowed clicks across the whole row. */
  .logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;width:fit-content;}
  .logo img{width:30px;height:auto;}
  .logo-word{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-0.045em;color:var(--ink);line-height:1;}
  /* margin:0 auto centres the nav between the logo and the right-hand group. margin-left:auto
     shoved it up against the CTA, which is what made the bar feel crowded. */
  .hdr-nav{display:flex;gap:32px;font-weight:500;font-size:15.5px;margin:0 auto;align-items:center;align-self:stretch;}
  .hdr-nav a{text-decoration:none;}
  .hdr-nav a:hover{color:var(--coral-ink);}
  /* the in-nav Log in exists ONLY for the mobile menu; without this it renders twice */
  .login-m{display:none;}
  .hdr-right{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
  /* quiet, deliberately not a button: existing customers need it, prospects don't */
  .login{font-size:15.5px;font-weight:600;text-decoration:none;color:var(--ink-soft);white-space:nowrap;}
  .login:hover{color:var(--coral-ink);}
  .login:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px;}
  /* the logo and the four nav links were the only interactive elements on the page falling
     back to the browser's default ring. Not a 2.4.7 failure (the default IS visible), but
     it was the one inconsistent indicator on an otherwise deliberate set. */
  .logo:focus-visible,.hdr-nav a:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:6px;}
  /* mobile: burger + a persistent CTA, matching the live site. The live burger handler
     already lives in /js/site.js; the script at the foot of this file is concept-only and
     must NOT be inlined when this ports (CSP is script-src 'self'). */
  .burger{display:none;width:46px;height:46px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
          align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
  .burger:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

  /* ---------- 2 hero ---------- */
  .hero{background:var(--coral-wash);position:relative;overflow:hidden;padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(56px,7vw,104px);}
  .hero-glow{position:absolute;top:-30%;right:-14%;width:820px;height:820px;border-radius:50%;
             background:var(--coral-line);filter:blur(120px);opacity:.45;pointer-events:none;}
  .hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,4.5vw,64px);align-items:center;position:relative;z-index:1;}
  /* category pill: the headline is a benefit claim, not a category, so this tells a cold
     visitor what Hatch actually is before they read anything else */
  .pill{display:inline-block;font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--ink-soft);background:#fff;border:1px solid var(--coral-line);
        border-radius:999px;padding:9px 16px;margin-bottom:26px;}
  .hero h1 .hl{color:var(--coral-deep);}
  .hero .lede{margin:26px 0 0;max-width:38ch;color:var(--ink-soft);}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}
  /* "see it live" pill under the CTAs: a quiet, self-contained link to the live venue,
     with a live-status dot. Deliberately a pill, not an inline text link, so it reads as a
     second, lower-commitment action beneath the two buttons. */
  .hero-live{display:inline-flex;align-items:center;gap:9px;margin-top:16px;
             font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);
             background:#fff;border:1px solid var(--coral-line);border-radius:999px;padding:9px 16px;
             transition:border-color .15s var(--ease),color .15s var(--ease),transform .14s var(--ease);}
  .hero-live:hover{border-color:var(--coral-deep);color:var(--coral-ink);transform:translateY(-1px);}
  .hero-live:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
  .hero-live .lv-dot{width:8px;height:8px;border-radius:50%;background:var(--coral-deep);flex:0 0 auto;
                     box-shadow:0 0 0 4px rgba(240,84,60,.18);}
  .hero-live svg{color:var(--ink-soft);}
  .hero-mail{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-soft);margin:20px 0 0;}
  .hero-mail .d{width:8px;height:8px;border-radius:50%;background:var(--coral-deep);flex:0 0 auto;}
  .hero-mail a{color:var(--coral-ink);font-weight:600;}

  /* layered product shot: the real booking page, with a live order panel overlapping it */
  .stage{position:relative;}
  .stage-card{border-radius:22px;overflow:hidden;border:1px solid rgba(23,21,19,.09);background:#fff;
              box-shadow:0 60px 100px -60px rgba(23,21,19,.55);width:82%;}
  .stage-card img{width:100%;height:auto;}
  /* Segment landing pages put a single photo in the stage (no overlapping order panel),
     so the card fills the column. The .pw "powered by Hatch" pill still overlays it. The
     4:5 aspect + object-fit keeps every hero the same size regardless of the source image. */
  .stage.shot .stage-card{width:100%;}
  .stage.shot .stage-card img{aspect-ratio:4 / 5;object-fit:cover;}
  /* real Hatchwood Park figures: Adult skater £10.50, Junior £8.50, 3% booking fee, Pay £30.39 */
  .order{position:absolute;right:0;top:16%;width:56%;max-width:300px;background:#fff;border-radius:18px;
         padding:20px;box-shadow:0 40px 70px -40px rgba(23,21,19,.5);border:1px solid rgba(23,21,19,.07);}
  .order .ord-h{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-0.02em;margin:0 0 14px;}
  .o-row{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--ink-soft);margin-bottom:9px;}
  .o-row b{font-family:var(--mono);font-weight:400;color:var(--ink);font-size:13.5px;}
  .o-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);
         margin-top:13px;padding-top:13px;font-weight:700;font-size:16px;}
  .o-tot b{font-family:var(--mono);font-size:16px;}
  .o-pay{margin-top:15px;width:100%;background:var(--ink);color:#fff;border:0;border-radius:12px;padding:13px;
         font-family:var(--body);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:7px;}
  .o-alt{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:10px 0 0;}
  .o-trust{display:flex;flex-direction:column;gap:7px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);}
  .o-trust span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft);}

  /* decoration: coral brush swash + ink sparks, echoing the mockup */
  .swash{position:absolute;right:-4%;bottom:4%;width:210px;height:96px;pointer-events:none;z-index:-1;}
  .sparks{position:absolute;right:8%;top:-2%;pointer-events:none;color:var(--ink);}
  .pw{position:absolute;right:2%;bottom:-3%;background:#fff;border:1px solid var(--coral-line);border-radius:999px;
      padding:9px 15px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);
      box-shadow:0 14px 30px -18px rgba(23,21,19,.4);}
  .pw img{width:17px;height:auto;}
  .pw b{font-family:var(--display);font-weight:800;font-size:14px;color:var(--ink);letter-spacing:-0.03em;}

  /* ---------- 3 trust bar ---------- */
  /* Self-identification, NOT social proof. This replaced the mockup's logo wall but does a
     different job: "is this for a venue like mine?". Deliberately plain text — the mockup
     set these in mixed fonts so they would read as customer logos at a glance. */
  .bar{background:var(--paper);border-top:1px solid var(--coral-wash);border-bottom:1px solid var(--coral-wash);padding:clamp(44px,5vw,64px) 0;}
  /* no ch cap: the line needs ~765px at 34px and .wrap gives 1152px, so it sits on one
     line at desktop and wraps naturally on narrow screens */
  .bar h2{text-align:center;font-size:clamp(24px,2.9vw,34px);letter-spacing:-0.03em;margin:0 auto 26px;}
  .bar h2 .hl{color:var(--coral-deep);}
  /* no max-width: the eight chips need 1067px and .wrap gives 1152px, so they sit on one
     row at desktop. A 900px cap was forcing a second row for no reason. */
  .bar-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;}
  .bar-row span,.bar-row a{font-size:15.5px;font-weight:500;color:var(--ink);background:var(--coral-wash);
                border:1px solid var(--coral-line);border-radius:999px;padding:9px 17px;}
  /* Venue types that have their own landing page are links (currently Ice rinks); the rest
     stay plain spans. Same pill, with hover/focus to show it is tappable. As more segment
     pages ship, swap their span for an <a> here. */
  .bar-row a{text-decoration:none;transition:border-color .15s var(--ease),color .15s var(--ease);}
  .bar-row a:hover{border-color:var(--coral-deep);color:var(--coral-ink);}
  .bar-row a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

  /* ---------- 4 dark: differentiators ---------- */
  .dark{background:var(--ink-warm);color:#fff;}
  .dark h2,.dark h3{color:#fff;}
  .dark .kick{color:var(--coral-line);}
  /* 820px, not 46ch. 46ch resolves against the DIV's 17px body font, giving a 438px box that
     forced the 62px headline onto three lines. "Everything else is handled." needs 720px. */
  .dark-head{max-width:820px;margin:0 auto;text-align:center;}
  .dark-head p{color:var(--dark-soft);font-size:clamp(17px,1.8vw,20px);margin:22px 0 0;max-width:46ch;margin-inline:auto;}
  /* four across, centred head above: deliberately a different shape from the red section's
     split layout, so the two feature blocks do not read as the same slide twice */
  .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.8vw,40px);margin-top:clamp(44px,5vw,72px);}
  .cols h3{font-size:clamp(18px,1.9vw,21px);}
  .col-ic{width:54px;height:54px;border-radius:15px;background:rgba(210,59,38,.16);border:1px solid rgba(210,59,38,.4);
          display:grid;place-items:center;color:var(--coral);margin-bottom:20px;}
  .cols p{color:var(--dark-soft);margin:11px 0 0;font-size:15.5px;line-height:1.55;}
  /* The ice-rink page carries six "Running the rink" features; 3x2 reads better than 4+2.
     Desktop-only override, so the .cols responsive collapse (2-up tablet, 1-up phone) still
     applies below 980. */
  @media(min-width:981px){ .cols.cols-6{grid-template-columns:repeat(3,minmax(0,1fr));} }

  /* ---------- 5 full red ---------- */
  .red{background:var(--coral-deep);color:#fff;}
  .red h2,.red h3{color:#fff;}
  /* white, not --coral-line: coral-line on coral-deep is 3.61:1 and fails at 12.5px */
  .red .kick{color:#fff;}
  .red-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,76px);align-items:center;}
  .red-list{margin-top:clamp(34px,4vw,52px);display:flex;flex-direction:column;gap:30px;}
  .red-item{display:flex;gap:18px;}
  .red-item svg{flex:0 0 auto;margin-top:3px;}
  .red-item h3{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-0.02em;margin:0 0 7px;}
  /* solid white, not white/80: at 80% this is ~3.4:1 on coral and fails AA */
  .red-item p{margin:0;color:#fff;font-size:16px;line-height:1.55;}
  /* 2/3 matches the source photo exactly, so nothing is cropped */
  .red-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:2/3;box-shadow:0 40px 80px -50px rgba(0,0,0,.7);}
  .red-photo img{width:100%;height:100%;object-fit:cover;}
  .red-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78) 100%);}
  /* DARK glass, not white glass. A white veil over an unknown photo gives unpredictable
     contrast: measured 3.0-4.0:1 here. A dark scrim guarantees white text passes whatever
     image is behind it, which matters because venues will swap this photo. */
  .red-card{position:absolute;left:22px;right:22px;bottom:22px;z-index:1;background:rgba(18,16,15,.62);
            backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:22px;}
  /* white, not coral-line: on the glass card over a photo, coral-line measures ~3.6:1 and
     the true backdrop varies with whatever image a venue puts behind it */
  .red-card .rc-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 8px;}
  .red-card h3{font-size:23px;margin:0 0 5px;}
  .red-card p{margin:0 0 16px;font-size:14.5px;color:#fff;}
  /* .track / .rc-pc removed with the invented "76% sold" progress bar */

  /* ---------- 6 how it works ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:clamp(44px,5vw,72px);position:relative;}
  .step{text-align:center;position:relative;}
  .step-n{width:86px;height:86px;margin:0 auto 22px;border-radius:50%;background:var(--coral-wash);border:4px solid #fff;
          display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:26px;
          /* coral-ink not coral-deep: coral-deep on coral-wash is 4.31:1 */
          color:var(--coral-ink);box-shadow:0 2px 10px -4px rgba(23,21,19,.18);position:relative;z-index:1;}
  .step:last-child .step-n{background:var(--coral-deep);color:#fff;}
  .step p{color:var(--ink-soft);margin:12px 0 0;font-size:15.5px;}
  .step:not(:last-child)::before{content:"";position:absolute;top:43px;left:calc(50% + 52px);right:calc(-50% + 52px);height:2px;background:var(--coral-wash);}
  /* asterisk + footnote, same pattern the live site uses for "included in your 3%*" */
  .ast{color:var(--coral-deep);font-weight:700;}
  .ast-note{max-width:62ch;margin:clamp(34px,4vw,52px) auto 0;text-align:center;font-size:14px;
            color:var(--ink-soft);line-height:1.6;}
  /* the assisted route offered alongside the self-serve steps ("help on tap"): quieter than
     the steps, louder than the Stripe footnote below it. */
  .steps-alt{max-width:560px;margin:clamp(30px,3.6vw,48px) auto 0;text-align:center;font-size:15.5px;
             color:var(--ink-soft);line-height:1.5;background:var(--coral-wash);
             border:1px solid var(--coral-line);border-radius:16px;padding:18px 24px;}
  .steps-alt a{color:var(--coral-ink);font-weight:600;text-decoration:none;}
  .steps-alt a:hover{color:var(--coral-deep);text-decoration:underline;}
  .steps-alt a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px;}

  /* ---------- 7 pricing ---------- */
  .pricing{background:var(--coral-wash);position:relative;}
  .dots{position:absolute;inset:0;pointer-events:none;opacity:.5;
        background-image:radial-gradient(var(--coral-line) 1.6px,transparent 1.6px);background-size:24px 24px;}
  .price-card{background:#fff;border:1px solid var(--coral-line);border-radius:32px;padding:clamp(32px,4.4vw,64px);
              box-shadow:0 40px 80px -60px rgba(23,21,19,.4);position:relative;z-index:1;
              display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,60px);align-items:center;}
  .big-n{display:flex;align-items:baseline;gap:6px;}
  .big-n b{font-family:var(--display);font-weight:800;font-size:clamp(96px,13vw,160px);line-height:.82;letter-spacing:-0.06em;color:var(--coral-deep);}
  .big-n i{font-family:var(--mono);font-weight:700;font-size:clamp(34px,5vw,60px);color:var(--coral-deep);font-style:normal;}
  .price-ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
  .price-ticks li{display:flex;gap:13px;align-items:flex-start;font-size:16.5px;font-weight:500;line-height:1.4;}
  .price-ticks svg{flex:0 0 auto;color:var(--coral-deep);margin-top:2px;}
  .price-ticks li.hl-flex{background:var(--coral-wash);border:1px solid var(--coral-line);border-radius:12px;padding:9px 13px;margin:0 -13px;color:var(--coral-ink);font-weight:600;}

  /* Compact competitor comparison, folded into the card rather than given its own column.
     The 7% + 59p rate is a published figure, which is why this claim is safe where an
     unsourced "most platforms" one would not be. */
  .cmp{grid-column:1/-1;border-top:1.5px solid var(--coral-line);margin-top:clamp(8px,1.4vw,18px);padding-top:clamp(24px,2.6vw,32px);}
  .cmp-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px;}
  /* calc and comparison side by side: both describe the SAME £40 booking, so they share a
     heading and cost horizontal space rather than vertical */
  .cmp-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,48px);align-items:start;}
  .calc-row{display:flex;justify-content:space-between;gap:16px;font-size:15.5px;padding:7px 0;color:var(--ink-soft);}
  .calc-row b{font-family:var(--mono);font-weight:400;color:var(--ink);font-size:14.5px;}
  .calc-keep{display:flex;justify-content:space-between;gap:16px;border-top:1.5px solid var(--coral-line);
             margin-top:8px;padding-top:12px;font-weight:700;font-size:16.5px;}
  .calc-keep b{font-family:var(--mono);font-size:16.5px;color:var(--coral-ink);}
  .cmp-row{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:16px;align-items:center;margin-bottom:12px;}
  .cmp-row .lbl{font-size:15.5px;font-weight:500;}
  .cmp-bar{height:12px;border-radius:99px;background:var(--coral-wash);overflow:hidden;}
  .cmp-bar i{display:block;height:100%;border-radius:99px;background:var(--coral-deep);}
  .cmp-row.them .cmp-bar i{background:#cbc3ba;}
  .cmp-val{font-family:var(--mono);font-weight:700;font-size:15px;text-align:right;}
  .cmp-note{font-size:13px;color:var(--ink-soft);margin:14px 0 0;line-height:1.55;max-width:64ch;}

  /* ---------- 8 faq ----------
     Written light-first with dark overrides, because the six feature hubs alternate their
     section grounds and three of them already END on a dark section. A dark-only FAQ would
     have merged into that run and read as one section with two headings. The plus/minus
     glyphs use currentColor in the markup for the same reason. */
  .faq{border-top:1px solid var(--line);}
  .qa{border-bottom:1px solid var(--line);}
  .qa summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;list-style:none;cursor:pointer;
              padding:26px 0;font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,24px);letter-spacing:-0.02em;}
  .qa summary::-webkit-details-marker{display:none;}
  .qa summary:hover{color:var(--coral-deep);}
  .qa summary:focus-visible{outline:3px solid var(--coral-deep);outline-offset:-3px;border-radius:8px;}
  .qa-pm{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--coral-wash);display:grid;place-items:center;margin-top:3px;
         color:var(--coral-ink);transition:background .2s var(--ease),color .2s var(--ease);}
  .qa summary:hover .qa-pm{background:var(--coral-deep);color:#fff;}
  .qa[open] .qa-pm .v{display:none;}
  .qa .qa-pm .h{display:none;}
  .qa[open] .qa-pm .h{display:block;}
  /* the container is now 1152 wide, so the answer needs its own cap or it runs to ~110
     characters. This is the local fix that replaces the old 960px wrap-mid tier. */
  .qa p{margin:0;padding:0 60px 26px 0;color:var(--ink-soft);font-size:17px;line-height:1.65;max-width:var(--measure);}
  /* .hub-sec.wash IS coral-wash, so the default glyph disc vanishes into it. White reads on the
     wash exactly as the wash reads on plain white, so the affordance survives both grounds. */
  .wash .qa-pm{background:#fff;}
  .wash .qa summary:hover .qa-pm{background:var(--coral-deep);}
  .dark .faq{border-top-color:rgba(255,255,255,.12);}
  .dark .qa{border-bottom-color:rgba(255,255,255,.12);}
  .dark .qa summary:hover{color:var(--coral-line);}
  .dark .qa summary:focus-visible{outline-color:#fff;}
  .dark .qa-pm{background:rgba(255,255,255,.12);color:#fff;}
  .dark .qa p{color:var(--dark-soft);}
  /* the support answer runs to two paragraphs; without this each one carries the 26px
     bottom padding and the gap between them doubles. */
  .qa p:not(:last-child){padding-bottom:0;}
  .qa p+p{margin-top:15px;}

  /* ---------- 9 closing cta ----------
     A contained coral BAND, not a full-bleed coral section. Section 5 is already a full
     stretch of --coral-deep, so a second one would read as a repeat; a rounded object on
     bone reads as an arrival instead, and gives the dark FAQ above it something to end
     against. Kept deliberately compact: 2x2 field grid, labels inside nothing, no
     textarea (see the markup note), so the form is four inputs in two rows. */
  .close{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px);}
  .band{position:relative;background:var(--coral-deep);color:#fff;border-radius:28px;overflow:hidden;
        padding:clamp(34px,4vw,54px) clamp(24px,3.5vw,52px);text-align:center;}
  .band-arch{position:absolute;left:50%;bottom:-40%;width:120%;aspect-ratio:2/1;transform:translateX(-50%);
             background:radial-gradient(100% 100% at 50% 100%,rgba(255,255,255,.12) 0 70%,transparent 71%);pointer-events:none;}
  .band-in{position:relative;z-index:1;}
  /* the closing-band CTAs (.row) had no layout of their own, so with three buttons the two
     outline ones wrapped and touched on mobile. Flex + gap keeps them apart and centred. */
  .band .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
  .band h2{color:#fff;font-size:clamp(32px,4.6vw,56px);margin:0;line-height:1.02;}
  .band-lede{font-size:clamp(16px,1.6vw,18.5px);color:#fff;margin:14px auto 26px;max-width:46ch;font-weight:500;}
  /* the band centres everything; .hero-cta is a LEFT-aligned flex row (built for the
     homepage hero), so centre this instance instead of letting the CTA float to the left. */
  .band .hero-cta{justify-content:center;}
  /* "or book a demo" divider between the primary CTA and the demo form, so the two routes
     the band-lede offers read as distinct rather than a button hovering over a form. */
  .band-or{display:flex;align-items:center;gap:14px;max-width:740px;margin:22px auto 18px;}
  .band-or::before,.band-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.3);}
  .band-or span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;}

  /* widened from 620 when the band went to the full 1152: at 620 there were 266px of empty
     coral either side of the form, which made the band read as padding rather than as a card. */
  .demo-form{max-width:740px;margin:0 auto;text-align:left;}
  /* 2x2 rather than the live site's four stacked fields. Same four questions, half the height. */
  .df-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;}
  .df-field{display:flex;flex-direction:column;min-width:0;}
  .df-field label{font-family:var(--display);font-weight:700;font-size:14px;color:#fff;margin-bottom:5px;}
  /* NO opacity here. opacity:.85 composited white to rgb(248,226,222) over the coral
     band, which is 3.85:1 against it and fails AA for 13px/400 text. The label is
     already distinguished from its bold heading by weight and typeface, so it does not
     need dimming as well. Solid white is 4.78:1.
     This is the exact mistake this file's own notes warn about for the Replit design:
     never set text down with opacity on a coloured surface. */
  .df-opt{font-family:var(--body);font-weight:400;}
  .demo-form input{font-family:var(--body);font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #fff;
                   border-radius:11px;padding:12px 13px;width:100%;box-sizing:border-box;min-height:46px;
                   transition:box-shadow .15s var(--ease),border-color .15s var(--ease);}
  .demo-form ::placeholder{color:#6b645d;opacity:1;}
  /* :user-invalid, NOT :invalid — :invalid flags every required field on page load. */
  .demo-form input:user-invalid{border-color:var(--sun);border-width:2.5px;box-shadow:0 0 0 3px rgba(255,207,58,.45);}
  /* the blue focus ring is 1.23:1 on coral. White is the only ring that passes 1.4.11 here. */
  .band a:focus-visible,.band .btn:focus-visible,.demo-form input:focus-visible{outline:3px solid #fff;outline-offset:2px;}
  .df-submit{width:100%;margin-top:14px;justify-content:center;}
  .df-fine{font-size:13px;color:#fff;margin:12px auto 0;max-width:52ch;text-align:center;}
  .df-fine a{color:#fff;font-weight:700;}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  /* ---------- 10 footer ---------- */
  .ft{background:var(--ink-warm);color:#fff;padding:clamp(56px,7vw,88px) 0 44px;border-top:1px solid rgba(255,255,255,.1);}
  .ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,52px);}
  .ft .logo-word{color:#fff;}
  .ft-blurb{color:var(--dark-soft);max-width:38ch;margin:20px 0 0;font-size:17px;}
  .ft h3{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a8a29b;margin:0 0 20px;}
  .ft ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;}
  .ft ul a{color:var(--dark-soft);text-decoration:none;font-size:16px;}
  .ft ul a:hover{color:#fff;}
  .ft-base{margin-top:clamp(40px,5vw,68px);padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
           display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dark-soft);font-size:14px;}
  .ft-base a{color:var(--dark-soft);}
  .ft-base a:hover{color:#fff;}
  /* the email addresses are the longest items in a 1fr column and would otherwise decide
     how wide the whole grid track is. */
  .ft ul a{overflow-wrap:anywhere;}
  .ft a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:5px;}


  @media(max-width:980px){
    /* the overlapping order panel needs room; below this it sits under the card instead */
    .stage-card{width:100%;}
    /* margin-top was -52px, tucking the panel over the card the way it does on desktop.
       Two problems on a phone. (1) Both boxes are position:static, and CSS paints ALL
       block backgrounds before ANY inline text - so the panel's white background covered
       the card, but the card's session-row TEXT still painted on top of the panel, which
       read as the two overlapping. (2) Even painted correctly it would hide 52px of a
       real screenshot, which is a whole session row. So on mobile the panel simply sits
       below the card. position:relative + z-index also make the stacking explicit, so
       this cannot resurface if the margin ever comes back. */
    .order{position:relative;inset:auto;z-index:1;width:100%;max-width:none;margin-top:14px;
           margin-left:auto;margin-right:auto;}
    .swash,.sparks{display:none;}
    .pw{position:static;width:fit-content;margin:18px auto 0;}
    /* .hdr-nav carries margin:0 auto, and on desktop that auto margin is the only thing
       pushing .hdr-right over to the edge. Hiding the nav on mobile removed it, so logo,
       CTA and burger packed to the left and all the slack fell on the right - a 40px gap
       at 390 and ~77px on a 430-wide phone. Put the push back explicitly. */
    .hdr-nav{display:none;}
    .hdr-right{margin-left:auto;}
    .burger{display:flex;}
    .login{display:none;}                 /* moves into the open menu instead */
    .hdr-nav.open{display:flex;position:absolute;top:80px;left:0;right:0;flex-direction:column;align-items:stretch;
                  gap:4px;background:#fff;border-bottom:1px solid var(--line);padding:14px 24px 20px;
                  box-shadow:0 24px 40px -30px rgba(23,21,19,.4);}
    .hdr-nav.open a{padding:13px 4px;font-size:17px;}
    .hdr-nav.open .login-m{display:block;border-top:1px solid var(--line);margin-top:8px;padding-top:16px;color:var(--ink-soft);}
    .hero-grid,.red-grid,.price-card,.cmp-split,.df-grid{grid-template-columns:minmax(0,1fr);}
    /* Footer: two columns on mobile (the brand blurb spans both), so four stacked link
       lists don't run the footer to two screens. Tighter link gaps to match. */
    .ft-grid{grid-template-columns:1fr 1fr;gap:26px 22px;}
    .ft-grid>div:first-child{grid-column:1 / -1;}
    .ft ul{gap:10px;}
    .cols{grid-template-columns:1fr 1fr;gap:36px 28px;}
    .steps{grid-template-columns:1fr 1fr;gap:38px 26px;}
    .step:not(:last-child)::before{display:none;}
    .red-photo{aspect-ratio:4/3;}
  }

  /* 1.4.10 Reflow. At 320px the header ran to 350px and scrolled the whole document
     sideways: logo (114) + gap + CTA + burger (195) + 48px of padding does not fit.
     The live site failed this exact check, so it is worth catching here.
     The CTA stays: the bar is sticky, so it is the only always-visible way to convert.
     Breakpoint measured, not guessed: the full-size bar needs 366px, so it holds at 375
     and 390 and only shrinks on the genuinely narrow phones below that. */
  @media (max-width:365px){
    /* .wrap comes too, or the header sits 8px left of every other section and the page
       loses the single content edge it was just given. */
    .wrap,.hdr-in{padding-left:16px;padding-right:16px;}
    .hdr-in{gap:10px;}
    .logo img{width:26px;}
    .logo-word{font-size:22px;}
    .hdr-right{gap:10px;}
    .btn-sm{padding:9px 13px;font-size:14px;}
    .burger{width:42px;height:42px;}
  }
  @media(max-width:600px){
    .cols{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .bar-row{gap:14px 26px;}
    .qa p{padding-right:0;}
  }


  /* ---------- externalised inline style="" attributes ----------
     style-src 'self' drops every inline style attribute in production, so these
     cannot live on the element. .w-hatch/.w-them are the load-bearing pair: as
     inline widths they were silently stripped and both comparison bars collapsed
     to zero. site.css carries an identical section for the same reason. */
  .bar-head{text-align:center;max-width:700px;margin:0 auto;}
  .above-dots{position:relative;z-index:1;}
  .sect-head{text-align:center;margin-bottom:clamp(34px,4vw,56px);}
  .kick-ink{color:var(--coral-ink);}
  .sect-lede{margin:18px auto 0;max-width:46ch;}
  .price-of{font-size:19px;font-weight:600;margin:18px 0 0;}
  .price-fine{color:var(--ink-soft);margin:6px 0 0;}
  .cmp-bar i.w-hatch{width:39%;}
  .cmp-bar i.w-them{width:99%;}
  .df-alt{margin-top:16px;font-family:var(--mono);font-size:12.5px;}


  /* ---------- cookie banner ----------
     Copied from site.css. index.html deliberately does NOT load site.css: that sheet
     defines .band/.btn/.hero/.wrap/.dark for the other pages and those names collide
     with the v4 definitions above. The other four pages keep site.css untouched. */
  #cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:560px;margin:0 auto;
    background:var(--ink);color:#fff;border-radius:14px;padding:16px 18px;
    box-shadow:0 12px 44px rgba(0,0,0,.28);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:14px;line-height:1.55;}
  #cookie-banner p{margin:0 0 12px;}
  #cookie-banner a{color:#fff;text-underline-offset:2px;}
  #cookie-banner .cb-row{display:flex;gap:10px;flex-wrap:wrap;}
  #cookie-banner button{font:inherit;font-weight:700;border:0;border-radius:10px;padding:10px 20px;cursor:pointer;}
  #cookie-accept{background:var(--coral-deep);color:#fff;}
  #cookie-decline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);}

  /* Respect a reduced-motion preference. The four transitions here are short hover and
     focus micro-interactions, so this is 2.3.3 Animation from Interactions, which is AAA
     rather than AA. Cheap to honour, so honoured. site.js already switches its FAQ
     deep-link scrolling from smooth to auto under the same query. */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;
                         animation-iteration-count:1 !important;scroll-behavior:auto !important;}
  }

  /* ============================================================================
     FEATURES PAGE
     Layout adapted from a Replit concept: a sticky category filter, numbered
     section headers and a three-column card grid. Shares this stylesheet with the
     homepage so the header, footer, buttons and tokens are literally the same
     rules rather than a copy that drifts.
     The concept's content was NOT used: about a third of its 81 claims described
     features that do not exist. Every card below comes from the audited list.
     ============================================================================ */

  /* --- hero --- */
  .fp-hero{background:var(--coral-wash);position:relative;overflow:hidden;
           padding:clamp(44px,6vw,84px) 0 clamp(40px,5vw,72px);}
  .fp-hero h1{font-size:clamp(38px,6.4vw,74px);line-height:.96;margin:14px 0 0;max-width:16ch;}
  .fp-hero .lede{margin:20px 0 28px;max-width:56ch;}
  .fp-hero .row{display:flex;gap:14px;flex-wrap:wrap;}

  /* --- sticky category filter ---
     top:81px, NOT 80: .hdr-in is 80px tall and .hdr adds a 1px bottom border, so the
     header occupies 81px. At 80 the filter rode up over that border on scroll. Both
     bars are sticky, so the offset has to match the header exactly. --- */
  .fp-filter{position:sticky;top:81px;z-index:50;background:#fff;
             border-bottom:1px solid var(--coral-wash);}
  /* WRAPS on desktop, SCROLLS on narrow. At 1440 the eleven chips needed 1298px in a
     1152px track, so two were clipped with nothing to show the bar scrolled sideways.
     flex-wrap only breaks when it has to, so wide screens still get one line and the
     second line appears where it is genuinely needed. Below 980 it goes back to a
     scroller: wrapping there would be four lines of sticky furniture. */
  .fp-filter-in{display:flex;flex-wrap:wrap;gap:8px;padding:12px 24px;
                max-width:1200px;margin:0 auto;scrollbar-width:none;}
  .fp-filter-in::-webkit-scrollbar{display:none;}
  .fp-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
           background:var(--coral-wash);color:var(--ink);font-family:var(--body);
           font-size:14.5px;font-weight:600;padding:9px 13px;border-radius:999px;
           min-height:38px;transition:background .15s var(--ease),color .15s var(--ease);}
  .fp-chip:hover{background:var(--coral-line);}
  .fp-chip[aria-pressed="true"]{background:var(--coral-deep);color:#fff;}
  .fp-chip:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
  .fp-chip svg{flex:0 0 auto;}

  /* --- category sections --- */
  .fcat{padding:clamp(56px,7vw,104px) 0;}
  .fcat.alt{background:var(--bone);}
  .fcat[hidden]{display:none;}
  .fcat-head{margin-bottom:clamp(30px,4vw,52px);}
  .fcat-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .fcat-num{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--ink-soft);}
  .fcat-rule{width:1px;height:15px;background:var(--line);}
  .fcat-kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;
               text-transform:uppercase;color:var(--coral-ink);}
  .fcat h2{font-size:clamp(28px,4vw,52px);line-height:.98;max-width:22ch;}
  .fcat-lede{color:var(--ink-soft);font-size:clamp(16px,1.7vw,19px);margin:16px 0 0;max-width:58ch;}

  /* --- feature cards --- */
  .fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  .fitem{display:flex;gap:12px;align-items:flex-start;background:#fff;
         border:1px solid var(--coral-wash);border-radius:16px;padding:20px 20px 22px;
         transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
  .fcat.alt .fitem{border-color:var(--line);}
  .fitem:hover{border-color:var(--coral-line);box-shadow:0 8px 24px -10px rgba(210,59,38,.16);}
  .fitem svg{flex:0 0 auto;color:var(--coral-deep);margin-top:2px;}
  .fitem h3{font-size:16.5px;line-height:1.22;margin:0 0 6px;letter-spacing:-0.02em;}
  .fitem p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}

  /* --- empty state for the filter --- */
  .fp-none{padding:clamp(56px,7vw,96px) 0;text-align:center;color:var(--ink-soft);}

  @media(max-width:980px){
    .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .fp-filter{top:81px;}
    /* back to a single scrolling row: eleven wrapped chips would be four lines */
    .fp-filter-in{flex-wrap:nowrap;overflow-x:auto;}
  }
  @media(max-width:640px){
    .fgrid{grid-template-columns:minmax(0,1fr);}
  }

  /* .hl was scoped to .hero h1 and .bar h2 only, so the features headline lost its
     accent. Scope it to the features hero too rather than making it global, which
     would leak the colour into any heading that happens to use the class. */
  .fp-hero h1 .hl{color:var(--coral-deep);}
  /* outline button ON a coral surface: the standard .btn-out border is --line, which
     is invisible against coral. White at 40% is 2.4:1 against --coral-deep, so this
     uses a solid white border to clear 1.4.11's 3:1 for a control boundary. */
  .btn-out-w{background:transparent;color:#fff;border:1.6px solid #fff;}
  .btn-out-w:hover{background:rgba(255,255,255,.14);}

  /* --- thanks page ---------------------------------------------------------
     The post-submit destination. Ported onto v4 so the header and nav match the
     rest of the site (3.2.3 Consistent Navigation is an AA criterion), which also
     retires css/site.css: this was its last consumer. --- */
  .thanks{padding:clamp(52px,7vw,96px) 0;}
  .thanks .band{text-align:center;}
  .thanks-next{max-width:56ch;margin:clamp(30px,4vw,48px) auto 0;text-align:center;}
  .thanks-next h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 12px;}
  .thanks-next p{color:var(--ink-soft);margin:0 0 12px;}
  .thanks-next a{color:var(--coral-ink);font-weight:600;}
  .thanks-back{font-family:var(--mono);font-size:13.5px;margin-top:20px;}
  /* the quiet contact pill inside the coral band */
  .band-note{display:flex;width:fit-content;max-width:100%;align-items:center;justify-content:center;
             gap:9px;font-family:var(--mono);font-size:13px;color:#fff;margin:24px auto 0;
             background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.26);
             padding:9px 18px;border-radius:999px;text-wrap:balance;overflow-wrap:anywhere;}
  .band-note>span{min-width:0;}
  .band-note a{color:#fff;font-weight:700;}
  .band-dot{width:7px;height:7px;border-radius:50%;background:#fff;
            box-shadow:0 0 0 4px rgba(255,255,255,.24);flex:0 0 auto;}

  /* Visually hidden but available to assistive tech. Not display:none, which would
     remove it from the accessibility tree and defeat the point. */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

  /* ============================================================================
     FEATURES MEGA-MENU  (header dropdown, shared across pages)
     Progressive enhancement, three layers:
       - JS OFF  : "Features" is a plain link to /features.html; on desktop the
                   panel still opens on :hover / :focus-within (pure CSS), and a
                   click on the link always reaches the full features page.
       - JS ON   : a caret button toggles the panel for touch / click, Escape and
                   an outside click close it. site.js adds html.js, which is what
                   reveals the caret — so it never appears as a dead control.
       - Mobile  : the panel is suppressed; "Features" is just a link into the
                   burger menu, and features.html already carries the category chips.
     ============================================================================ */
  /* align-self:stretch makes the Features column fill the full 80px header height, so the
     hover region reaches the header's bottom edge. Without it the trigger is a ~22px band
     centred in the bar, leaving ~30px of dead header below "Features" that dropped the
     hover before the pointer reached the panel. Pairs with the .mega::before bridge, which
     then only has to span the small remaining gap below the bar. */
  .nav-mega{position:static;display:flex;align-items:center;align-self:stretch;gap:3px;}
  .nav-mega-link{text-decoration:none;}
  .nav-mega-link:hover{color:var(--coral-ink);}
  /* the caret only does something with JS (touch/click toggle), so it is hidden
     until site.js sets html.js. Without JS the desktop hover/focus path still
     opens the panel and a dead caret would just be noise. */
  .nav-caret{display:none;}
  .js .nav-caret{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
     border:0;background:none;cursor:pointer;color:var(--ink-soft);border-radius:6px;padding:0;}
  .js .nav-caret:hover{color:var(--coral-ink);}
  .nav-caret:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
  .nav-caret svg{transition:transform .2s var(--ease);}

  /* the panel is anchored to the sticky header (.hdr-in is position:relative) and
     centred under it. Off by default; shown on hover / focus-within / .is-open. */
  .mega{position:absolute;top:calc(100% + 10px);left:50%;
        transform:translateX(-50%) translateY(-6px);
        width:min(940px,calc(100vw - 32px));background:#fff;border:1px solid var(--coral-wash);
        border-radius:20px;box-shadow:0 34px 66px -34px rgba(23,21,19,.42);padding:22px 22px 18px;
        opacity:0;visibility:hidden;pointer-events:none;z-index:70;
        transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;}
  /* Transparent bridge across the visual gap to the trigger. Hover only holds while the
     pointer stays inside .nav-mega, and the gap between "Features" and the panel is over
     the header, not the menu, so moving down into the panel used to cross a dead zone and
     close it. The panel is a descendant of .nav-mega, so extending its box up over the gap
     keeps the pointer "inside" the menu the whole way. Inherits the panel's pointer-events,
     so it is inert until the panel is actually open. */
  .mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;}
  .nav-mega:hover .mega,.nav-mega:focus-within .mega,.nav-mega.is-open .mega{
     opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .nav-mega:hover .nav-caret svg,.nav-mega.is-open .nav-caret svg{transform:rotate(180deg);}

  .mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 22px;}
  .mega-col{padding:12px 12px 10px;border-radius:14px;transition:background .15s var(--ease);}
  .mega-col:hover{background:var(--coral-wash);}
  .mega-hub{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;
            font-size:16px;letter-spacing:-0.02em;text-decoration:none;color:var(--ink);margin-bottom:3px;}
  .mega-hub:hover{color:var(--coral-ink);}
  .mega-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
           background:var(--coral-wash);color:var(--coral-deep);}
  .mega-col:hover .mega-ic{background:#fff;}
  .mega-sub{display:flex;flex-direction:column;padding-left:40px;}
  .mega-sub a{text-decoration:none;color:var(--ink-soft);font-size:13.5px;font-weight:500;
              line-height:1.35;padding:4px 0;}
  .mega-sub a:hover{color:var(--coral-ink);}
  .mega-hub:focus-visible,.mega-sub a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px;}
  .mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
             margin-top:14px;padding-top:14px;border-top:1px solid var(--coral-wash);}
  .mf-all{font-family:var(--body);font-weight:600;font-size:14.5px;text-decoration:none;
          color:var(--coral-ink);display:inline-flex;align-items:center;gap:8px;}
  .mf-all:hover{color:var(--coral-deep);}
  .mf-all:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px;}

  /* ============================================================================
     FEATURE HUB PAGE  (one job-shaped category, e.g. /features/booking-page.html)
     A DIFFERENT shape from features.html on purpose: features.html is the flat
     "all 76" index of uniform cards; a hub is art-directed to its own job. Each
     hub earns its own focal visual built from Hatch's own storefront language
     (session chips, live spaces, Space Mono prices, the day/after-dark flip) so
     the page shows the product, not a stock illustration.
     ============================================================================ */
  /* --- breadcrumb + hero --- */
  .hub-hero{background:var(--coral-wash);position:relative;overflow:hidden;
            padding:clamp(38px,5vw,76px) 0 clamp(44px,5.5vw,84px);}
  .hub-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4.4vw,60px);
            align-items:center;position:relative;z-index:1;}
  .crumb{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
         letter-spacing:.06em;color:var(--ink-soft);margin-bottom:18px;}
  .crumb a{color:var(--coral-ink);text-decoration:none;}
  .crumb a:hover{text-decoration:underline;}
  .crumb a:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px;}
  .crumb svg{opacity:.5;}
  .hub-hero h1{font-size:clamp(37px,5.6vw,66px);line-height:.98;margin:0;max-width:15ch;}
  .hub-hero h1 .hl{color:var(--coral-deep);}
  .hub-hero .lede{margin:22px 0 28px;max-width:50ch;}
  .hub-hero .row{display:flex;gap:12px;flex-wrap:wrap;}

  /* --- storefront preview: a day card with the after-dark card peeking behind,
         echoing the homepage's layered .stage + .order. Both are real storefront
         furniture, so the visual IS the feature set. --- */
  .sf{position:relative;padding:6px 0;}
  .sf-card{border-radius:20px;border:1px solid rgba(23,21,19,.1);overflow:hidden;}
  .sf-card.day{position:relative;z-index:2;width:82%;background:#fff;color:var(--ink);
               box-shadow:0 46px 84px -50px rgba(23,21,19,.55);}
  .sf-card.dark{position:absolute;right:0;top:-20px;width:60%;z-index:1;
                transform:rotate(3deg);transform-origin:top right;
                background:var(--ink-warm);color:#fff;border-color:rgba(255,255,255,.14);
                box-shadow:0 34px 60px -40px rgba(0,0,0,.6);}
  .sf-top{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line);}
  .sf-card.dark .sf-top{border-bottom-color:rgba(255,255,255,.12);}
  .sf-logo{width:20px;height:20px;border-radius:6px;background:var(--coral-deep);flex:0 0 auto;}
  .sf-name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-0.03em;}
  .sf-surface{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
              text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);
              border-radius:999px;padding:3px 9px;}
  .sf-card.dark .sf-surface{color:var(--dark-soft);border-color:rgba(255,255,255,.2);}
  .sf-body{padding:15px 16px 16px;}
  .sf-on{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--ink-soft);margin:0 0 11px;}
  .sf-card.dark .sf-on{color:var(--dark-soft);}
  .sf-sessions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
  .sf-sessions li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
                  border-radius:11px;padding:10px 12px;}
  .sf-card.dark .sf-sessions li{border-color:rgba(255,255,255,.14);}
  .sf-t{font-family:var(--mono);font-weight:700;font-size:14px;}
  .sf-sp{margin-left:auto;font-size:12.5px;color:var(--ink-soft);font-weight:500;}
  .sf-card.dark .sf-sp{color:var(--dark-soft);}
  .sf-sp.low{color:var(--coral-ink);font-weight:600;}
  .sf-card.dark .sf-sp.low{color:#ff9d88;}   /* coral-ink is too dark on ink-warm; lift it */
  .sf-sessions li.out{opacity:.62;}
  .sf-sessions li.out .sf-t{text-decoration:line-through;}
  .sf-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px;}
  .sf-from{font-size:13px;color:var(--ink-soft);}
  .sf-card.dark .sf-from{color:var(--dark-soft);}
  .sf-from b{font-family:var(--mono);font-weight:700;font-size:15px;color:inherit;}
  .sf-book{font-family:var(--body);font-weight:600;font-size:13px;color:#fff;
           background:var(--coral-deep);border-radius:9px;padding:8px 16px;}
  .sf-cap{display:flex;align-items:center;gap:8px;justify-content:flex-end;
          font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:16px;}
  .sf-cap .d{width:7px;height:7px;border-radius:50%;background:var(--coral-deep);}

  /* --- section head shared by hub body sections --- */
  .hub-sec{padding:clamp(56px,7vw,104px) 0;}
  .hub-head{max-width:60ch;margin-bottom:clamp(28px,3.6vw,48px);}
  .hub-kick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
            color:var(--coral-ink);display:block;margin-bottom:14px;}
  .hub-sec h2{font-size:clamp(28px,3.8vw,46px);line-height:1.0;max-width:20ch;}
  .hub-sec h2 .hl{color:var(--coral-deep);}
  .hub-lede{color:var(--ink-soft);font-size:clamp(16px,1.7vw,19px);margin:16px 0 0;max-width:56ch;}
  /* the head lives on a dark surface in the "get found" section: coral-ink and
     ink-soft both fail on ink-warm, and coral-deep on ink-warm is only 3.3:1. Lift
     each to a tone that clears AA — the same move .dark .kick already makes. */
  .hub-sec.dark .hub-kick{color:var(--coral-line);}
  .hub-sec.dark .hub-lede{color:var(--dark-soft);}
  .hub-sec.dark h2 .hl{color:var(--coral);}

  /* --- editorial feature list: hairline-separated rows in two columns. Chosen to
         read as an index, NOT as the bordered card grid on features.html. --- */
  .hub-list{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;}
  .fx{display:flex;gap:13px;padding:18px 0;border-top:1px solid var(--line);}
  .fx:nth-child(-n+2){border-top:0;padding-top:4px;}
  .fx-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--coral-deep);margin-top:8px;}
  .fx h3{font-size:17.5px;line-height:1.2;margin:0 0 5px;letter-spacing:-0.02em;}
  .fx p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}

  /* --- "get found" dark split: previews on the left, feature list on the right --- */
  .found-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,4.4vw,60px);align-items:start;}
  .found-vis{display:flex;flex-direction:column;gap:16px;position:sticky;top:104px;}
  .vis-cap{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
           color:var(--dark-soft);margin:0 0 2px;}
  /* link-unfurl card (how a shared link previews) */
  .unfurl{margin:0;background:#fff;border-radius:16px;overflow:hidden;
          box-shadow:0 30px 56px -34px rgba(0,0,0,.6);}
  .uf-img{aspect-ratio:16/7;background:
          radial-gradient(120% 140% at 82% 12%,var(--coral) 0,var(--coral-deep) 46%,var(--coral-ink) 100%);}
  .uf-meta{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;}
  .uf-site{font-size:12px;color:var(--ink-soft);}
  .uf-title{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-0.02em;color:var(--ink);}
  .uf-desc{font-size:13px;color:var(--ink-soft);line-height:1.45;}
  /* search-result snippet (how structured data shows up) */
  .serp{background:#fff;border-radius:16px;padding:16px 18px;
        box-shadow:0 30px 56px -34px rgba(0,0,0,.6);}
  .serp-url{display:block;font-size:12.5px;color:#3b7a44;margin-bottom:3px;}
  .serp-title{display:block;font-family:var(--display);font-weight:700;font-size:18px;
              letter-spacing:-0.02em;color:#1a3bd6;margin-bottom:5px;}
  .serp-rich{font-size:13.5px;color:var(--ink-soft);}
  .serp-rich b{font-family:var(--mono);font-weight:700;color:var(--ink);}
  /* dark variant of the editorial list */
  .hub-list.on-dark{grid-template-columns:1fr;gap:0;}
  .on-dark .fx{border-top-color:rgba(255,255,255,.13);}
  .on-dark .fx:first-child{border-top:0;padding-top:4px;}
  .on-dark .fx:nth-child(2){border-top:1px solid rgba(255,255,255,.13);padding-top:18px;}
  .on-dark .fx h3{color:#fff;}
  .on-dark .fx p{color:var(--dark-soft);}

  @media(max-width:980px){
    .nav-mega{display:block;}
    .nav-caret{display:none !important;}
    /* In the burger the panel flattens to a simple indented list of the six hubs, so
       mobile gets the same navigation without the desktop mega furniture (icons, the
       sub-links, the CTA row). "Features" stays a link to the full features page. */
    .mega{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
          width:auto;max-width:none;background:none;border:0;box-shadow:none;border-radius:0;
          padding:0 0 6px;z-index:auto;}
    .mega::before{display:none;}
    .mega-grid{display:block;}
    .mega-col{padding:0;}
    .mega-col:hover{background:none;}
    .mega-ic,.mega-sub,.mega-foot{display:none;}
    .hdr-nav.open .mega-hub{font-family:var(--body);font-size:15px;font-weight:500;
                            color:var(--ink-soft);padding:10px 4px 10px 16px;}
    .hdr-nav.open .mega-hub:hover{color:var(--coral-ink);}
    .hub-grid{grid-template-columns:minmax(0,1fr);}
    /* the after-dark card drops below the day card instead of peeking behind it */
    .sf-card.day{width:100%;}
    .sf-card.dark{position:relative;right:auto;top:auto;width:100%;margin-top:14px;transform:none;}
    .sf-cap{justify-content:flex-start;}
    .found-grid{grid-template-columns:minmax(0,1fr);}
    .found-vis{position:static;}
  }
  @media(max-width:640px){
    .hub-list{grid-template-columns:1fr;}
    /* back to a single column: the second item is now row 2 and needs its rule back */
    .hub-list .fx:nth-child(2){border-top:1px solid var(--line);padding-top:18px;}
  }

  /* ---- hub section surface variant (paper is the default; dark reuses .dark) ---- */
  .hub-sec.wash{background:var(--coral-wash);}

  /* ============================================================================
     HUB FOCAL VISUALS  (one per hub, each built from real product furniture so the
     visual carries the category rather than a stock illustration)
     ============================================================================ */

  /* order card -- Selling & payments hero */
  .ordc{background:#fff;border:1px solid var(--coral-line);border-radius:20px;padding:22px 22px 20px;
        box-shadow:0 46px 84px -50px rgba(23,21,19,.5);max-width:380px;margin-left:auto;}
  .ordc-h{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.02em;margin:0 0 15px;}
  .or{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;color:var(--ink-soft);margin-bottom:10px;}
  .or b{font-family:var(--mono);font-weight:400;color:var(--ink);font-size:14px;}
  .ordc-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);
            margin-top:6px;padding-top:13px;font-weight:700;font-size:16px;}
  .ordc-tot b{font-family:var(--mono);font-size:17px;}
  .ordc-pay{margin-top:15px;background:var(--ink);color:#fff;border-radius:12px;padding:13px;text-align:center;font-weight:600;font-size:15px;}
  .ordc-alt{text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);margin:11px 0 0;}

  /* keep figures -- Payments (sits on a dark section) */
  .keep{display:flex;flex-direction:column;gap:16px;}
  .keep-row{display:flex;align-items:baseline;gap:14px;}
  .keep-n{font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.05em;
          font-size:clamp(38px,6vw,60px);color:var(--dark-soft);}
  .keep-row.big .keep-n{color:var(--coral);font-size:clamp(64px,9vw,104px);}
  .keep-l{font-size:15px;color:var(--dark-soft);}
  .keep-row.big .keep-l{color:#fff;font-weight:600;font-size:17px;}
  .keep-note{color:var(--dark-soft);font-size:14px;margin:4px 0 0;max-width:36ch;line-height:1.55;}

  /* today dashboard -- On the day hero */
  .today{background:#fff;border:1px solid rgba(23,21,19,.1);border-radius:20px;overflow:hidden;
         box-shadow:0 46px 84px -50px rgba(23,21,19,.5);max-width:400px;margin-left:auto;}
  .td-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:var(--ink-warm);color:#fff;}
  .tw{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.03em;}
  .td-date{font-family:var(--mono);font-size:12px;color:var(--dark-soft);}
  .tstats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);}
  .ts{padding:16px 10px;text-align:center;border-right:1px solid var(--line);}
  .ts:last-child{border-right:0;}
  .ts-n{display:block;font-family:var(--mono);font-weight:700;font-size:21px;letter-spacing:-.02em;}
  .ts-l{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px;}
  .tsess{list-style:none;margin:0;padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px;}
  .tsess li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;}
  .td-ci{margin-left:auto;font-size:12.5px;color:var(--ink-soft);}

  /* loop -- Marketing hero */
  .loop{display:flex;flex-direction:column;gap:11px;max-width:370px;margin-left:auto;}
  .lp{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--coral-line);border-radius:14px;
      padding:15px 18px;box-shadow:0 20px 44px -30px rgba(23,21,19,.3);}
  .lp-n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--coral-wash);color:var(--coral-ink);
        font-family:var(--mono);font-weight:700;display:grid;place-items:center;font-size:15px;}
  .lp b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.02em;}
  .lp .lp-d{display:block;font-size:13px;color:var(--ink-soft);margin-top:1px;}
  .loop-back{display:flex;align-items:center;gap:8px;justify-content:center;font-family:var(--mono);
             font-size:11.5px;letter-spacing:.04em;color:var(--coral-ink);margin-top:2px;}

  /* report tiles -- Reporting hero */
  .rtiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:400px;margin-left:auto;}
  .rt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 16px 15px;
      box-shadow:0 20px 44px -30px rgba(23,21,19,.28);}
  .rt.wide{grid-column:1/-1;}
  .rt-l{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:7px;}
  .rt-n{font-family:var(--mono);font-weight:700;font-size:23px;letter-spacing:-.02em;}
  /* delta is never colour-alone: the arrow glyph + sign carry direction, colour reinforces */
  .rt-d{font-size:12.5px;font-weight:600;margin-left:8px;}
  .rt-d.up{color:#1f7a3d;}
  .rbars{display:flex;align-items:flex-end;gap:6px;height:46px;margin-top:4px;}
  .rbars i{flex:1;background:var(--coral-line);border-radius:4px 4px 0 0;}
  .rbars i.on{background:var(--coral-deep);}

  /* roles + credentials -- Team, venues & trust */
  .roles{background:#fff;border:1px solid rgba(23,21,19,.1);border-radius:20px;overflow:hidden;
         box-shadow:0 46px 84px -50px rgba(23,21,19,.5);max-width:400px;margin-left:auto;}
  .roles-h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
           margin:0;padding:15px 18px;border-bottom:1px solid var(--line);}
  .role{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);}
  .role b{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.02em;}
  .rk{font-size:13px;color:var(--ink-soft);}
  .venue-switch{display:flex;align-items:center;gap:9px;padding:14px 18px;background:var(--coral-wash);
                font-size:13.5px;color:var(--coral-ink);font-weight:600;}
  .creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
  .cred{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;
        background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 15px;}
  .cred svg{color:var(--coral);flex:0 0 auto;}

  /* featured callout -- lifts a standout feature (guest self-service) out of the list and
     gives it a small "manage your booking" panel, so a high-value item does not read as
     just another row. One spotlight per section, so it stays an accent, not scaffolding. */
  .spotlight{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,46px);align-items:center;
             background:var(--coral-wash);border:1px solid var(--coral-line);border-radius:22px;
             padding:clamp(26px,3vw,40px);margin-bottom:clamp(30px,3.6vw,48px);}
  .sp-k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-ink);}
  .spotlight h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;line-height:1.08;margin:12px 0 0;}
  .spotlight p{color:var(--ink-soft);margin:13px 0 0;font-size:16px;line-height:1.55;max-width:44ch;}
  .sp-acts{display:flex;flex-direction:column;gap:10px;}
  .sp-act{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--coral-line);
          border-radius:13px;padding:13px 15px;font-size:15px;font-weight:600;}
  .sp-act svg{flex:0 0 auto;color:var(--coral-deep);}

  @media(max-width:980px){
    /* every hero visual centres and drops its right-align when the grid stacks */
    .ordc,.today,.roles,.rtiles,.loop{margin:0 auto;}
  }
  @media(max-width:720px){
    .spotlight{grid-template-columns:1fr;gap:24px;}
  }