/* ============================================================================
   cards.css — PLW CARDS & FIRST PIECES (Foundation 05)
   Loads AFTER primitives.css + content.css. Composed pieces: hero (editorial),
   feature/service/pricing/stat/testimonial cards, FAQ item. All read tokens.
   ============================================================================ */

/* ============================================================================
   PIECE: HERO  — editorial variant (asymmetric, rule-led, type-forward)
   ============================================================================ */
.c-hero { max-width: var(--container-wide); margin-inline: auto; padding: var(--space-12) clamp(var(--space-6), 5vw, var(--space-20)); }
.c-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: end; }
@media (min-width: 880px) { .c-hero__grid { grid-template-columns: 1.35fr 1fr; gap: var(--space-12); } }
.stagewrap[data-vp="mobile"] .c-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); }
.c-hero__kicker { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.c-hero__kicker .rule { height: var(--border-default); width: var(--space-12); background: var(--color-accent); }
.c-hero__title { font-family: var(--font-display); color: var(--color-fg); font-size: clamp(var(--text-4xl), 5.2vw, var(--text-6xl)); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 var(--space-6); font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; }
[data-type="anton"] .c-hero__title, [data-type="archivo"] .c-hero__title { text-transform: uppercase; font-weight: 400; letter-spacing: 0.005em; line-height: 0.94; }
[data-type="dmserif"] .c-hero__title { font-weight: 400; }
[data-type="playfair"] .c-hero__title, [data-type="spectral"] .c-hero__title { font-weight: 600; }
.stagewrap[data-vp="mobile"] .c-hero__title { font-size: var(--text-4xl); }
@media (max-width: 560px) { .c-hero__title { font-size: var(--text-4xl); } }
.c-hero__lede { font-family: var(--font-body); color: var(--color-muted); font-size: var(--text-xl); line-height: var(--leading-snug); max-width: 42ch; margin: 0 0 var(--space-8); }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.c-hero__aside { border-top: var(--border-heavy) solid var(--color-fg); padding-top: var(--space-5); }
.c-hero__stat + .c-hero__stat { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-border); }
.c-hero__statnum { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-fg); line-height: 1; font-weight: 700; }
[data-type="anton"] .c-hero__statnum, [data-type="archivo"] .c-hero__statnum { font-weight: 400; }
.c-hero__statlbl { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }

/* shared card base */
.c-card { background: var(--color-surface); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
[data-shape="brutalist"] .c-card { border-width: var(--border-default); }
.c-card--pad-lg { padding: var(--space-8); }
.c-card--hover { transition: transform .16s ease, box-shadow .16s ease; }
.c-card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
[data-shape="brutalist"] .c-card--hover:hover { transform: translate(-2px,-2px); }

/* ============================================================================
   PIECE: FEATURE CARD  — icon, title, body, optional link
   ============================================================================ */
.c-feature { display: flex; flex-direction: column; gap: var(--space-3); }
.c-feature__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); color: var(--color-accent); margin-bottom: var(--space-2); }
.c-feature__icon svg { width: 22px; height: 22px; }
.c-feature__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-fg); margin: 0; font-weight: 700; line-height: var(--leading-snug); }
[data-type="anton"] .c-feature__title, [data-type="archivo"] .c-feature__title { font-weight: 400; }
[data-type="dmserif"] .c-feature__title { font-weight: 400; }
.c-feature__body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-normal); margin: 0; }

/* ============================================================================
   PIECE: SERVICE CARD  — numbered, horizontal, link-forward
   ============================================================================ */
.c-service { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.c-service__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); font-weight: 600; padding-top: 3px; }
.c-service__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-fg); margin: 0 0 var(--space-2); font-weight: 700; line-height: var(--leading-snug); }
[data-type="anton"] .c-service__title, [data-type="archivo"] .c-service__title { font-weight: 400; }
[data-type="dmserif"] .c-service__title { font-weight: 400; }
.c-service__body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: var(--leading-normal); margin: 0 0 var(--space-4); max-width: 52ch; }

/* ============================================================================
   PIECE: PRICING CARD  — plan, price, features, CTA; featured variant
   ============================================================================ */
.c-price { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.c-price__head { display: flex; flex-direction: column; gap: var(--space-2); }
.c-price__plan { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); margin: 0; }
.c-price__amt { font-family: var(--font-display); font-size: var(--text-5xl); color: var(--color-fg); line-height: 1; font-weight: 700; display: flex; align-items: baseline; gap: var(--space-2); }
[data-type="anton"] .c-price__amt, [data-type="archivo"] .c-price__amt { font-weight: 400; }
.c-price__per { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; }
.c-price__desc { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); margin: 0; line-height: var(--leading-normal); }
.c-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.c-price__list li { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-fg); display: flex; align-items: flex-start; gap: var(--space-3); line-height: var(--leading-normal); }
.c-price__list svg { width: 18px; height: 18px; color: var(--color-accent); flex: none; margin-top: 1px; }
.c-price__cta { margin-top: auto; }
.c-price--featured { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); position: relative; --color-surface: color-mix(in srgb, var(--color-fg) 84%, #fff); --color-muted: color-mix(in srgb, #fff 64%, transparent); --color-border: color-mix(in srgb, #fff 20%, transparent); }
.c-price--featured .c-price__amt, .c-price--featured .c-price__list li { color: #fff; }
.c-price--featured .c-price__plan { color: var(--color-accent); }
.c-price__flag { position: absolute; top: 0; right: var(--space-6); transform: translateY(-50%); }

/* ============================================================================
   PIECE: STAT CARD
   ============================================================================ */
.c-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.c-stat__num { font-family: var(--font-display); font-size: var(--text-5xl); color: var(--color-fg); line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
[data-type="anton"] .c-stat__num, [data-type="archivo"] .c-stat__num { font-weight: 400; }
.c-stat__num em { color: var(--color-accent); font-style: normal; }
.c-stat__lbl { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }

/* ============================================================================
   PIECE: TESTIMONIAL CARD
   ============================================================================ */
.c-testi { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.c-testi__quote { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-fg); line-height: var(--leading-snug); margin: 0; font-weight: 500; letter-spacing: -0.01em; }
[data-type="anton"] .c-testi__quote, [data-type="archivo"] .c-testi__quote { font-weight: 400; text-transform: none; }
.c-testi__foot { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.c-testi__avatar { width: 42px; height: 42px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-accent) 22%, var(--color-bg)); color: var(--color-accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none; }
[data-shape="brutalist"] .c-testi__avatar { border-radius: 0; }
.c-testi__who { font-family: var(--font-body); font-size: var(--text-sm); }
.c-testi__who b { color: var(--color-fg); display: block; font-weight: 600; }
.c-testi__who span { color: var(--color-muted); }
.c-testi__stars { display: flex; gap: 2px; color: var(--color-accent); }
.c-testi__stars svg { width: 16px; height: 16px; }

/* ============================================================================
   PIECE: FAQ ITEM  — accordion row
   ============================================================================ */
.c-faq { border-top: var(--border-thin) solid var(--color-border); }
.c-faq:last-child { border-bottom: var(--border-thin) solid var(--color-border); }
.c-faq__q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-fg); font-weight: 700; line-height: var(--leading-snug); }
[data-type="anton"] .c-faq__q, [data-type="archivo"] .c-faq__q { font-weight: 400; }
[data-type="dmserif"] .c-faq__q { font-weight: 400; }
.c-faq__q:focus-visible { outline: var(--border-default) solid var(--color-ring); outline-offset: 3px; }
.c-faq__icon { flex: none; width: 24px; height: 24px; position: relative; }
.c-faq__icon::before, .c-faq__icon::after { content: ""; position: absolute; background: var(--color-accent); transition: transform .2s ease, opacity .2s ease; }
.c-faq__icon::before { top: 11px; left: 3px; width: 18px; height: var(--border-default); }
.c-faq__icon::after { left: 11px; top: 3px; width: var(--border-default); height: 18px; }
.c-faq__q[aria-expanded="true"] .c-faq__icon::after { transform: scaleY(0); opacity: 0; }
.c-faq__a { overflow: hidden; max-height: 0; transition: max-height .24s ease; }
.c-faq__q[aria-expanded="true"] + .c-faq__a { max-height: 320px; }
.c-faq__a-inner { padding: 0 0 var(--space-5); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-muted); line-height: var(--leading-relaxed); max-width: 64ch; }

/* small helper: equal-height grid cells */
.cards-grid { display: grid; gap: var(--space-5); }
.cards-grid > * { height: 100%; }