/* h1-pages.css: owned by M2 (subpage motion), round 6 (30.09.2026). Only this agent edits this file.
   One signature graphic per subpage, all self-drawn (HTML/CSS/SVG), driven by the step sequencer in h1-pages.js:
   figure[data-h1x] gets .h1-arm (motion allowed + JS), children with data-at="n" get .on at step n.
   Default CSS = the finished end state (no JS, reduced motion). Only .h1-arm hides the start state.
   Animated: opacity, transform / translate / scale, stroke-dashoffset. Colours: champagne tokens only.
   Every figure is a size container, so the layouts follow the column they sit in (320 px .. 1440 px). */

/* ================================================================ shared frame */
.h1x {
  container-type: inline-size; position: relative; min-width: 0; max-width: 100%;
  margin: 28px 0 36px; padding: 20px clamp(14px, 3.2vw, 28px) 18px;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--ember) 6%, transparent), transparent 70%),
              linear-gradient(180deg, var(--bg-alt), var(--inset));
  color: var(--body);
}
.docsec__head + .h1x { margin-top: 0; }
.h1x__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 18px; }
.h1x__k { margin: 0; font: 700 10.5px/1.35 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.h1x__top .tag { white-space: normal; line-height: 1.25; }
.h1x__stage { position: relative; min-width: 0; }
.h1x__cap { margin: 16px 0 0; font: 500 13px/1.5 var(--f-body); color: var(--muted); }
.h1x__cap b { color: var(--ink); font-weight: 600; }
.h1x .i { stroke-width: 1.8; }
.h1x .plogo { width: 20px; height: 20px; display: block; color: var(--ink); }

/* ---------------------------------------------------------------- sequencer states (only when armed) */
.h1-arm .h1x__stage { transition: opacity .42s var(--ease); }
.h1-arm.is-reset .h1x__stage { opacity: 0; }
.h1-arm.is-clear [data-at], .h1-arm.is-clear [data-at] *, .h1-arm.is-clear .h1x__stage * { transition: none !important; }
.h1-arm [data-at] {
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease),
              scale var(--dur) cubic-bezier(.34, 1.5, .64, 1), transform var(--dur) var(--ease),
              stroke-dashoffset calc(var(--dur) * 1.6) var(--ease);
}
.h1-arm [data-at]:not(.on) { opacity: 0; translate: 0 8px; }
.h1-arm .fx-fade:not(.on) { translate: none; }
.h1-arm .fx-left:not(.on) { translate: -12px 0; }
.h1-arm .fx-pop:not(.on) { translate: none; scale: .55; }
.fx-gx { transform-origin: 0 50%; }
.fx-gy { transform-origin: 50% 0; }
.h1-arm .fx-gx:not(.on) { opacity: 1; translate: none; transform: scaleX(0); }
.h1-arm .fx-gy:not(.on) { opacity: 1; translate: none; transform: scaleY(0); }
.fx-draw { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.h1-arm .fx-draw:not(.on) { opacity: 1; translate: none; stroke-dashoffset: 1; }
.fx-dim { opacity: .42; }
.h1-arm .fx-dim:not(.on) { opacity: 1; translate: none; }

/* ================================================================ 1) /pricing/: net vs gross waterfall with plan toggle */
.h1fall__seg { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin: 0 0 20px; }
.h1fall__seg button { height: 40px; padding: 0 10px; font-size: 14px; }
.h1fall__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.h1fall__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab val" "track track"; gap: 6px 12px; align-items: baseline; }
.h1fall__lab { grid-area: lab; min-width: 0; font: 600 14px/1.35 var(--f-body); color: var(--ink); }
.h1fall__lab small { display: block; margin-top: 2px; font: 500 12px/1.35 var(--f-body); color: var(--muted); }
.h1fall__val { grid-area: val; font: 600 14px/1.35 var(--f-mono); color: var(--ink); text-align: right; white-space: nowrap; }
.h1fall__row--minus .h1fall__val { color: var(--muted); }
.h1fall__row--keep .h1fall__val { color: var(--sage); }
.h1fall__track { grid-area: track; position: relative; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 4%, transparent); overflow: hidden; }
.h1fall__track::after { /* the net line: OnlyFans' 20% always starts at 80 % of gross */
  content: ""; position: absolute; top: -2px; bottom: -2px; left: 80%; border-left: 1px dashed color-mix(in srgb, var(--ember) 55%, transparent);
}
.h1fall__bar {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px;
  transform-origin: 0 50%; transform: translateX(calc(var(--l, 0) * 1%)) scaleX(calc(var(--w, 100) / 100));
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.h1-arm .h1fall__bar:not(.on) { opacity: 1; translate: none; transform: translateX(calc(var(--l, 0) * 1%)) scaleX(0); }
.h1fall__bar--gross { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.h1fall__bar--of { background: color-mix(in srgb, var(--faint) 55%, transparent); }
.h1fall__bar--net { background: var(--grad); }
.h1fall__bar--fee { background: color-mix(in srgb, var(--ember) 62%, var(--bg)); }
.h1fall__bar--range { background: color-mix(in srgb, var(--ember) 22%, transparent); }
.h1fall__bar--keep { background: color-mix(in srgb, var(--sage) 78%, var(--bg)); }
.h1fall__on { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 700 10px/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-ember); background: var(--ember); vertical-align: 2px; }
.h1fall__foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-strong); font: 500 13.5px/1.55 var(--f-body); color: var(--body); }
.h1fall__foot b { color: var(--ink); font-family: var(--f-mono); font-weight: 600; font-size: .95em; }
.h1fall__key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font: 500 12px/1.4 var(--f-body); color: var(--muted); }
.h1fall__key i { display: inline-block; width: 18px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.h1fall__key .k-solid { background: color-mix(in srgb, var(--ember) 62%, var(--bg)); }
.h1fall__key .k-range { background: color-mix(in srgb, var(--ember) 22%, transparent); outline: 1px dashed color-mix(in srgb, var(--ember) 45%, transparent); }
.h1fall .h1fall__val, .h1fall__foot b { transition: opacity var(--dur-hover) var(--ease); }
@container (min-width: 600px) {
  .h1fall__row { grid-template-columns: 200px minmax(0, 1fr) 132px; grid-template-areas: "lab track val"; align-items: center; gap: 14px; }
  .h1fall__track { height: 26px; }
}

/* ================================================================ 2) /switching-agencies/: handover lanes */
.h1hand__lanes { position: relative; display: grid; gap: 16px; padding-bottom: 4px; }
.h1hand__lab { margin: 0 0 6px; font: 500 13px/1.45 var(--f-body); color: var(--muted); }
.h1hand__lab b { margin-right: 4px; color: var(--ink); font-weight: 700; }
.h1hand__lab .i { width: 15px; height: 15px; margin: -2px 6px 0 0; color: var(--ember); }
.h1hand__lab span { display: inline; }
.h1hand__track { position: relative; height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.h1hand__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-radius: 99px; }
.h1hand__bar--you { background: color-mix(in srgb, var(--sage) 75%, var(--bg)); }
.h1hand__bar--old { background: color-mix(in srgb, var(--faint) 60%, transparent); }
.h1hand__bar--setup { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ember) 55%, transparent) 0 7px, transparent 7px 12px); }
.h1hand__bar--ff { background: var(--grad); }
.h1hand__end { position: absolute; top: 50%; left: calc(var(--x) * 1%); width: 22px; height: 22px; margin: -11px 0 0 -11px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); color: var(--muted); }
.h1hand__end .i { width: 12px; height: 12px; stroke-width: 2.4; }
.h1hand__end--lock { color: var(--sage); border-color: color-mix(in srgb, var(--sage) 45%, transparent); }
.h1hand__end--ok { color: var(--on-ember); background: var(--ember); border-color: var(--ember); }
.h1hand__end--chat { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 55%, transparent); }
.h1hand__axis { position: relative; height: 34px; margin-top: 12px; border-top: 1px solid var(--line-strong); }
.h1hand__m { position: absolute; top: 8px; left: calc(var(--x) * 1%); font: 700 10.5px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); white-space: nowrap; }
.h1hand__m::before { content: ""; position: absolute; top: -12px; left: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--ember); }
.h1hand__m--c { translate: -50% 0; }
.h1hand__m--c::before { left: 50%; }
.h1hand__m--r { translate: -100% 0; }
.h1hand__m--r::before { left: 100%; }
.h1-arm .h1hand__m--c:not(.on) { translate: -50% 6px; }
.h1-arm .h1hand__m--r:not(.on) { translate: -100% 6px; }
.h1hand__phase { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 0; font: 500 12px/1.4 var(--f-body); color: var(--faint); }

