/* Public marketing site (ISC-163). Layout only — every colour, radius,
   font and spacing value is a talkuma.css token, so the site and the app are
   one system and a token change repaints both. Loaded after talkuma.css. */

body.site { max-width: none; margin: 0; padding: 0; }
.site-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.site h1, .site h2, .site h3 { font-family: 'Bricolage Grotesque', Manrope, "Segoe UI", sans-serif; letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
.site h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); font-weight: var(--w-max); }
.site h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: var(--w-max); }
.site h3 { font-size: 1.15rem; font-weight: var(--w-max); letter-spacing: -.01em; }
.site p { margin: 0; }
.s-eyebrow { font-size: var(--t-label); font-weight: var(--w-max); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--sp-3); }
.s-lead { font-size: 1.15rem; line-height: 1.55; color: var(--text-muted); max-width: 34rem; }

/* Buttons: pills, same shape as every button in the app. */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: 0 1.3rem;
         border-radius: var(--radius-pill); font-weight: var(--w-max); font-size: var(--t-action); text-decoration: none;
         border: 1.5px solid transparent; white-space: nowrap; }
.s-btn.primary { background: var(--accent); color: var(--accent-text); }
.s-btn.primary:hover { opacity: .92; }
.s-btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.s-btn.ghost:hover { opacity: 1; border-color: var(--text); }
.s-btn.line { background: transparent; color: var(--accent); border-color: var(--accent); }

/* ── Nav. The generic `nav {}` rule in talkuma.css is the retired pill; every
   one of its shape properties is reset here, as nav.tabs and nav.app-sidebar
   already have to. */
nav.site-nav { display: block; width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none;
               overflow: visible; position: sticky; top: 0; z-index: 20;
               background: var(--bg); border-bottom: 1px solid var(--border); }
.site-nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 68px; }
.site-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none;
              font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: var(--w-max); font-size: 1.25rem; letter-spacing: -.02em; }
.site-brand img { border-radius: 8px; }
.site-menu { position: relative; display: flex; align-items: center; }
.site-menu-toggle { position: absolute; width: 44px; height: 44px; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; margin: 0; cursor: pointer; display: none; }
.site-menu-toggle:focus-visible + .site-menu-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.site-menu-btn { cursor: pointer; display: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
                 align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1.5px solid var(--border); pointer-events: none; }
.site-menu-btn span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }
.site-menu-panel { display: flex; align-items: center; gap: var(--sp-2); }
.site-menu-panel > a:not(.s-btn) { color: var(--text-muted); text-decoration: none; font-weight: var(--w-strong); font-size: var(--t-body);
                                   padding: .55rem .8rem; border-radius: var(--radius-pill); min-height: 44px; display: inline-flex; align-items: center; }
.site-menu-panel > a:not(.s-btn):hover, .site-menu-panel > a.on { color: var(--text); background: var(--surface-2); opacity: 1; }
.site-menu-panel > a.s-btn.ghost { margin-left: var(--sp-3); }
/* The nav was a size too grand (principal, 2026-09-22): type down 15 %,
   the bar and its buttons a little lower to match. Touch targets on the
   phone menu keep their 44px. */
.site-brand { font-size: 1.0625rem; }
.site-brand img { width: 26px; height: 26px; }
.site-menu-panel > a:not(.s-btn) { font-size: calc(var(--t-body) * .85); }
.site-menu-panel > a.s-btn { font-size: calc(var(--t-action) * .85); }
@media (min-width: 801px) {
  .site-nav-row { min-height: 60px; }
  .site-menu-panel > a.s-btn { min-height: 40px; padding: 0 1.1rem; }
  .site-menu-panel > a:not(.s-btn) { min-height: 40px; padding: .4rem .75rem; }
}
@media (max-width: 800px) {
  .site-menu-toggle, .site-menu-btn { display: flex; }
  .site-menu-toggle { z-index: 2; }
  .site-menu-panel { display: none; }
  .site-menu-toggle:checked ~ .site-menu-panel { display: flex; }
  .site-menu-panel { position: absolute; right: 0; top: calc(100% + 10px); flex-direction: column; align-items: stretch;
                     background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: var(--sp-3);
                     min-width: 240px; box-shadow: var(--nav-shadow); }
  .site-menu-panel > a.s-btn.ghost { margin-left: 0; }
  .site-menu-panel > a { justify-content: center; }
}

