/* ============================================================================
   esquema.css — light "Esquema" theme layer, matching index.html (the home).
   Loaded AFTER styles.css on every internal page; everything is scoped under
   body.esq, which REMAPS styles.css's design tokens to the Esquema light
   palette so every existing component (cards, pricing, report-card, timeline,
   dashboard, scan demo…) inherits the look without per-component rewrites, then
   reshapes the chrome (nav/footer/buttons) into the home's flat technical bar.
   styles.css stays the structural base. The logo (.wordmark/.cursor-dot) is
   NOT redefined here — it stays exactly as the brand kit defines it.
   ============================================================================ */

html{background:#fbfbf9;scrollbar-gutter:stable;}  /* short pages keep the nav where long ones have it */

.esq{
  /* Esquema light palette mapped onto the base tokens — forced regardless of
     data-theme / OS dark mode, so there is no light/dark toggle to worry about. */
  --paper:#fbfbf9; --paper-2:#ffffff;
  --ink:#0f1413; --ink-2:#5d6b69; --ink-3:#5f6c6a;
  --line:rgba(15,20,19,.14); --line-strong:rgba(15,20,19,.2);
  --band:#e9edea;  /* content tone under the page header, same as the home bands */
  --accent:#0a6e70; --accent-2:#0f9ea0; --accent-ink:#ffffff;
  --sev-blue:#285db0; --sev-gold:#7a5a0c; --sev-orange:#d98a1f; --sev-red:#c93f2a;
  --void:#0f1413; --frost:#f4f5f3;
  --shadow:0 24px 50px -34px rgba(15,20,19,.32);
  --icon-shadow:rgba(15,20,19,.18);
  /* cards are LIGHT in Esquema (the base makes them dark via --card-tone:var(--void)) */
  --card-tone:#ffffff; --card-ink:#0f1413; --card-ink-2:#5d6b69; --card-accent:#0a6e70;
  --font-body:'Inter Tight',system-ui,-apple-system,sans-serif;
  /* home extras */
  --teal:#0f9ea0; --teal-deep:#0a6e70; --teal-tint:#dbf2f1;
  --ez:cubic-bezier(.23,1,.32,1);

  background:var(--paper);
  color:var(--ink);
  font-size:var(--fs-base);
  line-height:1.5;
}

.esq .wrap{max-width:1260px;margin:0 auto;padding-inline:34px;}
.esq h1,.esq h2,.esq h3{font-weight:600;letter-spacing:-.03em;line-height:1.05;}

.esq input::placeholder{color:var(--ink-3);opacity:1;}  /* browser default #757575 fails AA on --frost */

/* a11y: visible keyboard focus on every interactive control */
.esq a:focus-visible,.esq button:focus-visible,.esq input:focus-visible,.esq select:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;
}
.esq input:focus-visible,.esq select:focus-visible{outline-offset:1px;}
.esq .nav a,.esq .mobile-panel a,.esq .site-foot a,.esq .brand{text-decoration:none;}

/* ---- flat technical bar (matches the home) ---- */
.esq .navshell{position:sticky;top:0;z-index:50;padding:0;
  background:color-mix(in srgb,var(--paper) 85%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.esq .nav{max-width:1260px;margin:0 auto;padding:16px 34px;display:flex;align-items:center;gap:36px;}
.esq .nav .brand{display:inline-flex;align-items:center;}
.esq .nav .links{display:flex;gap:24px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-2);}
.esq .nav .links a:hover{color:var(--ink);}
/* current page: COLOR ONLY — never weight/padding, so links never shift */
.esq .nav .links a[aria-current="page"]{color:var(--accent);}
.esq .nav-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.esq .langswitch{display:flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;
  font-family:var(--font-mono);font-size:var(--fs-xs);}
.esq .langswitch button{background:transparent;border:0;color:var(--ink-3);padding:6px 9px;cursor:pointer;font-family:var(--font-mono);letter-spacing:normal;}
.esq .langswitch button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:600;}
.esq .nav-login{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-2);background:none;padding:0;border-radius:0;}
.esq .nav-login:hover{color:var(--ink);background:none;}
.esq .nav-login[aria-current="page"]{color:var(--accent);}
.esq .menu-btn{display:none;width:40px;height:40px;border-radius:30px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);font-size:var(--fs-lg);cursor:pointer;padding:0;}

