/*
 * Saga DPP: block design system (patterns, block styles, cards, grids, quote carousel, ticker, case studies)
 * Version 1.7.3
 *
 * Changelog
 * 1.7.3  The hexagon bullets in the Beyond compliance and Why Saga DPP cards are now beside the text,
 *        like in the rest of the site. Style change only, no changes to the way the theme loads or
 *        updates pages.
 * 1.7.1  Reliable section updates. The theme now finds sections in the saved Home page however
 *        WordPress saved them, and Appearance > Saga DPP setup has a Home page sections table showing
 *        whether the Case studies, Platform and Pricing blocks are up to date, plus an "Update now"
 *        button and a log of the last update, so a block that does not change is no longer a mystery.
 *        Includes the Platform redesign from 1.7.0 (compliance frame with regulations and standards
 *        side by side, standards in rows of 4 and 3).
 * 1.7.0  Platform section redesigned: the three accordion rows have the label on the left, the
 *        heading left-aligned on the same line with even spacing, and a plus button on the right.
 *        "Designed in line with" and "Built to comply with DPP standards" now sit together in one
 *        frame under the accordion, side by side, with the standards in rows of 4 and 3. In How it
 *        works the text is aligned to the top in every step and the phone in step 4 is smaller, so
 *        switching steps flows better. The update replaces the saved Platform block on the Home page
 *        the first time the admin is opened.
 * 1.6.0  Platform section lists the DPP standards the solution is built to comply with (EN18216,
 *        EN18219, EN18220, EN18221, EN18223, EN18239, EN18246). Pricing plans now say "New DPPs per
 *        year" and a short note with an example explains that the price does not stack. All hexagon
 *        bullets (lists, benefit cards, problem points, the pricing note) now share one size, color
 *        and position. The update replaces the saved Platform and Pricing blocks on the Home page the
 *        first time the admin is opened.
 * 1.5.0  The "Explore our case studies" button is gone. Each case study card on the homepage now
 *        links straight to its own case study on psqr.eu (image, title and a "Read the case study"
 *        link), and so does each entry in the Customers dropdown in the main menu. All of these open
 *        in a new tab. The update replaces the saved Case studies block on the Home page the first
 *        time the admin is opened.
 * 1.4.1  The update now applies itself: the first time the admin is opened after installing, the Case
 *        studies block is added to the saved Home page under the quotes, the old Customers links are
 *        replaced, and the WP Engine caches are cleared. The Case studies block is also added when
 *        the page is displayed if the saved page still lacks it. Links inside the Saga DPP site never
 *        open in a new tab, even if the saved page content still says so; only psqr.eu links do. The
 *        setup screen shows the homepage in use and whether the block is present, and the page source
 *        shows the theme version.
 * 1.4.0  Case studies are back as a block on the homepage (no separate Customers page): four small
 *        cards in a row and an "Explore our case studies" button linking to psqr.eu/case-studies.
 *        Only links to psqr.eu open in a new tab; every other link is a normal link. The Customers
 *        menu dropdown now jumps to the cards on the homepage. Removed the Case studies menu,
 *        shortcode and bundled PDFs; the old Customers page redirects to the homepage section.
 * 1.3.2  Fixed case studies not appearing on the Customers page: the page showed the live list from
 *        the Case studies menu even when its saved content had older fixed cards, saving a case study
 *        cleared the WP Engine cache, and the setup screen gained a check table.
 * 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.
 */
/* ---------- core block basics (buttons, full-width groups) ---------- */
.wp-block-button__link { background:var(--cta); color:#fff; border-radius:var(--saga-radius-button); padding:.82rem 1.35rem; font:600 .92rem/1.2 var(--f-display); text-decoration:none; border:1.5px solid transparent; }
.wp-block-button__link:hover { color:#fff; }
.wp-block-buttons { display:flex; flex-wrap:wrap; gap:12px; }
.wp-block-button { margin:0; }
.wp-block-group.alignfull { max-width:none; width:100%; }

/* ---------- headings ---------- */
h1 em, h2 em { font-style:italic; color:var(--accent); }
h1, h2 { text-wrap:balance; }

/* ---------- paragraph styles ---------- */
.is-style-saga-eyebrow { font:600 .76rem/1.3 var(--f-display); letter-spacing:.15em; text-transform:uppercase; color:var(--teal); }
.is-style-saga-lead { font-size:1.1rem; color:var(--ink-2); max-width:36rem; }

/* ---------- list styles ---------- */
.is-style-saga-hex { list-style:none; padding:0; display:grid; gap:10px; }
.is-style-saga-hex > li { position:relative; padding-left:calc(var(--saga-bullet-w) + var(--saga-bullet-gap)); }
.is-style-saga-hex > li::before { content:""; position:absolute; left:0; top:4px; width:var(--saga-bullet-w); height:var(--saga-bullet-h); background:var(--teal); clip-path:var(--hex-clip); }
.saga-facts { display:flex; flex-wrap:wrap; gap:10px 26px; font:500 .9rem/1.4 var(--f-display); color:var(--ink-2); }
.is-style-saga-pills { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.is-style-saga-pills > 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); }
.is-style-saga-tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.is-style-saga-tags > li { 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; }

/* ---------- buttons ---------- */
.wp-block-button__link { transition:transform .15s ease, background-color .15s ease; }
.wp-block-button__link:hover { transform:translateY(-1px); }
.wp-block-button.is-style-outline > .wp-block-button__link { background:transparent; color:var(--ink); border:1.5px solid var(--line-2); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color:var(--ink); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background:var(--surface-2); }
.saga-actions { gap:12px; }

.saga-prose { padding:clamp(40px,6vw,72px) clamp(16px,4vw,32px); }

/* ---------- section structure ---------- */
.saga-section { padding:clamp(56px,8vw,108px) clamp(16px,4vw,32px); scroll-margin-top:72px; }
.saga-section .is-layout-flow > *, .saga-section .is-layout-constrained > * { margin-block:0; }
.saga-section p, .saga-section h1, .saga-section h2, .saga-section h3, .saga-section h4, .saga-section ul, .saga-section figure, .saga-section blockquote { margin:0; }
.saga-wrap { max-width:1180px; margin-inline:auto; }
.saga-section--surface { background:var(--surface); border-block:1px solid var(--line); }
.saga-section--tint { background:var(--bg); }
.saga-head { display:grid; gap:14px; max-width:46rem; margin-bottom:clamp(32px,4vw,52px) !important; }
.saga-head--center { margin-inline:auto; text-align:center; justify-items:center; }
.saga-stack { display:grid; gap:14px; align-content:start; }
.saga-small-label { font:600 .72rem/1 var(--f-display); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px !important; }
.saga-split { display:grid; grid-template-columns:var(--cols,minmax(0,1fr) minmax(0,.92fr)); gap:clamp(32px,5vw,72px); align-items:var(--ai,start); }
.saga-split--hero { --cols:minmax(0,1.05fr) minmax(0,.95fr); --ai:center; gap:clamp(28px,4vw,56px); }
.saga-split--platform { --cols:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,88px); }
.saga-split--beyond { --cols:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); }
.saga-split--cta { --cols:minmax(0,1.1fr) minmax(0,.9fr); --ai:center; gap:clamp(28px,5vw,72px); }
@media (max-width:900px) { .saga-split { grid-template-columns:minmax(0,1fr); } }
.saga-grid { display:grid; gap:36px clamp(24px,4vw,56px); }
.saga-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.saga-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.saga-grid--cs { gap:clamp(18px,2.4vw,28px); }
@media (max-width:900px) { .saga-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .saga-grid--3, .saga-grid--2 { grid-template-columns:minmax(0,1fr); } }

/* ---------- group styles: card, point, panel ---------- */
.is-style-saga-card { display:grid; grid-template-columns:auto 1fr; column-gap:var(--saga-bullet-gap); row-gap:6px; align-content:start; padding-top:22px; border-top:2px solid var(--line); }
.is-style-saga-card::before { content:""; grid-row:1 / span 2; width:var(--saga-bullet-w); height:var(--saga-bullet-h); margin-top:5px; background:var(--teal); clip-path:var(--hex-clip); }
.is-style-saga-card p { color:var(--ink-2); font-size:.95rem; }
.saga-points { display:grid; margin-top:20px; }
.is-style-saga-point { display:grid; grid-template-columns:auto 1fr; column-gap:var(--saga-bullet-gap); row-gap:4px; padding-block:20px; border-top:1px solid var(--line); }
.saga-points > .is-style-saga-point:last-child { border-bottom:1px solid var(--line); }
.is-style-saga-point::before { content:""; grid-row:1 / span 2; width:var(--saga-bullet-w); height:var(--saga-bullet-h); margin-top:5px; background:var(--teal); clip-path:var(--hex-clip); }
.is-style-saga-point p { color:var(--ink-2); font-size:.95rem; }
.is-style-saga-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--saga-radius-panel); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow); display:grid; gap:16px; align-content:start; }
.saga-panel__title { font:600 .8rem/1.4 var(--f-display) !important; letter-spacing:.1em !important; text-transform:uppercase; color:var(--ink-2); }
.saga-panel__heading { font:400 1.35rem/1.3 var(--f-display) !important; }
.saga-src { font-size:.78rem; color:var(--ink-2); }
.saga-bridge { padding:14px 16px; border-radius:14px; background:var(--teal-soft); font-size:.92rem; line-height:1.5; }
.saga-contact p { color:var(--ink-2); font-size:.95rem; }
.saga-next { margin-top:4px; gap:16px; }
.saga-next strong { font:500 1.02rem/1.35 var(--f-display); color:var(--ink); }

/* ---------- hero ---------- */
.saga-hero { position:relative; overflow:hidden; padding-block:clamp(36px,5vw,72px) clamp(44px,6vw,80px); }
.saga-hero > .hexfield { max-width:none !important; margin:0 !important; z-index:0; }
.saga-hero .saga-wrap { position:relative; z-index:1; }
.saga-hero__copy { display:grid; gap:24px; justify-items:start; }
.saga-hero__copy .is-style-saga-lead { font-size:clamp(1.02rem,1.5vw,1.16rem); }
.saga-page-hero { position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,68px); }
.saga-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:url("../img/vox-three.webp") center/contain no-repeat; mask:url("../img/vox-three.webp") center/contain no-repeat; pointer-events:none; }
.saga-page-hero .saga-hero__copy { max-width:44rem; }

/* ---------- platform: accordion ---------- */
.saga-feat { display:grid; }
.saga-feat details { border-top:1px solid var(--line); padding:0; }
.saga-feat details:last-child { border-bottom:1px solid var(--line); }
.saga-feat summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(120px,11.5rem) minmax(0,1fr) 36px; align-items:center; column-gap:clamp(16px,3vw,32px); padding-block:24px; border-radius:8px; text-align:left; font:400 1.35rem/1.3 var(--f-display); }
.saga-feat summary::-webkit-details-marker { display:none; }
.saga-feat summary br { display:none; }
.saga-feat summary strong { display:block; margin:0; font:500 .72rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); }
.saga-feat summary:hover { color:var(--accent); }
.saga-feat summary::after { content:""; flex:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); background:linear-gradient(var(--ink),var(--ink)) center/12px 1.6px no-repeat, linear-gradient(var(--ink),var(--ink)) center/1.6px 12px no-repeat, var(--surface); }
.saga-feat details[open] summary::after { background:linear-gradient(var(--ink),var(--ink)) center/12px 1.6px no-repeat, var(--accent-soft); border-color:var(--accent); }
.saga-feat details > ul { padding-bottom:28px; color:var(--ink-2); font-size:.95rem; }
.saga-feat details > ul strong { color:var(--ink); font-weight:600; }

/* ---------- pricing ---------- */
.saga-plans { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.saga-plan { position:relative; display:grid; gap:6px; align-content:start; padding:26px 20px 22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--saga-radius-card); overflow:hidden; }
.saga-plan::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:color-mix(in srgb, var(--accent) calc(var(--t,1) * 22%), var(--line)); }
.saga-plans > .saga-plan:nth-child(1) { --t:1; } .saga-plans > .saga-plan:nth-child(2) { --t:2; } .saga-plans > .saga-plan:nth-child(3) { --t:3; } .saga-plans > .saga-plan:nth-child(4) { --t:4; } .saga-plans > .saga-plan:nth-child(5) { --t:5; }
.saga-plan--start { border-color:var(--teal); box-shadow:var(--shadow); }
.saga-plan__flag { position:absolute !important; 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; }
.saga-plan__name { font:300 2.5rem/1 var(--f-display) !important; letter-spacing:-.02em !important; margin-bottom:12px !important; }
.saga-plan__name.is-small { font-size:1.5rem !important; padding-top:.6rem; }
.saga-plan__label { font:600 .68rem/1.3 var(--f-display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:10px !important; }
.saga-plan__value { font:500 1.05rem/1.3 var(--f-display); font-variant-numeric:tabular-nums; }
.saga-plan__price { font:500 1.9rem/1.3 var(--f-display); letter-spacing:-.02em; }
.saga-plan__price small { display:block; font:400 .78rem/1.3 var(--f-body); color:var(--ink-2); letter-spacing:0; }
.saga-fine { margin-top:20px !important; font-size:.84rem; color:var(--ink-2); max-width:46rem; }
@media (max-width:1100px) { .saga-plans { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .saga-plans { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px) { .saga-plans { grid-template-columns:minmax(0,1fr); } }

/* ---------- quote band and carousel ---------- */
.saga-band { background:var(--band); color:var(--band-ink); position:relative; overflow:hidden; isolation:isolate; }
.saga-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:url("../img/vox-three.webp") center/contain no-repeat; mask:url("../img/vox-three.webp") center/contain no-repeat; pointer-events:none; }
.saga-band .saga-wrap { position:relative; }
.saga-band h2 { color:#fff; }
.saga-band .is-style-saga-eyebrow { color:var(--band-accent); }
.saga-band h2 em { color:var(--band-accent); }
.saga-band .is-style-saga-lead { color:var(--band-mute); max-width:44rem; }
.saga-carousel { display:grid; grid-template-columns:1fr auto; gap:0 16px; align-items:center; }
.saga-carousel__track { grid-column:1 / -1; 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 !important; }
.saga-carousel__track::-webkit-scrollbar { display:none; }
.saga-carousel__track:focus-visible { outline:3px solid var(--band-accent); outline-offset:2px; border-radius:24px; }
.saga-quote { flex:0 0 calc((100% - 22px) / 2); min-width:0; scroll-snap-align:start; position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-rows:auto 1fr auto; gap:20px; padding:clamp(26px,3.2vw,40px) !important; margin:0 !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:var(--saga-radius-quote); background:linear-gradient(155deg,rgba(255,255,255,.11),rgba(255,255,255,.045)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; }
.saga-quote::before { content:"\201C"; font:300 5.2rem/.7 var(--f-display); color:var(--band-accent); height:.42em; display:block; }
.saga-quote > * { position:relative; z-index:1; }
.saga-quote p { font:300 clamp(1.08rem,1.7vw,1.22rem)/1.6 var(--f-display); max-width:30em; color:#fff; }
.saga-quote cite { font-style:normal; display:grid; gap:2px; font-size:.9rem; color:var(--band-mute); padding-top:18px; border-top:1px solid rgba(255,255,255,.16); }
.saga-quote cite br { display:none; }
.saga-quote cite strong { color:var(--band-accent); font:600 .95rem/1.3 var(--f-display); }
.saga-quote::after { content:""; position:absolute; z-index:0; width:62%; aspect-ratio:760/873; background:#fff; opacity:.2; -webkit-mask:url("../img/vox-outline.webp") center/contain no-repeat; mask:url("../img/vox-outline.webp") center/contain no-repeat; pointer-events:none; }
.saga-quote:nth-child(odd)::after { right:-14%; bottom:-30%; }
.saga-quote:nth-child(even)::after { right:-10%; top:-34%; width:68%; }
.saga-qlink { margin:0 !important; }
.saga-qlink a { color:#fff; font:500 .95rem/1 var(--f-display); text-decoration:none; display:inline-flex; gap:.5rem; padding:10px 0; border-bottom:1.5px solid rgba(255,255,255,.4); }
.saga-qlink a:hover { border-color:#fff; }
.saga-qctl { display:flex; gap:10px; margin:0; }
.saga-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; }
.saga-qarrow:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7); }
.saga-qarrow[disabled] { opacity:.35; cursor:default; background:transparent; border-color:rgba(255,255,255,.35); }
.saga-qarrow:focus-visible { outline:3px solid var(--band-accent); outline-offset:2px; border-radius:99px; }
.saga-qarrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:820px) { .saga-quote { flex-basis:100%; } .saga-quote::after { width:58%; } }

/* ---------- partner ticker ---------- */
.saga-section--ticker { padding-inline:0; }
.saga-section--ticker > .saga-wrap { padding-inline:clamp(16px,4vw,32px); }
.saga-section--ticker .saga-head { margin-bottom:clamp(20px,3vw,34px) !important; }
.saga-ticker { position:relative; overflow:hidden; }
.saga-ticker__track { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px 8px; padding-inline:16px; }
.saga-ticker__track > .wp-block-image { flex:none; margin:0 !important; display:grid; place-items:center; height:78px; min-width:148px; padding:0 clamp(32px,4.4vw,56px); border-radius:16px; transition:background-color .2s ease, box-shadow .2s ease; }
.saga-ticker__track > .wp-block-image 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; }
.saga-ticker__track > .wp-block-image:hover { background:#fff; box-shadow:0 0 0 1px var(--line), var(--shadow); }
.saga-ticker__track > .wp-block-image:hover img { filter:none; opacity:1; transform:scale(1.04); }
.h-17 { --h:17px; } .h-27 { --h:27px; } .h-30 { --h:30px; } .h-34 { --h:34px; } .h-46 { --h:46px; }
.saga-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%); }
.saga-ticker.is-marquee .saga-ticker__track { flex-wrap:nowrap; justify-content:flex-start; width:max-content; padding-inline:0; gap:0; animation:saga-ticker var(--dur,40s) linear infinite; will-change:transform; }
.saga-ticker.is-marquee:hover .saga-ticker__track, .saga-ticker.is-marquee:focus-within .saga-ticker__track { animation-play-state:paused; }
@keyframes saga-ticker { to { transform:translateX(-50%); } }

/* ---------- case studies ---------- */
.saga-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; }
.saga-cs:hover { border-color:var(--teal); box-shadow:var(--shadow-lg); }
.saga-cs__cover { margin:0 !important; border-bottom:1px solid var(--line); background:var(--surface-2); }
.saga-cs__cover img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.saga-cs__body { display:flex; flex-direction:column; gap:16px; flex:1; padding:clamp(22px,2.8vw,32px); }
.saga-cs h3 { font:600 1.45rem/1.2 var(--f-display); letter-spacing:-.01em; }
.saga-cs__kick { font:500 .92rem/1.4 var(--f-display); color:var(--ink-2); margin-top:-8px !important; }
.saga-cs__body > p { color:var(--ink-2); line-height:1.6; }
.saga-cs__foot { margin-top:auto !important; padding-top:8px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.saga-cs__foot > * { margin:0 !important; }
.saga-cs__meta { font:500 .82rem/1.3 var(--f-display); color:var(--ink-2) !important; }

/* ---------- style guide ---------- */
.saga-swatches { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.saga-swatch { padding:18px; border-radius:14px; border:1px solid var(--line); min-height:96px; }
.saga-swatch p { font-size:.85rem; line-height:1.4; color:inherit; }
.saga-swatch--purple{background:var(--saga-purple);color:#fff;}
.saga-swatch--purple-light{background:var(--saga-purple-light);color:#fff;}
.saga-swatch--purple-soft{background:var(--saga-purple-soft);color:var(--ink);}
.saga-swatch--teal{background:var(--saga-teal);color:#fff;}
.saga-swatch--teal-dark{background:var(--saga-teal-dark);color:#fff;}
.saga-swatch--teal-soft{background:var(--saga-teal-soft);color:var(--ink);}
.saga-swatch--ink{background:var(--saga-ink);color:#fff;}
.saga-swatch--ink-2{background:var(--saga-ink-2);color:#fff;}
.saga-swatch--bg{background:var(--saga-bg);color:var(--ink);}
.saga-swatch--surface{background:var(--saga-surface);color:var(--ink);}
.saga-swatch--surface-2{background:var(--saga-surface-2);color:var(--ink);}
.saga-swatch--line{background:var(--saga-line);color:var(--ink);}


/* ---------- hero device: phone with the passport, QR code behind it ---------- */
.saga-device { position:relative; width:100%; max-width:520px; aspect-ratio:1 / 1.08; margin-inline:auto; }
.saga-device__qr { position:absolute; left:0; top:13%; width:60%; display:grid; gap:10px; justify-items:center; text-align:center; padding:20px 20px 16px; background:#fff; border:1px solid var(--line); border-radius:22px; transform:rotate(-7deg); box-shadow:0 14px 36px rgba(30,25,48,.1); }
.saga-device__qr img { display:block; width:100%; height:auto; }
.saga-device__qr span { font:600 .72rem/1.3 var(--f-display); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.saga-device__phone { position:absolute; right:2%; top:0; width:50%; padding:9px; background:#14111c; border-radius:36px; box-shadow:0 22px 48px rgba(30,25,48,.2); }
.saga-device__phone img { display:block; width:100%; height:auto; border-radius:28px; }
.saga-device--solo { aspect-ratio:auto; max-width:210px; }
.saga-device--solo .saga-device__phone { position:relative; right:auto; width:100%; }

/* ---------- app screenshots ---------- */
.saga-shot, .mock-bg .saga-shot { margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.saga-shot img { display:block; width:100%; height:auto; }
.saga-shots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,36px); margin-top:clamp(40px,5vw,64px); }
.saga-shot-card { display:grid; gap:14px; align-content:start; }
.saga-shot-card p { font-size:.92rem; color:var(--ink-2); }
.saga-shot-card p strong { color:var(--ink); font-weight:600; }
@media (max-width:760px) { .saga-shots { grid-template-columns:minmax(0,1fr); } }

/* ---------- Why PSQR ---------- */
.saga-copy p { color:var(--ink-2); font-size:.95rem; }
.saga-copy li { color:var(--ink); font-size:.95rem; }
.saga-cs { scroll-margin-top:90px; }

/* ---------- case studies: small cards in a row ---------- */
.saga-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width:980px) { .saga-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .saga-grid--4 { grid-template-columns:minmax(0,1fr); } }
.saga-cs--mini { border-radius:18px; scroll-margin-top:90px; }
.saga-cs--mini .saga-cs__body { padding:16px 18px 20px; gap:4px; flex:1; }
.saga-cs--mini h3 { font:600 1.02rem/1.3 var(--f-display); letter-spacing:0; }
.saga-cs--mini .saga-cs__kick { font-size:.84rem; margin-top:0 !important; }
.saga-center { justify-content:center; margin-top:clamp(28px,4vw,44px) !important; }

/* ---------- case study card links ---------- */
.saga-cs--mini h3 a { color:inherit; text-decoration:none; }
.saga-cs--mini h3 a:hover { color:var(--accent); }
.saga-cs--mini .saga-cs__go { margin-top:auto !important; padding-top:10px; font:600 .84rem/1.3 var(--f-display); }
.saga-cs--mini .saga-cs__go a { color:var(--accent); text-decoration:none; }
.saga-cs--mini .saga-cs__go a:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- pricing note and spaced label ---------- */
.saga-small-label--spaced { margin-top:28px !important; }
.saga-note { display:grid; grid-template-columns:auto 1fr; column-gap:var(--saga-bullet-gap); max-width:46rem; margin-top:22px !important; padding:16px 20px; border-radius:14px; background:var(--teal-soft); font-size:.92rem; line-height:1.55; }
.saga-note::before { content:""; width:var(--saga-bullet-w); height:var(--saga-bullet-h); margin-top:4px; background:var(--teal); clip-path:var(--hex-clip); }
.saga-note p { font-size:.92rem; color:var(--ink); }

/* ---------- platform: compliance frame (regulations and standards side by side) ---------- */
.saga-compliance { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:clamp(32px,4vw,52px); padding:clamp(22px,3vw,34px); align-items:start; }
.saga-compliance__col { display:grid; gap:12px; align-content:start; }
.saga-compliance__col + .saga-compliance__col { border-left:1px solid var(--line); padding-left:clamp(24px,4vw,56px); }
.saga-compliance__col:first-child { padding-right:clamp(24px,4vw,56px); }
.saga-compliance .saga-small-label { margin-bottom:0 !important; }
.saga-pills--four { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.saga-pills--four > li { text-align:center; padding-inline:8px; }
@media (max-width:820px) {
  .saga-compliance { grid-template-columns:minmax(0,1fr); }
  .saga-compliance__col:first-child { padding-right:0; padding-bottom:24px; }
  .saga-compliance__col + .saga-compliance__col { border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:24px; }
}
@media (max-width:520px) { .saga-pills--four { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px) { .saga-feat summary { grid-template-columns:minmax(0,1fr) 36px; row-gap:6px; } .saga-feat summary strong { grid-column:1 / -1; } }

/* ---------- older markup (why-grid, value-grid): bullet beside the text, same as everywhere ---------- */
.why-grid div, .value-grid div { grid-template-columns:auto 1fr; column-gap:var(--saga-bullet-gap); row-gap:6px; }
.why-grid .hx, .value-grid .hx { grid-row:1 / span 2; width:var(--saga-bullet-w); height:var(--saga-bullet-h); margin:5px 0 0; }