:root {
      /* Paper — warm bone, unchanged */
      --bg: 40 30% 96%;
      --bg-elevated: 38 22% 91%;

      /* Ink — slightly warmer than navy, reads as iron-gall on paper */
      --fg: 222 22% 13%;
      --muted: 30 8% 40%;

      /* Borders — paper-warm, not cool grey */
      --border: 36 14% 80%;
      --border-strong: 36 14% 62%;

      /* Accents — Prussian indigo + minium vermilion (historical print palette) */
      --accent-action: 212 48% 28%;
      --accent-positive: 148 40% 28%;
      --accent-critical: 12 60% 42%;
      --almanac-cobalt: 212 48% 28%;
      --almanac-cobalt-soft: 212 36% 70%;
      --almanac-cherry: 12 60% 42%;
      --almanac-cherry-soft: 12 50% 84%;
      --almanac-ink: 222 22% 13%;
      --almanac-paper: 40 30% 96%;

      /* Tertiary print accent — warm ochre, used sparingly for variety */
      --almanac-ochre: 38 62% 44%;
    }
    html { scroll-behavior: smooth; color-scheme: light; }
    body {
      background-color: hsl(var(--bg));
      color: hsl(var(--fg));
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-feature-settings: "kern", "ss01", "ss02", "calt";
      font-variant-numeric: tabular-nums lining-nums;
      font-variation-settings: "wdth" 100, "opsz" 14;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    .almanac-scope {
      background-color: hsl(var(--bg));
      color: hsl(var(--fg));
    }
    .almanac-atmosphere {
      position: relative;
      isolation: isolate;
    }
    .almanac-atmosphere::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 53px,
        hsl(var(--almanac-cobalt) / 0.04) 54px,
        transparent 55px,
        transparent 119px,
        hsl(var(--almanac-cobalt) / 0.025) 120px,
        transparent 121px
      );
    }
    .almanac-atmosphere::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 65% 40% at 30% 12%, hsl(var(--almanac-cobalt) / 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 30% at 88% 5%, hsl(var(--almanac-cherry) / 0.06) 0%, transparent 70%);
    }
    .almanac-atmosphere > * { position: relative; z-index: 1; }

    .almanac-display {
      font-family: 'Newsreader', Georgia, serif;
      font-feature-settings: "lnum", "tnum", "ss01";
      font-variant-numeric: tabular-nums lining-nums;
      color: hsl(var(--fg));
      letter-spacing: -0.01em;
    }
    .almanac-display-italic {
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-feature-settings: "lnum", "tnum";
    }
    .almanac-eyebrow {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      text-transform: uppercase;
      font-size: 10.5px;
      letter-spacing: 0.22em;
      font-weight: 400;
      color: hsl(var(--almanac-cobalt));
      font-variation-settings: "wdth" 95;
    }
    .almanac-meta {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: hsl(var(--muted));
      font-variation-settings: "wdth" 90;
    }
    .almanac-cobalt { color: hsl(var(--almanac-cobalt)); }
    .almanac-cherry { color: hsl(var(--almanac-cherry)); }

    .almanac-rule {
      height: 1px;
      background: linear-gradient(to right, transparent, hsl(var(--almanac-cobalt) / 0.5) 16%, hsl(var(--almanac-cobalt) / 0.5) 84%, transparent);
    }
    .almanac-rule-strong { height: 1px; background: hsl(var(--almanac-cobalt) / 0.55); }
    .almanac-rule-draw {
      transform-origin: left;
      transform: scaleX(0);
      animation: almanac-rule-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) 280ms forwards;
    }
    @keyframes almanac-rule-draw { to { transform: scaleX(1); } }

    .almanac-stagger > * {
      opacity: 0;
      transform: translateY(8px);
      animation: almanac-rise 720ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
      animation-delay: calc(var(--i, 0) * 80ms + 80ms);
    }
    @keyframes almanac-rise { to { opacity: 1; transform: translateY(0); } }

    .almanac-panel {
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      transition: border-color 220ms;
    }
    .almanac-panel:hover { border-color: hsl(var(--almanac-cobalt) / 0.6); }

    .almanac-marker {
      display: inline-block;
      width: 6px;
      height: 6px;
      background: hsl(var(--almanac-cherry));
      border-radius: 50%;
      box-shadow: 0 0 0 3px hsl(var(--almanac-cherry) / 0.18);
    }

    .almanac-section-num {
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: 32px;
      line-height: 1;
      color: hsl(var(--almanac-cobalt));
      font-feature-settings: "lnum", "onum";
      font-variant-numeric: oldstyle-nums;
    }

    /* Editorial reading column with drop cap. */
    .prose-reading {
      font-family: 'Fraunces', Georgia, serif;
      color: hsl(var(--fg));
      font-feature-settings: "kern", "liga", "onum", "calt";
      font-optical-sizing: auto;
      font-variation-settings: "opsz" 28;
      letter-spacing: -0.005em;
      hanging-punctuation: first last;
      text-wrap: pretty;
    }
    .prose-reading p { font-size: 17px; line-height: 1.7; color: hsl(var(--fg) / 0.95); }
    .prose-reading p + p { text-indent: 1.4em; margin-top: 0; }

    .marginalia {
      font-variant-numeric: tabular-nums;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      line-height: 1.4;
      color: hsl(var(--muted));
    }

    /* Sharp rectangular CTAs */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.7rem 1.4rem;
      background: hsl(var(--almanac-cobalt));
      color: hsl(var(--almanac-paper));
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid hsl(var(--almanac-cobalt));
      border-radius: 4px;
      transition: background 220ms, transform 220ms;
      cursor: pointer;
    }
    .btn-primary:hover { background: hsl(var(--almanac-cobalt) / 0.88); transform: translateY(-1px); }
    .btn-primary svg { width: 14px; height: 14px; }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.7rem 1.4rem;
      background: transparent;
      color: hsl(var(--fg));
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid hsl(var(--border-strong) / 0.6);
      border-radius: 4px;
      transition: border-color 220ms, color 220ms;
      cursor: pointer;
    }
    .btn-ghost:hover { border-color: hsl(var(--almanac-cobalt)); color: hsl(var(--almanac-cobalt)); }
    .btn-ghost svg { width: 14px; height: 14px; }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
    @keyframes pulse {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.3); }
    }

    /* Scroll-reveal */
    .reveal { opacity: 0; transform: translateY(12px); transition: opacity 720ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 720ms cubic-bezier(0.2, 0.7, 0.3, 1); }
    .reveal.active { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 80ms; }
    .reveal-delay-2 { transition-delay: 160ms; }
    .reveal-delay-3 { transition-delay: 240ms; }

    /* ============================================================ */
    /* Editorial elevation pass (informed by ui-ux-pro-max skill)    */
    /* ============================================================ */

    /* Folio — small dateline / volume mark, JetBrains Mono.        */
    /* Used in the hero alongside the eyebrow, or top of a section. */
    .almanac-folio {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px;
      letter-spacing: 0.08em;
      color: hsl(var(--muted));
      font-feature-settings: "tnum";
    }
    .almanac-folio span + span::before {
      content: " · ";
      color: hsl(var(--muted) / 0.6);
    }

    /* Section signpost — large Newsreader italic roman numeral. */
    /* Used as an editorial chapter marker at the head of each   */
    /* major section. Sits beside / above the eyebrow.           */
    .section-signpost {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      margin-bottom: 1.1rem;
    }
    /* Wrapper that centers a signpost in a non-text-align-center parent */
    .signpost-row { display: flex; justify-content: center; margin-bottom: 0; }
    .section-signpost .num {
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: 13px;
      line-height: 1;
      color: hsl(var(--almanac-cobalt) / 0.75);
      font-feature-settings: "lnum","onum";
      font-variant-numeric: oldstyle-nums;
      letter-spacing: 0.02em;
    }
    .section-signpost .rule {
      width: 0.85rem;
      height: 1px;
      background: hsl(var(--almanac-cobalt) / 0.45);
    }
    .section-signpost .kicker {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      text-transform: uppercase;
      font-size: 10.5px;
      letter-spacing: 0.22em;
      font-weight: 400;
      color: hsl(var(--almanac-cobalt));
      font-variation-settings: "wdth" 95;
    }

    /* Pull quote — large Newsreader italic with hanging quote marks. */
    /* Sits as a confident editorial moment between body paragraphs.   */
    .almanac-pullquote {
      position: relative;
      margin: 2.5rem 0;
      padding: 1.5rem 0 1.5rem 1.5rem;
      border-left: 2px solid hsl(var(--almanac-cobalt));
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      line-height: 1.2;
      letter-spacing: -0.015em;
      color: hsl(var(--fg));
      font-feature-settings: "kern", "calt";
      font-weight: 400;
      max-width: 28ch;
      text-wrap: balance;
    }
    .almanac-pullquote::before {
      content: "\201C";
      position: absolute;
      left: -0.2rem; top: -1.5rem;
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: 6rem;
      line-height: 1;
      color: hsl(var(--almanac-cherry));
      opacity: 0.4;
      pointer-events: none;
    }
    .almanac-pullquote .attribution {
      display: block;
      margin-top: 0.85rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-style: normal;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: hsl(var(--muted));
    }

    /* Underline CTA — secondary editorial action. Bold underlined link */
    /* rather than a ghost button. Inspired by broadsheet-poster style.  */
    .btn-underline {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 0;
      background: transparent;
      color: hsl(var(--fg));
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 400;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      border: 0;
      border-bottom: 2px solid hsl(var(--fg));
      transition: color 220ms, border-color 220ms;
      cursor: pointer;
    }
    .btn-underline:hover {
      color: hsl(var(--almanac-cobalt));
      border-color: hsl(var(--almanac-cobalt));
    }
    .btn-underline svg { width: 14px; height: 14px; transition: transform 220ms; }
    .btn-underline:hover svg { transform: translateX(3px); }

    /* Full-bleed ink hairline used as a section delimiter.            */
    /* Replaces the padded almanac-rule for the strongest divisions.   */
    .section-fullrule {
      width: 100%;
      height: 1px;
      background: hsl(var(--fg) / 0.18);
    }

    /* Subtle paper grain — fixed SVG noise filter at ~3% opacity.    */
    /* Lives in its own fixed <div> outside section flow so stacking  */
    /* stays clean (no body::before stacking-context surprises).      */
    .paper-grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      opacity: 0.5;
      mix-blend-mode: multiply;
    }

    /* NAV */
    nav.site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 1rem 2.5rem 0.85rem;
      display: flex; flex-direction: column; gap: 0.75rem;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background 500ms cubic-bezier(0.16, 1, 0.3, 1), border-bottom-color 500ms;
    }
    nav.site-nav.scrolled {
      background: hsl(var(--bg) / 0.88);
      backdrop-filter: blur(18px) saturate(1.1);
      -webkit-backdrop-filter: blur(18px) saturate(1.1);
      border-bottom-color: hsl(var(--border));
    }
    .nav-inner {
      display: flex; justify-content: space-between; align-items: center;
      width: 100%; max-width: 1200px; margin: 0 auto;
    }
    .nav-logo {
      display: flex; align-items: center; gap: 0.65rem; text-decoration: none;
    }
    .nav-logo svg { width: 28px; height: 28px; }
    .nav-logo .wordmark {
      font-family: 'Syne', system-ui, sans-serif;
      font-weight: 600;
      font-size: 1.05rem;
      color: hsl(var(--fg));
      letter-spacing: -0.02em;
    }
    .nav-links {
      display: flex; align-items: center;
      gap: 2.25rem;
      flex: 1;
      justify-content: center;
    }
    .nav-links a {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13.5px;
      font-weight: 400;
      color: hsl(var(--fg) / 0.78);
      text-decoration: none;
      letter-spacing: 0.005em;
      transition: color 220ms;
    }
    .nav-links a:hover { color: hsl(var(--almanac-cobalt)); }
    @media (max-width: 820px) {
      .nav-links { display: none; }
    }
    .nav-actions { display: flex; align-items: center; gap: 0.75rem; }
    .nav-cta {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.5rem 1rem;
      text-decoration: none;
      border-radius: 4px;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 400;
      letter-spacing: 0.16em; text-transform: uppercase;
      transition: background 220ms, border-color 220ms, color 220ms;
    }
    .nav-cta--ghost {
      background: transparent;
      color: hsl(var(--fg));
      border: 1px solid transparent;
    }
    .nav-cta--ghost:hover { color: hsl(var(--almanac-cobalt)); }
    .nav-cta--primary {
      background: hsl(var(--almanac-cobalt));
      color: hsl(var(--almanac-paper));
      border: 1px solid hsl(var(--almanac-cobalt));
    }
    .nav-cta--primary:hover { background: hsl(var(--almanac-cobalt) / 0.88); }
    .nav-cta svg { width: 12px; height: 12px; }

    /* VIEW TOGGLE */
    .view-toggle { display: flex; justify-content: center; }
    .view-toggle-inner {
      position: relative;
      display: inline-flex;
      padding: 4px;
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
    }
    .view-toggle-indicator {
      position: absolute;
      top: 4px; bottom: 4px; left: 4px;
      width: calc(50% - 4px);
      background: hsl(var(--almanac-cobalt));
      border-radius: 2px;
      transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
      z-index: 0;
    }
    .view-toggle[data-active="consumers"] .view-toggle-indicator { transform: translateX(100%); }
    .view-toggle-btn {
      position: relative; z-index: 1;
      padding: 0.45rem 1.2rem;
      background: transparent; border: 0;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: hsl(var(--muted));
      cursor: pointer;
      transition: color 220ms;
    }
    .view-toggle-btn.active { color: hsl(var(--almanac-paper)); }

    body { padding-top: 96px; }

    .hero {
      min-height: calc(100vh - 96px);
      display: flex; flex-direction: column;
      justify-content: center; align-items: center;
      text-align: center;
      padding: 4rem 2rem 6rem;
      position: relative;
    }
    .hero-content { max-width: 920px; position: relative; z-index: 2; }
    .hero-folio {
      display: flex; justify-content: center;
      margin-bottom: 1.5rem;
    }
    .hero-eyebrow { margin-bottom: 2rem; }
    .hero h1 {
      font-family: 'Newsreader', Georgia, serif;
      font-feature-settings: "lnum","tnum","ss01";
      font-variation-settings: "opsz" 144;
      font-size: clamp(3.4rem, 9vw, 7.5rem);
      line-height: 0.95;
      letter-spacing: -0.035em;
      color: hsl(var(--fg));
      margin-bottom: 2.25rem;
      font-weight: 400;
      text-wrap: balance;
    }
    .hero h1 em {
      font-style: italic;
      color: hsl(var(--almanac-cherry));
      font-variation-settings: "opsz" 144;
    }
    .hero-sub {
      font-family: 'Fraunces', Georgia, serif;
      font-feature-settings: "onum","kern";
      font-variation-settings: "opsz" 28;
      font-size: 19px; line-height: 1.55;
      color: hsl(var(--fg) / 0.78);
      max-width: 48ch;
      margin: 0 auto 3rem;
      text-wrap: pretty;
    }
    .hero-cta-group {
      display: flex; align-items: center; justify-content: center;
      gap: 1.75rem; flex-wrap: wrap;
    }
    .hero-rule-wrap { margin: 5rem auto 0; max-width: 920px; }
    .demo-section { padding: 0 2rem 6rem; position: relative; }
    .demo-section .container { max-width: 960px; margin: 0 auto; }
    .demo-caption {
      font-family: 'Fraunces', Georgia, serif;
      font-feature-settings: "onum","kern";
      font-variation-settings: "opsz" 24;
      font-optical-sizing: auto;
      font-size: 22px; font-style: italic; font-weight: 400;
      color: hsl(var(--muted));
      text-align: center;
      line-height: 1.4;
      margin: 0;
    }
    .demo-caption--top { margin-bottom: 1.5rem; }
    .demo-caption--bottom { margin-top: 1.5rem; }
    .mac-window {
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid hsl(var(--border));
      background: hsl(var(--bg-elevated));
      box-shadow: 0 4px 12px hsl(225 30% 4% / 0.06), 0 24px 60px hsl(225 30% 4% / 0.08);
    }
    .mac-titlebar {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 14px;
      background: hsl(var(--bg));
      border-bottom: 1px solid hsl(var(--border));
    }
    .mac-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mac-dot--red    { background: #d8786f; }
    .mac-dot--yellow { background: #d3a449; }
    .mac-dot--green  { background: #62a763; }
    .mac-titlebar-spacer { flex: 1; }

    .chat-container { display: flex; height: 480px; background: hsl(var(--bg-elevated)); }

    .chat-sidebar {
      width: 180px;
      background: hsl(var(--bg));
      border-right: 1px solid hsl(var(--border));
      display: flex; flex-direction: column;
      padding: 14px 12px; gap: 4px;
      flex-shrink: 0; overflow: hidden;
    }
    .chat-sidebar-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 4px;
      cursor: pointer;
      color: hsl(var(--muted));
      transition: background 220ms, color 220ms;
    }
    .chat-sidebar-item:hover { background: hsl(var(--border) / 0.5); color: hsl(var(--fg)); }
    .chat-sidebar-item.active { background: hsl(var(--almanac-cobalt) / 0.08); color: hsl(var(--almanac-cobalt)); }
    .chat-sidebar-item svg {
      width: 14px; height: 14px;
      stroke: currentColor; fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
      flex-shrink: 0;
    }
    .chat-sidebar-label {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 12px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sidebar-section-title {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 9.5px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.14em;
      color: hsl(var(--muted));
      padding: 14px 10px 6px;
    }
    .sidebar-recent {
      padding: 6px 10px; border-radius: 4px;
      cursor: pointer; color: hsl(var(--muted));
      transition: background 220ms;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sidebar-recent:hover { background: hsl(var(--border) / 0.5); }
    .sidebar-divider { width: 100%; height: 1px; background: hsl(var(--border)); margin: 6px 0; }

    .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .chat-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 20px;
      border-bottom: 1px solid hsl(var(--border));
      background: hsl(var(--bg));
      flex-shrink: 0;
    }
    .chat-topbar-title {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13px; font-weight: 500;
      color: hsl(var(--fg));
    }
    .chat-topbar-btn {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 4px; border: 0; background: transparent;
      cursor: pointer; color: hsl(var(--muted));
      transition: background 220ms, color 220ms;
    }
    .chat-topbar-btn:hover { background: hsl(var(--border) / 0.5); color: hsl(var(--fg)); }
    .chat-topbar-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

    .chat-body {
      flex: 1; padding: 20px 26px;
      overflow: hidden;
      display: flex; flex-direction: column; gap: 16px;
      background: hsl(var(--bg-elevated));
    }

    .chat-msg-user { display: flex; justify-content: flex-end; opacity: 0; transform: translateY(8px); }
    .chat-msg-user.active { opacity: 1; transform: translateY(0); transition: opacity 400ms, transform 400ms; }
    .chat-bubble-user {
      background: hsl(var(--almanac-cobalt) / 0.08);
      color: hsl(var(--fg));
      padding: 10px 14px;
      border-radius: 4px;
      border: 1px solid hsl(var(--almanac-cobalt) / 0.25);
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13px; line-height: 1.55;
      max-width: 72%;
    }
    .chat-bubble-user .typing-cursor {
      display: inline-block; width: 2px; height: 1em;
      background: hsl(var(--almanac-cobalt));
      margin-left: 1px; vertical-align: text-bottom;
      animation: cursorBlink 0.8s step-end infinite;
    }

    .chat-msg-ai { display: flex; gap: 12px; opacity: 0; transform: translateY(8px); }
    .chat-msg-ai.active { opacity: 1; transform: translateY(0); transition: opacity 400ms, transform 400ms; }
    .chat-ai-content { flex: 1; min-width: 0; }

    .thinking-traces { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .thinking-trace-line {
      display: flex; align-items: center; gap: 8px;
      opacity: 0; transform: translateX(-6px);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; color: hsl(var(--muted));
    }
    .thinking-trace-line.active { opacity: 1; transform: translateX(0); transition: opacity 500ms, transform 500ms; }
    .thinking-spinner {
      width: 12px; height: 12px;
      border: 1.5px solid hsl(var(--border-strong));
      border-top-color: hsl(var(--almanac-cobalt));
      border-radius: 50%;
      animation: spin 1s linear infinite;
      flex-shrink: 0;
    }
    .thinking-spinner.done {
      border-color: hsl(var(--almanac-cobalt) / 0.5);
      border-top-color: hsl(var(--almanac-cobalt) / 0.5);
      animation: none;
    }

    .chat-ai-text {
      font-family: 'Fraunces', Georgia, serif;
      font-feature-settings: "onum","kern";
      font-size: 15px; line-height: 1.65;
      color: hsl(var(--fg) / 0.95);
      opacity: 0; transform: translateY(4px);
    }
    .chat-ai-text.active { opacity: 1; transform: translateY(0); transition: opacity 500ms, transform 500ms; }
    .chat-ai-text p { margin-bottom: 0.5rem; }

    .chat-product-card {
      background: hsl(var(--bg));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
      padding: 14px;
      margin-top: 12px;
      opacity: 0; transform: translateY(12px);
      display: flex; gap: 14px; align-items: flex-start;
    }
    .chat-product-card.active { opacity: 1; transform: translateY(0); transition: opacity 600ms, transform 600ms; }
    .product-image {
      width: 120px; height: 120px;
      border-radius: 4px;
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      overflow: hidden;
      flex-shrink: 0;
    }
    .product-image img { width: 100%; height: 100%; object-fit: cover; }
    .product-body { flex: 1; min-width: 0; }
    .product-top-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 8px; margin-bottom: 6px;
    }
    .product-name {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 14px; font-weight: 500;
      color: hsl(var(--fg)); line-height: 1.3;
    }
    .product-price {
      font-family: 'Newsreader', Georgia, serif;
      font-feature-settings: "lnum","tnum";
      font-size: 18px; color: hsl(var(--fg));
      white-space: nowrap;
    }
    .product-reasons { list-style: none; display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; padding: 0; }
    .product-reasons li {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 13px; color: hsl(var(--fg) / 0.85); line-height: 1.5;
      display: flex; align-items: flex-start; gap: 8px;
    }
    .product-reasons li::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: hsl(var(--almanac-cherry));
      box-shadow: 0 0 0 2px hsl(var(--almanac-cherry) / 0.18);
      flex-shrink: 0; margin-top: 7px;
    }
    .product-actions { display: flex; align-items: center; justify-content: space-between; }
    .buy-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      background: hsl(var(--almanac-cobalt));
      color: hsl(var(--almanac-paper));
      border: 1px solid hsl(var(--almanac-cobalt));
      border-radius: 4px;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 400; font-size: 11px;
      letter-spacing: 0.16em; text-transform: uppercase;
      cursor: pointer; transition: background 220ms;
    }
    .buy-btn:hover { background: hsl(var(--almanac-cobalt) / 0.88); }
    .buy-btn svg { width: 11px; height: 11px; }
    .powered-by-clinchr {
      display: flex; align-items: center; gap: 4px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9.5px; color: hsl(var(--muted));
    }
    .powered-by-clinchr .clinchr-mini-icon { width: 11px; height: 11px; }
    .powered-by-clinchr .clinchr-logo-text {
      font-family: 'Syne', system-ui, sans-serif;
      font-weight: 600; font-size: 10px;
      color: hsl(var(--almanac-cobalt));
      letter-spacing: -0.02em;
    }
    .chat-input-bar {
      padding: 10px 16px 12px;
      background: hsl(var(--bg));
      border-top: 1px solid hsl(var(--border));
    }
    .chat-input-field {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px;
      background: hsl(var(--bg-elevated));
      border-radius: 4px;
      border: 1px solid hsl(var(--border));
    }
    .chat-input-text {
      flex: 1;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 12px; color: hsl(var(--muted));
    }
    .chat-input-send {
      width: 22px; height: 22px;
      border-radius: 4px;
      background: hsl(var(--almanac-cobalt));
      display: flex; align-items: center; justify-content: center;
    }
    .chat-input-send svg {
      width: 11px; height: 11px;
      stroke: hsl(var(--almanac-paper)); fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .stats-section { padding: 4rem 2rem 6rem; }
    .stats-section .container { max-width: 1100px; margin: 0 auto; }
    .stats-headline {
      text-align: center;
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-variation-settings: "opsz" 60;
      font-size: clamp(2.2rem, 4.6vw, 3.6rem);
      color: hsl(var(--fg));
      margin-bottom: 4rem;
      letter-spacing: -0.025em;
      font-weight: 400;
      text-wrap: balance;
      max-width: 22ch;
      margin-left: auto;
      margin-right: auto;
    }
    .stats-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      position: relative;
    }
    .stat-item {
      text-align: center;
      padding: 2rem 2.5rem;
      position: relative;
    }
    .stat-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0; top: 15%; height: 70%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, hsl(var(--almanac-cobalt) / 0.4), transparent);
    }
    .stat-number {
      font-family: 'Newsreader', Georgia, serif;
      font-feature-settings: "lnum","tnum","ss01";
      font-variant-numeric: tabular-nums lining-nums;
      font-variation-settings: "opsz" 120;
      font-size: clamp(3.4rem, 6.4vw, 5.4rem);
      line-height: 0.95; margin-bottom: 1rem;
      letter-spacing: -0.035em;
      color: hsl(var(--fg));
    }
    .stat-label {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13px; color: hsl(var(--muted));
      line-height: 1.55; max-width: 240px;
      margin: 0 auto;
    }
    .stats-subline {
      text-align: center;
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.4rem, 2.8vw, 2rem);
      color: hsl(var(--muted));
      margin-top: 3rem;
    }
    .problem { padding: 6rem 2rem; }
    .problem .container { max-width: 1100px; margin: 0 auto; }
    .problem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .problem-inner { max-width: 540px; }
    .problem h2 {
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 96;
      font-size: clamp(2.4rem, 4.8vw, 3.6rem);
      letter-spacing: -0.03em;
      color: hsl(var(--fg));
      margin: 1.25rem 0 1.5rem;
      font-weight: 400;
      line-height: 1.02;
      text-wrap: balance;
    }
    .problem .prose-reading { margin-bottom: 1rem; }
    .problem .prose-reading em {
      font-style: italic;
      color: hsl(var(--almanac-cobalt));
    }
    .problem-cta {
      display: inline-flex; align-items: center; gap: 0.4rem;
      margin-top: 1.5rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 12px; font-weight: 400;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: hsl(var(--almanac-cobalt));
      text-decoration: none;
    }
    .problem-cta::after { content: '→'; font-size: 13px; }

    /* Devices */
    .devices-demo {
      position: relative; width: 100%; height: 480px;
      perspective: 1200px;
    }
    .device-tablet {
      position: absolute; left: -10px; top: 20px;
      transform: rotateY(10deg) rotateX(16deg);
      transform-style: preserve-3d;
      z-index: 1;
    }
    .tablet-body {
      width: 340px; height: 440px;
      background: hsl(var(--border-strong));
      border-radius: 8px;
      padding: 8px;
      box-shadow:
        4px 6px 16px hsl(225 30% 4% / 0.12),
        0 20px 48px hsl(225 30% 4% / 0.18);
    }
    .tablet-screen {
      width: 100%; height: 100%;
      background: hsl(var(--bg));
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .tablet-toolbar {
      display: flex; align-items: center; gap: 5px;
      padding: 8px 12px;
      background: hsl(var(--bg-elevated));
      border-bottom: 1px solid hsl(var(--border));
    }
    .tablet-dot { width: 6px; height: 6px; border-radius: 50%; }
    .tablet-dot:nth-child(1) { background: #d8786f; }
    .tablet-dot:nth-child(2) { background: #d3a449; }
    .tablet-dot:nth-child(3) { background: #62a763; }
    .tablet-title {
      flex: 1; text-align: center;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px; color: hsl(var(--muted));
      letter-spacing: 0.04em;
    }
    .json-scroll-viewport {
      height: calc(100% - 32px);
      overflow: hidden;
      position: relative;
      padding: 10px;
    }
    .json-scroll-content {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9.5px; line-height: 1.65;
      color: hsl(var(--muted));
      white-space: pre;
      animation: jsonStreamScroll 50s linear infinite;
    }
    @keyframes jsonStreamScroll {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }
    .json-scroll-fade-top, .json-scroll-fade-bottom {
      position: absolute; left: 0; right: 0; height: 32px; pointer-events: none; z-index: 1;
    }
    .json-scroll-fade-top { top: 32px; background: linear-gradient(to bottom, hsl(var(--bg)), transparent); }
    .json-scroll-fade-bottom { bottom: 0; background: linear-gradient(to top, hsl(var(--bg)), transparent); }

    .device-phone {
      position: absolute; right: 20px; top: 30px;
      transform: rotateY(-12deg) rotateX(18deg);
      transform-style: preserve-3d;
      z-index: 2;
    }
    .phone-body {
      width: 220px; height: 420px;
      background: hsl(var(--border-strong));
      border-radius: 16px;
      padding: 6px;
      box-shadow:
        6px 8px 20px hsl(225 30% 4% / 0.15),
        0 24px 60px hsl(225 30% 4% / 0.2);
    }
    .phone-screen {
      width: 100%; height: 100%;
      background: hsl(var(--bg-elevated));
      border-radius: 12px;
      overflow: hidden;
      position: relative;
    }
    .phone-notch {
      width: 80px; height: 20px;
      background: hsl(var(--bg-elevated));
      border-radius: 0 0 12px 12px;
      margin: 0 auto;
      position: relative; z-index: 5;
      display: flex; align-items: center; justify-content: center;
    }
    .phone-notch-camera { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--border-strong)); }
    .phone-screen-content { padding: 4px 10px; height: calc(100% - 40px); overflow: hidden; }
    .phone-status-bar {
      display: flex; justify-content: space-between;
      padding: 4px 4px 6px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 8px; color: hsl(var(--muted));
    }
    .phone-topbar {
      display: flex; align-items: center; justify-content: center;
      padding: 6px 0 10px;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 500;
      color: hsl(var(--fg));
    }
    .phone-chat-user {
      background: hsl(var(--almanac-cobalt) / 0.08);
      color: hsl(var(--fg));
      padding: 6px 9px;
      border-radius: 4px;
      border: 1px solid hsl(var(--almanac-cobalt) / 0.25);
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 9.5px; line-height: 1.5;
      margin: 0 0 10px 30px;
    }
    .phone-thinking {
      display: flex; align-items: center; gap: 6px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px; color: hsl(var(--muted));
      padding: 6px 0;
    }
    .phone-thinking .thinking-spinner { width: 8px; height: 8px; }
    .phone-product-ghost {
      margin-top: 10px; padding: 8px;
      background: hsl(var(--bg));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
    }
    .phone-ghost-line {
      height: 5px; border-radius: 2px;
      background: hsl(var(--border));
      margin-bottom: 5px;
    }
    .phone-ghost-line:nth-child(1) { width: 60%; }
    .phone-ghost-line:nth-child(2) { width: 80%; }
    .phone-ghost-line:nth-child(3) { width: 45%; }
    .phone-input-bar { padding: 6px 10px 10px; position: absolute; bottom: 12px; left: 0; right: 0; }
    .phone-input-field {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 10px;
      background: hsl(var(--bg));
      border-radius: 4px;
      border: 1px solid hsl(var(--border));
    }
    .phone-input-text {
      flex: 1;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 8.5px; color: hsl(var(--muted));
    }
    .phone-input-send {
      width: 16px; height: 16px; border-radius: 3px;
      background: hsl(var(--almanac-cobalt));
      display: flex; align-items: center; justify-content: center;
    }
    .phone-input-send svg {
      width: 8px; height: 8px;
      stroke: hsl(var(--almanac-paper)); fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .phone-home-bar {
      width: 60px; height: 3px; border-radius: 2px;
      background: hsl(var(--border-strong));
      position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    }
    .solution {
      padding: 6rem 2rem;
      background: hsl(var(--bg-elevated));
      border-top: 1px solid hsl(var(--border));
      border-bottom: 1px solid hsl(var(--border));
    }
    .solution .container { max-width: 1100px; margin: 0 auto; }
    .solution-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
    }
    .solution h2 {
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 96;
      font-size: clamp(2.4rem, 4.8vw, 3.6rem);
      letter-spacing: -0.03em;
      color: hsl(var(--fg));
      margin: 1.25rem 0 1.5rem;
      font-weight: 400;
      line-height: 1.02;
      text-wrap: balance;
    }
    .solution-text {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 17px; line-height: 1.65;
      color: hsl(var(--fg) / 0.85);
      margin-bottom: 1rem;
    }
    .solution-text em {
      font-style: italic;
      color: hsl(var(--almanac-cherry));
    }

    /* Features strip — 4-column editorial row between Solution + Feed deep-dive */
    .features {
      padding: 5rem 2rem 5rem;
      position: relative;
    }
    .features .container { max-width: 1100px; margin: 0 auto; }
    .features-header { text-align: center; margin-bottom: 3rem; }
    .features-header .section-signpost { margin-bottom: 0.85rem; }
    .features-header h3 {
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 60;
      font-size: clamp(1.6rem, 2.8vw, 2.2rem);
      letter-spacing: -0.02em;
      color: hsl(var(--fg));
      font-weight: 400;
      line-height: 1.1;
      max-width: 28ch;
      margin: 0 auto;
      text-wrap: balance;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid hsl(var(--border));
      border-bottom: 1px solid hsl(var(--border));
    }
    @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 520px) { .features-grid { grid-template-columns: 1fr; } }
    .features-tagline {
      text-align: center;
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 60;
      font-optical-sizing: auto;
      font-style: normal; font-weight: 400;
      font-size: clamp(1.6rem, 2.8vw, 2.2rem);
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: hsl(var(--fg));
      max-width: 28ch;
      margin: 3rem auto 0;
      text-wrap: balance;
    }
    .feature-item {
      padding: 2rem 1.75rem;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
    .feature-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0; top: 18%; height: 64%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, hsl(var(--border-strong) / 0.55), transparent);
    }
    @media (max-width: 900px) {
      .feature-item:not(:last-child)::after { display: none; }
      .feature-item:nth-child(odd):not(:last-child)::after {
        display: block; right: 0; top: 18%; height: 64%; width: 1px;
      }
      .feature-item:nth-child(1), .feature-item:nth-child(2) {
        border-bottom: 1px solid hsl(var(--border));
      }
    }
    .feature-num {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px;
      letter-spacing: 0.18em;
      color: hsl(var(--almanac-cobalt));
    }
    .feature-label {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 22px;
      letter-spacing: -0.015em;
      color: hsl(var(--fg));
      font-weight: 400;
      line-height: 1.15;
      text-wrap: balance;
    }
    .feature-desc {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 14px;
      line-height: 1.55;
      color: hsl(var(--fg) / 0.78);
      flex: 1;
    }
    .feature-link {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 10.5px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: hsl(var(--almanac-cobalt));
      text-decoration: none;
      transition: opacity 220ms;
      margin-top: 0.25rem;
    }
    .feature-link:hover { opacity: 0.65; }
    .feature-link svg { width: 11px; height: 11px; transition: transform 220ms; }
    .feature-link:hover svg { transform: translateX(2px); }
    .solution-highlight {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; color: hsl(var(--almanac-cobalt));
      letter-spacing: 0.04em;
      margin-top: 0.5rem;
    }
    .solution-highlight::before {
      content: '';
      width: 6px; height: 6px;
      background: hsl(var(--almanac-cherry));
      border-radius: 50%;
      box-shadow: 0 0 0 3px hsl(var(--almanac-cherry) / 0.18);
      flex-shrink: 0;
    }

    /* Flow diagram */
    .flow { display: flex; flex-direction: column; align-items: center; gap: 0; }
    .flow-node {
      display: flex; align-items: center; gap: 0.85rem;
      padding: 0.85rem 1.25rem;
      background: hsl(var(--bg));
      border: 1px solid hsl(var(--border));
      min-width: 220px;
      position: relative;
    }
    .flow-node__icon {
      display: flex; align-items: center; justify-content: center;
      width: 32px; height: 32px;
      background: hsl(var(--bg-elevated));
      flex-shrink: 0;
    }
    .flow-node__icon svg { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .flow-node__label {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13px; font-weight: 400;
      color: hsl(var(--fg));
    }
    .flow-node__eyebrow {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 9px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.18em;
      color: hsl(var(--muted));
      display: block;
      margin-bottom: 2px;
    }
    .flow-node--buyer { border-color: hsl(var(--almanac-cobalt) / 0.6); }
    .flow-node--buyer .flow-node__icon svg { stroke: hsl(var(--almanac-cobalt)); }
    .flow-node--buyer .flow-node__eyebrow { color: hsl(var(--almanac-cobalt)); }
    .flow-node--clinchr {
      border-color: hsl(var(--almanac-cobalt));
      border-width: 1.5px;
    }
    .flow-node--clinchr .flow-node__icon svg { stroke: hsl(var(--almanac-cobalt)); }
    .flow-node--clinchr .flow-node__eyebrow { color: hsl(var(--almanac-cobalt)); }
    .flow-node--clinchr::before {
      content: '';
      position: absolute;
      top: -3px; left: -3px;
      width: 6px; height: 6px;
      background: hsl(var(--almanac-cherry));
      border-radius: 50%;
      box-shadow: 0 0 0 3px hsl(var(--almanac-cherry) / 0.18);
    }
    .flow-node__badge {
      position: absolute; top: -10px; right: 10px;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px; padding: 1px 6px;
      background: hsl(var(--bg));
      color: hsl(var(--almanac-cobalt));
      border: 1px solid hsl(var(--almanac-cobalt) / 0.5);
      letter-spacing: 0.04em;
    }
    .flow-connector {
      display: flex; flex-direction: column; align-items: center;
      padding: 0.25rem 0;
    }
    .flow-arrow-up, .flow-arrow-down {
      color: hsl(var(--muted));
      font-size: 8px; line-height: 1;
    }
    .flow-line {
      width: 1px; height: 32px;
      position: relative; overflow: hidden;
      background: hsl(var(--almanac-cobalt) / 0.4);
    }
    .flow-line::after {
      content: '';
      position: absolute;
      width: 3px; left: -1px;
      height: 8px; border-radius: 2px;
      background: hsl(var(--almanac-cobalt));
      animation: flowDown 3.4s ease-in-out infinite;
    }
    @keyframes flowDown {
      0% { top: -10px; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }
    .flow-connector-label {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      color: hsl(var(--almanac-cobalt));
      padding: 4px 0;
      letter-spacing: 0.04em;
    }
    .flow-negotiation {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 0.5rem 0;
    }
    .flow-negotiation__arrows {
      display: flex; gap: 1rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px;
      color: hsl(var(--muted));
    }
    .flow-negotiation__label {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 10px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: hsl(var(--almanac-cherry));
    }
    .blog { padding: 6rem 2rem; }
    .blog .container { max-width: 1100px; margin: 0 auto; }
    .blog-header { max-width: 720px; margin-bottom: 3rem; }
    .blog-eyebrow {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      text-transform: uppercase;
      font-size: 10.5px; letter-spacing: 0.22em; font-weight: 400;
      color: hsl(var(--almanac-cobalt));
      margin-bottom: 1.25rem;
    }
    .blog-eyebrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
    .blog h2 {
      font-family: 'Newsreader', Georgia, serif;
      font-size: clamp(1.8rem, 3.6vw, 2.6rem);
      letter-spacing: -0.015em;
      color: hsl(var(--fg));
      margin-bottom: 1rem;
      font-weight: 400;
      line-height: 1.1;
    }
    .blog-sub {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 16px; line-height: 1.6;
      color: hsl(var(--fg) / 0.8);
    }
    .blog-section-bar {
      display: flex; align-items: center; gap: 1rem;
      margin-bottom: 2rem;
    }
    .blog-section-bar-label {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.18em;
      color: hsl(var(--muted));
    }
    .blog-section-bar-rule { flex: 1; height: 1px; background: hsl(var(--border)); }
    .blog-section-bar-link {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: hsl(var(--almanac-cobalt));
      text-decoration: none;
    }
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
    .blog-card {
      display: block;
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      text-decoration: none;
      color: inherit;
      transition: border-color 220ms, transform 220ms;
    }
    .blog-card:hover { border-color: hsl(var(--almanac-cobalt) / 0.6); transform: translateY(-2px); }
    .blog-card-thumb {
      aspect-ratio: 16 / 9;
      position: relative;
      border-bottom: 1px solid hsl(var(--border));
      display: flex; align-items: center; justify-content: center;
    }
    .blog-card-thumb--cobalt { background: linear-gradient(135deg, hsl(var(--almanac-cobalt) / 0.08), hsl(var(--almanac-cobalt) / 0.02)); }
    .blog-card-thumb--cherry { background: linear-gradient(135deg, hsl(var(--almanac-cherry) / 0.08), hsl(var(--almanac-cherry) / 0.02)); }
    .blog-card-thumb svg { width: 48px; height: 48px; stroke: currentColor; fill: none; opacity: 0.6; }
    .blog-card-thumb--cobalt svg { stroke: hsl(var(--almanac-cobalt)); }
    .blog-card-thumb--cherry svg { stroke: hsl(var(--almanac-cherry)); }
    .blog-card-thumb-tag {
      position: absolute; top: 12px; left: 12px;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 10px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.16em;
      padding: 3px 8px;
      background: hsl(var(--bg));
      color: hsl(var(--fg));
      border: 1px solid hsl(var(--border));
    }
    .blog-card-body { padding: 1.25rem 1.5rem 1.5rem; }
    .blog-card-meta {
      display: flex; align-items: center; gap: 0.5rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10.5px; color: hsl(var(--muted));
      margin-bottom: 0.75rem;
    }
    .blog-card-meta svg { width: 11px; height: 11px; stroke: currentColor; fill: none; }
    .blog-card-meta-item { display: inline-flex; align-items: center; gap: 0.35rem; }
    .blog-card-meta-dot {
      width: 3px; height: 3px; border-radius: 50%;
      background: hsl(var(--muted));
    }
    .blog-card h3 {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 22px; line-height: 1.2;
      letter-spacing: -0.01em;
      color: hsl(var(--fg));
      margin-bottom: 0.5rem;
      font-weight: 400;
    }
    .blog-card-excerpt {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 14px; line-height: 1.5;
      color: hsl(var(--fg) / 0.75);
      margin-bottom: 1.25rem;
    }
    .blog-card-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 1rem;
      border-top: 1px solid hsl(var(--border));
    }
    .blog-card-byline {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; color: hsl(var(--muted));
    }
    .blog-card-byline-avatar {
      width: 18px; height: 18px;
      background: hsl(var(--almanac-cobalt));
      color: hsl(var(--almanac-paper));
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Syne', system-ui, sans-serif;
      font-size: 9px; font-weight: 600;
    }
    .blog-card-cta {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: hsl(var(--almanac-cobalt));
    }
    .blog-footer-note {
      text-align: center;
      margin-top: 2.5rem;
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: 15px;
      color: hsl(var(--muted));
    }
    .footer-cta {
      padding: 6rem 2rem;
      text-align: center;
      position: relative;
    }
    .footer-cta .container {
      max-width: 720px; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
    }
    .footer-cta-eyebrow {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      text-transform: uppercase;
      font-size: 10.5px; letter-spacing: 0.22em; font-weight: 400;
      color: hsl(var(--almanac-cobalt));
    }
    .footer-cta h2 {
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      letter-spacing: -0.015em;
      color: hsl(var(--fg));
      font-weight: 400;
      line-height: 1.05;
    }
    .footer-cta h2 em { font-style: italic; color: hsl(var(--almanac-cherry)); }
    .footer-cta-sub {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 17px; line-height: 1.6;
      color: hsl(var(--fg) / 0.82);
      max-width: 52ch;
    }
    .footer-cta-rule {
      width: 100%; max-width: 720px;
      margin: 0 auto;
    }
    .slack-window { /* inherits .mac-window */ }
    .slack-container { display: flex; height: 520px; background: hsl(var(--bg-elevated)); }
    .slack-sidebar {
      width: 200px;
      background: hsl(var(--bg));
      border-right: 1px solid hsl(var(--border));
      padding: 14px 12px;
      flex-shrink: 0;
      overflow: hidden;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    }
    .slack-workspace {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 6px 12px;
      border-bottom: 1px solid hsl(var(--border));
      margin-bottom: 10px;
    }
    .slack-workspace-name { font-size: 13px; font-weight: 500; color: hsl(var(--fg)); }
    .slack-workspace-status {
      width: 7px; height: 7px; border-radius: 50%;
      background: hsl(var(--accent-positive));
    }
    .slack-sidebar-section { margin-bottom: 12px; }
    .slack-sidebar-section-title {
      font-size: 9.5px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.14em;
      color: hsl(var(--muted));
      padding: 4px 6px 4px;
    }
    .slack-sidebar-item {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 8px;
      font-size: 12px;
      color: hsl(var(--muted));
      cursor: pointer;
      border-radius: 4px;
      transition: background 220ms, color 220ms;
    }
    .slack-sidebar-item:hover { background: hsl(var(--border) / 0.5); color: hsl(var(--fg)); }
    .slack-sidebar-item.active {
      background: hsl(var(--almanac-cobalt) / 0.08);
      color: hsl(var(--almanac-cobalt));
      font-weight: 500;
    }
    .slack-sidebar-item-prefix { width: 12px; color: hsl(var(--muted)); }
    .slack-sidebar-item-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: hsl(var(--almanac-cherry));
    }

    .slack-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .slack-channel-header {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 20px;
      background: hsl(var(--bg));
      border-bottom: 1px solid hsl(var(--border));
    }
    .slack-channel-avatar {
      width: 32px; height: 32px;
      background: hsl(var(--almanac-cobalt));
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
    }
    .slack-channel-avatar svg { width: 18px; height: 18px; }
    .slack-channel-title {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 14px; font-weight: 600; color: hsl(var(--fg));
      display: flex; align-items: center; gap: 8px;
    }
    .slack-channel-subtitle {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; color: hsl(var(--muted));
    }

    .slack-messages {
      flex: 1; overflow-y: auto;
      padding: 16px 20px;
      display: flex; flex-direction: column; gap: 14px;
      background: hsl(var(--bg-elevated));
    }
    .slack-message {
      display: flex; gap: 10px;
      opacity: 0; transform: translateY(8px);
    }
    .slack-message.active { opacity: 1; transform: translateY(0); transition: opacity 400ms, transform 400ms; }
    .slack-message-avatar {
      width: 32px; height: 32px;
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-family: 'Syne', system-ui, sans-serif;
      font-weight: 600; font-size: 13px;
    }
    .slack-message-avatar--user { background: hsl(var(--almanac-cherry)); color: hsl(var(--almanac-paper)); }
    .slack-message-avatar--bot  { background: hsl(var(--almanac-cobalt)); color: hsl(var(--almanac-paper)); }
    .slack-message-avatar--bot svg { width: 18px; height: 18px; }
    .slack-message-body { flex: 1; min-width: 0; }
    .slack-message-header {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 2px;
    }
    .slack-message-name {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13px; font-weight: 600;
      color: hsl(var(--fg));
    }
    .slack-message-app-tag {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 9px;
      padding: 1px 5px;
      background: hsl(var(--bg));
      color: hsl(var(--muted));
      border: 1px solid hsl(var(--border));
      letter-spacing: 0.04em;
    }
    .slack-message-time {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 10px; color: hsl(var(--muted));
    }
    .slack-message-text {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13.5px; color: hsl(var(--fg));
      line-height: 1.5;
    }
    .slack-mention {
      color: hsl(var(--almanac-cobalt));
      background: hsl(var(--almanac-cobalt) / 0.08);
      padding: 0 4px;
      border-radius: 2px;
    }
    .slack-bot-reply {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 14px; line-height: 1.6;
      color: hsl(var(--fg) / 0.95);
      margin-bottom: 10px;
    }
    .slack-traces { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
    .slack-trace-line {
      display: flex; align-items: center; gap: 8px;
      opacity: 0; transform: translateX(-6px);
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; color: hsl(var(--muted));
    }
    .slack-trace-line.active { opacity: 1; transform: translateX(0); transition: opacity 500ms, transform 500ms; }

    .slack-order-card {
      background: hsl(var(--bg));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
      padding: 14px;
      margin-top: 8px;
      max-width: 460px;
      opacity: 0; transform: translateY(12px);
    }
    .slack-order-card.active { opacity: 1; transform: translateY(0); transition: opacity 600ms, transform 600ms; }
    .slack-order-header {
      display: flex; align-items: center; justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid hsl(var(--border));
      margin-bottom: 10px;
    }
    .slack-order-title {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13px; font-weight: 500; color: hsl(var(--fg));
    }
    .slack-order-eta {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; color: hsl(var(--almanac-cobalt));
    }
    .slack-order-items { list-style: none; padding: 0; margin: 0 0 12px; }
    .slack-order-items li {
      display: flex; justify-content: space-between;
      padding: 5px 0;
      font-family: 'Fraunces', Georgia, serif;
      font-size: 13.5px;
      color: hsl(var(--fg) / 0.9);
    }
    .slack-order-item-qty {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; color: hsl(var(--muted));
      margin-right: 6px;
    }
    .slack-order-item-price {
      font-family: 'Newsreader', Georgia, serif;
      font-feature-settings: "lnum","tnum";
      font-size: 14px; color: hsl(var(--fg));
    }
    .slack-order-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 10px;
      border-top: 1px solid hsl(var(--border));
    }
    .slack-order-total {
      display: flex; align-items: baseline; gap: 0.6rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; text-transform: uppercase;
      letter-spacing: 0.16em; color: hsl(var(--muted));
    }
    .slack-order-total strong {
      font-family: 'Newsreader', Georgia, serif;
      font-feature-settings: "lnum","tnum";
      font-size: 18px; font-weight: 400; color: hsl(var(--fg));
      letter-spacing: 0;
    }
    .slack-order-confirm {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px;
      background: hsl(var(--almanac-cobalt));
      color: hsl(var(--almanac-paper));
      border: 1px solid hsl(var(--almanac-cobalt));
      border-radius: 4px;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 400; font-size: 11px;
      letter-spacing: 0.16em; text-transform: uppercase;
      cursor: pointer;
    }
    .slack-order-confirm svg { width: 11px; height: 11px; }

    .slack-composer {
      padding: 10px 20px 14px;
      background: hsl(var(--bg));
      border-top: 1px solid hsl(var(--border));
    }
    .slack-composer-field {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px;
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
    }
    .slack-composer-placeholder {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 12px; color: hsl(var(--muted));
    }
    .slack-composer-icons { display: flex; gap: 8px; }
    .slack-composer-icons svg {
      width: 14px; height: 14px;
      stroke: hsl(var(--muted)); fill: none;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    }
    /* ============================================================ */
    /* Team section                                                   */
    /* ============================================================ */
    .team { padding: 7rem 2rem 6rem; position: relative; }
    .team .container { max-width: 1100px; margin: 0 auto; }
    .team-header { max-width: 720px; margin-bottom: 4rem; }
    .team-header h2 {
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 96;
      font-size: clamp(2.2rem, 4.4vw, 3.4rem);
      letter-spacing: -0.03em;
      color: hsl(var(--fg));
      margin: 1rem 0 1.25rem;
      font-weight: 400;
      line-height: 1.02;
      text-wrap: balance;
    }
    .team-lead {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 17px; line-height: 1.6;
      color: hsl(var(--fg) / 0.78);
    }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      max-width: 680px;
    }
    @media (max-width: 760px) { .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 480px; } }
    @media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; max-width: 100%; } }
    .team-card {
      display: flex; flex-direction: column;
    }
    .team-portrait {
      aspect-ratio: 1 / 1;
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      filter: grayscale(1) contrast(1.02);
      margin-bottom: 1rem;
      max-width: 180px;
    }
    /* Source PNGs are circular crops on white. We zoom into the face so the
       white corners are cropped out, and translate down so the face lands
       in the visual centre of the (now square) box. */
    .team-portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.45) translateY(8%);
      transform-origin: center center;
    }
    /* Monogram portrait — large Newsreader initial centered on a paper-tone */
    /* tile with a subtle radial vignette. Acts as a B/W placeholder portrait. */
    .team-portrait::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 70% at 50% 35%,
          hsl(var(--fg) / 0.04) 0%, transparent 70%),
        repeating-linear-gradient(
          112deg,
          transparent 0,
          transparent 5px,
          hsl(var(--fg) / 0.02) 5px,
          hsl(var(--fg) / 0.02) 6px
        );
    }
    .team-portrait .monogram {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-variation-settings: "opsz" 144;
      font-size: clamp(3rem, 6vw, 4.25rem);
      color: hsl(var(--fg) / 0.55);
      letter-spacing: -0.03em;
    }
    .team-name {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 18px;
      letter-spacing: -0.01em;
      color: hsl(var(--fg));
      margin-bottom: 0.15rem;
    }
    .team-role {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: hsl(var(--muted));
      margin-bottom: 0.6rem;
    }
    .team-link {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: hsl(var(--almanac-cobalt));
      text-decoration: none;
      transition: opacity 220ms;
    }
    .team-link:hover { opacity: 0.7; }
    .team-link svg { width: 12px; height: 12px; fill: currentColor; }

    .time-saver { padding: 6rem 2rem; background: hsl(var(--bg-elevated)); border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
    .time-saver .container { max-width: 900px; margin: 0 auto; text-align: center; }
    .time-saver h2 {
      font-family: 'Newsreader', Georgia, serif;
      font-size: clamp(2rem, 4.4vw, 3.2rem);
      letter-spacing: -0.015em;
      color: hsl(var(--fg));
      margin: 1.25rem 0 1.75rem;
      font-weight: 400;
      line-height: 1.05;
    }
    .time-saver h2 em { font-style: italic; color: hsl(var(--almanac-cherry)); }
    .time-saver-lead {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 17px; line-height: 1.7;
      color: hsl(var(--fg) / 0.85);
      max-width: 56ch;
      margin: 0 auto 1.25rem;
    }
    .time-saver-lead strong { color: hsl(var(--fg)); font-weight: 400; }
    .time-saver-lead em { font-style: italic; color: hsl(var(--almanac-cobalt)); }
    .time-saver-stats {
      display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center; gap: 0;
      margin-top: 3rem;
      padding-top: 2.5rem;
      border-top: 1px solid hsl(var(--border));
    }
    .time-saver-stat { padding: 0 1rem; }
    .time-saver-stat--divider {
      width: 1px; height: 60px;
      background: linear-gradient(to bottom, transparent, hsl(var(--almanac-cobalt) / 0.4), transparent);
    }
    .time-saver-stat-figure {
      font-family: 'Newsreader', Georgia, serif;
      font-feature-settings: "lnum","tnum";
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1; color: hsl(var(--fg));
      margin-bottom: 0.5rem;
    }
    .time-saver-stat-label {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 12px; color: hsl(var(--muted));
      line-height: 1.5;
    }
    .modal-overlay {
      position: fixed; inset: 0;
      background: hsl(var(--fg) / 0.4);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      z-index: 200;
      opacity: 0;
      transition: opacity 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }
    .modal-overlay.open { opacity: 1; }
    .modal-overlay[hidden] { display: none; }

    .modal {
      width: min(90vw, 480px);
      background: hsl(var(--bg));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
      padding: 2rem 1.75rem 1.75rem;
      position: relative;
      transform: translateY(20px);
      transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
      box-shadow: 0 24px 80px hsl(225 30% 4% / 0.18);
    }
    .modal-overlay.open .modal { transform: translateY(0); }

    .modal-close {
      position: absolute; top: 14px; right: 14px;
      width: 28px; height: 28px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      color: hsl(var(--muted));
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 220ms, color 220ms;
    }
    .modal-close:hover { border-color: hsl(var(--border-strong) / 0.6); color: hsl(var(--fg)); }
    .modal-close svg { stroke: currentColor; fill: none; }

    .modal h3 {
      font-family: 'Newsreader', Georgia, serif;
      font-size: 26px;
      letter-spacing: -0.01em;
      color: hsl(var(--fg));
      margin-bottom: 0.5rem;
      font-weight: 400;
    }
    .modal-sub {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 14px;
      color: hsl(var(--fg) / 0.75);
      margin-bottom: 1.5rem;
    }
    .form-field {
      display: flex; flex-direction: column;
      margin-bottom: 1rem;
    }
    .form-field label {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.16em;
      color: hsl(var(--muted));
      margin-bottom: 0.4rem;
    }
    .form-field input, .form-field textarea {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 14px; color: hsl(var(--fg));
      padding: 0.65rem 0.85rem;
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
      transition: border-color 220ms;
    }
    .form-field textarea { min-height: 90px; resize: vertical; }
    .form-field input:focus, .form-field textarea:focus {
      outline: none;
      border-color: hsl(var(--almanac-cobalt));
    }
    .form-submit { width: 100%; justify-content: center; margin-top: 0.5rem; }
    .form-submit:disabled { opacity: 0.5; cursor: progress; }
    .form-status {
      margin-top: 0.75rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px; color: hsl(var(--muted));
    }
    .form-status.error { color: hsl(var(--almanac-cherry)); }

    .form-success {
      text-align: center; padding: 1.5rem 0;
    }
    .form-success-icon {
      width: 48px; height: 48px;
      border: 1.5px solid hsl(var(--almanac-cobalt));
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem;
      color: hsl(var(--almanac-cobalt));
    }
    .form-success-icon svg { stroke: currentColor; fill: none; }
    .form-success h3 {
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: 22px;
      color: hsl(var(--fg));
      margin-bottom: 0.5rem;
      font-weight: 400;
    }
    .form-success p {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 14px; color: hsl(var(--fg) / 0.8);
    }

    /* ============================================================ */
    /* Section atmospheres — each band gets its own subtle texture   */
    /* so the page reads as a sequence of typographic plates, not    */
    /* a single flat surface. Each is implemented via ::before so    */
    /* sits below all content (z-index 0; children get z-index 1).   */
    /* ============================================================ */

    /* Demo bands: soft indigo + ochre wash behind the Mac/Slack window. */
    .demo-section { position: relative; isolation: isolate; }
    .demo-section::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 70% 55% at 50% 45%,
          hsl(var(--almanac-cobalt) / 0.055) 0%,
          transparent 70%),
        radial-gradient(ellipse 90% 50% at 30% 100%,
          hsl(var(--almanac-ochre) / 0.05) 0%,
          transparent 70%);
    }
    .demo-section > * { position: relative; z-index: 1; }

    /* Stats: ruled-ledger horizontals, every 32px, fades at edges. */
    .stats-section { position: relative; isolation: isolate; }
    .stats-section::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 31px,
        hsl(var(--almanac-cobalt) / 0.06) 32px,
        transparent 33px
      );
      mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    }
    .stats-section > * { position: relative; z-index: 1; }

    /* Problem: contour-line topography on a different pitch from the hero, */
    /* + a vermilion glow top-right where the devices sit.                  */
    .problem { position: relative; isolation: isolate; }
    .problem::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background-image: repeating-linear-gradient(
        18deg,
        transparent 0,
        transparent 67px,
        hsl(var(--almanac-cobalt) / 0.035) 68px,
        transparent 69px
      );
    }
    .problem::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse 50% 60% at 85% 50%,
        hsl(var(--almanac-cherry) / 0.06) 0%,
        transparent 70%);
    }
    .problem > * { position: relative; z-index: 1; }

    /* Solution: a stronger band — slight ink bleed at top/bottom edges, */
    /* plus a faint vertical cobalt rule down the center as a column.   */
    .solution { position: relative; isolation: isolate; }
    .solution::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        linear-gradient(to bottom,
          hsl(var(--almanac-cobalt) / 0.05) 0%,
          transparent 12%,
          transparent 88%,
          hsl(var(--almanac-cobalt) / 0.05) 100%),
        linear-gradient(90deg,
          transparent calc(50% - 0.5px),
          hsl(var(--almanac-cobalt) / 0.04) 50%,
          transparent calc(50% + 0.5px));
    }
    .solution > * { position: relative; z-index: 1; }

    /* Blog: faint vertical newsprint column rules at 1/3 and 2/3 width. */
    .blog { position: relative; isolation: isolate; }
    .blog::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        linear-gradient(90deg,
          transparent calc(33.33% - 0.5px),
          hsl(var(--almanac-cobalt) / 0.05) 33.33%,
          transparent calc(33.33% + 0.5px)),
        linear-gradient(90deg,
          transparent calc(66.66% - 0.5px),
          hsl(var(--almanac-cobalt) / 0.05) 66.66%,
          transparent calc(66.66% + 0.5px));
      mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .blog > * { position: relative; z-index: 1; }

    /* Footer CTAs: printer's vignette — center radial halo. */
    .footer-cta { position: relative; isolation: isolate; }
    .footer-cta::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 50% 70% at 50% 50%,
          hsl(var(--almanac-cobalt) / 0.06) 0%,
          transparent 65%),
        radial-gradient(ellipse 30% 30% at 50% 35%,
          hsl(var(--almanac-cherry) / 0.05) 0%,
          transparent 70%);
    }
    .footer-cta > * { position: relative; z-index: 1; }

    /* Time-saver (consumer): tighter ledger lines, denser texture, */
    /* + an ochre wash at the bottom edge to differentiate it from   */
    /* the retailer solution band.                                   */
    .time-saver { position: relative; isolation: isolate; }
    .time-saver::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 23px,
        hsl(var(--almanac-cobalt) / 0.04) 24px,
        transparent 25px
      );
    }
    .time-saver::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse 60% 40% at 50% 100%,
        hsl(var(--almanac-ochre) / 0.07) 0%,
        transparent 70%);
    }
    .time-saver > * { position: relative; z-index: 1; }


    /* ============================================================ */
    /* Article page — long-form editorial reading layout            */
    /* ============================================================ */

    .article {
      max-width: 720px;
      margin: 0 auto;
      padding: 5rem 2rem 4rem;
    }

    .article-back {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; letter-spacing: 0.18em;
      text-transform: uppercase;
      color: hsl(var(--almanac-cobalt));
      text-decoration: none;
      margin-bottom: 3rem;
      transition: opacity 220ms;
    }
    .article-back:hover { opacity: 0.7; }
    .article-back svg { width: 12px; height: 12px; transition: transform 220ms; }
    .article-back:hover svg { transform: translateX(-2px); }

    .article-header {
      margin-bottom: 2.5rem;
    }
    .article-kicker {
      display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 11px; font-weight: 400;
      text-transform: uppercase; letter-spacing: 0.22em;
      color: hsl(var(--almanac-cobalt));
      margin-bottom: 1.5rem;
    }
    .article-kicker .sep {
      width: 4px; height: 4px; border-radius: 50%;
      background: hsl(var(--almanac-cobalt) / 0.5);
    }
    .article-kicker .meta {
      color: hsl(var(--muted));
      letter-spacing: 0.16em;
    }

    .article-title {
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 96;
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      letter-spacing: -0.03em;
      line-height: 1.02;
      color: hsl(var(--fg));
      font-weight: 400;
      margin-bottom: 1.25rem;
      text-wrap: balance;
    }

    .article-dek {
      font-family: 'Fraunces', Georgia, serif;
      font-variation-settings: "opsz" 36;
      font-size: 21px;
      line-height: 1.45;
      color: hsl(var(--fg) / 0.78);
      margin-bottom: 2rem;
      text-wrap: pretty;
    }

    .article-byline {
      display: flex; align-items: center; gap: 0.75rem;
      padding-top: 1.5rem;
      border-top: 1px solid hsl(var(--border));
    }
    .article-byline .avatar {
      width: 28px; height: 28px;
      background: hsl(var(--almanac-cobalt));
      color: hsl(var(--almanac-paper));
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Syne', system-ui, sans-serif;
      font-weight: 600; font-size: 11px;
    }
    .article-byline .who {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: 13px;
      color: hsl(var(--fg) / 0.85);
    }
    .article-byline .who strong {
      color: hsl(var(--fg));
      font-weight: 500;
    }

    /* Body reuses prose-reading for paragraphs, plus structured elements */
    .article-body { font-family: 'Fraunces', Georgia, serif; color: hsl(var(--fg)); }
    .article-body > * + * { margin-top: 1.5rem; }
    .article-body p {
      font-size: 18px; line-height: 1.7;
      color: hsl(var(--fg) / 0.92);
      font-feature-settings: "onum", "kern", "calt";
      text-wrap: pretty;
    }
    .article-body em { font-style: italic; color: hsl(var(--almanac-cobalt)); }
    .article-body strong { color: hsl(var(--fg)); font-weight: 500; }
    .article-body a {
      color: hsl(var(--almanac-cobalt));
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .article-body a:hover { opacity: 0.7; }

    .article-body h2 {
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 72;
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      letter-spacing: -0.025em;
      color: hsl(var(--fg));
      font-weight: 400;
      line-height: 1.1;
      margin-top: 3rem;
      text-wrap: balance;
    }
    .article-body h3 {
      font-family: 'Newsreader', Georgia, serif;
      font-variation-settings: "opsz" 36;
      font-size: 1.35rem;
      letter-spacing: -0.015em;
      color: hsl(var(--fg));
      font-weight: 500;
      line-height: 1.2;
      margin-top: 2.5rem;
    }

    .article-body ul, .article-body ol {
      padding-left: 1.5rem;
      font-size: 18px;
      line-height: 1.7;
      color: hsl(var(--fg) / 0.92);
    }
    .article-body ul { list-style: none; }
    .article-body ul li { position: relative; padding-left: 0.5rem; margin-bottom: 0.6rem; }
    .article-body ul li::before {
      content: ''; position: absolute;
      left: -0.85rem; top: 0.6em;
      width: 5px; height: 5px; border-radius: 50%;
      background: hsl(var(--almanac-cherry));
    }
    .article-body ol li { margin-bottom: 0.6rem; padding-left: 0.25rem; }
    .article-body ol { list-style: decimal; list-style-position: outside; }
    .article-body ol li::marker {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      color: hsl(var(--almanac-cobalt));
      font-size: 14px;
    }

    .article-body blockquote {
      border-left: 2px solid hsl(var(--almanac-cobalt));
      padding: 0.5rem 0 0.5rem 1.5rem;
      margin-left: 0;
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-variation-settings: "opsz" 36;
      font-size: 22px;
      line-height: 1.4;
      color: hsl(var(--fg));
      text-wrap: balance;
    }
    .article-body blockquote cite {
      display: block; margin-top: 0.6rem;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-style: normal; font-size: 11px;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: hsl(var(--muted));
    }

    .article-body figure { margin: 2.5rem 0; }
    .article-body figure img,
    .article-body img.standalone {
      width: 100%; height: auto;
      border: 1px solid hsl(var(--border));
      border-radius: 4px;
      display: block;
    }
    .article-body figcaption {
      margin-top: 0.75rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: hsl(var(--muted));
      text-align: center;
    }

    .article-body code {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.9em;
      background: hsl(var(--bg-elevated));
      border: 1px solid hsl(var(--border));
      padding: 1px 6px;
      border-radius: 3px;
    }

    .article-body hr {
      border: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, hsl(var(--almanac-cobalt) / 0.4), transparent);
      margin: 3rem auto;
      width: 40%;
    }

    /* Drop cap for the first paragraph of the body */
    .article-body > p:first-of-type::first-letter {
      font-family: 'Newsreader', Georgia, serif;
      font-weight: 500;
      font-size: 3.4em;
      line-height: 0.85;
      float: left;
      padding: 0.15em 0.12em 0 0;
      font-variation-settings: "opsz" 144;
      color: hsl(var(--fg));
    }

    .article-end {
      display: flex; align-items: center; justify-content: center;
      gap: 1rem;
      margin: 3rem 0;
      color: hsl(var(--almanac-cherry));
      font-family: 'Newsreader', Georgia, serif;
      font-style: italic;
      font-size: 18px;
    }
    .article-end::before, .article-end::after {
      content: ''; height: 1px; flex: 1;
      background: linear-gradient(to right, transparent, hsl(var(--border-strong) / 0.5), transparent);
    }

    /* Article sources — footnote-style list at the end of each article */
    .article-sources {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid hsl(var(--border));
    }
    .article-sources h3 {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      text-transform: uppercase;
      font-size: 10.5px;
      letter-spacing: 0.22em;
      color: hsl(var(--almanac-cobalt));
      margin-bottom: 1.25rem;
      font-weight: 400;
    }
    .article-sources ol {
      list-style: decimal;
      padding-left: 1.5rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 11.5px;
      line-height: 1.6;
      color: hsl(var(--muted));
    }
    .article-sources ol li {
      margin-bottom: 0.5rem;
      padding-left: 0.25rem;
    }
    .article-sources ol li::marker {
      color: hsl(var(--almanac-cobalt) / 0.6);
    }
    .article-sources a {
      color: hsl(var(--almanac-cobalt));
      text-decoration: none;
      border-bottom: 1px solid hsl(var(--almanac-cobalt) / 0.3);
    }
    .article-sources a:hover {
      border-bottom-color: hsl(var(--almanac-cobalt));
    }
    .article-sources cite {
      color: hsl(var(--fg) / 0.85);
      font-style: normal;
    }

    /* ============================================================ */
    /* Responsive — mobile / tablet fixes                            */
    /* ============================================================ */

    @media (max-width: 900px) {
      /* Nav: tighten horizontal padding */
      nav.site-nav { padding: 0.85rem 1.25rem; }
      .nav-inner { gap: 0.75rem; }

      /* Hero: tighter spacing */
      .hero { padding: 3rem 1.25rem 4rem; min-height: auto; }
      .hero-content { max-width: 100%; }
      .hero-rule-wrap { margin: 3rem auto 0; }

      /* Section padding everywhere */
      .features { padding: 4rem 1.25rem; }
      .problem { padding: 4rem 1.25rem; }
      .solution { padding: 4rem 1.25rem; }
      .team { padding: 4rem 1.25rem; }
      .blog { padding: 4rem 1.25rem; }
      .footer-cta { padding: 4rem 1.25rem; }
      .stats-section { padding: 3rem 1.25rem 4rem; }
      .time-saver { padding: 4rem 1.25rem; }
      .demo-section { padding: 0 1.25rem 4rem; }

      /* Two-column grids: stack */
      .problem-grid { grid-template-columns: 1fr; gap: 3rem; }
      .solution-grid { grid-template-columns: 1fr; gap: 3rem; }

      /* Stats row: stack vertically with hairline dividers between rows */
      .stats-row { grid-template-columns: 1fr; }
      .stat-item { padding: 1.5rem 1rem; }
      .stat-item:not(:last-child)::after { display: none; }
      .stat-item:not(:last-child) { border-bottom: 1px solid hsl(var(--border)); }

      /* Time-saver stats grid: stack */
      .time-saver-stats { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2rem; margin-top: 2rem; }
      .time-saver-stat--divider { display: none; }
    }

    @media (max-width: 720px) {
      /* Body offset for the shorter mobile nav */
      body { padding-top: 76px; }

      /* Hero: smaller broadsheet, allow wrap on agentic commerce */
      .hero h1 {
        font-size: clamp(2.2rem, 8.5vw, 3.4rem);
        letter-spacing: -0.025em;
      }
      .hero h1 em { white-space: normal !important; }
      .hero-sub { font-size: 16px; max-width: 100%; margin-bottom: 2.25rem; }
      .hero-cta-group { flex-direction: column; gap: 0.9rem; width: 100%; }
      .hero-cta-group .btn-primary,
      .hero-cta-group .btn-underline {
        width: 100%;
        justify-content: center;
      }
      .btn-underline { padding: 0.85rem 0; }

      /* Section h2s — bring them down a step */
      .problem h2,
      .solution h2,
      .team-header h2,
      .time-saver h2 { font-size: clamp(1.8rem, 5.5vw, 2.4rem); }
      .footer-cta h2 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
      .stats-headline { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 2.5rem; max-width: 100%; }
      .stat-number { font-size: clamp(2.8rem, 8vw, 3.6rem); }
      .blog h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
      .features-header h3 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }

      /* Chat demo: hide sidebar, take full width, scale chrome down */
      .chat-container { height: auto; min-height: 360px; }
      .chat-sidebar { display: none; }
      .chat-body { padding: 14px 16px; min-height: 280px; }
      .chat-topbar { padding: 8px 14px; }
      .chat-input-bar { padding: 8px 12px 10px; }
      .chat-product-card { flex-direction: column; gap: 12px; padding: 12px; }
      .chat-product-card .product-image { width: 100%; height: 200px; }
      .product-top-row { flex-direction: column; gap: 4px; }
      .product-price { font-size: 1rem; }
      .product-actions { flex-wrap: wrap; gap: 0.75rem; }
      .powered-by-clinchr { font-size: 9px; }

      /* 3D devices: stop being absolute-positioned + rotated, scale down */
      .devices-demo {
        height: auto;
        perspective: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 0;
      }
      .device-tablet, .device-phone {
        position: static;
        transform: none;
      }
      .tablet-body {
        width: min(300px, 100%);
        height: 360px;
        box-shadow: 0 6px 16px hsl(225 30% 4% / 0.12);
      }
      .phone-body {
        width: 200px;
        height: 360px;
        box-shadow: 0 6px 16px hsl(225 30% 4% / 0.12);
      }
      /* Drop the directional-light pseudo-elements at mobile — they assume rotation */
      .tablet-body::before, .tablet-body::after,
      .phone-body::before, .phone-body::after { display: none; }

      /* Flow nodes: tighten */
      .flow-node { min-width: 180px; padding: 0.75rem 1rem; }
      .flow-node__label { font-size: 12px; }
      .flow-line { height: 24px; }

      /* Features strip — already collapses, just clean spacing */
      .feature-item { padding: 1.5rem 1.25rem; }
      .feature-label { font-size: 19px; }

      /* Team header + portraits already collapse via existing grid rules; lighten name */
      .team-name { font-size: 17px; }

      /* Blog cards */
      .blog-card h3 { font-size: 20px; }
      .blog-card-body { padding: 1rem 1.25rem 1.25rem; }
      .blog-section-bar { gap: 0.75rem; }
      .blog-section-bar-label,
      .blog-section-bar-link { font-size: 10px; }

      /* Pull quote */
      .almanac-pullquote { font-size: clamp(1.3rem, 4.5vw, 1.7rem); padding: 1rem 0 1rem 1rem; }

      /* Article pages */
      .article { padding: 3rem 1.25rem 3rem; }
      .article-back { margin-bottom: 2rem; }
      .article-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
      .article-dek { font-size: 17px; }
      .article-body p { font-size: 16px; line-height: 1.6; }
      .article-body h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-top: 2.25rem; }
      .article-body h3 { font-size: 1.15rem; margin-top: 2rem; }
      .article-body blockquote { font-size: 18px; padding: 0.5rem 0 0.5rem 1rem; }
      .article-body ul, .article-body ol { font-size: 16px; }
      .article-body > p:first-of-type::first-letter { font-size: 3em; }
      .article-sources ol { font-size: 11px; padding-left: 1.25rem; }

      /* Modal: full-width on mobile */
      .modal { padding: 1.5rem 1.25rem 1.25rem; }
      .modal h3 { font-size: 22px; }
      .form-field input, .form-field textarea { font-size: 16px; } /* prevent iOS auto-zoom */
    }

    @media (max-width: 420px) {
      /* Ultra-narrow phones */
      nav.site-nav { padding: 0.7rem 1rem; gap: 0.5rem; }
      .nav-logo .wordmark { font-size: 1rem; }
      .nav-cta { font-size: 10px; padding: 0.45rem 0.75rem; letter-spacing: 0.12em; }
      .nav-cta--ghost { padding: 0.45rem 0.5rem; }
      .nav-cta svg { width: 10px; height: 10px; }

      .hero h1 { font-size: clamp(1.9rem, 9vw, 2.8rem); }
      .article-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
      .article-dek { font-size: 16px; }

      /* Hide the longer "Sign in" CTA on very narrow screens to give the primary one room */
      .nav-actions .nav-cta--ghost { display: none; }
    }