/* ============================================================
   MarkedExiled — Promote Your Business
   A normal scrolling document, unlike the home route.
   ============================================================ */

.route--pyb {
  padding-bottom: clamp(64px, 12vh, 140px);
  /* the slide-in transforms reach past the viewport before they land;
     clip rather than hidden, so no nested scroll container is created */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ---------- hero ---------- */

.pyb-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(56px, 13vh, 150px) var(--edge) clamp(36px, 7vh, 80px);
  text-align: center;
}

.pyb-hero__title {
  position: relative;
  margin: 0 auto;
  max-width: 18ch;
  font-size: clamp(2.1rem, 5.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.pyb-hero__note {
  /* the hint curve swings through this gap, so keep it open */
  margin: clamp(52px, 9vh, 96px) 0 0;
  font-size: 15px;
  color: var(--ink-40);
}

/* the arrow nudge is still used by the deck's scroll cue */
@keyframes cueNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---------- notice ---------- */

.notice {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
  padding: 14px clamp(16px, 2.2vw, 22px);
  border: 1px solid rgba(255, 46, 99, 0.35);
  border-radius: 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 46, 99, 0.16), transparent 62%),
    rgba(255, 46, 99, 0.05);
  text-align: left;
}

.notice__icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--accent);
  filter: drop-shadow(0 0 10px rgba(255, 46, 99, 0.5));
}

.notice__title {
  margin: 0;
  font-size: clamp(0.88rem, 1.25vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- tabs: just the words, on one shared line ---------- */

.offers {
  position: relative;
  max-width: 1080px;
  margin: clamp(40px, 7vh, 80px) auto 0;
  padding: 0 var(--edge);
  text-align: center;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
}

/* each button carries its own slice of the underline, and they sit flush,
   so the line reads as one rule across the whole row */
.tab {
  flex: 1 1 auto;
  padding: 0 14px 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: none;
  color: var(--ink-40);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}

.tab:hover { color: var(--ink-60); }

.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- a single offer, centred ---------- */

.offer {
  padding: clamp(32px, 5.5vh, 64px) 0 0;
  animation: offerIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.offer[hidden] { display: none; }

@keyframes offerIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.offer__title {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.15;
}

.offer__text {
  margin: 18px auto 0;
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink-60);
}

.offer__list {
  margin: 26px auto 0;
  padding: 0;
  max-width: 54ch;
  list-style: none;
}

.offer__list li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-60);
}

/* the partnership examples are paragraphs, not one-liners */
.offer__list--long {
  max-width: 58ch;
  text-align: left;
}

.offer__list--long li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 20px;
}

.offer__list--long li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.offer__list b { color: var(--ink); font-weight: 600; }

.offer__note {
  margin: 22px auto 0;
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-40);
}

.offer__price {
  margin: clamp(30px, 5vh, 52px) auto 0;
  padding-top: clamp(24px, 4vh, 36px);
  max-width: 44ch;
  border-top: 1px solid var(--hairline);
}

.offer__price-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.offer__price-unit {
  display: block;
  margin-top: 6px;
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-40);
}

.offer__price-value {
  position: relative;
  display: inline-block;
  margin: 12px 0 0;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.offer__price-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-40);
}

/* ---------- how payment works ---------- */

.currency {
  max-width: 640px;
  margin: clamp(56px, 10vh, 110px) auto 0;
  padding: 0 var(--edge);
  text-align: center;
}

.currency__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.currency__lead {
  margin: 14px 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.currency__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-60);
}

.currency__text b { color: var(--ink); font-weight: 600; }

.currency__terms {
  margin: 22px auto 0;
  padding: 14px 20px;
  max-width: 52ch;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- agreement ---------- */

.agreement {
  max-width: 1080px;
  margin: clamp(56px, 11vh, 120px) auto 0;
  padding: clamp(32px, 5vh, 56px) var(--edge) 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.agreement__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.agreement__title {
  margin: 14px 0 0;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.agreement__lead {
  margin: 18px auto 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink);
}

/* chapter outline */

.toc {
  margin: clamp(26px, 4vh, 40px) auto 0;
  max-width: 760px;
}

.toc__label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.toc__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-60);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}

.toc__list a::before {
  counter-increment: toc;
  content: counter(toc);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-40);
}

.toc__list a:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.3);
}

/* the sticky nav must not cover a jumped-to chapter */
.doc h3 { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* the document body itself */
.doc {
  max-width: 72ch;
  margin: clamp(28px, 4vh, 44px) auto 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-60);
}

