/* BluePostr landing: BlueNotary 2025 kit
   (Outfit + Inter, Royal Blue on ivory/white, 8px buttons, kit shadows). */
:root {
  --blue: #3B40D5; --blue-dark: #2F33AA; --blue-mid: #6266DD; --blue-soft: #9D9FEA;
  --blue-tint: #C8D6F7; --blue-wash: #EBECF9; --ghost: #FAFAFD; --sky: #92B1EB;
  --ink: #171719; --muted: #5C5C63; --soft: #7D7D86; --line: #E5E7EB; --line-2: #C2C2C7;
  --ivory: #FFFCF1; --bg: #F5F5FC; --white: #fff;
  --ok: #00A843; --bad: #FF4D1F;
  --r: 8px; --r-lg: 16px; --r-xl: 24px;
  --sh-md: 0 4px 12px rgba(15,18,54,.08);
  --sh-lg: 0 12px 40px rgba(15,18,54,.10), 0 2px 6px rgba(15,18,54,.04);
  --sh-xl: 0 24px 64px rgba(15,18,54,.14), 0 4px 12px rgba(15,18,54,.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 Inter, system-ui, sans-serif; color: var(--ink); background: var(--white); overflow-x: hidden; }
h1, h2, h3 { font-family: Outfit, Inter, sans-serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
h1 em, h2 em { font-style: normal; color: var(--blue); }
a { color: var(--blue); }
section { padding: 96px 24px; }
.center { text-align: center; }
.eyebrow { font: 600 12px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); margin: 0 0 14px; }
.eyebrow.light { color: var(--blue-tint); }
.lead { color: var(--muted); font-size: 18px; max-width: 620px; margin: 14px 0 0; }
.lead.center { margin-left: auto; margin-right: auto; }

/* buttons: kit .btn-primary / .btn-secondary */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--r); border: 1px solid var(--blue); background: var(--blue); color: #fff; font: 600 15px/1 Inter, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.lg { padding: 16px 28px; font-size: 16px; }
.btn.sm { padding: 8px 14px; font-size: 13px; }
.btn.ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn.white { background: #fff; color: var(--blue); border-color: #fff; }
.btn.white:hover { background: var(--blue-wash); }
.btn.bn { background: #fff; color: var(--ink); border-color: var(--line-2); width: 100%; }
.btn.bn:hover { border-color: var(--blue); color: var(--blue); }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 32px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font: 600 20px/1 Outfit, sans-serif; letter-spacing: -0.02em; }
.logo b { color: var(--blue); font-weight: 600; }
.nav-links { margin-left: auto; margin-right: 14px; display: flex; gap: 26px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--blue); }

/* network tiles: brand color ground, white glyph */
.ni { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; color: #fff; background: #111; }
.ni > svg { width: 52%; height: 52%; fill: currentColor; }
.ni.tile { box-shadow: var(--sh-md); }
.ni.sm { width: 28px; height: 28px; border-radius: 7px; }
.ni.xs { width: 22px; height: 22px; border-radius: 6px; }
.ni.mini { width: 18px; height: 18px; border-radius: 5px; }
.ni-bluesky { background: #1185FE; }
.ni-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.ni-facebook { background: #0866FF; }
.ni-linkedin { background: #0A66C2; }
.ni-tiktok, .ni-x, .ni-threads { background: #000; }
.ni-youtube { background: #FF0000; }
.ni-pinterest { background: #E60023; }
.ni-bs { background: var(--blue); }
.ni .ck { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); border: 2px solid #fff; display: grid; place-items: center; }
.ni .ck svg { width: 14px; height: 14px; color: #fff; }
.nets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* hero: everything above the fold */
.hero { position: relative; background: var(--ivory); padding: 56px 32px 64px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: none; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(59,64,213,.10) 1.5px, transparent 1.5px); background-size: 28px 28px; pointer-events: none; }
.hero > * { position: relative; }
.hero-copy { max-width: 560px; justify-self: end; }
.hero h1 { font-size: clamp(42px, 5.4vw, 70px); line-height: 1; letter-spacing: -2px; font-weight: 600; }
.hero h1 em { font-style: italic; }
.sub { font-size: 19px; color: var(--muted); margin: 18px 0 24px; max-width: 480px; }
.feats { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.feats li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.feats svg, .steps svg { width: 32px; height: 32px; padding: 7px; flex-shrink: 0; border-radius: 8px; background: var(--blue-wash); fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feats li:first-child svg { fill: var(--blue); }

.hero-viz { justify-self: start; display: grid; grid-template-columns: 260px 64px auto; align-items: center; }
.composer { position: relative; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--sh-xl); }
.cm-top { display: flex; flex-direction: column; gap: 8px; }
.cm-top b { font: 600 15px/1 Outfit, sans-serif; }
.cm-acc { display: flex; gap: 4px; }
.cm-text { margin: 12px 0 10px; font-size: 14px; line-height: 1.45; }
.cm-img { height: 90px; border-radius: 10px; background: linear-gradient(140deg, var(--blue-tint), var(--sky) 60%, var(--blue-mid)); }
.cm-btn { margin-top: 12px; background: var(--blue); color: #fff; border-radius: var(--r); padding: 11px; text-align: center; font-weight: 600; font-size: 14px; }
.cm-click { position: absolute; right: -14px; bottom: -14px; display: inline-flex; align-items: center; gap: 4px; background: var(--ink); color: #fff; font: 600 12px/1 Inter, sans-serif; padding: 7px 10px 7px 8px; border-radius: 999px; box-shadow: var(--sh-md); }
.cm-click svg { width: 14px; height: 14px; fill: #fff; }
.viz-lines { width: 100%; height: 240px; }
.viz-lines path { fill: none; stroke: var(--blue-soft); stroke-width: 2; stroke-dasharray: 6 7; vector-effect: non-scaling-stroke; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -26; } }
.net-grid { display: grid; grid-template-columns: repeat(3, 56px); gap: 18px; }

section { scroll-margin-top: 64px; }

/* the app itself */
.inside h2 { font-size: clamp(32px, 4vw, 48px); }
.frame { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--sh-xl); }
.frame img { display: block; width: 100%; height: auto; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.frame-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 40px auto 0; align-items: start; }
.frame figcaption { padding: 12px 16px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }

/* how it works */
.split-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; max-width: 1100px; margin: 0 auto; }
.split-row h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; }
.row-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.split-row .row-btns { margin-top: 28px; }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.steps li { background: var(--bg); border-radius: 12px; padding: 16px; }
.steps svg { width: 36px; height: 36px; padding: 8px; background: #fff; margin-bottom: 10px; display: block; }
.steps b { display: block; font: 600 18px/1.2 Outfit, sans-serif; }
.steps span { color: var(--muted); font-size: 14px; }
.av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; }
.phone-img { height: 150px; border-radius: 14px; background: linear-gradient(140deg, var(--blue-tint), var(--sky) 60%, var(--blue-mid)); }
.fan { position: relative; justify-self: center; width: 340px; height: 430px; }
.fan-card { position: absolute; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh-xl); overflow: hidden; }
.fan-card.f3 { top: 0; left: 40px; transform: rotate(3deg); }
.fan-card.f2 { top: 46px; left: 20px; transform: rotate(1.5deg); }
.fan-card.f1 { top: 92px; left: 0; }
.fan-net { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--line); }
.fan-net small { margin-left: auto; font-size: 12px; font-weight: 600; color: #007A31; }
.fan-body { display: flex; gap: 10px; padding: 14px 16px 0; }
.fan-body .av { flex-shrink: 0; width: 32px; height: 32px; font-size: 13px; }
.fan-body p { margin: 0; font-size: 14px; }
.fan-card .phone-img { height: 120px; margin: 12px 16px 16px; }
.fan-cap { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: var(--soft); font-size: 13px; margin: 0; }

/* what it does */
.does { background: var(--bg); }
.does > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.does h2 { font-size: clamp(32px, 4vw, 48px); }
.does-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.does-grid article { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 14px 20px; box-shadow: var(--sh-md); }
.does-grid h3 { font-size: 19px; margin: 18px 8px 4px; }
.does-grid p { margin: 0 8px; color: var(--muted); font-size: 15px; }
.viz { height: 150px; border-radius: 12px; background: var(--bg); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; position: relative; overflow: hidden; }
.viz-fan { flex-direction: column; }
.viz-fan b { background: var(--blue); color: #fff; padding: 6px 14px; border-radius: 6px; font-size: 13px; }
.viz-fan .nets { max-width: 200px; gap: 6px; }
.viz-status { flex-direction: column; align-items: stretch; gap: 8px; }
.viz-status .s { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.viz-status em { margin-left: auto; font-style: normal; font-size: 12px; color: #007A31; }
.viz-status em::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
.viz-prev { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; }
.viz-prev > div { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.viz-prev p { margin: 8px 0 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.viz-prev i { font-style: normal; color: var(--soft); font-size: 11px; text-align: right; margin-top: 4px; }
.av.sm { width: 24px; height: 24px; font-size: 11px; }
.viz-clock { flex-direction: column; gap: 6px; }
.viz-clock b { font: 600 44px/1 Outfit, sans-serif; color: var(--blue); }
.viz-clock i { font-style: normal; color: var(--soft); font-size: 13px; }
.viz-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.viz-cal span { height: 46px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.viz-cal span.on { background: var(--blue-wash); border-color: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue); }
.viz-draft { flex-direction: column; gap: 8px; }
.viz-draft span { width: 75%; background: #fff; border: 1px dashed var(--line-2); border-radius: 6px; padding: 6px 10px; font-size: 13px; color: var(--soft); }
.viz-draft span.on { border: 1px solid var(--blue-tint); border-left: 3px solid var(--blue); color: var(--ink); font-weight: 600; background: var(--blue-wash); }

/* band */
.band { position: relative; overflow: hidden; text-align: center; color: #fff; background: linear-gradient(140deg, #2F33AA 0%, #3B40D5 55%, #6266DD 100%); }
.band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px); background-size: 24px 24px; }
.band > * { position: relative; }
.band h2 { font-size: clamp(32px, 4.4vw, 54px); color: #fff; }
.band h2 em { color: var(--blue-tint); }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 36px auto; text-align: left; }
.vs-col { border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.vs-col.before { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); }
.vs-col.after { background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgba(15,18,54,.28); }
.vs-head { margin: 0 0 4px; font: 600 13px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.vs-col.before .vs-head { color: var(--blue-tint); }
.vs-col.after .vs-head { color: var(--blue); }
.chore { display: flex; align-items: center; gap: 6px; }
.chore .ni { margin-right: 4px; }
.chore i { font-style: normal; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.88); }
.vs-col.after .chore i { background: var(--blue-wash); color: var(--blue); font-size: 13px; padding: 6px 12px; }
.vs-col.after .chore i.go { background: var(--blue); color: #fff; }
.after-nets { display: grid; grid-template-columns: repeat(5, 48px); gap: 14px; margin-top: 12px; }
.after-nets .ni { width: 48px; height: 48px; border-radius: 12px; box-shadow: none; }

/* pricing */
.cost > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.cost h2 { font-size: clamp(32px, 4vw, 48px); }
.bill-toggle { display: flex; width: max-content; margin: 28px auto 0; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.bill-toggle button { border: 0; background: none; font: 600 14px/1 Inter, sans-serif; color: var(--muted); padding: 10px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.bill-toggle button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--sh-md); }
.bill-toggle em { font-style: normal; font-size: 11px; font-weight: 700; color: #007A31; background: #E6F6EC; padding: 4px 8px; border-radius: 999px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-md); display: flex; flex-direction: column; }
.tier.featured { border-color: var(--blue); box-shadow: var(--sh-lg), 0 0 0 1px var(--blue); }
.t-name { margin: 0; font-weight: 600; color: var(--blue); }
.t-price { margin: 10px 0 4px; font: 600 52px/1 Outfit, sans-serif; letter-spacing: -0.03em; }
.t-price small { font: 500 16px Inter, sans-serif; color: var(--soft); margin-left: 6px; letter-spacing: 0; }
.t-sub { margin: 0 0 22px; color: var(--muted); font-size: 15px; flex: 1; }
.t-sub b { color: var(--ink); }
.every-plan { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.every-plan li { display: flex; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.every-plan li::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; border-radius: 50%; background: var(--blue-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233B40D5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }

/* price comparison bars: one series, ours in blue, rivals neutral */
.compare { margin-top: 56px; background: var(--bg); border-radius: var(--r-xl); padding: 28px; }
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cmp-head h3 { font-size: 22px; }
.cmp-tabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 3px; }
.cmp-tabs button { border: 0; background: none; font: 600 13px/1 Inter, sans-serif; color: var(--muted); padding: 9px 14px; border-radius: 6px; cursor: pointer; }
.cmp-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; }
.bars { display: grid; gap: 10px; margin-top: 22px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; }
.bar-name { font-size: 14px; font-weight: 500; color: var(--muted); }
.bar-track { display: flex; align-items: center; gap: 10px; }
.bar-track i { display: block; height: 26px; min-width: 4px; border-radius: 0 4px 4px 0; background: #D6D6DC; transition: width .3s; }
.bar-track b { font: 500 15px/1 Outfit, sans-serif; color: var(--muted); white-space: nowrap; }
.bar-row.us { background: #fff; border: 1px solid var(--blue-tint); border-radius: 14px; padding: 12px 14px; margin: 0 -14px 6px; box-shadow: var(--sh-lg); }
.bar-row.us .bar-name { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
.bar-row.us .bar-track i { height: 34px; background: linear-gradient(90deg, #2F33AA, #3B40D5 60%, #6266DD); }
.bar-row.us .bar-track b { font: 600 24px/1 Outfit, sans-serif; color: var(--ink); }
.best { font-style: normal; font: 700 11px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #007A31; background: #E6F6EC; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.cmp-note { margin: 18px 0 0; font-size: 12px; color: var(--soft); }

/* AI posting (coming soon) */
.ai { padding-top: 96px; padding-bottom: 96px; }
.soon-badge { display: inline-block; margin: 0 0 14px; background: var(--blue-wash); color: var(--blue); border: 1px solid var(--blue-tint); font: 600 12px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: 7px 10px; border-radius: 999px; }
.chat { justify-self: center; width: min(380px, 100%); display: grid; gap: 12px; background: var(--bg); border-radius: var(--r-xl); padding: 24px; }
.bubble { margin: 0; padding: 12px 16px; border-radius: 16px; font-size: 15px; max-width: 85%; }
.bubble.me { justify-self: end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.bubble.ai-reply { justify-self: start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; display: grid; gap: 10px; }
.bubble .nets { justify-content: flex-start; gap: 5px; }

.foot-links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.foot-links span { color: var(--soft); }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--blue); }

/* comparison pages (dev/compare.mjs) */
.vs-hero { position: relative; background: var(--ivory); text-align: center; padding: 72px 24px 64px; overflow: hidden; }
.vs-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(59,64,213,.10) 1.5px, transparent 1.5px); background-size: 28px 28px; }
.vs-hero > * { position: relative; }
.vs-hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -1.5px; font-weight: 600; max-width: 900px; margin: 0 auto; }
.vs-hero .sub { margin-left: auto; margin-right: auto; }
.vs-hero .row-btns { justify-content: center; }
.vs-body { max-width: 1000px; margin: 0 auto; }
.vs-body .compare { margin-top: 0; }
.cmp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.cmp-grid h3 { font-size: 18px; }
.cmp-grid .bars { margin-top: 12px; }
.cmp-grid .bar-row { grid-template-columns: 1fr; gap: 4px; }
.cmp-grid .bar-row.us { margin: 0 0 6px; }
.vs-table { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 15px; }
.vs-table th, .vs-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vs-table thead th { font: 600 13px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
.vs-table tbody th { font-weight: 600; width: 22%; }
.vs-table td { color: var(--muted); }
.vs-table .us { background: var(--blue-wash); color: var(--ink); font-weight: 600; }
.vs-table thead .us { color: var(--blue); border-radius: 8px 8px 0 0; }
.cmp-note a { color: var(--soft); }

/* final */
.final { text-align: center; background: var(--ivory); position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(59,64,213,.10) 1.5px, transparent 1.5px); background-size: 28px 28px; }
.final > * { position: relative; }
.final h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.05; max-width: 900px; margin: 0 auto 28px; }
.final h2 em { white-space: nowrap; }
.final-nets { margin-top: 40px; gap: 18px; }

.foot { display: flex; align-items: center; gap: 16px; padding: 28px 32px; border-top: 1px solid var(--line); }
.foot p { margin: 0 0 0 auto; color: var(--soft); font-size: 13px; }

/* sign-in dialog */
.signin-dlg { border: 0; border-radius: var(--r-xl); padding: 32px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--sh-xl); }
.signin-dlg::backdrop { background: rgba(23,23,25,.45); }
.signin-dlg h2 { font-size: 28px; }
.signin-dlg .lead { font-size: 15px; margin-bottom: 20px; }
.dlg-close { position: absolute; top: 12px; right: 12px; }
.dlg-close button { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--soft); cursor: pointer; }
.signin { display: grid; gap: 10px; }
.signin label { font-weight: 600; font-size: 14px; }
.signin input { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); font: inherit; }
.signin input:focus { outline: 3px solid var(--blue-wash); border-color: var(--blue); }
.or { display: flex; align-items: center; gap: 12px; color: var(--soft); font-size: 13px; margin: 18px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg { min-height: 1.2em; margin: 4px 0 0; font-size: 14px; color: var(--muted); }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-copy { justify-self: center; }
  .sub { margin-left: auto; margin-right: auto; }
  .hero .row-btns { justify-content: center; }
  .feats { text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }
  .hero-viz { justify-self: center; }
}
@media (max-width: 700px) {
  section { padding: 64px 16px; }
  .nav { padding: 10px 16px; }
  .nav-links { display: none; }
  .nav .btn.ghost { margin-left: auto; }
  .hero { padding: 40px 16px 48px; gap: 36px; }
  .hero h1 { letter-spacing: -1.5px; }
  .feats { grid-template-columns: 1fr; }
  .hero-viz { grid-template-columns: 1fr; justify-items: center; gap: 22px; width: 100%; }
  .composer { width: min(300px, 100%); }
  .viz-lines { display: none; }
  .net-grid { grid-template-columns: repeat(5, 48px); gap: 12px; justify-content: center; }
  .net-grid .ni { width: 48px; height: 48px; border-radius: 12px; }
  .split-row { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; }
  .fan { width: 300px; height: 410px; }
  .fan-card { width: 270px; }
  .does-grid, .frame-pair, .vs, .tiers { grid-template-columns: 1fr; }
  .compare { padding: 20px 16px; }
  .bar-row { grid-template-columns: 96px 1fr; gap: 10px; }
  .ai { padding-top: 64px; padding-bottom: 64px; }
  .cmp-grid { grid-template-columns: 1fr; gap: 20px; }
  .vs-table th, .vs-table td { padding: 12px 8px; font-size: 14px; }
  .foot-links { flex-wrap: wrap; }
  .chore { flex-wrap: wrap; }
  .after-nets { grid-template-columns: repeat(5, 44px); gap: 10px; }
  .after-nets .ni { width: 44px; height: 44px; }
  .final-nets { gap: 12px; }
  .final-nets .ni { width: 44px; height: 44px; border-radius: 11px; }
  .foot { flex-wrap: wrap; padding: 24px 16px; }
  .foot p { margin: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .viz-lines path { animation: none; }
}

/* privacy + terms */
.legal { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.legal h1 { font-size: clamp(36px, 5vw, 52px); }
.legal h2 { font-size: 22px; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 16px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal li b { color: var(--ink); }
.legal .updated { color: var(--soft); font-size: 14px; margin-top: 10px; }