/* ==========================================================================
   theme-drafting.css : saptarishiai.com, frame "Drafting" (Cutaway)
   SOP-010 Lane C (Web). Picked at PA-23 (D32, 2026-10-07); revision 4 approved
   at PA-28 (D33) and ported here (REQ-115). Source of truth for the look:
   design-system/proposals/REQ-104_site-revamp/src/cutaway-v4.css, gated there.

   Styles the markup contract website/src/page.sample.html and never changes it.
   Every colour is a colour-atlas ramp step from design-system/tokens.json,
   named by its step below. Mobile first: base rules are the 360px phone.
   ========================================================================== */

/* ---------- Fonts (vendored OFL files; build rewrites these urls) --------- */

@font-face {
  font-family: "Playfair Display";
  src: url('fonts/playfair.0b50a068.woff2') format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anek Latin";
  src: url('fonts/anek-latin.0a725817.woff2') format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url('fonts/plex-mono-medium.f47e7768.woff2') format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour-atlas ramp steps (tokens.json ramps, PA-22), resolved; the step is the name.
     Regenerate from design-system/proposals/REQ-104_site-revamp/src/cutaway-v4.css if a ramp moves. */
  --carbon-d1: #0B0D0F;
  --lime-l11: #516704;
  --lime-l12: #253100;
  --lime-l2: #F3F8E9;
  --lime-l3: #E7F2D4;
  --lime-l4: #DCEBC0;
  --lime-l5: #D0E3AA;
  --lime-l6: #C2D992;
  --lime-l7: #ABC869;
  --lime-l9: #CCFF00;
  --night-l11: #5A5E65;
  --night-l12: #282B32;
  --night-l2: #F2F6FE;
  --night-l3: #E5EDFC;
  --night-l4: #DCE4F3;
  --night-l5: #D3DAE9;
  --night-l6: #C6CEDD;
  --night-l7: #B3BBC9;
  --night-l8: #9AA2B0;
  --night-l9: #6D727A;
  --paper-l1: #FFFCF2;
  --paper-l2: #F8F6ED;
  --peacock-l11: #016495;
  --peacock-l12: #012F48;
  --peacock-l2: #EFF7FD;
  --peacock-l3: #DFEFFC;
  --peacock-l4: #D0E8F9;
  --peacock-l5: #C0DFF5;
  --peacock-l6: #AED3EF;
  --peacock-l7: #90C1E5;
  --peacock-l9: #0482C0;
  --vermilion-l11: #AD1901;
  --vermilion-l12: #560700;
  --vermilion-l2: #FFF3F0;
  --vermilion-l3: #FEE7E2;
  --vermilion-l4: #FEDBD3;
  --vermilion-l5: #FECDC3;
  --vermilion-l6: #FEBBAE;
  --vermilion-l7: #FE9C8A;
  --vermilion-l9: #FF3A1D;
  /* violet / Jamuni light steps (tokens.json ramps.families.jamuni.light): the Social & Content
     card colour since D44 (REQ-122, SOP-010 v1.23); fill step 9, rules and coloured words step 10 */
  --jamuni-l2: #F8F3FF;
  --jamuni-l3: #F1E8FE;
  --jamuni-l4: #EBDDFE;
  --jamuni-l5: #E4D0FE;
  --jamuni-l6: #DBBFFE;
  --jamuni-l7: #CEA4FF;
  --jamuni-l9: #9A04F1;
  --jamuni-l10: #8901D8;
  --jamuni-l12: #3E0065;
  --black: #000000;
  --white: #FFFFFF;
}

