/* no_touch_face landing site
   Goals: high readability, fast (no framework), feels honest and a little bit
   nerdy — not slick agency-design. The audience trusts privacy claims more
   from a site that looks like it was made by an engineer than from one that
   looks like an ad. */

:root {
  --bg: #fafaf7;
  --fg: #1a1a1a;
  --muted: #555;
  --accent: #0a6e3f;
  --accent-fg: #fff;
  --border: #e2e2dc;
  --warning: #b34d00;
  --max: 720px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}

.site-header .brand { font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-decoration: none; color: var(--fg); }
.site-header nav a { margin-left: 18px; font-size: 15px; }

main { max-width: var(--max); margin: 0 auto; padding: 32px 24px 80px; }

.hero h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 16px; }
.hero .subhead { font-size: 1.15rem; color: var(--fg); margin-top: 0; }
.hero .pain { color: var(--muted); border-left: 3px solid var(--border); padding-left: 14px; margin: 24px 0; }
.hero .trust { font-size: 0.9rem; color: var(--muted); margin-top: 12px; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 8px; }
.cta {
  display: inline-block; padding: 12px 20px;
  background: var(--accent); color: var(--accent-fg);
  border-radius: 8px; text-decoration: none; font-weight: 600;
  border: 1px solid var(--accent);
}
.cta:hover { filter: brightness(1.05); }
.cta.secondary { background: var(--bg); color: var(--accent); }

section { margin: 48px 0; }
section h2 { font-size: 1.4rem; margin-bottom: 16px; }

.how ol { padding-left: 20px; }
.how li { margin-bottom: 10px; }

