/* ═══════════════════════════════════════════════════════════════════
   PUSHWELL — design system
   Built by AMUN STUDIO · studio.oxyalgo.com

   The register here is deliberately NOT the trading-funnel register.
   Insurance and tax money moves on trust, not hype: a person hands over
   their family's protection because the place looks like it will still
   exist in ten years. So: serif display, near-black ground, and colour
   used like brass on a door — sparingly, and only where it means something.

   The palette is Kevin's own. His printed material — flyers, the P.U.S.H.
   wordmark, the business cards already in circulation — is green on black
   with a gold script reserved for the word "Legacy". The site inherits that
   exactly, so a person who scans the QR on a card does not land somewhere
   that feels like a different company.

   --gold is the ACTION colour and it is green. The name is kept because
   every page already references it; renaming it would touch five files to
   change nothing. --legacy is the actual gold, and it is rationed: headline
   emphasis and the closing legacy note, nowhere else.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ground — near-black with a faint green cast, not navy */
  --ink:#080C09; --ink2:#0C120E; --card:#121A15; --card2:#18231B;
  --line:#1F2C24; --line2:#2C3F34;

  /* type */
  --txt:#F4F1EA; --mut:#A2B0A6; --faint:#6B7C71;

  /* accents — P.U.S.H. green is the action colour, gold means "legacy" */
  --gold:#35A94E; --gold2:#248C3C; --goldink:#04150A;
  --jade:#6FD18C; --rose:#E05A4E;
  --legacy:#E6B54F;

  /* light band */
  --cream:#F7F5EF; --creamink:#0F1611; --creammut:#5C6B60; --creamline:#E3DED0;

  --maxw:1140px;
  --disp:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r:14px; --rlg:22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--txt);font-family:var(--sans);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--goldink)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
section{padding:88px 0}
@media(max-width:720px){section{padding:60px 0}}

/* ── type ─────────────────────────────────────────────────────────── */
h1,h2,h3,.disp{font-family:var(--disp);font-weight:800;line-height:1.06;
  letter-spacing:-.02em;font-variation-settings:'SOFT' 20,'WONK' 1}
h1{font-size:clamp(38px,7.2vw,68px)}
h2{font-size:clamp(30px,4.6vw,46px)}
h3{font-size:clamp(21px,2.6vw,27px);line-height:1.18}
p{color:var(--mut)}
.lead{font-size:clamp(16px,2.1vw,19px);color:var(--mut);line-height:1.62}
.gold{color:var(--gold)} .jade{color:var(--jade)} .legacy{color:var(--legacy)}
/* Fraunces' WONK alternate for & is a circled form that reads as a symbol,
   not an ampersand, at display sizes. Headings opt out of it just for that
   glyph — the wonky g/y that make the face worth using are untouched. */
.amp{font-variation-settings:'SOFT' 20,'WONK' 0;font-family:var(--sans);
  font-weight:700;font-size:.92em;font-style:normal}
.kreyol{font-family:var(--disp);font-style:italic;font-weight:600;
  font-variation-settings:'SOFT' 60,'WONK' 1}

.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;
  display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold);opacity:.6}
.eyebrow.ctr{justify-content:center}
.ctr{text-align:center}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--gold);color:var(--goldink);font-weight:800;font-size:16px;
  padding:17px 30px;border-radius:100px;border:0;cursor:pointer;letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 10px 26px -8px rgba(53,169,78,.45);
  transition:transform .22s cubic-bezier(.25,.46,.45,.94),background .15s,box-shadow .2s;
  text-align:center;will-change:transform}
