/* =====================================================================
   Pixel — Marketing site styles · "Ember — The Receipts Look"
   Plain CSS (the Tailwind Play CDN only compiles classes found in HTML,
   not in external stylesheets, so component classes live here).

   Color discipline:
     • EMBER (#FF5A1F) is the only loud color — CTAs, live countdown
       digits, urgency eyebrows, one focal element per mockup. Nowhere else.
     • SIGNAL-GREEN (#0FA968) means money and ONLY money.
     • Everything else is ink, bone, warm taupe + warm hairlines.
     • GOLD (#D9A441) is rationed: most-popular pill + #1 trophy only.
   ===================================================================== */

:root {
  /* canvas + ink */
  --canvas:        #FBF8F3;
  --canvas-raised: #FFFFFF;
  --canvas-2:      #F4EFE7;
  --ink:           #15161B;
  --ink-700:       #2A2C36;
  --ink-line:      #33343E;
  /* accents */
  --ember:         #FF5A1F;
  --ember-600:     #E8430A;
  --ember-ink:     #C2370A;   /* ember TEXT on ember-tint — AA on small labels */
  --ember-tint:    #FFEDE3;
  --signal:        #0FA968;
  --signal-ink:    #097247;   /* money TEXT on light surfaces — AA */
  --signal-tint:   #E6F6EF;
  --gold:          #D9A441;
  /* neutrals */
  --line:          #E7E0D6;
  --muted:         #6B6256;
  --muted-2:       #8A8073;
  /* dark-section text */
  --bone:          #F3EEE6;
  --bone-2:        #B9B1A4;
  --bone-3:        #8A8073;
  /* legacy aliases (so any un-migrated rule still renders on-system) */
  --brand-50:  #FFEDE3; --brand-100: #FFD9C4; --brand-200: #FFC0A1;
  --brand-300: #FF9E73; --brand-500: #FF5A1F; --brand-600: #FF5A1F;
  --brand-700: #E8430A;
  /* elevation */
  --e0: 0 1px 0 #E7E0D6, 0 1px 2px rgba(40,28,16,.04);
  --e1: 0 2px 4px rgba(40,28,16,.06), 0 12px 24px -10px rgba(40,28,16,.14);
  --e2: 0 4px 8px rgba(40,28,16,.08), 0 28px 56px -20px rgba(40,28,16,.28);
  --e-ember: 0 8px 20px -6px rgba(255,90,31,.45);
}

html { -webkit-font-smoothing: antialiased; }

/* ---------- Canvas + paper grain ---------- */
body {
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  position: relative;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* keep real content above the grain */
body > * { position: relative; z-index: 1; }

/* ---------- Dark sections (the ONE attribution section, final CTA, footer) ---------- */
.section-ink { background: var(--ink); color: var(--bone); position: relative; isolation: isolate; }
.section-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(51,52,62,.6) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: .5;
}
.section-ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.h1-display {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: .98;
  letter-spacing: -.03em; color: var(--ink);
}
.h2-display {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.02;
  letter-spacing: -.02em; color: var(--ink);
}
.h3-title { font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; color: var(--ink); }

/* Editorial kicker: short ember rule + uppercase wide-tracked label */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--ember);
}
.kicker::before { content: ""; width: 24px; height: 2px; background: var(--ember); border-radius: 2px; }
.kicker--center { justify-content: center; }

/* The numerals voice */
.num { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
.money { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--signal-ink); }
.section-ink .money { color: var(--signal); }  /* bright money reads fine on ink */
.money-glow { text-shadow: 0 0 16px rgba(15,169,104,.25); }

/* Body */
.lead { font-size: 1.125rem; line-height: 1.65; color: var(--muted); }

/* Headline urgency-word treatment */
.hl-ember { color: var(--ember); }
.hl-underline { box-shadow: inset 0 -.18em 0 rgba(255,90,31,.28); }

/* ---------- Nav ---------- */
#nav.is-scrolled nav {
  background: rgba(251,248,243,.92);
  border-color: var(--line);
  box-shadow: 0 8px 24px -16px rgba(40,28,16,.30);
}
.nav-link {
  position: relative; padding: .5rem .85rem; font-size: .875rem;
  font-weight: 600; color: var(--ink-700); transition: color .15s;
}
.nav-link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .15rem;
  height: 2px; background: var(--ember); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--ink); }
