/* ToDoing marketing site. One stylesheet for every page, so four pages never
   become four copies of a design system. Uploaded as a static file; there is no
   build step, and nothing here may depend on one.

   Sections: tokens, base, nav, hero + product stage, hero mark, what it is,
   three ideas + their live demos, features, pricing, FAQ, CTA, footer, responsive. */
:root{
  /* Pure white, cool neutrals. No beige. */
  --bg:#FFFFFF;
  --band:#F6F7F9;
  --band-2:#F1F3F6;
  --rule:#E7E9ED;
  --rule-soft:#EFF1F4;
  --ink:#0F1012;
  --ink-soft:#3A3C41;
  --ink-muted:#6B6E76;
  --ink-caption:#5F6167;      /* 6.3:1. Small labels get DARKER, not lighter. */
  /* The old --ink-faint (#8A8D95) measured 3.3:1 on white and was carrying real
     labels, so every text use moved to --ink-caption. Kept only as a reference. */
  --ink-faint:#8A8D95;
  /* Product project colours. The only pops on the page. */
  --indigo:#4F46E5;
    /* Tint behind the current day inside the principle demos. */
    --today-wash:rgba(79,70,229,.045); --yellow:#FFCE00; --teal:#0E7C86; --amber:#B7860B; --rose:#D6355E;
  --forest:#1E7A38; --violet:#7A3BD0; --orange:#DD6420; --blue:#1E74D0;
  /* Device shell */
  --shell:#15171C; --shell-2:#22252C; --shell-edge:#2D313A;
  --display:'Noto Serif','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Noto Sans','Helvetica Neue',Arial,sans-serif;
  --shadow-sm:0 1px 2px rgba(23,26,45,.05), 0 1px 1px rgba(23,26,45,.03);
  --shadow-md:0 1px 4px rgba(23,26,45,.04), 0 16px 36px -20px rgba(23,26,45,.16);
  --shadow-lg:0 2px 8px rgba(23,26,45,.05), 0 34px 70px -30px rgba(23,26,45,.20);
  --maxw:1200px;
  --gut:32px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--ink);color:#fff}
a{color:inherit;text-decoration:none}
svg{display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.06;color:var(--ink);text-wrap:balance}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
.btn-ink:focus-visible{outline-color:#fff;box-shadow:0 0 0 3px var(--indigo)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border:1px solid var(--rule);border-radius:8px;font-weight:600}

/* The annotation system: a small caps label, a hairline, a fact.
   Repeats in the hero, on every specimen plate and in the page sketches. */
.anno{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-caption)}
.anno-line{height:1px;background:var(--rule);flex:1}
.anno-txt{font-size:13.5px;color:var(--ink-caption);line-height:1.5}

/* ── Nav ───────────────────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,0);
  transition:background .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
#nav.scrolled{background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--rule-soft)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.brand-mark{height:23px;width:auto;flex:0 0 auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;color:var(--ink-muted);font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-weight:600;font-size:15px;border-radius:11px;padding:11px 20px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease,background .2s,box-shadow .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-ink:hover{background:#000;box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink-caption);background:var(--band)}
.btn-lg{padding:15px 28px;font-size:16.5px;border-radius:13px}
.nav-signin{font-size:14.5px;font-weight:500;color:var(--ink-muted)}
.nav-signin:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;align-items:center;justify-content:center;color:var(--ink)}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:150px 0 0;overflow:hidden}
.hero-in{position:relative;z-index:1}
.hero-top{display:grid;grid-template-columns:1fr;gap:34px;align-items:end}
@media(min-width:1000px){.hero-top{grid-template-columns:minmax(0,1fr) 290px;gap:56px}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-muted);
  background:#fff;border:1px solid var(--rule);border-radius:99px;padding:6px 15px 6px 11px}
.eyebrow .k{display:inline-flex;gap:4px}
.eyebrow .k i{width:7px;height:7px;border-radius:99px}
h1{font-size:clamp(40px,5.7vw,72px);font-weight:600;letter-spacing:-.038em;max-width:16ch;margin:26px 0 0;line-height:1.03}
h1 .soft{display:block;font-style:italic;font-weight:400;color:var(--ink-soft);letter-spacing:-.032em}
.hero-sub{font-size:clamp(18px,2.1vw,21.5px);color:var(--ink-soft);max-width:44ch;margin:28px 0 0;line-height:1.55}
.hero-sub .hl{color:var(--indigo);font-weight:500}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-note{font-size:14px;color:var(--ink-muted);margin-top:16px}
.hero-note b{color:var(--ink-soft);font-weight:600}
/* Catalogue annotation, right of the headline */
/* A catalogue callout: rule above, hairline dropping toward the specimen below. */
.hero-anno{border-top:1px solid var(--ink);padding-top:14px;position:relative}
.hero-anno::after{content:"";position:absolute;left:0;top:100%;width:1px;height:76px;
  background:linear-gradient(180deg,var(--rule),rgba(231,233,237,0))}
.hero-anno .anno{color:var(--ink)}
.hero-anno p{margin-top:10px;font-size:13.5px;color:var(--ink-caption);line-height:1.55}
.hero-anno dl{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px}
.hero-anno dt{color:var(--ink-caption);font-weight:600;letter-spacing:.02em}
.hero-anno dd{color:var(--ink-soft)}

/* ── The device ────────────────────────────────────────────────────────── */
.stage{position:relative;margin-top:52px;padding-bottom:8px;perspective:2400px;display:flex;justify-content:center;
  height:612px;transition:height .7s cubic-bezier(.22,1,.36,1)}
.stage[data-size="tablet"]{height:612px}
.stage[data-size="phone"]{height:672px}
/* the pool of light the device stands in */
.pool{position:absolute;left:50%;bottom:-104px;width:min(1180px,102vw);height:300px;transform:translateX(-50%);
  /* Focal point sits just under the device's base, and the falloff completes
     inside the box, so the pool never meets its own edge while still visible. */
  background:radial-gradient(52% 54% at 50% 46%,rgba(15,16,18,.14),rgba(15,16,18,.055) 42%,rgba(15,16,18,0) 78%);
  pointer-events:none;z-index:0}
.dev-lift{width:100%;display:flex;justify-content:center;transform-style:preserve-3d;will-change:transform}
.dev{position:relative;width:min(1136px,100%);height:552px;border-radius:22px;padding:11px;
  background:linear-gradient(165deg,var(--shell-edge),var(--shell) 42%,#0D0F13);
  box-shadow:0 2px 6px rgba(15,16,18,.16),0 40px 90px -34px rgba(15,16,18,.45),
             inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d;will-change:transform;
  transition:width .7s cubic-bezier(.22,1,.36,1),height .7s cubic-bezier(.22,1,.36,1),border-radius .7s}
.stage[data-size="tablet"] .dev{width:min(800px,100%);height:576px;border-radius:26px}
.stage[data-size="phone"] .dev{width:min(364px,100%);height:632px;border-radius:40px;padding:9px}
.dev::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(255,255,255,.07)}
.glass{position:absolute;inset:11px;border-radius:12px;pointer-events:none;z-index:6;overflow:hidden}
.glass::before{content:"";position:absolute;inset:-40%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.22) 48%,rgba(255,255,255,0) 60%);
  transform:translateX(var(--sheen,-30%));opacity:.55}
.stage[data-size="phone"] .glass{inset:9px;border-radius:32px}

