/*==============================================================================
  CSIGNAL SKIN, NEWSLETTER
  ----------------------------------------------------------------------------
  Page-specific companion to csignal-skin.css for /newsletter/v2.php.
  Load it AFTER csignal-skin.css AND after the page's own inline <style>, which
  is the whole point of where the link sits in the head: see the note below.

  THIS PAGE IS NOT LIKE THE OTHERS. It has a bare <body> with no page class, it
  loads style.css and nothing else, and everything it looks like comes from an
  11KB <style> block in its own head: its own font faces, its own token set on
  :root, and 58 selectors in an obs- namespace that appear nowhere else on the
  site. It is the Charle Observatory, designed as a standalone landing page.

  So there is nothing here to inherit. Every visible surface on the page is
  restated below in CSignal terms:

    --obs-ink        #080808 pure black       ->  --ink       #0E1C16
    --obs-paper      #ffffff                  ->  --paper     #F3F5EE
    --obs-signal     #5fd9a0 mint             ->  see THE MINT, below
    --obs-rule       rgba(255,255,255,0.10)   ->  --line-on-ink
    glass cards, three radial glows, one
    backdrop-filter                           ->  flat surfaces and one kit shape

  THE MINT. #5fd9a0 carries three different jobs in the original: the eyebrow,
  the tier badges, and the success state. CSignal has no mint, and mapping all
  three onto lime would put five lime elements in one view. So they split by
  role, which is what the palette is for: the eyebrow and the badges are labels
  and take the Metric role in muted mono, the success state keeps a lime tint
  because it only ever appears after the button has been pressed, and the lime
  itself is spent once, on the button.

  THE ORDER OF THE LINK IN THE HEAD. The page's <style> block sits after its
  style.css link and carries !important on the body ground and on the header.
  This file is linked after that block so ordinary cascade order applies and
  body.cs-skin beats the single-class selectors in it. If the link is ever
  moved above the block, the page goes back to pure black.

  RULE FOR THIS FILE, same as the skin: colour, type, borders and decoration.
  No layout, no spacing, no DOM, no copy.

  NOTE ON !important: section 1 of the skin is a scoped universal font sweep
  carrying !important, so every font-family below carries it too.
==============================================================================*/

/*------------------------------------------------------------------------------
  50. Ground, header, and the fold's shape layer
------------------------------------------------------------------------------*/

/* The inline block sets body { background: #080808 !important }, so this has
   to answer in kind. It is the one place on any of these pages where the skin
   has to shout. */
body.cs-skin { background: var(--ink) !important; }

body.cs-skin .obs-page-wrap {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--cs-body) !important;
}

/* The inline block makes the header transparent so the mint glow can bleed
   through it, and blurs it once it sticks. The glow is gone and CSignal does
   not blur anything, so the header goes back to what header-v2.php and the
   skin already give every other page. */
body.cs-skin .header-container .header {
  background: var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.cs-skin .header-container .header.is-sticky,
body.cs-skin .header-container .header.scrolled {
  background: var(--ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* THE SHAPE LAYER. Three radial mint glows on this page: two on the fold and
   one behind the tiers. All three go, and the first of them is reused as the
   layer for a kit shape rather than left inert, which is the same technique
   csignal-service.css uses on .intro__gradient and csignal-guide.css uses on
   .sign-up__gradient.

   Spike, ghosted in #173023, the same weight those two sheets use, bleeding
   off the left edge behind the headline block, which sets its own z-index and
   stays above it.

   IT WAS SIGNAL FIRST, at 560 with 220 of it off the left edge, and it read as
   a soft dark blob: exactly the ambient wash the three mint glows were removed
   for. Signal is an arrow, and cutting 40 per cent off its left leaves the
   tail, which is the half that says nothing. Spike is a staircase and its
   silhouette IS its top edge, so a left-edge cut still shows three risers and
   still reads as a shape from the kit. Sized and placed so those three risers
   land inside the frame: measured at 1440 they sit at x 102, 174 and 246 from
   the shape's own left edge, and only 40px of the shape is outside the
   viewport. If you resize it, re-measure. */
body.cs-skin .obs-fold::before {
  width: 420px;
  height: 420px;
  top: auto;
  bottom: -60px;
  left: -160px;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 140 140'%3E%3Cpath d='M0 120 V96 H24 V72 H48 V44 H72 V22 H96 V6 H120 V120 Z' fill='%23173023' stroke='%23173023' stroke-width='12' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  /* Own keyframe name. @keyframes resolve by source order, never by
     specificity, so an existing name is never redeclared. */
  animation: cs-nlfloat 13s ease-in-out infinite;
}

body.cs-skin .obs-fold::after,
body.cs-skin .obs-tiers-wrap::before { display: none; }

/* The shape hangs 40px past the left edge of the viewport. clip, not hidden:
   the section must cut it rather than the page growing a horizontal scrollbar,
   and overflow-x alone leaves any sticky behaviour further down intact. */
body.cs-skin .obs-fold { overflow-x: clip; }

@keyframes cs-nlfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

@media (prefers-reduced-motion: reduce) {
  body.cs-skin .obs-fold::before,
  body.cs-skin .obs-card::after { animation: none; }
}

/* Below 1024 the fold collapses to one column, the copy fills the width and
   the card sits flush to the gutter, so neither the shape nor a mark hung off
   the card's corner has any ground to sit on. */
@media (max-width: 1024px) {
  body.cs-skin .obs-fold::before { display: none; }
  body.cs-skin .obs-card::after { display: none; }
}

/*------------------------------------------------------------------------------
  51. The fold
------------------------------------------------------------------------------*/

/* Already an uppercase tracked label with an icon, which is the Metric role in
   everything but the typeface. Mint becomes muted: it is a label above a
   headline, not something to click. */
body.cs-skin .obs-eyebrow {
  font-family: var(--cs-mono) !important;
  font-weight: 500;
  color: var(--on-ink-muted);
}

body.cs-skin .obs-h1 {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--on-ink);
}

/* "Monthly." on its own line, set in Season Serif italic at 1.15em and faded
   to 0.65. The second family goes: CSignal pairs one display face with one
   body face and never sets a phrase in a third. The size step and the drop in
   weight are what the line was doing, so both are kept and the fade becomes
   the muted text role, which is the same idea expressed in the palette. */
body.cs-skin .obs-h1 em {
  font-family: var(--cs-display) !important;
  font-style: normal;
  font-weight: 700;
  opacity: 1;
  color: var(--on-ink-muted);
}

body.cs-skin .obs-desc { color: var(--on-ink-muted); }

body.cs-skin .obs-stats,
body.cs-skin .obs-stat { border-color: var(--line-on-ink); }

/* 8,500+ / Monthly / Free / Live. Figures at 18 to 26px, so the display face
   rather than mono: mono is the Metric role for labels and small counters, and
   a figure at this size is a headline. The labels under them are the labels. */
body.cs-skin .obs-stat__num {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

body.cs-skin .obs-stat__lbl {
  font-family: var(--cs-mono) !important;
  font-weight: 500;
  color: var(--on-ink-muted);
}

/*------------------------------------------------------------------------------
  52. The sign-up card
  ----------------------------------------------------------------------------
  Two stacked glass gradients over a 0.10 white hairline, which is the old
  brand's glassmorphism. It becomes the page's one Paper surface, the same
  treatment the newsletter card on /articles and the lead-magnet card on the
  guide pages get, so the three signup cards across the site are one thing.

  Everything inside it therefore has to be re-set for a light ground: the
  teaser tiles, their figures, the lock chip, the input and the messages were
  all written as white-on-black.
------------------------------------------------------------------------------*/

body.cs-skin .obs-card {
  background: var(--paper);
  border: 1px solid var(--paper-2);
  /* Was hidden, for the inner gradient that is now switched off. Visible so
     the corner mark below can hang half off the card. The teaser sets its own
     overflow, so its tiles are still clipped to their own radius. */
  overflow: visible;
}

body.cs-skin .obs-card::before { display: none; }

/* THE CORAL ACCENT. Signal, 48px, hung half off the card's top left corner.
   ::after rather than ::before because ::before is the mint wash being
   switched off directly above. Anchored to the card, so it tracks it at every
   breakpoint instead of being pinned to coordinates that are only right at one
   width: the same device as the mark on /articles and on the guide pages. */
body.cs-skin .obs-card::after {
  content: "";
  position: absolute;
  top: -24px;
  left: -22px;
  z-index: 2;
  width: 46px;
  height: 48px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='66 58 112 118'%3E%3Cpath d='M92.19 63.89 L166.82 105.30 A12.73 12.73 0 0 1 163.67 128.79 L135.03 135.79 A18.00 18.00 0 0 0 124.17 143.54 L108.23 168.34 A12.73 12.73 0 0 1 84.99 163.67 L70.14 79.62 A15.00 15.00 0 0 1 92.19 63.89 Z' fill='%23FF5A2C'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: cs-nlfloat 9s ease-in-out infinite reverse;
}

/* THE BLUR STAYS. Every other blur on this page is decoration and has been
   removed. This one is the content: three real figures deliberately obscured
   until you sign up, with a lock chip over them saying so. Removing it would
   give away the thing the form is trading for. */
body.cs-skin .obs-teaser {
  border-color: var(--line-on-paper);
  background: var(--paper-2);
}

body.cs-skin .obs-teaser__item { background: #fff; }

body.cs-skin .obs-teaser__num {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--on-paper);
}

body.cs-skin .obs-teaser__lbl {
  font-family: var(--cs-mono) !important;
  color: var(--on-paper-muted);
}

/* Ink chip on the paper card. The backdrop-filter goes with every other blur
   that is not the teaser: the chip is opaque now, so it was doing nothing but
   costing a compositor layer. */
body.cs-skin .obs-lock {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-family: var(--cs-mono) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.cs-skin .obs-divider { background: var(--line-on-paper); }

body.cs-skin .obs-form-label {
  font-family: var(--cs-mono) !important;
  font-weight: 500;
  color: var(--on-paper-muted);
}

body.cs-skin .obs-input {
  background: #fff;
  border: 1px solid var(--line-on-paper);
  font-family: var(--cs-body) !important;
  color: var(--on-paper);
}

body.cs-skin .obs-input::placeholder { color: var(--on-paper-muted); }

/* Blue focus ring, never lime. Section 14's lime ring is scoped to a and
   button, so inputs are free to follow the product rule. */
body.cs-skin .obs-input:focus {
  background: #fff;
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* THE LIME. The one hit on the page. Ink type on a lime ground, never the
   other way round: lime text on a light surface is 1.3:1 and fails at any
   size. The original hovers by fading to 0.88 and lifting 1px; CSignal shifts
   the colour, never dims and never moves. */
body.cs-skin .obs-btn {
  background: var(--lime);
  color: var(--ink);
  font-family: var(--cs-body) !important;
  font-weight: 700;
  border-radius: 999px;
}

body.cs-skin .obs-btn:hover {
  background: #E2FF3A;
  opacity: 1;
  transform: none;
}

body.cs-skin .obs-btn:disabled { background: var(--lime-dim); opacity: 1; }

/* No button anywhere on /csignal/ carries an icon. The button is flex with a
   gap, so display:none takes the gap with it and the label stays centred. */
body.cs-skin .obs-btn svg { display: none; }

body.cs-skin .obs-small { color: var(--on-paper-muted); }

/* Lime as a tint rather than as type: a filled lime chip here would be a
   second full-strength lime in the same card as the button. It only appears
   after the button has been pressed, which is why lime is allowed at all. */
body.cs-skin .obs-success {
  background: rgba(211, 245, 2, 0.12);
  border-color: rgba(211, 245, 2, 0.35);
  color: var(--on-paper);
}

/* Coral dark, the system's fault colour on a light ground. #ff8a8a was picked
   for the black card this used to be. */
body.cs-skin .obs-error { color: #9C3312; }

/*------------------------------------------------------------------------------
  53. The three tier cards
------------------------------------------------------------------------------*/

body.cs-skin .obs-tiers { border-top-color: var(--line-on-ink); }

body.cs-skin .obs-tiers__grid { border-color: var(--line-on-ink); }

body.cs-skin .obs-tier {
  background: var(--ink-2);
  border-right-color: var(--line-on-ink);
}

@media (max-width: 1024px) {
  body.cs-skin .obs-tier { border-bottom-color: var(--line-on-ink); }
}

/* Was a mint pill with a mint dot. Muted mono on a hairline, and the dot with
   it: three of these sit side by side, and three accent chips in one row is
   the "decoration" the proportion rule warns about. */
body.cs-skin .obs-tier__badge {
  font-family: var(--cs-mono) !important;
  font-weight: 500;
  color: var(--on-ink-muted);
  background: transparent;
  border-color: var(--line-on-ink);
}

body.cs-skin .obs-tier__badge::before { background: var(--on-ink-muted); }

body.cs-skin .obs-tier__h {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--on-ink);
}

/* Same reasoning as the H1's em in section 51: the size step stays, the third
   typeface and the opacity fade become the muted text role. */
body.cs-skin .obs-tier__h em {
  font-family: var(--cs-display) !important;
  font-style: normal;
  font-weight: 700;
  opacity: 1;
  color: var(--on-ink-muted);
}

body.cs-skin .obs-tier__desc { color: var(--on-ink-muted); }

body.cs-skin .obs-tier__rule { background: var(--line-on-ink); }

body.cs-skin .obs-tier__list li {
  font-family: var(--cs-mono) !important;
  color: var(--on-ink-muted);
}

body.cs-skin .obs-tier__list li::before { color: rgba(243, 245, 238, 0.35); }