/* ============================================================
   Zuno site: landing, pricing, dashboard, account, admin.
   (The note editor has its own styles in index.html.)

   Brand: Night #0E0B14, Ink #15111C, Mist #F5F3F8, and the
   orange -> red -> purple gradient at 135deg. The gradient is for the
   brand itself (logo, highlights). The accent (buttons, links, focus)
   is in accent.css, the one place it's set, and follows the color
   someone picks (theme.js): use var(--accent…), never a purple hex.
============================================================ */
:root{
  --bg:#f5f3f8; --surface:#ffffff; --surface-2:#faf9fc; --surface-3:#efecf4;
  --border:#e4dfec; --border-strong:#cbc3d8;
  --text:#15111c; --text-2:#4b4458; --text-3:#655e72;
  /* "ok" (live, saved, a saving, a tick) is the accent: their color, not a green */
  --ok:var(--accent-text); --ok-bg:color-mix(in srgb, var(--accent) 11%, var(--surface)); --warn:#a85d00; --warn-bg:#fff4e0; --danger:#c3123f; --danger-bg:#fdecf1;
  --destructive:#b84d00;   /* deleting things for good: the logo's orange, deep enough for white text (5.1:1) */
  /* --grad (and its stops, --grad-a/b/c, and --on-grad): public/accent.css, THE GRADIENT; it follows the person's color */
  --shadow-sm:0 1px 2px rgba(21,17,28,.06),0 0 1px rgba(21,17,28,.10);
  --shadow-md:0 6px 20px rgba(21,17,28,.08),0 1px 3px rgba(21,17,28,.06);
  --shadow-lg:0 18px 50px rgba(21,17,28,.14),0 2px 6px rgba(21,17,28,.06);
  --radius:12px; --radius-sm:8px; --control-h:40px;
  --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0e0b14; --surface:#15111c; --surface-2:#1a1522; --surface-3:#221c2c;
  --border:#2a2335; --border-strong:#463c55;
  --text:#f5f3f8; --text-2:#cfc8db; --text-3:#a59db3;
  --ok:var(--accent-text); --ok-bg:color-mix(in srgb, var(--accent) 20%, var(--surface)); --warn:#f2b04d; --warn-bg:#2d2110; --danger:#ff6b8f; --danger-bg:#34121d;
  --destructive:#fd7220;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}
@media (pointer: coarse){ :root{ --control-h:46px; } }

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{margin:0;min-height:calc(100vh / var(--z, 1));min-height:calc(100dvh / var(--z, 1));display:flex;flex-direction:column;background:var(--bg);color:var(--text);
  font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;}
a{color:var(--accent-text);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus{outline:none;}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:4px;}
img{max-width:100%;}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0;}
p{margin:0;}
.theme-switching,.theme-switching *{transition:none!important;}
[hidden]{display:none!important;}
/* the logo doubles as a color dial (theme.js): a drag on it turns the hue instead of scrolling or dragging the image */
[data-hue-wired]{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
[data-hue-wired] img{-webkit-user-drag:none;}
.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;}
/* ONE COLUMN: every boxed section (the demo, grids, cards, tables, the questions, the founder's note, the call to action) is as
   wide as this, so their edges line up all the way down; long words are kept to a comfortable line inside them (max-width in ch),
   never by making a box narrower than the rest. */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 max(20px, env(safe-area-inset-left));}
/* SIZED FOR READING ON A COMPUTER — a monitor sits two or three feet
   away, a phone one, so at the same pixels a page reads small on a
   computer, and people with weaker eyes end up zooming in (if they know
   how). So on a computer (a mouse or trackpad) the whole page is bigger,
   more the more room the screen has: --z, applied as CSS zoom, like
   the browser's own zoom at 115–150% (more on 4K and TVs), the same as
   the note editor, with nothing to set. Body text lands at 17–22.5 px.
   Both the width and the height
   have to have the room. Phones and tablets (touch) keep 1.
   Under zoom, viewport units (vw, vh) are zoomed too, so anything sized
   by the screen divides by --z; what the scripts place by measuring
   divides by it too (site.js, theme.js). The note editor, which places a
   great deal by measuring, scales its own sizes instead (index.html, --s).
   From 1600 px across, the page also widens with the screen (about three
   quarters of it, up to 1600 px). */
:root{ --z:1; }
@media (pointer: fine) and (min-width: 1100px) and (min-height: 600px){ :root{ --z:1.15; } }
@media (pointer: fine) and (min-width: 1280px) and (min-height: 700px){ :root{ --z:1.25; } }
@media (pointer: fine) and (min-width: 1440px) and (min-height: 800px){ :root{ --z:1.35; } }
@media (pointer: fine) and (min-width: 1680px) and (min-height: 900px){ :root{ --z:1.5; } }
@media (pointer: fine) and (min-width: 2200px) and (min-height: 1100px){ :root{ --z:1.75; } }
@media (pointer: fine) and (min-width: 2800px) and (min-height: 1400px){ :root{ --z:2.1; } }
@media (pointer: fine) and (min-width: 3400px) and (min-height: 1700px){ :root{ --z:2.5; } }
@media print{ :root{ --z:1; } }
html{zoom:var(--z);}
@media (min-width: 1600px){ .wrap{max-width:min(1600px, calc(76vw / var(--z)));} }
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
@media (forced-colors: active){ .grad-text{color:CanvasText;background:none;} }

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;height:28px;}
.logo img{height:28px;width:auto;display:block;}
/* the logo drawn in the page (pages.js logo): its gradient is the person's color's, its word the page's ink */
.logo-svg{height:28px;width:auto;display:block;color:#15111c;}
:root[data-theme="dark"] .logo-svg{color:#ffffff;}
.logo .on-dark{display:none;}
:root[data-theme="dark"] .logo .on-light{display:none;}
:root[data-theme="dark"] .logo .on-dark{display:block;}
.mark{width:auto;height:28px;display:block;}   /* sized by height: the mark keeps its own shape */

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border);}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:64px;}
.topbar nav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.topbar .nav-me{margin-left:4px;}   /* you, at the far right, a breath apart from the light/dark switch */
.topbar .nav-tool{display:inline-flex;margin-left:4px;}   /* signed out: the light/dark switch after Start free, a breath apart */
.navlink{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:8px;color:var(--text-2);font-weight:500;font-size:14.5px;}
.navlink:hover{color:var(--text);background:var(--surface-3);text-decoration:none;}
.navlink[aria-current="page"]{color:var(--text);}
/* home: a house, the size of the icons beside it; on its own page, drawn in the brand gradient (pages.js homeLink) */
.navlink.nav-home{justify-content:center;width:36px;padding:0;}
/* a zuno's own button on the list (pages.js rowAction, site.js): Delete, or Merge down, with a slim ▾ beside it to choose */
.row-act{display:inline-flex;align-items:center;border-radius:8px;transition:background-color .15s ease;}
.row-act > form{display:none;}
html:not([data-row-act]) .row-act-delete,html[data-row-act="delete"] .row-act-delete,html[data-row-act="merge"] .row-act-merge,
html[data-row-act="up"] .row-act-up,html[data-row-act="down"] .row-act-down{display:contents;}
/* (a row without the one picked: Delete, never an empty space) */
html[data-row-act="merge"] .row-act:not(:has(> .row-act-merge)) > .row-act-delete,html[data-row-act="up"] .row-act:not(:has(> .row-act-up)) > .row-act-delete,
html[data-row-act="down"] .row-act:not(:has(> .row-act-down)) > .row-act-delete{display:contents;}
/* MERGE BY DRAG (site.js; Merge down picked): a faint grip on each row, a grab hand, the lifted row a dashed space,
   the one it's over lit in their color, a small card under the pointer saying what letting go would do */
.row-grip{display:none;}
html[data-row-act="merge"] ul.notes .row-grip{position:absolute;left:3px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:15px;height:34px;padding:0;
  border:0;border-radius:6px;background:transparent;color:var(--text-3);opacity:.4;cursor:grab;transition:opacity .15s ease,background-color .15s ease;}
html[data-row-act="merge"] ul.notes .row-grip .icon{width:14px;height:14px;stroke-width:3;}
html[data-row-act="merge"] ul.notes .note-row:hover .row-grip,html[data-row-act="merge"] ul.notes .row-grip:focus-visible{opacity:1;}
html[data-row-act="merge"] ul.notes .row-grip:hover{background:var(--surface-3);}
html[data-row-act="merge"] ul.notes > .note-row{cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
html[data-row-act="merge"] ul.notes > .note-row :is(select,button,a){cursor:pointer;}
body.is-merge-dragging,body.is-merge-dragging *{cursor:grabbing !important;}
ul.notes > .note-row.is-lifted{opacity:.45;outline:1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);outline-offset:-4px;border-radius:10px;transition:opacity .15s ease;}
ul.notes > .note-row.is-drop-target{background:color-mix(in srgb, var(--accent) 9%, transparent);box-shadow:inset 0 0 0 2px var(--accent);border-radius:10px;transition:background-color .12s ease,box-shadow .12s ease;}
.merge-ghost{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:grid;gap:3px;max-width:320px;padding:12px 16px 12px 14px;border-radius:14px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 22px 50px -16px rgba(20,10,40,.45),0 4px 12px -4px rgba(20,10,40,.2);transform:rotate(-1.5deg);
  border-left:4px solid var(--accent);}
