/* ═══════════════════════════════════════════════════════════
   CleverlyBox — v2 marketing design system
   One stylesheet. Every page inherits it.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/_assets/fonts/inter-var.woff2) format('woff2');
}

:root{
  --rose:#E8508D;
  --rose-deep:#BE4C89;
  --rose-ink:#A83A72;
  --rose-glow:rgba(232,80,141,.16);
  --pass:#3FBF6E;
  --pass-dark:#4ADE80;
  --warn:#D89412;
  --warn-dark:#F5B841;
  /* Labels, eyebrows and captions once used Geist Mono; they are now Inter, like the
     rest of the site. `var(--mono)` is kept as a name so the ~30 pages that reference it
     need no edit — it simply resolves to Inter now. */
  --mono:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Real monospace, for ACTUAL code/terminal output only (SMTP config, .env, code
     samples). System font — no branded typeface — so nothing here is Geist Mono anymore,
     but Host/Port columns still align, which a proportional font would break. */
  --code:ui-monospace,'SF Mono','Cascadia Code',Consolas,'Liberation Mono',monospace;
  --wrap:1180px;
  --nav-h:62px;
}

/* ── theme scopes: any section can be .dark or .light ───── */
.dark{
  --bg:#0A090C; --bg-2:#111015; --bg-3:#17161C;
  --fg:#F4F1EE; --fg-dim:rgba(244,241,238,.64); --fg-faint:rgba(244,241,238,.42);
  --line:rgba(244,241,238,.11); --line-2:rgba(244,241,238,.20);
  --accent:var(--rose); --ok:var(--pass-dark); --amber:var(--warn-dark);
  --card:linear-gradient(180deg,#111015,#0A090C);
  --card-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(244,241,238,.05);
  --tint:rgba(244,241,238,.03);
  --navbg:rgba(10,9,12,.78);
  --grain:.20;
  /* light emitting from the top of a dark page */
  --bloom:radial-gradient(ellipse 70% 52% at 50% -8%,rgba(232,80,141,.16),transparent 62%);
  background:var(--bg); color:var(--fg);
}
.light{
  --bg:#FBF9F7; --bg-2:#FFFFFF; --bg-3:#F1EDE9;
  --fg:#12100F; --fg-dim:rgba(18,16,15,.64); --fg-faint:rgba(18,16,15,.44);
  --line:rgba(18,16,15,.10); --line-2:rgba(18,16,15,.18);
  --accent:var(--rose-ink); --ok:var(--pass); --amber:var(--warn);
  --card:linear-gradient(180deg,#FFFFFF,#FAF7F5);
  /* paper needs a contact shadow + a diffuse one; a single black blur reads as dirt */
  --card-shadow:0 30px 70px -40px rgba(18,16,15,.28), 0 2px 6px -2px rgba(18,16,15,.06);
  --tint:rgba(18,16,15,.022);
  --navbg:rgba(251,249,247,.82);
  --grain:.09;
  /* softer + wider: the dark page's bloom reads as a stain on white */
  --bloom:
    radial-gradient(ellipse 62% 46% at 50% -6%, rgba(232,80,141,.10), transparent 64%),
    radial-gradient(ellipse 40% 34% at 88% 4%, rgba(245,184,65,.07), transparent 70%);
  background:var(--bg); color:var(--fg);
}
.light.alt{--bg:#F1EDE9;--bg-2:#FAF8F6;--card:linear-gradient(180deg,#FFFFFF,#FAF8F6);background:var(--bg)}

*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0;background:#0A090C;color:#F4F1EE;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss03" 1;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--grain,.20);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode:overlay;
}
.glow{
  position:absolute;inset:0 0 auto 0;height:860px;pointer-events:none;z-index:0;
  background:var(--bloom);
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* ── type ───────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;letter-spacing:-.032em;font-weight:640;line-height:1.06}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem);letter-spacing:-.042em;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.036em;text-wrap:balance}
h3{font-size:1.24rem;letter-spacing:-.02em;line-height:1.32;font-weight:620}
p{margin:0}
a{color:inherit}
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:24px;font-weight:500;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}

/* ── typographic detail ──────────────────────────────────
   The uppercase labels carry a touch of extra tracking so they
   read as eyebrows, not shouting; figures use tabular numerals
   so columns of numbers line up as a table, not as prose.     */
