/* BREEZE sales page v8 — transformation system.
   Warm paper + ink + red + amber + deep navy. Mobile-first. */
:root {
  --paper: #fff9f0;
  --soft: #fff3df;
  --ink: #191423;
  --ink-soft: #3d3849;
  --muted: #575163;
  --line: #ead9bd;
  --red: #e8442e;
  --red-deep: #b93220;
  --amber: #ffb627;
  --amber-pale: #ffd98a;
  --deep: #141a2e;
  --deep-2: #0d1322;
  --green: #1f9d66;
  --radius: 20px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.4rem; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans); background: var(--paper); color: var(--ink);
  line-height: 1.7; font-size: 1.06rem; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 0.8rem; font-weight: 900; }
h1 { font-size: clamp(2rem, 6.4vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 4.8vw, 2.5rem); max-width: 26ch; }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1rem; }
a { color: var(--red-deep); }
.red { color: var(--red); }
.amber { color: var(--amber); }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.wrap-narrow { max-width: 800px; }
.center { text-align: center; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .band-dark :focus-visible, .final :focus-visible { outline-color: var(--amber); }
.skip { position: absolute; left: -999px; top: 0; background: var(--deep); color: #fff; padding: 0.6rem 1rem; z-index: 60; border-radius: 0 0 8px 0; font-weight: 700; }
.skip:focus { left: 0; color: #fff; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 249, 240, 0.96); backdrop-filter: blur(6px); border-bottom: 2px solid var(--ink); }
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(25, 20, 35, 0.12); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand-name { font-weight: 900; letter-spacing: 0.05em; font-size: 1rem; color: var(--ink); }
.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: var(--amber); border: 2px solid var(--ink); border-radius: 12px; padding: 0.55rem 0.6rem; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; }
#primary-nav { display: none; }
#primary-nav.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 2px solid var(--ink); flex-direction: column; padding: 0.8rem 1.2rem 1.2rem; gap: 0.2rem; }
#primary-nav a { color: var(--ink); text-decoration: none; font-weight: 700; padding: 0.55rem 0.2rem; }
#primary-nav a:not(.btn):hover { color: var(--red); }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  #primary-nav { display: flex !important; position: static; flex-direction: row; align-items: center; gap: 1.3rem; border: none; padding: 0; background: none; }
}

/* Buttons */
.btn {
  display: inline-block; font-weight: 900; text-decoration: none; text-align: center;
  border-radius: 999px; padding: 1rem 2rem; border: 2px solid transparent;
  font-size: 1.02rem; line-height: 1.3; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--red); color: #fff; border-color: var(--red-deep); box-shadow: 0 5px 0 var(--red-deep); }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn-amber { background: var(--amber); color: var(--deep-2); border-color: var(--deep-2); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35); }
.btn-amber:hover { background: var(--amber-pale); transform: translateY(-2px); }
.btn-ghostlight { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.btn-ghostlight:hover { background: rgba(255, 255, 255, 0.14); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--ink); width: 100%; box-shadow: 0 4px 0 rgba(25, 20, 35, 0.2); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-small { padding: 0.6rem 1.2rem; font-size: 0.92rem; box-shadow: none; }
/* Header CTA: amber pill with dark text (the #primary-nav link color
   otherwise overrides .btn-primary's white). High contrast, full
   interaction states, 44px-class touch target. */
#primary-nav .btn-small {
  background: var(--amber); color: var(--deep-2); border: 2px solid var(--ink);
  border-radius: 999px; padding: 0.65rem 1.35rem; font-weight: 900;
  box-shadow: 0 3px 0 rgba(25, 20, 35, 0.9);
}
#primary-nav .btn-small:hover { background: var(--amber-pale); transform: translateY(-1px); }
#primary-nav .btn-small:active { transform: translateY(1px); box-shadow: none; }
#primary-nav .btn-small:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.btn-large { font-size: 1.08rem; padding: 1.1rem 2.2rem; }

/* Sections */
.section { padding: 3.6rem 0; }
.band-soft { background: var(--soft); }
.band-amber { background: linear-gradient(180deg, #ffd98a 0%, #ffc95e 100%); }
.band-dark { background: radial-gradient(120% 90% at 50% 0%, #232c4a 0%, var(--deep) 55%, var(--deep-2) 100%); color: #f2ecdf; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: #f0ebdd; }
.band-dark .deck { color: #fff; }
.tag { margin: 0 0 1rem; }
.tag span {
  display: inline-block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 999px; padding: 0.35rem 1rem;
  background: var(--ink); color: var(--amber-pale); transform: rotate(-1.2deg);
}
.tag-light span { background: var(--amber); color: var(--deep-2); }
.deck { font-size: 1.18rem; font-weight: 700; color: var(--ink-soft); max-width: 46rem; }
.deck-light { color: #fff; }
.subhead { font-size: 1.3rem; margin-top: 1.8rem; }
.micro { font-size: 0.9rem; color: var(--muted); }
.micro-light { color: rgba(255, 255, 255, 0.92); }

/* Agitation trio */
.agitate { display: grid; gap: 1rem; margin: 1.8rem 0; }
.agitate > div { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 1.3rem 1.3rem 1.1rem; border-top: 10px solid var(--red); }
.agitate h3 { font-size: 1.1rem; }
.agitate p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
.agitate em { color: var(--red-deep); font-weight: 700; }
@media (min-width: 900px) { .agitate { grid-template-columns: 1fr 1fr 1fr; } }

/* Chat stage labels */
.b-stage {
  display: inline-block; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; background: rgba(0, 0, 0, 0.28); border-radius: 999px;
  padding: 0.12rem 0.6rem; margin-right: 0.5rem; vertical-align: 0.1em;
}
.center-cta { text-align: center; margin-top: 2.2rem; }

/* Headline devices */
.hl { background: var(--amber); color: var(--deep-2); border-radius: 0.35em; padding: 0 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.u-swash { position: relative; display: inline-block; }
.u-swash svg { position: absolute; left: -2%; bottom: -0.22em; width: 104%; height: 0.32em; }
.swash-loose { white-space: normal; }
.shout { font-size: clamp(1.25rem, 3.4vw, 1.7rem); font-weight: 900; letter-spacing: -0.015em; margin: 1.6rem 0; }
.band-dark .shout, .final .shout { color: var(--amber-pale); }
.brandline { font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.92rem; color: var(--amber-pale); margin-top: 1.2rem; }
.final .brandline { text-align: center; }

/* Hero */
.hero {
  padding: 3rem 0 2.8rem; color: #fff;
  background: radial-gradient(110% 70% at 50% -10%, #3a2b12 0%, var(--deep) 55%, var(--deep-2) 100%);
  overflow: hidden;
}
.hero h1 { color: #fff; max-width: 22ch; }
.hero .hero-deck { color: #ece5d5; max-width: 44rem; }
.kicker { margin: 0 0 1.1rem; }
.kicker span {
  display: inline-block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--amber-pale);
  border: 2px solid rgba(255, 182, 39, 0.55); border-radius: 999px; padding: 0.35rem 1rem;
}
.hero-grid { display: grid; gap: 2.2rem; align-items: center; }
.hero-copy { min-width: 0; }
.hero-deck { font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 800; color: #fff !important; }
.hero-lede { font-size: 1.2rem; font-weight: 800; color: var(--amber-pale) !important; }
.hero-ctas { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.5rem 0 0.8rem; max-width: 28rem; }
.hero-ctas-center { margin-left: auto; margin-right: auto; }
.hero-price strong { color: var(--amber); font-size: 1.25rem; }
.hero-shout { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; margin: 2.4rem 0 0.8rem; color: #fff; }
.hero-sub { max-width: 46rem; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 2.6rem; } }

/* Acquisition console */
.hero-art { position: relative; }
.console { background: #1d2440; border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.routes { display: block; width: 100%; height: auto; background: #171d33; }
.route-flow { animation: routedash 1.5s linear infinite; }
@keyframes routedash { to { stroke-dashoffset: -28; } }
@keyframes jrglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 182, 39, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(255, 182, 39, 0); } }
.console-bar { display: flex; align-items: center; gap: 0.45rem; background: #10152a; padding: 0.7rem 1.1rem; }
.console-bar .cdot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #4a5478; }
.console-bar .cdot:first-child { background: var(--red); }
.console-bar p { margin: 0 0 0 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-pale); }
.console-rows { list-style: none; margin: 0; padding: 0.9rem 1.1rem 1.2rem; display: grid; gap: 0.55rem; }
.console-rows li { position: relative; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 0.6rem 0.9rem 0.6rem 3rem; }
.console-rows li::before {
  content: "✓"; position: absolute; left: 0.8rem; top: 0.65rem; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--green); color: #fff; font-weight: 900; font-size: 0.8rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.console-rows li.live::before { content: "●"; background: var(--amber); color: var(--deep-2); animation: blinkdot 1.4s ease-in-out infinite; }
.console-rows li.next::before { content: "→"; background: transparent; border: 2px solid var(--amber); color: var(--amber); }
.console-rows strong { display: block; font-size: 0.95rem; color: #fff; }
.console-rows span { font-size: 0.82rem; color: #cdd4ea; }
.console-rows .done strong { color: #fff; }
.pulse { color: var(--amber-pale); font-weight: 700; }
.sticker {
  position: absolute; margin: 0; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.02em;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.35rem 0.9rem; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); white-space: nowrap;
}
.sticker-a { top: -0.9rem; right: 1.2rem; transform: rotate(3deg); animation: floaty 5s ease-in-out infinite alternate; }
.sticker-b { bottom: -0.9rem; left: 1.2rem; transform: rotate(-3deg); background: var(--amber); animation: floaty 6s ease-in-out infinite alternate-reverse; }
@keyframes floaty { from { translate: 0 -4px; } to { translate: 0 6px; } }
@keyframes blinkdot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Ticker */
.ticker { background: var(--amber); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); overflow: hidden; padding: 0.65rem 0; }
.ticker-track { display: inline-flex; gap: 2.2rem; white-space: nowrap; padding-left: 1rem; animation: tick 26s linear infinite; }
.ticker-track span { font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.9rem; color: var(--deep-2); }
.ticker-track span::after { content: "✦"; margin-left: 2.2rem; color: var(--red-deep); }
@keyframes tick { to { transform: translateX(-50%); } }
/* Versus + ticks */
.versus { display: grid; gap: 1rem; margin: 1.8rem 0; align-items: stretch; }
.versus-card { border-radius: 22px; padding: 1.6rem 1.5rem; }
.versus-card h3 { margin-bottom: 0.9rem; }
.versus-dull { background: #efe9dc; border: 2px dashed #a09a8c; }
.versus-dull h3 { color: var(--muted); }
.versus-dull li { color: var(--ink-soft); }
.versus-fb { background: var(--ink); color: #f5efe2; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--amber); }
.versus-fb h3 { color: var(--amber); }
.versus-badge {
  margin: 0; align-self: center; justify-self: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 900; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
@media (min-width: 900px) { .versus { grid-template-columns: 1fr auto 1fr; } }
.tick, .cross { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.tick li, .cross li { position: relative; padding-left: 2rem; }
.tick li::before {
  content: ""; position: absolute; left: 0; top: 0.25rem; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5.4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    center/0.7rem no-repeat;
}
.cross li::before { content: "✕"; position: absolute; left: 0.15rem; top: 0; color: var(--muted); font-weight: 800; }
.tick-bright li::before { background-color: var(--amber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5.4' stroke='%23191423' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
#playbook .tick { margin: 1.1rem 0; }
#playbook .tick li { font-weight: 600; }

/* Pipeline (journey overview) */
.pipeline { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.pipeline li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; position: relative; padding: 0 0 1.2rem 0.2rem; }
.pipeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.35rem; top: 2.7rem; bottom: 0.1rem; width: 3px;
  background: repeating-linear-gradient(180deg, var(--red) 0 7px, transparent 7px 13px); opacity: 0.6;
}
.pl-no {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #fff; color: var(--ink);
  border: 2px solid var(--ink); font-weight: 900; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pipeline strong { display: block; font-size: 1.05rem; }
.pipeline li > div span { font-size: 0.9rem; color: var(--ink-soft); }
.pl-star .pl-no { background: var(--amber); animation: jrglow 2.4s ease-in-out infinite; }
.pl-star strong { color: var(--red-deep); }
@media (min-width: 900px) {
  .pipeline { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .pipeline li { background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 1.1rem 1rem; grid-template-columns: 1fr; gap: 0.5rem; }
  .pipeline li:not(:last-child)::after { display: none; }
  .pl-star { border-color: var(--red); box-shadow: 5px 5px 0 var(--amber); }
}

/* Process grid (varied, stars emphasized) */
.proc-grid { display: grid; gap: 1rem; margin: 1.8rem 0 0; }
.proc-grid article { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 1.3rem 1.3rem 1.1rem; }
.proc-grid .proc-no { margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--ink); display: inline-block; border-radius: 999px; padding: 0.25rem 0.8rem; }
.proc-grid h3 { font-size: 1.12rem; }
.proc-grid p { margin: 0; font-size: 0.97rem; color: var(--ink-soft); }
.proc-star { background: var(--ink); color: #000; border-color: var(--ink); box-shadow: 6px 6px 0 var(--red); }
.proc-star h3 { color: #000; }
.proc-star p { color: #000; }
.proc-star .proc-no { background: var(--amber); color: #000; }
@media (min-width: 700px) { .proc-grid { grid-template-columns: 1fr 1fr; } .proc-grid article:nth-child(4), .proc-grid article:nth-child(5) { grid-column: span 1; } }
@media (min-width: 1020px) { .proc-grid { grid-template-columns: 1fr 1fr 1fr; } .proc-star { transform: translateY(-4px); } }

/* Conversation rail + chat */
.conv-rail { list-style: none; margin: 2rem 0; padding: 0; counter-reset: conv; display: grid; gap: 0; }
.conv-rail li { counter-increment: conv; position: relative; padding: 0 0 1.1rem 3.6rem; }
.conv-rail li:last-child { padding-bottom: 0; }
.conv-rail li::before {
  content: counter(conv); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem;
  border-radius: 14px; background: var(--red); color: #fff; font-weight: 900; border: 2px solid var(--red-deep);
  display: inline-flex; align-items: center; justify-content: center; z-index: 1;
}
.conv-rail li:last-child::before { background: var(--green); border-color: var(--green); }
.conv-rail li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.15rem; top: 2.6rem; bottom: 0.2rem; width: 3px;
  background: var(--amber); border-radius: 3px;
}
.conv-rail strong { display: block; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; }
.conv-rail span { font-size: 0.95rem; color: var(--ink-soft); }
@media (min-width: 900px) {
  .conv-rail { grid-template-columns: repeat(7, 1fr); gap: 0.7rem; }
  .conv-rail li { padding: 3rem 0 0 0; text-align: center; }
  .conv-rail li::before { left: 50%; transform: translateX(-50%); }
  .conv-rail li:not(:last-child)::after { left: calc(50% + 1.4rem); right: calc(-50% + 1.4rem); top: 1.1rem; bottom: auto; width: auto; height: 3px; }
}
.chat { background: #fff; border: 2px solid var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 8px 8px 0 rgba(25, 20, 35, 0.18); max-width: 560px; margin: 0 auto 1.6rem; }
.chat-head { background: var(--ink); padding: 0.7rem 1.2rem; }
.chat-head p { margin: 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-pale); }
.bubble { max-width: 88%; margin: 0.7rem 1rem; padding: 0.65rem 0.95rem; border-radius: 16px; }
.bubble p { margin: 0; font-size: 0.94rem; }
.b-them { background: #ece7da; border-bottom-left-radius: 5px; }
.b-us { background: var(--red); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.b-win { background: var(--green); color: #fff; margin: 0.7rem 1rem 1.1rem; border-radius: 14px; text-align: center; font-weight: 800; max-width: none; }

/* Deliverables flow + chips + panels */
.deliver-flow { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.deliver-flow li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 1.2rem 1.3rem 1rem; }
.df-letter {
  width: 2.6rem; height: 2.6rem; border-radius: 16px; background: var(--amber); color: var(--deep-2);
  border: 2px solid var(--ink); font-weight: 900; font-size: 1.3rem;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.deliver-flow li:nth-child(3) .df-letter { background: var(--red); color: #fff; border-color: var(--red-deep); }
.deliver-flow li:last-child .df-letter { background: var(--green); color: #fff; border-color: var(--green); }
.deliver-flow h3 { margin-bottom: 0.25rem; }
.deliver-flow p { margin: 0 0 0.4rem; color: var(--ink-soft); }
@media (min-width: 900px) { .deliver-flow { grid-template-columns: 1fr 1fr; } .deliver-flow li:last-child { grid-column: 1 / -1; } }
.chips { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chips li { background: var(--ink); color: var(--amber-pale); font-weight: 800; font-size: 0.9rem; border-radius: 999px; padding: 0.4rem 1rem; }
.callout {
  margin-top: 1.8rem; background: #fff; border: 3px solid var(--ink); border-radius: 22px;
  padding: 1.4rem 1.5rem; box-shadow: 6px 6px 0 var(--amber); text-align: center;
}
.callout p { margin-bottom: 0.5rem; }
.callout p:last-child { margin-bottom: 0; }
.duo { display: grid; gap: 1.1rem; margin: 1.8rem 0 0; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.panel { background: #fff; border: 2px solid var(--ink); border-radius: 22px; padding: 1.6rem 1.5rem 1.3rem; }
.panel-manager { box-shadow: 6px 6px 0 var(--red); }
.panel-expert { box-shadow: 6px 6px 0 var(--green); }
.panel .panel-flag {
  display: inline-block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; background: var(--ink);
  border-radius: 999px; padding: 0.3rem 0.9rem; margin: 0 0 0.8rem;
}
.panel p { font-size: 0.99rem; color: var(--ink-soft); }
.panel-hours { font-size: 0.9rem; color: var(--ink); font-weight: 700; border-top: 2px dashed var(--line); padding-top: 0.7rem; margin-bottom: 0; }
.panel-hours strong { color: var(--red-deep); }
/* Pricing */
.plans { display: grid; gap: 1.4rem; margin-top: 2.2rem; align-items: stretch; }
.plan {
  background: #fff; border: 2px solid var(--ink); border-radius: 26px;
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column; position: relative;
  box-shadow: 6px 6px 0 rgba(25, 20, 35, 0.16);
}
.plan h3 { font-size: 1.45rem; margin-bottom: 0.2rem; }
.plan-badge {
  position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: var(--red); color: #fff; font-size: 0.78rem; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px;
  padding: 0.35rem 1.1rem; margin: 0; white-space: nowrap; border: 2px solid var(--red-deep);
}
.price { margin: 0.4rem 0 0.6rem; }
.price .amount { font-size: 2.3rem; font-weight: 900; letter-spacing: -0.03em; }
.price .per { color: var(--muted); font-weight: 600; }
.plan ul { list-style: none; margin: 0 0 1.2rem; padding: 1rem 0 0; border-top: 2px dashed var(--line); display: grid; gap: 0.55rem; }
.plan li { position: relative; padding-left: 1.8rem; font-size: 0.97rem; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 0.3rem; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5.4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    center/0.62rem no-repeat;
}
.plan .btn { margin-top: auto; }
.plan-featured { background: var(--ink); color: #f5efe2; border-color: var(--ink); box-shadow: 8px 8px 0 var(--red); }
.plan-featured h3 { color: #fff; }
.plan-featured .per { color: #d3ccbc; }
.plan-featured ul { border-top-color: rgba(255, 255, 255, 0.25); }
/* Benefit-led plan cards: positioning, allowance figures, self-service
   distinction, summaries. Featured variants keep dark-card contrast. */
.plan-pos {
  margin: 0 0 0.3rem; font-size: 0.82rem; font-weight: 900;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--red-deep);
}
.plan-sub { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--muted); }
.plan-featured .plan-pos { color: var(--amber); }
.plan-featured .plan-sub { color: #d3ccbc; }
.plan-allow {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem;
  margin: 0.9rem 0 0;
}
.plan-allow > div {
  border: 2px solid var(--line); border-radius: 14px; padding: 0.5rem 0.3rem;
  text-align: center; background: var(--paper); min-width: 0;
}
.plan-allow dt {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.1rem;
  line-height: 1.35; overflow-wrap: break-word;
}
.plan-allow dd { margin: 0; font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Text-valued metrics (e.g. Starter's self-managed outreach) set
   smaller so the words fit the cell instead of overflowing it. */
.plan-allow dd.text { font-size: 0.95rem; line-height: 1.3; }
.plan-featured .plan-allow > div { border-color: rgba(255, 182, 39, 0.55); background: rgba(255, 255, 255, 0.06); }
/* Very narrow screens: stack the allowance figures as full-width rows
   so the labels stay readable instead of crushing to clipped fragments. */
@media (max-width: 420px) {
  .plan-allow { grid-template-columns: 1fr; }
  .plan-allow > div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0.45rem 0.9rem; text-align: left;
  }
  .plan-allow dt { margin-bottom: 0; }
}
.plan-featured .plan-allow dt { color: var(--amber-pale); }
.plan-featured .plan-allow dd { color: #fff; }
.plan-you {
  border: 2px dashed var(--red); border-radius: 14px; padding: 0.7rem 0.9rem;
  font-size: 0.85rem; color: var(--ink-soft); background: #fff;
}
.plan-you strong { display: block; color: var(--red-deep); margin-bottom: 0.15rem; }
.plan-sum {
  font-size: 0.87rem; font-weight: 700; color: var(--ink-soft);
  border-top: 2px dashed var(--line); padding-top: 0.8rem;
}
.plan-featured .plan-sum { color: #e8e2d2; border-top-color: rgba(255, 255, 255, 0.25); }
@media (min-width: 960px) {
  .plans { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .plan-featured { transform: scale(1.04); }
}

/* Book + countdown */
.bonus-grid { display: grid; gap: 2rem; align-items: center; margin: 1.4rem 0 0; }
@media (min-width: 960px) { .bonus-grid { grid-template-columns: 0.9fr 1.1fr; } }
.book-scene { perspective: 1400px; display: flex; justify-content: center; padding: 0.6rem 0; }
.book { position: relative; width: min(290px, 80vw); transform: rotateY(-12deg) rotateX(2deg); transform-style: preserve-3d; }
.cover {
  position: relative; aspect-ratio: 300 / 420; border-radius: 4px 12px 12px 4px; overflow: hidden;
  background: linear-gradient(165deg, #2b3a67 0%, var(--deep) 70%);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.3rem 1.25rem 1.1rem; border: 2px solid var(--deep-2);
  box-shadow: 10px 10px 0 rgba(20, 26, 46, 0.35), 26px 34px 55px -18px rgba(11, 20, 42, 0.5);
}
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 28%, transparent 45%);
}
.cover-top, .cover-main, .cover-support, .cover-foot { position: relative; z-index: 1; }
.cover-brand { margin: 0; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; }
.cover-count { margin: 0; font-size: 4rem; font-weight: 900; line-height: 1; color: var(--amber); text-shadow: 0 3px 0 rgba(0,0,0,0.45); font-variant-numeric: tabular-nums; }
.cover-title { margin: 0.3rem 0 0; font-size: 1.22rem; line-height: 1.2; font-weight: 900; text-transform: uppercase; }
.cover-title span { display: block; }
.cover-title .cover-final { color: var(--amber-pale); }
.cover-support { margin: 0; font-size: 0.82rem; color: #e8edfb; border-top: 3px solid var(--amber); padding-top: 0.6rem; }
.cover-foot { margin: 0.5rem 0 0; font-size: 0.62rem; letter-spacing: 0.16em; color: #a9b3cc; font-weight: 700; text-transform: uppercase; }
.book::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24px;
  background: linear-gradient(90deg, #071022 0%, #141a2e 55%, #2b3a67 100%);
  transform: translateX(-12px) rotateY(-70deg); transform-origin: right center;
  border-radius: 4px 0 0 4px;
}
.book::after {
  content: ""; position: absolute; top: 7px; bottom: 7px; right: -10px; width: 20px;
  background: repeating-linear-gradient(90deg, #fff 0 2px, #ddd6c8 2px 3px);
  transform: rotateY(26deg); transform-origin: left center; border-radius: 0 3px 3px 0;
}
/* Unified bonus offer: urgency line + dark timer panel (same countdown
   component, relocated below the headline; timer appearance unchanged). */
.bonus-urgency { font-weight: 800; color: var(--ink); max-width: 46rem; }
.bonus-window {
  background: var(--deep); border: 2px solid var(--ink); border-radius: 22px;
  padding: 1rem 1.2rem; margin: 1.2rem 0 1.6rem;
}
.bonus-window .countdown { margin: 0 0 0.9rem; padding: 0.9rem 1rem; }
.bonus-window .center-cta { margin-top: 0; }
.bonus-window .micro { margin-bottom: 0; }
/* Compact urgency: timer prominent but not dominating. */
.bonus-window .count-time { font-size: 2.5rem; letter-spacing: 0.04em; }
.count-qualify { font-size: 0.95rem; font-weight: 800; color: var(--amber-pale); margin: 0.4rem 0 0; }
/* Bonus eyebrows: both guides marked as one included offer. */
.bonus-no { margin: 0 0 0.7rem; }
.bonus-no span {
  display: inline-block; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber-pale); background: var(--ink);
  border-radius: 999px; padding: 0.3rem 0.95rem;
}
.bonus-grid + .bonus-no { margin-top: 1.6rem; }
/* Compact mobile presentation: tighter bonus cards, proportionally
   smaller book mockups (zoom scales cover content too — no clipping),
   and a denser illustrated chat sample. Text sizes untouched. */
@media (max-width: 640px) {
  .bonus-grid { gap: 1rem; margin-top: 1rem; }
  .bonus-grid .book { zoom: 0.8; }
  .bonus-grid + .bonus-no { margin-top: 1.2rem; }
  .chat { border-radius: 18px; margin-bottom: 1.2rem; }
  .chat-head { padding: 0.5rem 0.9rem; }
  .bubble { margin: 0.45rem 0.7rem; padding: 0.5rem 0.75rem; }
  .b-win { margin: 0.45rem 0.7rem 0.8rem; }
}
/* Second bonus: same book treatment, deep-green cover. */
.cover-ship { background: linear-gradient(165deg, #176b43 0%, #0d2b1f 75%); }
.cover-ship .cover-support { color: #e6f2ea; }
.cover-kicker {
  margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 900;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber);
}
.cover-route { display: block; width: 100%; height: auto; margin: 0.5rem 0 0.35rem; }
.cover-sub { margin: 0; font-size: 0.95rem; line-height: 1.35; font-weight: 700; color: var(--amber-pale); }
.countdown {
  background: rgba(255, 255, 255, 0.07); border: 2px solid var(--amber); border-radius: 22px;
  padding: 1.3rem 1.4rem; margin: 1.5rem 0; text-align: center;
}
.count-label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin: 0 0 0.1rem; }
.count-time { font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; margin: 0; color: #fff; letter-spacing: 0.02em; }
.count-note { font-size: 0.88rem; color: #ece7d8; margin: 0.4rem 0 0; }
.countdown.expired .count-time { color: #8f8c8c; }
#bonus-cta.removed { display: none; }

/* Guarantee seal */
.guar-grid { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 900px) { .guar-grid { grid-template-columns: 220px 1fr; } }
.seal { margin: 0; display: flex; justify-content: center; }
.seal svg { width: min(200px, 55vw); height: auto; }
.seal-spin { transform-origin: 100px 100px; animation: sealslow 40s linear infinite; }
@keyframes sealslow { to { transform: rotate(360deg); } }
.guarantee-line { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; margin-bottom: 1.2rem; }
.guarantee-facts { display: grid; gap: 1rem; margin: 1.2rem 0; }
.guarantee-facts > div { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 1rem 1.2rem; border-left: 10px solid var(--green); }
.guarantee-facts h3 { font-size: 1.02rem; margin: 0 0 0.25rem; }
.guarantee-facts p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }
@media (min-width: 860px) { .guarantee-facts { grid-template-columns: 1fr 1fr; } }

/* Journey */
.journey { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.journey li { counter-increment: step; position: relative; padding: 0 0 1.2rem 3.4rem; }
.journey li:last-child { padding-bottom: 0; }
.journey li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem;
  border-radius: 50%; background: var(--amber); color: var(--deep-2); font-weight: 900; border: 2px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center; z-index: 1;
}
.journey li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.12rem; top: 2.5rem; bottom: 0.2rem; width: 3px;
  background: repeating-linear-gradient(180deg, var(--ink) 0 7px, transparent 7px 13px); opacity: 0.35;
}
.journey h3 { margin-bottom: 0.15rem; font-size: 1.08rem; }
.journey p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* FAQ (dark accordion) */
.faq { display: grid; gap: 0.8rem; margin-top: 1.8rem; }
.band-dark details { background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 182, 39, 0.4); border-radius: 16px; padding: 0 1.2rem; transition: border-color 0.15s ease; }
.band-dark details[open] { border-color: var(--amber); }
.band-dark details p { color: #ece7d8; margin-top: 0; }
summary {
  cursor: pointer; font-weight: 800; padding: 1.05rem 0; list-style: none; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "›"; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--amber); color: var(--deep-2); font-weight: 900; font-size: 1.2rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transform: rotate(90deg); transition: transform 0.18s ease;
}
details[open] summary::after { transform: rotate(-90deg); }

/* Final + footer */
.final { background: radial-gradient(110% 80% at 50% 0%, #2b3a67 0%, var(--deep) 60%, var(--deep-2) 100%); color: #f2ecdf; text-align: center; padding: 4.2rem 0; }
.final h2 { color: #fff; margin-left: auto; margin-right: auto; }
.final .shout { color: var(--amber-pale); }
.final-prices { font-weight: 800; color: #fff; font-size: 1.08rem; }
.final .brandline { text-align: center; }
.site-footer { background: var(--deep-2); color: #c6cfdf; padding: 2.4rem 0 2rem; }
.site-footer .brand-name { color: #fff; margin: 0 0 0.3rem; }
.footer-tag { margin: 0 0 0.8rem; font-size: 0.95rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 1rem; }
.site-footer nav a { color: #e8edfb; text-decoration: none; }
.site-footer nav a:hover { color: #fff; text-decoration: underline; }
.notyet { color: #939db5; border-bottom: 1px dotted #939db5; cursor: not-allowed; }
.site-footer p { font-size: 0.9rem; }
.footer-small { font-size: 0.85rem; margin: 0.8rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* Reveal on scroll */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 640px) { .u-swash { white-space: normal; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}