/* Names follow EFFY-TOKEN-TABLE.md (--ds-*). Values copied from the Effy app
   apps/web/src/styles/tokens.css (light :root and .dark). Effy pink is the
   single accent; the app's blue accent, focus ring and agent palette are
   deliberately left out so the page has one hue. */
:root {
  --ds-palette-neutral-0: #FFFFFF;
  --ds-palette-neutral-ground: #F7F8F9;
  --ds-palette-neutral-50: #F7F7F7;
  --ds-palette-neutral-100: #EFEFEF;
  --ds-palette-neutral-200: #E4E4E4;
  --ds-palette-neutral-300: #D5D5D5;
  --ds-palette-neutral-600: #5D5D5D;
  --ds-palette-neutral-900: #1A1A1A;

  --ds-color-bg-canvas: var(--ds-palette-neutral-ground);
  --ds-color-bg-surface: var(--ds-palette-neutral-0);
  --ds-color-bg-sunken: var(--ds-palette-neutral-50);
  --ds-color-text-primary: #1A1A1A;
  --ds-color-text-secondary: #5D5D5D;
  --ds-color-text-tertiary: #727272;
  --ds-color-border-default: var(--ds-palette-neutral-200);
  --ds-palette-line-strong: var(--ds-palette-neutral-300);
  --ds-palette-bubble-theirs: color-mix(in srgb, var(--ds-color-text-primary) 6%, var(--ds-color-bg-surface));

  --ds-color-brand-primary: #C43A64;
  --ds-palette-pink-hover: #AD2E54;
  --ds-palette-on-pink: #FFFFFF;
  --ds-palette-pink-tint: color-mix(in srgb, var(--ds-color-brand-primary) 8%, var(--ds-color-bg-surface));
  --ds-palette-pink-line: color-mix(in srgb, var(--ds-color-brand-primary) 28%, var(--ds-color-bg-surface));
  --ds-color-focus-ring: var(--ds-color-brand-primary);

  --ds-font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "SF Pro Text", system-ui, sans-serif;
  --ds-type-caption-size: 12px;
  --ds-type-label-size: 13px;
  --ds-type-body-size: 14px;
  --ds-type-title-3-size: 16px;
  --ds-type-title-2-size: 20px;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 999px;
  --ds-shadow-md: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
  --ds-shadow-xl: 0 2px 6px rgb(0 0 0 / 0.04), 0 24px 64px -16px rgb(0 0 0 / 0.16);
  --ds-ease-standard: cubic-bezier(.16, 1, .3, 1);
  --ds-duration-base: 200ms;
  --ds-duration-page: 360ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ds-color-bg-canvas: #1B191D;
    --ds-color-bg-surface: #252228;
    --ds-color-bg-sunken: #1B191D;
    --ds-color-text-primary: #F5F2EF;
    --ds-color-text-secondary: #D1CBD5;
    --ds-color-text-tertiary: #9A94A3;
    --ds-color-border-default: #353139;
    --ds-palette-line-strong: #514B55;
    --ds-palette-bubble-theirs: color-mix(in srgb, var(--ds-color-text-primary) 8%, var(--ds-color-bg-surface));

    --ds-color-brand-primary: #EE93AD;
    --ds-palette-pink-hover: #F4A7BB;
    --ds-palette-on-pink: #1B191D;

    --ds-shadow-md: 0 1px 2px rgb(0 0 0 / 0.3);
    --ds-shadow-xl: 0 24px 64px -16px rgb(0 0 0 / 0.5);
  }
}

