/* TesseraSnap site. Layout: a narrow centered column (72ch) on a neutral charcoal (dark) or
   stone (light) ground. The accent is the only color, so any accent a visitor picks fits. */
/* Fonts are served from /fonts (Outfit, IBM Plex Sans and Mono; SIL Open Font License, see
   /fonts/LICENSE.txt), so visitors' browsers never contact Google. Latin and Latin Extended only. */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F4F4F5;
  --bg-raised: #FFFFFF;
  --fg: #18181B;
  --fg-muted: #585862;
  --line: #DEDEE3;
  /* accent.js sets --acc-* when a visitor picks another accent color */
  --accent: var(--acc-l, #1F7AE0);
  --accent-text: var(--acc-text-l, #1A6DCC);
  --accent-ink: var(--acc-ink-l, #FFFFFF);
  --tile: #E4E4E8;
  --note: color-mix(in srgb, var(--accent) 9%, var(--bg-raised));
  /* Pro marks take the accent, as they do in the app */
  --pro: var(--accent-text);
  --pro-soft: var(--note);
  --font-display: "Outfit", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Cascadia Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131315; --bg-raised: #1C1C1F; --fg: #EDEDEF; --fg-muted: #A1A1AA; --line: #2E2E33;
    --accent: var(--acc-d, #4C9BF5); --accent-text: var(--acc-text-d, #4C9BF5); --accent-ink: var(--acc-ink-d, #0B0B0D);
    --tile: #303036; --note: color-mix(in srgb, var(--accent) 13%, var(--bg-raised));
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131315; --bg-raised: #1C1C1F; --fg: #EDEDEF; --fg-muted: #A1A1AA; --line: #2E2E33;
  --accent: var(--acc-d, #4C9BF5); --accent-text: var(--acc-text-d, #4C9BF5); --accent-ink: var(--acc-ink-d, #0B0B0D);
  --tile: #303036; --note: color-mix(in srgb, var(--accent) 13%, var(--bg-raised));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0;
}
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0; max-width: 65ch; }
.muted { color: var(--fg-muted); }
.eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
kbd {
  font-family: var(--font-mono); font-size: 0.85em; padding: 0.1em 0.45em; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; background: var(--bg-raised); white-space: nowrap;
}
code { font-family: var(--font-mono); font-size: 0.9em; }
.wrap { max-width: 1040px; margin-inline: auto; }
.col { max-width: 72ch; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--fg); text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.nav { display: flex; gap: 1.4rem; margin-left: auto; flex-wrap: wrap; font-size: 0.95rem; }
.nav a { color: var(--fg-muted); text-decoration: none; }
.nav a[aria-current="page"], .nav a[aria-current="true"], .nav a:hover { color: var(--fg); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.2rem; border-radius: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { border-color: var(--line); color: var(--fg); background: var(--bg-raised); }
.btn-pro { background: var(--accent); color: var(--accent-ink); }
/* Not a link: "Coming soon" where a Download button will go. */
.btn-soon { border: 1px dashed var(--accent); color: var(--accent-text); background: transparent; cursor: default; }

/* sections */
section { padding-block: 3.5rem; }
section + section { border-top: 1px solid var(--line); }
.stack { display: grid; gap: 1rem; }
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid > * { min-width: 0; }
.feature h3 { margin-bottom: 0.35rem; }
.feature .eyebrow { margin-bottom: 0.6rem; display: block; }

/* hero */
.hero { display: grid; gap: 2.5rem; grid-template-columns: 1.1fr 1fr; align-items: center; padding-block: 3rem 3.5rem; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
.hero .lede { font-size: 1.2rem; margin-top: 1.1rem; }
.hero .cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.6rem; align-items: center; }
.hero .fine { font-size: 0.85rem; margin-top: 0.9rem; }

/* the throw's target cursor (Reticle): a ring with eight ticks; its dot leans toward where the window will go */
.ret { position: absolute; }
.ret::before { content: ""; position: absolute; inset: 0; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Ccircle%20cx='20'%20cy='20'%20r='11.5'/%3E%3Cline%20x1='35.20'%20y1='20.00'%20x2='39.00'%20y2='20.00'/%3E%3Cline%20x1='30.75'%20y1='30.75'%20x2='33.44'%20y2='33.44'/%3E%3Cline%20x1='20.00'%20y1='35.20'%20x2='20.00'%20y2='39.00'/%3E%3Cline%20x1='9.25'%20y1='30.75'%20x2='6.56'%20y2='33.44'/%3E%3Cline%20x1='4.80'%20y1='20.00'%20x2='1.00'%20y2='20.00'/%3E%3Cline%20x1='9.25'%20y1='9.25'%20x2='6.56'%20y2='6.56'/%3E%3Cline%20x1='20.00'%20y1='4.80'%20x2='20.00'%20y2='1.00'/%3E%3Cline%20x1='30.75'%20y1='9.25'%20x2='33.44'%20y2='6.56'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%3E%3Ccircle%20cx='20'%20cy='20'%20r='11.5'/%3E%3Cline%20x1='35.20'%20y1='20.00'%20x2='39.00'%20y2='20.00'/%3E%3Cline%20x1='30.75'%20y1='30.75'%20x2='33.44'%20y2='33.44'/%3E%3Cline%20x1='20.00'%20y1='35.20'%20x2='20.00'%20y2='39.00'/%3E%3Cline%20x1='9.25'%20y1='30.75'%20x2='6.56'%20y2='33.44'/%3E%3Cline%20x1='4.80'%20y1='20.00'%20x2='1.00'%20y2='20.00'/%3E%3Cline%20x1='9.25'%20y1='9.25'%20x2='6.56'%20y2='6.56'/%3E%3Cline%20x1='20.00'%20y1='4.80'%20x2='20.00'%20y2='1.00'/%3E%3Cline%20x1='30.75'%20y1='9.25'%20x2='33.44'%20y2='6.56'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* demo: a desktop where a window gets flicked to the left half */
.demo { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--line); overflow: hidden; }
.demo .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: var(--tile); opacity: 0.6; }
.demo .win { position: absolute; left: 30%; top: 22%; width: 44%; height: 54%; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.15); animation: win 6s ease-in-out infinite; }
.demo .win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14%; background: var(--tile); border-radius: 8px 8px 0 0; }
.demo .ghost { position: absolute; left: 0; top: 0; width: 50%; height: 91%; background: var(--accent); opacity: 0; animation: ghost 6s ease-in-out infinite; }
.demo .cursor { position: absolute; left: 52%; top: 50%; width: 16px; height: 25px; z-index: 5; animation: cursor 6s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 19'%3E%3Cpath d='M1 1v15l4-4 3 6 2-1-3-6h5z' fill='%23111' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain; }
.demo .keys { position: absolute; left: 12px; top: 12px; display: flex; gap: 4px; opacity: 0; animation: keys 6s ease-in-out infinite; }
.demo .ret { left: 52%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 4; opacity: 0; animation: hret 6s ease-in-out infinite; }
.demo .ret::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent); animation: hdot 6s ease-in-out infinite; }
@keyframes hret { 0%,17% { opacity: 0; transform: scale(0.6) } 21%,70% { opacity: 1; transform: scale(1) } 74%,100% { opacity: 0 } }
@keyframes hdot { 0%,24% { transform: translate(0,0) } 34%,100% { transform: translate(-8px,0) } }
@keyframes keys   { 0%,15% { opacity: 0 } 20%,70% { opacity: 1 } 75%,100% { opacity: 0 } }
@keyframes cursor { 0%,20% { left: 52% } 40%,70% { left: 36% } 75%,100% { left: 52% } }
@keyframes ghost  { 0%,38% { opacity: 0 } 42%,70% { opacity: 0.35 } 72%,100% { opacity: 0 } }
@keyframes win    { 0%,70% { left: 30%; top: 22%; width: 44%; height: 54% } 76%,92% { left: 0; top: 0; width: 50%; height: 91% } 100% { left: 30%; top: 22%; width: 44%; height: 54% } }
@media (prefers-reduced-motion: reduce) { .demo * { animation: none !important; } .demo .ghost { opacity: 0.35; } .demo .keys, .demo .ret { opacity: 1; } }