.testimonials .quote { margin: 16px 0; padding: 16px 20px; border: 1px solid var(--border); background: #fff; border-radius: 8px; }
.testimonials blockquote { margin: 0 0 8px; font-style: italic; }
.testimonials figcaption { font-size: 0.9rem; color: var(--muted); }

.email-capture {
  padding: 24px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff;
}
.email-capture form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.email-capture input[type=email] {
  flex: 1 1 220px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem;
}
.email-capture button {
  padding: 12px 18px; background: var(--accent); color: var(--accent-fg);
  border: 0; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 1rem;
}
.form-status { font-size: 0.9rem; color: var(--muted); margin-top: 10px; }

.faq details {
  border-top: 1px solid var(--border); padding: 12px 0;
}
.faq details summary { font-weight: 600; cursor: pointer; }
.faq details p { color: var(--muted); margin: 8px 0 0; }

.disclaimer { color: var(--muted); border-top: 1px solid var(--border); padding-top: 16px; }

footer {
  border-top: 1px solid var(--border);
  text-align: center; padding: 24px;
  color: var(--muted); font-size: 0.9rem;
}
.footnote { font-size: 0.8rem; }

/* blog */
.post-list { list-style: none; padding: 0; }
.post-list li { padding: 16px 0; border-bottom: 1px solid var(--border); }
.post-list .date { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.85rem; margin-right: 10px; }
.post-list .title { font-weight: 600; }
.post-list a { text-decoration: none; color: var(--fg); }
.post-list a:hover .title { color: var(--accent); }

.post .post-meta { color: var(--muted); font-size: 0.9rem; }
.post .segment-tag { background: var(--border); padding: 2px 8px; border-radius: 12px; }
.post-body h2 { margin-top: 32px; }
.post-body code { background: var(--border); padding: 1px 5px; border-radius: 4px; font-size: 0.95em; }
.post-body pre { background: #f0efe9; padding: 14px; border-radius: 8px; overflow-x: auto; }
.post-cta { margin-top: 48px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

/* pricing */
.pricing-hero { text-align: left; }
.pricing-tiers {
  display: grid; gap: 16px; margin: 32px 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tier {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex; flex-direction: column;
}
.tier-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 110, 63, 0.10);
}
.tier-name { margin: 0 0 8px; font-size: 1.15rem; }
.tier-price { margin: 0 0 6px; }
.tier-price .amount { font-size: 1.8rem; font-weight: 700; }
.tier-price .cadence { color: var(--muted); font-size: 0.95rem; margin-left: 4px; }
.tier-tagline { color: var(--muted); font-size: 0.95rem; margin: 0 0 14px; }
.tier-features {
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: 0.95rem; flex-grow: 1;
}
.tier-features li {
  padding: 5px 0 5px 20px;
  position: relative;
}
.tier-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.tier-cta { text-align: center; }
.tier-secondary {
  display: block; margin-top: 8px; text-align: center;
  font-size: 0.9rem; color: var(--muted);
}
.includes-list, .future-list {
  padding-left: 20px;
}
.includes-list li, .future-list li { margin: 6px 0; }
.future-list li { color: var(--muted); }

/* ---------------------------------------------------------------------------
   Homepage / segment / pricing pages share one visual system: a neo-brutalist
   sticker-book — thick black borders, hard offset shadows, bold colors,
   slight rotations everywhere, no apologies. Scoped under body.home /
   body.segment / body.pricing so the styles cannot leak into the blog or
   other content pages that still use the calm defaults above.
   --------------------------------------------------------------------------- */

body.home {
  --v2-pink:   #ff3d7f;
  --v2-yellow: #ffd23d;
  --v2-cyan:   #3dd6ff;
  --v2-lime:   #b6ff3d;
  --v2-ink:    #0d0d0d;
  --v2-paper:  #fff8e7;
  --v2-shadow: 6px 6px 0 var(--v2-ink);
  --v2-shadow-sm: 4px 4px 0 var(--v2-ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.08) 1px, transparent 0) 0 0 / 22px 22px,
    var(--v2-paper);
  color: var(--v2-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

body.home .site-header,
body.segment .site-header,
body.pricing .site-header {
  background: var(--v2-paper);
  border-bottom: 3px solid var(--v2-ink);
}

/* Wordmark as a small sticker so it carries the brand language into the
   header instead of looking like the leftover gray default. */
body.home .site-header .brand,
body.segment .site-header .brand,
body.pricing .site-header .brand {
  display: inline-block;
  padding: 6px 12px;
  background: var(--v2-yellow);
  color: var(--v2-ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.01em;
  border: 2.5px solid var(--v2-ink);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--v2-ink);
  transform: rotate(-2deg);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.home .site-header .brand:hover,
body.segment .site-header .brand:hover,
body.pricing .site-header .brand:hover {
  transform: rotate(0) translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--v2-ink);
}

/* Nav links: bold black instead of the carried-over green --accent. The
   hover state ticks a colored underline for the V2 palette. */
body.home .site-header nav a,
body.segment .site-header nav a,
body.pricing .site-header nav a {
  color: var(--v2-ink);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.12s ease, color 0.12s ease;
}
body.home .site-header nav a:hover,
body.segment .site-header nav a:hover,
body.pricing .site-header nav a:hover {
  border-bottom-color: var(--v2-pink);
  color: var(--v2-pink);
}
body.home main { max-width: 1100px; padding: 0 28px 96px; }
body.home footer { border-top: 3px solid var(--v2-ink); background: var(--v2-paper); color: var(--v2-ink); }

/* Required by the full-bleed marquee above: prevents the 100vw element
   from triggering a phantom horizontal scrollbar inside a padded parent. */
body.home, body.segment, body.pricing { overflow-x: hidden; }

body.home .v2-section { margin: 80px 0; }
body.home .v2-h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-transform: lowercase;
}
body.home .v2-kicker {
  display: inline-block;
  padding: 4px 12px;
  margin-right: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  border: 2.5px solid var(--v2-ink);
  border-radius: 6px;
  box-shadow: var(--v2-shadow-sm);
  vertical-align: middle;
  transform: rotate(-2deg);
}
.v2-kicker.pink   { background: var(--v2-pink);   color: #fff; }
.v2-kicker.yellow { background: var(--v2-yellow); color: var(--v2-ink); }
.v2-kicker.cyan   { background: var(--v2-cyan);   color: var(--v2-ink); }
.v2-kicker.lime   { background: var(--v2-lime);   color: var(--v2-ink); }

body.home .v2-lede { color: #4a4a4a; font-size: 1.05rem; max-width: 640px; margin: -10px 0 24px; }

/* marquee ------------------------------------------------------------------- */

.marquee {
  /* Full-bleed: escape <main>'s max-width + side padding so the ticker
     spans the entire viewport on every screen size. The negative margins
     pull the marquee back to the viewport edges; overflow-x:hidden on
     the body (set further down) prevents the 100vw from ever introducing
     a horizontal scrollbar. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 3px solid var(--v2-ink);
  border-bottom: 3px solid var(--v2-ink);
  background: var(--v2-ink);
  color: var(--v2-yellow);
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
}
.marquee-track {
  /* display: flex + width: max-content guarantees the track is sized to
     its full content width even on narrow mobile viewports where
     inline-flex can sometimes collapse and make the translate(-50%)
     animation move the strip imperceptibly. */
  display: flex;
  width: max-content;
  gap: 36px;
  padding: 12px 0;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.marquee-item { padding: 0 8px; }
.marquee-item:nth-child(odd) { color: var(--v2-pink); }
.marquee-item:nth-child(3n)  { color: var(--v2-cyan); }
.marquee-item:nth-child(4n)  { color: var(--v2-lime); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* hero ---------------------------------------------------------------------- */

.v2-hero {
  position: relative;
  margin: 32px 0 64px;
  padding: 40px 28px 48px;
  border: 4px solid var(--v2-ink);
  border-radius: 24px;
  background: var(--v2-paper);
  box-shadow: var(--v2-shadow);
  overflow: hidden;
  isolation: isolate;
}
.v2-bg-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--v2-yellow) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, transparent 0, transparent 60px, rgba(255,61,127,0.5) 60px, rgba(255,61,127,0.5) 62px, transparent 62px) 0 0 / 100% 100%;
  opacity: 0.35;
}
.v2-floaters { position: absolute; inset: 0; pointer-events: none; }
.floater {
  position: absolute;
  font-size: 2.2rem;
  animation: wiggle 2.6s ease-in-out infinite;
  filter: drop-shadow(2px 2px 0 var(--v2-ink));
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50%      { transform: rotate(12deg)  translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .floater { animation: none; }
}

.v2-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  background: var(--v2-ink);
  color: var(--v2-yellow);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transform: rotate(-1.5deg);
}

.v2-display {
  margin: 0 0 24px;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 14px 18px;
}
.v2-display .word {
  display: inline-block;
  padding: 4px 16px 8px;
  border: 4px solid var(--v2-ink);
  border-radius: 14px;
  box-shadow: var(--v2-shadow-sm);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.15s ease;
}
.v2-display .word:hover { transform: rotate(0) scale(1.05); }
.word-pink   { background: var(--v2-pink);   color: #fff; }
.word-yellow { background: var(--v2-yellow); color: var(--v2-ink); }
.word-cyan   { background: var(--v2-cyan);   color: var(--v2-ink); }
.word-lime   { background: var(--v2-lime);   color: var(--v2-ink); }

.v2-subhead {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 600;
  margin: 0 0 28px;
  max-width: 640px;
}

.v2-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 0 0 32px;
}
.v2-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  font-size: 1rem; font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 3px solid var(--v2-ink);
  border-radius: 12px;
  box-shadow: var(--v2-shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.v2-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--v2-ink); }
.v2-cta:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--v2-ink); }
.v2-cta-primary   { background: var(--v2-pink);   color: #fff; }
.v2-cta-secondary { background: var(--v2-yellow); color: var(--v2-ink); }

.v2-stamp {
  margin-left: auto;
  padding: 10px 16px;
  border: 3px dashed var(--v2-ink);
  border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--v2-pink);
  text-transform: uppercase;
  transform: rotate(-6deg);
  background: var(--v2-paper);
}

