/* TownStakes marketing site — shared styles. Light theme only. */
:root {
  --navy: #3c3b6e;
  --navy-deep: #2b2a55;
  --red: #b22234;
  --red-deep: #8f1a29;
  --ink: #1a2340;
  --muted: #4a5270;
  --bg: #f4f6fb;
  --white: #ffffff;
  --line: #dfe3ee;
  --tint-blue: #e9ebf6;
  --tint-red: #fbecee;
  --green: #1f7a4a;
  --amber: #b26a00;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(26,35,64,.06), 0 8px 24px rgba(26,35,64,.08);
  --wrap: 1140px;
  --head: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--head);
  font-stretch: 85%;
  line-height: 1.12;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.35rem; font-weight: 700; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.15rem, 2.2vw, 1.35rem); color: var(--muted); max-width: 40em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section.alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 46em; margin-bottom: 40px; }
.eyebrow {
  display: inline-block;
  font-family: var(--head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

/* Flag stripe accent */
.stripe {
  height: 8px;
  background:linear-gradient(90deg, var(--navy) 0 30%, var(--red) 30% 50%, var(--white) 50% 60%, var(--red) 60% 80%, var(--white) 80% 90%, var(--red) 90% 100%);
}

/* Header */
.site-head { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--head); font-weight: 800; font-size: 1.5rem; font-stretch: 85%; }
.brand svg { width: 34px; height: 34px; }
.brand span b { color: var(--red); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 600; padding: 10px 12px; border-radius: 10px; font-size: 1rem; }
.nav a:hover { background: var(--tint-blue); color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--red); border-radius: 0; }
.nav .btn { margin-left: 6px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 26px;
  font-family: var(--body); font-weight: 700; font-size: 1.05rem;
  border-radius: 12px; text-decoration: none; border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-deep); color: var(--white); }