/* ── The app screen (product recreation) ───────────────────────────────── */
.scr{position:relative;width:100%;height:100%;border-radius:12px;overflow:hidden;
  background:var(--p-paper);color:var(--p-ink);display:flex;flex-direction:column;
  /* Product tokens, warm theme (the app's :root default). */
  --p-paper:#FAFAF8; --p-paper-warm:#F5F4F0; --p-ink:#1A1A1A; --p-ink-soft:#43423F;
  --p-ink-muted:#6E6D67; --p-ink-faint:#9B9A93; --p-rule:#E6E4DE; --p-today:#FDFDFC; --p-wash:rgba(26,26,26,.05)}
.stage[data-size="phone"] .scr{border-radius:32px}
.scr[data-theme="cool"]{--p-paper:#FFFFFF; --p-paper-warm:#F6F7F9; --p-ink:#0F1012; --p-ink-soft:#3A3C41;
  --p-ink-muted:#6B6E76; --p-ink-faint:#9296A0; --p-rule:#E7E9ED; --p-today:#FFFFFF; --p-wash:rgba(15,16,18,.05)}
.scr[data-theme="dark"]{--p-paper:#0E0E0C; --p-paper-warm:#171714; --p-ink:#EAE9E4; --p-ink-soft:#C6C4BC;
  --p-ink-muted:#8E8C85; --p-ink-faint:#6E6C66; --p-rule:#34332F; --p-today:#000000; --p-wash:rgba(234,233,228,.07)}
.scr,.scr *{transition:background-color .55s cubic-bezier(.4,0,.2,1),border-color .55s cubic-bezier(.4,0,.2,1),color .55s cubic-bezier(.4,0,.2,1)}

/* app top nav */
.ap-nav{display:flex;align-items:center;gap:18px;padding:0 16px;height:48px;flex:0 0 auto;
  border-bottom:1px solid var(--p-rule)}
.ap-brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:var(--p-ink)}
.ap-brand svg{height:16px;width:auto}
.ap-tabs{display:flex;align-items:center;gap:2px;margin-left:6px}
.ap-tab{font-size:12.5px;font-weight:500;color:var(--p-ink-muted);padding:6px 11px;border-radius:8px;position:relative;white-space:nowrap}
.ap-tab.on{color:var(--p-ink);font-weight:600;background:var(--p-wash)}
.ap-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.ap-av{width:24px;height:24px;border-radius:99px;background:linear-gradient(140deg,var(--violet),var(--rose));flex:0 0 auto}
/* the product's own three-way theme toggle, live */
.thm{display:inline-flex;align-items:center;gap:1px;background:var(--p-wash);border-radius:99px;padding:3px;position:relative;border:0}
.thm button{width:26px;height:22px;border:0;background:transparent;cursor:pointer;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--p-ink-muted);position:relative;z-index:1;
  transition:color .3s}
.thm button[aria-pressed="true"]{color:var(--p-ink)}
.thm svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* The inset ring is what keeps the selected pill readable in the dark theme,
   where its paper fill sits a couple of percent off the track behind it. */
.thm-pill{position:absolute;top:3px;left:3px;width:26px;height:22px;border-radius:99px;background:var(--p-paper);
  box-shadow:0 1px 2px rgba(0,0,0,.16),inset 0 0 0 1px var(--p-rule);
  transition:transform .42s cubic-bezier(.34,1.4,.5,1)}
.scr[data-theme="cool"] .thm-pill{transform:translateX(27px)}
.scr[data-theme="dark"] .thm-pill{transform:translateX(54px)}

/* app sub header */
.ap-sub{display:flex;align-items:center;gap:12px;padding:0 16px;height:42px;flex:0 0 auto;border-bottom:1px solid var(--p-rule)}
.ap-per{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--p-ink-soft);font-weight:500}
.ap-chev{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--p-ink-muted)}
.ap-chev svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ap-today{font-size:11.5px;font-weight:600;color:var(--p-ink-muted);border:1px solid var(--p-rule);border-radius:8px;padding:3px 9px}
.seg{margin-left:auto;display:inline-flex;background:var(--p-wash);border-radius:9px;padding:2px;gap:2px}
.seg span{font-size:11.5px;font-weight:600;color:var(--p-ink-muted);padding:4px 11px;border-radius:7px}
.seg span.on{background:var(--p-paper);color:var(--p-ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* the week box */
.wk{flex:1;display:flex;min-height:0;padding:14px 16px 16px}
.wk-box{flex:1;display:flex;flex-direction:column;border:1px solid var(--p-rule);border-radius:14px;
  background:var(--p-paper);overflow:hidden;min-width:0}
.wk-cols{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-height:0}
.wk-col{border-right:1px solid var(--p-rule);padding:0 10px 12px;min-width:0;position:relative}
.wk-col:last-child{border-right:0}
.wk-col.today{background:var(--p-today)}
.wk-col.today::before{content:"";position:absolute;left:-1px;right:-1px;top:0;height:2px;background:var(--p-ink)}
/* the .label role: 11px 600 uppercase +.06em, emphasis by colour only */
.dh{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink-muted);
  padding:11px 0 10px;display:flex;align-items:center;gap:6px}
.wk-col.today .dh{color:var(--p-ink)}
.dh .num{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;border-radius:6px;
  background:var(--p-wash);color:var(--p-ink-muted);font-size:10px;letter-spacing:0}
.wk-col.today .dh .num{background:var(--p-ink);color:var(--p-paper)}
/* task cards keep light-mode tokens in every theme (the product's surface-light) */
.tk{position:relative;display:flex;align-items:center;gap:6px;height:34px;padding:0 8px;border-radius:10px;
  margin-bottom:8px;border:1px solid rgba(26,26,26,.07);box-shadow:0 1px 2px rgba(23,26,45,.06);
  background:color-mix(in srgb,var(--c,#888) 14%,#F5F4F0);color:#1A1A1A;overflow:hidden}
.tk .dot{width:6px;height:6px;border-radius:99px;background:var(--c);flex:0 0 auto}
.tk .lb{font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tk .mt{margin-left:auto;padding-left:6px;font-size:9.5px;color:#8A8880;flex:0 0 auto;white-space:nowrap}
.tk .bx{width:13px;height:13px;border-radius:5px;border:1.5px solid rgba(26,26,26,.22);flex:0 0 auto;position:relative}
.tk.done .bx{background:#1A1A1A;border-color:#1A1A1A}
.tk.done .bx::after{content:"";position:absolute;left:3.6px;top:1.2px;width:3.4px;height:6.6px;
  border:1.6px solid #F5F4F0;border-top:0;border-left:0;transform:rotate(42deg)}
.tk.done .lb{color:#8A8880;text-decoration:line-through}
/* Day two of a multi-day task. No checkbox, because you cannot tick the
   second day of a task, and a lighter weight so a week of them never reads
   as a week of separate work. Mirrors the app's ContinuationBar. */
  .tk.cont{background:transparent;border-style:dashed;border-color:rgba(26,26,26,.12);box-shadow:none}
  .tk.cont .lb{color:var(--p-ink-muted);font-weight:500}
  .tk.cont .carry{width:3px;height:15px;border-radius:2px;background:var(--c);opacity:.55;flex:0 0 auto}
  .tk-ghost{border-style:dashed;background:transparent;box-shadow:none;border-color:rgba(122,59,208,.45)}
.tk-add{display:flex;align-items:center;gap:7px;height:30px;padding:0 9px;border-radius:9px;font-size:11px;
  font-weight:500;color:var(--p-ink-faint);border:1px dashed var(--p-rule)}
.tk-add span{font-size:13px;line-height:1}
/* someday column */
.wk-side{width:152px;flex:0 0 auto;border-left:1px solid var(--p-rule);padding:0 10px 12px;background:var(--p-paper-warm)}
/* milestone lane */
.ms-lane{flex:0 0 auto;height:50px;border-top:1px solid var(--p-rule);position:relative;background:var(--p-paper)}
.ms-cap{position:absolute;left:12px;top:8px;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p-ink-faint)}
.ms-row{position:absolute;left:0;right:0;bottom:9px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 10px}
.pill{justify-self:center;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;
  background:var(--p-paper);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);
  color:color-mix(in srgb,var(--c) 62%,var(--p-ink));font-size:10.5px;font-weight:600;white-space:nowrap;max-width:100%}
.pill i{font-style:normal;font-size:8px;color:var(--c)}
.pill span{overflow:hidden;text-overflow:ellipsis}

/* The live move: one card lifts off Monday and lands on Tuesday, on a loop.
   A column track is exactly the card width plus its 20px of padding and the
   1px rule, so one day is translate(100% + 21px). No measurement, resize proof.
   The tilt is 2 degrees, which is the tilt the app itself uses on a drag. */
/* ⚠ z-index is load-bearing. The card translates out of Monday and over
     Tuesday, and .wk-col is position:relative with z-index auto, so it makes
     no stacking context and later columns paint over earlier ones. Without
     this the card slid BEHIND Tuesday's background halfway through the drag.
     .tk is already positioned, so the layer costs nothing else. */
  .mover{animation:move 9s cubic-bezier(.22,1,.36,1) infinite;z-index:5}
@keyframes move{
  0%,6%   {transform:translate(0,0) rotate(0);box-shadow:0 1px 2px rgba(23,26,45,.06)}
  13%     {transform:translate(0,-5px) rotate(2deg);box-shadow:0 12px 26px -8px rgba(23,26,45,.36),0 2px 6px rgba(23,26,45,.09)}
  30%     {transform:translate(calc(100% + 21px),-47px) rotate(2deg);box-shadow:0 12px 26px -8px rgba(23,26,45,.36),0 2px 6px rgba(23,26,45,.09)}
  38%,62% {transform:translate(calc(100% + 21px),-42px) rotate(0);box-shadow:0 1px 2px rgba(23,26,45,.06)}
  72%     {transform:translate(calc(100% + 21px),-47px) rotate(-2deg);box-shadow:0 12px 26px -8px rgba(23,26,45,.36),0 2px 6px rgba(23,26,45,.09)}
  88%     {transform:translate(0,-5px) rotate(-2deg);box-shadow:0 12px 26px -8px rgba(23,26,45,.36),0 2px 6px rgba(23,26,45,.09)}
  95%,100%{transform:translate(0,0) rotate(0);box-shadow:0 1px 2px rgba(23,26,45,.06)}
}
.slot{animation:slot 9s ease infinite;height:0;margin:0;opacity:0}
@keyframes slot{
  0%,10%  {height:0;margin-bottom:0;opacity:0}
  22%,64% {height:34px;margin-bottom:8px;opacity:1}
  76%,100%{height:0;margin-bottom:0;opacity:0}
}

/* phone board (the product's MobileWeek) */
.mob{flex:1;display:flex;flex-direction:column;min-height:0}
.mob-strip{display:flex;gap:6px;padding:12px 12px 12px;border-bottom:1px solid var(--p-rule);flex:0 0 auto}
.mob-chip{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border-radius:11px;
  border:1px solid var(--p-rule);background:var(--p-paper)}
.mob-chip .d{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink-muted)}
.mob-chip .n{font-size:14px;font-weight:600;color:var(--p-ink-soft);font-family:var(--display)}
.mob-chip .pips{display:flex;gap:2px;height:4px}
.mob-chip .pips i{width:4px;height:4px;border-radius:99px;background:var(--c)}
.mob-chip.on{background:var(--p-ink);border-color:var(--p-ink)}
.mob-chip.on .d{color:color-mix(in srgb,var(--p-paper) 72%,transparent)}
.mob-chip.on .n{color:var(--p-paper)}
.mob-list{flex:1;padding:14px 12px;overflow:hidden}
.mob-h{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--p-ink-muted);margin-bottom:10px}
.mtk{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;border-radius:13px;margin-bottom:9px;
  border:1px solid rgba(26,26,26,.07);box-shadow:0 1px 2px rgba(23,26,45,.06);
  background:color-mix(in srgb,var(--c,#888) 14%,#F5F4F0);color:#1A1A1A}
.mtk .bx{width:18px;height:18px;border-radius:6px;border:1.8px solid rgba(26,26,26,.22);flex:0 0 auto;position:relative}
.mtk.done .bx{background:#1A1A1A;border-color:#1A1A1A}
.mtk.done .bx::after{content:"";position:absolute;left:5px;top:2px;width:4.4px;height:9px;border:1.8px solid #F5F4F0;
  border-top:0;border-left:0;transform:rotate(42deg)}
.mtk .tx{min-width:0;flex:1}
.mtk .tt{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtk.done .tt{color:#8A8880;text-decoration:line-through}
.mtk .ts{font-size:10.5px;color:#8A8880;margin-top:2px;display:flex;align-items:center;gap:5px}
.mtk .ts i{width:6px;height:6px;border-radius:99px;background:var(--c)}
.mtk .grip{width:14px;height:18px;flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3px;align-content:center}
.mtk .grip b{width:3px;height:3px;border-radius:99px;background:rgba(26,26,26,.28)}
.mob-ms{border-top:1px solid var(--p-rule);padding:11px 12px 12px;display:flex;gap:8px;align-items:center;flex:0 0 auto}
.mob-fab{position:absolute;right:16px;bottom:104px;width:46px;height:46px;border-radius:99px;background:var(--p-ink);
  color:var(--p-paper);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:300;
  line-height:1;box-shadow:0 8px 20px -6px rgba(0,0,0,.4);z-index:3}
.mob-bar{flex:0 0 auto;height:56px;border-top:1px solid var(--p-rule);display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;background:var(--p-paper)}
.mob-bar div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;font-weight:600;
  letter-spacing:.04em;color:var(--p-ink-faint)}
.mob-bar div.on{color:var(--p-ink)}
.mob-bar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.board-phone{display:none}
.stage[data-size="phone"] .board-week{display:none}
.stage[data-size="phone"] .board-phone{display:flex}
.stage[data-size="phone"] .ap-sub,.stage[data-size="phone"] .ap-tabs{display:none}
.stage[data-size="tablet"] .wk-side{display:none}
.stage[data-size="tablet"] .ap-tab.hide-md{display:none}

/* device control strip */
.ctrls{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:26px;margin-top:30px;flex-wrap:wrap}
.ctrl{display:flex;align-items:center;gap:11px}
.ctrl .anno{color:var(--ink-caption)}
.sizer{display:inline-flex;background:var(--band);border:1px solid var(--rule);border-radius:99px;padding:3px;gap:2px}
.sizer button{border:0;background:transparent;font-family:var(--sans);font-weight:600;font-size:13px;
  color:var(--ink-muted);padding:7px 15px;border-radius:99px;cursor:pointer;transition:.25s}
.sizer button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.ctrl-hint{text-align:center;font-size:13.5px;color:var(--ink-caption);margin-top:14px}
.dev-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:42px;padding-top:22px;border-top:1px solid var(--rule)}
.dev-caps .anno{display:block;margin-bottom:7px}
.dev-caps p{font-size:14px;color:var(--ink-caption);line-height:1.5;max-width:32ch}

/* ── Section scaffolding ───────────────────────────────────────────────── */
section{position:relative;padding:112px 0}
.band{background:var(--band);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.kicker{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo)}

/* What ToDoing is */
.what{display:grid;grid-template-columns:1fr;gap:46px}
@media(min-width:1000px){.what{grid-template-columns:1.08fr .92fr;gap:80px;align-items:start}}
.statement{font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-size:clamp(28px,4vw,50px);
  line-height:1.1;max-width:19ch;margin-top:18px}
.statement .hl{color:var(--indigo)}
.what p{font-size:17.5px;color:var(--ink-soft);line-height:1.6;margin-top:22px;max-width:52ch}
.what p .hl{color:var(--indigo);font-weight:500}
.what p em{font-style:italic;font-family:var(--display);font-size:1.04em}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chip{font-size:14px;font-weight:500;color:var(--ink-soft);background:#fff;border:1px solid var(--rule);
  border-radius:99px;padding:8px 15px 8px 12px;display:inline-flex;align-items:center;gap:8px}
.chip i{width:8px;height:8px;border-radius:99px}
.morelink{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:600;font-size:15.5px;color:var(--indigo)}
.morelink:hover{gap:12px}
.morelink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}

/* the milestone ribbon: the brand mark, at the rhythm of a quarter */
.ribbon{position:relative;border:1px solid var(--rule);border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow-md)}
.rb-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule-soft)}
.rb-head .t{font-size:13px;font-weight:600;color:var(--ink-soft)}
.rb-head .m{margin-left:auto;font-size:11.5px;color:var(--ink-caption)}
.rb-scale{display:grid;grid-template-columns:repeat(10,1fr);padding:9px 18px 6px;border-bottom:1px solid var(--rule-soft)}
.rb-scale span{font-size:9.5px;color:var(--ink-caption);text-align:center;letter-spacing:.04em}
.rb-body{padding:8px 18px 16px}
.rb-row{display:grid;grid-template-columns:96px 1fr;align-items:center;height:46px}
.rb-row .nm{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-muted);min-width:0}
.rb-row .nm i{width:7px;height:7px;border-radius:99px;flex:0 0 auto}
.rb-track{position:relative;height:100%}
.rb-track::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule-soft);z-index:0}
  /* Above the rule, in the order they should read. */
  .rb-bar{z-index:1}
  .rb-today{z-index:2}
  .rb-pill{z-index:3}
.rb-bar{position:absolute;top:50%;transform:translateY(-50%);height:8px;border-radius:99px;opacity:.22}
.rb-pill{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;height:24px;
  padding:0 10px;border-radius:99px;background:#fff;font-size:11px;font-weight:600;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--c) 48%,transparent);color:color-mix(in srgb,var(--c) 68%,var(--ink));
  box-shadow:var(--shadow-sm)}
.rb-pill i{font-style:normal;font-size:8px;color:var(--c)}
.rb-today{position:absolute;top:0;bottom:0;width:1px;background:rgba(79,70,229,.35)}
.rb-foot{display:flex;align-items:flex-start;gap:9px;padding:12px 18px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--ink-caption);line-height:1.5}
.rb-foot .dia{color:var(--indigo);font-size:9px;font-style:normal;margin-top:5px;flex:0 0 auto}

/* Team grid: the same week, read sideways */
.tgrid{margin-top:22px;border:1px solid var(--rule);border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow-md)}
.tg-body{padding:10px 18px 14px}
.tg-row{display:grid;grid-template-columns:78px repeat(5,1fr);align-items:center;height:34px;gap:6px}
.tg-row.tg-head{height:24px}
.tg-row.tg-head span{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-caption);text-align:center}
.tg-nm{font-size:12px;color:var(--ink-soft);font-weight:500;text-align:left !important}
.tg-row>span>i{display:block;height:16px;border-radius:5px;opacity:.55}
.tg-away i{background:rgba(183,134,11,.16);border:1px solid rgba(183,134,11,.4);opacity:1;font-style:normal;
  font-size:9px;font-weight:600;color:#8A6408;text-align:center;line-height:14px;letter-spacing:.04em}

/* ── Three principles, as specimen plates ─────────────────────────────── */
.prin-head{max-width:820px}
.prin-head h2{font-size:clamp(30px,4.2vw,50px);margin-top:16px;letter-spacing:-.03em}
.prin-head .lead{font-size:clamp(17px,2vw,19.5px);color:var(--ink-soft);margin-top:22px;max-width:62ch;line-height:1.56}
.prin-head .lead b{font-weight:600;color:var(--ink)}
.plates{display:grid;grid-template-columns:1fr;gap:28px;margin-top:64px}
@media(min-width:900px){.plates{grid-template-columns:repeat(3,1fr)}}
.plate{background:#fff;border:1px solid var(--rule);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-md)}
.pl-top{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--rule-soft)}
.pl-n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.pl-t{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-caption);margin-left:auto}
/* the specimen window: a magnified fragment, drawn large, not scaled up */
.pl-win{position:relative;height:236px;background:
   radial-gradient(120% 90% at 50% 0%,#FFFFFF,#F4F6F9 78%);
  border-bottom:1px solid var(--rule-soft);overflow:hidden}
.pl-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:28px 28px}
.pl-body{padding:22px 22px 26px}
.pl-body h3{font-size:21px;letter-spacing:-.02em}
.pl-body p{font-size:15px;color:var(--ink-muted);line-height:1.55;margin-top:11px}
.pl-cap{display:flex;gap:9px;align-items:flex-start;margin-top:18px;padding-top:15px;border-top:1px solid var(--rule-soft)}
.pl-cap .dia{color:var(--indigo);font-style:normal;font-size:8px;margin-top:6px;flex:0 0 auto}
.pl-cap p{font-size:13px;color:var(--ink-caption);margin:0;line-height:1.5}