.esq .mobile-panel{display:none;position:static;margin:0;inset:auto;width:auto;max-height:none;transform:none;
  visibility:visible;border-bottom:1px solid var(--line);background:var(--paper);box-shadow:none;border-radius:0;}
.esq .mobile-panel.open{display:block;}
.esq .mobile-panel .wrap{max-width:1260px;background:none;border:0;border-radius:0;padding:12px 34px;
  display:flex;flex-direction:column;gap:10px;backdrop-filter:none;}
.esq .mobile-panel nav{display:flex;flex-direction:column;gap:2px;padding:14px 0;}
.esq .mobile-panel nav a{font-family:var(--font-mono);font-size:var(--fs-base);color:var(--ink-2);padding:11px 0;}
.esq .mobile-panel nav a:hover{color:var(--ink);}

/* ---- buttons (match the home's .btn) ---- */
.esq .cta,.esq .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:500;background:var(--ink);color:#fff;
  border:1px solid var(--ink);border-radius:30px;padding:10px 18px;cursor:pointer;text-decoration:none;
  transition:transform .14s var(--ez),background .18s,border-color .18s;}
.esq .cta:hover,.esq .btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;}
.esq .cta:active,.esq .btn:active{transform:scale(.97);}
.esq .cta.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.esq .cta.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink);}
.esq .cta.accent{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;}
.esq .cta.accent:hover{background:var(--ink);border-color:var(--ink);}

