/* ==========================================================================
   system.css — page-only layer for system.html (SY.STEM), rebuilt 2026-10-22 in the MAIN site look.
   Loads after pages.css (kit). Tokens only: palette at alpha + existing gradients, no new colours / radii / fonts.
   Parts: .sy-beat (Bebas line in prose)  .sy-statement (reframe line)  .sy-hours (story numbers panel)
          .sy-diagram = .sy-stem (S T E M pillars) rising from .sy-base (S Y foundation)  .sy-after  .sy-quote
   ========================================================================== */

/* ---- Beat: one short Bebas line inside a prose stack, yellow rule on the left ---- */
.sy-beat {
  margin-block: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: 3px solid var(--color-yellow-400);
  font-family: var(--font-display); font-size: var(--fs-display-sm); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--pg-title); text-wrap: balance;
}

/* ---- Reframe: H2 left; paragraph + two-tone Bebas statement right (statement on a hairline) ---- */
@media (min-width: 1069px) {
  .sy-reframe { align-items: end; }
}
/* full-width closing beat under both columns */
.sy-statement--wide {
  max-width: none; margin-top: var(--gap-intro-content); padding-top: var(--space-7);
  font-size: var(--fs-display-lg);
}
.sy-statement {
  margin-top: var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--pg-line-strong);
  font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--color-text); text-wrap: balance;
}
.pg-head > .sy-statement { max-width: var(--measure-body); }
.sy-statement__turn { color: var(--color-blue-700); }

/* ---- Story numbers panel (glass on the navy band) ---- */
.sy-story { align-items: center; }
.sy-hours {
  position: relative; padding: var(--panel-pad); border-radius: var(--radius-lg);
  background: var(--gradient-card-glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.sy-hours::before {   /* yellow tab, same as the kit cards */
  content: ""; position: absolute; top: -1px; left: var(--panel-pad); width: var(--space-6); height: 3px; border-radius: 0 0 2px 2px; background: var(--color-yellow-400);
}
.sy-hours__row + .sy-hours__row { margin-top: var(--space-7); }
.sy-hours__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.sy-hours__num {
  font-family: var(--font-display); font-size: calc(var(--fs-display-xl) * 1.5); line-height: 0.9; letter-spacing: var(--ls-display-xl);
  color: var(--color-on-dark-faint);
}
.sy-hours__row--after .sy-hours__num { color: var(--color-yellow-400); }
.sy-hours__label {
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4;
  letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--color-on-dark-muted);
}
.sy-hours__bar { display: block; height: var(--space-2); margin-top: var(--space-4); border-radius: var(--radius-pill); background: var(--hairline-dark); overflow: hidden; }
.sy-hours__bar > span { display: block; width: var(--sy-w, 100%); height: 100%; border-radius: inherit; background: var(--color-on-dark-faint); }
.sy-hours__row--after .sy-hours__bar > span { background: var(--color-yellow-400); }
.sy-hours__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
  margin: var(--space-7) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--hairline-dark);
}
.sy-hours__facts dt { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--color-white); }
.sy-hours__facts dd {
  margin: var(--space-1) 0 0; font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-on-dark-muted);
}

/* ==========================================================================
   Six pillars diagram: the STEM row stands on the SY foundation.
   Both rows share one 4-column grid, so each riser lands on the slab under its pillar.
   ========================================================================== */
.sy-diagram { margin-top: var(--gap-intro-content); }
.sy-tier { margin-bottom: var(--space-5); }
.sy-tier__tag {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--tint-brand-strong); color: var(--color-blue-700); letter-spacing: var(--ls-kicker);
}
.sy-stem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.sy-pillar {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0;
  padding: var(--card-pad); border-radius: var(--radius-lg);
  background: var(--color-white); border: 1px solid var(--color-hairline); box-shadow: var(--shadow-card-soft);
  transition: box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.sy-pillar::before {   /* yellow tab (kit card) */
  content: ""; position: absolute; top: -1px; left: var(--card-pad); width: var(--space-6); height: 3px; border-radius: 0 0 2px 2px;
  background: var(--color-yellow-400); transition: width var(--dur-mid) var(--ease);
}
.sy-pillar__letter {
  display: block; font-family: var(--font-display); font-size: var(--fs-display-xl); line-height: 0.9; letter-spacing: var(--ls-display-xl);
  color: var(--color-blue-700);
}
.sy-pillar__title {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-sm); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--color-blue-700);
}
.sy-pillar__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); text-wrap: pretty; }
/* riser: from the pillar down to the foundation, yellow joint on the slab */
.sy-pillar__stem {
  position: absolute; top: 100%; left: 50%; width: 2px; height: var(--space-7); transform: translateX(-50%);
  background: linear-gradient(180deg, var(--hairline-light-strong) 0%, var(--color-blue-700) 100%);
}
.sy-pillar__stem::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; transform: translateX(-50%);
  border-radius: var(--radius-pill); background: var(--color-yellow-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-yellow-400) 22%, transparent);
}

