/* site/plus_cards.css — tier cards shared by the /plus options (site/plus_limits.js VersosPlusLimits.mount).
 * Phone: one horizontally swipeable row (scroll-snap), the next card peeking in; only the row scrolls, never the page.
 * Desktop (>= 900px): the four cards side by side. A tapped card expands in place (grid-rows 0fr → 1fr, so the height
 * animates without measuring), its details fade up in sequence; prefers-reduced-motion turns all of it into a plain
 * show/hide. Site tokens only (styles.css), both themes. */
.tiers { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: .5rem .1rem 1rem; max-width: 100%; scrollbar-width: thin;
  align-items: start; }
.tier { --ease: cubic-bezier(.2, .8, .2, 1); position: relative; scroll-snap-align: center; min-width: 0; display: flex; flex-direction: column;
  gap: .6rem; padding: 1rem; border-radius: 16px; border: 1px solid var(--rule); background: var(--paper-raised); cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s; -webkit-tap-highlight-color: transparent; }
.tier:hover { border-color: var(--accent-soft); }
.tier.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tier.open { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--accent-soft) inset, 0 14px 30px -18px rgba(60, 30, 20, .45); }
.tier.best.open { box-shadow: 0 0 0 1px var(--accent) inset, 0 16px 34px -18px rgba(150, 50, 35, .55); }
.tier:active:not(:has(.join:active)) { transform: scale(.99); }

.tier-head { all: unset; display: flex; flex-direction: column; gap: .55rem; cursor: pointer; border-radius: 10px; }
.tier-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tier .tag { align-self: flex-start; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--paper); background: var(--accent); border-radius: 999px; padding: .2rem .55rem; }
.tier .tag.ghost { background: transparent; color: var(--ink-faint); padding-left: 0; }
.tier .n { font-family: 'Fraunces', serif; font-size: 1.3rem; line-height: 1.1; }
.tier .p { font-family: 'Fraunces', serif; font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .25rem; }
.tier .p small { font-family: 'Inter', system-ui, sans-serif; font-size: .78rem; color: var(--ink-soft); }
.tier .p .save { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: .7rem; font-weight: 600; color: var(--accent); border: 1px solid var(--accent-soft); border-radius: 999px; padding: .05rem .4rem; }
.tier .p.swap { animation: tier-swap .35s var(--ease); }
@keyframes tier-swap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.tier dl { margin: .1rem 0 0; display: grid; gap: .45rem; }
.tier dt { font-size: .72rem; color: var(--ink-faint); }
.tier dd { margin: 0; font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.more-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--accent); margin-top: .1rem; }
.more-hint .mh-close, .tier.open .more-hint .mh-open { display: none; }
.tier.open .more-hint .mh-close { display: inline; }
.more-hint .chev { width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.tier.open .more-hint .chev { transform: translateY(1px) rotate(-135deg); }

.tier-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.tier.open .tier-more { grid-template-rows: 1fr; }
.tier-more .inner { overflow: hidden; min-height: 0; display: grid; gap: .5rem; }
.tier-more .inner > * { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .3s var(--ease); }
.tier.open .tier-more .inner > * { opacity: 1; transform: none; }
.tier.open .tier-more .inner > :nth-child(1) { transition-delay: .08s; }
.tier.open .tier-more .inner > :nth-child(2) { transition-delay: .13s; }
.tier.open .tier-more .inner > :nth-child(3) { transition-delay: .18s; }
.tier.open .tier-more .inner > :nth-child(4) { transition-delay: .23s; }
.tier.open .tier-more .inner > :nth-child(n+5) { transition-delay: .28s; }
.tier-more .inner > :first-child { margin-top: .3rem; }
.tier-more p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.tier-more .for b { color: var(--ink); font-weight: 600; }
.tier-more .h { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-top: .3rem; }
.tier-more ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.tier-more li { position: relative; padding-left: 1.1rem; font-size: .86rem; line-height: 1.4; }
.tier-more li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .45rem; height: .25rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.tier-more li .tier-coming { display: inline-block; font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--accent-soft); border-radius: 999px; padding: .08rem .4rem; vertical-align: .15em; }
.tier-more .prop { font-size: .8rem; font-style: italic; }
.tier-more .offer { color: var(--ink); border: 1px solid var(--accent-soft); border-radius: 10px; padding: .5rem .6rem; background: var(--paper); }
.tier-more .lang { display: grid; gap: .3rem; font-size: .78rem; color: var(--ink-soft); margin-top: .2rem; }
.tier-more select { font: inherit; font-size: .9rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: .5rem .6rem; min-height: 44px; }

.tier .join { margin-top: auto; justify-content: center; white-space: nowrap; min-height: 44px; }
.tier .join:active { transform: translateY(1px); }
.tier .join-note { margin: .1rem 0 -.15rem; font-size: .78rem; color: var(--ink-soft); }
.tier .join-msg { margin: -.2rem 0 0; font-size: .78rem; color: var(--ink-soft); min-height: 0; }
.tier .join-msg:empty { display: none; }
.tiers-hint { font-size: .75rem; color: var(--ink-faint); margin: -.3rem 0 .4rem; }

@media (min-width: 900px) {
  .tiers { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: .5rem 0 .6rem; align-items: stretch; }
  .tiers-hint { display: none; }
  /* The open card widens in place (its column animates to 2fr) so its details read as lines, not a narrow strip. */
  .tiers { transition: grid-template-columns .45s cubic-bezier(.2, .8, .2, 1); }
  .tiers:has(> .tier:nth-child(1).open) { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .tiers:has(> .tier:nth-child(2).open) { grid-template-columns: 1fr 2fr 1fr 1fr; }
  .tiers:has(> .tier:nth-child(3).open) { grid-template-columns: 1fr 1fr 2fr 1fr; }
  .tiers:has(> .tier:nth-child(4).open) { grid-template-columns: 1fr 1fr 1fr 2fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tiers, .tier, .tier-more, .tier-more .inner > *, .more-hint .chev { transition: none !important; }
  .tier.open, .tier:active { transform: none; }
  .tier .p.swap { animation: none; }
}

/* Learning features grid (site/plus_features.js): tiles in 2 columns (3 on wide screens); a tapped tile opens across the
 * row with its explainer and, where there is one, a picture from the app. Coming tiles are dashed. */
.fgroup { margin: 0 0 1.1rem; }
.fgroup-h { font-size: .78rem; color: var(--ink-faint); margin: 0 0 .5rem; }
.fgroup-h b { color: var(--ink); font-weight: 600; margin-right: .2rem; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; grid-auto-flow: row dense; }
.ft { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-raised); min-width: 0; transition: border-color .2s; }
.ft:hover { border-color: var(--accent-soft); }
.ft.soon { background: transparent; border-style: dashed; }
.ft.open { grid-column: 1 / -1; border-color: var(--accent-soft); }
.ft-head { all: unset; box-sizing: border-box; display: grid; gap: .2rem; width: 100%; padding: .7rem .75rem; cursor: pointer; border-radius: 14px; min-height: 44px; }
.ft-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ft-t { font-weight: 600; font-size: .9rem; line-height: 1.25; }
.ft-s { font-size: .78rem; line-height: 1.35; color: var(--ink-soft); }
.ft-badge { justify-self: start; font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-top: .15rem; }
.ft-more { padding: 0 .75rem .8rem; display: grid; gap: .6rem; animation: ft-in .35s cubic-bezier(.2, .8, .2, 1); }
.ft-more[hidden] { display: none; }
.ft-more img { width: 100%; max-height: 180px; object-fit: cover; object-position: 50% 25%; border-radius: 10px; border: 1px solid var(--rule); background: var(--paper); }
.ft-more p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
@keyframes ft-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
::view-transition-group(*) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (min-width: 1100px) { .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ft-more { animation: none; } }