:root{--black:#0e0e0b;--gap:6px}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;min-width:320px;background:var(--black);color:#e2c699;font-family:Inter,system-ui,sans-serif}
img{-webkit-user-drag:none;user-select:none;display:block;width:100%;height:auto}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* keyboard "Skip to content": hidden until focused with Tab */
.pp-skip{position:fixed;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:6px;background:#171310;color:#e2c699;font:600 14px Inter,system-ui,sans-serif;text-decoration:none;transition:top .15s ease}
.pp-skip:focus{top:12px;outline:2px solid #e2c699;outline-offset:2px}
.pp-page{width:min(1600px,100%);margin:0 auto;padding:0 6px 8px;display:flex;flex-direction:column;gap:var(--gap)}
.pp-page>*{flex:none}
.pp-header{margin:0 -6px}
.pp-section,.pp-header{position:relative;aspect-ratio:var(--ar-d)}
/* header stays on screen while scrolling (flex column so sticky can travel the whole page) */
.pp-header{position:sticky;top:0;z-index:100}
.pp-section picture,.pp-header picture,.pp-section .pp-pics,.pp-header .pp-pics{position:absolute;inset:0;display:block}
/* one-screen-size pictures (see build-product-page.js "Speed"): the <picture> wrapper takes no box of its own */
picture.pp-bp,.pp-section picture.pp-bp,.pp-header picture.pp-bp{display:contents}
.pp-section img,.pp-header img{height:100%;object-fit:fill}
.pp-hs,.pp-hs:hover,.pp-hs:focus{text-decoration:none!important;font-size:0;line-height:0}
.pp-hs{position:absolute;display:block;padding:0;margin:0;border:0;background:transparent;cursor:pointer;z-index:2;border-radius:6px}
.pp-hs:focus-visible{outline:2px solid #e2c699;outline-offset:2px}
.pp-input{cursor:text;color:#e2c699;font:500 13px Inter,sans-serif;padding:0 14px;border-radius:3px}
/* Footer newsletter field: focused/typed-in shows the same field art minus its baked placeholder (no dark box, no ring) */
.pp-input:focus,.pp-input:not(:placeholder-shown){background:url("../assets/connect/field_d.webp") 0 0/100% 100% no-repeat}
@media(max-width:760px){.pp-input:focus,.pp-input:not(:placeholder-shown){background-image:url("../assets/connect/field_m.webp")}}
.pp-hs.pp-input:focus-visible{outline:none}
/* .pp-hs:focus zeroes font-size (for invisible link hotspots) — this is a real text field, keep its text visible */
.pp-hs.pp-input,.pp-hs.pp-input:focus{font-size:13px;line-height:normal}
.pp-input:placeholder-shown:not(:focus){background:url("../assets/connect/field_d.webp") -9999px -9999px no-repeat}
@media(max-width:760px){.pp-input:placeholder-shown:not(:focus){background-image:url("../assets/connect/field_m.webp")}}
.signup__note{position:absolute;left:0;top:100%;margin:6px 0 0;font-size:12px}
.pp-slot{position:absolute}
.pp-slot--reviews{left:20%;top:12%;width:75%;height:70%}
.pp-slot--faq{left:35%;top:10%;width:60%;height:80%}
@media(max-width:760px){
  .pp-page{padding:0 0 30px}
  .pp-header{margin:0}
  .pp-section,.pp-header{aspect-ratio:var(--ar-m)}
  .pp-slot--reviews{left:6%;top:14%;width:88%;height:60%}
  .pp-slot--faq{left:6%;top:36%;width:88%;height:58%}
}

/* Figma button states: hover artwork sits exactly on the button and fades in; a DEFAULT overlay (if any) fades out */
.pp-hs .st{position:absolute;pointer-events:none;max-width:none;width:auto;height:auto;transition:opacity .18s ease}
.pp-hs picture{display:contents}
.pp-hs .st-hov{opacity:0;object-fit:fill;width:auto}
.pp-hs .st-def{opacity:1}
@media(hover:hover) and (pointer:fine){.pp-hs:hover .st-hov,.pp-hs:focus-visible .st-hov{opacity:1}.pp-hs:hover .st-def,.pp-hs:focus-visible .st-def{opacity:0}}

/* Family cards: gray at rest, color on hover (desktop = gray base + color hover art; mobile = gray overlay over color art on hover-capable devices) */
.pp-hs .st-gray{opacity:0;filter:grayscale(1)}
@media(hover:hover) and (pointer:fine){.pp-hs .st-gray{opacity:1}.pp-hs:hover .st-gray,.pp-hs:focus-visible .st-gray{opacity:0}}
@media(max-width:760px){.st-d-only{display:none!important}.pp-hs .st-hov.st-d-only{display:none}}
@media(min-width:761px){.pp-hs .st-gray{display:none}}

/* ===== SITE LAW: carousels (reviews, and any future carousel) =====
   - Arrows: on press, the arrow dims slightly, then returns.
   - The white active dot travels one step in the direction of the button pressed.
   - Content (review text) slides in the direction of the button pressed: Next moves it right, Prev moves it left;
     the outgoing text exits toward that same side, the incoming text enters from the opposite side.
   Implemented once in js/product.js ([data-carousel]) and reused on every page. */
.pp-carousel{position:absolute;inset:0;pointer-events:none;z-index:3}
.pp-cc{position:absolute;display:block;padding:0;margin:0;border:0;background:transparent;pointer-events:auto}
.pp-cc img{width:100%;height:100%;object-fit:fill;pointer-events:none}
button.pp-cc{cursor:pointer;transition:opacity .2s ease}
button.pp-cc.is-pressed{opacity:.55}
button.pp-cc:focus-visible{outline:2px solid #171310;outline-offset:2px;border-radius:4px}
.pp-cc-dots{pointer-events:none}
.pp-cc-active{pointer-events:none;transform:translateX(calc(var(--i,0) * var(--step)));transition:transform .45s cubic-bezier(.32,.08,.24,1)}
.pp-slot{overflow:hidden}
.pp-review{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateX(0);transition:transform .5s cubic-bezier(.32,.08,.24,1),opacity .35s ease}
.pp-review.is-active{opacity:1;pointer-events:auto}
.pp-review.is-entering{transition:none}
.pp-section img.pp-cc-dots{object-fit:fill}
/* The white active dot must fully engulf the black dot beneath it: enlarge it slightly about its own centre */
.pp-cc-active img{transform:scale(1.08);transform-origin:46.2% 47.6%}

/* FAQ: one answer at a time. Desktop swaps the rows+answer area; mobile swaps the whole accordion (rows below shift down). */
.pp-faq-state,.pp-faq-mstate{position:absolute;opacity:0;pointer-events:none;object-fit:fill;transition:none}
.pp-faq-mstate{inset:0;width:100%;height:100%;display:none}
.pp-faq-state.is-on,.pp-faq-mstate.is-on{opacity:1}
.pp-faq-q{border-radius:4px}
@media(max-width:760px){.pp-faq-state{display:none}.pp-faq-mstate{display:block}}

@media (max-width: 760px) { .pp-hs .st-def { display: none; } }

/* Stay in the family (every page): the black-and-white card dissolves into its colour hover art */
#family .pp-hs .st{transition:opacity .45s ease}
#family .pp-hs:hover .st-hov,#family .pp-hs:focus-visible .st-hov{transition-duration:.45s}


/* both the desktop and the mobile image of every section are always loaded and stacked; a breakpoint only flips which one is visible,
   so resizing never shows a stretched half-loaded picture */
.pp-section img.pp-img,.pp-header img.pp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transition:none}
.pp-img-m{opacity:.005;pointer-events:none}
@media(max-width:760px){.pp-img-d{opacity:.005;pointer-events:none}.pp-img-m{opacity:1;pointer-events:auto}}


/* OANS plugin switcher: the six pages sit in a row; picking a plugin slides the current page out to one side and the next in from the other.
   The menu (one per plugin, stacked) never moves. */
.pp-tabs{overflow:hidden}
.pp-tab-state{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;pointer-events:none;transition:none;z-index:0}
.pp-nav{position:absolute;pointer-events:none;opacity:0;z-index:1;transition:none;max-width:none;height:auto}
.pp-nav.is-on{opacity:1}
@media(min-width:761px){.pp-tab-d.is-on{opacity:1}.pp-nav-m,.pp-tab-mt,.pp-tab-buy-m{display:none}}
@media(max-width:760px){.pp-tab-m.is-on{opacity:1}.pp-nav-d,.pp-tab-dt,.pp-tab-buy-d{display:none}}
.pp-tab{border-radius:4px}

/* OANS desktop menu: names, rail and one sliding underline (separate Figma assets) */
.pp-mlabel,.pp-mrail,.pp-mul{position:absolute;max-width:none;height:auto;pointer-events:none;z-index:1;-webkit-user-drag:none}
.pp-mlabel{transition:filter .35s ease}
.pp-mlabel.is-on{filter:brightness(1.18) drop-shadow(0 0 5px rgba(var(--glow),.85)) drop-shadow(0 0 12px rgba(var(--glow),.45))}
.pp-mul{transition:transform .5s cubic-bezier(.32,.08,.24,1)}
@media(max-width:760px){.pp-mlabel:not(.pp-mlabel-m),.pp-mrail,.pp-mul:not(.pp-mul-m){display:none}}
@media(min-width:761px){.pp-mlabel-m,.pp-mul-m,.pp-mbp{display:none}}
.pp-mbp{position:absolute;box-sizing:border-box;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(166,217,204,.10);pointer-events:none;z-index:1}
.pp-tab-buy-d .st-hov:not(.is-on){display:none}
.pp-tab-buy-d .st-hov{transition:opacity .25s ease}
@media (max-width:760px){.pp-tab-buy-d .st-hov{display:none!important}}
.pp-buy-glow{position:absolute;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .3s ease;box-shadow:0 0 14px 1px rgba(var(--g,255,255,255),.32),0 0 30px 4px rgba(var(--g,255,255,255),.14)}
@media(hover:hover) and (pointer:fine){.pp-tab-buy-d:hover .pp-buy-glow.is-on,.pp-tab-buy-d:focus-visible .pp-buy-glow.is-on{opacity:1}}
@media(max-width:760px){.pp-buy-glow{display:none}}


html{scroll-padding-top:64px}
@media(max-width:760px){html{scroll-padding-top:38px}}

/* header menus (PLUGINS mega + family switcher) — art from Figma header menu frames, rows are link hotspots */
/* Header menus at 85% of their art (owner, 2026-10-02: "smaller, not so in your face"), shrinking toward their top centre; gentle fade + small drop. */
.hd-menu{position:absolute;z-index:120;container-type:inline-size;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .35s cubic-bezier(.32,.72,0,1),visibility 0s linear .3s}
.hd-menu:not(.hd-acct){scale:.85;transform-origin:50% 0}
.hd-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.hd-menu>img{position:static!important;display:block;width:100%;height:auto;object-fit:fill}
.hd-row{position:absolute;display:block;border-radius:calc(4*var(--u));text-decoration:none}
.hd-row:hover,.hd-row:focus-visible,.hd-row.is-cur{background:rgba(226,198,153,.09)}
.hd-trigger{cursor:pointer}
.hd-trigger[aria-expanded="true"]::after{content:"";position:absolute;left:0;right:0;top:97%;height:2px;background:#d0962f}
@media(max-width:760px){.hd-menu,.pp-header-family{display:none!important}}

/* contact form: real fields sit on the Figma field boxes (art exported without the placeholder text) */
.pp-cf{box-sizing:border-box;background:transparent;border:0;border-radius:6px;padding:0 16px;font:400 13px Inter,sans-serif;color:#1c1813;cursor:text;outline-offset:2px}
.pp-cf::placeholder{color:rgba(28,24,19,.48);opacity:1}
.pp-cf-area{padding:14px 16px;resize:none}
.pp-cf-select{appearance:none;-webkit-appearance:none;cursor:pointer;color:rgba(28,24,19,.48)}
.pp-cf-select:valid{color:#1c1813}
.pp-cf-select option{color:#1c1813;background:#f0e5d1}
.pp-cf-send{cursor:pointer;background:transparent;border:0}
.pp-cf-status{position:absolute;margin:0;font:400 12px Inter,sans-serif;color:#1c1813;left:47.859%;top:86%;width:45%}
.pp-hs.pp-cf,.pp-hs.pp-cf:hover,.pp-hs.pp-cf:focus,.pp-hs.pp-cf:active{font-size:13px;line-height:1.35;letter-spacing:0}
.pp-hs.pp-cf-area,.pp-hs.pp-cf-area:hover,.pp-hs.pp-cf-area:focus{line-height:1.45}
.pp-cf:focus-visible{outline:1px solid rgba(28,24,19,.55);outline-offset:-1px}
.pp-cf-send:focus-visible{outline:1px solid rgba(28,24,19,.55);outline-offset:2px}
@media(max-width:760px){.pp-cf-status{left:6.154%;top:82%;width:88%}}

/* browser autofill must not repaint the field (it turned Email pale blue): keep the Figma cream */
.pp-cf:-webkit-autofill,.pp-cf:-webkit-autofill:hover,.pp-cf:-webkit-autofill:focus,.pp-cf:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #f0e5d1 inset!important;box-shadow:0 0 0 1000px #f0e5d1 inset!important;-webkit-text-fill-color:#1c1813!important;caret-color:#1c1813;transition:background-color 99999s ease-in-out 0s}
.pp-cf:autofill{box-shadow:0 0 0 1000px #f0e5d1 inset!important;-webkit-text-fill-color:#1c1813!important}

/* pressed state for baked-in buttons (desktop, fine pointer): dims while the mouse is down so people see the press. Reuse: give a hotspot type=submit/button and set --pr to its Figma corner radius. */
.pp-cf-send{--pr:6px}
.pp-connect-submit{--pr:3px}
.pp-cf-send,.pp-connect-submit{background-color:rgba(0,0,0,0);transition:background-color .14s ease}
@media(hover:hover) and (pointer:fine){
.pp-cf-send,.pp-connect-submit{border-radius:var(--pr)}
.pp-cf-send:active,.pp-connect-submit:active{background-color:rgba(0,0,0,.34);transition-duration:.05s}
}

/* Account: bleed sections, desktop/mobile-only sections, sign-in/create forms (real fields on the Figma field boxes) */
.pp-bleed{margin:0 -6px}
@media(max-width:760px){.pp-bleed{margin:0}.pp-only-d{display:none!important}}
@media(min-width:761px){.pp-only-m{display:none!important}}
.pp-tog-hide{display:none!important}
.pp-af{display:contents}
.pp-af-in{box-sizing:border-box;background:transparent;border:0;border-radius:6px;padding:0 14px;font:400 13px Inter,sans-serif;cursor:text;outline-offset:-1px}
.pp-hs.pp-af-in,.pp-hs.pp-af-in:hover,.pp-hs.pp-af-in:focus,.pp-hs.pp-af-in:active{font-size:13px;line-height:normal}
.pp-af-light{color:#1c1813}.pp-af-light::placeholder{color:rgba(117,109,101,.76);opacity:1}
.pp-af-dark{color:#f0e5d1}.pp-af-dark::placeholder{color:rgba(175,168,160,.9);opacity:1}
.pp-af-in:focus-visible{outline:1px solid rgba(208,150,47,.7)}
.pp-af-light:-webkit-autofill,.pp-af-light:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #ece2d3 inset!important;-webkit-text-fill-color:#1c1813!important}
.pp-af-dark:-webkit-autofill,.pp-af-dark:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #211d18 inset!important;-webkit-text-fill-color:#f0e5d1!important}
.pp-af-eye,.pp-af-stub,.pp-af-submit{cursor:pointer;background:transparent;border:0}
.pp-af-submit,.pp-press{--pr:6px}
.pp-main-c-apply{--pr:4px}
.pp-af-submit,.pp-press{background-color:rgba(0,0,0,0);transition:background-color .14s ease}
@media(hover:hover) and (pointer:fine){.pp-af-submit,.pp-press{border-radius:var(--pr)}.pp-af-submit:active,.pp-press:active{background-color:rgba(0,0,0,.34);transition-duration:.05s}}

/* Account tabs: real signed-in identity (js/account-auth.js) masking the baked "Alex" placeholder —
   background colors are sampled straight from the exported art, not guessed. Text is set by JS; these
   start empty so nothing ever flashes the fake defaults. */
.pp-acct-name,.pp-acct-email{display:flex;align-items:center;background:#e8e1d6;white-space:nowrap;overflow:visible}
.pp-acct-name{font:400 17px Inter,sans-serif;color:#17130f}
.pp-acct-email{font:400 13px Inter,sans-serif;color:#736b63}
@media(max-width:760px){.pp-acct-name{font-size:15px}.pp-acct-email{font-size:12px}}
/* Profile > Google row "Connected / DISCONNECT" (Figma art), shown only for accounts linked to Google */
.pp-gconn{background:url("../assets/products/account/states/gconn_d.webp") 0 0/100% 100% no-repeat;pointer-events:none;z-index:1}
.pp-gconn[hidden]{display:none}
.pp-profile-c-gcon[data-act="disconnect"]{left:39.25%;width:6.5%}
@media(max-width:760px){.pp-gconn{background-image:url("../assets/products/account/states/gconn_m.webp")}.pp-profile-c-gcon[data-act="disconnect"]{left:71.795%;width:19.487%}}
.pp-acct-empty{background:#e4dcd1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:24px;box-sizing:border-box}
.pp-acct-empty p{margin:0;font:500 15px Inter,sans-serif;color:#736b63}
.pp-acct-empty a{font:700 13px Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#a77934;text-decoration:underline;text-underline-offset:3px}

/* account: full-height stage (page stays big on desktop, never leaves an empty band under it; only the mobile layout swaps at 760px) */
.pp-fill{min-height:calc(100vh - 64px);overflow:hidden;container-type:inline-size}
.pp-fill .pp-stage{position:absolute;top:0;left:50%;width:max(100cqw,calc((100vh - 64px) * 1600 / 1022));aspect-ratio:1600/1022;transform:translateX(-50%)}
/* header sign-in pop-in (account icon) */
.hd-acct .pp-af{display:contents}
.hd-menu .pp-hs.pp-af-in,.hd-menu .pp-hs.pp-af-in:hover,.hd-menu .pp-hs.pp-af-in:focus{font-size:calc(13*var(--u));padding:0 calc(14*var(--u));border-radius:calc(6*var(--u))}

/* Account controls on the art: toggles (Figma ON art + OFF art), buttons, toast */
.pp-tg{background:transparent;border:0;padding:0;cursor:pointer}
.pp-tg img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;transition:opacity .15s ease;max-width:none}
.pp-tg .tg-off{opacity:0}.pp-tg[aria-checked="false"] .tg-off{opacity:1}.pp-tg[aria-checked="false"] .tg-on{opacity:0}
.tg-m{display:none}@media(max-width:760px){.tg-d{display:none}.tg-m{display:block}}
.pp-tg:focus-visible,.pp-ctl button:focus-visible{outline:1px solid rgba(28,24,19,.55);outline-offset:2px}
.pp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);z-index:500;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.32,.72,0,1),transform .5s cubic-bezier(.32,.72,0,1);max-width:calc(100vw - 32px);box-sizing:border-box}
.pp-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* Toast — Figma SITE CARDS v2 (2307:1041): dark pill in a glass rim, gold dot, optional cream link pill. */
.pp-toast-in{display:flex;align-items:center;gap:14px;padding:12px 20px 12px 18px;border-radius:999px;background:#1f1913;box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 18px 40px -12px rgba(0,0,0,.28);font:400 14px/1.4 Geist,system-ui,sans-serif;color:rgba(245,239,227,.9);text-align:left}
.pp-toast-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#d7a95d}
.pp-toast--act .pp-toast-in{padding:6px 6px 6px 18px}

@media(max-width:760px){.pp-ctl .pp-af-dark{color:#1c1813}.pp-ctl .pp-af-dark:-webkit-autofill,.pp-ctl .pp-af-dark:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #f2e9dd inset!important;-webkit-text-fill-color:#1c1813!important}}

/* buying flow (shop, cart, checkout, order complete) */
.pp-anchor{position:absolute;left:0;width:1px;height:1px;visibility:hidden;pointer-events:none}
.pp-section{position:relative}
.pp-af-plain{color:#1c1813}.pp-af-plain::placeholder{color:rgba(28,24,19,.48);opacity:1}
.pp-hs.pp-af-plain,.pp-hs.pp-af-plain:hover,.pp-hs.pp-af-plain:focus{font-size:12px;padding:0 12px;line-height:normal;border-radius:7px}
.pp-af-sel{appearance:none;-webkit-appearance:none;cursor:pointer}
.pp-af-plain:-webkit-autofill,.pp-af-plain:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:#1c1813!important}
.pp-chk{appearance:none;-webkit-appearance:none;border:1.5px solid transparent;border-radius:3px;cursor:pointer}
.pp-chk:checked{background:#c9982f;border-color:#c9982f}
.pp-chk:checked::after{content:"";position:absolute;left:32%;top:14%;width:26%;height:52%;border:solid #fffdf8;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pp-chk:focus-visible{outline:1px solid rgba(208,150,47,.8);outline-offset:2px}
.pp-hovbtn{background:transparent}
.pp-sort{display:contents}
.pp-sortmenu{position:absolute;z-index:6;opacity:0;pointer-events:none;transition:opacity .16s ease}
.pp-sort.is-open .pp-sortmenu{opacity:1;pointer-events:auto}
.pp-sort-art{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block}
.pp-sort-m{display:none}
@media(max-width:760px){.pp-sort-d{display:none}.pp-sort-m{display:block}}
.pp-sortopt{z-index:7;border-radius:0}
.pp-hs.pp-hovbtn:focus-visible,.pp-hs.pp-sortbtn:focus-visible{outline:1px solid rgba(208,150,47,.7)}
@media(max-width:760px){.pp-hs.hs-donly{display:none!important}}
@media(min-width:761px){.pp-hs.hs-monly{display:none!important}}
/* buttons: glow on hover, dim while pressed; the hotspot is cut to the visible button (radius from --pr) */
.pp-hs.pp-btn{border-radius:var(--pr,6px);background-color:rgba(0,0,0,0);transition:box-shadow .2s ease,background-color .14s ease}
@media(hover:hover) and (pointer:fine){
.pp-hs.pp-btn:hover,.pp-hs.pp-btn:focus-visible{box-shadow:0 0 0 1px rgba(255,222,150,.6),0 0 22px rgba(236,184,72,.6);background-color:rgba(255,240,200,.16);outline:0}
.pp-hs.pp-btn:active{background-color:rgba(0,0,0,.32);box-shadow:0 0 0 1px rgba(255,222,150,.35);transition-duration:.05s}}
.pp-hs.pp-af-plain:focus,.pp-hs.pp-af-plain:focus-visible{outline:0;box-shadow:none}
.pp-hs.pp-af-sel{background:transparent}
.pp-toast a{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:#f5efe3;color:#14100c;font:500 13px Geist,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.pp-toast.pp-toast--act{pointer-events:auto}
.pp-af-sel,.pp-hs.pp-af-sel{font-family:Inter,sans-serif;font-size:11.5px;color:#1c1813;line-height:20px;padding-top:0;padding-bottom:0}
.cart-badge{position:absolute;top:-3px;right:-5px;min-width:14px;height:14px;padding:0 3px;box-sizing:border-box;border-radius:7px;background:#2fb45a;color:#fff;font:700 9px/14px Inter,sans-serif;text-align:center;border:1.5px solid #0d0b08;pointer-events:none;z-index:3}

/* inputs on the art scale with the art (same size relative to the section at every window width) */
.pp-cq{container-type:inline-size}
.pp-cq .pp-hs.pp-af-plain,.pp-cq .pp-hs.pp-af-plain:hover,.pp-cq .pp-hs.pp-af-plain:focus,.pp-cq .pp-hs.pp-af-sel{font-size:.75cqw;line-height:normal;padding:0 .75cqw;border-radius:.5cqw}
@media(max-width:760px){.pp-cq .pp-hs.pp-af-plain,.pp-cq .pp-hs.pp-af-plain:hover,.pp-cq .pp-hs.pp-af-plain:focus,.pp-cq .pp-hs.pp-af-sel{font-size:3.3cqw;padding:0 3.1cqw;border-radius:2cqw}}

/* short pages fill the window: the cream page colour continues down to the footer instead of leaving an empty dark band */
.pp-has-spacer{min-height:100vh;min-height:100dvh}
.pp-page>.pp-spacer{flex:1 1 0;min-height:0}
.pp-page>.pp-spacer{margin-top:calc(var(--gap,0px)*-1)}
.pp-page>.pp-spacer{margin-top:calc(var(--gap,0px)*-1 - 2px);position:relative;z-index:0}

/* review form */
.pp-af-rv{color:#1c1813}.pp-af-rv::placeholder{color:rgba(28,24,19,.45);opacity:1}
.pp-af-area{resize:none;font-family:Inter,sans-serif;display:block}
.pp-cq .pp-hs.pp-af-rv,.pp-cq .pp-hs.pp-af-rv:hover,.pp-cq .pp-hs.pp-af-rv:focus{font-size:.88cqw;line-height:normal;padding:0 1.13cqw;border-radius:.6cqw;outline:0;box-shadow:none}
.pp-cq .pp-hs.pp-af-area{font-size:.94cqw;line-height:1.5;padding:1.13cqw}
.pp-hs.pp-opt:focus-visible{outline:1px solid rgba(28,24,19,.4);outline-offset:-2px}
@media(max-width:760px){.pp-cq .pp-hs.pp-af-rv,.pp-cq .pp-hs.pp-af-rv:hover,.pp-cq .pp-hs.pp-af-rv:focus{font-size:3.6cqw;padding:0 4.6cqw;border-radius:2cqw}.pp-cq .pp-hs.pp-af-area{font-size:3.4cqw;padding:4.6cqw}}
html,body{overflow-x:clip}
/* review page: sticky poster + right column with one message box per selected plug-in */
.pp-rv{display:flex;border-radius:12px;overflow:hidden;background:#0d0a08}
.pp-rv-left{flex:0 0 27.707%;position:relative;overflow:hidden}
.pp-rv-sticky{position:sticky;top:0;overflow:hidden}
.pp-rv-poster{display:block;max-width:none;width:110%;margin:-10.45% 0 0 -2.955%}
.pp-rv-poster-m{display:none}
.pp-rv-col{flex:1 1 0;min-width:0;container-type:inline-size;display:flex;flex-direction:column}
/* The review boxes zone takes up any height the poster column adds, so the form's rounded bottom (rbot) always
   ends level with the poster (a plain strip used to show below the corner when the poster was taller). */
.pp-rv-col>.pp-rv-zone{flex:1 0 auto}
.pp-rv-col>.pp-section{width:100%}
.pp-rv-zone{--u:calc(100cqw/1148);box-sizing:border-box;min-height:calc(332*var(--u));padding:calc(20*var(--u)) calc(56*var(--u)) calc(8*var(--u));background:#f6f0e6 url("../assets/products/review/states/paper_d.webp") top/100% auto repeat-y}
.pp-rv-label{margin:0 0 calc(12*var(--u));font:700 calc(10*var(--u))/calc(14*var(--u)) Inter,sans-serif;letter-spacing:calc(.9*var(--u));color:#11100e;text-transform:uppercase}
.pp-rv-empty,.pp-rv-box textarea{box-sizing:border-box;width:100%;border:1px solid rgba(17,16,14,.3);border-radius:calc(7*var(--u));background:#f6f1e7;font:400 calc(15*var(--u))/1.5 Inter,sans-serif;color:#11100e}
.pp-rv-empty{height:calc(286*var(--u));padding:calc(18*var(--u));color:#6e665c}
.pp-rv-empty[hidden]{display:none}
.pp-rv-box{margin-bottom:calc(30*var(--u))}
.pp-rv-box textarea{display:block;height:calc(190*var(--u));padding:calc(18*var(--u));resize:none;outline:0}
.pp-rv-box textarea::placeholder{color:#6e665c;opacity:1}
@media(max-width:760px){
.pp-rv{display:block;border-radius:0;background:transparent}
.pp-rv-left{flex:none;width:100%;margin-bottom:6px;overflow:hidden;background:#0d0a08}
.pp-rv-sticky{position:static}
.pp-rv-poster-d{display:none}
.pp-rv-poster-m{display:block;width:100%;margin:0}
.pp-rv-zone{--u:calc(100cqw/390);min-height:calc(298*var(--u));padding:calc(20*var(--u)) calc(24*var(--u)) calc(8*var(--u));background:#f6f0e6 url("../assets/products/review/states/paper_m.webp") top/100% auto repeat-y}
.pp-rv-label{font-size:calc(8.5*var(--u));line-height:calc(14*var(--u));letter-spacing:calc(.9*var(--u));margin-bottom:calc(12*var(--u))}
.pp-rv-empty,.pp-rv-box textarea{font-size:calc(13*var(--u));border-radius:calc(7*var(--u))}
.pp-rv-empty{height:calc(250*var(--u));padding:calc(16*var(--u))}
.pp-rv-box{margin-bottom:calc(24*var(--u))}
.pp-rv-box textarea{height:calc(170*var(--u));padding:calc(16*var(--u))}
}
.pp-rv-col{background:#f6f0e6}.pp-rv-zone{margin:-1px 0;position:relative}

/* real front-end cart (js/cart.js): items list + live subtotal/total, replacing the old baked sample */
.pp-spot{position:absolute}
/* Pay with Bitcoin page (Figma 2238:1072 / 2242:1103): live values in the Figma text styles (Inter; desktop 1600 / phone 390 design px as cqw) */
.pp-section:has(.pb-val){container-type:inline-size}
.pb-val{display:block;font-family:Inter,system-ui,sans-serif;color:#111;text-align:left;padding:0;margin:0;border:0;background:none}
.pb-amount{font-weight:700;font-size:1.25cqw;line-height:1.3;white-space:nowrap}
.pb-address{font-weight:500;font-size:.875cqw;line-height:1.2;word-break:break-all}
.pb-time{font-weight:500;font-size:.9375cqw;line-height:1.3;white-space:nowrap;cursor:default}.pb-time.go{color:#7b5620;text-decoration:underline;cursor:pointer}
.pb-copy{background:none;border:0;padding:0;cursor:pointer;border-radius:4px}.pb-copy:active{opacity:.5}
.pb-qr canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.pb-st{pointer-events:none;opacity:0;transition:opacity .2s}.pp-section img.pb-st{height:auto}.pb-st.on{opacity:1}
.pb-st.hs-monly{display:none}@media(max-width:760px){.pb-st.hs-monly{display:block}.pb-st.hs-donly{display:none}
.pb-amount{font-size:4.615cqw}.pb-address{font-size:3.333cqw}.pb-time{font-size:3.59cqw}}
.pp-paystate{pointer-events:none;opacity:0;transition:opacity .12s}.pp-section img.pp-paystate{height:auto}.pp-paystate.on{opacity:1}
.pp-paystate.hs-monly{display:none}@media(max-width:760px){.pp-paystate.hs-monly{display:block}.pp-paystate.hs-donly{display:none}}
.pp-cart-items-zone{background:#fbf8f2;border:1px solid rgba(217,207,194,.9);border-radius:10px;box-sizing:border-box;padding:0 calc(28*var(--cu,1px)) calc(16*var(--cu,1px));container-type:inline-size}
.pp-cart-items-zone{--cu:1px}
.pp-cart-row{display:flex;align-items:center;gap:3.2%;padding:3.4% 0;border-bottom:1px solid #ded4c9}
.pp-cart-row:last-child{border-bottom:0}
.pp-cart-thumb{width:17.4%;aspect-ratio:142/106;object-fit:cover;border-radius:6px;flex:none;background:#e9e2d6}
.pp-cart-info{flex:1 1 auto;min-width:0}
.pp-cart-name{margin:0 0 .35em;font:700 2.1cqw/1.2 Inter,sans-serif;color:#17130f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-cart-tag{margin:0 0 .3em;font:600 1.25cqw/1.3 Inter,sans-serif;letter-spacing:.06em;color:#a77934;text-transform:uppercase}
.pp-cart-formats{margin:0;font:600 1.25cqw/1.3 Inter,sans-serif;color:#736b63}
.pp-cart-price{flex:none;font:700 1.75cqw/1.2 Inter,sans-serif;color:#17130f;margin:0 1.5%}
.pp-cart-qty{flex:none;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;width:14.5%;aspect-ratio:118/42;background:url("../assets/products/cart/states/qtyD.webp") center/100% 100% no-repeat}
.pp-cart-minus,.pp-cart-plus{appearance:none;background:transparent;border:0;margin:0;padding:0;width:100%;height:100%;font:600 1.6cqw/1 Inter,sans-serif;color:#17130f;cursor:pointer}
.pp-cart-qtyval{grid-column:2;display:flex;align-items:center;justify-content:center;font:500 1.5cqw/1 Inter,sans-serif;color:#17130f}
.pp-cart-remove{flex:none;width:6%;aspect-ratio:1/1;background:url("../assets/products/cart/states/removeD.webp") center/70% no-repeat;border:0;cursor:pointer}
.pp-cart-value{font:700 18px Anton,sans-serif;color:#111216;background:#fbf8f2;display:block;line-height:1;text-align:right}
.pp-cart-value-total{font-size:23px}
.pp-cart-count{font:500 13px Inter,sans-serif;color:#132033;background:#fbf8f2;display:block;text-align:right;white-space:nowrap}
/* (old preview total box removed 2026-09-30: the real total now sits on the Figma value layer) */
@media(max-width:760px){
.pp-cart-row{flex-wrap:wrap;gap:2.5% 4%}
.pp-cart-thumb{width:27%}
.pp-cart-info{width:64%}
.pp-cart-name{font-size:4cqw}
.pp-cart-tag,.pp-cart-formats{font-size:2.6cqw}
.pp-cart-price{width:30%;order:3;margin:0;font-size:3.6cqw}
.pp-cart-qty{width:32%;order:4}
.pp-cart-minus,.pp-cart-plus{font-size:3.4cqw}
.pp-cart-qtyval{font-size:3.2cqw}
.pp-cart-remove{width:8%;order:5;margin-left:auto}
.pp-cart-value{font-size:13px}
.pp-cart-value-total{font-size:19px}
.pp-cart-count{font-size:10px}
}

/* checkout/checkout-failed order summary: real (but read-only) line items matching the live cart */
.pp-cart-mini-zone{overflow-y:auto;container-type:inline-size}
.pp-cart-mini-row{display:flex;align-items:center;gap:4.5%;padding:10px 0;border-bottom:1px solid #ded4c9}
.pp-cart-mini-row:last-child{border-bottom:0}
.pp-cart-mini-thumb{width:20.4%;aspect-ratio:94/76;object-fit:cover;border-radius:6px;flex:none;background:#e9e2d6}
.pp-cart-mini-info{flex:1 1 auto;min-width:0}
.pp-cart-mini-name{margin:0 0 .3em;font:700 3.9cqw/1.2 Inter,sans-serif;color:#17130f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-cart-mini-desc{margin:0;font:500 2.6cqw/1.3 Inter,sans-serif;color:#736b63}
.pp-cart-mini-price{flex:none;font:600 3.7cqw/1.2 Inter,sans-serif;color:#17130f}
.pp-cart-mini-empty{margin:0;padding:10px 0;font:500 13px Inter,sans-serif;color:#736b63}

/* Newsletter status line just below the JOIN THE LIST box (box bottom border at 79.8% desktop / 94.77% mobile of
   the footer art), lined up with the email field; never inside the box (was off-screen before).
   Field boxes from scripts/pages/shared.js form: d [1146,130,300,40] of 1588x250, m [38,360,244,34] of 390x430. */
#signup-form .signup__note{left:72.166%;width:22.4%;top:calc(79.8% + 8px);margin:0;color:#e2c699;font:500 12px/1.2 Inter,sans-serif;z-index:3;pointer-events:none}
@media(max-width:760px){#signup-form .signup__note{left:9.744%;width:80.5%;top:calc(94.77% + 5px);font-size:11px}}

/* Smooth first load (js/reveal.js): a section stays dark until the pictures you'd see in it are decoded,
   then fades in as one piece. html.vr is set in <head>; the animation is a CSS-only fallback that shows
   everything after 6 s even if the script never runs. vr-now = already cached: show without a fade. */
html.vr :is(.pp-header,.pp-section){opacity:.001;transition:opacity .45s ease;animation:vr-failsafe 0s linear 6s forwards}
html.vr :is(.pp-header,.pp-section).vr-in{opacity:1;animation:none}
html.vr :is(.pp-header,.pp-section).vr-now{transition:none}
@keyframes vr-failsafe{to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.vr :is(.pp-header,.pp-section){transition:none}}
html.vr.vr-js :is(.pp-header,.pp-section):not(.vr-in){animation:none}
/* (.001 not 0: the browser still paints a waiting section in the background — same trick as the .005 variants —
   so large art is fully painted before the fade instead of appearing tile by tile) */

/* 7-DAY TRIAL hero buttons (Figma "7 days trial (…)" art, 2026-09-29): the art has no separate hover version, so the
   hover picture is the same plate, shown slightly brighter — like the old 15-day hover, which was the same plate lifted. */
.pp-hs .st-hov[src*="trial7_hov"]{filter:brightness(1.16) saturate(1.05)}
/* Confirmation card — Figma PROPOSAL / SITE CARDS v2 (2307:1041), approved 2026-10-02 ("editorial luxury"):
   double-bezel shell (glass rim + cream core), Instrument Serif title with the last word in italic, Geist text,
   Geist Mono codes, dark pill button with a nested arrow circle, red variant for destructive cards.
   Easing cubic-bezier(.32,.72,0,1); only transform/opacity/filter animate; reduced motion = fades only. */
.vc-scrim{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(11,9,7,.56);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .5s cubic-bezier(.32,.72,0,1);padding:16px;box-sizing:border-box}
.vc-scrim.is-on{opacity:1}
.vc-shell{box-sizing:border-box;width:496px;max-width:100%;max-height:100%;display:flex;padding:7px;border-radius:30px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transform:translateY(20px);filter:blur(6px);opacity:0;transition:transform .7s cubic-bezier(.32,.72,0,1),filter .7s cubic-bezier(.32,.72,0,1),opacity .5s cubic-bezier(.32,.72,0,1)}
.vc-scrim.is-on .vc-shell{transform:none;filter:none;opacity:1}
.vc-card{box-sizing:border-box;width:100%;max-height:calc(100dvh - 46px);overflow:auto;overscroll-behavior:contain;border-radius:24px;padding:40px 44px 38px;text-align:left;font-family:Geist,system-ui,sans-serif;color:#14100c;
  background:radial-gradient(120% 90% at 100% 0%,rgba(215,169,93,.10),rgba(215,169,93,0) 60%),#f5efe3;box-shadow:inset 0 1px 1px rgba(255,255,255,.7)}
.vc-head{display:flex;align-items:center;gap:12px}
.vc-badge{flex:none;width:44px;height:44px;border-radius:50%;border:1.25px solid rgba(138,100,36,.9);display:grid;place-items:center;box-sizing:border-box;font:300 18px Geist,system-ui,sans-serif;color:#8a6424}
.vc-eyebrow{margin:0;padding:4px 10px;border-radius:999px;background:rgba(138,100,36,.1);font:500 10px/1.3 Geist,system-ui,sans-serif;letter-spacing:.22em;color:#8a6424;text-transform:uppercase}
.vc-danger .vc-eyebrow{background:rgba(179,38,30,.1);color:#b3261e}
.vc-title{margin:20px 0 0;font:400 44px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;color:#14100c;text-wrap:balance}
.vc-title em{font-style:italic}
.vc-sub{margin:12px 0 0;font:400 16px/1.45 Geist,system-ui,sans-serif;color:rgba(20,16,12,.82);overflow-wrap:anywhere}
.vc-body{margin:10px 0 0;font:400 14px/1.55 Geist,system-ui,sans-serif;color:rgba(20,16,12,.62);white-space:pre-line;overflow-wrap:anywhere}
.vc-codes{margin-top:18px;padding:6px 18px;border-radius:16px;background:rgba(20,16,12,.04);border:1px solid rgba(20,16,12,.07)}
.vc-code{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-top:1px solid rgba(20,16,12,.07)}
.vc-code:first-child{border-top:0}
.vc-code-n{font:400 13px Geist,system-ui,sans-serif;color:rgba(20,16,12,.75)}
.vc-code-k{font:400 13px 'Geist Mono',ui-monospace,monospace;color:#14100c;letter-spacing:.02em;user-select:all}
.vc-codes+.vc-body{margin-top:14px}
.vc-form{width:100%}
.vc-label{display:block;margin:18px 0 8px;font:500 10px Geist,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(20,16,12,.55)}
.vc-field{display:block;padding:4px;border-radius:999px;background:rgba(20,16,12,.04);border:1px solid rgba(20,16,12,.08);transition:border-color .4s cubic-bezier(.32,.72,0,1)}
.vc-field:focus-within{border-color:rgba(138,100,36,.45)}
.vc-input{box-sizing:border-box;display:block;width:100%;height:46px;margin:0;padding:0 18px;border:0;border-radius:999px;background:#fffdf8;font:400 15px Geist,system-ui,sans-serif;color:#14100c;outline:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.9)}
.vc-input::placeholder{color:rgba(20,16,12,.38);opacity:1}
/* Autofill (yellow) + square focus ring inside the round field: keep the field's colours. */
.vc-input:-webkit-autofill,.vc-input:-webkit-autofill:hover,.vc-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fffdf8 inset!important;box-shadow:0 0 0 1000px #fffdf8 inset!important;-webkit-text-fill-color:#14100c!important;caret-color:#14100c;transition:background-color 99999s}
.vc-input:autofill{background:#fffdf8!important}
.vc-input,.vc-input:focus,.vc-input:focus-visible{outline:none!important}
.vc-input:disabled{opacity:.7}
.vc-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:28px}
.vc-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 4px 0 23px;border:0;border-radius:999px;background:#14100c;color:#f5efe3;font:500 14px Geist,system-ui,sans-serif;cursor:pointer;transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s}
.vc-danger .vc-btn{background:#b3261e}
.vc-arrow{width:38px;height:38px;border-radius:50%;background:rgba(245,239,227,.12);display:grid;place-items:center;font:400 14px Geist,system-ui,sans-serif;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.vc-btn:hover .vc-arrow{transform:translate(2px,-1px) scale(1.05)}
.vc-btn:active{transform:scale(.98)}
.vc-btn:disabled{opacity:.6;cursor:default;transform:none}
.vc-btn2{padding:0;border:0;background:none;font:500 13px Geist,system-ui,sans-serif;color:rgba(20,16,12,.7);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .3s}
.vc-btn2:hover{color:#14100c}
.vc-btn2:disabled{opacity:.5;cursor:default}
@media (max-width:760px){
  .vc-shell{width:360px;padding:6px;border-radius:30px}
  .vc-card{padding:26px 26px 24px;max-height:calc(100dvh - 44px)}
  .vc-badge{width:36px;height:36px;font-size:16px}
  .vc-title{margin-top:16px;font-size:34px}
  .vc-sub{margin-top:10px;font-size:15px}
  .vc-code{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0}
  .vc-actions{margin-top:22px}
  .vc-btn{height:44px;padding-left:22px}
  .vc-arrow{width:36px;height:36px}
  .vc-input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.vc-shell{transform:none;filter:none}.vc-btn,.vc-arrow{transition:none}}

/* Shop: live prices on the product cards (Figma price layer values: Inter Bold 14/13/15 desktop, 11.5/11/12 phone;
   ink #17130f on cards, cream on bundle art). Sized in container units so they scale with the art. */
.pp-live-price{display:block;font-family:Inter,system-ui,sans-serif;font-weight:700;line-height:normal;color:#17130f;white-space:nowrap}
/* Sale price (Figma 2229:1072, variant B): old price struck through + red saving tag. Sizes in em from the Figma values
   (price 13 · old price Inter Medium 11 @45% · tag Inter Bold 10 on #B3261E, radius 3, padding 2/6 · gaps 8), so they follow every price size. */
.lp-was{font-weight:500;font-size:.846em;opacity:.45;text-decoration:line-through;text-decoration-thickness:.08em;margin-left:.615em}
.lp-off{display:inline-block;font-weight:700;font-size:.769em;line-height:1.25;color:#fff;background:#b3261e;border-radius:.3em;padding:.15em .46em;margin-left:.615em;vertical-align:.1em;text-decoration:none}
.lp-sub{display:block;margin-top:.3em;font-size:.8em;white-space:nowrap}.lp-sub .lp-was{margin-left:0}
.pp-lp-c{font-size:.875cqw}.pp-lp-o{font-size:.8125cqw}.pp-lp-b{font-size:.9375cqw;color:#f8f3eb}
@media(max-width:760px){.pp-lp-c{font-size:2.949cqw}.pp-lp-o{font-size:2.821cqw}.pp-lp-b{font-size:3.077cqw;color:#fff}}
/* Cart thumbnails keep the plugin picture's true shape (the general ".pp-section img" rule stretched them). */
.pp-section img.pp-cart-thumb,.pp-section img.pp-cart-mini-thumb{height:auto;object-fit:contain;background:transparent}
/* Cart list: grows with the items up to the space above "Continue shopping", then scrolls (any number of items). */
.pp-cart-items-zone{max-height:61.68%;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:760px){.pp-cart-items-zone{max-height:36.45%}}

/* Order complete: the real order's values on the Figma value layers (Inter Medium 15 / Bold total; phone 12.5). */
.pp-section:has(.pp-order-val){container-type:inline-size}
.pp-order-val{display:block;text-align:right;font:500 .9375cqw/1.4667 Inter,system-ui,sans-serif;color:#20242a;white-space:nowrap}
.pp-order-total{font-weight:700}
@media(max-width:760px){.pp-order-val{font-size:3.205cqw;line-height:1.76;color:#22272d}}

/* Account > Orders: live data on the Figma layout (stat values Anton 25/18; rows 86px / phone 112px cards). */
.pp-section:has(.pp-orows){container-type:inline-size;--u:calc(100cqw / 1600)}
@media(max-width:760px){.pp-section:has(.pp-orows){--u:calc(100cqw / 390)}}
.pp-ostat{display:block;font:400 calc(25 * var(--u))/1.36 Anton,Impact,sans-serif;color:#19150f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-orows{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:calc(12 * var(--u))}
.pp-orow{position:relative;flex:none;height:calc(86 * var(--u));box-sizing:border-box;background:#f7f2ea;border:1px solid rgba(207,196,181,.42);border-radius:calc(8 * var(--u));font-family:Inter,system-ui,sans-serif}
.pp-orow>*{position:absolute;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-orow .od{left:calc(22 * var(--u));top:calc(20 * var(--u));font:500 calc(11 * var(--u))/1.6 Inter,sans-serif;color:#625a52;text-transform:uppercase}
.pp-orow .on{left:calc(205 * var(--u));top:calc(20 * var(--u));font:500 calc(11 * var(--u))/1.6 Inter,sans-serif;color:#28231e;width:calc(200 * var(--u))}
.pp-orow .oi{left:calc(420 * var(--u));top:calc(18 * var(--u));font:400 calc(16 * var(--u))/1.35 Inter,sans-serif;color:#19150f;width:calc(430 * var(--u))}
.pp-orow .os{left:calc(870 * var(--u));top:calc(20 * var(--u));font:700 calc(11 * var(--u))/1.6 Inter,sans-serif;letter-spacing:calc(1.2 * var(--u));color:#9a7547}
.pp-orow .oa{left:calc(1040 * var(--u));top:calc(18 * var(--u));font:700 calc(17 * var(--u))/1.35 Inter,sans-serif;color:#19150f}
.pp-orow .or{left:calc(1249 * var(--u));top:calc(22 * var(--u));width:calc(201 * var(--u));height:calc(35 * var(--u));display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:#f2e9dd;border:1px solid rgba(210,197,178,.6);border-radius:calc(6 * var(--u));font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#1a1510;text-decoration:none;transition:filter .15s}
.pp-orow .or:hover{filter:brightness(.97)}.pp-orow .or:active{filter:brightness(.92)}
.pp-orow.empty{display:flex;align-items:center;gap:calc(16 * var(--u));padding:0 calc(22 * var(--u))}
.pp-orow.empty>*{position:static}
.pp-orow.empty p{font:400 calc(16 * var(--u)) Inter,sans-serif;color:#19150f}
.pp-orow.empty a{font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#9a7547}
@media(max-width:760px){
  .pp-ostat{font-size:calc(18 * var(--u));line-height:1.5}
  .pp-orow{height:calc(112 * var(--u));background:#f3ece3;border-color:rgba(207,195,180,.7);border-radius:calc(9 * var(--u))}
  .pp-orow .on{left:calc(16 * var(--u));top:calc(15 * var(--u));font:700 calc(12 * var(--u))/1.25 Inter,sans-serif;color:#17130f;width:calc(200 * var(--u))}
  .pp-orow .od{left:calc(16 * var(--u));top:calc(37 * var(--u));font:400 calc(11 * var(--u))/1.2 Inter,sans-serif;color:#6b6258;text-transform:none}
  .pp-orow .oi{left:calc(16 * var(--u));top:calc(62 * var(--u));font:400 calc(11 * var(--u))/1.2 Inter,sans-serif;color:#514a43;width:calc(200 * var(--u))}
  .pp-orow .os{display:none}
  .pp-orow .oa{left:auto;right:calc(16 * var(--u));top:calc(18 * var(--u));font-size:calc(15 * var(--u));text-align:right}
  .pp-orow .or{left:calc(236 * var(--u));top:calc(62 * var(--u));width:calc(90 * var(--u));height:calc(34 * var(--u));border-radius:calc(7 * var(--u));font-size:calc(10 * var(--u));letter-spacing:calc(1 * var(--u))}
  .pp-orow .or .long{display:none}
  .pp-orow.empty p{font-size:calc(13 * var(--u))}.pp-orow.empty a{font-size:calc(10 * var(--u))}
}

/* Account > Products: owned plug-ins on the Figma row design (desktop 1563:554: 138px card; phone 1580:573: 222px). */
.pp-section:has(.pp-prows){container-type:inline-size;--u:calc(100cqw / 1600)}
@media(max-width:760px){.pp-section:has(.pp-prows){--u:calc(100cqw / 390)}}
.pp-prows{overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.pp-prow{position:relative;flex:none;height:calc(138 * var(--u));box-sizing:border-box;background:#f7f2ea;border:1px solid rgba(207,196,181,.5);border-radius:calc(9 * var(--u));font-family:Inter,system-ui,sans-serif}
.pp-prow>*{position:absolute;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-prow .pi{left:calc(20 * var(--u));top:calc(19 * var(--u));width:calc(172 * var(--u));height:calc(100 * var(--u));box-sizing:border-box;background:#ede3d5;border:1px solid rgba(216,203,186,.32);border-radius:calc(7 * var(--u));display:flex;align-items:center;justify-content:center}
.pp-prow .pi img{max-width:calc(148 * var(--u));max-height:calc(80 * var(--u));object-fit:contain;border-radius:calc(4 * var(--u))}
.pp-prow .pt{left:calc(218 * var(--u));top:calc(24 * var(--u));font:500 calc(20 * var(--u))/1.35 Inter,sans-serif;color:#19150f;max-width:calc(620 * var(--u))}
.pp-prow .pv{left:calc(218 * var(--u));top:calc(54 * var(--u));font:700 calc(11 * var(--u))/1.6 Inter,sans-serif;letter-spacing:calc(1.3 * var(--u));color:#9b815f;text-transform:uppercase;max-width:calc(620 * var(--u))}
.pp-prow .pm{left:calc(218 * var(--u));top:calc(80 * var(--u));font:400 calc(12 * var(--u))/1.5 Inter,sans-serif;color:#4b443d}
.pp-prow .ps{left:calc(880 * var(--u));top:calc(31 * var(--u));font:700 calc(11 * var(--u))/1.6 Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#9a7547}
.pp-prow .pd{left:calc(1040 * var(--u));top:calc(20 * var(--u));width:calc(167 * var(--u));height:calc(49 * var(--u));box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#e8c47d;border:1px solid rgba(196,154,83,.6);border-radius:calc(7 * var(--u));font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#1a1510;opacity:.55;cursor:default}
.pp-prow .pp{left:calc(1050 * var(--u));top:calc(73 * var(--u));font:500 calc(11 * var(--u))/1.6 Inter,sans-serif;color:#6a625a}
.pp-prow.empty{display:flex;align-items:center;gap:calc(16 * var(--u));padding:0 calc(22 * var(--u));height:calc(86 * var(--u))}
.pp-prow.empty>*{position:static}
.pp-prow.empty p{font:400 calc(16 * var(--u)) Inter,sans-serif;color:#19150f}
.pp-prow.empty a{font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#9a7547}
@media(max-width:760px){
  .pp-prow{height:calc(222 * var(--u));background:#f3ece3;border-color:rgba(207,195,180,.7);border-radius:calc(10 * var(--u))}
  .pp-prow .pi{left:calc(16 * var(--u));top:calc(18 * var(--u));width:calc(116 * var(--u));height:calc(59 * var(--u));background:none;border:0;border-radius:calc(5 * var(--u));overflow:hidden}
  .pp-prow .pi img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;border-radius:0}
  .pp-prow .pt{left:calc(148 * var(--u));top:calc(18 * var(--u));font:700 calc(18 * var(--u))/1.2 Inter,sans-serif;color:#17130f;max-width:calc(178 * var(--u))}
  .pp-prow .pv{left:calc(148 * var(--u));top:calc(46 * var(--u));font:500 calc(10 * var(--u))/1.2 Inter,sans-serif;letter-spacing:calc(1 * var(--u));color:#9a7547;max-width:calc(178 * var(--u))}
  .pp-prow .ps{left:calc(148 * var(--u));top:calc(70 * var(--u));width:calc(56 * var(--u));height:calc(24 * var(--u));box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#e7d5b8;border:1px solid rgba(200,165,111,.7);border-radius:calc(6 * var(--u));font:700 calc(9 * var(--u)) Inter,sans-serif;letter-spacing:calc(1 * var(--u));color:#7e5b2f}
  .pp-prow .pm{left:calc(16 * var(--u));top:calc(98 * var(--u));font:400 calc(12 * var(--u))/1.25 Inter,sans-serif;color:#514a43}
  .pp-prow .pp{left:calc(16 * var(--u));top:calc(120 * var(--u));font:400 calc(11 * var(--u))/1.2 Inter,sans-serif;color:#6b6258}
  .pp-prow .pl{left:calc(16 * var(--u));right:calc(16 * var(--u));top:calc(147 * var(--u));border-top:1px solid rgba(201,190,176,.7)}
  .pp-prow .pd{left:calc(16 * var(--u));top:calc(164 * var(--u));width:calc(126 * var(--u));height:calc(38 * var(--u));font-size:calc(10 * var(--u));letter-spacing:calc(1 * var(--u))}
  .pp-prow.empty{height:calc(86 * var(--u))}.pp-prow.empty p{font-size:calc(13 * var(--u))}.pp-prow.empty a{font-size:calc(10 * var(--u))}
}
@media(min-width:761px){.pp-prow .pl{display:none}}
/* Account > Offers (live): hero text on the Figma hero (1552:326 / 1580:618) + recommended cards from api/my-offers.php */
.pp-section:has(.pp-ocards){container-type:inline-size;--u:calc(100cqw / 1600)}
@media(max-width:760px){.pp-section:has(.pp-ocards){--u:calc(100cqw / 390)}}
.pp-ohero>*{position:absolute;left:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pp-ohero .oe{top:calc(6 * var(--u));font:700 calc(12 * var(--u))/1.25 Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#e6bb67}
.pp-ohero .ot{top:calc(39 * var(--u));width:calc(760 * var(--u));font:400 calc(36 * var(--u))/1.42 Anton,Impact,sans-serif;color:#f5efe5}
.pp-ohero .ob{top:calc(96 * var(--u));width:calc(760 * var(--u));font:400 calc(18 * var(--u))/1.35 Inter,sans-serif;color:#e6ded4}
.pp-ohero .oc{top:calc(148 * var(--u));width:calc(170 * var(--u));height:calc(45 * var(--u));box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#e8c47d;border:1px solid rgba(196,154,83,.6);border-radius:calc(7 * var(--u));font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.5 * var(--u));color:#19140f;text-decoration:none;transition:filter .15s}
.pp-ohero .oc:hover,.pp-ocard .cb:hover{filter:brightness(1.06)}.pp-ohero .oc:active,.pp-ocard .cb:active{filter:brightness(.92)}
.pp-ocards{display:flex;gap:calc(20 * var(--u))}
.pp-ocard{position:relative;flex:none;width:calc(489 * var(--u));height:calc(228 * var(--u));box-sizing:border-box;background:#f7f2ea;border:1px solid rgba(207,196,181,.52);border-radius:calc(9 * var(--u));font-family:Inter,system-ui,sans-serif}
.pp-ocard>*{position:absolute;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-ocard .ci{left:calc(20 * var(--u));top:calc(22 * var(--u));width:calc(176 * var(--u));height:calc(160 * var(--u));box-sizing:border-box;background:#ede3d5;border:1px solid #d8cbba;border-radius:calc(7 * var(--u));display:flex;align-items:center;justify-content:center}
.pp-section .pp-ocard .ci img{width:auto;height:auto;max-width:calc(156 * var(--u));max-height:calc(140 * var(--u));object-fit:contain;border-radius:calc(4 * var(--u))}
.pp-ocard .cn{left:calc(220 * var(--u));top:calc(28 * var(--u));width:calc(245 * var(--u));font:600 calc(18 * var(--u))/1.35 Inter,sans-serif;color:#19150f}
.pp-ocard .cd{left:calc(220 * var(--u));top:calc(61 * var(--u));width:calc(245 * var(--u));font:400 calc(13 * var(--u))/1.38 Inter,sans-serif;color:#3e3832;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pp-ocard .cp{left:calc(220 * var(--u));top:calc(118 * var(--u));display:flex;align-items:baseline;gap:calc(12 * var(--u))}
.pp-ocard .now{font:400 calc(20 * var(--u))/1.35 Anton,Impact,sans-serif;color:#17130f}
.pp-ocard .was{font:400 calc(14 * var(--u))/1.35 Inter,sans-serif;color:#6f675e}
.pp-ocard .cb{left:calc(286 * var(--u));top:calc(161 * var(--u));width:calc(112 * var(--u));height:calc(41 * var(--u));box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#e8c47d;border:1px solid rgba(196,154,83,.6);border-radius:calc(7 * var(--u));font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.5 * var(--u));color:#19140f;text-decoration:none;transition:filter .15s}
.pp-ocard.empty{width:100%;height:calc(86 * var(--u));display:flex;align-items:center;gap:calc(16 * var(--u));padding:0 calc(22 * var(--u))}
.pp-ocard.empty>*{position:static}
.pp-ocard.empty p{font:400 calc(16 * var(--u)) Inter,sans-serif;color:#19150f}
.pp-ocard.empty a{font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#9a7547}
@media(max-width:760px){
  .pp-ohero .oe{top:calc(6 * var(--u));font-size:calc(10 * var(--u));letter-spacing:calc(1 * var(--u));color:#d7b171}
  .pp-ohero .ot{top:calc(32 * var(--u));width:calc(300 * var(--u));font-size:calc(24 * var(--u));line-height:1.5;color:#f6eee4}
  .pp-ohero .ob{top:calc(70 * var(--u));width:calc(300 * var(--u));font-size:calc(13 * var(--u));line-height:calc(18 * var(--u));white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#d9cec1}
  .pp-ohero .oc{top:calc(134 * var(--u));width:calc(152 * var(--u));height:calc(40 * var(--u));font-size:calc(10 * var(--u));letter-spacing:calc(1 * var(--u))}
  .pp-ocards{flex-direction:column;gap:calc(16 * var(--u))}
  .pp-ocard{width:100%;height:calc(178 * var(--u));background:#f3ece3;border-color:rgba(207,195,180,.7);border-radius:calc(10 * var(--u))}
  .pp-ocard .ci{left:calc(16 * var(--u));top:calc(18 * var(--u));width:calc(102 * var(--u));height:calc(52 * var(--u));background:none;border:0;border-radius:calc(5 * var(--u));overflow:hidden}
  .pp-section .pp-ocard .ci img{max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;border-radius:0}
  .pp-ocard .cn{left:calc(132 * var(--u));top:calc(16 * var(--u));width:calc(192 * var(--u));font:700 calc(15 * var(--u))/1.2 Inter,sans-serif;color:#17130f}
  .pp-ocard .cd{left:calc(132 * var(--u));top:calc(40 * var(--u));width:calc(192 * var(--u));font-size:calc(11 * var(--u));line-height:calc(15 * var(--u));color:#514a43}
  .pp-ocard .cp{left:calc(16 * var(--u));top:calc(90 * var(--u))}
  .pp-ocard .now{font-size:calc(18 * var(--u))}.pp-ocard .was{font-size:calc(11 * var(--u));color:#6b6258}
  .pp-ocard .cb{left:calc(16 * var(--u));top:calc(124 * var(--u));width:calc(310 * var(--u));height:calc(38 * var(--u));font-size:calc(10 * var(--u));letter-spacing:calc(1 * var(--u))}
  .pp-ocard.empty{height:calc(86 * var(--u))}.pp-ocard.empty p{font-size:calc(13 * var(--u))}.pp-ocard.empty a{font-size:calc(10 * var(--u))}
}
/* Account > Licences (live): stats, machines, slot title on licences.webp (Figma 1563:596 / 1580:758), filled from api/my-licences.php */
.pp-section:has(.pp-lmachines){container-type:inline-size;--u:calc(100cqw / 1600)}
@media(max-width:760px){.pp-section:has(.pp-lmachines){--u:calc(100cqw / 390)}}
.pp-lstat{display:block;font:400 calc(25 * var(--u))/1.36 Anton,Impact,sans-serif;color:#19150f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-lstat-b{display:block;font:400 calc(11 * var(--u))/1.6 Inter,sans-serif;color:#625a52;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-lslot{display:block;font:500 calc(17 * var(--u))/1.35 Inter,sans-serif;color:#302a24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-lmachines{display:flex;gap:calc(60.5 * var(--u))}
.pp-lmachines.three{gap:calc(20 * var(--u))}
.pp-lmachine{position:relative;flex:0 0 calc((100% - 60.5 * var(--u)) / 2);height:100%;box-sizing:border-box;background:#f7f2ea;border:1px solid rgba(207,196,181,.48);border-radius:calc(9 * var(--u));font-family:Inter,system-ui,sans-serif}
.pp-lmachines.three .pp-lmachine{flex-basis:calc((100% - 40 * var(--u)) / 3)}
.pp-lmachine>*{position:absolute;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-lmachine .mt{left:calc(24 * var(--u));top:calc(24 * var(--u));max-width:calc(100% - 300 * var(--u));font:400 calc(20 * var(--u))/1.35 Anton,Impact,sans-serif;color:#19150f}
.pp-lmachine .ms{left:calc(24 * var(--u));top:calc(56 * var(--u));right:calc(24 * var(--u));font:400 calc(12 * var(--u))/1.5 Inter,sans-serif;color:#5e564e}
.pp-lmachine .mst{left:calc(24 * var(--u));top:calc(96 * var(--u));font:700 calc(11 * var(--u))/1.6 Inter,sans-serif;letter-spacing:calc(1.2 * var(--u));color:#9a7547}
.pp-lmachine .mc,.pp-lmachine .md{top:calc(45 * var(--u));width:calc(125 * var(--u));height:calc(35 * var(--u));box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0;border-radius:calc(6 * var(--u));font:700 calc(11 * var(--u)) Inter,sans-serif;letter-spacing:calc(1.4 * var(--u));color:#1a1510;cursor:pointer;transition:filter .15s}
.pp-lmachine .md{right:calc(61 * var(--u));background:#f2e9dd;border:1px solid rgba(210,197,178,.6)}
.pp-lmachine .mc{right:calc(201 * var(--u));background:#e8c47d;border:1px solid rgba(196,154,83,.6)}
.pp-lmachines.three .pp-lmachine .md{right:calc(20 * var(--u))}.pp-lmachines.three .pp-lmachine .mc{right:calc(155 * var(--u))}
.pp-lmachines.three .pp-lmachine .mt{max-width:calc(100% - 44 * var(--u));top:calc(90 * var(--u))}
.pp-lmachines.three .pp-lmachine .ms{top:calc(120 * var(--u))}.pp-lmachines.three .pp-lmachine .mst{display:none}
.pp-lmachine .md.is-locked{opacity:.55}
.pp-lmachine .mc:hover,.pp-lmachine .md:hover{filter:brightness(.97)}.pp-lmachine .mc:active,.pp-lmachine .md:active{filter:brightness(.92)}
.pp-lmachine.empty{flex-basis:100%;display:flex;align-items:center;padding:0 calc(24 * var(--u))}
.pp-lmachine.empty>*{position:static}
.pp-lmachine.empty p{font:400 calc(16 * var(--u))/1.4 Inter,sans-serif;color:#19150f;white-space:normal}
@media(max-width:760px){
  .pp-lstat{font-size:calc(18 * var(--u));line-height:1.5;color:#17130f}
  .pp-lstat-b{display:none}
  .pp-lslot{font:700 calc(15 * var(--u))/1.2 Inter,sans-serif;color:#17130f}
  .pp-lmachines,.pp-lmachines.three{flex-direction:column;gap:calc(12 * var(--u));overflow-y:auto;overscroll-behavior:contain}
  .pp-lmachine,.pp-lmachines.three .pp-lmachine{flex:none;height:calc(86 * var(--u));background:#f3ece3;border-color:rgba(207,195,180,.7)}
  .pp-lmachine .mt,.pp-lmachines.three .pp-lmachine .mt{left:calc(16 * var(--u));top:calc(16 * var(--u));max-width:calc(128 * var(--u));font:700 calc(15 * var(--u))/1.2 Inter,sans-serif;color:#17130f}
  .pp-lmachine .ms,.pp-lmachines.three .pp-lmachine .ms{left:calc(16 * var(--u));top:calc(42 * var(--u));right:auto;max-width:calc(130 * var(--u));font-size:calc(11 * var(--u));line-height:1.2;color:#6b6258}
  .pp-lmachine .mst{display:none}
  .pp-lmachine .mc,.pp-lmachine .md,.pp-lmachines.three .pp-lmachine .mc,.pp-lmachines.three .pp-lmachine .md{top:calc(25 * var(--u));height:calc(36 * var(--u));border-radius:calc(7 * var(--u));font-size:calc(10 * var(--u));letter-spacing:calc(1 * var(--u))}
  .pp-lmachine .md,.pp-lmachines.three .pp-lmachine .md{right:calc(16 * var(--u));width:calc(100 * var(--u))}
  .pp-lmachine .mc,.pp-lmachines.three .pp-lmachine .mc{right:calc(124 * var(--u));width:calc(66 * var(--u))}
  .pp-lmachine.empty{height:auto;min-height:calc(86 * var(--u));padding:calc(14 * var(--u)) calc(16 * var(--u))}.pp-lmachine.empty p{font-size:calc(13 * var(--u))}
}
/* Downloads page, signed in: the Owned downloads card's list (Figma card text: body Inter 14/145% #e2c699, links Inter Bold 11 +0.5 #ebd6b2) */
.pp-section:has(.pp-dl){container-type:inline-size;--u:calc(100cqw / 1588)}
@media(max-width:760px){.pp-section:has(.pp-dl){--u:calc(100cqw / 390)}}
.pp-dl{overflow:hidden}
.pp-dl .dl-bg{position:absolute;inset:0;background:url(../assets/products/downloads/desktop/owned_in.webp) 0 0/100% 100% no-repeat}
.pp-dl .dl-in{position:absolute;inset:0;box-sizing:border-box;padding:calc(8 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));display:flex;flex-direction:column}
.pp-dl .dl-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:calc(9 * var(--u));padding:calc(2 * var(--u)) 0 calc(6 * var(--u));scrollbar-width:thin;scrollbar-color:rgba(235,214,178,.45) transparent;-webkit-overflow-scrolling:touch}
.pp-dl .dl-list::-webkit-scrollbar{width:4px}.pp-dl .dl-list::-webkit-scrollbar-thumb{background:rgba(235,214,178,.45);border-radius:2px}
.pp-dl .dl-list.fade{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent)}
.pp-dl .dl-list.fadetop{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%);mask-image:linear-gradient(to bottom,transparent,#000 28%)}
.pp-dl .dl-list.fade.fadetop{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent)}
.pp-dl .dl-b{margin:0 0 calc(7 * var(--u));font:400 calc(14 * var(--u))/1.45 Inter,system-ui,sans-serif;color:#e2c699}
.pp-dl .dl-r{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:calc(14 * var(--u));row-gap:calc(3 * var(--u))}
.pp-dl .dl-a{font:700 calc(11 * var(--u))/1.2 Inter,system-ui,sans-serif;letter-spacing:calc(.5 * var(--u));color:#ebd6b2;text-decoration:none;white-space:nowrap;transition:color .15s}
.pp-dl a.dl-a:hover{color:#fff4dd}.pp-dl .dl-off{opacity:.6}
.pp-dl .dl-n{font:400 calc(12 * var(--u))/1.2 Inter,system-ui,sans-serif;color:#e2c699;opacity:.85}
@media(max-width:760px){
  .pp-dl .dl-bg{background-image:url(../assets/products/downloads/mobile/owned_in.webp)}
  .pp-dl .dl-in{padding:calc(6 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u))}
  .pp-dl .dl-list{gap:calc(8 * var(--u))}
  .pp-dl .dl-b{margin-bottom:calc(4 * var(--u))}
  .pp-dl .dl-r{flex-direction:column;align-items:flex-start}
}
/* Account > Products: DOWNLOAD is a real link once the installer is uploaded */
.pp-prow a.pd{opacity:1;cursor:pointer;text-decoration:none;transition:filter .15s}.pp-prow a.pd:hover{filter:brightness(1.05)}.pp-prow a.pd:active{filter:brightness(.97)}
/* Second-system installer link (Owned downloads card + Account > Products): same text style as its neighbours, underlined */
.pp-dl a.dl-alt{color:#e2c699;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}.pp-dl a.dl-alt:hover{color:#fff4dd}
.pp-prow .pp-alt a{color:inherit;text-decoration:underline;text-underline-offset:2px}.pp-prow .pp-alt a:hover{color:#19150f}

/* Product videos (YouTube) — js/videos.js. Values from Figma "PROPOSAL / VIDEO SECTION — YOUTUBE" 2273:1041 (desktop 1588 wide,
   phone 390 wide), approved 2026-10-01. --u = one Figma px of the section art. */
.pp-section:has(.pp-vid){container-type:inline-size}
.pp-vid{position:absolute;inset:0;z-index:2;--u:calc(100cqw/1588);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.pv-player{position:absolute;left:calc(332*var(--u));top:calc(214*var(--u));width:calc(924*var(--u));height:calc(520*var(--u));box-sizing:border-box;margin:0;padding:0;
  border:calc(1.5*var(--u)) solid rgba(226,198,153,.55);border-radius:calc(14*var(--u));overflow:hidden;background:#0b0a09 center/cover no-repeat;color:#efe6d6;font:inherit;text-align:center}
.pv-coming{background-image:url("../assets/products/shared/video/coming_d.webp")}
.pv-h{position:absolute;left:0;right:0;top:calc(180*var(--u));font:400 calc(84*var(--u))/1.2 "Bebas Neue",Impact,sans-serif;letter-spacing:.04em;color:#e2c699}
.pv-p{position:absolute;left:0;right:0;top:calc(274*var(--u));font-size:calc(18*var(--u));line-height:1.21;color:rgba(239,230,214,.8)}
.pv-btn{position:absolute;left:calc(320*var(--u));top:calc(327*var(--u));width:calc(300*var(--u));height:calc(48*var(--u));box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.6em;
  border:calc(1.5*var(--u)) solid #e2c699;border-radius:calc(24*var(--u));font-weight:600;font-size:calc(14*var(--u));letter-spacing:.08em;color:#e2c699;text-decoration:none;transition:background-color .2s ease,color .2s ease}
.pv-btn i{font-style:normal}
@media(hover:hover){.pv-btn:hover{background:#e2c699;color:#15130f}}
.pv-btn:focus-visible,.pv-facade:focus-visible,.pv-card:focus-visible{outline:2px solid #e2c699;outline-offset:3px}
.pv-facade{cursor:pointer}
.pv-facade::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12)}
.pv-play{position:absolute;left:50%;top:50%;width:calc(108*var(--u));height:calc(108*var(--u));transform:translate(-50%,-50%);box-sizing:border-box;border-radius:50%;
  background:rgba(0,0,0,.35);border:calc(2.25*var(--u)) solid rgba(226,198,153,.9);transition:transform .2s ease,background-color .2s ease}
.pv-play::after{content:"";position:absolute;left:54%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);background:#f4ede1;clip-path:polygon(0 0,87% 50%,0 100%)}
@media(hover:hover){.pv-facade:hover .pv-play,.pv-card:hover .pv-play{transform:translate(-50%,-50%) scale(1.06);background:rgba(0,0,0,.5)}}
.pv-bar{position:absolute;left:0;right:0;bottom:0;height:calc(64*var(--u));padding-left:calc(24*var(--u));display:flex;align-items:center;gap:.5em;text-align:left;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.75));font-weight:600;font-size:calc(18*var(--u));color:#efe6d6}
.pv-bar i{font-style:normal}
.pv-live{border-color:rgba(226,198,153,.55)}
.pv-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pv-card{position:absolute;top:calc(774*var(--u));width:calc(330*var(--u));height:calc(250*var(--u));margin:0;padding:0;border:0;background:none;font:inherit;text-align:left;color:inherit}
button.pv-card{cursor:pointer}
.pv-c0{left:calc(98*var(--u))}.pv-c1{left:calc(452*var(--u))}.pv-c2{left:calc(806*var(--u))}.pv-c3{left:calc(1160*var(--u))}
.pv-thumb{position:absolute;left:0;top:0;width:100%;height:calc(186*var(--u));box-sizing:border-box;border-radius:calc(10*var(--u));overflow:hidden;background:#0b0a09 center/cover no-repeat;
  border:var(--u) solid rgba(226,198,153,.3)}
.pv-thumb::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15)}
.pv-card.is-on .pv-thumb{border:calc(2*var(--u)) solid #e2c699}
.pv-card .pv-play{width:calc(44*var(--u));height:calc(44*var(--u));border-width:calc(1.5*var(--u))}
.pv-dur{position:absolute;right:calc(10*var(--u));bottom:calc(10*var(--u));min-width:calc(46*var(--u));height:calc(22*var(--u));padding:0 calc(5*var(--u));box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  border-radius:calc(4*var(--u));background:rgba(0,0,0,.7);font-weight:500;font-size:calc(11*var(--u));color:#efe6d6;font-variant-numeric:tabular-nums}
.is-soon .pv-thumb{background:rgba(0,0,0,.35);border:calc(1.2*var(--u)) dashed rgba(226,198,153,.25);display:flex;align-items:center;justify-content:center}
.is-soon .pv-thumb::before{display:none}
.pv-soon{font:500 calc(13*var(--u)) "Roboto Mono",ui-monospace,monospace;letter-spacing:.2em;color:rgba(226,198,153,.6)}
.pv-ct{position:absolute;left:0;top:calc(200*var(--u));right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:calc(16*var(--u));line-height:1.2;color:#efe6d6}
.pv-ct i{font-style:normal;margin:0 .8em}
.is-soon .pv-ct{color:#8f8676}
.pv-card.is-on .pv-ct{color:#e2c699}
.pv-cs{position:absolute;left:calc(40*var(--u));top:calc(226*var(--u));right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(13*var(--u));line-height:1.2;color:#8f8676}
@media(max-width:760px){
  .pp-vid{--u:calc(100cqw/390)}
  .pv-player{left:calc(24*var(--u));top:calc(88*var(--u));width:calc(342*var(--u));height:calc(192*var(--u));border-width:var(--u);border-radius:calc(10*var(--u))}
  .pv-coming{background-image:url("../assets/products/shared/video/coming_m.webp")}
  .pv-h{top:calc(46*var(--u));font-size:calc(40*var(--u))}
  .pv-p{top:calc(96*var(--u));font-size:calc(12*var(--u))}
  .pv-btn{left:calc(65*var(--u));top:calc(128*var(--u));width:calc(212*var(--u));height:calc(34*var(--u));border-width:calc(1.2*var(--u));border-radius:calc(17*var(--u));font-size:calc(11*var(--u));letter-spacing:.06em}
  .pv-play{width:calc(56*var(--u));height:calc(56*var(--u));border-width:calc(1.2*var(--u))}
  .pv-bar{height:calc(40*var(--u));padding-left:calc(12*var(--u));font-size:calc(12*var(--u))}
  .pv-card{width:calc(164*var(--u));height:calc(116*var(--u))}
  .pv-c0,.pv-c2{left:calc(24*var(--u))}.pv-c1,.pv-c3{left:calc(202*var(--u))}
  .pv-c0,.pv-c1{top:calc(298*var(--u))}.pv-c2,.pv-c3{top:calc(424*var(--u))}
  .pv-thumb{height:calc(92*var(--u));border-radius:calc(8*var(--u))}
  .pv-card.is-on .pv-thumb{border-width:calc(1.5*var(--u))}
  .pv-card .pv-play{width:calc(30*var(--u));height:calc(30*var(--u));border-width:calc(1.2*var(--u))}
  .pv-dur{right:calc(6*var(--u));bottom:calc(6*var(--u));min-width:calc(34*var(--u));height:calc(16*var(--u));padding:0 calc(3*var(--u));border-radius:calc(3*var(--u));font-size:calc(9*var(--u))}
  .is-soon .pv-thumb{border-width:var(--u)}
  .pv-soon{font-size:calc(9*var(--u))}
  .pv-ct{top:calc(100*var(--u));font-size:calc(11*var(--u))}
  .pv-ct i{margin:0 .6em}
  .pv-cs{display:none}
}