/* ==========================================================================
   The Leaders' Lounge - landing page mock v1
   Tokens from The-Leaders-Lounge-logo-guide.pdf v1.0 (Sept 2026).
   Spacing on the Marbl scale. Breakpoints 640 / 768 / 900.
   ========================================================================== */

:root{
  /* Brand - the only three colours in the guide */
  --navy:#041B39;
  --green:#B7D334;
  --oat:#F1EBDD;
  --white:#FFFFFF;

  /* Derived tints. Lime is NEVER used for text on oat or white (fails contrast). */
  --green-hover:#C6E04A;
  --green-wash:rgba(183,211,52,.12);
  --ink-80:rgba(4,27,57,.80);
  --ink-60:rgba(4,27,57,.60);
  --ink-35:rgba(4,27,57,.35);
  --oat-80:rgba(241,235,221,.80);
  --oat-55:rgba(241,235,221,.55);
  --rule-dark:rgba(241,235,221,.18);
  --rule-light:rgba(4,27,57,.14);

  --font:"Roboto Serif",Georgia,"Times New Roman",serif;

  /* Type scale */
  --step--1:clamp(14px,13px + .18vw,16px);
  --step-0:clamp(16px,15px + .25vw,18px);
  --step-1:clamp(18px,17px + .55vw,22px);
  --step-2:clamp(22px,19px + 1.1vw,32px);
  --step-3:clamp(30px,25px + 2.3vw,48px);
  --step-4:clamp(38px,28px + 4.6vw,76px);

  /* Spacing - Marbl scale (4/6/8/10/20/30/40/60/120) */
  --gap-4:4px;
  --gap-6:6px;
  --gap-8:8px;
  --gap-xs:10px;
  --gap-s:20px;
  --gap-m:30px;
  --gap-40:40px;
  --gap-80:80px;
  --gap-l:60px;
  --gap-xl:120px;

  --section-y:clamp(60px,40px + 7vw,140px);
  --hero-top:clamp(40px,24px + 5vw,80px);
  --gutter:clamp(20px,8px + 2.8vw,40px);

  --shell-max:1180px;

  --control-h:56px;
  --field-h:52px;
  --tap:48px;                 /* minimum touch target */
  --check:24px;               /* checkbox box */
  --hero-logo-gap:clamp(40px,24px + 5vw,80px);
  --form-card:720px;

  /* Mock scaffolding only - never ships */
  --mock-bg:#111111;
  --mock-fg:#EEEEEE;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font);
  font-weight:300;
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--navy);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block;max-width:100%}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:300;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
a{color:inherit}

/* ---------- Shell. Header, every section and the footer share this. ---------- */
.wrap{width:100%;max-width:var(--shell-max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--navy{background:var(--navy);color:var(--oat)}
.section--oat{background:var(--oat)}
.section--white{background:var(--white)}

.flow>*+*{margin-top:var(--gap-m)}
.centred{text-align:center}
.stack-top{margin-top:var(--gap-l)}

/* ---------- Type roles ---------- */
.h-display{font-size:var(--step-4)}
.h-section{font-size:var(--step-3)}
.h-sub{font-size:var(--step-2)}
.em{font-weight:600}

.lead{font-size:var(--step-1);line-height:1.5;font-weight:300}
.muted{color:var(--ink-80)}
.section--navy .lead,.section--navy .muted,.hero .lead{color:var(--oat-80)}

.rule{border:0;border-top:1px solid var(--rule-light);margin-block:var(--gap-l)}
.section--navy .rule{border-color:var(--rule-dark)}

/* Stepped motif, taken from the monogram's own geometry. Decorative. */
.steps{display:flex;gap:4px;align-items:flex-end;height:30px;margin-bottom:var(--gap-m)}
.steps i{display:block;width:10px;background:var(--green)}
.steps i:nth-child(1){height:10px}
.steps i:nth-child(2){height:20px}
.steps i:nth-child(3){height:30px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--control-h);padding:var(--gap-xs) var(--gap-40);
  font-family:var(--font);font-size:var(--step-0);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center;
  background:var(--green);color:var(--navy);
  border:2px solid var(--green);border-radius:0;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:var(--green-hover);border-color:var(--green-hover)}
.btn--ghost{background:transparent;color:var(--oat);border-color:var(--oat-55)}
.btn--ghost:hover{background:transparent;border-color:var(--oat);color:var(--oat)}
.btn--full{width:100%}

.btn-row{display:flex;flex-direction:column;align-items:stretch;gap:var(--gap-xs)}
.btn-row .btn{width:100%}
@media (min-width:640px){
  .btn-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--gap-s)}
  .btn-row .btn{width:auto}
}

:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.section--navy :where(a,button,input):focus-visible,.hero :where(a,button):focus-visible{outline-color:var(--green)}

