/* Home page showcase: night hero, electric gradient accents and lime purchase buttons. */
.landing{
    --night:#0b0f2a;--night-2:#141a46;--night-line:#ffffff1f;--night-muted:#b7bce0;
    --paper:#f4f5fb;--card:#fff;--ink:#11152f;--muted:#565d80;--line:#e1e3f0;
    --indigo:#6366f1;--violet:#a78bfa;--cyan:#38e1ff;--lime:#c6f65a;--lime-hover:#d6ff7a;
    --gradient:linear-gradient(100deg,#8b8cff 0%,#c49bff 42%,#5ee7ff 100%);
    --mayday:#34d399;--pulse:#60a5fa;--vault:#22d3ee;--fairly:#c084fc;--tempo:#fbbf24;
    --radius:22px;
    background:var(--night);color:#fff;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    overflow-x:hidden;position:relative;
}
.landing h1,.landing h2,.landing h3{font-weight:750;letter-spacing:-.035em}
.landing a:focus-visible,.landing button:focus-visible,.landing summary:focus-visible{outline:3px solid var(--cyan);outline-offset:4px;border-radius:8px}
.landing .gradient-text{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 8s ease-in-out infinite alternate}
@keyframes shimmer{to{background-position:100% 0}}

/* Ambient glow behind the hero. */
.landing-glow{position:absolute;inset:0 0 auto;height:1100px;pointer-events:none;z-index:0;
    background:radial-gradient(600px 420px at 78% 22%,#6366f155,transparent 70%),radial-gradient(520px 380px at 12% 8%,#38e1ff26,transparent 70%),radial-gradient(700px 500px at 60% 80%,#a78bfa22,transparent 70%)}
.landing-glow::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 60% 30%,#000 20%,transparent 70%)}
.landing>header,.landing>main,.landing>footer{position:relative;z-index:1}

/* Header on the dark background. */
.landing .header{border-bottom-color:var(--night-line)}
.landing .brand{color:#fff}
.landing .nc-mark{background:var(--gradient);color:var(--night)}
.landing .brand-dot{color:var(--cyan)}
.landing .header nav{font-size:14px;color:var(--night-muted)}
.landing .header nav a:hover{color:#fff}
.landing .header-login{background:#ffffff14;border-color:#ffffff33;color:#fff;font-weight:600}
.landing .header-login:hover{background:#fff;border-color:#fff;color:var(--night)}

/* Buttons. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 26px;border-radius:14px;font-size:16px;font-weight:700;line-height:1.2;text-align:center;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.cta span{transition:transform .2s}
.cta:hover span{transform:translateX(4px)}
.cta-primary{background:var(--lime);color:var(--night);box-shadow:0 10px 30px #c6f65a40,inset 0 -2px 0 #0000001a}
.cta-primary:hover{background:var(--lime-hover);transform:translateY(-2px);box-shadow:0 16px 40px #c6f65a59}
.cta-ghost{background:#ffffff10;color:#fff;border:1px solid #ffffff38}
.cta-ghost:hover{background:#ffffff1f;transform:translateY(-2px)}
.cta-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.cta-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.cta-small{min-height:46px;padding:12px 20px;font-size:15px}

/* Hero. */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;padding-block:72px 88px}
.hero-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:8px 16px 8px 12px;border:1px solid #ffffff2b;border-radius:999px;background:#ffffff0d;font-size:13px;font-weight:600;color:var(--night-muted);line-height:1.4}
.hero-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 #c6f65a99;animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px #c6f65a00}100%{box-shadow:0 0 0 0 #c6f65a00}}
.hero h1{font-size:clamp(46px,6.4vw,92px);line-height:.98;margin:0 0 28px;letter-spacing:-.05em}
.hero-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--night-muted);max-width:600px;margin:0 0 36px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;padding:0;margin:30px 0 0;font-size:14px;color:var(--night-muted)}
.hero-proof li{display:flex;align-items:center;gap:8px}
.hero-proof li::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#c6f65a24;color:var(--lime);font-size:11px;font-weight:800}

/* Live plan board. */
.hero-visual{position:relative;padding:30px 10px}
.board{position:relative;background:linear-gradient(160deg,#1b2160ee,#11163fee);border:1px solid #ffffff26;border-radius:28px;padding:26px;box-shadow:0 40px 90px #02041a99,inset 0 1px 0 #ffffff1f;backdrop-filter:blur(10px);transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);transition:transform .6s}
.hero-visual:hover .board{transform:perspective(1400px) rotateY(0) rotateX(0)}
.board::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--gradient);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.board-head small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted);font-weight:700;margin-bottom:6px}
.board-head strong{font-size:22px;letter-spacing:-.02em}
.board-ring{position:relative;width:64px;height:64px}
.board-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.board-ring circle{fill:none;stroke:#ffffff1c;stroke-width:4}
.board-ring .board-ring-value{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--progress,100);transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.board-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px}
.board-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.board-steps li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:#ffffff0a;border:1px solid #ffffff12;opacity:.45;transform:translateX(0);transition:opacity .5s,background .5s,border-color .5s,transform .5s}
.board-steps li img{flex:none;border-radius:8px}
.board-steps li span{flex:1;display:grid;gap:2px}
.board-steps li b{font-size:15px;font-weight:650}
.board-steps li small{font-size:12px;color:var(--night-muted)}
.board-steps li i{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #ffffff38;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;transition:background .4s,border-color .4s,transform .4s}
.board-steps li.is-active{opacity:1;background:#ffffff14;transform:translateX(-6px)}
.board-steps li.is-active i{border-color:var(--c);border-top-color:transparent;animation:spin .8s linear infinite}
.board-steps li.is-done{opacity:1}
.board-steps li.is-done i{background:var(--c);border-color:var(--c);color:var(--night);transform:scale(1.05)}
.board-steps li.is-done i::after{content:"✓"}
@keyframes spin{to{transform:rotate(360deg)}}
.step-mayday{--c:var(--mayday)}.step-pulse{--c:var(--pulse)}.step-vault{--c:var(--vault)}.step-fairly{--c:var(--fairly)}.step-tempo{--c:var(--tempo)}
.board-foot{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;color:var(--night-muted)}
.board-live{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite;box-shadow:0 0 0 0 #38e1ff99}
.float-chip{position:absolute;padding:10px 16px;border-radius:14px;background:#fff;color:var(--ink);font-size:13px;font-weight:650;box-shadow:0 18px 40px #02041a66;white-space:nowrap;animation:float 6s ease-in-out infinite}
.float-chip b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;margin-right:6px;font-size:12px;color:var(--night)}
.chip-a{top:-4px;right:-10px}.chip-a b{background:var(--fairly)}
.chip-b{bottom:-8px;left:-14px;animation-delay:-2s}.chip-b b{background:var(--mayday)}
.chip-c{bottom:-6px;right:28px;animation-delay:-4s}.chip-c b{background:var(--cyan);border-radius:50%;font-size:0;width:10px;min-width:10px;height:10px}
@keyframes float{50%{transform:translateY(-10px)}}

/* Ticker. */
.ticker{overflow:hidden;border-block:1px solid var(--night-line);padding-block:18px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 40s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{list-style:none;display:flex;margin:0;padding:0}
.ticker li{display:flex;align-items:center;gap:28px;padding-right:28px;font-size:clamp(18px,2vw,24px);font-weight:650;color:#ffffffd9;white-space:nowrap;letter-spacing:-.01em}
.ticker li::after{content:"✦";color:var(--violet);font-size:14px}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Section shells. */
.band{padding-block:110px}
.band-light{background:var(--paper);color:var(--ink)}
.band-dark{background:radial-gradient(900px 500px at 85% 0,#6366f12e,transparent 70%),var(--night)}
.band-light+.band-light{padding-top:0}
.kicker{display:inline-block;margin:0 0 18px;font-size:13px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.band-light .kicker{background:linear-gradient(100deg,#4f46e5,#9333ea 60%,#0891b2);-webkit-background-clip:text;background-clip:text}
.band-light .gradient-text{background-image:linear-gradient(100deg,#4f46e5,#9333ea 45%,#0891b2)}
.section-intro{margin-bottom:56px}
.section-intro h2{font-size:clamp(34px,4.4vw,60px);line-height:1.04;margin:0;max-width:900px}
.section-intro p:not(.kicker){font-size:18px;line-height:1.65;margin:0}
.section-intro-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px;align-items:end}
.band-light .section-intro-split>p{color:var(--muted)}
.band-dark .section-intro-split>p{color:var(--night-muted)}
.section-intro-center{text-align:center;display:grid;justify-items:center}
.section-intro-center p:not(.kicker){max-width:640px;margin-top:20px;color:var(--muted)}

/* Before / after. */
.pain-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pain-compare article{border-radius:var(--radius);padding:36px}
.pain-compare h3{font-size:24px;margin:0 0 22px}
.pain-compare ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pain-compare li{display:flex;gap:14px;font-size:17px;line-height:1.5}
.pain-compare li::before{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:800}
.pain-before{background:#e9eaf3;color:#4a5072}
.pain-before li::before{content:"✕";background:#d6d8e6;color:#6b7194}
.pain-after{background:var(--night);color:#fff;box-shadow:0 30px 70px #0b0f2a33;position:relative;overflow:hidden}
.pain-after::after{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(#6366f180,transparent 70%)}
.pain-after li::before{content:"✓";background:var(--lime);color:var(--night)}

/* Application explorer. */
.explorer{display:grid;grid-template-columns:minmax(240px,.38fr) minmax(0,1fr);gap:20px;align-items:stretch}
.explorer-tabs{display:grid;gap:8px;align-content:start}
.explorer-tab{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:16px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s}
.explorer-tab:hover{background:#fff}
.explorer-tab span{display:grid;gap:2px}
.explorer-tab b{font-size:17px}
.explorer-tab small{font-size:13px;color:var(--muted)}
.explorer-tab[aria-selected=true]{background:#fff;border-color:var(--line);box-shadow:0 14px 34px #11152f14}
.explorer-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--c)}
.explorer-tab[aria-selected=true] .explorer-progress{animation:tab-progress var(--cycle,6s) linear forwards}
.explorer.is-paused .explorer-progress{animation:none;width:100%}
@keyframes tab-progress{to{width:100%}}
.tab-mayday,.panel-mayday{--c:var(--mayday)}.tab-pulse,.panel-pulse{--c:var(--pulse)}.tab-vault,.panel-vault{--c:var(--vault)}.tab-fairly,.panel-fairly{--c:var(--fairly)}.tab-tempo,.panel-tempo{--c:var(--tempo)}
.explorer-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:36px;align-items:center;padding:44px;border-radius:28px;background:var(--night);color:#fff;position:relative;overflow:hidden;min-height:400px}
.explorer-panel::before{content:"";position:absolute;width:460px;height:460px;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--c) 45%,transparent),transparent 70%);pointer-events:none}
.explorer-panel[hidden]{display:none}
.explorer-panel:not([hidden]){animation:panel-in .5s cubic-bezier(.2,.8,.2,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}}
.explorer-copy{position:relative}
.explorer-copy .kicker{background:none;color:var(--c)}
.explorer-copy h3{font-size:clamp(36px,4vw,54px);margin:0 0 16px}
.explorer-copy p:not(.kicker){font-size:18px;line-height:1.6;color:var(--night-muted);margin:0 0 26px}
.explorer-copy a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--c);border-bottom:2px solid currentColor}
.explorer-mock{position:relative;display:grid;gap:10px;padding:22px;border-radius:20px;background:#ffffff0d;border:1px solid #ffffff1c}
.mock-row{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:#ffffff0f;font-size:15px;animation:row-in .6s both}
.mock-row:nth-child(2){animation-delay:.1s}.mock-row:nth-child(3){animation-delay:.2s}.mock-row:nth-child(4){animation-delay:.3s}
@keyframes row-in{from{opacity:0;transform:translateX(16px)}}
.mock-row span{flex:1}
.mock-row small{font-size:12px;color:var(--night-muted)}
.mock-task i{width:20px;height:20px;border-radius:6px;border:2px solid var(--c)}
.mock-task i.is-done{background:var(--c);position:relative}
.mock-task i.is-done::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;color:var(--night)}
.mock-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-columns div{display:grid;gap:8px;align-content:start;padding:12px;border-radius:12px;background:#ffffff0f}
.mock-columns small{font-size:12px;color:var(--night-muted);margin-bottom:4px}
.mock-columns b{display:block;height:42px;border-radius:9px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,transparent) var(--w),#ffffff14 var(--w))}
.mock-file span{display:grid;place-items:center;width:38px;height:44px;border-radius:8px;background:var(--c);color:var(--night);font-size:10px;font-weight:800;flex:none}
.mock-file b{flex:1;font-weight:600}
.mock-file small{padding:4px 10px;border-radius:99px;background:#ffffff14}
.mock-people{display:flex;align-items:center;margin-bottom:6px}
.mock-people i{display:grid;place-items:center;width:34px;height:34px;margin-right:-8px;border-radius:50%;border:2px solid var(--night);background:var(--c);color:var(--night);font-style:normal;font-weight:800;font-size:13px}
.mock-people i:nth-child(2){background:var(--cyan)}.mock-people i:nth-child(3){background:var(--lime)}
.mock-people span{margin-left:20px;font-weight:650}
.mock-expense b{font-size:16px}
.mock-envelope div{flex:2;height:10px;border-radius:99px;background:#ffffff14;overflow:hidden}
.mock-envelope div b{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c);animation:grow 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{width:0}}

/* Hub. */
.hub{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;margin-top:20px;padding:40px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px #11152f0f}
.hub-copy img{margin-bottom:18px}
.hub-copy h3{font-size:30px;margin:0 0 12px;line-height:1.15}
.hub-copy p{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 22px}
.hub-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hub-grid li{display:grid;gap:4px;padding:18px 20px;border-radius:16px;background:var(--paper);transition:transform .25s,box-shadow .25s,background .25s}
.hub-grid li:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 30px #11152f14}
.hub-grid b{font-size:17px}
.hub-grid span{font-size:14px;color:var(--muted);line-height:1.5}
.hub-grid-wide{grid-column:1/-1;background:linear-gradient(100deg,#eef0ff,#f4ecff 50%,#e6fbff)!important}

/* Journey: app icons spread out and a light follows the pointer on hover. */
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
[data-spotlight]{position:relative;isolation:isolate;overflow:hidden}
[data-spotlight]::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),#8b8cff2e,transparent 65%);opacity:0;transition:opacity .35s}
[data-spotlight]::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),#c49bffcc,#5ee7ff55 45%,transparent 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;pointer-events:none}
[data-spotlight]:hover::before,[data-spotlight]:hover::after{opacity:1}
.journey-step{display:flex;flex-direction:column;padding:32px;border-radius:var(--radius);background:#ffffff0a;border:1px solid var(--night-line);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}
.journey-step:hover{transform:translateY(-8px);background:#ffffff10}
.journey-icons{display:flex;margin-bottom:26px;height:48px;align-items:center}
.journey-icons img{width:44px;height:44px;padding:6px;border-radius:14px;background:#ffffff14;border:1px solid #ffffff24;box-shadow:0 8px 20px #02041a66;margin-right:-14px;transition:margin .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.journey-icons img:nth-child(2){transform:rotate(-6deg)}.journey-icons img:nth-child(3){transform:rotate(5deg)}.journey-icons img:nth-child(4){transform:rotate(-3deg)}
.journey-step:hover .journey-icons img{margin-right:8px;transform:translateY(-4px) rotate(0)}
.journey-step:hover .journey-icons img:nth-child(2){transition-delay:.04s}.journey-step:hover .journey-icons img:nth-child(3){transition-delay:.08s}.journey-step:hover .journey-icons img:nth-child(4){transition-delay:.12s}
.journey-step strong{display:block;font-size:22px;margin-bottom:12px;letter-spacing:-.02em}
.journey-step p{font-size:16px;line-height:1.65;color:var(--night-muted);margin:0 0 24px}
.journey-where{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;background:#ffffff0f;font-size:13px;font-weight:650;color:var(--night-muted);transition:background .35s,color .35s}
.journey-where::after{content:"→";transition:transform .35s}
.journey-step:hover .journey-where{background:var(--lime);color:var(--night)}
.journey-step:hover .journey-where::after{transform:translateX(4px)}
.audiences{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.audiences article{padding:24px;border-radius:18px;border:1px solid var(--night-line);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.audiences article:hover{transform:translateY(-4px)}
.audiences span{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:99px;background:#ffffff12;font-size:13px;font-weight:700;color:var(--lime)}
.audiences p{font-size:15px;line-height:1.6;color:var(--night-muted);margin:0}
.journey-note{margin:36px 0 0;font-size:14px;line-height:1.6;color:#8d93c0;max-width:820px}

/* Offers. */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 26px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px #11152f0a;transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-6px);box-shadow:0 28px 60px #11152f1c}
.plan-for{margin:0;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan h3{font-size:28px;margin:0}
.plan-detail{margin:0;min-height:4.8em;font-size:15px;line-height:1.6;color:var(--muted)}
.plan-price{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-top:6px}
.plan-price small{display:block;font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:4px}
.plan-facts{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.plan-facts li{display:flex;gap:10px;font-size:14px;line-height:1.45}
.plan-facts li::before{content:"✓";flex:none;color:#4f46e5;font-weight:800}
.plan-cta{width:100%}
.plan .suite-web-benefit{margin:4px 0 0}
.plan .home-plan-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:#4f46e5;text-decoration:underline;text-underline-offset:5px}
.plan.is-featured{background:linear-gradient(var(--night),var(--night)) padding-box,var(--gradient) border-box;color:#fff;border:2px solid transparent;box-shadow:0 30px 70px #4f46e540;transform:translateY(-10px)}
.plan.is-featured:hover{transform:translateY(-16px)}
.plan.is-featured .plan-for,.plan.is-featured .plan-detail,.plan.is-featured .plan-price small{color:var(--night-muted)}
.plan.is-featured .plan-facts{border-color:var(--night-line)}
.plan.is-featured .plan-facts li::before{color:var(--lime)}
.plan.is-featured .home-plan-link{color:var(--cyan)}
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:99px;background:var(--lime);color:var(--night);font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px #c6f65a55}
.landing .suite-web-benefit{--web-bg:#f2f3fb;--web-ink:#1f2450;--web-muted:#565d80;--web-line:#e1e3f0}
.landing .plan.is-featured .suite-web-benefit{--web-bg:#ffffff0f;--web-ink:#fff;--web-muted:#b7bce0;--web-line:#ffffff24}
.offers-more{display:flex;justify-content:center;margin-top:44px}

/* Trust and FAQ. */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trust article{padding:32px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.trust-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:14px;background:linear-gradient(135deg,#eef0ff,#e6fbff);color:#4f46e5;font-size:22px;font-weight:700}
.trust h3{font-size:21px;margin:0 0 10px}
.trust p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.faq{margin-top:64px;max-width:860px}
.faq h3{font-size:28px;margin:0 0 18px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18px;font-weight:650;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:20px;font-weight:400;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--muted)}
.faq details a{color:#4f46e5;text-decoration:underline;text-underline-offset:4px}

/* Final call to action. */
.final-cta{margin-block:100px;padding:80px 40px;border-radius:36px;text-align:center;display:grid;justify-items:center;position:relative;overflow:hidden;background:radial-gradient(600px 300px at 20% 0,#6366f166,transparent 70%),radial-gradient(500px 300px at 90% 100%,#38e1ff40,transparent 70%),var(--night-2);border:1px solid var(--night-line)}
.final-cta h2{font-size:clamp(34px,4.6vw,64px);line-height:1.05;margin:0 0 18px;max-width:900px}
.final-cta p{font-size:19px;color:var(--night-muted);margin:0 0 32px}

/* Footer on dark. */
.landing .footer{border-color:var(--night-line);color:#fff}
.landing .footer-top p,.landing .footer-bottom,.landing .footer-secondary{color:var(--night-muted)}
.landing .footer-links{color:#dfe2ff}
.landing .footer a:hover{color:var(--lime)}
.landing .footer-bottom,.landing .footer-secondary{border-color:var(--night-line)}

/* Sticky purchase bar. */
.sticky-cta{position:fixed;left:50%;bottom:20px;z-index:50;display:flex;align-items:center;gap:20px;padding:10px 10px 10px 24px;border-radius:20px;background:#141a46e6;border:1px solid #ffffff2b;box-shadow:0 20px 50px #02041a80;backdrop-filter:blur(14px);color:#fff;font-size:15px;font-weight:600;transform:translate(-50%,140%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;width:max-content;max-width:calc(100% - 32px)}
.sticky-cta.is-visible{transform:translate(-50%,0);opacity:1}

/* Scroll reveal, only when the script runs. */
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--delay,0s)}
.js-reveal .reveal.is-visible{opacity:1;transform:none}
.js-reveal .plan.is-featured.reveal.is-visible{transform:translateY(-10px)}

@media(max-width:1100px){
    .hero{grid-template-columns:1fr;gap:48px;padding-block:56px 72px}
    .hero-visual{max-width:560px;width:100%;justify-self:center}
    .section-intro-split{grid-template-columns:1fr;gap:20px}
    .explorer{grid-template-columns:1fr}
    .explorer-tabs{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
    .explorer-tab{scroll-snap-align:start}
    .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
    .audiences{grid-template-columns:repeat(2,1fr)}
    .hub{grid-template-columns:1fr}
    .landing .header nav{color:var(--night-muted)}
}
@media(max-width:760px){
    .landing .wrap{width:calc(100% - 32px)}
    .landing .header{width:calc(100% - 32px)}
    .band{padding-block:72px}
    .hero{padding-block:36px 56px}
    .hero h1{font-size:clamp(42px,12vw,56px)}
    .hero-actions .cta{width:100%}
    .hero-visual{padding:20px 0}
    .board{transform:none;padding:18px}
    .board-steps li{padding:10px 12px}
    .board-steps li b{font-size:14px}
    .chip-b{left:-6px;bottom:auto;top:-14px}
    .chip-a{display:none}
    .chip-c{right:10px}
    .pain-compare,.journey,.trust,.audiences{grid-template-columns:1fr}
    .pain-compare article{padding:26px}
    .explorer-panel{grid-template-columns:1fr;padding:26px;gap:24px;min-height:0}
    .explorer-tabs{grid-template-columns:repeat(5,minmax(140px,1fr));margin-inline:-16px;padding-inline:16px}
    .hub{padding:26px}
    .hub-grid{grid-template-columns:1fr}
    .plans{grid-template-columns:1fr;gap:28px}
    .plan.is-featured,.js-reveal .plan.is-featured.reveal.is-visible{transform:none}
    .final-cta{padding:56px 22px;border-radius:26px;margin-block:64px}
    .final-cta .cta{width:100%}
    .sticky-cta{left:16px;right:16px;bottom:12px;width:auto;max-width:none;transform:translateY(140%);justify-content:center;padding:10px}
    .sticky-cta.is-visible{transform:none}
    .sticky-cta span{display:none}
    .sticky-cta .cta{width:100%}
}
@media(prefers-reduced-motion:reduce){
    .landing *,.landing *::before,.landing *::after{animation:none!important;transition:none!important}
    .js-reveal .reveal{opacity:1;transform:none}
    .board{transform:none}
}