/* The last pages in the old body, on the v2 design (7 Oct 2026, Mohamed: "ok let's fix them but you must be extremley careful
   with the functions of the quote form"): the contact thank-you page (8 languages), /carbon-reduction-plan, /sitemap, the
   page-not-found page and /client-portal. Loaded after site-v2.css and site-v2-pages.css by their v2 bodies only
   (config/skin.php 'misc'); every rule is scoped under the five page wrappers .sv2-pg-thanks, .sv2-pg-carbon, .sv2-pg-sitemap,
   .sv2-pg-404 and .sv2-pg-portal. The pages use the house components of site-v2.css; the few patterns they share with the
   legal pages (document date line) and the company pages (kicker, clean columns, figures, trust row) are restated here for
   these wrappers, because those files are scoped to their own pages. New text sizes are in rem. */

/* ===== all five heroes on tablets (601-1100px): the words run further across the photo there, so the shade on the start
   side is deeper, as the language pages do below 1100px (the bright brass slot, the sky and the brickwork stay behind
   AA contrast for the lead) ===== */
@media(min-width:601px) and (max-width:1100px){
:is(.sv2-pg-thanks,.sv2-pg-carbon,.sv2-pg-sitemap,.sv2-pg-404,.sv2-pg-portal) .sv2-hero-media::after{background:linear-gradient(90deg,rgba(4,16,33,.82) 0%,rgba(4,16,33,.7) 62%,rgba(4,16,33,.24) 100%),linear-gradient(0deg,rgba(4,16,33,.45),transparent 42%)}
[dir="rtl"] :is(.sv2-pg-thanks,.sv2-pg-carbon,.sv2-pg-sitemap,.sv2-pg-404,.sv2-pg-portal) .sv2-hero-media::after{background:linear-gradient(270deg,rgba(4,16,33,.82) 0%,rgba(4,16,33,.7) 62%,rgba(4,16,33,.24) 100%),linear-gradient(0deg,rgba(4,16,33,.45),transparent 42%)}
}

/* ===== contact thank-you ===== */
/* the old green tick in its circle, drawn: a white tick in the accent ring */
.sv2-pg-thanks .sv2-ty-tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(4,16,33,.5);box-shadow:inset 0 0 0 2px var(--accent);color:#fff}
.sv2-pg-thanks .sv2-ty-tick svg{display:block;width:26px;height:26px}
.sv2-pg-thanks .sv2-hero h1{margin-top:22px}
/* the three next steps: the homepage process (light band, see the shared rules below), three across down to tablets */
.sv2-pg-thanks .sv2-ty-steps p{max-width:340px}
@media(min-width:601px){.sv2-pg-thanks .sv2-ty-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:601px) and (max-width:1100px){
.sv2-pg-thanks .sv2-ty-steps li:nth-child(3){margin-top:0;padding-top:30px;padding-inline-start:28px;border-top:0;border-inline-start:1px solid var(--line-strong)}
.sv2-pg-thanks .sv2-ty-steps li:nth-child(3)::before{inset-inline-start:28px}
}
/* phones: the words on the navy top of the hero, the letter slot whole in its lower part, faded in at the top (the company
   pages' phone hero), so it reads as a letter slot instead of a dark texture behind the buttons */
@media(max-width:600px){
.sv2-pg-thanks .sv2-hero{min-height:0;background:var(--deep)}
.sv2-pg-thanks .sv2-hero-inner{padding-bottom:210px}
.sv2-pg-thanks .sv2-hero-media{top:auto;height:250px}
.sv2-pg-thanks .sv2-hero-media img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%);mask-image:linear-gradient(180deg,transparent 0,#000 46%)}
.sv2-pg-thanks .sv2-hero-media::after{opacity:.5}
.sv2-pg-thanks .sv2-ty-tick{width:48px;height:48px}
.sv2-pg-thanks .sv2-ty-tick svg{width:22px;height:22px}
.sv2-pg-thanks .sv2-hero h1{margin-top:16px}
}

/* ===== the homepage process on a light band (thank-you next steps, client portal how it works): orange numbers,
   ink headings, muted text, light hairlines; the layout is site-v2.css .sv2-steps unchanged ===== */
