/* Marketing site: brand E (Aurora + Gold). Dark aurora hero, light content sections. Tokens from tokens.css. */
/* Self-hosted variable fonts (OFL, licenses in /fonts). Geist Mono is not loaded: code falls back to the system mono. */
@font-face{font-family:"Geist";src:url("fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Site palette: midnight + gold only, no cyan */
:root{--wt-accent:#050E16;--wt-accent-hover:#1A2430;--wt-accent-soft:#FBF1DC}
body{font-family:"Geist",var(--wt-font-body);color:var(--wt-ink);background:#fff;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--wt-accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,.disp{font-family:"Space Grotesk",var(--wt-font-display);letter-spacing:-.02em;line-height:1.1}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.au{color:#E8C47A} /* one emphasis word in solid gold, on midnight only */
.kicker{display:inline-block;font:600 13px/1.4 "Geist";letter-spacing:.16em;text-transform:uppercase;color:var(--wt-gold-ink)}
.hero .kicker,.band .kicker,.tile.dark .kicker{color:var(--wt-gold)} /* bright gold only on midnight */
/* Keyboard focus, skip link, screen-reader-only text */
:focus-visible{outline:2px solid var(--wt-gold-ink);outline-offset:2px}
.hero :focus-visible,.nav :focus-visible,footer :focus-visible,.band :focus-visible,.tile.dark :focus-visible{outline-color:var(--wt-gold)}
.nav.light :focus-visible,.join-form :focus-visible{outline-color:var(--wt-gold-ink)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:#050E16;padding:10px 16px;border-radius:10px;font-weight:600}.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.btn:hover{transform:none}}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15px;border:1px solid transparent;transition:background .15s,transform .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:#050E16;color:#fff}.btn-primary:hover{background:#1A2430}.nav .btn-primary{background:#fff;color:#050E16}.nav .btn-primary:hover{background:#E6E9ED}
.btn-light{background:#fff;color:#050E16}.btn-ghost{border-color:rgba(255,255,255,.25);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-outline{border-color:var(--wt-line-strong);color:var(--wt-ink)}.btn-outline:hover{background:var(--wt-sunken)}

/* Nav: a floating glass bar, the same family as the app's top bar (app/ui/DESIGN.md). Glass marks "where you can
   go": the bar, its menu and the help sidebar. Content stays solid. The page runs under the bar, so it frosts the hero
   or the page as you scroll. Blur only inside @supports with the -webkit- prefix; without it the bar is solid. */
:root{--nav-h:76px}
html{scroll-padding-top:calc(var(--nav-h) + 16px)}
.nav{position:sticky;top:0;z-index:50;padding:10px 12px 0;color:var(--wt-glass-ink)}
/* Dark pages (midnight hero): the dark glass from the app's dark theme while the hero is under the bar. Once light
   content runs under it (menu.js adds .over-light), and on light pages, the bar uses the light tokens as they are. */
.nav:not(.light):not(.over-light){--wt-glass-ink:#FFFFFF;--wt-glass-muted:#CBD3DD;--wt-glass-tint:rgb(22 28 36 / 0.82);--wt-glass-fallback:#1A212B;--wt-glass-pane:linear-gradient(180deg,rgb(28 36 46 / 0.86),rgb(22 28 36 / 0.82));--wt-glass-edge:rgb(255 255 255 / 0.1);--wt-glass-line:rgb(255 255 255 / 0.14);--wt-glass-hover:rgb(255 255 255 / 0.07);--wt-glass-active:rgb(255 255 255 / 0.12);--wt-glass-active-shadow:0 6px 14px -8px rgb(0 0 0 / 0.6),inset 0 1px 0 rgb(255 255 255 / 0.14);--wt-glass-shadow:0 14px 34px -20px rgb(0 0 0 / 0.7),0 1px 3px rgb(0 0 0 / 0.3);--wt-glass-float-shadow:0 18px 40px -14px rgb(0 0 0 / 0.7),0 2px 6px rgb(0 0 0 / 0.3);--wt-tile:linear-gradient(160deg,#2C3B4D,#0B1722 62%);--wt-tile-edge:rgb(255 255 255 / 0.2)}
.nav .wrap{position:relative;isolation:isolate;display:flex;align-items:center;gap:20px;height:66px;padding:0 11px 0 18px;border-radius:18px}
/* The frost is its own layer, so the menu inside the bar blurs the page and not just the bar. */
.nav .wrap::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--wt-glass-fallback);border:1px solid var(--wt-glass-edge);box-shadow:var(--wt-glass-shadow),inset 0 1px 0 var(--wt-glass-edge)}
.nav + main{margin-top:calc(-1 * var(--nav-h))}
.nav + main > :first-child{border-top:var(--nav-h) solid transparent} /* the first section's own colour runs under the bar */
body:has(> .nav.light){background:var(--wt-glass-backdrop),#fff;background-repeat:no-repeat} /* soft gold light for the bar to frost */
.brand{display:flex;align-items:center;gap:10px;color:#fff;font:700 20px/1.3 "Space Grotesk";letter-spacing:-.02em}.brand:hover{text-decoration:none}.brand img{width:32px;height:32px}
.nav .brand{color:var(--wt-glass-ink)}
.nav nav{display:flex;gap:2px;margin-left:4px}
.nav nav a{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;color:var(--wt-glass-muted);font-size:15px;transition:background-color .15s,color .15s,box-shadow .15s}
.nav nav a:hover{background:var(--wt-glass-hover);color:var(--wt-glass-ink);text-decoration:none}
.nav nav a[aria-current]{background:var(--wt-glass-active);color:var(--wt-glass-ink);font-weight:600;box-shadow:var(--wt-glass-active-shadow)}
.nav .cta{margin-left:auto;display:flex;gap:8px}.nav .btn{height:44px;font-size:14px;padding:0 18px}
.nav .btn-ghost{border-color:var(--wt-glass-line)}.nav .btn-ghost:hover{background:var(--wt-glass-hover)}
.nav.light .btn-outline{background:rgb(255 255 255 / 0.6)}.nav.light .btn-outline:hover{background:#fff}
.nav.over-light .btn-ghost{color:var(--wt-ink);border-color:var(--wt-line-strong);background:rgb(255 255 255 / 0.6)}.nav.over-light .btn-ghost:hover{background:#fff}
.nav.over-light .btn-primary{background:#050E16;color:#fff}.nav.over-light .btn-primary:hover{background:#1A2430}
.nav.over-light :focus-visible{outline-color:var(--wt-gold-ink)}
/* Small screens: the links move into a Menu dropdown, a glass menu with icon tiles like the app's More menu */
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;height:44px;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;border-radius:12px;border:1px solid var(--wt-glass-line);color:var(--wt-glass-ink);font-weight:600;font-size:14px;transition:background-color .15s}
.menu summary::-webkit-details-marker{display:none}
.menu summary::before{content:"";width:16px;height:10px;border-block:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.menu summary:hover,.menu[open] summary{background:var(--wt-glass-hover)}
.nav .menu nav{position:absolute;right:-5px;top:calc(100% + 16px);min-width:248px;display:grid;gap:2px;margin:0;padding:8px;border-radius:18px;background:var(--wt-glass-fallback);color:var(--wt-glass-ink);border:1px solid var(--wt-glass-edge);box-shadow:var(--wt-glass-float-shadow)}
.menu[open] nav{animation:glass-pop .16s cubic-bezier(.22,1,.36,1) both;transform-origin:top right}
.nav .menu nav a{height:48px;padding:0 12px 0 8px;font-size:15px;color:var(--wt-glass-ink)}
.nav .menu nav a[aria-current]{box-shadow:var(--wt-glass-active-shadow)}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
 .nav .wrap::before{background:var(--wt-glass-pane);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
 /* The menu carries text over the page: mostly opaque, so nothing behind reads through. */
 .nav .menu nav{background:var(--wt-glass-pane),color-mix(in srgb,var(--wt-glass-fallback) 90%,transparent);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
}
@keyframes glass-pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
/* Icon tiles: the logo's midnight tile with a gold glyph (tokens --wt-tile*). */
.wt-tile{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:9px;color:var(--wt-tile-glyph);background:var(--wt-tile);box-shadow:inset 0 1px 0 var(--wt-tile-edge),0 3px 8px -3px rgb(5 14 22 / 0.5)}
.wt-tile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.nav .wrap>nav{display:none}.nav .cta .btn-ghost{display:none}.menu{display:block}.nav .cta{margin-left:auto}}
@media (max-width:420px){.nav .cta{display:none}.menu{margin-left:auto}.nav .wrap{padding-left:14px}}

/* Hero */
.hero{position:relative;overflow:hidden;padding-bottom:0;color:#fff;background:#050E16;padding:80px 0 100px}
.hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.hero h1{font-size:58px;margin:18px 0 22px}.hero p.lead{font-size:20px;line-height:1.55;color:#C2CBD4;max-width:520px}
.hero .actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .proof{display:flex;gap:22px;margin-top:28px;color:#94A0AC;font-size:14px;flex-wrap:wrap}.hero .proof span::before{content:"✓ ";color:var(--wt-gold)}
.visual{position:relative;width:calc(100% + 110px)}
.float{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(5,14,22,.35);color:#08141C;font-size:13px;white-space:nowrap}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.float{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.float b{display:block;font-size:14px}.float span{color:#4A5560}.float .fi{font-size:20px}
.float .dot{width:10px;height:10px;border-radius:50%;background:#15803D;box-shadow:0 0 0 4px rgba(21,128,61,.18)}
.float .gold{background:var(--wt-gold-gradient);color:#3D2A05;font-weight:700;border-radius:99px;padding:3px 10px;font-size:12px}
.f1{left:-46px;top:22%}.f2{right:-14px;top:56%}.f3{left:8%;bottom:-28px}
@media (max-width:960px){.float{display:none}.visual{width:100%}}
.hero .goldline{height:2px;width:140px;background:linear-gradient(90deg,var(--wt-gold),transparent);margin-top:34px}
.hero h1.h1-sm{font-size:50px}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.hero h1,.hero h1.h1-sm{font-size:44px}}

/* Sections */
section{padding:96px 0}
.sec-head{max-width:720px;margin-bottom:48px}.sec-head h2{font-size:42px;margin:12px 0 14px}.sec-head p{font-size:18px;color:var(--wt-muted)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.alt{background:var(--wt-canvas)}
.logos{padding:56px 0 24px;text-align:center;color:var(--wt-muted);font-size:14px}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{background:#fff;border:1px solid var(--wt-line);border-radius:20px;padding:28px;position:relative;overflow:hidden}
.alt .tile{background:#fff}
.tile h3{font-size:21px;margin:0 0 8px}.tile p{color:var(--wt-muted);font-size:15px}
.t3{grid-column:span 3}.t2{grid-column:span 2}.t4{grid-column:span 4}.t6{grid-column:span 6}
.tile.dark{background:#050E16;color:#fff;border-color:rgba(255,255,255,.08)}.tile.dark p{color:#C2CBD4}

.tile img{margin-top:20px;border-radius:12px;border:1px solid var(--wt-line)}
@media (max-width:900px){.bento{grid-template-columns:1fr}.t2,.t3,.t4,.t6{grid-column:span 1}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.step{border:1px solid var(--wt-line);border-radius:20px;padding:28px;background:#fff}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#050E16;color:#fff;font:700 16px "Space Grotesk";margin-bottom:14px}
.step h3{font-size:19px;margin-bottom:6px}.step p{color:var(--wt-muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* Compare */
table.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--wt-line);border-radius:16px;overflow:hidden;font-size:15px}
.cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--wt-line);text-align:left}.cmp th{background:var(--wt-canvas);font-weight:600;color:var(--wt-ink-2)}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center}.cmp .us{background:var(--wt-accent-soft);font-weight:600}
.yes{color:var(--wt-ok);font-weight:700}.cmp .us.yes{color:#126B33} /* 5.9:1 on the gold tint */
.cmp th[scope=row]{background:none;font-weight:400;color:var(--wt-ink)}.no{color:var(--wt-muted)}
.cmp-wrap{overflow-x:auto}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:920px;margin:0 auto}
.plan{border:1px solid var(--wt-line);border-radius:22px;padding:32px;background:#fff}
.plan.gold{border-color:rgba(217,164,65,.6);background:linear-gradient(180deg,var(--wt-gold-soft),#fff 45%)}
.plan h3{font-size:24px}.plan .price{font:700 46px "Space Grotesk";margin:14px 0 4px;letter-spacing:-.02em}.plan .price small{font:500 16px "Geist";color:var(--wt-muted)}
.plan ul{list-style:none;margin:20px 0 26px}.plan li{padding:8px 0;border-bottom:1px solid var(--wt-line);font-size:15px}.plan li::before{content:"✓  ";color:var(--wt-gold);font-weight:700}
.badge-gold{display:inline-block;background:var(--wt-gold-gradient);color:#3D2A05;font-weight:700;font-size:12px;border-radius:99px;padding:3px 10px;margin-left:8px;vertical-align:middle}
.tiers{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px}.tiers td{padding:8px 0;border-bottom:1px solid var(--wt-line)}.tiers td:last-child{text-align:right;font-weight:700}
.note{max-width:920px;margin:24px auto 0;color:var(--wt-muted);font-size:14px;text-align:center}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:820px;margin:0 auto}.faq details{border-bottom:1px solid var(--wt-line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}.faq summary::after{content:"+";color:var(--wt-accent);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}.faq details p{margin-top:10px;color:var(--wt-ink-2)}

/* CTA band */
.band{background:#050E16;color:#fff;border-radius:28px;padding:64px;text-align:center}
.band h2{font-size:42px;margin-bottom:14px}.band p{color:#C2CBD4;font-size:18px;margin-bottom:28px}

/* Docs */
.doc{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:56px 24px 96px;max-width:1180px;margin:0 auto}
/* Help sidebar: navigation, so it joins the glass family as a light frost panel (no blur: nothing scrolls under it)
   with glass rows; the open topic gets the raised white highlight, like the app's open tab. */
.doc aside{position:sticky;top:calc(var(--nav-h) + 16px);align-self:start;grid-row:1;grid-column:1;padding:8px;border-radius:18px;background:var(--wt-glass-sub),var(--wt-sunken);border:1px solid var(--wt-line);box-shadow:inset 0 1px 0 var(--wt-glass-edge),0 1px 2px rgb(5 14 22 / 0.04)}
.doc aside h2{font:600 12px/1.4 "Geist";letter-spacing:.12em;text-transform:uppercase;color:var(--wt-muted);margin:16px 10px 6px}
.doc aside a{display:flex;align-items:center;min-height:36px;padding:6px 10px;border-radius:10px;color:var(--wt-ink-2);font-size:14.5px;line-height:1.35;transition:background-color .15s,color .15s}.doc aside a:hover{background:var(--wt-glass-hover);color:var(--wt-ink);text-decoration:none}.doc aside a.on{background:var(--wt-glass-active);color:var(--wt-ink);font-weight:600;box-shadow:var(--wt-glass-active-shadow)}
.doc article{max-width:760px}.doc article h1{font-size:40px;margin-bottom:12px}.doc article .sub{font-size:18px;color:var(--wt-muted);margin-bottom:28px}
.doc article h2{font-size:24px;margin:36px 0 10px}.doc article h3{font-size:18px;margin:24px 0 8px}
.doc article p,.doc article li{color:var(--wt-ink-2);margin:10px 0}.doc article ul,.doc article ol{padding-left:22px}
.doc article code{background:var(--wt-canvas);border:1px solid var(--wt-line);border-radius:6px;padding:1px 6px;font:14px var(--wt-font-mono)}
.doc article table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}.doc article td,.doc article th{border-bottom:1px solid var(--wt-line);padding:10px 8px;text-align:left;vertical-align:top}.doc article th{color:var(--wt-muted);font-weight:600}
.callout{border:1px solid var(--wt-line);background:var(--wt-canvas);border-radius:10px;padding:14px 18px;margin:18px 0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}.cards a{display:block;border:1px solid var(--wt-line);border-radius:14px;padding:18px;color:var(--wt-ink)}.cards a:hover{border-color:var(--wt-accent);text-decoration:none}.cards b{display:block;font-family:"Space Grotesk";font-size:17px;margin-bottom:4px}.cards span{color:var(--wt-muted);font-size:14px}
@media (max-width:860px){.doc{grid-template-columns:1fr}.doc aside{position:static;grid-row:auto;grid-column:1}.cards{grid-template-columns:1fr}}

/* Footer */
footer{background:#050E16;color:#94A0AC;padding:56px 0;font-size:14px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}footer h2{color:#fff;font:600 14px/1.4 "Geist";letter-spacing:0;margin-bottom:12px}
footer a{color:#94A0AC;display:block;margin:6px 0}footer a:hover{color:#fff}footer .brand{margin-bottom:12px}
footer .fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:20px;margin-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}}

/* macOS window frame: every screen view on the site uses it */
.browser{border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.browser .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#EEF1F4;border-bottom:1px solid #E4E7EC}
.browser .bar i{width:11px;height:11px;border-radius:50%}.browser .bar i:nth-child(1){background:#FF5F57}.browser .bar i:nth-child(2){background:#FEBC2E}.browser .bar i:nth-child(3){background:#28C840}
.browser .bar span{margin-left:12px;font-size:12px;color:#5B6873;background:#fff;border-radius:6px;padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{width:100%;border:0;margin:0;border-radius:0}
.tile .browser{margin-top:22px;box-shadow:0 8px 20px rgba(5,14,22,.10)}

/* iPhone with the WhatsApp Business app (Keep the phone app tile) */
.iphone{position:relative;width:250px;margin:26px auto 0;padding:10px;background:#0B0D10;border-radius:44px;box-shadow:0 0 0 2px #3A4049,0 24px 60px rgba(5,14,22,.28)}
.iphone .island{position:absolute;top:18px;left:50%;width:84px;height:24px;margin-left:-42px;background:#000;border-radius:14px;z-index:2}
.wa{border-radius:35px;overflow:hidden;background:#EFE7DE;font-size:11.5px;line-height:1.35;color:#111B21}
.wa-status{display:flex;justify-content:space-between;padding:14px 22px 6px;background:#F6F6F6;font-size:11px}.wa-status span{letter-spacing:-1px;font-size:9px}
.wa-head{display:flex;align-items:center;gap:8px;padding:6px 10px 8px;background:#F6F6F6;border-bottom:1px solid #DDD}
.wa-head .back{font-size:22px;line-height:1;color:#007AFF}.wa-head small{display:block;color:#54656F;font-size:10px}.wa-head b{font-size:12.5px}
.wa-head .av{width:30px;height:30px;border-radius:50%;background:#D9A441;color:#050E16;display:grid;place-items:center;font-weight:700}
.wa-biz{margin-left:auto;font-size:9px;font-weight:700;color:#008069;border:1px solid #008069;border-radius:6px;padding:1px 5px}
.wa-chat{padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px;min-height:280px}
.wa-chat .day{align-self:center;background:#fff;color:#54656F;font-size:9.5px;padding:2px 8px;border-radius:6px;margin-bottom:2px}
.msg{max-width:80%;padding:6px 8px 4px;border-radius:9px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.msg i{display:block;text-align:right;font-style:normal;font-size:9px;color:#54656F;margin-top:1px}.msg em{font-style:normal;color:#53BDEB}
.msg.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}.msg.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}
.wa-chat .sync{align-self:center;margin-top:6px;background:#050E16;color:#fff;font-size:9.5px;font-weight:600;padding:4px 10px;border-radius:99px}
.wa-input{display:flex;align-items:center;gap:8px;padding:8px 12px 22px;background:#F6F6F6}.wa-input span{flex:1;background:#fff;border:1px solid #DDD;border-radius:16px;padding:5px 10px;color:#667781}.wa-input i{font-style:normal}
.nav .brand img,footer .brand img{border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* Brand home: product cards and phone hero */
.prod{display:flex;flex-direction:column}.prod p{flex:1}.prod .btn{margin-top:22px;align-self:flex-start}
.pill{align-self:flex-start;margin:0 0 12px;font-size:12px;font-weight:600;border-radius:99px;padding:3px 10px;background:var(--wt-gold-soft);color:#7A5A1A}
.pill.live{background:var(--wt-gold-gradient);color:#3D2A05}
.phone-visual{width:auto;display:flex;justify-content:center}.phone-visual .iphone{width:290px;margin:0}
.phone-visual .f1{left:-2%;top:4%}.phone-visual .f2{right:0;top:58%}

/* Join form */
.join{grid-template-columns:1fr 1fr;align-items:start}
.join-form{background:#fff;color:var(--wt-ink);border-radius:20px;padding:30px;display:grid;gap:16px}
.join-form label{display:grid;gap:6px;font-size:14px;font-weight:600}.join-form small{color:var(--wt-muted);font-weight:400}
.join-form input,.join-form select{font:inherit;font-weight:400;height:44px;padding:0 12px;border:1px solid var(--wt-line);border-radius:10px;background:#fff;color:var(--wt-ink)}
.join-form input:focus,.join-form select:focus{outline:2px solid #050E16;outline-offset:1px}
.join-form .btn{background:#050E16;color:#fff;justify-content:center;height:46px}.join-form .btn:disabled{opacity:.6}
.join-form .hp{position:absolute;left:-9999px;height:0;width:0;padding:0;border:0;opacity:0}
.join-form .form-msg{font-size:14px}.join-form .form-msg:empty{display:none}.join-form .form-msg.err{color:#B42318}
.join-form h2{font-size:22px}.join-form h2:focus{outline:none}
.join-form [aria-invalid=true]{border-color:#B42318}
@media (max-width:900px){.join{grid-template-columns:1fr}}
.doc .updated{font-size:13px;color:var(--wt-muted);margin:-6px 0 18px}

/* Walkthrough videos */
.video{margin:22px 0 28px}
.video video{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--wt-line);box-shadow:0 6px 16px rgba(5,14,22,.08);background:#EEF1F4}
.video figcaption{font-size:13px;color:var(--wt-muted);padding-top:8px}
.tour{max-width:900px;margin:40px auto 0}
.nav.light .btn-primary{background:#050E16;color:#fff}.nav.light .btn-primary:hover{background:#1A2430}

/* Status page */
.status-card{margin-top:28px;background:#fff;color:var(--wt-ink);border-radius:20px;padding:26px;max-width:760px}
.status-row{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:14px}.st-ms{margin-left:auto;font-size:13px;color:var(--wt-muted)}
.st-dot{width:12px;height:12px;border-radius:50%;background:#C4CAD1}.st-dot.up{background:#15803D;box-shadow:0 0 0 4px rgba(21,128,61,.18)}.st-dot.down{background:#B42318;box-shadow:0 0 0 4px rgba(180,35,24,.18)}
.st-table{width:100%;border-collapse:collapse;font-size:15px}.st-table td{padding:11px 4px;border-top:1px solid var(--wt-line)}.st-table td:last-child{text-align:right;font-weight:600}
.st-note{margin-top:14px;font-size:13px;color:var(--wt-muted)}

/* Support page: quick answers beside the form */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.quick a{display:block;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff}
.quick a:hover{background:rgba(255,255,255,.09);text-decoration:none}.quick b{display:block;font-size:15px}.quick span{color:#94A0AC;font-size:13px}
.join-form textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--wt-line);border-radius:10px;background:#fff;color:var(--wt-ink);resize:vertical}
.join-form textarea:focus{outline:2px solid #050E16;outline-offset:1px}.join-form [aria-invalid=true]{border-color:#B42318}
@media (max-width:560px){.quick{grid-template-columns:1fr}}

/* Getting started page (shown inside GHL) */
.lead-dark{font-size:18px;color:var(--wt-ink-2);margin:10px 0 24px}
.start-steps{counter-reset:s;list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.start-steps li{counter-increment:s;position:relative;padding:16px 18px 16px 58px;border:1px solid var(--wt-line);border-radius:14px;background:#fff;color:var(--wt-ink-2)}
.start-steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:#050E16;color:#fff;font:700 14px/28px "Space Grotesk";text-align:center}
.start-steps b{color:var(--wt-ink)}
.start-steps a{text-decoration:underline;font-weight:600}