/* ===========================================================================
   LET'S APPEAL BRAND SYSTEM  v2
   One definition. Every page, the decoder, the Letter Builder and the course
   link this file. Do not redeclare these tokens anywhere else, or they drift.

   Served at /assets/brand.css by build/assemble-deploy.py.

   ---------------------------------------------------------------------------
   v2, 2026-08-12. Recolour and layout system.

   v1 was warm paper, near-black ink and gold: a single 730px column of prose
   with no navigation and no structure. The writing was good and the site did
   not look like it. This version keeps every token NAME so the pages that were
   not rebuilt (privacy, terms, hardship, the decoder, the Letter Builder, the
   course shell) pick up the new palette for free, and adds the layout,
   diagram and data components the three main pages needed.

   The palette moves from warm-neutral to navy, teal and sand. --gold is kept
   close to its old value on purpose: the crest art, the Whop store banner and
   anything already printed still use it, and a hard swap there would clash.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TYPE

   Fraunces for display, Source Serif 4 for body, IBM Plex Mono for values
   transcribed off a document: claim numbers, dates, criteria references.

   v2 adds IBM Plex Sans. Serif is right for reading and wrong for interface:
   navigation, buttons, table headers, statistic labels and diagram captions
   all need a voice that recedes. Running those in the body serif is a large
   part of why v1 read as a document rather than a site.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- palette ---------------------------------------------------------- */
  --ink:      #12263A;   /* body text, headings. deep navy */
  --deep:     #0B1B2B;   /* hero and footer ground. near-black navy */
  --deep-2:   #16324B;   /* raised panels on --deep */
  --paper:    #FBF9F5;   /* page background. never pure white */
  --surface:  #FFFFFF;   /* cards sitting on --paper */
  --sand:     #F2ECE1;   /* warm section tint */
  --mist:     #EAF0F2;   /* cool section tint */

  --teal:     #0E6F68;   /* PRIMARY action. buttons, active nav, links */
  --teal-dk:  #0A544F;   /* teal hover, and teal text on white */
  --teal-lt:  #7FC5BE;   /* teal on --deep, where the dark one dies */

  --gold:     #C08A3E;   /* the warm accent. kept near its v1 value */
  --gold-ink: #8B6228;   /* gold darkened to pass contrast on white */
  --wash:     #FBF3E4;   /* faint gold wash, bracketed placeholders only */

  --signal:   #9C2B2B;   /* deadlines and dates ONLY. deep oxblood, deliberately
                            not emergency red, which panics an already anxious
                            reader */

  --rule:     #DCD8D0;   /* hairlines, table borders, dividers */
  --rule-dk:  rgba(255,255,255,.16);  /* the same, on --deep */
  --muted:    #5A6672;   /* secondary text, captions, sources */
  --muted-lt: #9FB0BD;   /* secondary text on --deep */

  /* --- type ------------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:      'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* --- rhythm ----------------------------------------------------------- */
  --measure: 68ch;       /* max line length for reading */
  --page:    1140px;     /* max width of a full-bleed section's contents */
  --prose:   720px;      /* max width of a column of body copy */
  --gap:     22px;
  --shadow:  0 1px 2px rgba(18,38,58,.05), 0 8px 24px rgba(18,38,58,.06);
}

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */

*{ box-sizing: border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior: smooth; scroll-padding-top: 84px }  /* clears the sticky nav */

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;  /* keep it composed, not quirky */
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  text-wrap: balance;
}
h1{ font-size: clamp(36px, 5.6vw, 60px); line-height: 1.06 }
h2{ font-size: clamp(27px, 3.6vw, 38px); margin-top: 0 }
h3{ font-size: 22px }
h4{ font-size: 19px }

p{ margin: 0 0 16px; text-wrap: pretty }
ul,ol{ padding-left: 22px }
li{ margin-bottom: 8px }

