/* FUNFOR.YOU Tools hub: a compact catalogue for visual recaps, spreadsheets and classroom generators. */
:root {
    color-scheme: dark;
    --page: #060c0e;
    --panel: #0f1e21;
    --line: #1e3434;
    --text: #f3efe6;
    --muted: #a1adab;
    --mint: #5fe3bf;
    --gold: #e6c27f;
    --coral: #ff8f80;
    --sky: #86d6c6;
    --sky-line: #2d4b48;
    font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(70rem 36rem at 88% -8%, rgb(31 143 119 / 15%), transparent 62%), radial-gradient(52rem 30rem at -6% 108%, rgb(217 173 98 / 6%), transparent 60%), var(--page); background-attachment: fixed; color: var(--text); overflow-x: hidden; }
a { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0; color: var(--mint); font-weight: 900; letter-spacing: .15em; font-size: .72rem; }

/* Header */
.tools-header { height: 4.5rem; padding: 0 clamp(1rem, 4vw, 4rem); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: #07120ff0; position: relative; z-index: 5; }
.brand-link { font-weight: 950; letter-spacing: .04em; text-decoration: none; font-size: 1.1rem; }
.brand-link b { color: var(--mint); }
.header-label { font-size: .82rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.local-pill { justify-self: end; color: var(--mint); background: rgb(95 227 191 / 6%); border: 1px solid rgb(95 227 191 / 32%); padding: .4rem .75rem; border-radius: 999px; font-size: .72rem; }

main { width: min(61.5rem, calc(100% - 2rem)); margin: 0 auto; overflow-x: clip; }

/* Hero: the headline and a working mascot, with a recap card and a spreadsheet floating off the desk. */
.hero { min-height: 36rem; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 3rem; position: relative; padding: 3rem 0; }
.hero:before { content: ""; position: absolute; width: 34rem; height: 34rem; border-radius: 50%; right: -10rem; top: -8rem; background: radial-gradient(circle, #2b765840, transparent 68%); pointer-events: none; }
.hero__copy { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.5rem, 4.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; margin: .7rem 0 1.4rem; max-width: 46rem; }
.hero h1 em { font-style: normal; color: var(--gold); display: block; }
.hero__lede { font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.6; color: var(--muted); max-width: 36rem; margin: 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero__action { display: inline-flex; gap: 1.4rem; align-items: center; justify-content: space-between; background: var(--mint); color: #052016; padding: .9rem 1.1rem; border-radius: .75rem; text-decoration: none; font-weight: 850; }
.hero__action--sheet { background: rgb(255 255 255 / 4%); color: var(--text); border: 1px solid #2d4b48; }
.hero__proof { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: 0; margin: 1.4rem 0 0; color: #c9d8d2; font-size: .8rem; }
.hero__proof li { display: flex; align-items: center; gap: .45rem; }
.hero__proof li:before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #f3bd4d26; }

.hero__scene { position: relative; width: 100%; max-width: 36rem; aspect-ratio: 5 / 4; justify-self: center; }
.hero__mascot { position: absolute; left: 8%; right: 4%; top: 14%; margin: 0; padding: .5rem; border: 1px solid rgba(244, 203, 93, .55); border-radius: 1.6rem; background: linear-gradient(145deg, rgba(244, 203, 93, .22), rgba(255, 255, 255, .04)); box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, .55); }
.hero__mascot img { display: block; width: 100%; height: auto; border-radius: 1.15rem; }
.float-card { position: absolute; z-index: 2; border-radius: 1rem; box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .5); }
.float-card--recap { left: 0; top: 1%; width: 38%; padding: .85rem .95rem; background: linear-gradient(160deg, #132628, #070f11); color: #f3efe6; border: 1px solid #2d4b48; --r: -6deg; transform: rotate(var(--r)); }
.fc-kicker { display: block; color: #a1adab; font-size: .56rem; font-weight: 900; letter-spacing: .16em; }
.fc-big { display: block; margin-top: .25rem; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2rem; line-height: 1; color: #2f6b4f; }
.fc-sub { display: block; margin-top: .2rem; color: #5f6b77; font-size: .62rem; }
.fc-bars { display: grid; gap: .28rem; margin-top: .55rem; }
.fc-bars i { display: block; height: .3rem; width: var(--w); background: #e6c27f; border-radius: 1px; }
.float-card--sheet { right: 0; bottom: 3%; width: 44%; overflow: hidden; background: #fbfdfc; color: #1d2b26; border: 1px solid #cfded7; --r: 4deg; transform: rotate(var(--r)); font-variant-numeric: tabular-nums; }
.fc-fx { display: flex; gap: .4rem; align-items: center; padding: .4rem .6rem; background: #eef4f1; border-bottom: 1px solid #d6e3dd; font: .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #20483b; }
.fc-fx b { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: #7b8a85; }
.fc-grid { display: grid; grid-template-columns: auto 1fr; font-size: .7rem; }
.fc-grid i { font-style: normal; padding: .28rem .6rem; border-bottom: 1px solid #e3ebe7; text-align: right; }
.fc-grid i:nth-child(odd) { text-align: left; color: #5d6b66; border-right: 1px solid #e3ebe7; }
.fc-grid i.is-sel { box-shadow: inset 0 0 0 2px #1f9d6a; background: #eafaf2; font-weight: 800; }
.fc-file { display: flex; align-items: center; gap: .35rem; padding: .35rem .6rem; font-size: .6rem; font-weight: 800; color: #1f7a54; }
.fc-file:before { content: "XLSX"; padding: .08rem .28rem; border-radius: .25rem; background: #1f7a54; color: #fff; font-size: .5rem; letter-spacing: .05em; }
.float-doc { position: absolute; z-index: 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .45); }
.float-doc svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.float-doc--chart { right: 7%; top: 3%; background: var(--coral); color: #2a0b07; --r: 10deg; transform: rotate(var(--r)); }
.float-doc--page { left: 3%; bottom: 12%; background: var(--gold); color: #2b1d00; --r: -8deg; transform: rotate(var(--r)); }

/* Section heads and mascot cameos */
.tool-section { padding: 5rem 0 1rem; scroll-margin-top: 1rem; }
.section-head { display: flex; gap: 1.3rem; align-items: flex-start; margin-bottom: 2rem; }
.section-head__copy h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .5rem 0 .7rem; letter-spacing: -.04em; }
.section-intro { margin: 0; color: var(--muted); line-height: 1.55; font-size: 1.25rem; max-width: 48rem; }
.tool-section .eyebrow { font-size: .95rem; }
.cameo { --s: 4rem; position: relative; flex: none; width: var(--s); height: var(--s); }
.cameo__face { position: absolute; inset: 0; border-radius: 50%; background: #010101 url("https://funfor.you/assets/fun-to-generate-work-documents.jpg") no-repeat; background-size: calc(var(--s) * 450 / 140) auto; background-position: calc(var(--s) * -160 / 140) calc(var(--s) * -20 / 140); box-shadow: 0 0 0 2px var(--cameo-ring, var(--gold)), 0 .7rem 1.6rem rgba(0, 0, 0, .45); }
.cameo__prop { position: absolute; right: -.45rem; bottom: -.3rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--cameo-prop, var(--gold)); color: #1b1300; box-shadow: 0 0 0 3px var(--page); transition: transform .3s ease; }
.cameo__prop svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cameo--money, .cameo--sales, .cameo--people { --s: 3.2rem; --cameo-ring: var(--sky); --cameo-prop: var(--sky); }
.output-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 1rem 0 0; }
.output-chips li { padding: .42rem .8rem; border: 1px solid #5c5431; border-radius: 999px; background: #f3bd4d14; color: #f8dc9a; font-size: .95rem; font-weight: 800; }

/* Visual Recaps: the client lifecycle, then specialist recaps. Cards read like template choices. */
.lifecycle { padding: 1.1rem; border: 1px solid #1e3434; border-radius: 1.4rem; background: linear-gradient(150deg, rgb(20 40 42 / 76%), rgb(10 21 23 / 76%)); }
.lifecycle__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: 1.1rem; }
.lifecycle__head p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.lifecycle__label, .subsection-label { margin: 0; color: var(--gold) !important; font-size: .9rem !important; font-weight: 950; letter-spacing: .14em; }
.lifecycle__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lifecycle__steps li { position: relative; display: flex; }
.lifecycle__steps li:after { display: none; }
.subsection-label { margin-top: 2.4rem !important; margin-bottom: 1rem !important; color: var(--muted) !important; }
.recap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.section-footnote { margin: 1.1rem 0 0; color: #8da8a1; font-size: .76rem; line-height: 1.5; }

.recap-card, .gen-card { position: relative; display: flex; flex-direction: column; gap: .5rem; width: 100%; border-radius: 1.1rem; transition: border-color .2s, box-shadow .2s, transform .2s; }
.recap-card { padding: 1.2rem; border: 1px solid #1e3434; background: linear-gradient(150deg, rgb(20 40 42 / 76%), rgb(10 21 23 / 76%)); }
.recap-card h3 { margin: .35rem 0 0; font-size: 1.68rem; line-height: 1.16; }
.tool-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: none; border-radius: .78rem; font-size: 1.18rem; font-weight: 950; line-height: 1; box-shadow: inset 0 0 0 1px #ffffff20, 0 .45rem 1rem #00000026; }
.recap-card > .tool-icon { margin-bottom: -.05rem; background: linear-gradient(145deg, #214f40, #102a22); color: #77f6bd; }
.gen-card__body > .tool-icon { margin-bottom: .1rem; background: linear-gradient(145deg, #1d5574, #102f45); color: #85dcff; }
.tool-icon--gold { color: #ffd873 !important; }
.tool-icon--coral { color: #ff9e91 !important; }
.tool-icon--violet { color: #ddb1ff !important; }
.tool-icon--mint { color: #77f6bd !important; }
.tool-icon--sky { color: #85dcff !important; }
.tool-kind { display: inline-flex; align-items: center; align-self: flex-start; margin: .05rem 0 .1rem; padding: .15rem .48rem; border: 1px solid #397b64; border-radius: 999px; color: #9edbc3; font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.recap-card .tool-kind { padding: .25rem .6rem; font-size: .93rem; }
.gen-card .tool-kind { border-color: #356d8b; color: #9bd6ef; }
.recap-card > p { margin: 0; color: var(--muted); font-size: 1.28rem; line-height: 1.4; }
.recap-card:hover, .recap-card:focus-within { border-color: var(--gold); box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .35); }
.step-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .65rem .25rem .25rem; border-radius: 999px; background: rgb(95 227 191 / 6%); border: 1px solid rgb(95 227 191 / 30%); color: #f3efe6; font-size: 1.15rem; font-weight: 850; }
.step-tag b { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--mint); color: #052016; font-size: 1.1rem; }
.theme-hint { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 0 !important; font-size: 1.12rem !important; color: #8da8a1 !important; }
.sw { width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid #ffffff40; }
.sw--midnight { background: linear-gradient(135deg, #0f1e21 50%, #5fe3bf 50%); }
.sw--ivory { background: linear-gradient(135deg, #f7f3ea 50%, #b98a3e 50%); }
.sw.is-on { box-shadow: 0 0 0 2px var(--gold); }
.recap-card:is(:hover, :focus-within) .theme-hint .sw.is-on { box-shadow: none; }
.recap-card:is(:hover, :focus-within) .thumb[data-alt="wealth"] ~ .theme-hint .sw--wealth,
.recap-card:is(:hover, :focus-within) .thumb[data-alt="fintech"] ~ .theme-hint .sw--fintech,
.recap-card:is(:hover, :focus-within) .thumb[data-alt="hustle"] ~ .theme-hint .sw--hustle { box-shadow: 0 0 0 2px var(--gold); }

/* The whole card is the link; the CTA carries the accessible name. */
.card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding-top: .35rem; color: var(--mint); font-weight: 900; font-size: .85rem; text-decoration: none; }
.recap-card .card-cta { font-size: 1.36rem; }
.card-cta:after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-cta:focus-visible { outline: none; }
.recap-card:has(.card-cta:focus-visible), .gen-card:has(.card-cta:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.card-cta span { transition: transform .2s ease; }

/* Recap thumbnails: stylised mini recaps in each theme; hover previews another theme. */
.thumb { --t-bg: radial-gradient(circle at 88% 6%, rgb(31 143 119 / 22%), transparent 50%), linear-gradient(160deg, #122527, #070f11); --t-ink: #f3efe6; --t-muted: #a1adab; --t-accent: #5fe3bf; --t-accent2: #e6c27f; --t-line: #223b3c; --t-track: #1d3336; --t-panel: rgb(255 255 255 / 3%); --t-display: Inter, ui-sans-serif, system-ui, sans-serif; --t-title-weight: 700; --t-prefix: ""; --t-bullet: "•"; --t-frame: inset 0 0 0 1px #223b3c; --t-radius: .8rem;
    position: relative; display: flex; flex-direction: column; gap: .35rem; height: 10.6rem; padding: .7rem .8rem; overflow: hidden; border-radius: var(--t-radius); background: var(--t-bg); color: var(--t-ink); box-shadow: var(--t-frame); transition: transform .3s ease, box-shadow .3s ease; }
.recap-card:is(:hover, :focus-within) .thumb[data-alt="ivory"] { --t-bg: linear-gradient(160deg, #fffdf9, #efe8da); --t-ink: #14221f; --t-muted: #5b6865; --t-accent: #0e8768; --t-accent2: #b98a3e; --t-line: #e1d7c3; --t-track: #ebe3d2; --t-panel: #fffdf9; --t-display: Inter, ui-sans-serif, system-ui, sans-serif; --t-title-weight: 700; --t-prefix: ""; --t-bullet: "•"; --t-frame: inset 0 0 0 1px #e1d7c3; --t-radius: .8rem; }

.thumb > * { flex-shrink: 0; }
.t-kicker { font-size: .56rem; font-weight: 900; letter-spacing: .16em; color: var(--t-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-kicker:before { content: var(--t-prefix); }
.t-title { font-family: var(--t-display); font-weight: var(--t-title-weight); font-size: 1.15rem; line-height: 1.1; }
.t-big { font-family: var(--t-display); font-weight: var(--t-title-weight); font-size: 2.05rem; line-height: 1; margin-top: .1rem; }
.t-sub { font-size: .66rem; color: var(--t-muted); }
.t-list { display: grid; gap: .2rem; margin-top: .15rem; counter-reset: t; }
.t-list i { position: relative; padding: .12rem .3rem .12rem .95rem; font-style: normal; font-size: .68rem; border-radius: .3rem; background: var(--t-panel); }
.t-list i:before { content: var(--t-bullet); position: absolute; left: .3rem; color: var(--t-accent); }
.t-list--num i:before { counter-increment: t; content: counter(t) "."; font-weight: 800; left: .22rem; }
.t-callout { margin-top: auto; padding: .25rem .45rem; border-left: 3px solid var(--t-accent); background: color-mix(in srgb, var(--t-accent) 12%, transparent); font-size: .64rem; font-weight: 800; }
.t-alloc { display: flex; height: .45rem; margin-top: auto; border-radius: 999px; overflow: hidden; background: var(--t-track); }
.t-alloc i { width: var(--w); background: var(--t-accent); }
.t-alloc i:nth-child(2) { background: var(--t-accent2); }
.t-alloc i:nth-child(3) { background: var(--t-muted); }
.t-alloc i:nth-child(4) { background: var(--t-line); }
.t-bars { display: grid; gap: .3rem; margin-top: auto; }
.t-bars i { height: .32rem; width: var(--w); background: var(--t-accent); border-radius: 1px; }
.t-ring { --p: 50; position: relative; display: grid; place-items: center; width: 4.1rem; height: 4.1rem; margin: .2rem 0 .1rem; border-radius: 50%; background: conic-gradient(var(--t-accent) calc(var(--p) * 1%), var(--t-track) 0); }
.t-ring:before { content: ""; position: absolute; inset: .42rem; border-radius: 50%; background: #0f1e21; }
.recap-card:is(:hover, :focus-within) .thumb[data-alt="ivory"] .t-ring:before { background: #f7f3ea; }

.t-ring b { position: relative; font-size: .92rem; font-weight: 800; }
.t-rows, .t-cover, .t-check { display: grid; gap: .28rem; margin-top: .3rem; }
.t-rows i { display: flex; justify-content: space-between; gap: .5rem; padding: .22rem .4rem; font-style: normal; font-size: .68rem; border-radius: .25rem; background: var(--t-panel); border-bottom: 1px solid var(--t-line); }
.t-rows i span:last-child { font-weight: 800; }
.t-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-top: .25rem; }
.t-tiles i { display: grid; padding: .3rem .4rem; font-style: normal; font-family: var(--t-display); font-size: .9rem; border: 1px solid var(--t-line); border-radius: .35rem; background: var(--t-panel); }
.t-tiles small { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
.t-progress { display: block; height: .5rem; margin-top: auto; border-radius: 999px; background: var(--t-track); overflow: hidden; }
.t-progress i { display: block; width: var(--w); height: 100%; background: linear-gradient(90deg, var(--t-accent), var(--t-accent2)); }
.t-cover i { position: relative; display: block; padding-bottom: .38rem; font-style: normal; font-size: .64rem; }
.t-cover i:before, .t-cover i:after { content: ""; position: absolute; left: 0; bottom: 0; height: .24rem; border-radius: 1px; }
.t-cover i:before { right: 0; background: var(--t-track); }
.t-cover i:after { width: var(--w); background: var(--t-accent); }
.t-check i { position: relative; padding-left: 1rem; font-style: normal; font-size: .68rem; }
.t-check i:before { content: "○"; position: absolute; left: 0; color: #d06a5f; font-weight: 900; }
.t-check i.is-done:before { content: "✓"; color: #2f9d6a; }
.t-check i.is-part:before { content: "◐"; color: #c9962b; }

/* Smart Spreadsheet Generators */
.section-head--sheets { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); gap: 2rem; align-items: end; }
.world-sheets .eyebrow { color: var(--sky); }
.sheet-promise { margin: 1rem 0 0; display: inline-flex; flex-wrap: wrap; gap: .3rem .6rem; padding: .75rem 1rem; border-radius: .8rem; background: rgb(95 227 191 / 7%); border: 1px solid rgb(95 227 191 / 30%); color: #f3efe6; font-weight: 850; font-size: 1.2rem; line-height: 1.4; }
.workbook-facts { list-style: none; margin: 0; padding: 1.25rem 1.4rem; display: grid; gap: .65rem; border: 1px solid #1e3434; border-radius: 1rem; background: rgb(255 255 255 / 3%); color: var(--muted); font-size: 1.1rem; line-height: 1.4; }
.workbook-facts li { display: flex; gap: .5rem; align-items: baseline; }
.workbook-facts li:before { content: "▦"; color: #62efb2; }
.workbook-facts b { color: #eaf9ff; }
.tool-group { margin-top: 1.4rem; padding: 1.05rem; border: 1px solid var(--sky-line); border-radius: 1.4rem; background: linear-gradient(150deg, #10263a, #0a1621); }
.group-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.group-head h3 { margin: 0; font-size: 1.45rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.group-head p { margin: .35rem 0 0; color: #9dbccc; font-size: 1.15rem; line-height: 1.4; }
.gen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gen-card { padding: 1rem; border: 1px solid #1e3434; background: linear-gradient(150deg, rgb(20 40 42 / 76%), rgb(10 21 23 / 76%)); }
.gen-card:hover, .gen-card:focus-within { border-color: var(--sky); box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .35); }
.gen-card__body { display: flex; flex-direction: column; gap: .6rem; padding: .55rem .35rem .25rem; flex: 1; }
.gen-card h4 { margin: .12rem 0 0; font-size: 1.68rem; line-height: 1.16; color: #eaf9ff; }
.gen-card__body > p { margin: 0; color: #9dbccc; font-size: 1.28rem; line-height: 1.4; }
.gen-card .tool-kind { padding: .25rem .6rem; font-size: .93rem; }
.gen-card .card-cta { font-size: 1.36rem; }
.new-tag { margin-left: .35rem; padding: .18rem .55rem; border-radius: 999px; background: var(--gold); color: #241800; font-style: normal; font-size: .9rem; font-weight: 950; letter-spacing: .06em; vertical-align: .12rem; }
.gen-benefit { display: flex; align-items: center; gap: .6rem; margin-top: .15rem !important; color: #c8e9d8 !important; font-size: 1.2rem !important; font-weight: 800; }
.xlsx-mark { padding: .2rem .4rem; border-radius: .28rem; background: #1f7a54; color: #fff; font-size: .85rem; font-weight: 950; letter-spacing: .06em; }
.card-cta--sheet { color: var(--sky); }
.card-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-top: auto; }
.card-cta-row .card-cta { margin-top: 0; }
.xlsx-badge { padding: .3rem .65rem; border: 1px solid #3d8f6b; border-radius: 999px; color: #9ff0c8; font-size: 1rem; font-weight: 900; }

/* Mini workbook previews: a formula bar, gridlines and real formulas from each generator. */
.sheet { overflow: hidden; border-radius: .8rem; border: 1px solid #cfded7; background: #fbfdfc; color: #1d2b26; font-size: .7rem; font-variant-numeric: tabular-nums; box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .3); transition: transform .3s ease; }
.sheet__bar { display: flex; align-items: center; gap: .45rem; padding: .38rem .55rem; background: #eef4f1; border-bottom: 1px solid #d6e3dd; font-size: .66rem; }
.sheet__bar b { flex: none; min-width: 1.9rem; padding: .05rem .25rem; border: 1px solid #c9d8d1; border-radius: .2rem; background: #fff; color: #5d6b66; font-weight: 700; text-align: center; }
.sheet__bar i { flex: none; font-family: Georgia, serif; color: #7b8a85; }
.sheet__bar code { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #20483b; font: .66rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sheet__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sheet__grid tr > th:first-child { width: 1.6rem; }
.sheet__grid th { padding: .12rem .2rem; background: #f0f3f2; color: #8a9893; font-size: .56rem; font-weight: 700; text-align: center; border: 1px solid #e3ebe7; }
.sheet__grid thead th { height: 1.05rem; }
.sheet__grid td { padding: .24rem .4rem; border: 1px solid #e3ebe7; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__grid td:first-of-type, .sheet__grid td.is-text { text-align: left; color: #34443e; }
.sheet__grid .is-head td { background: #e8f5ee; color: #20483b; font-weight: 800; font-size: .62rem; text-align: left; }
.sheet__grid .is-total td { font-weight: 900; border-top: 2px solid #9fbdb0; background: #f6faf8; }
.sheet__grid td.is-sel { box-shadow: inset 0 0 0 2px #1f9d6a; background: #eafaf2; font-weight: 800; }
.is-pos { color: #1f7a54; }
.is-neg { color: #c0392b; }
.is-warn { color: #b7791f; }

.flag { margin-left: .15rem; padding: 0 .2rem; border-radius: .2rem; background: #fff1d6; color: #9a5b00; font-size: .54rem; font-weight: 800; }
.dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .3rem; border-radius: 50%; vertical-align: .05rem; }
.dot--bad { background: #d64541; }
.dot--warn { background: #e0a82d; }
.dot--good { background: #2f9d6a; }
.sheet__chart { display: flex; align-items: center; gap: .5rem; padding: .35rem .55rem .45rem; border-top: 1px solid #e3ebe7; color: #5d6b66; font-size: .6rem; }
.sheet__chart span { flex: none; }
.sheet__chart svg { flex: 1; height: 1.6rem; min-width: 0; }
.sheet__chart polyline { fill: none; stroke: #1f9d6a; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sheet__plot { position: relative; padding: .55rem .6rem .5rem; }
.sheet__plot svg { display: block; width: 100%; height: auto; max-height: 7.5rem; }
.sheet__plot .grid { stroke: #e3ebe7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sheet__plot .rev, .sheet__plot .cost { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sheet__plot .rev { stroke: #1f9d6a; }
.sheet__plot .cost { stroke: #d6674b; }
.sheet__plot circle { fill: #fff; stroke: #20483b; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sheet__legend { display: flex; gap: .8rem; margin-top: .3rem; font-size: .6rem; color: #5d6b66; }
.sheet__legend i { font-style: normal; display: flex; align-items: center; gap: .3rem; }
.sheet__legend i:before { content: ""; width: .8rem; height: .18rem; border-radius: 1px; }
.sheet__legend i.rev:before { background: #1f9d6a; }
.sheet__legend i.cost:before { background: #d6674b; }
.sheet__callout { position: absolute; left: 50%; top: .6rem; padding: .12rem .35rem; border-radius: .25rem; background: #20483b; color: #fff; font-size: .58rem; white-space: nowrap; }
.sheet__pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .4rem .55rem .5rem; border-top: 1px solid #e3ebe7; color: #5d6b66; font-size: .56rem; }
.sheet__pairs span { display: grid; gap: .2rem; }
.sheet__pairs i { position: relative; display: block; height: .7rem; background: linear-gradient(#cfe3da, #cfe3da) 0 0 / var(--b) 40% no-repeat, linear-gradient(#20483b, #20483b) 0 100% / var(--a) 45% no-repeat; }
.sheet__weeks { display: grid; grid-template-columns: 4.3rem repeat(6, minmax(0, 1fr)); gap: .2rem; padding: .5rem .55rem .2rem; }
.wk-head { color: #8a9893; font-size: .56rem; font-weight: 800; text-align: center; }
.wk-row { font-size: .62rem; color: #34443e; align-self: center; }
.wk { display: grid; place-items: center; height: 1.35rem; border-radius: .22rem; font-size: .6rem; font-weight: 800; }
.wk.is-on { background: #1f9d6a; color: #fff; }
.wk.is-part { background: #f3d58a; color: #6b4a00; }
.wk.is-gap { border: 1px dashed #d6674b; background: #fdf0ec; }
.sheet__note { margin: 0; padding: .35rem .55rem .45rem; color: #5d6b66; font-size: .6rem; }
.sheet__note b { color: #20483b; }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .35rem; padding: .5rem .55rem .2rem; }
.compare__col { display: grid; gap: .2rem; }
.compare__col i { padding: .18rem .35rem; border: 1px solid #e3ebe7; border-radius: .2rem; font-style: normal; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare__col--before i { background: #fdf0ec; color: #8a3b2d; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.compare__col--after i { background: #eafaf2; color: #1f5c43; font-weight: 700; }
.compare__label { font-size: .54rem; font-weight: 900; letter-spacing: .12em; color: #8a9893; }
.compare__arrow { color: #1f9d6a; font-weight: 900; }

/* Privacy and footer */
.privacy-note { margin: 4rem 0 5rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 1rem; display: flex; gap: 1rem; align-items: center; background: #0d1d18; }
.privacy-note > span { color: var(--mint); font-size: 1.5rem; }
.privacy-note strong { font-size: .9rem; }
.privacy-note p { margin: .25rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.tools-footer { padding: 1.5rem clamp(1rem, 4vw, 4rem); border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.tools-footer span:first-child { color: var(--mint); font-weight: 900; }
.anchor-alias { position: relative; top: -1rem; display: block; height: 0; }

/* Header tools: the currency preset (shown by tools-hub.js) and the always-visible privacy pill. */
.tools-header { position: sticky; top: 0; backdrop-filter: blur(10px); }
.header-tools { justify-self: end; display: flex; align-items: center; gap: .6rem; }
.header-tools .local-pill { justify-self: auto; white-space: nowrap; }
.currency-preset { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.currency-preset[hidden] { display: none; }
.currency-preset select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: .5rem; padding: .35rem .45rem; font: inherit; font-size: .8rem; letter-spacing: 0; text-transform: none; }

/* Hero badges and the trust bar under the hero. */
.hero__badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.4rem 0 0; }
.hero__badges li { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .7rem; border: 1px solid #33745d; border-radius: 999px; background: #10211c; color: #d9ebe3; font-size: .78rem; font-weight: 750; }
.trust-bar { margin: 0 0 1.2rem; padding: 1rem 1.25rem; border: 1px solid #33745d; border-left: 4px solid var(--mint); border-radius: .8rem; background: #0d1d18; color: #cfe2da; font-size: 1.1rem; line-height: 1.5; }
.trust-bar strong { color: var(--mint); }

/* Motion: gentle and optional. */
@media (prefers-reduced-motion: no-preference) {
    .float-card--recap { animation: bob 7s ease-in-out infinite; }
    .float-card--sheet { animation: bob 8s ease-in-out -3s infinite; }
    .float-doc--chart { animation: bob 6s ease-in-out -1s infinite; }
    .float-doc--page { animation: bob 9s ease-in-out -4s infinite; }
    .recap-card:hover, .gen-card:hover { transform: translateY(-4px); }
    .recap-card:hover .thumb { transform: translateY(-2px) rotate(-.8deg); }
    .gen-card:hover .sheet { transform: translateY(-2px) rotate(.6deg); }
    .recap-card:hover .card-cta span, .gen-card:hover .card-cta span { transform: translateX(4px); }
    .tool-group:hover .cameo__prop, .world-recaps .section-head:hover .cameo__prop { transform: rotate(-12deg) scale(1.08); }
}
@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}

/* Tablet */
@media (max-width: 64rem) {
    .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; }
    .hero__scene { max-width: 34rem; }
    .lifecycle__steps, .recap-grid, .gen-grid { grid-template-columns: 1fr; max-width: 38rem; margin-inline: auto; }
    .section-head--sheets { grid-template-columns: 1fr; }
    .tools-header { display: flex; flex-wrap: wrap; height: auto; min-height: 4.5rem; gap: .5rem; padding-block: .65rem; }
    .header-tools { flex: 1 1 100%; min-width: 0; width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .header-label { display: none; }
}

/* Phone */
@media (max-width: 44rem) {
    main { width: calc(100% - 1.25rem); }
    .hero { padding: 2.2rem 0 1rem; min-height: 0; }
    .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__proof { gap: .4rem .9rem; font-size: .76rem; }
    .float-card--recap { padding: .55rem .6rem; }
    .fc-big { font-size: 1.35rem; }
    .fc-kicker { font-size: .48rem; }
    .fc-sub { font-size: .52rem; }
    .fc-fx, .fc-grid { font-size: .58rem; }
    .fc-grid i { padding: .18rem .4rem; }
    .fc-file { font-size: .52rem; }
    .float-doc { width: 2.1rem; height: 2.1rem; }
    .world__art { right: 1rem; bottom: 1rem; }
    .world__art--recap { width: 4.4rem; height: 4.8rem; }
    .world__art--sheet { grid-template-columns: repeat(3, 1.5rem); }
    .world__art--sheet i { height: 1rem; }
    .tool-section { padding-top: 3.5rem; }
    .section-head { flex-direction: column; gap: .9rem; }
    .lifecycle { padding: .75rem; }
    .lifecycle__steps, .recap-grid, .gen-grid { grid-template-columns: 1fr; }
    .lifecycle__steps, .recap-grid, .gen-grid { max-width: none; }
    .recap-card, .gen-card { padding: .95rem; gap: .45rem; }
    .recap-card h3, .gen-card h4 { font-size: 1.4rem; line-height: 1.2; }
    .recap-card > p, .gen-card__body > p { font-size: 1rem; line-height: 1.45; }
    .recap-card .tool-kind, .gen-card .tool-kind { font-size: .75rem; }
    .recap-card .card-cta, .gen-card .card-cta { font-size: 1rem; min-height: 2.5rem; align-items: center; }
    .step-tag { font-size: 1rem; }
    .theme-hint { font-size: .86rem !important; }
    .thumb { height: auto; min-height: 10rem; }
    .lifecycle__steps li:after { display: none; }
    .tool-group { padding: 1rem; }
    .group-head { align-items: flex-start; }
    .local-pill { display: none; }
    .tools-header { display: flex; flex-wrap: wrap; justify-content: space-between; height: auto; min-height: 4.5rem; gap: .5rem; padding-block: .65rem; }
    .header-tools { flex: 1 1 100%; min-width: 0; width: 100%; justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
    .header-tools .credit-pill, .header-tools .credit-buy { min-width: 0; width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; }
    .currency-preset { font-size: 0; gap: 0; }
    .tools-footer { display: block; text-align: center; }
    .tools-footer span { display: block; margin: .25rem; }
}

/* ------------------------------------------------------------------ */
/* For teachers: printable papers                                      */
/* ------------------------------------------------------------------ */
.world-teachers .eyebrow { color: #ffd873; }
.teach-card .tool-kind { border-color: #8a6a2c; color: #f1d08a; }
.paper-mock { position: relative; padding: .2rem .2rem 1.2rem; }
.paper-mock__sheet { display: grid; gap: .32rem; padding: .8rem .95rem .9rem; border-radius: .35rem; background: #fffdf8; color: #1b1b1b; font: .66rem/1.35 Arial, "Helvetica Neue", Helvetica, sans-serif; box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .3); }
.paper-mock__sheet b { font-size: .8rem; padding-bottom: .3rem; border-bottom: 1.5px solid #1b1b1b; }
.paper-mock__sheet p { margin: 0; }
.paper-mock__sheet em { font-style: normal; font-weight: 700; margin-right: .2rem; }
.paper-mock__sheet u { display: inline-block; width: 3.2rem; border-bottom: 1px solid #1b1b1b; vertical-align: -.1rem; }
.paper-mock__name { display: flex; gap: .8rem; color: #444; }
.paper-mock__name i { flex: 1; font-style: normal; border-bottom: 1px solid #1b1b1b; }
.paper-mock__options { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .6rem; padding-left: .9rem; color: #333; }
.paper-mock__key { position: absolute; right: .9rem; bottom: .15rem; display: grid; gap: .1rem; padding: .45rem .65rem; border-radius: .3rem; background: #1b1b1b; color: #f5f1e6; font: .6rem/1.3 Arial, Helvetica, sans-serif; transform: rotate(2.5deg); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .35); }
.paper-mock__key b { color: #ffd873; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.paper-mock__tip { padding: .2rem .45rem; border-left: 3px solid #1b1b1b; background: #efece4; }
.paper-mock__tip em { display: block; font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.paper-mock__example { display: grid; border: 1px solid #1b1b1b; border-radius: .2rem; overflow: hidden; }
.paper-mock__example span { padding: .08rem .45rem; background: #1b1b1b; color: #fffdf8; font-size: .52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.paper-mock__example i { padding: .2rem .45rem; font-style: normal; }

/* Each tool card now has its own monster scene instead of a repeated mock report. */
.tool-art { width: 100%; aspect-ratio: 3 / 2; max-height: 15rem; overflow: hidden; border: 1px solid #57745b; border-radius: .82rem; background: #10271f; box-shadow: 0 .7rem 1.7rem #0007; }
.tool-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.recap-card:hover .tool-art img, .recap-card:focus-within .tool-art img,
.gen-card:hover .tool-art img, .gen-card:focus-within .tool-art img { transform: scale(1.035); }
.recap-card h3, .gen-card h4 { margin-top: .35rem; }
@media (max-width: 44rem) {
    .tool-art { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tool-art img { transition: none; }
}

/* Keep every section visible; audience buttons highlight matching generators in place. */
.audience-filter { --audience-highlight: var(--mint); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem 1rem; margin: 1.2rem 0 0; padding: .8rem 1rem; border: 1px solid #345348; border-radius: 1rem; background: linear-gradient(130deg, #102820, #0a1716); scroll-margin-top: 6rem; }
.audience-filter__label { margin: 0; color: #a8c2b8; font-size: .8rem; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }
.audience-filter__choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.audience-filter__choices button { min-width: 0; min-height: 2.9rem; padding: .55rem .65rem; border: 1px solid #345348; border-radius: .8rem; background: #0b1a18; color: #d4e6db; font: inherit; font-size: .88rem; font-weight: 850; line-height: 1.15; cursor: pointer; transition: border-color .18s, box-shadow .18s, background-color .18s, transform .18s; }
.audience-filter__choices button:hover, .audience-filter__choices button:focus-visible { border-color: var(--audience-highlight); outline: none; transform: translateY(-1px); }
.audience-filter__choices button[aria-pressed="true"] { color: #071b15; background: var(--audience-highlight); border-color: var(--audience-highlight); box-shadow: 0 0 0 1px color-mix(in srgb, var(--audience-highlight) 60%, white), 0 0 1.25rem color-mix(in srgb, var(--audience-highlight) 42%, transparent); }
.audience-filter[data-selected="fa"] { --audience-highlight: #55e5b0; }
.audience-filter[data-selected="rm"] { --audience-highlight: #68c7ff; }
.audience-filter[data-selected="sme"] { --audience-highlight: #d59aff; }
.audience-filter[data-selected="teacher"] { --audience-highlight: #ffc976; }
.audience-filter[data-selected="all"] { --audience-highlight: var(--mint); }
.audience-filter__status { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .82rem; }
.audience-card--highlight { position: relative; z-index: 1; border-color: var(--audience-highlight, var(--mint)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--audience-highlight, var(--mint)) 72%, transparent), 0 0 1.5rem color-mix(in srgb, var(--audience-highlight, var(--mint)) 35%, transparent) !important; }
.audience-card--muted { opacity: .48; filter: saturate(.62); }
.recap-card, .gen-card { transition: opacity .2s, filter .2s, box-shadow .2s, border-color .2s; }
.recap-card[data-mascot="all"] .tool-art img, .gen-card[data-mascot="all"] .tool-art img { object-fit: contain; object-position: center; background: #10271f; }
.hero { min-height: 31rem; padding-block: 2.3rem; }
.hero__action--teacher { background: #ffce79; color: #261803; }
.tool-section { padding-top: 2rem; }
.section-head { margin-bottom: 1.1rem; }
.section-intro { font-size: 1.05rem; }
.sheet-promise { font-size: 1rem; }
.workbook-facts { font-size: .95rem; }
.group-head p { font-size: .95rem; }
.lifecycle__head p { font-size: .9rem; }
.subsection-label { margin-top: 1.35rem !important; }
.recap-grid, .gen-grid, .lifecycle__steps { gap: .8rem; }
.recap-card, .gen-card { min-height: 11.5rem; padding: .7rem; gap: .35rem .85rem; }
.recap-card { display: grid; grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
.recap-card > .tool-art { grid-column: 1; grid-row: 1 / span 4; }
.recap-card > :not(.tool-art) { grid-column: 2; }
.recap-card > .step-tag { grid-row: 1; }
.recap-card > h3 { grid-row: 2; }
.recap-card > p { grid-row: 3; }
.recap-card > .card-cta { grid-row: 4; }
.recap-card > .tool-kind, .gen-card .tool-kind, .gen-card .gen-benefit { display: none; }
.recap-card h3, .gen-card h4 { margin: 0; font-size: 1.13rem; line-height: 1.22; }
.recap-card > p, .gen-card__body > p { font-size: .9rem; line-height: 1.35; }
.recap-card .card-cta, .gen-card .card-cta { font-size: .91rem; padding-top: 0; }
.step-tag { font-size: .73rem; padding: .12rem .4rem .12rem .12rem; gap: .3rem; }
.step-tag b { width: 1.25rem; height: 1.25rem; font-size: .75rem; }
.gen-card { display: grid; grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr); align-items: stretch; }
.gen-card > .tool-art { grid-column: 1; }
.gen-card__body { grid-column: 2; min-width: 0; padding: .2rem 0; gap: .5rem; }
.gen-card .new-tag { font-size: .6rem; padding: .12rem .32rem; vertical-align: .15rem; }
.tool-art { height: 100%; min-height: 10rem; max-height: none; aspect-ratio: auto; border-radius: .6rem; }
.tool-art img { object-position: center; }
.recap-card[data-mascot="all"] .tool-art img, .gen-card[data-mascot="all"] .tool-art img { object-fit: contain; background: #10271f; }
.world-teachers .section-head { align-items: center; }
.teacher-mascot { width: 4.2rem; height: 4.2rem; flex: none; object-fit: cover; border: 2px solid #ffc976; border-radius: 50%; box-shadow: 0 0 1.3rem #ffad4360; }
.tools-header { grid-template-columns: 1fr auto; }
.header-label { display: none; }
.currency-preset { font-size: 0; }

@media (max-width: 64rem) {
    .lifecycle__steps, .recap-grid, .gen-grid { max-width: none; }
}
@media (max-width: 44rem) {
    .tools-header { display: flex; flex-wrap: nowrap; align-items: center; min-height: 3.7rem; padding: .45rem .7rem; gap: .3rem; }
    .brand-link { flex: none; font-size: .98rem; }
    .header-tools { display: flex; flex: 1 1 auto; width: auto; min-width: 0; justify-content: flex-end; align-items: center; flex-wrap: nowrap; gap: .22rem; }
    .currency-preset select { width: 6.8rem; padding: .3rem .2rem; font-size: .7rem; }
    .header-tools .credit-pill, .header-tools .credit-buy { width: auto !important; min-width: 0; }
    .header-tools .credit-art img, .header-tools .credit-buy.credit-art img { height: 2.2rem; }
    .hero { min-height: 0; padding-block: 1.6rem .8rem; }
    .audience-filter { grid-template-columns: 1fr; gap: .55rem; padding: .65rem; margin-top: .85rem; }
    .audience-filter__label { font-size: .73rem; }
    .audience-filter__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
    .audience-filter__choices button { min-height: 2.8rem; padding: .4rem .35rem; font-size: .78rem; }
    .audience-filter__choices button:last-child { grid-column: 1 / -1; }
    .audience-filter__status { font-size: .75rem; }
    .tool-section { padding-top: 1.25rem; }
    .section-head__copy h2 { font-size: 1.8rem; }
    .section-intro { font-size: .92rem; }
    .output-chips li { font-size: .72rem; padding: .25rem .5rem; }
    .lifecycle { padding: .55rem; }
    .lifecycle__head p:not(.lifecycle__label) { display: none; }
    .recap-card, .gen-card { min-height: 10.5rem; padding: .55rem; gap: .3rem .6rem; grid-template-columns: minmax(6.6rem, 35%) minmax(0, 1fr); }
    .recap-card h3, .gen-card h4 { font-size: 1.03rem; }
    .recap-card > p, .gen-card__body > p { font-size: .79rem; line-height: 1.3; }
    .recap-card .card-cta, .gen-card .card-cta { font-size: .82rem; min-height: 0; }
    .tool-art { min-height: 9.5rem; }
    .gen-card__body { gap: .35rem; }
    .step-tag { font-size: .63rem; }
    .step-tag b { width: 1.05rem; height: 1.05rem; font-size: .65rem; }
    .tool-group { padding: .55rem; }
    .group-head { margin-bottom: .7rem; }
    .workbook-facts { display: none; }
    .teacher-mascot { width: 3.3rem; height: 3.3rem; }
}

.recap-card[data-mascot="all"] .tool-art, .gen-card[data-mascot="all"] .tool-art {

    position: relative;

}

.recap-card[data-mascot="all"] .tool-art img, .gen-card[data-mascot="all"] .tool-art img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 56%;

}

@media (min-width: 44.01rem) {

  .recap-card[data-mascot="all"], .gen-card[data-mascot="all"] {

    grid-template-columns: minmax(0, 54%) minmax(0, 1fr);

  }

  .recap-card[data-mascot="all"] > .tool-art, .gen-card[data-mascot="all"] > .tool-art {

    height: auto;

    min-height: 0;

    aspect-ratio: 3 / 2;

    align-self: center;

  }

}

/* Illustrated role choices: scoped to the hub, preserving its highlight behavior. */
.tools-home .audience-filter { display: block; padding: 1.2rem; }
.tools-home .audience-filter__label { color: #ffe3a0; white-space: normal; margin-bottom: 1.25rem; text-align: center; font-size: clamp(1.1rem, 2.4vw, 1.65rem); line-height: 1.4; letter-spacing: .06em; }
.tools-home .audience-filter__choices { gap: .8rem; }
.tools-home .audience-filter__choices button { display: flex; flex-direction: column; align-items: stretch; overflow: hidden; padding: 0; border: 2px solid #8b7137; border-radius: 1rem; background: #102b24; color: #fff2d4; box-shadow: 0 5px 0 #051411; }
.tools-home .audience-filter__choices img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.role-card__name { display: flex; align-items: center; justify-content: center; flex: 1; padding: .8rem .35rem .4rem; min-height: 3.5rem; font-size: .95rem; line-height: 1.3; }
.role-card__hint { display: block; margin: .3rem .5rem .7rem; padding: .4rem .15rem; border-radius: 2rem; color: #81f4d1; background: #051e18; font-size: .72rem; }
.role-card__selected { display: none; }
.tools-home button[aria-pressed="true"] .role-card__selected { display: inline; }
.tools-home button[aria-pressed="true"] .role-card__tap { display: none; }
.tools-home .audience-filter__choices button[aria-pressed="true"] { background: #194d3e; color: #fff4d7; border-color: #7ff6cf; box-shadow: 0 0 18px #60e3b950; }
.tools-home .audience-filter__choices button:hover { transform: translateY(-3px); box-shadow: 0 0 20px #ffc95655; border-color: #ffe29a; }
.tools-home .audience-filter__choices button:focus-visible { outline: 3px solid #fff0a0; outline-offset: 4px; }
.tools-home .audience-filter__status { margin-top: 1rem; }
@media (max-width: 44rem) {
 .tools-home .audience-filter { padding: .8rem; }
 .tools-home .audience-filter__choices { gap: .7rem; }
 .tools-home .audience-filter__choices button:last-child { display: grid; grid-template-columns: 38% 1fr; align-items: center; }
 .tools-home .audience-filter__choices button:last-child img { grid-row: 1 / 3; height: 100%; }
 .tools-home .audience-filter__choices button:last-child .role-card__name { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .tools-home .audience-filter__choices button { transition: none; transform: none; } }