/* ---- footer (match the home) ---- */
.esq footer.site-foot{border-top:0;margin-top:0;padding:32px 0;background:linear-gradient(#1c2826,var(--ink));}
.esq .site-foot .foot{max-width:1260px;margin:0 auto;padding:0 34px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--fs-xs);color:#a9bdbc;}
.esq .site-foot .wordmark{color:#fff;}.esq .site-foot .cursor-dot{background:var(--teal);}
.esq .site-foot .foot nav{display:flex;gap:22px;}
.esq .site-foot .foot a:hover{color:#fff;}

/* ---- page header (technical title + eyebrow pill like the home's .tag) ---- */
.esq .page-header{padding-block:52px 26px;border-bottom:1px solid var(--line);}
.esq .page-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.esq .page-header h1{font-size:var(--fs-3xl);font-family:var(--font-body);}
.esq .page-title-row .eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);
  border:1px solid var(--teal);border-radius:30px;padding:5px 13px;margin:0;}
.esq .page-header>p{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.55;max-width:56ch;margin-top:16px;}

.esq main>section{padding:40px 0;background:var(--band);}
.esq main{background:var(--band);}  /* band runs to the footer even on short pages */

/* ---- flat technical surfaces (the home uses thin borders + near-flat panels) ---- */
.esq .check-card,.esq .plan,.esq .scan-hook,.esq .enterprise-row,.esq .report-card,
.esq .verify-card,.esq .dash-card,.esq .dash-table,.esq .dash-tiles,.esq .dash-tile,
.esq .lp-card,.esq .demo-run,.esq .demo-report{
  background:var(--paper-2);border:1px solid var(--line);box-shadow:none;color:var(--ink);
}
.esq .report-card{box-shadow:var(--shadow);}
.esq .rc-stat .l{color:#4b5655;}  /* --ink-3 drops under 4.5:1 on the tinted severity tiles */
/* report card = the PDF (reportgen/pdf_report.py): black masthead, white body, green accents */
.esq .rc-header,.esq .rc-meta{background:var(--ink);border-bottom-color:#2a3634;}
.esq .rc-header{border-bottom:0;padding-top:18px;}
.esq .rc-header .wm,.esq .rc-header .wordmark{color:#fff;}
.esq .rc-header .wm::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.12em;background:#2fc3c0;}
.esq .rc-doctype{color:#2fc3c0;}
.esq .rc-meta{border-top:1px solid #2a3634;margin:0;padding-bottom:18px;}
.esq .rc-meta .label{color:#a9bdbc;}
.esq .rc-meta .value{color:#fff;}
.esq .rc-tag{background:rgba(255,255,255,.08);color:#a9bdbc;border-color:#2a3634;}
.esq .rc-verdict.ok{background:#e3f3f1;border-color:#b9e0db;}
.esq .rc-verdict.ok p{color:var(--teal-deep);}
.esq .rc-stats{border:1px solid var(--line);background:#fff;}
.esq .rc-stat{background:#fff!important;border-left:1px solid var(--line);}
.esq .rc-stat:first-child{border-left:0;}
.esq .rc-stat.zero .n{color:#c3ccc9;}
.esq .rc-fixes-title,.esq .rc-results-title{border-left:3px solid var(--teal-deep);padding-left:8px;}

/* section titles promoted h3 -> h2 for heading order (keep their visual size) */
.esq .timeline h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em;margin-bottom:6px;}
.esq .verify-card h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em;margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.esq .verify-card h2 .tagnum{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);border:1px solid var(--line-strong);border-radius:4px;padding:2px 6px;}

/* mono labels / code bits (teal, like the home) */
.esq .token,.esq .tl-art{font-family:var(--font-mono);color:var(--accent);}
.esq .tl-k,.esq .tagnum,.esq .check-card-title,.esq .rc-doctype,.esq .label,
.esq .dash-label,.esq .scan-hook-label,.esq .rc-tag,.esq .plan-badge{font-family:var(--font-mono);}

/* ---- free-scan hero form (match the home's command input) ---- */
.esq .hero .hero-content{padding:48px 0 10px;max-width:640px;}
.esq .headline{font-size:var(--fs-4xl);font-family:var(--font-body);max-width:18ch;}
.esq .hero-sub{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.55;max-width:46ch;margin:20px 0 0;display:block;}
.esq .hero-trust{color:var(--ink-3);font-family:var(--font-mono);font-size:var(--fs-xs);margin-top:12px;}
.esq .verify-panel{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-strong);
  border-radius:30px;padding:7px 7px 7px 18px;max-width:460px;box-shadow:var(--shadow);margin-top:28px;}
.esq .vp-field{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.esq .vp-icon{width:18px;height:18px;color:var(--teal);flex:none;}
.esq .vp-text{display:flex;flex-direction:column;flex:1;min-width:0;}
.esq .vp-label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);}
.esq .vp-text input{border:0;background:transparent;font-family:var(--font-mono);font-size:var(--fs-sm);outline:none;color:var(--ink);min-width:0;padding:2px 0;}
.esq .vp-submit{background:var(--ink);color:#fff;border:0;border-radius:24px;width:44px;height:44px;display:grid;
  place-items:center;cursor:pointer;flex:none;transition:transform .14s var(--ez),background .18s;}
.esq .vp-submit:hover{background:var(--teal-deep);}
.esq .vp-submit:active{transform:scale(.97);}
.esq .vp-submit svg{width:20px;height:20px;}

.esq .scan-msg{margin-top:12px;color:var(--sev-red);font-size:var(--fs-sm);}

/* ---- blog: same chrome as every page, laid out like How it works ---- */
.esq .bl-crumb{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;}
.esq .bl-crumb a{color:var(--accent);text-decoration:none;}
.esq .bl-crumb a:hover{color:var(--ink);}
.esq .bl-crumb span{margin:0 8px;}
.esq .bl-head h1{max-width:24ch;}
.esq .bl-meta{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-3);margin-top:16px;}
/* index: one row per post, the whole row is the link (stretched ::after) */
.esq .bl-list{border-top:1px solid var(--line);}
.esq .bl-row{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) 80px;gap:32px;align-items:baseline;
  padding:30px 0;border-bottom:1px solid var(--line);}
.esq .bl-k{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.esq .bl-k span{color:var(--teal-deep);font-weight:600;margin-right:10px;}
.esq .bl-list .bl-row h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.25;max-width:42ch;}
.esq .bl-row h2 a{color:var(--ink);text-decoration:none;transition:color .15s ease-out;}
.esq .bl-row h2 a::after{content:"";position:absolute;inset:0;}
.esq .bl-row div>p{color:var(--ink-2);line-height:1.6;margin-top:8px;max-width:62ch;}
.esq .bl-t{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-3);text-align:right;white-space:nowrap;}
.esq .bl-t span{display:inline-block;margin-left:4px;transition:transform .18s ease-out;}
@media(hover:hover){.esq .bl-row:hover h2 a{color:var(--accent);}.esq .bl-row:hover .bl-t span{transform:translateX(3px);}}
.esq .bl-row:active .bl-t span{transform:translateX(5px);transition-duration:.1s;}
/* post: facts aside + body at a reading measure */
.esq .bl-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start;}
.esq .bl-side{position:sticky;top:calc(var(--nav-h,57px) + 32px);}
.esq .bl-side .hw-facts{margin:0;}
.esq .bl-side .hw-facts li{grid-template-columns:56px 1fr;}
.esq .bl-back{display:inline-block;margin-top:20px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent);text-decoration:none;}
.esq .bl-back:hover{color:var(--ink);}
.esq .bl-body{max-width:68ch;font-size:var(--fs-base);line-height:1.7;}
.esq .bl-post .bl-body h2{font-size:var(--fs-xl);letter-spacing:-.02em;line-height:1.25;max-width:none;margin:44px 0 12px;}
.esq .bl-post .bl-body h2:first-child{margin-top:0;}
.esq .bl-body p,.esq .bl-body ul{margin:0 0 16px;color:#2f3a38;}
.esq .bl-body ul{padding-left:1.2em;}
.esq .bl-body li{margin-bottom:6px;}
.esq .bl-body strong{color:var(--ink);}
.esq .bl-body code{font-family:var(--font-mono);font-size:.86em;background:var(--frost);border:1px solid var(--line);border-radius:5px;padding:1px 5px;}
@media(max-width:960px){
  .esq .bl-row{grid-template-columns:1fr;gap:8px;}
  .esq .bl-t{text-align:left;}
  .esq .bl-grid{grid-template-columns:1fr;gap:32px;}
  .esq .bl-side{position:static;}
}
.esq .back-home{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent);}

/* responsive: collapse links to the mobile panel, matching the home */
@media(max-width:900px){
  .esq .nav .links,.esq .primary{display:none;}
  .esq .menu-btn{display:inline-flex;align-items:center;justify-content:center;}
}
/* logo + languages + Login + menu don't fit a phone; Login is already in the menu panel */
@media(max-width:560px){.esq .nav-right .nav-login{display:none;}.esq .nav{gap:0;}}
@media(max-width:380px){.esq .nav{padding-inline:16px;}}  /* 320px phones: 34px margins pushed the menu off screen */  /* like the home (space-between, no gap): 36px overflowed a 390px phone */

/* ============================================================================
   How it works + What we check (technical pages). Motion follows the apple-design
   rules in ../CLAUDE.md: the pipeline bar tracks the scroll 1:1, each stage window
   plays once when it comes into view (inner.js), transitions 130-280ms, and
   reduced motion shows every end state at once.
   ============================================================================ */

/* ---- pipeline bar: sticky, translucent, fill follows the scroll ---- */
.esq .hw-pipe{position:sticky;top:var(--nav-h,57px);z-index:20;background:rgba(251,251,249,.8);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line);}
.esq .hw-pipe ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);position:relative;margin:0;padding:0;}
.esq .hw-pipe ol::before,.esq .hw-pipe ol::after{content:"";position:absolute;left:10%;right:10%;top:22px;height:2px;border-radius:1px;background:var(--line);}
.esq .hw-pipe ol::after{background:var(--teal-deep);right:auto;width:calc(80% * var(--p,0));}
.esq .hw-pipe a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px 12px;
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-3);text-align:center;text-decoration:none;transition:color .2s var(--ez);}
.esq .hw-pipe a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--line-strong);
  transition:background-color .2s var(--ez),border-color .2s var(--ez),box-shadow .2s var(--ez);}
