/* ============================================================
   ikewayne.com — sales page
   Recovered 6 September 2026 from the self-contained build.
   Fonts are the site's own woff2 files, not base64.
   ============================================================ */
@font-face{font-family:'Newsreader';src:url('../assets/fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../assets/fonts/newsreader-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../assets/fonts/newsreader-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../assets/fonts/newsreader-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   ikewayne.com — the sales page.  Direction A, 30 August 2026.
   Loaded by index.html ONLY. Self-contained: it does not import
   or extend site.css, so the sales page and the rest of the site
   cannot interfere with each other.

   Fonts are self-hosted from assets/fonts/ rather than pulled
   from Google. Two reasons: the page renders identically for
   everyone regardless of a third-party request, and no visitor's
   address book is handed to another company on page load.
   ============================================================ */

:root{
  --ink:#14161a; --ink-2:#3d434c; --ink-3:#6b727c; --ink-4:#9aa1ab;
  --paper:#fbfaf8; --panel:#ffffff; --band:#12253a;
  --rule:#e3e1dc; --rule-2:#cdcbc5;
  --navy:#1f4670; --navy-2:#153252;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1.125rem;line-height:1.62;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased}

.wrap{width:100%;max-width:66rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.019em;text-wrap:balance}
h1{font-size:clamp(2.4rem,4.9vw,3.85rem);line-height:1.04;letter-spacing:-.033em}
h2{font-size:clamp(1.55rem,2.5vw,2rem);line-height:1.18}
p{margin:0 0 1.05em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{color:var(--navy-2)}

.eyebrow{font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.155em;
  text-transform:uppercase;color:var(--navy);margin:0 0 1.1rem;display:flex;align-items:center;gap:.75rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--navy);opacity:.5}
.lede{font-size:1.28rem;line-height:1.5;color:var(--ink-2)}
.small{font-size:.9375rem;line-height:1.6;color:var(--ink-3)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:.75rem 1rem;z-index:100;font-family:var(--ui)}
.skip:focus{left:0}

/* ---------- masthead ---------- */
.topbar{height:3px;background:var(--navy)}
.mast{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4.25rem;flex-wrap:wrap}
.mark{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.mark em{font-family:var(--ui);font-size:.625rem;font-weight:600;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.mast .when{font-family:var(--ui);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.25rem,4.4vw,3.5rem) clamp(2.5rem,4.8vw,3.75rem)}
/* Two rows so the offer panel can sit beside the headline on a wide screen
   and rise ABOVE the second paragraph on a narrow one. Without this the form
   fell below the fold on a phone, which is the one thing this page cannot do. */
.hero .wrap{display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.hero h1{margin-bottom:1rem}
.hero .lede{margin-bottom:1rem;font-size:1.28rem;line-height:1.62}
.hero .hsub{color:var(--ink-2);margin:0;font-size:1.28rem;line-height:1.62}
.hero .hsub strong{color:var(--ink);font-weight:600}

/* ---------- the set card (hero, right) ---------- */
.setcard{background:var(--panel);border:1px solid var(--rule-2);border-radius:4px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(20,22,26,.05),0 18px 40px -22px rgba(20,22,26,.4)}
.sc-head{background:var(--band);color:#fff;padding:.85rem 1.4rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sc-head span:first-child{font-family:var(--serif);font-size:1.02rem;font-weight:600;letter-spacing:-.012em}
.sc-head span:last-child{font-family:var(--ui);font-size:.5625rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:#8fb4d4}
.sc-list{padding:.35rem 1.4rem .25rem}
.sc-list{list-style:none;margin:0}
.sc-list li{display:grid;grid-template-columns:2rem 1fr;gap:.5rem;align-items:baseline;
  padding:.5rem 0;border-top:1px solid var(--rule)}
.sc-list li:first-child{border-top:0;padding-top:0}
.sc-list .rn{font-family:var(--ui);font-size:.625rem;font-weight:700;letter-spacing:.08em;color:var(--navy)}
.sc-list span + span{font-size:1rem;line-height:1.25;font-weight:500}
.sc-foot{font-family:var(--ui);font-size:.6875rem;line-height:1.6;color:var(--ink-3);
  margin:0;padding:.9rem 1.4rem 1.05rem;border-top:1px solid var(--rule);background:#fcfbfa}

/* ---------- the offer panel ---------- */
.panel{background:var(--panel);border:1px solid var(--rule-2);border-radius:4px;
  padding:1.85rem 1.75rem;
  box-shadow:0 1px 2px rgba(20,22,26,.04),0 12px 28px -18px rgba(20,22,26,.28)}
.panel .ptop{font-family:var(--ui);font-size:.625rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy);margin:0 0 .85rem}
.panel h3{font-size:1.3rem;line-height:1.2;margin:0 0 .5rem}
.panel .pnote{font-size:.9375rem;line-height:1.5;color:var(--ink-3);margin:0 0 1.35rem}

/* ---------- the offer band ---------- */
.offer-band{background:#fafaf8;padding-block:clamp(2rem,4vw,3rem)}

/* ---------- the offer card ---------- */
.offer{background:var(--panel);border:1px solid var(--rule-2);border-top:3px solid var(--navy);border-radius:3px;
  padding:1.5rem 1.5rem 1.5rem;
  box-shadow:0 1px 2px rgba(20,22,26,.04),0 14px 32px -22px rgba(20,22,26,.35)}
.offer-tag{font-family:var(--ui);font-size:.5938rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--navy);margin:0 0 .65rem}
.offer-name{font-size:1.23rem;line-height:1.23;margin:0 0 .6rem}
.offer-what{font-size:.9375rem;line-height:1.58;color:var(--ink-3);margin:0 0 1.3rem}

.inline-capture{margin:0}
.inline-capture .cap-row{display:flex;gap:.6rem;align-items:stretch;margin-bottom:0.95rem}
.inline-capture .cap-input{flex:1 1 14rem;min-width:0;width:auto}
.inline-capture .btn{width:auto;flex:0 0 auto;margin-top:0;padding:.88rem 1.4rem}

/* ---------- the form ---------- */
.capture{margin:0}
.cap-row{display:block}
.cap-input{width:100%;font-family:var(--ui);font-size:.9375rem;line-height:1.25;
  padding:.85rem .9rem;border:1px solid var(--rule-2);border-radius:3px;
  background:#fff;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.cap-input::placeholder{color:var(--ink-4)}
.cap-input:hover{border-color:var(--ink-4)}
.cap-input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,70,112,.14)}
.btn{width:100%;margin-top:.6rem;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:.9375rem;font-weight:600;padding:.9rem 1rem;
  border:1px solid var(--navy);border-radius:3px;background:var(--navy);color:#fff;
  cursor:pointer;transition:background .16s,border-color .16s}
.btn:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn[disabled]{opacity:.6;cursor:progress}
.cap-fine{font-family:var(--ui);font-size:.6875rem;line-height:1.55;color:var(--ink-4);margin:.8rem 0 0}
.cap-msg{font-family:var(--ui);font-size:.8125rem;font-weight:500;line-height:1.5;
  margin:.85rem 0 0;color:var(--navy)}
.cap-msg:empty{display:none}
.cap-msg.is-error{color:#a8322b}
.cap-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.capture.is-done .cap-row,.capture.is-done .cap-fine{display:none}
.capture.is-done .cap-msg{font-family:var(--serif);font-size:1.0625rem;font-weight:400;
  line-height:1.45;color:var(--ink);margin:0;padding-left:1rem;border-left:2px solid var(--navy)}

/* ---------- the strip ---------- */
.strip{border-block:1px solid var(--rule);background:#fff}
.strip .wrap{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-block:1.25rem}
.strip div{font-family:var(--ui);font-size:.6875rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.strip b{color:var(--navy);font-weight:600}

/* ---------- body sections ---------- */
section.body{padding-block:clamp(2.75rem,5.3vw,4rem)}
section.body + section.body{border-top:1px solid var(--rule)}
.head{max-width:38rem;margin-bottom:2.1rem}
.head h2{margin-bottom:.7rem}
.head p{color:var(--ink-2);line-height:1.62}

/* ---------- the five stages ---------- */
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.stage{background:#fff;padding:1.15rem 1.05rem}
.stage h3{font-family:var(--ui);font-size:.625rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);margin:0 0 .7rem}
.stage ul{list-style:none;margin:0;padding:0}
.stage li{font-size:.9375rem;line-height:1.35;color:var(--ink-2);padding:.3rem 0}
.gate{font-family:var(--ui);font-size:.875rem;line-height:1.55;color:var(--ink-3);
  margin-top:1.15rem;padding-left:.9rem;border-left:2px solid var(--navy)}

/* ---------- three points ---------- */
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.75rem)}
.pts-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,3.5vw,3rem) clamp(2rem,4vw,4rem)}
.pts .n{font-family:var(--ui);font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  color:var(--navy);display:block;margin-bottom:.8rem}
.pts h3{font-family:var(--ui);font-size:1rem;font-weight:600;letter-spacing:0;margin:0 0 .55rem}
.pts p{font-size:.9688rem;line-height:1.59;color:var(--ink-3)}

/* ---------- the set ---------- */
.set{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(2rem,4vw,3.5rem)}
.set li{display:grid;grid-template-columns:1.9rem 1fr;gap:.75rem;align-items:baseline;
  padding:.7rem 0;border-top:1px solid var(--rule)}
.set .rn{font-family:var(--ui);font-size:.625rem;font-weight:700;letter-spacing:.1em;color:var(--ink-4)}
.set b{font-weight:500;font-size:1.03rem}
.set i{font-style:normal;display:block;font-size:.875rem;color:var(--ink-3);line-height:1.35}

/* ---------- who this is from ---------- */
.bio{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.bio h2{margin:0}
.bio-body{border-left:2px solid var(--navy);padding-left:clamp(1.1rem,2vw,1.6rem)}
.bio-body p{color:var(--ink-2);max-width:34rem}

/* ---------- quotes ---------- */
.qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.q{background:#fff;padding:1.6rem 1.45rem;display:flex;flex-direction:column}
.q p{font-size:1.05rem;line-height:1.42;margin:0 0 1.1rem}
.q cite{margin-top:auto;font-family:var(--ui);font-style:normal;font-size:.625rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- closing band ---------- */
.close{background:var(--band);color:#fff;padding-block:clamp(3rem,5.5vw,4rem)}
.close .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  gap:clamp(2rem,5vw,4rem);align-items:center}
.close h2{color:#fff;margin-bottom:.65rem}
.close p{color:rgba(255,255,255,.72);margin:0 0 .85rem;max-width:27rem;line-height:1.62}
.close p:last-child{margin-bottom:0}
.close .eyebrow{color:#8fb4d4}
.close .eyebrow::before{background:#8fb4d4}
.close strong{color:#fff;font-weight:600}
.close .close-sub{color:rgba(255,255,255,.5);font-size:.9375rem}
.close .cap-input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28);color:#fff}
.close .cap-input::placeholder{color:rgba(255,255,255,.45)}
.close .cap-input:hover{border-color:rgba(255,255,255,.5)}
.close .cap-input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.close .btn{background:#fff;border-color:#fff;color:var(--band)}
.close .btn:hover{background:#e8eef4;border-color:#e8eef4}
.close .cap-fine{color:rgba(255,255,255,.45)}
.close .cap-msg{color:#fff}
.close .capture.is-done .cap-msg{color:#fff;border-left-color:#fff}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:2rem 2.75rem}
.foot p{font-family:var(--ui);font-size:.75rem;line-height:1.7;color:var(--ink-4);margin:0 0 .45rem}

/* ---------- responsive ---------- */
@media (max-width:60rem){
  .hero .wrap,.close .wrap,.bio{grid-template-columns:1fr;gap:2rem}
  .pts-2{grid-template-columns:1fr}
  .hero .lede,.hero .hsub,.inline-capture{max-width:none}
  .stages{grid-template-columns:1fr 1fr}
  .qs,.pts{grid-template-columns:1fr}
  .set{grid-template-columns:1fr}
}
@media (max-width:40rem){
  body{font-size:1.0625rem}
  .inline-capture .cap-row{flex-direction:column}
  .inline-capture .cap-input{flex:0 0 auto;width:100%}
  .inline-capture .btn{width:100%}
  h1{font-size:clamp(2rem,7.4vw,2.5rem)}
  .hero{padding-block:2.25rem}
  .hero .lede{font-size:1.1rem}
  .stages{grid-template-columns:1fr}
  .panel{padding:1.5rem 1.35rem}
}

:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.capture,.mast,.close,.topbar{display:none}}