/* Effy landing, forked from the live Dash home (dash.eveos.one, out-v4c assets/v4c/home-polish.css, 2026-10-16).
   Same class names, grid, type scale, spacing and motion as Dash. Changes: Effy tokens (neutrals + one pink), the painted
   background is a CSS gradient in the brand pink, the app screenshots are HTML-drawn demo screens, a dark theme, and
   system fonts only. Motion: transform/opacity only; html.motion is never set under prefers-reduced-motion (motion.js). */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ink:var(--ds-color-text-primary); --ink-2:var(--ds-color-text-secondary); --ink-3:var(--ds-color-text-tertiary);
  --paper:#fff;
  --pink:var(--ds-color-brand-primary);
  /* The painting: one pink, light to deep. Same values in both themes for the hero; dark mode deepens them below. */
  --sky-1:#8F2447; --sky-2:#B0335B; --sky-3:#C43A64; --sky-4:#D9718F; --sky-5:#F1C4D1;
  --scrim:rgb(64 10 30 / .38);
  --shadow-l:0 30px 80px -20px rgb(0 0 0 / .32),0 12px 30px -12px rgb(0 0 0 / .22);
  --shadow-m:0 14px 36px -10px rgb(0 0 0 / .28);
  --font:var(--ds-font-sans);
  --cream:var(--ds-color-bg-canvas); --line:var(--ds-color-border-default); --card:var(--ds-color-bg-surface);
  --chrome-paper:var(--ds-color-bg-canvas);
}
@media (prefers-color-scheme:dark){
  :root{
    --sky-1:#3B1323; --sky-2:#561A33; --sky-3:#6E2240; --sky-4:#4A1C2E; --sky-5:#2A1D23;
    --scrim:rgb(0 0 0 / .4);
    --shadow-l:0 30px 80px -20px rgb(0 0 0 / .6),0 12px 30px -12px rgb(0 0 0 / .5);
    --shadow-m:0 14px 36px -10px rgb(0 0 0 / .55);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;word-break:keep-all;overflow-wrap:anywhere;font-family:var(--font);color:var(--paper);background:var(--sky-3);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#fff;color:#1A1A1A;padding:10px 14px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--ink);color:var(--ds-color-bg-surface);font-weight:800;font-size:17px;line-height:1}

/* Scene: Dash's hero. Dash fixes a painting behind the page; Effy paints the hero with CSS in the one pink.
   Static block, as in Dash's polish pass (no scroll pin). */
.scene{position:relative;overflow-x:clip;
  background:radial-gradient(ellipse 34% 22% at 16% 30%,color-mix(in srgb,var(--sky-5) 34%,transparent),transparent 70%),
    radial-gradient(ellipse 30% 18% at 86% 22%,color-mix(in srgb,var(--sky-5) 26%,transparent),transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%,color-mix(in srgb,var(--sky-4) 90%,transparent),transparent 70%),
    linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 34%,var(--sky-3) 70%,var(--sky-4) 100%)}
.scene::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 50% 22%,var(--scrim),transparent 70%)}
.pin{position:relative;overflow:hidden}
.copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(40px,6svh,72px) 20px 0}
.badge{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;
  background:rgb(255 255 255 / .16);border:1px solid rgb(255 255 255 / .38);font-size:14px;font-weight:600;
  box-shadow:0 8px 24px -10px rgb(0 0 0 / .35)}
.badge .mark{width:24px;height:24px;font-size:14px;background:#fff;color:#1A1A1A}
.h1wrap{position:relative;margin:22px 0 0;max-width:1180px;width:fit-content}
h1{margin:0;font-weight:800;letter-spacing:-.045em;line-height:1.12;font-size:clamp(40px,7.6vw,112px);
  text-shadow:0 2px 30px var(--scrim),0 1px 2px var(--scrim);text-wrap:balance}
h1 .ln{display:block}
.sub{margin:22px 0 0;max-width:34em;font-size:clamp(17px,1.6vw,21px);line-height:1.45;font-weight:500;
  text-shadow:0 1px 3px var(--scrim),0 1px 18px var(--scrim)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:28px}
.solid,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 24px;border-radius:14px;
  font-size:16px;font-weight:600;text-decoration:none;transition:transform .16s var(--ease-out),background-color .2s ease}
