:root {
  --bg:#f9f9f7; --surface:#fff; --border:#e8e8e4;
  --ink:#1c1c1a; --ink2:#5a5a54; --ink3:#73736a;
  --blue:#1d4ed8; --blue-bg:#eff4ff; --blue-border:#bfdbfe;
  --red:#b91c1c; --red-bg:#fff1f1; --red-border:#fca5a5;
  --amber:#92400e; --amber-fill:#d97706; --amber-bg:#fffbeb; --amber-border:#fcd34d;
  --green:#15622a; --green-bg:#f0faf3; --green-border:#86efac;
  --font:'Geist',system-ui,sans-serif; --mono:'Geist Mono',monospace; --r:8px;
  /* Type scale. LubIQ is a dense intelligence tool and 13px is the deliberate body size,
     not an oversight: a 16px base would break every table and card in it. What was not
     deliberate is 17 arbitrary sizes, so these are the six, and nothing that is text renders
     below --fs-xs. .info-btn stays at 9px because it is a glyph marker with a 44px hit area,
     not text, and it measures 4.54:1. */
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:15px; --fs-lg:20px; --fs-xl:28px;
  /* Token aliases: Gilson's copied drawer CSS names these. */
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;min-height:100vh;}
.app{display:flex;min-height:100vh;}

