/* Amplify V4 — the sheet, section markers, panel family, chapters 2–7, closing.
 * One column the whole page sits on (hairlines at its edges), horizontal rules
 * between sections, a small family of panels with one radius. Dark is used as
 * panels inside the sheet, and once as the closing bookend. */

/* ---- the sheet ---- */
.sheet { position: relative; width: 100%; padding-inline: var(--pad); }

.chapter { position: relative; padding-block: var(--section-pad); }

.chapter.hero { padding-top: clamp(1.5rem, 3.5vh, 3rem); }

/* seams between chapters: three hairlines that part as the boundary crosses the viewport */
.seam { position: relative; height: 1px; margin-inline: calc(-1 * var(--pad)); }
.seam i { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); display: block; }
.seam i:nth-child(1) { transform: translateY(-5px); opacity: 0.55; }
.seam i:nth-child(3) { transform: translateY(5px); opacity: 0.55; }

/* ghost word: the section's key word in outlined serif, drifting behind the headline */
.ghost {
  position: absolute; right: -1%; top: -0.32em; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(6rem, 15vw, 17rem); line-height: 0.9; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(10, 10, 12, 0.24);
  white-space: nowrap;
}
.chapter { overflow: hidden; }
.chapter > *:not(.ghost) { position: relative; z-index: 1; }
.chapter.hero { overflow: visible; }

/* masked line reveals for section headlines */
.h2[data-reveal] { opacity: 1; transform: none; transition: none; }
.h2 > span { overflow: hidden; padding-bottom: var(--descender-room); margin-bottom: calc(-1 * var(--descender-room)); }
.h2 .ln { display: block; transform: translateY(112%); transition: transform 760ms var(--ease-out); }
.h2 > span:nth-child(2) .ln { transition-delay: 90ms; }
.h2.is-in .ln { transform: none; }
html.no-motion .h2 .ln { transform: none; transition: none; }

/* recurring section marker: the mark + the section's name, centered */
.marker {
  display: flex; justify-content: center; margin: 0 0 clamp(1.5rem, 3.5vh, 2.5rem);
}
.marker span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid transparent; border-radius: 999px;
  padding: 0.38rem 0.85rem 0.38rem 0.55rem;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
}
.marker img { width: 0.95rem; height: auto; }

/* two-tone headline: the first line sets up, the second lands */
.h2 {
  font-family: var(--display); font-size: var(--t-h2); font-weight: 600;
  letter-spacing: -0.028em; line-height: 1.02; font-variation-settings: "wdth" 108; text-wrap: balance;
}
.h2 .muted { color: var(--ink-2); display: block; }
.h2 .land { display: block; }
.h3 {
  font-family: var(--display); font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15; font-variation-settings: "wdth" 106;
}
.body { font-size: var(--t-body); line-height: 1.55; max-width: 58ch; }
.body-2 { font-size: var(--t-body-sm); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.serif-line { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.012em; }

.grid12 { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; }
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist > li { padding-block: 0.85rem; border-top: 1px solid var(--rule); }
.rlist > li:last-child { border-bottom: 1px solid var(--rule); }
.rlist .h3 { margin-bottom: 0.25rem; font-size: 1.05rem; }

/* ---- panel family ---- */
.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel);
  padding: clamp(1.4rem, 2.2vw, 2rem);
}
.panel--tint { background: var(--cream-2); border-color: transparent; }
.panel--coral { background: var(--tint-coral); border-color: transparent; }
.panel--violet { background: var(--tint-violet); border-color: transparent; }
.panel--coral .meta, .panel--violet .meta { color: var(--ink-2); }
.panel--dark { background: var(--ink); color: var(--cream); border-color: transparent; }
.panel--dark .body-2 { color: rgba(244,239,232,0.72); }
.panel--dark .meta { color: rgba(244,239,232,0.6); }
.panel--dark .meta b { color: var(--cream); }
.panel--dark .rlist > li { border-color: rgba(244,239,232,0.16); }
.panel--dark .btn-solid { background: var(--cream); color: var(--ink); }
.panel--dark .btn-solid:hover { background: #fff; }
.panel--dark ::selection { background: var(--cream); color: var(--ink); }
.panel .h3 + .body-2, .panel .h3 + .body { margin-top: 0.5rem; }
.panel-foot { margin-top: auto; padding-top: 1.25rem; }
.panel--flex { display: flex; flex-direction: column; }

/* ---- abstract media marks: the recurring source / cut / post / account grammar used outside the hero ---- */
.source-mark { position: relative; aspect-ratio: 2.39 / 1; border-radius: 8px; background: var(--ink); color: var(--cream); overflow: hidden; display: flex; align-items: flex-start; padding: 0.9rem 1rem; font-size: 0.95rem; font-weight: 500; }
.source-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); }
.cut-mark { display: block; aspect-ratio: 9 / 16; border-radius: 6px; background: var(--tint-coral); border: 1px solid var(--magenta); position: relative; }
.cut-mark::before, .cut-mark::after { content: ""; position: absolute; left: 12%; height: 3px; border-radius: 2px; background: var(--magenta); opacity: 0.55; }
.cut-mark::before { bottom: 18%; width: 44%; }
.cut-mark::after { bottom: 10%; width: 28%; }
.post-mark { display: block; aspect-ratio: 9 / 16; border-radius: 5px; background: var(--surface); border: 1px solid var(--rule-strong); border-top: 3px solid var(--ink); }
.post-mark--reels { border-top-color: var(--reels); }
.post-mark--shorts { border-top-color: var(--shorts); }
.account-row { display: flex; gap: 0.45rem; }
.account-row i { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1px solid var(--rule-strong); }

