/* ==========================================================================
   Notely — design system
   Foundation: Toss (toss.im/company) — type scale, greys, spacing, radii
   Motion:     spring reveals, word-rise headlines, odometer · Apple-style hero device + real-screen gallery
   ========================================================================== */

:root {
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Toss greys (measured from toss.im/company) */
  --grey50: #F9FAFB;
  --grey100: #F2F4F6;
  --grey200: #E8EBF0;
  --grey300: #D1D6DB;
  --grey400: #B0B8C1;
  --grey500: #8F959E;
  --grey600: #727780;
  --grey700: #4E535C;
  --grey800: #333840;
  --grey900: #1C1F25;
  --grey-opa: rgba(7, 25, 76, .05);
  --grey-opa-2: rgba(7, 25, 76, .09);

  --blue: #3182F6;
  --blue-press: #1B64DA;
  --blue-weak: #E8F3FF;
  --navy: #103D7C;

  --bg: #FFFFFF;
  --bg-soft: var(--grey50);
  --surface: var(--grey100);
  --card: #FFFFFF;
  --ink: var(--grey900);
  --ink-2: var(--grey800);
  --body: var(--grey700);
  --muted: var(--grey600);
  --faint: var(--grey500);
  --line: var(--grey200);
  --line-2: var(--grey300);
  --on-ink: #FFFFFF;

  --red: #F04452;    --red-bg: #FFEEEE;
  --orange: #F57800; --orange-bg: #FFF3E0;
  --green: #03B26C;  --green-bg: #E5F8EF;
  --blue-c: #3182F6; --blue-bg: #E8F3FF;
  --purple: #8B5CF6; --purple-bg: #F3EFFF;
  --pink: #E8458B;   --pink-bg: #FFEDF4;
  --yellow: #FFC342;
  --good: #03B26C;
  --bad: #F04452;

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 32px;
  --shadow: 0 2px 8px rgba(0, 27, 55, .06);
  --shadow-lg: 0 8px 40px rgba(0, 27, 55, .1);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.5, .5, 1);
  --spring-soft: cubic-bezier(.3, 1.25, .5, 1);
  --nav-h: 64px;
  --wrap: 1224px;
  --nav-pill: rgba(237, 237, 240, .85); --nav-pill-btn: #FFFFFF;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grey50: #202027; --grey100: #2C2C35; --grey200: #3C3C47; --grey300: #4D4D59; --grey400: #62626D;
    --grey500: #7E7E87; --grey600: #9E9EA4; --grey700: #C3C3C6; --grey800: #E4E4E5; --grey900: #FFFFFF;
    --grey-opa: rgba(217, 217, 255, .08); --grey-opa-2: rgba(217, 217, 255, .14);
    --bg: #17171C; --bg-soft: #101013; --surface: #202027; --card: #202027; --on-ink: #17171C; --nav-pill: rgba(44, 44, 53, .85); --nav-pill-btn: rgba(217, 217, 255, .12);
    --blue: #4593FC; --blue-weak: rgba(69, 147, 252, .16); --navy: #8FC0FF;
    --red-bg: rgba(240,68,82,.16); --orange-bg: rgba(245,120,0,.16); --green-bg: rgba(3,178,108,.16);
    --blue-bg: rgba(69,147,252,.16); --purple-bg: rgba(139,92,246,.18); --pink-bg: rgba(232,69,139,.16);
    --shadow: 0 2px 8px rgba(0,0,0,.4); --shadow-lg: 0 8px 40px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grey50: #202027; --grey100: #2C2C35; --grey200: #3C3C47; --grey300: #4D4D59; --grey400: #62626D;
  --grey500: #7E7E87; --grey600: #9E9EA4; --grey700: #C3C3C6; --grey800: #E4E4E5; --grey900: #FFFFFF;
  --grey-opa: rgba(217, 217, 255, .08); --grey-opa-2: rgba(217, 217, 255, .14);
  --bg: #17171C; --bg-soft: #101013; --surface: #202027; --card: #202027; --on-ink: #17171C; --nav-pill: rgba(44, 44, 53, .85); --nav-pill-btn: rgba(217, 217, 255, .12);
  --blue: #4593FC; --blue-weak: rgba(69, 147, 252, .16); --navy: #8FC0FF;
  --red-bg: rgba(240,68,82,.16); --orange-bg: rgba(245,120,0,.16); --green-bg: rgba(3,178,108,.16);
  --blue-bg: rgba(69,147,252,.16); --purple-bg: rgba(139,92,246,.18); --pink-bg: rgba(232,69,139,.16);
  --shadow: 0 2px 8px rgba(0,0,0,.4); --shadow-lg: 0 8px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  word-break: keep-all; overflow-wrap: anywhere;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
b, strong { font-weight: 700; }
::selection { background: var(--blue-weak); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--ink); color: var(--on-ink); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.i { width: 20px; height: 20px; flex: none; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 28px; height: 28px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }
.wrap-sm { max-width: 868px; }
.section { padding: 160px 0; position: relative; }
.section--soft { background: var(--bg-soft); --surface: var(--card); }
.section--ink { background: #1C1F25; color: #fff; --ink: #fff; --ink-2: #E4E4E5; --body: #C3C3C6; --muted: #9E9EA4; --faint: #7E7E87; --line: #3C3C47; --surface: #2C2C35; --card: #2C2C35; }
.section-head { max-width: 760px; margin: 0 0 72px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head p { color: var(--body); font-size: 18px; line-height: 1.6; margin-top: 20px; }
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .section { padding: 96px 0; }
  .section-head { margin-bottom: 44px; }
  .section-head p { font-size: 16px; }
  .hide-sm { display: none !important; }
}

/* ---------- type (Toss scale: ls -0.02em; display -0.03em) ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--body); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.h-display { font-size: clamp(44px, 6.6vw, 88px); line-height: 1.24; letter-spacing: -0.03em; font-weight: 700; }
.h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.3; letter-spacing: -0.03em; font-weight: 700; }
.h2 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; }
.h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.4; letter-spacing: -0.02em; font-weight: 700; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--body); line-height: 1.6; font-weight: 500; }
.muted { color: var(--muted); }
.mark { color: var(--blue); }
.section--ink .mark, .cta .mark { color: #64A8FF; }

/* ---------- buttons (Toss) ---------- */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--h); padding: 0 20px; border-radius: 14px;
  font-weight: 600; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap;
  transition: background-color .2s, color .2s, transform .35s var(--spring);
  user-select: none;
}
.btn:active { transform: scale(.96); transition-duration: .1s; }
.btn-sm { --h: 36px; padding: 0 12px; font-size: 15px; border-radius: 12px; }
.btn-lg { --h: 56px; padding: 0 28px; font-size: 17px; border-radius: 16px; }
.btn-block { width: 100%; }
.btn-primary, .btn-lime { background: var(--blue); color: #fff; }
.btn-primary:hover, .btn-lime:hover { background: var(--blue-press); }
.btn-dark { background: var(--grey900); color: var(--on-ink); }
.btn-ghost { background: var(--grey-opa); color: var(--ink-2); }
.btn-ghost:hover { background: var(--grey-opa-2); }
.btn-white { background: #fff; color: #1C1F25; }
.section--ink .btn-ghost, .cta .btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.section--ink .btn-ghost:hover, .cta .btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn .i { width: 18px; height: 18px; transition: transform .35s var(--spring); }
.btn:hover .i { transform: translateX(3px); }

.icon-btn { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); transition: background-color .2s, transform .3s var(--spring); }
.icon-btn:hover { background: var(--grey-opa); }
.icon-btn:active { transform: scale(.9); }
.on-dark { display: none; }
:root[data-theme="dark"] .on-light { display: none; }
:root[data-theme="dark"] .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none; }
  :root:not([data-theme="light"]) .on-dark { display: block; }
}

/* ---------- nav (Toss: 64px, plain text links) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h); transition: background-color .3s, backdrop-filter .3s, box-shadow .3s; }
.nav__inner { height: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 32px;
  border-radius: 0; transition: max-width .55s var(--spring-soft), height .4s var(--ease), margin .4s var(--ease), padding .4s var(--ease), border-radius .4s var(--ease), background-color .3s, box-shadow .3s; }
/* scrolled: the bar lifts into a floating, blurred pill (Littly style) */
.nav.is-scrolled .nav__inner { max-width: 1000px; height: 52px; margin-top: 10px; padding: 0 8px 0 20px; border-radius: 20px;
  background: var(--nav-pill); backdrop-filter: saturate(1.8) blur(10px); -webkit-backdrop-filter: saturate(1.8) blur(10px); box-shadow: 0 6px 24px rgba(0, 27, 55, .06); }
.nav.is-scrolled .nav__actions .btn { border-radius: 14px; }
.nav.is-scrolled .nav__actions .btn-ghost { background: var(--nav-pill-btn); }
.nav.is-scrolled .nav__link:hover, .nav.is-scrolled .dd.is-open .nav__link { background: var(--nav-pill-btn); }
/* mobile menu open: back to a full-width solid bar */
.nav.is-menu { background: var(--bg); box-shadow: 0 1px 0 var(--grey-opa); }
.nav.is-menu .nav__inner { max-width: calc(var(--wrap) + 48px); height: 100%; margin-top: 0; padding: 0 20px; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: var(--ink); }
.logo__mark { width: 26px; height: 26px; border-radius: 8px; background: var(--blue); position: relative; display: block; transition: transform .5s var(--spring); }
.logo__mark::before { content: ""; position: absolute; left: 8px; top: 6px; width: 9px; height: 13px; border: 2.5px solid #fff; border-radius: 0 6px 6px 0; border-bottom-color: transparent; border-bottom-right-radius: 0; }
.logo__mark::after { content: ""; position: absolute; left: 8px; top: 6px; width: 2.5px; height: 14px; background: #fff; border-radius: 2px; }
.logo__mark i { position: absolute; right: 4px; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.logo:hover .logo__mark { transform: rotate(-12deg) scale(1.1); }
.logo__img { height: 24px; width: auto; display: block; }
:root[data-theme="dark"] .logo__img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo__img { filter: invert(1); } }
.nav__links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav__link { display: inline-flex; align-items: center; gap: 2px; padding: 8px 14px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--ink-2); transition: color .2s, background-color .2s; }
.nav__link:hover, .dd.is-open .nav__link { background: var(--grey-opa); color: var(--ink); }
.nav__link.is-active { color: var(--blue); font-weight: 600; }
.dd__btn .i { width: 16px; height: 16px; transition: transform .35s var(--spring); }
.dd.is-open .dd__btn .i { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__burger { display: none; }
.dd { position: relative; }
.dd__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 560px; padding: 8px; margin-left: -280px;
  background: var(--card); border-radius: 24px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--grey-opa);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.96); transform-origin: top center;
  transition: opacity .2s, transform .45s var(--spring), visibility .2s;
}
.dd__panel::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.dd.is-open .dd__panel { opacity: 1; visibility: visible; transform: none; }
.dd__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dd__item { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; transition: background-color .2s; }
.dd__item:hover { background: var(--grey-opa); }
.dd__item b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.dd__item small { display: block; font-size: 14px; color: var(--muted); }
.dd__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.dd__ic .i { width: 20px; height: 20px; }
.dd__ic--img { background: none; }
.dd__ic--img img { width: 40px; height: 40px; display: block; }
.dd__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 14px 16px; border-radius: 16px; background: var(--grey-opa); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.dd__foot .i { transition: transform .35s var(--spring); }
.dd__foot:hover .i { transform: translateX(4px); }

.c-red { background: var(--red-bg); color: var(--red); }
.c-blue { background: var(--blue-bg); color: var(--blue-c); }
.c-violet { background: var(--purple-bg); color: var(--purple); }
.c-amber { background: var(--orange-bg); color: var(--orange); }
.c-green { background: var(--green-bg); color: var(--green); }
.c-pink { background: var(--pink-bg); color: var(--pink); }
.c-ink { background: var(--grey-opa); color: var(--ink-2); }

.drawer { position: fixed; inset: var(--nav-h) 0 0; background: var(--bg); padding: 8px 20px 32px; overflow-y: auto; display: flex; flex-direction: column; }
.drawer > * { animation: drawerIn .55s var(--spring-soft) both; }
@keyframes drawerIn { from { opacity: 0; transform: translateY(-12px); } }
.drawer a { display: flex; align-items: center; gap: 12px; padding: 14px 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
.drawer a .i { color: var(--muted); }
.drawer a img.i { width: 24px; height: 24px; margin: -2px; }
.drawer__label { font-size: 14px; font-weight: 500; color: var(--muted); margin: 20px 4px 4px; }
.drawer__cta { display: grid; gap: 8px; margin-top: 24px; }
.drawer__cta a { justify-content: center; padding: 0; font-size: 17px; }
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__inner { padding: 0 20px; gap: 12px; justify-content: space-between; }
  .nav.is-scrolled .nav__inner { margin-inline: 10px; padding: 0 6px 0 16px; }
  .nav.is-menu .nav__inner { margin-inline: 0; }
}
@media (max-width: 420px) { .nav__actions .btn-primary { display: none; } }

/* ---------- motion primitives ---------- */
.reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal-scale { opacity: 0; transform: translateY(40px) scale(.9); transition: opacity .5s var(--ease), transform 1s var(--spring-soft); transition-delay: var(--d, 0s); }
.reveal-scale.is-in { opacity: 1; transform: none; }
.reveal-left, .reveal-right { opacity: 0; transition: opacity .5s var(--ease), transform .9s var(--spring-soft); transition-delay: var(--d, 0s); }
.reveal-left { transform: translateX(-40px) scale(.94); }
.reveal-right { transform: translateX(40px) scale(.94); }
.reveal-left.is-in, .reveal-right.is-in { opacity: 1; transform: none; }

.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .12em; margin: 0 -.03em -.12em; }
.split .w > span { display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: left bottom; transition: transform .95s var(--spring-soft); transition-delay: calc(var(--i) * 55ms + var(--d, 0s)); }
.split.is-in .w > span { transform: none; }

/* litt.ly slot text: each character rolls up */
.slot { display: inline-block; position: relative; vertical-align: bottom; height: 1.24em; overflow: hidden; color: var(--sc, var(--blue)); transition: width .55s var(--spring-soft); white-space: nowrap; text-align: left; }
.slot__word { position: absolute; left: 0; top: 0; display: inline-flex; white-space: pre; }
.slot__ch { display: inline-block; transform: translateY(110%); }
.slot__word.is-on .slot__ch { transform: none; transition: transform .75s var(--spring); transition-delay: calc(var(--c) * 50ms); }
.slot__word.is-out .slot__ch { transform: translateY(-110%); transition: transform .5s var(--ease); transition-delay: calc(var(--c) * 30ms); }

/* ---------- hero ---------- */
.hero { padding: calc(var(--nav-h) + 120px) 0 40px; position: relative; overflow: hidden; overflow: clip; text-align: center; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::before { content: ""; position: absolute; left: 50%; top: -360px; width: 1400px; height: 780px; margin-left: -700px; border-radius: 50%; background: radial-gradient(closest-side, rgba(49,130,246,.14), rgba(49,130,246,0)); }
.blob { display: none; }
.hero h1 { margin: 0 auto; max-width: 1000px; }
.hero .lead { max-width: 620px; margin: 28px auto 0; }
.hero__cta { display: flex; gap: 10px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.hero__meta { margin-top: 24px; font-size: 15px; font-weight: 500; color: var(--muted); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero__meta .i { width: 16px; height: 16px; color: var(--blue); stroke-width: 2.8; }

/* ---------- app mockups ---------- */
.mock { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--grey-opa); overflow: hidden; text-align: left; position: relative; }
.mock__bar { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey200); }
.mock__url { flex: 1; max-width: 340px; margin: 0 auto; height: 28px; border-radius: 9px; background: var(--grey100); font-size: 12px; font-weight: 500; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.mock__url .i { width: 12px; height: 12px; }

.demo { margin: 88px auto 0; max-width: 1080px; position: relative; }
.demo .mock { border-radius: 32px; }
.demo__body { display: grid; grid-template-columns: 228px 1fr; min-height: 480px; }
.demo__side { padding: 16px 12px; background: var(--grey50); display: flex; flex-direction: column; gap: 2px; }
.demo__side .ds-title { font-size: 13px; font-weight: 500; color: var(--faint); margin: 12px 10px 6px; }
.demo__side .ds-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--body); }
.demo__side .ds-item.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.demo__side .ds-item .i { width: 16px; height: 16px; }
.demo__main { padding: 24px 28px; display: flex; flex-direction: column; min-width: 0; }
.demo__tabs { display: flex; gap: 4px; padding: 4px; background: var(--grey100); border-radius: 14px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; position: relative; }
.demo__tabs .tab-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow); transition: left .55s var(--spring-soft), width .55s var(--spring-soft); }
.demo__tabs button { position: relative; z-index: 1; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; transition: color .25s; }
.demo__tabs button .i { width: 16px; height: 16px; }
.demo__tabs button.is-on { color: var(--ink); }
.demo__tabs .prog { display: none; }
.demo__panes { position: relative; flex: 1; margin-top: 22px; }
.demo__pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transition: opacity .3s, transform .6s var(--spring-soft), visibility .3s; }
.demo__pane.is-on { opacity: 1; visibility: visible; transform: none; position: relative; }
.demo__doc-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.demo__doc-meta { font-size: 14px; color: var(--muted); margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; }
@media (max-width: 860px) {
  .demo { margin-top: 56px; }
  .demo__body { grid-template-columns: 1fr; min-height: 0; }
  .demo__side { display: none; }
  .demo__main { padding: 16px; }
}