:is(.sv2-pg-thanks .sv2-ty-steps,.sv2-pg-portal .sv2-pt-steps){border-top-color:var(--line-strong)}
:is(.sv2-pg-thanks .sv2-ty-steps,.sv2-pg-portal .sv2-pt-steps) li+li{border-inline-start-color:var(--line-strong)}
:is(.sv2-pg-thanks .sv2-ty-steps,.sv2-pg-portal .sv2-pt-steps) .sv2-step-no{color:var(--orange)}
:is(.sv2-pg-thanks .sv2-ty-steps,.sv2-pg-portal .sv2-pt-steps) h3{color:var(--ink)}
:is(.sv2-pg-thanks .sv2-ty-steps,.sv2-pg-portal .sv2-pt-steps) p{color:var(--muted)}
@media(max-width:1100px){:is(.sv2-pg-thanks .sv2-ty-steps,.sv2-pg-portal .sv2-pt-steps) li:nth-child(n+3){border-top-color:var(--line-strong)}}
@media(max-width:600px){:is(.sv2-pg-thanks .sv2-ty-steps,.sv2-pg-portal .sv2-pt-steps) li:nth-child(n){border-top-color:var(--line-strong)}}

/* ===== carbon reduction plan: the legal pages' document ===== */
/* hero: the version line under the lead, with the short orange rule (the legal pages' date line) */
.sv2-pg-carbon .sv2-hero-lead{width:fit-content;color:#fff}
/* a document: a shorter hero, so the plan's details and the PDF link start in the first screen of a laptop */
.sv2-pg-carbon .sv2-cr-hero{min-height:min(400px,calc(100svh - var(--header)))}
.sv2-pg-carbon .sv2-cr-version{display:flex;width:fit-content;align-items:center;gap:12px;margin-top:24px;font:500 .9375rem/1.45 Inter,"Noto Sans",sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
.sv2-pg-carbon .sv2-cr-version::before{content:"";flex:0 0 auto;width:22px;height:2px;background:var(--accent)}
@media(min-width:601px){.sv2-pg-carbon .sv2-hero h1{max-width:11.5em}}
/* the four plan details: label above value, between hairlines, a short orange rule over each */
.sv2-pg-carbon .sv2-cr-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 52px;border-top:1px solid var(--line-strong)}
.sv2-pg-carbon .sv2-cr-facts>div{position:relative;min-width:0;padding:24px 28px 4px}
.sv2-pg-carbon .sv2-cr-facts>div:first-child{padding-inline-start:0}
.sv2-pg-carbon .sv2-cr-facts>div+div{border-inline-start:1px solid var(--line-strong)}
.sv2-pg-carbon .sv2-cr-facts>div::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:40px;height:3px;background:var(--accent)}
.sv2-pg-carbon .sv2-cr-facts>div+div::before{inset-inline-start:28px}
.sv2-pg-carbon .sv2-cr-facts dt{font:600 .75rem/1.5 Inter,"Noto Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.sv2-pg-carbon .sv2-cr-facts dd{margin:8px 0 0;font:500 1rem/1.6 Inter,"Noto Sans",sans-serif;color:var(--ink)}
.sv2-pg-carbon .sv2-cr-pdf{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-block:-10px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(199,66,13,.55);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .18s}
.sv2-pg-carbon .sv2-cr-pdf:hover{color:var(--orange);text-decoration-color:var(--orange)}
.sv2-pg-carbon .sv2-cr-dl{flex:0 0 auto;width:18px;height:18px;color:var(--orange)}
/* the document: heading beside the text on laptops, more room for the tables than the legal pages give */
.sv2-pg-carbon .sv2-article{grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr)}
.sv2-pg-carbon .sv2-cr-body{min-width:0}
.sv2-pg-carbon .sv2-cr-doc .sv2-prose{max-width:760px}
.sv2-pg-carbon .sv2-cr-doc .sv2-prose :is(h3,h4){margin-top:36px}
.sv2-pg-carbon .sv2-cr-doc .sv2-prose>:is(h3,h4):first-child{margin-top:0}
.sv2-pg-carbon .sv2-cr-doc .sv2-prose>:is(h3,h4)+*{margin-top:12px}
/* the two tables: the house table, figures to the end of the row, the totals on paper */
.sv2-pg-carbon .sv2-cr-table{margin-block:28px}
.sv2-pg-carbon .sv2-cr-table:not(.sv2-cr-wide){max-width:760px}
.sv2-pg-carbon .sv2-cr-table .sv2-table :is(th,td):last-child{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.sv2-pg-carbon .sv2-cr-table .sv2-table tr.is-total td{background:var(--paper);font-weight:600;color:var(--ink)}
.sv2-pg-carbon .sv2-cr-wide{overflow-x:auto;overscroll-behavior-x:contain}
/* when the table is wider than its card (phones), soft shadows at the edges show there is more to scroll (no words added) */
.sv2-pg-carbon .sv2-cr-wide{background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/40px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(16,29,48,.22),rgba(16,29,48,0)) 0 0/16px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(16,29,48,.22),rgba(16,29,48,0)) 100% 0/16px 100% no-repeat scroll,#fff}
.sv2-pg-carbon .sv2-cr-wide:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sv2-pg-carbon .sv2-cr-wide .sv2-table{min-width:560px}
.sv2-pg-carbon .sv2-cr-wide .sv2-table :is(th,td){padding-inline:18px}
.sv2-pg-carbon .sv2-cr-wide .sv2-table td{font-size:.9375rem;line-height:1.55}
.sv2-pg-carbon .sv2-cr-wide .sv2-table td:first-child{font-weight:600;color:var(--ink)}
.sv2-pg-carbon .sv2-cr-wide .sv2-table th:nth-child(1){width:23%}
.sv2-pg-carbon .sv2-cr-wide .sv2-table th:nth-child(2){width:24%}
.sv2-pg-carbon .sv2-cr-wide .sv2-table th:nth-child(4){width:11%}
.sv2-pg-carbon .sv2-cr-note{margin-top:20px;max-width:760px;font-size:.9375rem;line-height:1.7;color:var(--soft)}
@media(max-width:1100px){
.sv2-pg-carbon .sv2-article{grid-template-columns:minmax(0,1fr)}
.sv2-pg-carbon .sv2-article>h2{position:static}
.sv2-pg-carbon .sv2-cr-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-carbon .sv2-cr-facts>div:nth-child(odd){padding-inline-start:0;border-inline-start:0}
.sv2-pg-carbon .sv2-cr-facts>div:nth-child(odd)::before{inset-inline-start:0}
.sv2-pg-carbon .sv2-cr-facts>div:nth-child(n+3){margin-top:20px;border-top:1px solid var(--line-strong)}
}
@media(max-width:600px){
.sv2-pg-carbon .sv2-cr-version{margin-top:18px;font-size:.875rem}
.sv2-pg-carbon .sv2-cr-facts{grid-template-columns:minmax(0,1fr);margin-bottom:40px;border-top:0}
.sv2-pg-carbon .sv2-cr-facts>div,.sv2-pg-carbon .sv2-cr-facts>div:nth-child(n){margin-top:0;padding:20px 0 14px;border-inline-start:0;border-top:1px solid var(--line-strong)}
.sv2-pg-carbon .sv2-cr-facts>div::before,.sv2-pg-carbon .sv2-cr-facts>div:nth-child(n)::before{inset-inline-start:0}
.sv2-pg-carbon .sv2-cr-table .sv2-table :is(th,td):nth-child(1){width:64%}
.sv2-pg-carbon .sv2-cr-table .sv2-table :is(th,td):nth-child(2){width:36%}
.sv2-pg-carbon .sv2-cr-wide .sv2-table{table-layout:auto}
.sv2-pg-carbon .sv2-cr-wide .sv2-table :is(th,td):nth-child(n){width:auto}
.sv2-pg-carbon .sv2-cr-wide .sv2-table :is(th,td){padding-inline:12px}
.sv2-pg-carbon .sv2-cr-note{font-size:.875rem}
}

/* ===== site map: an index ===== */
/* a short hero, so the list starts in the first screen (the page's job, as on the accepted index) */
.sv2-pg-sitemap .sv2-sm-hero{min-height:min(400px,calc(100svh - var(--header)))}
.sv2-pg-sitemap .sv2-sm-hero .sv2-hero-inner{padding-block:44px 52px}
.sv2-pg-sitemap .sv2-sm-hero h1{margin-top:0}
.sv2-pg-sitemap .sv2-sm-index{padding-block:80px 96px}
/* each group: the heading (with its count) beside its links, hairlines between groups */
.sv2-pg-sitemap .sv2-sm-group{grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr);gap:20px 64px;padding-block:44px}
.sv2-pg-sitemap .sv2-sm-group:first-child{padding-top:0}
.sv2-pg-sitemap .sv2-sm-group:last-child{padding-bottom:0}
.sv2-pg-sitemap .sv2-sm-group>h2{font-size:clamp(1.5rem,2vw,2rem);line-height:1.2}
.sv2-pg-sitemap .sv2-sm-count{font-weight:500;color:var(--soft)}
.sv2-pg-sitemap .sv2-sm-links{--sm-min:min(12.5rem,calc(50% - 14px));display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sm-min),1fr));column-gap:28px;border-top:1px solid var(--line-strong)}
.sv2-pg-sitemap .sv2-sm-links.is-narrow{--sm-min:min(9rem,calc(50% - 14px))}
.sv2-pg-sitemap .sv2-sm-links.is-wide{--sm-min:min(17rem,100%)}
.sv2-pg-sitemap .sv2-sm-links li{min-width:0;border-bottom:1px solid var(--line)}
.sv2-pg-sitemap .sv2-sm-links a{display:flex;align-items:center;min-height:46px;padding-block:10px;font:500 1rem/1.35 Inter,"Noto Sans",sans-serif;color:var(--ink);overflow-wrap:anywhere;transition:color .18s}
.sv2-pg-sitemap .sv2-sm-links a:hover{color:var(--orange);text-decoration:underline;text-decoration-color:rgba(199,66,13,.55);text-decoration-thickness:1px;text-underline-offset:4px}
/* the closing total and the XML link */
.sv2-pg-sitemap .sv2-sm-foot{padding-block:48px}
.sv2-pg-sitemap .sv2-sm-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 40px}
.sv2-pg-sitemap .sv2-sm-total{font:600 1.375rem/1.35 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.sv2-pg-sitemap .sv2-sm-xml{margin-top:0}
@media(max-width:1100px){.sv2-pg-sitemap .sv2-sm-group{grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);column-gap:44px}}
@media(max-width:850px){.sv2-pg-sitemap .sv2-sm-group{grid-template-columns:minmax(0,1fr);row-gap:18px}}
@media(max-width:600px){
.sv2-pg-sitemap .sv2-sm-hero{min-height:0}
.sv2-pg-sitemap .sv2-sm-hero .sv2-hero-inner{padding:28px 24px 132px}
.sv2-pg-sitemap .sv2-sm-index{padding-block:52px 64px}
.sv2-pg-sitemap .sv2-sm-group{padding-block:36px}
.sv2-pg-sitemap .sv2-sm-group>h2{font-size:1.5rem}
.sv2-pg-sitemap .sv2-sm-links{column-gap:16px}
.sv2-pg-sitemap .sv2-sm-links,.sv2-pg-sitemap .sv2-sm-links.is-narrow{--sm-min:calc(50% - 8px)}
.sv2-pg-sitemap .sv2-sm-links.is-wide{--sm-min:100%}
.sv2-pg-sitemap .sv2-sm-links a{min-height:44px;font-size:.9375rem}
.sv2-pg-sitemap .sv2-sm-total{font-size:1.25rem}
.sv2-pg-sitemap .sv2-sm-foot-row{flex-direction:column;align-items:flex-start}
}

/* ===== page not found ===== */
/* a short hero with the 404 in big orange numerals, then the panel BELOW it, never over the hero (Mohamed, 7 Oct 2026, on the
   quote form: "i dont like the fotm going on top of the hero bit"; VERDICTS: ask before using that overlap elsewhere): on a laptop
   the links, the buttons and the phone line sit inside the first screen */
.sv2-pg-404 .sv2-nf-hero{min-height:0;align-items:flex-start}
.sv2-pg-404 .sv2-nf-hero .sv2-hero-inner{padding-block:30px 44px}
.sv2-pg-404 .sv2-nf-code{margin:0;max-width:none;font:600 clamp(5rem,7.4vw,7.25rem)/.92 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.05em;color:#ff914e}
.sv2-pg-404 .sv2-nf-title{margin-top:10px;max-width:16em;font-size:clamp(2rem,3.2vw,3.125rem);font-weight:500;line-height:1.08;letter-spacing:-.04em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
.sv2-pg-404 .sv2-nf-hero .sv2-hero-lead{margin-top:14px;color:#fff}
[dir="rtl"] .sv2-pg-404 .sv2-nf-code{line-height:1}
[dir="rtl"] .sv2-pg-404 .sv2-nf-title{line-height:1.35}
.sv2-pg-404 .sv2-nf-main{padding-block:40px 96px;background:#fff}
.sv2-pg-404 .sv2-nf-panel{position:relative;margin-top:0;padding:28px 40px 28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(16,29,48,.05),0 30px 60px -36px rgba(16,29,48,.5)}
.sv2-pg-404 .sv2-nf-panel>h3{font:600 1.375rem/1.3 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.sv2-pg-404 .sv2-nf-panel>h3::before{content:"";display:block;width:36px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:14px}
.sv2-pg-404 .sv2-nf-links{margin-top:16px}
.sv2-pg-404 .sv2-nf-links a{min-height:52px;padding-block:12px}
/* the two buttons, and the phone line beside them on laptops */
.sv2-pg-404 .sv2-nf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:24px}
.sv2-pg-404 .sv2-nf-actions{display:flex;flex-wrap:wrap;gap:12px}
.sv2-pg-404 .sv2-nf-btn-ink{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sv2-pg-404 .sv2-nf-btn-ink:hover{background:var(--ink);color:#fff}
.sv2-pg-404 .sv2-nf-help{font-size:1rem;line-height:1.6;color:var(--muted)}
.sv2-pg-404 .sv2-nf-help a{display:inline-block;padding-block:10px;margin-block:-6px;font-weight:600;color:var(--ink);white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(199,66,13,.55);text-decoration-thickness:1px;text-underline-offset:4px}
.sv2-pg-404 .sv2-nf-help a:hover{color:var(--orange);text-decoration-color:var(--orange)}
@media(max-width:600px){
/* the signs sit behind the words on a phone: a deeper shade there */
.sv2-pg-404 .sv2-hero-media::after,[dir="rtl"] .sv2-pg-404 .sv2-hero-media::after{opacity:.9}
.sv2-pg-404 .sv2-nf-hero .sv2-hero-inner{padding:28px 24px 36px}
.sv2-pg-404 .sv2-nf-code{font-size:5rem}
.sv2-pg-404 .sv2-nf-title{font-size:2rem;line-height:1.12}
.sv2-pg-404 .sv2-nf-main{padding-top:24px;padding-bottom:64px}
.sv2-pg-404 .sv2-nf-panel{margin-top:0;padding:24px 20px 22px;border-radius:16px}
.sv2-pg-404 .sv2-nf-panel>h3{font-size:1.25rem}
.sv2-pg-404 .sv2-nf-foot{flex-direction:column;align-items:stretch}
.sv2-pg-404 .sv2-nf-actions{flex-direction:column}
.sv2-pg-404 .sv2-nf-actions .sv2-btn{width:100%;white-space:normal;text-align:center}
}

/* ===== client portal: the company pages' business look ===== */
/* section kicker: a short label above a heading (the old pill badges, same words, no pill) */
.sv2-pg-portal .sv2-pt-kicker{display:flex;align-items:center;gap:12px;margin-bottom:16px;font:600 .8125rem/1.5 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.sv2-pg-portal .sv2-pt-kicker::before{content:"";flex:0 0 auto;width:28px;height:3px;border-radius:2px;background:var(--accent)}
.sv2-pg-portal :is(.sv2-navy,.sv2-hero) .sv2-pt-kicker{color:var(--warm)}
@media(min-width:601px){.sv2-pg-portal .sv2-hero h1{max-width:11em}}
.sv2-pg-portal .sv2-hero .sv2-pt-kicker{display:inline-flex;margin-top:18px;margin-bottom:0;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 18px rgba(0,0,0,.35)}
/* the six features: clean columns, a hairline and a short orange rule over each (the old icon cards) */
.sv2-pg-portal .sv2-pt-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.sv2-pg-portal .sv2-pt-cols>li{position:relative;padding-top:28px;border-top:1px solid var(--line-strong)}
.sv2-pg-portal .sv2-pt-cols>li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:40px;height:3px;background:var(--accent)}
.sv2-pg-portal .sv2-pt-cols h3{font-size:1.375rem;line-height:1.28;color:var(--ink)}
.sv2-pg-portal .sv2-pt-cols p{margin-top:10px;font-size:1rem;line-height:1.7;color:var(--muted)}
/* the four screenshots beside their words; the screenshot always takes the wider column */
.sv2-pg-portal .sv2-pt-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px 72px;align-items:center}
.sv2-pg-portal .sv2-pt-split.is-flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.sv2-pg-portal .sv2-pt-copy>h2{font-size:clamp(2rem,3vw,2.875rem);line-height:1.1}
.sv2-pg-portal .sv2-pt-lead{margin-top:18px;font-size:1.0625rem;line-height:1.75;color:var(--muted)}
.sv2-pg-portal .sv2-navy .sv2-pt-lead{color:var(--on-dark)}
.sv2-pg-portal .sv2-pt-copy .sv2-checklist{margin-block:26px 0}
.sv2-pg-portal .sv2-pt-copy .sv2-checklist li{font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.sv2-pg-portal .sv2-pt-copy .sv2-checks{margin-block:24px 0}
.sv2-pg-portal .sv2-navy .sv2-pt-copy .sv2-checks li{font-size:1.0625rem;color:#e6ebf0}
.sv2-pg-portal .sv2-pt-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* the real portal screenshots: whole, never cropped, in a quiet frame */
.sv2-pg-portal .sv2-pt-shot{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(16,29,48,.05),0 30px 60px -34px rgba(16,29,48,.45)}
.sv2-pg-portal .sv2-pt-shot img{width:100%;height:auto}
.sv2-pg-portal .sv2-navy .sv2-pt-shot{border-color:rgba(255,255,255,.16);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
/* the four figures (homepage proof numbers) */
.sv2-pg-portal .sv2-pt-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong)}
.sv2-pg-portal .sv2-pt-figures>li{position:relative;padding:28px 28px 4px}
.sv2-pg-portal .sv2-pt-figures>li:first-child{padding-inline-start:0}
.sv2-pg-portal .sv2-pt-figures>li+li{border-inline-start:1px solid var(--line-strong)}
.sv2-pg-portal .sv2-pt-figures>li::before{content:"";position:absolute;top:-2px;inset-inline-start:0;width:48px;height:3px;background:var(--accent)}
.sv2-pg-portal .sv2-pt-figures>li+li::before{inset-inline-start:28px}
.sv2-pg-portal .sv2-pt-fig{display:block;font:600 clamp(2.5rem,4vw,3.75rem)/1 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.04em;color:var(--orange)}
.sv2-pg-portal .sv2-pt-figlabel{display:block;margin-top:12px;font:600 1rem/1.4 Inter,sans-serif;color:var(--ink)}
/* on navy (the figures follow the light process band, so they sit on navy with the warm orange of the navy bands) */
.sv2-pg-portal .sv2-navy .sv2-pt-figures,.sv2-pg-portal .sv2-navy .sv2-pt-figures>li+li{border-color:rgba(255,255,255,.16)}
/* white and a little smaller, as on the homepage (Mohamed, 16 Jul 2026: "make them all white and a bit smaller, they are too big now") */
.sv2-pg-portal .sv2-navy .sv2-pt-fig{color:#fff;font-size:clamp(2.25rem,3.2vw,3rem)}
.sv2-pg-portal .sv2-navy .sv2-pt-figlabel{color:var(--on-dark)}
/* the questions: open answer cards (the old cards were always open) */
.sv2-pg-portal .sv2-pt-answers>li{padding:26px 28px;border:1px solid var(--line);border-radius:14px;background:#fff}
.sv2-pg-portal .sv2-pt-answers>li+li{margin-top:12px}
.sv2-pg-portal .sv2-pt-answers h3{font:600 1.125rem/1.45 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.sv2-pg-portal .sv2-pt-answers p{margin-top:10px;font-size:1rem;line-height:1.75;color:var(--muted)}
/* the closing photo band: the outline button on a dark fill, as in the hero */
.sv2-pg-portal .sv2-cta .sv2-btn-outline-light:not(:hover){background:rgba(4,16,33,.55)}
/* the trust row after it */
.sv2-pg-portal .sv2-pt-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.sv2-pg-portal .sv2-pt-trust li{padding-inline-start:18px;border-inline-start:3px solid var(--accent)}
.sv2-pg-portal .sv2-pt-trust strong{display:block;font:600 1.0625rem/1.35 Inter,sans-serif;color:var(--ink)}
.sv2-pg-portal .sv2-pt-trust span{display:block;margin-top:3px;font-size:.875rem;line-height:1.5;color:var(--muted)}
@media(max-width:1100px){
.sv2-pg-portal .sv2-pt-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-portal .sv2-pt-split,.sv2-pg-portal .sv2-pt-split.is-flip{grid-template-columns:minmax(0,1fr);gap:40px}
.sv2-pg-portal .sv2-pt-split.is-flip .sv2-pt-copy{order:-1}
.sv2-pg-portal .sv2-pt-copy{max-width:760px}
.sv2-pg-portal .sv2-pt-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-portal .sv2-pt-figures>li:nth-child(odd){padding-inline-start:0;border-inline-start:0}
.sv2-pg-portal .sv2-pt-figures>li:nth-child(odd)::before{inset-inline-start:0}
.sv2-pg-portal .sv2-pt-figures>li:nth-child(n+3){margin-top:24px;border-top:1px solid var(--line-strong)}
.sv2-pg-portal .sv2-navy .sv2-pt-figures>li:nth-child(n+3){border-top-color:rgba(255,255,255,.16)}
.sv2-pg-portal .sv2-pt-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
/* the hero on phones: the words on the navy top, the laptop photo whole in the lower part (the white lid sat behind the
   lead on a 360px screen), as on the thank-you page */
.sv2-pg-portal .sv2-hero{min-height:0;background:var(--deep)}
.sv2-pg-portal .sv2-hero-inner{padding-bottom:230px}
.sv2-pg-portal .sv2-hero-media{top:auto;height:250px}
.sv2-pg-portal .sv2-hero-media img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%);mask-image:linear-gradient(180deg,transparent 0,#000 42%)}
.sv2-pg-portal .sv2-hero-media::after{opacity:.5}
.sv2-pg-portal .sv2-pt-cols{grid-template-columns:minmax(0,1fr);gap:0}
.sv2-pg-portal .sv2-pt-cols>li{padding-block:24px}
.sv2-pg-portal .sv2-pt-cols h3{font-size:1.25rem}
.sv2-pg-portal .sv2-pt-lead{font-size:1rem}
.sv2-pg-portal .sv2-pt-copy .sv2-checklist li,.sv2-pg-portal .sv2-navy .sv2-pt-copy .sv2-checks li{font-size:1rem}
.sv2-pg-portal .sv2-pt-actions .sv2-btn{width:100%;white-space:normal;text-align:center}
.sv2-pg-portal .sv2-pt-shot{border-radius:10px}
.sv2-pg-portal .sv2-pt-figures>li{padding:22px 16px 4px}
.sv2-pg-portal .sv2-pt-figures>li+li::before{inset-inline-start:16px}
.sv2-pg-portal .sv2-pt-fig{font-size:2.375rem}
.sv2-pg-portal .sv2-pt-figlabel{font-size:.9375rem}
.sv2-pg-portal .sv2-pt-answers>li{padding:22px 20px}
.sv2-pg-portal .sv2-pt-answers h3{font-size:1.0625rem}
.sv2-pg-portal .sv2-pt-trust{grid-template-columns:minmax(0,1fr);gap:18px}
}
