/* =========================================================================
   KEN CREATOR PROGRAM — Design System
   King's Edge Nutrition
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand */
  --gold:        #C89B3C;
  --gold-deep:   #A87C22;
  --gold-soft:   #F5EBD8;
  --gold-wash:   #FDF7EC;
  --red:         #E41F1F;
  --red-deep:    #B81616;
  --red-soft:    #FBE3E3;
  --red-wash:    #FDF2F2;
  /* rgb(230,126,34) is present in the original site's own palette (level-1
     accent); darkened here so white badge text clears 4.5:1 contrast. */
  --orange:       #E67E22;
  --orange-deep:  #B85310;
  --gold-deep-2:  #8F6B1D;  /* darker than --gold-deep, for white-on-fill badges */

  /* Neutrals */
  --ink:         #14110E;
  --ink-2:       #3D3833;
  --ink-3:       #6B635A;
  --paper:       #FFFFFF;
  --paper-2:     #FAF8F4;
  --paper-3:     #F3EFE7;
  --line:        #E6E0D4;
  --line-strong: #CFC6B4;

  /* Type */
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.35rem, 1.4rem + 4.1vw, 4.6rem);
  --fs-h2:      clamp(1.85rem, 1.2rem + 2.7vw, 3.15rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1.05vw, 1.85rem);
  --fs-h4:      clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-lead:    clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --section-y: clamp(64px, 8vw, 120px);
  --gap-head:  clamp(40px, 5vw, 64px);   /* section heading -> its content */
  --measure-head: 720px;                 /* one width for every centred intro */
  --gutter: clamp(20px, 5vw, 48px);
  --maxw: 1280px;
  --maxw-text: 62ch;

  /* Borders & elevation — deliberately restrained */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(20,17,14,.05);
  --shadow-md: 0 8px 24px -12px rgba(20,17,14,.18);
  --shadow-lg: 0 24px 60px -28px rgba(20,17,14,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 200ms;
}

/* Large displays: widen the container and the display type together, so the
   hero fills the screen instead of floating in a 1200px column. */
@media (min-width:1600px){
  :root{
    --maxw: 1440px;
    --fs-display: 5rem;
  }
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:.005em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);letter-spacing:.04em;line-height:1.2}
p{margin:0}
p + p{margin-top:1em}

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

/* ---------- 3. Layout primitives ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:820px}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--paper-2)}
.section--ink{background:var(--ink);color:#D8D2C8}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.stack-4 > * + *{margin-top:var(--sp-4)}
.stack-5 > * + *{margin-top:var(--sp-5)}
.stack-6 > * + *{margin-top:var(--sp-6)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-2);max-width:var(--maxw-text)}
.muted{color:var(--ink-3)}
.center{text-align:center}
.center .lead,.center .measure{margin-inline:auto}
.measure{max-width:var(--maxw-text)}
/* One centred intro block for every section: same measure, same gap below. */
.section__head{max-width:var(--measure-head);margin-inline:auto;margin-bottom:var(--gap-head)}
.section__head .lead{margin-top:var(--sp-4)}
.section__head h2 + h2{margin-top:var(--sp-1)}

/* Closing CTA that sits below a rule at the end of a section. */
.section__foot{
  margin-top:var(--gap-head);
  padding-top:var(--gap-head);
  border-top:1px solid var(--line);
  text-align:center;
}
.section__foot h3{margin-bottom:var(--sp-3)}
.section__foot .lead{margin-bottom:var(--sp-6)}

.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}

/* Eyebrow — the single repeating label device */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:.8125rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 var(--sp-4);
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);flex:none}
.center .eyebrow::after{content:"";width:28px;height:2px;background:var(--gold)}

.accent-red{color:var(--red)}
.accent-gold{color:var(--gold-deep)}