/* Dash's black App Store badge becomes Effy's primary: ink button, white type. */
.solid{color:#fff;background:#141214;box-shadow:var(--shadow-l)}
.ghost{color:#fff;background:rgb(40 6 20 / .5);border:1px solid rgb(255 255 255 / .55);box-shadow:var(--shadow-m)}
.ghost svg{width:16px;height:16px}
.solid:active,.ghost:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .ghost:hover{background:rgb(40 6 20 / .66)} .solid:hover{background:#000} }

/* Staggered fade-up entrance (CSS, before anything else loads). */
html.motion .rise{animation:rise .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms + 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Product window: Dash's tablet | phone | tablet becomes one desktop app window (Effy is a desktop app).
   Each window is laid out at a fixed design width and scaled whole with zoom, so on a phone it is the same
   window, smaller; never a phone frame. Traffic lights stay neutral: the page keeps one hue. */
.stage{position:relative;z-index:2;padding:48px 20px 36px}
.desk{position:relative;width:fit-content;margin:0 auto}
.desk>.demo-tag{position:absolute;z-index:5;right:18px;top:-14px}
.window{--ww:1040px;--wh:560px;--z:1;zoom:var(--z);width:var(--ww);margin:0;overflow:hidden;border-radius:14px;
  background:var(--ds-color-bg-surface);border:1px solid var(--line);box-shadow:var(--shadow-l),0 60px 140px -30px rgb(0 0 0 / .3);text-shadow:none}
.win-bar{position:relative;display:flex;align-items:center;height:38px;padding:0 14px;background:var(--ds-color-bg-sunken);border-bottom:1px solid var(--line)}
.lights{display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:999px;background:var(--ds-palette-line-strong)}
.win-title{position:absolute;left:50%;transform:translateX(-50%);color:var(--ink-2);font-size:12.5px;font-weight:600;white-space:nowrap}
.win-body{display:grid;grid-template-columns:210px minmax(0,1fr) 250px;height:var(--wh)}
.win-body>.ui{min-width:0;overflow:hidden;padding:16px 14px}
.win-side{background:var(--ds-color-bg-sunken);border-right:1px solid var(--line)}
.win-panel{border-left:1px solid var(--line)}
.win-main.ui{padding:16px 22px}
.answer{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px;max-width:440px}
.answer .bars{height:72px}
.stamp{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.win-req{--z:.84;--wh:500px}
.win-req .picker{margin-top:auto;max-width:280px}
.win-doc{--ww:820px;--wh:470px;--z:.7}
.win-doc .win-body{grid-template-columns:170px minmax(0,1fr) 230px}
.win-doc .ui-head{border:0;padding:0;font-size:18px;letter-spacing:-.02em}
.win-doc .bars{height:150px}
.cap{position:relative;z-index:3;margin:18px auto 0;max-width:40em;padding:0 20px;text-align:center;font-size:14px;font-weight:500;
  opacity:.95;text-shadow:0 1px 12px var(--scrim)}
#demo{scroll-margin-top:24px}

/* Demo tag: every HTML-drawn data block carries it. */
.demo-tag{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--ds-color-bg-surface);color:var(--ink);
  border:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.02em;box-shadow:0 6px 16px -8px rgb(0 0 0 / .35)}

/* HTML-drawn Effy screens (shared by all demo blocks). Effy app tokens, so they follow light/dark. */
.ui{background:var(--ds-color-bg-surface);color:var(--ink);font-size:12.5px;line-height:1.45;text-align:left;padding:14px 12px;
  display:flex;flex-direction:column;gap:10px;text-shadow:none}
:where(.ui) :where(p,ul,ol,dl,dd){margin:0;padding:0;list-style:none}
.ui-head{font-weight:700;font-size:13.5px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.ui-head small{font-weight:500;color:var(--ink-3);font-size:11px}
.ws{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px}
.ws small{display:block;font-weight:500;color:var(--ink-3);font-size:11px}
.ws-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ink);color:var(--ds-color-bg-surface);font-size:12px}
.side-group{color:var(--ink-3);font-size:11px;font-weight:600;margin-top:2px}
.side-list{display:flex;flex-direction:column;gap:1px}
.side-list li{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;color:var(--ink-2)}
.side-list li.on{background:var(--ds-palette-pink-tint);color:var(--pink);font-weight:700}
.count{margin-left:auto;font-size:10.5px;font-weight:700;padding:0 6px;border-radius:999px;background:var(--ds-color-bg-sunken);color:var(--ink-2)}
.agent{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:5px;background:var(--ds-color-bg-sunken);
  border:1px solid var(--line);color:var(--ink);font-size:10.5px;font-weight:800}
.thread{display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:8px}
.avatar{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:999px;background:var(--ds-color-bg-sunken);
  border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--ink)}
.agent-avatar{border-radius:7px}
.sender{font-weight:700;font-size:12px;display:flex;gap:6px;align-items:baseline}
.sender time{font-weight:500;color:var(--ink-3);font-size:10.5px}
.mention{color:var(--pink);font-weight:700}
.task-card{margin-top:6px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--ds-color-bg-surface)}
.ui>.task-card{margin-top:0}
.task-title{display:flex;justify-content:space-between;align-items:center;gap:6px;font-weight:700;font-size:12px}
.task-meta{color:var(--ink-3);font-size:11px;margin-top:2px}
.chip{display:inline-block;flex:none;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;
  background:var(--ds-color-bg-sunken);color:var(--ink-2);border:1px solid var(--line)}
.chip-accent{background:var(--ds-palette-pink-tint);color:var(--pink);border-color:var(--ds-palette-pink-line)}
.chip-accent-outline{background:transparent;color:var(--pink);border-color:var(--pink)}
.composer{margin-top:auto;padding:9px 11px;border:1px solid var(--line);border-radius:10px;color:var(--ink-2);background:var(--ds-color-bg-sunken)}
.composer-active{color:var(--ink);border-color:var(--pink);background:var(--ds-color-bg-surface)}
.notes li{padding:6px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.picker{border:1px solid var(--line);border-radius:10px;padding:4px;box-shadow:var(--ds-shadow-md);margin-top:auto}
.picker li{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:7px;color:var(--ink-2)}
.picker li.on{background:var(--ds-palette-pink-tint);color:var(--pink);font-weight:700}
.picker+.composer{margin-top:0}
.form-demo{display:flex;flex-direction:column;gap:8px}
.form-demo div{display:flex;flex-direction:column;gap:3px}
.form-demo dt{color:var(--ink-3);font-size:11px;font-weight:600}
.form-demo dd{padding:7px 9px;border:1px solid var(--line);border-radius:8px}
.ui-button{margin-top:auto;padding:9px;border-radius:9px;text-align:center;font-weight:700;background:var(--pink);color:var(--ds-palette-on-pink)}
.roster{display:flex;flex-direction:column}
.roster li{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line);font-weight:600}
.roster li:last-child{border-bottom:0}
.roster small{margin-left:auto;font-weight:500;color:var(--ink-3);font-size:11px}
.tabs-demo{display:flex;gap:4px;padding:3px;border-radius:9px;background:var(--ds-color-bg-sunken)}
.tabs-demo li{flex:1;text-align:center;padding:5px 4px;border-radius:7px;color:var(--ink-2);font-size:11px;font-weight:600;white-space:nowrap}
.tabs-demo li.on{background:var(--ds-color-bg-surface);color:var(--ink);box-shadow:var(--ds-shadow-md)}

/* Below the scene: Dash's long page on paper. */
.polish-home main{position:relative;z-index:1}
.polish-home .feature{display:block}
.polish-home .sky{padding-top:140px;background:linear-gradient(180deg,var(--sky-4) 0,var(--cream) 140px)}
.polish-home .sky,.polish-home .sec{color:var(--ink);background-color:transparent}
.polish-home .sec{background:var(--cream)}
.eyebrow{display:inline-block;margin:0 0 14px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-2)}
.sky h2,.sec h2,.sec .h2{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.05;font-size:clamp(34px,4.6vw,60px)}
.sec h2 em,.sec h3 em,.sec h4 em{font-style:normal}
.sec h2 em,.sec .h2 em{font-weight:400;color:var(--ink-3)}
.head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 40px;padding:0 clamp(18px,4vw,40px);margin:0 auto 34px;max-width:1200px}
.head .eyebrow{grid-column:1/-1;justify-self:start}
.head .aside{margin:0;max-width:22em;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.head.center{grid-template-columns:1fr;text-align:center;justify-items:center}
.head.center .eyebrow{justify-self:center}
.head.center .aside{margin-top:12px}
.note{margin:18px auto 0;text-align:center;color:var(--ink-3);font-size:13.5px}
.sec{padding:clamp(70px,10vw,120px) 0 0}

/* 1. Sky panel with floating screens (요청하기). */
.sky{padding:140px clamp(12px,3vw,32px) 0}
.sky-in{position:relative;overflow:hidden;max-width:1200px;margin:0 auto;border-radius:clamp(28px,4vw,48px);text-align:center;color:#fff;
  padding:clamp(56px,8vw,96px) 20px clamp(40px,5vw,60px);
  background:radial-gradient(ellipse 60% 30% at 18% 22%,color-mix(in srgb,var(--sky-5) 40%,transparent),transparent 70%),
    radial-gradient(ellipse 50% 26% at 84% 14%,color-mix(in srgb,var(--sky-5) 30%,transparent),transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%,var(--cream),transparent 70%),
    linear-gradient(180deg,var(--sky-2) 0%,var(--sky-3) 34%,var(--sky-4) 60%,var(--cream) 100%)}
.sky .eyebrow{background:rgb(255 255 255 / .18);border-color:rgb(255 255 255 / .55);color:#fff}
.sky h2.big{font-size:clamp(40px,6.4vw,92px);color:#fff;text-shadow:0 2px 24px var(--scrim)}
.sky .lede{margin:16px 0 0;font-size:clamp(17px,1.6vw,20px);font-weight:500;text-shadow:0 1px 10px var(--scrim)}
.float{position:absolute;margin:0;z-index:4;display:flex;flex-direction:column;align-items:center;width:clamp(96px,12vw,150px);border-radius:16px;
  background:var(--card);color:var(--ink);padding:14px 8px 10px;box-shadow:0 22px 50px -18px rgb(0 0 0 / .4)}
.big-agent{width:56px;height:56px;border-radius:14px;font-size:26px}
.float .chip{margin-top:9px;font-size:12px}
.float.f0{left:-140px;top:14%;rotate:-6deg}
.float.f1{right:-140px;top:6%;rotate:5deg}
.float.f2{left:-136px;bottom:8%;rotate:4deg}
.float.f3{right:-138px;bottom:14%;rotate:-4deg}
.sky .desk{margin-top:clamp(30px,5vw,56px)}
.sky .note{color:var(--ink-2);position:relative;z-index:5}
html.motion .float{animation:float var(--fd,5s) var(--ease-in-out) infinite alternate}
html.motion .float.f1{--fd:6s;animation-delay:-2s}
html.motion .float.f2{--fd:5.5s;animation-delay:-1s}
html.motion .float.f3{--fd:6.5s;animation-delay:-3s}
@keyframes float{from{transform:translateY(-6px)}to{transform:translateY(8px)}}

/* 2. Who (요청하기, continued): Dash's photo cards, here HTML-drawn demo cards with the words on a fade. */
.who-wrap{position:relative;max-width:1200px;margin:0 auto}
.who-wrap>.demo-tag{position:absolute;z-index:3;left:clamp(18px,4vw,40px);top:-14px}
.who-grid{list-style:none;margin:0;padding:0 clamp(18px,4vw,40px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.who-card{position:relative;overflow:hidden;min-width:0;border-radius:24px;background:var(--ds-color-bg-sunken);aspect-ratio:4/4.3;border:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgb(0 0 0 / .4)}
.who-art{position:absolute;inset:0 0 34%;display:grid;place-items:center;padding:18px}
.who-art .art-card{width:min(250px,86%);rotate:-2deg}
.who-card:nth-child(even) .who-art .art-card{rotate:2deg}
.who-txt{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 20px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--card) 82%,transparent) 42%,var(--card) 78%)}
.who-txt h4{margin:0;font-size:clamp(21px,2vw,26px);letter-spacing:-.025em;font-weight:700}
.who-txt h4 em{color:var(--pink)}
.who-txt p{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.45}

/* 3. Moments (근거 확인): parts of the deliverable next to the deliverable itself in the demo slot. */
.mom-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center;
  max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.mom-wrap>.demo-tag{position:absolute;z-index:3;left:clamp(18px,4vw,40px);top:-14px}
.mom-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.moment{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.q{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);
  font-size:15px;font-weight:600;box-shadow:0 8px 20px -14px rgb(0 0 0 / .4)}
.q::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--pink)}
.moment figure{margin:0;width:100%;background:var(--card);border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -26px rgb(0 0 0 / .4);border:1px solid var(--line)}
.mini{aspect-ratio:16/8;background:var(--ds-color-bg-sunken);display:grid;padding:18px;gap:6px}
.mini.sheet{grid-template-columns:repeat(3,1fr)}
.mini.sheet i{border-radius:4px;background:var(--card);border:1px solid var(--line)}
.mini.stamp{place-items:center}
.mini.stamp span{font-size:clamp(17px,1.8vw,22px);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.mini.lines{align-content:center}
.mini.lines i{display:block;height:9px;border-radius:9px;background:var(--line)}
.mini.lines i:nth-child(2){width:80%}
.mini.lines i:nth-child(3){width:55%}
.moment figcaption{padding:12px 16px 16px;display:flex;flex-direction:column;gap:3px}
.moment figcaption b{font-size:16px;letter-spacing:-.015em}
.moment figcaption span{color:var(--ink-2);font-size:14px;line-height:1.45}
.doc-kicker{color:var(--ink-3);font-size:11px;font-weight:700;letter-spacing:.02em}
.card-meta{color:var(--ink-3);font-size:11px}
.doc-line{font-size:13px;line-height:1.5}
.bars{display:flex;align-items:flex-end;gap:7px;height:110px;padding:10px;border-radius:12px;background:var(--ds-color-bg-sunken)}
.bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--ds-palette-line-strong)}
.bars i.up{background:var(--pink)}
.doc-label{font-weight:700;font-size:12px;margin-top:4px}
.sources{display:flex;flex-direction:column;gap:6px}
.sources li{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;font-weight:600}
.sources small{margin-left:auto;color:var(--ink-3);font-weight:500;font-size:10.5px}
.src-num{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:999px;background:var(--pink);color:var(--ds-palette-on-pink);font-size:10.5px;font-weight:800}