/* Every specimen is drawn inside a fixed 300px stage, centred in its plate, so
   the magnified geometry is exact at any page width. The fragments are drawn
   large, not scaled up, so the strokes and radii stay honest. */
.pl-in{position:absolute;left:50%;top:0;width:300px;height:100%;transform:translateX(-50%)}

/* Plate 1: the lift and the drop */
.sp{position:absolute;left:25px}
.sp-card{display:flex;align-items:center;gap:12px;width:250px;height:60px;padding:0 15px;border-radius:16px;
  background:color-mix(in srgb,var(--rose) 14%,#F5F4F0);border:1px solid rgba(26,26,26,.07);color:#1A1A1A;
  box-shadow:0 2px 4px rgba(23,26,45,.07)}
.sp-card .bx{width:22px;height:22px;border-radius:8px;border:2px solid rgba(26,26,26,.22);flex:0 0 auto}
.sp-card .dot{width:9px;height:9px;border-radius:99px;background:var(--rose);flex:0 0 auto}
.sp-card .lb{font-size:15px;font-weight:500;white-space:nowrap}
.sp-card .grip{margin-left:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:center}
.sp-card .grip b{width:3.5px;height:3.5px;border-radius:99px;background:rgba(26,26,26,.3)}
.sp-slot{width:250px;height:60px;border-radius:16px;border:2px dashed rgba(122,59,208,.42);background:rgba(122,59,208,.05)}
.p1-ghost{top:38px;opacity:.3}
.p1-slot{top:144px;animation:p1slot 6.5s ease infinite}
.p1-card{top:38px;animation:p1 6.5s cubic-bezier(.22,1,.36,1) infinite}
@keyframes p1{
  0%,10%  {transform:translateY(0) rotate(0);box-shadow:0 2px 4px rgba(23,26,45,.07)}
  22%     {transform:translateY(-10px) rotate(2deg);box-shadow:0 22px 40px -14px rgba(23,26,45,.45),0 3px 8px rgba(23,26,45,.1)}
  50%     {transform:translateY(96px) rotate(2deg);box-shadow:0 22px 40px -14px rgba(23,26,45,.45),0 3px 8px rgba(23,26,45,.1)}
  62%,86% {transform:translateY(106px) rotate(0);box-shadow:0 2px 4px rgba(23,26,45,.07)}
  100%    {transform:translateY(0) rotate(0);box-shadow:0 2px 4px rgba(23,26,45,.07)}
}
/* The slot is always there. It only brightens as the card comes for it, so any
   single frame of the loop still reads as a card moving between two days. */
@keyframes p1slot{0%,14%{opacity:.45}26%,58%{opacity:1}70%,100%{opacity:.45}}
.p1-day{position:absolute;left:27px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-caption)}
.p1-day.a{top:16px}
.p1-day.b{top:122px;color:var(--violet)}

/* Plate 2: a milestone moved to a later date.
   Five day tracks across 300px: x = 10 + 56*n, centres at 38, 94, 150, 206, 262. */
.p2-scale{position:absolute;left:10px;top:42px;width:280px;display:grid;grid-template-columns:repeat(5,1fr)}
.p2-scale span{font-size:10.5px;font-weight:600;letter-spacing:.07em;color:var(--ink-caption);text-align:center}
.p2-line{position:absolute;left:10px;top:110px;width:280px;height:1px;background:var(--rule)}
.p2-tick{position:absolute;top:104px;width:1px;height:13px;background:var(--rule)}
.p2-bar{position:absolute;top:106px;left:10px;height:9px;border-radius:99px;background:var(--forest);opacity:.22;
  width:84px;animation:p2bar 7s cubic-bezier(.22,1,.36,1) infinite}
