:root{
    --primary:#E8460A; --primary-deep:#B5350A; --primary-text:#C2410C; --secondary:#EF1763;
    --ink:#453B33; --muted:#75665B; --cream:#FFF9F2; --cream2:#FFEEDD;
    --line:rgba(232,70,10,.16);
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:'Jost',system-ui,sans-serif;color:var(--ink);background:#FFFFFF;}
  a{color:var(--primary-text);text-decoration:none;}
  a:hover{color:var(--primary-text);}

  /* ---- TEMPLATE PAGE ----
     One layout reused by all ten module pages. Everything module-specific is marked
     [LIKE THIS] or carries the module's own accent through --mc, so a new page is a
     copy with six values changed: breadcrumb, title, sub, --mc, the icon and the mock. */
  .mp{width:100%;min-height:calc(var(--vh, 1vh) * 100);background:#FFFFFF;position:relative;overflow-x:clip;}
  .mp-inner{max-width:1240px;margin:0 auto;padding:0 40px;}

  /* soft brand light behind the hero, no hard edges anywhere */

  /* ---- hero ---- */
  .mp-hero{position:relative;z-index:1;padding:86px 0 70px;
    display:grid;grid-template-columns:.86fr 1.34fr;gap:48px;align-items:center;}
  .mp-crumb{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:500;
    letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
  .mp-crumb a{color:var(--muted);transition:color .25s ease;}
  .mp-crumb a:hover{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px;}
  .mp-crumb b{font-weight:600;color:var(--primary-text);}
  .mp-crumb svg{opacity:.5;}
  .mp-badge{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
    padding:9px 16px 9px 12px;border-radius:100px;background:#fff;
    border:1px solid rgba(20,15,10,.07);
    box-shadow:0 1px 2px rgba(88,62,50,.05), 0 12px 24px -18px rgba(88,62,50,.6);
    font-size:12.5px;font-weight:500;color:var(--muted);}
  .mp-badge span.d{width:9px;height:9px;border-radius:50%;
    background:linear-gradient(140deg,#FF7A29,#EF1763);}
  .mp-h1{margin:22px 0 0;font-size:62px;font-weight:400;line-height:1.06;letter-spacing:-.01em;
    color:var(--ink);}
  .mp-h1 b{font-weight:400;background:linear-gradient(94deg,#FF7A29,#EF1763);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
  .mp-sub{margin:20px 0 0;max-width:470px;font-size:17px;line-height:1.6;color:var(--muted);}
  .mp-cta{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap;}
  .mp-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:100px;
    font-size:14.5px;font-weight:500;color:#fff;
    background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
    box-shadow:0 14px 28px -14px rgba(232,70,10,.9);
    transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;}
  .mp-btn:hover{color:#fff;transform:translateY(-2px);
    box-shadow:0 20px 34px -14px rgba(232,70,10,.95);}
  .mp-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;
    color:var(--ink);transition:gap .3s ease;}
  .mp-link:hover{color:var(--primary-text);gap:12px;}
  .mp-checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;margin-top:44px;max-width:520px;}
  .mp-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);}
  .mp-check svg{flex-shrink:0;}

  /* ---- the framed product shot ---- */
  .mp-frame{position:relative;}
  .mp-hero .mp-frame{margin-right:-90px;}
  @media (max-width: 1280px){ .mp-hero .mp-frame{margin-right:0;} }
  .mp-frame::before,.mp-frame::after{content:'';position:absolute;width:22px;height:22px;
    border:1.5px solid rgba(232,70,10,.35);}
  .mp-frame::before{left:-16px;top:-16px;border-right:0;border-bottom:0;border-radius:4px 0 0 0;}
  .mp-frame::after{right:-16px;bottom:-16px;border-left:0;border-top:0;border-radius:0 0 4px 0;}
  .mp-shot{border-radius:20px;overflow:hidden;background:#FDFDFE;
    border:1px solid rgba(20,15,10,.06);
    box-shadow:0 28px 56px -50px rgba(120,70,30,.3), 0 1px 3px -2px rgba(120,70,30,.07);}
  .mp-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;
    border-bottom:1px solid rgba(20,15,10,.055);background:rgba(255,246,238,.7);}
  .mp-dot{width:9px;height:9px;border-radius:50%;background:rgba(20,15,10,.12);}
  .mp-path{margin-left:8px;font-size:10.5px;font-weight:500;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);}
  .mp-body{display:flex;min-height:448px;}
  .mp-side{width:158px;flex-shrink:0;padding:12px 10px;
    border-right:1px solid rgba(20,15,10,.055);background:#FAFBFE;}
  .mp-snav{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;
    font-size:11px;font-weight:500;color:var(--muted);}
  .mp-snav.on{background:rgba(232,70,10,.09);color:var(--primary-deep);font-weight:600;}
  .mp-si{width:19px;height:19px;border-radius:6px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 8px -5px rgba(30,20,10,.7);}
  .mp-main{flex:1;min-width:0;padding:16px 18px;}
  .mp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .mp-kpi{border-radius:13px;padding:11px 12px;background:#fff;
    border:1px solid rgba(20,15,10,.055);box-shadow:0 10px 20px -16px rgba(120,70,30,.7);}
  .mp-kpi span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);}
  .mp-kpi b{display:block;margin-top:5px;font-size:19px;font-weight:500;letter-spacing:-.02em;
    color:var(--ink);}
  .mp-list{margin-top:14px;border-radius:13px;background:#fff;padding:4px 12px;
    border:1px solid rgba(20,15,10,.055);box-shadow:0 12px 24px -18px rgba(120,70,30,.7);}
  .mp-row{display:flex;align-items:center;gap:11px;padding:11px 0;
    border-top:1px solid rgba(20,15,10,.05);}
  .mp-row:first-child{border-top:0;}
  .mp-th{width:34px;height:26px;border-radius:7px;flex-shrink:0;display:block;}
  .mp-rn{font-size:12px;font-weight:500;color:var(--ink);width:150px;flex-shrink:0;}
  .mp-rm{flex:1;min-width:0;font-size:11px;color:var(--muted);}
  .mp-rp{font-size:12px;font-weight:600;color:var(--ink);}

  /* ---- what / how / who ---- */
  .mp-band{position:relative;z-index:1;padding:76px 0 96px;}
  .mp-eyebrow{display:block;text-align:center;font-size:11.5px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--primary-text);}
  .mp-h2{margin:14px 0 0;text-align:center;font-size:44px;font-weight:400;letter-spacing:-.01em;
    color:var(--ink);}
  .mp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;}
  .mp-card{border-radius:22px;padding:28px 26px 30px;background:#FFFFFF;
    border:1px solid rgba(20,15,10,.05);
    box-shadow:0 22px 44px -36px rgba(120,70,30,.75);
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;}
  .mp-card:hover{transform:translateY(-3px);}
  .mp-cico{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
    justify-content:center;background:rgba(232,70,10,.09);}
  .mp-card h3{margin:20px 0 0;font-size:21px;font-weight:500;letter-spacing:-.01em;color:var(--ink);}
  .mp-card p{margin:10px 0 0;font-size:14.5px;line-height:1.62;color:var(--muted);}

  /* ---- chrome shared with the marketing page ---- */
  .nav-logo{display:flex;align-items:center;flex-shrink:0;}
  .nav-logo svg{display:block;width:86px;height:auto;}
  .nav-wrap{
    position:absolute;top:14px;left:0;right:0;z-index:40;
    width:max-content;max-width:calc(100% - 64px);margin:0 auto;
    border-radius:100px;background:rgba(255,255,255,.52);
    -webkit-backdrop-filter:blur(22px) saturate(200%);backdrop-filter:blur(22px) saturate(200%);
    box-shadow:0 10px 28px -16px rgba(20,15,10,.2), 0 0 0 1px rgba(255,255,255,.75) inset;
    border:1px solid rgba(20,15,10,.06);
    transform-origin:top center;
    transition:transform .35s cubic-bezier(.22,1,.36,1), background .35s ease,
      box-shadow .35s ease, backdrop-filter .35s ease;
  }
  .nav-wrap.condensed{
    transform:scale(.85);
    background:rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
    box-shadow:0 12px 30px -18px rgba(20,15,10,.24), 0 0 0 1px rgba(255,255,255,.55) inset;
  }
  .nav-link{font-size:14px;font-weight:400;color:var(--muted);padding:6px 2px;white-space:nowrap;
    transition:color .35s ease;}
  .nav-link:hover{color:var(--ink);}
  .nav-mega{position:relative;}
  .nav-trigger{display:inline-flex;align-items:center;gap:5px;cursor:default;}
  .nav-mega:hover .nav-trigger{color:var(--ink);}
  .nav-mega:hover .nav-trigger svg{transform:rotate(180deg);}
  .nav-mega:hover .nav-trigger svg{transform:rotate(180deg);}
  .mega-drop{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;
    z-index:60;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s ease .45s, visibility 0s linear .7s;}
  /* opens at once, but lingers ~0.5s after the pointer leaves, so a small slip does not close it */
  .nav-mega:hover .mega-drop{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease 0s, visibility 0s linear 0s;}
  .mega-panel{
    width:1120px;max-width:calc(var(--vw, 1vw) * 94);padding:18px;border-radius:26px;
    background:#FFFFFF;border:1px solid rgba(20,15,10,.07);
    box-shadow:0 34px 68px -32px rgba(20,15,10,.42);
    transform:translateY(-7px);transition:transform .32s cubic-bezier(.22,1,.36,1);}
  .nav-mega:hover .mega-panel{transform:none;}
  .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
  .mega-item{display:flex;gap:13px;align-items:flex-start;padding:12px 13px;border-radius:15px;
    text-decoration:none;transition:background .22s ease;}
  .mega-item:hover{background:rgba(232,70,10,.07);}
  .mega-ico{width:38px;height:38px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 7px 14px -8px rgba(30,20,10,.65);}
  .mega-tx b{display:block;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
  .mega-tx i{display:block;font-style:normal;font-size:13.8px;line-height:1.45;color:var(--muted);
    margin-top:3px;}
  .btn-dark{
    background:#1A120A;color:#fff;padding:14px 28px;border-radius:16px;font-weight:600;font-size:15px;
    box-shadow:0 8px 18px -8px rgba(20,15,10,.45);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn-dark:hover{background:#2A1D10;color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(20,15,10,.55);}
  .btn-sm{padding:10px 18px;font-size:13.5px;gap:6px;}
  .ft{position:relative;z-index:1;background:none;color:#fff;overflow:hidden;}
  .ft-inner{max-width:1180px;margin:0 auto;padding:215px 32px 0;}
  .ft-top{display:grid;grid-template-columns:1.2fr 1.15fr .7fr .7fr .8fr 1.25fr;gap:26px;}
  .ft-logo svg{display:block;width:150px;height:auto;}
  .ft-tag{margin-top:14px;font-size:15px;font-weight:600;line-height:1.45;color:#fff;max-width:210px;}
  .ft-social{display:flex;gap:10px;margin-top:22px;}
  .ft-social a{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
    transition:background .25s ease, transform .25s ease;}
  .ft-social a:hover{background:rgba(255,255,255,.3);transform:translateY(-2px);}
  .ft-col .ft-h{font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em;}
  .ft-col a,.ft-col .ft-linkbtn{display:block;margin-top:11px;font-size:14px;font-weight:600;color:#fff;}
  .ft-col a:hover,.ft-col .ft-linkbtn:hover{color:#fff;text-decoration:underline;}
  .ft-news .ft-h{font-size:13px;font-weight:700;color:#fff;}
  .ft-field{margin-top:12px;padding:12px 16px;border-radius:100px;font-size:13.5px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.72);}
  .ft-sub{margin-top:9px;padding:12px 16px;border-radius:100px;text-align:center;
    background:#fff;color:var(--primary-text);font-size:13.5px;font-weight:700;cursor:pointer;
    box-shadow:0 10px 22px -12px rgba(60,10,20,.5);}
  /* the oversized wordmark bleeds past the container on purpose, like the reference */
  .ft-mark{display:flex;align-items:center;margin-top:64px;padding:0 0 26px;}
  .ft-mark svg{flex:1;min-width:0;height:auto;opacity:.97;}
  .ft-legal{border-top:1px solid rgba(255,255,255,.22);padding:18px 32px 26px;
    max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-size:12.5px;color:#fff;}

  /* The footer ground is the homepage's, unchanged: a solid block, a 380px feather
     above it, and the sun straddling the junction so the warmth is continuous through
     it. Only the offsets differ, because this page has no closing CTA above the footer —
     the feather needs empty space to fade through, so the block starts at 400px and the
     footer copy begins below it. */
  .close-section{position:relative;z-index:1;}
  .close-bg{
    position:absolute;left:0;right:0;top:910px;bottom:0;z-index:0;
    background:linear-gradient(180deg,#C84D09 0%, #D73C0F 24%, #E8121D 62%, #E5105B 100%);
  }
  .close-bg::before{
    content:'';pointer-events:none;position:absolute;left:0;right:0;bottom:100%;height:380px;
    background:linear-gradient(180deg,
      rgba(200,77,9,0) 0%, rgba(200,77,9,.14) 34%, rgba(200,77,9,.42) 58%,
      rgba(200,77,9,.78) 80%, #C84D09 100%);
  }
  /* The sun used to STOP at the solid block's top edge, so its ~50% of extra warmth
     vanished in one pixel — that was the line across the footer. It now straddles the
     junction: the ellipse is centred exactly on it, so the glow is continuous through it,
     and a vertical mask dissolves the overspill away inside the solid block. */
  .close-bg::after{
    content:'';pointer-events:none;position:absolute;left:0;right:0;top:-660px;height:1080px;
    background:radial-gradient(72% 660px at 50% 660px,
      rgba(205,80,12,.5) 0%, rgba(205,80,12,.34) 40%,
      rgba(205,80,12,.14) 66%, rgba(205,80,12,0) 88%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 61%,rgba(0,0,0,.5) 80%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 61%,rgba(0,0,0,.5) 80%,rgba(0,0,0,0) 100%);
  }
  .mp-foot{position:relative;z-index:1;}
  .mp-foot .ft-legal{margin-bottom:0;}
  .mp{display:flex;flex-direction:column;}
  .mp-foot{margin-top:auto;}
  .mp-foot .close-bg{top:400px;}
  .mp-foot .ft-inner{padding-top:436px;}

  /* room for the bar, which now sits inside the page rather than over the viewport */
  .mp-hero{padding-top:132px;}

  /* ---- page surface: white, with one warm bloom in the top-right corner ---- */
  .mp-glow{position:absolute;right:-200px;top:-300px;left:auto;width:940px;height:820px;
    pointer-events:none;
    background:radial-gradient(closest-side, rgba(255,122,41,.32), rgba(239,23,99,.13) 54%, transparent 78%);
    filter:blur(30px);}
  .ws-sub, .mp-card{background:#FAFBFE;border:0;box-shadow:none;}
  .ws-sub:hover, .mp-card:hover{background:#F5F7FC;}
  /* the icon plate: white, soft border, soft shadow, dark glyph */
  .ws-ico2, .mp-cico{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;
    justify-content:center;background:#FFFFFF;border:1px solid rgba(20,15,10,.07);
    box-shadow:0 1px 2px rgba(88,62,50,.05), 0 10px 20px -14px rgba(88,62,50,.7);}
  .ws-sub .ws-ico2{margin-bottom:15px;}
  .mp-cico{width:44px;height:44px;border-radius:14px;}

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

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

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

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

  /* the CTA sits closer to the content now that the illustrated sections are out */
  .mp-band{padding:76px 0 44px !important;}
  .kq-section{padding:56px 0 44px !important;}
  .mp-foot .close-bg{top:790px;}
  /* ---- footer language switcher ----
     Real links (aria-current on this page's language) rather than styled divs, so it is reachable by Tab
     and announced as a list. The active pill is solid white on the orange ground —
     white-on-orange text at this size would not clear 4.5:1 on its own. */
  .ft-lang{margin-left:auto;display:flex;align-items:center;gap:2px;
    padding:2px 2px 2px 8px;border-radius:100px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);}
  .ft-lang > svg{flex-shrink:0;margin-right:4px;opacity:.9;}
  .ft-lang a{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
    font-family:inherit;padding:3px 9px;border-radius:100px;font-size:10.5px;font-weight:600;
    letter-spacing:.03em;background:transparent;color:#fff;
    transition:background .25s ease, color .25s ease;}
  .ft-lang a:hover{background:rgba(255,255,255,.2);color:#fff;}
  .ft-lang a[aria-current="true"]{background:#fff;color:var(--primary-text);
    box-shadow:0 5px 11px -8px rgba(60,10,20,.55);}
  /* ---- the product shot never cramps ----
     The mock is drawn at ONE design width and then zoomed to whatever the grid column
     actually gives it. Reflowing it instead — wrapping labels, shrinking paddings at a
     handful of breakpoints — is what produced the collisions: a two-line KPI label ran
     under the sparkline pinned to its corner. Zoom scales type and spacing together, so
     the screenshot stays a screenshot at every width. `zoom` (not `transform`) because
     zoom affects layout, so the frame's height follows and no gap opens beneath it. */
  .mp-frame{min-width:0;}
  .mp-frame .mp-shot{width:var(--shot-w, 767px);}
  /* ---- panel actions are buttons ----
     Only one page ever carried these rules, so on the others <i> and <em> fell back to
     the browser's italic and the actions read as prose. <em> is the panel's primary
     action and takes the accent fill; <i> is a secondary one and takes the outline.
     Pages whose only actions are filters have no <em>, so they are all outline. */
  .ct-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .ct-head b{font-size:16px;font-weight:500;color:var(--ink);}
  .ct-acts{display:flex;align-items:center;gap:7px;flex-shrink:0;}
  .ct-acts i, .ct-acts em{font-style:normal;display:inline-flex;align-items:center;
    padding:6px 12px;border-radius:9px;font-size:10.5px;font-weight:500;white-space:nowrap;
    line-height:1.2;}
  .ct-acts i{background:#FFFFFF;color:var(--ink);border:1px solid rgba(20,15,10,.13);
    box-shadow:0 5px 12px -10px rgba(88,62,50,.9);}
  .ct-acts em{color:#FFFFFF;border:1px solid transparent;
    background:linear-gradient(94deg,#D64200 0%,#D64200 40%,#D73959 100%);
    box-shadow:0 8px 16px -10px rgba(232,70,10,.9);}

/* ---- shared chrome from the 16.10.2026 design (same rules as home.css): the Features menu's
   Integrations column, the header language switcher, the mobile menu's second button,
   the footer's "Get in touch" column ---- */
  .mega-cols{display:grid;grid-template-columns:1fr 262px;gap:0;}
  .mega-cols > .mega-grid{padding-right:16px;}
  .mega-int{border-left:1px solid rgba(20,15,10,.08);padding:12px 6px 10px 26px;display:flex;flex-direction:column;}
  .mi-label{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--primary-text);}
  .mi-lead{margin:10px 0 0;font-size:13.8px;line-height:1.45;color:var(--muted);}
  .mi-tiles{display:grid;grid-template-columns:repeat(4,44px);gap:10px;margin-top:18px;}
  .mi-tile{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid rgba(20,15,10,.07);
    box-shadow:0 6px 12px -9px rgba(30,20,10,.45);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .mi-tile img{width:28px;height:28px;object-fit:contain;display:block;}
  .mi-tile img[alt="WhatsApp"],.mi-tile img[alt="Google Calendar"],.mi-tile img[alt="Instagram"]{width:36px;height:36px;}
  .mi-tile.mi-fill{border:0;}
  .mi-tile.mi-fill img{width:100%;height:100%;object-fit:cover;}
  .mi-all{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;transition:gap .25s ease,color .25s ease;}
  .mi-all span{color:var(--primary-text);}
  .mi-all:hover{gap:11px;color:var(--primary-text);}
  /* ---- language dropdown (header) ---- */
  .lang-dd{position:relative;flex-shrink:0;}
  .lang-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 11px;border-radius:999px;cursor:pointer;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:transparent;border:1px solid rgba(69,59,51,.12);transition:border-color .15s ease, background .15s ease;}
  .lang-btn:hover,.lang-dd.open .lang-btn{border-color:rgba(232,70,10,.4);background:rgba(232,70,10,.04);}
  .lang-btn svg{color:var(--muted);} .lang-dd.open .lang-chev{transform:rotate(180deg);}
  .lang-chev{transition:transform .2s ease;}
  .lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:184px;margin:0;padding:6px;list-style:none;z-index:60;
    background:#fff;border-radius:16px;border:1px solid rgba(69,59,51,.08);
    box-shadow:0 1px 2px rgba(88,62,50,.05),0 24px 48px -20px rgba(40,30,20,.35);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease, visibility .18s;}
  .lang-dd.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
  .lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;color:var(--ink);cursor:pointer;}
  .lang-menu a:hover,.lang-menu a:focus-visible{background:rgba(232,70,10,.06);}
  .lang-code{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:7px;font-size:11px;font-weight:700;
    color:var(--muted);background:rgba(69,59,51,.06);}
  .lang-menu a[aria-current="true"]{font-weight:600;}
  .lang-menu a[aria-current="true"] .lang-code{color:#fff;background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);}
  .lang-ok{margin-left:auto;color:var(--primary-text);opacity:0;}
  .lang-menu a[aria-current="true"] .lang-ok{opacity:1;}
  .lang-dd.lang-float{position:fixed;top:22px;right:28px;z-index:45;}
  .lang-float .lang-btn{height:40px;padding:0 12px 0 13px;background:rgba(255,255,255,.88);border-color:rgba(69,59,51,.08);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 2px rgba(88,62,50,.05),0 10px 24px -14px rgba(40,30,20,.35);}
  .lang-float .lang-btn:hover,.lang-float.open .lang-btn{background:#fff;}
  .m-lang{display:none;}
  @media (max-width:860px){
    .lang-dd{display:none;}
    .m-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
    .m-lang a{font:inherit;font-size:14px;font-weight:500;color:var(--ink);height:38px;padding:0 14px;border-radius:999px;cursor:pointer;
      background:#fff;border:1px solid rgba(69,59,51,.14);}
    .m-lang a[aria-current="true"]{color:#fff;border-color:transparent;background:linear-gradient(90deg,#D64200 0%,#D64200 40%,#D73959 100%);}
  }
  .ft-mail{display:inline-flex !important;align-items:center;gap:9px;margin-top:12px !important;font-size:15px !important;font-weight:600;color:#fff !important;}
  .ft-mail:hover{text-decoration:underline;}
  /* the language pill is the same height as the header bar and condenses with it */
  .lang-dd.lang-float{top:16px !important;}
  .lang-float .lang-btn{height:37px !important;padding:0 11px 0 12px !important;font-size:13px;gap:5px;transform-origin:top right;
    transition:transform .35s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease;}
  .lang-float .lang-btn svg{width:13px;height:13px;}
  html:has(.nav-wrap.condensed) .lang-float .lang-btn{transform:scale(.85);}
  /* longer words in German, Spanish and Icelandic break nicely and never push the layout (from the
     export's i18n block, as in home.css; the footer's German column links need it most) */
  html[lang="de"] body, html[lang="es"] body, html[lang="is"] body{-webkit-hyphens:auto;hyphens:auto;}
  html:not([lang="en"]) h1, html:not([lang="en"]) h2, html:not([lang="en"]) h3, html:not([lang="en"]) h4,
  html:not([lang="en"]) p, html:not([lang="en"]) li, html:not([lang="en"]) a, html:not([lang="en"]) button, html:not([lang="en"]) span{overflow-wrap:break-word;}
  html:not([lang="en"]) b, html:not([lang="en"]) strong{overflow-wrap:anywhere;}
  /* the legal texts stay in English on every domain: no German/Spanish hyphenation there */
  .lg-body, .lg-h1{-webkit-hyphens:manual;hyphens:manual;}
  /* mobile menu: "Try for free" under "Book a demo" */
  .m-menu-cta.m-menu-cta2{margin-top:10px !important;color:var(--ink) !important;background:#fff !important;border:1px solid rgba(20,15,10,.12);box-shadow:0 8px 18px -14px rgba(20,15,10,.35) !important;}
  /* footer: link columns start level with the tagline; "Get in touch" sits on the right, stronger */
  @media (min-width:861px){
    .ft-top{align-items:start;}
    .ft-top{grid-template-columns:minmax(210px,1fr) auto auto auto auto auto !important;column-gap:clamp(30px,4.4vw,68px) !important;}
    .ft-top > div:first-child{padding-right:clamp(0px,1vw,16px);}
    html[lang="en"] .ft-top .ft-col a,html[lang="en"] .ft-top .ft-col .ft-linkbtn{white-space:nowrap;}
    .ft-top > *{min-width:0;}
    .ft-news{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
    .ft-news .ft-h{font-size:24px !important;line-height:1.1;font-weight:700;color:#fff !important;letter-spacing:-.01em;margin:0 !important;}
    .ft-news .ft-mail{margin-top:14px !important;font-size:17px !important;font-weight:700;}
    .ft-news .ft-mail svg{width:18px;height:18px;}
  }
  @media (max-width:860px){
    .ft-news .ft-h{font-size:22px !important;font-weight:700;color:#fff !important;margin:0 !important;}
    .ft-news .ft-mail{margin-top:8px !important;font-size:16px !important;font-weight:700;}
  }