/* P2 Sites: styles for every page (Signal brand). Page layout pieces live in shared/sections.js. */
/* Inter, self-hosted (no Google Fonts). One variable file covers every weight; trimmed to Latin by pyftsubset.
   License: shared/fonts/Inter-LICENSE.txt (SIL Open Font License). */
@font-face { font-family:Inter; src:url(/shared/fonts/InterVariable-latin.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
:root { --ink:#0B0B0C; --paper:#fff; --blue:#2B4BFF; --fog:#F2F2F4; --steel:#6B6F7A; --f:Inter,-apple-system,'Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.6 var(--f); font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
p { text-wrap:pretty; }
h1, h2, h3 { text-wrap:balance; }
a { color:inherit; }
.w { max-width:1240px; margin:0 auto; padding:0 24px; }
.btn { display:inline-block; white-space:nowrap; background:var(--blue); color:#fff; text-decoration:none; font-weight:700; padding:16px 26px; border-radius:10px; border:0; font:700 17px var(--f); cursor:pointer; }
.btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn:hover { filter:brightness(1.08); }
.kick { font-size:15px; font-weight:700; letter-spacing:.01em; color:var(--blue); margin:0 0 18px; display:flex; gap:12px; align-items:center; }
.kick b { color:var(--ink); }
h1, h2 { letter-spacing:-.022em; line-height:1.05; margin:0; font-weight:700; }
h2 { font-size:clamp(34px, 4.6vw, 64px); max-width:16ch; }

header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid #eee; }
header .w { display:flex; align-items:center; gap:32px; height:72px; }
.logo svg { height:36px; width:auto; display:block; }
header nav { display:flex; gap:28px; margin-left:auto; font-size:15px; font-weight:500; }
header nav a { text-decoration:none; }
header .btn { padding:11px 18px; font-size:15px; }

.hero { padding:88px 0 96px; }
.hero .w { display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:center; }
.hero h1 { font-size:clamp(44px, 6.4vw, 92px); }
.hero p.sub { font-size:21px; line-height:1.55; max-width:38ch; margin:28px 0 32px; color:#2a2a2e; }
.hero .btns { display:flex; gap:12px; flex-wrap:wrap; }
.hero .note { font-size:15px; color:var(--steel); margin-top:18px; }

.band { background:var(--fog); padding:110px 0; }
.custom .w { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end; }
.custom p { font-size:20px; line-height:1.6; margin:0; max-width:46ch; color:#2a2a2e; }

.steps { padding:110px 0; }
.steps ol { list-style:none; padding:0; margin:64px 0 0; display:grid; grid-template-columns:repeat(5, 1fr); border-top:2px solid var(--ink); }
.steps li { padding:24px 24px 0 0; }
.steps li b { display:block; font-size:64px; letter-spacing:-.05em; color:var(--blue); line-height:1; margin-bottom:22px; }
.steps li h3 { font-size:20px; line-height:1.25; margin:0 0 10px; letter-spacing:-.01em; }
.steps li p { margin:0; font-size:17px; line-height:1.55; color:#333; }

.inc .grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2px; background:var(--fog); margin-top:56px; }
.inc .grid div { background:#fff; padding:26px; }
.inc h3 { font-size:19px; line-height:1.3; margin:0 0 8px; }
.inc p { margin:0; font-size:16px; line-height:1.55; color:#3d3d42; }
.who { margin-top:40px; display:flex; flex-wrap:wrap; gap:8px; }
.who span { font-size:15px; font-weight:600; padding:8px 14px; border-radius:99px; background:#fff; }

.samp { padding:110px 0; }
.samp .head { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:48px; }
.samp .head p { max-width:40ch; color:#4a4d57; font-size:17px; margin:0; }

.price { background:var(--ink); color:#fff; padding:110px 0; }
.price .kick b { color:#fff; }
.price .sub { font-size:19px; color:#c9c9cf; max-width:52ch; margin:24px 0 56px; }
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.plan { background:#18181b; border-radius:16px; padding:32px; display:flex; flex-direction:column; }
.plan.f { background:#fff; color:var(--ink); }
.plan h3 { margin:0; font-size:24px; display:flex; justify-content:space-between; }
.plan h3 em { font-style:normal; font-size:13px; background:var(--blue); color:#fff; padding:5px 10px; border-radius:99px; align-self:center; }
.plan .blurb { color:#b4b4bb; font-size:16px; line-height:1.5; margin:6px 0 24px; }
.plan.f .blurb { color:var(--steel); }
.plan .amt { font-size:56px; font-weight:700; letter-spacing:-.04em; line-height:1; }
.plan .amt small { font-size:16px; letter-spacing:0; font-weight:500; color:#b4b4bb; }
.plan.f .amt small { color:var(--steel); }
.plan .mo { font-size:18px; margin:8px 0 24px; font-weight:600; }
.plan ul { list-style:none; padding:0; margin:0 0 28px; flex:1; }
.plan li { padding:10px 0; border-top:1px solid #ffffff1c; font-size:16px; line-height:1.45; }
.plan.f li { border-color:#eee; }
.plan li.inh { font-weight:700; color:#9badff; }
.plan.f li.inh { color:var(--blue); }
.plan .btn { text-align:center; }
.plan:not(.f) .btn { background:#fff; color:var(--ink); }
.terms { font-size:15px; line-height:1.6; color:#b4b4bb; margin-top:28px; max-width:68ch; }

.mklb { padding:110px 0; }
.mklb .w { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.mklb p { font-size:20px; line-height:1.6; margin:0 0 18px; max-width:48ch; }
.mklb .extra { font-weight:700; color:var(--blue); }

.faq { padding:0 0 110px; }
.faq .w { display:grid; grid-template-columns:1fr 1.6fr; gap:56px; }
details { border-top:2px solid var(--ink); padding:20px 0; }
details:last-child { border-bottom:2px solid var(--ink); }
summary { font-size:20px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
summary::after { content:"+"; color:var(--blue); font-size:28px; line-height:.8; }
details[open] summary::after { content:"–"; }
details p { margin:12px 0 0; color:#333; max-width:62ch; line-height:1.65; }

.final { background:var(--blue); color:#fff; padding:110px 0; }
.final .w { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.final h2 { max-width:12ch; }
.final .sub { font-size:20px; margin-top:24px; }
.p2form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.p2form label span { display:block; font-size:15px; font-weight:600; margin-bottom:6px; }
.p2form .full, .p2form-due { grid-column:1/-1; }
.p2form .trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.p2form .p2form-due { font-size:16px; font-weight:600; color:var(--ink); }
.p2form .p2form-agree { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.5; cursor:pointer; }
.p2form .p2form-agree[hidden] { display:none; }
.p2form .p2form-agree input { width:20px; height:20px; flex:none; margin:2px 0 0; accent-color:var(--blue); }
.p2form .p2form-agree span { font-weight:400; margin:0; }
.p2form button:disabled { opacity:.7; cursor:wait; }
.p2form .p2form-note.bad { color:#b3261e; }
.p2form input, .p2form select { width:100%; padding:14px; border-radius:10px; border:0; font:16px var(--f); }
.p2form button { grid-column:1/-1; background:var(--ink); color:#fff; border:0; padding:18px; border-radius:10px; font:700 17px var(--f); cursor:pointer; }
.p2form p { grid-column:1/-1; font-size:14px; margin:0; }
.p2form-note { font-weight:700; }

footer { padding:56px 0 100px; font-size:15px; color:#4a4d57; }
footer .w { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
footer .logo svg { height:28px; }
footer nav { display:flex; gap:18px; }

/* launch sale */
.bar { background:var(--blue); color:#fff; font-size:14px; font-weight:600; text-align:center; padding:10px 16px; }
.bar a { text-decoration:none; }
.bar b { font-variant-numeric:tabular-nums; background:#fff; color:var(--blue); border-radius:6px; padding:2px 8px; margin-left:8px; white-space:nowrap; }
.sale { display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center; background:var(--blue); border-radius:20px; padding:36px; margin:0 0 20px; position:relative; overflow:hidden; }
.sale::after { content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; border:28px solid #ffffff14; }
.sale-tile { width:190px; height:190px; border-radius:28px; background:#fff; color:var(--blue); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; position:relative; transform:rotate(-4deg); box-shadow:0 18px 40px rgba(0,0,0,.25); }
.sale-tile::before { content:""; position:absolute; top:18px; right:18px; width:16px; height:16px; border-radius:50%; background:var(--blue); }
.sale-tile b { font-size:84px; line-height:.85; letter-spacing:-.06em; }
.sale-tile span { font-size:15px; font-weight:700; margin-top:8px; color:var(--ink); }
.sale .kick { color:#fff; margin-bottom:10px; }
.sale h3 { font-size:clamp(28px, 3.4vw, 46px); letter-spacing:-.035em; line-height:1; margin:0 0 12px; }
.sale p { margin:0; color:#e6e9ff; font-size:17px; line-height:1.55; max-width:46ch; }
.spots { position:relative; z-index:1; width:340px; }
.spots-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
.spots-grid i { aspect-ratio:1; border-radius:9px; background:#fff; position:relative; }
.spots-grid i::after { content:""; position:absolute; top:22%; right:22%; width:18%; height:18%; border-radius:50%; background:var(--blue); }
.spots-grid i.taken { background:#ffffff2e; }
.spots-grid i.taken::after { display:none; }
.spots-cap { margin-top:14px; font-size:15px; color:#fff !important; font-weight:600; }
.spots-cap b { font-size:30px; letter-spacing:-.03em; margin-right:4px; }
.lp { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.lp em { font-style:normal; font-size:13px; font-weight:700; background:var(--blue); color:#fff; padding:5px 10px; border-radius:99px; }
.lp i { font-style:normal; font-size:14px; font-weight:700; color:#9badff; }
.plan.f .lp i { color:var(--blue); }
.plan .reg { font-size:14px; color:#b4b4bb; margin-top:8px; }
.plan.f .reg { color:var(--steel); }
@media (max-width: 1100px) { .sale { grid-template-columns:auto 1fr; } .spots { grid-column:1/-1; } }
@media (max-width: 640px) {
  .sale { grid-template-columns:1fr; padding:26px 20px; gap:24px; }
  .sale-tile { width:140px; height:140px; border-radius:22px; padding:16px; } .sale-tile b { font-size:60px; }
  .spots { width:100%; }
  .bar { font-size:13px; }
}

@media (max-width: 900px) {
  header nav { display:none; }
  header .btn { margin-left:auto; }
  .hero { padding:48px 0 64px; }
  .hero .w, .custom .w, .mklb .w, .faq .w, .final .w { grid-template-columns:1fr; gap:40px; }
  .steps ol, .inc .grid { grid-template-columns:1fr 1fr; }
  .steps ol { gap:32px 0; }
  .plans { grid-template-columns:1fr; }
  .samp .head { flex-direction:column; align-items:start; }
  .band, .steps, .samp, .price, .mklb, .final { padding:72px 0; }
}
@media (max-width: 560px) {
  body { font-size:17px; }
  .w { padding:0 16px; }
  .steps ol, .inc .grid, .p2form { grid-template-columns:1fr; }
  .hero p.sub { font-size:19px; }
  header .w { gap:16px; } header .logo svg { height:30px; } header .btn { padding:10px 14px; font-size:14px; }
}

/* multi-page additions */
header nav a.on { color:var(--blue); }
.menu { display:none; margin-left:4px; margin-right:-10px; width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; }
.menu i { position:absolute; left:11px; right:11px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, top .2s; }
.menu i:first-child { top:17px; } .menu i:last-child { top:25px; }
header.open .menu i:first-child { top:21px; transform:rotate(45deg); } header.open .menu i:last-child { top:21px; transform:rotate(-45deg); }
.phead { padding:96px 0 72px; }
.phead h1 { font-size:clamp(40px, 5.8vw, 84px); max-width:16ch; }
.phead p.sub { font-size:21px; line-height:1.55; max-width:46ch; margin:28px 0 0; color:#2a2a2e; }
.more { display:inline-block; margin-top:40px; font-weight:700; color:var(--blue); text-decoration:none; font-size:17px; }
.more:hover { text-decoration:underline; }
.price .more { color:#fff; }
.cta { background:var(--blue); color:#fff; padding:110px 0; }
.cta .w { display:flex; justify-content:space-between; align-items:end; gap:40px; flex-wrap:wrap; }
.cta h2 { max-width:13ch; }
.cta p { font-size:20px; margin:20px 0 0; max-width:40ch; }
.cta .btns { display:flex; gap:12px; flex-wrap:wrap; }
.cta .btn { background:#fff; color:var(--ink); }
.cta .btn.ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 2px #fff; }
.start-wrap { padding:0 0 110px; }
.start-wrap .w { display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:start; }
.start-wrap .side p { font-size:18px; color:#333; margin:0 0 16px; }
.start-wrap .side ol { padding-left:20px; margin:0; color:#333; font-size:18px; }
.start-wrap .side li { margin:8px 0; }
.start-wrap .p2form { background:var(--fog); padding:32px; border-radius:16px; }
.start-wrap .p2form button { background:var(--blue); }
.start-wrap .p2form p { color:var(--steel); }
.start-wrap .p2form .p2form-due { color:var(--ink); }
.values { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--fog); margin-top:56px; }
.values div { background:#fff; padding:28px; }
.values h3 { font-size:20px; margin:0 0 8px; }
.values p { margin:0; color:#3d3d42; font-size:17px; line-height:1.55; }
footer .fnav { display:flex; gap:18px; flex-wrap:wrap; }
footer .fnav a { text-decoration:none; }
footer .w { align-items:flex-start; }
footer .fmeta { display:flex; flex-direction:column; gap:10px; max-width:420px; }
@media (max-width: 900px) {
  .menu { display:block; }
  header.open nav { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid #eee; padding:8px 24px 16px; box-shadow:0 12px 24px rgba(0,0,0,.08); }
  header.open nav a { padding:14px 0; font-size:18px; border-bottom:1px solid #f0f0f0; }
  header .w { position:relative; }
  .phead { padding:56px 0 40px; }
  .start-wrap .w, .values { grid-template-columns:1fr; }
  .cta { padding:72px 0; }
}
@media (max-width: 560px) {
  .menu { width:40px; }
  .start-wrap .p2form { padding:20px; }
}

/* hero video slot (4:5 portrait) */
.hvideo { position:relative; aspect-ratio:4/5; width:100%; max-width:480px; justify-self:end; border-radius:20px; overflow:hidden; background:var(--ink); box-shadow:0 30px 70px rgba(0,0,0,.18); }
.hvideo video { width:100%; height:100%; object-fit:cover; display:block; }
.hvideo-empty { background:var(--fog); box-shadow:inset 0 0 0 2px #d9dbe3; display:grid; place-items:center; text-align:center; }
.hvideo-empty::before { content:""; position:absolute; inset:14px; border:2px dashed #c4c8d4; border-radius:12px; }
.hvideo-empty div { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--steel); padding:24px; }
.hvideo-empty b { color:var(--ink); font-size:20px; }
.hvideo-empty small { font-size:14px; line-height:1.5; }
.hv-play { width:72px; height:72px; border-radius:18px; background:var(--blue); position:relative; margin-bottom:6px; }
.hv-play::after { content:""; position:absolute; left:29px; top:22px; border-left:20px solid #fff; border-top:14px solid transparent; border-bottom:14px solid transparent; }
@media (max-width: 900px) { .hvideo { justify-self:center; max-width:420px; } }

/* readability: lighter blue for labels on dark backgrounds (Signal Blue on black is only 3.3:1) */
.price .kick, .price .more { color:#9badff; }
.price .kick b { color:#fff; }
.price .sale .kick { color:#fff; opacity:1; }
/* section labels keep their own style inside sections that restyle paragraphs */
.custom p.kick, .mklb p.kick, .sale p.kick { font-size:15px; line-height:1.5; max-width:none; margin:0 0 18px; }
.custom p.kick, .mklb p.kick { color:var(--blue); }
.sale p.kick { color:#fff; margin-bottom:10px; }

/* thank-you page: three steps */
@media (min-width: 901px) { .steps.thanks ol { grid-template-columns:repeat(3, 1fr); } }

/* Terms and Privacy pages */
.legal { padding:0 0 110px; }
.legal .w { display:grid; grid-template-columns:1fr 1.6fr; gap:56px; align-items:start; }
.legal-meta { position:sticky; top:110px; }
.legal-meta p { font-size:17px; line-height:1.6; color:#333; margin:0 0 14px; }
.legal-meta .legal-draft { display:inline-block; background:#fff4d6; color:#5c4300; font-weight:700; font-size:15px; padding:8px 12px; border-radius:8px; }
.legal-body section { border-top:2px solid var(--ink); padding:28px 0 36px; }
.legal-body h2 { font-size:24px; margin:0 0 16px; display:flex; gap:14px; }
.legal-body h2 span { color:var(--blue); }
.legal-body p, .legal-body li { font-size:17px; line-height:1.65; color:#2a2a2e; max-width:68ch; }
.legal-body p { margin:0 0 14px; }
.legal-body ul { margin:0 0 14px; padding-left:20px; }
.legal-body li { margin:6px 0; }
@media (max-width: 900px) { .legal .w { grid-template-columns:1fr; gap:24px; } .legal-meta { position:static; } }