@keyframes p2bar{0%,20%{width:84px}44%,76%{width:196px}90%,100%{width:84px}}
.p2-pill{position:absolute;top:92px;left:0;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;
  border-radius:99px;background:#fff;border:2px solid color-mix(in srgb,var(--forest) 50%,transparent);
  color:color-mix(in srgb,var(--forest) 62%,var(--ink));font-size:13.5px;font-weight:600;white-space:nowrap;
  animation:p2 7s cubic-bezier(.22,1,.36,1) infinite}
.p2-pill i{font-style:normal;font-size:11px;color:var(--forest)}
@keyframes p2{
  0%,20%  {transform:translate(50px,0);box-shadow:0 2px 4px rgba(23,26,45,.07)}
  30%     {transform:translate(50px,-7px);box-shadow:0 20px 36px -13px rgba(23,26,45,.42),0 3px 7px rgba(23,26,45,.1)}
  44%     {transform:translate(162px,-7px);box-shadow:0 20px 36px -13px rgba(23,26,45,.42),0 3px 7px rgba(23,26,45,.1)}
  54%,76% {transform:translate(162px,0);box-shadow:0 2px 4px rgba(23,26,45,.07)}
  90%,100%{transform:translate(50px,0);box-shadow:0 2px 4px rgba(23,26,45,.07)}
}
.p2-chip{position:absolute;top:188px;left:10px;display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--rule);border-radius:10px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow-md);white-space:nowrap;opacity:0;animation:p2chip 7s ease infinite}
.p2-chip s{text-decoration:none;color:var(--ink-caption);font-weight:500}
.p2-chip .ar{color:var(--ink-caption)}
@keyframes p2chip{0%,24%{opacity:0}34%,80%{opacity:1}90%,100%{opacity:0}}
.p2-days{position:absolute;top:150px;left:10px;font-size:12px;color:var(--ink-caption)}
.p2-days b{color:var(--ink);font-weight:600}

/* Plate 3: the spring toggle, and what it turns on */
.p3-tog{position:absolute;left:10px;top:30px;display:flex;align-items:center;gap:14px}
.p3-track{width:60px;height:32px;border-radius:99px;background:#D3D8E0;position:relative;
  animation:p3t 7s ease infinite}
@keyframes p3t{0%,22%{background:#D3D8E0}34%,86%{background:var(--ink)}96%,100%{background:#D3D8E0}}
.p3-knob{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:99px;background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.22);animation:p3k 7s cubic-bezier(.34,1.5,.4,1) infinite}
@keyframes p3k{0%,22%{transform:translateX(0)}34%,86%{transform:translateX(28px)}96%,100%{transform:translateX(0)}}
.p3-lbl{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.2}
.p3-lbl s{display:block;text-decoration:none;font-size:11.5px;font-weight:500;color:var(--ink-caption);margin-top:3px}
/* The brief is always on the plate. Off, it sits back grey and flat; on, it
   comes forward in full colour. A specimen has to read at rest, not only mid
   animation, so nothing here appears out of nothing. */
.p3-brief{position:absolute;left:10px;top:92px;width:280px;background:#fff;border:1px solid var(--rule);
  border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;
  animation:p3b 7s cubic-bezier(.22,1,.36,1) infinite}
@keyframes p3b{
  0%,22%  {filter:grayscale(1);opacity:.42;transform:translateY(8px) scale(.985);box-shadow:var(--shadow-sm)}
  36%,92% {filter:grayscale(0);opacity:1;transform:translateY(0) scale(1);box-shadow:var(--shadow-md)}
  100%    {filter:grayscale(1);opacity:.42;transform:translateY(8px) scale(.985);box-shadow:var(--shadow-sm)}
}
.p3-bh{padding:9px 13px;border-bottom:1px solid var(--rule-soft);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-caption)}
.p3-bl{display:flex;gap:10px;padding:9px 13px;font-size:12.5px;color:var(--ink-soft);line-height:1.4;align-items:stretch}
.p3-bl+.p3-bl{border-top:1px solid var(--rule-soft)}
.p3-bl .st{width:3px;border-radius:99px;background:var(--c);flex:0 0 auto}
.p3-bl b{font-weight:600;color:var(--ink)}

/* ── Closing ───────────────────────────────────────────────────────────── */
.cta-final{text-align:center;padding:130px 0 120px}
.cta-final h2{font-size:clamp(36px,5.4vw,66px);letter-spacing:-.035em;max-width:17ch;margin:0 auto}
.cta-final p{font-size:19px;color:var(--ink-soft);margin:24px auto 0;max-width:50ch}
.cta-final .hero-actions{justify-content:center}
.cta-final .hero-note{text-align:center}
.cta-dia{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:30px}
.cta-dia i{width:9px;height:9px;transform:rotate(45deg);border-radius:2px}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--rule);padding:64px 0 48px;background:var(--band)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot-brand p{font-size:14px;color:var(--ink-caption);max-width:30ch;line-height:1.55;margin-top:14px}
.foot-col h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-caption);
  margin-bottom:16px;font-family:var(--sans)}
.foot-col a{display:block;font-size:14.5px;color:var(--ink-muted);margin-bottom:11px}
.foot-col a:hover{color:var(--ink)}
.foot-seo{font-size:13px;color:var(--ink-caption);line-height:1.7;margin-top:26px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:34px;padding-top:24px;
  border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-caption);flex-wrap:wrap;gap:14px}

/* ── Reveal (visible by default, hidden only once JS can animate) ──────── */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal:focus-within{opacity:1;transform:none}

