/* Home, design 10 (forum-session-008). Tokens only (no colour literals: SP-14.09); external file (CSP style-src 'self').
   The default state of everything is FINAL: no JS, or reduced motion, reads as a finished page. home.js adds `.arm` (hide the
   pieces that will be drawn) and then `.play` (draw them) only when motion is allowed, and every transition/animation lives
   inside @media (prefers-reduced-motion: no-preference) so `document.getAnimations()` stays empty under reduce (a11y claim). */

.home10 { --ease: cubic-bezier(.2, .7, .2, 1); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── hero: a drawing sheet ── */
.hero10 { display: block; position: relative; padding: 0; gap: 0; overflow: hidden; cursor: crosshair; container-type: inline-size;
  border-bottom: 1px solid var(--vit-line-default);
  background-image: linear-gradient(var(--vit-line-faint) 1px, transparent 1px), linear-gradient(90deg, var(--vit-line-faint) 1px, transparent 1px); background-size: 32px 32px; }
.hero10 .hsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.hero10 .hsvg path, .hero10 .hsvg circle { fill: none; stroke: var(--vit-ink); }
.hero10 .hsvg .bd { stroke-width: 1.5; }
.hero10 .hsvg .bd2 { stroke-width: .6; opacity: .6; }
.hero10 .hsvg .ax { stroke-width: .75; opacity: .17; }
.hero10 .hsvg .bb circle { fill: var(--vit-paper); stroke-width: 1.2; }
.hero10 .hsvg text { font-family: var(--vit-f-mono); font-size: 10.5px; fill: var(--vit-ink-2); }
.hero10 .hsvg path, .hero10 .hsvg circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* the CAD crosshair: long thin lines with a gap at the centre, and a pick box (pointer devices only, set by home.js) */
.hero10 .dense { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--vit-line-default) 1px, transparent 1px), linear-gradient(90deg, var(--vit-line-default) 1px, transparent 1px); background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(150px circle at var(--mx, -999px) var(--my, -999px), var(--vit-ink) 0, transparent 100%); mask-image: radial-gradient(150px circle at var(--mx, -999px) var(--my, -999px), var(--vit-ink) 0, transparent 100%); }
.hero10 .xh { position: absolute; pointer-events: none; background: var(--vit-ink); opacity: 0; z-index: 3; }
.hero10 .xh.h { inset-inline: 0; height: 1px; top: var(--my, 0); }
.hero10 .xh.v { top: 0; bottom: 0; width: 1px; left: var(--mx, 0); }
.hero10 .pick { position: absolute; left: var(--mx, 0); top: var(--my, 0); width: 12px; height: 12px; border: 1.5px solid var(--vit-ink); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 3; }
.hero10 .coord { position: absolute; left: calc(var(--mx, 0px) + 12px); top: calc(var(--my, 0px) + 10px); z-index: 3; font-family: var(--vit-f-mono); font-size: 10px; color: var(--vit-ink-2); pointer-events: none; opacity: 0; direction: ltr; background: var(--vit-paper); padding: 0 4px; border: 1px solid var(--vit-line-default); }
.hero10.hov .xh { opacity: .35; }
.hero10.hov .pick, .hero10.hov .coord { opacity: 1; }

.hero10 .hgrid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5cqi, 56px); align-items: start; padding: clamp(64px, 8cqi, 96px) clamp(28px, 6cqi, 74px) clamp(48px, 8cqi, 92px) clamp(20px, 4cqi, 60px); }
.hero10 .htext { position: relative; }
.hero10 .kick { margin: 0 0 16px; color: var(--vit-clay-text); letter-spacing: .14em; direction: ltr; text-align: right; }
.hero10 h1 { margin: 0 0 22px; max-width: none; font-size: clamp(34px, 6.1cqi, 78px); line-height: 1.05; letter-spacing: -.03em; position: relative; }
.hero10 h1 .w { display: inline-block; }
.hero10 h1 em { font-style: normal; position: relative; white-space: nowrap; }
.hero10 h1 em svg { position: absolute; inset-inline-start: -2%; bottom: -.14em; width: 104%; height: .3em; overflow: visible; }
.hero10 h1 em path { fill: none; stroke: var(--vit-clay-ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.hero10 .sub { max-width: 36em; margin: 0 0 26px; font-size: clamp(16px, 1.9cqi, 20px); color: var(--vit-ink-2); }
.hero10 .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vit-space-4); }
.cta .pc { margin-inline-start: .4em; }
.ghost.lg { font-size: 18px; padding: var(--vit-space-3) var(--vit-space-5); }
.hero10 .cta-note { margin: var(--vit-space-3) 0 0; font-size: 14px; color: var(--vit-ink-2); }
.hero10 .meta { margin: var(--vit-space-3) 0 0; direction: ltr; text-align: right; color: var(--vit-ink-3); }

