/* Attention Genie — attentiongenie.com
   Built on the Claude Design brand system: two-ink riso press on newsprint.
   Everything is square. No shadows. No blur. No gradients. Flatness is the brand. */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&family=Karla:ital,wght@0,400..700;1,400..600&display=swap');

:root {
  /* Base inks */
  --ag-paper: oklch(0.965 0.024 92);
  --ag-paper-2: oklch(0.99 0.014 92);
  --ag-blue: oklch(0.45 0.24 265);
  --ag-blue-ink: oklch(0.3 0.2 265);
  --ag-blue-ink-2: oklch(0.35 0.2 265);
  --ag-blue-soft: oklch(0.38 0.14 265);
  --ag-blue-deep: oklch(0.25 0.16 265);
  --ag-orange: oklch(0.74 0.21 48);
  --ag-orange-ink: oklch(0.55 0.19 45);

  --ag-blue-45: oklch(0.45 0.24 265 / 0.45);
  --ag-blue-50: oklch(0.45 0.24 265 / 0.5);
  --ag-paper-55: oklch(0.965 0.024 92 / 0.55);
  --ag-paper-30: oklch(0.965 0.024 92 / 0.3);

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-ui: 'Space Mono', ui-monospace, monospace;
  --font-body: 'Karla', system-ui, sans-serif;

  --display-hero: clamp(40px, 6.2vw, 68px);
  --display-hero-lh: 0.94;
  --display-hero-ls: -0.045em;
  --display-1: clamp(26px, 3.4vw, 34px);
  --display-1-ls: -0.04em;
  --display-2: clamp(24px, 3vw, 30px);
  --display-3: 20px;
  --display-3-ls: -0.03em;
  --price: clamp(40px, 5vw, 52px);
  --price-ls: -0.05em;

  --label: 12px;
  --label-ls: 0.16em;
  --label-tight: 11.5px;
  --label-ls-tight: 0.1em;
  --eyebrow: 16px;
  --eyebrow-ls: 0.02em;

  --body: 15.5px;
  --body-lh: 1.4;
  --body-lg: 17px;
  --body-lg-lh: 1.6;

  --space-1: 6px; --space-2: 10px; --space-3: 16px; --space-4: 20px;
  --space-5: 24px; --space-6: 26px; --space-7: 44px; --space-8: 46px; --space-9: 54px;
  --gutter-page: 44px;
  --gap-cards: 16px;
  --gap-chips: 6px;
  --band-y: 46px;

  --border-heavy: 3px;
  --border-medium: 2px;
  --border-header: 4px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  background: var(--ag-paper);
  color: var(--ag-blue-ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1100px; margin: 0 auto; }
.band { padding: var(--band-y) var(--gutter-page); }
.band-blue { background: var(--ag-blue); color: var(--ag-paper); }
.band-orange { background: var(--ag-orange); color: var(--ag-blue-deep); }

.display { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; }
.hero-h { margin: 0; font-size: var(--display-hero); line-height: var(--display-hero-lh); letter-spacing: var(--display-hero-ls); color: var(--ag-blue); max-width: 12ch; }
.h2 { margin: 0; font-size: var(--display-1); letter-spacing: var(--display-1-ls); line-height: 1; }
.h3 { font-size: var(--display-2); letter-spacing: -0.04em; line-height: 0.95; }
.card-t { font-size: var(--display-3); letter-spacing: var(--display-3-ls); }
.price { font-size: var(--price); line-height: 0.9; letter-spacing: var(--price-ls); }

.ui { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; }
.label { font-size: var(--label); letter-spacing: var(--label-ls); }
.meta { font-size: var(--label-tight); letter-spacing: 0.06em; }
.eyebrow { margin: 0; font-size: var(--eyebrow); letter-spacing: var(--eyebrow-ls); color: var(--ag-blue-ink-2); }

.body { font-size: var(--body); line-height: var(--body-lh); }
.body-lg { font-size: var(--body-lg); line-height: var(--body-lg-lh); }

.section-label { color: var(--ag-blue); display: block; margin-bottom: var(--space-4); }
.band-blue .section-label { color: var(--ag-paper); }

/* Buttons */
.btn {
  display: inline-block; padding: 12px 16px; border-radius: 0; text-align: center;
  border: none; cursor: pointer; font-family: var(--font-ui); font-weight: 700;
  text-transform: uppercase; font-size: var(--label-tight); letter-spacing: 0.06em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--ag-orange); color: var(--ag-blue-deep); }