/* ---- 2. what Amplify does ---- */
.what-head { grid-column: 1 / 7; }
.what-side { grid-column: 8 / -1; }
.what-side .body { margin-bottom: 1.25rem; }
.what-side .meta { display: block; margin-bottom: 0.5rem; }
.what-tiles { grid-column: 1 / -1; margin-top: 1rem; display: grid; grid-template-columns: 1.15fr 1fr 1fr; column-gap: var(--gutter); row-gap: var(--gutter); }
.what-tiles .panel { padding-block: 1.3rem; }
.what-tiles .panel:first-child { background: var(--tint-coral); border-color: transparent; }

/* ---- 3. how a campaign works ---- */
.how-head { grid-column: 1 / 8; }
.how-intro { grid-column: 8 / -1; align-self: end; font-size: var(--t-body); }

/* the process: media left, one step at a time right, numbered rail far right.
   It cycles on its own while in view (paused on hover/focus, off under reduced motion). */

.brief-sheet { width: min(100%, 34rem); background: var(--surface); color: var(--ink); border-radius: 14px; padding: 1.4rem 1.6rem 1.2rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); }
.brief-sheet > .meta { color: var(--ink-2); margin-bottom: 0.8rem; }
.brief-sheet ul { list-style: none; margin: 0; padding: 0; }
.brief-sheet li { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.6rem; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.brief-sheet li span { color: var(--ink-2); }
.brief-sheet li b { font-weight: 500; text-align: right; }

/* time-to-next indicator: a hairline that fills while the step is on screen */

/* How a campaign works: four cards, each a title, one line, and a diagram.
 * Pattern copied from the reference Levi brought (Clipping Culture): the
 * diagram carries the explanation so the copy can stay short. */
.how-cards { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 1rem; }
.hcard { position: relative; display: flex; flex-direction: column; min-height: 26rem; padding: 1.75rem 1.75rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-panel); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-object); scroll-margin-top: calc(var(--nav-h) + 2rem); }
.hcard-num { position: absolute; top: 1.6rem; right: 1.75rem; color: var(--coral-text); font-weight: 500; }
.hcard-title { font-size: clamp(1.4rem, 1.9vw, 1.9rem); letter-spacing: -0.02em; padding-right: 3rem; }
.hcard-sub { margin-top: .5rem; max-width: 42ch; color: var(--ink-2); font-size: clamp(.98rem, 1.05vw, 1.1rem); line-height: 1.5; }
.hcard-viz { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 1.5rem; }
.viz-cap { margin-top: .9rem; text-align: center; font: .78rem var(--mono); color: var(--ink-2); }
.viz-label { display: block; font: .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .8rem; }
.viz-box { padding: 1rem 1.1rem 1.1rem; background: var(--cream); border: 1px solid var(--rule); border-radius: 14px; }
.viz-chips, .viz-leaves { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.viz-chips li, .viz-leaves li, .viz-root { font: 500 .84rem/1 var(--sans); padding: .55rem .85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); }
.viz-doc ul { list-style: none; margin: 0; padding: 0; }
.viz-doc li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--rule); font-size: .82rem; }
.viz-doc li span { color: var(--ink-2); }
.viz-doc li b { font-weight: 500; text-align: right; }
.viz-tree { display: flex; flex-direction: column; align-items: center; }
.viz-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.viz-tiles li { position: relative; display: flex; align-items: flex-end; aspect-ratio: 2 / 1; padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--rule); font: 500 .84rem/1.2 var(--sans); background: linear-gradient(140deg, color-mix(in srgb, var(--violet) 16%, var(--cream)), var(--cream) 70%); }
.viz-tiles li:nth-child(3n+2) { background: linear-gradient(140deg, color-mix(in srgb, var(--magenta) 16%, var(--cream)), var(--cream) 70%); }
.viz-tiles li:nth-child(3n) { background: linear-gradient(140deg, color-mix(in srgb, var(--coral) 18%, var(--cream)), var(--cream) 70%); }
.viz-tiles li::before { content: ""; position: absolute; top: .6rem; right: .6rem; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); }
.viz-tiles li::after { content: ""; position: absolute; top: calc(.6rem + 5px); right: calc(.6rem + 6px); width: 5px; height: 8px; border: solid var(--cream); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.viz-tile-out { margin-top: .6rem; padding: .7rem .8rem; border: 1px dashed var(--rule-strong); border-radius: 12px; text-align: center; font-size: .84rem; color: var(--ink-2); }
@media (max-width: 520px) { .viz-tiles { grid-template-columns: 1fr 1fr; } }
.viz-root { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.viz-lines { width: min(100%, 22rem); height: 40px; display: block; fill: none; stroke: var(--rule-strong); stroke-width: 1.2; }
.viz-leaves { justify-content: center; }
.viz-tree .viz-root, .viz-leaves--verdict li { font-size: clamp(1rem, 1.2vw, 1.15rem); padding: 1rem 1.6rem; }
.viz-tree .viz-lines { width: min(100%, 30rem); height: 76px; }
.viz-leaves--verdict { gap: .8rem; }
.viz-tree .viz-cap { font-size: .9rem; margin-top: 1.4rem; }
.viz-leaves--verdict li:first-child { font-weight: 600; border-color: var(--ink); }
.viz-leaves--verdict li:last-child { color: var(--ink-2); border-style: dashed; }
.viz-rows { list-style: none; margin: 0; padding: 0; }
.viz-rows li { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .8rem; padding: .45rem 0; border-top: 1px solid var(--rule); font: 500 .84rem var(--sans); }
.viz-rows li:last-child { border-bottom: 1px solid var(--rule); }
.viz-rows--report li { grid-template-columns: 7rem 1fr; }
.viz-bar { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.viz-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); border-radius: inherit; background: var(--ink); }
.viz-rows li:nth-child(2) .viz-bar::after { background: var(--magenta); }
.viz-rows li:nth-child(3) .viz-bar::after { background: var(--coral); }
.viz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .9rem; }
.viz-pair > div { padding: .85rem 1rem; border-radius: 12px; background: var(--cream); border: 1px solid var(--rule); }
.viz-pair b { display: block; font-size: .86rem; font-weight: 600; }
.viz-pair span { display: block; margin-top: .15rem; font-size: .76rem; color: var(--ink-2); }
.viz-pair--on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--cream); }
.viz-pair--on span { color: var(--cream-2); }