/* ── Gilson hamburger + glass sidebar ─────────────────────────────────────────
   From ~/work/gilson/apac-iq/design/gilson-homepage-mockup.html:26-64.
   MODIFIED from Gilson, durations and easing only — no visual or structural change:
     .menu-btn .bars i  transform .45s -> .2s   (press feedback; 450ms reads as sluggish)
     .sidebar / .scrim  symmetric -> asymmetric (open deliberate, dismiss snaps)
     .sb-link           .5s -> .28s             (last link settled ~935ms after the tap)
   A straight re-copy from Gilson would undo these. */
  /* ---------- HAMBURGER + GLASS SIDEBAR ---------- */
  .menu-btn{position:fixed;top:20px;left:22px;z-index:60;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
    /* Tuned against the light page, which since the hero was removed is the only
       background it ever sits on. At .42 the white bars composited to ~2.8:1, under
       the 3:1 WCAG asks of a UI component. */
    background:rgba(16,26,40,.9);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:0 8px 40px -12px rgba(0,20,45,.5);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .menu-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .menu-btn .bars{position:relative;width:18px;height:12px}
  .menu-btn .bars i{position:absolute;left:0;width:18px;height:1.8px;border-radius:2px;background:#fff;
    transition:transform .2s var(--ease),opacity .16s var(--ease)}
  .menu-btn .bars i:nth-child(1){top:0}.menu-btn .bars i:nth-child(2){top:5.1px}.menu-btn .bars i:nth-child(3){top:10.2px}
  body.menu-open .menu-btn .bars i:nth-child(1){transform:translateY(5.1px) rotate(45deg)}
  body.menu-open .menu-btn .bars i:nth-child(2){opacity:0}
  body.menu-open .menu-btn .bars i:nth-child(3){transform:translateY(-5.1px) rotate(-45deg)}

  .scrim{position:fixed;inset:0;z-index:50;background:rgba(8,14,22,.25);opacity:0;pointer-events:none;transition:opacity .24s var(--ease)}
  body.menu-open .scrim{opacity:1;pointer-events:auto;transition:opacity .4s var(--ease)}

  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:55;width:300px;max-width:84vw;
    background:rgba(16,26,40,.55);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
    border-right:1px solid rgba(255,255,255,.14);box-shadow:24px 0 80px -30px rgba(0,20,45,.6);
    transform:translateX(-102%);transition:transform .32s var(--ease);display:flex;flex-direction:column;padding:22px 0 18px}
  body.menu-open .sidebar{transform:translateX(0);transition:transform .5s var(--ease)}
  .sb-brand{padding:8px 24px 20px 84px;border-bottom:1px solid rgba(255,255,255,.1)}
  .sb-brand .nm{font-family:var(--font-display);font-weight:600;font-size:15px;color:#fff}
  .sb-brand .nm span{opacity:.55;font-weight:400}
  .sb-brand .tg{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:3px}
  .sb-nav{flex:1;overflow-y:auto;padding:14px 12px}
  .sb-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:10px;
    color:rgba(255,255,255,.78);text-decoration:none;font-size:13px;font-weight:500;
    opacity:0;transform:translateX(-14px);transition:background .2s ease,color .2s ease}
  body.menu-open .sb-link{opacity:1;transform:none;transition:background .2s ease,color .2s ease,
    opacity .28s var(--ease) var(--d,0s),transform .28s var(--ease) var(--d,0s)}
  .sb-link:hover{background:rgba(255,255,255,.08);color:#fff}
  .sb-link:focus-visible{outline:2px solid #fff;outline-offset:-2px}
  .sb-link.on{background:rgba(255,255,255,.12);color:#fff}
  .sb-link .chip{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:99px;
    background:rgba(255,255,255,.1);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.14)}
  .sb-link .chip.ai{background:rgba(111,168,255,.18);color:#b8d2ff;border-color:rgba(111,168,255,.3)}
  .sb-div{height:1px;background:rgba(255,255,255,.1);margin:10px 14px}
  .sb-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:8px 14px 4px}


/* LubIQ additions to the drawer. Gilson's .sb-link styles an <a>; ours are <button>
   elements so the router can own them, which means they need the UA chrome reset off —
   without this they render as grey pills with their own font. */
.sb-link{background:none;border:0;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  padding-top:13px;padding-bottom:13px;}  /* 44px touch target */
/* LubIQ additions to the drawer: the brand block and the account footer, in Gilson's
   glass idiom. */
/* Class collision: LubIQ already uses .tg for the green "On track" status pill in tables,
   and its background leaks into Gilson's brand tagline, which is also .tg. */
.sb-brand .tg{background:none;}
.sb-brand .nm span{opacity:.55;font-weight:400;}
/* Contrast, measured 5 Sep 2026 by sampling the rendered drawer rather than computed from
   the declared colours. Gilson's panel at rgba(16,26,40,.55) composites over LubIQ's light
   page to about rgb(92,99,107); white at .45 lands on rgb(166,170,174), which is 2.60:1.
   Since the hero was removed the light page is the only thing the drawer ever sits over, so
   this is the only case rather than the worst one. Darkening the panel lifts every label at
   once instead of patching each alpha. An override, never an edit to the copied block, so a
   re-copy from Gilson survives it. */
.sidebar{background:rgba(16,26,40,.82);}
.sb-cap{color:rgba(255,255,255,.72);}
.sb-brand .tg{color:rgba(255,255,255,.72);}

.sb-foot{display:flex;align-items:center;gap:10px;padding:10px 14px 4px;}
.sb-foot .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;}
.sb-foot .foot-name{font-size:12px;font-weight:500;color:#fff;}
.sb-foot .foot-role{font-size:11px;color:rgba(255,255,255,.72);}
.sb-link .badge{font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 7px;
  border-radius:99px;background:rgba(248,113,113,.22);color:#fca5a5;
  border:1px solid rgba(248,113,113,.38);}
.sb-link .badge.a{background:rgba(251,191,36,.2);color:#fcd34d;border-color:rgba(251,191,36,.4);}

/* Main */
.main{width:100%;padding:0 32px 28px;min-width:0;}
/* ── Masthead ─────────────────────────────────────────────────────────────────
   Replaces the 88vh hero map (removed 5 Sep 2026). Carries identity only: the
   headline figures live in #pg-dash's .stats row immediately below, and repeating
   them here is the homepage-metrics duplication that was reverted on Gilson in July.
   Its 78px top padding is the band the fixed 46px hamburger sits in, so the button
   never floats over content. */
.masthead{display:flex;align-items:flex-start;gap:16px;
  padding:78px 0 24px;margin-bottom:26px;border-bottom:1px solid var(--border);}
.mh-logo{flex-shrink:0;width:44px;height:44px;padding:6px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);object-fit:contain;}
.masthead .eyebrow{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px;}
.masthead h1{font-family:var(--font-display);font-size:28px;font-weight:600;
  line-height:1.05;letter-spacing:-.015em;color:var(--ink);margin:0;}
.masthead h1 .thin{font-weight:400;color:var(--ink2);}
.masthead p{margin:9px 0 0;font-size:13px;line-height:1.6;color:var(--ink2);max-width:56ch;}

.pg{display:none;animation:in .15s var(--ease);}
.pg.on{display:block;}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Info button + tooltip system */
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--ink3);font-size:9px;font-weight:700;cursor:pointer;transition:background-color .1s var(--ease),border-color .1s var(--ease),color .1s var(--ease);flex-shrink:0;margin-left:5px;vertical-align:middle;line-height:1;font-family:var(--mono);}
.info-btn:hover{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue);}
.tooltip-wrap{position:relative;display:inline-flex;align-items:center;}
.tooltip-box{display:none;position:absolute;z-index:100;background:var(--ink);color:#fff;font-size:12px;line-height:1.6;padding:10px 13px;border-radius:var(--r);width:260px;top:calc(100% + 6px);left:50%;transform:translateX(-50%);pointer-events:none;}
.tooltip-box.left{left:auto;right:0;transform:none;}
.tooltip-box.up{top:auto;bottom:calc(100% + 6px);}
.tooltip-box::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--ink);rotate:45deg;}
.tooltip-box.left::before{left:auto;right:12px;}
.tooltip-box.up::before{top:auto;bottom:-4px;}
.info-btn:hover + .tooltip-box,
/* :focus-visible, not :focus — a mouse click sets :focus and would hold the box open
   after .open has been toggled off, so the second click could not close it. */