.btn-primary:hover { background: var(--ag-blue); color: var(--ag-paper); }
.btn-outline { background: transparent; border: var(--border-medium) solid var(--ag-blue); color: var(--ag-blue); }
.btn-outline:hover { background: var(--ag-blue); color: var(--ag-paper); }
.btn-quiet { background: transparent; border: var(--border-medium) solid var(--ag-blue-50); color: var(--ag-blue-soft); }
.btn-quiet:hover { border-color: var(--ag-blue); color: var(--ag-blue); }
.btn-on-blue { background: var(--ag-orange); color: var(--ag-blue-deep); }
.btn-on-blue:hover { background: var(--ag-paper); color: var(--ag-blue); }
.btn-blue { background: var(--ag-blue); color: var(--ag-paper); }
.btn-blue:hover { background: var(--ag-orange); color: var(--ag-blue-deep); }
.btn-lg { padding: 16px 26px; font-size: 13px; letter-spacing: 0.05em; }
.btn[disabled] { opacity: 0.55; cursor: wait; }

/* Header */
header.top {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 20px var(--gutter-page);
  border-bottom: var(--border-header) solid var(--ag-blue);
  position: relative; z-index: 5;
}
.wordmark { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ag-blue); }
.top-cta { margin-left: auto; }

/* Hero */
.hero { position: relative; padding: var(--space-9) var(--gutter-page) 18px; }
.disc { position: absolute; display: block; border-radius: 50%; mix-blend-mode: multiply; will-change: transform; pointer-events: none; }
.hero-sub { padding: var(--space-4) var(--gutter-page) var(--space-8); max-width: 560px; }
.hero-sub .body-lg { margin: var(--space-3) 0 0; }

/* Pain columns */
.pain-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cards); }
.pain { position: relative; border: var(--border-heavy) solid var(--ag-blue); padding: 22px 20px 24px; display: flex; flex-direction: column; gap: var(--space-2); background: var(--ag-paper-2); }

/* The red paintbrush slash — swiped across each pain box as you scroll.
   Layered strokes (fat main + two bristles) read as one brush mark;
   pathLength=1 normalizes the dash so JS can drive stroke-dashoffset 1 → 0.
   No vector-effect here — non-scaling-stroke breaks the pathLength dash math. */
.slash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; overflow: visible; }
.slash path { fill: none; stroke: oklch(0.55 0.22 27); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.slash .stroke-main { stroke-width: 5.5; opacity: 0.9; }
.slash .bristle { stroke-width: 1.7; opacity: 0.65; }
.slash .bristle.b2 { stroke-width: 1.1; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .slash path { stroke-dashoffset: 0 !important; }
}
.pain-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.pain-list li { font-size: var(--body); line-height: var(--body-lh); padding-left: 18px; position: relative; }
.pain-list li::before { content: "\2715"; position: absolute; left: 0; top: 1px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--ag-orange-ink); }

/* Steps band */
.steps-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.steps { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--gap-cards); align-items: stretch; }
.step-you { background: var(--ag-orange); color: var(--ag-blue-deep); padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 9px; }
.step-genie { border: var(--border-heavy) solid var(--ag-paper); padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-chips); }
.chip { padding: 5px 10px; border: var(--border-medium) solid var(--ag-paper); font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

/* Proof */
.ig-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-cards); margin-top: var(--space-5); align-items: start; }
.ig-card { border: var(--border-heavy) solid var(--ag-blue); background: var(--ag-paper-2); overflow: hidden; min-height: 420px; }
.ig-card .instagram-media { margin: 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.ig-card iframe { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.ph {
  border: var(--border-heavy) solid var(--ag-blue);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, var(--ag-blue-45) 14px 15px),
    var(--ag-paper-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  position: relative;
}
.ph-sq { aspect-ratio: 1; }
.ph-tall { aspect-ratio: 4 / 5; }
.ph-inner { background: var(--ag-paper); border: var(--border-medium) solid var(--ag-blue); padding: 8px 12px; margin: 12px; }
.proof-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-7); margin-top: var(--space-6); align-items: center; }
.proof-quote { border-left: var(--border-heavy) solid var(--ag-orange); padding-left: var(--space-5); }
.quote-big { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.6vw, 31px); line-height: 1.4; color: var(--ag-blue-ink); }

