/* ========================================================= G2 Reviews Section — the rating lockup,two review cards and the link out to G2,on the warm band. The card row is held well short of the container:two quotes read badly across the full 1204,and the design centres them as a block under the rating rather than spreading them to the edges. Used on:demo.html ========================================================= */
.g2-section,.hero-section-badge{--color-g2:#FF492C;/* a data URI,so it is not affected by the trap where a relative url() inside a custom property resolves against the stylesheet */
 --g2-star:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 17 15%27%3E%3Cpath d=%27M8.5 1L10.3 5.2L14.9 5.6L11.4 8.6L12.5 13.1L8.5 10.7L4.5 13.1L5.6 8.6L2.1 5.6L6.7 5.2L8.5 1Z%27/%3E%3C/svg%3E");}
.g2-section{background-color:var(--color-blush-50);}
.g2-section .g2-section-wrapper{gap:36px;padding-block:var(--section-padding);}
/* ---------- Stars ---------- Driven by --rating rather than by a picture of a rating,so the value the back end returns is the only thing that has to change:<div class="g2-section-stars" style="--rating:4.5" role="img" aria-label="Rated 4.5 out of 5"></div> One star is masked out of a 17x15 cell and tiled five times. Because the star sits centred in its cell,the fill edge at rating/5 of the width always lands exactly on a star midpoint — 4.5 fills four stars and half of the fifth,4.2 fills a fifth of it. Any value between 0 and 5 works,whole or not;anything outside is clamped. Keep the aria-label in step with the number:the mask is decoration and a screen reader cannot read it. */
.g2-section .g2-section-wrapper .g2-section-stars,.hero-section-badge .g2-section-stars{--rating:5;--star-height:15px;--star-cell:calc(var(--star-height) * 17 / 15);position:relative;width:calc(var(--star-cell) * 5);height:var(--star-height);background-color:var(--color-ink-200);-webkit-mask-image:var(--g2-star);mask-image:var(--g2-star);-webkit-mask-size:var(--star-cell) 100%;mask-size:var(--star-cell) 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;}
/* the earned part,painted over the grey and cut to the same stars */
.g2-section .g2-section-wrapper .g2-section-stars::before,.hero-section-badge .g2-section-stars::before{content:"";position:absolute;inset-block:0;left:0;width:calc(clamp(0,var(--rating),5) / 5 * 100%);background-color:var(--color-g2);}
/* ---------- Rating lockup ---------- */
.g2-section .g2-section-wrapper .g2-section-rating{gap:20px;}
/* base.css sets img{width:100%}
,so every image in this section states its own size rather than trusting the width/height attributes */
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-mark{flex:0 0 auto;width:56px;height:56px;border-radius:var(--radius-lg);}
/* the score and the "/ 5" sit on a shared baseline,which is why they are aligned to the end of the row rather than its middle */
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score{gap:8px;}
/* the primary face,not the condensed display one the headings use:the design sets this figure in IBM Plex Sans Bold */
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score strong{font-family:var(--font-display);font-size:64px;font-weight:var(--font-weight-bold);line-height:1.2031;color:var(--color-ink-900);}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score small{font-family:var(--font-display);font-size:30px;font-weight:var(--font-weight-semibold);line-height:1.2;color:var(--color-slate-500);}
/* the stars sit level with the score,the caption tucks under them */
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-verdict{gap:4px;}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-stars-lg{--star-height:30px;}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-verdict p{font-size:var(--font-size-meta);line-height:1.2857;color:var(--color-slate-500);font-weight:var(--font-weight-medium);}
/* ---------- Review cards ---------- */
.g2-section .g2-section-wrapper .g2-section-list{gap:20px;width:100%;max-width:860px;}
/* the item is the flex track and the card fills it,so two quotes of different lengths still square off at the same height */
.g2-section .g2-section-wrapper .g2-section-list li{display:flex;flex:1 1 0;min-width:0;}
.g2-section .g2-section-wrapper .g2-section-list .g2-section-card{gap:14px;width:100%;/* 221 is the taller of the two cards in the design;holding it here means both cards square off at the design height and a longer quote swapped in later does not reflow the section around it */
 min-height:221px;padding:24px;background-color:var(--color-white);border:1px solid #E5D8D5;border-radius:var(--radius-lg);box-shadow:0 6px 18px rgba(10,37,64,0.06);}
.g2-section .g2-section-wrapper .g2-section-list .g2-section-card .g2-section-stars{flex:0 0 auto;}
.g2-section .g2-section-wrapper .g2-section-list .g2-section-card blockquote p{font-size:var(--font-size-h6);line-height:var(--line-height-card-body);/* 15 → 23 */
 color:var(--color-slate-700);}
/* pushed to the foot of the card so the attributions line up across the row however long the quote above them runs */
.g2-section .g2-section-wrapper .g2-section-list .g2-section-card .g2-section-att{gap:1px;margin-top:auto;}
.g2-section .g2-section-wrapper .g2-section-list .g2-section-card .g2-section-att strong{font-size:var(--font-size-meta);line-height:1.2857;color:var(--color-ink-900);}
.g2-section .g2-section-wrapper .g2-section-list .g2-section-card .g2-section-att small{font-size:var(--font-size-body-xs);line-height:1.28;color:var(--color-slate-500);}
/* ---------- Link out ---------- .link-arrow carries the shape;only the colour changes,because this one leads to G2 rather than into the site */
.g2-section .g2-section-wrapper .g2-section-more{color:#C4342B;}
.g2-section .g2-section-wrapper .g2-section-more span img{filter:brightness(0) saturate(100%) invert(28%) sepia(47%) saturate(2778%) hue-rotate(344deg) brightness(89%) contrast(88%);}
/* ---------- Tablet ---------- */
@media (max-width:1199px){.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score strong{font-size:60px;}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score small{font-size:30px;}
}
@media (max-width:991px){.g2-section .g2-section-wrapper .g2-section-slider-wrapper{margin:0 calc(var(--container-padding) * -1);padding:0 var(--container-padding);/* If swiper bleed needs extra overflow hidden,it's usually handled by swiper class */
 width:calc(100% + var(--container-padding) * 2);}
.g2-mobile-pagination{margin-top:14px;position:static;display:flex;justify-content:center;}
.g2-section .g2-section-wrapper .g2-section-list.swiper-wrapper{flex-direction:row !important;max-width:none;gap:0;}
/* Reset flex so Swiper can correctly calculate slide widths */
 .g2-section .g2-section-wrapper .g2-section-list.swiper-wrapper>li.swiper-slide{flex:none !important;}
.g2-section .g2-section-wrapper .g2-section-list{max-width:640px;}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score strong{font-size:50px;}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score small{font-size:28px;}
}
/* ---------- Mobile ---------- the quotes stop fitting side by side long before the cards get narrow enough to look wrong stacked */
@media (max-width:767px){.g2-section .g2-section-wrapper{align-items:flex-start;gap:20px;}
.g2-section .g2-section-wrapper .g2-section-list{flex-direction:column;max-width:480px;}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score strong{font-size:40px;}
.g2-section .g2-section-wrapper .g2-section-rating .g2-section-score small{font-size:24px;}
/* stacked,a reserved height would only add dead space under a short quote */
 .g2-section .g2-section-wrapper .g2-section-list .g2-section-card{min-height:0;}
.g2-section .g2-section-wrapper .g2-section-list .g2-section-card .g2-section-att{margin-top:0;}
/* the lockup wraps:mark and score stay together on the first line,the stars and their caption drop under them */
 .g2-section .g2-section-wrapper .g2-section-rating{flex-wrap:wrap;justify-content:flex-start;gap:10px 12px;}
}