/* The site's two typefaces, served from oddlyhelpful.com itself since 2026-10-01 (the configurator's public/fonts/, at
   /container/fonts/): no page asks Google Fonts for them, and the Content-Security-Policy names no other origin.
   Variable files, one per character set, each covering both weights the site uses. Archivo and Inter are under the
   SIL Open Font License. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/container/fonts/archivo-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/container/fonts/archivo-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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/container/fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/container/fonts/inter-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; }
/* oddlyhelpful.mhilo.com: the mhilo.com language (paper, ink, tomato; Archivo over Inter), a card gallery of the projects. */
:root {
  --paper: #f7f6f1; --paper-deep: #eeefe8; --ink: #0b0b0b; --smoke: #8a8a86; --smoke-light: #5a5a56;
  --line: #e5e4df; --line-strong: #cfd0c9; --tomato: #ff5d3b; --tomato-deep: #c93c20; --teal: #174f49; --stage: #272e34; --amber: #edbc72;
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max: 1320px; --gutter: clamp(16px, 4vw, 64px); --control-h: 44px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.2s; --dur: 0.5s;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, figure, ul { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -0.045em; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }
.tomato { color: var(--tomato); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 20; background: var(--ink); color: #fff; padding: 12px 24px; }
.skip-link:focus { top: 10px; }

/* the header, the project pages' own (container-configurator/src/styles.css): 52 px, 56 on a phone, the wordmark stepping
   down with the width, so the name and the account circle sit on the same pixels on every page */
.site-header { min-height: 52px; background: rgba(247, 246, 241, 0.97); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.header-inner { min-height: 52px; max-width: var(--max); padding-inline: var(--gutter); margin: auto; display: flex; align-items: center; gap: 24px; }
.wordmark { font: 500 26px/1 var(--display); letter-spacing: -0.06em; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--control-h); }
.wordmark span { color: var(--tomato); }
.header-project { font-size: 13px; color: var(--smoke-light); padding-left: 20px; border-left: 1px solid var(--line); }
/* the account circle at the right, as on the project pages (its styles come with it, from the configurator's build) */
.header-end { margin-left: auto; display: flex; align-items: center; }
/* the home page's ticker where Projects was (the owner, 2026-10-03, the configurator's src/site/ticker.ts): one line at a
   time, a dot of its kind's color, its label and its text, cut short with an ellipsis; its pause button at the line's
   end, shown with the pointer over the header (the owner, 2026-10-03), with the focus on it, and on a screen with no
   hover, where nothing else could show it */
.ticker { display: flex; align-items: center; min-width: 0; flex: 0 1 640px; }
.ticker.is-live { padding-left: 20px; border-left: 1px solid var(--line); gap: 2px; }
.ticker-line { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.ticker-item { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; font-size: 13px; color: var(--smoke-light); text-decoration: none; }
a.ticker-item:hover .ticker-text { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ticker-item.is-entering { animation: tickerIn 360ms var(--ease-out); }
@keyframes tickerIn { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
.ticker-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tomato); }
.ticker-dot--beta { background: var(--amber); }
.ticker-dot--reading { background: var(--teal); }
.ticker-label { flex: none; font: 700 11px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.ticker-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-out { flex: none; color: var(--tomato); }
.ticker-pause { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--smoke-light); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.site-header:hover .ticker-pause, .ticker-pause:focus-visible { opacity: 1; }
@media (hover: none) { .ticker-pause { opacity: 1; } }
.ticker-pause:hover { color: var(--ink); background: var(--paper-deep); }
.ticker-phone:empty { display: none; }
.ticker-phone { margin-top: 16px; border-bottom: 1px solid var(--line); }
.ticker-phone .ticker.is-live { padding-left: 0; border-left: 0; }
@media (max-width: 600px) { .wordmark { font-size: 24px; } }
@media (max-width: 380px) { .wordmark { font-size: 22px; } }
.text-link { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 4px; font-weight: 500; }
.text-link span { color: var(--tomato); margin-left: 6px; transition: transform var(--dur-fast); }
.text-link:hover span { transform: translate(2px, -2px); }

.intro { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; align-items: flex-start; }
h1 { font-size: clamp(44px, 6.4vw, 86px); line-height: 1.01; letter-spacing: -0.055em; margin: 0 0 20px; }
.lead { font-size: 18px; line-height: 1.65; max-width: 540px; color: #50574f; }

.projects { padding-block: 40px 80px; }
/* the write-ups, after the projects: the projects' own gap above them, as the tools have */
.betas, .blog { padding-block: 0 80px; }   /* the projects in beta, a section of their own under the launched ones (the owner, 2026-10-02) */
.section-label { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; letter-spacing: 0.05em; color: var(--smoke-light); margin-bottom: 28px; }
.section-label span:first-child { color: var(--tomato-deep); white-space: nowrap; }
/* the section titles in the headings' face and in bold, to read as titles (the owner, 2026-10-03); Archivo's files
   carry the weight, 400 to 700 */
.section-label { font-family: var(--display); font-size: 13px; font-weight: 600; }
.section-label span:first-child { font-weight: 700; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 28px; border-top: 1px solid var(--line); padding-top: 28px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
.card-link { display: flex; flex-direction: column; height: 100%; border-radius: 3px; }
.thumb { aspect-ratio: 4 / 3; overflow: hidden; background: #2c333b; border-radius: 3px; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur) var(--ease-out); }
.card-link:hover .thumb img { transform: scale(1.03); }
/* labels on a thumbnail, top left, over the render's corner caption, which is texture there rather than information: what
   just arrived, what the visitor sizes for themselves, and what is a write-up rather than a tool */
.thumb-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.thumb-badge { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; line-height: 1; }
.thumb-badge--new { background: var(--tomato); color: #fff; }
.thumb-badge--custom { background: var(--paper); color: var(--ink); }
.thumb-badge--blog { background: var(--teal); color: #fff; }
/* open only to the accounts the owner lets into the beta: the configurator's callout amber (the owner, 2026-10-02),
   7.9 : 1 against the stage's slate, where ink was 1.4 : 1 and leaned on an edge to show at all */
.thumb-badge--beta { background: var(--amber); color: var(--ink); }
.thumb--empty { background-color: #e9ece4; background-image: linear-gradient(#c6cec440 1px, transparent 1px), linear-gradient(90deg, #c6cec440 1px, transparent 1px); background-size: 30px 30px; display: flex; align-items: center; justify-content: center; }
.thumb--empty span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #4b5d50; border: 1px dashed #8b9b8b; padding: 8px 12px; }
.card-body { flex: 1; padding: 18px 0 6px; display: grid; grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto 1fr auto; gap: 6px 12px; align-items: baseline; }
.card-num { font-size: 11px; letter-spacing: 0.05em; color: var(--smoke-light); font-weight: 500; padding-top: 6px; transition: color var(--dur-fast); }
.card-link:hover .card-num { color: var(--tomato); }
.card h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.03em; }
.card-type, .card-desc, .card-cta { grid-column: 2; }
.card-type { font-size: 11px; letter-spacing: 0.04em; color: var(--smoke-light); text-transform: uppercase; }
.card-desc { font-size: 15px; line-height: 1.55; color: var(--smoke-light); max-width: 34rem; margin-top: 4px; }
.card-cta { margin-top: 12px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; position: relative; width: fit-content; min-height: 32px; }
.card-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: right center; transition: transform var(--dur) var(--ease-out); }
.card-link:hover .card-cta::after { animation: underlineDraw 0.6s var(--ease-out); }
@keyframes underlineDraw { 0% { transform: scaleX(0); transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } }
.arrow { color: var(--tomato); display: inline-block; margin-left: 2px; transition: transform var(--dur-fast) var(--ease-out); }
.card-link:hover .arrow { transform: translate(2px, -2px); }
/* a beta card the account looking at it isn't let into: Beta access and a lock, in the arrow's place (the owner, 2026-10-03) */
.lock-mark { color: var(--tomato); display: inline-flex; margin-left: 2px; }
.lock-mark svg { display: block; }
.card--soon .card-link { cursor: default; }
.card-cta--soon { color: var(--smoke-light); font-style: italic; }
.card-cta--soon::after { display: none; }

/* Coming soon over a card's picture */
/* not open yet: the 3D stage's slate */
.thumb-badge--soon { background: var(--stage); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(247, 246, 241, 0.3); }   /* the edge keeps it apart from a dark stage behind it */

/* The footer, one design on every page of oddlyhelpful.com, written into each by site-oddlyhelpful/scripts/footer.mjs:
   the name, its line and the social links; three columns of links (the site, help, the legal pages), since payments
   opened (docs/monetization.md); the copyright and mhilo.com under a rule. Two columns on a phone. The site's styles.css
   and the configurator's src/styles.css carry the same block: change both. */
.footer { position: relative; padding-block: 40px 20px; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 28px 40px; }
/* its rule spans the content, not the side margins the page keeps */
.footer::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer-mark { display: inline-flex; align-items: center; min-height: var(--control-h); font: 500 20px/1 var(--display); letter-spacing: -0.05em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.footer-mark span { color: var(--tomato); }
.footer-tag { margin: 0; font-size: 13px; color: var(--smoke-light); }
/* each glyph a 44 px target, the row pulled left so the first glyph lines up with the name */
.footer-social { list-style: none; margin: 10px 0 0 -12px; padding: 0; display: flex; flex-wrap: wrap; }
.footer-social a { display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); border-radius: 50%; color: var(--ink); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.footer-social a:hover { color: var(--tomato-deep); background: var(--paper-deep); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-head { margin: 0 0 4px; font: 600 13px/1.2 var(--display); letter-spacing: 0; color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: var(--control-h); min-width: 44px; font-size: 13px; color: var(--smoke-light); text-decoration: none; }
.footer-col a:hover, .footer-col a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; border-top: 1px solid var(--line); padding-top: 8px; }
.footer-legal { margin: 0; font-size: 13px; color: var(--smoke-light); white-space: nowrap; }
.footer-out { display: inline-flex; align-items: center; gap: 4px; min-height: var(--control-h); font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.footer-out:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer-out span { color: var(--tomato); text-decoration: none; }
@media (max-width: 640px) {
  .footer { grid-template-columns: 1fr; gap: 20px; padding-block: 32px 16px; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
}

/* a page of plain reading, as the privacy page: one measure, headings in the display face */
.prose { max-width: 680px; padding-block: 8px 80px; }
.prose h2 { font-size: 24px; letter-spacing: -0.03em; margin: 40px 0 12px; }
.prose p, .prose ul { font-size: 16px; line-height: 1.65; color: #3d423c; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 12px; }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose-date { font-size: 13px; color: var(--smoke-light); }
.inline-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tomato); }
@media (max-width: 740px) { .site-header { min-height: 56px; } .header-project { display: none; } .intro { padding-top: 32px; } .lead { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Tools we use: under the gallery, four plain rows of what the projects are measured and printed with, each with its
   link out. Links are plain for now; an affiliate one gets rel="sponsored" and a disclosure line under the list. */
.tools { padding-block: 0 80px; }
/* the sections as tabs under the title (the owner, 2026-10-03: the page grew long): the bar stays under the header as
   the page scrolls. With no script the tabs are links down to each section and every section shows; with it, one
   shows at a time (the configurator's src/site/home-tabs.ts), and its title is the tab, so the section keeps its line */
.home-tabs { position: sticky; top: 52px; z-index: 4; display: flex; gap: 4px; margin: 0 0 32px; border-bottom: 1px solid var(--line); background: rgba(247, 246, 241, 0.97); overflow-x: auto; scrollbar-width: none; }
.home-tabs::-webkit-scrollbar { display: none; }
.home-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 700 15px/1 var(--display); letter-spacing: -0.01em; color: var(--smoke-light); text-decoration: none; white-space: nowrap; }
.home-tab:hover { color: var(--ink); }
.home-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--tomato); }
.home-tab[hidden] { display: none; }
.home-tab:focus-visible { outline-offset: -3px; }
.home-tab-count { font: 700 11px/1 var(--display); letter-spacing: 0.05em; color: var(--tomato-deep); }
.has-home-tabs main > section[role="tabpanel"] { padding-top: 0; }
.has-home-tabs .section-label span:first-child { display: none; }
.has-home-tabs .section-label { justify-content: flex-start; }
section[data-empty] { display: none; }
@media (max-width: 740px) { .home-tabs { top: 56px; } .home-tab { padding: 0 10px; font-size: 14px; } }
/* a phone's width holds all four, counts and all, with no bar to scroll */
@media (max-width: 400px) { .home-tabs { gap: 0; justify-content: space-between; } .home-tab { gap: 4px; padding: 0 6px; font-size: 13px; } .home-tab-count { font-size: 10px; } }
.tool-list { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 720px) { .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .tool-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 48px; } }   /* three tools, three columns: measuring, photographing, printing */
/* each tool six rows of the list's own grid, its picture, kind, name, description, links and Amazon's line, so each
   lines up across the columns, the links level whether or not a tool has a line under them */
.tool { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; justify-items: start; align-content: start; }
/* its picture: square, so a photo's own captions are never cropped, on the project cards' stage and corners */
.tool-pic { aspect-ratio: 1; width: 100%; margin: 0 0 16px; justify-self: stretch; }
.tool-kind { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--smoke-light); margin: 0 0 8px; }
.tool h3 { font-size: 20px; margin: 0 0 8px; }
.tool-desc { color: var(--smoke-light); margin: 0 0 12px; }
.tool .text-link { margin-left: -4px; }
/* a maker's models, one small link each, under its name */
.tool-links { list-style: none; margin: 0 0 0 -4px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }   /* -4px: the links' own padding, so the first starts on the text's edge */
.tool-links .text-link { margin-left: 0; min-width: var(--control-h); }
.tool-links .text-link .visually-hidden { margin: 0; }
@media (max-width: 380px) { .tool-links { gap: 0 12px; } }   /* the calipers' three lengths stay on one line on a phone */
/* Amazon's required line, just under its links (the owner, 2026-09-27) */
.tool-note { margin: 4px 0 0; font-size: 12px; color: var(--smoke-light); }

/* A write-up, as the Graphtec Ledge's page: the plain-reading measure, with its pictures and the files to download.
   A render sits on the 3D stage's slate, so its own dark edge meets the page as the card pictures do. */
.post-figure { margin: 4px 0 28px; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 3px; background: var(--paper-deep); }
.post-figure--stage img { background: var(--stage); }
.post-figure--sketch img { max-width: 480px; }
.post-figure--narrow img { max-width: 360px; }   /* a tall picture, the parts pulled apart, kept to a phone's width */
.post-figure figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--smoke-light); }
/* A write-up's files, offered as a configurator's Print step offers its own: the part filled, a fit test outlined, both
   one width with the download mark, and each file's size and print under its button */
.prose .downloads { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 18px; }
.prose .downloads li { margin: 0; display: grid; gap: 8px; }
.downloads .button, .downloads .ghost { width: 100%; max-width: 360px; justify-content: flex-start; gap: 8px; }
.prose .downloads p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--smoke-light); }
.button, .ghost { min-height: var(--control-h); padding: 0 18px; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; border-radius: 3px; text-decoration: none; }
.button { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background var(--dur-fast), border-color var(--dur-fast); }
.button:hover { background: var(--teal); border-color: var(--teal); }
.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); transition: border-color var(--dur-fast); }
.ghost:hover { border-color: var(--ink); }
.dl-icon { display: inline-flex; flex: none; }
.dl-icon svg { display: block; }
.prose .prose-note { font-size: 13px; line-height: 1.5; color: var(--smoke-light); }   /* over .prose p, which would set it at body size */

/* The legal pages' extras (terms/, refunds/): a line of jumps under the title, numbered steps, the licenses' subheads,
   and the draft note that stays until a lawyer has read them (docs/monetization.md § Going live). */
.prose h3 { font-size: 18px; letter-spacing: -0.02em; margin: 24px 0 8px; }
.prose ol { font-size: 16px; line-height: 1.65; color: #3d423c; padding-left: 22px; }
.prose ol + p, .prose p + ol { margin-top: 12px; }
.prose-toc { font-size: 14px; line-height: 2; color: var(--smoke-light); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.prose-toc a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.prose-toc a:hover { text-decoration-color: var(--tomato); color: var(--ink); }
.draft-note { max-width: 680px; margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--amber); background: var(--paper-deep); font-size: 14px; line-height: 1.5; color: var(--ink); }

/* Pricing (pricing/, docs/monetization.md): three plans side by side, Member on the configurator's dark stage as the one
   to look at, then the plans side by side in a table, then questions. One column on a phone, Member first. */
.plan-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 860px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fffdf8; font-size: 15px; }
.plan-welcome p { flex: 1 1 320px; }
.plan-welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.plan-welcome-actions[hidden], .plan-welcome-actions [hidden] { display: none; }
.plan-welcome-actions .plan-cta { min-height: var(--control-h); text-decoration: none; }
/* the welcome after a purchase (src/account/pricing.ts): what the plan gives, then the betas it opens, as small cards
   cut from the home page's own */
.welcome-more { display: grid; gap: 48px; margin: 0 0 72px; }
.welcome-more[hidden] { display: none; }
.welcome-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
.welcome-head h2 { font-size: 22px; letter-spacing: -0.03em; }
.welcome-head a { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tomato); min-height: var(--control-h); display: inline-flex; align-items: center; }
.welcome-perks { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; font-size: 16px; line-height: 1.45; max-width: 860px; }
.welcome-perks li { position: relative; padding-left: 28px; }
.welcome-perks li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.welcome-betas { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.welcome-beta { display: grid; gap: 8px; text-decoration: none; color: var(--ink); }
.welcome-beta img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--stage); }
.welcome-beta strong { font: 500 17px/1.2 var(--display); letter-spacing: -0.02em; }
.welcome-beta span { font-size: 13px; color: var(--smoke-light); }
.welcome-beta em { font-style: normal; font-size: 13px; font-weight: 500; }
.welcome-beta em::after { content: ' →'; color: var(--tomato); }
.welcome-beta:hover strong { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 640px) { .welcome-perks { grid-template-columns: 1fr; } }
.plan-welcome[hidden] { display: none; }
.plan-welcome-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: none; }
.plan-status { margin: 0 0 20px; font-size: 14px; color: var(--smoke-light); }
.plan-status.is-failed { color: var(--tomato-deep); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fffdf8; }
.plan-flag { position: absolute; top: -12px; left: 24px; padding: 4px 10px; border-radius: 3px; background: var(--tomato); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.plan-flag--teal { background: var(--teal); color: var(--paper); }
.plan-name { font-size: 22px; letter-spacing: -0.03em; }
.plan-price { margin-top: 14px; font-size: 15px; color: var(--smoke-light); }
.plan-price b { font: 500 44px/1 var(--display); letter-spacing: -0.045em; color: var(--ink); margin-right: 2px; }
.plan-for { margin-top: 6px; font-size: 14px; color: var(--smoke-light); }
.plan-perks { list-style: none; padding: 18px 0 0; margin: 18px 0 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 15px; line-height: 1.45; flex: 1; align-content: start; }
.plan-perks li { position: relative; padding-left: 26px; }
.plan-perks li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.plan-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--paper); font: 500 15px/1.2 var(--body); text-align: center; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.plan-cta:hover:not([disabled]) { background: var(--teal); border-color: var(--teal); }
.plan-cta[disabled] { opacity: 0.5; cursor: not-allowed; }
.plan-cta--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.plan-cta--ghost:hover { background: transparent; border-color: var(--ink); }
.plan-manage { margin-top: 10px; min-height: var(--control-h); border: 0; background: none; color: inherit; font: 500 14px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-manage[hidden] { display: none; }
/* Maker: paper on the stage, its buttons light and outlined on it */
.plan--maker { background: var(--stage); border-color: var(--stage); color: var(--paper); }
.plan--maker .plan-price, .plan--maker .plan-for { color: #c9cdc6; }
.plan--maker .plan-price b, .plan--maker .plan-name { color: var(--paper); }
.plan--maker .plan-perks { border-top-color: #ffffff26; }
.plan--maker .plan-perks li::before { border-color: var(--amber); }
.plan-cta--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.plan-cta--light:hover:not([disabled]) { background: var(--amber); border-color: var(--amber); }
.plan-cta--outline { background: transparent; color: var(--paper); border-color: #ffffff66; }
.plan-cta--outline:hover:not([disabled]) { background: transparent; border-color: var(--paper); }
.plans-fine { margin-top: 16px; font-size: 13px; color: var(--smoke-light); max-width: 680px; }
.section-title { font-size: 28px; letter-spacing: -0.035em; margin-bottom: 20px; }
.compare { padding-top: 72px; }
.compare-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.compare-table th, .compare-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare-table thead th { font: 600 13px/1.2 var(--display); color: var(--ink); }
.compare-table tbody th { font-weight: 500; color: var(--ink); width: 22%; }
.compare-table td { color: var(--smoke-light); }
.compare-table .is-maker { background: #2c333b0d; color: var(--ink); }
.faq { padding-block: 72px 80px; }
.faq-list { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font: 500 17px/1.35 var(--display); letter-spacing: -0.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 400 22px/1 var(--body); color: var(--tomato-deep); transition: transform var(--dur-fast) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; font-size: 15px; line-height: 1.65; color: #3d423c; max-width: 680px; }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; gap: 28px; max-width: 520px; }
  .plan--maker { order: -1; }
}