/* Hero stat line */
.hero-stat {
  margin: var(--space-4) 0 0; display: inline-block;
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.05em; line-height: 1.5;
  color: var(--ag-blue-deep); background: var(--ag-orange); padding: 8px 12px;
}

/* Forms */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.1em; }
.field input {
  font-family: var(--font-ui); font-size: 14px; padding: 12px 12px;
  border: var(--border-medium) solid var(--ag-blue); background: var(--ag-paper-2);
  color: var(--ag-blue-ink); border-radius: 0; width: 100%;
}
.field input:focus { outline: var(--border-medium) solid var(--ag-orange); outline-offset: 1px; }
.band-blue .field label { color: var(--ag-paper); }
.band-blue .field input { border-color: var(--ag-paper); background: transparent; color: var(--ag-paper); }
.band-blue .field input::placeholder { color: var(--ag-paper-55); }
.band-blue .field input:focus { outline-color: var(--ag-orange); }

.form-msg { font-family: var(--font-ui); font-size: 13px; line-height: 1.45; padding: 12px 14px; border: var(--border-medium) solid; display: none; }
.form-msg.show { display: block; }
.form-msg.ok { border-color: var(--ag-orange); color: var(--ag-blue-deep); background: var(--ag-orange); }
.form-msg.err { border-color: var(--ag-orange-ink); color: var(--ag-orange-ink); background: transparent; }
.band-blue .form-msg.err { color: var(--ag-paper); border-color: var(--ag-orange); background: transparent; }

/* Own it forever */
.own-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: center; }
.own-chips { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.own-chip {
  position: relative; overflow: hidden;
  display: inline-block; padding: 10px 16px;
  border: var(--border-heavy) solid var(--ag-blue-deep); color: var(--ag-blue-deep);
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.08em;
}
/* Each chip slowly fills like ink, holds, drains, and loops — staggered down the list. */
.own-chip::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--ag-blue-deep);
  transform: scaleX(0); transform-origin: left;
  animation: chip-fill 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.own-chip span { position: relative; z-index: 1; animation: chip-text 9s ease infinite; }
.own-chip:nth-child(2)::before, .own-chip:nth-child(2) span { animation-delay: 1.1s; }
.own-chip:nth-child(3)::before, .own-chip:nth-child(3) span { animation-delay: 2.2s; }
@keyframes chip-fill {
  0% { transform: scaleX(0); transform-origin: left; }
  22% { transform: scaleX(1); transform-origin: left; }
  62% { transform: scaleX(1); transform-origin: right; }
  78% { transform: scaleX(0); transform-origin: right; }
  100% { transform: scaleX(0); }
}
@keyframes chip-text {
  0%, 14% { color: var(--ag-blue-deep); }
  22%, 62% { color: var(--ag-orange); }
  74%, 100% { color: var(--ag-blue-deep); }
}
@media (prefers-reduced-motion: reduce) {
  .own-chip::before { animation: none; }
  .own-chip span { animation: none; }
}