/* ── the gibberish → fixed plate ── */
.gplate { position: relative; background: var(--vit-paper); border: 1px solid var(--vit-line-default); padding: 14px 16px 12px; overflow: hidden; }
.gplate .gtop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; margin-bottom: 14px; }
.gplate .gcount { white-space: nowrap; direction: ltr; }
.gplate .gcount b { color: var(--vit-clay-text); font-weight: 500; }
.gplate .gfinal { margin: var(--vit-space-3) 0; font-size: clamp(28px, 6cqi, 64px); line-height: 1.1; letter-spacing: -.02em; }
.gplate .gsvg { display: none; width: 100%; height: auto; overflow: visible; }
.gplate .gdim { display: none; position: relative; height: 22px; margin-top: 22px; direction: ltr; }
.gplate.live .gfinal { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gplate.live .gsvg { display: block; }
.gplate.live .gdim { display: block; }
.gdim .g0 { position: absolute; top: 10.5px; inset-inline: 0; height: 1px; background: var(--vit-ink); opacity: .25; }
.gdim .gp { position: absolute; top: 10px; inset-inline: 0; height: 2px; background: var(--vit-clay); transform: scaleX(var(--p, 0)); transform-origin: right; }
.gdim .ga, .gdim .gz { position: absolute; top: 3px; width: 1.5px; height: 16px; background: var(--vit-ink); }
.gdim .ga { right: 0; } .gdim .gz { left: 0; }
.gdim .gs { position: absolute; top: -16px; left: 0; font-family: var(--vit-f-mono); font-size: 10px; letter-spacing: .14em; color: var(--vit-ink-3); }
.gsvg .gl { fill: none; stroke: var(--vit-ink); stroke-width: 1; opacity: .2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gsvg .gl.c { opacity: .09; }
.gsvg .gb { font-family: var(--vit-f-heb); font-weight: 700; fill: var(--vit-ink-4); }
.gsvg .gc { font-family: var(--vit-f-heb); font-weight: 700; fill: var(--vit-ink); stroke: var(--vit-clay-ink); stroke-linejoin: round; fill-opacity: 0; }
.gsvg .vt { font-family: var(--vit-f-heb); font-weight: 700; fill: var(--vit-ink); stroke: var(--vit-clay-ink); stroke-linejoin: round; fill-opacity: 0; letter-spacing: .01em; }
.gsvg .gk { fill: none; stroke: var(--vit-clay); stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.gsvg .gu { fill: none; stroke: var(--vit-clay-ink); stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.gsvg .gnib circle { fill: var(--vit-clay); stroke: var(--vit-ink); stroke-width: 1.5; }
.gsvg .gnib .xl { stroke: var(--vit-ink); stroke-width: 1; opacity: .5; }
.gsvg .gnib .pb { fill: none; stroke: var(--vit-ink); stroke-width: 1.5; }
.hero10 .hstrip { position: absolute; z-index: 2; inset-inline: 19px; bottom: 19px; height: 30px; display: grid; grid-template-columns: 1fr; direction: ltr; letter-spacing: .06em; color: var(--vit-ink-3); font-size: 10px; pointer-events: none; }
.hero10 .hstrip > div { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-left: 1px solid var(--vit-line-default); white-space: nowrap; overflow: hidden; }
.hero10 .hstrip > div:first-child { border-left: 0; }
.hero10 .hstrip b { color: var(--vit-ink); font-weight: 500; }
@media (max-width: 640px) { .hero10 .hstrip .hs2 { display: none; } .hero10 .hstrip { grid-template-columns: 1fr; } }

/* ── zones ── */
.home10 > section[data-zone]:not(.hero) { padding-block: clamp(40px, 7vw, 72px); border-top: 1px solid var(--vit-line-default); }
.home10 .zone-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vit-space-4); margin-top: var(--vit-space-5); }
.home10 .lead { max-width: 52em; color: var(--vit-ink-2); }

/* the drawn Revit window (a preview; the real screenshots are on /vitruvius) */
.rvwrap { margin: var(--vit-space-5) 0 0; }
.rv { position: relative; border: 2px solid var(--vit-ink); background: var(--vit-paper-2); direction: ltr; overflow: hidden; }
.rv-title { display: flex; align-items: center; gap: var(--vit-space-3); padding: 6px 10px; background: var(--vit-ink); color: var(--vit-paper); font-size: 12px; }
.rv-r { display: grid; place-items: center; width: 18px; height: 18px; background: var(--vit-clay); color: var(--vit-on-clay); font-weight: 700; font-size: 11px; }
.rv-t { flex: 1; text-align: center; font-family: var(--vit-f-mono); font-size: 11px; }
.rv-w { display: flex; gap: 6px; } .rv-w i { width: 10px; height: 10px; border: 1px solid var(--vit-paper); }
.rv-tabs { display: flex; gap: 14px; padding: 4px 10px; background: var(--vit-paper-3); font-size: 12px; border-bottom: 1px solid var(--vit-line-default); overflow: hidden; white-space: nowrap; }
.rv-tabs .on { font-weight: 700; border-bottom: 2px solid var(--vit-clay); }
.rv-ribbon { position: relative; padding: 8px 10px; background: var(--vit-paper); border-bottom: 1px solid var(--vit-line-default); }
.rv-panel { display: inline-block; max-width: 100%; direction: rtl; }
.rv-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.rb-lg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 72px; padding: 6px 4px; border: 1.5px solid var(--vit-ink); background: var(--vit-paper); color: var(--vit-ink); font: inherit; cursor: pointer; }
.rb-lg .ico { font-weight: 700; font-size: 20px; color: var(--vit-clay-text); }
.rb-lg .lbl2 { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; }
.rb-lg.hover, .rb-lg:hover { background: var(--vit-paper-3); }
.rb-lg.press { background: var(--vit-clay); }
.rv-stack { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.rb-sm { font-size: 12px; padding: 2px 8px; border: 1px solid var(--vit-line-default); background: var(--vit-paper); white-space: nowrap; }
.rv-pl { margin-top: 6px; text-align: center; font-size: 11px; color: var(--vit-ink-3); border-top: 1px solid var(--vit-line-default); padding-top: 2px; }
.rv .tip { position: absolute; z-index: 4; padding: 3px 10px; background: var(--vit-ink); color: var(--vit-paper); font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; }
.rv .tip.show { opacity: 1; }
.rv-view { background: var(--vit-surface-deep); }
.rv-vtab { padding: 3px 10px; font-size: 11px; background: var(--vit-paper-3); border-bottom: 1px solid var(--vit-line-default); }
/* the real screenshots are 1916 wide; the canvas shows only the drawing area (x 225-1500, y 195-990 of the screenshot) */
.canvas { position: relative; aspect-ratio: 1275 / 795; overflow: hidden; background: var(--vit-paper); }
.canvas img { position: absolute; width: calc(100% * 1916 / 1275); max-width: none; height: auto; left: calc(-100% * 225 / 1275); top: calc(-100% * 195 / 795); }
.canvas .bef { opacity: 0; }
.canvas:not(.fixed).armed .bef { opacity: 1; }
.canvas .stamp { position: absolute; top: 8px; inset-inline-start: 8px; padding: 2px 10px; background: var(--vit-ink); color: var(--vit-paper); font-weight: 700; font-size: 12px; }
.rv-status { display: flex; justify-content: space-between; padding: 3px 10px; font-size: 11px; background: var(--vit-ink); color: var(--vit-paper); }
.rv .cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; opacity: 0; }
.rv .cursor::before, .rv .cursor::after { content: ""; position: absolute; background: var(--vit-ink); opacity: .5; }
.rv .cursor::before { left: -2000px; width: 4000px; top: -.5px; height: 1px; }
.rv .cursor::after { top: -2000px; height: 4000px; left: -.5px; width: 1px; }
.rv .cursor b { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border: 1.5px solid var(--vit-ink); background: var(--vit-paper); }
.rv-cap { margin: var(--vit-space-2) 0 0; color: var(--vit-ink-3); font-size: 13px; }

/* ── scope cells: the title block, drawn by a pen ── */
.tblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: var(--vit-space-5) 0; }
.tblock .cell { position: relative; padding: var(--vit-space-5) var(--vit-space-5) var(--vit-space-6); min-height: 150px; }
.tblock .cell .fr { position: absolute; inset: 0; margin-inline-start: -1.5px; border: 1.5px solid var(--vit-ink); pointer-events: none; }
.tblock .cell .body { position: relative; }
.tblock .cell strong { display: block; font-size: 20px; line-height: 1.25; margin-bottom: var(--vit-space-2); }
@media (max-width: 820px) { .tblock { grid-template-columns: 1fr; } }

