/* =============================================================================
   site.css — the PUBLIC MARKETING pages: /, /privacy, /terms
   -----------------------------------------------------------------------------
   ⚠ THIS IS NOT app.css AND MUST NOT BECOME IT.

   app.css styles the logged-in application and carries PER-TENANT BRANDING —
   the server injects a <style> block overriding --brand/--plum/--soft/etc for
   whichever salon is being viewed. These three pages have NO tenant. They are
   HaiBooking's own pages and must look like HaiBooking's, never like one
   salon's. `branding.mjs` asserts they never load branding.js.

   WHY THIS FILE EXISTS RATHER THAN A <style> BLOCK IN EACH PAGE.
   Three pages sharing one palette is three copies waiting to diverge — the
   suite count lived in nine files and went stale in eight of them the same day.
   One file, three <link>s.

   ⚠ THE PALETTE IS BLUE AND app.css's IS ROSE. DELIBERATELY DIFFERENT.

   -----------------------------------------------------------------------------
   ⚠⚠ EVERY COLOUR PAIRING HERE WAS MEASURED, NOT CHOSEN BY EYE.

   Text pairings clear 4.5:1; the focus ring clears 3.0:1 against EVERY surface
   it can land on. Three candidate values were rejected by measurement while
   writing this file:
     - the first blue draft's --brand (4.19:1 as link text — too light)
     - --focus #5f8ccf (2.93:1 on the hero wash — passed on white, failed there)
     - --accent as text on white (2.16:1 — see the warning on --accent below)
   ⇒ If you change a colour, re-measure. "It looks fine" is how the first two
   of those got as far as they did.
   ============================================================================= */

:root{
  --ink:#1b2230; --bg:#f1f4f9; --card:#ffffff;
  --brand:#2f5fa8; --brand-dark:#24528f; --plum:#28456f;
  --muted:#5f6a7d; --line:#dde4ee; --soft:#f5f8fc;

  /* Depth. The page was "really plain" (Hai, 2026-08-13) because everything sat
     on one flat tint — these give the layout somewhere to sit. */
  --deep:#16294a;        /* footer, and the dark band. White on it = 14.5:1 */
  --deep-2:#1d3560;      /* gradient partner for --deep */
  --hero:#e7eef9;        /* the hero wash */
  --deep-soft:#c8d6ee;   /* muted text ON --deep. 9.9:1 */

  /* ⚠⚠ --accent IS FOR DARK SURFACES ONLY. 2.16:1 on white — it is NOT a text
     colour on a light background and never will be at this lightness. Darkening
     it enough for white (≈#96600f) makes it unusable on --deep (2.7:1), so
     there is no single value that does both. Use it on --deep, or as a
     non-text rule/underline where contrast minimums do not apply. */
  --accent:#e8a33d;

  /* ⚠⚠ A REAL VALUE, NEVER `--focus:var(--focus)`.
     That self-reference shipped 2026-08-12: a custom property referring to
     itself is invalid at computed-value time, so every UNBRANDED tenant had no
     focus ring. These pages are ALWAYS unbranded — always the broken case.
     ⚠ #5484c9 and not #5f8ccf: the lighter one measured 2.93:1 on --hero.
     It passed on white, which is the surface people test. Worst case across
     white / --bg / --soft / --hero is 3.26:1. */
  --focus:#5484c9;

  --radius:14px; --maxw:1000px;
  --shadow:0 1px 2px rgba(22,41,74,.06), 0 8px 24px rgba(22,41,74,.06);
  --shadow-lift:0 2px 4px rgba(22,41,74,.08), 0 14px 34px rgba(22,41,74,.10);
}

*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',system-ui,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
/* ⚠⚠ padding-left/right, NEVER the `padding:0 20px` SHORTHAND. `.wrap` is a
   CLASS (0-1-0) and `section{padding:56px 0}` below is a TYPE selector
   (0-0-1), so the shorthand won and zeroed the vertical padding of every
   <section class="wrap"> on the page. Live from 08-13 to 08-14: "What your
   salon gets" sat ~19px under the paragraph above it and "Questions salon
   owners ask" nearly touched the dark band. The band was the ONLY correctly
   spaced section, because it is <section class="band"> with .wrap on an
   inner div — which is exactly why this read as a one-off and got patched
   with an inline style="padding-top:78px" on one section instead of fixed. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}
a{color:var(--brand-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px}

/* --- header ---------------------------------------------------------------- */
header.top{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap}
.brand{font-weight:700;font-size:19px;color:var(--plum);display:flex;align-items:center;gap:10px;
  text-decoration:none;letter-spacing:-.2px}