/* Rules */
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:var(--red);
  --btn-bg-hover:var(--red-deep);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;
  padding:0 var(--sp-6);
  font-family:var(--font-display);
  font-size:1rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:2px solid var(--btn-bg);
  border-radius:var(--r-sm);
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transition:background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
  will-change:transform;
}
.btn__label{position:relative;z-index:1}
.btn__arrow{
  position:relative;z-index:1;
  flex:none;width:18px;height:18px;
  transition:transform 260ms var(--ease);
}
.btn:hover{
  background:var(--btn-bg-hover);
  border-color:var(--btn-bg-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn:active{transform:translateY(0);box-shadow:none}

/* Sheen sweep — one restrained motion cue, no gradient decoration at rest */
.btn::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform 620ms var(--ease);
}
.btn:hover::after{transform:translateX(120%)}

.btn--lg{min-height:64px;padding-inline:var(--sp-7);font-size:1.0625rem}
.btn--block{display:flex;width:100%}

.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--ink);
  border-color:var(--ink);
}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%)}

.btn--gold{--btn-bg:var(--gold);--btn-bg-hover:var(--gold-deep);--btn-fg:var(--ink)}
.btn--gold:hover{color:#fff}

.btn--onink{--btn-bg:var(--red);--btn-bg-hover:#fff}
.btn--onink:hover{color:var(--ink)}

/* Text link with underline grow */
.tlink{
  display:inline-block;color:var(--ink);text-decoration:none;font-weight:600;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size 260ms var(--ease),color var(--dur) var(--ease);
}
.tlink:hover{background-size:100% 2px;color:var(--gold-deep)}

/* CTA cluster: button + reassurance line */
.cta-block{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start}
.center .cta-block{align-items:center}
/* .center applied directly on the block itself (not a parent) */
.cta-block.center{align-items:center}
.cta-note{font-size:var(--fs-xs);color:var(--ink-3);max-width:44ch;line-height:1.55}
.center .cta-note{text-align:center}
/* Fine-print that closes a section, centred under the content. */
.cta-note--block{margin:var(--sp-5) auto 0;max-width:60ch;text-align:center}
/* .section__foot centres its text via text-align; the CTA needs it explicitly. */
.section__foot .cta-block{align-items:center}

/* ---------- 5. Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:72px}
.header__logo{display:flex;align-items:center;text-decoration:none}
.header__logo img{height:34px;width:auto}
.header__cta{
  min-height:44px;padding-inline:var(--sp-5);font-size:.875rem;letter-spacing:.12em;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity 260ms var(--ease),transform 260ms var(--ease),
             background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.header.is-stuck .header__cta{opacity:1;transform:none;pointer-events:auto}
@media (max-width:699px){
  .header{background:#fff;border-bottom-color:var(--line)}
  .header__inner{
    min-height:62px;
    padding-inline:12px;
  }
  .header__logo img{height:34px}
  .header__cta{
    min-height:44px;
    padding-inline:16px;
    font-size:.875rem;
    letter-spacing:.06em;
    border-radius:8px;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .header__cta .btn__arrow{display:none}
}

/* ---------- 6. Hero ---------- */
/* Bottom padding matters now that the CTA (not the rail) closes the hero —
   with 0 it butted straight into the next section's tint. */
.hero{position:relative;background:var(--paper);padding-block:24px 40px;overflow:hidden}

/* Mobile flows in DOM order — headline, kicker, image, copy, CTA — which is the
   order the original page uses. Desktop re-columns it in the media query below. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.hero__head{margin-bottom:var(--sp-3)}
.hero__head .line-2{display:block;color:var(--red)}
.hero__kicker{
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,.98rem+.4vw,1.25rem);
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink);
  padding-left:var(--sp-4);border-left:3px solid var(--gold);
  line-height:1.35;margin-bottom:20px;
}
.hero__copy{font-size:var(--fs-lead);color:var(--ink-2);max-width:52ch}
.hero__brand{color:inherit;font-weight:inherit}
.hero__cta{margin-top:clamp(22px,2.5vw,32px)}
.hero__cta .btn{min-width:min(296px,100%)}
.hero__cta .cta-note{max-width:44ch}
.hero__cta--mobile{display:none}

.hero__media{position:relative;margin-bottom:var(--sp-6)}
.hero__media img{
  width:100%;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--paper-2);
  aspect-ratio:5/4;object-fit:cover;object-position:center 22%;
}
/* Gold corner rule instead of a decorative blob */
.hero__media::before{
  content:"";position:absolute;left:-14px;bottom:-14px;width:96px;height:96px;
  border-left:3px solid var(--gold);border-bottom:3px solid var(--gold);
  border-bottom-left-radius:var(--r-lg);
  pointer-events:none;
}
@media (max-width:899px){
  .hero__media{margin-bottom:var(--sp-5)}
  .hero__media::before{left:-8px;bottom:-8px;width:64px;height:64px}
  /* A shallow crop keeps the complete primary hero inside short phone
     viewports while preserving the creator, shaker, and product lineup. */
  .hero__media img{aspect-ratio:16/10;height:auto;object-fit:cover;object-position:center 30%}
}
@media (min-width:900px){
  .hero{padding-block:clamp(32px,3vw,44px) clamp(36px,3.5vw,52px)}
  .hero__grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,72px);
    /* Copy and CTA keep their natural height; the final flexible row absorbs
       any remaining image height without opening gaps between text blocks. */
    grid-template-rows:auto auto auto 1fr;
    align-items:start;
  }
  .hero__head  {
    grid-column:1;grid-row:1;
    font-size:clamp(3rem,4vw,4rem);
  }
  .hero__kicker{grid-column:1;grid-row:2}
  .hero__copy  {grid-column:1;grid-row:3}
  .hero__cta   {grid-column:1;grid-row:4;align-self:start}
  /* Match the source photo's native 5:4 composition. Letting the text column
     dictate a wider frame cropped both the creator's head and product row. */
  .hero__media {
    grid-column:2;grid-row:1 / span 4;
    align-self:start;margin-bottom:0;
    position:relative;min-height:0;
    width:100%;aspect-ratio:5/4;
  }
  .hero__media img{
    position:absolute;inset:0;
    width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;object-position:center;
  }
}