/* ── pricing ── */
.sh { margin: 0 0 var(--vit-space-5); color: var(--vit-ink-3); }
.plans .price { position: relative; border: 1.5px solid var(--vit-ink); background: var(--vit-paper); padding: var(--vit-space-5) 28px 28px; }
.plans .price.team { border-width: 3px; }
.plans .price .fr { display: none; }
.plans .price .tag { position: absolute; top: -13px; inset-inline-start: 22px; z-index: 1; padding: 2px 10px; background: var(--vit-clay); color: var(--vit-on-clay); font-size: 12px; font-weight: 800; border: 1.5px solid var(--vit-ink); }
.plans h3 { margin: var(--vit-space-2) 0 0; }
.pacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vit-space-3); margin-top: var(--vit-space-4); }
.pacts [data-cta] { margin: 0; }
.plans [data-extra-seat] { margin: var(--vit-space-4) 0 var(--vit-space-2); }
.trial { margin: var(--vit-space-5) 0 var(--vit-space-3); max-width: none; }
.trial b { color: var(--vit-ink); text-decoration: underline; text-decoration-color: var(--vit-clay); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ── the closing band: the one full clay area; the purchase is ink on clay (.on-clay). The design gate allows exactly this on a
   zone that is itself clay (SP-14.09, contract 1.4.19). ── */
.home10 .band { margin-inline: calc(-1 * clamp(16px, 4vw, 48px)); margin-bottom: calc(-1 * var(--vit-space-7)); }
.band .cta.on-clay { background: var(--vit-ink); color: var(--vit-paper); border: 2px solid var(--vit-ink); box-shadow: 5px 5px 0 var(--vit-paper); text-decoration: none; display: inline-block; font-weight: 700; border-radius: var(--vit-r-sm); }
.band .cta.on-clay:hover { background: var(--vit-paper); color: var(--vit-ink); }
.band .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vit-space-4); }
.band .band-note { margin: var(--vit-space-4) 0 0; }

