/* Spectre Growth (copied from growth-reset-v3). Section A: five pillars, each with a schematic drawing, all standing on one economics foundation.
   Section B: proof strips, each result sitting on the screenshot it comes from. Drawings carry no data. */
.ga, .gb { padding: clamp(96px, 9vw, 150px) var(--gutter); }
.gb { padding-top: clamp(40px, 4vw, 64px); }

.g-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: end; margin-bottom: clamp(48px, 5vw, 72px); }
.g-kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); margin-bottom: 20px; }
.g-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--growth); }
.g-title { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5vw, 80px); line-height: 1; letter-spacing: -0.035em; max-width: 13ch; text-wrap: balance; }
.g-head--cases .g-title { font-size: clamp(36px, 4vw, 64px); max-width: 14ch; }
.g-intro { font-size: 17px; color: var(--ink-2); max-width: 34em; }

/* ---------- five pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pil { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; padding: 22px 20px 20px;
  background: linear-gradient(180deg, rgba(250, 250, 248, 0.045), rgba(250, 250, 248, 0.012)); box-shadow: inset 0 0 0 1px var(--rule); }
.pil::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(240px circle at var(--x, 50%) var(--y, 50%), rgba(122, 244, 208, 0.08), transparent 70%); }
.pil:hover::before { opacity: 1; }
.pil-k { display: flex; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--ink-3); margin-bottom: 14px; min-height: 2.7em; }
.pil-k span { color: var(--growth); font-variant-numeric: tabular-nums; }
.pil-h { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 10px; text-wrap: balance; }
.pil-s { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.pil .art { flex: 1; min-height: 150px; margin: 16px 0; }
.caps { display: flex; flex-wrap: wrap; gap: 6px; }
.caps li { font-size: 13px; line-height: 1.35; color: var(--ink-2); padding: 4px 10px; border-radius: 13px; box-shadow: inset 0 0 0 1px var(--rule-2); }

/* the lines from each pillar into the foundation */
.links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; height: 44px; }
.links span { position: relative; }
.links span::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--rule-2), rgba(122, 244, 208, 0.75)); }
.links span::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--growth); box-shadow: 0 0 12px rgba(122, 244, 208, 0.7); z-index: 2; }

/* the foundation */
.econ { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; border-radius: 22px; padding: clamp(28px, 3vw, 44px);
  background: radial-gradient(70% 140% at 85% 0%, rgba(122, 244, 208, 0.13), rgba(122, 244, 208, 0) 65%), linear-gradient(180deg, rgba(122, 244, 208, 0.05), rgba(250, 250, 248, 0.012));
  box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.45); }
.econ-k { font-size: 14px; color: var(--growth); margin-bottom: 12px; }
.econ-h { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.8vw, 44px); line-height: 1.05; letter-spacing: -0.03em; max-width: 16ch; margin-bottom: 22px; text-wrap: balance; }
.caps--econ li { box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.35); }
.econ .art { min-height: 0; }

/* schematic drawing pieces */
.art { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 150px; }
.ln { display: block; height: 6px; border-radius: 3px; background: rgba(250, 250, 248, 0.14); }
.w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }

.art--ads { gap: 0; }
.ad { flex: none; width: 82px; padding: 7px; border-radius: 10px; display: grid; gap: 5px; background: #141415; box-shadow: inset 0 0 0 1px var(--rule-2), 0 16px 30px -10px rgba(0, 0, 0, .6); transform: rotate(-7deg) translateX(14px); }
.ad-img { display: block; height: 46px; border-radius: 6px; background: rgba(250, 250, 248, 0.08); }
.ad .ln { height: 5px; }
.ad--b { transform: translateY(-10px); z-index: 2; box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.6), 0 16px 30px -10px rgba(0, 0, 0, .6); }
.ad--b .ad-img { background: linear-gradient(135deg, rgba(122, 244, 208, 0.25), rgba(122, 244, 208, 0.06)); }
.ad--c { transform: rotate(7deg) translateX(-14px); }

.art--phones { gap: 10px; }
.ph { flex: none; width: 50px; height: 96px; border-radius: 12px; background: #141415; box-shadow: inset 0 0 0 1px var(--rule-2); }
.ph--on { transform: translateY(-8px); box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.65), 0 0 34px -8px rgba(122, 244, 208, 0.35); }

.cart { width: min(100%, 170px); padding: 8px; border-radius: 12px; display: grid; gap: 6px; background: #141415; box-shadow: inset 0 0 0 1px var(--rule-2); }
.row { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 8px; }
.row .ln { flex: 1; }
.thumb { flex: none; width: 28px; height: 28px; border-radius: 6px; background: rgba(250, 250, 248, 0.08); }
.row--add { box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.5); background: rgba(122, 244, 208, 0.05); }
.add { flex: none; width: 22px; height: 14px; border-radius: 999px; background: var(--growth); }

/* retention: a reminder message, then the buyer coming back to the cart */
.art--msg { flex-direction: column; gap: 8px; }
.msg { width: min(100%, 150px); padding: 10px; border-radius: 12px 12px 12px 4px; display: grid; gap: 6px; background: #141415; box-shadow: inset 0 0 0 1px var(--rule-2); transform: translateX(-12px); }
.msg--back { display: flex; align-items: center; gap: 8px; border-radius: 12px 12px 4px 12px; transform: translateX(12px); box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.5); background: rgba(122, 244, 208, 0.05); }
.msg--back .ln { flex: 1; }

/* product and market: a shelf of products, one new opportunity lit */
.tiles { display: grid; grid-template-columns: repeat(3, 38px); gap: 8px; }
.tiles span { height: 38px; border-radius: 8px; background: rgba(250, 250, 248, 0.06); box-shadow: inset 0 0 0 1px var(--rule); }
.tiles .tile--new { background: rgba(122, 244, 208, 0.12); box-shadow: inset 0 0 0 1px rgba(122, 244, 208, 0.65), 0 0 28px -6px rgba(122, 244, 208, 0.45); }

.art--econ { flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 10px; }
.wf { display: grid; grid-template-columns: repeat(5, 64px); gap: 14px; height: 170px; }
.wf-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.wf-bar { position: absolute; left: 0; right: 0; bottom: 26px; top: 0; }
.wf-bar::before { content: ""; position: absolute; left: 0; right: 0; top: var(--t, 0%); height: var(--h); border-radius: 6px; background: rgba(250, 250, 248, 0.18); }
.wf-bar--cut::before { background: repeating-linear-gradient(135deg, rgba(250, 250, 248, 0.14) 0 2px, transparent 2px 7px); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.16); }
.wf-bar--keep::before { background: var(--growth); box-shadow: 0 0 40px -6px rgba(122, 244, 208, 0.55); }
.wf-l { font-size: 12px; color: var(--ink-3); text-align: center; }
.wf-l--keep { color: var(--growth); }
.art-note { font-size: 12px; color: var(--ink-3); }

