/* Specificity's public site: the landing page (usespecificity.com) and its privacy and terms pages. The look is the
   app's own (artifact/parts/p0_head.html): Inter, ink on white, the logo's red dot, 10 px cards, and the app's dark
   palette when the device is in dark mode. The product scenes are drawn from the app's own components. */
:root{
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#FFFFFF; --side:#F7F7F8; --surface:#FFFFFF; --soft:#F7F7F8; --hover:rgba(24,24,27,.045); --hover-solid:#F4F4F5;
  --ink:#18181B; --muted:#5D5E66; --faint:#6E6F77; --line:#DCDCE0; --line2:#E7E7EA; --stroke:#D6D6DA; --stroke-strong:#9E9EA6;
  --accent-fill:#18181B; --accent-fill-hover:#3F3F46; --on-accent:#FFFFFF; --accent-soft:#EEEEF0;
  --red:#D23B30; --red-soft:#FDF1F0; --red-ink:#B4302A;
  --yel:#D08A12; --yel-soft:#FBF5E8; --yel-ink:#8E5609;
  --grn:#1E8A4C; --grn-soft:#EDF7F0; --grn-ink:#166A3A;
  --neu:#A1A1AA; --neu-soft:#F2F2F4; --up:#71717A; --up-soft:#F2F2F4; --down:#18181B; --down-soft:#F2F2F4;
  --av-bg:#E8E8EB; --av-ink:#3F3F46;
  --shadow:0 1px 2px rgba(24,24,27,.04),0 12px 32px -12px rgba(24,24,27,.14);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --brand:#D23B30; --brand-deep:#B4302A; --on-brand:#FFFFFF; --brand-ink:#18181B;
  --go:#D23B30; --go-hover:#B4302A; --on-go:#FFFFFF; /* Get started on a light background (Matt, 2026-10-07) */
  --logo-red:#FF0000; /* the logo's middle bar, pure red in light and dark (Matt, 2026-10-07) */
  --wrap:1200px; --gutter:clamp(16px,4vw,40px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141416; --side:#101012; --surface:#18181B; --soft:#1C1C20; --hover:rgba(255,255,255,.05); --hover-solid:#1F1F23;
    --ink:#EDEDEF; --muted:#A3A3AB; --faint:#8E8E97; --line:#29292E; --line2:#212125; --stroke:#36363C; --stroke-strong:#5C5C65;
    --accent-fill:#EDEDEF; --accent-fill-hover:#D4D4D8; --on-accent:#18181B; --accent-soft:#25252A;
    --red:#EB5A4E; --red-soft:#2A1614; --red-ink:#F37D72;
    --yel:#E0A43A; --yel-soft:#2A2113; --yel-ink:#E9B65A;
    --grn:#4CBF7A; --grn-soft:#13241A; --grn-ink:#7DD3A0;
    --neu:#6B6B74; --neu-soft:#232327; --up:#8E8E97; --up-soft:#232327; --down:#EDEDEF; --down-soft:#232327;
    --av-bg:#2A2A2F; --av-ink:#D4D4D8;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -16px rgba(0,0,0,.6);
    --go:var(--accent-fill); --go-hover:var(--accent-fill-hover); --on-go:var(--on-accent); /* dark pages keep the light button */
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--stroke) transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;caret-color:var(--red)}
::selection{background:var(--red-soft);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-color:var(--stroke-strong);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:600;color:var(--ink);text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:20;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:14px}
.skip:focus{top:12px}

