/* Locked state: blur + freeze the whole page, force the (non-dismissible) login
       popup on top, and hide the Cancel button and assistant widget. */
    html.rmt-locked .site-header,
    html.rmt-locked .page-body,
    html.rmt-locked #sidebar-toggle { filter: blur(4px); pointer-events: none; user-select: none; }
    html.rmt-locked #hedj-aa { display: none !important; }
    html.rmt-locked #loginModal { display: flex !important; }
    html.rmt-locked #loginCancelBtn { display: none !important; }
  

    :root{
      --green:#30B078; --green-3:#23925F; --orange:#E88830; --yellow:#F8C000;
      --bone:#FBF8F0; --bone-2:#F3EEE1; --paper:#FEFCF8; --lime-ink:#06231A;
      --ink:#111111; --text:#111111; --text-muted:#56544a; --text-soft:#8a877a;
      --line:rgba(17,17,17,0.14); --line-2:rgba(17,17,17,0.30);
      --disp:'Clash Display','Satoshi',sans-serif; --sans:'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif; --mono:'DM Mono',ui-monospace,Menlo,monospace;
      --radius:6px; --sh:6px 6px 0 var(--ink); --header-h:74px; --sidebar-w:290px;
      /* legacy aliases kept so any leftover references still resolve */
      --color-text:var(--ink); --color-text-secondary:var(--text-muted); --color-teal-primary:var(--green);
      --color-border:var(--line-2); --color-background:var(--bone); --color-surface:var(--bone-2);
    }
    /* ── dark-mode component fixes ── */
    [data-theme="dark"] .sidebar-item .icon{stroke:#4FD39C}
    [data-theme="dark"]{
      --bone:#0d1119; --bone-2:#0c101d; --paper:#020d18; --ink:#f5f5e8; --text:#edf2e0;
      --text-muted:#8FB7A1; --text-soft:#5E8772; --line:rgba(48,176,120,0.26); --line-2:rgba(48,176,120,0.42);
      --lime-ink:#06231A; --sh:6px 6px 0 var(--green);
      --color-text:var(--ink); --color-text-secondary:var(--text-muted); --color-teal-primary:var(--green);
      --color-border:var(--line-2); --color-background:var(--bone); --color-surface:var(--bone-2);
    }
    /* ── dark-mode component fixes ── */
    [data-theme="dark"] .tool-card{border:1px solid rgba(255,255,255,.08)}
    /* Card body text: muted cream in dark mode (dimmer than the cream titles),
       instead of the green --text-muted. Cards only. */
    [data-theme="dark"] .tool-card .tool-desc,
    [data-theme="dark"] .tool-card .tool-features li{color:#c7c0ad}
    [data-theme="dark"] .tool-badge{background:rgba(17,17,17,.06)}
    *{margin:0;padding:0;box-sizing:border-box}
    /* the shared chrome header is position:fixed (out of flow) — reserve
       space for it so page content doesn't render underneath it */
    body{font-family:var(--sans);background:var(--bone);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s;padding-top:var(--header-h)}
    a{color:inherit}

    /* ══ BUTTONS (used by CTA section) ══ */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:0 1.15em;height:2.7em;border:1.5px solid var(--ink);border-radius:var(--radius);font-family:var(--sans);font-size:.88rem;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .14s,box-shadow .14s,background .14s,color .14s}
    .btn svg{width:1.05em;height:1.05em;stroke-width:2.3}
    .btn-primary{background:var(--green);color:var(--lime-ink);border-color:var(--ink)}
    .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
    .btn-secondary{background:transparent;color:var(--ink)}
    .btn-secondary:hover{background:var(--ink);color:var(--bone)}
    .btn-lg{height:3em;padding:0 1.4em;font-size:.92rem}
    .btn-outline-white{background:transparent;color:var(--ink);border-color:var(--ink)}
    .btn-outline-white:hover{background:var(--ink);color:var(--bone)}

    /* ══ BODY LAYOUT ══ */
    /* The divider is drawn twice on purpose. The aside keeps its border-right, which
       covers the viewport-height run; this gradient continues the same 1px line down
       to the footer, which the border no longer reaches now that the aside is capped
       (see .sidebar below). The aside's background is opaque --bone, so it paints over
       the gradient in its own band — hence the border rather than the gradient alone.
       css/app.css does the gradient half of this on .page-wrapper for the other 27
       pages, where the shared aside is transparent and needs no border. */
    .page-body{display:flex;align-items:flex-start;
      background:linear-gradient(to right,
        transparent 0,
        transparent calc(var(--sidebar-w) - 1px),
        var(--line) calc(var(--sidebar-w) - 1px),
        var(--line) var(--sidebar-w),
        transparent var(--sidebar-w))}
    /* max-height is the load-bearing declaration: `align-self:stretch` resolves against
       the flex line, which is as tall as .main-column (the whole page). It is ignored
       while `height` is definite, but if the height ever fails to compute the aside
       stretches to page height, its content stops overflowing, overflow-y:auto has
       nothing left to scroll, and every tool below the fold becomes unreachable. */
    .sidebar{width:var(--sidebar-w);flex-shrink:0;position:sticky;top:var(--header-h,74px);height:calc(100vh - var(--header-h,74px));max-height:calc(100vh - var(--header-h,74px));overflow-y:auto;overscroll-behavior:contain;background:var(--bone);border-right:1px solid var(--line);padding:1.3rem .5rem 2rem;align-self:stretch}
    .sidebar-title{font-family:var(--mono);font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--text-soft);padding:0 1rem;margin-bottom:.7rem}
    .sidebar-menu{display:flex;flex-direction:column}
    .sidebar-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;margin:1px .3rem;border-radius:7px;text-decoration:none;color:var(--text-muted);font-size:.85rem;font-weight:500;white-space:nowrap;transition:background .12s,color .12s}
    .sidebar-item:hover{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--ink)}
    .sidebar-item.active{background:var(--green);color:#fff;font-weight:700;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--green) 60%,transparent)}
    .sidebar-item .icon{width:18px;height:18px;stroke:var(--green-3);stroke-width:1.8;fill:none;flex-shrink:0}
    .sidebar-item.active .icon{stroke:#fff!important}
    .sidebar-item-text{opacity:1}
    .beta-badge,.coming-soon-badge{font-family:var(--mono);font-size:.55rem;padding:.18em .45em;border-radius:3px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-left:auto;white-space:nowrap;flex-shrink:0;border:1px solid currentColor}
    .beta-badge{color:var(--green-3);background:color-mix(in srgb,var(--green) 14%,transparent);border-color:transparent}
    .coming-soon-badge{color:#fff;background:var(--orange);border-color:transparent;font-size:.5rem;padding:.18em .4em}
    .sidebar-divider{border:none;border-top:1px solid var(--line);margin:1rem 1rem}
    .sidebar-section-label{font-family:var(--mono);font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);padding:.55rem 1rem .35rem}
    .main-column{flex:1;min-width:0}

    /* ══ HERO (minimal: title + one line) ══ */
    .rm-hero{margin:clamp(1.6rem,2.6vw,2.4rem) clamp(20px,4vw,52px) 0;padding-bottom:clamp(1.3rem,2.4vw,1.8rem);border-bottom:1px solid var(--line)}
    .rm-hero__title{font-family:var(--disp);font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.05}
    .rm-hero__lead{margin-top:.55rem;font-size:.98rem;color:var(--text-muted);line-height:1.55;max-width:64ch}

    /* ══ TOOLS SECTION ══ */
    .tools-section{padding:clamp(1.5rem,2.6vw,2rem) clamp(20px,4vw,52px) 2.6rem;max-width:none}
    .sol-grp{scroll-margin-top:90px}

    /* ══ TOOL CARDS ══ */
    .tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.1rem;align-items:stretch}
    .tool-card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.6rem 1.6rem;box-shadow:0 2px 10px -4px rgba(17,17,17,.08);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
    .tool-card:not(.coming-soon):hover{transform:translateY(-4px);box-shadow:0 16px 32px -14px rgba(17,17,17,.2)}
    .tool-card.coming-soon{opacity:.62}
    .tool-card-header{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem}
    .tool-icon{width:2.6rem;height:2.6rem;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--green) 13%,transparent)}
    .tool-icon svg{width:1.25rem;height:1.25rem;stroke:var(--green-3);stroke-width:1.9;fill:none}
    .coming-soon .tool-icon{background:var(--cib)}
    .coming-soon .tool-icon svg{stroke:var(--cif)}
    .tool-title-block{display:flex;flex-direction:column;gap:.35rem}
    .tool-card-title{font-family:var(--disp);font-size:1.25rem;font-weight:600;color:var(--ink);line-height:1.1;letter-spacing:-.01em}
    .tool-badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.56rem;font-weight:500;padding:.24em .5em;border-radius:2px;letter-spacing:.1em;text-transform:uppercase;width:fit-content;background:none;border:1px solid currentColor;border-radius:100px}
    .badge-live{color:var(--green-3)}
    .badge-beta{color:#355a76}
    .badge-soon{color:#c25e12}
    .tool-desc{font-size:.92rem;color:var(--text-muted);line-height:1.55;margin-bottom:.9rem}
    .tool-card .tool-desc + .tool-desc{margin-top:-.4rem;font-size:.82rem}
    .tool-features{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.2rem;flex:1}
    .tool-features li{display:flex;align-items:flex-start;gap:.55rem;font-size:.83rem;color:var(--text-muted);line-height:1.4}
    .tool-features li:nth-child(n+4){display:none}
    .tool-features li::before{content:'\2713';color:var(--green-3);font-weight:800;font-size:.82rem;line-height:1.5;flex-shrink:0}
    .coming-soon .tool-features li::before{opacity:.85}
    .tool-launch{display:inline-flex;align-items:center;gap:.45em;font-family:var(--sans);font-weight:700;font-size:.83rem;text-decoration:none;color:#fff;background:var(--green);border:none;border-radius:10px;padding:.62em 1.1em;width:fit-content;cursor:pointer;transition:background .15s,transform .15s;margin-top:auto}
    .tool-launch:hover{background:var(--green-3);transform:translateY(-1px)}
    .tool-launch svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none}
    .tool-launch-disabled{display:inline-flex;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);cursor:default;margin-top:auto}

    /* ══ CTA ══ */
    .cta-section{background:var(--bone-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:clamp(2.4rem,5vw,4rem) clamp(20px,4vw,52px);text-align:center}
    .cta-section h2{font-family:var(--disp);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;color:var(--ink);margin-bottom:.8rem;letter-spacing:-.02em}
    .cta-section p{font-size:1.02rem;color:var(--text-muted);max-width:560px;margin:0 auto 1.6rem;line-height:1.6}
    .cta-buttons{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

    /* ══ RESPONSIVE ══ */
    @media (max-width:1100px){.tools-grid{grid-template-columns:1fr}}
    @media (max-width:900px){
      .sidebar{display:none}
    }

    /* ── SOLUTION GROUPS (Idea A, colour-coded, ghost numerals) ── */
    .sol-grp{margin-bottom:2.4rem}
    .sol-h{display:flex;align-items:center;gap:1rem;padding-bottom:.85rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
    .sol-meta{min-width:0}
    .sol-name{font-family:var(--disp);font-weight:600;font-size:1.45rem;letter-spacing:-.01em;line-height:1;color:var(--ink)}
    .sol-desc{font-family:var(--mono);font-size:.72rem;color:var(--text-muted);margin-top:.35rem;letter-spacing:.02em}
    .sol-count{margin-left:auto;font-family:var(--mono);font-size:.6rem;color:var(--text-soft);white-space:nowrap}
    .sol-grp .tool-card{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:1.15rem 1.2rem 1.25rem;box-shadow:0 2px 10px -5px rgba(17,17,17,.1);display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
    .sol-grp .tool-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px rgba(17,17,17,.2)}
    .sol-grp .tool-card-header{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}
    .sol-grp .tool-icon{width:2.4rem;height:2.4rem;flex-shrink:0;border:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--acc) 15%,transparent)}
    .sol-grp .tool-icon svg{width:1.15rem;height:1.15rem;stroke:var(--acc);stroke-width:1.9;fill:none}
    .sol-grp .tool-title-block{flex:1;min-width:0}
    .sol-grp .tool-card-title{font-family:var(--disp);font-weight:600;font-size:1.04rem;letter-spacing:-.01em;color:var(--ink);line-height:1.12}
    .sol-grp .tool-badge{font-family:var(--mono);font-size:.55rem;letter-spacing:.09em;text-transform:uppercase;border:1px solid currentColor;border-radius:100px;padding:.2em .55em;background:none;flex-shrink:0}
    .sol-grp .badge-beta,.sol-grp .badge-live{color:var(--green-3)}
    .sol-grp .badge-soon{color:#c25e12}
    .sol-grp .tool-desc{font-size:.82rem;color:var(--text-muted);line-height:1.45;flex:1;margin:0 0 .9rem}
    .sol-grp .tool-launch{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--acc);text-decoration:none;background:none;border:none;cursor:pointer;width:fit-content;margin-top:auto;display:inline-flex;align-items:center;gap:.4em}
    .sol-grp .tool-launch svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.6;fill:none}
    .sol-grp .tool-launch-disabled{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-top:auto;background:none;border:none;padding:0}