/* Dashboard-mockup component — shared across marketing pages.
   Pairs with templates/website/blocks/dashboard-mockup/{shell,sidebar,topbar}.html.twig
   and the .mcard cards in the hero body slot. Tokens (--line, --ink, --mono, --soft,
   --muted) must be defined by the page's primary stylesheet. */

  .hero-dash-wrap{
    perspective:2200px;
    position:relative;
  }
  .hero-dash-wrap::after{
    content:'';
    position:absolute;left:8%;right:8%;bottom:-30px;height:80px;
    background:radial-gradient(ellipse at center, rgba(0,163,95,.45), transparent 70%);
    filter:blur(20px);
    z-index:0;pointer-events:none;
  }
  .hero-dash{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    max-height:460px;
    box-shadow:0 2px 4px rgba(0,0,0,.12),0 30px 70px -24px rgba(0,0,0,.42);
    position:relative;
    user-select:none;
    -webkit-user-select:none;
    cursor:default;
  }
  .hero-dash-wrap > .hero-dash,
  .hero-dash-wrap > .browser-frame{
    transform:rotateY(-9deg) rotateX(6deg) rotateZ(.5deg) scale(.92);
    transform-origin:center center;
    box-shadow:0 2px 4px rgba(0,0,0,.18),
               0 60px 100px -30px rgba(0,0,0,.55),
               -40px 30px 80px -40px rgba(0,163,95,.28);
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
    z-index:1;
  }
  .hero-dash-wrap:hover > .hero-dash,
  .hero-dash-wrap:hover > .browser-frame{
    transform:rotateY(-5deg) rotateX(3deg) rotateZ(0) scale(.92);
  }
  @media (prefers-reduced-motion: reduce){
    .hero-dash-wrap > .hero-dash,
    .hero-dash-wrap > .browser-frame{transition:none}
  }
  .hero-dash::before{
    content:'';position:absolute;inset:0;z-index:10;
    pointer-events:auto;background:transparent;
  }
  .hero-dash img{
    -webkit-user-drag:none;user-drag:none;pointer-events:none;
  }
  .hero-dash .app{display:grid;grid-template-columns:158px 1fr;min-height:460px;height:460px}

  /* Sidebar */
  .hero-dash .sb{
    background:#2c3e50;color:#f4f4f5;
    display:flex;flex-direction:column;font-size:11.5px;
  }
  .hero-dash .sb-head{
    height:38px;padding:0 12px;
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .hero-dash .sb-logo{display:inline-flex;align-items:center}
  .hero-dash .sb-collapse{
    width:22px;height:22px;border-radius:5px;
    display:grid;place-items:center;color:rgba(255,255,255,.5);
  }
  .hero-dash .sb-collapse svg{width:13px;height:13px}

  .hero-dash .sb-nav{padding:8px 6px;flex:1;overflow:hidden}
  .hero-dash .sb-item{
    display:flex;align-items:center;gap:8px;
    padding:5px 8px;border-radius:5px;
    color:rgba(255,255,255,.78);font-weight:500;letter-spacing:-.005em;
    margin:1px 0;cursor:default;
  }
  .hero-dash .sb-item svg{width:12px;height:12px;opacity:.8;flex:0 0 auto}
  .hero-dash .sb-item .chev{margin-left:auto;opacity:.55}
  .hero-dash .sb-item.active{
    background:#34495e;color:#fff;font-weight:600;
  }
  .hero-dash .sb-item.active svg{color:#fff;opacity:1}
  .hero-dash .sb-sub{display:flex;flex-direction:column;margin:0 0 4px 22px}
  .hero-dash .sb-sub a{
    padding:3px 8px;border-radius:4px;
    color:rgba(255,255,255,.62);font-size:11px;font-weight:500;
    text-decoration:none;cursor:default;
  }
  .hero-dash .sb-sub a.active{background:#34495e;color:#fff;font-weight:600}
  .hero-dash .sb-divider{
    height:1px;background:rgba(255,255,255,.06);margin:6px 8px;
  }

  /* Main area */
  .hero-dash .main{display:flex;flex-direction:column;min-width:0;background:#f4f4f5}
  .hero-dash .tb{
    height:40px;display:flex;align-items:center;gap:10px;padding:0 14px;
    background:#fff;border-bottom:1px solid var(--line);
  }
  .hero-dash .tb-search{
    flex:1;display:flex;align-items:center;gap:7px;
    height:26px;padding:0 10px;
    border:1px solid var(--line-2);border-radius:6px;background:#fafafa;
    color:var(--soft);font-size:11.5px;
  }
  .hero-dash .tb-search svg{width:12px;height:12px;color:var(--soft)}
  .hero-dash .tb-actions{display:flex;align-items:center;gap:4px}
  .hero-dash .tb-ico{
    width:24px;height:24px;border-radius:5px;
    display:grid;place-items:center;color:var(--muted);
  }
  .hero-dash .tb-ico svg{width:13px;height:13px}
  .hero-dash .tb-user{
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 4px 3px 8px;border-radius:99px;
    font-size:11.5px;font-weight:500;color:var(--ink);
  }
  .hero-dash .tb-user .ava{
    width:22px;height:22px;border-radius:50%;
    background:#00a35f;
    color:#fff;font-weight:600;font-size:10px;
    display:grid;place-items:center;
  }

  /* Card grid */
  .hero-dash .grid, .mm-shell .grid{
    flex:1;padding:12px;
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    align-content:start;overflow:hidden;
  }
  .hero-dash .mcard, .mm-shell .mcard{
    background:#fff;border:1px solid var(--line);border-radius:7px;
    padding:9px 10px;box-shadow:0 1px 1px rgba(15,17,26,.03);
    display:flex;flex-direction:column;gap:4px;min-height:80px;
  }
  .hero-dash .mcard.down, .mm-shell .mcard.down{background:#fef5f5;border-color:#f5cdcd}
  .hero-dash .mcard-top, .mm-shell .mcard-top{display:flex;align-items:center;gap:6px;min-width:0}
  .hero-dash .mcard-dot, .mm-shell .mcard-dot{
    width:6px;height:6px;border-radius:50%;background:#15803d;flex:0 0 auto;
  }
  .hero-dash .mcard.down .mcard-dot, .mm-shell .mcard.down .mcard-dot{background:#b91c1c}
  .hero-dash .mcard-name, .mm-shell .mcard-name{
    font-weight:600;font-size:11.5px;color:var(--ink);letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;
  }
  .hero-dash .mcard.down .mcard-name, .mm-shell .mcard.down .mcard-name{color:#b91c1c}
  .hero-dash .mcard-tag, .mm-shell .mcard-tag{
    font-family:var(--mono);font-size:8px;font-weight:600;
    color:var(--muted);letter-spacing:.08em;
    padding:1px 4px;border:1px solid var(--line-2);border-radius:3px;
    background:#fafafa;flex:0 0 auto;
  }
  .hero-dash .mcard-top .right, .mm-shell .mcard-top .right{
    margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--soft);
  }
  .hero-dash .mcard-cb, .mm-shell .mcard-cb{
    width:11px;height:11px;border:1px solid var(--line-3);
    border-radius:2px;display:inline-block;
  }
  .hero-dash .mcard-dots, .mm-shell .mcard-dots{
    color:var(--soft);font-size:11px;line-height:1;letter-spacing:0;font-weight:700;
  }
  .hero-dash .mcard-mid, .mm-shell .mcard-mid{
    display:flex;align-items:center;gap:6px;min-width:0;font-size:10.5px;
  }
  .hero-dash .mcard-status, .mm-shell .mcard-status{
    font-family:var(--mono);font-weight:600;font-size:9.5px;
    color:#15803d;letter-spacing:.04em;flex:0 0 auto;
    display:inline-flex;align-items:center;gap:4px;
  }
  .hero-dash .mcard.down .mcard-status, .mm-shell .mcard.down .mcard-status{color:#b91c1c}
  .hero-dash .mcard-status .d, .mm-shell .mcard-status .d{
    width:5px;height:5px;border-radius:50%;background:#15803d;display:inline-block;
  }
  .hero-dash .mcard.down .mcard-status .d, .mm-shell .mcard.down .mcard-status .d{background:#b91c1c}
  .hero-dash .mcard-url, .mm-shell .mcard-url{
    font-family:var(--mono);font-size:10px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    flex:1;min-width:0;letter-spacing:-.005em;
  }
  .hero-dash .mcard.down .mcard-url, .mm-shell .mcard.down .mcard-url{color:#b91c1c;opacity:.8}
  .hero-dash .mcard-foot, .mm-shell .mcard-foot{
    display:flex;align-items:center;justify-content:space-between;
    font-family:var(--mono);font-size:10.5px;font-weight:600;
    color:#15803d;font-variant-numeric:tabular-nums;margin-top:auto;
  }
  .hero-dash .mcard.down .mcard-foot, .mm-shell .mcard.down .mcard-foot{color:#b91c1c}
  .hero-dash .mcard-ms, .mm-shell .mcard-ms{color:var(--ink);font-weight:500}
  .hero-dash .mcard-ms.muted, .mm-shell .mcard-ms.muted{color:var(--soft);font-weight:400}

  /* When the hero-dash is nested inside the .mm-shell browser-mockup frame,
     drop the inner card's border-radius and shadow so the two frames don't
     visually compete. The mm-shell handles the outer rounding/shadow. */
  .mm-shell .hero-dash{
    border-radius:0;
    box-shadow:none;
  }
  /* The .mm-shell already prevents text selection (rule in homepage-v30.css),
     so the inner dashboard's own ::before overlay is redundant — but harmless. */

  /* .dash-with-bar — minimal wrapper for the dashboard mockup + browser-window
     bar (.mm-bar). Rounded corners + overflow:hidden clip both into one unit;
     no outer border or shadow, so no "double frame" against the page. */
  .dash-with-bar{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    user-select:none;-webkit-user-select:none;
    cursor:default;
  }
  .dash-with-bar .hero-dash{
    border-radius:0;
    box-shadow:none;
  }

  /* ═════════ Browser-frame — universal "screenshot" chrome ═════════
     Ported from homepage-v3.css. Matches the frame used in the homepage's
     "Reports your stakeholders actually read." mockup. Every product
     screenshot/mockup on this page should use this frame for visual
     consistency. */
  .browser-frame{
    border-radius:12px;overflow:hidden;background:#fff;
    box-shadow:0 2px 4px rgba(0,0,0,.08),0 30px 70px -28px rgba(0,0,0,.35);
    position:relative;
    user-select:none;-webkit-user-select:none;
    cursor:default;
  }
  .browser-frame::before{
    content:'';position:absolute;inset:0;z-index:10;
    pointer-events:auto;background:transparent;
  }
  .browser-frame img{
    -webkit-user-drag:none;user-drag:none;pointer-events:none;
  }
  .browser-frame .bf-chrome{
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;
    background:linear-gradient(180deg,#edf0f3 0%,#e2e6ea 100%);
    border-bottom:1px solid #d4d9de;
  }
  .browser-frame .bf-tl{display:flex;gap:5px;flex:0 0 auto}
  .browser-frame .bf-tl span{width:9px;height:9px;border-radius:50%;display:inline-block}
  .browser-frame .bf-tl span:nth-child(1){background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
  .browser-frame .bf-tl span:nth-child(2){background:#febc2e;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
  .browser-frame .bf-tl span:nth-child(3){background:#28c840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
  .browser-frame .bf-url{
    flex:1;display:flex;align-items:center;gap:6px;
    background:#fff;border:1px solid #d4d9de;border-radius:6px;padding:3px 10px;
    font-family:var(--mono);font-size:10.5px;color:#4b5563;min-width:0;
  }
  .browser-frame .bf-url .lock{width:9px;height:9px;color:#15803d;flex:0 0 auto}
  .browser-frame .bf-url .host{color:#9ca3af}
  .browser-frame .bf-url .path{color:#111}
  /* Strip inner card chrome — frame handles the outer shell */
  .browser-frame > .hero-dash,
  .browser-frame > .mm-shell{
    border-radius:0;box-shadow:none;border:0;background:transparent;
  }
  /* When .feat-row-img contains a .browser-frame, drop its own gray panel +
     border + shadow — otherwise the frame double-stacks ("double frame").
     Keep border-radius:12px to match the inner .browser-frame so that the
     wrap's overflow:hidden clipping preserves rounded corners when the
     inner frame overflows past the viewport edge. */
  .feat-row-img:has(.browser-frame){
    background:transparent;border:0;box-shadow:none;padding:0;border-radius:12px;
  }

  /* ═════════ Probe-locations picker mockup ═════════
     Static screenshot of assets/cp/src/components/monitors/LocationsTab.tsx
     — used inside .browser-frame for the "171 Locations Worldwide" feature.
     Tokens: --line, --line-2, --ink, --ink-2, --muted, --soft, --bg-2,
     --accent, --accent-soft, --accent-line. */
  .loc-picker{
    padding:20px 22px;background:#fff;
    font-family:var(--sans);color:var(--ink);
  }

  /* Card header (numbered section heading) */
  .loc-picker .lp-head{
    display:flex;align-items:center;gap:12px;
    padding-bottom:14px;margin-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .loc-picker .lp-num{
    width:24px;height:24px;border-radius:6px;
    background:var(--accent-soft);color:var(--accent);
    border:1px solid var(--accent-line);
    display:grid;place-items:center;
    font-size:12px;font-weight:700;
  }
  .loc-picker .lp-title{
    font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  }
  .loc-picker .lp-sub{
    font-size:11.5px;color:var(--muted);margin-top:1px;
  }

  /* Use-all toggle row */
  .loc-picker .lp-toggle-row{
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
  }
  .loc-picker .lp-toggle{
    width:28px;height:16px;border-radius:99px;
    background:var(--line-2);position:relative;flex:0 0 auto;
  }
  .loc-picker .lp-toggle::after{
    content:'';position:absolute;top:2px;left:2px;
    width:12px;height:12px;border-radius:50%;background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.15);
  }
  .loc-picker .lp-toggle-label{font-size:12px;color:var(--ink-2)}
  .loc-picker .lp-muted{color:var(--soft);font-size:11px}

  /* Counter + actions */
  .loc-picker .lp-counter-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-bottom:16px;
  }
  .loc-picker .lp-count{
    font-size:11px;color:var(--soft);font-family:var(--mono);letter-spacing:.01em;
  }
  .loc-picker .lp-actions{display:flex;gap:6px}
  .loc-picker .lp-btn{
    background:#fff;border:1px solid var(--line-2);
    border-radius:6px;padding:4px 9px;
    font-family:var(--sans);font-size:11px;font-weight:500;
    color:var(--ink-2);letter-spacing:-.005em;cursor:default;
  }

  /* Region group */
  .loc-picker .lp-region{margin-bottom:14px}
  .loc-picker .lp-region:last-child{margin-bottom:0}
  .loc-picker .lp-region-head{
    display:flex;align-items:center;gap:8px;
    margin-bottom:8px;cursor:default;user-select:none;
  }
  .loc-picker .lp-region-name{
    font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
  }
  .loc-picker .lp-region-count{
    font-size:11px;color:var(--soft);font-family:var(--mono);
  }

  /* Probe cards grid */
  .loc-picker .lp-probes{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
    margin-left:22px;
  }
  .loc-picker .lp-probe{
    display:flex;align-items:center;gap:7px;min-width:0;
    padding:7px 9px;border:1px solid var(--line-2);border-radius:7px;background:#fff;
    transition:border-color .15s, background .15s;
  }
  .loc-picker .lp-probe.on{
    border-color:var(--accent-line);background:var(--accent-soft);
  }
  .loc-picker .lp-flag{font-size:13px;flex:0 0 auto;line-height:1}
  .loc-picker .lp-city{
    font-size:10.5px;font-weight:500;color:var(--ink-2);letter-spacing:-.005em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;
  }
  .loc-picker .lp-probe.on .lp-city{color:var(--ink)}

  /* Checkbox stand-in (square) */
  .loc-picker .lp-cb{
    width:13px;height:13px;border-radius:3px;
    border:1px solid var(--line-3);background:#fff;
    flex:0 0 auto;position:relative;
  }
  .loc-picker .lp-cb.on{
    background:var(--accent);border-color:var(--accent);
  }
  .loc-picker .lp-cb.on::after{
    content:'';position:absolute;left:3px;top:1px;
    width:5px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;
    transform:rotate(45deg);
  }
  .loc-picker .lp-cb.mixed{
    background:var(--accent);border-color:var(--accent);
  }
  .loc-picker .lp-cb.mixed::after{
    content:'';position:absolute;left:2px;right:2px;top:5px;height:1.6px;background:#fff;
  }

  @media (max-width:780px){
    .loc-picker .lp-probes{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  /* ═════════ Reliability cards (richer two-up) ═════════
     Replaces the plain .two-up-card on the solution-uptime page. Each card
     gets: tinted icon tile · big serif italic stat · small label · headline
     · paragraph · checked bullets. Visual rhythm matches .how-card / .step-v30. */
  .rel-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
    margin-top:32px;
  }
  .rel-card{
    position:relative;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:32px 32px 28px;
    box-shadow:0 1px 0 rgba(0,0,0,.04);
    transition:border-color .15s, transform .15s, box-shadow .15s;
    overflow:hidden;
  }
  .rel-card:hover{
    border-color:var(--green-line);transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(0,153,79,.04), 0 12px 32px -12px rgba(0,153,79,.18);
  }

  /* Decorative faint background ring */
  .rel-card::after{
    content:'';position:absolute;top:-80px;right:-80px;
    width:240px;height:240px;border-radius:50%;
    background:radial-gradient(circle, rgba(0,153,79,.06), transparent 65%);
    pointer-events:none;
  }

  .rel-ico{
    width:44px;height:44px;border-radius:12px;
    background:var(--green-soft);color:var(--btn-hover);
    border:1px solid var(--green-line);
    display:grid;place-items:center;
    margin-bottom:20px;position:relative;
  }
  .rel-stat{
    font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:54px;line-height:1;letter-spacing:-2px;
    color:var(--btn-hover);
    display:inline-flex;align-items:baseline;gap:4px;
    margin-bottom:4px;position:relative;
  }
  .rel-stat-suffix{
    font-family:var(--sans);font-style:normal;font-weight:600;
    font-size:18px;color:var(--ink-2);letter-spacing:-.01em;
  }
  .rel-stat-lab{
    font-size:12px;color:var(--muted);text-transform:uppercase;
    letter-spacing:.1em;font-weight:600;
    margin-bottom:18px;position:relative;
  }
  .rel-card h3{
    font-family:var(--sans);font-size:20px;font-weight:600;
    letter-spacing:-0.4px;line-height:1.25;color:var(--ink);
    margin:0 0 10px;position:relative;
  }
  .rel-card p{
    font-size:14.5px;color:var(--muted);line-height:1.6;
    margin:0 0 16px;position:relative;
  }
  .rel-bullets{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:8px;
    position:relative;
  }
  .rel-bullets li{
    display:flex;align-items:flex-start;gap:9px;
    font-size:13.5px;color:var(--ink-2);line-height:1.5;
  }
  .rel-bullets li svg{
    color:var(--accent);flex:0 0 auto;margin-top:3px;
  }

  @media (max-width:780px){
    .rel-grid{grid-template-columns:1fr}
    .rel-card{padding:26px 24px 24px}
    .rel-stat{font-size:44px}
  }

  /* ═════════ New-monitor form mockup (.mon-form / .mf-*) ═════════
     Static screenshot of assets/cp/src/components/monitors/MainTab.tsx —
     used inside .browser-frame for the "Very Easy To Start Monitoring" row. */
  .mon-form{
    padding:20px 22px 18px;background:#fff;
    font-family:var(--sans);color:var(--ink);
  }

  /* Numbered section heading */
  .mon-form .mf-head{
    display:flex;align-items:center;gap:12px;
    padding-bottom:14px;margin-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .mon-form .mf-num{
    width:24px;height:24px;border-radius:6px;
    background:var(--accent-soft);color:var(--accent);
    border:1px solid var(--accent-line);
    display:grid;place-items:center;
    font-size:12px;font-weight:700;
  }
  .mon-form .mf-title{
    font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  }
  .mon-form .mf-sub{
    font-size:11.5px;color:var(--muted);margin-top:1px;
  }

  /* Field */
  .mon-form .mf-field{margin-bottom:12px}
  .mon-form .mf-label{
    display:block;font-size:10.5px;color:var(--muted);
    text-transform:uppercase;letter-spacing:.08em;font-weight:600;
    margin-bottom:5px;
  }
  .mon-form .mf-input{
    display:flex;align-items:center;gap:8px;
    background:#fff;border:1px solid var(--line-2);border-radius:8px;
    padding:8px 11px;min-height:34px;
    font-size:12.5px;color:var(--ink-2);
  }
  .mon-form .mf-input.focus{
    border-color:var(--accent-line);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .mon-form .mf-input .mf-lock{color:var(--accent);flex:0 0 auto}
  .mon-form .mf-val{flex:0 1 auto;color:var(--ink);font-weight:500}
  .mon-form .mf-val.mono{
    font-family:var(--mono);font-size:12px;letter-spacing:-.005em;color:var(--ink);font-weight:400;
  }
  .mon-form .mf-caret{
    width:1.5px;height:14px;background:var(--accent);
    animation:mfblink 1.1s steps(1,end) infinite;
    margin-right:auto;
  }
  @keyframes mfblink{50%{opacity:0}}
  .mon-form .mf-detected{
    font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;
    color:var(--accent);background:var(--accent-soft);
    border:1px solid var(--accent-line);
    padding:2px 7px;border-radius:99px;
  }
  .mon-form .mf-help{
    display:flex;align-items:center;gap:6px;
    font-size:11px;color:var(--muted);margin-top:6px;
  }
  .mon-form .mf-help svg{color:var(--accent);flex:0 0 auto}

  /* Select-style pair */
  .mon-form .mf-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;
    margin-bottom:16px;
  }
  .mon-form .mf-select{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:#fff;border:1px solid var(--line-2);border-radius:8px;
    padding:8px 11px;min-height:34px;
    font-size:12.5px;color:var(--ink-2);font-weight:500;
  }
  .mon-form .mf-select svg{color:var(--soft);flex:0 0 auto}

  /* Footer actions */
  .mon-form .mf-foot{
    display:flex;align-items:center;justify-content:flex-end;gap:10px;
    padding-top:12px;border-top:1px solid var(--line);
  }
  .mon-form .mf-cancel{
    font-size:12.5px;color:var(--muted);font-weight:500;cursor:default;
  }
  .mon-form .mf-save{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--accent);color:#fff;border:1px solid var(--accent);
    border-radius:7px;padding:7px 14px;
    font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:-.005em;
    cursor:default;
  }
  .mon-form .mf-save svg{flex:0 0 auto}

  @media (max-width:780px){
    .mon-form .mf-grid{grid-template-columns:1fr}
  }

  /* Send-alerts-via channel pills (.mf-channels / .mf-ch) */
  .mon-form .mf-channels{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .mon-form .mf-ch{
    display:inline-flex;align-items:center;gap:6px;
    background:#fff;border:1px solid var(--line-2);border-radius:99px;
    padding:5px 4px 5px 10px;
    font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--ink-2);
    line-height:1;
  }
  .mon-form .mf-ch svg{color:var(--soft);flex:0 0 auto}
  .mon-form .mf-ch.on{
    background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);
  }
  .mon-form .mf-ch.on svg{color:var(--accent)}
  .mon-form .mf-ch .mf-x{
    width:14px;height:14px;border-radius:50%;
    display:inline-grid;place-items:center;
    color:var(--accent);opacity:.65;font-size:13px;line-height:1;font-weight:600;
    margin-left:2px;
  }
  .mon-form .mf-ch:not(.on){
    color:var(--muted);padding-right:10px;
  }
  .mon-form .mf-ch-plus{
    width:14px;height:14px;border:1px dashed var(--line-3);border-radius:50%;
    display:inline-grid;place-items:center;color:var(--soft);font-weight:600;line-height:1;
  }


  /* ═════════ Scheduled Reports list mockup (.rep-list / .rep-*) ═════════
     Static screenshot of assets/cp/src/pages/ReportsListPage.tsx —
     sparse version: just title + new-report CTA + 3 rows. */
  .rep-list{
    padding:28px 32px;background:#fff;
    font-family:var(--sans);color:var(--ink);
  }
  .rep-list .rep-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-bottom:20px;
  }
  .rep-list .rep-title{
    font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.015em;
  }
  .rep-list .rep-cta{
    background:var(--accent);color:#fff;border:1px solid var(--accent);
    border-radius:7px;padding:7px 14px;
    font-size:12.5px;font-weight:600;cursor:default;white-space:nowrap;
  }

  .rep-list .rep-table{
    border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  }
  .rep-list .rep-row{
    display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;
    padding:18px 20px;border-bottom:1px solid var(--line);
  }
  .rep-list .rep-table > .rep-row:last-child{border-bottom:0}

  .rep-list .rep-name{
    display:flex;align-items:center;gap:10px;
    font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  }
  .rep-list .rep-name svg{color:var(--accent);flex:0 0 auto}

  .rep-list .rep-freq{
    display:inline-block;
    font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
    padding:3px 9px;border-radius:99px;text-transform:uppercase;line-height:1.4;
  }
  .rep-list .rep-freq.daily{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line-2)}
  .rep-list .rep-freq.weekly{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
  .rep-list .rep-freq.monthly{background:#eef7f1;color:#0a7a3d;border:1px solid #cfe6d8}

  .rep-list .rep-next{
    font-family:var(--mono);font-size:11.5px;color:var(--soft);letter-spacing:-.005em;
    white-space:nowrap;
  }

  /* ═════════ Root-Cause Analysis mockup (.rca / .rca-*) ═════════
     Static screenshot of assets/cp/src/components/monitors/IncidentDetailModal.tsx
     — used inside .browser-frame for the "Root-Cause Analysis" feature row.
     Sparse layout matching the slimmed-down reports mockup. */
  .rca{
    padding:28px 32px;background:#fff;
    font-family:var(--sans);color:var(--ink);
  }

  /* Header */
  .rca .rca-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-bottom:22px;
  }
  .rca .rca-crumb{
    font-size:10.5px;color:var(--soft);font-family:var(--mono);letter-spacing:.04em;
    margin-bottom:3px;
  }
  .rca .rca-title{
    font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.015em;
  }
  .rca .rca-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 11px 5px 9px;border-radius:99px;
    font-size:11.5px;font-weight:600;letter-spacing:-.005em;
    white-space:nowrap;
  }
  .rca .rca-pill.bad{
    background:#fef1f1;color:#b91c1c;border:1px solid #f3cdcd;
  }
  .rca .rca-pill-dot{
    width:6px;height:6px;border-radius:50%;background:#b91c1c;
    box-shadow:0 0 0 3px rgba(185,28,28,.18);
    animation:rca-pulse 2.2s ease-out infinite;
  }
  @keyframes rca-pulse{
    0%,100%{box-shadow:0 0 0 3px rgba(185,28,28,.18)}
    50%{box-shadow:0 0 0 6px rgba(185,28,28,0)}
  }

  /* Summary 3-col KV strip */
  .rca .rca-summary{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
    padding:16px 18px;border:1px solid var(--line);border-radius:10px;
    background:var(--bg-2);
    margin-bottom:22px;
  }
  .rca .rca-k{
    font-size:10.5px;color:var(--muted);text-transform:uppercase;
    letter-spacing:.08em;font-weight:600;margin-bottom:4px;
  }
  .rca .rca-v{
    font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);
    letter-spacing:-.005em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .rca .rca-v.rca-bad{color:#b91c1c}

  /* Section heading */
  .rca .rca-section-h{
    font-size:10.5px;color:var(--muted);text-transform:uppercase;
    letter-spacing:.08em;font-weight:600;
    margin:0 0 10px;
  }

  /* Checkpoints */
  .rca .rca-cps{
    border:1px solid var(--line);border-radius:10px;overflow:hidden;
    margin-bottom:22px;
  }
  .rca .rca-cp{
    display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
    padding:13px 18px;border-bottom:1px solid var(--line);
    font-size:12.5px;color:var(--ink-2);
  }
  .rca .rca-cps > .rca-cp:last-child{border-bottom:0}
  .rca .rca-cp-loc{
    display:flex;align-items:center;gap:9px;
    font-weight:600;color:var(--ink);
  }
  .rca .rca-flag{font-size:14px;line-height:1}
  .rca .rca-cp-time{
    font-family:var(--mono);font-size:11px;color:var(--soft);letter-spacing:-.005em;
  }
  .rca .rca-cp-status{
    font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;
    padding:3px 9px;border-radius:99px;line-height:1.4;
  }
  .rca .rca-cp-status.bad{
    background:#fef1f1;color:#b91c1c;border:1px solid #f3cdcd;
  }

  /* Captured response code block */
  .rca .rca-code{
    font-family:var(--mono);font-size:12px;line-height:1.7;
    padding:14px 16px;border:1px solid var(--line);border-radius:10px;
    background:#0c0c0d;color:#e6e6e6;
    overflow-x:auto;
  }
  .rca .rca-code .rca-c{color:#7a7a7d}
  .rca .rca-code .rca-bad{color:#fb7185;font-weight:600}
  .rca .rca-code .rca-good{color:#4ec97e;font-weight:600}

  /* ═════════ Tiny browser-frame variant for "much more" cards (.bf-tiny) ═════════
     Used inside .much-more-card .img (140px box). Same browser chrome as the
     full mockups, but smaller traffic lights, shorter URL bar, and a compact
     body slot. The card already provides a gray panel + border; we drop the
     frame's own outer shadow to avoid double-frames. */
  .much-more-card .img{
    padding:0;background:#fff;border:0;overflow:hidden;
  }
  .browser-frame.bf-tiny{
    box-shadow:none;border:1px solid var(--line);
    border-radius:8px;height:100%;
    display:flex;flex-direction:column;
  }
  .browser-frame.bf-tiny .bf-chrome{
    padding:5px 8px;gap:7px;
  }
  .browser-frame.bf-tiny .bf-tl span{width:6px;height:6px}
  .browser-frame.bf-tiny .bf-url{
    padding:2px 7px;font-size:9px;border-radius:4px;
  }
  .browser-frame.bf-tiny .bf-url svg{display:none}

  /* Compact body slots ("bft-*" = browser-frame-tiny) */
  .browser-frame.bf-tiny .bft-body{
    padding:9px 10px;display:flex;flex-direction:column;gap:5px;
    font-family:var(--sans);font-size:10.5px;color:var(--ink-2);
    flex:1;justify-content:center;min-height:0;
  }
  .bft-lab{
    font-size:9px;letter-spacing:.1em;text-transform:uppercase;
    font-weight:600;color:var(--muted);margin-bottom:1px;
  }
  .bft-keyword{
    display:inline-block;width:fit-content;
    font-family:var(--mono);font-size:10.5px;color:var(--ink);
    background:var(--accent-soft);border:1px solid var(--accent-line);
    padding:3px 7px;border-radius:5px;margin-bottom:2px;
  }
  .bft-row{
    display:flex;align-items:center;gap:7px;line-height:1.4;
  }
  .bft-row > span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bft-mono{font-family:var(--mono);font-size:9.5px;color:var(--ink-2)}
  .bft-v{
    font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--ink);
    margin-left:auto;flex:0 0 auto;
  }
  .bft-v.good{color:var(--accent)}
  .bft-dot{
    width:5px;height:5px;border-radius:50%;background:var(--line-3);flex:0 0 auto;
  }
  .bft-dot.good{background:var(--accent)}
  .bft-note{font-size:10px;font-weight:600;margin-top:3px}
  .bft-note.good{color:var(--accent)}

  /* 503 screenshot variant */
  .browser-frame.bf-tiny .bft-503{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#fdecea 0%,#fff 100%);
    border-bottom:1px solid var(--line);
  }
  .bft-503-num{
    font-size:26px;font-weight:800;color:var(--bad);
    letter-spacing:-1px;line-height:1;
  }
  .bft-503-text{
    font-size:10px;color:var(--muted);margin-top:3px;
  }
  .bft-503-cap{
    padding:5px 10px;font-family:var(--mono);font-size:9px;
    color:var(--soft);background:var(--bg-2);
  }

  /* Code block variant */
  .browser-frame.bf-tiny .bft-code{
    flex:1;padding:9px 11px;
    font-family:var(--mono);font-size:9.5px;line-height:1.55;
    color:#1f1f22;background:#fafafa;
    border-top:1px solid var(--line);
    overflow:hidden;
  }
  .bft-code .bft-c{color:var(--muted)}
  .bft-code .bft-k{color:#0a7a3d;font-weight:600}
  .bft-code .bft-s{color:#a23e1e}
  .bft-code .bft-p{color:#0050a8;font-weight:600}

  /* ═════════ Additional features icon grid (.feat-grid / .feat-card) ═════════
     Replaces the old .much-more-3 / .much-more-2 layout. Clean 3-col grid with
     5 cards (last row centers the 2 leftover cards). Each card: green-soft
     icon tile + h4 + p. No mini-mockups — they competed with the bigger
     screenshots higher up the page. */
  .feat-grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
    margin-top:32px;
  }
  .feat-card{
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:28px 26px 24px;
    transition:border-color .15s, transform .15s, box-shadow .15s;
  }
  .feat-card:hover{
    border-color:var(--green-line);transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(0,153,79,.04), 0 8px 24px -10px rgba(0,153,79,.18);
  }
  .feat-card .feat-ico{
    width:42px;height:42px;border-radius:11px;
    background:var(--green-soft);color:var(--btn-hover);
    border:1px solid var(--green-line);
    display:grid;place-items:center;
    margin-bottom:18px;
  }
  .feat-card h4{
    font-family:var(--sans);font-size:17px;font-weight:700;
    color:var(--ink);letter-spacing:-.25px;margin:0 0 8px;
  }
  .feat-card p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}

  @media (max-width:980px){
    .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:600px){
    .feat-grid{grid-template-columns:1fr}
  }

  /* ═════════ Additional-features mini-mockups ═════════
     Small visual proof inside each .feat-card body (under the description). */
  .addf-mini{
    margin-top:18px;padding:12px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
    font-family:var(--sans);
  }

  /* SLA tile */
  .addf-sla-row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px}
  .addf-sla-row + .addf-sla-row{margin-top:5px}
  .addf-sla-row .lab{color:var(--soft);font-weight:500}
  .addf-sla-row .val{font-family:var(--mono);font-weight:700;color:var(--ink)}
  .addf-sla-row .val.good{color:var(--good)}
  .addf-bar{
    height:5px;border-radius:999px;background:var(--bg-3);
    margin-top:9px;overflow:hidden;
  }
  .addf-bar .fill{display:block;height:100%;background:var(--good);border-radius:999px}
  .addf-months{
    display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px;
  }
  .addf-months .m{
    background:#fff;border:1px solid var(--line);border-radius:5px;
    padding:5px 6px;text-align:center;
  }
  .addf-months .m i{
    display:block;font-style:normal;
    font-size:9px;color:var(--soft);font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;
  }
  .addf-months .m b{
    font-family:var(--mono);font-size:10px;font-weight:600;color:var(--good);
  }
  .addf-months .m.warn b{color:var(--warn)}

  /* API tile */
  .addf-api-req{
    display:flex;align-items:center;gap:7px;
    padding:6px 9px;border-radius:6px;background:#fff;border:1px solid var(--line);
    font-family:var(--mono);font-size:10.5px;color:var(--ink-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .addf-method{
    background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
    padding:1px 7px;border-radius:4px;
    font-size:9.5px;font-weight:700;letter-spacing:.06em;flex:0 0 auto;
  }
  .addf-path{color:var(--ink);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .addf-json{
    margin:8px 0 0;padding:9px 10px;border-radius:6px;
    background:#1a1f2e;color:#d4d8e0;
    font-family:var(--mono);font-size:10.5px;line-height:1.55;
    white-space:pre;overflow:hidden;text-overflow:ellipsis;
  }
  .addf-json .k{color:#a994ff}
  .addf-json .s{color:#e8c172}
  .addf-json .n{color:#4ec97e;font-weight:700}

  /* Mail tile */
  .addf-mail-row{
    display:flex;align-items:center;gap:9px;
    padding:8px 9px;border-radius:6px;background:#fff;border:1px solid var(--line);
  }
  .addf-mail-row + .addf-mail-row{margin-top:6px}
  .addf-mail-row .dot{
    width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--bg-3);
  }
  .addf-mail-row .dot.warn{background:var(--warn);box-shadow:0 0 0 2.5px var(--warn-soft)}
  .addf-mail-row .dot.good{background:var(--good);box-shadow:0 0 0 2.5px var(--good-soft)}
  .addf-mail-row .mail-body{flex:1;min-width:0}
  .addf-mail-row .mail-from{
    font-size:9.5px;color:var(--soft);font-family:var(--mono);
    text-transform:uppercase;letter-spacing:.06em;font-weight:600;
  }
  .addf-mail-row .mail-subj{
    font-size:11.5px;color:var(--ink-2);font-weight:500;margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .addf-mail-row.unread .mail-subj{color:var(--ink);font-weight:700}
  .addf-mail-row .mail-ts{
    font-family:var(--mono);font-size:10px;color:var(--soft);flex:0 0 auto;
  }

  /* ───────── Availability-test tool: hero form, intro grid, latest tested, post-test CTA ───────── */

  /* Tool hero — single-column, centered, dark variant override */
  .tool-hero{ padding:88px 0 72px; }
  .tool-hero .hp-container{ max-width:1100px }
  .tool-hero-inner{ max-width:760px; margin:0 auto; text-align:center; }
  .tool-hero-inner .eyebrow{ justify-content:center; }
  .tool-hero-inner .hero-h{ font-size:50px; line-height:1.06; letter-spacing:-1.4px; margin:18px 0 14px; max-width:none; }
  .tool-hero-inner .hero-sub{ font-size:17px; max-width:600px; margin:0 auto; }
  .tool-hero-inner .hero-meta{ justify-content:center; margin-top:22px; }

  /* Tool form — pill on dark background */
  .tool-form{ margin:32px auto 0; max-width:680px; }
  .tool-form-row{
    display:flex; align-items:center;
    background:#fff;
    border-radius:14px;
    padding:6px 6px 6px 14px;
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 40px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    transition:box-shadow .18s var(--ease);
  }
  .tool-form-row:focus-within{
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 14px 48px -10px rgba(0,0,0,.6), 0 0 0 3px rgba(43,196,121,.32);
  }
  .tool-form-prefix{
    display:inline-flex; color:var(--muted); margin-right:10px;
  }
  .tool-form-input{
    flex:1; min-width:0;
    border:0; outline:0; background:transparent;
    font-family:var(--sans); font-size:16px; color:var(--ink);
    padding:14px 8px;
    letter-spacing:-.1px;
  }
  .tool-form-input::placeholder{ color:var(--muted); }
  .tool-form-btn{
    display:inline-flex; align-items:center; gap:8px;
    border:0; cursor:pointer;
    background:var(--accent); color:#fff;
    font-family:var(--sans); font-weight:600; font-size:14px;
    letter-spacing:-.05px;
    padding:13px 22px; border-radius:10px;
    box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px -4px rgba(0,126,66,.40);
    transition:all .14s var(--ease);
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .tool-form-btn:hover{
    background:var(--accent-2);
    box-shadow:0 6px 20px -6px rgba(0,126,66,.55);
    transform:translateY(-1px);
  }
  .tool-form-btn svg{ width:14px; height:14px; }

  .tool-form-error{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:14px;
    font-size:13.5px; color:#fecaca;
    background:rgba(220,38,38,.14);
    border:1px solid rgba(220,38,38,.32);
    padding:9px 14px; border-radius:9px;
  }
  .tool-form-error svg{ color:#fca5a5; }

  @media (max-width:640px){
    .tool-hero{ padding:64px 0 48px; }
    .tool-hero-inner .hero-h{ font-size:34px; letter-spacing:-1px; }
    .tool-form-row{ flex-wrap:wrap; padding:14px; gap:10px; }
    .tool-form-prefix{ margin-right:4px; }
    .tool-form-input{ width:100%; padding:14px 4px; font-size:16px; }
    .tool-form-btn{ width:100%; justify-content:center; padding:15px 22px; }
  }

  /* Intro 2-up cards (loading time + how it works) */
  .tool-intro-grid{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px; max-width:980px; margin:0 auto;
  }
  .tool-intro-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px 26px 24px;
  }
  .tool-intro-card .tool-intro-ico{
    width:42px; height:42px; border-radius:11px;
    background:var(--green-soft); color:var(--btn-hover);
    border:1px solid var(--green-line);
    display:grid; place-items:center;
    margin-bottom:18px;
  }
  .tool-intro-card h3{
    font-family:var(--sans); font-size:18px; font-weight:700;
    color:var(--ink); letter-spacing:-.3px; margin:0 0 10px;
  }
  .tool-intro-card p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0; }
  @media (max-width:780px){ .tool-intro-grid{ grid-template-columns:1fr; } }

  /* Latest tested — card with hairline rows, monospace URLs, pill statuses */
  .latest-tested-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    max-width:880px; margin:0 auto;
  }
  .lt-head, .lt-row{
    display:grid;
    grid-template-columns:1fr 180px 110px;
    align-items:center;
    padding:14px 20px;
  }
  .lt-head{
    background:var(--bg-2);
    border-bottom:1px solid var(--line);
    font-family:var(--sans); font-size:11.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  }
  .lt-row{
    border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .lt-row:last-child{ border-bottom:0; }
  .lt-site{
    font-family:var(--mono); font-size:13.5px; color:var(--ink);
    word-break:break-all;
  }
  .lt-when{
    font-family:var(--mono); font-size:12.5px; color:var(--muted);
  }
  .lt-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 9px; border-radius:999px;
    font-size:11.5px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase;
    font-family:var(--sans);
  }
  .lt-pill .lt-d{ width:6px; height:6px; border-radius:50%; }
  .lt-up{ background:var(--good-soft); color:var(--good); }
  .lt-up .lt-d{ background:var(--good); box-shadow:0 0 0 3px rgba(22,163,74,.18); }
  .lt-down{ background:rgba(220,38,38,.10); color:#b91c1c; }
  .lt-down .lt-d{ background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.16); }
  @media (max-width:640px){
    .lt-head, .lt-row{ grid-template-columns:1fr 90px; padding:12px 14px; gap:10px; }
    .lt-head .lt-col-when, .lt-row .lt-col-when{ display:none; }
  }

  /* Post-test signup teaser (only shown when hash present) */
  .post-test-cta{ padding:32px 0 0; }
  .ptc-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px 22px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center; gap:20px;
    box-shadow:0 1px 0 rgba(0,153,79,.04), 0 6px 20px -10px rgba(0,153,79,.10);
  }
  .ptc-icon{
    width:46px; height:46px; border-radius:12px;
    background:var(--green-soft); color:var(--btn-hover);
    border:1px solid var(--green-line);
    display:grid; place-items:center;
  }
  .ptc-h{ font-family:var(--sans); font-size:16px; font-weight:700; color:var(--ink); letter-spacing:-.25px; }
  .ptc-p{ font-size:13.5px; color:var(--muted); margin-top:2px; }
  .ptc-form{ display:flex; gap:8px; align-items:center; }
  .ptc-form input{
    border:1px solid var(--line); border-radius:9px;
    padding:10px 12px; min-width:260px;
    font-family:var(--sans); font-size:14px; color:var(--ink);
    background:var(--bg);
    outline:0; transition:border-color .14s, box-shadow .14s;
  }
  .ptc-form input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
  }
  .ptc-form button{
    border:0; cursor:pointer;
    background:var(--accent); color:#fff;
    font-family:var(--sans); font-weight:600; font-size:13.5px;
    padding:10px 18px; border-radius:9px;
    text-transform:uppercase; letter-spacing:.04em;
    transition:background .14s, transform .14s;
  }
  .ptc-form button:hover{ background:var(--accent-2); transform:translateY(-1px); }
  .ptc-error{ color:#b91c1c; font-size:13.5px; margin-top:8px; text-align:center; }
  @media (max-width:880px){
    .ptc-card{ grid-template-columns:1fr; text-align:center; }
    .ptc-icon{ margin:0 auto; }
    .ptc-form{ flex-direction:column; }
    .ptc-form input{ width:100%; min-width:0; }
    .ptc-form button{ width:100%; }
  }

  /* Tool results section — wrap legacy result_holder in modern container */
  .tool-results{ padding:48px 0 16px; }
  .tool-results .result_holder{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:0 1px 0 rgba(0,0,0,.02), 0 6px 24px -16px rgba(0,0,0,.08);
  }
  .tool-results .holder_bubble{ background:transparent; box-shadow:none; padding:0; }
  .tool-results h3.intro{
    font-family:var(--sans); font-size:22px; font-weight:700;
    color:var(--ink); letter-spacing:-.4px; margin:32px 0 18px;
  }

  /* ───────── Availability-test: intro split + latest tested ───────── */
  .av-intro-split{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
    gap:48px;
    align-items:start;
  }
  .av-intro-text .sec-h{ text-align:left; margin:0 0 14px; }
  .av-intro-text h3{
    font-family:var(--sans); font-size:18px; font-weight:700;
    color:var(--ink); letter-spacing:-.3px;
    margin:28px 0 8px;
  }
  .av-intro-text p{
    font-size:15px; line-height:1.65; color:var(--muted); margin:0 0 4px;
  }

  .av-latest{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 1px 0 rgba(0,0,0,.02), 0 8px 28px -16px rgba(0,0,0,.08);
  }
  .av-latest-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px;
    background:var(--bg-2);
    border-bottom:1px solid var(--line);
  }
  .av-latest-title{
    font-family:var(--sans); font-size:13px; font-weight:700;
    color:var(--ink); letter-spacing:-.2px;
  }
  .av-latest-live{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--sans); font-size:10.5px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--good);
  }
  .av-latest-live .dot{
    width:6px; height:6px; border-radius:50%; background:var(--good);
    box-shadow:0 0 0 3px rgba(22,163,74,.18);
    animation:pulse 2s ease-in-out infinite;
  }
  .av-latest .lt-head, .av-latest .lt-row{
    grid-template-columns:minmax(0,1.4fr) 110px 90px;
    padding:11px 18px;
  }
  .av-latest .lt-head{ background:transparent; }
  .av-latest .lt-site{ font-size:12.5px; }
  .av-latest .lt-when{ font-size:11.5px; }
  .av-latest .lt-pill{ padding:2px 8px; font-size:10.5px; }
  @media (max-width:980px){
    .av-intro-split{ grid-template-columns:1fr; gap:36px; }
  }

  /* ───────── Availability-test: world map mockup ───────── */
  .av-map{ padding:18px 20px 16px; }
  .av-map-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:14px; gap:16px;
  }
  .av-map-title{
    font-family:var(--sans); font-size:14px; font-weight:700;
    color:var(--ink); letter-spacing:-.2px;
  }
  .av-map-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .av-map-legend{ display:flex; gap:14px; flex-wrap:wrap; }
  .av-map-legend .lg-item{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--sans); font-size:11px; color:var(--muted);
  }
  .av-map-legend .lg-d{ width:7px; height:7px; border-radius:50%; }
  .lg-up{ background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18); }
  .lg-slow{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
  .lg-down{ background:#dc2626; box-shadow:0 0 0 3px rgba(220,38,38,.18); }

  .av-map-stage{
    position:relative;
    background:linear-gradient(180deg, #f8faf9 0%, #f1f5f3 100%);
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px;
    overflow:hidden;
  }
  .av-map-svg{ width:100%; height:auto; display:block; }
  .av-map-dots .d{ stroke:rgba(255,255,255,.9); stroke-width:1.5; }
  .av-map-dots .d.up{ fill:#16a34a; }
  .av-map-dots .d.slow{ fill:#f59e0b; }
  .av-map-dots .d.down{ fill:#dc2626; }

  .av-map-strip{
    display:flex; gap:8px;
    margin-top:12px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .av-map-strip::-webkit-scrollbar{ display:none; }
  .ams{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:7px;
    background:var(--bg-2);
    border:1px solid var(--line);
    padding:6px 10px;
    border-radius:8px;
    font-size:11.5px; color:var(--ink-2);
  }
  .ams-flag{ font-size:13px; line-height:1; }
  .ams-city{ font-family:var(--sans); font-weight:500; }
  .ams-ms{ font-size:11px; color:var(--good); }
  .ams.ams-down .ams-ms{ color:#b91c1c; }

  /* ───────── Availability-test: waterfall mockup ───────── */
  .av-wf{ padding:18px 20px 14px; }
  .av-wf-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:12px; gap:16px;
  }
  .av-wf-title{
    font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.2px;
  }
  .av-wf-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .av-wf-tabs{ display:flex; gap:4px; flex-wrap:wrap; }
  .wf-tab{
    font-family:var(--sans); font-size:11px; font-weight:500;
    color:var(--muted);
    background:var(--bg-2); border:1px solid var(--line);
    padding:4px 10px; border-radius:999px;
  }
  .wf-tab.on{
    background:var(--ink); color:#fff; border-color:var(--ink);
  }
  .av-wf-ruler{
    display:flex; justify-content:space-between;
    padding:0 0 6px 168px;
    font-family:var(--mono); font-size:10px; color:var(--muted);
    border-bottom:1px solid var(--line);
  }
  .av-wf-rows{ display:flex; flex-direction:column; }
  .wfr{
    display:grid;
    grid-template-columns:48px 110px 1fr 56px;
    align-items:center; gap:10px;
    padding:7px 0;
    border-bottom:1px dashed var(--line);
    font-size:11.5px;
  }
  .wfr:last-child{ border-bottom:0; }
  .wfr-type{
    font-family:var(--mono); font-size:9.5px; font-weight:700;
    text-align:center; padding:2px 0; border-radius:4px;
    letter-spacing:.04em; color:#fff;
  }
  .wfr-type.html{ background:#a855f7; }
  .wfr-type.css{ background:#f59e0b; }
  .wfr-type.js{ background:#0ea5e9; }
  .wfr-type.img{ background:#16a34a; }
  .wfr-type.font{ background:#64748b; }
  .wfr-type.xhr{ background:#ec4899; }
  .wfr-name{ font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wfr-track{
    position:relative; height:14px;
    background:linear-gradient(90deg, rgba(0,0,0,.025) 0%, rgba(0,0,0,.025) calc(100% - 1px), transparent 100%) repeat-x;
    background-size:calc(100%/5) 100%;
    border-radius:3px;
  }
  .wfr-bar{
    position:absolute; top:3px; bottom:3px;
    border-radius:3px;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.08);
  }
  .wfr-bar.html{ background:#a855f7; }
  .wfr-bar.css{ background:#f59e0b; }
  .wfr-bar.js{ background:#0ea5e9; }
  .wfr-bar.img{ background:#16a34a; }
  .wfr-bar.font{ background:#64748b; }
  .wfr-bar.xhr{ background:#ec4899; }
  .wfr-ms{ font-size:10.5px; color:var(--muted); text-align:right; }

  @media (max-width:780px){
    .av-wf-ruler{ padding-left:120px; }
    .wfr{ grid-template-columns:40px 80px 1fr 44px; gap:6px; }
  }

  /* ───────── Availability-test: history chart mockup ───────── */
  .av-hist{ padding:18px 20px 14px; }
  .av-hist-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:14px; gap:16px;
  }
  .av-hist-title{
    font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.2px;
  }
  .av-hist-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .av-hist-kpis{ display:flex; gap:14px; flex-wrap:wrap; }
  .av-hist-kpis .kpi{
    display:flex; flex-direction:column; align-items:flex-end;
    padding:6px 12px; border-left:1px solid var(--line);
  }
  .av-hist-kpis .kpi:first-child{ border-left:0; padding-left:0; }
  .kpi-l{
    font-family:var(--sans); font-size:10px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  }
  .kpi-v{ font-size:14px; color:var(--ink); font-weight:600; margin-top:2px; }

  .av-hist-chart{
    position:relative;
    height:180px;
    background:#fbfdfc; border:1px solid var(--line); border-radius:10px;
    overflow:hidden;
  }
  .hist-svg{ width:100%; height:100%; display:block; }
  .hist-grid line{ stroke:var(--line); stroke-dasharray:3 4; }
  .hist-yaxis{
    position:absolute; top:0; right:6px;
    display:flex; flex-direction:column; justify-content:space-between;
    height:100%; padding:6px 0;
    font-size:9.5px; color:var(--muted);
    pointer-events:none;
  }
  .av-hist-xaxis{
    display:flex; justify-content:space-between;
    padding:6px 4px 0;
    font-size:10px; color:var(--muted);
  }

  /* ───────── Availability-test: content analysis mockup ───────── */
  .av-anlz{ padding:18px 20px 14px; }
  .av-anlz-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:14px; gap:16px;
  }
  .av-anlz-title{
    font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.2px;
  }
  .av-anlz-sub{ font-size:11.5px; color:var(--muted); margin-top:2px; }
  .av-anlz-tabs{ display:flex; gap:4px; }

  .av-anlz-grid{
    display:grid; grid-template-columns:160px 1fr;
    gap:24px; align-items:center;
  }
  .av-anlz-donut .donut{ width:100%; height:auto; max-width:160px; display:block; margin:0 auto; }
  .donut-num{
    font-family:var(--sans); font-size:18px; font-weight:700; fill:var(--ink);
  }
  .donut-lbl{
    font-family:var(--sans); font-size:8.5px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; fill:var(--muted);
  }

  .av-anlz-tbl{
    display:flex; flex-direction:column;
    border:1px solid var(--line);
    border-radius:8px; overflow:hidden;
    background:var(--surface);
  }
  .anlz-row{
    display:grid;
    grid-template-columns:1.4fr 60px 80px 60px;
    align-items:center;
    padding:8px 14px;
    font-size:12px;
    border-bottom:1px solid var(--line);
  }
  .anlz-row:last-child{ border-bottom:0; }
  .anlz-row.anlz-head{
    background:var(--bg-2);
    font-family:var(--sans); font-size:10px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  }
  .anlz-type{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--ink-2);
  }
  .anlz-type i{
    width:8px; height:8px; border-radius:2px; display:inline-block;
  }

  @media (max-width:780px){
    .av-anlz-grid{ grid-template-columns:1fr; gap:16px; }
    .av-anlz-donut .donut{ max-width:130px; }
    .anlz-row{ grid-template-columns:1.2fr 50px 70px 50px; padding:8px 10px; font-size:11px; }
  }

/* ═══════════════════════════════════════════════════════════════
   CHECKPOINTS PAGE  (templates/website/pages/checkpoints.html.twig)
   ═══════════════════════════════════════════════════════════════ */

.cp-hero .tool-hero-inner{
  max-width: 880px; margin: 0 auto; text-align:center;
}

/* Continent KPI strip inside hero */
.cp-kpi-strip{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin:28px 0 26px;
}
.cp-kpi{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; text-decoration:none;
  font-size:13px; line-height:1;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.cp-kpi:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}
.cp-kpi-n{
  font-family:var(--mono);
  font-weight:600; font-size:14px;
  color:#4ec97e;
}
.cp-kpi-l{ color:rgba(255,255,255,.78); }

/* World map section — light band, dark map */
.cp-map-band{
  background:var(--bg-2);
  color:var(--ink);
  padding:72px 0 80px;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cp-map-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 380px at 50% 110%, rgba(0,126,66,.07), transparent 65%),
    radial-gradient(ellipse 700px 320px at 50% -10%, rgba(0,126,66,.05), transparent 65%);
}
.cp-map-band > .hp-container{ position:relative; z-index:1; }
.cp-map-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 40px;
}
.cp-map-band .eyebrow{
  display:none;
}
.cp-map-band .eyebrow .dot{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(0,126,66,.12), 0 0 6px rgba(0,126,66,.25);
}
.cp-map-h{
  margin:14px 0 12px;
  font-size:32px; line-height:1.2; letter-spacing:-0.012em;
  font-weight:600;
  color:var(--ink);
}
.cp-map-sub{
  margin:0;
  font-size:16px; line-height:1.55;
  color:var(--muted);
}
.cp-map-sub .presentation_emphasis{
  color:var(--accent); font-weight:600;
}

.cp-map-stage{
  display:flex; justify-content:center;
  position:relative;
}
.cp-map-stage .vector_map{
  margin:0 auto;
  max-width:100%;
}
/* Float-card refinements when the map sits on a light surface */
.cp-map-band .checkpoints_floater{
  border:1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(20,24,40,.04),
    0 8px 24px -12px rgba(20,24,40,.08);
  color:var(--ink-2);
}
.cp-map-band .checkpoints_floater .bold{
  color:var(--ink); font-weight:600;
}
.cp-map-band .checkpoints_floater .checkpoint_number{
  color:var(--muted);
}
.cp-map-band .checkpoints_floater_arrow{
  filter:drop-shadow(0 2px 1px rgba(20,24,40,.06));
}
.cp-map-stage .map_area_holder.mobile{ display:none; }

@media (max-width: 1180px){
  .cp-map-stage .vector_map{
    transform: scale(.78);
    transform-origin: top center;
    margin-bottom: -130px;
  }
}
@media (max-width: 900px){
  .cp-map-band{ padding:48px 0 32px; }
  .cp-map-h{ font-size:26px; }
  .cp-map-stage .vector_map{ display:none; }
  .cp-map-stage .map_area_holder.mobile{ display:block; margin:0; width:100%; }
}

/* Info section */
.cp-info-section{ padding:48px 0 0; }

/* Info card under the map — 2-col rich card */
.cp-info-card{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap:32px; align-items:center;
  max-width:1100px; margin:0 auto;
  padding:32px 36px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 1px 2px rgba(20,24,40,.03);
}
.cp-info-main{ min-width:0; }
.cp-info-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans);
  font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--good);
  background:var(--green-soft);
  border:1px solid var(--green-line);
  border-radius:999px;
  padding:5px 11px;
  margin-bottom:14px;
}
.cp-info-h{
  margin:0 0 10px;
  font-weight:600; font-size:20px;
  letter-spacing:-0.008em;
  color:var(--ink);
}
.cp-info-p{
  margin:0 0 14px;
  font-size:14.5px; line-height:1.6;
  color:var(--muted);
}
.cp-info-cta{
  margin:0;
  font-size:14px; line-height:1.55;
  color:var(--ink-2);
}
.cp-info-cta a{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid rgba(0,126,66,.25);
  padding-bottom:1px;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.cp-info-cta a::after{
  content:''; width:11px; height:11px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23007e42' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h10M9 4l4 4-4 4'/></svg>");
  background-size:contain; background-repeat:no-repeat;
  transition:transform .18s var(--ease);
}
.cp-info-cta a:hover{ border-bottom-color:var(--accent); }
.cp-info-cta a:hover::after{ transform:translateX(2px); }

/* IP-list mock preview (right column) */
.cp-info-aside{ display:flex; justify-content:flex-end; }
.cp-ip-mock{
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:
    0 1px 2px rgba(20,24,40,.04),
    0 8px 24px -12px rgba(20,24,40,.08);
}
.cp-ip-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg, #f7f8fa 0%, #f1f3f6 100%);
  border-bottom:1px solid var(--line);
}
.cp-ip-tl{ display:inline-flex; gap:5px; }
.cp-ip-tl i{
  width:9px; height:9px; border-radius:50%;
  background:#e4e6ea;
}
.cp-ip-tl i:nth-child(1){ background:#ff5f57; }
.cp-ip-tl i:nth-child(2){ background:#febc2e; }
.cp-ip-tl i:nth-child(3){ background:#28c840; }
.cp-ip-host{
  font-size:11.5px; color:var(--muted);
  margin-left:auto;
}
.cp-ip-body{ padding:6px 0; }
.cp-ip-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px;
  font-size:12.5px;
  border-bottom:1px solid var(--line);
}
.cp-ip-row:last-child{ border-bottom:0; }
.cp-ip-loc{
  font-family:var(--sans);
  color:var(--ink-2);
}
.cp-ip-v{
  color:var(--muted);
}
.cp-ip-row.cp-ip-more .cp-ip-loc{
  color:var(--muted); font-size:11.5px;
}

@media (max-width: 880px){
  .cp-info-card{
    grid-template-columns: 1fr;
    gap:20px;
    padding:24px;
  }
  .cp-info-aside{ justify-content:stretch; }
  .cp-ip-mock{ max-width:none; }
}

/* Continents section wrapper */
.cp-continents{ padding:72px 0 64px; }

/* Per-continent card */
.cp-cont-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 1px 2px rgba(20,24,40,.03);
  overflow:hidden;
  scroll-margin-top:96px;
  margin-bottom:24px;
}
.cp-cont-card:last-child{ margin-bottom:0; }

.cp-cont-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  background:linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
  border-bottom:1px solid var(--line);
}
.cp-cont-title{
  display:flex; align-items:center; gap:12px; min-width:0;
}
.cp-cont-em{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:10px;
  background:var(--green-soft);
  border:1px solid var(--green-line);
  color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
}
.cp-cont-em svg{ width:24px; height:24px; display:block; }
.cp-cont-title h3{
  margin:0;
  font-size:18px; font-weight:600;
  color:var(--ink); letter-spacing:-0.005em;
}
.cp-cont-meta{
  display:inline-flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.cp-cont-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--green-soft);
  border:1px solid var(--green-line);
  color:var(--good);
  font-size:12px; font-weight:500;
  white-space:nowrap;
}
.cp-cont-num{
  font-family:var(--mono); font-weight:600; font-size:13px;
}
.cp-cont-chip-soft{
  background:#fff;
  border-color:var(--line);
  color:var(--muted);
}

/* Table */
.cp-table-wrap{ overflow-x:auto; }
.cp-table{
  width:100%; border-collapse:collapse;
  font-size:13.5px;
}
.cp-table thead th{
  text-align:left;
  font-size:10.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  padding:12px 20px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.cp-table tbody td{
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  color:var(--ink-2);
}
.cp-table tbody tr:last-child td{ border-bottom:0; }
.cp-table tbody tr:hover td{ background:#fafbfc; }

.cp-th-country{ width:18%; }
.cp-th-city{ width:22%; }
.cp-th-status{ width:14%; }
.cp-th-ip{ width:23%; }

.cp-td-country .cp-country{
  font-weight:600; color:var(--ink);
}
.cp-td-city{ color:var(--ink); }
.cp-td-ip.mono{
  font-family:var(--mono); font-size:12.5px;
  color:var(--muted);
}

/* Status pill */
.cp-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px;
  border-radius:999px;
  font-size:11.5px; font-weight:500;
  white-space:nowrap;
}
.cp-pill-up{
  background:var(--green-soft);
  border:1px solid var(--green-line);
  color:var(--good);
}
.cp-pill-down{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#b91c1c;
}
.cp-pill-dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor;
  position:relative;
}
.cp-pill-up .cp-pill-dot::after{
  content:''; position:absolute;
  inset:-3px; border-radius:50%;
  background:currentColor; opacity:.25;
  animation: cpPulse 2s ease-out infinite;
}
@keyframes cpPulse{
  0%{ transform:scale(1); opacity:.35; }
  100%{ transform:scale(2.4); opacity:0; }
}

/* CTA — rich dark card with globe visual */
.cp-cta{ padding:32px 0 96px; }
.cp-cta-card{
  position:relative;
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap:32px;
  padding:48px 56px;
  background:var(--dark);
  border-radius:20px;
  color:var(--dark-ink);
  overflow:hidden;
  isolation:isolate;
}
.cp-cta-card::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 700px 320px at 100% 50%, rgba(78,201,126,.10), transparent 65%),
    radial-gradient(ellipse 500px 200px at 0% 0%, rgba(255,255,255,.03), transparent 60%);
}
.cp-cta-card::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(78,201,126,.5) 50%, transparent 100%);
}
.cp-cta-main{ position:relative; z-index:1; min-width:0; }

.cp-cta-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(78,201,126,.10);
  border:1px solid rgba(78,201,126,.22);
  color:#7be3a7;
  font-size:11.5px; font-weight:600;
  letter-spacing:.04em;
}
.cp-cta-pulse{
  width:7px; height:7px; border-radius:50%;
  background:#4ec97e;
  box-shadow:0 0 0 0 rgba(78,201,126,.5);
  animation: cpCtaPulse 2s ease-out infinite;
}
@keyframes cpCtaPulse{
  0%{ box-shadow:0 0 0 0 rgba(78,201,126,.55); }
  100%{ box-shadow:0 0 0 8px rgba(78,201,126,0); }
}
.cp-cta-h{
  margin:16px 0 12px;
  font-size:28px; line-height:1.22; letter-spacing:-0.012em;
  font-weight:600;
  color:var(--dark-ink);
  max-width:520px;
}
.cp-cta-accent{ color:#4ec97e; }
.cp-cta-sub{
  margin:0 0 22px;
  font-size:15px; line-height:1.55;
  color:var(--dark-ink-2);
  max-width:520px;
}

.cp-cta-actions{
  display:flex; align-items:center; gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.cp-cta-btn{ flex-shrink:0; }
.cp-cta-secondary{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--dark-ink);
  font-weight:500; font-size:14.5px;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:2px;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.cp-cta-secondary svg{ width:13px; height:13px; transition:transform .18s var(--ease); }
.cp-cta-secondary:hover{ border-bottom-color:#4ec97e; color:#fff; }
.cp-cta-secondary:hover svg{ transform:translateX(2px); }

.cp-cta-meta{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:18px;
  margin:0; padding:0;
}
.cp-cta-meta li{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px;
  color:var(--dark-muted);
}
.cp-cta-meta svg{
  width:14px; height:14px;
  color:#4ec97e;
  flex-shrink:0;
}

/* Right-side globe visual */
.cp-cta-visual{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  min-height:280px;
}
.cp-cta-globe{
  width:100%; max-width:320px;
  height:auto;
  filter: drop-shadow(0 16px 32px rgba(78,201,126,.18));
}

@media (max-width: 900px){
  .cp-cta-card{
    grid-template-columns: 1fr;
    padding:36px 28px;
    gap:24px;
  }
  .cp-cta-h{ font-size:24px; }
  .cp-cta-visual{ min-height:0; order:-1; }
  .cp-cta-globe{ max-width:200px; }
}
@media (max-width: 600px){
  .cp-cta-card{ padding:28px 22px; }
  .cp-cta-h{ font-size:22px; }
  .cp-cta-actions{ gap:14px; }
  .cp-cta-meta{ gap:12px 16px; }
}

/* Responsive */
@media (max-width: 900px){
  .cp-kpi-strip{ gap:8px; margin:22px 0 20px; }
  .cp-kpi{ padding:8px 12px; font-size:12px; }
  .cp-kpi-n{ font-size:13px; }
  .cp-map-section{ padding:48px 0 40px; }
  .cp-continents{ padding:48px 0 40px; }
  .cp-cont-head{ padding:16px 18px; flex-wrap:wrap; }
  .cp-cont-title h3{ font-size:16px; }
  .cp-table thead th, .cp-table tbody td{ padding:10px 14px; }
  .cp-hide-md{ display:none; }
  .cp-th-country{ width:auto; }
  .cp-cta-card{ flex-direction:column; align-items:flex-start; padding:24px; }
}
@media (max-width: 640px){
  .cp-cont-meta{ width:100%; }
  .cp-table{ font-size:12.5px; }
  .cp-td-ip.mono{ font-size:11.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL / COMPLIANCE PAGES  (GDPR, future: Privacy, ToS, Cookies)
   ═══════════════════════════════════════════════════════════════ */

.legal-hero-inner{
  max-width: 720px; margin: 0 auto; text-align:center;
}
.legal-hero-inner .hero-sub,
.legal-hero-inner .hero-h{
  margin-left:auto; margin-right:auto;
}
.legal-hero-inner .hero-meta{
  justify-content:center;
}

/* Commitments strip */
.legal-commitments{ padding:72px 0 48px; }
.lc-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
.lc-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 22px 20px;
  box-shadow: 0 1px 2px rgba(20,24,40,.03);
  display:flex; flex-direction:column;
}
.lc-ico{
  width:42px; height:42px;
  border-radius:11px;
  background:var(--green-soft);
  border:1px solid var(--green-line);
  color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.lc-card h3{
  margin:0 0 8px;
  font-size:15.5px; font-weight:600;
  letter-spacing:-0.004em;
  color:var(--ink);
}
.lc-card p{
  margin:0;
  font-size:13.5px; line-height:1.55;
  color:var(--muted);
}

/* Long-form document */
.legal-doc{ padding:48px 0 80px; }
.legal-doc-grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:56px;
  align-items:flex-start;
  /* Match the homepage container so the description area reads as wide as v4. */
  max-width: var(--container);
  margin:0 auto;
}

/* Sticky TOC */
.legal-toc{
  position:sticky; top:96px;
  padding:20px 20px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
}
.legal-toc-h{
  font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}
.legal-toc ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.legal-toc li{ margin:0; }
.legal-toc a{
  display:block;
  padding:7px 0;
  font-size:13.5px; line-height:1.4;
  color:var(--ink-2);
  text-decoration:none;
  border-left:2px solid transparent;
  padding-left:10px;
  margin-left:-12px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.legal-toc a:hover{
  color:var(--accent);
  border-left-color:var(--green-line);
}

/* Prose content */
.legal-content{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:40px 48px;
  box-shadow: 0 1px 2px rgba(20,24,40,.03);
  min-width:0;
}
.legal-content > :first-child{ margin-top:0; }
.legal-content > :last-child{ margin-bottom:0; }
.legal-content h2{
  margin:40px 0 14px;
  font-size:22px; font-weight:600;
  letter-spacing:-0.008em;
  color:var(--ink);
  scroll-margin-top:96px;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h2 strong{ font-weight:600; }
.legal-content h3{
  margin:28px 0 10px;
  font-size:17px; font-weight:600;
  color:var(--ink);
}
.legal-content p{
  margin:0 0 16px;
  font-size:15px; line-height:1.7;
  color:var(--ink-2);
}
.legal-content a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(0,126,66,.25);
  padding-bottom:1px;
  transition: border-color .15s var(--ease);
}
.legal-content a:hover{ border-bottom-color:var(--accent); }
.legal-content ul,
.legal-content ol{
  margin:0 0 18px;
  padding-left:22px;
  font-size:15px; line-height:1.7;
  color:var(--ink-2);
}
.legal-content li{ margin-bottom:6px; }
.legal-content li::marker{ color:var(--muted); }
.legal-content strong{ color:var(--ink); font-weight:600; }
.legal-content em{ color:var(--ink); }

/* Legal CTA */
.legal-cta{ padding:0 0 96px; }
.legal-cta-card{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
  padding:36px 44px;
  background:var(--dark);
  color:var(--dark-ink);
  border-radius:20px;
  overflow:hidden;
}
.legal-cta-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 320px at 100% 50%, rgba(78,201,126,.10), transparent 65%),
    radial-gradient(ellipse 500px 200px at 0% 0%, rgba(255,255,255,.03), transparent 60%);
}
.legal-cta-card::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(78,201,126,.5), transparent);
}
.legal-cta-main{ position:relative; z-index:1; min-width:0; }
.legal-cta-actions{ position:relative; z-index:1; flex-shrink:0; }

.legal-cta-eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(78,201,126,.10);
  border:1px solid rgba(78,201,126,.22);
  color:#7be3a7;
  font-size:11px; font-weight:600;
  letter-spacing:.06em;
}
.legal-cta-h{
  margin:14px 0 8px;
  font-size:22px; font-weight:600;
  letter-spacing:-0.008em;
  color:var(--dark-ink);
}
.legal-cta-sub{
  margin:0;
  font-size:14.5px; line-height:1.55;
  color:var(--dark-ink-2);
  max-width:520px;
}

@media (max-width: 980px){
  .legal-doc-grid{ grid-template-columns: 1fr; gap:24px; }
  .legal-toc{ position:static; }
  .legal-content{ padding:32px 28px; }
}
@media (max-width: 880px){
  .lc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .legal-commitments{ padding:48px 0 32px; }
  .legal-doc{ padding:32px 0 56px; }
  .legal-cta-card{
    flex-direction:column; align-items:flex-start;
    padding:28px 24px; gap:18px;
  }
  .legal-cta-h{ font-size:20px; }
  .legal-content{ padding:24px 20px; }
  .legal-content h2{ font-size:19px; }
  .legal-content p, .legal-content li{ font-size:14.5px; }
}
@media (max-width: 480px){
  .lc-grid{ grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SITEMAP  (templates/website/sitemap.html.twig)
   ═══════════════════════════════════════════════════════════════ */

.sitemap-hero-inner{
  max-width: 680px; margin: 0 auto; text-align:center;
}
.sitemap-hero-inner .hero-sub,
.sitemap-hero-inner .hero-h{
  margin-left:auto; margin-right:auto;
}

.sitemap-section{ padding:72px 0 48px; }

/* 2-col grid: Product (wider) + stacked-cards column */
.sm-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:24px;
  max-width: var(--container);
  margin: 0 auto;
}
.sm-stack{
  display:flex; flex-direction:column;
  gap:24px;
}

.sm-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 1px 2px rgba(20,24,40,.03);
}
.sm-card-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom: 1px solid var(--line);
}
.sm-card-head h2{
  margin:0;
  font-size:14px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink);
}
.sm-ico{
  width:30px; height:30px; flex-shrink:0;
  border-radius: 8px;
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  color: var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
}
.sm-count{
  margin-left:auto;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--muted);
}

.sm-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.sm-list li{ margin:0; }
.sm-list a{
  display:flex; align-items:center; gap:8px;
  padding: 8px 10px;
  margin: 0 -10px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 8px;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.sm-list a:hover{
  background: var(--green-soft);
  color: var(--accent);
}

.sm-list-flag .sm-flag{
  font-size: 16px; line-height: 1;
  width: 18px; text-align: center;
}

/* Blog section */
.sitemap-blog{ padding:64px 0 48px; }
.sm-blog-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
  max-width: var(--container);
  margin: 0 auto;
}

/* Foot CTA-style note */
.sitemap-foot{ padding: 0 0 96px; }
.sm-foot-card{
  display:flex; align-items:flex-start; gap:18px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,24,40,.03);
}
.sm-foot-ico{
  flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  color: var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
}
.sm-foot-body{ flex:1; min-width:0; }
.sm-foot-h{
  font-size: 15px; font-weight: 600;
  color: var(--ink); margin-bottom: 4px;
}
.sm-foot-body p{
  margin:0;
  font-size: 13.5px; line-height: 1.55;
  color: var(--muted);
}
.sm-foot-body a{
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(0,126,66,.25);
  padding-bottom: 1px;
  transition: border-color .15s var(--ease);
}
.sm-foot-body a:hover{ border-bottom-color: var(--accent); }
.sm-foot-body a.mono{
  font-family: var(--mono);
  font-size: 13px;
}

@media (max-width: 980px){
  .sm-grid{ grid-template-columns: 1fr 1fr; }
  .sm-blog-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .sitemap-section{ padding: 48px 0 32px; }
  .sm-grid{ grid-template-columns: 1fr; }
  .sm-card{ padding: 20px 22px; }
  .sm-foot-card{ flex-direction: column; gap: 12px; padding: 18px 20px; }
}

/* Free-tools section inside the sitemap */
.sm-tools-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  max-width: var(--container);
  margin: 0 auto;
}
/* Number/format-converter cards have many rows — render them as 2-up lists inside the card */
.sm-list-tight{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
}
.sm-list-tight a{ font-size: 13.5px; padding: 7px 10px; }

.sm-inline-link{
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(0,126,66,.25);
  padding-bottom: 1px;
  transition: border-color .15s var(--ease);
}
.sm-inline-link:hover{ border-bottom-color: var(--accent); }

@media (max-width: 980px){
  .sm-tools-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .sm-list-tight{ grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FPL hero dashboard — mirrors the in-product Speed monitor detail layout
   (assets/cp/src/pages/monitorContent/SpeedContent.tsx)
   ───────────────────────────────────────────────────────────────────────── */
.fpl-hero .fpl-title-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 3px var(--good-soft);
  margin-right:8px;vertical-align:middle;
}
.fpl-hero .mm-h .right{font-weight:500}

/* Load-time area chart */
.fpl-chart{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px 6px;
  position:relative;
}
.fpl-chart .mm-area{height:96px;width:100%;display:block}
.fpl-chart-ax{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;color:var(--soft);
  margin-top:4px;letter-spacing:.02em;
}

/* ========================================================================
   Monitor-detail mockup body — used by solution-uptime.html.twig hero.
   Scoped under .hero-dash so it can't leak into other pages.
   Mirrors docs/dashboard-mockups/monitor-detail-v6.html, scaled to fit the
   158px-sidebar mockup shell (min-height ~470px).
   ===================================================================== */
.hero-dash .mon-detail{
  flex:1;padding:18px 20px 20px;
  background:#f4f4f5;
  font-size:12px;line-height:1.45;color:#18181b;
  overflow:hidden;
}

/* Breadcrumbs */
.hero-dash .md-crumbs{
  display:flex;align-items:center;gap:6px;
  color:#52525b;font-size:11px;
  margin-bottom:12px;
}
.hero-dash .md-crumb{display:inline-flex;align-items:center;gap:5px}
.hero-dash .md-crumb svg{width:11px;height:11px}
.hero-dash .md-crumbs > svg{width:10px;height:10px;color:#c8c8cd}
.hero-dash .md-now{color:#18181b;font-weight:600}

/* Detail head */
.hero-dash .md-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:16px;
}
.hero-dash .md-title-block h1{
  margin:0;font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.2;
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;color:#18181b;
}
.hero-dash .md-url{
  margin:5px 0 0;color:#52525b;font-size:11px;
  font-family:var(--mono,'JetBrains Mono',monospace);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-dash .md-actions{display:flex;gap:6px;flex-shrink:0}
.hero-dash .md-pill{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:6px;
  border:1px solid #ececef;background:#fff;color:#27272a;
  font-size:11px;font-weight:600;
}
.hero-dash .md-pill svg{width:12px;height:12px;color:#52525b}

/* Status pill */
.hero-dash .md-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px 2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:600;border:1px solid transparent;
}
.hero-dash .md-tag .d{width:6px;height:6px;border-radius:50%}
.hero-dash .md-tag.bad{background:#fdecec;color:#b91c1c;border-color:rgba(185,28,28,.18)}
.hero-dash .md-tag.bad .d{background:#e02424}

/* Stat strip */
.hero-dash .md-stat-strip{
  background:#fff;border:1px solid #ececef;border-radius:10px;
  box-shadow:0 1px 2px rgba(15,17,26,.04);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  margin-bottom:14px;overflow:hidden;
}
.hero-dash .md-stat-strip-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hero-dash .md-stat{
  padding:14px 16px;border-right:1px solid #ececef;
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.hero-dash .md-stat:last-child{border-right:0}
.hero-dash .md-stat .l{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#52525b;
}
.hero-dash .md-stat .v{
  font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:#18181b;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hero-dash .md-stat .v.bad{color:#b91c1c}
.hero-dash .md-stat .v .u{color:#8a8a93;font-weight:500;font-size:11.5px;margin-left:2px}
.hero-dash .md-stat .v.with-pill{display:inline-flex;align-items:center;gap:7px;font-size:12px}

/* Card */
.hero-dash .md-card{
  background:#fff;border:1px solid #ececef;border-radius:10px;
  box-shadow:0 1px 2px rgba(15,17,26,.04);
  padding:14px 16px 15px;margin-bottom:14px;
}
.hero-dash .md-card:last-child{margin-bottom:0}
.hero-dash .md-card-title{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#52525b;margin-bottom:12px;
}

/* Response Time chart */
.hero-dash .md-rt{width:100%;height:110px;display:block}
.hero-dash .md-rt-axis{
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:9.5px;fill:#8a8a93;
}

/* Heatmap */
.hero-dash .md-hm-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;
}
.hero-dash .md-hm-head .md-card-title{margin:0}
.hero-dash .md-hm-legend{
  display:flex;gap:9px;color:#52525b;font-size:9.5px;
}
.hero-dash .md-hm-legend span{display:inline-flex;align-items:center;gap:4px}
.hero-dash .md-hm-legend .sw{width:7px;height:7px;border-radius:2px}

.hero-dash .md-hm{
  display:grid;grid-template-columns:32px 1fr;
  column-gap:6px;row-gap:2px;
}
.hero-dash .md-hm-hours{
  grid-column:2;
  display:flex;justify-content:space-between;
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:9px;color:#8a8a93;
  margin-bottom:3px;
}
.hero-dash .md-hm-day{
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:9.5px;color:#52525b;
  align-self:center;text-align:right;padding-right:2px;
}
.hero-dash .md-hm-cells{
  display:grid;grid-template-columns:repeat(24,1fr);gap:2px;
}
.hero-dash .md-hm-cells span{
  aspect-ratio:1/1;border-radius:2px;background:#00a35f;
}
.hero-dash .md-hm-cells span.warn{background:#b45309}
.hero-dash .md-hm-cells span.bad{background:#b91c1c}
.hero-dash .md-hm-cells span.empty{background:#e9e9ec}

/* Recent activity timeline */
.hero-dash .md-tl{display:flex;flex-direction:column}
.hero-dash .md-tl-row{
  display:grid;grid-template-columns:12px 1fr auto;
  gap:12px;padding:11px 0;align-items:center;
  border-top:1px solid #ececef;
}
.hero-dash .md-tl-row:first-child{border-top:0;padding-top:2px}
.hero-dash .md-tl-row .dot{
  width:7px;height:7px;border-radius:50%;justify-self:center;
}
.hero-dash .md-tl-row .dot.bad{background:#e02424;box-shadow:0 0 0 3px rgba(224,36,36,.12)}
.hero-dash .md-tl-row .dot.ok{background:#00a35f;box-shadow:0 0 0 3px rgba(0,163,95,.12)}
.hero-dash .md-tl-row .body .t{font-weight:600;font-size:12px;color:#18181b;line-height:1.35}
.hero-dash .md-tl-row .body .m{
  color:#52525b;font-size:10.5px;margin-top:3px;
  font-family:var(--mono,'JetBrains Mono',monospace);
}
.hero-dash .md-tl-row .dur{
  font-size:10.5px;color:#52525b;background:#e9e9ec;
  padding:2px 8px;border-radius:5px;font-variant-numeric:tabular-nums;
}
.hero-dash .md-tl-row .dur.live{background:#fdecec;color:#b91c1c}
.hero-dash .md-tl-row .dot.warn{background:#b45309;box-shadow:0 0 0 3px rgba(180,83,9,.14)}

/* WHOIS card — distinct header (title-like, not eyebrow) */
.hero-dash .md-card-whois{padding-top:0}
.hero-dash .md-whois-h{
  display:flex;align-items:center;gap:8px;
  margin:0 -16px 14px;padding:11px 16px;
  border-bottom:1px solid #ececef;
  background:linear-gradient(180deg,#fafafa,#fff);
  border-radius:10px 10px 0 0;
  font-size:13px;font-weight:700;color:#18181b;
  letter-spacing:-.01em;
}
.hero-dash .md-whois-h svg{width:14px;height:14px;color:#00a35f;flex-shrink:0}
.hero-dash .md-whois-sep{color:#c8c8cd;font-weight:400}
.hero-dash .md-whois-meta{
  color:#52525b;font-weight:500;font-size:11.5px;
  font-family:var(--mono,'JetBrains Mono',monospace);
}

/* Key/value grid (WHOIS card, domain-monitoring) */
.hero-dash .md-kv{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 18px;
}
.hero-dash .md-kv > div{min-width:0}
.hero-dash .md-kv .k{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#52525b;line-height:1.2;
}
.hero-dash .md-kv .v{
  font-size:13px;font-weight:600;color:#18181b;
  font-variant-numeric:tabular-nums;line-height:1.3;margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hero-dash .md-kv .v.bad{color:#b91c1c}

/* ─────────────────────────────────────────────────────────────────────────────
   Transaction hero dashboard — mirrors TransactionContent.tsx:
   3-stat strip → Availability donut (~1/3) + per-step bars (~2/3)
   ───────────────────────────────────────────────────────────────────────── */
.tx-hero .tx-title-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 3px var(--good-soft);
  margin-right:8px;vertical-align:middle;
}
.tx-hero .mm-h .right{font-weight:500}

.tx-charts{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:14px;
}

.tx-steps{display:flex;flex-direction:column;min-width:0}
.tx-steps-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.tx-steps-tot{
  font-family:var(--mono);font-size:10.5px;color:var(--soft);
  font-variant-numeric:tabular-nums;
}
.tx-steplist{display:flex;flex-direction:column;gap:8px}
.tx-step{
  display:grid;grid-template-columns:18px 1fr 60px;gap:10px;align-items:center;
  font-size:11px;
}
.tx-step .n{
  width:18px;height:18px;border-radius:50%;background:var(--bg-3);
  color:var(--muted);font-family:var(--mono);font-size:9.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.tx-step .nm{
  color:var(--ink-2);font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.tx-step .track{
  position:relative;height:6px;border-radius:999px;background:var(--bg-3);overflow:hidden;
}
.tx-step .fill{height:100%;border-radius:999px;background:var(--good)}
.tx-step .fill.warn{background:var(--warn)}
.tx-step .fill.bad{background:var(--bad)}
.tx-step .ms{
  text-align:right;font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SSL hero dashboard — mirrors SslContent.tsx:
   3-stat strip → Certificate Details card → small response-time chart
   ───────────────────────────────────────────────────────────────────────── */
.ssl-hero .ssl-title-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 3px var(--good-soft);
  margin-right:8px;vertical-align:middle;
}
.ssl-hero .mm-h .right{font-weight:500;font-family:var(--mono)}

.ssl-card{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:4px 14px;
}
.ssl-tbl{margin:0;display:flex;flex-direction:column}
.ssl-tbl > div{
  display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line);
  font-size:11.5px;
}
.ssl-tbl > div:last-child{border-bottom:none}
.ssl-tbl dt{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin:0;
}
.ssl-tbl dd{margin:0;color:var(--ink);font-weight:500}
.ssl-tbl dd.mono{font-family:var(--mono);font-size:11px}
.ssl-pill{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  padding:2px 7px;border-radius:999px;margin-left:8px;
  background:var(--good-soft);color:var(--good);border:1px solid var(--good-line);
  text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Virus hero dashboard — mirrors VirusContent.tsx:
   3-stat strip → engines panel
   ───────────────────────────────────────────────────────────────────────── */
.vir-hero .vir-title-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 3px var(--good-soft);
  margin-right:8px;vertical-align:middle;
}
.vir-hero .mm-h .right{font-weight:500}

.vir-history{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;
}
.vir-h{
  display:grid;grid-template-columns:14px 1fr auto auto;gap:10px;align-items:center;
  padding:8px 12px;font-size:11.5px;
  border-bottom:1px solid var(--line);
}
.vir-h:last-child{border-bottom:none}
.vir-h .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 2.5px var(--good-soft);
}
.vir-h .ts{
  color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums;
}
.vir-h .st{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:999px;border:1px solid;
}
.vir-h .st.ok{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.vir-h .st.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.vir-h .dur{
  font-family:var(--mono);font-size:10px;color:var(--soft);
  font-variant-numeric:tabular-nums;text-align:right;min-width:32px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RUM "Detailed Page Load Time Data" feature mockup —
   area chart with peak band + 4-stat strip
   ───────────────────────────────────────────────────────────────────────── */
.rum-pl .rum-pl-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 3px var(--good-soft);
  margin-right:8px;vertical-align:middle;
}
.rum-pl .mm-h .right{font-weight:500;font-family:var(--mono)}

.rum-pl-chart{
  position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:14px 14px 8px;
}
.rum-pl-peak{
  position:absolute;top:10px;left:182px;z-index:2;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  background:#fff7e6;color:#b45309;border:1px solid #fbe0b0;
  padding:3px 7px;border-radius:999px;white-space:nowrap;
}
.rum-pl-svg{width:100%;height:96px;display:block}
.rum-pl-ax{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;color:var(--soft);
  margin-top:4px;letter-spacing:.02em;
}

.rum-pl-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;
}
.rum-pl-stats > div{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-width:0;
}
.rum-pl-stats .lab{
  font-size:9px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);
}
.rum-pl-stats .val{
  font-family:var(--mono);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink);
  letter-spacing:-.01em;line-height:1.1;
  display:inline-flex;align-items:baseline;gap:4px;
}
.rum-pl-stats .val.good{color:var(--good)}
.rum-pl-stats .val.warn{color:var(--warn)}
.rum-pl-stats .val .u{font-size:10.5px;color:var(--soft);font-weight:500;margin-left:1px}
.rum-pl-stats .dt{
  font-size:9.5px;color:var(--soft);font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}
.rum-pl-stats .dt.good{color:var(--good)}
.rum-pl-flag{font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:13px}

@media (max-width:780px){
  .rum-pl-stats{grid-template-columns:repeat(2,1fr)}
  .rum-pl-peak{left:auto;right:14px}
}

/* ========================================================================
   Real-browser mockup — solution-speed.html.twig "Real Browser" feature row.
   Mirrors the actual SpeedMonitorPage layout (StatCards + Tabs + Full Load
   Time chart + Component Breakdown).
   ===================================================================== */
.mm-shell .rb-body, .hero-dash .rb-body{
  display:flex;flex-direction:column;gap:12px;
  padding:14px;background:#f4f4f5;flex:1;
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;color:#18181b;
}

/* URL + Chrome UA */
.mm-shell .rb-bar, .hero-dash .rb-bar{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid #ececef;border-radius:8px;
  padding:8px 12px;box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.rb-lock{width:13px;height:13px;color:#52525b;flex-shrink:0}
.rb-url{
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:12px;color:#27272a;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rb-ua{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:600;color:#00a35f;
  background:rgba(0,163,95,.10);
  border:1px solid rgba(0,163,95,.22);
  padding:3px 8px;border-radius:999px;flex-shrink:0;
}
.rb-ua svg{width:11px;height:11px}

/* 3-stat grid (matches StatCard component) */
.mm-shell .rb-statgrid, .hero-dash .rb-statgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.rb-statcard{
  background:#fff;border:1px solid #ececef;border-radius:10px;
  padding:12px 14px;display:flex;flex-direction:column;gap:5px;
  box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.rb-statcard .l{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#52525b;
}
.rb-statcard .v{
  font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:#18181b;
}
.rb-statcard .v.good{color:#15803d}
.rb-statcard .v .u{color:#8a8a93;font-weight:500;font-size:12px;margin-left:2px}
.rb-trend{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:500;
}
.rb-trend.good{color:#15803d}
.rb-trend.muted{color:#8a8a93}
.rb-trend svg{width:10px;height:10px}

/* Tabs strip */
.mm-shell .rb-tabs, .hero-dash .rb-tabs{
  display:flex;gap:4px;
  background:#fff;border:1px solid #ececef;border-radius:8px;
  padding:4px;box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.rb-tab{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:30px;border-radius:6px;
  font-size:11.5px;font-weight:600;color:#52525b;
}
.rb-tab svg{width:12px;height:12px}
.rb-tab.on{
  background:rgba(0,163,95,.10);color:#00a35f;
  box-shadow:inset 0 0 0 1px rgba(0,163,95,.22);
}

/* Generic card (Full Load Time + Component Breakdown) */
.mm-shell .rb-card, .hero-dash .rb-card{
  background:#fff;border:1px solid #ececef;border-radius:10px;
  padding:14px 16px 15px;box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.rb-card-h{
  font-size:11.5px;font-weight:600;color:#18181b;
  letter-spacing:-.005em;margin-bottom:10px;
}

/* Full Load Time chart */
.rb-chart{width:100%;height:120px;display:block}

/* Component Breakdown grid */
.mm-shell .rb-comp-grid, .hero-dash .rb-comp-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
}
.rb-comp{
  background:#fafafa;border:1px solid #f2f2f4;border-radius:8px;
  padding:10px 8px;display:flex;flex-direction:column;align-items:center;
  text-align:center;min-width:0;gap:3px;
}
.rb-comp-dot{
  width:10px;height:10px;border-radius:50%;
  margin-bottom:4px;
}
.rb-comp-l{
  font-size:10.5px;font-weight:600;color:#52525b;
  text-transform:uppercase;letter-spacing:.06em;
}
.rb-comp-v{
  font-size:14px;font-weight:700;color:#18181b;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
.rb-comp-m{
  font-size:10px;color:#8a8a93;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}

@media (max-width:980px){
  .mm-shell .rb-comp-grid, .hero-dash .rb-comp-grid{grid-template-columns:repeat(3,1fr)}
  .mm-shell .rb-statgrid, .hero-dash .rb-statgrid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────────────────────
   RUM "Analyze the Map" — real world map with per-country speed pins
   ───────────────────────────────────────────────────────────────────────── */
.rum-geo .mm-h .right{font-weight:500;font-family:var(--mono)}

.rum-map{
  position:relative;
  background:#f7f8fa;
  border:1px solid var(--line);border-radius:8px;
  overflow:hidden;
  aspect-ratio:1146 / 555;
}
.rum-map-bg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:.34;pointer-events:none;object-fit:contain;padding:14px;
}
.rum-map-legend{
  position:absolute;top:10px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border:1px solid var(--line);
  padding:4px 10px;border-radius:99px;
  font-size:10px;font-weight:500;color:var(--muted);
}
.rum-map-legend > span{display:inline-flex;align-items:center;gap:5px}
.rum-map-legend .dt{width:7px;height:7px;border-radius:50%}
.rum-map-legend .dt.good{background:var(--good)}
.rum-map-legend .dt.warn{background:var(--warn)}

.rum-pin{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--good);
  border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(22,163,74,.45),0 1px 2px rgba(0,0,0,.18);
  animation:rumPinPulse 2.4s ease-out infinite;
  z-index:3;transform:translate(-50%,-50%);
}
.rum-pin.warn{
  background:var(--warn);
  box-shadow:0 0 0 0 rgba(245,158,11,.5),0 1px 2px rgba(0,0,0,.18);
}
.rum-pin.sm{width:7px;height:7px;border-width:1.5px}
.rum-pin .lbl{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  color:var(--ink);background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  padding:2px 6px;border-radius:4px;white-space:nowrap;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.rum-pin.warn .lbl{color:var(--warn)}

@keyframes rumPinPulse{
  0%   { box-shadow:0 0 0 0 rgba(22,163,74,.45),0 1px 2px rgba(0,0,0,.18); }
  70%  { box-shadow:0 0 0 8px rgba(22,163,74,0),0 1px 2px rgba(0,0,0,.18); }
  100% { box-shadow:0 0 0 0 rgba(22,163,74,0),0 1px 2px rgba(0,0,0,.18); }
}
.rum-pin.warn{
  animation:rumPinPulseWarn 2.4s ease-out infinite;
}
@keyframes rumPinPulseWarn{
  0%   { box-shadow:0 0 0 0 rgba(245,158,11,.5),0 1px 2px rgba(0,0,0,.18); }
  70%  { box-shadow:0 0 0 8px rgba(245,158,11,0),0 1px 2px rgba(0,0,0,.18); }
  100% { box-shadow:0 0 0 0 rgba(245,158,11,0),0 1px 2px rgba(0,0,0,.18); }
}

.rum-geo-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;
}
.rum-geo-stat{
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;display:flex;flex-direction:column;gap:2px;min-width:0;
}
.rum-geo-stat .lab{
  font-size:9px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);
}
.rum-geo-stat .val{
  font-family:var(--mono);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink);
  letter-spacing:-.01em;line-height:1.1;
  display:inline-flex;align-items:baseline;gap:4px;
}
.rum-geo-stat .val.warn{color:var(--warn)}
.rum-geo-stat .val .u{font-size:10px;color:var(--soft);font-weight:500}
.rum-geo-stat .fl{font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:13px}

/* ─────────────────────────────────────────────────────────────────────────────
   Domain "Renew before expiry" feature mockup —
   countdown banner + lifecycle timeline + alert channels + reminder schedule
   ───────────────────────────────────────────────────────────────────────── */
.dr-banner{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  background:linear-gradient(135deg,#fef5f5 0%, #fff 60%);
  border:1px solid #f5cdcd;border-radius:10px;
  padding:12px 14px;
}
.dr-count{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#fff;border:1px solid #f5cdcd;border-radius:10px;
  min-width:74px;padding:8px 10px;text-align:center;
}
.dr-count .num{
  font-family:var(--mono);font-size:24px;font-weight:800;
  color:var(--bad);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.dr-count .num .u{font-size:13px;font-weight:600;color:var(--bad);margin-left:1px}
.dr-count .sub{
  font-family:var(--mono);font-size:9.5px;color:var(--bad);
  margin-top:3px;font-variant-numeric:tabular-nums;opacity:.8;
}
.dr-info{min-width:0}
.dr-domain{
  font-size:14px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.dr-tag{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:2px 7px;border-radius:999px;
  background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad-line);
}
.dr-meta{
  font-size:10.5px;color:var(--soft);font-family:var(--mono);
  margin-top:3px;letter-spacing:.02em;
}
.dr-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bad);color:#fff;border:none;
  font-family:var(--sans);font-size:11px;font-weight:600;
  padding:7px 11px;border-radius:7px;cursor:pointer;
  white-space:nowrap;
}

/* Lifecycle timeline */
.dr-life{margin-top:12px}
.dr-life-bar{
  position:relative;height:6px;border-radius:999px;
  background:var(--bg-3);overflow:visible;
}
.dr-life-fill{
  position:absolute;left:0;top:0;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--good) 0%, var(--warn) 70%, var(--bad) 100%);
}
.dr-life-mark{
  position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff;border:2px solid var(--line-2);
}
.dr-life-mark.start{border-color:var(--good)}
.dr-life-mark.today{
  background:var(--bad);border-color:#fff;
  box-shadow:0 0 0 3px var(--bad-soft),0 1px 2px rgba(0,0,0,.18);
  width:13px;height:13px;
}
.dr-life-mark.end{border-color:var(--bad)}
.dr-life-ax{
  display:flex;justify-content:space-between;margin-top:7px;
  font-size:10px;color:var(--soft);
}
.dr-life-ax > span{display:flex;flex-direction:column;gap:1px}
.dr-life-ax > span.now{align-items:center;color:var(--bad)}
.dr-life-ax > span.end{align-items:flex-end}
.dr-life-ax b{
  font-size:9px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);
}
.dr-life-ax > span.now b{color:var(--bad)}
.dr-life-ax i{
  font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* Alert channels */
.dr-channels{
  display:flex;flex-wrap:wrap;gap:6px;
}
.dr-ch{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);
  padding:6px 9px;border-radius:7px;
  font-size:11px;font-weight:500;color:var(--ink-2);
}
.dr-ch svg{color:var(--muted);flex-shrink:0}
.dr-ch.on{
  background:var(--good-soft);border-color:var(--good-line);color:var(--good);
}
.dr-ch.on svg{color:var(--good)}
.dr-ch .ck{margin-left:2px}

/* Reminder schedule */
.dr-sched{
  margin-top:10px;
  display:flex;flex-direction:column;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;
}
.dr-sch-row{
  display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;
  padding:8px 12px;font-size:11.5px;
  border-bottom:1px solid var(--line);
}
.dr-sch-row:last-child{border-bottom:none}
.dr-sch-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 2.5px var(--good-soft);
}
.dr-sch-row.live .dr-sch-dot{
  background:var(--bad);box-shadow:0 0 0 2.5px var(--bad-soft);
  animation:rumPinPulseWarn 2s ease-out infinite;
}
.dr-sch-lab{
  color:var(--ink-2);font-weight:500;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dr-sch-row.live .dr-sch-lab{color:var(--bad);font-weight:600}
.dr-sch-ts{
  font-family:var(--mono);font-size:10px;color:var(--soft);
  font-variant-numeric:tabular-nums;
}
.dr-sch-row.live .dr-sch-ts{color:var(--bad)}

/* ========================================================================
   3rd-party domains mockup — solution-speed.html.twig feature row.
   Plain: 3 summary stats + clean 4-column table. No bars/gradients/favicons.
   ===================================================================== */
.mm-shell .tp-body, .hero-dash .tp-body{
  display:flex;flex-direction:column;gap:12px;
  padding:14px;background:#f4f4f5;flex:1;
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;color:#18181b;
}

/* 3 summary stat cards */
.mm-shell .tp-stats, .hero-dash .tp-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
}
.tp-stat{
  background:#fff;border:1px solid #ececef;border-radius:10px;
  padding:12px 14px;display:flex;flex-direction:column;gap:4px;
  box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.tp-stat .l{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#52525b;
}
.tp-stat .v{
  font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:#18181b;
}
.tp-stat .v .u{color:#8a8a93;font-weight:500;font-size:12px;margin-left:1px}
.tp-stat .m{font-size:10.5px;color:#8a8a93;margin-top:1px}

/* Plain table card */
.mm-shell .tp-card, .hero-dash .tp-card{
  background:#fff;border:1px solid #ececef;border-radius:10px;
  padding:13px 16px 14px;box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.tp-card-h{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:10px;
}
.tp-card-t{font-size:11.5px;font-weight:600;color:#18181b;letter-spacing:-.005em}
.tp-card-meta{font-size:10.5px;color:#8a8a93}

.tp-tbl{display:flex;flex-direction:column}
.tp-tr{
  display:grid;
  grid-template-columns:minmax(0,1fr) 80px 90px 90px;
  align-items:center;gap:10px;
  padding:9px 0;border-top:1px solid #f2f2f4;
  font-size:12px;font-variant-numeric:tabular-nums;
}
.tp-tr:first-child{border-top:0}
.tp-thead{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#8a8a93;
  padding-bottom:7px;border-bottom:1px solid #ececef;border-top:0;
}
.tp-thead .r{text-align:right}
.tp-tr .r{text-align:right;font-weight:600;color:#18181b}
.tp-tr .r.warn{color:#b45309}
.tp-dom{
  font-weight:500;color:#18181b;
  font-family:var(--mono,'JetBrains Mono',monospace);font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.tp-tr .u{color:#8a8a93;font-weight:500}

@media (max-width:780px){
  .mm-shell .tp-stats, .hero-dash .tp-stats{grid-template-columns:1fr}
  .tp-tr{grid-template-columns:1fr 60px 70px 70px;gap:8px}
}

/* SSL — warn variants for the renewal mockup */
.ssl-hero .ssl-title-dot.warn{
  background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);
}
.ssl-pill.warn{
  background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line);
}
.ssl-pill.bad{
  background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line);
}

/* SSL renewal alerts panel */
.ssl-alerts{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;
}
.ssl-al{
  display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;
  padding:8px 12px;font-size:11.5px;
  border-bottom:1px solid var(--line);
}
.ssl-al:last-child{border-bottom:none}
.ssl-al .dt{
  width:7px;height:7px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 2.5px var(--good-soft);
}
.ssl-al.live .dt{
  background:var(--warn);box-shadow:0 0 0 2.5px var(--warn-soft);
  animation:rumPinPulseWarn 2s ease-out infinite;
}
.ssl-al .lab{
  color:var(--ink-2);font-weight:500;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ssl-al.live .lab{color:var(--warn);font-weight:600}
.ssl-al .ts{
  font-family:var(--mono);font-size:10px;color:var(--soft);
  font-variant-numeric:tabular-nums;
}
.ssl-al.live .ts{color:var(--warn)}

/* ========================================================================
   Transaction Builder mockup — solution-transaction.html.twig
   "Multiple Step Monitoring" feature row. Mirrors
   components/monitors/TransactionStepBuilder.tsx — Navigation / Interaction
   / Assertion action categories.
   ===================================================================== */
.mm-shell .tx-body, .hero-dash .tx-body{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;background:#f4f4f5;flex:1;
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;color:#18181b;
}

.tx-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 2px 6px;
}
.tx-head-l .tx-title{
  font-size:14px;font-weight:700;color:#18181b;letter-spacing:-.015em;
}
.tx-head-l .tx-sub{font-size:10.5px;color:#52525b;margin-top:1px}
.tx-head-r{display:flex;gap:6px}
.tx-btn{
  display:inline-flex;align-items:center;gap:5px;
  height:26px;padding:0 10px;border-radius:6px;
  font-size:11px;font-weight:600;
}
.tx-btn svg{width:11px;height:11px}
.tx-btn.ghost{background:#fff;border:1px solid #ececef;color:#27272a}
.tx-btn.primary{background:#00a35f;color:#fff;border:1px solid #00a35f}

.tx-steps{display:flex;flex-direction:column;gap:8px}
.tx-step{
  display:grid;grid-template-columns:24px 100px 1fr 20px;
  align-items:center;gap:10px;
  background:#fff;border:1px solid #ececef;border-radius:9px;
  padding:9px 12px;box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.tx-step.focus{border-color:rgba(0,163,95,.4);box-shadow:0 0 0 3px rgba(0,163,95,.10)}

.tx-n{
  width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;
  background:#f4f4f5;color:#52525b;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
}

.tx-cat{
  display:inline-flex;align-items:center;justify-content:center;
  height:22px;padding:0 9px;border-radius:999px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid transparent;
}
.tx-cat.nav   {background:#eef2ff;color:#4338ca;border-color:rgba(67,56,202,.18)}
.tx-cat.int   {background:#fff7ed;color:#c2410c;border-color:rgba(194,65,12,.18)}
.tx-cat.assert{background:#ecfdf5;color:#047857;border-color:rgba(4,120,87,.18)}

.tx-fields{display:flex;gap:6px;min-width:0;align-items:center}
.tx-sel{
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 8px;border-radius:6px;
  background:#fafafa;border:1px solid #ececef;
  font-size:11.5px;font-weight:600;color:#18181b;flex-shrink:0;
}
.tx-sel svg{width:11px;height:11px;color:#8a8a93}
.tx-input{
  flex:1;min-width:0;height:28px;padding:0 9px;
  background:#fff;border:1px solid #ececef;border-radius:6px;
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;overflow:hidden;
}
.tx-input .ph{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:#8a8a93;
  padding-right:6px;border-right:1px solid #ececef;flex-shrink:0;
}
.tx-input .val{
  color:#18181b;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.tx-input .val.mono{font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px}
.tx-input .caret{
  display:inline-block;width:1px;height:13px;background:#00a35f;
  animation:tx-blink 1s steps(2) infinite;flex-shrink:0;
}
@keyframes tx-blink{50%{opacity:0}}
.tx-step.focus .tx-input:last-child{border-color:rgba(0,163,95,.4);box-shadow:0 0 0 3px rgba(0,163,95,.10)}

.tx-x{
  width:20px;height:20px;border-radius:5px;border:0;background:transparent;
  color:#8a8a93;font-size:14px;line-height:1;
}

.tx-add{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px dashed #d4d4d8;border-radius:9px;
  padding:8px 12px;
}
.tx-add-l{font-size:11.5px;font-weight:600;color:#52525b;margin-right:4px}
.tx-add-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 10px;border-radius:6px;
  font-size:11px;font-weight:600;color:#27272a;
  background:#fafafa;border:1px solid #ececef;
}
.tx-add-btn .d{width:7px;height:7px;border-radius:50%}
.tx-add-btn.nav    .d{background:#4338ca}
.tx-add-btn.int    .d{background:#c2410c}
.tx-add-btn.assert .d{background:#047857}

/* Collapsed step row — used around an expanded edit step */
.tx-step-col .tx-col-val{
  font-size:11.5px;color:#52525b;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.tx-step-col .tx-col-val .mono{
  font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;color:#18181b;
}

/* Expanded step in edit mode */
.tx-step-edit{
  display:block;background:#fff;border:1px solid rgba(0,163,95,.4);
  border-radius:10px;padding:14px;
  box-shadow:0 0 0 3px rgba(0,163,95,.10), 0 1px 2px rgba(15,17,26,.04);
}
.tx-step-edit-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:11px;margin-bottom:11px;
  border-bottom:1px solid #ececef;
}
.tx-step-edit-title{
  font-size:12px;font-weight:700;color:#18181b;
}
.tx-step-edit-status{
  margin-left:auto;font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#c2410c;background:#fff7ed;border:1px solid rgba(194,65,12,.2);
  padding:2px 7px;border-radius:4px;
}
/* Override .tx-fields default flex-row for the edit form */
.tx-step-edit .tx-fields{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;align-items:start;
}
.tx-fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.tx-fld-lab{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#8a8a93;
}
.tx-fld .tx-sel,.tx-fld .tx-input{width:100%}
.tx-input.focus{
  border-color:rgba(0,163,95,.4);box-shadow:0 0 0 3px rgba(0,163,95,.10);
}
/* Toggle switch */
.tx-toggle{
  width:30px;height:18px;border-radius:999px;background:#ececef;
  position:relative;cursor:default;
}
.tx-toggle .dot{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18);transition:left .15s;
}
.tx-toggle.on{background:#00a35f}
.tx-toggle.on .dot{left:14px}

.tx-step-edit-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding-top:11px;margin-top:12px;border-top:1px solid #ececef;
}
.tx-link{font-size:11.5px;color:#52525b;font-weight:600;cursor:default}
.tx-btn.sm{height:24px;padding:0 10px;font-size:11px}

@media (max-width:900px){
  .tx-step{grid-template-columns:22px 1fr 20px;row-gap:6px}
  .tx-cat{grid-column:2}
  .tx-fields{grid-column:1 / -1;flex-wrap:wrap}
  .tx-step-edit .tx-fields{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────────────────────
   SSL "Technical health" feature mockup —
   3-stat strip + 3 grouped check panels + real-Chrome footer
   ───────────────────────────────────────────────────────────────────────── */
.ssl-tech .mm-h .right{font-weight:500;font-family:var(--mono)}

.ssl-checks{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
.ssl-grp{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;display:flex;flex-direction:column;min-width:0;
}
.ssl-grp-h{
  display:flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.ssl-grp-h svg{color:var(--ink-2)}
.ssl-ck{
  display:grid;grid-template-columns:12px 1fr auto;gap:7px;align-items:center;
  padding:5px 0;font-size:10.5px;
}
.ssl-ck .dt{
  width:6px;height:6px;border-radius:50%;
  background:var(--good);
}
.ssl-ck .dt.warn{background:var(--warn)}
.ssl-ck .dt.bad{background:var(--bad)}
.ssl-ck .lab{
  color:var(--ink-2);font-weight:500;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ssl-ck .st{
  font-family:var(--mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  padding:1.5px 6px;border-radius:999px;border:1px solid;
  font-variant-numeric:tabular-nums;
}
.ssl-ck .st.ok  { background:var(--good-soft); color:var(--good); border-color:var(--good-line); }
.ssl-ck .st.warn{ background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.ssl-ck .st.bad { background:var(--bad-soft);  color:var(--bad);  border-color:var(--bad-line);  }

/* Real-Chrome footer — mimics the address-bar lock + URL */
.ssl-chrome{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;
}
.ssl-chrome .lock{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--good-soft);color:var(--good);
  flex-shrink:0;
}
.ssl-chrome .lbl{
  font-family:var(--mono);font-size:11px;color:var(--ink-2);
  font-weight:500;letter-spacing:-.005em;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ssl-chrome-tag{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:var(--good-soft);color:var(--good);border:1px solid var(--good-line);
}

@media (max-width:780px){
  .ssl-checks{grid-template-columns:1fr}
}

/* ========================================================================
   Transactions list — "Endless Options" feature row on
   solution-transaction.html.twig. Plain dashboard list.
   ===================================================================== */
.mm-shell .txl-body, .hero-dash .txl-body{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;background:#f4f4f5;flex:1;
  font-family:'Inter',system-ui,sans-serif;
  font-size:12px;color:#18181b;
}
.txl-head{padding:0 2px}
.txl-title{font-size:14px;font-weight:700;color:#18181b;letter-spacing:-.015em}
.txl-sub{font-size:10.5px;color:#52525b;margin-top:1px}

.txl-chips{display:flex;gap:6px;flex-wrap:wrap}
.txl-chip{
  display:inline-flex;align-items:center;
  height:24px;padding:0 10px;border-radius:999px;
  background:#fff;border:1px solid #ececef;
  font-size:11px;font-weight:600;color:#52525b;
}
.txl-chip.on{background:rgba(0,163,95,.10);border-color:rgba(0,163,95,.22);color:#00a35f}

.mm-shell .txl-card, .hero-dash .txl-card{
  background:#fff;border:1px solid #ececef;border-radius:10px;
  padding:6px 14px 10px;box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.txl-tbl{display:flex;flex-direction:column}
.txl-tr{
  display:grid;
  grid-template-columns:12px minmax(0,1fr) 60px 90px 90px;
  align-items:center;gap:10px;
  padding:9px 0;border-top:1px solid #f2f2f4;
  font-size:12px;font-variant-numeric:tabular-nums;
}
.txl-tr:first-child{border-top:0}
.txl-thead{
  font-size:9.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:#8a8a93;
  padding-bottom:7px;border-bottom:1px solid #ececef;border-top:0;
}
.txl-thead .r{text-align:right}
.txl-tr .r{text-align:right;color:#18181b;font-weight:600}
.txl-tr .r.mono{font-family:var(--mono,'JetBrains Mono',monospace);font-size:11.5px}
.txl-tr .r.warn{color:#b45309}
.txl-tr .u{color:#8a8a93;font-weight:500}

.txl-dot{width:8px;height:8px;border-radius:50%;justify-self:center}
.txl-dot.ok  {background:#00a35f}
.txl-dot.warn{background:#b45309}

.txl-name{min-width:0}
.txl-name .n{
  font-weight:500;color:#18181b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media (max-width:780px){
  .txl-tr{grid-template-columns:12px 1fr 50px 70px 70px;gap:8px}
}

/* SSL — flat single-panel checks (simplified variant of .ssl-checks) */
.ssl-check-list{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;
}
.ssl-check-list .ssl-ck{
  display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;
  padding:9px 14px;font-size:11.5px;
  border-bottom:1px solid var(--line);
}
.ssl-check-list .ssl-ck:last-child{border-bottom:none}
.ssl-check-list .ssl-ck .dt{
  width:7px;height:7px;border-radius:50%;
}
.ssl-check-list .ssl-ck .dt.good{background:var(--good);box-shadow:0 0 0 2.5px var(--good-soft)}
.ssl-check-list .ssl-ck .dt.warn{background:var(--warn);box-shadow:0 0 0 2.5px var(--warn-soft)}
.ssl-check-list .ssl-ck .dt.bad {background:var(--bad); box-shadow:0 0 0 2.5px var(--bad-soft)}
.ssl-check-list .ssl-ck .st{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:999px;border:1px solid;
}

/* ═════════ Lock + bleed-to-viewport-edge for dashboard mockups ═════════
   The in-product mockups (.hero-dash, .mm-shell, .browser-frame) keep
   their desktop layout at every viewport size — never shrink below 640px.
   Their wrappers extend past the centered .hp-container so the mockup
   bleeds all the way to the viewport edge (right edge in default rows,
   left edge in .reverse rows). No dark gap between mockup and viewport
   edge. Applied unconditionally — no media query. */

/* Grid children get min-width:0 so the track can shrink below the
   mockup's locked width without the grid auto-growing to fit it */
.hero-grid > div,
.feat-row > div{min-width:0}

/* Lock the mockup containers — grow to fit, never shrink below 600px.
   600 was chosen so the mockup fits inside the narrower of the feature-
   row columns (1fr / 1.05fr at --container 1344px → ~605 / ~635px), so
   no clipping happens at wide widths. Below that, the lock kicks in and
   the wrap clips/bleeds at narrow viewports. */
.hero-dash,
.mm-shell,
.browser-frame{
  min-width:600px;
  max-width:none;
}

/* Inside the locked-width mockup, keep desktop grid shapes — override the
   global .mm-kpis collapse rule at <600px */
.hero-dash .mm-kpis,
.mm-shell .mm-kpis{grid-template-columns:repeat(2,1fr)}
.hero-dash .mm-kpis.three,
.mm-shell .mm-kpis.three{grid-template-columns:repeat(3,1fr)}

/* Always clip overflow at wrapper level so any minor over-the-edge bleed
   from the min-width:640 lock doesn't leak past the wrap. Also give the
   wrap a matching border-radius so that when the inner mockup overflows
   the wrap (at narrow viewports), the visible right edge keeps a rounded
   corner instead of a straight cut. */
.hero-dash-wrap{overflow:hidden;border-radius:14px}
.feat-row-img{overflow:hidden}

/* Sidebar logo — default desktop state: show wordmark, hide icon-only.
   Defined BEFORE the @media (max-width:980px) collapse block so the
   media-query overrides win at narrow widths (same specificity, later
   in source). */
.hero-dash .sb-logo-big,
.mm-shell .sb-logo-big{display:block;height:18px;width:auto}
.hero-dash .sb-logo-small,
.mm-shell .sb-logo-small{display:none;height:18px;width:auto}

/* In stacked layout (≤980px), flatten the 3D tilt and switch the asymmetric
   green-glow shadow for a symmetric drop shadow. The tilt + offset shadow
   were designed for the side-by-side hero layout — when the mockup is
   centered in a single column they read as "leaning right". */
@media (max-width: 980px){
  .hero-dash-wrap > .hero-dash,
  .hero-dash-wrap > .browser-frame{
    transform:none;
    box-shadow:0 2px 4px rgba(0,0,0,.10), 0 20px 40px -20px rgba(0,0,0,.22);
  }
  .hero-dash-wrap:hover > .hero-dash,
  .hero-dash-wrap:hover > .browser-frame{transform:none}
  .hero-dash-wrap::after{display:none}

  /* Collapse the in-mockup sidebar to an icons-only rail — mirrors the
     real CP's collapsed sidebar state. Narrow the sidebar track from 158
     to 48px, hide text labels (font-size:0), chevrons, sub-navs and the
     collapse button; clip the wordmark logo to show only the icon. */
  .hero-dash .app,
  .mm-shell .app{
    grid-template-columns: 48px 1fr;
  }
  .hero-dash .sb-nav,
  .mm-shell .sb-nav{padding:8px 4px}
  .hero-dash .sb-item,
  .mm-shell .sb-item{
    justify-content:center;
    padding:8px 0;
    gap:0;
    font-size:0;
  }
  .hero-dash .sb-item .chev,
  .mm-shell .sb-item .chev{display:none}
  .hero-dash .sb-sub,
  .mm-shell .sb-sub{display:none}
  .hero-dash .sb-head,
  .mm-shell .sb-head{
    padding:0;
    justify-content:center;
  }
  .hero-dash .sb-collapse,
  .mm-shell .sb-collapse{display:none}
  /* Swap the wordmark logo for the icon-only logo */
  .hero-dash .sb-logo-big,
  .mm-shell .sb-logo-big{display:none}
  .hero-dash .sb-logo-small,
  .mm-shell .sb-logo-small{display:block}

  /* Reclaim the 110px the collapsed sidebar saved (158 → 48). The main
     content area can stay at its desktop size (~442px) while the total
     mockup shrinks from 600 → 490, fitting more of the screen on-mobile
     and reducing how much of the mockup gets clipped at the viewport edge. */
  .hero-dash,
  .mm-shell,
  .browser-frame{min-width:490px}
}

/* ≤690px — scale the entire dashboard mockup down to fit phone viewports.
   zoom uniformly shrinks both visuals AND layout box, so the locked
   min-width:600px effectively becomes 600 * zoom and the mockup fits
   comfortably inside the centered container at phone widths.
   Previous values (0.72 / 0.58) were too aggressive — inner text became
   unreadable. Bumped to keep type legible while still fitting most of
   the mockup on-screen. Anything past the viewport gets clipped by
   overflow:hidden on the wrap. */
@media (max-width: 690px){
  .hero-dash,
  .mm-shell,
  .browser-frame{zoom:0.88}
}
@media (max-width: 480px){
  .hero-dash,
  .mm-shell,
  .browser-frame{zoom:0.78}
}

/* Bleed mockup wrappers to viewport edge — only in the side-by-side narrow
   range: 981px to 1399px. Above 1400px the side-by-side layout fits without
   bleed. At or below 980px the layout stacks to single-column so the mockup
   takes full container width naturally — bleeding would offset it from the
   centered container, so we don't apply it there. */
@media (min-width: 981px) and (max-width: 1399.98px){
  /* Hero wrap bleeds to viewport RIGHT edge.
     Extension = max(24px, 50vw - 696px), where 696 = 1440(hero max)/2 - 24(padding).
     At vw<=1440 just consumes hp-container's 24px right padding (= 24).
     Between 1400-1440 the formula still resolves to 24px so it's a no-op
     above the strict 1400 threshold visually. */
  .hero-dash-wrap{
    width: calc(100% + max(24px, calc(50vw - 696px)));
  }

  /* Feature-row mockups — container is --container (1344px), so the
     magic number is 648 = 1344/2 - 24. */
  .feat-row-img{
    width: calc(100% + max(24px, calc(50vw - 648px)));
  }

  /* Reverse rows put the mockup in the LEFT column — bleed left to viewport
     left edge instead. Shift element left by the same amount the width was
     extended; element's right edge stays at column right while the left
     slides off-screen toward viewport left. */
  .feat-row.reverse .feat-row-img{
    margin-left: min(-24px, calc(648px - 50vw));
  }
}