/* ================================================================ 3) /how-it-works/: the step rail draws itself */
.h1steps__wrap { position: relative; }
.h1steps__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.h1steps__n { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; }
.h1steps__dot { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); color: var(--ember); box-shadow: 0 0 0 6px var(--bg-alt); }
.h1steps__n--opt .h1steps__dot { border-style: dashed; }
.h1steps__dot .i { width: 19px; height: 19px; }
.h1steps__n b { display: block; font: 700 13.5px/1.25 var(--f-display); color: var(--ink); letter-spacing: -0.01em; }
.h1steps__n small { display: block; margin-top: 3px; font: 500 11.5px/1.35 var(--f-body); color: var(--muted); }
.h1steps__num { font: 600 10.5px/1 var(--f-mono); color: var(--faint); }
.h1steps__line { position: absolute; z-index: 0; top: 23px; left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: var(--line); border-radius: 2px; }
.h1steps__fill { position: absolute; inset: 0; background: var(--grad); border-radius: 2px; transform-origin: 0 50%; transform: scaleX(1); }
.h1-arm .h1steps__fill { transform: scaleX(0); transition: transform calc(var(--dur) * 1.2) var(--ease); }
.h1-arm[data-step="2"] .h1steps__fill { transform: scaleX(.2); }
.h1-arm[data-step="3"] .h1steps__fill { transform: scaleX(.4); }
.h1-arm[data-step="4"] .h1steps__fill { transform: scaleX(.6); }
.h1-arm[data-step="5"] .h1steps__fill { transform: scaleX(.8); }
.h1-arm:is([data-step="6"], [data-step="7"], [data-step="8"], [data-step="9"]) .h1steps__fill { transform: scaleX(1); }
.h1steps__n.on .h1steps__dot, .h1steps:not(.h1-arm) .h1steps__dot { border-color: color-mix(in srgb, var(--ember) 60%, transparent); background: color-mix(in srgb, var(--ember) 10%, var(--bg)); }
.h1steps__weekly { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.h1steps__wk { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: 600 12px/1.2 var(--f-body); color: var(--ink); }
.h1steps__wk .i { width: 14px; height: 14px; color: var(--ember); }
.h1steps__weekly em { font: 500 13px/1.4 var(--f-body); font-style: normal; color: var(--muted); }
@container (max-width: 619px) {
  .h1steps__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .h1steps__n { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .h1steps__dot { flex: 0 0 auto; width: 40px; height: 40px; box-shadow: 0 0 0 5px var(--bg-alt); }
  .h1steps__line { top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; }
  .h1steps__fill { transform-origin: 50% 0; transform: scaleY(1); }
  .h1-arm .h1steps__fill { transform: scaleY(0); }
  .h1-arm[data-step="2"] .h1steps__fill { transform: scaleY(.2); }
  .h1-arm[data-step="3"] .h1steps__fill { transform: scaleY(.4); }
  .h1-arm[data-step="4"] .h1steps__fill { transform: scaleY(.6); }
  .h1-arm[data-step="5"] .h1steps__fill { transform: scaleY(.8); }
  .h1-arm:is([data-step="6"], [data-step="7"], [data-step="8"], [data-step="9"]) .h1steps__fill { transform: scaleY(1); }
  .h1steps__weekly { justify-content: flex-start; }
}

/* ================================================================ 4) /onlyfans-chatting-service/: one fan, over time */
.h1fan__track { position: relative; margin: 0 0 22px; }
.h1fan__labels { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; font: 700 10.5px/1.25 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.h1fan__labels span:nth-child(2) { text-align: center; }
.h1fan__labels span:last-child { text-align: right; }
.h1fan__labels span.on, .h1fan:not(.h1-arm) .h1fan__labels span { color: var(--ember); }
.h1-arm .h1fan__labels span:not(.on) { opacity: .5; translate: none; }
.h1fan__rail { position: relative; height: 16px; margin: 0 7px; }
.h1fan__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--line); }
.h1fan__fill { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(1); }
.h1fan__rider { position: absolute; inset: 0; transform: translateX(100%); }
.h1fan__me { position: absolute; top: 0; left: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ember) 18%, transparent); }
.h1-arm .h1fan__fill { transform: scaleX(0); transition: transform calc(var(--dur) * 1.4) var(--ease); }
.h1-arm .h1fan__rider { transform: translateX(0); transition: transform calc(var(--dur) * 1.4) var(--ease); }
.h1-arm:is([data-step="4"], [data-step="5"]) .h1fan__fill { transform: scaleX(.5); }
.h1-arm:is([data-step="4"], [data-step="5"]) .h1fan__rider { transform: translateX(50%); }
.h1-arm:is([data-step="6"], [data-step="7"]) .h1fan__fill { transform: scaleX(1); }
.h1-arm:is([data-step="6"], [data-step="7"]) .h1fan__rider { transform: translateX(100%); }
.h1fan__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.h1fan__h { margin: 0 0 10px; font: 700 10.5px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.h1fan__h .i { width: 14px; height: 14px; margin: -2px 6px 0 0; color: var(--ember); }
.h1fan__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.h1fan__chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font: 500 12.5px/1.35 var(--f-body); color: var(--body); }
.h1fan__chip b { font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.h1fan__chip--top { border-color: color-mix(in srgb, var(--ember) 55%, transparent); background: color-mix(in srgb, var(--ember) 10%, var(--surface)); }
.h1fan__note { margin: 12px 0 0; max-width: 360px; font: 500 12.5px/1.5 var(--f-body); color: var(--muted); }
.h1fan__chat { display: flex; flex-direction: column; gap: 8px; }
.h1fan__b { max-width: min(330px, 92%); margin: 0; padding: 9px 13px; border-radius: 16px; font: 500 13px/1.45 var(--f-body); }
.h1fan__b--in { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--surface); border: 1px solid var(--line); color: var(--body); }
.h1fan__b--out { align-self: flex-end; border-bottom-right-radius: 5px; background: color-mix(in srgb, var(--ember) 16%, var(--bg)); border: 1px solid color-mix(in srgb, var(--ember) 30%, transparent); color: var(--ink); }
.h1fan__who { margin: 2px 0 0; align-self: flex-end; font: 500 11.5px/1.3 var(--f-body); color: var(--faint); }
.h1fan__blast { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 20px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.h1fan__blast p { margin: 0; font: 500 12.5px/1.4 var(--f-body); color: var(--muted); }
.h1fan__blast p b { color: var(--ink); font-weight: 700; }
.h1fan__copies { display: flex; gap: 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.h1fan__copies span { flex: 0 0 auto; padding: 5px 10px; border-radius: 12px; border: 1px dashed var(--line-strong); font: 500 11.5px/1.3 var(--f-body); color: var(--faint); white-space: nowrap; }
@container (min-width: 620px) {
  .h1fan__body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; }
  .h1fan__blast { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
}

/* ================================================================ 5) /onlyfans-marketing-agency/: how a reel is made and tracked */
.h1reel__grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
.h1reel__make { display: flex; align-items: flex-end; gap: 14px; }
.h1reel__clip { position: relative; width: 104px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong);
  background: radial-gradient(90% 60% at 30% 25%, color-mix(in srgb, var(--ember) 26%, transparent), transparent 70%),
              radial-gradient(80% 60% at 80% 90%, color-mix(in srgb, var(--sage) 14%, transparent), transparent 70%), var(--surface); }
.h1reel__play { position: absolute; left: 50%; top: 58%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--inset) 60%, transparent); color: var(--ink); }
.h1reel__play svg { width: 12px; height: 12px; margin-left: 2px; fill: currentColor; }
.h1reel__raw { position: absolute; left: 7px; top: 7px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--inset) 70%, transparent); font: 700 9.5px/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.h1reel__hook { position: absolute; left: 8px; right: 8px; top: 19%; padding: 5px 6px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 800 10px/1.25 var(--f-display); text-align: center; }
.h1reel__capt { position: absolute; left: 8px; right: 22px; bottom: 10px; display: grid; gap: 4px; }
.h1reel__capt i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.h1reel__capt i:last-child { width: 60%; }
.h1reel__edit { display: grid; gap: 8px; width: 138px; }
.h1reel__strip { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; height: 30px; padding: 3px; border-radius: 8px; background: var(--inset); border: 1px solid var(--line); }
.h1reel__strip i { border-radius: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.h1reel__keep { position: absolute; top: 1px; bottom: 1px; left: calc(var(--a) * 1%); width: calc(var(--w) * 1%); border-radius: 5px; border: 2px solid var(--ember); background: color-mix(in srgb, var(--ember) 14%, transparent); }
.h1reel__cut { position: absolute; top: -5px; bottom: -5px; left: calc(var(--x) * 1%); width: 2px; margin-left: -1px; background: var(--ember-hi); border-radius: 1px; transform-origin: 50% 0; }
.h1-arm .h1reel__cut:not(.on) { translate: none; transform: scaleY(0); opacity: 1; }
.h1reel__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font: 500 12px/1.3 var(--f-body); color: var(--muted); }
.h1reel__steps li { display: flex; align-items: center; gap: 6px; }
.h1reel__steps .i { width: 13px; height: 13px; color: var(--sage); stroke-width: 2.6; }
.h1reel__to { position: relative; width: 10px; height: 36px; margin: 8px 0; overflow: hidden; }
.h1reel__to::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.h1reel__flow { position: absolute; left: 0; right: 0; top: -100%; height: 200%; }
.h1reel__flow i { position: absolute; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); top: calc(var(--p) * 1%); }
.h1reel__plats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }
/* r7 (L1, 06.10.2026): two posting destinations, each a labelled chip (Instagram as a Reel, TikTok as a TikTok) */
.h1reel__plats li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 14px 8px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); text-align: left; }
.h1reel__plats li > span { display: grid; gap: 1px; min-width: 0; }
.h1reel__plats b { font: 700 13px/1.2 var(--f-display); color: var(--ink); white-space: nowrap; }
.h1reel__plats small { font: 500 11.5px/1.25 var(--f-body); color: var(--muted); white-space: nowrap; }
.h1reel__page { width: min(250px, 100%); padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ember) 40%, transparent); background: color-mix(in srgb, var(--ember) 7%, var(--bg)); text-align: left; }
.h1reel__page b { display: block; font: 700 14px/1.3 var(--f-display); color: var(--ink); }
.h1reel__page small { display: block; margin-top: 2px; font: 500 12px/1.4 var(--f-body); color: var(--muted); }
.h1reel__sub { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 10px 5px 7px; border-radius: 999px; background: color-mix(in srgb, var(--sage) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sage) 35%, transparent); font: 600 12px/1.2 var(--f-body); color: var(--sage); }
.h1reel__sub .plogo { width: 14px; height: 14px; color: var(--sage); }
@keyframes h1-flow-y { from { transform: translateY(0); } to { transform: translateY(25%); } }
@keyframes h1-flow-x { from { transform: translateX(0); } to { transform: translateX(25%); } }
html.mo .h1-arm .h1reel__to.on .h1reel__flow { animation: h1-flow-y 1.1s linear infinite; }
.h1-arm:not(.is-vis) .h1reel__flow { animation-play-state: paused !important; }
@container (min-width: 640px) {
  .h1reel__grid { grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto; align-items: center; justify-items: stretch; }
  .h1reel__edit { width: 132px; }
  .h1reel__plats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }   /* r7: the two destinations, stacked */
  .h1reel__to { width: auto; height: 10px; margin: 0 8px; }
  .h1reel__to::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
  .h1reel__flow { top: 0; bottom: 0; height: auto; left: -100%; right: auto; width: 200%; }
  .h1reel__flow i { top: 2px; left: calc(var(--p) * 1%); }
  html.mo .h1-arm .h1reel__to.on .h1reel__flow { animation-name: h1-flow-x; }
  .h1reel__page { width: 190px; }
}

