/* Self-hosted fonts (latin subset, variable woff2). Licences: /assets/fonts/OFL-*.txt */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-bec94a.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-bec94a.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-bec94a.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-b87346.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-b87346.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sora-latin-a3354b.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sora-latin-a3354b.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* Brand values: from brand-tokens.css (media kit). Change colours there, not here. */
  --ink:var(--wkv-ink); --teal:var(--wkv-teal); --violet:var(--wkv-violet); --slate:var(--wkv-slate);
  --mist:var(--wkv-mist); --paper:var(--wkv-paper); --line:var(--wkv-line); --line-dk:var(--wkv-line-dark);
  --amber:var(--wkv-degraded); --red:var(--wkv-down);
  --display:var(--wkv-font-display); --body:var(--wkv-font-body); --mono:var(--wkv-font-mono);
  --r:var(--wkv-radius);
  /* Website-only shades that extend the brand palette */
  --ink-2:#111A2E;        /* raised panels on ink */
  --ink-hover:#1A2439;
  --bg:#F6F8FC;           /* page background */
  --dim:#9AA8BF;          /* secondary text on ink */
  --dim-2:#7C8BA6;        /* labels on ink */
  --nav-link:#C7D3E6;
  --teal-hover:#00D9BC;
  --line-hover:#B9C7DC;
  --line-strong:#C4D1E4;
  --ph-text:#3E2FBF;      /* placeholder text on light */
  --ph-text-dk:#C9C2FF;   /* placeholder text on dark */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.022em;margin:0;line-height:1.12}
h2{font-size:clamp(28px,3.7vw,42px);font-weight:600}
h3{font-size:20px;font-weight:600;letter-spacing:-.012em;line-height:1.25}
h4{font-size:16px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 14px}
strong,b{font-weight:600}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
         text-transform:uppercase;color:var(--slate)}
.lede{font-size:18px;color:var(--slate);max-width:60ch}
.m{font-family:var(--mono)}
.ph{background:color-mix(in srgb,var(--violet) 12%,transparent);color:var(--ph-text);border-radius:4px;padding:0 5px;
    font-family:var(--mono);font-size:.9em;white-space:nowrap}
:is(.hero,.pagehead,.calc,.endcta,.plan.feature,footer,section.dark) .ph{background:color-mix(in srgb,var(--violet) 22%,transparent);color:var(--ph-text-dk)}
.btn.btn-primary .ph,section.dark .btn.btn-primary .ph{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}
section{padding:78px 0}
.head{margin-bottom:38px;display:flex;flex-direction:column;gap:12px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;
     font-size:15px;padding:13px 22px;border-radius:10px;text-decoration:none;border:1px solid transparent;
     cursor:pointer;transition:transform .12s ease,background .16s ease,border-color .16s ease}
.btn-primary{background:var(--teal);color:var(--ink)}
.btn-primary:hover{background:var(--teal-hover)}
.btn-ghost{border-color:color-mix(in srgb,var(--paper) 24%,transparent);color:var(--paper)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--ink-hover)}
.btn-line{border-color:var(--line);background:var(--paper);color:var(--ink)}
.btn-line:hover{border-color:var(--line-hover)}
.btn:active{transform:translateY(1px)}

/* ---------- nav ---------- */
body>nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--ink) 92%,transparent);
    backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line-dk)}
body>nav .bar{display:flex;align-items:center;gap:28px;height:70px}
body>nav .links{display:flex;gap:24px;margin-left:auto;align-items:center}
body>nav .links a{color:var(--nav-link);text-decoration:none;font-size:14.5px;font-weight:500}
body>nav .links a:hover{color:var(--teal)}
body>nav .links a.btn-primary,body>nav .links a.btn-primary:hover{color:var(--ink)}
/* ⚠️ The bar squeezed this button to its minimum and let the label wrap: "Talk to an engineer" rendered on TWO
   lines, 128px wide and 68px tall, inside a 70px bar — at every desktop width, not only the narrow ones. It
   read as a broken button rather than a tight one. One line, and no shrinking: a call to action that looks
   damaged is not one. */
body>nav .links a.btn{white-space:nowrap;flex:none}
body>nav .btn{padding:10px 17px;font-size:14px}
.navtoggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-dk);
           color:var(--paper);border-radius:8px;padding:8px 12px;font-family:var(--mono);font-size:12px;cursor:pointer}
