/* 即课 brand site.
   The page is one sheet of the product's exercise book (方案 A「方格本」):
   white paper on a 24px blue grid, fountain-pen blue ink, a soft-blue
   highlighter for "now", and a red pen kept for the time needle, ticks and
   the one student who needs attention. Spacing steps in grid units. */

@font-face {
  font-family: "Jike Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  /* Noto Sans SC (OFL), subset to the glyphs on this page by scripts/subset-font.py. */
  src: url("fonts/jike-sans-subset.woff2") format("woff2");
}
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-display: swap; src: url("fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }

:root {
  --u: 24px;
  --paper: #ffffff;
  --grid: #eef2fb;
  --rule: #d5def2;
  --ink: #1b2240;
  --soft: #5b6480;
  --pen: #1a2a8c;
  --pen-deep: #121e66;
  --pen-wet: #5d72c9;
  --hl: #c4d3ff;
  --quiet: #edf1fa;
  --red: #d8342a;

  --sans: "Jike Sans", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --num: "Schibsted Grotesk", "Jike Sans", "PingFang SC", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-pen: cubic-bezier(.6, 0, .2, 1);

  --gutter: clamp(24px, 5vw, 72px);
  --max: 1296px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  font-kerning: normal;
  text-spacing-trim: trim-start;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.font-num { font-family: var(--num); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; left: 16px; top: -64px; z-index: 50;
  padding: 8px 16px; background: var(--pen); color: #fff; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px;
  border-radius: 10px;
  font-weight: 700; font-size: 16px; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn-ink { background: var(--pen); color: #fff; box-shadow: 0 0 0 0 var(--hl); }
.btn-ink:hover { background: var(--pen-deep); box-shadow: 4px 4px 0 0 var(--hl); transform: translate(-2px, -2px); }
.btn-ink:active { box-shadow: 0 0 0 0 var(--hl); transform: none; }
.btn-line { color: var(--pen); box-shadow: inset 0 0 0 1.5px var(--pen); background: var(--paper); }
.btn-line:hover { background: var(--quiet); }
.btn-small { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 8px; }

.link-quiet { font-size: 15px; font-weight: 600; color: var(--pen); text-decoration: none; padding: 8px 4px; }
.link-quiet:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: 72px; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 48px;
  transition: background-color .3s, box-shadow .3s;
}
.nav.is-stuck {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--rule);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { width: 32px; height: 32px; }
.nav-name { font-size: 22px; font-weight: 900; color: var(--pen); letter-spacing: .04em; }
.nav-slogan { font-size: 14px; color: var(--soft); padding-left: 12px; border-left: 1px solid var(--rule); line-height: 1.2; }
.nav-links { display: flex; gap: 32px; margin-left: auto; }
.nav-links a { font-size: 15px; color: var(--soft); text-decoration: none; padding: 8px 0; }
.nav-links a:hover { color: var(--pen); }
.nav-actions { display: flex; align-items: center; gap: 16px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  max-width: var(--max); margin: 0 auto;
  padding: 120px var(--gutter) 56px;
  display: flex; align-items: center;
}
.hero-final {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  align-items: center; gap: 64px;
}

.hero-title {
  font-size: clamp(56px, 7vw, 112px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -.035em;
  color: var(--pen);
  margin-left: -.06em;
}
.hero-title .line { display: block; white-space: nowrap; }
.hero-title .ch { display: inline-block; }
.hero-lede { margin-top: 32px; max-width: 30em; font-size: 18px; line-height: 1.9; color: var(--soft); }
.hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }

/* The logo, in three layers: the folded ribbon (wiped in), and two speed lines. */
.ribbon { position: relative; aspect-ratio: 1; width: 100%; }
.ribbon img, .ribbon-wipe { position: absolute; inset: 0; width: 100%; height: 100%; }
.ribbon-body { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 76%, 49% 76%, 49% 42%, 0 42%); }
.ribbon-speed-a { clip-path: inset(42% 51% 41% 0); }
.ribbon-speed-b { clip-path: inset(59% 51% 24% 0); }

.js .ribbon[data-ribbon] .ribbon-wipe { clip-path: inset(0 100% 64% 0 round 999px); }
.js .ribbon[data-ribbon] .ribbon-speed { opacity: 0; transform: translateX(-36%); }
.js .ribbon.play .ribbon-wipe { animation: unfold 1.1s var(--ease-pen) forwards; }
.js .ribbon.play .ribbon-speed { animation: dash .7s var(--ease-out) forwards; }
.js .ribbon.play .ribbon-speed-a { animation-delay: .62s; }
.js .ribbon.play .ribbon-speed-b { animation-delay: .74s; }

@keyframes unfold {
  0% { clip-path: inset(0 100% 64% 0 round 999px); }
  48% { clip-path: inset(0 0 64% 0 round 999px); }
  100% { clip-path: inset(0 0 0 0 round 0); }
}
@keyframes dash { from { opacity: 0; transform: translateX(-36%); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes ink { to { stroke-dashoffset: 0; } }

/* ---------- the opening flash ----------
   One timeline in seconds, run while <html data-intro="play">:
   0.10 课上完了，   0.95 还没忙完？ with a red underline
   1.95 排课 签到 消课 反馈 收款, 0.3s apart, a red time needle walking under them
   3.45 the five in a row, ticked off in red
   4.55 a pen-blue sweep, the logo unfolds
   5.75 the sweep lifts off the headline and the live demo; done at 6.6 */

.flash { display: none; }
[data-intro="play"] .flash {
  display: block;
  position: fixed; z-index: 30; inset: 0;
  pointer-events: none;
}

.fl-line, .fl-word, .fl-done {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}

/* A line rises through a mask: in from below, out through the top. */
.fl-line > span {
  display: block; overflow: hidden;
  font-size: clamp(56px, 11vw, 176px); font-weight: 900; line-height: 1.2; letter-spacing: -.04em;
  white-space: nowrap;
}
.fl-line > span > i { display: block; font-style: normal; color: var(--pen); transform: translateY(110%); }
.fl-line em { font-style: normal; color: var(--red); }
@keyframes mask-in { from { transform: translateY(110%); } to { transform: none; } }
@keyframes mask-out { from { transform: none; } to { transform: translateY(-110%); } }
[data-intro="play"] .fl-q1 i { animation: mask-in .5s var(--ease-out) .1s both, mask-out .3s var(--ease-pen) .85s forwards; }
[data-intro="play"] .fl-q2 i { animation: mask-in .5s var(--ease-out) .95s both, mask-out .3s var(--ease-pen) 1.72s forwards; }

.fl-underline { width: min(60vw, 860px); height: 24px; margin-top: -4px; overflow: visible; }
.fl-underline path { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-intro="play"] .fl-underline path { animation: ink .32s var(--ease-pen) 1.3s forwards; }
[data-intro="play"] .fl-underline { animation: fade-out .18s linear 1.74s forwards; }

/* Five chores, 0.3s apart. Each snaps in on a slight skew and lifts away. */
.fl-word b {
  display: block;
  font-size: min(30vw, 42vh); font-weight: 900; line-height: 1; letter-spacing: -.05em;
  color: var(--pen);
  opacity: 0;
}
.fl-word.is-last b { color: var(--red); }
[data-intro="play"] .fl-word b {
  animation:
    word-in .16s var(--ease-out) calc(1.95s + var(--n) * .3s) both,
    word-out .12s ease-in calc(2.17s + var(--n) * .3s) forwards;
}
@keyframes word-in { from { opacity: 0; transform: translateY(16%) scale(1.1) skewY(5deg); } to { opacity: 1; transform: none; } }
@keyframes word-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8%) scale(.95); } }

/* The red needle walks the day beneath the words. */
.fl-needle {
  position: absolute; left: 0; top: 14%; bottom: 14%;
  width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--red);
  opacity: 0; transform-origin: top;
}
[data-intro="play"] .fl-needle {
  animation:
    needle-drop .22s var(--ease-pen) 1.73s backwards,
    needle-walk 1.5s cubic-bezier(.3, 0, .7, 1) 1.95s forwards,
    fade-out .15s linear 3.4s forwards;
}
@keyframes needle-drop { from { opacity: 1; transform: translateX(10vw) scaleY(0); } to { opacity: 1; transform: translateX(10vw); } }
@keyframes needle-walk { from { opacity: 1; transform: translateX(10vw); } to { opacity: 1; transform: translateX(90vw); } }
.fl-pill {
  position: absolute; top: -36px; left: 50%;
  padding: 2px 10px; border-radius: 6px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 16px; line-height: 1.5;
  transform: translateX(-50%); opacity: 0;
}
[data-intro="play"] .fl-pill { animation: blink .3s steps(1, end) calc(1.95s + var(--n) * .3s) forwards; }
[data-intro="play"] .fl-pill.is-last { animation-duration: .6s; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } }

/* All five in a row, ticked off in red. */
.fl-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em .8em; font-size: clamp(36px, 6.4vw, 96px); font-weight: 900; letter-spacing: -.03em; color: var(--pen); line-height: 1.15; }
.fl-row li { position: relative; opacity: 0; }
.fl-row .tick { position: absolute; left: 50%; bottom: -.38em; width: .46em; height: .36em; margin-left: -.23em; }
.fl-row .tick path { stroke-width: 3; stroke-dashoffset: 1; opacity: 1; }
.fl-caption { margin-top: 1.1em; font-size: clamp(20px, 2.4vw, 32px); font-weight: 700; color: var(--ink); opacity: 0; }
[data-intro="play"] .fl-row li { animation: row-in .42s var(--ease-out) calc(3.45s + var(--n) * .045s) both; }
[data-intro="play"] .fl-row .tick path { animation: ink .22s var(--ease-pen) calc(3.78s + var(--n) * .08s) forwards; }
[data-intro="play"] .fl-caption { animation: settle .45s var(--ease-out) 4.05s both; }
[data-intro="play"] .fl-done { animation: fade-out .01s linear 5s forwards; }
@keyframes row-in { from { opacity: 0; transform: translateY(40%) scale(1.25); } to { opacity: 1; transform: none; } }

