/* ============================================================================
   RELATIONSHIP ALCHEMY -- the JOEY KLEIN author brand.
   ----------------------------------------------------------------------------
   This funnel is Joey Klein's, not Inner Matrix Systems'.

   CORRECTED 24 Sep, and the correction is worth recording because it was our
   mistake. An earlier pass read joeyklein.com as "warm and editorial" and made
   the kit's beige (#F2E8E4) the page's ground colour. That beige is the light
   version of his LOGO, for putting the mark on a dark background. It was never
   a ground. Nicole: "I'm not sure where this pink came from ... he uses a lot
   more blue and gray and brown and white, less of this pink."

   His own speaker sheet settles it. Sampled, the three pages run 23-45% pure
   WHITE and 13-23% a single deep BLUE (#18296C, which sits between the first
   two swatches of the kit's blue row). Greys carry the secondary surfaces.
   There is no pink on any page of it.

   So: white is the ground, blue is the brand colour, grey does the structural
   work, brown is the warm accent, and the beige survives only where Joey
   speaks personally -- his note and his guarantee. Sparingly, per Nicole.
   ========================================================================== */
:root{
  /* --- grounds --- */
  /* White is the default, the way his collateral is set. The alternate band is
     a cool grey mixed off the kit's own #8596A6, NOT a warm tint. */
  --white:#FFFFFF;
  --ground:#FFFFFF;
  --ground-alt:#F4F6F9;   /* the alternating band                            */
  --ground-alt2:#E9EDF2;  /* the deeper cool band, for cards on the band     */
  --ground-blue:#F2F5FB;  /* faintest blue wash                              */

  /* Beige, kept and rationed. Two places only: the panel where Joey writes in
     the first person, and the guarantee. Both are warm moments on purpose. */
  --blush:#F2E8E4;
  --blush-deep:#EADCD3;

  /* --- ink / dark ground --- */
  /* #031626 is the kit's dark wordmark colour: near-black with a blue cast. */
  --ink-deep:#031626;
  --ink:#16222B;          /* body copy on light                              */
  --grey:#4A5761;         /* secondary copy                                  */
  /* The kit's grey #8596A6 is a LOGO colour -- 3.0:1 on white, fine for a mark
     and not for caption text. --muted is the same hue darkened to 5.6:1;
     --muted-mark keeps the kit value for genuinely decorative marks. */
  --muted:#5E6975;
  --muted-mark:#8596A6;

  /* --- the supplied blue swatch row: the brand colour --- */
  --blue-navy:#002473; --blue-mid:#29488A; --blue-soft:#3964BF; --blue:#003DBF;
  --blue-deep-sheet:#18296C;  /* the speaker sheet's dominant blue           */
  --blue-sea:#0C3559;     /* the icon blue                                   */
  --blue-bright:#7E9FE8;  /* legibility tint for dark grounds                */
  --blue-wash:#E9EEFA;

  /* --- brown: the warm accent, and the only one --- */
  /* Brass/gold was ours and is not in his kit. Everything that was brass is
     brown now: the seals, the price figures, the section labels. */
  --clay:#73513D;
  --clay-deep:#563C2D;
  --clay-light:#A6805F;   /* for dark grounds                                */

  /* --- lines --- */
  --rule:#E2E7EC;         /* cool hairline, the default                      */
  --rule-warm:#E6DBD5;    /* only on the beige cards                         */
  --rule-cool:#E2E7EC;
  --rule-dark:rgba(255,255,255,.16);

  --foil-blue:var(--rule);
  --foil-gold:var(--rule);

  /* --- type --- */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Helvetica Neue',sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);

  /* Back-compat aliases, so the whole funnel moves at once. New rules should
     use the names above. */
  --navy:var(--blue-sea); --navy-deep:var(--ink-deep); --navy-dark:var(--ink-deep);
  --abyss:var(--ink-deep);
  --blue-deep:var(--blue-navy); --blue-light:var(--blue-wash); --blue-bg:var(--ground-alt);
  --blush-tint:var(--ground-alt);
  /* Brass is retired; every reference now resolves to brown. */
  --brass:var(--clay); --brass-light:var(--clay-light);
  --gold:var(--clay); --gold-light:var(--clay-light); --gold-deep:var(--clay-deep);
  --accent:var(--blue); --accent-deep:var(--blue-navy); --accent-bright:var(--blue-bright);
  --accent-light:#C6D3F2; --accent-bg:var(--blue-wash);
  --ivory:var(--ground-alt); --warm-border:var(--rule); --cool-border:var(--rule-cool);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--ground); color:var(--ink);
  font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---- type ---- */
.display{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em}
h1.display{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2.display{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3.display{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2}
/* The section label. It was JetBrains Mono, which is an Inner Matrix tell;
   the Joey Klein brand does the same job with widely tracked, heavy Inter in
   clay. Heavier weight is what keeps it legible once the mono is gone. */
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;letter-spacing:.26em;font-size:.66rem;
  font-weight:700;color:var(--clay);
}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--grey)}
em{font-style:italic}

/* ---- layout ---- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:880px;margin:0 auto;padding:0 28px}
section{padding:clamp(56px,7vw,104px) 0}
.sec-head{margin-bottom:clamp(32px,4vw,52px)}
.sec-head .eyebrow{display:block;margin-bottom:14px}
/* A short clay rule above the label. One small editorial mark, repeated, does
   more for "designed" than any amount of chrome. */