/* ⚠️ 1180, NOT 940, AND THE NUMBER IS MEASURED RATHER THAN CHOSEN. The bar needs 1087px before it fits: the
   logo takes ~245 and .links takes 790 — six links at 299, the search at 171, "Log in" at 26, the CTA at 101,
   and eight 24px gaps at 192. Below 941 the menu button took over, so the desktop bar was on screen for the
   whole band from 941 to 1087 WITHOUT the room to draw itself: every page scrolled sideways by 63px at 1024,
   and the "Talk to an engineer" button wrapped to three lines and was clipped above the viewport.
   1024 is iPad landscape and a small laptop, so this was not an unusual width — it was simply one nothing
   measured, the gates running at 320/390 and axe at 1280, and axe does not measure overflow.
   Holding the CTA to one line (above) widens it from 128 to ~170, so the bar now needs ~1169. That number is
   measured at the boundary rather than estimated: 1161 still spilled 8px, 1181 is clean.
   The margin above that is deliberate: the bar's width is the sum of nine pieces of copy, and any of them
   getting longer should not put the overflow back. */
@media(max-width:1180px){
  body>nav .links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 20px;border-bottom:1px solid var(--line-dk)}
  body>nav .links.open{display:flex}
  body>nav .links a{padding:13px 0;border-bottom:1px solid var(--line-dk)}
  body>nav .links .btn{margin-top:14px;justify-content:center}
  .navtoggle{display:block}
}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);padding:74px 0 88px;overflow:hidden}
.hero .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:980px){.hero .cols{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:clamp(38px,5.6vw,62px);font-weight:600;max-width:15ch}
.hero .sub{color:var(--dim);font-size:19px;max-width:50ch;margin:22px 0 32px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .note{margin-top:26px;color:var(--dim-2);font-size:13.5px;font-family:var(--mono)}

/* ---------- signature: live call path ---------- */
.scope{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:18px;padding:22px}
.scope .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.scope .title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.scope svg.path{width:100%;height:auto;display:block;overflow:visible}
@media(max-width:520px){
  .scope svg.path text{font-size:15px;letter-spacing:.5px}
  .scope svg.path .hops{display:none}
}
.readout{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dk);
         border:1px solid var(--line-dk);border-radius:11px;overflow:hidden;margin-top:18px}
.readout div{background:var(--ink);padding:13px 12px}
.readout .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)}
.readout .v{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--paper);margin-top:5px}
.readout .v.good{color:var(--teal)}
@media(max-width:520px){.readout{grid-template-columns:repeat(2,1fr)}}

/* ---------- stats strip ---------- */
.strip{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-block:34px}
.strip .n{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.02em}
.strip .l{font-size:13.5px;color:var(--slate);margin-top:4px}
@media(max-width:760px){.strip .in{grid-template-columns:repeat(2,1fr);gap:22px}}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;
      display:flex;flex-direction:column;transition:border-color .16s ease,transform .16s ease}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card .ic{width:38px;height:38px;border-radius:10px;background:var(--mist);display:flex;
          align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7;
              stroke-linecap:round;stroke-linejoin:round}
.card p{font-size:14.8px;color:var(--slate);margin:10px 0 0}
.card .spec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
            font-family:var(--mono);font-size:11.5px;color:var(--slate);line-height:1.7}

/* dark full-width band */
section.dark{background:var(--ink);color:var(--paper)}
.card.dk{background:var(--ink-2);border-color:var(--line-dk);color:var(--paper)}
.card.dk:hover{border-color:var(--dim-2)}
.card.dk p{color:var(--dim)}

/* ---------- audience tabs ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.tab{font-family:var(--display);font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:999px;
     border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--slate);
     transition:all .16s ease}
.tab:hover{border-color:var(--line-hover);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
[hidden]{display:none!important}
.pane:not([hidden])+.pane:not([hidden]){margin-top:18px}
.pane .in{display:grid;grid-template-columns:1fr 1fr;gap:34px;background:var(--paper);
          border:1px solid var(--line);border-radius:18px;padding:32px}
@media(max-width:820px){.pane .in{grid-template-columns:1fr;gap:24px}}

ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding-left:22px;position:relative;margin-bottom:10px;font-size:15px}
ul.clean li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
                    border-radius:50%;background:var(--teal)}
ul.clean.dk li{color:var(--nav-link)}

/* ---------- calculator ---------- */
.calc{background:var(--ink);color:var(--paper);border-radius:20px;padding:36px;
      display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:880px){.calc{grid-template-columns:1fr;gap:28px;padding:26px}}
.calc h3{color:var(--paper);font-size:26px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
             text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.field input[type=range]{width:100%;accent-color:var(--teal)}
.field select,.field input:not([type=range]),.field textarea{width:100%;background:var(--ink-2);color:var(--paper);border:1px solid var(--line-dk);
              border-radius:9px;padding:12px 13px;font-family:var(--body);font-size:15px}
.calls{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--teal);margin-bottom:6px}
.out{background:var(--ink-2);border:1px solid var(--line-dk);border-radius:14px;padding:24px}
.out .row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;
          border-bottom:1px solid var(--line-dk)}