.esq .hw-pipe a:hover{color:var(--ink);}
.esq .hw-pipe a:active{transform:scale(.97);}
.esq .hw-pipe a.done{color:var(--ink-2);}
.esq .hw-pipe a.done::before{background:var(--teal-deep);border-color:var(--teal-deep);}
.esq .hw-pipe a.on{color:var(--ink);font-weight:600;}
.esq .hw-pipe a.on::before{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-tint);}

/* ---- stages ---- */
.esq .hw-stage{padding:96px 0;border-top:1px solid var(--line);background:var(--paper);scroll-margin-top:calc(var(--nav-h,57px) + 64px);}
.esq .hw-stage:nth-of-type(even){background:var(--band);}
.esq .hw-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;}
.esq .hw-num{font-family:var(--font-mono);font-weight:600;font-size:27px;line-height:1;color:var(--teal-deep);margin:0 0 18px;}
.esq .hw-num span{font-size:var(--fs-xs);font-weight:400;color:var(--ink-3);margin-left:8px;letter-spacing:.06em;text-transform:uppercase;}
.esq .hw-stage h2{font-size:var(--fs-2xl);letter-spacing:-.02em;line-height:1.15;max-width:22ch;}
.esq .hw-stage p.lead{color:var(--ink-2);font-size:var(--fs-base);line-height:1.65;margin-top:16px;max-width:52ch;}
.esq .hw-facts{list-style:none;margin:26px 0 0;padding:0;max-width:52ch;}
.esq .hw-facts li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:var(--fs-sm);}
.esq .hw-facts li:last-child{border-bottom:1px solid var(--line);}
.esq .hw-facts b{font-family:var(--font-mono);font-weight:500;font-size:var(--fs-xs);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding-top:2px;}
.esq .hw-facts code{font-family:var(--font-mono);font-size:var(--fs-xs);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;}
.esq .hw-link{display:inline-block;margin-top:22px;text-decoration:none;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--teal-deep);}
.esq .hw-link:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---- the stage windows ---- */
.esq .hw-win{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 44px 80px -48px rgba(15,20,19,.45);}
.esq .hw-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#eef0ee;border-bottom:1px solid var(--line);}
.esq .hw-bar i{width:9px;height:9px;border-radius:50%;background:#cfd5d3;}
.esq .hw-bar span{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line);border-radius:6px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);padding:3px 10px;}
.esq .hw-body{padding:22px 24px;min-height:260px;font-family:var(--font-mono);font-size:var(--fs-sm);}
/* one-shot sequence: inner.js adds .on to each .sq in order once the window is on screen */
.esq .sq{opacity:0;transform:translateY(6px);transition:opacity .24s var(--ez),transform .24s var(--ez);}
.esq .sq.on{opacity:1;transform:none;}
.esq .t-line{padding:5px 0;color:var(--ink);overflow-wrap:anywhere;}
.esq .t-line .pr{color:var(--teal-deep);}
.esq .t-line.dim{color:var(--ink-3);}
.esq .t-line.ok{color:var(--teal-deep);font-weight:500;}
.esq .t-line .ts{color:var(--ink-3);margin-right:10px;}