/* ================================================================ 6) /onlyfans-management/: one team around your page */
.h1orbit__box { position: relative; width: min(100%, 470px); aspect-ratio: 1 / 1; margin: 0 auto; }
.h1orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h1orbit__ring { fill: none; stroke: color-mix(in srgb, var(--ember) 45%, transparent); stroke-width: .34; }
.h1orbit__ring--faint { stroke: var(--line-strong); stroke-width: .3; stroke-dasharray: .6 1.6; }
.h1orbit__spoke { fill: none; stroke: color-mix(in srgb, var(--ember) 40%, transparent); stroke-width: .3; stroke-linecap: round; }
.h1orbit__you { position: absolute; z-index: 1; left: 50%; top: 56%; width: 24%; aspect-ratio: 1 / 1; margin: 0; display: grid; place-content: center; text-align: center; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--ember) 22%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--ember) 50%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ember) 6%, transparent); }
.h1orbit__you b { font: 700 clamp(15px, 4.4cqi, 20px)/1.1 var(--f-display); color: var(--ink); }
.h1orbit__you small { display: block; margin-top: 3px; font: 500 clamp(10.5px, 2.8cqi, 12.5px)/1.25 var(--f-body); color: var(--muted); }
.h1-arm .h1orbit__you:not(.on) { translate: -50% -50%; }
.h1orbit__node { position: absolute; z-index: 1; margin: 0; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 32%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; translate: -50% -22px; }
.h1-arm .h1orbit__node:not(.on) { translate: -50% -22px; }
.h1orbit__node--top { translate: -50% calc(-100% + 22px); }
.h1orbit__node--top .h1orbit__ic { order: 2; }
.h1orbit__node b, .h1orbit__node small { text-shadow: 0 0 4px var(--bg-alt), 0 0 10px var(--bg-alt); }
.h1-arm .h1orbit__node--top:not(.on) { translate: -50% calc(-100% + 22px); }
.h1orbit__ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 1px solid color-mix(in srgb, var(--ember) 55%, transparent); color: var(--ember); box-shadow: 0 0 0 6px var(--bg-alt); }
.h1orbit__ic .i { width: 19px; height: 19px; }
.h1orbit__node b { font: 700 clamp(12.5px, 3.3cqi, 14.5px)/1.2 var(--f-display); color: var(--ink); }
.h1orbit__node small { font: 500 clamp(11px, 2.7cqi, 12.5px)/1.3 var(--f-body); color: var(--muted); }
.h1orbit__runner { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 56%; }
.h1orbit__runner i { position: absolute; left: 50%; top: 22%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ember-hi); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ember) 20%, transparent); }
@keyframes h1-orbit { to { rotate: 360deg; } }
html.mo .h1-arm .h1orbit__runner.on { animation: h1-orbit 9s linear infinite; }
/* the report chip gives a small nod each time the runner passes the bottom of the ring (runner starts one step earlier) */
@keyframes h1-nod { 0%, 44%, 58%, 100% { scale: 1; } 50% { scale: 1.06; } }
html.mo .h1-arm .h1orbit__report.on { animation: h1-nod 9s linear calc(var(--dur) * 0 - 850ms) infinite; }
.h1-arm:not(.is-vis) .h1orbit__report { animation-play-state: paused !important; }
.h1-arm:not(.is-vis) .h1orbit__runner { animation-play-state: paused !important; }
.h1orbit__report { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; max-width: 100%; margin: 4px auto 0; padding: 7px 12px; border-radius: 999px; background: var(--grad); color: var(--on-ember); font: 700 clamp(11px, 2.9cqi, 12.5px)/1.25 var(--f-body); box-shadow: 0 10px 24px -14px var(--inset); }
.h1orbit__report .i { width: 15px; height: 15px; }
@container (max-width: 439px) { .h1orbit__node small, .h1orbit__you small { display: none; } }

/* ================================================================ 7) /account-access-and-security/: your side, our side */
.h1keys__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.h1keys__side { min-width: 0; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.h1keys__side--you { border-color: color-mix(in srgb, var(--sage) 35%, transparent); }
.h1keys__h { margin: 0 0 12px; font: 700 10.5px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.h1keys__side--you .h1keys__h { color: var(--sage); }
.h1keys__you { display: flex; align-items: center; gap: 16px; }
.h1keys__phone { flex: 0 0 auto; width: 92px; }
.h1keys__phone .g1phone__screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6%; text-align: center; background: var(--bg-alt); }
.h1keys__app { font: 700 9px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.h1keys__code { display: flex; gap: 1px; font: 700 12.5px/1 var(--f-mono); color: var(--ink); }
.h1keys__code span:nth-child(4) { margin-left: 4px; }
.h1keys__timer { width: 16px; height: 16px; }
.h1keys__timer circle { fill: none; stroke: var(--sage); stroke-width: 3; }
.h1keys__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font: 500 12.5px/1.35 var(--f-body); color: var(--body); }
.h1keys__list li { display: flex; align-items: flex-start; gap: 7px; }
.h1keys__list .i { width: 14px; height: 14px; margin-top: 1px; color: var(--sage); flex: 0 0 auto; }
.h1keys__call { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; text-align: center; }
.h1keys__call p { margin: 0; padding: 8px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--ember) 50%, transparent); font: 600 12.5px/1.4 var(--f-body); color: var(--ink); }
.h1keys__call p small { display: block; font-weight: 500; color: var(--muted); }
.h1keys__arrow { width: 22px; height: 22px; color: var(--ember); rotate: 90deg; flex: 0 0 auto; }
.h1keys__card { padding: 11px 12px; border-radius: 12px; background: var(--inset); border: 1px solid var(--line-strong); }
.h1keys__card b { display: block; font: 700 13px/1.3 var(--f-display); color: var(--ink); }
.h1keys__card small { display: block; font: 500 12px/1.35 var(--f-body); color: var(--muted); }
.h1keys__field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 9px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font: 600 11.5px/1.2 var(--f-mono); color: var(--muted); }
.h1keys__field > span { white-space: nowrap; }
.h1keys__ok { display: inline-flex; align-items: center; gap: 5px; color: var(--sage); font-family: var(--f-body); font-weight: 700; }
.h1keys__ok .i { width: 13px; height: 13px; stroke-width: 2.6; }
.h1keys__pw { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); }
.h1keys__pw > .i { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.h1keys__pw span { position: relative; font: 600 12px/1.3 var(--f-mono); color: var(--muted); white-space: nowrap; }
.h1keys__strike { position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; margin-top: -1px; background: var(--stamp); border-radius: 1px; }
.h1keys__pw em { margin-left: auto; font: 700 10.5px/1.2 var(--f-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
.h1keys__end { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font: 500 12.5px/1.45 var(--f-body); color: var(--body); }
.h1keys__end .i { width: 15px; height: 15px; margin-top: 2px; color: var(--sage); flex: 0 0 auto; }
.h1keys .h1keys__code span { transition: opacity var(--dur-hover) var(--ease); }
.h1-arm .h1keys__code:not(.on) span { opacity: 0; }
.h1-arm .h1keys__code:not(.on) { opacity: 1; translate: none; }
.h1-arm .h1keys__code.on span { transition-delay: calc(var(--d) * 110ms); }
@keyframes h1-timer { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1; } }
.h1keys__timer circle { stroke-dasharray: 1 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
html.mo .h1-arm.is-vis .h1keys__timer circle { animation: h1-timer 8s linear infinite; }
@container (min-width: 640px) {
  .h1keys__grid { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; }
  .h1keys__phone { width: 108px; }
  .h1keys__code { font-size: 14px; }
  .h1keys__call { flex-direction: column; gap: 8px; }
  .h1keys__arrow { rotate: none; }
}

/* ================================================================ 8) /about/: since 2021 + across time zones */
.h1since__line { position: relative; padding: 0 6px; }
.h1since__rail { position: relative; height: 2px; margin: 10px 0 0; border-radius: 2px; background: var(--line); }
.h1since__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(1); }
.h1-arm .h1since__fill { transform: scaleX(0); transition: transform calc(var(--dur) * 1.1) var(--ease); }
.h1-arm[data-step="2"] .h1since__fill { transform: scaleX(.2); }
.h1-arm[data-step="3"] .h1since__fill { transform: scaleX(.4); }
.h1-arm[data-step="4"] .h1since__fill { transform: scaleX(.6); }
.h1-arm[data-step="5"] .h1since__fill { transform: scaleX(.8); }
.h1-arm:is([data-step="6"], [data-step="7"], [data-step="8"], [data-step="9"], [data-step="10"], [data-step="11"]) .h1since__fill { transform: scaleX(1); }
.h1since__years { position: relative; list-style: none; margin: 0; padding: 0; height: 40px; }
.h1since__years li { position: absolute; top: -6px; left: calc(var(--x) * 1%); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 600 12px/1 var(--f-mono); color: var(--muted); }
.h1since__years li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ember); }
.h1since__years li:first-child { translate: -5px 0; align-items: flex-start; }
.h1since__years li:last-child { translate: calc(-100% + 5px) 0; align-items: flex-end; color: var(--ember); font-weight: 700; }
.h1since__years li:last-child::before { background: var(--ember); }
.h1-arm .h1since__years li:not(.on) { opacity: 0; }
.h1-arm .h1since__years li:first-child:not(.on) { translate: -5px 6px; }
.h1-arm .h1since__years li:last-child:not(.on) { translate: calc(-100% + 5px) 6px; }
.h1-arm .h1since__years li:not(:first-child):not(:last-child):not(.on) { translate: -50% 6px; }
.h1since__now { position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; pointer-events: none; }
@keyframes h1-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.h1since__now::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ember); opacity: 0; }
html.mo .h1-arm.is-vis .h1since__now.on::after { animation: h1-ping 2.4s var(--ease) infinite; }
.h1since__zones { position: relative; margin: 18px 0 0; }
.h1since__zh { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 8px; font: 700 10.5px/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.h1since__zh span:last-child { color: var(--faint); letter-spacing: .08em; }
.h1since__band { position: relative; height: 74px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px calc(100% / 24)), var(--inset); }
.h1since__sun { position: absolute; top: 0; bottom: 0; left: -50%; width: 200%; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 8%, color-mix(in srgb, var(--ember) 13%, transparent) 17%, transparent 30%, transparent 58%, color-mix(in srgb, var(--ember) 13%, transparent) 67%, transparent 80%); }
@keyframes h1-sun { from { transform: translateX(0); } to { transform: translateX(-25%); } }
html.mo .h1-arm.is-vis .h1since__sun { animation: h1-sun 16s linear infinite; }
.h1since__dot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ember-hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 16%, transparent); }
.h1since__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ember); opacity: 0; }
html.mo .h1-arm .h1since__dot.on::after { animation: h1-ping 1.4s var(--ease) 1 both; }
.h1since__langs { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0 0; }
.h1since__langs span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: 600 12px/1.2 var(--f-body); color: var(--ink); }
.h1since__langs .i { width: 14px; height: 14px; color: var(--ember); }

/* ================================================================ reduced motion: nothing moves, every piece at its end state */
@media (prefers-reduced-motion: reduce) {
  .h1x *, .h1x *::before, .h1x *::after { animation: none !important; transition: none !important; }
}