/* ==========================================================================
   ISP Square — ispsquare.com
   Design system: see design.md. Tokens below are the source of truth.
   Design system shared with hostkarle.in (rankyak-derived). ISP Square additions at the end of this file.
   ========================================================================== */

/* ---------- fonts (self-hosted, no third-party runtime dependency) -------- */
@font-face{font-family:Metropolis;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/metropolis-latin-400.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/metropolis-latin-500.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/metropolis-latin-600.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/metropolis-latin-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700.woff2) format("woff2")}

/* ---------- tokens -------------------------------------------------------- */
:root{
  --font-display:Metropolis,Inter,ui-sans-serif,system-ui,sans-serif;
  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* primary — ISP Square logo red (#E62B4A = 600), since 2026-09-14; was rankyak indigo */
  --primary-50:#fef2f4; --primary-100:#fde6e9; --primary-200:#fbd0d7;
  --primary-300:#f7aab6; --primary-400:#f17a8e; --primary-500:#e84a65;
  --primary-600:#e62b4a; --primary-700:#c41c39; --primary-800:#a41a33;
  --primary-900:#891a30;

  /* neutrals — cool grey ramp */
  --gray-50:#f9fafb;  --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#111827; --gray-950:#030712;

  /* accents — used sparingly */
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-600:#16a34a; --green-800:#166534;
  --yellow-400:#facc15;

  --line:var(--gray-200);

  --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.5rem;
  --radius-xl:.75rem; --radius-2xl:1rem;  --radius-3xl:1.5rem;

  --shadow-button:0 1px 2px 0 #0000001f, 0 0 0 1px #00000014;
  --shadow-sm:0 1px 2px 0 #0000000d;
  --shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;

  --ease:cubic-bezier(.4,0,.2,1);
  --t:.15s var(--ease);

  --wrap:80rem;
}

/* ---------- reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;background:#fff;color:var(--gray-900);
  font-family:var(--font-sans);font-size:1rem;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------- type ---------------------------------------------------------- */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:500;text-wrap:balance}
h1{font-size:2.25rem;line-height:1.1;letter-spacing:-.035em}
h2{font-size:1.875rem;line-height:1.15;letter-spacing:-.025em}
h3{font-size:1.125rem;line-height:1.35;font-weight:500;letter-spacing:-.01em}
.lead{font-size:1rem;opacity:.7}
.eyebrow{font-size:1rem;font-weight:500;color:rgb(0 0 0 / .4);margin-bottom:.5rem}
.muted{color:var(--gray-500)}
.small{font-size:.875rem}
.xs{font-size:.75rem}
.mono{font-family:var(--font-mono)}
@media(min-width:768px){
  h1{font-size:3rem}
  h2{font-size:2.25rem}
}
@media(min-width:1280px){ h1{font-size:3.75rem} }

/* ---------- page container (no hairline frame — removed 2026-09-12) ------ */
.wrap{max-width:var(--wrap);margin-inline:auto}
@media(min-width:768px){ .wrap{padding-inline:2rem} }

.sec{position:relative}
.frame{position:relative}
.pad{padding:1rem}
@media(min-width:1024px){ .pad{padding:2rem} }
@media(min-width:1280px){ .pad{padding:3rem} }
.pad-t{padding-top:4rem}
@media(min-width:1024px){ .pad-t{padding-top:6rem} }
@media(min-width:1280px){ .pad-t{padding-top:9rem} }

/* section header: eyebrow + h2 left, paragraph right */
.sec-head{display:grid;gap:1.5rem 2rem;align-items:end;margin-bottom:2rem}
@media(min-width:768px){
  .sec-head{grid-template-columns:1fr 1fr;gap:2rem}
  .sec-head>:first-child{padding-right:4rem}
}
@media(min-width:1024px){ .sec-head{margin-bottom:2.5rem} }
.sec-head p{max-width:48rem;color:var(--gray-600)}
.sec-head.center{display:block;text-align:center;max-width:44rem;margin-inline:auto}
.sec-head.center p{margin-inline:auto}
.sec-head.center>:first-child{padding-right:0}

