/* Master Chim site: the shared look (v4, approved 2026-10-10).
   Split out of Drafts/mockups/v4-homepage.html in Wave 0. Every rule here is copied from that file unchanged,
   in the same order. The one exception is the last block in this file, added in Wave 1: the skip link,
   the honeypot wrapper and the screen-reader-only helper.

   How a page uses it: the page's head links this file first (href="/assets/site.css"), then puts the page's own
   rules in a style block after it, so the page's rules win a tie.

   Watch for one thing. Because the page's rules come last, a page rule beats a tablet or phone rule in this file
   whenever the two are the same strength. Example: .sec gets padding-block:80px below 900 wide in this file.
   A page rule .my-band{padding-block:56px} on an element that is also .sec wins at every width, phones included.
   When a page needs the shared phone value back, it says so in its own @media block. The homepage does this
   once, for .band-proof and .closer.

   Four colors only: Deep Slate Olive, Naples Yellow, Peach Red, Neutral Gray, and transparency of them.
   Headlines are Fraunces, body and labels are Montserrat (both loaded by the page from Google Fonts).

   Contents, in order: colors and sizes, reset, wrap, type, chips and number badges, buttons and the FUD line,
   cards and photo frames, bands, fade-up, header and menu, the highlight word, form card and fields,
   testimonial cards, doodles, video cards, step tables, FAQ rows, the Peach Red band, footer,
   then the tablet and phone rules for all of them. */

/* ---------- the four colors (Sanzo Wada 303) and the sizes every page shares ---------- */
:root{
  --ink:#253122;
  --paper:#fbe6a0;
  --red:#f15a30;
  --gray:#b6bfc1;
  --paper-deep:linear-gradient(rgba(37,49,34,.05),rgba(37,49,34,.05));
  --line-dark:rgba(251,230,160,.2);
  --shadow-dark:rgba(251,230,160,.2);
  --gut:48px;
  --wrapW:min(1200px, 100vw - 96px);
  --nav-h:78px;
  --vh:100vh;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Montserrat", system-ui, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:500;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0}
figure{margin:0}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.nowrap{white-space:nowrap}

/* ---------- the wrap ---------- */
.wrap{width:min(1200px, 100% - 2*var(--gut));margin-inline:auto}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 72;letter-spacing:-.018em;line-height:1;text-wrap:balance}
.h2{font-size:clamp(34px, 3.9vw, 58px)}
.title{font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 72;letter-spacing:-.01em;line-height:1.12}
.italic-line{font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"opsz" 36;letter-spacing:0;word-spacing:.04em;line-height:1.28}
.lead{font-size:20px;line-height:1.6}
.on-dark .red-word{color:var(--red)}
.red-word{white-space:nowrap}

/* ---------- chips, number pills, number badges ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;border:2px solid currentColor;border-radius:999px;padding:7px 16px 6px;font:700 16px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;width:fit-content;max-width:100%}
.chip--sm{font-size:16px;padding:5px 13px 4px;letter-spacing:.08em}
.chip--paper{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.num-pill{display:inline-block;background:var(--ink);color:var(--paper);border-radius:999px;padding:3px 12px;font:800 16px/1.4 var(--sans);letter-spacing:.06em}
.badge{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--red);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:800 19px/1 var(--sans);letter-spacing:.02em;flex:none}
.on-dark .badge{box-shadow:3px 3px 0 var(--shadow-dark)}
.br-m{display:none}

/* ---------- buttons, the button row, the FUD line ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--red);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:15px 30px 14px;font:800 19px/1.2 var(--sans);text-decoration:none;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;text-align:center}
.btn--caps{text-transform:uppercase;letter-spacing:.07em}
.btn svg{width:22px;height:22px;flex:none}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.on-dark .btn{box-shadow:4px 4px 0 var(--shadow-dark)}
.on-dark .btn:hover{box-shadow:2px 2px 0 var(--shadow-dark)}
.on-dark .btn:active{box-shadow:0 0 0 var(--shadow-dark)}
.cta-row{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:64px;text-align:center}
.cta-row .fud{max-width:520px}
.fud{font-size:16px;line-height:1.5;font-weight:500}
.on-dark .fud{color:var(--gray)}

/* ---------- cards, photo frames, photo tilts ---------- */
.card{background:var(--paper);border:2px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink)}
.dcard{background:rgba(251,230,160,.04);border:1.5px solid var(--line-dark);border-radius:18px}
.frame{border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:7px 7px 0 var(--ink);background:var(--ink)}
.frame img{width:100%;height:100%;object-fit:cover}
.on-dark .frame{border-color:var(--paper);box-shadow:8px 8px 0 var(--shadow-dark)}
.tilt-l{rotate:-1.6deg}
.tilt-r{rotate:1.4deg}
.ic{width:28px;height:28px;flex:none}
.mph .frame{aspect-ratio:var(--ar,4/3)}
.mph img{object-position:var(--op,50% 30%)}
.m-only{display:none}

/* ---------- bands: paper (.sec), deeper paper (.sec--deep), olive (.on-dark). Peach Red (.closer-band) is further down ---------- */
.sec{padding-block:120px;border-top:2px solid var(--ink);position:relative}
.on-dark{background:var(--ink);color:var(--paper)}
.sec--deep{background:var(--paper-deep), var(--paper)}
.stack-head .chip{margin-bottom:22px}

/* ---------- fade-up (site.js adds .motion to <html> and .in to each .reveal) ---------- */
.motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.motion .reveal.in{opacity:1;transform:none}

/* ---------- header and menu ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav__in{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);justify-self:start;min-width:0}
.brand__head{height:54px;width:auto;flex:none}
.brand__word{width:144px;height:auto;flex:0 1 auto;min-width:0}
.nav .btn{padding:12px 24px 11px}
.nav__cta{justify-self:end;white-space:nowrap}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a{position:relative;display:inline-flex;align-items:center;padding:9px 0;font:700 16px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .22s ease}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__links a:focus-visible,.menu-btn:focus-visible,.brand:focus-visible,.nav .btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.nav__links a:focus-visible,.brand:focus-visible{border-radius:6px}
.nav__arrow{display:none}
.menu-btn{display:none;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:14px 20px 13px;font:800 16px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .15s ease, color .15s ease}
.menu-btn:hover{background:rgba(37,49,34,.1)}
.menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.menu-btn:focus-visible{border-radius:999px}

/* below 1024: the links fold into the MENU pill */
@media (max-width:1023px){
  .nav__in{display:flex;gap:12px}
  .brand{flex:0 1 auto}
  .menu-btn{display:inline-flex;margin-left:auto;flex:none}
  .nav__cta{flex:none}
  /* scripts on: a card panel under the header */
  .js .nav__links{display:none;position:absolute;top:calc(100% + 12px);right:var(--gut);width:min(360px, 100% - 2*var(--gut));flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:2px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink);overflow:hidden}
  .js .nav--open .nav__links{display:flex}
  .js .nav__links a{justify-content:space-between;min-height:58px;padding:14px 22px;font-weight:800;font-size:19px}
  .js .nav__links a + a{border-top:2px solid rgba(37,49,34,.16)}
  .js .nav__links a::after{display:none}
  .js .nav__links a:hover,.js .nav__links a:focus-visible{background:var(--red)}
  .js .nav__links a:focus-visible{outline-offset:-5px;border-radius:14px}
  .js .nav__arrow{display:block;width:22px;height:22px;flex:none}
  /* scripts off: no button, the four links sit in a row under the logo */
  html:not(.js) .nav{position:static}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .nav__in{height:auto;min-height:var(--nav-h);flex-wrap:wrap;row-gap:0;padding-top:8px}
  html:not(.js) .nav__cta{margin-left:auto}
  html:not(.js) .nav__links{order:3;flex:1 1 100%;flex-wrap:wrap;justify-content:space-between;gap:0 16px;margin-top:8px;border-top:2px solid rgba(37,49,34,.16)}
  html:not(.js) .nav__links a{padding:13px 0;min-height:44px}
}

/* ---------- the highlighted words in a headline: ONE style on every page (Justin, 2026-10-11: "one highlight
   style for the entire site", and of five drawn choices, the red letters with a dark outline, with the shadow
   "about a third shorter" and never apart from the letter). Peach Red letters, a 2px olive outline, and a hard
   shadow that reaches 2px past the outline. The dark copy of the letters is drawn at every whole pixel between
   the outline and the end of the shadow, so no paper shows between a thin stroke and its shadow.
   .hl, .swipe, .red-word and .pg__amt are four names for this one style (the pages were built with all four).
   Over an olive band (.on-dark) the letters are plain Peach Red: an olive outline can't be seen there. ---------- */
:root{--hl-shadow:-2px -2px 0 var(--ink),-2px -1px 0 var(--ink),-2px 0px 0 var(--ink),-2px 1px 0 var(--ink),-2px 2px 0 var(--ink),-1px -2px 0 var(--ink),-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),-1px 2px 0 var(--ink),-1px 3px 0 var(--ink),0px -2px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),0px 3px 0 var(--ink),0px 4px 0 var(--ink),1px -2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),1px 3px 0 var(--ink),1px 4px 0 var(--ink),2px -2px 0 var(--ink),2px -1px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),2px 2px 0 var(--ink),2px 3px 0 var(--ink),2px 4px 0 var(--ink),3px -1px 0 var(--ink),3px 0px 0 var(--ink),3px 1px 0 var(--ink),3px 2px 0 var(--ink),3px 3px 0 var(--ink),3px 4px 0 var(--ink),4px 0px 0 var(--ink),4px 1px 0 var(--ink),4px 2px 0 var(--ink),4px 3px 0 var(--ink),4px 4px 0 var(--ink)}
/* The wider word space keeps two outlined words from running together ("Work With Me" read as one word without it).
   It costs about 5px a space. Checked at 27 screen sizes on all nine pages, 2026-10-11: one headline wraps differently,
   the Inner Circle's top headline from 1440 wide up (five lines, was four), with its button still on the first screen. */
.hl,.swipe,.red-word,.pg__amt{color:var(--red);white-space:nowrap;word-spacing:.1em;text-shadow:var(--hl-shadow)}
.on-dark .hl,.on-dark .swipe,.on-dark .red-word,.on-dark .pg__amt{text-shadow:none;word-spacing:normal}
/* a paper card inside an olive band is paper again, so the outline and shadow come back (the price on the Pressure Process page) */
.on-dark .card .hl,.on-dark .card .swipe,.on-dark .card .red-word,.on-dark .card .pg__amt{text-shadow:var(--hl-shadow)}

/* ---------- form card and fields ---------- */
.formcard{margin-top:28px;padding:24px 26px 22px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.field-label{display:block;font:700 17px/1.3 var(--sans);margin-bottom:8px}
.field{width:100%;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:13px 16px;font:500 18px/1.45 var(--sans);color:var(--ink);box-shadow:inset 3px 3px 0 rgba(37,49,34,.08)}
.field:focus{outline:none;border-color:var(--ink);box-shadow:inset 3px 3px 0 rgba(37,49,34,.08), 0 0 0 3px var(--red)}
textarea.field{resize:vertical;min-height:84px;display:block}
.form-row{display:flex;gap:14px;align-items:flex-end;margin-top:16px}
.form-row__email{flex:1 1 220px;min-width:0}
.form-row .btn{flex:none;padding-inline:24px}
.formcard .fud{margin-top:14px}

/* ---------- testimonial cards: the small card (.minicard), avatars, the name line (.who) ---------- */
.minicard{margin-top:26px;padding:18px 20px;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;box-shadow:5px 5px 0 var(--ink);max-width:640px}
.avatar{width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;background:var(--paper)}
.on-dark .avatar{border-color:var(--paper)}
.minicard__quote{font-size:16px;line-height:1.55;margin:0}
.who{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.who__name{font-weight:800;font-size:16px}
.who__title{font-size:16px}
.on-dark .who__title{color:var(--gray)}

/* ---------- doodles: the mountain (its drawing is inline in the page) ---------- */
.doodle-mtn{position:absolute;right:-34px;top:-70px;width:138px;z-index:2}

/* ---------- video cards and the play button ---------- */
.vcard{overflow:hidden;display:flex;flex-direction:column;box-shadow:7px 7px 0 var(--shadow-dark)}
.vcard__media{position:relative;aspect-ratio:4/3;background:var(--ink);border-bottom:1.5px solid var(--line-dark);overflow:hidden}
.vcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.vcard__media.is-playing video{object-fit:contain}
.vcard__media .chip--paper{position:absolute;top:14px;left:14px;z-index:2;font-size:16px;padding:5px 12px 4px;letter-spacing:.06em;line-height:1.3;max-width:calc(100% - 28px)}
.vcard__media.is-playing .chip--paper{display:none}
.play{display:none}
.js .play{display:grid;place-items:center;position:absolute;left:18px;bottom:18px;width:80px;height:80px;border-radius:50%;background:var(--red);border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);cursor:pointer;z-index:2;transition:transform .12s ease, box-shadow .12s ease;padding:0}
.js .play:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.js .play:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.play svg{width:30px;height:30px;margin-left:5px}
.play[hidden]{display:none!important}
.vcard__body{padding:24px 24px 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.vcard__h{font-size:26px;color:var(--paper)}
.vcard__q{font-size:17px;line-height:1.6}
.vcard .who{margin-top:auto;padding-top:8px}

/* ---------- step tables: a cell (.tcell). The three-across table (.table3) is further down ---------- */
.tcell{padding:28px 30px 32px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);display:flex;flex-direction:column;gap:14px}
.tcell .title{font-size:25px;margin-top:8px}
.tcell p{font-size:18px;line-height:1.55}

/* ---------- doodles: the signpost (its drawing is inline in the page) ---------- */
.sign{position:absolute;width:118px;right:24px;bottom:0}

/* ---------- testimonial cards: the praise card on olive (.pcard2) ---------- */
.pcard2{padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--ink);border:1.5px solid var(--line-dark);border-radius:16px}
.pcard2__top{display:flex;gap:14px;align-items:center}
.pcard2 .avatar{width:60px;height:60px;flex:none}
.pcard2 .who__name{color:var(--paper)}
.pcard2__title{font-size:16px;color:var(--gray);line-height:1.4}
.pcard2__q{font-family:var(--serif);font-weight:500;font-style:italic;font-variation-settings:"opsz" 36;font-size:20px;line-height:1.45;margin:0}

