:root{
    --paper:#faf6f1;      /* page background, warm cream */
    --paper-2:#f1e9df;    /* footer / soft band */
    --surface:#ffffff;    /* raised surfaces / member strip */
    --ink:#2b1a26;        /* primary text + headings (deep plum from the logo) */
    --ink-soft:#5b4a55;   /* secondary text */
    --rose:#b02f42;       /* primary accent / Join button (logo rose, deepened for AA) */
    --rose-ink:#a12437;   /* rose used as link/text on light backgrounds */
    --rose-dark:#8f2537;  /* hover */
    --navy:#33526e;       /* secondary accent / Log In (from the hero) */
    --gold:#c9a26a;       /* warm decorative accent only, never text */
    --line:#e6ddd2;       /* borders */
    --maxw:1120px;
    color-scheme:light;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:clamp(1.125rem,1.05rem + .3vw,1.25rem);line-height:1.7;  /* 18px+ base for a 50+ audience */
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink)}
  p{margin:0 0 1rem}
  a{color:var(--rose-ink)}
  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem)}
  .prose{max-width:none}
  img{max-width:100%;display:block}

  /* ---------- header ---------- */
  .hd{position:sticky;top:0;z-index:50;background:rgba(250,246,241,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
  .hd-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
  .hd-cta{display:flex;align-items:center;gap:.6rem}
  .brand{display:flex;align-items:center;text-decoration:none}
  .brand img.logo{height:clamp(28px,7vw,38px);width:auto;display:block}  /* clamps the wordmark so it can't wrap the header */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;font-family:"Hanken Grotesk";font-weight:700;border:0;border-radius:999px;cursor:pointer;text-decoration:none;line-height:1;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
  .btn-join{background:var(--rose);color:#fff;padding:.72rem 1.3rem;box-shadow:0 6px 18px rgba(176,47,66,.28)}
  .btn-join:hover{background:var(--rose-dark);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--navy);border:2px solid var(--navy);padding:.66rem 1.2rem}
  .btn-ghost:hover{background:rgba(51,82,110,.08)}
  .btn-lg{padding:.95rem 1.8rem;font-size:1.06rem}
  .btn-login{padding:.6rem 1.1rem}
  @media (max-width:430px){ .hd-cta{align-items:stretch} .hd .btn{padding:.5rem .8rem;font-size:.95rem;min-height:44px;text-align:center;line-height:1.15} }

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-end;overflow:hidden}
  .hero-art{position:absolute;inset:0;z-index:0}
  .hero-art img{width:100%;height:100%;object-fit:cover;display:block}
  .hero-scrim{position:absolute;inset:0;z-index:1;background:
     linear-gradient(180deg,rgba(30,18,26,.20) 0%,rgba(30,18,26,.06) 38%,rgba(30,18,26,.62) 78%,rgba(30,18,26,.86) 100%)}
  .hero-in{position:relative;z-index:2;width:100%;padding-block:clamp(2.2rem,5vw,4rem) clamp(2.4rem,6vw,4.4rem)}
  .hero .hero-h{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;line-height:1.04;letter-spacing:-.02em;margin:0;font-size:clamp(2.6rem,7.4vw,5.2rem);color:#fff;text-shadow:0 2px 30px rgba(30,18,26,.6)}
  .hero p.sub{color:#fff;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5;margin:1.1rem 0 1.7rem;max-width:34ch;text-shadow:0 1px 16px rgba(30,18,26,.7)}
  .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
  .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.08)}
  .hero .btn-ghost:hover{background:rgba(255,255,255,.18)}

  /* ---------- member strip (ported layout; PLACEHOLDER, not wired to live data) ---------- */
  .member-feed-section{background:var(--surface);padding:20px 0;overflow:hidden;border-bottom:1px solid var(--line)}
  .member-feed-row{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;padding:0 clamp(1.1rem,4vw,2.4rem);scrollbar-width:none;-ms-overflow-style:none}
  .member-feed-row::-webkit-scrollbar{display:none}
  .member-feed-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:92px;height:92px;border-radius:50%;border:3px solid var(--rose);background:var(--paper-2);color:var(--navy);overflow:hidden;transition:transform .2s}
  .member-feed-item:hover{transform:scale(1.05)}
  .member-feed-item svg{width:46px;height:46px}
  .member-feed-item img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center;display:block}

  /* ---------- intro band (one H1 + paragraph) ---------- */
  .intro{background:var(--paper)}
  .intro .wrap{padding-block:clamp(2.6rem,6vw,4.2rem)}
  .intro h1{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 1rem;max-width:20ch}
  .intro p{margin:0;color:var(--ink-soft);max-width:64ch}

  /* ---------- final cta ---------- */
  .final{background:var(--rose);color:#fff;text-align:center}
  .final .wrap{padding-block:clamp(3rem,7vw,5rem)}
  .final h2{font-size:clamp(2rem,5vw,3.2rem);color:#fff;margin:0 0 .8rem;margin-inline:auto;max-width:20ch}
  .final p{color:rgba(255,255,255,.95);max-width:56ch;margin:0 auto 1.6rem}
  .final .btn-join{background:#fff;color:var(--rose);box-shadow:0 8px 24px rgba(30,18,26,.22)}
  .final .btn-join:hover{background:#fff;color:var(--rose-dark)}

  /* ---------- footer ---------- */
  .ft{background:var(--paper-2);border-top:1px solid var(--line)}
  .ft .wrap{padding-block:clamp(2.4rem,5vw,3.4rem)}
  .ft-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem 2rem;align-items:flex-start}
  .ft .brand{margin-bottom:.6rem}
  .ft .brand img.logo{height:34px}
  .ft .tag{color:var(--ink-soft);max-width:38ch;margin:0}
  .ft-links{display:flex;flex-wrap:wrap;gap:1rem 1.4rem}
  .ft-links a{color:var(--ink-soft);text-decoration:none;font-weight:600}
  .ft-links a:hover{color:var(--rose-ink);text-decoration:underline}
  .ft-base{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;justify-content:space-between;color:var(--ink-soft);font-size:.95rem}

  /* ---------- cookie consent ---------- */
  .cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);color:#fff;border-top:3px solid var(--rose);transform:translateY(110%);transition:transform .4s ease;padding-block:.9rem;padding-bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
  .cookie-bar.sd-visible{transform:translateY(0)}
  .cookie-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
  .cookie-text{margin:0;color:#fff;font-size:1rem;line-height:1.55;flex:1 1 340px}
  .cookie-text a{color:#fff;text-decoration:underline;text-underline-offset:2px}
  .cookie-accept{flex:0 0 auto;padding:.7rem 1.6rem;cursor:pointer}

  /* ---------- content pages ---------- */
  .crumb{font-size:.95rem;line-height:1.5;color:var(--ink-soft);margin:0 0 1rem}
  .crumb a{color:var(--rose-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .crumb .sep{color:var(--ink-soft);margin:0 .35rem}
  .lede{background:var(--paper)}
  .lede .wrap{padding-block:clamp(2.4rem,5vw,3.6rem) clamp(2rem,4.5vw,2.8rem)}
  .lede h1{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 1rem;max-width:22ch}
  .lede p{color:var(--ink-soft);max-width:66ch;margin:0;font-size:1.05em}
  .band{background:var(--paper)}
  .band.alt{background:var(--paper-2)}
  .band .wrap{padding-block:clamp(2rem,4.5vw,2.8rem)}
  .band h2{font-size:clamp(1.55rem,3.6vw,2.4rem);margin:0 0 .9rem;max-width:30ch}
  .band p{color:var(--ink);max-width:66ch;margin:0 0 1rem}
  .band p:last-child{margin-bottom:0}
  .band a{color:var(--rose-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px}
  .band.faq h3{font-size:1.2rem;margin:1.3rem 0 .4rem;color:var(--ink)}
  .band.faq h3:first-of-type{margin-top:.4rem}
  .cats{background:var(--paper-2)}
  .cats .wrap{padding-block:clamp(2.6rem,6vw,4rem)}
  .cats h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 1.4rem}
  .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
  .cat-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem;text-decoration:none;color:var(--ink);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
  .cat-card:hover{border-color:var(--rose);transform:translateY(-2px);box-shadow:0 10px 26px rgba(43,26,38,.10)}
  .cat-card h3{color:var(--rose-ink);font-size:1.2rem;margin:0 0 .3rem}
  .cat-card p{color:var(--ink-soft);margin:0}
  .cats .closing{margin:1.6rem 0 0;max-width:72ch;color:var(--ink)}
  .cats .closing a{color:var(--rose-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px}

  /* ---------- mobile ---------- */
  @media (max-width:600px){
    .member-feed-item{width:76px;height:76px}
    .member-feed-item svg{width:38px;height:38px}
    /* mobile: hide the strapline (stays in the HTML and on desktop); the freed space lets the heading + buttons sit lower, clear of the couple's faces */
    .hero p.sub{display:none}
    .hero-cta{margin-top:1.4rem}
    /* anchor the block low over the darker lower third, with breathing room above the bottom edge */
    .hero-in{padding-bottom:3rem;transition:padding-bottom .4s ease}
    /* only when the timezone-gated consent bar is showing, lift the CTAs so the bar can't cover them (targeted, not a blanket 150px) */
    body:has(#sdCookieConsent.sd-visible) .hero-in{padding-bottom:140px}
    /* scrim keeps the lowered heading at AA+ contrast where it now sits */
    .hero-scrim{background:linear-gradient(180deg,rgba(30,18,26,.14) 0%,rgba(30,18,26,.08) 26%,rgba(30,18,26,.6) 40%,rgba(30,18,26,.85) 62%,rgba(30,18,26,.92) 100%)}
  }
  @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}