.merge-ghost b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.merge-ghost span{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.merge-ghost.is-over span{color:var(--accent-text);font-weight:600;}
@media (prefers-reduced-motion: reduce){ .merge-ghost{transform:none;} }
/* your own order on the list (Move up / Move down): just the way back to most recent first (and, once taken, Undo in its place), on the first zuno's title line */
.note-head{display:flex;align-items:baseline;gap:12px;min-width:0;}
.note-head .note-title{flex:0 1 auto;min-width:0;}
.order-line{flex:none;margin:0 0 0 auto;font-size:13px;line-height:1;}   /* on the first title's line, at its far end: no height of its own */
.order-line .linkish{border:0;background:none;padding:0;font:inherit;color:var(--accent-text);cursor:pointer;}
.order-line .linkish:hover{text-decoration:underline;}
.row-act-main[disabled]{opacity:.35;cursor:default;background:transparent;}
/* Move up / Move down, held: fills with their color, bottom to top, until it goes all the way (site.js, half a second) */
.row-act-up .row-act-main,.row-act-down .row-act-main{position:relative;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.row-act-up .row-act-main::before,.row-act-down .row-act-main::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:color-mix(in srgb, var(--accent) 30%, transparent);transform:scaleY(0);transform-origin:50% 100%;}
.row-act-down .row-act-main::before{transform-origin:50% 0;}   /* down: fills from the top, the way it's going */
.row-act-main.is-holding::before{transform:scaleY(1);transition:transform .5s linear;}
.row-act-main .icon{position:relative;}
.row-act-more{display:none;align-items:center;justify-content:center;width:15px;height:36px;margin-left:-5px;padding:0;border:0;border-radius:0 8px 8px 0;
  background:transparent;color:var(--text-3);opacity:.35;cursor:pointer;transition:opacity .15s ease,color .15s ease,background-color .15s ease;}
html[data-row-act] .row-act-more{display:inline-flex;}
.row-act-more .icon{width:12px;height:12px;stroke-width:2.4;}
.note-row:hover .row-act-more,.row-act-more:focus-visible,.row-act-more[aria-expanded="true"]{opacity:1;}
/* the ▾ is too slim for a ring of its own: focused, the ring goes round the whole split button */
.row-act-more:focus-visible{outline:none;}
.row-act:has(.row-act-more:focus-visible){outline:2px solid var(--accent-text);outline-offset:2px;}
@media (hover: hover){
  .row-act:has(.row-act-more:hover){background:var(--surface-3);}
  .row-act-more:hover{color:var(--text);}
}
/* a finger: the button and its ▾ each a full fingertip (44 px), apart, a hairline between, so one is never pressed for the other */
@media (pointer: coarse){
  .row-act{gap:8px;}
  .row-act .row-act-main{width:44px;height:44px;}
  .row-act-more{position:relative;width:36px;height:44px;margin-left:0;border-radius:8px;opacity:.7;}
  .row-act-more::before{content:"";position:absolute;left:-5px;top:12px;bottom:12px;width:1px;background:var(--border);}
}
.row-act-menu{position:absolute;z-index:90;min-width:230px;padding:6px;border-radius:12px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-lg);}
.row-act-opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer;}
.row-act-opt:hover,.row-act-opt:focus-visible{background:var(--surface-3);outline:none;}
.row-act-opt > .icon:first-child{width:18px;height:18px;color:var(--text-2);flex:none;}
.row-act-opt > span{display:grid;gap:1px;flex:1;}
.row-act-opt b{font-size:14px;font-weight:600;}
.row-act-opt .hint{font-size:12px;}
.row-act-opt .tick{width:16px;height:16px;color:var(--accent-text);visibility:hidden;flex:none;}
.row-act-opt[aria-checked="true"] .tick{visibility:visible;}
/* Admin → Look: the font choices, each shown in its own font */
.look-form{display:grid;gap:12px;max-width:640px;}
.look-choice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:12px;cursor:pointer;}
.look-choice:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.look-choice input{margin-top:4px;accent-color:var(--accent);}
.look-choice > span{display:grid;gap:2px;}
.look-choice b{font-size:17px;font-weight:600;}
.look-form .btn{justify-self:start;}
.nav-home .icon{width:21px;height:21px;}
.nav-home[aria-current="page"]{background:color-mix(in srgb, var(--accent) 10%, transparent);}
.nav-home[aria-current="page"] .icon{stroke:url(#zgHomeNav);stroke-width:2.2;}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:8px;background:transparent;color:var(--text-2);cursor:pointer;}
.icon-btn:hover{background:var(--surface-3);color:var(--text);}
.avatar{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;overflow:hidden;flex:none;}
.avatar img{width:100%;height:100%;object-fit:cover;}
@media (max-width: 640px){
  .topbar .wrap{height:58px;gap:8px;}
  .navlink.optional{display:none;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h);padding:0 16px;border-radius:10px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:600 14.5px/1 var(--font);cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:background-color .12s ease,border-color .12s ease,transform .06s ease;}
.btn:hover{background:var(--surface-3);text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn.primary:active{background:var(--accent-pressed);}
.btn.ghost{border-color:transparent;background:transparent;}
.btn.ghost:hover{background:var(--surface-3);}
.btn.danger{background:var(--destructive);border-color:var(--destructive);color:#fff;}
.btn.danger:hover{background:color-mix(in srgb, var(--destructive) 88%, #000);border-color:color-mix(in srgb, var(--destructive) 88%, #000);}
:root[data-theme="dark"] .btn.danger{color:#1a0710;}
:root[data-theme="dark"] .btn.danger:hover{background:color-mix(in srgb, var(--destructive) 88%, #fff);border-color:color-mix(in srgb, var(--destructive) 88%, #fff);}
.btn.small{height:32px;padding:0 12px;font-size:13px;border-radius:8px;}
.btn.big{height:52px;padding:0 24px;font-size:16px;border-radius:12px;}
.btn.block{width:100%;}
.btn[disabled]{opacity:.55;cursor:default;transform:none;}
@media (pointer: coarse){ .btn.small{height:40px;} }

/* ---------- forms ---------- */
label{font-size:13.5px;font-weight:600;}
.field{display:flex;flex-direction:column;gap:6px;}
input[type=text],input[type=email],input[type=number],input[type=search],select{height:var(--control-h);padding:0 12px;border:1px solid var(--border-strong);border-radius:10px;
  background:var(--surface);color:var(--text);font:15px var(--font);min-width:0;}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1;}
/* dark: a field a touch lighter than the card it's on (a frosted fill the glass shows through, as Windows 11 does it), with an edge
   you can see, lifting a little on hover; focused, it settles deeper, so the words stand out */
:root[data-theme="dark"] :is(input[type=text],input[type=email],input[type=number],input[type=search],select,textarea){background-color:rgba(255,255,255,.065);border-color:rgba(255,255,255,.16);}
:root[data-theme="dark"] :is(input[type=text],input[type=email],input[type=number],input[type=search],select,textarea):hover{background-color:rgba(255,255,255,.095);border-color:rgba(255,255,255,.26);}
:root[data-theme="dark"] :is(input[type=text],input[type=email],input[type=number],input[type=search],select,textarea):focus{background-color:rgba(10,8,16,.5);border-color:var(--accent);}
/* focused: one 1px line in their color, and nothing else (no ring, no outline beside it). On white it's their color's readable shade
   (as their links are), so a bright one like lime still shows; on dark, the color itself */
:is(input,select,textarea):focus{border-color:var(--accent-text);box-shadow:none;}
:is(input[type=text],input[type=email],input[type=number],input[type=search],select,textarea):focus-visible{outline:none;}
@media (max-width: 640px){ input,select{font-size:16px!important;} }
.hint{font-size:12.5px;color:var(--text-3);}

/* ---------- cards & notices ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;font-size:14px;border:1px solid transparent;}
.notice.ok{background:var(--ok-bg);color:var(--text);border-color:color-mix(in srgb, var(--ok) 30%, transparent);}
.notice.warn{background:var(--warn-bg);color:var(--text);border-color:color-mix(in srgb, var(--warn) 30%, transparent);}
.notice.error{background:var(--danger-bg);color:var(--text);border-color:color-mix(in srgb, var(--danger) 35%, transparent);}
.notice .icon{margin-top:2px;}
.notice.ok .icon{color:var(--ok);} .notice.warn .icon{color:var(--warn);} .notice.error .icon{color:var(--danger);}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.01em;
  background:var(--surface-3);color:var(--text-2);white-space:nowrap;}
.badge.pro{background:var(--grad);color:var(--on-grad,#fff);}
.badge.live{background:var(--ok-bg);color:var(--ok);}
.badge.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.badge.warn{background:var(--warn-bg);color:var(--warn);}
.meter{width:100%;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;}
.meter > span{display:block;height:100%;border-radius:3px;background:var(--accent);min-width:2px;}
.meter.high > span{background:var(--warn);} .meter.full > span{background:var(--danger);}

main{flex:1;}

/* ============================================================
   LANDING
   Centered hero (the headline, the pitch, two buttons), the product itself under it, then one point per section.
============================================================ */
.hero{position:relative;overflow:hidden;padding:76px 0 80px;text-align:center;}
.hero::before{content:"";position:absolute;inset:-30% -20% auto;height:760px;background:
  radial-gradient(closest-side, color-mix(in srgb, var(--grad-a) 18%, transparent), transparent 70%) 18% 40%/52% 70% no-repeat,
  radial-gradient(closest-side, color-mix(in srgb, var(--grad-b) 14%, transparent), transparent 70%) 50% 20%/50% 70% no-repeat,
  radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%) 82% 40%/52% 70% no-repeat;
  pointer-events:none;}
/* a faint grid behind the headline, fading out at the edges */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px),linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
  background-size:44px 44px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 60% 48% at 50% 26%, #000 20%, transparent 72%);mask-image:radial-gradient(ellipse 60% 48% at 50% 26%, #000 20%, transparent 72%);}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
/* --fit (site.js): a little smaller when the longest of the rotating words wouldn't fit the width, so none is ever cut off */
.hero h1{margin:0 0 22px;font-size:calc(clamp(44px, 7.4vw, 88px) * var(--fit, 1));font-weight:800;letter-spacing:-.045em;line-height:1;}
/* the elevator pitch, right under the headline: one step up from the lede, in the text color */
.hero .pitch{margin:0 0 12px;font-size:clamp(20px, 2.4vw, 26px);font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--text);text-wrap:balance;}
.hero .lede{max-width:50ch;font-size:18px;color:var(--text-2);text-wrap:balance;}

/* ---------- the rotating verb: "[Write] together, live." ----------
   On its own line, so a long word ("Collaborate") never pushes the rest of
   the sentence around. The old word's letters lift out, the new word's
   rise in from below, one letter after another, with a soft blur that
   clears as they land. site.js drives it; without it, it just says Write. */
.rotator{display:block;position:relative;height:1.08em;overflow:hidden;overflow:visible clip;}   /* clipped above and below (the letters rise in), never at the sides */
.rotator-measure{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none;}
.rotator-word{position:absolute;left:0;right:0;top:0;white-space:nowrap;text-align:center;}
.rotator-word .ch{display:inline-block;will-change:transform,opacity,filter;
  transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .55s ease,filter .55s ease;
  transition-delay:calc(var(--i) * 28ms);}
.rotator-word.is-below .ch{transform:translateY(100%);opacity:0;filter:blur(8px);}
.rotator-word.is-out .ch{transform:translateY(-90%);opacity:0;filter:blur(8px);transition-duration:.5s,.35s,.35s;}
/* room for it all on one line (site.js): the word in the sentence, its space easing to each word's width as they change */
.hero h1.is-one-line .rotator{display:inline-block;vertical-align:top;margin-right:.26em;transition:width .7s cubic-bezier(.16,1,.3,1);}
@media (prefers-reduced-motion: reduce){ .hero h1.is-one-line .rotator{transition:none;} }
.hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;}
.btn.ghost-line{background:color-mix(in srgb, var(--surface) 70%, transparent);}
.hero .fine{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:16px;font-size:13.5px;color:var(--text-3);}
.hero .fine > span{display:inline-flex;align-items:center;gap:6px;}
.hero .fine .icon{width:15px;height:15px;color:var(--ok);}
.hero .agree{max-width:52ch;}
.hero .quick-new{width:100%;max-width:480px;margin-top:32px;}

/* ---------- the product, under the hero: a note three people are writing at once ---------- */
.demo-wrap{position:relative;z-index:1;margin-top:60px;}   /* (the page's one column, like every section: .wrap) */
:root[data-theme="dark"] .demo{box-shadow:0 30px 80px -24px rgba(0,0,0,.6), var(--shadow-lg);}
.demo{position:relative;width:100%;margin:0;text-align:left;border-radius:16px;background:var(--surface);border:1px solid var(--border);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 80px -24px rgba(40,10,90,.35), var(--shadow-lg);}
.demo-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);}
.demo-dots{display:flex;gap:6px;}
.demo-dots i{width:11px;height:11px;border-radius:50%;background:var(--surface-3);display:block;}
.demo-title{font-weight:700;font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo-live{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:12.5px;font-weight:600;white-space:nowrap;}
.demo-live .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.demo-avatars{display:flex;}
.demo-avatars span{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);margin-left:-6px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;}
.demo-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:336px;}
.demo.is-resetting .demo-panes{opacity:.25;}
.demo-panes{transition:opacity .3s ease;}
.demo-src{padding:24px 26px;background:var(--surface-2);border-right:1px solid var(--border);font:13.5px/2 var(--mono);color:var(--text-2);}
.demo-src .line{position:relative;min-height:2em;white-space:pre-wrap;}
.demo-src .h{color:var(--text);font-weight:700;}
.demo-view{padding:22px 30px;font-size:15px;}
.v-h{font-size:27px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:4px;}
.v-label{font-weight:700;margin-top:2px;}
.v-gap{height:14px;}
.v-p{color:var(--text-2);}
.v-task{display:flex;align-items:center;gap:10px;min-height:32px;}
.demo-view .caret{height:1.1em;vertical-align:-.15em;}
.v-task .box{flex:none;width:18px;height:18px;border-radius:5px;border:2px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease;}
.v-task .box .icon{width:12px;height:12px;stroke-width:3.5;color:var(--on-accent);opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1);}
.v-task.done .box{background:var(--accent);border-color:var(--accent);}
.v-task.done .box .icon{opacity:1;transform:none;}
.v-task.done > span:last-child{color:var(--text-3);}
.caret{position:relative;display:inline-block;width:2px;height:1.25em;vertical-align:-.25em;background:var(--c);margin:0 1px;}
.caret b{position:absolute;bottom:100%;left:-1px;padding:2px 6px 3px;border-radius:4px 4px 4px 0;background:var(--c);color:#fff;font:700 10.5px/1 var(--font);white-space:nowrap;}
.sel{background:color-mix(in srgb, var(--c) 24%, transparent);border-radius:2px;}
@media (prefers-reduced-motion: no-preference){
  .caret::before{content:"";position:absolute;inset:0;background:var(--surface-2);animation:blink 1.1s steps(1) infinite;}
  .demo-view .caret::before,.art-live .caret::before{background:var(--surface);}
  .demo-live .dot{animation:live-pulse 2s ease-in-out infinite;}
}
@keyframes blink{0%{opacity:0;}50%{opacity:.7;}}
@keyframes live-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 45%, transparent);}50%{box-shadow:0 0 0 5px transparent;}}

/* ---------- what it runs on: the real vendors, as plain names ---------- */
/* ---------- see it in action: three everyday zunos, step by step (pages.js tour(), site.js THE WALKTHROUGH) ----------
   All in the page's own colors and theme: the zuno is drawn, not a picture. */
.tour{max-width:1120px;margin:0 auto;}
.tour-tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 22px;padding:4px;border-radius:14px;background:var(--surface-3);overflow-x:auto;scrollbar-width:none;}
.tour-tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:10px;background:none;color:var(--text-2);font:600 14.5px var(--font);white-space:nowrap;cursor:pointer;}
.tour-tab .icon{width:17px;height:17px;}
.tour-tab:hover{color:var(--text);}
.tour-tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.tour-tab[aria-selected="true"] .icon{color:var(--accent-text);}
.tour-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start;}
.tour-side{display:flex;flex-direction:column;gap:14px;}
.tour-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.tour-step{display:flex;gap:12px;width:100%;padding:12px 14px;border:1px solid transparent;border-radius:12px;background:none;color:var(--text-2);font:inherit;text-align:left;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;}
.tour-step:hover{background:color-mix(in srgb, var(--surface) 60%, transparent);}
.tour-step[aria-current="step"]{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm);color:var(--text);}
.tour-n{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface-3);color:var(--text-2);font-size:12.5px;font-weight:800;transition:background-color .2s ease,color .2s ease;}
.tour-step.is-past .tour-n{background:var(--accent-subtle);color:var(--accent-text);}
.tour-step[aria-current="step"] .tour-n{background:var(--accent);color:var(--on-accent);}
.tour-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tour-text b{font-size:15px;color:var(--text);}
.tour-text span{font-size:13.5px;line-height:1.45;}
.tour-step:not([aria-current="step"]) .tour-text span{display:none;}
.tour-pause{align-self:flex-start;display:inline-flex;align-items:center;height:32px;padding:0 12px;margin-left:8px;border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text-2);font:600 13px var(--font);cursor:pointer;}
.tour-pause .icon{width:13px;height:13px;margin-right:6px;fill:currentColor;stroke:none;}
.tour-pause span{display:inline-flex;align-items:center;}
.tour-pause .tp-play,.tour.is-paused .tour-pause .tp-pause{display:none;}
.tour.is-paused .tour-pause .tp-play{display:inline-flex;}
/* the zuno */
.tour-stage{position:relative;border-radius:16px;background:var(--surface);border:1px solid var(--border);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 80px -24px rgba(40,10,90,.3), var(--shadow-lg);}
:root[data-theme="dark"] .tour-stage{box-shadow:0 30px 80px -24px rgba(0,0,0,.6), var(--shadow-lg);}
.tour-live.is-alone{background:var(--surface-3);color:var(--text-2);}
.tour-avatars span.is-new{animation:tour-pop .45s cubic-bezier(.3,1.6,.5,1) both;}
.tour-tools{display:flex;gap:4px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);}
.tour-tool{display:inline-grid;place-items:center;width:34px;height:30px;border-radius:8px;color:var(--text-3);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;}
.tour-tool .icon{width:17px;height:17px;}
.tour-tool.is-on{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);}
.tour-page{height:380px;overflow:hidden;padding:22px 28px 34px;font-size:15px;
  -webkit-mask-image:linear-gradient(transparent, #000 22px);mask-image:linear-gradient(transparent, #000 22px);}   /* (scrolled along: the top fades rather than cuts) */
.tour-page > * + *{margin-top:8px;}
.tour-page .is-new{animation:tour-in .4s ease-out both;}
.t-h{font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.2;}
.tour-page .t-tags{display:flex;gap:6px;margin-top:6px;}
.t-tags span{padding:2px 9px;border-radius:999px;background:var(--accent-subtle);color:var(--accent-text);font-size:12.5px;font-weight:700;}
.t-p{color:var(--text-2);line-height:1.6;max-width:60ch;}
.tour-page .t-label{font-weight:700;margin-top:16px;}
.t-li{position:relative;padding-left:18px;color:var(--text-2);}
.t-li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--text-3);}
.t-task{display:flex;align-items:center;gap:10px;min-height:28px;}
.t-task .box{flex:none;width:18px;height:18px;border-radius:5px;border:2px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s ease,border-color .2s ease;}
.t-task .box .icon{width:12px;height:12px;stroke-width:3.5;color:var(--on-accent);opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1);}
.t-task.done .box{background:var(--accent);border-color:var(--accent);}
.t-task.done .box .icon{opacity:1;transform:none;}
.t-task.done > span:last-child{color:var(--text-3);text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--text-3) 60%, transparent);}
.tour-page .t-table{width:100%;max-width:520px;border-collapse:collapse;font-size:14px;margin-top:14px;}
.t-table th,.t-table td{padding:7px 10px;border:1px solid var(--border);text-align:left;white-space:nowrap;}
.t-table th{background:var(--surface-2);font-weight:700;font-size:13px;}
.t-table td:last-child,.t-table th:last-child{text-align:right;}
.tour-page .t-photos{display:flex;gap:12px;margin-top:12px;}
.t-photo{margin:0;width:132px;}
.t-photo-art{display:grid;place-items:center;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 15%, color-mix(in srgb, var(--accent) 24%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface-3)));
  box-shadow:inset 0 0 0 1px var(--border);}
