/* ==========================================================================
   EduPay — homepage (v2)
   Self-contained. Does NOT depend on home.css or seo.css, and does not
   affect them: the other ~26 pages keep loading the old files untouched.

   System rules, applied everywhere in this file:
   - ONE accent: --brand (#2563eb, the product blue). Green/amber appear only
     as payment-status semantics mirroring the real admin UI, never as decor.
   - ONE radius scale: --r-xs 8 (pills/badges) / --r-sm 12 (controls) /
     --r 18 (cards) / --r-lg 26 (media frames). Nothing else.
   - ONE type family: Manrope, self-hosted, variable 400-800, Greek subset.
   - Motion is CSS-only, transform/opacity only, and collapses under
     prefers-reduced-motion.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no third-party request) ---------- */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-latin.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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-greek.woff2') format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  /* brand */
  --brand:#2563eb;
  --brand-ink:#1d4ed8;
  --brand-deep:#1e3a8a;
  --brand-050:#eff6ff;
  --brand-100:#dbeafe;
  --brand-200:#bfdbfe;

  /* neutrals — one cool family, no warm/cool mixing */
  --n-950:#080d1a;
  --n-900:#0f172a;
  --n-800:#1e293b;
  --n-700:#334155;
  --n-500:#64748b;
  --n-400:#94a3b8;
  --n-300:#cbd5e1;
  --n-200:#e2e8f0;
  --n-150:#eaeff5;
  --n-100:#f1f5f9;
  --n-050:#f8fafc;

  /* semantic surfaces */
  --bg:#fff;
  --bg-sub:var(--n-050);
  --bg-deep:var(--n-950);
  --surface:#fff;
  --line:var(--n-200);
  --line-soft:var(--n-150);

  /* semantic text */
  --text:var(--n-900);
  --text-2:var(--n-700);
  --text-3:var(--n-500);

  /* on dark */
  --d-text:#f1f5f9;
  --d-text-2:rgba(226,232,240,.74);
  --d-text-3:rgba(226,232,240,.55);
  --d-line:rgba(255,255,255,.13);
  --d-surface:rgba(255,255,255,.05);

  /* payment status — semantic only, mirrors the admin UI */
  --ok:#047857;--ok-bg:#ecfdf5;--ok-line:#a7f3d0;
  --due:#b45309;--due-bg:#fffbeb;--due-line:#fde68a;

  /* radius scale */
  --r-xs:8px;--r-sm:12px;--r:18px;--r-lg:26px;--r-pill:999px;

  /* elevation — tinted to the neutral hue, never pure black */
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.04);
  --sh-2:0 10px 26px -8px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.04);
  --sh-3:0 30px 70px -22px rgba(15,23,42,.28),0 8px 20px rgba(15,23,42,.07);
  --sh-brand:0 12px 30px -10px rgba(37,99,235,.5);

  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --pad:clamp(20px,4vw,32px);
  --maxw:1200px;
  --sec:clamp(72px,8.5vw,124px);
  --navh:72px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--text-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01','cv11';
  overflow-wrap:break-word;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
strong{font-weight:700;color:var(--text)}
:target{scroll-margin-top:calc(var(--navh) + 24px)}
section[id]{scroll-margin-top:calc(var(--navh) + 24px)}

/* Focus: visible everywhere, never removed */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ---------- Bilingual switch (rules normally living in seo.css) ---------- */
html[lang="el"] .l-en{display:none !important}
html[lang="en"] .l-el{display:none !important}
html:not([lang="el"]) .l-el{display:none !important}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.sec--sub{background:var(--bg-sub)}

/* ---------- Type ---------- */
.h1{
  font-size:clamp(2.35rem,4.6vw,3.5rem);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:800;
  color:var(--text);
  text-wrap:balance;
}
.h2{
  font-size:clamp(1.95rem,3.6vw,2.9rem);
  line-height:1.08;
  letter-spacing:-.032em;
  font-weight:800;
  color:var(--text);
  text-wrap:balance;
}
.h3{
  font-size:1.1875rem;
  line-height:1.3;
  letter-spacing:-.018em;
  font-weight:700;
  color:var(--text);
}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.1875rem);
  line-height:1.6;
  color:var(--text-3);
  max-width:58ch;
}
.sec-head{max-width:62ch;margin-bottom:clamp(40px,5vw,64px)}
.sec-head .lede{margin-top:18px}
.sec-head--mid{margin-inline:auto;text-align:center}

