/* ============================================================
   LAYER 2 · surfaces — card, stat, seat summary, feature, quote,
   product card, framed mockup.
   ============================================================ */

/* ---------- Card ---------- */
.ep-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); font-family: var(--font-sans) }
.ep-card--r-lg { border-radius: var(--radius-lg) }
.ep-card--r-xl { border-radius: var(--radius-xl) }
.ep-card--r-2xl { border-radius: var(--radius-2xl) }
.ep-card--sunken { background: var(--surface-sunken); border-color: transparent; box-shadow: none }
.ep-card--inverse { background: var(--surface-inverse); border-color: var(--color-neutral-700); color: var(--text-inverse) }
.ep-card--flush { overflow: hidden }
.ep-card--lift { transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard) }
.ep-card--lift:hover, .ep-card--lift:focus-within { box-shadow: var(--shadow-lg); border-color: var(--border-strong) }

.ep-card__header { padding: 16px 20px; border-bottom: 1px solid var(--border-default) }
.ep-card__body { padding: var(--space-6) }
.ep-card__body--pad-none { padding: 0 }
.ep-card__body--pad-sm { padding: var(--space-4) }
.ep-card__body--pad-md { padding: var(--space-5) }
.ep-card__footer { padding: 16px 24px; border-top: 1px solid var(--border-default); background: var(--surface-sunken); display: flex; justify-content: flex-end; gap: 12px }
@media (max-width: 560px) {
  .ep-card__body { padding: var(--space-5) }
  .ep-card__footer { flex-direction: column-reverse; align-items: stretch }
  .ep-card__footer > .ep-btn { width: 100% }
}

/* ---------- Stat tile (metric on a sunken well) ---------- */
.ep-stat { background: var(--surface-sunken); border-radius: var(--radius-lg); padding: 12px; font-family: var(--font-sans) }
.ep-stat__value { font-size: 1.25rem; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--text-primary) }
/* Text on a tint, so every accent here is a -strong (text-bearing) token. */
.ep-stat__value--cyan { color: var(--accent) }
.ep-stat__value--success { color: var(--color-success-strong) }
.ep-stat__value--danger { color: var(--color-error-strong) }
.ep-stat__label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-disabled); margin-top: 2px }
.ep-stat__hint { font-size: .75rem; color: var(--text-muted); margin-top: 6px }

/* ---------- Seat summary ---------- */
.ep-seat__title { margin: 0; font-size: .875rem; font-weight: var(--fw-semibold); color: var(--text-primary) }
.ep-seat__meta { margin: 2px 0 0; font-size: .75rem; color: var(--text-disabled) }
.ep-seat__body { padding: 16px 20px; display: grid; gap: 16px }
.ep-seat__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.ep-seat__labels { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-muted); margin-bottom: 6px }
.ep-seat__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: .6875rem; color: var(--text-muted) }
.ep-seat__legend-item { display: inline-flex; align-items: center; gap: 6px }
.ep-legend-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0 }
.ep-legend-dot--base { background: linear-gradient(to right, var(--brand-from), var(--brand-mid)) }
.ep-legend-dot--addon { background: linear-gradient(to right, var(--brand-mid), var(--brand-to)) }
.ep-legend-dot--used { background: var(--overlay-used) }
.ep-bar { position: relative; height: 10px; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-sunken) }
.ep-bar__track { position: absolute; inset: 0; display: flex }
.ep-bar__seg { height: 100%; width: var(--ep-pct, 0%) }
.ep-bar__seg--base { background: linear-gradient(to right, var(--brand-from), var(--brand-mid)) }
.ep-bar__seg--addon { background: linear-gradient(to right, var(--brand-mid), var(--brand-to)) }
.ep-bar__used { position: absolute; inset: 0 auto 0 0; width: var(--ep-pct, 0%); background: var(--overlay-used); transition: width 700ms var(--ease-standard) }
@media (max-width: 560px) { .ep-seat__stats { grid-template-columns: 1fr } }

/* ---------- Feature / benefit ---------- */
.ep-feature { font-family: var(--font-sans) }
.ep-feature__title { margin: 10px 0 6px; font-size: clamp(15px, min(1.35vw, 2.1vh), 18px); font-weight: var(--fw-semibold); color: var(--text-primary) }
.ep-feature__desc { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-muted) }

.ep-feature--stat { padding: clamp(20px, 3vh, 32px); border-radius: var(--radius-card); border: 1px solid var(--border-default); background: var(--surface-card); height: 100% }
.ep-feature__stat { font-size: clamp(28px, min(3.4vw, 5.4vh), 48px); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px }
.ep-feature--stat .ep-feature__title { margin: 0 0 6px }

.ep-feature--tile { display: flex; flex-direction: column; padding: clamp(18px, 2.6vh, 26px); border-radius: var(--radius-card); background: var(--surface-card); border: 1px solid var(--border-default); color: var(--text-primary); height: 100%; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard) }
.ep-feature--tile .ep-icon-tile { margin-bottom: clamp(12px, 2.2vh, 20px) }
.ep-feature--tile .ep-feature__title { margin: 0 0 8px }
.ep-feature--tile .ep-feature__desc { flex: 1 }
a.ep-feature--tile, button.ep-feature--tile { cursor: pointer; text-align: left; font: inherit }
a.ep-feature--tile:hover, button.ep-feature--tile:hover, a.ep-feature--tile:focus-visible, button.ep-feature--tile:focus-visible { border-color: var(--border-strong) }
.ep-feature__more { font-size: 15px; font-weight: var(--fw-semibold); color: var(--accent); margin-top: clamp(12px, 2.2vh, 20px); display: inline-flex; align-items: center; gap: 6px }

/* ---------- Testimonial ---------- */
.ep-quote { margin: 0; padding: clamp(20px, 3vh, 32px); border-radius: var(--radius-card); border: 1px solid var(--border-default); background: var(--surface-card); font-family: var(--font-sans) }
.ep-quote__eyebrow { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent); margin-bottom: 16px }
.ep-quote__text { margin: 0 0 18px; font-size: clamp(15px, min(1.4vw, 2.2vh), 19px); line-height: 1.6; color: var(--text-primary); text-wrap: pretty }
.ep-quote__role { font-size: 15px; color: var(--text-muted) }

/* ---------- Product card (store / catalogue) ---------- */
.ep-product { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-6); display: flex; flex-direction: column; font-family: var(--font-sans); transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard) }
.ep-product:hover, .ep-product:focus-within { box-shadow: var(--shadow-md); border-color: var(--border-strong) }
.ep-product__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px }
.ep-product__name { margin: 0 0 16px; font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text-primary) }
.ep-product__active { display: flex; align-items: center; gap: 8px; background: var(--accent-tint); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px; font-size: .75rem; font-weight: var(--fw-medium); color: var(--on-tint) }
.ep-product__action { margin-top: auto }
@media (max-width: 560px) { .ep-product { padding: var(--space-5) } }

/* ---------- Framed live-demo mockup ---------- */
.ep-mock { margin: 0; display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-xl); border: 1px solid var(--border-default); background: var(--surface-card); box-shadow: var(--shadow-mock); overflow: hidden; font-family: var(--font-sans) }
@media (max-width: 900px) { .ep-mock { min-height: 460px } }
@media (max-width: 560px) { .ep-mock { min-height: 420px } }
.ep-mock__chrome { display: flex; align-items: center; gap: 8px; padding: clamp(9px, 1.9vh, 14px) 18px; border-bottom: 1px solid var(--border-default); background: var(--surface-sunken) }
.ep-mock__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-strong); display: block }
.ep-mock__title { margin-left: 8px; font-size: .8125rem; font-weight: var(--fw-medium); color: var(--text-muted) }
.ep-mock__status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: var(--fw-semibold); letter-spacing: .08em; color: var(--on-tint); background: var(--accent-tint); border: 1px solid var(--tint-border); padding: 4px 10px; border-radius: var(--radius-full) }
.ep-mock__pulse { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent); display: block; animation: softPulse 1.6s ease-in-out infinite }
.ep-mock__body { display: flex; flex-direction: column; min-height: 0 }
.ep-mock__footer { flex: 1; min-height: 0; padding: clamp(11px, 2.2vh, 18px) 22px; border-top: 1px solid var(--border-default); background: var(--surface-sunken) }

.ep-mock-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(6px, 1.4vh, 12px) }
.ep-mock-meta__label { font-size: .6875rem; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted) }
.ep-mock-meta__value { font-size: .75rem; font-weight: var(--fw-medium); color: var(--accent); font-family: var(--font-mono) }
.ep-mock-field__label { font-size: .6875rem; font-weight: var(--fw-semibold); letter-spacing: .08em; color: var(--text-primary) }
.ep-mock-field__value { font-size: clamp(12.5px, 1.8vh, 14px); color: var(--text-secondary); line-height: 1.5 }

/* Waveform: the ramp and the timing are styling; only bar HEIGHT is data. */
.ep-mock-wave { padding: clamp(12px, 2.4vh, 20px) 22px clamp(4px, 1vh, 8px); display: flex; align-items: flex-end; gap: 3px; height: clamp(30px, 6.4vh, 70px); box-sizing: content-box }
.ep-mock-wave__bar { flex: 1; border-radius: 2px; display: block; height: var(--ep-h, 60%); background: var(--wave-3); animation: wave 1s ease-in-out infinite }
.ep-mock-wave__bar:nth-child(5n+1) { background: var(--wave-1); animation-duration: .9s }
.ep-mock-wave__bar:nth-child(5n+2) { background: var(--wave-2); animation-duration: 1s }
.ep-mock-wave__bar:nth-child(5n+3) { background: var(--wave-3); animation-duration: 1.1s }
.ep-mock-wave__bar:nth-child(5n+4) { background: var(--wave-4); animation-duration: 1.2s }
.ep-mock-wave__bar:nth-child(5n+5) { background: var(--wave-5); animation-duration: 1.3s }
.ep-mock-wave__bar:nth-child(7n+2) { animation-delay: .04s }
.ep-mock-wave__bar:nth-child(7n+4) { animation-delay: .12s }
.ep-mock-wave__bar:nth-child(7n+6) { animation-delay: .2s }

/* Keyword tags: the least important row in a mockup, so it drops on short
   viewports rather than letting the frame slice a chip in half. */
.ep-mock-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(8px, 1.8vh, 14px) }
@media (max-height: 700px) { .ep-mock-tags { display: none } }
.ep-tag { font-size: .75rem; font-weight: var(--fw-medium); color: var(--on-tint); background: var(--accent-tint); border: 1px solid var(--tint-border); padding: 3px 9px; border-radius: var(--radius-md) }

/* Blinking dictation caret (decorative — off under reduced motion). */
.ep-caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -2px; animation: caret 1s step-end infinite }