/* ============================================================================
   CONNECTCLUB, the shared sheet.
   One stylesheet across every page of the ConnectClub site, so four pages read
   as one object rather than four builds.

   THE LOOK IS THE CARD'S, deliberately. The printed ConnectClub card is a
   mid-century bearer coupon: deep bottle green, a flat gold band across the
   foot, a fine perforation, a cream seal holding the mark. Someone who is
   handed that card and then opens this site has to arrive somewhere that is
   recognisably the same object. So the palette, the perforation, the ruled
   lines and the yield bar all carry over from
   site/public/connectclub/card/plate.css.

   IT IS NOT THE STUDIO PALETTE, AND THAT IS THE POINT. ConnectClub stands on
   its own name here. Nothing on this site borrows a parent identity, in the
   words or in the colour.

   Paper has no motion and no gradients. A screen has both, so the flat press
   fields become layered ones here, which is the one place this parts company
   with the card.
   ============================================================================ */

/* Self hosted brand faces, the same ones the printed card is set in. A card and
   the site it opens should not be set in two different typefaces, and a font
   fetched from a third party is a dependency this site does not need. */
@import url("./assets/fonts/fonts.css");

:root{
  --emerald:#064A26; --emerald-deep:#052316; --emerald-text:#083A1D;
  --emerald-lift:#0A6A36; --emerald-soft:#245234;
  --gold:#F0A818; --gold-type:#FFD54E; --gold-line:#C98A12; --gold-deep:#8A5606;
  --cream:#F7E7BC; --paper:#FFFDF6; --line:#E4D5AC; --line-soft:#F0E4C6;
  --display:'Playfair Display',Georgia,serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(20px,5vw,52px);
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--emerald-text);
  font-family:var(--ui);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
img,svg{display:block;max-width:100%}
em{font-style:normal;font-weight:700;color:var(--gold-deep)}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.018em;margin:0}
a{color:var(--emerald)}
.wrap{max-width:900px;margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:720px}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-line)}

/* ---------- the coupon devices, shared ---------- */
.perf{height:4px;background-image:radial-gradient(var(--gold-line) 1.6px,transparent 1.7px);
  background-size:15px 4px;opacity:.75}
