/* /free/ (direction A). A light-blue band opens the page: the h1, the intro and the 20-question check (the one main button)
   on the left, the mock on the right. Then the PDFs (the page targets "rbt practice test pdf"), the online practice, the
   message to share on cream. Phone portrait: one column. Phone landscape: the check beside the h1 so its button is on the
   first screen. Wide: the mock in a column of its own beside the h1, intro and check. */
.fr{flex:1;display:flex;flex-direction:column}
.fr-band{border-bottom:0;padding-block:40px}
.fr h2{font-size:24px;line-height:1.2;font-weight:700;margin:0;color:var(--ink)}
.fr-meta{font-size:13px;color:var(--ink-3);margin:0}
.fr-card p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.fr-card .fr-meta{font-size:13px;color:var(--ink-3)}
.fr-link{font-weight:600}
/* hero */
.fr-hero{background:var(--tint);border-bottom:0}
.fr-hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-block:24px 32px;grid-template-areas:"h1" "intro" "check" "mock"}
.fr-hero h1{grid-area:h1;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.fr-intro{grid-area:intro;color:var(--ink-2)}.fr-intro p{margin:0;max-width:62ch}
.fr-check{grid-area:check;background:var(--paper);border-radius:var(--rc);padding:20px;display:flex;flex-direction:column;gap:10px}
.fr-title{display:flex;flex-direction:column;gap:2px}
.fr-check h2{font-size:20px;font-weight:600}
.fr-check .btn{width:100%;margin-top:4px}
.fr-mock{grid-area:mock;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rc);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.fr-mock h2{font-size:18px;font-weight:600}
.fr-mock .btn{align-self:flex-start;margin-top:8px}
/* PDFs */
.fr-side{background:var(--paper)}
.fr-side .c{display:flex;flex-direction:column;gap:20px}
.fr-pdfs{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.fr-pdf{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.fr-file{width:40px;height:50px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:10px;font-weight:700;color:var(--navy);box-shadow:0 2px 6px rgba(20,48,92,.08)}
.fr-file::after{content:"PDF"}
.fr-pdf>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.fr-pdf h3{font-size:17px;line-height:1.3;margin:0;color:var(--ink)}
.fr-pdf p{margin:0;font-size:15px;color:var(--ink-2)}
.fr-pdf .fr-link{align-self:flex-start;font-weight:600}
.fr-tag{font-weight:600}
/* online practice */
.fr-main{background:var(--tint)}
.fr-main .c{display:flex;flex-direction:column;gap:20px}
.fr-head{display:flex;flex-direction:column;gap:8px}
.fr-lead{margin:0;font-size:16px;color:var(--ink-2);max-width:68ch}
.fr-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.fr-online .fr-card{background:var(--paper);border-radius:var(--rc);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.fr-text{display:flex;flex-direction:column;gap:6px}
.fr-online h3{font-size:18px;line-height:1.3;margin:0;color:var(--ink)}
.fr-domains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fr-domains a{display:flex;align-items:center;gap:6px;min-height:48px;padding:8px 12px;background:var(--tint);border-radius:var(--r);color:var(--navy);text-decoration:none;font-size:14px;font-weight:500;line-height:1.25}
.fr-domains a b{font-weight:700}
.fr-domains a::after{content:"";margin-left:auto;flex:none;width:7px;height:7px;border-right:2px solid var(--navy);border-top:2px solid var(--navy);transform:rotate(45deg)}
.fr-domains a:hover{background:#DCE7F5}
.fr-sg .fr-link{align-self:flex-start;font-weight:600;text-decoration:none}
/* share */
.fr-share-band{background:var(--cream)}
.fr-share{display:flex;flex-direction:column;gap:16px}
.fr-share-h{display:flex;flex-direction:column;gap:8px}
.fr-share-h h2{font-size:20px;font-weight:600}
.fr-share-h p{margin:0;font-size:15px;color:var(--ink-2)}
.fr-share-box{display:flex;flex-direction:column;gap:14px;min-width:0}
.fr-msg{margin:0;padding:18px 20px;background:var(--paper);border-radius:12px;font-size:15px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.fr-msg p{margin:0 0 8px}.fr-msg p:first-child{font-weight:600}.fr-msg p:last-child{margin:0;color:var(--ink-2)}
.fr-msg ul{margin:0 0 8px;padding-left:20px;color:var(--ink-2)}.fr-msg li{margin:0 0 2px}
.fr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.fr-actions .fr-copy{background:var(--paper);color:var(--navy);border:1.5px solid var(--navy)}.fr-actions .fr-copy:hover{background:var(--tint);color:var(--navy)}
.fr-mail{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:14px}
.fr-mail-l{font-size:14px;color:var(--ink-2)}
.fr-mail .fr-link{font-weight:500;min-height:36px}.fr-mail .fr-link::after{content:none}
.fr-more-band{padding-block:24px 32px;background:var(--paper)}
.fr-more p{margin:0;font-size:15px}
@media(max-width:699px){.fr-actions .fr-copy{width:100%}.fr-mail{width:100%}}
/* tablets and phones held sideways */
@media(min-width:560px){
  .fr-domains{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fr-pdfs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
}
@media(min-width:600px) and (max-height:500px){
  .fr-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h1 check" "intro check" "intro mock";column-gap:28px;row-gap:8px;padding-block:14px 20px;align-items:start}
  .fr-hero h1{font-size:24px;line-height:1.15}
  .fr-intro{font-size:14px;line-height:1.5}
  .fr-check{padding:14px 16px;gap:6px}.fr-check h2{font-size:17px}.fr-check p{font-size:14px}.fr-check .btn{margin-top:2px}
  .fr-mock{padding:12px 16px}.fr-mock h2{font-size:16px}.fr-mock p{font-size:14px}
  .fr-band{padding-block:28px}
}
@media(min-width:700px) and (min-height:501px){
  .fr-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"h1 h1" "intro intro" "check mock";column-gap:20px;padding-block:36px 44px}
  .fr-hero h1{font-size:38px}
}
@media(min-width:700px){
  .fr-band{padding-block:56px}
  .fr-band h2{font-size:28px}
  .fr-online{grid-template-columns:minmax(0,1fr)}
  .fr-share{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
  .fr-check .btn{width:auto;align-self:flex-start}
}
/* wide */
@media(min-width:1000px){
  .fr-hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"h1 mock" "intro mock" "check mock";column-gap:72px;row-gap:22px;padding-block:56px 64px}
  .fr-hero h1{font-size:50px;line-height:1.08}
  .fr-intro{font-size:18px}
  .fr-check{padding:22px 24px;max-width:580px}
  .fr-title{flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .fr-check .btn{font-size:17px;min-height:52px;padding-inline:26px}
  /* the mock sits beside the check card, bottoms aligned, so the right column never floats in the middle (2026-11-08) */
  .fr-mock{align-self:end;background:var(--paper);border:1px solid var(--rule);border-radius:var(--rc);padding:22px 24px;gap:8px}
  .fr-mock h2{font-size:22px}.fr-mock p{font-size:16px}
  .fr-sg{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .fr-dq{display:grid!important;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px!important;align-items:center}
  .fr-online .fr-card{padding:24px}
  .fr-share{gap:72px}
  .fr-share-h h2{font-size:22px}
}
@media(min-width:1300px){.fr-domains{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:600px) and (max-height:500px){.fr .fr-band{padding-block:32px}.fr .fr-band h2{font-size:24px}}