/* ── motion: only when allowed (home.js sets .arm then .play) ── */
@media (prefers-reduced-motion: no-preference) {
  .hero10 .xh, .hero10 .pick, .hero10 .coord { transition: opacity .15s; }
  .hero10.arm .hsvg path, .hero10.arm .hsvg circle { stroke-dashoffset: 1; }
  .hero10.arm .hsvg text { opacity: 0; }
  .hero10.arm.play .hsvg .bd { animation: draw 1.5s var(--ease) .05s forwards; }
  .hero10.arm.play .hsvg .bd2 { animation: draw 1.5s var(--ease) .3s forwards; }
  .hero10.arm.play .hsvg .ax { animation: draw 1.1s var(--ease) .55s forwards; }
  .hero10.arm.play .hsvg .bb circle { animation: draw .45s var(--ease) .35s forwards; }
  .hero10.arm.play .hsvg text { animation: fadein .3s linear .75s forwards; }
  /* the headline: each word is wiped in, right to left; the underline is drawn last */
  .hero10.arm h1 .w { clip-path: inset(-25% 0 -35% 100%); }
  .hero10.arm.play h1 .w { clip-path: inset(-25% -2% -35% -2%); transition: clip-path .5s var(--ease); }
  .hero10.arm.play h1 .w:nth-child(1) { transition-delay: .30s; } .hero10.arm.play h1 .w:nth-child(2) { transition-delay: .45s; }
  .hero10.arm.play h1 .w:nth-child(3) { transition-delay: .60s; } .hero10.arm.play h1 .w:nth-child(4) { transition-delay: .75s; }
  .hero10.arm.play h1 .w:nth-child(5) { transition-delay: .90s; } .hero10.arm.play h1 .w:nth-child(6) { transition-delay: 1.05s; }
  .hero10.arm.play h1 .w:nth-child(7) { transition-delay: 1.20s; } .hero10.arm.play h1 .w:nth-child(8) { transition-delay: 1.35s; }
  .hero10.arm.play h1 .w:nth-child(9) { transition-delay: 1.50s; } .hero10.arm.play h1 .w:nth-child(10) { transition-delay: 1.65s; }
  .hero10.arm h1 em path { stroke-dashoffset: 1; }
  .hero10.arm.play h1 em path { animation: draw .6s var(--ease) 2s forwards; }
  .hero10.arm .rv9 { clip-path: inset(-24px 0 -24px 100%); }
  .hero10.arm.play .rv9 { clip-path: inset(-24px); transition: clip-path .8s var(--ease) 1.4s; }
  .hero10.arm.play .rv9.kick { transition-delay: 0s; }
  .hero10.arm .hstrip { opacity: 0; }
  .hero10.arm.play .hstrip { animation: fadein .5s linear 1.2s forwards; }
  /* scroll-in reveals: the cell frame and its text are drawn when they enter */
  .home10 [data-rv].armed { opacity: 0; transform: translateY(14px); }
  .home10 [data-rv].armed.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .tblock .cell.armed .fr { clip-path: inset(0 0 100% 100%); }
  .tblock .cell.armed.in .fr { clip-path: inset(0); transition: clip-path .9s var(--ease); }
  .canvas .bef { transition: opacity .45s linear; }
  .rv .cursor { transition: opacity .4s; }
  .rv .tip { transition: opacity .2s; }
  .rb-lg { transition: background .15s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadein { to { opacity: 1; } }
}

/* ── the Vitruvius page: the 8 ribbon tools, and the buy strip ── */
.buystrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vit-space-4); margin: var(--vit-space-5) 0; }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: var(--vit-space-5) 0; border: 1.5px solid var(--vit-ink); }
.tools .tool { padding: var(--vit-space-4); border-inline-end: 1px solid var(--vit-line-strong); border-bottom: 1px solid var(--vit-line-strong); min-width: 0; }
.tools .tool h3 { margin: 0 0 var(--vit-space-2); font-size: 17px; }
.tools .tool p { margin: 0; font-size: 15px; color: var(--vit-ink-2); }
.tools .tool .code { display: block; margin-bottom: var(--vit-space-1); }
@media (max-width: 960px) { .tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tools { grid-template-columns: 1fr; } }
.sh { margin: 0 0 var(--vit-space-5); color: var(--vit-ink-3); }

/* ── the opening of the pages that sell nothing yet (PageHero): smaller, no plate ── */
.hero10.mini .hgrid { padding: clamp(56px, 7cqi, 84px) clamp(28px, 6cqi, 74px) clamp(36px, 5cqi, 56px) clamp(20px, 4cqi, 60px); }
.hero10.mini h1 { font-size: clamp(26px, 4.4cqi, 52px); margin: 0 0 var(--vit-space-4); }
.hero10.mini .sub { margin: 0; }

/* No onboarding (06.10): the line under the headline, the "without / with" table, the problem → process → output cards. Tokens only. */
.noob { margin: var(--vit-space-2) 0 0; font-weight: 600; color: var(--vit-ink); }
.noob-tail, .noob-standard { margin-block: var(--vit-space-3) 0; font-weight: 400; }
.wow { width: 100%; border-collapse: collapse; margin: var(--vit-space-5) 0 var(--vit-space-3); }
.wow th, .wow td { text-align: start; vertical-align: top; padding: var(--vit-space-3) var(--vit-space-4); border: 1.5px solid var(--vit-ink); }
.wow th { font-weight: 800; background: color-mix(in srgb, var(--vit-ink) 6%, var(--vit-paper)); }
.wow th:last-child { background: color-mix(in srgb, var(--vit-clay) 18%, var(--vit-paper)); }
.flows { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vit-space-4); margin: var(--vit-space-4) 0; }
.flow { border: 1.5px solid var(--vit-ink); padding: var(--vit-space-4); }
.flow h3 { margin: 0 0 var(--vit-space-2); }
.flow dl { margin: 0; }
.flow dt { font-size: 13px; font-weight: 800; margin-top: var(--vit-space-2); color: var(--vit-ink-3); }
.flow dd { margin: 0; }
@media (max-width: 820px) { .flows { grid-template-columns: 1fr; } .wow th, .wow td { padding: var(--vit-space-2) var(--vit-space-3); } }
.cta-note, .trial b { font-weight: 800; }