a{
  color: var(--teal-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(14,111,104,.4);
}
a:hover{ text-decoration-thickness: 2px; text-decoration-color: var(--teal) }

small,.small{ font-size: 14.5px; color: var(--muted); line-height: 1.55 }
hr{ border:0; border-top:1px solid var(--rule); margin: 40px 0 }

strong{ font-weight: 600 }

/* ---------------------------------------------------------------------------
   LAYOUT

   Two containers. .container is the full width a section may use; .prose is a
   readable column inside it. Sections own their vertical rhythm so pages do
   not accumulate ad-hoc margins.
   --------------------------------------------------------------------------- */

.container{ width:100%; max-width: var(--page); margin:0 auto; padding: 0 24px }
.prose{ max-width: var(--prose) }
.prose.wide{ max-width: 860px }

.section{ padding: 84px 0 }
.section.tight{ padding: 52px 0 }
.section.tint{ background: var(--sand) }
.section.cool{ background: var(--mist) }
.section.deep{ background: var(--deep); color: #EAF1F5 }

.section.deep h1,.section.deep h2,.section.deep h3{ color: #fff }
.section.deep .small,.section.deep .muted{ color: var(--muted-lt) }
.section.deep a{ color: var(--teal-lt); text-decoration-color: rgba(127,197,190,.45) }
.section.deep hr{ border-top-color: var(--rule-dk) }

/* A hairline between two sections that share a background. */
.section + .section:not(.tint):not(.cool):not(.deep){ padding-top: 0 }

.eyebrow{
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 16px;
}
.section.deep .eyebrow{ color: var(--teal-lt) }
.eyebrow.gold{ color: var(--gold-ink) }

.lede{ font-size: 21px; line-height: 1.52; color: var(--ink) }
.section.deep .lede{ color: #D6E3EA }

/* ---------------------------------------------------------------------------
   NAVIGATION

   Sticky, because these pages are long and the whole complaint about v1 was
   that a reader could not tell where they were or get anywhere else.
   --------------------------------------------------------------------------- */

.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,245,.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-in{
  max-width: var(--page); margin:0 auto; padding: 0 24px;
  height: 66px; display:flex; align-items:center; gap: 30px;
}
.nav-mark{
  font-family: var(--font-display);
  font-weight: 600; font-size: 21px; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; margin-right: 4px;
}
.nav-mark:hover{ text-decoration: none }
.nav-links{ display:flex; gap: 26px; align-items:center; margin-left:auto }
/* The CTA is a SIBLING of .nav-links, not a child. On a phone the links move to
   their own scrollable row and the CTA has to stay up top with the wordmark. */
.nav-links a{
  font-family: var(--font-ui); font-size: 15px; font-weight: 500;
  color: var(--ink); text-decoration: none;
}
.nav-links a:hover{ color: var(--teal); text-decoration: none }
.nav-links a[aria-current="page"]{
  color: var(--teal); box-shadow: inset 0 -2px 0 var(--teal); padding-bottom: 2px;
}
.nav-cta{
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 600;
  background: var(--teal); color: #fff !important;
  padding: 9px 16px; border-radius: 3px; text-decoration: none !important;
  margin-left: 24px; white-space: nowrap;
}
.nav-cta:hover{ background: var(--teal-dk) }

@media (max-width: 900px){
  .nav-links{ gap: 18px }
  .nav-links a{ font-size: 14px }
  .nav-cta{ margin-left: 16px }
}

/* Phone: two rows. Wordmark and the one action on top, the section links below
   in a row that scrolls sideways rather than wrapping. Wrapping is what broke
   the single-row version: the button folded onto three lines and overflowed. */
@media (max-width: 680px){
  .nav-in{
    height: auto; min-height: 56px; flex-wrap: wrap;
    padding: 9px 16px 0; gap: 10px;
  }
  .nav-mark{ font-size: 19px; white-space: nowrap; margin-right: auto }
  .nav-cta{ margin-left: 0; padding: 8px 14px; font-size: 13.5px }
  .nav-links{
    order: 3; width: 100%; margin: 0 -16px; padding: 8px 16px 9px;
    gap: 20px; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--rule);
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar{ display: none }
  .nav-links a{ white-space: nowrap; font-size: 14.5px }
}

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */

.cta{
  display: inline-block;
  background: var(--teal);
  color: #fff;
  padding: 15px 28px;
  font-family: var(--font-ui);
  font-size: 16.5px;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.cta:hover{ background: var(--teal-dk); text-decoration: none; transform: translateY(-1px) }
.cta:disabled{ opacity:.45; cursor: not-allowed; transform:none }
.cta.gold{ background: var(--gold); color: var(--deep) }
.cta.gold:hover{ background: var(--gold-ink); color: #fff }
.cta.ghost{
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); padding: 13px 22px;
}
.cta.ghost:hover{ background: var(--surface); border-color: var(--teal); color: var(--teal-dk) }
/* The hero shares --deep's ground, so it needs the dark-surface treatment too.
   Without .hero here the ghost button renders navy text on navy. */
.section.deep .cta.ghost,.hero .cta.ghost{ color:#fff; border-color: var(--rule-dk) }
.section.deep .cta.ghost:hover,.hero .cta.ghost:hover{
  background: var(--deep-2); border-color: var(--teal-lt); color:#fff;
}

.ctarow{ margin: 30px 0 }
.ctarow .small{ margin-top: 12px }
.cta-pair{ display:flex; gap: 14px; flex-wrap:wrap; align-items:center }

/* ---------------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------------- */

.hero{
  background: var(--deep);
  color: #EAF1F5;
  padding: 92px 0 84px;
  position: relative;
  overflow: hidden;
}
.hero::before{
  /* Depth, so the dark band is not a flat rectangle. */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 70% at 8% 0%,   rgba(14,111,104,.30), transparent 60%),
    radial-gradient(70% 80% at 100% 100%, rgba(192,138,62,.16), transparent 62%);
}
.hero .container{ position:relative }
.hero h1{ color:#fff; max-width: 15ch }
.hero .lede{ max-width: 54ch; color:#CFDDE6; margin-top: 20px }
.hero .eyebrow{ color: var(--teal-lt) }

.hero-split{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center }
@media (max-width: 900px){ .hero-split{ grid-template-columns: 1fr; gap: 40px } }

.trustbar{
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted-lt);
  border-top: 1px solid var(--rule-dk);
  padding: 16px 0 0;
  margin: 34px 0 0;
  display:flex; gap: 26px; flex-wrap:wrap;
}
.trustbar span{ display:flex; align-items:center; gap:8px }
.trustbar svg{ flex:0 0 auto }

/* ---------------------------------------------------------------------------
   STATISTICS
   --------------------------------------------------------------------------- */

.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 0 }
.stats > div{ padding: 30px 28px; border-left: 1px solid var(--rule) }
.stats > div:first-child{ border-left: 0; padding-left: 0 }
.stats .n{
  font-family: var(--font-display); font-weight: 600;
  font-size: 52px; line-height: 1; letter-spacing: -0.02em;
  color: var(--signal); display:block; margin-bottom: 10px;
}
.stats .l{ font-family: var(--font-ui); font-size: 15px; color: var(--muted); line-height: 1.45 }
.section.deep .stats > div{ border-left-color: var(--rule-dk) }
.section.deep .stats .n{ color: var(--gold) }
.section.deep .stats .l{ color: var(--muted-lt) }
@media (max-width: 760px){
  .stats{ grid-template-columns: 1fr; }
  .stats > div{ border-left:0; border-top:1px solid var(--rule); padding: 22px 0 }
  .stats > div:first-child{ border-top:0; padding-top:0 }
  .stats .n{ font-size: 42px }
}

/* The 1-in-100 dot grid and the other inline data figures. */
.figure{ margin: 34px 0 }
.figure svg{ display:block; width:100%; height:auto; max-width: 100% }

/* A wide diagram scaled down to a phone screen puts its labels at four pixels,
   which is the same as not shipping the diagram. .scrollable holds a legible
   minimum width and lets the figure scroll sideways inside itself instead.
   The page body must never scroll horizontally, so the overflow lives here. */
@media (max-width: 820px){
  .figure.scrollable{ overflow-x: auto; -webkit-overflow-scrolling: touch }
  .figure.scrollable svg{ min-width: 720px }
  .figure.scrollable figcaption{ position: sticky; left: 0 }
}
.figure figcaption,.caption{
  font-family: var(--font-ui); font-size: 13.5px; color: var(--muted);
  line-height: 1.5; margin-top: 12px;
}
.section.deep .caption,.section.deep .figure figcaption{ color: var(--muted-lt) }

/* ---------------------------------------------------------------------------
   GRIDS AND CARDS
   --------------------------------------------------------------------------- */

.grid{ display:grid; gap: 22px }
.grid.two{ grid-template-columns: repeat(2,1fr) }
.grid.three{ grid-template-columns: repeat(3,1fr) }
.grid.four{ grid-template-columns: repeat(4,1fr) }
@media (max-width: 940px){ .grid.three,.grid.four{ grid-template-columns: repeat(2,1fr) } }
@media (max-width: 680px){ .grid.two,.grid.three,.grid.four{ grid-template-columns: 1fr } }

.card{
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 26px;
  margin: 26px 0;
}
.card.gold{ border-top: 3px solid var(--gold) }
.card.signal{ border-left: 3px solid var(--signal) }
.card.teal{ border-top: 3px solid var(--teal) }
.card.flush{ margin: 0 }
.section.deep .card{ background: var(--deep-2); border-color: var(--rule-dk); color:#DCE7EE }

/* A door: the two-product choice on the home page. */
.door{
  background: var(--surface); border:1px solid var(--rule); border-radius:4px;
  padding: 30px 28px; display:flex; flex-direction:column; box-shadow: var(--shadow);
}
.door.glp{ border-top: 3px solid var(--gold) }
.door.health{ border-top: 3px solid var(--teal) }
.door h3{ font-size: 26px; margin-bottom: 8px }
.door .who{
  font-family: var(--font-ui); font-size: 12px; font-weight:600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
.door ul{ padding-left: 20px; margin: 0 0 22px; font-size: 16px }
.door li{ margin-bottom: 7px }
.door .spacer{ flex:1 }
.door .price{ font-family: var(--font-mono); font-size: 14px; color: var(--muted); margin-bottom: 14px }
.door .cta{ text-align:center }
.door .second{ display:block; margin-top: 12px; font-size: 15px; text-align:center }

/* A module in the curriculum list. */
.module{
  background: var(--surface); border:1px solid var(--rule); border-radius:4px;
  padding: 22px 24px; display:flex; gap: 18px; align-items:flex-start;
}
.module .num{
  font-family: var(--font-mono); font-size: 12.5px; font-weight:500;
  color: var(--teal); border:1px solid var(--rule); border-radius: 3px;
  padding: 5px 8px; flex:0 0 auto; margin-top: 3px; white-space:nowrap;
}
.module.bonus .num{ color: var(--gold-ink) }
.module strong{
  font-family: var(--font-display); font-size: 20px; font-weight:600;
  display:block; margin-bottom: 6px; letter-spacing:-0.01em;
}
.module p{ margin:0; font-size: 16.5px }

/* A numbered step in a process. */
.step{ display:flex; gap: 18px; align-items:flex-start; margin-bottom: 26px }
.step .n{
  font-family: var(--font-display); font-size: 26px; font-weight:600;
  color: var(--teal); flex:0 0 auto; line-height:1.1; width: 42px;
}
.step h3{ margin-bottom: 6px }
.step p{ margin:0 }

.crossref{
  background: var(--wash); border:1px solid var(--rule);
  border-left: 3px solid var(--gold); border-radius: 3px;
  padding: 20px 22px; margin: 32px 0;
}
.crossref p{ margin:0 }

/* ---------------------------------------------------------------------------
   TABLES
   --------------------------------------------------------------------------- */

table{
  width:100%; border-collapse: collapse; margin: 0 0 20px;
  font-size: 16.5px; background: var(--surface);
  border:1px solid var(--rule); border-radius: 4px;
}
th,td{ text-align:left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top }
th{
  font-family: var(--font-ui); font-size: 13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color: var(--muted);
  background: var(--paper);
}
tr:last-child td{ border-bottom: 0 }
td.num,td.d{ font-family: var(--font-mono); white-space: nowrap; text-align:right }
td.d{ color: var(--signal); text-align:left }
tr.total td{ font-weight:600; background: var(--mist) }
tr.total td.num{ color: var(--teal-dk); font-size: 18px }

/* Wide tables must scroll themselves rather than the page. */
.scroll-x{ overflow-x: auto; -webkit-overflow-scrolling: touch }

/* A date is the most important thing on any page it appears on. */
.deadline{ font-family: var(--font-mono); color: var(--signal); font-weight: 500 }

/* Bracketed placeholders in generated letters. The whole safety story, visible. */
.bracket{
  background: var(--wash);
  border-bottom: 2px solid var(--gold);
  font-family: var(--font-mono);
  font-size: .85em;
  padding: 1px 4px;
}

.verified{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  margin: 0 0 32px;
}

.letter{
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 26px 28px;
  margin: 22px 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.faq details{
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
}
.faq details:first-of-type{ border-top: 1px solid var(--rule) }
.faq summary{
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 20px; font-weight:600;
  display:flex; gap: 14px; align-items:flex-start;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{
  content:'+'; color: var(--teal); font-family: var(--font-ui);
  font-weight: 500; flex:0 0 auto; width: 16px;
}
.faq details[open] summary::before{ content:'\2212' }
.faq details p{ margin: 12px 0 0 30px }
.faq details p:last-child{ margin-bottom: 0 }

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */

footer.site{
  background: var(--deep); color: var(--muted-lt);
  padding: 62px 0 46px; font-size: 14.5px; line-height: 1.6;
}
footer.site .container{ max-width: var(--page) }
footer.site a{ color:#C9DAE3; text-decoration-color: rgba(201,218,227,.35) }
footer.site a:hover{ color:#fff }
footer.site strong{ color: #DCE7EE }
footer.site .mark{
  font-family: var(--font-display); font-size: 22px; font-weight:600;
  color:#fff; display:block; margin-bottom: 14px; letter-spacing:-0.02em;
}
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px }
@media (max-width: 760px){ .foot-grid{ grid-template-columns: 1fr; gap: 28px } }
.foot-grid h4{
  font-family: var(--font-ui); font-size: 12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--muted-lt);
  margin: 0 0 12px;
}
.foot-grid ul{ list-style:none; padding:0; margin:0 }
.foot-grid li{ margin-bottom: 8px }
.legal{ border-top: 1px solid var(--rule-dk); padding-top: 26px; font-size: 13.5px }
.legal p{ margin-bottom: 12px }

/* Kept so pages that still use the v1 plain footer do not lose their rule. */
footer:not(.site){
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   MISC
   --------------------------------------------------------------------------- */

.brand{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.brand a{ color: var(--muted); text-decoration: none }
.brand a:hover{ text-decoration: underline }

.pill{
  display:inline-block; font-family: var(--font-ui); font-size: 12.5px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background: var(--mist); color: var(--teal-dk);
  padding: 5px 11px; border-radius: 100px;
}
.pill.gold{ background: var(--wash); color: var(--gold-ink) }
.pill.signal{ background:#F6E9E9; color: var(--signal) }

/* Where a photograph belongs. Renders as a labelled placeholder so a missing
   asset is obvious in review rather than silently absent. */
.photo-slot{
  background: var(--mist);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  min-height: 220px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--font-ui); font-size: 13px; color: var(--muted);
  padding: 20px;
}

@media print{
  body{ background:#fff }
  .nav,.noprint,.cta{ display:none !important }
  .section.deep,.hero,footer.site{ background:#fff !important; color:#000 !important }
}