.out .row:last-child{border-bottom:0}
.out .row span:first-child{font-size:14px;color:var(--dim)}
.out .row span:last-child{font-family:var(--mono);font-size:17px;font-weight:500}
.out .big{font-family:var(--mono);font-size:34px;font-weight:500;color:var(--teal);letter-spacing:-.02em}
.verdict{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--dim);
         border-left:2px solid var(--teal);padding-left:14px}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:900px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:30px 26px 30px 0;border-top:2px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
              position:absolute;top:-2px;left:0;background:var(--paper);padding-right:12px;
              font-family:var(--mono);font-size:11px;color:var(--ink);
              transform:translateY(-50%);letter-spacing:.1em}
.step.done{border-top-color:var(--teal)}
.step h3{font-size:16px;letter-spacing:-.01em;margin:14px 0 8px}
.step p{font-size:14.5px;color:var(--slate);margin:0}
.step .when{font-family:var(--mono);font-size:11px;color:var(--slate);letter-spacing:.08em}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media(max-width:920px){.plans{grid-template-columns:1fr}}
.plan{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;
      display:flex;flex-direction:column}
.plan.feature{background:var(--ink);color:var(--paper);border-color:var(--ink);
              box-shadow:0 18px 44px -18px color-mix(in srgb,var(--ink) 50%,transparent)}
.plan.feature h3,.plan.feature .price{color:var(--paper)}
.plan.feature .who,.plan.feature .per{color:var(--dim)}
.plan .badge{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
             color:var(--slate);margin-bottom:12px}
.plan.feature .badge{color:var(--teal)}
.plan .who{font-size:14px;color:var(--slate);margin:8px 0 20px;min-height:42px}
.plan .price{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.03em}
.plan .per{font-size:13.5px;color:var(--slate);margin:4px 0 22px}
.plan ul.clean{margin-bottom:24px;flex:1}
.plan ul.clean li{font-size:14.5px}
.plan .btn{width:100%;justify-content:center}

/* ---------- table ---------- */
.tblwrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:600px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--slate);font-weight:500}
tbody tr:last-child td{border-bottom:0}
td.c{text-align:center;font-family:var(--mono);color:var(--slate)}
td.c.y{color:var(--ink);font-weight:600}

/* ---------- faq ---------- */
details{background:var(--paper);border:1px solid var(--line);border-radius:12px;
        padding:18px 20px;margin-bottom:10px}
details[open]{border-color:var(--line-strong)}
summary{font-family:var(--display);font-weight:600;font-size:16.5px;cursor:pointer;
        list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--ink);font-size:20px;flex:none}
details[open] summary::after{content:"\2212"}
details p{margin:14px 0 0;font-size:15px;color:var(--slate)}

/* ---------- cta + footer ---------- */
.endcta{background:var(--ink);color:var(--paper);border-radius:20px;padding:52px;
        display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.endcta h2{max-width:16ch}
.endcta>*{flex:1 1 320px}
@media(max-width:620px){.endcta{padding:30px 22px}}
.cform{max-width:480px}
.cform .field{margin-bottom:14px}
.cform .two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.cform .two{grid-template-columns:1fr}}
.cform textarea{resize:vertical;min-height:110px}
.formmsg{border-left:2px solid var(--teal);padding-left:14px;color:var(--paper);font-size:14.5px;margin:0 0 18px}
.formmsg.err{border-left-color:var(--amber)}
.formmsg ul{margin:6px 0 0;padding-left:18px}
.formmsg a{color:var(--paper)}
#form-errors:focus-visible{outline:2px solid var(--teal);outline-offset:6px}
.fielderr{color:var(--amber);font-size:13px;margin:6px 0 0}
.hp{position:absolute;left:-9999px}
.req{color:var(--teal)}

/* ---------- product pages ---------- */
.product-cols{display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:start}
@media(max-width:860px){.product-cols{grid-template-columns:1fr;gap:28px}}
.price-lg{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.03em;margin:10px 0 4px}
.other-products{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:40px;
                padding-top:22px;border-top:1px solid var(--line)}
.other-products a{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.card-link{text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0}  /* whole card is clickable */
.card:has(.card-link){position:relative}
.card:has(.card-link):hover h3{text-decoration:underline}

/* ---------- blog ---------- */
.post{max-width:760px}
.post .ph{white-space:normal}
.post h2{font-size:clamp(22px,2.6vw,28px);margin:44px 0 14px}
.post h2:first-child{margin-top:0}
.post p,.post li{font-size:16.5px;color:var(--ink)}
.grid.post{margin-top:48px}
.steps-list{padding-left:22px;margin:0}
.steps-list li{margin-bottom:12px;padding-left:6px}
.post-meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--slate);margin:18px 0 0}
.pagehead .post-meta{color:var(--dim-2)}
.author-card{margin-top:44px}

