/* launchministry.org — shared stylesheet. Linked by EVERY page (money, mirror, EEAT, 404)
   so the look cannot drift. Design system + provenance: _build/DESIGN.md */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --ink:#0B1E2D;          /* night navy, the logo wordmark fill */
  --ink-2:#14304A;
  --teal:#0096A9;         /* AUTHENTIC legacy token, from the original site's Divi CSS */
  --teal-deep:#00707E;
  --teal-lift:#40D0E0;    /* accent on dark surfaces only */
  --teal-pale:#E4F3F5;
  --paper:#FBFBF9;
  --cream:#F4F9FA;
  --line:#D9E4E7;
  --muted:#5A6B75;

  /* ⛔ RESERVED — complement of --teal. Buttons and NOTHING else (hard rule 19). */
  --cta:#FF6A2B;
  --cta-dark:#E4551A;

  --disp:"Barlow Condensed",Impact,"Haettenschweiler",sans-serif;
  --body:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.72 var(--body);
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:var(--teal-deep)}
a:hover{color:var(--teal)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}
/* ⛔ never combine a `padding` SHORTHAND on a class that also carries .wrap —
   it clobbers the gutters and produces the "squashed left" mobile bug. */

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;color:var(--ink);line-height:1.12;
  letter-spacing:.01em;margin:0 0 14px}
h1{font-size:40px}
h2{font-size:31px;margin-top:52px}
h3{font-size:23px;margin-top:32px}
h4{font-size:19px;margin-top:24px}
p{margin:0 0 18px}
section > h2:first-child, section > h3:first-child{margin-top:0}

/* ── motif 5: altitude rule — a climb ramp seated on a fading hairline ──────
   Ticks ASCEND left to right and brighten as they rise, so the mark reads as the
   climb the logo's plane is making, then releases into the trail. The hairline is
   a baseline the ticks stand ON (not a line drawn through them) and fades out
   rather than stopping dead. */
.alt-rule{position:relative;height:15px;margin:-2px 0 28px}
.alt-rule::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,#C6D6DA 0,var(--line) 42%,rgba(217,228,231,0) 100%)}
.alt-rule::after{content:"";position:absolute;left:0;bottom:0;width:66px;height:15px;
  background:
    linear-gradient(rgba(0,150,169,.32),rgba(0,150,169,.32)) 0    100%/3px 4.5px no-repeat,
    linear-gradient(rgba(0,150,169,.50),rgba(0,150,169,.50)) 12px 100%/3px 7px   no-repeat,
    linear-gradient(rgba(0,150,169,.68),rgba(0,150,169,.68)) 24px 100%/3px 9.5px no-repeat,
    linear-gradient(rgba(0,150,169,.85),rgba(0,150,169,.85)) 36px 100%/3px 12px  no-repeat,
    linear-gradient(var(--teal),var(--teal))                 48px 100%/3px 15px  no-repeat}
@media (max-width:900px){
  .alt-rule{height:12px;margin:-2px 0 22px}
  .alt-rule::after{width:53px;height:12px;
    background:
      linear-gradient(rgba(0,150,169,.32),rgba(0,150,169,.32)) 0    100%/2.5px 3.5px no-repeat,
      linear-gradient(rgba(0,150,169,.50),rgba(0,150,169,.50)) 10px 100%/2.5px 5.5px no-repeat,
      linear-gradient(rgba(0,150,169,.68),rgba(0,150,169,.68)) 20px 100%/2.5px 7.5px no-repeat,
      linear-gradient(rgba(0,150,169,.85),rgba(0,150,169,.85)) 30px 100%/2.5px 9.5px no-repeat,
      linear-gradient(var(--teal),var(--teal))                 40px 100%/2.5px 12px  no-repeat}
}

/* ── motif 1: the vapour-trail arc ──────────────────────────────────────── */
.trail{display:block;width:100%;height:26px;color:var(--teal);opacity:.5;margin:38px 0}
.trail svg{width:100%;height:100%;display:block}

/* ── motif 4: climb ticks, used as list markers (replaces ✓/emoji) ──────── */
ul.ticks{list-style:none;padding:0;margin:0 0 18px}
ul.ticks li{position:relative;padding-left:26px;margin-bottom:9px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:7px;
  background:linear-gradient(45deg,transparent 0 45%,currentColor 45% 55%,transparent 55%),
             linear-gradient(45deg,transparent 0 45%,currentColor 45% 55%,transparent 55%);
  background-size:5px 7px;background-repeat:no-repeat;
  background-position:0 3px,6px 0;color:var(--teal)}