.doc h3 {
  margin: 44px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.doc h4 {
  margin: 26px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.doc p { margin: 12px 0 0; }

.doc ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.doc li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.doc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.doc b { color: var(--ink); font-weight: 600; }

/* ---------- contact ---------- */

.contact {
  max-width: 900px;
  margin: clamp(56px, 11vh, 120px) auto 0;
  padding: clamp(40px, 7vh, 80px) var(--edge) 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.contact__label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.contact__email {
  display: inline-block;
  margin: 18px 0 0;
  font-size: clamp(1rem, 3.4vw, 2.7rem);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  word-break: break-word;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  transition: border-color 200ms ease;
}

.contact__email:hover { border-bottom-color: var(--ink); }

.contact__note {
  margin: 28px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-40);
}

/* ---------- narrow ---------- */

@media (max-width: 620px) {
  .tab {
    flex: 1 1 40%;
    padding: 0 8px 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    white-space: normal;
  }
}

/* ============================================================
   Route transition — the mark floods the screen, then lifts away
   ============================================================ */

.swipe {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: none;
  visibility: hidden;
  pointer-events: none;
}

.swipe[data-state="cover"],
.swipe[data-state="uncover"] {
  visibility: visible;
  pointer-events: auto;        /* swallow clicks mid-swap */
}

/* The mask. A black overlay on a black page is invisible, which is why the
   sweep never read as an animation - it needed an edge you can see. This is
   an ellipse that grows up from under the fold with a lit rim. */
.swipe__veil {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 260vmax;
  height: 260vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, #000 72%, #0b0b0d 93%, #141419 100%);
  box-shadow:
    0 0 0 2px rgba(255, 46, 99, 0.42),
    0 0 46px rgba(255, 46, 99, 0.30),
    0 0 130px rgba(255, 46, 99, 0.15);
  transform: translate(-50%, 58%) scale(0.04);
  transform-origin: 50% 100%;
}

/* 1. the ellipse sweeps up */
.swipe[data-state="cover"] .swipe__veil {
  transform: translate(-50%, 58%) scale(1);
  transition: transform 460ms cubic-bezier(0.5, 0, 0.3, 1);
}

/* 3. and carries on up and away */
.swipe[data-state="uncover"] .swipe__veil {
  transform: translate(-50%, -36%) scale(1);
  opacity: 0;
  transition:
    transform 560ms cubic-bezier(0.6, 0, 0.3, 1),
    opacity 300ms ease 280ms;
}

.swipe__mark {
  position: relative;
  width: clamp(84px, 11vw, 158px);
  height: auto;
  color: #fff;
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.74);
}

/* 2. the mark arrives once the ellipse has covered */
.swipe[data-state="cover"] .swipe__mark {
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms ease 290ms,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 270ms;
}

.swipe[data-state="uncover"] .swipe__mark {
  opacity: 0;
  transform: scale(1.2) translate3d(0, -7vh, 0);
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(0.7, 0, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .swipe__veil, .swipe__mark { transition: none; }
  .offer { animation: none; }
  .pyb-hero__arrow { animation: none; }
}


/* ============================================================
   Entry hints — a curve swings out from "engagement" and comes back
   up onto "deserves", which lights up and bursts. Runs once on
   opening the page, then clears itself.
   ============================================================ */

/* plain inline: inline-block would let the full stop after "deserves"
   break onto its own line */
.hint-word,
.hint-target {
  display: inline;
}

.hint-fx,
.hint-burst {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}

.hint-fx {
  color: var(--accent);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 46, 99, 0.85));
}

/* stroke-dasharray / offset are set from JS once the path is measured */
.hint-fx__head { opacity: 0; }

.route--pyb.is-hinting .hint-fx        { animation: fxShow 4.8s linear forwards; }
.route--pyb.is-hinting .hint-fx__curve { animation: fxDraw 4.8s ease-in-out forwards; }
.route--pyb.is-hinting .hint-fx__head  { animation: fxHead 4.8s ease forwards; }
.route--pyb.is-hinting .hint-target    { animation: targetGlow 4.8s ease forwards; }

@keyframes fxShow {
  0%, 2% { opacity: 0; }
  5%, 82% { opacity: 1; }
  100%   { opacity: 0; }
}

/* drawn in, held, then erased from the tail - per-segment easing, since a
   single timing function across the whole keyframe set reads as linear */
@keyframes fxDraw {
  0%, 3% {
    stroke-dashoffset: var(--dash, 400px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  27% {
    stroke-dashoffset: 0;
    animation-timing-function: linear;
  }
  54% {
    stroke-dashoffset: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  80%, 100% {
    stroke-dashoffset: calc(var(--dash, 400px) * -1);
  }
}

@keyframes fxHead {
  0%, 23% { opacity: 0; }
  28%     { opacity: 1; }
  72%     { opacity: 1; }
  80%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* lights up as the curve lands, holds ~2.5s, settles back */
@keyframes targetGlow {
  0%, 23% {
    color: #ffffff;
    text-shadow: none;
  }
  29%, 75% {
    color: var(--accent);
    text-shadow:
      0 0 18px rgba(255, 46, 99, 0.85),
      0 0 46px rgba(255, 46, 99, 0.45);
  }
  100% {
    color: #ffffff;
    text-shadow: none;
  }
}

/* ---------- burst ---------- */

.hint-burst b {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 5px);
  height: var(--h, 11px);
  margin: calc(var(--h, 11px) / -2) 0 0 calc(var(--w, 5px) / -2);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(255, 46, 99, 0.8);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(var(--r0, 0deg)) scale(0.5);
}

.route--pyb.is-hinting .hint-burst b {
  animation: burst 1500ms 1.12s forwards;
}

@keyframes burst {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--r0, 0deg)) scale(0.5);
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.3, 1);
  }
  10% {
    opacity: 1;
    transform:
      translate3d(calc(var(--dx) * 0.34), var(--lift, -16px), 0)
      rotate(calc(var(--r0, 0deg) + 34deg)) scale(1);
    /* and from here it is falling, accelerating, with no pause */
    animation-timing-function: cubic-bezier(0.34, 0, 0.9, 0.42);
  }
  88% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--dx), var(--fall, 240px), 0)
      rotate(var(--spin, 260deg)) scale(0.86);
  }
}


/* the price keeps its own underline sweep */
.offer__price-value::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow:
    0 0 10px rgba(255, 46, 99, 0.95),
    0 0 26px rgba(255, 46, 99, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}

.route--pyb.is-hinting .offer__price-value::after {
  animation: hintSweep 4.2s ease 0.9s forwards;
}

@keyframes hintSweep {
  0%   { transform: scaleX(0); opacity: 0; }
  8%   { opacity: 1; }
  24%  { transform: scaleX(1); opacity: 1; }
  80%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .route--pyb.is-hinting .hint-fx,
  .route--pyb.is-hinting .hint-fx__curve,
  .route--pyb.is-hinting .hint-fx__head,
  .route--pyb.is-hinting .hint-target,
  .route--pyb.is-hinting .hint-burst b,
  .route--pyb.is-hinting .offer__price-value::after { animation: none; }
}

/* ============================================================
   Deck — the promote route is four stages on one screen rather
   than one long scroll.

     0  hero, centred
     1  hero shrunk to the top, what you are buying underneath
     2  the agreement, scrolling normally inside its own layer
     3  the business email, reached only by agreeing
   ============================================================ */

.route--pyb {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.deck {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* ---------- the hero, shared by stages 0 and 1 ---------- */

.deck__hero {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%) scale(1);
  transform-origin: 50% 0;
  transition:
    top 460ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 460ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 320ms ease;
}

body[data-stage="1"] .deck__hero {
  top: 0;
  transform: translateY(clamp(6px, 1.4vh, 16px)) scale(var(--hero-scale, 0.34));
}

/* One line so it can stay bigger. The box is sized to the text itself
   (width: max-content) and the container's cap is lifted, so the line never
   overflows - an overflowing centred line is not centred the same way in
   every browser, which is what was throwing it off to one side. The scale
   that makes it fit is measured in js/site.js. */
body[data-stage="1"] .deck__hero .pyb-hero,
body[data-stage="2"] .deck__hero .pyb-hero,
body[data-stage="3"] .deck__hero .pyb-hero {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body[data-stage="1"] .deck__hero .pyb-hero__title,
body[data-stage="2"] .deck__hero .pyb-hero__title,
body[data-stage="3"] .deck__hero .pyb-hero__title {
  max-width: none;
  width: max-content;
  white-space: nowrap;

  /* max-content is wider than a phone screen, and margin-inline:auto is
     over-constrained there - the browser keeps the left margin, drops the
     right, and the scale preserves the drift. Offsetting by half the box
     centres it whether it fits or overflows. */
  margin-inline: 0;
  left: 50%;
  translate: -50%;
}

body[data-stage="2"] .deck__hero,
body[data-stage="3"] .deck__hero {
  top: 0;
  transform: translateY(-9vh) scale(var(--hero-scale, 0.34));
  opacity: 0;
  pointer-events: none;
}

.deck__hero .pyb-hero { padding-top: 0; padding-bottom: 0; }

.deck__hero .pyb-hero__note {
  transition: opacity 400ms ease;
}

body:not([data-stage="0"]) .deck__hero .pyb-hero__note { opacity: 0; }

/* ---------- scroll cue ---------- */

.deck__cue {
  margin: clamp(26px, 5vh, 54px) 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
  text-align: center;
  transition: opacity 400ms ease;
}

.deck__cue-arrow {
  display: inline-block;
  margin-left: 8px;
  animation: cueNudge 1.8s ease-in-out infinite;
}

body:not([data-stage="0"]) .deck__cue { opacity: 0; }

/* ---------- the stage layers ---------- */

.deck__layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 76px, 0);
  /* leaving: lifts up and fades out */
  transition:
    opacity 380ms cubic-bezier(0.4, 0, 0.9, 0.4),
    transform 460ms cubic-bezier(0.4, 0, 0.9, 0.4),
    visibility 0s linear 460ms;
}

.deck__layer.is-live {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* arriving: rises from below and fades in, overlapping the tail of the
     one leaving so there is never a gap of black between them */
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1) 130ms,
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1) 130ms,
    visibility 0s linear 0s;
}

/* a layer you have gone past leaves upward */
.deck__layer.is-past {
  transform: translate3d(0, -90px, 0);
}

/* each layer scrolls inside itself when it needs to */
.deck__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Reserve the scrollbar on both sides. Without this, a layer that
     overflows shifts its content left by the scrollbar's width while the
     hero - which sits outside the scroller - stays on the true centre, and
     the two no longer line up. */
  scrollbar-gutter: stable both-edges;
}

/* stage 1 starts below the shrunken hero */
.deck__layer--offers .deck__scroll {
  padding-top: clamp(120px, 21vh, 210px);
  padding-bottom: clamp(40px, 8vh, 90px);
}

.deck__layer--doc .deck__scroll,
.deck__layer--contact .deck__scroll {
  padding-top: clamp(28px, 5vh, 64px);
  padding-bottom: clamp(40px, 8vh, 90px);
}

.deck__layer--contact .deck__scroll {
  display: grid;
  place-items: center;
}

.deck__layer--contact .contact {
  margin: 0 auto;
  border-top: 0;
}

/* the sections no longer own their own vertical rhythm */
.deck__layer .notice { margin-top: 0; }
.deck__layer .offers { margin-top: clamp(26px, 5vh, 56px); }
.deck__layer .agreement { margin-top: 0; border-top: 0; }

/* ============================================================
   Entry animation — everything on an arriving stage comes in,
   one beat after another.
   ============================================================ */

[data-in] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

.is-live [data-in].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms),
    transform 780ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms);
}

/* ============================================================
   The agreement gate
   ============================================================ */

.agree {
  max-width: 1080px;
  margin: clamp(44px, 8vh, 90px) auto 0;
  padding: clamp(28px, 5vh, 52px) var(--edge) 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.agree__btn {
  --glow: 0, 214, 132;
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(24px, 3.2vw, 40px);
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9999px;
  color: #EFFFF8;
  font: inherit;
  font-size: clamp(0.92rem, 1.45vw, 1.06rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;

  background: rgba(var(--glow), 0.14);

  /* light blur, but pushed contrast and saturation so what shows through
     reads as refracted rather than fogged */
  -webkit-backdrop-filter: blur(4px) saturate(2.4) contrast(1.18) brightness(1.12);
          backdrop-filter: blur(4px) saturate(2.4) contrast(1.18) brightness(1.12);

  /* the look comes from stacked inset speculars, not from the blur */
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.85),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.85),
    inset 7px -7px 2px -7px rgba(var(--glow), 0.95),
    inset -7px 7px 2px -7px rgba(var(--glow), 0.95),
    inset 0 0 18px rgba(var(--glow), 0.22),
    inset 0 0 2px rgba(0, 0, 0, 0.65),
    0 6px 30px rgba(var(--glow), 0.42),
    0 0 58px rgba(var(--glow), 0.30);

  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease,
    background-color 220ms ease;
}

/* a second, heavier blur pulled to the edges: glass bends most at its rim */
.agree__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(11px) saturate(1.7);
          backdrop-filter: blur(11px) saturate(1.7);
  -webkit-mask: radial-gradient(120% 150% at 50% 50%, transparent 38%, #000 82%);
          mask: radial-gradient(120% 150% at 50% 50%, transparent 38%, #000 82%);
  pointer-events: none;
  z-index: -1;
}

/* the caustic highlight that slides along the rim, softened so the white
   and the green bleed into one another instead of banding */
.agree__btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(112deg,
    transparent 26%,
    rgba(255, 255, 255, 0.4) 42%,
    rgba(150, 255, 214, 0.55) 50%,
    rgba(var(--glow), 0.45) 58%,
    transparent 74%);
  filter: blur(9px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: glassSheen 5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.agree__btn:hover {
  background: rgba(var(--glow), 0.12);
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.95),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.95),
    inset 6px -6px 1px -6px rgba(var(--glow), 0.9),
    inset -6px 6px 1px -6px rgba(var(--glow), 0.9),
    inset 0 0 2px rgba(0, 0, 0, 0.6),
    0 10px 34px rgba(var(--glow), 0.4),
    0 0 64px rgba(var(--glow), 0.3);
}

.agree__btn:focus-visible {
  outline: 2px solid #8CFFD0;
  outline-offset: 4px;
}

@keyframes glassSheen {
  0%, 62%, 100% { opacity: 0; transform: translateX(-28%); }
  70%           { opacity: 0.9; }
  86%           { opacity: 0; transform: translateX(28%); }
}



.agree__note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-40);
}

@media (prefers-reduced-motion: reduce) {
  .deck__hero, .deck__layer, [data-in] { transition: none; }
  [data-in] { opacity: 1; transform: none; }
  .agree__btn, .deck__cue-arrow { animation: none; }
}


/* ============================================================
   Stage 1 runs compact: the whole offer should sit on one screen
   so you only scroll when you actually want the next stage.
   ============================================================ */

.deck__layer--offers .deck__scroll {
  padding-top: clamp(68px, 10.5vh, 122px);
  padding-bottom: clamp(14px, 2.4vh, 30px);
}

.deck__layer--offers .notice {
  padding: 11px 16px;
  gap: 11px;
}

.deck__layer--offers .notice__icon { width: 18px; height: 18px; }
.deck__layer--offers .notice__title { font-size: 0.82rem; line-height: 1.35; }

.deck__layer--offers .offers { margin-top: clamp(16px, 3vh, 30px); }
.deck__layer--offers .tab { padding: 0 12px 11px; font-size: 11px; }

.deck__layer--offers .offer { padding-top: clamp(20px, 3.4vh, 38px); }
.deck__layer--offers .offer__title { font-size: clamp(1.15rem, 2vw, 1.55rem); }
.deck__layer--offers .offer__text {
  margin-top: 12px;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.55;
}
.deck__layer--offers .offer__list { margin-top: 16px; }
.deck__layer--offers .offer__list li { margin-bottom: 5px; font-size: 13.5px; }
.deck__layer--offers .offer__list--long li { margin-bottom: 9px; }
.deck__layer--offers .offer__note { margin-top: 14px; font-size: 13px; }

.deck__layer--offers .offer__price {
  margin-top: clamp(18px, 3vh, 32px);
  padding-top: clamp(15px, 2.4vh, 24px);
}
.deck__layer--offers .offer__price-value { font-size: clamp(1.45rem, 2.8vw, 2.2rem); }
.deck__layer--offers .offer__price-note { margin-top: 8px; font-size: 12px; }

.deck__layer--offers .currency {
  margin-top: clamp(20px, 3.6vh, 42px);
}
.deck__layer--offers .currency__lead { font-size: clamp(0.95rem, 1.3vw, 1.1rem); }
.deck__layer--offers .currency__text { margin-top: 10px; font-size: 13.5px; line-height: 1.55; }
.deck__layer--offers .currency__terms {
  margin-top: 16px;
  padding: 11px 16px;
  font-size: 13px;
}

/* ============================================================
   The agreement reads as a document: a legal mark to one side,
   and a line down the other that fills as you pass each chapter.
   ============================================================ */

.doc-seal {
  position: absolute;
  left: var(--doc-left, 42px);
  top: var(--seal-top, 14%);
  width: clamp(40px, 4.4vw, 68px);
  height: auto;
  transform: translateY(-50%);
  color: var(--accent);
  opacity: 1;
  filter:
    drop-shadow(0 0 10px rgba(255, 46, 99, 0.85))
    drop-shadow(0 0 28px rgba(255, 46, 99, 0.45));
  pointer-events: none;
  z-index: 2;
}

.doc-track {
  position: absolute;
  left: var(--doc-right, calc(100% - 46px));
  top: clamp(30px, 6vh, 64px);
  bottom: clamp(30px, 6vh, 64px);
  width: 2px;
  pointer-events: none;
  z-index: 2;
}

.doc-track__line,
.doc-track__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  border-radius: 2px;
}

.doc-track__line {
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}

.doc-track__fill {
  height: calc(var(--doc-p, 0) * 100%);
  background: var(--accent);
  box-shadow:
    0 0 8px rgba(255, 46, 99, 0.85),
    0 0 20px rgba(255, 46, 99, 0.4);
}

.doc-track__marks { position: absolute; inset: 0; }

.doc-track__mark {
  position: absolute;
  left: 1px;                       /* the line's own centre */
  top: calc(var(--at) * 100%);
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
}

.doc-track__mark b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: #000;
  transition: border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}

.doc-track__mark i {
  position: absolute;
  right: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.24);
  transition: color 300ms ease, text-shadow 300ms ease;
}

.doc-track__mark.is-on b {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 11px rgba(255, 46, 99, 0.9);
}

.doc-track__mark.is-on i {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255, 46, 99, 0.7);
}

/* the document itself gets out of the chrome's way */


/* ---------- the gate, pinned to the foot of the layer ---------- */

.agree {
  position: sticky;
  bottom: 0;
  margin-top: clamp(30px, 6vh, 64px);
  padding-top: clamp(20px, 3.4vh, 34px);
  padding-bottom: clamp(18px, 3vh, 30px);
  background: none;
  border: 0;
  z-index: 3;
  pointer-events: none;      /* the document still scrolls behind it */
}

.agree > * { pointer-events: auto; }

.agree__note {
  margin: 12px auto 0;
  display: table;               /* its own line, shrink-wrapped, centred */
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

/* ============================================================
   Contact stage
   ============================================================ */

.deck__layer--contact .contact {
  padding-top: 0;
  text-align: center;
}

.contact__icon {
  width: clamp(52px, 6vw, 84px);
  height: auto;
  color: #4BFFB0;
  filter: drop-shadow(0 0 18px rgba(0, 214, 132, 0.7));
}

.contact__head {
  margin: clamp(22px, 3.6vh, 40px) 0 clamp(12px, 2vh, 22px);
  font-size: clamp(2rem, 6.6vw, 6.4rem);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.contact__word {
  display: inline-block;
  white-space: nowrap;
}

.contact__word-base {
  text-shadow:
    0 0 20px rgba(0, 214, 132, 0.6),
    0 0 52px rgba(0, 214, 132, 0.32);
}


/* Stage 1 is scaled to whatever the tallest tab needs, so every panel
   lands inside the screen. The factor is measured in js/site.js. */
.deck__fit {
  /* zoom, not transform: a scaled transform leaves the box laid out at full
     size, so the block had to be clamped to the drawn height and the last
     card fell outside it. zoom shrinks the layout itself, so the height and
     the scroll extent come out right and nothing needs clipping. */
  zoom: var(--fit, 1);
}

/* ============================================================
   Stage changes: the same sweep, quicker
   ============================================================ */

.swipe__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid rgba(0, 214, 132, 0.9);
  opacity: 0;
  transform: scale(0.2);
  pointer-events: none;
}

.swipe--fast .swipe__mark { width: clamp(48px, 5.5vw, 88px); }

.swipe--fast[data-state="cover"] .swipe__veil {
  transition: transform 780ms cubic-bezier(0.38, 0, 0.28, 1);
}

/* the mark starts coming in while the ellipse is still travelling, so a
   slower sweep does not make the whole thing longer */
.swipe--fast[data-state="cover"] .swipe__mark {
  transition:
    opacity 260ms ease 200ms,
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1) 180ms;
}

.swipe--fast[data-state="uncover"] .swipe__veil {
  transition:
    transform 900ms cubic-bezier(0.45, 0, 0.32, 1),
    opacity 380ms ease 460ms;
}

.swipe--fast[data-state="uncover"] .swipe__mark {
  transition:
    opacity 240ms ease,
    transform 640ms cubic-bezier(0.5, 0, 0.35, 1);
}

/* --- seal: the button becomes the transition --- */

.swipe--seal .swipe__veil {
  left: var(--seal-x, 50%);
  bottom: auto;
  top: var(--seal-y, 50%);
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(0.02);
  background: radial-gradient(closest-side, #00120b 68%, #04261a 89%, #06382a 100%);
  box-shadow:
    0 0 0 2px rgba(0, 214, 132, 0.55),
    0 0 60px rgba(0, 214, 132, 0.35),
    0 0 160px rgba(0, 214, 132, 0.20);
}

.swipe--seal[data-state="cover"] .swipe__veil {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 600ms cubic-bezier(0.62, 0, 0.3, 1);
}

.swipe--seal[data-state="uncover"] .swipe__veil {
  transform: translate(-50%, -50%) scale(0.02);
  opacity: 0;
  transition:
    transform 700ms cubic-bezier(0.7, 0, 0.25, 1),
    opacity 300ms ease 420ms;
}

.swipe--seal .swipe__mark {
  color: #C9FFE8;
  filter:
    drop-shadow(0 0 22px rgba(0, 214, 132, 0.9))
    drop-shadow(0 0 60px rgba(0, 214, 132, 0.5));
}

.swipe--seal[data-state="cover"] .swipe__mark {
  transform: scale(1);
  transition:
    opacity 300ms ease 280ms,
    transform 640ms cubic-bezier(0.34, 1.35, 0.4, 1) 240ms;
}

.swipe--seal[data-state="cover"] .swipe__ring {
  left: var(--seal-x, 50%);
  top: var(--seal-y, 50%);
  animation: sealRing 1000ms cubic-bezier(0.16, 1, 0.3, 1) 220ms 2;
}

/* the mark shrinks away rather than blowing past the viewport */
.swipe--seal[data-state="uncover"] .swipe__mark {
  opacity: 0;
  transform: scale(0.12);
  transition:
    opacity 360ms ease 260ms,
    transform 700ms cubic-bezier(0.7, 0, 0.25, 1);
}

@keyframes sealRing {
  0%   { opacity: 0;   transform: scale(0.2); border-width: 3px; }
  12%  { opacity: 0.9; }
  100% { opacity: 0;   transform: scale(24);  border-width: 1px; }
}

/* the button itself swells into the circle as it goes */
.agree__btn.is-morphing {
  transform: scale(2.6);
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.62, 0, 0.3, 1),
    opacity 380ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .swipe--fast .swipe__mark,
  .swipe--seal .swipe__mark,
  .swipe__veil,
  .swipe__ring { transition: none; animation: none; }
}

/* ============================================================
   Phones
   ============================================================ */

@media (max-width: 900px) {
  /* no room beside the column for chrome, so it goes */
  .doc-seal,
  .doc-track { display: none; }

  .deck__layer--doc .agreement,
  .deck__layer--doc .agree { padding-left: var(--edge); padding-right: var(--edge); }
}

@media (max-width: 620px) {
  .agree__btn {
    height: auto;
    min-height: 54px;
    padding: 12px 20px;
    font-size: 0.86rem;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  .agree__note { font-size: 12px; }

  .deck__layer--offers .deck__scroll { padding-top: clamp(56px, 12vh, 108px); }

  .pyb-hero__title { font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .pyb-hero__note  { margin-top: clamp(36px, 7vh, 64px); font-size: 13px; }

  .contact__head  { font-size: clamp(1.7rem, 9.4vw, 3rem); }
  .contact__email { font-size: clamp(0.82rem, 4.6vw, 1.5rem); }
  .contact__note  { font-size: 13px; }
  .contact__icon  { width: clamp(42px, 12vw, 60px); }

  .notice { padding: 10px 13px; gap: 10px; }
  .notice__title { font-size: 0.78rem; }

  /* the sweep's rim would be a hard band on a small screen */
  .swipe__veil { box-shadow: 0 0 0 2px rgba(255, 46, 99, 0.4), 0 0 34px rgba(255, 46, 99, 0.26); }
  .swipe--fast .swipe__mark { width: clamp(44px, 14vw, 70px); }
}


/* The word reads as selected text. A second copy of it sits on top,
   black on green, clipped from the right - so as the field travels across,
   exactly the letters it has reached turn black and the rest do not. */
.contact__word {
  position: relative;
  display: inline-block;
  color: #4BFFB0;
}

.contact__word-base {
  position: relative;
  z-index: 0;
}

.contact__word-sel {
  position: absolute;
  left: -0.09em;
  right: -0.09em;
  top: -0.05em;
  bottom: -0.05em;
  padding: 0.05em 0.09em;
  background: #12D886;
  color: #00170E;
  text-shadow: none;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  z-index: 1;
}

/* in from the left */
.contact__word.is-selecting .contact__word-sel {
  clip-path: inset(0 0 0 0);
  transition: clip-path 760ms cubic-bezier(0.62, 0.02, 0.2, 1);
}

/* and away to the right, same direction */
.contact__word.is-clearing .contact__word-sel {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 680ms cubic-bezier(0.55, 0.05, 0.25, 1);
}

.contact__dot {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .contact__word-sel { transition: none; }
}

/* ============================================================
   Phone: a dropdown instead of a tab row, full-size copy, and a
   gate that floats near the bottom of the screen.
   ============================================================ */

.picker { display: none; }

@media (max-width: 620px) {
  .tabs { display: none; }

  /* ---------- custom service picker ---------- */

  .picker {
    display: block;
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    z-index: 5;
  }

  .picker__btn,
  .picker__menu {
    /* the gate's glass, monochrome - this is a control, not a call to
       action, so it should not pull the eye the way the gate does */
    background: rgba(255, 255, 255, 0.07);
    background-color: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(4px) saturate(1.6) brightness(1.1);
            backdrop-filter: blur(4px) saturate(1.6) brightness(1.1);
    box-shadow:
      inset 2px -2px 1px -1px rgba(255, 255, 255, 0.55),
      inset -2px 2px 1px -1px rgba(255, 255, 255, 0.55),
      inset 0 0 2px rgba(0, 0, 0, 0.6),
      0 6px 22px rgba(0, 0, 0, 0.55);
  }

  .picker__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
  }

  .picker__caret {
    flex: none;
    width: 12px;
    height: 8px;
    color: rgba(255, 255, 255, 0.65);
    transition: transform 260ms cubic-bezier(0.62, 0.02, 0.2, 1);
  }

  .picker__btn[aria-expanded="true"] .picker__caret { transform: rotate(180deg); }

  .picker__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    /* a dark base under the glass: an open menu has to be readable over
       whatever copy is behind it */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04)),
      rgba(12, 12, 14, 0.86);
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    transform-origin: 50% 0;
    transform: translateY(-6px) scale(0.98);
    opacity: 0;
    transition:
      opacity 220ms cubic-bezier(0.62, 0.02, 0.2, 1),
      transform 280ms cubic-bezier(0.62, 0.02, 0.2, 1);
  }

  .picker__menu[hidden] { display: none; }

  .picker.is-open .picker__menu {
    opacity: 1;
    transform: none;
  }

  .picker__menu li {
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-60);
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease;
  }

  .picker__menu li:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }

  .picker__menu li[aria-selected="true"] {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  }

  /* readable copy beats a fitted screen: let it scroll, and the stage only
     turns once the reader is actually at the end of it */
  .deck__fit { transform: none !important; height: auto !important; overflow: visible; }

  .deck__layer--offers .offer__title { font-size: 1.35rem; }
  .deck__layer--offers .offer__text { font-size: 0.95rem; line-height: 1.6; margin-top: 14px; }
  .deck__layer--offers .offer__list li { font-size: 0.9rem; margin-bottom: 8px; }
  .deck__layer--offers .offer__note { font-size: 0.85rem; }
  .deck__layer--offers .offer__price-value { font-size: 1.9rem; }
  .deck__layer--offers .offer__price-note { font-size: 0.8rem; }
  .deck__layer--offers .currency__lead { font-size: 1.02rem; }
  .deck__layer--offers .currency__text { font-size: 0.9rem; line-height: 1.6; }
  .deck__layer--offers .currency__terms { font-size: 0.85rem; }
  .deck__layer--offers .notice__title { font-size: 0.86rem; }
  .deck__layer--offers .deck__scroll { padding-bottom: clamp(30px, 7vh, 60px); }

  /* the gate floats just off the bottom of the screen */
  .agree {
    margin-top: clamp(36px, 7vh, 72px);
    padding-bottom: clamp(22px, 4.5vh, 40px);
  }

  .deck__layer--doc .deck__scroll { padding-bottom: 0; }
}


/* ============================================================
   Hover ring — drawn from the top centre, all the way round and
   back to it. Retracts the same way. Same easing as the selection
   sweep on "business", so the two read as one piece of motion.
   ============================================================ */

.agree__label {
  position: relative;
  z-index: 1;
}

.agree__ring {
  /* out of flow here as well as in js: an in-flow svg pads the button out
     by its own default 300x150 before the script has run */
  position: absolute;
  left: -5px;
  top: -5px;
  overflow: visible;
  color: rgba(var(--glow), 0.95);
  pointer-events: none;
  filter:
    drop-shadow(0 0 6px rgba(var(--glow), 0.85))
    drop-shadow(0 0 18px rgba(var(--glow), 0.45));
}

.agree__ring path {
  stroke-width: 2.6;
  stroke-dasharray: var(--ring-len, 600px);
  stroke-dashoffset: var(--ring-len, 600px);
  /* retracting */
  transition: stroke-dashoffset 680ms cubic-bezier(0.55, 0.05, 0.25, 1);
}

.agree__btn:hover .agree__ring path,
.agree__btn:focus-visible .agree__ring path {
  stroke-dashoffset: 0;
  /* drawing */
  transition: stroke-dashoffset 760ms cubic-bezier(0.62, 0.02, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .agree__ring path { transition: none; }
}


/* ---------- phone headline ---------- */

.pyb-hero__short { display: none; }

@media (max-width: 620px) {
  .pyb-hero__long { display: inline; }
  .pyb-hero__short { display: none; }

  /* once it pins to the top it is forced to one line, and only then does
     the full sentence run off the side */
  body[data-stage="1"] .pyb-hero__long,
  body[data-stage="2"] .pyb-hero__long,
  body[data-stage="3"] .pyb-hero__long { display: none; }

  body[data-stage="1"] .pyb-hero__short,
  body[data-stage="2"] .pyb-hero__short,
  body[data-stage="3"] .pyb-hero__short { display: inline; }

  /* the hint curve is anchored to words that only exist in the long one */
  .hint-fx, .hint-burst { display: none; }

  .notice {
    max-width: 300px;
    padding: 10px 12px;
    gap: 9px;
  }

  .notice__icon { width: 16px; height: 16px; }
  .notice__title { font-size: 0.74rem; line-height: 1.35; }
}