/* summary */
.sum-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 18px; }
.sum-card { border-radius: 20px; padding: 20px; background: var(--grey50); }
.sum-card h5 { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sum-card h5 .i { width: 16px; height: 16px; color: var(--blue); }
.sum-card li { list-style: none; position: relative; padding-left: 14px; font-size: 15px; line-height: 1.6; margin: 6px 0; color: var(--body); }
.sum-card li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; border-radius: 50%; background: var(--grey400); }
.sum-card li b { color: var(--ink); font-weight: 600; }
.kw { display: flex; flex-wrap: wrap; gap: 6px; }
.kw span { padding: 6px 12px; border-radius: 10px; background: var(--card); font-size: 14px; font-weight: 500; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.demo__pane.is-on .typed > * { animation: popUp .7s var(--spring-soft) both; animation-delay: calc(var(--i, 0) * 90ms); }
.demo__pane.is-on .kw span { animation: popUp .6s var(--spring) both; animation-delay: calc(.35s + var(--k, 0) * 45ms); }
@keyframes popUp { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (max-width: 640px) { .sum-grid { grid-template-columns: 1fr; } }

/* quiz */
.quiz { border-radius: 24px; padding: 24px; background: var(--card); box-shadow: var(--shadow-lg), 0 0 0 1px var(--grey-opa); }
.mock .quiz, .demo .quiz { box-shadow: none; padding: 0; }
.quiz__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--muted); font-weight: 500; }
.quiz__bar { height: 6px; border-radius: 6px; background: var(--grey100); margin: 12px 0 20px; overflow: hidden; }
.quiz__bar i { display: block; height: 100%; width: 40%; background: var(--blue); border-radius: inherit; transition: width .9s var(--spring-soft); }
.quiz__q { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.5; color: var(--ink); }
.quiz__opts { display: grid; gap: 8px; margin-top: 16px; }
.quiz__opt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--grey50);
  text-align: left; font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s, transform .4s var(--spring), box-shadow .2s;
  animation: popUp .55s var(--spring-soft) both; animation-delay: calc(var(--k, 0) * 60ms);
}
.quiz__opt:hover:not(:disabled) { background: var(--grey100); }
.quiz__opt:active:not(:disabled) { transform: scale(.97); }
.quiz__opt .n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--card); font-size: 13px; font-weight: 700; color: var(--muted); flex: none; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s; }
.quiz__opt.is-right { background: var(--green-bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--good); animation: rightPop .55s var(--spring); }
.quiz__opt.is-right .n { background: var(--good); color: #fff; box-shadow: none; }
.quiz__opt.is-wrong { background: var(--red-bg); box-shadow: inset 0 0 0 1.5px var(--bad); animation: shake .45s; }
.quiz__opt.is-wrong .n { background: var(--bad); color: #fff; box-shadow: none; }
.quiz__opt:disabled { cursor: default; }
@keyframes rightPop { 40% { transform: scale(1.035); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.quiz__exp { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--grey50); font-size: 14px; color: var(--body); line-height: 1.65; display: none; }
.quiz__exp.is-show { display: block; animation: popUp .5s var(--spring-soft); }
.quiz__exp b { color: var(--ink); }
.quiz .btn { margin-top: 14px; animation: popUp .55s var(--spring) both .15s; }

/* flashcards */
.fc-stage { perspective: 1200px; }
.fc { position: relative; width: 100%; aspect-ratio: 16 / 10; cursor: pointer; transform-style: preserve-3d; transition: transform .85s var(--spring-soft); }
.fc.is-flip { transform: rotateY(180deg); }
.fc__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 24px; background: var(--card); box-shadow: var(--shadow-lg), 0 0 0 1px var(--grey-opa);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center;
}
.fc__face small { position: absolute; top: 18px; left: 20px; font-size: 13px; font-weight: 500; color: var(--muted); }
.fc__face .hint { position: absolute; bottom: 16px; font-size: 13px; font-weight: 500; color: var(--faint); }
.fc__face--back { transform: rotateY(180deg); background: var(--blue); color: #fff; box-shadow: var(--shadow-lg); }
.fc__face--back small { color: rgba(255,255,255,.7); }
.fc__term { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; }
.fc__def { font-size: 17px; font-weight: 500; line-height: 1.6; max-width: 420px; }
.fc-deck { position: relative; }
.fc-deck::before, .fc-deck::after { content: ""; position: absolute; left: 6%; right: 6%; height: 100%; border-radius: 24px; background: var(--grey100); z-index: -1; }
.fc-deck::before { bottom: -12px; transform: scale(.95); }
.fc-deck::after { bottom: -24px; transform: scale(.9); opacity: .6; }
.fc-actions { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.fc-actions button { padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 15px; background: var(--grey-opa); transition: background-color .2s, transform .4s var(--spring); }
.fc-actions button:hover { background: var(--grey-opa-2); }
.fc-actions button:active { transform: scale(.92); }
.fc-actions .again { color: var(--red); } .fc-actions .hard { color: var(--orange); } .fc-actions .good { color: var(--green); } .fc-actions .easy { color: var(--blue); }
.fc.swipe-out { animation: swipeOut .45s var(--ease) forwards; }
.fc.swipe-in { animation: swipeIn .75s var(--spring) both; }
@keyframes swipeOut { to { transform: translateX(130%) rotate(18deg); opacity: 0; } }
@keyframes swipeIn { from { transform: translateY(30px) scale(.8) rotate(-4deg); opacity: 0; } }

/* recording */
.rec { border-radius: 24px; background: var(--card); box-shadow: var(--shadow-lg), 0 0 0 1px var(--grey-opa); overflow: hidden; }
.rec__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.rec__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(240,68,82,.5); } 70% { box-shadow: 0 0 0 10px rgba(240,68,82,0); } 100% { box-shadow: 0 0 0 0 rgba(240,68,82,0); } }
.rec__title { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__time { font-size: 14px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.wave { display: flex; align-items: center; gap: 3px; height: 44px; padding: 0 20px; margin: 4px 0; }
.wave i { flex: 1; min-width: 2px; border-radius: 3px; background: var(--blue); height: 20%; animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -73ms); }
@keyframes wave { 0%, 100% { height: 14%; } 50% { height: var(--h, 80%); } }
.rec__lines { padding: 12px 20px 20px; font-size: 15px; line-height: 1.7; min-height: 170px; color: var(--body); }
.rec__lines p { margin: 0 0 8px; animation: popUp .5s var(--spring-soft) both; }
.rec__lines .ts { font-size: 12px; font-weight: 600; color: var(--faint); margin-right: 8px; font-variant-numeric: tabular-nums; }
.rec__lines .cur::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--blue); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.rec__lines .hl { background: var(--blue-weak); color: var(--blue); font-weight: 600; border-radius: 4px; padding: 1px 4px; }

/* mindmap */
.mm { width: 100%; height: auto; overflow: visible; }
.mm .edge { fill: none; stroke: var(--grey300); stroke-width: 2; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset 1s var(--ease); transition-delay: var(--d, 0s); }
.mm .node { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .8s var(--spring); transition-delay: var(--d, 0s); }
.mm .node rect { fill: var(--card); stroke: var(--grey200); }
.mm .node text { fill: var(--ink); font: 600 14px var(--font); letter-spacing: -0.02em; }
.mm .node.root rect { fill: var(--grey900); stroke: none; }
.mm .node.root text { fill: var(--on-ink); font-size: 16px; font-weight: 700; }
.mm .node.l1 rect { fill: var(--nc); stroke: none; }
.mm .node.l1 text { fill: #fff; }
.is-in .mm .edge, .mm.is-in .edge { stroke-dashoffset: 0; }
.is-in .mm .node, .mm.is-in .node { opacity: 1; transform: none; }

/* tutor chat */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 20px; min-height: 300px; }
.bubble { max-width: 84%; padding: 12px 16px; border-radius: 20px; font-size: 15px; line-height: 1.6; animation: bubbleIn .6s var(--spring) both; transform-origin: bottom left; }
.bubble.me { transform-origin: bottom right; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(12px) scale(.8); } }
.bubble.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.bubble.ai { align-self: flex-start; background: var(--grey100); color: var(--ink-2); border-bottom-left-radius: 6px; }
.bubble.ai .src { display: inline-flex; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--blue); gap: 4px; align-items: center; }
.typing { display: inline-flex; gap: 4px; padding: 15px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey400); animation: tdot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 0; background: var(--grey100); padding: 0 14px; font-size: 15px; }
.chat-input input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.chat-input button { width: 44px; height: 44px; border-radius: 12px; background: var(--blue); color: #fff; display: grid; place-items: center; transition: transform .35s var(--spring); }
.chat-input button:active { transform: scale(.88); }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 12px; }
.chips-row button { padding: 7px 12px; border-radius: 10px; background: var(--grey-opa); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background-color .2s, transform .35s var(--spring); }
.chips-row button:hover { background: var(--grey-opa-2); }
.chips-row button:active { transform: scale(.92); }

/* ---------- marquee ---------- */
.strip { padding: 56px 0 24px; }
.strip > p { text-align: center; color: var(--muted); font-size: 16px; font-weight: 500; }
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding: 10px 0; }
.marquee__track { display: flex; gap: 12px; width: max-content; animation: marquee var(--speed, 40s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.majors { margin-top: 24px; }
.major { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--grey100); font-weight: 600; font-size: 16px; white-space: nowrap; color: var(--ink-2); transition: transform .45s var(--spring); }
.major:hover { transform: rotate(-4deg) scale(1.06); }
.major .e { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.major .e .i { width: 18px; height: 18px; }

/* ---------- input → output ---------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.flow__col { display: grid; gap: 10px; }
.flow__item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--surface); font-weight: 600; font-size: 16px; color: var(--ink); transition: transform .45s var(--spring), background-color .2s; }
.flow__item .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; transition: transform .5s var(--spring); }
.flow__item:hover .ic { transform: rotate(-10deg) scale(1.1); }
.flow__item small { display: block; font-size: 14px; color: var(--muted); font-weight: 500; }
.flow__item > .i { margin-left: auto; color: var(--grey400); transition: transform .35s var(--spring), color .2s; }
a.flow__item:hover > .i { transform: translateX(4px); color: var(--ink); }
.flow__core { width: 240px; height: 240px; position: relative; display: grid; place-items: center; }
.flow__core .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--grey300); animation: spin 40s linear infinite; }
.flow__core .ring:nth-child(2) { inset: 36px; animation-duration: 26s; animation-direction: reverse; border: 1.5px solid var(--grey200); }
.flow__core .ring i { position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 3px solid var(--bg); }
.flow__core .ring:nth-child(2) i { background: var(--yellow); }
@keyframes spin { to { transform: rotate(360deg); } }
.flow__core .core { width: 112px; height: 112px; border-radius: 32px; background: var(--blue); color: #fff; display: grid; place-items: center; position: relative; z-index: 1; animation: squish 3s infinite; }
.flow__core .core b { font-size: 16px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flow__core .core .i { width: 30px; height: 30px; }
@keyframes squish { 0%, 72%, 100% { transform: scale(1) rotate(0); } 80% { transform: scale(1.12, .9) rotate(-5deg); } 88% { transform: scale(.94, 1.08) rotate(4deg); } 94% { transform: scale(1.03, .98) rotate(-1deg); } }
.flow__beam { position: absolute; top: 50%; height: 2px; width: 56px; overflow: hidden; }
.flow__beam.l { right: 100%; } .flow__beam.r { left: 100%; }
.flow__beam::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--grey300) 0 4px, transparent 4px 8px); background-size: 8px 2px; animation: dash .6s linear infinite; }
@keyframes dash { to { background-position: 8px 0; } }
@media (max-width: 960px) {
  .flow { grid-template-columns: 1fr; }
  .flow__core { width: 200px; height: 200px; margin: 0 auto; }
  .flow__beam { display: none; }
  .flow__col { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ---------- feature rows ---------- */
.frow { display: grid; grid-template-columns: 1fr 1.08fr; gap: 80px; align-items: center; padding: 80px 0; }
.frow.flip > :first-child { order: 2; }
.frow__num { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--body); }
.frow__num::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.frow h3 { margin: 18px 0 20px; }
.frow p { color: var(--body); font-size: 18px; line-height: 1.6; }
.ticks { display: grid; gap: 12px; margin: 28px 0 32px; }
.ticks li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 16px; color: var(--ink-2); }
.ticks li .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue-weak); color: var(--blue); stroke-width: 3; margin-top: 1px; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 16px; color: var(--blue); }
.link-arrow .i { width: 18px; height: 18px; transition: transform .35s var(--spring); }
.link-arrow:hover .i { transform: translateX(4px); }
.frow__visual { position: relative; }
.frow__visual .glow { display: none; }
@media (max-width: 960px) {
  .frow { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
  .frow.flip > :first-child { order: 0; }
}

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento__cell { grid-column: span 2; border-radius: var(--r-lg); background: var(--surface); padding: 32px; position: relative; overflow: hidden; transition: transform .55s var(--spring-soft); min-height: 260px; display: flex; flex-direction: column; color: var(--ink); }
.bento__cell.w3 { grid-column: span 3; } .bento__cell.w4 { grid-column: span 4; } .bento__cell.w6 { grid-column: span 6; }
.bento__cell h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; margin: 20px 0 8px; }
.bento__cell h4:first-child { margin-top: 0; }
.bento__cell p { color: var(--body); font-size: 16px; line-height: 1.6; }
.bento__cell .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; transition: transform .55s var(--spring); }
.bento__cell .ic .i { width: 24px; height: 24px; }
.bento__cell:hover .ic { transform: rotate(-10deg) scale(1.12); }
.bento__cell .art { margin-top: auto; padding-top: 24px; }
.bento__cell .art .sum-card { background: var(--card); }
/* bento mini arts: D-day pace bar, assignment checklist, study heatmap (play once the cell is in view) */
.dd-art { border-radius: 16px; padding: 16px; background: var(--card); }
.dd-art__top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dd-art__top b { font-weight: 600; color: var(--ink); }
.dd-art__track { position: relative; height: 10px; margin: 16px 0 8px; border-radius: 999px; background: var(--grey100); }
.dd-art__fill { position: absolute; inset: 0 auto 0 0; width: 62%; border-radius: inherit; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .25s; }
.dd-art__mark { position: absolute; left: 55%; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); opacity: 0; transform: translateY(-6px); transition: opacity .3s 1.1s, transform .6s var(--spring) 1.1s; }
.dd-art__lbl { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.dd-art__lbl em { font-style: normal; color: var(--blue); font-weight: 600; }
.is-in .dd-art__fill { transform: none; }
.is-in .dd-art__mark { opacity: 1; transform: none; }
.ck-art { list-style: none; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--card); display: grid; gap: 10px; }
.ck-art li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); transition: color .3s var(--d, 0s); }
.ck-art li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--grey300); color: #fff; transition: background-color .25s var(--d, 0s), box-shadow .25s var(--d, 0s); }
.ck-art li .i { width: 12px; height: 12px; stroke-width: 3; transform: scale(0); transition: transform .5s var(--spring) var(--d, 0s); }
.is-in .ck-art li { color: var(--ink); }
.is-in .ck-art li i { background: var(--blue); box-shadow: none; }
.is-in .ck-art li .i { transform: none; }
.hm-art { display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.hm-art i { aspect-ratio: 1; border-radius: 4px; background: var(--grey100); transform: scale(.4); opacity: 0; transition: transform .5s var(--spring) var(--d, 0s), opacity .3s var(--d, 0s); }
.hm-art i.l1 { background: color-mix(in srgb, var(--green) 28%, var(--grey100)); }
.hm-art i.l2 { background: color-mix(in srgb, var(--green) 60%, var(--grey100)); }
.hm-art i.l3, .hm-art i.lt { background: var(--green); }
.hm-art i.lt { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--green); }
.is-in .hm-art i { transform: none; opacity: 1; }
.hm-art__lbl { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } .bento__cell, .bento__cell.w3, .bento__cell.w4 { grid-column: span 1; } .bento__cell.w6 { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento__cell, .bento__cell.w3, .bento__cell.w4, .bento__cell.w6 { grid-column: span 1; } .bento__cell { padding: 26px; min-height: 0; } }

/* ---------- stats + odometer ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { background: var(--surface); border-radius: var(--r-lg); padding: 32px 28px; }
.stat__num { font-size: clamp(40px, 4.4vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; color: var(--ink); }
.stat__num small { font-size: .45em; letter-spacing: -0.02em; margin-left: 4px; font-weight: 700; color: var(--body); }
.stat__label { margin-top: 14px; color: var(--body); font-size: 16px; font-weight: 500; }
.odo { display: inline-flex; overflow: hidden; height: 1.1em; line-height: 1.1; vertical-align: bottom; }
.odo__col { display: flex; flex-direction: column; transition: transform 1.8s var(--spring-soft); transition-delay: calc(var(--c) * 110ms); }
.odo__col span { height: 1.1em; display: block; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stat { padding: 24px 20px; } }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step { padding: 32px; border-radius: var(--r-lg); background: var(--surface); position: relative; }
.step::before { counter-increment: step; content: "0" counter(step); font-size: 20px; font-weight: 600; color: var(--grey500); }
.step h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 8px; }
.step p { color: var(--body); font-size: 16px; }
.step .art { margin-top: 24px; height: 132px; border-radius: 20px; background: var(--card); display: grid; place-items: center; overflow: hidden; position: relative; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- persona cards ---------- */
.review { width: 360px; flex: none; padding: 28px; border-radius: var(--r-lg); background: var(--card); transition: transform .5s var(--spring); }
.review h5 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.48; color: var(--ink); }
.review p { margin-top: 10px; font-size: 16px; color: var(--body); line-height: 1.6; }
.review .who { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); font-weight: 500; }
.review .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; }