/* ---------- about ---------- */
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:16px 0 0;font-size:14.5px}
dl.facts dt{color:var(--slate)}
dl.facts dd{margin:0;overflow-wrap:anywhere}

/* ---------- proof ---------- */
.quote{margin:0}
.quote blockquote{margin:0 0 18px;font-family:var(--display);font-size:17px;line-height:1.45;flex:1}
.quote figcaption{font-size:14px;color:var(--slate)}
.card .ph{white-space:normal}  /* long placeholders wrap inside cards */
.logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.logos .ph{padding:10px 16px;border-radius:8px}

/* ---------- sub pages ---------- */
.pagehead{background:var(--ink);color:var(--paper);padding:64px 0 70px}
.pagehead h1{font-size:clamp(34px,5vw,52px);font-weight:600;max-width:18ch;margin-top:14px}
.pagehead .sub{color:var(--dim);font-size:18px;max-width:56ch;margin:18px 0 0}
/* Phones: plan comparison becomes one card per feature, each value labelled with its plan */
@media(max-width:620px){
  table.compare{min-width:0}
  table.compare thead{display:none}
  table.compare tr{display:block;padding:12px 16px;border-bottom:1px solid var(--line)}
  table.compare tbody tr:last-child{border-bottom:0}
  table.compare td{display:block;padding:3px 0;border:0;text-align:right}
  table.compare td:first-child{font-weight:600;padding-bottom:6px;text-align:left}
  table.compare td.c::before{float:left;margin-right:16px;font-family:var(--body);font-weight:400;color:var(--slate)}
  table.compare td:nth-child(2)::before{content:"Essential"}
  table.compare td:nth-child(3)::before{content:"Professional"}
  table.compare td:nth-child(4)::before{content:"Enterprise"}
}

