/* Public landing page (served at / to signed-out visitors).
 *
 * Self-contained on purpose: it does not load app.css or theme.css, so app
 * restyles never shift the marketing page and the page stays light-only. DM
 * Sans is self-hosted (variable font, one file per subset) so the first paint
 * does not wait on a third-party origin. */

@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #1d2033;
  --body: #4f5370;
  --muted: #5d6178;
  --faint: #8a8db0;
  --accent: #5146e5;
  --accent-deep: #4a41d9;
  --accent-hover: #3d35c0;
  --accent-grad: linear-gradient(135deg, #5b54ec, #4a41d9);
  --line: rgba(29, 32, 51, .12);
  --red-bg: #fbdbe7;   --red: #c8245a;
  --amb-bg: #fde9cc;   --amb: #b86400;
  --gry-bg: rgba(29, 32, 51, .07);
  --ind-bg: #e4e2ff;   --ind: #3d35c0;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: linear-gradient(180deg, #d6e0f8 0%, #dcd6f7 45%, #ecdcf6 100%) fixed;
  background-color: #dcd6f7;
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
::selection { background: #d9d4ff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
h1, h2, p { margin: 0; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes tk-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; overflow-x: clip; }
.blob { position: absolute; border-radius: 50%; background: #fff; pointer-events: none; }
.blob.b1 { top: -180px; left: -10%; width: 60%; height: 520px; filter: blur(110px); opacity: .7; }
.blob.b2 { top: 60px; right: -15%; width: 55%; height: 440px; filter: blur(120px); opacity: .55; }

.logo { width: 32px; height: 32px; border-radius: 10px; display: block; flex: none; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand span { font: 700 19px 'DM Sans'; letter-spacing: -.02em; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 12px; z-index: 20;
  width: calc(100% - 32px); max-width: 1200px; margin-top: 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0); box-shadow: none;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.nav.scrolled { background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .95); box-shadow: 0 14px 34px -22px rgba(60, 50, 160, .5); }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-links a { font: 600 14px 'DM Sans'; color: var(--ink); padding: 10px 14px; border-radius: 999px; white-space: nowrap; }
.nav-links a:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.nav-links a.cta { color: #fff; background: var(--ink); padding: 10px 16px; margin-left: 6px; }
.nav-links a.cta:hover { background: #33375a; }

/* --------------------------------------------------------------- buttons */
.btn { font: 600 16px 'DM Sans'; padding: 15px 26px; border-radius: 999px; display: inline-block; }
.btn-primary { color: #fff; background: var(--accent-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 36px -18px rgba(74, 65, 217, .9); }
.btn-primary:hover { color: #fff; background: var(--accent-deep); }
.btn-ghost { color: var(--ink); background: rgba(255, 255, 255, .7); border: 1px solid #fff; }
.btn-ghost:hover { color: var(--ink); background: #fff; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 64px 24px 0; }
.hero-copy { max-width: 880px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 14px 'DM Sans'; color: var(--body); padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid #fff; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { font: 700 clamp(44px, 7.4vw, 100px)/.95 'DM Sans'; letter-spacing: -.05em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { font: 400 19px/1.55 'DM Sans'; color: var(--body); max-width: 580px; text-wrap: pretty; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.mock-wrap {
  width: 100%; max-width: 1240px; margin-top: 72px; perspective: 1800px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.mock {
  transform-origin: 50% 0; transform: rotateX(14deg) scale(.94);
  height: 720px; border-radius: 30px 30px 0 0;
  background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .9); border-bottom: none;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 -10px 80px -30px rgba(60, 50, 160, .45);
  display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden;
  text-align: left;
}
.rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 0; margin: 12px; border-radius: 22px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .9); }
.rail .logo { width: 40px; height: 40px; border-radius: 12px; }
.rail-i { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.rail-i.on { background: #fff; }
.mock-main { padding: 22px 24px 22px 8px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mock-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.mock-head h3 { margin: 0; font: 700 30px 'DM Sans'; letter-spacing: -.03em; }
.mock-head p { font: 400 15px 'DM Sans'; color: var(--muted); margin-top: 3px; }
.mock-tools { display: flex; gap: 10px; align-items: center; }
.fake-search { font: 400 14px 'DM Sans'; color: var(--faint); background: rgba(255, 255, 255, .7); border: 1px solid #fff; padding: 11px 16px; border-radius: 12px; width: 220px; }
.fake-add { font: 600 14px 'DM Sans'; color: #fff; background: var(--accent-grad); padding: 11px 16px; border-radius: 12px; white-space: nowrap; }
.wbar { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .85); overflow: hidden; white-space: nowrap; font: 500 13px 'DM Sans'; }
.wbar .lbl { color: var(--muted); padding: 0 6px; letter-spacing: .06em; font-size: 12px; }
.wbar .on { color: var(--accent); background: #fff; padding: 6px 12px; border-radius: 999px; }
.wbar .off { color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(29, 32, 51, .08); }
.wgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.w { background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.w-t { font: 700 16px 'DM Sans'; }
.w-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: rgba(255, 255, 255, .8); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.stat b { font: 700 32px/1 'DM Sans'; letter-spacing: -.03em; }
.stat span, .sub { font: 400 13px 'DM Sans'; color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font: 500 11px 'DM Sans'; color: var(--muted); }
.week div { display: flex; flex-direction: column; gap: 4px; padding: 7px 0; }
.week b { font: 600 17px 'DM Sans'; color: var(--ink); }
.week .today { border-radius: 10px; background: var(--accent); color: #d9d5ff; }
.week .today b { color: #fff; }

.item { display: flex; align-items: center; gap: 10px; }
.co { width: 34px; height: 34px; flex: none; border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 12px 'DM Sans'; }
.item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-t b { font: 600 15px 'DM Sans'; }
.item-t span { font: 400 13px 'DM Sans'; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { font: 600 12px 'DM Sans'; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill.red { color: var(--red); background: var(--red-bg); }
.pill.amb { color: var(--amb); background: var(--amb-bg); }
.pill.gry { color: var(--muted); background: var(--gry-bg); }
.pill.ind { color: var(--accent); background: var(--ind-bg); }
.note { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .8); }
.note b { font: 600 14px 'DM Sans'; }
.bars { display: flex; align-items: center; gap: 12px; font: 400 13px 'DM Sans'; color: var(--muted); }
.bars > span:first-child { width: 110px; flex: none; }
.bars .track { flex: 1; height: 8px; border-radius: 4px; background: var(--gry-bg); }
.bars .track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.bars b { color: var(--ink); font-weight: 600; }
.streak-n { display: flex; align-items: baseline; gap: 8px; }
.streak-n b { font: 700 34px/1 'DM Sans'; letter-spacing: -.03em; }
.streak-n span { font: 500 15px 'DM Sans'; color: var(--muted); }
.days { display: flex; justify-content: space-between; }
.days div { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 11px 'DM Sans'; color: var(--faint); }
.days i { width: 26px; height: 26px; border-radius: 50%; background: #f3a03c; display: flex; align-items: center; justify-content: center; }
.days i::after { content: ''; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.days i.miss { background: rgba(29, 32, 51, .07); }
.days i.miss::after { display: none; }
.days .now i { background: #e8870c; box-shadow: 0 0 0 3px rgba(232, 135, 12, .22); }
.days .now { color: var(--ink); }

/* ----------------------------------------------------------- sections */
.section { position: relative; width: 100%; max-width: 1240px; padding: 96px 24px; display: flex; flex-direction: column; gap: 28px; }
.section.tint { background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .28); clip-path: inset(0 -100vmax); }
.h2 { font: 700 clamp(30px, 3.6vw, 44px)/1.08 'DM Sans'; letter-spacing: -.035em; text-wrap: balance; }
.glass { background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }

/* how it works */
.how { padding: 112px 24px 88px; gap: 36px; }
.how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.how-head a { font: 600 15px 'DM Sans'; }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: stretch; }
.steps { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.step {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; width: 100%;
  display: flex; gap: 18px; padding: 22px 24px; border-radius: 22px;
  background: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0);
  transition: background .3s ease, border-color .3s ease;
}
.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step:hover { background: rgba(255, 255, 255, .35); }
.step.on { background: rgba(255, 255, 255, .78); border-color: #fff; }
.step-n { font: 600 14px 'DM Sans'; color: var(--faint); padding-top: 5px; transition: color .3s; }
.step.on .step-n { color: var(--accent); }
.step-t { display: flex; flex-direction: column; gap: 6px; }
.step-t b { font: 700 20px 'DM Sans'; letter-spacing: -.02em; color: var(--ink); }
.step-t span { font: 400 15px/1.55 'DM Sans'; color: var(--body); text-wrap: pretty; }
.step-bar { position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: 0 50%; animation: tk-fill 7s linear forwards; }

.stage { border-radius: 28px; box-shadow: 0 40px 90px -50px rgba(60, 50, 160, .55); padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dots { display: flex; gap: 6px; align-items: center; }
.dots i { width: 10px; height: 6px; border-radius: 3px; background: rgba(29, 32, 51, .15); transition: all .35s ease; }
.dots i.on { width: 28px; background: var(--accent); }
.stage-ctl { display: flex; align-items: center; gap: 10px; font: 500 13px 'DM Sans'; color: var(--faint); white-space: nowrap; }
.chip-btn { all: unset; cursor: pointer; font: 600 12px 'DM Sans'; color: var(--accent); background: rgba(255, 255, 255, .8); border: 1px solid #fff; padding: 6px 12px; border-radius: 999px; }
.chip-btn:hover { background: #fff; }
.panes { flex: 1; display: grid; align-items: center; }
.pane { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; transition: opacity .45s ease, transform .6s var(--ease-out), visibility 0s .6s; }
.pane.before { transform: translateY(-12px); }
.pane.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .45s ease, transform .6s var(--ease-out), visibility 0s; }

.url-bar { display: flex; gap: 8px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid rgba(81, 70, 229, .25); box-shadow: 0 0 0 4px rgba(81, 70, 229, .08); }
.url { flex: 1; min-width: 0; font: 400 14px 'DM Sans'; color: var(--body); padding: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { display: inline-block; width: 1.5px; height: 16px; background: var(--accent); vertical-align: -3px; margin-left: 1px; opacity: 0; }
.typing .caret { opacity: 1; }
.url-bar .go { font: 600 14px 'DM Sans'; color: #fff; background: var(--accent-grad); padding: 10px 14px; border-radius: 10px; }
.fx { opacity: 0; transform: translateY(10px); transition: opacity .38s ease, transform .38s ease; }
.filled .fx { opacity: 1; transform: none; }
.filled .fx:nth-child(1) { transition-delay: .32s; }
.fields .fx:nth-child(1) { transition-delay: .44s; }
.fields .fx:nth-child(2) { transition-delay: .56s; }
.fields .fx:nth-child(3) { transition-delay: .68s; }
.fields .fx:nth-child(4) { transition-delay: .80s; }
.hint { font: 500 13px 'DM Sans'; color: var(--accent); padding: 4px 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { background: rgba(255, 255, 255, .85); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field span { font: 500 12px 'DM Sans'; color: var(--faint); }
.field b { font: 600 16px 'DM Sans'; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field.due { background: var(--red-bg); }
.field.due span, .field.due b { color: var(--red); }

.kb { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kcol { min-height: 200px; border-radius: 16px; background: rgba(255, 255, 255, .32); border: 1px solid rgba(255, 255, 255, .85); padding: 8px; display: flex; flex-direction: column; gap: 6px; transition: background .4s ease; }
.kcol.on { background: rgba(255, 255, 255, .62); }
.kcol-h { height: 18px; display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font: 700 12px 'DM Sans'; }
.kcol-h span { font: 500 11px 'DM Sans'; color: var(--faint); }
.slot { height: 52px; border-radius: 10px; border: 1.5px dashed rgba(81, 70, 229, .18); }
.ghost { height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .65); }
.ghost + .ghost { background: rgba(255, 255, 255, .5); }
.kcard {
  position: absolute; top: 32px; left: 8px; width: calc((100% - 24px) / 4 - 16px); height: 52px;
  padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid rgba(81, 70, 229, .3);
  box-shadow: 0 16px 30px -14px rgba(60, 50, 160, .55);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  transition: left .65s var(--ease-out);
}
.kcard b { display: flex; align-items: center; gap: 6px; font: 700 13px 'DM Sans'; }
.kcard b i { width: 7px; height: 7px; border-radius: 50%; transition: background .4s; }
.kcard span { font: 400 11px 'DM Sans'; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; font: 500 13px 'DM Sans'; color: var(--muted); }
.act-btn { all: unset; cursor: pointer; font: 600 14px 'DM Sans'; color: #fff; background: var(--accent-grad); padding: 10px 14px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.act-btn:hover { background: var(--accent-deep); }

.pane.dl { gap: 10px; }
.dl-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 4px; }
.dl-h span { font: 500 13px 'DM Sans'; color: var(--muted); }
.dl-row { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .85); gap: 12px; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .55s var(--ease-out); }
.dl-row .pill { padding: 5px 11px; }
.pane.on .dl-row { opacity: 1; transform: none; }
.dl-row:nth-child(3) { transition-delay: .07s; }
.dl-row:nth-child(4) { transition-delay: .14s; }
.dl-row:nth-child(5) { transition-delay: .21s; }

/* features bento */
.bento { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.bcard { min-width: 0; background: rgba(255, 255, 255, .42); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.bcard.one { flex: 1 1 340px; }
.bcard.two { flex: 2 1 560px; }
.bcard-h { display: flex; flex-direction: column; gap: 6px; }
.bcard-h h3 { margin: 0; font: 700 24px/1.1 'DM Sans'; letter-spacing: -.02em; }
.bcard-h p { font: 400 16px/1.5 'DM Sans'; color: var(--body); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: rgba(255, 255, 255, .85); border: 1px solid #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.tile > span { font: 500 12px 'DM Sans'; color: var(--muted); }
.tile > b { font: 700 30px/1 'DM Sans'; letter-spacing: -.03em; }
.tile .bar6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 6px; }
.tile .bar6 i { height: 7px; border-radius: 4px; background: #e8870c; }
.tile .bar6 i:last-child { background: rgba(29, 32, 51, .08); }
.tile.wide { grid-column: span 2; }
.drop { grid-column: span 2; position: relative; height: 96px; border-radius: 16px; border: 1.5px dashed rgba(81, 70, 229, .35); }
.drop .tile { position: absolute; inset: 0; gap: 10px; transform: translate(18px, -14px) rotate(-2.5deg); box-shadow: 0 24px 40px -18px rgba(60, 50, 160, .5); }
.drop .tile b { font: 700 14px 'DM Sans'; letter-spacing: 0; }
.mini-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font: 600 13px 'DM Sans'; }
.mini-week .t { background: var(--accent); color: #fff; border-radius: 8px; padding: 2px 0; }
.tile.wide b { font: 600 14px 'DM Sans'; letter-spacing: 0; }
.board { display: flex; gap: 10px; align-items: stretch; flex: 1; }
.bcol { flex: 1; min-width: 0; background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .85); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bcol-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 2px 4px; font: 700 13px 'DM Sans'; }
.bcol-h span { font: 500 12px 'DM Sans'; color: var(--muted); }
.card { background: rgba(255, 255, 255, .88); border: 1px solid #fff; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.card b { display: flex; align-items: center; gap: 6px; font: 700 13px 'DM Sans'; }
.card b i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.card span { font: 400 12px 'DM Sans'; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.lifted { transform: rotate(3deg) translateX(-6px); box-shadow: 0 24px 40px -18px rgba(60, 50, 160, .55); }
.dropzone { height: 52px; border-radius: 12px; border: 1.5px dashed rgba(81, 70, 229, .35); display: flex; align-items: center; justify-content: center; font: 500 12px 'DM Sans'; color: var(--faint); }

/* spreadsheet -> Tackl scroll sequence */
.seq { width: 100%; height: 260vh; position: relative; background: linear-gradient(180deg, rgba(81, 70, 229, 0), rgba(81, 70, 229, .06) 8%, rgba(81, 70, 229, .06) 92%, rgba(81, 70, 229, 0)); }
.seq-stick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 24px 16px; overflow: hidden; }
.seq-inner { width: 100%; max-width: 1040px; display: flex; flex-direction: column; gap: 22px; transform-origin: 50% 50%; }
.seq-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; }
.caps { position: relative; flex: 1 1 360px; min-width: 0; height: 48px; }
.caps h2 { position: absolute; inset: 0; display: flex; align-items: flex-end; font: 700 clamp(24px, 3vw, 38px)/1.1 'DM Sans'; letter-spacing: -.035em; }
.caps h2 + h2 { color: var(--accent-deep); opacity: 0; }
.prog { display: flex; align-items: center; gap: 10px; font: 500 13px 'DM Sans'; color: var(--muted); padding-bottom: 8px; }
.prog .track { width: 120px; height: 4px; border-radius: 2px; background: rgba(29, 32, 51, .1); overflow: hidden; }
.prog .track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.prog .end { transition: color .3s; }
.prog .end.on { color: var(--accent); }
.frame { position: relative; width: 100%; border-radius: 12px; box-shadow: 0 40px 90px -50px rgba(60, 50, 160, .6); overflow: hidden; }
.frame-white { position: absolute; inset: 0; background: #fff; pointer-events: none; }
.chrome { position: relative; height: 60px; border-bottom: 1px solid rgba(29, 32, 51, .08); }
.chrome > div { position: absolute; inset: 0; display: flex; align-items: center; }
.sheet-chrome { gap: 12px; padding: 0 18px; }
.sheet-chrome .doc { width: 20px; height: 26px; flex: none; border-radius: 3px; background: #1e8e3e; }
.sheet-chrome .title { display: flex; flex-direction: column; gap: 3px; min-width: 0; font: 400 16px Arial, sans-serif; color: #202124; white-space: nowrap; }
.sheet-chrome .menu { font: 400 12px Arial, sans-serif; color: #5f6368; display: flex; gap: 12px; }
.tackl-chrome { justify-content: space-between; gap: 12px; padding: 0 18px 0 30px; opacity: 0; }
.tackl-chrome > b { font: 700 20px 'DM Sans'; letter-spacing: -.02em; white-space: nowrap; }
.filters { display: flex; gap: 6px; align-items: center; font: 600 13px 'DM Sans'; overflow: hidden; }
.filters span { padding: 7px 13px; border-radius: 999px; white-space: nowrap; }
.filters .sorted { font-weight: 500; color: var(--muted); margin-right: 6px; padding: 0; opacity: 0; }
.filters .all { background: var(--accent); color: #fff; }
.filters .soon { background: rgba(255, 255, 255, .8); color: var(--red); }
.cols { position: relative; height: 36px; }
.cols > div, .srow-sheet, .srow-tackl { display: grid; }
.sheet-grid { grid-template-columns: 40px 1.1fr 1.1fr 1.2fr .9fr 1.4fr 1.3fr; }
.tackl-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, .6fr); gap: 12px; align-items: center; }
.cols .sheet-grid { position: absolute; inset: 0; background: #f8f9fa; border-bottom: 1px solid #e2e3e3; font: 700 13px Arial, sans-serif; color: #202124; }
.cols .tackl-grid { position: absolute; inset: 0; padding: 0 30px; font: 600 11px 'DM Sans'; color: var(--faint); letter-spacing: .08em; opacity: 0; }
.sheet-grid > span { display: flex; align-items: center; padding: 0 10px; border-right: 1px solid #e2e3e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-grid > span:first-child { justify-content: center; padding: 0; background: #f8f9fa; color: #5f6368; font: 400 12px Arial, sans-serif; }
.rows { position: relative; height: 400px; margin-bottom: 10px; }
.srow { position: absolute; left: 0; right: 0; top: 0; height: 50px; }
.srow-sheet { position: absolute; inset: 0; border-bottom: 1px solid #e2e3e3; font: 400 14px Arial, sans-serif; color: #202124; }
.srow-tackl { position: absolute; top: 4px; bottom: 4px; left: 14px; right: 14px; padding: 0 16px; border-radius: 14px; background: rgba(255, 255, 255, .8); border: 1px solid #fff; font: 400 14px 'DM Sans'; opacity: 0; transition: box-shadow .3s; }
.srow.moving { z-index: 3; }
.srow.moving .srow-tackl { box-shadow: 0 18px 34px -16px rgba(60, 50, 160, .55); }
.srow-tackl .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.srow-tackl .who .co { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.srow-tackl .who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-tackl .role { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-tackl .pill { justify-self: start; }
.srow-tackl .res { color: var(--muted); font-size: 13px; }
.pill.grn { color: #1f7a4d; background: #d8f0e3; }
.pill.ink { color: var(--ind); background: var(--ind-bg); }

/* about */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: start; }
.about.tint { background: rgba(255, 255, 255, .3); box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .3); }
.about-copy { display: flex; flex-direction: column; gap: 20px; }
.about-copy h2 { font: 700 clamp(28px, 3.2vw, 40px)/1.1 'DM Sans'; letter-spacing: -.035em; text-wrap: balance; }
.about-copy p { font: 400 18px/1.6 'DM Sans'; color: var(--body); max-width: 520px; text-wrap: pretty; }
.points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.points li { display: flex; flex-direction: column; gap: 4px; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.points b { font: 700 19px 'DM Sans'; letter-spacing: -.01em; }
.points span { font: 400 15px 'DM Sans'; color: var(--muted); }
.points a { font-weight: 600; }

/* final CTA */
.final { padding: 72px 24px 96px; }
.final-card {
  border-radius: 36px; padding: clamp(56px, 7vw, 88px) 32px; color: #fff;
  background: radial-gradient(700px 300px at 50% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0)), linear-gradient(135deg, #4a41d9, #6a5cf0);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  box-shadow: 0 40px 80px -40px rgba(74, 65, 217, .8);
}
.final-card h2 { font: 700 clamp(32px, 4vw, 52px)/1.04 'DM Sans'; letter-spacing: -.04em; max-width: 700px; text-wrap: balance; }
.final-card p { font: 400 18px/1.55 'DM Sans'; color: #e8e6ff; max-width: 440px; }
.final-ctas { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn-white { color: #3d35c0; background: #fff; padding: 15px 28px; box-shadow: 0 12px 30px -14px rgba(20, 16, 90, .6); }
.btn-white:hover { color: #3d35c0; background: #f1efff; }
.btn-line { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.btn-line:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* footer */
.foot { width: 100%; max-width: 1240px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding: 48px 24px 56px; border-top: 1px solid var(--line); font: 400 14px 'DM Sans'; color: var(--muted); }
.foot-brand { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.foot-brand .brand span { font-size: 17px; }
.foot-brand .logo { width: 28px; height: 28px; border-radius: 9px; }
.foot small { font: 400 13px 'DM Sans'; color: var(--faint); }
.foot-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-cols nav { display: flex; flex-direction: column; gap: 10px; }
.foot-cols b { font: 700 13px 'DM Sans'; color: var(--ink); }
.foot-cols a { color: var(--muted); }
.foot-cols a:hover { color: var(--ink); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .mock { grid-template-columns: minmax(0, 1fr); height: 640px; }
  .rail, .fake-search, .wbar { display: none; }
  .mock-main { padding: 22px; }
  .wgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
  .w.opt { display: none; }
}
@media (max-width: 760px) {
  .nav-links .opt { display: none; }
  .mock-wrap { margin-top: 48px; }
  .mock { height: 560px; }
  .mock-head h3 { font-size: 24px; }
  .fake-add { display: none; }
  .wgrid { grid-template-columns: minmax(0, 1fr); }
  .w.opt2 { display: none; }
  .how { padding: 80px 16px 64px; }
  .section { padding-left: 16px; padding-right: 16px; }
  .stage { padding: 20px 18px 22px; }
  .step { padding: 18px; }
  .fields { grid-template-columns: 1fr; }
  .kcol-h { font-size: 11px; }
  .board { overflow: hidden; gap: 6px; }
  .bcard { padding: 22px 18px; }
  .bcol { padding: 8px 6px; border-radius: 14px; }
  .bcol-h { font-size: 12px; padding: 2px; }
  .card { padding: 8px; }
  .bcol:nth-child(4) { display: none; }
  .seq-stick { padding-left: 12px; padding-right: 12px; }
  .sheet-grid { grid-template-columns: 28px 1.1fr 1fr 1fr .9fr; }
  .sheet-grid > :nth-child(6), .sheet-grid > :nth-child(7) { display: none; }
  .tackl-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr); gap: 8px; }
  .tackl-grid > :nth-child(2), .tackl-grid > :nth-child(5) { display: none; }
  .cols .tackl-grid { padding: 0 22px; }
  .srow-tackl { left: 8px; right: 8px; padding: 0 12px; }
  .srow-tackl .who .co { display: none; }
  .tackl-chrome { padding: 0 12px 0 20px; }
  .filters .sorted, .filters .soon { display: none; }
  .final { padding: 48px 16px 72px; }
  .final-card { border-radius: 28px; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 420px) {
  .nav { padding-left: 12px; }
  .nav-links a { padding: 10px 10px; }
  .brand span { font-size: 17px; }
  .lede { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mock { transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
}