/* Journey rail — proof strip directly under the fold.
   Matches the reference: icon above its label, centred, with a gold chevron
   between steps rather than divider rules, then a centred CTA beneath. */
.rail{margin-top:clamp(28px,3vw,40px)}
.rail__inner{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  max-width:1040px;margin-inline:auto;
}
.rail__item{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:0 var(--sp-4);
  text-align:center;
}
/* Gold chevron between steps (not after the last, and not where a row wraps) */
.rail__item::after{
  content:"\203A";
  position:absolute;right:-7px;top:23px;
  font-family:var(--font-body);font-size:1.75rem;font-weight:400;
  line-height:1;color:var(--gold);
}
.rail__item:last-child::after{content:none}
.rail__item img{width:48px;height:48px;object-fit:contain;flex:none}
.rail__item span{
  font-family:var(--font-display);font-weight:500;font-size:.9375rem;
  text-transform:uppercase;letter-spacing:.055em;color:var(--ink);line-height:1.25;
}
@media (min-width:700px){
  .rail__item span{font-size:1rem;white-space:nowrap}
}
@media (max-width:699px){
  .hero{padding:10px 0 32px}
  .hero > .wrap:first-child{padding-inline:18px}
  .hero__head{
    font-size:clamp(1.9rem,8.5vw,2.15rem);
    line-height:1.08;
    letter-spacing:0;
    text-align:center;
    margin-bottom:8px;
  }
  .hero__kicker{
    font-family:var(--font-body);
    font-size:.9375rem;
    font-weight:400;
    line-height:1.35;
    letter-spacing:0;
    text-transform:none;
    text-align:center;
    border-left:0;
    padding-left:0;
    margin-bottom:20px;
  }
  .hero__media{margin-bottom:24px}
  .hero__media::before{display:none}
  .hero__media img{
    aspect-ratio:5/4;
    object-fit:cover;
    object-position:center;
    border-radius:12px;
  }
  .hero__copy{
    max-width:none;
    padding-inline:8px;
    color:var(--ink);
    font-size:.9375rem;
    line-height:1.35;
    text-align:center;
  }
  .hero__brand{color:var(--red);font-weight:700}
  .rail{margin-top:20px}
  .rail .wrap{padding-inline:12px}
  .rail__item{gap:5px;padding-inline:3px}
  .rail__item::after{
    content:"\203A";
    right:-4px;top:10px;
    font-size:1.15rem;
  }
  .rail__item img{width:30px;height:30px}
  .rail__item span{
    font-size:.6875rem;
    letter-spacing:.015em;
    line-height:1.15;
  }
  /* Keep the section's primary action in the content flow on mobile. */
  .hero__cta{
    display:flex;
    align-items:center;
    width:100%;
    margin-top:20px;
    padding-inline:8px;
  }
  .hero__cta .btn{width:100%;min-width:0}
  .hero__cta .cta-note{margin-inline:auto;text-align:center}
  .hero__cta--desktop{display:none}
  .hero__mobile-cta-wrap{padding-inline:18px}
}
@media (max-width:359px){
  .rail__item{padding-inline:2px}
  .rail__item img{width:28px;height:28px}
  .rail__item span{font-size:.625rem;letter-spacing:0}
}