.sec-head .eyebrow::before{content:"";display:block;width:34px;height:2px;
  background:var(--clay);margin-bottom:16px}
.sec-head.centred .eyebrow::before{margin-left:auto;margin-right:auto}
.on-dark .sec-head .eyebrow::before{background:var(--brass)}
.foil{height:1px;background:var(--foil-blue);border:0;margin:0}
.foil-gold{height:1px;background:var(--foil-gold);border:0;margin:0}
.dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px currentColor;color:var(--accent);
  vertical-align:middle;flex:0 0 6px;
}

/* ---- surfaces ---- */
.on-ivory{background:var(--ivory)}
.on-white{background:var(--white);border-top:1px solid var(--warm-border);border-bottom:1px solid var(--warm-border)}
/* The dark band. Flat #031626 with one soft warm bloom, NOT the blue radial
   gradient with a blueprint grid over it -- that combination is the Inner
   Matrix book funnel's signature and it is the single thing that made this
   page read as the same funnel. The bloom is warm so the dark bands belong to
   the same brand as the blush ones. */
.on-dark{
  background:var(--ink-deep);
  color:#F0E9E5; position:relative; overflow:hidden;
}
.on-dark::before{
  content:"";position:absolute;inset:-20% -10%;pointer-events:none;
  background:
    radial-gradient(52% 58% at 22% 8%,rgba(115,81,61,.34) 0%,transparent 62%),
    radial-gradient(46% 52% at 88% 96%,rgba(0,61,191,.26) 0%,transparent 66%);
}
.on-dark>*{position:relative}
.on-dark .eyebrow{color:var(--brass-light)}
.on-dark .lede{color:#CBBFB9}

/* ---- continuity bar ---- */
.continuity{background:var(--navy-deep);color:#DCE8F2;padding:11px 0;font-size:.8rem}
.continuity .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;text-align:center}
.continuity strong{color:var(--white);font-weight:600}
.continuity .step{
  font-family:var(--sans);
  letter-spacing:.14em;text-transform:uppercase;font-size:.64rem;color:#8FB0CC;
}

/* ---- masthead ---- */
/* The masthead is the narrowest-tolerance row on the page: a wide-tracked
   wordmark next to a CTA. It fits at 320px, but only because both items are
   allowed to shrink and the tracking tightens under 640px -- keep all three
   rules together if this bar is ever edited. */
.mast{border-bottom:1px solid rgba(107,182,216,.22);background:var(--abyss);
  color:#EAF2F8;position:sticky;top:0;z-index:40}
.mast .btn{background:var(--white);color:var(--navy);padding:10px 17px}
.mast .btn:hover{background:var(--accent-bright);color:var(--navy-deep)}
/* Three tracks rather than flex, so the mark is centred on the page and not
   on whatever is left between the cover and the button. */
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;min-height:86px;padding-top:10px;padding-bottom:10px}
.mast .btn-sm{justify-self:end}
/* No cover to balance against on the pages past checkout, so the mark goes
   back to the left rather than floating over an empty track. */
.mast.no-book .wrap{grid-template-columns:auto 1fr}
.mast.no-book .mark{justify-self:start}
/* The supplied lockup is stacked -- sphere over "INNER MATRIX" over "SYSTEMS"
   -- so the masthead is taller than a horizontal mark would need. Below 58px
   the SYSTEMS line stops being legible, which sets the floor. */
.mark{display:flex;align-items:center;line-height:0;justify-self:center}
.mark img{height:58px;width:auto;display:block}
/* The cover in the sticky bar, so the thing being offered is on screen the
   whole way down the page. Decorative: the button already says what it is.
   The negative bottom margin shrinks its layout box, which both keeps the bar
   at its own height and lets the artwork hang below the rule. */
.mast-book{height:118px;width:auto;display:block;justify-self:start;
  position:relative;z-index:2;margin-bottom:-42px;
  filter:drop-shadow(0 10px 22px rgba(0,8,31,.7))}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--navy);color:var(--white);border:0;border-radius:0;
  font-family:var(--sans);font-weight:700;
  font-size:1rem;letter-spacing:.01em;
  padding:15px 26px;min-height:44px;cursor:pointer;text-decoration:none;
  transition:background .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn:hover{background:var(--accent-deep);box-shadow:0 8px 28px rgba(0,30,96,.18)}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn-sm{padding:11px 18px;font-size:.83rem}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn-ghost:hover{background:var(--navy);color:var(--white)}