/* The pen-blue sweep: in from the left, the logo unfolds, out to the right. */
.fl-flood {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--pen); color: #fff;
  clip-path: inset(0 100% 0 0);
}
[data-intro="play"] .fl-flood { animation: sweep-in .45s var(--ease-pen) 4.55s forwards, sweep-out .55s var(--ease-pen) 5.75s forwards; }
@keyframes sweep-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sweep-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.fl-ribbon { width: min(28vw, 168px); }
.fl-ribbon img { filter: brightness(0) invert(1); }
.fl-ribbon .ribbon-wipe { clip-path: inset(0 100% 64% 0 round 999px); }
.fl-ribbon .ribbon-speed { opacity: 0; }
[data-intro="play"] .fl-ribbon .ribbon-wipe { animation: unfold .75s var(--ease-pen) 4.75s forwards; }
[data-intro="play"] .fl-ribbon .ribbon-speed-a { animation: dash .45s var(--ease-out) 5.15s both; }
[data-intro="play"] .fl-ribbon .ribbon-speed-b { animation: dash .45s var(--ease-out) 5.23s both; }
.fl-name { margin-top: 24px; font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: .08em; line-height: 1.2; opacity: 0; }
.fl-slogan { margin-top: 4px; font-size: 18px; letter-spacing: .3em; opacity: 0; }
[data-intro="play"] .fl-name { animation: settle .4s var(--ease-out) 5.1s both; }
[data-intro="play"] .fl-slogan { animation: settle .4s var(--ease-out) 5.22s both; }

/* The landing: what the sweep uncovers settles in, the headline written character by character. */
[data-intro="wait"] .hero-final, [data-intro="wait"] .nav, [data-intro="wait"] .intro-ctl { visibility: hidden; }
[data-intro="play"] .nav { animation: settle .5s var(--ease-out) 6s both; }
[data-intro="play"] .hero-title .ch {
  animation: write .7s var(--ease-pen) both;
  animation-delay: calc(5.85s + var(--i) * 40ms);
}
@keyframes write {
  0% { clip-path: inset(-12% 100% -12% 0); color: var(--pen-wet); }
  35% { clip-path: inset(-12% -8% -12% 0); }
  100% { clip-path: inset(-12% -8% -12% 0); color: var(--pen); }
}
[data-intro="play"] .hero-lede { animation: settle .6s var(--ease-out) 6.2s both; }
[data-intro="play"] .hero-cta { animation: settle .6s var(--ease-out) 6.3s both; }
[data-intro="play"] .demo { animation: demo-in .8s var(--ease-out) 5.95s both; }
@keyframes demo-in { from { opacity: 0; transform: translateX(48px) rotate(1.5deg); } to { opacity: 1; transform: none; } }