:root {
  color-scheme: light;
  --ground: var(--white);
  --paper: var(--paper-l1);
  --paper-2: var(--paper-l2);
  --panel: var(--night-l2);
  --grid: var(--night-l3);
  --grid-major: var(--night-l4);
  --ink: var(--night-l12);
  --sub: var(--night-l11);
  --rule: var(--night-l7);
  --hair: var(--night-l6);
  --dim: var(--night-l8);
  --on-fill: var(--carbon-d1);

  --p-sys: var(--peacock-l11);
  --p-claude: var(--vermilion-l11);
  --p-of: var(--lime-l11);

  --f-display: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --f-body: "Anek Latin", "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --f-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --max: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* programme colours: one meaning each (the programme), set by data, never by position */
[data-program="saptarishi-systems"], [data-palette="mayur"], [data-family="peacock"] {
  --p: var(--p-sys); --fill: var(--peacock-l11); --fill-ink: var(--white);
  --f2: var(--peacock-l2); --f3: var(--peacock-l3); --f4: var(--peacock-l4); --f5: var(--peacock-l5);
  --f6: var(--peacock-l6); --f7: var(--peacock-l7); --f9: var(--peacock-l9); --f11: var(--peacock-l11); --f12: var(--peacock-l12);
}
[data-program="claude-for-your-job"], [data-palette="ember"], [data-family="vermilion"] {
  --p: var(--p-claude); --fill: var(--vermilion-l9); --fill-ink: var(--carbon-d1);
  --f2: var(--vermilion-l2); --f3: var(--vermilion-l3); --f4: var(--vermilion-l4); --f5: var(--vermilion-l5);
  --f6: var(--vermilion-l6); --f7: var(--vermilion-l7); --f9: var(--vermilion-l9); --f11: var(--vermilion-l11); --f12: var(--vermilion-l12);
}
[data-program="orderflow-academy"], [data-palette="signal"], [data-family="lime"] {
  --p: var(--p-of); --fill: var(--lime-l9); --fill-ink: var(--carbon-d1);
  --f2: var(--lime-l2); --f3: var(--lime-l3); --f4: var(--lime-l4); --f5: var(--lime-l5);
  --f6: var(--lime-l6); --f7: var(--lime-l7); --f9: var(--lime-l9); --f11: var(--lime-l11); --f12: var(--lime-l12);
}
/* an empty slot (stretch test only): neutral graphite, no programme colour */
[data-program="slot"] {
  --p: var(--night-l12); --fill: var(--night-l11); --fill-ink: var(--white);
  --f2: var(--night-l2); --f3: var(--night-l3); --f4: var(--night-l4); --f5: var(--night-l5);
  --f6: var(--night-l6); --f7: var(--night-l7); --f9: var(--night-l9); --f11: var(--night-l11); --f12: var(--night-l12);
}
/* card colours (tokens.json card_colours; D44, REQ-122, SOP-010 v1.23): the colour of a line of
   business. A card, its door group, its doors, its "What's inside" drawing and its How to start row
   carry data-card-colour. Written after the programme rules, so on the same element it wins.
   Violet is the Social & Content card: fill step 9 (white ink on it, 5.7:1), rules, outlines and
   coloured words step 10 (6.9:1 on white). The other three restate their programme's values. */
[data-card-colour="jamuni"] {
  --p: var(--jamuni-l10); --fill: var(--jamuni-l9); --fill-ink: var(--white);
  --f2: var(--jamuni-l2); --f3: var(--jamuni-l3); --f4: var(--jamuni-l4); --f5: var(--jamuni-l5);
  --f6: var(--jamuni-l6); --f7: var(--jamuni-l7); --f9: var(--jamuni-l9); --f11: var(--jamuni-l10); --f12: var(--jamuni-l12);
}
[data-card-colour="peacock"] {
  --p: var(--p-sys); --fill: var(--peacock-l11); --fill-ink: var(--white);
  --f2: var(--peacock-l2); --f3: var(--peacock-l3); --f4: var(--peacock-l4); --f5: var(--peacock-l5);
  --f6: var(--peacock-l6); --f7: var(--peacock-l7); --f9: var(--peacock-l9); --f11: var(--peacock-l11); --f12: var(--peacock-l12);
}
[data-card-colour="vermilion"] {
  --p: var(--p-claude); --fill: var(--vermilion-l9); --fill-ink: var(--carbon-d1);
  --f2: var(--vermilion-l2); --f3: var(--vermilion-l3); --f4: var(--vermilion-l4); --f5: var(--vermilion-l5);
  --f6: var(--vermilion-l6); --f7: var(--vermilion-l7); --f9: var(--vermilion-l9); --f11: var(--vermilion-l11); --f12: var(--vermilion-l12);
}
[data-card-colour="lime"] {
  --p: var(--p-of); --fill: var(--lime-l9); --fill-ink: var(--carbon-d1);
  --f2: var(--lime-l2); --f3: var(--lime-l3); --f4: var(--lime-l4); --f5: var(--lime-l5);
  --f6: var(--lime-l6); --f7: var(--lime-l7); --f9: var(--lime-l9); --f11: var(--lime-l11); --f12: var(--lime-l12);
}
/* markers use the step 9 fills: the step 11 paper colours of Claude and Orderflow are 1.7 apart for a
   colour-blind reader (web_gate W19), the fills 26.2 */
[data-palette] { --p-accent: var(--fill); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 18px/1.55 var(--f-body); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, h4, h5 { text-wrap: balance; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 10; background: var(--ink); color: var(--ground); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.demo-banner { background: var(--panel); color: var(--sub); text-align: center; font-size: 14px; padding: 8px var(--gutter); border-bottom: 1px solid var(--rule); }

/* a drafting grid, only where things are drawn */
.hero__visual, .parts__drawing {
  background-color: var(--panel);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ---- header ------------------------------------------------------------- */
.site-header {
  max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 3px double var(--ink);
}
.site-header__brand { display: inline-flex; min-height: 44px; align-items: center; }
.site-header__mark { width: 176px; height: auto; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  text-decoration: none; font-weight: 600; font-size: 17px; color: var(--ink);
  position: relative;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav__link:hover::after { transform: scaleX(1); }

main { display: block; }
main > section { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* ---- hero: the h1, then every offer as a door, grouped by card ---------- */
/* REQ-122: the drawing is ONE figure after the doors (in the page code too). REQ-123: on the
   home page it is the band (.hero--band, below), with no title block */
.hero { padding-block: clamp(20px, 3vw, 40px) 40px; }
.hero__inner {
  display: grid; gap: 0 clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "doors" "note" "figure";
}
.hero__title { grid-area: title; }
.door-groups { grid-area: doors; }
.hero__note { grid-area: note; }
.hero__figure { grid-area: figure; margin-top: 40px; min-width: 0; }

.hero__title {
  font: 700 clamp(44px, 7.4vw, 104px)/1 var(--f-display); letter-spacing: -.02em; max-width: 17ch;
}
.hero__note {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--sub); font-size: 17px;
}
.hero__note::before {
  content: ""; width: 6px; height: 12px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(40deg); margin: -4px 4px 0 3px; flex: none;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 0;
  font: 600 18px/1 var(--f-body); text-decoration: none; letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s;
}
.btn--primary { background: var(--ink); color: var(--ground); border: 1.5px solid var(--ink); }
.btn--primary:hover, .btn--cta:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 0 var(--ink); }

/* the hero drawing */
.hero__visual {
  position: relative; aspect-ratio: 16 / 11; width: 100%;
  border: 1.5px solid var(--ink);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__canvas.is-over { cursor: pointer; }
.hero__toggle {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--ground); color: var(--ink); border: 1.5px solid var(--ink); cursor: pointer; border-radius: 0;
}
.hero__toggle svg { width: 14px; height: 14px; }
.hero__toggle .icon-play { display: none; }
.hero__toggle[aria-pressed="true"] .icon-play { display: block; }
.hero__toggle[aria-pressed="true"] .icon-pause { display: none; }


/* the door groups (REQ-122): one per card, in card order. A rule in the card's fill opens each group
   (the fill, never --p: Claude's and Orderflow's step 11 words are 1.7 apart for a colour-blind
   reader, and web_gate W19 reads this ::before background as the card's marker); under it the
   group's heading in ink (words stay ink, SOP-010 4.4), then its doors */
.door-groups { margin-top: clamp(22px, 3vw, 40px); display: grid; gap: clamp(26px, 3vw, 34px); }
.door-group { position: relative; padding-top: 16px; }
.door-group::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--fill); border-bottom: 1px solid var(--p);
}
.door-group__title { font: 600 clamp(17px, 1.4vw, 19px)/1.3 var(--f-body); color: var(--ink); margin-bottom: 4px; }
.door-group--lead .door-group__title {
  font: 700 clamp(28px, 3vw, 40px)/1.08 var(--f-display); letter-spacing: -.012em; max-width: 22ch; margin-bottom: 8px;
}

/* the doors: the visitor's need first, then the name and the price; the arrow is the card's fill */
.doors { display: grid; }
.door {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) 44px; gap: 4px 16px; align-items: center;
  padding: 14px 0 15px; text-decoration: none; border-bottom: 1px solid var(--rule); position: relative;
}
.door::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 4px; width: 0; background: var(--fill);
  border-bottom: 1px solid var(--p); transition: width .5s var(--ease);
}
.door:hover::before, .door:focus-visible::before, .door.is-hi::before { width: 100%; }
.door__mark {
  grid-row: 1 / span 2; align-self: start; margin-top: 7px; width: 14px; height: 14px;
  background: var(--fill); border: 1.5px solid var(--p);
}
.door__need { font: 600 clamp(19px, 1.7vw, 23px)/1.25 var(--f-body); color: var(--ink); }
.door__meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; color: var(--sub); font-size: 16px; }
.door__price { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.door__arrow {
  grid-column: 3; grid-row: 1 / span 2; width: 44px; height: 44px; padding: 11px;
  border: 1.5px solid var(--p); background: var(--fill); color: var(--fill-ink); transition: transform .3s var(--ease);
}
.door .door__arrow { transform: rotate(90deg); }   /* points down: the row jumps down the page, it opens nothing */
.door:hover .door__arrow, .door.is-hi .door__arrow { transform: rotate(90deg) translateX(4px); }

/* ---- section titles carry a dimension line ------------------------------ */
.build, .courses, .trust, .final { padding-block: clamp(36px, 5vw, 72px); }
.section-title {
  font: 700 clamp(36px, 4.6vw, 64px)/1.03 var(--f-display); letter-spacing: -.012em;
  margin-bottom: clamp(24px, 3.5vw, 44px);
}
.section-title::before {
  content: ""; display: block; height: 11px; margin-bottom: 22px;
  border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat;
}
.courses__list { display: grid; gap: 48px; }

/* ---- "What's inside": each card's own exploded drawing and its parts list --- */
.parts {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; align-items: center;
  padding-top: 28px; border-top: 1.5px solid var(--ink);
}
.parts__drawing { position: relative; aspect-ratio: 4 / 3; border: 1.5px solid var(--ink); }
.parts__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.parts__list { display: grid; gap: 4px; }
.parts__item {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; padding: 7px 10px 7px 0;
  font-size: 18px; cursor: default; transition: background-color .2s, padding .3s var(--ease);
}
.parts__item.is-hi { background: var(--f2); padding-left: 10px; }
.parts__letter {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--p); font: 600 16px/1 var(--f-body); background: var(--fill); color: var(--fill-ink);
}
.course--slot { min-height: 280px; align-content: start; border-style: dashed; }
.course--slot .course__hook { font-size: clamp(28px, 3vw, 40px); color: var(--sub); }