.on-dark .btn{background:var(--white);color:var(--navy)}
.on-dark .btn:hover{background:var(--accent-bright);color:var(--navy-deep)}
.cta-under{margin-top:16px;font-size:.87rem;color:var(--muted);max-width:44ch}
.on-dark .cta-under{color:#9FB6CC}

/* ---- hero ---- */
.hero{padding:clamp(56px,7vw,104px) 0 clamp(60px,7vw,112px)}
.on-dark .ph{border-color:rgba(107,182,216,.42);background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.on-dark .ph .ph-t{color:#EAF2F8}
.on-dark .ph .ph-n{color:#9FB6CC}
.on-dark .byline{color:#9FB6CC}
/* Named areas so mobile can move the copy out from beside the cover without
   touching the markup: on a phone the headline shares the top band with the
   cover and everything else runs the full width beneath it. */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;
  grid-template-areas:"head media" "body media";
  gap:0 clamp(28px,4vw,56px);align-items:center}
.hero-head{grid-area:head;align-self:end}
.hero-body{grid-area:body;align-self:start}
.hero-media{grid-area:media}
/* The mockup is a cut-out on transparency, so it needs its own drop shadow to
   sit on the navy rather than float on it. */
.book-shot{width:100%;height:auto;
  filter:drop-shadow(0 26px 44px rgba(0,8,31,.55)) drop-shadow(0 4px 10px rgba(0,8,31,.4))}
.hero h1{margin:18px 0 22px;max-width:22ch}
.hero .lede{max-width:52ch;margin-bottom:32px}
.byline{font-size:.82rem;color:var(--muted);margin-top:26px;display:flex;
  align-items:center;gap:9px;flex-wrap:wrap}

/* ---- placeholders (navy-framed, per the ad_application note) ---- */
.ph{
  border:1px solid var(--navy);background:var(--blue-bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:22px;text-align:center;color:var(--navy);
}
.ph .ph-k{font-family:var(--sans);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep)}
.ph .ph-t{font-weight:700;font-size:.9rem;line-height:1.3}
.ph .ph-n{font-size:.74rem;color:var(--muted);line-height:1.45;max-width:30ch}
.ph-book{aspect-ratio:3/4.2}
.ph-portrait{aspect-ratio:4/5}
.ph-review{aspect-ratio:16/7}

/* ---- recognition (the mirror) ---- */
.recog{padding:clamp(46px,5vw,76px) 0}
.recog .narrow{max-width:760px}
.recog .sec-head{margin-bottom:clamp(22px,2.6vw,32px);text-align:center}
.recog-h{font-size:clamp(1.72rem,3.4vw,2.65rem);max-width:20ch;margin:14px auto 0}
/* Heading stays centred, body does not. Centred ragged copy is fine for a
   single line and works against you the moment it runs to four, which is
   exactly where the bolded scan phrases need a predictable left edge. */
.mirror{max-width:60ch;margin:0 auto;text-align:left}
/* Three beats instead of one dense clause chain. Hairline-defined cards with a
   foil rule, per the brand contract -- no shadows, no rounding. */
.mech{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--warm-border);margin-top:clamp(34px,4vw,54px)}
.mech-c{background:var(--white);padding:clamp(24px,2.6vw,32px);position:relative}
.mech-c::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-blue)}
.mech-k{font-family:var(--sans);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);
  font-weight:600;display:block;margin-bottom:11px}
.mech-c p{font-size:.97rem;line-height:1.6;color:var(--ink)}
@media(max-width:860px){.mech{grid-template-columns:1fr}}
/* Ink, not the near-white this carried when the mirror sat on the navy ground.
   The hero owns the dark surface now.
   Body drops to the sans at reading size: the serif at 1.5rem was competing
   with the headline for weight, which is what made this section look like work
   rather than an invitation. Measure capped so the eye is not tracking 90
   characters a line. */
.mirror p{font-family:var(--sans);
  font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.68;font-weight:400;
  color:var(--grey);max-width:58ch;margin-left:auto;margin-right:auto}
.mirror strong{font-weight:700;color:var(--ink)}
.on-dark .mirror p{color:#F0F6FB}
.mirror p+p{margin-top:.9em}

/* ---- domains ---- */
/* Interleaved source order (cost,want,cost,want,cost,want) with the grid
   flowing DOWN each column and only two rows defined: item 1 lands top-left,
   item 2 beneath it, item 3 top of the next column, and so on. That puts the
   three costs across the top row and each answer directly under its cost,
   while keeping the markup in the reading order mobile needs. */
.domains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;grid-auto-flow:column;
  gap:clamp(12px,1.4vw,18px);background:transparent}
.domain{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(24px,2.6vw,34px);position:relative;
  display:flex;flex-direction:column}
.domain::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--foil-blue)}
.domain h3{font-family:var(--sans);font-size:.72rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--navy);margin-bottom:18px}
.domain .hell{font-size:1rem;line-height:1.58;margin-bottom:0;color:var(--ink)}
.d-want{background:var(--blue-bg);border-color:var(--cool-border)}
.d-want::before{background:var(--foil-gold)}
.want-k{display:block;font-family:var(--sans);
  font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-bottom:12px}
.domain .want{font-size:.97rem;line-height:1.58;color:var(--ink);margin:0}
/* Dot marker rides the label, not the sentence -- it was sitting mid-paragraph
   and reading as a bullet on a one-item list. */
.want-k::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);margin-right:8px;vertical-align:middle}

/* ---- order dialog ---- */
/* <dialog> rather than a hand-rolled overlay: the top layer, the backdrop, Esc
   and the focus trap are all native, which is a lot of accessibility to get for
   free. Squared and hairlined like every other surface here. */
.order-dialog{
  border:0;padding:0;background:transparent;max-width:min(1180px,94vw);
  width:100%;max-height:92vh;color:var(--ink)}