/* Skip while it plays, replay after. */
.intro-ctl { position: absolute; z-index: 1; right: var(--gutter); bottom: 20px; }
.intro-skip, .intro-replay {
  position: relative; display: none;
  height: 36px; padding: 0 14px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-size: 14px; color: var(--soft);
}
.intro-skip:hover, .intro-replay:hover { color: var(--pen); background: var(--quiet); }
[data-intro="play"] .intro-skip { display: inline-block; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px var(--rule); animation: settle .3s var(--ease-out) .3s both; }
[data-intro="play"] .intro-ctl { position: fixed; z-index: 31; }
[data-intro="done"] .intro-replay { display: inline-block; }
.intro-progress { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px; background: var(--rule); }
.intro-progress::after { content: ""; position: absolute; inset: 0; background: var(--pen); transform-origin: left; transform: scaleX(0); }
[data-intro="play"] .intro-progress::after { animation: grow 6.6s linear forwards; }
@keyframes grow { to { transform: none; } }

/* ---------- the live demo ---------- */

.demo { position: relative; justify-self: end; width: 100%; }

/* The product panel is drawn at 560 x 552 and scaled to fit the column. */
.panel-fit { position: relative; width: 100%; height: calc(564px * var(--scale, 1)); }
.panel {
  position: absolute; left: 0; top: 0;
  width: 560px; height: 552px;
  transform: scale(var(--scale, 1)); transform-origin: 0 0;
  background: var(--paper);
  border: 1.5px solid var(--pen); border-radius: 16px;
  box-shadow: 12px 12px 0 0 var(--hl);
  overflow: hidden;
  font-size: 15px; line-height: 1.6;
}
html:not(.js) .panel-fit { height: auto; }
html:not(.js) .panel { position: static; height: auto; transform: none; }

.scene { position: absolute; inset: 0; padding: 28px 32px 40px; }
/* Out, then in: the old scene leaves before the next one arrives. */
.js .scene { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
.js .scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .2s, transform .5s var(--ease-out) .2s, visibility 0s .2s; }
html:not(.js) .scene { position: static; border-bottom: 1px solid var(--rule); }

.demo-bar { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; }
.tabs { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 10px 14px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1.4; color: var(--soft); text-align: left;
  transition: color .2s, background-color .2s;
}
.tab span { font-size: 12px; font-weight: 500; }
.tab::after, .tab::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 2px; }
.tab::after { background: var(--rule); }
.tab::before { z-index: 1; background: var(--pen); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tab:hover { color: var(--pen); background: var(--quiet); }
.tab[aria-current="true"] { color: var(--pen); font-weight: 700; }
.demo-pause { flex: none; width: 40px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--pen); }
.demo-pause:hover { background: var(--quiet); }
.i-pause { width: 10px; height: 12px; border-left: 3px solid; border-right: 3px solid; }
.i-play { display: none; width: 0; height: 0; margin-left: 3px; border-left: 10px solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.demo.is-paused .i-pause { display: none; }
.demo.is-paused .i-play { display: block; }
.panel-disclaimer { margin-top: 4px; padding-left: 10px; font-size: 12px; line-height: 1.5; color: var(--soft); }

/* Scrubbed elements read --k (0 to 1) from main.js. Without JS they show their end state. */
[data-at], [data-count] { --k: 1; }

.p-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.p-head strong { font-size: 18px; font-weight: 800; color: var(--pen); }
.p-head > span { font-size: 14px; color: var(--soft); }
.p-sub { margin-top: 16px; font-size: 15px; color: var(--soft); }
.p-sub b { font-size: 20px; color: var(--pen); }
.p-foot { margin-top: 20px; font-size: 15px; color: var(--ink); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 6px)); }
.chip-ink { display: inline-block; margin-right: 10px; padding: 0 8px; border-radius: 5px; background: var(--pen); color: #fff; font-size: 13px; font-weight: 700; }
.chip-soft { display: inline-block; padding: 0 8px; border-radius: 5px; background: var(--hl); color: var(--pen); font-size: 13px; font-weight: 700; }
.red-note { color: var(--red); font-weight: 600; }

.tick { width: 20px; height: 16px; flex: none; overflow: visible; }
.tick path { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 1)); opacity: min(1, calc(var(--k, 1) * 20)); }

