:root {
  color-scheme: light;
  --ink: #242729;
  --night: #182027;
  --paper: #f9f3e7;
  --cream: #fff9ef;
  --orange: #f8ab69;
  --rust: #963b23;
  --green: #174a40;
  --line: #ddccb5;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding: 18px 0 76px; }
body { margin: 0; line-break: strict; background: var(--paper); color: var(--ink); font: 500 16px/1.78 var(--sans); }
h1, h2, h3, p, figure, dl, dd, blockquote { margin: 0; }
/* Balance short lines and avoid tiny final lines in dialogue. */
.section h2, .chapter-title h3, .hook, .ending-line, .fear-thought,
.beat-space > p, .operations-relief .bubble strong span, .ai-search-questions > span {
  text-wrap: balance;
}
.bubble, .narration, .aside-line, .character-note > div, .section .column > p {
  text-wrap: pretty;
}
.keep-phrase { white-space: nowrap; }

img { display: block; width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #da6b35; outline-offset: 4px; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 9; transform: translateY(-150%); padding: 8px; background: var(--cream); }
.skip:focus { transform: none; }

.story, footer { background: var(--night); color: var(--cream); }
.story { border-bottom: 4px solid var(--orange); padding: 0 0 34px; }
.story-head, .comic, .column { width: min(100% - 28px, 650px); margin: auto; }
.story-head { padding: 21px 0 17px; }
.kicker { color: #ffd4ad; font-size: .68rem; font-weight: 850; letter-spacing: .065em; display: flex; align-items: center; gap: 8px; }
.kicker span + span { border: 1px solid #97705b; padding: 1px 5px; }
.hook { font: 800 clamp(1rem, 4.3vw, 1.5rem)/1.53 var(--serif); }
.fine { font-size: .75rem; line-height: 1.65; }
.fiction { color: #dfd3c3; }

.section { padding: clamp(32px, 6vw, 68px) 0; }
.section h2 { font: 900 clamp(1.68rem, 6.25vw, 2.95rem)/1.19 var(--serif); letter-spacing: -.065em; margin: 10px 0 14px; }
.section .column > p + p { margin-top: 12px; }
.section h2 + p { margin-top: 8px; }
.eyebrow { display: flex; align-items: center; gap: 7px; color: var(--rust); font-size: .73rem; font-weight: 900; letter-spacing: .095em; }
.eyebrow span { display: inline-grid; place-items: center; width: 34px; aspect-ratio: 1; background: var(--rust); color: var(--cream); font: italic 900 1.15rem/1 Georgia, serif; }
.era { padding: 0; margin: 16px 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
.era li { position: relative; background: #e9decc; padding: 8px 4px; text-align: center; border-top: 2px solid #947e64; }
.era li:last-child { background: var(--green); color: white; border-color: var(--orange); }
.era li:not(:last-child)::after { content: "›"; position: absolute; right: -7px; top: 31%; z-index: 1; background: var(--cream); color: var(--ink); width: 12px; line-height: 1; font-weight: 900; }
.era span, .era small, .era b { display: block; }
.era span, .era small { font-size: clamp(.62rem, 2.7vw, .8rem); }
.era b { font-size: clamp(.8rem, 3.7vw, 1.06rem); }
.wave i:nth-child(4) { height: 22px; }
.stat { background: #f5dfc6; border-left: 4px solid var(--rust); margin-top: 17px; padding: 12px; }
.stat>div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; line-height: 1.2; }
.stat strong { color: var(--rust); font: 900 clamp(2.5rem, 12vw, 4.4rem)/1 Georgia, serif; letter-spacing: -.06em; }
.stat strong span { font-size: .53em; margin-left: 3px; }
.stat b { font-size: .9rem; }
.stat p { margin-top: 6px; }
.stat .fine { color: #574537; }
.stat a { display: inline-block; text-underline-offset: 3px; }
.assets { background: #efe5d5; }
.comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 16px 0; }
.comparison>div { min-width: 0; padding: 9px; border: 1px solid #c7b8a5; background: #f4eee3; }
.comparison .new { background: #e5efe5; border-color: #91a995; }
.comparison h3 { font-size: clamp(.76rem, 3.35vw, 1.1rem); }
.compare-sign { font: 900 1.7rem/1 var(--sans); color: #8b4839; }
.new .compare-sign { color: var(--green); }
.comparison p:last-child { font-size: .75rem; }
.mini-page { background: #dfd9cb; padding: 6px; margin: 7px 0; }
.mini-page i { display: block; height: 5px; width: 80%; background: #afa79b; margin: 4px 0; }
.mini-page i:first-child { width: 90%; height: 16px; }
.new ul { margin: 7px 0; padding: 0; list-style: none; }
.new li { background: #fffaf0; padding: 2px 5px; border-left: 2px solid var(--green); margin-bottom: 3px; font-size: clamp(.65rem, 2.9vw, .86rem); font-weight: 850; }
.callout { border-left: 4px solid var(--rust); padding: 5px 9px; font-weight: 900; margin-top: 13px; }

.demo { background: var(--night); color: var(--cream); }
.demo .eyebrow { color: #ffc58f; }
.demo .eyebrow span { background: var(--orange); color: var(--night); }
.feature { margin-top: 15px; padding: clamp(12px, 3vw, 22px); background: #27333b; border: 1px solid #5b696a; }
.feature-no { font-size: .69rem; font-weight: 900; color: #ffca99; letter-spacing: .1em; }
.feature h3 { font-size: clamp(1rem, 4.5vw, 1.43rem); line-height: 1.4; margin: 3px 0 7px; }
.feature h3 + p, .feature div + p, #demo-status + p { font-size: .89rem; }
.mock-finish, .site-screen { color: var(--ink); background: var(--cream); border-radius: 5px; overflow: hidden; }
.mock-finish { margin: 10px 0 0; }
.sitebar { background: #e1ebe1; padding: 7px 9px; }
.mock-finish img { aspect-ratio: 2.85; object-fit: cover; object-position: center 51%; }
.finish-content { padding: 9px; }
.finish-content b { font-size: .92rem; }
.finish-content p { display: flex; flex-wrap: wrap; gap: 4px; }
.finish-content span { font-size: .66rem; background: #e1ebe1; padding: 1px 5px; }
.feature blockquote { border-left: 3px solid #ffc186; padding: 7px 8px; margin: 8px 0; color: #ffe3c8; background: #202b33; font-size: .87rem; font-weight: 850; }
.feature blockquote b { display: block; font-size: .68rem; }
.switcher { display: flex; gap: 5px; margin-bottom: 6px; }
.switcher button { min-width: 0; flex: 1; padding: 4px; cursor: pointer; min-height: 44px; border: 1px solid #9aa6a7; border-radius: 3px; background: #334650; color: white; font-size: .81rem; font-weight: 900; }
.switcher button[aria-pressed=true] { background: #ffc186; border-color: #ffc186; color: var(--night); }
.site-screen + .site-screen { margin-top: 6px; }
.old-site { min-height: 130px; padding: 14px 10px; }
.old-site p, .old-site small { font-size: .73rem; color: #44534d; }
.old-site small { display: block; margin-top: 14px; }
.new-site { display: grid; grid-template-columns: 1fr 1fr; min-height: 130px; }
.new-site img { height: 100%; max-height: 210px; object-fit: cover; }
.new-site>div { padding: 7px; align-self: center; line-height: 1.4; }
.new-site b { font-size: .93rem; }
.new-site span { display: block; width: fit-content; background: var(--green); color: white; padding: 3px 5px; border-radius: 3px; font-size: .65rem; font-weight: 900; margin-top: 5px; }
#demo-status { font-size: .74rem; color: #ffd8b5; margin: 7px 0; min-height: 2.55em; }
.notification { background: #e7f0e6; color: var(--ink); border-radius: 8px; padding: 9px; margin: 8px 0; }
.notification p { color: var(--green); font-weight: 900; font-size: .73rem; display: flex; justify-content: space-between; gap: 5px; }
.notification small { font-size: .61rem; }
.notification b { display: block; margin: 4px 0 6px; font-size: .89rem; }
.notification span { font-size: .69rem; background: white; padding: 2px 5px; font-weight: 800; }
.notification span + span { margin-left: 4px; background: var(--green); color: white; }

.flow { background: #f7efde; }
.steps { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 13px; }
.steps li { position: relative; padding: 9px 10px; display: flex; gap: 10px; align-items: center; background: var(--cream); border: 1px solid #d3c5af; }
.steps li:not(:last-child)::after { content: "↓"; position: absolute; bottom: -16px; left: 22px; color: var(--green); font-weight: 900; line-height: 1; z-index: 1; }
.steps li>span { display: grid; place-items: center; width: 36px; aspect-ratio: 1; flex: none; background: var(--green); color: white; font: italic 900 1rem/1 Georgia, serif; }
.steps h3 { font-size: 1rem; line-height: 1.35; }
.steps p { margin-top: 3px; font-size: .81rem; }
.steps .key-step { background: #f7dfc4; border-color: #b96d4c; }
.steps .key-step>span { background: var(--rust); }
.flow .fine { color: #554d45; }

.trust { background: #e5eee3; }
.trust-art { border: 1px solid #577468; margin: 14px 0 9px; }
.trust-art img { aspect-ratio: 1.75; object-fit: cover; object-position: center 64%; }
.accounts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-bottom: 12px; }
.accounts span { background: #f9fbf4; padding: 6px 3px; text-align: center; font-size: clamp(.6rem, 2.65vw, .82rem); font-weight: 900; overflow-wrap: anywhere; }
.accounts b { display: block; color: var(--green); font-size: 1.15rem; line-height: 1.3; }

.offer { color: var(--cream); background: var(--green); }
.offer .eyebrow { color: #ffd6b0; }
.offer .eyebrow span { background: #ffc588; color: var(--ink); }
.offer h2 em { color: #ffcc91; font-style: normal; }
.prices dd small { font: 900 .73rem/1 var(--sans); margin-left: 4px; }
.prices { background: #fffaf0; color: var(--ink); padding: 0 10px; }
.prices>div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 1px solid var(--line); padding: 7px 0; }
.prices dt { font-size: .9rem; font-weight: 900; }
.prices dt small { display: block; color: #743522; font-size: .65rem; }
.prices dd { font-size: 1.43rem; font-weight: 900; white-space: nowrap; line-height: 1.1; }
.prices .price-last { color: #833822; }
.conditions { padding-left: 17px; margin: 11px 0 16px; font-size: .77rem; }
.conditions li + li { margin-top: 4px; }
.closing { font-size: .91rem; }
.cta, .sticky a { display: block; position: relative; padding: 9px 27px 9px 9px; text-align: center; color: var(--night); background: #ffc588; font-weight: 900; text-decoration: none; line-height: 1.45; border-radius: 4px; }
.cta { margin-top: 15px; }
.cta span, .sticky a span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.cta:hover, .sticky a:hover { background: #ffdcba; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 13px max(14px, calc((100vw - 650px) / 2)); font-size: .7rem; }
footer a { min-height: 44px; display: flex; align-items: center; }
.sticky { display: none; }
@media (max-width: 759px) {
  .sticky { display: block; position: fixed; inset: auto 0 0; z-index: 5; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); background: var(--night); }
  .sticky a { min-height: 44px; display: grid; place-items: center; font-size: .89rem; }
}
@media (min-width: 760px) {
  .story-head { padding: 32px 0 20px; }
  .comparison { gap: 10px; }
  .comparison>div, .stat { padding: 16px; }
  .era { gap: 8px; }
  .cta { font-size: 1.14rem; }
}
@media (max-width: 350px) {
  .story-head, .comic, .column { width: calc(100% - 22px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.story-head h1 { font: 900 clamp(2.04rem, 9.4vw, 4.55rem)/1.06 var(--serif); letter-spacing: -.07em; margin: 8px 0 10px; }
.story-head h1 em { font: inherit; font-family: Georgia,var(--serif); color: var(--orange); letter-spacing: -.1em; padding-right: .05em; }
.story-head .hook { font-size: clamp(.95rem, 4vw, 1.35rem); }
.use-cases { margin-top: 19px; }
.use-cases h3 { font-size: 1rem; margin-bottom: 6px; }
.use-cases ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.use-cases li { display: grid; grid-template-columns: 78px minmax(0, 1fr); background: var(--cream); border: 1px solid #d3c4ae; min-height: 63px; }
.use-cases img { height: 100%; max-height: 85px; object-fit: cover; }
.use-cases li>div { padding: 5px 7px; align-self: center; }
.use-cases b { color: var(--green); font-size: .85rem; }
.use-cases p { font-size: .75rem; }

.sitebar { display: flex; justify-content: space-between; gap: 7px; align-items: baseline; font-size: .78rem; }
.sitebar span { font-size: .65rem; }


/* Panel scale and whitespace carry the pace of the vertical comic. */
.story { padding-bottom: 42px; }
.story-head { padding-top: 28px; padding-bottom: 19px; }
.story-head .hook { max-width: 32ch; }
.chapter { padding: 17px 0 0; }
.chapter + .chapter { margin-top: clamp(42px, 10vw, 84px); border-top: 1px solid #556066; }
.chapter-title { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-bottom: 13px; }
.chapter-title>span { display: grid; place-items: center; width: clamp(34px, 10vw, 52px); aspect-ratio: 1; background: var(--orange); color: var(--night); font: italic 900 clamp(1.05rem, 4.6vw, 1.65rem) Georgia,serif; }
.chapter-title h3 { font: 900 clamp(1.18rem, 5.1vw, 2.05rem)/1.22 var(--serif); }
.shot { position: relative; isolation: isolate; margin: 13px 0; }
.shot img { object-fit: cover; }
.shot.full img { aspect-ratio: 1.14; }
.shot.news img { aspect-ratio: 1; }
.shot.inset-left, .shot.inset-right { width: 89%; }
.shot.inset-right { margin-left: auto; }
.shot.inset-left { margin-right: auto; }
.shot.diagonal img { clip-path: polygon(0 0,100% 7%,100% 100%,0 93%); }
.shot.cinema img { aspect-ratio: 1.67; object-position: 50% 46%; }
.shot.tall { width: 76%; }
.shot.tall img { aspect-ratio: 4 / 5; object-position: center 62%; }
.shot.memory { width: 94%; margin-inline: auto; padding: 4px; background: #d7ad7e; }
.shot.memory img { aspect-ratio: 1.24; object-position: center 48%; }
.shot.shock img { aspect-ratio: 1.19; object-position: center 44%; }
.shot.rage { container-type: inline-size; }
.shot.rage img { aspect-ratio: 1.12; object-position: center 46%; }
.shot.burst { margin-top: 8px; container-type: inline-size; }
.shot.burst img { aspect-ratio: auto; }
.shot.closing-shot { width: 82%; margin: 32px auto 0; }
.shot.closing-shot img { aspect-ratio: 1.34; object-position: center 70%; }

.bubble { position: absolute; background: #fffbf1; color: #202528; border: 2px solid #242829; border-radius: 14px; padding: 8px 9px; width: fit-content; font: 850 clamp(.78rem, 3.6vw, 1.13rem)/1.5 var(--sans); z-index: 1; }
.bubble b { display: block; color: #783923; font-size: .69em; margin-bottom: 2px; }
.bubble::after { content: ""; position: absolute; width: 11px; height: 11px; border: solid #242829; background: inherit; transform: rotate(45deg); }
.ai-in::after { top: 47%; right: -7px; border-width: 2px 2px 0 0; }
.in-customer { top: 4%; right: 3%; max-width: 53%; }
.in-customer::after { top: 58%; left: -7px; border-width: 0 0 2px 2px; }
.in-news { top: 2%; right: 3%; max-width: 87%; }
.in-news::after { bottom: -7px; right: 17%; border-width: 0 2px 2px 0; }
.ai-in { top: 9%; left: 3%; max-width: 49%; border-color: #224d44; background: #eaf6eb; }
.ai-in b { color: #22584b; }
.ai-in::after { border-color: #224d44; }
.bubble.under { position: relative; max-width: 94%; margin-top: -3px; border-top-left-radius: 7px; border-top-right-radius: 7px; }
.bubble.under::after { top: -7px; left: 20%; border-width: 2px 0 0 2px; }
.bubble.under.right::after { left: auto; right: 20%; }
.bubble.left { margin-left: 3%; }
.bubble.right { margin-left: auto; margin-right: 3%; }
.bubble.standalone { position: relative; max-width: 92%; margin-top: 9px; }
.bubble.standalone.left::after { left: -7px; top: 40%; border-width: 0 0 2px 2px; }
.bubble.standalone.right::after { right: -7px; top: 40%; border-width: 2px 2px 0 0; }

.narration, .aside-line, .outburst, .ending-line { font: 850 clamp(1rem, 4.6vw, 1.6rem)/1.65 var(--serif); }
.narration { padding: 11px 0 17px; color: #f1dfc9; }
.narration.reveal-fact { padding-top: 20px; padding-bottom: 1px; }
.aside-line { margin: 22px 0; padding-left: 9px; border-left: 2px solid #b89170; color: #f1dfc9; }
.aside-line.short { margin: 25px 0 0; }
.outburst { text-align: right; color: #ffe0be; padding: 8px 0 0; }
.time-note { font-size: .71rem; font-weight: 850; letter-spacing: .09em; color: #f8d5b7; margin-top: 20px; }
.scene-transition {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 3vw, 22px);
  max-width: 28em;
  margin-inline: auto;
  padding: clamp(55px, 12svh, 105px) 5% clamp(43px, 9svh, 80px);
  color: #f7e6d4;
  font: 850 clamp(1.02rem, 4.6vw, 1.4rem)/1.75 var(--serif);
  text-align: center;
  text-wrap: pretty;
}
.scene-transition::before {
  content: "";
  width: 1.65rem;
  height: 1px;
  margin-bottom: .38rem;
  background: #ce9872;
}
.scene-opening { padding-block: clamp(22px, 5svh, 45px) clamp(24px, 5svh, 42px); }
.beat-space { min-height: clamp(76px, 22vw, 152px); display: grid; align-content: center; justify-items: center; padding: 13px 0; color: #ead8c5; font: 850 clamp(.9rem, 4vw, 1.34rem)/1.55 var(--serif); }
.short-beat { min-height: clamp(54px, 14vw, 100px); }
.shot.grandfather-introduction img { aspect-ratio: auto; }
.grandfather-introduction .bubble.under::after { left: 48%; }
.rage-line {
  position: absolute;
  top: 17%;
  left: 5.5%;
  color: #fff3d7;
  transform: rotate(-8deg);
  transform-origin: left center;
  font-weight: 900;
  line-height: 1.1;
  paint-order: stroke fill;
  -webkit-text-stroke: .42cqw #251711;
  text-shadow: .4cqw .65cqw #251711;
}
.rage-opening { display: block; margin-bottom: .4em; font-size: 5.6cqw; }
.rage-line strong { display: block; font-weight: 950; letter-spacing: -.09em; line-height: 1.01; white-space: nowrap; text-shadow: .68cqw 1.05cqw #251711; }
.rage-lead { display: block; font-size: 11.3cqw; }
.rage-cry { display: block; font-size: 6.85cqw; color: #ffd387; margin-top: .08em; }
.rage-punctuation { font-size: .83em; font-feature-settings: "palt"; letter-spacing: -.04em; }
.rage-follow { display: block; margin-top: .55em; font-size: 4.5cqw; line-height: 1.26; font-weight: 900; }
.burst-letter {
  position: absolute;
  inset: 4.5% 2% auto;
  display: grid;
  justify-items: center;
  gap: .4cqw;
  transform: rotate(-5deg);
  color: #281811;
  text-align: center;
  line-height: 1.05;
  font-weight: 950;
}
.burst-letter strong {
  display: block;
  color: #ffdc87;
  font-size: clamp(1.65rem, 11.5cqw, 4.6rem);
  letter-spacing: -.08em;
  paint-order: stroke fill;
  -webkit-text-stroke: .85cqw #271812;
  text-shadow: .45cqw 1.05cqw #271812;
  white-space: nowrap;
}
.burst-balloon {
  --burst-edge: polygon(0 24%, 8% 21%, 5% 4%, 24% 10%, 36% 0, 48% 9%, 66% 1%, 74% 12%, 91% 4%, 89% 20%, 100% 28%, 92% 50%, 100% 67%, 88% 72%, 94% 94%, 76% 88%, 62% 100%, 53% 92%, 38% 100%, 28% 88%, 11% 96%, 15% 79%, 0 70%, 8% 51%);
  position: relative;
  isolation: isolate;
  background: #291a13;
  clip-path: var(--burst-edge);
  padding: .5em 1.02em .55em;
  font-size: clamp(.83rem, 5cqw, 1.52rem);
  letter-spacing: -.045em;
}
.burst-balloon::before { content: ""; position: absolute; inset: max(2px, .55cqw); z-index: -1; background: #fff8e6; clip-path: var(--burst-edge); }
.burst-balloon>span { display: block; }


.character-note { display: grid; grid-template-columns: minmax(76px, .32fr) minmax(0, 1fr); align-items: end; gap: 6px; margin: 26px 0 0; padding: 3px 0 0; color: #202a26; --note-paper: #dfede1; }
.character-note.amber { --note-paper: #f4dcc0; }
.character-note.light { --note-paper: #f2e3c7; margin: 16px 0 0; }
.character-note img { width: 100%; max-height: 175px; object-fit: contain; object-position: bottom; align-self: end; }
.character-note>div { position: relative; min-width: 0; align-self: center; background: var(--note-paper); border-radius: 13px; padding: 9px; font-size: clamp(.79rem, 3.4vw, 1rem); font-weight: 780; line-height: 1.57; }
.character-note>div::before { content: ""; width: 10px; height: 10px; position: absolute; left: -4px; top: 36%; transform: rotate(45deg); background: var(--note-paper); }
.character-note.reverse>div::before { left: auto; right: -4px; }
.character-note .note-role { color: var(--green); font-size: .67rem; font-weight: 900; margin-bottom: 4px; }
.character-note.reverse { grid-template-columns: minmax(0, 1fr) minmax(76px, .32fr); padding: 8px 0 0 8px; }
.character-note.reverse img { grid-column: 2; grid-row: 1; }
.character-note.reverse>div { grid-column: 1; grid-row: 1; }

.ending-line { text-align: center; color: #ffdfb9; padding: 20px 0 10px; }
.shot.sato-arrival img, .shot.epilogue-portrait img { aspect-ratio: auto; }
.shot.case-library-shot img { aspect-ratio: auto; }
.case-log-heading .case-library-count { font-size: 1.25em; color: #175441; }
.case-library-group { padding: 8px 10px; }
.case-library-group p { font-size: .75rem; font-weight: 850; margin-bottom: 4px; }
.case-library-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
.case-library-group li { background: #e0ebdf; border-radius: 3px; padding: 5px 3px; text-align: center; font-size: .7rem; line-height: 1.4; }
.case-library-new li { background: #f2e2cb; }
.case-library-example { display: grid; grid-template-columns: 31% 1fr; gap: 8px; align-items: center; padding: 10px; border-top: 1px solid #d6dacf; font-size: .77rem; }
.case-library-example img { aspect-ratio: 1.5; object-fit: cover; border-radius: 3px; }
.case-library-example b { display: block; color: #175441; }
.dialogue-row.recruiting-intro { margin-top: clamp(27px, 8svh, 58px); }
.recruiting-message { margin-inline: auto; }
.recruiting-message-text { margin-top: 8px; padding: 9px 10px; border-radius: 2px 8px 8px; background: #e0eee3; color: #203c32; font-size: clamp(.78rem, 3.5vw, 1rem); line-height: 1.6; }
.ai-case-page { border-top-color: #368d75; background: #e8f3eb; }
.ai-case-page dl { display: grid; grid-template-columns: minmax(5.6em, 28%) 1fr; margin-top: 10px; font-size: clamp(.75rem, 3.6vw, .95rem); line-height: 1.5; }
.ai-case-page dt, .ai-case-page dd { padding: 6px 5px; border-top: 1px solid #bdcfc2; }
.ai-case-page dt { color: #1b5945; font-weight: 850; }
.dual-homepages { margin-block: 20px; padding: clamp(12px, 3.5vw, 23px); border: 1px solid #9cb7ab; border-radius: 6px; background: #ecf4ee; color: #203c32; }
.dual-homepages h3 { margin-bottom: 9px; font-size: clamp(1.02rem, 4.5vw, 1.28rem); }
.dual-homepages dl { display: grid; gap: 8px; }
.dual-homepages dl div { padding: 7px 10px; background: #fffdf5; border-left: 3px solid #558675; }
.dual-homepages dt { font-weight: 900; }
.dual-homepages dd { font-size: .9rem; }
.epilogue-crew { margin-block: clamp(40px, 9svh, 80px); }
.epilogue-crew .shot + .shot { margin-top: clamp(40px, 9svh, 80px); }
.epilogue-crew .shot img { aspect-ratio: auto; }
.epilogue-turn { margin-top: clamp(45px, 11svh, 92px); }
.shot.epilogue-before img, .shot.epilogue-now img { aspect-ratio: auto; }
.epilogue-before .ending-line { color: #dfdbd7; }
.shot.epilogue-now { margin-top: clamp(52px, 12svh, 110px); }
.epilogue-realization { padding-top: clamp(30px, 7svh, 60px); font-size: clamp(1.18rem, 5.2vw, 1.9rem); }
.shot.epilogue-portrait { margin-top: clamp(41px, 11svh, 86px); }
.epilogue-offer { width: min(100%, 530px); margin: clamp(36px, 9svh, 75px) auto 0; text-align: center; }
.epilogue-offer h3 { color: #ffdfb9; font: 900 clamp(1.42rem, 6vw, 2.28rem)/1.3 var(--serif); }
.epilogue-offer p { margin-top: 10px; color: #f8eee1; font-weight: 750; }
.story-end { margin: 23px 0 0; padding: 13px; border: 1px solid #75675c; text-align: center; background: #25373b; }
.label-end { color: #ffcb97; font-size: .72rem; font-weight: 900; letter-spacing: .09em; }
.story-end .ending { font: 900 clamp(1.26rem, 5.15vw, 2.12rem)/1.25 var(--serif); margin: 5px 0 7px; }
.story-end .ending + p { font-size: .87rem; }
.story-end a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: #ffcda0; font-size: .83rem; font-weight: 900; text-underline-offset: 3px; }
.story-end .fiction { text-align: left; }
@media (max-width: 350px) {
  .bubble { padding: 6px 7px; }
  .in-news { font-size: .72rem; }
}
@media (min-width: 760px) {
  .chapter { padding-top: 28px; }
  .shot { margin-block: 18px; }
  .shot.inset-left, .shot.inset-right { width: 80%; }
  .shot.tall { width: 70%; }
  .bubble { padding: 12px 13px; }
  .character-note { gap: 12px; padding-right: 12px; }
  .character-note.reverse { padding-left: 12px; }
}

/* The two workmanship scenes lead into the same fields on the sample site. */
.shot.craft-floor img { aspect-ratio: 1.06; object-position: center 63%; }
.shot.craft-check img, .shot.craft-referral img { aspect-ratio: auto; }
.craft-referral .bubble.under.right::after { right: 40%; }
.shot.craft-check + .shot { margin-top: clamp(24px, 5svh, 48px); }
.shot.craft-wall img { aspect-ratio: 1.09; object-position: center 45%; }
.craft-line { color: #ffe1ba; margin-top: 10px; }
.history-bridge { max-width: 52ch; border-left: 2px solid #d6a476; padding-left: 11px; margin: 24px 0 0; font-size: clamp(.91rem, 3.7vw, 1.12rem); color: #f0deca; }
.history-bridge p + p { margin-top: 10px; }
.discovery-eras { display: grid; gap: clamp(17px, 5vw, 30px); margin: clamp(23px, 6vw, 40px) 0 clamp(35px, 8svh, 76px); padding: 0; list-style: none; }
.discovery-era { display: grid; grid-template-columns: 34% minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid #58706a; border-radius: 7px; background: #263b38; color: #fbf1e6; }
.discovery-era-ai { background: #50392d; border-color: #a57657; }
.discovery-era-art { position: relative; overflow: hidden; aspect-ratio: 1; }
.discovery-era-art img { position: absolute; top: 0; left: 0; width: 300%; max-width: none; }
.discovery-era-web img { left: -100%; }
.discovery-era-ai img { left: -200%; }
.discovery-era-copy { padding: clamp(8px, 2.5vw, 17px); font-size: clamp(.76rem, 3.5vw, 1.05rem); line-height: 1.6; }
.discovery-era-date { color: #ffd2a5; font-size: .83em; font-weight: 850; }
.discovery-era-copy h4 { margin: 1px 0 4px; font-size: 1.17em; line-height: 1.3; }
.case-page { margin: 20px auto 22px; width: min(96%, 560px); border: 1px solid #99b4a5; border-top: 4px solid #527e68; border-radius: 5px; background: #fffaef; color: #1d332b; padding: 10px; }
.case-page-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; font-size: .73rem; border-bottom: 1px solid #c7d2c4; padding-bottom: 4px; }
.case-page-label span { color: #496456; font-size: .66rem; }
.case-page h4 { margin: 8px 0 10px; font: 900 clamp(1rem, 4.8vw, 1.7rem)/1.25 var(--serif); }
.case-record { display: grid; grid-template-columns: minmax(60px,.43fr) minmax(0,1fr); gap: 7px; align-items: start; background: #f0eadb; padding: 6px; border-left: 2px solid #74917d; }
.case-record + .case-record { margin-top: 6px; }
.case-record img { aspect-ratio: 1; object-fit: cover; }
.case-record h5 { margin: 0 0 3px; font-size: clamp(.73rem, 3.3vw, 1rem); line-height: 1.35; }
.case-record dl { font-size: clamp(.69rem, 2.95vw, .86rem); line-height: 1.5; }
.case-record dt { color: #295843; font-weight: 900; }
.case-record dd { margin: 0 0 3px; }
.story-sources { text-align: left; border-top: 1px solid #617169; margin-top: 9px; color: #eee1ce; font-size: .75rem; }
.story-sources summary { cursor: pointer; display: list-item; padding: 8px 0 3px; }
.story-sources ul { margin: 0; padding-left: 16px; }
.story-sources a { display: inline; min-height: 0; font-size: inherit; }

/* A held, quiet frame before the cut to the customer's home. */
.office-ring {
  margin: 0 6% 12px; color: #ffcc96;
  font: 900 clamp(1.28rem, 6vw, 2.35rem)/1.2 var(--sans);
  text-align: right; transform: rotate(-4deg);
}
.shot.busy-office img { aspect-ratio: auto; }
.night-office { margin: 9px 0 0; container-type: inline-size; }
.night-office img { aspect-ratio: auto; }
.office-tally {
  position: absolute;
  top: 6%;
  left: 4%;
  max-width: 87%;
  padding: clamp(8px, 2.25cqw, 15px) clamp(10px, 3cqw, 20px);
  border-left: 3px solid #e7a779;
  background: #161c24f5;
  color: #fff0d8;
  font: 850 clamp(1.02rem, 5.35cqw, 2.2rem)/1.4 var(--serif);
}
.office-tally strong {
  display: block;
  font-size: clamp(1.85rem, 9.5cqw, 3.85rem);
  line-height: 1.2;
  color: #ffd6a5;
}
.office-question {
  padding: clamp(48px, 12svh, 105px) 7% clamp(32px, 7svh, 68px);
  color: #f1dfc9;
  font: 850 clamp(1.08rem, 5vw, 1.6rem)/1.65 var(--serif);
  text-align: right;
}

/* A readable phone close-up, followed by the customer's action and Yamada's reaction. */
.sato-result { margin: 16px 0 19px; width: min(91%, 425px); }
.sato-screen { padding: 10px; background: #f3f8f0; color: #1b3028; border: 4px solid #485953; border-radius: 16px; }
.sato-screen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding-bottom: 5px; border-bottom: 1px solid #d3e0d6; font-size: .77rem; }
.sato-screen-head b { color: #1c604a; }
.sato-screen-head small { font-size: .65rem; }
.sato-screen-prompt { width: fit-content; max-width: 94%; margin: 7px 0 7px auto; padding: 5px 7px; background: #215e4e; color: white; border-radius: 8px 8px 2px 8px; font-size: .81rem; font-weight: 830; line-height: 1.47; }
.sato-screen-prompt small { display: block; margin-bottom: 2px; color: #d2efe2; font-size: .72em; }
.shot.sato-voice-shot img { aspect-ratio: auto; }
.sato-listening { position: absolute; top: 8%; left: 4%; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #90b7a6; border-radius: 8px; background: #172f2c; color: #b4ebd6; }
.sato-listening p { display: grid; line-height: 1.25; }
.sato-listening b { color: #fffdf1; font-size: .67rem; }
.sato-listening span { font-size: .61rem; }
.sato-ai-reply { margin-top: clamp(22px, 7vw, 44px); }
.sato-screen-answer { font-size: .75rem; margin-bottom: 5px; }
.sato-recommendation { background: #fffbf0; border: 1px solid #c3d3c7; border-radius: 7px; overflow: hidden; }
.recommendation-name { display: flex; align-items: center; gap: 6px; padding: 6px; font-size: .91rem; }
.recommendation-name span { display: inline-grid; place-items: center; width: 21px; aspect-ratio: 1; background: #246753; color: white; border-radius: 50%; font: 900 .64rem/1 var(--sans); }
.sato-recommendation img { aspect-ratio: 2.25; object-fit: cover; object-position: 50% 53%; }
.recommendation-features { display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 6px 0; }
.recommendation-features span { padding: 1px 4px; background: #e0eee2; color: #254c3f; font-size: .68rem; font-weight: 850; }
.recommendation-foot { padding: 4px 6px 6px; font-size: .69rem; }
.shot.sato-call img { aspect-ratio: 1.2; object-position: 50% 42%; }
.shot.rival-van { container-type: inline-size; }
.shot.rival-van img { aspect-ratio: 1.28; object-position: 50% 38%; }
.rival-van-brand {
  position: absolute; top: 63.2%; left: 1.2%; z-index: 1;
  transform: translateY(-50%) rotate(-4deg); transform-origin: left center;
  padding: .18em .32em; border: 1px solid #96958e; border-radius: 2px;
  background: #eeeae0; color: #24272a; white-space: nowrap;
  font: 950 clamp(.55rem, 2.8cqw, 1.1rem)/1.05 var(--sans);
  letter-spacing: -.065em;
}
.shot.estimator img { aspect-ratio: 1.03; object-position: 50% 42%; }
.sight-pause { min-height: clamp(105px, 32vw, 180px); text-align: center; }
.shot.stunned { width: 94%; }
.shot.stunned img { aspect-ratio: 1.05; object-position: 50% 48%; }
.shot.sato-memory { width: 82%; }
.shot.sato-memory img { aspect-ratio: 1.06; object-position: 50% 45%; }
.yamada-fear {
  display: grid;
  row-gap: clamp(77px, 14svh, 155px);
  padding: clamp(29px, 8svh, 68px) 0 clamp(100px, 17svh, 180px);
  background: linear-gradient(180deg, transparent, #10161e 56%, #10161e 88%, transparent);
  color: #f3e6d6;
  font: 850 clamp(.95rem, 4.55vw, 1.52rem)/1.65 var(--serif);
}
.fear-thought { padding-inline: 5%; }
.fear-right { text-align: right; }
.shot.fear-panel { margin-block: 0; }
.fear-panel img { aspect-ratio: auto; }
.fear-panel figcaption { margin: 13px 0 0 5%; color: #ffd6b5; font: 900 clamp(1.22rem, 5.8vw, 2.1rem)/1.35 var(--serif); }
.fear-last { margin-top: clamp(22px, 5svh, 55px); color: #ffcfaa; }

/* The same doorway anchors both the first build and the later repair. */
.first-house-lead { margin: 9px 0 12px; color: #f3dfc7; font: 850 clamp(.94rem, 4vw, 1.28rem)/1.55 var(--serif); }
.shot.first-house { width: min(92%, 490px); margin: 13px auto 15px; }
.shot.first-house img { aspect-ratio: auto; }
.home-history { margin: clamp(25px, 7vw, 47px) 0 12px; padding-left: 9px; border-left: 2px solid #d19a6f; }

/* The readable article is typeset as HTML on the tablet's blank screen. */
#scene-draft-screen { width: 100%; }
.draft-stage { position: relative; container-type: inline-size; }
.draft-display {
  position: absolute;
  top: 26%;
  left: 13.5%;
  width: 43.8%;
  transform: skewX(3deg);
  transform-origin: top left;
  color: #21322a;
  font: 780 clamp(.68rem, 4cqw, 1.24rem)/1.27 var(--sans);
}
.draft-display-brand { border-bottom: 1px solid #9fb6a6; color: #205b46; font-size: .76em; font-weight: 900; padding-bottom: .23em; }
.draft-display-brand span { margin-left: .22em; color: #50675a; font-size: .9em; }
.draft-display h4 { margin: .3em 0 .45em; font: 900 1.22em/1.12 var(--serif); }
.draft-detail { border-left: 2px solid #648e74; padding-left: .28em; }
.draft-detail + .draft-detail { margin-top: .44em; }
.draft-detail b { display: block; color: #205b46; font-size: .82em; font-weight: 900; margin-bottom: .1em; }

.craft-quote { margin-bottom: 20px; }
.case-project { color: #4d6257; font-size: .76rem; font-weight: 800; margin: -3px 0 8px; }
.story-price-sheet { width: min(94%, 540px); margin: 16px auto; padding: 10px; background: #fff7e8; color: #28312d; border-top: 4px solid #c78c54; border-radius: 4px; }
.story-sheet-label { color: #724423; font-size: .74rem; font-weight: 900; margin-bottom: 5px; }
.story-price-sheet dl>div { display: flex; justify-content: space-between; align-items: baseline; gap: 5px; border-bottom: 1px solid #dac8ac; padding: 5px 0; }
.story-price-sheet dt { font-size: .76rem; font-weight: 800; }
.story-price-sheet dd { font-size: clamp(.88rem, 4vw, 1.2rem); font-weight: 950; white-space: nowrap; }
.story-price-sheet>p:last-child { margin-top: 7px; font-size: .72rem; line-height: 1.5; }
.approval-stage { position: relative; container-type: inline-size; }
.shot.approval img { aspect-ratio: auto; }
.recommendation-source { display: grid; gap: 2px; border-top: 1px solid #c3d3c7; margin: 3px 6px 0; padding: 5px 0; color: #255743; font-size: .71rem; }
.narration.arrival { margin-top: 24px; }
.shot.sato-visit-talk img { aspect-ratio: auto; }

.reveal-stage { position: relative; container-type: inline-size; }
.reveal-tablet .reveal-stage>img { aspect-ratio: auto; }
.reveal-tablet-screen { position: absolute; top: 44%; left: 26%; width: 48%; color: #203c32; font: 900 clamp(.48rem, 2.7cqw, .96rem)/1.14 var(--sans); transform-origin: top left; }
.reveal-mini-brand { margin: 0 0 .2em; color: #285d49; }
.reveal-mini-book { background: #ca672d; color: white; padding: .26em .3em; text-align: center; border-radius: .22em; }
.reveal-mini-photos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .23em; margin-top: .25em; }
.reveal-mini-photos>div { position: relative; }
.reveal-tablet .reveal-mini-photos img { aspect-ratio: 2.2; object-fit: cover; }
.reveal-mini-photos span { position: absolute; bottom: 0; left: 0; padding: .07em .23em; color: white; background: #193a30; font-size: .78em; }
.reveal-mini-finish { font-size: .78em; margin-top: .26em; }
.yamada-revision { width: min(96%, 550px); margin: 15px auto 23px; color: #20342d; background: #fffaf0; border: 2px solid #789084; border-radius: 7px; overflow: hidden; }
.revision-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 7px; padding: 6px 8px; background: #e4eee3; font-size: .73rem; }
.revision-toolbar span { color: #5f4b3a; font-size: .68rem; }
.revision-page { padding: 8px; }
.revision-booking { position: relative; background: #aa4d1e; color: white; padding: 7px 25px 7px 8px; border-radius: 4px; font-size: clamp(.84rem, 4.3vw, 1.18rem); font-weight: 950; }
.revision-booking span { position: absolute; right: 8px; }
.revision-project { font-size: .75rem; font-weight: 850; margin-top: 6px; }
.revision-during>p { margin: 4px 0; color: #205942; font-size: .78rem; font-weight: 900; }
.revision-photos { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.revision-photos img, .revision-finished img { aspect-ratio: 2; object-fit: cover; }
.revision-photos figcaption { background: #e3eee2; padding: 3px 4px; font-size: .68rem; line-height: 1.4; }
.revision-finished { margin-top: 9px; border-top: 1px solid #d2d1c0; padding-top: 5px; }
.revision-finished figcaption { margin-bottom: 3px; font-size: .73rem; font-weight: 900; }
.revision-finished img { aspect-ratio: 3.6; }
.reveal-tablet .reveal-tablet-screen img.reveal-mini-finished-photo { height: 5.5cqw; object-fit: cover; object-position: center 55%; margin-top: .12em; }

.worry-pause { height: clamp(33px, 10vw, 73px); }
.shot.publish-worry { width: min(92%, 495px); margin: 0 auto 24px 0; }
.shot.publish-worry img { aspect-ratio: auto; }
.dialogue-row.approval-reassure { margin-top: 0; margin-bottom: clamp(18px, 5vw, 30px); }
.approval-reassure .bubble { padding: 10px 12px; background: #e5f2e4; }
.approval-reassure strong { display: block; margin: 1px 0 4px; color: #235740; font-size: clamp(1.24rem, 6vw, 2rem); line-height: 1.15; }
.shot.operations-memory img, .shot.operations-relief img { aspect-ratio: auto; }
.operations-regret { margin-top: clamp(32px, 8svh, 64px); font-size: clamp(.95rem, 4.1vw, 1.23rem); }
.shot.operations-relief { margin-top: clamp(21px, 5svh, 44px); }
.operations-relief .bubble { background: #e5f2e4; }
.operations-relief .bubble strong span { display: block; }
.operations-relief .bubble strong { display: block; margin: 3px 0 7px; color: #235740; font-size: clamp(1.07rem, 5.1vw, 1.7rem); line-height: 1.34; }

.publish-step-heading { color: #fbe3ca; font-size: .83rem; font-weight: 800; margin-bottom: 5px; }
.shot.publish-step { width: min(93%, 515px); }
.shot.publish-public { margin: 23px 0 24px auto; }
.publish-press-stage, .publish-public-stage { position: relative; container-type: inline-size; }
.publish-press-screen, .publish-public-screen { position: absolute; color: #234235; font: 900 clamp(.54rem, 3.2cqw, 1rem)/1.18 var(--sans); transform-origin: top left; }
.publish-public-screen {
  left: 57.7%;
  top: 41.05%;
  width: 14.9%;
  padding: .65cqw;
  transform: rotate(6deg) skewX(-4deg);
  font-size: 1.47cqw;
  line-height: 1.22;
}
.publish-site-browser { padding: .45em .2em; border-radius: .9em; text-align: center; background: #e7e7df; color: #3a4540; font-size: .82em; }
.publish-site-brand, .publish-site-book, .publish-site-next { display: flex; align-items: center; justify-content: space-between; }
.publish-site-brand { margin: .38em 0; color: #205c44; font-size: 1.3em; }
.publish-site-brand span { font-size: .69em; }
.publish-site-book { padding: .45em .4em; color: white; background: #aa4d1e; border-radius: .32em; font-size: .94em; }
.publish-site-project { margin-top: .65em; color: #4b675a; font-size: .82em; }
.publish-site-title { margin: .2em 0 .45em; font-size: 1.23em; }
.publish-site-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .28em; }
.publish-public-screen .publish-site-photos img, .publish-public-screen img.publish-site-kitchen { height: 4.75cqw; aspect-ratio: auto; object-fit: cover; border-radius: .2em; }
.publish-site-photos figcaption { padding: .22em .25em; background: #e5eee1; font-size: .82em; }
.publish-site-finish { margin: .5em 0 .18em; font-size: .88em; }
.publish-public-screen img.publish-site-kitchen { height: 5.2cqw; }
.publish-site-next { margin-top: .45em; padding: .3em .35em; border: 1px solid #6c8a78; border-radius: .25em; font-size: .82em; }
.publish-public-caption { padding: 8px 9px; background: #ebf1e7; color: #24372e; font-size: .8rem; line-height: 1.5; }
.publish-press-screen {
  left: 220px;
  top: 302px;
  width: 280px;
  height: 180px;
  font-size: 17px;
  /* Project the preview onto the four inset corners of the 600px illustration. */
  transform: matrix3d(.965885,-.106101,0,.00008723,.243862,.814603,0,-.000367,0,0,1,0,0,0,0,1);
}
.publish-press-title { display: flex; align-items: center; justify-content: space-between; }
.publish-press-title span { color: #663a1c; background: #f4dfbc; border-radius: .25em; padding: .12em .34em; font-size: .8em; }
.publish-press-book { margin-top: .3em; padding: .19em .3em; color: white; background: #aa4d1e; border-radius: .2em; text-align: center; font-size: .9em; }
.publish-press-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .25em; margin-top: .32em; }
.publish-press-photos>div, .publish-press-footer>div { position: relative; }
.publish-press-screen .publish-press-photos img, .publish-press-screen .publish-press-footer img {
  width: 100%;
  height: 64px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: .17em;
}
.publish-press-screen .publish-press-footer img { height: 29px; }
.publish-press-photos b, .publish-press-footer b { position: absolute; bottom: 0; left: 0; padding: 0 .24em; background: #20392f; color: white; font-size: .77em; }
.publish-press-footer { position: absolute; inset: auto 0 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .5em; }
.publish-press-action { padding: .31em .42em; border-radius: .25em; background: #286049; color: white; font-size: .87em; white-space: nowrap; box-shadow: 0 .13em #163b2c; }
.publish-tap { position: absolute; top: 63%; right: 1.2%; transform: rotate(-12deg); font: 900 3.6cqw/1 var(--serif); color: #2b241f; -webkit-text-stroke: .7cqw #fff0cf; paint-order: stroke fill; }
.publish-phone-closeup { width: min(90%, 390px); margin-top: 0; }
.publish-closeup-title { margin: 3px 0 9px; color: #244039; font-weight: 900; font-size: clamp(.98rem,4.4vw,1.22rem); }
.shot.trust-answer { margin-top: clamp(26px, 8vw, 53px); }
.shot.trust-answer img, .shot.trust-decision img { aspect-ratio: auto; }
.trust-answer .bubble.standalone { width: min(91%, 460px); margin: 10px 2.5% 0 auto; background: #dcebe0; }
.trust-answer .bubble.standalone::after { display: none; }
.shot.trust-decision { margin-top: clamp(44px, 13vw, 86px); }
.trust-thought { margin: 0 0 13px 7%; color: #f2dfc9; font: 750 clamp(1rem, 4.8vw, 1.4rem)/1.5 var(--serif); }
.case-log { margin: 24px auto 38px; width: min(95%, 490px); border: 1px solid #9eac9c; border-radius: 9px; overflow: hidden; background: #fcf7ec; color: #25342d; }
.case-log-heading { display: grid; gap: 2px; padding: 10px 12px; background: #e0ebdf; color: #244839; }
.case-log-heading span, .case-entries span { font-size: .7rem; font-weight: 750; }
.case-log-heading strong { font-size: clamp(.93rem, 4.3vw, 1.18rem); }
.case-workflow, .case-entries { margin: 0; padding: 0; list-style: none; }
.case-workflow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; padding: 9px 10px; counter-reset: case-step; }
.case-workflow li { padding: 4px; border-radius: 3px; background: #e9eee4; font-size: .67rem; font-weight: 800; }
.case-workflow li::before { counter-increment: case-step; content: counter(case-step); display: inline-grid; place-items: center; width: 1.25em; margin-right: .3em; border-radius: 50%; color: white; background: #3b6654; }
.case-entries li { display: grid; grid-template-columns: 29% minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid #d6dacf; }
.case-entries img { aspect-ratio: 1.12; object-fit: cover; border-radius: 4px; }
.case-entries span { color: #6b4a32; }
.case-entries b { display: block; font-size: .79rem; line-height: 1.36; }
.case-entries p { margin-top: 2px; font-size: .72rem; line-height: 1.4; }

.yamada-ai-query { max-width: 85%; margin-right: 0; padding: 8px 10px; }
.yamada-ai-query b { display: block; font-size: .72em; color: #e1f0e5; margin-bottom: 2px; }

/* Keep every standalone line visibly attached to its speaker. */
.dialogue-row { display: flex; align-items: flex-start; gap: clamp(9px, 3vw, 17px); margin: 12px 0; }
.dialogue-row.right { flex-direction: row-reverse; }
.dialogue-row .bubble { flex: 0 1 auto; min-width: 0; margin: 0; }
.dialogue-row .bubble::after { top: clamp(13px, 4.5vw, 26px); }
.dialogue-portrait { display: block; width: clamp(38px, 11vw, 68px); aspect-ratio: 1; flex: 0 0 auto; margin-top: 2px; overflow: hidden; border-radius: 50%; border: 1px solid #977d68; background: #e4ccb2; }
.dialogue-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dialogue-portrait.cutout { background: #dfc3a5; }
.dialogue-portrait.cutout img { object-position: center top; }

.wait-sequence { margin: clamp(30px, 8vw, 56px) 0 clamp(168px, 30svh, 340px); }
.wait-sequence .shot { margin-top: 0; margin-bottom: 0; }
.wait-group img { aspect-ratio: 1.18; object-position: 50% 82%; }
.wait-silence { min-height: clamp(112px, 21svh, 240px); display: grid; place-items: center; color: #e5d3bd; letter-spacing: .18em; font: 850 clamp(.96rem, 3.8vw, 1.4rem)/1.3 var(--serif); }
.shot.wait-glance { width: min(58%, 275px); margin-left: auto; }
.wait-glance img { aspect-ratio: 1.25; object-position: 50% 37%; }
.shot.wait-yamada { width: min(72%, 335px); margin: clamp(144px, 26svh, 295px) 0 0; }
.wait-yamada img { aspect-ratio: 1.08; object-position: 50% 44%; }
.wait-yamada figcaption { color: #f4dec8; text-align: right; padding: clamp(16px, 4.5vw, 26px) 4% 0 0; font: 900 clamp(1.12rem, 4.6vw, 1.6rem)/1.3 var(--serif); }

.ai-in .ai-speaker-name { display: flex; align-items: center; gap: 4px; }
.ai-avatar { display: block; flex: none; width: 30px; height: 30px; object-fit: cover; object-position: center top; border: 1px solid #85a89a; border-radius: 50%; background: #dceee4; }
.ai-character-voice { display: flex; align-items: center; gap: 7px; margin: 7px 0; }
.ai-character-voice .ai-avatar { width: clamp(42px, 12vw, 55px); height: clamp(42px, 12vw, 55px); }
.ai-character-voice .sato-screen-answer { position: relative; margin: 0; padding: 5px 7px; border-radius: 6px; background: #e1eee3; color: #214239; font-weight: 850; }
.ai-character-voice .sato-screen-answer::before { content: ""; position: absolute; left: -3px; top: 45%; width: 7px; aspect-ratio: 1; transform: rotate(45deg); background: #e1eee3; }
.shot.shock .ai-in img.ai-avatar { width: 25px; height: 25px; aspect-ratio: 1; object-position: center top; }
.ai-in .ai-speaker-name { line-height: 1.12; margin-bottom: 4px; }

.consultant-warning { container-type: inline-size; }
.yamada-comparison { margin-inline: auto; }
.yamada-comparison .recommendation-features { padding: 7px 0; }
.yamada-hesitation { min-height: clamp(155px, 27svh, 270px); color: #dbc9b4; letter-spacing: .16em; }
.consultant-arrival { padding-block: 0 clamp(26px, 6svh, 49px); }
.shot.consultant-greeting img { aspect-ratio: auto; }
.shot.consultant-greeting { margin-bottom: clamp(23px, 5svh, 40px); }
.shot.yamada-explains { margin-block: clamp(23px, 6svh, 52px) clamp(39px, 9svh, 78px); }
.shot.yamada-explains img { aspect-ratio: auto; }
.yamada-explains .bubble span { display: block; margin-top: .55em; }
.warning-letter { position: absolute; top: 13%; left: 17%; width: 43%; color: #fff5e4; font: 900 4.1cqw/1.3 var(--serif); paint-order: stroke fill; -webkit-text-stroke: .4cqw #142021; text-shadow: .3cqw .35cqw #142021; }
.warning-letter span, .warning-letter strong { display: block; }
.warning-address { margin-bottom: 2.5cqw; }
.warning-condition { margin-bottom: .7cqw; font-size: 3.45cqw; white-space: nowrap; }
.warning-letter strong { margin: .45cqw 0 .6cqw; color: #ffcc8a; font: 950 7.6cqw/1.1 var(--sans); letter-spacing: -.045em; white-space: nowrap; }
.warning-close { width: 36cqw; text-align: right; }
.shot.ai-search-montage { margin-top: clamp(38px, 10svh, 82px); }
.shot.ai-search-montage img { aspect-ratio: auto; }
.ai-search-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 3px; color: #f4e5d5; text-align: center; font: 850 clamp(.66rem, 3.1vw, 1rem)/1.45 var(--sans); }
.ai-search-questions span { padding: 7px 4px; background: #283e3a; }
.ai-search-outlook { display: block; margin-top: .65em; }
.ai-search-outlook strong { color: #235740; }
.shot.ai-unseen-dialogue { margin-top: clamp(30px, 8svh, 68px); }
.shot.ai-unseen-dialogue img { aspect-ratio: auto; }
.shot.ai-unseen { width: min(84%, 455px); margin: clamp(29px, 7svh, 58px) auto 0; }
.ai-unseen-art { position: relative; container-type: inline-size; }
.ai-unseen-art span { position: absolute; top: 77.8%; left: 50.2%; transform: translate(-50%, -50%); color: #35251c; font: 900 2.05cqw/1 var(--serif); white-space: nowrap; }
.ai-unseen-dialogue .bubble strong { color: #783923; }
.yamada-realization { margin-top: clamp(24px,9vw,57px); }
.yamada-realization .bubble strong { display: block; margin-top: .42em; color: #783923; font-size: 1.08em; }
.history-evidence { margin: 15px 0 23px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.history-evidence>div { min-width: 0; padding: 8px; background: #273a3b; color: #fff5e4; border-top: 2px solid #dda470; }
.history-evidence p { font-size: .76rem; font-weight: 850; }
.history-evidence strong { display: block; color: #ffcc98; font-size: clamp(.89rem,4.1vw,1.45rem); margin: 3px 0; }
.history-evidence small { display: block; font-size: .67rem; }
.history-evidence a { display: inline-block; color: #f1d4b5; font-size: .62rem; text-underline-offset: 2px; }
.shot.company-contract img { aspect-ratio: auto; }
.shot.site-control-fear { margin-top: clamp(28px, 7svh, 65px); }
.shot.site-control-fear img { aspect-ratio: auto; }
.company-controls { width: min(94%,510px); margin: 18px auto 21px; padding: 12px; border: 1px solid #b8bdb1; border-top: 4px solid #5f8c73; border-radius: 5px; background: #fffaf0; color: #25352f; font-size: .78rem; }
.company-sheet-label { color: #5a6c62; font-size: .67rem; }
.company-controls h4 { margin: 3px 0 9px; font-size: clamp(1.02rem, 4.8vw, 1.3rem); }
.company-sheet-owner { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; background: #e5efe1; color: #255a47; }
.company-sheet-owner b { font-size: .96rem; }
.company-controls dl>div { display: grid; grid-template-columns: minmax(6em, 31%) 1fr; gap: 6px; padding: 7px 0; border-bottom: 1px solid #d7ddd2; }
.company-controls dt { font-weight: 850; }
.company-sheet-cost { margin-top: 9px; color: #563922; }
.company-sheet-cost b { display: block; }
.approval-display, .publish-press-display { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.approval-on-tablet {
  position: absolute;
  left: 195px;
  top: 326px;
  width: 230px;
  height: 133px;
  color: #244039;
  font: 900 14px/1.12 var(--sans);
  transform-origin: 0 0;
  /* Project the layout onto the four inset corners of the 619px illustration. */
  transform: matrix3d(.926053,-.105835,0,.00006195,.284793,.804541,0,-.00039896,0,0,1,0,0,0,0,1);
}
.approval-mini-title { display: flex; align-items: center; justify-content: space-between; gap: 1px; }
.approval-mini-title span { color: #865127; background: #f4dfbc; padding: .12em .3em; border-radius: .2em; font-size: .88em; white-space: nowrap; }
.approval-mini-book { margin-top: .2em; background: #aa4d1e; color: white; text-align: center; padding: .22em .14em; }
.approval-mini-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .16em; margin-top: .2em; }
.approval-mini-photos>div { position: relative; }
.shot.approval .approval-mini-photos img { height: 41px; object-fit: cover; }
.approval-mini-photos small { position: absolute; bottom: 0; left: 0; background: #24483a; color: white; padding: .02em .15em; font-size: .76em; }
.approval-mini-finish { font-size: .72em; margin-top: .15em; }
.shot.approval img.approval-mini-kitchen { height: 27px; object-fit: cover; margin-top: .1em; }

#scene-sato-result { width: min(100%, 480px); margin: clamp(28px, 6svh, 55px) auto; }
#scene-sato-result .sato-screen { padding: clamp(10px, 3vw, 18px); }
#scene-sato-result .sato-screen-answer { font-size: clamp(.86rem, 3vw, 1rem); }
#scene-sato-result .sato-screen-answer strong { color: #245a46; font-size: 1.3em; }
#scene-sato-result .sato-recommendation { border: 2px solid #43816b; margin-top: 10px; }
.sato-other-matches { display: grid; gap: 6px; padding: 0; margin-top: 8px; list-style: none; }
.sato-other-matches li { display: flex; align-items: center; gap: 8px; border: 1px solid #c3d3c7; border-radius: 7px; background: #fffdf6; padding: 7px; }
.sato-other-matches li > span { display: grid; place-items: center; width: 21px; aspect-ratio: 1; border-radius: 50%; background: #e0eee2; font: 900 .64rem/1 var(--sans); }
.sato-other-matches b, .sato-other-matches small { display: block; }
.sato-other-matches b { font-size: .89rem; }
.sato-other-matches small { font-size: .76rem; }
.shot.sato-selects { margin-bottom: clamp(29px, 6svh, 55px); }
.shot.sato-selects img { aspect-ratio: auto; }

.shot.dual-pages-demo { margin-top: clamp(38px, 8svh, 76px); }
.shot.dual-pages-demo img { aspect-ratio: auto; }
.dual-pages-flow { margin-block: clamp(22px, 5svh, 45px) clamp(36px, 8svh, 70px); }
.dual-pages-source {
  display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 10px;
  align-items: center; max-width: 390px; margin-inline: auto; padding: 9px;
  border: 1px solid #9f8062; border-radius: 7px; background: #372e2a;
  font-size: clamp(.8rem, 3.4vw, .98rem); line-height: 1.5;
}
.dual-pages-source img { aspect-ratio: 1.3; object-fit: cover; border-radius: 4px; }
.dual-pages-source b { display: block; margin-bottom: .25em; color: #ffcc99; }
.dual-pages-engine {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 23px auto 0; padding: 6px 11px;
  background: #22433d; border: 1px solid #6d9c8a; border-radius: 9px; position: relative;
}
.dual-pages-engine::before { content: "↓"; position: absolute; bottom: 100%; inset-inline: 0; text-align: center; color: #b6d6c9; }
.dual-pages-engine img { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; }
.dual-pages-engine h4 { margin: 0; color: #fff8e8; font-size: clamp(.89rem, 3.6vw, 1.08rem); line-height: 1.35; text-align: center; }
.dual-pages-branch { display: block; width: 100%; height: 32px; color: #b6d6c9; }
.dual-pages-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 2vw, 14px); }
.dual-pages-card { min-width: 0; }
.dual-pages-card h5 { margin: 0 0 5px; padding: 4px 1px; text-align: center; color: #231c16; background: #ffce9c; border-radius: 5px; font-size: clamp(.83rem, 3.45vw, 1.04rem); }
.dual-pages-card.machine h5 { background: #bce3d3; color: #142f29; }
.dual-pages-browser { overflow: hidden; border: 2px solid #a99079; border-radius: 7px; background: #fff7e9; color: #322b24; }
.dual-pages-card.machine .dual-pages-browser { border-color: #7bac98; background: #eaf5ee; color: #173b30; }
.dual-pages-site { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 4px; padding: 5px 7px; background: #e9dbca; font-size: .73rem; font-weight: 850; }
.dual-pages-card.machine .dual-pages-site { background: #cae6d8; }
.dual-pages-site span { font-weight: 650; }
.dual-pages-browser img { aspect-ratio: 2.15; object-fit: cover; }
.dual-pages-copy, .dual-pages-browser dl { padding: 6px 7px 8px; font-size: clamp(.75rem, 3.1vw, .92rem); line-height: 1.4; }
.dual-pages-copy strong { display: block; margin-bottom: 3px; }
.dual-pages-browser dt { color: #23604d; font-weight: 850; }
.dual-pages-browser dd + dt { margin-top: 4px; padding-top: 4px; border-top: 1px solid #bad1c5; }
.dual-pages-browser .dual-pages-highlight, .dual-pages-highlight + dd {
  background: #c6ead5; padding-inline: 4px;
}
.shot.ai-reader { margin-top: clamp(22px, 5svh, 40px); }
.shot.ai-reader img { aspect-ratio: auto; }
.ai-reader-label {
  width: fit-content; margin: 0 0 8px auto; padding: 4px 9px;
  border: 1px solid #6d9c8a; border-radius: 5px; background: #22433d;
  color: #e2f3eb; font-size: clamp(.8rem, 3.4vw, 1rem); font-weight: 850;
}
.ai-reader-label span { margin-left: 4px; color: #b6e4d3; }
.ai-reader .bubble { background: #e6f5ed; }
.ai-reader .bubble b { color: #235e4b; }
.ai-reader .bubble strong {
  display: block; margin-bottom: .15em; color: #235e4b;
  font-size: clamp(1.3rem, 6vw, 2.1rem); line-height: 1.2;
}

.discovery-era-text .discovery-era-copy { grid-column: 1 / -1; }
.era { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 540px) {
  .era { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .era li:last-child { grid-column: 1 / -1; }
  .era li::after { display: none; }
}
.plan-options { display: grid; gap: 8px; margin-block: 16px; }
.plan-options p { padding: 10px 12px; border: 1px solid #947e64; border-radius: 6px; font-size: .9rem; }
.onboarding-title { margin-top: 20px; }