.order-dialog::backdrop{background:rgba(0,8,31,.72);backdrop-filter:blur(3px)}
.order-inner{
  background:var(--ivory);border:1px solid var(--warm-border);
  padding:clamp(26px,3.4vw,52px);max-height:92vh;overflow-y:auto;
  position:relative;-webkit-overflow-scrolling:touch}
.order-inner::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-blue)}
.order-x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;min-width:44px;border:1px solid var(--warm-border);
  background:var(--white);color:var(--ink);font-size:1.5rem;line-height:1;
  cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.order-x:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.order-dialog .sec-head{padding-right:52px}
/* Slow and weighted, per the motion law -- and skipped entirely for anyone who
   has asked for reduced motion. */
@keyframes order-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.order-dialog[open] .order-inner{animation:order-in .42s var(--ease)}
@media(prefers-reduced-motion:reduce){.order-dialog[open] .order-inner{animation:none}}
@media(max-width:900px){.order-dialog{max-width:100vw;max-height:100vh}
  .order-inner{max-height:100vh;min-height:100vh}}

/* ---- the Amazon review, set as text ---- */
/* Not a screenshot: these run to 230 words and a screenshot of that is
   unreadable on a phone. Every marker a screenshot would carry is reproduced
   as text, so it is still legibly a real review and it still reflows. */
.azn{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(26px,3vw,40px);position:relative;max-width:72ch;margin:0 auto}
.azn::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-blue)}
.azn-stars{color:var(--gold);font-size:1.05rem;letter-spacing:.16em;
  line-height:1;margin-bottom:14px}
.azn-title{font-family:var(--serif);font-weight:600;
  font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.3;color:var(--navy);
  margin-bottom:16px;letter-spacing:-.005em}
.azn-lead{font-family:var(--serif);
  font-size:clamp(1.16rem,1.9vw,1.42rem);line-height:1.42;color:var(--navy);
  margin-bottom:16px}
.azn-body{font-size:.97rem;line-height:1.68;color:var(--grey);margin-bottom:20px}
.azn-meta{font-family:var(--sans);font-size:.72rem;
  letter-spacing:.05em;color:var(--muted);padding-top:16px;
  border-top:1px solid var(--warm-border)}
.azn-meta strong{color:var(--navy);font-weight:600}
.azn-v{color:var(--accent,#003DBF);font-weight:600}
.cap{text-align:center;font-family:var(--sans);
  font-size:.68rem;letter-spacing:.08em;color:var(--muted);margin-top:16px}

/* ---- pull statement ---- */
.pull{
  border-left:2px solid var(--blue);padding:4px 0 4px 26px;margin-top:34px;
  font-family:var(--serif);
  font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.45;color:var(--navy);
}

/* ---- the turn ---- */
.turn{background:var(--white);border:1px solid var(--warm-border);padding:clamp(26px,3vw,40px);
  position:relative;margin-top:34px}
.turn::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--foil-gold)}
/* The global reset zeroes paragraph margins; restore the gap between Joey's
   note paragraphs so they do not run together. */
.turn p+p{margin-top:1em}
.signoff{margin-top:30px;font-family:var(--sans);font-weight:800;
  font-size:1.02rem;letter-spacing:.005em;color:var(--navy)}

/* ---- promises ---- */
.promises{margin-top:clamp(34px,4vw,52px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.promise{background:#fff;border:1px solid var(--warm-border);
  padding:clamp(20px,2.2vw,26px);display:grid;grid-template-columns:auto 1fr;
  gap:0 16px;align-items:start}
.promise .n{font-family:var(--sans);font-size:.72rem;
  font-weight:600;color:var(--accent-deep);letter-spacing:.1em;padding-top:3px}
.promise h3{font-family:var(--sans);font-size:1.04rem;
  font-weight:800;line-height:1.3;color:var(--navy);margin-bottom:9px}
.promise p{font-size:.95rem;line-height:1.62;color:var(--grey)}

/* ---- proof ---- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.5vw,32px)}
.quote{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(24px,3vw,34px);position:relative}
.quote::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--foil-blue)}
.quote blockquote{font-family:var(--serif);
  font-size:clamp(1.06rem,1.5vw,1.3rem);line-height:1.5;color:var(--ink);
  font-weight:400;letter-spacing:-.005em;
  /* Literal characters, not CSS escapes. CSS is a plain (non-raw) Python
     string here, so "C" was read by PYTHON as octal  followed by the
     letter C -- which is exactly what rendered on the page. */
  quotes:"“" "”"}
.quote blockquote::before{content:open-quote;color:var(--blue);
  font-size:1.9em;line-height:0;vertical-align:-.32em;margin-right:.06em}
.quote blockquote::after{content:close-quote;color:var(--blue);
  font-size:1.9em;line-height:0;vertical-align:-.32em;margin-left:.02em}
.quote .who{display:flex;flex-direction:column;gap:3px;margin-top:24px;padding-top:18px;
  padding-top:20px;border-top:1px solid var(--warm-border)}
.avatar{width:40px;height:40px;flex:0 0 40px;border:1px solid var(--navy);
  background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.06em}
.who .nm{font-weight:700;font-size:.86rem;letter-spacing:.01em;color:var(--navy)}
.who .rl{font-family:var(--sans);font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ---- client logo strip ---- */
/* Quiet band, greyscale: reassurance under the offer, not a second headline.
   Wordmarks are placeholders until IMS sends the files from the strip they
   already run. */
.logos{padding:clamp(34px,4vw,52px) 0}
.logo-eyebrow{font-family:var(--sans);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin-bottom:clamp(18px,2.4vw,28px)}
/* IMS's own strip, one SVG. It ships at #0B3559 / 0.8 alpha, which already
   reads as the quiet band this section wants -- no filter needed. */
.logo-strip{width:100%;max-width:1007px;height:auto;margin:0 auto;
  opacity:.85}
@media(max-width:620px){.logo-strip{opacity:.9}}

/* Add-on lines injected into the order rail by the live summary. */
.sline-addon .v{color:var(--ink)}
.sline-addon span:first-child{color:var(--muted);font-size:.88rem}
.proof-label{font-weight:700;font-size:.95rem;margin-bottom:6px}
.proof-note{font-size:.82rem;color:var(--muted);margin-bottom:26px}

/* ---- order ---- */
.order-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.5vw,52px);align-items:start}
.form-card{background:var(--white);border:1px solid var(--warm-border);position:relative}
.form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--foil-blue)}
.fstep{padding:clamp(22px,2.6vw,32px);border-bottom:1px solid var(--warm-border)}
.fstep:last-child{border-bottom:0}
.fstep-h{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.fstep-n{font-family:var(--sans);font-size:.68rem;
  letter-spacing:.16em;color:var(--accent-deep)}
.fstep-t{font-weight:800;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.express{padding:clamp(22px,2.6vw,32px);background:var(--blue-bg);border-bottom:1px solid var(--warm-border)}
.express-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.xbtn{border:1px solid var(--navy);background:var(--navy);color:var(--white);
  padding:15px 8px;font-size:.82rem;font-weight:700;text-align:center;cursor:pointer;
  min-height:44px;display:flex;align-items:center;justify-content:center}
.xbtn:hover{background:var(--accent-deep)}
.express-note{font-size:.78rem;color:var(--muted);margin-top:12px}
.or{display:flex;align-items:center;gap:14px;margin:22px 0 0;
  font-family:var(--sans);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.or::before,.or::after{content:"";height:1px;flex:1;background:var(--warm-border)}
.row{display:grid;gap:14px;margin-bottom:14px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:1.6fr 1fr 1fr}
label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);margin-bottom:7px}
input,select{
  width:100%;border:1px solid var(--cool-border);border-radius:0;background:var(--white);
  padding:14px 15px;font-family:inherit;font-size:1rem;color:var(--ink);min-height:44px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
input:focus,select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,159,200,.16)}
.addon{display:flex;gap:14px;align-items:flex-start;padding:16px;
  border:1px solid var(--cool-border);margin-bottom:10px;cursor:pointer}
.addon:hover{border-color:var(--blue)}
.addon input{width:18px;height:18px;flex:0 0 18px;min-height:0;margin-top:2px;accent-color:var(--navy)}
.addon>span{text-transform:none;letter-spacing:normal;font-weight:400;color:var(--ink)}
.addon .a-t{font-weight:700;font-size:.95rem;text-transform:none;letter-spacing:normal}
.addon .a-d{font-size:.83rem;color:var(--muted);text-transform:none;letter-spacing:normal;font-weight:400}
.addon .a-p{margin-left:auto;font-family:var(--sans);
  font-size:.88rem;font-weight:600;color:var(--gold-deep);white-space:nowrap}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.83rem;color:var(--grey);margin-top:6px}
.consent>span{text-transform:none;letter-spacing:normal;font-weight:400;line-height:1.5}
.consent a{color:var(--accent-deep)}
.consent input{width:17px;height:17px;flex:0 0 17px;min-height:0;margin-top:3px;accent-color:var(--navy)}

.rail{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,28px);position:sticky;top:86px}
.summary{background:var(--white);border:1px solid var(--warm-border);position:relative;
  padding:clamp(22px,2.6vw,30px)}
.summary::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--foil-gold)}
.summary h3{font-family:var(--sans);font-size:.75rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:20px}
.sline{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--warm-border);font-size:.93rem}
.sline .v{font-family:var(--sans);font-weight:500;
  color:var(--gold-deep);white-space:nowrap}
.sline .d{display:block;font-size:.79rem;color:var(--muted);margin-top:4px;line-height:1.45}
.stotal{display:flex;justify-content:space-between;gap:16px;padding:18px 0 22px;
  font-weight:800;font-size:1.05rem;color:var(--navy)}
.stotal .v{font-family:var(--sans);font-size:1.35rem;color:var(--gold-deep)}
.trust{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.76rem;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:6px}
.trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue)}
.reviews h3{font-family:var(--sans);font-size:.75rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}
.reviews .stack{display:flex;flex-direction:column;gap:10px}
.reviews .cap{margin-top:12px;font-size:.79rem;color:var(--muted)}
.guarantee{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(22px,2.6vw,30px);position:relative}
.guarantee::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--foil-gold)}
.guarantee .g-t{font-family:var(--serif);font-size:1.2rem;
  font-weight:600;color:var(--navy);margin-bottom:12px}
.guarantee p{font-size:.92rem;line-height:1.6;color:var(--grey)}

/* ---- facts strip ---- */
/* The column count comes from the strip itself. Hardcoded at four, the three
   facts on the training page left the fourth cell as bare background, which
   read as a bar with a piece missing. */
.facts{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.14);margin-top:clamp(30px,3.5vw,44px)}
.fact{padding:22px 18px;text-align:center;background:transparent}
.fact .fv{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:600;color:var(--white);line-height:1}
.fact .fl{font-family:var(--sans);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-bright);margin-top:9px}

/* ---- author ---- */
/* Squared, hairline-framed, faintly desaturated so it sits inside the navy
   ground rather than punching a colour hole in it. The only photograph on the
   page, so it carries the whole "there is a real person here" job. */
.portrait{position:relative;border:1px solid rgba(107,182,216,.34);overflow:hidden}
.portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,30,96,.10) 0%,transparent 38%,rgba(0,8,31,.34) 100%)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.04)}
.author-grid{display:grid;grid-template-columns:.42fr .58fr;gap:clamp(28px,4vw,56px);align-items:start}
.author-body p+p{margin-top:1.05em}

/* ---- faq ---- */
.faq{border-top:1px solid var(--warm-border)}
.faq details{border-bottom:1px solid var(--warm-border)}
.faq summary{
  padding:22px 44px 22px 0;cursor:pointer;list-style:none;position:relative;
  font-weight:700;font-size:1.02rem;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--accent-deep);border-bottom:1.5px solid var(--accent-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 24px;color:var(--grey);font-size:.98rem;line-height:1.65;max-width:70ch}

/* ---- the four layers (the held section's argument, drawn) ---- */
/* The section's whole case is spatial -- "aimed a layer above the one actually
   producing the behaviour" -- so it is drawn as the stack it describes rather
   than left as a clause the reader has to diagram themselves. Hairlines and a
   foil rule per the contract; the only emphasis is the blue-bg fill and glow
   dot on the layer the copy says the tools never reached. */
.layers{margin-top:clamp(30px,3.5vw,44px);max-width:680px}
.layers-k{font-family:var(--sans);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:12px}
.layer{display:grid;grid-template-columns:auto 1fr auto;gap:0 16px;
  align-items:center;background:var(--white);
  border:1px solid var(--warm-border);border-top:0;padding:15px 20px}
.layer:first-of-type{border-top:1px solid var(--warm-border)}
.layer .l-n{font-family:var(--sans);
  font-size:.68rem;font-weight:600;color:var(--accent-deep);letter-spacing:.1em}
.layer .l-t{font-weight:700;font-size:.98rem;color:var(--navy);letter-spacing:.005em}
.layer .l-note{font-family:var(--sans);
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:right}
.layer.l-run{background:var(--blue-bg);position:relative}
.layer.l-run::before{content:"";position:absolute;top:-1px;left:0;right:0;
  height:1px;background:var(--foil-blue)}
.layer.l-run .l-note{color:var(--accent-deep);font-weight:600;
  display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.layer.l-run .l-note::before{content:"";width:6px;height:6px;border-radius:50%;
  flex:0 0 6px;background:var(--blue);box-shadow:0 0 8px var(--blue)}
@media(max-width:640px){
  .layer{grid-template-columns:auto 1fr;row-gap:4px;padding:13px 16px}
  .layer .l-note{grid-column:2;text-align:left;justify-content:flex-start}
}

/* ---- the five-step rail ---- */
/* Promise 05 is the method's spine -- the "5 steps" the facts strip counts --
   and it was a comma list inside a card. Set as a rail, the five names read as
   a process rather than a sentence. Same words, drawn. */
.steps5{margin-top:clamp(12px,1.4vw,18px);background:var(--white);
  border:1px solid var(--warm-border);position:relative;
  padding:clamp(20px,2.2vw,26px)}
.steps5::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-blue)}
.steps5-head{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}
.steps5-head .n{font-family:var(--sans);
  font-size:.72rem;font-weight:600;color:var(--accent-deep);letter-spacing:.1em;
  padding-top:3px}
.steps5-head h3{font-family:var(--sans);font-size:1.04rem;
  font-weight:800;line-height:1.3;color:var(--navy)}
.steps5-head p{grid-column:2;font-size:.95rem;line-height:1.62;color:var(--grey);
  margin-top:6px}
.rail5{list-style:none;margin:22px 0 4px;padding:0;display:flex;position:relative}
.rail5::before{content:"";position:absolute;top:14px;left:10%;right:10%;height:1px;
  background:var(--foil-blue)}
.rail5 li{flex:1;position:relative;text-align:center;padding:0 6px}
.rail5 .r-n{display:inline-block;font-family:var(--sans);
  font-size:.68rem;font-weight:600;color:var(--accent-deep);letter-spacing:.08em;
  background:var(--white);border:1px solid rgba(0,61,191,.4);
  padding:5px 9px;position:relative}
.rail5 .r-t{display:block;margin-top:10px;font-weight:700;font-size:.92rem;
  color:var(--navy);letter-spacing:.005em}
@media(max-width:640px){
  .rail5{flex-direction:column;gap:14px;margin-top:18px}
  .rail5::before{top:8px;bottom:8px;left:16px;right:auto;width:1px;height:auto}
  .rail5 li{text-align:left;padding:0;display:flex;align-items:center;gap:14px}
  .rail5 .r-t{margin-top:0}
}

/* ---- close ---- */
.close-box{text-align:center;max-width:60ch;margin:0 auto}
.close-box h2{margin-bottom:20px}
.close-box .lede{margin-bottom:32px}

/* ---- footer ---- */
footer{background:var(--navy-dark);color:#9FB6CC;padding:52px 0 40px;font-size:.83rem}
footer .fmark{margin-bottom:26px;line-height:0}
footer .fmark img{height:24px;width:auto;display:block}
footer .flinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:24px}
footer a{text-decoration:none;color:#B9CBDC}
footer a:hover{color:var(--white)}
footer .fine{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;flex-direction:column;gap:11px;font-size:.76rem;line-height:1.6;color:#7E97AE}

/* ================= OTO and success: the elevated tier =================
   Same contract, turned up. Every difference from the book pages is sanctioned
   by the manifest rather than invented:
     * GOLD foil rules. The contract reserves gold for prices and premium-tier
       moments, and the $97 training is exactly that. The book pages use blue
       because they are the free tier; gold here is what makes the two read as
       different rungs rather than the same page twice.
     * DARK GLASS PANELS to the manifest's own spec (fill .045, hairline .13,
       inset top highlight). They only work on the navy ground, which is why
       they appear here and not on the ivory book pages.
     * A wider display scale and more air. Nothing new, just more of it. */
.foil-g{height:1px;background:var(--foil-gold);border:0;margin:0}
.glass{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);padding:clamp(24px,3vw,38px)}
.bar{background:var(--abyss);color:#EAF2F8;border-bottom:1px solid rgba(107,182,216,.22)}
.bar .wrap{display:flex;align-items:center;justify-content:center;gap:11px;
  padding:11px 28px;font-family:var(--sans);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#9FB6CC}
.bar .dot{background:var(--gold);color:var(--gold)}
.tier-hero{padding:clamp(54px,6.5vw,104px) 0 clamp(44px,5vw,76px)}
.tier-hero h1{font-size:clamp(1.72rem,3.5vw,2.8rem);max-width:20ch;margin:14px 0 18px}
.tier-hero .lede{max-width:56ch}
.on-dark .tier-hero .eyebrow,.tier-hero.on-dark .eyebrow{color:var(--gold-light)}
.decline{display:inline-block;margin-top:18px;font-size:.85rem;color:#9FB6CC;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(159,182,204,.4);transition:color .3s var(--ease)}
.decline:hover{color:#EAF2F8}
.on-ivory .decline,.on-white .decline{color:var(--muted);
  text-decoration-color:rgba(107,114,128,.4)}
.on-ivory .decline:hover,.on-white .decline:hover{color:var(--navy)}
.ledger{margin-top:clamp(30px,3.4vw,46px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.led{background:#fff;border:1px solid var(--warm-border);
  padding:clamp(20px,2.2vw,26px)}
.led-n{font-family:var(--sans);font-size:.72rem;
  letter-spacing:.16em;color:var(--accent-deep);font-weight:600;
  display:block;margin-bottom:16px}
.led h3{font-family:var(--sans);font-size:1.02rem;
  font-weight:800;color:var(--navy);margin-bottom:9px;letter-spacing:-.005em;
  line-height:1.3}
.led p{font-size:.93rem;line-height:1.6;color:var(--grey)}
@media(max-width:640px){.ledger{grid-template-columns:1fr}}
/* Four cards on the navy rather than four stacked paragraphs. Glass to the
   manifest's spec, a line mark each, and bodies short enough that the grid is
   scannable rather than four more things to read down. */
.icards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(30px,3.4vw,46px)}
.icard{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(24px,2.6vw,34px);position:relative}
.icard .ico{color:var(--blue-bright);margin-bottom:18px;display:block}
.icard-k{display:block;font-family:var(--sans);
  font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue-bright);margin-bottom:9px}
.icard h3{font-family:var(--sans);font-size:1.06rem;
  font-weight:700;color:#fff;margin-bottom:8px;letter-spacing:-.005em}
.icard p{font-size:.95rem;line-height:1.6;color:#B9CBDC}
@media(max-width:760px){.icards{grid-template-columns:1fr}}

/* Three facts as a band rather than three paragraphs in a vertical ledger.
   Hairline-divided, dot markers, one line each: the point lands in six words
   and did not need the explanation underneath it. */
.statbar{display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--warm-border);background:var(--white);
  margin-top:clamp(28px,3.2vw,44px)}
.statbar .sb-i{display:flex;align-items:center;gap:12px;
  padding:clamp(20px,2.2vw,28px) clamp(18px,2vw,26px);
  border-right:1px solid var(--warm-border);
  font-family:var(--sans);font-weight:600;
  font-size:clamp(.92rem,1.1vw,1.02rem);line-height:1.4;color:var(--navy)}
.statbar .sb-i:last-child{border-right:0}
.statbar .dot{flex:0 0 6px}
@media(max-width:820px){.statbar{grid-template-columns:1fr}
  .statbar .sb-i{border-right:0;border-bottom:1px solid var(--warm-border)}
  .statbar .sb-i:last-child{border-bottom:0}}

.price-card{position:relative;background:var(--white);
  border:1px solid var(--warm-border);padding:clamp(30px,3.6vw,52px)}
.price-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-gold)}
.price-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:6px 0 18px}
.price-now{font-family:var(--serif);font-weight:600;
  font-size:clamp(2.4rem,5vw,3.6rem);color:var(--gold-deep);line-height:1}
.price-was{font-family:var(--sans);font-size:1.05rem;
  color:var(--muted);text-decoration:line-through}
.card-on-file{margin-top:26px;padding-top:22px;border-top:1px solid var(--warm-border);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--sans);font-size:.78rem;color:var(--muted)}
.card-on-file strong{color:var(--navy);font-weight:600}
.receipt{background:var(--white);border:1px solid var(--warm-border);
  padding:clamp(24px,2.8vw,34px);position:relative}
.receipt::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--foil-blue)}
.receipt h3{font-family:var(--sans);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin-bottom:16px}
.conf-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);
  align-items:start}
