/* OTW Motion — "Stripe" visual skin.

   Loaded last, after styles.css / signal.css / company-search.css, and scoped
   entirely to `body.skin-stripe` so it can be added to or removed from a single
   page without touching the shared stylesheets. Every rule here is presentation
   only: no layout order changes, no spacing changes inside #signal-hero, and
   nothing that moves the CTA down the page. The hero's fold budget is a written
   constraint (docs/hero-baseline-v1/HERO-BASELINE.md, section 5) and this skin
   is explicitly not allowed to spend it.

   The one structural addition is the angled gradient block behind the hero. It
   is drawn on a pseudo-element with clip-path only -- no skew transform -- so it
   cannot paint outside its own box and cannot clip the company-search dropdown
   the way `overflow:hidden` on the hero would. */

body.skin-stripe {
  /* Stripe's actual pairing: blurple against a deep navy ink, with a cool grey
     body colour rather than a tinted one.

     One deliberate deviation: the accent is #5B52F0, not Stripe's own #635BFF.
     The codebase uses a single `--signal` token for both button fills and accent
     text, and #635BFF as text measures 4.44-4.48:1 on the tinted #F6F9FC
     surfaces this page uses -- just under the floor, in about a dozen places.
     #5B52F0 takes those to 5.08:1 and white-on-accent from 4.65 to 5.37, at a
     colour difference that is not visible side by side. */
  --signal: #5B52F0;
  --signal-deep: #3F37D6;
  --signal-bright: #7DE8FF;
  --ink: #0A2540;
  --ink-soft: #163A5F;
  --muted: #425466;
  --faint: #8792A2;
  --line-soft: #E3E8EE;
  --paper-dim: #F6F9FC;
  --status-live: #635BFF;

  --g1: #00D4FF;
  --g2: #635BFF;
  --g3: #A960EE;

  --lift: 0 15px 35px rgba(50, 50, 93, .10), 0 5px 15px rgba(0, 0, 0, .07);
  --lift-lg: 0 30px 60px rgba(50, 50, 93, .16), 0 18px 36px rgba(0, 0, 0, .09);

  background: #fff;
}

/* The paper grain fights the gradient: it is a multiply overlay, so it dirties
   saturated colour far more than it dirties white. Off on this skin. */
body.skin-stripe::before { display: none; }

/* ─── nav: transparent over the gradient, solid once you scroll past it ─── */

/* The nav stays a solid white bar at every scroll position, on purpose.

   Stripe's own nav is transparent over the hero gradient and turns white once
   you scroll past it, and that was built here first: a class toggled from an
   IntersectionObserver, then from a synchronous scroll listener. Both leak. The
   scroll itself is driven on the compositor thread while the class change runs
   on the main thread, so during a fast flick the bar is painted several frames
   before the class catches up -- and those frames are white nav text on white
   page content, which is not a subtle bug, it is an unreadable navigation.
   Screenshots of it are in the commit that removed it.

   There is no colour that reads on both the gradient and white paper, so the
   effect cannot be made safe, only made rarer. It is not worth an unreadable
   nav on a slow phone, so the bar is simply always white and the gradient
   starts underneath it. */
body.skin-stripe header.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 3px rgba(50, 50, 93, .06);
}

body.skin-stripe .nav-cta {
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}
body.skin-stripe .nav-cta { background: var(--signal); color: #fff; }
body.skin-stripe .nav-cta:hover { background: var(--signal-deep); }

/* The mobile menu panel drops over page content, so it is always solid. */
@media (max-width: 900px) {
  body.skin-stripe .nav-links.is-open { background: #fff; }
}

/* ─── hero: the angled gradient block ─── */

body.skin-stripe .signal-hero {
  background: none;
  position: relative;
}
body.skin-stripe .signal-hero::before {
  content: '';
  position: absolute;
  /* Starts at the hero's own top edge. It used to run up behind the sticky
     header, which only mattered while that header was transparent. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  /* Decorative layers are deliberately kept off the left half and off the nav.
     Everything readable in this hero (eyebrow, h1, sub, proof strip, nav links)
     sits on the linear layer alone, so its contrast is predictable instead of
     depending on where a radial happens to land. The cyan sits behind the
     opaque sample card, where it adds colour without touching any text.
     The linear starts at #4B44E8 rather than the accent itself: white at 87%
     over #635BFF is 3.97:1, under the floor, and over #4B44E8 it is 5.41:1. */
  background:
    radial-gradient(42% 66% at 74% 38%, var(--g1) 0%, transparent 58%),
    radial-gradient(46% 60% at 98% 96%, var(--g3) 0%, transparent 62%),
    linear-gradient(122deg, #4B44E8 0%, #1B49DB 46%, #0A2540 100%);
  /* Angled bottom edge, drawn inside the element's own box so nothing spills
     onto the section below. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 78px), 0 100%);
}
body.skin-stripe .signal-hero > .wrap { position: relative; z-index: 1; }

body.skin-stripe .signal-hero .signal-eyebrow { color: var(--signal-bright); }
body.skin-stripe .signal-hero h1 {
  color: #fff;
  font-weight: 720;
  letter-spacing: -0.032em;
}
/* Both of these are held at the alpha that actually measures 4.5:1 against the
   darkest text-bearing part of the gradient, not at the alpha that looked
   right: .87 and .68 came in at 3.97 and 3.84. */
body.skin-stripe .signal-hero .sub { color: #fff; }
body.skin-stripe .signal-hero .hero-proof-strip { color: rgba(255, 255, 255, .84); }
body.skin-stripe .signal-hero .hero-proof-strip .altlink-sep { color: rgba(255, 255, 255, .78); }
/* Every paragraph in this column sits on the gradient and takes white links.
   Every one except the returning-customer banner, which is a <p> here too but
   paints itself a light card: white on that is white on white, which is what a
   logged-in customer with reports actually saw. It keeps the accent it was
   designed with, in the deeper tone so it clears contrast on the tint. */
body.skin-stripe .signal-hero .hero-left > p:not(.hero-returning) a { color: #fff; }
body.skin-stripe .signal-hero .hero-returning a { color: var(--signal-deep, #3F37D6); }

/* ─── the form card, floating on the gradient ─── */

body.skin-stripe .signal-card {
  border: 0;
  border-radius: 14px;
  box-shadow: var(--lift-lg);
}
body.skin-stripe .signal-card .form-field label,
body.skin-stripe .signal-card label { color: var(--ink); font-weight: 600; }
/* The base sheet takes these labels to full ink on hover, which under this skin
   is the colour they already sit at, so the label answered a click target with
   nothing. A step toward the accent is the smallest thing that reads. */
@media (hover: hover) and (pointer: fine) {
  body.skin-stripe .signal-card label:hover { color: var(--signal-deep); }
}
body.skin-stripe .signal-card .form-field input,
body.skin-stripe .signal-card .form-field textarea,
body.skin-stripe .signal-card input[type="text"],
body.skin-stripe .signal-card input[type="email"] {
  border-color: var(--line-soft);
  border-radius: 8px;
}
body.skin-stripe .signal-card input:focus,
body.skin-stripe .signal-card textarea:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, .18);
  outline: none;
}

/* ─── buttons ─── */

body.skin-stripe .signal-submit,
body.skin-stripe .pricing-cta,
body.skin-stripe .mobile-cta a {
  border-radius: 99px;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--lift);
}
body.skin-stripe .signal-submit { background: var(--signal); }
body.skin-stripe .signal-submit:hover:not(:disabled) { background: var(--signal-deep); }

/* The secondary pricing button is blurple text on a blurple wash. At the new
   accent that lands at 4.00:1 against its own background -- under the 4.5:1
   floor for its size. The deeper accent takes the same pair to 6.5:1 without
   changing the button's weight in the layout. The `.primary` variant is a solid
   fill with white text and is left alone. */
body.skin-stripe .pricing-cta:not(.primary) {
  color: var(--signal-deep);
  box-shadow: none;
}
body.skin-stripe .pricing-cta.primary { background: var(--signal); }
body.skin-stripe .pricing-cta.primary:hover { background: var(--signal-deep); }

/* Chrome's default placeholder grey (#757575) measures 4.47:1 on white -- under
   the floor by a hair, on every input on the page including the hero's. */
body.skin-stripe ::placeholder { color: #6B7280; opacity: 1; }

body.skin-stripe :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
body.skin-stripe .signal-hero :focus-visible { outline-color: #fff; }

/* ─── everything below the fold: cards lift instead of outlining ─── */

body.skin-stripe .hero-mini,
body.skin-stripe .pricing-card,
body.skin-stripe .sample-module,
body.skin-stripe .demo-card,
body.skin-stripe .how-step,
body.skin-stripe .next-step-card {
  border-color: transparent;
  box-shadow: var(--lift);
}
body.skin-stripe .pricing-card { border-radius: 12px; }

/* ─── the pricing block under the pointer ─── */
/* Flattening those cards had a cost nobody looked for: the base sheet's hover
   state sets border-color and box-shadow, the two properties the rule above
   also sets, and the skinned selector is one step more specific. So the base
   hover lost silently and the entire pricing block answered the cursor with
   nothing, while every other section on the page answered it. The skin took
   the feedback away, so the skin gives it back, at its own weight.

   The lift is safe now. This card was deliberately kept still because
   compositing it floated .pricing-badge over the sticky header; styles.css
   later fixed that structurally by making main an isolated stacking context at
   z-index 0, so nothing inside it can paint over the header at any layer.
   Verified on production before this was written, with the card composited and
   its badge geometrically behind the header: the header stayed clean. */
body.skin-stripe .pricing-card {
  transition: transform 130ms cubic-bezier(.2,.6,.3,1), box-shadow 130ms cubic-bezier(.2,.6,.3,1);
}
body.skin-stripe .pricing-compare td { transition: background-color 130ms ease; }

@media (hover: hover) and (pointer: fine) {
  /* Same trap, found by the same audit: the sample cards were lifting on hover
     with no change in shadow, because the flat-card rule above owns box-shadow
     at a specificity the base sheet's hover cannot reach. A card that rises
     without its shadow deepening looks like a rendering glitch, not a lift. */
  body.skin-stripe .demo-card:hover { box-shadow: 0 14px 38px rgba(10, 37, 64, .13); }

  body.skin-stripe .pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(10, 37, 64, .13);
  }
  body.skin-stripe .pricing-card.featured:hover {
    box-shadow: 0 16px 42px rgba(91, 82, 240, .22);
  }
  /* The secondary button's only hover state was opacity .9, which on a pale
     wash under a pale button is a rounding error rather than an answer. It
     deepens the wash instead, and the text with it so contrast holds. */
  body.skin-stripe .pricing-cta:not(.primary):hover:not(:disabled) {
    background: #E2DEFA;
    color: var(--signal-deep);
    opacity: 1;
    transform: translateY(-1px);
  }
  body.skin-stripe .pricing-cta.primary:hover:not(:disabled) {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(91, 82, 240, .32);
  }
  /* Eight rows read across, so they get the same faint band the report gives
     its data rows: a reading aid, not a promise that the row opens something. */
  body.skin-stripe .pricing-compare tr:not(.pc-head):hover td { background-color: #F5F4FE; }
}

@media (prefers-reduced-motion: reduce) {
  body.skin-stripe .pricing-card,
  body.skin-stripe .pricing-compare td { transition: none; }
  body.skin-stripe .pricing-card:hover,
  body.skin-stripe .pricing-cta:not(.primary):hover:not(:disabled),
  body.skin-stripe .pricing-cta.primary:hover:not(:disabled) { transform: none; }
}

body.skin-stripe main > section h2,
body.skin-stripe main > section h3 { color: var(--ink); letter-spacing: -0.03em; }

/* Headings carry a max-width of 780px with no horizontal margin, so a heading
   whose text is centred still sits flush left inside a wider container: the
   text centres within its own narrower box, not within the section. It reads as
   a heading that has slipped left of the card underneath it, which is exactly
   what it is. Auto margins put the box itself in the middle.

   Deliberately not a blanket rule on every heading: applied to a left-aligned
   heading, auto margins would centre its box and push the text right, which
   would be the same bug pointing the other way. Only the centred ones. */
body.skin-stripe .faq-section h2 { margin-inline: auto; }
body.skin-stripe main > section > .wrap > .signal-eyebrow,
body.skin-stripe .eyebrow { color: var(--signal); }

/* The gradient already carries the hero; the section immediately after it
   should read as clean paper rather than another tinted band. */
body.skin-stripe .signal-hero + section { background: #fff; }

/* styles.css gives every `main > section` a full-viewport min-height and
   vertically centres it. On the short content bands (the four proof figures,
   the objection strip) that leaves several hundred pixels of empty page either
   side of one line of text. Two sections already opt out of this inline
   (`#sample`, `.demo-band`); this applies the same opt-out consistently to
   everything except the hero, which still owns its own height. */
body.skin-stripe main > section:not(.signal-hero) {
  min-height: 0;
  justify-content: flex-start;
}

/* ─── footer ─── */

body.skin-stripe footer {
  background: var(--paper-dim);
  border-top: 1px solid var(--line-soft);
}

@media (prefers-reduced-motion: reduce) {
  body.skin-stripe header.site-header { transition: none; }
}