/* Free "Practice Test & Study Guide" (/drive/practice-test-study-guide/). The free test and study guide pages are the real
   practice test and study guide screens (practice.css, study-guide.css); this file only adds the landing page's cards, the
   full-version offers and the "Free version" note. */

/* ---------- landing: pick one ---------- */
.fr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fr-hub{padding-bottom:clamp(2.5rem,6vw,4rem)}
.fr-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.fr-card{overflow:hidden}
.fr-card .mit-card__title{font-size:1.2rem}

/* ---------- product covers (free_cover) ---------- */
/* full-bleed at the top of a card: the card's padding is pulled back with negative margins */
.fr-cover{--fr-pad-t:1.35rem;--fr-pad-x:1.4rem;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:1rem;
  min-height:224px;margin:calc(-1 * var(--fr-pad-t)) calc(-1 * var(--fr-pad-x)) 1.3rem;padding:1.15rem 1.4rem 1.6rem;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 85% 15%,rgba(255,255,255,.16),transparent 55%),linear-gradient(135deg,#0A78C8 0%,#0067B0 45%,#004A82 100%)}
.fr-offer .fr-cover{--fr-pad-t:1.6rem;--fr-pad-x:1.6rem;border-radius:13px 13px 0 0}
.fr-cover--full{background:radial-gradient(120% 90% at 85% 15%,rgba(247,208,33,.14),transparent 55%),linear-gradient(135deg,#0B3A66 0%,#082C4F 55%,#061F38 100%)}
/* faint road behind everything */
.fr-cover::before{content:"";position:absolute;right:-18%;bottom:-40%;width:75%;height:150%;background:linear-gradient(90deg,transparent 46%,rgba(255,255,255,.07) 46% 54%,transparent 54%),rgba(255,255,255,.04);transform:skewX(-24deg);pointer-events:none}
.fr-cover>*{position:relative}
.fr-cover__top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.fr-cover__logo{display:block;width:auto;height:28px}
.fr-cover__tag{padding:.38em .75em;border-radius:99px;background:#fff;color:var(--wmst-blue-deep);font:800 .7rem/1 var(--font-display,sans-serif);letter-spacing:.08em;text-transform:uppercase}
.fr-cover--full .fr-cover__tag{background:var(--wmst-yellow,#F7D021);color:#0E1216}
.fr-cover__name{align-self:center;display:flex;flex-direction:column;gap:.3rem;padding:1rem 0 .4rem}
.fr-cover__name small{font:700 .74rem/1.2 var(--font-display,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#BFE0F7}
.fr-cover--full .fr-cover__name small{color:var(--wmst-yellow,#F7D021)}
.fr-cover__name b{font:800 clamp(1.7rem,3.2vw,2.15rem)/1.02 var(--font-display,sans-serif);letter-spacing:-.01em}
.fr-cover__art{grid-column:2;grid-row:2/4;align-self:end;display:flex;align-items:flex-end;justify-content:flex-end;margin-bottom:.2rem}
.fr-cover__foot{grid-column:1;align-self:end;font:600 .8rem/1.2 var(--font-display,sans-serif);color:rgba(255,255,255,.82)}
/* the yellow lane stripe along the bottom edge, as in the study guide hero */
.fr-cover__lane{position:absolute;left:0;right:0;bottom:9px;height:4px;background:linear-gradient(90deg,var(--wmst-yellow,#F7D021) 34px,transparent 34px) 0 0/62px 4px repeat-x;opacity:.95}
/* the test: an answer sheet */
.fr-cover__sheet{display:block;width:104px;height:auto;transform:rotate(6deg) translateY(4px);filter:drop-shadow(0 10px 18px rgba(0,20,45,.35));transition:transform .25s var(--ease,ease)}
.mit-card:hover .fr-cover__sheet{transform:rotate(3deg) translateY(0)}
/* the guide: a book, with a spine down the left and road signs on the cover */
.fr-cover--guide{padding-left:2.1rem}
.fr-cover__spine{position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 70%,rgba(255,255,255,.18));box-shadow:1px 0 0 rgba(255,255,255,.12)}
.fr-cover__signs{display:flex;align-items:flex-end}
.fr-cover__signs img{display:block;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,20,45,.35));transition:transform .25s var(--ease,ease)}
.fr-cover__signs img+img{margin-left:-10px}
.fr-cover__signs img:nth-child(1){transform:rotate(-8deg) translateY(-14px)}
.fr-cover__signs img:nth-child(2){transform:rotate(4deg);width:62px;height:62px}
.fr-cover__signs img:nth-child(3){transform:rotate(9deg) translateY(-6px)}
.mit-card:hover .fr-cover__signs img:nth-child(1){transform:rotate(-10deg) translateY(-18px)}
.mit-card:hover .fr-cover__signs img:nth-child(3){transform:rotate(11deg) translateY(-9px)}
@media (max-width:420px){
  .fr-cover{min-height:200px;padding-right:1.1rem}
  .fr-cover__sheet{width:84px}
  .fr-cover__signs img{width:44px;height:44px}
  .fr-cover__signs img:nth-child(2){width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){.fr-cover__sheet,.fr-cover__signs img{transition:none}}

/* the big cover at the top of the free practice test's intro panel */
.fr-body .pt-intro__main{overflow:hidden}
.pt-intro__main .fr-cover{--fr-pad-t:clamp(1.4rem,3vw,2.4rem);--fr-pad-x:clamp(1.4rem,3vw,2.4rem);margin-bottom:1.6rem;border-radius:13px 13px 0 0}
.fr-cover--lg{min-height:clamp(220px,26vw,280px);padding:1.4rem clamp(1.4rem,3vw,2.4rem) 1.9rem}
.fr-cover--lg .fr-cover__logo{height:34px}
.fr-cover--lg .fr-cover__name b{font-size:clamp(2rem,4.4vw,2.9rem)}
.fr-cover--lg .fr-cover__sheet{width:clamp(96px,12vw,140px);transform:rotate(6deg) translateY(2px)}
.fr-cover--lg .fr-cover__lane{bottom:12px}

/* a smaller cover, for the full-version card in the free test's side column */
.fr-offer .fr-cover--sm{--fr-pad-t:1.3rem;--fr-pad-x:1.3rem;min-height:168px;padding:1rem 1.2rem 1.45rem}
.fr-cover--sm .fr-cover__logo{height:22px}
.fr-cover--sm .fr-cover__name{padding:.6rem 0 .3rem}
.fr-cover--sm .fr-cover__name small{font-size:.64rem}
.fr-cover--sm .fr-cover__name b{font-size:1.55rem}
.fr-cover--sm .fr-cover__sheet{width:72px}
.fr-cover--sm .fr-cover__foot{font-size:.72rem}
.fr-cover--sm .fr-cover__lane{bottom:7px;height:3px;background-size:46px 3px;background-image:linear-gradient(90deg,var(--wmst-yellow,#F7D021) 26px,transparent 26px)}
.fr-offer--side{padding:1.3rem}
.fr-offer--side .fr-offer__title{font-size:1.08rem;margin-bottom:.8rem}
.fr-offer--side .fr-offer__list{gap:.45rem;margin-bottom:1.1rem}
.fr-offer--side .fr-offer__list li{font-size:.9rem}
.fr-offer__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.fr-offer__more{display:inline-flex;align-items:center;min-height:44px;font:600 .88rem/1.2 var(--font-display,sans-serif);color:var(--wmst-blue-deep);text-decoration:none}
.fr-offer__more:hover{text-decoration:underline}
/* the free test always has something in its side column (the full-version card), so keep both columns */
@media (min-width:981px){.fr-body .pt-intro:has(.pt-history[hidden]){grid-template-columns:minmax(0,1fr) 320px;justify-content:normal}}
.fr-body .pt-intro:has(.pt-history[hidden]) .pt-intro__side{display:flex}
.pt-intro__side>.fr-offer--side{padding:1.3rem}

/* a book-sized thumbnail cover, for links (free_thumb) */
.fr-thumb{position:relative;flex:0 0 auto;display:block;width:54px;height:70px;border-radius:4px 7px 7px 4px;overflow:hidden;
  background:linear-gradient(150deg,#0A78C8,#0067B0 50%,#004A82);box-shadow:0 6px 14px rgba(0,40,80,.22),inset 4px 0 0 rgba(0,0,0,.18)}
.fr-thumb--full{background:linear-gradient(150deg,#0B3A66,#082C4F 55%,#061F38)}
.fr-thumb__logo{position:absolute;left:9px;top:7px;width:auto;height:11px}
.fr-thumb__signs{position:absolute;right:3px;bottom:12px;display:flex}
.fr-thumb__signs img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,20,45,.35))}
.fr-thumb__signs img:first-child{transform:rotate(-8deg) translateY(-5px);margin-right:-4px}
.fr-thumb__sheet{position:absolute;right:7px;bottom:13px;display:flex;flex-direction:column;gap:3px;width:26px;padding:4px;background:#fff;border-radius:3px;transform:rotate(6deg)}
.fr-thumb__sheet i{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,#B7C6D6 0 4px,transparent 4px 6px,#F7D021 6px 10px,transparent 10px 12px,#B7C6D6 12px 16px)}
.fr-thumb__lane{position:absolute;left:4px;right:0;bottom:5px;height:2px;background:linear-gradient(90deg,var(--wmst-yellow,#F7D021) 8px,transparent 8px) 0 0/14px 2px repeat-x}
.pt-guide--sm .fr-thumb{margin:-.2rem 0}

/* ---------- the full versions ---------- */
.fr-full{scroll-margin-top:84px;margin-top:clamp(1.5rem,4vw,2.5rem)}
.fr-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.2rem}
.fr-offer{display:flex;flex-direction:column;padding:1.6rem;overflow:hidden}
.fr-offer__kicker{margin:0 0 .35rem;font:600 .76rem/1 var(--font-display,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--wmst-blue)}
.fr-offer__title{margin:0 0 1rem;font:800 1.25rem/1.25 var(--font-display,sans-serif);color:var(--wmst-blue-deep);text-wrap:balance}
.fr-offer__list{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;gap:.6rem}
.fr-offer__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--wmst-text,#3B4148)}
.fr-offer__list .mit-ic{flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.2rem;color:#1B7A50}
.fr-offer__list b{color:var(--wmst-black)}
.fr-offer__foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid #EDF1F5}
.fr-soon{display:inline-flex;align-items:center;padding:.7em 1.1em;border-radius:6px;background:#EEF2F6;color:var(--wmst-text-soft);font:600 .92rem/1 var(--font-display,sans-serif)}

/* ---------- "Free version" note on the free test and study guide ---------- */
.fr-upsell{display:flex;gap:1rem;align-items:center;padding:1rem 1.2rem;margin-top:1rem;background:var(--wmst-blue-soft);border-color:transparent}
.fr-upsell p{margin:0;max-width:none;font-size:.92rem;line-height:1.55;color:var(--wmst-text,#3B4148)}
.fr-upsell__soon{display:inline-block;margin:0 .3rem;padding:.2em .55em;border-radius:5px;background:#fff;color:var(--wmst-text-soft);font:600 .78rem/1.2 var(--font-display,sans-serif)}
.fr-upsell b{color:var(--wmst-black)}
.fr-upsell a{color:var(--wmst-blue-deep);font-weight:600}
.sg-pn+.fr-upsell{margin-top:1.2rem}
.pt-score+.fr-upsell{margin:1rem 0}

/* ---------- phones ---------- */
@media (max-width:640px){
  /* breadcrumb: just the way back, so it never wraps onto two lines */
  .fr-body .mit-crumbs{font-size:0;padding-bottom:.9rem}
  .fr-body .mit-crumbs span{display:none}
  .fr-body .mit-crumbs a{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;font-size:.92rem;font-weight:600}
  .fr-body .mit-crumbs a::before{content:"\2190";font-weight:700}

  /* landing: a shorter hero so the two covers show sooner */
  .fr-hero{padding:1.8rem 0 1.6rem}
  .fr-hero .mit-hero__eyebrow{margin-bottom:.7rem}
  .fr-hero .mit-hero__title{font-size:1.85rem}
  .fr-hero .mit-hero__lede{font-size:.98rem;margin-bottom:1.1rem}
  .fr-hero .mit-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .fr-hero .mit-hero__stats span{display:flex;flex-direction:column;gap:.25rem;padding:.6rem .7rem;border-radius:10px;background:rgba(255,255,255,.1);font-size:.74rem;line-height:1.25}
  .fr-hero .mit-hero__stats strong{margin:0;font-size:1.3rem}
  .fr-hub .mit-group__title{margin-top:1.6rem}
  .fr-hub .pt-group__lede{margin-bottom:1rem}
  .fr-card{padding:1.15rem 1.15rem 1.2rem}
  .fr-card .fr-cover{--fr-pad-t:1.15rem;--fr-pad-x:1.15rem;margin-bottom:1.05rem}
  .fr-offer{padding:1.2rem}
  .fr-offer .fr-cover{--fr-pad-t:1.2rem;--fr-pad-x:1.2rem;margin-bottom:1.1rem}

  /* covers: a little shorter */
  .fr-cover{min-height:178px;padding:1rem 1.15rem 1.45rem}
  .fr-cover--guide{padding-left:1.7rem}
  .fr-cover__name{padding:.7rem 0 .3rem}
  .fr-cover__name b{font-size:1.75rem}
  .fr-cover__logo{height:24px}

  /* the free test's intro: the cover already names the test, so lose the repeat kicker, and put the three facts in
     one compact row, so "Start test" comes much sooner */
  .fr-body .pt-intro__main{padding:1.15rem 1.15rem 1.3rem}
  .pt-intro__main .fr-cover{--fr-pad-t:1.15rem;--fr-pad-x:1.15rem;margin-bottom:1.1rem}
  .fr-cover--lg{min-height:184px;padding:1rem 1.15rem 1.5rem}
  .fr-cover--lg .fr-cover__logo{height:26px}
  .fr-cover--lg .fr-cover__name b{font-size:1.75rem}
  .fr-cover--lg .fr-cover__sheet{width:84px}
  .fr-body .pt-intro__main>.mit-lesson__step{display:none}
  .fr-body .pt-intro__main .mit-lesson__title{font-size:1.5rem}
  .fr-body .pt-intro__lede{font-size:.98rem;margin-bottom:1rem}
  .fr-body .pt-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;margin-bottom:1.3rem}
  .fr-body .pt-facts>div{padding:.6rem .6rem}
  .fr-body .pt-facts dt{font-size:.62rem;margin-bottom:.3rem}
  .fr-body .pt-facts dt .mit-ic{display:none}
  .fr-body .pt-facts dd{white-space:normal;font-size:.8rem;line-height:1.25}
  .fr-body .pt-mode{padding:.85rem .9rem}

  /* the "want the full version?" note: thumbnail on top of the text would waste room, keep it beside */
  .fr-upsell{align-items:flex-start;padding:.9rem 1rem}
}