/* tables */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; }
td.c, th.c { text-align: center; white-space: nowrap; }
.yes { color: var(--accent-text); font-weight: 600; }
.no { color: var(--fg-muted); }
.soon { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pro); }

/* pricing */
.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.plan.pro { border: 2px solid var(--accent); }
.plan ul { flex: 1; }
.plan .btn { justify-content: center; }
.price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; }
.price small { font-size: 1rem; font-weight: 400; color: var(--fg-muted); }
.plan ul { margin: 0; padding-left: 1.1rem; }

/* changelog / about */
.entry { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.entry > * { min-width: 0; }
@media (max-width: 600px) { .entry { grid-template-columns: 1fr; gap: 0.5rem; } }
.entry .ver { font-family: var(--font-mono); font-size: 0.95rem; }
.entry ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }

footer { padding-block: 2.5rem 3rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--fg-muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }


/* home: the free tier first, then the Pro tier, each under a big label */
.tier-head { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; margin-bottom: 2.25rem; }
@media (max-width: 600px) { .tier-head { grid-template-columns: 1fr; gap: 0.8rem; } }
.tier-pill { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; padding: 0.35em 0.9em; border-radius: 999px;
  background: var(--bg-raised); color: var(--fg); border: 1px solid var(--line); justify-self: start; }
.tier-more { margin-top: 2.5rem; }
section.tier-pro { border-top: 2px solid var(--accent); }
.tier-pro .tier-pill { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* built in Rust: three short facts under the hero */
section.built { padding-block: 2.5rem 3rem; display: grid; gap: 2rem; grid-template-columns: 1fr 1.6fr; align-items: center; }
@media (max-width: 760px) { section.built { grid-template-columns: 1fr; } }
.built-head { display: grid; gap: 0.6rem; }
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats > div { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); padding: 1rem 1.1rem; display: grid; gap: 0.3rem; align-content: start; }
.stats b { font-family: var(--font-display); font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--accent-text); letter-spacing: -0.02em; }
.stats span { font-size: 0.88rem; color: var(--fg-muted); }
/* hero: the Rust badge above the headline */
.rust-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--fg); text-decoration: none;
  padding: 0.35rem 0.8rem 0.35rem 0.45rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--note); }
.rust-badge:hover { background: var(--bg-raised); }
.rust-badge .gear { width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--accent); box-shadow: 0 0 0 2px var(--note), 0 0 0 3.5px var(--accent); margin-left: 0.25rem; }
/* small rounded links: pricing notes, compare cross-links */
.pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; padding: 0.4em 0.95em; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-raised); color: var(--fg); text-decoration: none; white-space: nowrap; }
a.pill:hover { border-color: var(--accent); color: var(--accent-text); }
.pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.built .facts > div { border-top: 2px solid var(--accent); padding-top: 0.9rem; display: grid; gap: 0.4rem; align-content: start; }

/* ---------- feature demos: small desktops animated with CSS only ---------- */
:root { --w1: #1F7AE0; --w2: #55555F; --w3: #0E9F6E; --w4: #7C5CD6; --w5: #D9622B; --win-shadow: 0 8px 22px rgba(0,0,0,0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --w1: #4C9BF5; --w2: #9A9AA5; --w3: #34C38F; --w4: #A08AF0; --w5: #F08A55; --win-shadow: 0 8px 22px rgba(0,0,0,0.45); } }
:root[data-theme="dark"] { --w1: #4C9BF5; --w2: #9A9AA5; --w3: #34C38F; --w4: #A08AF0; --w5: #F08A55; --win-shadow: 0 8px 22px rgba(0,0,0,0.45); }

.ways { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ways > * { min-width: 0; }
.way { display: grid; gap: 0.9rem; align-content: start; }
.way h3 { margin-top: 0.2rem; }
.way .eyebrow.pro, .eyebrow.pro { color: var(--pro); }

.sc { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--bg-raised); border: 1px solid var(--line); overflow: hidden; }
.sc .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: var(--tile); opacity: 0.6; }
.sc .w { position: absolute; left: 34%; top: 20%; width: 40%; height: 52%; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--win-shadow); }
.sc .w::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--tb, var(--tile)); border-radius: 6px 6px 0 0; }
.sc .w::after { content: ""; position: absolute; inset: 22px 12% 14px 10px; background: repeating-linear-gradient(var(--line) 0 2px, transparent 2px 9px); opacity: 0.9; }
.sc .fp { position: absolute; background: var(--accent); opacity: 0; border-radius: 6px; outline: 2px solid var(--accent); outline-offset: -2px; }
.sc .cur { position: absolute; width: 14px; height: 22px; margin: -1px 0 0 -1px; z-index: 5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 19'%3E%3Cpath d='M1 1v15l4-4 3 6 2-1-3-6h5z' fill='%23111' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
  transform-origin: 0 0; }
.sc .keys { position: absolute; left: 10px; top: 10px; display: flex; gap: 4px; z-index: 6; font-size: 0.8rem; }
.sc .keys kbd { box-shadow: 0 2px 0 var(--line); }
.sc .tag { position: absolute; right: 10px; top: 10px; z-index: 6; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px; padding: 0.15em 0.5em; opacity: 0; }

