/*
 * The public marketing site.
 *
 * ⛔ SEPARATE FROM admin.css, deliberately. The admin sheet is a console
 * design system — dense rows, 13px labels, a 260px rail — and the front page
 * was built on it because it was the only sheet that existed. That is why the
 * front page looked like a logged-out admin screen: one narrow card floating
 * in the middle of a grey field, which is what `.auth-card` is FOR.
 *
 * This sheet shares the admin's tokens (the same accent, the same ink, the
 * same radii) so the two halves of the product look related, and nothing else.
 *
 * ⚠️ It must stand alone: a visitor who has never signed in loads this and
 * nothing from admin.css, so every token it uses is defined here.
 */

:root {
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --bg-deep: #101a23;

  --ink: #14171d;
  --ink-2: #3d4654;
  --ink-3: #5d6778;
  --on-deep: #f3f6f9;
  --on-deep-2: #a9b6c4;

  --accent: #e0562a;
  --accent-ink: #14171d;
  --accent-deep: #b84722;
  --accent-wash: rgba(224, 86, 42, .10);

  --line: #e4e7ec;
  --line-deep: rgba(255, 255, 255, .12);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(20, 23, 29, .05), 0 1px 3px rgba(20, 23, 29, .04);
  --sh-2: 0 1px 2px rgba(20, 23, 29, .05), 0 8px 24px -6px rgba(20, 23, 29, .12);
  --sh-3: 0 2px 6px rgba(20, 23, 29, .07), 0 24px 56px -16px rgba(20, 23, 29, .22);

  /* ⚠️ Aliases for the pages that came off admin.css. legal.css was written
     against the console tokens and names --muted where this sheet says
     --ink-3; aliasing is safer than editing a stylesheet the legal documents
     depend on. */
  --muted: #5d6778;
  --surface: #ffffff;

  /* One measure for every section, so nothing drifts a few pixels out of
     alignment with the thing above it. */
  --wrap: 1120px;
  --gut: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* ⚠️ Anchors land UNDER the sticky header without this, hiding the heading
   the reader just asked for. */
section[id] { scroll-margin-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* ⛔ STICKY FOOTER. Without it, a short page — the club signup, a legal
     notice, anything with a form and not much else — leaves the footer
     floating in the middle of the window with a field of empty background
     below it. That reads as a page that failed to finish loading, and it is
     one of the things that made the site look unfinished.

     main grows to fill whatever is left; the footer sits on the bottom edge
     when there is not enough content, and below the content when there is. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > footer { flex: 0 0 auto; }

/* ⛔ A WEIGHT LADDER, not 800 for everything. Every heading and every
   number was the heaviest weight the family has, so nothing was primary:
   with no contrast, the eye has nothing to climb and the page reads as one
   undifferentiated shout. 800 / 700 / 650 gives each level somewhere to
   sit. */
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.021em; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 650; }
p { margin: 0; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---- skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---- header ------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.site-head .logo { display: flex; align-items: center; flex: 0 0 auto; }
.site-head .logo img { display: block; }
.site-nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.site-account { display: flex; gap: 20px; align-items: center; margin-left: 28px; }
.site-nav a, .site-account a {
  text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink-2);
  padding: 4px 0; border-bottom: 2px solid transparent;
  /* ⚠️ A nav item must never break mid-phrase. Without this, "How it works"
     and "Club login" each wrapped onto two lines on any window between the
     640px breakpoint and full desktop — a six-item bar turned into a ragged
     two-row block with the logo floating beside it. A browser window is not
     one of three sizes. */
  white-space: nowrap;
}
.site-nav a:hover, .site-account a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.site-account a { color: var(--ink-3); font-weight: 500; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r-pill);
  font: 700 16px/1 Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* ⚠️ DARK ink on the orange, not white. White on #E0562A is 3.80:1 and fails
   AA for text this size; #14171d on it is 4.64:1. */
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
/* ⛔ A destructive action needs its own weight in the system. "Delete your
   account" wore the same grey ghost as "Change your sign-in address", so the
   one irreversible button on the profile page looked exactly like the three
   reversible ones above it. Outlined rather than solid red: it must read as
   dangerous without competing with the page's primary action. */
.btn-danger { background: var(--bg); color: #8d1f29; border-color: #f0c2c7; }
.btn-danger:hover { background: #fdedef; border-color: #d98b94; color: #731a22; }
.btn-on-deep { background: var(--accent); color: var(--accent-ink); }
.btn-on-deep:hover { background: #fff; color: var(--ink); }
.btn-sm { padding: 12px 20px; font-size: 15px; }

/* ---- hero --------------------------------------------------------------- */
/* ⚠️ The warm stop reaches the BOTTOM. At 58% it did not: on a phone the
   hero is twice as tall as on a laptop, so the tint faded out level with
   the lede and the two buttons sat on plain white — the section looked
   like it had ended and something else had started under it. */
.hero {
  background: linear-gradient(170deg, #fdf4ef 0%, #faf5f2 55%, #f6f7f9 100%);
  border-bottom: 1px solid var(--line);
  padding: 72px 0 80px;
}
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep);
  background: var(--accent-wash); padding: 4px 12px; border-radius: var(--r-pill);
  margin-bottom: 20px;
}
.hero h1 { font-size: clamp(34px, 4.4vw, 54px); }
.hero .lede { font-size: 19px; color: var(--ink-2); margin-top: 20px; max-width: 34em; }
.hero .actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero .note { font-size: 14px; color: var(--ink-3); margin-top: 16px; }
.hero-art { justify-self: center; }
/* ⚠️ 256, because mark-256.png IS 256. Drawing it at 300 upscaled the one
   piece of detailed artwork on the page by 17% — exactly where a crest goes
   soft. Brand::mark() already ships a 512 for 2x displays. */
.hero-art img { display: block; width: 256px; height: 256px; filter: drop-shadow(0 22px 42px rgba(20, 23, 29, .26)); }

/* ---- generic section ---------------------------------------------------- */
.sec { padding: 80px 0; }
.sec-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.sec-head { max-width: 42em; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(27px, 3vw, 36px); }
.sec-head p { font-size: 17px; color: var(--ink-3); margin-top: 12px; }

/* ---- how it works ------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: 17px; margin-bottom: 16px;
}
.step h3 { font-size: 17px; }
.step p { font-size: 15px; color: var(--ink-3); margin-top: 8px; }

/* ---- features ----------------------------------------------------------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px; box-shadow: var(--sh-1);
}
.feat h3 { font-size: 17px; }
.feat p { font-size: 15px; color: var(--ink-3); margin-top: 8px; }
.feat .ico {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--accent-wash); color: var(--accent-deep);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.feat .ico svg { width: 21px; height: 21px; }

/* ---- pricing ------------------------------------------------------------ */
/* ⛔ No align-items:start, and the card is a column. Four plans have four
   different numbers of features, so with start-alignment each card stopped
   where its list did and the four "Start on this plan" buttons landed on
   four different baselines — a price table you cannot scan across. Stretch
   makes them equal height; margin-top:auto on the button pins it to the
   bottom of whichever card it is in. */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.plan {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px 20px; box-shadow: var(--sh-1); position: relative;
  display: flex; flex-direction: column;
}
.plan-featured { border-color: var(--accent); box-shadow: var(--sh-2); }
.plan-tag {
  position: absolute; top: -12px; left: 22px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-pill);
}
.plan h3 { font-size: 16px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.plan .price { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin-top: 8px; }
.plan .price span { font-size: 15px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.plan .yearly { font-size: 13px; color: var(--ink-3); margin-top: 4px; min-height: 20px; }
.plan ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.plan li { font-size: 15px; color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 4px; color: var(--accent); }
.plan .btn { width: 100%; margin-top: auto; padding-top: 12px; }
.plan ul + .btn, .plan .price-foot { margin-top: 24px; }
.price-note { font-size: 14px; color: var(--ink-3); margin-top: 32px; max-width: 54em; }

/* ---- faq ---------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 54em; }
.faq details {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 20px; box-shadow: var(--sh-1);
}
.faq summary {
  font-weight: 700; font-size: 17px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-weight: 400; font-size: 25px; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 12px; color: var(--ink-3); font-size: 16px; }

/* ---- closing call to action --------------------------------------------- */
/* ⚠️ 56px, not 76. The band held a heading, a paragraph and a button when it
   was sized; the paragraph was removed and the padding was not, leaving a
   near-empty 300px void above the footer — the first thing in the screenshot
   Rajinder sent back. A section's padding is sized for what is IN it. */
.cta { background: var(--bg-deep); color: var(--on-deep); padding: 56px 0; text-align: center; }
.cta h2 { font-size: clamp(27px, 3vw, 38px); margin-bottom: 24px; }
.cta p { font-size: 17px; color: var(--on-deep-2); margin: 16px auto 30px; max-width: 36em; }

/* ---- footer ------------------------------------------------------------- */
/* ⚠️ A shade darker than the CTA above it. Both were --bg-deep separated by
   a 12%-white hairline, so the page ended in one undifferentiated dark slab
   and the closing call to action read as part of the footer. */
.site-foot { background: #0b1319; color: var(--on-deep-2); border-top: 1px solid var(--line-deep); padding: 48px 0 32px; font-size: 15px; }
/* ⛔ FOUR CHILDREN, THREE COLUMNS. The footer holds .about, Product, Legal
   AND .foot-bar — so the bar fell into the grid as a fourth item and landed
   in column ONE of a second row. Its full-width rule and its "pushed apart"
   flex layout were therefore squeezed into 40% of the footer, which is why
   the divider line above the language switch stops a third of the way across
   in the reported screenshot. The bar spans every column. */
.site-foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px 32px; }
.site-foot .foot-bar { grid-column: 1 / -1; }
.site-foot h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: #fff; font-weight: 700; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-foot a { color: var(--on-deep-2); text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .about img { display: block; margin-bottom: 12px; }
.site-foot .about p { max-width: 30em; }
.foot-bar {
  border-top: 1px solid var(--line-deep); margin-top: 32px; padding-top: 20px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px;
}
.lang a { text-decoration: none; }
.lang a[aria-current="true"] { color: #fff; font-weight: 700; }

/* ---- responsive ---------------------------------------------------------
   ⚠️ A motorcycle club chair reads this on a phone, in the clubhouse, on
   the evening the committee decides. The phone layout is not an afterthought
   here; it is the likeliest one. */
/* ⚠️ The nav has to give way BEFORE the layout does. Six items plus the
   lockup need about 900px; below that the section anchors go and the two
   links a stranger actually needs — sign in, club login — stay. The old
   single breakpoint at 640 left a 260px-wide band of window sizes where the
   bar wrapped into two ragged rows. */
@media (max-width: 1020px) {
  .site-nav { gap: 20px; }
  .site-account { margin-left: 20px; gap: 16px; }
}

/* ⛔ THE SECTION LINKS DROP TO THEIR OWN ROW — THEY ARE NOT DELETED.
   This breakpoint used to hide every nav entry that was not an account
   link, so on every phone "How it works", "Features", "Pricing" and "FAQ"
   ceased to exist and the only way to reach them was to guess at
   scrolling. The header becomes two rows instead: identity and account on
   top, the sections underneath as a strip that scrolls sideways if it has
   to. No JavaScript, no hamburger, nothing to get stuck open. */
@media (max-width: 900px) {
  /* ⚠️ A two-row header must not cost 114px of an 812px screen. The
     lockup comes down to the size the rest of the product uses on a
     phone and the rows tighten; 114 → 88. */
  .site-head .wrap { flex-wrap: wrap; height: auto; padding-block: 6px; gap: 0; }
  .site-head .logo img { width: auto; height: 32px; }
  .site-account { margin-left: auto; }
  .site-nav {
    order: 3; width: 100%; margin-left: 0;
    /* 16, not 22: at 375px the four section labels total ~290px, so a 22px
       gap pushed "Questions" half off the edge and the strip looked
       broken rather than scrollable. At 16 they fit, and the overflow is
       still there for a longer word or a third language. */
    gap: 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--line); margin-top: 6px; padding-top: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { order: -1; }
  .hero-art img { width: 200px; height: 200px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .site-foot .wrap { grid-template-columns: 1fr 1fr; }
  .site-foot .about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  /* ⚠️ The crest must not push the headline off the first screen. At 210 it
     took 40% of a 812pt phone and the proposition was below the fold. */
  /* ⛔ No crest on a phone. The hero was 773px of an 812px screen, so the
     headline began 43% down and the primary button sat below the fold — on
     the one page whose whole job is to get that button pressed. The mark is
     already in the header 40px above, and the footer carries it again. */
  .hero-art { display: none; }
  .sec { padding: 56px 0; }
  .hero { padding: 40px 0 56px; }
  /* (The nav already collapsed at 900px — see above. A hamburger for four
     anchors on a page this short is more machinery than it is worth.) */
  .steps, .feats, .plans { grid-template-columns: 1fr; }
  .hero .actions .btn { width: 100%; }
  .site-foot .wrap { grid-template-columns: 1fr; }
}

/* A reader who has asked the OS to stop animation gets no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---- touch targets ------------------------------------------------------
 *
 * ⛔ Almost nothing tappable reached 44px: the nav was 38, sign-out 34, a FAQ
 * row 28, a footer link 18. 44 is not a style preference — it is the size at
 * which a thumb hits what it aimed at, and below it a phone user taps twice.
 *
 * ⚠️ Applied at every width, not just on a phone. A laptop with a touchscreen
 * is a phone as far as a finger is concerned, and a bigger hit area costs a
 * mouse nothing.
 */
.site-nav a, .site-account a { display: inline-flex; align-items: center; min-height: 44px; }
.faq summary { min-height: 44px; }
.site-foot ul { gap: 4px; }
.site-foot ul a { display: inline-flex; align-items: center; min-height: 40px; }
.foot-bar a { display: inline-flex; align-items: center; min-height: 40px; }