/* hero demo (V2) ------------------------------------------------------------ */

.v2-demo {
  margin: 24px auto;
  max-width: 480px;
  padding: 16px;
  background: var(--v2-cyan);
  border: 4px solid var(--v2-ink);
  border-radius: 18px;
  box-shadow: var(--v2-shadow);
  transform: rotate(-1deg);
}
.v2-demo-svg { width: 100%; height: auto; display: block; }

.v2-demo-svg .zone {
  transform-origin: center;
  animation: zone-pulse 2.4s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes zone-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.v2-demo-svg .v2-hand {
  transform-origin: 285px 290px;
  animation: v2-hand-creep 3.2s ease-in-out infinite;
}
@keyframes v2-hand-creep {
  0%, 18%   { transform: translate(50px, 30px) rotate(10deg); }
  55%, 75%  { transform: translate(-15px, -15px) rotate(-6deg); }
  100%      { transform: translate(50px, 30px) rotate(10deg); }
}

.v2-demo-svg .v2-beep {
  transform-origin: 285px 135px;
  animation: v2-beep-pop 3.2s ease-in-out infinite;
  opacity: 0;
}
@keyframes v2-beep-pop {
  0%, 50%   { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  60%       { opacity: 1; transform: scale(1.2) rotate(-5deg); }
  72%       { opacity: 1; transform: scale(0.95) rotate(0); }
  85%, 100% { opacity: 0; transform: scale(0.6) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-demo-svg .zone, .v2-demo-svg .v2-hand, .v2-demo-svg .v2-beep { animation: none; }
  .v2-demo-svg .v2-beep { opacity: 1; }
}

/* stats --------------------------------------------------------------------- */

.v2-stats {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 720px) { .v2-stats { grid-template-columns: repeat(2, 1fr); } }
.v2-stat {
  background: var(--v2-lime);
  border: 3px solid var(--v2-ink);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--v2-shadow-sm);
}
.v2-stat:nth-child(2) { background: var(--v2-pink); color: #fff; }
.v2-stat:nth-child(3) { background: var(--v2-cyan); }
.v2-stat:nth-child(4) { background: var(--v2-yellow); }
.v2-stat-value { font-size: 1.8rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.v2-stat-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* steps --------------------------------------------------------------------- */

.v2-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 760px) { .v2-steps { grid-template-columns: 1fr; } }
.v2-step {
  background: #fff;
  border: 3px solid var(--v2-ink);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--v2-shadow-sm);
}
.v2-step:nth-child(1) { background: var(--v2-yellow); }
.v2-step:nth-child(2) { background: var(--v2-cyan); }
.v2-step:nth-child(3) { background: var(--v2-pink); color: #fff; }
.v2-step-emoji { font-size: 2.4rem; margin-bottom: 8px; }
.v2-step h3 { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: 0.04em; }
.v2-step p { margin: 0; font-weight: 600; }

/* who-grid ------------------------------------------------------------------ */

.v2-who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.v2-who-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 22px 16px;
  border: 3px solid var(--v2-ink);
  border-radius: 16px;
  text-decoration: none;
  color: var(--v2-ink);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--v2-shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.v2-who-card:hover { transform: translate(-2px, -2px) rotate(-2deg); box-shadow: 6px 6px 0 var(--v2-ink); }
.v2-who-emoji { font-size: 2.2rem; }
.v2-who-pink   { background: var(--v2-pink);   color: #fff; }
.v2-who-yellow { background: var(--v2-yellow); }
.v2-who-cyan   { background: var(--v2-cyan); }
.v2-who-lime   { background: var(--v2-lime); }

/* privacy ------------------------------------------------------------------- */

.v2-privacy-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.v2-privacy-list li {
  padding: 10px 16px;
  background: #fff;
  border: 3px solid var(--v2-ink);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: var(--v2-shadow-sm);
  transform: rotate(-1deg);
}
.v2-privacy-list li:nth-child(2n) { transform: rotate(2deg); background: var(--v2-yellow); }
.v2-privacy-list li:nth-child(3n) { background: var(--v2-cyan); }
.v2-privacy-list li:last-child { background: var(--v2-lime); transform: rotate(-3deg); }

/* features ------------------------------------------------------------------ */

.v2-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.v2-feature {
  background: #fff;
  border: 3px solid var(--v2-ink);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--v2-shadow-sm);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.12s ease;
}
.v2-feature:hover { transform: rotate(0) translateY(-4px); }
.v2-feature-emoji {
  display: inline-block;
  font-size: 1.8rem;
  padding: 6px 12px;
  background: var(--v2-yellow);
  border: 2.5px solid var(--v2-ink);
  border-radius: 10px;
  margin-bottom: 12px;
}
.v2-feature h3 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: 0.04em; }
.v2-feature p  { margin: 0; font-weight: 600; }

/* testimonials -------------------------------------------------------------- */

.v2-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.v2-quote {
  margin: 0;
  padding: 22px;
  background: #fff;
  border: 3px solid var(--v2-ink);
  border-radius: 16px;
  box-shadow: var(--v2-shadow-sm);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.12s ease;
}
.v2-quote:hover { transform: rotate(0); }
.v2-quote:nth-child(1) { background: var(--v2-yellow); }
.v2-quote:nth-child(2) { background: var(--v2-cyan); }
.v2-quote:nth-child(3) { background: var(--v2-lime); }
.v2-quote blockquote { margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; }
.v2-quote figcaption { font-size: 0.9rem; font-weight: 600; }

/* pricing ticket ------------------------------------------------------------ */

.v2-ticket {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  border: 4px solid var(--v2-ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--v2-shadow);
  overflow: hidden;
  transform: rotate(-0.6deg);
}
@media (max-width: 720px) { .v2-ticket { grid-template-columns: 1fr; } }
.v2-ticket-stub {
  background: var(--v2-pink);
  color: #fff;
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  border-right: 4px dashed var(--v2-ink);
  text-align: center;
}
@media (max-width: 720px) {
  .v2-ticket-stub { border-right: 0; border-bottom: 4px dashed var(--v2-ink); }
}
.v2-ticket-label { font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.v2-ticket-amt   { font-size: 3rem; font-weight: 900; line-height: 1; }
.v2-ticket-cad   { font-weight: 700; opacity: 0.9; }
.v2-ticket-body  { padding: 28px; }
.v2-ticket-body h2 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 900; }
.v2-ticket-body p  { margin: 0 0 16px; font-weight: 600; }

/* email --------------------------------------------------------------------- */

.v2-email-card {
  padding: 28px;
  background: var(--v2-yellow);
  border: 4px solid var(--v2-ink);
  border-radius: 18px;
  box-shadow: var(--v2-shadow);
  transform: rotate(0.5deg);
}
.v2-email-card h2 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 900; letter-spacing: -0.01em; }
.v2-email-card p  { margin: 0 0 16px; font-weight: 600; }
.v2-email-card form { display: flex; gap: 10px; flex-wrap: wrap; }
.v2-email-card input[type=email] {
  flex: 1 1 240px;
  padding: 12px 14px;
  border: 3px solid var(--v2-ink);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  background: #fff;
}
.v2-email-card button {
  padding: 12px 20px;
  background: var(--v2-pink);
  color: #fff;
  border: 3px solid var(--v2-ink);
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: var(--v2-shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.v2-email-card button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--v2-ink); }

/* faq tweaks for V2 --------------------------------------------------------- */

body.home .faq details {
  border: 3px solid var(--v2-ink);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: #fff;
}
body.home .faq details summary { font-weight: 800; }
body.home .faq details p       { color: #333; font-weight: 500; }

body.home .disclaimer {
  border-top: 3px dashed var(--v2-ink);
  color: #444;
}

/* segment + pricing V2: inherit the entire body.home chrome --------------
   The page-level visuals (paper background, sticker headers, marquee, demo,
   feature/who/quote cards, ticket pricing teaser, email card, FAQ chrome)
   are already defined under body.home. We "alias" the segment and pricing
   V2 bodies into the same scope by repeating the selectors, so V2 stays one
   visual system across pages and we don't fork the styles. */
body.segment,
body.pricing {
  --v2-pink:   #ff3d7f;
  --v2-yellow: #ffd23d;
  --v2-cyan:   #3dd6ff;
  --v2-lime:   #b6ff3d;
  --v2-ink:    #0d0d0d;
  --v2-paper:  #fff8e7;
  --v2-shadow: 6px 6px 0 var(--v2-ink);
  --v2-shadow-sm: 4px 4px 0 var(--v2-ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.08) 1px, transparent 0) 0 0 / 22px 22px,
    var(--v2-paper);
  color: var(--v2-ink);
}
body.segment main,
body.pricing main { max-width: 1100px; padding: 0 28px 96px; }
body.segment footer,
body.pricing footer { border-top: 3px solid var(--v2-ink); background: var(--v2-paper); color: var(--v2-ink); }

body.segment .v2-section,
body.pricing .v2-section { margin: 80px 0; }
body.segment .v2-h2,
body.pricing .v2-h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900; letter-spacing: -0.02em;
  margin: 0 0 24px; text-transform: lowercase;
}
body.segment .v2-lede,
body.pricing .v2-lede { color: #4a4a4a; font-size: 1.05rem; max-width: 640px; margin: -10px 0 24px; }

/* segment-page hero variation (single big sticker headline + pain callout) -- */

.v2-segment-hero { padding: 36px 28px 36px; }
.v2-display-segment {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: 12px 14px;
  margin: 0 0 22px;
}

.v2-pain-callout {
  position: relative;
  margin: 0 0 28px;
  padding: 22px 22px 22px 28px;
  background: #fff;
  border: 3px solid var(--v2-ink);
  border-left: 8px solid var(--v2-pink);
  border-radius: 14px;
  box-shadow: var(--v2-shadow-sm);
  transform: rotate(-0.4deg);
}
.v2-pain-callout p { margin: 0; font-weight: 600; font-size: 1.05rem; }
.v2-pain-tag {
  position: absolute;
  top: -14px; left: 18px;
  padding: 4px 10px;
  background: var(--v2-pink); color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em;
  border: 2.5px solid var(--v2-ink);
  border-radius: 6px;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--v2-ink);
}

