/* PickMyMate — landing page styles */

/* Palette: 1970s tube sock — cream ground, burnt orange and denim blue
   stripes, mustard accent. Shades are chosen for contrast on cream, not by
   eye: burnt orange sits at 5.0:1 against white so it can carry button text,
   and the muted grey is warmed to brown rather than left cold. */
:root {
  --orange:     #b24c0e;   /* burnt orange — primary action */
  --orange-lt:  #d9702a;   /* brighter, large graphics only */
  --orange-dk:  #8c3c0a;
  --blue:       #1c5b86;   /* denim blue — secondary */
  --blue-dk:    #123f5e;   /* navy */
  --gold:       #e0a12e;   /* mustard accent */

  --ink:        #2b2118;   /* warm near-black */
  --body:       #57493b;
  --muted:      #73624e;
  --line:       #e7d9c0;
  --bg:         #fcf6ea;   /* cream */
  --bg-alt:     #f6edd9;

  --radius:    16px;
  --radius-lg: 28px;
  --shadow:    0 1px 2px rgba(43,33,24,.06), 0 8px 24px rgba(43,33,24,.08);
  --shadow-lg: 0 24px 60px rgba(18,63,94,.20);
  --wrap:      1140px;
  --font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
h1 em { font-style: normal; color: var(--orange); }
p  { margin: 0 0 1rem; }
a  { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; }
.center { text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .75rem;
}

.lede { font-size: 1.15rem; color: var(--body); max-width: 52ch; }
.center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--orange), var(--orange-dk));
  color: #fff;
  font-weight: 650;
  font-size: 1rem;
  border: 0;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(178,76,14,.32);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  font-family: inherit;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(178,76,14,.4); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 20px; font-size: .92rem; }
.btn-lg { padding: 17px 40px; font-size: 1.08rem; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,246,234,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Tube-sock stripes under the nav: orange, mustard, denim. */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
  background: linear-gradient(90deg,
    var(--orange) 0 33.33%, var(--gold) 33.33% 66.66%, var(--blue) 66.66% 100%);
}
.nav-inner { display: flex; align-items: center; gap: 32px; height: 70px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.12rem; color: var(--ink); letter-spacing: -.02em;
}
.brand-mark {
  width: 30px; height: 28px; flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6.5%206h7.2a2.8%202.8%200%200%201%202.8%202.8v5.4l5.9%202.2A3.6%203.6%200%200%201%2024.7%2020H6.5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%20fill%3D%22%231c5b86%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%229.2%22%20width%3D%2212%22%20height%3D%221.8%22%20fill%3D%22%23b24c0e%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2212.1%22%20width%3D%2212%22%20height%3D%221.8%22%20fill%3D%22%23e0a12e%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2220.3%22%20width%3D%2221.5%22%20height%3D%222.6%22%20rx%3D%221.3%22%20fill%3D%22%232b2118%22%2F%3E%3Cpath%20d%3D%22M26.2%2020.6h1.6a1.6%201.6%200%200%201%201.6%201.6v2.2a1.8%201.8%200%200%201-1.8%201.8h-1.4z%22%20fill%3D%22%23b24c0e%22%2F%3E%3Ccircle%20cx%3D%229.4%22%20cy%3D%2225.8%22%20r%3D%223.3%22%20fill%3D%22%23e0a12e%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2220.8%22%20cy%3D%2225.8%22%20r%3D%223.3%22%20fill%3D%22%23e0a12e%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
/* The footer sits on near-black, where a dark plate and dark tyre outlines
   would disappear — swap them for cream there. */
.footer .brand-mark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6.5%206h7.2a2.8%202.8%200%200%201%202.8%202.8v5.4l5.9%202.2A3.6%203.6%200%200%201%2024.7%2020H6.5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%20fill%3D%22%231c5b86%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%229.2%22%20width%3D%2212%22%20height%3D%221.8%22%20fill%3D%22%23b24c0e%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2212.1%22%20width%3D%2212%22%20height%3D%221.8%22%20fill%3D%22%23e0a12e%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2220.3%22%20width%3D%2221.5%22%20height%3D%222.6%22%20rx%3D%221.3%22%20fill%3D%22%23f6edd9%22%2F%3E%3Cpath%20d%3D%22M26.2%2020.6h1.6a1.6%201.6%200%200%201%201.6%201.6v2.2a1.8%201.8%200%200%201-1.8%201.8h-1.4z%22%20fill%3D%22%23b24c0e%22%2F%3E%3Ccircle%20cx%3D%229.4%22%20cy%3D%2225.8%22%20r%3D%223.3%22%20fill%3D%22%23e0a12e%22%20stroke%3D%22%23f6edd9%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2220.8%22%20cy%3D%2225.8%22%20r%3D%223.3%22%20fill%3D%22%23e0a12e%22%20stroke%3D%22%23f6edd9%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E");
}
/* align-items:center, not the flex default of stretch. Sign out lives in
   here now and is a pill about 38px tall, so stretch made every text link a
   38px box — with its text still drawn at the top of that box, a few pixels
   above the wordmark and above the button's own centred label. The row only
   looked level while everything in it was the same height. */
.nav-links {
  display: flex; align-items: center;
  gap: 28px; margin-left: auto;
  font-size: .95rem; font-weight: 500;
}
.nav-links a { color: var(--body); transition: color .15s; }
.nav-links a:hover { color: var(--orange); }
.nav .btn-sm { flex: none; }

/* Sign out wears the website burnt orange, like every other button. It
   carries no background of its own — .btn supplies the gradient — so the
   only thing needed here is the label colour below.

   Sign out now lives inside .nav-links, where `.nav-links a` (0,1,1) beats
   `.btn` (0,1,0) and would paint the label body-brown on orange at 1.62:1,
   then orange-on-orange at 1.00:1 on hover. Said again, louder. */
.nav-links a.navsignout,
.nav-links a.navsignout:hover { color: #fff; }

/* ---------- The phone menu ----------
   Hidden on desktop, where the tabs are already across the top. The
   checkbox is the entire mechanism: the label toggles it, and a sibling
   selector opens the panel. No script, so nothing to fail.

   Visually hidden rather than display:none or [hidden], because a
   display:none checkbox cannot be focused and the menu would then be
   unreachable by keyboard. */
.navtoggle {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
/* Hide the whole wrapper, not just the label: the skate and the unread
   dot live in it too, and an unstyled <button> on desktop would show as
   a small empty box beside the tabs. */
.navburger-wrap { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 112px);
  background:
    radial-gradient(900px 460px at 78% -8%, #fae4cd 0%, transparent 62%),
    radial-gradient(700px 420px at 4% 8%, #e6eef4 0%, transparent 60%);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: 56px; align-items: center;
}
/* Lift the hero copy by roughly two lines of body text (2 × 1.15rem × 1.65).
   Only on the wide layout: below 940px the columns stack with the mock above
   the copy, where a negative margin would pull the text into it. */
@media (min-width: 941px) {
  .hero-copy { margin-top: -3.8rem; }
}
.hero-copy h1 { margin-bottom: .35em; }

.signup {
  display: flex; gap: 10px; margin: 28px 0 8px; max-width: 480px; flex-wrap: wrap;
}
.signup input {
  flex: 1 1 220px;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.signup input::placeholder { color: var(--muted); }
.signup input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(178,76,14,.14);
}
.form-note { font-size: .87rem; color: var(--muted); }
.form-note.ok  { color: #43703a; font-weight: 600; }
.form-note.err { color: var(--orange-dk); font-weight: 600; }

.trust {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 36px;
  padding: 0; margin: 28px 0 0; font-size: .9rem; color: var(--muted);
}
.trust strong { display: block; font-size: 1.5rem; color: var(--ink); font-weight: 800; line-height: 1.2; }

/* ---------- Phone mock ---------- */
.hero-art { display: flex; justify-content: center; }
.phone {
  position: relative;
  width: 300px; height: 604px;
  background: #241c14;
  border-radius: 44px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(-1.5deg); }
}
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 22px; background: #241c14; border-radius: 0 0 14px 14px; z-index: 3;
}
.phone-screen {
  height: 100%; border-radius: 34px; overflow: hidden;
  background: linear-gradient(170deg, #fdf7ec, #eaf1f6);
  padding: 34px 16px 16px;
}
.card-stack { position: relative; height: 100%; }
.pcard {
  position: absolute; inset: 0;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(43,33,24,.13);
  display: flex; flex-direction: column; overflow: hidden;
}
.pcard-back1 { transform: rotate(-4deg) scale(.955); opacity: .55; }
.pcard-back2 { transform: rotate(4.5deg) scale(.915); opacity: .3; }
.pcard-front { z-index: 2; }
.pcard-photo {
  height: 250px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 4.4rem;
}
.pp-1 { background: linear-gradient(150deg, #f0d9a8, #e0a12e 45%, #b24c0e); }
.pcard-body { padding: 16px 18px 6px; }
.pcard-body h3 { font-size: 1.28rem; margin-bottom: 2px; }
.pcard-meta { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.pcard-bio  { font-size: .88rem; line-height: 1.5; margin-bottom: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: .72rem; font-weight: 600; color: var(--blue);
  background: #eef0e2; padding: 5px 11px; border-radius: 999px;
}
.pcard-actions {
  margin-top: auto; display: flex; gap: 16px;
  justify-content: center; padding: 14px 0 20px;
}
.act {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 1.4rem; cursor: pointer; line-height: 1;
  box-shadow: 0 4px 12px rgba(43,33,24,.09);
  transition: transform .15s ease;
}
.act:hover { transform: scale(1.1); }
.act-pass { color: var(--muted); }
.act-like { color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-dk)); border-color: transparent; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 8vw, 104px) 0; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section > .wrap > h2.center { margin-bottom: 3rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 24px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 26px; box-shadow: var(--shadow);
}
.step-num {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 16px;
  border-radius: 12px; font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--blue));
}
.step p { margin: 0; font-size: .96rem; }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fi {
  width: 46px; height: 46px; border-radius: 12px; background: #fbeeda;
  display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 14px;
}
.feature p { margin: 0; font-size: .95rem; }

/* Stories */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story {
  margin: 0; padding: 28px 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.story blockquote {
  margin: 0 0 20px; font-size: 1.02rem; color: var(--ink); line-height: 1.6;
}
.story figcaption {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; font-size: .85rem; color: var(--muted);
}
.story figcaption strong { color: var(--ink); font-size: .93rem; }
.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700;
}
.av-1 { background: linear-gradient(135deg, #e0a12e, #b24c0e); }
.av-2 { background: linear-gradient(135deg, #8e7cff, #1c5b86); }
.av-3 { background: linear-gradient(135deg, #4fc3a1, #2f8f7d); }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 22px;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 28px 18px 0;
  font-weight: 650; color: var(--ink); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--orange); line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; font-size: .96rem; }

/* CTA */
.cta {
  padding: clamp(64px, 8vw, 100px) 0;
  background: linear-gradient(135deg, var(--blue), var(--orange) 70%, var(--gold));
  color: #fff;
}
.cta h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta .lede { color: rgba(255,255,255,.9); margin-bottom: 2rem; }
.cta .btn { background: #fff; color: var(--orange-dk); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.cta .btn:hover { box-shadow: 0 14px 36px rgba(0,0,0,.28); }

/* Footer */
.footer {
  background: var(--ink); color: #cbbba0; font-size: .92rem;
  padding: 56px 0 28px; position: relative;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--blue) 0 33.33%, var(--gold) 33.33% 66.66%, var(--orange) 66.66% 100%);
}
.footer .brand { color: #fff; margin-bottom: 8px; }
.footer-inner { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; }
.footer-brand p { color: #9c8b72; margin: 0; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-cols h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.footer-cols a { display: block; padding: 4px 0; color: #cbbba0; transition: color .15s; }
.footer-cols a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .84rem; color: #9c8b72;
}
.footer-bottom p { margin: 0; }


/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-grid   { grid-template-columns: 1fr; gap: 48px; }
  .hero-art    { order: -1; }
  .phone       { width: 268px; height: 540px; }
  .features, .stories { grid-template-columns: 1fr 1fr; }
  .nav-inner   { gap: 16px; }
  .brand       { margin-right: auto; }

  /* The tabs are still hidden across the top — there is no room for six of
     them — but they are now a drawer rather than nothing at all. */
  .nav-links   { display: none; }

  .navburger-wrap { position: relative; display: inline-flex; flex: none; }

  /* Menu and Sign out sit side by side on a phone, so they are built to the
     same box: one height, one padding, one type size, one radius. Height is
     set explicitly rather than left to line-height, because the two have
     different contents — bars plus a word against a word alone — and
     matching padding alone would still leave them a pixel or two apart.
     48px is also the tap target the drawer rows use. */
  /* Sign out moved into the drawer, so these two no longer stand next to
     each other and no longer need to match. The burger keeps the 44px tap
     target on its own. */
  /* The website orange, like every other call to action. The bars and the
     word go white on it — 5.34:1, past the 4.5:1 floor and well past the
     3:1 a 700-weight label needs. 44px tall, the smallest a thumb reliably
     hits, matching the drawer rows it opens. */
  .navburger {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dk));
    color: #fff;
    box-shadow: 0 6px 18px rgba(178,76,14,.32);
    font-size: .88rem; font-weight: 700;
    cursor: pointer; user-select: none;
    flex: none;
  }
  .navburger-text { line-height: 1; }

  /* Three bars, drawn rather than fetched. White, because the button is
     orange — set HERE, in the rule that defines them, not in a later
     override. It was a later override once, and it sat ABOVE this rule in
     the file: same specificity, so this one won and the bars stayed dark
     while the stylesheet still contained the word #fff. */
  .navburger-bars,
  .navburger-bars::before,
  .navburger-bars::after {
    display: block; width: 17px; height: 2px;
    background: #fff; border-radius: 2px;
  }
  .navburger-bars { position: relative; }
  .navburger-bars::before,
  .navburger-bars::after { content: ""; position: absolute; left: 0; }
  .navburger-bars::before { top: -6px; }
  .navburger-bars::after  { top:  6px; }

  /* Focus lands on the hidden checkbox, so the ring has to be drawn on the
     label it controls or keyboard users get no feedback at all. */
  .navtoggle:focus-visible ~ .navburger-wrap .navburger {
    outline: 2px solid var(--blue); outline-offset: 2px;
  }

  /* Open: the bars become a cross, and the drawer appears. */
  .navtoggle:checked ~ .navburger-wrap .navburger-bars { background: transparent; }
  .navtoggle:checked ~ .navburger-wrap .navburger-bars::before { top: 0; transform: rotate(45deg); }
  .navtoggle:checked ~ .navburger-wrap .navburger-bars::after  { top: 0; transform: rotate(-45deg); }

  .navtoggle:checked ~ .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 90;                       /* over the page, under nothing else */
    margin: 0;
    padding: 6px 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0,0,0,.13);
    font-size: 1.02rem;
  }
  /* Full-width rows with a real tap target. 48px is the smallest a thumb
     reliably hits; the old 28px gap between inline links was never meant to
     be tapped at all. */
  .navtoggle:checked ~ .nav-links > a,
  .navtoggle:checked ~ .nav-links > .nav-msg > a {
    display: block;
    padding: 13px 22px;
    min-height: 48px;
    box-sizing: border-box;
  }
  .navtoggle:checked ~ .nav-links > .nav-msg { display: block; }
  .navtoggle:checked ~ .nav-links > a:active,
  .navtoggle:checked ~ .nav-links > .nav-msg > a:active { background: rgba(0,0,0,.05); }

  /* Inside the drawer the tab is a full-width row, so the skate's negative
     offsets would hang off the left edge of the screen. Tuck it in. */
  .navtoggle:checked ~ .nav-links .nav-skate { top: 2px; left: auto; right: 18px; }

  /* Sign out is the last thing in the drawer: not navigation, and the one
     entry here you would hate to hit by accident. Set apart by space alone,
     and kept as a pill rather than a full-width row so it does not read as
     one more place to go.

     There was a separator line here. It was an absolutely positioned
     ::before on a pill that is not itself positioned, so it resolved
     against .nav — which is sticky, and therefore the nearest positioned
     ancestor — and drew itself across the full width of the header instead
     of above the button. The gap says the same thing without a rule that
     has to be told where it lives. */
  .navtoggle:checked ~ .nav-links .navsignout {
    align-self: flex-start;
    margin: 22px 22px 6px;
    min-height: 40px;
  }

  /* The unread marks on the button itself, since the tab they belong to is
     behind a closed drawer. */
  .navburger-skate {
    position: absolute; top: -14px; left: -10px;
    padding: 0; border: 0; appearance: none; -webkit-appearance: none;
    width: 21px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6.5%206h7.2a2.8%202.8%200%200%201%202.8%202.8v5.4l5.9%202.2A3.6%203.6%200%200%201%2024.7%2020H6.5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%20fill%3D%22%231c5b86%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%229.2%22%20width%3D%2212%22%20height%3D%221.8%22%20fill%3D%22%23b24c0e%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2212.1%22%20width%3D%2212%22%20height%3D%221.8%22%20fill%3D%22%23e0a12e%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2220.3%22%20width%3D%2221.5%22%20height%3D%222.6%22%20rx%3D%221.3%22%20fill%3D%22%232b2118%22%2F%3E%3Cpath%20d%3D%22M26.2%2020.6h1.6a1.6%201.6%200%200%201%201.6%201.6v2.2a1.8%201.8%200%200%201-1.8%201.8h-1.4z%22%20fill%3D%22%23b24c0e%22%2F%3E%3Ccircle%20cx%3D%229.4%22%20cy%3D%2225.8%22%20r%3D%223.3%22%20fill%3D%22%23e0a12e%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2220.8%22%20cy%3D%2225.8%22%20r%3D%223.3%22%20fill%3D%22%23e0a12e%22%20stroke%3D%22%232b2118%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
    animation: skate-float 2.4s ease-in-out infinite;
    transform-origin: 60% 90%;
  }
  button.navburger-skate { cursor: pointer; background-color: transparent; }
  button.navburger-skate:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px;
  }
  .navburger-dot {
    position: absolute; top: -3px; right: -3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--orange); border: 2px solid #fff;
  }
}
@media (max-width: 940px) and (prefers-reduced-motion: reduce) {
  .navburger-skate { animation: none; transform: rotate(-6deg); }
}
@media (max-width: 620px) {
  .steps, .features, .stories { grid-template-columns: 1fr; }
  .trust { gap: 12px 24px; }
  .signup { flex-direction: column; }
  .signup .btn { width: 100%; }
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-cols { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}