/* crawl map */
.esq .hw-crawl{display:flex;flex-direction:column;gap:14px;}
.esq .hw-root{align-self:flex-start;background:var(--ink);color:#fff;border-radius:8px;padding:7px 12px;}
.esq .hw-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-left:18px;border-left:2px solid var(--line);}
.esq .hw-pages span{border:1px solid var(--line);border-radius:7px;padding:6px 9px;background:var(--frost);color:var(--ink-2);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.esq .hw-count{display:flex;gap:22px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--fs-xs);}
.esq .hw-count b{display:block;font-size:var(--fs-xl);color:var(--ink);font-weight:600;letter-spacing:-.02em;}

/* module run */
.esq .hw-mods{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.esq .hw-mods span{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:var(--fs-xs);color:var(--ink-3);
  transition:color .2s var(--ez),border-color .2s var(--ez),background-color .2s var(--ez);}
.esq .hw-mods span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong);flex:none;transition:background-color .2s var(--ez);}
.esq .hw-mods span.on{color:var(--ink);background:#fff;}
.esq .hw-mods span.on::before{background:var(--teal);}
.esq .hw-mods span.on.flag::before{background:var(--sev-orange);}
.esq .hw-status{margin-top:16px;display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:var(--fs-xs);}
.esq .hw-status .bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden;}
.esq .hw-status .bar i{display:block;height:100%;width:100%;background:var(--teal-deep);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .24s var(--ez);}