/* ---------- testimonial cards: the wall card (.wcard), with or without a video on top ---------- */
.wcard{padding:24px}
.wcard__top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.wcard__top .avatar{flex:none}
.wcard__h{font-size:24px}
.wcard__q{margin:12px 0 0;font-size:17px;line-height:1.6}
.wcard .who{margin-top:16px}
.wcard .chip{margin-top:14px}
.wcard--video{padding:0;overflow:hidden}
.wcard--video .vcard__media{border-bottom:2px solid var(--ink);aspect-ratio:4/5}
.wcard--video .wcard__in{padding:22px 24px 24px}
.wcard--video .wcard__q{margin-top:10px}

/* ---------- step tables: three across on olive (.table3) ---------- */
.table3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--line-dark);border-radius:20px;overflow:hidden;background:rgba(251,230,160,.035)}
.table3 .tcell{border-right:2px solid var(--line-dark);border-bottom:0}
.table3 .tcell:last-of-type{border-right:0}
.table3 .title{font-size:26px}
.table3 p{color:var(--paper)}

/* ---------- FAQ rows (plain <details>, no script) ---------- */
.qa{border-top:2px solid var(--ink)}
.qa details{border-bottom:2px solid var(--ink)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 48;font-size:23px;line-height:1.3;letter-spacing:0}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .qa__arr{background:var(--red)}
.qa__arr{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;flex:none;transition:transform .25s ease, background .15s ease}
.qa__arr svg{width:16px;height:16px}
.qa details[open] .qa__arr{transform:rotate(180deg);background:var(--red)}
.qa__a{padding:0 60px 26px 2px;font-size:18px;line-height:1.65}

/* ---------- bands: Peach Red (.closer-band) and its headline sizes ---------- */
.closer-band{background:var(--red);color:var(--ink);padding-block:110px 104px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden}
.closer-band h2{font-size:clamp(42px, 5.6vw, 86px)}
.closer-band .italic-line{margin-top:30px;font-size:clamp(24px, 2.2vw, 30px);max-width:820px;text-wrap:balance}

/* ---------- doodles: the figurine standing on a ground line, with a cloud and birds ---------- */
.figure-scene{position:relative;margin-top:24px;height:470px}
.figure-scene .fig{position:absolute;left:40px;bottom:34px;height:400px;width:auto}
.figure-scene .ground{position:absolute;left:0;right:0;bottom:0;width:100%;height:46px}
.figure-scene .fcloud{position:absolute;width:132px;right:0;top:6px}
.figure-scene .fbird{position:absolute;width:40px}

/* ---------- footer ---------- */
.foot{padding-block:84px 40px;border-top:2px solid var(--ink)}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:start;padding-bottom:56px;border-bottom:1.5px solid var(--line-dark)}
.foot__logo{display:flex;align-items:center;gap:16px;margin:0}
.foot__head{height:60px;width:auto}
.foot__word{height:38px;width:auto}
.foot__tag{margin-top:18px;font-size:19px;color:var(--paper);max-width:440px}
.foot__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.foot__links a{display:inline-block;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--line-dark);border-radius:8px;padding:8px 14px}
.foot__links a:hover{border-color:var(--paper)}
.foot__copy{padding-top:28px;font-size:16px;color:var(--gray)}

/* ---------- the real screen height on phones ---------- */
@supports (height:100svh){:root{--vh:100svh}}