/* scene 0: week */
.week { margin-top: 16px; }
.week-days { display: grid; grid-template-columns: 28px repeat(7, 1fr); font-size: 13px; color: var(--soft); text-align: center; }
.week-body { position: relative; display: grid; grid-template-columns: 28px 1fr; height: 286px; margin-top: 4px; }
.week-hours { position: relative; font-size: 11px; color: var(--soft); }
.week-hours span { position: absolute; left: 0; line-height: 1; }
.week-hours span:nth-child(1) { top: 0; }
.week-hours span:nth-child(2) { top: calc(2 / 13 * 100%); }
.week-hours span:nth-child(3) { top: calc(4 / 13 * 100%); }
.week-hours span:nth-child(4) { top: calc(6 / 13 * 100%); }
.week-hours span:nth-child(5) { top: calc(8 / 13 * 100%); }
.week-hours span:nth-child(6) { top: calc(10 / 13 * 100%); }
.week-hours span:nth-child(7) { top: calc(12 / 13 * 100%); }
.week-cols {
  position: relative;
  background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px), linear-gradient(var(--grid) 1px, transparent 1px);
  background-size: calc(100% / 7) 100%, 100% calc(100% / 13);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.blk {
  position: absolute;
  left: calc(var(--d) * 100% / 7 + 3px); width: calc(100% / 7 - 6px);
  top: calc((var(--s) - 8) / 13 * 100% + 1px); height: calc(var(--l) / 13 * 100% - 2px);
  padding: 2px 5px;
  background: var(--quiet); border-left: 2px solid var(--pen); border-radius: 0 4px 4px 0;
  font-style: normal; font-size: 11px; line-height: 1.35; color: var(--ink);
  overflow: hidden;
}
.blk-draft {
  background: transparent; border: 1.5px dashed var(--pen); border-radius: 4px;
  clip-path: inset(0 calc((1 - var(--k)) * 100%) calc((1 - var(--k)) * 100%) 0);
}
.blk-draft b, .draft-fill b { display: block; font-size: 11px; color: var(--pen); }
.blk-draft em, .draft-fill em { display: block; font-style: normal; font-size: 10px; line-height: 1.3; color: var(--soft); }
.blk-draft b, .draft-fill b { line-height: 1.3; }
.draft-fill { position: absolute; inset: -1.5px; padding: 3.5px 6.5px; background: var(--pen); border-radius: 4px; opacity: var(--k); }
.draft-fill b, .draft-fill em { color: #fff; }

.checks { margin-top: 16px; display: grid; gap: 4px; }
.checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; opacity: min(1, calc(var(--k) * 3)); }

/* scene 1: roster */
.roster { margin-top: 12px; }
.roster li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 16px; height: 56px; border-bottom: 1px solid var(--grid); }
.box { position: relative; width: 24px; height: 24px; border: 1.5px solid var(--rule); border-radius: 6px; }
.box .tick { position: absolute; left: 3px; top: 1px; width: 22px; height: 18px; }
.roster b { font-size: 17px; font-weight: 700; }
.late { font-size: 13px; color: var(--soft); opacity: var(--k); }
.note { margin-top: 20px; padding: 12px 16px; background: var(--quiet); border-radius: 8px; opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 6px)); }
.note span { font-size: 12px; color: var(--soft); }
.note p { font-size: 15px; }