footer{background:var(--ink);color:var(--dim);padding:58px 0 34px;margin-top:78px}
footer .fgrid img{margin-bottom:18px}
footer .tagline{font-family:var(--display);color:var(--paper);font-size:17px;font-weight:600;margin:0 0 8px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
footer h2{color:var(--paper);font-size:13px;margin-bottom:14px;font-family:var(--mono);font-weight:500;
          letter-spacing:.14em;text-transform:uppercase}
footer a{display:block;color:var(--dim);text-decoration:none;font-size:14.5px;margin-bottom:9px}
footer a:hover{color:var(--teal)}
.fbot{border-top:1px solid var(--line-dk);margin-top:42px;padding-top:24px;
      display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
:is(body>nav,.hero,.pagehead,.calc,.endcta,.plan.feature,footer,section.dark) :focus-visible{outline-color:var(--teal)}
.skip{position:absolute;left:-9999px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{left:24px;top:12px;z-index:99;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:8px}
@media(prefers-reduced-motion:reduce){
  .packet{display:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---------- utilities (were inline style="" attributes; !important keeps their old precedence) ---------- */
.band{background:var(--paper)!important;border-top:1px solid var(--line)!important}
.band-bottom{border-bottom:1px solid var(--line)!important}
.btn-row{display:flex!important;gap:12px!important;flex-wrap:wrap!important}
.c-dim{color:var(--dim)!important}
.c-paper{color:var(--paper)!important}
.c-slate{color:var(--slate)!important}
.c-teal{color:var(--teal)!important}
.card-row{flex-direction:row!important;align-items:center!important;gap:24px!important;flex-wrap:wrap!important}
.d-block{display:block!important}
.d-inline{display:inline!important}
.fill-dim-2{fill:var(--dim-2)!important}
.fill-ink{fill:var(--ink)!important}
.fill-teal{fill:var(--teal)!important}
.fine-print{color:var(--dim-2)!important;font-size:12.5px!important;font-family:var(--mono)!important}
.fs-14_5{font-size:14.5px!important}
.fs-15{font-size:15px!important}
.fs-15_5{font-size:15.5px!important}
.fs-16{font-size:16px!important}
.fs-22{font-size:22px!important}
.gap-10{gap:10px!important}
.grow-260{flex:1!important;min-width:260px!important}
.jc-center{justify-content:center!important}
.logo-h28{height:28px!important;width:auto!important;display:block!important}
.logo-h30{height:30px!important;width:auto!important;display:block!important}
.ls-tight{letter-spacing:-.015em!important}
.m-0-0-10{margin:0 0 10px!important}
.m-12-0-0{margin:12px 0 0!important}
.m-12-0-12{margin:12px 0 12px!important}
.m-12-0-22{margin:12px 0 22px!important}
.m-12-0-24{margin:12px 0 24px!important}
.m-14-0-0{margin:14px 0 0!important}
.m-22-0-0{margin:22px 0 0!important}
.m-60-0-18{margin:60px 0 18px!important}
.m-62-0-18{margin:62px 0 18px!important}
.m-66-0-12{margin:66px 0 12px!important}
.mr-18{margin-right:18px!important}
.mt-10{margin-top:10px!important}
.mt-12{margin-top:12px!important}
.mt-16{margin-top:16px!important}
.mt-18{margin-top:18px!important}
.mt-20{margin-top:20px!important}
.mt-22{margin-top:22px!important}
.mt-26{margin-top:26px!important}
.mt-28{margin-top:28px!important}
.mt-8{margin-top:8px!important}
.mw-34ch{max-width:34ch!important}
.mw-none{max-width:none!important}
.no-underline{text-decoration:none!important}
.pt-0{padding-top:0!important}
.settings-check{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.settings-check-out{margin:0 0 18px;padding-left:0;list-style:none;font-size:14.5px;line-height:1.55}
.settings-check-out li{padding:3px 0}
.check-ok{color:var(--ink)}
.check-bad{color:#B4232A;font-weight:500}
.stat-lg{font-family:var(--display)!important;font-size:32px!important;font-weight:600!important;margin:10px 0 6px!important}
.stat-md{font-family:var(--display)!important;font-size:30px!important;font-weight:600!important;margin:10px 0 4px!important}
.stroke-line-dk{stroke:var(--line-dk)!important}
.stroke-slate{stroke:var(--slate)!important}
.stroke-teal{stroke:var(--teal)!important}
.ta-center{text-align:center!important}

/* ---------- admin portal (/admin) ---------- */
.admin-bar{background:var(--ink);color:var(--paper)}
.admin-bar .bar{display:flex;align-items:center;gap:14px 26px;min-height:64px;flex-wrap:wrap;padding-block:10px}
.admin-brand{display:flex;align-items:center;gap:10px;color:var(--dim);text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.admin-bar nav{display:flex;gap:6px 20px;flex-wrap:wrap}
.admin-bar nav a{color:var(--nav-link);text-decoration:none;font-size:14.5px;font-weight:500}
.admin-bar nav a:hover,.admin-bar nav a[aria-current]{color:var(--teal)}
.admin-out{margin-left:auto;display:flex;align-items:center;gap:12px;color:var(--dim);font-size:14px}
.admin-out .btn{background:transparent;cursor:pointer}
.btn-sm{padding:7px 13px;font-size:13.5px}
.admin-main{padding-block:34px 70px}
.admin-main h1{font-size:clamp(28px,4vw,38px);font-weight:600;margin:0 0 14px}
.admin-main h2{font-size:21px;margin:0 0 12px}
.admin-main .card:hover{transform:none}
.admin-main code{font-family:var(--mono);font-size:.88em;background:var(--mist);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.admin-lede{color:var(--slate);max-width:70ch;margin:0 0 22px}
.admin-section{margin-top:18px}
.admin-stats a{text-decoration:none;color:inherit}
.admin-login{max-width:420px;margin:30px auto}
.notice{border-left:3px solid var(--teal);background:var(--paper);padding:12px 16px;border-radius:8px;margin:0 0 18px}
.notice.err{border-left-color:var(--red)}
.af label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:16px 0 6px}
.af label.inline{display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);margin:8px 0 0}
.af input:not([type=checkbox]),.af select,.af textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font:15px var(--body);background:var(--paper);color:var(--ink)}
.af [aria-invalid=true]{border-color:var(--red)}
.af textarea{min-height:120px;resize:vertical}
.af textarea.body{min-height:460px;font-family:var(--mono);font-size:14px;line-height:1.55}
.af .help,.detail{font-size:13px;color:var(--slate);margin:6px 0 0}
/* Search in the nav bar. Sized so it never pushes the buttons onto a second line on a laptop, and at phone width
   it becomes full-width inside the opened menu instead of competing with the logo for the bar. */
.navsearch{display:flex;align-items:center;gap:0}
.navsearch input{width:130px;height:34px;padding:0 10px;font-size:14px;color:var(--paper);
  background:rgba(255,255,255,.06);border:1px solid var(--line-dk);border-right:0;border-radius:6px 0 0 6px}
.navsearch input::placeholder{color:#7C8BA6}
.navsearch input:focus{outline:2px solid var(--teal);outline-offset:1px;background:rgba(255,255,255,.1)}
.navsearch button{height:34px;padding:0 12px;font-size:15px;line-height:1;color:var(--paper);cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dk);border-radius:0 6px 6px 0}
.navsearch button:hover{background:rgba(255,255,255,.14)}
@media (max-width:900px){
  .navsearch{width:100%}
  .navsearch input{width:100%;height:42px}
  .navsearch button{height:42px}
}
/* "More on this" — posts that explain a product, at the foot of its page. */
.further{margin:52px 0 0}
.further ul{display:grid; gap:14px; margin:18px 0 0}
.further li{padding-bottom:14px; border-bottom:1px solid var(--line)}
.further li:last-child{border-bottom:0}
.further a{display:block; font-weight:600; font-size:17px}
.further .detail{display:block; margin-top:3px}
/* Cookie bar. Fixed to the bottom, clear of the phone's home indicator, and never covering the whole screen —
   a consent notice that blocks the page is a dark pattern in the other direction. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-wrap:wrap;gap:12px 20px;
  align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper);
  padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-dk);font-size:14.5px}
.cookiebar p{margin:0;max-width:64ch}
.cookiebar a{color:var(--teal)}
.cookiebar .btn-row{gap:10px;flex-wrap:nowrap}
@media (max-width:620px){ .cookiebar{font-size:14px} .cookiebar .btn-row{width:100%} }
/* Rate card: the one wide table in the portal. The global table rule sets min-width:600px, so without a scrolling
   wrapper this would push the whole admin layout sideways on a phone rather than scrolling inside its own box. */
.admin-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rate-card{width:100%;border-collapse:collapse;font-size:13.5px}
.rate-card th{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.rate-card td{padding:8px 10px 8px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.rate-card td.mid{vertical-align:middle;text-align:center}
.rate-card input,.rate-card select,.rate-card textarea{width:100%;min-width:0}
.rate-card textarea{min-height:52px}
/* Bulk selection on the enquiries list. The checkbox sits in the <summary>, so it must not toggle the disclosure. */
.bulk-pick{margin-right:10px;vertical-align:middle}
.bulk-bar{position:sticky;bottom:0;z-index:2;flex-wrap:wrap;align-items:center}
.enquiry summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.af .err{color:#b3261e;font-size:13px;margin:6px 0 0}   /* not --red: #FF4D4F is 3.27:1 here, under AA at this size */
.admin-checks{border:0;padding:0;margin:16px 0 0}
.admin-checks legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.admin-filter{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 8px}
.admin-filter>div:first-child{flex:1 1 260px}
.admin-inline{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.admin-toc{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:14px}
.admin-save{position:sticky;bottom:0;padding:14px 0;background:var(--bg);border-top:1px solid var(--line);margin-top:18px}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.admin-editor{align-items:start;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.admin-delete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-delete.card{display:block}
.admin-delete label.inline,.admin-delete label{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin:0 12px 0 0}
/* portal badges: scoped to .admin so they never restyle the public pricing badge */
.admin .badge{display:inline-block;font-family:var(--mono);font-size:11px;line-height:1.6;padding:1px 8px;border-radius:99px;background:var(--mist);color:var(--slate);white-space:nowrap}
.admin .badge.ok{background:color-mix(in srgb,var(--teal) 18%,transparent);color:#05655b}
.admin .badge.warn{background:color-mix(in srgb,var(--amber) 24%,transparent);color:#7a4f00}
.admin .badge.bad{background:color-mix(in srgb,var(--red) 15%,transparent);color:#b3261e}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.admin .checks .badge{min-width:62px;text-align:center}
.checks .detail{margin:0;overflow-wrap:anywhere}
details.enquiry{padding:14px 18px;margin-top:10px}
details.enquiry summary{justify-content:flex-start;flex-wrap:wrap;gap:6px 12px;font-size:15.5px}
details.enquiry summary::after{margin-left:auto}
details.enquiry summary .detail{margin:0;font-family:var(--body);font-weight:400}
.enquiry-message{white-space:normal;color:var(--ink)!important;background:var(--bg);border-radius:8px;padding:12px 14px;overflow-wrap:anywhere}
details.enquiry .btn-row{margin-top:14px;align-items:center}
.admin-item{border:1px solid var(--line);border-radius:10px;padding:4px 16px 14px;margin:14px 0 0}
.admin-item legend{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);padding:0 6px}
.admin-logo{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.admin-logo img{max-height:40px;max-width:160px;width:auto;background:var(--mist);border-radius:6px;padding:6px}
.admin-logo>div{flex:1 1 220px}
.og-canvas{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);margin-top:4px}
.recovery-codes{columns:2;font-size:16px;line-height:2}
.admin-editor-even{align-items:start}
@media(max-width:760px){.admin-editor{grid-template-columns:1fr}.admin-out{margin-left:0}.recovery-codes{columns:1}}
.post img{display:block;max-width:100%;height:auto;border-radius:10px;margin:22px 0}
.admin-enrol{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.admin-enrol .qr img{display:block;max-width:100%;height:auto;image-rendering:pixelated;border-radius:8px}
.totp-key{font-size:17px;letter-spacing:.05em}
.admin-image{margin-top:6px}
.dpa{border-left:3px solid var(--violet)}
.admin-inline-form{margin-left:auto}
.staging-bar{background:#b3261e;color:#fff;text-align:center;font:600 13px/1 var(--mono);padding:9px 16px;letter-spacing:.04em}
/* ---------- status page ---------- */
.status-list{padding:6px 24px}
.status-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--line)}
.status-row:last-child{border-bottom:0}
.status-note{font-size:14px;color:var(--slate);margin:4px 0 0}
.status-pill{font-family:var(--mono);font-size:12.5px;padding:4px 12px;border-radius:99px;white-space:nowrap}
.s-operational{background:color-mix(in srgb,var(--teal) 18%,transparent);color:#05655b}
.s-maintenance{background:var(--mist);color:var(--slate)}
.s-degraded,.s-partial{background:color-mix(in srgb,var(--amber) 24%,transparent);color:#7a4f00}
.s-major{background:color-mix(in srgb,var(--red) 15%,transparent);color:#b3261e}
.status-h{font-size:24px;margin:40px 0 14px}
.status-incident{margin-top:14px}
.status-updates{list-style:none;padding:0;margin:12px 0 0}
.status-updates li{padding:12px 0;border-top:1px solid var(--line)}
.status-updates p{margin:6px 0 0;color:var(--ink)!important;font-size:15px}
.status-edit{margin-top:4px}
/* ---------- search results and the AI assistant (/search.php, /ask.php) ---------- */
.results{list-style:none;padding:0;margin:0 0 26px}
.results li{padding:14px 0;border-top:1px solid var(--line)}
.results li a{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.012em}
.results .detail{margin:4px 0 0}
.prose .badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 8px;border-radius:99px;background:var(--mist);color:var(--slate);vertical-align:middle;margin-left:8px}
/* The conversation. Not speech bubbles pinned left and right: at 65 characters a wide reply would have to wrap
   to a narrow column to stay on its side, and the answer is the thing being read. One column, marked by who
   said it, which also keeps the reading order right for a screen reader. */
.chat{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:14px}
.chat li{border-radius:var(--r);padding:14px 18px}
.chat li p:last-child{margin-bottom:0}
.chat-you{background:var(--mist)}
.chat-bot{background:var(--paper);border:1px solid var(--line)}
.chat-who{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:0 0 6px}
.sources{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:8px 18px}
.sources li{font-size:14.5px}
.askform{margin:0 0 18px}
.askform label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin:0 0 8px}
.askform textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  font:16px/1.55 var(--body);background:var(--paper);color:var(--ink);resize:vertical;margin:0 0 12px}
.askform textarea:focus-visible{outline:2px solid var(--violet);outline-offset:1px;border-color:var(--violet)}

/* ---------- phones: measured with tools/mobile-check.mjs at 320 and 390px ---------- */

/* ⚠️ 16px IS A THRESHOLD, NOT A PREFERENCE. iOS Safari zooms the page in whenever a form control with a
   font smaller than 16px is focused, and it does not zoom back out afterwards — the visitor is left on a
   page they have to pinch to escape, mid-way through the contact form. Every control here was 15px, one
   pixel under. Raised only at phone widths, so the denser desktop form is unchanged. */
@media (max-width:620px){
  .field select, .field input:not([type=range]), .field textarea,
  .af input:not([type=checkbox]), .af select, .af textarea,
  .askform textarea, .sitesearch input, .navsearch input{ font-size:16px }
}

/* The nav bar could not fit its own contents on a small phone. The logo is an SVG with an intrinsic
   907×111, so at height:30px it renders 245px wide; with .wrap's 48px of padding and the 28px flex gap,
   the MENU button was pushed 32px past the right edge of a 320px screen and the whole document scrolled
   sideways. Narrower gutter, smaller logo, tighter gap — measured to fit with room to spare. */
@media (max-width:400px){
  .wrap{padding:0 16px}
  .logo-h30{height:24px!important}
  body>nav .bar{gap:12px; height:62px}
  body>nav .links{top:62px}   /* the open menu hangs off the bar, so it follows the shorter height */
}

/* ⚠️ minmax(0,1fr), not 1fr. A bare `1fr` track is `minmax(auto,1fr)`, and `auto` refuses to shrink below
   the widest unbreakable content in it — so "Readiness assessment" at 229px held the footer wider than a
   320px screen however narrow the viewport got. This is the actual cause of the sideways scroll on every
   page, the nav being only the second-widest offender. One column below 520px, where two never fitted. */
.fgrid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))}
@media(max-width:980px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .fgrid{grid-template-columns:minmax(0,1fr); gap:22px} }

/* WCAG 2.2 AA (2.5.8) asks for 24×24 CSS px on anything you tap. Footer links were 23.2px — a line box and
   a 9px margin, no padding — so every one of them missed by under a pixel. Padding rather than a bigger
   font: the footer's density is the point, and a taller line would change the column rhythm. */
footer a{padding:3px 0; margin-bottom:6px}

/* 9.5px is below what anyone reads on a phone. The desktop readout is a dense instrument panel and stays
   as designed; this is the same labels, legible, on the screens where they are physically smallest. */
@media (max-width:620px){ .readout .k{font-size:11px} }

/* The footer's legal row is .d-inline (display:inline!important), and vertical padding on an inline box does
   not grow the line — so "Privacy", "Terms" and "Analytics choice" sat at 23px however much padding they were
   given. inline-block is what makes the padding count, and it keeps them on one line. */
.fbot .d-inline{display:inline-block!important; padding:4px 0}

/* The phone and email in About are the only links on the site presented as a standalone value in a <dd>,
   rather than inside a sentence, so 2.5.8 applies to them and they were 17px tall. */
.prose dd a, dd > a{display:inline-block; padding:4px 0}

/* Three labels sat just under the 11px the brand's own .wkv-label sets as its floor — 10.5px and 10px, close
   enough to look deliberate and small enough to lose on a phone. Raised to the floor, on phones only, so the
   desktop density is untouched. This is not a new size; it is the size the design system already names. */
@media (max-width:620px){
  .field label{font-size:11px}
  /* ⚠️ .plan .badge and thead th, not .badge and th. The plain selectors lost on specificity to the rules
     at :207 and :221 and changed nothing — the measurement said 10px both before and after. */
  .plan .badge{font-size:11px}
  thead th{font-size:11px}
  .req{font-size:11px}
}

/* ⚠️ .ph is white-space:nowrap, and on a legal page the placeholder is a SENTENCE. "Draft — for legal review
   before it takes effect" is 416px wide and unbreakable, so /terms.php scrolled sideways by 112px at 320px —
   the worst overflow on the site, on the page a customer is most likely to read carefully. nowrap earns its
   keep on short values (it stops a phone number breaking across lines), so it is relaxed only where the
   screen is too narrow to afford it. A placeholder that wraps beats a page that does not fit. */
@media (max-width:620px){ .ph{white-space:normal} }

/* "← Products" is a standalone navigation link above the page heading, not a link inside a sentence, so 2.5.8
   applies and 14px was not enough to tap reliably. */
.eyebrow.no-underline{display:inline-block; padding:5px 0}

/* .ph is sized at .9em so a placeholder reads as slightly quieter than the text around it. That relationship
   is right, but it compounds: inside a 12px .post-meta the placeholder lands at 10.8px. max() keeps the
   intent and puts a floor under it at the 11px brand-tokens.css already calls the smallest label size.
   Applied at every width — it can only ever raise text that was below the floor. */
.ph{font-size:max(11px, .9em)}

/* ⚠️ THE CAPTCHA WIDGET IS THE ONE THING ON THIS PAGE THAT REFUSES TO BE NARROW, AND IT ARRIVES WITHOUT A DEPLOY.
   reCAPTCHA renders a fixed 304x78 iframe and Turnstile a ~300px one; neither provider shrinks below that. The
   contact form is sized by its widest child, so on a 320px screen the whole form ran 22px past the right edge and
   the home page scrolled sideways — exactly what tools/mobile-check.mjs exists to catch.
   It only appears when a captcha is configured, which is a portal setting rather than code, so it can land on a
   live site that passed this check on its last deploy without one line of the repo changing. Measured on the live
   site, never reproducible locally, because no captcha is configured there.
   ⚠️ A transform ALONE does not fix it: scaling changes what is painted, not the layout box, so the 304px child
   still forces the form wide. The box is sized to the scaled result and the overflow contained with it. */
@media (max-width:380px){
  .g-recaptcha,.cf-turnstile{transform:scale(.78); transform-origin:left top; width:238px; height:62px; overflow:hidden}
}