/* ── Sections */
.s-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.s-section.tight { padding-top: clamp(2rem, 5vw, 4rem); }
.s-section + .s-section { border-top: 1px solid var(--border); }
.s-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 42rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }

/* Hero */
.s-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.s-hero-copy { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-2); }
.s-hero-note { font-size: var(--t-small); color: var(--text-muted); }
@media (max-width: 900px) { .s-hero { grid-template-columns: 1fr; } }

/* The specimen: the app's own Today hero card, dark, exactly as on desktop. */
.s-card-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-card-label { font-size: var(--t-label); font-weight: var(--w-max); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.s-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
          background: linear-gradient(155deg, #1d1b17 0%, #141311 65%); color: #fff; display: flex; flex-direction: column; gap: var(--sp-3); min-height: 320px; }
.s-card::after { content: ""; position: absolute; right: -50px; top: -50px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
                 background: radial-gradient(circle, rgba(180,83,58,.45), transparent 70%); }
.s-card > * { position: relative; }
.s-card .eyebrow { font-size: var(--t-label); font-weight: var(--w-max); letter-spacing: .12em; text-transform: uppercase; color: #e3a18f; }
.s-card .line { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: var(--w-max); line-height: 1.2; letter-spacing: -.015em; }
.s-card .gloss { color: rgba(255,255,255,.7); font-size: var(--t-body); }
.s-card .rule { height: 1px; background: rgba(255,255,255,.18); margin: .2rem 0; }
.s-card .cue { color: rgba(255,255,255,.62); font-size: var(--t-small); }
.s-card .grades { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: auto; }
.s-card .grade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 56px;
                 border-radius: var(--radius-pill); font-weight: var(--w-max); font-size: var(--t-action); }
.s-card .grade small { font-size: var(--t-label); font-weight: var(--w-strong); opacity: .7; }
.s-card .grade.forgot { background: rgba(255,255,255,.1); color: #fff; }
.s-card .grade.knew { background: var(--accent); color: #fff; }

/* Languages */
.s-langs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.s-lang { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: var(--w-max); font-size: clamp(1.1rem, 2vw, 1.5rem);
          padding: .55rem 1.1rem; border-radius: var(--radius-pill); background: var(--surface); border: 1.5px solid var(--border); color: var(--text); }

/* Steps / feature grid */
.s-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.s-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .s-grid, .s-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .s-grid, .s-grid.two, .s-grid.three { grid-template-columns: 1fr; } }
.s-step { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); border: 1.5px solid var(--border);
          border-radius: var(--radius); padding: var(--sp-5) var(--sp-4); }
.s-step .n { width: 38px; height: 38px; border-radius: 12px; background: var(--moss-soft); color: var(--moss); display: flex; align-items: center; justify-content: center;
             font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: var(--w-max); font-size: 1rem; margin-bottom: var(--sp-2); }
.s-step .n.coral { background: var(--accent-soft); color: var(--accent); }
.s-step p { color: var(--text-muted); line-height: 1.5; font-size: var(--t-body); }

/* The "does not do" band */
.s-not { background: var(--surface-2); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-5); align-items: start; }
.s-not ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.s-not li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 1.05rem; line-height: 1.5; }
.s-not li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: .55rem; }
@media (max-width: 800px) { .s-not { grid-template-columns: 1fr; } }