/* ---------- FAQ (Toss list rows) ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 28px 4px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.48; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 24px; height: 24px; position: relative; flex: none; transition: transform .5s var(--spring); }
.faq summary .pm::before { content: ""; position: absolute; left: 7px; top: 5px; width: 9px; height: 9px; border: solid var(--grey500); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); border-radius: 1px; }
.faq details[open] summary .pm { transform: rotate(180deg); }
.faq .ans { padding: 0 4px 28px; color: var(--body); font-size: 17px; line-height: 1.7; max-width: 760px; }
.faq .ans a { color: var(--blue); text-decoration: none !important; font-weight: 600; }
.faq details[open] .ans { animation: popUp .5s var(--spring-soft); }

/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; overflow: clip; border-radius: var(--r-xl); background: #1C1F25; color: #fff; padding: 128px 40px; text-align: center; isolation: isolate; --ink: #fff; --body: #C3C3C6; }
.cta h2 { color: #fff; }
.cta p { color: #B0B8C1; font-size: 18px; font-weight: 500; margin-top: 18px; }
.cta .hero__cta { margin-top: 36px; }
@media (max-width: 640px) { .cta { padding: 80px 20px; border-radius: var(--r-lg); } }

/* ---------- pricing ---------- */
.billing { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--grey100); position: relative; margin-top: 36px; }
.billing button { position: relative; z-index: 1; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 16px; color: var(--muted); transition: color .3s; display: inline-flex; gap: 8px; align-items: center; }
.billing button.is-on { color: var(--ink); }
.billing .pill { position: absolute; top: 4px; bottom: 4px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow); transition: left .55s var(--spring-soft), width .55s var(--spring-soft); }
.billing .save { font-size: 13px; padding: 2px 8px; border-radius: 6px; background: var(--blue-weak); color: var(--blue); font-weight: 700; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; align-items: stretch; }
.plan { border-radius: var(--r-lg); background: var(--surface); padding: 32px 26px; display: flex; flex-direction: column; position: relative; transition: transform .55s var(--spring-soft); }
.plan.is-pop { background: var(--blue); color: #fff; --ink: #fff; --ink-2: #fff; --body: rgba(255,255,255,.85); --muted: rgba(255,255,255,.75); --faint: rgba(255,255,255,.55); }
.plan__badge { position: absolute; top: -14px; left: 24px; padding: 6px 12px; border-radius: 10px; background: #1C1F25; color: #fff; font-size: 13px; font-weight: 700; transform: rotate(-5deg); border: 2px solid var(--bg); }
.plan__name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.plan__desc { font-size: 15px; color: var(--body); margin-top: 6px; min-height: 48px; line-height: 1.6; }
.plan__price { margin-top: 24px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plan__price .amt { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; display: inline-block; overflow: hidden; vertical-align: bottom; }
.plan__price .per { font-size: 16px; color: var(--muted); font-weight: 500; }
.plan__sub { font-size: 14px; color: var(--muted); margin-top: 8px; min-height: 22px; }
.plan__sub s { opacity: .7; }
.plan .btn { margin: 24px 0 28px; }
.plan.is-pop .btn-primary { background: #fff; color: #3182F6; }
.plan.is-pop .btn-primary:hover { background: #E8F3FF; }
.plan .btn-ghost { background: var(--card); }
.section--soft .plan .btn-ghost { background: var(--grey-opa); }
.plan ul { display: grid; gap: 12px; }
.plan li { list-style: none; display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.plan li .i { width: 18px; height: 18px; color: var(--blue); margin-top: 2px; stroke-width: 2.8; }
.plan.is-pop li .i { color: #fff; }
.plan li.off { color: var(--faint); }
.plan li.off .i { color: var(--grey400); }
.plan__more { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.amt-swap { display: inline-block; transition: transform .6s var(--spring), opacity .2s; }
.amt-swap.is-swapping { transform: translateY(80%); opacity: 0; transition: transform .2s var(--ease), opacity .15s; }
.amt-swap.is-enter { transform: translateY(-80%); opacity: 0; transition: none; }
@media (max-width: 1080px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }

.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { padding: 18px 14px; border-bottom: 1px solid var(--line); text-align: center; color: var(--ink-2); }
.compare th:first-child, .compare td:first-child { text-align: left; font-weight: 500; color: var(--body); }
.compare thead th { font-size: 17px; font-weight: 700; position: sticky; top: var(--nav-h); background: var(--bg); z-index: 1; color: var(--ink); }
.compare .grp td { padding-top: 40px; font-weight: 700; font-size: 15px; color: var(--muted); }
.compare .i { margin: 0 auto; color: var(--blue); stroke-width: 2.8; }
.compare .no { color: var(--grey400); }
.compare .hl { background: var(--blue-weak); }
.table-scroll { overflow-x: auto; }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs__card { border-radius: var(--r-lg); padding: 32px; background: var(--surface); }
.vs__card.us { background: var(--blue); color: #fff; --line: rgba(255,255,255,.22); --muted: rgba(255,255,255,.8); }
.vs__card > p:first-child { font-size: 20px !important; font-weight: 700 !important; }
.vs__row { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; gap: 12px; }
.vs__row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.vs__card.us b[style] { color: #fff !important; }
.vs__card.us p[style] { color: rgba(255,255,255,.8) !important; }
@media (max-width: 720px) { .vs { grid-template-columns: 1fr; } }

/* ---------- feature page hero ---------- */
.fhero { padding: calc(var(--nav-h) + 96px) 0 96px; position: relative; overflow: hidden; overflow: clip; }
.fhero__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.fhero .crumbs { display: flex; gap: 4px; align-items: center; font-size: 15px; color: var(--muted); font-weight: 500; margin-bottom: 28px; }
.fhero .crumbs a:hover { color: var(--ink); }
.fhero .crumbs .i { width: 14px; height: 14px; transform: rotate(-90deg); }
.fhero__ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 28px; opacity: 0; transform: scale(.3) rotate(-30deg); animation: popIn .9s var(--spring) .15s forwards; }
.fhero__ic .i { width: 32px; height: 32px; }
@keyframes popIn { to { opacity: 1; transform: rotate(-8deg); } }
.fhero .lead { margin-top: 24px; }
.fhero .hero__cta { justify-content: flex-start; }
.fhero .hero__meta { justify-content: flex-start; }
@media (max-width: 960px) { .fhero__grid { grid-template-columns: 1fr; gap: 48px; } .fhero { padding-bottom: 64px; } }

.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.usecase { padding: 32px; border-radius: var(--r-lg); background: var(--surface); transition: transform .5s var(--spring); }
.usecase .e { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; transition: transform .5s var(--spring); }
.usecase:hover .e { transform: rotate(-10deg) scale(1.1); }
.usecase .e .i { width: 26px; height: 26px; }
.usecase h4 { font-size: 20px; font-weight: 700; margin: 20px 0 8px; letter-spacing: -0.02em; }
.usecase p { color: var(--body); font-size: 16px; }
@media (max-width: 860px) { .usecases { grid-template-columns: 1fr; } }

.next-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.next-feat { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 20px; background: var(--surface); transition: transform .45s var(--spring); }
.next-feat b { display: block; font-weight: 700; font-size: 17px; }
.next-feat small { color: var(--muted); font-size: 14px; }
.next-feat > .i { margin-left: auto; color: var(--grey400); transition: transform .35s var(--spring); }
.next-feat:hover > .i { transform: translateX(4px); color: var(--ink); }
@media (max-width: 860px) { .next-feats { grid-template-columns: 1fr; } }

/* ---------- about (Toss culture rows, leaders) ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value { padding: 32px; border-radius: var(--r-lg); background: var(--surface); transition: transform .5s var(--spring-soft); }
.value .n { font-size: 20px; font-weight: 600; color: var(--grey500); }
.value h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; margin: 40px 0 10px; }
.value p { color: var(--body); font-size: 16px; line-height: 1.6; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row .n { font-size: 20px; font-weight: 600; color: var(--grey500); }
.row h4 { font-size: 20px; font-weight: 700; line-height: 1.48; letter-spacing: -0.02em; }
.row h4 small { display: block; font-size: 16px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.row p { color: var(--body); font-size: 16px; line-height: 1.6; }
@media (max-width: 860px) { .row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; } }
.timeline { position: relative; max-width: 760px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline .tl-fill { position: absolute; left: 7px; top: 8px; width: 2px; background: var(--blue); height: 0; transition: height .2s linear; }
.tl { position: relative; padding: 0 0 48px 48px; }
.tl::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: background-color .4s, border-color .4s, transform .6s var(--spring); }
.tl.is-in::before { background: var(--blue); border-color: var(--blue); transform: scale(1.2); }
.tl time { font-size: 16px; font-weight: 700; color: var(--navy); }
.tl h4 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0; }
.tl p { color: var(--body); }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.member .ph { aspect-ratio: 1 / 1.15; border-radius: 32px; display: grid; place-items: center; margin-bottom: 16px; position: relative; transition: transform .6s var(--spring), border-radius .6s var(--spring); }
.member .ph .i { width: 56px; height: 56px; stroke-width: 1.6; }
.member:hover .ph { transform: rotate(-3deg) scale(1.03); border-radius: 48px; }
.member b { font-size: 18px; font-weight: 600; }
.member small { display: block; color: var(--muted); font-size: 16px; font-weight: 500; margin-top: 2px; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr 1fr; } }
.jobs { border-top: 1px solid var(--line); }
.job { display: flex; align-items: center; gap: 16px; padding: 28px 4px; border-bottom: 1px solid var(--line); transition: padding .5s var(--spring); }
.job:hover { padding-left: 16px; }
.job b { font-size: 20px; font-weight: 600; flex: 1; letter-spacing: -0.02em; }
.job span { color: var(--muted); font-size: 16px; font-weight: 500; }
.job .i { color: var(--grey400); }

/* ---------- legal ---------- */
.legal-hero { padding: calc(var(--nav-h) + 80px) 0 48px; }
.legal-hero .meta { margin-top: 16px; color: var(--muted); font-size: 16px; font-weight: 500; display: flex; gap: 16px; flex-wrap: wrap; }
.legal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 36px; }
.legal-tabs a { padding: 9px 16px; border-radius: 12px; background: var(--grey-opa); font-size: 15px; font-weight: 600; color: var(--ink-2); transition: background-color .2s, transform .35s var(--spring); }
.legal-tabs a:hover { background: var(--grey-opa-2); }
.legal-tabs a:active { transform: scale(.94); }
.legal-tabs a.is-active { background: var(--grey900); color: var(--on-ink); }
.legal { display: grid; grid-template-columns: 240px 1fr; gap: 80px; padding: 48px 0 160px; border-top: 1px solid var(--line); }
.legal__toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; max-height: calc(100vh - var(--nav-h) - 64px); overflow-y: auto; }
.legal__toc p { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.legal__toc a { display: block; padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--grey500); transition: color .2s, transform .35s var(--spring); line-height: 1.45; }
.legal__toc a:hover { color: var(--ink); }
.legal__toc a.is-active { color: var(--ink); font-weight: 700; transform: translateX(4px); }
.legal__body { max-width: 760px; min-width: 0; }
.legal__body h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; margin: 64px 0 16px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: 18px; font-weight: 700; margin: 32px 0 10px; }
.legal__body p, .legal__body li { color: var(--body); font-size: 16px; line-height: 1.8; }
.legal__body p + p { margin-top: 12px; }
.legal__body ol, .legal__body ul { padding-left: 22px; margin: 10px 0; }
.legal__body li { margin: 4px 0; }
.legal__body li::marker { color: var(--grey400); }
.legal__body a { color: var(--blue); font-weight: 500; }
.legal__body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; display: block; overflow-x: auto; }
.legal__body th, .legal__body td { border-bottom: 1px solid var(--line); padding: 14px 12px; text-align: left; vertical-align: top; line-height: 1.6; color: var(--body); }
.legal__body th { background: var(--grey50); font-weight: 600; white-space: nowrap; color: var(--ink-2); border-top: 1px solid var(--line); }
.callout { display: flex; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--grey50); margin: 24px 0; font-size: 16px; line-height: 1.7; color: var(--body); }
.callout .i { color: var(--blue); margin-top: 3px; }
.callout.warn { background: var(--orange-bg); }
.callout.warn .i { color: var(--orange); }
.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 56px; }
.summary-cards > div { padding: 22px; border-radius: 20px; background: var(--surface); transition: transform .45s var(--spring); }
.summary-cards b { display: block; font-size: 17px; font-weight: 700; margin: 14px 0 4px; }
.summary-cards span:not(.dd__ic) { font-size: 15px; color: var(--body); line-height: 1.6; display: block; }
@media (max-width: 960px) {
  .legal { grid-template-columns: 1fr; gap: 32px; }
  .legal__toc { position: static; max-height: none; background: var(--grey50); border-radius: 20px; padding: 20px; }
  .summary-cards { grid-template-columns: 1fr; }
}

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth__main { display: flex; flex-direction: column; padding: 24px 40px; background: var(--bg); }
.auth__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auth__top .back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--muted); }
.auth__top .back .i { transform: rotate(180deg); width: 18px; height: 18px; }
.auth__top .back:hover { color: var(--ink); }
.auth__form { width: 100%; max-width: 400px; margin: auto; padding: 40px 0; }
.auth__form h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.auth__form p.sub { color: var(--body); margin-top: 8px; font-size: 16px; }
.auth__form p.sub a { color: var(--blue) !important; text-decoration: none !important; font-weight: 600 !important; }
.social { display: grid; gap: 8px; margin-top: 36px; }
.social__btn { height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; background: var(--grey-opa); color: var(--ink); position: relative; transition: transform .35s var(--spring), filter .2s; }
.social__btn:hover { filter: brightness(.97); }
.social__btn:active { transform: scale(.96); }
.social__btn .i { width: 20px; height: 20px; position: absolute; left: 20px; }
.social__btn.kakao { background: #FEE500; color: #191600; }
.social__btn.naver { background: #03C75A; color: #fff; }
.social__btn.naver .i { width: 15px; height: 15px; left: 22px; }
.social__btn.apple { background: var(--grey900); color: var(--on-ink); }
.social__btn .last { position: absolute; right: 12px; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: #3182F6; color: #fff; animation: popIn2 .7s var(--spring) both .3s; }
@keyframes popIn2 { from { opacity: 0; transform: scale(.3) rotate(-20deg); } to { transform: rotate(-4deg); } }
.divider { display: flex; align-items: center; gap: 14px; margin: 28px 0; color: var(--faint); font-size: 14px; font-weight: 500; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.input { position: relative; }
.input input { width: 100%; height: 54px; border-radius: 14px; border: 0; background: var(--grey100); padding: 0 16px; font-size: 16px; font-weight: 500; color: var(--ink); transition: box-shadow .2s, background-color .2s; }
.input input::placeholder { color: var(--grey400); font-weight: 400; }
.input input:focus { outline: none; background: var(--card); box-shadow: inset 0 0 0 2px var(--blue); }
.input.has-btn input { padding-right: 52px; }
.input .eye { position: absolute; right: 9px; top: 9px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--grey400); }
.input .eye:hover { color: var(--ink); background: var(--grey-opa); }
.field.is-error .input input { box-shadow: inset 0 0 0 2px var(--bad); background: var(--card); animation: shake .4s; }
.field .err { font-size: 14px; color: var(--bad); font-weight: 500; display: none; }
.field.is-error .err { display: block; animation: popUp .35s var(--spring-soft); }
.field.is-ok .input::after { content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 5px; border: solid var(--good); border-width: 0 0 2.4px 2.4px; transform: translateY(-70%) rotate(-45deg); }
.field.is-ok.has-eye .input::after { right: 56px; }
.strength { height: 2px; border-radius: 2px; background: var(--grey200); overflow: hidden; margin-top: 2px; }
.strength i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .35s ease, background-color .3s; }
.strength-label { font-size: 14px; color: var(--muted); font-weight: 500; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 24px; font-size: 15px; }
.row-between > a { color: var(--muted) !important; font-weight: 500 !important; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink-2); user-select: none; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { width: 22px; height: 22px; border-radius: 50%; background: var(--grey200); display: grid; place-items: center; transition: background-color .2s, transform .45s var(--spring); flex: none; }
.check .box .i { width: 14px; height: 14px; color: #fff; stroke-width: 3; }
.check input:checked + .box { background: var(--blue); transform: scale(1.1); }
.check input:focus-visible + .box { outline: 2px solid var(--blue); outline-offset: 2px; }
.agree { border-radius: 20px; background: var(--grey50); padding: 6px 18px; margin: 8px 0 24px; }
.agree__all { padding: 14px 0; border-bottom: 1px solid var(--line); }
.agree__all .check { font-weight: 700; color: var(--ink); font-size: 16px; }
.agree__list { padding: 8px 0; display: grid; gap: 2px; }
.agree__row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.agree__row a { font-size: 14px; color: var(--muted); font-weight: 500; }
.agree__row .req { color: var(--blue); font-weight: 600; margin-right: 4px; }
.agree__row .opt { color: var(--faint); font-weight: 600; margin-right: 4px; }
.auth__fine { font-size: 13px; color: var(--faint); text-align: center; margin-top: 20px; line-height: 1.6; }
.auth__fine a { text-decoration: underline; text-underline-offset: 2px; }
.auth-step { display: none; }
.auth-step.is-on { display: block; animation: stepIn .65s var(--spring-soft); }
@keyframes stepIn { from { opacity: 0; transform: translateX(30px); } }
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 28px 0; }
.goal { position: relative; }
.goal input { position: absolute; opacity: 0; }
.goal span { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px; background: var(--grey100); cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink-2); transition: background-color .2s, box-shadow .2s, transform .45s var(--spring); }
.goal span .e { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--muted); transition: background-color .2s, color .2s, transform .55s var(--spring); }
.goal span .e .i { width: 20px; height: 20px; }
.goal input:checked + span { background: var(--blue-weak); box-shadow: inset 0 0 0 2px var(--blue); color: var(--ink); }
.goal input:checked + span .e { background: var(--blue); color: #fff; transform: rotate(-10deg) scale(1.1); }
.goal input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.success { text-align: center; padding: 20px 0; }
.success .burst { width: 96px; height: 96px; border-radius: 32px; background: var(--blue); display: grid; place-items: center; margin: 0 auto 28px; animation: burst .9s var(--spring) both; }
.success .burst .i { width: 44px; height: 44px; color: #fff; stroke-width: 2.6; }
@keyframes burst { from { opacity: 0; transform: scale(.2) rotate(-45deg); } to { transform: rotate(-6deg); } }
.confetti { position: fixed; top: 0; left: 0; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; z-index: 400; }
@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth__main { padding: 16px 20px; }
}

/* ---------- misc ---------- */
/* ---------- floating bottom CTA (pops up after the hero, hides at the final CTA/footer) ---------- */
.fab-cta { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: inline-flex; align-items: center; gap: 12px;
  height: 72px; padding: 0 18px 0 28px; border-radius: 22px; background: var(--grey900); color: var(--on-ink); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap;
  box-shadow: 0 12px 32px rgba(0, 27, 55, .22); transform: translate(-50%, calc(100% + 40px)) scale(.92); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease), opacity .35s var(--ease), visibility 0s .5s; }
.fab-cta.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .65s var(--spring), opacity .3s var(--ease), visibility 0s; }
.fab-cta.is-on:active { transform: translate(-50%, 0) scale(.97); transition-duration: .15s; }
.fab-cta .i { width: 26px; height: 26px; flex: none; }
.fab-cta__chip { font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; line-height: 1; padding: 6px 8px; border-radius: 5px; background: var(--on-ink); color: var(--grey900); }
@media (max-width: 420px) { .fab-cta { height: 64px; font-size: 19px; padding: 0 14px 0 22px; } }
@media (prefers-reduced-motion: reduce) { .fab-cta, .fab-cta.is-on { transition: opacity .2s, visibility 0s; } }

.toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 24px) scale(.9); background: var(--grey900); color: var(--on-ink); padding: 14px 20px; border-radius: 16px; font-size: 15px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .55s var(--spring); z-index: 300; max-width: calc(100% - 32px); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* footer (Toss: columns + huge wordmark) */
.footer { padding: 96px 0 0; background: var(--bg); overflow: hidden; overflow: clip; border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.footer__brand .logo { display: none; }
.footer__brand p { color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.footer__apps { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.store { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--grey-opa); font-weight: 600; font-size: 14px; line-height: 1.1; color: var(--ink-2); transition: background-color .2s, transform .35s var(--spring); }
.store:hover { background: var(--grey-opa-2); }
.store:active { transform: scale(.94); }
.store small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer__cols h4 { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.footer__cols a { display: block; font-size: 16px; font-weight: 600; color: var(--body); padding: 4px 0; transition: color .2s; }
.footer__cols a:hover { color: var(--ink); }
.footer__cols a b { font-weight: 800; color: var(--ink-2); }
.footer__biz { margin-top: 72px; font-size: 14px; color: var(--muted); line-height: 1.8; font-weight: 500; }
.footer__copy { margin-top: 8px; color: var(--faint); }
.footer__giant { margin-top: 56px; aspect-ratio: 1855 / 440; overflow: hidden; }
.footer__giant span { display: block; width: 100%; aspect-ratio: 1855 / 525; background: linear-gradient(180deg, var(--ink) 20%, transparent 100%); -webkit-mask: url(../img/logo-notely-lg.png) center / 100% 100% no-repeat; mask: url(../img/logo-notely-lg.png) center / 100% 100% no-repeat; opacity: .14; transform: translateY(60%) scale(.96); transform-origin: 50% 100%; transition: transform 1.4s var(--spring-soft), opacity 1.4s ease; }
.footer__giant.is-in span { transform: none; }
@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal-scale, .reveal-left, .reveal-right { opacity: 1; transform: none; filter: none; }
  .split .w > span, .slot__ch, .footer__giant span { transform: none; }
  .marquee__track { animation: none; }
}

/* Toss signature: big statement lines light up as they cross the viewport */
.statement { font-size: clamp(36px, 5.6vw, 80px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.28; text-align: center; }
.statement > span { display: block; }
.statement em { font-style: normal; }
.auth__alt { text-align: center; margin-top: 20px; font-size: 15px; color: var(--muted); }
.auth__alt a { color: var(--blue); font-weight: 600; }


/* ==========================================================================
   Apple-style layer: real product screens, quiet motion
   ========================================================================== */
.link-more { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 600; color: var(--blue); }
.link-more .i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.link-more:hover .i { transform: translateX(3px); }
.hero__cta .link-more .i { transform: rotate(-90deg); }
.hero__cta { align-items: center; gap: 20px; }
.copy { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--muted); font-weight: 500; margin: 24px 0 28px; max-width: 520px; }
.copy b { color: var(--ink); font-weight: 600; }

/* hero */
.hero--apple { padding-bottom: 0; }
.hero--apple .h-display { font-size: clamp(42px, 6vw, 80px); line-height: 1.18; }
.hero--apple .hero__bg { display: none; }
.hero-device { max-width: 1180px; margin: 72px auto 0; padding: 0 24px; transform-origin: 50% 0; will-change: transform; }
@media (max-width: 720px) { .hero-device { margin-top: 48px; padding: 0 12px; } }

/* device frame (browser window) holding a real screenshot */
.device { margin: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 80px -20px rgba(0,27,55,.25), 0 12px 24px -12px rgba(0,27,55,.12); }
.device img { display: block; width: 100%; height: auto; }
.device__bar { height: 40px; display: flex; align-items: center; padding: 0 16px; background: #F6F7F9; border-bottom: 1px solid #E8EBF0; position: relative; }
.device__dots { display: flex; gap: 7px; }
.device__dots i { width: 11px; height: 11px; border-radius: 50%; background: #E0E3E8; }
.device__url { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 14px; border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 500; color: #8F959E; box-shadow: inset 0 0 0 1px #E8EBF0; }
.device__url .i { width: 12px; height: 12px; }
@media (max-width: 720px) { .device { border-radius: 14px; } .device__bar { height: 28px; } .device__dots i { width: 8px; height: 8px; } .device__url { display: none; } }

/* highlights gallery */
.gallery { margin-top: 48px; }
.gallery__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 0 max(24px, calc((100vw - var(--wrap)) / 2)); scroll-padding: 0 max(24px, calc((100vw - var(--wrap)) / 2)); }
.gallery__track::-webkit-scrollbar { display: none; }
.gcard { flex: 0 0 min(980px, 86vw); scroll-snap-align: start; border-radius: 28px; background: var(--grey100); overflow: hidden; display: flex; flex-direction: column; height: min(640px, 70vw); }
.gcard__cap { padding: 44px 48px 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.45; font-weight: 600; color: var(--muted); max-width: 720px; letter-spacing: -0.02em; }
.gcard__cap b { color: var(--ink); font-weight: 700; margin-right: 4px; }
.gcard__media { margin: 36px 0 0 48px; flex: 1; min-height: 0; border-radius: 16px 0 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 20px 50px -20px rgba(0,27,55,.25); background: #fff; }
.gcard__media img { width: 100%; height: auto; display: block; }
.gallery__ctrl { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 24px; }
.gallery__dots { display: flex; gap: 10px; align-items: center; padding: 18px 22px; border-radius: 999px; background: var(--grey100); }
.gallery__dots button { width: 8px; height: 8px; border-radius: 999px; background: var(--grey400); position: relative; overflow: hidden; transition: width .5s var(--ease), background-color .3s; }
.gallery__dots button.is-on { width: 48px; background: var(--grey300); }
.gallery__dots button.is-on::after { content: ""; position: absolute; inset: 0; background: var(--grey700); transform-origin: left; transform: scaleX(0); }
.gallery.is-playing .gallery__dots button.is-on::after { animation: dotfill var(--gdur, 5s) linear forwards; }
.gallery:not(.is-playing) .gallery__dots button.is-on::after { transform: scaleX(1); }
@keyframes dotfill { to { transform: scaleX(1); } }
.gallery__play { width: 56px; height: 56px; border-radius: 50%; background: var(--grey100); display: grid; place-items: center; color: var(--ink-2); }
.gallery__play .i { width: 18px; height: 18px; fill: currentColor; }
.gallery__play .on-pause { display: none; }
.gallery:not(.is-playing) .gallery__play .on-play { display: none; }
.gallery:not(.is-playing) .gallery__play .on-pause { display: block; }
@media (max-width: 720px) { .gcard { height: 120vw; } .gcard__cap { padding: 28px 24px 0; } .gcard__media { margin: 24px 0 0 24px; } }

/* closer look */
.closer { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; margin-top: 56px; padding: 56px; border-radius: 32px; background: var(--grey100); }
.closer__list { display: grid; gap: 10px; align-content: center; }
.closer__item { text-align: left; display: block; }
.closer__pill { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 16px; border-radius: 999px; background: var(--card); font-size: 17px; font-weight: 600; color: var(--ink); box-shadow: 0 0 0 1px var(--grey-opa); transition: background-color .3s; }
.closer__pill .i { width: 22px; height: 22px; padding: 3px; border-radius: 50%; border: 1.5px solid var(--grey400); transition: transform .4s var(--ease); }
.closer__item:hover .closer__pill { background: var(--grey50); }
.closer__desc { display: none; font-size: 16px; line-height: 1.6; color: var(--muted); font-weight: 500; }
.closer__desc b { color: var(--ink); font-weight: 600; }
.closer__item.is-on .closer__pill { display: none; }
.closer__item.is-on .closer__desc { display: block; padding: 22px 24px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa); animation: descIn .5s var(--ease); }
@keyframes descIn { from { opacity: 0; transform: translateY(6px); } }
.closer__device { position: relative; }
.closer__screens { position: relative; }
.closer__screens img { width: 100%; height: auto; display: block; }
.closer__screens img:not(:first-child) { position: absolute; inset: 0; }
.closer__screens img { opacity: 0; transition: opacity .6s var(--ease); }
.closer__screens img.is-on { opacity: 1; }
.closer__screens img:first-child:not(.is-on) { opacity: 0; }
@media (max-width: 960px) { .closer { grid-template-columns: 1fr; padding: 24px; gap: 24px; } .closer__device { order: -1; } }

/* phones */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .split2 { grid-template-columns: 1fr; gap: 40px; } }
.phones { position: relative; height: 640px; }
.phone { position: absolute; margin: 0; width: 290px; border-radius: 44px; padding: 10px; background: #1C1F25; box-shadow: 0 30px 70px -20px rgba(0,27,55,.35); }
.phone img { border-radius: 34px; width: 100%; height: auto; display: block; }
.phone:first-child { left: 8%; top: 0; z-index: 2; }
.phone--back { right: 4%; top: 70px; z-index: 1; }
@media (max-width: 720px) { .phones { height: 520px; } .phone { width: 220px; border-radius: 34px; padding: 8px; } .phone img { border-radius: 27px; } .phone:first-child { left: 0; } .phone--back { right: 0; } }

/* steps */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; border-top: 1px solid var(--line); padding-top: 40px; }
.steps3__n { font-size: 15px; font-weight: 700; color: var(--blue); }
.steps3 h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 8px; }
.steps3 p { color: var(--muted); font-size: 17px; font-weight: 500; }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; gap: 28px; } }