/* ---------- 7. Editorial split (problem section) ---------- */
/* The warm paper shift alone separates this section from the white hero. */
.unlock{background:var(--paper-2)}
.unlock__intro{padding-block:clamp(56px,7vw,96px) clamp(32px,4vw,52px)}
.unlock__head{max-width:760px;margin-inline:auto;text-align:center}
.unlock__head h2{line-height:1.05}
.unlock__head h2 span{color:var(--red);white-space:nowrap}
.unlock__rule{
  width:min(160px,42%);height:2px;
  margin:clamp(20px,3vw,30px) auto;
  background:var(--gold);
}
.unlock__head p{
  max-width:44ch;margin-inline:auto;
  color:var(--ink);font-size:var(--fs-lead);line-height:1.55;
}
.unlock__head strong{color:var(--red);font-weight:700}
.unlock__content{background:var(--paper-2);padding-block:0 var(--section-y)}
@media (max-width:699px){
  .unlock__intro{padding-block:48px 28px}
  .unlock__head{max-width:none}
  .unlock__rule{width:134px;margin:14px auto}
  .unlock__head p{
    max-width:none;
    font-size:.9375rem;
    line-height:1.4;
  }
}

/* Mobile: heading, then image, then copy — matching the hero and the original.
   Desktop: media in its own column, heading + copy stacked in the other. */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.split__head{margin-bottom:var(--sp-5)}
.split__head h2 + h2{margin-top:var(--sp-1)}
.split__media{margin-bottom:var(--sp-6)}
.split__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-lg);border:1px solid var(--line);
}
@media (max-width:899px){
  .split__media img{aspect-ratio:auto;height:auto;object-position:center}
  /* Centred section heading on mobile — the eyebrow is gone here, so the
     stacked headline reads as the section's own centred title. */
  .split__head{text-align:center}
}
@media (min-width:900px){
  .split{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:clamp(32px,5vw,72px);
    grid-template-rows:auto 1fr;   /* head hugs its content, body takes the slack */
    align-items:start;
  }
  .split__head {grid-column:2;grid-row:1;margin-bottom:var(--sp-5)}
  .split__body {grid-column:2;grid-row:2}
  /* Stretch the photo to the exact height of the text column so the two
     columns share a flush top and bottom edge. */
  /* Absolutely-positioned photo: the text column alone decides the height, so
     both columns share a flush top AND bottom edge. min-height guards the case
     where the copy is unusually short. */
  .split__media{
    grid-column:1;grid-row:1 / span 2;
    align-self:stretch;margin-bottom:0;
    position:relative;min-height:460px;
  }
  .split__media img{
    position:absolute;inset:0;
    width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;
  }
  /* --flip puts the media on the right instead */
  .split--flip .split__head {grid-column:1}
  .split--flip .split__body {grid-column:1}
  .split--flip .split__media{grid-column:2}
  .split--unlock{grid-template-rows:1fr;align-items:stretch}
  .split--unlock .split__body{grid-column:1;grid-row:1;align-self:center}
  .split--unlock .split__media{grid-column:2;grid-row:1;min-height:520px}
}

