/* ECHIVO /horeca — pricing.css · OWNER: V4. Loaded by src/horeca/template.html in section order.
   New selectors: prefix with the section (#hx-hero / .hx-hero__*, #about, #groups, ...). See v7-notes/STRUCTURE.md. */
/* ============================================================ PRICING */
.hx-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1120px; margin: 0 auto; align-items: stretch; }
.hx-plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: 30px; background: var(--hx-card); border: 1px solid var(--hx-line); transition: border-color .3s; }
/* transform/opacity are driven by GSAP only (reveal + tilt); never CSS-transition them */
.hx-plan:hover { border-color: rgba(255,255,255,.18); }
.reduced-motion .hx-plan { transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .hx-plan { transition: none; transform: none !important; opacity: 1 !important; } }
.hx-plan.is-rec { background: radial-gradient(130% 70% at 50% 0%, rgba(245,200,130,.2), rgba(245,200,130,0) 60%), linear-gradient(180deg, rgba(20,29,51,.9), rgba(11,16,32,.9)); border-color: rgba(245,200,130,.5); box-shadow: 0 40px 100px -30px rgba(245,200,130,.35); }
.hx-plan__badge { position: absolute; top: -13px; left: 50%; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: var(--gold); color: #1a1206; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.hx-plan__name { margin: 0; font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
.hx-plan.is-rec .hx-plan__name { color: var(--gold); }
.hx-plan__desc { margin: 8px 0 22px; min-height: 2.9em; }
.hx-plan__price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.hx-plan__price b { font-size: clamp(2.8rem, 4.2vw, 3.8rem); font-weight: 850; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hx-plan__price span { color: var(--text-2); font-weight: 600; }
.hx-plan__eur { margin: 6px 0 0; color: var(--text-3); font-size: var(--t-small); }
.hx-plan__trial { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin: 16px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(94,230,181,.12); color: var(--mint); font-size: .8rem; font-weight: 700; }
.hx-plan__trial svg { width: 15px; height: 15px; }
.hx-plan__trial.is-empty { visibility: hidden; }
.hx-plan__ft { list-style: none; margin: 22px 0 26px; padding: 20px 0 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hx-plan__ft li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--text-2); }
.hx-plan__ft li::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%; background: rgba(245,200,130,.14) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23f5c882' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat; }
.hx-plan__ft li.is-gold { color: var(--gold); font-weight: 650; }
.hx-plan__cta { width: 100%; }
.hx-plans__note { text-align: center; margin: 18px auto 0; font-size: .8rem; color: var(--text-3); max-width: 60ch; }
.hx-plans__note[hidden] { display: none; }
@media (max-width: 900px) { .hx-plans { grid-template-columns: 1fr; gap: 22px; max-width: 460px; } .hx-plan.is-rec { order: -1; } .hx-plan__desc { min-height: 0; } }

/* ============================================================ V4 · v7 pricing layer
   Depth on hover (spotlight + tilt from pricing.js), recommended sheen, "what you get" reveal, founding seats, value calculator.
   Only transform/opacity animate. No backdrop-filter, no infinite loops. html.lp / reduced-motion → static. */
#pricing .hx-plans { perspective: 1400px; }
#pricing .hx-plan { isolation: isolate; overflow: hidden; transition: border-color .3s, box-shadow .5s var(--ease-out); }
#pricing .hx-plan > * { position: relative; z-index: 1; }
#pricing .hx-plan > .hx-plan__badge { position: absolute; z-index: 3; }
#pricing .hx-plan.is-rec { overflow: visible; }
#pricing .hx-plan.is-hot { box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(245,200,130,.18) inset; }
#pricing .hx-plan.is-rec.is-hot { box-shadow: 0 50px 120px -30px rgba(245,200,130,.45); }
/* pointer spotlight (opacity only; position comes from --mx/--my, painted once per move inside the card) */
#pricing .pr-glow { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(245,200,130,.13), transparent 60%); }
#pricing .hx-plan.is-hot .pr-glow { opacity: 1; }
/* recommended: one gold sheen sweep on reveal, again on hover (transform only, clipped by its own wrapper) */
#pricing .pr-sheen { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
#pricing .pr-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(245,200,130,.16) 45%, rgba(255,240,210,.22) 50%, rgba(245,200,130,.16) 55%, transparent); }
#pricing .hx-plan.pr-shine .pr-sheen::before { animation: pr-sweep 1.6s var(--ease-out) .5s 1 both; }
#pricing .hx-plan.is-rec.is-hot .pr-sheen::before { animation: pr-sweep2 1.4s var(--ease-out) 1 both; }
@keyframes pr-sweep { to { transform: translateX(330%) skewX(-18deg); } }
@keyframes pr-sweep2 { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
#pricing .hx-plan.is-rec::after { content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(160deg, rgba(255,226,170,.95), rgba(245,200,130,.15) 35%, rgba(245,200,130,.05) 60%, rgba(245,200,130,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (min-width: 901px) { #pricing .hx-plan.is-rec { margin: -14px 0; padding-top: 44px; padding-bottom: 42px; } }
/* "what you get" */
#pricing .pr-get { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--hairline); font-size: var(--t-eyebrow); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
#pricing .hx-plan.is-rec .pr-get { color: var(--gold); }
#pricing .pr-get + .hx-plan__ft { margin-top: 12px; padding-top: 0; border-top: 0; }
#pricing .hx-plan__ft li::before { transition: transform .5s var(--ease-spring); }
#pricing .hx-plan.pr-pre .hx-plan__ft li { opacity: 0; }
#pricing .hx-plan.pr-pre .hx-plan__ft li::before { transform: scale(0); }
#pricing .hx-plan.pr-in .hx-plan__ft li::before { transform: scale(1); }
#pricing .pr-more { display: none; }
@media (max-width: 900px) {
  #pricing .hx-plan:not(.is-open) .pr-x { display: none; }
  #pricing .hx-plan__ft { margin-bottom: 8px; }
  #pricing .pr-more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin: 0 0 18px; padding: 0 16px 0 14px;
    border-radius: 999px; border: 1px solid var(--hairline); background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
  #pricing .pr-more b { padding: 2px 8px; border-radius: 999px; background: rgba(245,200,130,.16); color: var(--gold); font-size: .78rem; }
  #pricing .pr-more i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .4s var(--ease-spring); }
  #pricing .hx-plan.is-open .pr-more i { transform: translateY(2px) rotate(-135deg); }
}

/* ---------------- founding partners */
#pricing .pr-found { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(18px, 4vw, 48px); align-items: center;
  max-width: 1120px; margin: clamp(30px, 5vw, 52px) auto 0; padding: clamp(22px, 3.6vw, 40px); border-radius: 30px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 120% at 0% 0%, rgba(245,200,130,.16), transparent 55%), linear-gradient(180deg, rgba(20,29,51,.85), rgba(8,12,24,.92));
  border: 1px solid rgba(245,200,130,.32); }
#pricing .pr-found__top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
#pricing .pr-found__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(245,200,130,.16); color: var(--gold); flex: none; }
#pricing .pr-found__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
#pricing .pr-found__t { margin: 0; color: var(--gold); font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
#pricing .pr-found__price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
#pricing .pr-found__price b { font-size: clamp(3rem, 6vw, 4.8rem); font-weight: 850; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff3da, var(--gold) 70%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#pricing .pr-found__price > span { color: var(--text-2); font-weight: 650; }
#pricing .pr-found__was { position: relative; color: var(--text-3); font-weight: 600; white-space: nowrap; }
#pricing .pr-found__was::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 2px; background: var(--rose); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
#pricing .pr-found.pr-pre .pr-found__was::after, #pricing .pr-found.pr-wait .pr-found__was::after { transform: scaleX(0); }
#pricing .pr-found__lock { display: inline-flex; align-items: center; gap: 7px; margin: 14px 8px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(245,200,130,.12); color: var(--gold); font-size: .82rem; font-weight: 700; }
#pricing .pr-found__lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
#pricing .pr-found__save { margin: 14px 0 0; color: var(--text-2); max-width: 46ch; }
#pricing .pr-found__line { margin: 6px 0 0; font-size: var(--t-small); color: var(--text-3); max-width: 52ch; }
#pricing .pr-found__ref { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var(--t-small); color: var(--text-2); }
#pricing .pr-found__ref svg { flex: none; width: 16px; height: 16px; }
#pricing .pr-found__cta { margin-top: 22px; }
#pricing .pr-seats { text-align: center; }
#pricing .pr-seats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1.3vw, 14px); max-width: 320px; margin: 0 auto; }
#pricing .pr-seats__grid i { aspect-ratio: 1; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: radial-gradient(circle at 50% 50%, #1a1206 0 22%, transparent 24%), linear-gradient(135deg, #ffe3ad, var(--gold) 55%, var(--amber)); box-shadow: 0 6px 14px -6px rgba(245,200,130,.6); }
#pricing .pr-found.pr-pre .pr-seats__grid, #pricing .pr-found.pr-pre .pr-found__price { opacity: 0; }
#pricing .pr-seats__t { margin: 18px 0 4px; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
#pricing .pr-seats__n { margin: 0 auto; max-width: 34ch; font-size: var(--t-small); color: var(--text-3); }
@media (max-width: 900px) {
  #pricing .pr-found { grid-template-columns: 1fr; max-width: 460px; }
  #pricing .pr-seats { order: -1; }
  #pricing .pr-seats__grid { grid-template-columns: repeat(10, 1fr); max-width: 100%; gap: 7px; }
  #pricing .pr-found__cta { width: 100%; }
}

/* ---------------- value calculator */
#pricing .pr-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); max-width: 1120px; margin: clamp(30px, 5vw, 52px) auto 0;
  padding: clamp(22px, 3.6vw, 40px); border-radius: 30px; background: var(--hx-card); border: 1px solid var(--hx-line); }
#pricing .pr-calc__h { margin: 6px 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
#pricing .pr-calc__sub { margin: 0 0 24px; color: var(--text-2); max-width: 46ch; }
#pricing .pr-calc__f { display: block; margin: 0 0 20px; }
#pricing .pr-calc__lab { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
#pricing .pr-calc__lab output { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 1rem; }
#pricing .pr-calc input[type=range] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
#pricing .pr-calc input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(255,255,255,.12) var(--p)); }
#pricing .pr-calc input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(255,255,255,.12) var(--p)); }
#pricing .pr-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff3da; border: 3px solid var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: transform .3s var(--ease-spring); }
#pricing .pr-calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff3da; border: 3px solid var(--gold); }
#pricing .pr-calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
#pricing .pr-calc input[type=range]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
#pricing .pr-calc__out { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
#pricing .pr-calc__rev { margin: 0; color: var(--text-2); font-weight: 650; }
#pricing .pr-calc__rev b { display: block; margin-top: 4px; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 850; line-height: 1; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
#pricing .pr-calc__rev b small { font-size: .38em; color: var(--text-2); margin-left: 6px; letter-spacing: 0; }
#pricing .pr-calc__row { padding: 14px 16px; border-radius: 18px; background: rgba(5,7,13,.45); border: 1px solid var(--hairline); }
#pricing .pr-calc__row p { margin: 0; }
#pricing .pr-calc__plan, #pricing .pr-calc__left { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .9rem; color: var(--text-2); }
#pricing .pr-calc__plan b { color: var(--text); font-size: 1rem; }
#pricing .pr-calc__left b { font-variant-numeric: tabular-nums; color: var(--rose); }
#pricing .pr-calc__row.is-pos .pr-calc__left b { color: var(--mint); }
#pricing .pr-calc__bar { height: 6px; margin: 10px 0; border-radius: 6px; background: rgba(94,230,181,.22); overflow: hidden; }
#pricing .pr-calc__row:not(.is-pos) .pr-calc__bar { background: rgba(255,255,255,.08); }
#pricing .pr-calc__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--gold); transform-origin: 0 50%; transform: scaleX(calc(var(--w) / 100%)); transition: transform .5s var(--ease-out); }
#pricing .pr-calc__need { margin-top: 8px !important; font-size: .85rem; color: var(--gold); font-weight: 650; }
#pricing .pr-calc__fine { margin: 4px 0 0; font-size: .78rem; color: var(--text-3); }
@media (max-width: 900px) { #pricing .pr-calc { grid-template-columns: 1fr; max-width: 460px; } }
.reduced-motion #pricing .pr-calc__bar i, .reduced-motion #pricing .pr-sheen::before { transition: none; animation: none !important; }
@media (prefers-reduced-motion: reduce) { #pricing .pr-calc__bar i { transition: none; } #pricing .pr-sheen::before { animation: none !important; } }
.no-js #pricing .pr-calc, .no-js #pricing .pr-found__price, .no-js #pricing .pr-found__lock { display: none; }
/* phones / low power: plain gold border instead of the masked gradient ring, no seat shadows, no sheen */
.lp #pricing .hx-plan.is-rec::after, .lp #pricing .pr-sheen { display: none; }
.lp #pricing .pr-seats__grid i { box-shadow: none; }

/* POLISH: at 320px the EN "COMMISSION." (11 caps) was wider than the column and clipped by the SplitText line mask.
   Cap the headline by the head's width (cqi) so the longest word always fits; never break inside a word. */
#pricing .hx-head { container-type: inline-size; }
#pricing .hx-head h2 { font-size: min(var(--t-h1), 10.6cqi); overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* ============================================================ V8 · D3 · DESKTOP (≥1024): wide stage + reveal choreography
   Layout is plain CSS (all desktop tiers). Motion lives in pricing.js inside ctx.mm(DESK): the cards deal out of a
   fanned hand, the "0%" (no commission) drifts behind them, seats fill with scroll. Phones: none of this. */
#pricing .pr-zero { display: none; }
@media (min-width: 1024px) {
  #pricing.hx-pricing { position: relative; isolation: isolate; }
  #pricing .pr-zero { display: block; position: absolute; left: 0; right: 0; top: clamp(120px, 16vh, 220px); z-index: -1; pointer-events: none; text-align: center; overflow: hidden; }
  #pricing .pr-zero span { display: inline-block; font-size: min(46vw, 78vh); font-weight: 900; line-height: .8; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 2px rgba(245,200,130,.24);
    background: radial-gradient(60% 60% at 50% 40%, rgba(245,200,130,.10), rgba(245,200,130,0) 70%); -webkit-background-clip: text; background-clip: text; }
  #pricing .hx-head { max-width: 1100px; }
  #pricing .hx-head h2 { font-size: min(var(--t-h1), 10.6cqi, 6.4vw); }
  #pricing .hx-plans { max-width: min(1560px, 100%); gap: var(--hx-gap, clamp(20px, 1.8vw, 36px)); }
  #pricing .hx-plan { padding: clamp(30px, 2.6vw, 44px) clamp(28px, 2.4vw, 40px); }
  #pricing .hx-plan__price b { font-size: clamp(3.4rem, 4.8vw, 5rem); }
  #pricing .hx-plan__ft { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px 18px; align-content: start; }
  #pricing .pr-found, #pricing .pr-calc { max-width: min(1560px, 100%); }
  #pricing .pr-found { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: clamp(32px, 3.4vw, 56px); }
  #pricing .pr-found__price b { font-size: clamp(4rem, 7vw, 7rem); }
  #pricing .pr-seats__grid { grid-template-columns: repeat(10, 1fr); max-width: 520px; }
  #pricing .pr-calc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: clamp(32px, 3.4vw, 56px); }
  #pricing .pr-calc__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  #pricing .pr-calc__rev b { font-size: clamp(3.4rem, 6vw, 6rem); }
}
.hx-cine #pricing .hx-plans { perspective: none; }

/* V10 · F4 (Fable 14:40 #3): the calculator is the sale, so it gets the gold. The owner's own number is gold, the panel
   has a warm edge and a faint dawn from its result side; the "covers itself" line stays as it is. */
#pricing .pr-calc { border-color: rgba(245,200,130,.25);
  background: radial-gradient(70% 90% at 100% 0%, rgba(245,200,130,.08), rgba(245,200,130,0) 70%), var(--hx-card);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,236,200,.06); }
#pricing .pr-calc__rev b { color: var(--gold); text-shadow: 0 0 34px rgba(245,200,130,.28); }
#pricing .pr-calc__rev b small { color: rgba(245,200,130,.7); }
/* V10 · F4 (G3): a scrubbed entrance (desktop: calculator .2, plan fan .35) must never leave a keyboard-focused control
   faint. Inline GSAP opacity needs !important to lose. */
#pricing .pr-calc:has(:focus-visible), #pricing .hx-plan:has(:focus-visible) { opacity: 1 !important; }