/* scene 2: finish + hours */
.finish {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; height: 56px; margin-top: 20px; padding: 0 20px;
  border: 1.5px solid var(--pen); border-radius: 10px; background: var(--paper);
  overflow: hidden; cursor: default;
  font-size: 17px; font-weight: 800;
  color: color-mix(in srgb, #fff calc(var(--k) * 100%), var(--pen));
}
.finish::before { content: ""; position: absolute; inset: 0; background: var(--pen); transform-origin: left; transform: scaleX(var(--k)); }
.finish > * { position: relative; }
.finish-box { position: relative; width: 24px; height: 24px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pen); }
.finish-box .tick { position: absolute; left: 3px; top: 1px; width: 22px; height: 18px; }
.hours { margin-top: 12px; }
.hours li { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; height: 56px; border-bottom: 1px solid var(--grid); }
.hours b { font-size: 17px; font-weight: 700; }
.hours span { font-size: 13px; color: var(--soft); }
.hours em { min-width: 64px; text-align: right; font-style: normal; font-size: 26px; font-weight: 700; color: var(--pen); }
.hours .low em { color: var(--red); }
.circle { position: absolute; right: -18px; top: 50%; width: 100px; height: 52px; margin-top: -26px; overflow: visible; pointer-events: none; }
.circle path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); opacity: min(1, calc(var(--k) * 20)); }
.scene[data-scene="2"] .p-foot { margin-top: 24px; }

/* scene 3: feedback */
.draft { position: relative; margin-top: 20px; min-height: 168px; font-size: 17px; line-height: 2; color: var(--ink); }
.draft .rest { color: transparent; }
.draft .caret { display: inline-block; width: 2px; height: 1.1em; margin: 0 1px -0.18em; background: var(--pen); }
.draft.is-done .caret { opacity: 0; }
.draft-edit { margin-top: 12px; padding: 12px 16px; background: var(--quiet); border-radius: 8px; opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 6px)); }
.draft-edit span { font-size: 12px; color: var(--soft); }
.draft-edit p { font-size: 15px; }
.draft-edit s { color: var(--soft); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.draft-edit ins { margin-left: 8px; text-decoration: none; background: linear-gradient(transparent 55%, var(--hl) 55%); }
.send { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.send-btn { opacity: calc(.35 + .65 * min(1, var(--k) * 4)); position: relative; display: grid; place-items: center; height: 48px; min-width: 132px; padding: 0 20px; border-radius: 10px; background: var(--pen); color: #fff; font-weight: 800; box-shadow: calc(var(--k) * 4px) calc(var(--k) * 4px) 0 0 var(--hl); }
.send-btn > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; }
.send-idle { opacity: calc(1 - var(--k) * 2); }
.send-done { opacity: calc(var(--k) * 2 - 1); }
.send-done .tick path { stroke: #fff; }
.send-hint { font-size: 14px; color: var(--soft); opacity: var(--k); }

/* scene 4: income */
.income { margin-top: 20px; font-size: 76px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--pen); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 112px; margin-top: 20px; border-bottom: 1.5px solid var(--pen); }
.bars i { flex: 1; height: calc(var(--h) * 100% * var(--k)); background: var(--hl); border-radius: 3px 3px 0 0; }
.bars .today-bar { background: var(--pen); }
.bars-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--soft); }
.ledger { margin-top: 16px; }
.ledger div { display: flex; justify-content: space-between; align-items: baseline; height: 48px; padding-top: 12px; border-bottom: 1px solid var(--grid); opacity: var(--k); }
.ledger dt { color: var(--soft); }
.ledger dd { font-size: 18px; font-weight: 700; }
.ledger div:last-child dd { color: var(--red); font-family: var(--sans); font-size: 16px; }

/* ---------- handled ---------- */

.handled {
  max-width: var(--max); margin: 0 auto;
  padding: 192px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start;
}
.handled-intro { position: sticky; top: 144px; }
.handled h2, .plans h2 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.2; font-weight: 900; letter-spacing: -.02em; color: var(--pen); }
.handled-intro p, .plans-intro p { margin-top: 24px; max-width: 26em; text-wrap: pretty; font-size: 17px; line-height: 1.9; color: var(--soft); }

.strikes li { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.strikes li:first-child { border-top: 1.5px solid var(--pen); }
.strike-old { display: block; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; font-weight: 600; color: var(--ink); transition: color .5s .3s; }
/* The red-pen strike is a background stroke so it follows the text across line breaks. */
.strike-text {
  background: linear-gradient(var(--red), var(--red)) no-repeat 0 56% / 0% 2.5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.strike-new { position: relative; display: block; margin-top: 8px; padding-left: 28px; font-size: 16px; color: var(--pen); }
.strike-new::before {
  content: ""; position: absolute; left: 4px; top: .48em;
  width: 11px; height: 6px; border: solid var(--red); border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
}
.js .strike-new { opacity: 0; transform: translateY(4px); }
.js .strikes .strike-text { transition: background-size .6s var(--ease-pen); transition-delay: calc(var(--i) * .16s); }
.js .strikes .strike-new { transition: opacity .5s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * .16s + .4s); }
.js .strikes.in .strike-text, html:not(.js) .strike-text { background-size: 100% 2.5px; }
.js .strikes.in .strike-old, html:not(.js) .strike-old { color: var(--soft); }
.js .strikes.in .strike-new { opacity: 1; transform: none; }

/* ---------- plans ---------- */

.plans, .handled { scroll-margin-top: 48px; }
.plans { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 192px; }
.plan-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border-top: 1.5px solid var(--pen); }
.plan { padding: 32px 32px 24px; border-left: 1px solid var(--rule); }
.plan:first-child { border-left: 0; padding-left: 0; }
.plan-name { display: inline-block; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--pen); }
.plan-main .plan-name { background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); padding: 0 4px; margin-left: -4px; }
.plan-for { margin-top: 8px; font-size: 15px; color: var(--soft); }
.plan ul { margin-top: 24px; }
.plan li { padding: 12px 0; border-bottom: 1px solid var(--grid); font-size: 16px; line-height: 1.5; }
.plan li b { font-weight: 700; color: var(--pen); }

/* ---------- closing + footer ---------- */

.closing { max-width: var(--max); margin: 0 auto; padding: 120px var(--gutter) 168px; display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 1px solid var(--rule); }
.ribbon-small { width: 112px; }
.closing h2 { margin-top: 32px; font-size: clamp(44px, 7vw, 104px); line-height: 1.15; font-weight: 900; letter-spacing: -.03em; color: var(--pen); }
.closing p { margin-top: 24px; font-size: 17px; color: var(--soft); }
.closing .hero-cta { justify-content: center; }
.js .closing .hero-cta { opacity: 1; animation: none; }

.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 48px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--soft); }
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--pen); }
.foot .font-num { margin-left: auto; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
  .hero-final { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; }
  .hero-title { font-size: clamp(52px, 6.4vw, 88px); }
}

@media (max-width: 860px) {
  .nav { gap: 16px; }
  .nav-slogan { display: none; }
  .hero { padding-top: 112px; align-items: flex-start; }
  .hero-final { grid-template-columns: 1fr; gap: 48px; }
  .hero-title { font-size: clamp(52px, 14vw, 96px); }
  .hero-lede { margin-top: 24px; font-size: 16px; }
  .hero-cta { margin-top: 32px; }
  .demo { justify-self: stretch; }
  .tab { padding: 6px 4px 14px; font-size: 14px; }
  .tab::before, .tab::after { left: 4px; right: 4px; }

  .handled { grid-template-columns: 1fr; gap: 48px; padding: 144px var(--gutter); }
  .handled-intro { position: static; }
  .plan-cols { grid-template-columns: 1fr; }
  .plan { border-left: 0; padding: 32px 0 24px; border-bottom: 1px solid var(--rule); }
  .foot .font-num { margin-left: 0; }
}

@media (max-width: 560px) {
  .nav .link-quiet { display: none; }
  .fl-row { flex-direction: column; align-items: flex-start; gap: 0; font-size: 48px; }
  .fl-row li { display: flex; align-items: center; gap: 16px; }
  .fl-row .tick { position: static; width: 26px; height: 21px; margin: 0; }
  .fl-caption { font-size: 20px; }
  .tab span { display: none; }
}

/* ---------- reduced motion: no opening, the demo waits for a tap ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .ribbon[data-ribbon] .ribbon-wipe { clip-path: none; animation: none !important; }
  .js .ribbon[data-ribbon] .ribbon-speed { opacity: 1; transform: none; animation: none !important; }
  .js .scene, .js .scene.is-on { transform: none; transition: opacity .15s, visibility 0s; }
  .demo-pause { display: none; }
  .js .strikes .strike-text, .js .strikes .strike-new, .strike-old { transition: none; }
}