/* ---------- buttons, the header and the footer ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border:1px solid var(--line);background:var(--surface);border-radius:8px;font:500 14px/1 var(--font);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform .12s var(--ease-out)}
.btn:hover{background:var(--hover-solid);border-color:var(--stroke)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--hover)}
.btn.lg{height:44px;padding:0 20px;font-size:15px;border-radius:9px}
.btn.ink{background:var(--brand-ink);border-color:var(--brand-ink);color:#FFFFFF}
.btn.go{background:var(--go);border-color:var(--go);color:var(--on-go)}
.btn.go:hover{background:var(--go-hover);border-color:var(--go-hover)}
.btn.ink:hover{background:#3F3F46;border-color:#3F3F46}

.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.top.scrolled{border-bottom-color:var(--line)}
.top.onred{background:var(--brand);color:var(--on-brand);border-bottom-color:transparent}
.top.onred .btn.ghost{color:var(--on-brand)}
.top.onred .btn.ghost:hover{background:rgba(0,0,0,.14)}
.top.onred .btn.go{background:#FFFFFF;border-color:#FFFFFF;color:var(--brand-ink)}
.top.onred .btn.go:hover{background:#F4F4F5;border-color:#F4F4F5}
.top.onred .mark .i{fill:var(--brand-ink)} .top.onred .mark .r{fill:#FFFFFF} /* on red: ink bars and dot, a white middle bar (Matt, 2026-10-07) */
.top.onred :focus-visible{outline-color:#FFFFFF}
.top .wrap{display:flex;align-items:center;gap:8px;height:64px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.01em;text-decoration:none;margin-right:auto;border-radius:6px}
.brand svg{width:22px;height:22px}
.mark .i{fill:var(--ink)} .mark .r{fill:var(--logo-red)} /* light: ink; dark: #EDEDEF; the middle bar pure red in both, as in the app (Matt, 2026-10-07) */

.foot{border-top:1px solid var(--line);margin-top:0}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:28px;padding-bottom:36px;font-size:14px;color:var(--muted)}
.foot .brand{font-size:15px;margin-right:auto;color:var(--ink)}
.foot .brand svg{width:18px;height:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--ink);text-decoration:underline}
.foot .copy{flex-basis:100%;font-size:13px;color:var(--faint)}
.foot .tm{flex-basis:100%;margin-top:-8px;font-size:12px;color:var(--faint)}