/* Plans */
.s-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); max-width: 900px; margin-inline: auto; } /* centred in a wide column (2026-09-22) */
@media (max-width: 700px) { .s-plans { grid-template-columns: 1fr; } }
.s-plan { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); }
.s-plan.hot { border-color: var(--accent); }
.s-plan { min-width: 0; }
.s-plan .head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; }
.s-plan .price { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-size: 1.6rem; font-weight: var(--w-max); font-variant-numeric: tabular-nums; }
.s-plan .price small { white-space: nowrap; }
.s-plan .price small { font-size: var(--t-small); font-weight: var(--w-strong); color: var(--text-muted); }
.s-plan .year { font-size: var(--t-small); color: var(--text-muted); }
.s-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.s-plan li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-body); line-height: 1.45; }
.s-plan li::before { content: "✓"; color: var(--moss); font-weight: var(--w-max); flex: 0 0 auto; }
.s-plan .s-btn { margin-top: auto; align-self: flex-start; }

/* Feature rows (features page) */
.s-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem) 0; }
.s-feature + .s-feature { border-top: 1px solid var(--border); }
.s-feature:nth-child(even) .s-feature-visual { order: -1; }
.s-feature-copy { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 30rem; }
.s-feature-copy p { color: var(--text-muted); line-height: 1.55; font-size: 1.05rem; }
.s-feature-visual { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); }
@media (max-width: 800px) { .s-feature { grid-template-columns: 1fr; } .s-feature:nth-child(even) .s-feature-visual { order: 0; } }
.s-mini-row { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem 0; border-bottom: 1px solid var(--border); font-weight: var(--w-strong); }
.s-mini-row:last-child { border-bottom: none; }
.s-mini-row .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--moss); flex: 0 0 auto; }
.s-mini-row .dot.due { background: var(--accent); }
.s-mini-row em { margin-left: auto; font-style: normal; color: var(--text-muted); font-size: var(--t-small); font-weight: var(--w-strong); }
.s-bubble { border-radius: var(--radius-sm); padding: .75rem 1rem; max-width: 85%; font-weight: var(--w-strong); }
.s-bubble.ai { background: var(--bg); border: 1.5px solid var(--border); align-self: flex-start; }
.s-bubble.me { background: var(--accent); color: var(--accent-text); align-self: flex-end; }
.s-bubble small { display: block; font-weight: 500; opacity: .75; margin-top: .2rem; font-size: var(--t-small); }
.s-track { height: 9px; border-radius: 100px; background: var(--surface-2); overflow: hidden; }
.s-track i { display: block; height: 100%; background: var(--moss); border-radius: 100px; }
.s-big { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-size: 2.4rem; font-weight: var(--w-max); line-height: 1; }
.s-big small { font-size: var(--t-small); color: var(--text-muted); font-weight: var(--w-strong); margin-left: .4rem; }