.mono,.fine,.f-n,.tier-nm,.stat-l,.mega-t,.fcol h4,.crumb{letter-spacing:.02em}
.stat-n,.tier-pr,.calc-val,.bar-amt,.mx td b,.dns-row,.srv-tag{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.eyebrow.mid{justify-content:center}
.lede{font-size:1.15rem;color:var(--fg-dim);max-width:62ch;line-height:1.62;font-weight:420}
.em{color:var(--fg);font-weight:640}
.mono{font-family:var(--mono)}
.fine{font-family:var(--mono);font-size:.67rem;color:var(--fg-faint);line-height:1.75}

section{padding:104px 0;position:relative}
.sec-hd{max-width:70ch;margin-bottom:52px}
.sec-hd.mid{max-width:none;text-align:center}
.sec-hd.mid .lede{margin-left:auto;margin-right:auto;text-align:center}
.sec-hd h2{margin-bottom:18px}

/* ── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:3px;
  font-size:.9rem;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;
  letter-spacing:-.01em;white-space:nowrap;font-family:inherit;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s;
}
.btn-p{background:var(--rose);color:#fff}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 32px -10px rgba(232,80,141,.62)}
.btn-g{border-color:var(--line-2);color:var(--fg);background:transparent}
.btn-g:hover{border-color:var(--fg);transform:translateY(-2px)}
.btn-sm{padding:9px 17px;font-size:.83rem}

/* ── reveal ─────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ═══ NAV + MEGA MENU ═══════════════════════════════════ */
/* The nav inherits whichever theme its wrapper carries ($PAGE['nav']),
   so a light hero gets a light nav without a second stylesheet. */
.nav{
  position:sticky;top:0;z-index:120;
  background:var(--navbg);backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:30px;height:var(--nav-h)}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:28px;width:auto;display:block}
.nav-menu{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav-item{position:static}

/* Kill the hover dead-zone. The nav bar is 62px but each item only wrapped its ~39px
   link, centred — leaving a ~4–15px band between the link and the panel below. Moving
   the pointer down into the mega crossed that band, .nav-item:hover went false, and the
   menu snapped shut before you reached it. Making each item fill the full bar height
   means the pointer never leaves .nav-item on its way to the panel. Desktop only — the
   mobile drawer (max-width:1000px) lays items out vertically and must not go flex-row. */
@media(min-width:1001px){
  .nav-menu{align-self:stretch}
  .nav-item{align-self:stretch;display:flex;align-items:center}
}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:4px;
  color:var(--fg-faint);text-decoration:none;font-size:.88rem;font-weight:500;
  transition:color .2s,background .2s;cursor:pointer;background:none;border:0;font-family:inherit;
}
.nav-link:hover,.nav-item:hover>.nav-link{color:var(--fg);background:var(--tint)}
.nav-link .car{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.6;transition:transform .25s}
.nav-item:hover .car{transform:rotate(225deg) translate(-3px,-3px)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-right .btn-g{border-color:var(--line-2);color:var(--fg)}
.nav-right .btn-g:hover{border-color:var(--fg)}

/* mega panel */
.mega{
  position:absolute;left:0;right:0;top:var(--nav-h);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  pointer-events:none;z-index:119;
}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-in{
  max-width:var(--wrap);margin:0 auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:0 0 8px 8px;border-top:0;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  padding:26px;display:grid;gap:26px;
}
.mega-in.cols3{grid-template-columns:1fr 1fr .8fr}
.mega-in.cols1{grid-template-columns:1fr;max-width:340px;margin-left:0;border-radius:0 0 8px 8px}
/* A narrow (cols1) panel must hang under ITS OWN nav item. The wide cols3 panels span the
   whole bar and centre themselves with margin:0 auto, which works because .nav-item is
   position:static — but that same rule threw the narrow panel to the far left of the nav,
   under the logo. Making just this item the positioning context fixes it and leaves the
   Product / Use cases megas exactly as they were. */
.nav-item.narrow{position:relative}
/* width is explicit: once the containing block is the (narrow) nav item rather than the
   whole bar, an auto-width absolute box shrinks to fit that item — the panel collapsed to
   the width of the word "SMTP Relay". */
.nav-item.narrow .mega{left:0;right:auto;width:340px}
.nav-item.narrow .mega-in{margin:0;max-width:none;border-radius:0 0 8px 8px}
.mega-col{display:grid;gap:2px;align-content:start}
.mega-t{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:10px;font-weight:500;
}
.mega-l{
  display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:5px;
  text-decoration:none;transition:background .18s;
}
.mega-l:hover{background:var(--tint)}
.mega-l:hover .mega-ic{background:var(--rose);color:#fff;border-color:var(--rose)}
.mega-ic{
  width:30px;height:30px;border-radius:5px;flex:none;display:grid;place-items:center;
  background:rgba(232,80,141,.10);color:var(--rose);border:1px solid rgba(232,80,141,.22);
  font-size:.78rem;transition:all .18s;
}
.mega-n{font-size:.87rem;font-weight:600;color:var(--fg);letter-spacing:-.012em;display:block}
.mega-d{font-size:.75rem;color:var(--fg-faint);line-height:1.4;margin-top:1px}
.mega-promo{
  background:linear-gradient(160deg,rgba(232,80,141,.12),rgba(232,80,141,.02));
  border:1px solid rgba(232,80,141,.2);border-radius:7px;padding:20px;display:flex;flex-direction:column;
}
.mega-promo h4{font-size:1.02rem;color:var(--fg);margin-bottom:8px}
.mega-promo p{font-size:.82rem;color:var(--fg-dim);line-height:1.5;margin-bottom:16px;flex:1}

/* mobile nav */
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:20px;height:1.5px;background:var(--fg);margin:4px 0;transition:.25s}
.nav.open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:1000px){
  .burger{display:block}
  .nav-right{display:none}
  .nav-menu{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    background:var(--bg);border-top:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:16px 20px 40px;
    overflow-y:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .nav.open .nav-menu{transform:none}
  .nav-link{padding:14px 4px;font-size:1rem;justify-content:space-between;border-bottom:1px solid var(--line)}
  .nav-item{position:relative}
  .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;display:none}
  .nav-item.on .mega{display:block}
  .nav-item.on .car{transform:rotate(225deg) translate(-3px,-3px)}
  .mega-in{background:transparent;border:0;box-shadow:none;padding:6px 0 14px;grid-template-columns:1fr!important;gap:16px;max-width:none}
  .mega-promo{display:none}
  .nav-mob-cta{display:grid;gap:10px;margin-top:22px}
  .nav-mob-cta .btn{width:100%;justify-content:center}
}
@media(min-width:1001px){.nav-mob-cta{display:none}}

/* ═══ SHARED COMPONENTS ═════════════════════════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--card-shadow)}
.card-hd{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--fg-faint)}
.card-bd{padding:16px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 9px var(--ok)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:66px;align-items:center}
.split.rev{grid-template-columns:.9fr 1.1fr}

.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.fgrid.c3{grid-template-columns:repeat(3,1fr)}
.fgrid.c1{grid-template-columns:1fr}
.f{padding:32px;background:var(--bg-2);transition:background .3s}
.f:hover{background:var(--bg-3)}
.f-n{font-family:var(--mono);font-size:.67rem;color:var(--accent);letter-spacing:.1em;margin-bottom:14px}
.f h3{margin-bottom:10px}
.f p{font-size:.93rem;color:var(--fg-dim);line-height:1.62}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{font-family:var(--mono);font-size:.72rem;padding:7px 13px;border:1px solid var(--line);border-radius:3px;color:var(--fg-dim);background:var(--tint);transition:all .2s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

.bleed{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.bleed-r{display:grid;grid-template-columns:1fr auto;gap:16px;padding:17px 20px;background:var(--bg-2);align-items:center}
.bleed-r span{font-size:.93rem;color:var(--fg-dim)}
.bleed-r b{font-family:var(--mono);font-size:.92rem;font-weight:500;color:var(--fg)}
.bleed-r.hi{background:rgba(232,80,141,.06)}
.bleed-r.hi b{color:var(--accent)}

/* page hero (inner pages) */
.phero{padding:74px 0 66px;position:relative;overflow:hidden}
.phero h1{max-width:17ch}
.phero .lede{margin-top:22px}
.phero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.crumb{font-family:var(--mono);font-size:.7rem;color:var(--fg-faint);margin-bottom:20px;display:flex;gap:8px;align-items:center}
.crumb a{color:var(--fg-faint);text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* faq */
details{border-bottom:1px solid var(--line);padding:22px 0}
details summary{cursor:pointer;list-style:none;font-size:1.1rem;font-weight:600;letter-spacing:-.022em;display:flex;justify-content:space-between;gap:20px;align-items:center;transition:color .2s}
details summary:hover{color:var(--accent)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--accent);flex:none;transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:14px;color:var(--fg-dim);font-size:.94rem;max-width:76ch;line-height:1.68}

/* cta band */
.final{text-align:center;padding:124px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 100%,var(--rose-glow),transparent 65%)}
.final h2{max-width:18ch;margin:0 auto 20px}
.final .lede{margin:0 auto 32px;text-align:center}
.final-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═══ FOOTER ════════════════════════════════════════════ */
.foot{border-top:1px solid var(--line);padding:66px 0 34px}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:38px;margin-bottom:48px}
.foot-brand img{height:28px;margin-bottom:16px}
.creed{font-size:.95rem;color:var(--fg-dim);max-width:34ch;line-height:1.62;font-weight:440}
.creed b{color:var(--fg);font-weight:620}
.fsoc{display:flex;gap:8px;margin-top:20px}
.fsoc a{width:32px;height:32px;border:1px solid var(--line);border-radius:4px;display:grid;place-items:center;color:var(--fg-faint);text-decoration:none;font-size:.8rem;transition:all .2s}
.fsoc a:hover{border-color:var(--accent);color:var(--accent)}
.fcol h4{font-family:var(--mono);font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 15px;font-weight:500}
.fcol a{display:block;color:var(--fg-dim);text-decoration:none;font-size:.86rem;margin-bottom:9px;transition:color .2s}
.fcol a:hover{color:var(--accent)}
.foot-bot{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.71rem;color:var(--fg-faint)}
.foot-bot a{color:var(--fg-faint);text-decoration:none}
.foot-bot a:hover{color:var(--accent)}

@media(max-width:960px){
  .split,.split.rev{grid-template-columns:1fr;gap:44px}
  .fgrid,.fgrid.c3{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
  section{padding:76px 0}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .foot-top{grid-template-columns:1fr}
}

/* The grain overlay is fixed to the viewport, so it sits OUTSIDE any .light/.dark
   section and cannot inherit their tokens. The page's dominant tone drives it instead:
   film grain is near-invisible on black and very loud on white. */
body.page-light::before{opacity:.075}
body.page-dark::before{opacity:.20}
body.page-light{background:#FBF9F7;color:#12100F}