/* ---------------- fonts, served from this domain ----------------
     Previously these came from fonts.googleapis.com, which cost two extra
     origins and a blocking round trip before the browser even learned which
     font files it needed: HTML, then Google's stylesheet, then the woff2 from
     a second Google domain. Self-hosted they sit behind the same connection as
     everything else, and the two used above the fold are preloaded in
     header.php so they start downloading with the stylesheet rather than after
     it. All five are SIL Open Font Licence - the licence text ships beside the
     files in assets/fonts.

     Paths are relative to this stylesheet, so they follow the site into a
     subfolder install without needing PHP to write them.

     Only the weights the site actually renders are here: Figtree 400-700,
     Poppins 600 and 700, Baloo 2 700 and 800, Indie Flower 400, JetBrains Mono
     400 and 600. Where a variable font covered the range in fewer bytes than
     the separate weights, the variable one won. No unicode-range is set on
     purpose: browsers fall back per glyph for anything missing, and leaving it
     off means one less way for a stray character to silently change font. */
  @font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
    src:url(../fonts/figtree-latin-var.woff2) format('woff2-variations')}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
    src:url(../fonts/poppins-latin-600.woff2) format('woff2')}
  @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
    src:url(../fonts/poppins-latin-700.woff2) format('woff2')}
  @font-face{font-family:'Baloo 2';font-style:normal;font-weight:400 800;font-display:swap;
    src:url(../fonts/baloo2-latin-var.woff2) format('woff2-variations')}
  @font-face{font-family:'Indie Flower';font-style:normal;font-weight:400;font-display:swap;
    src:url(../fonts/indieflower-latin-400.woff2) format('woff2')}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
    src:url(../fonts/jetbrains-latin-var.woff2) format('woff2-variations')}

/* Brand blue darkened 31 July 2026 from #2a80c2 to #1f6ca2. The old value
   scored 4.23:1 on white and 3.55:1 on the tinted backgrounds it sits on,
   against a 4.5:1 requirement; the new one passes everywhere it appears.
   To revert: #1f6ca2 -> #2a80c2 and #195a88 -> #226ba3, both throughout. */
