/* generated by tools/css.py from design/AppPage.dc.html and design/home-system.css */
/* from design/AppPage.dc.html */
.ap{container-type:inline-size}
/* every screen is a real still at its own size, scaled to its frame */
.ap img{display:block;width:100%;height:auto}
/* hero: the sentence left, the app on a laptop with the phone in front of it right */
.ap-hero{padding-bottom:clamp(48px,6vw,88px)}
.ap-hgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.ap-h{margin:0;font:700 clamp(40px,5.4vw,68px)/1.02 var(--display);letter-spacing:-.04em;color:var(--fg);max-width:12ch}
.ap-lede{margin:22px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--muted);max-width:30em}
.ap-hero .btn{margin-top:32px}
.ap-stage{position:relative;padding:0 0 9% 0}
.ap-lap{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--elev-float)}
.ap-stage .ap-ph{position:absolute;right:-2%;bottom:0;width:27%}
/* a phone: the screen in a slim dark frame */
.ap-ph{border-radius:30px;padding:6px;background:#0c231b;box-shadow:0 30px 60px -28px rgb(5 52 41 / .6)}
.ap-ph > div{border-radius:24px;overflow:hidden;background:#fff}
/* the four things it does: text and the real screen, sides alternating */
.ap-feats{display:grid;gap:clamp(72px,9vw,128px)}
.ap-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.ap-row:nth-child(even) .ap-txt{order:2}
.ap-t{margin:0;font:700 clamp(28px,3.2vw,42px)/1.06 var(--display);letter-spacing:-.035em;color:var(--fg)}
.ap-l{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--muted);max-width:44ch}
.ap-shot{border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--elev-float)}
/* phone and laptop: four phones in a row under one line */
.ap-dev{text-align:center}
.ap-dev .sec-lede{margin-left:auto;margin-right:auto}
.ap-phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(40px,5vw,64px);align-items:start}
.ap-phones .ap-ph:nth-child(even){margin-top:48px}
.ap-final{text-align:center}
@container (max-width:700px){
  .ap-hgrid,.ap-row{grid-template-columns:1fr}
  .ap-row:nth-child(even) .ap-txt{order:0}
  .ap-h{font-size:40px}
  .ap-t{font-size:28px}
  .ap-stage{margin-top:8px}
  .ap-stage .ap-ph{width:34%}
  .ap-shot{border-radius:14px}
  .ap-phones{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-20px;margin-right:-20px;padding:0 20px 24px}
  .ap-phones .ap-ph{flex:none;width:62%;scroll-snap-align:center}
  .ap-phones .ap-ph:nth-child(even){margin-top:0}
}
/* 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)}}