/* The bold homepage version (/home-bold), on top of home-alternative.css. Same layout; a larger logo, bigger and
   bolder titles, and body text, labels and captions made brighter, heavier and larger so they read easily. */

/* Logo and navigation */
.page-home-bold .nav__brand .logo { height: 44px; }
.page-home-bold .nav__links a { color: #e6ecf0; font-weight: 600; font-size: 1rem; }
.page-home-bold .nav__links a:hover { color: #fff; }

/* Text colours: the muted grey becomes a light grey */
.page-home-bold { --alt-muted: #d3dce2; --fg-2: #dfe6eb; --fg-3: #b9c5cd; }

/* Titles */
.page-home-bold .alt-hero h1 { font-size: clamp(3.4rem, 5.3vw, 5.8rem); font-weight: 700; letter-spacing: -.05em; }
.page-home-bold .alt-section-head h2,
.page-home-bold .alt-questions h2 { font-size: clamp(2.8rem, 4.2vw, 4.3rem); font-weight: 700; }
.page-home-bold .alt-parametric .alt-section-head h2 { font-size: clamp(2.7rem, 3.8vw, 4rem); }
.page-home-bold .alt-finale h2 { font-size: clamp(3.4rem, 6vw, 6.2rem); font-weight: 700; }
.page-home-bold main h3,
.page-home-bold .alt-kernel-features h3,
.page-home-bold .alt-example-steps h3,
.page-home-bold .alt-workspaces h3 { font-weight: 700; font-size: 1.32rem; }
.page-home-bold .alt-mcp-flow strong { font-weight: 700; font-size: 1.08rem; }

/* Body text: bigger, heavier, brighter */
.page-home-bold .alt-lead { font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 500; color: #f2f5f7; }
.page-home-bold .alt-hero-body,
.page-home-bold .alt-section-head > p:not(.eyebrow),
.page-home-bold .alt-parametric .alt-section-head > p:not(.eyebrow),
.page-home-bold .alt-ai-intro p,
.page-home-bold .alt-finale p:not(.eyebrow) { font-size: 1.15rem; font-weight: 500; line-height: 1.65; color: var(--alt-muted); }
.page-home-bold .alt-ai-intro p:last-child { font-size: 1.05rem; color: #c3ced6; }
.page-home-bold .alt-kernel-features p,
.page-home-bold .alt-example-steps p,
.page-home-bold .alt-workspaces p,
.page-home-bold .alt-faq details p { font-size: 1.05rem; font-weight: 500; line-height: 1.65; color: #ccd6dd; }
.page-home-bold .alt-faq summary { font-size: 1.12rem; font-weight: 600; }
.page-home-bold .alt-request-card p { font-size: 1.08rem; font-weight: 500; color: #f2f5f7; }
.page-home-bold .alt-edit-list { font-size: 1.02rem; font-weight: 500; color: #e3e9ed; }
.page-home-bold .alt-example-content blockquote { font-weight: 500; }
.page-home-bold .alt-example-outcome strong { font-size: 1.02rem; font-weight: 600; color: #f2f5f7; }
.page-home-bold .alt-mcp-flow small { font-size: .92rem; font-weight: 500; color: #c3ced6; }
.page-home-bold .alt-mcp-foot p { font-size: .95rem; font-weight: 500; color: #c3ced6; }
.page-home-bold .alt-demo-options button { font-size: 1.02rem; font-weight: 600; color: #c3ced6; }

/* Labels, eyebrows and captions (the small mono text): larger, semibold, brighter */
.page-home-bold .eyebrow,
.page-home-bold .alt-hero-copy .eyebrow { font-size: .86rem; font-weight: 600; color: #e6ecf0; letter-spacing: .08em; }
.page-home-bold .alt-preview { font-size: .82rem; font-weight: 600; color: #c3ced6; }
.page-home-bold .alt-preview a { color: #e6ecf0; }
.page-home-bold .alt-preview-links { display: flex; gap: 24px; }
.page-home-bold .alt-small,
.page-home-bold .alt-hero-note { font-size: .82rem; font-weight: 600; color: #c3ced6; }
.page-home-bold .alt-hero-note span { color: #8a99a4; }
.page-home-bold .alt-frame-head { font-size: .8rem; font-weight: 600; color: #e6ecf0; }
.page-home-bold .alt-frame-head > span:last-child { color: #c3ced6; }
.page-home-bold .alt-model-tag { font-size: .74rem; font-weight: 600; color: #e6ecf0; }
.page-home-bold .alt-model-tag b { font-size: .84rem; font-weight: 600; }
.page-home-bold .alt-model-frame figcaption,
.page-home-bold .alt-app-shot figcaption,
.page-home-bold .alt-maths figcaption { font-size: .76rem; font-weight: 600; color: #c3ced6; }
.page-home-bold .alt-model-frame figcaption > span:first-child { color: #e6ecf0; }
.page-home-bold .alt-overline { font-size: .74rem; font-weight: 600; color: #c3ced6; }
.page-home-bold .alt-hero-connection { font-size: .82rem; font-weight: 600; color: #e6ecf0; }
.page-home-bold .alt-hero-connection b { font-weight: 700; }
.page-home-bold .alt-diagram-head { font-size: .8rem; font-weight: 600; color: #e6ecf0; }
.page-home-bold .alt-number,
.page-home-bold .alt-example-steps li > span,
.page-home-bold .alt-workspaces span { font-size: .82rem; font-weight: 700; }
.page-home-bold .alt-mcp-flow span:not(.alt-flow-arrow) { font-size: .74rem; font-weight: 600; color: #c3ced6; }
.page-home-bold .alt-mcp-node span:not(.alt-flow-arrow) { color: var(--orange); }
.page-home-bold .alt-example-outcome > span,
.page-home-bold .alt-demo-header .alt-small { font-size: .76rem; font-weight: 600; color: #c3ced6; }

/* With the stats strip gone, a little more room under the hero */
.page-home-bold .alt-hero-grid { padding-bottom: 72px; }

@media (max-width: 600px) {
  .page-home-bold .nav__brand .logo { height: 36px; }
  .page-home-bold .alt-hero h1 { font-size: clamp(2.9rem, 9.4vw, 3.8rem); }
  .page-home-bold .alt-section-head h2, .page-home-bold .alt-questions h2 { font-size: clamp(2.3rem, 7.2vw, 3rem); }
  .page-home-bold .alt-finale h2 { font-size: clamp(3rem, 10vw, 4.2rem); }
  .page-home-bold .alt-lead { font-size: 1.2rem; }
  .page-home-bold .alt-hero-body, .page-home-bold .alt-section-head > p:not(.eyebrow) { font-size: 1.06rem; }
  .page-home-bold .eyebrow, .page-home-bold .alt-hero-copy .eyebrow { font-size: .72rem; }
  .page-home-bold .alt-preview { font-size: .68rem; }
  .page-home-bold .alt-preview-links { gap: 14px; }
  .page-home-bold .alt-small, .page-home-bold .alt-hero-note, .page-home-bold .alt-frame-head,
  .page-home-bold .alt-model-frame figcaption, .page-home-bold .alt-app-shot figcaption, .page-home-bold .alt-maths figcaption,
  .page-home-bold .alt-overline, .page-home-bold .alt-hero-connection, .page-home-bold .alt-diagram-head,
  .page-home-bold .alt-mcp-flow span:not(.alt-flow-arrow), .page-home-bold .alt-demo-header .alt-small { font-size: .66rem; }
  .page-home-bold .alt-demo-options button { font-size: .85rem; }
  .page-home-bold .alt-hero-grid { padding-bottom: 48px; }
}

/* The site ships Public Sans up to Semibold (600), so 700 alone looks no heavier: a fine outline in the text's own
   colour thickens the strokes of the big titles. */
.page-home-bold .alt-hero h1,
.page-home-bold .alt-section-head h2,
.page-home-bold .alt-questions h2,
.page-home-bold .alt-finale h2 { -webkit-text-stroke: .018em currentColor; paint-order: stroke fill; }
.page-home-bold main h3 { -webkit-text-stroke: .012em currentColor; }

/* "Under the hood": a light band in the engineering-drawing style (cool grey, drawing grid, an underlined accent
   word, a slate graphic card and four outlined fact cards with crosshair marks) between the dark sections. */
.hb-kernel { padding: 120px 0; color: #0e1a24; background-color: #edf1f4;
  background-image: linear-gradient(rgba(83,100,114,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(83,100,114,.09) 1px, transparent 1px);
  background-size: 32px 32px; }
.hb-kernel-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; margin-bottom: 48px; }
.hb-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 .86rem var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: #536472; }
.hb-label::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--orange); flex: none; }
.page-home-bold .hb-kernel h2 { font-size: clamp(2.8rem, 4.6vw, 4.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; color: #0e1a24;
  margin-bottom: 22px; }
.page-home-bold .hb-kernel h2 em { font-style: normal; color: inherit;
  background: linear-gradient(var(--orange), var(--orange)) left 94% / 100% .1em no-repeat; }
.hb-kernel-lead { font-size: 1.2rem; font-weight: 500; line-height: 1.6; color: #2a3742; max-width: 34em; }
.hb-comb { margin: 0; padding: 30px; border-radius: 18px; background: #112230; }
.hb-comb svg { width: 100%; height: auto; display: block; }
.hb-comb figcaption { margin-top: 14px; font: 700 .8rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c3ced6; }
.hb-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hb-facts article { padding: 32px; border-radius: 18px; background: #fff; border: 1px solid #d6dde3; }
.page-home-bold .hb-facts h3 { font-size: 1.3rem; color: #0e1a24; margin-bottom: 10px; letter-spacing: -.02em; }
.hb-facts p { font-size: 1rem; font-weight: 500; line-height: 1.55; color: #2a3742; }
.hb-mark { position: relative; display: block; width: 20px; height: 20px; margin: 6px 0 22px 6px; border-radius: 50%; border: 2px solid var(--orange); }
.hb-mark::before, .hb-mark::after { content: ""; position: absolute; background: var(--orange); }
.hb-mark::before { left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; }
.hb-mark::after { top: 50%; left: -6px; right: -6px; height: 2px; margin-top: -1px; }
@media (max-width: 1000px) {
  .hb-kernel-top { grid-template-columns: 1fr; gap: 36px; }
  .hb-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hb-kernel { padding: 76px 0; }
  .hb-facts { grid-template-columns: 1fr; }
}

/* The cursor-following triangle mesh (home-bold.js) sits behind the hero */
.alt-hero, .hb-follow { position: relative; overflow: hidden; }
.alt-hero > .wrap, .hb-follow > .wrap { position: relative; z-index: 1; }
.hb-mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------------------------------------------------------------- Interactive pieces (home-bold.js) */
/* The curve you can drag, and its "Try me" button */
.hb-comb { position: relative; }
.hb-comb figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb-comb-hint { color: var(--orange); }
.comb--live .comb__hit { fill: transparent; cursor: grab; touch-action: none; outline: none; }
.comb--live.comb--dragging, .comb--live.comb--dragging .comb__hit { cursor: grabbing; }
.comb--live .comb__hit:hover, .comb--live .comb__hit:focus-visible { fill: rgba(255,131,0,.18); stroke: var(--orange); stroke-width: 1.5; }
.comb--live .comb__pts rect { pointer-events: none; transition: fill .2s; }
.comb__pts--hint rect:nth-child(3) { animation: hb-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hb-pulse { 50% { fill: var(--orange); transform: scale(1.6); } }

/* The Mini slider: eight part-scans vs the fused mesh */
.hb-compare { position: relative; width: min(100%, 1000px, calc((100vh - 330px) * 1.868)); margin: 0 auto; aspect-ratio: 1160 / 621; --split: 50%; user-select: none; }
.hb-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb-compare-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.hb-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: var(--orange);
  box-shadow: 0 0 14px #ff8300aa; pointer-events: none; }
.hb-compare-handle span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: grid; place-items: center; background: var(--orange); color: #140b00; font-size: 1.4rem; font-weight: 700; box-shadow: 0 6px 20px #0008; }
.hb-compare-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hb-compare:focus-within { outline: 2px solid var(--orange); outline-offset: 4px; }
.hb-compare-label { position: absolute; left: 18px; top: 10px; border: 2px solid var(--orange); padding: 7px 12px; border-radius: 6px; background: #0b1014cc; color: #e6ecf0;
  font: 700 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.hb-compare-label--right { left: auto; right: 18px; }

/* Points join into a mesh behind the finale */
.hb-cloud { position: relative; overflow: hidden; }
.hb-cloud > .wrap { position: relative; z-index: 1; }
.hb-cloud-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .comb__pts--hint rect:nth-child(3) { animation: none; }
}

/* "Try me" above the curve */
.hb-comb-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hb-try { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--orange); color: #140b00; font: 700 1.05rem var(--sans); box-shadow: 0 8px 22px #ff830055; transition: transform .2s, box-shadow .2s; }
.hb-try:hover { transform: translateY(-1px); box-shadow: 0 10px 28px #ff830077; }
.hb-try:focus-visible { outline: 3px solid #0e1a24; outline-offset: 3px; }
.hb-try span { font-size: 1.15rem; }
.hb-comb-wrap .hb-comb { align-self: stretch; }
/* On the door, "Try me" floats over the 3D view and fades once the demo is used (home-bold.js) */
.hb-door-view { position: relative; }
.hb-try--over { position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%); box-shadow: 0 10px 30px #0009, 0 0 0 0 #ff830077;
  transition: opacity .35s, transform .2s; animation: hb-try-pulse 2.2s ease-in-out infinite; }
.hb-try--over:hover { transform: translateX(-50%) translateY(-1px); }
.hb-try--over.is-gone { opacity: 0; pointer-events: none; animation: none; }
@keyframes hb-try-pulse { 50% { box-shadow: 0 10px 30px #0009, 0 0 0 10px #ff830000; } 0%, 100% { box-shadow: 0 10px 30px #0009, 0 0 0 0 #ff830077; } }
@media (prefers-reduced-motion: reduce) { .hb-try--over { animation: none; } }

/* The Spline tool's curve over a scan section (static/js/sectionfit.js, picture in partials/section-fit.svg): the
   scan cyan and the curve white as in Compare Sections, whiskers in the deviation key's colours. */
.fit { display: block; width: 100%; height: auto; overflow: visible; -webkit-user-select: none; user-select: none; }
.fit [hidden] { display: none; }
.fit__scan { fill: none; stroke: #39d3ef; stroke-width: 2.6; stroke-linecap: round; }
.fit__whiskers path { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.fit__tips { fill: none; stroke: #d7e0e6; stroke-width: 1; opacity: .5; }
.fit__curve { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(190, 220, 245, .35)); }
.fit__curve-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: none; }
.fit--live .fit__curve-hit { pointer-events: stroke; cursor: copy; touch-action: none; }
.fit__pts rect { fill: #112230; stroke: #fff; stroke-width: 1.6; pointer-events: none; }
.fit__hit { fill: transparent; cursor: grab; touch-action: none; outline: none; }
.fit__hit:hover, .fit__hit:focus-visible { fill: rgba(255, 131, 0, .2); stroke: var(--orange); stroke-width: 1.5; }
.fit--dragging, .fit--dragging .fit__hit, .fit--dragging .fit__curve-hit { cursor: grabbing; }
.fit__teeth { fill: none; stroke: var(--orange); stroke-width: 1; opacity: .7; }
.fit__env { fill: none; stroke: var(--orange); stroke-width: 1.4; }
.hb-fit-readout { margin: 0 0 10px; font: 700 1rem var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.hb-fit-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 8px; font: 600 .82rem var(--sans); color: #c3ced6; }
.hb-fit-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hb-fit-legend__scan::before { content: ""; width: 18px; height: 3px; background: radial-gradient(circle, #39d3ef 1.4px, transparent 1.6px) 0 50% / 6px 3px repeat-x; }
.hb-fit-legend__curve::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: #fff; }
.hb-fit-legend__key { margin-left: auto; }
.hb-fit-legend__key svg { display: block; border-radius: 2px; }
@media (max-width: 600px) {
  .hb-comb.hb-fit { padding: 20px 14px; }
  .fit__hit { r: 30px; }
  .fit--live .fit__curve-hit { stroke-width: 36; }
  .hb-fit-legend__key { margin-left: 0; }
}
.hb-fit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 14px; }
.hb-fit-note { flex: 1 1 260px; margin: 0; font-size: .9rem; line-height: 1.5; color: #b9c5cd; }
.hb-fit-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-fit-toggles .hb-fit-reset { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.hb-fit--plain .fit__whiskers, .hb-fit--plain .fit__tips, .hb-fit--plain .hb-fit-legend__dev { display: none; }
.hb-fit-toggles button { height: 34px; padding: 0 14px; border: 1px solid #ffffff38; border-radius: 999px; background: transparent; color: #e3e9ee;
  font: 600 .88rem var(--sans); cursor: pointer; }
.hb-fit-toggles button:hover { border-color: var(--orange); }
.hb-fit-toggles button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #140b00; }
.hb-fit-toggles button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Under the hood: the door skin surfacing demo (doorfit.js). */
@media (min-width: 1001px) { .hb-kernel-top:has(.hb-door) { grid-template-columns: .82fr 1.18fr; gap: 48px; } }
.hb-door-view { position: relative; overflow: hidden; border-radius: 12px; background: #112230; }
.hb-door-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; cursor: grab; touch-action: pan-y; }
.hb-door-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hb-door--live .hb-door-poster { display: none; }
.hb-door-section { position: absolute; top: 10px; right: 10px; width: 30%; max-width: 170px; aspect-ratio: 1; border: 1px solid #ffffff26;
  border-radius: 10px; background: #0b1820e8; pointer-events: none; }
.hb-door-section[hidden], .hb-door-key[hidden] { display: none; }
.hb-door-key { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; margin: 0; padding: 5px 10px;
  border-radius: 999px; background: #0b1820d9; font: 600 .78rem var(--sans); color: #e3e9ee; pointer-events: none; }
.hb-door-key__bar { width: 92px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #0040ff, #00ffff 25%, #33c759 37.5% 62.5%, #ffff00 75%, #ff2000); }
.hb-door-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.hb-door-steps button { min-height: 40px; padding: 4px 8px; border: 1px solid #ffffff38; border-radius: 10px; background: transparent; color: #e3e9ee;
  font: 700 .84rem/1.2 var(--sans); cursor: pointer; }
.hb-door-steps button span { margin-right: 3px; opacity: .65; }
.hb-door-steps button:hover { border-color: var(--orange); }
.hb-door-steps button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #140b00; }
.hb-door-steps button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Surface from mesh's own option, under its step */
.hb-door-steps .hb-door-option { grid-column: 1; min-height: 32px; border-style: dashed; font-weight: 600; font-size: .8rem; }
.hb-door-show { align-items: center; margin-top: 12px; }
.hb-door-show__label { margin-right: 2px; font: 700 .88rem var(--sans); color: #c3ced6; }
.hb-door-note { margin-top: 12px; }
@media (max-width: 600px) {
  .hb-comb.hb-door { padding: 20px 14px; }
  .hb-door-steps { grid-template-columns: repeat(2, 1fr); }
  /* Points stays under Surface from mesh: 1 and 2, Points, then 3 and 4 */
  .hb-door-steps .hb-door-option { grid-row: 2; grid-column: 1; }
  .hb-door-steps [data-door-step="trim"] { grid-row: 3; grid-column: 1; }
  .hb-door-steps [data-door-step="thicken"] { grid-row: 3; grid-column: 2; }
}

/* ---------------------------------------------------------------- Readability pass
   Small monospace capitals were the hardest thing to read. Labels, captions and notes now use Public Sans at a
   readable size, body text is near-white and larger, and the footer on this page is brighter. */
.page-home-bold { --alt-muted: #e8eef2; }
.page-home-bold .eyebrow, .page-home-bold .alt-hero-copy .eyebrow, .page-home-bold .alt-preview, .page-home-bold .alt-small,
.page-home-bold .alt-hero-note, .page-home-bold .alt-frame-head, .page-home-bold .alt-model-tag, .page-home-bold .alt-model-frame figcaption,
.page-home-bold .alt-app-shot figcaption, .page-home-bold .alt-maths figcaption, .page-home-bold .alt-overline, .page-home-bold .alt-hero-connection,
.page-home-bold .alt-diagram-head, .page-home-bold .alt-number, .page-home-bold .alt-example-steps li > span, .page-home-bold .alt-workspaces span,
.page-home-bold .alt-mcp-flow span:not(.alt-flow-arrow), .page-home-bold .alt-example-outcome > span, .page-home-bold .alt-demo-header .alt-small,
.hb-label, .hb-comb figcaption, .hb-compare-label {
  font-family: var(--sans); letter-spacing: .02em; text-transform: none; font-weight: 700; }
.page-home-bold .eyebrow, .page-home-bold .alt-hero-copy .eyebrow, .hb-label { font-size: 1rem; color: #fff; letter-spacing: .03em; }
.hb-label { color: #0e1a24; }
.page-home-bold .alt-small, .page-home-bold .alt-hero-note, .page-home-bold .alt-frame-head, .page-home-bold .alt-overline,
.page-home-bold .alt-hero-connection, .page-home-bold .alt-diagram-head, .page-home-bold .alt-demo-header .alt-small,
.page-home-bold .alt-example-outcome > span { font-size: .98rem; color: #eef2f5; }
.page-home-bold .alt-model-frame figcaption, .page-home-bold .alt-app-shot figcaption, .page-home-bold .alt-maths figcaption,
.hb-comb figcaption { font-size: .95rem; color: #e3e9ee; }
.page-home-bold .alt-model-tag { font-size: .9rem; }
.page-home-bold .alt-number, .page-home-bold .alt-example-steps li > span, .page-home-bold .alt-workspaces span,
.page-home-bold .alt-mcp-flow span:not(.alt-flow-arrow) { font-size: .95rem; }
.page-home-bold .alt-preview { font-size: .9rem; color: #e6ecf0; }
.hb-compare-label { font-size: 1rem; }

.page-home-bold .alt-lead { font-size: clamp(1.35rem, 1.8vw, 1.65rem); color: #fff; }
.page-home-bold .alt-hero-body, .page-home-bold .alt-section-head > p:not(.eyebrow), .page-home-bold .alt-ai-intro p,
.page-home-bold .alt-finale p:not(.eyebrow) { font-size: 1.25rem; line-height: 1.6; color: #eef2f5; }
.page-home-bold .alt-kernel-features p, .page-home-bold .alt-example-steps p, .page-home-bold .alt-workspaces p,
.page-home-bold .alt-faq details p, .page-home-bold .alt-mcp-flow small, .page-home-bold .alt-mcp-foot p { font-size: 1.1rem; color: #e3e9ee; }
.page-home-bold .alt-edit-list { font-size: 1.15rem; color: #f2f5f7; }
.page-home-bold .alt-faq summary { font-size: 1.2rem; }
.page-home-bold .alt-workspaces h3 { font-size: 1.4rem; }
.page-home-bold .hb-kernel-lead { font-size: 1.3rem; color: #1d2a35; }
.page-home-bold .hb-facts p { font-size: 1.1rem; color: #1d2a35; }
.page-home-bold .hb-facts h3 { font-size: 1.4rem; }

.page-home-bold .footer__brand p { color: #e3e9ee; font-size: 1.05rem; }
.page-home-bold .footer__h { font: 700 .95rem/1.4 var(--sans); letter-spacing: .04em; color: #fff; }
.page-home-bold .footer__cols a { color: #e3e9ee; font-size: 1.05rem; }
.page-home-bold .footer__cols a:hover { color: var(--orange); }
.page-home-bold .footer__base { font-size: .92rem; color: #c9d3da; }

/* Bump Map: the texture section from the clean concept, in the light grid style */
.hb-texture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 32px; }
.hb-chips button, .hb-chips a { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid #d6dde3; color: #0e1a24; font: 700 1rem var(--sans);
  cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s; }
.hb-chips button:hover, .hb-chips a:hover { border-color: var(--orange); transform: translateY(-1px); }
.hb-chips button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #140b00; box-shadow: 0 6px 16px #ff830055; }
.hb-chips button.is-now:not([aria-pressed="true"]) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.hb-chips a { background: transparent; border-style: dashed; }
.hb-chips button:focus-visible, .hb-chips a:focus-visible { outline: 3px solid #0e1a24; outline-offset: 2px; }
.hb-texture .alt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.hb-btn-ink { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 4px; color: #0e1a24; font-weight: 700;
  font-size: 1.05rem; text-decoration: none; box-shadow: inset 0 0 0 2px #0e1a24; transition: background .2s, color .2s; }
.hb-btn-ink:hover { background: #0e1a24; color: #fff; }
.hb-texture-media { margin: 0; justify-self: center; width: min(100%, 420px); aspect-ratio: 306 / 888; max-height: 640px; border-radius: 18px; overflow: hidden;
  background: #8f9aa1; border: 1px solid #d6dde3; box-shadow: 0 24px 60px #0e1a2433; }
.hb-texture-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1000px) { .hb-texture-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Pill-shaped buttons on this page (the site's primary button otherwise has the logo's 45-degree corner cut) */
.page-home-bold .btn { border-radius: 999px; }
.page-home-bold .btn--primary { clip-path: none; padding: 0 1.7em; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(255,131,0,.3); }
.page-home-bold .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px rgba(255,131,0,.42); }
.page-home-bold .btn--primary:focus-visible { box-shadow: 0 0 0 3px var(--void), 0 0 0 5px #fff; }
.page-home-bold main .btn--quiet { padding: 0 1.5em; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.page-home-bold main .btn--quiet::after { display: none; }
.page-home-bold main .btn--quiet:hover { background: #fff; color: var(--void); box-shadow: inset 0 0 0 2px #fff; }
.page-home-bold .hb-btn-ink { border-radius: 999px; }

/* The Mini picture is pinned while you scroll through its track, so the line sweeps while it's fully in view */
.hb-compare-track { position: relative; height: 420vh; margin-top: 0; }
.hb-compare-stick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 68px; }
.hb-ws-strip { margin-top: 18px; }
.page-home-bold .hb-ws-strip a { padding: 18px 20px 30px; }
.page-home-bold .hb-ws-strip span { margin-bottom: 10px; }
.page-home-bold .hb-ws-strip h3 { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .hb-compare-track { height: auto; } .hb-compare-stick { position: relative; height: auto; padding-top: 0; } }

/* Choose your plan: dark cards on a slightly lighter band, one short line each */
.hb-plans { padding: 110px 0; background: #161c22; border-top: 1px solid var(--alt-rule); }
.page-home-bold .hb-plans h2 { text-align: center; font-size: clamp(2.6rem, 4.2vw, 4rem); font-weight: 700; color: #fff; margin-bottom: 12px; }
.hb-plans-sub { text-align: center; font-size: 1.15rem; font-weight: 500; color: #e3e9ee; margin-bottom: 48px; }
.hb-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hb-plan { position: relative; display: flex; flex-direction: column; min-height: 230px; padding: 28px 28px 64px; border-radius: 22px; background: #05090c;
  color: #fff; text-decoration: none; border: 1px solid transparent; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s; }
.hb-plan:hover, .hb-plan:focus-visible { transform: translateY(-3px); border-color: #ff830080; background: #0a1116; outline: none; }
.page-home-bold .hb-plan h3 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 6px; color: #fff; }
.hb-plan-price { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.hb-plan p:not(.hb-plan-price) { font-size: 1.08rem; font-weight: 500; line-height: 1.5; color: #c9d3da; }
.hb-plan-go { position: absolute; right: 26px; bottom: 22px; font-size: 1.6rem; font-weight: 700; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.hb-plan:hover .hb-plan-go { transform: translateX(5px); color: var(--orange); }
.hb-plan--best { border-color: var(--orange); background: linear-gradient(160deg, #2a1604, #05090c 60%); }
.hb-plan-tag { position: absolute; top: 24px; right: 24px; padding: 4px 12px; border-radius: 999px; background: var(--orange); color: #140b00; font-weight: 700; font-size: .9rem; }
@media (max-width: 900px) { .hb-plan-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hb-plan-grid { grid-template-columns: 1fr; } }

/* Menu items get a pill behind them on hover, like revolut.com */
.page-home-bold .nav__links { gap: 4px; }
.page-home-bold .nav__links a, .page-home-bold .nav__signin { padding: 9px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.page-home-bold .nav__links a:hover, .page-home-bold .nav__signin:hover { background: rgba(255,255,255,.12); color: #fff; }
.page-home-bold .nav__links a[aria-current]::after { left: 16px; right: 16px; }

/* AI section as one graphic: your request -> Tesselform MCP -> the drawing it builds */
.hb-ai-head { max-width: 760px; }
.hb-ai-flow { display: grid; grid-template-columns: minmax(0, .85fr) 150px minmax(0, 1.15fr); align-items: center; margin-top: 48px; }
.hb-ai-flow figure { margin: 0; }
.hb-ai-who { display: block; margin-bottom: 14px; font-weight: 700; font-size: 1rem; color: var(--orange); }
.hb-ai-ask p { position: relative; padding: 26px 28px; border-radius: 22px 22px 22px 6px; background: #fff; color: #0e1a24;
  font-size: 1.35rem; font-weight: 600; line-height: 1.45; box-shadow: 0 18px 40px #0006; }
.hb-ai-link { display: flex; align-items: center; justify-content: center; }
.hb-ai-link i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 16px); background-size: 32px 2px;
  animation: hb-flow 1s linear infinite; }
.hb-ai-link span { flex: none; padding: 10px 14px; border-radius: 999px; background: var(--orange); color: #140b00; font-weight: 700; font-size: .92rem;
  writing-mode: horizontal-tb; text-align: center; line-height: 1.15; max-width: 96px; box-shadow: 0 0 24px #ff830066; }
@keyframes hb-flow { to { background-position: 32px 0; } }
.hb-ai-out { padding: 22px 24px 20px; border-radius: 22px; background: #0b1218; border: 1px solid #768c9b40; }
.hb-ai-out figcaption { margin-top: 10px; font-size: 1.02rem; font-weight: 600; color: #e3e9ee; }
.hb-plate { width: 100%; height: auto; display: block; }
.hb-plate-body { fill: #ff83001a; stroke: var(--orange); stroke-width: 3; stroke-dasharray: 1200; stroke-dashoffset: 0; }
.hb-plate-holes circle { fill: #0b1218; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.hb-plate-dims path { fill: none; stroke: #c9d3da; stroke-width: 1.5; }
.hb-plate-dims text { fill: #fff; font: 700 20px var(--sans); text-anchor: middle; }
.hb-plate-dims .hb-v { dominant-baseline: middle; }
.hb-plate-dims .hb-l { text-anchor: start; fill: var(--orange); }
.hb-ai-points { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 40px 0 0; padding: 0; }
.hb-ai-points li { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 600; color: #fff; }
.hb-ai-points li::before { content: "✓"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ff830026; color: var(--orange); font-weight: 700; }
.hb-ai-note { margin-top: 22px; font-size: 1.05rem; color: #c9d3da; }
.hb-ai-note a { color: #fff; }

/* Drawn in when it scrolls into view */
.hb-ai-flow.is-ready .hb-plate-body { stroke-dashoffset: 1200; fill-opacity: 0; }
.hb-ai-flow.is-ready .hb-plate-holes circle { transform: scale(0); }
.hb-ai-flow.is-ready .hb-plate-dims { opacity: 0; }
.hb-ai-flow.is-in .hb-plate-body { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1.2s .6s ease-in-out, fill-opacity .6s 1.6s; }
.hb-ai-flow.is-in .hb-plate-holes circle { transform: scale(1); transition: transform .4s cubic-bezier(.3,1.6,.5,1) 1.8s; }
.hb-ai-flow.is-in .hb-plate-holes circle:nth-child(2) { transition-delay: 1.9s; }
.hb-ai-flow.is-in .hb-plate-holes circle:nth-child(3) { transition-delay: 2s; }
.hb-ai-flow.is-in .hb-plate-holes circle:nth-child(4) { transition-delay: 2.1s; }
.hb-ai-flow.is-in .hb-plate-dims { opacity: 1; transition: opacity .6s 2.4s; }

@media (max-width: 900px) {
  .hb-ai-flow { grid-template-columns: 1fr; gap: 0; }
  .hb-ai-link { flex-direction: column; height: 110px; }
  .hb-ai-link i { width: 2px; height: auto; flex: 1; background: repeating-linear-gradient(180deg, var(--orange) 0 8px, transparent 8px 16px); animation: none; }
}
@media (prefers-reduced-motion: reduce) { .hb-ai-link i { animation: none; } }

/* Hero picture: one clean rounded image with a chip and a floating request, no frame bars */
.hb-hero-visual { position: relative; padding: 0 0 56px; }
.hb-hero-shot { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 960 / 595; background: #9a9d9f;
  box-shadow: 0 40px 90px #000a, 0 0 0 1px #ffffff14; }
.hb-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hb-hero-visual:hover .hb-hero-shot img { transform: scale(1.08); }
.hb-hero-chip { position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px;
  background: rgba(11,16,20,.6); backdrop-filter: blur(12px); color: #fff; font-weight: 700; font-size: .95rem; }
.hb-hero-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.hb-hero-ask { position: absolute; left: -28px; bottom: 0; max-width: 360px; padding: 18px 22px; border-radius: 22px 22px 22px 6px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px); color: #0e1a24; box-shadow: 0 24px 50px #0008; }
.hb-hero-ask > span { display: block; margin-bottom: 4px; font-weight: 700; font-size: .9rem; color: var(--orange-deep, #d65300); }
.hb-hero-ask p { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 900px) { .hb-hero-ask { left: 12px; right: 12px; max-width: none; } }

/* Chat bubbles: the words type out (home-bold.js); the untyped rest is invisible so the bubble keeps its size */
.hb-type-rest { color: transparent; }
.hb-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--orange);
  animation: hb-blink 1s steps(1) infinite; }
@keyframes hb-blink { 50% { opacity: 0; } }
.hb-caret[hidden] { display: none; }

/* Navigation sized like revolut.com: a 70px bar, a compact logo, 16px medium-weight menu items about 44px apart,
   and a 42px pill button */
.page-home-bold { --nav-h: 70px; }
.page-home-bold .nav__brand .logo { height: 32px; }
.page-home-bold .nav__links { gap: 20px; margin-left: -12px; }
.page-home-bold .nav__links a, .page-home-bold .nav__signin { padding: 8px 12px; font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: 0; }
.page-home-bold .nav__actions { gap: 28px; }
.page-home-bold .nav .btn--small { --btn-h: 42px; padding: 0 24px; font-size: 1rem; font-weight: 600; }
@media (max-width: 600px) { .page-home-bold .nav__brand .logo { height: 28px; } }

/* AI graphic, v2: one card. The request on the left with a small status line under it, the drawing on the right.
   No connector between them, so nothing floats. */
.hb-ai-flow { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "ask out" "status out"; gap: 18px 44px;
  align-items: start; align-content: center; padding: 40px; border-radius: 28px; background: #0f171d; border: 1px solid #768c9b33; }
.hb-ai-ask { grid-area: ask; align-self: end; }
.hb-ai-out { grid-area: out; align-self: center; background: #0b1218; }
.hb-ai-status { grid-area: status; align-self: start; display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 4px 0 0;
  padding: 9px 16px; border-radius: 999px; background: #ff83001a; border: 1px solid #ff830055; color: #ffd2a6; font-weight: 700; font-size: .98rem; }
.hb-ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: hb-pulse-dot 1.1s ease-in-out infinite; }
@keyframes hb-pulse-dot { 50% { opacity: .35; } }
.hb-ai-done { display: none; }
.hb-ai-flow.is-done .hb-ai-busy { display: none; }
.hb-ai-flow.is-done .hb-ai-done { display: inline; }
.hb-ai-flow.is-done .hb-ai-dot { animation: none; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.hb-ai-flow.is-done .hb-ai-status { background: #3ddc8414; border-color: #3ddc8455; color: #c8f5db; }
@media (max-width: 900px) {
  .hb-ai-flow { grid-template-columns: 1fr; grid-template-areas: "ask" "status" "out"; padding: 22px; gap: 16px; }
}

/* Scan to solid, automatically: three stages of the same scan, lit in turn as the row comes into view */
.hb-auto { padding: 120px 0; background: #0b1014; border-top: 1px solid var(--alt-rule); }
.hb-auto-head { max-width: 820px; margin-bottom: 52px; }
.page-home-bold .hb-auto h2 { font-size: clamp(2.8rem, 4.6vw, 4.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; color: #fff; margin-bottom: 20px; }
.page-home-bold .hb-auto h2 em { font-style: normal; color: var(--orange); }
.hb-auto-head > p:last-child { font-size: 1.25rem; font-weight: 500; line-height: 1.6; color: #eef2f5; max-width: 40em; }
.hb-stages { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; margin: 0; padding: 0; }
.hb-stages::before { content: ""; position: absolute; transition: background .3s; left: 16.6%; right: 16.6%; top: calc((100% - 120px) / 2); height: 2px; z-index: 0;
  background: linear-gradient(90deg, var(--orange) var(--fill, 100%), #ffffff1f var(--fill, 100%)); }
.hb-stage { position: relative; z-index: 1; }
.hb-stage figure { margin: 0 0 18px; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: #101a22; border: 1px solid #768c9b33;
  transition: border-color .4s, box-shadow .4s, transform .4s; }
.hb-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-stage-n { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: #ffffff14;
  color: #fff; font-weight: 700; font-size: .9rem; transition: background .4s, color .4s; }
.page-home-bold .hb-stage h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.hb-stage p { font-size: 1.1rem; font-weight: 500; color: #d3dce2; }
.hb-stage.is-on figure { border-color: #ff830099; box-shadow: 0 18px 50px #ff830022; }
.hb-stage.is-on .hb-stage-n { background: var(--orange); color: #140b00; }
.hb-stages.is-ready .hb-stage { opacity: 0; transform: translateY(46px) scale(.97); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.hb-stages.is-ready .hb-stage.is-on { opacity: 1; transform: none; }
.hb-versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.hb-versus > div { padding: 24px 28px; border-radius: 20px; background: #ffffff0a; border: 1px solid #ffffff14; }
.hb-versus span { display: block; margin-bottom: 6px; font-weight: 700; font-size: 1rem; color: #9fb0bc; }
.hb-versus p { font-size: 1.2rem; font-weight: 600; color: #e3e9ee; }
.hb-versus > div:first-child p { text-decoration: line-through; text-decoration-color: #ff830099; text-decoration-thickness: 2px; color: #b9c5cd; }
.hb-versus-new { background: #ff830014 !important; border-color: #ff830066 !important; }
.hb-versus-new span { color: var(--orange); }
.hb-versus-new p { color: #fff; }
.hb-auto-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 900px) {
  .hb-stages, .hb-versus { grid-template-columns: 1fr; }
  .hb-stages::before { display: none; }
  .hb-auto { padding: 80px 0; }
}

/* AI examples 1-3: tabs, and the drawing / scan examples */
.hb-ai-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 18px; }
.hb-ai-tabs button { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 8px; border: 1px solid #ffffff1f; border-radius: 999px;
  background: #ffffff08; color: #e3e9ee; font: 700 1.02rem var(--sans); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.hb-ai-tabs button b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ffffff14; font-size: .9rem; }
.hb-ai-tabs button:hover { border-color: #ff830088; }
.hb-ai-tabs button[aria-selected="true"] { background: #fff; color: #0e1a24; border-color: #fff; }
.hb-ai-tabs button[aria-selected="true"] b { background: var(--orange); color: #140b00; }
.hb-ai-tabs button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.hb-ai-tabs + .hb-ai-flow { margin-top: 0; }
.hb-ai-flow[hidden] { display: none; }
.hb-ai-flow { margin-top: 0; min-height: 470px; }

.hb-drawing { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.hb-dw-sheet { fill: #f4f6f8; }
.hb-dw-part path, .hb-dw-part circle { fill: none; stroke: #0e1a24; stroke-width: 2.2; }
.hb-dw-part .hb-dw-hidden { stroke-dasharray: 6 5; stroke-width: 1.4; stroke: #536472; }
.hb-dw-dims path { fill: none; stroke: #536472; stroke-width: 1.2; }
.hb-dw-dims text, .hb-dw-t { fill: #0e1a24; font: 700 15px var(--sans); text-anchor: middle; }
.hb-dw-dims .hb-dw-v { dominant-baseline: middle; }
.hb-dw-dims .hb-dw-l { text-anchor: start; fill: #d65300; }
.hb-dw-t { font-size: 11px; letter-spacing: .12em; fill: #536472; }

.hb-chat-input { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: #fff; color: #0e1a24;
  box-shadow: 0 14px 34px #0006; }
.hb-chat-input p { flex: 1; margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
.hb-chat-clip { font-size: 1.1rem; opacity: .7; }
.hb-chat-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #140b00; font-weight: 700; font-size: 1.15rem; }

.hb-ai-out--3d { display: flex; flex-direction: column; }
.hb-ai-who small { margin-left: 10px; font-weight: 600; color: #9fb0bc; }

.hb-rules { margin-top: 16px; padding: 20px 22px; border-radius: 18px; background: #ffffff0a; border: 1px solid #ffffff1a; }
.hb-rules-file { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 8px; background: #ffffff12; color: #e3e9ee; font-weight: 600; font-size: .95rem; }
.hb-rules-title { display: block; margin-bottom: 8px; font-weight: 700; color: var(--orange); }
.hb-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hb-rules li { display: flex; gap: 10px; font-size: 1.05rem; font-weight: 500; color: #eef2f5; }
.hb-rules li::before { content: "✓"; color: var(--orange); font-weight: 700; }

.page-home-bold .hb-chat-input p { padding: 0; background: none; box-shadow: none; border-radius: 0; color: #0e1a24; font-size: 1.1rem; }
.hb-chat-clip { filter: grayscale(1); }

/* Example 2: the uploaded drawing, and the space for the interactive 3D model */
.hb-upload { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hb-upload-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: #ff83001f; border: 1px solid #ff830066; }
.hb-upload-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hb-upload-text b { display: block; color: #fff; font-size: 1rem; }
.hb-upload-text small { color: #9fb0bc; font-size: .9rem; font-weight: 600; }
.hb-drawing-img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 35% 40%; margin-bottom: 14px; border-radius: 16px; background: #f4f6f8; }
.hb-model-slot { flex: 1; display: grid; place-content: center; gap: 4px; min-height: 340px; margin: 4px 0 6px; border-radius: 16px; text-align: center;
  border: 2px dashed #ffffff26; background: repeating-linear-gradient(45deg, #ffffff05 0 12px, transparent 12px 24px); }
.hb-model-slot span { color: #fff; font-weight: 700; font-size: 1.1rem; }
.hb-model-slot small { color: #9fb0bc; font-weight: 600; }

/* Example 2, laid out like the mock-up: the open book large on the left, fading into the page, a big upload arrow over
   it, the request below, and the space for the spinning model on the right. No card around it. */
.hb-ai-flow--drawing { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: none; gap: 40px; align-items: center; min-height: 600px;
  padding: 0; background: none; border: 0; border-radius: 0; }
.hb-dr-left { position: relative; height: 600px; }
.hb-dr-book { position: absolute; right: 6%; top: -40px; height: 680px; width: auto; max-width: none; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%);
  filter: drop-shadow(0 30px 60px #0009); }
.hb-dr-upload { position: absolute; left: 52%; top: 26%; width: 150px; height: 150px; margin-left: -75px; z-index: 1;
  fill: none; stroke: #111; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 #f2e6cf); }
.hb-dr-ask { position: absolute; right: 2%; bottom: 0; z-index: 2; width: min(380px, 92%); margin: 0; }
.hb-dr-who { display: inline-block; padding: 8px 12px; border-radius: 10px 10px 0 0; background: #0b1218; color: var(--orange); font-weight: 700; font-size: .92rem; }
.page-home-bold .hb-dr-ask p { position: relative; margin: 0; padding: 22px 76px 22px 24px; border-radius: 0 18px 18px 18px; background: #fff; color: #0e1a24;
  font-size: 1.85rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; box-shadow: 0 24px 50px #000a; }
.hb-dr-cam { position: absolute; right: 14px; top: 46px; width: 58px; height: 48px; }
.hb-dr-cam rect, .hb-dr-cam > path:first-of-type { fill: #e8892e; stroke: none; }
.hb-dr-cam .hb-dr-lens { fill: none; stroke: #fff; stroke-width: 3.2; }
.hb-dr-cam .hb-dr-badge { fill: var(--orange); stroke: #fff; stroke-width: 2.5; }
.hb-dr-cam .hb-dr-arrow { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hb-dr-out { padding: 0; background: none; border: 0; align-self: center; }
.hb-dr-out .hb-model-slot { min-height: 0; aspect-ratio: 1.04; width: min(100%, 540px); margin: 0 auto; }
@media (max-width: 900px) {
  .hb-ai-flow--drawing { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
  .hb-dr-left { height: auto; padding-bottom: 20px; }
  .hb-dr-book { position: relative; right: auto; top: 0; width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
  .hb-dr-upload { width: 96px; height: 96px; margin-left: -48px; top: 22%; }
  .hb-dr-ask { position: relative; right: auto; margin: -60px 0 0 auto; }
  .page-home-bold .hb-dr-ask p { font-size: 1.4rem; }
}
.hb-ai-flow--drawing .hb-dr-left, .hb-ai-flow--drawing .hb-dr-out { grid-area: auto; }
.hb-dr-out { width: 100%; }
.hb-dr-book { filter: none; }
.hb-ai-flow--drawing { margin-bottom: 60px; }
.hb-dr-ask { width: min(430px, 96%); }

/* Example 2, positioning pass: the book fades out on its left, top and bottom so no cut edge shows; a round upload
   badge sits on the drawing; the request overlaps the book's lower right; the model space matches the book's height. */
.hb-ai-flow--drawing { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: stretch; min-height: 0; margin-bottom: 72px; }
.hb-dr-left { height: 560px; }
.hb-dr-book { right: 10%; top: -10px; height: 600px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-composite: intersect; }
.hb-dr-upload { left: 50%; top: 30%; width: 112px; height: 112px; margin-left: -56px; padding: 24px; border-radius: 50%; background: rgba(255,255,255,.92);
  stroke: #0e1a24; stroke-width: 2.4; filter: none; box-shadow: 0 16px 40px #0007; }
.hb-dr-ask { right: 0; bottom: 6px; width: min(440px, 100%); }
.page-home-bold .hb-dr-ask p { font-size: 1.6rem; padding: 20px 84px 20px 24px; }
.hb-dr-cam { top: 50%; margin-top: -2px; right: 18px; }
.hb-dr-out { display: flex; }
.hb-dr-out .hb-model-slot { flex: 1; width: 100%; aspect-ratio: auto; min-height: 0; margin: 0; }
@media (max-width: 900px) {
  .hb-ai-flow--drawing { grid-template-columns: 1fr; }
  .hb-dr-left { height: auto; }
  .hb-dr-book { -webkit-mask-image: none; mask-image: none; height: auto; }
  .hb-dr-upload { width: 84px; height: 84px; margin-left: -42px; padding: 18px; }
  .hb-dr-out .hb-model-slot { aspect-ratio: 1.1; }
}
.hb-ai-flow--drawing .hb-dr-out { align-self: stretch; }
/* The model built from the drawing (James's picture, 12 October 2026), in place of the "spinning model" slot. Its black
   background is keyed out, so it stands on the page; it is as tall as the book beside it. */
.hb-dr-model { flex: 1; min-width: 0; width: 100%; height: 560px; object-fit: contain; filter: drop-shadow(0 30px 50px #000a); }
@media (max-width: 900px) { .hb-dr-model { height: auto; max-height: 520px; } }
.page-home-bold .hb-dr-ask p { padding: 20px 26px; white-space: nowrap; }
.hb-dr-ask { width: auto; }
@media (max-width: 900px) { .page-home-bold .hb-dr-ask p { white-space: normal; } }


/* Example 1, From a scan: the scan large on the left, the request over its lower edge, and an excerpt of the real
   rebuild script on the right, coloured in the brand palette and appearing line by line */
.hb-ai-flow--rules { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: "title title" "scan code"; gap: 10px 0; align-items: center;
  padding: 0; background: none; border: 0; border-radius: 0; min-height: 0; margin-bottom: 64px; }
.hb-scan-title { grid-area: title; }
.hb-scan-left { grid-area: scan; position: relative; padding-bottom: 70px; z-index: 0; }
.hb-scan-img { display: block; width: 128%; max-width: none; height: auto; margin-left: -6%; }
.hb-scan-ask { position: absolute; left: 4%; bottom: 0; right: auto; width: auto; max-width: 92%; }
.page-home-bold .hb-scan-ask p { font-size: 1.3rem; white-space: normal; max-width: 21em; }
.hb-scan-code { grid-area: code; position: relative; z-index: 1; margin: 0; padding: 26px 0 0 44px;
  background: linear-gradient(90deg, rgba(16,25,31,0) 0, rgba(16,25,31,.82) 44px, rgba(16,25,31,.82)); }
.hb-scan-code pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 500 .92rem/1.6 var(--mono); color: #e3e9ee; tab-size: 4; }
.hb-code-line { display: block; padding-left: 2ch; text-indent: -2ch; }
.hb-scan-code figcaption { margin-top: 16px; font-size: 1rem; font-weight: 600; color: #c9d3da; }
.t-c { color: #9aa7b1; font-style: italic; }
.t-s { color: #ff9a33; }
.t-k { color: #ff8300; font-weight: 600; }
.t-f { color: #ffffff; font-weight: 600; }
.t-v { color: #6f9bbe; }
.t-n { color: #6f9bbe; }
.hb-ai-flow--rules.is-ready .hb-code-line { opacity: 0; transform: translateX(-6px); }
.hb-ai-flow--rules.is-in .hb-code-line { opacity: 1; transform: none; transition: opacity .35s, transform .35s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(1) { transition-delay: 0.35s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(2) { transition-delay: 0.70s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(3) { transition-delay: 1.05s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(4) { transition-delay: 1.40s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(5) { transition-delay: 1.75s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(6) { transition-delay: 2.10s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(7) { transition-delay: 2.45s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(8) { transition-delay: 2.80s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(9) { transition-delay: 3.15s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(10) { transition-delay: 3.50s; }
.hb-ai-flow--rules.is-in .hb-code-line:nth-child(11) { transition-delay: 3.85s; }
@media (max-width: 900px) {
  .hb-ai-flow--rules { grid-template-columns: 1fr; grid-template-areas: "title" "scan" "code"; }
  .hb-scan-img { width: 100%; margin-left: 0; }
  .hb-scan-code { padding: 18px 0 0; background: none; }
  .hb-scan-code pre { font-size: .82rem; }
}

/* From a scan, v2: scan on the left with the request over its lower edge; on the right, the rules as a plain ticked
   list, then the script excerpt. Nothing overlaps the code. */
.hb-ai-flow--rules { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "title title" "scan code"; gap: 14px 48px; align-items: start; }
.hb-scan-left { padding-bottom: 96px; }
.hb-scan-img { width: 112%; margin-left: -8%; }
.hb-scan-code { padding: 0; background: none; }
.hb-rules-list { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid #ffffff1f; }
.hb-rules-list h3 { margin: 0 0 10px; font-size: 1rem !important; font-weight: 700; color: var(--orange) !important; }
.hb-rules-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.hb-rules-list li { position: relative; padding-left: 28px; font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: #fff; }
.hb-rules-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%; background: var(--orange);
  -webkit-mask: radial-gradient(circle, #000 0 100%); }
.hb-rules-list li::after { content: ""; position: absolute; left: 5px; top: calc(.2em + 3px); width: 4px; height: 8px; border: solid #140b00; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hb-scan-code pre { font-size: .86rem; }
/* Phones and narrow windows: one column (the v2 rule above had brought the two columns back over the 900px rule),
   the scan full width with the request under it rather than over it, then the rules and the code. */
@media (max-width: 900px) {
  .hb-ai-flow--rules { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "scan" "code"; gap: 14px; }
  .hb-scan-left { padding-bottom: 0; }
  .hb-scan-img { width: 100%; margin-left: 0; }
  .hb-scan-ask { position: relative; left: auto; bottom: auto; max-width: none; margin-top: 12px; }
  .page-home-bold .hb-scan-ask p { font-size: 1.1rem; max-width: none; }
  .hb-rules-list ul { grid-template-columns: 1fr; }
  .hb-scan-code pre { font-size: .78rem; }
}


/* Light bands in the paper colour of the old drawing (a lighter tint of its #C8BFB0 page), with a warm brown grid */
.hb-kernel { background-color: #e8e0d0;
  background-image: linear-gradient(rgba(110,90,60,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(110,90,60,.12) 1px, transparent 1px); }
.hb-facts article, .hb-chips button { border-color: #d6cbb6; }
.hb-texture-media { border-color: #d6cbb6; }

/* The three AI examples: a large, full-width switch so all three choices are obvious */
.hb-ai-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 44px 0 34px; }
.hb-ai-tabs button { height: auto; min-height: 88px; padding: 16px 22px; gap: 16px; justify-content: flex-start; text-align: left; border-radius: 20px;
  background: #ffffff0f; border: 2px solid #ffffff38; color: #fff; font-size: 1.3rem; box-shadow: 0 10px 26px #0005;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s; }
.hb-ai-tabs button span { display: grid; gap: 3px; line-height: 1.15; }
.hb-ai-tabs button small { font-size: .95rem; font-weight: 500; color: #c9d3da; }
.hb-ai-tabs button b { width: 44px; height: 44px; flex: none; font-size: 1.15rem; background: #ffffff1f; color: #fff; }
.hb-ai-tabs button:hover { border-color: var(--orange); background: #ff830014; transform: translateY(-2px); }
.hb-ai-tabs button[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: #140b00; box-shadow: 0 14px 34px #ff830055; }
.hb-ai-tabs button[aria-selected="true"] small { color: #3a1d00; }
.hb-ai-tabs button[aria-selected="true"] b { background: #140b00; color: var(--orange); }
@media (max-width: 760px) { .hb-ai-tabs { grid-template-columns: 1fr; } .hb-ai-tabs button { min-height: 72px; font-size: 1.15rem; } }
/* The examples move on by themselves (home-bold.js aiTabs): a bar fills along the foot of the chosen tab, then the next
   example slides in. The bar holds while the section is off screen or under the mouse, and goes once the visitor
   chooses for themselves. */
.hb-ai-tabs button { position: relative; overflow: hidden; }
.hb-ai-tabs button.is-timing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #140b00;
  opacity: .45; transform-origin: left; transform: scaleX(0); animation: hb-ai-timer 6s linear forwards; }   /* 6 s an example on wider screens, 3 s on phones (home-mobile.css); James, 2026-10-13 */
.hb-ai-tabs.is-held button.is-timing::after { animation-play-state: paused; }
@keyframes hb-ai-timer { to { transform: scaleX(1); } }
.hb-ai-flow.is-from-right { animation: hb-ai-in-right .45s cubic-bezier(.2, .7, .3, 1); }
.hb-ai-flow.is-from-left { animation: hb-ai-in-left .45s cubic-bezier(.2, .7, .3, 1); }
@keyframes hb-ai-in-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes hb-ai-in-left { from { opacity: 0; transform: translateX(-40px); } }
/* the book's left fade is narrower */
.hb-dr-book {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%), linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%); }
@media (max-width: 900px) { .hb-dr-book { -webkit-mask-image: none; mask-image: none; } }

/* The Mini, in four steps as you scroll: fused mesh -> the 8 aligned part-scans -> the scans apart, as scanned ->
   a close-up of the overlap texture before and after. --apart and --zoom (0 to 1) are set by home-bold.js. */
.hb-compare { --apart: 0; --zoom: 0; }
.hb-compare > img:first-child, .hb-compare-top, .hb-compare-handle, .hb-compare-label { opacity: calc(1 - max(var(--apart), var(--zoom))); }
.hb-compare-apart { position: absolute; left: 50%; top: 50%; width: auto !important; height: 112% !important; max-width: none; object-fit: contain !important;
  transform: translate(-50%, -50%) scale(calc(.9 + .1 * var(--apart))); opacity: calc(var(--apart) * (1 - var(--zoom))); pointer-events: none; inset: auto !important; }
.hb-compare-zoom { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; opacity: var(--zoom);
  transform: scale(calc(.94 + .06 * var(--zoom))); pointer-events: none; }
.hb-compare-zoom figure { position: relative; margin: 0; border-radius: 20px; overflow: hidden; border: 2px solid #ffffff26; aspect-ratio: 3 / 2; }
.hb-compare-zoom figure + figure { border-color: var(--orange); }
.hb-compare-zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb-compare-zoom figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 8px; background: #0b1014d9; color: #fff; font-weight: 700; font-size: 1rem; }
.hb-compare-step { position: absolute; left: 50%; bottom: -8px; transform: translate(-50%, 100%); margin: 0; padding: 8px 18px; border-radius: 999px;
  background: #ffffff12; border: 1px solid #ffffff26; color: #fff; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
@media (max-width: 700px) { .hb-compare-zoom { grid-template-columns: 1fr; gap: 10px; } .hb-compare-zoom figure { aspect-ratio: 2 / 1; } }
@media (prefers-reduced-motion: reduce) { .hb-compare-apart, .hb-compare-zoom { display: none; } }
.hb-compare .hb-compare-apart { inset: auto !important; left: 50% !important; top: 50% !important; }
.hb-compare-step { top: 10px; bottom: auto; transform: translateX(-50%); z-index: 3; background: #0b1014cc; }
.hb-compare .hb-compare-apart { height: 100% !important; }
.hb-stage img { object-fit: contain; padding: 14px; }

/* Scan to solid: the close-up pair and the five workspaces (moved in from the removed Mini section) */
.hb-auto-zoom { margin-top: 56px; }
.page-home-bold .hb-auto-zoom h3 { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 18px; }
.hb-auto-zoom-note { max-width: 46em; margin: -6px 0 20px; font-size: 1.05rem; line-height: 1.6; color: #c9d3da; }
.hb-auto-zoom-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hb-auto-zoom-pair figure { position: relative; margin: 0; border-radius: 20px; overflow: hidden; border: 2px solid #ffffff26; aspect-ratio: 3 / 2; }
.hb-auto-zoom-pair figure + figure { border-color: var(--orange); }
.hb-auto-zoom-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-auto-zoom-pair figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 8px; background: #0b1014d9; color: #fff; font-weight: 700; }
.hb-auto-ws { margin-top: 48px; }
.hb-auto-ws > p { font-size: 1.15rem; color: #e3e9ee; margin-bottom: 16px; }
.hb-auto-ws > p b { color: #fff; }
/* Seven workspaces (Drawings and Render since 12 October 2026): one row on wide screens, four and three
   in between; at 900 px and below home-alternative.css's three columns and single column take over. */
@media (min-width: 1101px) {
  .alt-workspaces--seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .alt-workspaces--seven a { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .alt-workspaces--seven { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alt-workspaces--seven a:nth-child(5) { border-left: 0; }
  .alt-workspaces--seven a:nth-child(n+5) { border-top: 1px solid #768c9b40; }
}
@media (max-width: 900px) {
  .alt-workspaces--seven a:nth-child(7) { border-left: 0; }
}
.hb-auto-ws .alt-workspaces { margin-top: 0; }
@media (max-width: 700px) { .hb-auto-zoom-pair { grid-template-columns: 1fr; } }

/* Why choose Tesselform: centred heading, six short reasons with a line icon each, laid out like adobe.com's */
.hb-why { padding: 120px 0; background: #0b1014; border-top: 1px solid var(--alt-rule); text-align: center; }
.page-home-bold .hb-why h2 { font-size: clamp(2.6rem, 4.2vw, 4rem); font-weight: 700; color: #fff; margin-bottom: 14px; }
.hb-why-sub { font-size: 1.2rem; color: #e3e9ee; margin: 0 auto 64px; }
.hb-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 56px; }
.hb-why-item { display: flex; flex-direction: column; align-items: center; }
.hb-why-icon { width: 44px; height: 44px; margin-bottom: 18px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-home-bold .hb-why-item h3 { font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.hb-why-item p { font-size: 1.08rem; font-weight: 500; line-height: 1.55; color: #d3dce2; max-width: 22em; margin: 0 auto 14px; }
.hb-why-item a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hb-why-item a:hover { color: var(--orange); }
@media (max-width: 900px) { .hb-why-grid { grid-template-columns: 1fr 1fr; gap: 48px 32px; } }
@media (max-width: 560px) { .hb-why-grid { grid-template-columns: 1fr; } .hb-why { padding: 80px 0; } }
.hb-fineprint { margin: 14px 0 0; font-size: 1rem; font-weight: 600; color: #c9d3da; }

/* Bump Map: the live demo (a pebble you can retexture) under the heading and buttons */
.hb-texture-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 40px; margin-bottom: 36px; }
.hb-texture-top .hb-kernel-lead { max-width: 30em; margin: 0; }
.hb-texture-demo { min-height: 560px; border-radius: 22px; overflow: hidden; background: #0d141a; border: 1px solid #d6cbb6; box-shadow: 0 24px 60px #0e1a2433; }
.hb-texture-loading { display: grid; place-items: center; min-height: 560px; margin: 0; color: #c9d3da; font-weight: 600; font-size: 1.15rem; }
.hb-texture-loading a { color: var(--orange); }
.hb-texture-demo .demo__note.tv-hint { left: 50%; right: auto; top: 18px; bottom: auto; transform: translateX(-50%); padding: 9px 18px; border-radius: 999px; background: #0b1014cc;
  border: 1px solid #ffffff2e; font: 600 1rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: #fff; white-space: nowrap; }

/* Bump Map: the original two-column layout; the preview is a pebble that changes texture */
.hb-texture .hb-texture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hb-pebble { aspect-ratio: 640 / 598; max-height: none; width: min(100%, 560px); border-radius: 22px; background: #0b1218; }
.hb-pebble img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .18s; }
.hb-pebble img.is-swap { opacity: 0; }
@media (max-width: 1000px) { .hb-texture .hb-texture-grid { grid-template-columns: 1fr; gap: 40px; } }

/* The old way vs With Tesselform: larger, brighter text, so the crossed-out line is easy to read */
.hb-versus > div { padding: 34px 38px; }
.hb-versus span { margin-bottom: 12px; font-size: 1.2rem; color: #d3dce2; }
.hb-versus p { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.hb-versus > div:first-child p { color: #e3e9ee; text-decoration-color: rgba(255,131,0,.9); text-decoration-thickness: 3px; }
.hb-versus-new span { font-size: 1.2rem; }
.hb-auto-actions { justify-content: center; }

/* Describe it (James's duct adaptor, 12 October 2026): the request and the drawing it produced on the left, the
   recorded build on the right (static/video/duct-adaptor.mp4, played by home-bold.js while the tab is open and on
   screen). */
.hb-ai-flow--describe { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "ask out" "draw out"; align-items: start; }
.hb-ai-flow--describe .hb-ai-ask { align-self: start; }
.hb-ai-flow--describe .hb-ai-ask p { font-size: 1.2rem; }
.hb-describe-drawing { grid-area: draw; display: block; overflow: hidden; border-radius: 16px; border: 1px solid #768c9b40; background: #131b20;
  color: #e3e9ee; text-decoration: none; transition: border-color .2s; }
.hb-describe-drawing:hover, .hb-describe-drawing:focus-visible { border-color: var(--orange); }
.hb-describe-drawing img { display: block; width: 100%; height: auto; }
.hb-describe-drawing span { display: flex; justify-content: space-between; padding: 10px 14px; font-weight: 700; font-size: .95rem; }
.hb-describe-out { align-self: start; }
.hb-describe-video { position: relative; }
.hb-describe-video video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 966; border-radius: 12px; background: #000; }
.hb-describe-video video { cursor: zoom-in; }
.hb-video-buttons { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.hb-video-toggle { padding: 7px 14px; border: 0; border-radius: 999px; background: #0b1014d9; color: #fff;
  font: 700 .85rem var(--sans); cursor: pointer; }
.hb-video-toggle:hover { background: #0b1014; }
.hb-video-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* The history-tree section: a value changed in the History list and the model rebuilt from it. */
.hb-history-player { position: relative; }
.hb-history-player video { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 820; background: #18222a; cursor: zoom-in; }
@media (max-width: 900px) {
  .hb-ai-flow--describe { grid-template-columns: 1fr; grid-template-areas: "ask" "out" "draw"; }
}

/* Under the hood: an icon for each of the four cards (orange line drawings, the weight of the old crosshair). */
.hb-fact-icon { display: block; width: 40px; height: 40px; margin: 0 0 18px; fill: none; stroke: var(--orange); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.hb-fact-icon .hb-fact-accent { stroke-width: 2.6; }
.hb-fact-icon .hb-fact-dash { stroke-width: 1.4; stroke-dasharray: 2 3; opacity: .8; }
.hb-fact-icon .hb-fact-dot { stroke-width: 3.2; stroke: #0e1a24; }

/* The viewer: the Describe-it video or the drawing, larger, in a frame over the page (home-bold.js openViewer). */
.hb-viewer { width: min(94vw, 1400px); max-width: none; max-height: 92vh; padding: 52px 16px 16px; border: 1px solid #768c9b55; border-radius: 18px;
  background: #0b1014; color: #fff; overflow: auto; }
.hb-viewer::backdrop { background: rgba(4, 8, 11, .82); }
.hb-viewer-close { position: absolute; top: 10px; right: 12px; padding: 7px 16px; border: 1px solid #ffffff38; border-radius: 999px; background: #18232b;
  color: #fff; font: 700 .9rem var(--sans); cursor: pointer; }
.hb-viewer-close:hover { border-color: var(--orange); }
.hb-viewer-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.hb-viewer-body img, .hb-viewer-body video { display: block; width: 100%; height: auto; max-height: calc(92vh - 72px); object-fit: contain; border-radius: 10px;
  background: #000; }

/* The history-tree section on the same light paper band as Under the hood: with the Bump Map section gone it keeps the
   run of dark sections broken up (James, 2026-10-12). */
.page-home-bold .alt-parametric.hb-light { color: #0e1a24; background-color: #e8e0d0; background-size: 32px 32px;
  background-image: linear-gradient(rgba(110,90,60,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(110,90,60,.12) 1px, transparent 1px); }
.page-home-bold .hb-light .eyebrow,
.page-home-bold .hb-light .alt-section-head h2 { color: #0e1a24; }
.page-home-bold .hb-light .alt-section-head > p:not(.eyebrow),
.page-home-bold .hb-light .alt-edit-list { color: #1d2a35; }
.page-home-bold main .hb-light .btn--quiet { color: #0e1a24; box-shadow: inset 0 0 0 2px #0e1a24; }
.page-home-bold main .hb-light .btn--quiet:hover { background: #0e1a24; color: #fff; box-shadow: inset 0 0 0 2px #0e1a24; }
.page-home-bold .hb-light .alt-app-shot { border-color: #d6cbb6; box-shadow: 0 24px 60px #0e1a2433; }
/* The hero without a picture (James, 2026-10-12): the words and links centred in one short band, so the scans come
   straight after. */
.page-home-bold .hb-hero--compact .alt-hero-grid { grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; padding: 44px 0 52px;
  text-align: center; justify-items: center; }
.page-home-bold .hb-hero--compact .eyebrow { justify-content: center; }
.page-home-bold .hb-hero--compact .alt-hero-copy h1 { margin-bottom: 22px; }
.page-home-bold .hb-hero--compact .alt-lead { margin-left: auto; margin-right: auto; }
.page-home-bold .hb-hero--compact .alt-actions { justify-content: center; margin-top: 24px; }
.page-home-bold .hb-hero--compact + .hb-auto { padding-top: 72px; }
@media (max-width: 700px) { .page-home-bold .hb-hero--compact .alt-hero-grid { padding: 32px 0 40px; } .page-home-bold .hb-hero--compact + .hb-auto { padding-top: 52px; } }
/* Why choose Tesselform on the light paper band too: light, dark, light, dark down the page (James, 2026-10-12). */
.hb-why.hb-light { color: #0e1a24; background-color: #e8e0d0; border-top: 0; background-size: 32px 32px;
  background-image: linear-gradient(rgba(110,90,60,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(110,90,60,.12) 1px, transparent 1px); }
.page-home-bold .hb-why.hb-light h2, .page-home-bold .hb-why.hb-light .hb-why-item h3 { color: #0e1a24; }
.hb-why.hb-light .hb-why-sub { color: #1d2a35; }
.hb-why.hb-light .hb-why-item p { color: #2a3742; }
.hb-why.hb-light .hb-why-icon { stroke: #d65300; }
.hb-why.hb-light .hb-why-item a { color: #0e1a24; }
.hb-why.hb-light .hb-why-item a:hover { color: #d65300; }
/* Introductory pricing on the home page's plans (James, 2026-10-12): a splash above the cards and the regular price
   struck through in each card and in the Why section. */
.hb-plans-intro { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: 6px auto 18px;
  padding: 12px 20px; border-radius: 14px; background: linear-gradient(90deg, #ff8300, #ffb000); color: #1a0f00; font-size: 1.08rem;
  font-weight: 600; box-shadow: 0 14px 34px #ff830040; }
.hb-plans-intro strong { padding: 4px 12px; border-radius: 999px; background: #1a0f00; color: #ffb000; font-size: .9rem; letter-spacing: .04em;
  text-transform: uppercase; }
.hb-plan-price s, .hb-why-item p s { margin-right: 4px; font-weight: 500; opacity: .6; text-decoration-color: #ff8300; text-decoration-thickness: 2px; }
/* The home page's plan cards: the perpetual price under the yearly one, and the Suite's passes (James, 2026-10-12). */
.hb-plan-also { margin: 2px 0 0; font-size: .98rem; font-weight: 600; color: #c9d3da; }
.hb-plan-also s { margin-right: 4px; opacity: .6; text-decoration-color: #ff8300; text-decoration-thickness: 2px; }
.hb-plan-also + p:not(.hb-plan-also) { margin-top: 12px; }
/* The hero's beta line: plain text here; phones show it as an orange offer bar (home-mobile.css). */
.hb-hero-offer strong { font-weight: inherit; }
/* Wider than phones: the hero's open beta line as an orange promotion strip right across the foot of the hero
   (James, 2026-10-13); phones show it as a bar under the hero's text (home-mobile.css). */
@media (min-width: 701px) {
  .page-home-bold .alt-hero .alt-hero-grid { padding-bottom: 112px; }
  .page-home-bold .hb-hero-offer { position: absolute; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: 2; display: flex;
    flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 0; padding: 14px 24px;
    background: linear-gradient(90deg, #ff8300, #ffb000); color: #1a0f00; font-size: 1.08rem; font-weight: 600; text-align: center;
    box-shadow: 0 -10px 30px #ff830033; }
  .page-home-bold .hb-hero-offer strong { padding: 4px 12px; border-radius: 999px; background: #1a0f00; color: #ffb000; font-size: .85rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .page-home-bold .hb-hero-offer .hb-offer-colon { display: none; }
  .page-home-bold .hb-hero-offer > span:last-child { display: inline-block; }
  .page-home-bold .hb-hero-offer > span:last-child::first-letter { text-transform: uppercase; }
}
/* The open beta as an orange promotion strip across the page, on its own between sections (the tools page, under its
   heading: James, 2026-10-13), in the look of the home page's strip. */
.hb-promo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin: 0; padding: 14px 24px;
  background: linear-gradient(90deg, #ff8300, #ffb000); color: #1a0f00; font-size: 1.08rem; font-weight: 600; line-height: 1.3; text-align: center;
  box-shadow: 0 -10px 30px #ff830033; position: relative; z-index: 1; }
.hb-promo-strip strong { padding: 4px 12px; border-radius: 999px; background: #1a0f00; color: #ffb000; font-size: .85rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) { .hb-promo-strip { font-size: .98rem; padding: 12px 16px; } .hb-promo-strip strong { font-size: .8rem; padding: 4px 10px; } }
/* The seven workspace boxes on wider screens (James, 2026-10-13): separate white cards, each with the workspace's own
   app icon centred on a dark tile (the icons are drawn for the app's dark interface), the number as a small orange
   pill, everything centred; a lift and an orange edge on hover. Phones keep their swipe cards (home-mobile.css). */
.hb-ws-icon { display: none; }
@media (min-width: 701px) {
  .hb-auto-ws .alt-workspaces { gap: 14px; border: 0; border-radius: 0; overflow: visible; background: none; }
  .hb-auto-ws .alt-workspaces a { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 14px 44px;
    background: #fff; border: 1px solid #e4dccb !important; border-radius: 20px; box-shadow: 0 10px 26px rgba(24, 33, 39, .10);
    transition: transform .15s, box-shadow .2s, border-color .2s; }
  .hb-auto-ws .alt-workspaces a:hover { background: #fff; transform: translateY(-4px); border-color: #ff8300 !important;
    box-shadow: 0 18px 36px rgba(255, 131, 0, .18); }
  .page-home-bold .hb-auto-ws .alt-workspaces span { display: inline-block; margin: 0 0 14px; padding: 3px 10px; border-radius: 999px;
    background: #fff1df; color: #d65300; font: 700 .78rem var(--sans); letter-spacing: .04em; }
  .hb-auto-ws .hb-ws-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 0 14px; border-radius: 18px;
    background: #182127; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .hb-auto-ws .hb-ws-icon img { width: 40px; height: 40px; display: block; }
  .page-home-bold .hb-auto-ws .alt-workspaces h3 { margin: 0 0 6px; font-size: 1.22rem; color: #0e1a24; }
  .page-home-bold .hb-auto-ws .alt-workspaces p { margin: 0; font-size: .92rem; line-height: 1.45; color: #4a5864; }
  .hb-auto-ws .alt-workspaces b { right: auto; left: 50%; bottom: 14px; transform: translateX(-50%); color: #d65300; font-weight: 700; }
}
/* "Choose your plan": the introductory offer bar runs the full width of the window on wider screens (James,
   2026-10-13), like the open beta strip. Phones keep their own layout (home-mobile.css). */
@media (min-width: 701px) {
  .hb-plans-intro { width: auto; max-width: none; margin: 6px calc(50% - 50vw) 28px; border-radius: 0; padding: 14px 24px; }
}
/* The workspace cards without numbers or arrows (the whole card is the link), and a short last row centred:
   seven in a row on wide screens, four then three, or three, three and one (James, 2026-10-13). Wider than phones only. */
@media (min-width: 701px) {
  .hb-auto-ws .alt-workspaces { display: flex; flex-wrap: wrap; justify-content: center; }
  .hb-auto-ws .alt-workspaces a { flex: 0 0 calc((100% - 2 * 14px) / 3); padding: 24px 14px 26px; border-top: 1px solid #e4dccb !important; }
  .page-home-bold .hb-auto-ws .alt-workspaces span, .hb-auto-ws .alt-workspaces b { display: none; }
  .hb-auto-ws .hb-ws-icon { margin-top: 0; }
}
@media (min-width: 901px) {
  .hb-auto-ws .alt-workspaces a { flex-basis: calc((100% - 3 * 14px) / 4); }
}
@media (min-width: 1101px) {
  .hb-auto-ws .alt-workspaces a { flex: 1 1 0; min-width: 0; }
}
/* The four kernel facts (Exact geometry, Feature extraction...) centred on wider screens too, like the workspace
   cards above them (James, 2026-10-13); phones were already centred. */
@media (min-width: 701px) {
  .hb-facts article { text-align: center; }
  .hb-fact-icon { margin-left: auto; margin-right: auto; }
}
/* The workspace icons as orange line drawings in the style of the kernel facts, with no dark tile (James,
   2026-10-13). Still wider screens only: phones keep their cards without icons. */
@media (min-width: 701px) {
  .hb-auto-ws svg.hb-ws-icon { display: block; width: 46px; height: 46px; margin: 0 auto 14px; padding: 0; border-radius: 0;
    background: none; box-shadow: none; }
}
/* "Model this technical drawing" ends with a paperclip, as if the drawing went with the request (James, 2026-10-13). */
.hb-clip { display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.12em; fill: none; stroke: #d65300;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Wider screens (James, 2026-10-13): the upload icon moves from over the book into the request, next to the
   paperclip, as a small orange round button; phones keep their badge on the book (home-mobile.css). */
.hb-clip-up { display: none; }
@media (min-width: 701px) {
  .hb-ai-flow--drawing .hb-dr-upload { display: none; }
  .hb-clip-up { display: inline-block; width: 1.5em; height: 1.5em; margin-left: .35em; padding: .28em; vertical-align: -.38em;
    border-radius: 50%; background: #ff8300; fill: none; stroke: #140b00; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
    box-shadow: 0 4px 12px rgba(255, 131, 0, .35); box-sizing: border-box; }
}
/* The door demo's guide (doorfit.js, James 2026-10-13): one prompt at a time over the top of the 3D view - an orange
   step number and the action - fading out once done and the next fading in. */
.hb-door-guide { position: absolute; top: 12px; left: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 10px; margin: 0;
  padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(14, 26, 36, .9); border: 1px solid rgba(255, 131, 0, .55);
  color: #fff; font-weight: 600; font-size: .98rem; line-height: 1.2; white-space: nowrap; pointer-events: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transform: translateX(-50%); transition: opacity .3s ease, transform .3s ease; }
.hb-door-guide b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ff8300; color: #140b00;
  font-size: .85rem; }
.hb-door-guide.is-out { opacity: 0; transform: translate(-50%, -6px); }
@media (max-width: 700px) { .hb-door-guide { top: 8px; font-size: .88rem; padding: 5px 12px 5px 5px; gap: 8px; } .hb-door-guide b { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .hb-door-guide { transition: none; } }