.dot{width:24px;height:24px;border-radius:7px;
  background:linear-gradient(135deg,var(--brand),var(--plum));
  box-shadow:0 2px 8px rgba(47,95,168,.35)}

/* --- footer: the dark anchor ------------------------------------------------ */
footer{background:var(--deep);color:#fff;padding:34px 0;margin-top:52px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14.5px}
footer .fbrand{font-weight:700;color:#fff;display:flex;align-items:center;gap:9px}
footer .fbrand .dot{box-shadow:none}
footer a{color:var(--deep-soft);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .sep{color:#41577f;padding:0 4px}

/* --- buttons --------------------------------------------------------------- */
.btn{display:inline-block;padding:13px 26px;border-radius:11px;
  font-weight:600;text-decoration:none;border:1px solid transparent;font-size:16px;
  cursor:pointer;font-family:inherit;transition:transform .12s ease, box-shadow .12s ease, background .12s ease}
.btn-primary{background:var(--brand-dark);color:#fff;box-shadow:0 4px 14px rgba(36,82,143,.28)}
.btn-primary:hover{background:var(--plum);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(36,82,143,.34)}
.btn-ghost{background:#fff;color:var(--plum);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);transform:translateY(-1px)}

/* --- hero ------------------------------------------------------------------- */
.hero{position:relative;padding:74px 0 60px;text-align:center;
  background:
    radial-gradient(900px 380px at 50% -10%, rgba(47,95,168,.13), transparent 70%),
    linear-gradient(180deg, var(--hero) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line)}
.hero h1{color:var(--plum);font-size:44px;line-height:1.15;margin:0 0 16px;
  letter-spacing:-.8px}
.hero p.lede{font-size:19.5px;color:var(--muted);max-width:640px;margin:0 auto 30px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Non-text decoration, so --accent is free to be itself here. */
.hero .rule{width:64px;height:4px;border-radius:3px;margin:0 auto 22px;
  background:linear-gradient(90deg,var(--accent),var(--brand))}

section{padding:56px 0}
h2{color:var(--plum);font-size:28px;margin:0 0 8px;letter-spacing:-.4px}
.sub{color:var(--muted);margin:0 0 30px}

/* --- feature cards ---------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);transition:transform .14s ease, box-shadow .14s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.card h3{margin:0 0 7px;font-size:17px;color:var(--plum)}
.card p{margin:0;color:var(--muted);font-size:15px}

/* --- the dark band: "getting started" -------------------------------------- */
.band{background:linear-gradient(160deg,var(--deep) 0%,var(--deep-2) 100%);
  color:#fff;border:0}
.band h2{color:#fff}
.band .sub{color:var(--deep-soft)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
/* ⚠ There are FOUR steps and auto-fit gave THREE columns at 1440px, so
   step 4 dropped onto its own row with two thirds of the dark band empty.
   auto-fit sizes to the minmax floor; it does not know the item count. */
@media (min-width:900px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{position:relative;padding-left:46px}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px}
.step h3{margin:2px 0 5px;font-size:16.5px;color:#fff}
.step p{margin:0;color:var(--deep-soft);font-size:15px}

/* --- forms ------------------------------------------------------------------ */
form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;max-width:560px;box-shadow:var(--shadow)}
label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
.field{margin:0 0 16px}
input,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:10px;font:inherit;color:var(--ink);background:#fff;
  transition:border-color .12s ease, box-shadow .12s ease}
input:hover,textarea:hover{border-color:#c3d0e4}
input:focus,textarea:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(47,95,168,.13);outline:none}
textarea{min-height:112px;resize:vertical}
.hint{color:var(--muted);font-size:13px;margin:6px 0 0}
.note{background:var(--soft);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:10px;
  padding:13px 15px;color:var(--muted);font-size:14.5px;margin:0 0 18px}

/* ⚠ Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and this keeps it in the layout and accessibility tree where a
   scripted filler still finds it. aria-hidden handles screen readers. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- legal pages ------------------------------------------------------------ */
.doc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 38px;margin:36px 0;box-shadow:var(--shadow)}
.doc h1{color:var(--plum);font-size:32px;margin:0 0 6px;letter-spacing:-.5px}
/* The English-only notice on /privacy and /terms. A NOTICE about the
   document, not a translation of it — see the header comment in
   privacy.html for why that distinction is the whole point. Quiet by
   design: it answers a question rather than announcing itself. */
.doc .langnote{color:var(--muted);font-size:13.5px;margin:-18px 0 26px;
  padding:9px 13px;background:var(--soft);border:1px solid var(--line);
  border-radius:8px;display:inline-block}
.doc .langnote span[lang="vi"]{display:inline-block;margin-left:4px}
.doc .updated{color:var(--muted);font-size:14px;margin:0 0 28px;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.doc h2{font-size:20px;margin:32px 0 8px}
.doc h3{font-size:16px;color:var(--plum);margin:20px 0 6px}
.doc p,.doc li{color:var(--ink);font-size:15.5px}
.doc ul{padding-left:22px}
.doc li{margin:0 0 6px}
.doc table{border-collapse:collapse;width:100%;margin:16px 0;font-size:15px}
.doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--soft);color:var(--plum);font-weight:600}
.doc .callout{background:var(--soft);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:10px;padding:15px 17px;margin:20px 0}



/* =============================================================================
   ADDED 2026-08-13 (evening) — the page was "kinda plain" (Hai).
   -----------------------------------------------------------------------------
   What changed and why, so none of it reads as decoration for its own sake:

   - A HERO PRODUCT MOCK. The single biggest lift. A salon owner deciding in
     four seconds needs to SEE a booking page, not read that one exists. Built
     from divs and CSS — no screenshot to go stale, no image to ship, and it
     survives a redesign of the real page without becoming a lie, because it
     depicts the SHAPE of the product rather than claiming to be a screenshot.
   - AN EYEBROW + HIGHLIGHTED HEADLINE PHRASE. Standard SaaS pattern because it
     works: the eye lands on the highlight first.
   - A COMPARISON STRIP. ⚠ This is the only genuinely persuasive thing on the
     page and it is TRUE: competitors charge per staff member, we do not. It is
     the differentiator, so it gets its own band rather than a bullet.
   - AN FAQ. Objection handling. Cheaper than a phone call.

   ⛔ WHAT IS DELIBERATELY ABSENT, and must stay absent:
     - NO testimonials. There are no clients yet. A fabricated quote on the page
       a vetting reviewer opens is fraud, not marketing.
     - NO customer counts, no "trusted by N salons", no logo wall.
     - NO fake screenshots of data that does not exist.
   ============================================================================= */

/* --- language toggle. ⚠ These styles live in app.css, which these pages do NOT
   load (it carries per-tenant branding). Duplicated deliberately and kept
   visually identical so the control feels the same across the whole site. --- */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:#fff;flex:0 0 auto}
.lang-toggle button{appearance:none;border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.5px;padding:6px 12px;
  cursor:pointer;line-height:1;transition:.15s}
.lang-toggle button:hover{color:var(--brand-dark)}
.lang-toggle button.on{background:var(--brand);color:#fff}
.lang-toggle button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.lang-toggle-float{position:fixed;top:12px;right:12px;z-index:50;
  box-shadow:0 4px 14px rgba(22,41,74,.16)}
header.top .hgroup{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* --- hero --------------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:13.5px;font-weight:600;color:var(--brand-dark);
  box-shadow:var(--shadow);margin:0 0 20px}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl:after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.34em;
  background:linear-gradient(90deg,rgba(232,163,61,.42),rgba(47,95,168,.26));
  border-radius:4px;z-index:-1}
.trustline{margin:22px 0 0;font-size:14px;color:var(--muted)}

/* --- the product mock ---------------------------------------------------- */
.mock{position:relative;max-width:840px;margin:46px auto 0;padding:0 10px}
.mock-desk{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lift);overflow:hidden;text-align:left}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--soft)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#d7dfeb;display:block}
.mock-bar .url{margin-left:10px;font-size:12px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 10px}
.mock-body{padding:16px 18px 20px}
.mock-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 12px}
.mock-h b{font-size:14px;color:var(--plum)}
.mock-h span{font-size:11.5px;color:var(--muted)}
.mock-grid{display:grid;grid-template-columns:52px repeat(4,1fr);gap:5px}
.mock-grid div{height:23px;border-radius:5px;background:var(--soft);
  border:1px solid var(--line)}
.mock-grid .hd{background:transparent;border:0;height:16px;font-size:10.5px;
  color:var(--muted);display:flex;align-items:center}
.mock-grid .t{background:transparent;border:0;font-size:10.5px;color:var(--muted);
  display:flex;align-items:center}
.mock-grid .bk{background:#dcecff;border-color:#b9d5f5}
.mock-grid .bk2{background:#e3f6ec;border-color:#bfe6d1}
.mock-grid .bk3{background:#fdeccd;border-color:#f4d79a}
/* The phone overlaps the desktop card — depth without an image.
   ⚠ RESERVE THE SPACE IT COVERS. Overlapping is the effect we want;
   HIDING CONTENT is not. Until 2026-08-14 the phone sat on top of the
   "Kim" column while .mock-h claimed "4 technicians" — three and a half
   were visible, so the mock read as clipped rather than layered.
   min-width, so it cannot reach the ≤720px case where the phone is
   display:none and the grid needs its full width back. */
@media (min-width:721px){ .mock-body{padding-right:170px} }
/* The phone overlaps the desktop card — depth without an image. */
.mock-phone{position:absolute;right:-6px;bottom:-26px;width:186px;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:9px;
  box-shadow:var(--shadow-lift)}
.mock-phone .scr{background:var(--soft);border-radius:13px;padding:12px 11px}
.mock-phone .ttl{font-size:11.5px;font-weight:700;color:var(--plum);margin:0 0 9px}
.mock-phone .row{height:15px;border-radius:5px;background:#fff;
  border:1px solid var(--line);margin:0 0 6px}
.mock-phone .row.sel{background:var(--brand);border-color:var(--brand)}
.mock-phone .cta{height:24px;border-radius:7px;background:var(--brand-dark);
  margin-top:9px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:10.5px;font-weight:600}
@media (max-width:720px){ .mock-phone{display:none} .mock{margin-top:32px} }

/* --- value props --------------------------------------------------------- */
.props{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.prop .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--soft);border:1px solid var(--line);color:var(--brand-dark);
  margin:0 0 13px}
.prop h3{margin:0 0 6px;font-size:17.5px;color:var(--plum)}
.prop p{margin:0;color:var(--muted);font-size:15px}

/* --- the comparison strip ------------------------------------------------ */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.vs > div{border-radius:var(--radius);padding:22px 24px;border:1px solid var(--line)}
.vs .them{background:var(--soft)}
.vs .us{background:#fff;border-color:var(--brand);box-shadow:var(--shadow-lift)}
.vs h3{margin:0 0 4px;font-size:16px}
.vs .them h3{color:var(--muted)}
.vs .us h3{color:var(--plum)}
.vs .big{font-size:30px;font-weight:700;letter-spacing:-.5px;margin:6px 0 2px}
.vs .them .big{color:var(--muted)}
.vs .us .big{color:var(--brand-dark)}
.vs p{margin:6px 0 0;font-size:14.5px;color:var(--muted)}
@media (max-width:640px){ .vs{grid-template-columns:1fr} }

/* --- FAQ ----------------------------------------------------------------- */
.faq{max-width:780px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:0 20px;margin:0 0 10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:17px 0;font-weight:600;color:var(--plum);
  font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--brand);font-weight:700;font-size:19px;line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.faq p{margin:0 0 17px;color:var(--muted);font-size:15px}

/* --- closing CTA --------------------------------------------------------- */
.closing{text-align:center;padding:52px 0 12px}
.closing h2{font-size:30px;margin:0 0 10px}
.closing p{color:var(--muted);margin:0 0 24px;font-size:17px}

/* --- footer: the © line, matching login.html and booking.html ------------ */
footer .legal{color:var(--deep-soft);font-size:13.5px}

/* =============================================================================
   MOBILE. Rewritten 2026-08-13 — Hai asked for it explicitly, and the first
   pass only shrank type.
   -----------------------------------------------------------------------------
   ⚠ THE REAL FAILURES ON A PHONE ARE NOT FONT SIZES. They are:
     1. The sticky header eating vertical space on a 640px-tall screen.
     2. The hero mock: a 5-column grid with a 52px fixed first column, inside a
        card, inside 20px page padding. At 360px that is genuinely tight.
     3. Buttons sitting side by side and each ending up too narrow to hit.
     4. The footer's space-between putting three items on one cramped row.
   Each rule below is aimed at one of those, not at "make it smaller".

   ⚠ TOUCH TARGETS: the CTAs go full-width below 560px rather than shrinking.
   A 44px minimum is the accessibility floor and a half-width button at 360px
   does not clear it once padding is counted.
   ============================================================================= */
@media (max-width:860px){
  .mock-phone{right:-2px;bottom:-18px;width:158px}
}

@media (max-width:720px){
  /* The phone overlay goes rather than collides. Below this the desktop card
     alone still reads as "a schedule", which is the whole job. */
  .mock-phone{display:none}
  .mock{margin-top:34px;padding:0}
}

@media (max-width:640px){
  header.top{position:static}          /* 1. give the viewport its height back */
  header.top .wrap{gap:10px;padding-top:11px;padding-bottom:11px}
  .brand{font-size:17px}

  .hero{padding:44px 0 38px}
  .hero h1{font-size:30px;letter-spacing:-.4px}
  .hero p.lede{font-size:17px;margin-bottom:24px}
  .eyebrow{font-size:12.5px;padding:6px 13px}
  .trustline{font-size:13.5px}

  section{padding:40px 0}
  h2{font-size:23px}
  .sub{font-size:15.5px;margin-bottom:22px}

  /* 2. the mock grid: narrower time column, shorter rows, smaller labels */
  .mock-body{padding:13px 13px 16px}
  .mock-grid{grid-template-columns:38px repeat(4,1fr);gap:4px}
  .mock-grid div{height:19px}
  .mock-grid .hd,.mock-grid .t{font-size:9.5px}
  .mock-bar .url{font-size:11px;padding:3px 8px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;max-width:60%}

  .props{gap:22px}
  .prop h3{font-size:16.5px}
  .grid{gap:14px}
  .card{padding:18px}
  .steps{gap:18px}

  .doc{padding:22px 18px;margin:22px 0}
  .doc h1{font-size:25px}
  .doc h2{font-size:18px;margin-top:26px}
  .doc p,.doc li{font-size:15px}
  /* ⚠ A 2-column table at 360px is unreadable. Let it scroll rather than
     squeeze — a squeezed table looks broken, a scrolling one looks deliberate. */
  .doc table{display:block;overflow-x:auto;white-space:nowrap}

  form{padding:20px}
  .faq summary{font-size:15.5px}
  .closing{padding:38px 0 8px}
  .closing h2{font-size:25px}
  .closing p{font-size:16px}

  /* 4. footer stacks; the © line gets its own row */
  footer{padding:28px 0;margin-top:38px}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}

@media (max-width:560px){
  /* 3. full-width CTAs. Side by side they fall under the 44px touch floor. */
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%;text-align:center}
  header.top .wrap{justify-content:space-between}
  header.top .btn{padding:10px 16px;font-size:14.5px}
}

/* ⚠ Respect the OS setting. The hover lifts are decorative; someone who asked
   for less motion should not get them. Also covers the hero mock, which would
   otherwise still animate on a device that never hovers. */
@media (prefers-reduced-motion:reduce){
  .btn,.card{transition:none}
  .btn:hover,.card:hover{transform:none}
}