/* the single permitted eyebrow (hero). Section headings carry themselves. */
.eyebrow{
  display:inline-block;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--brand-ink);
  background:var(--brand-050);
  border:1px solid var(--brand-100);
  padding:6px 13px;
  border-radius:var(--r-pill);
  margin-bottom:26px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  white-space:nowrap;
  font-weight:700;font-size:.9688rem;letter-spacing:-.005em;
  padding:14px 22px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:16px 26px;font-size:1.0312rem}

/* white on #2563eb = 5.17:1 — AA for normal text */
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--sh-brand)}
.btn--primary:hover{background:var(--brand-ink)}

.btn--line{background:#fff;color:var(--text);border-color:var(--n-300);box-shadow:var(--sh-1)}
.btn--line:hover{border-color:var(--n-400);background:var(--n-050)}

.btn--onDark{background:#fff;color:var(--n-900)}
.btn--onDark:hover{background:var(--n-100)}
.btn--ghostDark{background:transparent;color:var(--d-text);border-color:var(--d-line)}
.btn--ghostDark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}

.btn__ico{width:1.05em;height:1.05em;flex:none}

.tlink{
  display:inline-flex;align-items:center;gap:.4em;
  font-weight:700;color:var(--brand-ink);font-size:.9375rem;
}
.tlink svg{transition:transform .2s var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* ==========================================================================
   NAV — one line at desktop, 72px tall
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(255,255,255,.94)}
@supports not (backdrop-filter:blur(4px)){.nav{background:#fff}}

.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  height:var(--navh);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
}
.nav__logo{display:flex;align-items:center;flex:none;font-weight:800;letter-spacing:-.028em;font-size:1.1875rem;color:var(--text)}
.nav__logo img{width:26px;height:26px;border-radius:var(--r-xs);margin-right:9px}
.nav__logo span{color:var(--brand)}

.nav__links{display:flex;align-items:center;gap:clamp(10px,1.7vw,26px);margin-inline:auto}
.nav__links a{
  font-size:.9375rem;font-weight:600;color:var(--text-2);
  padding:8px 2px;position:relative;transition:color .16s var(--ease);
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:var(--brand);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__right{display:flex;align-items:center;gap:12px;flex:none}

.lang{display:inline-flex;background:var(--n-100);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.lang button{
  font-size:.75rem;font-weight:800;letter-spacing:.02em;
  padding:5px 11px;border-radius:var(--r-pill);color:var(--n-700);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.lang button.is-active{background:var(--brand);color:#fff}

.nav__login{font-size:.9375rem;font-weight:700;color:var(--text);padding:8px 4px}
.nav__login:hover{color:var(--brand-ink)}

.nav__burger{
  display:none;width:42px;height:42px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.nav__burger span{display:block;width:17px;height:1.8px;background:var(--text);border-radius:2px;transition:transform .22s var(--ease),opacity .18s var(--ease)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

.nav__drawer{
  display:none;
  border-top:1px solid var(--line);background:#fff;
  padding:14px var(--pad) 22px;
  /* if the list ever outgrows the screen, scroll it rather than pushing the
     CTA at the bottom out of reach */
  max-height:calc(100dvh - var(--navh));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nav__drawer[hidden]{display:none}
.nav__drawer a:not(.btn){
  display:block;padding:13px 2px;
  font-weight:600;color:var(--text-2);
  border-bottom:1px solid var(--line-soft);
}
.nav__drawer a:not(.btn):last-of-type{border-bottom:0}
.nav__drawer .btn{
  display:flex;width:100%;margin-top:18px;
  padding:15px 22px;border-bottom:0;
}

@media (max-width:1023px){
  .nav__links{display:none}
  .nav__login{display:none}
  .nav__burger{display:flex}
  .nav__right{margin-inline-start:auto}
  .nav__drawer:not([hidden]){display:block}
}
/* below this the logo + language toggle + burger already fill the bar;
   the drawer carries the primary CTA instead */
@media (max-width:600px){
  .nav__right .btn{display:none}
}

/* ==========================================================================
   HERO — asymmetric split, real product screenshot bleeding right
   ========================================================================== */
.hero{
  position:relative;
  padding-top:clamp(48px,6vw,88px);
  padding-bottom:clamp(52px,6vw,88px);
  overflow-x:clip;
  background:
    radial-gradient(120% 90% at 78% 0%,var(--brand-050) 0%,rgba(239,246,255,0) 62%),
    linear-gradient(180deg,#fff 0%,var(--n-050) 100%);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.12fr);
  gap:clamp(32px,4.5vw,68px);
  align-items:center;
}
.hero__title{margin-bottom:20px;max-width:19ch}
.hero__sub{font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6;color:var(--text-3);max-width:46ch}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* media */
.hero__media{position:relative}
.shot{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.shot img{width:100%;height:auto}

@media (min-width:701px) and (max-width:1239px){
  /* between the mobile crop and the desktop bleed the shot was a grey blur */
  .hero .shot img{width:132%;max-width:none}
  .hero .shot{overflow:hidden}
}
@media (min-width:1240px){
  /* run the screenshot off the right edge; .hero clips it */
  .hero__media{margin-right:calc((var(--maxw) - 100vw)/2 - var(--pad) - 56px)}
  /* and scale it up so the rows are actually legible */
  .hero .shot img{width:134%;max-width:none}
}
@media (max-width:1023px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__sub{max-width:60ch}
  .hero__media{margin-right:0}
  .hero__title{max-width:24ch}
}
/* Art direction: a 1700px-wide admin table is unreadable on a phone, so below
   700px the hero shows the parent view in a device instead. */
.hero__device{display:none}
@media (max-width:700px){
  .hero .shot{display:none}
  .hero__device{display:flex;justify-content:center;padding-top:6px}
  .hero__device .device{--dw:min(62vw,250px)}
}
@media (max-width:640px){
  .hero{padding-top:34px}
  .hero__ctas .btn{width:100%}
}


/* ==========================================================================
   DEVICE FRAME — one reusable phone shell so every phone screenshot on the
   page is presented the same way. Scales entirely off --dw.
   ========================================================================== */
.device{
  --dw:268px;
  position:relative;
  width:var(--dw);
  padding:calc(var(--dw) * .039);
  border-radius:calc(var(--dw) * .130);
  background:linear-gradient(155deg,#454c58 0%,#232a35 38%,#141920 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 1px rgba(255,255,255,.22),
    var(--sh-3);
  flex:none;
}
.device__screen{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--dw) * .091);
  background:#fff;
  aspect-ratio:9 / 19.5;
}
.device__screen img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
/* dynamic island */
.device::before{
  content:'';position:absolute;z-index:2;
  top:calc(var(--dw) * .065);
  left:50%;transform:translateX(-50%);
  width:calc(var(--dw) * .295);
  height:calc(var(--dw) * .087);
  border-radius:var(--r-pill);
  background:#0a0e14;
}

/* ==========================================================================
   PROOF BAND — replaces the old duplicated trust strip + marquee
   ========================================================================== */
.proof{border-block:1px solid var(--line);background:#fff}
.proof__list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.proof__item{
  padding:26px 24px;
  border-left:1px solid var(--line-soft);
}
.proof__item:first-child{border-left:0}
.proof__k{display:block;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.proof__v{display:block;font-size:.875rem;color:var(--text-3);margin-top:3px}
@media (max-width:860px){
  .proof__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof__item{padding:20px 18px;border-left:1px solid var(--line-soft)}
  .proof__item:nth-child(odd){border-left:0}
  .proof__item:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ==========================================================================
   STACK — the four steps of a month, as cards that stack on scroll.
   Pure CSS position:sticky. No library, no scroll listener, no jank.
   Each card sits 14px lower than the one before it, so the deck stays
   readable behind the top card.
   ========================================================================== */
.stack{position:relative}
.stack__card{
  position:sticky;
  top:calc(var(--navh) + 18px + var(--i,0) * 14px);
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);
  gap:clamp(26px,3.6vw,54px);
  align-items:center;
  min-height:clamp(370px,52vh,486px);
  padding:clamp(26px,3.2vw,48px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--sh-3);
}
.stack__card + .stack__card{margin-top:clamp(22px,2.6vw,38px)}
.stack__h{
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.12;letter-spacing:-.03em;font-weight:800;color:var(--text);
  margin-bottom:14px;text-wrap:balance;
}
.stack__copy p{color:var(--text-3);max-width:44ch}
.stack__points{margin-top:22px;display:grid;gap:11px}
.stack__points li{display:flex;gap:11px;align-items:flex-start;font-size:.9688rem;color:var(--text-2)}
.stack__fig{
  border-radius:var(--r);border:1px solid var(--line);
  overflow:hidden;box-shadow:var(--sh-2);background:#fff;
}
.stack__fig img{width:100%;height:auto}
.stack__fig--phone{
  border:0;box-shadow:none;background:none;border-radius:0;
  display:flex;justify-content:center;
}
.stack__fig--phone .device{--dw:clamp(150px,15.5vw,182px)}

@media (max-width:900px){
  /* still a deck, just single column and tighter so a card fits the screen */
  .stack__card{
    grid-template-columns:1fr;
    min-height:0;
    gap:20px;
    padding:22px;
    top:calc(var(--navh) + 10px + var(--i,0) * 9px);
  }
  .stack__card + .stack__card{margin-top:16px}
  .stack__copy p{max-width:60ch}
  .stack__points{margin-top:16px;gap:9px}
  .stack__points li{font-size:.9062rem}
  .stack__fig--phone .device{--dw:clamp(116px,30vw,142px)}
}

/* A sticky card taller than the screen would trap its own content, so on
   short viewports the deck degrades to a plain list. */
@media (max-width:900px) and (max-height:620px){
  .stack__card{position:static}
}

/* check bullet, shared */
.tick{
  flex:none;width:19px;height:19px;border-radius:50%;
  background:var(--brand-050);border:1px solid var(--brand-100);
  display:grid;place-items:center;margin-top:2px;
}
.tick svg{width:11px;height:11px;color:var(--brand-ink)}

/* ==========================================================================
   FEATURES — bento, 6 items → exactly 6 cells, mixed weights & backgrounds
   ========================================================================== */
.bento{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}
.cell{
  grid-column:span 2;
  border:1px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:var(--sh-1);
  padding:26px;
  display:flex;flex-direction:column;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.cell:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.cell--3{grid-column:span 3}
.cell--4{grid-column:span 4}
.cell--6{grid-column:span 6}
.cell--row{flex-direction:row;align-items:center;gap:22px;padding:24px 26px}
.cell--row .cell__ico{margin-bottom:0}
.cell--row .cell__txt2{display:grid;gap:5px;padding:0}
.cell--row p{max-width:78ch}
.cell h3{margin-bottom:9px}
.cell p{font-size:.9375rem;color:var(--text-3)}
.cell__ico{
  width:38px;height:38px;border-radius:var(--r-xs);
  background:var(--brand-050);border:1px solid var(--brand-100);
  display:grid;place-items:center;margin-bottom:18px;
}
.cell__ico svg{width:19px;height:19px;color:var(--brand-ink)}


/* a cell whose claim is proved by a real screen, not by a stock photo */
.cell--dev{position:relative;overflow:hidden;padding-right:186px;min-height:212px}
.cell--dev .cell__dev{position:absolute;right:28px;bottom:-84px}
.cell--dev .cell__dev .device{--dw:124px}
@media (max-width:1000px){
  .cell--dev{padding-right:150px}
  .cell--dev .cell__dev{right:14px;bottom:-92px}
  .cell--dev .cell__dev .device{--dw:106px}
}
@media (max-width:640px){
  .cell--dev{padding-right:132px}
}

/* the one dark cell — deliberate contrast anchor inside a light page */
.cell--deep{
  background:
    radial-gradient(90% 120% at 90% 0%,rgba(37,99,235,.42) 0%,rgba(37,99,235,0) 60%),
    var(--n-950);
  border-color:rgba(255,255,255,.1);
}
.cell--deep h3{color:#fff}
.cell--deep p{color:var(--d-text-2)}
.cell--deep .cell__ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.cell--deep .cell__ico svg{color:#fff}

/* live status row inside the payment-status cell */
.statrow{margin-top:auto;padding-top:20px;display:grid;gap:8px}
.statrow div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.875rem;font-weight:600;color:var(--text-2);
  padding:9px 12px;border:1px solid var(--line-soft);border-radius:var(--r-xs);background:var(--n-050);
}
.pill{
  font-size:.6875rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);border:1px solid;
}
.pill--ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.pill--due{color:var(--due);background:var(--due-bg);border-color:var(--due-line)}

@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell,.cell--3,.cell--4{grid-column:span 1}
  .cell--6{grid-column:span 2}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr}
  .cell,.cell--3,.cell--4,.cell--6{grid-column:span 1}
  .cell--row{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ==========================================================================
   PARENTS — photo + real parent screen
   ========================================================================== */
.par{background:var(--bg-sub);border-block:1px solid var(--line)}
.par__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.par__media{position:relative}
.par__photo{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh-2);aspect-ratio:4/5;
}
.par__photo img{width:100%;height:100%;object-fit:cover}
.par__screen{position:absolute;left:4%;bottom:-34px}
.par__screen .device{--dw:clamp(126px,13vw,176px)}
.par__list{margin-top:26px;display:grid;gap:14px}
.par__list li{display:flex;gap:12px;align-items:flex-start}
.par__list b{display:block;color:var(--text);font-weight:700;font-size:.9688rem}
.par__list span{font-size:.9375rem;color:var(--text-3)}
.par__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .par__grid{grid-template-columns:1fr;gap:52px}
  .par__media{max-width:460px}
  .par__screen{left:3%;bottom:-26px}
  .par__screen .device{--dw:min(34vw,140px)}
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{
  border:1px solid var(--line);border-radius:var(--r);
  background:#fff;padding:30px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
}
.plan{transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.plan--best:hover{box-shadow:0 26px 60px -20px rgba(37,99,235,.42),0 2px 8px rgba(15,23,42,.05)}
.plan--best{
  border-color:var(--brand-200);
  box-shadow:0 20px 50px -20px rgba(37,99,235,.35),0 2px 8px rgba(15,23,42,.05);
  position:relative;
}
.plan__flag{
  position:absolute;top:-12px;left:30px;
  font-size:.6875rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:var(--brand);
  padding:5px 12px;border-radius:var(--r-pill);
  box-shadow:var(--sh-brand);
}
.plan__name{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.plan__cap{font-size:.875rem;color:var(--text-3);margin-top:3px}
.plan__price{display:flex;align-items:baseline;gap:6px;margin:22px 0 24px}
.plan__num{font-size:3rem;line-height:1;font-weight:800;letter-spacing:-.045em;color:var(--text);font-variant-numeric:tabular-nums}
.plan__per{font-size:.9375rem;color:var(--text-3);font-weight:600}
.plan__list{display:grid;gap:11px;margin-bottom:28px}
.plan__list li{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem;color:var(--text-2)}
.plan .btn{margin-top:auto;width:100%}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}


/* Custom / white-label band. Deliberately a different shape from .plan so it
   reads as "a different kind of thing", not a fourth tier without a price. */
.custom{
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,3vw,48px);
  align-items:center;
  padding:clamp(26px,3vw,38px);
  border:1px solid var(--brand-100);
  border-radius:var(--r);
  background:
    radial-gradient(120% 160% at 100% 0%,rgba(37,99,235,.07) 0%,rgba(37,99,235,0) 60%),
    var(--brand-050);
}
.custom__h{
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.2;letter-spacing:-.025em;font-weight:800;color:var(--text);
  margin-bottom:10px;
}
.custom__copy p{font-size:.9688rem;color:var(--text-2);max-width:62ch}
.custom__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.custom__tags li{
  font-size:.8125rem;font-weight:700;color:var(--brand-ink);
  background:#fff;border:1px solid var(--brand-100);
  padding:6px 12px;border-radius:var(--r-pill);
}
.custom__act{display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center;min-width:210px}
.custom__note{font-size:.8125rem;line-height:1.45;color:var(--text-3)}

@media (max-width:820px){
  .custom{grid-template-columns:1fr;gap:22px}
  .custom__act{align-items:flex-start;text-align:left}
  .custom__act .btn{width:100%}
  .custom__note{max-width:none}
}

/* ==========================================================================
   LOCAL — editorial lead + image tiles for the niche pages
   ========================================================================== */
.local__lead{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;margin-bottom:clamp(38px,4.5vw,58px);
}
.local__cols{display:grid;gap:22px}
.local__col b{display:block;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.015em}
.local__col p{font-size:.9375rem;color:var(--text-3)}

.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tile{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:#fff;box-shadow:var(--sh-1);
  display:block;transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tile__fig{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--n-100)}
.tile__fig img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.tile:hover .tile__fig img{transform:scale(1.04)}
.tile__lbl{
  padding:14px 16px;font-size:.9062rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.tile__lbl svg{width:14px;height:14px;color:var(--n-400);transition:transform .2s var(--ease),color .2s var(--ease)}
.tile:hover .tile__lbl svg{transform:translateX(3px);color:var(--brand)}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.local__lead{grid-template-columns:1fr;gap:30px}}
@media (max-width:620px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__list{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;
  font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;color:var(--text);
  transition:color .16s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--brand-ink)}
.faq__sign{
  flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  position:relative;transition:background .2s var(--ease),border-color .2s var(--ease);
}
.faq__sign::before,.faq__sign::after{
  content:'';position:absolute;background:var(--text-2);border-radius:2px;
  transition:transform .24s var(--ease),background .2s var(--ease);
}
.faq__sign::before{width:10px;height:1.7px}
.faq__sign::after{width:1.7px;height:10px}
.faq__item[open] .faq__sign{background:var(--brand);border-color:var(--brand)}
.faq__item[open] .faq__sign::before,.faq__item[open] .faq__sign::after{background:#fff}
.faq__item[open] .faq__sign::after{transform:rotate(90deg)}
.faq__a{padding:0 4px 24px;color:var(--text-3);max-width:68ch}
.faq__a a{color:var(--brand-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .faq__item[open] .faq__a{animation:faqIn .3s var(--ease) both}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ==========================================================================
   CONTACT — quiet row, not three cards
   ========================================================================== */
.contact__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.contact__cell{padding:28px;border-left:1px solid var(--line-soft)}
.contact__cell:first-child{border-left:0}
.contact__cell b{display:block;font-size:.8125rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.contact__cell a.big{display:block;font-size:1.0625rem;font-weight:700;color:var(--text);letter-spacing:-.015em;margin-bottom:4px}
.contact__cell a.big:hover{color:var(--brand-ink)}
.contact__cell p{font-size:.9375rem;color:var(--text-3);margin-bottom:12px}
@media (max-width:820px){
  .contact__row{grid-template-columns:1fr}
  .contact__cell{border-left:0;border-top:1px solid var(--line-soft)}
  .contact__cell:first-child{border-top:0}
}

/* ==========================================================================
   CLOSING BLOCK — CTA + footer are one deliberate dark unit at the page end
   ========================================================================== */
.end{
  background:
    radial-gradient(80% 120% at 50% 0%,rgba(37,99,235,.34) 0%,rgba(37,99,235,0) 62%),
    var(--bg-deep);
  color:var(--d-text);
  text-align:center;
  padding-block:clamp(72px,8vw,116px);
}
.end .h2{color:#fff;max-width:18ch;margin-inline:auto}
.end p{color:var(--d-text-2);max-width:52ch;margin:20px auto 0}
.end__ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
@media (max-width:640px){.end__ctas .btn{width:100%}}

.foot{background:var(--bg-deep);color:var(--d-text-2);padding-block:clamp(52px,6vw,76px) 0}
.foot__grid{
  display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));
  gap:clamp(26px,3vw,44px);
}
.foot__brand{display:flex;align-items:center;font-weight:800;font-size:1.1875rem;letter-spacing:-.028em;color:#fff;margin-bottom:14px}
.foot__brand img{width:26px;height:26px;border-radius:var(--r-xs);margin-right:9px}
.foot__brand span{color:var(--brand-200)}
.foot__blurb{font-size:.9062rem;color:var(--d-text-3);max-width:34ch}
.foot__h{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--d-text-3);margin-bottom:16px}
.foot a{display:block;font-size:.9062rem;padding:5px 0;color:var(--d-text-2);transition:color .16s var(--ease)}
.foot a:hover{color:#fff}
.foot__base{
  margin-top:clamp(40px,5vw,64px);padding-block:24px;
  border-top:1px solid var(--d-line);
  font-size:.8438rem;color:var(--d-text-3);
}
.foot__base a{display:inline;color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* ==========================================================================
   MOTION — scroll reveal. Gated on .js so a JS failure can never hide content.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(16px)}
  /* never hide an element the keyboard has just landed on */
  .js .reveal:focus-within{opacity:1;transform:none}
  .js .reveal.is-in{
    opacity:1;transform:none;
    transition:opacity .6s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms);
  }

  /* the hero asset is the page's first impression, so it gets a longer,
     slightly scaled entrance that lands after the copy */
  .js .hero__media.reveal{transform:translateY(26px) scale(.985)}
  .js .hero__media.reveal.is-in{
    transition:opacity .85s var(--ease) .16s,transform .95s var(--ease) .16s;
  }

  /* cards arrive from a touch further down so the stack reads as a deck */
  .js .stack__card.reveal{transform:translateY(30px)}
  .js .cell.reveal,.js .plan.reveal,.js .tile.reveal{transform:translateY(20px) scale(.99)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}