/* Guides on pages.comparison-template (/ukvi-translation-requirements, /translation-guide, /ai-vs-human-translation,
   /naric-translation), reskin v2, 6 Oct 2026. Loaded after site-v2.css and site-v2-pages.css by
   pages/comparison-template-v2-body; every rule is scoped under the page wrapper .sv2-pg-guide. Same visual language as
   the homepage and the live v2 pages: blended photo hero with one card, navy bands with an orange rule, hairline lists,
   big orange figures, the heading-beside-text articles and the photo call to action. */

/* homepage kicker: 12px uppercase label after a short orange line (the old badge and the quick answer label) */
.sv2-pg-guide .sv2-kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:600 12px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sv2-pg-guide .sv2-kicker::before{content:"";flex:0 0 auto;width:28px;height:2px;background:var(--accent)}
.sv2-pg-guide :is(.sv2-hero,.sv2-navy) .sv2-kicker{color:var(--on-dark)}

/* hero: the blended photo, copy on one side, one card on the other (never two cards) */
.sv2-pg-guide .sv2-hero.is-plain{border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 90% at 85% 10%,#1b2d47 0%,rgba(16,29,48,0) 60%),linear-gradient(135deg,#0b1626 0%,#101d30 55%,#0b1626 100%)}
.sv2-pg-guide .sv2-hero .sv2-crumbs ol{color:#eef2f6}
.sv2-pg-guide .sv2-hero .sv2-crumbs li[aria-current]{color:#fff}
/* the guide badge: a dark pill (as on /translation-services) so it reads over any part of the lighter photo shade */
.sv2-pg-guide .sv2-hero .sv2-hero-kicker{display:inline-flex;margin:22px 0 0;padding:7px 14px;border-radius:999px;background:rgba(4,16,33,.66);box-shadow:inset 0 0 0 1px rgba(255,145,78,.5);font:600 13px/1.4 Inter,sans-serif;letter-spacing:.06em;color:#fff}
.sv2-pg-guide .sv2-hero .sv2-hero-kicker::before{content:none}
.sv2-pg-guide .sv2-hero-kicker+h1{margin-top:14px}
.sv2-pg-guide .sv2-hero-copy{min-width:0}
@media(min-width:601px){.sv2-pg-guide .sv2-hero h1{max-width:15em;font-size:clamp(38px,3.6vw,56px)}
}
/* the lead in pure white (as the hero words on the homepage) so it reads over the lighter photo shade at every width */
.sv2-pg-guide .sv2-hero-lead{color:#fff}
[dir="rtl"] .sv2-pg-guide .sv2-hero h1{line-height:1.35}
@media(min-width:601px){[dir="rtl"] .sv2-pg-guide .sv2-hero h1{font-size:clamp(34px,3.2vw,50px)}
}
.sv2-pg-guide .sv2-hero-lead.is-long{max-width:680px;font-size:17px;line-height:1.55}
.sv2-pg-guide .sv2-hero-side{min-width:0;width:100%;max-width:470px;justify-self:end}
.sv2-pg-guide .sv2-pgg-answer{border-radius:18px;padding:30px 32px 26px;background:#0d1729;border:1px solid rgba(255,255,255,.13);box-shadow:0 1px 2px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.4)}
.sv2-pg-guide .sv2-pgg-answer .sv2-kicker{margin-bottom:12px}
.sv2-pg-guide .sv2-pgg-answer-text{font-size:17px;line-height:1.6;color:#fff}
.sv2-pg-guide .sv2-pgg-updated{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;line-height:1.5;color:var(--on-dark)}
.sv2-pg-guide .sv2-pgg-answer-text+.sv2-pgg-tp,.sv2-pg-guide .sv2-pgg-updated+.sv2-pgg-tp{margin-top:16px}
.sv2-pg-guide .sv2-pgg-answer-text+.sv2-pgg-tp{padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.sv2-pg-guide .sv2-pgg-tp a{gap:10px 14px}

/* TL;DR: the label beside the summary, set large */
.sv2-pg-guide .sv2-pgg-tldr-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:16px 72px;align-items:start}
.sv2-pg-guide .sv2-pgg-tldr-label{display:flex;align-items:center;gap:12px;font:600 13px/1.5 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);padding-top:8px}
.sv2-pg-guide .sv2-pgg-tldr-label::before{content:"";flex:0 0 auto;width:28px;height:2px;background:var(--accent)}
.sv2-pg-guide .sv2-pgg-tldr-text{max-width:820px;font:500 clamp(20px,1.6vw,24px)/1.55 Poppins,"Poppins Fallback",Inter,sans-serif;letter-spacing:-.015em;color:var(--ink)}

/* quote strip: a navy band, the words beside one orange button */
.sv2-pg-guide .sv2-pgg-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:20px 48px;padding-block:44px}
.sv2-pg-guide .sv2-pgg-strip-copy{min-width:0}
.sv2-pg-guide .sv2-pgg-strip-title{font:600 clamp(22px,1.9vw,28px)/1.25 Poppins,"Poppins Fallback",Inter,sans-serif;letter-spacing:-.025em;color:#fff}
.sv2-pg-guide .sv2-pgg-strip-text{margin-top:8px;font-size:17px;line-height:1.6;color:var(--on-dark)}
.sv2-pg-guide .sv2-pgg-strip .sv2-btn{flex:0 0 auto}
.sv2-pg-guide .sv2-navy :is(a,summary):focus-visible{outline-color:#ff914e;box-shadow:none}

/* key facts: a four-column hairline checklist */
.sv2-pg-guide .sv2-pgg-facts{padding-block:88px}
.sv2-pg-guide .sv2-pgg-facts .sv2-mini-title{font-size:clamp(28px,2.6vw,40px);line-height:1.15;letter-spacing:-.03em;margin-bottom:36px}
.sv2-pg-guide .sv2-pgg-factlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--line-strong)}
.sv2-pg-guide .sv2-pgg-factlist li{position:relative;padding-block:18px;padding-inline-start:32px;border-bottom:1px solid var(--line-strong);font-size:16px;line-height:1.55;color:var(--ink)}
.sv2-pg-guide .sv2-pgg-factlist li::before{content:"";position:absolute;inset-inline-start:0;top:21px;width:18px;height:18px;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center/contain no-repeat}
.sv2-pg-guide .sv2-pgg-video.after-facts{padding-top:0}

/* section heads with no line beside them sit on their own */
.sv2-pg-guide .sv2-pgg-head-solo{grid-template-columns:minmax(0,1fr);max-width:940px}

/* comparison: two calm panels side by side, the price as a big orange figure */
.sv2-pg-guide .sv2-pgg-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sv2-pg-guide .sv2-pgg-options.is-1{grid-template-columns:minmax(0,1fr);max-width:720px}
.sv2-pg-guide .sv2-pgg-opt{position:relative;display:flex;flex-direction:column;padding:40px 40px 36px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(16,29,48,.04),0 20px 40px -30px rgba(16,29,48,.3)}
.sv2-pg-guide .sv2-pgg-opt::before{content:"";position:absolute;top:-1px;inset-inline-start:40px;width:48px;height:3px;background:var(--accent)}
.sv2-pg-guide .sv2-pgg-opt h3{font-size:clamp(26px,2.1vw,32px);line-height:1.2;color:var(--ink)}
.sv2-pg-guide .sv2-pgg-opt-sub{margin-top:8px;font:600 13px/1.5 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.sv2-pg-guide .sv2-pgg-opt-desc{margin-top:20px;font-size:17px;line-height:1.7;color:var(--muted)}
.sv2-pg-guide .sv2-pgg-price{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-strong)}
.sv2-pg-guide .sv2-pgg-price-label{font-size:14px;line-height:1.5;color:var(--soft)}
.sv2-pg-guide .sv2-pgg-price-value{margin-top:4px;font:600 clamp(34px,3vw,46px)/1.1 Poppins,"Poppins Fallback",Inter,sans-serif;letter-spacing:-.04em;color:var(--orange)}
.sv2-pg-guide .sv2-pgg-opt-list{margin-top:26px}
.sv2-pg-guide .sv2-pgg-opt-list li{padding-block:13px;font-size:16px}
.sv2-pg-guide .sv2-pgg-opt-list li::before{top:25px}
.sv2-pg-guide .sv2-pgg-best{margin-top:auto;padding-top:26px}
.sv2-pg-guide .sv2-pgg-best-label{font:600 15px/1.4 Inter,sans-serif;color:var(--ink)}
.sv2-pg-guide .sv2-pgg-best-label+p{margin-top:6px;font-size:16px;line-height:1.65;color:var(--muted)}

/* when to use: navy columns, the recommendation in warm orange under a short rule */
.sv2-pg-guide .sv2-pgg-rec{position:relative;margin-top:16px!important;padding-top:14px;font:600 15px/1.45 Inter,sans-serif!important;color:var(--warm)!important}
.sv2-pg-guide .sv2-pgg-rec::before{content:"";position:absolute;top:0;inset-inline-start:0;width:22px;height:1px;background:rgba(255,160,107,.7)}
.sv2-pg-guide .sv2-pgg-when .sv2-know-grid li{padding-bottom:30px}

/* long-form sections */
.sv2-pg-guide .sv2-article-body{min-width:0}
.sv2-pg-guide .sv2-prose>:first-child{margin-top:0}
.sv2-pg-guide .sv2-prose ol li::marker{color:var(--orange);font-weight:600}
.sv2-pg-guide .sv2-prose ol li{padding-block:6px}
.sv2-pg-guide .sv2-prose em{font-style:italic}

/* FAQ: the contact line under the cards */
.sv2-pg-guide .sv2-pgg-faq .sv2-faq-more{margin-top:22px}

/* the photo call to action: the outline button on a dark fill so it reads over the lighter shade */
.sv2-pg-guide .sv2-cta .sv2-btn-outline-light:not(:hover){background:rgba(4,16,33,.55)}

/* laptops below 1100px */
@media(max-width:1100px){
.sv2-pg-guide .sv2-hero-side{justify-self:start;max-width:620px}
.sv2-pg-guide .sv2-pgg-factlist{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv2-pg-guide .sv2-pgg-tldr-grid{gap:16px 44px}
}
/* tablets */
@media(max-width:850px){
.sv2-pg-guide .sv2-pgg-tldr-grid{grid-template-columns:minmax(0,1fr)}
.sv2-pg-guide .sv2-pgg-tldr-label{padding-top:0}
.sv2-pg-guide .sv2-pgg-options{grid-template-columns:minmax(0,1fr)}
.sv2-pg-guide .sv2-pgg-strip-inner{flex-direction:column;align-items:flex-start}
}
/* phones */
@media(max-width:600px){
.sv2-pg-guide .sv2-hero-grid{gap:28px}
.sv2-pg-guide .sv2-hero .sv2-hero-kicker{margin-top:16px}
.sv2-pg-guide .sv2-hero-kicker+h1{margin-top:10px}
.sv2-pg-guide .sv2-hero-lead.is-long{font-size:16px}
.sv2-pg-guide .sv2-pgg-answer{padding:24px 22px 22px;border-radius:16px}
.sv2-pg-guide .sv2-pgg-answer-text{font-size:16px}
.sv2-pg-guide .sv2-pgg-tldr-text{font-size:19px;line-height:1.55}
.sv2-pg-guide .sv2-pgg-strip-inner{padding-block:40px}
.sv2-pg-guide .sv2-pgg-strip .sv2-btn{width:100%;white-space:normal;text-align:center;line-height:1.3;padding-block:12px}
.sv2-pg-guide .sv2-pgg-facts{padding-block:64px}
.sv2-pg-guide .sv2-pgg-facts .sv2-mini-title{margin-bottom:26px}
.sv2-pg-guide .sv2-pgg-factlist{grid-template-columns:minmax(0,1fr)}
.sv2-pg-guide .sv2-pgg-opt{padding:32px 22px 28px;border-radius:14px}
.sv2-pg-guide .sv2-pgg-opt::before{inset-inline-start:22px}
.sv2-pg-guide .sv2-pgg-opt-desc{font-size:16px}
.sv2-pg-guide .sv2-pgg-options{gap:16px}
}