/* pricing-v2.css - the three package cards in .section_companies.
 *
 * Replaces EverWonder's "Associated companies" row (Next of Kin / Players Era /
 * Lost Tribe) with a three-tier ISSB pricing row: Initial Preparation, ISSB
 * Preparation, ISSB Academy. Injected by STRUCTURAL EDIT 12 in _build/localize.py.
 *
 * SUPERSEDES design-v3.css. That file was the August package-card attempt, reverted
 * the same day; this one keeps its layout skeleton (see below) but drops the
 * photographic backgrounds and adds the aurora. design-v3.css is now dead weight -
 * left on disk only because deleting it is the owner's call.
 *
 * Fourth of the stylesheets this sandbox adds on top of the Webflow bundle
 * (nav-v2.css, preloader-v2.css, this). Loaded last, so it wins any overlap.
 *
 * CONTAINMENT: every selector below is prefixed with .section_companies. Nothing
 * here can match an element outside that subtree - the same discipline nav-v2.css
 * is held to. If you add a rule, keep the prefix.
 *
 * ------------------------------------------------------------------
 * THE DESIGN
 *
 * A reproduction of unlumen UI's /pricing card (ui.unlumen.com, the "Aurora Card"):
 * a light panel, softly rounded, black text, a very large price with its qualifying
 * lines set small BESIDE it rather than under it, an icon'd feature list, and a
 * full-width button at the base.
 *
 * The reference shows two cards - a glowing "Pro" and a plain "Studio" - and that
 * contrast is the whole point of it. Here the middle card (ISSB Preparation) is the
 * Pro: it alone carries the aurora and a solid dark button. The two flanking cards
 * are the Studio: white, hairline-bordered, quiet grey button. The owner chose
 * centre-only glow explicitly.
 *
 * The aurora itself is a WebGL shader, not CSS - see assets/js/aurora-v2.js. This
 * file only positions its canvas and supplies the fallback if WebGL is unavailable.
 *
 * ------------------------------------------------------------------
 * SIZING IS IN em, DELIBERATELY
 *
 * The page runs Webflow's adaptive --size-unit scale, where 1em tracks the viewport.
 * Anything in px here would hold still while the rest of the page resized around it.
 * The two exceptions are hairlines and the card radius, which should not scale.
 *
 * .lp rebases the whole panel at 1.35em, and every child sizes off that, so the
 * panel scales as one unit. The 1.35 is not arbitrary: the adaptive scale resolves
 * 1em to about 12px at a 1440 viewport - .card is 32em and measures 384px - so
 * sizing children directly against the inherited em put body copy at 10.2px and the
 * button label at 11.4px, both under the 12px floor. Rebasing lifts feature rows to
 * ~13.8px and the button to ~15.4px while leaving every child's proportion intact.
 * Do not "fix" this by switching to px.
 */

/* ------------------------------------------------------------------ */
/* Faces                                                               */
/* ------------------------------------------------------------------ */

/* Both OFL, both fetched by _build/fetch-fonts.sh. These are the reference's own
 * faces, which makes them correct and licence-clear in the same choice - unlike
 * ABCDiatype (commercial Dinamo, borrowed by the header) or EverWonder's own
 * KMR Melange Grotesk, neither of which may travel beyond this sandbox. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Card chrome                                                         */
/* ------------------------------------------------------------------ */

/* .card is built for a poster: `aspect-ratio: 5.6/7.8`, `align-items: flex-end`,
 * `padding-bottom: 2em` - a fixed, very tall box with a logo lockup floating at its
 * base. A pricing card is the opposite shape of problem: its height should come from
 * what it says. So the ratio is released and height follows content.
 *
 * EQUAL-HEIGHT CARDS - owner-directed, 30 Aug 2026. .companies_list used to be
 * `align-items: center`, which let the two flanking cards content-height-center
 * against the taller middle one - correct as long as the flanks were also shrunk
 * to 0.85 by .is-smaller, because a slightly shorter, slightly smaller card read
 * as intentional restraint. With .is-smaller retired (see the stretch rule below
 * and _build/localize.py's pkg_card()), centering a content-short card against a
 * content-tall one would just look like a mistake - three cards of visibly
 * different heights in a row that is supposed to read as one price list.
 * `align-items: stretch` on the list plus `display: flex` on each item (below)
 * fixes all three slots to the tallest card's height instead; .lp's existing
 * `flex: 1` and .lp_cta's existing `margin-top: auto` are what let the shorter
 * cards' content spread to fill that height without changing their own layout
 * rules.
 *
 * Kept from .card: the 32em width, overflow:hidden (which clips the aurora), and
 * position:relative. The .is-smaller transform is gone - not overridden, never
 * emitted - now that all three cards are meant to be the same size. */
/* Radius and the featured card's background are the live card's measured values:
 * `border-radius: 32px` and `background: rgb(247, 247, 247)` (its `bg-surface`
 * token). */
.section_companies .companies_list {
  /* Was center (see above); stretch is what makes all three slots equal height. */
  align-items: stretch;
  /* The source row's ~5px gap read fine only while .is-smaller shrank the flanks -
   * the whitespace between cards was the scale's margin, not a real gap. With all
   * three cards equal-sized the separation has to be layout. 3em matches the
   * reference row's spacing proportionally, and em (not px/rem) so it tracks the
   * page's adaptive --size-unit scale like everything else here. */
  gap: 3em;
}

.section_companies .companies_item {
  /* The card <a> is this item's only flex child, so display:flex here is what
   * lets it stretch to the item's full (list-driven) height instead of sizing to
   * its own content. */
  display: flex;
}

.section_companies .pkg-card {
  aspect-ratio: auto;
  height: auto;
  align-items: stretch;
  padding-bottom: 0;
  border-radius: 32px;
  text-decoration: none;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* The featured card is the reference's "Pro": no hairline, and the #f7f7f7 surface
 * the aurora is composited over on the live page. */
.section_companies .pkg-card.is-featured {
  background: #f7f7f7;
  box-shadow: none;
}

/* Sits above the aurora. Without the stacking context the blurred canvas would
 * paint over the copy. */
.section_companies .pkg-card_content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* The aurora layer (featured card only)                               */
/* ------------------------------------------------------------------ */

/* aurora-v2.js appends a <canvas> in here and drives it.
 *
 * Geometry and filter are the live card's, read with getComputedStyle rather than
 * matched by eye: `absolute inset-0` inside a `relative overflow-hidden` card, and
 * `filter: blur(10px)`. (The /pricing variant of the same card uses `blur(11px)`
 * and `opacity: 0.81` — switch both here if you switch the shader config in
 * aurora-v2.js.)
 *
 * THERE IS NO MASK, and adding one would be a mistake. An earlier version of this
 * file masked the layer into a lower-left blob, because the shader it then used
 * wrote opaque pixels and had to be cut to shape. The real shader computes its own
 * alpha, so it is already transparent everywhere there is no aurora — the live card
 * reports `mask-image: none`. Masking it again would only clip the effect.
 *
 * The background-image is the no-WebGL2 fallback: if aurora-v2.js bails the layer
 * still carries a static approximation instead of collapsing to a blank panel. The
 * canvas covers it whenever it does work, and `.has-aurora` removes it so the two
 * can never show through each other. */
.section_companies .pkg-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  filter: blur(10px);
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 20% 82%, rgba(253, 107, 144, 0.6) 0%, rgba(253, 107, 144, 0) 72%),
    radial-gradient(42% 38% at 6% 62%, rgba(253, 107, 144, 0.35) 0%, rgba(253, 107, 144, 0) 74%);
}

.section_companies .pkg-aurora.has-aurora {
  background: none;
}

.section_companies .pkg-aurora canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ */
/* .lp - the light panel                                               */
/* ------------------------------------------------------------------ */

.section_companies .lp {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #111;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 1.35em;
  padding: 1.5em 1.35em 1.35em;
}

.section_companies .lp_top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

/* Serif, as the reference sets its tier names - the one place the card breaks from
 * the sans and the reason Instrument Serif is fetched at all. */
.section_companies .lp_name {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.32em;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.section_companies .lp_tag {
  font-size: 0.72em;
  line-height: 1.2;
  color: #6b6b6b;
  white-space: nowrap;
}

/* The reference's signature move: the figure is enormous and its qualifying lines
 * sit small to its right, baseline-aligned against the bottom of the number rather
 * than centred on it. */
.section_companies .lp_pricerow {
  display: flex;
  align-items: flex-end;
  gap: 0.75em;
  margin-top: 0.85em;
}

.section_companies .lp_fig {
  font-size: 2.6em;
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "Rs 20,000" is a far longer figure than the reference's "$119", and at the price
 * size it would crowd the qualifier column off the card. Demoting the currency
 * recovers the width without shrinking the number, which is the part that should
 * carry the weight. */
/* margin-right is 0 since 28 Aug 2026 (pre-ship review finding L1). It used to be
 * 0.18em and it was standing in for a space that was not in the markup: the figure
 * read "Rs2,500" to a screen reader and to a copy-paste, against the struck price
 * beside it, which has always read "Rs 5,000". The space is now a real character
 * inside this span (see pkg_card in _build/localize.py), set at THIS element's
 * 0.46em rather than at .lp_fig's 2.6em, which is what makes it match the struck
 * figure's gap instead of being three times it. Keeping the margin as well would
 * have doubled the gap. */
.section_companies .lp_cur {
  font-size: 0.46em;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0;
  vertical-align: 0.42em;
}

.section_companies .lp_qual {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 0.8em;
  line-height: 1.3;
  color: #6b6b6b;
  padding-bottom: 0.3em;
}

.section_companies .lp_was {
  font-size: 1.2em;
  color: #9a9a9a;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.section_companies .lp_features {
  list-style: none;
  margin: 1.6em 0 0;
  padding: 1.45em 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.05em;
}

.section_companies .lp_features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: 0.85em;
  line-height: 1.35;
  color: #4a4a4a;
}

.section_companies .lp_features .lp-ico {
  width: 1.5em;
  height: 1.5em;
  flex: none;
  color: #8a8a8a;
  margin-top: -0.1em;
}

/* The whole card is the link, so the button is a <span> and must not look
 * separately clickable. mt-auto pins it to the base regardless of how many features
 * the tier lists - the three cards do not carry the same number. */
.section_companies .lp_cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: 1.8em;
  transition: none;
}

.section_companies .lp_cta > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.05em 1.2em;
  border-radius: 12px;
  background: #ededed;
  color: #111;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* The featured card's button is solid dark from rest, as the reference's Pro is -
 * it is the one the row is steering toward. */
.section_companies .pkg-card.is-featured .lp_cta > span {
  background: #2b2b2b;
  color: #f7f7f7;
}

/* Guarded on a real hover-capable pointer. Without it a touch device can latch
 * the hover state after a tap - the whole card is a link - and leave a flanking
 * card wearing the featured card's dark button until you tap elsewhere. */
@media (hover: hover) {
  .section_companies .pkg-card:hover .lp_cta > span {
    background: #111;
    color: #f7f7f7;
  }
}

/* ------------------------------------------------------------------ */
/* Icon symbol definitions                                             */
/* ------------------------------------------------------------------ */

/* The <symbol> block is emitted once per section and is never itself rendered.
 * `hidden` alone is not enough - the Webflow bundle sets `display:block` broadly on
 * svg, which would override the attribute. */
.section_companies .pkg-sprite-defs {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

/* design-v3.css asserted that "the bundle already stacks .companies_list to one
 * column below 767px and gives each item 90% width". It does not - measured at a
 * 500px viewport, .companies_list is still `flex-direction: row; flex-wrap: nowrap`
 * and the three cards simply shrink, to ~188px each with the first pushed off the
 * left edge. That claim was carried over untested when design-v3.css was written and
 * is wrong; the stacking has to be done here.
 *
 * Three posters shrinking to 188px is survivable - that is what the source row is.
 * Three pricing cards at 188px are not: the price, its struck original and two
 * qualifier lines all share one row, and there is no width for them.
 *
 * The em type scale needs no help at this size. Measured at 500px the panel resolves
 * to 14.1px with feature rows at 12.0px, which is the floor the 1.35em rebase exists
 * to hold. Only the geometry is wrong. */
@media (max-width: 767px) {
  .section_companies .companies_list {
    flex-direction: column;
    /* A real gap between stacked cards, not a scaled one: this is layout separation
     * rather than type, and the source's 5px inline-row gap is far too tight once
     * the cards are full width. */
    gap: 1.5rem;
    /* Stacked, align-items is the HORIZONTAL axis. The desktop equal-height rule
     * sets the list to stretch, which between ~520px and 767px would pin the
     * 30rem-capped items to the left edge; center restores the bundle's own
     * behaviour, which is what kept the stack centred before that rule existed. */
    align-items: center;
  }

  .section_companies .companies_item {
    /* Not full-bleed (owner, 30 Aug 2026): a pricing card spanning the whole
     * phone width reads as a panel, not a card. 88% keeps a visible margin of
     * page behind the stack; the list's align-items:center centres each item. */
    width: 88%;
    max-width: 30rem;
    /* The odyn bundle's parallax writes inline transforms on [data-scroll-speed]
     * items. Side by side that drift is depth; stacked it randomly squeezes the
     * 1.5rem gap (measured 9-63px across scroll positions, overlapping at some)
     * and pushes the first card into the headline. !important is what beats the
     * inline style. Desktop parallax is untouched. */
    transform: none !important;
  }

  .section_companies .pkg-card {
    width: 100%;
  }

  /* Stacked, the headline block (h2 + "Pricing" label) must not sit directly on
   * the first card. rem, not em - layout separation, same reasoning as the
   * stack gap above. */
  .section_companies .companies_title {
    margin-bottom: 1.5rem;
  }

  .section_companies .lp {
    padding: 1.5em 1.3em 1.3em;
  }
  .section_companies .lp_fig {
    font-size: 2.25em;
  }
  .section_companies .lp_features {
    margin-top: 1.3em;
    padding-top: 1.2em;
    gap: 0.85em;
  }
  .section_companies .lp_cta {
    padding-top: 1.5em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section_companies .lp_cta > span {
    transition: none;
  }
}