.btn-ghost { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.nav .btn { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.nav a.btn-red, .nav a.btn-red:hover { color: var(--white); }
.nav a.btn-red:hover { background: var(--red-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Hero */
.hero { padding: 64px 0 72px; background:
  radial-gradient(1200px 400px at 85% -10%, rgba(60,59,110,.10), transparent 60%),
  radial-gradient(800px 300px at -10% 110%, rgba(178,34,52,.07), transparent 60%),
  var(--bg); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-grid > * { min-width: 0; } /* a wide or broken image can never squeeze the headline */
.hero h1 span { color: var(--red); }
.hero .note { font-size: 1rem; color: var(--muted); margin-top: 14px; }
.mock { background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 12px; }
.mock svg { width: 100%; border-radius: 12px; }

/* Real app screenshots in a light tablet frame */
.device {
  margin: 0;
  background: linear-gradient(180deg, #ffffff, #eef1f8);
  border: 1px solid #d3d9e8;
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 2px 4px rgba(26,35,64,.06), 0 24px 48px -12px rgba(26,35,64,.22);
}
.device img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #e9edf5; }
.device.crop img { aspect-ratio: var(--ar, 4 / 3); object-fit: cover; object-position: var(--pos, top); }
.device figcaption, .shot-cap { font-size: .95rem; color: var(--muted); padding: 12px 6px 2px; line-height: 1.45; }
.device figcaption b { color: var(--ink); }
/* Hero: the real app on a laptop, an iPad and an iPhone. Everything is sized in cqw
   (percent of the group's width) so the three devices scale together at any screen size. */
.devices { position: relative; margin: 0; container-type: inline-size; }
.devices-stage { position: relative; aspect-ratio: 100 / 68; }
.devices img { display: block; width: 100%; height: auto; background: #e9edf5; }
.devices figcaption { font-size: .95rem; color: var(--muted); line-height: 1.45; margin-top: 14px; }
.devices figcaption b { color: var(--ink); }
/* Laptop */
.laptop { position: absolute; left: 8%; top: 0; width: 84%; filter: drop-shadow(0 2.2cqw 2.6cqw rgba(26,35,64,.28)); }
.lt-screen { position: relative; background: #0b0c0f; padding: 1.9cqw 1.9cqw 2.3cqw; border-radius: 1.8cqw 1.8cqw .5cqw .5cqw; box-shadow: inset 0 0 0 .18cqw #3a3e46; }
.lt-screen img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: .25cqw; }
.cam { position: absolute; top: .75cqw; left: 50%; width: .55cqw; height: .55cqw; margin-left: -.27cqw; border-radius: 50%; background: #262a31; box-shadow: inset 0 0 0 .12cqw #3d434d; }
.lt-base { position: relative; margin: 0 -7.5%; height: 2.7cqw; background: linear-gradient(180deg, #eef0f3 0%, #cfd3d9 45%, #a5aab3 100%); border-radius: .3cqw .3cqw 2.4cqw 2.4cqw / .3cqw .3cqw 1.6cqw 1.6cqw; }
.lt-base .notch { position: absolute; top: 0; left: 50%; width: 15%; height: 1cqw; margin-left: -7.5%; background: linear-gradient(180deg, #b4b9c1, #d6d9de); border-radius: 0 0 1cqw 1cqw; }
/* iPad (landscape): thin black bezel inside a silver edge */
.tablet { position: absolute; left: 0; bottom: 3%; width: 41%; background: #0b0c0f; padding: 1.5cqw; border-radius: 2.6cqw; box-shadow: 0 0 0 .3cqw #c9cdd4, 0 0 0 .45cqw #9aa0a9, 0 2.4cqw 3.4cqw -1cqw rgba(26,35,64,.42); }
.tablet img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: .9cqw; }
.tablet .cam { top: .48cqw; width: .45cqw; height: .45cqw; margin-left: -.22cqw; }
/* iPhone: thin bezel, metal edge, side buttons, status bar with the Dynamic Island */
.iphone { position: absolute; right: 3%; bottom: 0; width: 18.5%; background: #0b0c0f; padding: .8cqw; border-radius: 3.8cqw; box-shadow: 0 0 0 .3cqw #b2b7bf, 0 0 0 .45cqw #80868f, 0 2.6cqw 3.6cqw -1cqw rgba(26,35,64,.48); }
.iphone::before, .iphone::after { content: ""; position: absolute; width: .45cqw; border-radius: .3cqw; background: #8a9099; }
.iphone::before { right: -.85cqw; top: 26%; height: 7%; }
.iphone::after { left: -.85cqw; top: 20%; height: 11%; box-shadow: 0 -4.2cqw 0 -.05cqw #8a9099; }
.iph-screen { position: relative; overflow: hidden; border-radius: 3cqw; background: #fff; }
.status { position: relative; height: 4.4cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 1.9cqw 0 2.3cqw; font: 700 1.3cqw/1 var(--body); color: #0b0c0f; }
.island { position: absolute; left: 50%; top: .9cqw; width: 5.6cqw; height: 1.65cqw; margin-left: -2.8cqw; border-radius: 1cqw; background: #000; }
.sb { display: flex; align-items: center; gap: .45cqw; }
.bars { display: flex; align-items: flex-end; gap: .15cqw; height: .95cqw; }
.bars b { display: block; width: .26cqw; background: #0b0c0f; border-radius: .1cqw; }
.bars b:nth-child(1) { height: 35%; } .bars b:nth-child(2) { height: 55%; } .bars b:nth-child(3) { height: 78%; } .bars b:nth-child(4) { height: 100%; }
.batt { position: relative; width: 1.9cqw; height: .95cqw; border: .13cqw solid #0b0c0f; border-radius: .3cqw; }
.batt::before { content: ""; position: absolute; inset: .12cqw; right: .4cqw; background: #0b0c0f; border-radius: .12cqw; }
.batt::after { content: ""; position: absolute; right: -.3cqw; top: 30%; width: .16cqw; height: 40%; background: #0b0c0f; border-radius: 0 .1cqw .1cqw 0; }
.shots { display: grid; gap: 20px; }
/* Rounded box rather than a pill, so it still looks right when it wraps to several lines on a phone */
.real-note { display: inline-flex; align-items: flex-start; gap: 10px; font-size: .95rem; line-height: 1.45; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; margin-top: 18px; }
.real-note::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--green); }

/* Showcase rows (home) */
.showcase { display: grid; gap: 28px; align-items: center; padding: 28px 0; }
.showcase + .showcase { border-top: 1px solid var(--line); }
.showcase h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.showcase p { color: var(--muted); }
.showcase .stat { display: inline-block; font-family: var(--head); font-stretch: 85%; font-weight: 800; color: var(--red); font-size: 1.1rem; margin-bottom: 6px; letter-spacing: .02em; }

/* Cards and grids */
.grid { display: grid; gap: 20px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--tint-blue); }
.icon.red { background: var(--tint-red); }
.icon svg { width: 28px; height: 28px; }

.diff { border-top: 5px solid var(--navy); }
.diff:nth-child(2) { border-top-color: var(--red); }

/* Feature list (home) */
.feature-list { display: grid; gap: 14px 32px; list-style: none; padding: 0; margin: 0; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.feature-list li strong { display: block; font-size: 1.08rem; }
.feature-list li span { color: var(--muted); }
.check { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; margin-top: 2px; }
.check svg { width: 16px; height: 16px; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 20px; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding: 26px 26px 26px 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.steps li::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 50%; background: var(--red); color: var(--white);
  font-family: var(--head); font-weight: 800; font-size: 1.5rem;
}
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; color: var(--muted); }

/* FAQ */
.faq { max-width: 52em; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 700; font-size: 1.1rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--red); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 22px 20px; color: var(--muted); }
.faq details > div p:last-child { margin: 0; }

/* CTA band */
.cta { background: var(--navy); color: var(--white); padding: 64px 0; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: repeating-linear-gradient(90deg, var(--red) 0 40px, var(--white) 40px 80px); }
.cta h2 { color: var(--white); }
.cta p { color: #dfe1f3; font-size: 1.15rem; max-width: 38em; }
.cta .btn-ghost { background: transparent; color: var(--white); border-color: var(--white); }
.cta .btn-ghost:hover { background: var(--white); color: var(--navy); }

/* Feature page sections */
.page-head { padding: 56px 0 24px; }
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 10px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--navy); }
.toc a:hover { border-color: var(--navy); }
.fgroup { padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.fgroup-grid { display: grid; gap: 32px; align-items: start; }
.fgroup .mock { position: relative; }
.fitems { display: grid; gap: 18px; }
.fitem { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--navy); border-radius: 12px; padding: 20px 22px; }
.fitem:nth-child(even) { border-left-color: var(--red); }
.fitem h3 { font-size: 1.2rem; margin-bottom: .3em; }
.fitem p { margin: 0; color: var(--muted); }
.tag { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--tint-blue); color: var(--navy); vertical-align: middle; margin-left: 6px; }
.tag.soon { background: #fff3dc; color: #7a4a00; }
.tag.draft { background: var(--tint-red); color: var(--red-deep); }

/* Pricing */
.draft-banner { background: #fff3dc; border: 2px dashed #d99a2b; color: #5c3800; border-radius: 12px; padding: 16px 20px; font-weight: 600; margin-bottom: 32px; }
.tiers { display: grid; gap: 22px; align-items: stretch; }
.tier { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px; box-shadow: var(--shadow); position: relative; }
.tier.featured { border: 3px solid var(--navy); }
.tier .badge { position: absolute; top: -14px; left: 26px; background: var(--red); color: var(--white); font-weight: 700; font-size: .85rem; padding: 4px 12px; border-radius: 999px; }
.tier h3 { font-size: 1.5rem; margin-bottom: .2em; }
.tier .who { color: var(--muted); margin-bottom: 18px; }
.price { font-family: var(--head); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--navy); font-stretch: 85%; }
.price small { font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--muted); }
.tier ul { list-style: none; padding: 0; margin: 22px 0 26px; flex: 1; }
.tier li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px solid var(--line); }
.tier li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 7px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); }
.tier .btn { width: 100%; text-align: center; }
.tier-foot { font-size: .95rem; color: var(--muted); margin: 14px 0 0; line-height: 1.45; }
.tier h3 { font-size: 1.4rem; }
.coverage { display: inline-block; font-size: .95rem; font-weight: 600; color: var(--navy); background: var(--tint-blue); border-radius: 8px; padding: 6px 12px; }
.limit-note { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--red); border-radius: 12px; padding: 16px 20px; margin-bottom: 36px; }
.later-note { margin-top: 36px; background: var(--white); border: 2px dashed #c9d0e2; border-radius: 16px; padding: 20px 24px; }
.later-note p { margin: 0; color: var(--muted); }
.later-note b { color: var(--ink); }
.value-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.value-points li { position: relative; padding: 14px 18px 14px 50px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.value-points li::before { content: ""; position: absolute; left: 18px; top: 50%; width: 18px; height: 10px; margin-top: -7px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); }
@media (min-width: 900px) { .value-points { grid-template-columns: repeat(3, 1fr); } }
.plan-pick { margin: 24px 0 0; background: var(--tint-blue); border-radius: 12px; padding: 14px 18px; }
.addon { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-top: 28px; background: var(--white); border: 2px dashed #c9d0e2; border-radius: 16px; padding: 22px 26px; }
.addon h3 { margin-bottom: .2em; }
.addon p { margin: 0; color: var(--muted); }

/* Party / Coalition: its own band, apart from the single-candidate plans */
.multi-plan { margin-top: 40px; display: grid; gap: 18px 32px; align-items: center; background: var(--white); border: 1px solid var(--line); border-top: 5px solid var(--navy); border-radius: 18px; padding: 28px 26px; box-shadow: var(--shadow); scroll-margin-top: 90px; }
.multi-plan h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: .25em; }
.multi-plan ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px 24px; }
.multi-plan li { padding-left: 26px; position: relative; }
.multi-plan li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 12px; height: 7px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); }
.multi-plan .side { text-align: left; }
@media (min-width: 820px) { .multi-plan { grid-template-columns: 1.6fr 1fr; } .multi-plan ul { grid-template-columns: 1fr 1fr; } }

/* Home: pitch hook, data block, pricing preview */
.lead-hook { display: block; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.trust-list li { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--navy); border-radius: 12px; padding: 16px 20px; color: var(--muted); }
.trust-list li:nth-child(even) { border-left-color: var(--red); }
.trust-list b { display: block; color: var(--ink); }
@media (min-width: 720px) { .trust-list { grid-template-columns: 1fr 1fr; } }
.mini-tiers { display: grid; gap: 14px; }
.mini-tier { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.mini-tier b { color: var(--ink); font-size: 1.15rem; }
.mini-tier .mini-price { font-family: var(--head); font-stretch: 85%; font-weight: 800; font-size: 2.2rem; color: var(--navy); line-height: 1.1; }
.mini-tier.featured { border: 3px solid var(--navy); background: var(--white); }
.mini-tier:hover { border-color: var(--red); color: var(--muted); }
@media (min-width: 720px) { .mini-tiers { grid-template-columns: repeat(3, 1fr); } }
.multi-note { margin: 18px 0 0; color: var(--muted); }
.swipe-hint { display: none; margin: 0 0 10px; font-size: .95rem; font-weight: 600; color: var(--navy); }
@media (max-width: 700px) { .swipe-hint { display: block; } }

/* Plan comparison table: scrolls sideways inside its own box on phones */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 1rem; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.compare thead th { font-family: var(--head); font-stretch: 85%; font-weight: 800; font-size: 1.1rem; color: var(--ink); background: var(--tint-blue); line-height: 1.2; }
.compare thead th span { font-family: var(--body); font-size: .9rem; font-weight: 600; color: var(--muted); }
.compare tbody th[scope="row"] { text-align: left; font-weight: 600; }
.compare th:first-child { position: sticky; left: 0; background: var(--white); z-index: 1; text-align: left; min-width: 200px; box-shadow: 1px 0 0 var(--line); }
.compare thead th:first-child { background: var(--tint-blue); }
.compare tr.group th { text-align: left; background: var(--bg); font-family: var(--head); font-stretch: 85%; font-weight: 800; color: var(--red); letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.compare td.y { color: var(--green); font-weight: 700; }
.compare td.n { color: #8a91a5; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* Contact */
.contact-grid { display: grid; gap: 22px; }
.mail-box { font-size: 1.15rem; }
.placeholder { background: var(--tint-red); color: var(--red-deep); padding: 2px 8px; border-radius: 6px; font-weight: 700; }

/* Legal pages (privacy, terms) */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(1.4rem, 3.4vw, 1.8rem); margin: 44px 0 12px; scroll-margin-top: 90px; }
.legal h2:first-of-type { margin-top: 28px; }
.legal ul { padding-left: 1.3em; margin: 0 0 1em; }
.legal li { margin-bottom: .5em; }
.legal .meta { color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.draft-note { display: block; width: fit-content; max-width: 100%; background: #fff3dc; border: 2px dashed #d99a2b; color: #5c3800; border-radius: 10px; padding: 10px 16px; font-weight: 700; margin-bottom: 22px; }
.legal-toc { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
.legal-toc ol { margin: 8px 0 0; padding-left: 1.4em; columns: 2 220px; column-gap: 28px; }
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }

/* Footer */
.site-foot { background: var(--white); border-top: 1px solid var(--line); padding: 40px 0 28px; font-size: 1rem; color: var(--muted); }
.foot-grid { display: grid; gap: 24px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot a { color: var(--ink); font-weight: 600; text-decoration: none; }
.site-foot a:hover { color: var(--red); }
.fine { font-size: .92rem; margin-top: 20px; }
.credit { font-size: .92rem; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.site-foot .credit a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* Tablet (iPad portrait and up) */
@media (min-width: 720px) {
  .wrap { padding: 0 32px; }
  .section { padding: 88px 0; }
  .grid-3, .steps { grid-template-columns: repeat(3, 1fr); }
  .grid-2, .feature-list, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
@media (min-width: 720px) and (max-width: 979px) {
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
/* Desktop / iPad landscape */
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: .9fr 1.1fr; }
  .fgroup-grid { grid-template-columns: 1fr 1.1fr; }
  .fgroup-grid.flip > .mock, .fgroup-grid.flip > .shots { order: 2; }
  .fgroup .mock, .fgroup .shots { position: sticky; top: 110px; }
  .showcase { grid-template-columns: 1.25fr 1fr; gap: 48px; padding: 40px 0; }
  .showcase.flip > .device { order: 2; }
  .showcase.flip { grid-template-columns: 1fr 1.25fr; }
}
@media (min-width: 1100px) {
  .tiers { grid-template-columns: repeat(3, 1fr); }
}
/* Small phones */
@media (max-width: 480px) {
  /* Compact header that stays on screen: logo + Start free on row 1, page links on row 2 */
  .site-head .wrap { padding-top: 8px; padding-bottom: 6px; gap: 2px 8px; }
  .brand { font-size: 1.3rem; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .nav { display: contents; }
  .nav .btn { order: 1; margin-left: auto; min-height: 40px; padding: 6px 14px; font-size: .95rem; }
  .site-head .wrap::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .nav a:not(.btn) { order: 3; padding: 6px 4px; font-size: .95rem; }
  .nav a:not(.btn) + a:not(.btn) { margin-left: 14px; }
  .btn-row .btn { width: 100%; }
  .card, .steps li { padding: 22px; }
}

/* SaaS visual refresh — November 2026 */
:root{--ink:#14243a;--navy:#193757;--navy-deep:#102a46;--muted:#637083;--bg:#fff;--line:#e3e8ef;--red:#bb3043;--red-deep:#a32537;--wrap:1200px;--head:"Public Sans",system-ui,sans-serif}
body{font-size:16px;background:#fff}h1,h2,h3{font-stretch:normal;letter-spacing:-.045em}h1{font-size:clamp(2.6rem,5.3vw,4.5rem);line-height:1.09}h2{font-size:clamp(1.9rem,3.1vw,2.8rem);line-height:1.18}h3{letter-spacing:-.025em;line-height:1.3}p{line-height:1.75}.stripe{height:3px;background:#193757}.site-head{background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}.site-head .wrap{padding-top:15px;padding-bottom:15px}.brand{font-size:1.45rem;letter-spacing:-.06em}.brand img{width:30px;height:30px}.nav{gap:12px}.nav a{font-size:.86rem;font-weight:600}.btn{border-radius:8px;font-size:.9rem;min-height:49px;border-width:1px;box-shadow:none}.btn-red{box-shadow:0 3px 6px #14243a12}.btn-ghost{border-color:#d5dce5;color:var(--ink)}.eyebrow{font-family:var(--body);font-size:.69rem;letter-spacing:.14em;color:var(--red)}.section{padding:100px 0}.section.alt{background:#f7f9fc}.section-head{max-width:680px}.section-head .lead{font-size:1.04rem;line-height:1.75}.card{box-shadow:none;border:1px solid var(--line);padding:32px;border-radius:14px;background:#fff}.card p{font-size:.94rem}.icon{border-radius:10px}.saas-hero{padding:70px 0 0;background:radial-gradient(ellipse at 50% 55%,#e9f0f9 0,transparent 60%),linear-gradient(#fff,#f4f7fb);overflow:hidden}.hero-copy{text-align:center;max-width:950px;margin:0 auto 44px}.product-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #dae3ee;background:#f8fafc;border-radius:30px;padding:7px 13px;font-size:10px;font-weight:700;letter-spacing:.11em;color:#415773;margin-bottom:23px}.product-pill span{height:6px;width:6px;border-radius:50%;background:#bb3043}.hero-copy h1{margin-bottom:21px}.hero-copy h1 span{color:var(--red)}.hero-copy .lead{font-size:1.08rem;max-width:730px;margin:0 auto 25px;line-height:1.75;font-weight:400}.hero-copy .btn-row{justify-content:center;gap:12px}.hero-copy .btn span{margin-left:12px}.hero-reassurance{font-size:11px;color:#738096;margin:16px 0 0}.hero-reassurance span{padding:0 10px;color:#acb7c5}.product-window{position:relative;margin:0 auto;width:88%;border:1px solid #d2dce8;border-radius:13px 13px 0 0;background:#fff;box-shadow:0 20px 80px #1937571c;overflow:hidden;height:490px}.window-bar{height:43px;border-bottom:1px solid #e3e8ef;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#fff;color:#7b8796;font-size:10px}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;background:#d6dee8;border-radius:50%}.preview-label{font-size:8px;letter-spacing:.12em}.product-window>img{width:100%;height:auto;display:block}.product-window figcaption{position:absolute;bottom:16px;right:16px;background:#ffffffed;border:1px solid #dde3eb;padding:7px 10px;border-radius:5px;font-size:8px;letter-spacing:.1em;color:#4c6079}.platform-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;font-size:11px;color:#7b8796}.platform-strip b{font-weight:600;color:#53647a}.showcase{gap:65px;margin-bottom:86px;align-items:center}.showcase h3{font-size:1.9rem;line-height:1.22}.showcase p{font-size:.95rem}.showcase .device{border-radius:13px;border:1px solid #dce3ec;box-shadow:0 14px 40px #1937570c;overflow:hidden;background:#f3f6fa;padding:10px}.stat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700}.coverage{font-size:12px!important;border-left:2px solid #d8e1ed;padding-left:14px}.later-note{background:#f5f8fc;border:1px solid var(--line);border-radius:12px}.steps{gap:28px}.steps li{background:#f8fafc;border:1px solid var(--line);border-radius:12px}.trust-list{font-size:.94rem}.mini-tiers{gap:20px}.mini-tier{background:white;border-radius:13px;padding:32px;min-height:220px;border:1px solid #dce3ec;box-shadow:none;text-decoration:none;transition:transform .18s,box-shadow .18s}.mini-tier:hover{transform:translateY(-4px);box-shadow:0 12px 28px #14243a0d}.mini-tier.featured{border:2px solid var(--navy);background:#fff}.mini-tier b{font-size:18px}.mini-price{font-size:44px;letter-spacing:-.05em;color:var(--ink)}.tier-label{font-size:9px;letter-spacing:.13em;font-weight:700;color:var(--red)}.mini-tier>span:last-child{font-size:13px;color:var(--muted)}.multi-note{font-size:13px;margin-top:24px}.faq{max-width:850px}.faq details{border-radius:0;box-shadow:none;border:0;border-bottom:1px solid var(--line);background:white;padding:22px 0}.faq summary{font-size:1rem}.faq p{font-size:.94rem}.cta{background:#142f4c;padding:76px 0;text-align:center}.cta h2{color:white}.cta p{color:#bdcad9;max-width:660px;margin:0 auto 25px;font-size:15px}.cta .btn-row{justify-content:center}.cta .btn-ghost{background:transparent;color:white;border-color:#61768e}.site-foot{background:#fff;border-top:1px solid var(--line);padding:55px 0 25px;color:var(--muted);font-size:12px}.site-foot nav a{font-size:12px}.fine,.credit{font-size:10px}.section,.cta{scroll-margin-top:90px}
@media(min-width:900px){#why .section-head,#see-it>.wrap>.section-head,#how .section-head,#price-preview .section-head{margin-left:auto;margin-right:auto;text-align:center}#why .card{padding:30px}#data{background:#f8fafc}#data .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:25px 80px}#data .section-head{margin:0}#data .trust-list{margin:0}#data .wrap>p{grid-column:2}}
@media(max-width:760px){.site-head .wrap{gap:8px;padding-top:12px;padding-bottom:12px}.nav{gap:0}.nav a{padding:8px;font-size:12px}.nav a[href="contact.html"],.nav a[href="https://signroute-field.pages.dev/"]:not(.btn){display:none}.nav .btn{padding:8px 12px;min-height:36px;font-size:12px}.brand{font-size:20px}.brand img{width:25px;height:25px}.saas-hero{padding-top:44px}.hero-copy h1{font-size:clamp(2.2rem,7.7vw,3.5rem)}.hero-copy .lead{font-size:15px}.desktop-break{display:none}.hero-reassurance{font-size:10px}.hero-reassurance span{padding:0 4px}.hero-copy .btn-row{flex-direction:column;align-items:stretch;max-width:310px;margin:auto}.product-window{width:100%;height:285px}.window-bar{font-size:8px;padding:0 10px}.preview-label{display:none}.platform-strip{flex-wrap:wrap;justify-content:center;gap:10px 20px;padding:23px 0}.platform-strip>span{flex-basis:100%;text-align:center}.section{padding:62px 0}.showcase{gap:24px;margin-bottom:55px}.showcase h3{font-size:1.6rem}.showcase .device{padding:5px}.mini-tier{min-height:180px}.cta{padding:58px 0}.product-window figcaption{font-size:7px}.hero-copy{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Responsive desktop, iPad and iPhone product family */
.device-family{position:relative;max-width:1160px;margin:0 auto;padding:0 85px 86px 0;isolation:isolate}
.device-family .product-window{width:95%;height:465px;margin:0 0 0 auto;border-radius:13px;box-shadow:0 22px 60px #19375724}
.saas-ipad{position:absolute;z-index:2;left:0;bottom:18px;margin:0;width:48%;aspect-ratio:1.3;border:11px solid #18202c;border-radius:23px;background:#18202c;box-shadow:0 18px 45px #102a4630;overflow:hidden}
.saas-ipad img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.saas-iphone{position:absolute;z-index:3;right:12px;bottom:0;margin:0;width:19%;aspect-ratio:780/1688;border:7px solid #18202c;border-radius:32px;background:#18202c;box-shadow:0 20px 50px #102a4638;overflow:hidden;outline:1px solid #617084}
.saas-iphone img{width:100%;height:100%;object-fit:cover;border-radius:24px}
.phone-island{position:absolute;top:7px;left:33%;width:34%;height:12px;border-radius:20px;background:#111820;z-index:2}
@media(min-width:761px) and (max-width:1000px){.device-family{padding-right:60px;padding-bottom:65px}.device-family .product-window{height:380px}.saas-ipad{border-width:8px}.saas-iphone{right:0;border-radius:25px;border-width:5px}}
@media(max-width:760px){.device-family{padding:0;max-width:290px}.device-family .product-window,.saas-ipad{display:none}.saas-iphone{position:relative;width:100%;max-width:235px;margin:0 auto;right:auto;bottom:auto;border-radius:34px;border-width:7px}.saas-iphone img{border-radius:25px}.phone-island{height:13px}.platform-strip{margin-top:12px}}

/* Blended hero: specific message beside a complete product preview. */
.blended-hero{padding:72px 0 0}
.blended-hero>.wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px 38px;align-items:center}
.blended-hero .hero-copy{text-align:left;margin:0;max-width:none;padding-bottom:32px}
.blended-hero .product-pill{font-size:9px;letter-spacing:.09em;padding:7px 10px;margin-bottom:21px}
.blended-hero h1{font-size:clamp(2.5rem,3.75vw,3.35rem);line-height:1.14;letter-spacing:-.045em;margin-bottom:24px}
.blended-hero h1 span{display:inline}
.blended-hero .lead{font-size:16px;line-height:1.8;margin:0 0 26px;max-width:490px}
.blended-hero .btn-row{justify-content:flex-start;gap:10px;flex-wrap:wrap}
.blended-hero .btn{padding:12px 17px;font-size:12px}
.blended-hero .btn span{margin-left:6px}
.blended-hero .hero-reassurance{font-size:11px;line-height:1.8;margin-top:15px}
.blended-hero .hero-reassurance b{font-weight:600;color:#53647a}
.blended-hero .device-family{width:100%;padding:0 28px 95px 26px;margin:0;min-width:0}
.blended-hero .product-window{width:100%;height:auto;aspect-ratio:1.53;margin:0;border-radius:11px;border:7px solid #202a38;background:#202a38;overflow:visible;box-shadow:0 20px 45px #19375720}
.blended-hero .product-window>img{border-radius:3px;width:100%;height:100%;object-fit:cover;object-position:top}
.blended-hero .window-bar{display:none}
.blended-hero .product-window:after{content:"";position:absolute;bottom:-14px;height:9px;left:-5%;width:110%;background:linear-gradient(#c9d0d9,#8795a6);border-radius:2px 2px 9px 9px}
.blended-hero .product-window figcaption{bottom:-87px;left:35%;right:auto;white-space:nowrap;background:transparent;border:0;padding:0;font-size:7px;letter-spacing:.06em;color:#6b7c91}
.blended-hero .saas-ipad{width:43%;left:0;bottom:19px;border-width:7px;border-radius:15px;box-shadow:0 12px 25px #102a4626}
.blended-hero .saas-ipad img{border-radius:7px}
.blended-hero .saas-iphone{width:21%;right:0;bottom:27px;border-width:5px;border-radius:22px;box-shadow:0 12px 25px #102a4626}
.blended-hero .saas-iphone img{border-radius:16px}
.blended-hero .phone-island{top:4px;height:8px}
.blended-hero .platform-strip{grid-column:1/-1;padding:24px 0;margin-top:14px;border-top:1px solid #dfe6ef}
@media(min-width:761px) and (max-width:1050px){.blended-hero>.wrap{gap:22px}.blended-hero h1{font-size:36px}.blended-hero .lead{font-size:14px}.blended-hero .product-pill{font-size:8px}.blended-hero .device-family{padding-right:18px;padding-left:15px;padding-bottom:80px}.blended-hero .product-window figcaption{font-size:6px;bottom:-74px}.blended-hero .saas-iphone{border-radius:18px}}
@media(max-width:760px){.blended-hero{padding-top:39px}.blended-hero>.wrap{grid-template-columns:1fr;gap:28px}.blended-hero .hero-copy{text-align:center;padding:0}.blended-hero h1{font-size:clamp(2.15rem,8vw,3rem);max-width:540px;margin-left:auto;margin-right:auto}.blended-hero .lead{font-size:15px;margin-left:auto;margin-right:auto}.blended-hero .btn-row{justify-content:center}.blended-hero .product-pill{font-size:8px}.blended-hero .device-family{max-width:560px;padding:0 25px 85px 20px;margin:0 auto}.blended-hero .product-window,.blended-hero .saas-ipad{display:block}.blended-hero .saas-iphone{position:absolute;width:21%;margin:0;right:0;bottom:27px;border-width:4px;border-radius:18px}.blended-hero .saas-iphone img{border-radius:13px}.blended-hero .saas-ipad{border-width:5px;border-radius:12px}.blended-hero .product-window{border-width:5px}.blended-hero .product-window figcaption{font-size:6px;bottom:-76px;left:36%}.blended-hero .platform-strip{margin:0;font-size:10px}.blended-hero .phone-island{height:6px;width:30%;left:35%;top:3px}}