.pullquote{
  margin:0;padding:var(--sp-5) 0 var(--sp-5) var(--sp-5);
  border-left:3px solid var(--red);
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,1.05rem+.9vw,1.7rem);
  line-height:1.18;text-transform:uppercase;color:var(--ink);
}

/* ---------- 8. Cards ---------- */
.grid{display:grid;gap:var(--sp-5)}
.grid--3{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-7) var(--sp-6);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card:hover{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.card__icon{width:64px;height:64px;object-fit:contain;margin-bottom:var(--sp-5)}
.card h3{font-size:1.25rem;letter-spacing:.05em;margin-bottom:var(--sp-3)}
.card p{color:var(--ink-2);font-size:var(--fs-body);line-height:1.55}

/* ---------- 9. Benefits list (rebuilt from reference image) ---------- */
.benefits{
  border:1px solid var(--red-soft);
  border-radius:var(--r-lg);
  background:var(--red-wash);
  padding:clamp(16px,2.5vw,28px);
  list-style:none;margin:0;
  display:grid;gap:10px;
}
.benefits li{
  display:flex;align-items:center;gap:var(--sp-4);
  background:var(--paper);
  border:1px solid transparent;
  border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.benefits li:hover{border-color:var(--red-soft);transform:translateX(4px)}
.benefits img{width:40px;height:40px;object-fit:contain;flex:none}
.benefits span{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(.95rem,.9rem+.28vw,1.1rem);
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink);line-height:1.25;
}
@media (max-width:520px){
  .benefits li{padding:var(--sp-3) var(--sp-4);gap:var(--sp-3)}
  .benefits img{width:32px;height:32px}
}

/* ---------- 10. Eligibility ---------- */
.elig{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.elig{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.elig{grid-template-columns:repeat(3,minmax(0,1fr))}}
.elig__item{
  display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-5);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.elig__item:hover{border-color:var(--gold);box-shadow:var(--shadow-md)}
.elig__item img{width:52px;height:52px;object-fit:contain;flex:none}
.elig__item--cta{
  background:var(--gold-wash);border-color:var(--gold-soft);
  flex-direction:column;justify-content:center;gap:var(--sp-4);
}
.elig__item--cta:hover{border-color:var(--gold)}
.elig__item--cta h4{margin-bottom:var(--sp-1)}
.elig__item--cta p{color:var(--ink-2)}
.elig__item h4{margin-bottom:4px}
.elig__item p{font-size:var(--fs-sm);color:var(--ink-3)}
@media (max-width:639px){
  .elig__item--cta{align-items:center;text-align:center}
}

/* ---------- 11. Levels ----------
   One card design at every width, matched to the reference's own tier card:
   photo left, accent-coloured badge / title / rule / perks label on the right,
   an inline requirements strip, and (Level 1 only) a full-width CTA beneath
   the text column. Accent hue is the only thing that changes per tier. */

.level{padding-block:0;border-top:0}
.level + .level{margin-top:clamp(24px,3vw,36px)}

/* Per-tier accent, set once and consumed by everything below. */
.level--1{--accent:#D2722E; --accent-soft:#FDF1E7}
.level--2{--accent:var(--red); --accent-soft:#FBE7E7}
.level--3{--accent:#BE9430; --accent-soft:#FAF3E2}

.level__grid{
  display:grid;
  grid-template-columns:minmax(0,45%) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  align-items:start;
  column-gap:clamp(10px,2.6cqw,26px);
  padding:clamp(12px,2.2cqw,22px);
  max-width:820px;margin-inline:auto;
  container-type:inline-size;
  background:var(--paper);
  border-radius:clamp(12px,2.2cqw,22px);
  box-shadow:0 6px 28px -10px rgba(20,17,14,.16);
}

/* Photo fills the full height of the text column, flush top and bottom. */
.level__media{
  grid-column:1;grid-row:1 / span 2;
  align-self:stretch;position:relative;margin:0;
}
.level__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  aspect-ratio:auto;object-fit:cover;object-position:center 22%;
  border:0;border-radius:clamp(8px,1.5cqw,15px);
}

.level__head{grid-column:2;grid-row:1;margin:0}
.level__body{grid-column:2;grid-row:2}

.level__badge{
  display:inline-flex;align-items:center;
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.625rem,2.2cqw,1.2rem);
  letter-spacing:.1em;text-transform:uppercase;
  padding:.45em 1.15em;border-radius:.6em;
  margin:0 0 clamp(6px,1.5cqw,15px);
}
.level h3{
  color:var(--accent);
  font-size:clamp(.95rem,4.9cqw,2.65rem);
  letter-spacing:.01em;
  margin:0 0 clamp(2px,.6cqw,7px);
}
.level__intro{
  color:var(--ink);
  font-size:clamp(.625rem,2.2cqw,1.2rem);
  line-height:1.3;max-width:none;
  margin:0 0 clamp(8px,2.1cqw,21px);
  /* the accent rule that closes the header block */
  padding-bottom:clamp(8px,2.1cqw,21px);
  border-bottom:2px solid var(--accent);
}
.level__intro strong{font-weight:700;color:var(--ink)}

.perks__label{
  color:var(--accent);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.5625rem,2.35cqw,1.3rem);
  letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 clamp(7px,2cqw,20px);
  padding:0;border:0;
}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:clamp(7px,2.2cqw,22px)}
.perks li{display:flex;align-items:center;gap:clamp(7px,1.7cqw,17px)}
.perks img{
  width:clamp(16px,5.1cqw,46px);height:clamp(16px,5.1cqw,46px);
  object-fit:contain;flex:none;
}
.perks span{
  color:var(--ink);
  font-size:clamp(.625rem,2.15cqw,1.18rem);
  line-height:1.3;
}
.perks strong{font-weight:700;color:var(--ink)}
.perks__paren{color:inherit}

/* Requirements strip — items sit inline, separated by hairlines. */
.reqs{
  background:var(--accent-soft);
  border:0;border-radius:clamp(7px,1.4cqw,14px);
  padding:clamp(7px,1.5cqw,15px);
  margin-top:clamp(9px,2.3cqw,23px);
}
.reqs__title{
  color:var(--accent);
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.5rem,1.95cqw,1.05rem);
  letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 clamp(5px,1.1cqw,11px);
}
.reqs__items{
  display:flex;flex-wrap:nowrap;align-items:flex-start;
  list-style:none;margin:0;padding:0;gap:0;
}
.reqs__items li{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(3px,.6cqw,7px);
  padding-inline:clamp(3px,.8cqw,9px);
  text-align:center;
}
.reqs__items li + li{border-left:1px solid rgba(20,17,14,.10)}
.reqs__items img{
  width:clamp(17px,3.4cqw,32px);height:clamp(17px,3.4cqw,32px);
  object-fit:contain;flex:none;
}
.reqs__items span{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.6875rem,1.75cqw,.95rem);
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);line-height:1.15;
}
.reqs__note{
  margin-top:clamp(6px,1.2cqw,12px);
  font-size:clamp(.6875rem,1.5cqw,.875rem);
  color:var(--ink-3);line-height:1.3;text-align:center;
}