.receive { grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--gutter); row-gap: 1.5rem; margin-top: 1rem; }
.receive-head .body-2 { margin-top: 0.5rem; }
.receive-head .btn { margin-top: 1.5rem; }
.receive-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.receive-list li { padding-block: 0.9rem; border-top: 1px solid rgba(10,10,12,0.12); }
.receive-list .h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }

/* ---- 4. paid social vs clipping ---- */
.cmp-line { grid-column: 1 / 9; }
.cmp-line .serif-line { font-size: clamp(2.2rem, 4vw, 4.3rem); max-width: 24ch; }
.cmp-line .serif-line .land { display: block; padding-left: clamp(1.5rem, 6vw, 6rem); color: var(--magenta); }
.cmp-intro { grid-column: 9 / -1; align-self: end; }
.cmp-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: 1.5rem; }
.cmp-budget {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.cmp-budget .num {
  color: var(--ink);
  font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 118;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem); line-height: 0.95; letter-spacing: -0.04em; font-feature-settings: "tnum";
}
.cmp-col + .cmp-col { border-left: 1px solid var(--rule); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); }
.cmp-col--clip { position: relative; }
.cmp-col--clip::before { content: ""; position: absolute; left: clamp(1.25rem, 2.5vw, 2.5rem); right: 0; top: -1.5rem; height: 3px; background: var(--grad); border-radius: 2px; }
.cmp-col--clip .count { color: var(--magenta); }
.cmp-col--paid .count { color: var(--ink-2); }
.cmp-col .h3 { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.cmp-col .h3 .meta { font-weight: 400; }
.count {
  display: block; margin-top: 1.1rem;
  font-family: var(--display); font-weight: 600; font-variation-settings: "wdth" 112;
  font-size: clamp(2.6rem, 4.8vw, 5.2rem); line-height: 0.95; letter-spacing: -0.035em;
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.count-unit { display: block; font-family: var(--sans); font-size: 1rem; font-weight: 400; margin-top: 0.45rem; letter-spacing: 0; font-variation-settings: "wdth" 100; }
.count-range { margin-top: 0.9rem; }
.count-math { margin-top: 0.35rem; }
.cmp-col .rlist { margin-top: 1.1rem; }
.cmp-col .rlist > li { padding-block: 0.6rem; }
.cmp-col .rlist > li:last-child { border-bottom: 0; }
.cmp-quals { grid-column: 1 / -1; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1.2fr 1fr; column-gap: var(--gutter); row-gap: 0.75rem; }
.cmp-quals .body { font-size: var(--t-small); }
.cmp-quals .body-2 { max-width: none; }

.prec { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gutter); row-gap: 1.25rem; }
.prec .serif-line { font-size: clamp(1.9rem, 3vw, 3.2rem); max-width: 14ch; }
.prec .meta { margin-top: 1rem; }
.prec-figs { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.prec-fig .meta { display: block; margin: 0 0 0.6rem; }
.prec-fig .num { font-family: var(--display); font-weight: 600; font-variation-settings: "wdth" 110; font-size: clamp(1.7rem, 2.4vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; display: block; }
.prec-fig .num-label { display: block; color: var(--ink-2); font-size: var(--t-small); margin-top: 0.25rem; margin-bottom: 0.8rem; }
.prec-body .body-2 { margin-top: 1rem; }
.prec-attrib { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--rule); }
.cmp-cta { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* ---- 5. verticals + company ---- */
.vert-head { grid-column: 1 / 9; }
.vert-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: var(--gutter); }
.vert-pair .panel { min-height: 16rem; }
.vert-pair .h3 { font-size: clamp(1.5rem, 2.1vw, 2.2rem); }
.vert-pair .body { margin-top: 0.75rem; max-width: 36ch; }
.company { grid-column: 1 / -1; margin-top: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1rem; }
.company .h3 { grid-column: 1 / 6; font-size: clamp(1.3rem, 1.8vw, 1.8rem); max-width: 16ch; }
.company .body { grid-column: 6 / 11; }
.company .meta { grid-column: 11 / -1; text-align: right; }

/* ---- 6. FAQ ---- */
.faq-head { grid-column: 1 / 8; }
/* FAQ, 2026-09-22: one pattern on all six FAQ sections (homepage plus five interior pages). Every answer is open,
   rule-separated, in two balanced columns; no accordion. Replaces the homepage panel grid and the interior
   details/summary accordions. Under 860px it stacks to one column. */
.faq-list { grid-column: 1 / -1; columns: 2; column-gap: clamp(2.5rem, 5vw, 5rem); border-top: 1px solid var(--rule-strong); }
.faq-item { break-inside: avoid; padding: 1.2rem 0 1.45rem; border-bottom: 1px solid var(--rule-strong); }
html .faq-list h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.faq-item p { color: var(--ink-2); max-width: var(--measure); }
.faq-item .link-plain { display: inline-block; margin-top: .8rem; }

/* ---- 7. book a call (Calendly embedded) ---- */
.book-head { text-align: center; max-width: 46rem; margin-inline: auto; }
.book-head .h2 .muted, .book-head .h2 .land { display: block; }
.book .ghost { right: auto; left: -1%; }
.book-head .body-2 { margin: 1rem auto 0; max-width: 52ch; }
.book-panel { margin: clamp(1.75rem, 4vh, 2.75rem) auto 0; max-width: 72rem; padding: clamp(0.75rem, 1.5vw, 1.5rem); overflow: hidden; }
.calendly-inline-widget { border-radius: 12px; overflow: hidden; }
.book-fallback { text-align: center; margin-top: 0.75rem; max-width: none; }
.book-lists { margin-top: clamp(1.75rem, 4vh, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); max-width: 60rem; margin-inline: auto; }
.book-lists .h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.book-lists ul { list-style: none; margin: 0; padding: 0; }
.book-lists li { padding-block: 0.5rem; border-top: 1px solid var(--rule); font-size: var(--t-small); }
.book-lists li:last-child { border-bottom: 1px solid var(--rule); }

/* ---- closing + footer (dark, full-bleed bookend) ---- */
.closing { background: var(--ink); color: var(--cream); padding-top: var(--section-pad); position: relative; overflow: hidden; }
.closing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 78% 45%, var(--glow-violet) 0%, transparent 62%), radial-gradient(40% 50% at 18% 80%, var(--glow-coral) 0%, transparent 60%);
  opacity: 0.55;
}
.closing .inner { position: relative; }
.close-copy .h2::after { content: ""; display: block; width: 3.5rem; height: 3px; background: var(--grad); border-radius: 2px; margin-top: 1.25rem; }
.closing .inner { width: 100%; padding-inline: var(--pad); }
.closing .meta { color: rgba(244,239,232,0.62); }
.closing .meta b { color: var(--cream); }
.closing .body-2 { color: rgba(244,239,232,0.72); }
.closing .btn-solid { background: var(--cream); color: var(--ink); }
.closing .btn-solid:hover { background: #fff; }
.closing .link-plain { text-decoration-color: rgba(244,239,232,0.4); }
.closing .link-plain:hover { text-decoration-color: var(--cream); }
.closing ::selection { background: var(--cream); color: var(--ink); }
.close-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; }
.close-copy { grid-column: 1 / 8; }
.close-copy .h2 { font-size: var(--t-h2); font-variation-settings: "wdth" 116; letter-spacing: -0.035em; max-width: 14ch; }
.close-copy .body { margin-top: 1.25rem; max-width: 36ch; color: rgba(244,239,232,0.86); }
.close-actions { margin-top: 1.75rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.close-links { margin-top: 2rem; display: flex; gap: 1.75rem; flex-wrap: wrap; }
.close-lists { grid-column: 6 / 9; display: grid; row-gap: 1.5rem; align-content: start; }
.close-lists .h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.close-lists ul { list-style: none; margin: 0; padding: 0; }
.close-lists li { padding-block: 0.5rem; border-top: 1px solid rgba(244,239,232,0.16); font-size: var(--t-small); }
.close-lists li:last-child { border-bottom: 1px solid rgba(244,239,232,0.16); }
.close-echo { grid-column: 9 / -1; align-self: center; position: relative; aspect-ratio: 4 / 5; }
.echo-stack { position: absolute; inset: 0; }
.echo-card { position: absolute; width: 58%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -28px rgba(0,0,0,.9); }
.echo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.echo-card[data-slot="a"] { left: 0; top: 6%; transform: rotate(-6deg); z-index: 1; }
.echo-card[data-slot="b"] { left: 30%; top: 0; transform: rotate(3deg); z-index: 3; }
.echo-card[data-slot="c"] { left: 40%; top: 22%; transform: rotate(9deg); z-index: 2; }
/* !important because the homepage keeps html.no-motion (scroll.css kills every animation under it); scroll-polish.css does the same for its reveals. */
html.reveal-live .echo-card { animation: echo-drift 22s ease-in-out infinite alternate !important; }
html.reveal-live .echo-card[data-slot="b"] { animation-duration: 24s !important; animation-delay: -8s !important; }
html.reveal-live .echo-card[data-slot="c"] { animation-duration: 19s !important; animation-delay: -4s !important; }
@keyframes echo-drift { from { translate: 0 0; } to { translate: 0 -3%; } }
@media (prefers-reduced-motion: reduce) { .echo-card, html.reveal-live .echo-card { animation: none !important; } }
.footer {
  margin-top: clamp(3rem, 7vh, 5rem); padding-block: 1.75rem 2rem;
  border-top: 1px solid rgba(244,239,232,0.16);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1rem;
  position: relative;
}
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--grad); opacity: 0.9; }
.footer .brand { grid-column: 1 / 3; color: var(--cream); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.footer ul a { text-decoration: none; font-size: var(--t-small); border-bottom: 1px solid transparent; }
.footer ul a:hover { border-bottom-color: var(--cream); }
/* Gate 1: 44px tap floor for footer links on phones; the list gap is dropped to compensate. */
@media (max-width: 860px) {
  .footer ul { gap: 0; }
  .footer ul a, .footer .brand { display: inline-flex; align-items: center; min-height: 44px; }
}
.footer-col .meta { display: block; margin-bottom: 0.7rem; }
.footer-col:nth-of-type(1) { grid-column: 4 / 6; }
.footer-col:nth-of-type(2) { grid-column: 6 / 8; }
.footer-col:nth-of-type(3) { grid-column: 8 / 10; }
.footer-legal { grid-column: 10 / -1; text-align: right; align-self: end; }
/* 2026-10-05 (Levi): a contact line at the bottom. Takes the right-hand column on desktop; the legal block moves to its own row below. */
.footer-contact p { margin: 0 0 0.45rem; font-size: var(--t-small); color: var(--cream); opacity: .7; }
@media (min-width: 861px) {
  .footer-col.footer-contact { grid-column: 10 / -1; text-align: right; }
  .footer-legal { grid-column: 7 / -1; }
}

/* ---- reveals: markers, headlines and panel groups only ---- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
html.no-motion [data-reveal] { opacity: 1; transform: none; transition: none; }

/* ---- nav Learn panel ---- */
.nav-links button {
  font: inherit; background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 0.95rem; font-weight: 500; letter-spacing: -0.005em; padding: 0.3rem 0;
  border-bottom: 1px solid transparent; transition: border-color var(--dur-ui) var(--ease-out);
}
.nav-links button:hover, .nav-links button[aria-expanded="true"] { border-bottom-color: var(--ink); }
.learn-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); border-bottom: 1px solid var(--rule);
  padding-block: 1.25rem 1.5rem;
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.learn-panel.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.learn-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
.learn-panel li { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.learn-panel a { text-decoration: none; display: block; }
.learn-panel a > span { display: block; }
.learn-panel a .h3 { margin-bottom: 0.25rem; font-size: 1.1rem; }
.learn-panel a:hover .h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--magenta); }
.learn-panel .body-2 { max-width: 34ch; }

/* ---- tablet ---- */
@media (max-width: 1100px) and (min-width: 861px) {
  .what-tiles { grid-template-columns: 1fr 1fr; }
  
  .company .h3 { grid-column: 1 / 7; }
  .company .body { grid-column: 7 / -1; }
  .company .meta { grid-column: 1 / -1; text-align: left; }
  .close-copy { grid-column: 1 / 8; }
  .close-echo { grid-column: 8 / -1; }
}

/* ---- mobile ---- */
@media (max-width: 860px) {
  .ghost { display: none; }
  .what-head, .what-side, .how-head, .how-intro, .cmp-line, .cmp-intro, .vert-head, .faq-head { grid-column: 1 / -1; }
  .what-tiles, .vert-pair { grid-template-columns: 1fr; }
  .faq-list { columns: 1; }
  
  
  
  
  
  
  .how-cards { grid-template-columns: 1fr; }
  .hcard { min-height: 0; }
  .receive { grid-template-columns: 1fr; }
  .receive-list { grid-template-columns: 1fr; }
  .cmp-panel { grid-template-columns: 1fr; }
  .cmp-col + .cmp-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.25rem; }
  .cmp-quals { grid-template-columns: 1fr; }
  .cmp-line .serif-line .land { padding-left: 0; }
  .prec { grid-template-columns: 1fr; }
  .prec-figs { grid-template-columns: 1fr 1fr; }
  .company .h3, .company .body, .company .meta { grid-column: 1 / -1; text-align: left; }
  .close-copy, .close-echo { grid-column: 1 / -1; }
  .book-lists { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .calendly-inline-widget { height: 900px !important; }
  .close-echo { aspect-ratio: 16 / 10; } .echo-card { width: 34%; }
  .footer .brand, .footer-col, .footer-legal { grid-column: 1 / -1; text-align: left; }
}