/* Fonts now loaded via a preconnect+preload in each tool page's , matching index.html's async pattern, instead of this blocking @import. Shared brand tokens (--bg, --line, --muted, --accent, --r/--rL, --max, etc.) now live in /assets/theme.css, linked before this file from the same s. --ink is deliberately NOT one of the shared tokens: theme.css defines --ink as near-black text-on-light-band (#0B0B0C), which is the opposite of what this file needs (white text on a permanently-dark page). This local override is intentional — see theme.css's header comment. All-light theme, 2026-08-10: index.html/micro-sap/blog have all dropped the dark theme for one uniform light look; this cascades the same conversion here rather than leaving tools as the one dark holdout. --ink now DOES match theme.css's near-black meaning again (the local override above is gone) — the historical collision this comment used to document no longer applies. --bg/--surface/--border/--muted are re-pointed at their light-band counterparts, same technique as e0059ec/blog's own conversion (custom properties resolve per-property, live). Literal (non-token) colors below — mostly rgba(255,255,255,X) overlays and solid #fff/#050505 button/surface pairs — are hand-fixed individually. */ :root{ --shadow:0 18px 60px rgba(17,17,17,.10), inset 0 1px 0 rgba(255,255,255,.6); --bg: var(--paper); --line: var(--inkLine); --lineH: var(--inkLineH); --muted: var(--ink2); --muted2: var(--ink3); /* Not consumed by any rule in this file (tools uses --line/--muted, its own historical names, for everything) but the shared site-footer.css — loaded on every page including these — reads --text/--text2/ --border/--surface/--surfaceH directly. Without these, the injected footer silently fell back to theme.css's base dark values (white text) on a now-light page, i.e. unreadable near-white-on-paper. */ --text: var(--ink); --text2: var(--ink2); --border: var(--inkLine); --borderH: var(--inkLineH); --surface: var(--paperCard); --surfaceH: var(--paperCardH); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} body{font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:500;background:radial-gradient(ellipse 76% 48% at 50% -10%,rgba(58,91,219,.10),transparent 62%),radial-gradient(circle at 12% 14%,rgba(61,158,245,.06),transparent 28%),var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh} a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%} body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(11,11,12,.025));z-index:-1} .site-head{position:sticky;top:0;z-index:100;background:rgba(247,246,243,.82);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(11,11,12,.08)} .site-head-inner{width:min(var(--max),calc(100% - 48px));margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;gap:24px} .site-brand{display:flex;align-items:center;gap:9px;line-height:1;flex-shrink:0;color:var(--ink)}.site-brand svg{width:24px;height:24px;flex:0 0 auto}.site-brand span{font-family:'Outfit',sans-serif;font-size:1.12rem;font-weight:300;letter-spacing:-.01em}.site-brand b{font-weight:800;letter-spacing:-.02em} .site-nav{display:flex;align-items:center;gap:22px;flex:1 1 auto;justify-content:center}.site-nav a{font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .15s}.site-nav a:hover,.site-nav a.active{color:var(--ink)} .site-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:var(--pill);background:var(--ink);color:var(--paper);font-size:.86rem;font-weight:900;white-space:nowrap;transition:opacity .15s,transform .15s,box-shadow .2s}.site-cta:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 8px 32px rgba(11,11,12,.16)} .page{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:24px 0 44px;position:relative;z-index:1} .hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;padding:32px 30px;margin-bottom:18px;background:radial-gradient(circle at 18% 0%,rgba(15,95,168,.10),transparent 33%),var(--paperCard);box-shadow:var(--shadow)} .hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(11,11,12,.035),transparent);transform:translateX(-120%);animation:aluToolsShine 7.5s ease-in-out infinite}.hero>*{position:relative}@keyframes aluToolsShine{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}} @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}} .kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 12px;border:1px solid rgba(11,11,12,.14);border-radius:var(--pill);background:rgba(11,11,12,.055);color:rgba(11,11,12,.72);font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(61,158,245,.7)} /* Family-resemblance pass 2026-08-06: same Instrument Serif italic accent word mechanism used on index.html/micro-sap/blog, one word per h1. No alternating light/dark bands here — these stay single-tone pages (light as of the 2026-08-10 all-light cascade), see DEPLOY_STANDARDIZE_FRONTEND_2026-08-06.md for the original scoping. */ .serif-accent{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-0.012em;} h1,h2,h3{font-family:'Sora',sans-serif;color:var(--ink);line-height:1.08;overflow-wrap:anywhere}h1{font-size:clamp(2.05rem,3.4vw,3.05rem);font-weight:800;letter-spacing:-.052em;line-height:1.04;max-width:940px;text-wrap:balance;margin:0 0 14px}h2{font-size:clamp(1.45rem,3vw,2.05rem);font-weight:800;letter-spacing:-.04em;margin:0 0 10px}h3{font-size:1.08rem;font-weight:800;letter-spacing:-.025em;margin:0 0 10px}p{color:var(--muted);overflow-wrap:anywhere}.hero p{font-size:1rem;line-height:1.75;max-width:790px;margin:0}.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.badge{display:inline-flex;align-items:center;border:1px solid var(--inkLine);background:rgba(11,11,12,.045);border-radius:var(--pill);padding:7px 10px;color:var(--ink2);font-size:.82rem;font-weight:700;line-height:1.2;white-space:normal} .grid{display:grid;gap:16px;grid-template-columns:1fr}.grid.two{align-items:start}.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.stack{display:grid;gap:12px}.card,.tool-card{background:var(--paperCard);border:1px solid var(--line);border-radius:var(--rL);box-shadow:var(--shadow);padding:24px;min-width:0;overflow:hidden;position:relative}.card::before,.tool-card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(61,158,245,.36),transparent);opacity:.65}.tool-card{display:block;transition:border-color .22s,background .22s,transform .22s}.tool-card:hover{border-color:var(--inkLineH);background:var(--paperCardH);transform:translateY(-3px)}.tool-card h2{font-size:1.1rem;line-height:1.15;margin-top:4px}.tool-card p,.card p{font-size:.92rem;line-height:1.72;color:var(--muted);margin:0 0 12px}.card.cta{border-color:rgba(15,95,168,.24);background:var(--accentInkL)} .fields{display:grid;gap:12px;grid-template-columns:1fr}.fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.field{min-width:0}.field label{display:block;color:var(--ink2);font-size:.83rem;font-weight:800;margin-bottom:6px}.hint,.field .hint{display:block;color:var(--muted);font-size:.76rem;line-height:1.55;margin-top:5px}input,select,textarea{width:100%;min-height:46px;border:1px solid var(--inkLine);border-radius:13px;background:#FFFFFF;color:var(--ink);padding:11px 12px;outline:none;min-width:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}select{color-scheme:light}textarea{min-height:120px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:rgba(15,95,168,.55);box-shadow:0 0 0 4px rgba(15,95,168,.13),inset 0 1px 0 rgba(255,255,255,.6)}input::placeholder,textarea::placeholder{color:rgba(11,11,12,.32)} .row-card{border:1px solid var(--inkLine);background:rgba(11,11,12,.025);border-radius:18px;padding:16px;transition:border-color .18s,background .18s}.row-card:hover{border-color:rgba(15,95,168,.26);background:rgba(11,11,12,.045)}.row-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.row-card-head strong{font-family:'Sora',sans-serif;font-size:.96rem;letter-spacing:-.015em;color:var(--ink)}.mini{display:inline-flex;align-items:center;border:1px solid rgba(15,95,168,.28);background:rgba(15,95,168,.10);border-radius:var(--pill);padding:5px 8px;color:var(--accentInk);font-size:.66rem;font-weight:900;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}.row-card p{font-size:.86rem;line-height:1.65;color:var(--muted);margin-bottom:12px} details{border:1px solid var(--inkLine);border-radius:18px;background:rgba(11,11,12,.025);overflow:hidden}details>summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:900;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}details>summary::-webkit-details-marker{display:none}details>summary::after{content:'+';font-size:1.2rem;color:var(--accentInk);font-weight:900}details[open]>summary::after{content:'–'}details .details-body{padding:0 16px 16px} .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}button,.btn{border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 16px;border-radius:var(--pill);font-weight:900;color:var(--paper);background:var(--ink);transition:transform .18s,opacity .18s,box-shadow .18s,border-color .18s}button:hover,.btn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 10px 34px rgba(11,11,12,.13)}button.secondary,.btn.secondary{background:transparent;color:var(--ink);border:1.5px solid rgba(11,11,12,.32)}button.secondary:hover,.btn.secondary:hover{border-color:rgba(11,11,12,.6);box-shadow:none}button.danger{background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.32);color:var(--badInk)}button.danger:hover{background:rgba(179,38,30,.14);box-shadow:none} .result-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.result-card{border:1px solid var(--inkLine);border-radius:18px;padding:15px;background:linear-gradient(180deg,#FFFFFF,var(--paperCardH));min-width:0}.result-card .label{display:block;color:var(--ink3);font-size:.70rem;font-weight:900;text-transform:uppercase;letter-spacing:.085em;line-height:1.35}.result-card .value{display:block;font-family:'Sora',sans-serif;font-size:clamp(1.25rem,3vw,1.85rem);font-weight:800;letter-spacing:-.055em;margin-top:5px;color:var(--ink);overflow-wrap:anywhere;line-height:1.05}.result-card .note,.note{display:block;margin-top:5px;color:var(--muted);font-size:.82rem;line-height:1.45}.good{color:var(--goodInk)!important}.warn{color:var(--warnInk)!important}.bad{color:var(--badInk)!important}.info{color:var(--infoInk)!important}.notice{border:1px solid rgba(15,95,168,.22);background:rgba(15,95,168,.08);color:var(--ink);border-radius:16px;padding:14px;font-size:.9rem;line-height:1.65;overflow-wrap:anywhere}.notice.warn{border-color:rgba(138,90,0,.26);background:rgba(138,90,0,.09);color:#5C3E00}.notice.bad{border-color:rgba(179,38,30,.26);background:rgba(179,38,30,.08);color:#7A1B16}.notice.good{border-color:rgba(15,122,69,.26);background:rgba(15,122,69,.08);color:#0B5C36}.progress{height:10px;border-radius:999px;background:rgba(11,11,12,.08);overflow:hidden;border:1px solid var(--inkLine)}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--accent));border-radius:inherit;transition:width .25s ease} .table-wrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:rgba(11,11,12,.02)}table{width:100%;min-width:760px;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}th{background:rgba(11,11,12,.04);color:var(--ink2);font-size:.70rem;text-transform:uppercase;letter-spacing:.08em}tr:last-child td{border-bottom:0} .footer{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:30px;padding-top:22px;color:var(--muted);font-size:.82rem}.footer img{width:28px;height:28px;border-radius:9px}.footer strong,.footer a{color:var(--ink)} .topbar,.nav{display:none!important} @media(min-width:920px){.grid.two{grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr)}} @media(max-width:980px){.cards-grid{grid-template-columns:1fr}} @media print{body{background:#fff;color:#111}.site-head,.actions,.footer{display:none!important}.page{width:100%;padding:0}.card,.hero,.tool-card,.row-card,.result-card{box-shadow:none;break-inside:avoid;border-color:#ddd;background:#fff;color:#111}h1,h2,h3,p,.field label,.result-card .value{color:#111}.muted,.hint,.note,.result-card .note{color:#555}a{text-decoration:none}input,select,textarea{background:#fff;color:#111;border-color:#ccc}} /* ─── Responsive ladder, consolidated 2026-08-10 ───────────────────── This used to be four separate, overlapping patch eras (2026-06-06, three rounds of 2026-06-09, 2026-08-06) redeclaring the same selectors at slightly different breakpoints (860/980 alongside 760/980/981) with no single source of truth per property. Between 961-980px specifically, the old 980px block kept the full text nav visible as a wrapping second row while a *separate* 960px block (below) hid it in favour of the hamburger — the two never agreed, so that 20px window rendered a nav neither pattern intended. This merges everything into one ladder (981 -> 760 -> 520 -> 380) with each property declared once, and drops the pre-hamburger 980px nav layout entirely so 960px (below) is the only place the nav switches to a hamburger, matching index.html/blog's single breakpoint. */ @media (min-width: 981px){ .page{padding:20px 0 38px;} .site-head-inner{height:60px;gap:20px;} .site-nav{gap:18px;} .site-nav a{font-size:.85rem;} .site-cta{min-height:42px;padding:0 20px;font-size:.84rem;} .hero{padding:24px 26px;margin-bottom:16px;border-radius:22px;} .kicker{font-size:.58rem;letter-spacing:.15em;margin-bottom:12px;padding:6px 10px;} h1{font-size:clamp(2.1rem,2.9vw,3.2rem);line-height:1.02;letter-spacing:-.045em;margin-bottom:10px;} h2{font-size:clamp(1.26rem,1.9vw,1.56rem);line-height:1.08;letter-spacing:-.035em;margin-bottom:8px;} h3{font-size:.98rem;letter-spacing:-.02em;margin-bottom:8px;} .hero p{font-size:.93rem;line-height:1.66;max-width:680px;} .badges{margin-top:14px;gap:7px;} .badge{font-size:.74rem;padding:6px 9px;} .grid{gap:14px;} .stack{gap:11px;} .card{padding:20px;border-radius:20px;} .card p{font-size:.87rem;line-height:1.64;margin-bottom:10px;} .card.cta h2{font-size:1.38rem;} .row-card{padding:13px 14px;border-radius:15px;} .row-card-head{gap:10px;margin-bottom:7px;} .row-card-head strong{font-size:.88rem;} .row-card p{font-size:.80rem;line-height:1.55;margin-bottom:10px;} .mini{font-size:.58rem;padding:4px 7px;letter-spacing:.07em;} .fields{gap:10px;} .fields.two{gap:10px;} .fields.three{gap:10px;} .field label{font-size:.75rem;margin-bottom:5px;} .hint,.field .hint{font-size:.69rem;line-height:1.42;margin-top:4px;} input,select,textarea{min-height:42px;border-radius:11px;padding:9px 10px;font-size:.82rem;} textarea{min-height:108px;} .actions{gap:7px;} button,.btn{min-height:40px;padding:9px 14px;font-size:.82rem;} .progress{height:8px;} th,td{padding:10px;font-size:.82rem;} th{font-size:.62rem;} .footer{margin-top:24px;padding-top:18px;font-size:.78rem;} } /* ─── Diagnostic calculator desktop reset 2026-06-09 ───────────────────── Fixes the cramped, bulky desktop calculator view by moving the process tools toward a compact dashboard rhythm while leaving mobile unchanged. --max:1160px override removed 2026-08-06: it made tools pages render 80px wider than every other page on the site (theme.css's --max:1080px), an inconsistency flagged in the UI/UX review. The compact-dashboard grid rules below are unaffected by container width and still apply. */ @media (min-width: 981px){ .page{padding-top:22px;} .hero{max-width:none;} .grid.two{grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start;} .grid.two > .card.stack:first-child{padding:18px;gap:9px;} .grid.two > .card.stack:first-child > h2{font-size:1.24rem;margin-bottom:2px;} .grid.two > .card.stack:first-child > p{font-size:.84rem;line-height:1.55;max-width:760px;margin-bottom:4px;} /* Process Leak Finder rows: card list -> compact desktop matrix */ .leak-row{display:grid;grid-template-columns:168px minmax(0,1fr);align-items:end;gap:12px;padding:10px 12px;border-radius:13px;background:rgba(11,11,12,.026);} .leak-row:hover{background:rgba(11,11,12,.045);} .leak-row .row-card-head{margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;min-width:0;} .leak-row .row-card-head strong{font-size:.80rem;line-height:1.18;letter-spacing:-.012em;} .leak-row .mini{display:none;} .leak-row .fields.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end;} .leak-row .field label{font-size:.64rem;line-height:1.18;margin-bottom:4px;color:var(--ink2);} .leak-row select{min-height:35px;border-radius:10px;padding:7px 9px;font-size:.76rem;background:#FFFFFF;} .grid.two > aside.stack{gap:10px;} .grid.two > aside .card{padding:18px;border-radius:19px;} .grid.two > aside .card h2{font-size:1.18rem;letter-spacing:-.032em;} .grid.two > aside .card h3{font-size:.96rem;} .grid.two > aside .card p{font-size:.82rem;line-height:1.55;} .grid.two > aside .card.cta h2{font-size:1.20rem;line-height:1.08;} .grid.two > aside .card.cta p{font-size:.82rem;} .result-grid{grid-template-columns:1fr 1fr;gap:8px;} .result-card{padding:11px;border-radius:13px;} .result-card .label{font-size:.58rem;letter-spacing:.075em;} .result-card .value{font-size:1.12rem;letter-spacing:-.04em;margin-top:4px;line-height:1.05;} .result-card .note,.note{font-size:.70rem;line-height:1.35;} .notice{font-size:.78rem;line-height:1.48;padding:10px 12px;border-radius:13px;} .grid.two > aside .actions{gap:6px;} .grid.two > aside button, .grid.two > aside .btn{min-height:38px;padding:8px 12px;font-size:.78rem;} /* Keep advanced assumptions from expanding into an oversized block. */ details>summary{padding:11px 12px;font-size:.80rem;} details .details-body{padding:0 12px 12px;} .grid.two > .card.stack:first-child details .fields.three{grid-template-columns:repeat(3,minmax(0,1fr));} .grid.two > .card.stack:first-child details input, .grid.two > .card.stack:first-child details select{min-height:38px;font-size:.78rem;} } @media (min-width: 981px) and (max-width: 1120px){ .grid.two{grid-template-columns:1fr;} .grid.two > aside.stack{grid-template-columns:1fr 1fr;display:grid;align-items:start;} .grid.two > aside.stack .card:first-child{grid-column:1 / -1;} } /* ─── Diagnostic-wide final standardisation 2026-06-09 ───────────────────── Applies the compact dashboard treatment to all diagnostic pages, not only Process Leak Finder, and restores the main-site hamburger pattern on mobile. */ .nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:transparent;border:0;border-radius:10px;padding:8px;color:var(--ink);flex:0 0 auto;box-shadow:none;min-height:40px;} .nav-hamburger:hover{background:rgba(11,11,12,.06);box-shadow:none;transform:none;opacity:1;} .nav-hamburger span{display:block;width:100%;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .22s ease;transform-origin:center;} .nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);} .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);} .nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);} .nav-drawer{display:none;position:fixed;top:60px;left:0;right:0;z-index:99;background:rgba(247,246,243,.98);border-bottom:1px solid var(--inkLine);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.22,1,.36,1);} .nav-drawer.open{max-height:620px;} .nav-drawer-inner{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:18px 0 24px;display:grid;gap:2px;} .nav-drawer a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 0;border-bottom:1px solid var(--inkLine);color:var(--ink2);font-size:1rem;font-weight:700;} .nav-drawer a.active,.nav-drawer a:hover{color:var(--ink);} .nav-drawer .drawer-cta{margin-top:12px;justify-content:center;border:0;border-radius:var(--pill);background:var(--ink);color:var(--paper);min-height:44px;padding:0 18px;font-weight:900;} body.nav-open{overflow:hidden;} .nav-scrim{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;background:rgba(0,0,0,0.55);z-index:98;opacity:0;pointer-events:none;transition:opacity .25s ease;} .nav-scrim.open{opacity:1;pointer-events:auto;} @media (min-width: 981px){ /* Owner Dependency: compact row matrix instead of large stacked cards. */ .owner-row{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr) minmax(190px,220px);align-items:center;gap:12px;padding:10px 12px;border-radius:13px;background:rgba(11,11,12,.026);} .owner-row:hover{background:rgba(11,11,12,.045);} .owner-row .row-card-head{margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;} .owner-row .row-card-head strong{font-size:.80rem;line-height:1.18;letter-spacing:-.012em;} .owner-row .mini{font-size:.55rem;padding:3px 6px;letter-spacing:.06em;opacity:.78;} .owner-row p{font-size:.76rem!important;line-height:1.35!important;margin:0!important;color:var(--ink3)!important;} .owner-row .field label{font-size:.62rem;line-height:1.18;margin-bottom:4px;color:var(--ink2);} .owner-row select{min-height:35px;border-radius:10px;padding:7px 9px;font-size:.76rem;background:#FFFFFF;} /* AI Readiness: denser, balanced form blocks with the same side-panel scale. */ .grid.two > .card.stack:first-child .fields.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 10px;} .grid.two > .card.stack:first-child .fields.two .field{padding:0;} .grid.two > .card.stack:first-child .fields.two label{font-size:.69rem;line-height:1.25;min-height:2.45em;color:var(--ink2);} .grid.two > .card.stack:first-child .fields.two select{min-height:36px;border-radius:10px;padding:7px 9px;font-size:.76rem;background:#FFFFFF;} .grid.two > .card.stack:first-child h2[style]{margin-top:8px!important;} /* Diagnostic home cards: same compact premium rhythm. */ .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .tool-card{padding:18px;border-radius:18px;} .tool-card .mini{font-size:.56rem;padding:4px 7px;} .tool-card h2{font-size:.95rem;line-height:1.14;margin:5px 0 7px;} .tool-card p{font-size:.82rem;line-height:1.55;margin-bottom:12px;} .tool-card .btn{min-height:38px;padding:8px 12px;font-size:.78rem;} } @media (min-width:981px) and (max-width:1180px){ .owner-row{grid-template-columns:minmax(140px,170px) minmax(0,1fr) minmax(175px,205px);} } @media (max-width: 960px){ .site-head{position:sticky;top:0;} .site-head-inner{height:60px!important;min-height:60px!important;padding:0!important;flex-wrap:nowrap!important;gap:12px!important;} .site-brand{order:1;} .site-nav,.site-cta{display:none!important;} .nav-hamburger{display:flex;order:2;margin-left:auto;} .nav-drawer{display:block;} .nav-drawer-inner{width:calc(100% - 32px);} .nav-scrim{display:block;} .page{padding-top:14px;} } @media (max-width: 760px){ .page,.site-head-inner{width:calc(100% - 28px)} .page{padding:14px 0 34px} .site-head{background:rgba(247,246,243,.9)} .hero{padding:22px 18px;border-radius:21px;margin-bottom:14px} .kicker{font-size:.56rem;letter-spacing:.15em;margin-bottom:12px;padding:6px 10px} h1{font-size:clamp(1.76rem,7.3vw,2.28rem);line-height:1.02;letter-spacing:-.046em;margin-bottom:12px} h2{font-size:clamp(1.32rem,5.7vw,1.68rem);line-height:1.08} h3{font-size:1rem} .hero p{font-size:.92rem;line-height:1.66} .fields.two,.fields.three,.result-grid{grid-template-columns:1fr} .row-card-head{flex-direction:column;align-items:flex-start} .grid{gap:12px} .badges{margin-top:15px;gap:7px} .badge{font-size:.73rem;padding:6px 9px} .card,.tool-card{padding:18px;border-radius:20px} .row-card{padding:14px;border-radius:16px} .actions button,.actions .btn{width:100%} .owner-row{display:block;} .owner-row p{font-size:.82rem;line-height:1.55;margin-bottom:10px;} .owner-row .mini{font-size:.58rem;padding:4px 7px;} .grid.two > .card.stack:first-child .fields.two label{min-height:0;} } @media (max-width: 520px){ .site-head-inner{width:calc(100% - 24px);gap:9px 10px} .site-brand span{font-size:1rem} .site-brand svg{width:22px;height:22px} .site-cta{min-height:36px;padding:0 14px;font-size:.76rem} .site-nav{gap:15px} .site-nav a{font-size:.76rem} .page{padding:16px 0 34px} .hero{padding:20px 17px} .card,.tool-card{padding:17px} .hero p,.card p,.tool-card p{font-size:.9rem} .footer{align-items:flex-start} .fields{gap:10px} .nav-drawer{top:60px} .nav-drawer-inner{padding-top:14px;padding-bottom:20px} .nav-drawer a{font-size:.95rem} .drawer-label{font-size:.64rem} .nav-drawer a.drawer-child{font-size:.84rem} } @media (max-width: 380px){ .page,.site-head-inner{width:calc(100% - 22px)} h1{font-size:1.72rem} .site-nav a{font-size:.74rem} } /* ─── Unified site/menu connection patch 2026-06-09 ───────────────────── One main navigation now owns the diagnostic section. The old diagnostic pill row has been replaced with a compact page context bar. */ .site-nav-group{position:relative;display:flex;align-items:center;min-height:60px;} .site-subnav{position:absolute;top:calc(100% - 6px);left:50%;transform:translateX(-50%) translateY(6px);width:250px;padding:8px;border:1px solid var(--inkLine);border-radius:18px;background:var(--paperCardH);box-shadow:0 18px 60px rgba(17,17,17,.14),inset 0 1px 0 rgba(255,255,255,.6);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:140;} .site-nav-group:hover .site-subnav,.site-nav-group:focus-within .site-subnav{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);} .site-subnav a{display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:12px;color:var(--ink2);font-size:.78rem;font-weight:800;white-space:normal;} .site-subnav a:hover,.site-subnav a.active{background:rgba(15,95,168,.12);color:var(--ink);} .drawer-block{display:grid;gap:0;padding:8px 0 10px;border-bottom:1px solid var(--inkLine);} .drawer-label{display:block;padding:8px 0 6px;color:var(--muted);font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;} .nav-drawer a.drawer-child{min-height:44px;padding:8px 0 8px 14px;border-bottom:0;color:var(--ink2);font-size:.90rem;position:relative;} .nav-drawer a.drawer-child::before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:rgba(15,95,168,.72);transform:translateY(-50%);opacity:.55;} .nav-drawer a.drawer-child.active{color:var(--ink);}