.conf-grid> *{min-width:0;overflow-wrap:anywhere}
.arch-line{margin:22px 0;padding:18px 22px;border-left:2px solid var(--blue-bright);
  background:rgba(255,255,255,.045);font-size:1rem;line-height:1.6;color:#DCE8F2}
@media(max-width:900px){.conf-grid{grid-template-columns:minmax(0,1fr)}}


/* ================= responsive =================
   Last in the sheet on purpose, and widest query first: max-width blocks
   only cascade correctly in descending order, and only override the base
   rules if they come after every one of them. */
@media (max-width:1000px){
  .order-grid,.author-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr .52fr;gap:0 clamp(14px,2.6vw,28px)}
  .hero-media{max-width:none}
  .hero{padding:clamp(22px,4vw,52px) 0 clamp(28px,4.5vw,58px)}
  .hero h1{font-size:clamp(1.6rem,5.6vw,2.4rem);margin:10px 0 12px}
  .tier-hero h1{font-size:clamp(1.45rem,5vw,2.1rem)}
  .hero .lede{font-size:.95rem;line-height:1.5;margin-bottom:16px}
  .cta-under{font-size:.78rem;margin-top:10px}
  .decline{margin-top:12px;font-size:.8rem}
  .sec-head .eyebrow{margin-bottom:9px}
  .rail{position:static}
  /* One column. Flow switches back to rows so the interleaved source order
     stacks as written -- home, its answer, body, its answer, work, its answer
     -- and each pair closes into a single block: the cost card drops its
     bottom border so the want sits flush under the cost it answers, with the
     gap falling between the pairs. */
  .domains{grid-template-columns:1fr;grid-template-rows:none;
    grid-auto-flow:row;row-gap:0}
  .d-cost{border-bottom:0}
  .d-want{margin-bottom:clamp(12px,1.4vw,18px)}
  .d-want:last-child{margin-bottom:0}
  .quotes{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.narrow{padding:0 20px}
  .row-2,.row-3,.express-row{grid-template-columns:1fr}
  /* Two up on a phone whatever the count, so an odd last fact takes the whole
     row rather than sitting beside an empty cell. */
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts>.fact:last-child:nth-child(odd){grid-column:1/-1}
  .promises{grid-template-columns:1fr}
  .promise{gap:0 13px}
  .mirror p{font-size:1.1rem}
  /* The bar keeps all three parts on a phone. The cover shrinks and the mark
     drops to the floor set by its SYSTEMS line; the button carries the rest. */
  /* A centred mark needs equal room either side of it. At 375 the cover is
     56px and the button will not go below ~150px, so centring would put the
     mark through the button. Cover and mark group left instead. */
  .mast .wrap{min-height:64px;gap:10px;grid-template-columns:auto auto 1fr}
  .mark{justify-self:start}
  .mark img{height:40px}
  .mast-book{height:82px;margin-bottom:-30px}
  /* Two lines here would make the sticky bar taller than the cover it
     carries, so the label holds one line and the padding gives way. */
  .btn-sm{padding:11px 13px;font-size:.76rem;gap:8px;white-space:nowrap}
  .hero .lede{font-size:.88rem}
  /* The headline shares the top band with the cover; the lede, the button and
     the small print run the full width underneath, so the cover gets real
     size and "Grab your free copy" still lands above the fold. */
  .hero-grid{grid-template-columns:1fr 40%;
    grid-template-areas:"head media" "body body";gap:0 16px}
  /* A phone headline set at desktop proportions dwarfs the cover beside it. */
  .hero h1{font-size:clamp(1.2rem,5.2vw,1.55rem);margin:8px 0 0}
  .hero-head{align-self:center}
  .hero-body{margin-top:16px}
  .hero-media{align-self:center}
  .hero h1{max-width:none}
}
@media (max-width:430px){
  .hero-grid{grid-template-columns:1fr 42%;gap:0 14px}
  .hero h1{font-size:clamp(1.15rem,5.4vw,1.4rem)}
  /* Sized so the longest label on these pages, "Add the Book Training",
     stays on one line. */
  .btn{padding:14px 18px;font-size:.86rem;gap:9px}
  .mast-book{height:74px;margin-bottom:-26px}
  .btn-sm{padding:10px 10px;font-size:.71rem;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}