/* SiteAim - homepage (nav + hero) */

:root{
  --orange:#f35b05;
  --orange-dark:#d94e02;
  /* Lifted orange, for text and marks sitting on the dark purple bands.
     Three rules were already calling this and only worked because they
     carried a literal fallback; anything without one resolved to nothing. */
  --orange-lit:#ff8f4d;
  --ink:#0d1526;
  --slate:#4a5769;
  --line:#e4e8ee;

  /* Titles only - body text stays on the system stack.
     Familjen Grotesk: Scandinavian grotesque, tops out at 700. */
  --font-display:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,
                 "Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  /* Body: standard system stack. Resolves to Segoe UI on Windows, SF Pro on
     macOS/iOS, Roboto on Android. Titles use --font-display (see below). */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul,li{margin:0;padding:0;list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;
  border:1px solid var(--orange);
  border-radius:8px;
  background:var(--orange);
  color:#fff;
  font-size:0.97rem;
  font-weight:600;
  white-space:nowrap;
}
.btn:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn--sm{padding:8px 14px;font-size:0.92rem;white-space:nowrap;flex:none}
/* muted fill, sits quieter than the primary next to it */
.btn--soft{background:#fdece2;border-color:transparent;color:var(--orange-dark)}
.btn--soft:hover{background:#fbdfd0;border-color:transparent;color:var(--orange-dark)}
/* on the orange band, orange-on-orange disappears - invert it */
.btn--light{background:#fff;border-color:#fff;color:#241d52}
.btn--light:hover{background:#ece9fb;border-color:#ece9fb;color:#241d52}
/* Solid brand orange on the dark band.
   Near-black label, not white: white on #f35b05 is only 3.33:1 and fails
   for a 15px button label. Same treatment as the announcement badge, so
   the two orange elements match. */
.btn--orange{
  background:var(--orange);
  border-color:var(--orange);
  color:#1a1005;
  box-shadow:0 2px 14px rgba(243,91,5,.34);
}
.btn--orange:hover{
  background:#ff6a12;
  border-color:#ff6a12;
  color:#1a1005;
  box-shadow:0 4px 20px rgba(243,91,5,.46);
}
.btn--orange svg{width:16px;height:16px;transition:transform .18s ease}
.btn--orange:hover svg{transform:translateX(3px)}

/* ======================== TOP BAR ========================
   A shade darker than the hero band's darkest stop, so it reads as a strip
   above the colour rather than part of it. Scrolls away with the page; the
   nav island below is what stays stuck. */
/* Two near-blacks barely differ by contrast ratio, which compresses at this
   end of the scale, so the hairline below is what actually separates the bar
   from the hero band rather than the colour difference alone. */
.topbar{
  position:relative;z-index:11;
  background:#09061a;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#b3aae8;
}
.topbar__inner{
  max-width:1380px;               /* matches the nav island */
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  height:40px;
  font-size:0.85rem;
}
.topbar__login{
  display:inline-flex;align-items:center;gap:8px;
  color:#cdc6f0;font-weight:600;
  transition:color .16s ease;
}
.topbar__login:hover{color:#fff}
.topbar__login svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
/* Padding rather than height, so the row keeps its 40px and the hit area
   grows around the label. 22px was half what a thumb needs. */
.topbar__login{padding:9px 2px}

/* On the narrowest phones the region menu is wider than the room beside it,
   so it is pinned to the right edge of the bar and capped instead. */
/* At 320px the bar needs 328px to lay out, so "Client Login" wrapped onto a
   second line and made the bar taller. Dropping the currency chip and
   tightening the gaps buys back the 8px, and the globe still says what the
   control is. */
@media (max-width:420px){
  .topbar__inner{gap:10px}
  .topbar__right{gap:12px}
  .region__cur{display:none}
  .topbar__login{white-space:nowrap}
}

@media (max-width:420px){
  .region__menu{
    left:auto;right:0;
    width:auto;min-width:0;max-width:calc(100vw - 24px);
  }
}
.topbar__right{display:flex;align-items:center;gap:22px}

/* Both top-bar dropdowns, the contact menu on the left and the region
   switcher on the right, are <details>, so they open and close with no
   JavaScript at all. Everything below the trigger styling is shared. */
.region,
.contact{position:relative}
.region summary,
.contact summary{
  display:flex;align-items:center;gap:8px;
  padding:5px 9px;
  border-radius:7px;
  cursor:pointer;list-style:none;
  color:#cdc6f0;font-weight:600;
  transition:background-color .16s ease,color .16s ease;
}
.region summary::-webkit-details-marker,
.contact summary::-webkit-details-marker{display:none}
.region summary:hover,
.contact summary:hover{background:rgba(255,255,255,.09);color:#fff}
.contact__ico{width:16px;height:16px;flex:none;fill:#ff8f4d}
.region__globe{
  width:15px;height:15px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
}
.region__cur{
  padding:1px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:0.8rem;letter-spacing:.03em;
}
.region__chev,
.topbar__chev{width:11px;height:11px;opacity:.7;transition:transform .2s ease}
.region[open] .region__chev,
.contact[open] .topbar__chev{transform:rotate(180deg)}

.region__menu,
.contact__menu{
  position:absolute;top:calc(100% + 8px);z-index:30;
  padding:6px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 40px rgba(6,3,20,.30);
}
.region__menu{right:0;min-width:230px}
.contact__menu{left:0;min-width:262px}

.contact__menu a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-radius:8px;
  color:var(--ink);
  transition:background-color .15s ease;
}
.contact__menu a:hover{background:#f6f4fb}
.contact__menu svg{
  width:32px;height:32px;flex:none;
  padding:8px;
  border-radius:9px;
  background:var(--orange);fill:#1a1005;
}
.contact__menu b{display:block;font-size:0.92rem;font-weight:600;line-height:1.3}
.contact__menu b span{
  display:block;margin-top:2px;
  font-size:0.82rem;font-weight:500;color:var(--slate);
}
.region__menu a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px;
  border-radius:8px;
  font-size:0.9rem;font-weight:600;
  color:var(--ink);
  transition:background-color .15s ease;
}
.region__menu a:hover{background:#f6f4fb}
.region__menu a span{font-size:0.85rem;font-weight:500;color:var(--slate)}
/* --orange-dark is only 3.62:1 on this peach, so the darker orange the rest
   of the site uses for text on light backgrounds applies here too. */
.region__menu a[aria-current]{background:#fdece2;color:#b03e08}
.region__menu a[aria-current] span{color:#b03e08}

@media (max-width:700px){
  /* Both triggers drop to their icon and chevron. The contact menu is the
     one people actually reach for on a phone, so it keeps its full panel. */
  .topbar__inner{height:38px}
  .contact summary span{display:none}
  .region__now{display:none}
  .contact__menu{min-width:250px}
}

/* header - transparent rail; the white "island" is .header__inner.
   The negative margin pulls it out of flow so the hero's colour band starts
   at the top of the page and the header floats on it. That frees <main> to
   wrap every section instead of being trapped inside the band.
   14 + 64 + 14 = 92px total height. */
.header{
  position:sticky;top:0;z-index:10;
  padding:14px 20px;
  margin-bottom:-92px;
  background:transparent;
}
.header__inner{
  position:relative;         /* containing block for the mega panel */
  /* wider than the 1200px content wrap it inherits, so the nav has room for
     more items without widening every section on the site */
  max-width:1380px;
  display:flex;align-items:center;gap:18px;
  height:64px;
  padding:0 12px 0 22px;
  border-radius:12px;
  background:#fff;
  /* white now sits on deep orange, so the island reads on its own -
     the shadow just lifts it off the band */
  box-shadow:0 10px 30px rgba(6,3,20,.45);
}

/* 32px tall image, so the link needs padding to reach a thumb sized target */
.logo{display:flex;align-items:center;flex:none;padding:6px 0}
.logo img{display:block;width:auto;height:32px}

/* auto margins centre the links in the space left between logo and actions */
.nav{display:flex;align-items:center;gap:2px;margin:0 auto}
/* tighter horizontal padding buys roughly one extra item across the bar
   without touching the type size */
/* Direct children only. These must not reach the links inside the mega
   panel, where nowrap sizes every card to its longest line, overflowing the
   grid and pushing the fourth card off the edge of the panel. */
.nav > a,.nav__link{
  padding:8px 12px;border-radius:7px;
  font-size:0.97rem;font-weight:600;color:#333d4e;
  white-space:nowrap;        /* a top level item must never wrap onto two lines */
}
.nav > a:hover,.nav__link:hover{color:var(--ink);background:rgba(13,21,38,.05)}
/* the page you are currently on */
.nav > a[aria-current="page"]{color:var(--orange-dark)}
.mega__link[aria-current="page"]{background:#fdece2}
.nav__actions{display:none}

.nav__item{position:static}      /* so the panel can span the whole island */
.nav__trigger{display:inline-flex;align-items:center;gap:6px}
.chev{width:11px;height:11px;opacity:.65;transition:transform .2s ease}
[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav__trigger[aria-expanded="true"]{color:var(--ink);background:rgba(13,21,38,.05)}

/* ---- mega panel: spans the full width of the nav island ---- */
.mega{
  position:absolute;top:calc(100% + 12px);left:0;right:0;z-index:30;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 24px 50px rgba(6,3,20,.20);
  padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-mega.is-open .mega{opacity:1;visibility:visible;transform:translateY(0)}

/* Compact dropdown (About). The wide services panel spans the whole island
   via .nav__item{position:static}; this one anchors to its own trigger, so
   the item needs to be the containing block instead. */
.nav__item--drop{position:relative}
/* The wide services panel hangs off .header__inner, so its 100% is the island
   itself. This one hangs off its own nav item, which is 41px inside a 64px
   island and therefore ends 12px short, putting the panel flush against the
   bar. Stretching the nav and the item to the island height makes 100% mean
   the same thing for both panels. Desktop only: below 980px the nav becomes
   an in-flow accordion where stretching would break the layout. */
@media (min-width:1081px){
  .nav{align-self:stretch}
  .nav__item--drop{align-self:stretch;display:flex;align-items:center}
}
/* Padding, radii and type all match .mega and .mega__link, so the two panels
   read as the same component at different widths. */
.drop{
  position:absolute;top:calc(100% + 12px);left:50%;z-index:30;
  width:360px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 50px rgba(6,3,20,.20);
  opacity:0;visibility:hidden;
  transform:translate(-50%,-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-mega.is-open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}

.drop__link{
  display:block;
  padding:16px 16px 18px;
  border-radius:12px;
  transition:background-color .15s ease;
}
.drop__link:hover{background:#faf9fc}
.drop__link[aria-current="page"]{background:#fdece2}
.drop__link strong{
  display:block;
  font-family:var(--font-display);
  font-size:0.98rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);
}
.drop__link span{
  display:block;margin-top:4px;
  font-size:0.87rem;line-height:1.5;font-weight:400;
  color:var(--slate);
}

.mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mega__link{
  display:block;
  padding:16px 16px 18px;
  border-radius:12px;
  transition:background-color .15s ease;
}
.mega__link:hover{background:#faf9fc}
.mega__ico{
  display:grid;place-items:center;
  width:34px;height:34px;margin-bottom:11px;
  border-radius:9px;
  background:linear-gradient(150deg,#2e2766,#1c1740);
  color:#fff;
}
.mega__ico svg{width:18px;height:18px;fill:currentColor}
.mega__link strong{
  display:block;
  font-family:var(--font-display);
  font-size:0.98rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);
}
.mega__desc{
  display:block;margin-top:4px;
  font-size:0.87rem;line-height:1.5;font-weight:400;
  color:var(--slate);
}
.mega__foot{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:8px;padding:14px 16px;
  border-radius:12px;
  background:#f7f7fa;
}
.mega__foot span{font-size:0.92rem;color:var(--slate)}

.actions{display:flex;align-items:center;gap:10px;flex:none}

/* hamburger */
/* 44px square: the menu button is the one control a phone user must hit */
.toggle{display:none;margin-left:auto;padding:14px;margin-right:-6px}
.toggle__bars{display:block;width:22px;height:16px;position:relative}
.toggle__bars i{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .2s,opacity .2s;
}
.toggle__bars i:nth-child(1){top:0}
.toggle__bars i:nth-child(2){top:7px}
.toggle__bars i:nth-child(3){top:14px}
.toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------
   Hero colour band.
   Deep purple, darkened down from the #3D358B in the logo wordmark,
   so it is the brand's own second colour rather than an arbitrary one.
   White text runs 13.1:1 to 18.4:1 across the ramp.
   --------------------------------------------------------------- */
.hero{
  color:#fff;
  background:linear-gradient(165deg,#14102b 0%,#1c1740 42%,#262055 76%,#2e2766 100%);
}

/* Nested squares - a reticle in square form radiating from behind the
   headline, playing off the name (SiteAim), pulsing slowly outward.

   Two elements, not one: .rings carries the mask and stays still, while
   its ::before carries the artwork and scales. Masking and animating the
   same element would scale the mask too, so the clear centre would grow
   along with the squares.

   The squares are spaced geometrically (each 1.28x the last, strokes
   scaled to match), so scaling the set by exactly 1.28 lands every square
   precisely where the next one was. The loop is therefore invisible - it
   reads as an endless outward pulse rather than a repeating cycle. */
.rings{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(80% 76% at 50% 42%,
    transparent 0%, transparent 26%, #000 66%, rgba(0,0,0,.28) 100%);
          mask-image:radial-gradient(80% 76% at 50% 42%,
    transparent 0%, transparent 26%, #000 66%, rgba(0,0,0,.28) 100%);
}
.rings::before{
  content:"";
  position:absolute;inset:0;
  opacity:.16;                    /* reads brighter now the band is darker */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1410 -1410 2820 2820'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Crect x='-6.0' y='-6.0' width='12.0' height='12.0' rx='0.5' stroke-width='0.04'/%3E%3Crect x='-7.7' y='-7.7' width='15.4' height='15.4' rx='0.6' stroke-width='0.05'/%3E%3Crect x='-9.8' y='-9.8' width='19.7' height='19.7' rx='0.8' stroke-width='0.06'/%3E%3Crect x='-12.6' y='-12.6' width='25.2' height='25.2' rx='1.0' stroke-width='0.08'/%3E%3Crect x='-16.1' y='-16.1' width='32.2' height='32.2' rx='1.3' stroke-width='0.10'/%3E%3Crect x='-20.6' y='-20.6' width='41.2' height='41.2' rx='1.6' stroke-width='0.13'/%3E%3Crect x='-26.4' y='-26.4' width='52.8' height='52.8' rx='2.1' stroke-width='0.17'/%3E%3Crect x='-33.8' y='-33.8' width='67.6' height='67.6' rx='2.7' stroke-width='0.21'/%3E%3Crect x='-43.2' y='-43.2' width='86.5' height='86.5' rx='3.5' stroke-width='0.27'/%3E%3Crect x='-55.3' y='-55.3' width='110.7' height='110.7' rx='4.4' stroke-width='0.35'/%3E%3Crect x='-70.8' y='-70.8' width='141.7' height='141.7' rx='5.7' stroke-width='0.44'/%3E%3Crect x='-90.7' y='-90.7' width='181.3' height='181.3' rx='7.3' stroke-width='0.57'/%3E%3Crect x='-116.1' y='-116.1' width='232.1' height='232.1' rx='8.0' stroke-width='0.73'/%3E%3Crect x='-148.6' y='-148.6' width='297.1' height='297.1' rx='8.0' stroke-width='0.93'/%3E%3Crect x='-190.1' y='-190.1' width='380.3' height='380.3' rx='8.0' stroke-width='1.19'/%3E%3Crect x='-243.4' y='-243.4' width='486.8' height='486.8' rx='8.0' stroke-width='1.53'/%3E%3Crect x='-311.5' y='-311.5' width='623.1' height='623.1' rx='8.0' stroke-width='1.95'/%3E%3Crect x='-398.8' y='-398.8' width='797.5' height='797.5' rx='8.0' stroke-width='2.50'/%3E%3Crect x='-510.4' y='-510.4' width='1020.8' height='1020.8' rx='8.0' stroke-width='3.20'/%3E%3Crect x='-653.3' y='-653.3' width='1306.7' height='1306.7' rx='8.0' stroke-width='4.10'/%3E%3Crect x='-836.3' y='-836.3' width='1672.6' height='1672.6' rx='8.0' stroke-width='5.24'/%3E%3Crect x='-1070.4' y='-1070.4' width='2140.9' height='2140.9' rx='8.0' stroke-width='6.71'/%3E%3Crect x='-1370.2' y='-1370.2' width='2740.3' height='2740.3' rx='8.0' stroke-width='8.59'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:50% 42%;
  background-size:150vmax 150vmax;
  transform-origin:50% 42%;     /* must match background-position */
  will-change:transform;
  animation:rings-pulse 16s linear infinite;
}
@keyframes rings-pulse{
  from{transform:scale(1)}
  to  {transform:scale(1.28)}   /* exactly the spacing ratio */
}

/* hero - centred. Top padding clears the 92px the header no longer occupies. */
.hero{position:relative;z-index:1;padding:204px 0 120px}
/* positioned so it stays above .rings, which is absolute inside .hero */
.hero__inner{position:relative;z-index:1;text-align:center}

/* announcement pill
   Dark chip on the light band (14.3:1, so it reads as a deliberate
   object). The badge keeps true brand orange as its fill with
   near-black text - white on orange is only 3.3:1 and fails. */
.announce{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  max-width:100%;
  padding:7px 16px 7px 9px;
  border-radius:10px;
  /* see-through: a barely-there orange wash, not a solid fill */
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow:0 0 22px rgba(179,170,232,.20);
  font-size:0.93rem;font-weight:600;line-height:1.35;
  color:#c9c2f2;
  transition:box-shadow .2s ease;
}

/* The glowing stroke.
   A 1px-padded pseudo-element filled with a gradient, then masked so only
   that 1px ring survives - two stacked masks composited with `exclude`
   punch out the middle. That's what lets the stroke carry a gradient
   (bright at top and bottom, dim through the middle) instead of the flat
   single colour a normal `border` is limited to. */
.announce::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.7)  0%,
    rgba(201,194,242,.16) 55%,
    rgba(179,170,232,.6)  100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.announce:hover{box-shadow:0 0 34px rgba(179,170,232,.36)}
.announce__text{position:relative}
.announce b,.announce__text{color:#fff}
.announce:hover .announce__text{color:#e4e0fa}
.announce__badge{
  position:relative;
  flex:none;
  padding:4px 8px;
  border-radius:5px;
  /* orange badge against the purple pill - the two brand colours meeting.
     Near-black text: white on brand orange is only 3.3:1 and fails. */
  background:var(--orange);
  box-shadow:0 2px 10px rgba(243,91,5,.45);
  color:#1a1005;
  font-size:0.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
}
.announce__tail{color:#c9c2f2;font-weight:500}

.hero h1{
  margin-top:26px;
  font-family:var(--font-display);
  font-weight:700;                /* 700 is Familjen Grotesk's heaviest */
  /* Shorter lines than the previous headline, so this can run much larger:
     line 1 "WordPress problems, solved" measures 11.88em in Familjen
     Grotesk 700 at this tracking, allowing 6.10rem inside the 1160px
     content width. Held at 5.5rem - the ceiling is set by how the block
     looks against the lede, not by the container. */
  font-size:clamp(2.4rem,6.6vw,5.5rem);
  line-height:1.08;
  letter-spacing:-.03em;
  color:#fff;
}

/* Gradient payoff line.
   White running into brand orange - the warm accent against the purple
   band puts both brand colours on the page at once. Lifted to #ff8f4d
   (5.8:1); true #f35b05 would only manage 3.95:1 here. */
.hero h1 em{
  font-style:normal;
  font-weight:700;
  background:linear-gradient(95deg,#ffffff 0%,#ffc39c 45%,#ff8f4d 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* keeps descenders (g, y) from being clipped by the text box */
  padding-bottom:.06em;
}

.hero__lede{
  /* 70ch - the top of the comfortable 45-75ch measure. Past that the eye
     starts losing its place returning to the next line. */
  max-width:70ch;
  margin:26px auto 0;
  font-size:1.1rem;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}

.hero__cta{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:14px;margin-top:38px;
}
.hero__cta .btn{padding:13px 26px;font-size:1rem}


/* proof row - figures / rating under the CTA */
/* Equal-width columns with hairline dividers.
   Previously each item sized to its own content, so the third label
   wrapped to two lines while the others sat on one and the row read as
   ragged. Equal columns make the wrap consistent, and the dividers make
   the differing label heights read as deliberate columns. */
.proof{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:0;
  margin:46px auto 0;
  max-width:780px;
  text-align:center;
}
.proof li{
  flex:1 1 0;
  min-width:170px;
  /* align-items centres the stars too: as a block-level svg it would
     otherwise sit hard left however the text is aligned */
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:2px 24px;
  border-left:1px solid rgba(255,255,255,.16);
}
.proof li:first-child{border-left:0}
.proof__figure{
  font-size:1.25rem;font-weight:700;
  letter-spacing:-.025em;line-height:1;
  color:#fff;
}
.proof__label{font-size:0.86rem;line-height:1.4;color:rgba(255,255,255,.75)}
.proof__label b{font-weight:700;color:#fff}
.proof__stars{width:auto;height:20px;display:block}

/* client logo strip, closing the hero */
.clients{
  margin-top:52px;padding-top:34px;
  border-top:1px solid rgba(255,255,255,.13);
}
.clients__label{
  /* Sentence case rather than caps, so "WooCommerce" reads properly. Caps
     tracking is dropped with it, since wide spacing only helps uppercase. */
  margin:0 auto 24px;max-width:64ch;
  font-size:1rem;font-weight:500;
  letter-spacing:0;text-transform:none;
  line-height:1.5;
  color:rgba(255,255,255,.66);   /* brighter than before, roughly 7:1 */
  text-wrap:balance;
}
.clients__row{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:22px 46px;
}
.clients__row img{
  display:block;
  /* Sized by area, not height. These logos differ wildly in aspect ratio
     (TIS is 3.2:1, AIM-Tex 7.7:1), and a fixed height would make the wide
     ones dominate. max-height plus a max-width evens them out optically. */
  height:auto;width:auto;
  max-height:38px;max-width:150px;
  object-fit:contain;
  /* flattened to white silhouettes so unrelated brand palettes read as one
     row. Hover brightens rather than restoring colour: most of these logos
     are dark, and their true colours all but vanish on the purple band. */
  filter:brightness(0) invert(1);
  opacity:.6;
  transition:opacity .18s ease;
}
.clients__row li:hover img{opacity:1}

/* ==================== PRICING PAGE ====================
   Shares the homepage's header, footer, included list, reviews and CTA.
   Only the hero, the plan grid and the FAQ are page-specific. */
.phero{
  position:relative;z-index:1;
  padding:190px 0 84px;
  text-align:center;
  color:#fff;
  background:linear-gradient(165deg,#14102b 0%,#1c1740 42%,#262055 76%,#2e2766 100%);
}
.phero__eyebrow{
  margin:0 0 14px;
  font-size:0.86rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:#ffb27d;
}
.phero h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.1rem,5vw,3.6rem);
  line-height:1.06;letter-spacing:-.04em;
}
.phero h1 em{
  font-style:normal;
  background:linear-gradient(95deg,#ffffff 0%,#ffc39c 45%,#ff8f4d 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.06em;
}
.phero__lede{
  margin:20px auto 0;max-width:62ch;
  font-size:1.02rem;line-height:1.62;
  color:rgba(255,255,255,.8);
}

/* hero CTA + note, shared by the service pages */
.phero__cta{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
  margin-top:30px;
}
.phero__cta .btn{padding:13px 26px;font-size:1.01rem}
.phero__note{
  margin:16px 0 0;
  font-size:0.92rem;
  color:rgba(255,255,255,.6);
}

/* three separate assurances under the CTA, rather than one run-on sentence:
   each is scanned in its own right instead of being read through */
.assure{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:12px 30px;
  margin:26px 0 0;
}
.assure li{
  display:flex;align-items:center;gap:9px;
  font-size:0.92rem;font-weight:500;
  color:rgba(255,255,255,.78);
}
.assure__ico{
  flex:none;
  display:grid;place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.11);
  color:#ffb27d;
}
.assure__ico svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:560px){
  .assure{flex-direction:column;align-items:flex-start;gap:12px;max-width:280px;margin-inline:auto}
}

/* pill list of sectors */
.phero__ticks{
  display:flex;flex-wrap:wrap;gap:9px;
  margin:0;
}
.phero__ticks li{
  padding:7px 14px;
  border-radius:999px;
  background:rgba(46,39,102,.07);
  box-shadow:inset 0 0 0 1px rgba(46,39,102,.12);
  font-size:0.92rem;font-weight:600;
  color:#3a3468;
}
.about__ticks{align-content:start}

/* ================ ORDER BLOCK (urgent page) ================
   Reuses the pricing page's .plan card wholesale, so the two pages show the
   same component rather than two things that merely look similar. Two cards
   centred rather than a four-across grid, since this page only has one
   product plus its natural upsell. */
.order-block{padding:0 0 112px;background:#fff}
.order-block__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;
  /* stretch, not start: the three cards hold different amounts of content
     (the middle one carries a slider) and would otherwise end at different
     heights */
  align-items:stretch;
}
/* the feature list absorbs the slack, so whatever sits below it lands on a
   common line across all three cards */
.order-block .plan__feats{flex-grow:1}
.order-block .order-block__alt{margin-top:auto;padding-top:16px}

/* Enterprise: the dark card, so the top tier reads as a different class of
   thing rather than just a bigger number on the same card.
   Written as .plan.plan--dark, not .plan--dark: the base .plan rule is
   defined further down this file with the same specificity, so it would
   otherwise win on order and repaint the card white while the white text
   colours below still applied. */
.plan.plan--dark{
  border-color:transparent;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(255,138,70,.16) 0%, rgba(255,138,70,0) 60%),
    linear-gradient(150deg,#2e2766 0%,#1c1740 58%,#16112f 100%);
  box-shadow:0 20px 44px rgba(28,23,64,.26);
}
.plan--dark .plan__name{color:#fff}
.plan--dark .plan__note{color:#b3aae8}
.plan--dark .plan__price{color:#b3aae8}
.plan--dark .plan__price b{color:#fff}
.plan--dark .plan__unit{color:#b3aae8}
.plan--dark .plan__feats li{color:#e9e6f7}
.plan--dark .plan__feats svg{color:#ff8f4d}
/* same ordering trap as above */
.plan__tag.plan__tag--dark{background:#ff8f4d;color:#1a1005}
/* name left, price right, sharing a row and a baseline */
.order-block .plan__top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;
}
.order-block .plan__name{font-size:1.2rem}
.order-block .plan__cost{
  margin:0;
  flex:none;
  text-align:right;
}
/* The two cards in the duo carry different kinds of price, one a big figure
   and one a phrase, so a shared baseline dropped the taller card's name and
   nothing below it lined up. Align to the top and hold both headers at the
   same height, and the name, the price and the note all sit on one line
   across the pair. */
.order-block__duo .plan__top{align-items:flex-start;min-height:75px}

/* Rows shared across the pair, so the two buttons sit on one line even
   though only the left card carries a slider. Each card borrows the duo's
   row tracks with subgrid and contributes an empty slot where the other has
   something it does not. The plan tag is absolutely positioned, so it takes
   no row. Without subgrid support the cards simply lay out as before. */
/* Only the pair that carries the spacers, which is the whitelabel page. The
   pricing page uses the same duo for Enterprise and the partner card, and
   those two have different children: sharing rows there dropped the
   Subscribe button into the 1fr track and stretched it to fill the card. */
@supports (grid-template-rows: subgrid){
  @media (min-width:761px){
    /* eight rows: heading, note, panel, button, reply pill, list, link, foot.
       The list is the only flexible one, so it takes up the slack and every
       other row stays the height of its own content. */
    .order-block__duo:has(.plan__gap){grid-template-rows:auto auto auto auto auto 1fr auto auto}
    .order-block__duo:has(.plan__gap) > .plan{
      display:grid;grid-template-rows:subgrid;grid-row:span 8;
    }
    .order-block__duo:has(.plan__gap) .plan__foot{margin:0}
    .order-block__duo:has(.plan__gap) .plan__feats{align-self:start}
  }
}
/* Enterprise, in the slot the partner card fills with its slider. The
   hardware spec used to sit here, but the feature list and the comparison
   table already cover hosting, so this shows what the plan absorbs that
   every other plan is billed for. */
.espec{
  margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}
.espec__head{
  margin:0 0 11px;
  font-size:0.84rem;font-weight:700;color:#fff;
}
.espec__inc{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.espec__inc li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 11px;border-radius:8px;
  background:rgba(255,255,255,.07);
  font-size:0.85rem;color:#cfc9ea;
}
.espec__inc b{white-space:nowrap;font-size:0.82rem;color:#ff8f4d}
/* the price it would normally cost, struck through beside the word */
.espec__inc s{
  margin-right:6px;
  color:#9d97c4;font-weight:400;text-decoration-thickness:1px;
}
.espec__note{margin:12px 0 0;font-size:0.82rem;line-height:1.55;color:#b7b0d8}

/* The volume card's answer to the slider opposite it: what the published
   floor actually works out at, rather than an empty panel. */
.vrate{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.vrate__head{
  margin:0 0 10px;font-size:0.84rem;font-weight:700;color:#fff;
}
.vrate__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vrate__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 11px;border-radius:8px;
  background:rgba(255,255,255,.07);
  font-size:0.86rem;color:#cfc9ea;
}
.vrate__list b{font-family:var(--font-display);font-size:1.02rem;color:#ff8f4d}
.vrate__note{margin:11px 0 0;font-size:0.8rem;line-height:1.5;color:#b7b0d8}

.plan__gap{display:none}
@supports (grid-template-rows: subgrid){
  @media (min-width:761px){ .plan__gap{display:block} }
}
/* On the narrowest phones a wordy price like "Agreed per portfolio" cannot
   sit beside the plan name, and flex:none means it will not shrink, so the
   pair pushed the page sideways. Stack them instead. */
@media (max-width:420px){
  .plan__top{flex-direction:column;align-items:flex-start;gap:10px}
  .plan__cost{text-align:left}
}
.order-block .plan__price{font-size:1.05rem}
.order-block .plan__price b{font-size:2rem}
.order-block .plan__unit{margin-top:2px;font-size:0.86rem}
.order-block .plan__note{min-height:0;margin-top:10px}
/* ---- care plan slider ----
   All three plans' features are in the HTML. app.js hides the inactive two,
   so with no JavaScript the card simply lists every plan rather than
   showing an inert slider. */
.care__slider{margin:18px 0 4px}
.care__slider input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--orange) var(--fill,0%),#eee9f2 var(--fill,0%));
  cursor:pointer;
}
.care__slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:#fff;
  border:3px solid var(--orange);
  box-shadow:0 2px 8px rgba(176,62,8,.32);
  cursor:grab;
}
.care__slider input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:#fff;
  border:3px solid var(--orange);
  box-shadow:0 2px 8px rgba(176,62,8,.32);
  cursor:grab;
}
.care__slider input[type=range]:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.care__ticks{
  display:flex;justify-content:space-between;
  margin-top:9px;
}
.care__ticks span{
  font-size:0.87rem;font-weight:700;
  color:var(--slate);
  transition:color .16s ease;
}
.care__ticks span.is-on{color:var(--orange-dark)}
/* the outer labels sit under the track ends rather than centred on them */
.care__ticks span:first-child{margin-left:-2px}
.care__ticks span:last-child{margin-right:-2px}

.care__pane[hidden]{display:none}

.order-block__alt{
  margin:16px 0 0;
  font-size:0.89rem;
  text-align:center;
  color:var(--slate);
}
.order-block__alt a{
  color:var(--orange-dark);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(176,62,8,.35);
}
.order-block__alt a:hover{text-decoration-color:var(--orange-dark)}
/* Enterprise sitting below the three plans rather than beside them: laid out
   horizontally so a full-width card does not become a tall column of one
   thing. Copy left, features in two columns right. */
/* The two tiers that are not a self-serve plan: one for large single sites,
   one for agencies reselling. Half width each, sitting under the three
   standard plans. */
.order-block__duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
  align-items:stretch;
}
.order-block__duo .plan__feats{flex-grow:1}
/* When the duo follows the four-across grid, 20px is not enough: the tags
   on these two sit 11px above their card, so they end up almost touching
   the row above. Only the pricing page stacks them this way. */
.plans__grid + .order-block__duo{margin-top:44px}

/* the agency card: tinted rather than dark, so the two read as a pair
   without competing */
.plan.plan--tint{
  border-color:#e8e4f5;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(255,138,70,.10) 0%, rgba(255,138,70,0) 58%),
    linear-gradient(140deg,#f6f4ff 0%,#faf7ff 50%,#fff7f2 100%);
  box-shadow:0 14px 34px rgba(28,23,64,.09);
}
.plan__tag.plan__tag--tint{background:#2e2766;color:#fff}
.plan__price--quiet{
  font-family:var(--font-display);
  font-size:1.35rem;font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}

@media (max-width:760px){
  .order-block__duo{grid-template-columns:1fr}
}

.order-block__alt--dark{color:#b3aae8}
.order-block__alt--dark a{
  color:#ffc39c;
  text-decoration-color:rgba(255,195,156,.4);
}
.order-block__alt--dark a:hover{text-decoration-color:#ffc39c}

@media (max-width:980px){
  .order-block__grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
}
@media (max-width:760px){
  .order-block{padding-bottom:88px}
}

/* ================= PREVENTION (urgent page) =================
   A dark panel, because the page is otherwise a long run of white and this
   is the moment it asks for the sale. Reuses the CTA panel's shooting stars
   so the two conversion points on the page speak the same language. */
.prevent{padding:0 0 112px;background:#fff}

/* managed hosting section (agency page).
   Takes the tinted band the reviews section uses elsewhere, because this page
   has no reviews and would otherwise run white from the hero to the footer. */
.hosting{
  padding:86px 0 112px;
  background:linear-gradient(180deg,#f6f4fb 0%,#f9f6fb 55%,#fdf8f5 100%);
}
/* "Optional" tag above the hosting heading. Sitting on its own line rather
   than inside the h2 keeps it subordinate to a 2.5rem headline instead of
   competing with it. White on this purple is 13.1:1, and the tag itself is
   12.1:1 against the band behind it. */
.sechead p.opt{
  display:inline-block;
  margin:0 0 14px;max-width:none;
  padding:4px 9px;
  border-radius:6px;
  background:#2e2766;color:#fff;
  font-family:inherit;
  font-size:0.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}

.dcs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:40px;
}
.dc{
  padding:24px 24px 22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 34px rgba(13,21,38,.07);
}
/* Reuses .plan__pulse, which takes its colour from the text around it, so the
   colour here has to actually win. The eyebrow is a direct <p> child of .dc,
   and ".dc > p" below is class-plus-type, which outranks a lone class and
   would otherwise paint both the text and the pulse slate. */
.dc p.dc__eyebrow{
  display:flex;align-items:center;gap:8px;
  margin:0 0 11px;
  font-size:0.8rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:#b03e08;                /* 5.16:1 on white, the brand orange is not */
}
.dc h3{
  display:flex;align-items:center;gap:10px;
  margin:0;
  font-family:var(--font-display);
  font-size:1.2rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
/* the hairline ring matters: both flags carry white at their edges and would
   otherwise bleed into the white card */
.dc__flag{
  width:24px;height:12px;flex:none;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(13,21,38,.14);
}
.dc > p{
  margin:9px 0 0;
  font-size:0.95rem;line-height:1.66;
  color:var(--slate);
}
.dc__spec{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:16px 0 0;
}
.dc__spec li{
  padding:5px 11px;
  border-radius:6px;
  background:#f4f1fa;
  font-size:0.84rem;font-weight:600;
  color:var(--ink);
}
.hosting__foot{
  margin:38px 0 0;padding-top:22px;
  border-top:1px solid #e6e1f0;
  font-size:1rem;line-height:1.6;
  color:var(--slate);
  text-align:center;
}

@media (max-width:820px){
  .dcs{grid-template-columns:1fr}
}

/* backups.
   Opens with 88px because it follows the tinted hosting band. Sections that
   follow a white one inherit their breathing room from the 92px above them,
   but here the colour changes at this boundary, so without its own padding
   the heading starts on the very first pixel of white. */
.backups{padding:88px 0 112px;background:#fff}
.bk{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:44px;align-items:center;
}
.bk__facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.bk__fact b{
  display:block;margin-bottom:6px;
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
.bk__fact span{
  display:block;
  font-size:0.93rem;line-height:1.6;
  color:var(--slate);
}

/* Fifty bars, one per retained restore point. Older ones sit fainter, so the
   depth of the retention reads at a glance without a number on every bar. */
.bk__viz{
  padding:26px 24px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(165deg,#14102b 0%,#1c1740 60%,#262055 100%);
}
.bk__strip{
  display:flex;align-items:flex-end;gap:3px;
  height:118px;
}
/* --o is the bar's resting opacity, held in a variable so the keyframes can
   brighten each bar relative to its own level rather than flattening the
   fade. A negative delay per bar starts each one further through the cycle,
   which reads as a single slow wave crossing the strip. The global
   prefers-reduced-motion rule at the end of this file stops it, and the bars
   fall back to --o, which is the static state they had before. */
.bk__strip span{
  --o:calc(.28 + var(--i) * 0.0145);
  flex:1;
  transform-origin:bottom;
  border-radius:2px;
  background:var(--orange-lit);
  height:calc(52% + var(--i) * 0.96%);
  opacity:var(--o);
  animation:bkWave 7s ease-in-out infinite;
  animation-delay:calc(var(--i) * -0.09s);
}
.bk__strip span:last-child{background:#fff;--o:1}
@keyframes bkWave{
  0%,100%{opacity:var(--o);transform:scaleY(1)}
  50%    {opacity:calc(var(--o) + .32);transform:scaleY(1.055)}
}
.bk__legend{
  display:flex;justify-content:space-between;
  margin:14px 0 0;
  font-size:0.83rem;font-weight:600;
  color:#b3aae8;
}

/* optional add-ons */
.addons{padding:0 0 112px;background:#fff}
/* .plans closes on only 20px so its footnote stays tucked under the cards,
   which means whatever follows it has to supply the rest of the gap. 72
   here brings the transition to the 92 used everywhere else. */
.plans + .addons{padding-top:92px}
.addons__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.addon{
  padding:26px 26px 24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 34px rgba(13,21,38,.07);
}
.addon__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.addon__top h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.2rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
/* Kept inline rather than made a flex child, so the heading still baseline
   aligns with the price across the row. The mark ships on its own black
   ground, so the tile is the logo rather than a container around it.
   alt is empty on purpose: the heading beside it already says Patchstack. */
.addon__logo{
  width:34px;height:34px;
  margin-right:11px;
  border-radius:8px;
  vertical-align:-10px;
}
.addon__price{
  margin:0;flex:none;text-align:right;
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:700;
  color:var(--ink);
}
.addon__price b{font-size:1.7rem;letter-spacing:-.03em;margin-left:2px}
.addon__price span{
  display:block;margin-top:2px;
  font-family:inherit;
  font-size:0.8rem;font-weight:500;
  color:var(--slate);
}
.addon__note{
  margin:0 0 16px;
  font-size:0.95rem;line-height:1.66;
  color:var(--slate);
}
.addon__feats{display:grid;gap:11px}
.addon__feats li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:0.93rem;line-height:1.55;
  color:var(--slate);
}
.addon__feats li b{color:var(--ink)}
.addon__feats svg{
  flex:none;width:16px;height:16px;margin-top:2px;
  color:var(--orange-dark);
}

@media (max-width:900px){
  .bk{grid-template-columns:1fr;gap:32px}
  .addons__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bk__facts{grid-template-columns:1fr;gap:22px}
  .addon__top{flex-direction:column;align-items:flex-start;gap:10px}
  .addon__price{text-align:left}
}
.prevent__panel{
  position:relative;
  overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;
  gap:44px;
  padding:52px 48px;
  border-radius:20px;
  background:
    radial-gradient(80% 130% at 12% 0%, rgba(255,138,70,.14) 0%, rgba(255,138,70,0) 60%),
    linear-gradient(150deg,#2e2766 0%,#1c1740 58%,#16112f 100%);
  color:#fff;
}
.prevent__copy{position:relative;z-index:1}
.prevent__eyebrow{
  margin:0 0 12px;
  font-size:0.86rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:#ffb27d;
}
.prevent__copy h2{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:700;line-height:1.14;letter-spacing:-.03em;
  text-wrap:balance;
}
.prevent__copy h2 em{
  font-style:normal;
  background:linear-gradient(95deg,#ffffff 0%,#ffc39c 45%,#ff8f4d 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.prevent__copy p{
  margin:0 0 14px;max-width:52ch;
  font-size:1rem;line-height:1.65;
  color:#b3aae8;
}
.prevent__copy a:not(.btn){
  color:#ffc39c;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,195,156,.4);
}
.prevent__copy a:not(.btn):hover{text-decoration-color:#ffc39c}
.prevent__cta{margin-top:10px;padding:13px 24px;font-size:0.99rem}

/* numbered causes, counter-generated so the markup stays plain */
.prevent__list{
  position:relative;z-index:1;
  counter-reset:cause;
  display:grid;gap:0;
  align-content:start;
}
.prevent__list li{
  counter-increment:cause;
  display:grid;grid-template-columns:30px 1fr;
  column-gap:14px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.13);
}
.prevent__list li:first-child{border-top:0;padding-top:0}
.prevent__list li::before{
  content:counter(cause,decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--font-display);
  font-size:0.87rem;font-weight:700;
  color:#ff8f4d;
  padding-top:2px;
}
.prevent__list h3{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-size:1.03rem;font-weight:700;letter-spacing:-.015em;
  color:#fff;
}
.prevent__list p{
  margin:0;
  font-size:0.92rem;line-height:1.55;
  color:#b3aae8;
}

@media (max-width:980px){
  .prevent__panel{grid-template-columns:1fr;gap:32px;padding:40px 30px}
}
@media (max-width:560px){
  .prevent{padding-bottom:88px}
  .prevent__panel{padding:32px 22px;border-radius:16px}
}

/* ============== SIGNS TABLE (malware page) ==============
   A real table, not another card grid. The content is genuinely tabular
   (symptom, type, cause) and the page already carries four card-shaped
   modules, so a ruled table gives it a different texture and reads like a
   reference rather than marketing. */
.signs{padding:88px 0 112px;background:#fff}
/* A plain checklist, lifted off the page by one tinted panel rather than by
   giving every item its own box. Nothing per row but a drawn checkbox, so
   ten items read as a list to work through rather than ten little cards. */
.signs__panel{
  padding:40px 42px 34px;
  border-radius:20px;
  border:1px solid #e8e4f5;
  background:linear-gradient(140deg,#f7f5ff 0%,#faf8ff 52%,#fff8f4 100%);
}
.checks{columns:2;column-gap:52px}
.checks li{
  break-inside:avoid;
  display:grid;grid-template-columns:24px 1fr;
  gap:0 14px;
  padding:0 0 24px;
}
/* drawn, not a tick glyph: it reads as something you are checking off */
.check__mark{
  width:19px;height:19px;margin-top:5px;   /* re-centred against the taller title */
  border:2px solid var(--ink);
  border-radius:5px;
  position:relative;
}
.check__mark::after{
  content:"";
  position:absolute;left:3.5px;top:3.5px;
  width:8px;height:8px;
  border-radius:2px;
  background:var(--orange);
}
.check__say{
  margin:0 0 5px;
  font-family:var(--font-display);
  font-size:1.16rem;font-weight:700;
  line-height:1.28;letter-spacing:-.02em;
  color:var(--ink);
}
.check__was{
  margin:0;
  font-size:0.9rem;line-height:1.55;
  color:var(--slate);
}
.check__was b{color:var(--orange-dark);font-weight:700}

@media (max-width:820px){
  .signs__panel{padding:28px 24px 20px;border-radius:16px}
  .checks{columns:1}
}
.signs__foot{
  margin:26px 0 0;
  font-size:0.95rem;
  color:var(--slate);
}
.signs__foot a{
  color:var(--orange-dark);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(176,62,8,.35);
}
.signs__foot a:hover{text-decoration-color:var(--orange-dark)}

@media (max-width:900px){
  .signs{padding:64px 0 88px}
}

/* ============ FLOW DIAGRAM (urgent support page) ============
   Two tracks comparing what happens to an update with and without a plan.
   Built from HTML rather than an image so it inherits the site's type and
   colour, stays sharp at any size and reflows on a phone. The whole thing
   carries one role="img" and a full text alternative, since the meaning
   lives in the arrangement rather than in any single label. */
/* Same artwork family as the blog heroes and the homepage About panel: the
   identical background gradient, the rotated nested squares and the streaks,
   here as a backdrop behind a live diagram rather than a flat image. Only #
   is escaped in the data URI, so the shapes stay readable. */
.flow{
  display:grid;gap:22px;
  padding:26px 24px;
  border-radius:16px;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'><g transform='rotate(-12 240 150)' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'><rect x='150' y='60' width='180' height='180' rx='20'/><rect x='120' y='30' width='240' height='240' rx='26'/><rect x='86' y='-4' width='308' height='308' rx='32'/></g><g stroke='%23ffffff' stroke-opacity='0.3' stroke-width='1.4' stroke-linecap='round'><line x1='286' y1='26' x2='366' y2='10'/><line x1='316' y1='52' x2='376' y2='40'/></g></svg>")
      right -30px top -24px / 400px 400px no-repeat,
    linear-gradient(135deg,#14102b 0%,#1c1740 42%,#262055 78%,#2e2766 100%);
  box-shadow:0 18px 40px rgba(28,23,64,.22);
}
/* opaque, not translucent: the node dots punch the gap in the rule with a
   ring of this exact colour, which only lines up if it is a solid value */
.flow__row{
  padding:20px 22px 18px;
  border-radius:13px;
  background:#241e50;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.flow__head{margin:0 0 18px}
.flow__head b{
  display:block;
  font-family:var(--font-display);
  font-size:1rem;font-weight:700;letter-spacing:-.01em;
}
.flow__head span{font-size:0.87rem;color:#b7b0d8}

/* the track: one rule behind the row, dots punch gaps in it */
.flow__track{
  position:relative;
  display:flex;align-items:flex-start;
  margin:0;
}
/* the rule runs between the FIRST and LAST dot centres, which depend on how
   many nodes the track has: 2 nodes centre at 25%/75%, 4 at 12.5%/87.5% */
.flow__track::before{
  content:"";
  position:absolute;top:6px;
  height:2px;border-radius:2px;
}
.flow__row--bad .flow__track::before{left:25%;right:25%}
.flow__row--good .flow__track::before{left:12.5%;right:12.5%}

/* the travelling pulse. Hidden until .is-live, so it does not run offscreen,
   and invisible by default so reduced-motion leaves a clean static diagram. */
.flow__track::after{
  content:"";
  position:absolute;top:1px;
  width:11px;height:11px;margin-left:-5.5px;
  border-radius:50%;
  opacity:0;
}
.flow.is-live .flow__row--bad .flow__track::after{
  background:#ff5e7c;
  box-shadow:0 0 0 4px rgba(255,94,124,.22);
  animation:flowBad 6s linear infinite;
}
.flow.is-live .flow__row--good .flow__track::after{
  background:#ff8f4d;
  box-shadow:0 0 0 4px rgba(255,143,77,.24);
  animation:flowGood 6s linear infinite;
}
@keyframes flowBad{
  0%   {left:25%; opacity:0}
  5%   {opacity:1}
  22%  {left:75%; opacity:1}
  30%  {left:75%; opacity:0}
  100% {left:75%; opacity:0}
}
@keyframes flowGood{
  0%   {left:12.5%; opacity:0}
  4%   {opacity:1}
  55%  {left:87.5%; opacity:1}
  63%  {left:87.5%; opacity:0}
  100% {left:87.5%; opacity:0}
}

/* nodes light up as the pulse reaches them */
@keyframes nodeHit{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.5)}
}
.flow.is-live .flow__track i{animation:nodeHit .5s ease-out infinite}
.flow.is-live .flow__row--bad li:nth-child(1) i{animation-duration:6s;animation-delay:0s}
.flow.is-live .flow__row--bad li:nth-child(2) i{animation-duration:6s;animation-delay:1.15s}
.flow.is-live .flow__row--good li:nth-child(1) i{animation-duration:6s;animation-delay:0s}
.flow.is-live .flow__row--good li:nth-child(2) i{animation-duration:6s;animation-delay:1.05s}
.flow.is-live .flow__row--good li:nth-child(3) i{animation-duration:6s;animation-delay:2.2s}
.flow.is-live .flow__row--good li:nth-child(4) i{animation-duration:6s;animation-delay:3.3s}

/* the failure bursts the moment the pulse lands */
@keyframes failRing{
  0%,20%  {box-shadow:0 0 0 5px #241e50, 0 0 0 4px rgba(255,94,124,0)}
  27%     {box-shadow:0 0 0 5px #241e50, 0 0 0 13px rgba(255,94,124,.34)}
  42%,100%{box-shadow:0 0 0 5px #241e50, 0 0 0 20px rgba(255,94,124,0)}
}
.flow.is-live .flow__row--bad .is-end i{animation:nodeHit .5s ease-out 1.15s infinite, failRing 6s linear infinite}
.flow__track li{
  position:relative;z-index:1;
  flex:1;
  text-align:center;
  font-size:0.85rem;font-weight:600;
  color:#e7e4f5;
}
.flow__track i{
  display:block;
  width:13px;height:13px;margin:0 auto 9px;
  border-radius:50%;
  box-shadow:0 0 0 5px #241e50;   /* the gap in the rule */
}
.flow__note{
  margin:14px 0 0;
  font-size:0.85rem;line-height:1.45;
}

/* without: muted, and the last node reads as the failure */
.flow__row--bad .flow__track::before{background:rgba(255,255,255,.22)}
.flow__row--bad .flow__head b{color:#cfc9ea}
.flow__row--bad i{background:rgba(255,255,255,.34)}
.flow__row--bad .is-end i{background:#ff5e7c}
.flow__row--bad .is-end{color:#ff8098}
.flow__row--bad .flow__note{color:#ff8098}

/* with: brand orange, and the last node is the payoff */
.flow__row--good .flow__track::before{background:rgba(255,143,77,.4)}
.flow__row--good .flow__head b{color:#ff8f4d}
.flow__row--good i{background:#ff8f4d}
.flow__row--good .is-end i{background:#ffa76b;box-shadow:0 0 0 5px #241e50,0 0 0 10px rgba(255,143,77,.3)}
.flow__row--good .is-end{color:#ff8f4d}
.flow__row--good .flow__note{color:#b7b0d8}

@media (max-width:560px){
  .flow__track li{font-size:0.8rem}
  .flow__row{padding:18px 16px 16px}
}

/* ============== FIXES GRID (urgent support page) ==============
   Separate bordered cards rather than the homepage's ticked list or the
   hairline panel used by the steps above, so the page does not repeat the
   same module twice. Icon sits inline with the title, which lets three fit
   across without the cards getting tall. */
.fixes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.fix{
  padding:24px 22px 22px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.fix:hover{
  border-color:rgba(243,91,5,.4);
  box-shadow:0 12px 28px rgba(13,21,38,.07);
  transform:translateY(-2px);
}
.fix__head{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.fix__ico{
  flex:none;
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:9px;
  background:#fdece2;
  color:var(--orange-dark);
}
.fix__ico svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.fix h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1rem;font-weight:700;
  line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);
}
.fix p{
  margin:0;
  font-size:0.95rem;line-height:1.6;
  color:var(--slate);
}
/* The extra ten are only hidden once app.js marks the list collapsed, so
   with JavaScript off all sixteen render and stay crawlable either way. */
.fixes.is-collapsed .fix--more{display:none}

.fixes__more{display:flex;justify-content:center;margin-top:26px}
.fixes__more .btn{padding:11px 22px;font-size:0.95rem}
.fixes__more svg{width:16px;height:16px;transition:transform .22s ease}
.fixes__more .btn[aria-expanded="true"] svg{transform:rotate(180deg)}

@media (max-width:1080px){
  .fixes{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .fixes{grid-template-columns:1fr}
}

/* ================== STEPS (urgent fix page) ==================
   Needs its own top padding: it follows the hero directly, and the hero's
   84px bottom alone left the heading sitting on the band's edge. */
.steps-sec{padding:88px 0 112px;background:#fff}
/* Softly rounded tinted cards. No borders and no hairline panel: the tint
   and the radius do the containing, which keeps them friendly rather than
   boxed in. Same lavender-to-cream wash as the About panel on the homepage,
   so they belong to the same family. */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;
}
/* pulled closer to the heading so the block reads as one unit */
.steps-sec .sechead{margin-bottom:28px}
.step{
  padding:38px 30px 36px;
  border-radius:22px;
  background:linear-gradient(160deg,#f6f4ff 0%,#faf7ff 50%,#fff7f2 100%);
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(28,23,64,.13);
}
/* same dark purple gradient as the homepage service card icons, in a circle */
.step__ico{
  display:grid;place-items:center;
  width:48px;height:48px;margin-bottom:24px;
  border-radius:50%;
  background:linear-gradient(150deg,#2e2766,#1c1740);
  box-shadow:0 6px 16px rgba(28,23,64,.20);
  color:#fff;
}
.step__ico svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.step h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:1.12rem;font-weight:700;
  line-height:1.26;letter-spacing:-.02em;
  color:#1c1740;
}
.step p{
  margin:0;
  font-size:0.95rem;line-height:1.64;
  color:#4a4668;
}

/* the specifics under each step, separated by a hairline so the summary
   sentence still reads on its own for anyone skimming */
.step__list{
  display:grid;gap:9px;
  margin:18px 0 0;padding-top:16px;
  border-top:1px solid rgba(28,23,64,.11);
}
.step__list li{
  position:relative;
  padding-left:17px;
  font-size:0.88rem;line-height:1.5;
  color:#514c73;
}
.step__list li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--orange);
}

/* "any host to any host" panel under the migration steps */
.anyhost{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:38px;align-items:center;
  margin-top:22px;
  padding:32px 34px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.anyhost__copy h3{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:1.32rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
.anyhost__copy p{
  margin:0 0 11px;
  font-size:0.97rem;line-height:1.68;
  color:var(--slate);
}
.anyhost__copy p:last-child{margin-bottom:0}
.anyhost__list{
  display:flex;flex-wrap:wrap;gap:8px;
  align-content:center;
}
.anyhost__list li{
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#faf9fc;
  font-size:0.86rem;font-weight:600;
  color:var(--ink);
}
/* the point of the row is that the list is not exhaustive */
.anyhost__more{
  border-style:dashed !important;
  background:transparent !important;
  color:var(--slate) !important;
  font-weight:500 !important;
}

@media (max-width:900px){
  .anyhost{grid-template-columns:1fr;gap:26px;padding:28px 24px}
}

@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .steps-sec{padding-top:64px}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;gap:14px}
  .step{padding:30px 24px 28px;border-radius:18px}
  .steps-sec{padding:56px 0 88px}
}

/* billing toggle */
.billing{
  display:inline-flex;gap:4px;
  margin-top:30px;padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.billing__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;
  border-radius:999px;
  font-size:0.95rem;font-weight:700;
  color:rgba(255,255,255,.72);
  transition:background-color .18s ease,color .18s ease;
}
.billing__btn:hover{color:#fff}
.billing__btn.is-on{background:#fff;color:#241d52}
.billing__save{
  padding:3px 8px;border-radius:999px;
  background:var(--orange);color:#1a1005;
  font-size:0.78rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.billing__btn.is-on .billing__save{background:#fdece2;color:#b03e08}

/* plan grid. The cards lift out of the dark hero so the first thing on the
   page is the pricing itself rather than more introduction. */
.plans{background:#fff;padding:0 0 20px}
.plans__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:-54px;              /* overlaps the hero */
  position:relative;z-index:2;
}
.plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:28px 24px 26px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 34px rgba(13,21,38,.07);
}
.plan--featured{
  border-color:rgba(243,91,5,.45);
  box-shadow:0 18px 44px rgba(243,91,5,.14);
}
.plan__tag{
  position:absolute;top:-11px;left:24px;
  padding:4px 10px;border-radius:6px;
  background:var(--orange);color:#1a1005;
  font-size:0.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
}

/* One-off job. This is the card people reach for when something is broken
   right now, so it is the only one carrying urgency. Declared after .plan so
   the border wins, the way .plan--featured has to. */
.plan--urgent{
  border-color:rgba(243,91,5,.45);
  box-shadow:0 18px 44px rgba(243,91,5,.14);
}
.plan__tag--live{display:flex;align-items:center;gap:7px}

/* Ring expanding out of a solid dot. Both take their colour from the tag
   text, so the pulse can never end up invisible against the orange. */
.plan__pulse{
  position:relative;flex:none;
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
}
.plan__pulse::after{
  content:"";position:absolute;inset:0;
  border-radius:50%;background:currentColor;
  animation:planPulse 2.2s ease-out infinite;
}
@keyframes planPulse{
  0%  {transform:scale(1);opacity:.6}
  100%{transform:scale(3.2);opacity:0}
}

/* Hairline rules rather than a tinted panel, matching the rest of the site. */
.plan__start{
  margin:16px 0 0;padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:0.95rem;font-weight:700;line-height:1.4;
  color:var(--ink);
}
.plan__start svg{
  width:17px;height:17px;
  margin-right:7px;vertical-align:-3px;
  fill:var(--orange);
}
.plan__start span{
  display:block;margin-top:5px;
  font-size:0.88rem;font-weight:400;
  color:var(--slate);
}

@media (prefers-reduced-motion: reduce){
  .plan__pulse::after{animation:none}
}

.plan__name{
  margin:0;
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
.plan__note{
  margin:7px 0 0;min-height:2.9em;
  font-size:0.92rem;line-height:1.5;
  color:var(--slate);
}
.plan__cost{margin:18px 0 0}
.plan__price{
  display:block;
  font-family:var(--font-display);
  font-size:1.35rem;font-weight:700;
  letter-spacing:-.03em;
  color:var(--slate);
}
.plan__price b{
  font-size:2.5rem;font-weight:700;
  letter-spacing:-.045em;
  /* the negative tracking above pulls the first digit back onto the currency
     symbol, so the number buys itself a little room back */
  margin-left:3px;
  color:var(--ink);
}
.plan__unit{
  display:block;margin-top:5px;
  font-size:0.85rem;color:var(--slate);
}
.order-block__duo > .plan > .plan__cta{align-self:start}
.plan__cta{margin-top:18px;width:100%;text-align:center}
.plan__inherits{
  margin:22px 0 0;
  font-size:0.83rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);
}
/* align-content:start matters where the list is told to flex-grow: without
   it the grid stretches its own rows to fill the card and the ticks drift
   apart on whichever card has the fewest lines. */
.plan__feats{margin-top:14px;display:grid;gap:9px;align-content:start}
.plan__feats li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:0.93rem;line-height:1.45;
  color:var(--ink);
}
.plan__feats svg{
  flex:none;width:16px;height:16px;margin-top:2px;
  color:var(--orange-dark);
}
.plans__foot{
  margin:26px 0 0;
  font-size:0.92rem;color:var(--slate);
  text-align:center;
}
.plans__foot a{color:var(--orange-dark);font-weight:700}

/* Whitelabel site-count slider.
   The tiers live in the markup as an ordered list of data attributes, so the
   prices are readable without running any script. JavaScript adds .is-live to
   the card, which is the only thing that swaps the static band list for the
   working control, so a browser with no JS keeps a plain list of prices. */
.wslide{
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line);
}
.wslide__label{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:0.86rem;font-weight:700;color:var(--navy);
  margin-bottom:12px;
}
.wslide__off{
  font-size:0.76rem;font-weight:700;letter-spacing:0.02em;
  padding:4px 9px;border-radius:6px;
  background:#fff1e6;color:var(--orange-dark);white-space:nowrap;
}
.wslide__off--none{background:#eceef5;color:var(--slate)}

/* The band table. Visible by default, replaced by the control once JS runs,
   so a browser with no script still sees every rate for every plan. */
.wslide__bands{
  width:100%;border-collapse:collapse;
  font-size:0.84rem;color:var(--slate);
}
.wslide__bands caption{
  padding-bottom:8px;text-align:left;
  font-size:0.8rem;font-weight:700;color:var(--navy);
}
.wslide__bands th,.wslide__bands td{
  padding:6px 8px;text-align:right;
  border-bottom:1px solid var(--line);
}
.wslide__bands thead th{font-weight:700;color:var(--navy)}
.wslide__bands tbody th{text-align:left;font-weight:700;color:var(--navy)}
.plan.is-live .wslide__bands{display:none}

.wslide__control{display:none}
.plan.is-live .wslide__control{display:block}

.wslide__range{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:22px;
  background:transparent;cursor:pointer;margin:0;
}
.wslide__range:focus-visible{outline:2px solid var(--orange-dark);outline-offset:4px;border-radius:4px}
/* --fill is set by the script. The track is the same painted gradient in both
   engines, so the filled portion cannot drift between them. */
.wslide__range::-webkit-slider-runnable-track{
  height:8px;border-radius:99px;
  background:linear-gradient(90deg,
    var(--orange-dark) 0 var(--fill,0%), #e4e7f0 var(--fill,0%) 100%);
}
.wslide__range::-moz-range-track{
  height:8px;border-radius:99px;
  background:linear-gradient(90deg,
    var(--orange-dark) 0 var(--fill,0%), #e4e7f0 var(--fill,0%) 100%);
}
.wslide__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-7px;border-radius:50%;
  background:var(--orange-dark);border:3px solid #fff;
  box-shadow:0 2px 7px rgba(15,23,42,0.28);
}
.wslide__range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--orange-dark);border:3px solid #fff;
  box-shadow:0 2px 7px rgba(15,23,42,0.28);
}
/* Each label is centred on the thumb rather than spread edge to edge. The
   thumb never reaches the ends of the track: it travels between half a thumb
   in from each side, so evenly spaced labels drift out of line with it. The
   script sets --at per label to that same travel. */
.wslide__ticks{
  list-style:none;margin:6px 0 0;padding:0;
  position:relative;height:1.15em;
  font-size:0.76rem;font-weight:700;color:var(--slate);
}
.wslide__ticks li{
  position:absolute;top:0;left:var(--at,0);
  transform:translateX(-50%);white-space:nowrap;
  transition:color .15s ease;
}
.wslide__ticks li.is-on{color:var(--orange-dark)}
/* One row per plan: name, rate each, total for that many sites. Grid rather
   than flex so the three columns line up down the list. */
.wslide__out{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;gap:7px;
  font-size:0.86rem;color:var(--slate);
}
.wslide__out li{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:10px;
  padding:7px 10px;border-radius:8px;
  background:rgba(255,255,255,.6);
}
.wslide__plan{font-weight:700;color:var(--navy);min-width:62px}
.wslide__each b{color:var(--orange-dark);font-size:0.98rem}
.wslide__tot{text-align:right;white-space:nowrap;font-size:0.82rem}
@media (max-width:520px){
  .wslide__out li{grid-template-columns:auto 1fr;gap:4px 10px}
  .wslide__tot{grid-column:2;text-align:left}
}
/* the headline states the floor now that the slider prices three plans, so
   "from" belongs there whether the script runs or not */
.plan__from{color:var(--slate)}

@media (max-width:520px){
  .wslide__bands{grid-template-columns:minmax(0,1fr)}
}

/* FAQ */
.faqs{padding:0 0 112px;background:#fff}
.faqs__inner{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:52px;align-items:start;
  padding-top:80px;
  border-top:1px solid var(--line);
}
.faqs__head h2{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  font-weight:700;line-height:1.14;letter-spacing:-.03em;
  color:var(--ink);
}
.faqs__head h2 em{
  font-style:normal;
  background:linear-gradient(95deg,#e8520a 0%,#b03e08 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.faqs__head p{margin:0 0 18px;max-width:34ch;font-size:1.03rem;color:var(--slate)}

/* <details>, so it works with no JavaScript at all */
.faq{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;
  cursor:pointer;list-style:none;
  font-family:var(--font-display);
  font-size:1.13rem;font-weight:700;letter-spacing:-.015em;line-height:1.35;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{
  flex:none;width:18px;height:18px;color:var(--slate);
  transition:transform .22s ease;
}
.faq[open] summary svg{transform:rotate(180deg)}
.faq[open] summary{color:var(--orange-dark)}
.faq p{
  margin:0;padding:0 0 20px;max-width:64ch;
  font-size:0.97rem;line-height:1.66;color:var(--slate);
}

@media (max-width:1080px){
  .plans__grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .plan__note{min-height:0}
}
@media (max-width:900px){
  .phero{padding:150px 0 76px}
  .faqs__inner{grid-template-columns:1fr;gap:30px;padding-top:60px}
  .faqs{padding-bottom:88px}
}
@media (max-width:560px){
  .phero{padding:132px 0 66px}
  .plans__grid{grid-template-columns:1fr;margin-top:-40px}
  .billing{width:100%;justify-content:center}
}

/* ===================== SERVICES CARDS ===================== */
.services{padding:96px 0 104px;background:#fff}

/* 760px, not 640: at 2.75rem the heading measures 725px, so the old width
   would have broken it onto a second line with just "running." stranded */
.sechead{max-width:760px;margin:0 0 44px}
.sechead h2{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.85rem,3.6vw,2.75rem);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;      /* even line lengths if it does wrap on narrow screens */
}
.sechead p{margin:13px 0 0;max-width:56ch;font-size:1.05rem;color:var(--slate)}

/* One panel, 1px gaps. The panel's own background shows through the gaps as
   hairlines, so the four cards read as a single divided unit rather than
   four separate floating boxes - and there are no doubled borders. */
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.card{
  position:relative;
  display:flex;flex-direction:column;
  padding:30px 24px 26px;
  background:#fff;
  transition:background-color .16s ease;
}
.card:hover{background:#fcfbfd}

/* Featured cell: an orange ring and nothing else. Drawn as an inset shadow
   rather than a border so it adds no width and cannot nudge the grid.
   The radius matches the panel's inner curve (12px panel minus its 1px
   border) so the ring follows the rounded corner instead of being clipped
   flat by the panel's overflow:hidden. */
/* No ring: the Most popular flag on the artwork already marks this cell,
   and an outline round one cell fought the panel's hairline grid. The
   radius stays, since the panel's rounded corner still has to be followed. */
.card--featured{border-radius:11px 0 0 11px}
/* sits on the artwork, hard right, so it reads against the dark ground */
.card__flag{
  position:absolute;top:14px;right:14px;z-index:1;
  padding:5px 10px;border-radius:7px;
  background:var(--orange-dark);
  font-size:0.76rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}

/* Card artwork, one per service, same family as the blog heroes. Bled to
   the cell edges by cancelling the card's padding, so the image meets the
   hairline gaps between cells rather than floating inside a margin. */
.card__media{
  position:relative;display:block;
  width:calc(100% + 48px);margin:-30px -24px 30px;
}
.card__art{
  display:block;width:100%;
  height:auto;aspect-ratio:16 / 9;
  object-fit:cover;
  background:#1c1740;
}

/* footer row: price left, button right, sharing a baseline */
.card__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
/* nothing left to sit beside it now the price has moved onto the artwork */
.card__foot > .card__go:only-child{flex:1}

/* Price tag, sat on the bottom of the artwork. Keeping it out of the footer
   leaves the Learn more button spanning the row, and puts the number where
   the eye already is. */
.card__tag{
  position:absolute;left:14px;bottom:-17px;z-index:1;
  display:flex;align-items:baseline;gap:5px;
  padding:6px 12px;border-radius:8px;
  background:rgba(255,255,255,.94);
  box-shadow:0 4px 14px rgba(20,16,43,.28);
  white-space:nowrap;
}
.card__tag b{
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
.card__tag span{font-size:0.8rem;font-weight:600;color:var(--slate)}
.card__pricebox{display:block}
.card__q{
  display:block;
  font-size:0.8rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);
}
.card__price{
  display:block;margin-top:3px;
  font-family:var(--font-display);
  font-size:1.55rem;font-weight:700;
  letter-spacing:-.035em;line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.card__price i{
  display:block;margin-top:4px;
  font-style:normal;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:0.86rem;font-weight:400;
  letter-spacing:0;
  color:var(--slate);
}

/* raised above the Subscribe button's stretched ::after, or the overlay
   would sit on top of the title and swallow the click */
.card__title{
  position:relative;z-index:1;
  transition:color .16s ease;
}
.card__title:hover{color:var(--orange-dark)}
/* inline, so this grows the tap area to 44px and moves nothing */
.card__title{padding:12px 0}

.card h3{
  margin:0 0 7px;
  font-family:var(--font-display);
  font-size:1.06rem;font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--ink);
}
.card p{
  margin:0 0 20px;
  font-size:0.94rem;line-height:1.6;
  color:var(--slate);
  flex-grow:1;              /* lands every footer row on a common baseline */
}
/* Button, and the only link in the card. The ::after stretches over the
   whole cell so the card stays clickable without nesting an <a> in an <a>. */
.card__go{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:none;
  padding:9px 15px;
  border-radius:8px;
  background:#fdece2;
  color:#b03e08;                /* 5.16:1 on the soft fill */
  font-size:0.92rem;font-weight:700;
  white-space:nowrap;
  transition:background-color .16s ease,color .16s ease;
}
.card__go::after{content:"";position:absolute;inset:0}
.card__go svg{width:14px;height:14px;transition:transform .18s ease}
.card:hover .card__go{background:var(--orange);color:#1a1005}
.card:hover .card__go svg{transform:translateX(3px)}

@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  /* now the top-left cell: only that corner is rounded by the panel */
  .card--featured{border-radius:11px 0 0 0}
}

/* Response time, repeating the figure the comparison table publishes so a
   card can be read on its own. The dark Enterprise cell needs its own
   colours rather than the tinted pill the light cards use. */
.plan__sla{
  display:flex;align-items:center;gap:7px;
  margin:12px 0 0;padding:8px 11px;
  border-radius:8px;
  background:#fff1e6;
  font-size:0.84rem;color:#7a4a2c;
}
.plan__sla svg{flex:none;width:15px;height:15px;color:var(--orange-dark)}
.plan__sla b{color:var(--orange-dark);font-weight:700;white-space:nowrap}
.plan--dark .plan__sla{background:rgba(255,255,255,.09);color:#cfc9ea}
.plan--dark .plan__sla svg,
.plan--dark .plan__sla b{color:#ff8f4d}

/* margin-top:auto pins the link to the foot of the card, so it lands on
   one line across the row instead of wherever each list happens to end */
/* Closing line on the volume card. margin-top:auto pushes it down so the
   card's tall right column does not end in a block of empty tint. */
.plan__foot{
  margin:auto 0 0;padding-top:18px;
  font-size:0.86rem;line-height:1.55;color:var(--slate);
}
.plan--dark .plan__foot{color:#b7b0d8;border-top:1px solid rgba(255,255,255,.12)}

.plan__more{margin:16px 0 0;padding-top:2px;font-size:0.88rem}
.plans__grid .plan__more,
.order-block__grid .plan__more,
.order-block__duo .plan__more{margin-top:auto;padding-top:16px}
.plan__more a{color:var(--orange-dark);font-weight:700}

/* ==================== PLAN COMPARISON ====================
   Generated markup, see _build_table.py. Six columns will not fit a phone,
   so the table scrolls inside its own box rather than the page. The feature
   column stays stuck against that scroll, otherwise a row loses its meaning
   the moment you reach the last column. */
/* This one carries its own top padding. Every other section leans on the
   previous one's bottom padding, but .plans only has 20px there, which left
   the heading almost touching the note under the cards. */
.ptab-sec{padding:64px 0 104px;background:#fff}
.ptab__scroll{
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
  -webkit-overflow-scrolling:touch;
}
.ptab{
  width:100%;min-width:880px;
  border-collapse:collapse;
  font-size:0.93rem;
}
.ptab thead th{
  position:relative;z-index:3;
  padding:16px 12px;
  background:#faf9fd;
  border-bottom:1px solid var(--line);
  text-align:center;vertical-align:bottom;
}
.ptab__plan{
  display:block;
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
.ptab__cost{display:block;margin-top:3px;font-size:0.8rem;font-weight:600;color:var(--slate)}

.ptab tbody th{
  position:sticky;left:0;z-index:2;
  min-width:288px;
  padding:13px 18px;
  background:#fff;
  text-align:left;font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.ptab__feat{display:inline;vertical-align:middle}
/* relative, so the visually hidden label in each cell has a containing
   block inside the scroller. Left static it resolves against an ancestor
   outside it, escapes the clip, and drags the whole page sideways. */
.ptab td{
  position:relative;
  padding:13px 12px;
  text-align:center;
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
}
.ptab tbody tr:last-child th,
.ptab tbody tr:last-child td{border-bottom:0}
/* No nowrap: the server spec is long enough that holding it on one line
   would set the column width for the whole table. */
.ptab__val{
  display:inline-block;
  padding:4px 10px;border-radius:7px;
  background:#fff1e6;
  font-size:0.83rem;font-weight:700;line-height:1.35;
  color:var(--orange-dark);
}
.ptab__val--wide{max-width:150px}
/* filled, so a plan that gets an add-on for nothing does not read like a
   plan that has to pay for it */
.ptab__val--free{background:var(--orange-dark);color:#fff}

/* Group band. Dark rather than tinted, so the six sections read as sections
   at a glance instead of as slightly different rows. */
/* The band is painted on the inner span, not the cell. A gradient on a
   sticky cell inside a collapsed-border table does not paint reliably, and
   the white label was landing on white. */
.ptab__group th{
  position:sticky;left:0;z-index:2;
  padding:0;
  border-bottom:1px solid var(--line);
}
.ptab__group th span{
  display:block;
  padding:13px 18px;
  border-left:4px solid var(--orange);
  background:linear-gradient(100deg,#1c1740,#2e2766);
  font-family:var(--font-display);
  font-size:0.82rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:#fff;
}
.ptab__yes{width:19px;height:19px;color:var(--orange-dark)}
.ptab__no{width:19px;height:19px;color:#c9c6d8}
.ptab tbody tr:not(.ptab__group):hover th,
.ptab tbody tr:not(.ptab__group):hover td{background:#fcfbfe}
/* the open explanation has to clear the cells to its right, and the sticky
   cell is its own stacking context, so the cell itself has to come up too */
.ptab tbody th:hover,
.ptab tbody th:focus-within{z-index:6}

/* Explanations. Shown on hover and on keyboard focus, so the mark is not
   a mouse-only affordance. */
.ptab__i{
  position:relative;
  display:inline-flex;vertical-align:middle;
  margin-left:7px;
  width:16px;height:16px;
  color:#a9a4c2;cursor:help;
  transition:color .15s ease;
}
.ptab__i svg{width:16px;height:16px}
.ptab__i:hover,.ptab__i:focus-visible{color:var(--orange-dark)}
.ptab__tip{
  position:absolute;left:-10px;top:calc(100% + 9px);z-index:6;
  width:264px;max-width:60vw;
  padding:11px 13px;
  border-radius:10px;
  background:#1c1740;
  font-size:0.83rem;font-weight:400;line-height:1.5;
  letter-spacing:0;text-transform:none;
  color:#e7e4f5;
  box-shadow:0 10px 28px rgba(20,16,43,.32);
  opacity:0;visibility:hidden;
  transform:translateY(-3px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.ptab__tip::before{
  content:"";position:absolute;left:12px;top:-5px;
  width:10px;height:10px;
  background:#1c1740;
  transform:rotate(45deg);
}
.ptab__i:hover .ptab__tip,
.ptab__i:focus .ptab__tip,
.ptab__i:focus-within .ptab__tip{opacity:1;visibility:visible;transform:translateY(0)}
/* the last rows would push their explanation past the bottom of the box */
.ptab tbody tr:nth-last-child(-n+3) .ptab__tip{top:auto;bottom:calc(100% + 9px)}
.ptab tbody tr:nth-last-child(-n+3) .ptab__tip::before{top:auto;bottom:-5px}

@media (max-width:700px){
  .ptab{font-size:0.88rem;min-width:760px}
  .ptab tbody th{min-width:230px;padding:12px 14px}
  .ptab__group th span{padding:12px 14px}
  .ptab thead th{padding:13px 8px}
  .ptab td{padding:12px 8px}
  .ptab__tip{width:210px}
}

/* Gradient headings clip their own descenders: with background-clip:text the
   painted box stops at the font's baseline box, so the tail of a y or a g
   comes out flat. Padding on an inline element grows that box and moves no
   layout, which is exactly what is needed here. */
.hero h1 em,.phero h1 em,.prevent__copy h2 em,.faqs__head h2 em,.story__copy h2 em,.team__copy h2 em,.about__copy h2 em,.sechead h2 em{padding-bottom:0.14em}

.foot__reg{
  display:block;margin-top:6px;
  font-size:0.78rem;line-height:1.5;
  color:rgba(231,228,245,.5);
}

/* ========================== LEGAL ==========================
   Borrows the article grid, so the contents column sticks and the measure
   stays readable. Only the pieces an article does not have live here. */
.legal{padding:0 0 104px;background:#fff}
.legal .post__grid{padding-top:56px}
.legal__updated{
  margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:0.82rem;line-height:1.6;color:var(--slate);
}
.legal__updated b{color:var(--ink)}
.legal__sec + .legal__sec{
  margin-top:52px;padding-top:44px;
  border-top:1px solid var(--line);
}
.legal__body h2{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:1.72rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);
}
.legal__body h3{margin:32px 0 12px}
.legal__body > section > p:first-of-type{color:var(--slate)}

/* the response times, as a small table rather than another list */
.ltab-wrap{overflow-x:auto;margin:0 0 20px}
.ltab{width:100%;border-collapse:collapse;font-size:0.98rem}
.ltab th,.ltab td{
  padding:11px 14px;text-align:left;
  border-bottom:1px solid var(--line);
}
.ltab thead th{
  background:#faf9fd;
  font-family:var(--font-display);font-size:0.92rem;color:var(--ink);
}
.ltab tbody th{font-weight:700;color:var(--ink)}
.ltab tbody td{font-weight:700;color:var(--orange-dark)}
.ltab tbody tr:last-child th,.ltab tbody tr:last-child td{border-bottom:0}

/* ======================== INCLUDED ========================
   Eight items, so this stays a plain ticked list rather than eight more
   bordered cards. Two columns keeps each paragraph at a readable measure;
   four would squeeze them into narrow ribbons. */
.included{padding:0 0 112px;background:#fff}
.incl{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:34px 56px;
}
.incl__item{display:flex;gap:16px;align-items:flex-start}

/* Staggered reveal.
   The hidden state only applies once app.js has added .incl--anim, so with
   JS off or blocked the list simply renders as normal rather than staying
   invisible. Each item carries --i inline, which spaces the delays out. */
.incl--anim .incl__item{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease;
  transition-delay:calc(var(--i,0) * 80ms);
}
.incl--anim.is-in .incl__item{opacity:1;transform:none}

.incl--anim .incl__ico{
  transform:scale(.4) rotate(-25deg);
  /* overshoot easing so each icon pops rather than merely appearing */
  transition:transform .55s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i,0) * 80ms + 90ms);
}
.incl--anim.is-in .incl__ico{transform:none}

/* Continuous relay: each icon turns once, a second apart, so exactly one is
   moving at any moment and the motion travels down the list on a loop.
   Eight items x 1s of delay = an 8s cycle, which is why the duration and
   the spacing match. The turn itself occupies only ~12% of the cycle; the
   rest is deliberate stillness. */
@keyframes incl-turn{
  0%, 8%    {transform:rotateY(0deg)}
  22%       {transform:rotateY(360deg)}
  100%      {transform:rotateY(360deg)}
}
.incl--anim.is-in .incl__ico svg{
  animation:incl-turn 8s linear infinite;
  /* waits for the entrance stagger to finish, then offsets each icon by 1s */
  animation-delay:calc(1.3s + var(--i,0) * 1s);
}

.incl__ico{
  flex:none;
  display:grid;place-items:center;
  width:38px;height:38px;
  border-radius:50%;
  background:#fdece2;
  color:var(--orange-dark);
  perspective:220px;        /* gives the turn depth instead of a flat squash */
}
.incl__ico svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transform-style:preserve-3d;
  backface-visibility:visible;
}
.incl__item h3{
  margin:0 0 7px;
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:700;
  line-height:1.3;letter-spacing:-.02em;
  color:var(--ink);
}
.incl__item p{
  margin:0;
  font-size:0.95rem;line-height:1.66;
  color:var(--slate);
}

/* closing line under an .incl list, for the pages that use it to sell a plan */
.incl__foot{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:14px 26px;
  margin:46px 0 0;padding-top:32px;
  border-top:1px solid var(--line);
  text-align:center;
}
.incl__foot span{
  font-size:1rem;line-height:1.6;
  color:var(--slate);
}
.incl__foot b{color:var(--ink)}
.incl__foot .btn{flex:none}

@media (max-width:900px){
  .incl{grid-template-columns:1fr;gap:28px}
  .included{padding-bottom:88px}
}

/* ================= STORY (about page) ================= */
.story{padding:88px 0 112px;background:#fff}
.story__inner{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:56px;align-items:center;
}
.story__copy h2{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  font-weight:700;line-height:1.14;letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
.story__copy h2 em{
  font-style:normal;
  background:linear-gradient(95deg,#e8520a 0%,#b03e08 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.story__copy p{
  margin:0 0 15px;max-width:58ch;
  font-size:1.02rem;line-height:1.68;
  color:var(--slate);
}

/* ================= CREED (about page) =================
   Replaces a stats row that repeated the homepage figures. A single
   statement carries more on an about page than numbers the visitor has
   already seen, and gives the page one moment of scale. */
.creed{padding:0 0 112px;background:#fff}
.creed__panel{
  position:relative;
  padding:56px 60px 50px;
  border-radius:20px;
  text-align:center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255,138,70,.14) 0%, rgba(255,138,70,0) 62%),
    linear-gradient(150deg,#2e2766 0%,#1c1740 58%,#16112f 100%);
  color:#fff;
}
.creed__label{
  margin:0 0 20px;
  font-size:0.78rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:#ffb27d;
}
.creed__quote{
  margin:0 auto;max-width:26ch;
  font-family:var(--font-display);
  font-size:clamp(1.45rem,3.1vw,2.15rem);
  font-weight:700;line-height:1.24;letter-spacing:-.028em;
  text-wrap:balance;
}
.creed__mark{color:var(--orange-lit,#ff8f4d)}
.creed__foot{
  margin:22px auto 0;max-width:52ch;
  font-size:0.95rem;line-height:1.6;
  color:#b3aae8;
}

@media (max-width:760px){
  .creed{padding-bottom:88px}
  .creed__panel{padding:38px 26px 34px;border-radius:16px}
}

/* ============== SERVICE GRID (about page) ==============
   The about page is the natural hub, so every service gets a real link
   from here with its own name as the anchor text. */
.svcs{padding:0 0 112px;background:#fff}
.trust{padding:0 0 112px;background:#fff}

/* plugins and builders we work in */
.stack{padding:0 0 112px;background:#fff}

/* blog categories. Reuses the .svc card; only the grid differs, because the
   .svcs__grid nth-child rules are built for a five card layout. */
.cats{padding:0 0 112px;background:#fff}

/* ============ blog index and category archives ============ */
/* ===================== contact ===================== */
.phero--tight{padding-bottom:70px}
.reach{padding:0 0 112px;background:#fff}
.reach > .wrap{max-width:1380px}

/* the urgent route, above the form on purpose */
/* The only action in the urgent panel now the number has come off, so it
   gets more weight than an ordinary button: bigger, and a pulse ring that
   reads as "somebody is on the other end of this". */
.btn--chat{
  position:relative;
  padding:14px 28px;font-size:1.02rem;
}
.btn--chat::before{
  content:"";
  position:absolute;left:-5px;top:-5px;right:-5px;bottom:-5px;
  border-radius:12px;
  border:2px solid var(--orange);
  opacity:0;
  animation:chatRing 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes chatRing{
  0%   {transform:scale(0.98);opacity:0.55}
  70%  {transform:scale(1.06);opacity:0}
  100% {opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .btn--chat::before{animation:none;opacity:0.4}
}

.reach__now{
  display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;
  margin:-46px 0 46px;
  padding:22px 26px;
  border:1px solid rgba(243,91,5,.4);
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 44px rgba(243,91,5,.13);
}
.reach__now p{margin:0;flex:1 1 380px;font-size:1rem;line-height:1.6;color:var(--slate)}
.reach__now strong{color:var(--ink)}
.reach__now-actions{display:flex;flex-wrap:wrap;gap:10px}
.reach__pulse{
  position:relative;flex:none;
  width:9px;height:9px;border-radius:50%;
  background:var(--orange);
}
.reach__pulse::after{
  content:"";position:absolute;inset:0;
  border-radius:50%;background:var(--orange);
  animation:planPulse 2.2s ease-out infinite;
}

.reach__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:44px;align-items:start}
.reach__form h2,.reach__card h2{
  margin:0;
  font-family:var(--font-display);
  font-size:1.6rem;font-weight:700;letter-spacing:-.025em;color:var(--ink);
}
.reach__sub{margin:12px 0 26px;max-width:54ch;font-size:1rem;line-height:1.65;color:var(--slate)}

/* form */
.cform{display:grid;gap:18px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cfield{display:grid;gap:7px}
.cfield > span{font-size:0.92rem;font-weight:600;color:var(--ink)}
.cfield > span i{font-style:normal;font-weight:500;color:var(--slate)}
.cfield input,.cfield select,.cfield textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font:inherit;font-size:1rem;
  color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.cfield textarea{resize:vertical;min-height:130px;line-height:1.6}
.cfield select{
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 7.5 10 13l5.5-5.5' fill='none' stroke='%234a5769' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px;
}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(243,91,5,.16);
}
/* only flag a field once it has actually been submitted or left in a bad state */
.cform.is-checked :invalid{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.13)}

.cform__send{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:4px}
.cform__note{margin:0;flex:1 1 240px;font-size:0.88rem;line-height:1.55;color:var(--slate)}
.cform__status{
  margin:0;padding:13px 15px;
  border-radius:10px;
  font-size:0.94rem;line-height:1.55;
  display:none;
}
.cform__status.is-on{display:block;background:#fdece2;color:#b03e08}

/* side column */
.reach__side{display:grid;gap:18px}
.reach__card{
  padding:26px 24px 24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.reach__card--quiet{background:#faf9fc}
.reach__card--quiet p{margin:12px 0 0;font-size:0.95rem;line-height:1.65;color:var(--slate)}
.reach__list{display:grid;gap:20px;margin:20px 0 0}
.reach__list li{display:flex;gap:13px;align-items:flex-start}
.reach__ico{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;
  border-radius:10px;
  background:#f1eefb;
}
.reach__ico svg{
  width:19px;height:19px;
  fill:none;stroke:#2e2766;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* the icon lines up with the first line of the label, not the middle of the
   whole two line block */
.reach__list li{align-items:flex-start}
.reach__ico{margin-top:1px}
.reach__list a{
  display:block;
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);
}
.reach__list a:hover{color:#b03e08}
.reach__list span{display:block;margin-top:3px;font-size:0.88rem;line-height:1.5;color:var(--slate)}
.reach__link{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:16px;padding:10px 0;
  font-size:0.94rem;font-weight:600;color:#b03e08;
}
.reach__link svg{width:15px;height:15px}

@media (max-width:1000px){
  .reach__grid{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media (max-width:560px){
  .cform__row{grid-template-columns:1fr}
  .reach__now{margin-top:-34px;padding:20px}
}

.parchive{padding:150px 0 112px;background:#fff}
.parchive--index{padding-top:0}
.parchive > .wrap,.post > .wrap{max-width:1380px}
.parchive__head{max-width:52rem;margin-bottom:30px}
.parchive__head h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.8rem);font-weight:700;
  line-height:1.1;letter-spacing:-.035em;color:var(--ink);
}
.parchive__head p{
  margin:14px 0 0;max-width:56ch;
  font-size:1.05rem;line-height:1.65;color:var(--slate);
}

/* category filter row */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:38px}
.chips .chip{
  display:inline-flex;align-items:center;
  padding:9px 15px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;
  font-size:0.92rem;font-weight:600;color:#333d4e;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.chips .chip:hover{border-color:#c9c2e6;background:#faf9fc;color:var(--ink)}
.chips .chip.is-on{background:#2e2766;border-color:#2e2766;color:#fff}

/* article cards */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:16px;
  background:#fff;overflow:hidden;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease;
}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(13,21,38,.10)}
.pcard__shot{display:block;background:#1c1740}
.pcard__shot img{display:block;width:100%;height:auto}
.pcard__cat{
  margin:20px 22px 0;
  font-size:0.76rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#b03e08;
}
.pcard strong{
  display:block;margin:9px 22px 0;
  font-family:var(--font-display);
  font-size:1.14rem;font-weight:700;line-height:1.3;letter-spacing:-.02em;
  color:var(--ink);
}
.pcard__ex{
  display:block;margin:9px 22px 0;flex-grow:1;
  font-size:0.94rem;line-height:1.6;color:var(--slate);
}
.pcard__meta{
  display:block;margin:16px 22px 20px;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:0.86rem;font-weight:600;color:var(--slate);
}
.pgrid__empty{
  margin:0;padding:34px 0 0;
  font-size:1rem;color:var(--slate);
}

@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr;gap:18px}
  .parchive{padding-top:126px}
}

/* ===================== blog article ===================== */
.post{padding:132px 0 112px;background:#fff}
/* The article runs to the same width as the floating nav island above it,
   rather than the 1200px content wrap the rest of the site uses. */
.post > .wrap{max-width:1380px}

/* breadcrumb: blog / category / article */
.crumbs{margin-bottom:26px}
/* An ol arrives with a 1em block margin and a 40px inline padding. Both had
   to go: the margin dropped the breadcrumb below the panel beside it, and the
   padding indented it 40px from the title underneath. */
.crumbs ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:0;list-style:none;
}
.crumbs li{display:flex;align-items:center;gap:8px;font-size:0.88rem}
.crumbs li + li::before{content:"/";color:#b8bfcb}
.crumbs a{color:var(--slate);transition:color .15s ease}
.crumbs a:hover{color:#b03e08}
.crumbs span{
  color:var(--ink);font-weight:600;
  max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* the article column: breadcrumb, title and body all share one measure */
.post__main{min-width:0;max-width:47rem}
.post__head{margin-bottom:32px}
/* Capped by height rather than stretched to the full 1380. The source art is
   1024px wide, so filling the page would upscale it, and an illustration with
   type in it cannot be cropped to a banner shape without losing the words. */
.post__hero{margin:0 0 46px}
.post__hero img{
  display:block;
  width:100%;height:auto;
  border-radius:18px;
  background:#1c1740;
}
.post__fig{margin:6px 0 24px}
.post__fig img{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:12px;
  background:#faf9fc;
}
.post__head h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.9rem);font-weight:700;
  line-height:1.1;letter-spacing:-.035em;
  color:var(--ink);
}
.post__meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin:18px 0 0;
  font-size:0.9rem;color:var(--slate);
}
.post__meta span{display:flex;align-items:center;gap:8px}
.post__meta span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:#c6cdd8}

/* contents on the left, article on the right */
.post__grid{
  display:grid;grid-template-columns:272px minmax(0,1fr);
  gap:64px;
  /* the aside must stretch the full row, otherwise it ends where its own
     content ends and the sticky panel has nothing left to stick inside */
  align-items:stretch;
}
.toc__inner{
  position:sticky;top:104px;
  padding:22px 20px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#faf9fc;
}
.toc__title{
  margin:0 0 12px;
  font-size:0.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);
}
/* same defaults again; the numbers here come from the counter, not the
   list marker, so the native one is turned off */
.toc__list{counter-reset:toc;display:grid;gap:2px;margin:0;padding:0;list-style:none}
.toc__list li{counter-increment:toc}
.toc__list a{
  display:block;padding:7px 9px;
  border-radius:7px;
  font-size:0.89rem;line-height:1.45;
  color:#333d4e;
  transition:background-color .15s ease,color .15s ease;
}
.toc__list a::before{content:counter(toc) ". ";color:#a9b2c0;font-weight:600}
.toc__list a:hover{background:#fff;color:var(--ink)}
.toc__list a.is-here{background:#fdece2;color:#b03e08;font-weight:600}
.toc__list a.is-here::before{color:#b03e08}
.toc__cta{padding:10px 0;
  display:flex;align-items:center;gap:7px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
  font-size:0.86rem;font-weight:600;color:#b03e08;
}
.toc__cta svg{width:15px;height:15px;flex:none}

/* article typography */
/* min-width:0 matters: without it the wide table inside sets this grid
   item's min-content, which widens the whole track and pushes the page
   sideways on narrow screens. */
/* A long function name or URL with nowhere to break pushed the page
   sideways at 320px. Breaking inside a word is ugly, so it is only allowed
   where a word genuinely cannot fit on its own line. */
.post__body{
  font-size:1.05rem;line-height:1.75;color:#3d4756;
  overflow-wrap:break-word;
}
.post__body code,.post__body pre{overflow-wrap:anywhere}
/* A pattern like https:\/\/oldsite\.com\/category\/(.*) has no break
   opportunity in it, so break-word leaves it whole and it runs off the
   screen. Nested list items are where those examples live. */
.post__body li{overflow-wrap:anywhere}
.post__lede{font-size:1.18rem;line-height:1.65;color:var(--ink);font-weight:500}
.post__body > p{margin:0 0 20px}
.post__body h2{
  margin:44px 0 16px;
  scroll-margin-top:118px;
  font-family:var(--font-display);
  font-size:1.7rem;font-weight:700;line-height:1.2;letter-spacing:-.025em;
  color:var(--ink);
}
.post__body h3{
  margin:30px 0 10px;
  font-family:var(--font-display);
  font-size:1.16rem;font-weight:700;line-height:1.3;letter-spacing:-.015em;
  color:var(--ink);
}
.post__body ul,.post__body ol{margin:0 0 20px;padding-left:4px;display:grid;gap:9px;list-style:none}
.post__body li{position:relative;padding-left:26px}
.post__body ul li::before{
  content:"";position:absolute;left:6px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--orange);
}
.post__body ol{counter-reset:step}
.post__body ol li{counter-increment:step}
.post__body ol li::before{
  content:counter(step);
  position:absolute;left:0;top:2px;
  width:19px;height:19px;border-radius:50%;
  background:#f1eefb;color:#2e2766;
  font-size:0.72rem;font-weight:700;line-height:19px;text-align:center;
}
.post__body a{color:#b03e08;text-decoration:underline;text-underline-offset:2px}
.post__body a:hover{color:var(--orange-dark)}
.post__body strong{color:var(--ink);font-weight:700}

.post__table{overflow-x:auto;margin:0 0 24px}
.post__table table{border-collapse:collapse;width:100%;min-width:520px;font-size:0.94rem}
.post__table th,.post__table td{
  padding:11px 14px;
  border:1px solid var(--line);
  text-align:left;vertical-align:top;
}
.post__table th{background:#faf9fc;color:var(--ink);font-weight:700}
.post__table td[rowspan]{background:#faf9fc;font-weight:700;color:var(--ink)}

.post__faqs{margin-top:8px}

@media (max-width:1000px){
  .post__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  /* stacked, the contents belong under the title, not above it */
  .post__main{max-width:none;order:-1}
  .toc__inner{position:static;margin-top:0}
  .toc__list{grid-template-columns:1fr 1fr;display:grid}
}
@media (max-width:640px){
  .post{padding-top:126px}
  .post__hero{margin-bottom:30px}
  .post__hero img{max-height:none;border-radius:12px}
  .toc__list{grid-template-columns:1fr}
  .crumbs span{max-width:24ch}
  .post__body{font-size:1rem}
}
.cats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
@media (max-width:1080px){
  .cats__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .cats__grid{grid-template-columns:1fr}
}
.stack__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.stack__group{
  padding:22px 22px 24px;
  background:#fff;
}
.stack__group h3{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:0.98rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);
}
.stack__tags{display:flex;flex-wrap:wrap;gap:7px}
.stack__tags li{
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#faf9fc;
  font-size:0.83rem;font-weight:600;
  color:#333d4e;
}
.stack__foot{
  max-width:74ch;
  margin:30px auto 0;
  padding-top:26px;
  border-top:1px solid var(--line);
  font-size:0.97rem;line-height:1.68;
  color:var(--slate);
  text-align:center;
}

@media (max-width:1080px){
  .stack__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .stack__grid{grid-template-columns:1fr}
}
/* Six columns so five cards can sit two-up then three-up inside one panel:
   the top pair span three each, the bottom trio span two each. Both rows
   stay flush, and the hairline gaps run unbroken across the join. */
.svcs__grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.svcs__grid .svc:nth-child(-n+2){grid-column:span 3}
.svcs__grid .svc:nth-child(n+3){grid-column:span 2}

/* .svcs carries no top padding because on the about page it follows a section
   that already ends in 92px. Directly under a hero it needs its own, matching
   the 88px every other page opens with. */
/* Sections are written assuming another section sits above them, so most
   carry no top padding at all. Directly under a hero that leaves the
   heading on the first pixel of white. .plans is the deliberate exception:
   its cards ride up into the hero band on a negative margin. */
.phero + section:not(.plans){padding-top:88px}

/* Four-card variant. The default grid is built for five (two wide, three
   narrow); with four, the second row would only fill four of six columns and
   leave a hole, so this splits it two and two. */
.svcs--duo .svcs__grid .svc:nth-child(n){grid-column:span 3}

/* why partners choose us: credentials, kept deliberately terse so it does not
   overlap the pain list further down the page */
.creds{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:20px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.creds li{
  padding:22px 22px 20px;
  background:#fff;
}
.creds b{
  display:block;margin-bottom:7px;
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
.creds span{
  display:block;
  font-size:0.9rem;line-height:1.55;
  color:var(--slate);
}

@media (max-width:900px){
  .creds{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .creds{grid-template-columns:1fr}
}
.svc{
  position:relative;
  display:flex;flex-direction:column;
  padding:26px 24px 24px;
  background:#fff;
  transition:background-color .16s ease;
}
.svc:hover{background:#fcfbfd}

/* the panel clips its cells, so the tag sits inside the cell rather than
   overhanging the edge as it does on the pricing cards */
.svc--popular{background:#fffaf6}
.svc--popular:hover{background:#fff6ef}
.svc__tag{
  position:absolute;top:16px;right:16px;
  padding:4px 9px;
  border-radius:5px;
  background:var(--orange);
  color:#1a1005;
  font-size:0.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
}
.svc__ico{
  display:grid;place-items:center;
  width:38px;height:38px;margin-bottom:16px;
  border-radius:10px;
  background:linear-gradient(150deg,#2e2766,#1c1740);
  color:#fff;
}
.svc__ico svg{
  width:19px;height:19px;
  fill:none;stroke:#fff;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.svc h3{
  margin:0 0 7px;
  font-family:var(--font-display);
  font-size:1.06rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);
}
.svc p{
  margin:0 0 16px;
  font-size:0.92rem;line-height:1.6;
  color:var(--slate);
  flex-grow:1;
}
.svc__go{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.89rem;font-weight:700;
  color:var(--orange-dark);
}
.svc__go svg{width:15px;height:15px;transition:transform .18s ease}
.svc:hover .svc__go svg{transform:translateX(3px)}

@media (max-width:1000px){
  /* the spans have to be reset, or the cards keep their 6-column widths */
  .svcs__grid{grid-template-columns:repeat(2,1fr)}
  .svcs__grid .svc:nth-child(-n+2),
  .svcs__grid .svc:nth-child(n+3){grid-column:span 1}
}
@media (max-width:900px){
  .story__inner{grid-template-columns:1fr;gap:34px}
  .story{padding:64px 0 88px}
  .svcs{padding-bottom:88px}
}
@media (max-width:620px){
  .svcs__grid{grid-template-columns:1fr}
}

/* ================= TEAM (urgent page) =================
   Copy left, credentials right on hairlines. Deliberately unboxed: the
   sections either side of it are a tinted band and a tinted panel, so a
   third contained block would leave the page with nowhere to breathe. */
.team{padding:0 0 112px;background:#fff}
.team__inner{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:start;
}
.team__copy h2{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:700;line-height:1.14;letter-spacing:-.03em;
  color:var(--ink);
  text-wrap:balance;
}
.team__copy h2 em{
  font-style:normal;
  background:linear-gradient(95deg,#e8520a 0%,#b03e08 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.team__copy p{
  margin:0 0 15px;max-width:54ch;
  font-size:1.03rem;line-height:1.66;
  color:var(--slate);
}

/* two-up under the copy now, rather than a column beside it */
.team__points{
  display:grid;grid-template-columns:1fr 1fr;
  gap:22px 28px;
  margin:26px 0 24px;
}
.team__points li{
  display:grid;grid-template-columns:34px 1fr;
  column-gap:13px;
}
.team__ico{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:9px;
  background:#fdece2;
  color:var(--orange-dark);
}
.team__ico svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.team__points h3{
  margin:0 0 3px;
  font-family:var(--font-display);
  font-size:0.97rem;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);
}
.team__points p{
  margin:0;
  font-size:0.89rem;line-height:1.5;
  color:var(--slate);
}

/* ---- video with cards floating around it ---- */
.team__media{position:relative}
.team__video{
  position:relative;
  isolation:isolate;
  border-radius:20px;
  overflow:hidden;
  transform:translateZ(0);        /* forces the radius to clip the video */
  background:#1c1740;
  box-shadow:0 18px 44px rgba(28,23,64,.24);
  line-height:0;
}
.team__video video{
  display:block;
  width:100%;height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:inherit;
  transform:scale(1.012);         /* trims stray edge pixels */
}

.tcard{
  position:absolute;z-index:2;
  display:flex;align-items:center;gap:11px;
  padding:11px 15px;
  border-radius:13px;
  background:#fff;
  box-shadow:0 12px 30px rgba(28,23,64,.18);
  white-space:nowrap;
}
.tcard__ico{
  flex:none;
  display:grid;place-items:center;
  width:32px;height:32px;
  border-radius:9px;
  background:linear-gradient(150deg,#2e2766,#1c1740);
  color:#fff;
}
.tcard__ico svg{
  width:18px;height:18px;
  fill:none;stroke:#fff;              /* explicit, not inherited */
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.tcard b{
  display:block;
  font-family:var(--font-display);
  font-size:0.9rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);
}
/* The icon tile is itself a <span>, so a bare `.tcard span` rule (one class
   plus a type = higher specificity than .tcard__ico) was overriding its
   white colour with grey, and the icon strokes inherit currentColor.
   Scoped to the label span only. */
.tcard > div span{font-size:0.85rem;color:var(--slate)}

/* pinned to three different edges so they read as floating over the video */
.tcard--tl{top:9%;left:-9%}
.tcard--mr{top:46%;right:-11%}
.tcard--bl{bottom:9%;left:-5%}

/* The floating cards hang outside the video on wide screens. Below this the
   page is no longer wide enough to absorb the overhang, and the right hand
   card pushed the document sideways. Tuck them in before that happens. */
@media (max-width:1290px){
  .tcard--tl{left:-2%}
  .tcard--mr{right:-2%}
  .tcard--bl{left:0}
}
@media (max-width:900px){
  .team__inner{grid-template-columns:1fr;gap:34px}
  .team{padding-bottom:88px}
  /* stacked: floating cards would sit off the edge, so they become a row */
  .tcard{position:static;white-space:normal}
  .team__media{display:grid;gap:12px}
  .team__video{order:-1}
}
@media (max-width:560px){
  .team__points{grid-template-columns:1fr;gap:18px}
}

/* ========================= ABOUT ========================= */
.about{padding:0 0 112px;background:#fff}

/* One tinted panel carrying both brand colours at low saturation: lavender
   from the purple, warm cream from the orange. Keeps the section colourful
   without adding a fourth full-width dark band to the page. */
.about__inner{
  display:grid;grid-template-columns:1.3fr .9fr;
  gap:48px;align-items:center;
  padding:52px 48px;
  border-radius:20px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,138,70,.12) 0%, rgba(255,138,70,0) 55%),
    linear-gradient(135deg,#f4f2ff 0%,#f9f6ff 45%,#fff7f2 100%);
  border:1px solid #e8e4f5;
}
.about__eyebrow{
  margin:0 0 12px;
  font-size:0.86rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-dark);
}
.about__copy h2{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.2vw,2.4rem);
  font-weight:700;line-height:1.14;letter-spacing:-.03em;
  color:#1c1740;
  text-wrap:balance;
}
/* orange highlight word, shared by the About and Testimonials headings */
.about__copy h2 em,
.sechead h2 em{
  font-style:normal;
  background:linear-gradient(95deg,#e8520a 0%,#b03e08 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.about__copy p{
  margin:0 0 15px;max-width:56ch;
  font-size:1.03rem;line-height:1.66;
  color:#4a4668;
}
.about__link{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:8px;padding:10px 0;          /* a thumb sized hit area */
  font-size:0.95rem;font-weight:700;
  color:var(--orange-dark);
}
.about__link svg{width:15px;height:15px;transition:transform .18s ease}
.about__link:hover svg{transform:translateX(3px)}

/* artwork panel. Same family as the blog heroes, square rather than a band.
   The tinted background matches the artwork's own top-left corner, so the
   frame is filled with the right colour before the SVG has loaded. */
.about__media{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#1c1740;
  box-shadow:0 18px 40px rgba(28,23,64,.22);
  line-height:0;
}
.about__art{
  display:block;
  width:100%;height:auto;
  aspect-ratio:1 / 1;
  border-radius:inherit;
}

@media (max-width:900px){
  .about__inner{grid-template-columns:1fr;gap:30px;padding:36px 24px;border-radius:16px}
  .about{padding:64px 0 88px}
}

/* ====================== TESTIMONIALS ======================
   A tinted band rather than another dark one: the page already has the
   purple hero, the prevention panel and the CTA, and a fourth dark block
   would weigh it down. This lifts the white cards off the background and
   breaks the long white run in the middle of every page. */
.reviews{
  padding:86px 0 112px;
  background:linear-gradient(180deg,#f6f4fb 0%,#f9f6fb 55%,#fdf8f5 100%);
}
.reviews__score{background:#fff}

/* Sections carry no top padding by default, relying on the previous one's
   bottom. That breaks against a coloured band, where the next section would
   start hard against the tint. One rule covers whatever follows it, on any
   page: About here, the included list on the homepage, the FAQ on pricing. */
.reviews + section{padding-top:88px}
/* the FAQ already opens with its own rule and inset, which would double up */
.reviews + .faqs .faqs__inner{padding-top:0;border-top:0}
.reviews__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap;
  max-width:none;
}
.reviews__score{
  display:grid;justify-items:end;gap:5px;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:10px;
  text-align:right;
  transition:border-color .16s ease;
}
.reviews__score:hover{border-color:var(--slate)}
.reviews__stars svg{display:block;width:104px;height:19px}
.reviews__figure{font-size:0.95rem;color:var(--slate)}
.reviews__figure b{
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:700;color:var(--ink);
}
.reviews__count{font-size:0.83rem;color:var(--slate)}

.reviews__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.review{
  display:flex;flex-direction:column;
  margin:0;padding:26px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.review blockquote{
  margin:0 0 20px;
  font-size:1rem;line-height:1.62;
  color:var(--ink);
  flex-grow:1;             /* attributions line up across the three */
}
.review blockquote::before{content:"\201C"}
.review blockquote::after{content:"\201D"}
.review figcaption{
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:0.89rem;
}
.review figcaption b{display:block;font-weight:700;color:var(--ink)}

/* same progressive-enhancement pattern as the fault list: the extra ten only
   hide once app.js marks the grid collapsed */
.reviews__grid.is-collapsed .review--more{display:none}
.reviews__more{display:flex;justify-content:center;margin-top:26px}
.reviews__more .btn{padding:11px 22px;font-size:0.95rem}
.reviews__more svg{width:16px;height:16px;transition:transform .22s ease}
.reviews__more .btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.review figcaption span{color:var(--slate)}

@media (max-width:1080px){
  .reviews__grid{grid-template-columns:1fr}
  .reviews{padding:64px 0 88px}
  .reviews + section{padding-top:64px}
}

/* ========================== STATS =========================
   Deliberately typographic rather than another coloured block: the page
   already runs purple hero, tinted about panel, purple CTA and purple
   footer, and a fifth filled band would flatten the rhythm. Scale does
   the work instead. */
.stats{padding:0 0 84px;background:#fff}

/* Dark panel so the figures carry. It sits above the CTA panel, which is
   also purple, but a clear white gap between two contained blocks reads as
   a deliberate pair rather than one continuous slab. */
.stats__row{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:0;
  padding:52px 30px;
  border-radius:20px;
  background:
    radial-gradient(80% 130% at 15% 0%, rgba(255,138,70,.14) 0%, rgba(255,138,70,0) 60%),
    linear-gradient(150deg,#2e2766 0%,#1c1740 58%,#16112f 100%);
  box-shadow:0 20px 46px rgba(28,23,64,.20);
}
/* even padding on every column, so the centred text sits on each column's
   true centre rather than being pulled by a trimmed first/last edge */
.stat{padding:0 26px;text-align:center}
.stat + .stat{border-left:1px solid rgba(255,255,255,.14)}

.stat__figure{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5.2vw,3.8rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.045em;
  /* lifted orange: the deep tone used on white would sink into the panel */
  background:linear-gradient(120deg,#ffb27d 0%,#ff8f4d 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.stat__figure span{
  -webkit-text-fill-color:initial;
  color:rgba(255,178,125,.55);   /* the plus sign sits back from the number */
}
.stat__label{
  margin:16px auto 0;
  max-width:30ch;
  font-size:0.97rem;line-height:1.55;
  color:#b3aae8;
  text-wrap:balance;
}

@media (max-width:900px){
  .stats{padding-bottom:64px}
  .stats__row{grid-template-columns:1fr;gap:28px;padding:36px 22px;border-radius:16px}
  .stat{padding:0;text-align:center}
  .stat + .stat{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:28px;
  }
  .stat__label{max-width:none}
}

/* ========================== CTA ==========================
   A contained panel on white rather than a full-bleed band: the footer
   directly below is also purple, and two edge-to-edge purple blocks would
   merge into one. The rounded inset keeps them reading as separate. */
.cta{padding:0 0 76px;background:#fff}
.cta__panel{
  position:relative;
  overflow:hidden;                /* keeps the streaks inside the radius */
  display:flex;align-items:center;justify-content:space-between;
  gap:34px;
  padding:34px 38px;
  border-radius:16px;
  background:linear-gradient(150deg,#2e2766 0%,#1c1740 58%,#14102b 100%);
  color:#fff;
}

/* Shooting stars.
   Each streak is a thin gradient bar, rotated so it travels on a diagonal
   and moved with translateX along its own rotated axis, which is what makes
   the tail trail behind the head. Delays are negative so every streak
   starts partway through its cycle and the field looks busy immediately
   rather than all firing together on load.
   Confined to the right-hand end and masked in, so nothing crosses the
   headline. */
.cta__stars{
  position:absolute;right:0;top:0;
  width:38%;height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  /* shorter fade-in, so the field reaches full strength sooner and sits
     over the buttons rather than trailing off before it gets there */
  -webkit-mask:linear-gradient(90deg, transparent 0%, #000 16%);
          mask:linear-gradient(90deg, transparent 0%, #000 16%);
}
.cta__stars i{
  position:absolute;
  height:1.5px;border-radius:2px;
  opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6));
  animation:ctaShoot 7s linear infinite;
  animation-delay:var(--d);
}
/* every other streak dimmer, so the field has depth instead of one flat layer */
.cta__stars i:nth-child(2n){
  background:linear-gradient(90deg, transparent, rgba(255,190,150,.32));
}
/* anchored from the right edge so the field sits over the buttons and stays
   there as the panel widens, which `left` offsets would not do */
.cta__stars i:nth-child(1){top:22%;right:40px; width:150px;--d:0s}
.cta__stars i:nth-child(2){top:48%;right:10px; width:105px;--d:-2.3s}
.cta__stars i:nth-child(3){top:12%;right:70px; width:175px;--d:-4.2s}
.cta__stars i:nth-child(4){top:62%;right:95px; width:90px; --d:-5.6s}
.cta__stars i:nth-child(5){top:4%; right:20px; width:130px;--d:-1.2s}
.cta__stars i:nth-child(6){top:34%;right:120px;width:95px; --d:-3.4s}
.cta__stars i:nth-child(7){top:72%;right:55px; width:145px;--d:-6.3s}
.cta__stars i:nth-child(8){top:88%;right:0;    width:85px; --d:-0.7s}
@keyframes ctaShoot{
  0%   {opacity:0;    transform:rotate(156deg) translateX(-130px)}
  16%  {opacity:.62}
  66%  {opacity:.62}
  100% {opacity:0;    transform:rotate(156deg) translateX(280px)}
}
@media (prefers-reduced-motion:reduce){
  .cta__stars i{animation:none;opacity:.5;transform:rotate(156deg)}
}

.cta__panel h2{
  position:relative;z-index:1;    /* copy sits above the streaks */
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  font-weight:700;line-height:1.2;letter-spacing:-.025em;
}
.cta__panel h2 em{
  font-style:normal;
  color:var(--orange-lit,#ff8f4d);   /* 5.8:1 on the panel */
}
.cta__actions{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:11px;
  flex:none;                          /* buttons keep their width */
}
.cta__actions .btn{padding:11px 22px;font-size:0.95rem}

/* ========================= FOOTER ========================= */
/* Same purple family as the hero, reversed so the darkest end is at the
   bottom of the page. Bookends the layout without repeating the hero. */
.foot{
  padding:72px 0 30px;
  background:linear-gradient(165deg,#2a2360 0%,#1c1740 46%,#14102b 100%);
  color:#fff;
}
.foot__top{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:48px;
}

/* the mark inside is display:block, so the link needs to be a block too
   for the padding to count toward the tap area */
.foot__brand > a{display:inline-block;padding:7px 0}
.foot__brand img{display:block;width:auto;height:34px}
.foot__brand p{
  margin:20px 0 0;max-width:34ch;
  font-size:0.95rem;line-height:1.65;
  color:#b3aae8;
}
.foot__phone{
  display:inline-block;margin-top:22px;
  font-family:var(--font-display);
  font-size:1.3rem;font-weight:700;letter-spacing:-.02em;
  color:#fff;
}
.foot__phone:hover{color:var(--orange-lit,#ff8f4d)}
.foot__hours{
  display:block;margin-top:5px;
  font-size:0.84rem;letter-spacing:.08em;text-transform:uppercase;
  color:#8f86c9;
}

.foot__col h2{
  margin:0 0 16px;
  font-family:var(--font-display);
  font-size:0.85rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:#fff;
}
.foot__col ul{display:grid;gap:11px}
.foot__col a{
  font-size:0.96rem;
  color:#b3aae8;
  transition:color .15s ease;
}
.foot__col a:hover{color:#fff}

.foot__bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.13);
}
.foot__bar p{font-size:0.9rem;color:#8f86c9}
.foot__rating{display:flex;align-items:center;gap:10px}
.foot__rating svg{width:90px;height:16px;flex:none}

/* mobile */
@media (max-width:1080px){
  .toggle{display:block}
  .actions{display:none}
  .logo img{height:30px}

  /* island flattens to a plain full-width bar */
  .header{padding:0}
  .header__inner{
    height:62px;
    padding:0 20px;
    border-radius:0;
    box-shadow:0 1px 0 rgba(13,21,38,.08);
  }

  .nav{
    display:none;
    position:absolute;left:0;right:0;top:62px;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin:0;
    padding:10px 16px 18px;
    background:#fff;
    box-shadow:0 12px 24px rgba(13,21,38,.10);
  }
  .nav.is-open{display:flex}
  .nav a,.nav__link{padding:12px;font-size:1rem}
  .nav__trigger{width:100%;justify-content:space-between}

  /* mega becomes an inline accordion, collapsed via grid-template-rows so
     it animates without needing a measured pixel height */
  .mega{
    position:static;
    opacity:1;visibility:visible;transform:none;
    border:0;border-radius:0;box-shadow:none;
    padding:0 0 0 8px;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .26s ease;
  }
  .has-mega.is-open .mega{grid-template-rows:1fr}
  .drop{
    position:static;
    width:auto;
    transform:none;
    opacity:1;visibility:visible;
    border:0;border-radius:0;box-shadow:none;
    padding:0 0 0 8px;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .26s ease;
  }
  .has-mega.is-open .drop{transform:none;grid-template-rows:1fr}
  .drop > *{min-height:0;overflow:hidden}
  .drop__link{padding:11px 12px}
  .drop__link span{display:none}
  .mega > *{min-height:0;overflow:hidden}
  .mega__grid{grid-template-columns:1fr;gap:0}
  .mega__link{padding:11px 12px !important}
  .mega__ico{display:none}
  .mega__desc{display:none}
  .mega__foot{display:none}

  .nav__actions{
    display:grid;gap:10px;
    margin-top:12px;padding-top:14px;
    border-top:1px solid var(--line);
  }
  .nav__actions .btn{text-align:center}

  /* header flattens to a 62px bar with no rail padding */
  .header{margin-bottom:-62px}
  .hero{padding:138px 0 84px}
  .services{padding:72px 0 80px}
  .sechead{margin-bottom:32px}
  .cta{padding-bottom:76px}
  .cta__panel{
    flex-direction:column;align-items:flex-start;
    gap:22px;
    padding:30px 24px;border-radius:14px;
  }

  .foot{padding:60px 0 26px}
  .foot__top{grid-template-columns:1fr 1fr;gap:36px 28px;padding-bottom:36px}
  .foot__brand{grid-column:1 / -1}
}

@media (max-width:560px){
  .hero{padding:126px 0 68px}
  .clients{margin-top:40px;padding-top:28px}
  .clients__row{gap:18px 30px}
  .clients__row img{max-height:30px;max-width:118px}
  .cards{grid-template-columns:1fr}
  /* single column: it is the top cell, so both top corners round */
  .card--featured{border-radius:11px 11px 0 0}
  .cta__panel{align-items:stretch}
  .cta__actions{flex-direction:column;align-items:stretch;width:100%}
  .cta__actions .btn{width:100%}
  .foot__top{grid-template-columns:1fr;gap:32px}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:12px}

  /* tail drops to its own line rather than squeezing the pill */
  .announce{font-size:0.87rem;padding:7px 13px 7px 8px;gap:8px}
  .announce__tail{display:block;margin-top:1px}

  .hero__cta{flex-direction:column;align-items:stretch;gap:18px}
  .hero__cta .btn{width:100%;text-align:center}

  /* stack and centre; dividers move to the top edge of each item */
  .proof{flex-direction:column;align-items:stretch;gap:0;margin-top:36px;text-align:center;max-width:320px}
  .proof li{
    align-items:center;
    padding:14px 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.16);
  }
  .proof li:first-child{border-top:0;padding-top:0}
  .proof__figure{font-size:1.15rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}