:root{
  --bg:#ffffff; --bg-2:#f4f7fc; --bg-3:#eef3fb;
  --ink:#0c1734; --ink-2:#33415f; --soft:#697896; --line:#e2e8f4;
  --blue:#1a6dff; --blue-2:#4f9bff; --blue-deep:#0a3fb0; --navy:#0c1734;
  --grad:linear-gradient(135deg,#3b8bff 0%,#1a5fff 48%,#0a3fb0 100%);
  --grad-soft:linear-gradient(135deg,#eaf2ff,#dbe8ff);
  --sf:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --container:min(92%,1120px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--sf);background:var(--bg);color:var(--ink);line-height:1.5;overflow-x:hidden}
a{color:inherit}
.wrap{width:var(--container);margin:0 auto}
section{position:relative}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;height:92px;z-index:90;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.sc{border-color:var(--line)}
.nav__in{width:var(--container);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:34px;height:34px;display:block}
.logo .logoimg{height:76px;width:auto;display:block}
.fbrand .logoimg{height:64px;width:auto;display:block}
.logo .wm{font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--navy)}
.logo .wm b{color:var(--blue);font-weight:800}
.logo .wm .tld{color:var(--soft);font-weight:600;font-size:13px}
.menu{display:flex;gap:30px}
.menu a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .2s}
.menu a:hover{color:var(--blue)}
.menu a.cur{color:var(--blue)}
.navcta{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#fff;text-decoration:none;
  font-size:14px;font-weight:600;padding:.6rem 1.15rem;border-radius:100px;box-shadow:0 6px 18px -6px rgba(26,109,255,.5);transition:gap .2s,box-shadow .2s}
