:root {
  --motif-progress: 0;
  --paper: #f3f1eb;
  --ink: #1c211e;
  --muted: #666c64;
  --line: #d8d9d0;
  --signal: #a74832;
  --gutter: clamp(24px, 5.7vw, 88px);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
::selection { background: #d9bbae; color: var(--ink); }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }
.skip { position: fixed; z-index: 100; top: 16px; left: 16px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--ink); color: var(--paper); }
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; padding: 12px 18px; }
.wrap { width: calc(100% - var(--gutter) * 2); max-width: 1376px; margin-inline: auto; }
.site-head { height: 96px; position: absolute; z-index: 10; inset: 0 0 auto; display: flex; align-items: center; gap: 48px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: 21px; font-weight: 700; letter-spacing: -.065em; text-decoration: none; }
.wordmark svg { width: 24px; height: 24px; fill: currentColor; }
.primary-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.primary-nav a, .head-contact { font-size: 13px; line-height: 1.4; text-decoration: none; padding-block: 12px; }
.primary-nav a { color: var(--muted); }
.primary-nav a:hover, .head-contact:hover { color: var(--signal); }
.head-contact { display: flex; gap: 20px; align-items: center; }
.head-contact span { font-size: 20px; }
.menu-button { display: none; }
.mobile-nav { position: absolute; z-index: 9; top: 80px; left: 0; width: 100%; background: var(--paper); padding: 16px var(--gutter) 28px; border-bottom: 1px solid var(--line); }
.mobile-nav a { display: flex; padding: 14px 0; text-decoration: none; font-size: 24px; letter-spacing: -.035em; border-bottom: 1px solid var(--line); }
.hero { position: relative; isolation: isolate; min-height: 740px; height: 100svh; overflow: hidden; }

.hero-layout { height: 100%; min-height: inherit; position: relative; display: flex; flex-direction: column; justify-content: center; padding-top: 76px; padding-bottom: 108px; }
.hero-copy { position: relative; width: 65%; padding-top: 56px; }
h1 { font-size: clamp(64px, 6.8vw, 112px); font-weight: 500; line-height: 1.01; letter-spacing: -.073em; }
h1 span { color: #72786e; }
.hero-dek { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; letter-spacing: -.023em; margin-top: 32px; }
.action-link { display:inline-flex; align-items:center; min-height:48px; padding:14px 22px; border:1px solid var(--ink); border-radius:6px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:14px; line-height:1.4; font-weight:500; margin-top:32px; transition:background .2s,color .2s; }
.action-link:hover { background:#344238; }
.hero-foot { position: absolute; bottom: 0; left: 0; right: 0; min-height: 78px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 24px; color: var(--muted); font: 10px/1.5 var(--mono); letter-spacing: .025em; }
.hero-foot span:nth-child(2) { margin-left: auto; }
.hero-foot a { margin-left:32px; font:24px/1 var(--sans); text-decoration:none; min-width:44px; min-height:44px; display:grid; place-items:center; }
.section { padding-block: 112px; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 11px/1.4 var(--mono); letter-spacing: .025em; color: var(--muted); margin-bottom: 36px; }
.eyebrow::before { content: ""; width: 5px; height: 5px; background: var(--signal); }
h2 { font-size: clamp(42px, 4.6vw, 72px); line-height: 1.05; letter-spacing: -.062em; font-weight: 400; }
.heading-row { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 12%; align-items: end; }
.heading-row > p { max-width: 32ch; font-size: 18px; line-height: 1.6; letter-spacing: -.02em; color: var(--muted); padding-bottom: 4px; }
/* The example is the centerpiece: one action, one piece of the story at a time. */
.workbench { margin-top: 48px; color: #edf0e6; background: #222923; border: 1px solid #222923; border-radius: 3px; overflow: hidden; scroll-margin-top: 20px; }
.workbench :focus-visible { outline: 2px solid #e4bc99; outline-offset: -5px; }
.workbench-head { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:23px 32px; border-bottom:1px solid #465044; font:10px/1.5 var(--mono); color:#afb8a8; }
.bench-brand { display:flex; align-items:center; gap:10px; color:#e3e8db; }
.bench-dot { width:6px; height:6px; background:#d9ab85; box-shadow:0 0 12px #d9ab8540; }
.workflow-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid #465044; }
.workflow-tabs button { position:relative; display:flex; gap:14px; align-items:center; padding:22px 28px; background:transparent; border:0; border-right:1px solid #465044; color:#abb6a5; cursor:pointer; font-size:12px; text-align:left; transition:background .25s,color .25s; }
.workflow-tabs button:last-child { border:0; }
.workflow-tabs button span { font:9px var(--mono); color:#a5af9f; }
.workflow-tabs button::after { content:""; height:2px; background:#deb190; position:absolute; inset:auto 28px 0; transform:scaleX(0); transform-origin:left; transition:transform .45s; }
.workflow-tabs button[aria-selected="true"] { background:#30392f; color:#fffaf0; }
.workflow-tabs button[aria-selected="true"]::after { transform:scaleX(1); }
.workflow-tabs button:hover { background:#30392f; }
.workflow-panels { display:grid; }
.workflow-panel { display:grid; grid-template-columns:.85fr 1.15fr; gap:7%; align-items:center; min-height:445px; padding:50px 56px; }
.tabs-ready .workflow-panel { grid-area:1/1; }
.tabs-ready .workflow-panel[hidden] { display:grid!important; visibility:hidden; pointer-events:none; }
.scene-label, .artifact-label { font:10px/1.5 var(--mono); color:#b6c0ad; }
.scene-label { display:flex; align-items:center; gap:12px; }
.scene-label::before { content:""; width:20px; height:1px; background:#cfa27e; }
.scene-intro h3 { font-weight:400; font-size:clamp(30px,3.1vw,46px); line-height:1.08; letter-spacing:-.05em; margin-top:24px; }
.scene-intro p { margin-top:24px; max-width:29ch; color:#bcc5b3; font-size:15px; line-height:1.65; }
.scene-art { position:relative; width:100%; }
.artifact-label { display:block; margin-bottom:16px; font-size:9px; }
.message-bubble { background:#dde0d2; color:#242b23; padding:28px; font-size:20px; line-height:1.5; letter-spacing:-.025em; border-radius:2px 2px 2px 20px; box-shadow:0 12px 50px #11170e22; }
.message-bubble span { display:block; margin-top:12px; color:#5b6655; font-size:15px; }
.response-note { display:flex; align-items:center; gap:14px; padding:26px 4px; font-size:14px; line-height:1.5; }
.small-cube { width:13px; height:13px; background:#cead8e; flex-shrink:0; }
.brief-tags { display:flex; flex-wrap:wrap; gap:7px; }
.brief-tags span { border:1px solid #59634f; border-radius:2px; padding:8px 10px; font:9px/1.4 var(--mono); color:#bfc9b6; }
.plan-sheet, .result-sheet { background:#f1f0e8; color:var(--ink); border-radius:2px; box-shadow:0 14px 40px #0c140f35; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border-bottom:1px solid #d4d7cb; font-size:13px; }
.status-tag { color:#626a5b; font:9px/1.5 var(--mono); }
.task-list { margin:0; padding:0 24px; list-style:none; }
.task-list li { display:flex; gap:18px; align-items:center; padding:21px 0; font-size:14px; border-bottom:1px solid #d4d7cb; }
.task-list li:last-child { border:0; }
.task-number { font:9px var(--mono); color:#626a5b; }
.task-list small { display:block; font-size:11px; line-height:1.5; margin-top:5px; color:#626a5b; }
.task-box { width:10px; height:10px; border:1px solid #9ca58f; margin-left:auto; flex-shrink:0; }
.compact { padding:22px 26px; font-size:19px; }
.compact span { font-size:14px; margin-top:5px; }
.context-card { display:flex; align-items:flex-start; gap:17px; border:1px solid #707a63; margin-top:20px; padding:22px; border-radius:2px; background:#2d362b; }
.context-cross { font:24px/1 var(--sans); color:#e0b48e; }
.context-card .status-tag { color:#c1cbb6; font-size:9px; }
.context-card p { font-size:16px; line-height:1.45; margin-top:12px; }
.context-card small { display:block; font-size:10px; line-height:1.6; margin-top:14px; color:#adb8a2; }
.result-focus { font-size:30px; letter-spacing:-.04em; line-height:1.1; padding:24px; }
.result-focus strong { font-weight:400; color:#6a735f; }
.result-line { display:grid; grid-template-columns:42px 1fr; gap:14px; margin-inline:24px; padding:12px 0; border-top:1px solid #d4d7cb; font-size:12px; line-height:1.6; }
.result-line > span { font:9px/1.8 var(--mono); color:#6c7460; }
.sheet-foot { margin-top:8px; padding:13px 24px; background:#e1e5d7; font:9px/1.6 var(--mono); color:#535e4d; }
.story-controls { border-bottom:1px solid #465044; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.story-status { font:9px/1.6 var(--mono); color:#b6c0ab; max-width:37ch; }
.story-controls > div { display:flex; align-items:center; gap:22px; }
.story-back { color:#bec7b4; background:none; border:0; cursor:pointer; padding:10px 0; font-size:12px; }
.story-back:disabled { visibility:hidden; }
.story-next, .story-finish { display:inline-flex; align-items:center; justify-content:space-between; min-width:200px; gap:28px; background:#e2b999; color:#232a21; border:1px solid #e2b999; border-radius:2px; padding:16px 20px; font-size:13px; cursor:pointer; text-decoration:none; transition:background .2s; }
.story-next:hover, .story-finish:hover { background:#efd0b9; }
.story-next span, .story-finish span { font-size:20px; line-height:1; transition:transform .25s; }
.story-next:hover span, .story-finish:hover span { transform:translateX(4px); }
.story-after { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:18px; }
.story-after p { font-size:10px; line-height:1.6; color:var(--muted); }
.story-replay { border:0; padding:8px 0; background:none; cursor:pointer; font-size:11px; white-space:nowrap; }
.story-replay span { margin-left:12px; }
html:not(.tabs-ready) .workflow-tabs, html:not(.tabs-ready) .story-controls, html:not(.tabs-ready) .story-replay { display:none; }
html:not(.tabs-ready) .workflow-panel + .workflow-panel { border-top:1px solid #465044; }
.starting-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:12%; }
.starting-dek { color:var(--muted); font-size:17px; line-height:1.6; margin-top:30px; }
.ownership-card { border-top:1px solid var(--line); }
.ownership-card > div { padding:22px 0 24px 42px; position:relative; border-bottom:1px solid var(--line); }
.ownership-card > div > span { position:absolute; left:0; top:26px; color:var(--muted); font:9px var(--mono); }
.ownership-card h3 { font-size:24px; font-weight:400; letter-spacing:-.04em; }
.ownership-card p { font-size:13px; line-height:1.6; margin-top:9px; color:var(--muted); max-width:30ch; }
.offering-details { margin-top:70px; border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; display:flex; align-items:center; gap:24px; padding:24px 0; cursor:pointer; font-size:17px; letter-spacing:-.02em; }
summary::-webkit-details-marker { display:none; }
.summary-note { margin-left:auto; font:10px var(--mono); color:var(--muted); }
.detail-sign { font-size:24px; line-height:1; width:22px; text-align:center; transition:transform .25s; }
details[open] .detail-sign { transform:rotate(45deg); }
.detail-body { padding:16px 0 30px; max-width:750px; }
.detail-body > p { color:var(--muted); font-size:14px; line-height:1.7; max-width:68ch; }
.detail-body > p + p { margin-top:14px; }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:24px 0; border-block:1px solid var(--line); }
.plan-grid article { padding:24px 16px 24px 0; }
.plan-grid h3 { font-size:24px; font-weight:400; letter-spacing:-.035em; }
.plan-grid p { margin-top:10px; font-size:12px; color:var(--muted); }
.contact { display:block; padding-block:100px 80px; }
.contact h2 { font-size:clamp(40px,5.5vw,82px); line-height:1.09; }
.contact h2 span { color:#7b806f; }
.contact-dek { margin-top:30px; font-size:17px; line-height:1.6; color:var(--muted); }
.contact-links { margin-top:50px; max-width:580px; }
.contact-email { display:inline-flex; align-items:center; gap:12px; min-height:54px; padding:16px 24px; border-radius:6px; background:#eeedde; color:#203026; font-size:16px; line-height:1.4; letter-spacing:-.015em; font-weight:500; text-decoration:none; transition:background .2s; }
.contact-email svg { width:22px; height:22px; flex:none; }
.contact-address { display:block; font-size:14px; color:#e0e4d9; margin-bottom:6px; }
.contact-links > p { font-size:12px; line-height:1.6; color:var(--muted); margin-top:20px; }
.contact-email:hover { background:#fffdf3; color:#203026; }
.legal-contact { display:inline-flex; align-items:center; min-height:44px; gap:14px; text-decoration:none; font-size:12px; margin-top:16px; }
.legal-contact:hover { text-decoration:underline; text-underline-offset:4px; }
.site-footer { padding-block:36px 24px; }
.footer-top { display:flex; align-items:center; gap:36px; }
.footer-top p { color:var(--muted); font-size:12px; }
.back-top { margin-left:auto; display:flex; align-items:center; gap:24px; text-decoration:none; font-size:11px; }
.back-top span { font-size:20px; }
.footer-bottom { display:flex; justify-content:space-between; gap:24px; padding-top:44px; font:9px/1.6 var(--mono); color:var(--muted); }
@media (prefers-reduced-motion:no-preference) {
  .hero-copy { animation:arrival .9s cubic-bezier(.2,.65,.3,1) both; }
  .tabs-ready .workflow-panel:not([hidden]) .scene-art { animation:arrival .55s cubic-bezier(.2,.65,.3,1) both; }
  .tabs-ready .workflow-panel:not([hidden]) .scene-intro { animation:arrival .45s cubic-bezier(.2,.65,.3,1) both; }
  .tabs-ready .workflow-panel:not([hidden]) .response-note, .tabs-ready .workflow-panel:not([hidden]) .context-card, .tabs-ready .workflow-panel:not([hidden]) .result-line { animation:arrival .65s .12s both; }
  .tabs-ready .workflow-panel:not([hidden]) .task-list li { animation:arrival .5s both; }
  .tabs-ready .workflow-panel:not([hidden]) .task-list li:nth-child(2) { animation-delay:.08s; }
  .tabs-ready .workflow-panel:not([hidden]) .task-list li:nth-child(3) { animation-delay:.16s; }
  .arrived .eyebrow::before { animation:signal-arrival .8s both; }
  .ownership-card.arrived > div { animation:arrival .65s both; }
  .ownership-card.arrived > div:nth-child(2) { animation-delay:.08s; }
  .ownership-card.arrived > div:nth-child(3) { animation-delay:.16s; }
  @keyframes arrival { from { transform:translateY(12px); } to { transform:translateY(0); } }
  @keyframes signal-arrival { from { transform:scaleX(5); } to { transform:scaleX(1); } }
}
/* One continuous landscape: the walkthrough belongs to the page, not a frame. */
.hero-foot { border-top:0; }
.section { border-bottom:0; }
.experience-landscape { --muted:#4b5644; position:relative; isolation:isolate; background:linear-gradient(180deg,var(--paper) 0%,#edf0e6 20%,#e7eadf 46%,#ebeee4 68%,var(--paper) 100%); }
.workspace { padding-top:80px; padding-bottom:36px; scroll-margin-top:40px; }
.workspace .heading-row { align-items:center; }
.workbench { margin-top:48px; color:var(--ink); background:transparent; border:0; border-radius:0; overflow:visible; }
.workbench :focus-visible { outline:2px solid var(--signal); outline-offset:5px; }
.workbench-head { padding:0 0 22px; border-bottom:0; color:#4b5644; font-size:10px; }
.bench-brand { color:var(--ink); }
.bench-dot { background:#9b5537; box-shadow:none; }
.workflow-tabs { border-bottom:1px solid #b7c0ac; }
.workflow-tabs button { border:0; padding:19px 0 21px; color:#4b5644; font-size:13px; }
.workflow-tabs button span { display:none; }
.workflow-tabs button::after { inset-inline:0 24px; background:#965031; }
.workflow-tabs button[aria-selected="true"], .workflow-tabs button:hover { background:transparent; color:var(--ink); }
.workflow-tabs button[aria-selected="true"] span { color:#85402b; }
.story-controls { padding:22px 0; border-top:1px solid #b7c0ac; border-bottom:0; }
.story-status { color:#4b5644; font-size:10px; max-width:46ch; }
.story-back { color:#4c5943; }
.story-next,.story-finish { border-radius:0; color:var(--paper); background:#263024; border-color:#263024; padding:15px 20px; }
.story-next:hover,.story-finish:hover { background:#40513a; border-color:#40513a; }
.workflow-panel { grid-template-columns:1fr 1.15fr; gap:10%; padding:40px 0 36px; min-height:380px; }
.scene-intro h3 { font-size:clamp(34px,3.7vw,54px); font-weight:400; }
.scene-intro p { color:#4b5644; max-width:30ch; font-size:16px; }
.scene-label,.artifact-label { color:#4b5644; }
.scene-label::before { background:#9b5537; }
.scene-label { display:none; }
.scene-intro h3 { margin-top:0; }
.scene-art { padding:12px 0; }
.scene-art::before { content:none; position:absolute; z-index:-1; inset:-45% 0; pointer-events:none; background:radial-gradient(ellipse,#c8d2b35c,transparent 66%); }
.message-bubble { color:#f4f2e9; background:#283226; border-radius:2px 2px 2px 24px; padding:32px; box-shadow:0 20px 50px -25px #26302450; }
.message-bubble span { color:#d0d8c5; }
.response-note { color:#394631; padding-block:28px; }
.small-cube { background:#935134; }
.brief-tags span { color:#4b5644; border:0; border-bottom:1px solid #b7c0ac; padding:5px 10px 8px 0; margin-right:10px; }
.plan-sheet,.result-sheet { background:#fcfbf5; box-shadow:0 28px 48px -35px #26302470,0 1px 1px #89977e40; border:1px solid #d7dece; }
.context-card { background:#fcfbf5; border:1px solid #d7dece; box-shadow:0 24px 40px -35px #26302470; }
.context-cross { color:#955435; }
.context-card .status-tag,.context-card small { color:#56614f; }
.context-card p { color:#263024; }
.compact { font-size:20px; }
.result-focus { padding-block:28px; font-size:34px; }
.story-after { margin-top:0; padding-bottom:12px; border-bottom:0; }
.story-after p { color:#4b5644; }
.starting { padding-top:72px; padding-bottom:88px; border-top:1px solid #c7cfbe; }
.starting-grid { grid-template-columns:1fr 1.15fr; gap:10%; }
.ownership-card { border-top:0; }
.ownership-card > div { border-color:#c7cfbe; }
.offering-details { margin-top:64px; border-color:#c7cfbe; }
.offering-details details { border-color:#c7cfbe; }
.contact { --muted:#bdc7b8; width:100%; max-width:none; padding:80px max(var(--gutter),calc((100vw - 1376px)/2)); background:#222d26; color:var(--paper); display:grid; grid-template-columns:1.1fr 1fr; gap:10%; align-items:end; }
.contact h2 { font-size:clamp(40px,4.2vw,66px); }
.contact h2 span { color:#c5b5a3; }
.contact .eyebrow::before { background:#d29883; }
.contact .contact-links { margin-top:0; min-width:0; }
.contact a:focus-visible { outline-color:#e2b7a4; }
.site-footer { border-top:0; }
@media (max-width:760px) {
  .experience-landscape { background:linear-gradient(180deg,var(--paper),#edf0e6 14%,#e7eadf 42%,#ebeee4 66%,var(--paper)); }
}
@media (max-width:1100px) {
  .site-head { gap:32px; }.primary-nav { gap:24px; }
  .hero-copy { width:72%; } h1 { font-size:clamp(64px,7.2vw,88px); }
  .workflow-panel { padding:40px 32px; gap:5%; }
  .workflow-tabs button { padding:20px; gap:10px; font-size:11px; }
  .workflow-tabs button::after { inset-inline:20px; }
}
@media (max-width:760px) {
  :root { --gutter:24px; }
  .site-head { height:80px; gap:16px; }.wordmark { font-size:20px; }
  .head-contact { display:none; }.primary-nav { gap:15px; }.primary-nav a { font-size:11px; }
  .js .primary-nav { display:none; }
  .js .menu-button { display:inline-flex; align-items:center; gap:14px; margin-left:auto; background:none; border:0; padding:12px 0 12px 12px; min-height:44px; font-size:12px; cursor:pointer; }
  .menu-sign { width:13px; height:13px; position:relative; }.menu-sign::before,.menu-sign::after { content:""; position:absolute; background:currentColor; width:13px; height:1px; left:0; top:6px; }.menu-sign::after { transform:rotate(90deg); transition:transform .2s; }.menu-button[aria-expanded="true"] .menu-sign::after { transform:rotate(0); }
  .hero { height:auto; min-height:100svh; }.hero-layout { min-height:100svh; padding-top:clamp(240px,36svh,350px); padding-bottom:104px; justify-content:center; }.hero-copy { width:100%; padding-top:0; }
  h1 { font-size:clamp(44px,11.8vw,76px); line-height:1.04; letter-spacing:-.067em; }
  .hero-dek { font-size:15px; line-height:1.6; margin-top:24px; max-width:33ch; }.hero-dek br { display:none; }
  .hero-foot { min-height:64px; font-size:9px; gap:16px; }.hero-foot span:nth-child(2) { display:none; }.hero-foot a { margin-left:auto; }
  .flow-fallback { left:9%; right:-115%; top:100px; height:clamp(130px,22svh,190px); }
  .section { padding-block:64px; }.eyebrow { font-size:9px; margin-bottom:25px; }
  h2 { font-size:clamp(38px,9vw,58px); letter-spacing:-.055em; }
  .heading-row { grid-template-columns:1fr; gap:22px; }.heading-row > p { font-size:16px; line-height:1.6; }
  .workbench { margin-top:38px; margin-inline:0; }
  .workbench-head { padding:0 0 18px; gap:14px; font-size:9px; }.workbench-head > span:last-child { max-width:130px; text-align:right; }
  .workflow-tabs button { flex-direction:column; align-items:flex-start; gap:9px; padding:16px 4px 16px 0; font-size:12px; line-height:1.4; min-height:64px; }
  .workflow-tabs button span { font-size:8px; }.workflow-tabs button::after { inset-inline:0 10px; }
  .workflow-panel { grid-template-columns:1fr; gap:22px; padding:30px 0 24px; min-height:460px; align-content:start; align-items:start; }
  .scene-intro h3 { font-size:30px; margin-top:12px; }.scene-intro h3 br { display:none; }.scene-intro p { font-size:13px; line-height:1.6; margin-top:14px; max-width:38ch; }
  .scene-label { font-size:9px; }.artifact-label { font-size:9px; margin-bottom:12px; }
  .message-bubble { padding:22px; font-size:18px; }.message-bubble span { font-size:13px; }.response-note { font-size:12px; padding:22px 2px; }.brief-tags { gap:5px; }.brief-tags span { font-size:8px; padding:7px; }
  .sheet-head { padding:17px 16px; font-size:12px; }.status-tag { font-size:8px; }.task-list { padding:0 16px; }.task-list li { font-size:12px; padding:18px 0; gap:12px; }.task-list small { font-size:10px; }.task-number { font-size:8px; }
  .context-card { padding:18px; gap:12px; }.context-card p { font-size:14px; }.context-card .status-tag { font-size:8px; }.context-card small { font-size:9px; }
  .result-focus { font-size:27px; padding:20px 16px; }.result-line { margin-inline:16px; font-size:11px; }.sheet-foot { font-size:8px; padding:12px 16px; }
  .story-controls { padding:20px 0 4px; flex-direction:column; align-items:stretch; gap:15px; }.story-status { font-size:9px; max-width:none; }.story-controls > div { justify-content:space-between; gap:12px; }.story-next,.story-finish { min-width:200px; min-height:48px; padding:13px 16px; font-size:12px; }.story-back { font-size:11px; }
  .story-after { gap:15px; align-items:flex-start; }.story-after p { font-size:9px; max-width:25ch; }.story-replay { font-size:10px; white-space:normal; text-align:right; padding:0; }.story-replay span { margin-left:5px; }
  .starting-grid { grid-template-columns:1fr; gap:40px; }.starting-dek { font-size:15px; margin-top:24px; }.ownership-card > div { padding-block:20px; }.ownership-card h3 { font-size:24px; }.ownership-card p { font-size:13px; max-width:none; }
  .offering-details { margin-top:40px; }summary { gap:12px; font-size:15px; padding:22px 0; }.summary-note { display:none; }.detail-sign { margin-left:auto; flex-shrink:0; }.detail-body > p { font-size:13px; }.plan-grid h3 { font-size:22px; }.plan-grid p { font-size:11px; line-height:1.6; }.plan-grid article { padding-right:8px; }
  .contact h2 { font-size:clamp(34px,8.5vw,55px); }.contact-dek { font-size:15px; margin-top:24px; }.contact-dek br { display:none; }.contact-links { margin-top:36px; }.contact-links > p { font-size:10px; }
  .site-footer { padding-block:28px 24px; }.footer-top { flex-wrap:wrap; gap:22px; }.footer-top p { order:3; flex-basis:100%; font-size:11px; }.back-top { font-size:10px; gap:12px; }.footer-bottom { flex-direction:column; gap:8px; padding-top:30px; font-size:8px; }
}
@media (max-width:380px) { :root { --gutter:20px; }.hero-layout { padding-top:240px; }.workflow-panel { padding-inline:0; min-height:500px; }.workflow-tabs button { font-size:10px; padding-inline:0; }.story-controls { padding-inline:0; }.story-next,.story-finish { min-width:180px; }.no-js .site-head { flex-wrap:wrap; align-content:center; gap:8px; }.no-js .primary-nav { margin-left:0; } }
@media (max-height:560px) and (min-width:761px) { .hero { min-height:650px; } }
@media (max-width:760px) and (max-height:520px) and (orientation:landscape) { .hero-layout { padding-top:150px; padding-bottom:96px; }.hero-copy { max-width:540px; }h1 { font-size:50px; }.hero-art { opacity:.55; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }.hero-canvas { display:none; }.flow-fallback { display:block!important; } }

@media (max-width:760px) { .workspace { padding-bottom:20px; }.story-after { padding-bottom:20px; }.starting { padding-top:42px; }.contact { display:block; padding-block:54px; }.contact .contact-links { margin-top:36px; }.workbench :focus-visible { outline-offset:2px; }.scene-art::before { inset:-25% 0; }.workflow-panel { gap:24px; }.message-bubble { padding:24px; }.workflow-tabs button[aria-selected="true"]::after { inset-inline:0 10px; } }

/* Text has a stable paper ground; the moving material cannot alter contrast. */
.site-head, .hero-foot { background:var(--paper); }
.hero-copy { isolation:isolate; }
.hero-copy::before { content:""; position:absolute; z-index:-1; inset:-10px; background:var(--paper); box-shadow:0 0 28px 18px var(--paper); pointer-events:none; }

/* The passage fills the chapter; live atmosphere enhances the original image. */
.hero { min-height:100svh; height:auto; background:#14231e; color:#f5f2e9; }
.hero-layout { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:100svh; height:auto; padding-top:152px; padding-bottom:144px; }
.hero-copy { width:100%; max-width:800px; padding-top:0; }
.hero-copy::before { display:none; }
.hero h1 { font-size:clamp(68px,7.5vw,116px); line-height:1.01; letter-spacing:-.067em; font-weight:400; }
.hero h1 span { color:#d3d8c9; }
.hero-dek { max-width:35ch; color:#e0e3d9; font-size:clamp(17px,1.45vw,20px); margin-top:30px; }
.hero-availability { color:#c7d0c5; font-size:12px; line-height:1.6; margin-top:22px; max-width:38ch; }
.hero .action-link { margin-top:28px; background:#f0eee2; border-color:#f0eee2; color:#203026; }
.hero .action-link:hover { background:#fffdf3; border-color:#fffdf3; }
.hero a:focus-visible,.hero button:focus-visible { outline-color:#f1c3a4; }
.hero-signal { position:absolute; inset:0; margin:0; pointer-events:none; z-index:0; }
.signal-field { position:absolute; inset:0; overflow:hidden; background:#17231f; contain:paint; }
.portal-image { position:absolute; inset:0; display:block; width:100%; height:100%; }
.portal-image { object-fit:cover; object-position:62% 50%; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#07140fc9 0%,#0b1b1459 42%,transparent 73%),linear-gradient(180deg,#0b100d,transparent 25%,transparent 67%,#07140f75); }
.hero-foot { color:#cbd3c6; border-top:1px solid #dae1cc35; background:transparent; min-height:88px; }
.hero-foot a { margin-left:0; }
html.hero-in-view .site-head,html.no-js:has(.hero) .site-head { color:#f1f2e8; background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; }
html.hero-in-view .site-head::before,html.no-js:has(.hero) .site-head::before { content:""; position:fixed; z-index:-1; inset:0 0 auto; height:calc(var(--header-band,72px) + 48px); pointer-events:none; background:linear-gradient(180deg,#0b100d 0%,#0b100d99 52%,#0b100d00 100%); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); mask-image:linear-gradient(#000 0%,#000 48%,transparent 100%); -webkit-mask-image:linear-gradient(#000 0%,#000 48%,transparent 100%); }
html.no-js:has(.hero) .site-head::before { height:var(--header-band,72px); background:#203026; backdrop-filter:none; -webkit-backdrop-filter:none; mask-image:none; -webkit-mask-image:none; }
html.hero-in-view .primary-nav a,html.no-js:has(.hero) .primary-nav a { color:#d7dfd1; }
html.hero-in-view .site-head a:hover { color:#f1c3a4; }
html.hero-in-view .site-head :focus-visible { outline-color:#65513e; }
html.hero-in-view .mobile-nav { color:#edf0e6; background:#14251ef5; border-color:#697a69; }
html.hero-in-view .mobile-nav a { border-color:#60735d; }
@media (max-width:1100px) and (min-width:761px) {
 .hero h1 { font-size:clamp(64px,7.8vw,86px); }
 .hero-copy { max-width:650px; }
 .hero-layout { padding-top:140px; padding-bottom:132px; }
}
@media (max-width:760px) {
 .hero-layout { align-items:stretch; justify-content:flex-end; min-height:100svh; padding-top:clamp(180px,31svh,320px); padding-bottom:106px; }
 .hero-copy { width:100%; max-width:none; }
 .hero h1 { font-size:clamp(43px,11.9vw,74px); line-height:1.02; }
 .hero-dek { font-size:15px; line-height:1.6; margin-top:20px; max-width:36ch; }
 .hero-availability { font-size:11px; margin-top:18px; }
 .hero .action-link { margin-top:22px; }
 .portal-image { object-position:63% 50%; }
 .hero::after { background:linear-gradient(180deg,#0b100d 0%,#0b100dcc 9%,transparent 28%,#09171018 34%,#091710d9 62%,#091710eb 100%); }
 .hero-foot { min-height:76px; gap:14px; }
 .hero-foot a { margin-left:0; }
}
@media (max-width:380px) { .hero-layout { padding-top:180px; padding-bottom:92px; }.hero-dek { font-size:14px; }.hero h1 { font-size:43px; } }
@media (max-height:520px) and (orientation:landscape) {
 .hero-layout { min-height:100svh; padding-top:105px; padding-bottom:82px; }
 .hero-copy { max-width:540px; }
 .hero h1 { font-size:48px; }
 .hero-dek { font-size:14px; margin-top:16px; max-width:40ch; }
 .hero .action-link { margin-top:18px; }
 .hero-availability { margin-top:12px; }
 .hero-foot { min-height:66px; }
 .hero::after { background:linear-gradient(90deg,#07140fce,#0b1b1466 55%,transparent 88%); }
}

/* Neutral hosted-checkout return: account status remains in the native app. */
.purchase-return { max-width:850px; padding-top:180px; padding-bottom:90px; min-height:calc(100svh - 120px); }
.purchase-return h1 { font-size:clamp(44px,6vw,76px); }
.return-dek { max-width:42ch; font-size:20px; line-height:1.6; margin-top:32px; }
.return-guidance { margin-top:48px; border-top:1px solid var(--line); padding-top:32px; }
.return-guidance h2 { font-size:22px; letter-spacing:-.025em; margin-top:24px; }
.return-guidance p { margin-top:12px; color:var(--muted); line-height:1.65; max-width:62ch; }
.return-help { font-size:13px; line-height:1.6; margin-top:36px; color:var(--muted); }
@media(max-width:760px) { .purchase-return { padding-top:132px; padding-bottom:60px; }.return-dek { font-size:17px; }.return-guidance { margin-top:32px; }.return-guidance p { font-size:14px; } }

.mvp-features { display:grid; grid-template-columns:1fr 1fr; gap:32px 48px; padding:30px 0 12px; }
.mvp-features h3 { font-size:25px; font-weight:400; letter-spacing:-.035em; }
.mvp-features p { margin-top:12px; color:var(--muted); font-size:15px; line-height:1.65; }
@media(max-width:760px) { .mvp-features { grid-template-columns:1fr; gap:28px; padding-top:24px; }.mvp-features h3 { font-size:23px; }.mvp-features p { font-size:13px; } }

/* Comfortable targets and proportionate portrait-tablet composition. */
.story-replay,.back-top { min-height:44px; display:inline-flex; align-items:center; }

/* The board is an editorial illustration, not a product screenshot. */
.kanban-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:20px; }
.kanban-column h3 { margin:0 0 14px; color:#626a5b; font:10px/1.5 var(--mono); font-weight:400; }
.kanban-task { padding:14px 12px; background:#e8ece1; border-top:2px solid #95a18b; font-size:13px; line-height:1.5; }
.kanban-task small { display:block; margin-top:10px; color:#535e4d; font-size:11px; line-height:1.5; }
@media(max-width:760px) { .kanban-columns { gap:8px; padding:14px 10px; }.kanban-column h3 { font-size:9px; }.kanban-task { font-size:11px; padding:12px 8px; }.kanban-task small { font-size:10px; } }

.policy-links { display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:24px; font-size:12px; }
.policy-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; text-underline-offset:4px; }
.policy-links a:hover { text-decoration:underline; }
.policy-page { max-width:900px; padding-top:170px; padding-bottom:80px; }
.policy-page h1 { font-size:clamp(44px,6vw,76px); }
.policy-date { margin-top:24px; color:var(--muted); font-size:12px; }
.policy-body { max-width:66ch; margin-top:44px; }
.policy-body h2 { font-size:25px; line-height:1.3; letter-spacing:-.035em; margin:40px 0 16px; }
.policy-body p { color:var(--muted); font-size:16px; line-height:1.75; margin-top:20px; }
.policy-body a { text-underline-offset:3px; }
@media(max-width:760px) { .policy-page { padding-top:130px; padding-bottom:56px; }.policy-body p { font-size:15px; }.policy-page h1 { font-size:44px; } }

@media(max-width:760px) { .tabs-ready .workflow-panel[hidden] { display:none!important; }.workflow-panel { min-height:0; }.story-after { margin-top:8px; }.story-replay { max-width:150px; } }

/* Viewport chapters: one document, one reading direction, native scroll physics. */
html.chapter-site { scroll-snap-type:y mandatory; scroll-padding-top:0; }
.chapter-site .site-head { --header-band:72px; position:fixed; height:72px; background:var(--paper); inset:0 0 auto; border-color:#1c211e18; }
.chapter-site .site-head { isolation:isolate; }
.chapter-site:not(.hero-in-view):not(.no-js) .site-head::before { content:""; position:fixed; z-index:-1; inset:0 0 auto; height:var(--header-band,72px); background:var(--paper); pointer-events:none; }
.chapter:focus { outline:none; }
.chapter-site .mobile-nav { position:fixed; top:64px; max-height:calc(100svh - 64px); overflow:auto; }
.chapter { position:relative; min-block-size:100svh; scroll-snap-align:start; scroll-snap-stop:always; }
.chapter-alias { position:absolute; top:0; left:0; }
.example-chapter,.starting.chapter { padding:104px 0 52px; }
.chapter-inner { min-block-size:calc(100svh - 156px); display:grid; grid-template-rows:auto 1fr auto; gap:28px; }
.chapter-kicker { display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:12px; line-height:1.5; }
.chapter-kicker>p { color:var(--ink); font-size:14px; }
.chapter-kicker>a { color:inherit; text-decoration:none; min-height:28px; display:inline-flex; align-items:center; }
.chapter-kicker>a:hover { text-decoration:underline; text-underline-offset:4px; }
.chapter-body { display:grid; grid-template-columns:1fr 1.12fr; align-items:center; column-gap:10%; padding-block:12px; }
.chapter-body .scene-intro h2 { font-size:clamp(44px,4.5vw,72px); line-height:1.06; letter-spacing:-.058em; }
.chapter-body .scene-intro p { font-size:17px; line-height:1.65; max-width:33ch; margin-top:28px; }
.chapter-body .scene-art { min-width:0; padding:0; }
.chapter-body .artifact-label { font-size:11px; line-height:1.5; margin-bottom:18px; }
.chapter-body .message-bubble { padding:32px; font-size:24px; line-height:1.45; border-radius:0 0 0 24px; box-shadow:none; }
.chapter-body .response-note { padding:24px 0; font-size:16px; line-height:1.6; align-items:flex-start; }
.chapter-body .small-cube { margin-top:6px; width:8px; height:8px; }
.chapter-body .brief-tags span { font:11px/1.5 var(--sans); margin:0 16px 0 0; padding:0 0 8px; }
.chapter-body .sheet-head { font-size:14px; padding:20px 24px; }
.chapter-body .status-tag { font-size:10px; }
.chapter-body .kanban-columns { padding:24px; gap:16px; }
.chapter-body .kanban-column h3 { font-size:11px; }
.chapter-body .kanban-task { font-size:15px; min-height:104px; padding:16px 12px; }
.chapter-body .sheet-foot { font:11px/1.6 var(--sans); padding:16px 24px; }
.chapter-body .result-line { font-size:14px; padding-block:16px; grid-template-columns:42px minmax(0,1fr); }
.chapter-body code { font:12px/1.65 var(--mono); overflow-wrap:anywhere; }
.chapter-body .result-focus { font-size:34px; padding:24px; }
.chapter-bottom { border-top:1px solid #1c211e28; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:12px; line-height:1.5; color:var(--muted); }
.chapter-bottom>p { max-width:44ch; }
.chapter-bottom nav { display:flex; justify-content:space-between; align-items:center; gap:36px; }
.chapter-bottom a { display:inline-flex; align-items:center; gap:14px; min-height:44px; color:var(--ink); text-decoration:none; white-space:nowrap; }
.chapter-bottom a:first-child { color:var(--muted); }
.chapter-bottom a:last-child { padding:13px 20px; border-radius:6px; background:#253a2d; color:#f3f1eb; font-size:13px; font-weight:500; text-align:center; justify-content:center; }
.chapter-bottom a:first-child:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.chapter-bottom a:last-child:hover { background:#3b5041; }
.chapter-plans { background:#e4e8dd; }
.chapter-files { background:#eee9e0; }
.chapter-code { background:#d9e0d4; }
.starting.chapter { border:0; background:var(--paper); }
.starting.chapter .starting-grid { grid-template-columns:1fr 1.1fr; gap:10%; align-items:center; }
.starting.chapter h2 { font-size:clamp(44px,4.6vw,72px); }
.starting.chapter .starting-dek { max-width:35ch; }
.starting.chapter .offering-details { margin:0; border-color:#bcc3b5; }
.starting.chapter summary { align-items:center; padding-block:25px; font-size:22px; gap:16px; }
.starting.chapter summary small { display:block; margin-top:10px; font-size:13px; letter-spacing:0; line-height:1.6; color:var(--muted); }
.starting.chapter .detail-sign { margin-left:auto; }
.starting.chapter .detail-body { padding:0 0 24px; }
.starting.chapter .detail-body p { font-size:14px; }
.closing { --muted:#bdc7b8; --ink:#f3f1eb; color:var(--ink); background:#222d26; display:flex; flex-direction:column; padding-top:104px; padding-bottom:64px; }
.closing .contact { width:calc(100% - var(--gutter)*2); max-width:1376px; padding:24px 0 48px; flex:1; background:transparent; grid-template-columns:1.1fr 1fr; align-items:center; }
.closing .contact h2 { font-size:clamp(44px,5vw,76px); }
.closing .contact-dek { max-width:35ch; }
.closing .site-footer { border-color:#bdc7b838; padding-top:24px; padding-bottom:0; }
.closing .footer-top>p { display:none; }
.closing .policy-links { margin-top:12px; }
.closing .footer-bottom { padding-top:16px; font-size:10px; }
.closing a:focus-visible { outline-color:#e2b7a4; }
.chapter-nav { position:fixed; z-index:11; right:6px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; }
.chapter-nav a { position:relative; width:44px; height:40px; display:grid; place-items:center; color:var(--ink); text-decoration:none; }
.chapter-dot { width:5px; height:5px; border-radius:50%; background:#a1aa9b; transition:transform .35s,background .35s; }
.chapter-nav a[aria-current] .chapter-dot { background:#aa674f; transform:scale(1.6); }
.chapter-nav-label { position:absolute; right:43px; width:max-content; padding:7px 10px; color:#1c211e; background:#f3f1eb; font-size:11px; opacity:0; pointer-events:none; transition:opacity .2s; }
.chapter-nav a:hover .chapter-nav-label,.chapter-nav a:focus-visible .chapter-nav-label { opacity:1; }
@media (prefers-reduced-motion:no-preference) {
 .chapter-body .scene-art { transform:none; }
 .chapter[data-chapter-active] .scene-art { transform:translateY(0); }
}
@media (max-width:1100px) {
 .chapter-body,.starting.chapter .starting-grid { column-gap:6%; }
 .chapter-body .scene-intro h2 { font-size:clamp(42px,5.2vw,58px); }
 .chapter-body .scene-intro p { font-size:16px; }
 .chapter-body .message-bubble { font-size:21px; padding:24px; }
 .chapter-body .kanban-columns { padding:18px; gap:10px; }
 .chapter-body .kanban-task { font-size:13px; padding:12px 10px; }
 .chapter-body .result-focus { font-size:30px; }
 .chapter-nav { right:0; }
 .chapter-nav a { width:32px; }
}
@media (max-width:760px) {
 .chapter-site .site-head { --header-band:64px; height:64px; }
 .example-chapter,.starting.chapter { padding:100px 0 96px; }
 .chapter-inner { min-block-size:calc(100svh - 196px); gap:28px; }
 .chapter-kicker { font-size:11px; gap:16px; }
 .chapter-kicker>p { font-size:13px; }
 .chapter-body { grid-template-columns:1fr; gap:32px; padding:0; align-content:center; }
 .chapter-body .scene-intro h2 { font-size:clamp(36px,9vw,54px); max-width:14ch; }
 .chapter-body .scene-intro p { font-size:15px; margin-top:18px; max-width:40ch; }
 .chapter-body .scene-art { max-width:560px; width:100%; margin-inline:auto; }
 .chapter-body .artifact-label { font-size:10px; margin-bottom:12px; }
 .chapter-body .message-bubble { font-size:20px; padding:24px; }
 .chapter-body .response-note { font-size:14px; padding-block:20px; }
 .chapter-body .brief-tags span { font-size:10px; }
 .chapter-body .sheet-head { padding:16px; font-size:13px; }
 .chapter-body .status-tag { font-size:9px; }
 .chapter-body .kanban-columns { gap:8px; padding:16px 12px; }
 .chapter-body .kanban-task { padding:12px 8px; font-size:12px; min-height:100px; }
 .chapter-body .kanban-column h3 { font-size:10px; }
 .chapter-body .result-line { font-size:13px; margin-inline:16px; padding-block:14px; }
 .chapter-body .result-focus { font-size:29px; padding:20px 16px; }
 .chapter-body .sheet-foot { font-size:11px; padding:14px 16px; }
 .chapter-bottom { display:block; padding-top:14px; }
 .chapter-bottom>p { display:none; }
 .chapter-bottom nav { width:100%; gap:16px; }
 .chapter-bottom a { font-size:12px; white-space:normal; gap:9px; }
 .starting.chapter .starting-grid { grid-template-columns:1fr; gap:32px; }
 .starting.chapter h2 { font-size:clamp(38px,10vw,58px); }
 .starting.chapter summary { font-size:21px; padding-block:22px; }
 .closing { padding-top:100px; padding-bottom:76px; }
 .closing .contact { display:block; padding:0 0 40px; }
 .closing .contact h2 { font-size:clamp(40px,10vw,58px); }
 .closing .contact-links { margin-top:36px; }
 .closing .contact-dek { font-size:15px; margin-top:22px; }
 .closing .footer-top { gap:12px; }
 .closing .footer-bottom { font:10px/1.6 var(--sans); }
 .chapter-nav { top:auto; bottom:8px; right:50%; transform:translateX(50%); flex-direction:row; background:#f3f1ebed; border:1px solid #1c211e12; border-radius:24px; }
 .chapter-nav a { width:40px; height:40px; }
 .chapter-nav-label { right:auto; bottom:48px; }
}
@media (min-width:761px) and (max-height:760px) {
 .example-chapter,.starting.chapter { padding-top:96px; padding-bottom:32px; }
 .chapter-inner { min-block-size:calc(100svh - 128px); gap:16px; }
 .chapter-body .scene-intro h2,.starting.chapter h2 { font-size:48px; }
 .chapter-body .scene-intro p { margin-top:20px; font-size:16px; }
 .chapter-body .result-line { padding-block:12px; }
 .chapter-body .result-focus { padding-block:18px; font-size:30px; }
 .chapter-body .sheet-foot { padding-block:12px; }
 .chapter-bottom { padding-top:12px; }
 .closing { padding-top:96px; padding-bottom:32px; }
 .closing .contact { padding-bottom:28px; }
 .closing .contact h2 { font-size:54px; }
}
@media (prefers-reduced-motion:reduce) { html.chapter-site { scroll-snap-type:none; scroll-behavior:auto; }.chapter-body .scene-art { transform:none; transition:none; } }

/* The hero already has its own progression cue; keep the phone artwork clear. */
@media(max-width:760px) { html.hero-in-view .chapter-nav { visibility:hidden; pointer-events:none; } }

/* A single reading flow, with one enquiry link in the navigation. */
.chapter-site .primary-nav { display:flex; margin-left:auto; }
.chapter-site .primary-nav .head-contact { display:inline-flex; min-height:44px; padding:10px 0; color:inherit; font-size:13px; border-bottom:1px solid currentColor; line-height:1; }
.chapter-site .primary-nav .head-contact:hover { opacity:.75; }
.chapter-bottom { min-height:44px; }

.gateway-note { max-width:40ch; margin-top:24px; color:var(--muted); font-size:14px; line-height:1.65; }
.contact-email { max-width:100%; }
@media (max-width:760px) { .gateway-note { font-size:14px; margin-top:20px; } .contact-email { padding-inline:20px; font-size:15px; } }

.keep-together { white-space:nowrap; }

/* Keep the seven cards within ordinary phone/tablet viewports. Content can still
   grow naturally for zoom, expanded disclosures and unusually short windows. */
@media (max-width:760px) {
 .example-chapter,.starting.chapter { padding:84px 0 24px; }
 .chapter-inner { min-block-size:calc(100svh - 108px); gap:16px; }
 .chapter-body { gap:20px; }
 .chapter-body .scene-intro h2 { font-size:clamp(32px,8vw,42px); max-width:none; }
 .chapter-body .scene-intro p { margin-top:14px; line-height:1.55; max-width:44ch; }
 .chapter-bottom { min-height:0; padding-top:0; }
 .chapter-body .sheet-head { padding:12px 16px; }
 .chapter-body .kanban-columns { padding:12px; }
 .chapter-body .kanban-task { min-height:80px; }
 .chapter-body .result-line { padding-block:8px; }
 .chapter-body .result-focus { font-size:26px; padding:14px 16px; }
 .chapter-body .sheet-foot { padding:10px 16px; }
 .starting.chapter .starting-grid { gap:20px; }
 .starting.chapter h2 { font-size:clamp(34px,8vw,42px); }
 .starting.chapter .starting-dek { margin-top:16px; max-width:44ch; }
 .starting.chapter .gateway-note { margin-top:14px; max-width:48ch; }
 .starting.chapter summary { font-size:18px; padding-block:15px; }
 .starting.chapter summary small { margin-top:6px; }
 .closing { padding:84px 0 24px; }
 .closing .contact { padding-bottom:24px; }
 .closing .contact h2 { font-size:clamp(36px,8vw,46px); }
 .closing .contact-dek { margin-top:16px; }
 .closing .contact-links { margin-top:24px; }
 .closing .site-footer { padding-top:18px; }
 .closing .footer-bottom { flex-direction:row; flex-wrap:wrap; gap:6px 18px; }
}

/* Page backgrounds, not a browser preference, provide Safari's edge fill. */
html.chapter-site { --page-surface:#ebeadd; background-color:var(--page-surface); color-scheme:light; }
.chapter-site body { background-color:var(--page-surface); }
.chapter { --chapter-surface:#f3f1eb; background-color:var(--chapter-surface); }
.chapter.hero { --chapter-surface:#ebeadd; }
.chapter-plans { --chapter-surface:#e4e8dd; }
.chapter-files { --chapter-surface:#eee9e0; }
.chapter-code { --chapter-surface:#d9e0d4; }
.chapter.closing { --chapter-surface:#222d26; }
.chapter-site:not(.hero-in-view):not(.no-js) .site-head,
.chapter-site:not(.hero-in-view):not(.no-js) .site-head::before { background-color:var(--page-surface); }
.chapter-site.dark-card:not(.hero-in-view) .site-head { color:#f3f1eb; }
.chapter-site.dark-card:not(.hero-in-view) .primary-nav a { color:inherit; }

/* Account for cutouts inside each card's viewport budget, not below it. */
.chapter-site { --card-top:104px; --card-bottom:52px; --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px); }
.chapter-site .wrap { width:calc(100% - max(var(--gutter),env(safe-area-inset-left,0px)) - max(var(--gutter),env(safe-area-inset-right,0px))); }
.chapter-site .site-head { height:calc(var(--header-band) + var(--safe-top)); padding-top:var(--safe-top); }
.chapter-site:not(.hero-in-view):not(.no-js) .site-head::before { height:calc(var(--header-band) + var(--safe-top)); }
html.hero-in-view .site-head::before { height:calc(var(--header-band) + var(--safe-top) + 48px); }
.chapter-site .example-chapter,.chapter-site .starting.chapter { padding-top:calc(var(--card-top) + var(--safe-top)); padding-bottom:max(var(--card-bottom),var(--safe-bottom)); }
.chapter-site .chapter-inner { min-block-size:calc(100svh - var(--card-top) - var(--safe-top) - max(var(--card-bottom),var(--safe-bottom))); }
.chapter-site .hero-foot { padding-bottom:var(--safe-bottom); }
.chapter-site .closing { padding-top:calc(104px + var(--safe-top)); padding-bottom:max(64px,var(--safe-bottom)); }
@media (min-width:761px) and (max-height:760px) {
 .chapter-site { --card-top:96px; --card-bottom:32px; }
 .chapter-site .closing { padding-top:calc(96px + var(--safe-top)); padding-bottom:max(32px,var(--safe-bottom)); }
}
@media (max-width:760px) {
 .chapter-site { --card-top:84px; --card-bottom:24px; }
 .chapter-site .closing { padding-top:calc(84px + var(--safe-top)); padding-bottom:max(24px,var(--safe-bottom)); }
}

/* Keep each card's own surface behind expanded browser controls. Its readable
   content uses the small viewport; the remaining background fills the large one. */
.chapter-site .chapter { min-block-size:100lvh; }
.chapter-site .hero { min-height:100lvh; }
.chapter-site .example-chapter,.chapter-site .starting.chapter {
 padding-bottom:calc(max(var(--card-bottom),var(--safe-bottom)) + 100lvh - 100svh);
}
.chapter-site .closing { padding-bottom:calc(max(var(--card-bottom),var(--safe-bottom)) + 100lvh - 100svh); }
@media (max-width:760px) {
 .chapter-site { --card-top:80px; --card-bottom:16px; }
 .chapter-site .chapter-inner { gap:12px; }
 .chapter-site .chapter-body { gap:16px; }
 .chapter-site .chapter-code .result-line:has(code) { grid-template-columns:1fr; gap:4px; }
 .chapter-site .chapter-code .result-focus { font-size:24px; padding-block:10px; }
 .chapter-site .chapter-code .sheet-foot { margin-top:0; padding-block:8px; }
 .chapter-site .chapter-files .sheet-foot { margin-top:0; }
 .chapter-site .closing { padding-top:calc(80px + var(--safe-top)); }
 .chapter-site .closing .contact { padding-bottom:12px; }
 .chapter-site .closing .contact-links > p { margin-top:12px; }
 .chapter-site .closing .legal-contact { margin-top:8px; }
 .chapter-site .closing .contact h2 { font-size:36px; }
 .chapter-site .closing .contact-dek { margin-top:12px; }
 .chapter-site .closing .contact-links { margin-top:16px; }
 .chapter-site .closing .site-footer { padding-top:14px; }
 .chapter-site .closing .footer-bottom { padding-top:12px; }
}

/* One full-width edge surface keeps Safari toolbar sampling aligned with the
   current card; the hero image fades into the same rock-dark tone. */
@media (max-width:760px) {
 .chapter-site .site-head { width:100%; max-width:none; padding-inline:var(--gutter); }
 .chapter-site .site-head::before { position:absolute!important; }
 html.hero-in-view .site-head { background-color:var(--page-surface); }
}

/* The Stromwell mark is strictly monochrome in every link state. */
html body .site-head a.wordmark:is(:link,:visited,:hover,:focus,:focus-visible,:active),
html body .site-footer a.wordmark:is(:link,:visited,:hover,:focus,:focus-visible,:active) { color:var(--brand-ink,#000); }
html.hero-in-view .site-head,html.dark-card .site-head,
html.no-js:has(.hero) .site-head,.closing { --brand-ink:#fff; }

/* The hero stays visible beneath a softly frosted header. The solid reading
   surface takes over from the same reversible edge coverage as the wordmark. */
html.chapter-site.js:not(.no-js) .site-head {
 width:100%; max-width:none;
 padding-inline:max(var(--gutter),calc((100% - 1376px)/2));
 background:var(--header-surface,var(--page-surface)); box-shadow:none;
}
html.chapter-site.js:not(.no-js) .site-head::before { display:none; }
html.chapter-site.js:not(.no-js) .site-head { --brand-ink:#000; color:#000; }
html.chapter-site.js.dark-card:not(.no-js) .site-head { --brand-ink:#fff; color:#fff; }
html.chapter-site.js:not(.no-js) .site-head .primary-nav a { color:inherit; }
html.chapter-site.js:not(.no-js) .site-head::after {
 content:""; position:absolute; z-index:-2; inset:0 0 auto;
 height:calc(100% + 32px); pointer-events:none;
 background:#0f1b158c;
 backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
 mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%);
 -webkit-mask-image:linear-gradient(#000 0%,#000 60%,transparent 100%);
 opacity:var(--hero-coverage,1);
}
.hero::after {
 background:linear-gradient(90deg,#07140fc9 0%,#0b1b1459 42%,transparent 73%),linear-gradient(180deg,transparent 60%,#07140f75);
}
/* The same image backs the document's exposed top edge where the browser allows
   it; safe-area padding protects controls without putting a slab over the art. */
html.chapter-site.hero-in-view {
 background-image:url("hero-postcard.webp?v=passage-46");
 background-repeat:no-repeat; background-size:cover;
 background-position:62% 50%; background-attachment:fixed;
}
@media (max-width:760px) {
 html.chapter-site.hero-in-view { background-position:63% 50%; }
 .hero::after { background:linear-gradient(180deg,#15231d18 0%,transparent 30%,#09171018 38%,#091710d9 66%,#091710eb 100%); }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 html.chapter-site.js:not(.no-js) .site-head { background:var(--page-surface); }
 html.chapter-site.js:not(.no-js) .site-head::before,
 html.chapter-site.js:not(.no-js) .site-head::after { display:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 html.chapter-site.js:not(.no-js) .site-head { background:var(--page-surface); }
 html.chapter-site.js:not(.no-js) .site-head::before,
 html.chapter-site.js:not(.no-js) .site-head::after { display:none; }
}

/* Desktop edge coverage: the surface spans the viewport while its contents
   retain the page gutter. Keep mobile safe-area and card behavior unchanged. */
@media (min-width:761px) {
 html.chapter-site .site-head {
  width:100%; max-width:none; margin-inline:0;
  padding-inline:max(var(--gutter),calc((100% - 1376px)/2));
  border-bottom:0;
 }
 html.chapter-site .site-head .primary-nav .head-contact {
  border-bottom:0; text-decoration:none;
 }
 html.chapter-site.js:not(.no-js) .site-head {
  background:color-mix(in srgb,var(--page-surface) clamp(0%,calc((1 - var(--hero-coverage,1))*400%),100%),transparent);
 }
 html.chapter-site.js:not(.no-js) .site-head::before,
 html.chapter-site.js:not(.no-js) .site-head::after {
  background:linear-gradient(180deg,#0b100d33,transparent);
 }
 .hero::after {
  background:linear-gradient(90deg,#07140fc9 0%,#0b1b1459 42%,transparent 73%),linear-gradient(180deg,transparent 67%,#07140f75);
 }
}
@media (min-width:761px) and (prefers-reduced-transparency:reduce),
       (min-width:761px) and (prefers-contrast:more) {
 html.chapter-site.js:not(.no-js) .site-head { background:var(--page-surface); }
 html.chapter-site.js:not(.no-js) .site-head::before,
 html.chapter-site.js:not(.no-js) .site-head::after { display:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 @media (min-width:761px) {
  html.chapter-site.js:not(.no-js) .site-head { background:var(--page-surface); }
  html.chapter-site.js:not(.no-js) .site-head::before,
  html.chapter-site.js:not(.no-js) .site-head::after { display:none; }
 }
}

/* Match the quiet primary action across desktop and mobile. */
html.chapter-site .site-head .primary-nav .head-contact { border-bottom:0; text-decoration:none; }

/* Fixed card boundaries, with native scrolling for content and open disclosures.
   The small viewport reserves Safari's controls; the large viewport keeps the
   existing background behind them. No graphics are resized or clipped. */
html.chapter-site.js .chapter:not(.hero) { block-size:100lvh; overflow:clip; }
html.chapter-site.js .card-scroll {
 block-size:100%; min-block-size:0; overflow-y:auto; overflow-x:hidden;
 scrollbar-width:thin; overscroll-behavior-y:contain;
 scroll-padding-block:12px; padding-inline:2px;
}
html.chapter-site.js .chapter-inner.card-scroll { grid-template-rows:auto minmax(min-content,1fr) auto; }
.card-scroll:focus-visible { outline:2px solid currentColor; outline-offset:-2px; }
html.chapter-site.js .starting.chapter .starting-grid { align-items:start; }
html.chapter-site.js .starting.chapter .offering-details { min-width:0; }

/* The browser edge follows each card's solid surface. Hero art remains behind
   the frosted navigation; its sky-colored safe-area tint is deliberately solid. */
html.chapter-site,html.chapter-site.hero-in-view { background-image:none; }
html.chapter-site.hero-in-view body { background-color:var(--page-surface); }
html.chapter-site.js:not(.no-js) .site-head {
 background:var(--header-surface,var(--page-surface));
 backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0;

}
@media(max-width:760px) {
 html.chapter-site.js:not(.no-js) .site-head {
  position:fixed; top:var(--toolbar-offset,0px);
 }
}
html.chapter-site.js:not(.no-js) .site-head::before {
 content:""; display:block; position:absolute; inset:0 0 auto;
 height:var(--safe-top); background:var(--page-surface); z-index:-1;
}
html.chapter-site.js:not(.no-js) .site-head::after {
 display:block; top:var(--safe-top); height:calc(var(--header-band) + 24px);
 background:linear-gradient(180deg,#ebeadd80,transparent);
 backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
 opacity:var(--hero-coverage,0);
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 html.chapter-site.js:not(.no-js) .site-head { background:var(--page-surface); }
 html.chapter-site.js:not(.no-js) .site-head::after { display:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 html.chapter-site.js:not(.no-js) .site-head { background:var(--page-surface); }
 html.chapter-site.js:not(.no-js) .site-head::after { display:none; }
}

/* Quiet postcard studies sit behind the reading layer, never inside examples. */
.chapter:not(.hero) { isolation:isolate; }
.chapter:not(.hero)::before {
 content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.38;
 background-image:linear-gradient(180deg,var(--chapter-surface) 32%,transparent 85%),linear-gradient(90deg,var(--chapter-surface),transparent 72%),var(--card-motif);
 background-size:100% 100%,100% 100%,min(78vw,960px) auto;
 background-position:center,center,right bottom; background-repeat:no-repeat;
}
.chapter:not(.hero) > .card-scroll,.chapter:not(.hero) > .chapter-inner,
.closing > .contact,.closing > .site-footer { position:relative; z-index:1; }
#workflow-plan { --card-motif:url("motif-answers.webp"); }
#workflow-memory { --card-motif:url("motif-plans.webp"); }
#dream { --card-motif:url("motif-dream.webp"); }
#workflow-refine { --card-motif:url("motif-files.webp"); }
#gepa { --card-motif:url("motif-gepa.webp"); }
#workflow-result { --card-motif:url("motif-code.webp"); }
#private-model { --card-motif:url("motif-private.webp"); }
#membership { --card-motif:url("motif-choices.webp"); }
#contact { --card-motif:url("motif-closing.webp"); }
@media(prefers-contrast:more),(forced-colors:active) {
 .chapter:not(.hero)::before { display:none; }
}

/* The illustrated hero reads as warm paper inside a sampled pale-sky edge. */
.chapter.hero { background:#f3f1eb; color:#1c211e; }
.hero .signal-field { background:#f3f1eb; }
.hero::after { background:none; }
.hero h1 span { color:#50584b; }
.hero-dek { color:#414a3f; }
.hero-availability { color:#555d51; }
html.no-js:has(.hero) .site-head { background:#ebeadd; color:#000; --brand-ink:#000; }
html.no-js:has(.hero) .site-head::before { background:#ebeadd; }

@media(max-width:760px) {
 .hero .portal-image { inset:0; height:100%; object-position:76% 50%; mask-image:none; -webkit-mask-image:none; }
 .hero::after { background:linear-gradient(180deg,#ebeadd10 22%,#f3f1eb55 42%,#f3f1ebc9 66%,#f3f1ebad 100%); }
 .hero-layout { padding-bottom:64px; }
}

@media(max-width:760px) and (max-height:700px) {
 .hero .portal-image { height:100%; }
 .hero-layout { padding-bottom:32px; }
}

@media(prefers-reduced-motion:reduce) {
 html.chapter-site.js { scroll-snap-type:none; }
}

/* Let the closing composition use the available reading height. Intrinsic
   content stays scrollable in short viewports rather than being squeezed. */
html.chapter-site.js .closing > .card-scroll { display:flex; flex-direction:column; }
.closing .contact { flex:1 0 auto; align-content:center; }
.closing .site-footer { flex:0 0 auto; }
.closing .footer-bottom { color:#e3e6dc; }
.closing::before { opacity:.46; }
@media(max-width:760px) {
 .closing .contact { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
}

@media(max-width:380px) {
 .chapter-site .closing .contact h2 { font-size:28px; line-height:1.12; }
}
@media(min-width:761px) and (max-height:520px) {
 .closing .contact h2 { font-size:clamp(32px,4.3vw,40px); }
 .closing .contact-dek { font-size:14px; line-height:1.55; margin-top:16px; }
}

/* A quiet introduction; account conversion belongs in the closing card. */
.hero-next { display:inline-flex; align-items:center; gap:28px; margin-top:24px;
 padding:12px 0; border-bottom:1px solid #7b806e; color:#30392d;
 font-size:14px; line-height:1.4; text-decoration:none; }
.hero-next:hover { border-color:currentColor; }
.chapter-body .response-note { display:block; margin:18px 0 0 28px;
 padding:24px 28px; border:1px solid #adb5a388; border-radius:0 0 20px 0;
 background:#f4f3e9d9; color:#394631; }
.response-role { display:flex; align-items:center; gap:9px; margin-bottom:12px;
 font-size:12px; font-weight:600; }
.response-role .small-cube { margin:0; }
@media(max-width:760px) {
 .hero-next { margin-top:18px; }
 .chapter-body .response-note { margin-left:16px; padding:20px; }
}

@media(max-width:760px) and (prefers-contrast:more),
       (max-width:760px) and (prefers-reduced-transparency:reduce) {
 .hero::after { background:linear-gradient(180deg,transparent 18%,#f3f1ebee 52%,#f3f1eb 100%); }
}

/* No-script endpoint fallback; JavaScript supplies continuous window geometry. */
@media(min-width:1200px) { :root { --motif-progress:1; } }

/* The composition changes with geometry, not a timed breakpoint transition.
   900px and below: full-width field, no side fading. 1200px+: corner motif with
a hard right-edge cutoff; the left feather blends the art into the card.
   Bottom edge is a hard cut at every width; only the top feather remains. */
.chapter:not(.hero)::before {

 --motif-width:calc(100% * (1 - var(--motif-progress)) + min(78vw,960px) * var(--motif-progress));
 --motif-height:calc(100% * (1 - var(--motif-progress)) + min(52vw,640px) * var(--motif-progress));
 --art-width:calc(max(100%,150lvh) * (1 - var(--motif-progress)) + min(78vw,960px) * var(--motif-progress));
 --art-height:calc(max(100%,66.666667vw) * (1 - var(--motif-progress)) + min(52vw,640px) * var(--motif-progress));
 inset:0;
 opacity:calc(.42 - .04 * var(--motif-progress));
 background-image:linear-gradient(180deg,var(--chapter-surface) calc(32% * var(--motif-progress)),transparent calc(24% + 61% * var(--motif-progress)),transparent 100%),linear-gradient(90deg,color-mix(in srgb,var(--chapter-surface) calc(100% * var(--motif-progress)),transparent),transparent 72%),var(--card-motif);
 background-size:100% 100%,100% 100%,var(--art-width) var(--art-height);
 background-position:center,center,right calc(50% + 50% * var(--motif-progress));
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(24% * var(--motif-progress)),#000 100%),linear-gradient(180deg,transparent,#000 calc(14% + 8% * var(--motif-progress)),#000 100%);
 mask-image:linear-gradient(90deg,transparent,#000 calc(24% * var(--motif-progress)),#000 100%),linear-gradient(180deg,transparent,#000 calc(14% + 8% * var(--motif-progress)),#000 100%);
 -webkit-mask-size:var(--motif-width) var(--motif-height); mask-size:var(--motif-width) var(--motif-height);
 -webkit-mask-position:right calc(50% + 50% * var(--motif-progress)); mask-position:right calc(50% + 50% * var(--motif-progress));
 -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
 -webkit-mask-composite:source-in; mask-composite:intersect;
}
.closing::before { opacity:.46; }

/* Only Choices scrolls horizontally; its panels never capture vertical gestures. */
.choice-carousel { min-width:0; }
.choice-track { display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:16px;
 overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
 overscroll-behavior-x:contain; position:relative; border-radius:2px; }
.choice-track::-webkit-scrollbar { display:none; }
.choice-panel { min-width:0; padding:28px; background:#f3f1ebf2; border:1px solid #bcc3b588;
 scroll-snap-align:start; scroll-snap-stop:always; color:#1c211e; }
.choice-panel h3 { margin:0 0 18px; font-size:26px; line-height:1.15; font-weight:400; letter-spacing:-.035em; }
.choice-panel p { font-size:15px; line-height:1.6; margin:0; color:#4b5644; }
.choice-panel p + p { margin-top:16px; }
.choice-controls { display:flex; justify-content:flex-end; gap:4px; margin-top:8px; }
.choice-controls button { min-width:44px; min-height:44px; padding:8px; border:0; background:transparent;
 color:#4b5644; font:12px var(--sans); cursor:pointer; text-underline-offset:7px; }
.choice-controls button[aria-pressed="true"] { color:#1c211e; text-decoration:underline; }
.no-js .choice-controls { display:none; }
@media(max-width:760px) { .choice-panel { padding:24px; }.choice-panel h3 { font-size:24px; } }
@media(max-height:700px) {
 #membership .starting-grid { gap:16px; }
 #membership h2 { font-size:28px; line-height:1.08; }
 #membership .starting-dek,#membership .gateway-note { font-size:13px; line-height:1.4; margin-top:10px; }
 .choice-panel { padding:16px; }.choice-panel h3 { font-size:21px; margin-bottom:12px; }
 .choice-panel p { font-size:13px; line-height:1.45; }.choice-panel p + p { margin-top:10px; }
 .choice-controls { margin-top:0; }
}

/* Benefit headlines lead the cards; no empty category row remains. */
html.chapter-site.js .chapter-inner.card-scroll { grid-template-rows:minmax(min-content,1fr); }

/* A fixed varied sequence of sage, soft salmon and pale paper. */
#workflow-plan { --chapter-surface:#e4e8dd; }
#workflow-memory { --chapter-surface:#eedbd3; --muted:#4b5644; }
#dream { --chapter-surface:#f3f1eb; }
#workflow-refine { --chapter-surface:#e4e8dd; }
#gepa { --chapter-surface:#f3f1eb; }
#workflow-result { --chapter-surface:#eedbd3; --muted:#4b5644; }
#private-model { --chapter-surface:#e4e8dd; }
#membership { --chapter-surface:#eedbd3; --muted:#4b5644; }
.chapter.example-chapter,.chapter.starting { background-color:var(--chapter-surface); }

/* Touch layouts scroll the document, so native browser controls and momentum
   follow the user's pan. Mandatory native stops settle fitting cards; oversized
   snap areas stay readable in the document, without nesting a vertical reader. */
@media(pointer:coarse), (max-width:1023px) {
 html.chapter-site.js { scroll-snap-type:y mandatory; scroll-behavior:auto; }
 html.chapter-site.js .chapter { scroll-snap-align:start; scroll-snap-stop:always; }
 html.chapter-site.js .chapter:not(.hero) { block-size:auto; overflow:visible; }
 html.chapter-site.js .card-scroll {
  block-size:auto; overflow:visible; overscroll-behavior-y:auto;
  min-block-size:calc(100svh - var(--card-top) - var(--safe-top) - max(var(--card-bottom),var(--safe-bottom)));
 }
}

@media(prefers-reduced-motion:reduce) {
 html.chapter-site.js { scroll-snap-type:none; }
}


/* Composed reading: two layouts, shared proportions and solid working surfaces. */
.chapter-site .chapter-inner { max-width:1160px; }
.chapter-body { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:8%; }
.chapter-body .scene-intro h2 { font-size:clamp(40px,4.3vw,64px); line-height:1.08; letter-spacing:-.05em; }
.chapter-body .scene-intro p { margin-top:24px; max-width:34ch; color:#4b5644; font-size:16px; line-height:1.6; }
.chapter-body .plan-sheet,.chapter-body .result-sheet { border:1px solid #1c211e20; border-radius:20px; overflow:hidden; background:#f3f1eb; box-shadow:none; }
.chapter-body .sheet-head { font-size:15px; font-weight:500; padding:24px; border-color:#1c211e18; }
.chapter-body .result-line { grid-template-columns:60px minmax(0,1fr); gap:16px; border-color:#1c211e18; font-size:15px; padding-block:18px; }
.chapter-body .result-line > span { font:13px/1.6 var(--sans); color:#4b5644; }
.chapter-body .sheet-foot { background:#e4e8dd; color:#4b5644; padding:16px 24px; font:13px/1.5 var(--sans); }
.chapter-body .message-bubble { border-radius:20px 20px 4px 20px; font-size:21px; line-height:1.5; padding:28px; }
.chapter-body .response-note { margin:16px 0 0 24px; background:#f3f1eb; border:1px solid #1c211e20; border-radius:4px 20px 20px 20px; padding:24px; font-size:16px; }
.response-role { font-size:13px; margin-bottom:12px; }
.response-role .small-cube { background:#1c211e; width:10px; height:10px; }
.chapter-body .kanban-column h3 { font:13px/1.5 var(--sans); color:#4b5644; margin-bottom:12px; }
.chapter-body .kanban-task { background:#e4e8dd; border:0; border-radius:12px; padding:20px 16px; min-height:112px; line-height:1.5; }
.choice-panel { border-radius:20px; padding:32px; background:#f3f1eb; border-color:#1c211e20; }
.choice-panel h3 { font-size:30px; letter-spacing:-.04em; }
.choice-controls { justify-content:flex-start; margin-top:12px; }
.closing .contact { max-width:1160px; gap:8%; }
.closing .contact h2 { font-size:clamp(40px,4.3vw,64px); letter-spacing:-.05em; }
.closing .contact-email { border-radius:12px; min-height:52px; }
.closing .contact-links > p { margin-top:24px; font-size:14px; }
.closing .legal-contact { font-size:14px; }
.closing .site-footer { max-width:1160px; }
.closing .policy-links { display:flex; flex-wrap:wrap; gap:8px 24px; }
.closing .policy-links a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; }
.closing .policy-links a:hover { text-decoration:underline; }
.closing .footer-bottom { font:13px/1.5 var(--sans); padding-top:16px; }
/* Feather section-facing edges over the resolved canvas, including the bottom. */
.chapter:not(.hero)::before {
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(24% * var(--motif-progress)),#000 100%),linear-gradient(180deg,transparent,#000 calc(14% + 8% * var(--motif-progress)),#000 86%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 calc(24% * var(--motif-progress)),#000 100%),linear-gradient(180deg,transparent,#000 calc(14% + 8% * var(--motif-progress)),#000 86%,transparent);
}
@media(min-width:1100px) and (min-height:650px) {
 #workflow-memory .chapter-body,#workflow-result .chapter-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:center; row-gap:32px; width:min(100%,880px); margin-inline:auto; }
 #workflow-memory .scene-intro,#workflow-result .scene-intro { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:48px; }
 #workflow-memory .scene-intro p,#workflow-result .scene-intro p { margin:0; }
 #workflow-memory .scene-intro h2,#workflow-result .scene-intro h2 { font-size:48px; }
 #workflow-memory .kanban-task { min-height:128px; }
 #workflow-result .result-line:has(code) { grid-template-columns:60px minmax(0,1fr); }
}
@media(max-width:760px) {
 .chapter-body { grid-template-columns:minmax(0,1fr); gap:24px; }
 .chapter-body .scene-intro h2 { font-size:clamp(34px,8.7vw,44px); line-height:1.08; }
 .chapter-body .scene-intro p { font-size:15px; line-height:1.6; margin-top:16px; }
 .chapter-body .scene-art { max-width:560px; }
 .chapter-body .message-bubble { padding:20px; font-size:18px; }
 .chapter-body .response-note { margin-left:16px; padding:20px; font-size:15px; }
 .chapter-body .sheet-head { padding:18px 20px; font-size:14px; }
 .chapter-body .result-line { margin-inline:20px; grid-template-columns:52px minmax(0,1fr); gap:12px; padding-block:14px; font-size:14px; }
 .chapter-body .result-line > span { font-size:12px; }
 .chapter-body .sheet-foot { padding:14px 20px; font-size:12px; }
 .chapter-body .kanban-columns { padding:16px; gap:8px; }
 .chapter-body .kanban-task { padding:12px 10px; font-size:12px; min-height:100px; }
 .chapter-body .kanban-column h3 { font-size:12px; }
 .choice-panel { padding:24px; }
 .choice-panel h3 { font-size:26px; }
 .closing .contact h2 { font-size:clamp(34px,8.7vw,44px); }
 .closing .contact-links { margin-top:24px; }
 .closing .policy-links { gap:4px 20px; }
}
@media(max-width:380px), (max-height:600px) {
 .chapter-body .result-line { padding-block:12px; }
 .chapter-body .sheet-head { padding-block:16px; }
}
@media(prefers-contrast:more), (prefers-reduced-transparency:reduce) {
 .chapter:not(.hero)::before { display:none; }
 .chapter-body .plan-sheet,.chapter-body .result-sheet,.chapter-body .response-note,.choice-panel { border-color:#4b5644; }
}

/* Preserve the three file-preview paragraphs with responsive spacing. */
.file-preview > span { display:block; }
.file-preview > span + span { margin-top:1.4em; }

/* A small color lift belongs only to the existing decorative artwork. */
.hero .portal-image,.chapter:not(.hero)::before { filter:saturate(1.12); }

/* Short landscape keeps the complete examples inside the small viewport's
   reading budget. The large viewport remains background behind browser chrome.
   Intrinsic sizing still permits document reading with keyboard or large text. */
@media(orientation:landscape) and (max-height:520px) and (max-width:1023px) {
 .chapter-site { --card-top:60px; --card-bottom:12px; }
 .chapter-site .site-head { --header-band:48px; }
 .chapter-site .wrap { --gutter:24px; }
 .chapter-body { grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:24px; padding:0; }
 .chapter-body .scene-intro h2 { font-size:28px; line-height:1.1; max-width:none; }
 .chapter-body .scene-intro p { font-size:14px; line-height:1.45; margin-top:12px; max-width:none; }
 .chapter-body .scene-art { width:100%; max-width:none; margin:0; }
 .chapter-body .sheet-head { font-size:14px; line-height:1.4; padding:6px 12px; }
 .chapter-body .result-line { margin-inline:12px; grid-template-columns:52px minmax(0,1fr); gap:8px; padding-block:6px; font-size:14px; line-height:1.4; }
 .chapter-body .result-line > span { font-size:13px; line-height:1.4; }
 .chapter-body .sheet-foot { padding:6px 12px; font-size:13px; line-height:1.4; }
 .chapter-body .result-focus { font-size:24px; line-height:1.1; padding:8px 12px; }
 .chapter-site .chapter-code .result-line:has(code) { grid-template-columns:52px minmax(0,1fr); gap:8px; }
 .chapter-body .result-line code { font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
 .chapter-body .kanban-columns { padding:12px; gap:8px; }
 .chapter-body .kanban-column h3 { font-size:13px; margin-bottom:8px; }
 .chapter-body .kanban-task { font-size:14px; min-height:72px; padding:12px 8px; }
 #workflow-plan .chapter-body,#workflow-refine .chapter-body { grid-template-columns:minmax(0,1fr); gap:12px; }
 #workflow-plan .scene-intro,#workflow-refine .scene-intro { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:center; }
 #workflow-plan .scene-intro p,#workflow-refine .scene-intro p { margin:0; }
 #workflow-plan .brief-scene { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
 .chapter-body .message-bubble { padding:12px 16px; font-size:15px; line-height:1.4; }
 .chapter-body .response-note { padding:12px 16px; margin:0; font-size:14px; line-height:1.4; }
 .response-role { margin-bottom:8px; }
 #workflow-refine .chapter-body { row-gap:8px; }
 #workflow-refine .result-sheet { display:grid; grid-template-columns:minmax(0,.25fr) minmax(0,.75fr); }
 #workflow-refine .sheet-head,#workflow-refine .sheet-foot { grid-column:1 / -1; }
 #workflow-refine .result-line { display:block; margin:0; padding:4px 12px; }
 #workflow-refine .result-line > span { display:block; margin-bottom:4px; }
 .file-preview > span + span { margin-top:4px; }
 #workflow-result .chapter-body { grid-template-columns:minmax(0,1fr); gap:4px; }
 #workflow-result .scene-intro { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:center; }
 #workflow-result .scene-intro p { margin:0; }
 #workflow-result .result-sheet { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
 #workflow-result .sheet-head { grid-column:1; grid-row:1; }
 #workflow-result .result-line:has(code) { grid-column:2 / -1; grid-row:1; margin:0; padding:6px 12px; }
 #workflow-result .result-focus { grid-column:1 / 3; grid-row:2; margin:0; padding:6px 12px; }
 #workflow-result .result-line:not(:has(code)) { grid-column:3 / -1; grid-row:2; margin:0; padding:6px 12px; }
 #workflow-result .sheet-foot { grid-column:1 / -1; padding-block:4px; }
 #membership .starting-grid { grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); gap:24px; align-items:center; }
 #membership h2 { font-size:28px; line-height:1.1; }
 #membership .starting-dek,#membership .gateway-note { font-size:14px; line-height:1.4; margin-top:8px; }
 .choice-panel { padding:8px 16px; }
 .choice-panel h3 { font-size:24px; margin-bottom:8px; }
 .choice-panel p { font-size:14px; line-height:1.4; }
 .choice-panel p + p { margin-top:8px; }
 .choice-controls { margin-top:0; }
 .hero-layout { min-height:100svh; padding-top:60px; padding-bottom:12px; justify-content:center; }
 .hero-copy { width:62%; max-width:540px; }
 .hero h1 { font-size:42px; line-height:1.04; }
 .hero-dek { font-size:14px; line-height:1.45; margin-top:12px; }
 .hero-next { margin-top:12px; min-height:44px; }
 .chapter-site .closing { padding-top:calc(60px + var(--safe-top)); }
 .chapter-site .closing .contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; padding:0; }
 .chapter-site .closing .contact h2 { font-size:28px; line-height:1.1; }
 .chapter-site .closing .contact-dek { font-size:14px; line-height:1.4; margin-top:12px; }
 .chapter-site .closing .contact-links { margin:0; }
 .chapter-site .closing .contact-email { min-height:44px; padding:10px 16px; font-size:14px; }
 .chapter-site .closing .contact-links > p { font-size:14px; line-height:1.4; margin-top:8px; }
 .chapter-site .closing .legal-contact { font-size:14px; margin:0; }
 .chapter-site .closing .site-footer { padding-block:8px 0; }
 .chapter-site .closing .policy-links { gap:0 16px; }
 .chapter-site .closing .footer-bottom { padding-top:0; }
}

/* Musso product identity; shared company assets and product geometry stay intact. */
.company-parent { margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 0; font-size:14px; text-decoration:none; color:inherit; }
.company-parent:hover { text-decoration:underline; text-underline-offset:4px; }