/* Case-study pages (SelfTrainer, FitPulse). Loads after /assets/css/field-manual.css. */

ul, ol { list-style: none; }
a:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 4px; }

.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -0.025em; color: var(--ink); }
.body { font-size: 17px; line-height: 1.65; color: var(--ink-mute); }
.section-lead { max-width: 620px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.glow { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14) 0%, rgba(var(--accent-rgb), 0) 62%); }
.grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(236,234,227,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(236,234,227,0.04) 1px, transparent 1px); background-size: 64px 64px; }
.pulse { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); }
.shot { display: block; height: auto; border: 1px solid #2e2b25; box-shadow: 0 40px 90px rgba(0,0,0,.65); background: #000; }
.shot--phone { border-radius: 18px; }
.shot--wide { border-radius: 12px; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }

/* ---------- HERO + NAV ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.site-links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); min-height: 30px; }
.site-links .nav-guide { gap: 0.3em; padding: 0 18px; min-height: 44px; background: var(--accent); color: #0b0b0c; font-weight: 600; font-size: 14px; transition: background .25s ease; }
.site-links .nav-guide:hover { background: var(--accent-hi); color: #0b0b0c; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; transition: color .2s ease; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--line-2); }
.crumbs [aria-current="page"] { color: var(--accent); }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 9.4vw, 136px); line-height: 0.92; letter-spacing: -0.04em; color: var(--ink); }
.status-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.status-chip--live { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); color: var(--accent); }
.thesis { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.38; color: var(--ink-soft); }

/* SelfTrainer hero: copy left, two floating screens right */
.hero-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 96px 0 120px; }
.hero-copy { grid-column: span 7; display: flex; flex-direction: column; gap: 32px; }
.hero-copy .thesis { max-width: 640px; }
.hero-copy .body { max-width: 560px; }
.hero-screens { grid-column: 8 / span 5; position: relative; height: 700px; }
.hero-screens .glow { top: -100px; left: -120px; width: 820px; height: 820px; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0) 62%); }
.hero-screen { position: absolute; }
.hero-screen--a { left: 0; top: 40px; width: 280px; }
.hero-screen--b { right: 0; top: 110px; width: 250px; }

/* FitPulse hero: copy above, wide dashboard below */
.hero-stack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding: 96px 0 72px; }
.hero-stack .hero-title { grid-column: span 7; display: flex; flex-direction: column; gap: 32px; }
.hero-stack .hero-intro { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
.hero-figure { position: relative; display: flex; flex-direction: column; gap: 18px; }
.hero-figure .glow { top: -120px; left: 50%; width: 1300px; height: 900px; margin-left: -650px; background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.14) 0%, rgba(var(--accent-rgb), 0) 62%); }
.hero-figure .shot { position: relative; width: 100%; aspect-ratio: 1280 / 558; object-fit: cover; object-position: left top; }
.hero-figure figcaption { position: relative; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }

.caption-label { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.caption-text { font-size: 15px; line-height: 1.55; color: var(--ink-mute); }
.screenshot-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; color: var(--accent); font-size: 15px; }
.screenshot-link:hover { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- STATEMENT SECTIONS ---------- */
.statement-section { padding: 150px 0; }
.statement-section--flush { padding-top: 0; }
.statement-section .label-col { grid-column: span 3; }
.statement-section .main-col { grid-column: 4 / span 9; display: flex; flex-direction: column; gap: 40px; }
.statement-xl { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5.8vw, 84px); line-height: 0.98; letter-spacing: -0.03em; color: var(--ink); }
.statement-lg { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); }
.statement-md { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; color: var(--ink); }
.statement-xl em, .statement-lg em { font-style: italic; color: var(--accent); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.ruled { padding-top: 32px; border-top: 1px solid var(--line-2); gap: 28px !important; }
.ruled .body { max-width: 720px; }

/* ---------- WORKFLOW ---------- */
.workflow-section { position: relative; padding: 150px 0; background: var(--bg-2); border-top: 1px solid #1f1e1a; border-bottom: 1px solid #1f1e1a; overflow: hidden; }
.section-head { position: relative; display: flex; flex-direction: column; gap: 20px; margin-bottom: 64px; }
.section-head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: 72px; }
.section-head--split > div { grid-column: span 6; display: flex; flex-direction: column; gap: 20px; }
.section-head--split > p { grid-column: 8 / span 5; }
.workflow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.workflow--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 1px solid var(--line); background: var(--bg-card); }
.workflow--five .step { gap: 18px; padding: 28px; }
.step-num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 48px; line-height: 1; color: var(--ink-off); }
.step-title { font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--ink); }
.step-copy { font-size: 15px; line-height: 1.55; color: var(--ink-mute); }
.workflow--five .step-copy { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }

/* ---------- INTERFACE WORK ---------- */
.interface-section { position: relative; padding: 150px 0; overflow: hidden; }
.interface-section > .glow { top: 300px; left: 50%; width: 1200px; height: 900px; margin-left: -600px; background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent-rgb), 0) 62%); }
.gallery { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 24px; }
.gallery figure { display: flex; flex-direction: column; gap: 22px; }
.gallery--phones figure { align-items: center; }
.gallery--phones .shot { width: 280px; }
.gallery--phones figcaption { max-width: 340px; }
.gallery--wide { gap: 24px; }
.gallery--wide .shot { width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; object-position: left top; }
.gallery figcaption { display: flex; flex-direction: column; gap: 8px; }

/* ---------- COMPARISON ---------- */
.compare-section { padding: 150px 0; border-top: 1px solid #1f1e1a; }
.compare { border: 1px solid var(--line); background: var(--bg-card); }
.compare-head, .compare-row { display: grid; grid-template-columns: 1fr 64px 1fr; padding: 28px 32px; }
.compare-head { padding: 20px 32px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.compare-head span:last-child { color: var(--accent); }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-row > div { display: flex; flex-direction: column; gap: 8px; }
.compare-row strong { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ink); }
.compare-row p { font-size: 15px; line-height: 1.55; color: var(--ink-mute); }
.compare-arrow { font-size: 20px; color: var(--accent); padding-top: 4px; }
.mobile-label { display: none; }

/* ---------- DECISIONS ---------- */
.decisions-section { padding: 0 0 150px; }
.decisions-section--ruled { padding-top: 150px; border-top: 1px solid #1f1e1a; }
.decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.decisions--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.decision { display: flex; flex-direction: column; gap: 14px; padding: 32px; border: 1px solid var(--line); background: linear-gradient(180deg, #141412, #0f0f0e); transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
.decisions--two .decision { padding: 36px; }
.decision:hover { transform: translateY(-6px); border-color: var(--accent); }
.decision-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-faint); }
.decision h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink); }
.decisions--two .decision h3 { font-size: 28px; }
.decision p { font-size: 15px; line-height: 1.55; color: var(--ink-mute); }
.decisions--two .decision p { font-size: 16px; }

/* ---------- STATUS ---------- */
.status-panel { position: relative; overflow: hidden; padding: 80px 88px; background: var(--bg-card); border: 1px solid var(--line); border-top: 2px solid var(--accent); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.status-panel .glow { bottom: -260px; right: -160px; width: 640px; height: 640px; }
.status-copy { position: relative; grid-column: span 5; display: flex; flex-direction: column; gap: 20px; }
.status-value { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3vw, 44px); line-height: 1.05; color: var(--ink); }
.status-value .pulse { width: 10px; height: 10px; }
.status-list { position: relative; grid-column: 7 / span 6; display: flex; flex-direction: column; }
.status-list li { display: grid; grid-template-columns: 28px 1fr; padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.status-list li:last-child { border-bottom: 1px solid var(--line); }
.status-list li::before { content: "—"; color: var(--accent); }

/* ---------- DEFERRED ---------- */
.deferred-section { padding: 150px 0 0; }
.deferred-section .deferred-copy { grid-column: span 5; display: flex; flex-direction: column; gap: 20px; }
.deferred-list { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: 12px; align-content: flex-start; }
.deferred-list li { padding: 12px 18px; border: 1px dashed var(--line-2); font-size: 15px; color: var(--ink-mute); }

/* ---------- CLOSING + FOOTER ---------- */
.closing { position: relative; padding: 180px 0 120px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; overflow: hidden; }
.closing .glow { top: 60px; left: 50%; width: 900px; height: 500px; margin-left: -450px; background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0) 65%); }
.closing > *:not(.glow) { position: relative; }
.closing h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(52px, 7.8vw, 112px); line-height: 0.95; letter-spacing: -0.035em; color: var(--ink); }
.closing h2 em { color: var(--accent); }
.closing .body { max-width: 580px; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border: 1px solid var(--line-2); color: var(--ink); font-weight: 500; font-size: 16px; transition: border-color .25s ease; }
.btn-ghost .arrow { transition: transform .25s ease; }
.btn-ghost:hover .arrow { transform: translateX(4px); }
.follow-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-size: 15px; font-weight: 600; transition: color .2s ease; }
.follow-link:hover { color: var(--accent-hi); }
.follow-link .arrow { transition: transform .2s ease; }
.follow-link:hover .arrow { transform: translateX(3px); }
.build-note { font-size: 13px; color: var(--ink-faint); }