/* Concierge strip */
.concierge-strip {
  border: var(--border-heavy) solid var(--ag-blue); background: var(--ag-paper-2);
  padding: 20px 22px; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
@media (max-width: 860px) {
  .concierge-strip a { margin-left: 0 !important; }
}

/* Pilot */
.pilot-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; }
.pilot-form { border: var(--border-heavy) solid var(--ag-paper); padding: 24px 22px; display: flex; flex-direction: column; gap: var(--space-3); }
.pilot-facts { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.fact { display: flex; gap: var(--space-3); align-items: baseline; }
.fact .ui { white-space: nowrap; }
.course-inclusions { border-top: var(--border-heavy) solid currentColor; margin-top: 12px; padding-top: 20px; }
.course-inclusions h3 { margin: 0; }
.course-list { padding-left: 22px; margin: 16px 0; }
.course-list li { margin: 0 0 12px; line-height: 1.5; }
.course-inclusions p { margin: 0; line-height: 1.5; }
.rule-dash { border: none; border-top: var(--border-heavy) dashed var(--ag-paper-55); margin: var(--space-4) 0; }

/* List signup */
.list-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; }
.list-form { border: var(--border-heavy) solid var(--ag-blue); padding: 24px 22px; display: flex; flex-direction: column; gap: var(--space-3); background: var(--ag-paper-2); }

/* Need / save */
.ns-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cards); }
.ns { padding: 24px 22px; display: flex; flex-direction: column; gap: var(--space-3); }
.ns-need { border: var(--border-heavy) solid var(--ag-blue); }
.ns-save { background: var(--ag-blue); color: var(--ag-paper); }
.ns-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.ns-list li { font-size: var(--body); line-height: var(--body-lh); padding-left: 20px; position: relative; }
.ns-need .ns-list li::before { content: "\2192"; position: absolute; left: 0; font-family: var(--font-ui); font-weight: 700; color: var(--ag-orange-ink); }
.ns-save .ns-list li::before { content: "\2713"; position: absolute; left: 0; font-family: var(--font-ui); font-weight: 700; color: var(--ag-orange); }
.ns-list .sub { display: block; font-size: 13px; color: var(--ag-blue-soft); margin-top: 2px; }
.ns-save .ns-list .sub { color: var(--ag-paper-55); }

/* Advanced */
.adv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cards); margin-top: var(--space-5); }
.adv { border: var(--border-heavy) solid var(--ag-blue); padding: 22px 20px 24px; display: flex; flex-direction: column; gap: var(--space-3); background: var(--ag-paper-2); }
.adv .ph { margin-top: auto; }
.adv-video { display: flex; justify-content: center; margin-top: auto; }
.adv-video video { max-height: 480px; max-width: 100%; border: var(--border-heavy) solid var(--ag-blue); background: var(--ag-blue-deep); display: block; }
.adv-note { margin-top: var(--space-5); max-width: 60ch; }

/* FAQ */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-cards); }
.faq-item { border: var(--border-heavy) solid var(--ag-blue); background: var(--ag-paper-2); padding: 20px 20px 22px; }
.faq-q { color: var(--ag-blue); margin: 0 0 10px; font-weight: 400; }
.faq-a { margin: 0; color: var(--ag-blue-ink); }
@media (max-width: 860px) {
  .faq-list { grid-template-columns: 1fr; }
}

/* Closer */
.closer { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-8) var(--gutter-page); }
.closer-cta { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

footer.bottom {
  border-top: var(--border-header) solid var(--ag-blue);
  padding: 20px var(--gutter-page) 28px;
  display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap;
  color: var(--ag-blue-soft);
}
footer.bottom .spacer { margin-left: auto; }

/* Motion — subtle scroll reveals. Sections drift up as they enter. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.14s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.23s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .disc { transform: none !important; }
}

@media (max-width: 860px) {
  :root { --gutter-page: 20px; }
  .disc { opacity: 0.35; }
  .hero-h { max-width: 100%; }
  .pain-cols, .steps, .ns-cols, .adv-cols, .pilot-grid, .list-grid, .proof-cols, .own-grid { grid-template-columns: 1fr; }
  .ig-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .ig-card { flex: 0 0 72vw; scroll-snap-align: start; }
  .closer { flex-direction: column; align-items: flex-start; }
  .closer-cta { margin-left: 0; }
  .top-cta .btn { padding: 10px 12px; }
}

.adv-cols.adv-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }