/* Minu — visual rules: docs/DESIGN.md (v2.1). Motion spec: docs/plans/minu-new-web-build-2026-10-13.md §3. */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("/assets/fonts/pretendard-400.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap; src: url("/assets/fonts/pretendard-500.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url("/assets/fonts/pretendard-600.woff2") format("woff2"); }
/* Saira wdth 125 / wght 600 static subset (README «글꼴»); block so the centred wordmark never reflows */
@font-face { font-family: "Saira Minu"; font-weight: 600; font-display: block; src: url("/assets/fonts/saira-minu.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --lav-hero: radial-gradient(64.38% 210.53% at 35.62% 50%, #DFE1F0 0%, #AEB1CC 100%);
  --lav-soft: radial-gradient(64.38% 210.53% at 35.62% 50%, #F5F6FA 0%, #E7E8F0 100%);
  --blue: #2563EB; --red: #E11D48; --ink: #171718; --bar: #333333;
  --graphite: #60646C; --slate: #3A3D45; --muted: #8E8E93; --mist: #B9BBC6; --frost: #E5E7EB;
  --rule: rgba(23,23,24,.2); --rule-soft: rgba(23,23,24,.12);
  --font: Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Hiragino Sans", "PingFang SC", "Noto Sans CJK JP", sans-serif;
  --display: "Saira Minu", Pretendard, sans-serif;
  --page: 1312px; --gutter: clamp(20px, 4vw, 64px); --section: clamp(72px, 9vw, 136px);
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 360px; /* below the smallest common phone the layout stops shrinking; the page scrolls sideways instead */ margin: 0; background: #E7E8F0; color: var(--ink); font-family: var(--font); font-size: 17px; line-height: normal; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
/* reveal starts 32px off to the side; clip so it never widens the page */
main { overflow-x: hidden; overflow-x: clip; } /* hidden: Safari < 16 has no clip */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 60; background: #fff; padding: 8px 12px; }
.num { font-family: var(--display); font-weight: 600; font-stretch: 125%; }
.sub { color: var(--graphite); line-height: 1.65; } /* body is line-height normal like the canvas; long copy sets 1.65 */
[id] { scroll-margin-top: 64px; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; height: 64px; background: var(--bar); padding: 0 24px; display: flex; align-items: center; gap: 32px; }
.bar .home { display: flex; }
.bar nav { display: flex; gap: 24px; }
.bar nav a, .bar .lang a { color: var(--mist); text-decoration: none; font-size: 16px; }
.bar nav a:hover, .bar .lang a:hover { color: #fff; }
.bar .end { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.bar .lang { display: flex; gap: 6px; color: var(--mist); font-size: 16px; }
.bar .lang [aria-current] { color: #fff; }
.pill { display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0 28px; border-radius: 9999px; background: #fff; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; border: 0; }
.bar .pill { height: auto; padding: 8px 18px; }

/* ---------- hero (cover). Desktop numbers are the 1440×1136 canvas values in cqw/% so the cover scales as one piece. ---------- */
.hero { position: relative; container-type: inline-size; overflow: hidden; background: var(--lav-hero); color: #fff; aspect-ratio: 1440 / 1136; }
.hero .type { position: absolute; left: 50%; top: 1.25cqw; translate: -50% 0; z-index: 2; }
.hero h1 { font-weight: 600; }
.wordmark { display: block; font-family: var(--display); font-stretch: 125%; font-size: 22.083cqw; line-height: .9; white-space: nowrap; }
/* Saira's M has a left side bearing of 31px at 318px — the lines start at the M's ink edge */
.hero .lines { display: block; padding-left: 2.153cqw; font-size: clamp(15px, 1.458cqw, 21px); font-weight: 600; line-height: 1.27; letter-spacing: -.01em; }
.hero h1 .lines { margin-top: -.42cqw; }
.hero .bg { z-index: 0; object-position: 50% 50%; } /* hero video + its first-frame poster: background and person in one layer, under the copy (2) and trust line (3) */
.hero .cta { position: absolute; left: 18.75%; bottom: 4.58%; z-index: 2; display: flex; gap: 14px; }
.glass { position: absolute; left: min(70.83%, calc(100% - 344px)); top: 54.58%; width: 320px; z-index: 2; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 8px; }
.glass .top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.glass .top::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.glass .stamp { margin-left: auto; font-weight: 500; }
.glass .line { min-height: 72px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -.12em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero .trust { position: absolute; right: 24px; bottom: 4.58%; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.hero .trust p { font-size: 13px; font-weight: 500; text-align: right; line-height: 1.6; }
.pause { display: inline-flex; align-items: center; gap: 10px; height: 45px; padding: 0 22px; border-radius: 9999px; background: transparent; border: 1px solid rgba(255,255,255,.75); font-size: 15px; font-weight: 500; }
.ico { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
html[data-paused] .ico { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.pause.dark { color: var(--ink); border-color: var(--ink); }
.pause-fixed { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(0,0,0,.18); display: none; align-items: center; justify-content: center; }
.pause-fixed.on { display: inline-flex; }

/* ---------- paper sections ---------- */
.paper { background: var(--lav-soft); padding: var(--section) var(--gutter); }
.wrap { max-width: var(--page); margin: 0 auto; }
.kicker { display: flex; align-items: baseline; gap: 16px; padding-top: 16px; border-top: 1px solid var(--rule); margin-bottom: clamp(40px, 5vw, 72px); font-size: 14px; }
.kicker .n { font-size: 14px; letter-spacing: .06em; }
.kicker .t { font-weight: 600; color: var(--graphite); }
.kicker .mark { margin-left: auto; font-size: 12px; letter-spacing: .14em; color: var(--graphite); }
h2 { font-size: clamp(32px, 3.6vw, 52px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
figcaption { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(23,23,24,.14); font-size: 13px; line-height: 1.5; color: var(--graphite); }
.panel { background: var(--lav-hero); border-radius: 4px; position: relative; overflow: hidden; }

/* statement */
.statement { padding-top: clamp(112px, 13vw, 200px); padding-bottom: clamp(80px, 9vw, 136px); }
.statement .big { grid-column: 1 / span 11; font-size: clamp(36px, 5vw, 72px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.statement .by { grid-column: 8 / span 5; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: var(--graphite); }

/* 01 minutes */
.minutes .text { grid-column: 1 / span 4; align-self: start; display: flex; flex-direction: column; gap: 20px; } /* top, like 05: the headline is read before the figure */
.minutes figure { grid-column: 6 / span 7; }
.minutes .stage { position: relative; padding-bottom: 48px; }
/* canvas figure 1: a close-up iPhone corner (drawn in CSS; the canvas used a reference photo that is not shipped) + the Android phone */
.shot { position: relative; width: 68%; aspect-ratio: 760 / 1129; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #C9CBD9 0%, #C2C4D2 28%, #9C9EAA 58%, #5A5C67 100%); }
.shot .body { position: absolute; left: 14.2%; top: 18.8%; right: -20%; bottom: -20%; background: #0B0B0C; border: 3px solid #DCDDE3; border-top-left-radius: 17.5% 12.3%; }
.shot .screen { position: absolute; left: 18.9%; top: 22%; right: 0; bottom: 0; border-top-left-radius: 17% 11.9%; /* concentric with the bezel: ≈71px circle at 1440, bezel 24px all round (the canvas 21.7%·9.5%/8% fit a photo, not a CSS bezel) */ overflow: hidden; background: #fff; }
.shot .screen img { width: 135%; max-width: none; display: block; }
.shot .island { position: absolute; left: 54.2%; top: 24.1%; width: 33.3%; height: 6.6%; border-radius: 9999px; background: #0B0B0C; }
.android { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 9 / 19; background: #171718; border-radius: 36px; padding: 9px; }
.android img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px; display: block; }

/* 02 speed spread */
.speed { background: var(--lav-hero); }
.speed .kicker .t, .speed .kicker .mark { color: var(--slate); }
.speed .big { font-size: clamp(120px, 24vw, 360px); line-height: .9; color: #fff; white-space: nowrap; margin-left: -.04em; }
.speed .big .unit { font-family: var(--font); font-stretch: 100%; font-size: .34em; margin-left: .1em; }
.speed .grid { margin-top: clamp(28px, 3vw, 48px); align-items: end; }
.speed .text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 16px; }
.speed .note { font-size: 14px; line-height: 1.6; color: var(--slate); }
.live { grid-column: 8 / span 5; border: 1px solid rgba(23,23,24,.22); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.live .top { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.live .listen { display: inline-flex; align-items: center; gap: 6px; animation: pulse 1.6s ease-in-out infinite; } /* listening: always on; dot and label dim together, like «transcribing» */
.live .listen::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.live .write { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); opacity: .42; transition: opacity .15s; } /* right next to the wave: voice → text reads as one group, and the 0.2 s lag is seen at a glance */
.live .write::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.live .write.on { opacity: 1; } /* transcribing: on 0.2 s after the voice, off 0.2 s after it */
@keyframes pulse { 50% { opacity: .42; } } /* same low point as «transcribing» off */
.wave { height: 28px; display: inline-flex; align-items: center; gap: 4px; }
.wave i { width: 4px; height: 28px; border-radius: 9999px; background: linear-gradient(90deg, #849AE3, #8D73E7 38%, #D48EEC 68%, #5F6CE1) 0 0 / 52px 100%; scale: 1 .25; animation: wave-idle 1.6s ease-in-out infinite; } /* idle: still listening, small motion; colour = the favicon gradient (#ic), one sweep across all 7 bars */
.wave i:nth-child(2), .wave i:nth-child(6) { animation-delay: -.15s; } .wave i:nth-child(3), .wave i:nth-child(5) { animation-delay: -.3s; } .wave i:nth-child(4) { animation-delay: -.45s; }
.wave i:nth-child(2) { background-position-x: -8px; } .wave i:nth-child(3) { background-position-x: -16px; } .wave i:nth-child(4) { background-position-x: -24px; } .wave i:nth-child(5) { background-position-x: -32px; } .wave i:nth-child(6) { background-position-x: -40px; } .wave i:nth-child(7) { background-position-x: -48px; }
.wave.on i { animation-name: wave; animation-duration: .9s; }
@keyframes wave { 0%, 100% { scale: 1 .25; } 50% { scale: 1 1; } }
@keyframes wave-idle { 0%, 100% { scale: 1 .15; } 50% { scale: 1 .32; } }
.live ol { list-style: none; margin: 0; padding: 0; min-height: 228px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.live li { display: flex; flex-direction: column; gap: 4px; }
.live li.dim { opacity: .45; }
.live .t { font-size: 12px; color: var(--slate); }
.live .a { font-size: 17px; line-height: 1.5; }
.live .caret { background: var(--blue); }

/* 03 scenes: numbered spreads, image 7 cols + text 4 cols, alternating */
.scenes h2 { margin-bottom: clamp(40px, 5vw, 72px); }
.spread { align-items: center; padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--rule-soft); }
.spread .media { grid-column: 1 / span 7; }
.spread .text { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 18px; }
.spread.flip .media { grid-column: 6 / span 7; grid-row: 1; }
.spread.flip .text { grid-column: 1 / span 4; grid-row: 1; }
.spread .no { display: flex; align-items: flex-start; gap: 6px; line-height: .9; }
.spread .no b { font-weight: 600; font-size: clamp(64px, 7vw, 104px); }
.spread .no small { font-size: 14px; letter-spacing: .06em; color: var(--graphite); padding-top: 6px; }
.spread h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.spread .text p { color: var(--graphite); line-height: 1.65; }
.spread .text .no { color: var(--ink); line-height: .9; } /* the numeral sits in a p; canvas: ink, only «/04» is graphite */
.spread .panel { aspect-ratio: 4 / 3; }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.photo video { position: absolute; inset: 0; }
video[data-src] { opacity: 0; } video[data-src].on { opacity: 1; } /* the still img under it shows until the video really plays */
/* app-screen mocks inside a panel */
.mock { position: absolute; top: 13%; bottom: 0; left: 6%; width: 50%; background: #171718; border-radius: 32px 32px 0 0; padding: 8px 8px 0; }
.mock .screen { height: 100%; background: #fff; border-radius: 24px 24px 0 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 0; color: #1D1D1F; }
.mock .status { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; }
.mock .status i { width: 52px; height: 14px; border-radius: 9999px; background: #0B0B0C; }
.mock .head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.mock .head .aa { margin-left: auto; font-size: 10px; font-weight: 700; }
.mock .meta { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.mock .live-chip { flex: none; white-space: nowrap; background: #F2F2F7; border-radius: 9999px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 3px; }
.mock .live-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.mock .utt { display: flex; flex-direction: column; gap: 2px; }
.mock .utt.dim { opacity: .45; }
.mock .who { font-size: 9px; } .mock .who b { color: var(--blue); font-weight: 600; }
.mock .who span { color: #8E8E93; }
.mock .big-line { font-size: 12px; font-weight: 600; line-height: 1.4; }
.mock .small-line { font-size: 10px; line-height: 1.4; color: #6E6E73; }
.mark-n { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 9px; font-weight: 700; vertical-align: 1px; }
.float { position: absolute; z-index: 2; background: #fff; border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(23,23,24,.35); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--slate); }
.legend { right: 4%; top: 34%; width: 38%; }
.legend span { display: flex; gap: 6px; } .legend b { flex: none; color: var(--ink); font-weight: 600; } /* body overflow-wrap:anywhere split «Bold» into «Bol/d» inside the flex row */
.legend .mark-n { flex: none; width: 16px; height: 16px; margin: 0; font-size: 10px; }
.preset .mock { top: 9%; width: 46%; }
.preset .field-label { font-size: 10px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips span { font-size: 10px; font-weight: 500; border-radius: 9999px; padding: 3px 8px; background: #F2F2F7; color: var(--slate); }
.chips .on { background: var(--blue); color: #fff; }
.chips .add { color: var(--blue); font-weight: 600; background: none; border: 1px dashed var(--blue); padding: 2px 8px; }
.pairs { display: flex; flex-direction: column; gap: 5px; }
.pairs div { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.pairs span { flex: 1; background: #F5F5F7; border-radius: 8px; padding: 6px 9px; }
.pairs i { font-style: normal; color: #8E8E93; }
.add-link { align-self: flex-start; font-size: 10px; font-weight: 600; color: var(--blue); }
.caption-card { right: 4%; bottom: 4%; width: 42%; gap: 4px; } /* left edge 2% right of the phone, same as the 02 legend */
.caption-card .who { line-height: normal; font-size: 11px; color: #8E8E93; } .caption-card .who b { color: var(--blue); font-weight: 600; }
.caption-card .ko { font-size: 14px; color: #1D1D1F; } .caption-card .en { font-size: 13px; color: #6E6E73; }
.caption-card .en b { color: var(--blue); font-weight: 600; }

/* 04 languages */
.global .grid { align-items: end; }
.global h2 { grid-column: 1 / span 6; }
.global .sixty { grid-column: 8 / span 5; display: flex; align-items: baseline; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--graphite); }
.global .sixty b { flex: none; white-space: nowrap; font-weight: 600; font-size: clamp(88px, 10vw, 152px); line-height: .9; color: var(--ink); }
.langs { margin: clamp(48px, 6vw, 88px) 0 0; padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--rule); font-size: clamp(30px, 4.6vw, 72px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.langs i { font-style: normal; color: var(--mist); }
.langs .more { color: var(--muted); }

/* 05 mirroring */
.mirror .head { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; margin-bottom: clamp(40px, 5vw, 72px); }
.steps { grid-column: 1 / span 4; height: 760px; display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); list-style: none; margin: 0; padding: 0; }
.steps li { flex: 1; display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--rule); }
.steps .num { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.steps h3 { font-size: 19px; font-weight: 600; }
.steps p { font-size: 15px; line-height: 1.6; color: var(--graphite); }
.mirror figure { grid-column: 6 / span 7; }
.mirror .panel { height: 760px; }
.phone2 { position: absolute; width: 300px; height: 620px; transform: scale(.85); /* transform, not scale: the reveal owns scale */ background: #0B0B0C; border-radius: 46px; padding: 10px; }
.phone2.host { left: 32px; top: 32px; transform-origin: top left; }
.phone2.guest { right: 32px; top: 190px; transform-origin: top right; border-radius: 40px; }
.phone2 .screen { width: 100%; height: 100%; background: #fff; border-radius: 37px; overflow: hidden; display: flex; flex-direction: column; color: #1D1D1F; }
.phone2.guest .screen { border-radius: 31px; }
.phone2 .sb { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font-size: 13px; font-weight: 600; }
.phone2 .sb i { width: 84px; height: 24px; border-radius: 9999px; background: #0B0B0C; }
.phone2 .sb s { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid #1D1D1F; }
.phone2.guest .sb { padding: 12px 20px 4px; font-size: 12px; font-weight: 400; }
.phone2.guest .sb i { width: 10px; height: 10px; } .phone2.guest .sb s { width: 8px; height: 12px; border: 0; border-radius: 2px; background: #1D1D1F; }
.rec { display: flex; align-items: baseline; gap: 8px; padding: 14px 18px 12px; border-bottom: 1px solid var(--frost); }
.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); align-self: center; }
.rec b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.rec span { font-size: 11px; color: #6E6E73; } .rec .left { margin-left: auto; }
.cap-head { display: flex; align-items: center; gap: 14px; padding: 10px 16px 12px; border-bottom: 1px solid var(--frost); font-size: 17px; font-weight: 600; }
.cap-head .aa { margin-left: auto; font-size: 12px; font-weight: 700; }
.cap-meta { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; font-size: 11px; font-weight: 600; }
.cap-meta .live-chip { font-weight: 400; background: #F2F2F7; border-radius: 9999px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px; }
.cap-meta .live-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.feed { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 12px 16px; list-style: none; margin: 0; }
.feed li { display: flex; flex-direction: column; gap: 3px; }
.feed li.dim { opacity: .45; }
.feed .who { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.feed .badge { width: 18px; height: 18px; border-radius: 50%; background: #E8F0FE; color: var(--blue); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.feed .name { color: var(--blue); font-weight: 600; } .feed .time { color: #8E8E93; }
.feed .big-line { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.feed .small-line { font-size: 13px; line-height: 1.45; color: #6E6E73; }
.feed .caret { background: var(--blue); }
.controls { display: flex; justify-content: space-around; align-items: center; padding: 12px 16px 22px; border-top: 1px solid var(--frost); font-size: 10px; }
.controls span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.controls i { width: 40px; height: 40px; border-radius: 50%; background: #F2F2F7; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; }
.controls .stop { width: 52px; height: 52px; background: var(--red); }
.controls .stop::after { content: ""; width: 14px; height: 14px; border-radius: 3px; background: #fff; }
.controls .pz::after { content: ""; width: 9px; height: 12px; border-inline: 3px solid #1D1D1F; }
.speak { padding: 10px 14px 18px; border-top: 1px solid var(--frost); display: flex; flex-direction: column; gap: 6px; }
.speak b { background: var(--blue); color: #fff; border-radius: 14px; padding: 12px; text-align: center; font-size: 14px; font-weight: 600; }
.speak b.on { background: var(--red); }
.speak span { font-size: 10px; color: #6E6E73; text-align: center; }
.link-flow { position: absolute; left: 24px; bottom: 28px; width: 168px; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.82); box-shadow: 0 4px 16px rgba(23,23,24,.08); font-size: 13px; color: var(--slate); }
.link-flow b { align-self: flex-start; font-weight: 600; color: var(--ink); border: 1px solid rgba(23,23,24,.4); border-radius: 9999px; padding: 6px 14px; }
.link-flow .line { position: relative; height: 8px; }
.link-flow .line::before { content: ""; position: absolute; inset: 3px 0 auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(23,23,24,.35) 0 6px, transparent 6px 12px); }
.link-flow .line::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: flow 1.6s linear infinite; }
@keyframes flow { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

/* 06 records */
.records h2 { margin-bottom: clamp(48px, 6vw, 88px); }
.stat { grid-column: span 4; padding-top: 20px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 12px; }
.stat .num { font-size: clamp(72px, 8vw, 120px); line-height: .9; color: var(--ink); }
.stat .num small { font-family: var(--font); font-stretch: 100%; font-size: .34em; margin-left: .08em; }
.stat h3 { font-size: 22px; font-weight: 600; }
.stat p { font-size: 16px; line-height: 1.65; color: var(--graphite); }

/* 07 plans */
.plans h2 { margin-bottom: 48px; }
.plan { grid-column: span 4; border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.plan.pro { border-top-width: 4px; padding-top: 21px; }
.plan .name { display: flex; align-items: center; justify-content: space-between; }
.plan h3 { font-size: 24px; font-weight: 600; }
.plan .badge { border: 1px solid var(--ink); border-radius: 9999px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.plan .for { font-size: 16px; color: var(--graphite); margin-top: -12px; }
.plan .price { font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--graphite); letter-spacing: 0; margin-left: 8px; }
.plan dl { margin: 0; font-size: 16px; }
.plan dl div { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--frost); }
.plan dt { color: var(--graphite); } .plan dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.plans .fine { margin-top: 48px; font-size: 15px; line-height: 1.6; color: var(--graphite); max-width: 760px; }

/* 08 faq */
.faq .grid { align-items: start; }
.faq h2 { grid-column: 1 / span 4; }
.faq .list { grid-column: 5 / span 8; border-bottom: 1px solid var(--frost); }
.faq details { border-top: 1px solid var(--frost); padding: 24px 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; font-size: 19px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-stretch: 125%; font-size: 20px; line-height: 1; color: var(--graphite); }
.faq details[open] summary::after { content: "−"; font-family: var(--font); }
.faq details p { margin-top: 12px; line-height: 1.65; color: var(--graphite); }

/* band */
.band { position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; padding: 80px var(--gutter); background: linear-gradient(135deg, #3A3D52 0%, #171718 100%); color: #fff; }
/* photo layer behind mockups and the banner copy (alt=""); the demo backgrounds come pre-defocused, no filter */
.bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 85% 50%; }
.band .bg { object-position: 70% 50%; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,16,28,.72) 0%, rgba(14,16,28,.42) 55%, rgba(14,16,28,0) 100%); } /* darker than the canvas: the I1 photo has a bright wall behind the copy (text ≥ 4.5:1) */
.band .wrap { position: relative; z-index: 2; width: 100%; max-width: 1184px; display: flex; flex-direction: column; gap: 24px; }
.band h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1.15; max-width: 640px; }
.band p { font-size: 18px; line-height: 1.6; }
.band .stores { line-height: normal; display: flex; gap: 12px; flex-wrap: wrap; }
.band .stores span { height: auto; padding: 14px 28px; }

/* footer (legal block kept from minu-web) */
footer { background: var(--ink); color: var(--mist); padding: 64px var(--gutter) 48px; font-size: 14px; line-height: 1.6; }
footer .wrap { max-width: 1184px; display: flex; flex-direction: column; gap: 32px; }
footer .cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
footer .cols > div { flex: 1 1 160px; }
footer h2 { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0; margin-bottom: 10px; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
footer a { color: var(--mist); text-decoration: none; } footer a:hover { color: #fff; }
footer .biz, footer .base { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); }
footer .nw { white-space: nowrap; }

/* ---------- reveal (html.js only: without JS everything stays visible) ---------- */
html.js [data-reveal] { opacity: 0; translate: 0 32px; transition: opacity 1.8s var(--ease), translate 1.8s var(--ease), scale 1.8s var(--ease); transition-delay: calc(var(--i, 0) * 160ms); } /* 2× slower, user 2026-10-13 */
html.js [data-reveal="left"] { translate: -32px 0; }
html.js [data-reveal="right"] { translate: 32px 0; }
html.js [data-reveal="scale"] { translate: 0; scale: .94; }
html.js [data-reveal].is-in { opacity: 1; translate: 0; scale: 1; }
.hero .type, .hero .cta, .hero .glass, .hero .trust { animation: rise 2s var(--ease) both; }
.hero .cta, .hero .glass, .hero .trust { animation-delay: .6s; }
@keyframes rise { from { opacity: 0; translate: 0 24px; } }
.hero .type { animation-name: rise-c; }
@keyframes rise-c { from { opacity: 0; translate: -50% 24px; } }
html[data-paused] .caret, html[data-paused] .wave i, html[data-paused] .live .listen, html[data-paused] .link-flow .line::after { animation-play-state: paused; }
/* reduced motion, as in web/ (global.css): drop the movement (slide, zoom) only; fades, typing and the pause button stay */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { translate: 0; scale: 1; }
  @keyframes rise { from { opacity: 0; } }
  @keyframes rise-c { from { opacity: 0; translate: -50% 0; } }
}
@media print { html.js [data-reveal] { opacity: 1; translate: 0; scale: 1; } .pause, .pause-fixed { display: none; } }

/* 901–1140px: the 05 panel is too narrow for two phones at .85; shrink them so they do not overlap */
@media (min-width: 901px) and (max-width: 1140px) { .phone2 { transform: scale(.66); } }

/* ---------- ≤900px: single column, figure first ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .spread .media, .mirror figure, .minutes figure, .speed .live { order: -1; }
  .mirror .head { order: -2; }
  .bar nav { display: none; }
  .steps { height: auto; }
  .mirror .panel { height: 400px; }
  .phone2 { transform: scale(.52); }
  .phone2.host, .phone2.guest { top: 24px; }
  .phone2.host { left: 12px; } .phone2.guest { right: 12px; }
  .link-flow { display: none; }
  .faq .list { border-bottom: 1px solid var(--frost); }
}
/* mobile cover (390×788 canvas values) */
@media (max-width: 600px) {
  .bar { height: 56px; padding: 0 16px; gap: 16px; }
  .bar .home svg { width: 28px; height: 28px; }
  .bar .end { gap: 14px; } .bar .lang { font-size: 14px; } .bar .lang a { font-size: 14px; } .bar .pill { font-size: 14px; padding: 7px 14px; }
  [id] { scroll-margin-top: 56px; }
  .hero { aspect-ratio: 390 / 788; }
  .hero .type { top: 2.56cqw; }
  .wordmark { font-size: 31.03cqw; }
  .hero .lines { padding-left: 3.08cqw; }
  .hero h1 .lines { margin-top: 4px; font-size: 22px; line-height: 1.3; }
  .hero p.lines { margin-top: 2px; font-size: 15px; line-height: 1.4; }
  .hero .bg { object-position: 46% 50%; } /* only 37% of the 4:3 frame shows: keep the person (29.8–65.4% across) in view */
  .glass { left: auto; right: 16px; top: 63.45%; width: 220px; border-radius: 16px; padding: 12px 14px; gap: 6px; }
  .glass .top { font-size: 11px; } .glass .line { min-height: 63px; font-size: 14px; }
  .hero .cta { left: 16px; right: 16px; bottom: 20px; gap: 10px; }
  .hero .cta .pill { height: 48px; flex: 1; padding: 0; } .hero .cta .pill + .pill { flex: 0 0 112px; }
  .hero .trust { right: 16px; bottom: 80px; gap: 12px; }
  .hero .trust p { font-size: 12px; }
  .hero .pause { height: 40px; padding: 0 16px; font-size: 14px; gap: 8px; } /* the 05 button keeps the canvas size */
  .spread .panel:not(.photo) { aspect-ratio: 4 / 5; }
  .spread .bg { object-position: 90% 50%; } /* keep the people on the right, beside the mockup */
  .spread .preset .bg { object-position: 76% 50%; } /* V2t is framed wider: 76% keeps the man's face right of the mockup and his pointing hand + the board inside the panel (both people cannot fit) */ /* canvas: only the app mockups go tall; photos stay 4:3 so all five people fit */
  .mock { width: 62%; }
  .preset .mock { width: 62%; }
  .legend { top: auto; bottom: 3%; width: 58%; }
  .caption-card { bottom: 3%; width: 58%; } /* same overlap with the phone as the 02 legend */
  .band::before { background: linear-gradient(180deg, rgba(14,16,28,.8) 0%, rgba(14,16,28,.66) 62%, rgba(14,16,28,.25) 100%); } /* the copy sits over the people here */
  .wide-only { display: none !important; }
}