.btn:hover{background:#41C25C;transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.38) inset, 0 16px 36px -10px rgba(53,169,78,.6)}
.btn:active{background:var(--gold2);transform:translateY(0)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn.ghost{background:transparent;color:var(--txt);border:1.5px solid var(--line2);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.05);border-color:var(--gold);color:var(--gold)}
.btn.legacy{background:var(--legacy);color:#1A1205;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 26px -8px rgba(230,181,79,.45)}
.btn.legacy:hover{background:#F0C566}
.btn.wide{width:100%}
.btn.lg{padding:19px 36px;font-size:17px}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* ── surfaces ─────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rlg);padding:30px}
.card.raised{background:linear-gradient(160deg,var(--card2),var(--card));border-color:var(--line2)}
.band-cream{background:var(--cream);color:var(--creamink)}
.band-cream p{color:var(--creammut)}
.band-cream .eyebrow{color:var(--gold2)}
.band-cream .eyebrow::before{background:var(--gold2)}
.band-cream .card{background:#fff;border-color:var(--creamline)}
.hr{height:1px;background:var(--line);border:0;margin:0}

.grid{display:grid;gap:20px}
/* Grid and flex children default to min-width:auto, so a card whose content
   has a wide min-content size refuses to shrink and pushes the whole track
   past the viewport — which body{overflow-x:hidden} then silently clips
   instead of scrolling. This is the fix, and it has to stay. */
.grid>*,.meet>*,.slot>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── header ───────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(8,12,9,.84);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr .in{display:flex;align-items:center;justify-content:space-between;
  gap:14px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--disp);
  font-weight:900;font-size:20px;letter-spacing:-.02em}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(53,169,78,.18)}
/* The real wordmark. It is a raster with a soft light outline baked in, so
   it sits on the near-black ground without a halo but would look wrong on
   cream — the footer and header are the only places it appears. */
.logo img{height:38px;width:auto;
  /* The original artwork fades to near-black at the bottom of its gradient,
     and the header ground is #080C09 — so the lower half of the letters was
     disappearing. A soft halo separates it from the background WITHOUT
     touching the logo colour, which is the thing the owner asked us to keep. */
  filter:drop-shadow(0 0 7px rgba(111,209,140,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.85))}
.logo .sub{font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  line-height:1;align-self:flex-end;padding-bottom:3px}
@media(max-width:560px){.logo .sub{display:none}.logo img{height:32px}}
.hdr-r{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--line2);border-radius:100px;overflow:hidden}
.lang button{background:transparent;border:0;padding:6px 12px;font-size:12px;
  font-weight:800;letter-spacing:.04em;color:var(--faint);cursor:pointer;transition:.15s}
.lang button.on{background:var(--gold);color:var(--goldink)}
.call{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;
  padding:9px 16px;border-radius:100px;border:1.5px solid var(--line2);transition:.15s}
.call:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:560px){.call span{display:none}.call{padding:9px 11px}}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;padding:74px 0 78px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 78% -6%, rgba(53,169,78,.15), transparent 62%),
    radial-gradient(560px 380px at 6% 104%, rgba(230,181,79,.07), transparent 66%)}
.hero .wrap{position:relative}
.hero h1{margin:10px 0 0}
.hero .lead{margin-top:20px;max-width:53ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media(max-width:520px){.cta-row .btn{width:100%}}

/* trust strip under the hero */
.trust{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:32px;
  padding-top:24px;border-top:1px solid var(--line)}
.trust div{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--faint);font-weight:600}
.trust svg{width:15px;height:15px;flex:0 0 15px;color:var(--jade)}

/* ── the two doors ────────────────────────────────────────────────── */
.door{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:32px 30px 30px;border-radius:var(--rlg);border:1px solid var(--line);
  background:var(--card);transition:border-color .2s,transform .2s}
.door:hover{border-color:var(--gold);transform:translateY(-3px)}
.door .num{font-family:var(--disp);font-size:13px;font-weight:800;color:var(--gold);
  letter-spacing:.14em;text-transform:uppercase}
.door ul{list-style:none;display:grid;gap:9px;margin-top:2px}
.door li{display:flex;gap:10px;font-size:14.5px;color:var(--mut);line-height:1.5}
.door li svg{width:16px;height:16px;flex:0 0 16px;margin-top:3px;color:var(--jade)}
.door .btn{margin-top:auto}