.info-btn:focus-visible + .tooltip-box{display:block;}
.tooltip-wrap:hover .tooltip-box{display:block;}

/* Page header */
.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;}
.ph-left{display:flex;align-items:flex-start;gap:6px;}
/* .ph-title and .card-title are <h2>/<h3> so the 12 sections are navigable by heading;
   the UA reset keeps the swap visually identical to the <div>s they replaced. */
.ph-title,.card-title{margin:0;}
.ph-title{font-size:20px;font-weight:600;}
.ph-sub{font-size:13px;color:var(--ink2);margin-top:3px;}
.ph-info{margin-top:5px;}
.ph-actions{display:flex;gap:8px;align-items:center;}
.btn{padding:8px 16px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);border:1px solid var(--border);background:var(--surface);color:var(--ink2);transition:background-color .1s var(--ease),border-color .1s var(--ease),color .1s var(--ease);}
.btn:hover{border-color:var(--blue);color:var(--blue);}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn.primary:hover{background:#1a44c2;}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;}
.stat-lbl-row{display:flex;align-items:center;margin-bottom:8px;}
.stat-lbl{font-size:12px;color:var(--ink2);}
.stat-val{font-size:28px;font-weight:600;font-family:var(--mono);line-height:1;}
.stat-note{font-size:12px;color:var(--ink3);margin-top:6px;}
.up{color:var(--green);} .dn{color:var(--red);}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;overflow:visible;}
.card-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-title-row{display:flex;align-items:center;gap:0;}
.card-title{font-size:13px;font-weight:600;color:var(--ink);}
.card-action{font-size:12px;color:var(--blue);cursor:pointer;}
.card-body{padding:16px 20px;}
.card-body.flush{padding:0 20px;}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.g32{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px;}

/* Chart */
.chart{display:flex;align-items:flex-end;gap:8px;height:118px;padding:0 2px;}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;}
/* The printed value and the label are auto-height, so the bar needs its own definite-height
   track for height:82% to mean 82% of the plot area rather than 82% of the whole column. */
.bar-track{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0;}
.bar-col{width:100%;border-radius:3px 3px 0 0;min-height:4px;}
.bar-lbl{font-size:11px;color:var(--ink3);font-family:var(--mono);}
.chart-note{font-size:12px;color:var(--ink3);margin-top:10px;}

/* Progress */
.progs{display:flex;flex-direction:column;gap:14px;}
.prog-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink2);margin-bottom:5px;}
.prog-name-row{display:flex;align-items:center;}
.prog-pct{font-family:var(--mono);font-weight:500;color:var(--ink);}
.prog-track{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;}
.prog-fill{height:100%;border-radius:3px;}

/* Table */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:0 12px 10px;text-align:left;font-weight:500;}
.th-row{display:inline-flex;align-items:center;}
.tbl td{padding:11px 12px;border-top:1px solid var(--border);color:var(--ink);}
.tbl tr:hover td{background:var(--bg);}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;font-family:var(--mono);}
.tg{background:var(--green-bg);color:var(--green);}
.tr{background:var(--red-bg);color:var(--red);}
.ta{background:var(--amber-bg);color:var(--amber);}
.tb2{background:var(--blue-bg);color:var(--blue);}

/* Alert rows */
/* Flex children default to min-width:auto, so the alert text refused to wrap and pushed the
   Competitor Intelligence card to 682px inside a 390px viewport. */
.al{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);}
.al > div{min-width:0;}
.al:last-child{border-bottom:none;padding-bottom:0;}
.al-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.al-title{font-size:13px;font-weight:500;margin-bottom:3px;}
.al-desc{font-size:12px;color:var(--ink2);line-height:1.55;}
.al-meta{font-size:12px;color:var(--ink3);margin-top:4px;font-family:var(--mono);}