/* 4. How (누가 무엇을 보나): Dash's three step cards. */
.steps{list-style:none;margin:0 auto;max-width:1200px;padding:0 clamp(18px,4vw,40px);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{position:relative;background:linear-gradient(180deg,var(--ds-palette-pink-tint),var(--card) 70%);border:1px solid var(--line);border-radius:26px;padding:20px 22px 26px}
.num{display:block;width:12px;height:12px;border-radius:999px;background:var(--pink)}
.step-art{position:relative;height:280px;display:grid;place-items:center;margin:4px 0 18px}
.step-art>.demo-tag{position:absolute;right:0;top:-8px}
.art-card{width:min(240px,100%);border-radius:20px;border:1px solid var(--line);box-shadow:0 20px 40px -20px rgb(0 0 0 / .35)}
.step h3{margin:0;font-size:22px;letter-spacing:-.025em;color:var(--ink)}
.step p{margin:6px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.5}

/* 5. FAQ (누가 무엇을 보나, continued): Dash's details list, native open/close, no script. */
.faq{padding-bottom:clamp(70px,10vw,120px)}
.qa{max-width:760px;margin:0 auto;padding:0 clamp(18px,4vw,40px);display:grid;gap:10px}
.qa details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0 20px}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;font-weight:600;font-size:16.5px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:22px;font-weight:400;color:var(--ink-3);transition:transform .2s var(--ease-out)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{margin:0 0 18px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.faq .note a{color:var(--pink);font-weight:600;text-underline-offset:3px}

/* 6. Ending (access): the painting again behind huge type. */
.end{position:relative;overflow:hidden;color:#fff;padding:clamp(120px,14vw,170px) clamp(16px,4vw,40px) 0;
  background:linear-gradient(180deg,var(--cream) 0,transparent 100px),
    radial-gradient(50% 230px at 50% 260px,var(--scrim),transparent),
    linear-gradient(180deg,var(--sky-2) 0%,var(--sky-3) 60%,var(--sky-4) 100%)}
.end-in{max-width:1200px;margin:0 auto;text-align:center}
.end-sub{margin:0;font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;text-shadow:0 1px 2px var(--scrim),0 2px 10px var(--scrim),0 3px 32px var(--scrim)}
.end-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px}
.end-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.end-cta p{margin:0;font-size:15px;font-weight:600;text-shadow:0 1px 2px var(--scrim),0 1px 8px var(--scrim),0 2px 20px var(--scrim)}
.giant{margin:clamp(30px,5vw,60px) 0 0;font-size:clamp(96px,23vw,360px);line-height:.95;font-weight:800;
  letter-spacing:-.07em;color:#fff;text-shadow:0 10px 60px var(--scrim);white-space:nowrap}

/* Reveal on scroll (motion.js adds .in); without html.motion nothing is hidden. */
html.motion .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--rd,0) * 70ms)}
html.motion .rv.in{opacity:1;transform:none}

