/* The crack hero is the visual authority for every Teach64 surface.
   Paper for reading, ink for teaching, the same lettering and torn edge between.
   Loaded after each surface's layout sheet; no runtime or content is replaced. */
:root {
  --paper: var(--ivory);
  --plate: var(--surface-paper-plate);
  --radius-sm: 4px;
  --radius: 6px;
}
html { background: var(--ink); scrollbar-color: var(--neutral-scroll-thumb) var(--ebony-2); }
html:has(body.pg:not(.pg-founder)) { background: var(--ivory); scrollbar-color: var(--on-light-faint) var(--surface-paper-plate); }
body { caret-color: currentColor; }
::selection { color: var(--ivory); background: var(--ui-tool-line); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
button, input, select, textarea { font-family: var(--sans); }
input::placeholder, textarea::placeholder { color: var(--neutral-placeholder); opacity: 1; }
.display, body h1, body h2, body h3, body h4 {
  font-family: var(--display);
  font-variation-settings: normal;
}
.brand, .auth-brand { text-decoration: none; }
.brand .word, .auth-brand .word { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; }

/* Public documents keep their readable content and become bold paper spreads. */
body.pg {
  --paper: var(--ivory);
  --plate: var(--surface-paper-plate);
  --fg: var(--ink);
  --fg-dim: var(--on-light-dim);
  --fg-faint: var(--on-light-faint);
  --fg-inv: var(--ivory);
  --line: var(--line-on-paper);
  --line-2: var(--line-on-paper-strong);
  --glass: var(--ivory);
  --sq-l: var(--diagram-light);
  --sq-d: var(--board-dark);
}
body.pg {
  --hue: var(--ink-2) !important;
  --hue-soft: rgb(var(--surface-ink-rgb) / 0.06) !important;
}
.pg h1, .pg h2 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.pg h1 { font-size: clamp(2.8rem, 5.7vw, 6rem); }
.pg h2 { font-size: clamp(1.8rem, 3.3vw, 3.5rem); }
.pg h3 { font-weight: 700; }
.pg .pg-hero h1 { max-width: 20ch; }
.pg .pg-hero { padding-top: clamp(42px, 6vw, 90px); padding-bottom: clamp(50px, 7vw, 106px); }
.pg .pg-hero .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; }
.pg .prose { line-height: 1.7; }
.pg .pg-quote blockquote { font-family: var(--display); font-weight: 500; font-variation-settings: normal; }
.pg .pg-kick, .pg .pg-coord { display: none; }
.pg .pg-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 44px);
  padding: 14px clamp(20px, 2.5vw, 48px);
  background: var(--paper);
  border-bottom-color: transparent;
}
.pg .brand .word { font-size: 1.35rem; font-weight: 700; font-variation-settings: normal; }
.pg .pg-links { justify-content: center; margin: 0; gap: clamp(12px, 1.75vw, 28px); }
.pg .pg-links a { color: var(--fg); font-family: var(--display); font-size: 0.95rem; }
.pg .pg-crumbs .mono { font-family: var(--sans); letter-spacing: 0.05em; font-size: 0.72rem; }
.pg .pg-figs b { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 2.7vw, 3rem); }
.pg .pg-figs span { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.pg .pg-plate { border-radius: 4px; box-shadow: none; }
.pg .ro-dy, .pg .st-s.is-gate { border-left-width: 1px; }
.pg .cu-shape > div { border-top-width: 1px; }
.pg .cu-shape h3 { font-size: 1.2rem; }
.pg .pg-way, .pg .cu-filter button { border-radius: 4px; }
.pg .pg-way[aria-pressed='true'] span { color: var(--fg-inv); }
.pg .pg-sec:has(> .pg-wrap > .pg-cta-row) { padding-block: clamp(60px, 8vw, 120px); }

/* Rectangular, tactile actions share the hero's compact button language. */
.pg .cta {
  border-radius: 4px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--fg-inv);
  box-shadow: var(--ui-shadow-paper-action);
  animation: none;
  font-family: var(--display);
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  min-height: 44px;
}
.pg .cta:hover { background: var(--fg); color: var(--fg-inv); box-shadow: 0 4px 10px rgb(0 0 0 / 0.16); }
.pg .cta.ghost, .pg .pg-nav > .cta { color: var(--fg); background: var(--paper); border-color: var(--line-2); }
.pg .cta.ghost:hover, .pg .pg-nav > .cta:hover { background: var(--plate); border-color: var(--fg); }
.pg .cta-rip { display: none; }
.pg .billing-name, .pg .billing-price strong, .pg .billing-pilot h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; }
.pg .billing-card { border-radius: 4px; background: var(--ivory); }
.pg .billing-card.is-recommended { background: var(--surface-recommended); box-shadow: none; transform: none; }
.pg .billing-card.is-invert { --hue: var(--ivory) !important; background: var(--ink); }
.pg .billing-card.is-invert .billing-items { color: var(--on-dark-dim); }
.pg .billing-card.is-invert .billing-price { border-color: var(--neutral-rule-dark); }
.pg .billing-card.is-invert .billing-price strong { color: var(--ivory); }
.pg .billing-card.is-invert .billing-price span,
.pg .billing-card.is-invert .billing-aside { color: var(--on-dark-dim); }
.pg .billing-price { flex-wrap: wrap; }
.pg .billing-price strong { white-space: nowrap; }
.pg .billing-card.is-invert .billing-mark { color: var(--ivory); }
.pg .checkout-billing-link { border-radius: 4px; }
.pg .is-shot img { border-radius: 4px; }
.pg img[src^="/assets/product/"] { filter: grayscale(1); }