.mobile-link { display:block; padding:.7rem .85rem; border-radius:10px; font-weight:600; color:var(--ink-700); }
.mobile-link:hover { background: var(--canvas-2); }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 10px; padding: .75rem 1.25rem;
  font-weight: 700; color: #fff;
  background: var(--ember);
  border-bottom: 2px solid var(--ember-600);
  box-shadow: var(--e-ember);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #FF6B33, var(--ember-600));
  box-shadow: 0 12px 26px -6px rgba(255,90,31,.55);
}
.btn-primary:active { transform: translateY(0); border-bottom-width: 1px; }
.btn-primary svg { transition: transform .15s; }
.btn-primary:hover svg { transform: translateX(2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 10px; padding: .75rem 1.25rem; font-weight: 600;
  color: var(--ink); background: var(--canvas-raised); border: 1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--canvas-2); border-color: var(--muted-2); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 10px; padding: .7rem 1.1rem; font-weight: 700;
  color: var(--ink); background: var(--canvas-raised); border: 1px solid var(--line);
  transition: background .15s, border-color .15s, color .15s;
}
.btn-outline:hover { background: var(--canvas-2); border-color: var(--ember); color: var(--ember-600); }

.btn-on-dark {
  display:inline-flex; align-items:center; gap:.5rem; border-radius:10px;
  padding:.75rem 1.25rem; font-weight:700; color: var(--bone);
  background: transparent; border: 1px solid var(--ink-line); transition: background .15s;
}
.btn-on-dark:hover { background: var(--ink-700); }

/* ---------- Feature cards ---------- */
.feature-card {
  border-radius: 14px; border: 1px solid var(--line); background: var(--canvas-raised);
  padding: 1.5rem; box-shadow: var(--e0);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--e1); border-color: var(--ember-tint); }
.feature-ico {
  display: grid; place-items: center; height: 3rem; width: 3rem; border-radius: 10px;
  background: var(--canvas-2); color: var(--ink);
}
.feature-ico svg { stroke-width: 2; }
.feature-title { margin-top: 1rem; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.feature-text { margin-top: .4rem; font-size: .925rem; line-height: 1.55; color: var(--muted); }

/* The wedge card — featured */
.feature-card--featured { border: 1.5px solid var(--ember); }
.feature-card--featured .feature-ico { background: var(--ember-tint); color: var(--ember-600); }
.feature-stat { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }

/* ---------- Steps ---------- */
.step-card {
  position: relative; border-radius: 14px; border: 1px solid var(--line);
  background: var(--canvas-raised); padding: 1.5rem; box-shadow: var(--e0);
}
.step-num {
  display: grid; place-items: center; height: 2.5rem; width: 2.5rem; border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 1.1rem;
  color: var(--ember-600); background: var(--ember-tint); border: 1px solid #FFD9C4;
}

/* ---------- Placement cards (real mini-previews) ---------- */
.place-card {
  position: relative; border-radius: 14px; border: 1px solid var(--line);
  background: var(--canvas-raised); padding: 1rem; box-shadow: var(--e0);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.place-card:hover { transform: translateY(-3px); box-shadow: var(--e1); border-color: var(--ember-tint); }
.place-art {
  position: relative; height: 7rem; border-radius: 10px; overflow: hidden;
  background: var(--canvas-2); border: 1px solid var(--line); padding: .6rem;
}
.place-frame {
  height: 100%; border-radius: 8px; background: var(--canvas-raised);
  border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column;
}
.place-frame .chrome { display:flex; gap:3px; padding:5px 7px; background:#F3EEE6; border-bottom:1px solid var(--line); }
.place-frame .chrome i { width:5px; height:5px; border-radius:99px; background:#E2DACE; }
.place-bar {
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9px; color:#fff;
  background: var(--ember); padding: 3px 6px; text-align:center; letter-spacing:.02em;
}
.place-body { flex:1; padding:6px; }
.place-body .ln { height:4px; border-radius:3px; background:#E2DACE; margin-bottom:5px; }
.place-title { margin-top: .9rem; font-weight: 700; color: var(--ink); }
.place-text { margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.place-tag {
  position: absolute; top: 1.5rem; right: 1.5rem; border-radius: 99px;
  padding: .15rem .6rem; font-size: .7rem; font-weight: 700;
  background: var(--canvas-2); color: var(--muted); border: 1px solid var(--line);
}
.place-tag-paid { background: var(--ember-tint); color: var(--ember-ink); border-color: #FFD9C4; }

/* ---------- Design chips & preview bars ---------- */
.design-chip {
  border-radius: 99px; border: 1px solid var(--line); background: var(--canvas-raised);
  padding: .4rem .85rem; font-size: .825rem; font-weight: 600; color: var(--ink-700);
}
.preview-bar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-radius:12px; padding:.85rem 1.25rem; font-size:.9rem; font-weight:600; box-shadow: var(--e0);
}
.preview-bar .num { font-size:.95rem; }

/* ---------- Pricing ---------- */
.price-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 14px; border: 1px solid var(--line); background: var(--canvas-raised);
  padding: 1.75rem; box-shadow: var(--e0);
}
.price-card .price-amt { font-family:'Archivo',sans-serif; font-weight:900; font-size:2.75rem; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.price-card-pop {
  background: var(--ink); border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(217,164,65,.25), var(--e2);
  transform: translateY(-6px);
}
.price-card-pop .price-amt { color: var(--bone); }
.price-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; font-size: .9rem; color: var(--muted); }
.price-list li { position: relative; padding-left: 1.6rem; }
.price-list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--signal); }
.price-list li.font-semibold::before { content: ""; }
.price-list-dark { color: var(--bone-2); }
.price-list-dark li::before { color: var(--signal); }
.price-list li.font-semibold { color: var(--ink); padding-left: 0; }
.price-card-pop .price-list li.font-semibold { color: var(--bone); }

/* Pricing feature matrix (✓ / ✗ per feature, mirrors the in-app billing page) */
.price-ico { display:grid; place-items:center; height:2.5rem; width:2.5rem; border-radius:10px; background:var(--canvas-2); color:var(--ink); }
.price-card-pop .price-ico { background:rgba(255,255,255,.08); color:var(--bone); }
.price-tagline { margin-top:1rem; font-size:.875rem; line-height:1.45; color:var(--muted); min-height:2.5rem; }
.price-card-pop .price-tagline { color:var(--bone-2); }
.price-bill { margin-top:.35rem; font-size:.75rem; color:var(--muted-2); }
.price-card-pop .price-bill { color:#8A8073; }
.trial-badge { display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem; border-radius:6px;
  background:var(--ember-tint); padding:.2rem .55rem; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ember-ink); }
.price-card-pop .trial-badge { background:rgba(255,124,69,.15); color:#FF9E73; }
.feat-head { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); }
.price-card-pop .feat-head { border-color:var(--ink-line); color:#8A8073; }
.feat-list { margin-top:.9rem; }
.feat { display:flex; align-items:center; gap:.6rem; font-size:.875rem; line-height:1.3; color:var(--ink); }
.feat + .feat { margin-top:.65rem; }
.feat svg { flex:none; width:1.15rem; height:1.15rem; }
.feat .ic-yes { color:var(--signal); }
.feat .ic-no  { color:var(--muted-2); }
.feat.is-off { color:var(--muted-2); }
.price-card-pop .feat { color:var(--bone-2); }
.price-card-pop .feat.is-off { color:#8A8073; }

/* ---------- FAQ ---------- */
.faq { padding: 0; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
  padding:1.25rem 1.5rem; font-weight:700; color:var(--ink); list-style:none; }
.faq-q::-webkit-details-marker { display:none; }
.faq-icon { font-size:1.25rem; color:var(--ember); transition:transform .2s; line-height:1; }
.faq[open] .faq-q .faq-icon { transform:rotate(45deg); }
.faq-a { padding:0 1.5rem 1.25rem; font-size:.925rem; line-height:1.6; color:var(--muted); }
.faq-a a { color: var(--ember-600); text-decoration: underline; }

/* ---------- Footer ---------- */
.footer-h { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8A8073; }
.footer-list { margin-top: .9rem; display: flex; flex-direction: column; gap: .55rem; font-size: .9rem; }
.footer-list a { color: #B9B1A4; transition: color .15s; }
.footer-list a:hover { color: var(--ember); }

/* ---------- Misc ---------- */
.code-pill {
  background: var(--ember-tint); color: var(--ember-ink);
  padding: .05rem .35rem; border-radius: .35rem; font-size: .85em; font-weight: 600;
}

/* ---------- Hero timer bar + countdown cells ---------- */
.pulse-bar {
  background: var(--ember); /* default; JS overrides per style */
  transition: background .3s, color .3s, box-shadow .3s, text-shadow .3s;
}
.pulse-bar.is-pulsing { animation: barPulse 2.2s ease-in-out infinite; }

.js-countdown { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.js-countdown .seg {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 2.2rem; padding: .2rem .4rem; border-radius: 6px;
  background: rgba(0,0,0,.18);
  line-height: 1;
}
.js-countdown .seg b { font-size: .98rem; font-weight: 700; }
.js-countdown .seg span { font-size: .55rem; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }
.js-countdown .sep { opacity: .45; font-weight: 700; }

/* ---------- Style-switcher chips ---------- */
.style-chip {
  border-radius: 99px; border: 1px solid var(--line); background: var(--canvas-raised);
  padding: .3rem .8rem; font-size: .78rem; font-weight: 600; color: var(--ink-700);
  cursor: pointer; transition: all .15s;
}
.style-chip:hover { border-color: var(--ember); color: var(--ember-600); }
.style-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Attribution chart draw-on-reveal ---------- */
.chart-reveal { -webkit-transform-box: fill-box; transform-box: fill-box; transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible .chart-reveal { transform: scaleX(1); }

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pulse-bar.is-pulsing { animation: none; }
  .chart-reveal { transform: none; transition: none; }
}

/* ---------- Keyframes ---------- */
@keyframes barPulse { 0%,100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: inset 0 0 50px 0 rgba(255,255,255,.10); } }