/* Level 1 closes with a CTA under the text column, as on the reference. */
.level--1 .level__grid{grid-template-rows:auto 1fr auto}
.level__cta{
  grid-column:2;grid-row:3;
  display:flex;align-items:center;justify-content:center;gap:.4em;
  margin-top:clamp(8px,1.7cqw,18px);
  min-height:clamp(32px,6.4cqw,60px);
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(.75rem,2.9cqw,1.6rem);
  letter-spacing:.04em;text-transform:uppercase;
  border-radius:clamp(7px,1.4cqw,14px);
  text-decoration:none;
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.level__cta:hover{filter:brightness(.92);transform:translateY(-1px)}

/* Level 3 closes with the next-step CTA as part of the tier itself. The short
   gold rule mirrors the mobile reference without turning it into a new page
   section; desktop uses the same content in a compact horizontal handoff. */
.level__closing{
  max-width:820px;
  margin:clamp(24px,3vw,36px) auto 0;
  text-align:center;
}
.level__closing::before{
  content:"";
  display:block;
  width:min(264px,58vw);
  height:1px;
  margin:0 auto clamp(28px,4vw,42px);
  background:var(--accent);
}
.level__closing-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-5);
}
.level__closing h3{
  color:var(--red);
  font-size:clamp(1.45rem,1.1rem + 1.2vw,2.2rem);
  margin:0 0 var(--sp-2);
}
.level__closing-copy p{
  color:var(--ink);
  font-size:var(--fs-lead);
  line-height:1.5;
}
.level__closing .btn{min-width:min(360px,100%)}