/* Chrome: Dash's paper header and footer. */
.polish-head,.polish-foot{box-sizing:border-box;position:relative;z-index:20;background:var(--chrome-paper);color:var(--ink);font:400 15px/1.5 var(--font);text-shadow:none}
.polish-head .chrome-in,.polish-foot .chrome-in{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
.polish-head .chrome-brand{display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.polish-head nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.polish-head a,.polish-foot a{color:inherit;text-decoration:none}
.polish-head a:hover,.polish-foot a:hover{text-decoration:underline;text-underline-offset:4px}
.polish-head .chrome-get{background:var(--ink);color:var(--ds-color-bg-surface);padding:9px 16px;border-radius:999px;white-space:nowrap;font-size:14px;font-weight:600}
.polish-head a:focus-visible,.polish-foot a:focus-visible,.polish-document main a:focus-visible,.sec :focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.polish-foot{padding:14px 0 max(18px,env(safe-area-inset-bottom))}
.polish-foot .chrome-in{flex-wrap:wrap;justify-content:space-between;font-size:14px}
.polish-foot nav{display:flex;flex-wrap:wrap;gap:8px 18px}

/* Guide and privacy: Dash's document pages. */
.polish-document{background:var(--chrome-paper);color:var(--ink)}
.polish-document main{max-width:800px;margin:0 auto;padding:24px 24px 64px}
.doc h1{font-size:clamp(32px,5vw,44px);text-shadow:none;letter-spacing:-.03em}
.doc p,.doc li{font-size:16px;line-height:1.6;color:var(--ink-2)}
.doc-steps{padding-left:1.3em;margin:24px 0}
.doc-steps li{margin:6px 0}
.doc .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.doc .solid{height:48px;font-size:15px;color:var(--ds-palette-on-pink);background:var(--pink);box-shadow:none}
.doc .text-link{color:var(--pink);font-weight:600;text-underline-offset:3px}

/* Window scale steps: each fits its column from the step's narrowest viewport (320 px at the last). */
@media (max-width:1439px){ .win-req{--z:.7} }
@media (max-width:1139px){
  .win-hero{--z:.8} .win-req{--z:.76} .win-doc{--z:.6}
  .float{display:none}
}
@media (max-width:1000px){
  .who-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .step-art{height:240px}
  .mom-wrap{grid-template-columns:1fr}
  .mom-wrap .window{justify-self:center}
  .win-doc{--z:.8}
}
@media (max-width:900px){ .win-hero{--z:.64} .win-req{--z:.58} }
@media (max-width:720px){ .win-hero{--z:.5} .win-req{--z:.44} .win-doc{--z:.6} }
@media (max-width:700px){
  .sky,.polish-home .sky{padding-top:90px}
  .head{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr}
  .who-card{aspect-ratio:4/3.6}
  .mom-list{grid-template-columns:1fr 1fr;gap:12px}
  .moment figcaption{padding:10px 12px 12px}
  .moment figcaption b{font-size:14.5px}
  .moment figcaption span{font-size:13px}
  .q{font-size:13.5px;padding:6px 11px}
}
@media (max-width:560px){
  .win-hero{--z:.34} .win-req{--z:.3} .win-doc{--z:.4}
  .stage{padding:40px 16px 28px}
  .copy{padding:32px 16px 0}
  .badge{font-size:13px}
  .sub{font-size:16.5px}
  .cta{gap:10px}
  .solid,.ghost{height:48px;padding:0 18px;font-size:15px}
  .polish-head .chrome-in{padding:12px 16px;gap:12px}
  .polish-head nav{gap:12px;font-size:14px}
  .polish-head .chrome-get{padding:8px 12px;font-size:13px}
  .polish-head .chrome-brand{font-size:17px}
  .polish-foot .chrome-in{padding:14px 20px}
}
@media (max-width:380px){ .win-hero{--z:.27} .win-req{--z:.24} .win-doc{--z:.33} }
@media (prefers-reduced-motion:reduce){
  .solid,.ghost,.qa summary::after{transition:none}
}