.t-photo-art svg{width:62%;height:auto;fill:none;stroke:var(--accent-text);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.t-photo figcaption{margin-top:5px;font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tour-page .t-sketch{max-width:420px;margin-top:12px;padding:10px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);}
.t-sketch svg{display:block;width:100%;height:auto;fill:none;stroke:var(--accent-text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.t-sketch .arrow{stroke:var(--text-2);}
.t-sketch text{fill:var(--text);stroke:none;font:700 15px var(--font);}
.tour-page .t-audio{display:flex;align-items:center;gap:12px;max-width:440px;margin-top:12px;padding:10px 14px 10px 10px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);}
.t-audio-play{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);}
.t-audio-play .icon{width:14px;height:14px;fill:currentColor;stroke:none;margin-left:2px;}
.t-audio-text{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;}
.t-audio-text b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.t-audio-wave{display:flex;align-items:center;gap:2px;height:16px;}
.t-audio-wave i{flex:1;max-width:4px;height:calc(var(--v) * 100%);border-radius:2px;background:color-mix(in srgb, var(--accent) 55%, var(--surface-3));}
.t-audio-len{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;}
/* the moments: the camera's view, voice typing, the walkie-talkie, sharing */
.tour-scan{position:absolute;inset:94px 0 0;display:grid;place-items:end center;padding-bottom:26px;background:color-mix(in srgb, #0d0a12 55%, transparent);opacity:0;pointer-events:none;transition:opacity .25s ease;}
.tour-scan i{position:absolute;width:36px;height:36px;border:3px solid #fff;border-radius:4px;}
.tour-scan i:nth-child(1){left:22%;top:16%;border-right:0;border-bottom:0;}
.tour-scan i:nth-child(2){right:22%;top:16%;border-left:0;border-bottom:0;}
.tour-scan i:nth-child(3){left:22%;bottom:22%;border-right:0;border-top:0;}
.tour-scan i:nth-child(4){right:22%;bottom:22%;border-left:0;border-top:0;}
.tour-scan span{padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:12.5px;font-weight:600;}
.is-scanning .tour-scan{opacity:1;}
.tour-voice,.tour-talk{position:absolute;left:50%;bottom:18px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:13.5px;font-weight:600;color:var(--text-2);white-space:nowrap;
  opacity:0;transform:translate(-50%, 12px);transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.4,.5,1);pointer-events:none;}
.tour-voice .icon{width:16px;height:16px;color:var(--accent-text);}
.is-voice .tour-voice,.is-talking .tour-talk{opacity:1;transform:translate(-50%, 0);}
.tour-talk b{color:var(--text);}
.tour-talk-dot{width:10px;height:10px;border-radius:50%;}
.is-locked .tour-talk{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent), var(--shadow-lg);}
.is-locked .tour-talk-hint{color:var(--danger);}
.tour-wave{display:inline-flex;align-items:center;gap:3px;height:16px;}
.tour-wave i{width:3px;height:30%;border-radius:2px;background:var(--accent);}
.tour-share{position:absolute;right:14px;top:92px;display:flex;flex-direction:column;gap:4px;width:250px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  font-size:13px;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.4,.5,1);pointer-events:none;}
.is-sharing .tour-share{opacity:1;transform:none;}
.tour-share > b{font-size:14px;margin-bottom:4px;}
.tour-share-opt{display:flex;align-items:center;justify-content:space-between;padding:6px 9px;border-radius:8px;color:var(--text-2);}
.tour-share-opt.is-on{background:var(--accent-subtle);color:var(--accent-text);font-weight:700;}
.tour-share-opt .icon{width:14px;height:14px;stroke-width:3;}
.tour-share-row{display:flex;align-items:center;gap:12px;margin-top:8px;}
.tour-share .qr{display:grid;grid-template-columns:repeat(5, 10px);gap:2px;padding:7px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);}
.tour-share .qr i{width:10px;height:10px;border-radius:2px;background:#ebe8f0;}
.tour-share .qr i.on{background:#15111c;}
.tour-share-copied{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:700;}
.tour-share-copied .icon{width:14px;height:14px;}
@media (prefers-reduced-motion: no-preference){
  .is-scanning .tour-scan i{animation:tour-aim 1s ease-in-out infinite alternate;}
  .tour-wave i{animation:tour-wave .9s ease-in-out calc(var(--i) * -.17s) infinite;}
  .t-sketch.is-new path,.t-sketch.is-new ellipse{stroke-dasharray:1;stroke-dashoffset:1;animation:tour-draw .9s cubic-bezier(.45,0,.25,1) var(--d) both;}
  .t-sketch.is-new text{animation:tour-in .4s ease-out var(--d) both;}
  .tour-page .t-photo.is-new{animation:tour-snap .5s cubic-bezier(.3,1.4,.5,1) both;}
}
@keyframes tour-in{from{opacity:0;transform:translateY(6px);}}
@keyframes tour-pop{from{transform:scale(.3);opacity:0;}}
@keyframes tour-snap{0%{opacity:0;transform:scale(.85);filter:brightness(2);}60%{filter:brightness(1.15);}}
@keyframes tour-aim{to{transform:scale(.88);}}
@keyframes tour-wave{0%,100%{height:25%;}50%{height:100%;}}
@keyframes tour-draw{to{stroke-dashoffset:0;}}
@media (max-width: 900px){
  .tour-body{grid-template-columns:minmax(0,1fr);gap:16px;}
  /* the steps in a row above the zuno, the one playing with its words */
  .tour-steps{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px;}
  .tour-steps li{flex:none;scroll-snap-align:start;}
  .tour-step{padding:8px 12px;}
  .tour-step .tour-text b{font-size:14px;white-space:nowrap;}
  .tour-step[aria-current="step"]{width:min(300px, 76vw);}
  .tour-step[aria-current="step"] .tour-text b{white-space:normal;}
  .tour-pause{margin-left:0;}
}
@media (max-width: 640px){
  .tour-tabs{width:100%;}
  .tour-tab{flex:1;justify-content:center;padding:0 8px;font-size:13.5px;}
  .tour-tab .icon{display:none;}
  .tour-page{height:340px;padding:18px 18px 30px;}
  .t-h{font-size:22px;}
  .t-photo{width:calc((100% - 24px) / 3);}
  .tour-stage .tour-live{display:none;}
  .tour-share{left:14px;right:14px;width:auto;}
}

.runs-on{padding:8px 0 20px;text-align:center;}
.runs-on p{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);}
.runs-on ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 44px;}
.runs-on li{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:700;letter-spacing:-.025em;color:color-mix(in srgb, var(--text) 42%, transparent);}
/* each company's own mark beside its name, at the size of the words; its colors are its own (an ink mark follows the text) */
.runs-on .ro-logo{flex:none;width:1.3em;height:1.3em;}
.runs-on li:has(.ro-logo) span,.runs-on .ro-logo{color:color-mix(in srgb, var(--text) 78%, transparent);}
/* in orbit (site.js): the label the planet, the names a ring round it */
.runs-on.is-orbiting{padding:4px 0 8px;overflow:hidden;}
.runs-on .orbit{position:relative;max-width:1080px;margin:0 auto;height:190px;}
.runs-on.is-orbiting .orbit > p{position:absolute;left:50%;top:50%;z-index:2;margin:0;transform:translate(-50%,-50%);white-space:nowrap;
  padding:6px 14px;border-radius:999px;background:color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent), 0 0 40px 12px color-mix(in srgb, var(--accent) 9%, transparent);}
.runs-on.is-orbiting ul{position:absolute;inset:0;margin:0;display:block;}
.runs-on.is-orbiting li{position:absolute;left:0;top:0;white-space:nowrap;transform-origin:50% 50%;will-change:transform,opacity;color:color-mix(in srgb, var(--text) 60%, transparent);}
/* the planet: the Zuno mark, always level. Still (no script, or less motion): between the label and the row. In orbit: the ring's middle */
.ro-planet{position:relative;display:block;width:60px;height:76px;margin:16px auto 0;}
.ro-planet .mark{position:relative;z-index:1;display:block;width:100%;height:100%;
  filter:drop-shadow(0 8px 16px rgba(14,11,20,.14)) drop-shadow(0 2px 4px rgba(14,11,20,.10));}   /* a plain shadow under it: no colored glow */
/* a sheen across the mark, and only the mark (its own shape as the mask) */
.ro-shine{position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-mask:var(--mark-url) center / contain no-repeat;mask:var(--mark-url) center / contain no-repeat;
  background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%) no-repeat;background-size:260% 100%;background-position:160% 0;}
