/* ── Solution LP shared styles ── */
  .sol-hero { padding: 96px 0 80px; }
  .sol-hero .crumbs { font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 28px; }
  .sol-hero .crumbs a { color: var(--ink-3); text-decoration: none; }
  .sol-hero .crumbs .now { color: var(--loop-color, var(--accent)); }
  .sol-hero .grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
  .sol-hero .num {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--loop-color, var(--accent)); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  }
  .sol-hero .num::before {
    content: ""; width: 40px; height: 1px; background: var(--loop-color, var(--accent));
  }
  .sol-hero h1 {
    font-size: clamp(48px, 6.5vw, 96px); line-height: 0.96; letter-spacing: -0.04em;
    font-weight: 500; margin: 0 0 24px; max-width: 14ch;
    overflow-wrap: break-word; word-wrap: break-word;
  }
  .sol-hero h1 em { color: var(--loop-color, var(--accent)); font-style: italic; font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; font-weight: 400; }
  .sol-hero .question {
    font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    font-style: italic;
    font-size: clamp(22px, 2.2vw, 32px);
    color: var(--ink-2); margin: 0 0 24px; max-width: 28ch; line-height: 1.25;
  }
  .sol-hero .question::before { content: "\201C"; color: var(--ink-3); }
  .sol-hero .question::after { content: "\201D"; color: var(--ink-3); }
  .sol-hero .lead { font-size: 18px; color: var(--ink-2); max-width: 48ch; line-height: 1.55; margin: 0 0 32px; }
  .sol-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

  .sol-hero .stats {
    display: grid; gap: 18px; padding: 32px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3);
    box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--loop-color, var(--accent)) 30%, transparent);
  }
  .sol-hero .stats .row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .sol-hero .stats .row:last-child { border-bottom: none; padding-bottom: 0; }
  .sol-hero .stats .k { font-size: 13px; color: var(--ink-2); max-width: 20ch; line-height: 1.35; }
  .sol-hero .stats .v { font: 700 28px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--loop-color, var(--accent)); white-space: nowrap; }
  [data-theme="dark"] .sol-hero .stats .v { color: var(--loop-bright, var(--loop-color)); }

  /* Loop UI strip — 2x2 visual mockup grid sitting between hero and modules */
  .loop-ui { padding: 80px 0; background: var(--bg-2); border-block: 1px solid var(--rule); }
  .loop-ui .head { margin-bottom: 40px; max-width: 60ch; }
  .loop-ui h2 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; margin: 16px 0 12px; max-width: 22ch; color: var(--ink); }
  .loop-ui h2 em { color: var(--loop-color, var(--accent)); font-style: italic; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
  [data-theme="dark"] .loop-ui h2 em { color: var(--loop-bright, var(--loop-color)); }
  .loop-ui .lead { font-size: 16px; color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
  .loop-ui .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ui-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: 28px; display: grid; grid-template-columns: 1fr; gap: 16px; text-decoration: none; color: inherit; transition: border-color .15s var(--ease), transform .15s var(--ease); }
  .ui-card:hover { border-color: var(--loop-color, var(--accent)); transform: translateY(-2px); }
  .ui-card .ui-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .ui-card .ui-h .num { font: 500 11px/1 var(--font-mono); color: var(--loop-color, var(--accent)); letter-spacing: .12em; text-transform: uppercase; }
  [data-theme="dark"] .ui-card .ui-h .num { color: var(--loop-bright, var(--loop-color)); }
  .ui-card .ui-h .arrow { font: 500 12px/1 var(--font-mono); color: var(--ink-3); transition: color .15s var(--ease); }
  .ui-card:hover .ui-h .arrow { color: var(--loop-color, var(--accent)); }
  .ui-card h3 { font-size: 18px; font-weight: 500; letter-spacing: -.01em; margin: 0; line-height: 1.3; }
  .ui-card .vis {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    padding: 16px;
    color: var(--ink);
    display: flex; flex-direction: column; gap: 14px;
  }
  /* Top header — endpoint label + status badge */
  .ui-card .vis .v-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .ui-card .vis .v-head .endpoint { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-2); }
  .ui-card .vis .v-head .endpoint b { color: var(--ink); font-weight: 500; }
  .ui-card .vis .v-head .badge { font: 500 10px/1 var(--font-mono); padding: 4px 8px; border-radius: 999px; background: var(--bg-2); color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
  .ui-card .vis .v-head .badge.ok { background: #4A9E6A22; color: #2D5C3F; }
  [data-theme="dark"] .ui-card .vis .v-head .badge.ok { color: #8FCBA1; }
  .ui-card .vis .v-head .badge.warn { background: #C9922A22; color: #6B4E18; }
  [data-theme="dark"] .ui-card .vis .v-head .badge.warn { color: #E8C97A; }
  .ui-card .vis .v-head .badge.crit { background: #C9737322; color: #C97373; }
  /* Featured big number / line */
  .ui-card .vis .acct { font: 500 11px/1.4 var(--font-mono); color: var(--ink-3); }
  .ui-card .vis .big { font: 700 30px/1 var(--font-mono); letter-spacing: -.025em; color: var(--ink); }
  .ui-card .vis .big small { font: 500 12px/1 var(--font); color: var(--ink-3); margin-left: 6px; font-weight: 400; }
  /* Three-stat row — mini cells */
  .ui-card .vis .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ui-card .vis .row3 .c { padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--rule); border-radius: var(--r-1); }
  .ui-card .vis .row3 .c .k { font: 500 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
  .ui-card .vis .row3 .c .v { font: 500 14px/1 var(--font-mono); color: var(--ink); }
  .ui-card .vis .row3 .c.acc .v { color: var(--loop-color, var(--accent)); }
  [data-theme="dark"] .ui-card .vis .row3 .c.acc .v { color: var(--loop-bright, var(--loop-color)); }
  .ui-card .vis .row3 .c.warn .v { color: #C97373; }
  /* SVG charts */
  .ui-card .vis svg { width: 100%; height: 64px; display: block; }
  /* Footer progress strip — 4 segments with labels */
  .ui-card .vis .progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ui-card .vis .progress .step { height: 4px; background: var(--bg-2); border-radius: 999px; }
  .ui-card .vis .progress .step.on { background: var(--loop-color, var(--accent)); }
  [data-theme="dark"] .ui-card .vis .progress .step.on { background: var(--loop-bright, var(--loop-color)); }
  .ui-card .vis .progress .step.now { background: linear-gradient(to right, var(--loop-color, var(--accent)) 60%, var(--bg-2) 60%); }
  [data-theme="dark"] .ui-card .vis .progress .step.now { background: linear-gradient(to right, var(--loop-bright, var(--loop-color)) 60%, var(--bg-2) 60%); }
  .ui-card .vis .step-labels { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; font: 500 9px/1 var(--font-mono); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
  /* Row list (kept for compatibility with previous structure) */
  .ui-card .vis .row { display: grid; gap: 5px; }
  .ui-card .vis .row .item { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule); font: 500 11px/1.4 var(--font-mono); color: var(--ink-2); align-items: center; }
  .ui-card .vis .row .item:last-child { border-bottom: none; }
  .ui-card .vis .row .item b { color: var(--ink); font-weight: 500; }
  .ui-card .vis .h { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .ui-card .vis .bar { position: relative; height: 14px; background: var(--bg-2); border-radius: var(--r-1); overflow: hidden; }
  .ui-card .vis .bar > div { height: 100%; background: var(--loop-color, var(--accent)); }
  [data-theme="dark"] .ui-card .vis .bar > div { background: var(--loop-bright, var(--loop-color)); }

  @media (max-width: 800px) { .loop-ui .grid2 { grid-template-columns: 1fr; } }

  /* Modules section */
  .modules-strip { padding: 96px 0; background: var(--bg-2); border-block: 1px solid var(--rule); }
  .modules-strip .head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; }
  .modules-strip h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.03em; font-weight: 500; margin: 16px 0 0; max-width: 14ch; }
  .modules-strip h2 em { color: var(--loop-color, var(--accent)); font-style: italic; }
  .modules-strip .head p { font-size: 18px; color: var(--ink-2); max-width: 50ch; margin: 0; line-height: 1.5; }

  .modules-strip .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mod-card {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3);
    padding: 36px; min-height: 280px;
    display: flex; flex-direction: column; justify-content: space-between;
    text-decoration: none; color: inherit;
    transition: all .25s var(--ease);
    position: relative; overflow: hidden;
  }
  .mod-card:hover { transform: translateY(-3px); border-color: var(--loop-color, var(--accent)); }
  .mod-card .hd { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 24px; }
  .mod-card .num { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--loop-color, var(--accent)); text-transform: uppercase; }
  .mod-card .arrow {
    width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--rule-strong);
    display: grid; place-items: center; transition: all .25s var(--ease);
  }
  .mod-card:hover .arrow { background: var(--loop-color, var(--accent)); border-color: var(--loop-color, var(--accent)); color: var(--accent-ink); transform: translate(2px,-2px); }
  .mod-card h3 { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 12px; }
  .mod-card p { font-size: 15px; color: var(--ink-2); margin: 0 0 24px; line-height: 1.5; }
  .mod-card .meta { display: flex; gap: 12px; flex-wrap: wrap; font: 500 11px/1 var(--font-mono); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
  .mod-card .meta span { padding: 5px 9px; background: var(--bg-2); border-radius: var(--r-pill); }

  /* Loop diagram — theme-aware */
  .loop-vis { padding: 96px 0; background: var(--bg-2); border-block: 1px solid var(--rule); }
  .loop-vis .head { margin-bottom: 56px; }
  .loop-vis h2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.0; letter-spacing: -0.03em; font-weight: 500; margin: 16px 0 0; max-width: 18ch; color: var(--ink); }
  .loop-vis h2 em { color: var(--loop-color, var(--accent)); font-style: italic; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
  [data-theme="dark"] .loop-vis h2 em { color: var(--loop-bright, var(--loop-color)); }
  .loop-vis .ring {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--surface);
    overflow: hidden;
  }
  .loop-vis .step {
    padding: 32px 24px; border-right: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 12px;
  }
  .loop-vis .step:last-child { border-right: none; }
  .loop-vis .step .lab { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--loop-color, var(--accent)); text-transform: uppercase; }
  [data-theme="dark"] .loop-vis .step .lab { color: var(--loop-bright, var(--loop-color)); }
  .loop-vis .step .name { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
  .loop-vis .step .desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

  /* Cross-loop */
  .cross { padding: 96px 0; }
  .cross .head { margin-bottom: 48px; }
  .cross h2 { font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; margin: 16px 0 0; max-width: 16ch; }
  .cross h2 em { color: var(--loop-color, var(--accent)); font-style: italic; }
  .cross .head p { font-size: 18px; color: var(--ink-2); max-width: 56ch; margin: 16px 0 0; line-height: 1.5; }
  .cross .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cross-card {
    padding: 32px; border: 1px solid var(--rule); border-radius: var(--r-3);
    background: var(--surface);
    text-decoration: none; color: inherit;
    transition: all .25s var(--ease);
    display: grid; gap: 12px; align-content: start; min-height: 200px;
  }
  .cross-card:hover { border-color: var(--loop-color, var(--accent)); transform: translateY(-2px); }
  .cross-card .lab { font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; }
  .cross-card h3 { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; margin: 0; }
  .cross-card .question { font-style: italic; font-family: "Instrument Serif", Georgia, serif; font-size: 18px; color: var(--ink-2); margin: 8px 0 0; }
  .cross-card .arrow { margin-top: auto; display: flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--loop-color, var(--accent)); }

  /* Final CTA — theme-aware with strong accent radial */
  .end-cta { padding: 120px 0; background: var(--bg-2); color: var(--ink); position: relative; overflow: hidden; border-block: 1px solid var(--rule); }
  .end-cta .inner { position: relative; max-width: 80ch; }
  .end-cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--loop-color, var(--accent)) 22%, transparent) 0%, transparent 60%);
    opacity: 0.6; pointer-events: none;
  }
  [data-theme="dark"] .end-cta::before {
    background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--loop-bright, var(--loop-color)) 30%, transparent) 0%, transparent 60%);
  }
  .end-cta h2 { font-size: clamp(48px, 7vw, 96px); line-height: 1.0; letter-spacing: -0.04em; font-weight: 500; margin: 0 0 24px; }
  .end-cta h2 em { font-style: italic; color: var(--loop-color, var(--accent)); font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
  [data-theme="dark"] .end-cta h2 em { color: var(--loop-bright, var(--loop-color)); }
  .end-cta p { font-size: 19px; color: var(--ink-2); max-width: 50ch; margin: 0 0 36px; line-height: 1.5; }
  .end-cta .row { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
  .end-cta .row .btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .end-cta .row .btn:hover { background: var(--loop-color, var(--accent)); color: #FAFAF7; border-color: var(--loop-color, var(--accent)); }
  [data-theme="dark"] .end-cta .row .btn:hover { background: var(--loop-bright, var(--loop-color)); border-color: var(--loop-bright, var(--loop-color)); color: #0E0E0C; }
  .end-cta .row .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
  .end-cta .row .btn-ghost:hover { background: var(--surface); }

  @media (max-width: 1000px) {
    .sol-hero .grid { grid-template-columns: 1fr; }
    .modules-strip .head, .modules-strip .grid, .cross .grid { grid-template-columns: 1fr; }
    .loop-vis .ring { grid-template-columns: 1fr 1fr; }
  }
  /* ── Loop signature visualization · added 2026-05-10 per audit ──
     One band-shaped SVG per loop page sits between .sol-hero and .loop-ui.
     Uses --loop-color (set by data-loop attr) for theme + page-specific accents. */
  .loop-signature {
    padding: 0 0 80px;
  }
  .loop-signature .frame {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: 36px 36px 28px;
    position: relative;
    overflow: hidden;
  }
  .loop-signature .frame::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--loop-color, var(--accent)) 8%, transparent) 0%, transparent 60%);
    pointer-events: none;
  }
  .loop-signature .lh {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    margin-bottom: 18px; position: relative; z-index: 1; flex-wrap: wrap;
  }
  .loop-signature .lh .tag {
    font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px;
  }
  .loop-signature .lh .tag .live {
    width: 7px; height: 7px; border-radius: 999px; background: var(--loop-color, var(--accent));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--loop-color, var(--accent)) 50%, transparent);
    animation: ls-pulse 1.8s ease-in-out infinite;
  }
  .loop-signature .lh .meta { font: 500 10px/1 var(--font-mono); color: var(--ink-3); letter-spacing: 0.06em; }
  @keyframes ls-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--loop-color, var(--accent)) 50%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--loop-color, var(--accent)) 0%, transparent); }
  }
  .loop-signature svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
  @media (prefers-reduced-motion: reduce) {
    .loop-signature svg .anim, .loop-signature .lh .live { animation: none !important; }
    .loop-signature svg animate, .loop-signature svg animateMotion, .loop-signature svg animateTransform { display: none; }
  }
  @media (max-width: 720px) {
    .loop-signature .frame { padding: 24px 18px 18px; }
  }