/*==============================================================================
  CSIGNAL SKIN, INDIVIDUAL GUIDE PAGE
  ----------------------------------------------------------------------------
  Page-specific companion for /guides/<slug>/v2.php. Load it AFTER
  csignal-skin.css AND csignal-service.css, in that order.

  Guide pages are body.service-page, so most of the page is already skinned by
  those two and this file is deliberately small. What they cover:

    csignal-skin.css      the Season sweep, header, buttons, footer, focus,
                          .about-charle, .projects as the Paper band with its
                          stepped edge, .experts
    csignal-service.css   .intro, .pricing, .testimonial

  What was left, and is what this file is for: the .sign-up hero and its
  lead-magnet form, .guide-form inside it, .clients, and .call-to-actions.
  Those four families appear on the guide template and nowhere the skin has
  already been through.

  Everything is scoped to body.cs-skin, so index.php is untouched.

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

  THE INLINE <style> BLOCK. .guide-form is styled by a <style> element inside
  the form itself, in the body. It is not touched: every selector in it is a
  single class, so body.cs-skin .guide-form__x beats it on specificity without
  editing markup that the form's own JS was written against.

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

  THE ONE LIME PER VIEW. Hero fold: the form's Submit button, which is the only
  thing on the page anyone is being asked to do. Everything else on the card is
  ink on paper.
==============================================================================*/

/*------------------------------------------------------------------------------
  40. The sign-up hero: ground and decoration
  handbook.css paints a 60% by 60% teal-into-violet orb behind the hero with a
  100px blur. CSignal has no gradients and no blurs anywhere, so it goes.
------------------------------------------------------------------------------*/

body.cs-skin .sign-up {
  background-color: var(--ink);
  position: relative;
  /* clip, not hidden: the ghosted shape bleeds off the left edge and must be
     cut by the section rather than adding a horizontal scrollbar. */
  overflow-x: clip;
}

/* THE SHAPE LAYER. Same technique as csignal-service.css uses on .intro: the
   emptied gradient div becomes the layer and the shapes are background images
   on its pseudo-elements, so nothing is added to the markup and there is no
   second element to keep in sync. Ghost colour #173023 is the one that sheet
   already uses, so a guide and a service page ghost at the same weight.

   ONE GHOST ONLY, no lime Spike alongside it the way the service pages have.
   The lime budget in this fold belongs to the form's Submit button, and the
   coral Signal on the card's corner in section 42 is the accent that pairs
   with the ghost. Two accents and a ghost is decoration. */
body.cs-skin .sign-up__gradient {
  display: block;
  position: absolute;
  inset: 0;
  /* handbook.css sizes this div 60% by 60% and offsets it top:10%. Both have
     to be unset explicitly: a width beats the right offset in inset, so with
     the width left in place the layer was 466px tall inside a 777px container
     and the shape hung off its bottom edge landed 300px up the page. */
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  /* handbook.css blurs this element for the old orb. Nothing in CSignal is
     blurred, and a filter here would soften the shape hung off it. */
  filter: none;
  background: none;
  border-radius: 0;
}

/* Store, the kit's shopfront, bleeding off the left edge behind the What's
   Inside list.

   IT DOES NOT BLEED OFF THE BOTTOM, which an earlier version did, and that is
   the whole difference between reading as Store and reading as a green
   rectangle. Store's character is the staircase descending its RIGHT side:
   its top and left are a plain right angle. Cut the bottom off and the only
   thing left in frame is that right angle. Measured at 480 the three risers
   sit at y 280, 384 and 480, so the shape is anchored 40px clear of the
   section's bottom edge and all three stay in the window. Spike is the only
   other solid in the kit with a diagonal at a corner; Leak and Ask are square
   at every corner and cannot take a corner bleed at all.

   Reuses cs-svc-drift from csignal-service.css, which is loaded before this
   file. @keyframes resolve by source order and not by specificity, so an
   existing name is referenced rather than redeclared. */
body.cs-skin .sign-up__gradient::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 40px;
  left: -170px;
  width: 480px;
  height: 480px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 140 140'%3E%3Cpath d='M0 0 H120 V70 H84 V96 H46 V120 H0 Z' fill='%23173023' stroke='%23173023' stroke-width='12' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: cs-svc-drift 13s ease-in-out infinite;
  animation-delay: -2s;
}

/* handbook.css gives .sign-up .container position:relative, which is what the
   layer is positioned against. The explicit z-index on the content is what
   keeps every line of copy above the shape without giving the shape a negative
   index, which would drop it behind the page background entirely. */
body.cs-skin .sign-up__inner { position: relative; z-index: 1; }

/*------------------------------------------------------------------------------
  41. Hero type
------------------------------------------------------------------------------*/

/* Was Season Serif at 18 to 32px, which is the old brand's pairing for a
   kicker. It becomes the Metric role: mono, small, muted, sitting above the
   H1 as a qualifier rather than competing with it. NOT uppercased, because it
   is a written sentence with a full stop and uppercasing one reads as a
   mistake rather than as a label. */
body.cs-skin .sign-up__subtitle {
  font-family: var(--cs-mono) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--on-ink-muted);
}

body.cs-skin .sign-up__title {
  font-family: var(--cs-display) !important;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

body.cs-skin .sign-up__description { color: var(--on-ink); }
body.cs-skin .sign-up__subdescription { color: var(--on-ink-muted); }

body.cs-skin .sign-up__methods { color: var(--on-ink); }

/* The marker was a solid white 12px circle, seven of them in a column, which
   out-weighed the copy they were marking. Dropped to the muted role and to
   8px. It was briefly a rounded square, which at 12px read as a row of empty
   checkboxes rather than as bullets. The right margin is untouched, so the
   text column does not move. */
body.cs-skin .sign-up__methods li::before {
  width: 8px;
  height: 8px;
  background-color: var(--on-ink-muted);
}

body.cs-skin .sign-up__methods li a { color: var(--on-ink); }
body.cs-skin .sign-up__methods li a:hover { opacity: 1; color: var(--lime); }

/*------------------------------------------------------------------------------
  42. The lead-magnet card
  ----------------------------------------------------------------------------
  The page's one Paper surface and the only thing on it anyone is being asked
  to do, which is why the lime budget is spent on its Submit button.
------------------------------------------------------------------------------*/

body.cs-skin .sign-up__form {
  background: var(--paper);
  border: 1px solid var(--paper-2);
  position: relative;
}

/* THE CORAL ACCENT. Signal, 48px, hung half off the card's top left corner.

   Anchored to the card rather than hung off the shape layer with coordinates,
   so it tracks the card at every breakpoint instead of being pinned to numbers
   that are only right at one width. Same device as the mark on the newsletter
   card on /articles and on the signup form on /podcast.

   WHY SIGNAL. It is the cursor out of the logo and the most recognisable shape
   in the kit, so it survives being small. Spark does not: three detached arms
   at this size read as three random dashes.

   z-index sits above the card, or the opaque Paper ground hides the half that
   overlaps. */
body.cs-skin .sign-up__form::before {
  content: "";
  position: absolute;
  top: -24px;
  left: -22px;
  z-index: 2;
  width: 46px;
  height: 48px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='66%2058%20112%20118'%20fill='none'%3E%3Cpath%20d='M92.19%2063.89%20L166.82%20105.30%20A12.73%2012.73%200%200%201%20163.67%20128.79%20L135.03%20135.79%20A18.00%2018.00%200%200%200%20124.17%20143.54%20L108.23%20168.34%20A12.73%2012.73%200%200%201%2084.99%20163.67%20L70.14%2079.62%20A15.00%2015.00%200%200%201%2092.19%2063.89%20Z'%20fill='%23FF5A2C'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: cs-svc-drift 9s ease-in-out infinite reverse;
}

/*------------------------------------------------------------------------------
  43. .guide-form
  Every rule here exists to beat the single-class selectors in the form's own
  inline <style>, which is left alone on purpose. Season Sans and Season Serif
  are named explicitly in that block, so the sweep does not reach them and each
  family has to be replaced by name.
------------------------------------------------------------------------------*/

body.cs-skin .guide-form,
body.cs-skin .guide-form__label,
body.cs-skin .guide-form__input,
body.cs-skin .guide-form__select,
body.cs-skin .guide-form__consent,
body.cs-skin .guide-form__welcome,
body.cs-skin .guide-form__error {
  font-family: var(--cs-body) !important;
}

body.cs-skin .guide-form__label { color: var(--on-paper); font-weight: 500; }

/* Coral dark, the system's fault colour on a light ground. #e53935 is a stock
   Material red and is not in the palette. */
body.cs-skin .guide-form__label .req { color: #9C3312; }

body.cs-skin .guide-form__input,
body.cs-skin .guide-form__select {
  border-bottom-color: var(--line-on-paper);
  color: var(--on-paper);
}

body.cs-skin .guide-form__input::placeholder { color: var(--on-paper-muted); }
body.cs-skin .guide-form__select { color: var(--on-paper-muted); }
body.cs-skin .guide-form__select.has-value { color: var(--on-paper); }

/* Blue underline on focus, 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 .guide-form__input:focus,
body.cs-skin .guide-form__select:focus { border-bottom-color: var(--blue); }

body.cs-skin .guide-form__input:user-invalid,
body.cs-skin .guide-form__select:user-invalid,
body.cs-skin .guide-form.is-attempted .guide-form__input:invalid,
body.cs-skin .guide-form.is-attempted .guide-form__select:invalid { border-bottom-color: #9C3312; }

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

/* THE LIME. 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 inline block hovers by
   fading the whole button to 0.85; CSignal shifts the colour and never dims. */
body.cs-skin .guide-form__submit {
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}

body.cs-skin .guide-form__submit:hover { background: #E2FF3A; opacity: 1; }

/* No button anywhere on /csignal/ carries an icon. :not([class]) so that only
   the trailing arrow goes and the submit spinner, which the form's JS drops in
   as a classed svg, is left alone. The button is inline-flex with a gap, so
   display:none takes the gap with it and the label stays centred. */
body.cs-skin .guide-form__submit > svg:not([class]) { display: none; }
body.cs-skin .guide-form__submit:disabled { background: var(--lime-dim); opacity: 1; }

body.cs-skin .guide-form__success-title {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}

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

body.cs-skin .guide-form__error {
  background: rgba(156, 51, 18, 0.08);
  border-color: rgba(156, 51, 18, 0.25);
  color: #9C3312;
}

body.cs-skin .guide-form__welcome {
  background: rgba(14, 28, 22, 0.04);
  border-color: var(--line-on-paper);
  color: var(--on-paper-muted);
}

body.cs-skin .guide-form__welcome strong { color: var(--on-paper); }
body.cs-skin .guide-form__welcome button { color: var(--on-paper-muted); }
body.cs-skin .guide-form__welcome button:hover { color: var(--on-paper); }

/*------------------------------------------------------------------------------
  44. Clients
  Two more blurred orbs, one of them 949px across and rotated 152 degrees.
  Both go. The band has no ground of its own and so falls through to the ink
  on body, which is what it should have been.
------------------------------------------------------------------------------*/

body.cs-skin .clients__bg-one,
body.cs-skin .clients__bg-two { display: none; }

body.cs-skin .clients__heading {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

/*------------------------------------------------------------------------------
  45. Call to actions
  A white band carrying two #1A1B1E cards. It becomes a Paper band carrying two
  ink cards: the same inversion the pricing options use, and the reason the
  band reads as a distinct surface rather than as a colour change.
------------------------------------------------------------------------------*/

body.cs-skin .call-to-actions { background: var(--paper); }

body.cs-skin .call-to-actions__block {
  background: var(--ink);
  border: 1px solid var(--line-on-ink);
  border-radius: 16px;
}

/* Sits above the heading as a kicker, so it takes the Metric role. */
body.cs-skin .call-to-actions__subheading {
  font-family: var(--cs-mono) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

body.cs-skin .call-to-actions__heading {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

body.cs-skin .call-to-actions__description { color: var(--on-ink-muted); }

/* No button anywhere on /csignal/ carries an icon, and style.css reserves 3rem
   of right padding for this one, so hiding the svg alone would leave the label
   visibly off-centre in its pill. */
body.cs-skin .call-to-actions__button svg { display: none; }
body.cs-skin .call-to-actions__button { padding-right: 24px; }