/* BourneWise content pages — shared editorial layout, borders, and motion.
   Intentionally not loaded by index.html. */

body:not([data-page="app"]){
  --cp-ink:var(--ink,#171512);
  --cp-accent:var(--bw-palette-gem,var(--terracotta,#B5502C));
  --cp-on-accent:var(--bw-palette-on-gem,var(--paper,#E7E1D7));
  --cp-carrier:color-mix(in srgb,var(--paper-raised,#DED8CD) 84%,transparent);
  --cp-carrier-strong:color-mix(in srgb,var(--paper-raised,#DED8CD) 94%,transparent);
  --cp-tint:color-mix(in srgb,var(--cp-accent) 8%,var(--paper-raised,#DED8CD));
  --cp-line:color-mix(in srgb,var(--cp-ink) 15%,transparent);
  --cp-line-strong:color-mix(in srgb,var(--cp-ink) 29%,transparent);
  --cp-line-accent:color-mix(in srgb,var(--cp-accent) 54%,transparent);
  --cp-archive:#C8AD83;
  --cp-archive-ink:#E3D7C4;
  /* These were a second radius family holding eight-value wobble radii, and
     because the values lived in a variable rather than in a border-radius
     declaration they survived the pass that collapsed every literal radius on
     the site. They are why the settings panel still computed 27px 30px per
     corner while everything beside it was a crisp 14px. Point them at the one
     scale rather than deleting them, so the pages using them keep working. */
  --cp-radius-lg:var(--ui-radius);
  --cp-radius-md:var(--ui-radius);
  --cp-radius-sm:var(--ui-radius-small);
  --cp-shadow:0 1px 0 rgba(22,19,15,.065);
  --cp-fast:140ms;
  --cp-base:220ms;
  --cp-enter:420ms;
  --cp-ease-out:cubic-bezier(.23,1,.32,1);
  --cp-ease-in-out:cubic-bezier(.77,0,.175,1);
}

body:not([data-page="app"]) :where(button,a,input,select){-webkit-tap-highlight-color:transparent}
body:not([data-page="app"]) :where(button,a,input,select):focus-visible{
  outline:2px solid var(--cp-accent)!important;
  outline-offset:3px;
}
body:not([data-page="app"]) :where(button,a)[class]:active:not(:disabled){transform:scale(.975)}

/* One header specification across every standalone page. */
body:not([data-page="app"]) :where(.pagehead,.top){
  width:min(1180px,calc(100% - 32px));
  max-width:1180px;
  min-height:62px;
  margin:14px auto 0;
  padding:8px 16px;
  border:1px solid var(--cp-line);
  border-radius:var(--ui-radius);
  background:var(--cp-carrier);
  box-shadow:0 1px 0 rgba(22,19,15,.055);
  -webkit-backdrop-filter:blur(10px) saturate(108%);
  backdrop-filter:blur(10px) saturate(108%);
}
body:not([data-page="app"]) :where(.brand,.wordmark){min-height:var(--ctl)}
/* Wordmark typography is owned by refinement.css. Do not restate it here:
   doing so previously erased the shared .45px optical stroke and -1px
   baseline correction on every standalone page. */
body:not([data-page="app"]) :where(.pagehead .ghost,.top .exit,.nav .ghost){
  min-height:var(--ctl);
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:var(--ui-radius-pill);
  transition:color var(--cp-fast),border-color var(--cp-fast),background-color var(--cp-fast);
}
body:not([data-page="app"]) :where(.pagehead .cta,.top .cta){
  min-height:var(--ctl);
  display:inline-flex;
  align-items:center;
  padding:0 16px;
  border-radius:var(--cp-radius-sm);
  transition:background-color var(--cp-fast),color var(--cp-fast),border-color var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out);
}

/* Thin paper-glass carriers with a slightly irregular, drawn edge. */
body[data-page="about"] :where(.why-panel,.why-card,.method,.close),
body[data-page="guide"] :where(.progress,.guide-stage,.lesson-card,.example,.rate),
body[data-page="login"] :where(.card,.tabs,.prov,.field input),
body[data-page="pricing"] :where(.ledgerstrip,.annual-check,.plan,.rate-card,.estimator,.pack,.term,.field input,.field select),
body[data-page="settings"] :where(.panel,.field,.btn),
body[data-page="legal"] :where(.toc,.pull),
body[data-page="not-found"] :where(.primary,.ghostbtn){
  border:1px solid var(--cp-line);
  background-color:var(--cp-carrier);
  box-shadow:var(--cp-shadow);
}
body[data-page="about"] :where(.why-panel,.close),
body[data-page="guide"] .guide-stage,
body[data-page="login"] .card,
body[data-page="pricing"] :where(.estimator,.ledgerstrip),
body[data-page="settings"] .panel,
body[data-page="legal"] .toc{
  border-radius:var(--cp-radius-lg);
}
body[data-page="about"] :where(.why-card,.method),
body[data-page="guide"] :where(.progress,.lesson-card,.example,.rate),
body[data-page="pricing"] :where(.plan,.rate-card,.pack,.term),
body[data-page="login"] :where(.tabs,.prov,.field input),
body[data-page="settings"] :where(.field,.btn),
body[data-page="legal"] .pull,
body[data-page="not-found"] :where(.primary,.ghostbtn){
  border-radius:var(--cp-radius-md);
}

/* Static linework: one mark per major carrier, never a repeated wallpaper. */
body[data-page="about"] .why-panel,
body[data-page="guide"] .guide-stage,
body[data-page="login"] .card-hero,
body[data-page="settings"] .panel,
body[data-page="legal"] .toc{position:relative;isolation:isolate;overflow:hidden}
body[data-page="about"] .why-panel::after,
body[data-page="guide"] .guide-stage::after,
body[data-page="login"] .card-hero::after,
body[data-page="settings"] .panel::after,
body[data-page="legal"] .toc::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  width:220px;
  height:220px;
  right:-62px;
  top:-74px;
  /* Phenomena as a stencil; colour comes from CSS — see CLAUDE.md. */
  mask:url("../assets/textures/ph-orbits.svg") center/contain no-repeat;background:currentColor;opacity:.075;
  transform:rotate(-8deg);
}
body[data-page="about"] .why-panel:nth-of-type(even)::after,
body[data-page="settings"] .section:nth-of-type(even) .panel::after{
  right:auto;
  left:-74px;
  top:auto;
  bottom:-86px;
  mask-image:url("../assets/textures/ph-currents.svg");
  transform:rotate(6deg);
}

/* About: editorial hierarchy, with the explanation on a real carrier. */
body[data-page="about"] .why{width:min(1120px,calc(100% - 40px));padding:48px 0 84px}
body[data-page="about"] .why-hero{min-height:56vh;align-items:center;padding:40px 4px 64px}
body[data-page="about"] .why-hero h1{max-width:11ch}
body[data-page="about"] .hero-copy{
  padding:24px 24px;
  border:1px solid var(--cp-line);
  border-radius:var(--cp-radius-lg);
  background:var(--cp-carrier-strong);
  box-shadow:var(--cp-shadow);
}
body[data-page="about"] .why-panel{margin-top:16px;padding:clamp(30px,4.5vw,54px)}
body[data-page="about"] .why-panel{
  border-width:1px 0 0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body[data-page="about"] .why-card,
body[data-page="about"] .method{box-shadow:none;background:color-mix(in srgb,var(--cp-carrier-strong) 88%,transparent)}
body[data-page="about"] .boundary div{border-top-color:var(--cp-line)}
body[data-page="about"] .close{background:var(--cp-tint)}
body[data-page="about"] .close a{border:1px solid var(--cp-ink);transition:background-color var(--cp-fast),color var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out)}
html[data-skin="paper"] body[data-page="about"] .why-panel{
  background-color:transparent!important;
  background-image:none!important;
  border-color:var(--cp-line)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html[data-skin="paper"] body[data-page="about"] :is(.why-card,.method){
  background-color:color-mix(in srgb,var(--paper-raised) 92%,var(--cp-archive))!important;
  background-image:none!important;
  border-color:var(--cp-line)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Guide: progress is clear without animating every keyboard step. */
body[data-page="guide"] .guide-shell{gap:16px;margin-top:16px}
body[data-page="guide"] .progress{padding:24px 16px;box-shadow:none}
body[data-page="guide"] .progress-step{
  border:1px solid transparent;
  transition:color var(--cp-fast),border-color var(--cp-fast),background-color var(--cp-fast);
}
body[data-page="guide"] .progress-step .dot{
  border-color:var(--cp-line-strong);
  background:var(--cp-carrier-strong);
  transition:background-color var(--cp-base),color var(--cp-base),border-color var(--cp-base);
}
body[data-page="guide"] .progress-step.active .dot{
  transform:none;
  border-color:var(--cp-ink);
  background:var(--cp-accent);
  color:var(--cp-on-accent);
  border-radius:46% 54% 43% 57% / 55% 42% 58% 45%;
}
body[data-page="guide"] .progress-step.done .dot{border-color:var(--cp-line-accent);background:var(--cp-tint)}
body[data-page="guide"] .guide-stage{padding:clamp(30px,5vw,64px);background:var(--cp-carrier-strong)}
body[data-page="guide"] .lesson{animation:none!important}
body[data-page="guide"] :where(.lesson-card,.example,.rate){box-shadow:none;background:color-mix(in srgb,var(--paper-raised) 80%,transparent)}
body[data-page="guide"] :where(.back,.next){
  min-height:var(--ctl);
  border:1px solid var(--cp-line);
  border-radius:var(--cp-radius-sm);
  transition:background-color var(--cp-fast),border-color var(--cp-fast),color var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out);
}

/* Login: one composed carrier, legible fields, no hover travel. */
body[data-page="login"] .wrap{padding:24px 16px 40px}
body[data-page="login"] .card{width:min(460px,100%);background:var(--cp-carrier-strong)}
/* No background. This was the fourth file painting .card-hero, and an opaque
   tint at that — a solid warm band across the top of a glass card. The hero
   is part of the card, so it takes the card's material and nothing else. */
body[data-page="login"] .card-hero{border-bottom:1px solid var(--cp-line);padding:32px 32px 24px}
body[data-page="login"] .card-body{padding:24px 32px 12px}
body[data-page="login"] .card-foot{padding:12px 32px 24px}
body[data-page="login"] .tabs{box-shadow:none;background:color-mix(in srgb,var(--cp-accent) 6%,var(--paper-raised));padding:4px}
body[data-page="login"] .tab{transition:color var(--cp-fast),background-color var(--cp-fast),box-shadow var(--cp-fast)}
body[data-page="login"] .tab.on{border:1px solid var(--cp-line);box-shadow:none;background:var(--cp-carrier-strong)}
body[data-page="login"] .prov{min-height:var(--ctl);box-shadow:none;transition:border-color var(--cp-fast),background-color var(--cp-fast),color var(--cp-fast),opacity var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out)}
body[data-page="login"] .prov:hover{transform:none}
body[data-page="login"] .prov .arr{transition:color var(--cp-fast)}
body[data-page="login"] .prov:hover .arr{transform:none}
body[data-page="login"] .field input{min-height:var(--ctl);box-shadow:none;transition:border-color var(--cp-fast),box-shadow var(--cp-fast)}
body[data-page="login"] .field input:focus{border-color:var(--cp-line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-accent) 14%,transparent)}
body[data-page="login"][data-mode="register"] .reveal-row{animation:cp-field-in var(--cp-base) var(--cp-ease-out) both}

/* Pricing: hierarchy comes from borders and colour, never card lifts. */
body[data-page="pricing"] .shell{width:min(1120px,100%)}
/* 45vh of forced height for a title and two paragraphs is where this page
   reads as air. The hero is as tall as what it holds. */
body[data-page="pricing"] .hero{min-height:0;align-items:center;padding-top:24px}
body[data-page="pricing"] .ledgerstrip{box-shadow:none;background:var(--cp-tint)}
body[data-page="pricing"] .annual-check,
body[data-page="pricing"] .plan,
body[data-page="pricing"] .pack{transform:none!important}
body[data-page="pricing"] .annual-check{box-shadow:none;transition:border-color var(--cp-fast),background-color var(--cp-fast),color var(--cp-fast)}
body[data-page="pricing"] .plan{padding:24px 24px;box-shadow:none;transition:border-color var(--cp-base),background-color var(--cp-base)}
body[data-page="pricing"] .plan.featured{
  border-color:var(--cp-line-accent);
  background:color-mix(in srgb,var(--cp-accent) 7%,var(--paper-raised));
  /* see luxury-glass.css: the 3px accent slab is replaced by elevation + rim */
  box-shadow:var(--ui-glass-edge),var(--ui-shadow-raised);
}
body[data-page="pricing"] :where(.rate-card,.pack,.term){box-shadow:none}
body[data-page="pricing"] .rate-number{border-top-color:var(--cp-line)}
body[data-page="pricing"] .field :where(input,select){min-height:var(--ctl);box-shadow:none;transition:border-color var(--cp-fast),box-shadow var(--cp-fast)}
body[data-page="pricing"] .field :where(input,select):focus{outline:none;border-color:var(--cp-line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-accent) 14%,transparent)}
body[data-page="pricing"] .choose{
  border:1px solid var(--cp-line-strong);
  border-radius:var(--cp-radius-sm);
  transition:background-color var(--cp-fast),border-color var(--cp-fast),color var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out);
}
body[data-page="pricing"] .toast,
body[data-page="settings"] .toast{transition:opacity var(--cp-base),transform var(--cp-base) var(--cp-ease-out)}

/* Settings: wider reading measure and calm, structural rows. */
body[data-page="settings"] .main{scrollbar-gutter:stable}
body[data-page="settings"] .shell{max-width:760px;padding:48px 40px 94px}
body[data-page="settings"] .pagetitle{font-size:clamp(42px,5vw,62px)}
body[data-page="settings"] .subtitle{max-width:48ch}
body[data-page="settings"] .section{margin-top:48px}
body[data-page="settings"] .panel{background:var(--cp-carrier-strong);box-shadow:var(--cp-shadow)}
body[data-page="settings"] :where(.row + .row,.mrow + .mrow){border-top-color:var(--cp-line)}
body[data-page="settings"] .field{min-height:var(--ctl);background:var(--cp-carrier-strong);box-shadow:none;transition:border-color var(--cp-fast),box-shadow var(--cp-fast)}
body[data-page="settings"] .field:focus{border-color:var(--cp-line-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-accent) 14%,transparent)}
body[data-page="settings"] .btn{min-height:var(--ctl);box-shadow:none!important;transition:border-color var(--cp-fast),background-color var(--cp-fast),color var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out)}
body[data-page="settings"] .mrow{transition:background-color var(--cp-fast)}
body[data-page="settings"] .danger{border-color:color-mix(in srgb,var(--terracotta) 38%,transparent)}

/* Legal pages: quieter reading measure and a real document structure. */
body[data-page="legal"] .pagehead{max-width:980px}
body[data-page="legal"] .legal{
  max-width:780px;
  margin-top:24px;
  padding:72px 40px 104px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-page="legal"] .legal h1{max-width:12ch;font-size:clamp(44px,6.5vw,72px)}
body[data-page="legal"] .lede{max-width:62ch;font-size:18px}
body[data-page="legal"] .toc{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 32px;
  columns:auto;
  width:88%;
  margin:44px auto 0;
  padding:32px 24px 24px;
  border:0;
  border-radius:var(--ui-radius-small);
  background:color-mix(in srgb,var(--cp-archive) 88%,var(--paper-raised))!important;
  box-shadow:none;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body[data-page="legal"] .toc::before{
  content:"";
  position:absolute;
  z-index:2;
  top:14px;
  left:14px;
  width:13px;
  height:13px;
  border:2px solid color-mix(in srgb,var(--cp-ink) 74%,transparent);
  border-radius:50%;
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--paper-raised) 68%,transparent),0 0 0 1px color-mix(in srgb,var(--paper-raised) 68%,transparent);
}
html[data-skin="paper"] body[data-page="legal"] .toc{
  background-color:color-mix(in srgb,var(--cp-archive) 88%,var(--paper-raised))!important;
  background-image:none!important;
  border:0!important;
  border-radius:var(--ui-radius-small)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body[data-page="legal"] .toc a{min-height:var(--ctl-compact);display:flex;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--cp-line) 70%,transparent);transition:color var(--cp-fast),border-color var(--cp-fast)}
body[data-page="legal"] .toc a{color:color-mix(in srgb,var(--cp-ink) 82%,var(--cp-archive))}
body[data-page="legal"] .toc a .n{color:color-mix(in srgb,var(--terracotta) 72%,var(--cp-ink))}
body[data-page="legal"] .clause{max-width:72ch;margin-top:40px;scroll-margin-top:26px}
body[data-page="legal"] .clause{max-width:62ch;margin-left:auto;margin-right:auto}
body[data-page="legal"] .clause h2{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:baseline}
body[data-page="legal"] .clause h2 .n{font-size:15px;color:var(--cp-accent)}
body[data-page="legal"] .clause p,
body[data-page="legal"] .clause li{font-size:15px;line-height:1.78}
body[data-page="legal"] .clause + .clause{padding-top:24px;border-top-color:var(--cp-line)}
body[data-page="legal"] .pull{padding:16px 24px;border-left:3px solid var(--cp-accent);background:var(--cp-tint);box-shadow:none}
body[data-page="legal"] .legal-foot{border-top-color:var(--cp-line)}

/* 404: a single rare flourish can explain the missing line. */
body[data-page="not-found"] .wrap::before{
  content:"";
  position:absolute;
  width:min(520px,82vw);
  aspect-ratio:1.7;
  z-index:-1;
  mask:url("../assets/textures/ph-knot.svg") center/contain no-repeat;background:currentColor;
  opacity:.065;
}
body[data-page="not-found"] .brokenfig{animation:cp-figure-in var(--cp-enter) var(--cp-ease-out) both}
body[data-page="not-found"] .flourish path{animation-duration:1.25s;animation-timing-function:var(--cp-ease-in-out)}
body[data-page="not-found"] .primary{background:var(--cp-ink);color:var(--paper);border-color:var(--cp-ink);box-shadow:none;transition:background-color var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out)}
body[data-page="not-found"] .primary:hover{transform:none}
body[data-page="not-found"] .ghostbtn{box-shadow:none;transition:border-color var(--cp-fast),color var(--cp-fast),transform var(--cp-fast) var(--cp-ease-out)}

/* Archival editorial spreads generated for the site. They borrow the
   reference's quiet poster rhythm: image plate, small registration detail,
   then text sitting directly on the paper rather than another card. */
.editorial-spread{
  width:min(880px,92%);
  margin:clamp(58px,8vw,104px) auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,.38fr);
  align-items:end;
  gap:24px;
}
.editorial-plate,.lesson-visual{
  position:relative;
  overflow:hidden;
  background:var(--cp-archive);
  border:1px solid color-mix(in srgb,var(--cp-ink) 12%,transparent);
  border-radius:var(--ui-radius-small);
  box-shadow:none;
}
.editorial-plate img,.lesson-visual img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  filter:saturate(.88) contrast(.96);
}
.editorial-eyelet{
  position:absolute;
  z-index:2;
  top:14px;
  left:14px;
  width:18px;
  height:18px;
  border:3px solid color-mix(in srgb,var(--cp-ink) 76%,transparent);
  border-radius:50%;
  background:color-mix(in srgb,var(--paper-raised) 66%,transparent);
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--cp-ink) 12%,transparent),0 0 0 1px color-mix(in srgb,var(--paper-raised) 75%,transparent);
}
.editorial-spread figcaption{padding:0 0 16px}
.editorial-index{
  display:block;
  margin-bottom:12px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--cp-accent);
}
.editorial-spread figcaption b{
  display:block;
  font-family:var(--serif);
  font-size:clamp(24px,3vw,38px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
}
.editorial-spread figcaption p{margin-top:12px;font-size:13px;line-height:1.65;color:var(--dim)}
body[data-page="about"] .editorial-spread--reflection{direction:rtl}
body[data-page="about"] .editorial-spread--reflection>*{direction:ltr}
body[data-page="pricing"] .editorial-spread{margin-top:32px;margin-bottom:32px}
.lesson-visual{max-width:620px;margin:32px 0 4px}
.lesson-visual img{aspect-ratio:3/2}
.lesson-overview{
  max-width:720px;
  margin-top:32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  align-items:end;
  gap:16px;
}
.lesson-overview .editorial-plate{min-width:0}
.lesson-overview figcaption{padding:0 0 8px}
.lesson-overview figcaption b{display:block;font-family:var(--serif);font-size:18px;line-height:1.2}
.lesson-overview figcaption p{margin-top:8px;font-size:12px;line-height:1.55;color:var(--dim)}

@keyframes cp-field-in{from{opacity:0;transform:translateY(-6px);clip-path:inset(0 0 22%)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes cp-figure-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (hover:hover) and (pointer:fine){
  body:not([data-page="app"]) :where(.pagehead .ghost,.top .exit,.nav .ghost):hover{color:var(--cp-ink);border-color:var(--cp-line);background:color-mix(in srgb,var(--paper-raised) 72%,transparent)}
  body[data-page="guide"] .progress-step:hover{color:var(--cp-ink);border-color:var(--cp-line);background:var(--cp-tint)}
  body[data-page="login"] .prov:hover{border-color:var(--cp-line-strong);background-color:var(--cp-tint)}
  body[data-page="pricing"] :where(.annual-check,.plan,.pack):hover{border-color:var(--cp-line-strong)}
  body[data-page="settings"] .mrow:hover{background:var(--cp-tint)}
  body[data-page="legal"] :where(.toc a,.legal-foot a):hover{color:var(--cp-accent)}
  body[data-page="not-found"] .ghostbtn:hover{border-color:var(--cp-line-accent);color:var(--cp-accent)}
}

@media (max-width:800px){
  body:not([data-page="app"]) :where(.pagehead,.top){width:calc(100% - 24px);margin-top:8px;padding:8px 12px}
  body[data-page="about"] .why-hero{min-height:auto;padding-top:48px}
  body[data-page="pricing"] .hero{min-height:auto}
  body[data-page="legal"] .legal{padding:40px 24px 72px}
  .editorial-spread{width:100%;grid-template-columns:1fr;gap:16px}
  .editorial-spread figcaption{max-width:40ch;padding:0 8px}
  body[data-page="about"] .editorial-spread--reflection{direction:ltr}
}
@media (max-width:600px){
  body[data-page="login"] .wrap{padding:12px 12px 24px;align-items:flex-start}
  body[data-page="login"] .card-hero{padding:24px 24px 16px}
  body[data-page="login"] .card-body{padding:24px 24px 12px}
  body[data-page="login"] .card-foot{padding:12px 24px 24px}
  body[data-page="legal"] .legal{padding:48px 16px 72px}
  body[data-page="legal"] .toc{width:100%;grid-template-columns:1fr;padding:24px 16px 16px}
  body[data-page="settings"] .shell{padding:32px 16px 76px}
  body[data-page="settings"] .panel{border-radius:var(--ui-radius)}
  body[data-page="guide"] .guide-stage{padding:32px 16px}
  .editorial-spread{margin:54px auto 70px}
  .editorial-spread figcaption b{font-size:30px}
  .editorial-eyelet{top:10px;left:10px;width:15px;height:15px;border-width:2px}
  .lesson-overview{grid-template-columns:1fr;gap:12px}
  .lesson-overview figcaption{padding:0 4px}
}

@media (prefers-reduced-motion:reduce){
  body:not([data-page="app"]) *,body:not([data-page="app"]) *::before,body:not([data-page="app"]) *::after{
    scroll-behavior:auto!important;
  }
  body[data-page="login"][data-mode="register"] .reveal-row,
  body[data-page="not-found"] .brokenfig{animation-duration:200ms;animation-name:cp-fade}
  body[data-page="not-found"] .flourish path{animation:none;stroke-dashoffset:0}
}
@keyframes cp-fade{from{opacity:.35}to{opacity:1}}

/* Legal index rows --------------------------------------------------------
   .toc a was `min-height:var(--ctl-compact); align-items:center`, so an entry that wraps to
   two lines grows its row and its neighbour floats to the row's midpoint —
   landing on neither of the wrapped entry's baselines. One wrapped entry out
   of ten is enough to make the whole block read as misaligned, which is what
   05/06 did. Align on the first baseline so the numbers line up across the
   row whatever the labels do. */
body[data-page="legal"] .toc a{align-items:baseline}
body[data-page="legal"] .toc a .n{align-self:baseline}

/* The poster ground was painted on the section rather than the page, so above
   the first section the body colour showed through as a band with a hard edge
   across the full width — a strip of a different colour that marks nothing. */
html[data-skin="paper"] body[data-page="legal"]{
  background-color: var(--soft-peach-cream) !important;
}
/* The closing texture band began at a hard horizontal edge that aligned with
   nothing. Fade it in so it reads as the page running out rather than as a
   second element starting. */
html[data-skin="paper"] body[data-page="legal"] .lq-texture-stage{
  -webkit-mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%);
}
/* The band above the first section was the landscape's sky plane, still
   painted full-viewport on a route that hides the ridges. On a poster page
   with its own ground it contributes nothing but an edge. */
html[data-skin="paper"] body[data-page="legal"] .mtn-sky{display:none}
/* The band is the root element, not the sky: html carries the rotating cloud
   colour for every route, and on a legal page the body's own ground starts
   below the header offset, so the root shows through above it. Give the root
   the poster ground on this route so there is one continuous field. */
html[data-skin="paper"]:has(body[data-page="legal"]){
  background-color: var(--soft-peach-cream) !important;
}

/* Poster-route header ----------------------------------------------------
   On the legal and poster pages the pagehead is a full-bleed bar carrying a
   wordmark and one back link. It was inheriting the shared glass carrier, so
   it drew a 1360x80 translucent panel with square corners that ended at a hard
   edge against the poster ground — a box around something that never needed
   one, and the only square-cornered surface on a site where every other
   surface is a 14px card.
   Nothing here needs a container. Drop the box and keep the hairline, which
   is the only part that was doing work. */
html[data-skin="paper"] body:is([data-page="legal"],[data-page="about"],[data-page="guide"]) .pagehead {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: var(--ui-hairline) solid var(--ui-line) !important;
  border-radius: 0 !important;
}
/* The .lq-accent marks are inline SVG now, so they take colour rather than
   carrying it. Keep them quiet and let them follow the rotating gem. */
html[data-skin="paper"] body .lq-accent {
  color: var(--bw-palette-gem, var(--terracotta));
  height: auto;
}