.rule{height:2px;background:var(--gold-line);opacity:.55}
.yield{height:clamp(14px,2.4vw,20px);background:linear-gradient(180deg,#FFC33F,var(--gold))}

/* ---------- the bar across the top ---------- */
.top{background:var(--emerald-deep);position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-block:14px;max-width:1040px}
.brandline{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.seal{width:38px;height:38px;border-radius:50%;background:var(--cream);flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 20px -12px rgba(0,0,0,.7)}
.seal img{width:26px;height:26px}
.wm{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.wm .a{color:var(--gold-type)} .wm .b{color:#8FE3B0}
nav.cc{display:flex;gap:4px;flex-wrap:wrap}
nav.cc a{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#9FD3B4;text-decoration:none;padding:8px 11px;border-radius:8px;
  transition:color .3s,background .3s}
nav.cc a:hover{color:var(--gold-type);background:rgba(255,255,255,.06)}
nav.cc a[aria-current="page"]{color:var(--emerald-deep);background:var(--gold-type)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--emerald);color:#fff;overflow:hidden;
  padding:clamp(40px,7vw,78px) 0 0}
/* Three light sources rather than one flat field: a warm lift in the upper
   right, a cool depth in the far corner, and the ruled ledger texture under
   both. A flat navy field is the thing this exists instead of. */
.hero:before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(680px 420px at 78% 6%,rgba(240,168,24,.22),transparent 62%),
    radial-gradient(560px 520px at 6% 96%,rgba(0,0,0,.42),transparent 68%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);
  pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-bottom:clamp(30px,5vw,54px)}
.hero h1{font-size:clamp(33px,7vw,60px);color:#fff;margin:0;max-width:17ch}
.hero h1 em{color:var(--gold-type)}
.hero .sub{font-size:clamp(17px,2.4vw,20px);color:#D8ECDF;margin:18px 0 0;max-width:46ch}
.hero .from{margin:24px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#9FD3B4}
.hero .eyebrow{color:var(--gold-type);margin:0 0 18px}

/* ---------- buttons ---------- */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;
  font-size:16px;padding:15px 24px;border-radius:11px;border:0;cursor:pointer;font-family:var(--ui);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s}
.btn.gold{background:linear-gradient(178deg,#FFCB4A,var(--gold));color:var(--emerald-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 16px 30px -16px rgba(0,0,0,.75)}
.btn.gold:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42)}
.btn.ghost:hover{border-color:var(--gold-type);color:var(--gold-type)}
.btn.emerald{background:var(--emerald);color:#fff;box-shadow:0 14px 28px -16px rgba(6,74,38,.9)}
.btn.emerald:hover{background:var(--emerald-lift);transform:translateY(-1px)}
.btn.quiet{background:transparent;color:var(--emerald);border:1.5px solid var(--line)}
.btn.quiet:hover{border-color:var(--emerald);color:var(--emerald-deep)}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}

/* ---------- sections ---------- */
section{padding:clamp(42px,7vw,72px) 0}
.sec-h{font-size:clamp(26px,4.4vw,40px);margin:0 0 10px}
.lede{font-size:clamp(16px,2.1vw,18.5px);color:var(--emerald-soft);max-width:56ch;margin:0 0 28px}
.band-cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-dark{background:var(--emerald-deep);color:#DCEFE2}
.band-dark .sec-h{color:#fff}
.band-dark .lede{color:#9FD3B4}
.band-dark .eyebrow{color:var(--gold-type)}

/* ---------- jewel tiles ----------
   ConnectClub's own emerald rather than a borrowed azure: a lit gradient face,
   a gold source in the corner, and exactly one gold shape inside the drawing.
   A thin outline glyph sitting bare on a white card is the failure this exists
   to prevent, and it is invisible to every automated check we own. */
.tile{width:54px;height:54px;border-radius:15px;position:relative;display:flex;
  align-items:center;justify-content:center;flex:none;
  background:
    radial-gradient(58px 44px at 82% 12%,rgba(255,213,78,.55),transparent 62%),
    linear-gradient(150deg,#0B7C3E,#0A6A36 46%,#064A26);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 -8px 14px -8px rgba(0,0,0,.5) inset,
             0 12px 22px -12px rgba(6,74,38,.85)}
.tile svg{width:29px;height:29px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tile svg .g{fill:var(--gold);stroke:none}

/* ---------- step cards ---------- */
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.step{background:#fff;border:1px solid var(--line-soft);border-radius:16px;
  padding:26px 24px 24px;position:relative;
  box-shadow:0 2px 5px rgba(8,58,29,.05),0 22px 44px -30px rgba(8,58,29,.4)}
.step h3{font-size:20px;margin:18px 0 7px}
.step p{margin:0;color:var(--emerald-soft);font-size:16px}
.step .n{position:absolute;top:22px;right:24px;font-family:var(--display);font-weight:700;
  font-size:34px;color:var(--line);line-height:1}

/* ---------- the film screen ---------- */
.screen{max-width:376px;margin:0 auto}
.screen-frame{position:relative;aspect-ratio:9/16;border-radius:24px;padding:3px;overflow:hidden;
  background:linear-gradient(152deg,var(--gold-line),var(--gold) 46%,#0A6A36);
  box-shadow:0 3px 10px rgba(8,58,29,.2),0 36px 70px -28px rgba(8,58,29,.62)}
.screen-i{display:block;width:100%;height:100%;border:0;border-radius:21px;background:var(--emerald-deep)}
.screen-cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#6C7F5F;text-align:center;margin-top:14px}
@media (max-width:520px){.screen{max-width:min(100%,330px)}}

/* ---------- two columns, the plain check ---------- */
.cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(264px,1fr))}
.col{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:24px}
.col h3{font-size:19px;color:#fff;margin:0 0 14px}
.col ul{margin:0;padding:0;list-style:none}
.col li{padding:9px 0 9px 28px;position:relative;font-size:15.5px;border-top:1px solid rgba(255,255,255,.09)}
.col li:first-child{border-top:0}
.col li:before{position:absolute;left:0;top:9px;font-weight:700;font-size:15px}
.no li:before{content:"\00d7";color:#E38E8E}
.yes li:before{content:"\2713";color:#6FE29C}

/* ---------- prose blocks and cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.4vw,32px);
  box-shadow:0 2px 6px rgba(8,58,29,.06),0 24px 52px -30px rgba(8,58,29,.45)}
.card+.card{margin-top:16px}
.card h3{font-size:21px;margin:0 0 8px}
.card p{margin:0;color:var(--emerald-soft)}
.card p+p{margin-top:12px}
.facts{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px}
.fact{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--emerald);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;background:#fff}

/* a numbered walk-through row: tile, then the words */
.walk{display:grid;gap:20px}
.wrow{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line-soft);
  border-radius:16px;padding:24px;
  box-shadow:0 2px 5px rgba(8,58,29,.05),0 22px 44px -30px rgba(8,58,29,.4)}
.wrow h3{font-size:20px;margin:0 0 6px}
.wrow p{margin:0;color:var(--emerald-soft);font-size:16px}
.wrow p+p{margin-top:10px}
@media (max-width:560px){.wrow{flex-direction:column;gap:14px}}

/* the minute-by-minute band */
.mins{display:grid;gap:12px}
.min{display:flex;gap:18px;align-items:baseline;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:18px 20px}
.min .t{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);flex:none;width:66px}
.min .b h3{font-size:18px;margin:0 0 4px}
.min .b p{margin:0;color:var(--emerald-soft);font-size:15.5px}

/* question and answer */
.qa{border-top:1px solid var(--line);padding:22px 0}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa h3{font-size:19px;margin:0 0 7px}
.qa p{margin:0;color:var(--emerald-soft)}
.qa p+p{margin-top:10px}

/* ---------- the closing invite, on every page ---------- */
.invite{background:var(--emerald);color:#fff;position:relative;overflow:hidden}
.invite:before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(620px 380px at 84% 10%,rgba(240,168,24,.2),transparent 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 26px);
  pointer-events:none}
.invite .wrap{position:relative;z-index:1}
.invite h2{color:#fff;font-size:clamp(26px,4.4vw,38px);margin:0 0 10px}
.invite h2 em{color:var(--gold-type)}
.invite p{color:#D8ECDF;max-width:52ch;margin:0}

/* ---------- footer ---------- */
footer{background:var(--emerald-deep);color:#9FD3B4;padding:34px 0 42px;font-size:14.5px}
footer a{color:var(--gold-type);text-decoration:none}
footer a:hover{text-decoration:underline}
.fgrid{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.legal{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#5F8B6E;margin-top:16px}

/* ---------- scroll reveal ---------- */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-rv .rv{opacity:0;transform:translateY(18px)}
.js-rv .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-rv .rv{opacity:1;transform:none}
  .btn:hover{transform:none}
}