@media (min-width:800px){
  .level__closing::before{
    width:100%;
    margin-bottom:var(--sp-6);
    background:var(--line-strong);
  }
  .level__closing-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(32px,5vw,64px);
    text-align:left;
  }
  .level__closing .btn{min-width:260px}
}

/* ---------- 12. FAQ ---------- */
.faq{max-width:1100px;margin-inline:auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__btn{
  width:100%;display:flex;align-items:center;gap:var(--sp-4);
  background:none;border:0;padding:var(--sp-5) 0;text-align:left;
  color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.faq__btn:hover{color:var(--gold-deep)}
.faq__btn img{width:34px;height:34px;object-fit:contain;flex:none}
.faq__q{
  flex:1;min-width:0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1rem,.95rem+.35vw,1.2rem);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.25;
}
.faq__chev{
  flex:none;width:20px;height:20px;color:var(--gold-deep);
  transition:transform 280ms var(--ease);
}
.faq__btn[aria-expanded="true"] .faq__chev{transform:rotate(180deg)}
.faq__panel{
  height:0;overflow:hidden;
  transition:height 300ms var(--ease);
}
.faq__panel[data-open="true"]{height:auto}
.faq__panel p{
  padding:0 0 var(--sp-5) calc(34px + var(--sp-4));
  color:var(--ink-3);font-size:var(--fs-sm);max-width:none;
}
@media (max-width:560px){.faq__panel p{padding-left:0}}

/* ---------- 13. Apply / form ---------- */
.apply{background:var(--ink);color:#CFC8BC;position:relative}
.apply__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.apply__grid{grid-template-columns:minmax(0,1fr) minmax(0,520px)}}
.apply .eyebrow{color:var(--gold)}
.apply .eyebrow::before,.apply .eyebrow::after{background:var(--gold)}
.apply h2{color:#fff}
.apply h2 .accent{color:var(--gold)}
.apply__lead{color:#B7AFA2;font-size:var(--fs-lead);max-width:46ch}
.apply__motto{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.05rem,.98rem+.45vw,1.35rem);
  text-transform:uppercase;letter-spacing:.06em;color:#fff;line-height:1.3;
  padding-left:var(--sp-4);border-left:3px solid var(--gold);
}

/* Trust bar above the form */
.trustbar{
  display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:var(--sp-6);padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.12);
}
@media (min-width:520px){.trustbar{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trustbar__item{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.trustbar__item img{width:32px;height:32px;object-fit:contain;filter:brightness(1.35)}
.trustbar__item span{font-size:var(--fs-xs);line-height:1.4;color:#B7AFA2}

/* Form card */
.formcard{
  background:var(--paper);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,40px);
  box-shadow:var(--shadow-lg);
  color:var(--ink-2);
}
.formcard__head{margin-bottom:var(--sp-6)}
.formcard__head h3{font-size:1.5rem;letter-spacing:.03em;margin-bottom:6px}
.formcard__head p{font-size:var(--fs-sm);color:var(--ink-3)}

.field{display:block;margin-bottom:var(--sp-5)}
.field__label{
  display:block;margin-bottom:8px;
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
}
.field__opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3)}
.field input,.field textarea{
  width:100%;
  font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:14px var(--sp-4);
  min-height:52px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.field textarea{min-height:112px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#7D7365}
.field input:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus{
  outline:none;background:var(--paper);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,155,60,.22);
}
.field__help{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3)}
.field__error{display:none;margin-top:6px;font-size:var(--fs-xs);color:var(--red-deep);font-weight:600}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--red);background:#FFF9F9}
.field.is-invalid .field__error{display:block}

.formcard .btn{margin-top:var(--sp-2)}
.form-note{
  margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-3);
  line-height:1.55;text-align:center;
}
.form-status{
  margin-top:var(--sp-4);padding:var(--sp-4);
  border-radius:var(--r-sm);font-size:var(--fs-sm);
  display:none;
}
.form-status.is-ok{display:block;background:var(--gold-wash);border:1px solid var(--gold-soft);color:var(--ink)}
.form-status.is-err{display:block;background:var(--red-wash);border:1px solid var(--red-soft);color:var(--red-deep)}