/* 1. drag a title bar to the left edge */
.sc-drag .w   { animation: drag-w 8s ease-in-out infinite; }
.sc-drag .cur { animation: drag-c 8s ease-in-out infinite; }
.sc-drag .fp  { left: 0; top: 0; width: 50%; height: 91%; animation: drag-fp 8s ease-in-out infinite; }
@keyframes drag-c {
  0%, 4%   { left: 74%; top: 82%; transform: scale(1); opacity: 1; }
  16%      { left: 54%; top: 23%; transform: scale(1); }
  19%      { left: 54%; top: 23%; transform: scale(0.85); }
  46%, 54% { left: 2%;  top: 40%; transform: scale(0.85); }
  57%      { left: 2%;  top: 40%; transform: scale(1); }
  72%, 90% { left: 30%; top: 62%; transform: scale(1); opacity: 1; }
  95%      { left: 30%; top: 62%; opacity: 0; }
  96%      { left: 74%; top: 82%; opacity: 0; }
  100%     { left: 74%; top: 82%; opacity: 1; }
}
@keyframes drag-w {
  0%, 19%  { left: 34%;  top: 20%; width: 40%; height: 52%; opacity: 1; }
  46%, 54% { left: -18%; top: 37%; width: 40%; height: 52%; }
  60%, 90% { left: 0;    top: 0;   width: 50%; height: 91%; opacity: 1; }
  95%      { left: 0;    top: 0;   width: 50%; height: 91%; opacity: 0; }
  96%      { left: 34%;  top: 20%; width: 40%; height: 52%; opacity: 0; }
  100%     { left: 34%;  top: 20%; width: 40%; height: 52%; opacity: 1; }
}
@keyframes drag-fp { 0%, 38% { opacity: 0; } 42%, 55% { opacity: 0.3; } 60%, 100% { opacity: 0; } }

/* 2. throw: hold Ctrl+Alt, toss the cursor right, release */
.sc-throw .w   { left: 30%; top: 18%; width: 42%; height: 56%; animation: throw-w 7s ease-in-out infinite; }
.sc-throw .cur { animation: throw-c 7s infinite; }
.sc-throw .fp  { left: 50%; top: 0; width: 50%; height: 91%; animation: throw-fp 7s ease-in-out infinite; }
.sc-throw .keys { animation: show-keys 7s infinite; opacity: 0; }
.sc-throw .ret { position: absolute; left: 50%; top: 46%; width: 38px; height: 38px; margin: -19px 0 0 -19px; z-index: 4; opacity: 0; animation: throw-ret 7s infinite; }
.sc-throw .ret::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--accent); animation: throw-dot 7s infinite; }
.sc-throw .trail { position: absolute; left: 50%; top: 46%; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: 0 50%; transform: rotate(-6deg); z-index: 4; opacity: 0; animation: throw-trail 7s infinite; }
@keyframes show-keys { 0%, 12% { opacity: 0; } 15%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes throw-dot { 0%, 20% { transform: translate(0, 0); } 26%, 100% { transform: translate(6px, -1px); } }
@keyframes throw-ret { 0%, 15% { opacity: 0; transform: scale(0.6); } 18%, 47% { opacity: 1; transform: scale(1); } 51%, 100% { opacity: 0; } }
@keyframes throw-c {
  0%, 18%  { left: 50%; top: 46%; opacity: 1; animation-timing-function: cubic-bezier(.2,.9,.3,1); }
  27%, 88% { left: 78%; top: 43%; opacity: 1; }
  94%      { left: 78%; top: 43%; opacity: 0; }
  95%      { left: 50%; top: 46%; opacity: 0; }
  100%     { left: 50%; top: 46%; opacity: 1; }
}
@keyframes throw-trail { 0%, 18% { width: 0; opacity: 0; animation-timing-function: cubic-bezier(.2,.9,.3,1); } 27%, 47% { width: 28%; opacity: 0.9; } 51%, 100% { width: 28%; opacity: 0; } }
@keyframes throw-fp { 0%, 24% { opacity: 0; } 28%, 48% { opacity: 0.3; } 53%, 100% { opacity: 0; } }
@keyframes throw-w {
  0%, 48%  { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; }
  54%, 88% { left: 50%; top: 0;   width: 50%; height: 91%; opacity: 1; }
  94%      { left: 50%; top: 0;   width: 50%; height: 91%; opacity: 0; }
  95%      { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 0; }
  100%     { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; }
}

/* 3. shortcut: Ctrl+Alt+Left three times cycles half, two thirds, one third */
.sc-keys .w { left: 30%; top: 18%; width: 42%; height: 56%; animation: keys-w 9s ease-in-out infinite; }
.sc-keys .keys { left: auto; right: 10px; top: auto; bottom: calc(9% + 10px); }
.sc-keys .press { animation: keys-press 9s infinite; }
.sc-keys .tag { left: 10px; right: auto; }
.sc-keys .t1 { animation: keys-t1 9s infinite; }
.sc-keys .t2 { animation: keys-t2 9s infinite; }
.sc-keys .t3 { animation: keys-t3 9s infinite; }
@keyframes keys-press { 0%, 10%, 13%, 38%, 41%, 66%, 69%, 100% { transform: translateY(0); box-shadow: 0 2px 0 var(--line); background: var(--bg-raised); }
  11%, 12%, 39%, 40%, 67%, 68% { transform: translateY(2px); box-shadow: none; background: var(--tile); } }
@keyframes keys-w {
  0%, 11%  { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; }
  15%, 39% { left: 0; top: 0; width: 50%; height: 91%; }
  43%, 67% { left: 0; top: 0; width: 66.67%; height: 91%; }
  71%, 90% { left: 0; top: 0; width: 33.33%; height: 91%; opacity: 1; }
  95%      { left: 0; top: 0; width: 33.33%; height: 91%; opacity: 0; }
  96%      { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 0; }
  100%     { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; }
}
@keyframes keys-t1 { 0%, 13% { opacity: 0; } 15%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes keys-t2 { 0%, 41% { opacity: 0; } 43%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes keys-t3 { 0%, 69% { opacity: 0; } 71%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* 4. layouts: two screens, a saved layout in the menu; hover an app to see where it goes */
.lay { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr) 15.5rem; align-items: center; }
@media (max-width: 760px) { .lay { grid-template-columns: minmax(0, 1fr); } }
.screens { display: grid; grid-template-columns: 1fr 1fr; gap: 4%; }
.screens .sc { border-radius: 10px; }
.screens .label { position: absolute; left: 8px; bottom: calc(9% + 6px); font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-muted); z-index: 1; }
.lw { --tb: var(--c); animation: lay-w 12s ease-in-out infinite; left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease, outline-color .2s; outline: 2px solid transparent; outline-offset: 1px; }
.lw::before { height: 9px !important; }
.lw::after { inset: 16px 12% 8px 8px !important; }
.lfp { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); background: var(--c) !important; outline-color: var(--c) !important; z-index: 3;
  animation: lay-hl 12s infinite; animation-delay: calc(var(--k) * 1.44s - 12s); }
@keyframes lay-w {
  0%, 62%  { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); }
  69%, 90% { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); }
  97%, 100% { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); }
}
@keyframes lay-hl { 0%, 11% { opacity: 0.35; } 12%, 100% { opacity: 0; } }