/* ===================== responsive ===================== */
@media (max-height:820px) and (min-width:900px){
  :root{--nav-h:70px}
  .field-label{margin-bottom:6px}
  textarea.field{height:58px;min-height:58px}
  .formcard{margin-top:16px;padding:16px 24px 14px}
  .form-row{margin-top:10px}
  .formcard .fud{margin-top:10px}
}
@media (max-width:1100px){
  .form-row{flex-wrap:wrap}
  .form-row .btn{flex:1 1 100%}
  .figure-scene .fcloud{width:104px;top:0}
}
@media (max-width:899px){
  :root{--gut:20px;--nav-h:66px}
  body{font-size:17px}
  .sec{padding-block:80px}
  .m-only{display:block}
  .d-only{display:none}
  .foot__top{grid-template-columns:1fr;gap:30px}
  .table3{grid-template-columns:1fr}
  .table3 .tcell{border-right:0;border-bottom:2px solid var(--line-dark)}
  .table3 .tcell:last-of-type{border-bottom:0}
  .sign{width:100px;right:12px}
  .doodle-mtn{right:-6px;top:-58px;width:112px}
  .foot__links{justify-content:flex-start}
  .mph.m-only{margin-block:6px 34px}
}
@media (max-width:599px){
  :root{--nav-h:62px}
  body{font-size:16px}
  .sec{padding-block:64px}
  .nav__in{gap:6px}
  .brand{gap:6px}
  .brand__head{height:38px}
  .brand__word{width:110px}
  .menu-btn{font-size:15px;letter-spacing:.04em;padding:12px 9px 11px}
  .nav .btn{padding:10px 10px 9px;font-size:19px;letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
  html:not(.js) .nav__links{gap:0 8px}
  html:not(.js) .nav__links a{font-size:14px;letter-spacing:.04em}
  .chip,.chip--sm{font-size:15px;padding:6px 13px 5px;letter-spacing:.06em}
  .br-m{display:inline}
  .chip--wrap{border-radius:16px;line-height:1.3}
  :root{--hl-shadow:-1px -1px 0 var(--ink),-1px 0px 0 var(--ink),-1px 1px 0 var(--ink),0px -1px 0 var(--ink),0px 1px 0 var(--ink),0px 2px 0 var(--ink),1px -1px 0 var(--ink),1px 0px 0 var(--ink),1px 1px 0 var(--ink),1px 2px 0 var(--ink),2px 0px 0 var(--ink),2px 1px 0 var(--ink),2px 2px 0 var(--ink)}
  .formcard{margin-top:16px;padding:16px 16px 18px;box-shadow:5px 5px 0 var(--ink)}
  .field-label{font-size:15px;margin-bottom:6px}
  .field{font-size:16px;padding:10px 13px}
  textarea.field{min-height:62px;height:62px}
  .form-row{margin-top:12px;gap:12px}
  .form-row .btn{padding:12px 16px 11px}
  .formcard .fud{font-size:15px;margin-top:12px}
  .minicard{grid-template-columns:48px 1fr;padding:16px;gap:12px}
  .minicard .avatar{width:48px;height:48px}
  .minicard__quote,.who__name,.who__title{font-size:15px}
  .minicard .chip{letter-spacing:.02em;padding:5px 10px 4px;border-radius:14px}
  .num-pill{font-size:15px}
  .h2{font-size:clamp(30px, 8.4vw, 38px)}
  .lead{font-size:17px}
  .fud{font-size:15px}
  .cta-row{margin-top:44px}
  .wcard--video .vcard__media{aspect-ratio:1/1}
  .vcard__h{font-size:23px}
  .vcard__q{font-size:16px}
  .vcard__body{padding:20px 20px 24px}
  .vcard__media .chip--paper{font-size:15px}
  .tcell{padding:24px 22px 26px}
  .tcell .title{font-size:23px}
  .tcell p{font-size:16px}
  .pcard2__q{font-size:18px}
  .wcard__q{font-size:16px}
  .qa summary{font-size:19px;padding:18px 0}
  .qa__a{padding:0 0 22px;font-size:16px}
  .closer-band{padding-block:72px 68px}
  .closer-band h2{font-size:clamp(36px, 10vw, 46px)}
  .closer-band .italic-line{font-size:24px}
  .figure-scene{height:380px}
  .figure-scene .fig{height:330px;left:12px;bottom:28px}
  .figure-scene .fcloud{width:96px;right:0;top:0}
  .foot__head{height:50px}
  .foot__word{height:31px}
  .foot__logo{gap:12px}
  .foot__tag{font-size:17px}
  .foot__links a{font-size:15px}
  .foot__copy{font-size:15px}
}
@media (max-width:374px){
  :root{--nav-h:56px}
  .field-label{font-size:14px}
  .formcard{margin-top:12px}
  .form-row{margin-top:10px;gap:10px}
  .form-row .btn{padding:9px 14px 8px}
  .nav .btn{padding-top:9px;padding-bottom:8px}
  textarea.field{min-height:46px;height:46px}
  .formcard{padding:12px 14px 16px}
}
@media (min-width:414px) and (max-width:599px){
  .nav__in{gap:8px}
  .brand{gap:8px}
  .brand__head{height:40px}
  .menu-btn{letter-spacing:.06em;padding-left:12px;padding-right:12px}
  .nav .btn{padding-left:14px;padding-right:14px}
}
@media (max-width:389px){
  .brand__head{display:none}
}
@media (min-width:368px) and (max-width:389px){
  .menu-btn{padding-left:11px;padding-right:11px}
  .nav .btn{padding-left:12px;padding-right:12px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.play,.qa__arr,.menu-btn,.nav__links a::after{transition:none}
}

/* ===================== added in Wave 1 (not in the v4 mockup) =====================
   Three helpers every page uses. None of them shows on a page until the skip link gets the keyboard focus.
     .skip-link  the first link in the body: "Skip to content". It sits above the top edge until it is focused.
     .hp         the wrapper of a form's honeypot field (a box people never see and spam programs fill in)
     .sr-only    words for screen readers only
   Keep the z-index on :focus only. With a z-index on the resting link, Chrome layers the page differently and
   draws one tilted photo on the homepage a hair differently (25,448 pixels at 1440 wide in compare-wave0.js). */
.skip-link{position:absolute;left:12px;top:-120px;background:var(--red);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:12px 22px 11px;font:800 19px/1.2 var(--sans);text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.skip-link:focus{top:12px;z-index:100;outline:3px solid var(--ink);outline-offset:3px}
main:focus{outline:none}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.hp input{background:transparent;border:0;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===================== added in Wave 3 (not in the v4 mockup): the pieces every inner page shares =====================
   Nothing above this line was changed or moved in Wave 3. Everything from here down is new. It is here so the inner
   pages (Inner Circle apply, Pressure Process apply, the page after the Reframe answer, Programs, About, Content,
   Contact) can all be built from this one file. Only the Wave 3 builder edits this file. Later waves use these
   classes and put anything extra in their own page stylesheet.

   PART A. New components. Each one has its own block, with its tablet and phone rules right under it.
     A1   .btn--ink  .btn--line  .btn--sm      three more buttons
     A2   .ihero                               the inner-page hero with a framed photo
     A3   .numband                             the three-number band
     A4   .ncards  .ncard                      the plain numbered card row
     A5   .fit                                 the two-card checklist
     A6   .pg                                  the price and guarantee pair
     A7   .offers  .offer                      the product card row
     A8   .quotes  .quote                      the quote card grid
     A9   .stable                              the step table on a paper band, and with four or six cells
     A10  .lform                               the long form inside the form card
     A11  .apply                               a long form with a picture rail beside it
     A12  .on-dark .wcard, .vgrid .wcard       a wall card sitting on an olive band
     A13  .nav                                 one line that keeps the header its own color
     A14  main > .sec:first-child              a band right under the header or the Peach Red band has no doubled line
     A15  .formcard--stack                     the form card with the email box above a full-width button
     A16  .doodle-host                         a place for the mountain or the signpost doodle
     A17  .stack-head                          a chip, a headline and a paragraph, one under the other
     A18  .checks--plain                       the check list without the closer's bottom line
     A19  .dlist  .dnum  .callout              numbered dark cards, and the Peach Red callout

   PART B. The homepage's own section layouts, copied rule for rule under the homepage's own class names, so an inner
     page can use a homepage section's markup as it is (for example "the homepage's Results band"). The homepage
     keeps its own copy of these rules in its style block. The two copies are the same, so the homepage does not change.

   One thing to watch, the same one the top of this file describes. These rules come after the shared tablet and
   phone rules above, so a base rule here beats a shared phone rule of the same strength. That is why each component
   below states its own tablet and phone values. */

/* ---------- A1. three more buttons ----------
   .btn--ink   the olive pill, for a button that sits on a Peach Red band. Use the #i-arrow-c arrow in it.
   .btn--line  the outline pill, for a second, quieter link ("See the Pressure Process"). Works on paper and on olive.
               Use the #i-arrow-c arrow in it, which takes the color of the words.
   .btn--sm    a smaller pill. Add it to either of the two above, or to .btn. On the Peach Red .btn it only tightens
               the padding and keeps the words at 19px bold, because olive on Peach Red may not be smaller than that.
               On the outline pill the words go to 17px. */
.btn--ink{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 rgba(37,49,34,.34)}
.btn--ink:hover{box-shadow:2px 2px 0 rgba(37,49,34,.34)}
.btn--ink:active{box-shadow:0 0 0 rgba(37,49,34,.34)}
.btn--ink:focus-visible{outline-color:var(--ink)}
.btn--line{background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.btn--line:hover{background:var(--paper-deep), var(--paper);box-shadow:1px 1px 0 var(--ink)}
.btn--line:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.on-dark .btn--line{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:3px 3px 0 var(--shadow-dark)}
.on-dark .btn--line:hover{background:var(--paper);color:var(--ink);box-shadow:1px 1px 0 var(--shadow-dark)}
.on-dark .btn--line:active{box-shadow:0 0 0 var(--shadow-dark)}
.btn--sm{padding:11px 20px 10px;gap:10px}
.btn--sm svg{width:20px;height:20px}
.btn--line.btn--sm{padding:12px 20px 11px;font-size:17px}
.btn--line.btn--sm svg{width:19px;height:19px}

/* ---------- A2. the inner-page hero with a framed photo (.ihero) ----------
   Two columns on paper: the words on the left, a framed, tilted photo on the right, and a proof card under the words.
   Set the photo's shape and crop on the figure: style="--ar:20/23; --op:24% 50%; --ar-m:16/10; --op-m:30% 40%"
   (--ar and --op are for desktop, --ar-m and --op-m for tablets and phones).
   .swipe marks a few words of the headline with the site's one highlight style (see ".hl"). Use it once. */
.ihero{position:relative;overflow:hidden;padding-block:40px 96px}
.ihero__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 64px;align-items:start}
.ihero__copy{grid-column:1;grid-row:1;min-width:0;position:relative;z-index:2}
.ihero__h1{font-size:clamp(38px, 3.4vw, 48px);line-height:1.03;margin:20px 0 16px}
.ihero__lede{font-size:19px;line-height:1.55;max-width:640px;text-wrap:pretty}
.ihero__cta{margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ihero__cta .fud{max-width:580px}
.ihero__note{font-size:17px;font-weight:700;line-height:1.45}
.ihero__photo{grid-column:2;grid-row:1 / span 2;position:relative;margin:8px 0 0}
.ihero__photo .frame{aspect-ratio:var(--ar, 20/23)}
.ihero__photo img{object-position:var(--op, 50% 30%)}
.ihero__proof{grid-column:1;grid-row:2;max-width:640px;margin-top:22px}
.ihero__doodle{position:absolute;pointer-events:none;z-index:2}
.ihero__cloud{width:120px;left:-52px;top:-26px}
.ihero__bird-a{width:40px;right:30px;top:-40px}
.ihero__bird-b{width:30px;right:84px;top:-18px}
/* .swipe used to draw a Peach Red bar across the lower part of the words. It is now the one highlight style (see ".hl"). */
@media (max-height:820px) and (min-width:900px){
  .ihero{padding-top:28px}
  .ihero__h1{font-size:clamp(36px, min(3.4vw, 6vh), 48px);margin:14px 0 12px}
  .ihero__lede{font-size:18px}
  .ihero__cta{margin-top:18px;gap:12px}
}
@media (max-width:1100px){
  .ihero__grid{gap:0 44px}
  .ihero__cloud{width:100px;left:-38px}
}
@media (max-width:899px){
  .ihero{padding-block:28px 76px}
  .ihero__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .ihero__copy,.ihero__photo,.ihero__proof{grid-column:1;grid-row:auto}
  .ihero__h1{font-size:clamp(34px, 5.5vw, 48px)}
  .ihero__lede{max-width:none}
  .ihero__photo{margin-top:34px}
  .ihero__photo .frame{aspect-ratio:var(--ar-m, 16/10)}
  .ihero__photo img{object-position:var(--op-m, var(--op, 50% 30%))}
  .ihero__proof{max-width:none;margin-top:30px}
  .ihero__cloud{left:auto;right:-14px;top:-34px}
  .ihero__bird-a,.ihero__bird-b{display:none}
}
@media (max-width:599px){
  .ihero{padding-block:18px 60px}
  .ihero__h1{font-size:clamp(26px, 7.75vw, 34px);margin:14px 0 12px}
  .ihero__lede{font-size:16px;line-height:1.5}
  .ihero__cta{margin-top:18px;gap:12px;align-items:stretch}
  .ihero__note{font-size:16px}
  .ihero__photo{margin-top:28px}
  .ihero__cloud{width:84px;right:-10px;top:-28px}
}
@media (max-width:374px){
  .ihero{padding-top:14px}
  .ihero__h1{margin:12px 0 10px}
  .ihero__lede{font-size:15px;line-height:1.45}
  .ihero__cta{margin-top:14px}
}

/* ---------- A3. the three-number band (.numband) ----------
   An olive band. Three cells in one outlined table: a big Peach Red number and a line under it. The homepage's own
   number band looks the same; this one also takes long lines, and on phones it puts the number beside its line.
   Markup: section.sec.on-dark.numband > .wrap > .numband__grid > .numband__cell > .numband__n + p.numband__t */
.numband{padding-block:72px}
.numband__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--line-dark);border-radius:22px;background:rgba(251,230,160,.035)}
.numband__cell{padding:38px 26px 36px;text-align:center}
.numband__cell + .numband__cell{border-left:2px solid var(--line-dark)}
.numband__n{font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 72;color:var(--red);font-size:clamp(52px, 4.9vw, 80px);line-height:1;letter-spacing:-.025em;white-space:nowrap}
.numband__t{margin:14px auto 0;max-width:310px;font-size:19px;font-weight:600;line-height:1.4;color:var(--paper);text-wrap:balance}
@media (max-width:899px){
  .numband{padding-block:60px}
  .numband__cell{padding:30px 18px 28px}
  .numband__t{font-size:17px}
}
@media (max-width:760px){
  .numband{padding-block:48px}
  .numband__grid{grid-template-columns:minmax(0,1fr)}
  .numband__cell{display:grid;grid-template-columns:108px minmax(0,1fr);gap:4px 16px;align-items:center;text-align:left;padding:20px 20px 20px 12px}
  .numband__cell + .numband__cell{border-left:0;border-top:2px solid var(--line-dark)}
  .numband__n{font-size:50px;text-align:center}
  .numband__t{margin:0;max-width:none;font-size:17px;text-wrap:pretty}
}
@media (max-width:374px){
  .numband__cell{grid-template-columns:92px minmax(0,1fr);gap:4px 12px;padding:18px 14px 18px 8px}
  .numband__n{font-size:40px}
  .numband__t{font-size:16px}
}

/* ---------- A4. the plain numbered card row (.ncards) ----------
   The homepage's "What happens after you type" card row without the phones: a number pill, a title, a few words,
   and a button if the card needs one. Four across by default. For three across: style="--cols:3".
   Markup: .ncards > article.card.ncard > span.num-pill + h3.title.ncard__h + p.ncard__p (+ a.btn)
   On an olive band use .dcard in place of .card. */
.ncards{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:24px;align-items:stretch}
.ncard{padding:22px 22px 26px;display:flex;flex-direction:column;gap:14px}
.ncard .num-pill{align-self:flex-start}
.ncard__h{font-size:23px;line-height:1.16}
.ncard__p{font-size:17px;line-height:1.55}
.ncard .btn{margin-top:auto;align-self:flex-start}
@media (max-width:1180px){
  .ncards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .ncards{grid-template-columns:minmax(0,1fr);gap:18px}
  .ncard{padding:18px 18px 22px;gap:12px;box-shadow:5px 5px 0 var(--ink)}
  .ncard__h{font-size:21px}
  .ncard__p{font-size:16px}
}

/* ---------- A5. the two-card checklist (.fit) ----------
   Two cards side by side. The first is a raised paper card with Peach Red check circles (#i-check). The second is a
   flat, deeper paper card with olive cross circles (#i-cross). .fit__after is the line under the cards, with room
   for an outline link.
   Markup: .fit > .card.fit__card.fit__card--yes > h3.title.fit__h + ul.fit__list > li > svg.ic + span
           .fit > .card.fit__card.fit__card--no  (the same, with #i-cross)
           p.fit__after > span + a.btn.btn--line.btn--sm */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:stretch}
.fit__card{padding:30px 32px 22px}
.fit__card--no{background:var(--paper-deep), var(--paper);box-shadow:none}
.fit__h{font-size:28px;margin-bottom:14px}
.fit__list{list-style:none;margin:0;padding:0}
.fit__list li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;font-size:19px;font-weight:600;line-height:1.45;border-top:2px solid rgba(37,49,34,.2)}
.fit__list li:first-child{border-top-color:var(--ink)}
.fit__list .ic{margin-top:1px}
.fit__after{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;font-size:20px;font-weight:600;line-height:1.45}
@media (max-width:760px){
  .fit{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:599px){
  .fit__card{padding:22px 20px 14px}
  .fit__card--yes{box-shadow:5px 5px 0 var(--ink)}
  .fit__h{font-size:24px;margin-bottom:10px}
  .fit__list li{font-size:17px;gap:12px;padding:13px 0}
  .fit__after{margin-top:28px;font-size:17px}
}

/* ---------- A6. the price and guarantee pair (.pg) ----------
   Two cards side by side: the price on a paper card, the guarantee on a Peach Red card with the seal doodle (#d-seal).
   Add .pg--photo and a third child, figure.mph.pg__photo, for a framed photo beside them.
   .pg__amt marks an amount inside the price headline (the site's one highlight style, see ".hl"). .pg__box is a bordered box for one more line
   (the seats line on the Pressure Process page). .pg__after is the line under the cards.
   Olive words on Peach Red stay at 22px or larger here, as the color rules ask.
   Markup: .pg > .card.pg__price > p.chip + h2.display.pg__h
           .pg > .pg__guar > svg.pg__seal + h3.pg__gt + p.pg__gp */
.pg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:stretch}
.pg--photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.56fr)}
.pg__price{padding:34px 36px 38px;display:flex;flex-direction:column;justify-content:center;color:var(--ink)}
.on-dark .pg__price{box-shadow:8px 8px 0 var(--shadow-dark)}
.pg__price .chip{margin-bottom:20px}
.pg__h{font-size:clamp(30px, 2.85vw, 42px);line-height:1.12}
/* .pg__amt used to be a Peach Red tag. It is now the one highlight style (see ".hl"). */
.pg__guar{position:relative;background:var(--red);color:var(--ink);border:2px solid var(--ink);border-radius:18px;padding:32px 36px 36px;box-shadow:7px 7px 0 var(--ink);display:flex;flex-direction:column;justify-content:center}
.on-dark .pg__guar{box-shadow:8px 8px 0 var(--shadow-dark)}
.pg__seal{width:84px;height:auto;margin-bottom:12px;rotate:-6deg}
.pg__gt{font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 72;font-size:34px;line-height:1.05;letter-spacing:-.012em}
.pg__gp{margin-top:12px;font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 48;font-size:24px;line-height:1.3;letter-spacing:0}
.pg__photo .frame{height:100%;aspect-ratio:auto;min-height:280px}
.pg__box{margin-top:30px;border:2px solid var(--ink);border-radius:18px;padding:24px 28px;font-size:20px;font-weight:600;line-height:1.5}
.on-dark .pg__box{border-color:var(--line-dark);background:rgba(251,230,160,.035);color:var(--paper)}
.pg__after{margin:38px auto 0;max-width:760px;text-align:center;font-size:27px;text-wrap:balance}
@media (max-width:1100px){
  .pg--photo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg--photo .pg__photo{grid-column:1 / -1;order:-1;max-width:560px;width:100%;margin-inline:auto}
  .pg__photo .frame{height:auto;min-height:0;aspect-ratio:var(--ar, 16/9)}
  .pg__price,.pg__guar{padding:28px 28px 32px}
}
@media (max-width:760px){
  .pg,.pg--photo{grid-template-columns:minmax(0,1fr);gap:22px}
  .pg--photo .pg__photo{order:-1;max-width:none}
}
@media (max-width:599px){
  .pg__price,.pg__guar{padding:22px 20px 26px}
  .pg__price{box-shadow:5px 5px 0 var(--ink)}
  .on-dark .pg__price,.on-dark .pg__guar{box-shadow:6px 6px 0 var(--shadow-dark)}
  .pg__price .chip{margin-bottom:16px}
  .pg__h{font-size:clamp(27px, 8vw, 34px)}
  .pg__seal{width:72px}
  .pg__gt{font-size:29px}
  .pg__gp{font-size:22px}
  .pg__box{margin-top:22px;padding:20px 20px;font-size:17px}
  .pg__after{margin-top:28px;font-size:23px}
}