/* ---------- the landing page ---------- */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The hero: the brand's red first screen (Matt, 2026-10-07: "Red 3"), the product scene straddling its lower edge. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--fold);pointer-events:none}
.hero{--fold:clamp(150px,18vw,260px);position:relative;padding:clamp(40px,6vw,88px) 0 0;color:var(--on-brand);background:linear-gradient(var(--brand) 0 calc(100% - var(--fold)),var(--bg) 0);overflow-x:hidden;overflow-x:clip}
.hero ::selection{background:var(--brand-ink);color:#FFFFFF}
.hero h1{font-size:clamp(2.6rem,1.3rem + 4.4vw,4.75rem);line-height:1.02;letter-spacing:-.04em;color:var(--on-brand);max-width:15em}
.hero .rot{display:inline-block;color:var(--brand-ink);min-height:1.02em}
.hero .rot.in{animation:rot-in .5s var(--ease-out)}
@keyframes rot-in{from{opacity:0;transform:translateY(.3em)}}
.hero .lede{margin-top:26px;font-size:clamp(1.06rem,1rem + .4vw,1.3rem);line-height:1.5;color:var(--on-brand);max-width:40rem;text-wrap:balance}
.hero .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:34px}
.hero .note{font-size:14px;color:var(--on-brand);text-wrap:balance}
.hero :focus-visible{outline-color:#FFFFFF}
.hero-art{position:relative;display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);align-items:center;margin-top:clamp(48px,7vw,80px);margin-bottom:clamp(64px,9vw,120px)}
.tools{position:relative;z-index:1;margin-right:-8%;display:grid;gap:0;color:#3F3F46}
.tool{background:#FFFFFF;border-radius:10px;box-shadow:0 14px 30px -14px rgba(0,0,0,.35);font-size:12px;line-height:1.55;overflow:hidden}
.tool.sheet{transform:rotate(-3deg)}
.tool-h{padding:8px 11px;background:#F7F7F8;border-bottom:1px solid #DCDCE0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid4{display:grid;grid-template-columns:1.6fr .8fr .7fr 1fr}
.grid4 span{padding:6px 9px;border-right:1px solid #E7E7EA;border-bottom:1px solid #E7E7EA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.55em}
.grid4 .th{background:#F2F2F4;font-weight:600}
.grid4 .q{color:#B4302A}
.tool.doc,.tool.todo{display:flex;flex-direction:column;padding:12px 14px}
.tool.doc{width:86%;margin:-12px 0 0 14%;transform:rotate(2deg)}
.tool.todo{width:76%;margin:-8px 0 0 4%;transform:rotate(-1.5deg)}
.tool.todo span{display:flex;align-items:center;gap:8px}
.tool.todo i{flex:none;width:11px;height:11px;border:1.5px solid #9E9EA6;border-radius:3px}
.tool b{font-weight:600;margin-bottom:2px}
.scene{border-radius:16px;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.hero .scene{position:relative;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.06),0 30px 60px -24px rgba(0,0,0,.4)}

/* The point of view, in Matt's words (2026-10-07). */
.pov{padding:clamp(72px,9vw,128px) 0 clamp(88px,11vw,152px)}
.pov h2{font-size:clamp(2.4rem,1.2rem + 4vw,4.5rem);line-height:1.02;letter-spacing:-.04em}
.pov p{margin-top:20px;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.45;color:var(--muted);max-width:36rem}
.brandword{color:var(--brand)}

.sec{padding:clamp(88px,11vw,152px) 0;border-top:1px solid var(--line)}
.sec .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.sec h2{font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);line-height:1.08;letter-spacing:-.03em;max-width:16ch}
.sec .head p{font-size:1.06rem;line-height:1.6;color:var(--muted);max-width:36rem}
.sec .body{margin-top:clamp(40px,6vw,64px)}
.notes{display:grid;gap:28px 40px;margin:48px 0 0;padding:0;list-style:none}
.notes.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px}
.notes.stack{grid-template-columns:minmax(0,1fr);gap:0;margin:0;align-content:start}
.notes li{font-size:15px;line-height:1.55;color:var(--muted);padding-top:16px;border-top:1px solid var(--line)}
.notes.stack li{padding:20px 0}
.notes.stack li:first-child{border-top:0;padding-top:4px}
.notes h3{font-size:15px;line-height:1.4;font-weight:600;margin-bottom:4px}
.cite{display:block;margin-top:8px;font-size:13px;color:var(--faint)}

/* Cards that frame a piece of the app, as the app draws it. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-h{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line2);font-weight:600;font-size:14px}
.card-h .n{color:var(--muted);font-weight:500}
.card-h .grow{flex:1}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:start}

/* The hero's timeline (and its one moment of motion: a task selected, its slip and everything it holds up shown). */
.tl{width:100%;height:auto;font-family:var(--font)}
.tl .s-bg{fill:var(--surface)} .tl .s-rule{stroke:var(--line);fill:none} .tl .s-rule2{stroke:var(--line2);fill:none}
.tl .s-panel{fill:var(--surface);stroke:var(--line)}
.tl .s-wk{stroke:var(--line2);stroke-dasharray:2 3;fill:none} .tl .s-today{stroke:var(--ink);stroke-width:1.5}
.tl .s-ms{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 3;fill:none}
.tl .ic{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl text{fill:var(--ink);font-size:14px}
.tl .t-title{font-size:22px;font-weight:600;letter-spacing:-.01em} .tl .t-sub{fill:var(--muted)}
.tl .t-sel{fill:var(--muted)} .tl .t-sel .b{font-weight:600;fill:var(--ink)} .tl .t-sel .up{fill:var(--up)}
.tl .t-lane{font-weight:500} .tl .t-wk{font-size:13px;fill:var(--faint)} .tl .t-today{font-size:13px;font-weight:600}
.tl .t-ms{font-size:13px;fill:var(--muted)} .tl .t-ms .risk{fill:var(--red-ink);font-weight:600}
.tl .ms .flag{stroke:var(--red)}
.tl .edge{fill:none;stroke:var(--stroke-strong);stroke-width:1.2;opacity:.75}
.tl .edge.up{stroke:var(--up);stroke-width:1.6;opacity:1} .tl .edge.down{stroke:var(--red);stroke-width:2;opacity:1} .tl .edge.dim{opacity:.3}
.tl .fc-l{stroke:var(--red);stroke-width:1.4;stroke-dasharray:3 3;fill:none} .tl .fc-c{fill:var(--surface);stroke:var(--red);stroke-width:1.6}
.tl .dot-bg{fill:var(--surface)} .tl .nlbg{fill:var(--surface)}
.tl .ring{fill:none;stroke-width:1.8} .tl .ring.heavy{stroke-width:3.8}
.tl .red{stroke:var(--red);fill:var(--red)} .tl .yel{stroke:var(--yel);fill:var(--yel)} .tl .neu{stroke:var(--neu);fill:var(--neu)} .tl .grn{stroke:var(--grn);fill:var(--grn)}
.tl .ring.red,.tl .ring.yel,.tl .ring.neu,.tl .ring.grn{fill:none}
.tl .halo{fill:transparent;stroke:none}
.tl .pt.rsel .halo{fill:var(--neu-soft);stroke:var(--ink);stroke-width:2}
.tl .pt.rdown .halo{fill:var(--red-soft);stroke:var(--red);stroke-width:1.6}
.tl .pt.rup .halo{fill:var(--up-soft);stroke:var(--up);stroke-width:1.6}
.tl .pt.rdim > :not(.nlbg){opacity:.35}
.tl .halo,.tl .fc-c,.tl .ms .flag{transform-box:fill-box;transform-origin:center}
.tl .fc-l{transform-box:fill-box;transform-origin:left center}

/* Played once, from the state before the click to the one after; the end state is what shows without motion. */
@keyframes tl-fade{from{opacity:0}}
@keyframes tl-rise{from{opacity:0;transform:translateY(5px)}}
@keyframes tl-pop{from{opacity:0;transform:scale(.4)}}
@keyframes tl-draw{from{transform:scaleX(0)}}
@keyframes tl-undim{from{opacity:1}}
@keyframes tl-edge{from{stroke:var(--stroke-strong);stroke-width:1.2;opacity:.75}}
@keyframes tl-flag{from{stroke:var(--muted)}}
.js .tl .pt .halo{animation:tl-pop .5s var(--ease-out) backwards}
.js .tl .pt.rsel .halo{animation-delay:.9s}
.js .tl .pt.rup .halo,.js .tl .pt.nB .halo,.js .tl .pt.nD .halo{animation-delay:1.65s}
.js .tl .pt.nF .halo{animation-delay:1.95s}
.js .tl .pt.rdim > :not(.nlbg){animation:tl-undim .6s ease 1.5s backwards}
.js .tl .edge.up,.js .tl .edge.d1,.js .tl .edge.dim{animation:tl-edge .5s ease 1.5s backwards}
.js .tl .edge.d2{animation:tl-edge .5s ease 1.8s backwards}
.js .tl .fc-l{animation:tl-draw .7s var(--ease-out) 1.1s backwards}
.js .tl .fc-c{animation:tl-pop .4s var(--ease-out) 1.65s backwards}
.js .tl .nA .t-node,.js .tl .nA .nlbg{animation:tl-fade .4s ease 1.7s backwards}
.js .tl .sel{animation:tl-rise .5s var(--ease-out) 1.2s backwards}
.js .tl .ms .flag{animation:tl-flag .4s ease 2.3s backwards}
.js .tl .t-ms .risk{animation:tl-fade .4s ease 2.3s backwards}
@media (prefers-reduced-motion:reduce){.js .tl *{animation:none!important}}

/* The hero's story as a list, for phones: the selected task, then what waits on it. */
.chain{display:none;position:relative;z-index:2;padding:16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 30px 60px -24px rgba(0,0,0,.4)}
.chain-h{font-size:14px;line-height:1.45;color:var(--muted)}
.chain-h b{font-weight:600;color:var(--ink)}
.chain ul{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.chain li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.35}
.chain li.d1{padding-left:22px} .chain li.d2{padding-left:44px} .chain li.d3{padding-left:66px}
.chain .grow{flex:1;min-width:0}
.chain .sub{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.chain .sub.late{color:var(--red-ink)}
.chain .circ{margin-top:2px}
.chain .circ.sel{border-width:3.5px}
.chain .circ.down{border-color:var(--red);background:var(--red-soft)}
.chain .ms .ic{margin-top:2px;color:var(--red)}

/* How work connects: the Map's risks and the effort and impact graph. */
.risk-row{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-top:1px solid var(--line2)}
.risk-row:first-of-type{border-top:0}
.risk-row .ttl{font-size:14px;font-weight:500;line-height:1.4}
.risk-row .ttl .id{color:var(--muted);font-weight:400;margin-right:6px}
.risk-row .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:5px;font-size:13px;color:var(--muted)}
.risk-row .grow{flex:1;min-width:0}
.risk-row .flagic{flex:none;margin-top:2px;color:var(--red)}
.risk-row .date{color:var(--muted);font-weight:400}
.ask .btn{height:36px;pointer-events:none}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:5px;font-size:12px;font-weight:500;background:var(--neu-soft);color:var(--ink);white-space:nowrap}
.chip.red{background:var(--red-soft);color:var(--red-ink)}
.chip.yel{background:var(--yel-soft);color:var(--yel-ink)}
.chip.grn{background:var(--grn-soft);color:var(--grn-ink)}
.av{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--av-bg);color:var(--av-ink);font-size:10px;font-weight:600}
.ask{display:flex;gap:10px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2)}
.ask .field{flex:1;min-width:0;height:36px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:7px;color:var(--faint);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mx{width:100%;height:auto;font-family:var(--font)}
.mx text{fill:var(--muted);font-size:12px}
.mx .q{fill:var(--ink);font-weight:500} .mx .do{fill:var(--red-soft)} .mx .grid{stroke:var(--line2);fill:none} .mx .axis{stroke:var(--ink);stroke-width:1.5;fill:none}
.mx .today{fill:var(--ink);font-weight:600} .mx .dot{fill:var(--surface)} .mx .r{fill:none}
.mx-box{padding:14px 16px 10px}
.mx .red{stroke:var(--red)} .mx .yel{stroke:var(--yel)} .mx .neu{stroke:var(--neu)} .mx .f-red{fill:var(--red)} .mx .f-neu{fill:var(--neu)}

/* The six agents: a task one is working, and the roster. */
.task-h{padding:18px 20px 14px;border-bottom:1px solid var(--line2)}
.task-h h3{font-size:17px;line-height:1.35;letter-spacing:-.01em}
.task-h .meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:8px;font-size:13px;color:var(--muted)}
.who{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:500}
.agav{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--accent-soft);color:var(--ink)}
.agav .ic{stroke:currentColor;stroke-width:1.6}
.feed{list-style:none;margin:0;padding:8px 20px 18px}
.feed li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 12px;padding:12px 0;font-size:14px;line-height:1.5}
.feed li + li{border-top:1px solid var(--line2)}
.feed .when{font-size:12px;color:var(--faint)}
.feed .said{color:var(--muted)}
.feed .q{margin-top:2px;color:var(--ink)}
.file{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;font-weight:500}
.file .kind{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--accent-soft);color:var(--ink)}
.file .v{color:var(--muted);font-weight:400}
.feed .av{width:22px;height:22px}
.feed .acts{display:flex;gap:8px;margin-top:10px}
.feed .acts .btn{height:30px;font-size:13px;padding:0 11px;border-radius:6px;pointer-events:none}
.roster{list-style:none;margin:0;padding:0}
.roster li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}
.roster li:first-child{border-top:0;padding-top:2px}
.roster .agav{grid-row:span 2;align-self:start;width:30px;height:30px;border-radius:8px}
.roster b{font-weight:600;font-size:15px;line-height:1.4}
.roster .desc{grid-column:2 / 4;font-size:14px;color:var(--muted);line-height:1.5}
.roster .kinds{display:flex;gap:4px;justify-content:flex-end}
.roster .kinds i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted);padding:2px 7px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.budget{margin-top:12px;font-size:13px;color:var(--faint)}