.plans--2 { grid-template-columns: 1fr 1fr; margin-top: 0; }
@media (max-width: 640px) { .plans--2 { grid-template-columns: 1fr; } }
.faq .ans a { color: var(--blue); }

/* features overview: cards with real screens */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fcard { display: flex; flex-direction: column; border-radius: 28px; background: var(--grey100); overflow: hidden; color: var(--ink); min-height: 520px; transition: transform .5s var(--ease); }
.fcard--wide { grid-column: 1 / -1; min-height: 600px; }
.fcard__txt { padding: 40px 44px 0; }
.fcard__txt h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.03em; }
.fcard__txt p { margin-top: 10px; font-size: 18px; font-weight: 500; color: var(--muted); line-height: 1.55; max-width: 560px; }
.fcard__txt p b { color: var(--ink); font-weight: 600; }
.fcard__txt .link-more { margin-top: 14px; font-size: 16px; }
.fcard__img { margin: 32px 0 0 44px; flex: 1; border-radius: 14px 0 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 20px 50px -20px rgba(0,27,55,.25); background: #fff; max-height: 520px; }
.fcard__img img { width: 100%; height: auto; display: block; }
.fcard--wide .fcard__img { margin-left: 44px; margin-right: 0; }
@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr; } .fcard, .fcard--wide { min-height: 0; } .fcard__txt { padding: 28px 24px 0; } .fcard__img { margin: 24px 0 0 24px; max-height: 360px; } }
/* feature pages: device frames sit in the hero column */
.fhero .device, .frow .device { max-width: 100%; }
.step::before { content: none; }
.step h4 { margin-top: 0; }
.step { padding: 36px 32px; }
@media (max-width: 720px) { .gcard { height: auto; } .gcard__media { flex: none; } }
.step .art { margin-top: 24px; height: 132px; border-radius: 20px; background: var(--card); display: grid; place-items: center; overflow: hidden; }
.section--soft .step .art { background: var(--grey50); }

/* hero social proof: avatars + cumulative stats under the CTA */
.loved { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.loved p { margin: 0; font-size: 13px; color: var(--muted); word-break: keep-all; text-wrap: balance; }
.loved strong { font-weight: 600; color: var(--ink); }
.loved__faces { display: flex; }
.loved__faces i { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--bg); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }
.loved__faces i:first-child { margin-left: 0; }
.loved__faces img { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--bg); object-fit: cover; display: block; }
.loved__faces img:first-child { margin-left: 0; }
@media (max-width: 720px) { .loved { flex-direction: column; gap: 10px; margin-top: 20px; } .loved p span { display: block; } }

/* hero mascot (sudal2): sits at the headline's bottom-left */
.hero-title { position: relative; display: inline-block; }
.hero-mascot {
  position: absolute; left: -320px; bottom: -78px; width: 230px; height: auto; pointer-events: none;
}
@media (max-width: 1100px) { .hero-mascot { left: -200px; bottom: -64px; width: 170px; } }
@media (max-width: 860px) { .hero-mascot { position: static; display: block; width: 150px; margin: 4px auto -8px; } }
/* second mascot (sudal1): headline's top-right, mirrors the first.
   Anchored to the title's centre (which never moves) rather than its right edge,
   so it stays put while the rotating word changes the title's width. */
.hero-mascot--tr { bottom: auto; left: calc(50% + min(22vw, 293px) + 80px); top: -90px; width: 230px; }
@media (max-width: 1100px) { .hero-mascot--tr { bottom: auto; left: calc(50% + 22vw + 30px); top: -66px; width: 165px; } }
@media (max-width: 860px) { .hero-mascot--tr { display: none; } }


/* highlights: sticky stage, vertical scroll = horizontal travel */
.hs { position: relative; }
.hs__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 36px; overflow: hidden; padding-top: var(--nav-h); }
.hs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hs__dots { display: flex; gap: 8px; padding-bottom: 10px; }
.hs__dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--grey300); transition: width .45s var(--ease), background-color .3s; }
.hs__dots i.is-on { width: 32px; background: var(--ink); }
.hs__track { display: flex; gap: 20px; width: max-content; padding: 0 max(24px, calc((100vw - var(--wrap)) / 2)); will-change: transform; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.hs .gcard { flex: 0 0 min(980px, 84vw); height: min(560px, calc(100vh - 260px)); }
@media (max-width: 720px) { .hs__sticky { gap: 20px; } .hs .gcard { height: min(520px, calc(100vh - 220px)); } .hs__dots { display: none; } }

/* statement: sticky, characters fill in with scroll */
.st { position: relative; height: 220vh; background: var(--bg-soft); }
.st__sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 24px; }
.statement .sc { color: var(--grey300); transition: color .35s var(--ease); }
.statement .sc.is-lit { color: var(--ink); }
.statement em .sc.is-lit { color: var(--blue); }
@media (max-width: 720px) { .st { height: 180vh; } }

/* steps (speak-style): sticky headline on the left, step cards deepen in blue on the right */
.stepflow {
  --s1: #E8F3FF; --s2: #B9D6FF; --s3: #3182F6; --s4: #103D7C;
  --s-ink: #0B2A5B; --s-ink-on: #FFFFFF;
}
:root[data-theme="dark"] .stepflow { --s1: #16253D; --s2: #1C3560; --s3: #2B6BD6; --s4: #0E2A55; --s-ink: #EAF2FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stepflow { --s1: #16253D; --s2: #1C3560; --s3: #2B6BD6; --s4: #0E2A55; --s-ink: #EAF2FF; } }
.stepflow__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.stepflow__aside { align-self: stretch; }
.stepflow__sticky { position: sticky; top: calc(var(--nav-h) + 96px); }
.stepflow__title { margin: 0; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.25; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); }
.stepflow__lead { margin: 32px 0 0; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.6; font-weight: 600; color: var(--muted); word-break: keep-all; }
.stepflow__cards { display: flex; flex-direction: column; gap: 40px; }
.scard { border-radius: 32px; padding: 52px 56px 56px; background: var(--s1); color: var(--s-ink); overflow: hidden; }
.scard--2 { background: var(--s2); }
.scard--3 { background: var(--s3); color: var(--s-ink-on); }
.scard--4 { background: var(--s4); color: var(--s-ink-on); }
.scard__head { display: flex; align-items: center; gap: 18px; }
.scard__step { padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.92); color: var(--blue-press); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.scard h3 { margin: 0; font-size: clamp(30px, 3vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.scard > p { margin: 28px 0 0; font-size: clamp(17px, 1.7vw, 24px); line-height: 1.55; font-weight: 500; letter-spacing: -0.02em; word-break: keep-all; color: inherit; opacity: .88; }
.scard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 15px; font-weight: 600; color: inherit; opacity: .7; transition: opacity .2s; }
.scard__more:hover { opacity: 1; }
.scard__more .i { width: 16px; height: 16px; }
.scard__visual { margin-top: 40px; color: var(--ink); }
.scard--4 .scard__visual { color: inherit; }
.scard .rec, .scard .quiz { box-shadow: 0 20px 50px -24px rgba(0, 27, 55, .35); }
/* step 2: mini summary sheet */
.ssum { border-radius: 24px; padding: 26px 28px; background: var(--card); color: var(--ink); box-shadow: 0 20px 50px -24px rgba(0, 27, 55, .35); display: flex; flex-direction: column; gap: 12px; }
.ssum__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.ssum__row { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--grey50); font-size: 15px; }
.ssum__row b { font-weight: 600; }
.ssum__row span { color: var(--body); }
.ssum__row.is-hot { background: var(--blue-weak); }
.ssum__row em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--blue); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.ssum__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ssum__tags i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--blue); }
/* step 4: accuracy bars grow in */
.sbars { display: flex; justify-content: flex-end; align-items: flex-end; gap: 28px; height: 300px; }
.sbars > div { width: 108px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; }
.sbars i { display: block; width: 100%; height: var(--h); border-radius: 12px; background: rgba(255,255,255,.22); transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--spring-soft); }
.sbars > div:nth-child(2) i { background: rgba(255,255,255,.5); transition-delay: .12s; }
.sbars > div:nth-child(3) i { background: #5AA2FF; transition-delay: .24s; }
.sbars.is-in i { transform: none; }
.sbars span { font-size: 18px; font-weight: 700; }
.sbars small { font-size: 13px; opacity: .7; }
@media (max-width: 960px) {
  .stepflow__grid { grid-template-columns: 1fr; gap: 40px; }
  .stepflow__sticky { position: static; }
  .stepflow__cards { gap: 20px; }
  .scard { padding: 32px 24px 28px; border-radius: 28px; }
  .scard__step { font-size: 15px; padding: 6px 11px; }
  .scard > p { margin-top: 18px; }
  .scard__visual { margin-top: 28px; }
  .ssum { padding: 20px; }
  .ssum__row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .ssum__row span { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .sbars { height: 220px; gap: 16px; justify-content: center; }
  .sbars > div { width: 76px; }
}


/* STEP 1: fixed-height live transcript, smaller type */
.rec__lines { height: 170px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(transparent, #000 34%); mask-image: linear-gradient(transparent, #000 34%); }
.scard .rec__lines { height: 128px; font-size: 14px; line-height: 1.6; padding: 6px 20px 18px; }
.scard .rec__lines p { margin: 0 0 6px; }
.scard .rec__lines .ts { font-size: 11px; }

/* STEP 3: auto-playing quiz with fixed height; feedback is a bottom sheet */
.quiz--auto { position: relative; overflow: hidden; }
.quiz--auto .quiz__q { height: 3em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quiz--auto .quiz__opt { cursor: default; transition: background-color .2s, box-shadow .2s, transform .18s; }
.quiz--auto .quiz__opt.is-press { transform: scale(.97); background: var(--grey100); }
/* feedback lives in a reserved footer: hint → result crossfade, nothing is covered */
.quiz--auto { display: flex; flex-direction: column; }
.quiz--auto .quiz__opts { min-height: 232px; align-content: start; }
.quiz__ok { width: 18px; height: 18px; margin-left: auto; color: var(--good); stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .45s var(--spring); }
.quiz--auto .quiz__opt.is-right .quiz__ok { opacity: 1; transform: none; }
.quiz--auto .quiz__opt.is-right { animation: rightPop .55s var(--spring); }
.quiz__foot { position: relative; height: 118px; margin: 16px -24px -24px; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--grey50); overflow: hidden; transition: background-color .4s; }
.quiz__foot.is-done { background: var(--green-bg); }
.quiz__hint, .quiz__fb { position: absolute; left: 24px; right: 24px; top: 18px; transition: opacity .35s, transform .45s var(--ease); }
.quiz__hint { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--muted); }
.quiz__hint .i { color: var(--blue); }
.quiz__fb { opacity: 0; transform: translateY(10px); }
.quiz__foot.is-done .quiz__hint { opacity: 0; transform: translateY(-10px); }
.quiz__foot.is-done .quiz__fb { opacity: 1; transform: none; transition-delay: .08s; }
.quiz__fb > b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--good); }
.quiz__fb > b .i { stroke-width: 2.6; }
.quiz__fb em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: #fff; color: var(--good); }
.quiz__fb p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qcursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; pointer-events: none; opacity: 0; transform: translate(70%, 110%);
  transition: transform .85s cubic-bezier(.5, 0, .2, 1), opacity .3s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); z-index: 2; }
.qcursor.is-on { opacity: 1; }
.qcursor svg { width: 100%; height: 100%; transition: transform .15s; }
.qcursor.is-click svg { transform: scale(.8); }
.qcursor::after { content: ""; position: absolute; left: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; }
.qcursor.is-click::after { animation: qripple .5s ease-out; }
@keyframes qripple { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.6); } }


/* STEP 4: dashed forgetting/review curve over the bars */
.sbars { position: relative; }
.sbars__curve { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none;
  clip-path: inset(-20px 100% -20px 0); transition: clip-path 1.8s cubic-bezier(.45, 0, .2, 1) .5s; }
.sbars.is-in .sbars__curve { clip-path: inset(-20px -20px -20px 0); }
.sbars__curve .track { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 7 7; stroke-linecap: round; opacity: .9; }
.sbars__curve circle { fill: #fff; }
.sbars__curve circle.up { fill: #5AA2FF; stroke: #fff; stroke-width: 2; }
.sbars__curve text { fill: #fff; opacity: .75; font: 600 13px var(--font); letter-spacing: -0.01em; }
/* curve variant: bars a bit shorter, % labels under the bars, clear space above for the curve */
.sbars[data-curve] { height: 340px; }
.sbars[data-curve] > div { gap: 6px; }
.sbars[data-curve] i { height: calc(var(--h) * .7); order: 1; }
.sbars[data-curve] span { order: 2; margin-top: 6px; }
.sbars[data-curve] small { order: 3; }
@media (max-width: 720px) { .sbars[data-curve] { height: 280px; } }

/* reviews: two marquee rows, the second runs the other way */
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee + .marquee { margin-top: 4px; }
.reviews-note { font-size: 13px; color: var(--faint); }

.quiz__fb p b { display: inline; font-weight: 700; color: var(--ink); }
.review .uni { height: 36px; min-width: 36px; padding: 4px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--grey-opa-2); display: grid; place-items: center; flex: none; }
.review .uni img { height: 28px; width: auto; max-width: 96px; object-fit: contain; display: block; }
.review .who b { font-weight: 600; color: var(--ink); }

.quiz--auto .quiz__q { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--ink); opacity: 1; }
.quiz--auto .quiz__hint { margin: 0; font-size: 14px; line-height: 1.5; opacity: 1; }
.quiz--auto .quiz__fb p { opacity: 1; letter-spacing: -0.01em; }
.quiz--auto .quiz__hint { top: 50%; transform: translateY(-50%); justify-content: center; }
.quiz--auto .quiz__foot.is-done .quiz__hint { transform: translateY(calc(-50% - 10px)); }

/* footer is plain white until an answer is chosen */
.quiz--auto .quiz__foot { background: var(--card); border-top-color: transparent; transition: background-color .4s, border-color .4s; }
.quiz--auto .quiz__foot.is-done { background: var(--green-bg); border-top-color: var(--line); }

/* ==========================================================================
   Plan cards v2: icon + badge row, featured gradient, divider, check circles
   ========================================================================== */
.plan { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,27,55,.04), 0 12px 32px -18px rgba(0,27,55,.18); padding: 28px 26px 30px; overflow: hidden; }
.section--soft .plan { border-color: transparent; }
.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.plan__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.plan__ic .i { width: 22px; height: 22px; }
.plan__tag { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; background: var(--grey100); color: var(--body); }
.plan__tag .i { width: 14px; height: 14px; }
.plan__tag.is-pro { background: var(--purple-bg); color: var(--purple); }
.plan__name { font-size: 22px; }
.plan__price .amt { font-size: 44px; }
.plan__save { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 700; background: var(--blue-weak); color: var(--blue); vertical-align: 1px; }
.plan .btn { margin: 22px 0 0; }
.plan ul { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.plan li .i { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--blue-weak); color: var(--blue); stroke-width: 3.2; margin-top: 1px; flex: none; }
.plan li.off .i { background: var(--grey100); color: var(--grey400); }
.plan__more { margin: 22px 0 -10px; }
.plan__more + ul { margin-top: 18px; }

