/*
 * Saga DPP: original layout styles (header, footer, illustrations, built-in fallback layout)
 * Version 1.3.2
 *
 * Changelog
 * 1.3.2  Fixed case studies not appearing on the Customers page: the page now always shows the live
 *        list from the Case studies menu, even when its saved content still contains the older fixed
 *        cards. Saving a case study clears the WP Engine cache. Appearance > Saga DPP setup now has a
 *        check table showing which PDF each case study uses, the Customers page status and the upload
 *        size limit.
 * 1.3.1  The four case study PDFs (RAINS, ELKA Rainwear, Safiyaa, Mason Pearson) are now included in
 *        the theme, so the Customers page shows working "Download case study" buttons straight away;
 *        a PDF chosen under Case studies still takes priority. The ELKA PDF was cleaned of review
 *        comments and the cover images were refreshed from the PDFs. Every link now opens in a new
 *        tab, except jumps within the same page, mail and phone links.
 * 1.3.0  Case studies can now be added and managed in WordPress: a new Case studies menu with fields
 *        for the title, short description, summary, results, tags, cover image and PDF (chosen from
 *        the Media Library). The Customers page and the Customers dropdown list them automatically,
 *        and four starter entries are created for you. All links to other websites and to PDF files
 *        now open in a new tab automatically, including links added in the editor.
 * 1.2.0  Quote section heading no longer names brands. Removed the dark shadow behind the quote
 *        cards. Customers menu is now a dropdown listing each customer (for example RAINS & PSQR)
 *        that jumps to its case study. Restored the Why PSQR section under the hero. Contact PSQR
 *        opens psqr.eu/contact-us in a new tab. Footer links to the PSQR privacy policy and terms of
 *        use in a new tab. New app screenshots replace the mock screens in How it works, and the hero
 *        shows a phone with the T-shirt passport and its QR code behind it. Platform section gains
 *        data schema and audit log screenshots.
 * 1.1.0  Content is now editable. Home, Customers and a Style guide are real WordPress pages built
 *        from block patterns, so text, headings, lists, images and buttons are edited in the normal
 *        page editor. The original layout stays as an automatic fallback whenever a page is empty, so
 *        the site keeps working. Added the visual identity files (tokens.css, theme.json), block
 *        styles, 18 reusable patterns, a Style guide page and an Appearance > Saga DPP setup screen.
 *        Replaces the withdrawn 2.0.x block-theme releases.
 * 1.0.3  File names of the release files now include the version number, for example
 *        saga-dpp-v1.0.3.zip.
 * 1.0.2  Added version number and changelog to every file.
 * 1.0.1  Light theme only (dark mode removed). Built-in navigation that no longer depends on
 *        WordPress menus. Added color-scheme meta tag.
 * 1.0.0  First release of the WordPress theme: homepage, Customers page with downloadable case
 *        studies, partner logo ticker, customer quote carousel, teal #30B5AC and white button text.
 */
/* Saga DPP theme: base resets carried over from the static build */
img { max-width:100%; }
[hidden] { display:none !important; }
.screen-reader-text, .skip-link { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; left:12px; top:12px; width:auto; height:auto; margin:0; padding:12px 16px; clip:auto; z-index:100000; background:var(--surface); color:var(--ink); border-radius:8px; box-shadow:var(--shadow-lg); }
.admin-bar .site { top:32px; }
@media (max-width:782px) { .admin-bar .site { top:46px; } }
@media (max-width:600px) { .admin-bar .site { top:0; } }

/* Layout concept: a calm, wide-open product page on the PSQR brand (Poppins light headlines, hexagon motif, purple + teal).
   One bold moment: the hero pairs a physical care label with the live consumer passport it opens.
   Everything else stays quiet: hairlines, plain lists, and product mock-ups that show the real workflow. */


*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.62 var(--f-body); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--surface); }
h1,h2,h3,p,ul,figure,blockquote { margin:0; }
ul { padding:0; list-style:none; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--teal); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }

.wrap { width:100%; max-width:1180px; margin-inline:auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); }
section { padding-block:clamp(56px,8vw,108px); scroll-margin-top:72px; }
.eyebrow { font:600 .76rem/1.3 var(--f-display); letter-spacing:.15em; text-transform:uppercase; color:var(--teal); }
h1 { font:300 clamp(2.45rem,5.3vw,4.2rem)/1.05 var(--f-display); letter-spacing:-.022em; text-wrap:balance; }
h2 { font:300 clamp(1.8rem,3.5vw,2.7rem)/1.12 var(--f-display); letter-spacing:-.015em; text-wrap:balance; }
h1 em, h2 em { font-style:italic; color:var(--accent); }
h3 { font:500 1.08rem/1.35 var(--f-display); }
.lead { font-size:1.1rem; color:var(--ink-2); max-width:36rem; }
.sec-head { display:grid; gap:14px; max-width:46rem; margin-bottom:clamp(32px,4vw,52px); }
.sec-head.center { margin-inline:auto; text-align:center; justify-items:center; }
.hx { display:inline-block; flex:none; width:.85em; height:.98em; background:var(--teal); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.82rem 1.35rem; border-radius:12px; font:600 .92rem/1.2 var(--f-display); text-decoration:none; border:1.5px solid transparent; transition:transform .15s ease, background-color .15s ease; cursor:pointer; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--cta); color:var(--cta-ink); }
.btn-ghost { border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn-ghost:hover { background:var(--surface-2); }

/* header */
.site { position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--surface); border-bottom:1px solid var(--line); }
.site .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo { display:block; height:44px; width:auto; background:var(--plate); border-radius:10px; padding:4px 8px; }
.wm { font:300 1.65rem/1 var(--f-display); letter-spacing:.01em; }
.wm-a { color:var(--teal); } .wm-b { color:var(--accent-2); }
.m-hex { fill:none; stroke:var(--accent); stroke-width:6; stroke-linejoin:round; }
.m-a { fill:var(--teal); opacity:.62; } .m-b { fill:var(--teal); } .m-c { fill:var(--teal-ink); }
.nav { display:flex; align-items:center; gap:28px; }
.nav a { font:500 .92rem/1 var(--f-display); text-decoration:none; color:var(--ink-2); padding-block:8px; }
.nav a:hover { color:var(--ink); }
.site .btn { padding:.62rem 1.05rem; font-size:.86rem; }
@media (max-width:920px) { .nav { display:none; } }

/* hero */
.hero { position:relative; overflow:hidden; padding-block:clamp(36px,5vw,72px) clamp(44px,6vw,80px); }
.hexfield { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; -webkit-mask-image:radial-gradient(ellipse 65% 85% at 78% 40%,#000 0%,transparent 78%); mask-image:radial-gradient(ellipse 65% 85% at 78% 40%,#000 0%,transparent 78%); }
.hexfield polygon { fill:none; stroke:var(--hex); stroke-width:1.5; }
.hexfield polygon.f { fill:var(--hex-fill); }
.hero .wrap { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,56px); align-items:center; }
.hero-copy { display:grid; gap:24px; justify-items:start; }
.hero-copy .lead { font-size:clamp(1.02rem,1.5vw,1.16rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-facts { display:flex; flex-wrap:wrap; gap:10px 26px; font:500 .9rem/1.4 var(--f-display); color:var(--ink-2); }
.hero-facts li { display:flex; align-items:center; gap:9px; }
@media (max-width:900px) { .hero .wrap { grid-template-columns:minmax(0,1fr); } }

.stage { position:relative; width:26em; height:33em; font-size:min(16px,calc((100vw - 32px)/26)); margin-inline:auto; }
@media (min-width:901px) { .stage { margin-right:0; } }
.label { position:absolute; left:0; top:.6em; width:10em; height:29em; padding:1.1em .9em; background:var(--paper); color:var(--paper-ink); box-shadow:var(--shadow-lg); transform:rotate(-2.2deg); overflow:hidden; display:flex; flex-direction:column; gap:.55em; }
.label .qr { width:5.6em; height:5.6em; color:var(--paper-ink); display:block; }
.lt { font-size:.66em; line-height:1.4; font-family:var(--f-body); }
.lt b { display:block; font-weight:600; }
.fold { border-top:1.5px dashed #9b95ab; margin-block:.3em .1em; }
.lw { font:600 1.5em/1 var(--f-display); letter-spacing:-.01em; text-transform:uppercase; }
.lw.flip { transform:rotate(180deg); transform-origin:center; }
.lt.flip { transform:rotate(180deg); }
.phone { position:absolute; right:0; top:1.6em; width:17.2em; height:30.6em; padding:.5em; background:var(--bezel); border-radius:2.6em; box-shadow:var(--shadow-lg); border:1px solid var(--line-2); }
.screen { height:100%; background:var(--surface); border-radius:2.15em; overflow:hidden; display:flex; flex-direction:column; color:var(--ink); }
.notch { width:4.6em; height:1.25em; background:var(--bezel); border-radius:1em; margin:.55em auto .5em; flex:none; }
.pimg { margin:0 .8em; height:8.6em; background:var(--surface-2); border-radius:1em; display:grid; place-items:center; flex:none; }
.pimg svg { width:7.4em; height:auto; }
.ptitle { padding:.7em .95em .5em; flex:none; }
.ptitle b { display:block; font:600 .95em/1.25 var(--f-display); }
.ptitle span { font-size:.68em; color:var(--ink-2); }
.acc { border-top:1px solid var(--line); padding:.55em .95em; font-size:.72em; line-height:1.4; }
.acc-h { display:flex; justify-content:space-between; align-items:center; font-weight:600; font-family:var(--f-display); }
.acc-h i { width:.55em; height:.55em; border-right:1.5px solid var(--ink-2); border-bottom:1.5px solid var(--ink-2); transform:rotate(45deg); }
.acc-h i.up { transform:rotate(-135deg); }
.kv { display:grid; grid-template-columns:1fr 1fr; gap:.4em .8em; margin-top:.5em; }
.kv span { display:block; color:var(--ink-2); font-size:.86em; }
.kv b { font-weight:600; }
.care { display:flex; gap:.4em; flex-wrap:wrap; margin-top:.5em; }
.care span { border:1px solid var(--line-2); border-radius:.5em; padding:.15em .5em; font-size:.9em; color:var(--ink-2); }
.pill-float { position:absolute; left:1.2em; bottom:.4em; display:flex; align-items:center; gap:.55em; padding:.6em .95em .6em .7em; background:var(--surface); border:1px solid var(--line); border-radius:99px; box-shadow:var(--shadow); font:500 .72em/1.2 var(--f-display); color:var(--ink); z-index:3; }
.tick { width:1.55em; height:1.55em; border-radius:50%; background:var(--teal-soft); display:grid; place-items:center; }
.tick svg { width:.95em; height:.95em; stroke:var(--teal-ink); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }


/* problem */
.problem-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:start; }
.pains { display:grid; margin-top:34px; }
.pains li { display:grid; grid-template-columns:auto 1fr; gap:14px; padding-block:20px; border-top:1px solid var(--line); }
.pains li:last-child { border-bottom:1px solid var(--line); }
.pains .hx { margin-top:.38em; }
.pains p { color:var(--ink-2); font-size:.95rem; margin-top:4px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:clamp(22px,3vw,34px); box-shadow:var(--shadow); }
.panel h3 { font:600 .8rem/1.4 var(--f-display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:22px; }
.bars { display:grid; gap:18px; }
.bars li { display:grid; grid-template-columns:1fr auto; gap:7px 14px; align-items:center; }
.bars .lbl { grid-column:1 / -1; font-size:.93rem; font-weight:500; }
.bars .bar { height:12px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.bars .bar i { display:block; height:100%; border-radius:inherit; width:calc(var(--v) / 35 * 100%); background:var(--line-2); }
.bars li:nth-child(-n+2) .bar i { background:var(--teal); }
.bars .val { font:500 .95rem/1 var(--f-mono); font-variant-numeric:tabular-nums; min-width:2.6em; text-align:right; }
.src { margin-top:22px; font-size:.78rem; color:var(--ink-2); }
.bridge { margin-top:22px; padding:14px 16px; border-radius:14px; background:var(--teal-soft); font-size:.92rem; line-height:1.5; }
@media (max-width:900px) { .problem-grid { grid-template-columns:minmax(0,1fr); } }

/* why */
.why { background:var(--surface); border-block:1px solid var(--line); }
.why-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px clamp(24px,4vw,56px); }
.why-grid div { display:grid; gap:10px; align-content:start; padding-top:22px; border-top:2px solid var(--line); }
.why-grid .hx { width:18px; height:21px; margin-bottom:4px; }
.why-grid p { color:var(--ink-2); font-size:.95rem; }
@media (max-width:900px) { .why-grid { grid-template-columns:minmax(0,1fr); } }
@media (min-width:560px) and (max-width:900px) { .why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* how */
.tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:28px; }
.tab { all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:4px; align-content:start; padding:14px 4px 0; border-top:3px solid var(--line); color:var(--ink-2); transition:border-color .2s ease,color .2s ease; }
.tab:hover { color:var(--ink); }
.tab:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.tab small { font:500 .7rem/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; }
.tab span { font:500 clamp(.82rem,1.6vw,1.12rem)/1.25 var(--f-display); }
.tab[aria-selected="true"] { border-top-color:var(--accent); color:var(--ink); }
.tab[aria-selected="true"] small { color:var(--teal-ink); }
.panel-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.panel-grid[hidden] { display:none !important; }
.step-copy { display:grid; gap:18px; align-content:start; }
.step-copy h3 { font:300 clamp(1.5rem,2.6vw,2rem)/1.2 var(--f-display); }
.step-copy > p { color:var(--ink-2); font-size:1.05rem; }
.ticks { display:grid; gap:12px; margin-top:6px; }
.ticks li { display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:.96rem; }
.ticks .hx { margin-top:.42em; }
.mock-bg { background:var(--surface-2); border-radius:24px; padding:clamp(14px,2.4vw,28px); min-width:0; }
@media (max-width:900px) { .panel-grid { grid-template-columns:minmax(0,1fr); } }

.app { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; font:400 .8rem/1.45 var(--f-mono); color:var(--ink); min-width:0; }
.app-bar { display:flex; justify-content:space-between; gap:12px; padding:9px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; }
.app-body { padding:14px; display:grid; gap:14px; }
.app-title { font:500 1rem/1.3 var(--f-mono); }
.fld { display:grid; gap:6px; }
.fld > label { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.sel { border:1px solid var(--line-2); border-radius:6px; padding:8px 10px; display:flex; justify-content:space-between; background:var(--bg); }
.drop { border:1.5px dashed var(--line-2); border-radius:8px; padding:16px 12px; display:grid; gap:10px; justify-items:center; text-align:center; color:var(--ink-2); }
.drop .row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.b { border:1px solid var(--line-2); border-radius:6px; padding:5px 10px; color:var(--ink); font-size:.74rem; }
.b.dark { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile { border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--bg); }
.tile span { display:block; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); }
.tile b { font:500 1.55rem/1.2 var(--f-mono); font-variant-numeric:tabular-nums; }
.tile.warn b { color:var(--warn); }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:440px; }
th { text-align:left; font-weight:500; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); padding:7px 8px; border-bottom:1px solid var(--line); }
td { padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; font-size:.76rem; }
tr:last-child td { border-bottom:0; }
.miss { display:inline-block; background:var(--warn-bg); color:var(--warn); border-radius:5px; padding:1px 7px; margin:0 4px 4px 0; font-size:.72rem; }
.lv { display:flex; flex-wrap:wrap; gap:6px; }
.lv span { border:1px solid var(--line-2); border-radius:99px; padding:3px 11px; font-size:.72rem; color:var(--ink-2); }
.lv span.on { background:var(--accent); border-color:var(--accent); color:var(--surface); }
.pp { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start; }
.pp .qr { width:104px; height:104px; color:var(--ink); display:block; }
.pp .cap { font-size:.64rem; color:var(--ink-2); margin-top:6px; max-width:104px; line-height:1.35; }
.kv2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
.kv2 span { display:block; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.kv2 b { font-weight:500; font-size:.78rem; overflow-wrap:anywhere; }
.out { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding-block:12px; border-top:1px solid var(--line); }
.out:first-child { border-top:0; padding-top:0; }
.out .ic { width:38px; height:38px; border-radius:10px; background:var(--accent-soft); display:grid; place-items:center; }
.out .ic svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.out b { display:block; font:500 .8rem/1.3 var(--f-mono); }
.out small { font-size:.7rem; color:var(--ink-2); }
.st { font-size:.7rem; padding:3px 10px; border-radius:99px; background:var(--teal-soft); color:var(--teal-ink); white-space:nowrap; }

/* platform */
.platform-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,88px); align-items:start; }
.platform-grid .sec-head { margin-bottom:28px; }
.regs { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.regs li { border:1px solid var(--line-2); border-radius:99px; padding:6px 14px; font:500 .8rem/1.3 var(--f-display); color:var(--ink-2); background:var(--surface); }
.regs-label { font:600 .72rem/1 var(--f-display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px; }
.feat { display:grid; }
.feat details { border-top:1px solid var(--line); }
.feat details:last-child { border-bottom:1px solid var(--line); }
.feat summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:24px; border-radius:8px; }
.feat summary::-webkit-details-marker { display:none; }
.feat summary:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.feat .sum { display:grid; gap:8px; min-width:0; }
.feat .tag { font:500 .7rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); }
.feat .h { font:400 1.35rem/1.3 var(--f-display); transition:color .15s ease; }
.feat summary:hover .h { color:var(--accent); }
.feat .chev { position:relative; flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); transition:background-color .15s ease, border-color .15s ease; }
.feat .chev::before, .feat .chev::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; background:var(--ink); border-radius:2px; transform:translate(-50%,-50%); transition:transform .2s ease; }
.feat .chev::after { transform:translate(-50%,-50%) rotate(90deg); }
.feat summary:hover .chev { border-color:var(--accent); }
.feat details[open] .chev { background:var(--accent-soft); border-color:var(--accent); }
.feat details[open] .chev::after { transform:translate(-50%,-50%) rotate(0deg); }
.feat .body { padding-bottom:28px; animation:unfold .25s ease; }
@keyframes unfold { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.feat ul { display:grid; gap:9px; }
.feat li { display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:.95rem; color:var(--ink-2); }
.feat li b { color:var(--ink); font-weight:600; }
.feat .hx { margin-top:.42em; }
@media (max-width:900px) { .platform-grid { grid-template-columns:minmax(0,1fr); } }

/* proof band */
.band { background:var(--band); color:var(--band-ink); }
.band .wrap { position:relative; }
.band .eyebrow { color:var(--band-accent); }
.band h2 em { color:var(--band-accent); }
.band .lead { color:var(--band-mute); max-width:44rem; }
.band { position:relative; overflow:hidden; isolation:isolate; --vox-outline:url("../img/vox-outline.webp"); --vox-three:url("../img/vox-three.webp"); }
.band::before { content:""; position:absolute; z-index:-1; right:-9%; top:-14%; width:min(78vw,980px); aspect-ratio:1400/978; background:#fff; opacity:.085; -webkit-mask:var(--vox-three) center/contain no-repeat; mask:var(--vox-three) center/contain no-repeat; pointer-events:none; }
.quotes { display:flex; gap:22px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 0 30px; margin-top:-4px; }
.quotes::-webkit-scrollbar { display:none; }
.quotes:focus-visible { outline:3px solid var(--band-accent); outline-offset:2px; border-radius:24px; }
.qctl { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:-6px; }
.qarrow:focus-visible { outline:3px solid var(--band-accent); outline-offset:2px; border-radius:99px; }
.qarrows { display:flex; gap:10px; }
.qarrow { all:unset; box-sizing:border-box; cursor:pointer; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); color:#fff; transition:background-color .2s ease, border-color .2s ease, opacity .2s ease; }
.qarrow:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7); }
.qarrow[disabled] { opacity:.35; cursor:default; background:transparent; border-color:rgba(255,255,255,.35); }
.qarrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.quote { flex:0 0 calc((100% - 22px) / 2); min-width:0; scroll-snap-align:start; margin:0; position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-rows:auto 1fr auto; gap:20px; padding:clamp(26px,3.2vw,40px); border-radius:24px; background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.quote > * { position:relative; z-index:1; }
.quote::after { content:""; position:absolute; z-index:0; width:62%; aspect-ratio:760/873; background:#fff; opacity:.2; -webkit-mask:var(--vox-outline) center/contain no-repeat; mask:var(--vox-outline) center/contain no-repeat; pointer-events:none; }
.quote:nth-child(odd)::after { right:-14%; bottom:-30%; }
.quote:nth-child(even)::after { right:-10%; top:-34%; width:68%; }
.qmark { font:300 5.2rem/.7 var(--f-display); color:var(--band-accent); height:.42em; display:block; }
.quote blockquote { font:300 clamp(1.08rem,1.7vw,1.22rem)/1.6 var(--f-display); max-width:30em; }
.quote figcaption { display:grid; gap:2px; font-size:.9rem; color:var(--band-mute); padding-top:18px; border-top:1px solid rgba(255,255,255,.16); }
.quote figcaption b { color:var(--band-accent); font:600 .95rem/1.3 var(--f-display); }
@media (max-width:820px) { .quote { flex-basis:100%; } .quote::after { width:58%; } }


.nav a[aria-current="page"] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--teal); }
.page-hero { position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,68px); --vox-three:url("../img/vox-three.webp"); }
.page-hero::before { content:""; position:absolute; z-index:-1; right:-8%; top:-34%; width:min(64vw,780px); aspect-ratio:1400/978; background:var(--ink); opacity:.06; -webkit-mask:var(--vox-three) center/contain no-repeat; mask:var(--vox-three) center/contain no-repeat; pointer-events:none; }
.page-hero .hero-copy { max-width:44rem; }
/* case studies */
.cs-sec { background:var(--bg); }
.cs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); }
.cs { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); transition:border-color .2s ease, box-shadow .2s ease; }
.cs:hover { border-color:var(--teal); box-shadow:var(--shadow-lg); }
.cs-cover { display:block; position:relative; background:var(--surface-2); border-bottom:1px solid var(--line); }
.cs-cover img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.cs-body { display:flex; flex-direction:column; gap:16px; flex:1; padding:clamp(22px,2.8vw,32px); }
.cs-tags { display:flex; flex-wrap:wrap; gap:8px; }
.cs-tag { font:600 .72rem/1 var(--f-display); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--surface-2); border-radius:99px; padding:7px 11px; }
.cs h3 { font:600 1.45rem/1.2 var(--f-display); letter-spacing:-.01em; }
.cs-kick { font:500 .92rem/1.4 var(--f-display); color:var(--ink-2); margin-top:-8px; }
.cs-sum { color:var(--ink-2); font-size:1rem; line-height:1.6; }
.cs-list { list-style:none; display:grid; gap:10px; padding:0; margin:0; }
.cs-list li { position:relative; padding-left:28px; font-size:.95rem; line-height:1.5; }
.cs-list li::before { content:""; position:absolute; left:0; top:.28em; width:16px; height:16px; background:var(--teal); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cs-list li::after { content:""; position:absolute; left:4.5px; top:calc(.28em + 4.5px); width:7px; height:7px; background:var(--cta-ink); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); opacity:.9; }
.cs-foot { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.cs-meta { font:500 .82rem/1.3 var(--f-display); color:var(--ink-2); }
.cs-dl svg { width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cs-cta { margin-top:clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 22px; text-align:center; }
.cs-cta p { font:400 1.05rem/1.4 var(--f-display); color:var(--ink-2); }
.qlink { color:#fff; font:500 .95rem/1 var(--f-display); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; padding:10px 0; border-bottom:1.5px solid rgba(255,255,255,.4); }
.qlink:hover { border-color:#fff; }
.qlink:focus-visible { outline:3px solid var(--band-accent); outline-offset:4px; border-radius:4px; }
@media (max-width:820px) { .cs-grid { grid-template-columns:minmax(0,1fr); } }

/* partners: logo ticker */
.ticker-sec { background:var(--surface); border-block:1px solid var(--line); padding-bottom:clamp(40px,5vw,64px); }
.ticker { position:relative; overflow:hidden; }
.ticker-track { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 8px; padding-inline:16px; }
.ticker.is-marquee { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); }
.ticker.is-marquee .ticker-track { flex-wrap:nowrap; justify-content:flex-start; width:max-content; padding-inline:0; gap:0; animation:ticker var(--dur,40s) linear infinite; will-change:transform; }
.ticker.is-marquee:hover .ticker-track, .ticker.is-marquee:focus-within .ticker-track { animation-play-state:paused; }
@keyframes ticker { to { transform:translateX(-50%); } }
.plogo { flex:none; padding-inline:clamp(14px,2vw,26px); }
.lg { display:grid; place-items:center; height:78px; min-width:148px; padding:0 clamp(18px,2.4vw,30px); border-radius:16px; background:var(--tile,transparent); transition:background-color .2s ease, box-shadow .2s ease; }
.lg img { display:block; height:var(--h,30px); width:auto; max-width:none; filter:grayscale(1); opacity:.68; transition:filter .25s ease, opacity .25s ease, transform .25s ease; }
.lg:hover img { filter:none; opacity:1; transform:scale(1.04); }
.lg:hover { --tile:#fff; box-shadow:0 0 0 1px var(--line), var(--shadow); }

@media (max-width:620px) { .lg { height:68px; min-width:128px; } }

/* pricing */
.plans { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.plan { position:relative; display:grid; gap:18px; align-content:start; padding:26px 20px 22px; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.plan::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:color-mix(in srgb, var(--accent) calc(var(--t) * 22%), var(--line)); }
.plan h3 { font:300 2.5rem/1 var(--f-display); letter-spacing:-.02em; }
.plan h3.ent { font-size:1.5rem; padding-top:.6rem; }
.plan dl { margin:0; display:grid; gap:16px; }
.plan dt { font:600 .68rem/1.3 var(--f-display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.plan dd { margin:4px 0 0; font:500 1.05rem/1.3 var(--f-display); font-variant-numeric:tabular-nums; }
.plan dd.big { font-size:1.9rem; letter-spacing:-.02em; }
.plan dd small { display:block; font:400 .78rem/1.3 var(--f-body); color:var(--ink-2); }
.plan.start { border-color:var(--teal); box-shadow:var(--shadow); }
.plan .flag { position:absolute; top:16px; right:14px; font:600 .66rem/1 var(--f-display); letter-spacing:.08em; text-transform:uppercase; color:var(--teal-ink); background:var(--teal-soft); padding:5px 9px; border-radius:99px; }
.extras { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.extra { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; background:var(--surface-2); border-radius:14px; }
.extra b { font:500 1rem/1.3 var(--f-display); }
.extra span { font:500 1.05rem/1.3 var(--f-display); text-align:right; }
.extra small { display:block; font:400 .78rem/1.3 var(--f-body); color:var(--ink-2); }
.fine { margin-top:20px; font-size:.84rem; color:var(--ink-2); max-width:46rem; }
@media (max-width:1040px) { .plans { grid-template-columns:repeat(2,minmax(0,1fr)); } .plans .plan:last-child { grid-column:1 / -1; } }
@media (max-width:560px) { .plans, .extras { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) { .extras { grid-template-columns:minmax(0,1fr); } }

/* beyond */
.beyond { background:var(--surface); border-top:1px solid var(--line); }
.beyond-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); align-items:start; }
.scanbig { display:grid; gap:2px; }
.scanbig b { font:500 2.1rem/1.1 var(--f-mono); font-variant-numeric:tabular-nums; }
.scanbig span { font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); }
.cbars { display:grid; gap:9px; }
.cbars li { display:grid; grid-template-columns:6.5em 1fr 3em; gap:10px; align-items:center; font-size:.76rem; }
.cbars .bar { height:9px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.cbars .bar i { display:block; height:100%; background:var(--accent-2); width:calc(var(--v) / 30 * 100%); border-radius:inherit; }
.cbars .v { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.ex { font-size:.72rem; color:var(--ink-2); margin-top:12px; }
.value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 36px; }
.value-grid div { display:grid; gap:8px; align-content:start; padding-block:24px; border-top:1px solid var(--line); }
.value-grid p { color:var(--ink-2); font-size:.94rem; }
.value-grid .hx { width:16px; height:18px; }
@media (max-width:900px) { .beyond-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px) { .value-grid { grid-template-columns:minmax(0,1fr); } }

/* cta */
.cta-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center; }
.cta-copy { display:grid; gap:22px; justify-items:start; }
.next { display:grid; gap:16px; margin-top:4px; }
.next li { display:grid; grid-template-columns:auto 1fr; gap:12px; }
.next .hx { margin-top:.42em; }
.next b { font:500 1.02rem/1.35 var(--f-display); display:block; }
.next span { color:var(--ink-2); font-size:.94rem; }
.contact { display:grid; gap:18px; }
.contact h3 { font:400 1.35rem/1.3 var(--f-display); }
.contact p { color:var(--ink-2); font-size:.95rem; }
.mailrow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mail { font:500 1rem/1 var(--f-mono); padding:11px 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); user-select:all; }
.copy { all:unset; box-sizing:border-box; cursor:pointer; font:600 .84rem/1 var(--f-display); padding:11px 14px; border-radius:10px; background:var(--surface-2); color:var(--ink); }
.copy:hover { background:var(--accent-soft); }
.copy:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
@media (max-width:900px) { .cta-grid { grid-template-columns:minmax(0,1fr); } }

/* footer */
footer { padding-block:34px 44px; border-top:1px solid var(--line); background:var(--surface); }
footer .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; font-size:.86rem; color:var(--ink-2); }
footer .logo { height:36px; }

footer a { text-decoration:underline; text-underline-offset:3px; }

/* ---------- navigation dropdown (Customers) ---------- */
.nav-dd { position:relative; display:flex; align-items:center; gap:4px; }
.nav-dd__btn { all:unset; box-sizing:border-box; cursor:pointer; width:22px; height:22px; display:grid; place-items:center; border-radius:6px; color:var(--ink-2); }
.nav-dd__btn:hover { color:var(--ink); }
.nav-dd__btn:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.nav-dd__btn svg { transition:transform .2s ease; }
.nav-dd.is-open .nav-dd__btn svg { transform:rotate(180deg); }
.nav-dd__menu { position:absolute; top:calc(100% + 6px); left:-14px; min-width:270px; display:none; flex-direction:column; gap:2px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); z-index:60; }
.nav-dd__menu::before { content:""; position:absolute; left:0; right:0; top:-8px; height:8px; }
.nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu, .nav-dd.is-open .nav-dd__menu { display:flex; }
.nav-dd__menu a { padding:11px 12px; border-radius:8px; white-space:nowrap; }
.nav-dd__menu a:hover { background:var(--surface-2); color:var(--ink); }

/* ---------- footer links ---------- */
.footer-links { display:flex; flex-wrap:wrap; gap:6px 22px; }