/* Snapline company site styles.
   Design format: pipeline-b/design-format.md (sturdy, legible from a truck).
   Calm charcoal and chalk base. ONE saturated accent (chalk-line cobalt) for CTA buttons,
   plus the thin snapped-line motif that names the brand.
   Tailwind (CDN) handles layout and the type scale.
   Spacing uses only: 0 2 4 8 12 16 24 32 40 48 64 80 96 px. */

:root {
  --ink: 24 24 24;          /* #181818 charcoal: text on light, base of dark sections */
  --ink-soft: 82 82 78;     /* #52524E secondary text on light */
  --chalk: 244 242 236;     /* #F4F2EC chalk white: light sections and text on dark */
  --paper: 251 250 247;     /* #FBFAF7 */
  --line: 222 219 210;      /* #DEDBD2 */
  --night: 24 24 24;        /* #181818 */
  --night-2: 31 31 31;      /* #1F1F1F */
  --night-3: 39 39 39;      /* #272727 */
  --night-4: 49 49 49;      /* #313131 */
  --cta: 36 87 230;         /* #2457E6 chalk-line cobalt: CTA buttons and the snapped line ONLY */
  --cta-hover: 59 107 245;  /* #3B6BF5 */
  --flag: 255 236 179;      /* draft chip */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: rgb(var(--paper)); color: rgb(var(--ink)); font-family: "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
@media (max-width: 1023px) { body { padding-bottom: 80px; } }

h1, h2, h3, .balance { text-wrap: balance; }
p, li, dd, summary { text-wrap: pretty; }

/* Display type: heavy sans, near caps, solid color */
.display { text-transform: uppercase; font-weight: 700; letter-spacing: -0.02em; }

::selection { background: rgb(var(--cta) / 0.2); color: rgb(var(--ink)); }
.on-dark ::selection { background: rgb(var(--cta) / 0.55); color: #FFFFFF; }
input, select, textarea { caret-color: rgb(var(--cta)); }
a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
html { scrollbar-color: rgb(var(--ink-soft) / 0.5) rgb(var(--chalk)); }

:focus-visible { outline: 3px solid rgb(var(--cta)); outline-offset: 2px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: #FFFFFF; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 80; background: rgb(var(--cta)); color: #fff; padding: 8px 12px; border-radius: 8px; transition: transform 300ms var(--ease); }
.skip:focus { transform: translateY(80px); }

/* Surfaces */
.bg-night { background: rgb(var(--night)); }
.bg-night2 { background: rgb(var(--night-2)); }
.bg-chalk { background: rgb(var(--chalk)); }
.bg-paper { background: rgb(var(--paper)); }
.text-chalk { color: rgb(var(--chalk)); }
.text-chalk-soft { color: rgb(var(--chalk) / 0.74); }
.text-soft { color: rgb(var(--ink-soft)); }
.border-line { border-color: rgb(var(--line)); }
.panel { background: #FFFFFF; border: 1px solid rgb(var(--line)); }
.panel-dark { background: rgb(var(--night-2)); border: 1px solid rgb(var(--night-4)); }

/* Header: full width, solid, sturdy */
.site-header { background: rgb(var(--night)); border-bottom: 1px solid rgb(var(--night-4)); }
.nav-link { color: rgb(var(--chalk) / 0.74); border-radius: 8px; transition: color 300ms var(--ease), background-color 300ms var(--ease); }
.nav-link:hover { color: rgb(var(--chalk)); background: rgb(255 255 255 / 0.06); }

/* Buttons. .btn-cta is the ONLY place the cobalt fills a surface. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; border-radius: 8px; padding: 8px 12px; min-height: 48px; text-align: center; transition: background-color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease); }
.btn-lg { min-height: 56px; padding: 8px 24px; font-size: 1rem; line-height: 1.5rem; }
.btn-sm { min-height: 40px; font-size: 0.875rem; line-height: 1.25rem; }
.btn-cta { background: rgb(var(--cta)); color: #FFFFFF; box-shadow: 0 2px 4px rgb(0 0 0 / 0.16); }
.btn-cta:hover { background: rgb(var(--cta-hover)); transform: translateY(-2px); box-shadow: 0 8px 16px rgb(0 0 0 / 0.2); }
.btn-cta:active { transform: scale(0.98); }
.btn-cta[disabled] { background: rgb(var(--ink-soft) / 0.35); box-shadow: none; transform: none; cursor: not-allowed; }
.btn-ghost { color: rgb(var(--ink)); border: 2px solid rgb(var(--ink) / 0.8); background: transparent; }
.btn-ghost:hover { background: rgb(var(--ink) / 0.06); }
.btn-ghost:active { transform: scale(0.98); }
.on-dark .btn-ghost { color: rgb(var(--chalk)); border-color: rgb(var(--chalk) / 0.6); }
.on-dark .btn-ghost:hover { background: rgb(255 255 255 / 0.08); }

/* Text links that act as card CTAs */
.card-cta { color: rgb(var(--ink)); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(var(--cta)); text-decoration-thickness: 2px; transition: color 300ms var(--ease); }
.card-cta i { transition: transform 300ms var(--ease); }
.card-cta:hover { color: rgb(var(--cta)); }
.card-cta:hover i { transform: translateX(4px); }

/* Fact badges (outlined, never cobalt) */
.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(var(--line)); background: #FFFFFF; color: rgb(var(--ink)); border-radius: 9999px; padding: 4px 12px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.on-dark .badge { background: rgb(255 255 255 / 0.04); border-color: rgb(var(--chalk) / 0.22); color: rgb(var(--chalk)); }

/* Draft chips: anything George must confirm before it is stated as fact */
.tbc { background: rgb(var(--flag)); color: #5A4300; border-radius: 4px; padding: 0 4px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Labeled photo placeholders: name the exact shot to get */
.ph-photo { background: rgb(var(--chalk)); border: 2px dashed rgb(var(--ink-soft) / 0.35); color: rgb(var(--ink-soft)); }

/* The snapped chalk line. Nail dot at each end, a slightly rough chalk edge,
   draws left to right on load, then twangs once and settles. */
.snap { position: relative; display: block; height: 12px; }
.snap .cord { position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; transform-origin: left center; }
.snap .cord svg { display: block; width: 100%; height: 2px; overflow: visible; }
.snap .nail { position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 9999px; background: rgb(var(--chalk)); }
.snap .nail.l { left: 0; }
.snap .nail.r { right: 0; }
.snap.light .nail { background: rgb(var(--ink)); }
@keyframes snapDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes snapTwang { 0% { transform: translateY(0); } 20% { transform: translateY(-3px); } 45% { transform: translateY(2px); } 70% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
.snap.go .cord { animation: snapDraw 800ms var(--ease) 150ms both; }
.snap.go .cord svg { animation: snapTwang 600ms var(--ease) 950ms both; }
.js .snap.wait .cord { transform: scaleX(0); }

/* Hero illustration: a search screen drawn flat on the hero, no frame around it */
.mock-row { background: rgb(var(--night-2)); border: 1px solid rgb(var(--night-4)); }
.mock-row.win { border: 2px solid rgb(var(--cta)); }
.mock-pill { border: 1px solid rgb(var(--chalk) / 0.3); color: rgb(var(--chalk)); border-radius: 9999px; padding: 2px 12px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.bubble { background: rgb(var(--chalk)); color: rgb(var(--ink)); }

/* Steps: the line runs nail to nail across the three steps */
.step-mark { position: relative; height: 12px; }
.step-mark::before { content: ""; position: absolute; left: 0; right: -32px; top: 5px; height: 2px; background: rgb(var(--cta)); transform-origin: left center; transition: transform 800ms var(--ease); }
.steps li:last-child .step-mark::before { right: 0; }
.step-mark::after { content: ""; position: absolute; left: 0; top: 2px; width: 8px; height: 8px; border-radius: 9999px; background: rgb(var(--ink)); }
@media (max-width: 767px) { .step-mark::before { right: 0; } }
.js .steps:not(.is-in) .step-mark::before { transform: scaleX(0); }
.steps li:nth-child(2) .step-mark::before { transition-delay: 200ms; }
.steps li:nth-child(3) .step-mark::before { transition-delay: 400ms; }

/* Packages */
.tier { background: #FFFFFF; border: 1px solid rgb(var(--line)); }
.tier.pick { border: 2px solid rgb(var(--ink)); box-shadow: 0 16px 32px rgb(var(--ink) / 0.08); }
.tier li i { color: rgb(var(--ink)); }

/* FAQ */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { transition: transform 500ms var(--ease); }
.faq details[open] .chev { transform: rotate(45deg); }
.faq summary:hover .q { color: rgb(var(--cta)); }

/* Form */
.field-input { width: 100%; min-height: 48px; border-radius: 8px; border: 1px solid rgb(var(--line)); background: #FFFFFF; color: rgb(var(--ink)); padding: 8px 12px; font-size: 1rem; line-height: 1.5rem; transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.field-input:hover { border-color: rgb(var(--ink-soft) / 0.5); }
.field-input:focus { outline: none; border-color: rgb(var(--cta)); box-shadow: 0 0 0 4px rgb(var(--cta) / 0.15); }
.field-input[aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 4px rgb(180 35 24 / 0.12); }
.field-input::placeholder { color: #6B6B66; opacity: 1; }
.field-error { color: #B42318; }
.skeleton { background: rgb(var(--ink) / 0.08); border-radius: 8px; animation: pulse 1200ms var(--ease) infinite alternate; }
@keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } }

/* STICKY MOBILE BOTTOM BAR: one full width CTA in the thumb zone */
.thumbbar { background: rgb(var(--night)); padding: 8px 16px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.18); transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.thumbbar .btn { min-height: 48px; }
.thumbbar.away { transform: translateY(100%); opacity: 0; pointer-events: none; }

/* Tagline: words go from muted chalk to full chalk one at a time */
.tagline .w { color: rgb(var(--chalk) / 0.3); transition: color 600ms var(--ease); }
.tagline .w.lit { color: rgb(var(--chalk)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .snap.go .cord, .snap.go .cord svg { animation: none; }
  .js .snap.wait .cord { transform: none; }
  .js .steps:not(.is-in) .step-mark::before { transform: none; }
  .btn-cta:hover, .card-cta:hover i { transform: none; }
  .thumbbar { transition: opacity 300ms var(--ease); }
  .thumbbar.away { transform: none; }
  .skeleton { animation: none; }
}