/* Spatially — audience pages (/for/architects, /for/interior-designers, /for/homeowners), 13 Nov 2026.
   Loaded after site.css, and only on those pages. Additions only: everything else (the nav, buttons, bands,
   the offer block, the proof plans, the gallery, the FAQ, the footer) comes from site.css unchanged, so the
   pages read as part of the home page. */

/* hero: copy on the left, one render on the right, like the story's columns */
.p-hero { padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px); }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px clamp(40px, 5vw, 80px); align-items: center; }
.p-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.p-hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.4rem); line-height: 1.0; letter-spacing: -0.038em; max-width: 14ch; }
.p-hero h1 em { letter-spacing: -0.02em; font-size: 1.06em; line-height: .9; }
.p-answer { font-size: clamp(18px, 1.45vw, 20px); max-width: 36rem; }
.p-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--oak-text); }
.p-crumbs a { color: var(--ink-subtle); text-decoration: none; }
.p-crumbs a:hover { color: var(--ink); }
.p-crumbs span[aria-hidden] { color: var(--guide); }

.p-plate { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.p-plate-img { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-sunken); aspect-ratio: 2000 / 1342; box-shadow: var(--shadow-md); }
.p-plate-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #1b23271a; pointer-events: none; }
.p-plate-img img { width: 100%; height: 100%; object-fit: cover; }
.p-plate figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; }

/* the free early-access home: always a quiet line of text, never a second filled button */
.p-free { font-size: 15px; color: var(--ink-muted); max-width: 36rem; }
.p-free-link {
  all: unset; cursor: pointer; color: var(--ink); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--guide); text-underline-offset: 4px; border-radius: var(--radius-sm); transition: text-decoration-color .2s;
}
.p-free-link:hover { text-decoration-color: var(--ink); }
.p-free-link:focus-visible { box-shadow: var(--focus-ring); }
.p-free-c { text-align: center; font-size: 14px; }

/* how it works: the delivery section's grid and numbered list, with a note and a link to the sister page */
.p-how { border-top: 1px solid var(--line); background: var(--paper-sunken); }
.p-how .step-tag { margin-bottom: -8px; }
.p-note { padding: 14px 16px; border-left: 3px solid var(--sky-text); background: var(--paper-raised); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 15px; color: var(--ink-muted); max-width: 34rem; }
.p-note b { color: var(--ink); font-weight: 600; }
.p-cross { font-size: 15px; color: var(--ink-muted); }
.p-cross a, .p-more a { color: var(--sky-text); font-weight: 500; text-decoration-color: #2d5d8c55; text-underline-offset: 4px; }
.p-cross a:hover, .p-more a:hover { text-decoration-color: currentColor; }
.p-how .ways { margin-top: 0; }

/* the offer section sits on the plain paper, as #pricing does on the home page */
.p-offer { border-top: 1px solid var(--line); }
.p-offer .offer-copy p b { color: var(--ink); font-weight: 600; }
.p-more { font-size: 15px; }

/* three renders in one row (the home page's five use two over three) */
.p-renders .g-item, .p-renders .g-item:nth-child(-n+2) { grid-column: span 2; }

/* closing: the offer once more, with the other audience pages beside it */
.p-close { border-top: 1px solid var(--line); background: var(--paper-sunken); padding-bottom: clamp(64px, 8vw, 112px); }
.p-close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(40px, 6vw, 96px); align-items: end; }
.p-close-copy { display: flex; flex-direction: column; gap: 24px; }
.p-close h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.036em; max-width: 16ch; }
.p-close h2 em { font-size: 1.06em; }
.p-close .lead { max-width: 34rem; }
.p-also ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.p-also li { border-bottom: 1px solid var(--line); }
.p-also a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font: 500 18px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.p-also a::after { content: "\2192"; color: var(--oak-text); transition: transform .25s var(--ease-out); }
.p-also a:hover::after { transform: translateX(3px); }

@media (max-width: 900px) {
  .p-hero { padding-top: 28px; }
  .p-hero-grid, .p-close-grid { grid-template-columns: minmax(0, 1fr); }
  .p-hero-copy { gap: 18px; }
  .p-hero h1 { font-size: clamp(2.1rem, 8.4vw, 3rem); max-width: 18ch; }
  .p-answer { font-size: 17px; }
}

/* ---------------- topic pages (/pricing, /how-it-works, /floor-plan-to-3d and the rest), 13 Nov 2026 ----------------
   One template (tools/build.py, topic_page): hero, question sections with the heading on the left and the answer on
   the right, the FAQ, and the closing band. Additions only. */
.t-hero .p-hero-grid.t-single { grid-template-columns: minmax(0, 1fr); }
.t-hero .t-single .p-hero-copy { max-width: 46rem; }
.t-hero .t-single h1 { max-width: 18ch; }
.t-updated { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); margin-top: -8px; }
.t-plans { align-self: center; }
.t-plans .proof-plans figcaption { font-size: 13px; color: var(--ink-muted); margin-top: 8px; }
.t-plans .proof-plans figcaption span { font-family: var(--font-mono); color: var(--oak-text); margin-right: 6px; }

.t-sec { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 104px); }
.t-sunken { background: var(--paper-sunken); }
.t-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.t-grid > h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1.06; letter-spacing: -0.028em; max-width: 14ch; text-wrap: balance; }
.t-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; font-size: 17px; line-height: 1.6; color: var(--ink-muted); }
.t-body > p, .t-body > ul { max-width: 42rem; }
.t-body b, .t-body strong { color: var(--ink); font-weight: 600; }
.t-body a { color: var(--sky-text); font-weight: 500; text-decoration-color: #2d5d8c55; text-underline-offset: 4px; }
.t-body a:hover { text-decoration-color: currentColor; }
.t-body ul:not([class]) { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.t-body ul:not([class]) li::marker { color: var(--oak); }
.t-body code { font: 400 .88em/1 var(--font-mono); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 5px; color: var(--ink); overflow-wrap: anywhere; }
.t-body .code { max-width: 100%; }
.t-body .code code { background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.t-h3 { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; color: var(--ink); margin-top: 8px; }
.t-steps { margin-top: 0; }
.t-steps li:first-child { border-top-color: var(--line-strong); }
.t-steps p { max-width: 40rem; }

.t-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); }
.t-table:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.t-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; min-width: 520px; }
.t-table caption { text-align: left; padding: 14px 16px 0; font: 500 12px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--oak-text); }
.t-table th, .t-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.t-table thead th { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.t-table tbody th { color: var(--ink); font-weight: 600; }
.t-table tbody tr:last-child > * { border-bottom: 0; }
.t-table small { font-size: 13px; font-weight: 400; color: var(--ink-subtle); }
.t-note { padding: 14px 16px; border-left: 3px solid var(--sky-text); background: var(--paper-raised); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 15px; }
.t-quote { margin: 0; padding: 18px 20px; border-left: 3px solid var(--oak); background: var(--paper-raised); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--ink); max-width: 44rem; }
.t-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.t-cards li { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); display: flex; flex-direction: column; gap: 6px; }
.t-cards h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.t-cards h3 a { color: var(--ink); }
.t-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: 42rem; }
.t-files li { border-bottom: 1px solid var(--line); }
.t-files a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.t-files a::after { content: "\2193"; color: var(--oak-text); }
.t-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.t-fig .proof-plans figure { margin: 0; }
.t-fig .proof-plans figcaption { font-size: 13px; margin-top: 8px; }
.t-figcap { font-size: 14px; }

.t-404 { padding-block: clamp(56px, 10vw, 140px); }
.t-404-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(40px, 6vw, 96px); align-items: end; }
.t-404 h1 { font-size: clamp(2.5rem, 4.6vw, 4.4rem); line-height: 1.0; letter-spacing: -0.038em; max-width: 14ch; }

@media (max-width: 900px) {
  .t-grid, .t-404-grid { grid-template-columns: minmax(0, 1fr); }
  .t-grid > h2 { max-width: 20ch; }
  .t-body { font-size: 16px; }
}
@media (max-width: 560px) {
  .t-cards { grid-template-columns: minmax(0, 1fr); }
  .t-table th, .t-table td { padding: 10px 12px; }
}
/* the two plans outside the offer block: the same image treatment as .offer figure on the home page */
.t-plans .proof-plans figure, .t-fig .proof-plans figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.t-plans .proof-plans img, .t-fig .proof-plans img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--line); }
.t-plans { width: 100%; }
.t-table code { overflow-wrap: normal; white-space: nowrap; }
/* the developers' kit: the form button with the email beside it */
.t-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.t-contact span { font-size: 15px; }

/* ---------------- legal pages (/privacy, /terms), 13 Nov 2026 ----------------
   Plain reading pages: a small table of contents on the left, the text at a readable measure on the right. */
.t-legal-hero { padding-bottom: clamp(24px, 4vw, 48px); }
.t-legal-hero h1 { max-width: 18ch; }
.t-legal { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px); }
.t-legal-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.t-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.t-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.t-toc li { border-bottom: 1px solid var(--line); }
.t-toc a { display: block; padding: 8px 0; font-size: 14px; line-height: 1.4; color: var(--ink-muted); text-decoration: none; }
.t-toc a:hover { color: var(--ink); }
.t-legal-body { max-width: 68ch; min-width: 0; font-size: 17px; line-height: 1.65; color: var(--ink-muted); display: flex; flex-direction: column; gap: 16px; }
.t-legal-body h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-top: 24px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.t-legal-body h3, .t-legal-body h4 { font-size: 19px; line-height: 1.3; color: var(--ink); margin-top: 8px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.t-anchor { margin-left: 10px; font-size: .7em; color: var(--guide); text-decoration: none; opacity: 0; transition: opacity .2s; }
.t-legal-body h2:hover .t-anchor, .t-anchor:focus-visible { opacity: 1; }
.t-legal-body b { color: var(--ink); font-weight: 600; }
.t-legal-body ul, .t-legal-body ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.t-legal-body li::marker { color: var(--oak); }
.t-legal-body a { color: var(--sky-text); font-weight: 500; text-decoration-color: #2d5d8c55; text-underline-offset: 4px; overflow-wrap: anywhere; }
.t-legal-body code { font: 400 .86em/1 var(--font-mono); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 5px; color: var(--ink); }
.t-legal-table { max-width: 100%; }
.t-legal-table table { min-width: 560px; }
.t-legal-table td:first-child { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .t-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .t-toc { position: static; }
  .t-legal-body { font-size: 16px; }
}
.t-legal-table table { min-width: 720px; }