/* Free samples study: the home page's closing section and the free page. Loaded only by compare/free-samples-live.html.
   Phones first; laptop and desktop rules follow each part. Colours and fonts are the shop's own variables.
   House rules kept here: one flat surface per card, no mint fills, no eyebrow labels, no heavy top or left borders,
   subtitles under their headings, nothing a parent needs to read smaller than 16px. */
.fs{--fs-on-forest:#d6dfdb;--fs-forest-raise:#174c30;--fs-forest-line:#295a40;--fs-outline:#cfdad3;overflow-wrap:break-word}
.fs .icon{flex:none}
.fs-mark{display:block;flex:none}
[data-fs-preview] .preview-dev-trigger,[data-fs-preview] #enhancedDevPanel{display:none!important}

/* ---------- Shared pieces ---------- */
.fs-card{background:var(--forest);color:#fff;border-radius:16px;padding:28px 22px}
.fs-card h2{font-size:28px;color:#fff}
.fs-sub{font-size:17px;line-height:1.5;margin-top:8px;color:var(--muted);text-wrap:balance}
.fs-card .fs-sub{color:var(--fs-on-forest)}
.fs-button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;margin-top:20px;padding:10px 20px;border:1px solid #fff;border-radius:10px;background:#fff;color:var(--forest);font-weight:600;font-size:17px;line-height:1.25;text-align:center;text-decoration:none;transition:background .16s,border-color .16s,transform .16s}
.fs-button:hover{background:#edf2ee;border-color:#edf2ee}
.fs-button:active{transform:scale(.97)}
.fs-button.is-green{background:var(--green);border-color:var(--green);color:#fff}
.fs-button.is-green:hover{background:var(--green-hover);border-color:var(--green-hover)}
.fs-button.is-outline{background:transparent;border-color:#7fa690;color:#fff;margin-top:10px}
.fs-button.is-outline:hover{background:var(--fs-forest-raise);border-color:#fff}
.fs-card :focus-visible{outline-color:#fff}
.fs-also{font-size:16px;line-height:1.45;color:var(--fs-on-forest);margin-top:14px}
.fs-cover{display:block;width:100%;height:auto;background:#fff}
/* A piece of a 420 x 594 sample page, scaled so the piece fills the width it is given. */
.fs-crop{display:block;overflow:hidden;width:100%;aspect-ratio:var(--cw)/var(--ch)}
.fs-crop img{display:block;max-width:none;width:calc(420/var(--cw)*100%);height:auto;margin:calc(var(--cy)/var(--cw)*-100%) 0 0 calc(var(--cx)/var(--cw)*-100%)}
/* The grid of ten is small, so its drawings are heavier. */
.fs-mini [stroke]{stroke-width:8px}

/* The WhatsApp line: quiet, last in the section, for the visitor who is not buying today. */
.fs-wa{display:flex;align-items:flex-start;gap:12px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.fs-wa>.icon{width:26px;height:26px;margin-top:1px;color:var(--green)}
.fs-wa p{font-size:16px;line-height:1.45;color:var(--ink)}
.fs-wa .text-button{font-size:16px;padding:6px 0 0;color:var(--forest)}

/* ---------- The closing section ---------- */
.fs-closing{padding:40px 0 44px}

/* "How buying works", three steps (Draft 3) */
.fs-how h3{font-size:24px;letter-spacing:-.03em;margin-top:40px}
.fs-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.fs-steps li{display:flex;align-items:baseline;gap:10px}
.fs-steps li>b{font:500 24px/1 var(--serif);color:var(--green);flex:none}
.fs-steps li>div{min-width:0;flex:1}
.fs-steps li>div>span:first-child{display:block;font-size:19px;font-weight:600;line-height:1.3}
.fs-how-note{font-size:16px;color:var(--muted);margin-top:6px}
.fs-lib{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border:1px solid var(--fs-outline);border-radius:12px;background:#fff}
.fs-lib img{width:34px;height:48px;object-fit:cover;background:#fff;border:1px solid var(--line);border-radius:3px;flex:none}
.fs-lib-text{display:grid;min-width:0}
.fs-lib-title{font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.fs-lib-state{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:600;line-height:1.3;color:var(--green-hover);white-space:nowrap}
.fs-lib-state .icon{width:16px;height:16px}
.fs-lib-tag{margin-left:auto;font-size:15px;color:var(--muted)}

/* "When you're ready, it's simple.", ruled steps (Draft 1) */
.fs-how-ruled .fs-steps{margin-top:16px;gap:0;border-bottom:1px solid var(--line)}
.fs-how-ruled .fs-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;padding:15px 0;border-top:1px solid var(--line)}
.fs-how-ruled .fs-steps li>div>span:first-child{font-size:18px}
.fs-how-ruled .fs-lib{margin-top:12px;padding:12px 12px 12px 14px}
.fs-how-ruled .fs-lib-state{font-size:14px}
.fs-lib-download{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:auto;border-radius:10px;background:var(--forest);color:#fff}
.fs-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fs-chips span{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border:1px solid var(--fs-outline);border-radius:8px;background:#fff;font-size:15px;font-weight:500;white-space:nowrap}
.fs-chips .icon{width:18px;height:18px}
.fs-how-ruled>.text-button{margin-top:8px;font-size:16px;color:var(--forest)}

/* One line */
.fs-line{margin-top:16px;font-size:19px;font-weight:600;line-height:1.5}
.fs-line span{white-space:nowrap}
.fs-line b{font:500 24px/1 var(--serif);color:var(--green);margin-right:9px}
.fs-line span+span{margin-left:10px}
.fs-how-line .fs-how-note{margin-top:8px}

/* With the price: one fact under each step */
.fs-how-priced .fs-steps{gap:16px}
.fs-how-priced .fs-steps p{margin-top:3px;font-size:16px;line-height:1.45;color:var(--muted)}

/* A hint per step: small pieces of the real shop, drawn flat so they do not ask to be tapped */
.fs-hint{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;border:1px solid var(--fs-outline);border-radius:12px;background:#fff;font-size:16px;line-height:1.3}
.fs-hint-name{min-width:0;flex:1;font-weight:600}
.fs-hint-price{font-weight:650;font-variant-numeric:tabular-nums}
.fs-hint .fs-lib-tag{margin-left:2px}
.fs-how-hints .fs-lib{margin-top:10px}
.fs-how-hints .fs-how-note{margin-top:12px}

/* Fan of pages (Draft 1) */
.fs-fan{padding:26px 22px 22px}
.fs-fan-pages{position:relative;width:155px;height:102px}
.fs-fan-pages img{position:absolute;width:62px;height:88px;object-fit:cover;background:#fff;border:1px solid var(--line);border-radius:4px}
.fs-fan-pages img:nth-child(1){left:0;top:10px;transform:rotate(-9deg)}
.fs-fan-pages img:nth-child(2){left:90px;top:10px;transform:rotate(9deg)}
.fs-fan-pages img:nth-child(3){left:45px;top:2px}
.fs-fan .fs-words{margin-top:22px}
.fs-fan .fs-sub{font-size:16px;text-wrap:wrap}
.fs-fan .fs-also{font-size:14px;margin-top:12px}

/* Tilted page (Draft 3) */
.fs-tilted{padding:28px 22px 0;overflow:hidden}
.fs-tilted-page{display:block;position:relative;height:216px;margin-top:30px}
.fs-tilted-page span{position:absolute;left:2px;top:22px;width:calc(100% + 38px);background:#fff;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.3);transform:rotate(-3deg);transform-origin:top left}
.fs-tilted-page img{display:block;width:100%;height:auto;border-radius:6px}
.fs-longer .fs-tilted-page{height:338px}

/* Worked example */
.fs-excerpt{padding:22px 22px 26px}
.fs-excerpt-tile{display:block;overflow:hidden;padding:4px 0 8px;border-radius:10px;background:#fff}
.fs-excerpt-caption{margin-top:9px;font-size:15px;color:var(--fs-on-forest)}
.fs-excerpt .fs-words{margin-top:20px}

/* Ten by grade: a row for each grade, its two subjects as tiles */
.fs-covers{padding:24px 22px 22px}
.fs-bygrade{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fs-bygrade a,.fs-bygrade button{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 18px;gap:8px;align-items:center;width:100%;min-height:44px;padding:0;background:transparent;color:#fff;font-family:inherit;text-align:left;text-decoration:none}
.fs-bygrade .icon{width:18px;height:18px;color:#a9c7b6}
.fs-bygrade b{font:600 24px/1 var(--serif);letter-spacing:-.03em}
.fs-bygrade span{display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:8px;background:#fff;color:var(--forest);font-size:15px;font-weight:600;line-height:1.2;transition:background .16s}
.fs-bygrade a:hover span,.fs-bygrade button:hover span{background:#edf2ee}
.fs-covers .fs-object{margin-top:20px}
.fs-covers{padding-bottom:16px}

/* Pick your grade: the buttons work in place and show that grade's two sheets */
.fs-grades-label{margin-top:20px;font-size:16px;font-weight:600}
.fs-grades-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px}
.fs-grade{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid #a9c7b6;border-radius:10px;background:transparent;color:#fff;font-family:inherit;font-size:19px;font-weight:600;text-decoration:none;transition:background .16s,transform .16s}
.fs-grade:hover{background:var(--fs-forest-raise);border-color:#fff}
.fs-grade:active{transform:scale(.97)}
.fs-grade.is-on{background:#fff;border-color:#fff;color:var(--forest)}
.fs-picks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.fs-pick{display:flex;align-items:center;gap:12px;width:100%;padding:10px 10px 10px 12px;border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;text-align:left}
.fs-pick-cover{flex:none;width:38px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.fs-pick-text{flex:1;min-width:0;display:grid;gap:2px}
.fs-pick-text b{font-size:16px;font-weight:600;line-height:1.3}
.fs-pick-text span{font-size:15px;line-height:1.35;color:var(--muted)}
.fs-pick .fs-pill{min-width:66px}
.fs-pick:hover .fs-pill{border-color:var(--green);background:var(--soft)}
.fs-grades.is-choosing .fs-grades-label{margin-top:18px}
.fs-grades.is-choosing .fs-bygrade{margin-top:8px}
.fs-yours{margin-top:8px;font-size:17px;font-weight:600}
.fs-quiet{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;font-size:16px;font-weight:600;color:#fff;text-decoration:underline;text-decoration-color:#7fa690;text-underline-offset:5px}
.fs-quiet .icon{width:18px;height:18px}
.fs-grades{padding-bottom:18px}

/* Free bundle: the Smart Bundle card's own anatomy */
.fs-c-bundle .fs-card{margin-top:22px;padding:26px 22px 24px}
.fs-bundle-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.fs-bundle h3{font-size:34px;line-height:1.05;color:#fff}
.fs-bundle-meta{margin-top:10px;font-size:15px;color:var(--fs-on-forest)}
.fs-bundle-brand{display:grid;justify-items:center;gap:6px;flex:none;font-size:14px;font-weight:600;color:#fff}
.fs-bundle-brand .fs-mark{width:50px;height:50px}
.fs-bundle-subjects{margin-top:14px;padding-bottom:22px;border-bottom:1px solid var(--fs-forest-line);font-size:17px}
.fs-bundle-buy{display:grid;gap:16px;margin-top:20px}
.fs-bundle-price b{display:block;font-size:34px;line-height:1.1;font-weight:650}
.fs-bundle-price span{display:block;margin-top:4px;font-size:16px;color:var(--fs-on-forest)}
.fs-bundle-buy .fs-button{margin-top:0}

/* Receipt */
.fs-receipt{margin-top:20px;padding:6px 20px 22px;border:1px solid var(--fs-outline);border-radius:16px;background:#fff}
.fs-receipt dl{margin:0}
.fs-receipt dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.fs-receipt dt{min-width:0}
.fs-receipt dd{margin:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.fs-receipt dd s{margin-right:8px;color:var(--muted)}
.fs-receipt dd b{font-weight:650}
.fs-receipt .fs-receipt-total{border-bottom:0;padding-bottom:0;font-weight:600}
.fs-receipt-total dd b{font:600 34px/1 var(--serif);letter-spacing:-.03em;color:var(--forest)}
.fs-receipt .fs-button{margin-top:18px}

/* On WhatsApp */
.fs-message-actions .fs-button:first-child{margin-top:20px}
.fs-bubble{display:grid;gap:8px;margin-top:20px;padding:10px 12px 12px;border-radius:4px 14px 14px 14px;background:#fff;color:var(--ink);max-width:290px}
.fs-bubble-from{font-size:15px;font-weight:600;color:var(--green-hover)}
.fs-bubble-file{display:flex;align-items:center;gap:11px;padding:9px;border-radius:9px;background:#f5f8f5}
.fs-bubble-file .fs-cover{width:38px;border:1px solid var(--line);border-radius:3px;flex:none}
.fs-bubble-file>span{display:grid;min-width:0}
.fs-bubble-file b{font-size:15px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.fs-bubble-file span span{font-size:14px;color:var(--muted)}
.fs-bubble-text{font-size:16px;line-height:1.4}

/* Free first step */
.fs-path{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:26px}
.fs-path li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;align-items:baseline}
.fs-path li>b{font:500 26px/1 var(--serif);color:var(--green)}
.fs-path h3{font-size:22px;letter-spacing:-.025em}
.fs-path p{margin-top:5px;font-size:16px;color:var(--muted)}
.fs-path .fs-button{margin-top:14px}
.fs-path .fs-lib,.fs-path .fs-hint{margin-top:12px}

/* Two readers */
.fs-two{margin:18px 0 0;border-top:1px solid var(--fs-forest-line)}
.fs-two>div{padding:14px 0;border-bottom:1px solid var(--fs-forest-line)}
.fs-two dt{font-size:16px;font-weight:600;color:var(--fs-on-forest)}
.fs-two dd{margin:2px 0 0;font:600 21px/1.25 var(--serif);letter-spacing:-.02em}

@media(max-width:360px){
 .fs-bygrade a,.fs-bygrade button{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);gap:6px}
 .fs-bygrade .icon{display:none}
 .fs-bygrade span{padding-inline:7px;font-size:14px;overflow-wrap:anywhere}
 .fs-grades-row{gap:5px}
 .fs-pick{gap:10px;padding-inline:10px 8px}
 .fs-pick-cover{display:none}
 .fs-pick .fs-pill{min-width:60px;padding-inline:12px}
 .fs-button{gap:8px;padding-inline:12px;font-size:16px}
 .fs-button .icon{width:18px;height:18px}
 .fs-path .fs-lib img{display:none}
 .fs-card{padding-inline:14px}
 .fs-card h2{font-size:26px}
 .fs-bundle h3{font-size:30px}
 .fs-line span{white-space:normal}
}

/* ---------- Laptop and desktop ----------
   From 760px a card puts its words on the left and its object on the right. From 1040px "How buying works" and the
   WhatsApp line stand beside the invite, as in Draft 3's PC version: the invite takes the wide column, 337px for the rest. */
@media(min-width:601px){
 .fs-closing{padding:64px 0}
 .fs-card h2{font-size:34px}
 .fs-how h3{font-size:26px}
}
@media(min-width:760px){
 .fs-card{display:flex;align-items:stretch;padding:0;overflow:hidden}
 .fs-card .fs-words{flex:0 1 auto;min-width:0;max-width:390px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:44px 0 44px 44px}
 .fs-card .fs-object{flex:1 1 300px;min-width:0;order:2}
 .fs-card h2{font-size:40px}
 .fs-card .fs-sub{margin-top:10px;max-width:330px}
 .fs-card .fs-words .fs-button{display:inline-flex;margin-top:22px;white-space:nowrap}
 .fs-fan .fs-words,.fs-excerpt .fs-words{margin-top:0}
 .fs-covers{flex-wrap:wrap;padding:0 0 26px}
 .fs-covers .fs-words{padding-bottom:20px}
 .fs-covers .fs-object{margin-top:0}
 .fs-covers>.fs-quiet{order:3;flex-basis:100%;margin:0 44px}
 .fs-fan,.fs-excerpt{padding:0}
 .fs-also{max-width:340px}

 /* Fan of pages: the three pages, larger, on the right */
 .fs-fan .fs-object{display:flex;align-items:center;justify-content:center;padding:36px}
 .fs-fan-pages{width:300px;height:204px}
 .fs-fan-pages img{width:122px;height:173px;border-radius:6px}
 .fs-fan-pages img:nth-child(1){left:0;top:22px}
 .fs-fan-pages img:nth-child(2){left:178px;top:22px}
 .fs-fan-pages img:nth-child(3){left:89px;top:6px}
 .fs-fan .fs-sub{max-width:360px}

 /* Tilted page: Draft 3's PC version */
 .fs-tilted{padding:0;min-height:360px}
 .fs-tilted .fs-object{position:relative}
 .fs-tilted-page{position:absolute;inset:0;height:auto;margin:0}
 .fs-tilted-page span{left:33px;top:44px;width:min(380px,calc(100% - 60px))}
 .fs-longer{min-height:470px}
 .fs-longer .fs-tilted-page{height:auto}

 /* Worked example and Ten by grade: the object stands on the right */
 .fs-excerpt .fs-object{display:flex;flex-direction:column;justify-content:center;padding:36px 40px 36px 36px}
 .fs-covers .fs-object{display:flex;flex-direction:column;justify-content:center;padding:36px 40px 12px 36px}
 .fs-excerpt-tile{max-width:340px}
 .fs-bygrade{max-width:340px}

 /* Pick your grade */
 .fs-grades{flex-wrap:wrap;padding:0 0 26px}
 .fs-grades .fs-words{padding-bottom:20px}
 .fs-grades-row{grid-template-columns:repeat(5,60px)}
 .fs-grades .fs-object{display:flex;flex-direction:column;justify-content:center;padding:36px 40px 12px 36px}
 .fs-picks{margin-top:0;max-width:360px}
 .fs-grades.is-choosing .fs-grades-label{margin-top:0}
 .fs-grades .fs-bygrade{max-width:360px}
 .fs-grades>.fs-quiet{order:3;flex-basis:100%;margin:0 44px}

 /* Free bundle: a wide banner, the price and the button on the right */
 .fs-c-bundle .fs-card{margin-top:26px;align-items:center;padding:36px 40px;gap:40px}
 .fs-bundle .fs-words{padding:0;flex:1 1 auto;align-items:stretch}
 .fs-bundle-subjects{padding-bottom:0;border-bottom:0}
 .fs-bundle-top{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:22px}
 .fs-bundle .fs-object{flex:0 0 auto}
 .fs-bundle-buy{margin-top:0;min-width:230px}

 /* Receipt: the words on the left, the slip on the right */
 .fs-receipt-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:40px;align-items:center}
 .fs-receipt{margin-top:0}

 /* On WhatsApp: two buttons side by side, as in Linear's ending */
 .fs-message{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"words object" "actions object";column-gap:40px;padding:40px 44px}
 .fs-message .fs-words{grid-area:words;padding:0}
 .fs-message .fs-object{grid-area:object;align-self:center}
 .fs-message-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:10px;align-self:end;margin-top:22px}
 .fs-message-actions .fs-button,.fs-message-actions .fs-button:first-child{display:inline-flex;margin-top:0;white-space:nowrap}
 .fs-bubble{margin-top:0}

 /* Free first step: three columns, as the shop's own "how it works" */
 .fs-path{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:32px}
 .fs-path .fs-button{display:inline-flex}

 /* Two readers: the two lines side by side */
 .fs-readers{display:block;padding:40px 44px}
 .fs-two{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--fs-forest-line)}
 .fs-two>div{padding:18px 24px 18px 0;border-bottom:0}
 .fs-two>div+div{padding-left:24px;border-left:1px solid var(--fs-forest-line)}
 .fs-readers-action{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
 .fs-readers-action .fs-button{display:inline-flex;white-space:nowrap}
 .fs-readers-action .fs-also{margin-top:20px}
}
@media(min-width:1040px){
 .fs-closing{padding:88px 0}
 .fs-layout{display:grid;grid-template-columns:minmax(0,1fr) 337px;column-gap:40px;align-items:stretch}
 .fs-layout.is-single{display:block}
 .fs-top,.fs-after{grid-column:1/-1}
 .fs-main{grid-column:1;min-width:0;display:grid}
 .fs-side{grid-column:2;align-self:end}
 .fs-how h3{margin-top:0;font-size:28px}
 .fs-steps li>b{font-size:26px}
 .fs-steps li>div>span:first-child{font-size:20px}
 .fs-how-ruled .fs-steps li>div>span:first-child{font-size:19px}
 .fs-c-receipt .fs-main{align-content:center}
 /* The WhatsApp line runs under both columns, on one line */
 .fs-after .fs-wa{align-items:center;margin-top:40px;padding-top:26px}
 .fs-after .fs-wa>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px}
 .fs-after .fs-wa .text-button{padding-top:0}
}

/* ---------- Dev options ---------- */
.dev-free-row{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:8px;font-size:12px;color:#d0d0d0}
.dev-free-row select{min-height:36px;padding:6px 8px;border:1px solid #444;border-radius:8px;background:#2a2a2a;color:#fff;font:inherit;font-size:12px;min-width:0}