.navcta:hover{gap:11px;box-shadow:0 10px 24px -6px rgba(26,109,255,.6)}
@media(max-width:880px){.menu{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:inherit;text-decoration:none;
  font-size:16px;font-weight:600;padding:1rem 1.7rem;border-radius:100px;transition:gap .22s var(--ease),box-shadow .22s,transform .22s}
.btn-pri{background:var(--grad);color:#fff;box-shadow:0 12px 30px -10px rgba(26,109,255,.6)}
.btn-pri:hover{gap:13px;transform:translateY(-1px);box-shadow:0 18px 40px -10px rgba(26,109,255,.7)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
h2{font-size:clamp(30px,4.2vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--soft);line-height:1.55}
.pad{padding:clamp(5rem,11vh,9rem) 0}

/* page header (subpages) */
.phead{padding:140px 22px clamp(3rem,6vw,5rem);text-align:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phead .aura{position:absolute;inset:-40% -10% 0;z-index:0;pointer-events:none;filter:blur(80px);opacity:.7;
  background:radial-gradient(40% 60% at 30% 30%,rgba(26,109,255,.4),transparent 60%),radial-gradient(42% 55% at 75% 40%,rgba(79,155,255,.35),transparent 62%)}
.phead>*{position:relative;z-index:1}
.phead h1{font-size:clamp(38px,5.6vw,68px);line-height:1.02;letter-spacing:-.035em;font-weight:800;max-width:18ch;margin:14px auto 0}
.phead h1 .accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--blue)}
.phead .lede{margin:18px auto 0;max-width:54ch}

/* pricing */
.pricing{background:var(--bg-2)}
.calc{background:#fff;border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,40px);margin:0 auto;max-width:760px;box-shadow:0 30px 60px -34px rgba(12,23,52,.2)}
.calc__top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.calc__seats{font-size:14px;color:var(--soft);font-weight:600}
.calc__seats b{font-size:40px;color:var(--ink);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block;line-height:1}
.calc__bill{text-align:right}
.calc__bill .you{font-family:var(--mono);font-size:42px;font-weight:700;letter-spacing:-.03em;color:var(--blue);line-height:1}
.calc__bill .ghl{font-size:13px;color:var(--soft);margin-top:6px}.calc__bill .ghl s{color:#aeb7c9}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue) var(--p,18%),#e4ebf6 var(--p,18%));outline:none;margin:6px 0 4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(12,23,52,.2);cursor:pointer;transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.08)}
.rangelab{display:flex;justify-content:space-between;font-size:11px;color:var(--soft);font-family:var(--mono)}
.saveband{margin-top:18px;padding:13px 16px;border-radius:12px;background:#eaf1ff;color:var(--blue-deep);font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column}
.tier.pop{border-color:var(--blue);box-shadow:0 20px 50px -24px rgba(26,109,255,.45)}
.tier .badge{align-self:flex-start;font-size:11px;font-weight:700;color:#fff;background:var(--grad);padding:3px 10px;border-radius:20px;margin-bottom:10px}
.tier h4{font-size:18px;font-weight:800;letter-spacing:-.01em}
.tier .pr{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px}
.tier .pr small{font-size:14px;color:var(--soft);font-weight:400}
.tier .ds{font-size:13.5px;color:var(--soft);margin-bottom:16px;min-height:38px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.tier li{font-size:13.5px;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start}
.tier li svg{width:15px;height:15px;flex:none;color:var(--blue);margin-top:2px}
.tier .btn{margin-top:auto;justify-content:center}

/* comparison table */
.cmp{max-width:880px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.cmp .cr{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14.5px}
.cmp .cr:last-child{border-bottom:none}
.cmp .cr.h{background:var(--navy);color:#fff;font-weight:700;font-size:13px}
.cmp .cr.h .us{color:var(--blue-2)}
.cmp .cr span:first-child{color:var(--ink-2);font-weight:500}
.cmp .cr .us{color:var(--blue);font-weight:700}
.cmp .cr .gh{color:var(--soft)}
.cmp .cr:nth-child(even):not(.h){background:#fafbfe}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:clamp(3rem,6vw,5rem)}
.frow:first-of-type{margin-top:clamp(2.5rem,5vw,3.5rem)}
.frow.flip .ftext{order:2}
@media(max-width:820px){.frow{grid-template-columns:1fr;gap:2rem}.frow.flip .ftext{order:0}}
.ftext .ph{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.ftext h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px;line-height:1.1}
.ftext p{font-size:16px;color:var(--soft);line-height:1.6;max-width:46ch}
.ftext ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:10px}
.ftext li{font-size:14.5px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.ftext li svg{width:16px;height:16px;flex:none;color:var(--blue);margin-top:3px}
.fvis{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 30px 60px -36px rgba(12,23,52,.25);min-height:240px;display:flex;flex-direction:column;justify-content:center;gap:12px}

/* generic browser/email/invoice mocks (shared) */
.browmock{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.browmock .bb{height:30px;background:#f6f8fc;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 11px}
.browmock .bb i{width:8px;height:8px;border-radius:50%;background:#d7deec}
.browmock .bu{margin-left:auto;font-size:11px;color:var(--soft)}.browmock .bu b{color:var(--ink)}
.browmock .bd{padding:18px;display:flex;align-items:center;gap:12px}
.browmock .blogo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#ff8a3d,#ff5d5d);display:grid;place-items:center;color:#fff;font-weight:800}
.browmock .bt{font-weight:800;letter-spacing:-.01em}.browmock .bt small{display:block;font-weight:500;color:var(--soft);font-size:12px}
.emcurb{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.emcurb .eh{font-size:11px;color:var(--soft);font-weight:700;letter-spacing:.03em;margin-bottom:8px}
.emcurb .es{font-weight:700;margin-bottom:8px;font-size:14px}
.emcurb .el{height:7px;border-radius:4px;background:#eaeef6;margin:6px 0}.emcurb .el.s{width:88%}.emcurb .el.m{width:72%}
.emcurb .el.t{width:58%;background:#dbe7ff}
.invoice{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.invoice .il{display:flex;justify-content:space-between;padding:10px 14px;font-size:13px;border-bottom:1px solid var(--line)}
.invoice .il:last-child{border-bottom:none;background:#f3f8ff;font-weight:800}
.invoice .il .m{font-family:var(--mono);font-weight:700}

/* about / stats */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:820px){.vals{grid-template-columns:1fr}}
.valc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:border-color .3s,transform .3s}
.valc:hover{border-color:#cdd9f0;transform:translateY(-3px)}
.valc .n{font-family:var(--mono);font-weight:700;color:var(--blue);font-size:13px;margin-bottom:12px}
.valc h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.valc p{font-size:14.5px;color:var(--soft);line-height:1.6}
.prose{max-width:64ch;margin:clamp(2.5rem,5vw,3.5rem) auto 0;font-size:17px;color:var(--ink-2);line-height:1.7}
.prose p{margin-bottom:18px}
.prose b{color:var(--ink)}

/* faq */
.faq{background:var(--bg-2);border-top:1px solid var(--line)}
.faqwrap{max-width:760px;margin:clamp(2.5rem,5vw,3.5rem) auto 0}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.qa .pm{width:22px;height:22px;flex:none;position:relative}
.qa .pm::before,.qa .pm::after{content:'';position:absolute;background:var(--blue);transition:transform .3s var(--ease)}
.qa .pm::before{top:10px;left:2px;right:2px;height:2px}
.qa .pm::after{left:10px;top:2px;bottom:2px;width:2px}
.qa.open .pm::after{transform:scaleY(0)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.qa .ans p{padding:0 0 24px;font-size:15.5px;color:var(--soft);line-height:1.6;max-width:62ch}

/* final cta */
.final{background:var(--navy);color:#fff;text-align:center;overflow:hidden;position:relative}
.final .au{position:absolute;inset:0;opacity:.5;filter:blur(80px);
  background:radial-gradient(40% 60% at 30% 40%,rgba(26,109,255,.7),transparent 60%),radial-gradient(40% 50% at 75% 60%,rgba(79,155,255,.5),transparent 60%)}
.final .in{position:relative;z-index:2;max-width:34ch;margin:0 auto}
.final h2{color:#fff}
.final p{color:#aebbd6;font-size:18px;margin-top:16px}
.final .btn{margin-top:30px}
.final .small{margin-top:18px;font-size:13px;color:#8595b8}

/* footer */
footer{background:var(--navy);color:#aebbd6;border-top:1px solid rgba(255,255,255,.08);padding:64px 0 40px}
/* Footer expanded to 5 content columns (Product · Modules · Company · Legal + brand)
   when the Modules section landed 2026-06-05. 1.6fr brand column anchors left;
   5 equal cols carry the link sets. Mobile drops to 2-col then 1-col. */
.fgrid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:30px}
@media(max-width:1100px){.fgrid{grid-template-columns:1.6fr repeat(2,1fr);gap:28px}}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:24px}}
.fcol h5{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#fff;margin-bottom:16px;font-weight:700}
.fcol a{display:block;font-size:14px;color:#9aa8c6;text-decoration:none;margin-bottom:11px;transition:color .2s}
.fcol a:hover{color:#fff}
.fbrand .logo .wm{color:#fff}.fbrand .logo .wm .tld{color:#8595b8}
.fbrand p{font-size:13.5px;margin-top:14px;max-width:30ch;line-height:1.6}
.fbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.badge-ca{display:inline-flex;align-items:center;gap:7px;color:#9aa8c6}

/* booking modal */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:22px}
.modal.open{display:flex}
.modal__bg{position:absolute;inset:0;background:rgba(8,14,30,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal__card{position:relative;width:min(480px,100%);background:#fff;border-radius:22px;border:1px solid var(--line);padding:30px;box-shadow:0 40px 90px -30px rgba(12,23,52,.5);max-height:90vh;overflow:auto;animation:popin .4s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__card h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
.modal__card .sub{font-size:14.5px;color:var(--soft);margin:6px 0 18px;line-height:1.5}
.modal__close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;background:#f1f4fa;border-radius:50%;cursor:pointer;font-size:17px;color:var(--soft);line-height:1}
.modal__close:hover{background:#e7ecf6;color:var(--ink)}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:14.5px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe;color:var(--ink);outline:none;transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.field textarea{resize:vertical;min-height:62px}
.modal form .btn{width:100%;justify-content:center;margin-top:6px}
.modal__alt{text-align:center;font-size:13px;color:var(--soft);margin-top:14px}
.modal__alt a{color:var(--blue);font-weight:600;text-decoration:none}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .phead .aura,.final .au{animation:none!important}
}

/* ─── Modules — hub + detail page shared styles (added 2026-06-05) ──────────
   These selectors duplicate the inline §3.5 block from index.html so the
   standalone /modules/ and /modules/<slug>/ pages render with the same
   visual language without an inline <style> block per page.

   .mod__link wraps the clickable card content so the whole tile is one
   anchor; .mod becomes a passive wrapper, .mod__link inherits the flex
   layout that .mod used to own on the homepage. The homepage cards (and
   sibling pages' cards) follow the same wrapping pattern after the
   index.html patch in this commit. */

/* hub-page-only — homepage uses the inline §3.5 versions which are identical;
   declaring them here makes /modules render standalone */
.mods{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mods__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin:clamp(40px,5vw,64px) 0 0}
.mods__cat-head{margin:0 0 18px}
.mods__cat-head h3{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.mods__cat-head p{font-size:14px;color:var(--soft);max-width:46ch;margin:0;line-height:1.5}
.mods__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mod{padding:0;background:#fff;border:1px solid var(--line);border-radius:12px;
  transition:border-color .12s ease,transform .12s ease;list-style:none}
.mod:hover{border-color:#cdd8ec;transform:translateY(-1px)}
.mod.soon{opacity:.78}
.mod__link{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  text-decoration:none;color:inherit;border-radius:12px}
.mod__link:hover{text-decoration:none}
.mod__i{flex:none;width:36px;height:36px;border-radius:9px;background:var(--bg-3);
  display:grid;place-items:center;font-size:18px}
.mod__link>div{min-width:0;flex:1}
.mod__link>div b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;
  color:var(--ink);margin-bottom:2px;line-height:1.25}
.mod__link>div b i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;background:var(--line);color:var(--soft);padding:2px 6px;border-radius:4px}
.mod__link>div span{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}

.mods__validate{margin:clamp(28px,4vw,40px) auto 0;max-width:820px;text-align:center;
  padding:20px 28px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px}
.mods__validate p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.mods__validate p b{color:var(--ink);font-weight:700}
.mods__validate .stack-items{color:var(--blue);font-weight:600;font-family:var(--mono);
  font-size:13.5px;letter-spacing:-.005em;display:block;margin:8px 0 10px}

@media (max-width:880px){
  .mods__grid{grid-template-columns:1fr;gap:32px}
  .mods__validate{padding:18px 22px}
  .mods__validate .stack-items{font-size:12.5px}
}

/* ─── Module detail-page hero variant + feature list ───────────────────────
   Module pages are content-heavy with a centered hero (vs the asymmetric
   2-col hero on the home page). hero--module overrides the .hero defaults
   to a single-col centered layout matching pricing/migration. */
.hero--module{padding:0;min-height:0;display:block;text-align:center;overflow:hidden;position:relative}
.hero--module::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(26,109,255,.18) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000 25%,transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 40%,#000 25%,transparent 78%);
  opacity:.7}
.hero--module .wrap{position:relative;z-index:1}
.hero--module .module-emoji{font-size:.85em;margin-right:4px;display:inline-block;transform:translateY(-2px)}
.hero--module .accent{color:var(--blue);font-family:var(--serif,Playfair Display,serif);font-style:italic;font-weight:500}

/* feat-list — 2-col grid of feature bullets on module detail pages.
   Each <li> is a small card with a green checkmark prefix. Mirrors the
   .surface card pattern (white bg, --line border) but a tighter padding
   so 4-6 items don't blow out the page. Collapses to 1-col at <720px. */
.feat-list{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feat-list li{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px 14px 44px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.feat-list li::before{content:"";position:absolute;left:14px;top:16px;width:18px;height:18px;
  border-radius:50%;background:rgba(26,109,255,.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A6DFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position:center;background-size:11px;background-repeat:no-repeat}
@media (max-width:720px){.feat-list{grid-template-columns:1fr}}