/* Health bars */
.hl{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.hl:last-child{border-bottom:none;}
.hl-name{font-size:13px;width:160px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hl-track{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;}
.hl-fill{height:100%;border-radius:3px;}
.hl-score{font-size:12px;font-family:var(--mono);font-weight:500;width:28px;text-align:right;flex-shrink:0;}

/* Contract timeline */
.ct{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.ct:last-child{border-bottom:none;}
.ct-info{flex:1;min-width:0;}
.ct-name{font-size:13px;font-weight:500;}
.ct-meta{font-size:12px;color:var(--ink3);margin-top:2px;}
.ct-bar{height:3px;background:var(--bg);border-radius:2px;margin-top:6px;overflow:hidden;}
.ct-fill{height:100%;border-radius:2px;}
.days{font-size:12px;font-family:var(--mono);font-weight:600;padding:4px 10px;border-radius:var(--r);flex-shrink:0;}

/* Pricing */
.pform{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fg{display:flex;flex-direction:column;gap:5px;}
.flbl-row{display:flex;align-items:center;}
.flbl{font-size:12px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;}
.finp{border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;font-size:13px;font-family:var(--font);color:var(--ink);background:var(--bg);outline:none;width:100%;transition:border-color .1s;}
.finp:focus{border-color:var(--blue);background:var(--surface);}
.result{margin-top:14px;padding:14px 16px;border-radius:var(--r);border:1px solid;}
.res-ok{background:var(--green-bg);border-color:var(--green-border);}
.res-warn{background:var(--amber-bg);border-color:var(--amber-border);}
.res-bad{background:var(--red-bg);border-color:var(--red-border);}
.res-title{font-size:13px;font-weight:600;margin-bottom:4px;}
.res-ok .res-title{color:var(--green);}
.res-warn .res-title{color:var(--amber);}
.res-bad .res-title{color:var(--red);}
.res-body{font-size:12px;color:var(--ink2);line-height:1.6;}
.idx-out{background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r);padding:14px 16px;margin-top:14px;}
.idx-lbl{font-size:12px;color:var(--blue);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;}
.idx-val{font-size:24px;font-weight:600;font-family:var(--mono);color:var(--blue);}
.idx-note{font-size:12px;color:var(--ink3);margin-top:5px;}

/* Section explanation callout */
.explain{background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r);padding:13px 16px;margin-bottom:18px;font-size:12.5px;color:var(--blue);line-height:1.65;}
.explain b{color:#1e3a8a;}

/* Chat */
.chat-outer{display:flex;flex-direction:column;height:460px;}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:4px 0 8px;}
.chat-log::-webkit-scrollbar{width:3px;}
.chat-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.msg{max-width:80%;}
.msg.me{align-self:flex-end;}
.msg.ai{align-self:flex-start;}
.msg-who{font-size:12px;color:var(--ink3);margin-bottom:4px;padding:0 2px;}
.msg.me .msg-who{text-align:right;}
.bubble{padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.65;}
.msg.me .bubble{background:var(--blue);color:#fff;border-radius:10px 10px 2px 10px;}
.msg.ai .bubble{background:var(--surface);border:1px solid var(--border);border-radius:2px 10px 10px 10px;color:var(--ink);}
.msg.ai .bubble b{color:var(--blue);}
.chat-chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0 2px;}
.chip{padding:6px 12px;border-radius:20px;font-size:12px;border:1px solid var(--border);color:var(--ink2);cursor:pointer;background:var(--surface);font-family:var(--font);transition:background-color .1s var(--ease),border-color .1s var(--ease),color .1s var(--ease);}
.chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);}
.chat-bar{display:flex;gap:8px;padding-top:12px;border-top:1px solid var(--border);margin-top:4px;}
.chat-in{flex:1;border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;font-size:13px;font-family:var(--font);color:var(--ink);background:var(--bg);outline:none;}
.chat-in:focus{border-color:var(--blue);background:var(--surface);}
.chat-in::placeholder{color:var(--ink3);}
.chat-send{background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:10px 18px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font);}
.chat-send:hover{background:#1a44c2;}
.dots{display:flex;gap:4px;padding:4px 2px;align-items:center;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:blink 1.2s infinite;}
.dot:nth-child(2){animation-delay:.2s;} .dot:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* How it works section */
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:16px;}
.how-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 16px;}
.how-num{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--blue-border);margin-bottom:10px;}
.how-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;}
.how-body{font-size:12px;color:var(--ink2);line-height:1.65;}
.arrow-row{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ink3);margin-bottom:14px;}






/* ── Touch ────────────────────────────────────────────────────────────────────
   Everything hover-driven is gated: on a touch device :hover latches after a tap and
   leaves elements stuck in their hover state. */