:root{
    --ink:#221d33;--muted:#635d76;--line:#e9e6f1;--wash:#f5f3fa;
    --purple:#5f5484;--purple-2:#7d6fb8;--purple-deep:#2c2450;
    --blue:#489cd8;--blue-deep:#1f6ca2;--blue-soft:#e7f2fb;
    --dark:#241f38;--dark-2:#1d1930;--paper:#fff;--btn-radius:5px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{overflow-x:clip}
  body{font-family:'Figtree',sans-serif;color:var(--ink);background:#fff;line-height:1.6}
  h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif}
  a{text-decoration:none;color:inherit}
  img{max-width:100%}
  .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(22px,4vw,32px)}
  .chev{display:inline-block;transform:translateY(1px)}

  /* reveal / entrance */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .stagger>.reveal:nth-child(1){transition-delay:.05s}
  .stagger>.reveal:nth-child(2){transition-delay:.16s}
  .stagger>.reveal:nth-child(3){transition-delay:.27s}
  .stagger>.reveal:nth-child(4){transition-delay:.38s}
  /* Anything in the first screenful opts out of the entrance animation and
     paints with the HTML. A .reveal element starts at opacity:0 and waits for
     JavaScript to boot, run the observer and add .in - which made the hero
     paragraph the Largest Contentful Paint element with 3.6 SECONDS of render
     delay, on a page whose server response took no time at all. Below the fold
     the animation still earns its keep: the visitor has to scroll to reach it,
     so it has time to run and costs nothing measurable. */
  .hero .reveal,
  .doodle.reveal,
  .about-head.reveal,
  .price-jump.reveal,
  .pro-head.reveal,
  .lhead.reveal,
  .contact-wrap.reveal,
  .legal-head.reveal,
  .prose.reveal,
  .dp-card.reveal{opacity:1;transform:none;transition:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  @media (prefers-reduced-motion:reduce){.hero h1 .hl{animation:none}.shot .basket-slide,.shot .scrim2{transition:none}}

  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;border-radius:var(--btn-radius);cursor:pointer;font-family:inherit;font-size:14.5px;padding:9px 20px;border:1.5px solid transparent;transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .12s ease;white-space:nowrap}
  .btn-blue{background:var(--blue-deep);color:#fff}
  .btn-blue:hover{background:#195a88}
  .btn-light{background:#fff;color:var(--purple-deep)}
  .btn-light:hover{background:#efeafa}
  .btn-ghost-d{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}
  .btn-ghost-d:hover{background:rgba(255,255,255,.16)}
  .btn-outline{background:#fff;color:var(--blue-deep);border-color:#c9d9ec}
  .btn-outline:hover{border-color:var(--blue);background:var(--wash)}

  /* ---------------- NAV ---------------- */
  .hero{position:relative;isolation:isolate;color:#fff;overflow:hidden}
  .navbar{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:90;width:calc(100% - 20px);max-width:1200px;
    display:flex;align-items:center;gap:24px;background:#fff;border-radius:5px;padding:10px 22px;
    box-shadow:0 2px 8px -4px rgba(28,18,60,.13);transition:padding .25s ease,top .25s ease,box-shadow .25s ease,border-radius .2s ease}
  .navbar.scrolled{top:6px;padding-top:6px;padding-bottom:6px}
  .navbar.open{box-shadow:0 1px 4px -2px rgba(28,18,60,.1)}
  /* when the in-page sub-nav is docked beneath it: square the meeting edge and drop the
     seam shadow so header + sub-nav read as one unit (the sub-nav carries the shadow) */
  .navbar.has-sub-joined{border-bottom-left-radius:0;border-bottom-right-radius:0;
    box-shadow:0 -3px 13px -6px rgba(28,18,60,.14)}   /* casts up + sides; sub-nav covers the bottom */
  /* width:auto matters here. The img carries width/height attributes so the
     browser can reserve the right box before the file loads, but those are
     presentational hints that set width outright - without width:auto the
     logo renders at its attribute width and stretches. Same for every rule
     below that sizes an image on one axis. */
  .navbar .logo img{height:42px;width:auto;display:block;transition:height .25s ease}
  .navbar.scrolled .logo img{height:36px}
  .navbar .links{list-style:none;display:flex;align-items:center;gap:30px;margin-left:auto}
  .navbar .links>li>a{font-weight:600;font-size:15px;color:#2f2a45;display:flex;align-items:center;gap:6px;cursor:pointer}
  .navbar .links>li>a:hover{color:var(--blue-deep)}
  .caret{display:inline-flex;align-items:center;color:#635d76;transition:transform .2s;vertical-align:middle;margin-top:-1px}
  .has-drop{position:static}
  .navcta{flex:none;margin-left:16px}
  .login-ic{display:inline-flex;align-items:center;justify-content:center;color:var(--blue-deep);flex:none;margin-left:14px}
  .login-ic:hover{color:#195a88}
  .login-ic svg{width:26px;height:26px;display:block}
  .burger{display:none;margin-left:auto;width:22px;height:17px;position:relative;background:none;border:none;cursor:pointer;padding:0;flex:none}
  .burger span{position:absolute;left:0;right:0;height:4px;border-radius:2px;background:#1c1b22;transition:transform .25s ease,opacity .18s ease,top .25s ease;transform-origin:center}
  .burger span:nth-child(1){top:0}.burger span:nth-child(2){top:6.5px}.burger span:nth-child(3){top:13px}
  .navbar.open .burger span:nth-child(1){top:6.5px;transform:rotate(45deg)}
  .navbar.open .burger span:nth-child(2){opacity:0}
  .navbar.open .burger span:nth-child(3){top:6.5px;transform:rotate(-45deg)}

  /* dropdowns - full navbar width, centred */
  .drop{position:absolute;top:calc(100% + 12px);right:0;width:70%;background:#fff;border-radius:18px;
    box-shadow:0 16px 40px -24px rgba(28,18,60,.24);border:1px solid var(--line);
    padding:24px 28px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s ease;z-index:60}
  .drop-plugins{width:min(680px,94vw)}
  .drop::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
  .has-drop:hover .drop{opacity:1;visibility:visible;transform:none}
  .has-drop:hover .caret{transform:rotate(180deg)}
  /* plugins mega-menu */
  .pm-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
  .pm-h{font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;color:var(--blue-deep);padding-bottom:10px;border-bottom:1px dashed #d3d0de;margin:0 0 10px}
  .pm-colL{display:flex;flex-direction:column}
  .pm-sol{display:flex;gap:13px;align-items:center;padding:9px 8px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background-color .15s ease}
  .pm-sol:hover{background:var(--wash)}
  .pm-thumb{width:58px;height:58px;border-radius:9px;overflow:hidden;flex:none;border:1px solid var(--line);background:#fff}
  .pm-thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
  .bp-art{width:100%;height:100%;display:block}
  .sec-art{width:64px;height:64px;border-radius:15px;overflow:hidden;display:block;margin:0 auto 16px;border:1px solid var(--line);box-shadow:0 3px 10px -6px rgba(28,18,60,.16)}
  .phero-art{width:62px;height:62px;border-radius:15px;overflow:hidden;display:block;margin-bottom:16px;border:2px solid rgba(255,255,255,.35);box-shadow:0 5px 14px -8px rgba(20,12,45,.3)}
  .pm-sol h4{font-size:15px;font-weight:700;margin:0 0 2px}
  .pm-sol p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
  .pm-box{margin-top:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;text-decoration:none;display:block;transition:border-color .15s ease,background-color .15s ease}
  .pm-box:hover{border-color:#c9d9ec;background:var(--wash)}
  .pm-box b{font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);display:block;margin-bottom:3px}
  .pm-box p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
  .pm-box .pm-go{display:inline-block;margin-top:7px;color:var(--blue-deep);font-weight:700;font-size:12.5px}
  .pm-spot{background:var(--blue-soft);border-radius:14px;padding:18px;height:100%;display:flex;flex-direction:column}
  .pm-spot .pm-tag{align-self:flex-start;display:inline-block;font-size:10.5px;font-weight:700;color:#1c8a4c;background:#dff3e6;border-radius:999px;padding:3px 9px;margin-bottom:9px}
  .pm-spot h4{font-family:'Poppins',sans-serif;font-size:16.5px;font-weight:700;margin:0 0 6px;line-height:1.3}
  .pm-spot > p{font-size:12.5px;color:var(--muted);margin:0 0 11px;line-height:1.5}
  .pm-spot ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
  .pm-spot li{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;color:var(--ink)}
  .pm-spot li svg{width:14px;height:14px;fill:none;stroke:var(--blue-deep);stroke-width:2.6;flex:none}
  .pm-spot .pm-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:var(--blue-deep);color:#fff;font-weight:700;font-size:13px;padding:9px 15px;border-radius:10px;text-decoration:none}
  .pm-spot .pm-cta svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4}

  /* ---------------- HERO ---------------- */
  .hero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--purple-deep)}
  .hero .bg::before{content:"";position:absolute;inset:-20%;filter:blur(60px);z-index:0;
    background:radial-gradient(circle at 86% 30%,rgba(72,156,216,.28),transparent 46%),
      radial-gradient(circle at 72% 82%,rgba(125,111,184,.25),transparent 50%),transparent}
  .orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.95;will-change:transform;pointer-events:none;z-index:0}
  .orb.o1{width:560px;height:560px;background:radial-gradient(circle,#63bbf5,transparent 64%);top:-160px;right:1%;animation:drift1 16s ease-in-out infinite}
  .orb.o2{width:700px;height:700px;background:radial-gradient(circle,#9a8de0,transparent 64%);bottom:-240px;right:12%;animation:drift2 19s ease-in-out infinite}
  .orb.o3{width:520px;height:520px;background:radial-gradient(circle,#4ec0f7,transparent 64%);top:16%;right:-110px;animation:drift3 14s ease-in-out infinite}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-165px,115px) scale(1.36)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(135px,-115px) scale(1.3)}}
  @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-120px,-85px) scale(1.42)}}
  .shot .window{animation:heroFloat 7s ease-in-out infinite}
  @keyframes heroFloat{0%,100%{transform:rotate(1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-12px)}}
  @media (prefers-reduced-motion:reduce){.orb,.shot .window{animation:none}}
  .stage2{position:relative;overflow:hidden}
  .stage2 .page-img{display:block;width:100%;height:auto}
  .scrim2{position:absolute;inset:0;background:rgba(28,20,58,.26);opacity:0;transition:opacity .5s ease;pointer-events:none}
  .basket-slide{position:absolute;top:0;right:0;height:100%;width:auto;box-shadow:-20px 0 44px -20px rgba(20,12,50,.45);transform:translateX(105%);transition:transform .75s cubic-bezier(.22,1,.36,1)}
  .shot.open .scrim2{opacity:1}
  .shot.open .basket-slide{transform:translateX(0)}
  .hero .grid{display:grid;grid-template-columns:1.02fr 1.12fr;gap:50px;align-items:center;padding:150px 0 150px}
  @media(max-width:960px){.hero .grid{grid-template-columns:1fr;gap:44px;padding:130px 0 74px}.hero .stagger{text-align:center}.hero .btns{justify-content:center;gap:10px}.hero .phero-art{margin-left:auto;margin-right:auto}}
  .eyebrow{display:inline-flex;align-items:center;gap:13px;font-size:12.5px;font-weight:600;letter-spacing:0.01em;text-transform:uppercase;color:#c3ddf3;margin-bottom:22px}
  .hero h1{font-size:clamp(34px,4.4vw,52px);line-height:1.15;font-weight:700;letter-spacing:-.025em}
  .hero h1 .hl{background:linear-gradient(100deg,#ffd54a 0%,#ffd54a 40%,#fff6d8 50%,#ffd54a 60%,#ffd54a 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hlshine 4.5s ease-in-out infinite}
  @keyframes hlshine{0%{background-position:130% 0}45%,100%{background-position:-30% 0}}
  .hero .sub{font-size:19px;color:rgba(255,255,255,.9);margin-top:20px;max-width:38ch}
  .hero .btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

  /* slide-out cart mock */
  .shot{position:relative}
  .heroann{position:absolute;top:100%;right:0;margin-top:2px;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end}
  .heroann .ann-txt{font-family:'Indie Flower',cursive;font-weight:400;font-size:23px;line-height:1.15;color:#fff;white-space:nowrap}
  .heroann svg{display:block;overflow:visible}
  .heroann svg path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
  .heroann .ann-up{margin-right:46%}
  .heroann .ann-down{display:none;margin-right:0}
  @media(max-width:960px){
    .heroann{position:static;margin:0 0 4px;align-items:center}
    .heroann .ann-up{display:none;margin-right:0}
    .heroann .ann-down{display:block}
    .heroann .ann-txt{font-size:21px}
  }
  .window{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(10,6,30,.7);transform:rotate(1deg);border:1px solid rgba(255,255,255,.4);max-width:100%}
  .shot-img{display:block;width:100%;height:auto}
  .winbar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#efedf6;border-bottom:1px solid #e2dfec}
  .winbar i{width:11px;height:11px;border-radius:50%;background:#cfc9dd}
  .winbar i:nth-child(1){background:#f0787f}.winbar i:nth-child(2){background:#f5c04e}.winbar i:nth-child(3){background:#6fc78a}
  .winbar .url{margin-left:10px;flex:1;min-width:0;background:#fff;border-radius:6px;font-size:12px;color:#8a85a0;padding:5px 12px;font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ---------------- trust ---------------- */
  .startfree{position:relative;overflow:hidden;background:linear-gradient(180deg,#eef1fc,#e6ecfa)}
  .startfree::before,.startfree::after{content:"";position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0}
  .startfree::before{width:440px;height:440px;background:radial-gradient(circle,rgba(115,168,235,.55),transparent 68%);top:-150px;left:-130px}
  .startfree::after{width:480px;height:480px;background:radial-gradient(circle,rgba(150,133,214,.5),transparent 68%);bottom:-190px;right:-130px}
  .sf{position:relative;z-index:1;max-width:780px;margin:0 auto;text-align:center;padding:92px clamp(22px,4vw,32px) 96px}
  .sf-stamp{display:inline-block;transform:rotate(-3deg);border:2.5px solid var(--blue-deep);color:var(--blue-deep);border-radius:12px;padding:8px 18px;font-family:'Baloo 2',cursive;font-weight:800;font-size:18px;margin-bottom:24px}
  .sf-fig{font-family:'Baloo 2',cursive;font-weight:800;font-size:80px;line-height:.95;background:linear-gradient(120deg,#1f6ca2,#7d6fb8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 20px rgba(72,156,216,.28))}
  /* The caption only. This was '.sf-fig span', which also caught the price
     once it gained its own span for the currency switch - and rendered an
     80px gradient figure as 16px grey body text. */
  .sf-fig .sf-cap{display:block;font-family:'Figtree',sans-serif;font-weight:600;font-size:16px;color:var(--muted);margin-top:8px}
  .sf-notes{font-weight:600;font-size:17px;color:var(--ink);margin-top:22px}
  .sf-pitch{font-size:16px;color:var(--muted);margin:14px auto 0;max-width:580px;line-height:1.5}
  .sf-pitch b{color:var(--purple-deep)}
  @media(max-width:600px){.sf-fig{font-size:60px}.sf{padding:66px clamp(22px,4vw,32px)}}

  /* ---------------- Bang! Cart section ---------------- */
  .cart-sec{padding:108px 0 56px}
  .sec-head{max-width:660px;margin:0 auto 56px;text-align:center}
  .sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;margin-top:8px}
  .sec-head p{color:var(--muted);margin-top:12px;font-size:17.5px}
  .cart-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center}
  /* A grid track sized 1fr has an automatic minimum of min-content, so any child
     that refuses to wrap (a button row, a long word) drags the whole column
     wider than the page. min-width:0 lets the track shrink to the space it has
     and makes the child deal with it. */
  .cart-grid>*{min-width:0}
  .invites-sec{background:#f3f5fc}
  .invites-sec .cart-grid{grid-template-columns:1.05fr 1fr}
  .invites-sec .cart-vis{order:-1}
  /* The single-column rule has to name .invites-sec too. Without it the
     two-column rule above wins on specificity at every width and the Invites
     section stays side-by-side on a phone. */
  @media(max-width:900px){.cart-grid,.invites-sec .cart-grid{grid-template-columns:1fr;gap:40px}.cart-copy{text-align:center}.cart-copy .lead{margin-left:auto;margin-right:auto}.feats li{justify-content:center}.cart-copy .cta-row{justify-content:center}.invites-sec .cart-vis{order:0}}
  .cart-copy .badge2{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;background:#e4f6ec;color:#1c8a4c;border-radius:999px;padding:4px 12px;margin-bottom:22px}
  .cart-copy h2,.cart-copy h3{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
  .cart-copy .one{color:var(--purple-2);font-weight:600;margin:14px 0 18px;font-size:17.5px}
  .cart-copy .lead{color:var(--muted);font-size:17px;line-height:1.65;max-width:46ch}
  .feats{list-style:none;margin:32px 0 36px;display:grid;gap:22px}
  .feats li{display:flex;gap:13px;align-items:flex-start}
  .feats .fi{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;flex:none}
  .feats .fi svg{width:18px;height:18px}
  .feats b{font-size:16.5px;font-weight:600;display:block;margin-bottom:4px}
  .feats span{font-size:15px;color:var(--muted);line-height:1.5}
  .cart-copy .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
  /* section visual: page + buttons + slide-out */
  .cart-vis .window{transform:rotate(1deg);box-shadow:0 12px 28px -16px rgba(28,18,60,.32)}
  .invites-sec .cart-vis .window{transform:rotate(-1deg)}
  .more b{color:var(--purple);font-weight:600}

  /* ---------------- family ---------------- */
  .family{position:relative;overflow:hidden;color:#fff;padding:92px 0;
    background:radial-gradient(circle at 8% 12%,rgba(125,111,184,.38),transparent 50%),
      radial-gradient(circle at 94% 86%,rgba(72,156,216,.45),transparent 56%),
      linear-gradient(135deg,#2a2250 0%,#33306e 42%,#2f5fa8 100%)}
  .family::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;transform-origin:50% 50%;will-change:transform;
    background:repeating-radial-gradient(circle at 50% 50%,transparent 0 56px,rgba(255,255,255,.06) 56px 57.5px,transparent 57.5px 58px);
    animation:famPulse 9s ease-in-out infinite}
  @keyframes famPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.16);opacity:1}}
  @media (prefers-reduced-motion:reduce){.family::before{animation:none}}
  .family .wrap{position:relative;z-index:1}
  .family .fh{text-align:center;margin-bottom:34px}
  .family .fh h2{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em}
  .family .fh p{color:#cbc4e6;margin-top:10px;font-size:16px;max-width:52ch;margin-left:auto;margin-right:auto}
  .fbrands{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:920px;margin:0 auto}
  @media(max-width:760px){.fbrands{grid-template-columns:1fr}}
  .fbrand{background:#fff;border-radius:16px;padding:30px 26px;text-align:center;transition:.15s;display:flex;flex-direction:column;align-items:center}
  .fbrand:hover{transform:translateY(-6px);box-shadow:0 26px 52px -22px rgba(72,156,216,.55)}
  .fbrand img{height:44px;width:auto;margin-bottom:16px}
  .fbrand.this{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2)}
  .fbrand span{display:block;color:var(--muted);font-size:14.5px}
  .fbrand.this span{color:#cbc4e6}
  .fbrand .go{display:inline-block;margin-top:12px;color:var(--blue-deep);font-weight:600;font-size:13.5px}
  .fbrand.this .go{color:#8fc3ec}

  /* ---------------- footer ---------------- */
  footer{padding:56px 0 0}
  .foot{background:linear-gradient(160deg,#302E3B 49%,#201E27 100%);color:#fff;border-radius:22px;padding:44px 44px 34px}
  .foot .flogo img{height:44px;width:auto}
  .foot .top{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:56px;align-items:start}
  .foot-brand{max-width:400px}
  .foot .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .foot .blurb{background:#26242f;border-radius:12px;padding:26px 32px;font-size:14.5px;color:#fff;margin-top:20px;max-width:400px}
  .foot h3,.foot h4{color:#7cc4f5;font-weight:700;font-size:15px;margin-bottom:14px}
  .foot ul{list-style:none;display:flex;flex-direction:column;gap:7px}
  .foot ul a{font-size:14.5px;color:#fff;transition:opacity .2s ease}.foot ul a:hover{opacity:.6}
  .foot .rule{height:1px;background:rgba(72,156,216,.35);margin:32px 0 20px}
  .foot .legal{display:flex;gap:28px;justify-content:flex-end;font-size:14px}.foot .legal a{color:#fff;transition:opacity .2s ease}.foot .legal a:hover{opacity:.6}
  .subfoot{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#2d2b37;color:#fff;border-radius:14px;padding:18px 26px;margin:14px 0 40px;font-size:14px}
  .subfoot-right{display:flex;align-items:center;gap:20px}
  .bg-icon img{height:35px;width:auto;display:block;border-radius:8px}
  .subfoot .r{text-align:right}

  @media(max-width:1024px){
    .navbar{gap:14px;padding:10px 14px 10px 20px}
    .navbar .links,.navcta,.login-ic{display:none}
    .navbar .burger{display:block}
    .navbar .logo img{height:50px}
    .navbar.scrolled{top:10px;padding-top:10px;padding-bottom:10px}
    .navbar.scrolled .logo img{height:50px}
    .navbar.open{position:fixed;background:#fff;box-shadow:0 2px 8px -4px rgba(28,18,60,.13);border-radius:5px;z-index:130;top:10px;left:50%;transform:translateX(-50%);width:calc(100% - 20px);padding:10px 14px 10px 20px}
  }
  @media(max-width:880px){
    .foot .top{grid-template-columns:1fr;text-align:center}
    .foot-brand{max-width:none}
    .foot .cols{grid-template-columns:1fr;gap:30px;width:100%}
    .foot .blurb{margin-left:auto;margin-right:auto}
    .foot .legal{justify-content:center;flex-wrap:wrap;gap:16px}
    .subfoot{flex-direction:column;text-align:center;gap:14px}.subfoot .r{text-align:center}
    .subfoot-right{flex-direction:column;gap:14px}
  }
  

  /* ---------------- mobile menu ---------------- */
  /* top padding clears the fixed navbar - do NOT rely on .mm-login for this, it is
     hidden until $licensing_live and the menu must work without it */
  .mobilemenu{position:fixed;inset:0;z-index:110;background:linear-gradient(180deg,#fbfbfe 0%,#eef1fc 100%);padding:92px 16px calc(16px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
  .mobilemenu.open{opacity:1;visibility:visible;pointer-events:auto}
  .mm-login{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--dark);color:#fff;font-weight:600;font-size:17px;padding:16px;border-radius:5px;margin:0 0 10px;flex:none}
  .mm-login svg{width:20px;height:20px}
  .mm-nav{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
  .mm-link{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;background:none;border:none;font-family:inherit;font-weight:700;font-size:17px;color:var(--ink);text-align:left;padding:16px 4px;border-bottom:1.5px dashed #d9d6e4;cursor:pointer}
  .mm-link::after{content:'›';color:var(--blue);font-weight:700;font-size:18px}
  /* section labels + product launcher cards */
  .mm-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);margin:6px 2px 10px}
  .mm-eyebrow-gap{margin-top:26px}
  .mm-prod{display:flex;align-items:center;gap:12px;border-radius:14px;padding:13px 14px;margin-bottom:10px;border:1px solid transparent}
  .mm-prod-cart{background:var(--blue-soft);border-color:#d6e8f8}
  .mm-prod-inv{background:#f0ebfb;border-color:#e3daf4}
  .mm-prod b{font-size:15px;font-weight:700;color:var(--ink)}
  .mm-prod p{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}
  .mm-prod .mm-chev{margin-left:auto;color:var(--blue-deep);font-weight:700;font-size:20px;flex:none}
  .mm-prod-inv .mm-chev{color:var(--purple-2)}
  .mm-freeline{display:block;font-size:13px;font-weight:600;color:var(--blue-deep);padding:4px 2px 0}
  /* soft background orbs, echoing the hero */
  .mobilemenu{overflow:hidden}
  .mobilemenu::before,.mobilemenu::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
  .mobilemenu::before{width:340px;height:340px;top:-90px;right:-130px;background:radial-gradient(circle,rgba(125,111,184,.20),transparent 68%)}
  .mobilemenu::after{width:400px;height:400px;bottom:-120px;left:-150px;background:radial-gradient(circle,rgba(72,156,216,.18),transparent 68%)}
  /* staggered entrance when the menu opens */
  .mobilemenu .mm-login,.mobilemenu .mm-nav>*{opacity:0;transform:translateY(14px);transition:opacity .32s ease,transform .32s ease}
  .mobilemenu.open .mm-login,.mobilemenu.open .mm-nav>*{opacity:1;transform:none}
  /* The ramp MUST cover every .mm-nav child. The un-numbered rule below is the
     safety floor: an item beyond the ramp lands at the end of the sequence
     instead of at 0s, which would make it animate FIRST. Support was doing
     exactly that - 10 children, only 9 delays. Fixed 17 Aug 2026. If you add a
     menu item past the 12th, extend the ramp. */
  .mobilemenu.open .mm-nav>*{transition-delay:.59s}
  .mobilemenu.open .mm-nav>*:nth-child(1){transition-delay:.04s}
  .mobilemenu.open .mm-nav>*:nth-child(2){transition-delay:.09s}
  .mobilemenu.open .mm-nav>*:nth-child(3){transition-delay:.14s}
  .mobilemenu.open .mm-nav>*:nth-child(4){transition-delay:.19s}
  .mobilemenu.open .mm-nav>*:nth-child(5){transition-delay:.24s}
  .mobilemenu.open .mm-nav>*:nth-child(6){transition-delay:.29s}
  .mobilemenu.open .mm-nav>*:nth-child(7){transition-delay:.34s}
  .mobilemenu.open .mm-nav>*:nth-child(8){transition-delay:.39s}
  .mobilemenu.open .mm-nav>*:nth-child(9){transition-delay:.44s}
  .mobilemenu.open .mm-nav>*:nth-child(10){transition-delay:.49s}
  .mobilemenu.open .mm-nav>*:nth-child(11){transition-delay:.54s}
  .mobilemenu.open .mm-nav>*:nth-child(12){transition-delay:.59s}
  @media (prefers-reduced-motion:reduce){
    .mobilemenu .mm-login,.mobilemenu .mm-nav>*{opacity:1;transform:none;transition:none}
  }
  .mm-art{width:48px;height:48px;border-radius:10px;overflow:hidden;flex:none;border:1px solid var(--line);background:#fff}

  /* ============================================================
     PLUGIN LANDING PAGES (cart.php / invites.php)
     ============================================================ */

  /* --- page hero tweaks (reuses .hero) --- */
  .phero .sub{max-width:44ch}
  .phero .kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#c3ddf3;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 14px;margin-bottom:20px}
  .phero .kicker .free{color:#8ff0b8}
  .hero .btn-ghost-d .chev{color:#fff}

  /* --- sticky in-page sub-nav --- */
  .subnav{position:sticky;top:60px;z-index:80;margin:22px auto 0;max-width:1200px;width:calc(100% - 20px)}
  .subnav-inner{display:flex;align-items:center;gap:6px;background:#e1edf6;
    border-radius:5px;padding:7px 10px;box-shadow:0 2px 8px -4px rgba(28,18,60,.13);
    transition:border-radius .2s ease,box-shadow .25s ease}
  /* docked under the header: square the meeting edge, cast the shadow down + sides (the
     header casts up + sides, so together they wrap the whole unit), + a small settle animation */
  .subnav.joined .subnav-inner{border-top-left-radius:0;border-top-right-radius:0;
    box-shadow:0 4px 13px -6px rgba(28,18,60,.14);animation:sndock .2s ease}
  @keyframes sndock{from{transform:translateY(-5px)}to{transform:translateY(0)}}
  @media (prefers-reduced-motion:reduce){.subnav.joined .subnav-inner{animation:none}}
  .subnav-links{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:1;min-width:0}
  .subnav a.sl{font-weight:600;font-size:14px;color:#413c58;padding:8px 15px;border-radius:5px;
    white-space:nowrap;transition:background-color .18s ease,color .18s ease}
  .subnav a.sl:hover{background:#f2f7fc;color:var(--blue-deep)}
  .subnav a.sl.active{background:#fff;color:var(--blue-deep);box-shadow:0 1px 3px -1px rgba(28,18,60,.12)}
  .subnav .sn-cta{margin-left:30px;flex:none}
  .subnav .sn-cta .btn{padding:8px 16px;font-size:13.5px}

  /* --- BLUE sub-nav variant (data-theme="blue") --- */
  .subnav[data-theme="blue"] .subnav-inner{background:var(--blue-deep)}
  .subnav[data-theme="blue"] a.sl{color:#eaf4fc}
  .subnav[data-theme="blue"] a.sl:hover{background:rgba(255,255,255,.16);color:#fff}
  .subnav[data-theme="blue"] a.sl.active{background:#fff;color:var(--blue-deep)}
  .subnav[data-theme="blue"] .sn-cta .btn{background:#fff;color:var(--blue-deep);border-color:#fff}
  .subnav[data-theme="blue"] .sn-cta .btn:hover{background:transparent;color:#fff;border-color:#fff}
  .subnav[data-theme="blue"] .sn-jump{color:#fff}
  .subnav[data-theme="blue"] .sn-jump .sn-current{color:#bfe0f7}
  .subnav[data-theme="blue"] .sn-jump .sn-x{color:#bfe0f7}
  .subnav[data-theme="blue"] .subnav-links{background:var(--blue-deep)}
  /* mobile jump-menu trigger (hidden on desktop) */
  .sn-jump{display:none}
  .sn-current{display:none}

  @media(max-width:760px){
    /* MODE A: horizontal scroll strip (default) */
    .subnav[data-mobile="strip"] .subnav-inner{padding:6px 8px}
    .subnav[data-mobile="strip"] .subnav-links{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;-ms-overflow-style:none;gap:2px;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
      mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
    .subnav[data-mobile="strip"] .subnav-links::-webkit-scrollbar{display:none}
    .subnav[data-mobile="strip"] .subnav a.sl{font-size:13.5px;padding:8px 13px}
    .subnav[data-mobile="strip"] .sn-cta{display:none}

    /* MODE B: "Jump to" dropdown */
    .subnav[data-mobile="menu"] .subnav-links{position:absolute;left:0;right:0;top:calc(100% + 6px);
      flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:12px;
      box-shadow:0 24px 50px -20px rgba(28,18,60,.45);padding:8px;gap:2px;
      opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s ease;z-index:5}
    .subnav[data-mobile="menu"].open .subnav-links{opacity:1;visibility:visible;transform:none}
    .subnav[data-mobile="menu"] .subnav-inner{position:relative}
    .subnav[data-mobile="menu"] a.sl{font-size:15px;padding:11px 14px}
    .subnav[data-mobile="menu"] .sn-cta{display:none}
    .subnav[data-mobile="menu"] .sn-jump{display:flex;align-items:center;gap:10px;width:100%;
      background:none;border:none;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--ink);
      cursor:pointer;padding:9px 6px}
    .subnav[data-mobile="menu"] .sn-jump .sn-current{display:block;color:var(--blue-deep)}
    .subnav[data-mobile="menu"] .sn-jump .sn-x{margin-left:auto;color:var(--blue);font-size:12px;transition:transform .2s}
    .subnav[data-mobile="menu"].open .sn-jump .sn-x{transform:rotate(180deg)}
  }

  /* --- generic landing section --- */
  .lsec,.pro-sec{scroll-margin-top:122px}
  .lsec{padding:84px 0}
  .lsec.tint{background:#f3f5fc}
  .lsec.tintb{background:linear-gradient(180deg,#eef1fc,#e6ecfa)}
  .lhead{max-width:680px;margin:0 auto 52px;text-align:center}
  .lhead .eye{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:10px}
  .lhead h1,.lhead h2{font-size:clamp(27px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
  .lhead p{color:var(--muted);margin-top:13px;font-size:17.5px;line-height:1.55}

  /* --- feature grid --- */
  .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  @media(max-width:920px){.fgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.fgrid{grid-template-columns:1fr}}
  .fcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .fcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(28,18,60,.4);border-color:#dfe7f3}
  .fcard .fi{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .fcard .fi svg{width:23px;height:23px}
  .fcard h3{font-size:17.5px;font-weight:700;letter-spacing:-.01em}
  .fcard p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:7px}

  /* --- Pro intro --- */
  .pro-sec{position:relative;overflow:hidden;color:#fff;padding:88px 0;
    background:radial-gradient(circle at 10% 8%,rgba(125,111,184,.4),transparent 52%),
      radial-gradient(circle at 92% 90%,rgba(72,156,216,.42),transparent 55%),
      linear-gradient(135deg,#2a2250 0%,#33306e 44%,#2f5fa8 100%)}
  .pro-head{text-align:center;max-width:700px;margin:0 auto 46px}
  .pro-head h2{font-size:clamp(27px,3.4vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.16}
  .pro-head h2 .hl{background:linear-gradient(100deg,#ffd54a,#fff6d8 50%,#ffd54a);-webkit-background-clip:text;background-clip:text;color:transparent}
  .pro-head p{color:#cdd7ee;margin-top:14px;font-size:17px;line-height:1.6}
  .pro-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:920px;margin:0 auto}
  @media(max-width:720px){.pro-grid{grid-template-columns:1fr}}
  .pro-card{display:flex;gap:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:15px;padding:22px 22px}
  .pro-card .pc-ic{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
  .pro-card .pc-ic svg{width:22px;height:22px}
  .pro-card b{font-size:16px;font-weight:700;display:block}
  .pro-card span{display:block;font-size:14px;color:#c7d1ea;line-height:1.5;margin-top:5px}
  /* a{color:inherit} sitewide, so a link in a card body needs saying on dark. */
  .pro-card span a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
  .pro-card .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2a2250;background:#ffd54a;border-radius:999px;padding:2px 9px;margin-top:9px}
  .pro-card .tag.road{background:transparent;color:#ffe4a3;border:1px solid rgba(255,213,74,.55)}
  /* roadmap sub-group inside the Pro section */
  .pro-road{margin-top:46px}
  .pro-road-head{text-align:center;max-width:640px;margin:0 auto 26px}
  .pro-road-head h3{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.01em}
  .pro-road-head p{color:#cbd5ec;font-size:15px;margin-top:8px;line-height:1.55}
  .pro-road .pro-card{background:rgba(255,255,255,.045);border-style:dashed}
  /* roadmap marker in the comparison table (if used) */

  /* --- comparison table --- */
  .cmp-wrap{max-width:900px;margin:0 auto}
  .cmp{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .cmp th,.cmp td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
  .cmp thead th{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;border-bottom:2px solid var(--line)}
  .cmp thead th.col-free,.cmp thead th.col-pro{text-align:center;width:120px}
  .cmp thead th.col-pro{background:linear-gradient(180deg,#eef4fc,#fff);color:var(--blue-deep)}
  .cmp .grp td{background:var(--wash);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--purple-deep);padding:11px 20px}
  .cmp td.feat b{font-weight:600;font-size:15px;display:block}
  .cmp td.feat span{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.45}
  .cmp td.col-free,.cmp td.col-pro{text-align:center;width:120px;font-weight:600}
  .cmp td.col-pro{background:#f7fafe}
  .cmp tbody tr:last-child td{border-bottom:none}
  .tick{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center}
  .tick.yes{background:#dff3e6;color:#1c8a4c}
  .tick.no{color:#c4bfd2}
  .tick svg{width:14px;height:14px}
  .cmp .val{font-size:13px;color:var(--blue-deep);font-weight:600}
  .cmp-foot{text-align:center;margin-top:26px;color:var(--muted);font-size:14.5px}
  .cmp-foot.on-dark{color:#cdd7ee}

  /* responsive comparison: stack into per-feature cards */
  @media(max-width:680px){
    .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
    .cmp{border:none;background:none;overflow:visible}
    .cmp tbody tr{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
    .cmp tr.grp{background:none;border:none;margin:22px 0 8px}
    .cmp .grp td{border-radius:0;background:none;padding:0 4px;color:var(--purple-deep)}
    .cmp td{border-bottom:1px solid var(--line);padding:13px 16px}
    .cmp td.feat{border-bottom:1px solid var(--line)}
    .cmp td.col-free,.cmp td.col-pro{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;background:none}
    .cmp td.col-free::before{content:"Free";font-weight:700;font-size:13px;color:var(--muted)}
    .cmp td.col-pro::before{content:"Pro";font-weight:700;font-size:13px;color:var(--blue-deep)}
    .cmp tbody tr td:last-child{border-bottom:none}
  }

  /* --- pricing --- */
  .cur-switch{display:inline-flex;gap:2px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px;margin-top:20px}
  .cur-btn{border:none;background:none;font-family:inherit;font-weight:600;font-size:13.5px;color:var(--muted);padding:6px 16px;border-radius:999px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
  .cur-btn:hover{color:var(--blue-deep)}
  .cur-btn.active{background:var(--blue-deep);color:#fff}
  html[data-cur="gbp"] .cur-usd,html[data-cur="gbp"] .cur-eur{display:none}
  html[data-cur="usd"] .cur-gbp,html[data-cur="usd"] .cur-eur{display:none}
  html[data-cur="eur"] .cur-gbp,html[data-cur="eur"] .cur-usd{display:none}

  /* Freemius' checkout loader. The element is injected into OUR page, so this
     is ours to style - but the purple spinner is an <img>, with the colour
     baked into the file rather than set in CSS. So it is hidden and redrawn
     here in the site blue. The id carries a per-instance GUID, hence ^=. */
  div[id^="fs-loader-"] img{display:none}
  div[id^="fs-loader-"]::after{content:"";position:absolute;top:40%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;box-sizing:border-box;background:#fff;border:5px solid #dbe7f3;border-top-color:#2a80c2;border-radius:50%;box-shadow:2px 2px 2px rgba(0,0,0,.1);animation:bp-spin .8s linear infinite}
  @keyframes bp-spin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){div[id^="fs-loader-"]::after{animation:none;border-top-color:#dbe7f3}}
  .pricing-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:820px;margin:0 auto;align-items:stretch}
  @media(max-width:680px){.pricing-wrap{grid-template-columns:1fr}}
  .price-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 30px 30px;display:flex;flex-direction:column;position:relative}
  .price-card.pro{border:1.5px solid var(--blue);box-shadow:0 22px 46px -28px rgba(42,128,194,.5)}
  .price-badge{position:absolute;top:-12px;left:30px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--blue-deep);border-radius:999px;padding:4px 13px}
  .price-card .pc-name{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700}
  .price-card .pc-tagline{color:var(--muted);font-size:14.5px;margin-top:5px}
  .price-card .pc-price{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px;font-family:'Baloo 2',cursive;font-weight:800;font-size:46px;line-height:1;color:var(--purple-deep)}
  .price-card.pro .pc-price{background:linear-gradient(120deg,#1f6ca2,#7d6fb8);-webkit-background-clip:text;background-clip:text;color:transparent}
  .price-card .pc-price.soon{font-size:30px;color:var(--blue-deep);background:none;-webkit-text-fill-color:currentColor}
  .price-card .pc-per{font-family:'Figtree',sans-serif;font-size:14px;font-weight:600;color:var(--muted)}
  .price-card .pc-note{font-size:13px;color:var(--muted);margin-top:6px}
  .price-card .pc-alt{font-size:14px;color:var(--muted);margin-top:4px}
  .price-card .pc-alt b{color:var(--purple-deep);font-weight:700}
  .price-more{text-align:center;margin-top:30px}
  .price-more .btn{font-size:14px;white-space:normal;line-height:1.45;text-align:center}
  .price-card .pc-list{list-style:none;margin:20px 0 24px;display:grid;gap:11px}
  .price-card .pc-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
  .price-card .pc-list .ci{width:20px;height:20px;border-radius:50%;background:#dff3e6;color:#1c8a4c;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
  .price-card .pc-list .ci svg{width:12px;height:12px}
  .price-card .pc-list .lead-line{font-weight:600;color:var(--purple-deep)}
  .price-card .btn{width:100%;justify-content:center;margin-top:auto}

  /* --- final CTA band --- */
  .lcta{text-align:center;max-width:640px;margin:0 auto}
  .lcta h2{font-size:clamp(26px,3.2vw,36px);font-weight:700;letter-spacing:-.02em}
  .lcta p{color:var(--muted);font-size:17px;margin-top:12px}
  .lcta .btns{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
  .lcta .fineprint{margin-top:16px;font-size:13.5px;color:var(--muted)}
  /* The quiet route to Pro out of a closing band whose primary CTA is free. */
  .lcta p .ctaline{display:block}
  .lcta p a{color:var(--blue-deep);font-weight:600;text-decoration:none}
  .lcta p a:hover{text-decoration:underline}
  .lcta .protail{margin-top:10px;font-size:13.5px;color:var(--muted)}

  /* --- homepage hero collage: two mini browser windows (right column) --- */
  .hero-collage{position:relative;height:470px}
  @keyframes hcfFloat{0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}50%{transform:rotate(var(--r,0deg)) translateY(-7px)}}
  .hero-collage .hcf-float{animation:hcfFloat 7s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){.hero-collage .hcf-float{animation:none;transform:rotate(var(--r,0deg))}}
  .hero-collage .hc-win{position:absolute;--r:0deg;transform:rotate(var(--r));border:1px solid rgba(255,255,255,.4);box-shadow:0 10px 26px -14px rgba(10,6,30,.45)}
  .hero-collage .hc-win .winbar{padding:9px 12px}
  .hero-collage .hc-win .winbar i{width:9px;height:9px}
  .hero-collage .hc-win .winbar .url{font-size:11px;padding:3px 10px}
  .hero-collage .hc-win-cart{top:18px;left:0;width:296px;--r:-2deg;z-index:2;animation-delay:.5s}
  .hero-collage .hc-win-inv{top:88px;right:0;width:288px;--r:2deg;z-index:3;animation-delay:1.4s}
  .hero-collage .hc-body{position:relative;padding:15px;background:#f6f4fb}
  .hero-collage .hc-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
  .hero-collage .hc-drawer{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 15px 14px;box-shadow:0 3px 10px -7px rgba(28,18,60,.2)}
  .hero-collage .hc-fab{position:relative;width:48px;height:48px;border-radius:13px;background:var(--blue-deep);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -6px rgba(42,128,194,.3)}
  .hero-collage .hc-fab svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2}
  .hero-collage .hc-fab .badge{position:absolute;top:-7px;right:-7px;width:23px;height:23px;border-radius:50%;background:#ffd54a;color:var(--purple-deep);font-family:'Baloo 2',cursive;font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
  .hero-collage .drw-h{font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;color:var(--purple-deep);display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
  .hero-collage .drw-h .cnt{background:var(--blue-soft);color:var(--blue-deep);font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
  .hero-collage .drw-line{display:flex;align-items:center;gap:11px}
  .hero-collage .drw-line + .drw-line{margin-top:11px}
  .hero-collage .drw-th{width:38px;height:38px;border-radius:9px;flex:none}
  .hero-collage .drw-th.jam{background:linear-gradient(135deg,#ffe9a8,#ffcf6b)}
  .hero-collage .drw-th.tea{background:linear-gradient(135deg,#c9e6c1,#8fc98a)}
  .hero-collage .drw-nm{flex:1;min-width:0}
  .hero-collage .drw-nm b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
  .hero-collage .drw-nm span{font-size:11.5px;color:var(--muted)}
  .hero-collage .drw-pr{font-family:'Baloo 2',cursive;font-weight:700;font-size:14px;color:var(--purple-deep)}
  .hero-collage .drw-sub{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin:13px 0 12px;padding-top:12px;border-top:1px solid var(--line)}
  .hero-collage .drw-sub b{color:var(--ink)}
  .hero-collage .drw-co{background:var(--blue-deep);color:#fff;text-align:center;font-weight:700;font-size:13px;padding:10px;border-radius:10px}
  .hero-collage .buybtn{background:var(--blue-deep);color:#fff;font-weight:700;font-size:14px;padding:12px 18px;border-radius:11px;display:inline-flex;align-items:center;gap:9px;box-shadow:0 4px 10px -6px rgba(42,128,194,.3)}
  .hero-collage .buybtn svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2}
  .hero-collage .reg-l{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:0 0 5px 2px}
  .hero-collage .reg-row{display:flex;gap:8px}
  .hero-collage .reg-row .reg-col{flex:1;min-width:0}
  .hero-collage .reg-inp{border:1.5px solid #e3def4;border-radius:9px;padding:10px 11px;font-size:12.5px;color:#9992ab;margin-bottom:11px;background:#fff}
  .hero-collage .reg-join{background:var(--purple-2);color:#fff;text-align:center;font-weight:700;font-size:13px;padding:11px;border-radius:9px;margin-top:2px}
  @media (max-width:1180px){
    .hero .hero-collage{position:static;height:auto;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:6px}
    .hero .hero-collage .hc-win{position:static;width:min(320px,100%);--r:0deg;animation:none;transform:none}
  }

  /* ---------------- contact / get in touch ---------------- */
  .contact-sec{padding-top:150px}
  .contact-wrap{max-width:620px;margin:0 auto}
  .contact-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 30px;box-shadow:0 22px 46px -30px rgba(28,18,60,.4)}
  .cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cf-field{margin:0 0 18px}
  .cf-field label{display:block;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:8px}
  .cf-field input,.cf-field textarea,.cf-field select{width:100%;box-sizing:border-box;font-family:inherit;font-size:15px;color:var(--ink);
    background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .15s ease,box-shadow .15s ease}
  .cf-field textarea{resize:vertical;min-height:130px;line-height:1.5}
  .cf-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231f6ca2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
  .cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(72,156,216,.18)}
  .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:520px){.cf-row{grid-template-columns:1fr;gap:0}}
  .contact-form .btn-blue{margin-top:4px}
  .cf-note{font-size:13px;color:var(--muted);margin-top:14px}
  .cf-consent{margin:0 0 20px}
  .cf-consent label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5;cursor:pointer}
  .cf-consent input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--blue-deep);cursor:pointer}
  .cf-consent a{color:var(--blue-deep);font-weight:600;text-decoration:underline}
  .cf-error{background:#fdecec;border:1px solid #f5c2c2;color:#b23b3b;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:18px}
  /* Cloudflare Turnstile sits here when it is switched on in mail-config.php.
     Only the spacing is ours - the widget draws itself into .cf-turnstile,
     whose class name belongs to Cloudflare and must not be restyled or renamed. */
  .cf-check{margin:0 0 20px;min-height:65px}
  .contact-done{background:#fff;border:1px solid var(--line);border-radius:18px;padding:44px 32px;text-align:center;box-shadow:0 22px 46px -30px rgba(28,18,60,.4)}
  .contact-done .cd-ic{width:56px;height:56px;border-radius:50%;background:#dff3e6;color:#1c8a4c;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
  .contact-done .cd-ic svg{width:30px;height:30px}
  .contact-done h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
  .contact-done p{color:var(--muted);font-size:16px;margin:10px auto 24px;max-width:44ch;line-height:1.55}

  /* ---------------- legal / policy pages ---------------- */
  .legal-sec{padding:140px 0 90px}
  .legal-head{max-width:760px;margin:0 auto 22px}
  .legal-head .eye{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:10px}
  .legal-head h1{font-size:clamp(30px,4.2vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
  .legal-updated{color:var(--muted);font-size:14.5px;margin-top:12px}
  .prose{max-width:760px;margin:0 auto;font-size:16.5px;line-height:1.7}
  .prose p{margin:0 0 18px;color:var(--muted)}
  .prose h2{font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;color:var(--ink);margin:30px 0 10px}
  .prose ul{margin:0 0 18px;padding-left:22px;color:var(--muted)}
  .prose li{margin:0 0 8px}
  .prose a{color:var(--blue-deep);text-decoration:underline}

  /* ---------------- about page ---------------- */
  .about-sec{padding:150px 0 80px;background:linear-gradient(180deg,#e9edfa 0%,#f6f7fd 65%,#fff 100%)}
  .about-head{max-width:740px;margin:0 auto;text-align:center}
  .about-head .eye{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:10px}
  .about-head h1{font-size:clamp(30px,4.2vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
  .about-head p{color:var(--muted);margin-top:14px;font-size:18px;line-height:1.6}
  .about-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

  /* the person behind it (about page) */
  .person-grid{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;max-width:880px;margin:0 auto}
  @media(max-width:760px){.person-grid{grid-template-columns:1fr;max-width:420px;text-align:center}}
  .person-photo{max-width:320px;margin:0 auto}
  .person-polaroid{background:#fff;padding:12px 12px 10px;border-radius:4px;border:1px solid #eceaf3;box-shadow:0 6px 16px -9px rgba(28,18,60,.22);transform:rotate(-2.5deg)}
  .person-polaroid img{width:100%;height:auto;display:block;border-radius:2px}
  .person-note{display:block;margin:12px 4px 6px;text-align:center;font-family:'Indie Flower',cursive;font-size:20px;color:var(--purple-deep)}
  .person-copy .eye{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:8px}
  .person-copy h2{font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.02em}
  .person-copy p{color:var(--muted);margin-top:12px;font-size:16px;line-height:1.65}
  .person-copy a{color:var(--blue-deep);text-decoration:underline}

  /* ---------------- homepage closing CTA band ---------------- */
  .endcta .end-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:840px;margin:0 auto}
  @media(max-width:720px){.endcta .end-cards{grid-template-columns:1fr}}
  .end-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 5px 14px -8px rgba(28,18,60,.16);transition:.15s;color:var(--ink)}
  .end-card:hover{transform:translateY(-4px);box-shadow:0 8px 18px -10px rgba(28,18,60,.2)}
  .end-card .ec-ic{width:64px;height:64px;border-radius:15px;overflow:hidden;display:block;margin-bottom:16px;border:1px solid var(--line)}
  .end-card h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
  .end-card p{color:var(--muted);font-size:15px;margin:8px 0 22px;line-height:1.55;max-width:34ch}
  .end-card .btn{margin-top:auto}

  /* ---------------- roadmap page: light variant of the pro cards ---------------- */
  .road-light .pro-card{background:#fff;border:1px solid var(--line)}
  .road-light .pro-card b{color:var(--ink)}
  .road-light .pro-card span{color:var(--muted)}
  .road-light .pro-card .pc-ic{background:var(--blue-soft);color:var(--blue-deep)}
  .road-light .pro-card .tag.road{background:transparent;color:var(--purple);border:1px solid #cfc7e6}
  .road-light .pro-grid{margin-top:8px}
  .pro-head .sec-art{border-color:rgba(255,255,255,.4);box-shadow:0 5px 14px -8px rgba(0,0,0,.3)}

  /* hand-drawn page doodles flanking the about-sec intros (pricing, roadmap) */
  .about-sec .wrap{position:relative}
  .doodle{position:absolute;top:54%;pointer-events:none;color:var(--purple-2);opacity:.5}
  .doodle.d-left{left:26px;transform:translateY(-50%) rotate(-7deg)}
  .doodle.d-right{right:26px;color:var(--blue);transform:translateY(-50%) rotate(6deg)}
  .doodle svg{display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .doodle text{fill:currentColor;stroke:none;font-family:'Indie Flower',cursive}
  @media(max-width:1100px){.doodle{display:none}}

  /* pricing page: jump chips to each product's section */
  .price-jump{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:28px}
  .pj-chip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 18px 10px 10px;color:var(--ink);text-decoration:none;box-shadow:0 3px 10px -6px rgba(28,18,60,.14);transition:.15s;text-align:left}
  .pj-chip:hover{transform:translateY(-3px);border-color:#c9d9ec}
  .pj-chip .pj-art{width:44px;height:44px;border-radius:11px;overflow:hidden;flex:none;border:1px solid var(--line)}
  .pj-chip b{display:block;font-size:14.5px;font-weight:700}
  .pj-chip small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
  .pj-chip .pj-go{color:var(--blue-deep);font-weight:700;margin-left:4px}

  /* ---------------- compact family strip (footer, every page) ---------------- */
  .family.family-compact{padding:46px 0}
  .family-compact .fh{margin-bottom:22px}
  .family-compact .fh h2{font-size:clamp(20px,2.4vw,26px)}
  .family-compact .fh p{font-size:14.5px;margin-top:6px}
  .family-compact .fbrand{padding:18px 20px}
  .family-compact .fbrand img{height:34px;width:auto;margin-bottom:10px}
  .family-compact .fbrand span{font-size:13.5px}
  .family-compact .fbrand .go{margin-top:8px;font-size:12.5px}

  /* ---------------- cookie consent ---------------- */
  .foot .legal .ck-reopen{background:none;border:none;font-family:inherit;font-size:14px;color:#fff;cursor:pointer;padding:0;transition:opacity .2s ease}
  .foot .legal .ck-reopen:hover{opacity:.6}
  .cookie{position:fixed;left:16px;bottom:16px;z-index:200;width:min(380px,calc(100% - 32px))}
  .cookie-card{background:#2a2740;color:#fff;border-radius:16px;padding:24px;box-shadow:0 26px 60px -18px rgba(15,10,40,.6);border:1px solid rgba(255,255,255,.08)}
  .ck-top{display:flex;gap:14px;align-items:flex-start}
  .ck-ic{width:46px;height:46px;border-radius:50%;background:#ffd54a;color:#8a6d1e;display:flex;align-items:center;justify-content:center;flex:none}
  .ck-ic svg{width:26px;height:26px}
  .cookie h3{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700;color:#fff}
  .cookie p{font-size:14px;color:#c7c3d6;line-height:1.55;margin-top:6px}
  .ck-btns{display:flex;gap:10px;margin-top:18px}
  .ck-btns .btn-blue{flex:1;justify-content:center}
  .ck-btns .ck-decline{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
  .ck-btns .ck-decline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
  .ck-links{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:16px}
  .ck-links a,.ck-link{color:#b9b4cc;font-size:13px;text-decoration:underline;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;transition:color .15s ease}
  .ck-links a:hover,.ck-link:hover{color:#fff}
  .ck-links span{color:#615c7c}
  .ck-opt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .ck-opt:first-of-type{border-top:1px solid rgba(255,255,255,.1);margin-top:14px}
  .ck-opt b{font-size:15px;font-weight:700;color:#fff;display:block}
  .ck-opt>div span{font-size:13px;color:#b9b4cc;display:block;margin-top:2px;line-height:1.4}
  .ck-always{font-size:13px;color:#b9b4cc;flex:none;white-space:nowrap}
  .ck-toggle{position:relative;width:46px;height:26px;flex:none;cursor:pointer;display:inline-block}
  .ck-toggle input{position:absolute;opacity:0;width:0;height:0}
  .ck-slider{position:absolute;inset:0;background:#4a465e;border-radius:999px;transition:background-color .2s ease}
  .ck-slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s ease}
  .ck-toggle input:checked + .ck-slider{background:var(--blue-deep)}
  .ck-toggle input:checked + .ck-slider::before{transform:translateX(20px)}
  .ck-toggle input:focus-visible + .ck-slider{outline:2px solid #fff;outline-offset:2px}
  #ckSettings h3{margin-bottom:2px}
  #ckSettings .btn-blue{width:100%;justify-content:center;margin-top:18px}

  /* ================= DOCUMENTATION (/docs) =================
     Two columns on desktop: a sticky contents rail and the article.
     Below 1040px the rail becomes a panel behind one button, so the
     page still opens on the words rather than on a list of links. */
  .docs-page{padding:126px 0 118px;background:linear-gradient(180deg,#eef1fb 0,#f8f9fd 220px,#fff 460px)}
  .docs-layout{display:grid;grid-template-columns:246px minmax(0,1fr);gap:54px;align-items:start}
  .docs-main{max-width:780px;min-width:0}

  /* ---- the contents rail ---- */
  /* The rail is the sticky frame; only the list inside it scrolls, so the
     filter box cannot slide away with a long contents. */
  .docs-side{position:sticky;top:96px;max-height:calc(100vh - 124px);display:flex;flex-direction:column}
  .ds-inner{display:flex;flex-direction:column;min-height:0}
  .ds-nav{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding-right:2px}
  .ds-nav::-webkit-scrollbar{width:6px}
  .ds-nav::-webkit-scrollbar-thumb{background:#dcd8ea;border-radius:3px}
  .ds-filter{position:relative;flex:none;margin-bottom:20px}
  .ds-filter svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
  .ds-filter input{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
    border:1.5px solid var(--line);border-radius:8px;padding:9px 12px 9px 33px;
    box-shadow:0 2px 8px -6px rgba(28,18,60,.13);transition:border-color .2s ease}
  .ds-filter input::placeholder{color:var(--muted)}
  .ds-filter input:focus{outline:none;border-color:var(--blue)}
  .ds-filter input::-webkit-search-cancel-button{cursor:pointer}
  .ds-group{margin-bottom:22px}
  .ds-group[hidden]{display:none}
  .ds-gh{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
    font-family:'Figtree',sans-serif;margin:0 0 7px 11px}
  .ds-link{display:block;font-size:14.5px;line-height:1.4;color:#4a4463;padding:7px 11px;border-radius:6px;
    transition:background-color .18s ease,color .18s ease}
  .ds-link:hover{background:#eef2f9;color:var(--blue-deep)}
  .ds-link.active{background:#fff;color:var(--blue-deep);font-weight:600;
    box-shadow:0 2px 8px -4px rgba(28,18,60,.13)}
  .ds-link[hidden]{display:none}
  .ds-empty{font-size:14px;color:var(--muted);padding:4px 11px;line-height:1.5}
  .ds-empty a{color:var(--blue-deep);font-weight:600}
  .docs-side-toggle{display:none}

  /* ---- article furniture ---- */
  .doc-crumb{font-size:13.5px;color:var(--muted);margin-bottom:14px}
  .doc-crumb a{color:var(--blue-deep);font-weight:600}
  .doc-crumb a:hover{text-decoration:underline}
  .doc-crumb .dc-sep{margin:0 7px;color:#b6b1c6}
  .doc-h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.14}
  .doc-lede{color:var(--muted);font-size:18.5px;line-height:1.6;margin-top:14px}
  .doc-lede a{color:var(--blue-deep);text-decoration:underline}

  /* ---- article body ---- */
  .doc-body{margin-top:34px}
  .doc-body>*+*{margin-top:17px}
  /* Some headings ARE a shortcode - "[bangcart_sale_banner]" - written as plain
     text, not wrapped in <code>. CSS offers no break opportunity inside a token
     like that, so at 280px (the Galaxy Fold's cover screen) it overflowed the
     column and was cut off. break-word only intervenes when the word genuinely
     will not fit, so ordinary headings are untouched. */
  .doc-body h2{font-size:23px;font-weight:700;letter-spacing:-.015em;margin-top:44px;padding-top:2px;
    overflow-wrap:break-word}
  .doc-body h3{font-size:17.5px;font-weight:600;margin-top:30px;overflow-wrap:break-word}
  .doc-body p,.doc-body li{font-size:16.5px;line-height:1.72;color:#332e46}
  .doc-body a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px}
  .doc-body a:hover{color:#1d5f92}
  .doc-body ul,.doc-body ol{padding-left:22px}
  .doc-body li+li{margin-top:8px}
  .doc-body li::marker{color:var(--purple-2)}
  .doc-body strong{font-weight:600;color:var(--ink)}
  .doc-body code{font-family:'JetBrains Mono',monospace;font-size:.87em;background:#f4f2fa;
    border:1px solid var(--line);border-radius:4px;padding:1.5px 6px;color:#463d6b;word-break:break-word}
  /* A shortcode name is one long unbreakable token, and in a heading at 280px
     (the Galaxy Fold's cover screen) [bangcart_sale_banner] is wider than the
     column and gets cut off. break-word alone will not split a single word
     with no break opportunity in it; anywhere will. */
  .doc-body h2 code,.doc-body h3 code{font-size:.85em;overflow-wrap:anywhere}
  .doc-body hr{border:0;border-top:1px solid var(--line);margin-top:38px}

  /* a shortcode, shown as the thing you paste */
  .doc-code{display:block;font-family:'JetBrains Mono',monospace;font-size:14px;color:#e9e5f7;
    background:var(--dark);border-radius:9px;padding:15px 18px;overflow-x:auto;white-space:pre;
    line-height:1.6;box-shadow:0 3px 10px -7px rgba(28,18,60,.3)}

  /* callouts - one soft tinted card, three tempers */
  .doc-note{border:1px solid #d9e7f4;background:#f2f8fd;border-radius:11px;padding:16px 19px;
    display:flex;gap:13px;align-items:flex-start}
  .doc-note svg{flex:none;width:19px;height:19px;margin-top:2px;color:var(--blue-deep)}
  .doc-note p{font-size:15.5px;line-height:1.62;margin:0}
  .doc-note p+p{margin-top:9px}
  .doc-note.warn{border-color:#f0e3bd;background:#fdf8ec}
  .doc-note.warn svg{color:#a9812a}
  .doc-note.pro{border-color:#ded6f2;background:#f7f4fe}
  .doc-note.pro svg{color:var(--purple-2)}
  .doc-note b{font-weight:600}

  /* screenshots - a framed figure with a quiet caption */
  .doc-shot{margin:26px 0}
  .doc-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);
    border-radius:12px;box-shadow:0 2px 10px -6px rgba(28,18,60,.14)}
  .doc-shot figcaption{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--muted)}

  /* tables - scroll sideways rather than push the page wide */
  .doc-tw{overflow-x:auto;border:1px solid var(--line);border-radius:11px;
    box-shadow:0 2px 8px -6px rgba(28,18,60,.13)}
  /* The box is a keyboard tab stop so a table wider than the screen can be
     scrolled without a mouse. It therefore needs to show where focus is. */
  .doc-tw:focus-visible{outline:2px solid var(--blue-deep);outline-offset:3px}
  .doc-code:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .doc-tw table{border-collapse:collapse;width:100%;min-width:440px}
  .doc-tw th,.doc-tw td{text-align:left;padding:11px 15px;font-size:15px;line-height:1.55;
    border-bottom:1px solid var(--line);vertical-align:top}
  .doc-tw th{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:var(--purple-deep);
    background:#f7f6fb;white-space:nowrap}
  .doc-tw tr:last-child td{border-bottom:0}
  .doc-tw td code{white-space:nowrap}

  /* numbered walkthrough */
  .doc-steps{list-style:none;padding-left:0;counter-reset:dstep}
  .doc-steps li{position:relative;padding-left:42px;counter-increment:dstep}
  .doc-steps li+li{margin-top:16px}
  .doc-steps li::before{content:counter(dstep);position:absolute;left:0;top:1px;width:27px;height:27px;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:var(--blue-soft);color:var(--blue-deep);font-family:'Baloo 2',cursive;font-weight:700;font-size:15px}

  /* ---- support card + prev/next ---- */
  .doc-stuck{margin-top:56px;display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;
    background:#faf9fd;border:1px solid var(--line);border-radius:15px;padding:22px 24px;
    box-shadow:0 3px 11px -8px rgba(28,18,60,.16)}
  .doc-stuck .dst-art{width:56px;height:56px;border-radius:13px;overflow:hidden;
    border:1px solid var(--line);background:#fff}
  .doc-stuck h2{font-size:18px;font-weight:600;margin:0}
  .doc-stuck p{font-size:15px;color:var(--muted);line-height:1.6;margin-top:4px}
  .doc-pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
  .dpn{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;
    padding:15px 18px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
  .dpn:hover{border-color:#cfd9ea;box-shadow:0 3px 11px -8px rgba(28,18,60,.2)}
  .dpn-gap{border:0;background:none}
  .dpn-gap:hover{box-shadow:none}
  .dpn-dir{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-deep)}
  .dpn-t{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.35}
  .dpn-next{text-align:right}

  /* ---- the hub ---- */
  .dh-groups{display:flex;flex-direction:column;gap:44px;max-width:1140px;margin:0 auto}
  .dh-gh{display:flex;align-items:baseline;gap:13px;margin-bottom:18px}
  .dh-gh h2{font-size:21px;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
  .dh-gh .dh-rule{flex:1;height:1px;background:var(--line)}
  .dh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px}
  .dh-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:20px 22px;color:var(--ink);box-shadow:0 3px 11px -8px rgba(28,18,60,.16);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .dh-card:hover{border-color:#cfd9ea;transform:translateY(-2px);box-shadow:0 7px 18px -12px rgba(28,18,60,.24)}
  .dh-card h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
  .dh-card p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-top:6px}
  .dh-card .dh-go{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--blue-deep)}

  /* ---- narrower: the rail folds behind a button ---- */
  @media(max-width:1040px){
    .docs-layout{grid-template-columns:1fr;gap:0}
    .docs-main{max-width:none}
    .docs-side{position:static;max-height:none;display:none;margin-bottom:26px}
    .docs-side.open{display:block}
    .ds-nav{overflow:visible;max-height:none}
    .ds-inner{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 16px 6px;
      box-shadow:0 2px 8px -4px rgba(28,18,60,.13)}
    .docs-side-toggle{display:flex;align-items:center;gap:11px;width:100%;margin-bottom:14px;
      font-family:inherit;font-size:14.5px;font-weight:600;color:var(--purple-deep);cursor:pointer;
      background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 15px;
      box-shadow:0 2px 8px -4px rgba(28,18,60,.13)}
    .docs-side-toggle svg{flex:none;width:17px;height:17px;color:var(--blue-deep)}
    .docs-side-toggle .dst-current{margin-left:auto;font-weight:400;font-size:13.5px;color:var(--muted);
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48%}
    .docs-side-toggle[aria-expanded="true"] .dst-current{display:none}
  }
  @media(max-width:620px){
    .docs-page{padding:112px 0 88px}
    .doc-body h2{margin-top:38px;font-size:21px}
    .doc-stuck{grid-template-columns:1fr;text-align:center;justify-items:center;gap:14px}
    .doc-pn{grid-template-columns:1fr}
    .dpn-next{text-align:left}
    .dh-cards{grid-template-columns:1fr}
  }
  @media(max-width:400px){
    .doc-body p,.doc-body li{font-size:16px}
    .doc-lede{font-size:17px}
  }

  /* ---- docs hub: results line and the empty state ---- */
  .docs-hub{padding-top:56px;padding-bottom:104px}
  .dh-result{max-width:1140px;margin:0 auto 26px;font-size:15px;color:var(--muted)}
  .dh-result b{color:var(--ink);font-weight:600}
  .dh-empty{max-width:1140px;margin:0 auto;font-size:16px;color:var(--muted)}
  .dh-empty a{color:var(--blue-deep);font-weight:600}
  .dh-group[hidden],.dh-card[hidden]{display:none}

  /* ---- /docs: choose a plugin ---- */
  .docs-picker{padding-top:60px;padding-bottom:112px}
  .dp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:940px;margin:0 auto}
  .dp-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
    background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px 30px;color:var(--ink);
    box-shadow:0 5px 16px -11px rgba(28,18,60,.2);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .dp-card:hover{border-color:#cfd9ea;transform:translateY(-3px);box-shadow:0 12px 26px -16px rgba(28,18,60,.3)}
  .dp-art{display:block;width:76px;height:76px;border-radius:16px;overflow:hidden;margin-bottom:16px;
    border:1px solid var(--line);background:#fff;box-shadow:0 3px 10px -6px rgba(28,18,60,.16)}
  .dp-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--blue-deep);background:var(--blue-soft);border-radius:999px;padding:4px 11px;margin-bottom:11px}
  .dp-tag-soon{color:#7a6f4a;background:#fdf4d8}
  .dp-card h2{font-size:21px;font-weight:700;letter-spacing:-.015em}
  .dp-card p{font-size:15.5px;color:var(--muted);line-height:1.65;margin-top:9px}
  .dp-go{margin-top:18px;font-size:14.5px;font-weight:700;color:var(--blue-deep)}
  .dp-go-quiet{color:var(--purple-2)}
  .dp-soon{background:#fbfafd}
  .dp-cover{position:absolute;inset:0;border-radius:18px}
  @media(max-width:800px){
    .dp-grid{grid-template-columns:1fr;max-width:460px;gap:20px}
    .docs-picker{padding-top:44px;padding-bottom:84px}
    .docs-hub{padding-bottom:80px}
  }

  /* ---- docs rail: which product these contents belong to ---- */
  .ds-product{display:flex;align-items:center;gap:11px;flex:none;margin-bottom:16px;padding:9px 11px;
    border-radius:9px;color:var(--ink);transition:background-color .18s ease}
  .ds-product:hover{background:#eef2f9}
  /* Square, like every other product mark on the site (.pm-thumb, .sec-art,
     .pj-art). The mark's own viewBox is 72x54, so a width-only container
     renders it 4:3 - the container sets both dimensions and crops. */
  .ds-product-art{flex:none;width:38px;height:38px;border-radius:9px;overflow:hidden;
    border:1px solid var(--line);background:#fff}
  .ds-product span{font-size:12.5px;line-height:1.35;color:var(--muted)}
  .ds-product b{display:block;font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:var(--ink)}
  @media(max-width:1040px){.ds-product{display:none}}


  /* ================= DOCS HELP BANNER =================
     A full-width coloured band that owns the whole top of a docs landing
     page: heading, one line of context, and the search. It uses the same
     gradient as .pro-sec and .family, so the docs read as part of the site
     rather than a knowledge base bolted onto the side of it. The hard edge
     at its foot is the separation - no tint bleeding into the contents. */
  .dochero{position:relative;color:#fff;padding:158px 0 74px;
    background:radial-gradient(circle at 10% 10%,rgba(125,111,184,.4),transparent 52%),
      radial-gradient(circle at 92% 88%,rgba(72,156,216,.42),transparent 55%),
      linear-gradient(135deg,#2a2250 0%,#33306e 44%,#2f5fa8 100%)}
  .dochero .wrap{position:relative;z-index:2}
  .dh-head{max-width:760px;margin:0 auto;text-align:center}
  /* The product mark, square like every other one, in the on-dark treatment
     the Pro section and product heroes already use. */
  .dh-mark{width:68px;height:68px;border-radius:16px;overflow:hidden;display:block;margin:0 auto 20px;
    border:2px solid rgba(255,255,255,.38);box-shadow:0 6px 16px -9px rgba(12,8,34,.55)}
  .dh-head .eye{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:#bfe0f7;margin-bottom:12px}
  .dh-head h1{font-size:clamp(30px,4.2vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.14}
  .dh-head p{color:#d6dcf0;margin-top:14px;font-size:17.5px;line-height:1.6}

  /* the search, which is the point of the band */
  .dh-search{position:relative;max-width:620px;margin:32px auto 0}
  .dh-search svg{position:absolute;left:21px;top:50%;transform:translateY(-50%);
    width:19px;height:19px;color:#7b7593;pointer-events:none}
  .dh-search input{width:100%;font-family:inherit;font-size:16.5px;color:var(--ink);
    background:#fff;border:0;border-radius:999px;padding:17px 22px 17px 54px;
    box-shadow:0 8px 26px -14px rgba(12,8,34,.5)}
  .dh-search input::placeholder{color:var(--muted)}
  .dh-search input:focus{outline:none;box-shadow:0 8px 26px -14px rgba(12,8,34,.5),0 0 0 3px rgba(255,255,255,.5)}
  .dh-search input::-webkit-search-cancel-button{cursor:pointer}
  .dh-note{margin-top:15px;font-size:14px;color:#b9c2de}
  .dh-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}

  /* faint line art, the same drawn language as the .doodle annotations */
  /* The art is clipped to the band, not the band to itself - otherwise the
     search panel gets cut off where the band ends. */
  .dh-art{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none;color:#fff;opacity:.13}
  .dh-art svg{position:absolute;fill:none;stroke:currentColor;stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round}
  .dh-art .a1{left:5%;top:22%;width:104px}
  .dh-art .a2{left:13%;bottom:16%;width:80px}
  .dh-art .a3{right:6%;top:18%;width:96px}
  .dh-art .a4{right:14%;bottom:14%;width:86px}
  .dh-art .a5{left:26%;top:12%;width:62px}
  .dh-art .a6{right:27%;bottom:8%;width:66px}
  @media(max-width:1100px){.dh-art .a5,.dh-art .a6{display:none}}
  @media(max-width:860px){.dh-art{display:none}}
  @media(max-width:620px){
    .dochero{padding:126px 0 56px}
    .dh-search input{font-size:16px;padding:15px 18px 15px 48px}
    .dh-search svg{left:18px}
  }

  /* the contents sit on white, hard against the band's edge */
  .docs-hub{padding-top:64px}
  .docs-picker{padding-top:64px}

  /* ---- /docs/search: results across every plugin ---- */
  .dochero-slim{padding:150px 0 62px}
  .dochero-slim .dh-head h1{font-size:clamp(27px,3.4vw,38px)}
  .docs-results{padding-top:48px;padding-bottom:112px}
  .sr-bar{max-width:860px;margin:0 auto 26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .sr-count{font-size:15.5px;color:var(--muted);margin:0}
  .sr-count b{color:var(--ink);font-weight:600}
  .sr-chips{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
  .sr-chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#4a4463;
    background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;
    box-shadow:0 2px 8px -6px rgba(28,18,60,.13);transition:border-color .18s ease,color .18s ease}
  .sr-chip span{font-size:12px;font-weight:700;color:var(--muted);background:var(--wash);border-radius:999px;padding:1px 7px}
  .sr-chip:hover{border-color:#cfd9ea;color:var(--blue-deep)}
  .sr-chip.active{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
  .sr-chip.active span{background:rgba(255,255,255,.2);color:#fff}

  .sr-list{list-style:none;padding:0;max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .sr-link{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 20px;color:var(--ink);
    box-shadow:0 3px 11px -8px rgba(28,18,60,.16);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .sr-link:hover{border-color:#cfd9ea;transform:translateY(-2px);box-shadow:0 7px 18px -12px rgba(28,18,60,.26)}
  .sr-art{width:44px;height:44px;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:#fff}
  .sr-body{min-width:0}
  .sr-top{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
  .sr-pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    border-radius:999px;padding:3px 9px}
  .sr-pill-cart{color:var(--blue-deep);background:var(--blue-soft)}
  .sr-pill-invites{color:#5b4d90;background:#efeafa}
  .sr-group{font-size:12.5px;color:var(--muted)}
  .sr-title{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.01em}
  .sr-blurb{display:block;font-size:14.5px;color:var(--muted);line-height:1.55;margin-top:3px}
  .sr-go{font-size:22px;color:#c3bdd4;line-height:1}
  .sr-link:hover .sr-go{color:var(--blue-deep)}

  .sr-none{max-width:860px;margin:0 auto;background:#faf9fd;border:1px solid var(--line);border-radius:15px;
    padding:34px 32px;text-align:center}
  .sr-none h2{font-size:19px;font-weight:600}
  .sr-none p{font-size:15.5px;color:var(--muted);margin-top:10px;line-height:1.6}
  .sr-none a{color:var(--blue-deep);font-weight:600;text-decoration:underline}
  .sr-none a.btn{color:#fff;text-decoration:none;margin-top:6px}

  @media(max-width:620px){
    .dochero-slim{padding:122px 0 48px}
    .sr-bar{gap:14px}
    .sr-chips{margin-left:0}
    .sr-link{grid-template-columns:38px 1fr;gap:13px;padding:15px 16px}
    .sr-art{width:38px;height:38px;border-radius:9px}
    .sr-go{display:none}
    .docs-results{padding-bottom:84px}
  }


  /* ================= DOCS HUB: THREE ZONES =================
     Not one grid. Sixteen articles at identical weight gave the eye nowhere
     to land, which is what reads as "a lot of text and white". Diataxis splits
     them into three jobs, so the page does too, in decreasing weight:
     a start path, a help shortcut, then a dense index you scan. */
  .docs-hub{padding-top:60px;padding-bottom:104px}
  .dh-zone{max-width:1140px;margin:0 auto}
  .dh-zone + .dh-zone{margin-top:64px}
  .dh-zh{margin-bottom:22px}
  .dh-zh h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
  .dh-zh p{font-size:16px;color:var(--muted);margin-top:7px;max-width:620px;line-height:1.6}

  /* ---- 1. the start path: a sequence, not four adjacent cards ---- */
  .dh-zone-path{position:relative;background:linear-gradient(180deg,#eef2fc,#f7f9fd);
    border:1px solid #dde5f5;border-radius:20px;padding:34px 34px 36px}
  .dh-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
  .dh-steps::before{content:"";position:absolute;top:26px;left:12%;right:12%;height:2px;
    background:repeating-linear-gradient(90deg,#bcd0ea 0 7px,transparent 7px 14px)}
  /* Bang! Invites sets up in three steps, not four. The dashed rule runs from
     the first circle to the last, so its inset is half a column: an eighth of
     the width at four steps, a sixth at three. Keyed on data-n so a hub with
     no attribute keeps the four-step default untouched.

     NOTE for anyone editing the breakpoints below: this selector is a class
     PLUS an attribute, so it outranks a plain .dh-steps rule no matter which
     media query that rule sits in - media queries carry no specificity of
     their own. Every breakpoint that changes .dh-steps must therefore repeat
     the [data-n="3"] selector, or the three-step path silently ignores it and
     stays three columns wide down to 320px. */
  .dh-steps[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dh-steps[data-n="3"]::before{left:16.6%;right:16.6%}
  .dh-steps li{position:relative;z-index:1}
  .dh-step{display:block;padding:0 14px;color:var(--ink)}
  .dh-sn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 14px;
    border-radius:50%;background:#fff;border:2px solid var(--blue-deep);color:var(--blue-deep);
    font-family:'Baloo 2',cursive;font-weight:800;font-size:24px;line-height:1;
    box-shadow:0 3px 10px -6px rgba(28,18,60,.3);transition:background-color .18s ease,color .18s ease,transform .18s ease}
  .dh-step:hover .dh-sn{background:var(--blue-deep);color:#fff;transform:translateY(-2px)}
  .dh-st{display:block;text-align:center;font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;line-height:1.35}
  .dh-sb{display:block;text-align:center;font-size:14px;color:var(--muted);line-height:1.55;margin-top:6px}
  .dh-step:hover .dh-st{color:var(--blue-deep)}

  /* ---- 2. the help shortcut: warm, and not at the bottom of the page ---- */
  .dh-helpgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .dh-help{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;
    background:#fdf9ef;border:1px solid #f0e3bd;border-radius:15px;padding:20px 22px;color:var(--ink);
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .dh-help:hover{border-color:#e0cd94;transform:translateY(-2px);box-shadow:0 7px 18px -12px rgba(28,18,60,.25)}
  .dh-help .dh-ic{width:44px;height:44px;border-radius:12px;background:#f7edd6;color:#a9812a}

  /* ---- 3. the index: rows, no card chrome, built to be scanned ---- */
  .dh-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 44px}
  .dh-col h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    font-family:'Figtree',sans-serif;padding:0 12px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .dh-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:13px;align-items:start;
    padding:11px 12px;border-radius:10px;color:var(--ink);transition:background-color .16s ease}
  .dh-row:hover{background:#f2f6fc}
  .dh-row .dh-ic{width:36px;height:36px;border-radius:10px}
  .dh-col + .dh-col{margin-top:0}

  /* shared bits */
  .dh-ic{flex:none;display:flex;align-items:center;justify-content:center;border-radius:11px;
    background:var(--blue-soft);color:var(--blue-deep);transition:background-color .16s ease,color .16s ease}
  .dh-ic svg{width:20px;height:20px;display:block}
  .dh-row:hover .dh-ic{background:var(--blue-deep);color:#fff}
  .dh-body{display:block;min-width:0}
  .dh-t{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.35}
  .dh-b{display:block;font-size:14px;color:var(--muted);line-height:1.5;margin-top:3px}
  .dh-help .dh-t{font-size:16.5px}
  .dh-help .dh-b{font-size:14.5px}

  .dh-result{max-width:1140px;margin:0 auto 26px;font-size:15px;color:var(--muted)}
  .dh-result b{color:var(--ink);font-weight:600}
  .dh-empty{max-width:1140px;margin:24px auto 0;font-size:16px;color:var(--muted)}
  .dh-empty a{color:var(--blue-deep);font-weight:600}
  .dh-row[hidden],.dh-help[hidden],.dh-step[hidden],.dh-steps li[hidden],.dh-col[hidden],.dh-zone[hidden]{display:none}

  @media(max-width:900px){
    .dh-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
    .dh-steps::before{display:none}
    .dh-cols{grid-template-columns:1fr;gap:8px}
    .dh-col{margin-top:14px}
  }
  @media(max-width:620px){
    .docs-hub{padding-top:44px;padding-bottom:80px}
    .dh-zone + .dh-zone{margin-top:48px}
    .dh-zone-path{padding:26px 18px 28px;border-radius:16px}
    /* The [data-n] selector is repeated here deliberately - see the note by
       the three-step rule above. Below this width .dh-step becomes a
       number-beside-text row that needs the full column, so three of them
       side by side clip their own titles. */
    .dh-steps,.dh-steps[data-n="3"]{grid-template-columns:1fr;gap:8px}
    /* Number spans both rows; title and blurb stack beside it. Without the
       explicit placement the blurb drops into the number's column and wraps
       one word wide. */
    .dh-step{display:grid;grid-template-columns:46px minmax(0,1fr);
      column-gap:14px;align-items:start;text-align:left;padding:10px 4px}
    .dh-sn{grid-column:1;grid-row:1 / span 2;width:46px;height:46px;margin:0;font-size:21px}
    .dh-st{grid-column:2;grid-row:1;text-align:left;align-self:center}
    .dh-sb{grid-column:2;grid-row:2;text-align:left;margin-top:3px}
    .dh-helpgrid{grid-template-columns:1fr}
    .dh-zh h2{font-size:21px}
  }
  /* Narrowest real screens (the Galaxy Fold's cover display is 280px). The
     help block's 44px icon plus its padding left "Troubleshooting" about seven
     pixels short of fitting, so the word was clipped. Everything shrinks a
     little rather than the title being cut. Affects both plugin hubs. */
  @media(max-width:360px){
    .dh-help{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px 14px}
    .dh-help .dh-ic{width:36px;height:36px}
    .dh-help .dh-t{font-size:15.5px}
    .dh-help .dh-b{font-size:13.5px}
  }

  /* ---- docs typeahead: results in a panel, not by rearranging the page ----
     The hub's whole value is its shape - a start path, a help block, an index.
     Filtering in place destroyed that shape the moment anyone typed, so the
     results come to the search box instead and the page stays put. */
  .dh-search{position:relative}
  .dh-ac{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;
    background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
    box-shadow:0 18px 44px -22px rgba(12,8,34,.55),0 2px 8px -4px rgba(12,8,34,.2)}
  .dh-aclist{list-style:none;margin:0;padding:6px 6px 0;max-height:min(62vh,472px);overflow-y:auto;text-align:left}
  .dh-aclist::-webkit-scrollbar{width:6px}
  .dh-aclist::-webkit-scrollbar-thumb{background:#dcd8ea;border-radius:3px}
  .dh-ao{display:flex;align-items:center;gap:12px;padding:8px 13px;border-radius:8px;color:var(--ink);cursor:pointer}
  .dh-ao[aria-selected="true"]{background:#eef3fb}
  .dh-ao b{flex:1;min-width:0;font-family:'Poppins',sans-serif;font-weight:500;font-size:15px;line-height:1.4;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dh-ao b mark{background:#fff1bd;color:inherit;font-weight:700;border-radius:3px;padding:0 1px}
  .dh-ao .dh-ameta{flex:none;margin:0;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--blue-deep);background:var(--blue-soft);border-radius:999px;padding:3px 9px}
  .dh-ao[aria-selected="true"] .dh-ameta{background:#fff}
  .dh-anone{padding:16px 14px;font-size:14.5px;color:var(--muted);text-align:left}
  /* Pinned to the foot of the panel: it is the escape hatch, so it should not
     be something you have to scroll ten results to reach. */
  .dh-aall{position:sticky;bottom:0;display:block;padding:11px 13px;margin:6px -6px 0;
    border-top:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--blue-deep);
    background:#fbfbfe;text-align:left;cursor:pointer}
  .dh-aall[aria-selected="true"]{background:#eef3fb}
  @media(max-width:620px){
    .dh-aclist{max-height:min(56vh,360px)}
  }
  /* On a phone the row is too narrow for both, and the title is the thing
     being scanned for - so the section pill yields rather than the title
     truncating. Rows stay one line either way. */
  @media(max-width:520px){
    .dh-ao .dh-ameta{display:none}
    .dh-ao{gap:0}
  }


  /* ---- skip to content ----
     Off-screen until focused, then it lands over the fixed navbar. First stop
     for anyone arriving by keyboard, so it has to clear the header's z-index. */
  .skip{position:fixed;left:50%;top:-100px;transform:translateX(-50%);z-index:200;
    background:var(--blue-deep);color:#fff;font-weight:600;font-size:14.5px;
    padding:11px 22px;border-radius:0 0 10px 10px;box-shadow:0 6px 18px -8px rgba(12,8,34,.5);
    transition:top .18s ease}
  .skip:focus{top:0;outline:2px solid #fff;outline-offset:-5px}

  /* ---- 404 ---- */
  .nf-sec{padding-top:56px;padding-bottom:104px}
  .nf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:940px;margin:0 auto}
  .nf-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;color:var(--ink);
    box-shadow:0 3px 11px -8px rgba(28,18,60,.16);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
  .nf-card:hover{border-color:#cfd9ea;transform:translateY(-2px);box-shadow:0 7px 18px -12px rgba(28,18,60,.26)}
  .nf-card b{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:16.5px}
  .nf-card span{display:block;font-size:14.5px;color:var(--muted);line-height:1.55;margin-top:6px}
  @media(max-width:820px){.nf-grid{grid-template-columns:1fr;max-width:460px}.nf-sec{padding-bottom:80px}}