/*==============================================================================
  CSIGNAL SKIN, PODCAST / WEBINARS / GUIDES
  ----------------------------------------------------------------------------
  Page-specific companion to csignal-skin.css for:
    /podcast/v2.php      hero + list + testimonial + PRICING + experts
    /webinars/v2.php     hero + list + testimonial + experts
    /guides/v2.php       hero + list + testimonial + experts   (no hero video)

  One sheet, three pages, because all three are body.podcast-page and load the
  same assets/css/podcasts.css. Their class sets are identical apart from the
  pricing band, which only /podcast carries. Load AFTER csignal-skin.css.
  Everything is scoped to body.cs-skin, so index.php on all three is untouched.

  WHAT IS INHERITED from csignal-skin.css and not repeated here:
    section 1   the Season sweep, ink ground, Bricolage on h1-h4
    section 2   the header
    section 11  buttons, including .btn-white as the lime pill
    section 12  footer
    section 14  selection and focus

  RULE FOR THIS FILE, same as the skin: colour, type, borders and decoration.
  No layout, no spacing, no DOM, no copy. Two documented exceptions, both
  removing decoration rather than changing a design: the rounded lip on
  .testimonial (section 35) and the reserved arrow padding in the pricing
  buttons (section 36).

  NOTE ON !important: podcasts.css sets the Klaviyo form's type and colour with
  !important, and section 1 of the skin is a scoped universal font sweep that
  also carries it. Every font-family here therefore carries !important too, and
  so does everything in the Klaviyo block.

  THE ONE LIME PER VIEW. Hero fold: the Klaviyo Subscribe button. Pricing fold:
  the four plan buttons, which are one repeated primary action and already lime
  from skin section 11. Nothing else on these pages is lime, which is why the
  plan badge is paper and the card titles go lime only on hover.
==============================================================================*/

/*------------------------------------------------------------------------------
  30. Hero: ground, decoration layer
  podcasts.css paints a 50%-wide teal-into-violet orb behind the hero with a
  100px blur. CSignal has no gradients and no blurs anywhere, so it goes, and
  the hero becomes flat ink with two kit shapes on it.
------------------------------------------------------------------------------*/

body.cs-skin .podcast-hero {
  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;
}

body.cs-skin .podcast-hero::before { display: none; }

/* podcasts.css already sets .podcast-hero .container position:relative; this
   lifts it above the deco layer. */
body.cs-skin .podcast-hero .container { z-index: 1; }

body.cs-skin .cs-poddeco {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: 0;
}

body.cs-skin .cs-poddeco__s { position: absolute; display: block; }
body.cs-skin .cs-poddeco__s svg { display: block; }

/* THE GHOSTED SHAPE. #12341F, a lighter tint of the ink it sits on, so it is a
   texture rather than an element. One shape bleeding off the frame is the
   device rule, and the coral mark in section 31 is the accent that pairs with
   it.

   A different shape per page so the three do not read as one template printed
   three times, and each is anchored to whatever ground that page actually has
   spare. Measured at 1440, not reasoned about:

     /podcast   hero 146-918, left column ends at the badges on 731, video
                fills 862-1392. The only clear ground is bottom left below the
                badges, so Spike sits there at 300 and bleeds off the left and
                the bottom. An earlier version at 340 with less offset ran up
                behind the Klaviyo form on 613-667 and the white input sat on
                top of a dark staircase.
     /webinars  same layout, hero 146-944, but the shape goes bottom RIGHT,
                into the ground under the video, so the two video pages do not
                read as the same picture. Spike again and mirrored on the x
                axis, because Spike is the only solid in the kit whose corners
                are diagonal: Store, Leak and Ask are all square at the bottom
                left and bottom right, so a corner bleed shows you a plain
                rectangle. Path was tried here at 320 and failed the same way
                from the other side, the only thing in frame being one rounded
                stroke end. The mirror is on the svg, not the span, because the
                span already carries the float transform.
     /guides    no video: the whole right half from 800 across is empty, which
                is a much better home than a corner. Proof at 380 sits on the
                right, bleeding off that edge, opposite the copy.

   If you resize any of them, re-measure the band. */
body.cs-skin .cs-poddeco__s--spike { bottom: -120px; left: -140px; }
body.cs-skin .cs-poddeco__s--spikeflip { bottom: -150px; right: -150px; }
body.cs-skin .cs-poddeco__s--spikeflip svg { transform: scaleX(-1); }
body.cs-skin .cs-poddeco__s--proof { bottom: 80px;   right: -70px; }

body.cs-skin .cs-poddeco__s {
  /* Own keyframe name. @keyframes resolve by source order, never by
     specificity, so an existing name is never redeclared. */
  animation: cs-podfloat 11s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  body.cs-skin .cs-poddeco__s,
  body.cs-skin .podcast-hero__form::before { animation: none; }
}

/* Below 1024 the hero stacks, the left column fills the width and there is no
   clear ground left for either shape. */
@media (max-width: 1023px) {
  body.cs-skin .cs-poddeco { display: none; }
  /* The left column runs to the viewport edge below this, so a mark hung
     20px off the form's left corner would be cut by the body. */
  body.cs-skin .podcast-hero__form::before { display: none; }
}

/*------------------------------------------------------------------------------
  31. Hero type
  The H1 was the stock display size with no family set, so it fell through to
  the sweep. It becomes Bricolage at Display L with the brand's tracking.
------------------------------------------------------------------------------*/

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

/* "Ecommerce Podcast by Charle - DTC, Shopify & Business." is a descriptor
   line, not a sentence of prose, so it takes the Metric role in mono. NOT
   uppercased: it carries an ampersand and a full stop, and uppercasing a
   written sentence reads as a mistake rather than as a label. */
body.cs-skin .podcast-hero__subtitle {
  font-family: var(--cs-mono) !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--on-ink-muted);
}

body.cs-skin .podcast-hero__description { color: var(--on-ink); }

body.cs-skin .podcast-hero__form-description { color: var(--on-ink-muted); }
body.cs-skin .podcast-hero__form-description strong { color: var(--on-ink); font-weight: 700; }

/* 30px was the old brand's soft-media radius. 20px is the large-surface value
   used everywhere the skin has already landed; cards below take 16px. */
body.cs-skin .podcast-hero__video {
  border-radius: 20px;
  border: 1px solid var(--line-on-ink);
}

/*------------------------------------------------------------------------------
  32. The Klaviyo signup
  ----------------------------------------------------------------------------
  Klaviyo renders this form from its own script, so nothing here can be done in
  the markup. podcasts.css reaches into the rendered output with !important on
  every declaration; these have to match that weight or they lose outright.

  The button is the hero fold's single lime hit: lime ground, ink type, never
  lime type. Lime on a light surface is 1.3:1 and fails at any size, which is
  why it is only ever a ground in this system.
------------------------------------------------------------------------------*/

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

   It is anchored to the form rather than dropped into .cs-poddeco with
   coordinates because the form is the thing it is pointing at, and an anchored
   mark tracks its element at every breakpoint instead of being pinned to
   numbers that are only right at one width. Same reasoning as the mark on the
   newsletter card on /articles.

   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 rather than as anything from the
   kit. Verified by rendering it, not by reasoning about it.

   WHY NOT IN THE DECO LAYER. It was, at top:-14px right:4%, and at 1440 that
   put it on y 131 when the hero starts at 146: a coral blob floating in the
   header band next to the nav, attached to nothing. */
body.cs-skin .podcast-hero__form { position: relative; }

body.cs-skin .podcast-hero__form::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -18px;
  z-index: 2;
  width: 38px;
  height: 40px;
  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-podfloat 9s ease-in-out infinite reverse;
}

body.cs-skin .podcast-hero__form input[type="email"] {
  background: #fff !important;
  border: 1px solid var(--line-on-paper) !important;
  border-right: 0 !important;
  border-radius: 999px 0 0 999px !important;
  font-family: var(--cs-body) !important;
  font-size: 15px !important;
  color: var(--on-paper) !important;
}

body.cs-skin .podcast-hero__form ::-webkit-input-placeholder,
body.cs-skin .podcast-hero__form ::-moz-placeholder,
body.cs-skin .podcast-hero__form :-ms-input-placeholder,
body.cs-skin .podcast-hero__form :-moz-placeholder {
  font-family: var(--cs-body) !important;
  font-size: 15px !important;
  color: var(--on-paper-muted) !important;
}

/* 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 .podcast-hero__form input[type="email"]:focus {
  border-color: var(--blue) !important;
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}

body.cs-skin .podcast-hero__form button {
  background: var(--lime) !important;
  border: 1px solid var(--lime) !important;
  border-radius: 999px !important;
  font-family: var(--cs-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
}

body.cs-skin .podcast-hero__form button:hover {
  background: #E2FF3A !important;
  border-color: #E2FF3A !important;
  color: var(--ink) !important;
}

/*------------------------------------------------------------------------------
  33. The list
  Episode, webinar and guide cards. Radius normalised from 15px to the 16px
  card value. Titles are h5 at 15 to 18px, which is UI copy and stays in the
  body face: setting card titles in Bricolage because it looks more branded is
  the mistake the typography page calls out by name.
------------------------------------------------------------------------------*/

body.cs-skin .podcast-list { background-color: var(--ink); }

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

body.cs-skin .podcast__title {
  font-family: var(--cs-body) !important;
  font-weight: 600;
  color: var(--on-ink);
}

body.cs-skin .podcast__title a:hover { opacity: 1; color: var(--lime); }

/* "Episode 20", "Guide", "Upcoming". The Metric role exactly. */
body.cs-skin .podcast__type {
  font-family: var(--cs-mono) !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

/*------------------------------------------------------------------------------
  34. Intro band
  Not in the markup of any of the three pages today, but podcasts.css carries
  .intro and its blurred orb, and a section added later would bring the orb
  back with it. Killed here so it cannot reappear.
------------------------------------------------------------------------------*/

body.cs-skin .intro { background-color: var(--ink); }
body.cs-skin .intro__gradient { display: none; }

/*------------------------------------------------------------------------------
  35. testimonial.php
  A shared include and so uneditable, handled from here. On these three pages
  it sits between two ink bands, so its white ground and its 25 to 50px rounded
  lip are both invisible against what is above it and only produce a hairline
  seam where the negative margin overlaps.

  --radius is set to 0 rather than the background alone. The lip and the
  negative margin that hangs it are one decoration expressed in two properties,
  and leaving the margin behind pulls the section 50px up over the list for no
  reason once the curve it was compensating for is gone. Removing decoration,
  not changing spacing.
------------------------------------------------------------------------------*/

body.cs-skin .testimonial {
  --radius: 0px;
  background-color: var(--ink);
}

body.cs-skin .testimonial__inner { border-radius: 20px; }
body.cs-skin .testimonial__heading { color: var(--on-ink); }
body.cs-skin .testimonial__author { color: var(--on-ink-muted); }
body.cs-skin .testimonial__play { font-family: var(--cs-body) !important; font-weight: 600; }

/*------------------------------------------------------------------------------
  36. Pricing  (/podcast only)
  ----------------------------------------------------------------------------
  CURRENTLY DORMANT. The whole <section class="pricing"> is commented out in
  podcast/index.php, so none of this renders today and all three pages are ink
  from the header to the footer. It is kept, and kept correct, because the band
  is a comment away from returning and it would come back unskinned: white
  ground, #1a1a1a cards, Season Serif headings, in the middle of an ink page.

  When it does return it is the page's one Paper band, and the only place on
  any of the three where ink meets paper. That transition gets the stepped
  seam.

  Drawn as a ::before on the LOWER block, filled with the colour of the block
  above, rather than by clipping the section, which would cut its content too.

  AN SVG BACKGROUND, NOT clip-path. clip-path puts the vertical risers on
  fractional pixels (87% of 1440 is 1252.8), so every riser picks up a 1px
  antialiased blend that reads as a pale hairline. An inline SVG with
  shape-rendering="crispEdges" and preserveAspectRatio="none" snaps every edge
  to a whole pixel. If you redraw the steps, keep both attributes.
------------------------------------------------------------------------------*/

body.cs-skin .pricing {
  background-color: var(--paper);
  position: relative;
}

body.cs-skin .pricing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%2012%22%20preserveAspectRatio=%22none%22%20shape-rendering=%22crispEdges%22%3E%3Cpath%20d=%22M0%200%20H100%20V6.24%20H87%20V2.16%20H74%20V8.52%20H58%20V4.08%20H47%20V10.56%20H31%20V5.4%20H16%20V9.12%20H0%20Z%22%20fill=%22%230E1C16%22/%3E%3C/svg%3E") no-repeat top center / 100% 100%;
}

body.cs-skin .pricing > .container-fluid { position: relative; z-index: 3; }

body.cs-skin .pricing__heading {
  font-family: var(--cs-display) !important;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}

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

/* The Yearly / Monthly switch. Both labels are the same element and the pill
   slides behind whichever is active, so one text colour has to work in both
   states: the track and the pill are therefore both dark and the type stays
   light on each. The step from ink to ink-3 plus a hairline is what separates
   them, which is how every toggle on /csignal/ is built. */
body.cs-skin .pricing__toggle {
  background: var(--ink);
  border: 1px solid var(--line-on-ink);
}

body.cs-skin .pricing__toggle_circle {
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px rgba(243, 245, 238, 0.14);
}

body.cs-skin .pricing__toggle_text {
  font-family: var(--cs-body) !important;
  font-weight: 600;
  font-size: 16px;
  color: var(--on-ink);
}

/* Ink cards on the paper band: the inverse of the article cards, and the
   reason the band reads as a distinct surface rather than a colour change. */
body.cs-skin .pricing__option {
  background-color: var(--ink);
  border: 1px solid var(--line-on-ink);
  border-radius: 16px;
}

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

/* Paper, not lime. The lime in this fold belongs to the four plan buttons; a
   badge and a CTA both in lime is exactly the decoration the proportion rule
   warns about. */
body.cs-skin .pricing__option_badge {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--cs-mono) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}

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

/* The Metric role, which is what a price is. */
body.cs-skin .pricing__option_price {
  font-family: var(--cs-display) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-ink);
}

body.cs-skin .pricing__option_price-vat {
  font-family: var(--cs-mono) !important;
  font-size: 12px;
  color: var(--on-ink-muted);
}

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

/* Skin section 11 already makes .btn-white the lime pill and pins the CSignal
   button figures. The only thing left is the arrow: no button anywhere on
   /csignal/ carries an icon, and style.css reserves 3rem of right padding for
   this one, so hiding the svg alone leaves the label visibly off-centre. */
body.cs-skin .pricing__option_button svg { display: none; }
body.cs-skin .pricing__option_button { padding-right: 24px; }

/*------------------------------------------------------------------------------
  37. experts.php
  Also a shared include. On /webinars and /guides it follows an ink band and
  needs colour only. On /podcast it follows the paper pricing band, so it takes
  the second seam, filled with paper. The sibling selector is what keeps that
  seam off the other two pages.

  A different cut from the seam in section 36, or the two read as one pattern
  repeated rather than as two tears.

  .experts__subtitle is deliberately a lime chip in csignal-skin.css, site-wide
  on every page that includes experts.php. Left alone on purpose: an earlier
  attempt to restyle it as a mono label only half-won the cascade and left
  muted light text sitting on lime.
------------------------------------------------------------------------------*/

body.cs-skin .experts { background-color: var(--ink); }
body.cs-skin .experts__title { color: var(--on-ink); }
body.cs-skin .experts__description { color: var(--on-ink-muted); }

body.cs-skin .pricing ~ .experts { position: relative; }

body.cs-skin .pricing ~ .experts::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%2012%22%20preserveAspectRatio=%22none%22%20shape-rendering=%22crispEdges%22%3E%3Cpath%20d=%22M0%200%20H100%20V3.96%20H86%20V9.48%20H71%20V2.88%20H60%20V7.92%20H44%20V10.92%20H29%20V4.92%20H18%20V8.64%20H0%20Z%22%20fill=%22%23F3F5EE%22/%3E%3C/svg%3E") no-repeat top center / 100% 100%;
}

body.cs-skin .pricing ~ .experts > .container { position: relative; z-index: 3; }