/* generated by tools/css.py from design/ReviewsPage.dc.html and design/home-system.css */
/* from design/ReviewsPage.dc.html */
.rp{container-type:inline-size}
/* hero: the sentence on the left, the rating as one big plate on the right */
.rp-hero{padding-bottom:clamp(40px,6vw,72px)}
.rp-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.rp-h{margin:0;font:700 clamp(40px,5.4vw,68px)/1.02 var(--display);letter-spacing:-.04em;color:var(--fg);max-width:13ch}
.rp-lede{margin:22px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--muted);max-width:30em}
.rp-plate{position:relative;overflow:hidden;border-radius:28px;background:var(--invert);color:var(--invert-fg);padding:clamp(28px,3.4vw,44px);display:grid;gap:24px;box-shadow:0 30px 60px -36px rgb(5 52 41 / .55)}
.rp-plate::after{content:"";position:absolute;right:-18%;top:-26%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(159 227 198 / .14),transparent);pointer-events:none}
.rp-who{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rp-faces{display:flex}
.rp-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#e6efe9;box-shadow:0 0 0 2px var(--invert)}
.rp-faces img + img{margin-left:-10px}
.rp-plate .rp-who p{margin:0;font-size:15px;line-height:1.35;color:var(--invert-muted)}
.rp-score{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.rp-plate .rp-fig{margin:0;font:700 clamp(88px,10vw,136px)/.82 var(--display);letter-spacing:-.05em;color:#fff}
.rp-of{display:grid;gap:8px;padding-bottom:6px}
.rp-stars{display:flex;gap:3px;color:#f2c14e}
.rp-plate .rp-of p{margin:0;font-size:15px;color:var(--invert-muted)}
.rp-facts{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid rgb(223 240 231 / .14)}
.rp-facts b{display:block;font:700 30px/1 var(--display);letter-spacing:-.03em;color:#fff}
.rp-facts small{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--invert-muted)}

/* one big quote, the outcome first */
.rp-feat{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(40px,5vw,64px)}
.rp-bq{margin:0 auto;max-width:900px;text-align:center}
.rp-bq p{margin:0;font:600 clamp(28px,3.6vw,46px)/1.15 var(--display);letter-spacing:-.03em;color:var(--fg)}
.rp-bq figcaption{margin-top:28px;display:inline-flex;align-items:center;gap:14px;text-align:left}
.rp-bq img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.rp-bq a{font-weight:600;font-size:16px;color:var(--fg)}
.rp-bq small{display:block;font-size:14px;color:var(--faint);margin-top:2px}

/* the wall: three offset columns drifting, the middle the other way; white cards, mixed */
.q-who{display:flex;align-items:center;gap:12px;margin-top:auto}
.q-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e6efe9}
.q-who a{font-weight:600;font-size:15px;color:inherit;display:inline-flex;align-items:center;gap:6px}
.q-who b{font-weight:600;font-size:15px}
.q-who small{display:block;font-size:13px;color:var(--faint);margin-top:2px}
.q-li{color:#0a66c2}
.q-chat{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e7f7ee;color:#0b6b37}
.rw-q{background:#fff;color:var(--fg)}
.rw{position:relative;height:820px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.rw-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.rw-col:nth-child(2){margin-top:96px}
.rw-col:nth-child(3){margin-top:36px}
.rw-track{display:flex;flex-direction:column;gap:22px;animation:rw-up var(--d,70s) linear infinite;will-change:transform}
.rw-col:nth-child(1) .rw-track{--d:64s}
.rw-col:nth-child(2) .rw-track{--d:96s;animation-direction:reverse}
.rw-col:nth-child(3) .rw-track{--d:78s}
.rw:hover .rw-track,.rw:focus-within .rw-track,.rw:hover .rw-row,.rw:focus-within .rw-row{animation-play-state:paused}
@keyframes rw-up{to{transform:translateY(calc(-50% - 11px))}}
.rw-rows{display:none}
/* site.js marks a section data-anim-off while it is off screen: the drift waits */
[data-anim-off] .rw-track,[data-anim-off] .rw-row{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.rw-track,.rw-row{animation:none}.rw{overflow:auto}}

.rp-final{text-align:center}

/* phone: everything in one column, the plate under the sentence, the wall as two rows sliding opposite ways */
@container (max-width:700px){
  .rp-grid{grid-template-columns:1fr}
  .rp-h{font-size:40px}
  .rp-bq p{font-size:27px}
  .rw{height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .rw-cols{display:none}
  .rw-rows{display:grid;gap:16px}
  .rw-row{display:flex;gap:16px;width:max-content;align-items:stretch;animation:rw-side var(--d,110s) linear infinite;will-change:transform}
  .rw-row:nth-child(2){--d:130s;animation-direction:reverse;margin-left:-120px}
  .rw-row .rw-q{width:272px;padding:22px}
  .rw-row .rw-q p{font-size:17px}
  @media (prefers-reduced-motion: reduce){.rw-row{animation:none}}
}
@keyframes rw-side{to{transform:translateX(calc(-50% - 8px))}}
/* Hand-written, not a canvas board: the home's rhythm on the shared tokens (design/site-system.css). tools/css.py
   appends it to home.css after the section boards, so it wins over their own paddings and sizes. */

/* The old FAQ's "+" (page.css) would double the board's own icon. */
.qa-row summary::after{content:none}
/* No linear motion (Bence 27 Oct): the scroll-linked reveals ease out, the seal's foil eases in-out. */
.mba-num::after{animation-timing-function:cubic-bezier(.65,0,.35,1)}

/* Rhythm: one --sec above each section's heading. Sections on the same ground share one gap instead of two stacked
   paddings; the one before a colour change (the money band, the footer) closes with its own --sec. */
#main > :is(.sec,.ns){padding-top:var(--sec);padding-bottom:0}
#main > .hero-sec{padding-top:clamp(32px,23.4px + 2.2vw,56px)}
#main > :has(+ .mba),#main > .mba{padding-bottom:var(--sec)}
#main > .final{padding-bottom:calc(var(--sec) + 32px)}
#main .ns > .ns-in{max-width:none;padding:0 var(--edge)}
/* an anchor (#how, #proof ...) lands its heading 24px under the 64px header */
#main > [id]{scroll-margin-top:calc(88px - var(--sec))}

/* Headings: one size and weight for every section heading; the lede 16 / 12 under it, the content 48 / 32 under that. */
#main :is(.ns-h,.mba-h,.qa-h,.sec:not(.hero-sec) .sec-h){font:700 var(--h2)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance}
#main :is(.ns-lede,.sec:not(.hero-sec) .sec-lede){margin-top:var(--gap-h)}
#main :is(.psa-stage,.fta-grid,.hwa-track,.rw,.psa-foot,.hwa-go){margin-top:var(--gap-lede)}
#main .qa{margin-top:0}

/* Text under the headings, on one scale: every lede, card title, body line and small line is one of five sizes. */
#main :is(.ns-lede,.sec:not(.hero-sec) .sec-lede,.hero-sec .sec-lede){font-size:var(--t-lede);line-height:1.5}
#main :is(.fta-t h3,.hwa-step h3){font:600 var(--t-h3)/1.15 var(--display);letter-spacing:-.02em}
#main :is(.fta-t p,.hwa-step p,.qa-row p,.mba-t){font-size:var(--t-body);line-height:1.55}
#main :is(.psa-list li,.rw-q p,.rw-row .rw-q p,.qa-row summary){font-size:var(--t-lg)}
#main :is(.ns-note,.psa-k,.q-who a,.mba-role,.mba-policy){font-size:var(--t-sm)}
#main .q-who small{font-size:13px}
/* Cards, one system: one 3-column grid with one gap (so every column is the same width in every section), one inner
   padding, one corner and one resting shadow. Headings and ledes each keep one reading measure. */
#main :is(.ns-h,.mba-h,.qa-h,.sec:not(.hero-sec) .sec-h){max-width:var(--w-h)}
#main :is(.ns-lede,.sec:not(.hero-sec) .sec-lede){max-width:var(--w-lede)}
#main :is(.fta-grid,.hwa-track,.rw-cols){gap:var(--gap-card)}
#main .rw-track{gap:var(--gap-card)}
#main .qa{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap-card)}
#main .qa > :last-child{grid-column:span 2}
@container (max-width:560px){#main .qa{grid-template-columns:1fr}#main .qa > :last-child{grid-column:auto}}
#main :is(.fta-card,.psa-card,.rw-q,.hwa-shot){border-radius:var(--r-card)}
#main :is(.fta-card,.psa-card,.rw-q){box-shadow:var(--elev-card)}
#main .fta-t{padding:var(--pad-card) var(--pad-card) 0}
#main :is(.psa-card,.rw-q,.rw-row .rw-q){padding:var(--pad-card)}
#main .rw-q{gap:12px}

/* Hero: the finder and the rating at the same steps as everywhere else. */
.hero__finder{margin-top:var(--gap-h);max-width:600px}
.hero-sec .sec-lede + .hero__finder{margin-top:clamp(28px,24px + 1vw,36px)}
.hero__rating{margin-top:24px}

/* Final call: the one centred section; heading and finder share one axis. */
#main > .final{text-align:center}
.final .sec-h{max-width:22ch;margin-left:auto;margin-right:auto}
.final-f{max-width:600px;margin:var(--gap-lede) auto 0;text-align:left}

/* Cards lift 4px under a real pointer; nothing shrinks or tilts. */
.fta-card,.rw-q{transition:transform .25s var(--out),box-shadow .25s var(--out)}
.fta-card:hover,.fta-card:hover .fta-demo{transform:none}
.fta-card--w:hover .fta-demo{transform:rotate(-1.2deg)}
.qa-row summary{transition:color var(--d-fast) var(--out),transform var(--d-fast) var(--out)}
@media (hover:hover) and (pointer:fine){
  .fta-card:hover,.rw-q:hover{transform:translateY(-4px);box-shadow:var(--elev-float)}
  .qa-row summary:hover{color:var(--primary)}
}

/* How it works. The demos centre themselves in their frame with their own display:grid; the board's display:block on
   every .hwa-zoom child dropped it, so the mock exam sat at the top of an empty frame. */
.hwa-zoom > .fx{display:grid}
/* Each step comes in on its own as it is reached: number, picture, title, words, a beat apart (data-rv="st"). */
/* Phone: no side rail eating the width. The number leads its own row with the track's line after it, then the
   picture full width, the title, the words. */

/* Reviews on a phone (Bence 27 Oct: the drifting row could not be scrolled): a row you swipe, snapping card by card,
   the next card peeking in; no drift and no doubled copies. */
@container (max-width:760px){
  #main .rw{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:none;mask-image:none;margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge));padding:4px var(--edge) 24px;scroll-padding-inline:var(--edge)}
  .rw::-webkit-scrollbar{display:none}
  .rw-row{animation:none}
  .rw-row .rw-q[aria-hidden]{display:none}
  .rw-row .rw-q{flex:none;width:min(300px,78vw);scroll-snap-align:start}
  .rw-row::after{content:"";flex:none;width:calc(var(--edge) - 16px)}
}

/* Money back: the seal turns in on a spring, the guilloche draws across. */
@media (prefers-reduced-motion:no-preference){
  .js:not(.rv-off) :is(.mba-badge,.mba-guil):not(.is-in){opacity:0}
  .mba-badge.is-in{animation:mba-pop var(--d-hero) var(--spring) .15s backwards}
  .mba-guil.is-in{animation:rv-draw 1.2s var(--io) backwards}
}
@keyframes mba-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-40deg)}}