@media (prefers-reduced-motion: no-preference){
  .runs-on.is-orbiting .ro-shine{animation:ro-sheen 6.5s cubic-bezier(.5,0,.3,1) 1.2s infinite;}
}
@keyframes ro-sheen{0%,62%{background-position:160% 0;}100%{background-position:-60% 0;}}
.runs-on.is-orbiting.has-planet .orbit > .ro-planet{position:absolute;left:0;top:0;margin:0;z-index:2;will-change:transform;}
.runs-on.has-planet .wrap > p{margin:0;}
.runs-on .ro-ring{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.runs-on .ro-ring path{fill:none;stroke-width:1;stroke-linecap:round;}
.runs-on .ro-ring-back{z-index:1;}
.runs-on .ro-ring-front{z-index:2;}
/* a phone: the label above, the logos in rows below it, still */
.runs-on.is-orbiting.is-narrow .orbit > p{position:static;transform:none;display:inline-block;margin:0 0 6px;background:none;box-shadow:none;padding:0;}
.runs-on.is-orbiting.is-narrow .orbit{height:auto;text-align:center;}
.runs-on.is-orbiting.is-narrow ul{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;margin:10px 0 6px;}
.runs-on.is-orbiting.is-narrow.has-planet .orbit > .ro-planet{position:relative;width:44px;height:56px;margin:12px auto 4px;transform:none;}
.runs-on.is-orbiting.is-narrow .ro-ring{display:none;}
.runs-on.is-orbiting.is-narrow li{position:static;font-size:15.5px;}

/* ---------- sections ---------- */
.section{padding:88px 0;}
.section.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section-head{max-width:680px;margin:0 auto 48px;text-align:center;}
.section-head :is(h1,h2){margin:0;font-size:clamp(30px, 4.4vw, 46px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;}
.section-head p{margin-top:14px;color:var(--text-2);font-size:17.5px;text-wrap:balance;}
.eyebrow{display:block;margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);}
.section-head p.eyebrow{margin:0 0 12px;font-size:12.5px;color:var(--accent-text);}

/* how it works: three steps */
.steps{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:20px;}
.steps li{position:relative;padding:26px 24px 24px;border-radius:18px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.steps li:not(:last-child)::after{content:"";position:absolute;top:42px;right:-21px;width:22px;height:2px;background:var(--border-strong);}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:18px;border-radius:10px;background:var(--grad);color:var(--on-grad,#fff);font-weight:800;}
.steps h3{font-size:18.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.015em;}
.steps p{color:var(--text-2);font-size:14.5px;}

/* features: a bento grid, each tile with a small picture of the thing itself */
.bento{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;}
.tile{display:flex;flex-direction:column;padding:18px 18px 22px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;}
.tile.wide{grid-column:span 2;}
.tile h3{font-size:17px;font-weight:700;letter-spacing:-.015em;margin:0 4px 6px;}
.tile p{margin:0 4px;color:var(--text-2);font-size:14.5px;}
.tile-art{position:relative;display:flex;align-items:center;justify-content:center;height:156px;margin-bottom:20px;border-radius:14px;background:var(--surface);border:1px solid var(--border);overflow:hidden;}
.art-live{flex-direction:column;align-items:stretch;justify-content:center;gap:16px;padding:12px 28px 0;}
.art-line{display:flex;align-items:center;height:12px;}
.art-text{display:inline-block;height:9px;border-radius:5px;background:var(--surface-3);}
.art-line .caret{height:18px;}
.art-scan::before{content:"";position:absolute;width:150px;height:136px;left:50%;top:50%;transform:translate(-50%,-50%);
  background:linear-gradient(var(--accent),var(--accent)) left top/22px 3px,linear-gradient(var(--accent),var(--accent)) left top/3px 22px,
    linear-gradient(var(--accent),var(--accent)) right top/22px 3px,linear-gradient(var(--accent),var(--accent)) right top/3px 22px,
    linear-gradient(var(--accent),var(--accent)) left bottom/22px 3px,linear-gradient(var(--accent),var(--accent)) left bottom/3px 22px,
    linear-gradient(var(--accent),var(--accent)) right bottom/22px 3px,linear-gradient(var(--accent),var(--accent)) right bottom/3px 22px;
  background-repeat:no-repeat;}
.scan-page{display:flex;flex-direction:column;gap:9px;width:94px;height:112px;padding:16px 14px;border-radius:4px;background:#fff;box-shadow:var(--shadow-md);transform:rotate(-5deg);}
.scan-page i{display:block;height:5px;width:100%;border-radius:3px;background:#dcd7e4;}
.scan-page i:first-child{height:8px;width:62%;background:#b9b1c6;}
.art-voice .mic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent),0 0 0 16px color-mix(in srgb, var(--accent) 7%, transparent);}
.art-voice .mic .icon{width:24px;height:24px;}
.art-voice .wave{display:flex;align-items:center;gap:4px;height:40px;margin-left:26px;}
.art-voice .wave i{display:block;width:4px;height:12px;border-radius:2px;background:var(--accent-text);opacity:.85;}
.art-check{flex-direction:column;align-items:flex-start;gap:12px;padding:0 26px;font-size:14px;}
.art-check > div{display:flex;align-items:center;gap:10px;}
.art-check .box{flex:none;width:18px;height:18px;border-radius:5px;border:2px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;}
.art-check .done{color:var(--text-3);}
.art-check .done .box{background:var(--accent);border-color:var(--accent);}
.art-check .box .icon{width:12px;height:12px;stroke-width:3.5;color:var(--on-accent);}
.art-files{gap:10px;flex-wrap:wrap;padding:0 16px;}
.art-files .photo{width:84px;height:62px;border-radius:9px;background:linear-gradient(160deg,color-mix(in srgb, var(--grad-a) 45%, #fff) 0%,var(--grad-a) 35%,var(--grad-b) 70%,var(--grad-c) 100%);box-shadow:var(--shadow-sm);}
.art-files .video{display:flex;align-items:center;justify-content:center;width:84px;height:62px;border-radius:9px;background:#15111c;color:#fff;box-shadow:var(--shadow-sm);}
.art-files .video .icon{width:20px;height:20px;fill:#fff;stroke:none;}
.art-files .file{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--text-2);}
.art-files .file .icon{width:14px;height:14px;}
.art-versions{flex-direction:column;align-items:flex-start;gap:14px;padding:0 30px;}
.art-versions::before{content:"";position:absolute;left:34px;top:50%;height:62px;transform:translateY(-50%);width:2px;background:var(--border-strong);}
.art-versions > div{position:relative;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--text-2);}
.art-versions i{width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);}
.art-versions > div:first-child{color:var(--text);font-weight:600;}
.art-versions > div:first-child i{background:var(--accent);}
/* the whiteboard: a page with its dot grid, a few strokes in the board's own colors, and someone's pointer */
.art-board{background:var(--surface);}
.art-board .board-sheet{width:min(256px, 90%);height:auto;border-radius:10px;background:#fff radial-gradient(circle, #dcd7e4 1px, transparent 1.3px) 0 0/12px 12px;box-shadow:var(--shadow-md);overflow:visible;}
.art-board path{fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;}
.art-board path.hl{stroke:#ffc23d;stroke-width:11;stroke-opacity:.5;}
.art-board .who path{fill:#2f6bff;stroke:#fff;stroke-width:1.2;stroke-linejoin:round;}
.art-board .who text{font:700 8px/1 var(--font, system-ui, sans-serif);fill:#fff;}
@media (prefers-reduced-motion: no-preference){
  .art-board .board-sheet > path{stroke-dasharray:1;stroke-dashoffset:1;animation:art-draw 7s cubic-bezier(.45,0,.25,1) var(--d) infinite both;}
  .art-board .who{animation:art-who 7s ease-in-out infinite;}
}
@keyframes art-draw{0%{stroke-dashoffset:1;opacity:0;}.5%{opacity:1;}11%,84%{stroke-dashoffset:0;opacity:1;}94%,100%{stroke-dashoffset:0;opacity:0;}}
@keyframes art-who{0%,100%{transform:translate(118px,68px);opacity:0;}8%{opacity:1;}36%{transform:translate(180px,79px);}88%{transform:translate(180px,79px);opacity:1;}96%{opacity:0;}}
/* who's talking (the walkie-talkie): a chip in the corner, their color and their name */
.talk-who{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);font-size:12px;font-weight:600;color:var(--text-2);}
.talk-who i{width:8px;height:8px;border-radius:50%;}
@media (prefers-reduced-motion: no-preference){ .talk-who i{animation:talk-live 1.4s ease-in-out infinite;} }
@keyframes talk-live{0%,100%{opacity:1;}50%{opacity:.35;}}
/* sharing a screen: theirs, small, and who you're watching */
.art-screen{flex-direction:column;gap:12px;}
.art-screen .win{display:flex;flex-direction:column;justify-content:center;gap:8px;width:min(180px, 70%);height:88px;padding:0 16px;border-radius:10px;background:#15111c;box-shadow:var(--shadow-md);
  outline:2px solid color-mix(in srgb, #1971c2 70%, transparent);outline-offset:3px;}
.art-screen .win i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.2);}
:root[data-theme="dark"] .art-screen .win{background:#2b2338;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), var(--shadow-md);}   /* (lifted off the dark tile, not lost in it) */
.art-screen .win i.hl{background:linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));opacity:.9;}
.art-screen .who{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-2);}
.art-screen .who span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:9.5px;font-weight:700;box-shadow:0 0 0 2px var(--surface), 0 0 0 4px #1971c2;}
/* the wall: groups and what's in them */
.art-tags{flex-direction:column;align-items:stretch;justify-content:center;gap:7px;padding:0 26px;}
.art-tags > div{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--text-2);}
.art-tags .tg b{color:var(--text);font-weight:700;}
.art-tags .tg b::first-letter{color:var(--accent-text);}
.art-tags .tg span{font-size:11.5px;color:var(--text-3);}
.art-tags .sub{margin-left:14px;padding-left:10px;border-left:2px solid color-mix(in srgb, var(--accent) 28%, transparent);}
.art-tags .z{font-weight:600;color:var(--text);}
.art-tags .z.sub{margin-left:28px;}
.art-share{gap:26px;}
.art-share .qr{display:grid;grid-template-columns:repeat(5, 14px);gap:3px;padding:10px;border-radius:10px;background:#fff;box-shadow:var(--shadow-md);}
.art-share .qr i{width:14px;height:14px;border-radius:3px;background:#ebe8f0;}
.art-share .qr i.on{background:#15111c;}
.share-opts{display:flex;flex-direction:column;gap:8px;}
.share-opts b{padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);font-size:13px;font-weight:600;}
.share-opts b.on{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent-text);}
@media (prefers-reduced-motion: no-preference){
  .art-scan::after{content:"";position:absolute;left:calc(50% - 75px);width:150px;height:2px;top:calc(50% - 68px);background:var(--accent);
    box-shadow:0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent);animation:art-sweep 2.6s ease-in-out infinite;}
  .art-voice .wave i{height:34px;animation:art-wave 1.15s ease-in-out infinite;animation-delay:calc(var(--i) * -.17s);}
}
@keyframes art-sweep{0%,100%{transform:translateY(0);opacity:0;}10%,90%{opacity:1;}50%{transform:translateY(134px);}}
@keyframes art-wave{0%,100%{transform:scaleY(.235);}50%{transform:none;}}
.extras{list-style:none;margin:32px auto 0;padding:0;max-width:900px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;}
.extras li{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-size:14.5px;font-weight:500;}
.extras .icon{width:15px;height:15px;color:var(--ok);}

/* who it's for */
.audiences{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:36px;margin:0 auto;}
.audience .ficon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--grad);color:var(--on-grad,#fff);margin-bottom:16px;}
.audience .ficon .icon{width:20px;height:20px;}
.audience h3{font-size:17.5px;font-weight:700;margin-bottom:6px;letter-spacing:-.015em;}
.audience p{color:var(--text-2);font-size:15px;}

/* privacy */
.trust{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:22px;margin:0 auto;}
.trust-item{display:flex;gap:12px;align-items:flex-start;}
.trust-item > .icon{flex:none;width:22px;height:22px;margin-top:2px;color:var(--accent-text);}
.trust-item h3{font-size:15.5px;font-weight:700;margin-bottom:4px;}
.trust-item p{color:var(--text-2);font-size:14px;}
.trust-more{margin-top:30px;text-align:center;font-size:14.5px;}

.log-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.01em;background:var(--surface-3);color:var(--text-2);}
.log-tag.tag-new{background:var(--accent-subtle);color:var(--accent-text);}
.log-tag.tag-improved{background:var(--ok-bg);color:var(--ok);}
.log-tag.tag-fixed{background:var(--warn-bg);color:var(--warn);}

/* /changelog */
.changelog .section-head{margin-bottom:24px;}
.log-subscribe{margin-top:16px!important;font-size:14.5px!important;}
.log-subscribe a{display:inline-flex;align-items:center;gap:7px;font-weight:600;}
.log-subscribe .icon{width:16px;height:16px;}
.log-month{max-width:840px;margin:0 auto;}
.log-month-label{margin:36px 0 4px;padding-left:134px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);}
.log{list-style:none;margin:0;padding:0;}
.log-entry{display:grid;grid-template-columns:110px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--border);scroll-margin-top:84px;}
.log-when time{position:sticky;top:84px;font-size:14px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;}
.log-what h4{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.3;}
.log-what h4 a{color:var(--text);}
.log-entry:target .log-what h4 a{color:var(--accent-text);}
.log-what p{color:var(--text-2);font-size:15.5px;line-height:1.7;max-width:62ch;}
.log-what p + p{margin-top:10px;}

/* the founder's note */
.founder{margin:0 auto;padding:34px 38px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.section.alt .founder{background:var(--surface-2);}
.founder .eyebrow{margin-bottom:8px;}
.founder h2{font-size:26px;font-weight:800;letter-spacing:-.025em;margin-bottom:16px;}
.founder blockquote{margin:0;}
.founder blockquote p{max-width:68ch;font-size:16.5px;line-height:1.75;color:var(--text);}   /* the card as wide as the page's column, the words a comfortable line */
.founder blockquote p + p{margin-top:12px;}
.founder figcaption{display:flex;align-items:center;gap:12px;margin-top:22px;}
.founder-mark{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--grad);color:var(--on-grad,#fff);font-size:17px;font-weight:800;}
.founder figcaption b{display:block;font-size:15.5px;color:var(--text);}
.founder figcaption b + span{font-size:13.5px;color:var(--text-3);}

/* the last word: a dark panel, the brand glow behind it */
.cta-band{padding:88px 0 96px;}
.cta-panel{position:relative;isolation:isolate;overflow:hidden;padding:72px 28px;border-radius:28px;text-align:center;background:#0e0b14;color:#f5f3f8;border:1px solid rgba(255,255,255,.08);}
.cta-panel::before{content:"";position:absolute;inset:-60% -10% auto;height:140%;z-index:-1;pointer-events:none;opacity:.6;background:
  radial-gradient(closest-side, rgba(255,122,26,.55), transparent 80%) 15% 70%/45% 60% no-repeat,
  radial-gradient(closest-side, rgba(240,36,94,.45), transparent 70%) 50% 85%/45% 60% no-repeat,
  radial-gradient(closest-side, color-mix(in srgb, var(--accent) 65%, transparent), transparent 70%) 85% 70%/45% 60% no-repeat;}
.cta-panel h2{font-size:clamp(30px, 4.6vw, 50px);font-weight:800;letter-spacing:-.04em;line-height:1.06;margin-bottom:14px;text-wrap:balance;}
.cta-panel p{margin-bottom:30px;color:#cfc8db;font-size:17.5px;}
.cta-panel .quick-new{max-width:480px;margin:0 auto;}

@media (max-width: 900px){
  .hero{padding:56px 0 64px;}
  .bento{grid-template-columns:repeat(2, minmax(0,1fr));}
  .tile.span-md{grid-column:span 2;}                     /* two across: the last tile fills its row */
  .steps{grid-template-columns:1fr;max-width:560px;}
  .steps li:not(:last-child)::after{top:auto;bottom:-21px;right:auto;left:40px;width:2px;height:22px;}
  .trust{grid-template-columns:repeat(2, minmax(0,1fr));}
  .audiences{grid-template-columns:1fr;max-width:560px;gap:28px;}
}
@media (max-width: 640px){
  .hero{padding:40px 0 52px;}
  .hero .lede{font-size:17px;}
  .hero .ctas{width:100%;}
  .hero .ctas .btn{flex:1;}
  .hero .fine > span:nth-child(3){display:none;}
  .demo-wrap{margin-top:40px;padding:0 12px;}
  .demo-panes{grid-template-columns:1fr;min-height:0;}
  .demo-src{display:none;}
  .demo-live{display:none;}
  .demo-view{padding:18px 20px 22px;}
  .runs-on ul{gap:6px 26px;}
  .runs-on li{font-size:16px;}
  .runs-on.is-orbiting li{font-size:15px;}
  .section{padding:60px 0;}
  .bento,.plans{grid-template-columns:1fr;}
  .tile.wide,.tile.span-md{grid-column:auto;}
  .tile-art{height:128px;}
  .trust{grid-template-columns:1fr;}
  .log-month-label{padding-left:0;}
  .log-entry{grid-template-columns:1fr;gap:4px;padding:20px 0;}
  .log-when time{position:static;}
  .founder{padding:24px 20px;}
  .founder blockquote p{font-size:15.5px;}
  .cta-band{padding:56px 0 64px;}
  .cta-panel{padding:48px 20px;border-radius:20px;}
}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:20px;margin:0 auto;}
.plan{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:16px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.plan.featured{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;box-shadow:var(--shadow-md);}
.plan h3{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px;}
.plan .price{margin:14px 0 4px;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.plan .price small{font-size:16px;font-weight:600;color:var(--text-3);letter-spacing:0;}
.plan .sub{color:var(--text-2);font-size:14px;min-height:44px;}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;}
.plan li .icon{color:var(--ok);margin-top:3px;}
.pwyw{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.pwyw-amount{display:flex;align-items:center;gap:8px;}
.pwyw-amount .cur{font-size:28px;font-weight:800;color:var(--text-2);}
.pwyw-amount input{width:120px;height:52px;font-size:28px!important;font-weight:800;text-align:left;}
.pwyw-amount .per{color:var(--text-3);font-weight:600;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:600 13px var(--font);cursor:pointer;}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent-text);}
input[type=range]{width:100%;accent-color:var(--accent);}
/* Share to Zuno (pages.js sharePage) */
.share-link,.share-text{margin:0;font-size:16px;line-height:1.5;overflow-wrap:anywhere;}
.share-link .hint{display:block;margin-top:2px;font-size:13px;}
.share-files{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:10px;}
.share-files li{display:flex;flex-direction:column;gap:4px;min-width:0;}
.share-files img,.share-file-icon{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--border);background:var(--surface-3);}
.share-file-icon{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text-3);letter-spacing:.04em;}
.share-file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.share-files .hint{font-size:12px;}
/* still being put away on this device (site.js), or there wasn't room for it */
.share-file-state{font-size:12px;line-height:1.35;color:var(--text-3);}
.share-file-state.is-bad{color:var(--warn);}
.share-files li.is-pending :is(img,.share-file-icon){opacity:.55;animation:share-wait 1.4s ease-in-out infinite;}
.share-files li:is(.is-room,.is-failed) :is(img,.share-file-icon){opacity:.4;}
@keyframes share-wait{50%{opacity:.3;}}
@media (prefers-reduced-motion: reduce){ .share-files li.is-pending :is(img,.share-file-icon){animation:none;} }
.share-empty{margin:0;font-size:16px;}
.share-where h2{margin:0 0 14px;}
.share-where .btn.big{width:100%;}
.share-or{margin:18px 0 8px;color:var(--text-2);font-weight:600;}
.share-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.share-note{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);color:var(--text);min-height:52px;}
button.share-note{width:100%;background:none;font:inherit;text-align:left;cursor:pointer;}
button.share-note:hover{border-color:var(--accent);}
/* Account: sharing from an iPhone (pages.js iphoneShare) */
.share-key{margin:14px 0;padding:14px;border-radius:12px;background:var(--ok-bg);border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);}
.share-key label{display:block;font-weight:600;margin-bottom:8px;}
.share-key-row{display:flex;gap:8px;}
.share-key-row input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;}
.share-steps{margin:14px 0;padding-left:1.3em;display:grid;gap:8px;}
.share-steps .btn{vertical-align:middle;}
.share-key-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.share-key-actions .hint{flex-basis:100%;margin:0;}
.share-note b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.share-note:hover{border-color:var(--accent);text-decoration:none;}
.share-note .icon{width:16px;height:16px;color:var(--text-3);}

/* Admin → Plans (pages.js planSettings): features and limits per plan */
.plan-settings{width:100%;border-collapse:collapse;font-size:14px;}
.plan-settings th,.plan-settings td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;}
.plan-settings thead th{text-align:center;font-size:15px;font-weight:800;}
.plan-settings thead th small,.plan-settings tbody th small{display:block;font-size:12px;font-weight:500;color:var(--text-3);}
.plan-settings tbody th{text-align:left;font-weight:600;min-width:210px;}
.plan-settings td{text-align:center;min-width:120px;}
.plan-settings td .hint{display:block;margin-top:3px;font-size:11.5px;}
.plan-settings input[type=number],.plan-settings input[type=text]{width:100%;max-width:120px;text-align:right;font-variant-numeric:tabular-nums;}
.plan-settings input:invalid{border-color:var(--danger);}
.plan-settings td.is-changed,.ps-changed-key{background:color-mix(in srgb, var(--accent) 12%, transparent);}
.ps-changed-key{padding:0 4px;border-radius:4px;}
.ps-group th{padding-top:18px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);text-align:left;}
.ps-switch{position:relative;display:inline-block;width:44px;height:26px;cursor:pointer;}
.ps-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.ps-switch span{position:absolute;inset:0;border-radius:999px;background:var(--border-strong);transition:background-color .15s ease;}
.ps-switch span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease;}
.ps-switch input:checked + span{background:var(--accent);}
.ps-switch input:checked + span::after{transform:translateX(18px);}
.ps-switch input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px;}
.ps-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}