/* ── System sketch (not part of the page) ─────────────────────────────── */
.sysblock{background:var(--ink);color:#fff;padding:70px 0 84px}
.sysblock .wrap>.anno{color:rgba(255,255,255,.5)}
.sysblock h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-top:12px;letter-spacing:-.025em}
.sysblock .note{color:rgba(255,255,255,.62);font-size:15px;margin-top:14px;max-width:66ch;line-height:1.55}
.sys-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:44px}
@media(min-width:900px){.sys-grid{grid-template-columns:repeat(3,1fr)}}
.sys{background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.sys-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--rule-soft);
  font-size:10.5px;color:var(--ink-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.sys-body{padding:18px 16px 22px;min-height:330px}
.sys-k{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.sys-h{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:7px;line-height:1.15}
.sys-p{font-size:11.5px;color:var(--ink-muted);margin-top:8px;line-height:1.5}
.sys-rule{height:1px;background:var(--rule-soft);margin:15px 0}
.sys-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.sys-row i{width:6px;height:6px;border-radius:99px;flex:0 0 auto}
.sys-row span{font-size:10.5px;color:var(--ink-soft)}
.sys-shot{border:1px solid var(--rule);border-radius:8px;height:78px;background:linear-gradient(180deg,#fff,#F6F7F9);
  position:relative;overflow:hidden;margin-top:4px}
.sys-shot .col{position:absolute;top:0;bottom:0;width:1px;background:var(--rule-soft)}
.sys-shot .card{position:absolute;height:12px;border-radius:4px}
.sys-steps{counter-reset:s}
.sys-step{display:flex;gap:9px;margin-bottom:11px;align-items:flex-start}
.sys-step b{font-family:var(--display);font-size:10px;color:var(--ink-caption);letter-spacing:.08em;padding-top:2px;flex:0 0 auto}
.sys-step span{font-size:11px;color:var(--ink-soft);line-height:1.45}
.sys-price{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:4px}
.sys-tier{border:1px solid var(--rule);border-radius:8px;padding:9px 8px}
.sys-tier.hot{border-color:var(--ink)}
.sys-tier .n{font-family:var(--display);font-size:11px;font-weight:700}
.sys-tier .a{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.sys-tier .u{font-size:8.5px;color:var(--ink-caption);line-height:1.3}
.sys-tier .l{margin-top:7px;display:flex;flex-direction:column;gap:4px}
.sys-tier .l em{font-style:normal;font-size:8.5px;color:var(--ink-muted);display:flex;gap:4px;align-items:center}
.sys-tier .l em::before{content:"";width:4px;height:4px;border-radius:99px;background:var(--forest);flex:0 0 auto}
.sys-tier .l em.off{color:var(--ink-caption)}
.sys-tier .l em.off::before{background:var(--rule)}


  /* ── Three ideas, each with a live demo. Grafted from The Resolve
     direction, which showed the idea rather than describing it. ──────── */
  .ruled{position:relative}
  .sec-head{max-width:800px}
  .sec-head p{font-size:clamp(17px,1.9vw,19.5px);color:var(--ink-soft);margin:20px 0 0;max-width:62ch;line-height:1.55}
  .hl{color:var(--indigo);font-weight:500}
  .mark{background-image:linear-gradient(180deg,transparent 60%,rgba(255,206,0,.55) 60%);
    padding:0 .06em;border-radius:2px;background-repeat:no-repeat;background-size:100% 100%}
  .prins{display:grid;grid-template-columns:1fr;gap:22px;margin-top:60px}
  .prin{background:#fff;border:1px solid var(--rule);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
  .prin-copy{padding:28px 26px 22px}
  .prin .n{font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink-faint);letter-spacing:.1em}
  .prin h3{font-size:22px;margin:12px 0 0;letter-spacing:-.028em;line-height:1.15}
  .prin p{font-size:15px;color:var(--ink-muted);margin:11px 0 0;line-height:1.55}
  .prin-demo{margin-top:auto;border-top:1px solid var(--rule-soft);background:var(--band);
    padding:16px 18px 18px;position:relative;height:232px;overflow:hidden}
  .demo-cap{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-caption);white-space:nowrap;
    display:flex;align-items:center;gap:7px;margin-bottom:12px}
  .demo-cap .live{width:6px;height:6px;border-radius:99px;background:var(--forest);flex:0 0 auto}
  .dA{position:relative;background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
  .dA-cols{display:grid;grid-template-columns:repeat(3,1fr)}
  .dA-col{border-right:1px solid var(--rule-soft);padding:9px 7px 12px;min-height:118px;min-width:0}
  .dA-col:last-child{border-right:0}
  .dA-col.today{background:var(--today-wash)}
  .dA-col .h{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:9px}
  .dA-col.today .h{color:var(--indigo)}
  .mini{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:6px 7px;margin-bottom:6px;
    box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
  .mini i{width:6px;height:6px;border-radius:99px;flex:0 0 auto}
  .mini span{font-size:10px;font-weight:500;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini.slot{border-style:dashed;box-shadow:none;background:transparent;opacity:0}
  .dA .mini{align-items:flex-start}
  .dA .mini i{margin-top:4px}
  .dA .mini span{white-space:normal;line-height:1.25}
  .dA-ghost{position:absolute;z-index:5;opacity:0;background:#fff;border:1px solid var(--rule);border-radius:8px;
    padding:6px 7px;display:flex;align-items:center;gap:6px;pointer-events:none;
    box-shadow:0 10px 24px -8px rgba(23,26,45,.32),0 2px 6px rgba(23,26,45,.08)}
  .dA-ghost i{width:6px;height:6px;border-radius:99px}
  .dA-ghost span{font-size:10.5px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
  .dA-cursor{position:absolute;z-index:6;width:18px;height:18px;opacity:0;pointer-events:none;
    filter:drop-shadow(0 2px 3px rgba(23,26,45,.3))}
  .dB{background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;position:relative}
  .dB-days{display:grid;grid-template-columns:repeat(10,1fr);padding:7px 10px 5px;border-bottom:1px solid var(--rule-soft)}
  .dB-days span{font-size:9px;color:var(--ink-muted);text-align:center;font-weight:600}
  .dB-body{position:relative;padding:12px 10px}
  .dB-row{position:relative;height:30px;display:flex;align-items:center;gap:7px}
  .dB-row .pl{display:flex;align-items:center;gap:5px;width:52px;flex:0 0 auto}
  .dB-row .pl i{width:6px;height:6px;border-radius:99px}
  .dB-row .pl span{font-size:9.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dB-track{position:relative;flex:1;height:100%}
  .dB-bar{position:absolute;top:50%;transform:translateY(-50%);height:20px;border-radius:99px;display:flex;
    align-items:center;gap:4px;padding:0 8px;font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;
    border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
    background:color-mix(in srgb,var(--c) 7%,#fff);color:color-mix(in srgb,var(--c) 78%,var(--ink));
    box-shadow:var(--shadow-sm);will-change:transform}
  .dB-bar i{font-style:normal;font-size:7px;color:var(--c);flex:0 0 auto}
  .dB-bar b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .dB-chip{position:absolute;z-index:5;background:#fff;border:1px solid var(--rule);border-radius:7px;padding:3px 7px;
    font-size:9.5px;font-weight:600;color:var(--ink);white-space:nowrap;box-shadow:var(--shadow-md);opacity:0;pointer-events:none}
  .dB-chip s{text-decoration:none;color:var(--ink-faint);font-weight:500}
  .dC{background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden}
  .dC-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--rule-soft)}
  .dC-row:last-child{border-bottom:0}
  .dC-row .lb{font-size:11px;font-weight:500;color:var(--ink-soft)}
  .dC-row .sw{margin-left:auto;width:30px;height:17px;border-radius:99px;background:var(--rule);position:relative;flex:0 0 auto}
  .dC-row .sw b{position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:99px;background:#fff;
    box-shadow:var(--shadow-sm);display:block}
  .dC-row.on .sw{background:var(--forest)}
  .dC-row.on .sw b{left:15px}
  .dC-out{position:relative;background:var(--band);border-top:1px solid var(--rule-soft);height:66px}
  .dC-state{position:absolute;inset:0;padding:11px 12px}
  .dC-line{display:flex;gap:7px;align-items:flex-start;font-size:10.5px;color:var(--ink-soft);line-height:1.45;margin-bottom:6px}
  .dC-line:last-child{margin-bottom:0}
  .dC-line i{width:5px;height:5px;border-radius:99px;margin-top:6px;flex:0 0 auto}
  .dC-empty{font-size:10.5px;color:var(--ink-caption);line-height:1.45}
@media(min-width:820px){
    .prins{grid-template-columns:repeat(3,1fr)}
  }

  
  /* ── The hero mark. The diamond as the join between the tasks a person
     writes and the milestone a project commits to. ─────────────────────── */
.join{position:relative}
.join-art{width:100%;height:auto;display:block;margin-top:2px;font-family:var(--sans)}
.join figcaption{margin-top:11px;font-size:13.5px;line-height:1.5;color:var(--ink-caption)}
.core        {transform-box:view-box;transform-origin:145px 156px;transform:rotate(45deg)}
.body,.frame {transform-box:view-box;transform-origin:145px 156px}
.jn-orbit    {transform-box:view-box;transform-origin:145px 156px}
.jn-carry    {transform-box:fill-box;transform-origin:50% 50%}
.dl,.nm,.pillt,.token{transform-box:view-box}
.today       {transform-box:view-box;transform-origin:108px 288px}
.b1          {transform-box:view-box;transform-origin:66px 254px}
.b2          {transform-box:view-box;transform-origin:66px 282px}
.pillg       {transform-box:view-box;transform-origin:160px 254.5px;transform:rotate(45deg)}
.join.hold [class]{animation-play-state:paused}
.join.run .box     {animation:k-in .55s cubic-bezier(.22,1,.36,1)}
.join.run .rule    {--d:.08s;animation:k-in .55s cubic-bezier(.22,1,.36,1)}
.join.run .dl      {animation:k-rise .45s cubic-bezier(.22,1,.36,1)}
.join.run .st      {animation:k-stayer 5.5s linear}
.join.run .jn      {animation:k-jn 5.5s linear}
.join.run .cd-in   {animation:k-inner 5.5s linear}
.join.run .jn-carry{animation:k-carry 5.5s linear}
.join.run .jn-orbit{animation:k-orbit-card 5.5s linear}
.join.run .core    {animation:k-orbit-core 3.48s linear}
.join.run .gh      {animation:k-ghost 5.5s linear}
.join.run .cn      {stroke-dasharray:var(--L);animation:k-draw .58s cubic-bezier(.62,0,.34,1)}
.join.run .down    {stroke-dasharray:var(--L);animation:k-draw .4s cubic-bezier(.62,0,.34,1)}
.join.run .body    {--d:3.20s;animation:k-body .46s cubic-bezier(.22,1,.36,1)}
.join.run .frame   {--d:3.26s;animation:k-frame .50s cubic-bezier(.22,1,.36,1)}
.join.run .seam    {--d:3.74s;animation:k-seam .34s ease-out}
.join.run .tick    {animation:k-in .34s ease-out}
.join.run .today   {--d:3.90s;animation:k-today .5s cubic-bezier(.22,1,.36,1)}
.join.run .nm      {animation:k-nm .42s cubic-bezier(.22,1,.36,1)}
.join.run .bar     {animation:k-bar .56s cubic-bezier(.22,1,.36,1)}
.join.run .token   {--d:4.50s;animation:k-token .85s linear}
.join.run .pill    {--d:5.00s;animation:k-pill .46s cubic-bezier(.22,1,.36,1)}
.join.run .pillg   {--d:5.08s;animation:k-glyph .34s cubic-bezier(.34,1.5,.5,1)}
.join.run .pillt   {--d:5.14s;animation:k-nm .4s cubic-bezier(.22,1,.36,1)}
.join.run [class]{animation-fill-mode:both;animation-delay:var(--d,0s)}
.join.run .jn-orbit,.join.run .core{animation-delay:0s}
  .join [class]{animation:none !important}
@keyframes k-in    {from{opacity:0} to{opacity:1}}
@keyframes k-seam  {from{opacity:0} to{opacity:.15}}
@keyframes k-rise  {from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:none}}
@keyframes k-nm    {from{opacity:0;transform:translateX(-5px)} to{opacity:1;transform:none}}
@keyframes k-draw  {from{stroke-dashoffset:var(--L)} to{stroke-dashoffset:0}}
@keyframes k-body  {from{opacity:0;transform:scale(.72)} to{opacity:1;transform:none}}
@keyframes k-frame {from{opacity:0;transform:scale(1.09)} to{opacity:1;transform:none}}
@keyframes k-today {from{opacity:0;transform:scaleY(.3)} to{opacity:1;transform:none}}
@keyframes k-bar   {from{transform:scaleX(0)} to{transform:none}}
@keyframes k-pill  {from{opacity:0;transform:scaleX(.86)} to{opacity:1;transform:none}}
@keyframes k-glyph {from{transform:rotate(45deg) scale(0)} to{transform:rotate(45deg) scale(1)}}
@keyframes k-stayer{
  0%    {opacity:0;transform:translateY(-7px) scale(.94);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  8.7%  {opacity:.62;transform:none}
  16.4% {opacity:.62;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  25.5% {opacity:.24}
  85.5% {opacity:.24;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  96.4% {opacity:.62}
  100%  {opacity:.62}
}
@keyframes k-jn{
  0%    {opacity:0;transform:translateY(-7px) scale(.94);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  8.7%  {opacity:1;transform:none}
  52.7% {opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  57.8% {opacity:0}
  89.1% {opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  99.1% {opacity:1}
  100%  {opacity:1}
}
@keyframes k-inner{
  0%    {opacity:1}
  25.5% {opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  30.5% {opacity:0}
  89.1% {opacity:0}
  89.3% {opacity:1}
  100%  {opacity:1}
}
@keyframes k-carry{
  0%    {transform:none}
  25.5% {transform:none;animation-timing-function:cubic-bezier(.62,0,.34,1)}
  39.6% {transform:translate(var(--dx),var(--dy)) scale(.7,1.0769)}
  89.1% {transform:translate(var(--dx),var(--dy)) scale(.7,1.0769)}
  89.3% {transform:none}
  100%  {transform:none}
}
@keyframes k-orbit-card{
  0%    {transform:rotate(0)}
  50.5% {transform:rotate(0);animation-timing-function:cubic-bezier(.62,0,.34,1)}
  63.3% {transform:rotate(45deg)}
  89.1% {transform:rotate(45deg)}
  89.3% {transform:rotate(0)}
  100%  {transform:rotate(0)}
}
@keyframes k-orbit-core{
  0%    {transform:rotate(0)}
  79.9% {transform:rotate(0);animation-timing-function:cubic-bezier(.62,0,.34,1)}
  100%  {transform:rotate(45deg)}
}
@keyframes k-ghost{
  0%    {opacity:0}
  27.3% {opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  35.5% {opacity:1}
  88.9% {opacity:1}
  98%   {opacity:0}
  100%  {opacity:0}
}
@keyframes k-token{
  0%    {opacity:0;transform:none}
  18%   {opacity:1;transform:none;animation-timing-function:cubic-bezier(.62,0,.34,1)}
  78%   {opacity:1;transform:translate(15px,50px)}
  100%  {opacity:0;transform:translate(15px,50px)}
}
@media(max-width:999px){
    .join{max-width:352px;margin-top:4px}
  }
@media(prefers-reduced-motion:reduce){
    .join [class]{animation:none !important}
  }

  /* ── Responsive ────────────────────────────────────────────────────────── */
@media(max-width:999px){
  .burger{display:inline-flex}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:fixed;top:60px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--rule);padding:6px var(--gut) 18px;z-index:99}
  .nav-links.open a{padding:15px 0;border-bottom:1px solid var(--rule-soft);font-size:16px;color:var(--ink)}
  .hero{padding-top:118px}
  section{padding:80px 0}
  .dev-caps{grid-template-columns:1fr;gap:20px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  :root{--gut:22px}
  .stage,.stage[data-size="tablet"],.stage[data-size="phone"]{height:660px}
  .dev,.stage[data-size="tablet"] .dev,.stage[data-size="phone"] .dev{width:min(340px,100%);height:640px;border-radius:38px;padding:9px}
  .scr,.stage[data-size="phone"] .scr{border-radius:30px}
  .glass,.stage[data-size="phone"] .glass{inset:9px;border-radius:30px}
  .board-week{display:none !important}
  .board-phone{display:flex !important}
  .ap-sub,.ap-tabs{display:none}
  .ctrl-size{display:none}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  body{font-size:16px}
  .nav-signin{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,html.js .reveal{opacity:1;transform:none;transition:none}
  .mover,.slot,.mtag,.gone,.p1-card,.p1-slot,.p1-lbl,.p2-pill,.p2-bar,.p2-chip,
  .p3-track,.p3-knob,.p3-brief{animation:none !important}
  .p1-slot,.p2-chip,.p3-brief{opacity:1}
  .p3-knob{transform:translateX(28px)}
  .p3-track{background:var(--ink)}
  /* The still has to be self consistent: with no motion, plate 02 shows the
     milestone already ON its new date, not the old one beside a moved chip. */
  .p2-pill{transform:translate(162px,0)}
  .p2-bar{width:196px}
  .glass::before{display:none}
  .scr,.scr *{transition:none}
  .thm-pill{transition:none}
  .dev,.stage{transition:none}
}

/* ── Pricing page (/pricing/) ──────────────────────────────────────────────
   Serves www/pricing/index.html only. Every selector is namespaced pr-, fq- or
   nx-, so nothing here can reach another page, and nothing the base file owns
   (.wrap, .band, .kicker, .reveal, .btn, .chip, .pill, .sec-head, .cta-dia) is
   redefined. The plan table is code, not CMS copy: a price must never be
   editable from an admin text field. */
.pr-hero{padding:150px 0 100px}
.pr-center{text-align:center;margin-left:auto;margin-right:auto}
.pr-center p{margin-left:auto;margin-right:auto}
.pr-hero h1{font-size:clamp(34px,4.6vw,56px);max-width:19ch;margin:16px auto 0;letter-spacing:-.034em;line-height:1.06}
.pr-hero .cta-dia{margin-bottom:22px}

/* Billing period. Both prices are in the markup either way round, so the
   annual figure is crawlable and the toggle only changes which one is the
   headline. With the script blocked, the monthly card still names the annual
   price in its own sub line. */
.pr-billrow{display:flex;justify-content:center;margin-top:36px}
.pr-bill{display:inline-flex;gap:2px;padding:4px;background:var(--band);border:1px solid var(--rule);border-radius:99px}
.pr-bill button{display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;font-family:var(--sans);
  font-weight:600;font-size:14px;color:var(--ink-muted);padding:9px 19px;border-radius:99px;cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s}
.pr-bill button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.pr-save{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);
  background:rgba(30,122,56,.1);border-radius:99px;padding:3px 8px}

.pr-cards{display:grid;grid-template-columns:1fr;gap:20px;margin-top:42px;align-items:start}
.pr-card{position:relative;background:#fff;border:1px solid var(--rule);border-radius:20px;padding:26px 24px 28px;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.pr-card.hot{border-color:var(--ink);box-shadow:var(--shadow-lg)}
.pr-card [hidden]{display:none}
.pr-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:28px}
.pr-name{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0}
.pr-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);
  border-radius:99px;padding:4px 10px;line-height:1.3}
.pr-tag{font-size:14px;color:var(--ink-caption);line-height:1.5;margin-top:10px}
.pr-price{display:flex;align-items:baseline;gap:10px;margin-top:20px;flex-wrap:wrap}
.pr-amt{font-family:var(--display);font-size:46px;font-weight:700;letter-spacing:-.038em;line-height:1;color:var(--ink)}
.pr-per{font-size:13.5px;font-weight:500;color:var(--ink-caption)}
.pr-sub{font-size:13px;color:var(--ink-caption);margin-top:9px;line-height:1.45}
.pr-cta{width:100%;margin-top:22px}
.pr-listcap{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-caption);
  margin-top:26px;padding-top:20px;border-top:1px solid var(--rule-soft)}
.pr-list{list-style:none;margin-top:8px}
.pr-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:var(--ink-soft);padding:7px 0}
.pr-list li.no{color:var(--ink-caption)}
.pr-list .ck{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:var(--forest)}
.pr-list .ck.off{color:var(--ink-faint)}
.pr-seat{text-align:center;font-size:13.5px;color:var(--ink-caption);line-height:1.6;max-width:64ch;margin:32px auto 0}

/* What each plan is for. A description list, so the three names are not a
   second set of headings competing with the cards above them. */
.pr-forwrap{display:grid;grid-template-columns:1fr;gap:20px;margin-top:42px}
.pr-for{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:24px 22px 26px}
.pr-for dt{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.022em;display:flex;
  align-items:center;gap:10px;color:var(--ink)}
.pr-for dt i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);flex:0 0 auto}
.pr-for dd{font-size:14.5px;color:var(--ink-muted);line-height:1.6;margin:11px 0 0}
.pr-all{display:flex;gap:11px;align-items:flex-start;margin-top:30px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:15px;color:var(--ink-soft);line-height:1.6}
.pr-all span{max-width:78ch}
.pr-all .dia{color:var(--indigo);font-style:normal;font-size:10px;line-height:1;margin-top:7px;flex:0 0 auto}

/* FAQ. Two columns share a grid row, so the hairline above each pair lands at
   the same depth however long the answers run. */
.fq-grid{display:grid;grid-template-columns:1fr;margin-top:38px}
.fq{padding:24px 0 4px;border-top:1px solid var(--rule-soft)}
.fq h3{font-size:18px;letter-spacing:-.022em;line-height:1.28}
.fq p{font-size:15px;color:var(--ink-muted);line-height:1.62;margin-top:11px;max-width:58ch}

.pr-close{border-top:1px solid var(--rule-soft)}
.nx{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
.nx-card{display:block;background:#fff;border:1px solid var(--rule);border-radius:18px;padding:24px 24px 22px;
  box-shadow:var(--shadow-sm);transition:box-shadow .25s,border-color .25s,transform .25s}
.nx-card:hover{border-color:var(--ink-caption);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.nx-card h3{font-size:19px;letter-spacing:-.024em;display:flex;align-items:center;gap:9px}
.nx-card h3 svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;color:var(--indigo);flex:0 0 auto}
.nx-card p{font-size:14.5px;color:var(--ink-muted);line-height:1.55;margin-top:10px}
.pr-close .hero-actions{justify-content:center;margin-top:34px}

@media(min-width:760px){
  .nx{grid-template-columns:1fr 1fr;gap:20px}
}
@media(min-width:900px){
  .pr-cards{grid-template-columns:repeat(3,1fr);gap:22px}
  .pr-tag{min-height:63px}
  .pr-sub{min-height:19px}
  .pr-forwrap{grid-template-columns:repeat(3,1fr);gap:22px}
  .fq-grid{grid-template-columns:1fr 1fr;column-gap:56px}
}
@media(max-width:999px){
  .pr-hero{padding-top:118px;padding-bottom:76px}
}
@media(max-width:560px){
  /* "project management," is the longest unbreakable pair in the headline and
     it sets the floor. At 34px it measures 336px, which is 10px of slack in a
     390 gutter and an overflow at 360. Sized off the viewport instead. */
  .pr-hero h1{font-size:clamp(26px,8vw,34px)}
}
@media(max-width:420px){
  .pr-bill button{padding:9px 14px;font-size:13.5px;gap:7px}
  .pr-save{font-size:10px;padding:3px 7px}
}
@media(prefers-reduced-motion:reduce){
  .pr-bill button,.nx-card{transition:none}
  .nx-card:hover{transform:none}
}

/* ── Page: /how-it-works/ ──────────────────────────────────────────────────
   Everything here is prefixed .hw- so it can only ever reach this page. The
   scene mocks are built from the product classes the stylesheet already owns
   (.scr, .wk, .tk, .ribbon, .rb-*, .tg-*, .chip), so a change to a task card
   or a milestone pill lands on the homepage and on this page together. */
.hw-hero{padding-bottom:0}
.hw-hero h1{font-size:clamp(30px,4.1vw,52px);letter-spacing:-.03em;line-height:1.08;max-width:23ch;margin:18px 0 0}
.hw-hero .hw-deck{font-size:clamp(17px,2vw,20.5px);color:var(--ink-soft);line-height:1.55;max-width:56ch;margin-top:26px}
.hw-hero .hw-lead{font-size:16px;color:var(--ink-caption);line-height:1.65;max-width:56ch;margin-top:18px;
  padding-top:18px;border-top:1px solid var(--rule)}

/* A scene: copy beside a mock, the side alternating down the page. */
.hw-sc{padding:84px 0}
.hw-scene{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
/* 1180px, not 1000px, and the number comes from the week board rather than
   from taste: five day columns need about 650px before a real task name starts
   truncating, and 650px is what the 7fr track is worth at that viewport. Under
   it the mock takes the full width instead, which is the honest trade. */
@media(min-width:1180px){
  .hw-scene{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}
  /* The copy is always first in the source, so a flipped scene moves it to the
     second column AND swaps the track widths. Ordering alone would have left
     the mock in the narrow track. */
  .hw-scene.hw-flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
  .hw-scene.hw-flip .hw-copy{order:2}
  .hw-scene.hw-flip .hw-art{order:1}
}
.hw-copy h2{font-size:clamp(25px,3.1vw,37px);letter-spacing:-.03em;line-height:1.12;margin-top:14px}
/* The owner's line for the scene, kept as a deck under the heading. Italic
   display, the same voice the homepage h1 uses for its quieter half. */
.hw-copy h3{font-family:var(--display);font-style:italic;font-weight:400;font-size:19px;letter-spacing:-.015em;
  color:var(--ink-soft);line-height:1.35;margin-top:14px}
.hw-copy p{font-size:16.5px;color:var(--ink-muted);line-height:1.6;margin-top:14px;max-width:48ch}
.hw-egs{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);display:grid;gap:12px}
.hw-eg{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-caption);line-height:1.5;max-width:50ch}
.hw-eg i{width:8px;height:8px;border-radius:99px;margin-top:7px;flex:0 0 auto}
.hw-copy .morelink{margin-top:22px}

/* The mock frame. Same box as .ribbon, which the scene 2 mocks bring with them. */
.hw-card{position:relative;border:1px solid var(--rule);border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow-md)}
.hw-screen{position:relative;height:322px}
.hw-screen .scr{border-radius:0}
/* The board runs at about half the width the homepage device gives it, so the
   outer padding steps down. Column padding stays at 10px: the drag loop moves
   one column by translate(100% + 21px), which is that padding plus the rule. */
.hw-screen .wk{padding:12px}
/* Card height and margin are untouched for the same reason: the loop lifts the
   card by exactly one slot, 34px plus its 8px margin. Only the inside of the
   card gives ground, so a real task name still fits without an ellipsis. */
.hw-screen .tk{gap:5px;padding:0 7px}
.hw-screen .tk .lb{font-size:10.5px}
.hw-screen .tk .mt{font-size:9px;padding-left:5px}
.hw-screen .dh{font-size:10px;padding:10px 0 9px}

/* Scene 3: a day-grained gantt strip above the milestone list. The scale is
   inset by the width of the name column so a date sits over its own track. */
.hw-strip{border-bottom:1px solid var(--rule-soft)}
.hw-strip .rb-scale{padding-left:114px}
.hw-strip .rb-row{height:42px}
.hw-ms{list-style:none}
.hw-msrow{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 18px;border-bottom:1px solid var(--rule-soft)}
.hw-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:99px;background:#fff;
  font-size:12px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-sm);
  border:1px solid color-mix(in srgb,var(--c) 48%,transparent);color:color-mix(in srgb,var(--c) 68%,var(--ink))}
.hw-pill i{font-style:normal;font-size:8px;color:var(--c)}
.hw-meta{font-size:12px;color:var(--ink-caption);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Tonal states. Text sits at the dark end of each hue, never on a pale slab. */
.hw-state{font-size:11px;font-weight:600;letter-spacing:.03em;white-space:nowrap;border-radius:99px;padding:4px 10px;
  background:var(--band-2);border:1px solid var(--rule);color:var(--ink-caption)}
.hw-state.warn{background:rgba(183,134,11,.1);border-color:rgba(183,134,11,.38);color:#8A6408}
.hw-state.ok{background:rgba(30,122,56,.1);border-color:rgba(30,122,56,.34);color:#166129}
.hw-today{padding:16px 18px 18px;background:var(--band)}
.hw-today .anno{display:block;margin-bottom:11px}
.hw-rollcards{display:flex;gap:10px;flex-wrap:wrap}
.hw-rollcards .tk{flex:1 1 180px;min-width:0;margin-bottom:0}
/* The rollover, at the pace it happens: once, quietly, and then it is just a
   task on today. The settled state is the one written on the element, so with
   motion off the still is the true state rather than a half-moved card. */
.hw-rolled{animation:hwRoll 9s cubic-bezier(.22,1,.36,1) infinite}
@keyframes hwRoll{
  0%,5%   {transform:translateX(-12px);opacity:.32}
  14%,92% {transform:none;opacity:1}
  100%    {transform:translateX(-12px);opacity:.32}
}

/* Scene 4: the leave request, the approval, and the holidays behind both. */
/* Three panels divided by the hairline the gap paints through. */
.hw-leave{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule-soft)}
@media(min-width:560px){.hw-leave{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hw-lv{background:#fff;padding:18px;display:flex;flex-direction:column;gap:7px}
.hw-lvtype{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--ink);margin-top:2px}
.hw-lvtype i{width:9px;height:9px;border-radius:99px;flex:0 0 auto}
.hw-av{width:20px;height:20px;border-radius:99px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--violet),var(--rose))}
.hw-lvdates{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.hw-lvdates small{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-caption);letter-spacing:0}
.hw-bar{display:block;height:6px;border-radius:99px;background:var(--band-2);overflow:hidden}
.hw-bar i{display:block;height:100%;border-radius:99px;background:var(--teal);opacity:.55}
.hw-lvmeta{font-size:12.5px;color:var(--ink-caption);line-height:1.45}
.hw-acts{display:flex;gap:8px;margin-top:6px}
.hw-act{font-size:12.5px;font-weight:600;border-radius:9px;padding:7px 14px;border:1px solid var(--rule);color:var(--ink-soft)}
.hw-act.ok{background:var(--ink);border-color:var(--ink);color:#fff}
.hw-hols{padding:18px;border-top:1px solid var(--rule-soft)}
.hw-hols .anno{display:block;margin-bottom:12px}
.hw-holrow{display:flex;flex-wrap:wrap;gap:8px}
.hw-holrow .chip{font-size:13px;padding:6px 12px 6px 10px}
.hw-cc{font-weight:700;font-size:11px;letter-spacing:.07em;color:var(--ink-caption)}

/* Stacked: the mock takes the full width, so the copy is held to a column
   rather than being stretched to match it. */
@media(max-width:1179px){
  .hw-copy{max-width:740px}
}
@media(max-width:999px){
  .hw-sc{padding:64px 0}
  .hw-copy p,.hw-eg{max-width:none}
}
@media(max-width:820px){
  /* At this width the stylesheet has already swapped the board for the phone
     one, the same swap the homepage device makes. It needs the height. */
  .hw-screen{height:520px}
  .hw-strip{display:none}
  /* Two lines: the commitment and its state on the first, the detail under
     both. Placement is explicit because auto-placement pushed the state chip
     onto a third row and stretched it the full width of the card. */
  .hw-msrow{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
  .hw-pill{grid-area:1 / 1;justify-self:start}
  .hw-state{grid-area:1 / 2;justify-self:end}
  .hw-meta{grid-area:2 / 1 / 3 / -1;white-space:normal}
}
@media(max-width:620px){
  /* The name column gives back what the milestone labels need on a phone. */
  .hw-art .rb-row{grid-template-columns:72px 1fr}
  .hw-art .rb-pill{font-size:10px;height:22px;padding:0 8px;gap:4px}
  .hw-art .rb-scale{padding-left:12px;padding-right:12px}
  .hw-art .rb-body,.hw-art .rb-head,.hw-art .rb-foot,.hw-art .tg-body{padding-left:14px;padding-right:14px}
  .hw-art .tg-row{grid-template-columns:62px repeat(5,1fr);gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .hw-rolled{animation:none !important}
}

/* ══ /features/ ═══════════════════════════════════════════════════════════
   Serves www/features/index.html only. Everything below is new. The page
   reuses .wrap .band .kicker .sec-head .eyebrow .hero .hero-sub .hero-note
   .hero-actions .reveal .btn .morelink .anno .ribbon .rb-head .rb-foot
   .ctrls .ctrl .sizer .ctrl-hint .dev-caps .cta-final and the whole product
   recreation (.stage .dev .scr .wk .mob) unchanged, so nothing here may
   redefine one of them. */

/* A jump link has to clear the fixed nav when it lands. */
.anchored{scroll-margin-top:92px}

/* The page hero. Shorter than the homepage's: the headline is a sentence
   rather than a three word statement, and there is no device beneath it. */
.feat-hero{padding:150px 0 86px}
.feat-hero h1{max-width:21ch;font-size:clamp(34px,4.6vw,58px);margin-top:24px}
.feat-hero .hero-sub{max-width:52ch}
.eyebrow .sep{width:4px;height:4px;border-radius:99px;background:var(--ink-faint);flex:0 0 auto}
.feat-top{display:grid;grid-template-columns:1fr;gap:44px;align-items:end}
@media(min-width:1000px){.feat-top{grid-template-columns:minmax(0,1fr) 322px;gap:64px}}

/* The three switches, as they actually appear in workspace settings. This is
   the headline restated as a fact: the tools on this page are off until an
   admin turns them on, and two of them can be on while the third is not. */
.hero-sw{border:1px solid var(--rule);border-radius:18px;background:#fff;overflow:hidden;box-shadow:var(--shadow-md)}
.hero-sw .hd{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--rule-soft);
  font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.hero-sw .hd span{margin-left:auto;font-size:11px;color:var(--ink-caption);font-weight:500}
.hero-sw .rw{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--rule-soft)}
.hero-sw .rw .lb{font-size:13.5px;font-weight:500;color:var(--ink-soft);min-width:0}
.hero-sw .rw .sw{margin-left:auto;width:36px;height:20px;border-radius:99px;background:var(--rule);position:relative;
  flex:0 0 auto}
.hero-sw .rw .sw b{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:99px;background:#fff;
  box-shadow:var(--shadow-sm);display:block;transition:left .3s cubic-bezier(.34,1.5,.4,1)}
.hero-sw .rw.on .sw{background:var(--forest)}
.hero-sw .rw.on .sw b{left:18px}
.hero-sw .ft{padding:13px 16px;background:var(--band);font-size:12px;color:var(--ink-caption);line-height:1.5}

.jumps{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.jumps a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;color:var(--ink-soft);
  background:#fff;border:1px solid var(--rule);border-radius:99px;padding:9px 17px 9px 13px;
  transition:border-color .2s,background .2s}
.jumps a:hover{border-color:var(--ink-caption);background:var(--band)}
.jumps a i{width:8px;height:8px;border-radius:99px;flex:0 0 auto}

/* ── The three optional tools ─────────────────────────────────────────── */
.tools{display:grid;gap:72px}
.tool{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
@media(min-width:1000px){
  .tools{gap:96px}
  .tool{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px}
  /* Flipping the row has to swap the TRACKS as well as the order, or the
     mock lands in the narrow column and the prose gets the wide one. */
  .tool.flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
  .tool.flip .tool-copy{order:2}
  .tool.flip .tool-demo{order:1}
}
/* --ink-caption, not --ink-faint: the tokens block says faint measures 3.3:1
   and that every text use moved off it. Measured here at 13px it is 3.32:1. */
.tool-n{font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink-caption);letter-spacing:.1em}
.tool-copy h2{font-size:clamp(26px,3vw,34px);margin-top:12px;letter-spacing:-.028em;line-height:1.12}
.tool-copy>p{font-size:16.5px;color:var(--ink-soft);line-height:1.6;margin-top:16px;max-width:46ch}
.tool-facts{list-style:none;margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);display:grid;gap:13px}
.tool-facts li{position:relative;padding-left:20px;font-size:14px;color:var(--ink-caption);line-height:1.55;max-width:46ch}
.tool-facts li::before{content:"\25C6";position:absolute;left:0;top:0;font-size:8px;color:var(--indigo);line-height:2.6}
.tool-demo{min-width:0}
/* Stacked, the copy has the whole column to itself, and a rule running the full
   836px over a 46ch paragraph reads as a mistake. Hold it to one measure. */
@media(max-width:999px){.tool-copy{max-width:60ch}}

/* Tool 01: a real brief. Three measured tiles, then flags split by urgency,
   which is the order the product itself puts them in. The project colour is a
   left stripe, exactly as it is in the app. */
.brief-tabs{display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid var(--rule-soft);background:var(--band);
  overflow-x:auto}
.brief-tabs span{font-size:11px;font-weight:600;color:var(--ink-caption);padding:5px 10px;border-radius:8px;white-space:nowrap}
.brief-tabs span.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.brief-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule-soft)}
.brief-tiles div{padding:14px 16px;border-right:1px solid var(--rule-soft);min-width:0}
.brief-tiles div:last-child{border-right:0}
.brief-tiles b{display:block;font-family:var(--display);font-size:clamp(20px,4.4vw,25px);font-weight:700;
  letter-spacing:-.03em;line-height:1}
.brief-tiles em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-caption);margin-top:7px;line-height:1.3}
.brief-body{padding:16px 18px 18px;background:var(--band)}
.brief-lead{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.brief-sec{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-caption);margin:18px 0 10px}
.brief-flag{position:relative;padding:11px 13px 12px 16px;border:1px solid var(--rule);border-radius:11px;
  background:#fff;box-shadow:var(--shadow-sm);margin-bottom:8px;overflow:hidden}
.brief-flag:last-child{margin-bottom:0}
.brief-flag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.brief-flag .cat{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 62%,var(--ink));margin-bottom:4px}
.brief-flag p{font-size:13.5px;color:var(--ink-soft);line-height:1.5}

/* Tool 02: a real table, not a picture. An estimate is a document a client
   reads, so a screen reader gets the same figures a printer would. */
.quote-scroll{overflow-x:auto}
.quote{width:100%;border-collapse:collapse;font-size:13px}
.quote th,.quote td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--rule-soft)}
.quote thead th{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-caption);
  background:var(--band);border-bottom:1px solid var(--rule)}
.quote th:first-child,.quote td:first-child{text-align:left;padding-left:18px}
.quote th:last-child,.quote td:last-child{padding-right:18px}
.quote tbody th{font-weight:500;color:var(--ink-soft)}
.quote tbody td{color:var(--ink);font-variant-numeric:tabular-nums}
.quote tbody td:last-child{color:var(--ink-caption)}
.quote tbody tr:last-child th,.quote tbody tr:last-child td{border-bottom:0}
.quote-tot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule-soft)}
.quote-tot div{padding:14px 18px;border-right:1px solid var(--rule-soft);min-width:0}
.quote-tot div:last-child{border-right:0}
.quote-tot b{display:block;font-family:var(--display);font-size:clamp(21px,4.6vw,26px);font-weight:700;
  letter-spacing:-.03em;line-height:1}