/* ---------- Hero ---------- */
.hero{background:var(--navy);color:var(--oat);padding-block:var(--hero-top) var(--section-y)}
@media (min-width:900px){
  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gap-l);align-items:end}
}
.hero__logo{width:min(420px,78vw);height:auto;margin-bottom:var(--hero-logo-gap)}
.hero__title{font-size:var(--step-4)}
.hero__body{margin-top:var(--gap-m)}
.hero__cta{margin-top:var(--gap-l)}

/* ---------- Editorial two-column ---------- */
.cols{display:grid;gap:var(--gap-l)}
@media (min-width:900px){
  .cols{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:var(--gap-80)}
  .cols__aside{position:sticky;top:var(--gap-l);align-self:start}
}

/* ---------- Form ---------- */
.form-card{background:var(--white);padding:clamp(20px,10px + 3vw,60px);max-width:var(--form-card);margin-inline:auto}
.form-grid{display:grid;gap:var(--gap-m)}
@media (min-width:640px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-2{grid-column:1 / -1}
}

.field{display:flex;flex-direction:column;gap:var(--gap-8)}
.field label,legend{
  font-size:var(--step--1);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-80);
}
.field input{
  font-family:var(--font);font-size:var(--step-0);font-weight:300;color:var(--navy);
  min-height:var(--field-h);padding:var(--gap-xs) var(--gap-s);background:var(--white);
  border:1px solid var(--rule-light);border-bottom:2px solid var(--navy);border-radius:0;
}
.field input::placeholder{color:var(--ink-35)}
.field input:hover{border-bottom-color:var(--green)}

fieldset{border:0;margin:0;padding:0}
legend{padding:0;margin-bottom:var(--gap-xs)}
.legend-note{
  display:block;text-transform:none;letter-spacing:0;font-weight:300;
  font-size:var(--step-0);color:var(--ink-60);margin-top:var(--gap-6);line-height:1.5;
}
/* When the note IS the legend - no uppercase label above it. */
.legend-note--lead{margin-top:0;color:var(--ink-80)}

/* Honeypot. Off-screen rather than display:none so bots still fill it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.checks{display:grid;gap:var(--gap-xs)}
@media (min-width:640px){.checks--cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

.check{
  display:flex;align-items:flex-start;gap:var(--gap-xs);cursor:pointer;
  min-height:var(--tap);padding:var(--gap-xs) var(--gap-s);
  border:1px solid var(--rule-light);
  transition:border-color .15s ease,background .15s ease;
}
.check:hover{border-color:var(--navy);background:var(--green-wash)}
.check input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:var(--check);height:var(--check);margin:var(--gap-4) 0 0;
  border:2px solid var(--navy);background:var(--white);border-radius:0;cursor:pointer;
}
.check input:checked{background:var(--green)}
.check input:checked::after{
  content:"";display:block;width:var(--gap-6);height:12px;margin:var(--gap-4) auto 0;
  border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check span{font-size:var(--step-0);line-height:1.45}

.consent{margin-top:var(--gap-s);font-size:var(--step--1);line-height:1.6;color:var(--ink-60);max-width:52ch}
.consent a{color:var(--navy);text-underline-offset:3px}

/* ---------- Footer. Same shell width as the header. ---------- */
.footer{background:var(--navy);color:var(--oat-55);padding-block:var(--gap-l);font-size:var(--step--1)}
.footer__inner{display:flex;flex-direction:column;gap:var(--gap-m);align-items:flex-start}
@media (min-width:768px){.footer__inner{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.footer__logo{width:240px;height:auto}
.footer p{margin:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* Mock scaffolding only - not part of the page. */
.mockbar{
  background:var(--mock-bg);color:var(--mock-fg);padding:var(--gap-xs) var(--gutter);
  font:400 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;
}
.mockbar b{color:var(--green);font-weight:600}

/* ---------- Hero block graphic ----------
   Built on the monogram's own 40-unit module. Rises out of the section below
   and crosses the boundary; the green block is the one that straddles it,
   because green is the only palette colour legible on navy AND on oat. */
.hero{position:relative;z-index:2}
.hero .wrap{position:relative}
.hero__blocks{
  --blocks-h:400px;
  /* The SVG's colour change sits at y=320 of 400, so 20% of its height is
     below the fold. `bottom` resolves against .wrap, whose edge sits one
     --section-y above the hero's, so that padding is added back here. */
  display:none;
  width:auto;height:var(--blocks-h);pointer-events:none;
  margin-bottom:calc((var(--blocks-h) * .2 + var(--section-y)) * -1);
}
@media (min-width:900px){.hero__blocks{display:block}}
@media (min-width:1100px){.hero__blocks{--blocks-h:480px}}

/* Sidebar headings sit in a 420px column, so they run a step quieter than a
   full-width one. Anything larger forces three-line breaks with a stub line. */
@media (min-width:900px){
  .cols__aside .h-section{font-size:clamp(30px,22px + 1.4vw,40px)}
}

.consent--preview{font-weight:600;color:var(--navy)}