/* ---------- 14. Footer ---------- */
.footer{background:#0C0A08;color:#8B8377;padding-block:var(--sp-8)}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center;justify-content:space-between}
.footer img.footer__logo{height:36px;width:auto}
.footer__socials{display:flex;gap:var(--sp-4);align-items:center}
.footer__socials a{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.footer__socials a:hover{border-color:var(--gold);transform:translateY(-2px);background:rgba(255,255,255,.05)}
.footer__socials img{width:22px;height:22px;object-fit:contain}
.footer__meta{font-size:var(--fs-xs);line-height:1.6;width:100%;padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.1)}
.footer__meta a{color:#B7AFA2;text-decoration:none;transition:color var(--dur) var(--ease)}
.footer__meta a:hover{color:var(--gold)}

/* ---------- 15. Thank-you dialog ---------- */
.modal{
  width:min(92vw,460px);
  padding:0;border:0;
  border-radius:var(--r-lg);
  background:var(--paper);
  color:var(--ink-2);
  box-shadow:var(--shadow-lg);
  overflow:visible;
}
.modal::backdrop{background:rgba(20,17,14,.62)}
.modal__inner{padding:clamp(28px,5vw,44px) clamp(22px,4vw,40px);text-align:center}
.modal__mark{width:52px;height:auto;margin:0 auto clamp(14px,2vw,20px)}
.modal__title{
  font-size:clamp(1.35rem,1.1rem+1vw,1.85rem);
  margin-bottom:var(--sp-4);
}
.modal__body{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.modal__body + .modal__body{margin-top:var(--sp-4)}
.modal__ig{
  display:inline-block;margin-top:4px;
  font-weight:600;color:var(--gold-deep);text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.modal__ig:hover{color:var(--ink);border-bottom-color:var(--gold)}
.modal__close{margin-top:clamp(22px,3vw,30px);width:100%}

/* Entry motion, skipped when the user prefers reduced motion */
@media (prefers-reduced-motion: no-preference){
  .modal[open]{animation:modal-in 220ms var(--ease)}
  .modal[open]::backdrop{animation:backdrop-in 220ms var(--ease)}
}
@keyframes modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}

/* ---------- 17. Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .btn:hover{transform:none}
}