/* Mesero product pages (2026-10-21). They speak the home's language: its tokens, buttons, feature sections, pricing,
   questions, close and footer come from home.css, loaded first. This file adds what a product page shows on top:
     - a dark hero: the real screen on a tilted tablet over the sphere's glow, with example events arriving;
     - the walk-through: the steps scroll by while the tablet beside them shows (and zooms into) each real screen;
     - a ticket that prints when it comes into view;
     - cards that light up where the pointer is;
     - the module's own sphere, with the modules it talks to around it.
   product.js runs them. Without it, or with reduced motion, every part is shown still and whole. */

/* The skip link stays off screen until it has focus (the home inlines this rule; the pages' old premium-pages.css carried it). */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;padding:12px 18px;border-radius:0 0 10px 0;background:#0b0e1f;color:#fff;font-weight:700;font-size:.95rem;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{left:0;outline:3px solid #6d7cff;outline-offset:2px}

/* A few pages keep figures styled inline from the old design (premium-pages.css), which read its token names.
   These give those names the home's palette, so the figures work without that file. */
.product{
  --muted:var(--text-2);--border:var(--line);--hairline:var(--line);--bg:#fff;--surface-2:rgba(21,22,28,.03);
  --card-grad:linear-gradient(180deg,#fff 0%,#fff 100%);--accent-ink-2:var(--coral-ink);--brand:var(--coral-btn);--brand-2:var(--coral-ink);
  --shadow:0 24px 54px rgba(21,22,28,.12);--shadow-soft:0 14px 28px rgba(21,22,28,.1);--shadow-strong:0 28px 60px rgba(21,22,28,.14);
  --hero-visual-bg:transparent;
}

/* The header and the support chat take the home's coral (their rules are scoped to .home in home.css). */
.product .site-header{
  --sn-cta:var(--coral-btn);
  --sn-cta-shadow:0 8px 22px rgba(235,64,55,.30);
  --sn-cta-shadow-hover:0 12px 28px rgba(235,64,55,.38);
  --sn-focus:rgba(255,143,122,.9);
}
.product .mvc-fab{background:linear-gradient(135deg,#ef4b3f,#c5322a)!important;box-shadow:0 10px 26px -6px rgba(235,64,55,.55)!important}
.product .mvc-head{background:linear-gradient(135deg,#ef4b3f,#c5322a)!important}
.product .mvc-msg.mine .mvc-bubble,.product .mvc-send,.product .mvc-newchat,.product .mvc-form-btn{background:var(--coral-btn)!important}
.product .mvc-newchat:hover{background:var(--coral-btn-hover)!important}

.p-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(246,241,232,.08);border:1px solid rgba(246,241,232,.14);color:var(--on-ink-2);font:800 .66rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.p-hero{padding-bottom:clamp(56px,7vw,104px)}
.p-hero .hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,72px)}
.p-hero h1{font-size:clamp(2.55rem,1.15rem + 3.3vw,4.4rem);line-height:.98;letter-spacing:-.048em;text-wrap:balance}
.p-hero h1 em{font-style:normal;background:linear-gradient(100deg,#ffa08c 0%,#ff6a58 55%,#f2493b 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.p-hero .hero-lead{max-width:33rem}
.p-chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.p-chips li{padding:8px 13px;border:1px solid var(--line-ink);border-radius:999px;background:rgba(246,241,232,.035);color:var(--on-ink-2);font-size:.84rem;font-weight:700}

/* The stage: the sphere glows behind a tablet that leans back and straightens as the page scrolls. */
.p-stage{position:relative;margin:0;padding:clamp(18px,3vw,40px) 0;perspective:1800px;perspective-origin:50% 40%}
.p-orb{position:absolute;left:62%;top:46%;z-index:0;width:min(1180px,168%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.95}
.p-stage .device{z-index:1;transform-style:preserve-3d;transform:rotateX(var(--tx,12deg)) rotateY(var(--ty,-18deg)) rotateZ(var(--tz,2deg)) translateZ(0);transition:transform .25s linear;will-change:transform}
.device{position:relative;padding:clamp(7px,.8vw,11px);border-radius:clamp(16px,1.8vw,24px);background:linear-gradient(155deg,#30323d 0%,#17181f 48%,#0e0f14 100%);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 1px 0 rgba(255,255,255,.12) inset,0 48px 56px -36px rgba(0,0,0,.85),0 22px 44px -22px rgba(255,97,82,.25)}
.device::before{content:"";position:absolute;left:50%;top:clamp(3px,.35vw,5px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a2c35;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.device-screen{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:clamp(10px,1.1vw,15px);background:#0b0d12}
.device-screen > img{width:100%;height:100%;object-fit:cover}
.device-glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 26%,transparent 42%);mix-blend-mode:screen}

/* Example events arriving around the tablet (never live data: the stage says «Ejemplo»). */
.p-events{position:absolute;inset:0;z-index:2;margin:0;padding:0;list-style:none;pointer-events:none}
.p-event{position:absolute;display:flex;align-items:center;gap:11px;max-width:236px;padding:10px 15px 10px 10px;border-radius:16px;background:rgba(16,17,25,.78);border:1px solid rgba(246,241,232,.13);box-shadow:0 18px 36px -18px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);color:var(--on-ink);font-size:.86rem;font-weight:800;line-height:1.25;opacity:0;transform:translateY(12px) scale(.95);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.p-event small{display:block;margin-top:2px;color:var(--on-ink-3);font-size:.74rem;font-weight:600}
.p-event .ico{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(255,97,82,.16);color:var(--coral-soft)}
.p-event .ico svg{width:17px;height:17px}
.p-event.is-on{opacity:1;transform:none}
.p-event.is-ok .ico{background:rgba(52,199,123,.16);color:#6fe0a5}
.ev-1{left:-3%;top:6%}
.ev-2{right:-4%;top:20%}
.ev-3{left:-6%;bottom:26%}
.ev-4{right:-2%;bottom:12%}
.ev-5{left:20%;bottom:-2%}
.p-stage .p-tag{position:absolute;right:2%;top:0;z-index:2}

/* ── The walk-through: the steps on the left, the screen that follows them on the right ── */
.p-walk{padding:clamp(80px,9vw,132px) 0 clamp(64px,7vw,104px);background:var(--paper)}
.p-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,72px);align-items:end}
.p-head h2{font-size:clamp(1.95rem,1.3rem + 1.7vw,2.85rem);line-height:1.06;text-wrap:balance}
.p-head p{color:var(--text-2);font-size:1.06rem;line-height:1.65}
.walk-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,88px);margin-top:clamp(32px,4vw,56px)}
.walk-steps{list-style:none;margin:0;padding:0}
.walk-step{display:flex;flex-direction:column;justify-content:center;min-height:min(62vh,560px);padding:28px 0;border-top:1px solid var(--line);opacity:.34;transition:opacity .45s var(--ease)}
.walk-step:first-child{border-top:0}
.walk-step.is-active{opacity:1}
.walk-step .num{display:flex;align-items:center;gap:10px;color:var(--coral-ink);font:800 .76rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.walk-step .num::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.walk-step h3{margin-top:14px;font-size:clamp(1.45rem,1.05rem + 1vw,1.95rem);line-height:1.12}
.walk-step p{margin-top:14px;max-width:34rem;color:var(--text-2);line-height:1.68}
.walk-step p + p{margin-top:10px}
.walk-step em{font-style:normal;font-weight:700;color:var(--text)}
.walk-step a{color:var(--coral-ink);font-weight:700}
.walk-shot{display:none}
.walk-aside{margin-top:12px;padding:22px 24px;border-radius:18px;background:var(--paper-2);border:1px solid var(--line)}
.walk-aside h3{font-size:1.12rem}
.walk-aside p{margin-top:8px;color:var(--text-2);line-height:1.6}
.walk-device{position:sticky;top:calc(var(--site-header-h,72px) + max(24px,8vh));align-self:start}
.walk-screen .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform-origin:var(--fx,50%) var(--fy,50%);transform:scale(var(--z,1));transition:opacity .6s var(--ease),transform 1.1s var(--ease),transform-origin 1.1s var(--ease)}
.walk-screen .layer.is-on{opacity:1}
.walk-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.walk-label{color:var(--text-2);font-size:.92rem;font-weight:700}
.walk-label b{color:var(--coral-ink)}
.walk-progress{display:flex;gap:6px;flex:none}
.walk-progress span{width:26px;height:4px;border-radius:4px;background:rgba(21,22,28,.12);transition:background-color .4s,width .4s var(--ease)}
.walk-progress span.is-done{background:var(--coral-btn)}
.walk-progress span.is-now{width:44px;background:var(--coral-btn)}
.walk-device .device{box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 1px 0 rgba(255,255,255,.12) inset,0 40px 56px -34px rgba(21,22,28,.75)}

/* ── The ticket that prints ───────────────────────────────────────────── */
.p-fiscal .feature-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.p-fiscal .feature-copy .lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:30px}
.p-fiscal .lists h3{font-size:1.06rem;letter-spacing:-.01em}
.p-fiscal .lists .ticks{margin-top:14px;gap:11px}
.p-fiscal .lists .ticks li{font-weight:500;font-size:.95rem;color:var(--on-ink-2)}
.printer{position:relative;width:min(352px,100%);margin:0 auto}
.printer-head{position:relative;z-index:2;height:64px;border-radius:20px 20px 14px 14px;background:linear-gradient(180deg,#30323b 0%,#1b1c23 100%);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 26px 40px -24px rgba(0,0,0,.9)}
.printer-head::before{content:"";position:absolute;left:22px;top:22px;width:9px;height:9px;border-radius:50%;background:#46e08f;box-shadow:0 0 12px #46e08f}
.printer-head::after{content:"";position:absolute;left:24px;right:24px;bottom:12px;height:7px;border-radius:7px;background:#09090d;box-shadow:inset 0 2px 4px rgba(0,0,0,.9)}
.receipt{position:relative;z-index:1;margin:-16px 30px 0;padding:30px 20px 26px;background:#fbfaf6;color:#18181d;font:500 .74rem/1.55 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;box-shadow:0 30px 40px -26px rgba(0,0,0,.8);-webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 10px repeat-x;mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 10px repeat-x}
.receipt p{margin:0}
.receipt .r-c{text-align:center}
.receipt .r-b{font-weight:800}
.receipt .r-big{font-size:1.02rem;font-weight:800}
.receipt .r-row{display:flex;justify-content:space-between;gap:12px}
.receipt .r-row span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.receipt .r-rule{margin:8px 0;border-top:1px dashed rgba(24,24,29,.4)}
.receipt .r-qr{display:block;width:96px;height:96px;margin:8px auto 4px}
.receipt .r-mark{display:inline-block;margin-top:2px;padding:2px 8px;border:1px solid #18181d;border-radius:4px;font-weight:800;letter-spacing:.06em}
.js .receipt.will-print{clip-path:inset(0 0 100% 0);transform:translateY(-14px)}
.js .receipt.is-printed{clip-path:inset(0 0 0 0);transform:none;transition:clip-path 2.4s cubic-bezier(.45,.05,.4,1),transform 2.4s cubic-bezier(.45,.05,.4,1)}
.printer .p-tag{position:absolute;right:-6px;top:-30px}
/* The club's invitation slip: a reversed band, the points in big type, a bill-amount slider under it */
.receipt .r-band{margin:-8px 0 10px;padding:6px 8px;background:#18181d;color:#fbfaf6;text-align:center;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.receipt .r-huge{margin:4px 0 0;text-align:center;font-size:2.7rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.p-slip-amount{width:min(352px,100%);margin:18px auto 0;text-align:center;color:var(--on-ink-2);font-size:.9rem;font-weight:700}
.p-slip-amount b{color:var(--on-ink);font-variant-numeric:tabular-nums}
.p-slip-amount input{display:block;width:100%;margin-top:10px;accent-color:#ff6152}

/* The price rise and the regulars' discount that keeps them at the old price (the panel's own calculator) */
.p-calc{padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 50px -36px rgba(21,22,28,.45)}
.p-calc label{display:block;color:var(--text-2);font-size:.92rem;font-weight:700}
.p-calc label b{float:right;color:var(--text);font-variant-numeric:tabular-nums}
.p-calc input{display:block;width:100%;margin-top:12px;accent-color:#eb4037}
.p-calc-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.p-calc-out div{padding:14px 16px;border-radius:16px;background:var(--paper-2)}
.p-calc-out small{display:block;color:var(--text-3);font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.p-calc-out b{display:block;margin-top:6px;font:700 clamp(1.5rem,1.2rem + .8vw,2rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.p-calc-out .is-key b{color:var(--coral-ink)}
.p-calc-say{margin-top:14px;color:var(--text-2);font-size:.92rem;line-height:1.55}

/* ── Cards that light where the pointer is (the kit) ──────────────────── */
.p-kit{padding:clamp(72px,8vw,120px) 0;background:var(--paper-2)}
.kit-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,52px)}
.kit-card{--mx:50%;--my:0%;position:relative;isolation:isolate;overflow:hidden;grid-column:span 2;padding:26px 26px 28px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.kit-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(255,97,82,.13),transparent 46%);opacity:0;transition:opacity .35s}
.kit-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(235,64,55,.55),transparent 55%);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000);opacity:0;transition:opacity .35s}
.kit-card:hover{transform:translateY(-3px);box-shadow:0 26px 44px -30px rgba(21,22,28,.45)}
.kit-card:hover::before,.kit-card:hover::after{opacity:1}
.kit-card--wide{grid-column:span 3}
.kit-card--full{grid-column:1 / -1}
.kit-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:rgba(235,64,55,.08);color:var(--coral-ink)}
.kit-icon svg{width:28px;height:28px}
.kit-card h3{margin-top:18px;font-size:1.18rem;letter-spacing:-.02em}
.kit-card p{margin-top:8px;color:var(--text-2);font-size:.95rem;line-height:1.6}
.kit-card a{color:var(--coral-ink);font-weight:700}
.kit-card .kit-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);color:var(--text-3);font-size:.86rem}

/* ── What is never charged on top (under the pricing) ─────────────────── */
.p-free{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 0;padding:0;list-style:none}
.p-free li{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:16px;background:var(--paper-2);border:1px solid var(--line);font-size:.92rem;font-weight:600;line-height:1.45}
.p-free li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:rgba(235,64,55,.11) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2321f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat}

/* ── The module's sphere: this module at the centre, what it talks to around it ── */
.p-system{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,9vw,128px) 0;background:var(--ink);color:var(--on-ink)}
.p-system::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(46% 60% at 70% 50%,rgba(255,97,82,.12),transparent 72%),radial-gradient(30% 40% at 6% 10%,rgba(52,66,120,.26),transparent 70%)}
.p-system .p-head p{color:var(--on-ink-2)}
.p-system .kicker{color:var(--coral-soft)}
.p-system-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(24px,3vw,40px)}
.p-system-notes{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.p-system-notes li{padding:14px 0;border-top:1px solid var(--line-ink);color:var(--on-ink-2);line-height:1.6}
.p-system-notes li:first-child{border-top:0}
.p-system-notes strong{color:var(--on-ink)}
.p-system-notes a{color:var(--coral-soft);font-weight:700}
.p-system .hub{margin:0}
.p-system .hub-brand{flex-direction:column;gap:6px}
.p-system .hub-mark{width:auto;min-width:46px;padding:0 10px;font-size:1rem;letter-spacing:.02em}
.hub-node.is-link{text-decoration:none;color:inherit}

/* ── The close: the numbers count up ──────────────────────────────────── */
.p-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:880px;margin:44px auto 0;padding:0;list-style:none;text-align:left}
.p-proof li{padding:20px 20px 18px;border-radius:18px;background:rgba(246,241,232,.04);border:1px solid var(--line-ink)}
.p-proof strong{display:block;color:var(--on-ink);font:700 clamp(1.9rem,1.4rem + 1.2vw,2.5rem)/1 var(--display);letter-spacing:-.04em}
.p-proof li > span{display:block;margin-top:10px;color:var(--on-ink);font-weight:800;font-size:.95rem}
.p-proof li > small{display:block;margin-top:4px;color:var(--on-ink-3);font-size:.84rem;line-height:1.45}

/* ── A phone instead of a tablet (the staff app, guest QR pages) ────────── */
.device--phone{width:min(320px,74%);margin-inline:auto;padding:9px;border-radius:46px}
.device--phone::before{display:none}
.device--phone .device-screen{aspect-ratio:600/1305;border-radius:37px}
.p-stage--phones{display:grid;place-items:center;min-height:clamp(440px,52vw,640px)}
.p-stage--phones .device--phone{position:relative;z-index:2}
.p-stage--phones .device--back{position:absolute;z-index:1;left:12%;top:16%;width:min(250px,52%);opacity:.92;transform:rotateY(18deg) rotateZ(-6deg) translateZ(-60px)}
.p-stage--phones .device--back.device{--tx:0deg;--ty:0deg;--tz:0deg}
.device-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#f4f4f4}
.p-play{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:0;border:0;background:none;color:var(--on-ink);font:700 .98rem/1.3 var(--body);cursor:pointer}
.p-play .dot{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(246,241,232,.28);transition:border-color .18s,background-color .18s}
.p-play .dot svg{width:13px;height:13px;margin-left:2px;color:var(--coral-soft)}
.p-play:hover .dot,.p-play:focus-visible .dot{border-color:var(--coral-soft);background:rgba(255,97,82,.12)}
.p-play.is-playing .dot svg{margin-left:0}
.p-play .i-pause,.p-play.is-playing .i-play{display:none}
.p-play.is-playing .i-pause{display:block}
.p-stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.p-stores .store-badge{display:inline-flex}
.p-stores img,.p-stores svg{height:40px;width:auto}

/* ── A table that compares (light sections) ───────────────────────────── */
.p-compare-wrap{margin-top:clamp(28px,4vw,48px);overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:#fff}
.p-compare{width:100%;min-width:640px;border-collapse:collapse;font-size:.95rem}
.p-compare th,.p-compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.p-compare thead th{color:var(--text-3);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.p-compare tbody tr:last-child th,.p-compare tbody tr:last-child td{border-bottom:0}
.p-compare tbody th{font-weight:800}
.p-compare .is-us{background:linear-gradient(180deg,#fff6f2,#fff);color:var(--text);font-weight:800}
.p-compare thead .is-us{color:var(--coral-ink)}
.p-compare .yes::before,.p-compare .no::before{content:"";display:inline-block;width:18px;height:18px;margin:-3px 8px 0 0;vertical-align:middle;border-radius:50%}
.p-compare .yes::before{background:rgba(235,64,55,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2321f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat}
.p-compare .no::before{background:rgba(21,22,28,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676a75' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat}
.p-compare-note{margin-top:14px;color:var(--text-3);font-size:.86rem}
.p-compare-note a{color:var(--coral-ink);font-weight:700}

/* ── A sequence that plays out (offline queue, ticket states): product.js steps data-seq through its states ── */
.p-seq{position:relative;max-width:420px;margin-inline:auto;padding:22px;border-radius:26px;background:rgba(246,241,232,.04);border:1px solid var(--line-ink)}
.p-seq-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(246,241,232,.06);font-weight:800;font-size:.9rem}
.p-seq-bar .net{display:inline-flex;align-items:center;gap:8px}
.p-seq-bar .net::before{content:"";width:9px;height:9px;border-radius:50%;background:#46e08f;box-shadow:0 0 10px #46e08f;transition:background-color .3s,box-shadow .3s}
.p-seq[data-state="offline"] .p-seq-bar .net::before{background:#f59e0b;box-shadow:0 0 10px #f59e0b}
.p-seq-bar .say{color:var(--on-ink-2);font-weight:700}
.p-seq-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.p-seq-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-radius:16px;background:rgba(246,241,232,.05);border:1px solid var(--line-ink);transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .45s}
.p-seq-list li .st{font-size:.8rem;font-weight:800;color:var(--on-ink-3)}
.p-seq-list li.is-wait{opacity:0;transform:translateY(8px)}
.p-seq-list li.is-queued{border-color:rgba(245,158,11,.45)}
.p-seq-list li.is-queued .st{color:#fbbf24}
.p-seq-list li.is-sent{border-color:rgba(70,224,143,.4)}
.p-seq-list li.is-sent .st{color:#6fe0a5}
.p-seq .p-tag{position:absolute;right:16px;top:-12px}

/* ── Users per plan ───────────────────────────────────────────────────── */
.p-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(28px,4vw,48px) 0 0;padding:0;list-style:none}
.p-plans li{padding:24px 22px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.p-plans .plan{color:var(--text-3);font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.p-plans strong{display:block;margin-top:14px;font:700 clamp(2.4rem,1.8rem + 1.6vw,3.2rem)/1 var(--display);letter-spacing:-.05em}
.p-plans strong small{font-size:.95rem;font-weight:700;letter-spacing:0;color:var(--text-3)}
.p-plans p{margin-top:12px;color:var(--text-2);font-size:.92rem;line-height:1.55}
.p-plans li.is-pick{border-color:rgba(235,64,55,.35);background:linear-gradient(180deg,#fff6f2,#fff)}

/* ── A TV for the kitchen (16:9 on a stand) ───────────────────────────── */
.device--tv{padding:clamp(8px,.9vw,12px);border-radius:clamp(12px,1.2vw,16px)}
.device--tv::before{display:none}
.device--tv .device-screen{aspect-ratio:1920/1060;border-radius:6px}
.device--tv::after{content:"";position:absolute;left:50%;bottom:-34px;width:26%;height:34px;transform:translateX(-50%);background:linear-gradient(180deg,#1b1c23,#101117);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);border-radius:0 0 8px 8px}

/* ── The live board: dishes move through the kitchen's four states (example data) ── */
.p-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;border-radius:22px;background:#0f1520;border:1px solid rgba(246,241,232,.08);box-shadow:0 30px 56px -30px rgba(0,0,0,.8)}
.p-ticket{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:#182231;border:1px solid rgba(255,255,255,.06)}
.p-ticket header{display:flex;align-items:center;justify-content:space-between;color:#e8ecf3;font-weight:800;font-size:.92rem}
.p-ticket header small{color:#8d9ab0;font-weight:700}
.p-dish{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:10px;background:#111926;border-left:3px solid #e0b43a;color:#dfe5ee;font-size:.84rem;font-weight:700;transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .4s,max-height .5s var(--ease),padding .5s var(--ease);max-height:60px}
.p-dish .tag{flex:none;padding:3px 8px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#e0b43a;color:#1d1503}
.p-dish[data-st="prep"]{border-left-color:#4f8ef7}.p-dish[data-st="prep"] .tag{background:#4f8ef7;color:#071530}
.p-dish[data-st="ready"]{border-left-color:#34c77b}.p-dish[data-st="ready"] .tag{background:#34c77b;color:#04210f}
.p-dish[data-st="served"]{opacity:0;transform:translateX(14px);max-height:0;padding-top:0;padding-bottom:0;margin-top:-8px}
.p-board-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;color:var(--on-ink-3);font-size:.84rem;font-weight:700}
.p-board-legend span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border-radius:3px;vertical-align:-1px;background:var(--c)}

/* ── Before and after: drag the line from the paper ticket to the screen ── */
.p-ba{position:relative;overflow:hidden;border-radius:22px;aspect-ratio:16/10;background:#0b0d12;border:1px solid var(--line);--at:50%}
.p-ba > figure{position:absolute;inset:0;margin:0;display:grid;place-items:center}
.p-ba .ba-paper{place-items:center start;padding-left:7%}
.p-ba .ba-paper{background:#efe9dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23efe9dc'/%3E%3Crect width='1' height='1' fill='%23e4dccb'/%3E%3C/svg%3E")}
.p-ba .ba-screen{clip-path:inset(0 0 0 var(--at))}
.p-ba .ba-screen img{width:100%;height:100%;object-fit:cover}
.p-ba .ba-line{position:absolute;top:0;bottom:0;left:var(--at);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.p-ba .ba-line::after{content:"\2194";position:absolute;top:50%;left:50%;width:42px;height:42px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:var(--coral-btn);color:#fff;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.p-ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.p-ba input:focus-visible ~ .ba-line::after{outline:3px solid var(--coral-soft);outline-offset:3px}
.p-ba .ba-label{position:absolute;top:14px;padding:5px 11px;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.p-ba .ba-label--before{left:14px;background:rgba(21,22,28,.75);color:#fff}
.p-ba .ba-label--after{right:14px;background:var(--coral-btn);color:#fff}
.paper-ticket{width:min(250px,64%);padding:18px 16px 24px;background:#fffdf7;color:#26231d;font:500 .74rem/1.5 ui-monospace,Menlo,Consolas,monospace;transform:rotate(-2.5deg);box-shadow:0 18px 30px -18px rgba(0,0,0,.55)}
.paper-ticket p{margin:0}
.paper-ticket .scrawl{font:600 1.05rem/1.2 "Segoe Print","Bradley Hand","Comic Sans MS",cursive;color:#1f3f8a;transform:rotate(-4deg);margin-top:8px}
.paper-ticket .stain{display:block;width:40px;height:40px;margin:8px 0 0 auto;border-radius:50%;background:radial-gradient(circle,rgba(150,96,40,.0) 52%,rgba(150,96,40,.22) 56%,rgba(150,96,40,0) 62%)}

/* ── A pairing code typing itself in ──────────────────────────────────── */
.p-code{display:flex;gap:8px;justify-content:center}
.p-code span{width:44px;height:56px;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid var(--line);font:700 1.5rem/1 var(--display);color:var(--text);transition:border-color .25s,transform .25s}
.p-code span.is-in{border-color:rgba(235,64,55,.55);transform:translateY(-2px)}
.p-code-ok{margin-top:14px;text-align:center;color:#13824b;font-weight:800;opacity:0;transition:opacity .4s}
.p-code-ok.is-on{opacity:1}

/* ── A timeline (the kitchen's audit) ─────────────────────────────────── */
.p-timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid rgba(235,64,55,.25);display:grid;gap:22px}
.p-timeline li{position:relative}
.p-timeline li::before{content:"";position:absolute;left:-29px;top:.35em;width:12px;height:12px;border-radius:50%;background:var(--coral-btn);box-shadow:0 0 0 4px rgba(235,64,55,.15)}
.p-timeline h3{font-size:1.08rem}
.p-timeline p{margin-top:6px;color:var(--text-2);line-height:1.6}

/* ── The table's QR card, being scanned, in front of the phones (Pedidos QR) ── */
.p-stage--qr .ev-4{top:44%;right:-6%;bottom:auto}
.qr-tent{position:absolute;right:2%;bottom:7%;z-index:3;perspective:700px;pointer-events:none}
.qr-tent-card{display:flex;flex-direction:column;align-items:center;gap:9px;width:clamp(120px,11vw,150px);padding:14px 14px 13px;border-radius:16px;background:linear-gradient(180deg,#fffdf8 0%,#f2ede3 100%);color:#1c1a17;box-shadow:0 1px 0 #fff inset,0 0 0 1px rgba(0,0,0,.05),0 28px 40px -22px rgba(0,0,0,.85);transform:rotateY(-18deg) rotateX(9deg) rotateZ(2.5deg);animation:qr-float 7s ease-in-out infinite}
.qr-tent-name{color:#6f6a62;font:800 .7rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.qr-tent-code{position:relative;display:block;width:100%;overflow:hidden;border-radius:6px}
.qr-tent .r-qr{display:block;width:100%;height:auto}
.qr-beam{position:absolute;left:0;right:0;top:0;height:24%;background:linear-gradient(180deg,rgba(255,97,82,0) 0%,rgba(255,97,82,.3) 72%,rgba(242,73,59,.95) 97%,rgba(255,97,82,0) 100%);mix-blend-mode:multiply;opacity:0;animation:qr-scan 3.2s cubic-bezier(.45,.05,.4,1) infinite}
.qr-tent-say{font:700 .86rem/1.1 var(--display);letter-spacing:-.01em}
@keyframes qr-scan{0%{transform:translateY(-100%);opacity:0}12%{opacity:1}62%{transform:translateY(420%);opacity:1}72%,100%{transform:translateY(420%);opacity:0}}
@keyframes qr-float{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* The walk-through on a phone: a narrower column for it, a soft glow behind it. */
.walk-grid--phone{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.walk-device--phone{isolation:isolate}
.walk-device--phone::before{content:"";position:absolute;left:50%;top:44%;z-index:-1;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,97,82,.16),transparent 72%);pointer-events:none}
.walk-device--phone .device--phone{width:min(300px,82%,calc((100vh - 230px) * .46))}
.walk-device--phone .walk-meta{max-width:440px;margin-inline:auto}
.walk-device--phone .walk-label{white-space:nowrap}

/* At the table: one real screen beside the cards. */
.p-table-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(32px,4vw,52px)}
.p-table-phone{margin:0;text-align:center}
.p-table-phone .device--phone{width:min(290px,86%)}
.p-table-phone figcaption{max-width:300px;margin:20px auto 0;color:var(--text-2);font-size:.92rem;line-height:1.55}
.p-table-phone figcaption b{color:var(--text)}
.kit-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
/* Straight under a section head (not beside a phone), the pair keeps the grid's own gap above it. */
.p-head + .kit-grid--2{margin-top:clamp(32px,4vw,52px)}
/* A kit section on ink (the English pages' «Connected to the suite»). */
.p-kit--ink{background:var(--ink-2);color:var(--on-ink)}
.p-kit--ink .kicker{color:var(--coral-soft)}
.p-kit--ink h2,.p-kit--ink .kit-card h3{color:var(--on-ink)}
.p-kit--ink .p-head p,.p-kit--ink .kit-card p{color:var(--on-ink-2)}
.p-kit--ink .kit-card{background:rgba(246,241,232,.04);border-color:var(--line-ink)}
.p-kit--ink .kit-card:hover{box-shadow:0 26px 44px -30px rgba(0,0,0,.8)}
.p-kit--ink .kit-icon{background:rgba(255,97,82,.14);color:var(--coral-soft)}
.p-kit--ink .ticks li{color:var(--on-ink)}
.p-kit--ink .ticks li::before{background-color:rgba(255,97,82,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8f7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E")}
.kit-grid--2 .kit-card{grid-column:auto}

/* The guest's carta in each theme: pick a swatch, the phone and the glow behind it change. */
.p-brand{position:relative;isolation:isolate;overflow:hidden}
.p-brand-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head stage" "pick stage" "lists stage";column-gap:clamp(32px,5vw,88px);align-items:start}
.p-brand-head{grid-area:head}
.p-brand-head h2{margin-top:14px;font-size:clamp(1.95rem,1.3rem + 1.7vw,2.85rem);line-height:1.06;text-wrap:balance}
.p-brand-head .lead{margin-top:18px}
.p-brand-pick{grid-area:pick;margin-top:30px}
.p-brand-lists{grid-area:lists;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:34px}
.p-brand-lists h3{font-size:1.06rem;letter-spacing:-.01em}
.p-brand-lists .ticks{margin-top:14px;gap:11px}
.p-brand-lists .ticks li{font-weight:500;font-size:.95rem;color:var(--on-ink-2)}
.p-brand-note{grid-column:1 / -1;color:var(--on-ink-3);font-size:.88rem;line-height:1.55}
.p-brand-stage{grid-area:stage;position:relative;align-self:center;margin:0;padding:28px 0}
.p-brand-glow{position:absolute;left:50%;top:50%;z-index:0;width:min(560px,120%);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background-color:#ede8df;filter:blur(80px);opacity:.3;transition:background-color 1s var(--ease);pointer-events:none}
.p-brand-stage .device--phone{z-index:1;width:min(310px,80%)}
.p-brand-stage .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.p-brand-stage .layer.is-on{opacity:1}
.p-brand-stage .p-tag{position:absolute;right:4%;top:0;z-index:2}
.p-swatches{display:flex;flex-wrap:wrap;gap:10px}
.p-swatch{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,var(--bg) 0 50%,var(--sw) 50% 100%);box-shadow:0 0 0 1px rgba(246,241,232,.22);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s}
.p-swatch:hover{transform:translateY(-2px)}
.p-swatch.is-on{box-shadow:0 0 0 2px var(--ink-2),0 0 0 4px var(--coral-soft)}
.p-swatch:focus-visible{outline:2px solid var(--coral-soft);outline-offset:5px}
.p-swatch-say{margin-top:14px;color:var(--on-ink-2);font-size:.92rem;line-height:1.5}
.p-swatch-say b{color:var(--on-ink)}

/* Where it pays off, and the one place it does not. */
.kit-card--muted{background:transparent;border-style:dashed}
.kit-card--muted .kit-icon{background:rgba(21,22,28,.06);color:var(--text-2)}

/* ── Control de caja: a wide screen (the close is a wide modal) and its film ── */
.device--wide .device-screen{aspect-ratio:1920/1005}
.p-stage.is-playing .device:not(.device--back){transform:none;transition:transform .6s var(--ease)}
.p-stage.is-playing .p-event{opacity:0}
.p-stage--caja .device-screen video{object-fit:contain;background:#05060a}
.p-stage--caja .p-event{max-width:270px}

/* The same close read two ways: cash only, or every method at once (the page's own example, in the till's dark UI). */
.p-cuadre{position:relative;padding:20px;border-radius:24px;background:#12141b;color:#e9ecf2;border:1px solid rgba(255,255,255,.06);box-shadow:0 44px 70px -40px rgba(21,22,28,.75)}
.p-cuadre-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.06)}
.p-cuadre-switch button{padding:11px 12px;border:0;border-radius:11px;background:transparent;color:#aab1bf;font:700 .86rem/1.25 var(--body);cursor:pointer;transition:background-color .25s,color .25s}
.p-cuadre-switch button.is-on{background:#fff;color:#12141b}
.p-cuadre-switch button:focus-visible{outline:2px solid var(--coral-soft);outline-offset:2px}
.p-cuadre-rows{list-style:none;margin:18px 0 0;padding:0}
.p-cuadre-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:14px 4px;border-top:1px solid rgba(255,255,255,.07);transition:opacity .4s var(--ease)}
.p-cuadre-rows li:first-child{border-top:0}
.p-cuadre-rows span{font-weight:800}
.p-cuadre-rows small{grid-column:1;color:#8c94a3;font-size:.8rem}
.p-cuadre-rows b{grid-column:2;grid-row:1 / span 2;font-variant-numeric:tabular-nums;font-size:1.02rem}
.p-cuadre .bad{color:#ff7b72}
.p-cuadre .good{color:#3fd68b}
.p-cuadre .v-tipico{display:none;color:#8c94a3;font-weight:700;font-size:.86rem}
.p-cuadre[data-state="tipico"] .is-skip{opacity:.5}
.p-cuadre[data-state="tipico"] .is-skip .v-mesero{display:none}
.p-cuadre[data-state="tipico"] .is-skip .v-tipico{display:inline}
.p-cuadre-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:8px;padding:16px 18px;border-radius:16px;background:rgba(255,92,80,.12);border:1px solid rgba(255,92,80,.35)}
.p-cuadre-total span{font-weight:800;color:#ffb3ab}
.p-cuadre-total b{font:700 clamp(1.7rem,1.3rem + 1vw,2.2rem)/1 var(--display);letter-spacing:-.03em;color:#ff7b72;font-variant-numeric:tabular-nums}
.p-cuadre-say{margin-top:14px;min-height:3.1em;color:#c3c9d4;font-size:.92rem;line-height:1.55}
.p-cuadre .p-tag{position:absolute;right:16px;top:-12px;background:#12141b;color:#c3c9d4}
.p-cuadre-real{margin-top:14px}

/* A guest flow told in phones, one per step (the booking: date, time, details, confirmed). */
.p-phones-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin:clamp(36px,4vw,56px) 0 0;padding:0;list-style:none;counter-reset:step}
.p-phones-row li{counter-increment:step}
.p-phones-row li:nth-child(even){margin-top:42px}
.p-phones-row .device--phone{width:100%;max-width:240px}
.p-phones-row .step{display:block;max-width:240px;margin:18px auto 0;color:var(--text-2);font-size:.92rem;line-height:1.5;text-align:center}
.p-phones-row .step::before{content:counter(step);display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:var(--coral-btn);color:#fff;font-size:.78rem;font-weight:800}
.p-phones-row .step b{color:var(--text)}

/* A phone whose screens take turns, with the steps beside it (pick one to stop). */
.p-slides{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center}
.p-slides .device--phone{width:100%}
.p-slides .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.p-slides .layer.is-on{opacity:1}
.p-slides-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.p-slides-steps button{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;width:100%;padding:12px 14px;border:1px solid var(--line-ink);border-radius:16px;background:transparent;color:var(--on-ink-2);font:inherit;text-align:left;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s}
.p-slides-steps .n{grid-row:1 / span 2;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(246,241,232,.08);font-size:.8rem;font-weight:800}
.p-slides-steps b{color:var(--on-ink);font-size:.95rem}
.p-slides-steps small{color:var(--on-ink-3);font-size:.84rem;line-height:1.45}
.p-slides-steps button.is-on{background:rgba(255,97,82,.1);border-color:rgba(255,97,82,.45)}
.p-slides-steps button.is-on .n{background:var(--coral-btn);color:#fff}
.p-slides-steps button:focus-visible{outline:2px solid var(--coral-soft);outline-offset:2px}

/* ── Kiosko: a self-order totem (9:16 on a foot), the film in a wide frame, the pickup board ── */
.device--kiosk{width:min(300px,68%);margin-inline:auto;padding:12px 12px 16px;border-radius:24px}
.device--kiosk::before{display:none}
.device--kiosk .device-screen{aspect-ratio:540/960;border-radius:12px}
.device--kiosk::after{content:"";position:absolute;left:50%;bottom:-54px;width:30%;height:54px;transform:translateX(-50%);background:linear-gradient(180deg,#1b1c23,#0e0f14);clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);border-radius:0 0 10px 10px}
.p-stage--kiosk{display:grid;place-items:center;padding-bottom:70px}
.p-phones-row--kiosk .device--kiosk{width:100%;max-width:230px}
.p-phones-row--kiosk .device--kiosk::after,.p-slides .device--kiosk::after,.p-brand-stage .device--kiosk::after{display:none}
.p-brand-stage .device--kiosk{z-index:1;width:min(270px,70%)}

.p-film{padding:clamp(56px,6vw,88px) 0;background:var(--ink);color:var(--on-ink)}
.p-film-frame{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#05060a;box-shadow:0 0 0 1px rgba(246,241,232,.08),0 50px 90px -50px rgba(0,0,0,.9)}
.p-film-frame > img,.p-film-frame > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-film-frame > video{background:#05060a}
.p-film-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,10,0) 45%,rgba(5,6,10,.7) 100%);pointer-events:none;transition:opacity .4s}
.p-film-frame:has(video:not([hidden]))::after{opacity:0}
.p-film-play{position:absolute;left:clamp(18px,3vw,36px);bottom:clamp(18px,3vw,32px);z-index:2;margin:0}
.p-film-play .dot{width:56px;height:56px;background:var(--coral-btn);border-color:transparent;box-shadow:0 14px 30px -10px rgba(235,64,55,.7)}
.p-film-play .dot svg{width:16px;height:16px;color:#fff}
.p-film-play.is-playing{opacity:0;pointer-events:none}
.p-film-note{max-width:1000px;margin:16px auto 0;color:var(--on-ink-3);font-size:.88rem}

/* The pickup screen (example numbers): in preparation on the left, ready on the right, moving as cocina marks them. */
.p-pickup{display:grid;grid-template-columns:1fr 1fr;background:#0e1117;font:800 clamp(.62rem,.35rem + .55vw,.95rem)/1 var(--body)}
.p-pickup .col{padding:5% 5% 4%}
.p-pickup .col + .col{border-left:1px solid rgba(255,255,255,.06)}
.p-pickup h4{margin:0 0 7%;text-align:center;font-size:1.05em;letter-spacing:.06em;text-transform:uppercase}
.p-pickup .prep h4{color:#f59e0b}
.p-pickup .ready h4{color:#34d399}
.p-pickup ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.p-pickup li{padding:.7em 0;border-radius:8px;text-align:center;color:#eef1f6;border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.06);transition:background-color .5s,border-color .5s,transform .5s var(--ease)}
.p-pickup .ready li{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.08)}
.p-pickup li.is-new{background:rgba(52,211,153,.35);border-color:#34d399;transform:scale(1.06)}
.p-caption{margin-top:60px;color:var(--text-3);font-size:.88rem;line-height:1.55}

/* ── Inventario: a dish's costing, live (the demo's real recipe), and a supplier comparison ── */
.p-esc{position:relative;padding:22px;border-radius:24px;background:#12141b;color:#e9ecf2;border:1px solid rgba(255,255,255,.06);box-shadow:0 44px 70px -40px rgba(21,22,28,.75)}
.p-esc h3{color:#fff;font-size:1.12rem;letter-spacing:-.01em}
.p-esc h3 small{display:block;margin-top:4px;color:#8c94a3;font-size:.8rem;font-weight:600;letter-spacing:0}
.p-esc-lines{list-style:none;margin:14px 0 0;padding:0;font-size:.88rem}
.p-esc-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;padding:8px 2px;border-top:1px solid rgba(255,255,255,.07);color:#c3c9d4}
.p-esc-lines .q{color:#8c94a3;font-variant-numeric:tabular-nums}
.p-esc-lines b{min-width:4.6em;text-align:right;color:#fff;font-weight:700;font-variant-numeric:tabular-nums;transition:color .3s}
.p-esc-lines li.is-up b{color:#fbbf24}
.p-esc-total{display:flex;justify-content:space-between;padding:10px 2px 0;border-top:1px solid rgba(255,255,255,.16);font-weight:800}
.p-esc-total b{font-variant-numeric:tabular-nums}
.p-esc-price{display:block;margin-top:18px;color:#c3c9d4;font-size:.9rem;font-weight:700}
.p-esc-price span{display:flex;justify-content:space-between}
.p-esc-price b{color:#fff;font-variant-numeric:tabular-nums}
.p-esc-price input{width:100%;margin-top:10px;accent-color:#ff6152}
.p-esc-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.p-esc-out div{padding:14px;border-radius:14px;background:rgba(255,255,255,.05)}
.p-esc-out small{display:block;color:#8c94a3;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.p-esc-out b{display:block;margin-top:6px;font:700 clamp(1.5rem,1.2rem + .8vw,1.9rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .3s}
.p-esc[data-band="ok"] [data-esc-pct]{color:#3fd68b}
.p-esc[data-band="warn"] [data-esc-pct]{color:#fbbf24}
.p-esc[data-band="bad"] [data-esc-pct]{color:#ff7b72}
.p-esc-shock{display:flex;align-items:center;gap:10px;margin-top:14px;color:#c3c9d4;font-size:.9rem;font-weight:600;cursor:pointer}
.p-esc-shock input{width:18px;height:18px;accent-color:#ff6152}
.p-esc-say{min-height:3em;margin-top:12px;color:#8c94a3;font-size:.86rem;line-height:1.5}
.p-esc .p-tag{position:absolute;right:16px;top:-12px;background:#12141b;color:#c3c9d4}

.p-offers{position:relative;padding:20px;border-radius:22px;background:rgba(246,241,232,.04);border:1px solid var(--line-ink)}
.p-offers h3{font-size:1.02rem}
.p-offers h3 small{display:block;margin-top:4px;color:var(--on-ink-3);font-size:.8rem;font-weight:600}
.p-offers ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.p-offers li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:13px 15px;border-radius:14px;border:1px solid var(--line-ink);background:rgba(246,241,232,.03)}
.p-offers li small{grid-column:1;color:var(--on-ink-3);font-size:.8rem}
.p-offers li b{grid-row:1 / span 2;grid-column:2;font-variant-numeric:tabular-nums}
.p-offers li.is-best{border-color:rgba(52,199,123,.5);background:rgba(52,199,123,.08)}
.p-offers li.is-best span::after{content:"M\00e1s barato";margin-left:8px;padding:2px 7px;border-radius:999px;background:#34c77b;color:#04210f;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;vertical-align:2px}
.p-offers .p-tag{position:absolute;right:14px;top:-11px}

/* ── CRM: the TPV ticket mock-up (its own inline styles) on a light screen in the hero ── */
.p-crm-screen{aspect-ratio:auto;padding:clamp(14px,2vw,22px);background:#f6f4ef}
.p-crm-screen .crm-ticket{margin:0 auto;max-width:440px}

/* ── A film that plays inside the hero's device (16:9 film in a 16:10 screen) ── */
.p-stage--film .device-screen video{object-fit:contain;background:#05060a}

/* ── A chat with the Mesero number (example, the real replies' words): messages arrive one by one ── */
.p-chat{position:relative;width:100%;max-width:360px;margin-inline:auto;border-radius:22px;overflow:hidden;background:#0f1a20;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 60px -36px rgba(0,0,0,.8);font:500 .9rem/1.42 var(--body);color:#e9edef}
.p-chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#1f2c34}
.p-chat-head .av{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--coral-btn);color:#fff;font-weight:800}
.p-chat-head b{display:block;font-size:.92rem}
.p-chat-head small{display:block;color:#8696a0;font-size:.74rem}
.p-chat-log{list-style:none;margin:0;padding:14px 12px 16px;display:flex;flex-direction:column;gap:8px;min-height:var(--chat-h,250px);background:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.2px) 0 0/14px 14px,#0b141a}
.p-chat .msg{max-width:84%;padding:8px 10px 6px;border-radius:12px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.p-chat .msg p{margin:0;color:#e9edef;font-size:.88rem;line-height:1.42;white-space:pre-line}
.p-chat .msg p b{color:#fff}
.p-chat .msg .lnk{color:#53bdeb;overflow-wrap:anywhere}
.p-chat .msg time{display:block;margin-top:2px;text-align:right;color:#8696a0;font-size:.68rem}
.p-chat .msg.out{align-self:flex-end;background:#005c4b;border-top-right-radius:4px}
.p-chat .msg.in{align-self:flex-start;background:#1f2c34;border-top-left-radius:4px}
.p-chat .msg.typing{display:none;padding:10px 12px}
.p-chat .msg.typing.is-on{display:block}
.p-chat .msg.typing span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:#8696a0;animation:chat-dot 1s infinite ease-in-out}
.p-chat .msg.typing span:nth-child(2){animation-delay:.15s}.p-chat .msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.p-chat .p-tag{position:absolute;right:12px;top:14px}
/* Quick-reply buttons under a reply, as WhatsApp draws them */
.p-chat .msg .btns{display:flex;flex-wrap:wrap;gap:4px;margin:8px -4px -2px}
.p-chat .msg .btns span{flex:1 1 auto;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.06);color:#53bdeb;font-size:.76rem;font-weight:700;text-align:center;white-space:nowrap}
/* A photo sent in the chat (an incident): a picture-shaped block above its caption */
.p-chat .msg .ph{display:grid;place-items:center;width:190px;max-width:100%;aspect-ratio:16/10;margin:-3px -5px 6px;border-radius:9px;background:radial-gradient(circle at 30% 30%,#5b6e78,#26343c 70%);font-size:2rem}
/* The chat filling a phone's screen: the newest message at the bottom, the oldest leaving at the top */
.p-chat--screen{max-width:none;height:100%;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.p-chat--screen .p-chat-head{padding:30px 14px 10px}
.p-chat--screen .p-chat-log{flex:1;min-height:0;overflow:hidden;justify-content:flex-end}
/* The «Menú» list WhatsApp opens over the chat (the real rows' words) */
.wa-sheet{position:absolute;left:0;right:0;bottom:0;padding:12px 0 8px;border-radius:18px 18px 0 0;background:#1f2c34;color:#e9edef;box-shadow:0 -14px 30px -12px rgba(0,0,0,.6)}
.wa-sheet::before{content:"";display:block;width:36px;height:4px;margin:0 auto 10px;border-radius:4px;background:rgba(255,255,255,.25)}
.wa-sheet h4{margin:0 0 6px;text-align:center;font-size:.9rem;font-weight:700}
.wa-sheet ul{list-style:none;margin:0;padding:0}
.wa-sheet li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 16px;border-top:1px solid rgba(255,255,255,.06)}
.wa-sheet li b{display:block;font-size:.84rem;font-weight:600}
.wa-sheet li small{display:block;margin-top:1px;color:#8696a0;font-size:.72rem}
.wa-sheet li i{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid #8696a0}
.p-menu-phone .device-screen{background:#0b141a}
.p-menu-phone .p-chat--screen .p-chat-log{opacity:.45}
/* A message takes no room until it arrives, so a full chat scrolls like the real one. */
.js .p-chat[data-chat] .msg:not(.is-on){display:none}
.p-chat .msg.is-on{animation:msg-in .35s var(--ease)}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}}

/* ── A phone notification (the app's real reminder words) ── */
.p-notif{display:flex;gap:11px;width:100%;max-width:330px;padding:12px 14px;border-radius:18px;background:rgba(246,241,232,.92);color:#1c1a17;box-shadow:0 18px 36px -18px rgba(0,0,0,.6);text-align:left}
.p-notif .ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--coral-btn);color:#fff;font-weight:800}
.p-notif b{display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.p-notif b small{color:#6f6a62;font-weight:600;font-size:.72rem}
.p-notif p{margin:2px 0 0;color:#3a3630;font-size:.84rem;line-height:1.35}

/* ── Four ways, each card with its own picture ── */
.p-ways .kit-card{display:flex;flex-direction:column}
.way-visual{display:grid;place-items:center;min-height:240px;margin:-6px -6px 18px;padding:18px;border-radius:16px;background:linear-gradient(160deg,#171922,#0f1117);overflow:hidden}
.way-visual .p-notif + .p-notif{margin-top:10px}
.way-visual .stack{display:grid;gap:10px;width:100%;justify-items:center}
.way-visual .device--phone{width:150px;padding:6px;border-radius:26px}
.way-visual .device--phone .device-screen{border-radius:21px}
.way-visual .device{transform:none}
.way-visual .device--tab{width:100%;max-width:330px;padding:7px;border-radius:14px}
.way-visual .device--tab::before{display:none}
.way-visual .p-chat{max-width:330px;box-shadow:none}
.way-visual .p-chat-log{height:190px;min-height:0;padding:10px}
.way-visual .stores{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.way-visual .stores span{padding:6px 11px;border-radius:9px;background:rgba(246,241,232,.1);color:var(--on-ink-2);font-size:.76rem;font-weight:700}

/* ── A printed page (the inspection PDF), tilted on the table ── */
.p-sheet{position:relative;margin:0}
.p-sheet img{display:block;width:100%;height:auto;border-radius:6px;background:#fff;transform:rotate(-1.6deg);box-shadow:0 2px 0 rgba(0,0,0,.04),0 30px 60px -30px rgba(21,22,28,.55),0 0 0 1px rgba(21,22,28,.06)}
.p-sheet .p-tag{position:absolute;left:-6px;top:-14px;z-index:1;background:var(--ink);color:#f6f1e8;border-color:transparent}
.p-sheet figcaption{margin-top:18px;color:var(--text-3);font-size:.86rem;line-height:1.5}

/* A real screen beside the copy, framed like the home's (light or dark section). */
.p-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.p-split--flip > :first-child{order:2}

/* ── Reviews: a review and its reply, side by side in the guest's language ── */
.p-review-lang{display:inline-grid;place-items:center;min-width:38px;height:26px;padding:0 8px;border-radius:8px;background:rgba(21,22,28,.06);color:var(--text);font-size:.76rem;font-weight:800;letter-spacing:.08em}
.kit-card .p-review-q{margin:14px 0 0;color:var(--text);font:600 1.08rem/1.4 var(--display);letter-spacing:-.01em}
.kit-card .p-review-a{margin:14px 0 0;padding:12px 14px;border-radius:12px;border-left:3px solid var(--coral-btn);background:var(--surface-2);color:var(--text-2);font-size:.93rem;line-height:1.5}
.p-review-a b{display:block;margin-bottom:4px;color:var(--text);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
/* The same review, four tones: the replies share one grid cell, so the card keeps the tallest one's height. */
.p-tone{max-width:470px;margin-inline:auto}
.p-tone-card{position:relative;padding:24px 22px 22px;border-radius:22px;background:#fff;color:var(--text);box-shadow:0 40px 70px -40px rgba(0,0,0,.75)}
.p-tone-card .p-tag{position:absolute;right:14px;top:14px;background:var(--ink);color:#f6f1e8;border-color:transparent}
.p-tone-review{margin:0 0 16px;padding-right:76px;color:var(--text-2);font-size:.95rem;line-height:1.5}
.p-tone-review b{color:var(--text)}
.p-tone-review .stars{color:#f2a516;letter-spacing:1px}
.p-tone-reply{display:grid;padding:14px 16px;border-radius:14px;border-left:3px solid var(--coral-btn);background:var(--surface-2)}
.p-tone-reply > b{margin-bottom:6px;color:var(--text-2);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.p-tone-reply .layer{grid-area:2 / 1;margin:0;color:var(--text);font:600 1.06rem/1.5 var(--display);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.p-tone-reply .layer.is-on{opacity:1;transform:none}
.p-tone-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.p-tone-picks button{padding:9px 16px;border:1px solid var(--line-ink);border-radius:999px;background:transparent;color:var(--on-ink-2);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.p-tone-picks button:hover{border-color:rgba(246,241,232,.4);color:var(--on-ink)}
.p-tone-picks button.is-on{background:var(--coral-btn);border-color:var(--coral-btn);color:#fff}
.p-tone-picks button:focus-visible{outline:2px solid var(--coral-soft);outline-offset:2px}
/* The end of a ticket: the separator and the double-size ask, as the printer writes them. */
.receipt .r-sep{margin:10px 0 6px;overflow:hidden;white-space:nowrap}
.receipt .r-ask{text-align:center;font-size:1.45rem;font-weight:800;line-height:1.15;letter-spacing:.02em}
.close .p-legal{margin-top:36px;color:var(--on-ink-3);font-size:.8rem}
/* The launch offer's one-line note (promo-banner.js «note»): hidden until an offer is live; light, under a pricing head. */
.p-walk .page-promo-note{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:clamp(22px,3vw,32px) 0 0;padding:12px 18px;border-radius:14px;background:rgba(255,152,96,.1);border:1px solid rgba(255,152,96,.32);color:#c2410c;font-size:.94rem;text-align:center}
.p-walk .page-promo-note strong{color:#0f172a;font-weight:800}
.p-walk .page-promo-note a{color:#0f172a;font-weight:800;text-decoration:underline;text-decoration-color:rgba(15,23,42,.4);text-underline-offset:3px}
/* Proof tiles that hold words, not figures: one line each at the smaller size. */
.p-proof--words strong{font-size:clamp(1.35rem,1.05rem + .7vw,1.6rem);letter-spacing:-.02em}

/* ── Gestoría: who does what, as three steps joined by a running line (dark section) ── */
.p-flow{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:22px}
.p-flow > li{position:relative;padding:24px 24px 22px;border-radius:22px;background:rgba(246,241,232,.04);border:1px solid var(--line-ink)}
.p-flow > li + li::before{content:"";position:absolute;left:-23px;top:47px;width:24px;height:2px;background:linear-gradient(90deg,rgba(255,97,82,0) 0%,var(--coral-btn) 50%,rgba(255,97,82,0) 100%) 0 0/200% 100%;animation:flow-run 1.4s linear infinite}
.p-flow-ico{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(255,97,82,.12);color:var(--coral-soft)}
.p-flow-ico svg{width:24px;height:24px}
.p-flow h3{margin:16px 0 0;color:var(--on-ink);font:700 1.3rem/1.2 var(--display);letter-spacing:-.02em}
.p-flow .ticks{margin-top:14px}
.p-flow .ticks li{font-size:.92rem}
@keyframes flow-run{from{background-position:100% 0}to{background-position:-100% 0}}
/* An invoice read field by field (example): the beam runs while it reads; the fields light in turn. */
.p-ocr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,28px);align-items:center}
.p-ocr-doc{position:relative;overflow:hidden;margin:0;padding:24px 22px 20px;border-radius:6px;background:#fff;color:#18181d;font-size:.8rem;line-height:1.5;transform:rotate(-1.4deg);box-shadow:0 2px 0 rgba(0,0,0,.04),0 30px 60px -30px rgba(21,22,28,.55),0 0 0 1px rgba(21,22,28,.06)}
.p-ocr-doc .p-tag{position:absolute;right:12px;top:12px;background:var(--ink);color:#f6f1e8;border-color:transparent}
.p-ocr-doc .d-from{margin:0;padding-right:70px;font-weight:800;font-size:.95rem}
.p-ocr-doc .d-mute{margin:2px 0 0;color:#6b6f7b}
.p-ocr-doc .d-title{margin:16px 0 0;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}
.p-ocr-doc table{width:100%;margin-top:8px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.p-ocr-doc td{padding:6px 0;border-bottom:1px solid #eceae4}
.p-ocr-doc td + td{text-align:right}
.p-ocr-doc tr.d-total td{border-bottom:0;font-weight:800;font-size:.9rem}
.p-ocr-beam{position:absolute;left:0;right:0;top:-50px;height:50px;background:linear-gradient(180deg,rgba(255,97,82,0),rgba(255,97,82,.2) 70%,rgba(255,97,82,.55));pointer-events:none;opacity:0}
.p-ocr[data-state="reading"] .p-ocr-beam{opacity:1;animation:ocr-scan 1.7s linear infinite}
@keyframes ocr-scan{from{top:-50px}to{top:100%}}
.p-ocr-fields{margin:0;display:grid;gap:8px}
.p-ocr-fields > div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease)}
.js .p-ocr-fields > div:not(.is-on){opacity:.28;transform:translateX(8px)}
.p-ocr-fields > div.is-on{border-color:rgba(46,160,103,.35)}
.p-ocr-fields dt{flex:none;color:var(--text-3);font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.p-ocr-fields dd{margin:0;min-width:0;color:var(--text);font-weight:700;font-size:.92rem;text-align:right;font-variant-numeric:tabular-nums}
.p-ocr-done{grid-column:1 / -1;justify-self:center;margin:6px 0 0;padding:9px 16px;border-radius:999px;background:var(--ink);color:#f6f1e8;font-size:.86rem;font-weight:700;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .p-ocr:not([data-state="done"]) .p-ocr-done{opacity:0;transform:translateY(6px)}
/* The tax year: the general deadlines, the next one lit (product.js writes which, and the days left). */
.p-year{margin-top:clamp(30px,3.5vw,46px)}
.p-year-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.p-due{position:relative;padding:18px 18px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.p-due .when{display:block;color:var(--text);font:700 1.3rem/1.1 var(--display);letter-spacing:-.02em}
.p-due ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.p-due li{color:var(--text-2);font-size:.86rem;line-height:1.45}
.p-due li b{display:block;color:var(--text);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.p-due.is-next{border-color:rgba(235,64,55,.55);box-shadow:0 24px 44px -30px rgba(235,64,55,.6)}
.p-due.is-next::before{content:attr(data-next-label);position:absolute;right:12px;top:-11px;padding:3px 9px;border-radius:999px;background:var(--coral-btn);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.p-due li.is-next b{color:var(--coral-ink)}
.p-year-now{margin:18px 0 0;padding:14px 18px;border-radius:14px;background:var(--surface-2);color:var(--text);font-weight:600;line-height:1.5}
.p-year-now:empty{display:none}
.p-year-foot{margin:12px 0 0;color:var(--text-3);font-size:.84rem;line-height:1.5}
/* A real document on the table (the sheet opens whole in the viewer). */
.p-sheet .shot-open{max-width:none}
.feature--ink .p-sheet .p-tag{background:#f6f1e8;color:var(--ink)}
.feature--ink .p-sheet figcaption{color:var(--on-ink-3)}
.p-fiscal .lists p{margin-top:10px;color:var(--on-ink-2);font-size:.95rem;line-height:1.6}
/* The forms a draft is prepared for: the number first, then what it is. */
.p-forms{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.p-forms li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.p-forms li > b{color:var(--coral-ink);font:800 1.55rem/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.p-forms li > b small{display:block;margin-top:5px;color:var(--text-3);font:800 .72rem/1.2 var(--body);letter-spacing:.04em}
.p-forms li span{color:var(--text-2);font-size:.9rem;line-height:1.5}
.p-forms li span strong{display:block;margin-bottom:2px;color:var(--text);font-size:.98rem}
.p-forms-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.p-forms-notes p{margin:0;padding:14px 16px;border-radius:16px;background:var(--surface-2);color:var(--text-2);font-size:.9rem;line-height:1.5}
.p-forms-notes p strong{display:block;margin-bottom:2px;color:var(--text);font-size:.98rem}
.p-plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* A question answered in the FAQ's intro column, as a card. */
.p-faq-note{margin:24px 0;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.p-faq-note h3{margin:0;font-size:1.05rem;letter-spacing:-.01em}
.faq-intro .p-faq-note p{margin:8px 0 0;color:var(--text-2);font-size:.93rem;line-height:1.55}
.p-faq-note .ticks{margin-top:10px;gap:9px}
.p-faq-note .ticks li{font-size:.92rem}

/* ── Tablet ───────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .p-table-grid,.p-split{grid-template-columns:minmax(0,1fr)}
  .p-phones-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-phones-row li:nth-child(even){margin-top:0}
  .p-split--flip > :first-child{order:0}
  .p-brand-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "pick" "lists"}
  .p-brand-stage{padding:40px 0 8px}
  .p-hero .hero-grid{grid-template-columns:minmax(0,1fr)}
  .p-stage{max-width:760px;margin-inline:auto;width:100%}
  .p-head,.p-system-grid{grid-template-columns:minmax(0,1fr)}
  .p-fiscal .feature-grid{grid-template-columns:minmax(0,1fr)}
  .p-free{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit-card,.kit-card--wide{grid-column:span 3}
  .p-proof,.p-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-flow{grid-template-columns:minmax(0,1fr)}
  .p-flow > li + li::before{left:47px;top:-23px;width:2px;height:24px;background:linear-gradient(180deg,rgba(255,97,82,0) 0%,var(--coral-btn) 50%,rgba(255,97,82,0) 100%) 0 0/100% 200%;animation-name:flow-run-down}
  .p-year-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@keyframes flow-run-down{from{background-position:0 100%}to{background-position:0 -100%}}
/* One column for the walk-through: each step carries its own real screen; the following tablet goes. */
@media (max-width:960px){
  .walk-grid{grid-template-columns:minmax(0,1fr)}
  .walk-device{display:none}
  .walk-step{min-height:0;opacity:1;padding:30px 0}
  .walk-shot{display:block;margin-top:20px}
  .walk-shot img{width:100%;height:auto;border-radius:14px;box-shadow:0 22px 40px -26px rgba(21,22,28,.55),0 0 0 1px rgba(21,22,28,.08)}
  .walk-shot--phone img{width:min(280px,74%);margin-inline:auto;border-radius:32px;box-shadow:0 0 0 8px #17181f,0 30px 50px -26px rgba(21,22,28,.6)}
}
/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .p-hero h1{font-size:clamp(2.35rem,9.6vw,3rem)}
  .p-stage{padding:8px 0 24px}
  .p-stage .device{--tx:8deg;--ty:-10deg;--tz:1.5deg}
  .p-event{max-width:200px;padding:8px 12px 8px 8px;font-size:.8rem}
  .p-event .ico{width:28px;height:28px}
  /* Two events on a phone, both on the left: the chat button lives bottom right. */
  .ev-1{left:-2%;top:-4%}
  .ev-2,.ev-3,.ev-5{display:none}
  .ev-4{left:2%;right:auto;bottom:-8%}
  .p-fiscal .feature-copy .lists{grid-template-columns:minmax(0,1fr)}
  .kit-grid{grid-template-columns:minmax(0,1fr)}
  .kit-card,.kit-card--wide{grid-column:auto}
  .p-free,.p-proof,.p-plans{grid-template-columns:minmax(0,1fr)}
  .p-board{grid-template-columns:minmax(0,1fr)}
  .p-board .p-ticket:nth-child(n+2){display:none}
  .p-stage--phones .device--back{display:none}
  .receipt{margin-inline:22px}
  .qr-tent{right:-1%;bottom:4%}
  .qr-tent-card{width:104px;padding:10px 10px 9px;gap:7px;border-radius:13px}
  .qr-tent-say{font-size:.74rem}
  .kit-grid--2{grid-template-columns:minmax(0,1fr)}
  .p-phones-row{grid-template-columns:repeat(4,minmax(200px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 12px}
  .p-phones-row li{scroll-snap-align:center}
  .p-slides{grid-template-columns:minmax(0,1fr)}
  .p-slides .device--phone{max-width:250px;margin-inline:auto}
  .p-brand-lists{grid-template-columns:minmax(0,1fr)}
  .p-swatch{width:38px;height:38px}
  .p-ocr{grid-template-columns:minmax(0,1fr)}
  .p-year-grid{grid-template-columns:minmax(0,1fr)}
  .p-forms li{grid-template-columns:66px minmax(0,1fr);gap:12px}
  .p-forms-notes{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .p-stage .device{transition:none}
  .p-event{opacity:1;transform:none;transition:none}
  .walk-screen .layer{transition:none}
  .js .receipt.will-print{clip-path:none;transform:none}
  .kit-card,.kit-card::before,.kit-card::after{transition:none}
  .qr-tent-card{animation:none}
  .qr-beam{display:none}
  .p-brand-stage .layer,.p-brand-glow,.p-slides .layer{transition:none}
  .p-chat .msg.is-on{animation:none}
  .p-tone-reply .layer{transition:none}
  .p-flow > li + li::before{animation:none}
  .p-ocr-beam{display:none}
}