.quote-tot em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-caption);margin-top:7px;line-height:1.35}
.quote-tot .hot{background:linear-gradient(180deg,rgba(255,206,0,.10),rgba(255,206,0,.18))}
.quote-acc{display:flex;align-items:center;gap:14px;padding:14px 18px}
.quote-acc .bar{flex:0 0 84px;height:7px;border-radius:99px;background:var(--band-2);overflow:hidden}
.quote-acc .bar i{display:block;height:100%;border-radius:99px;background:var(--forest);opacity:.72}
.quote-acc p{font-size:12.5px;color:var(--ink-caption);line-height:1.5}

/* Tool 03: the first row is the whole argument. Nobody opened a timesheet,
   they ticked a task, and everything under it is what that tick produced. */
.trk-log{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--band);
  border-bottom:1px solid var(--rule-soft)}
.trk-card{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;height:46px;padding:0 13px;
  border-radius:12px;background:color-mix(in srgb,var(--teal) 14%,#F5F4F0);border:1px solid rgba(26,26,26,.07);
  box-shadow:0 1px 2px rgba(23,26,45,.06);color:#1A1A1A}
.trk-card .ck{width:17px;height:17px;border-radius:6px;background:#1A1A1A;flex:0 0 auto;position:relative}
.trk-card .ck::after{content:"";position:absolute;left:5.6px;top:2.2px;width:4px;height:8.2px;
  border:2px solid #F5F4F0;border-top:0;border-left:0;transform:rotate(42deg)}
.trk-card .pd{width:7px;height:7px;border-radius:99px;background:var(--teal);flex:0 0 auto}
/* The app paints a done label at #8A8880, which on this tinted card measures
   about 2.6:1. That is fine inside the device recreation, which is aria-hidden
   decoration, and not fine here: this row is real text in the reading order.
   The line through it is what says "done"; the colour only has to be quiet. */
.trk-card .nm{font-size:13.5px;font-weight:500;text-decoration:line-through;color:var(--ink-caption);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-card .dy{margin-left:auto;padding-left:8px;font-size:11px;color:var(--ink-caption);flex:0 0 auto}
.trk-then{flex:0 0 auto;color:var(--ink-faint)}
.trk-then svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trk-chip{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;background:#fff;border:1px solid var(--rule);
  border-radius:11px;padding:9px 13px;box-shadow:var(--shadow-md)}
.trk-chip b{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.trk-chip span{font-size:12px;font-weight:600;color:var(--indigo);white-space:nowrap}
.trk-burn{padding:17px 18px 2px}
.trk-burn-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-soft)}
.trk-burn-h b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.trk-bar{display:block;height:10px;border-radius:99px;background:var(--band-2);overflow:hidden;margin-top:10px}
.trk-bar i{display:block;height:100%;border-radius:99px;background:var(--amber)}
.trk-rows{padding:15px 18px 18px;display:grid;gap:10px}
.trk-rows>div{display:grid;grid-template-columns:62px minmax(0,1fr) 38px;align-items:center;gap:10px}
.trk-rows .p{font-size:12.5px;color:var(--ink-soft)}
.trk-rows .b{height:8px;border-radius:99px;background:var(--band-2);overflow:hidden}
.trk-rows .b i{display:block;height:100%;border-radius:99px;opacity:.75}
.trk-rows .v{font-size:12px;color:var(--ink-caption);text-align:right;font-variant-numeric:tabular-nums}

/* ── The product stage, second home. overflow matches .hero's, because .pool
   is 102vw wide and hangs 104px below the device. ────────────────────────── */
.look{overflow:hidden}
.look .stage{margin-top:46px}
.look .ctrl-hint span[id]{color:var(--ink);font-weight:600}

/* ── The calmer alternative ───────────────────────────────────────────── */
.alt{display:grid;grid-template-columns:1fr;gap:38px}
@media(min-width:1000px){.alt{grid-template-columns:1.02fr .98fr;gap:72px;align-items:start}}
.alt-copy h2{font-size:clamp(28px,3.6vw,44px);margin-top:16px;letter-spacing:-.03em;max-width:20ch}
.alt-copy>p{font-size:17px;color:var(--ink-soft);line-height:1.6;margin-top:20px;max-width:52ch}
.vs{display:grid;gap:14px}
.vs-col{border:1px solid var(--rule);border-radius:18px;background:var(--band);padding:20px 22px 22px}
.vs-col.us{background:#fff;border-color:var(--ink);box-shadow:var(--shadow-md)}
.vs-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:var(--band-2);margin-bottom:13px;color:var(--ink-caption)}
.vs-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.vs-col.us .vs-ic{background:var(--yellow);color:var(--indigo);font-size:12px}
.vs-lab{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.vs-col ul{list-style:none;margin-top:12px;display:grid;gap:9px}
.vs-col li{position:relative;padding-left:19px;font-size:14px;line-height:1.5;color:var(--ink-caption)}
.vs-col li::before{content:"";position:absolute;left:1px;top:9px;width:8px;height:2px;border-radius:2px;
  background:var(--ink-faint);opacity:.55}
.vs-col.us li{color:var(--ink-soft)}
.vs-col.us li::before{background:var(--indigo);opacity:.55}

.cmp{margin-top:56px;padding-top:30px;border-top:1px solid var(--rule)}
.cmp-lab{display:block;font-size:15px;font-weight:600;color:var(--ink-soft);margin-bottom:18px}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:12px}
.cmp-card{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;border:1px solid var(--rule);
  border-radius:14px;background:var(--band);transition:border-color .2s,background .2s,transform .15s ease,box-shadow .2s}
.cmp-card:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cmp-card .n{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.cmp-card .d{font-size:12.5px;color:var(--ink-caption);line-height:1.45}

/* Under 820px the shared stylesheet forces the device to its phone board and
   hides the size control, so the readout must not still claim "at Desktop". */
@media(max-width:820px){
  .look .ctrl-hint .sz-note{display:none}
}
@media(max-width:560px){
  .feat-hero{padding-bottom:56px}
  .trk-log{flex-direction:column;align-items:stretch}
  .trk-card{width:100%}
  .trk-then{align-self:center;transform:rotate(90deg)}
  .trk-chip{align-self:flex-start}
  /* Tightened rather than left to scroll: at 390 the estimate fits whole, and
     a table cut off at the card edge reads as a bug, not as a scroller. */
  .quote{font-size:12px}
  .quote th,.quote td{padding:8px 6px}
  .quote th:first-child,.quote td:first-child{padding-left:13px}
  .quote th:last-child,.quote td:last-child{padding-right:13px}
  .quote thead th{font-size:9px;letter-spacing:.06em}
  .quote-tot div,.quote-acc,.trk-burn,.trk-rows{padding-left:13px;padding-right:13px}
  .brief-tiles div,.brief-body,.trk-log{padding-left:14px;padding-right:14px}
}
@media(prefers-reduced-motion:reduce){
  .jumps a,.cmp-card{transition:none}
  .cmp-card:hover{transform:none}
}