/* ---- cards are drawing sheets -------------------------------------------- */
.course {
  position: relative; background: var(--paper); border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--rule);
  padding: clamp(30px, 4.6vw, 64px); padding-bottom: clamp(72px, 7vw, 96px);
  display: grid; gap: 22px 56px; grid-template-columns: minmax(0, 1fr);
}
.course::before, .course::after {
  content: ""; position: absolute; left: 11px; right: 11px; height: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 12.5%);
}
.course::before { top: 0; }
.course::after { bottom: 0; }
.chip {
  justify-self: start; display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px;
  border: 1.5px solid var(--p); font: 600 16px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase;
}
.course__name { font: 600 clamp(26px, 2.4vw, 32px)/1.15 var(--f-display); color: var(--p); }
.course__hook { font: 700 clamp(40px, 4.8vw, 68px)/1.02 var(--f-display); letter-spacing: -.015em; max-width: 15ch; text-wrap: balance; }
.course__pitch { max-width: 62ch; font-size: 19px; }
.facts { display: grid; margin: 0; border-top: 1.5px solid var(--ink); }
.facts__row { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.facts__term { color: var(--sub); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 16px; }
.facts__value { margin: 0; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.price__amount { font: 700 clamp(48px, 5vw, 66px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.price__note { color: var(--sub); font-size: 17px; }
.course__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.btn--cta { background: var(--fill); color: var(--fill-ink); border: 1.5px solid var(--p); }
.btn--soon { background: transparent; color: var(--sub); border: 1.5px dashed var(--rule); }
.course__cta-note { color: var(--sub); font-size: 16px; }
.prompt-card { margin: 0; background: var(--ground); border: 1.5px solid var(--ink); padding: 20px 22px; }
.prompt-card__label { color: var(--sub); font-size: 16px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--rule); }
.prompt-card__text { margin: 0; white-space: pre-wrap; font: 500 17px/1.6 var(--f-mono); color: var(--ink); }
.course__body { display: grid; gap: 28px 48px; grid-template-columns: minmax(0, 1fr); padding-top: 28px; border-top: 1.5px solid var(--ink); }
.course__block-title { font: 600 17px/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--sub); margin-bottom: 10px; }
.ticks { display: grid; gap: 10px; }
.ticks__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.tick { width: 20px; height: 20px; color: var(--p, var(--ink)); margin-top: 3px; }
.course__independence, .disclaimer { color: var(--sub); font-size: 14px; line-height: 1.5; }
.disclaimer { border: 1px solid var(--ink); padding: 14px 16px; background: var(--ground); }

.sheetblock {
  position: absolute; right: 11px; bottom: 11px; display: grid; grid-template-columns: auto auto auto;
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--ground); font-size: 14px; max-width: calc(100% - 22px);
}
.sheetblock__cell { padding: 6px 12px; border-left: 1px solid var(--rule); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheetblock__cell:first-child { border-left: 0; }

/* the Systems sheet */
.plans { display: grid; gap: 18px; }
.plans__title { font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--f-display); }
.plans__hint { display: none; }
.plans__list { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border: 1.5px solid var(--ink); background: var(--ink); gap: 1px; }
.plan { background: var(--ground); padding: 20px; display: flex; flex-direction: column; gap: 10px; align-content: start; transition: background-color .25s; }
.plan:hover { background: var(--f2); }
.plan__fit { color: var(--sub); font-size: 16px; line-height: 1.4; }
.plan__name { font: 700 26px/1.1 var(--f-display); color: var(--p); }
.tree { display: grid; gap: 6px; border-left: 1px solid var(--rule); padding-left: 14px; }
.tree__item { font-size: 16px; line-height: 1.4; position: relative; }
.tree__item::before { content: ""; position: absolute; left: -14px; top: .7em; width: 9px; height: 1px; background: var(--rule); }
.tree__item--base { color: var(--p); font-weight: 600; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--rule); }   /* wraps: a two-step note (Growth) drops below its amount */
.plan__amount { font: 700 26px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.plan__note { color: var(--sub); font-size: 16px; }
.plans__foot { color: var(--sub); font-size: 16px; }
/* step 2 (2026-10-13): an entry that stands as an offer of its own on a card (its own door,
   head, button, drawing and steps) opens with a ruled line, like a new sheet in the set */
.plans--offer { gap: 22px; margin-top: 18px; padding-top: 34px; border-top: 1.5px solid var(--ink); }
.plans__hook { font: 700 clamp(30px, 3.4vw, 46px)/1.05 var(--f-display); letter-spacing: -.01em; max-width: 18ch; text-wrap: balance; }
.plans__pitch { max-width: 62ch; font-size: 19px; }
.course__terms { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

.steps, .next__steps { display: grid; gap: 16px; counter-reset: step; }
.steps__item, .next__step { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.steps__item::before, .next__step::before {
  content: counter(step); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--p, var(--ink)); font: 600 16px/1 var(--f-body); background: var(--ground);
}

/* ---- trust: the drawing's notes ------------------------------------------ */
.trust__list { display: grid; grid-template-columns: minmax(0, 1fr); border: 1.5px solid var(--ink); gap: 1px; background: var(--rule); }
.trust__item { padding: 26px; display: grid; grid-template-columns: 22px 1fr; gap: 6px 14px; background: var(--ground); }
.trust__item .tick { grid-row: 1 / span 2; color: var(--ink); }
.trust__title { font: 600 21px/1.3 var(--f-body); }
.trust__text { color: var(--sub); grid-column: 2; }
.trust__link { color: var(--ink); font-weight: 600; }

/* ---- final ---------------------------------------------------------------- */
.final__list { display: grid; border-top: 1.5px solid var(--ink); }
.final__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 22px 0;
  border-bottom: 1px solid var(--rule); position: relative;
}
.final__row::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 4px; background: var(--fill); border-bottom: 1px solid var(--p); }
.final__name { font: 600 24px/1.2 var(--f-body); }
.final__when { color: var(--sub); }
.final__cta { justify-self: start; }
.final__soon { color: var(--sub); font-size: 14px; margin-top: 12px; }
.next { margin-top: 56px; display: grid; gap: 22px; }
.next__title { font: 700 clamp(28px, 3vw, 38px)/1.1 var(--f-display); }
.next__steps { max-width: 62ch; }
.next__lead { font: 600 19px/1.3 var(--f-body); margin-top: 6px; }
.next__line { color: var(--sub); max-width: 62ch; margin-top: -12px; }