/* foundation slab: brand blue (kit blue card recipe) */
.sy-base {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap);
  margin-top: var(--space-7); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--glow-primary-soft), var(--gradient-band-blue-flat); border: 1px solid var(--hairline-dark);
  box-shadow: var(--shadow-rest); color: var(--color-on-dark);
}
.sy-base :focus-visible { outline-color: var(--color-yellow-400); }
.sy-base__head {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-7) var(--card-pad) var(--space-6); border-bottom: 1px solid var(--hairline-dark);
}
.sy-base__head .kicker { color: var(--color-on-dark-muted); }
.sy-base__head .sy-tier__tag { background: var(--glass-bg); color: var(--color-yellow-400); box-shadow: inset 0 0 0 1px var(--hairline-dark-strong); }
.sy-base__lead {
  max-width: 32ch; font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--color-white); text-wrap: balance;
}
.sy-base__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0;
  grid-column: span 2; padding: var(--space-8) var(--card-pad); border-left: 1px solid var(--hairline-dark);
}
.sy-base__item:nth-child(2) { border-left: 0; }
/* S and Y one step bigger than the STEM letters: the foundation reads first */
.sy-base__item .sy-pillar__letter { font-size: calc(var(--fs-display-xl) * 1.4); }
.sy-base__item .sy-pillar__letter { color: var(--color-yellow-400); }
.sy-base__item .sy-pillar__title { color: var(--color-white); }
.sy-base__item .sy-pillar__text { color: var(--color-on-dark-muted); }
.sy-base__item a {
  color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-yellow-400);
  text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color var(--dur-mid) var(--ease);
}
.sy-base__item a:hover { text-decoration-color: currentColor; }

/* two closing paragraphs under the diagram */
.sy-after {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-9);
  margin-top: var(--gap-intro-content); padding-top: var(--space-7); border-top: 1px solid var(--hairline-light);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted);
}
.sy-after > p { max-width: var(--measure-body); text-wrap: pretty; }
.sy-after > p:first-child { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-blue-700); }

/* quote: long line, one step smaller than the kit quote band */
.sy-quote { margin-top: var(--gap-intro-content); padding-top: var(--space-7); border-top: 1px solid var(--hairline-light); }
.sy-quote blockquote p { font-size: var(--fs-display-sm); }
.sy-quote .pg-who__avatar img { object-position: 50% 0%; transform: scale(2.2); transform-origin: 50% 12%; }

/* fit cards: 2 up, capped so they read as a pair */
.sy-fit { max-width: calc(var(--container-text) + 2 * var(--space-9)); margin-inline: auto; }
.sy-fit .pg-offer__foot { padding-top: var(--space-5); }
@media (max-width: 1068px) {
  .pg-grid.sy-fit { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  /* recognition band: heading + text first, photo after (no two photos back to back after the hero) */
  .pg-split.sy-recog .pg-split__media { order: 2; }
}
@media (max-width: 734px) {
  .sy-fit .pg-offer__foot .btn { padding-inline: var(--space-4); font-size: var(--fs-label); }
}

@media (hover: hover) {
  .sy-pillar:hover { box-shadow: var(--pg-shadow-hover); border-color: var(--hairline-light-strong); }
  .sy-pillar:hover::before { width: var(--space-9); }
}
@media (prefers-reduced-motion: reduce) {
  .sy-pillar, .sy-pillar::before { transition: none; }
}

/* ---- Tablet <=1068: pillars 2 x 2 (risers only under the bottom row), slab head on its own row ---- */
@media (max-width: 1068px) {
  .sy-stem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-stem > .sy-pillar:nth-child(-n+2) .sy-pillar__stem { display: none; }
  .sy-base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-base__item { grid-column: span 1; padding: var(--space-6) var(--card-pad) var(--space-7); }
  .sy-base__item .sy-pillar__letter { font-size: calc(var(--fs-display-xl) * 1.2); }
  .sy-base__item:nth-child(2) { border-left: 0; }
  .sy-base__lead { max-width: none; }
  .sy-after { column-gap: var(--space-6); }
  .sy-hours { padding: var(--space-7) var(--card-pad); }
  .sy-hours::before { left: var(--card-pad); }
}

/* ---- Phone <=734: one column; pillar letter beside its text; one riser into the slab ---- */
@media (max-width: 734px) {
  .sy-beat { padding-left: var(--space-4); }
  .sy-statement { padding-top: var(--space-6); }
  .sy-stem { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .sy-pillar, .sy-base__item {
    display: grid; grid-template-columns: var(--space-7) minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); align-items: start;
  }
  .sy-pillar { padding: var(--card-pad-sm); }
  .sy-pillar::before { left: var(--card-pad-sm); }
  .sy-pillar__letter { grid-row: span 2; font-size: var(--fs-display-xl); line-height: 0.9; }
  .sy-pillar__title, .sy-pillar__text { grid-column: 2; }
  .sy-stem > .sy-pillar:nth-child(-n+3) .sy-pillar__stem { display: none; }
  .sy-base { grid-template-columns: minmax(0, 1fr); }
  .sy-base__head { padding: var(--space-6) var(--card-pad-sm) var(--space-5); }
  .sy-base__item { padding: var(--space-5) var(--card-pad-sm); border-left: 0; }
  .sy-base__item .sy-pillar__letter { font-size: var(--fs-display-xl); }
  .sy-base__item + .sy-base__item { border-top: 1px solid var(--hairline-dark); }
  .sy-tier { flex-wrap: wrap; row-gap: var(--space-2); }
  .sy-after { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-6); }
  .sy-after > p:first-child { font-size: var(--fs-body); line-height: var(--lh-body); }
  .sy-hours { padding: var(--space-6) var(--card-pad-sm); }
  .sy-hours::before { left: var(--card-pad-sm); }
  .sy-hours__row + .sy-hours__row { margin-top: var(--space-6); }
  .sy-hours__facts { margin-top: var(--space-6); padding-top: var(--space-5); }
  .sy-quote { padding-top: var(--space-6); }
  .sy-quote blockquote p { font-size: var(--fs-display-sm); }
}

/* story: on stacked layouts the text leads, the numbers panel follows */
@media (max-width: 1068px) {
  .pg-split.sy-story .pg-split__media { order: 2; }
}

/* ==== Fix round 2 (2026-10-22) ==== */
/* reframe: split, statement as a light card with yellow tab */
.sy-reframe { align-items: center; }
.sy-reframe .sy-statement {
  position: relative; margin: 0; padding: var(--panel-pad); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg);
  background: var(--color-white); box-shadow: var(--shadow-card-soft); font-size: var(--fs-display-lg);
}
.sy-reframe .sy-statement::before { content: ""; position: absolute; top: -1px; left: var(--panel-pad); width: var(--space-6); height: 3px; border-radius: 0 0 2px 2px; background: var(--color-yellow-400); }
/* story numbers: white card on the flat navy band (no dark glass) */
.sy-hours { background: var(--color-white); border-color: var(--color-hairline); box-shadow: var(--shadow-rest); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sy-hours__num { color: var(--color-text-muted); }
.sy-hours__row--after .sy-hours__num { color: var(--color-blue-700); }
.sy-hours__label, .sy-hours__facts dd { color: var(--color-text-muted); }
.sy-hours__bar { background: var(--hairline-light); }
.sy-hours__bar > span { background: var(--hairline-light-strong); }
.sy-hours__facts { border-top-color: var(--color-hairline); }
.sy-hours__facts dt { color: var(--color-blue-700); }
/* diagram: one width, tighter rhythm, stem rail joins STEM to the SY slab */
.sy-diagram { position: relative; margin-top: var(--space-9); }
.sy-after { margin-top: var(--space-9); }
.sy-base::before { content: ""; position: absolute; top: 0; left: var(--card-pad); right: var(--card-pad); height: 3px; background: var(--color-yellow-400); border-radius: 0 0 2px 2px; }
@media (max-width: 734px) {
  .sy-stem { position: relative; padding-left: var(--space-5); }
  .sy-stem::before { content: ""; position: absolute; left: 6px; top: var(--space-5); bottom: calc(-1 * var(--space-7)); width: 2px; background: linear-gradient(180deg, var(--hairline-light-strong), var(--color-blue-700)); }
  .sy-stem > .sy-pillar::after { content: ""; position: absolute; left: calc(-1 * var(--space-5) + 2px); top: var(--space-6); width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-yellow-400); }
  .sy-stem > .sy-pillar .sy-pillar__stem { display: none; }
  .sy-reframe .sy-statement { padding: var(--card-pad-sm); font-size: var(--fs-display-md); }
}

/* ==== Fix round 3 (2026-10-22) ==== */
/* hero: stat strip baseline lines up with the photo bottom */
@media (min-width: 1069px) { .sy-hero .pg-hero__grid { align-items: end; } }
/* pillars intro: H2 and paragraphs start on one line; tighter gap to the STEM label */
@media (min-width: 1069px) {
  .sy-pillars .pg-head--split { align-items: start; }
  .sy-pillars .pg-head--split > h2 { grid-row: 1 / span 2; }
  .sy-pillars .pg-head--split > .pg-head__text { justify-self: start; }
}
.sy-diagram { margin-top: var(--space-8); }
/* STEM tag stays on the label line */
.sy-tier { flex-wrap: nowrap; }
.sy-tier__tag { white-space: nowrap; flex-shrink: 0; }
/* what changes: shorter band, head + quote read as one block */
.sy-change { padding-block: var(--section-pad-y-sm) var(--section-pad-y); }
.sy-change .pg-head--center > h2 { max-width: calc(var(--measure-head) * 1.5); }
.sy-change .pg-head--center::after { content: ""; display: block; width: var(--space-6); height: 3px; margin: var(--space-6) auto 0; border-radius: 2px; background: var(--color-yellow-400); }
.sy-change .sy-quote { margin-top: var(--space-7); padding-top: 0; border-top: 0; }
@media (max-width: 734px) { .sy-tier { gap: var(--space-2); } }

/* SYSTEM pillar cards: scroll target + lit state (used by the illustration pills, js/system-wheel.js) */
.syp__card { scroll-margin-top: calc(var(--header-h, 76px) + 120px); transition: box-shadow .3s ease; }
.syp__card.is-lit { box-shadow: 0 0 0 2px var(--color-yellow-400), 0 18px 40px rgba(0, 0, 0, .35); }
.syp:has(.syw__item[data-pillar="1"]:is(:hover, :focus-visible)) #pillar-1,
.syp:has(.syw__item[data-pillar="2"]:is(:hover, :focus-visible)) #pillar-2,
.syp:has(.syw__item[data-pillar="3"]:is(:hover, :focus-visible)) #pillar-3,
.syp:has(.syw__item[data-pillar="4"]:is(:hover, :focus-visible)) #pillar-4,
.syp:has(.syw__item[data-pillar="5"]:is(:hover, :focus-visible)) #pillar-5,
.syp:has(.syw__item[data-pillar="6"]:is(:hover, :focus-visible)) #pillar-6 { box-shadow: 0 0 0 2px var(--color-yellow-400), 0 18px 40px rgba(0, 0, 0, .35); }
.syp__card--f.is-lit,
.syp:has(.syw__item[data-pillar="1"]:is(:hover, :focus-visible)) #pillar-1,
.syp:has(.syw__item[data-pillar="2"]:is(:hover, :focus-visible)) #pillar-2 { box-shadow: 0 0 0 3px var(--color-white), 0 18px 40px rgba(0, 0, 0, .35); }   /* yellow cards: white ring shows */

/* Hero photo is portrait; below 1069px the frame is 16:10, so keep the top (Shay's head) in view (2026-10-27 face-crop rule) */
@media (max-width: 1068px) { .sy-hero .pg-hero__media .pg-photo img { object-position: 50% 8%; } }

/* SYSTEM framework illustration v4 (Shay #17 + Vishnu 2026-10-27: exact copy of Shay's image + animation).
   >640px: one SVG (.syw__art): 6-piece ring (one piece per pillar), big white core, chunky pills, step dashed lines.
   <=640px: ring + pill list (.syw__stage). Reveal on scroll (.is-armed -> .is-in -> .is-done, js/system-wheel.js),
   then the dashed lines keep flowing into the centre. No JS or reduced motion = everything visible, no flow. */
.syw { --gold: #eaa23f; --navy: #161b5e; --line: #a2a9b8; margin: 56px 0 0; width: 100%; padding: 30px 28px 20px; border-radius: var(--radius-md); background: #eef0f3; box-shadow: var(--shadow-rest); }   /* full container width: lines up with the 6 cards below (Vishnu 2026-10-27) */
.syw__art { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; overflow: visible; }
.syw__stage { display: none; }
.syw__item { cursor: pointer; outline: none; }
.syw__seg { transform-box: view-box; transform-origin: 600px 310px; transition: transform .35s ease, opacity .5s ease, filter .25s ease; }
.syw__line { fill: none; stroke: var(--line); stroke-width: 2.2; stroke-dasharray: 7 7; stroke-linecap: round; transition: stroke .25s ease, opacity .5s ease; }
.syw__p { transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
.syw__pin { transition: transform .25s ease; }
.syw__body { transition: filter .25s ease; }
.syw__icon { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.syw__t { font-family: var(--font-body); font-size: 25px; font-weight: 800; letter-spacing: .5px; fill: #fff; }
.syw__t1 { font-size: 33px; font-weight: 900; }
.syw__core { fill: #fff; filter: url(#sywShadow); }
.syw__ct { font-family: var(--font-body); font-size: 31px; font-weight: 900; letter-spacing: .5px; fill: #1c2470; text-anchor: middle; dominant-baseline: middle; }
.syw__core-g { pointer-events: none; transform-box: view-box; transform-origin: 600px 310px; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease; }
/* hover / keyboard / tapped: ring piece pushes out, pill lifts, its line turns navy */
.syw__item:is(:hover, :focus-visible, .is-on) .syw__seg { transform: scale(1.045); filter: brightness(1.06); }
.syw__item:is(:hover, :focus-visible, .is-on) .syw__pin { transform: translateY(-4px); }
.syw__item:is(:hover, :focus-visible, .is-on) .syw__body { filter: drop-shadow(0 8px 14px rgba(22, 27, 94, .3)); }
.syw__item:is(:hover, :focus-visible, .is-on) .syw__line { stroke: var(--navy); }
.syw__item:focus-visible .syw__body { stroke: var(--navy); stroke-width: 3; }
/* reveal: core pops, ring pieces appear in S-Y-S-T-E-M order, pills slide in, lines fade in */
.syw.is-armed:not(.is-in) .syw__core-g { opacity: 0; transform: scale(.6); }
.syw.is-armed:not(.is-in) .syw__seg { opacity: 0; transform: scale(.8); }
.syw.is-armed:not(.is-in) .syw__line { opacity: 0; }
.syw.is-armed:not(.is-in) .syw__p--l { opacity: 0; transform: translateX(-60px); }
.syw.is-armed:not(.is-in) .syw__p--r { opacity: 0; transform: translateX(60px); }
.syw.is-armed .syw__seg { transition-delay: calc(.35s + var(--o) * .12s); }
.syw.is-armed .syw__p { transition-delay: calc(.9s + var(--o) * .1s); }
.syw.is-armed .syw__line { transition-delay: calc(1.4s + var(--o) * .08s); }
.syw.is-done .syw__seg, .syw.is-done .syw__p, .syw.is-done .syw__line { transition-delay: 0s; }
.syw.is-done .syw__line { animation: syw-flow 1.2s linear infinite; }
@keyframes syw-flow { to { stroke-dashoffset: -28; } }
.syw__hint { margin: 14px 0 0; text-align: center; font-size: 14px; color: #5b6478; }
/* phones: ring on top, pills in 2 columns (same colours) */
@media (max-width: 640px) {
  .syw { margin-top: 40px; padding: 24px 14px 16px; border-radius: 18px; }
  .syw__art { display: none; }
  .syw__stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "ring ring" "left right"; row-gap: 22px; column-gap: 10px; }
  .syw__ring { grid-area: ring; justify-self: center; position: relative; width: 236px; aspect-ratio: 1; }
  .syw__ring svg { display: block; width: 100%; height: 100%; }
  .syw__core-text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-size: 15px; font-weight: 900; line-height: 1.15; text-transform: uppercase; color: #1c2470; }
  .syw__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .syw__col--left { grid-area: left; } .syw__col--right { grid-area: right; }
  .syw__pill { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 48px; padding: 0 5px 0 14px; border-radius: var(--radius-pill); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
  .syw__col--right .syw__pill { padding: 0 12px 0 5px; justify-content: flex-start; }
  .syw__pill--y { background: var(--gold); } .syw__pill--b { background: var(--navy); }
  .syw__txt b { font-size: 1.25em; font-weight: 900; }
  .syw__pill--y .syw__txt b { color: var(--navy); } .syw__pill--b .syw__txt b { color: var(--gold); }
  .syw__ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-items: center; }
  .syw__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
}
@media (max-width: 380px) { .syw__pill { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .syw__line { animation: none !important; } .syw__seg, .syw__p, .syw__pin, .syw__line, .syw__core-g, .syp__card { transition: none !important; } }