ul.ticks.con li::before{color:#B4404B;transform:scaleY(-1)}

/* ── masthead (non-sticky) ──────────────────────────────────────────────── */
.mast{background:var(--paper);border-bottom:1px solid var(--line);position:static}
.mast .wrap{display:flex;align-items:center;gap:18px;min-height:112px}
.mast .brand{display:flex;align-items:center;flex:0 0 auto}
/* site logo at 1.5x (52px -> 78px). logo.png is 460x167, so nothing upscales. */
.mast .brand img{height:78px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{font:600 14.5px/1 var(--body);color:var(--ink);text-decoration:none;letter-spacing:.02em}
.nav a:hover{color:var(--teal-deep)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:8px;width:46px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(120deg,var(--ink) 0%,var(--ink-2) 100%);color:#EAF4F6;
  position:relative;overflow:hidden;padding:34px 0 30px}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'><path d='M-40 268 C 300 258, 620 196, 1240 24' stroke='%2340D0E0' stroke-width='26' fill='none' stroke-linecap='round' opacity='.5'/><path d='M-40 292 C 340 286, 700 226, 1240 66' stroke='%2340D0E0' stroke-width='11' fill='none' stroke-linecap='round' opacity='.3'/></svg>") right center/cover no-repeat;
  opacity:.10}
.hero > .wrap{position:relative;z-index:1}
/* The H1 is display type and is meant to SPAN the measure, not sit in a 19ch column
   with the right half of the hero empty. Fluid size so it fills the wrap in two
   balanced lines from 901px up; text-wrap:balance keeps the break even rather than
   leaving a three-word orphan on the last line. */
.hero h1{color:#fff;font-size:clamp(40px,5.3vw,74px);line-height:1.06;
  margin-bottom:16px;max-width:none;text-wrap:balance}
.hero .lede{font-size:17.5px;line-height:1.6;color:#C9DDE3;max-width:70ch;margin:0 0 18px}

/* byline — structured, never a compressed dot-run */
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.byline img{width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid var(--teal-lift);flex:0 0 auto}
.byline .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.byline .who .nm{font:700 15.5px/1.2 var(--body);color:#fff}
.byline .who .nm a{color:#fff;text-decoration:none;border-bottom:1px solid var(--teal-lift)}
.byline .who .rl{font:400 13px/1.3 var(--body);color:#A9C6CF}
.byline .meta{display:flex;gap:8px 16px;flex-wrap:wrap;font:400 12.5px/1.3 var(--body);color:#A9C6CF}
.byline .meta span{white-space:nowrap}

/* ── THE FUSELAGE PILL (toplist card) ───────────────────────────────────── */
.toplist{margin:30px 0 0;display:flex;flex-direction:column;gap:15px}

.pill{position:relative;background:var(--cream);border:1px solid var(--line);
  border-radius:999px;display:grid;align-items:center;
  grid-template-columns:96px 186px minmax(150px,1fr) minmax(210px,auto) 214px;
  gap:16px;padding:15px 20px 15px 15px;overflow:hidden}
.pill:hover{border-color:var(--teal);box-shadow:0 3px 16px rgba(0,150,169,.13)}
/* motif 3 (cabin windows) is deliberately NOT used on .pill. Five dense columns leave
   no empty band for it, so it crossed the rating row and the bonus box and read as
   grey rendering artefacts rather than as a motif. The capsule silhouette plus the
   rank roundel carry the fuselage read on their own; the window band lives in .foot. */
.pill.top1{border-color:var(--teal);border-width:2px;background:#fff}

/* rank roundel seated in the left cap (motif 2) */
.rank{width:66px;height:66px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--disp);line-height:1;margin:0 auto;flex:0 0 auto}
.rank b{font-size:29px;font-weight:700}
.rank i{font-style:normal;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.82;margin-top:1px}
.pill.top1 .rank{background:var(--ink)}

/* logo at 1.5x (48px -> 72px). Source PNGs are 80-512px tall, so nothing upscales. */
.chip{background:#fff;border:1px solid var(--line);border-radius:14px;height:88px;
  display:flex;align-items:center;justify-content:center;padding:8px 14px}
.chip img{max-height:72px;max-width:100%;width:auto;object-fit:contain}

.who2{min-width:0}
.who2 .nm{font-family:var(--disp);font-size:24px;font-weight:700;line-height:1.1;margin:0 0 3px}
.who2 .nm a{color:var(--ink);text-decoration:none}
.who2 .nm a:hover{color:var(--teal-deep)}
.rate{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.stars{color:var(--teal);font-size:13.5px;letter-spacing:1.5px}
.score{font-family:var(--disp);font-size:17px;font-weight:700;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font:600 10.5px/1 var(--body);letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal-deep);background:var(--teal-pale);border-radius:999px;padding:5px 9px}

/* bonus — the largest teal object on the page, immediately left of the CTA */
.bonus{background:var(--teal-pale);border:1px solid #C7E4E8;border-radius:18px;
  padding:11px 16px;text-align:center}
.bonus .lb{font:700 9.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-deep);opacity:.85;display:block;margin-bottom:5px}
.bonus .amt{font-family:var(--disp);font-weight:700;font-size:29px;line-height:1.02;
  color:var(--teal-deep);display:block}
.bonus .sub{font:400 11.5px/1.35 var(--body);color:var(--muted);display:block;margin-top:4px}

/* ── three click targets per card: logo, bonus block and CTA ────────────────
   The logo chip and the bonus block are affiliate anchors as well as the button, so
   the whole card converts. Colour is inherited so nothing picks up link styling, and
   each target gets its own hover + keyboard focus affordance. */
a.chip,a.bonus,a.bwrap{text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
a.chip{display:flex}
a.bonus{display:block}
a.bwrap{display:block}
a.chip:hover{border-color:var(--teal);box-shadow:0 2px 10px rgba(0,150,169,.14)}
a.bonus:hover{border-color:var(--teal);background:#D7EDF0}
a.bwrap:hover .amt{color:var(--teal)}
a.chip:focus-visible,a.bonus:focus-visible,a.bwrap:focus-visible,
.btn-launch:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ── THE THROTTLE BUTTON (unique CTA) — the ONLY place --cta appears ────── */
.btn-launch{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--cta);color:#fff;text-decoration:none;border:0;cursor:pointer;
  border-radius:999px;padding:11px 11px 11px 22px;width:100%;
  font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.08em;
  text-transform:uppercase;transition:background .15s ease}
.btn-launch:hover{background:var(--cta-dark);color:#fff}
.btn-launch .knob{width:30px;height:30px;border-radius:50%;background:#FFF3EC;color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-size:15px;line-height:1;transition:transform .15s ease}
.btn-launch:hover .knob{transform:translateX(3px) translateY(-2px)}
.btn-launch.sm{font-size:15.5px;padding:9px 9px 9px 18px}
.btn-launch.sm .knob{width:26px;height:26px;font-size:13px}

.terms{font:400 11px/1.4 var(--body);color:var(--muted);text-align:center;margin:6px 0 0}

/* ribbon — lives OUTSIDE any clipped element (the ciderridge lesson) */
.ribbon{position:absolute;top:0;left:104px;background:var(--ink);color:#fff;
  font:700 9.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 13px;border-radius:0 0 9px 9px;z-index:2}

/* ── reviews ────────────────────────────────────────────────────────────── */
.review{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 28px;margin:0 0 22px}
.rhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.rhead .chip{height:82px}
.rhead .chip img{max-height:66px}
.rhead h3{margin:0;flex:1 1 240px;font-size:24px}
.rscore{background:var(--ink);color:#fff;border-radius:14px;padding:7px 14px;
  font-family:var(--disp);font-weight:700;font-size:21px;flex:0 0 auto}
.subscores{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin:18px 0}
.ss{background:var(--cream);border-radius:12px;padding:10px 13px}
.ss .k{font:600 11px/1.2 var(--body);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ss .v{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink)}
.bar{height:4px;border-radius:2px;background:var(--line);margin-top:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:16px 0 20px}
.rbonus{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--teal-pale);border:1px solid #C7E4E8;border-radius:16px;padding:14px 18px;margin:16px 0}
.rbonus .amt{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--teal-deep);line-height:1.1}
.rbonus .lb{font:700 9.5px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-deep);opacity:.85;display:block;margin-bottom:4px}
.rbonus .rt{font:400 12px/1.45 var(--body);color:var(--muted);max-width:44ch}
.rbonus .go{flex:0 0 200px}

/* ── tables ─────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:660px;background:#fff;font-size:15px}
thead th{background:var(--ink);color:#fff;font-family:var(--disp);font-weight:700;font-size:16px;
  letter-spacing:.03em;text-align:left;padding:12px 14px;vertical-align:middle}
tbody td,tbody th{padding:12px 14px;border-top:1px solid var(--line);border-right:1px solid var(--line);
  vertical-align:top;text-align:left;background:#fff}
tbody td:last-child,tbody th:last-child{border-right:0}
tbody th{font-weight:700;font-family:var(--body);font-size:15px}
td .amt{color:var(--teal-deep);font-family:var(--disp);font-weight:700;font-size:18px}

/* ── generic blocks ─────────────────────────────────────────────────────── */
.note{background:var(--cream);border-left:3px solid var(--teal);border-radius:0 14px 14px 0;
  padding:16px 20px;margin:0 0 22px}
.note p:last-child{margin-bottom:0}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 22px}
ol.steps li{counter-increment:s;position:relative;padding-left:52px;margin-bottom:16px;min-height:36px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;
  border-radius:50%;background:var(--teal);color:#fff;font-family:var(--disp);font-weight:700;
  font-size:19px;display:flex;align-items:center;justify-content:center}
.faq{border-top:1px solid var(--line)}
.faq .q{border-bottom:1px solid var(--line);padding:20px 0}
.faq .q h3{margin:0 0 8px;font-size:21px}
.faq .q p:last-child{margin-bottom:0}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#B8CFD7;margin-top:64px;font-size:14.5px}
.foot .band{height:14px;background:repeating-linear-gradient(90deg,rgba(64,208,224,.30) 0 15px,transparent 15px 34px)}
.foot .wrap{padding-top:38px;padding-bottom:32px}
/* footer logo scaled to match the masthead 1.5x, so the site logo is never two sizes */
.foot img.fl{height:66px;width:auto;margin-bottom:14px}
.foot a{color:#DCEDF1;text-decoration:none}
.foot a:hover{color:var(--teal-lift)}
.fnav{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 20px;padding:0;list-style:none}
.fnav a{font-weight:600}
.foot .rg{border-top:1px solid rgba(255,255,255,.13);padding-top:18px;margin-top:18px;
  font-size:13px;line-height:1.65;color:#93AEB8}
/* the #ad / affiliate disclosure sits at the very BOTTOM (hard rule 5) */
.foot .disclose{font-size:12.5px;color:#7F9AA4;margin-top:14px}

/* ── mobile: the pill becomes a vertical lozenge ────────────────────────── */
@media (max-width:900px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:100%;z-index:30;
    flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(11,30,45,.11)}
  .nav.open a{padding:15px 22px;border-top:1px solid var(--line)}
  .nav.open .btn-launch{margin:14px 22px 18px;width:auto}
  .burger{display:flex}
  .mast{position:relative}

  h1,.hero h1{font-size:27px}
  h2{font-size:25px;margin-top:44px}
  h3{font-size:20px}
  /* The 19ch measure is a DESKTOP choice (keeps the 40px display H1 clear of the trail
     graphic). On a ~356px container it only wraps the H1 early and leaves dead space to
     its right, so the heading runs the full width here. */
  .hero h1{max-width:none}
  .hero{padding:22px 0 24px}
  .hero .lede{font-size:15.5px;margin-bottom:14px}
  .byline img{width:44px;height:44px}

  .pill{grid-template-columns:1fr;justify-items:center;text-align:center;
    border-radius:34px;padding:44px 18px 18px;gap:12px}
  .ribbon{left:50%;transform:translateX(-50%)}
  .rank{width:56px;height:56px}
  .rank b{font-size:25px}
  .chip{width:100%;max-width:230px}
  .who2{width:100%}
  .rate{justify-content:center}
  .tags{justify-content:center}
  /* ORDER IS DELIBERATE: the tags ride with the name block, the bonus sits directly
     above the button, CTA last. Nothing ever separates the bonus from the button
     (the hausstl lesson). Tags live INSIDE .who2 so the desktop grid keeps 5 tracks. */
  .pill .rank{order:1}
  .pill .chip{order:2}
  .pill .who2{order:3}
  .pill .bonus{order:4;width:100%}
  .pill .go{order:5;width:100%}
  .bonus .amt{font-size:31px}
  /* CENTRED on mobile: the button is full-width here, and space-between would pin
     the label to the left edge with the knob far right. Centre the label+knob as one
     group and let the knob sit just after the text. */
  .btn-launch{justify-content:center;gap:12px;padding:13px 20px}

  .review{padding:20px 18px;border-radius:20px}
  .pc{grid-template-columns:1fr;gap:14px}
  .rbonus{flex-direction:column;align-items:stretch;text-align:center}
  .rbonus .go{flex:1 1 auto}
  .rbonus .rt{max-width:none}
}
@media (max-width:420px){
  body{font-size:16px}
  .wrap{padding-left:16px;padding-right:16px}
  .hero h1{font-size:25px}
}