/* ---------- buttons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem 1.25rem;border-radius:9999px;font-weight:500;
  transition:background-color var(--t),color var(--t),box-shadow var(--t);
  white-space:nowrap}
.btn-primary{background:var(--primary-700);color:#fff}
.btn-primary:hover{background:var(--primary-800)}
.btn-dark{background:#000;color:#fff}
.btn-dark:hover{background:var(--gray-800)}
.btn-white{background:#fff;color:var(--gray-900);box-shadow:var(--shadow-button)}
.btn-white:hover{background:var(--gray-50)}
.btn-ghost{color:var(--gray-700)}
.btn-ghost:hover{background:var(--gray-100);color:var(--gray-900)}
.btn-sm{padding:.375rem .875rem;font-size:.875rem}
.btn-block{width:100%}
.btn .ico{width:1.125rem;height:1.125rem}

/* ---------- badges -------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:.375rem;background:var(--gray-100);
  color:var(--gray-600);border-radius:9999px;padding:.25rem .75rem;font-size:.875rem}
.badge-green{background:var(--green-100);color:var(--green-800);
  font-size:.625rem;font-weight:500;padding:.125rem .375rem;line-height:1.4}
.dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--green-600);flex:none}

/* ---------- cards --------------------------------------------------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:1.5rem}
.tile{width:2.25rem;height:2.25rem;border-radius:var(--radius-lg);background:var(--gray-100);
  box-shadow:inset 0 0 0 1px rgb(229 231 235 / .7);color:var(--gray-500);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:background-color var(--t),color var(--t),box-shadow var(--t)}
.tile svg{width:1.125rem;height:1.125rem}
a:hover>.tile,.hoverable:hover .tile{background:var(--primary-100);color:var(--primary-700);
  box-shadow:inset 0 0 0 1px var(--primary-200)}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){ .g2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:768px){ .g3{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1024px){ .g4{grid-template-columns:repeat(4,1fr)} }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{position:sticky;top:0;z-index:50;background:rgb(255 255 255 / .95);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;
  transition:border-color var(--t),box-shadow var(--t)}
.hdr.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:3.5rem;padding-inline:1rem}
@media(min-width:1024px){ .nav{height:4rem} }
.brand{display:flex;align-items:center;gap:.5rem;flex:none}
.brand img{height:1.75rem;width:auto}
.nav-links{display:none;align-items:center;gap:.125rem}
@media(min-width:1024px){ .nav-links{display:flex} }
.nav-link{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;
  border-radius:9999px;font-size:.875rem;color:var(--gray-600);transition:all var(--t)}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--gray-100);color:var(--gray-900)}
.nav-link .chev{width:.875rem;height:.875rem;transition:transform .2s var(--ease)}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-login{display:none;font-size:.875rem;font-weight:600}
.nav-login:hover{text-decoration:underline}
@media(min-width:640px){ .nav-login{display:block} }
/* CTA is black at the top of the page, red once scrolled — as on rankyak */
.hdr .nav-cta{background:#000}
.hdr.scrolled .nav-cta{background:var(--primary-700)}
.hdr.scrolled .nav-cta:hover{background:var(--primary-800)}
.burger{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
  border-radius:var(--radius-lg);color:var(--gray-700)}
.burger:hover{background:var(--gray-100)}
@media(min-width:1024px){ .burger{display:none} }

.mobile{display:none;position:fixed;inset:3.5rem 0 0;z-index:40;background:#fff;overflow-y:auto;
  overscroll-behavior:contain;padding:1rem}
.mobile.open{display:block}
@media(min-width:1024px){ .mobile,.mobile.open{display:none} }
.m-group{border-bottom:1px solid var(--gray-100)}
.m-head{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:.875rem 0;font-weight:500;font-size:.9375rem}
.m-cta{display:grid;gap:.5rem;margin-top:1.25rem}

/* ==========================================================================
   HERO — minimal: centred copy on a soft red wash, app logos underneath
   ========================================================================== */
.hero{padding-top:2.5rem;padding-bottom:2rem}
@media(min-width:640px){ .hero{padding-top:3.5rem} }
@media(min-width:1024px){ .hero{padding-top:4rem} }
/* background design: a dot grid that fades out toward the edges and the bottom,
   plus two soft red glows top-left / top-right and a light halo behind the heading */
.hero-sec{position:relative;overflow:hidden;background:#fff}
.hero-sec::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--primary-400) 1.3px,transparent 1.9px);
  background-size:24px 24px;background-position:center top;opacity:.7;
  -webkit-mask-image:radial-gradient(70% 85% at 50% 0%,#000 25%,transparent 100%);
          mask-image:radial-gradient(70% 85% at 50% 0%,#000 25%,transparent 100%)}
.hero-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 48% at 14% 10%,#f7aab6b3 0%,#f7aab600 100%),
    radial-gradient(30% 44% at 88% 20%,#fbd0d7d9 0%,#fbd0d700 100%),
    radial-gradient(46% 42% at 50% 36%,#ffffffd9 0%,#ffffff00 100%),
    linear-gradient(to bottom,#ffffff00 70%,#fff 100%)}
@media(min-width:1024px){
  .hero-sec::after{background:
    radial-gradient(28% 55% at 10% 12%,#f7aab6b3 0%,#f7aab600 100%),
    radial-gradient(26% 50% at 90% 22%,#fbd0d7d9 0%,#fbd0d700 100%),
    radial-gradient(40% 44% at 50% 34%,#ffffffd9 0%,#ffffff00 100%),
    linear-gradient(to bottom,#ffffff00 70%,#fff 100%)}
}
.hero-sec>*{position:relative;z-index:1}
.hero-copy{max-width:58rem;margin-inline:auto;text-align:center}
.hero h1{margin-bottom:1.5rem}
@media(min-width:1024px){ .hero h1{font-size:4.25rem;letter-spacing:-.04em} }
@media(min-width:1280px){ .hero h1{font-size:4.75rem} }
.hero h1 em{font-style:normal;color:var(--primary-700)}
.hero .lead{font-size:1.0625rem;max-width:44rem;margin-inline:auto;line-height:1.65;text-wrap:balance}
@media(min-width:1024px){ .hero .lead{font-size:1.25rem} }
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem;margin-top:2.5rem}
.hero-cta .btn{width:100%;padding:.875rem 1.75rem;font-size:1.0625rem}
@media(min-width:640px){ .hero-cta .btn{width:auto} }
.hero-trust{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:1.75rem;
  font-size:.875rem;color:var(--gray-500)}
@media(min-width:640px){ .hero-trust{flex-direction:row;justify-content:center;gap:2.25rem;margin-top:2rem} }
.hero-trust>div{display:flex;align-items:center;gap:.5rem}
/* app logos under the hero copy */
.hero-logos{margin-top:4rem;text-align:center}
@media(min-width:1024px){ .hero-logos{margin-top:5rem} }
.hero-logos p{font-size:.8125rem;font-weight:500;color:var(--gray-400);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.25rem}
.stars{display:flex;gap:.0625rem;color:var(--yellow-400)}
.stars svg{width:.875rem;height:.875rem}

/* app-logo marquee (hero) */
.marquee{display:flex;gap:1rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:1rem;flex-shrink:0;list-style:none;margin:0;padding:0;
  animation:marquee 30s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track li{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.5rem 1rem;border:1px solid var(--line);border-radius:9999px;background:#fff;
  font-size:.875rem;font-weight:500;color:var(--gray-700)}
.marquee-track li svg{width:1rem;height:1rem;color:var(--primary-600);flex-shrink:0}
.marquee-track.apps-track{gap:1rem}
.marquee-track.apps-track li{gap:.625rem;padding:.625rem 1.25rem;font-size:.9375rem;color:var(--gray-800)}
.marquee-track.apps-track img{width:1.5rem;height:1.5rem;display:block}
@keyframes marquee{to{transform:translate3d(calc(-100% - 1rem),0,0)}}

/* browser / panel mock */
.mock{margin-top:3rem;border:1px solid var(--line);border-radius:var(--radius-xl);
  background:#fff;box-shadow:var(--shadow-xl);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:.75rem;padding:.625rem .875rem;
  border-bottom:1px solid var(--line);background:var(--gray-50)}
.mock-dots{display:flex;gap:.375rem}
.mock-dots i{width:.625rem;height:.625rem;border-radius:9999px;background:var(--gray-300)}
.mock-url{flex:1;background:#fff;border:1px solid var(--line);border-radius:9999px;
  padding:.25rem .75rem;font-size:.75rem;color:var(--gray-500);
  font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-body{padding:1rem;display:grid;gap:.75rem}
@media(min-width:768px){ .mock-body{grid-template-columns:repeat(2,1fr);padding:1.25rem} }
@media(min-width:1280px){ .mock-body{grid-template-columns:repeat(4,1fr)} }
.mock-art{display:none}
@media(min-width:768px){
  .mock-inner{display:grid;grid-template-columns:1fr 13rem;align-items:center}
  .mock-art{display:block;border-left:1px solid var(--line);padding:.5rem}
  .mock-art img{display:block;width:100%;height:auto}
}
.stat{border:1px solid var(--line);border-radius:var(--radius-lg);padding:.875rem 1rem;text-align:left}
.stat .k{font-size:.75rem;color:var(--gray-500);margin-bottom:.25rem}
.stat .v{font-family:var(--font-display);font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.stat .v small{font-size:.875rem;color:var(--gray-500);font-weight:400}
.bar{height:.375rem;border-radius:9999px;background:var(--gray-100);margin-top:.625rem;overflow:hidden}
.bar i{display:block;height:100%;border-radius:9999px;background:var(--primary-600)}
.bar i.ok{background:var(--green-600)}

/* logo strip */
.strip-label{text-align:center;margin-bottom:1.25rem}
.strip-label span{text-transform:uppercase;font-size:.8125rem;font-weight:500;color:var(--gray-400);letter-spacing:.06em}

/* ==========================================================================
   PRICING
   ========================================================================== */
.toggle{display:flex;justify-content:center;margin-bottom:1.25rem}
.toggle-track{display:flex;gap:.25rem;background:var(--gray-100);padding:.25rem;
  border-radius:9999px;font-size:.75rem}
.toggle-track button{display:flex;align-items:center;padding:.375rem 1rem;border-radius:9999px;
  font-weight:500;color:var(--gray-500);transition:all var(--t)}
.toggle-track button.on{background:#fff;color:var(--gray-900);box-shadow:var(--shadow-sm)}
.toggle-track button .badge-green{margin-left:.375rem}

/* decorative frame around the price cards */
.price-frame{position:relative;border-radius:var(--radius-2xl);overflow:hidden;padding:.5rem}
@media(min-width:1024px){ .price-frame{padding:2rem} }
.price-frame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 12% 0%,#f17a8e 0%,transparent 60%),
    radial-gradient(50rem 28rem at 85% 10%,#e84a65 0%,transparent 55%),
    radial-gradient(40rem 26rem at 50% 100%,#a41a33 0%,transparent 60%),
    linear-gradient(160deg,#e62b4a,#891a30);
  filter:blur(24px);transform:scale(1.4)}
.price-frame::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.price-inner{position:relative;background:rgb(255 255 255 / .8);border-radius:var(--radius-xl);
  overflow:hidden;display:grid;gap:1px;background-clip:padding-box}
@media(min-width:900px){ .price-inner{grid-template-columns:repeat(3,1fr)} }
/* cards share row heights, so a two-line subtitle or price note on one card never pushes its button out of line */
@media(min-width:900px){ .price-inner > .plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start} }
.plan{background:#fff;padding:1.75rem;display:flex;flex-direction:column;position:relative}
@media(min-width:1024px){ .plan{padding:2.5rem} }
.plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
/* "Most popular" sits in the card corner, out of the flow, so all three cards line up */
.plan-top .badge-green{position:absolute;top:1.25rem;right:1.25rem}
@media(min-width:1024px){ .plan-top .badge-green{top:1.5rem;right:1.5rem} }
.plan-sub{min-height:1.25rem}
.plan-name{font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.plan-sub{font-size:.875rem;color:var(--gray-500);margin-top:.25rem}
.plan-price{display:flex;align-items:baseline;gap:.375rem;margin:1.25rem 0 .25rem}
.plan-price .amt{font-family:var(--font-display);font-size:2.25rem;font-weight:500;letter-spacing:-.03em}
.plan-price .per{font-size:.875rem;color:var(--gray-600)}
.plan-was{font-size:.8125rem;color:var(--gray-400);min-height:1.25rem}
.plan-was s{margin-right:.25rem}
.plan .btn{margin:1.5rem 0}
.plan ul{display:grid;gap:.625rem;font-size:.875rem;color:var(--gray-700);
  padding-top:1.25rem;border-top:1px solid var(--line)}
.plan li{display:flex;align-items:flex-start;gap:.5rem}
.plan li svg{width:1rem;height:1rem;flex:none;color:var(--green-600);margin-top:.15rem}
.plan li b{font-weight:600;color:var(--gray-900)}
.plan.featured{position:relative}
.price-note{margin-top:1rem;text-align:center;font-size:.875rem;color:var(--gray-500)}
.price-note a{color:var(--primary-600);font-weight:500}
.price-note a:hover{text-decoration:underline}

/* refund row */
.assur{display:grid;gap:1rem;margin-top:1.5rem}
@media(min-width:768px){ .assur{grid-template-columns:repeat(3,1fr)} }
.assur div{display:flex;align-items:flex-start;gap:.625rem;font-size:.875rem;color:var(--gray-600)}
.assur svg{width:1.125rem;height:1.125rem;color:var(--green-600);flex:none;margin-top:.1rem}

/* ==========================================================================
   DOMAIN SEARCH
   ========================================================================== */
.dsearch{display:flex;flex-wrap:wrap;gap:.625rem;max-width:38rem}
.dsearch input{flex:1 1 16rem;min-width:0;padding:.75rem 1.125rem;border:1px solid var(--gray-300);
  border-radius:9999px;font:inherit;font-size:.9375rem;background:#fff;transition:all var(--t)}
.dsearch input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}
.tlds{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tld{display:flex;align-items:baseline;gap:.5rem;border:1px solid var(--line);
  border-radius:9999px;padding:.375rem .875rem;font-size:.875rem}
.tld b{font-family:var(--font-display);font-weight:600}
.tld span{color:var(--gray-500);font-size:.8125rem}

/* ==========================================================================
   FEATURE BLOCKS
   ========================================================================== */
.feat{display:grid;gap:1rem}
@media(min-width:1024px){ .feat-5{grid-template-columns:repeat(5,1fr)} }
.feat-card{border:1px solid var(--line);border-radius:var(--radius-xl);padding:1.5rem;
  background:#fff;display:flex;flex-direction:column;gap:.75rem}
.feat-card h3{margin-top:.25rem}
.feat-card p{font-size:.875rem;color:var(--gray-600)}

/* why-choose grid */
.why-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){ .why-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .why-grid{grid-template-columns:repeat(4,1fr)} }
.why-card{border:1px solid var(--line);border-radius:var(--radius-xl);padding:1.5rem;background:#fff;
  display:flex;flex-direction:column;gap:.75rem;transition:border-color var(--t)}
.why-card:hover{border-color:var(--gray-300)}
.why-card h3{font-size:1.125rem;margin-top:.25rem}
.why-card p{font-size:.875rem;color:var(--gray-600)}
.span3{grid-column:span 1}
.span2{grid-column:span 1}
@media(min-width:1024px){ .span3{grid-column:span 3} .span2{grid-column:span 2} }

/* dark stats band */
/* stats band sits tight under the hero (2026-09-12) */
#stats .pad{padding-top:0}
.hero{padding-bottom:2.5rem}
.band{background:#000;color:#fff;border-radius:var(--radius-xl);padding:2.5rem 1.5rem}
@media(min-width:768px){ .band{padding:3rem} }
.band-grid{display:grid;gap:2rem;text-align:center}
@media(min-width:640px){ .band-grid{grid-template-columns:repeat(4,1fr)} }
.band .v{font-family:var(--font-display);font-size:2.25rem;font-weight:500;letter-spacing:-.03em}
.band .k{font-size:.875rem;opacity:.55;margin-top:.25rem}

/* comparison */
.vs{display:grid;gap:1rem}
@media(min-width:768px){ .vs{grid-template-columns:1fr 1fr;gap:1.5rem} }
.vs-col{border:1px solid var(--line);border-radius:var(--radius-xl);padding:1.5rem}
.vs-col.good{border-color:var(--primary-200);background:var(--primary-50)}
.vs-col h3{margin-bottom:1rem;font-size:1rem;font-weight:600;font-family:var(--font-sans)}
.vs-col ul{display:grid;gap:.75rem;font-size:.875rem;color:var(--gray-600)}
.vs-col li{display:flex;align-items:flex-start;gap:.625rem}
.vs-col li svg{width:1rem;height:1rem;flex:none;margin-top:.15rem}
.vs-col.bad li svg{color:var(--gray-400)}
.vs-col.good li{color:var(--gray-800)}
.vs-col.good li svg{color:var(--green-600)}

/* app logos */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:640px){ .apps{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1024px){ .apps{grid-template-columns:repeat(6,1fr)} }
.app{display:flex;flex-direction:column;align-items:center;gap:.625rem;padding:1.25rem .75rem;
  border:1px solid var(--line);border-radius:var(--radius-xl);transition:all var(--t)}
.app:hover{border-color:var(--primary-200);background:var(--primary-50)}
.app img{height:2rem;width:auto;object-fit:contain}
.app span{font-size:.75rem;color:var(--gray-600);text-align:center}

/* FAQ */
.faq{max-width:52rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 0;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:1.125rem;height:1.125rem;color:var(--gray-400);flex:none;
  transition:transform .2s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{padding:0 0 1.25rem;font-size:.9375rem;color:var(--gray-600);max-width:46rem}

/* dark CTA band */
.cta{position:relative;display:flex;flex-direction:column;gap:2rem;background:#000;
  color:#fff;border-radius:var(--radius-xl);overflow:hidden}
@media(min-width:1024px){ .cta{flex-direction:row;gap:4rem} }
.cta-copy{padding:2.5rem}
@media(min-width:768px){ .cta-copy{padding:4rem} }
@media(min-width:1024px){ .cta-copy{width:60%} }
.cta h2{font-weight:600;font-size:1.5rem;margin-bottom:.25rem}
@media(min-width:640px){ .cta h2{font-size:1.875rem} }
.cta p{opacity:.6;font-size:1.125rem}
.cta-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.cta-side{display:flex;align-items:flex-end;justify-content:flex-end;padding:0 2.5rem 2.5rem}
@media(min-width:1024px){ .cta-side{width:40%;padding:2.5rem 2.5rem 0 0} }
.cta-mini{width:100%;background:var(--gray-900);border:1px solid var(--gray-800);
  border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);
  padding:1.25rem;display:grid;gap:.75rem}
.cta-mini div{display:flex;align-items:center;justify-content:space-between;
  font-size:.8125rem;font-family:var(--font-mono)}
.cta-mini span:first-child{opacity:.5}
.cta-mini b{font-weight:500;color:#fff}
.cta-mini .up{color:#4ade80}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{padding:3rem 1rem}
@media(min-width:1024px){ .foot{padding:4rem 2rem} }
.foot-grid{display:grid;gap:2.5rem}
@media(min-width:768px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.foot h3{font-family:var(--font-sans);font-size:.875rem;font-weight:600;margin-bottom:1rem}
.foot ul{display:grid;gap:.625rem;font-size:.875rem;color:var(--gray-600)}
.foot a:hover{color:var(--gray-900);text-decoration:underline}
.foot-about p{font-size:.875rem;color:var(--gray-600);max-width:26rem;margin:1rem 0}
.foot-contact{display:grid;gap:.5rem;font-size:.875rem;color:var(--gray-600)}
.foot-contact div{display:flex;align-items:center;gap:.5rem}
.foot-contact svg{width:1rem;height:1rem;color:var(--gray-400);flex:none}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1rem}
.pay img{height:1.5rem;width:auto;opacity:.7}
.legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.25rem 1rem;border-top:1px solid var(--line);font-size:.8125rem;color:var(--gray-500)}
@media(min-width:1024px){ .legal{padding-inline:2rem} }
.legal ul{display:flex;flex-wrap:wrap;gap:1.25rem}

/* floating: chat now (right) + back to top (left) + chat dialog */
.chat-now{position:fixed;right:1rem;bottom:calc(2rem + env(safe-area-inset-bottom,0px));z-index:45;
  display:flex;align-items:center;gap:.5rem;border:0;cursor:pointer;
  background:var(--primary-700);color:#fff;padding:.625rem 1.125rem;border-radius:9999px;
  box-shadow:var(--shadow-xl);font:500 .875rem/1.25 var(--font-sans);transition:background-color var(--t)}
.chat-now:hover{background:var(--primary-800)}
.chat-now svg{width:1.125rem;height:1.125rem}
.to-top{position:fixed;left:1rem;bottom:calc(2rem + env(safe-area-inset-bottom,0px));z-index:45;
  width:2.625rem;height:2.625rem;display:grid;place-items:center;cursor:pointer;
  background:#000;color:#fff;border:0;border-radius:9999px;box-shadow:var(--shadow-xl);
  opacity:0;visibility:hidden;transform:translateY(.5rem);
  transition:opacity var(--t),transform var(--t),visibility var(--t),background-color var(--t)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gray-800)}
.to-top svg{width:1.25rem;height:1.25rem;transform:rotate(180deg)}
.chat-now:focus-visible,.to-top:focus-visible{outline:2px solid var(--primary-600);outline-offset:3px}
/* non-modal panel anchored above the Chat now button — the page stays usable */
.chat-dlg{position:fixed;inset:auto 1rem calc(5.25rem + env(safe-area-inset-bottom,0px)) auto;margin:0;z-index:46;
  width:min(22rem,calc(100vw - 2rem));padding:0;border:1px solid var(--line);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);color:var(--gray-900);background:#fff;
  transform-origin:bottom right}
.chat-dlg[open]{animation:chatIn .18s var(--ease)}
@keyframes chatIn{from{opacity:0;transform:translateY(.5rem) scale(.95)}}
.chat-dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.25rem 1.25rem 1rem;border-bottom:1px solid var(--line)}
.chat-dlg-head h2{font:500 1.25rem/1.3 var(--font-display);letter-spacing:-.02em}
.chat-dlg-head p{margin-top:.25rem;font-size:.875rem;color:var(--gray-500)}
.chat-dlg-x{flex:none;width:2rem;height:2rem;display:grid;place-items:center;border:0;cursor:pointer;
  background:none;color:var(--gray-500);border-radius:9999px;transition:background-color var(--t)}
.chat-dlg-x:hover{background:var(--gray-100);color:var(--gray-900)}
.chat-dlg-x svg{width:1.125rem;height:1.125rem}
.chat-dlg-list{display:grid;gap:.5rem;padding:1rem 1.25rem 1.25rem}
.chat-opt{display:flex;align-items:center;gap:.875rem;padding:.75rem;border:1px solid var(--line);
  border-radius:var(--radius-xl);transition:border-color var(--t),background-color var(--t)}
.chat-opt:hover{border-color:var(--primary-200);background:var(--primary-50)}
.chat-opt>span:nth-child(2){flex:1;min-width:0;display:grid;font-size:.875rem;color:var(--gray-500)}
.chat-opt strong{font-weight:600;color:var(--gray-900)}
.chat-opt>span:nth-child(2) span{overflow-wrap:anywhere}
.chat-opt-go{width:1rem;height:1rem;flex:none;color:var(--gray-400)}
@media(prefers-reduced-motion:reduce){ .chat-dlg[open]{animation:none} .to-top{transition:none} }

/* utils */
.hide-sm{display:none}
@media(min-width:640px){ .hide-sm{display:block} }
.center{text-align:center}
.mt1{margin-top:1rem}.mt2{margin-top:1.5rem}.mt3{margin-top:2rem}
.flex{display:flex}.wrapf{flex-wrap:wrap}.gap{gap:1rem}.aic{align-items:center}
[hidden]{display:none !important}

/* 2026-09-12 fixes after screenshot review */
.badge-green{white-space:nowrap}
.toggle-track button{white-space:nowrap}
@media(max-width:479px){ .toggle-track button .badge-green{display:none} }
/* payment marks are white artwork from the old dark footer — render as grey silhouettes */
.pay img{filter:brightness(0);opacity:.45}
/* keep the floating WhatsApp button from covering the legal links */
footer.sec{padding-bottom:4.5rem}

/* ==========================================================================
   2026-09-12 — multi-page: redesigned footer, sub-pages, legal docs
   ========================================================================== */
/* footer: help strip + 5 columns + contact/payment row */
.site-foot{margin-top:4rem}
@media(min-width:1024px){ .site-foot{margin-top:6rem} }
.foot-help{display:flex;flex-direction:column;gap:1.5rem;margin:0 1rem;padding:2rem 1.5rem;
  border-radius:var(--radius-xl);background:var(--primary-50);border:1px solid var(--primary-200)}
@media(min-width:768px){ .foot-help{flex-direction:row;align-items:center;justify-content:space-between;padding:2.5rem 3rem} }
@media(min-width:1024px){ .foot-help{margin:0 2rem} }
.foot-help h2{font-size:1.5rem}
.foot-help p{color:var(--gray-600);margin-top:.375rem}
.foot-help-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.foot-grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1.5rem}
.foot-grid .foot-about{grid-column:1 / -1}
@media(min-width:1024px){
  .foot-grid{grid-template-columns:2fr 1fr 1fr}
  .foot-grid .foot-about{grid-column:auto}
}
.social{display:flex;flex-wrap:wrap;gap:.5rem}
.social a{width:2.25rem;height:2.25rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--gray-600);box-shadow:var(--shadow-button);
  transition:background-color var(--t),color var(--t),box-shadow var(--t)}
.social a svg{width:1.125rem;height:1.125rem}
.social a:hover{background:var(--primary-700);color:#fff;box-shadow:none;text-decoration:none}
.foot .social a:hover{color:#fff}
.foot-meta{display:flex;flex-direction:column;gap:1.25rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
@media(min-width:1024px){ .foot-meta{flex-direction:row;align-items:center;justify-content:space-between} }
.foot-meta .foot-contact{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.foot-meta .pay{margin-top:0}
.legal a:hover{color:var(--gray-900);text-decoration:underline}

/* sub-page hero */
.page-hero{background:linear-gradient(to bottom,var(--primary-50),#fff)}
.page-hero .pad{padding-top:3.5rem;padding-bottom:2.5rem;max-width:52rem}
@media(min-width:1024px){ .page-hero .pad{padding-top:5rem;padding-bottom:3rem} }
.page-hero h1{margin-bottom:1rem}
.page-hero .lead{font-size:1.0625rem;max-width:44rem;line-height:1.65}
@media(min-width:1024px){ .page-hero .lead{font-size:1.25rem} }
.page-meta{margin-top:1.25rem;font-size:.875rem;color:var(--gray-500)}

/* legal documents: table of contents + readable prose */
.doc{display:grid;gap:2rem}
@media(min-width:1024px){ .doc{grid-template-columns:15rem 1fr;gap:4rem;align-items:start} }
.toc{border:1px solid var(--line);border-radius:var(--radius-xl);padding:1.25rem}
@media(min-width:1024px){ .toc{position:sticky;top:5.5rem;border:0;padding:0} }
.toc p{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-400);margin-bottom:.75rem}
.toc ol{display:grid;gap:.125rem;font-size:.875rem}
.toc a{display:block;padding:.3125rem .625rem;border-radius:var(--radius-md);color:var(--gray-600);transition:all var(--t)}
.toc a:hover{background:var(--gray-100);color:var(--gray-900)}
.prose{max-width:46rem;color:var(--gray-700);font-size:1rem;line-height:1.75}
.prose section{padding-top:2rem}
.prose section:first-of-type{padding-top:0}
.prose .note+section{padding-top:2.5rem}
.prose h2{font-size:1.375rem;color:var(--gray-900);margin-bottom:.75rem}
@media(min-width:768px){ .prose h2{font-size:1.5rem} }
.prose h3{color:var(--gray-900);margin-bottom:.5rem}
.prose p+p,.prose p+ul,.prose ul+p,.prose p+ol,.prose .note+ul{margin-top:.875rem}
.prose ul,.prose ol{display:grid;gap:.5rem;padding-left:1.25rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li::marker{color:var(--gray-400)}
.prose strong{color:var(--gray-900);font-weight:600}
.prose a,.faq p a,.assur a,.contact-more a{color:var(--primary-600);font-weight:500}
.prose a:hover,.faq p a:hover,.assur a:hover,.contact-more a:hover{text-decoration:underline}
.note{border:1px solid var(--primary-200);background:var(--primary-50);border-radius:var(--radius-xl);padding:1.25rem 1.5rem}
.note.warn{border-color:var(--gray-300);background:var(--gray-50);border-left:4px solid #000}

/* link cards (about / contact) */
.link-card{display:flex;flex-direction:column;gap:.75rem;transition:border-color var(--t)}
.link-card:hover{border-color:var(--gray-300)}
.link-card p{font-size:.875rem;color:var(--gray-600);flex:1}
.more{display:inline-flex;align-items:center;gap:.375rem;font-size:.875rem;font-weight:500;color:var(--primary-600)}
.more svg{width:1rem;height:1rem;transition:transform var(--t)}
.link-card:hover .more svg{transform:translateX(2px)}
.contact-grid{display:grid;gap:1rem}
@media(min-width:640px){ .contact-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .contact-grid{grid-template-columns:repeat(4,1fr)} }
.contact-more{display:grid;gap:1rem;margin-top:1rem}
@media(min-width:768px){ .contact-more{grid-template-columns:repeat(3,1fr)} }
.plain-list{display:grid;gap:.5rem;font-size:.875rem;color:var(--gray-600)}
.plain-list li{padding-left:1rem;position:relative}
.plain-list li::before{content:"";position:absolute;left:0;top:.6rem;width:.3rem;height:.3rem;border-radius:9999px;background:var(--gray-400)}
.about-band{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:768px){ .about-band{flex-direction:row;align-items:center;justify-content:space-between} }
.about-band h2{font-weight:600;font-size:1.5rem}
.about-band p{opacity:.6;margin-top:.375rem}
.contact-more .social a{color:var(--gray-600);font-weight:400}
.contact-more .social a:hover{color:#fff;text-decoration:none}
.site-foot .legal{margin-inline:1rem;padding-inline:0}
@media(min-width:1024px){ .site-foot .legal{margin-inline:2rem} }
/* about page (slimmed 2026-09-13) */
.about-stats{display:grid;gap:1rem;margin-bottom:1rem}
@media(min-width:640px){ .about-stats{grid-template-columns:repeat(3,1fr)} }
.about-stats>div{border:1px solid var(--line);border-radius:var(--radius-xl);padding:1.5rem}
.about-stats .v{font-family:var(--font-display);font-size:2.25rem;font-weight:500;letter-spacing:-.03em;color:var(--primary-700)}
.about-stats .k{font-size:.875rem;color:var(--gray-500);margin-top:.25rem}
.about-values .why-card p{font-size:.875rem}

/* footer: Locations moved out of the column grid into a full-width block (2026-09-14, 25 geo pages) */
.foot-locs{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.foot-locs h3{margin-bottom:.75rem}
.foot-loc-row{display:grid;gap:.375rem;margin-top:.75rem}
@media(min-width:768px){ .foot-loc-row{grid-template-columns:11rem 1fr;gap:1rem} }
.foot-loc-c{font-size:.8125rem;font-weight:500;color:var(--gray-500)}
.foot .foot-locs ul{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem}
/* geo pages: place-specific prose under the Why grid */
.geo-local{max-width:48rem}
.geo-local h3{font-size:1.25rem;margin-bottom:.75rem}
.geo-local p{color:var(--gray-600);margin-top:.75rem;line-height:1.7}

/* geo landing pages (web-hosting-{place}, 2026-09-14) */
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;font-size:.875rem;color:var(--gray-500);margin-bottom:1.5rem}
.crumbs a{color:var(--gray-600)}
.crumbs a:hover{color:var(--gray-900);text-decoration:underline}
@media(min-width:1024px){ .geo-hero .hero h1{font-size:3.75rem} }
@media(min-width:1280px){ .geo-hero .hero h1{font-size:4.25rem} }
.geo-hero .hero{padding-bottom:1rem}
@media(min-width:1024px){ .geo-grid{grid-template-columns:repeat(3,1fr)} }
.geo-split{display:grid;gap:2rem}
@media(min-width:1024px){ .geo-split{grid-template-columns:1.2fr 1fr;gap:4rem;align-items:start} }
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-xl);background:#fff}
.data-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.data-table caption{text-align:left;padding:1rem 1.25rem .25rem;font-size:.875rem;font-weight:500;color:var(--gray-500)}
.data-table th,.data-table td{padding:.875rem 1.25rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.data-table tbody tr:last-child th,.data-table tbody tr:last-child td{border-bottom:0}
.data-table thead th{font-weight:500;color:var(--gray-500);font-size:.875rem}
.data-table tbody th{font-weight:500;color:var(--gray-900)}
.data-table td{color:var(--gray-700)}
.data-table .hl{background:var(--primary-50);color:var(--gray-900)}
.data-table tr.hl td{background:var(--primary-50)}
.data-table.compare{min-width:44rem}
.table-note{margin-top:.75rem;font-size:.8125rem;color:var(--gray-500)}
.steps .why-card{display:flex;flex-direction:column;gap:.5rem}
.step-n{width:2rem;height:2rem;border-radius:9999px;background:var(--primary-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}
.faq summary h3{font:inherit;font-weight:500;margin:0;letter-spacing:0}
.geo-cta{display:flex;flex-direction:column;gap:1.5rem;padding:2rem 1.5rem;border-radius:var(--radius-xl);
  background:var(--primary-50);border:1px solid var(--primary-200)}
@media(min-width:768px){ .geo-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:2.5rem 3rem} }
.geo-cta h2{font-size:1.5rem}
.geo-cta p{color:var(--gray-600);margin-top:.375rem}

/* ==========================================================================
   ISP SQUARE ADDITIONS (2026-09-14) — everything above is the shared
   HostKarle/rankyak design system, untouched. Only add below this line.
   ========================================================================== */

/* brand: bitmap logo (assets/img/brand/logo.png, 1101x168 = 6x the 28px header height) */
.brand img{height:1.75rem;width:auto;display:block}
.foot-about .brand{display:inline-flex}
.foot-about .brand img{height:2rem}

/* how it works: numbered cards */
.how-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){ .how-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1024px){ .how-grid{grid-template-columns:repeat(4,1fr)} }
.how-card{border:1px solid var(--line);border-radius:var(--radius-xl);padding:1.5rem;background:#fff;
  display:flex;flex-direction:column;gap:.75rem}
.how-n{width:2.25rem;height:2.25rem;border-radius:9999px;background:var(--primary-50);color:var(--primary-700);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1rem;font-weight:500;box-shadow:inset 0 0 0 1px var(--primary-200)}
.how-card h3{font-size:1.125rem;margin-top:.25rem}
.how-card p{font-size:.875rem;color:var(--gray-600)}

/* two-column split (copy left, card right) */
.split{display:grid;gap:2rem;align-items:center}
@media(min-width:1024px){ .split{grid-template-columns:1.1fr 1fr;gap:4rem} }
.plain-list{display:grid;gap:.875rem;font-size:.9375rem;color:var(--gray-600);padding:0;list-style:none}
.plain-list li{position:relative;padding-left:1.5rem}
.plain-list li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;
  border-radius:9999px;background:var(--primary-600)}
.plain-list b{color:var(--gray-900);font-weight:600}

/* partner tree */
.tree-card{padding:2rem 1.5rem;background:var(--gray-50)}
.tree{display:grid;justify-items:center;gap:0}
.tree-lvl{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem}
.tree-node{border:1px solid var(--line);border-radius:var(--radius-lg);padding:.625rem .875rem;
  background:#fff;text-align:center;min-width:8.5rem;font-size:.875rem}
.tree-node b{display:block;font-family:var(--font-display);font-weight:500;color:var(--gray-900)}
.tree-node span{display:block;color:var(--gray-500);font-size:.75rem;margin-top:.125rem}
.tree-node.you{background:var(--primary-700);border-color:var(--primary-700)}
.tree-node.you b{color:#fff}
.tree-node.you span{color:#fff;opacity:.75}
.tree-link{width:1px;height:1.5rem;background:var(--gray-300)}
.tree-note{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--gray-600);text-align:center}

/* pricing without a price table: two buttons under the heading */
.price-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.875rem;margin-bottom:2rem}
.price-cta .btn{padding:.875rem 1.75rem;font-size:1.0625rem}
#pricing .assur{max-width:60rem;margin-inline:auto}

/* inline links inside section intros */
.sec-head p a{color:var(--primary-600);font-weight:500}
.sec-head p a:hover{text-decoration:underline}

/* hero background, calm version (2026-09-14) — replaces the red dot grid and the
   two pink side glows (too loud once the palette went red). Faint grey grid lines
   fading out from the top centre, one very light red tint behind the heading. */
.hero-sec::before{
  background-image:
    linear-gradient(to right,var(--gray-200) 1px,transparent 1px),
    linear-gradient(to bottom,var(--gray-200) 1px,transparent 1px);
  background-size:56px 56px;background-position:center top;opacity:.55;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 0%,#000 10%,transparent 100%);
          mask-image:radial-gradient(60% 70% at 50% 0%,#000 10%,transparent 100%)}

.hero-sec::after{background:
    radial-gradient(50% 38% at 50% 0%,#fef2f4 0%,#fef2f400 100%),
    linear-gradient(to bottom,#ffffff00 75%,#fff 100%)}
@media(min-width:1024px){
  .hero-sec::after{background:
    radial-gradient(40% 40% at 50% 0%,#fef2f4 0%,#fef2f400 100%),
    linear-gradient(to bottom,#ffffff00 75%,#fff 100%)}
}

/* ==========================================================================
   ILLUSTRATED CARDS (2026-09-14) — Open Doodles (CC0, opendoodles.com),
   pink #FF5678 recoloured to logo red. Files in assets/img/doodles/.
   ========================================================================== */
.ill-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:1024px){ .ill-grid{grid-template-columns:3fr 2fr} .ill-grid .ill-card:nth-child(3){order:4} .ill-grid .ill-card:nth-child(4){order:3} }
.ill-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:1rem;background:var(--gray-50);
  border:1px solid var(--line);border-radius:var(--radius-2xl);padding:1.75rem 1.75rem 0;min-height:22rem}
.ill-copy h3{font-size:1.375rem;margin-bottom:.5rem}
.ill-copy p{font-size:.9375rem;color:var(--gray-600);max-width:26rem}
.ill-art{position:relative;margin-top:auto;align-self:center;width:min(100%,22rem)}
.ill-art::before{content:"";position:absolute;left:50%;bottom:-30%;width:95%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;background:var(--primary-50)}
.ill-art img{position:relative;display:block;width:100%;height:auto;animation:illFloat 7s ease-in-out infinite}
@media(min-width:768px){
  .ill-card.wide{flex-direction:row;align-items:center;padding:0 0 0 2rem}
  .ill-card.wide .ill-copy{flex:1 1 45%}
  .ill-card.wide .ill-art{flex:0 0 52%;align-self:flex-end;margin-top:2rem}
}
.ill-chip{position:absolute;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;background:#fff;
  border:1px solid var(--line);border-radius:9999px;padding:.35rem .75rem;font-size:.8125rem;font-weight:500;color:var(--gray-900);
  box-shadow:var(--shadow-md);animation:illBob 4.5s ease-in-out infinite}
.ill-chip svg{width:.95rem;height:.95rem;color:var(--primary-600)}
.ill-chip.c1{top:8%;left:0}
.ill-chip.c2{top:34%;right:0;animation-delay:-2.2s}
@keyframes illFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5rem)}}
@keyframes illBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.4rem)}}

@media(prefers-reduced-motion:reduce){
  .ill-art img,.ill-chip{animation:none!important}
}

/* ==========================================================================
   PAGE MOTION (2026-09-14) — kept quiet on purpose: things fade up once as they
   scroll in, a few one-off touches per section, and only slow loops.
   Reveal classes are added by main.js, so without JS everything just shows.
   ========================================================================== */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)}
.rv.in{opacity:1;transform:none}

/* problem: the "with ISP Square" ticks pop in one by one */
.vs-col.good li svg{transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.vs-col.good.in li svg,.no-motion .vs-col.good li svg{transform:none}
.vs-col.good li:nth-child(1) svg{transition-delay:.35s}.vs-col.good li:nth-child(2) svg{transition-delay:.5s}
.vs-col.good li:nth-child(3) svg{transition-delay:.65s}.vs-col.good li:nth-child(4) svg{transition-delay:.8s}
.vs-col.good li:nth-child(5) svg{transition-delay:.95s}.vs-col.good li:nth-child(6) svg{transition-delay:1.1s}

/* features: icon tile warms up on hover */
.why-card .tile{transition:background var(--t),color var(--t),transform var(--t)}
.why-card:hover .tile{background:var(--primary-50);color:var(--primary-700);transform:translateY(-2px) rotate(-6deg)}

/* how it works: a line joins the steps, numbers fill red in turn */
@media(min-width:1024px){
  .how-grid{position:relative}
  .how-grid::before{content:"";position:absolute;left:3rem;right:3rem;top:2.625rem;height:1px;z-index:0;
    background:repeating-linear-gradient(to right,var(--primary-300) 0 6px,transparent 6px 12px);
    transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .2s}
  .how-grid.in::before,.no-motion .how-grid::before{transform:none}
  .how-card{position:relative;z-index:1}
}
.how-n{transition:background .4s var(--ease),color .4s var(--ease)}
.how-grid.in .how-card:nth-child(1) .how-n{background:var(--primary-600);color:#fff;transition-delay:.3s}
.how-grid.in .how-card:nth-child(2) .how-n{background:var(--primary-600);color:#fff;transition-delay:.7s}
.how-grid.in .how-card:nth-child(3) .how-n{background:var(--primary-600);color:#fff;transition-delay:1.1s}
.how-grid.in .how-card:nth-child(4) .how-n{background:var(--primary-600);color:#fff;transition-delay:1.5s}

/* partners: commission travels up the tree, "You" glows when it lands */
.tree-link{position:relative}
.tree-link i{position:absolute;left:50%;bottom:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--primary-600);opacity:0;animation:treeUp 4s linear infinite}
.tree > .tree-link:nth-child(4) i{animation-delay:0s}   /* sub-partner -> partner first */
.tree > .tree-link:nth-child(2) i{animation-delay:.9s}  /* then partner -> you */
@keyframes treeUp{0%{opacity:0;transform:translateY(0)}5%{opacity:1}22%{opacity:1;transform:translateY(-1.5rem)}27%,100%{opacity:0;transform:translateY(-1.5rem)}}
.tree-node.you{animation:treeGlow 4s ease-out infinite 1.9s}
@keyframes treeGlow{0%{box-shadow:0 0 0 0 #e62b4a55}25%{box-shadow:0 0 0 .6rem #e62b4a00}100%{box-shadow:0 0 0 0 #e62b4a00}}

/* trust + pricing doodles (same .ill-art as the illustrated cards) */
.trust-row{display:grid;gap:2rem;align-items:center}
.trust-row .assur{margin-top:0}
.trust-art{width:min(100%,19rem);margin:0 auto}
@media(min-width:1024px){
  .trust-row{grid-template-columns:1fr 20rem}
  .trust-row .assur{grid-template-columns:1fr}
}
.price-art{width:min(70%,15rem);margin:0 auto 2rem}
.price-art::before{bottom:0;width:78%}
.trust-art::before{bottom:-4%;width:82%}
.price-art .ill-chip.c1{left:-12%}
.price-art .ill-chip.c2{right:-10%}

/* faq: answer eases in when opened */
.faq details[open] p{animation:faqIn .35s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .vs-col.good li svg{transform:none;transition:none}
  .tree-link i,.tree-node.you,.faq details[open] p{animation:none!important}
  .how-grid::before{transform:none!important;transition:none!important}
}

/* ==========================================================================
   NO-OVERLAP FIX (2026-09-14) — labels never sit on a doodle and the hero
   toast never covers the dashboard. Chips live in a strip reserved above the
   image; the toast lives in the empty space under the side menu.
   ========================================================================== */
.ill-art{padding-top:5.25rem}
.ill-art:not(:has(.c2)){padding-top:2.75rem}
.ill-art .ill-chip.c1{top:0;left:0;right:auto;bottom:auto}
.ill-art .ill-chip.c2{top:2.4rem;right:0;left:auto;bottom:auto}
.price-art .ill-chip.c1{left:-12%}
.price-art .ill-chip.c2{right:-12%}

/* hero sub-heading: one short line (2026-09-14) */
.hero .lead{font-size:1rem;max-width:none;text-wrap:wrap}
@media(min-width:1024px){ .hero .lead{font-size:1.125rem;white-space:nowrap} }

/* ==========================================================================
   HERO + STATS ABOVE THE FOLD (2026-09-15) — hero and the stats band fit in
   one screen together down to a 1366x657 laptop viewport. ISP logo row
   removed from the hero; the band is one slim row (icon beside number, label below).
   Big hero sizes come back only on tall screens (min-height 880px).
   ========================================================================== */
.hero{padding-top:3rem;padding-bottom:3rem}
.hero h1{margin-bottom:1.25rem}
.hero-cta{margin-top:2rem}
/* trust points: soft pills under the buttons */
.hero-trust{margin-top:1.75rem;gap:.5rem}
.hero-trust>div{padding:.375rem .875rem;border:1px solid var(--line);border-radius:9999px;
  background:#ffffffcc;color:var(--gray-600);font-size:.8125rem}
@media(max-width:639px){
  .hero-cta{flex-wrap:nowrap;gap:.625rem}
  .hero-cta .btn{width:auto;flex:1 1 auto;padding:.8125rem .75rem;font-size:1rem;white-space:nowrap}
}
@media(min-width:640px){ .hero-trust{gap:.75rem} }
@media(min-width:1024px){
  .hero{padding-top:3.25rem;padding-bottom:2.5rem}
  .hero h1{font-size:4.25rem;line-height:1.06}
  .hero .lead{font-size:1.1875rem}
  .hero-cta{margin-top:2.25rem}
  .hero-trust{margin-top:2rem}
}
@media(min-width:1280px) and (min-height:880px){
  .hero{padding-top:5.5rem;padding-bottom:4.5rem}
  .hero h1{font-size:4.75rem;margin-bottom:1.5rem}
  .hero-cta{margin-top:2.5rem}
  .hero-trust{margin-top:2.25rem}
}

/* stats band: dark, slim, one row on desktop, 2x2 below */
#stats .pad{padding-top:0}
.band{background:#0b0b0c;background-image:radial-gradient(50rem 12rem at 50% -60%,#e62b4a40,transparent);
  padding:1rem;border-radius:var(--radius-xl)}
.band-grid{grid-template-columns:repeat(2,1fr);gap:1rem .75rem;text-align:left}
.band-grid>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:.75rem;align-items:start}
.band .i{align-self:center}
.band .i{grid-row:span 2;width:1.25rem;height:1.25rem;padding:.5rem;box-sizing:content-box;
  border-radius:.625rem;color:#ff5a74;background:#e62b4a26}
.band .v{font-size:1.375rem;font-weight:600;line-height:1.15;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 45%,#ffc2cc);-webkit-background-clip:text;background-clip:text;color:transparent}
.band .k{font-size:.75rem;line-height:1.35;opacity:.65;margin-top:.125rem}
@media(min-width:768px){ .band{padding:1.25rem 1.5rem} }
@media(min-width:1024px){
  #stats .pad{padding-top:1.5rem}
  .band{padding:1.25rem .5rem}
  .band-grid{grid-template-columns:repeat(4,1fr);gap:0}
  .band-grid>div{padding-inline:1.25rem}
  .band-grid>div+div{border-left:1px solid #ffffff1a}
  .band .i{width:1.375rem;height:1.375rem;padding:.625rem}
  .band .v{font-size:1.75rem}
  .band .k{font-size:.8125rem}
}

/* ==========================================================================
   PRICE TABLE (2026-09-15) — owner asked for real prices: 3 plans + a 15-day
   trial card. Reuses the shared .toggle / .price-frame / .plan components above;
   this block adds the sliding toggle thumb, the monthly/yearly swap and the trial card.
   Yearly is the default (no-JS pages show yearly too) and the page nudges toward it.
   ========================================================================== */
#pricing .toggle{margin-bottom:.75rem}
#pricing .toggle-track{position:relative;font-size:.875rem}
#pricing .toggle-track button{position:relative;z-index:1;padding:.5rem 1.25rem}
#pricing .toggle-track button .badge-green{display:inline-flex}
.toggle-thumb{position:absolute;top:.25rem;bottom:.25rem;left:0;width:0;border-radius:9999px;background:#fff;
  box-shadow:var(--shadow-sm);opacity:0;transition:transform .4s cubic-bezier(.34,1.3,.64,1),width .4s var(--ease)}
.toggle-track.slide .toggle-thumb{opacity:1}
.toggle-track.slide button.on{background:transparent;box-shadow:none}

/* monthly/yearly copy swap: #pricing gets .is-m from main.js */
#pricing:not(.is-m) .only-m,#pricing.is-m .only-y{display:none}
.cycle-hint{text-align:center;font-size:.875rem;color:var(--gray-600);margin-bottom:2rem;min-height:1.5rem}
.cycle-hint svg{display:inline-block;width:1rem;height:1rem;vertical-align:-.2em;margin-right:.25rem;color:var(--green-600)}
.cycle-hint button,.plan-was button{color:var(--primary-700);font-weight:500;padding:0}
.cycle-hint button:hover,.plan-was button:hover{text-decoration:underline}
.cycle-hint>span{display:inline-block;animation:cycleIn .35s var(--ease)}
@keyframes cycleIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.plan-was{font-size:.8125rem;color:var(--gray-500)}
.plan-was>span{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .25rem}
.plan-was .save,.plan-was button{flex-basis:100%;width:max-content;max-width:max-content}
.plan-was .save{display:inline-block;padding:.0625rem .5rem;border-radius:9999px;
  background:var(--green-100);color:var(--green-800);font-weight:500;animation:savePop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes savePop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.plan-price .num{display:inline-block;font-variant-numeric:tabular-nums}
.plan-price .num.tick{animation:numTick .35s var(--ease)}
@keyframes numTick{from{opacity:.3;transform:translateY(-6px)}to{opacity:1;transform:none}}
.plan li span b{font-weight:600;color:var(--gray-900)}
/* featured plan: a red rule on top and a soft red wash */
.plan.featured{background:linear-gradient(180deg,var(--primary-50),#fff 9rem)}
.plan.featured::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--primary-600)}

/* 15-day trial card */
.trial-card{display:grid;gap:1.25rem;align-items:center;margin-top:1.5rem;padding:1.5rem;
  background:var(--gray-50);border:1px solid var(--line);border-radius:var(--radius-2xl);overflow:hidden}
.trial-card .ill-art.trial-art{padding-top:0;margin:0 auto;width:min(60%,12rem)}
.trial-art::before{bottom:-8%;width:80%}
.trial-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:9999px;
  background:var(--primary-50);color:var(--primary-700);box-shadow:inset 0 0 0 1px var(--primary-200);font-size:.8125rem;font-weight:500}
.trial-tag svg{width:.9rem;height:.9rem}
.trial-copy h3{font-size:1.375rem;margin:.75rem 0}
.trial-list{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.875rem;color:var(--gray-700)}
.trial-list li{display:flex;align-items:center;gap:.375rem}
.trial-list svg{width:1rem;height:1rem;color:var(--green-600);flex:none}
.trial-buy{display:flex;flex-direction:column;align-items:flex-start;gap:.625rem}
.trial-buy .plan-price{margin:0}
@media(min-width:768px){
  .trial-card{grid-template-columns:10rem 1fr;padding:1.5rem 2rem}
  .trial-card .ill-art.trial-art{width:100%}
  .trial-buy{grid-column:2}
}
@media(min-width:1024px){
  .trial-card{grid-template-columns:11rem 1fr auto;gap:2rem;padding:1.5rem 2.5rem}
  .trial-buy{grid-column:auto;align-items:center;text-align:center;padding-left:2rem;border-left:1px solid var(--line)}
}

@media(prefers-reduced-motion:reduce){
  .toggle-thumb,.cycle-hint>span,.plan-was .save,.plan-price .num.tick{transition:none!important;animation:none!important}
}

/* plan cards aligned row by row (2026-09-15): each card spans the 4 head rows
   + 6 feature rows of one shared grid, so a wrapped line in one card moves the
   same row in all three. Lists never stretch their gaps. 6 items per plan. */
.plan ul{align-content:start}
@media(min-width:900px){
  .price-inner>.plan{grid-row:span 10}
  .price-inner>.plan ul{grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:.625rem}
}

/* 2026-10-22: stop 1px sideways scroll at 390px (nav was 391.3px wide) */
@media(max-width:430px){ .nav{gap:.5rem} .nav-right{gap:.5rem} }