/* Account → Your color (pages.js colourPicker, site.js): big named swatches, easy to hit and to read */
.swatches{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:10px;max-width:640px;margin:4px 0 16px;padding:0;border:0;}   /* nine colors and your own: two rows of five */
.swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;border-radius:14px;border:2px solid transparent;cursor:pointer;
  text-align:center;transition:background-color .15s ease,border-color .15s ease;}
.swatch:hover{background:var(--surface-3);}
.swatch input{position:absolute;opacity:0;width:1px;height:1px;}
.swatch-dot{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);color:#fff;}
.swatch-dot .icon{width:24px;height:24px;stroke-width:3;opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .2s ease;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}
.swatch-own .swatch-dot{background:conic-gradient(from 0deg,#e5484d,#f5a623,#f5d90a,#30a46c,#0b7f86,#1d63ed,#8e4ec6,#d6409f,#e5484d);}
.swatch-own .swatch-dot[data-picked]{background:var(--c);}
.swatch-name{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.2;}
.swatch input:checked ~ .swatch-dot .icon{opacity:1;transform:none;}
.swatch:has(input:checked){border-color:var(--accent);background:var(--surface-2);}
.swatch input:checked ~ .swatch-dot{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--c);}
.swatch input:focus-visible ~ .swatch-dot{outline:3px solid var(--focus);outline-offset:4px;}
.colour-own{display:flex;flex-direction:column;gap:12px;margin:0 0 16px;padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.colour-own[hidden]{display:none;}
.colour-wheel{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600;cursor:pointer;}
.colour-wheel input{width:64px;height:48px;padding:0;border:1px solid var(--border-strong);border-radius:10px;background:none;cursor:pointer;}
.colour-code summary{cursor:pointer;font-size:14px;color:var(--accent-text);font-weight:600;}
.colour-code label{display:block;margin:10px 0 4px;font-size:13.5px;font-weight:600;}
.colour-code input{width:12ch;font-family:var(--mono);font-size:16px;text-transform:uppercase;letter-spacing:.04em;}
.colour-code input:invalid:not(:placeholder-shown){border-color:var(--danger);}
.colour-preview{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0 0 16px;padding:14px 16px;border-radius:12px;border:1px dashed var(--border-strong);}
.colour-preview .btn{pointer-events:none;}
.colour-link{color:var(--accent-text);font-weight:600;text-decoration:underline;}
.colour-chip{padding:4px 10px;border-radius:999px;background:var(--accent-subtle);color:var(--text);font-size:13px;font-weight:600;}
.colour-actions{display:flex;align-items:center;gap:12px;}
.colour-form.is-live [data-colour-save]{display:none;}          /* with the script, every pick is saved as it's made */
@media (max-width: 640px){ .swatches{gap:4px;} .swatch{padding:10px 2px 8px;} .swatch-dot{width:44px;height:44px;} .swatch-name{font-size:13px;} }
@media (max-width: 359px){ .swatches{grid-template-columns:repeat(4, minmax(0,1fr));} }

/* the plans: Free and the tiers, a monthly/yearly switch above them (pages.js planCards) */
.pricing{display:flex;flex-direction:column;align-items:center;}
.pricing > .plans,.pricing > .picks{width:100%;}
.every{display:inline-flex;align-items:center;gap:2px;padding:4px;margin:0 0 26px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);}
.every input{position:absolute;opacity:0;width:1px;height:1px;}
.every label{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--text-2);cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;}
.every input:checked + label{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}
.every input:focus-visible + label{outline:2px solid var(--accent-text);outline-offset:2px;}
.every-save{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:700;line-height:1;letter-spacing:.01em;}
/* the pill sits in the label's round end the way one circle sits in another: as far from its right edge as from its top and bottom (38 - 26) / 2 */
.every label:has(.every-save){padding-right:6px;gap:10px;}
/* which prices and buttons show: CSS where :has works, site.js's classes where it doesn't */
.pricing:has(.every-year:checked) .when-month,.pricing.is-yearly .when-month{display:none!important;}
.pricing:not(:has(.every-year:checked)) .when-year,.pricing.is-monthly .when-year{display:none!important;}
.plans.tiers{grid-template-columns:repeat(4, minmax(0,1fr));max-width:1180px;gap:16px;}
.plans.tiers .plan{padding:24px 22px;}
.plans.tiers .plan h3{font-size:18px;flex-wrap:wrap;}
.tier-space{margin:14px 0 2px;font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.tier-free .tier-space{background:none;color:var(--text-2);}
.plans.tiers .price{margin:10px 0 2px;font-size:30px;}
.plans.tiers .price small{font-size:14px;}
.plans.tiers .sub{min-height:0;font-size:13px;}
.tier-pitch{margin-top:10px;font-size:13.5px;color:var(--text-2);font-style:italic;}
.plans.tiers ul{margin:16px 0 20px;gap:9px;}
.plans.tiers li{font-size:13.5px;line-height:1.45;}
.plans.tiers li b{color:var(--text);}
.plan.is-yours{box-shadow:0 0 0 2px var(--accent), var(--shadow-sm);}
.btn.is-current{background:var(--surface-3);border-color:var(--border);color:var(--text-2);cursor:default;}
.btn.is-current:hover{background:var(--surface-3);}
.plans-terms{max-width:900px;margin:18px auto 0;text-align:center;}
.compare-link{text-align:center;margin-top:18px;font-weight:600;}
.plan-table-h{text-align:center;margin:56px 0 16px;font-size:22px;font-weight:800;letter-spacing:-.02em;}
.plan-table-wrap{margin:0 auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);}
.plan-table{width:100%;border-collapse:collapse;font-size:14px;}
.plan-table th,.plan-table td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap;}
.plan-table tbody th{text-align:left;font-weight:600;color:var(--text-2);white-space:normal;min-width:180px;}
.plan-table thead th{font-size:15px;font-weight:800;}
.plan-table tbody tr:last-child th,.plan-table tbody tr:last-child td{border-bottom:0;}
.plan-table tbody tr:nth-child(even){background:var(--surface-2);}
.plan-table td .icon{width:17px;height:17px;color:var(--ok);}
.plan-table .hint{display:block;font-size:12px;}
/* Account: changing plan, the tiers small and side by side */
.plan-change{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);}
.plan-change h3{font-size:15px;margin-bottom:4px;}
.plan-change > .hint{margin-bottom:14px;}
.picker{align-items:stretch;}
.picker .every{align-self:flex-start;margin-bottom:14px;}
.picks{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;}
.pick{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);}
.pick b{font-size:15px;}
.pick-space{font-size:20px;font-weight:800;letter-spacing:-.02em;}
.pick-price{font-size:14px;font-weight:700;margin-bottom:8px;}
.pick-price small{font-weight:500;color:var(--text-3);}
.pick form{margin:0;}
.pick.is-yours{border-color:var(--accent);}
.pick.is-wanted{box-shadow:0 0 0 2px var(--accent);background:var(--surface);}
/* /upgrade */
.upgrade-confirm .confirm-price{font-size:15px;margin:6px 0 14px;}
.upgrade-confirm .confirm-price b{font-size:26px;letter-spacing:-.02em;color:var(--text);}
.upgrade-confirm .join-facts{margin-bottom:18px;}
.confirm-other{margin-top:10px;text-align:center;}
/* /compare */
.compare-checked{display:block;margin-top:14px!important;font-size:13.5px!important;color:var(--ok)!important;font-weight:600;}
.compare-checked{text-wrap:balance;}
.compare-checked .icon{display:inline-block;width:15px;height:15px;margin-right:6px;vertical-align:-2px;}   /* inline, so it stays beside the first word when the line wraps */
.compare-hero{display:flex;align-items:center;gap:28px;max-width:1000px;margin:0 auto 56px;padding:28px 30px;border-radius:20px;border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;box-shadow:var(--shadow-md);}
.compare-hero h3{font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0 0 10px;}
.compare-hero p:not(.eyebrow){color:var(--text-2);font-size:15px;}
.compare-hero .btn{flex:none;}
.compare-h{max-width:1000px;margin:48px auto 8px;font-size:22px;font-weight:800;letter-spacing:-.02em;}
.compare-sub{max-width:1000px;margin:0 auto 16px;color:var(--text-2);}
.compare-table{max-width:1000px;margin:0 auto 18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.compare-table caption{text-align:left;font-weight:700;font-size:14px;padding:0 0 8px;color:var(--text-2);}
.compare-table th[scope="row"]{font-weight:600;font-size:14px;text-transform:none;letter-spacing:0;color:var(--text);}
.compare-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.compare-table tr.is-zuno{background:color-mix(in srgb, var(--accent) 7%, var(--surface));}
.compare-table tr.is-zuno th b{color:var(--accent-text);}
.compare .table-wrap{max-width:1000px;margin:0 auto;}
.compare-cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));gap:14px;max-width:1000px;margin:0 auto;}
.compare-card{padding:20px;border-radius:14px;border:1px solid var(--border);background:var(--surface);scroll-margin-top:84px;}
.compare-card.is-zuno{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;}
.compare-card h4{font-size:17px;margin:0 0 8px;}
.compare-card > p{font-size:14px;color:var(--text-2);margin-bottom:8px;}
.compare-card:target{box-shadow:0 0 0 2px var(--accent);}
.compare-prices{list-style:none;margin:10px 0;padding:0;border-top:1px solid var(--border);}
.compare-prices li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.compare-prices b{font-variant-numeric:tabular-nums;}
.compare-prices small{font-weight:500;color:var(--text-3);}
.compare-card .hint a{display:inline-flex;align-items:center;gap:4px;}
.compare-card .hint .icon{width:13px;height:13px;}
.compare .pricing{margin-top:8px;}
.compare-foot{max-width:900px;margin:22px auto 0;text-align:center;}
@media (max-width: 1100px){ .plans.tiers{grid-template-columns:repeat(2, minmax(0,1fr));max-width:760px;} }
@media (max-width: 640px){
  .plans,.plans.tiers{grid-template-columns:1fr;}   /* here, after the base .plans rule, so it wins (the Team cards) */
  .every label{padding:0 14px;font-size:14px;}
  .picks{grid-template-columns:1fr;}
  .compare-hero{flex-direction:column;align-items:flex-start;padding:22px 20px;}
  .compare-hero h3{font-size:20px;}
  .plan-table th,.plan-table td{padding:9px 10px;font-size:13px;}
  /* the comparison tables scroll sideways rather than squeeze the notes into a column of single words */
  .compare-table th[scope="row"]{min-width:118px;}
  .compare-table td:not(.hint){white-space:nowrap;}
  .compare-table td.hint{min-width:200px;}
}

/* questions: wide on a computer, the answers' lines kept to a comfortable length; an answer slides open
   (its sleeve's one row grows from nothing to its height: no measuring, so the page's zoom can't upset it) and the + turns to a − */
.faq{margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq details{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:0 22px;transition:box-shadow .3s ease;}
.faq summary{position:relative;cursor:pointer;padding:18px 36px 18px 0;font-weight:700;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:2px;margin-top:-1px;border-radius:1px;background:var(--text-3);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), background-color .2s ease;}
.faq summary::after{transform:rotate(90deg);}                  /* the + 's upright, which lies down to make the − */
.faq details.is-open summary::after{transform:rotate(0deg);}
.faq details.is-open summary::before,.faq details.is-open summary::after{background:var(--accent-text);}
.faq summary:hover::before,.faq summary:hover::after{background:var(--text);}
.faq .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .36s cubic-bezier(.2,.8,.2,1);}
.faq .faq-a > div{min-height:0;overflow:hidden;}
.faq .faq-a p{max-width:75ch;padding:0 0 18px;color:var(--text-2);opacity:0;transform:translateY(-6px);transition:opacity .28s ease .04s, transform .36s cubic-bezier(.2,.8,.2,1);}
.faq details.is-open .faq-a{grid-template-rows:1fr;}
.faq details.is-open .faq-a p{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){ .faq .faq-a,.faq .faq-a p,.faq summary::before,.faq summary::after{transition:none;} }
/* "What you're buying": folded away under the plans, there for whoever wants it */
.about{margin:36px auto 0;border:1px solid var(--border);border-radius:16px;background:var(--surface);scroll-margin-top:80px;}
.about summary{display:flex;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;list-style:none;border-radius:16px;}
.about summary::-webkit-details-marker{display:none;}
.about summary:hover .about-toggle{background:var(--surface-3);color:var(--text);}
.about-title{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.about-title b{font-size:15.5px;}
.about-title span{color:var(--text-3);font-size:13.5px;}
.about-toggle{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--border);
  color:var(--text-2);font-size:13px;font-weight:600;transition:background-color .12s ease,color .12s ease;}