/* The dark close carries the actual torn-paper plate from the opening. */
.pg .pg-foot {
  --paper: var(--ink);
  --plate: var(--ebony-2);
  --fg: var(--ivory);
  --fg-dim: var(--on-dark-dim);
  --fg-faint: var(--neutral-dark-faint);
  --fg-inv: var(--ink);
  --line: var(--line-on-ink);
  --line-2: var(--hair-strong);
  position: relative;
  background: var(--paper);
  color: var(--fg);
  border-top: 0;
  padding-top: clamp(90px, 10vw, 160px);
}
.pg:not(.pg-founder) .pg-foot::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: clamp(46px, 5vw, 82px);
  background: url('/assets/hero-crack-texture.png') center / 100% 100% no-repeat;
  pointer-events: none;
}
.pg .pg-foot-brand .word { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pg .pg-foot-col h2 { font: 700 1.05rem var(--display); text-transform: none; letter-spacing: 0; }
.pg .pg-foot-fine { line-height: 1.7; }
body.pg-founder {
  --paper: var(--ink);
  --plate: var(--ebony-2);
  --fg: var(--ivory);
  --fg-dim: var(--on-dark-dim);
  --fg-faint: var(--neutral-dark-faint);
  --fg-inv: var(--ink);
  --line: var(--line-on-ink);
  --line-2: var(--hair-strong);
}
body.pg-founder, body.pg-founder [style*="--hue"] { --hue: var(--bishop-hi) !important; --hue-soft: rgb(var(--surface-paper-rgb) / 0.08) !important; }
.pg-founder .fd-hero .fd-name { font-weight: 700; font-size: clamp(3rem, 8vw, 8rem); letter-spacing: -0.04em; line-height: 0.96; }
.pg-founder .fd-lede p:not(.fd-meta) { font-family: var(--sans); font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.6; }
.pg-founder .fd-portrait img { border-radius: 4px; }
.pg-founder .fd-board { filter: grayscale(1); }

/* Homepage choreography remains intact; its materials now follow the opening. */
/* Owner restored the pre-theme cinematic scroll area. Heights come from
   acts.css and home-feedback.css, including their original phone breakpoints. */
.gl { filter: none; }
/* Keep ornamental edges below the reading surface and every control. */
.act:not(.act-threshold) .pad { z-index: 1; }
.act-system .act-stage::before, .act-terms .act-stage::before {
  opacity: calc(clamp(0, calc((var(--e) - 0.42) / 0.58), 1) * (1 - clamp(0, calc(var(--h) / 0.42), 1)));
}
.stages-head { border-top-color: var(--hue); }
.stage-panel { border-left-color: var(--sc); border-radius: 4px; }
/* Keep the pre-theme panel entrance, including its spatial easing. */
.stage-panel .sp-n, .stage-panel .sp-piece { color: var(--sc); }
.stage-panel .sp-link { border-bottom-color: var(--sc); }
.stage-panels { bottom: clamp(32px, 5vh, 64px); }
@media (min-width: 901px) {
  .act:not(.act-threshold) .pad { padding-top: max(100px, 12vh); }
  .stages-head { width: min(38vw, 42ch); }
  .stage-panels { width: min(36vw, 38ch); }
}
@media (max-width: 900px) {
  .act:not(.act-threshold) .pad { padding-top: max(88px, 11vh); }
  .stage-panels { left: var(--gut); right: var(--gut); bottom: clamp(28px, 5vh, 48px); width: auto; }
  .stage-panel { padding: clamp(16px, 2.4vh, 22px); gap: 10px; }
  .stage-panel .sp-summary { font-size: clamp(1.65rem, 6vw, 2.2rem); line-height: 1.04; }
}
@media (max-width: 900px) and (max-height: 680px) {
  .stages-head { padding: 14px 16px; }
  .stages-head .stage-line { font-size: clamp(1.3rem, 5.6vw, 1.8rem); }
  .stage-panel .sp-top { flex-wrap: wrap; gap: 6px; }
  .stage-panel .sp-piece { display: none; }
  .stage-panel { gap: 8px; padding: 14px 16px; }
  .stage-panel .sp-summary { font-size: 1.55rem; }
  .stage-panel .sp-meta { font-size: 0.85rem; }
}

/* The close is one decision; its site map follows in normal document flow. */
.promo { padding-bottom: clamp(32px, 6vh, 80px); }
.promo .d1 { max-width: 18ch; font-size: clamp(2.2rem, min(8.4vw, 11vh), 8.6rem); }
.foot.home-footer {
  --fg: var(--ivory); --fg-dim: var(--on-dark-dim); --line: var(--ui-tool-line);
  position: relative; z-index: 2; inset: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 40px; margin: 0; padding: 36px var(--gut);
  opacity: 1; background: var(--ebony); color: var(--ivory);
  border-top: 1px solid var(--line);
}
.home-footer .foot-map {
  grid-column: 1 / -1; order: 0;
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  font: 500 0.9rem/1.5 var(--sans); letter-spacing: 0; text-transform: none;
}
.home-footer .foot-map a, .home-footer .foot-ask { display: flex; align-items: center; min-height: 44px; }
.home-footer .foot-me { min-height: 44px; }
.home-footer .me-w b { font: 500 1rem var(--sans); }
.home-footer .me-l { font: 500 0.8rem var(--sans); letter-spacing: 0; }
.home-footer .me-l { display: block; text-transform: none; }
.home-footer .me-s, .home-footer::before { display: none; }
.home-footer > p { align-self: center; font: 500 0.85rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
@media (max-width: 600px) {
  .foot.home-footer { grid-template-columns: 1fr; gap: 22px; padding-block: 28px; }
  .home-footer .foot-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .home-footer .foot-ask { grid-column: 1 / -1; }
  .promo .d1 { font-size: clamp(2.2rem, min(10vw, 8vh), 4rem); }
}
.session .b-prompt { min-height: 0; max-height: 100%; overflow-y: auto; }
@media (min-width: 901px) and (max-height: 640px) {
  .session .pane-board { padding: 10px 14px; gap: 6px 20px; }
  .session .b-prompt { font-size: 0.9rem; line-height: 1.3; }
}
.act:not(.act-threshold) .display { font-weight: 700; }
.act:not(.act-threshold) .kicker, .act .coord { display: none; }
.act-spine .act-stage::before { background: linear-gradient(90deg, rgb(var(--surface-ink-rgb) / 0.94), rgb(var(--surface-ink-rgb) / 0.65) 65%, rgb(var(--surface-ink-rgb) / 0.4)); }
.act-chaos .act-stage::before { background: rgb(var(--surface-ink-rgb) / 0.5); }
.act-system .act-stage::before, .act-terms .act-stage::before { background: rgb(var(--surface-paper-rgb) / 0.96); }
.act-session .act-stage::before { background: var(--ink); }
/* Continuous section handovers: decorative crack strips created hard horizontal bands. */
.act:not(.act-threshold) .act-stage::after { content: none; }
.sun-beats .sb { background: var(--ebony); border-top: 1px solid var(--neutral-rule-mid); border-radius: 0; box-shadow: none; }
.spine-points li, .sy-proof li, .ses-points li { border-top-width: 1px; border-radius: 0; }
.spine .scrub { background: var(--ebony-2); border-radius: 4px; box-shadow: none; }
.cv-col, .session .console, .sy-core { border-radius: 4px; box-shadow: none; }
.ses-open { color: var(--ink); background: var(--ivory); border-color: var(--on-light-faint); border-radius: 4px; }
.rate-band { border-radius: 4px; box-shadow: none; }
.act-terms { --hue: var(--ink-2) !important; --hue-soft: rgb(var(--surface-ink-rgb) / 0.06) !important; }
.act-terms .rate-band { background: var(--ivory); background-image: none; box-shadow: none; }
.act-terms .rate-band.is-fit { background: var(--surface-recommended); }
.act-terms .rate-band.is-invert {
  --c-ink: var(--ivory);
  --c-dim: var(--on-dark-dim);
  --c-faint: var(--neutral-dark-faint);
  --c-edge: var(--ink);
  --c-line: var(--neutral-rule-dark);
  background: var(--ink);
}
.act-terms .rate-band .cta { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.act-terms .rate-band.is-invert .cta { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.act-terms .rate-band .rate-price { color: var(--ink); }
.act-system .sy-core {
  --hue: var(--bishop);
  --hue-soft: rgb(144 112 206 / 0.15);
  --fg: var(--ivory);
  --fg-dim: var(--on-dark-dim);
  --fg-faint: var(--neutral-dark-faint);
  --line: var(--line-on-ink);
  --line-2: var(--hair-strong);
  --glass: var(--ink);
  background: var(--ebony);
  background-image: none;
  box-shadow: none;
}
.act-system .sy-plate { background-image: none; }
.act-system .sy-hour { background: var(--ebony); }
.act-system .sy-ways { background: var(--ebony); }
.act-system .sy-hwl { background: var(--ivory); }
.act .board2d .sq.l { background: var(--board-light); }
.act .board2d .sq.d { background: var(--board-dark); }
.act-system .sy-proof li { background: var(--surface-paper-stat); border-top-color: var(--neutral-rule-light); }
.act-system .sy-proof, .act-system .system-head { color: var(--ink); }
.act-system .system-head .lead, .act-terms .lead { color: var(--on-light-dim); }
.act-terms .rate-bill { border-radius: 4px; }
.act-terms .rate-bill-b { border-radius: 3px; }
.act-terms .rate-bill-b[aria-pressed='true'] { color: var(--ivory); background: var(--ink); }
.act:not(.act-threshold) .cta { border-radius: 4px; animation: none; background-image: none; }
.cv-col { background: var(--ebony); }
.stages .stage-panel { background: var(--ebony); }
body:not(.hero-light):not(.gl-failed) #nav { border-radius: 4px; box-shadow: none; backdrop-filter: none; }
body.gl-failed .act:not(.act-threshold) { background: var(--ink); color: var(--ivory); }
body.gl-failed .act.act-system, body.gl-failed .act.act-terms, body.gl-failed .act.act-promotion { background: var(--ivory); color: var(--ink); }
body.gl-failed #nav { inset: 0 0 auto; padding: 12px 2.5vw; border-radius: 0; box-shadow: none; }

/* Account entry uses the same marble piece and physical split as the hero. */
.auth { --on-dark-faint: var(--neutral-dark-faint); }
.auth :focus-visible { outline-color: currentColor; }
.auth h1, .auth h2, .auth .mg-heading h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.auth .auth-brand { font-size: 1.35rem; }
.auth .btn, .auth .login-magic { border-radius: 4px; font-family: var(--display); }
.auth .auth-eyebrow { display: none; }
.auth .signup-form-panel { background: var(--ivory); }
.auth .signup-inner { width: min(30rem, 100%); }
.auth .signup-inner h1 { font-weight: 700; font-size: clamp(2.6rem, 4vw, 4.5rem); }
.auth .signup-inner input:not([type='checkbox']) { background: var(--surface-paper-plate); border-radius: 4px; }
.auth .signup-adult input { accent-color: var(--ink); }
.auth .signup-story { background: var(--ink); padding-top: 320px; isolation: isolate; }
.auth .signup-story::after {
  inset: 0 0 auto;
  height: clamp(80px, 12vw, 170px);
  opacity: 1;
  background: url('/assets/hero-crack-texture.png') center / 100% 100% no-repeat;
  z-index: -1;
}
.auth .signup-board {
  position: absolute;
  width: clamp(240px, 30vw, 430px);
  height: auto;
  aspect-ratio: 1262 / 1246;
  right: 5%;
  top: clamp(60px, 8vh, 110px);
  transform: none;
  background: url('/assets/hero-pawn-static.png') center / contain no-repeat;
  pointer-events: none;
}
.auth .signup-board span { display: none; }
.auth .signup-story h2 { font-weight: 700; font-size: clamp(2.5rem, 4vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.02; }
.auth .auth-status { background: var(--ivory-2); border: 1px solid var(--neutral-border); }
.auth .con-intro h1 { font-weight: 700; font-size: clamp(2.1rem, 4vw, 3.8rem); }
.auth .con-delivery, .auth.is-manage .manage-panel { background: var(--surface-workspace-card); border-radius: 4px; box-shadow: none; }
.auth .con-tracks button, .auth .con-filter select, .auth .con-bar input { border-radius: 4px; }
.auth .con-tracks button[aria-pressed='true'] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.auth .auth-main { background: var(--ink); }
.auth .auth-card { box-shadow: none; border-radius: 4px; }

/* The teaching workspace inherits the brand at a practical working scale. */
body.teach {
  --fg: var(--ivory);
  --fg-dim: var(--on-dark-dim);
  --fg-faint: var(--neutral-dark-faint);
  --ground: var(--ink);
  --panel: var(--ebony-2);
  --panel-hi: var(--ebony-3);
  --line: var(--line-on-ink);
  --line-2: var(--line-workspace-strong);
  --accent: var(--ivory);
}
.teach #t-top, .teach .t-class-context, .teach .t-dock { background: var(--ebony-2); }
.teach .t-load-state { background: var(--ink); }
.teach .t-stage-head h2, .teach .t-name { font-family: var(--display); font-weight: 700; }
.teach .t-prep { background: var(--ivory); color: var(--ink); }
.teach .t-prep h1, .teach .t-prep h2 { font-weight: 700; }
.teach .t-prep h3, .teach .t-prep h4, .teach .t-prep .kick { color: var(--on-light-dim); }
.teach .t-prep p, .teach .t-prep li { color: var(--ui-tool-line); }
.teach .t-prep .facts .k { color: var(--on-light-faint); }
.teach .t-prep .routine { border-left-color: var(--on-light-faint); }
.teach .board2d .sq.l { background: var(--board-light); }
.teach .board2d .sq.d { background: var(--board-dark); }
/* Position and coaching marks retain their instructional contrast. */
.teach .t-hintline { border-left-color: var(--neutral-rule-quiet); }

@media (max-width: 1000px) {
  .pg .pg-nav { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .pg .pg-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 10px 20px; }
  .pg .pg-nav > .cta { grid-column: 2; grid-row: 1; }
  .pg .pg-hero h1 { font-size: clamp(2.7rem, 6.7vw, 4.7rem); }
}
@media (min-width: 901px) {
  .act-terms .pad.terms { padding-top: max(100px, 11vh); }
}
@media (min-width: 901px) and (max-height: 640px) {
  .act-terms .terms-head .d3 { font-size: clamp(1.65rem, 2.3vw, 2rem); }
  .act-terms .rate-band { gap: 8px; padding: 12px; }
}
@media (max-width: 760px) {
  .auth .signup-story { padding-top: 52px; min-height: 0; }
  .auth .signup-story::after { height: 35px; }
  .auth .signup-board { display: none; }
  .auth .signup-story h2 { font-size: clamp(2.2rem, 7vw, 3.2rem); }
}
@media (max-width: 600px) {
  .pg .pg-hero { padding-top: 34px; padding-bottom: 52px; }
  .pg .pg-hero h1 { font-size: clamp(2.5rem, 10vw, 3.7rem); }
  .pg .pg-links a { font-size: 0.85rem; }
  .pg .pg-foot { padding-top: 90px; }
  .pg-founder .fd-hero .fd-name { font-size: clamp(3rem, 12vw, 4.5rem); }
  .auth .signup-inner h1 { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .auth .signup-inner { padding-block: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pg .cta, .auth .btn { transition: none; }
}
@media print {
  .pg .pg-foot, .act-stage::after { display: none; }
  .pg .pg-nav { display: none; }
}