/* ─────────────────────────────────────────────────────────────────────────
   接案人的 AI 工作流程 — deck styles.
   Palette, type and doodles follow dawsonwang.com's 溫暖陪跑 (home-warm.css).

   Two layouts from one markup:
   - Stage (projector, laptop): a fixed 16:9 canvas. 1rem = 1/120 of the
     canvas width, so the whole slide scales with the window.
   - Mobile (audience phones): slides become normal scrolling pages with
     16px rem, single columns and a bottom bar for 匿名提問.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --cream: #fbf5ec;
  --paper: #fffdf8;
  --peach: #f7e3d0;
  --peach-deep: #f0cfb0;
  --persimmon: #e2703a;
  --persimmon-text: #b4501f;
  --persimmon-ink: #a0461b;
  --leaf: #3d7a57;
  --leaf-text: #2f6646;
  --ink: #2e231c;
  --muted: #65564b;
  --faint: #8a7a6a;
  --bubble: #e6f1e6;
  --rule: #ead8c4;
  --white: #fff;
  --amber-bg: #fdf1dc;
  --amber-line: #efcf96;

  --f-hand: "LXGW WenKai TC", "Noto Sans TC", "PingFang TC", serif;
  --f-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --f-note: "Iansui", "LXGW WenKai TC", cursive;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --shadow-sm: 0 1px 2px rgba(46, 35, 28, .06), 0 8px 20px -10px rgba(46, 35, 28, .2);
  --shadow: 0 2px 4px rgba(46, 35, 28, .05), 0 22px 44px -20px rgba(46, 35, 28, .32);

  /* type + spacing scale (stage values; mobile overrides below) */
  --fs-hero: 6rem;
  --fs-title: 3.9rem;
  --fs-sub: 2.1rem;
  --fs-body: 1.66rem;
  --fs-small: 1.36rem;
  --fs-tiny: 1.1rem;
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.2rem;
  --s5: 3.2rem;
  --radius: 1.7rem;

  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M2 7c4-6 7 4 11-1s7-5 10 0 4 2 5-1' fill='none' stroke='%232f6646' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c46-6 98-8 194-3' fill='none' stroke='%23e2703a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

html {
  font-size: min(calc(100vw / 120), calc(100vh / 67.5));
  font-size: min(calc(100vw / 120), calc(100dvh / 67.5));
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: #efe3d2;
  color: var(--ink);
  font: 400 var(--fs-body)/1.7 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--f-hand); font-weight: 700; line-height: 1.3; letter-spacing: .01em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
code, pre { font-family: var(--f-mono); }
mark { background: none; color: inherit; }
::selection { background: var(--peach-deep); color: var(--ink); }
:focus-visible { outline: 3px solid var(--leaf-text); outline-offset: 3px; border-radius: 8px; }
.icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; font-size: 16px; }
.skip:focus { top: 12px; }
.only-mobile { display: none; }

/* ── Stage ─────────────────────────────────────────────────────────────── */

.stage {
  position: relative;
  width: 120rem;
  height: 67.5rem;
  margin: calc((100vh - 67.5rem) / 2) auto 0;
  margin: calc((100dvh - 67.5rem) / 2) auto 0;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(46, 35, 28, .06);
}
.deck { position: absolute; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: var(--s4);
  padding: 4.2rem 6rem 9.4rem;
}
.slide.is-active { display: flex; animation: slide-in .5s var(--ease) both; }
@keyframes slide-in { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }

/* dotted paper texture, same recipe as the site hero */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(180, 80, 31, .16) 1.3px, transparent 1.8px);
  background-size: 2.2rem 2.2rem;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 12% 18%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 50% at 12% 18%, #000 10%, transparent 70%);
}

/* ── Shared text pieces ────────────────────────────────────────────────── */

.s-head { display: grid; gap: .6rem; max-width: 92rem; }
.s-head h2, .slide > h2 { font-size: var(--fs-title); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  color: var(--leaf-text);
  font-weight: 700;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.eyebrow::before { content: ""; width: 2.6rem; height: 1rem; background: var(--squiggle) no-repeat center / contain; }
.day {
  display: inline-flex;
  align-items: center;
  padding: .15rem .9rem;
  border-radius: 999px;
  background: var(--bubble);
  color: var(--leaf-text);
  font-size: .92em;
  text-decoration: none;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  padding: .55rem 1.4rem .55rem 1rem;
  border-radius: 999px;
  background: var(--bubble);
  color: var(--leaf-text);
  font-weight: 700;
  font-size: var(--fs-small);
}
.lead { color: var(--muted); font-size: var(--fs-sub); line-height: 1.7; }
.lead.small { font-size: var(--fs-body); }
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -.14em;
  height: .3em;
  background: var(--underline) no-repeat center / 100% 100%;
  pointer-events: none;
}
.note {
  font-family: var(--f-note);
  color: var(--persimmon-text);
  font-size: var(--fs-sub);
  line-height: 1.35;
  rotate: -2deg;
  width: fit-content;
}
.fine { display: flex; gap: .6rem; align-items: baseline; color: var(--faint); font-size: var(--fs-tiny); line-height: 1.6; }
.fine .icon { color: var(--leaf); }
.link-line { display: flex; align-items: center; gap: .6rem; font: 600 var(--fs-tiny)/1.4 var(--f-mono); color: var(--leaf-text); }

.points { display: grid; gap: .55rem; }
.points li { position: relative; padding-left: 1.6rem; font-size: var(--fs-body); line-height: 1.6; }
.points li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .62rem; height: .62rem; border-radius: 50%; background: var(--persimmon); }
.points.two { grid-template-columns: 1fr 1fr; column-gap: 1.6rem; }

.quote {
  position: relative;
  padding: 1.3rem 1.8rem 1.3rem 2.4rem;
  border-radius: 1.4rem 1.4rem 1.4rem .5rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font: 700 var(--fs-body)/1.6 var(--f-hand);
  color: var(--ink);
}
.quote { text-wrap: balance; }
.quote::before { content: "“"; position: absolute; left: .7rem; top: -.2rem; font: 700 3.6rem/1 var(--f-hand); color: var(--persimmon); }
.quote cite { display: block; margin-top: .3rem; font: 500 var(--fs-tiny)/1.4 var(--f-body); font-style: normal; color: var(--faint); }
.quote.big { font-size: var(--fs-sub); padding: 1.8rem 2.4rem 1.6rem 3rem; max-width: 86rem; }

.card { padding: 1.5rem 1.8rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); display: grid; gap: .6rem; }
.card.soft { background: var(--bubble); box-shadow: none; }
.card.warn { background: var(--amber-bg); box-shadow: inset 0 0 0 1.5px var(--amber-line); }
.card p { font-size: var(--fs-body); line-height: 1.6; }
.card-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; font: 700 var(--fs-body)/1.4 var(--f-hand) !important; color: var(--persimmon-ink); }
.card.soft .card-kicker { color: var(--leaf-text); }
.card-kicker small { font: 500 var(--fs-tiny)/1.4 var(--f-body); color: var(--faint); }

.stack { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; min-height: 0; }
.cols { display: grid; grid-template-columns: var(--cols, 1fr 1fr); gap: var(--s5); align-items: start; flex: 1; min-height: 0; }

.mark {
  width: 3rem; height: 3rem; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--persimmon-text); color: var(--white);
  font: 700 1.5rem/1 var(--f-hand); rotate: -6deg;
  box-shadow: 0 0 0 .22rem var(--cream), 0 0 0 .38rem var(--peach-deep);
}
.mark-lg { width: 4.6rem; height: 4.6rem; font-size: 2.3rem; }

/* ── Media frames ──────────────────────────────────────────────────────── */

.zoom { cursor: zoom-in; }
img[data-src] { background: var(--rule); }

.polaroid { padding: .9rem .9rem 1rem; border-radius: 1.5rem; background: var(--white); box-shadow: var(--shadow); rotate: -1.6deg; }
.polaroid img { width: 100%; border-radius: 1rem; }
.polaroid figcaption { margin: .7rem auto 0; text-align: center; }
.polaroid.wide { rotate: 1.4deg; align-self: center; }