/* risk ranking */
.esq .hw-risk{display:flex;flex-direction:column;gap:10px;}
.esq .hw-rrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.esq .hw-rrow .what{font-family:var(--font-body);font-size:var(--fs-sm);font-weight:500;color:var(--ink);}
.esq .hw-rrow .what small{display:block;font-family:var(--font-mono);font-weight:400;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;}
.esq .hw-epss{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:var(--ink-3);}
.esq .hw-epss .bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden;}
.esq .hw-epss .bar i{display:block;height:100%;background:var(--ink-2);transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ez);}
.esq .hw-rrow.on .hw-epss .bar i{transform:scaleX(var(--v));}
.esq .hw-rrow.kev{border-color:color-mix(in srgb,var(--sev-red) 40%,transparent);background:color-mix(in srgb,var(--sev-red) 4%,#fff);}
.esq .hw-rrow.kev .hw-epss .bar i{background:var(--sev-red);}
.esq .badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.05em;padding:3px 7px;border-radius:5px;background:var(--frost);color:var(--ink-3);white-space:nowrap;}
.esq .badge.kev{background:var(--sev-red);color:#fff;}

/* never-do list */
.esq .hw-never{padding:96px 0;border-top:1px solid var(--line);background:var(--paper);}
.esq .hw-never h2{font-size:var(--fs-2xl);letter-spacing:-.02em;}
.esq .hw-never .wrap>p{color:var(--ink-2);margin-top:12px;max-width:60ch;line-height:1.6;}
.esq .hw-never ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:36px 0 0;padding:0;}
.esq .hw-never li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;}
.esq .hw-never li b{display:flex;align-items:center;gap:10px;font-size:var(--fs-base);}
.esq .hw-never li b::before{content:"";width:16px;height:2px;background:var(--sev-red);border-radius:1px;flex:none;}
.esq .hw-never li p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;margin-top:8px;}

/* closing call to action */
.esq .hw-cta-wrap{padding:96px 0;}  /* centered in its band: same space above and below */
.esq .hw-cta{border-radius:18px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg,#123a39,var(--ink));color:#fff;}
.esq .hw-cta h2{font-size:var(--fs-2xl);letter-spacing:-.02em;color:#fff;}
.esq .hw-cta p{color:#a9bdbc;margin-top:8px;}
.esq .hw-cta a{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border-radius:10px;padding:13px 20px;font-family:var(--font-mono);font-weight:600;font-size:var(--fs-sm);text-decoration:none;
  transition:transform .1s ease-out,background-color .15s ease-out;}
.esq .hw-cta a:hover{background:var(--teal-tint);}
.esq .hw-cta a:active{transform:scale(.97);}

/* ---- pricing: same stages as How it works; the plan cards reuse .hw-facts rows so they compare line by line ---- */
.esq .pr-go{display:inline-flex;align-items:center;gap:8px;margin-top:28px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  border-radius:10px;padding:13px 20px;font-family:var(--font-mono);font-weight:600;font-size:var(--fs-sm);text-decoration:none;
  transition:transform .1s ease-out,background-color .15s ease-out,border-color .15s ease-out;}
.esq .pr-go:hover{background:var(--teal-deep);border-color:var(--teal-deep);}
.esq .pr-go:active{transform:scale(.97);}
.esq .pr-go.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.esq .pr-go.ghost:hover{border-color:var(--ink);}
.esq .pr-row{display:flex;justify-content:space-between;gap:16px;}
.esq .pr-dim{color:var(--ink-3);}
.esq .pr-total{border-top:1px dashed var(--line-strong);margin-top:6px;padding-top:11px;font-weight:600;}
.esq .pr-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;align-items:start;}
.esq .pr-plans .plan{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:28px;transition:none;}
.esq .pr-plans .plan:hover{transform:none;}
.esq .pr-plans .plan.featured{outline:0;border-color:var(--teal-deep);box-shadow:0 44px 80px -48px rgba(15,20,19,.45);}
.esq .pr-plans .name{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--font-mono);font-size:var(--fs-sm);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep);height:26px;}  /* fixed: the badge must not push one card's rows down */
.esq .pr-plans .plan-badge{position:static;transform:none;background:var(--teal-tint);color:var(--teal-deep);font-size:var(--fs-xs);
  font-weight:500;letter-spacing:0;text-transform:none;padding:3px 9px;}