/* pricing-page V2 hero ------------------------------------------------------ */

.v2-pricing-hero { padding: 36px 28px 28px; text-align: left; }

/* pricing tier ticket cards ------------------------------------------------- */

.v2-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.v2-tier {
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 4px solid var(--v2-ink);
  border-radius: 18px;
  box-shadow: var(--v2-shadow);
  overflow: hidden;
  transform: rotate(-0.6deg);
  transition: transform 0.12s ease;
}
.v2-tier:nth-child(2) { transform: rotate(0.8deg); }
.v2-tier:nth-child(3) { transform: rotate(-0.4deg); }
.v2-tier:hover { transform: rotate(0) translateY(-4px); }

.v2-tier-stub {
  padding: 22px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  border-bottom: 4px dashed var(--v2-ink);
}
.v2-tier-pink   .v2-tier-stub { background: var(--v2-pink);   color: #fff; }
.v2-tier-yellow .v2-tier-stub { background: var(--v2-yellow); color: var(--v2-ink); }
.v2-tier-cyan   .v2-tier-stub { background: var(--v2-cyan);   color: var(--v2-ink); }
.v2-tier-lime   .v2-tier-stub { background: var(--v2-lime);   color: var(--v2-ink); }
.v2-tier-highlight {
  border-color: var(--v2-pink);
  box-shadow: 8px 8px 0 var(--v2-pink);
}
.v2-tier-body {
  padding: 22px 20px;
  display: flex; flex-direction: column;
}
.v2-tier-tagline { margin: 0 0 14px; font-weight: 600; }
.v2-tier-features { list-style: none; padding: 0; margin: 0 0 18px; flex-grow: 1; }
.v2-tier-features li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 0.95rem;
  font-weight: 500;
}
.v2-tier-features li::before {
  content: "✓";
  position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px;
  background: var(--v2-lime);
  border: 2px solid var(--v2-ink);
  border-radius: 4px;
  text-align: center; line-height: 14px;
  font-weight: 900; font-size: 0.85rem;
}
.v2-tier-cta { display: block; text-align: center; }
.v2-tier-secondary {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--v2-ink);
  text-decoration: underline;
}

