/* cybee v3 · S6 Pricing (track T5, prefix price-). Every class starts with price-; shared cy- primitives come from css/foundation.css.
   Spec: DIRECTION-v3.md §3 S6, §5 (billing toggle, currency chips). DS source: WEB 191 to 209 and STA css 97 to 105 (plans in one
   hairline box, the paid cell marked by a 3px top rule, here iris per TG6), STA js 96 to 101, c.5 SignalButton and Chip at 5.4 radii.
   The WEB and STA "No trial" line is removed (g.3).
   State: six radios (billing + currency). Without JS they are the controls; with JS (s6-pricing.js) each label becomes a button with
   aria-pressed and the radios only hold the state. CSS reads the state through .price:has(#…:checked) in both cases, so the yearly
   strings and the chosen code work with JS off. Without :has support the section shows CHF and Monthly (the defaults).
   Digit slots (T10, D4): each digit sits in a .74em slot, right aligned. Yearly opens the second slot from 0 to .74em over 380ms
   while its 0 rolls up from translateY(100%); the unit moves only with that slot. The slot clips with clip-path, not overflow:hidden:
   overflow would move the inline-block baseline to its bottom edge and would cut the 0's right side bearing (spec: 90 never clips).
   Layout: subgrid rows keep label, price, sub line, list and button aligned across the two cells from 900px up; below 900 the
   cells stack (at 768 to 899 a half cell is too narrow for "CHF 90" plus the yearly note on one line, so it would grow). */

.price{background:var(--s-bg)}

/* ------------------------------------------------------------------ head */
.price-kicker{margin-bottom:20px}
.price-l{display:block}
/* review taste-07: the H2 runs across cols 1 to 12 and breaks by sentence (each sentence is its own block line), one line shorter */
.price-title{max-width:none}

/* ------------------------------------------------------------------ controls row: toggle · chips · note */
/* review novice-03: the controls live inside the box, between the Free and the Proof cell (DOM order = the stacked visual order);
   from 900px the grid lifts them into their own row above the hairline box, 32px over it, so the desktop look is unchanged */
.price-controls{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px;row-gap:12px;grid-column:1 / -1;grid-row:1;margin-bottom:32px}
.price-toggle{grid-column:1;grid-row:1}
.price-curs{grid-column:2;grid-row:1;justify-self:start}
/* review taste-07: the note sits under the chips, left aligned with them, 12px below (the row gap), 14px ink 3 */
.price-note{grid-column:2;grid-row:2;margin:0;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;color:var(--s-ink-3);text-wrap:pretty}

/* billing toggle: pill 44px, track --s-raised, white lifted thumb sliding 380ms */
.price-toggle{position:relative;box-sizing:border-box;display:inline-grid;grid-template-columns:1fr 1fr;height:44px;padding:4px;
  border-radius:999px;background:var(--s-raised);isolation:isolate}
.price-seg{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:36px;padding:0 20px;
  border-radius:999px;font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1;white-space:nowrap;color:var(--s-ink-3);
  cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color 180ms var(--ease-out)}
.price-seg::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}      /* 44px target: the pill's own padding */
.price-thumb{position:absolute;z-index:0;top:4px;left:4px;width:calc(50% - 4px);height:36px;border-radius:999px;
  background:var(--s-card);box-shadow:var(--s-lifted);transition:transform 380ms var(--ease-out);pointer-events:none}
.price-radio:checked+.price-seg{color:var(--s-ink)}
.price-toggle:has(#price-bill-year:checked) .price-thumb{transform:translateX(100%)}

/* currency chips: 44px, radius 6, hairline ring; pressed = ink fill, white text */
.price-curs{position:relative;display:flex;gap:8px}
.price-chip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:64px;padding:0 14px;
  border-radius:6px;box-shadow:inset 0 0 0 1px var(--pg-rule);background:transparent;font-family:var(--font-body);font-size:15px;
  font-weight:500;line-height:1;color:var(--s-ink);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),box-shadow 180ms var(--ease-out),transform 90ms var(--ease-out)}
.price-chip:active{transform:scale(.97)}
.price-radio:checked+.price-chip{background:#151515;color:#fff;box-shadow:inset 0 0 0 1px #151515}
@media (any-hover:hover){
  .price-seg:hover{color:var(--s-ink)}
  .price-radio:not(:checked)+.price-chip:hover{background:var(--s-hover)}
}
/* no JS: the radio holds focus, its label shows the ring */
.price-radio:focus-visible+label{outline:3px solid #2757C9;outline-offset:4px}

/* ------------------------------------------------------------------ the hairline box with two cells */
.price-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(6,auto);margin-top:52px;border-radius:0;reading-flow:grid-rows}
/* the hairline box is drawn by a grid item over the two cells' rows only (the controls row stays outside it) */
.price-box::before{content:"";grid-column:1 / -1;grid-row:2 / -1;box-shadow:inset 0 0 0 1px var(--pg-rule);pointer-events:none}
.price-cell{--price-hue:#2757C9;box-sizing:border-box;min-width:0;display:grid;grid-row:2 / span 6;grid-template-rows:subgrid;row-gap:0;
  align-content:start;padding:40px}
/* the paid cell: 3px iris top rule (TG6) and the 1px split on its left edge, both as shadows so both cells keep equal insets */
.price-cell--free{grid-column:1}
.price-cell--proof{grid-column:2;--price-hue:#794DFF;box-shadow:inset 0 3px 0 #794DFF,inset 1px 0 0 var(--pg-rule)}
.price-plan{grid-row:1}
.price-amount{grid-row:2}
.price-sub{grid-row:3}
.price-feat{grid-row:4}
.price-action{grid-row:5}
.price-trial{grid-row:6}

/* label 15/500 with the 6px hue square */
.price-plan{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.4;color:var(--s-ink-2)}
.price-plan::before{content:"";flex:none;width:6px;height:6px;background:var(--price-hue)}

/* price row: code 20px · digits (Machina, --pg-price) · 12px · unit 16px, on one baseline (the unit stack's last line).
   The spec's 8px between code and digits is carried by the first slot itself: the 9 sits right aligned in its .74em slot, so the
   slot's own slack already opens 7 to 11px (48 to 72px type) before the glyph; an extra 8px margin read as a 19px hole at 72px.
   The yearly note sits above the unit inside the same stack, beside the digits, so it takes no row of its own. */
.price-amount{display:flex;align-items:last baseline;align-self:end;margin-top:24px;white-space:nowrap;min-width:0}
.price-amount--word,.price-num{font-family:var(--font-display);font-size:var(--pg-price);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--s-ink)}
.price-amount--word{display:block}
.price-code{display:inline-grid;justify-items:end;margin-right:0;font-family:var(--font-body);font-size:20px;font-weight:400;
  letter-spacing:0;line-height:1.4;color:var(--s-ink-3)}
.price-code-i{grid-area:1 / 1}
.price-num{display:block}
.price-slot{display:inline-block;width:var(--pg-slot);text-align:right;vertical-align:baseline}
/* D4, the second slot opens over 380ms without animating a layout property: its .74em box is always in the row, closed by a
   clip; Yearly opens the clip left to right while the 0 rolls up, and the unit, drawn one slot to the left on Monthly, glides
   back with it (transform). --price-slot-x is that slot in px: var(--pg-slot) at the digits' size. */
.price-amount{--price-slot-x:calc(-.74 * var(--pg-price))}
.price-slot--roll{clip-path:inset(0 100% 0 0);transition:clip-path 380ms var(--ease-out)}
.price-roll{display:inline-block;transform:translateY(100%);transition:transform 380ms var(--ease-out)}
.price-per{flex:0 1 auto;min-width:0;display:inline-grid;grid-template-rows:auto auto;justify-items:start;margin-left:12px;
  font-family:var(--font-body);font-size:16px;font-weight:400;letter-spacing:0;line-height:1.4;color:var(--s-ink-2);
  transform:translateX(var(--price-slot-x));transition:transform 380ms var(--ease-out)}
.price-per-i{grid-area:2 / 1;transition:opacity 180ms var(--ease-out),visibility 0s linear 180ms}
.price-yearly{grid-area:1 / 1;margin-bottom:2px;font-size:14px;line-height:1.4;white-space:normal;text-wrap:pretty;color:var(--s-ink-2);
  transition:opacity 180ms var(--ease-out),visibility 0s linear 180ms}
.price-sr--y{display:none}

/* sub lines, side by side: "Forever. Unlimited Macs and people." · "Everything in Free, plus:" */
.price-sub{margin-top:12px;font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}

/* lists: 16/1.5, 10px row gaps, 6px hue squares (no cy-check, TG6) */
.price-feat{margin-top:32px}
.price-list{display:grid;gap:10px}
.price-li{position:relative;padding-left:20px;font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.5;color:var(--s-ink);text-wrap:pretty}
.price-li::before{content:"";position:absolute;left:0;top:calc(.75em - 2px);width:6px;height:6px;background:var(--price-hue)}

.price-action{margin-top:40px}
.price-trial{max-width:44ch;margin-top:16px;font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;color:var(--s-ink-2);text-wrap:pretty}

/* "All plan details →": 16/500 ink, Signal arrow, right aligned under the box, 44px target */
.price-more{margin-top:14px;text-align:right}
.price-more-a,.price-more-a:hover{min-height:44px;font-size:16px}

/* ------------------------------------------------------------------ state (radios; JS keeps them in sync with cyPage) */
/* currency: only the code swaps, stacked in one grid cell so the number never moves */
.price-code-i:not(.price-code-i--chf){visibility:hidden}
.price:has(#price-cur-eur:checked) .price-code-i--chf,
.price:has(#price-cur-usd:checked) .price-code-i--chf,
.price:has(#price-cur-gbp:checked) .price-code-i--chf{visibility:hidden}
.price:has(#price-cur-eur:checked) .price-code-i--eur,
.price:has(#price-cur-usd:checked) .price-code-i--usd,
.price:has(#price-cur-gbp:checked) .price-code-i--gbp{visibility:visible}

/* billing: monthly by default */
.price-per-i--y,.price-yearly{opacity:0;visibility:hidden}
.price:has(#price-bill-year:checked) .price-slot--roll{clip-path:inset(0 -.08em 0 0)}
.price:has(#price-bill-year:checked) .price-roll,
.price:has(#price-bill-year:checked) .price-per{transform:none}
.price:has(#price-bill-year:checked) .price-per-i--m{opacity:0;visibility:hidden}
.price:has(#price-bill-year:checked) .price-per-i--y,
.price:has(#price-bill-year:checked) .price-yearly{opacity:1;visibility:visible;transition-delay:0s}
.price:has(#price-bill-year:checked) .price-sr--m{display:none}
.price:has(#price-bill-year:checked) .price-sr--y{display:inline}

/* ------------------------------------------------------------------ 1024 band: toggle and chips on one line, the note below; padding 32 */
@media (max-width:1279px){
  .price-cell{padding:32px}
}

/* ------------------------------------------------------------------ below 900: the cells stack (Free, then Proof) */
@media (max-width:899px){
  .price-box{grid-template-columns:minmax(0,1fr);grid-template-rows:none;margin-top:40px}
  .price-box::before{content:none}
  /* stacked: each cell keeps its own hairline; the controls sit between them, right above the Proof price they change */
  .price-cell,.price-cell--free,.price-cell--proof{display:block;grid-row:auto;grid-column:1;box-shadow:inset 0 0 0 1px var(--pg-rule)}
  .price-cell--proof{box-shadow:inset 0 3px 0 #794DFF,inset 0 0 0 1px var(--pg-rule)}
  .price-controls{grid-row:auto;grid-column:1;margin:24px 0}
  /* review novice-13: stacked, the Free cell's small "Free" label repeats its price word; it is visually hidden (the .cy-sr pattern)
     and stays for screen readers. From 900px it stays, so the two cells' rows align. */
  .price-cell--free .price-plan{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .price-cell--free .price-amount--word{margin-top:0}
}

/* ------------------------------------------------------------------ phones: full width toggle, one chip row, padding 24 */
@media (max-width:767px){
  .price-controls{grid-template-columns:minmax(0,1fr);gap:12px}
  .price-toggle,.price-curs,.price-note{grid-column:1;grid-row:auto}
  .price-toggle{display:grid;width:100%}
  .price-seg{padding:0 12px}
  .price-curs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;justify-self:stretch}   /* stretch: start shrank the four chips to 32px (27 Sep) */
  .price-chip{min-width:0;padding:0}
  .price-note{margin-top:4px}
  .price-cell{padding:24px}
  .price-btn{width:100%}
  .price-feat{margin-top:28px}
  .price-action{margin-top:32px}
  /* the cells are stacked and the toggle sits a screen above the Proof price: the unit swaps without a crossfade and the
     yearly note gets its own full line under the price row, taking no room until it shows. The row is a grid so both units
     share one cell and glide with the opening slot, as on desktop */
  .price-amount:not(.price-amount--word){display:grid;grid-template-columns:auto auto minmax(0,1fr)}
  .price-per{display:contents}
  .price-per-i{grid-area:1 / 3;justify-self:start;margin-left:12px;white-space:nowrap;transform:translateX(var(--price-slot-x));transition:transform 380ms var(--ease-out)}
  .price-yearly{display:none}
  .price:has(#price-bill-year:checked) .price-per-i{transform:none}
  .price:has(#price-bill-year:checked) .price-yearly{display:block;grid-area:2 / 1 / 3 / -1;margin:8px 0 6px}
}