/* this page has no corner bloom */
  .mp-glow{display:none;}

  /* ---- WEBSITE PAGE ---- */
  .ws-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
  .ws-head b{display:block;font-size:16px;font-weight:500;color:var(--ink);}
  .ws-head i{display:block;font-style:normal;font-size:11px;line-height:1.45;color:var(--muted);
    margin-top:3px;max-width:250px;}
  .ws-pub{flex-shrink:0;padding:6px 14px;border-radius:9px;font-size:11.5px;font-weight:500;color:#fff;
    background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
    box-shadow:0 8px 16px -9px rgba(232,70,10,.9);}
  .ws-tpl{display:flex;gap:13px;margin-top:14px;padding:12px;border-radius:14px;background:#fff;
    border:1px solid rgba(20,15,10,.055);box-shadow:0 12px 24px -20px rgba(120,70,30,.8);}
  .ws-thumb{position:relative;width:96px;height:72px;border-radius:9px;flex-shrink:0;
    background:#FBF4EE;border:1px solid rgba(20,15,10,.06);overflow:hidden;}
  .ws-thumb i{position:absolute;display:block;border-radius:3px;}
  .ws-thumb .a{left:6px;top:6px;width:30px;height:7px;background:#3E7C74;}
  .ws-thumb .b{left:6px;top:18px;right:34px;height:26px;background:#C98A7A;}
  .ws-thumb .c{right:6px;top:18px;width:24px;height:26px;background:#FFF;border:1px solid rgba(20,15,10,.08);}
  .ws-thumb .d{left:6px;right:6px;bottom:6px;height:9px;background:#4A3E35;}
  .ws-tpx b{display:block;font-size:13px;font-weight:500;color:var(--ink);}
  .ws-tpx u{display:block;font-size:11px;font-weight:500;color:var(--muted);text-decoration:none;margin-top:2px;}
  .ws-tpx em{display:block;font-style:normal;font-size:10.5px;line-height:1.45;color:var(--muted);
    margin-top:7px;opacity:.85;}
  .ws-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px;}
  .ws-tile{border-radius:12px;padding:10px 11px;background:#fff;
    border:1px solid rgba(20,15,10,.055);box-shadow:0 10px 20px -18px rgba(120,70,30,.8);}
  .ws-tile b{display:block;font-size:11.5px;font-weight:500;color:var(--ink);}
  .ws-tile u{display:block;font-size:10px;font-weight:500;color:var(--muted);text-decoration:none;margin-top:5px;}
  .ws-tile u.live{color:#2E7B6E;}

  .ws-band{position:relative;z-index:1;padding:86px 0 20px;}
  .ws-lead{max-width:640px;margin:16px auto 0;text-align:center;font-size:16px;line-height:1.62;
    color:var(--muted);}
  .ws-subs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;}
  .ws-sub{border-radius:18px;padding:20px 19px 22px;background:#fff;
    border:1px solid rgba(20,15,10,.05);box-shadow:0 18px 36px -34px rgba(120,70,30,.85);}
  .ws-sub b{display:block;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
  .ws-sub p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--muted);}

  .ws-split{position:relative;z-index:1;padding:76px 0 0;}
  .ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .ws-eye{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--primary-text);}
  .ws-h3{margin:13px 0 0;font-size:34px;font-weight:400;letter-spacing:-.01em;color:var(--ink);}
  .ws-p{margin:16px 0 0;font-size:16px;line-height:1.62;color:var(--muted);max-width:440px;}
  .ws-card{padding:22px 24px 24px;}

  .seo-top{display:flex;align-items:baseline;gap:9px;}
  .seo-top b{font-size:40px;font-weight:400;letter-spacing:-.03em;color:var(--ink);}
  .seo-top span{font-size:14px;color:var(--muted);}
  .seo-band{font-style:normal;margin-left:4px;padding:4px 11px;border-radius:100px;font-size:11.5px;
    font-weight:500;background:rgba(239,23,99,.1);color:#C01059;}
  .seo-bars{margin-top:20px;display:flex;flex-direction:column;gap:14px;}
  .seo-row{display:grid;grid-template-columns:1fr 34px;gap:4px 10px;align-items:center;}
  .seo-lb{grid-column:1 / -1;font-size:13px;font-weight:500;color:var(--ink);}
  .seo-lb i{font-style:normal;font-weight:400;color:var(--muted);}
  .seo-tr{height:7px;border-radius:100px;background:rgba(20,15,10,.07);overflow:hidden;}
  .seo-tr i{display:block;height:100%;border-radius:100px;
    background:linear-gradient(90deg,#FF7A29,#EF1763);}
  .seo-vl{font-size:13px;font-weight:500;color:var(--ink);text-align:right;}
  .seo-fixes{margin-top:22px;}
  .seo-fixes b{display:block;font-size:13px;font-weight:500;color:var(--ink);}
  .seo-fx{display:flex;align-items:center;gap:9px;margin-top:9px;padding:9px 11px;border-radius:10px;
    background:#FFF9F2;border:1px solid rgba(232,70,10,.1);font-size:12px;color:var(--ink);}
  .seo-fx i{font-style:normal;flex-shrink:0;padding:3px 8px;border-radius:100px;font-size:10.5px;
    font-weight:500;background:rgba(232,70,10,.13);color:var(--primary-deep);}
  .seo-fx u{text-decoration:none;color:var(--muted);font-size:11.5px;}

  .ws-split.alt{padding-top:84px;}
  .bl-head{display:flex;align-items:center;justify-content:space-between;}
  .bl-head b{font-size:16px;font-weight:500;color:var(--ink);}
  .bl-list{margin-top:14px;}
  .bl-row{display:grid;grid-template-columns:1.05fr 2fr .7fr .8fr;gap:10px;align-items:center;
    padding:10px 0;border-top:1px solid rgba(20,15,10,.055);font-size:11.5px;}
  .bl-row.hd{border-top:0;color:var(--muted);font-weight:500;}
  .bl-ref{color:var(--primary-text);font-weight:500;word-break:break-all;}
  .bl-ti{color:var(--ink);}
  .bl-st{color:var(--muted);}
  .bl-st.pub{color:#2E7B6E;}
  .bl-lg{color:var(--muted);text-align:right;}
  .bl-row.hd .bl-ref, .bl-row.hd .bl-ti{color:var(--muted);}
  .ai-lp{margin-top:20px;padding:15px 16px;border-radius:14px;background:#FFF9F2;
    border:1px solid rgba(232,70,10,.1);}
  .ai-lp b{display:block;font-size:13px;font-weight:500;color:var(--ink);}
  .ai-lp span{display:block;margin-top:7px;font-size:12px;line-height:1.55;color:var(--muted);}
  .ai-lp u{text-decoration:none;color:var(--ink);}
  .ai-lg{display:flex !important;align-items:center;gap:6px;margin-top:11px !important;}
  .ai-lg i{font-style:normal;padding:3px 9px;border-radius:100px;font-size:10.5px;font-weight:500;
    background:rgba(20,15,10,.055);color:var(--ink);}
  .ai-lg em{font-style:normal;margin-left:auto;padding:3px 10px;border-radius:100px;font-size:10.5px;
    font-weight:500;background:rgba(46,123,110,.12);color:#2E7B6E;}

  @media (max-width: 860px){
    .mp-hero{grid-template-columns:1fr;gap:34px;padding:70px 0 50px;}
    .mp-h1{font-size:44px;}
  }
  @media (max-width: 860px){
    .ws-subs{grid-template-columns:repeat(2,1fr);}
    .ws-grid{grid-template-columns:1fr;gap:30px;}
  }

  /* ---- page surface: white, with one warm bloom in the top-right corner ---- */
  .ws-sub, .mp-card{background:#FAFBFE;border:0;box-shadow:none;}
  .ws-sub:hover, .mp-card:hover{background:#F5F7FC;}
  /* the icon plate: white, soft border, soft shadow, dark glyph */
  .ws-ico2, .mp-cico{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;
    justify-content:center;background:#FFFFFF;border:1px solid rgba(20,15,10,.07);
    box-shadow:0 1px 2px rgba(88,62,50,.05), 0 10px 20px -14px rgba(88,62,50,.7);}
  .ws-sub .ws-ico2{margin-bottom:15px;}
  .mp-cico{width:44px;height:44px;border-radius:14px;}

  /* ---- STATISTICS PAGE ---- */
  .st-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
  .st-tile{padding:11px 12px;border-radius:12px;color:#fff;}
  .st-tile.a{background:linear-gradient(150deg,#6E9AD4,#4E7CBC);}
  .st-tile.b{background:linear-gradient(150deg,#4E7CBC,#2F5E9E);}
  .st-tile.c{background:linear-gradient(150deg,#3A6FA8,#274F86);}
  .st-tile.d{background:linear-gradient(150deg,#4F9E86,#2E7B6E);}
  .st-tile.e{background:linear-gradient(150deg,#2E7B6E,#1F5A52);}
  .st-tile.f{background:linear-gradient(150deg,#5E8FC4,#3E9A86);}
  .st-tile u{display:block;text-decoration:none;font-size:9px;font-weight:500;opacity:.85;}
  .st-tile b{display:block;margin-top:4px;font-size:18px;font-weight:400;letter-spacing:-.02em;}
  .st-tile em{display:block;font-style:normal;margin-top:2px;font-size:8.5px;opacity:.8;}
  .st-fun{margin-top:12px;padding:11px 12px;border-radius:12px;background:#fff;
    border:1px solid rgba(20,15,10,.06);box-shadow:0 10px 20px -18px rgba(88,62,50,.8);}
  .st-fr{display:grid;grid-template-columns:76px 1fr 62px;gap:9px;align-items:center;margin-top:7px;}
  .st-fr:first-child{margin-top:0;}
  .st-fr u{text-decoration:none;font-size:9px;font-weight:500;color:var(--ink);}
  .st-fr i{height:6px;border-radius:100px;background:rgba(20,15,10,.07);overflow:hidden;display:block;}
  .st-fr i b{display:block;height:100%;border-radius:100px;
    background:linear-gradient(90deg,#4F9E86,#2E7B6E);}
  .st-fr em{font-style:normal;font-size:9px;font-weight:500;color:var(--ink);text-align:right;}
  .st-fr em span{color:var(--muted);font-weight:400;}

  .st-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;max-width:440px;}
  .st-chips i{font-style:normal;padding:5px 11px;border-radius:100px;font-size:11px;font-weight:500;
    background:#FAFBFE;border:1px solid rgba(20,15,10,.07);color:var(--ink);}
  .st-chead, .st-crow{display:grid;grid-template-columns:1.5fr .6fr .9fr .9fr;gap:9px;align-items:center;}
  .st-chead{margin-top:16px;padding-bottom:9px;border-bottom:1px solid rgba(20,15,10,.08);}
  .st-chead u, .st-chead i, .st-chead em{text-decoration:none;font-style:normal;font-size:8.5px;
    font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2E7B6E;}
  .st-chead i, .st-chead em{text-align:right;}
  .st-crow{padding:11px 0;border-top:1px solid rgba(20,15,10,.05);}
  .st-crow:first-child{border-top:0;}
  .st-crow u{text-decoration:none;font-size:12px;font-weight:500;color:var(--ink);}
  .st-crow i{font-style:normal;font-size:11.5px;color:var(--muted);text-align:right;}
  .st-crow em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink);text-align:right;}
  .st-crow.hi em{color:#C01059;}
  .st-crow.lo em{color:#2E7B6E;}

  .st-drill{display:flex;align-items:center;gap:7px;margin-top:15px;flex-wrap:wrap;}
  .st-dstep{padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:500;
    background:#FAFBFE;border:1px solid rgba(20,15,10,.07);color:var(--muted);}
  .st-dstep.on{background:rgba(232,70,10,.1);border-color:rgba(232,70,10,.18);color:var(--primary-deep);}
  .st-dsep{color:var(--muted);font-size:12px;}
  .st-rec{margin-top:16px;}
  .st-rh, .st-rrow{display:grid;grid-template-columns:.85fr .6fr 1fr .8fr .9fr;gap:8px;align-items:center;}
  .st-rh{padding-bottom:9px;border-bottom:1px solid rgba(20,15,10,.08);}
  .st-rh u, .st-rh i, .st-rh em{text-decoration:none;font-style:normal;font-size:8.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;color:#2E7B6E;}
  .st-rrow{padding:10px 0;border-top:1px solid rgba(20,15,10,.05);font-size:11.5px;color:var(--muted);}
  .st-rrow u{text-decoration:none;font-weight:500;color:var(--ink);}
  .st-rrow em{font-style:normal;color:var(--ink);}

  /* ---- closing CTA, as on the home page ---- */
  .btn-primary, .btn-accent{
    background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);
    color:#fff;padding:14px 28px;border-radius:16px;font-weight:600;font-size:15px;
    box-shadow:0 10px 24px -8px rgba(232,70,10,.5), 0 0 26px 2px rgba(239,23,99,.22);
    transition:transform .2s ease, box-shadow .2s ease;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn-primary:hover, .btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(232,70,10,.6), 0 0 32px 4px rgba(239,23,99,.3);color:#fff;}
  /* third, quieter type: near-black solid, used for the nav's demo button so the
     gradient accent stays reserved for the page's primary calls to action */
  .btn-dark{
    background:#1A120A;color:#fff;padding:14px 28px;border-radius:16px;font-weight:600;font-size:15px;
    box-shadow:0 8px 18px -8px rgba(20,15,10,.45);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn-dark:hover{background:#2A1D10;color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(20,15,10,.55);}
  .kq-section{position:relative;z-index:1;padding:120px 0 70px;text-align:center;}
  .kq-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:100px;
    background:#fff;border:1px solid rgba(30,50,90,.1);font-size:13px;font-weight:600;color:var(--muted);
    box-shadow:0 8px 18px -14px rgba(20,15,10,.4);}
  .kq-q{margin-top:26px;font-size:54px;font-weight:400;line-height:1.14;
    letter-spacing:-.005em;color:var(--ink);}
  .kq-q b{font-weight:400;}
  .kq-q span{font-weight:400;color:var(--muted);}
  .kq-sub{margin:22px auto 0;max-width:560px;font-size:16.5px;line-height:1.62;color:var(--muted);}

  .kq-section .fx-inner{max-width:1240px;margin:0 auto;padding:0 40px;}
  /* the CTA now occupies the feather, so the solid block starts where it does
     on the home page rather than right under the heading */
  .mp-foot .close-bg{top:860px;}
  .mp-foot .ft-inner{padding-top:215px;}
  @media (max-width: 860px){ .kq-section{padding:70px 0 50px;} }

  /* ---- surface: soft off-white page, translucent white cards with a gradient rim ----
     The rim is the two-background trick: the fill is painted to the padding box and the
     gradient to the border box, so a 1px transparent border shows the gradient through
     it. One element, no pseudo, and it follows the radius exactly. */
  .mp{background:#F4F5F8;}
  .ws-sub, .mp-card{
    border:1px solid transparent;
    background:
      linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) padding-box,
      linear-gradient(152deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 42%,
        rgba(255,255,255,.22) 100%) border-box;
    box-shadow:none;
  }
  .ws-sub:hover, .mp-card:hover{
    background:
      linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) padding-box,
      linear-gradient(152deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 42%,
        rgba(255,255,255,.34) 100%) border-box;
  }
  /* the mock screens and icon plates stay properly white so they read as objects on it */
  .mp-shot{background:#FFFFFF;}
  .ws-ico2, .mp-cico{background:#FFFFFF;}
  .mp-side{background:#FAFBFD;}
  .btn-ghost, .btn-outline{
    background:#fff;color:var(--ink);padding:14px 26px;border-radius:16px;font-weight:600;font-size:15px;
    border:1.5px solid rgba(20,15,10,.1);box-shadow:0 4px 10px -6px rgba(20,15,10,.14);
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn-ghost:hover, .btn-outline:hover{border-color:rgba(20,15,10,.2);transform:translateY(-2px);color:var(--ink);box-shadow:0 8px 16px -8px rgba(20,15,10,.18);}
  .btn-sm{padding:10px 18px;font-size:13.5px;gap:6px;}
  .btn-lg{padding:19px 38px;font-size:17px;gap:10px;}
  /* the CTA sits closer to the footer than it does on the home page, which has a whole
     section of its own above it */
  .kq-section{padding:104px 0 48px !important;}
  .mp-foot .close-bg{top:690px;}
  .mp-foot .ft-inner{padding-top:196px;}

  /* ---- hover: a warm bloom that follows the pointer ----
     The card keeps its gradient rim on `background`, so the glow lives on its own layer
     and is clipped by the card's radius. --mx/--my are written by the pointer handler. */
  .ws-sub, .mp-card{position:relative;overflow:hidden;isolation:isolate;
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)) padding-box,
      linear-gradient(152deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 42%,
        rgba(255,255,255,.22) 100%) border-box;}
  .ws-sub::after, .mp-card::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
    transition:opacity .35s ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
      rgba(255,122,41,.13) 0%, rgba(239,23,99,.05) 40%, transparent 74%);
    filter:blur(26px);}
  .ws-sub:hover::after, .mp-card:hover::after{opacity:1;}
  .ws-sub:hover, .mp-card:hover{
    background:
      linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,.62)) padding-box,
      linear-gradient(152deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 42%,
        rgba(255,255,255,.34) 100%) border-box;}
  .ws-sub > *, .mp-card > *{position:relative;}

  /* the CTA sits closer to the content now that the illustrated sections are out */
  .mp-band{padding:76px 0 44px !important;}
  .kq-section{padding:56px 0 44px !important;}
  .mp-foot .close-bg{top:790px;}
  /* ---- DASHBOARD PAGE ----
     The hero mock is a miniature of the real Overview screen: a period switch, four
     KPI tiles, the leads queue and the enquiry-source donut. Sizes are deliberately
     small — it reads as a screenshot, not as a component to use at full size. */
  .db-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .db-head b{display:block;font-size:16px;font-weight:500;color:var(--ink);}
  .db-head i{display:block;font-style:normal;font-size:10.5px;line-height:1.4;color:var(--muted);margin-top:3px;}
  .db-per{display:flex;gap:3px;flex-shrink:0;padding:3px;border-radius:100px;background:#F2F4F8;}
  .db-per u{text-decoration:none;padding:4px 10px;border-radius:100px;font-size:9.5px;font-weight:500;
    color:var(--muted);}
  .db-per u.on{background:#fff;color:var(--primary-text);font-weight:600;
    box-shadow:0 4px 9px -6px rgba(88,62,50,.8);}
  .db-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
  .db-kpi{position:relative;padding:10px 11px 11px;border-radius:12px;background:#fff;
    border:1px solid rgba(20,15,10,.055);box-shadow:0 10px 20px -17px rgba(88,62,50,.85);}
  .db-kpi u{display:block;text-decoration:none;font-size:8.5px;font-weight:600;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);}
  .db-kpi b{display:block;margin-top:5px;font-size:20px;font-weight:400;letter-spacing:-.03em;color:var(--ink);}
  .db-kpi em{display:block;font-style:normal;margin-top:4px;font-size:8.5px;line-height:1.4;color:var(--muted);}
  .db-kpi.warn b{color:#C01059;}
  /* pinned to the footnote line, not the title corner — the title is the one thing
     that legitimately wraps to two lines, and it used to run underneath this. */
  .db-spark{position:absolute;right:10px;bottom:11px;width:38px;height:14px;}
  .db-kpi.has-spark em{padding-right:44px;}
  .db-two{display:grid;grid-template-columns:1.25fr .95fr;gap:9px;margin-top:10px;}
  .db-panel{padding:11px 12px 12px;border-radius:12px;background:#fff;
    border:1px solid rgba(20,15,10,.055);box-shadow:0 10px 20px -17px rgba(88,62,50,.85);}
  .db-pt{display:flex;align-items:center;gap:6px;}
  .db-pt b{font-size:10.5px;font-weight:600;color:var(--ink);}
  .db-pt i{font-style:normal;padding:1px 7px;border-radius:100px;font-size:8.5px;font-weight:500;
    background:rgba(239,23,99,.1);color:#C01059;}
  .db-pt svg{margin-left:auto;}
  .db-lead{display:flex;align-items:center;gap:7px;padding:7px 0;border-top:1px solid rgba(20,15,10,.05);}
  .db-lead:nth-of-type(2){border-top:0;}
  .db-av{width:19px;height:19px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
    justify-content:center;font-size:8px;font-weight:600;color:#fff;}
  .db-ln{min-width:0;}
  .db-ln u{display:block;text-decoration:none;font-size:10px;font-weight:500;color:var(--ink);}
  .db-ln em{display:block;font-style:normal;font-size:8.5px;color:var(--muted);margin-top:1px;}
  .db-tag{margin-left:auto;flex-shrink:0;padding:2px 7px;border-radius:100px;font-size:8px;font-weight:500;
    background:#F2F4F8;color:var(--muted);}
  .db-rep{flex-shrink:0;padding:3px 9px;border-radius:100px;font-size:8px;font-weight:600;color:#fff;
    background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);}
  .db-wait{margin-top:8px;font-size:8.5px;line-height:1.45;color:var(--muted);}
  .db-donut{display:flex;align-items:center;gap:11px;margin-top:11px;}
  .db-ring{position:relative;width:64px;height:64px;border-radius:50%;flex-shrink:0;
    background:conic-gradient(#EF1763 0 33.3%, #7E9A5A 33.3% 66.6%, #A8BE7E 66.6% 100%);}
  .db-ring::after{content:'6';position:absolute;inset:13px;border-radius:50%;background:#fff;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400;color:var(--ink);}
  .db-leg{min-width:0;}
  .db-lg{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:8.5px;color:var(--ink);}
  .db-lg:first-child{margin-top:0;}
  .db-lg s{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
  .db-lg i{font-style:normal;margin-left:auto;color:var(--muted);}
  /* ---- footer language switcher ----
     Real links (aria-current on this page's language) rather than styled divs, so it is reachable by Tab
     and announced as a list. The active pill is solid white on the orange ground —
     white-on-orange text at this size would not clear 4.5:1 on its own. */
  .ft-lang{margin-left:auto;display:flex;align-items:center;gap:2px;
    padding:2px 2px 2px 8px;border-radius:100px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);}
  .ft-lang > svg{flex-shrink:0;margin-right:4px;opacity:.9;}
  .ft-lang a{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
    font-family:inherit;padding:3px 9px;border-radius:100px;font-size:10.5px;font-weight:600;
    letter-spacing:.03em;background:transparent;color:#fff;
    transition:background .25s ease, color .25s ease;}
  .ft-lang a:hover{background:rgba(255,255,255,.2);color:#fff;}
  .ft-lang a[aria-current="true"]{background:#fff;color:var(--primary-text);
    box-shadow:0 5px 11px -8px rgba(60,10,20,.55);}
  /* ---- the product shot never cramps ----
     The mock is drawn at ONE design width and then zoomed to whatever the grid column
     actually gives it. Reflowing it instead — wrapping labels, shrinking paddings at a
     handful of breakpoints — is what produced the collisions: a two-line KPI label ran
     under the sparkline pinned to its corner. Zoom scales type and spacing together, so
     the screenshot stays a screenshot at every width. `zoom` (not `transform`) because
     zoom affects layout, so the frame's height follows and no gap opens beneath it. */
  .mp-frame{min-width:0;}
  .mp-frame .mp-shot{width:var(--shot-w, 767px);}
  /* ---- panel actions are buttons ----
     Only one page ever carried these rules, so on the others <i> and <em> fell back to
     the browser's italic and the actions read as prose. <em> is the panel's primary
     action and takes the accent fill; <i> is a secondary one and takes the outline.
     Pages whose only actions are filters have no <em>, so they are all outline. */
  .ct-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .ct-head b{font-size:16px;font-weight:500;color:var(--ink);}
  .ct-acts{display:flex;align-items:center;gap:7px;flex-shrink:0;}
  .ct-acts i, .ct-acts em{font-style:normal;display:inline-flex;align-items:center;
    padding:6px 12px;border-radius:9px;font-size:10.5px;font-weight:500;white-space:nowrap;
    line-height:1.2;}
  .ct-acts i{background:#FFFFFF;color:var(--ink);border:1px solid rgba(20,15,10,.13);
    box-shadow:0 5px 12px -10px rgba(88,62,50,.9);}
  .ct-acts em{color:#FFFFFF;border:1px solid transparent;
    background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
    box-shadow:0 8px 16px -10px rgba(232,70,10,.9);}