@media (hover: none){
  .btn:hover,.chip:hover{background:var(--surface);border-color:var(--border);color:var(--ink2);}
  .info-btn:hover{background:var(--bg);border-color:var(--border);color:var(--ink3);}
  /* :not(.open) so a latched hover cannot out-specify a deliberate tap. */
  .tooltip-wrap:hover .tooltip-box:not(.open),
  .info-btn:hover + .tooltip-box:not(.open){display:none;}
}

/* iOS Safari auto-zooms any focused input under 16px and does not zoom back out,
   leaving the page scaled and scrolled sideways. */
@media (hover: none), (max-width: 900px){
  .finp,.chat-in,select.finp,input.finp{font-size:16px;}
}

/* The explainer tooltips are the product's whole point and were hover-only, so on a
   phone the defining feature was the broken one. map.js toggles .open on tap. */
.tooltip-wrap .tooltip-box.open{display:block;}   /* (0,3,0): beats the hover rules */

/* 16x16 dot against a 44px minimum: grow the hit area, not the dot. */
.info-btn{position:relative;}
.info-btn::after{content:'';position:absolute;inset:-14px;}


/* ── Responsive ───────────────────────────────────────────────────────────────
   The mockup was desktop-only (no media queries at all). Breakpoints, largest
   first: grids thin out, then the sidebar becomes a horizontal top bar, then the
   map's overlaid title moves into normal flow where it would otherwise sit on
   top of the landmass. */

/* Wide tables never squeeze — they scroll inside their own card. */
/* Every table wrapper scrolls, not just the flush ones: the Margin Waterfall's table is
   665px inside a 356px card on a phone and was overflowing its container. They carry
   tabindex/role/aria-label in the markup so the scroll is reachable by keyboard too, and
   the focus ring is inset because the region is flush to the card edge. */
/* The bars encoded value in CSS height and status in colour alone, with nothing readable
   and nothing focusable. The printed percentage is now the value for everyone, which also
   removes the colour-only status dependency; focus reveals the same thing hover would. */
.bar-val{font-size:var(--fs-xs);font-weight:600;color:var(--ink2);font-family:var(--mono);
  text-align:center;margin-bottom:4px;line-height:1;}
.bar-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}

.card-body.flush,.card-body:has(> table.tbl){overflow-x:auto;-webkit-overflow-scrolling:touch;}
.card-body[role="region"]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.tbl{min-width:640px;}
@media (max-width:980px){
  .g32,.g2,.pform{grid-template-columns:1fr;}
  .main{padding:0 20px 22px;}
}

@media (max-width:900px){
}

/* Grid items default to min-width:auto, so a 1fr column cannot shrink below its content's
   min-content width. The Competitor Intelligence card holds a 640px table, which floored its
   column at 682px inside a 358px grid and scrolled the whole page sideways. */
.g2 > *{min-width:0;}

/* The six multi-column grids are defined by inline style attributes carried over from the
   original mockup, so collapsing them on a phone needs !important to outrank the attribute.
   Without it the Margin Waterfall's two-column config/result pair kept its desktop width and
   pushed the page to 702px inside a 390px viewport. */
@media (max-width:760px){
  .g2{grid-template-columns:minmax(0,1fr) !important;}
}

@media (max-width:760px){
  .main{padding:0 16px 18px;}
  .masthead{padding-top:74px;gap:13px;}
  .masthead h1{font-size:24px;}
  .mh-logo{width:38px;height:38px;}
  .ph{flex-direction:column;gap:12px;}
  .ph-actions{width:100%;}
  .ph-actions .btn{flex:1;}
}

@media (max-width:520px){
  .stats,.how-grid{grid-template-columns:1fr;}
}

/* ── Reduced motion ───────────────────────────────────────────────────────────
   Scoped, not a blanket `*{transition:.001ms}`: decoration goes, functional
   feedback (the chat typing indicator, focus rings, hover colour changes) stays,
   because those communicate state rather than decorate it. */
@media (prefers-reduced-motion:reduce){
  /* Movement goes; feedback stays. The chat typing dots, focus rings and every
     hover/active colour change are deliberately untouched — they communicate state
     rather than decorate it. Never a blanket *{transition:.001ms}. */
  .pg{animation:none;}
  .sidebar,.scrim,body.menu-open .sidebar,body.menu-open .scrim{transition:none;}
  .menu-btn .bars i{transition:none;}
  .sb-link,body.menu-open .sb-link{transition:background .2s ease,color .2s ease;}
}

/* ── Focus ────────────────────────────────────────────────────────────────────
   Six selectors carried a focus style; twelve sections of buttons, links and selects
   did not. This is the fallback, after them in source order so the bespoke rings
   (which are tuned to their own backgrounds) still win where they exist. */
:where(button,a,select,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:3px;}