.esq .pr-plans .price{color:var(--ink);}
.esq .pr-plans .plan-cta{border-radius:10px;}  /* same corner as .pr-go / .hw-cta on this page */
.esq .pr-plans .desc{min-height:calc(2 * 1.55em);}  /* both CTAs on one line across the cards */
.esq .pr-plans .plan ul.hw-facts{display:block;margin:8px 0 0;padding:0;border-top:0;max-width:none;}
.esq .pr-plans .plan li{display:grid;grid-template-columns:120px 1fr;gap:14px;color:var(--ink);}
.esq .pr-plans .plan li::before{content:none;}
.esq .pr-no{color:var(--ink-3);}
@media(max-width:960px){.esq .pr-plans{grid-template-columns:1fr;}.esq .pr-plans .desc{min-height:0;}}
@media(max-width:640px){.esq .pr-plans .plan{padding:22px;}.esq .pr-plans .plan li{grid-template-columns:1fr;gap:4px;}}

/* ---- what we check: filter + module cards ---- */
.esq .wc-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:44px 0 8px;}
.esq .wc-stats{display:flex;gap:28px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-3);}
.esq .wc-stats b{display:block;font-size:var(--fs-xl);color:var(--ink);font-weight:600;letter-spacing:-.02em;}
.esq .seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--frost);border:1px solid var(--line);border-radius:11px;padding:3px;}
.esq .seg button{position:relative;z-index:1;background:none;border:0;padding:8px 16px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer;border-radius:8px;white-space:nowrap;
  transition:color .2s var(--ez);}
.esq .seg button[aria-pressed="true"]{color:var(--ink);font-weight:600;}
.esq .seg button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.esq .seg i{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(15,20,19,.12);
  transform:translateX(calc(100% * var(--k,0)));transition:transform .26s var(--ez);}
.esq .wc-group{margin-top:34px;}
.esq .wc-list h2{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;}
.esq .wc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.esq .wc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px;transition:opacity .22s var(--ez),transform .22s var(--ez),border-color .2s var(--ez);}
.esq .wc-card[hidden],.esq .wc-group h2[hidden]{display:none;}
.esq .wc-card:hover{border-color:var(--line-strong);}
.esq .wc-card h3{font-size:var(--fs-base);font-weight:600;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.esq .wc-card p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;margin-top:8px;}
.esq .wc-card .badge.passive{background:var(--teal-tint);color:var(--teal-deep);}
.esq .wc-card .badge.active{background:color-mix(in srgb,var(--sev-orange) 16%,transparent);color:#7a4a08;}
.esq .wc-card .badge.optin{background:var(--frost);color:var(--ink-2);border:1px solid var(--line);}
/* groups below the fold rise in once (inner.js marks them .pre, then .in) */
.esq .wc-group.pre .wc-card{opacity:0;transform:translateY(10px);}
.esq .wc-group.pre.in .wc-card{opacity:1;transform:none;}
/* filtering (inner.js): non-matching cards leave the layout; a fading copy covers the exit */
.esq .wc-list{position:relative;}
.esq .wc-group.empty{margin-top:0;}
.esq .wc-report{margin-top:72px;padding-bottom:72px;}
.esq .wc-report>h2{font-size:var(--fs-2xl);letter-spacing:-.02em;margin-bottom:8px;}
.esq .wc-report>p{color:var(--ink-2);margin-bottom:24px;}

@media(max-width:960px){
  .esq .hw-grid{grid-template-columns:1fr;gap:32px;}
  .esq .hw-never ul,.esq .wc-cards{grid-template-columns:1fr 1fr;}
  .esq .hw-stage{padding:64px 0;}
  .esq .hw-cta-wrap{padding:64px 0;}
}
@media(max-width:640px){
  .esq .hw-pipe a{font-size:10px;padding:12px 2px 10px;}
  .esq .hw-never ul,.esq .wc-cards{grid-template-columns:1fr;}
  .esq .hw-mods,.esq .hw-pages{grid-template-columns:1fr 1fr;}
  .esq .hw-facts li{grid-template-columns:1fr;gap:4px;}
  .esq .hw-cta{padding:28px;}
  .esq .seg{width:100%;}
  .esq .seg button{padding:8px 2px;font-size:11px;}
}
@media(prefers-reduced-motion:reduce){
  .esq .sq,.esq .wc-card,.esq .seg i,.esq .hw-epss .bar i,.esq .hw-status .bar i,.esq .hw-mods span{transition:none;}
}

/* dashboard: Stripe billing portal button (dashboard.js portalButton) */
.esq .dash-head .dash-summary{flex:1;}  /* the actions group on the right instead of spreading out */
.esq .dash-portal{display:inline-flex;flex-direction:column;gap:6px;}
.esq .dash-portal .scan-msg{margin:0;}
.esq .dash-portal .cta:disabled{opacity:.6;cursor:progress;}

/* dashboard: PDF language picker beside the download button (dashboard.js) */
.esq .dash-pdf{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.esq .dash-pdf-lang{display:inline-flex;background:var(--frost);border:1px solid var(--line);border-radius:9px;padding:2px;}
.esq .dash-pdf-lang button{background:none;border:0;border-radius:7px;padding:6px 9px;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer;
  transition:background-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out,transform .1s ease-out;}
.esq .dash-pdf-lang button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(15,20,19,.12);}
.esq .dash-pdf-lang button:active{transform:scale(.96);}
.esq .dash-pdf-lang button:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}

/* touch targets + mobile panel CTA (mobile review 2026-10-26) */
.esq .mobile-panel nav a.mp-cta{margin-top:10px;min-height:44px;padding:0 18px;color:#fff;justify-content:center;}
@media (max-width:960px){.esq .langswitch button{padding:12px 10px;}}

/* DNS record as the fields a DNS panel asks for (feedback 2026-10-26: Name vs Value was unclear) */
.esq .dns-rec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center;margin:0;}
.esq .dns-rec dt{font-size:var(--fs-xs);color:var(--ink-2);}
.esq .dns-rec dd{margin:0;white-space:normal;word-break:break-all;}
.esq .dns-hint{font-size:var(--fs-xs);margin:10px 0 0;}

/* click-to-copy on the DNS fields + price before the email/DNS steps (feedback 2026-10-26) */
.esq .copyable{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:border-color 160ms ease-out,transform 100ms ease-out;}
.esq .copyable:hover{border-color:var(--accent);}
.esq .copyable:active{transform:scale(.985);}
.esq .copyable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.esq .copy-ico{display:block;flex:none;width:16px;height:16px;color:var(--ink-2);transition:color 160ms ease-out;}
.esq .copyable:hover .copy-ico,.esq .copyable.copied .copy-ico{color:var(--accent);}
.esq .price-note{margin:14px 0 0;font-size:var(--fs-sm);color:var(--ink-2);}
.esq .price-note b{color:var(--ink);font-weight:600;}
.esq .price-note a{color:var(--accent);}
.esq #proceedRow{margin-top:18px;}
.esq #verifyContent{padding-bottom:48px;}
@media (prefers-reduced-motion:reduce){.esq .copyable:active{transform:none;}}
/* Monitoring offer under a one-time scan's report (scan page) */
.esq .mon-offer{max-width:640px;margin:24px auto 0;padding:20px 22px;background:#e5eeea;border:1px solid #c9dbd4;border-radius:14px;display:flex;gap:16px 20px;align-items:center;flex-wrap:wrap}
.esq .mon-offer p{flex:1 1 300px;margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.esq .mon-offer strong{color:var(--ink)}
.esq .mon-offer .cta:disabled{opacity:.6;cursor:wait}