.about-toggle::before{content:"Show";}
.about[open] .about-toggle::before{content:"Hide";}
.about-body{padding:4px 20px 22px;border-top:1px solid var(--border);}
.about-blurb{margin:18px 0 20px;font-size:16px;line-height:1.65;color:var(--text);max-width:70ch;}
.about .procon{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px;}
.about .pc{padding:16px 18px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.about .pc h3{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;}
.about .pc.pro h3{color:var(--ok);}
.about .pc.con h3{color:var(--text-2);}
.about .pc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.about .pc li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--text-2);}
.about .pc li b{color:var(--text);}
.about .pc li .icon{flex:none;width:16px;height:16px;margin-top:3px;}
.about .pc.pro li .icon{color:var(--ok);}
.about .pc.con li .icon{color:var(--text-3);}
.about .tech-head{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);margin:24px 0 10px;}
.about .tech{margin:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.about .tech div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:11px 16px;font-size:14px;line-height:1.55;}
.about .tech div + div{border-top:1px solid var(--border);}
.about .tech div:nth-child(odd){background:var(--surface-2);}
.about .tech dt{font-weight:700;color:var(--text);}
.about .tech dd{margin:0;color:var(--text-2);}
.about-foot{margin-top:16px;color:var(--text-3);font-size:13.5px;}
@media (max-width: 720px){
  .about .procon{grid-template-columns:1fr;}
  .about .tech div{grid-template-columns:1fr;gap:2px;}
  .about summary{padding:14px 16px;}
  .about-body{padding:4px 16px 18px;}
}

/* one line at every width: the type and gaps ease down on small phones instead of wrapping */
footer.site{border-top:1px solid var(--border);padding:28px 0 calc(28px + env(safe-area-inset-bottom));color:var(--text-3);font-size:clamp(11.5px, 3.3vw, 13.5px);}
footer.site .wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(10px, 3vw, 24px);white-space:nowrap;}
footer.site nav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(9px, 2.8vw, 18px);margin-left:auto;min-width:0;}
footer.site a{color:var(--text-2);}
@media (max-width: 359px){ footer.site .foot-year{display:none;} footer.site .wrap{gap:8px;} footer.site nav{gap:8px;} }
@media (max-width: 299px){ footer.site{font-size:11px;} footer.site .wrap{padding:0 12px;gap:7px;} footer.site nav{gap:7px;} }
@media (max-width: 640px){ #installApp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} footer.site .foot-wide{display:none;} }
.footer-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--text-2);font:inherit;cursor:pointer;}
.footer-link .icon{width:15px;height:15px;}
.footer-link:hover{color:var(--accent-text);text-decoration:underline;}
.footer-link[hidden]{display:none;}

/* "Install Zuno": the how-to for browsers that can't install from a button */
.install-help{width:min(400px, calc(100vw / var(--z, 1) - 32px));padding:26px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg);}
.install-help::backdrop{background:rgba(14,11,20,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.install-help img{display:block;width:56px;height:56px;border-radius:13px;}
.install-help h2{margin:14px 0 10px;font-size:20px;font-weight:800;}
.install-help ol{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--text-2);}
.install-help li b{color:var(--text);}
.install-help .glyph{display:inline-flex;vertical-align:-3px;color:var(--accent-text);}
.install-help .glyph svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.install-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}

/* ============================================================
   APP PAGES (dashboard, account, admin)
============================================================ */
.page{padding:32px 0 64px;}
.page-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:24px;}
.page-head h1{font-size:28px;font-weight:800;}
.page-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.stack{display:flex;flex-direction:column;gap:16px;}
.grid-2{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;align-items:start;}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr;} }
.panel{padding:22px;}
.panel h2{font-size:17px;font-weight:800;margin-bottom:4px;}
.panel .desc{color:var(--text-2);font-size:14px;margin-bottom:16px;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px;}
.kv dt{color:var(--text-3);} .kv dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere;}

.new-note{display:flex;gap:10px;}
.new-note input{flex:1;}
@media (max-width: 520px){ .new-note:not(.quick-new){flex-direction:column;} .new-note:not(.quick-new) input{flex:none;} }
/* Start a note: the name and a +, always on one line (phones too). The +
   is a square as tall as the box beside it; it says "New note" to screen
   readers and on hover. */
.quick-new{align-items:stretch;}
.quick-new input{min-width:0;}
.quick-new .plus-btn{flex:none;width:var(--control-h);height:auto;min-height:var(--control-h);padding:0;justify-content:center;}
.quick-new .plus-btn .icon{width:22px;height:22px;stroke-width:2.4;}
.quick-new.big input{height:56px;padding:0 18px;font-size:17px;border-radius:12px;}
.quick-new.big .plus-btn{width:56px;border-radius:12px;}
.quick-new.big .plus-btn .icon{width:26px;height:26px;}
@media (max-width: 520px) and (orientation: portrait){
  .create-note.card input{height:52px;padding:0 16px;font-size:17px!important;border-radius:12px;}
  .create-note.card .plus-btn{width:52px;border-radius:12px;}
}
.hero .quick-new{margin-top:30px;max-width:460px;}
.cta-band .quick-new{max-width:460px;margin:0 auto;}

/* ---------- the New note button's glow ----------
   Invisible at rest. On hover or keyboard focus, the faintest wash of the
   brand gradient appears behind the button: felt more than seen. The
   button stays solid purple so its label keeps full contrast. Painted in
   the form's own stacking context (isolation) so it sits behind the
   button, above the card; the drift only runs while it's showing. */
.create-note{isolation:isolate;}
/* lifted with top, not transform: a transform would give the button its own
   stacking context and pull the halo in front of its face */
.btn.glow{position:relative;top:0;transition:background-color .12s ease,border-color .12s ease,top .2s ease;}
.btn.glow::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,var(--grad-a),var(--grad-b),var(--grad-c),var(--grad-b),var(--grad-a));background-size:300% 100%;
  filter:blur(12px);opacity:0;transition:opacity .4s ease;
  animation:zuno-glow 9s ease-in-out infinite alternate;animation-play-state:paused;
}
@media (hover: hover){
  .btn.glow:hover{top:-1px;}
  .btn.glow:hover::before{opacity:.16;animation-play-state:running;}
  :root[data-theme="dark"] .btn.glow:hover::before{opacity:.22;}
}
.btn.glow:focus-visible::before{opacity:.16;animation-play-state:running;}
.btn.glow:active{top:0;transform:none;}
.btn.glow[disabled]::before{display:none;}
@keyframes zuno-glow{from{background-position:0% 50%;}to{background-position:100% 50%;}}
@media (prefers-reduced-motion: reduce){
  .btn.glow::before{animation:none;}
  .btn.glow:hover{top:0;}
}
@media (forced-colors: active){ .btn.glow::before{display:none;} }

.notes{list-style:none;margin:0;padding:0;}
.note-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 20px;border-top:1px solid var(--border);}
/* file space: a hairline along the row's bottom edge, its share of the note's limit */
.note-space{position:absolute;left:0;right:0;bottom:0;height:2px;background:color-mix(in srgb, var(--text) 5%, transparent);pointer-events:none;}
.note-space > span{display:block;height:100%;background:color-mix(in srgb, var(--accent) 75%, transparent);border-radius:0 2px 2px 0;transition:width .5s cubic-bezier(.2,.8,.2,1);}
.note-space.has-files > span{min-width:2px;}          /* a few KB of 1 GB still shows a sliver */
.note-space.high > span{background:var(--warn);}
.note-space.full > span{background:var(--danger);}
.notes .note-row:last-child .note-space{border-radius:0 0 var(--radius) var(--radius);overflow:hidden;}
.note-row:first-child{border-top:none;}
.note-title{font-weight:700;font-size:15.5px;color:var(--text);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.note-title:hover{color:var(--accent-text);}
.note-title.untitled{color:var(--text-3);font-style:italic;font-weight:600;}
.note-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;color:var(--text-3);margin-top:4px;}
.note-tools{display:flex;align-items:center;gap:6px;}
.note-tools select{height:32px;font-size:13px;padding:0 8px;border-radius:8px;}
@media (pointer: coarse){ .note-tools select{height:40px;} }
/* ---------- the wall: your zunos by the hashtags in their titles (pages.js wallSection, site.js THE WALL) ---------- */
.wall{overflow:hidden;overflow:clip;}                 /* its glass headings stop at its rounded corners, top and bottom (menus open outside it, on the page); hidden where clip isn't known */
/* its height (site.js THE WALL'S HEIGHT): as tall as it needs, or yours, scrolling inside; the grip along its bottom edge
   (the same glass as its bar and headings, its own bottom corners rounded, for any browser) */
/* RESIZE GRIPS (site.js) — the wall and Recent: all of it, or as many whole lines as you like, scrolling inside and coming
   to rest on a line's top edge; a grip along the bottom edge (the same glass as the bars and headings, its own bottom corners rounded) */
:is(.wall, .history).is-sized > :is(.wall-body, .history-list){max-height:var(--list-h);overflow-y:auto;scroll-snap-type:y proximity;}
/* (at its end, a swipe or a wheel goes on to the page, as anywhere else: never stuck inside) */
.is-settling > :is(.wall-body, .history-list){transition:max-height .22s cubic-bezier(.2,.9,.3,1);}
.wall-body :is(.tag-head, .note-row),.history-row{scroll-snap-align:start;}
.size-grip{position:relative;display:block;height:18px;margin-top:-1px;border-top:1px solid var(--border);cursor:ns-resize;touch-action:none;
  background:color-mix(in srgb, var(--accent) 4%, var(--surface));border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);}
.size-grip[hidden]{display:none;}
.size-grip::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:5px;margin:-2.5px 0 0 -22px;border-radius:3px;background:var(--text-2);opacity:.6;
  transition:opacity .15s ease,width .2s ease,margin .2s ease,background-color .15s ease;}   /* (plain to see at rest, without shouting) */
.size-grip:hover::after,.size-grip:focus-visible::after,.size-grip.is-dragging::after{opacity:1;width:60px;margin-left:-30px;background:var(--accent);}
.size-grip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.is-sized:not(.is-shut) > .size-grip{box-shadow:0 -10px 14px -12px rgba(0,0,0,.35);}   /* (more above: a soft edge says so) */
.history.is-shut .history-head{padding-bottom:12px;}   /* (folded right up: just its heading, then the grip) */
:root[data-theme="dark"] .size-grip{background:color-mix(in srgb, var(--accent) 4%, rgba(255,255,255,.03));border-top-color:rgba(255,255,255,.07);}
@media (pointer: coarse){ .size-grip{height:26px;} .size-grip::after{opacity:.75;} }
@media (prefers-reduced-motion: reduce){ .size-grip::after,.is-settling > :is(.wall-body, .history-list){transition:none;} }
.wall-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--accent) 4%, var(--surface));border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;}   /* the same glass as the groups' headings (.tag-head) */
.wall-search{position:relative;flex:1 1 240px;margin:0;}
.wall-search .icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-3);pointer-events:none;}
.wall-search input{width:100%;height:38px;padding-left:34px;font-size:14.5px;}
.wall-crumbs{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:13.5px;font-weight:600;}
.wall-crumbs a{color:var(--accent-text);}
.wall-crumbs [aria-current]{color:var(--text);}
.wall-sep{color:var(--text-3);font-weight:400;}
.wall-status{flex:1 1 100%;margin:0;font-size:13px;color:var(--text-3);}
.wall-body{margin-top:-1px;}                          /* its first line sits on the bar's */
.wall-body .note-row:first-child{border-top:1px solid var(--border);}
.tag-head{display:flex;align-items:baseline;gap:10px;margin:0;padding:13px 20px 11px;border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--accent) 4%, var(--surface));font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;}
.tag-group .tag-group .tag-head{font-size:14.5px;padding-top:11px;padding-bottom:9px;}
/* dark: lighter tinted glass, not a darker band (a breath of white and your color, a faint lit top edge) */
:root[data-theme="dark"] :is(.tag-head, .wall-bar){background:color-mix(in srgb, var(--accent) 4%, rgba(255,255,255,.03));border-top-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);}   /* (kept faint: more see-through than solid; the card behind is the frosted glass, so no blur of their own: a blur inside a blur smudged as things nearby repainted, e.g. hovering a link below) */
:root[data-theme="dark"] .tag-group .tag-group .tag-head{background:color-mix(in srgb, var(--accent) 3%, rgba(255,255,255,.02));}
:root[data-theme="dark"] .wall-bar{border-bottom-color:rgba(255,255,255,.08);}
.tag-link{color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tag-group > .tag-head:hover .tag-link{color:var(--accent-text);}
.tag-hash{color:var(--accent-text);margin-right:1px;}
/* a group inside a group: in a step, along a line in your color, with a breath above and below; on the right it runs to the
   wall's edge, so every heading's and every zuno's buttons line up in one column, however deep */
.tag-group .tag-group{margin:10px 0 14px 22px;border-left:2px solid color-mix(in srgb, var(--accent) 24%, transparent);}
.tag-group.is-through{margin:0;border-left:0;}   /* the way to a group you're looking at: passed through */
/* a top-level group, folded to its heading: a click anywhere on the heading opens or closes it */
.tag-group.is-collapsed > :not(.tag-head){display:none;}
.tag-group > .tag-head{cursor:pointer;}
.tag-group .tag-group.is-collapsed{margin-bottom:10px;}   /* (folded inside a group: just its heading, a little closer to what follows) */
.tag-toggle{flex:none;align-self:center;display:inline-grid;place-items:center;width:26px;height:26px;margin:-4px 0 -4px -8px;padding:0;border:0;border-radius:7px;background:none;color:var(--text-3);cursor:pointer;}
.tag-toggle .icon{width:16px;height:16px;transition:transform .2s cubic-bezier(.2,.85,.25,1);}
.tag-toggle[aria-expanded="false"] .icon{transform:rotate(-90deg);}
.tag-toggle:hover{background:var(--surface-3);color:var(--text);}
.wall-body:not([data-focus=""]) .tag-toggle,.wall-body[data-searching] .tag-toggle{display:none;}   /* looking at one group, or searching: everything asked for shows */
@media (prefers-reduced-motion: reduce){ .tag-toggle .icon{transition:none;} }
@media (pointer: coarse){ .tag-toggle{width:34px;height:34px;margin:-8px -2px -8px -10px;} }
/* a group's own split button (pages.js groupAction): a zuno's, at its heading's far end, a little fainter, so it reads as the same thing for something bigger */
.group-act{margin:-7px 0 -7px auto;align-self:center;opacity:.55;transition:opacity .15s ease;font-size:14px;font-weight:400;letter-spacing:0;}
.tag-head:hover .group-act,.group-act:focus-within,.group-act:has([aria-expanded="true"]){opacity:.85;}
.tag-head:hover .row-act-more{opacity:1;}
@media (pointer: coarse){ .group-act{opacity:.7;} }
.tag-group.is-through > .tag-head{display:none;}
.tag-group.is-through > .tag-group{margin:0;border-left:0;}   /* the one you're looking at: flush, as the wall itself */
.wall-crumbs [aria-current]:focus{outline:none;}   /* (focused when you get there, for screen readers to say where; not a control) */
.note-snippet{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--text-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;}
.note-snippet mark,.note-title mark{background:color-mix(in srgb, var(--accent) 22%, transparent);color:inherit;border-radius:3px;padding:0 1px;}
/* a zuno that's moved group since you last looked: a moment in your color */
.note-row.is-regrouped{animation:regrouped 1.8s ease-out;}
@keyframes regrouped{from{background:color-mix(in srgb, var(--accent) 14%, transparent);}to{background:transparent;}}
/* typing a title with hashtags: where it will go */
.new-path{margin:8px 2px 0;font-size:13px;color:var(--text-3);}
.new-path b{color:var(--accent-text);font-weight:600;}
@media (max-width: 640px){
  .tag-group .tag-group{margin:8px 0 12px 12px;}
  .tag-head{padding:12px 16px 10px;}
}
@media (forced-colors: active){ .tag-group .tag-group{border-left-color:CanvasText;} .note-row.is-regrouped{animation:none;} }
.empty{padding:44px 20px;text-align:center;color:var(--text-2);}
.empty .mark{width:auto;height:44px;margin:0 auto 14px;}
@media (max-width: 640px){
  .note-row{grid-template-columns:1fr;padding:14px 16px;}
  .note-tools{justify-content:flex-start;min-width:0;}
  /* a phone: the sharing menu gives way (its words end in …), so its buttons always fit the row */
  .note-tools form[data-autosubmit]{flex:1 1 auto;min-width:0;}
  .note-tools select{width:100%;min-width:0;text-overflow:ellipsis;}
}
.usage{display:flex;flex-direction:column;gap:12px;}
.usage-row{display:flex;flex-direction:column;gap:6px;font-size:13.5px;}
.usage-row .top{display:flex;justify-content:space-between;gap:8px;}
.usage-row .top span:last-child{color:var(--text-3);}
.upgrade-card{padding:22px;border-radius:16px;border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;}
.upgrade-card h2{font-size:18px;font-weight:800;margin-bottom:6px;}
.upgrade-card p{color:var(--text-2);font-size:14px;margin-bottom:14px;}
/* the admin's People: each person's color (or Zuno purple), a dot before their name */
.person-name{display:inline-flex;align-items:center;gap:9px;}
.person-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px color-mix(in srgb, var(--c) 45%, transparent);}
/* Delete account: plain ink, no alarm colors (black in light, white in dark), its button too */
.danger-zone h2{color:var(--text);}
.danger-zone .btn.danger,:root[data-theme="dark"] .danger-zone .btn.danger{background:var(--text);border-color:var(--text);color:var(--surface);}
.danger-zone .btn.danger:hover{background:color-mix(in srgb, var(--text) 82%, var(--surface));border-color:color-mix(in srgb, var(--text) 82%, var(--surface));}

.history{padding:14px 0 0;}
.history:not(:has(> .size-grip:not([hidden]))){padding-bottom:6px;}   /* (no grip: a little room under the last one) */
.history-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 20px 8px;}
.history-head h2{font-size:15px;font-weight:800;}
/* as many whole rows as its grip says (RESIZE GRIPS); without the page's script, about five on a computer, all of them on a phone */
.history-list{list-style:none;margin:0;padding:0;}
@media (min-width: 641px){ .history:not(.has-grip) .history-list{max-height:292px;overflow-y:auto;} }
.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:9px 12px 9px 20px;border-top:1px solid var(--border);}
.history-row .note-title{font-size:14.5px;}
.history-row .note-meta{margin-top:2px;}
.pin-btn{width:34px;height:34px;color:var(--text-3);opacity:.55;}
.pin-btn .icon{width:17px;height:17px;transform:rotate(30deg);}
.history-row:hover .pin-btn,.pin-btn:focus-visible{opacity:1;}
.pin-btn[aria-pressed="true"]{opacity:1;color:var(--accent-text);}
.pin-btn[aria-pressed="true"] .pin-head{fill:currentColor;}
@media (pointer: coarse){ .pin-btn{width:44px;height:44px;opacity:.8;} }

table.data{width:100%;border-collapse:collapse;font-size:13.5px;}
table.data th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--border);}
table.data td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;position:relative;}   /* positioned: screen-reader-only text in its off-screen columns stays inside it */
.stats{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:14px;}
/* Admin → Rips: a failed copy's story (each step of its last try, what yt-dlp said) */
.rip-story{margin-top:6px;font-size:12.5px;}
.rip-story summary{cursor:pointer;color:var(--text-3);}
.rip-ytdlp form{display:inline-block;margin-left:6px;vertical-align:middle;}
.rip-story pre{margin:6px 0 0;padding:8px 10px;max-width:46em;max-height:22em;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border:1px dashed var(--border);border-radius:8px;background:var(--surface-2);font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.stat{padding:18px;}
.stat .label{font-size:12.5px;color:var(--text-3);font-weight:600;}
.stat .value{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-top:2px;}
@media (max-width: 800px){ .stats{grid-template-columns:repeat(2, minmax(0,1fr));} }

/* ---------- single-card pages (sign in, errors) ---------- */
.center{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 16px;}
.center .card{width:100%;max-width:440px;padding:32px;}
.center h1{font-size:24px;font-weight:800;margin:18px 0 8px;}
.center p{color:var(--text-2);margin-bottom:20px;}

/* ---------- legal ---------- */
.prose{max-width:760px;margin:0 auto;padding:40px 0 72px;}
.prose h1{font-size:34px;font-weight:800;margin-bottom:6px;}
.prose h2{font-size:19px;font-weight:800;margin:30px 0 8px;}
.prose p,.prose li{color:var(--text-2);}
.prose p{margin:0 0 12px;}
.prose .updated{color:var(--text-3);font-size:13.5px;margin-bottom:24px;}

/* ---------- /admin: costs and profit ---------- */
.cost-tiles{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;margin:12px 0 16px;}
.cost-tile{padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.cost-tile .label{font-size:12.5px;color:var(--text-3);font-weight:600;}
.cost-tile .value{margin-top:4px;font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.cost-tile .hint{margin-top:2px;}
.cost-tile.is-gain .value{color:var(--ok);}
.cost-tile.is-loss .value{color:var(--destructive);}
.cost-panel .notice{margin-bottom:14px;}
/* in the red: how many sign-ups get back to even; in the black: covered */
.cost-goal{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);font-size:14.5px;}
.cost-goal .hint{margin-top:2px;}
.cost-goal.is-loss{border-color:color-mix(in srgb, var(--destructive) 45%, var(--border));background:color-mix(in srgb, var(--destructive) 7%, var(--surface));}
.cost-goal.is-loss .num{flex:none;min-width:44px;height:44px;padding:0 8px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--destructive);color:#fff;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;}
:root[data-theme="dark"] .cost-goal.is-loss .num{color:#1a0710;}
.cost-goal.is-gain{border-color:color-mix(in srgb, var(--ok) 40%, var(--border));background:color-mix(in srgb, var(--ok) 7%, var(--surface));}
.cost-goal.is-gain .icon{color:var(--ok);}
.cost-panel td.num,.cost-panel th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.cost-panel td.is-gain{color:var(--ok);font-weight:700;}
.cost-panel td.is-loss{color:var(--destructive);font-weight:700;}
.cost-lines td.hint{font-size:13px;}
.cost-lines tfoot td{border-top:2px solid var(--border-strong);}
.cost-h3{font-size:15px;margin:22px 0 4px;}
.cost-h3 + .hint{margin-bottom:10px;}
.cost-tip{margin-top:10px;}
.cost-foot{margin-top:18px;max-width:880px;}
@media (max-width: 900px){ .cost-tiles{grid-template-columns:repeat(2, minmax(0,1fr));} }

/* ---------- /admin tabs, and the business at a glance (/admin/kpis) ---------- */
.admin-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--surface-3);}
.admin-tab{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;color:var(--text-2);font-size:14px;font-weight:600;}
.admin-tab:hover{color:var(--text);text-decoration:none;}
.admin-tab[aria-current="page"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);}

/* ---------- admin: visits (pages.js visitsPage, public/visit-map.js) ---------- */
.visits-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.visits-bar .spacer{flex:1;}
.visits-bar .chip{display:inline-flex;align-items:center;gap:6px;}
.visits-bar .chip:hover{text-decoration:none;border-color:var(--accent);}
.visits-bar .btn .icon{width:15px;height:15px;margin-right:6px;}
.visits .stat .hint{margin-top:2px;}
.visits-map-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:12px;}
.visits-map-row{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;align-items:start;}
@media (max-width: 900px){ .visits-map-row{grid-template-columns:minmax(0,1fr);} }
/* the shades: one hue, light to dark (none: the panel's own quiet grey) */
.lvl-0{--shade:var(--surface-3);}
.lvl-1{--shade:color-mix(in srgb, var(--accent) 20%, var(--surface-3));}
.lvl-2{--shade:color-mix(in srgb, var(--accent) 38%, var(--surface-3));}
.lvl-3{--shade:color-mix(in srgb, var(--accent) 57%, var(--surface-3));}
.lvl-4{--shade:color-mix(in srgb, var(--accent) 78%, var(--surface-3));}
.lvl-5{--shade:var(--accent);}
.us-map{position:relative;margin:0;}
.us-map svg{display:block;width:100%;height:auto;overflow:visible;}
.us-map .st{outline:none;}
.us-map .st path{fill:var(--shade);stroke:var(--surface);stroke-width:1;stroke-linejoin:round;transition:fill .5s ease;}
.us-map .st:hover path,.us-map .st:focus-visible path{stroke:var(--text);stroke-width:1.6;}
.us-map .st.is-picked path{stroke:var(--text);stroke-width:2.2;}
.us-map .st.is-ping path{animation:state-lit 8s ease-out;}
@keyframes state-lit{
  0%,18%{fill:color-mix(in srgb, var(--accent) 70%, #fff);filter:drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 85%, transparent));}
}
.us-map .pings circle{fill:none;stroke:var(--accent);stroke-width:2.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;
  animation:map-ring 1.5s ease-out 3 both;pointer-events:none;}
@keyframes map-ring{ from{transform:scale(.4);opacity:.95;} to{transform:scale(5);opacity:0;} }
.map-tip{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%, calc(-100% - 10px));padding:8px 11px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:12.5px;white-space:nowrap;}
.map-tip b{display:block;font-size:13.5px;margin-bottom:1px;}
.map-tip span{display:block;color:var(--text-2);}
.map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--text-3);}
.map-legend span{display:inline-flex;align-items:center;gap:5px;}
.map-legend i{width:16px;height:10px;border-radius:3px;background:var(--shade);}
.map-legend .legend-title{font-weight:700;color:var(--text-2);}
.live-feed h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;font-weight:800;}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:live-dot 2s ease-out infinite;}
@keyframes live-dot{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent);} 100%{box-shadow:0 0 0 8px transparent;} }
.live-feed ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.live-feed li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:7px 10px;margin:0 -10px;border-radius:10px;}
.live-feed li.is-new{animation:feed-in 3s ease-out;}
@keyframes feed-in{ from{background:var(--accent-subtle);} }
.feed-where{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.feed-page{grid-column:1;font:12px var(--mono);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.live-feed time{grid-column:2;grid-row:1;font-size:11.5px;white-space:nowrap;}
@media (prefers-reduced-motion: reduce){ .live-dot,.live-feed li.is-new{animation:none;} .us-map .st.is-ping path{animation-duration:.01s;fill:color-mix(in srgb, var(--accent) 70%, #fff);} }
.visits-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:14px;align-items:start;}
.visits-grid .panel h2{margin-bottom:8px;}
table.vlist td{padding:7px 0;}
table.vlist td + td{padding-left:12px;}
table.vlist code,.visit-log code{font-size:12.5px;overflow-wrap:anywhere;}
.vlist .num{text-align:right;white-space:nowrap;width:1%;}
.vbar{display:block;height:4px;margin-top:5px;border-radius:2px;background:linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / var(--w) 100%, var(--surface-3);}
.visit-log td{white-space:nowrap;}
.visit-log td:nth-child(4){white-space:normal;min-width:160px;}
.badge.quick{background:var(--accent-subtle);color:var(--accent-text);}
.log-pager{justify-content:flex-end;margin-top:12px;}
.visits-credit{text-align:center;}
.kpi-asof{margin-left:auto;}
.part-n{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--grad);color:var(--on-grad,#fff);font-size:12px;font-weight:800;}
.kpi-summary{display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:12px;}
.kpi-sum{display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--text);transition:border-color .12s ease;}
.kpi-sum:hover{border-color:var(--border-strong);text-decoration:none;}
.kpi-sum-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:700;color:var(--text-2);}
.kpi-sum-value{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.kpi-sum-label{font-size:12.5px;color:var(--text-3);}
.kpi-sum-delta{margin-top:4px;font-size:12.5px;font-weight:700;}
.kpi-part{padding:24px;scroll-margin-top:80px;}
.kpi-part-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;}
.kpi-part-head .part-n{width:30px;height:30px;margin-top:2px;border-radius:9px;font-size:14px;}
.kpi-part-head h2{margin:0 0 2px;font-size:20px;font-weight:800;}
.kpi-part-head p{color:var(--text-2);font-size:14.5px;}
.kpi-part-head p b{color:var(--text);}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(188px, 1fr));gap:12px;}
.kpi{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.kpi-label{margin:0;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.35;color:var(--text-2);}
.kpi-status{flex:none;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;}
.kpi-status .icon{width:13px;height:13px;}
.kpi-status.is-ok{background:var(--ok-bg);color:var(--ok);}
.kpi-status.is-warn{background:var(--warn-bg);color:var(--warn);}
.kpi-status.is-bad{background:var(--danger-bg);color:var(--danger);}
.kpi-value{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.1;}
.kpi-delta{font-size:12.5px;color:var(--text-3);}
.kpi-delta b,.kpi-sum-delta{color:var(--text-2);}
.kpi-delta.is-good b,.kpi-sum-delta.is-good{color:var(--ok);}
.kpi-delta.is-bad b,.kpi-sum-delta.is-bad{color:var(--danger);}
.kpi-note{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--text-3);}
.kpi-meter{position:relative;height:6px;margin:4px 0 2px;border-radius:3px;background:color-mix(in srgb, var(--accent) 16%, transparent);}
.kpi-meter span{display:block;height:100%;border-radius:3px;background:var(--accent);}
.kpi-meter.is-high span{background:var(--warn);}
.kpi-meter i{position:absolute;top:-3px;width:2px;height:12px;border-radius:1px;background:var(--text);transform:translateX(-1px);}
.kpi-trend{margin:4px 0 0;}
.kpi-trend svg{display:block;width:100%;height:44px;overflow:visible;}
.spark-bar{outline:none;cursor:default;}
.spark-bar .hit{fill:transparent;}
.spark-bar .bar{fill:color-mix(in srgb, var(--text) 16%, transparent);transition:fill .12s ease;}
.spark-bar.is-now .bar{fill:var(--accent);}
.spark-bar:hover .bar,.spark-bar:focus-visible .bar{fill:color-mix(in srgb, var(--accent) 55%, transparent);}
.spark-bar.is-now:hover .bar,.spark-bar.is-now:focus-visible .bar{fill:var(--accent-hover);}
.spark-bar:focus-visible .bar{stroke:var(--text);stroke-width:1px;vector-effect:non-scaling-stroke;}
.kpi-trend figcaption{display:flex;justify-content:space-between;margin-top:4px;font-size:11.5px;color:var(--text-3);}
.kpi-table summary{margin-top:2px;font-size:12px;color:var(--text-3);cursor:pointer;}
.kpi-table table{margin-top:6px;font-size:12.5px;}
.kpi-table td,.kpi-table th{padding:5px 8px;}
.kpi-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.spark-tip{position:fixed;z-index:60;pointer-events:none;padding:6px 10px;border-radius:8px;background:var(--text);color:var(--bg);font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:var(--shadow-md);transform:translate(-50%, calc(-100% - 8px));}
.spark-tip b{display:block;font-size:14px;}
.kpi-list{margin-top:18px;}
.kpi-list h3{margin:0 0 8px;font-size:13.5px;font-weight:700;}
.kpi-list ul{list-style:none;margin:0;padding:0;}
.kpi-list li{display:grid;grid-template-columns:minmax(150px, 240px) minmax(0,1fr) 84px;align-items:center;gap:14px;padding:6px 0;font-size:14px;}
.kpi-list-bar{height:8px;border-radius:4px;background:color-mix(in srgb, var(--accent) 14%, transparent);overflow:hidden;}
.kpi-list-bar span{display:block;height:100%;border-radius:4px;background:var(--accent);}
.kpi-list-value{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.kpi-list-value span{margin-left:4px;font-weight:500;color:var(--text-3);}
.kpi-list .hint{margin-top:6px;}
.kpi-missing{margin-top:20px;padding-top:16px;border-top:1px dashed var(--border-strong);}
.kpi-missing h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);}
.kpi-missing h3 .icon{width:16px;height:16px;}
.kpi-missing-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:12px;}
.kpi-gap{padding:14px 16px;border-radius:12px;border:1.5px dashed var(--border-strong);}
.kpi-gap h4{margin:0 0 4px;font-size:14.5px;}
.kpi-gap p{font-size:13px;line-height:1.5;color:var(--text-2);}
.kpi-gap .kpi-how{margin-top:8px;}
.kpi-gap .kpi-how b{color:var(--text);}
.kpi-foot{max-width:900px;}
@media (max-width: 1000px){ .kpi-summary{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width: 640px){
  .kpi-summary{grid-template-columns:repeat(2, minmax(0,1fr));}
  .kpi-part{padding:18px 16px;}
  .kpi-asof{margin-left:0;width:100%;}
  .kpi-list li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;}
  .kpi-list-bar{grid-column:1 / -1;grid-row:2;}
}