/* ---------- Section B: proof strips ---------- */
.case { padding: clamp(36px, 4vw, 56px); border-radius: 24px; margin-bottom: 14px;
  background: linear-gradient(rgba(250, 250, 248, 0.035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(250, 250, 248, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
              radial-gradient(80% 60% at 50% 100%, rgba(122, 244, 208, 0.07), transparent 70%), rgba(250, 250, 248, 0.015);
  box-shadow: inset 0 0 0 1px var(--rule); }
.case-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.case-cat { font-size: 14px; color: var(--growth); margin-bottom: 8px; }
.case-brand { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-2); }
.case-story > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; padding: 10px 0; box-shadow: inset 0 1px 0 var(--rule); }
.case-story dt { font-size: 13px; color: var(--ink-3); padding-top: 2px; }
.case-story dd { font-size: 15px; color: var(--ink-3); }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.strip--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.res { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.res b { position: relative; padding-left: 14px; font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--ink-4); }
.res b::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -4px; border: 5px solid transparent; border-bottom: 7px solid var(--growth); border-top: 0; }
.frame { aspect-ratio: 3 / 4; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 13px; color: var(--ink-3);
  background: rgba(11, 11, 12, 0.7); box-shadow: inset 0 0 0 1px var(--rule-2), 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.frame span::before { content: "Screenshot to supply"; display: block; color: var(--ink-2); margin-bottom: 4px; }
.shot figcaption { font-size: 12.5px; color: var(--ink-2); text-align: center; }
.case-period { margin-top: 30px; font-size: 13px; color: var(--ink-3); }
.case-period span { display: block; color: var(--ink-2); margin-bottom: 2px; }
.case-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.case--small { margin-bottom: 0; }
.case--small .case-top { grid-template-columns: 1fr; margin-bottom: 16px; }
.case--small .case-story { margin-bottom: 28px; }

@media (max-width: 1100px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pil:last-child { grid-column: 1 / -1; }
  .pil-k { min-height: 0; }
  /* one central line stands for the connection once the pillars wrap */
  .links { grid-template-columns: 1fr; }
  .links span:not(:first-child) { display: none; }
  .econ { grid-template-columns: 1fr; gap: 28px; }
  .art--econ { align-items: flex-start; }
}
@media (max-width: 860px) {
  .g-head { grid-template-columns: 1fr; gap: 20px; }
  .g-title { font-size: 40px; }
  .g-head--cases .g-title { font-size: 36px; }
  .g-intro { font-size: 16px; }
  /* phone: one card in focus at a time. Every pillar pins at the same spot near the top of the screen
     (pinning mid-screen made the first card stall while the heading scrolled on, so it looked like it slid down);
     the next one rises out of the dark over it while the old one sinks back and fades away (set by the script). */
  .pillars { display: block; }
  .pil { position: sticky; top: 64px; min-height: 420px; margin-bottom: 28svh; border-radius: 18px; padding: 22px 20px;
    background: linear-gradient(180deg, #19191a, #111112); box-shadow: inset 0 0 0 1px var(--rule-2), 0 -30px 60px -10px #0B0B0C;
    transform-origin: 50% 0; transform: translateZ(0) scale(var(--s, 1)); opacity: var(--o, 1); will-change: transform, opacity; backface-visibility: hidden; }
  /* the card in focus picks up a faint mint light along its top edge */
  .pil::before { opacity: var(--a, 0); transition: none; background: radial-gradient(70% 55% at 50% 0%, rgba(122, 244, 208, 0.09), transparent 75%); }
  .pil:hover::before { opacity: var(--a, 0); }
  /* an incoming card stays solid (so nothing shows through it) and lifts out of a dark veil instead */
  .pil::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #0B0B0C; opacity: var(--d, 0); pointer-events: none; }
  .pil:last-child { grid-column: auto; margin-bottom: 0; }
  .pil .art { min-height: 130px; margin: 14px 0 18px; }
  .links { height: 40px; }
  .econ { border-radius: 18px; padding: 24px 20px; }
  .econ-h { font-size: 28px; }
  .wf { grid-template-columns: repeat(5, 48px); gap: 8px; height: 150px; }
  .case { padding: 22px 16px; border-radius: 18px; }
  .case-top { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .case-story > div { grid-template-columns: 1fr; gap: 2px; }
  .strip { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .res { flex-direction: column; align-items: center; gap: 0; }
  .case-pair { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pil::before { transition: none; } }

/* iPhone Safari: inside the stacking cards (which scale and fade on every scroll frame) it flickers on frosted-glass blur,
   3D tilts and live glow filters, so phones get flat, filter-free versions that look the same at a glance. */
@media (max-width: 860px) {
  .pil .note { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, #2c2e2f, #212324); }
  .pil .note--won { background: linear-gradient(180deg, #1f332d, #172621); }
  .pil .sc-line, .pil .rp-play { filter: none; }
  .pil .rl { perspective: none; }
  .pil .rp--l { transform: translateX(-80px) scale(.86); }
  .pil .rp--r { transform: translateX(80px) scale(.86); }
}