/* CadCraft — product pages: /apps, /apps/{slug}, /download, /roadmap, /pricing.
 * Loaded per page through header.inc's $extra_head. Tokens only; no theme-specific colours.
 * Sizes are rem (the root scales above 1920px); px only for hairlines and breakpoints.
 */

/* ---------- Concept drawings (app-sheet.inc + sheets/*.svg.inc) ---------- */
.cc-dwg { display: block; width: 100%; height: auto; color: var(--layer, var(--ink)); overflow: visible; }
.cc-dwg * { vector-effect: non-scaling-stroke; }
.cc-dwg .k, .cc-dwg .m, .cc-dwg .t, .cc-dwg .cl, .cc-dwg .hd, .cc-dwg .ph, .cc-dwg .dm { fill: none; stroke: currentColor; stroke-linejoin: miter; stroke-linecap: butt; }
.cc-dwg .k  { stroke-width: 2; }
.cc-dwg .m  { stroke-width: 1.4; }
.cc-dwg .t, .cc-dwg .dm { stroke-width: .8; }
.cc-dwg .cl { stroke-width: .8; stroke-dasharray: 16 3 3 3; }
.cc-dwg .hd { stroke-width: .9; stroke-dasharray: 5 3; }
.cc-dwg .ph { stroke-width: .8; stroke-dasharray: 18 3 3 3 3 3; }
.cc-dwg .tk { stroke: currentColor; stroke-width: 1.8; fill: none; }
.cc-dwg .fl { fill: currentColor; fill-opacity: .12; stroke: none; }
.cc-dwg .fl2 { fill: currentColor; fill-opacity: .24; stroke: none; }
.cc-dwg .po { fill: currentColor; fill-opacity: .85; stroke: currentColor; stroke-width: 1.4; }
.cc-dwg .dot { fill: currentColor; stroke: none; }
.cc-dwg .bg { fill: var(--sheet-2); }
/* Faces for hidden-line axonometric views (painter's order hides what is behind). */
.cc-dwg .fc  { fill: var(--sheet-2); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cc-dwg .fc2 { fill: color-mix(in srgb, currentColor 16%, var(--sheet-2)); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cc-dwg .fc3 { fill: color-mix(in srgb, currentColor 32%, var(--sheet-2)); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.cc-dwg text, .cc-dwg .tx {
  fill: currentColor; stroke: none; font-family: var(--font); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; font-stretch: 100%;
}
.cc-dwg .tx-s { font-size: 11.5px; font-weight: 600; }
.cc-dwg .tx-l { font-size: 16px; font-weight: 700; font-stretch: 112%; }
.cc-dwg .mid { text-anchor: middle; }
.cc-dwg .end { text-anchor: end; }
.cc-dwg.is-thumb .an { display: none; }
.cc-dwg.is-thumb .k { stroke-width: 1.6; }
.cc-dwg.is-thumb .m { stroke-width: 1.1; }

.app-sheet { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.app-sheet .sheet-frame {
  background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; padding: clamp(.75rem, .5rem + 1vw, 1.5rem);
  flex: 1 1 auto; display: flex; align-items: center;
}
.app-sheet .sheet-missing { margin: 0; color: var(--ink-2); padding: 3rem 0; width: 100%; text-align: center; }
.app-sheet figcaption { border: var(--pen-2) solid var(--ink); border-radius: 0 0 var(--radius) var(--radius); background: var(--sheet-2); }
.sheet-tb { display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--ink); }
.sheet-tb-cell { padding: .4rem .7rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-width: 0; }
.sheet-tb-cell:nth-child(2n) { border-right: 0; }
.sheet-tb-cell:nth-last-child(-n+2) { border-bottom: 0; }
.sheet-tb-cell .k { display: block; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; line-height: 1.3; }
.sheet-tb-cell .v { display: block; margin: 0; font-size: var(--fs-base); font-weight: 700; font-stretch: 105%; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.sheet-tb-title .v { color: var(--layer); }
.app-sheet .sheet-cap { margin: 0; padding: .7rem .8rem .85rem; color: var(--ink-2); }
@media (min-width: 640px) {
  .sheet-tb { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .sheet-tb-cell { border-bottom: 0; border-right: 1px solid var(--ink) !important; }
  .sheet-tb-cell:last-child { border-right: 0 !important; }
}

.sheet-note { color: var(--ink-2); margin-bottom: 1.5rem; }
.sheet-set { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .sheet-set { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sheet-set .is-lead { grid-column: 1 / -1; }
  .sheet-set .is-lead .sheet-frame { padding: 1.5rem 3rem; justify-content: center; }
  .sheet-set .is-lead .cc-dwg { max-height: 32rem; }
}

/* ---------- App page hero ---------- */
.app-hero { border-bottom: var(--pen-2) solid var(--ink); }
.app-hero-grid { display: grid; gap: 2rem; }
@media (min-width: 992px) { .app-hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3rem; align-items: start; } }
.app-hero h1 { color: var(--ink); font-size: var(--fs-3xl); margin-bottom: .25em; }
.app-hero h1::after { content: ""; display: block; width: 4.5rem; height: .25rem; background: var(--layer); margin-top: .75rem; }
.app-tagline { font-size: var(--fs-lg); font-stretch: 112%; font-weight: 700; line-height: 1.3; margin-bottom: .75rem; letter-spacing: -0.01em; }
.app-hero .lede { margin-bottom: 1rem; }
.app-familiar-line { color: var(--ink-2); border-left: 3px solid var(--layer); padding-left: .8rem; margin-bottom: 1.5rem; }
.app-studio-note { color: var(--ink-2); font-size: var(--fs-sm); margin: 1rem 0 0; }
.app-studio-note .bi { color: var(--layer); }

.props { background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); }
.props-title { margin: 0; padding: .55rem .9rem; font-weight: 700; font-stretch: 112%; border-bottom: var(--pen-2) solid var(--ink); display: flex; align-items: center; gap: .5rem; }
.props dl { margin: 0; }
.props dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); border-bottom: 1px solid var(--grid); }
.props dl > div:last-child { border-bottom: 0; }
.props dt { padding: .5rem .9rem; color: var(--ink-2); font-weight: 600; border-right: 1px solid var(--grid); font-size: var(--fs-sm); line-height: 1.5; }
.props dd { margin: 0; padding: .45rem .9rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Highlights ---------- */
.highlights .highlight h3 { display: flex; gap: .6rem; align-items: baseline; }
.highlights .highlight h3::before { content: ""; flex: 0 0 auto; width: .6rem; height: .6rem; border: var(--pen-2) solid var(--layer); background: var(--layer); transform: translateY(-.1rem); }

/* ---------- Formats table ---------- */
.fmt-table { width: 100%; border-collapse: collapse; border-top: var(--pen-2) solid var(--ink); }
.fmt-table th, .fmt-table td { text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fmt-table thead th { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.fmt-table tbody th { font-weight: 700; font-stretch: 112%; white-space: nowrap; padding-right: 2rem; }
.fmt-table td { color: var(--ink-2); }

/* ---------- Get <App>: platform tabs (stacked panels without JS) ---------- */
.get-tabs { margin-top: 1.5rem; }
.tab-list { display: flex; flex-wrap: wrap; gap: 0; border-bottom: var(--pen-2) solid var(--ink); }
.tab-list[hidden] { display: none; }
.tab-btn {
  appearance: none; font: inherit; font-weight: 700; font-size: var(--fs-base); color: var(--ink);
  background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  padding: .7rem 1.1rem; min-height: 3rem; cursor: pointer; margin-bottom: -1.5px;
}
.tab-btn:hover { text-decoration: underline; text-underline-offset: .25em; }
.tab-btn[aria-selected="true"] { position: relative; background: var(--sheet-2); border-color: var(--ink); border-width: var(--pen-2) var(--pen-2) 0; border-bottom: 0; }
.tab-btn[aria-selected="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .2rem; background: var(--layer, var(--action)); }
.tab-btn:focus-visible { outline-offset: -4px; }
.tab-panel { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.tab-panel:focus-visible { outline-offset: 2px; }
.get-tabs.is-tabbed .tab-panel { background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-top: 0; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 0 0 var(--radius) var(--radius); }
.get-tabs.is-tabbed .tab-panel .rule-box { background: var(--sheet); }
.tab-panel-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .tab-panel-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.tab-panel h3 { margin-bottom: .6rem; }

/* ---------- /download: Where we release (two tabs) ---------- */
.rs-tabs.is-tabbed .rs-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .rs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rs-item { background: var(--sheet); border: 1px solid var(--line); border-left: .25rem solid var(--layer-green); border-radius: var(--radius); padding: 1rem 1.1rem; }
.rs-item.is-planned { border-left-color: var(--layer-ochre); }
.rs-item.is-pending { border-left-color: var(--layer-blue); }
.rs-tag.is-pending { color: var(--ink); border-color: var(--layer-blue); }
.rs-item p { margin: 0 0 .4rem; }
.rs-item p:last-child { margin-bottom: 0; }
.rs-name { display: flex; align-items: center; gap: .5rem; font-weight: 700; flex-wrap: wrap; }
.rs-title { display: inline-flex; align-items: baseline; gap: .5rem; }
.rs-title .bi { flex: none; }
.rs-tag { font-size: var(--fs-sm, .85rem); font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: 10rem; padding: 0 .5rem; }
.rs-body { color: var(--ink-2); }
.rs-how code { overflow-wrap: anywhere; }
.no-build { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; margin-bottom: .75rem; padding: .35rem .75rem; border: var(--pen-2) dashed var(--ink); border-radius: var(--radius); }
.no-build-mark { width: .8rem; height: .8rem; border: var(--pen-2) solid var(--ink); position: relative; flex: 0 0 auto; }
.no-build-mark::after { content: ""; position: absolute; left: 50%; top: -.2rem; bottom: -.2rem; border-left: var(--pen-2) solid var(--ink); transform: rotate(45deg); }
.req-mini-title { font-weight: 700; margin: 1.25rem 0 .4rem; }
.req-mini-title a { font-weight: 500; }
.req-mini { margin: 0; border-top: 1px solid var(--ink); }
.req-mini > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--grid); }
.req-mini dt { color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); line-height: 1.6; }
.req-mini dd { margin: 0; }
.form-intro { font-weight: 700; margin-bottom: .75rem; }

/* ---------- Lineup + family grids ---------- */
.lineup-grid, .family-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.lineup-grid > li, .family-grid > li { min-width: 0; }
@media (min-width: 700px) { .lineup-grid, .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .family-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lineup-grid .app-card { padding: 1.5rem; }
.lineup-grid .app-card .app-thumb { padding: .75rem 1rem; }
.family-grid .app-card .app-name { font-size: var(--fs-md); }
.family-grid .app-card .app-short { font-size: var(--fs-sm); color: var(--ink-2); }
.app-card .app-thumb { padding: .5rem .75rem; }
.lineup-foot { margin-top: 1.5rem; color: var(--ink-2); }
.status-tally { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.status-tally li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; color: var(--ink-2); font-weight: 600; }

/* ---------- Download ---------- */
.build-table, .req-table { width: 100%; border-collapse: collapse; border-top: var(--pen-2) solid var(--ink); }
.build-table th, .build-table td, .req-table th, .req-table td { text-align: left; vertical-align: top; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line); }
.build-table thead th, .req-table thead th { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.build-table .app-cell a { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-stretch: 112%; color: var(--ink); text-decoration: none; }
.build-table .app-cell a:hover { text-decoration: underline; }
.build-table .app-cell .role { display: block; color: var(--ink-2); font-weight: 500; font-size: var(--fs-sm); margin-top: .1rem; padding-left: 1.7rem; }
.build-table td.none { color: var(--ink-2); }
.req-table tbody th { font-weight: 700; white-space: nowrap; }
.req-label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border: var(--pen-2) dashed var(--ink); border-radius: var(--radius); padding: .25rem .65rem; margin-bottom: 1rem; }
@media (max-width: 767px) {
  .build-table thead, .req-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .build-table tr, .req-table tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .build-table th, .build-table td, .req-table th, .req-table td { display: block; border: 0; padding: .15rem 0; }
  .build-table td[data-label]::before, .req-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
  .req-table td[data-label] { padding: .3rem 0; }
}
.quick-start { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: qs; border-top: var(--pen-2) solid var(--ink); }
.quick-start > li { counter-increment: qs; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.quick-start > li::before {
  content: counter(qs); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: var(--pen-2) solid var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; background: var(--sheet-2);
}
/* Published downloads (Downloads service): notices box, file links, Studio, the per-app table. */
.dl-release-meta { margin-top: 1rem; }
.dl-notices-sec { padding-bottom: 0; }
.dl-notices { background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-left: .5rem solid var(--layer-ochre); border-radius: var(--radius); padding: clamp(1rem, .8rem + 1vw, 1.75rem); }
.dl-notices-h { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-lg, 1.25rem); margin: 0 0 .25rem; }
.dl-notices-h .bi { color: var(--layer-ochre); }
.dl-notices-intro { color: var(--ink-2); font-weight: 600; margin-bottom: 1rem; }
.dl-notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dl-notice-list > li { padding: 1rem 0; border-top: 1px solid var(--line); max-width: 75ch; }
.dl-notice-list > li:first-child { border-top: 0; padding-top: .25rem; }
.dl-notice-list > li[data-platform]:not([data-platform="all"])::before { content: attr(data-platform); display: inline-block; margin-bottom: .35rem; padding: 0 .45rem; border: 1px solid var(--ink-2); border-radius: var(--radius); font-size: .8125rem; font-weight: 700; color: var(--ink-2); text-transform: capitalize; }
.dl-notice-list > li[data-platform="macos"]::before { text-transform: none; content: "macOS"; }
.dl-notices-more { margin-top: .5rem; border-top: var(--pen-2) solid var(--ink); padding-top: .75rem; }
.dl-notices-more > summary { cursor: pointer; font-weight: 700; }
.dl-notices-more > summary span { font-weight: 400; color: var(--ink-2); }
.dl-notices-more[open] > summary { margin-bottom: .75rem; }
.dl-notice-list h3 { font-size: var(--fs-md); margin: 0 0 .35rem; }
.dl-notice-list p { margin-bottom: .5rem; }
.dl-notice-list ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.dl-cmds { margin: .5rem 0 .25rem; display: grid; gap: .3rem; }
.dl-cmds > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .5rem; align-items: baseline; }
.dl-cmds dt { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.dl-cmds dd { margin: 0; min-width: 0; }
.dl-cmds code, .dl-hash { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: var(--fs-sm); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: .1rem .4rem; color: var(--ink); }
.dl-file { min-width: 0; }
.dl-link { display: inline-flex; align-items: flex-start; gap: .45rem; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.dl-link .bi { flex: 0 0 auto; margin-top: .1rem; }
.dl-meta { margin-top: .2rem; gap: .1rem .8rem; }
.dl-sha-short { font-size: inherit; color: var(--ink-2); }
.dl-sha { margin-top: .2rem; font-size: var(--fs-sm); }
.dl-sha summary { cursor: pointer; color: var(--ink-2); width: fit-content; }
.dl-sha .dl-hash { margin-top: .3rem; user-select: all; }
.dl-none { color: var(--ink-2); }
.dl-studio { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .dl-studio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; } }
/* With the recommended download on the left: halves once a full SHA-256 fits on one line in the right half. */
@media (min-width: 1200px) { .dl-studio.has-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dl-studio.has-pick .dl-hash { font-size: .8125rem; } }
.dl-studio-lede { font-size: var(--fs-md); font-weight: 600; }
.dl-studio-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--pen-2) solid var(--ink); }
.dl-studio-files > li { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.dl-kind { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; margin-bottom: .25rem; }
.dl-studio-files > li.is-yours { border-left: var(--pen-3) solid var(--action); padding-left: .9rem; }
.dl-table td { width: 20%; }
@media (max-width: 991px) {
  .dl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dl-table tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .dl-table th, .dl-table td { display: block; width: auto; border: 0; padding: .35rem 0; }
  .dl-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
}
.dl-platforms td.dl-cell-file { min-width: 0; }
.quick-start h3 { margin-bottom: .3rem; }
.quick-start p { color: var(--ink-2); margin-bottom: .75rem; }
.quick-start p:last-child { margin-bottom: 0; }

/* ---------- Roadmap ---------- */
.rm-list { list-style: none; margin: 0; padding: 0; position: relative; }
.rm-list::before { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem; border-left: var(--pen-2) solid var(--ink); }
.rm-item { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem 1.25rem; padding: 1rem 0; }
.rm-bubble {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: var(--pen-2) solid var(--ink); background: var(--sheet-2); font-weight: 700; font-stretch: 112%; font-variant-numeric: tabular-nums;
}
.rm-item.is-done .rm-bubble, .rm-item.is-now .rm-bubble { background: var(--ink); color: var(--sheet); }
.rm-item.is-next .rm-bubble, .rm-item.is-later .rm-bubble { border-style: dashed; }
.rm-body { background: var(--sheet-2); border: 1px solid var(--ink); border-radius: var(--radius); padding: 1rem 1.25rem; }
.rm-item.is-now .rm-body { border-width: var(--pen-3); }
.rm-item.is-later .rm-body { border-style: dashed; }
.rm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .4rem; }
.rm-head h2 { font-size: var(--fs-md); font-stretch: 112%; margin: 0; letter-spacing: -0.01em; }
.rm-date { color: var(--ink-2); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rm-body p { margin: 0; color: var(--ink-2); }
.rm-apps { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.rm-apps a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
.rm-legend { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; color: var(--ink-2); font-size: var(--fs-sm); }
.rm-legend li { display: flex; align-items: center; gap: .5rem; }

/* ---------- Pricing ---------- */
.tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { display: flex; flex-direction: column; gap: .75rem; height: 100%; background: var(--sheet-2); border: 1px solid var(--ink); border-radius: var(--radius); padding: 1.5rem; }
/* Community is the highlighted plan: action-coloured heavy pen, a badge riding the top edge, a big "Free". */
.tiers { padding-top: .9rem; }
.tier { position: relative; }
.tier.is-community { border: var(--pen-3) solid var(--action); outline: 1px solid var(--action); outline-offset: .3rem; padding-top: 2rem; }
.tier-badge { position: absolute; top: 0; left: 1.5rem; transform: translateY(-50%); margin: 0; padding: .3rem .75rem; font-size: var(--fs-sm); font-weight: 700; line-height: 1; background: var(--action); color: var(--on-action); border-radius: 2rem; }
.tier.is-community .price { font-size: var(--fs-xl); color: var(--action); }
.tier h2 { font-size: var(--fs-lg); margin: 0; }
.tier .price { font-size: var(--fs-md); font-weight: 700; font-stretch: 112%; margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.tier .summary { margin: 0; color: var(--ink-2); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.tier li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .55rem; }
/* Check sits in a box one text-line tall, so it centres on the first line of a wrapped item. */
.tier li > .bi { line-height: inherit; color: var(--ink); }
.tier li > .bi::before { vertical-align: top; line-height: inherit; }
.tier .btn-row { margin-top: auto; padding-top: .75rem; }
.tier .btn-row a { width: 100%; }
/* Hover (and keyboard focus inside): the card picks up the action pen and an offset outline, the way Community is
   marked; Community's own outline gets heavier. Line weight only, no shadow; the lift moves only with motion allowed. */
.tier { outline: 1px solid transparent; outline-offset: .3rem; }
@media (hover: hover) { .tier:hover { border-color: var(--action); outline: var(--pen-2) solid var(--action); } }
.tier:focus-within { border-color: var(--action); outline: var(--pen-2) solid var(--action); }
@media (hover: hover) { .tier.is-community:hover { outline-width: var(--pen-3); } }
.tier.is-community:focus-within { outline-width: var(--pen-3); }
@media (prefers-reduced-motion: no-preference) {
  .tier { transition: border-color .15s ease, outline-color .15s ease, transform .15s ease; }
  @media (hover: hover) { .tier:hover { transform: translateY(-.2rem); } }
}
/* Card lists wrap without a lone last word; phones get a little more line length. */
.tier li, .tier .summary { text-wrap: pretty; }
@media (max-width: 480px) {
  .tier { padding: 1.25rem 1rem; }
  .tier li { gap: .45rem; }
}
.founding { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: var(--pen-2) dashed var(--ink); border-radius: var(--radius); background: var(--sheet-2); }
.founding p { margin: 0; font-weight: 700; font-size: var(--fs-md); }
.footnote { color: var(--ink-2); margin-top: 1rem; }
.price-table { margin-top: 1rem; }
.price-table td { white-space: nowrap; }
.faq-mini { margin: 0; border-top: var(--pen-2) solid var(--ink); }
.faq-mini > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.faq-mini dt { font-weight: 700; font-stretch: 112%; font-size: var(--fs-md); margin-bottom: .3rem; }
.faq-mini dd { margin: 0; color: var(--ink-2); }

/* ---------- Saving: desktop free, browser saving paid, export free ---------- */
.save-split { margin-top: 2rem; }
.save-split > h2 { margin-bottom: .75rem; }
.save-split h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.save-tag { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 700; font-stretch: 100%; letter-spacing: 0; line-height: 1; padding: .3rem .55rem; border: var(--pen-2) solid var(--ink); border-radius: 2rem; background: var(--sheet-2); }
.save-split .is-paid .save-tag { border-style: dashed; }
.web-save-note { font-weight: 600; border-left: 3px solid var(--layer, var(--action)); padding-left: .75rem; }

/* /try, /app, /lab lists: rows centre on the big Try/Open button, which sits on the right. */
.page-area .build-table th, .page-area .build-table td { vertical-align: middle; }
.page-area .build-table tr > :last-child { text-align: right; padding-right: 0; }
.page-area .build-table td.here-open { padding-top: .6rem; padding-bottom: .6rem; }
@media (max-width: 767px) {
  .page-area .build-table tr > :last-child { text-align: left; }
  .page-area .build-table td.here-open { padding-top: .5rem; }
  .page-area .build-table td.here-open::before { display: none; }
}

/* "Understanding what you get" (/pricing) */
.get-lede { margin-bottom: 1rem; }
.get-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .get-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: 0; } }
.get-grid > li { display: flex; flex-direction: column; gap: .5rem; background: var(--sheet-2); border: 1px solid var(--ink); border-radius: var(--radius); padding: 1.5rem; }
.get-grid > li.is-license { border-width: var(--pen-3); }
.get-grid h3 { font-size: var(--fs-lg); margin: 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.get-grid p { margin: 0; color: var(--ink-2); }
.get-grid .get-tier { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
/* Cards share rows: tier, heading, body line up across all three (subgrid); older browsers just stretch the cards to one height. */
@supports (grid-template-rows: subgrid) { @media (min-width: 768px) { .get-grid > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: .5rem; } } }
.get-more { margin: 1.25rem 0 0; }

/* /compare — the feature matrix. Wide: one table, header row sticks under the navbar. Phones: rows stack. */
.cmp-table { width: 100%; border-collapse: collapse; border-top: var(--pen-2) solid var(--ink); table-layout: fixed; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--line); }
.cmp-table thead th { position: sticky; top: 4.25rem; z-index: 2; background: var(--sheet); border-bottom: var(--pen-2) solid var(--ink); vertical-align: bottom; }
.cmp-table .cmp-feature { width: 34%; font-weight: 600; }
.cmp-name { display: block; font-size: var(--fs-md); font-weight: 700; font-stretch: 112%; }
.cmp-price { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.cmp-tier.is-license .cmp-name { color: var(--action); }
.cmp-group th { padding-top: 3rem; font-size: var(--fs-md); font-weight: 700; border-bottom: var(--pen-1) solid var(--ink); }
.cmp-table tbody:first-of-type .cmp-group th { padding-top: 1.75rem; }
.cmp-mark { display: inline-block; width: 1rem; height: 1rem; margin-right: .65rem; vertical-align: -.1rem; background: transparent; border: var(--pen-2) solid var(--ink); border-radius: var(--radius); }
.cmp-soon { display: inline-block; margin-left: .5rem; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 .4rem; vertical-align: middle; }
.cmp-note { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-2); }
.cmp-yes { display: inline-block; color: var(--layer-green); font-size: 1.85rem; line-height: 1; margin-top: -.3rem; }
.cmp-yes::before { font-weight: 700 !important; -webkit-text-stroke: .5px currentColor; }
.cmp-no { color: var(--ink-2); }
.cmp-text { font-size: var(--fs-sm); }
.cmp-table tfoot td, .cmp-table tfoot th { border-bottom: 0; padding-top: 1.25rem; }
.cmp-foot { margin-top: 1.5rem; }
@media (max-width: 767px) {
  .cmp-table { table-layout: auto; }
  .cmp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp-table tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .cmp-table th, .cmp-table td { display: block; width: auto; border: 0; padding: .15rem 0; }
  .cmp-table .cmp-feature { width: auto; margin-bottom: .35rem; }
  .cmp-table td[data-label] { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
  .cmp-table td[data-label]::before { content: attr(data-label); font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
  .cmp-group { border-bottom: var(--pen-1) solid var(--ink) !important; }
  .cmp-group th { padding-top: 2rem; }
  .cmp-table tfoot { display: none; }
}

/* /roadmap deep links: the page-head list and each milestone's links into /roadmap-issues and the fork map */
.rm-deep, .rm-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.rm-deep { margin-block: 0.75rem 1rem; font-weight: 600; gap: 0.75rem; }
.rm-links { margin-top: 0.5rem; font-size: var(--fs-sm); }

/* ---------- "If you use X, use our Y" (if-you-use.inc) ---------- */
.iyu-table td a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.iyu-note { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 1rem; }
@media (max-width: 760px) { .iyu-table tbody th { white-space: normal; } .iyu-table td a { white-space: normal; } }

/* ---------- Roadmap by app (?app=) ---------- */
.rm-by-app ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.rm-by-app a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.rm-by-app a:hover { text-decoration: underline; text-underline-offset: .25em; }
.rm-by-app a[aria-current="page"] { border-color: var(--ink); border-width: var(--pen-2); }
.rm-app-steps, .rm-from-other { margin: 0 0 1rem; }
.rs-anchor { display: block; }   /* /download#upcoming lands on the tab row (html scroll-padding clears the navbar) */

/* ---------- /download (Studio-only): one primary action ----------
   The hero is the button for the visitor's system; its notice line sits right above it; other systems are the secondary
   action; everything else waits in .dl-details, collapsed. */
.dl-hero h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }

/* The notice line: quiet, but before the file (honesty rule). Opens in place. */
.dl-notices-sec.is-inline { margin-bottom: .75rem; }
.dl-notices-sec.is-inline .dl-notices { background: transparent; border: 0; border-left: .25rem solid var(--layer-ochre); border-radius: 0; padding: .3rem 0 .3rem .8rem; }
.dl-notices-sec.is-inline .dl-notices:has(> .dl-notices-main[open]) { background: var(--sheet-2); padding: .9rem 1rem; }
.dl-notices-main > summary { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.dl-notices-main > summary:hover { color: var(--ink); }
.dl-notices-main > summary .bi { color: var(--layer-ochre); flex: 0 0 auto; }
.dl-notices-main[open] > summary { margin-bottom: .75rem; color: var(--ink); }
.dl-notices-sec:not(.is-inline) { padding-bottom: 0; }
.dl-notices-sec:not(.is-inline) .dl-notices { padding: .6rem 1rem; }

/* The primary action */
.dl-pick-btn { display: flex; width: 100%; justify-content: center; align-items: center; gap: .7rem; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); font-weight: 700; padding: 1.05rem 1.5rem; }
.dl-pick-btn .bi { font-size: 1.1em; }
.dl-pick-meta { margin-top: .7rem; gap: .15rem .9rem; font-size: var(--fs-sm); color: var(--ink-2); justify-content: center; }
.dl-pick-meta code { font-size: inherit; }
.dl-pick-alt { margin: .5rem 0 0; font-size: var(--fs-sm); text-align: center; overflow-wrap: anywhere; }
/* "Ways to get it" side card (owner 2026-11-09): beside the download card from 62rem, under it on a phone */
.dl-layout { display: grid; grid-template-columns: minmax(0, 46rem); gap: clamp(1rem, .75rem + 1vw, 1.75rem); justify-content: center; align-items: start; margin-top: clamp(1rem, .75rem + 1vw, 1.75rem); }
.dl-layout > .dl-card { margin: 0; width: 100%; }
@media (min-width: 62rem) { .dl-layout:has(> .dl-ways) { grid-template-columns: minmax(0, 46rem) 20rem; } }
.dl-ways { min-width: 0; padding: 1rem 1.1rem; background: var(--sheet-2); border: 1px solid var(--line); border-radius: .25rem; text-align: left; }
.dl-ways-h { margin: 0 0 .6rem; font-size: var(--fs-md, 1.05rem); }
.dl-ways-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.dl-way { margin: 0; padding-top: .75rem; border-top: 1px solid var(--line); }
.dl-way:first-child { padding-top: 0; border-top: 0; }
.dl-way p { margin: 0; }
.dl-way-name { font-weight: 600; }
.dl-way-body { margin-top: .15rem; font-size: var(--fs-sm); color: var(--ink-2); }
.dl-way-tag { margin-left: .35rem; padding: .05rem .4rem; border: 1px solid var(--line); border-radius: .2rem; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
.dl-way.is-soon .dl-way-name { color: var(--ink-2); }
.dl-way-qr { display: block; margin: .6rem auto 0; width: 9.25rem; height: 9.25rem; border: 1px solid var(--line); border-radius: .25rem; background: #fff; }
.dl-way-how { margin: .5rem 0 0; padding: .5rem .6rem; font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace); font-size: .8rem; line-height: 1.45; background: var(--sheet); border: 1px solid var(--line); border-radius: .2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-way-how.has-copy { position: relative; padding-right: 2.3rem; }
.dl-copy { position: absolute; top: .3rem; right: .3rem; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; font-size: .95rem; line-height: 1; color: var(--ink-2); background: var(--sheet-2); border: 1px solid var(--line); border-radius: .2rem; cursor: pointer; }
.dl-copy { transition: color 1s ease, border-color 1s ease, -webkit-text-stroke-width 1s ease; -webkit-text-stroke: 0 currentColor; }
.dl-copy.is-copied, .dl-copy.is-copied:hover, .dl-copy.is-copied:focus-visible { color: #1a7f37; border-color: #1a7f37; -webkit-text-stroke-width: .7px; transition: none; }
@media (prefers-reduced-motion: reduce) { .dl-copy { transition: none; } }
.dl-copy:hover { color: var(--ink); border-color: var(--ink-2); }
.dl-copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.dl-way-how code { font: inherit; color: inherit; background: none; padding: 0; white-space: inherit; }
.dl-way-link { margin-top: .3rem; font-size: var(--fs-sm); }
.dl-pick-msg { margin-bottom: 1rem; }

.dl-pick-browser { margin: 1rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* Secondary information: one quiet list of collapsed blocks */
.dl-details { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.dl-more { border-top: 1px solid var(--line); }
.dl-more:last-child { border-bottom: 1px solid var(--line); }
.dl-more > summary { cursor: pointer; font-weight: 600; padding: .85rem 0; }
.dl-more > summary:hover { color: var(--action); }
.dl-more[open] { padding-bottom: 1.5rem; }
.dl-more[open] > summary { margin-bottom: .5rem; }
.dl-more .dl-release-meta { margin: 0 0 1rem; }
.dl-more-note { margin: 1rem 0 0; color: var(--ink-2); }
.dl-more .rule-box, .dl-more .get-tabs { margin-top: 0; }
.dl-studio-files > li.is-yours { border-left: var(--pen-3) solid var(--action); padding-left: .9rem; }
.dl-details .dl-more:first-child { border-top: 0; }
/* Centred hero (owner 2026-11-07): the whole primary action on the page's axis; the details below share its column. */
.dl-hero .container { text-align: center; }
.dl-hero h1, .dl-hero .lede { margin-inline: auto; }
.dl-notices-sec.is-inline .dl-notices { display: inline-block; max-width: 100%; text-align: left; }
.dl-notices-sec.is-inline .dl-notices:has(> .dl-notices-main[open]) { display: block; }
.dl-pick-msg { text-align: center; }


/* System tiles (secondary action) and the download card (primary action, owner 2026-11-07) */
.dl-tiles { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.dl-tiles ul { list-style: none; margin: 0 auto; padding: 0; max-width: 64rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.4rem, .2rem + .8vw, 1rem); }
.dl-tiles a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; min-height: 100%; padding: clamp(.75rem, .5rem + 1vw, 1.4rem) .25rem; background: var(--sheet-2); border: var(--pen-2) solid var(--line); border-radius: var(--radius); color: var(--ink-2); font-weight: 600; text-decoration: none; }
.dl-tiles a .bi { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1; color: var(--ink); }
.dl-tiles a:hover, .dl-tiles a:focus-visible { border-color: var(--ink); color: var(--ink); }
.dl-tiles a.is-on { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.dl-tiles a.is-on .bi { color: var(--sheet); }
@media (max-width: 575px) { .dl-tiles a { font-size: .8125rem; } }

.dl-card { max-width: 46rem; margin: clamp(1rem, .75rem + 1vw, 1.75rem) auto 0; padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); }
.dl-card .dl-notices-sec.is-inline { margin-bottom: 1rem; }
.dl-card .dl-notices-sec.is-inline .dl-notices:has(> .dl-notices-main[open]) { background: var(--sheet); }
.dl-pick-needs { margin: .75rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); text-align: center; }
.dl-hero .dl-pick-browser { margin-top: 1.25rem; }

/* /connect-ai: numbered circles on each AI app's steps */
.ca-steps { counter-reset: ca; list-style: none; padding: 0; }
.ca-steps > li { counter-increment: ca; position: relative; padding-left: 2.4rem; margin-bottom: 1rem; min-height: 1.7rem; }
.ca-steps > li::before { content: counter(ca, upper-alpha); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border: var(--pen-2) solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); background: var(--sheet-2); }
.ca-flow { counter-reset: cabig; }
.ca-big { counter-increment: cabig; display: flex; align-items: center; gap: .75rem; }
.ca-big::before { content: counter(cabig); flex: none; width: 2.4rem; height: 2.4rem; border: var(--pen-2) solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-md); background: var(--sheet-2); }

/* A tab with a short label (data-tab-label-short): the long name on wide screens, the short one on phones. */
.tab-btn .tab-short { display: none; }
@media (max-width: 40em) {
  .tab-btn .tab-long { display: none; }
  .tab-btn .tab-short { display: inline; }
}