.demo-form { margin: 0 auto 80px; padding: 32px var(--gutter); border: 1.5px dashed var(--ink); max-width: var(--max); }
.demo-form > * { max-width: 62ch; }
.demo-form__title { font: 700 30px/1.1 var(--f-display); margin-bottom: 10px; }
.demo-form__text { color: var(--sub); }

/* ---- footer --------------------------------------------------------------- */
.site-footer {
  max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 64px; border-top: 3px double var(--ink);
  display: grid; gap: 18px;
}
.site-footer__mark img { width: 200px; }
.site-footer__list { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-footer__item { color: var(--sub); }
.site-footer__link, .site-footer__email { color: var(--ink); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.site-footer__small { color: var(--sub); font-size: 14px; }

/* ---- wider ---------------------------------------------------------------- */
@media (min-width: 760px) {
  .course__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns: an add-on, or an odd last setup, takes the whole row (the list's ink
     background drew an empty cell as a black block, live 2026-10-12 at 900 px) */
  .course--service .plan--addon { grid-column: 1 / -1; }
  .course--service .plans__list[data-setups="1"] > .plan:nth-child(1),
  .course--service .plans__list[data-setups="3"] > .plan:nth-child(3),
  .course--service .plans__list[data-setups="5"] > .plan:nth-child(5) { grid-column: 1 / -1; }
  /* plan names line up when one fit line wraps and its neighbour's does not */
  .course--service .plan:not(.plan--addon) .plan__fit { min-height: 2.8em; }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final__row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
  .final__cta { justify-self: end; }
  .parts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer { grid-template-columns: auto 1fr; align-items: center; }
  .site-footer__mark img { width: 320px; }
  .site-footer__small { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  /* title across; doors and note left; the figure (drawing + title block, one unit) right,
     its top level with the doors' top. No filler row: the figure's own height is its height */
  .hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "title title"
      "doors figure"
      "note  figure";
  }
  .door-groups { margin-top: 44px; align-self: start; }
  .hero__figure { margin-top: 44px; align-self: start; }
  .course > .parts { grid-column: 1 / -1; grid-row: auto; }
  .course { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* with a prompt card: the prompt sits beside the hook, the facts beside the pitch */
  .course > .chip { grid-column: 1; grid-row: 1; }
  .course > .course__name { grid-column: 1; grid-row: 2; }
  .course > .course__hook { grid-column: 1; grid-row: 3; }
  .course > .course__pitch { grid-column: 1; grid-row: 4 / span 3; align-self: start; }
  .course > .prompt-card { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .course > .facts { grid-column: 2; grid-row: 4; align-self: start; }
  .course > .price { grid-column: 2; grid-row: 5; align-self: start; }
  .course > .course__cta { grid-column: 2; grid-row: 6; align-self: start; }
  .course:not(:has(.prompt-card)) > .course__pitch { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .course:not(:has(.prompt-card)) > .facts { grid-column: 1; grid-row: 4 / span 2; }
  .course:not(:has(.prompt-card)) > .price { grid-row: 4; align-self: start; }
  .course:not(:has(.prompt-card)) > .course__cta { grid-row: 5; }
  .course > .course__body, .course > .course__independence, .course > .disclaimer { grid-column: 1 / -1; grid-row: auto; }
  .course--service > .plans { grid-column: 1 / -1; grid-row: 4; }
  .course--service > .plans--offer { grid-row: auto; }   /* own entries follow the card's steps, never over row 4 */
  .course--service > .course__cta { grid-column: 1 / -1; grid-row: 5; }
  .course--service .plans__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* as many columns as setups (data-setups), so no setup row ends in an empty cell */
  .course--service .plans__list[data-setups="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course--service .plans__list[data-setups="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course--service .plans__list[data-setups="3"] > .plan:nth-child(3) { grid-column: auto; }
  .course--service .plan--addon { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 16rem; align-items: center; column-gap: 32px; }
  .course--service .plan--addon .plan__price { justify-content: flex-end; }   /* add-on rows share one price column */
  .course--service .plan--addon .plan__fit { grid-column: 1; }
  .course--service .plan--addon .plan__name { grid-column: 1; grid-row: 2; }
  .course--service .plan--addon .tree { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .course--service .plan--addon .plan__price { grid-column: 3; grid-row: 1 / span 2; border-top: 0; padding-top: 0; }
  .trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust__item { grid-template-columns: 1fr; }
  .trust__item .tick { grid-row: auto; }
  .trust__text { grid-column: 1; }
}
/* the figure stays beside the doors as they are read, wherever it fits the screen: the figure
   with its title block is at most about 460px tall from 1040px wide, so 520px of height holds it
   (was 720px; a 1366 x 768 laptop shows about 650px, and the blank column came back there:
   fresh review 2026-10-14). Below that it scrolls away like the rest (PLAN 7) */
@media (min-width: 1040px) and (min-height: 520px) {
  .hero__figure { position: sticky; top: 16px; }
}
/* REQ-123 (D47): the band. The home page's drawing is a strip with no frame and no title block:
   band.js draws a temple border on the page's own white, its pause button at the right end.
   On a phone it stays where the drawing was, after the doors, so the first price stays high
   (REQ-122 R3). From 1040px it runs across the top under the header, and the hero below it is
   six columns: the h1 on the left beside the lead group, then the other three groups in thirds
   (a subgrid of .door-groups, gap normal so its thirds share the hero's own column gap). A
   browser without subgrid keeps the layout above, the band in the figure column. */
.hero--band .hero__visual { aspect-ratio: auto; height: clamp(150px, 24vw, 184px); border: 0; background: none; }
@supports (grid-template-columns: subgrid) {
  @media (min-width: 1040px) {
    .hero--band { padding-top: 14px; }
    .hero--band .hero__inner {
      grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; grid-template-areas: none;
    }
    .hero--band .hero__figure { grid-column: 1 / -1; grid-row: 1; margin-top: 0; position: static; }
    .hero--band .hero__title {
      grid-column: 1 / 4; grid-row: 2; margin-top: 40px; align-self: start;
      font-size: clamp(52px, 5.4vw, 80px); text-wrap: balance;
    }
    .hero--band .door-groups {
      grid-column: 1 / -1; grid-row: 2 / 4; margin-top: 0; align-self: stretch;
      grid-template-columns: subgrid; grid-template-rows: subgrid; gap: normal;
    }
    .hero--band .door-group { grid-row: 2; margin-top: 40px; align-self: start; }
    .hero--band .door-group--lead { grid-column: 4 / -1; grid-row: 1; margin-top: 44px; }
    .hero--band .door-group:nth-child(2) { grid-column: 1 / 3; }
    .hero--band .door-group:nth-child(3) { grid-column: 3 / 5; }
    .hero--band .door-group:nth-child(4) { grid-column: 5 / -1; }
    .hero--band .hero__note { grid-column: 1 / -1; grid-row: 4; margin-top: 28px; }
  }
}
@media (max-width: 759px) {
  /* a phone reaches the first price sooner (REQ-122 R3: within 0.6 of a 390 x 664 screen):
     the four nav links on one row from 360px (each still 44px tall and wider than 44px, 16px
     type), a tighter header and hero top, and the lead heading at 26px (display floor 24) */
  .hero { padding-top: 8px; }
  .door-groups { margin-top: 24px; }   /* the content group's rule reads as its own, not as an underline of the h1 (fresh review) */
  .door-group--lead { padding-top: 10px; }
  .door-group--lead .door-group__title { font-size: 26px; line-height: 1.04; margin-bottom: 4px; }
  .course { padding: 26px 20px 64px; box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--rule); }
  .course::before, .course::after { left: 7px; right: 7px; height: 6px; }
  .sheetblock { right: 7px; bottom: 7px; max-width: calc(100% - 14px); }
  .plans__hint { display: block; color: var(--sub); font-size: 16px; }
  .course--service .plans__list { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
  .course--service .plan { scroll-snap-align: start; }
  .facts__row { grid-template-columns: 1fr; gap: 2px; }
  .site-nav__list { gap: 0 2px; }
  .site-nav__link { padding: 0 7px; font-size: 16px; }
  .site-nav__link::after { left: 7px; right: 7px; }
  .site-header { padding-block: 4px; row-gap: 0; }
  .sheetblock { grid-template-columns: auto auto; }
  .sheetblock__cell:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- REQ-115: the pieces production adds to the v4 proposal --------------- */
.hero__cta.btn { justify-self: start; margin-top: 28px; }          /* the 404 page's one button */
.short-link { max-width: var(--max); margin: 40px auto; padding-inline: var(--gutter); }
.short-link a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.course__wa { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center;
  text-decoration-color: var(--p, var(--ink)); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.site-footer__wa { color: var(--ink); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.next__ask { margin-top: 8px; max-width: 62ch; color: var(--sub); }
.next__link { color: var(--ink); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }