/* Fan Fusion design lab, round 5: g1 "Champagne Noir · Motion".
   Everything new in this round, kept apart so it can move 1:1 into the original (plus g1-motion.js).
   Rules of the file:
   - timing only from the f4 tokens (--ease, --dur, --stagger, --rise, --dur-hover, --dur-press, --lift),
     colours only from the champagne variables (alpha via color-mix);
   - animated are transform (incl. the independent translate/scale properties), opacity and stroke-dashoffset, nothing else;
   - one-shot pieces start when they come on screen (the f4 reveal observer in site.js, or g1-motion.js),
     the two loops (globe, chat) run only while visible;
   - without JS, and with prefers-reduced-motion, every piece shows its end state. */

@keyframes g1-draw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }          /* paths with pathLength="1" */
@keyframes g1-check { from { stroke-dashoffset: 25; } to { stroke-dashoffset: 0; } }           /* the sprite check (length ~22.6) */
@keyframes g1-pop { 0% { opacity: 0; scale: .6; } 60% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }
@keyframes g1-dim { from { opacity: 0; } to { opacity: .72; } }
@keyframes g1-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g1-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g1-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ================================================================ 1) hero: copy left, iPhone 17 Pro (front) right */
.g1hero { padding: 56px 0 calc(var(--sec) * .6); }
.g1hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: center; gap: clamp(32px, 5vw, 88px); }
.g1hero__copy { align-items: flex-start; text-align: left; }
.g1hero__copy .hero__title { font-size: clamp(40px, 4.2vw, 60px); }
.g1hero__copy .hero__lede { margin-left: 0; max-width: 540px; }
.g1hero__copy .hero__ctas { justify-content: flex-start; }
.g1hero__device { position: relative; justify-self: center; width: min(318px, 100%); margin-bottom: 34px; }

/* the phone: iPhone 17 Pro in its real colour Silver (satin aluminium rim, flat edges), thin even black bezel, Dynamic Island, side keys */
.g1phone { position: relative; width: 100%; aspect-ratio: 71.9 / 150; --rim-hi: #eef0f2; --rim: #b9bdc3; --rim-lo: #7d828a; }
.g1phone__body {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; isolation: isolate;
  padding: 1.5%; border-radius: 14% / 6.72%;
  background: linear-gradient(155deg, var(--rim-hi) 0%, var(--rim) 16%, var(--rim-lo) 44%, var(--rim) 72%, var(--rim-hi) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rim-lo) 45%, var(--bg)),
              0 50px 110px -46px var(--glow), 0 30px 60px -30px var(--inset);
}
.g1phone__screen {
  position: relative; z-index: 1; height: 100%; padding: 2.6%;
  border-radius: 12.6% / 6.05%; background: var(--inset);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rim-lo) 30%, var(--inset));
}
.g1phone__island {
  position: absolute; z-index: 2; top: 4.6%; left: 50%; width: 31%; height: 3.95%;
  translate: -50% 0; border-radius: 99px; background: var(--inset);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent);
}
.g1phone__key { position: absolute; z-index: 0; width: 1.3%; border-radius: 2px; background: linear-gradient(90deg, var(--rim-lo), var(--rim)); }
.g1phone__key--action { left: -.9%; top: 17.5%; height: 3.4%; }
.g1phone__key--up     { left: -.9%; top: 24%; height: 6.2%; }
.g1phone__key--down   { left: -.9%; top: 31.6%; height: 6.2%; }
.g1phone__key--power  { right: -.9%; top: 25%; height: 9.6%; background: linear-gradient(270deg, var(--rim-lo), var(--rim)); }
.g1phone__key--cam    { right: -.55%; top: 56%; height: 5.2%; width: .95%; background: color-mix(in srgb, var(--rim-lo) 60%, var(--inset)); }

/* slow sheen on the rim: one pass every 8 s, only while the hero is on screen (g1-motion.js sets .is-off) */
@keyframes g1-sheen { 0% { transform: translate3d(-130%, 0, 0) rotate(20deg); } 16%, 100% { transform: translate3d(130%, 0, 0) rotate(20deg); } }
.g1phone__sheen {
  position: absolute; z-index: 0; top: -20%; bottom: -20%; left: 0; width: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent 38%, color-mix(in srgb, var(--ink) 55%, transparent) 50%, transparent 62%);
  transform: translate3d(-130%, 0, 0) rotate(20deg);
  animation: g1-sheen 8s var(--ease) calc(var(--dur) * 4) infinite;
}
.g1phone.is-off .g1phone__sheen { animation-play-state: paused; }

/* the Monday report on the display (markup reused from the f4 end scene) */
.g1phone__screen .report {
  height: 100%; overflow: hidden; gap: 10px; padding: 15% 4.4% 4%;
  border: 0; border-radius: 11.2% / 5.45%; background: var(--bg-alt);
}
.g1phone .report__top { flex-wrap: nowrap; gap: 8px; }
.g1phone .report__app { font-size: 13.5px; gap: 8px; }
.g1phone .report__meta, .g1phone .tag__long { display: none; }
.g1phone .tag__short { display: inline; }
.g1phone .report__note { font-size: 11.5px; line-height: 1.45; margin: 0; }
.g1phone .report__kpis { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--inset); overflow: hidden; }
.g1phone .kpi { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 0; border-radius: 0; background: none; }
.g1phone .kpi + .kpi { border-top: 1px solid var(--line); }
.g1phone .kpi__label { font-size: 10px; letter-spacing: .1em; }
.g1phone .kpi__value { font-size: 17px; }
.g1phone .kpi__delta { display: none; }
.g1phone .report__body { grid-template-columns: 1fr; gap: 8px; }
.g1phone .report__chart, .g1phone .report__sources { padding: 10px 12px 12px; border-radius: 12px; }
.g1phone .report__h { margin-bottom: 10px; font-size: 10px; }
.g1phone .cols { height: 74px; gap: 6px; }
.g1phone .bars { gap: 9px; }
.g1phone .bars li { grid-template-columns: 84px 1fr 30px; gap: 8px; font-size: 11.5px; }
.g1phone .bars em { font-size: 11px; }
.g1phone .report__next p { font-size: 11.5px; gap: 8px; }
/* the trend line over "Net per day", drawn once on load */
.g1trend { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 18px); overflow: visible; pointer-events: none; }
.g1trend path { fill: none; stroke: var(--ember-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }

/* status chip with the report line from the page */
.g1chip {
  position: absolute; z-index: 3; left: 50%; bottom: -34px; translate: -50% 0; display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: min(292px, calc(100vw - 40px)); margin: 0; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--tint-line);
  box-shadow: 0 24px 50px -22px var(--inset), 0 0 0 1px color-mix(in srgb, var(--inset) 60%, transparent);
  font: 500 13px/1.42 var(--f-body); color: var(--body); text-align: left;
}
.g1chip .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: var(--sage); background: color-mix(in srgb, var(--sage) 14%, transparent); stroke-width: 2.6; }
.g1chip b { display: block; margin: 1px 0 4px; font: 700 10.5px/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }

/* the load sequence, played once (~1.6 s): copy + phone (standard entrance) -> report rows -> trend line -> chip */
html.mo .g1hero__copy > * { animation: ff-in var(--dur) var(--ease) calc(var(--i, 0) * var(--stagger) + 80ms) backwards; }
.g1hero__copy > :nth-child(2) { --i: 1; }
.g1hero__copy > :nth-child(3) { --i: 2; }
.g1hero__copy > :nth-child(4) { --i: 3; }
.g1hero__copy > :nth-child(5) { --i: 4; }
html.mo .g1phone { animation: ff-in var(--dur) var(--ease) calc(var(--stagger) * 2) backwards; }
.g1phone .report { --rise-row: calc(var(--rise) * .5); }
@keyframes g1-row { from { opacity: 0; translate: 0 var(--rise-row) 0; } to { opacity: 1; translate: 0 0 0; } }
html.mo .g1phone .report > :not(.report__body), html.mo .g1phone .report__body > * {
  animation: g1-row var(--dur) var(--ease) calc(var(--dur) * .4 + var(--r, 0) * var(--stagger)) backwards;
}
.g1phone .report__note { --r: 1; }
.g1phone .report__kpis { --r: 2; }
.g1phone .report__chart { --r: 3; }
.g1phone .report__sources { --r: 4; }
.g1phone .report__next { --r: 5; }
html.mo .g1trend path { animation: g1-draw var(--dur) var(--ease) calc(var(--dur) + var(--stagger) * 2) backwards; }
html.mo .g1chip { animation: g1-pop calc(var(--dur) * .7) var(--ease) calc(var(--dur) * 1.8) backwards; }

@media (max-width: 899px) {
  .g1hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .g1hero__copy { align-items: center; text-align: center; }
  .g1hero__copy .hero__lede { margin-left: auto; }
  .g1hero__copy .hero__ctas { justify-content: center; }
  .g1hero__device { width: min(300px, 66vw); }
}
@media (max-width: 480px) {
  .g1phone .report { gap: 8px; }
  .g1phone .report__note { display: none; }
  .g1phone .report__app { font-size: 12.5px; }
  .g1phone .kpi { padding: 7px 10px; }
  .g1phone .kpi__value { font-size: 15px; }
  .g1phone .report__chart, .g1phone .report__sources { padding: 9px 10px 10px; }
  .g1phone .cols { height: 62px; gap: 5px; }
  .g1phone .bars { gap: 7px; }
  .g1phone .bars li { grid-template-columns: 74px 1fr 26px; gap: 6px; font-size: 10.5px; }
  .g1phone .report__next p { font-size: 10.5px; }
  .g1chip { font-size: 12.5px; padding: 10px 14px 10px 10px; }
}

/* ================================================================ 2) "Your terms in writing." as a normal section */
.g1written { text-align: center; }
.g1written__head { max-width: 980px; margin-inline: auto; }
.g1written__title { margin: 0; font: 700 clamp(44px, 6.6vw, 108px)/.98 var(--f-display); letter-spacing: -.05em; text-wrap: balance; }
.g1written__title .serif { color: var(--ember); font-size: 1.1em; letter-spacing: -.02em; }
.g1written__sub { max-width: 560px; margin: 24px auto 0; }
.g1written .stats--hero { margin-top: 8px; }
.g1written .stats__note { text-align: center; }
@media (max-width: 760px) {
  .g1written__title { font-size: clamp(42px, 13vw, 64px); }
  .g1written .stats--hero { margin-inline: auto; }
  .g1written .stats__note { margin-inline: auto; }
}

/* ================================================================ 3) the dotted globe (layout moved here from e6-cinematic.css; drawing in g1-motion.js) */
.globe { position: relative; overflow: hidden; }
.globe__inner { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; }
.globe__viz {
  position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ember) 8%, transparent) 0 40%, color-mix(in srgb, var(--ember) 4%, transparent) 42%, transparent 43%);
}
.globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__text h2 { max-width: 16ch; }
.globe__text .lede { margin: 22px 0 26px; max-width: 520px; }
@media (max-width: 899px) {
  .globe__inner { grid-template-columns: 1fr; gap: 28px; }
  .globe__viz { max-width: 380px; }
  .globe__text { text-align: left; }
}

/* ================================================================ 4) complaint matrix: our checks draw themselves, warnings fade in muted */
.matrix .warn .i { opacity: .72; }
html.js .matrix__table tr.rv-wait:not(.rv-in) .yes .i { stroke-dasharray: 24 30; stroke-dashoffset: 25; }
html.js .matrix__table tr.rv-wait:not(.rv-in) .warn .i { opacity: 0; }
.matrix__table tr.rv-in .yes .i { stroke-dasharray: 24 30; animation: g1-check calc(var(--dur) * .7) var(--ease) calc(var(--i, 0) * var(--stagger) + var(--dur) * .45) both; }
.matrix__table tr.rv-in .warn .i { animation: g1-dim var(--dur) var(--ease) calc(var(--i, 0) * var(--stagger) + var(--dur) * .3) both; }

/* ================================================================ 0) brand: the ff tile replaces the old FF text box */
.brand__logo { width: 36px; height: 36px; flex: none; display: block; }
.brand .brand__name { font-weight: 600; }
.mini-logo { width: 22px; height: 22px; flex: none; display: inline-block; vertical-align: middle; }
@media (max-width: 760px) { .brand__logo { width: 32px; height: 32px; } .brand { gap: 10px; } }

/* report: money by revenue type (one split bar + legend), traffic by platform (bars with logos, link clicks, no $) */
.netsplit { display: flex; gap: 2px; height: 8px; margin: 4px 0 10px; border-radius: 99px; overflow: hidden; }
.netsplit b { flex: none; width: var(--w); background: var(--ember-lo); }
.netsplit b:nth-child(2) { background: var(--ember-hi); }
.netsplit b:nth-child(3) { background: color-mix(in srgb, var(--ember) 55%, var(--line)); }
.netlegend { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.netlegend li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 6px; row-gap: 3px; align-items: center; font-size: 12.5px; line-height: 1.2; color: var(--body); }
.netlegend i { width: 8px; height: 8px; border-radius: 2px; background: var(--ember-lo); }
.netlegend li:nth-child(2) i { background: var(--ember-hi); }
.netlegend li:nth-child(3) i { background: color-mix(in srgb, var(--ember) 55%, var(--line)); }
.netlegend span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netlegend em { grid-column: 2; font: 600 13px/1 var(--f-display); font-style: normal; color: var(--ink); }
.report__h--traffic { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.report__h--traffic span { opacity: .6; }
.bars--traffic li > span { display: flex; align-items: center; gap: 6px; }
.bars--traffic .plogo { width: 13px; height: 13px; color: var(--ink); opacity: .82; }
/* inside the hero phone everything is one step smaller */
.g1phone .netsplit { height: 6px; margin: 2px 0 7px; }
.g1phone .netlegend { gap: 5px; margin-bottom: 9px; }
.g1phone .netlegend li { font-size: 10px; column-gap: 4px; grid-template-columns: 6px minmax(0, 1fr); }
.g1phone .netlegend i { width: 6px; height: 6px; }
.g1phone .netlegend em { font-size: 11px; }
.g1phone .bars--traffic .plogo { width: 11px; height: 11px; }

/* ================================================================ 5) service panels: one small graphic each (max ~120 px) */
.g1viz { position: relative; height: 108px; margin: 0 0 20px; overflow: hidden; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); }

/* 9:16 reel tile (drawn inside the marketing traffic graphic) */
.g1reel {
  position: relative; width: 42px; aspect-ratio: 9 / 16; border-radius: 7px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--line-strong);
}
.g1reel::before { /* play mark */
  content: ""; position: absolute; left: 50%; top: 42%; width: 0; height: 0; translate: -35% -50%;
  border-left: 8px solid var(--ember); border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: .9;
}
.g1reel::after { /* caption lines */
  content: ""; position: absolute; left: 6px; right: 12px; bottom: 8px; height: 3px; border-radius: 2px;
  background: var(--line-strong); box-shadow: 0 -6px 0 0 var(--line);
}

/* platform logos (.plogo, not .brand: that is the site logo link): official marks, one colour (ivory), never recoloured */
.plogo { width: 1em; height: 1em; flex: none; fill: currentColor; stroke: none; vertical-align: middle; }

/* hero report: the named sources carry their logo */
.g1phone .bars li { grid-template-columns: 116px 1fr 30px; }
@media (max-width: 480px) { .g1phone .bars li { grid-template-columns: 100px 1fr 26px; } }
.g1phone .bars li > span { display: flex; align-items: center; gap: 5px; }
.g1phone .bars .plogo, .g1phone .bars .plogo-i { width: 11px; height: 11px; color: var(--ink); opacity: .82; }
.g1phone .bars .plogo-i { stroke-width: 2; }

/* marketing: content -> platforms -> your page, read top to bottom. Reel tiles pop up, one dot goes out to each platform
   (its chip lights up), then traffic dots run from every platform to the page, every ~3.5 s while visible (g1-motion.js). */
.g1viz.g1traffic { height: auto; container-type: inline-size; }   /* beats the fixed .g1viz heights, also in the 760px query */
.g1traffic { --chip: 34px; --cgap: 10px; }
.g1traffic__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.g1traffic__svg path { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.g1traffic__svg .g1traffic__out { stroke-dasharray: 2 4; }
.g1traffic__dot circle { fill: var(--ember-hi); }
.g1traffic__dot .h { fill: var(--ember); opacity: .22; }
.g1traffic__grid {
  position: relative; z-index: 1; display: grid; justify-items: center; align-items: center;
  grid-template-rows: auto 46px auto 34px auto; padding: 18px 16px 20px;
}
.g1traffic__reels { grid-row: 1; display: flex; gap: 6px; }
.g1traffic .g1reel { width: 21px; border-radius: 4px; }
.g1traffic .g1reel::before { border-left-width: 5px; border-top-width: 3px; border-bottom-width: 3px; }
.g1traffic .g1reel::after { left: 3px; right: 6px; bottom: 4px; height: 2px; box-shadow: 0 -4px 0 0 var(--line); }
.g1traffic.is-armed .g1reel { opacity: 0; }
.g1traffic.is-play .g1reel { animation: g1-pop calc(var(--dur) * .7) var(--ease) calc(var(--k, 0) * var(--stagger) * 2 + var(--dur) * .2) both; }
.g1traffic__src {
  grid-row: 3; position: relative; display: grid;
  grid-template-columns: repeat(6, var(--chip)); grid-auto-rows: var(--chip); gap: var(--cgap);
}
.g1src {
  display: grid; place-items: center; border-radius: 9px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  transition: border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
}
.g1src .plogo { width: 16px; height: 16px; opacity: .6; transition: opacity var(--dur-hover) var(--ease); }
.g1src.is-on { border-color: color-mix(in srgb, var(--ember) 45%, var(--line-strong)); background: color-mix(in srgb, var(--ember) 7%, var(--surface)); }
.g1src.is-on .plogo { opacity: 1; }
.g1traffic.is-armed .g1src.is-on { animation: g1-nudge calc(var(--dur) * .6) var(--ease) both; }
/* the Meta mark over its two platforms (Instagram, Facebook): it sits between the two arrival points, so no path crosses it */
.g1meta {
  position: absolute; left: calc(var(--chip) / 2); width: calc(var(--chip) + var(--cgap)); top: -16px; height: 16px;
  display: flex; justify-content: center; align-items: flex-start;
}
.g1meta::before { content: ""; position: absolute; left: 7px; right: 7px; top: 6px; bottom: 0; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 4px 4px 0 0; }
.g1meta .plogo { position: relative; width: 16px; height: 12px; padding: 0 3px; color: var(--ink); opacity: .72; background: var(--inset); box-sizing: content-box; }
.g1traffic__page {
  grid-row: 5; position: relative; display: grid; gap: 7px; width: 208px; padding: 10px 12px 9px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
}
.g1traffic__top { display: flex; align-items: center; gap: 7px; }
.g1traffic__avatar { width: 16px; height: 16px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--ember-hi), var(--ember-lo)); }
.g1traffic__line { flex: 1; height: 3px; border-radius: 2px; background: var(--line-strong); box-shadow: 0 6px 0 0 var(--line); margin-bottom: 6px; }
.g1traffic__segs { display: flex; gap: 3px; }
.g1traffic__seg { flex: 1; height: 4px; border-radius: 2px; background: var(--ember); opacity: .35; }
.g1traffic__page em { font: 600 9px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.g1traffic__ring { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--ember); opacity: 0; pointer-events: none; }
@container (max-width: 430px) {
  /* the sizes go on the grid: a container query can't style its own container, so on .g1traffic they never applied */
  .g1traffic__grid { --chip: 30px; --cgap: 7px; padding: 16px 10px 18px; grid-template-rows: auto 42px auto 30px auto; }
  .g1src .plogo { width: 15px; height: 15px; }
  .g1traffic__page { width: 172px; }
}

/* backend: chat (typing -> reply -> pause, every ~6 s while visible) + the report (lines fill, then a check) */
.g1pair { display: grid; grid-template-columns: minmax(0, 1fr) 112px; }
.g1pair::after { content: ""; position: absolute; top: 14px; bottom: 14px; right: 112px; width: 1px; background: var(--line); }
.g1chat { position: relative; }
.g1chat__b { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 12px; }
.g1chat__b i { display: block; width: var(--w); height: 4px; border-radius: 2px; }
.g1chat__b--in { left: 14px; top: 14px; width: 58%; height: 34px; border-radius: 13px 13px 13px 4px; background: var(--surface); }
.g1chat__b--in i { background: var(--line-strong); }
.g1chat__b--out {
  right: 14px; bottom: 14px; width: 62%; height: 36px; border-radius: 13px 13px 4px 13px;
  background: color-mix(in srgb, var(--ember) 14%, var(--inset)); border: 1px solid var(--tint-line);
  transform-origin: 100% 100%; transition: opacity calc(var(--dur) * .6) var(--ease), scale calc(var(--dur) * .6) var(--ease);
}
.g1chat__b--out i { background: color-mix(in srgb, var(--ember) 55%, transparent); }
.g1chat__typing {
  position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 54px; height: 28px; border-radius: 14px 14px 4px 14px; background: var(--tint); border: 1px solid var(--tint-line);
  opacity: 0; scale: .85; transform-origin: 100% 100%;
  transition: opacity var(--dur-hover) var(--ease), scale var(--dur-hover) var(--ease);
}
.g1chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); opacity: .45; }
@keyframes g1-typing { 0%, 60%, 100% { opacity: .35; transform: translate3d(0, 0, 0); } 30% { opacity: 1; transform: translate3d(0, -3px, 0); } }
.g1chat.is-typing .g1chat__typing { opacity: 1; scale: 1; }
.g1chat.is-typing .g1chat__typing i { animation: g1-typing calc(var(--dur) * 1.6) var(--ease) infinite; }
.g1chat.is-typing .g1chat__typing i:nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.g1chat.is-typing .g1chat__typing i:nth-child(3) { animation-delay: calc(var(--stagger) * 4); }
.g1chat.is-armed:not(.is-replied) .g1chat__b--out { opacity: 0; scale: .9; }