/* ── The atlas voice (Storybook concept, ported) ── */
.s-hero h1 .accent { color: var(--accent); }
/* Hero phone: one real card that flips, then "Knew it" lights up. */
.s-phone { width: min(300px, 100%); aspect-ratio: 300 / 520; margin: 0 auto; box-sizing: border-box; border-radius: 44px; background: var(--text); padding: 12px; }
.s-phone-screen { height: 100%; box-sizing: border-box; border-radius: 34px; background: var(--bg); padding: 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.s-phone-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; color: var(--text-muted); }
.s-phone-bar { height: 6px; border-radius: 100px; background: var(--surface-2); }
.s-phone-bar i { display: block; width: 20%; height: 100%; border-radius: inherit; background: var(--accent); }
.s-phone-stage { flex: 1; perspective: 900px; }
.s-phone-card { position: relative; height: 100%; transform-style: preserve-3d; animation: s-flip 8s infinite; }
.s-phone-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: var(--surface); border: 1.5px solid var(--border); border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.s-phone-face small { font-size: 14px; color: var(--text-muted); }
.s-phone-face b { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: 800; font-size: 25px; line-height: 1.2; }
.s-phone-face.back { transform: rotateY(180deg); border-color: var(--accent); }
.s-phone-face.back b { color: var(--accent-deep); }
.s-phone-grades { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-phone-grades span { text-align: center; font-size: 16px; font-weight: 800; padding: 14px 0; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); }
.s-phone-grades .knew { animation: s-knew 8s infinite; }
@keyframes s-flip { 0%, 30% { transform: rotateY(0); } 38%, 92% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes s-knew { 0%, 60%, 92%, 100% { background: var(--surface); color: var(--text); border-color: var(--border); } 64%, 88% { background: var(--green); color: #fff; border-color: var(--green); } }
@media (prefers-reduced-motion: reduce) { .s-phone-card, .s-phone-grades .knew { animation: none; } }
.s-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .s-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .s-legend { grid-template-columns: 1fr; } }
.s-legend-cell { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); min-height: 150px; justify-content: space-between; }
.s-legend-script { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: var(--w-max); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; letter-spacing: -.02em; }
.s-legend-name { font-weight: var(--w-max); font-size: var(--t-body); }
.s-legend-sub { color: var(--text-muted); font-size: var(--t-small); line-height: 1.4; }
.s-night { background: #141311; color: #fff; }
.s-night .s-eyebrow { color: #e3a18f; }
.s-night .s-lead, .s-night p { color: rgba(255,255,255,.7); }
.s-night h2 { color: #fff; }
.s-night .s-card { background: #1f1c18; border: 1px solid rgba(255,255,255,.1); }
.s-night .s-btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.s-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .s-split { grid-template-columns: 1fr; } }
.s-kicker { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.s-story { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-4); align-items: center; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); }
.s-story + .s-story { margin-top: var(--sp-3); }
.s-story .s-badge { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: var(--w-max); font-size: 1.1rem; color: #fff; background: var(--accent); }
.s-story .s-badge.moss { background: var(--moss); }
.s-story .s-badge.ink { background: #141311; }
.s-story .s-badge.soft { background: var(--accent-soft); color: var(--accent); }
.s-story h3 { margin-bottom: .3rem; }
.s-story p { color: var(--text-muted); line-height: 1.5; font-size: var(--t-body); }
.s-tag { font-size: var(--t-label); font-weight: var(--w-max); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); padding: .4rem .7rem; border-radius: var(--radius-pill); white-space: nowrap; }
.s-tag.coral { color: var(--accent); background: var(--accent-soft); }
.s-feature-visual .s-tag { white-space: normal; }
@media (max-width: 700px) { .s-story { grid-template-columns: 48px 1fr; } .s-story .s-tag { grid-column: 2; justify-self: start; } .s-story .s-badge { width: 48px; height: 48px; } }
.s-deck { display: flex; flex-direction: column; }
.s-deck-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: .7rem 0; border-top: 1px dashed var(--border); font-weight: var(--w-strong); }
.s-deck-row:first-of-type { border-top: 0; }
.s-chart { width: 100%; height: auto; display: block; color: var(--text); }
.s-chart .axis { stroke: var(--border); stroke-width: 1.4; }
.s-chart .curve { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.s-chart .lift { stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 1 6; stroke-linecap: round; }
.s-chart .fade { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; opacity: .6; }
.s-chart text { font-family: Manrope, sans-serif; font-weight: 700; font-size: 11px; fill: var(--text-muted); }
.s-chart text.day { fill: var(--text); }
.s-chart .dot { fill: var(--accent); }
.s-quote { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem 1rem; color: var(--text-muted); font-size: var(--t-body); line-height: 1.5; }
.s-sits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 800px) { .s-sits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .s-sits { grid-template-columns: 1fr; } }
.s-sit { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); font-weight: var(--w-max); }
.s-sit .s-badge { width: 40px; height: 40px; border-radius: 12px; font-size: .9rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: var(--w-max); color: #fff; background: var(--accent); }
.s-sit:nth-child(3n+2) .s-badge { background: var(--moss); }
.s-sit:nth-child(3n) .s-badge { background: #141311; }
.s-catalogue { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 1000px) { .s-catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .s-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-cat { display: flex; flex-direction: column; gap: .6rem; padding: var(--sp-4); border-radius: var(--radius); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.s-cat b { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: var(--w-max); font-size: 1.35rem; letter-spacing: -.02em; color: #fff; }
.s-cat span { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.s-compare { width: 100%; border-collapse: collapse; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.s-compare-wrap { border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.s-compare th, .s-compare td { padding: .95rem 1.2rem; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--t-body); vertical-align: top; }
.s-compare tr:last-child td { border-bottom: 0; }
.s-compare th { font-size: var(--t-label); font-weight: var(--w-max); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-2); }
.s-compare td.c { color: var(--text-muted); }
.s-compare td.y { color: var(--text); font-weight: var(--w-strong); }
.s-compare td.y::before { content: "✓ "; color: var(--moss); }
.s-compare td.dim::before { content: "· "; color: var(--text-muted); }
@media (max-width: 600px) { .s-compare th:first-child, .s-compare td:first-child { width: 40%; } .s-compare th, .s-compare td { padding: .8rem .8rem; font-size: var(--t-small); } }
.s-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 800px) { .s-why { grid-template-columns: 1fr; } }
.s-why-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.s-why-card.hot { border-color: var(--accent); background: var(--accent-soft); }
.s-why-card.hot h3 { color: var(--accent); }
.s-why-card p { color: var(--text-muted); line-height: 1.5; }
.s-price-big { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: var(--w-max); line-height: 1; letter-spacing: -.02em; }
.s-price-cad { color: var(--text-muted); font-size: var(--t-small); font-weight: var(--w-strong); }
.site-foot-small { margin-top: .4rem !important; }

/* Prose pages (about) */
.site-prose { max-width: 680px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 0; }

/* Footer */
.site-foot { border-top: 1px solid var(--border); margin-top: clamp(2rem, 5vw, 4rem); padding: clamp(2rem, 4vw, 3rem) 0; }
.site-foot-row { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: var(--sp-5); align-items: start; }
.site-foot-brand p { color: var(--text-muted); font-size: var(--t-small); margin-top: var(--sp-2); }
.site-foot-links { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--sp-4) clamp(2rem, 6vw, 5rem); }
.site-foot-col { display: flex; flex-direction: column; gap: .15rem; }
.site-foot-col h4 { margin: 0 0 .5rem; font-size: var(--t-label); font-weight: var(--w-max); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.site-foot-links a { color: var(--text-muted); text-decoration: none; font-weight: var(--w-strong); font-size: var(--t-small); min-height: 36px; display: inline-flex; align-items: center; }
.site-foot-links a:hover { color: var(--text); opacity: 1; }
@media (max-width: 800px) { .site-foot-row { grid-template-columns: 1fr; } }

/* Pricing: the note under the cards lines up with the centred cards block (2026-09-22). */
.site-wrap .s-lead.pricing-note { margin: var(--sp-5) auto 0; font-size: var(--t-body); max-width: 900px; }

/* Marker phrases (2026-09-28): a string wraps two to four words in ==…==
   and tm draws them as <mark>. One per section at most, never in a
   headline. A soft hand-drawn coral stroke, not bold shouting. */
body.site mark { color: var(--text); font-weight: 700; padding: 0 3px; margin: 0 -1px; border-radius: 4px 7px 5px 8px;
  background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--accent) 34%, transparent) 3%, color-mix(in srgb, var(--accent) 26%, transparent) 60%, color-mix(in srgb, var(--accent) 36%, transparent) 97%, transparent 100%) 0 62% / 100% 58% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }