/* Free samples study: the free page on a phone as settled on 5 October 2026 (free-phone.js), and the home page's
   "How buying works". Loaded only by compare/free-samples-live.html. Drawn at 390px and checked at 320px; there is no
   laptop arrangement yet.
   House rules kept: one flat surface per card, no mint fills, no eyebrow labels, nothing a parent needs smaller than 15px. */

/* ---------- A clash to undo ----------
   The shop header's study also has a class called "fs" (shop-header.css: a bottom line, 20px of padding, a margin under
   it). The free study puts "fs" on its own page and on the home page's last section, so both picked those up: the free
   page lost its room at the foot and gained a second line above the footer. These rules give the page back the shop's own. */
.page-shell.fs{margin-bottom:0;padding-bottom:76px;border-bottom:0}
.fs.fs-closing{margin-bottom:0;border-bottom:0}
@media(max-width:600px){.page-shell.fs{padding-bottom:44px}}

/* ---------- Forest cards ---------- */
.fp-card{border-radius:16px;background:var(--forest);color:#fff}
.fp-card h2{color:#fff}
.fp-card :focus-visible{outline-color:#fff}
.fp-card .fs-opened{color:#fff}
.fp-card .fs-next{padding:14px 0 0;margin-top:14px;border-top:1px solid var(--fs-forest-line);color:#fff}
.fp-card .fs-next .text-button{color:#fff;text-decoration-color:#7fa690}
[data-fp-next]:empty,[data-fp-mark]:empty{display:none}

/* ---------- The card: the grade's four free sheets on one forest surface ----------
   The first with its cover and the white button; three more as smaller rows, each led by its subject. */
.fp-one{margin-top:18px;padding:22px 22px 18px}
.fp-one-top{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start}
.fp-one-art{display:block;border-radius:4px;overflow:hidden}
.fp-one-top h2{font-size:24px}
.fp-one-top p{font-size:16px;color:var(--fs-on-forest)}
.fp-one-top h2+p{margin-top:8px}
.fp-one-second{margin-top:12px;border-top:1px solid var(--fs-forest-line)}
.fp-one-lead+.fp-one-second{margin-top:18px}
.fp-one-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 0 0;background:transparent;color:#fff;font-family:inherit;text-align:left}
.fp-one-cover{flex:none;width:44px;border-radius:3px;overflow:hidden}
.fp-one-text{flex:1;min-width:0;display:grid;gap:3px}
.fp-one-text b{font-size:17px;font-weight:600;line-height:1.3}
.fp-one-text>span{font-size:15px;line-height:1.4;color:var(--fs-on-forest)}
.fp-one-row .fs-pill{align-self:center;border-color:#7fa690;background:transparent;color:#fff}
.fp-one-row:hover .fs-pill{border-color:#fff;background:var(--fs-forest-raise)}
.fp-one .fs-also{margin-top:16px;font-size:16px;text-align:center}
.fp-note{margin-top:16px;font-size:16px;line-height:1.45;color:var(--muted);text-wrap:pretty}

/* ---------- The way to the shop: one row after the study tools, in the rows' own look ---------- */
.fp-door-row .fs-row-main{font-family:inherit;text-decoration:none}
.fp-door-row .fs-tile .icon{width:26px;height:26px}

/* ---------- The WhatsApp group: a plain forest card, the last thing on the page ---------- */
.fp-wa{margin-top:48px;padding:26px 22px 22px}
.fp-wa h2{font-size:26px}
.fp-wa>p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--fs-on-forest)}
.fp-wa a{text-decoration:none}
.fp-wa .fs-button .icon{width:22px;height:22px}

/* ---------- On the home page: "How buying works" ----------
   Three boxed rows in the home page's last section: the step's number, its words, and a picture closing the row. */
.fs-buy.fp-buy{margin-top:40px}
.fp-buy h2{font-size:26px}
.fp-buy .fs-how-note{margin-top:14px}
.fp-rows{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
/* The footer's old study has a .fp-rows of its own with a line above it (footer-studies.css). Above a phone it showed
   as a stray line across the top of the three boxes; the owner, 14 October 2026: "extra horizontal line ... remove it". */
@media(min-width:601px){.fp-buy .fp-rows{border-top:0}}
.fp-piece{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 16px;border:1px solid var(--fs-outline);border-radius:12px;background:#fff}
.fp-rows-text{flex:1;min-width:0;display:flex;align-items:baseline;gap:12px;font-size:18px;font-weight:600;line-height:1.3}
.fp-rows-text>b{flex:none;min-width:14px;font:500 22px/1 var(--serif);color:var(--green)}
.fp-rows-pic{flex:none;display:block}
/* The three pictures, all in a 36 x 50 slot: a page, the shop's bag with its count, the page with a tick */
.fp-piece-page{flex:none;display:grid;align-content:start;gap:4px;width:36px;height:50px;padding:6px 6px 0;border:1px solid var(--line-strong);border-radius:4px;background:#fff}
.fp-piece-page .fs-mark{width:12px;height:12px;margin-bottom:2px}
.fp-piece-page i{display:block;height:2px;border-radius:1px;background:var(--line)}
.fp-piece-page i:first-of-type{width:72%;background:var(--line-strong)}
.fp-pic-bag{position:relative;display:grid;place-items:center;width:36px;height:50px;color:var(--forest)}
.fp-pic-bag .icon{width:30px;height:30px}
.fp-pic-bag i{position:absolute;top:2px;right:-3px;display:grid;place-items:center;min-width:18px;height:18px;border-radius:5px;background:var(--green);color:#fff;font:600 12px/1 var(--sans)}
.fp-pic-own{position:relative;display:block}
.fp-pic-tick{position:absolute;right:-7px;bottom:-5px;display:grid;place-items:center;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--green);color:#fff;box-sizing:content-box}
.fp-pic-tick .icon{width:13px;height:13px;stroke-width:2.6}

/* ---------- The home page's invitation: Four covers (inv-covers) ---------- */
.fp-invite{padding:26px 22px 22px}
.fp-invite h2{font-size:28px}
.fp-invite-sub{margin-top:8px;font-size:17px;line-height:1.5;color:var(--fs-on-forest)}
.fp-invite-sub span{display:block;text-wrap:balance}
.fp-invite a{text-decoration:none}
/* Four covers */
.fp-invite-covers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.fp-invite-covers span{display:block;border-radius:4px;overflow:hidden}

@media(max-width:360px){
 .fp-one{padding-inline:18px}
 .fp-one-top{grid-template-columns:80px minmax(0,1fr)}
 .fp-one-row{gap:10px}
 /* A long name (Grade 8 Natural Sciences) needs the room the small cover takes */
 .fp-one-cover{display:none}
 .fp-one-row .fs-pill{min-width:64px;padding-inline:12px}
 .fp-wa{padding-inline:18px}
 .fp-rows-text{font-size:17px}
 .fp-invite{padding-inline:18px}
 .fp-invite h2{font-size:26px}
 .fp-invite-covers{gap:8px}
}

/* Between a phone and a laptop (601 to 1039px) nothing is arranged yet: the free page's card and the home page's
   invitation keep a phone's width so nothing stretches. From 1040px the laptop arrangements below take over. */
@media(min-width:601px){
 .fp-one,.fp-invite{max-width:480px}
}
@media(min-width:1040px){
 .fs-tail.fp-tail{display:block;max-width:480px}
}

/* ---------- The home page's last section on a laptop (from 1040px) ----------
   The owner chose Four covers on the strength of this arrangement ("Yeah 4 covers one is the one"): a wide forest card
   across the shop's 1136px column, the words and the button on the left, the four covers large on the right.
   "How buying works" runs under it on one line: the heading and the closing line on the left, in line with the card's
   words, and the three rows across to the right of them (the owner: "heading besdiee cracks"). */
@media(min-width:1040px){
 .fp-buy h2{font-size:28px}
 .fs-c-inv-covers .fs-layout{display:block}
 .fs-c-inv-covers .fp-invite{max-width:none;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:"head covers" "sub covers" "go covers";grid-template-rows:1fr auto 1fr;column-gap:72px;padding:34px 48px}
 .fs-c-inv-covers .fp-invite h2{grid-area:head;align-self:end;font-size:40px}
 .fs-c-inv-covers .fp-invite-sub{grid-area:sub;margin-top:12px;font-size:18px}
 .fs-c-inv-covers .fp-invite .fs-button{grid-area:go;align-self:start;justify-self:start;display:inline-flex;min-width:280px;margin-top:24px}
 .fs-c-inv-covers .fp-invite-covers{grid-area:covers;align-self:center;gap:18px;margin:0}
 .fs-c-inv-covers .fp-invite-covers span{border-radius:6px}
 .fs-c-inv-covers .fs-side{margin-top:44px}
 .fs-c-inv-covers .fs-side .fs-buy.fp-buy{margin-top:0}
 .fs-c-inv-covers .fp-rows{grid-template-columns:repeat(3,minmax(0,1fr))}

 .fs-c-inv-covers .fp-buy{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);grid-template-areas:"head rows" "note rows";grid-template-rows:1fr 1fr;column-gap:40px;padding-left:48px}
 .fs-c-inv-covers .fp-buy h2{grid-area:head;align-self:end}
 .fs-c-inv-covers .fp-buy .fs-how-note{grid-area:note;margin-top:8px}
 .fs-c-inv-covers .fp-rows{grid-area:rows;margin:0;gap:12px}
 .fs-c-inv-covers .fp-piece{padding:10px 14px 10px 14px;gap:8px}
 .fs-c-inv-covers .fp-rows-text{font-size:17px;gap:10px;text-wrap:balance}
}

/* ---------- The free page on a laptop (from 1040px) ----------
   Same markup as the phone. The owner, 5 October 2026: "For free page on a laptop, it is wide card" and "For free page
   end of page, its bands with heading beside".
     the card   across the shop's column: the first sheet on the left with a bigger cover and its button, the other
                three as rows on the right, "Free. No sign-up." under a thin line
     the end    "The rest of Grade 11." on one line with its row, between two rules (the heading beside, as "How buying
                works" is on the home page), then the WhatsApp card as a wide band: words on the left, button on the right
   Deleted: Four across and Two columns; at the end of the page Two cards ("look ugly"), One card in both versions, Two
   bands in one card, Row then band with the heading above, and the row beside the card. Last copies in
   tmp/free-page-final-before/. */
@media(min-width:1040px){
 .fs-p-four{display:grid;grid-template-columns:minmax(0,1fr)}

 .fs-p-four .fp-one{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;padding:40px 48px 30px}
 .fs-p-four .fp-one-lead{grid-column:1;grid-row:1/span 3;align-self:center}
 .fs-p-four .fp-one-top{grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:center}
 .fs-p-four .fp-one-top h2{font-size:32px}
 .fs-p-four .fp-one-lead .fs-button{margin-top:26px}
 .fs-p-four .fp-one-second{grid-column:2;margin-top:0;padding-bottom:12px}
 .fs-p-four .fp-one-lead+.fp-one-second{margin-top:0;border-top:0}
 .fs-p-four .fp-one .fs-also{grid-column:1/-1;max-width:none;margin-top:22px;padding-top:18px;border-top:1px solid var(--fs-forest-line)}

 .fs-p-four>.fp-door-row{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:56px;align-items:center;margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
 .fs-p-four .fp-door-row h2{margin:0;white-space:nowrap}
 .fs-p-four .fp-door-row .fs-list{display:block;margin:0;border-top:0}
 .fs-p-four .fp-door-row .fs-list:after{display:none}
 .fs-p-four .fp-door-row .fs-row{border-top:0;border-bottom:0}

 .fs-p-four>.fp-tail{max-width:none;margin-top:40px}
 .fs-p-four .fp-wa{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center;margin-top:0;padding:30px 40px}
 .fs-p-four .fp-wa>p{grid-column:1}
 .fs-p-four .fp-wa .fs-button{grid-column:2;grid-row:1/span 2;display:inline-flex;min-width:280px;margin-top:0}
}

/* ---------- The free page on a laptop with twelve free sheets (16 October 2026) ----------
   The owner: "do a better layout for pc dude". Below 1040px the card above (fp-one); from 1040px the grid (fp-grid):
   twelve covers, six across in two rows, on one forest surface. The page's heading is "Start with this one." on a phone
   (one sheet leads) and "Try one today." on a laptop (no sheet leads). Only drawn while free-sheets.js is loaded. */
.fp-grid,.fp-h-pc{display:none}
@media(min-width:1040px){
 .fs-p-four .fp-one:has(~.fp-grid){display:none}
 .fp-h-phone{display:none}
 .fp-h-pc{display:inline}
 .fs-p-four .fp-grid{display:block;margin-top:24px;padding:32px 32px 24px}
 .fp-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;margin:0;padding:0;list-style:none}
 .fp-tile-open{display:flex;flex-direction:column;align-items:stretch;width:100%;height:100%;padding:0;border:0;background:transparent;color:#fff;font-family:inherit;text-align:left;cursor:pointer}
 .fp-tile-cover{display:block;border-radius:4px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.18)}
 .fp-tile-cover .fs-cover{display:block;width:100%;height:auto}
 .fp-tile-open b{margin-top:12px;font-size:16px;font-weight:600;line-height:1.3}
 .fp-tile-name{margin-top:3px;font-size:15px;line-height:1.35;color:var(--fs-on-forest)}
 .fp-tile-meta{margin-top:4px;font-size:13px;line-height:1.35;color:var(--fs-on-forest)}
 .fp-tile-open .fs-pill{align-self:flex-start;margin-top:auto;border-color:#7fa690;background:transparent;color:#fff}
 .fp-tile-meta{margin-bottom:12px}
 .fp-tile-open:hover .fs-pill,.fp-tile-open:focus-visible .fs-pill{border-color:#fff;background:var(--fs-forest-raise)}
 .fp-tile-open:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}
 .fp-grid .fs-also{margin-top:24px;padding-top:16px;border-top:1px solid var(--fs-forest-line);font-size:16px;text-align:center}
}

/* ---------- "How buying works" on a phone: a ruled list ----------
   The owner, 5 October 2026: the boxed rows "looks like buttons". At 600px and narrower the three rows have no box:
   a large number, the step on one line, a larger drawing, and a thin rule between the lines. Wider screens keep the
   rows above. fp-boxed is the old phone look, shown only by compare/how-buying-phone.html. */
.fp-rule-pic{display:none}
@media(max-width:600px){
 .fp-buy:not(.fp-boxed) .fp-rows{gap:0;border-bottom:1px solid var(--line)}
 .fp-buy:not(.fp-boxed) .fp-piece{gap:12px;padding:20px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
 /* Each step is one line where it fits, which it does at the phone's own text size from 320px up. It is no longer forced
    onto one line: with the phone's text size turned up the words ran off the side of the screen (audit D-001). */
 .fp-buy:not(.fp-boxed) .fp-rows-text{align-items:center;gap:12px;font-size:clamp(16px,4.6vw,19px)}
 .fp-buy:not(.fp-boxed) .fp-rows-text>b{width:28px;min-width:0;font-size:34px}
 .fp-buy:not(.fp-boxed) .fp-rows-pic>:not(.fp-rule-pic){display:none}
 .fp-buy:not(.fp-boxed) .fp-rule-pic{display:block;width:44px;height:44px}
 .fp-buy:not(.fp-boxed) .fs-how-note{margin-top:16px}
}