.shot { border-radius: 1.4rem; background: var(--white); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--rule); }
.shot-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.shot-bar i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--peach-deep); }
.shot-bar i:nth-child(2) { background: #f3d9a4; }
.shot-bar i:nth-child(3) { background: #cfe3d2; }
.shot-url { margin-left: .8rem; padding: .15rem 1rem; border-radius: 999px; background: var(--cream); font: 500 var(--fs-tiny)/1.5 var(--f-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot img { width: 100%; }
.shot.crop img { aspect-ratio: var(--ar, 16 / 10); object-fit: cover; object-position: top center; }

/* fanned carousel slides from the articles */
.fan {
  --k: 3;
  --n: var(--k);
  --ov: 4.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  padding: 1rem 0;
}
.fan > figure {
  flex: none;
  width: calc((100% + var(--ov) * (var(--k) - 1)) / var(--n));
  margin-left: calc(var(--ov) * -1);
  padding: .55rem;
  border-radius: 1.3rem;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: transform .35s var(--spring), box-shadow .3s;
}
.fan > figure:first-child { margin-left: 0; }
.fan > figure img { width: 100%; border-radius: .85rem; }
.fan > figure:nth-child(1) { rotate: -4deg; translate: 0 1.2rem; }
.fan > figure:nth-child(2) { rotate: 2deg; z-index: 2; }
.fan > figure:nth-child(3) { rotate: 5deg; translate: 0 1.6rem; z-index: 3; }
.fan > figure:nth-child(4) { rotate: -2deg; translate: 0 -.6rem; z-index: 4; }
.fan > figure:hover { transform: translateY(-1rem) scale(1.05); z-index: 5; box-shadow: 0 30px 60px -24px rgba(46, 35, 28, .45); }
.fan.has-wide { --n: calc(var(--k) + .5); }
.fan > figure.landscape { width: calc(1.5 * (100% + var(--ov) * (var(--k) - 1)) / var(--n)); }
.fan[style*="--k: 2"] { --ov: -1.4rem; }
.fan[style*="--k: 4"] { --ov: 3.5rem; }
.fan-row { --ov: -1.2rem !important; padding: 0; justify-content: flex-start; }
.fan-row > figure { rotate: none !important; translate: none !important; }

.illus { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--paper); }
.illus img { width: 100%; }

/* ── Footer, ask chip, progress (stage) ───────────────────────────────── */

.foot {
  position: absolute;
  left: 6rem;
  right: 6rem;
  bottom: 1.4rem;
  height: 5.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px dashed var(--rule);
  z-index: 20;
}
.foot-brand { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-tiny); color: var(--muted); }
.foot-brand .mark { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; }
.foot-title { font-weight: 700; color: var(--ink); }
.foot-sec:not(:empty)::before { content: "・"; color: var(--faint); }
.foot-right { display: flex; align-items: center; gap: 1.6rem; }
.foot-page { font: 600 var(--fs-tiny)/1 var(--f-mono); color: var(--faint); }
.follow-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--rule); background: var(--white);
  font-size: var(--fs-tiny); font-weight: 700; color: var(--muted);
}
.follow-toggle::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--rule); }
.follow-toggle[aria-pressed="true"] { color: var(--leaf-text); border-color: #b9d6bf; background: var(--bubble); }
.follow-toggle[aria-pressed="true"]::before { background: var(--leaf); box-shadow: 0 0 0 .25rem rgba(61, 122, 87, .2); }

.ask-chip {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.2rem .55rem .55rem;
  border: 1.5px solid var(--rule);
  border-radius: 1.3rem;
  background: var(--white);
  box-shadow: var(--shadow);
  translate: 0 -.9rem;
  rotate: 1.5deg;
  text-align: left;
  transition: transform .3s var(--spring);
}
.ask-chip:hover { transform: translateY(-.3rem); }
.ask-chip .qr { width: 8.2rem; height: 8.2rem; }
.ask-chip-text { display: grid; line-height: 1.35; }
.ask-chip-text b { font: 700 var(--fs-body)/1.3 var(--f-hand); color: var(--persimmon-ink); }
.ask-chip-text small { font-size: var(--fs-tiny); color: var(--muted); }
.ask-count { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; background: var(--peach); color: var(--persimmon-ink); font: 700 var(--fs-small)/1 var(--f-body); }
.ask-count.pulse { animation: pulse 1.2s var(--ease); }
@keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(1.25); background: var(--persimmon); color: #fff; } 100% { transform: scale(1); } }
.live-dot { position: absolute; right: -.2rem; top: -.2rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 .2rem var(--white); }
.live-dot.on { background: #3fa86b; }

.progress { position: absolute; left: -6rem; right: -6rem; bottom: -1.4rem; height: .35rem; background: transparent; }
.progress i { display: block; height: 100%; width: 0; background: var(--persimmon); border-radius: 0 999px 999px 0; transition: width .5s var(--ease); }

body.on-cover .ask-chip,
body.on-qa .ask-chip { visibility: hidden; }
body.is-presenter .follow-toggle { display: none; }
body.is-presenter .ask-chip { cursor: default; }
body.no-live .follow-toggle { display: none; }

.qr { display: block; aspect-ratio: 1; }
.qr svg { display: block; width: 100%; height: 100%; }

/* ── Cover ─────────────────────────────────────────────────────────────── */

.s-cover { flex-direction: row; align-items: center; justify-content: space-between; gap: 4rem; padding-bottom: 6rem; }
.s-cover::before { -webkit-mask-image: radial-gradient(ellipse 60% 60% at 25% 40%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 60% at 25% 40%, #000 10%, transparent 72%); }
.cover-text { display: grid; gap: 2.2rem; max-width: 66rem; }
.cover-text h1 { font-size: var(--fs-hero); line-height: 1.28; letter-spacing: .02em; }
.speaker { display: flex; align-items: center; gap: 1.4rem; margin-top: .6rem; }
.speaker div { display: grid; line-height: 1.4; }
.speaker strong { font-size: var(--fs-sub); }
.speaker div span { color: var(--muted); font-size: var(--fs-small); }
.qr-card { position: relative; padding: 1.6rem; border-radius: 2rem; background: var(--white); box-shadow: var(--shadow); text-align: center; }
.cover-qr { width: 36rem; rotate: 2deg; flex: none; }
.cover-qr .qr { width: 100%; }
.cover-qr figcaption { display: grid; gap: .2rem; margin-top: 1rem; }
.cover-qr figcaption b { font: 700 var(--fs-sub)/1.35 var(--f-hand); }
.cover-qr figcaption span { font-size: var(--fs-body); color: var(--muted); }
.cover-qr figcaption em { font-style: normal; color: var(--persimmon-text); font-weight: 700; }
.qr-url { font: 600 var(--fs-tiny)/1.4 var(--f-mono); color: var(--faint); word-break: break-all; }
.tape { position: absolute; left: 50%; top: -1.4rem; width: 11rem; height: 2.8rem; translate: -50% 0; rotate: -4deg; background: rgba(226, 112, 58, .32); border-radius: .3rem; }
.cover-note { position: absolute; left: -6rem; bottom: -3.8rem; rotate: -6deg; }

/* ── Intro ─────────────────────────────────────────────────────────────── */

.s-intro { display: none; flex-direction: row; gap: 5rem; align-items: center; }
.s-intro.is-active { display: flex; }
.intro-photo { width: 31rem; flex: none; rotate: -2.4deg; }
.intro-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.intro-main { display: grid; gap: 1.5rem; min-width: 0; }
.intro-main h2 { font-size: var(--fs-title); }
.abcde { font-size: var(--fs-body); line-height: 1.75; color: var(--muted); max-width: 70rem; }
.abcde mark { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, var(--peach-deep) 62%); padding: 0 .15rem; }
.stickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.stickers li {
  padding: 1.1rem 1.3rem 1.2rem;
  border-radius: 1.6rem;
  box-shadow: 0 0 0 .38rem var(--white), 0 16px 30px -16px rgba(46, 35, 28, .42);
  display: grid;
  gap: .3rem;
}
.stickers li:nth-child(4n + 1) { background: var(--peach); rotate: -2deg; }
.stickers li:nth-child(4n + 2) { background: var(--bubble); rotate: 1.5deg; }
.stickers li:nth-child(4n + 3) { background: var(--paper); rotate: -1deg; }
.stickers li:nth-child(4n + 4) { background: var(--peach); rotate: 2deg; }
.stickers b { display: flex; align-items: baseline; gap: .4rem; font: 700 3rem/1.05 var(--f-hand); color: var(--persimmon-ink); }
.stickers li:nth-child(4n + 2) b { color: var(--leaf-text); }
.stickers b small { font: 700 var(--fs-small)/1 var(--f-body); color: var(--ink); }
.stickers span { font-size: var(--fs-tiny); line-height: 1.5; }
.stickers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creds { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; font-size: var(--fs-small); }
.creds li { display: flex; align-items: center; gap: .5rem; }
.creds .icon { color: var(--leaf); stroke-width: 2.6; }

.follow { display: flex; align-items: center; gap: 1.6rem; padding: 1.2rem 1.6rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); border: 1.5px dashed var(--rule); }
.follow-title { display: grid; font: 700 var(--fs-sub)/1.3 var(--f-hand); color: var(--persimmon-ink); margin-right: auto; }
.follow-title span { font: 400 var(--fs-tiny)/1.5 var(--f-body); color: var(--muted); }
.follow-item { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.follow-item .qr { width: 9rem; height: 9rem; }
.follow-name { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .45rem; line-height: 1.35; }
.follow-name .icon { width: 1.6rem; height: 1.6rem; color: var(--persimmon-text); }
.follow-name b { font-size: var(--fs-small); }
.follow-name small { grid-column: 1 / -1; font: 600 var(--fs-tiny)/1.4 var(--f-mono); color: var(--muted); }

/* ── ABCDE formula ─────────────────────────────────────────────────────── */

.abcde-blocks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.abcde-blocks li { display: grid; gap: .25rem; justify-items: start; align-content: start; padding: 1rem 1.1rem 1.1rem; border-radius: 1.3rem; background: var(--white); box-shadow: var(--shadow-sm); border-top: .5rem solid var(--persimmon); }
.abcde-blocks li.opt { border-top-color: var(--leaf); background: var(--paper); }
.abcde-blocks b { font: 700 2.6rem/1 var(--f-hand); color: var(--persimmon-ink); }
.abcde-blocks li.opt b { color: var(--leaf-text); }
.abcde-blocks span { font-size: var(--fs-tiny); color: var(--muted); font-weight: 700; }
.abcde-blocks em { font-style: normal; font-size: var(--fs-tiny); line-height: 1.45; }
.callout { padding: 1.3rem 1.6rem; border-radius: var(--radius); background: var(--peach); display: grid; gap: .4rem; }
.callout p { font-size: var(--fs-small); line-height: 1.55; }
.callout .callout-title { font: 700 var(--fs-body)/1.4 var(--f-hand); color: var(--persimmon-ink); }
.callout s { color: var(--faint); }

/* ── Services + photos ─────────────────────────────────────────────────── */

.svc { display: grid; gap: 1.2rem; }
.svc li { display: flex; gap: 1.4rem; align-items: center; padding: 1.3rem 1.6rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.svc li:first-child { background: var(--peach); }
.svc b { width: 3.6rem; height: 3.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--persimmon-text); color: #fff; font: 700 1.8rem/1 var(--f-hand); rotate: -6deg; }
.svc div { display: grid; line-height: 1.45; }
.svc strong { font: 700 var(--fs-sub)/1.35 var(--f-hand); }
.svc span { font-size: var(--fs-small); color: var(--muted); }
.venues p { font-size: var(--fs-small); font-weight: 700; color: var(--leaf-text); margin-bottom: .8rem; }
.pills { display: flex; flex-wrap: wrap; gap: .7rem .8rem; }
.pills li { padding: .35rem 1.1rem; border-radius: 999px; background: var(--white); border: 1.5px solid var(--rule); font-size: var(--fs-tiny); font-weight: 500; }
.photo-pile { position: relative; height: 40rem; }
.photo-pile .polaroid { position: absolute; }
.photo-pile .p1 { left: 0; top: 1rem; width: 34rem; rotate: -3deg; z-index: 2; }
.photo-pile .p2 { right: 0; top: 0; width: 17rem; rotate: 4deg; z-index: 3; }
.photo-pile .p3 { right: 5rem; top: 20.5rem; width: 24rem; rotate: 2deg; z-index: 1; }
.photo-pile .p1 figcaption { position: absolute; left: 1.4rem; bottom: -4.6rem; white-space: nowrap; }

/* ── Site tour ─────────────────────────────────────────────────────────── */

.tour { display: grid; grid-template-columns: 25rem 1fr; gap: 3rem; flex: 1; min-height: 0; }
.tour-tabs { display: grid; align-content: start; gap: .9rem; }
.tour-tabs button {
  display: grid;
  gap: .1rem;
  padding: 1rem 1.4rem;
  border: 1.5px solid var(--rule);
  border-radius: 1.3rem;
  background: var(--white);
  text-align: left;
  transition: transform .3s var(--spring), background-color .2s;
}
.tour-tabs button b { font: 700 var(--fs-body)/1.35 var(--f-hand); }
.tour-tabs button small { font-size: var(--fs-tiny); color: var(--muted); }
.tour-tabs button[aria-selected="true"] { background: var(--peach); border-color: var(--peach-deep); transform: translateX(.6rem); }
.tour-tabs button[aria-selected="true"] b { color: var(--persimmon-ink); }
.tour-shot { display: flex; flex-direction: column; min-height: 0; rotate: .6deg; }
.tour-shot img { flex: 1; min-height: 0; height: 100%; object-fit: cover; object-position: top center; }

.facts { display: grid; gap: .9rem; }
.facts div { display: grid; grid-template-columns: 5.6rem 1fr; gap: 1rem; align-items: baseline; padding-bottom: .9rem; border-bottom: 1.5px dashed var(--rule); }
.facts dt { font: 700 var(--fs-body)/1.4 var(--f-hand); color: var(--leaf-text); }
.facts dd { font-size: var(--fs-body); line-height: 1.55; }

/* ── Agenda ────────────────────────────────────────────────────────────── */

.agenda { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 2.2rem; flex: 1; align-content: center; }
.agenda li { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 1.6rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.agenda li:nth-child(odd) { rotate: -.6deg; }
.agenda li:nth-child(even) { rotate: .6deg; }
.agenda b { min-width: 4.4rem; font: 700 3rem/1 var(--f-hand); color: var(--persimmon-text); }
.agenda div { display: grid; line-height: 1.45; }
.agenda strong { font: 700 var(--fs-sub)/1.35 var(--f-hand); }
.agenda span { font-size: var(--fs-small); color: var(--muted); }
.agenda .agenda-qa { grid-column: 1 / -1; background: var(--bubble); box-shadow: none; rotate: none; }
.agenda .agenda-qa b { color: var(--leaf-text); font-size: 2.4rem; min-width: 5.2rem; }

/* ── Section opener ────────────────────────────────────────────────────── */

.s-section { background: var(--peach); justify-content: center; }
.s-section::before { -webkit-mask-image: radial-gradient(ellipse 70% 70% at 80% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 70% 70% at 80% 30%, #000 10%, transparent 72%); }
.sec-num { position: absolute; right: 6rem; top: 2rem; font: 700 18rem/1 var(--f-hand); color: rgba(180, 80, 31, .14); }
.s-section .s-head h2 { font-size: 4.6rem; }
.io { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3rem; margin: 1rem 0; }
.io ul { display: grid; gap: 1rem; }
.io li { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.5rem; border-radius: 1.3rem; background: var(--white); box-shadow: var(--shadow-sm); font: 700 var(--fs-body)/1.4 var(--f-hand); }
.io-in li:nth-child(odd) { rotate: -1deg; }
.io-in li:nth-child(even) { rotate: 1deg; translate: 2rem 0; }
.io-in .icon { color: var(--persimmon-text); }
.io-out li { background: var(--bubble); box-shadow: none; color: var(--leaf-text); }
.io-out li::before { content: ""; width: 1.2rem; height: 1.2rem; flex: none; border-radius: .3rem; border: .22rem solid var(--leaf); }
.io-ai {
  position: relative;
  display: grid; place-items: center; gap: .2rem;
  width: 12rem; height: 12rem; border-radius: 50%;
  background: var(--persimmon-text); color: #fff;
  font: 700 3.4rem/1 var(--f-hand);
  box-shadow: 0 0 0 .8rem rgba(255, 255, 255, .6), var(--shadow);
}
.io-ai .icon { width: 2.6rem; height: 2.6rem; }
.io-ai::before, .io-ai::after { content: ""; position: absolute; top: 50%; width: 2.4rem; height: .3rem; background: var(--persimmon); border-radius: 999px; }
.io-ai::before { right: calc(100% + .8rem); }
.io-ai::after { left: calc(100% + .8rem); }

.sec-badge {
  position: absolute;
  right: 6rem;
  top: 3.4rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.5rem .7rem .8rem;
  border-radius: 1.4rem;
  background: var(--peach);
  box-shadow: 0 0 0 .38rem var(--white), 0 16px 30px -16px rgba(46, 35, 28, .42);
  rotate: 3deg;
  font: 700 var(--fs-body)/1.2 var(--f-hand);
  color: var(--persimmon-ink);
}
.sec-badge b { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--persimmon-text); color: #fff; font-size: 1.6rem; }
.slide:has(.sec-badge) .s-head { padding-right: 26rem; }

/* ── Commands, flows, chains ───────────────────────────────────────────── */

.cmds { display: grid; gap: 1rem; counter-reset: cmd; }
.cmds li { counter-increment: cmd; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1.1rem; align-items: center; }
.cmds li::before { content: counter(cmd); grid-row: span 2; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--persimmon-ink); font: 700 1.5rem/1 var(--f-hand); }
.cmds code { justify-self: start; padding: .35rem 1rem; border-radius: .7rem; background: var(--ink); color: #fbe7d6; font-size: var(--fs-small); font-weight: 600; }
.cmds span { font-size: var(--fs-small); color: var(--muted); }

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; }
.flow li { position: relative; display: grid; justify-items: start; gap: .2rem; padding: 1.1rem 1.4rem; border-radius: 1.4rem; background: var(--white); box-shadow: var(--shadow-sm); }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -1.95rem; top: 50%; width: 1.5rem; height: 1.5rem; translate: 0 -50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2703a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain; }
.flow .icon { width: 2rem; height: 2rem; color: var(--persimmon-text); }
.flow b { font: 700 var(--fs-body)/1.35 var(--f-hand); }
.flow span { font-size: var(--fs-tiny); color: var(--muted); line-height: 1.5; }
.flow li:last-child { background: var(--bubble); box-shadow: none; }
.flow li:last-child .icon { color: var(--leaf-text); }

.code-card { border-radius: var(--radius); background: var(--ink); color: #fbe7d6; padding: 1.4rem 1.8rem 1.6rem; box-shadow: var(--shadow); rotate: -.6deg; align-self: center; }
.code-card figcaption { font: 600 var(--fs-tiny)/1.4 var(--f-mono); color: #d9b79c; margin-bottom: .8rem; }
.code-card pre { margin: 0; white-space: pre-wrap; font: 500 var(--fs-small)/1.75 var(--f-body); }

.mini-steps { display: grid; gap: .5rem; counter-reset: ms; }
.mini-steps li { counter-increment: ms; display: flex; gap: .9rem; align-items: baseline; font-size: var(--fs-body); }
.mini-steps li::before { content: counter(ms); flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--persimmon-ink); font: 700 1.2rem/1 var(--f-hand); }

.chain { display: grid; gap: .55rem; counter-reset: ch; }
.chain li { counter-increment: ch; display: flex; align-items: center; gap: .9rem; font-size: var(--fs-body); }
.chain li::before { content: counter(ch); flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; border: .2rem solid var(--leaf); color: var(--leaf-text); font: 700 1.15rem/1 var(--f-hand); background: var(--white); }
.chain li:last-child::before { background: var(--leaf); color: #fff; }
.chain-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.chain-row li { flex-direction: column; align-items: center; text-align: center; gap: .4rem; font-size: var(--fs-tiny); line-height: 1.3; font-weight: 700; }
.chain-row li small { display: block; font-weight: 400; color: var(--persimmon-text); }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat { display: grid; gap: .2rem; padding: 1rem 1.3rem; border-radius: 1.4rem; background: var(--white); box-shadow: var(--shadow-sm); }
.stat b { display: flex; align-items: baseline; gap: .3rem; font: 700 2.6rem/1.1 var(--f-hand); color: var(--persimmon-ink); }
.stat b small { font: 700 var(--fs-small)/1 var(--f-body); color: var(--ink); }
.stat span { font-size: var(--fs-tiny); color: var(--muted); line-height: 1.5; }

.checks { display: grid; gap: 1.1rem; counter-reset: ck; align-self: center; }
.checks li { counter-increment: ck; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1.2rem; padding: 1.15rem 1.5rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.checks li::before { content: counter(ck); grid-row: span 2; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--persimmon-ink); font: 700 1.7rem/1 var(--f-hand); rotate: -6deg; }
.checks b { font: 700 var(--fs-sub)/1.35 var(--f-hand); }
.checks span { font-size: var(--fs-body); color: var(--muted); line-height: 1.55; }
.checks li:last-child { background: var(--bubble); box-shadow: none; }

.steps { display: grid; gap: .8rem; }
.steps li { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-body); }
.steps b { width: 2.8rem; height: 2.8rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--persimmon-text); color: #fff; font: 700 1.4rem/1 var(--f-hand); rotate: -6deg; }

.ba { display: grid; grid-template-columns: 1fr auto 1.25fr; align-items: center; gap: 1rem; }
.ba-item { position: relative; padding: 1.4rem 1.4rem 1.2rem; border-radius: 1.4rem 1.4rem 1.4rem .5rem; box-shadow: var(--shadow-sm); }
.ba-before { background: var(--white); color: var(--muted); }
.ba-after { background: var(--bubble); }
.ba-item p { font-size: var(--fs-small); line-height: 1.6; }
.ba-tag { position: absolute; top: -1rem; left: 1rem; padding: .1rem .8rem; border-radius: 999px; font-size: var(--fs-tiny); font-weight: 700; background: var(--rule); color: var(--muted); }
.ba-after .ba-tag { background: var(--leaf); color: #fff; }
.ba-arrow { width: 2rem; height: 2rem; color: var(--persimmon); }

/* ── Quote sheet ───────────────────────────────────────────────────────── */

.was-now { display: grid; gap: .6rem; }
.was-now .icon { color: var(--persimmon); rotate: 90deg; margin-left: 1.4rem; }
.was { padding: .9rem 1.3rem; border-radius: 1.2rem; background: var(--white); color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(180, 80, 31, .5); font-size: var(--fs-body); }
.now { padding: .9rem 1.3rem; border-radius: 1.2rem; background: var(--peach); font: 700 var(--fs-body)/1.5 var(--f-hand); color: var(--persimmon-ink); }

.quote-demo { gap: .5rem; padding: 1.3rem 1.5rem; }
.qd-item { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .9rem; padding: .65rem .8rem; border-radius: 1rem; cursor: pointer; transition: background-color .2s; }
.qd-item:hover { background: var(--cream); }
.qd-item input { width: 1.6rem; height: 1.6rem; accent-color: var(--leaf); margin: 0; }
.qd-code { font: 700 var(--fs-tiny)/1 var(--f-mono); color: var(--leaf-text); }
.qd-name { display: grid; font-size: var(--fs-small); line-height: 1.35; }
.qd-name small { font-size: var(--fs-tiny); color: var(--faint); }
.qd-price { font: 600 var(--fs-tiny)/1 var(--f-mono); white-space: nowrap; }
.qd-item:has(input:checked) { background: var(--bubble); }
.qd-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .4rem; padding: .9rem 1.1rem; border-radius: 1rem; background: var(--ink); color: #fbe7d6; }
.qd-total span { font-size: var(--fs-small); }
.qd-total b { font: 700 var(--fs-sub)/1.2 var(--f-mono); color: #fff; }
.practice { display: grid; gap: .9rem; counter-reset: pr; align-self: center; }
.practice li { counter-increment: pr; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; align-items: start; padding-bottom: .9rem; border-bottom: 1.5px dashed var(--rule); }
.practice li::before { content: counter(pr); grid-row: span 2; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--persimmon-ink); font: 700 1.5rem/1 var(--f-hand); }
.practice b { font: 700 var(--fs-sub)/1.35 var(--f-hand); }
.practice span { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }

/* ── Invoice ───────────────────────────────────────────────────────────── */

.gates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.gates li { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 1.3rem; background: var(--white); box-shadow: var(--shadow-sm); border-bottom: .45rem solid var(--persimmon); }
.gates b { font: 700 var(--fs-body)/1.35 var(--f-hand); }
.gates span { font-size: var(--fs-tiny); color: var(--muted); line-height: 1.45; }
.gates li:last-child { border-bottom-color: var(--leaf); }

.timeline { display: grid; gap: 1.2rem; position: relative; align-self: center; }
.timeline::before { content: ""; position: absolute; left: 1.4rem; top: 1rem; bottom: 1rem; border-left: .25rem dashed var(--peach-deep); }
.timeline > li { position: relative; display: grid; gap: .5rem; padding: 1.3rem 1.6rem 1.3rem 4.4rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.timeline > li::before { content: ""; position: absolute; left: .75rem; top: 1.7rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--white); border: .3rem solid var(--persimmon); }
.timeline > li p { font-size: var(--fs-body); line-height: 1.6; }
.timeline > li b { color: var(--leaf-text); }
.tl-tag { width: fit-content; padding: .1rem .9rem; border-radius: 999px; background: var(--peach); color: var(--persimmon-ink); font: 700 var(--fs-small)/1.5 var(--f-hand); }
.tl-accent { background: var(--bubble) !important; box-shadow: none !important; }
.tl-accent::before { border-color: var(--leaf) !important; background: var(--leaf) !important; }
.tl-accent .tl-tag { background: var(--leaf); color: #fff; }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.loop { display: grid; gap: .7rem; counter-reset: lp; }
.loop li { counter-increment: lp; display: flex; gap: 1rem; align-items: baseline; padding: .8rem 1.2rem; border-radius: 1.2rem; background: var(--white); box-shadow: var(--shadow-sm); font-size: var(--fs-body); line-height: 1.5; }
.loop li::before { content: counter(lp); flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--rule); font: 700 1.2rem/1 var(--f-hand); }
.loop .bad { background: #fbe5dc; color: var(--persimmon-ink); }
.loop .bad::before { background: var(--persimmon); color: #fff; }
.loop .good { background: var(--bubble); }
.loop .good::before { background: var(--leaf); color: #fff; }

/* ── Case cards (problem → approach → result), as on the site ──────────── */

.case-flow { display: grid; gap: .3rem; align-self: center; }
.case-flow > div { padding: 1.2rem 1.6rem; border-radius: var(--radius); }
.cf-label { font: 700 var(--fs-body)/1.4 var(--f-hand) !important; margin-bottom: .3rem; }
.case-flow p { font-size: var(--fs-body); line-height: 1.6; }
.case-flow .points { margin-top: .5rem; }
.case-flow .points li { font-size: var(--fs-small); }
.cf-before { background: var(--white); box-shadow: var(--shadow-sm); }
.cf-before .cf-label { color: var(--muted); }
.cf-how { background: var(--white); box-shadow: var(--shadow-sm); margin-top: .8rem; }
.cf-how .cf-label { color: var(--persimmon-ink); }
.cf-after { background: var(--bubble); margin-top: 1rem; }
.cf-after .cf-label { color: var(--leaf-text); }
.cf-arrow { width: 4.4rem; height: 3.6rem; margin: -.4rem 0 -1.2rem 2rem; fill: none; stroke: var(--persimmon); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.phone { position: relative; justify-self: center; align-self: center; width: 19rem; padding: .9rem; border-radius: 3rem; background: var(--ink); box-shadow: var(--shadow); rotate: 2deg; }
.phone video { width: 100%; aspect-ratio: 540 / 960; object-fit: cover; border-radius: 2.2rem; background: #000; }
.phone figcaption { position: absolute; left: 50%; bottom: -4.4rem; translate: -50% 0; rotate: -4deg; white-space: nowrap; }

/* ── Era change ────────────────────────────────────────────────────────── */

.evo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.evo li { position: relative; padding: .8rem .6rem; border-radius: 1.1rem; background: var(--white); text-align: center; font: 700 var(--fs-body)/1.3 var(--f-hand); color: var(--faint); box-shadow: var(--shadow-sm); }
.evo li:not(:last-child)::after { content: "›"; position: absolute; right: -1.25rem; top: 50%; translate: 0 -55%; color: var(--persimmon); font-size: 2.4rem; }
.evo .now { background: var(--persimmon-text); color: #fff; }

.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.decide div { display: grid; gap: .3rem; padding: 1.1rem 1.3rem; border-radius: 1.3rem; border: 1.5px dashed var(--peach-deep); }
.decide b { font: 700 var(--fs-body)/1.35 var(--f-hand); color: var(--persimmon-ink); }
.decide div:last-child b { color: var(--leaf-text); }
.decide span { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }

.three-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.three-cards li { position: relative; display: grid; align-content: start; gap: .6rem; padding: 2rem 2rem 1.6rem; border-radius: 2rem; background: var(--white); box-shadow: var(--shadow); }
.three-cards li:nth-child(1) { rotate: -1.2deg; }
.three-cards li:nth-child(2) { rotate: .8deg; background: var(--peach); }
.three-cards li:nth-child(3) { rotate: -.6deg; background: var(--bubble); }
.tc-num { font: 700 3.4rem/1 var(--f-hand); color: var(--persimmon-text); }
.tc-head { display: flex; align-items: center; gap: 1.2rem; }
.tc-img { width: 13rem; flex: none; padding: .4rem; border-radius: 1rem; background: var(--white); box-shadow: var(--shadow-sm); rotate: 3deg; margin-left: auto; }
.tc-img img { border-radius: .7rem; }
.three-cards strong { font: 700 var(--fs-sub)/1.35 var(--f-hand); }
.three-cards p { font-size: var(--fs-body); line-height: 1.6; }
.three-cards small { font: 600 var(--fs-tiny)/1.4 var(--f-mono); color: var(--faint); }

/* ── Q&A board ─────────────────────────────────────────────────────────── */

.s-qa { flex-direction: row; gap: 4rem; padding-bottom: 7rem; }
.qa-side { width: 34rem; flex: none; display: flex; flex-direction: column; gap: 1.4rem; }
.qa-side h2 { font-size: 5rem; }
.qa-qr { width: 25rem; rotate: -1.6deg; padding: 1.2rem; }
.qa-qr figcaption { margin-top: .6rem; }
.qa-stats { display: flex; gap: 2rem; font-size: var(--fs-small); color: var(--muted); }
.qa-stats span { display: inline-flex; align-items: center; gap: .5rem; }
.qa-stats b { color: var(--ink); }
.qa-board { position: relative; flex: 1; min-width: 0; padding: 1.6rem; border-radius: 2.2rem; background: var(--peach); overflow: hidden; display: flex; }
.qa-list { flex: 1; display: grid; align-content: start; gap: 1.1rem; overflow-y: auto; padding: .4rem .6rem 1rem .4rem; scrollbar-width: thin; }
.qa-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 700 var(--fs-sub)/1.6 var(--f-note); color: var(--persimmon-text); padding: 2rem; }
.qa-list:not(:empty) + .qa-empty { display: none; }
.q {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem 1.2rem;
  padding: 1.2rem 1.4rem;
  border-radius: 1.5rem 1.5rem 1.5rem .5rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  animation: q-in .6s var(--spring) both;
}
@keyframes q-in { from { opacity: 0; transform: translateY(1.2rem) scale(.97); } to { opacity: 1; transform: none; } }
.q-text { font-size: var(--fs-sub); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.q-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: var(--fs-tiny); color: var(--faint); }
.q-from { padding: .05rem .7rem; border-radius: 999px; background: var(--cream); }
.q-mine { padding: .05rem .7rem; border-radius: 999px; background: var(--bubble); color: var(--leaf-text); font-weight: 700; }
.q-side { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.q-vote { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--white); font: 700 var(--fs-small)/1 var(--f-body); color: var(--muted); }
.q-vote[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.q-mod { display: none; gap: .4rem; }
body.is-presenter .q-mod { display: flex; }
.q-mod button { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper); font-size: var(--fs-tiny); color: var(--muted); }
.q-mod button:hover { border-color: var(--persimmon); color: var(--persimmon-ink); }
.q.answered { background: rgba(255, 255, 255, .55); box-shadow: none; }
.q.answered .q-text { color: var(--faint); }
.q.answered .q-meta::before { content: "已回答"; padding: .05rem .7rem; border-radius: 999px; background: var(--leaf); color: #fff; font-weight: 700; }

/* ── Closing ───────────────────────────────────────────────────────────── */

.s-end { flex-direction: row; align-items: center; gap: 5rem; }
.end-main { flex: 1; display: grid; gap: 1.8rem; }
.end-main h2 { font-size: 4.4rem; }
.todo { display: grid; gap: 1rem; }
.todo li { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.5rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); font-size: var(--fs-body); }
.todo b { width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--persimmon-ink); font: 700 1.5rem/1 var(--f-hand); }
.invite { padding: 1.2rem 1.6rem; border-radius: var(--radius); background: var(--bubble); color: var(--leaf-text); font: 700 var(--fs-body)/1.6 var(--f-hand); }
.end-side { width: 38rem; flex: none; display: grid; gap: 2rem; justify-items: center; }
.follow-big { flex-direction: column; align-items: stretch; gap: 1.2rem; width: 100%; rotate: 1.2deg; }
.follow-big .follow-title { margin: 0; }
.follow-big .follow-item .qr { width: 10rem; height: 10rem; }
.follow-site { padding-top: 1rem; border-top: 1.5px dashed var(--rule); }
.thanks { font-size: 4.2rem; }

/* ── Overlays (sized in px: they live outside the scaled canvas) ───────── */

.mtop, .mnav { display: none; }

.ask-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(46, 35, 28, .5);
  font-size: 16px;
}
.ask-dialog::backdrop { background: rgba(46, 35, 28, .45); backdrop-filter: blur(3px); }
.ask-dialog form { display: grid; gap: 12px; padding: 22px; }
.ask-dialog h3 { font-size: 24px; }
.ask-about { font-size: 14px; color: var(--leaf-text); font-weight: 700; }
.ask-dialog textarea { width: 100%; resize: vertical; min-height: 120px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--rule); background: #fff; font: 17px/1.6 var(--f-body); color: var(--ink); }
.ask-dialog textarea:focus { outline: none; border-color: var(--persimmon); box-shadow: 0 0 0 4px rgba(226, 112, 58, .18); }
.ask-error { min-height: 1em; font-size: 14px; color: var(--persimmon-ink); }
.ask-error:empty { display: none; }
.ask-foot { display: flex; align-items: center; gap: 10px; }
.ask-count-chars { margin-right: auto; font: 13px var(--f-mono); color: var(--faint); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 2px solid transparent; font: 700 16px/1 var(--f-body); }
.btn-primary { background: var(--persimmon-text); color: #fff; box-shadow: 0 3px 0 #8a3b14; }
.btn-primary:disabled { opacity: .6; }
.btn-soft { background: #fff; border-color: var(--rule); }

.qr-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(251, 245, 236, .94); }
.qr-overlay[hidden] { display: none; }
.qr-overlay-card { display: grid; gap: 16px; justify-items: center; padding: 28px; border-radius: 32px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.qr-overlay-card .qr { width: min(70vh, 80vw); height: min(70vh, 80vw); }
.qr-overlay-card p { display: grid; gap: 4px; }
.qr-overlay-card b { font: 700 clamp(24px, 4vh, 40px)/1.3 var(--f-hand); color: var(--persimmon-ink); }
.qr-overlay-card small { font: 600 clamp(14px, 2vh, 20px)/1.4 var(--f-mono); color: var(--muted); }

.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 3vh 3vw; background: rgba(46, 35, 28, .82); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 94vh; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); background: #fff; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; translate: -50% 20px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font: 500 15px/1.4 var(--f-body); opacity: 0; pointer-events: none; transition: opacity .25s, translate .35s var(--spring); max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; translate: -50% 0; }

.hud { position: fixed; right: 16px; top: 16px; z-index: 50; min-width: 260px; padding: 14px 16px; border-radius: 18px; background: rgba(46, 35, 28, .92); color: #fbe7d6; font: 14px/1.5 var(--f-body); box-shadow: var(--shadow); }
.hud[hidden] { display: none; }
.hud b { color: #fff; font: 700 28px/1.1 var(--f-mono); }
.hud .hud-bar { height: 6px; margin: 8px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.hud .hud-bar i { display: block; height: 100%; background: #7fc59a; }
.hud.over .hud-bar i { background: #f4ac81; }
.hud small { color: #d9b79c; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Mobile: slides become scrolling pages ─────────────────────────────── */

@media (max-width: 860px), (max-height: 520px) {
  html { font-size: 16px; }
  :root {
    --fs-hero: 2.25rem;
    --fs-title: 1.62rem;
    --fs-sub: 1.15rem;
    --fs-body: 1rem;
    --fs-small: .93rem;
    --fs-tiny: .8rem;
    --s1: .3rem;
    --s2: .55rem;
    --s3: .85rem;
    --s4: 1.1rem;
    --s5: 1.3rem;
    --radius: 1.1rem;
  }
  body { overflow: auto; background: var(--cream); }
  .only-mobile { display: block; }
  .stage { width: auto; height: auto; margin: 0; overflow: visible; box-shadow: none; background: none; }
  .deck { position: static; }
  .slide, .s-intro, .s-cover, .s-qa, .s-end { position: relative; inset: auto; flex-direction: column; align-items: stretch; gap: var(--s4); padding: 4.6rem 1.1rem 7.2rem; min-height: 100dvh; }
  .slide.is-active { animation-duration: .3s; }
  .slide::before { background-size: 22px 22px; }
  .foot { display: none; }

  .mtop {
    position: fixed; left: 0; right: 0; top: 0; z-index: 30;
    display: flex; align-items: center; gap: .6rem;
    height: 3.4rem; padding: 0 .9rem;
    background: rgba(251, 245, 236, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1.5px dashed var(--rule);
    font-size: .85rem;
  }
  .mtop .mark { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
  .mtop-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
  .mtop-page { font: 600 .78rem/1 var(--f-mono); color: var(--faint); }
  .follow-toggle { font-size: .78rem; padding: .3rem .7rem; }

  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(251, 245, 236, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1.5px dashed var(--rule);
  }
  .mnav-btn { width: 3rem; height: 3rem; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--rule); background: #fff; }
  .mnav-btn:disabled { opacity: .35; }
  .mnav-ask {
    flex: 1; height: 3rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
    border: 0; border-radius: 999px; background: var(--persimmon-text); color: #fff;
    font: 700 1.05rem/1 var(--f-body); box-shadow: 0 3px 0 #8a3b14;
  }
  .mnav-count { min-width: 1.5rem; padding: .2rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: .8rem; }
  body.on-cover .mnav-ask { visibility: visible; }

  .cols, .tour, .io, .ba, .decide, .stat-row, .three-cards, .agenda, .points.two { grid-template-columns: 1fr; }
  .cols { gap: var(--s5); }
  .s-head { padding-right: 0 !important; }
  .slide:has(.sec-badge) .s-head { padding-top: 2.2rem; }
  .sec-badge { right: auto; left: 1.1rem; top: 4.2rem; padding: .3rem .8rem .3rem .3rem; font-size: .9rem; box-shadow: 0 0 0 .2rem #fff, var(--shadow-sm); }
  .sec-badge b { width: 1.8rem; height: 1.8rem; font-size: .9rem; }
  .sec-num { font-size: 7rem; right: 1rem; top: 3.6rem; }
  .eyebrow::before { width: 1.6rem; height: .7rem; }

  .cover-text { gap: 1rem; }
  .cover-qr { width: min(18rem, 80vw); align-self: center; }
  .cover-note { left: auto; right: -.5rem; bottom: -2.2rem; }
  .mobile-hello { padding: .8rem 1rem; border-radius: 1rem; background: var(--bubble); color: var(--leaf-text); font-weight: 700; font-size: .95rem; margin-top: 2rem; }
  .mark-lg { width: 3rem; height: 3rem; font-size: 1.5rem; }

  .intro-photo { width: min(15rem, 70vw); align-self: center; }
  .stickers { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .stickers b { font-size: 1.8rem; }
  .stickers.three { grid-template-columns: 1fr 1fr 1fr; gap: .7rem; }
  .stickers.three b { font-size: 1.35rem; }
  .follow { flex-wrap: wrap; gap: .8rem; padding: 1rem; }
  .follow-title { width: 100%; }
  .follow-item { flex: 1 1 10rem; padding: .7rem .9rem; border-radius: 1rem; background: var(--peach); }
  .follow-item .qr { display: none; }
  .follow-big { rotate: none; }

  .abcde-blocks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
  .abcde-blocks li { padding: .5rem; border-top-width: .3rem; }
  .abcde-blocks b { font-size: 1.4rem; }
  .abcde-blocks em { display: none; }

  .photo-pile { height: auto; display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .2rem 1rem; }
  .photo-pile .polaroid { position: static; flex: 0 0 75%; width: auto; scroll-snap-align: center; rotate: none; }
  .photo-pile .p1 figcaption { position: static; }

  .tour-tabs { display: flex; overflow-x: auto; gap: .5rem; padding-bottom: .3rem; }
  .tour-tabs button { flex: none; padding: .5rem .8rem; }
  .tour-tabs button[aria-selected="true"] { transform: none; }
  .tour-shot { rotate: none; }
  .tour-shot img { aspect-ratio: 16 / 10; }

  .fan, .fan-row { display: flex; justify-content: flex-start; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem .2rem 1rem; -webkit-overflow-scrolling: touch; }
  .fan > figure, .fan > figure.landscape { width: 72%; margin-left: 0 !important; rotate: none !important; translate: none !important; scroll-snap-align: center; }
  .fan > figure.landscape { width: 88%; }
  .shot.crop img { aspect-ratio: auto; }
  .tc-img { width: 8rem; }
  .fan-row > figure { width: 46%; }

  .io-ai { width: 5rem; height: 5rem; font-size: 1.5rem; justify-self: center; }
  .io-ai .icon { width: 1.4rem; height: 1.4rem; }
  .io-ai::before, .io-ai::after { display: none; }
  .io-in li:nth-child(even) { translate: none; }
  .flow { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .flow li::after { display: none; }
  .chain-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .gates { grid-template-columns: 1fr 1fr; }
  .evo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .evo li:nth-child(2)::after { display: none; }
  .ba-arrow { rotate: 90deg; justify-self: center; }
  .phone { width: min(14rem, 70vw); }
  .phone figcaption { position: static; translate: none; margin: .6rem auto 0; color: #fbe7d6; }
  .cf-arrow { width: 3rem; height: 2.4rem; }
  .quote.big { font-size: 1.15rem; }
  .three-cards li { rotate: none !important; padding: 1.2rem; }
  .tc-num { font-size: 2.2rem; }
  .qd-item { grid-template-columns: auto auto 1fr; }
  .qd-price { grid-column: 3; justify-self: start; }
  .qd-item .qd-name { grid-column: 3; }
  .qd-code { grid-row: 1 / span 2; grid-column: 2; }
  .qd-item input { grid-row: 1 / span 2; }

  .s-qa .qa-side { width: auto; }
  .qa-side h2 { font-size: 2rem; }
  .qa-qr { display: none; }
  .qa-board { padding: .8rem; border-radius: 1.3rem; min-height: 50vh; }
  .qa-list { overflow: visible; }
  .q { grid-template-columns: 1fr; }
  .q-side { grid-row: auto; grid-column: auto; flex-direction: row; align-items: center; justify-content: space-between; }

  .end-side { width: auto; }
  .end-main h2 { font-size: 1.62rem; }
  .thanks { font-size: 2rem; }

  .s-cover .qr-card, .s-qa .qr-card { rotate: none; }
}