/* Privacy mode: Account's switches, working (a demo: nothing here is saved). */
.acct{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:100%}
.acct-side{display:flex;flex-direction:column;gap:10px;padding:18px 14px;background:var(--side);border-right:1px solid var(--line)}
.acct-side .grow{flex:1}
.acct-brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.acct-brand svg{width:16px;height:16px}
.acct-nav{list-style:none;margin:8px 0 0;padding:0;font-size:13px;color:var(--muted)}
.acct-nav li{padding:5px 2px}
.acct-side .me{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.acct-side .me .av{background:var(--ink);color:var(--surface)}
.privtag{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;height:22px;padding:0 8px;border:1px solid var(--stroke);border-radius:999px;font:600 11px/1 var(--font);color:var(--muted);white-space:nowrap}
.acct-main{padding:20px 22px 22px}
.acct-title{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:14px}
.aimaster{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.aimaster .grow,.airow .grow{flex:1;min-width:0}
.aimaster .t{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;line-height:22px}
.aimaster .s{font-size:13px;color:var(--muted);line-height:19px}
.aigrp{margin-top:14px}
.aigrp-h{margin:0 0 2px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.airow{display:flex;align-items:center;gap:8px;min-height:34px;font-size:14px}
.airow.sub{padding-left:18px;color:var(--muted)}
.airow.more{min-height:28px;font-size:13px;color:var(--muted)}
.qhelp{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--stroke);border-radius:50%;color:var(--muted);font:600 11px/1 var(--font);flex:none}
.offnote{font-size:13px;color:var(--muted);line-height:19px;margin:12px 0 0}
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.toggle .track{width:28px;height:16px;border-radius:999px;background:var(--stroke);position:relative;transition:background-color .15s ease}
.toggle .track::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease-out)}
.toggle input:checked + .track{background:var(--accent-fill)}
.toggle input:checked + .track::after{transform:translateX(12px)}
.toggle input:focus-visible + .track{outline:2px solid var(--ink);outline-offset:2px}
.toggle.lg .track{width:36px;height:20px}
.toggle.lg .track::after{width:16px;height:16px}
.toggle.lg input:checked + .track::after{transform:translateX(16px)}
.acct [data-when=off],.acct.off [data-when=on]{display:none}
.acct.off [data-when=off]{display:block}
.acct.off .privtag[data-when=off]{display:inline-flex}
.acct .airow .toggle{pointer-events:none}
.acct .airow .toggle input:disabled + .track{opacity:1}

/* Teams and projects: a project across three teams, with a link between two and a Restricted task. */
.proj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px}
.team{border:1px solid var(--line);border-radius:10px;padding:14px 14px 6px;background:var(--surface)}
.team-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.team-h .n{margin-left:auto;font-weight:500;font-size:12px;color:var(--muted)}
.people{display:flex;margin:10px 0 8px}
.people .av{width:22px;height:22px;font-size:9px;border:2px solid var(--surface);margin-left:-5px}
.people .av:first-child{margin-left:0}
.trow{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line2);font-size:13px;line-height:1.35}
.trow .grow{flex:1;min-width:0}
.trow .sub{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.trow .lnk{color:var(--muted)}
.trow.restricted{color:var(--muted)}
.circ{flex:none;width:14px;height:14px;border-radius:50%;border:1.8px solid var(--neu);background:var(--surface)}
.circ.half{background:linear-gradient(90deg,var(--surface) 50%,var(--neu) 50%)}
.circ.yel{border-color:var(--yel)} .circ.done{border-color:var(--grn);background:var(--grn)}
.linked{outline:2px solid var(--ink);outline-offset:-1px;border-radius:6px;margin:0 -6px;padding-left:6px;padding-right:6px}

/* The close. */
.close{padding:clamp(96px,12vw,168px) 0;border-top:1px solid var(--line);text-align:center}
.close h2{font-size:clamp(2.2rem,1.4rem + 3vw,3.75rem);line-height:1.06;letter-spacing:-.035em;margin:0 auto;max-width:14ch}
.close p{margin:20px auto 0;color:var(--muted);font-size:1.06rem;max-width:34rem}
.close .acts{display:flex;justify-content:center;gap:12px;margin-top:32px}

/* ---------- the legal pages ---------- */
.legal{padding:clamp(48px,7vw,96px) 0 clamp(80px,10vw,128px)}
.legal article{max-width:38rem}
.legal h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1.1;letter-spacing:-.03em}
.legal .updated{margin-top:10px;color:var(--muted);font-size:14px}
.legal h2{font-size:1.3rem;letter-spacing:-.015em;margin:44px 0 10px}
.legal h3{font-size:1.05rem;margin:28px 0 8px}
.legal p,.legal li{color:var(--ink);font-size:16px;line-height:1.7}
.legal p + p{margin-top:12px}
.legal ul{padding-left:1.2em;margin:10px 0}
.legal li + li{margin-top:6px}

/* ---------- the analytics question (only when analytics is set up) ---------- */
.consent{position:fixed;left:16px;bottom:16px;z-index:30;width:min(400px,calc(100vw - 32px));padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);font-size:14px;line-height:1.5}
.consent[hidden]{display:none}
.consent p{color:var(--ink)}
.consent .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* ---------- smaller screens ----------
   The hero's timeline reads (12 px text or more) from about 840 px wide: beside the tools from 1240 px, on its own
   below that, and as a list (.chain) below 960 px. The two-column sections stack below 1240 px, so the graph's
   labels stay readable too. */
@media (max-width:1240px){
  .hero-art{grid-template-columns:minmax(0,1fr)}
  .tools{margin:0 0 -40px;max-width:420px}
  .tool.doc,.tool.todo{display:none}
  .split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .hero .hero-scene{display:none}
  .chain{display:block}
  .sec .head{grid-template-columns:minmax(0,1fr);align-items:start}
  .notes,.notes.two{grid-template-columns:minmax(0,1fr)}
  .proj{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .top .btn.ghost{padding:0 8px}
  .scene{border-radius:12px}
  .acct{grid-template-columns:minmax(0,1fr)}
  .acct-side{flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line);padding:12px 16px}
  .acct-brand,.acct-nav,.acct-side .grow{display:none}
  .mx text{font-size:18px} .mx .q{font-size:19px}
  .acct-main{padding:16px}
  .airow{min-height:40px}
  .hero .acts .btn{flex:1}
  .close .acts .btn{width:100%}
  .feed{padding:4px 16px 14px}
  .task-h{padding:16px}
}

/* A button that reads as a link (the privacy page's "Change your analytics choice"). */
.linkbtn{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:var(--stroke-strong);text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{text-decoration-color:currentColor}
.linkbtn[hidden]{display:none}