/* ---------- A7. the product card row (.offers) ----------
   Cards in a row, each with a chip on top (a price or a label), a name, a few words and a button or a link at the
   bottom. Three across by default. For two or four across: style="--cols:2" or style="--cols:4".
   A chip whose words can run to two lines takes .chip--block as well (a rounded box in place of the pill).
   Markup: .offers > article.card.offer > p.chip.chip--sm + h3.title.offer__h + p.offer__p + a.btn (or a.offer__link) */
.offers{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:24px;align-items:stretch}
.offer{padding:26px 26px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.offer .chip--block{border-radius:14px;line-height:1.3}
.offer__h{font-size:28px;line-height:1.1}
.offer__p{font-size:17px;line-height:1.6}
.offer > .btn,.offer > .offer__link,.offer > form{margin-top:auto}
.offer__link{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:800;font-size:18px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.offer__link svg{width:20px;height:20px;flex:none}
.offer__link:hover{text-decoration-color:var(--red)}
@media (max-width:1023px){
  .offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offers > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:699px){
  .offers{grid-template-columns:minmax(0,1fr);gap:18px}
  .offers > :last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:599px){
  .offer{padding:20px 18px 22px;gap:12px;box-shadow:5px 5px 0 var(--ink)}
  .offer__h{font-size:24px}
  .offer__p{font-size:16px}
  .offer > .btn{width:100%}
}

/* ---------- A8. the quote card grid (.quotes) ----------
   Paper cards, each with one line in Fraunces Italic and a big opening quote mark (#d-quote) standing on the top
   edge. A framed photo can sit in the grid as one of the cells (figure.mph).
   Markup: .quotes > figure.card.quote > svg.quote__mark + blockquote.quote__q */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;align-items:stretch}
.quote{position:relative;margin:0;padding:54px 28px 30px;display:flex;align-items:center}
.quote__mark{position:absolute;left:22px;top:-22px;width:64px;height:auto}
.quote__q{margin:0;font-family:var(--serif);font-style:italic;font-weight:700;font-variation-settings:"opsz" 48;font-size:25px;line-height:1.28;letter-spacing:0;text-wrap:balance}
.quotes .mph .frame{height:100%;aspect-ratio:auto;min-height:240px}
@media (max-width:1023px){
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .quotes{grid-template-columns:minmax(0,1fr);gap:36px}
  .quote{padding:46px 20px 24px;box-shadow:5px 5px 0 var(--ink)}
  .quote__mark{width:54px;top:-18px;left:16px}
  .quote__q{font-size:22px}
  .quotes .mph .frame{height:auto;min-height:0;aspect-ratio:var(--ar, 16/10)}
}

/* ---------- A9. the step table on a paper band, and with four or six cells (.stable) ----------
   The shared .table3 is the three-cell table for an olive band. .stable is the same table for a paper band
   (ink lines, a hard shadow), and it also works on olive. It takes three cells, four (.stable--4) or six
   (.stable--6, three by two). The cells are the shared .tcell with a .badge, a .title and a p.
   Markup: .stable > .tcell > span.badge + h3.title + p */
.stable{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:7px 7px 0 var(--ink)}
.stable .tcell{border:0;background:var(--paper)}
.stable--4{--cols:4}
.on-dark .stable{background:var(--line-dark);background-clip:padding-box;border-color:var(--line-dark);box-shadow:none}
.on-dark .stable .tcell{background:linear-gradient(rgba(251,230,160,.035),rgba(251,230,160,.035)), var(--ink)}
.on-dark .stable p{color:var(--paper)}
@media (max-width:1100px){
  .stable--4{--cols:2}
}
@media (max-width:899px){
  .stable{grid-template-columns:minmax(0,1fr)}
  .stable--4,.stable--6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .stable,.stable--4,.stable--6{grid-template-columns:minmax(0,1fr);box-shadow:5px 5px 0 var(--ink)}
  .on-dark .stable{box-shadow:none}
}

/* ---------- A10. the long form inside the form card (.lform) ----------
   For an application: many questions, one under the other, every label above its box, every box as wide as the card.
   Put .lform on the form together with .card.formcard.
     .lform__group    one question: a label and its box. A script can add .error to it (the box gets a Peach Red ring
                      and the label a Peach Red "!" circle).
     .lform__label    the question. A span.required inside it holds the star.
     .field           the shared box. Here it also styles select boxes (an arrow at the right) and tall text areas.
     .lform__radios   a row of choices: label.lform__radio > input[type=radio] + span. Each choice is a pill 52px tall.
     .lform__hint     a small line under a box.
     .lform__foot     the button, the message line and the note, at the end of the form.
     .lform__submit   the button, full width. A script can add .btn-loading to it or switch it off (disabled).
     .lform__msg      a message line a script can write in (left empty it takes no room).
     .lform__note     the line under the button (use it with .fud).
     .lform__break    a framed photo between two questions, for phones and tablets, where the picture rail is gone.
     .lform-done      the block shown after sending: a check circle, a headline, a line, and .lform-done__more for
                      one more sentence with a link. If a script shows it by un-hiding a wrapper around it, give
                      that wrapper .lform-wrap, so the page stops under the header when the script scrolls to it. */
.lform{margin-top:0;padding:30px 30px 28px;display:flex;flex-direction:column;gap:22px}
.lform__group{min-width:0}
.lform__label{display:block;margin-bottom:9px;font:700 17px/1.4 var(--sans);text-wrap:pretty}
.lform .required{font-weight:800}
.lform .field{scroll-margin-top:calc(var(--nav-h) + 76px)}
.lform input.field,.lform select.field{min-height:54px}
.lform textarea.field{height:auto;min-height:136px;line-height:1.5}
.lform .field::placeholder{color:rgba(37,49,34,.72);opacity:1}
.lform select.field{-webkit-appearance:none;appearance:none;padding-right:52px;cursor:pointer;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.8 L8 10.8 L13 5.8' fill='none' stroke='%23253122' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:20px 20px}
.lform select.field:invalid{color:rgba(37,49,34,.72)}
.lform select.field option{color:var(--ink);background:var(--paper)}
.lform__hint{margin-top:8px;font-size:16px;line-height:1.5}
.lform__radios{display:flex;flex-wrap:wrap;gap:12px 14px}
.lform__radio{position:relative;display:inline-flex;cursor:pointer}
.lform__radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lform__radio span{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:10px 24px 10px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font:800 19px/1.25 var(--sans);box-shadow:3px 3px 0 var(--ink);transition:transform .12s ease, box-shadow .12s ease}
.lform__radio span::before{content:"";width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--ink);background:var(--paper);box-shadow:inset 0 0 0 4px var(--paper)}
.lform__radio input:checked + span{background:var(--red);transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.lform__radio input:checked + span::before{background:var(--ink)}
.lform__radio input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.lform__foot{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.lform__submit{width:100%;min-height:58px}
.lform .btn-loading,.lform__submit:disabled{background:var(--gray);box-shadow:0 0 0 var(--ink);transform:translate(4px,4px);cursor:progress;pointer-events:none}
.lform__msg{font:700 17px/1.45 var(--sans);padding:11px 14px 11px 22px;border:2px solid var(--ink);border-radius:12px;background:var(--paper-deep), var(--paper);box-shadow:inset 8px 0 0 var(--red)}
.lform__msg:empty{display:none}
.lform .lform__note{margin-top:0}
.lform__group.error .field{box-shadow:inset 3px 3px 0 rgba(37,49,34,.08), 0 0 0 3px var(--red)}
.lform__group.error .lform__label{padding-left:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.4' fill='%23f15a30' stroke='%23253122' stroke-width='2'/%3E%3Cpath d='M12 6.6 V13.2' fill='none' stroke='%23253122' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.7' fill='%23253122'/%3E%3C/svg%3E") no-repeat left top / 24px 24px}
.lform__break{margin:8px 0 6px}
.lform__break .frame{aspect-ratio:var(--ar, 16/9)}
.lform-wrap,.lform-done{scroll-margin-top:calc(var(--nav-h) + 24px)}
.lform-done{padding:36px 36px 36px}
.lform-done__ic{width:60px;height:60px;margin-bottom:18px}
.lform-done__h{font-size:clamp(34px, 3.4vw, 48px)}
.lform-done__p{margin-top:16px;font-size:20px;line-height:1.55}
.lform-done__more{margin-top:28px;padding:22px 24px 24px;border:2px solid var(--ink);border-radius:14px;background:var(--paper-deep), var(--paper);display:flex;flex-direction:column;align-items:flex-start;gap:16px;font-size:18px;line-height:1.55}
@media (max-width:599px){
  .lform{padding:20px 16px 20px;gap:20px}
  .lform__label{font-size:16px;margin-bottom:8px}
  .lform input.field,.lform select.field{min-height:50px}
  .lform textarea.field{min-height:128px}
  .lform select.field{padding-right:44px;background-position:right 13px center}
  .lform__hint{font-size:15px}
  .lform__radios{gap:10px 12px}
  .lform__radio span{min-height:50px;padding:9px 20px 9px 14px}
  .lform__submit{min-height:56px}
  .lform__msg{font-size:16px;padding:10px 12px 10px 20px}
  .lform__group.error .lform__label{padding-left:32px;background-size:23px 23px}
  .lform-done{padding:26px 20px 24px}
  .lform-done__ic{width:52px;height:52px;margin-bottom:14px}
  .lform-done__h{font-size:clamp(30px, 8.4vw, 38px)}
  .lform-done__p{font-size:17px;margin-top:12px}
  .lform-done__more{margin-top:22px;padding:18px 18px 20px;font-size:16px}
}
@media (max-width:374px){
  .lform{padding:16px 14px 18px}
  .lform__label{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .lform__radio span{transition:none}
}

/* ---------- A11. a long form with a picture rail beside it (.apply) ----------
   Desktop: the headline, the form and a proof card in the left column (.apply__main), and a rail on the right
   (.apply__rail) as tall as the form, holding framed photos, the check lines (the homepage's ul.checks), a doodle or
   two and the thumbs-up figurine (.figure-scene). A rail child with .is-spread takes a share of the empty space
   above it, so the pictures spread down the length of the form. (Give the figurine .is-spread to stand it at the
   bottom of a rail that holds nothing else.)
   Tablets and phones: one column, in this order: headline, check lines, the first photo, the form, the proof card,
   the last photo, the figurine. A rail child with .d-only is left out there (use .lform__break inside the form).
   When a script has hidden the form after sending (style="display: none"), the rail keeps only the figurine. */
.apply__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 72px;align-items:stretch}
.apply__main{min-width:0;display:flex;flex-direction:column}
.apply__head{margin-bottom:34px}
.apply__head .lead{margin-top:18px;max-width:580px}
.apply__main > .minicard{max-width:none;margin-top:34px}
.apply__rail{position:relative;min-width:0;display:flex;flex-direction:column;gap:28px}
.apply__rail > .is-spread{margin-top:auto}
.apply__rail > .checks{padding-bottom:0;border-bottom:0}
.apply__ph{margin:0}
.apply__ph .frame{aspect-ratio:var(--ar, 1/1)}
.apply__rail .figure-scene{margin-top:12px;flex:none}
.apply__doodle{position:relative;height:96px;flex:none;pointer-events:none}
.apply__doodle svg{position:absolute}
.apply__grid:has(.apply__main > .lform[style*="display: none"]) .apply__rail > :not(.figure-scene){display:none}
@media (min-width:900px){
  .apply__grid:has(.apply__main > .lform[style*="display: none"]) .apply__rail .figure-scene{margin-top:0}
}
@media (max-width:1100px){
  .apply__grid{gap:0 44px}
}
@media (max-width:899px){
  .apply__grid{display:flex;flex-direction:column}
  .apply__main,.apply__rail{display:contents}
  .apply__main > *{order:4}
  .apply__rail > *{order:7}
  .apply__head{order:1;margin-bottom:26px}
  .apply__rail > .checks{order:2;margin-bottom:28px}
  .apply__rail > .apply__ph--top{order:3;margin-bottom:34px}
  .apply__main > .minicard{order:5;margin-top:30px}
  .apply__rail > .apply__ph--end{order:6;margin-top:34px}
  .apply__rail > .figure-scene{order:7;margin-top:40px}
  .apply__rail > .apply__doodle{display:none}
  .apply__ph .frame{aspect-ratio:var(--ar-m, 16/10)}
  .apply__ph img{object-position:var(--op-m, var(--op, 50% 30%))}
}
@media (max-width:599px){
  .apply__head{margin-bottom:22px}
  .apply__head .lead{margin-top:14px}
  .apply__rail > .checks{margin-bottom:24px}
  .apply__rail > .apply__ph--top{margin-bottom:28px}
  .apply__main > .minicard{margin-top:26px}
}

/* ---------- A12. a wall card on an olive band ----------
   The shared .wcard is drawn for a paper band. On olive its ink shadow would not show, so it gets the light one, and
   its words, its avatar ring and its title line keep their paper-band colors.
   Inside the homepage's video grid (.vgrid) a wall card stretches to the height of its row and its name line sits
   at the bottom, like a video card's. */
.on-dark .wcard{color:var(--ink);box-shadow:7px 7px 0 var(--shadow-dark)}
.on-dark .wcard .who__title{color:inherit}
.on-dark .wcard .avatar{border-color:var(--ink)}
.vgrid .wcard{margin:0;display:flex;flex-direction:column}
.vgrid .wcard .who{margin-top:auto;padding-top:16px}
.vgrid .wcard .chip{align-self:flex-start}

/* ---------- A13. the header keeps its own color ----------
   The old live pages carry a script block that paints the element with class "nav" dark when the page is scrolled
   (it was written for the old dark header). The application pages have to carry that block unchanged, because the
   application form's own code is in the same block. This one line makes that paint do nothing. On a page without
   the old block it changes nothing: it states the color the header already has. */
.nav{background:var(--paper)!important}

/* ---------- A14. a band right under the header, or right under the Peach Red band ----------
   The header has a line under it, the Peach Red band has a line under it, and every .sec band has a line over it.
   Two lines in a row would read as one line twice as thick. So the first band of the page, and a band that comes
   straight after the Peach Red band, drop their own top line. (The homepage does the same with its own page rules.) */
main > .sec:first-child{border-top:0}
.closer-band + .sec{border-top:0}

/* ---------- A15. the form card with the email box above a full-width button (.formcard--stack) ----------
   In the shared form card the email box and the button sit side by side on wide screens. Add .formcard--stack to
   the form to stack them at every width, as the homepage's closing form does. */
.formcard--stack .form-row{flex-wrap:wrap}
.formcard--stack .form-row__email{flex:1 1 100%}
.formcard--stack .form-row .btn{flex:1 1 100%}

/* ---------- A16. a place for the mountain or the signpost doodle ----------
   The shared .doodle-mtn and .sign are placed against their parent. Give that parent .doodle-host, and for the
   signpost also .doodle-host--sign, which keeps room under the words for it to stand in. */
.doodle-host{position:relative}
.doodle-host--sign{padding-bottom:156px}
@media (max-width:899px){
  .doodle-host--sign{padding-bottom:130px}
}

/* ---------- A17. a chip, a headline and a paragraph, one under the other (.stack-head) ----------
   The shared file already gives the chip its space (.stack-head .chip). This adds the space between the headline
   and the paragraph under it. Markup: div.stack-head > p.chip + h2.display.h2 + p.lead */
.stack-head > h1 + p,.stack-head > h2 + p,.stack-head > h3 + p{margin-top:22px}
@media (max-width:599px){
  .stack-head > h1 + p,.stack-head > h2 + p,.stack-head > h3 + p{margin-top:16px}
}

/* ---------- A18. the check list without the closer's bottom line (.checks--plain) ----------
   The homepage's check list (ul.checks, copied in Part B) ends with a line and some room under it, because a
   figurine stands below it in the closer. Add .checks--plain where nothing follows it.
   Fixed in the Wave 3 fix round (review item M1): written as .checks.checks--plain, so it is stronger than the
   copy of .checks in Part B, which comes later in this file and used to win the tie. */
.checks.checks--plain{padding-bottom:0;border-bottom:0}

/* ---------- A19. numbered dark cards (.dlist, .dnum) and the Peach Red callout (.callout) ----------
   The homepage's "Does this sound like you?" cards and the Peach Red card under them, under names any page can use.
   .dnum is a dark card for an olive band: a Peach Red number, a line in Fraunces, and an optional Peach Red line.
   .callout is the Peach Red card: one statement in heavy Fraunces, 24px or larger, so olive on Peach Red stays readable.
   Markup: .dlist > div.dcard.dnum > span.dnum__n + p.dnum__t (+ p.dnum__c)
           div.callout > p.callout__a */
.dlist{display:flex;flex-direction:column;gap:16px}
.dnum{padding:24px 28px 24px 24px;display:grid;grid-template-columns:44px 1fr;gap:6px 14px}
.dnum__n{font:800 20px/1.3 var(--sans);color:var(--red);letter-spacing:.02em;padding-top:2px}
.dnum__t{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 48;font-size:23px;line-height:1.28;letter-spacing:0}
.dnum__c{grid-column:2;color:var(--red);font-weight:700;font-size:20px;line-height:1.45}
.callout{background:var(--red);color:var(--ink);border:2px solid var(--ink);border-radius:18px;padding:30px 32px;box-shadow:7px 7px 0 var(--ink)}
.on-dark .callout{box-shadow:8px 8px 0 var(--shadow-dark)}
.callout__a{font-family:var(--serif);font-weight:800;font-variation-settings:"opsz" 72;font-size:27px;line-height:1.22;letter-spacing:-.005em}
@media (max-width:599px){
  .dnum{grid-template-columns:34px 1fr;padding:20px 20px 20px 18px}
  .dnum__t{font-size:20px}
  .dnum__c{font-size:19px}
  .callout{padding:24px 22px}
  .callout__a{font-size:24px}
}

/* ===================== Wave 3, PART B: the homepage's own section layouts =====================
   Copied by program from the style block of site/index.html: the same selectors, the same declarations, the same
   screen-size conditions, in the same order. Nothing here is rewritten. A selector list on the homepage that also
   names a homepage-only piece (the hero, the pain list) is copied without that piece.
   Not copied, because only the homepage uses them: the hero, the Planet MC scene, the three big numbers
   (.bignums; use .numband), the three phone screens, the pain list.
   pipeline/check-wave3-shared.py proves every rule below is the homepage's own. */

/* ---------- B. a section head with a framed photo beside it (.sec-head2). Add .rf-head to put the photo first on phones. ---------- */
.sec-head2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:60px}
.sec-head2 .chip{margin-bottom:22px}

/* ---------- B. the Results band: its head with a photo (.res-head), the video grid (.vgrid) and the photo cell in the grid (.res-photo) ---------- */
.res-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:end;margin-bottom:64px}
.res-head .chip{margin-bottom:22px}
.res-head__photo{position:relative}
.res-head__photo .frame{aspect-ratio:3/2}
.res-head__photo img{object-position:50% 50%}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.res-photo .frame{height:100%;min-height:360px;aspect-ratio:auto}
.res-photo img{object-position:38% 28%}

/* ---------- B. Where it started: the story card and the photo collage (.origin, .story, .collage) ---------- */
.origin{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:start}
.story{padding:34px 36px;margin-top:40px;font-size:19px;line-height:1.7}
.origin__line{margin-top:30px;font-size:20px;font-weight:700;line-height:1.5;padding-left:20px;border-left:5px solid var(--red)}
.collage{position:relative;height:760px}
.collage figure{position:absolute}
.collage .p16{width:72%;left:0;top:230px;z-index:2}
.collage .p16 .frame{aspect-ratio:4/3}
.collage .pac{width:50%;right:0;top:0;z-index:3}
.collage .pac figcaption{left:auto;right:18px}
.collage .pac .frame{aspect-ratio:1/1.02}
.collage .pbook{width:34%;right:4%;top:480px;rotate:2.2deg;z-index:4}
.collage .pbook .frame{aspect-ratio:938/1320;border-radius:8px}
.collage figcaption{position:absolute;left:18px;bottom:-16px;z-index:3}
.collage figcaption .chip{background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.collage__row{display:contents}

/* ---------- B. the Metamodel: the two grids, the three numbered cards and the praise panel (.mm, .road, .praise) ---------- */
.mm{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.mm__body{margin-top:26px;font-size:19px;line-height:1.65;color:var(--paper)}
.mm__italic{font-size:clamp(28px, 2.7vw, 40px);padding-left:22px;border-left:5px solid var(--red)}
.roads{display:flex;flex-direction:column;gap:16px}
.mm2{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:72px}
.mm-photo{margin:0;max-width:600px}
.mm-photo .frame{aspect-ratio:1132/754}
.mm2__say{position:relative;padding-bottom:156px}
.road{padding:26px 28px;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:baseline}
.road__n{font:800 20px/1 var(--sans);color:var(--red);letter-spacing:.02em}
.road__t{font-family:var(--serif);font-weight:800;font-variation-settings:"opsz" 96;font-size:34px;line-height:1;letter-spacing:-.015em}
.road__l{grid-column:2;font-size:19px;color:var(--paper);margin-top:6px}
.praise{margin-top:56px;border:1.5px solid var(--line-dark);border-radius:22px;background:rgba(251,230,160,.06);padding:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}

/* ---------- B. Who I am: the photo, the check list and the family photo (.who-grid, .who-list, .fam) ---------- */
.who-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:start}
.who-photo{aspect-ratio:1/1;position:sticky;top:calc(var(--nav-h) + 32px)}
.who-photo img{object-position:50% 20%}
.who-list{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.who-list li{display:flex;gap:16px;align-items:center;font-size:20px;font-weight:600;line-height:1.4;padding:15px 0;border-bottom:2px solid rgba(37,49,34,.2)}
.fam{margin-top:40px;aspect-ratio:2600/1463}

/* ---------- B. the wall of proof: its head and its three-column grid (.wall-head, .wall) ---------- */
.wall-head{text-align:center;margin-bottom:64px}
.wall-head .small{margin-top:18px;font-size:20px;font-weight:600}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.wall__col{display:flex;flex-direction:column;gap:28px}
.wall__col > *{order:var(--o,0)}
.wall-ph-m{display:none}

/* ---------- B. the head row over a step table (.how-head) ---------- */
.how-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:end;margin-bottom:56px}
.how-photo .frame{aspect-ratio:540/368}

/* ---------- B. the questions: the two-column grid with a photo under the headline (.faq) ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:72px;align-items:start}
.faq__left{position:sticky;top:calc(var(--nav-h) + 32px)}
.faq__photo{margin-top:36px;aspect-ratio:1/1}
.faq__photo img{object-position:0% 40%}

/* ---------- B. the closer: the Peach Red band's grid and photo, the check list, the form and the figurine (.closer-band__grid, .closer-photo, .closer, .checks) ---------- */
.closer-band__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:56px;align-items:center}
.closer-photo{aspect-ratio:4/5;box-shadow:9px 9px 0 var(--ink)}
.closer-photo img{object-position:50% 20%}
.closer{padding-block:96px 120px;border-top:0}
.closer__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.checks{list-style:none;margin:0;padding:0 0 26px;display:flex;flex-direction:column;gap:16px;border-bottom:2px solid rgba(37,49,34,.2)}
.checks li{display:flex;gap:14px;align-items:flex-start;font-size:20px;font-weight:600;line-height:1.45}
.closer .formcard{margin-top:0}
.closer .form-row{flex-wrap:wrap}
.closer .form-row__email{flex:1 1 100%}
.closer .form-row .btn{flex:1 1 100%}

/* ---------- B. the tablet and phone rules for the layouts above, in the homepage's order ---------- */
@media (max-width:1180px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall__col:nth-child(3){grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .praise{grid-template-columns:1fr;max-width:720px}
}
@media (max-width:899px){
  .closer{padding-block:80px}
  .origin,.mm,.who-grid,.faq,.closer__grid,.closer-band__grid,.res-head,.sec-head2,.how-head{grid-template-columns:1fr;gap:30px}
  .how-head{margin-bottom:40px}
  .res-head{margin-bottom:48px}
  .vgrid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .rf-head .head-photo{order:-1}
  .faq__left,.who-photo{position:static}
  .origin{display:flex;flex-direction:column;gap:0}
  .origin > div:first-child,.origin .collage{display:contents}
  .origin .chip{order:1}
  .origin h2{order:2}
  .collage .p16{order:3;margin-top:28px}
  .origin .story{order:4}
  .origin__line{order:5}
  .collage__row{order:6}
  .collage{height:auto;display:block}
  .collage__row{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-top:34px}
  .collage figure{position:relative;width:auto!important;left:auto!important;right:auto!important;top:auto!important}
  .mm2{grid-template-columns:1fr;gap:36px;margin-top:44px}
  .mm2__say{padding-bottom:130px}
  .res-head__photo{margin-top:40px}
  .closer-photo{max-width:340px;aspect-ratio:1/1}
  .closer__grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .closer__grid > div{display:contents}
  .closer .checks{order:1;margin-bottom:28px}
  .closer .formcard{order:2}
  .closer .mph.cl-ph{order:4;margin:28px 0 6px}
  .closer .minicard{order:5}
  .closer .figure-scene{order:6;margin-top:40px}
  .vgrid .mph.m-only,.wall .mph.m-only{margin:0}
  .praise{grid-template-columns:1fr;max-width:none}
}
@media (max-width:760px){
  .vgrid{grid-template-columns:1fr}
  .wall{grid-template-columns:1fr}
  .wall{display:flex;flex-direction:column;gap:28px}
  .wall__col,.wall__col:nth-child(3){display:contents}
  .res-photo .frame{min-height:0;aspect-ratio:16/10}
  .vgrid > :nth-child(4){order:5}
  .vgrid > :nth-child(5){order:6}
  .vgrid > .res-photo{order:4}
  .wall__col > *{order:var(--om,0)}
  .wall-ph-m{display:block}
}
@media (max-width:599px){
  .sec-head2{margin-bottom:30px}
  .res-head{margin-bottom:36px}
  .origin .story{margin-top:40px}
  .story{padding:24px 22px;font-size:17px;margin-top:28px}
  .origin__line{font-size:17px}
  .collage figcaption{left:12px}
  .collage .pac figcaption{left:12px;right:auto}
  .mm__body{font-size:17px}
  .mm__italic{font-size:26px}
  .road{padding:22px 20px;grid-template-columns:34px 1fr}
  .road__t{font-size:30px}
  .road__l{font-size:17px}
  .praise{padding:14px;gap:14px}
  .who-list li{font-size:17px;gap:12px}
  .wall-head .small{font-size:17px}
  .closer{padding-block:64px 80px}
  .checks li{font-size:17px}
}
@media (max-width:599px){
  .origin,.wall{align-items:stretch}
}

/* ===================== added in the Wave 3 fix round (2026-10-10): PART C, what the next five pages still needed =====================
   Nothing above this line was changed or moved in this round, with one exception: rule A18 (.checks--plain) is now
   written .checks.checks--plain (review item M1). Everything from here down is new.
   This block comes last in the file, so a rule here wins a tie with Part A and with Part B. For the same reason each
   component below states its own tablet and phone values.

     C1   [hidden]                                   the hidden attribute always hides
     C2   .p-only .t-only .td-only .gfull .strip .flow .cta-stack .mt-s .mt-m .mt-l    small helpers
     C3   .keep2                                     a head row, the question grid or the Peach Red band stays two columns on tablets
     C4   .split                                     two columns: words on one side, a picture or a form on the other
     C5   .books                                     a framed book cover and three rows
     C6   .progs  .prog                              two large program cards with a photo on top
     C7   .closer-band--long  .closer-band__cta  .closer-band__note     the Peach Red closing band with a button and its line
     C8   .qa__more                                  a link button inside an answer
     C9   .lform__group--num  .lform__n              numbered questions in the long form
     C10  .apply (more)                              the picture rail folds away when no form is showing; several blocks in one column
     C11  .state                                     one screen of a form: unlocked, received, not yet
     C12  .vgrid--mix  .vgrid__stack  .vgrid__wide   a video grid that mixes videos, written cards and photos
     C13  .phcap  .phpair                            a photo with a chip label; two of them side by side
     C14  .phline                                    a card with a photo and one sentence
     C15  .after-line  .after-note                   the italic line under a table or a row of cards, and a small line under it
     C16  .offers--4  .offer--article                four article cards in a row
     C17  .pillrow                                   four outline pills in one row
     C18  .biglink                                   a large email link
     C19  .ncard > form, .offer > form               a small form inside a card
     C20  .dcard .num-pill                           a number pill on a dark card
     C21  .rowtable                                  a titled table of rows
     C22  small additions                            .fit stacks on tablets; where a jump to a band stops; and four more */

/* ---------- C1. the hidden attribute always hides ----------
   A script that shows and hides a block with the hidden attribute (the Pressure Process page and the page after the
   Reframe answer do) needs this: without it a .card or a .lform with hidden on it would still be drawn, because their
   own display value is stronger than the browser's. */
[hidden]{display:none!important}

/* ---------- C2. small helpers ----------
   .p-only   drawn on phones only (599 wide and under). For an extra photo where the cards stack.
   .t-only   drawn on tablets only (600 to 899 wide).
   .td-only  left out on phones (drawn from 600 wide up).
             (Already in the file: .m-only is drawn at 899 and under, .d-only at 900 and up.)
   .gfull    a child of any grid that takes the whole row (a wide photo between two rows of cards).
   .strip    a wide, low photo for the space between two rows of cards, or between two stacked cards: figure.mph.strip.
             It is 3 to 1 from 600 wide up and 16 to 9 on phones. Change them with style="--ar:21/9;--ar-p:2/1", and
             the crop with "--op:50% 20%" (and "--op-p" for phones). Add .m-only, .p-only or .t-only to say where it is
             drawn, and .gfull when it sits in a grid of two or more columns.
             This is how a page keeps a photo of him on every screen-length where the cards stack.
   .flow     even space between the children of a block: div.flow > p + ul + a. Set another space with style="--flow:16px".
   .cta-stack   a button with its line under it, at the left edge (the shared .cta-row centers them): div.cta-stack > a.btn + p.fud.
             On phones the button takes the whole width.
   .mt-s  .mt-m  .mt-l   space above a block: 28, 44 or 64px (20, 30 or 44 on phones). */
@media (min-width:600px){.p-only{display:none!important}}
@media (max-width:599px),(min-width:900px){.t-only{display:none!important}}
@media (max-width:599px){.td-only{display:none!important}}
.gfull{grid-column:1 / -1}
.mph.strip{margin:0}
.strip .frame{aspect-ratio:var(--ar, 3/1)}
.strip img{object-position:var(--op, 50% 30%)}
.flow > * + *{margin-top:var(--flow,22px)}
.cta-stack{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cta-stack .fud{max-width:580px}
.mt-s{margin-top:28px!important}
.mt-m{margin-top:44px!important}
.mt-l{margin-top:64px!important}
@media (max-width:599px){
  .strip .frame{aspect-ratio:var(--ar-p, 16/9)}
  .strip img{object-position:var(--op-p, var(--op, 50% 30%))}
  .cta-stack{align-items:stretch;gap:12px}
  .mt-s{margin-top:20px!important}
  .mt-m{margin-top:30px!important}
  .mt-l{margin-top:44px!important}
}

/* ---------- C3. two columns kept on tablets (.keep2) ----------
   The homepage's head rows (.sec-head2, .res-head, .how-head), its question grid (.faq) and the grid in its Peach Red
   band (.closer-band__grid) all become one column at 899 wide and under. On a tablet held upright that makes a very
   long page with big pictures. Add .keep2 to any of them (or to .split) and it stays two columns from 600 to 899 wide,
   and becomes one column on phones as before. The homepage does not use it. */
@media (min-width:600px) and (max-width:899px){
  .sec-head2.keep2,.res-head.keep2,.how-head.keep2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:end}
  .rf-head.keep2 .head-photo{order:0}
  .res-head.keep2 .res-head__photo{margin-top:0}
  .faq.keep2{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:36px}
  .closer-band__grid.keep2{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:36px}
  .closer-band__grid.keep2 .closer-photo{max-width:none;aspect-ratio:4/5}
}
/* .faq.photo-last: on phones the homepage's question grid shows the headline, the photo, then the questions. With
   .photo-last the photo comes after the questions, for a page that needs its photo lower down to keep one on every
   screen-length. From 600 wide up nothing changes. */
@media (max-width:599px){
  .faq.photo-last{display:flex;flex-direction:column;gap:0}
  .faq.photo-last > .faq__left{display:contents}
  .faq.photo-last > .faq__left > :not(.faq__photo){order:1;margin-bottom:26px}
  .faq.photo-last > :not(.faq__left){order:2}
  .faq.photo-last .faq__photo{order:3;margin-top:36px}
}

/* ---------- C4. two columns: words on one side, a picture or a form on the other (.split) ----------
   For a band like "The Warrior Stream" (words and a button on the left, a framed photo on the right) or "The MC
   Letter" (words on the left, the one-box form card on the right). One column at 899 and under, unless it has .keep2.
   .split--top lines the two columns up at the top (the default is the middle).
   Markup: div.split > div.flow (chip, headline, paragraphs, button) + figure.mph (or a form.card.formcard) */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.split--top{align-items:start}
.split > .formcard{margin-top:0}
@media (max-width:1100px){
  .split{gap:44px}
}
@media (max-width:899px){
  .split{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media (min-width:600px) and (max-width:899px){
  .split.keep2{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px}
}

/* ---------- C5. a framed book cover and three rows (.books) ----------
   The cover in a frame on the left, and on the right a list of books: a title, one sentence and a link each.
   The link is the shared a.offer__link with the #i-arrow-c arrow. Set the cover's shape with style="--ar:938/1500".
   Markup: div.books > figure.books__cover > div.frame > img
           div.books > ul.books__list > li.books__row > h3.title.books__t + p.books__p + a.offer__link */
.books{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:64px;align-items:start}
.books__cover{margin:0;max-width:340px}
.books__cover .frame{aspect-ratio:var(--ar, 938/1500);border-radius:8px}
.books__list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.books__row{padding:26px 0 20px;border-bottom:2px solid rgba(37,49,34,.2);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.books__t{font-size:27px;line-height:1.14}
.books__p{font-size:19px;line-height:1.55}
@media (max-width:1100px){
  .books{gap:44px}
}
@media (max-width:899px){
  .books{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:34px}
  .books__t{font-size:25px}
}
@media (max-width:599px){
  .books{grid-template-columns:minmax(0,1fr);gap:30px}
  .books__cover{max-width:200px}
  .books__row{padding:20px 0 14px}
  .books__t{font-size:23px}
  .books__p{font-size:16px}
}

/* ---------- C6. two large program cards with a photo on top (.progs, .prog) ----------
   Two paper cards side by side. Each has a framed photo on top, then a chip, the program's name, a headline, a
   paragraph, a short check list (the homepage's ul.checks with .checks--plain), one proof line and a button at the
   bottom. One column at 899 and under; on tablets the photo sits beside the words.
   Set the photo's shape and crop on the figure: style="--ar:16/10;--op:30% 40%" (and "--ar-m:1/1" for another shape
   on tablets, where the photo is a smaller picture at the top left of the card).
   Markup: div.progs > article.card.prog > figure.prog__photo > div.frame > img
                                         > div.prog__body > p.chip.chip--sm.chip--block + p.prog__name + h3.title.prog__h
                                           + p.prog__p + ul.checks.checks--plain + p.prog__proof (> span for the name) + a.btn */
.progs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:stretch}
.prog{padding:20px 20px 28px;display:flex;flex-direction:column}
.prog__photo{margin:0}
.prog__photo .frame{aspect-ratio:var(--ar, 16/10);border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
.prog__photo img{object-position:var(--op, 50% 30%)}
.prog__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 10px 0}
.prog__name{font:800 17px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.prog__h{font-size:30px;line-height:1.1}
.prog__p{font-size:18px;line-height:1.6}
.prog .checks{width:100%;gap:12px}
.prog .checks li{font-size:18px}
.prog__proof{font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"opsz" 36;font-size:20px;line-height:1.4;padding-left:16px;border-left:5px solid var(--red)}
.prog__proof span{display:block;margin-top:6px;font:700 16px/1.4 var(--sans)}
.prog__body > .btn{margin-top:auto}
.prog__body > .prog__proof + .btn,.prog__body > .checks + .btn{margin-top:auto}
@media (max-width:1100px){
  .prog__h{font-size:27px}
}
@media (max-width:899px){
  .progs{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (min-width:600px) and (max-width:899px){
  .prog{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:0 26px;align-items:start;padding:20px 22px 24px 20px}
  .prog__photo .frame{aspect-ratio:var(--ar-m, var(--ar, 16/10))}
  .prog__body{padding:4px 0 0}
}
@media (max-width:599px){
  .prog{padding:14px 14px 20px;box-shadow:5px 5px 0 var(--ink)}
  .prog__body{padding:18px 4px 0;gap:14px}
  .prog__name{font-size:15px;letter-spacing:.06em}
  .prog__h{font-size:25px}
  .prog__p{font-size:16px}
  .prog .checks li{font-size:16px}
  .prog__proof{font-size:18px}
  .prog__proof span{font-size:15px}
  .prog__body > .btn{width:100%}
}

/* ---------- C7. the Peach Red closing band with a button and its line ----------
   The shared .closer-band is the homepage's: a headline and one italic line. A page that ends on the band itself (the
   two application pages) adds a button and the line under it.
   .closer-band--long     a long headline, set smaller than the homepage's (add it to section.closer-band)
   .closer-band__cta      the olive button (a.btn.btn--ink with the #i-arrow-c arrow) and its line, one under the other
   .closer-band__note     the line under the button. Olive words on Peach Red have to be bold and 19px or larger, so
                          this is not the small .fud line it is elsewhere.
   Markup: section.closer-band.closer-band--long > div.wrap.closer-band__grid > div (h2.display + p.italic-line
           + div.closer-band__cta > a.btn.btn--ink + p.closer-band__note) + div.frame.closer-photo */
.closer-band--long h2{font-size:clamp(38px, 4.3vw, 62px)}
.closer-band--long .italic-line{margin-top:26px}
.closer-band__cta{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.closer-band__note{max-width:640px;font-size:19px;font-weight:700;line-height:1.45}
@media (max-width:599px){
  .closer-band--long h2{font-size:clamp(31px, 8.9vw, 40px)}
  .closer-band--long .italic-line{margin-top:20px}
  .closer-band__cta{margin-top:26px;align-items:stretch;gap:16px}
}

/* ---------- C8. a link button inside an answer (.qa__more) ----------
   Markup: details > summary + div.qa__a > p + p.qa__more > a.btn.btn--line.btn--sm */
.qa__more{margin-top:16px}

/* ---------- C9. numbered questions in the long form (.lform__group--num, .lform__n) ----------
   For a form whose questions carry a Peach Red number badge. Add .lform__group--num to the question's .lform__group
   and put the number in span.lform__n as the first thing in its .lform__label. The choices, the box and a hint line
   up under the words of the question (on phones they use the whole width).
   A script can still add .error to the group: the "!" circle then shows at the end of the question.
   Markup: div.lform__group.lform__group--num > p.lform__label#q1 > span.lform__n "1" + span "Do you own a business?"
                                              > div.lform__radios[role=radiogroup][aria-labelledby=q1] > label.lform__radio ...
           (for a box: label.lform__label[for] > span.lform__n + span, then textarea.field) */
.lform__group--num{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px}
.lform__group--num > .lform__label{grid-column:1 / -1;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:8px 14px;align-items:center;margin-bottom:14px;font-size:19px;line-height:1.35}
.lform__n{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font:800 19px/1 var(--sans);letter-spacing:.02em}
.lform__group--num > :not(.lform__label){grid-column:2;min-width:0}
.lform__group--num.error > .lform__label{padding-left:0;background:none}
.lform__group--num.error > .lform__label::after{content:"";width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.4' fill='%23f15a30' stroke='%23253122' stroke-width='2'/%3E%3Cpath d='M12 6.6 V13.2' fill='none' stroke='%23253122' stroke-width='2.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.7' fill='%23253122'/%3E%3C/svg%3E") no-repeat center / 24px 24px}
.lform__group--num.error .lform__radio span{box-shadow:3px 3px 0 var(--ink), 0 0 0 3px var(--red)}
@media (max-width:599px){
  .lform__group--num{grid-template-columns:minmax(0,1fr)}
  .lform__group--num > .lform__label{grid-template-columns:38px minmax(0,1fr) auto;gap:8px 12px;margin-bottom:12px;font-size:17px}
  .lform__n{width:38px;height:38px}
  .lform__group--num > :not(.lform__label){grid-column:1}
}

/* ---------- C10. the form with a picture rail (.apply): two more things ----------
   1. The rail folds away whenever no form is showing in .apply__main, however the form was hidden: with the hidden
      attribute, with an inline display:none, or because a block around it is hidden. Only the figurine stays, so a
      short block ("Application received.") never sits beside a tall column of pictures. (Rule A11 above only knew the
      inline display:none that the Inner Circle script writes.)
   2. .apply__main.is-stack is for a column that holds several blocks one under the other, some of them hidden at any
      moment (the questions, the "unlocked" block, the application, "received", "not yet", a proof card). Every block
      after the headline gets the same space above it, and a hidden block takes no room.
   3. .apply__grid.pair-end: on tablets and phones, where the rail is gone and everything is one column, the rail's
      last photo (.apply__ph--end) stands on the figurine's ground line, to the right of the figurine, in place of
      sitting above it at the full width of the screen. It is drawn square. Set its width with style="--pw:44%" on
      the grid (the default is 40% on tablets and 50% on phones). From 900 wide up nothing changes. */
.apply__grid:not(:has(.apply__main .lform:not([hidden], [style*="display: none"], [style*="display:none"], [hidden] *, [style*="display: none"] *, [style*="display:none"] *))) .apply__rail > :not(.figure-scene){display:none}
.apply__main.is-stack > .apply__head{margin-bottom:8px}
.apply__main.is-stack > :not(.apply__head){margin-top:26px}
@media (max-width:899px){
  .apply__main.is-stack > .apply__head{margin-bottom:26px}
  .apply__main.is-stack > :not(.apply__head){margin-top:0;margin-bottom:26px}
  .apply__grid.pair-end > .apply__rail > .figure-scene{order:6}
  .apply__grid.pair-end > .apply__rail > .apply__ph--end{order:7;position:relative;z-index:2;width:var(--pw, 40%);align-self:flex-end;margin:calc(-1 * var(--pw, 40%) - 36px) 0 36px}
  .apply__grid.pair-end > .apply__rail > .apply__ph--end .frame{aspect-ratio:1/1}
}
@media (max-width:599px){
  .apply__grid.pair-end > .apply__rail > .apply__ph--end{width:var(--pw, 50%);margin-top:calc(-1 * var(--pw, 50%) - 36px)}
}
@media (min-width:900px){
  .apply__grid:not(:has(.apply__main .lform:not([hidden], [style*="display: none"], [style*="display:none"], [hidden] *, [style*="display: none"] *, [style*="display:none"] *))) .apply__rail .figure-scene{margin-top:0}
}

/* ---------- C11. one screen of a form (.state) ----------
   The block a man sees at one step of a form that shows and hides its screens: "Application unlocked.",
   "Application received.", "Not yet.". A card with a headline, a paragraph, and a button if it needs one.
     div.card.state               the raised paper card ("Application received.")
     .state--bar                  a slimmer card with a Peach Red bar down its left edge, to sit right over the form it
                                  introduces ("Application unlocked.")
     .state--flat                 a flat, deeper paper card for a quiet message ("Not yet.")
     .state__ic                   an optional icon over the headline (svg with #i-check)
     .state__h  .state__p         the headline and the paragraph (more than one paragraph is fine)
     .state__more                 a bordered box for one more sentence and a button (the 30-Day Power Shift line)
     a.btn directly in the card   a button under the paragraph
   Hide and show it with the hidden attribute. When a script scrolls to it, it stops clear of the header.
   Markup: div.card.state[hidden] > svg.state__ic + h2.display.state__h + p.state__p (+ a.btn, or div.state__more > p + a.btn) */
.state{padding:34px 36px 36px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.state__ic{width:56px;height:56px;margin-bottom:16px}
.state__h{font-size:clamp(34px, 3.4vw, 48px)}
.state__p{margin-top:14px;max-width:660px;font-size:20px;line-height:1.55}
.state__p + .state__p{margin-top:12px}
.state > .btn{margin-top:26px}
.state__more{margin-top:26px;padding:22px 24px 24px;border:2px solid var(--ink);border-radius:14px;background:var(--paper-deep), var(--paper);display:flex;flex-direction:column;align-items:flex-start;gap:16px;font-size:18px;line-height:1.55}
.state--flat{background:var(--paper-deep), var(--paper);box-shadow:none}
.state--flat .state__more{background:var(--paper)}
.state--bar{padding:22px 28px 24px 34px;box-shadow:inset 10px 0 0 var(--red), 7px 7px 0 var(--ink)}
.state--bar .state__h{font-size:clamp(28px, 2.7vw, 38px)}
.state--bar .state__p{margin-top:8px;font-size:19px;font-weight:600}
.on-dark .state{color:var(--ink)}
@media (max-width:599px){
  .state{padding:24px 20px 24px}
  .state:not(.state--flat){box-shadow:5px 5px 0 var(--ink)}
  .state__ic{width:50px;height:50px;margin-bottom:12px}
  .state__h{font-size:clamp(30px, 8.4vw, 38px)}
  .state__p{font-size:17px;margin-top:12px}
  .state > .btn{margin-top:20px;width:100%}
  .state__more{margin-top:20px;padding:18px 18px 20px;font-size:16px}
  .state__more > .btn{width:100%}
  .state.state--bar{padding:18px 18px 20px 26px;box-shadow:inset 8px 0 0 var(--red), 5px 5px 0 var(--ink)}
  .state--bar .state__h{font-size:27px}
  .state--bar .state__p{font-size:17px}
}

/* ---------- C12. a video grid that mixes videos, written cards and photos (.vgrid--mix) ----------
   The homepage's video grid (.vgrid, Part B) is built for five videos and one photo: it sets the phone order by
   position (fourth child, fifth child), it is one narrow column from 899 wide down, and a written card in it is
   stretched to the height of a video card, which leaves a blank middle. Add .vgrid--mix to div.vgrid for any other mix:
     - three columns from 1181 wide, two columns from 600 to 1180, one column on phones
     - a written card (.wcard) keeps its own height
     - a framed photo (figure.mph) fills its cell. On phones it is a 16 to 10 picture; set its shape and crop there
       with style="--ar-m:16/10;--op-m:50% 8%" (the crop defaults to the top of the picture, so a head is not cut)
     - the order is yours at every width, set on each child: style="--o:2" (three columns), "--ot:3" (two columns),
       "--om:4" (phones). A child without one keeps its place in the markup. --ot falls back to --o, --om to --ot.
     - a wall card with a video on top (.wcard--video) gets the same 4 to 3 picture as a video card, so the two kinds
       stand the same height side by side
     .vgrid__wide     a child two columns wide (a written card with a long quote)
     .gfull           a child as wide as the grid (a photo strip: figure.mph.strip.gfull, see C2)
     .vgrid__stack    one cell that holds two or three written cards one under the other (and a photo, which then
                      fills what is left of the cell). On phones the stack opens up and its cards take their own --om.
   So two videos and three written cards fill the grid with no empty cell: video, video, a stack of two cards,
   then the third card two columns wide beside a photo.
   Markup: div.vgrid.vgrid--mix > article.dcard.vcard ... + figure.card.wcard ... + figure.mph > div.frame > img */
.vgrid.vgrid--mix > *{order:var(--o,0)}
.vgrid.vgrid--mix > .wcard{align-self:start}
.vgrid__wide{grid-column:span 2}
.vgrid__stack{display:flex;flex-direction:column;gap:28px;min-width:0}
.vgrid__stack > .wcard{margin:0}
.vgrid__stack > .mph{flex:1 1 200px;min-height:0;margin:0}
.vgrid.vgrid--mix > .mph .frame,.vgrid__stack > .mph .frame{height:100%;min-height:300px;aspect-ratio:auto}
.vgrid__stack > .mph .frame{min-height:200px}
.vgrid.vgrid--mix > .mph.gfull .frame{height:auto;min-height:0;aspect-ratio:var(--ar, 3/1)}
.vgrid.vgrid--mix > .mph{margin:0}
.vgrid.vgrid--mix > .wcard--video .vcard__media{aspect-ratio:4/3}
@media (min-width:600px) and (max-width:1180px){
  .vgrid.vgrid--mix{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;margin-inline:0}
  .vgrid.vgrid--mix > *{order:var(--ot, var(--o,0))}
}
@media (max-width:599px){
  .vgrid.vgrid--mix{grid-template-columns:minmax(0,1fr);max-width:none;margin-inline:0}
  .vgrid.vgrid--mix > .vgrid__stack{display:contents}
  .vgrid.vgrid--mix > *,.vgrid.vgrid--mix > .vgrid__stack > *{order:var(--om, var(--ot, var(--o,0)))}
  .vgrid__wide{grid-column:auto}
  .vgrid.vgrid--mix > .mph .frame,.vgrid.vgrid--mix > .vgrid__stack > .mph .frame,.vgrid.vgrid--mix > .mph.gfull .frame{height:auto;min-height:0;aspect-ratio:var(--ar-m, var(--ar, 16/10))}
  .vgrid.vgrid--mix > .mph.strip .frame{aspect-ratio:var(--ar-p, 16/9)}
  .vgrid.vgrid--mix > .mph:not(.strip) img,.vgrid.vgrid--mix > .vgrid__stack > .mph img{object-position:var(--op-m, var(--op, 50% 12%))}
}

/* ---------- C13. a photo with a chip label (.phcap), and two of them side by side (.phpair) ----------
   The label stands on the photo's bottom edge, as in the homepage's collage ("Me at 16"). Works on paper and on olive.
   .phpair puts two of them side by side, the second one a step lower.
   Markup: figure.mph.phcap > div.frame > img + figcaption > span.chip.chip--sm
           div.phpair > figure.mph.phcap + figure.mph.phcap */
.phcap{position:relative;margin:0 0 18px}
.phcap figcaption{position:absolute;left:18px;bottom:-16px;z-index:3;max-width:calc(100% - 30px)}
.phcap figcaption .chip{background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.on-dark .phcap figcaption .chip{box-shadow:3px 3px 0 var(--shadow-dark)}
.phpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start}
.phpair > :nth-child(2){margin-top:56px}
@media (max-width:599px){
  .phcap figcaption{left:12px}
  .phpair{gap:16px}
  .phpair > :nth-child(2){margin-top:34px}
}

/* ---------- C14. a card with a photo and one sentence (.phline) ----------
   A paper card: a photo fills its left side, one sentence in Fraunces stands on the right. On phones the photo is on top.
   Set the crop on the photo block: style="--op:50% 20%". Works on paper and on olive.
   Markup: figure.card.phline > div.phline__ph > img + figcaption.phline__t */
.phline{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);align-items:stretch;overflow:hidden;margin-inline:0;margin-bottom:0}
.phline__ph{position:relative;min-height:250px;border-right:2px solid var(--ink);background:var(--ink)}
.phline__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op, 50% 30%)}
.phline__t{align-self:center;padding:32px 36px;font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 48;font-size:27px;line-height:1.28;letter-spacing:0;text-wrap:balance}
.on-dark .phline{color:var(--ink);box-shadow:8px 8px 0 var(--shadow-dark)}
@media (max-width:899px){
  .phline__t{padding:26px 28px;font-size:24px}
}
@media (max-width:599px){
  .phline{grid-template-columns:minmax(0,1fr);box-shadow:5px 5px 0 var(--ink)}
  .on-dark .phline{box-shadow:6px 6px 0 var(--shadow-dark)}
  .phline__ph{min-height:0;aspect-ratio:var(--ar, 16/10);border-right:0;border-bottom:2px solid var(--ink)}
  .phline__t{padding:20px 20px 24px;font-size:22px}
}

/* ---------- C15. the italic line under a table or a row of cards (.after-line), and a small line under it (.after-note) ----------
   The shared .italic-line has no size of its own. .after-line gives it one and centers it under the block above.
   .after-line--left sets it at the left edge with a Peach Red bar, for a longer line.
   .after-note is a small, plain line under it ("The price of each is on its application page.").
   Markup: p.italic-line.after-line (+ p.after-note) */
.after-line{margin:38px auto 0;max-width:820px;text-align:center;font-size:27px;text-wrap:balance}
.after-line--left{margin-inline:0;max-width:900px;text-align:left;padding-left:22px;border-left:5px solid var(--red);font-size:28px}
.after-note{margin:14px auto 0;max-width:640px;text-align:center;font-size:17px;font-weight:600;line-height:1.5}
.on-dark .after-note{color:var(--gray)}
@media (max-width:599px){
  .after-line{margin-top:28px;font-size:23px}
  .after-line--left{padding-left:16px;font-size:23px}
  .after-note{font-size:15px}
}

/* ---------- C16. four article cards in a row (.offers--4, .offer--article) ----------
   The product card row (.offers, A7) with four cards: four across from 1181 wide, two across down to 600, one on phones.
   .offer--article sets the title at the size an article headline needs.
   Markup: div.offers.offers--4 > article.card.offer.offer--article > p.chip.chip--sm.chip--block + h3.title.offer__h + a.offer__link */
.offers--4{--cols:4}
.offer--article .offer__h{font-size:23px;line-height:1.16}
@media (max-width:1180px){
  .offers--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .offers--4{grid-template-columns:minmax(0,1fr)}
  .offer--article .offer__h{font-size:21px}
}

/* ---------- C17. four outline pills in one row (.pillrow) ----------
   Four a.btn.btn--line links ("YouTube: Master Chim Official"). One row from 1280 wide, two by two below that, one
   under the other on phones. The pills are set a size smaller here so four fit; no .btn--sm is needed.
   Markup: div.pillrow > a.btn.btn--line (four of them) */
.pillrow{display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:14px}
.pillrow > .btn{min-height:50px;padding:12px 18px 11px;font-size:17px}
@media (max-width:1279px){
  .pillrow{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
}
@media (max-width:599px){
  .pillrow{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* ---------- C18. a large email link (.biglink) ----------
   An address set large in Fraunces with a Peach Red line under it. It shrinks with the screen and can break inside
   the address as a last resort, so it never runs past the edge of a 320 wide screen. Works on paper and on olive.
   Inside .split (C4) it is sized for the half-page column, so "info@masterchim.com" stays on one line at every width.
   Markup: a.biglink[href="mailto:..."] */
.biglink{display:inline-block;max-width:100%;padding-block:10px;font-family:var(--serif);font-weight:900;font-variation-settings:"opsz" 72;font-size:clamp(22px, 6.4vw, 54px);line-height:1.15;letter-spacing:-.01em;color:inherit;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:.09em;text-underline-offset:.16em;overflow-wrap:anywhere}
.biglink:hover{text-decoration-color:currentColor}
/* In a two-column .split the address has about half the page to itself, so it is set smaller there and stays on one line. */
@media (min-width:900px){
  .split .biglink{font-size:clamp(22px, 3.7vw, 54px)}
}
@media (min-width:600px) and (max-width:899px){
  .split.keep2 .biglink{font-size:clamp(22px, 3.6vw, 32px)}
}

/* ---------- C19. a small form inside a card (.ncard > form, .offer > form) ----------
   The one-box signup form inside a numbered card or a product card: put form.formcard--stack straight into the card.
   It sits at the bottom of the card, as a button would, and takes the card's width.
   Markup: article.card.ncard > ... + form.formcard--stack > div.form-row > div.form-row__email (label.field-label + input.field) + button.btn
           (+ p.fud under the row) */
.ncard > form,.offer > form{width:100%;margin-top:auto}
.ncard > form .form-row,.offer > form .form-row{margin-top:0}
.ncard > form .fud,.offer > form .fud{margin-top:12px}

/* ---------- C20. a number pill on a dark card ----------
   The shared .num-pill is olive, for a paper card. Inside a dark card (.dcard) it turns Naples Yellow with olive words. */
.dcard .num-pill{background:var(--paper);color:var(--ink)}

/* ---------- C21. a titled table of rows (.rowtable) ----------
   A bordered table with a title bar and rows of two parts: a name and a line ("Layer One: ..." and what it is).
   Works on paper and on olive. On phones each row puts the line under the name.
   Markup: div.rowtable > h3.title.rowtable__h + dl.rowtable__rows > div.rowtable__row > dt + dd */
.rowtable{border:2px solid var(--ink);border-radius:20px;overflow:hidden;background:var(--paper)}
.rowtable__h{padding:20px 28px 18px;font-size:26px;border-bottom:2px solid var(--ink);background:var(--paper-deep), var(--paper)}
.rowtable__rows{margin:0}
.rowtable__row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6px 28px;align-items:baseline;padding:18px 28px}
.rowtable__row + .rowtable__row{border-top:2px solid rgba(37,49,34,.2)}
.rowtable__row dt{font-weight:800;font-size:19px;line-height:1.35}
.rowtable__row dd{margin:0;font-size:19px;line-height:1.5}
.on-dark .rowtable{border-color:var(--line-dark);background:rgba(251,230,160,.035)}
.on-dark .rowtable__h{border-bottom-color:var(--line-dark);background:rgba(251,230,160,.06)}
.on-dark .rowtable__row + .rowtable__row{border-top-color:var(--line-dark)}
@media (max-width:699px){
  .rowtable__h{padding:16px 20px 14px;font-size:23px}
  .rowtable__row{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 20px}
  .rowtable__row dt,.rowtable__row dd{font-size:17px}
}

/* ---------- C22. small additions ----------
   .fit                      the two-card checklist (A5) is one column from 899 wide down, so a card is never squeezed
                             to 350px on a tablet (review item S3). It was 760.
   main > .sec[id]           a link to a band (href="#application") stops with the band's headline clear of the header
   .stack-head--sec          the chip-and-headline block (A17) as the head of a band: space under it and a line length
   .chip--block              a chip whose words can run to two lines, anywhere (A7 only knew it inside a product card)
   .lform__break             the photo between two questions of a long form (A10) takes a second shape for phones:
                             style="--ar:21/9;--ar-p:16/9"
   .story p + p              more than one paragraph in the homepage's story card
   .ihero__lede + .ihero__lede   a second paragraph in the inner-page hero */
@media (max-width:899px){
  .fit{grid-template-columns:minmax(0,1fr);gap:22px}
}
main > .sec[id]{scroll-margin-top:28px}
.stack-head--sec{max-width:900px;margin-bottom:52px}
.chip--block{border-radius:14px;line-height:1.3}
.story p + p{margin-top:16px}
.ihero__lede + .ihero__lede{margin-top:14px}
@media (max-width:599px){
  .stack-head--sec{margin-bottom:30px}
  .lform__break .frame{aspect-ratio:var(--ar-p, var(--ar, 16/9))}
}

/* 2026-10-10, after the review of the fix rounds (03-review-v6-fixes.md): two phone rules. Without them Safari's engine
   draws the photo in the photo-and-sentence card 3 by 2 pixels, and draws the Questions photo at its file's own width
   (it arrives as a dot and jumps when the picture loads). Same cause as the homepage's origin, pain and wall grids.
   Chrome draws the same pixels with or without them. */
@media (max-width:599px){
  .phline__ph{width:100%}
  .faq.photo-last{align-items:stretch}
}
/* A select box keeps the answer he picked inside its own edge. On a 320px phone the Safari engine drew a long answer
   past the right edge and made the page 10px wider than the screen (found in Wave 2, 2026-10-10). */
.lform select.field{overflow:hidden;white-space:nowrap}