/* featured (Pro) */
.plan.is-pop { border: 0; background: linear-gradient(160deg, #4A93FF 0%, #3182F6 45%, #1B64DA 100%); box-shadow: 0 24px 60px -24px rgba(49,130,246,.65), 0 0 0 1px rgba(255,255,255,.12) inset; --line: rgba(255,255,255,.22); }
.plan.is-pop::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); pointer-events: none; }
.plan.is-pop .plan__ic { background: rgba(255,255,255,.18); color: #fff; }
.plan.is-pop .plan__tag.is-hot { background: #fff; color: var(--blue-press); box-shadow: 0 6px 16px -6px rgba(0,0,0,.25); }
.plan.is-pop .plan__tag.is-hot .i { color: #FF6B3D; }
.plan.is-pop .plan__save { background: rgba(255,255,255,.2); color: #fff; }
.plan.is-pop li .i { background: rgba(255,255,255,.22); color: #fff; }
.plan.is-pop .btn-primary { background: #fff; color: var(--blue-press); }
@media (min-width: 1081px) { .plans:not(.plans--2) .plan.is-pop { transform: translateY(-12px); } .plans:not(.plans--2) .plan.is-pop:hover { transform: translateY(-12px); } }

/* ==========================================================================
   Compare table: header row (plan + price) sticks under the nav while scrolling
   ========================================================================== */
.table-scroll { overflow: visible; }
.compare { border-collapse: separate; border-spacing: 0; }
.compare thead th { top: var(--nav-h); z-index: 5; background: var(--bg-soft); padding: 16px 12px; border-bottom: 1px solid var(--line-2); vertical-align: bottom; }
.section:not(.section--soft) .compare thead th { background: var(--bg); }
.compare thead th b { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.compare thead th small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.compare thead th.hl { background: var(--blue); border-radius: 14px 14px 0 0; }
.compare thead th.hl b, .compare thead th.hl small { color: #fff; }
.compare thead.is-stuck th { box-shadow: 0 10px 16px -14px rgba(0,27,55,.35); }
.compare .compare__feat { text-align: left; width: 34%; }
.compare td.hl { background: var(--blue-weak); }
.compare tbody tr:last-child td.hl { border-radius: 0 0 14px 14px; }
@media (max-width: 720px) {
  .compare { font-size: 13px; }
  .compare th, .compare td { padding: 12px 4px; }
  .compare thead th { padding: 12px 4px; }
  .compare thead th b { font-size: 14px; }
  .compare thead th small { font-size: 10.5px; }
  .compare .compare__feat { width: 30%; }
  .compare .i { width: 16px; height: 16px; }
}
.plan .btn-ghost, .section--soft .plan .btn-ghost { background: var(--grey100); color: var(--ink); }
.plan .btn-ghost:hover { background: var(--grey200); }
.section .compare thead th.hl { background: var(--blue); }

/* ==========================================================================
   Pricing cards (litt.ly-style): featured card = thick blue border + soft
   gradient + corner "가장 인기" tab; others = white with hairline border
   ========================================================================== */
.pcards { display: grid; gap: 20px; align-items: stretch; margin-top: 56px; }
.pcards--3 { grid-template-columns: repeat(3, 1fr); }
.pcards--2 { grid-template-columns: 1fr 1fr; margin-top: 0; }
@media (max-width: 960px) { .pcards--3 { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) { .pcards--2 { grid-template-columns: 1fr; } }
.pcard { position: relative; display: flex; flex-direction: column; padding: 36px 32px 32px; border-radius: 30px; background: var(--card); border: 1px solid #D2D6E1; overflow: hidden; transition: transform .45s var(--spring-soft), box-shadow .3s; }
.pcard:hover { box-shadow: 0 24px 48px -28px rgba(0, 27, 55, .3); }
.pcard.is-pop { border: 4px solid var(--blue); padding: 33px 29px 29px; background: linear-gradient(180deg, #F5F7FF 0%, #FFFAFD 100%); }
:root[data-theme="dark"] .pcard { border-color: var(--line-2); }
:root[data-theme="dark"] .pcard.is-pop { background: linear-gradient(180deg, #1A2340 0%, #1D1B26 100%); border-color: var(--blue); }
.pcard__tab { position: absolute; top: 0; right: 0; padding: 9px 18px 10px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; border-bottom-left-radius: 20px; }
.pcard__name { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; color: #292A2F; }
.pcard.is-pop .pcard__name { color: var(--blue); }
:root[data-theme="dark"] .pcard__name { color: var(--ink); }
.pcard__desc { margin: 2px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.4; color: #727582; }
.pcard__price { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 20px; }
.pcard__amt { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; overflow: hidden; }
.pcard__per { align-self: flex-end; margin-bottom: 9px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.pcard__off { margin-left: 8px; padding: 4px 8px; border-radius: 6px; background: #FFB300; color: #000; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; transition: opacity .25s, transform .35s var(--spring); }
.pcards.is-monthly .pcard__off { opacity: 0; transform: scale(.6); }
.pcard__sub { margin: 4px 0 0; min-height: 22px; font-size: 14px; color: #727582; }
.pcard__sub s { opacity: .7; }
.pcard__line { height: 1px; background: #E9EBF1; margin: 24px 0; }
:root[data-theme="dark"] .pcard__line { background: var(--line); }
.pcard__lead { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pcard__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; flex: 1; align-content: start; }
.pcard__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #5D5F6D; letter-spacing: -0.02em; }
:root[data-theme="dark"] .pcard__list li, :root[data-theme="dark"] .pcard__desc, :root[data-theme="dark"] .pcard__sub { color: var(--body); }
.pcard__list li b { color: var(--ink); font-weight: 700; }
.pcard__list .i { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--blue); stroke-width: 3; }
.pcard__btn { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 20px; border: 1px solid #D2D6E1; background: var(--card); color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -0.03em; transition: background-color .2s, transform .2s; }
.pcard__btn:hover { background: var(--grey50); }
.pcard__btn:active { transform: scale(.98); }
.pcard.is-pop .pcard__btn { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 800; }
.pcard.is-pop .pcard__btn:hover { background: var(--blue-press); }
/* keep card text sizes independent of surrounding section styles (e.g. .frow p) */
.pcard .pcard__desc { font-size: 15px; line-height: 1.4; color: #727582; margin: 2px 0 0; }
.pcard .pcard__sub { font-size: 14px; line-height: 1.5; color: #727582; margin: 4px 0 0; }
.pcard .pcard__lead { font-size: 14px; line-height: 1.5; color: var(--ink); }
:root[data-theme="dark"] .pcard .pcard__desc, :root[data-theme="dark"] .pcard .pcard__sub { color: var(--body); }
.pcards--2 .pcard { padding: 32px 26px 26px; }
.pcards--2 .pcard.is-pop { padding: 29px 23px 23px; }
.pcards--2 .pcard__amt { font-size: 36px; }

/* ================= about (litt.ly-style company page) ================= */

/* hero: short centred line, mascot stickers either side */
.ahero { padding: calc(var(--nav-h) + 140px) 0 140px; position: relative; overflow: hidden; overflow: clip; text-align: center; }
.ahero__stage { position: relative; max-width: 1000px; margin: 0 auto; }
.ahero .lead { margin: 24px auto 0; max-width: 560px; word-break: keep-all; text-wrap: balance; }
.sticker { position: absolute; width: 230px; height: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 12px 24px rgba(0, 27, 55, .12)); transition: transform .5s var(--spring), filter .3s; animation: sticker-in .9s var(--spring) both; }
.sticker:hover { transform: rotate(var(--rot, 0deg)) scale(1.06); }
.sticker.is-drag { cursor: grabbing; transform: rotate(0deg) scale(1.1); filter: drop-shadow(0 24px 40px rgba(0, 27, 55, .2)); z-index: 5; }
.sticker--l { left: -110px; top: 40px; --rot: -10deg; transform: rotate(-10deg); animation-delay: .4s; }
.sticker--r { right: -110px; top: -40px; --rot: 8deg; transform: rotate(8deg); animation-delay: .55s; }
@keyframes sticker-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@media (max-width: 1100px) { .sticker { width: 170px; } .sticker--l { left: -40px; top: 150px; } .sticker--r { right: -40px; top: -70px; } }
@media (max-width: 860px) { .ahero { padding: calc(var(--nav-h) + 150px) 0 96px; } .sticker { width: 130px; } .sticker--l { left: -8px; top: auto; bottom: -70px; } .sticker--r { right: -8px; top: -140px; } }
/* pricing hero mascot */
.phero__stage { position: relative; max-width: 1000px; margin: 0 auto; }
.sticker--price { left: -20px; bottom: 30px; width: 210px; --rot: -6deg; transform: rotate(-6deg); animation-delay: .5s; z-index: 1; }
@media (max-width: 1100px) { .sticker--price { width: 170px; left: -10px; } }
@media (max-width: 860px) { .phero__stage { padding-bottom: 96px; } .sticker--price { width: 120px; left: 0; bottom: 6px; } }

/* papers: real first pages from each field, sliding sideways */
.papers .marquee { padding: 24px 0 32px; }
.papers .marquee__track { gap: 0; }
.paper { position: relative; flex: none; width: 260px; margin: 0 20px 0 0; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform .55s var(--spring-soft); }
.papers .marquee:hover .marquee__track { animation-play-state: running; }
.paper img { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 40px -18px rgba(0, 27, 55, .28); }
.paper__tag { position: absolute; top: 14px; right: 14px; padding: 6px 12px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 12px -4px rgba(0, 27, 55, .25); }
.paper .chip { backdrop-filter: blur(8px); }
.paper--slide { width: 380px; }
.papers .marquee--rev { padding-top: 8px; }
.papers__src { margin-top: 24px; text-align: center; font-size: 12px; color: var(--faint); }
@media (max-width: 720px) { .paper { width: 190px; margin-right: 14px; } .paper--slide { width: 270px; } }

/* origin */
.origin p { font-size: 18px; line-height: 1.85; color: #C9CDD5; }
.origin p + p { margin-top: 18px; }
.origin p b { color: #fff; font-weight: 600; }

/* lit heading: characters fill in on scroll */
.lit .sc { color: var(--grey300); transition: color .3s var(--ease); }
.lit .sc.is-lit { color: var(--ink); }

/* how we work */
.wcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wcard { background: var(--surface); border-radius: var(--r-lg); padding: 36px 32px; transition: transform .55s var(--spring-soft); }
.wcard .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; transition: transform .55s var(--spring); }
.wcard .ic .i { width: 26px; height: 26px; }
.wcard:hover .ic { transform: rotate(-10deg) scale(1.12); }
.wcard h4 { margin: 28px 0 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; }
.wcard p { color: var(--body); font-size: 16px; line-height: 1.65; }
.wcards--2 { grid-template-columns: repeat(2, 1fr); }
.wcard h4 small { display: block; margin-top: 2px; font-size: 16px; font-weight: 500; color: var(--muted); }
@media (max-width: 860px) { .wcards { grid-template-columns: 1fr; } .wcard { padding: 28px 24px; } .wcard h4 { margin-top: 20px; } }

@media (prefers-reduced-motion: reduce) { .sticker { animation: none; } }

/* ==========================================================================
   v3 (2026-10-14) — landing rebuilt around the current app UI
   ========================================================================== */

/* device chrome follows the theme */
:root[data-theme="dark"] .device { background: #17171C; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px rgba(0,0,0,.6); }
:root[data-theme="dark"] .device__bar { background: #202027; border-color: #2C2C35; }
:root[data-theme="dark"] .device__dots i { background: #3C3C47; }
:root[data-theme="dark"] .device__url { background: #2C2C35; color: #9E9EA4; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .device { background: #17171C; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px rgba(0,0,0,.6); }
  :root:not([data-theme="light"]) .device__bar { background: #202027; border-color: #2C2C35; }
  :root:not([data-theme="light"]) .device__dots i { background: #3C3C47; }
  :root:not([data-theme="light"]) .device__url { background: #2C2C35; color: #9E9EA4; box-shadow: none; }
}
.gcard__media img.on-dark, .closer__screens img.on-dark { display: none; }
:root[data-theme="dark"] .gcard__media img.on-light, :root[data-theme="dark"] .closer__screens img.on-light { display: none; }
:root[data-theme="dark"] .gcard__media img.on-dark, :root[data-theme="dark"] .closer__screens img.on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gcard__media img.on-light, :root:not([data-theme="light"]) .closer__screens img.on-light { display: none; }
  :root:not([data-theme="light"]) .gcard__media img.on-dark, :root:not([data-theme="light"]) .closer__screens img.on-dark { display: block; }
}

/* ---------- hero: live replica of the app home ---------- */
.hero-device { position: relative; }
.appx { container-type: inline-size; position: relative; z-index: 1; }
.appx__body { --u: calc(100cqw / 1132); display: grid; grid-template-columns: calc(220 * var(--u)) 1fr; height: calc(660 * var(--u)); background: var(--bg); text-align: left; font-size: calc(14 * var(--u)); color: var(--ink); }
.appx svg.a { width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex: none; }
.appx__side { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(16 * var(--u)) calc(10 * var(--u)); background: var(--grey50); border-right: 1px solid var(--line); }
.appx__logo { width: calc(72 * var(--u)); height: auto; margin: 0 calc(6 * var(--u)) calc(14 * var(--u)); }
.appx__search { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--grey-opa); color: var(--muted); font-size: calc(13 * var(--u)); }
.appx__search kbd { font: inherit; font-size: calc(10 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--card); color: var(--faint); }
.appx__search kbd:first-of-type { margin-left: auto; }
.appx__nav { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); color: var(--ink-2); font-size: calc(13.5 * var(--u)); }
.appx__nav.is-on { background: var(--grey-opa); font-weight: 600; }
.appx__cap { margin: calc(16 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--faint); }
.appx__doc { padding: calc(6 * var(--u)) calc(8 * var(--u)); font-size: calc(13 * var(--u)); color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appx__me { margin-top: auto; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; }
.appx__me i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: calc(10 * var(--u)); color: #fff; background: linear-gradient(135deg, #7B8CFF, #6B5CF6); }
.appx__main { display: flex; flex-direction: column; align-items: center; padding: calc(96 * var(--u)) calc(40 * var(--u)) 0; min-width: 0; }
.appx__hi { font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.appx__sub { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: var(--muted); }
.appx__sub b { color: var(--ink); }
.appx__ask { width: 100%; max-width: calc(620 * var(--u)); margin-top: calc(28 * var(--u)); padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--card); box-shadow: 0 calc(6 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.08), 0 0 0 1px var(--grey-opa); transition: box-shadow .4s var(--ease); }
.appx__ask.is-typing { box-shadow: 0 calc(8 * var(--u)) calc(34 * var(--u)) rgba(49,130,246,.16), 0 0 0 calc(1.5 * var(--u)) rgba(49,130,246,.45); }
.appx__in { position: relative; min-height: calc(44 * var(--u)); padding: 0 calc(2 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.5; }
.appx__ph { position: absolute; inset: 0 auto auto 0; padding: 0 calc(2 * var(--u)); color: var(--faint); transition: opacity .2s; }
.appx__ask.is-typing .appx__ph { opacity: 0; }
.appx__typed { color: var(--ink); }
.appx__typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: var(--blue); opacity: 0; }
.appx__ask.is-typing .appx__typed::after { opacity: 1; animation: blink 1s steps(1) infinite; }
.appx__tools { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); }
.appx__plus { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(9 * var(--u)); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.appx__plus .i, .appx__mic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: var(--ink-2); }
.appx__grow { flex: 1; }
.appx__send { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(13 * var(--u)); border-radius: 999px; background: var(--grey900); color: var(--on-ink); font-size: calc(13 * var(--u)); font-weight: 600; transition: transform .35s var(--spring), background-color .3s; }
.appx__send .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.appx__send.is-go { transform: scale(.9); background: var(--blue); color: #fff; }
.appx__cats { display: grid; grid-template-columns: auto auto; justify-content: center; gap: calc(26 * var(--u)) calc(60 * var(--u)); margin-top: calc(48 * var(--u)); }
.appx__cat--wide { grid-column: 1 / -1; }
.appx__cl { display: block; margin: 0 0 calc(12 * var(--u)) calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: var(--muted); }
.appx__row { display: flex; gap: calc(6 * var(--u)); }
.appx__tile { width: calc(82 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(9 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--ink-2); white-space: nowrap;
  opacity: 0; transform: translateY(calc(14 * var(--u))) scale(.8); transition: opacity .4s var(--ease), transform .8s var(--spring); transition-delay: calc(.5s + var(--k) * 70ms); }
.appx__tile img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); object-fit: contain; transition: transform .45s var(--spring); }
.appx.is-in .appx__tile, .hero-device.is-in .appx__tile { opacity: 1; transform: none; }
.appx__tile.is-pop img { transform: translateY(calc(-5 * var(--u))) scale(1.14) rotate(-6deg); }
@media (max-width: 760px) {
  .appx__body { --u: calc(100cqw / 460); grid-template-columns: 1fr; height: auto; }
  .appx__side { display: none; }
  .appx__main { padding: calc(44 * var(--u)) calc(18 * var(--u)) calc(30 * var(--u)); }
  .appx__hi { font-size: calc(24 * var(--u)); }
  .appx__cats { grid-template-columns: 1fr; gap: calc(18 * var(--u)); margin-top: calc(30 * var(--u)); }
  .appx__row { flex-wrap: wrap; }
  .appx__tile { width: calc(80 * var(--u)); font-size: calc(11 * var(--u)); }
}

/* hero mascots on phones: top-left and bottom-right of the headline, peeking from the edges (litt.ly) */
@media (max-width: 860px) {
  .hero--apple { padding-top: calc(var(--nav-h) + 120px); }
  .hero-title { position: relative; display: block; }
  .hero-mascot { position: absolute; display: block; margin: 0; left: -34px; top: -112px; bottom: auto; width: 128px; transform: rotate(-8deg); z-index: -1; }
  .hero-mascot--tr { display: block; left: auto; right: -30px; top: auto; bottom: -78px; width: 118px; transform: rotate(6deg); }
  .hero--apple .lead { position: relative; max-width: calc(100% - 64px); margin-left: 0; margin-right: auto; text-align: left; }
}
@media (max-width: 860px) { .hero--apple .lead { margin: 28px auto 0; text-align: center; max-width: 440px; } }

/* ---------- STEP 1: transcript like the app (time pill above each line, record bar at the bottom) ---------- */
.rec--v2 .rec__head { padding: 18px 20px 6px; gap: 10px; }
.rec__badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--grey100); font-size: 12.5px; font-weight: 600; color: var(--muted); flex: none; }
.rec__badge .i { width: 13px; height: 13px; }
.rec--v2 .rec__title { font-size: 14.5px; }
.rec__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--red); }
.rec__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; }
.rec--v2 .rec__lines { height: 214px; padding: 8px 20px 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.rec--v2 .rec__lines p { margin: 0 0 12px; }
.rec--v2 .rec__lines .ts { display: table; margin: 0 0 5px; padding: 2px 8px; border-radius: 999px; background: var(--grey100); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.rec__bar { display: flex; align-items: center; gap: 14px; margin: 0 14px 14px; padding: 8px 18px 8px 8px; border-radius: 999px; background: linear-gradient(180deg, var(--card), var(--grey50)); box-shadow: 0 0 0 1px rgba(49,130,246,.22), 0 10px 30px -10px rgba(49,130,246,.45); }
.rec__btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); flex: none; box-shadow: 0 0 0 0 rgba(49,130,246,.5); animation: recRing 2s infinite; }
.rec__btn i { width: 12px; height: 12px; border-radius: 3px; background: #fff; }
@keyframes recRing { 0% { box-shadow: 0 0 0 0 rgba(49,130,246,.45); } 70% { box-shadow: 0 0 0 12px rgba(49,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(49,130,246,0); } }
.rec__bar .wave { flex: 1; height: 28px; margin: 0; padding: 0; }
.rec__bar .wave i { background: var(--grey400); }
.rec--v2 .rec__time { font-size: 18px; font-weight: 600; color: var(--ink); }

/* ---------- STEP 2: summary sheet like the app ---------- */
.sum2 { border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 20px 50px -24px rgba(0, 27, 55, .35); overflow: hidden; }
.sum2__tabs { display: flex; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.sum2__tabs span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); flex: none; }
.sum2__tabs span.is-on { background: var(--grey900); color: var(--on-ink); font-weight: 600; }
.sum2__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.sum2__body > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .7s var(--spring-soft); transition-delay: calc(.25s + var(--k, 0) * 110ms); }
.sum2.is-in .sum2__body > *, .is-in .sum2 .sum2__body > * { opacity: 1; transform: none; }
.sum2__ov { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.sum2__h { margin-top: 4px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pg { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--grey100); font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: 1px; }
.sum2__ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.sum2__ol li { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .6s var(--spring-soft); transition-delay: calc(.25s + var(--k) * 110ms); }
.is-in .sum2__ol li { opacity: 1; transform: none; }
.sum2__ol li::marker { color: var(--muted); }
.sum2__tbl { display: grid; grid-template-columns: 70px 1fr; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); font-size: 13px; }
.sum2__tbl span { padding: 7px 10px; border-top: 1px solid var(--line); color: var(--body); }
.sum2__tbl span:nth-child(-n+2) { border-top: 0; }
.sum2__tbl span:nth-child(odd) { font-weight: 600; color: var(--ink); background: var(--grey50); }
.sum2__tip { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 12px; background: var(--blue-weak); font-size: 13.5px; color: var(--ink-2); }
.sum2__tip b { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; }

/* ---------- STEP 3: lesson screen like the app ---------- */
.quiz--lsn { padding: 22px 22px 22px; }
.lsn__top { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); font-weight: 500; }
.lsn__prog { flex: 1; height: 4px; border-radius: 4px; background: var(--grey100); overflow: hidden; }
.lsn__prog i { display: block; height: 100%; background: var(--blue); border-radius: inherit; transition: width .9s var(--spring-soft); }
.lsn__kind { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.lsn__kind b { padding: 3px 8px; border-radius: 6px; background: var(--blue-weak); color: var(--blue); font-weight: 600; }
.quiz--lsn .quiz__q { margin-top: 10px; font-size: 17px; font-weight: 600; }
.quiz--lsn .quiz__opt { border-radius: 12px; background: var(--grey50); box-shadow: none; }
.quiz--lsn .quiz__opt .n { border-radius: 50%; background: var(--card); }
.quiz--lsn .quiz__opts { min-height: 200px; }
.quiz--lsn .quiz__foot { height: 132px; background: var(--card); }
.quiz--lsn .quiz__foot.is-done { background: var(--green-bg); }
.quiz--lsn .quiz__fb > b { font-size: 16px; }
.lsn__go { position: absolute; right: 24px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px; background: var(--good); color: #fff; font-size: 14px; font-weight: 700; opacity: 0; transform: translateY(8px); transition: opacity .3s .25s, transform .5s var(--spring) .25s; }
.lsn__go kbd { font: inherit; font-size: 11px; padding: 1px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.quiz__foot.is-done .lsn__go { opacity: 1; transform: none; }
.quiz--lsn .quiz__fb p { padding-right: 0; -webkit-line-clamp: 1; }

/* ---------- STEP 4: flashcard review like the app ---------- */
.fc2 { border-radius: 24px; padding: 18px 22px 22px; background: var(--card); color: var(--ink); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .45); }
.fc2__top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.fc2__stage { perspective: 1200px; margin: 18px 0 18px; }
.fc2__card { position: relative; height: 210px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); }
.fc2__card.is-flip { transform: rotateY(180deg); }
.fc2__card.is-out { transition: transform .45s var(--ease), opacity .45s; transform: translateX(-120%) rotate(-10deg) rotateY(180deg); opacity: 0; }
.fc2__card.is-in { transition: none; transform: translateY(24px) scale(.9); opacity: 0; }
.fc2__face { position: absolute; inset: 0; border-radius: 18px; padding: 18px 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 18px 30px -18px rgba(0,27,55,.3); }
.fc2__face--b { transform: rotateY(180deg); background: #4593FC; color: #fff; box-shadow: 0 18px 30px -16px rgba(49,130,246,.6); }
.fc2__tag { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.fc2__face--b .fc2__tag { color: rgba(255,255,255,.8); }
.fc2__deck { font-style: normal; padding: 3px 8px; border-radius: 6px; background: var(--blue-weak); color: var(--blue); font-weight: 600; }
.fc2__face--b .fc2__deck { background: rgba(0,0,0,.18); color: #fff; }
.fc2__q { margin: auto 0; text-align: center; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.5; }
.fc2__a { margin: auto 0; font-size: 16px; line-height: 1.6; }
.fc2__face small { text-align: center; font-size: 12px; color: var(--faint); }
.fc2__grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; opacity: .35; transition: opacity .3s; }
.fc2.is-flipped .fc2__grades { opacity: 1; }
.fc2__grades .g, .fcs-art__g span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; transition: transform .2s, filter .2s; }
.fc2__grades kbd { font: inherit; font-size: 11px; padding: 0 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.g--good { background: #2BC07E; } .g--hard { background: #FFC342; } .g--again { background: #FF5F6D; }
.fc2__grades .g.is-press { transform: scale(.92); filter: brightness(.92); }


/* bento additions */
.fcs-art { position: relative; height: 92px; }
.fcs-art i { position: absolute; inset: 0; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa); }
.fcs-art i.b3 { transform: translateY(-14px) scale(.88); opacity: .5; }
.fcs-art i.b2 { transform: translateY(-7px) scale(.94); opacity: .8; }
.fcs-art__c { position: absolute; inset: 0; border-radius: 14px; padding: 14px 16px; background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa), 0 10px 24px -14px rgba(0,27,55,.3); display: flex; flex-direction: column; justify-content: center; transform-style: preserve-3d; animation: fcsFlip 6s var(--ease) infinite; }
.fcs-art__c b { font-size: 15px; font-weight: 600; }
.fcs-art__c em { font-style: normal; font-size: 13px; color: var(--muted); margin-top: 4px; }
@keyframes fcsFlip { 0%, 40% { transform: none; } 50%, 90% { transform: rotateX(360deg); } 100% { transform: rotateX(360deg); } }
.fcs-art__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.fcs-art__g span { height: 32px; font-size: 12.5px; border-radius: 8px; }
.fcs-art__g span:nth-child(1) { animation: gPress 6s infinite; }
@keyframes gPress { 0%, 82%, 90%, 100% { transform: none; } 86% { transform: scale(.9); } }
.dd-art__top { justify-content: space-between; }
.dd-art__d { padding: 4px 10px; border-radius: 999px; background: var(--grey100); color: var(--blue); font-size: 13px; font-weight: 700; }
.files-art { display: flex; flex-direction: column; gap: 8px; }
.files-art .fmt { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--grey-opa); opacity: 0; transform: translateX(-16px); transition: opacity .4s var(--d), transform .7s var(--spring) var(--d); }
.is-in .files-art .fmt, .files-art.is-in .fmt { opacity: 1; transform: none; }
.hm-art i.ex { background: var(--blue); }
.hm-art i.due { position: relative; }
.hm-art i.due::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.hm-art__lg { display: inline-flex; align-items: center; gap: 4px; }
.hm-art__lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--grey100); }
.hm-art__lg i.l1 { background: color-mix(in srgb, var(--green) 28%, var(--grey100)); } .hm-art__lg i.l2 { background: color-mix(in srgb, var(--green) 60%, var(--grey100)); } .hm-art__lg i.l3 { background: var(--green); }
.hm-art__lg i.ex { background: var(--blue); margin-left: 4px; }
.hm-art__lg i.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-left: 8px; }

/* closer look: app icons on the pills */
.closer__ic { width: 28px; height: 28px; object-fit: contain; flex: none; transition: transform .45s var(--spring); }
.closer__item:hover .closer__ic { transform: rotate(-8deg) scale(1.12); }

/* floating bottom CTA — littly-style black bar, 16px text, white "무료" chip */
.fab-cta { height: 60px; width: min(calc(100% - 32px), 400px); justify-content: center; gap: 10px; padding: 0 20px; border-radius: 20px; background: #000; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .35); }
.fab-cta .i { width: 22px; height: 22px; }
.fab-cta__chip { font-size: 14px; padding: 5px 7px; border-radius: 6px; background: #fff; color: #000; }
:root[data-theme="dark"] .fab-cta { background: #fff; color: #000; box-shadow: 0 14px 34px -8px rgba(0,0,0,.6); }
:root[data-theme="dark"] .fab-cta__chip { background: #000; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fab-cta { background: #fff; color: #000; } :root:not([data-theme="light"]) .fab-cta__chip { background: #000; color: #fff; } }
@media (max-width: 420px) { .fab-cta { height: 58px; font-size: 16px; padding: 0 16px; } }
.appx img.appx__logo { display: block; width: calc(72 * var(--u)); }
:root[data-theme="dark"] .appx__logo { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appx__logo { filter: invert(1); } }
.quiz--lsn .quiz__opt.is-right { background: var(--green-bg); box-shadow: inset 0 0 0 1.5px var(--good); }
.quiz--lsn .quiz__opt.is-right .n { background: var(--good); color: #fff; }

/* ==========================================================================
   Feature pages v3 — litt.ly "solution" layout: sticker hero + screen reel,
   three animated mini-UIs, big statement, tabbed use-cases, steps, FAQ
   ========================================================================== */
.sol-hero { position: relative; padding: calc(var(--nav-h) + 96px) 0 0; text-align: center; overflow: hidden; overflow: clip; }
.sol-hero__stage { position: relative; max-width: 980px; margin: 0 auto; padding: 0 24px; }
.sol-hero__icon { display: block; width: 104px; height: 104px; margin: 0 auto 26px; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0,27,55,.16)); animation: popIn2 .9s var(--spring) both; }
.sol-crumb { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--muted); }
.sol-crumb a:hover { color: var(--ink); }
.sol-crumb .i { width: 14px; height: 14px; transform: rotate(-90deg); }
.sol-hero__t { margin: 0; font-size: clamp(40px, 6.2vw, 76px); font-weight: 800; line-height: 1.2; letter-spacing: -0.035em; color: var(--ink); }
.sol-hero__lead { max-width: 620px; margin: 26px auto 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--muted); font-weight: 500; word-break: keep-all; }
.sol-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 64px; min-width: 260px; margin-top: 36px; padding: 0 36px; border-radius: 20px; background: #000; color: #fff; font-size: 18px; font-weight: 700; transition: transform .45s var(--spring), box-shadow .3s; box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }
.sol-btn:active { transform: scale(.97); }
:root[data-theme="dark"] .sol-btn { background: #fff; color: #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sol-btn { background: #fff; color: #000; } }
@media (max-width: 860px) {
  .sol-hero { padding-top: calc(var(--nav-h) + 72px); }
  .sol-hero__icon { width: 80px; height: 80px; }
  .sol-btn { width: 100%; min-width: 0; height: 60px; font-size: 17px; }
}
/* tilted screen reel under the hero */
.sol-reel { margin-top: 72px; padding: 28px 0 88px; }
.sol-reel .marquee__track { gap: 28px; align-items: center; }
.sol-shot { flex: none; width: 460px; margin: 0; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa), 0 26px 50px -24px rgba(0,27,55,.35); transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform .5s var(--spring-soft); }
.sol-shot img { display: block; width: 100%; height: auto; }
.sol-shot img.on-dark { display: none; }
:root[data-theme="dark"] .sol-shot img.on-light { display: none; } :root[data-theme="dark"] .sol-shot img.on-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sol-shot img.on-light { display: none; } :root:not([data-theme="light"]) .sol-shot img.on-dark { display: block; } }
@media (max-width: 720px) { .sol-shot { width: 300px; border-radius: 14px; } .sol-reel { margin-top: 48px; padding-bottom: 56px; } }

/* section heading */
.sol-h2 { margin: 0; text-align: center; font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; line-height: 1.28; letter-spacing: -0.03em; color: var(--ink); }
.sol-sub { margin: 20px auto 0; max-width: 560px; text-align: center; font-size: 18px; line-height: 1.65; color: var(--muted); font-weight: 500; word-break: keep-all; }

/* three animated mini UIs */
.sol-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.sol-card { display: flex; flex-direction: column; }
.sol-card__art { position: relative; height: 300px; border-radius: 28px; background: var(--grey100); overflow: hidden; display: grid; place-items: center; padding: 28px; }
.sol-card h3 { margin: 26px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; text-align: center; }
.sol-card p { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--muted); text-align: center; word-break: keep-all; }
@media (max-width: 960px) { .sol-cards { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; } .sol-card__art { height: 260px; } }

/* mini UI primitives (play while on screen: .is-in comes from the parent .reveal) */
.mini { width: 100%; max-width: 300px; }
.mini-rows { display: grid; gap: 8px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 8px 20px -14px rgba(0,27,55,.3); font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: left;
  opacity: 0; transform: translateX(-24px) scale(.96); transition: opacity .4s var(--ease), transform .8s var(--spring); transition-delay: calc(.2s + var(--k, 0) * 140ms); }
.is-in .mini-row { opacity: 1; transform: none; }
.mini-row img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.mini-row small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.mini-row .pill { margin-left: auto; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--blue-weak); color: var(--blue); }
.mini-row .pill.g { background: var(--green-bg); color: var(--good); } .mini-row .pill.r { background: var(--red-bg); color: var(--bad); }
.mini-row.is-hot { box-shadow: 0 0 0 2px var(--blue), 0 12px 24px -12px rgba(49,130,246,.5); }
.mini-row .ts { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--grey100); font-size: 11px; color: var(--muted); }
.mini-card { border-radius: 18px; padding: 18px; background: var(--card); box-shadow: 0 16px 34px -20px rgba(0,27,55,.35); text-align: left; }
.mini-card b { font-size: 15px; }
.mini-card p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--body); text-align: left; }
.mini-lines i { display: block; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--grey100); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease); transition-delay: calc(.3s + var(--k, 0) * 120ms); }
.is-in .mini-lines i { transform: none; }
.mini-hl { background: linear-gradient(transparent 55%, rgba(49,130,246,.25) 55%) no-repeat; background-size: 0 100%; transition: background-size 1s var(--ease) .9s; }
.is-in .mini-hl { background-size: 100% 100%; }
/* orbit: app icons circling a centre icon */
.mini-orbit { position: relative; width: 240px; height: 240px; }
.mini-orbit__c { position: absolute; inset: 50% auto auto 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 24px; background: var(--card); display: grid; place-items: center; box-shadow: 0 16px 30px -14px rgba(0,27,55,.35); z-index: 1; }
.mini-orbit__c img { width: 50px; height: 50px; }
.mini-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--grey300); animation: spin 26s linear infinite; }
.mini-orbit__ring img { position: absolute; width: 46px; height: 46px; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 10px 20px -12px rgba(0,27,55,.4); animation: spin 26s linear infinite reverse; }
.mini-orbit__ring img:nth-child(1) { left: 50%; top: -23px; margin-left: -23px; }
.mini-orbit__ring img:nth-child(2) { right: -10px; top: 60%; }
.mini-orbit__ring img:nth-child(3) { left: -10px; top: 60%; }
.mini-orbit__ring img:nth-child(4) { left: 50%; bottom: -23px; margin-left: -23px; }
/* typing line */
.mini-type::after { content: ""; display: inline-block; width: 2px; height: 1em; vertical-align: -2px; margin-left: 2px; background: var(--blue); animation: blink 1s steps(1) infinite; }
/* bars */
.mini-bars { display: flex; align-items: flex-end; gap: 14px; height: 170px; }
.mini-bars > span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; font-size: 12px; font-weight: 600; color: var(--muted); }
.mini-bars i { display: block; width: 100%; height: var(--h); border-radius: 10px; background: var(--c, var(--blue)); transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--spring-soft); transition-delay: calc(.2s + var(--k, 0) * 120ms); }
.is-in .mini-bars i { transform: none; }
/* checklist */
.mini-check li { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--muted); text-align: left; transition: color .3s; transition-delay: calc(.4s + var(--k) * .45s); }
.mini-check { margin: 0; padding: 14px 18px; border-radius: 18px; background: var(--card); box-shadow: 0 16px 34px -20px rgba(0,27,55,.35); }
.mini-check li i { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--grey300); display: grid; place-items: center; transition: background-color .25s, box-shadow .25s; transition-delay: calc(.4s + var(--k) * .45s); }
.mini-check li i::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .5s var(--spring); transition-delay: calc(.4s + var(--k) * .45s); }
.is-in .mini-check li { color: var(--ink-2); }
.is-in .mini-check li i { background: var(--blue); box-shadow: none; }
.is-in .mini-check li i::after { transform: rotate(-45deg) scale(1); }
/* card flip loop */
.mini-flip { perspective: 900px; width: 100%; max-width: 280px; height: 170px; }
.mini-flip__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: miniFlip 5s var(--ease) infinite; }
.mini-flip__f, .mini-flip__b { position: absolute; inset: 0; border-radius: 18px; padding: 18px; display: grid; place-items: center; text-align: center; font-size: 16px; font-weight: 600; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--card); box-shadow: 0 16px 34px -20px rgba(0,27,55,.35); }
.mini-flip__b { transform: rotateY(180deg); background: #4593FC; color: #fff; font-weight: 500; font-size: 14.5px; line-height: 1.55; }
@keyframes miniFlip { 0%, 35% { transform: none; } 45%, 85% { transform: rotateY(180deg); } 95%, 100% { transform: rotateY(360deg); } }
/* files popping out */
.mini-files { position: relative; width: 240px; height: 200px; }
.mini-doc { position: absolute; width: 120px; height: 156px; border-radius: 10px; background: #fff; box-shadow: 0 18px 34px -16px rgba(0,27,55,.4); padding: 14px 12px; opacity: 0; transform: translateY(30px) scale(.7) rotate(0deg); transition: opacity .4s, transform .9s var(--spring); transition-delay: var(--d); }
.is-in .mini-doc { opacity: 1; transform: rotate(var(--r)); }
.mini-doc b { position: absolute; left: 10px; bottom: 10px; padding: 3px 7px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800; }
.mini-doc i { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: #E8EBF0; }
.mini-doc i:first-child { width: 70%; height: 7px; background: #D1D6DB; margin-top: 0; }
/* tree */
.mini-tree { width: 100%; max-width: 300px; }
.mini-tree .edge { stroke: var(--grey400); }
/* big statement */
.sol-big { padding: 160px 0; text-align: center; }
.sol-big img { width: 120px; height: 120px; object-fit: contain; margin: 0 auto 28px; display: block; filter: drop-shadow(0 18px 26px rgba(0,27,55,.16)); }
.sol-big > .wrap > h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; }
.sol-big > .wrap > p { margin-top: 22px; font-size: 18px; line-height: 1.7; color: var(--muted); font-weight: 500; }
@media (max-width: 720px) { .sol-big { padding: 104px 0; } .sol-big img { width: 92px; height: 92px; } }
/* tabbed use-cases */
.sol-sc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; margin-top: 64px; align-items: start; }
.sol-sc__tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--nav-h) + 40px); }
.sol-sc__tab { position: relative; text-align: left; padding: 14px 18px; border-radius: 14px; font-size: 18px; font-weight: 700; color: var(--grey400); transition: color .3s, background-color .3s; overflow: hidden; }
.sol-sc__tab.is-on { color: var(--blue); background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa); }
.sol-sc__tab::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; opacity: .35; }
.sol-sc__tab.is-on.is-run::after { animation: scTab var(--dur, 7s) linear forwards; }
@keyframes scTab { to { transform: scaleX(1); } }
.sol-sc__pane { display: none; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.sol-sc__pane.is-on { display: grid; animation: descIn .6s var(--ease); }
.sol-sc__pane .device img.on-dark { display: none; }
:root[data-theme="dark"] .sol-sc__pane .device img.on-light { display: none; } :root[data-theme="dark"] .sol-sc__pane .device img.on-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sol-sc__pane .device img.on-light { display: none; } :root:not([data-theme="light"]) .sol-sc__pane .device img.on-dark { display: block; } }
.sol-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.sol-tips li { display: flex; gap: 14px; opacity: 0; transform: translateY(12px); animation: tipIn .6s var(--spring-soft) forwards; animation-delay: calc(.1s + var(--k, 0) * .12s); }
@keyframes tipIn { to { opacity: 1; transform: none; } }
.sol-tips__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.sol-tips__ic .i { width: 20px; height: 20px; }
.sol-tips b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sol-tips p { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--muted); word-break: keep-all; }
@media (max-width: 960px) {
  .sol-sc { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .sol-sc__tabs { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 0 24px; }
  .sol-sc__tab { flex: none; font-size: 16px; padding: 10px 16px; }
  .sol-sc__pane { grid-template-columns: 1fr; gap: 28px; }
}
/* steps with a filling line */
.sol-how { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.sol-how::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 3px; border-radius: 3px; background: var(--grey200); }
.sol-how::after { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 3px; border-radius: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .3s; }
.sol-how.is-in::after { transform: none; }
.sol-how > div { position: relative; text-align: center; }
.sol-how__n { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--card); box-shadow: 0 0 0 3px var(--grey200); font-size: 20px; font-weight: 800; color: var(--muted); transition: background-color .4s, color .4s, box-shadow .4s, transform .6s var(--spring); transition-delay: calc(.3s + var(--k) * .55s); }
.sol-how.is-in .sol-how__n { background: var(--blue); color: #fff; box-shadow: 0 0 0 6px var(--blue-weak); transform: scale(1.06); }
.sol-how h3 { margin-top: 22px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.sol-how p { margin: 8px auto 0; max-width: 280px; font-size: 15.5px; line-height: 1.65; color: var(--muted); word-break: keep-all; }
@media (max-width: 860px) { .sol-how { grid-template-columns: 1fr; gap: 36px; } .sol-how::before, .sol-how::after { display: none; } }
.next-feat .dd__ic--img img { width: 40px; height: 40px; }
.fcard__ic { width: 52px; height: 52px; object-fit: contain; margin-bottom: 14px; display: block; transition: transform .5s var(--spring); }
.fcard:hover .fcard__ic { transform: rotate(-8deg) scale(1.1); }
.fcard__img img.on-dark { display: none; }
:root[data-theme="dark"] .fcard__img img.on-light { display: none; } :root[data-theme="dark"] .fcard__img img.on-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fcard__img img.on-light { display: none; } :root:not([data-theme="light"]) .fcard__img img.on-dark { display: block; } }
@media (max-width: 960px) { .stepflow__grid { grid-template-columns: minmax(0, 1fr); } }
.rec__bar .wave { min-width: 0; overflow: hidden; }
@media (max-width: 860px) {
  .hero--apple .hero-title { padding-bottom: 76px; }
  .hero-mascot--tr { bottom: -6px; right: -28px; width: 112px; }
  .hero--apple .lead { margin-top: 8px; }
}
[data-scenes] { overflow-x: clip; }
/* steps: the progress line runs behind the numbered circles, never across them */
.sol-how::before, .sol-how::after { z-index: 0; top: 28px; left: calc(16.66% + 34px); right: calc(16.66% + 34px); }
.sol-how > div { z-index: 1; }

/* use cases — Harvey-style: ruled accordion on the left (progress runs along the active rule), image on the right */
.sol-h2--left { text-align: left; max-width: 640px; }
.hv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; margin-top: 64px; align-items: start; }
.hv__list { max-width: 460px; }
.hv__item { position: relative; border-top: 2px solid var(--line); }
.hv__item:last-child { border-bottom: 2px solid var(--line); }
.hv__bar { position: absolute; left: 0; right: 0; top: -2px; height: 2px; overflow: hidden; }
.hv__bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hv__item.is-on .hv__bar::after { transform: scaleX(1); transition: transform var(--dur, 7.5s) linear; }
.hv__item.is-on.is-still .hv__bar::after { transition: none; }
.hv__h { display: block; width: 100%; padding: 22px 0 14px; text-align: left; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--faint); transition: color .3s; cursor: pointer; }
.hv__item.is-on .hv__h, .hv__h:hover { color: var(--ink); }
.hv__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.hv__item.is-on .hv__body { grid-template-rows: 1fr; }
.hv__in { overflow: hidden; }
.hv__in dl { margin: 0; padding: 0 0 26px; display: grid; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.hv__item.is-on .hv__in dl { opacity: 1; transform: none; transition-delay: .15s; }
.hv__in dt { font-size: 15.5px; font-weight: 700; color: var(--ink-2); }
.hv__in dd { margin: 3px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); word-break: keep-all; }
.hv__media { position: relative; border-radius: 20px; overflow: hidden; background: var(--grey100); aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--grey-opa), 0 30px 60px -30px rgba(0,27,55,.35); }
.hv__media figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.hv__media figure.is-on { opacity: 1; transform: none; z-index: 1; }
.hv__media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.hv__media img.on-dark, .hv__pic img.on-dark { display: none; }
:root[data-theme="dark"] .hv__media img.on-light, :root[data-theme="dark"] .hv__pic img.on-light { display: none; }
:root[data-theme="dark"] .hv__media img.on-dark, :root[data-theme="dark"] .hv__pic img.on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hv__media img.on-light, :root:not([data-theme="light"]) .hv__pic img.on-light { display: none; }
  :root:not([data-theme="light"]) .hv__media img.on-dark, :root:not([data-theme="light"]) .hv__pic img.on-dark { display: block; }
}
.hv__pic { display: none; }
@media (max-width: 900px) {
  .hv { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .hv__list { max-width: none; }
  .hv__media { display: none; }
  .hv__pic { display: block; margin: 0 0 26px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--grey-opa); }
  .hv__pic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
  .hv__h { font-size: 19px; }
}

/* ==========================================================================
   Hero — interactive demo: one open-access paper, every tab ready to click
   ========================================================================== */
@keyframes dxNudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-3px); } 90% { transform: translateY(1px); } }
.dx { position: relative; z-index: 1; text-align: left; }
.dx__body { --u: 1px; display: grid; grid-template-columns: 200px minmax(0, 1fr); height: 660px; background: var(--bg); color: var(--ink); font-size: 14px; }
.dx-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; background: var(--grey50); border-right: 1px solid var(--line); min-width: 0; }
.dx .appx__doc.is-on { background: var(--grey-opa); border-radius: 8px; color: var(--ink); font-weight: 600; }
.dx img.dx-logo { width: 72px; height: auto; display: block; margin: 0 6px 14px; }
.dx-main { display: flex; flex-direction: column; min-width: 0; }
.dx-top { height: 46px; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.dx-top small { font-weight: 500; color: var(--faint); }
.dx-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
/* original pane: PDF pages */
.dx-page--img { padding: 0; overflow: hidden; }
.dx-page--img img { display: block; width: 100%; height: auto; }
.dx-src { overflow: auto; padding: 16px; background: var(--grey100); border-right: 1px solid var(--line); scrollbar-width: thin; }
.dx-page { position: relative; margin-bottom: 14px; padding: 26px 24px 22px; border-radius: 4px; background: #fff; color: #1C1F25; box-shadow: 0 1px 3px rgba(0,0,0,.08); font-family: Georgia, "Times New Roman", serif; transition: box-shadow .3s; }
.dx-page.is-flash { animation: dxFlash 1.4s var(--ease); }
@keyframes dxFlash { 0%, 40% { box-shadow: 0 0 0 3px #3182F6, 0 10px 30px -10px rgba(49,130,246,.6); } 100% { box-shadow: 0 1px 3px rgba(0,0,0,.08); } }
.dx-pn { position: absolute; right: 10px; top: 8px; font: 600 10px var(--font); color: #8F959E; }
.dx-jr { font: 600 9px var(--font); color: #8F959E; letter-spacing: .02em; }
.dx-kind { margin-top: 14px; font: 700 10px var(--font); color: #D9532B; text-transform: uppercase; letter-spacing: .08em; }
.dx-title { margin-top: 6px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.dx-au { margin-top: 8px; font-size: 11.5px; font-style: italic; color: #4E535C; }
.dx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.dx-cols b { font: 700 10px var(--font); }
.dx-lines { display: block; margin: 6px 0 10px; }
.dx-lines i { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: #E5E8EB; }
.dx-sec { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.dx-sub { display: block; margin-top: 6px; font-size: 10.5px; font-style: italic; font-weight: 700; color: #4E535C; }
.dx-eq { display: block; margin: 8px 0; padding: 8px; text-align: center; font-size: 12px; background: #F6F7F9; border-radius: 4px; }
.dx-fake-tbl { display: block; height: 60px; margin: 8px 0; background: repeating-linear-gradient(#fff 0 11px, #E5E8EB 11px 12px); border: 1px solid #E5E8EB; }
.dx-credit { margin: 4px 2px 0; font: 500 10.5px var(--font); color: var(--faint); }
/* note pane */
.dx-note { display: flex; flex-direction: column; min-height: 0; padding: 14px 22px 0; }
.dx-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.dx-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--grey100); font-weight: 600; color: var(--body); }
.dx-chip svg.a { width: 13px; height: 13px; }
.dx-chip--b { background: var(--blue-weak); color: var(--blue); }
.dx-prog { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.dx-prog i { width: 24px; height: 4px; border-radius: 4px; background: var(--grey200); }
.dx-prog i:first-child { background: var(--blue); }
.dx-prog b { margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.dx-tabs { display: flex; gap: 2px; margin: 12px -4px 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.dx-tab { flex: none; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background-color .2s, color .2s; cursor: pointer; }
.dx-tab:hover { background: var(--grey-opa); color: var(--ink); }
.dx-tab.is-on { background: var(--grey900); color: var(--on-ink); font-weight: 600; }
.dx-panel { flex: 1; min-height: 0; overflow: auto; padding: 16px 2px 24px; scrollbar-width: thin; }
.dx-panel.is-swap > * { animation: dxIn .45s var(--ease); }
@keyframes dxIn { from { opacity: 0; transform: translateY(8px); } }
.dx-pg { display: inline-block; padding: 1px 7px; margin: 0 1px; border-radius: 6px; background: var(--grey100); font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: 1px; cursor: pointer; transition: background-color .2s, color .2s; }
.dx-pg:hover { background: var(--blue-weak); color: var(--blue); }
.dx-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
/* summary */
.dx-doc { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.dx-h { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.dx-h4 { margin: 20px 0 8px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; color: var(--ink); }
.dx-ol, .dx-ul { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.dx-tbl { display: grid; grid-template-columns: 64px 1fr; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); font-size: 13px; }
.dx-tbl > * { padding: 7px 10px; border-top: 1px solid var(--line); }
.dx-tbl > :nth-child(-n+2) { border-top: 0; background: var(--grey50); font-weight: 600; color: var(--ink); }
.dx-tbl--2 { grid-template-columns: 70px 1fr; }
.dx-tbl--4 { grid-template-columns: 1.4fr 1.1fr 54px 80px; align-items: center; }
.dx-tbl--4 > :nth-child(-n+4) { border-top: 0; background: var(--grey50); font-weight: 600; }
.dx-tbl--4 > b { font-weight: 700; color: var(--ink); }
.dx-tbl--4 > i { height: 30px; padding: 11px 10px; }
.dx-tbl--4 > i::before { content: ""; display: block; height: 8px; width: var(--w); min-width: 3px; border-radius: 4px; background: var(--blue); animation: dxBar 1s var(--ease); }
@keyframes dxBar { from { width: 0; } }
.dx-easy { margin-top: 8px; font-size: 13px; color: var(--muted); }
.dx-easy summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.dx-easy p { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--grey50); }
.dx-tip { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding: 11px 14px; border-radius: 12px; background: var(--blue-weak); font-size: 13.5px; }
.dx-tip b { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; }
/* quiz */
.dx-qtop { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.dx-qbar { flex: 1; height: 4px; border-radius: 4px; background: var(--grey100); overflow: hidden; }
.dx-qbar i { display: block; height: 100%; background: var(--blue); transition: width .6s var(--ease); }
.dx-qk { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.dx-qk b { padding: 3px 8px; border-radius: 6px; background: var(--blue-weak); color: var(--blue); }
.dx-q { margin: 10px 0 14px; font-size: 17px; font-weight: 600; line-height: 1.5; }
.dx-opts { display: grid; gap: 8px; }
.dx-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--grey50); text-align: left; font-size: 14.5px; cursor: pointer; transition: background-color .2s, transform .15s; }
.dx-opt:hover:not(:disabled) { background: var(--grey100); }
.dx-opt:active:not(:disabled) { transform: scale(.98); }
.dx-opt span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card); font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.dx-opt.is-right { background: var(--green-bg); box-shadow: inset 0 0 0 1.5px var(--good); animation: rightPop .5s var(--spring); }
.dx-opt.is-right span { background: var(--good); color: #fff; }
.dx-opt.is-wrong { background: var(--red-bg); box-shadow: inset 0 0 0 1.5px var(--bad); animation: shake .4s; }
.dx-opt.is-wrong span { background: var(--bad); color: #fff; }
.dx-opt:disabled { cursor: default; }
.dx-fb { margin-top: 14px; padding: 14px 16px; border-radius: 14px; animation: dxIn .4s var(--ease); }
.dx-fb.ok { background: var(--green-bg); } .dx-fb.no { background: var(--red-bg); }
.dx-fb > b { font-size: 15px; color: var(--good); } .dx-fb.no > b { color: var(--bad); }
.dx-fb p { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--body); }
.dx-fb.no .dx-btn { background: var(--bad); } .dx-fb.ok .dx-btn { background: var(--good); }
.dx-done { display: grid; place-items: center; gap: 8px; text-align: center; padding: 60px 0; }
.dx-done b { font-size: 20px; } .dx-done p { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
/* flashcards */
.dx-fctop { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.dx-card { display: block; width: 100%; height: 250px; margin: 14px 0; perspective: 1100px; cursor: pointer; }
.dx-card__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.dx-card.is-flip .dx-card__in { transform: rotateY(180deg); }
.dx-card.is-out { transition: transform .32s var(--ease), opacity .32s; transform: translateX(-60px) rotate(-6deg); opacity: 0; }
.dx-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px 20px; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 16px 30px -18px rgba(0,27,55,.3); text-align: left; }
.dx-face small { font-size: 12px; color: var(--muted); }
.dx-face b { margin: auto 0; font-size: 19px; font-weight: 500; line-height: 1.5; text-align: center; }
.dx-face em { font-style: normal; text-align: center; font-size: 12px; color: var(--faint); }
.dx-face.b { transform: rotateY(180deg); background: #4593FC; color: #fff; }
.dx-face.b small { color: rgba(255,255,255,.8); } .dx-face.b b { font-size: 16px; text-align: left; }
.dx-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; opacity: .4; transition: opacity .3s; }
.dx-grades.is-on { opacity: 1; }
.dx-grades button { height: 42px; border-radius: 10px; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .15s, filter .2s; }
.dx-grades button:hover { filter: brightness(1.05); } .dx-grades button:active { transform: scale(.94); }
.dx-grades kbd { font: inherit; font-size: 11px; padding: 0 5px; margin-left: 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.dx-grades .g1 { background: #2BC07E; } .dx-grades .g2 { background: #FFC342; } .dx-grades .g3 { background: #FF5F6D; }
/* mindmap */
.dx-panel { position: relative; }
.dx-mm { position: absolute; inset: 0; overflow: hidden; background-image: radial-gradient(var(--grey200) 1px, transparent 1px); background-size: 16px 16px; }
.dx-mm__stage { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .45s var(--ease); }
.dx-mm__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dx-mm__svg path { fill: none; stroke: var(--nc); stroke-width: 1.6; opacity: .7; animation: dxIn .4s; }
.dx-node { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; height: 28px; white-space: nowrap; transition: transform .5s var(--ease), opacity .3s; }
.dx-node.is-hide { opacity: 0; pointer-events: none; }
.dx-node__t { height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.dx-node__t:hover { box-shadow: inset 0 0 0 1.5px var(--nc); }
.dx-node.d0 .dx-node__t { height: 30px; padding: 0 16px; background: #3182F6; color: #fff; font-size: 13px; font-weight: 700; box-shadow: none; }
.dx-node.d1 .dx-node__t { background: color-mix(in srgb, var(--nc) 14%, var(--card)); color: var(--nc); font-weight: 700; box-shadow: none; }
.dx-node.is-sel .dx-node__t { box-shadow: 0 0 0 2px var(--nc); }
.dx-node__x { width: 16px; height: 16px; margin: 0 4px; border-radius: 50%; border: 1.5px solid var(--nc); background: var(--card); position: relative; cursor: pointer; }
.dx-node__x::before { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--nc); }
.dx-node.is-closed .dx-node__x::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: 50%; width: 1.5px; margin-left: -.75px; background: var(--nc); }
.dx-mm__card { position: absolute; left: 14px; top: 14px; max-width: 240px; padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -12px rgba(0,27,55,.3); font-size: 13px; animation: dxIn .3s var(--ease); }
.dx-mm__card b { display: block; font-size: 14px; margin-bottom: 4px; }
.dx-mm__card p { color: var(--muted); line-height: 1.55; }
.dx-mm__bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(0,27,55,.3); }
.dx-mm__bar button { min-width: 30px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.dx-mm__bar button:hover { background: var(--grey-opa); }
/* memorize */
.dx-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--grey100); margin-bottom: 12px; }
.dx-seg button { padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.dx-seg button.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.dx-mcard { margin-bottom: 10px; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.dx-mcard > b { font-size: 15px; }
.dx-cz { margin: 8px 0; font-size: 14.5px; }
.dx-mcard ul { margin: 0; padding-left: 18px; color: var(--body); }
.dx-mcard small { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 6px; background: var(--purple-bg); color: var(--purple); font-weight: 600; }
.dx-blank { padding: 0 6px; border-radius: 6px; background: var(--blue-weak); color: var(--blue); font-weight: 700; cursor: pointer; transition: filter .3s, background-color .3s; }
.dx-mem.is-hide .dx-blank:not(.is-open) { color: transparent; background: var(--grey200); }
.dx-mem.is-hide .dx-blank:not(.is-open):hover { background: var(--grey300); }
/* concepts */
.dx-cc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dx-ccard { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; text-align: left; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s, transform .3s var(--spring); }
.dx-ccard:hover { box-shadow: inset 0 0 0 1px var(--grey300), 0 10px 20px -14px rgba(0,27,55,.3); }
.dx-dots { display: flex; gap: 3px; margin-bottom: 6px; }
.dx-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--grey200); } .dx-dots i.on { background: #F5A623; }
.dx-ccard b { font-size: 15px; } .dx-ccard small { font-size: 11.5px; color: var(--faint); }
.dx-cd { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--body); }
.dx-cx { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.dx-cx em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; color: var(--blue); }
.dx-ccard.is-open { grid-column: 1 / -1; box-shadow: inset 0 0 0 1.5px var(--blue); }
.dx-ccard.is-open .dx-cx { display: block; animation: dxIn .3s; }
/* tutor */
.dx-chat { display: flex; flex-direction: column; height: 100%; min-height: 400px; }
.dx-log { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow: auto; padding-bottom: 8px; }
.dx-hint { color: var(--faint); font-size: 13px; text-align: center; margin: auto 0; }
.dx-me { align-self: flex-end; max-width: 80%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--blue); color: #fff; font-size: 13.5px; animation: dxIn .3s; }
.dx-ai { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.dx-ai.is-in { animation: dxIn .4s; }
.dx-ai .dx-tbl { margin: 6px 0; }
.dx-typing { display: inline-flex; gap: 4px; } .dx-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey400); animation: tdot 1s infinite; } .dx-typing i:nth-child(2) { animation-delay: .15s; } .dx-typing i:nth-child(3) { animation-delay: .3s; }
.dx-sugs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dx-sugs button { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--blue); background: var(--blue-weak); cursor: pointer; transition: transform .2s var(--spring), opacity .2s; } .dx-sugs button:disabled { opacity: .4; cursor: default; transform: none; }
.dx-compose { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 6px 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--faint); }
.dx-compose i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--grey200); color: #fff; font-style: normal; }
/* memo */
.dx-memo { min-height: 300px; outline: none; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.dx-memo h4 { font-size: 18px; margin-bottom: 6px; }
/* responsive */
.dx svg.a { width: 17px; height: 17px; flex: none; }
.dx .appx__nav, .dx .appx__doc, .dx .appx__search { white-space: nowrap; }
.dx-split { grid-template-rows: minmax(0, 1fr); } .dx-note, .dx-src { min-height: 0; }
.dx__body { grid-template-rows: minmax(0, 1fr); } .dx-main { min-height: 0; } .dx__body { overflow: hidden; }
.dx-split { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); }

/* 과제 AI demo: the prompt is typed into the composer, then sent as a bubble */
/* gallery: screens are captured at ~2.2:1 so the whole screen fits the card */
.hs .gcard__media { position: relative; }
.hs .gcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }


/* ============ 과제 AI: the assignment on the left, the finished file on the right (a writing-app window) ============ */
.tai-sec { padding: 140px 0; background: #fff; color: #191F28; }
.tai__head { max-width: 760px; }
.tai-sec .h2 { color: #191F28; font-size: clamp(38px, 4.8vw, 64px); line-height: 1.2; letter-spacing: -0.035em; }
.tai-sec .mark { color: #3182F6; }
.tai__fmts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.fmt { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 12px; background: #F2F4F6; font-size: 14px; font-weight: 600; color: #333D4B; }
.fmt img { width: 26px; height: 26px; flex: none; display: block; }
.taw { margin: 72px 0 0; padding: 36px; border-radius: 16px; background: #F7F8FA; border: 1px solid #E5E8EB; }
.taw__win { border-radius: 12px; background: #fff; border: 1px solid #E5E8EB; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.taw__bar { display: flex; gap: 8px; padding: 14px 18px; background: #F7F8FA; border-bottom: 1px solid #EEF0F3; }
.taw__bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; } .taw__bar i:nth-child(2) { background: #FEBC2E; } .taw__bar i:nth-child(3) { background: #28C840; }
.taw__body { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); min-height: 560px; }
.taw__doc { padding: 30px 28px; border-right: 1px solid #EEF0F3; }
.taw__h { display: block; font-size: 17px; font-weight: 700; color: #191F28; letter-spacing: -0.01em; }
.taw__para { margin-top: 26px; }
.taw__doc hr { margin: 36px 0 28px; border: 0; border-top: 1px solid #E5E8EB; }
.taw__sk { display: flex; flex-direction: column; gap: 10px; }
.taw__sk i { display: block; height: 11px; border-radius: 6px; background: #EEF0F3; }
.taw__para > .taw__sk + .taw__sk { margin-top: 10px; }
.taw__sk--n { flex-direction: row; align-items: center; gap: 8px; }
.taw__sk--n em { flex: none; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; background: #F2F4F6; border: 1px solid #E5E8EB; font-style: normal; font-size: 13px; font-weight: 700; color: #333D4B; }
.taw__refs { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 18px; }
.taw__refs li { counter-increment: r; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; }
.taw__refs li::before { content: counter(r) "."; font-size: 14px; color: #6B7684; line-height: 1; }
.taw__file { padding: 22px 22px 28px; background: #F9FAFB; display: flex; flex-direction: column; gap: 14px; }
.taw__ft { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; color: #191F28; }
.taw__tag { flex: none; padding: 3px 7px; border-radius: 5px; background: #2B579A; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.taw__card { padding: 18px 18px 20px; border-radius: 10px; background: #fff; border: 1px solid #E5E8EB; display: flex; flex-direction: column; gap: 14px; }
.taw__card > b { font-size: 15px; font-weight: 700; color: #191F28; }
.taw__calc { margin: 0; font-size: 14px; color: #333D4B; }
.taw__calc b { color: #191F28; }
.taw__tbl { display: grid; grid-template-columns: 1.4fr 1fr 1fr; border: 1px solid #E5E8EB; border-radius: 8px; overflow: hidden; font-size: 14px; color: #333D4B; }
.taw__tbl span { padding: 10px 14px; border-top: 1px solid #EEF0F3; }
.taw__tbl span:nth-child(3n+2), .taw__tbl span:nth-child(3n) { text-align: right; border-left: 1px solid #EEF0F3; font-variant-numeric: tabular-nums; }
.taw__tbl span:nth-child(-n+3) { border-top: 0; background: #F7F8FA; font-size: 12.5px; font-weight: 700; color: #6B7684; letter-spacing: .02em; }
.taw__chart { display: block; width: 100%; height: auto; }
.taw__chart .ax { fill: none; stroke: #B0B8C1; stroke-width: 1.2; }
.taw__chart .ln { fill: none; stroke-width: 2.5; } .taw__chart .ln--d { stroke: #3182F6; } .taw__chart .ln--s { stroke: #F04452; }
.taw__chart .mw { fill: none; stroke: #8B95A1; stroke-width: 1.5; stroke-dasharray: 6 5; }
.taw__chart .pt { fill: #191F28; }
.taw__chart text { font-size: 12px; fill: #6B7684; }
.taw__cap { margin: 0; padding-top: 12px; border-top: 1px solid #EEF0F3; font-size: 13px; font-style: italic; color: #6B7684; }
@media (max-width: 960px) {
  .tai-sec { padding: 100px 0; }
  .taw { margin-top: 48px; padding: 14px; }
}
.hs .gcard__media { border-radius: 0; }
/* gallery: show each screen whole — inset on every side, no cropping */
.hs .gcard__media { margin: 28px 48px 44px; background: transparent; box-shadow: none; overflow: visible; }
.hs .gcard__media img { object-fit: contain; object-position: center; filter: drop-shadow(0 0 1px rgba(0,0,0,.12)) drop-shadow(0 18px 30px rgba(0,27,55,.18)); }
@media (max-width: 720px) { .hs .gcard__media { margin: 18px 18px 24px; } }
/* gallery (final): screen bleeds off the right and bottom like before, top stays whole, top-left corner rounded */
.hs .gcard__media { margin: 36px 0 0 48px; border-radius: 18px 0 0 0; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 20px 50px -20px rgba(0,27,55,.25); }
.hs .gcard__media img { position: static; width: 100%; height: auto; object-fit: initial; filter: none; }
:root[data-theme="dark"] .hs .gcard__media { background: #17171C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hs .gcard__media { background: #17171C; } }
@media (max-width: 720px) { .hs .gcard__media { margin: 24px 0 0 20px; border-radius: 14px 0 0 0; } }
/* feature pages: one big app screen under the hero (sidebar folded) */
.sol-big-shot { max-width: 1180px; margin: 72px auto 0; padding: 0 24px 96px; }
.sol-big-shot .device img { display: block; width: 100%; height: auto; }
.sol-big-shot .device img.on-dark { display: none; }
:root[data-theme="dark"] .sol-big-shot .device img.on-light { display: none; } :root[data-theme="dark"] .sol-big-shot .device img.on-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sol-big-shot .device img.on-light { display: none; } :root:not([data-theme="light"]) .sol-big-shot .device img.on-dark { display: block; } }
@media (max-width: 720px) { .sol-big-shot { margin-top: 44px; padding: 0 16px 64px; } }

/* phones: app screenshots are 1440px-wide screens, so show a readable zoomed crop (top-left) instead of a tiny whole screen */
@media (max-width: 720px) {
  .sol-big-shot .device img, .fcard__img img, .closer__screens img { height: 300px; width: 100%; object-fit: cover; object-position: left top; }
  .closer__screens { height: 300px; }
  .closer__screens img:not(:first-child) { inset: 0; }
  /* gallery: card hugs its content, screen is a tall zoomed crop that bleeds off the right edge */
  .hs .gcard { height: auto; }
  .hs .gcard__cap { padding: 26px 22px 0; }
  .hs .gcard__media { flex: none; margin: 20px 0 0 22px; height: 320px; }
  .hs .gcard__media img { height: 100%; width: auto; max-width: none; }
}

/* phones: the hero demo and the 과제 AI window keep their desktop layout and shrink to fit (main.js [data-fit]) */
[data-fit] { position: relative; overflow: hidden; }
[data-fit] > * { transform-origin: 0 0; }
/* phones: no tall empty band between 과제 AI and the gallery */
@media (max-width: 760px) {
  .tai-sec { padding-bottom: 48px; }
  .hs__sticky { justify-content: flex-start; padding-top: calc(var(--nav-h) + 28px); gap: 24px; }
}
@media (max-width: 720px) {
  /* gallery on phones: crop to the part of each screen that matters (--fx per card) */

  .hs .gcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 0%) top; }
}
/* 하나씩 자세히 보기 — phones: screen on top, pill bar, centred caption (Apple product-story style) */
.closer__bar, .closer__cap { display: none; }
@media (max-width: 734px) {
  .closer { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 32px; padding: 0; background: none; border-radius: 0; min-width: 0; }
  .closer__device, .closer__bar { min-width: 0; width: 100%; }
  .closer__list { display: none; }
  .closer__screens img, .closer__screens { height: auto; }
  .closer__screens img { object-fit: initial; }
  .closer__bar { display: flex; align-items: center; gap: 4px; margin: 24px 0 0; padding: 6px; border-radius: 999px; background: var(--grey100); }
  .closer__arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
  .closer__arrow .i { width: 18px; height: 18px; transform: rotate(90deg); }
  .closer__arrow[data-d="1"] .i { transform: rotate(-90deg); }
  .closer__strip { position: relative; flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
  .closer__strip::-webkit-scrollbar { display: none; }
  .closer__chip { flex: none; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 16px; font-weight: 500; color: var(--ink-2); white-space: nowrap; scroll-snap-align: center; transition: background-color .25s, color .25s; }
  .closer__chip.is-on { background: var(--grey900); color: var(--on-ink); }
  .closer__cap { display: block; margin: 22px 8px 0; text-align: center; font-size: 17px; line-height: 1.6; color: var(--muted); font-weight: 500; word-break: keep-all; animation: descIn .45s var(--ease); }
  .closer__cap b { color: var(--ink); font-weight: 600; }
}

/* ============ feature statement visuals: charts, tables, screens ============ */
.sol-big .viz { max-width: 760px; margin: 56px auto 0; text-align: left; }
.viz-card { border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa), 0 24px 50px -28px rgba(0,27,55,.3); padding: 22px 24px; }
.viz-card + .viz-card { margin-top: 14px; }
.viz-card__h { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.viz-card--c { text-align: center; padding: 34px 24px 28px; }
.viz .pg { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--grey100); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.viz-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--ink-2); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.viz-tbl th { background: var(--grey50); text-align: left; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 10px 14px; }
.viz-tbl td { padding: 11px 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.viz-tbl td:first-child { font-weight: 600; color: var(--ink); }
.viz-tbl .bar { display: inline-block; height: 8px; width: calc(var(--w) * .6); max-width: 60%; margin-right: 10px; border-radius: 4px; background: var(--blue); vertical-align: 1px; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease) .6s; }
.viz.is-in .viz-tbl .bar { transform: none; }
.viz-tbl--q td.o, .viz-tbl--q td.x { font-weight: 700; } .viz-tbl--q td.o { color: var(--good); } .viz-tbl--q td.x { color: var(--bad); }
/* document page with a chart */
.viz-doc__page { border-radius: 6px; background: #fff; color: #1C1F25; padding: 36px 40px 40px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 60px -28px rgba(0,27,55,.35); }
.viz-doc__page .viz-tbl { color: #333840; box-shadow: 0 0 0 1px #E5E8EB; } .viz-doc__page .viz-tbl th { background: #F7F8FA; color: #6B7684; } .viz-doc__page .viz-tbl td { border-color: #EEF0F3; } .viz-doc__page .viz-tbl td:first-child { color: #1C1F25; }
.viz-doc__t { margin: 0; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.viz-doc__s { margin: 6px 0 0; text-align: center; font-size: 13px; color: #8B95A1; }
.viz-doc__h { margin: 28px 0 10px; font-size: 15px; font-weight: 700; color: #2B5CD9; }
.viz-chart { display: block; width: 100%; height: auto; }
.viz-chart .grid path { stroke: #F0F2F5; stroke-width: 1; }
.viz-chart .ax { fill: none; stroke: #B0B8C1; stroke-width: 1.2; }
.viz-chart text { font: 500 11px var(--font); fill: #8B95A1; }
.viz-chart .lb { font-weight: 600; fill: #6B7684; }
.viz-chart .ln { fill: none; stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.4s var(--ease) .4s; }
.viz-chart .ln--d { stroke: #3182F6; } .viz-chart .ln--s { stroke: #F04452; transition-delay: .7s; }
.viz-chart .mw { stroke: #8B95A1; stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0; transition: opacity .5s 1.6s; }
.viz-chart .mwt, .viz-chart .gapt, .viz-chart .ptt { font-weight: 700; opacity: 0; transition: opacity .5s 1.8s; }
.viz-chart .mwt { fill: #6B7684; } .viz-chart .gapt { fill: #F04452; } .viz-chart .ptt { fill: #1C1F25; }
.viz-chart .gap { stroke: #F04452; stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .5s 2s; }
.viz-chart .pt { fill: #1C1F25; opacity: 0; transition: opacity .4s 1.9s; }
.viz.is-in .viz-chart .ln { stroke-dashoffset: 0; }
.viz.is-in .viz-chart .mw, .viz.is-in .viz-chart .mwt, .viz.is-in .viz-chart .gapt, .viz.is-in .viz-chart .ptt, .viz.is-in .viz-chart .pt { opacity: 1; }
.viz.is-in .viz-chart .gap { opacity: .35; }
.viz-lg { display: flex; gap: 16px; justify-content: center; margin-top: 4px; font-size: 12px; color: #6B7684; }
.viz-lg span { display: inline-flex; align-items: center; gap: 6px; } .viz-lg i { width: 16px; height: 3px; border-radius: 2px; }
.viz-lg i.d { background: #3182F6; } .viz-lg i.s { background: #F04452; } .viz-lg i.m { background: repeating-linear-gradient(90deg, #8B95A1 0 5px, transparent 5px 8px); }
/* recording: transcript + memo/tutor side by side */
.viz-split { display: grid; grid-template-columns: 1fr 1fr; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa), 0 24px 50px -28px rgba(0,27,55,.3); }
.viz-pane { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.viz-pane--r { background: var(--grey50); border-left: 1px solid var(--line); }
.viz-pane__h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--red); }
.viz-pane__h .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; }
.viz-tl span { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--grey100); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.viz-tl p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.viz-tl.is-live p::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--blue); animation: blink 1s steps(1) infinite; }
.viz-tabs { display: flex; gap: 4px; } .viz-tabs span { padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); } .viz-tabs span.on { background: var(--grey900); color: var(--on-ink); font-weight: 600; }
.viz-memo { padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 13.5px; }
.viz-memo b { display: block; color: var(--ink); } .viz-memo p { margin: 2px 0 8px; color: var(--muted); } .viz-memo p:last-child { margin-bottom: 0; }
.viz-chat { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.viz-chat .me { align-self: flex-end; margin: 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--blue); color: #fff; }
.viz-chat .ai { margin: 0; line-height: 1.6; color: var(--ink-2); }
/* summary */
.viz-ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.viz-tip { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--blue-weak); font-size: 14px; color: var(--ink-2); }
.viz-tip b { flex: none; padding: 4px 10px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 12.5px; }
/* quiz */
.viz-big { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.viz-sub { margin: 8px 0 20px; font-size: 14px; color: var(--muted); }
.viz-btn { display: block; max-width: 360px; margin: 8px auto 0; padding: 13px 0; border-radius: 12px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; }
.viz-btn--g { background: var(--grey100); color: var(--ink-2); }
/* flashcards with a picture */
.viz-fcs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.viz-fc { display: flex; flex-direction: column; gap: 10px; min-height: 280px; padding: 18px 20px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--grey-opa), 0 24px 50px -28px rgba(0,27,55,.3); }
.viz-fc--b { background: #4593FC; color: #fff; }
.viz-fc__tag { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.viz-fc__tag i { font-style: normal; padding: 3px 8px; border-radius: 6px; background: var(--blue-weak); color: var(--blue); font-weight: 600; }
.viz-fc--b .viz-fc__tag { color: rgba(255,255,255,.8); } .viz-fc--b .viz-fc__tag i { background: rgba(0,0,0,.18); color: #fff; }
.viz-circ { width: 100%; height: auto; margin-top: 6px; }
.viz-circ .w { fill: none; stroke: var(--ink-2); stroke-width: 2; } .viz-circ .r { fill: var(--card); stroke: var(--ink-2); stroke-width: 2; } .viz-circ .v { fill: var(--card); stroke: var(--blue); stroke-width: 2; }
.viz-circ text { font: 600 11px var(--font); fill: var(--muted); } .viz-circ .vt { fill: var(--blue); font-size: 10px; }
.viz-fc__q { margin: auto 0 0; text-align: center; font-size: 17px; font-weight: 600; color: var(--ink); }
.viz-fc__a { margin: auto 0; font-size: 15px; line-height: 1.7; } .viz-fc__a b { font-size: 30px; }
.viz-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .viz-grades span { padding: 9px 0; border-radius: 9px; text-align: center; font-size: 13px; font-weight: 700; color: #fff; }
.viz-grades .g1 { background: #2BC07E; } .viz-grades .g2 { background: #FFC342; } .viz-grades .g3 { background: #FF5F6D; }
/* mindmap */
.viz-mm { position: relative; border-radius: 18px; padding: 20px 14px 70px; background: var(--card) radial-gradient(var(--grey200) 1px, transparent 1px) 0 0 / 16px 16px; box-shadow: 0 0 0 1px var(--grey-opa), 0 24px 50px -28px rgba(0,27,55,.3); }
.viz-mmsvg { display: block; width: 100%; height: auto; transform: scale(.82); transition: transform 1.2s var(--spring-soft) .4s; }
.viz.is-in .viz-mmsvg { transform: none; }
.viz-mmsvg .e path { fill: none; stroke: #3182F6; stroke-width: 1.8; opacity: .7; } .viz-mmsvg .e .e2 { stroke: #03B26C; } .viz-mmsvg .e .e3 { stroke: #8B5CF6; } .viz-mmsvg .e .e4 { stroke: #E8458B; }
.viz-mmsvg text { font: 600 12px var(--font); fill: var(--ink-2); text-anchor: middle; }
.viz-mmsvg .rt { fill: #fff; font-size: 13.5px; font-weight: 700; }
.viz-mmsvg .root { fill: #3182F6; } .viz-mmsvg .c1 { fill: rgba(3,178,108,.16); } .viz-mmsvg .c2 { fill: rgba(49,130,246,.16); } .viz-mmsvg .c3 { fill: rgba(139,92,246,.18); } .viz-mmsvg .c4 { fill: rgba(232,69,139,.16); }
.viz-mmsvg .lf { fill: var(--card); stroke: var(--line); }
.viz-zoom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(0,27,55,.3); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.viz-zoom span { min-width: 30px; height: 30px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; } .viz-zoom span.w { font-size: 13px; }
.viz-zoom i { width: 1px; height: 16px; margin: 0 4px; background: var(--line); }
@media (max-width: 720px) {
  .sol-big .viz { margin-top: 40px; }
  .viz-doc__page { padding: 22px 18px 24px; } .viz-doc__t { font-size: 16px; }
  .viz-split, .viz-fcs { grid-template-columns: 1fr; } .viz-pane--r { border-left: 0; border-top: 1px solid var(--line); }
  .viz-tbl { font-size: 13px; } .viz-tbl th, .viz-tbl td { padding: 9px 10px; }
  .viz-fc { min-height: 0; }
}
/* gallery on phones (final): the whole screen, inset in the card — no zoomed crops */
@media (max-width: 720px) {
  .hs .gcard__media { margin: 18px 16px 18px; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 12px 28px -14px rgba(0,27,55,.3); }
  .hs .gcard__media img { width: 100%; height: auto; object-fit: initial; }
  .hs .gcard__cap { padding: 24px 20px 0; }
}
@media (max-width: 860px) { .phero__stage { padding-bottom: 0; } }