.menu { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--win-shadow); padding: 6px; font-size: 0.9rem; }
.menu .mh { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); padding: 6px 10px 4px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.mi { display: flex; width: 100%; align-items: center; gap: 0.6rem; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: default; }
.mi .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.mi .k { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; }
.mi .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-app { animation: lay-mi 12s infinite; animation-delay: calc(var(--k) * 1.44s - 12s); }
.mi-restore { font-weight: 600; animation: lay-mr 12s infinite; }
@keyframes lay-mi { 0%, 11% { background: var(--tile); } 12%, 100% { background: transparent; } }
@keyframes lay-mr { 0%, 61% { background: transparent; } 62%, 72% { background: var(--tile); } 73%, 100% { background: transparent; } }
.lay-hint { font-size: 0.85rem; margin-top: 0.6rem; }

/* hovering or focusing the demo stops the loop and hands control to the visitor */
.lay:hover .lw, .lay:focus-within .lw, .lay:hover .lfp, .lay:focus-within .lfp,
.lay:hover .mi, .lay:focus-within .mi { animation: none; }
.lay:hover .lfp, .lay:focus-within .lfp { opacity: 0; transition: opacity .15s; }
.mi:hover, .mi:focus-visible { background: var(--tile); outline: none; }
.lay:has(.mi-restore:hover) .lw, .lay:has(.mi-restore:focus-visible) .lw { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); }
.lay:has(.mi-restore:hover) .lfp, .lay:has(.mi-restore:focus-visible) .lfp { opacity: 0.18; }
.lay:has([data-k="0"].mi:is(:hover, :focus-visible)) [data-k="0"].lfp,
.lay:has([data-k="1"].mi:is(:hover, :focus-visible)) [data-k="1"].lfp,
.lay:has([data-k="2"].mi:is(:hover, :focus-visible)) [data-k="2"].lfp,
.lay:has([data-k="3"].mi:is(:hover, :focus-visible)) [data-k="3"].lfp,
.lay:has([data-k="4"].mi:is(:hover, :focus-visible)) [data-k="4"].lfp { opacity: 0.35; }
.lay:has([data-k="0"].mi:is(:hover, :focus-visible)) [data-k="0"].lw,
.lay:has([data-k="1"].mi:is(:hover, :focus-visible)) [data-k="1"].lw,
.lay:has([data-k="2"].mi:is(:hover, :focus-visible)) [data-k="2"].lw,
.lay:has([data-k="3"].mi:is(:hover, :focus-visible)) [data-k="3"].lw,
.lay:has([data-k="4"].mi:is(:hover, :focus-visible)) [data-k="4"].lw { outline-color: var(--c); z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .sc *, .lay * { animation: none !important; transition: none !important; }
  .sc-drag .w, .sc-throw .w { left: 0; top: 0; width: 50%; height: 91%; }
  .sc-throw .w { left: 50%; }
  .sc-keys .w { left: 0; top: 0; width: 50%; height: 91%; }
  .sc-throw .keys, .sc-keys .t1 { opacity: 1; }
  .lw { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); }
}

/* 5. thirds: Ctrl+Alt+D pressed three times walks the window through the first, center and last third */
.sc-thirds .w { left: 30%; top: 18%; width: 42%; height: 56%; animation: th-w 9s ease-in-out infinite; }
.sc-thirds .keys { left: auto; right: 10px; top: auto; bottom: calc(9% + 10px); }
.sc-thirds .press { animation: keys-press 9s infinite; }
.sc-thirds .tag { left: 10px; right: auto; }
.sc-thirds .t1 { animation: keys-t1 9s infinite; }
.sc-thirds .t2 { animation: keys-t2 9s infinite; }
.sc-thirds .t3 { animation: keys-t3 9s infinite; }
@keyframes th-w {
  0%, 11%  { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; }
  15%, 39% { left: 0; top: 0; width: 33.33%; height: 91%; }
  43%, 67% { left: 33.33%; top: 0; width: 33.33%; height: 91%; }
  71%, 90% { left: 66.67%; top: 0; width: 33.33%; height: 91%; opacity: 1; }
  95%      { left: 66.67%; top: 0; width: 33.33%; height: 91%; opacity: 0; }
  96%      { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 0; }
  100%     { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; }
}

/* 6. quick throw: the cursor sweeps right across the window, a tap of Ctrl+Shift, it lands right; no footprint */
.sc-quick .w { left: 22%; top: 18%; width: 42%; height: 56%; animation: qt-w 6s ease-in-out infinite; }
.sc-quick .cur { animation: qt-c 6s infinite; }
.sc-quick .keys { opacity: 0; animation: qt-keys 6s infinite; }
.sc-quick .trail { position: absolute; top: 47%; left: 28%; height: 2px; width: 0; z-index: 4; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--fg-muted)); animation: qt-trail 6s infinite; }
@keyframes qt-c {
  0%, 12%  { left: 28%; top: 46%; opacity: 1; animation-timing-function: cubic-bezier(.3,0,.7,1); }
  34%      { left: 52%; top: 46%; animation-timing-function: ease-out; }
  44%, 86% { left: 58%; top: 46%; opacity: 1; }
  92%      { left: 58%; top: 46%; opacity: 0; }
  93%      { left: 28%; top: 46%; opacity: 0; }
  100%     { left: 28%; top: 46%; opacity: 1; }
}
@keyframes qt-trail { 0%, 14% { width: 0; opacity: 0; } 20% { opacity: 0.6; } 34% { width: 24%; opacity: 0.6; } 44%, 100% { width: 24%; opacity: 0; } }
@keyframes qt-keys { 0%, 26% { opacity: 0; } 28%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes qt-w {
  0%, 34%  { left: 22%; top: 18%; width: 42%; height: 56%; opacity: 1; }
  42%, 86% { left: 50%; top: 0; width: 50%; height: 91%; opacity: 1; }
  92%      { left: 50%; top: 0; width: 50%; height: 91%; opacity: 0; }
  93%      { left: 22%; top: 18%; width: 42%; height: 56%; opacity: 0; }
  100%     { left: 22%; top: 18%; width: 42%; height: 56%; opacity: 1; }
}

/* 7. stash: the window slides off the right edge, the pointer touches the sliver, it slides back, then away */
.sc-stash .w { left: 46%; top: 18%; width: 40%; height: 56%; animation: st-w 9s ease-in-out infinite; }
.sc-stash .cur { animation: st-c 9s ease-in-out infinite; }
.sc-stash .t1 { animation: st-t1 9s infinite; }
.sc-stash .t2 { animation: st-t2 9s infinite; }
.sc-stash .tag { left: 10px; right: auto; }
@keyframes st-w {
  0%, 8%   { left: 46%; }
  18%, 40% { left: 95%; }
  46%, 60% { left: 60%; }
  68%, 76% { left: 95%; }
  86%, 100% { left: 46%; }
}
@keyframes st-c {
  0%, 20%  { left: 24%; top: 62%; }
  36%, 60% { left: 98%; top: 40%; }
  66%, 100% { left: 24%; top: 62%; }
}
@keyframes st-t1 { 0%, 6% { opacity: 0; } 8%, 30% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes st-t2 { 0%, 76% { opacity: 0; } 78%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* 8. layout: three scattered windows, one shortcut, every window in its place */
.sc-layout .w { animation: ly-w 9s ease-in-out infinite; }
.sc-layout .w:nth-of-type(1) { --tb: var(--w1); --sx: 6%;  --sy: 12%; --sw: 40%; --sh: 50%; --lx: 0%;  --ly: 0%;    --lw: 50%; --lh: 91%; }
.sc-layout .w:nth-of-type(2) { --tb: var(--w3); --sx: 44%; --sy: 6%;  --sw: 36%; --sh: 44%; --lx: 50%; --ly: 0%;    --lw: 50%; --lh: 45.5%; }
.sc-layout .w:nth-of-type(3) { --tb: var(--w5); --sx: 30%; --sy: 40%; --sw: 42%; --sh: 40%; --lx: 50%; --ly: 45.5%; --lw: 50%; --lh: 45.5%; }
.sc-layout .keys { left: auto; right: 10px; top: auto; bottom: calc(9% + 10px); opacity: 0; animation: ly-keys 9s infinite; }
.sc-layout .tag { animation: ly-tag 9s infinite; }
@keyframes ly-w {
  0%, 34%  { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); opacity: 1; }
  44%, 86% { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); opacity: 1; }
  92%      { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); opacity: 0; }
  93%      { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); opacity: 0; }
  100%     { left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh); opacity: 1; }
}
@keyframes ly-keys { 0%, 22% { opacity: 0; } 25%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes ly-tag { 0%, 40% { opacity: 0; } 44%, 84% { opacity: 1; } 88%, 100% { opacity: 0; } }

/* new scenes hold still on their finished state when motion is reduced */
@media (prefers-reduced-motion: reduce) {
  .sc-quick .w { left: 50%; top: 0; width: 50%; height: 91%; }
  .sc-thirds .w { left: 0; top: 0; width: 33.33%; height: 91%; }
  .sc-thirds .t1, .sc-layout .tag, .sc-stash .t1 { opacity: 1; }
  .sc-stash .w { left: 95%; }
  .sc-layout .w { left: var(--lx); top: var(--ly); width: var(--lw); height: var(--lh); }
  .sc-quick .cur, .sc-stash .cur, .sc-quick .trail { opacity: 0; }
}

/* 9. move & resize from anywhere: Alt moves, Alt+Shift resizes from the nearest corner, Esc puts it back */
.sc-mr .w { left: 26%; top: 20%; width: 36%; height: 46%; animation: mr-w 8s ease-in-out infinite; }
.sc-mr .cur { animation: mr-c 8s ease-in-out infinite; }
.sc-mr .keys { left: auto; right: 10px; top: auto; bottom: calc(9% + 10px); }
.sc-mr .ka, .sc-mr .ks, .sc-mr .ke { opacity: 0; }
.sc-mr .ka { animation: mr-ka 8s infinite; }
.sc-mr .ks { animation: mr-ks 8s infinite; }
.sc-mr .ke { animation: mr-ke 8s infinite; }
.sc-mr .tag { left: 10px; right: auto; }
.sc-mr .t1 { animation: mr-t1 8s infinite; }
.sc-mr .t2 { animation: mr-t2 8s infinite; }
.sc-mr .t3 { animation: mr-t3 8s infinite; }
@keyframes mr-w {
  0%, 12%  { left: 26%; top: 20%; width: 36%; height: 46%; }
  30%, 40% { left: 40%; top: 14%; width: 36%; height: 46%; }
  58%, 68% { left: 40%; top: 14%; width: 52%; height: 66%; }
  72%, 100% { left: 40%; top: 14%; width: 36%; height: 46%; }
}
@keyframes mr-c {
  0%, 12%  { left: 42%; top: 42%; opacity: 1; }
  30%, 38% { left: 56%; top: 36%; }
  42%      { left: 70%; top: 52%; }
  58%, 92% { left: 86%; top: 72%; opacity: 1; }
  96%      { left: 86%; top: 72%; opacity: 0; }
  97%      { left: 42%; top: 42%; opacity: 0; }
  100%     { left: 42%; top: 42%; opacity: 1; }
}
@keyframes mr-ka { 0%, 8% { opacity: 0; } 10%, 36% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes mr-ks { 0%, 42% { opacity: 0; } 44%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes mr-ke { 0%, 66% { opacity: 0; } 67%, 74% { opacity: 1; background: var(--tile); } 76%, 100% { opacity: 0; } }
@keyframes mr-t1 { 0%, 8% { opacity: 0; } 10%, 36% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes mr-t2 { 0%, 42% { opacity: 0; } 44%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes mr-t3 { 0%, 67% { opacity: 0; } 69%, 90% { opacity: 1; } 93%, 100% { opacity: 0; } }

/* 10. step race: the same goal (window in the left third) done two ways, side by side */
.race { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 1rem; }
.race > div { min-width: 0; display: grid; gap: 0.6rem; align-content: start; }
.race .who { font-family: var(--font-display); font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.race .who span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); font-weight: 400; }
.race ol { margin: 0; padding-left: 1.3rem; font-size: 0.88rem; color: var(--fg-muted); }
.race li { padding: 0.1rem 0.3rem; border-radius: 5px; }
.race .sc .w { left: 30%; top: 18%; width: 42%; height: 56%; }
.race .ed { position: absolute; left: 14%; top: 12%; width: 72%; height: 62%; z-index: 4; border-radius: 8px; background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--win-shadow); opacity: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 18px 8px 8px; animation: rc-ed 10s infinite; }
.race .ed i { border: 1.5px dashed var(--fg-muted); border-radius: 4px; opacity: 0.6; }
.race .slow .w { animation: rc-slow 10s ease-in-out infinite; }
.race .fast .w { animation: rc-fast 10s ease-in-out infinite; }
.race .fast .keys { left: auto; right: 10px; top: auto; bottom: calc(9% + 10px); }
.race .fast .press { animation: rc-press 10s infinite; }
.race .slow li:nth-child(1) { animation: rc-s1 10s infinite; }
.race .slow li:nth-child(2) { animation: rc-s2 10s infinite; }
.race .slow li:nth-child(3) { animation: rc-s3 10s infinite; }
.race .slow li:nth-child(4) { animation: rc-s4 10s infinite; }
.race .slow li:nth-child(5) { animation: rc-s5 10s infinite; }
.race .fast li:nth-child(1) { animation: rc-f1 10s infinite; }
.race .done { position: absolute; right: 10px; top: 10px; z-index: 6; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 0.8rem; font-weight: 600; opacity: 0; }
.race .slow .done { animation: rc-done-s 10s infinite; }
.race .fast .done { animation: rc-done-f 10s infinite; }
@keyframes rc-ed { 0%, 6% { opacity: 0; } 8%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes rc-slow { 0%, 66% { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; } 72%, 92% { left: 0; top: 0; width: 33.33%; height: 91%; opacity: 1; } 96% { opacity: 0; left: 0; top: 0; width: 33.33%; height: 91%; } 97%, 100% { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; } }
@keyframes rc-fast { 0%, 6% { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; } 9%, 92% { left: 0; top: 0; width: 33.33%; height: 91%; opacity: 1; } 96% { opacity: 0; left: 0; top: 0; width: 33.33%; height: 91%; } 97%, 100% { left: 30%; top: 18%; width: 42%; height: 56%; opacity: 1; } }
@keyframes rc-press { 0%, 5%, 8%, 100% { transform: translateY(0); background: var(--bg-raised); } 6%, 7% { transform: translateY(2px); background: var(--tile); } }
@keyframes rc-s1 { 0%, 6% { background: transparent; color: inherit; } 8%, 18% { background: var(--note); color: var(--fg); } 20%, 100% { background: transparent; } }
@keyframes rc-s2 { 0%, 19% { background: transparent; } 21%, 30% { background: var(--note); color: var(--fg); } 32%, 100% { background: transparent; } }
@keyframes rc-s3 { 0%, 31% { background: transparent; } 33%, 42% { background: var(--note); color: var(--fg); } 44%, 100% { background: transparent; } }
@keyframes rc-s4 { 0%, 43% { background: transparent; } 45%, 56% { background: var(--note); color: var(--fg); } 58%, 100% { background: transparent; } }
@keyframes rc-s5 { 0%, 57% { background: transparent; } 59%, 72% { background: var(--note); color: var(--fg); } 74%, 100% { background: transparent; } }
@keyframes rc-f1 { 0%, 4% { background: transparent; } 5%, 12% { background: var(--note); color: var(--fg); } 14%, 100% { background: transparent; } }
@keyframes rc-done-s { 0%, 72% { opacity: 0; } 74%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes rc-done-f { 0%, 9% { opacity: 0; } 11%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sc-mr .w { left: 40%; top: 14%; width: 36%; height: 46%; }
  .sc-mr .t3, .sc-mr .ke, .race .done { opacity: 1; }
  .race .w { left: 0 !important; top: 0 !important; width: 33.33% !important; height: 91% !important; }
  .race .ed { opacity: 0; }
}

/* ---------- compare pages ---------- */
/* the same verifiable facts under every compare page's lede */
.doc .strip { max-width: none; list-style: none; padding: 0.7rem 0.9rem; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-muted); }
.doc .strip li { margin: 0; }
/* "choose X if / choose TesseraSnap if" */
.doc .verdict { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 0 0 1.5rem; }
.doc .verdict > div { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: var(--bg-raised); }
.doc .verdict > div.us { border-color: var(--accent); }
.doc .verdict h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.doc .verdict ul { margin: 0; padding-left: 1.1rem; }
.doc .verdict li { margin-bottom: 0.3rem; }
.doc .sources { font-size: 0.82rem; color: var(--fg-muted); }
.doc .sources a { color: var(--fg-muted); }

/* ---------- guide: sidebar + long-form pages (site/guide/) ---------- */
.guide { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 3rem; align-items: start; padding-block: 2rem 4rem; }
.guide > * { min-width: 0; }
.toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; font-size: 0.92rem; padding-bottom: 1rem; }
.toc h2, .toc .toc-h { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: 1.2rem 0 0.35rem 0.6rem; }
.toc h2:first-child, .toc .toc-h:first-child { margin-top: 0.2rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc a { display: block; padding: 0.28rem 0.6rem; border-radius: 6px; color: var(--fg); text-decoration: none; }
.toc a:hover { background: var(--tile); }
.toc a[aria-current="page"] { background: var(--tile); font-weight: 600; }
@media (max-width: 820px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-top: 0.75rem; }
  .toc { position: static; max-height: none; overflow: visible; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 0.4rem 0.6rem 0.8rem; }
  .toc h2 { margin-top: 0.9rem; }
  .toc ul { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

.doc { max-width: 72ch; }
.doc.hub { max-width: none; }
/* Beside the sidebar the page fills the rest of the width, so it lines up with the header and footer. */
.guide .doc { max-width: none; }
.guide .doc p, .guide .doc ul, .guide .doc ol, .guide .doc .tip { max-width: none; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 0.5rem 0 0.9rem; }
.doc h2 { font-size: clamp(1.3rem, 3vw, 1.55rem); margin: 2.6rem 0 0.8rem; scroll-margin-top: 1rem; }
.doc h3 { margin: 1.9rem 0 0.6rem; scroll-margin-top: 1rem; }
.doc h2 + h3 { margin-top: 1rem; }
.doc p, .doc ul, .doc ol, .doc dl, .doc pre, .doc .tablewrap, .doc .tip, .doc figure { margin-top: 0; margin-bottom: 1rem; }
.doc .lede { font-size: 1.12rem; color: var(--fg-muted); margin-bottom: 1.5rem; }
.doc ul, .doc ol { padding-left: 1.35rem; max-width: 65ch; }
.doc li + li { margin-top: 0.35rem; }
.doc li > ul, .doc li > ol { margin: 0.35rem 0 0; }
.doc code { overflow-wrap: anywhere; }
.doc :not(pre) > code { padding: 0.05em 0.35em; border-radius: 4px; background: var(--bg-raised); border: 1px solid var(--line); }
.doc pre { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; max-width: 100%; }
.doc pre code { overflow-wrap: normal; white-space: pre; }
.doc var { font-style: italic; }
.doc table { font-size: 0.93rem; }
.doc th { white-space: nowrap; }
.doc td code { white-space: nowrap; overflow-wrap: normal; }
.doc .eyebrow.pro, .doc h3 .eyebrow, .doc td .eyebrow { color: var(--pro); }
.doc h3 .eyebrow, .doc td .eyebrow { font-size: 0.7rem; margin-left: 0.35rem; vertical-align: middle; }
.doc h2 .soon { font-size: 0.7rem; margin-left: 0.4rem; vertical-align: middle; }

/* settings: on-screen name, config key, then the explanation */
.doc dl.settings { display: grid; gap: 0; border-top: 1px solid var(--line); }
.doc dl.settings dt { font-weight: 600; padding-top: 0.8rem; }
.doc dl.settings dt code { font-weight: 400; font-size: 0.8em; color: var(--fg-muted); margin-left: 0.3rem; white-space: nowrap; }
.doc dl.settings dd { margin: 0.2rem 0 0; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }

/* callout for tips and notes */
.tip { background: var(--note); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 0.8rem 1rem; max-width: 65ch; }
.tip > strong:first-child { font-family: var(--font-display); font-weight: 600; margin-right: 0.35rem; }
.tip.pro { background: var(--pro-soft); border-left-color: var(--pro); }

/* demo pictures reused from the landing page */
.doc figure.shot { max-width: 26rem; margin-inline: 0; }
.doc figure.shot figcaption { font-size: 0.85rem; color: var(--fg-muted); margin-top: 0.5rem; }
.doc .lay { margin-bottom: 1.5rem; }

/* hub cards */
.cards { margin-bottom: 0.5rem; }
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.doc .card .eyebrow { margin-bottom: 0.15rem; }
.doc .card h3 { margin: 0; }
.doc .card p { margin: 0; }
/* pinned to the bottom, so every card's link sits on the same line across a row */
.doc .card .more { margin-top: auto; padding-top: 0.4rem; font-weight: 500; }
.hub h2 { margin-top: 2.2rem; }

/* previous / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: 0.1rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); color: var(--fg); text-decoration: none; font-family: var(--font-display); font-weight: 600; }
.pager a:hover { border-color: var(--accent); }
.pager a span { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.pager .next { grid-column: 2; text-align: right; }
@media (max-width: 520px) { .pager { grid-template-columns: 1fr; } .pager .next { grid-column: auto; } }

/* Site footer: brand plus four link columns; two columns on phones. */
.foot { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
.foot nav { display: grid; gap: 0.45rem; align-content: start; }
.foot a { color: var(--fg-muted); text-decoration: none; }
.foot a:hover { color: var(--fg); }
.foot .brand { color: var(--fg); font-size: 1.05rem; }
.foot-brand p { margin: 0.6rem 0 0; max-width: 24ch; }
.foot-h { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); margin: 0 0 0.15rem; }
.foot-legal { grid-column: 1 / -1; margin: 0.75rem 0 0; font-size: 0.85rem; max-width: none; }
@media (max-width: 760px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* Standalone pages (pricing, download, FAQ, legal, compare) reuse the guide's .doc article. */
.page { padding-block: 2rem 4rem; }
h1.title { font-size: clamp(1.8rem, 4.5vw, 2.4rem); margin-top: 0.6rem; }
@media (max-width: 420px) { .nav { gap: 0.6rem 1rem; } }

/* New pages (pricing, download, support, 404): button rows, plan cards and link cards inside .doc. */
.doc .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; }
.doc .plans { margin-bottom: 0.75rem; }
.doc .plan ul { margin: 0; padding-left: 1.1rem; }
.doc p.fine { font-size: 0.85rem; }
.doc .dl-box { margin-bottom: 1.5rem; border-color: var(--accent); }
.doc .dl-box .actions { margin: 0.5rem 0 0; }
.doc a.card { color: var(--fg); text-decoration: none; }
.doc a.card:hover { border-color: var(--accent); }
.doc .grid.cards { margin-bottom: 1rem; }

/* Compare pages: call-to-action buttons inside an article. */
.doc .cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 1.5rem; }

/* ---------- accent color picker (accent.js) ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sw { position: relative; display: block; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); transition: transform 0.15s ease; }
.sw:hover { transform: scale(1.12); }
.sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sw:has(input:checked), .sw.on { box-shadow: 0 0 0 2px var(--bg-raised), 0 0 0 4px var(--sw); }
.sw:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 4px; }
.sw-custom { background: var(--sw, conic-gradient(#D64545, #E8862A, #E8C22A, #2E9E5B, #1BA39C, #1F7AE0, #7C5CD6, #D6479A, #D64545)); }
.sw-custom::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 var(--font-body); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); pointer-events: none; }
.sw-custom.on::after { content: ""; }

.accent { position: relative; }
@media (max-width: 760px) { .top .accent { order: 1; margin-left: auto; } .top .nav { order: 2; flex-basis: 100%; margin-left: 0; } }
.accent summary { list-style: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: var(--bg-raised); }
.accent summary::-webkit-details-marker { display: none; }
.accent summary:hover { border-color: var(--accent); }
.accent summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.accent .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); transition: background 0.2s ease; }
.accent-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 316px; max-width: calc(100vw - 32px); padding: 0.9rem; display: grid; gap: 0.7rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.accent-h { font-family: var(--font-display); font-weight: 600; }
.accent-note { font-size: 0.82rem; color: var(--fg-muted); line-height: 1.45; }
.accent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.9rem; }
.accent-label { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.demo .ghost { transition: opacity 0.25s ease; }
.demo.peek .ghost { animation: none; opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .sw, .accent .dot { transition: none; } .sw:hover { transform: none; } }

/* home: short "also included" lists under each tier's demos */
.also { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.also li { color: var(--fg-muted); font-size: 0.95rem; padding-left: 0.9rem; border-left: 2px solid var(--line); }
.tier-pro .also li { border-left-color: var(--accent); }
.also b { display: block; color: var(--fg); font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.tier-pro .layouts { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
.plans-note { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; align-items: center; font-size: 0.9rem; }
.tier-head h2 { align-self: center; }

/* header popover: Auto / Light / Dark */
.theme-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; background: var(--bg); }
.theme-seg label { position: relative; cursor: pointer; }
.theme-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.theme-seg span { display: block; text-align: center; font-size: 0.85rem; padding: 0.35rem 0; border-radius: 7px; color: var(--fg-muted); }
.theme-seg input:checked + span { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.theme-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- compare pages (site/compare/): full width and short ----------
   hero (question, one-line answer, chips, buttons) → the race → "where TesseraSnap is better"
   (.ways demos + .also) → a short table → .fair cards (stay with X / run both) → try → sources */
.cmp section { padding-block: 3rem; }
.cmp-hero { display: grid; gap: 1.1rem; padding-block: 2.5rem 3rem !important; }
.cmp-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 5.5vw, 3.3rem); }
.cmp-hero .lede { font-size: 1.2rem; color: var(--fg-muted); max-width: 58ch; }
.cmp-hero .cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.cmp h2 { margin-bottom: 0.5rem; }
.cmp .sub { color: var(--fg-muted); margin-bottom: 1.75rem; }
.cmp .race { margin: 0; gap: 1.5rem; }
.cmp .race .sc { aspect-ratio: 16 / 9; }
.cmp .ways .eyebrow.pro::after { content: " · Pro"; }
.cmp table { font-size: 0.95rem; }
.cmp th:first-child, .cmp td:first-child { width: 30%; color: var(--fg-muted); }
.cmp td.us, .cmp th.us { background: var(--note); }
.cmp td .yes, .cmp td .no { margin-right: 0.35rem; }
.fair { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fair > div { border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.4rem; background: var(--bg-raised); display: grid; gap: 0.6rem; align-content: start; }
.fair ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; color: var(--fg-muted); }
.fair li b { color: var(--fg); }
.cmp-try { display: grid; gap: 1rem; justify-items: start; }
.cmp-try .cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cmp-more { display: grid; gap: 0.6rem; margin-top: 1rem; }
.cmp details.sources { font-size: 0.82rem; color: var(--fg-muted); padding-block: 1.5rem 0; border-top: 1px solid var(--line); }
.cmp details.sources summary { cursor: pointer; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cmp details.sources p { margin-top: 0.75rem; max-width: none; }
.cmp details.sources a { color: var(--fg-muted); }
ul.pills { list-style: none; margin: 0; padding: 0; }
li.pill { color: var(--fg-muted); }

/* ---------- pricing page: full-width sections like the home page ---------- */
.pricing-page section:first-child { padding-top: 2.5rem; }
.pr-head { display: grid; gap: 0.9rem; justify-items: center; text-align: center; margin-bottom: 2.5rem; }
.pr-head h1 { font-size: clamp(2rem, 5vw, 3rem); }
.pr-head .lede { font-size: 1.15rem; max-width: 62ch; }
.sec-head { display: grid; gap: 0.75rem; margin-bottom: 1.75rem; }
.sec-head .tip { max-width: none; }
.pricing-page h2 { scroll-margin-top: 1rem; }
.pricing-page h2 .soon, .pricing-page h3 .soon { margin-left: 0.4rem; vertical-align: middle; }
.packs-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pack { display: grid; gap: 0.35rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-raised); }
.pack .price { font-size: 2rem; }
.pack .save { margin-left: 0.35rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pro); white-space: nowrap; }
.pricing-page .fine { font-size: 0.85rem; margin-top: 1rem; max-width: none; }
.two { display: grid; gap: 1.5rem 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.two > * { min-width: 0; }
.two h2 { margin-bottom: 1rem; }
.two ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.two li + li { margin-top: 0.45rem; }
.two.cards { gap: 1rem; margin-top: 1.5rem; }
.card-lite { padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-raised); display: grid; gap: 0.5rem; align-content: start; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.steps li { counter-increment: step; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-raised); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-bottom: 0.7rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.faq-grid { display: grid; gap: 1.75rem 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.faq-grid h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.pr-more { margin-top: 2rem; }

/* ---------- about and 404: full-width sections ---------- */
.page-head { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 760px) { .page-head { grid-template-columns: 1fr; } }
.page-head h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
.page-head .body { display: grid; gap: 1rem; }
.page-head p { max-width: none; }
.cards3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards3 .card-lite p { max-width: none; font-size: 0.95rem; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.links-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.links-grid a { display: grid; gap: 0.25rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); color: var(--fg); text-decoration: none; }
.links-grid a:hover { border-color: var(--accent); }
.links-grid b { font-family: var(--font-display); font-weight: 600; color: var(--accent-text); }
.links-grid span { color: var(--fg-muted); font-size: 0.92rem; }

/* ---------- guide, help and legal pages: easier to scan ---------- */
/* Section headings in the accent color, each section set off by a rule. */
.doc h2 { color: var(--accent-text); padding-top: 1.6rem; border-top: 1px solid var(--line); margin-top: 2.2rem; }
.doc.hub h2 { border-top: 0; padding-top: 0; }
.doc h3 { font-size: 1.08rem; }
.cmp h2 { color: var(--accent-text); }
/* Bullets and step numbers in the accent color. */
.doc ul > li::marker { color: var(--accent); }
.doc > ol { list-style: none; counter-reset: step; padding-left: 0; }
.doc > ol > li { counter-increment: step; position: relative; padding-left: 2.2rem; }
.doc > ol > li::before { content: counter(step); position: absolute; left: 0; top: 0.1em; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; }
/* Settings: name and config key on the left, what it does on the right. */
.doc dl.settings { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); column-gap: 1.5rem; }
.doc dl.settings dt { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.doc dl.settings dt code { display: block; margin: 0.25rem 0 0; white-space: normal; overflow-wrap: anywhere; }
.doc dl.settings dd { margin: 0; padding: 0.7rem 0; }
@media (max-width: 640px) {
  .doc dl.settings { grid-template-columns: minmax(0, 1fr); }
  .doc dl.settings dt { border-bottom: 0; padding-bottom: 0; }
}
/* FAQ: one collapsed row per question. */
.doc details.qa { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raised); margin: 0 0 0.6rem; scroll-margin-top: 1rem; }
.doc details.qa > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.doc details.qa > summary::-webkit-details-marker { display: none; }
.doc details.qa > summary::after { content: "+"; flex: none; color: var(--accent-text); font-size: 1.35rem; line-height: 1; transition: transform 0.15s; }
.doc details.qa[open] > summary::after { transform: rotate(45deg); }
.doc details.qa > summary:hover { color: var(--accent-text); }
.doc details.qa > :not(summary) { margin: 0 1.1rem 0.9rem; }
.doc details.qa + h2 { margin-top: 2.2rem; }
@media (prefers-reduced-motion: reduce) { .doc details.qa > summary::after { transition: none; } }