.g1doc {
  position: relative; align-self: center; justify-self: center; display: flex; flex-direction: column; gap: 8px;
  width: 70px; height: 82px; padding: 12px 10px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line-strong);
}
.g1doc__head { display: block; width: 46%; height: 4px; border-radius: 2px; background: var(--ember); opacity: .8; margin-bottom: 2px; }
.g1doc__line { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.g1doc__line b { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--ember-lo); transform-origin: 0 50%; }
.g1doc__check {
  position: absolute; right: -9px; bottom: -9px; width: 24px; height: 24px; padding: 4px; border-radius: 50%;
  background: var(--inset); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 45%, transparent);
  fill: none; stroke: var(--sage); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
}
.g1doc__check path { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
.g1doc__line:nth-of-type(2) { --n: 0; }
.g1doc__line:nth-of-type(3) { --n: 1; }
.g1doc__line:nth-of-type(4) { --n: 2; }
.g1doc__line:nth-of-type(5) { --n: 3; }
.g1doc.is-armed .g1doc__line b { transform: scaleX(0); }
.g1doc.is-armed .g1doc__check { opacity: 0; }
.g1doc.is-armed .g1doc__check path { stroke-dashoffset: 1.05; }
.g1doc.is-play .g1doc__line b { animation: g1-fill var(--dur) var(--ease) calc(var(--dur) * .2 + var(--n, 0) * var(--stagger) * 2) both; }
.g1doc.is-play .g1doc__check { animation: g1-pop calc(var(--dur) * .6) var(--ease) calc(var(--dur) * 1.5) both; }
.g1doc.is-play .g1doc__check path { animation: g1-draw calc(var(--dur) * .6) var(--ease) calc(var(--dur) * 1.75) both; }

@media (max-width: 760px) {
  .g1viz { height: 100px; margin-bottom: 16px; }
  .g1reel { width: 38px; }
  .g1pair { grid-template-columns: minmax(0, 1fr) 96px; }
  .g1pair::after { right: 96px; }
  .g1doc { width: 62px; height: 76px; padding: 11px 9px; gap: 7px; }
}

/* ================================================================ 6) money flow: OnlyFans -> your bank, then the invoice (on net) to us */
.g1flow {
  display: flex; align-items: center; max-width: 880px; margin: 36px auto 40px; padding: 20px 24px;
  border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--inset) 70%, transparent);
}
.g1flow__node { display: flex; align-items: center; gap: 10px; flex: none; }
.g1flow__label { font: 600 14.5px/1.1 var(--f-display); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.g1flow__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: var(--ember); background: var(--tint); border: 1px solid var(--tint-line); }
.g1flow__icon--of::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ember); }
.g1flow .mini-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 10.5px; }
.g1flow__lane { position: relative; flex: 1 1 0; min-width: 72px; height: 34px; margin: 0 16px; }
.g1flow__lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--tint-line), var(--ember), var(--tint-line)); }
.g1flow__lane--bill::before { background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.g1flow__word { position: absolute; left: 50%; bottom: calc(50% + 8px); translate: -50% 0; font: 700 10px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.g1flow__run { position: absolute; inset: 0; pointer-events: none; }
.g1flow__spark {
  position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; opacity: 0;
  background: var(--ember-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 22%, transparent), 0 0 16px 3px color-mix(in srgb, var(--ember) 50%, transparent);
}
.g1flow__run--chip { display: flex; align-items: center; justify-content: center; }
.g1flow__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--tint-line); font: 600 11.5px/1 var(--f-body); letter-spacing: .02em; color: var(--ember);
}
@keyframes g1-run-x { from { translate: 0 0; } to { translate: 100% 0; } }
@keyframes g1-run-y { from { translate: 0 0; } to { translate: 0 100%; } }
@keyframes g1-spark { 0% { opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes g1-nudge { 0%, 100% { scale: 1; } 45% { scale: 1.14; } }
@keyframes g1-detach-x { from { opacity: 0; translate: -50% 0; } 30% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes g1-detach-y { from { opacity: 0; translate: 0 -50%; } 30% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
.g1flow.is-armed .g1flow__run--chip { opacity: 0; }
.g1flow.is-play .g1flow__lane--pay .g1flow__run { animation: g1-run-x calc(var(--dur) * 1.6) var(--ease) calc(var(--dur) * .9) both; }
.g1flow.is-play .g1flow__spark { animation: g1-spark calc(var(--dur) * 1.6) linear calc(var(--dur) * .9) both; }
.g1flow.is-play .g1flow__node--you .g1flow__icon { animation: g1-nudge calc(var(--dur) * .7) var(--ease) calc(var(--dur) * 2.45) both; }
.g1flow.is-play .g1flow__run--chip { animation: g1-detach-x var(--dur) var(--ease) calc(var(--dur) * 2.6) both; }

@media (max-width: 600px) {
  .g1flow { flex-direction: column; align-items: flex-start; margin: 28px 0 32px; padding: 18px 18px 20px; }
  .g1flow__lane { flex: none; width: 30px; min-width: 0; height: 50px; margin: 5px 0; }
  .g1flow__lane::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--tint-line), var(--ember), var(--tint-line)); }
  .g1flow__lane--bill::before { background: repeating-linear-gradient(180deg, var(--line-strong) 0 5px, transparent 5px 10px); }
  .g1flow__word { left: calc(100% + 12px); bottom: auto; top: 50%; translate: 0 -50%; }
  .g1flow__spark { left: 50%; top: 0; margin: -4px 0 0 -4px; }
  .g1flow__run--chip { justify-content: flex-start; }
  .g1flow__chip { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; }
  .g1flow.is-play .g1flow__lane--pay .g1flow__run { animation-name: g1-run-y; }
  .g1flow.is-play .g1flow__run--chip { animation-name: g1-detach-y; }
}

/* ================================================================ 7) term sheet: the signature writes itself, then the stamp presses on */
.tsheet__pen { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
html.js .tsheet__sig.rv-wait:not(.rv-in) .tsheet__pen { stroke-dashoffset: 1.05; }
.tsheet__sig.rv-in .tsheet__pen { animation: g1-draw calc(var(--dur) * 1.4) var(--ease) calc(var(--i, 0) * var(--stagger) + var(--dur) * .6) both; }
.tsheet__sig.rv-in .tsheet__pen--under { animation-duration: calc(var(--dur) * .5); animation-delay: calc(var(--i, 0) * var(--stagger) + var(--dur) * 2); }
@keyframes g1-stamp { 0% { opacity: 0; scale: 1.22; } 70% { opacity: .9; scale: .97; } 100% { opacity: .86; scale: 1; } }
.tsheet__stamp.rv-in { animation: g1-stamp calc(var(--dur) * .7) var(--ease) calc(var(--i, 0) * var(--stagger) + var(--dur) * 2.5) both; }

/* ================================================================ 8) switching rail: numbers pop in turn, the connector fills only between two steps */
.rail__step.rv-in .rail__num { animation: g1-pop calc(var(--dur) * .7) var(--ease) calc(var(--i, 0) * var(--stagger) * 2 + var(--dur) * .25) both; }
.rail__step:not(:last-child)::before { transform-origin: 0 50%; }
.rail__step.rv-in:not(:last-child)::before { animation: g1-grow-x var(--dur) var(--ease) calc(var(--i, 0) * var(--stagger) * 2 + var(--dur) * .6) both; }
@media (max-width: 980px) {
  .rail__step:not(:last-child)::before { transform-origin: 50% 0; }
  .rail__step.rv-in:not(:last-child)::before { animation-name: g1-grow-y; }
}

/* ================================================================ 9) reduced motion: end states, no loops */
@media (prefers-reduced-motion: reduce) {
  .g1phone__sheen { display: none; }
  .g1chat__typing i, .g1chat.is-typing .g1chat__typing i { animation: none; }
  .g1reel, .g1doc__line b, .g1doc__check, .g1doc__check path, .g1flow__run, .g1flow__spark, .g1flow__icon,
  .tsheet__pen, .tsheet__stamp, .rail__num, .rail__step::before, .matrix .yes .i, .matrix .warn .i, .g1trend path, .g1chip { animation: none !important; }
}

/* ================================================================ 9) mobile fixes (28.09., after the phone check) */
/* 1) Nothing may make the page wider than the phone: one too-wide element makes mobile browsers zoom the whole page out
      (that squeezed the header). The hero column may shrink, its buttons may wrap, and the page clips as a last resort. */
html, body { overflow-x: clip; }
@media (max-width: 899px) {
  .g1hero__grid { grid-template-columns: minmax(0, 1fr); }
  .g1hero__copy { min-width: 0; width: 100%; }
  .g1hero__copy .hero__title { font-size: 38px; }
  .hero__ctas .btn { white-space: normal; min-width: 0; max-width: 100%; text-align: center; line-height: 1.2; }
}
@media (max-width: 400px) { .g1hero__copy .hero__title { font-size: 34px; } }
/* the same on every page: on phones no button may be wider than its column (long labels wrap instead) */
@media (max-width: 600px) {
  .btn { white-space: normal; max-width: 100%; min-width: 0; text-align: center; line-height: 1.2; }
  .phero__text, .phero__ctas, .hero__ctas { min-width: 0; max-width: 100%; }
}

/* 2) Header on small phones: logo, name, a smaller audit button and the menu button always fit side by side.
      Once the menu has become the slide-in panel, nothing fills the middle any more, so the two buttons are pushed to the right edge. */
@media (max-width: 1080px) { .header__actions { margin-left: auto; } }
@media (max-width: 400px) {
  .header__inner { gap: 10px; }
  .brand .brand__name { font-size: 16px; }
  .header__actions { gap: 8px; }
  .header__actions .btn--sm { height: 36px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 340px) {
  .brand { gap: 8px; }
  .brand .brand__name { font-size: 15px; }
  .brand__logo { width: 30px; height: 30px; }
}

/* 3) Mobile menu: starts exactly under the header (also while the 18+ bar is still on screen), scrolls on its own,
      and the page behind it stays where it is (g1-motion.js sets --nav-top and html.nav-open) */
@media (max-width: 1080px) {
  .nav { top: var(--nav-top, var(--header-h)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  html.nav-open { overflow: hidden; }
  /* only the page (html) is locked: if body became its own scroll box, the sticky header would jump back to the top of the
     page, and a menu opened further down would have no header and no close button */
  html.nav-open body, body.nav-open { overflow-x: clip; overflow-y: visible; }
  html.nav-open .header { background: var(--bg); }
  /* the bottom button bar slides away while the menu is open (the menu has its own audit button) */
  html.nav-open .stickybar { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s; }
}

/* 4) Calculator: the result range ("$32,500–$37,500") scales with the card and may break after the dash */
.calc { container-type: inline-size; }
.calc__mega { white-space: normal; overflow-wrap: anywhere; font-size: clamp(26px, 11.5cqi, 40px); }
.calc__net { font-size: clamp(30px, 12cqi, 38px); }

/* 5) Hero report on phones: legend as rows (label left, value right), traffic hint hidden, one-line app title */
@media (max-width: 480px) {
  .g1phone .report__app { white-space: nowrap; }
  .g1phone .report__top { flex-wrap: wrap; row-gap: 5px; }
  .g1phone .mini-logo { width: 20px; height: 20px; }
  .g1phone .netlegend { grid-template-columns: 1fr; gap: 3px; }
  .g1phone .netlegend li { grid-template-columns: 6px minmax(0, 1fr) auto; }
  .g1phone .netlegend em { grid-column: 3; grid-row: 1; }
  .g1phone .report__h--traffic span { display: none; }
  .g1phone .kpi:nth-child(3) { display: none; }      /* chat & PPV already sits in "Net by source" below */
  .g1phone .report > * { flex-shrink: 0; }            /* blocks never get squeezed; the bottom rows may pass under the chip */
}

/* 6) the Fan Fusion node in the money flow uses the logo tile at the same size as the other node icons */
.g1flow__node > .mini-logo { width: var(--g1flow-icon, 30px); height: var(--g1flow-icon, 30px); }
/* 7) report legends outside the phone (e.g. /resources/): rows on small screens, so no label is cut */
@media (max-width: 560px) {
  .netlegend { grid-template-columns: 1fr; gap: 4px; }
  .netlegend li { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .netlegend em { grid-column: 3; grid-row: 1; }
  .netlegend span { white-space: normal; }
}

/* 8) "Who you work with": the opening paragraph reads as a lead */
.founder__body .founder__lead { font-size: 1.12em; line-height: 1.6; color: var(--ink); }