/* ---------- teams: pricing row, start a team, the team page, joining ---------- */
.team-plans{margin-top:56px;}
.team-plans .section-head{margin-bottom:24px;}
.team-pointer{text-align:center;margin-top:22px;font-size:14.5px;color:var(--text-2);}
.team-pointer a{font-weight:700;}
.plan .btn .icon{width:16px;height:16px;}
.center .card.team-new,.center .card.join-card{max-width:500px;}
/* agreeing to the Terms (/agree): the deal in a few lines, one box to tick, Continue */
.center .card.agree-card{max-width:520px;}
.agree-card .hint{font-size:14px;margin-bottom:16px;}
.agree-points{list-style:none;margin:0 0 22px;padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:flex;flex-direction:column;gap:9px;}
.agree-points li{position:relative;padding-left:18px;font-size:14px;line-height:1.45;color:var(--text-2);}
.agree-points li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.agree-points b{color:var(--text);font-weight:650;}
.agree-box{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:12px;font-size:14.5px;line-height:1.45;color:var(--text);cursor:pointer;}
.agree-box:has(input:checked){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, transparent);}
.agree-box input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer;}
.agree-box a{font-weight:600;}
.agree-card .agree-out{margin:16px 0 0;text-align:center;font-size:13px;}
.team-new form{margin-top:4px;}
.team-new .team-ent{margin:16px 0 0;text-align:center;}
.seg-field{border:0;margin:0;padding:0;min-width:0;}
.seg-field legend{font-size:13.5px;font-weight:600;margin-bottom:6px;padding:0;}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.seg label{position:relative;cursor:pointer;}
.seg input{position:absolute;opacity:0;width:1px;height:1px;}
.seg span{display:flex;flex-direction:column;gap:2px;height:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);
  font-size:14px;transition:border-color .12s ease, background-color .12s ease;}
.seg small{font-size:12.5px;font-weight:500;color:var(--text-3);}
.seg .save{font-style:normal;display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--accent-subtle);color:var(--accent-text);font-size:11.5px;font-weight:800;vertical-align:1px;}
.seg label:hover span{border-color:var(--accent);}
.seg input:checked + span{border:2px solid var(--accent);padding:9px 11px;background:color-mix(in srgb, var(--accent-subtle) 55%, var(--surface));}
.seg input:focus-visible + span{outline:2px solid var(--accent-text);outline-offset:2px;}
.team-total{margin:0!important;padding:12px 14px;border-radius:10px;background:var(--surface-2);font-size:14.5px;color:var(--text-2)!important;}
.team-total b{color:var(--text);font-size:16px;}
.team-people{list-style:none;margin:0;padding:0;}
.team-person{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
.team-person:first-child{border-top:0;padding-top:4px;}
.team-person .who{flex:1;min-width:180px;}
.team-person .who .badge{vertical-align:1px;}
.team-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;}
.team-actions form{margin:0;}
.team-remove > summary{list-style:none;}
.team-remove > summary::-webkit-details-marker{display:none;}
.team-remove[open] > summary{background:var(--surface-3);}
.team-remove form{margin-top:8px!important;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);max-width:340px;}
.team-remove select{width:100%;}
.invite-row{display:flex;gap:8px;margin-bottom:10px;}
.invite-row input{flex:1;font-family:var(--mono, ui-monospace, monospace);font-size:13px!important;}
.team-setup{border-color:color-mix(in srgb, var(--accent) 40%, var(--border));}
.team-line{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:10px 0 14px;border-radius:10px;background:var(--surface-2);font-size:14px;}
.team-line .icon{flex:none;margin-top:2px;color:var(--accent-text);}
.join-facts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px;}
.join-facts li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-2);}
.join-facts .icon{flex:none;margin-top:2px;color:var(--accent-text);}
.join-actions{display:flex;flex-direction:column;gap:10px;}
.row-edit > summary,.team-create > summary{list-style:none;display:inline-flex;}
.row-edit > summary::-webkit-details-marker,.team-create > summary::-webkit-details-marker{display:none;}
.row-edit form{margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);min-width:220px;}
.team-create{margin-top:16px;}
.team-create form{margin-top:12px;max-width:720px;}
.grid-form{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;}
label.check{display:flex;align-items:center;gap:8px;font-weight:500;}
label.check input{width:18px;height:18px;accent-color:var(--accent);}
@media (max-width: 640px){ .grid-form{grid-template-columns:1fr;} .seg{grid-template-columns:1fr;} }

/* ---------- feedback at the top of /admin (and the top-bar link for admins) ---------- */
.fb-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 7px;margin-left:6px;border-radius:999px;
  background:var(--grad);color:var(--on-grad,#fff);font-size:11.5px;font-weight:800;vertical-align:2px;}
.fb-nav{display:inline-flex;align-items:center;font-weight:600;}
.fb-panel{scroll-margin-top:80px;border-color:color-mix(in srgb, var(--accent) 35%, var(--border));}
.fb-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.fb-top h2{display:flex;align-items:center;font-size:20px;}
.fb-top .hint{margin-top:4px;}
.fb-tiles{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px;margin-bottom:18px;}
.fb-tile{padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);}
.fb-tile .label{font-size:12.5px;color:var(--text-3);font-weight:600;}
.fb-tile .value{margin-top:4px;font-size:26px;font-weight:800;letter-spacing:-.02em;}
.fb-tile .hint{margin-top:2px;font-size:12px;}
.fb-pmf{grid-column:span 1;}
.fb-bar{display:flex;height:6px;margin-top:8px;border-radius:3px;overflow:hidden;background:var(--surface-3);}
.fb-bar .very{background:var(--accent);} .fb-bar .somewhat{background:color-mix(in srgb, var(--accent) 45%, transparent);} .fb-bar .not{background:var(--border-strong);}
.fb-kinds{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;}
.fb-kinds > span{display:inline-flex;align-items:center;gap:6px;}
.fb-kinds .icon{width:16px;height:16px;color:var(--text-3);}
.fb-filters a .icon{width:15px;height:15px;color:var(--text-3);}
.fb-filters a[aria-current] .icon{color:currentColor;}
.fb-kind .icon{width:14px;height:14px;}
.fb-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.fb-filters a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--border-strong);
  color:var(--text-2);font-size:13px;font-weight:600;text-decoration:none;}
.fb-filters a span{color:var(--text-3);font-weight:700;font-variant-numeric:tabular-nums;}
.fb-filters a:hover{background:var(--surface-3);color:var(--text);}
.fb-filters a[aria-current]{background:var(--accent-subtle);border-color:var(--accent);color:var(--accent-text);}
.fb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.fb-item{padding:14px 16px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);}
.fb-item.is-new{border-left:4px solid var(--accent);padding-left:13px;background:color-mix(in srgb, var(--accent-subtle) 45%, var(--surface));}
.fb-item.is-archived{opacity:.7;}
.fb-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px;}
.fb-kind{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;background:var(--surface-3);font-weight:700;color:var(--text-2);}
.fb-kind-bug{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);}
.fb-kind-love{background:var(--accent-subtle);color:var(--accent-text);}
.fb-new{height:20px;padding:0 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:11px;line-height:20px;}
.fb-line time{color:var(--text-3);margin-left:auto;}
.fb-msg{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.6;color:var(--text);margin-bottom:10px;}
.fb-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--text-2);}
.fb-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.fb-actions form{margin:0;}
.fb-empty{padding:22px;border-radius:12px;border:1px dashed var(--border-strong);text-align:center;color:var(--text-2);}
@media (max-width: 900px){ .fb-tiles{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width: 520px){ .fb-tiles{grid-template-columns:1fr;} .fb-line time{margin-left:0;} }

/* ---------- legal pages (words: content/legal/*.html; frame: pages.js legal) ----------
   A contents list beside the text on wide screens, folded above it on phones,
   and the plain-English summary in a box. Kept simple for design to take on. */
.legal{display:grid;grid-template-columns:220px minmax(0,760px);gap:40px;justify-content:center;align-items:start;}
.legal .prose{margin:0;}
.legal-toc{position:sticky;top:84px;padding-top:44px;max-height:calc(100vh / var(--z, 1) - 100px);overflow:auto;font-size:13.5px;}
.legal-toc summary{font-weight:700;color:var(--text);cursor:pointer;list-style:none;margin-bottom:8px;}
.legal-toc summary::-webkit-details-marker{display:none;}
.legal-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.legal-toc a{display:block;padding:4px 8px;border-radius:6px;color:var(--text-2);}
.legal-toc a:hover{background:var(--surface-3);color:var(--text);text-decoration:none;}
.legal-body h2{scroll-margin-top:84px;}
.legal-body ul,.legal-body ol{padding-left:22px;margin:0 0 12px;}
.legal-body li{margin-bottom:6px;}
.legal-summary{margin:0 0 28px;padding:18px 22px;border-radius:12px;background:var(--accent-subtle);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);}
.legal-summary .summary-title{margin:0 0 6px;font-size:17px;}
.legal-summary p{font-size:13.5px;}
.legal-summary li{color:var(--text);}
.signin-methods{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.signin-methods h3{font-size:14px;font-weight:700;margin-bottom:4px;}
.signin-methods p{font-size:14.5px;}
.signin-methods .hint{margin-top:4px;font-size:13px;}
.agree{margin-top:10px;font-size:12.5px;color:var(--text-3);line-height:1.5;}
.agree a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;}
@media (max-width: 900px){
  .legal{grid-template-columns:minmax(0,1fr);gap:0;}
  .legal-toc{position:static;max-height:none;padding:24px 0 0;}
  .legal-toc details:not([open]) ol{display:none;}
  .legal-toc summary{padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);margin:0;}
  .legal-toc ol{padding:8px 0 0;}
}

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;} }
@media print{ .topbar,footer.site{display:none;} }

/* ---------- a butterfly on the pricing page (butterfly.js): seen from above, the brand's gradient on its wings ---------- */
.butterfly{position:fixed;left:0;top:0;z-index:15;width:48px;height:40px;pointer-events:none;transform-origin:24px 20px;
  opacity:0;transition:opacity .6s ease;will-change:transform;}
.butterfly.is-here{opacity:1;}
.butterfly svg{display:block;overflow:visible;}
.butterfly.is-perched svg{filter:drop-shadow(0 2px 1.5px rgba(20,10,30,.28));}
.butterfly .bf-fore,.butterfly .bf-hind{fill:url(#bfWing);stroke:rgba(34,14,46,.55);stroke-width:.8;stroke-linejoin:round;}
.butterfly .bf-hind{opacity:.9;}
.butterfly .bf-spot{fill:rgba(255,255,255,.85);}
.butterfly .bf-body,.butterfly .bf-tip{fill:#2a1d33;}
.butterfly .bf-feelers{fill:none;stroke:#2a1d33;stroke-width:.8;stroke-linecap:round;}
/* in flight the script beats the wings (butterfly.js); at rest they bask: open, a slow fold up and back now and then */
.butterfly .bf-side{transform-box:view-box;transform-origin:24px 20px;}
.butterfly.is-perched .bf-side{animation:bf-rest 3.8s ease-in-out infinite;}
.butterfly.is-perched .bf-right{animation-delay:-.04s;}
@keyframes bf-rest{0%,62%{transform:scaleX(1);}74%{transform:scaleX(.16);}80%{transform:scaleX(.16);}90%,100%{transform:scaleX(1);}}
@media (forced-colors: active){ .butterfly{display:none;} }
@media print{ .butterfly{display:none;} }