/* Free samples study: the free page at #/free. Loaded only by compare/free-samples-live.html. Phones first; PC rules at the end. */

/* ---------- Shared: heading, rows, the end of the page ---------- */
.fs-page-head h1{font-size:38px}
.fs-page-head h1:focus{outline:none}
.fs-lede{margin-top:14px;font-size:18px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.fs-nb{white-space:nowrap}
.fs-block{margin-top:38px}
.fs-block.is-close{margin-top:26px}
.fs-block>h2{font-size:26px}
.fs-block-note{margin-top:8px;font-size:16px;color:var(--muted)}
.fs-list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.fs-list.is-joined{margin-top:0;border-top:0}
.fs-row{border-bottom:1px solid var(--line)}
.fs-row-main{display:flex;align-items:center;gap:12px;width:100%;padding:14px 0;background:transparent;color:inherit;text-align:left}
.fs-row-cover{flex:none;width:48px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.fs-row-text{flex:1;min-width:0;display:grid;gap:3px}
.fs-row-text b{font-size:17px;font-weight:600;line-height:1.3}
.fs-row-text>span{font-size:15px;line-height:1.4;color:var(--muted)}
.fs-tile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--fs-outline);border-radius:10px;background:#fff;color:var(--forest)}
.fs-tile .icon{width:24px;height:24px}
.fs-row-tool .fs-row-main{align-items:flex-start}
.fs-row-tool .fs-pill{margin-top:2px}
.fs-pill{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--forest);font-size:16px;font-weight:600;transition:background .16s,border-color .16s}
.fs-row-main:hover .fs-pill{border-color:var(--green);background:var(--soft)}
.fs-pill.is-green{background:var(--green);border-color:var(--green);color:#fff}
.fs-row-main:hover .fs-pill.is-green{background:var(--green-hover);border-color:var(--green-hover)}
.fs-page .fs-opened{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:600;color:var(--green-hover)}
.fs-opened .icon{width:15px;height:15px}
/* After a free sheet has been opened: where the rest of that subject is, and a way to pass the sheet on. */
.fs-next{display:grid;justify-items:start;padding:0 0 14px 60px;font-size:16px;line-height:1.45;color:var(--ink)}
.fs-next p{margin-bottom:2px}
.fs-next .text-button{display:inline-flex;gap:8px;min-height:44px;padding:0;font-size:16px;color:var(--forest)}
.fs-next .text-button .icon{width:18px;height:18px}
.fs-worth{margin-top:14px;font-size:16px;color:var(--muted)}
.fs-button.is-plain{border-color:var(--line-strong);background:#fff;color:var(--forest)}
.fs-button.is-plain:hover{border-color:var(--green);background:var(--soft)}
button.fs-button{width:100%;font-family:inherit}

.fs-join{margin-top:48px;padding:26px 22px;border-radius:16px;background:var(--forest);color:#fff}
.fs-join>.icon{width:30px;height:30px}
.fs-join h2{margin-top:12px;font-size:26px;color:#fff}
.fs-join p{margin-top:8px;font-size:17px;color:var(--fs-on-forest)}
.fs-join :focus-visible{outline-color:#fff}
.fs-send{margin-top:38px}
.fs-send h2{font-size:24px}
.fs-send p{margin-top:8px;font-size:17px;color:var(--muted)}
.fs-send .fs-button{margin-top:16px}
.fs-why{margin-top:38px}
.fs-why h2{font-size:24px}
.fs-why p{margin-top:8px;font-size:17px;color:var(--muted)}
.fs-buy{margin-top:8px}
.fs-buy .fs-button{margin-top:22px}
.fs-more{margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fs-more summary{position:relative;list-style:none;cursor:pointer;min-height:60px;padding:17px 30px 17px 0;font-size:17px;font-weight:600;line-height:1.4}
.fs-more summary::-webkit-details-marker{display:none}
.fs-more summary:after{content:'+';position:absolute;right:0;top:13px;font-size:24px;font-weight:400;color:var(--green)}
.fs-more[open] summary:after{content:'−'}
.fs-more .fs-list{margin-top:0}
.fs-more .fs-list:last-child .fs-row:last-child{border-bottom:0}

/* ---------- Read first ---------- */
.fs-reader{margin-top:18px}
.fs-reader-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:12px;padding:0;background:transparent;color:inherit;font-family:inherit;text-align:left}
.fs-reader-bar>span:first-child{display:grid;gap:2px;min-width:0}
.fs-reader-bar b{font-size:17px;font-weight:600;line-height:1.3}
.fs-reader-bar b+span{font-size:15px;color:var(--muted)}
.fs-paper{overflow:hidden;padding-bottom:10px;border:1px solid var(--fs-outline);border-radius:10px;background:#fff}
.fs-paper-whole{display:none}
.fs-reader-end{margin-top:14px;font-size:16px;color:var(--muted)}
.fs-reader-facts{margin-top:12px;font-size:16px;line-height:1.45;color:var(--muted)}
.fs-reader .fs-button{margin-top:10px}
.fs-reader .fs-next{padding:14px 0 0}

/* ---------- Your grade ---------- */
.fs-gradepick{margin-top:22px}
.fs-gradepick>span{display:block;font-size:15px;font-weight:600}
.fs-gradepick>div{display:flex;gap:8px;margin-top:8px}
.fs-gradepick .grade-button{flex:1;min-width:44px;height:46px;font-size:16px;color:var(--ink)}
.fs-gradepick .grade-button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff;font-weight:600}
.fs-pick-hint{margin-top:14px;font-size:16px;color:var(--muted)}
.fs-features{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.fs-feature{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 16px;align-items:start;padding:16px;border:1px solid var(--fs-outline);border-radius:14px;background:#fff}
.fs-feature-cover{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.fs-feature h3{font-size:22px;letter-spacing:-.025em}
.fs-feature-text p{margin-top:6px;font-size:16px;color:var(--muted)}
.fs-feature-text .fs-opened{margin-top:6px}
.fs-feature .fs-button{grid-column:1/-1;margin-top:16px}
.fs-feature .fs-next{grid-column:1/-1;padding:14px 0 0}

/* ---------- Cover wall ---------- */
.fs-wall{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
.fs-wall-item{display:grid;gap:10px;width:100%;background:transparent;color:inherit;text-align:left;align-content:start}
.fs-wall-cover{display:block;border:1px solid var(--fs-outline);border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,58,28,.14);transition:transform .16s}
.fs-wall-item:active .fs-wall-cover{transform:scale(.98)}
.fs-wall-text{display:grid;gap:2px}
.fs-wall-text b{font-size:16px;font-weight:600;line-height:1.3}
.fs-wall-text>span{font-size:15px;color:var(--muted);line-height:1.35}
.fs-wall .fs-next{padding:8px 0 0}
.fs-tiles{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fs-tiles-item{display:grid;gap:4px;align-content:start;width:100%;height:100%;min-height:150px;padding:14px;border:1px solid var(--fs-outline);border-radius:12px;background:#fff;color:inherit;text-align:left}
.fs-tiles-item .fs-tile{margin-bottom:8px}
.fs-tiles-item b{font-size:16px;font-weight:600;line-height:1.3}
.fs-tiles-item>span{font-size:15px;color:var(--muted)}
.fs-tiles-item:hover{border-color:var(--green)}

/* ---------- One at a time ---------- */
.fs-deck{margin-top:24px}
.fs-deck-track{list-style:none;display:flex;gap:12px;margin:0 -20px;padding:0 20px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fs-deck-track::-webkit-scrollbar{display:none}
.fs-deck-card{position:relative;flex:0 0 84%;scroll-snap-align:start;padding:22px 20px 20px;border-radius:16px;background:var(--forest);color:#fff}
.fs-deck-cover{display:block;width:136px;border-radius:4px;overflow:hidden}
.fs-deck-card h3{margin-top:18px;font-size:23px;color:#fff;min-height:2.3em}
.fs-deck-card p{margin-top:6px;font-size:16px;color:var(--fs-on-forest)}
.fs-deck-card .fs-button{margin-top:18px}
.fs-deck-card :focus-visible{outline-color:#fff}
.fs-deck-count{position:absolute;top:22px;right:20px;font-size:15px;color:var(--fs-on-forest)}
.fs-deck-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.fs-deck-nav .icon-button{border:1px solid var(--line-strong);background:#fff}

/* ---------- Start here ---------- */
.fs-start{padding:22px}
.fs-start-top{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.fs-start-cover{border-radius:4px;overflow:hidden}
.fs-start h2{font-size:24px}
.fs-start-top p{font-size:16px;color:var(--fs-on-forest)}
.fs-start-top h2+p{margin-top:8px}
.fs-start .fs-also{font-size:16px;text-align:center;margin-top:12px}
.fs-start .fs-next{padding:14px 0 0;color:#fff;border-top:1px solid var(--fs-forest-line);margin-top:16px}
.fs-start .fs-next .text-button{color:#fff;text-decoration-color:#7fa690}
.fs-start{margin-top:18px}

/* ---------- Learner or parent ---------- */
.fs-who{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:22px;padding:4px;border:1px solid var(--fs-outline);border-radius:12px;background:#fff}
.fs-who button{min-height:46px;border-radius:9px;background:transparent;font-size:16px;font-weight:600;color:var(--forest)}
.fs-who button[aria-pressed="true"]{background:var(--forest);color:#fff}
.fs-who+.fs-block{margin-top:28px}

/* ---------- Contents ---------- */
.fs-toc{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.fs-toc>li{border-bottom:1px solid var(--line)}
.fs-toc-item{display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:8px;width:100%;min-height:72px;padding:13px 0;background:transparent;color:inherit;text-align:left}
.fs-toc-n{font:500 22px/1 var(--serif);color:var(--green);font-variant-numeric:tabular-nums}
.fs-toc-text{display:grid;gap:3px}
.fs-toc-text b{font:600 19px/1.25 var(--serif);letter-spacing:-.02em}
.fs-toc-text>span{font-size:15px;color:var(--muted)}
.fs-toc-item>.icon{color:var(--line-strong)}
.fs-toc .fs-next{padding-left:46px}

/* ---------- Laptop and desktop ----------
   From 760px lists and cards go two across. From 1040px the page uses the full 1136px: covers five across,
   the readable page shown whole beside its button, and the end of the page in three columns. */
@media(min-width:601px){
 .fs-page-head h1{font-size:48px}
 .fs-lede{font-size:19px;max-width:640px}
 .fs-gradepick>div{max-width:360px}
 .fs-block>h2{font-size:30px}
 .fs-who{max-width:380px}
 .fs-deck-track{margin:0 -32px;padding-inline:32px;scroll-padding-inline:32px}
 .fs-deck-card{flex-basis:310px}
 .fs-start,.fs-reader{max-width:560px}
 .fs-join{max-width:560px}
}
@media(min-width:760px){
 .fs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:0}
 .fs-list>.fs-row{border-top:1px solid var(--line);border-bottom:0}
 .fs-list:after{content:'';grid-column:1/-1;border-top:1px solid var(--line)}
 .fs-list.is-joined{margin-top:0}
 .fs-more .fs-list:after{display:none}
 .fs-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .fs-feature{grid-template-columns:112px minmax(0,1fr);padding:20px}
 .fs-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
 .fs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
 .fs-toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;border-top:0}
 .fs-toc>li{border-top:1px solid var(--line);border-bottom:0}
 .fs-toc:after{content:'';grid-column:1/-1;border-top:1px solid var(--line)}
 .fs-next{padding-left:60px}
 .fs-start{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top open" "top free";column-gap:40px;align-items:center;padding:32px 36px}
 .fs-start-top{grid-area:top;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:center}
 .fs-start h2{font-size:32px}
 .fs-start>.fs-button{grid-area:open;align-self:end;width:auto;min-width:260px;margin-top:0}
 .fs-start>.fs-also{grid-area:free;align-self:start}
 .fs-start>.fs-next{grid-column:1/-1}
}
@media(min-width:1040px){
 .fs-page-head h1{font-size:56px}
 .fs-block{margin-top:56px}
 .fs-block.is-close{margin-top:36px}
 .fs-wall{grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 28px;margin-top:36px}
 .fs-tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
 .fs-reader-bar{display:none}
 /* Read first: the whole page, as it prints, beside its button */
 .fs-reader{max-width:none;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:56px;align-items:start;margin-top:28px}
 .fs-paper{padding-bottom:0}
 .fs-paper .fs-crop{display:none}
 .fs-paper-whole{display:block;width:100%;height:auto}
 .fs-reader-side{position:sticky;top:110px;max-width:380px}
 .fs-reader-end{margin-top:0;font-size:19px;color:var(--ink)}
 .fs-reader-side .fs-button{margin-top:16px}
 .fs-reader .fs-next{padding:18px 0 0;margin-top:18px;border-top:1px solid var(--line)}
 /* The end of the page: the group, the send-on and the answers side by side */
 .fs-tail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:start;margin-top:72px}
 .fs-tail>*{margin-top:0}
 .fs-join{max-width:none;padding:32px}
 .fs-send .fs-button,.fs-buy .fs-button{display:inline-flex;width:auto}
 .fs-why{grid-column:2;margin-top:36px}
 .fs-buy{grid-column:3;grid-row:1/3}
 .fs-buy .fs-how h3{margin-top:0;font-size:24px}
 .fs-more{margin-top:48px}
}

@media(max-width:360px){
 .fs-page-head h1{font-size:34px}
 .fs-deck-track{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
 .fs-feature{grid-template-columns:76px minmax(0,1fr);padding:14px}
 .fs-start-top{grid-template-columns:80px minmax(0,1fr)}
 .fs-join,.fs-start{padding-inline:18px}
}

/* ---------- Laptop studies: the end of the Start here page ----------
   Three ways to arrange the group, the send-on and how buying works from 1040px. Same markup and words as Start here;
   below 1040px none of these rules apply, so a phone shows each of them exactly as Start here.
   Start here itself keeps the three columns above. */
@media(min-width:1040px){
 [class*="fs-p-start-"] .fs-tail p{text-wrap:pretty}
 /* With enlarged text in a narrow column, "Example" drops under the title instead of running into it */
 [class*="fs-p-start-"] .fs-tail .fs-lib{flex-wrap:wrap}

 /* Banner: the group as one wide forest banner, the shape of the card that opens the page (words left, button right).
    Under it, three level columns: the send-on, the three steps, the library example with the way into the shop. */
 .fs-p-start-banner .fs-tail{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 48px;align-items:stretch}
 .fs-p-start-banner .fs-join{grid-area:1/1/2/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:22px;align-items:center;padding:32px 36px}
 .fs-p-start-banner .fs-join>.icon{grid-row:1/3;align-self:start;width:38px;height:38px;margin-top:1px}
 .fs-p-start-banner .fs-join h2{grid-column:2;margin-top:0;font-size:30px}
 .fs-p-start-banner .fs-join p{grid-column:2;max-width:560px}
 .fs-p-start-banner .fs-join .fs-button{grid-column:3;grid-row:1/3;min-width:260px;margin-top:0}
 .fs-p-start-banner .fs-send{grid-area:2/1;display:flex;flex-direction:column;align-items:flex-start}
 .fs-p-start-banner .fs-send p{margin-bottom:20px}
 .fs-p-start-banner .fs-send .fs-button{margin-top:auto}
 .fs-p-start-banner .fs-buy{grid-area:2/2/3/4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:48px;align-items:start}
 .fs-p-start-banner .fs-how{display:contents}
 .fs-p-start-banner .fs-how h3{grid-area:1/1}
 .fs-p-start-banner .fs-steps{grid-area:2/1/4/2}
 .fs-p-start-banner .fs-how-note{grid-area:4/1}
 .fs-p-start-banner .fs-lib{grid-area:2/2;margin-top:18px}
 .fs-p-start-banner .fs-buy>.fs-button{grid-area:3/2/5/3;align-self:end;justify-self:start;margin-top:20px}

 /* Side by side: two halves. The group with the send-on under it; how buying works in an outlined card of the same height. */
 .fs-p-start-side .fs-tail{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;gap:36px 40px}
 .fs-p-start-side .fs-join{grid-area:1/1;padding:32px 36px}
 .fs-p-start-side .fs-join .fs-button{display:inline-flex;min-width:260px}
 .fs-p-start-side .fs-send{grid-area:2/1;align-self:end;padding:0 36px}
 .fs-p-start-side .fs-buy{grid-area:1/2/3/3;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;padding:32px 36px;border:1px solid var(--fs-outline);border-radius:16px;background:#fff}
 .fs-p-start-side .fs-how{align-self:stretch}
 .fs-p-start-side .fs-lib{margin-bottom:24px}
 .fs-p-start-side .fs-buy>.fs-button{margin-top:auto}

 /* One WhatsApp card: joining and sending are both WhatsApp, so one forest card holds both, the send-on as the quieter
    outlined button. How buying works runs under it in the same two columns. The card's surface is drawn behind both halves. */
 .fs-p-start-card .fs-tail{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 0;align-items:stretch}
 .fs-p-start-card .fs-tail:before{content:'';grid-area:1/1/2/-1;border-radius:16px;background:var(--forest)}
 .fs-p-start-card .fs-join,.fs-p-start-card .fs-send{grid-row:1;display:flex;flex-direction:column;align-items:flex-start;padding:32px 36px;background:transparent}
 .fs-p-start-card .fs-join{grid-column:1}
 /* 42px is the icon above the other heading, so the two headings, the two lines and the two buttons each share a line */
 .fs-p-start-card .fs-send{grid-column:2;padding-top:74px;color:#fff}
 .fs-p-start-card .fs-send h2{font-size:26px;color:#fff}
 .fs-p-start-card .fs-send p{color:var(--fs-on-forest)}
 .fs-p-start-card .fs-join p,.fs-p-start-card .fs-send p{max-width:440px;margin-bottom:24px}
 .fs-p-start-card .fs-join .fs-button,.fs-p-start-card .fs-send .fs-button{display:inline-flex;width:auto;min-width:270px;margin-top:auto}
 .fs-p-start-card .fs-send .fs-button.is-plain{border-color:#7fa690;background:transparent;color:#fff}
 .fs-p-start-card .fs-send .fs-button.is-plain:hover{border-color:#fff;background:var(--fs-forest-raise)}
 .fs-p-start-card .fs-send :focus-visible{outline-color:#fff}
 .fs-p-start-card .fs-buy{grid-area:2/1/3/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr;align-items:start}
 .fs-p-start-card .fs-how{display:contents}
 .fs-p-start-card .fs-how h3,.fs-p-start-card .fs-steps{grid-column:1;padding-left:36px}
 .fs-p-start-card .fs-how h3{grid-row:1}
 .fs-p-start-card .fs-steps{grid-row:2/4}
 .fs-p-start-card .fs-how-note,.fs-p-start-card .fs-lib,.fs-p-start-card .fs-buy>.fs-button{grid-column:2;margin-left:36px}
 .fs-p-start-card .fs-how-note{grid-row:1;align-self:end;margin-top:0}
 .fs-p-start-card .fs-lib{grid-row:2;max-width:400px;margin-top:18px}
 .fs-p-start-card .fs-buy>.fs-button{grid-row:3;align-self:end;justify-self:start;margin-top:20px}
}