/* ---------- MOTION (only when the visitor allows it) ---------- */
@keyframes gtFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes gtFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes gtStep6 { 0%,14% { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); } 18%,100% { border-color: var(--line); background: var(--bg-card); } }
@keyframes gtStepNum6 { 0%,14% { color: var(--accent); } 18%,100% { color: var(--ink-off); } }
@keyframes gtStep5 { 0%,17% { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); } 21%,100% { border-color: var(--line); background: var(--bg-card); } }
@keyframes gtStepNum5 { 0%,17% { color: var(--accent); } 21%,100% { color: var(--ink-off); } }
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: gtPulse 2.2s ease-out infinite; }
  .hero-grain { animation: gtGrain 1.2s steps(4) infinite; }
  .hero-screen--a { animation: gtFloatA 7s ease-in-out infinite; }
  .hero-screen--b { animation: gtFloatB 8s ease-in-out infinite; }
  .rise { animation: gtRise 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
  .workflow .step, .workflow .step-num { animation-duration: 15.6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: var(--sd, 0s); }
  .workflow .step { animation-name: gtStep6; }
  .workflow .step-num { animation-name: gtStepNum6; }
  .workflow--five .step, .workflow--five .step-num { animation-duration: 13s; }
  .workflow--five .step { animation-name: gtStep5; }
  .workflow--five .step-num { animation-name: gtStepNum5; }
  .reveal.reveal-ready { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.reveal-ready.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .decision:hover { transform: none; }
  .step-num { color: var(--accent); }
}

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 40px; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-screens { grid-column: 1 / -1; height: 640px; max-width: 620px; margin-top: 56px; }
  .hero-stack .hero-title, .hero-stack .hero-intro { grid-column: 1 / -1; }
  .hero-stack .hero-intro { margin-top: 32px; }
  .statement-section .label-col, .statement-section .main-col { grid-column: 1 / -1; }
  .statement-section .label-col { margin-bottom: 24px; }
  .section-head--split > div, .section-head--split > p { grid-column: 1 / -1; }
  .section-head--split > p { margin-top: 20px; }
  .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--wide { grid-template-columns: 1fr; gap: 56px; }
  .decisions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-panel { padding: 56px 48px; }
  .status-copy, .status-list { grid-column: 1 / -1; }
  .status-list { margin-top: 36px; }
  .deferred-section .deferred-copy, .deferred-list { grid-column: 1 / -1; }
  .deferred-list { margin-top: 28px; }
}

/* ---------- PHONE ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .site-nav { margin-top: 12px; padding: 0 8px 0 10px; gap: 12px; }
  .site-mark span { display: none; }
  .site-links { gap: 18px; font-size: 14px; }
  .nav-book, .guide-days { display: none !important; }
  .site-links a[aria-current="page"] { min-height: 44px; }
  .site-links .nav-guide { padding: 0 14px; }
  .hero-split, .hero-stack { padding: 56px 0 64px; }
  .hero-copy, .hero-stack .hero-title { gap: 22px; }
  .crumbs { font-size: 10px; gap: 8px; letter-spacing: 0.14em; }
  .hero h1 { font-size: 64px; }
  .hero-screens { height: 470px; margin-top: 40px; }
  .hero-screen--a { width: 190px; top: 10px; }
  .hero-screen--b { width: 170px; top: 60px; }
  .hero-figure .shot { aspect-ratio: 4 / 3; }
  .statement-section, .interface-section, .compare-section, .workflow-section { padding: 88px 0; }
  .statement-section--flush { padding-top: 0; }
  .decisions-section { padding-bottom: 88px; }
  .decisions-section--ruled { padding-top: 88px; }
  .two-col { grid-template-columns: 1fr; gap: 20px; }
  .section-head { margin-bottom: 40px; }
  .section-head--split { margin-bottom: 48px; }
  .workflow, .workflow--five { grid-template-columns: 1fr; gap: 12px; }
  .step, .workflow--five .step { padding: 22px; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
  .step-num { font-size: 32px; }
  .step-title { font-size: 22px; }
  .step-copy { flex-basis: 100%; }
  .gallery--phones { grid-template-columns: 1fr; gap: 56px; }
  .gallery--phones .shot { width: 250px; }
  .compare-head { display: none; }
  .compare-row { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .compare-arrow { display: none; }
  .mobile-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
  .compare-row > div:last-child .mobile-label { color: var(--accent); }
  .compare-row strong { font-size: 21px; }
  .decisions, .decisions--two { grid-template-columns: 1fr; gap: 14px; }
  .decision, .decisions--two .decision { padding: 24px; }
  .status-panel { padding: 36px 22px; }
  .deferred-section { padding-top: 88px; }
  .closing { padding: 110px 0 80px; gap: 22px; }
  .closing h2 { font-size: 44px; }
  footer { flex-direction: column; align-items: flex-start; }
}