/* ── meeting / BOM block ──────────────────────────────────────────── */
.meet{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
@media(max-width:860px){.meet{grid-template-columns:1fr}}
.slot{display:flex;align-items:center;gap:16px;padding:18px 20px;
  border:1px solid var(--creamline);border-radius:var(--r);background:#fff}
.slot .day{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.1}
.slot .time{font-size:14px;color:var(--creammut);font-weight:600}
.slot .pill{display:inline-block;margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 11px;border-radius:100px;
  background:rgba(53,169,78,.13);color:#1B7A32}
.addr{font-size:15px;line-height:1.7}
.addr b{font-family:var(--disp);font-size:17px}

/* ── photo slot ───────────────────────────────────────────────────── */
.photo-slot{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--rlg);
  border:1px solid var(--line2);background:var(--card);overflow:hidden;
  display:grid;place-items:center}
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo-slot span{font-size:13px;color:var(--faint);letter-spacing:.04em;
  border:1px dashed var(--line2);padding:9px 15px;border-radius:100px}

/* ── faq ──────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:17px;font-size:24px;
  font-weight:400;color:var(--gold);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 40px 22px 0;color:var(--mut);font-size:15px;line-height:1.68}

/* ── modal + form ─────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;background:rgba(4,8,16,.78);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto}
.modal.open{display:flex}
.sheet{background:var(--ink2);border:1px solid var(--line2);border-radius:var(--rlg);
  width:100%;max-width:460px;padding:30px 28px;position:relative;margin:auto;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7)}
.sheet .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.06);border:0;cursor:pointer;font-size:19px;color:var(--mut);
  line-height:1;display:grid;place-items:center}
.sheet .x:hover{background:rgba(255,255,255,.12);color:var(--txt)}
.sheet h3{margin-bottom:8px}
.sheet .msub{font-size:14px;color:var(--mut);margin-bottom:20px;line-height:1.55}
.field{margin-bottom:13px}
/* A checkbox grid for "which of these do you already have". Two columns on
   desktop, one on a phone. Each row is a full-width hit target because these
   get filled in on a phone, usually one-handed, usually in a hurry. */
.field .checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.field .checks label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  background:#080D0A;border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;font-size:13.5px;font-weight:500;letter-spacing:0;
  color:var(--mut);text-transform:none;margin:0;
  transition:border-color .18s ease,background .18s ease,color .18s ease}
.field .checks label:hover{border-color:var(--line2)}
.field .checks input{width:16px;height:16px;flex:0 0 16px;margin:1px 0 0;accent-color:var(--gold)}
.field .checks input:checked+span{color:var(--txt)}
.field .checks label:has(input:checked){border-color:var(--gold);background:rgba(53,169,78,.09)}
@media(max-width:620px){.field .checks{grid-template-columns:1fr}}
/* Sub-fields that only matter to business owners. */
.subfield{display:none}
.subfield.on{display:block}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:#080D0A;
  border:1px solid var(--line2);border-radius:11px;padding:13px 14px;font-size:15.5px;
  transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(53,169,78,.2)}
.field input::placeholder{color:#53645A}

/* TCPA consent — deliberately a real checkbox, unchecked, and the form
   still submits without it. Consent to be called is not the price of
   asking a question, and pre-ticking it is exactly what gets people sued. */
.consent{display:flex;gap:11px;align-items:flex-start;margin:16px 0 6px;
  padding:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:11px}
.consent input{width:19px;height:19px;flex:0 0 19px;margin-top:1px;accent-color:var(--gold);cursor:pointer}
.consent label{font-size:11.5px;line-height:1.55;color:var(--faint);cursor:pointer}
.finehint{font-size:11.5px;color:var(--faint);margin-top:13px;line-height:1.5;text-align:center}
.formerr{display:none;background:rgba(224,90,78,.12);border:1px solid rgba(224,90,78,.4);
  color:#F3A79F;font-size:13.5px;padding:11px 13px;border-radius:10px;margin-bottom:14px}
.formerr.on{display:block}

/* ── footer + legal ───────────────────────────────────────────────── */
.ftr{background:#050805;border-top:1px solid var(--line);padding:52px 0 40px;font-size:13px}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:32px}
@media(max-width:720px){.ftr .cols{grid-template-columns:1fr;gap:22px}}
.ftr h4{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px}
.ftr a{color:var(--mut);display:block;padding:4px 0}
.ftr a:hover{color:var(--gold)}
.legal{border-top:1px solid var(--line);padding-top:24px;color:#5A6A5F;
  font-size:11.5px;line-height:1.72}
.legal p+p{margin-top:11px}
.legal b{color:var(--faint);font-weight:700}

/* ── reveal ───────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ── i18n ─────────────────────────────────────────────────────────
   These rules only ever HIDE. The visible twin keeps whatever display
   its own class gives it — a .pill stays inline-block, an h1 stays
   block. An earlier version flipped the hidden one back on with
   `display:revert`, which reverts to the *user-agent* value and quietly
   stripped .pill's inline-block off every Kreyòl badge on the page. */
html[lang="en"] [data-ht]{display:none !important}
html[lang="ht"] [data-en]{display:none !important}

/* ═══════════════════════════════════════════════════════════════════
   DEPTH LAYER
   Appended after the base system so it overrides cleanly and can be
   lifted out in one block if it ever needs to come out.

   The reference is the premium dark-fintech register — Slash, Current,
   Titan: one object floating in a spotlight on near-black, lit from
   above, everything else held flat so the object is the only thing with
   real dimension. Depth is spent, not sprayed. Three surfaces get it —
   the hero card, the door cards, the buttons — and nothing else does.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Layered elevation. Two shadows per level: a tight contact shadow that
     sits the object on the ground, and a wide soft one that gives it air.
     A single blurred shadow always reads as a sticker. */
  --e1:0 1px 2px rgba(0,0,0,.5), 0 4px 12px -4px rgba(0,0,0,.5);
  --e2:0 2px 4px rgba(0,0,0,.55), 0 14px 34px -12px rgba(0,0,0,.72);
  --e3:0 4px 8px rgba(0,0,0,.6), 0 34px 70px -22px rgba(0,0,0,.85);
  --e4:0 8px 16px rgba(0,0,0,.62), 0 62px 120px -34px rgba(0,0,0,.9);
  /* the hairline that reads as a lit top edge */
  --lip:inset 0 1px 0 rgba(255,255,255,.09);
}

/* ── grain ─────────────────────────────────────────────────────────
   Flat near-black banding is the biggest tell of a cheap dark theme. A
   little noise over the whole page kills the banding, and it is what
   makes the gradients read as light falling rather than as fills. */
body::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

/* ── hero: a spotlight instead of two flat washes ──────────────────*/
.hero::before{
  background:
    radial-gradient(900px 520px at 72% -12%, rgba(53,169,78,.20), transparent 60%),
    radial-gradient(620px 420px at 50% 0%, rgba(255,255,255,.055), transparent 62%),
    radial-gradient(700px 460px at 4% 108%, rgba(230,181,79,.075), transparent 66%)}
/* a horizon, so the hero ends on a line of light rather than just stopping */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(53,169,78,.34),transparent);
  pointer-events:none}

/* ── the 3D stage ──────────────────────────────────────────────────*/
.stage{perspective:1400px;perspective-origin:50% 20%;position:relative;
  display:grid;place-items:center;min-height:340px}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.hero-grid>*{min-width:0}
/* The h1 is sized for a full-width measure. Inside the two-column hero the
   column is ~555px, so the global clamp overshoots and breaks "Secure
   tomorrow." across two lines. Scoped down so each line holds. */
.hero-grid h1{font-size:clamp(34px,4.4vw,54px)}
.hero-grid .lead{max-width:46ch}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .stage{min-height:280px}
}

/* the object: a coverage card, lit from the top-left, tilted in space */
.pcard{position:relative;width:100%;max-width:420px;
  aspect-ratio:1.586/1;border-radius:22px;padding:26px 26px 22px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform-style:preserve-3d;
  transform:rotateX(11deg) rotateY(-16deg) rotateZ(2deg);
  background:linear-gradient(148deg,#2A8C41 0%,#186B2C 34%,#0C3D18 68%,#07230E 100%);
  box-shadow:var(--e4), var(--lip),
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -30px 60px -30px rgba(0,0,0,.65);
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
  will-change:transform;z-index:2}
/* the sheen — a hard-edged highlight sweeping the face is what separates
   a gradient rectangle from an object catching a light */
.pcard::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(112deg,transparent 26%,rgba(255,255,255,.16) 40%,
    rgba(255,255,255,.05) 47%,transparent 58%);
  pointer-events:none}
/* the glow it throws onto the ground behind it */
.pcard::after{content:'';position:absolute;left:6%;right:6%;bottom:-14%;height:52%;
  border-radius:50%;filter:blur(46px);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(53,169,78,.5),transparent 72%)}
.stage:hover .pcard{transform:rotateX(7deg) rotateY(-10deg) rotateZ(1deg)}

.pcard .pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pcard img{height:30px;width:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.pcard .pc-chip{width:40px;height:30px;border-radius:6px;flex:0 0 40px;
  background:linear-gradient(140deg,#E8CE86,#B8912F 52%,#8A6A1E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.5);
  position:relative;overflow:hidden}
.pcard .pc-chip::before{content:'';position:absolute;inset:5px 4px;
  border:1px solid rgba(0,0,0,.28);border-radius:2px;border-left:0;border-right:0}
.pcard .pc-mid{font-family:var(--disp);font-weight:800;font-size:21px;
  line-height:1.14;letter-spacing:-.02em;color:#F2F7F2;
  text-shadow:0 2px 8px rgba(0,0,0,.5)}
.pcard .pc-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.pcard .pc-name{font-size:12.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.94);
  text-shadow:0 1px 4px rgba(0,0,0,.5)}
.pcard .pc-sub{font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:5px}
.pcard .pc-seal{font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.7);text-align:right;line-height:1.55}

/* two cards stacked behind it, so the object reads as a deck not a plane */
.pcard-back{position:absolute;width:100%;max-width:420px;aspect-ratio:1.586/1;
  border-radius:22px;pointer-events:none;
  background:linear-gradient(148deg,#17381F,#0A1C10);
  box-shadow:var(--e3), inset 0 0 0 1px rgba(255,255,255,.05)}
.pcard-back.b1{transform:rotateX(11deg) rotateY(-16deg) rotateZ(2deg)
  translate3d(24px,26px,-60px);opacity:.6;z-index:1}
.pcard-back.b2{transform:rotateX(11deg) rotateY(-16deg) rotateZ(2deg)
  translate3d(46px,50px,-110px);opacity:.32;z-index:0}

@media(prefers-reduced-motion:reduce){
  .pcard,.stage:hover .pcard{transition:none}
}

/* ── doors: real elevation, and a lift that has depth in it ────────*/
.door{background:linear-gradient(168deg,var(--card2) 0%,var(--card) 62%);
  box-shadow:var(--e2), var(--lip);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s}
.door::after{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px 200px at 50% -10%,rgba(53,169,78,.16),transparent 70%)}
.door:hover{transform:translateY(-6px);border-color:rgba(53,169,78,.5);
  box-shadow:var(--e4), var(--lip), 0 0 0 1px rgba(53,169,78,.16)}
.door:hover::after{opacity:1}

/* surfaces share one lip so they feel cut from the same material */
.card{box-shadow:var(--e1), var(--lip)}
.card.raised{box-shadow:var(--e3), var(--lip)}
.band-cream .card{box-shadow:0 1px 2px rgba(20,30,22,.06),0 12px 30px -14px rgba(20,30,22,.18)}
.slot{box-shadow:0 1px 2px rgba(20,30,22,.05),0 8px 20px -12px rgba(20,30,22,.16)}

/* ── buttons: a pressable object, not a coloured rectangle ─────────*/
.btn{background:linear-gradient(180deg,#3FBB59 0%,var(--gold) 46%,#2A9241 100%);
  box-shadow:var(--lip),0 1px 2px rgba(0,0,0,.4),
    0 10px 22px -8px rgba(53,169,78,.5),0 0 0 1px rgba(53,169,78,.35)}
.btn:hover{background:linear-gradient(180deg,#4CCE68 0%,#3CB756 46%,#2FA047 100%);
  box-shadow:var(--lip),0 2px 4px rgba(0,0,0,.42),
    0 18px 36px -10px rgba(53,169,78,.62),0 0 0 1px rgba(53,169,78,.45)}
.btn:active{transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.34),0 1px 2px rgba(0,0,0,.4)}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:var(--lip),0 1px 2px rgba(0,0,0,.3)}
.btn.ghost:hover{background:linear-gradient(180deg,rgba(53,169,78,.14),rgba(53,169,78,.04))}
.band-cream .btn.ghost{background:linear-gradient(180deg,rgba(15,22,17,.05),rgba(15,22,17,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(20,30,22,.08)}

/* ── serif italic for the emphasis word ────────────────────────────
   Colour alone carries emphasis at the cost of shouting. Fraunces' italic
   does it with the letterforms, which is what the reference set all use. */
.em{font-style:italic;font-variation-settings:'SOFT' 60,'WONK' 1;
  font-weight:700;letter-spacing:-.01em}

/* ── header gets a real edge ───────────────────────────────────────*/
.hdr{box-shadow:0 1px 0 rgba(255,255,255,.045),0 10px 30px -18px rgba(0,0,0,.9)}