/* pricing extras ------------------------------------------------------------ */

.v2-includes, .v2-future {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.v2-includes li, .v2-future li {
  padding: 12px 16px;
  background: #fff;
  border: 3px solid var(--v2-ink);
  border-radius: 10px;
  font-weight: 600;
  box-shadow: var(--v2-shadow-sm);
}
.v2-includes li { background: var(--v2-lime); }
.v2-future li   { background: #fff; color: #444; }

/* faq chrome on pricing page ------------------------------------------------ */

body.pricing .faq details {
  border: 3px solid var(--v2-ink);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: #fff;
}
body.pricing .faq details summary { font-weight: 800; }
body.pricing .faq details p { color: #333; font-weight: 500; }
body.pricing .disclaimer { border-top: 3px dashed var(--v2-ink); color: #444; }
body.segment .disclaimer { border-top: 3px dashed var(--v2-ink); color: #444; }

body.segment .faq details {
  border: 3px solid var(--v2-ink);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: #fff;
}
body.segment .faq details summary { font-weight: 800; }
body.segment .faq details p { color: #333; font-weight: 500; }

/* ---------------------------------------------------------------------------
   Mobile overrides for the V2 marketing pages. Trigger at 720px because that's
   where the hero stops being two-column and the floaters start landing on top
   of headline text.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Tighter outer padding so cards aren't kissing the screen edges */
  body.home main,
  body.segment main,
  body.pricing main { padding: 0 16px 64px; }

  /* Header: let the brand stay on its own row and the nav reflow as a
     wrapped second row instead of fighting for horizontal space. */
  body.home .site-header,
  body.segment .site-header,
  body.pricing .site-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
  }
  body.home .site-header nav,
  body.segment .site-header nav,
  body.pricing .site-header nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  body.home .site-header nav a,
  body.segment .site-header nav a,
  body.pricing .site-header nav a {
    margin: 0;
    font-size: 0.85rem;
    padding: 4px 2px;
  }

  /* Hero floaters absolutely overlap the headline/subhead/CTAs on a narrow
     viewport. They're decorative — drop them on mobile rather than trying
     to choreograph safe positions for them. */
  body.home .floater,
  body.segment .floater,
  body.pricing .floater { display: none; }

  /* Hero: tighter padding + smaller sticker words so the headline fits
     without each word becoming a chunky block. */
  body.home .v2-hero,
  body.segment .v2-hero,
  body.pricing .v2-hero {
    padding: 28px 18px 32px;
    border-radius: 18px;
  }
  body.home .v2-display,
  body.segment .v2-display {
    gap: 8px 10px;
    margin: 0 0 18px;
  }
  body.home .v2-display .word,
  body.segment .v2-display .word {
    padding: 2px 12px 6px;
    border-width: 3px;
    border-radius: 10px;
    box-shadow: 4px 4px 0 var(--v2-ink);
  }

  /* CTA row: the right-aligned stamp ("100% LOCAL · NO CLOUD · NO BS")
     uses margin-left:auto, which lands awkwardly when the CTAs wrap. Hide
     it on mobile — the same message is in the marquee and the trust line. */
  body.home .v2-stamp,
  body.segment .v2-stamp { display: none; }
  body.home .v2-cta-row,
  body.segment .v2-cta-row { gap: 10px; }
  body.home .v2-cta,
  body.segment .v2-cta,
  body.pricing .v2-cta {
    flex: 1 1 auto;
    justify-content: center;
    padding: 12px 16px;
    font-size: 0.95rem;
  }

  /* Section spacing tightens with viewport so the page doesn't feel like
     it has skyscrapers between sections. */
  body.home .v2-section,
  body.segment .v2-section,
  body.pricing .v2-section { margin: 56px 0; }

  /* The pain callout's big left border + offset shadow look heavy on mobile;
     trim them. */
  body.segment .v2-pain-callout {
    padding: 18px 16px 18px 22px;
    border-left-width: 6px;
  }

  /* Marquee text scales down so more of the message is visible per loop. */
  .marquee { font-size: 0.82rem; }
  .marquee-track { gap: 24px; padding: 10px 0; }
}

/* The marketing pages (home/segment/pricing) are colored by design and don't
   adapt to dark mode. Only the still-calm pages (blog, post, default tier
   cards) get the dark-mode override below. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14130f;
    --fg: #f4f1e8;
    --muted: #a7a39a;
    --border: #2c2a25;
    --accent: #5fc59e;
    --accent-fg: #0a1410;
  }
  .testimonials .quote, .email-capture, .post-cta { background: #1c1a16; }
  .post-body pre { background: #1c1a16; }
  .tier { background: #1c1a16; }
}