@font-face { font-family: 'Fraunces'; src: url('assets/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'GeneralSans'; src: url('assets/fonts/generalsans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GeneralSans'; src: url('assets/fonts/generalsans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'GeneralSans'; src: url('assets/fonts/generalsans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'SpaceMono'; src: url('assets/fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SpaceMono'; src: url('assets/fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* V5: plain copy from the client's own material; premium build-out (progress bar, active nav, program panel,
   goals timeline, device form, questions, gift selector, footer nav, mobile donate dock).
   V2: the tablet story on the workbook. Ruled paper, a margin line, pencil ticks, highlighter.
   Buttons are clover green or saffron, never black. The tablet is light and its screens are readable. */
:root {
  --paper: #F7F8F4; --card: #FFFFFF; --rule: rgba(84,139,196,.2); --margin: #E0685A; --red: #B4433A;
  --ink: #13241B; --muted: rgba(19,36,27,.7); --line: rgba(19,36,27,.14);
  --green: #2F7D4F; --green-deep: #235F3B; --green-soft: #DCEFE2; --saffron: #F2B233; --saffron-hi: #FFC54D; --hi: rgba(245,222,84,.7);
  --f-serif: 'Fraunces', Georgia, serif; --f-sans: 'GeneralSans', system-ui, sans-serif; --f-mono: 'SpaceMono', ui-monospace, monospace;
  --gut: clamp(20px, 5vw, 84px); --max: 1320px; --lh: 34px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--f-sans); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--f-serif); font-weight: 600; letter-spacing: -.02em; font-variation-settings: 'SOFT' 100, 'opsz' 110; }
p { margin: 0 0 1em; }
.label { font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin: 0 0 14px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--green); color: #fff; padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* the exercise book */
.page { position: relative;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px), var(--rule) var(--lh)); }
.page::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--gut) - 26px); width: 2px; background: var(--margin); opacity: .5; pointer-events: none; }

/* header */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 14px var(--gut);
  background: rgba(247,248,244,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.is-scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin: 0;
  font: 600 22px/1 var(--f-serif); font-variation-settings: 'SOFT' 100, 'opsz' 30; letter-spacing: -.01em; }
.mark { width: 32px; height: 32px; flex: none; }
.lf { fill: var(--ink); } .lf--c { fill: var(--saffron); }
.nav { display: flex; gap: 24px; margin-left: auto; font-weight: 500; font-size: 15px; }
.nav a { text-decoration: none; color: var(--muted); transition: color .2s; }
.nav a:hover { color: var(--green); }

/* buttons: green for action, saffron for the gift, never black */
.btn { display: inline-block; font: 600 15px/1 var(--f-sans); background: var(--green); color: #fff; border: 0; cursor: pointer; padding: 16px 22px;
  text-decoration: none; border-radius: 999px; transition: transform .15s, background .2s, box-shadow .2s; }
.btn:hover { background: var(--green-deep); transform: translateY(-2px) rotate(-1deg); }
.btn:active { transform: translateY(1px); }
.btn--small { padding: 11px 18px; font-size: 14px; }
.btn--big { font-size: 18px; padding: 20px 32px; background: var(--saffron); color: var(--ink); box-shadow: 0 3px 0 #C98C12; }
.btn--big:hover { background: var(--saffron-hi); }
.btn--line { background: var(--card); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.btn--line:hover { background: var(--green); color: #fff; }
.link { font-weight: 500; text-decoration: none; color: var(--green); border-bottom: 2px solid var(--green-soft); padding-bottom: 2px; transition: border-color .2s; }
.link:hover { border-color: var(--green); }
.give-note { margin-top: 16px; font-size: 15px; color: var(--muted); }

/* hero */
.hero { max-width: var(--max); margin-inline: auto; padding: clamp(50px, 8vw, 120px) var(--gut) clamp(40px, 6vw, 90px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(28px, 5vw, 80px); align-items: end; }
.hero h1 { font-size: clamp(44px, 6.8vw, 104px); line-height: .96; max-width: 14ch; font-variation-settings: 'SOFT' 100, 'opsz' 144, 'WONK' 1; }
.hero h1 em { font-style: italic; color: var(--green); }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--muted); max-width: 50ch; margin-top: 28px; }
.hero-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 34px; }

/* story: the pinned tablet */
.story { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 80px);
  max-width: var(--max); margin-inline: auto; padding: clamp(40px, 5vw, 70px) var(--gut) 0; }
.story-head { grid-column: 1 / -1; grid-row: 1; }
.story-head h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; max-width: 16ch; }
.device-rail { grid-column: 2; grid-row: 2; }
/* An iPad in portrait: 1640 x 2360, thin even black-glass bezel, aluminium rim, camera in the top bezel,
   top button and volume buttons on the frame. Every dimension derives from --dw so it scales as one object. */
.device { --dw: min(34vw, 440px, calc(62vh / 1.44)); position: sticky; top: calc(50vh - var(--dw) * 1.44 / 2 + 30px);
  width: var(--dw); aspect-ratio: 1640 / 2360; margin-inline: auto;
  background: #111214; border-radius: calc(var(--dw) * .075); padding: calc(var(--dw) * .042);
  box-shadow:
    0 0 0 calc(var(--dw) * .006) #3A3C40,
    0 0 0 calc(var(--dw) * .014) #D5D8DC,
    0 0 0 calc(var(--dw) * .016) #A9ADB3,
    0 50px 80px -40px rgba(19,36,27,.55), 0 18px 30px -18px rgba(19,36,27,.35); }
.cam { position: absolute; top: calc(var(--dw) * .019); left: 50%; width: calc(var(--dw) * .014); height: calc(var(--dw) * .014);
  margin-left: calc(var(--dw) * -.007); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3B4A5E, #0A0B0D 60%); }
.hw { position: absolute; background: linear-gradient(#DADDE1, #A7ABB1); border-radius: calc(var(--dw) * .006); }
.hw--top { top: calc(var(--dw) * -.022); right: 16%; width: 11%; height: calc(var(--dw) * .01); }
.hw--vol1, .hw--vol2 { right: calc(var(--dw) * -.022); width: calc(var(--dw) * .01); height: 6.5%; }
.hw--vol1 { top: 10%; } .hw--vol2 { top: 18%; }
.screen { position: relative; height: 100%; border-radius: calc(var(--dw) * .036); overflow: hidden;
  container-type: size; }
.status { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 2.2cqw 4.2cqw 0; font: 600 max(9px, 3.3cqw)/1 var(--f-sans); color: var(--ink); pointer-events: none; }
.status-r svg { width: 1.35em; height: 1em; fill: var(--ink); display: block; }
.home-ind { position: absolute; z-index: 2; bottom: 1.6cqw; left: 50%; width: 30%; height: max(3px, 1cqw); margin-left: -15%; border-radius: 1cqw; background: rgba(19,36,27,.78); }
.strip { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.65,0,.2,1); }
/* every size on the screen is in em off one container-relative base, so it stays readable at any device size */
/* V6: the screens are an iPad APP, not paper. Grouped grey app background, white rounded cards, the system-style
   sans for everything (no page serif, no mono labels), a large title, list rows with status glyphs and a tab bar.
   Every size is in em off one container-relative base so it stays readable at any device size. */
.screen { background: #F2F3F1; font-family: var(--f-sans); }
.scr { position: absolute; left: 0; right: 0; height: 100%; padding: 2.6em 1.05em 4.6em; display: flex; flex-direction: column; gap: .7em;
  font-size: clamp(10px, 4.3cqw, 18px); line-height: 1.3; color: #111; background: #F2F3F1; }
.scr.s0 { top: 0; } .scr.s1 { top: 100%; } .scr.s2 { top: 200%; } .scr.s3 { top: 300%; } .scr.s4 { top: 400%; } .scr.s5 { top: 500%; }
.a-eyebrow { margin: .4em 0 -.55em; font-size: .78em; font-weight: 500; color: #6B6F6C; }
.a-title { margin: 0 0 .1em; font: 600 2em/1.08 var(--f-sans); letter-spacing: -.025em; color: #111; }
.a-card { background: #fff; border-radius: .9em; padding: .85em .95em; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.a-row { display: flex; align-items: center; gap: .6em; font-weight: 500; }
.a-row em, .a-li em { margin-left: auto; font-style: normal; color: #6B6F6C; font-weight: 500; }
.a-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--green); flex: none; }
.a-dot--gold { background: var(--saffron); }
.a-meter { display: grid; grid-template-columns: 1fr auto; gap: .35em; padding: .45em 0; font-weight: 500; }
.a-meter + .a-meter { border-top: 1px solid #ECEDEA; }
.a-meter b { font-weight: 600; color: #6B6F6C; }
.a-meter i { grid-column: 1 / -1; height: .42em; border-radius: 1em; background: linear-gradient(90deg, var(--green) calc(var(--w) * 100%), #E6E8E4 0); }
.a-list { padding-block: .2em; }
.a-li { display: flex; align-items: center; gap: .65em; padding: .62em 0; font-weight: 500; }
.a-li + .a-li { border-top: 1px solid #ECEDEA; }
.a-ok { width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--green); flex: none; position: relative; }
.a-ok::after { content: ''; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M6.5%2012.5l3.5%203.5%207.5-8%22/%3E%3C/svg%3E") center / 78% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M6.5%2012.5l3.5%203.5%207.5-8%22/%3E%3C/svg%3E") center / 78% no-repeat; }
.a-pill { background: var(--green-soft); color: var(--green-deep) !important; padding: .2em .6em; border-radius: 1em; font-size: .88em; font-weight: 600 !important; }
.a-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.a-tile { background: #fff; border-radius: .9em; padding: .8em; display: grid; gap: .5em; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.a-tile b { font-weight: 600; }
.a-tile i { height: .38em; border-radius: 1em; background: linear-gradient(90deg, var(--green) calc(var(--w) * 100%), #E6E8E4 0); }
.a-ic { width: 2em; height: 2em; border-radius: .55em; display: grid; place-items: center; font-weight: 600; font-size: .8em; color: #fff; }
.a-ic--g { background: var(--green); } .a-ic--b { background: #3C7DD9; } .a-ic--o { background: #E3A21A; } .a-ic--r { background: #D0584B; }
.a-next { display: grid; gap: .3em; margin-top: auto; }
.a-next .a-eyebrow { margin: 0; }
.a-next b { font-size: 1.25em; font-weight: 600; }
.a-sub { color: #6B6F6C; font-weight: 500; }
.a-btn { justify-self: start; margin-top: .5em; background: var(--green); color: #fff; font-weight: 600; padding: .55em 1.4em; border-radius: 1.2em; }
.a-streak { display: flex; align-items: baseline; gap: .4em; }
.a-streak b { font: 700 3.4em/1 var(--f-sans); letter-spacing: -.04em; color: var(--saffron); }
.a-streak span { font-weight: 500; color: #6B6F6C; }
.a-rank { width: 1.5em; height: 1.5em; border-radius: 50%; background: #F2F3F1; display: grid; place-items: center; font-size: .85em; font-weight: 600; }
.a-me { background: #FFF6D8; margin: 0 -.95em; padding-inline: .95em; }
.a-me .a-rank { background: var(--saffron); color: #111; }
.a-result { display: grid; justify-items: center; text-align: center; gap: .35em; padding-block: 1.4em; }
.a-result b { font-size: 1.9em; font-weight: 600; letter-spacing: -.02em; color: var(--green-deep); }
.a-big-ok { width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--green); position: relative; transform: scale(.7); transition: transform .6s cubic-bezier(.2,1.5,.4,1) .3s; }
.a-big-ok::after { content: ''; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M6.5%2012.5l3.5%203.5%207.5-8%22/%3E%3C/svg%3E") center / 62% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M6.5%2012.5l3.5%203.5%207.5-8%22/%3E%3C/svg%3E") center / 62% no-repeat; }
.is-s5 .a-big-ok { transform: none; }
.bar { height: .42em; background: #E6E8E4; border-radius: 1em; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(.1); transition: transform 1.4s cubic-bezier(.3,.6,.2,1) .3s; }
.is-s1 .bar i, .is-past-s1 .bar i { transform: none; }

/* tab bar */
.tabbar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: .55em .6em 1.5em; background: rgba(250,250,249,.94); border-top: 1px solid #E3E5E1; font: 500 clamp(8px, 2.7cqw, 12px)/1 var(--f-sans); color: #8B8F8C; }
.t { display: grid; justify-items: center; gap: .35em; transition: color .3s; }
.ti { width: 2em; height: 2em; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ti-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2011%2012%203l9%208v10h-6v-6H9v6H3z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2011%2012%203l9%208v10h-6v-6H9v6H3z%22/%3E%3C/svg%3E"); } .ti-book { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%204h7a3%203%200%200%201%202%201%203%203%200%200%201%202-1h7v16h-7a2%202%200%200%200-2%201%202%202%200%200%200-2-1H3z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%204h7a3%203%200%200%201%202%201%203%203%200%200%201%202-1h7v16h-7a2%202%200%200%200-2%201%202%202%200%200%200-2-1H3z%22/%3E%3C/svg%3E"); }
.ti-chart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2021V11h4v10zm7%200V5h4v16zm7%200v-7h4v7z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2021V11h4v10zm7%200V5h4v16zm7%200v-7h4v7z%22/%3E%3C/svg%3E"); } .ti-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224.5%22/%3E%3Cpath%20d%3D%22M3%2021a9%207%200%200%201%2018%200z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224.5%22/%3E%3Cpath%20d%3D%22M3%2021a9%207%200%200%201%2018%200z%22/%3E%3C/svg%3E"); }
.is-s0 .t0, .is-s1 .t0, .is-s2 .t1, .is-s3 .t1, .is-s4 .t2, .is-s5 .t2 { color: var(--green); }
.home-ind { z-index: 3; }
.dots { display: none; }

.panels { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 0; }
.panel { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; max-width: 30em; }
.num { display: flex; align-items: center; gap: 12px; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.box { width: 30px; height: 26px; border: 2px solid var(--ink); border-radius: 4px; padding: 3px; background: var(--card); overflow: visible; flex: none; }
.box use { fill: none; stroke: var(--green); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36;
  transition: stroke-dashoffset .6s cubic-bezier(.4,.6,.2,1); }
.panel.done .box use { stroke-dashoffset: 0; }
.panel h3 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; margin-bottom: 18px; }
.panel p:not(.num) { color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); }

/* why: highlighted findings */
.why { max-width: var(--max); margin-inline: auto; padding: clamp(80px, 10vw, 150px) var(--gut) clamp(40px, 5vw, 80px); }
.why-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: 30px; }
.why-head h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; }
.why-head > p { color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); max-width: 44ch; margin: 0; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 80px); }
.stats li { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); column-gap: 20px; padding: 26px 0; border-top: 2px solid var(--ink); }
.stats b { grid-row: span 2; font: 600 clamp(36px, 3.6vw, 54px)/1 var(--f-serif); color: var(--green); letter-spacing: -.03em; font-variation-settings: 'SOFT' 100, 'opsz' 100; }
.stats p { margin: 0 0 8px; font-size: 17px; }
.stats cite { font: 400 11px/1.4 var(--f-mono); font-style: normal; color: var(--muted); }
mark { color: inherit; background: linear-gradient(transparent 52%, var(--hi) 52%, var(--hi) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  transition: background-size .9s cubic-bezier(.3,.7,.2,1); }
mark.on { background-size: 100% 100%; }

/* goals: report card */
.goals { max-width: var(--max); margin-inline: auto; padding: clamp(50px, 7vw, 100px) var(--gut); }
.goals h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; margin-bottom: 18px; }
.goals-intro { color: var(--muted); max-width: 56ch; font-size: clamp(17px, 1.3vw, 19px); }
.card { width: 100%; border-collapse: collapse; margin-top: 30px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 14px 30px -20px rgba(19,36,27,.35); }
.card thead th { font: 400 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-align: left; color: var(--red); padding: 16px 20px; border-bottom: 2px solid var(--ink); }
.card tbody th, .card td { padding: 22px 20px; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.card tbody th { font: 600 15px/1.4 var(--f-sans); white-space: nowrap; }
.card .big { font: 600 clamp(40px, 5vw, 68px)/1 var(--f-serif); font-variation-settings: 'SOFT' 100, 'opsz' 110; color: var(--green); white-space: nowrap; letter-spacing: -.03em; }
.card .big span { display: block; font: 500 14px/1.4 var(--f-sans); color: var(--muted); margin-top: 8px; letter-spacing: 0; }
.card .mid { font: 600 20px/1.3 var(--f-serif); }
.card td:last-child { color: var(--muted); max-width: 36ch; }

/* device donations */
.tablets { max-width: var(--max); margin-inline: auto; padding: clamp(50px, 7vw, 100px) var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.tablets h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1; margin-bottom: 18px; }
.tablets-copy > p:not(.label):not(.give-note) { color: var(--muted); max-width: 46ch; font-size: clamp(17px, 1.3vw, 19px); margin-bottom: 26px; }
.tablets-list { list-style: none; margin: 0; padding: 22px 24px; background: var(--card); box-shadow: 0 0 0 1px var(--line); transform: rotate(-1deg); }
.tablets-list li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); font-weight: 500; }
.tablets-list li:last-child { border-bottom: 0; }
.tablets-list svg { width: 20px; height: 18px; fill: none; stroke: var(--green); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex: none; }

/* header: reading progress and the section you are in */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.nav a { position: relative; }
.nav a.is-on { color: var(--ink); }
.nav a.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--saffron); border-radius: 2px; }

/* hero: highlighter on the key phrase, program panel */
.hero h1 mark { color: inherit; background: linear-gradient(transparent 58%, var(--hi) 58%, var(--hi) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  animation: hl 1.1s cubic-bezier(.3,.7,.2,1) .5s forwards; }
@keyframes hl { to { background-size: 100% 100%; } }
.glance { background: var(--card); border-radius: 20px; padding: 22px 24px 10px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -30px rgba(19,36,27,.4); }
.glance-h { font: 400 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.glance dl { margin: 0; }
.glance div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.glance dt { font: 400 11px/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.glance dd { margin: 0; font-weight: 500; line-height: 1.35; }
.glance div:last-child dd { color: var(--green); font-weight: 600; }


/* goals timeline */
.timeline { position: relative; margin: 40px 0 10px; padding: 0 0 70px; }
.tl-track { height: 6px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.tl-fill { display: block; height: 100%; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--tl, 0)); transition: transform .2s linear; }
.tl-mark { position: absolute; top: -7px; left: calc(var(--at) * 100%); transform: translateX(calc(var(--at) * -100%)); display: grid; gap: 4px;
  text-align: center; justify-items: center; }
.tl-mark::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px var(--green); }
.tl-mark b { font: 600 20px/1 var(--f-serif); margin-top: 10px; }
.tl-mark span { font-size: 14px; color: var(--muted); white-space: nowrap; }
.tl-mark--goal b { font-size: 30px; color: var(--green); }
.tl-mark[style*="--at:0"] { text-align: left; justify-items: start; }
.tl-mark[style*="--at:1"] { text-align: right; justify-items: end; }

/* devices: form beside the ask */
.tablets { align-items: start; }

/* mobile donate dock */
.dock { display: none; }

/* questions */
.faq { max-width: var(--max); margin-inline: auto; padding: clamp(50px, 7vw, 100px) var(--gut); }
.faq h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; margin-bottom: 26px; }
.faq-list { border-top: 2px solid var(--ink); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); background: transparent; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font: 600 clamp(19px, 1.7vw, 24px)/1.25 var(--f-serif); font-variation-settings: 'SOFT' 100, 'opsz' 40; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translateY(-4px); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { color: var(--green); }
.faq details p { color: var(--muted); max-width: 64ch; margin: -6px 0 24px; font-size: 17px; }

/* give: copy on the green band, gift selector on a white card */
.give { margin: clamp(30px, 5vw, 70px) var(--gut) 0; padding: clamp(48px, 7vw, 100px) clamp(24px, 5vw, 80px); background: var(--green); color: #fff;
  border-radius: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(28px, 5vw, 80px); align-items: center; }
.give .label { color: #FFE6A6; }
.give h2 { font-size: clamp(42px, 5.6vw, 84px); line-height: 1; margin-bottom: 20px; }
.give-copy > p:not(.label) { color: rgba(255,255,255,.88); max-width: 40ch; font-size: clamp(17px, 1.4vw, 20px); }
.give-copy .give-status { font-size: 15px; border-top: 1px solid rgba(255,255,255,.3); padding-top: 16px; margin-top: 24px; color: rgba(255,255,255,.8); }
.gift { background: var(--card); color: var(--ink); border-radius: 20px; padding: clamp(20px, 2.6vw, 30px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.gift fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* spacing restated at fieldset specificity: .gift fieldset (0,1,1) beat .seg / .amounts (0,1,0) and zeroed them */
.gift fieldset.seg { padding: 4px; margin-bottom: 14px; }
.gift fieldset.amounts { margin-bottom: 18px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.seg label, .amounts label { position: relative; cursor: pointer; }
.seg input, .amounts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 11px 0; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted); transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--green); color: #fff; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.amounts span { display: block; text-align: center; padding: 16px 0; border-radius: 12px; font: 600 20px/1 var(--f-serif); box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .2s, background .2s, color .2s; }
.amounts label:hover span { box-shadow: inset 0 0 0 1.5px var(--green); }
.amounts input:checked + span { background: var(--green-soft); box-shadow: inset 0 0 0 2px var(--green); color: var(--green-deep); }
.seg input:focus-visible + span, .amounts input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.money { display: flex; align-items: center; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--line); padding-left: 14px; }
.money i { font-style: normal; font-weight: 600; color: var(--muted); }
.f .money input { border: 0; box-shadow: none; background: transparent; }
.f .money:focus-within { box-shadow: inset 0 0 0 2px var(--green); }
.gift .btn--big { width: 100%; margin-top: 16px; }
.gift .form-note { margin: 14px 0 0; }

/* shared form fields */
.f { display: grid; gap: 6px; margin-bottom: 14px; }
.f > span:first-child { font: 400 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.f input, .f select { font: 500 16px/1.2 var(--f-sans); color: var(--ink); background: var(--card); border: 0; border-radius: 12px; padding: 14px;
  box-shadow: inset 0 0 0 1.5px var(--line); width: 100%; transition: box-shadow .2s; -webkit-appearance: none; appearance: none; }
.f select { background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.f input:focus, .f select:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--green); }
.f input.bad { box-shadow: inset 0 0 0 2px var(--red); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form { background: var(--card); border-radius: 20px; padding: clamp(20px, 2.6vw, 30px); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -32px rgba(19,36,27,.4); }
.form .btn { margin-top: 6px; }
.form-note { font-size: 15px; color: var(--green-deep); background: var(--green-soft); border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* footer */
.foot { max-width: var(--max); margin-inline: auto; padding: clamp(50px, 6vw, 80px) var(--gut) 70px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px 60px; align-items: start; }
.foot-mission { color: var(--muted); max-width: 52ch; margin: 16px 0 0; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding-top: 6px; }
.foot-nav a { text-decoration: none; font-weight: 500; color: var(--muted); }
.foot-nav a:hover { color: var(--green); }
.foot-meta { grid-column: 1 / -1; font: 400 12px/1.4 var(--f-mono); color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: .04em;
  border-top: 1px solid var(--line); padding-top: 20px; }

@media (max-width: 960px) {
  .nav { display: none; }
  .top { justify-content: space-between; }
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .entry { max-width: 340px; }
}
@media (max-width: 820px) {
  .page::before { left: 8px; }
  .story { grid-template-columns: minmax(0, 1fr); }
  /* the tablet rides in a band under the header; the copy scrolls beneath it */
  .device-rail { grid-column: 1; grid-row: 2; position: sticky; top: 60px; z-index: 5; height: 50vh; display: flex; justify-content: center;
    align-items: center; gap: 14px; margin: 0 calc(var(--gut) * -1);
    background: linear-gradient(var(--paper) 88%, rgba(247,248,244,0)); }
  .device { --dw: calc(40vh / 1.44); position: relative; top: 0; width: var(--dw); margin: 0; }
  .dots { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
  .dots li { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
  .dots li.on { background: var(--green); transform: scale(1.3); }
  .panels { grid-column: 1; grid-row: 3; }
  .panel { min-height: 60vh; justify-content: flex-start; padding-top: 3vh; }
  .why-head, .tablets, .foot { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stats li { grid-template-columns: minmax(0, 1fr); }
  .stats b { grid-row: auto; margin-bottom: 8px; }
  .card, .card tbody, .card tr, .card th, .card td { display: block; }
  .card thead { display: none; }
  .card tbody tr { border-bottom: 2px solid var(--rule); padding: 10px 0; }
  .card tbody th, .card td { border: 0; padding: 6px 16px; }
  .give { margin-inline: 10px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .strip, .bar i, .btn, .dots li, mark, .box use { transition: none; }
  .bar i { transform: none; }
  .a-big-ok { transform: none; transition: none; }
  mark { background-size: 100% 100%; }
  .box use { stroke-dashoffset: 0; }
}

@media (max-width: 820px) {
  .glance div { grid-template-columns: 88px minmax(0, 1fr); }
  .timeline { padding-bottom: 90px; }
  .tl-mark span { white-space: normal; max-width: 9em; font-size: 13px; }
  .tl-mark--goal b { font-size: 24px; }
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .give { grid-template-columns: minmax(0, 1fr); }
  .amounts span { font-size: 18px; padding: 14px 0; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .dock { display: block; position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 14px; text-align: center; padding: 16px;
    box-shadow: 0 14px 30px -10px rgba(19,36,27,.5); transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .dock.is-on { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 mark { animation: none; background-size: 100% 100%; }
  .tl-fill { transition: none; }
  .dock { transition: none; }
}

/* V7 QA: number fields without spinners; even spacing down the gift card */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gift .f--other { margin-bottom: 0; }
.gift .btn--big { margin-top: 18px; box-shadow: 0 2px 0 #C98C12; }
.gift .btn--big:active { box-shadow: none; transform: translateY(2px); }
.amounts span { position: relative; }
.amounts input:checked + span::after { content: ''; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card);
  background: var(--green) no-repeat center / 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.amounts label:active span { transform: scale(.97); }

/* V7 QA: one vertical rhythm for every section (was 115/86, 70/0, 144/72 and 100/100) */
:root { --sec: clamp(72px, 9vw, 128px); }
.hero { padding-top: clamp(56px, 8vw, 120px); padding-bottom: var(--sec); }
.story { padding-top: 0; }
.why, .work, .goals, .tablets, .faq { padding-top: var(--sec); padding-bottom: var(--sec); }
.why { padding-bottom: calc(var(--sec) * .5); }
.give { margin-top: calc(var(--sec) * .5); }
.story-head h2, .goals h2, .tablets h2, .faq h2, .work h2 { margin-bottom: 20px; }
.why-head { margin-bottom: 36px; }
.goals-intro, .work-intro { margin-bottom: 0; }
.timeline { margin-top: 44px; }
.faq-list { margin-top: 36px; }
.tablets-copy > p:not(.label):not(.give-note) { margin-bottom: 0; }

/* where English is the job */
.work { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.work h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; }
.work-intro { color: var(--muted); max-width: 56ch; font-size: clamp(17px, 1.3vw, 19px); }
.jobs { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.job { background: var(--card); border-radius: 20px; padding: 26px 26px 28px; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -30px rgba(19,36,27,.35);
  display: grid; gap: 10px; align-content: start; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.job:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 28px 50px -30px rgba(19,36,27,.45); }
.job svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--green-soft); stroke: var(--green-deep); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.job h3 { font-size: 26px; line-height: 1.1; }
.job p { color: var(--muted); margin: 0; }

/* share */
.share { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f-sans); color: #fff; background: transparent; border: 0; cursor: pointer;
  padding: 10px 0; margin-top: 22px; border-bottom: 1.5px solid rgba(255,255,255,.4); }
.share:hover { border-color: #fff; }
.share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; margin: 0; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 999px; font-weight: 500; font-size: 15px; transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1); }

/* questions: answers ease open where the browser supports animating to auto */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .35s cubic-bezier(.2,.8,.2,1), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* header Donate marks the gift section as current */
.top .btn.is-on { box-shadow: 0 0 0 3px var(--green-soft); }

/* footer sign-off */
.foot-sign { grid-column: 1 / -1; margin: 10px 0 0; font: 600 clamp(56px, 11vw, 168px)/.9 var(--f-serif); font-variation-settings: 'SOFT' 100, 'opsz' 144;
  letter-spacing: -.04em; color: var(--ink); opacity: .9; }
.foot-sign span { color: var(--green); }

@media (max-width: 820px) {
  .jobs { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .job, .toast { transition: none; }
}

/* no stranded last words in headings */
h1, h2, h3, .faq summary { text-wrap: balance; }
.lede, .panel p, .work-intro, .goals-intro { text-wrap: pretty; }

/* V8: buttons with depth. One construction for every solid button: a top-lit gradient face, a hairline highlight
   along the top edge, a darker "edge" below that reads as thickness, and a soft coloured shadow on the paper.
   Hover lifts it (the edge and shadow grow), press sinks it (the edge goes to zero). No rotation. */
.btn {
  --face-top: #3A9360; --face-bot: #2A7248; --edge: #1C5132; --glow: rgba(35,95,59,.45); --edge-h: 4px;
  position: relative; background: linear-gradient(180deg, var(--face-top), var(--face-bot));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.08),
    0 var(--edge-h) 0 var(--edge), 0 calc(var(--edge-h) + 6px) 16px -6px var(--glow);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1), filter .2s;
}
.btn:hover { background: linear-gradient(180deg, var(--face-top), var(--face-bot)); filter: brightness(1.06) saturate(1.05);
  transform: translateY(-2px); --edge-h: 6px; }
.btn:active { transform: translateY(calc(var(--edge-h) - 1px)); --edge-h: 1px; filter: brightness(.98); transition-duration: .06s; }
.btn:focus-visible { outline: 3px solid var(--saffron); outline-offset: 4px; }
.btn--small { --edge-h: 3px; }
.btn--small:hover { --edge-h: 4px; }
.btn--small:active { --edge-h: 1px; }

/* the gift button: same construction in saffron */
.btn--big, .gift .btn--big { --face-top: #FFC94F; --face-bot: #EFAA22; --edge: #B97F0E; --glow: rgba(185,127,14,.5); color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn--big:hover, .gift .btn--big:hover { background: linear-gradient(180deg, var(--face-top), var(--face-bot)); }
.gift .btn--big { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.06),
    0 var(--edge-h) 0 var(--edge), 0 calc(var(--edge-h) + 6px) 16px -6px var(--glow); }
.gift .btn--big:active { transform: translateY(calc(var(--edge-h) - 1px)); --edge-h: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 var(--edge), 0 3px 8px -4px var(--glow); }

/* outline button: raised white key with a green rim */
.btn--line { --face-top: #FFFFFF; --face-bot: #F3F6F2; --edge: #BFD8C7; --glow: rgba(35,95,59,.2); color: var(--green-deep); text-shadow: none;
  box-shadow: inset 0 0 0 2px var(--green), 0 var(--edge-h) 0 var(--edge), 0 calc(var(--edge-h) + 6px) 16px -8px var(--glow); }
.btn--line:hover { color: var(--green-deep); background: linear-gradient(180deg, var(--face-top), var(--face-bot)); }

/* on the green gift band the green header/dock buttons would vanish into it; nothing green sits there, but guard it */
.give .btn:not(.btn--big) { --glow: rgba(0,0,0,.35); }

/* mobile dock: keep its slide-in transform; depth comes from the shared construction */
@media (max-width: 820px) {
  .dock { --edge-h: 4px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .18s; }
  .dock:hover { transform: none; }
  .dock:not(.is-on), .dock:not(.is-on):hover { transform: translateY(140%); }
}

/* the Start button inside the iPad app gets the same depth, at app scale */
.a-btn { background: linear-gradient(180deg, #3A9360, #2A7248); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 .18em 0 #1C5132, 0 .5em .9em -.4em rgba(35,95,59,.5); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}
/* current-section ring layered onto the depth stack instead of replacing it */
.top .btn.is-on { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.08),
  0 var(--edge-h) 0 var(--edge), 0 0 0 4px var(--green-soft), 0 calc(var(--edge-h) + 6px) 16px -6px var(--glow); }

/* ================= V9 ================= */

/* hero: copy left, a live iPad right (floats gently; still under reduced motion) */
.hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.hero-device { display: flex; justify-content: center; padding: 24px 0; }
.device--hero { --dw: min(28vw, 380px, calc(64vh / 1.44)); position: relative; top: auto; margin: 0;
  animation: float 7s ease-in-out infinite; }
/* flat, not tilted: a 3D tilt smeared the screen text */
@keyframes float { 50% { transform: translateY(-10px); } }
.scr--home { position: absolute; inset: 0; transform: none; }
.a-meterbar { display: block; height: .42em; border-radius: 1em; background: #E6E8E4; overflow: hidden; margin-top: .3em; }
.a-meterbar i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--green); border-radius: 1em; }
.tabbar .t.is-home { color: var(--green); }

/* the program, as a strip under the hero */
.glance-strip { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.glance-strip .glance { padding: 8px 8px; border-radius: 20px; }
.glance-strip .glance-h { display: none; }
.glance-strip dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.glance-strip dl div { display: grid; grid-template-columns: none; gap: 6px; padding: 16px 18px; border-top: 0; border-left: 1px solid var(--line); }
.glance-strip dl div:first-child { border-left: 0; }

/* photography: honest captions, soft frames */
.photo { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: #E9ECE6; box-shadow: 0 30px 60px -40px rgba(19,36,27,.45); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { position: absolute; left: 12px; bottom: 12px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(19,36,27,.62); padding: 7px 9px; border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.photo-pair { max-width: var(--max); margin: calc(var(--sec) * .6) auto 0; padding: 0 var(--gut); display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.photo-pair .photo { aspect-ratio: auto; height: clamp(300px, 36vw, 520px); }
.story { padding-top: var(--sec); }
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); column-gap: clamp(28px, 4vw, 64px); }
.why .why-head { grid-column: 1; }
.why .why-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; margin: 0; align-self: center; }
.why .stats { grid-column: 1 / -1; margin-top: clamp(36px, 4vw, 56px); }
.photo--inset { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; max-height: 460px; width: 100%; }
.photo--card { margin-top: 30px; aspect-ratio: 3 / 2; }

/* Clover's note */
.note { max-width: var(--max); margin-inline: auto; padding: var(--sec) var(--gut) 0; display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.photo--note { aspect-ratio: 4 / 5; }
.note h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; margin-bottom: 26px; }
.draft { display: inline-block; margin-left: 10px; padding: 4px 8px; border-radius: 6px; border: 1px dashed var(--red); color: var(--red); letter-spacing: .04em; }
.letter { background: var(--card); border-radius: 20px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 0 0 1px var(--line), 0 24px 50px -34px rgba(19,36,27,.4); }
.letter p { font: 400 clamp(18px, 1.45vw, 21px)/1.6 var(--f-serif); font-variation-settings: 'SOFT' 100, 'opsz' 18; hanging-punctuation: first; margin: 0 0 1em; }
.letter p:last-child { margin: 0; }
.sign { margin: 22px 0 0; font: italic 500 clamp(34px, 3.4vw, 46px)/1 var(--f-serif); font-variation-settings: 'SOFT' 100, 'opsz' 60, 'WONK' 1; color: var(--green-deep); }
.sign span { display: block; margin-top: 10px; font: 400 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-style: normal; }

/* iPad-style screen changes: the incoming screen pushes in from the right, the outgoing one slides a third left
   under it, and the tab bar stays still. Replaces the vertical strip. */
.story .strip { transform: none !important; }
.story .scr { top: 0 !important; transform: translateX(100%); transition: transform .6s cubic-bezier(.3,.7,.1,1), filter .6s; z-index: 1; }
.story .scr.is-cur { transform: none; z-index: 2; box-shadow: -18px 0 30px -20px rgba(0,0,0,.25); }
.story .scr.is-prev { transform: translateX(-30%); filter: brightness(.94); }
.story .scr .a-title { transition: transform .6s cubic-bezier(.3,.7,.1,1) .08s; transform: translateX(14%); }
.story .scr.is-cur .a-title { transform: none; }

/* typography details */
.stats b, .card .big, .tl-mark b, .amounts span, .a-streak b, .a-meter b, .s-board, .hero-goals dd, [data-sum] {
  font-variant-numeric: lining-nums tabular-nums; }
h1, h2, h3 { font-optical-sizing: auto; font-kerning: normal; }
.label { font-feature-settings: 'zero' 0; }
.lede, .letter p, .panel p { hanging-punctuation: first; }

/* keep off-screen sections cheap to render */
.work, .goals, .faq { content-visibility: auto; contain-intrinsic-size: auto 900px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-device { order: 2; }
  .device--hero { --dw: min(62vw, 300px); }
  .glance-strip dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance-strip dl div { border-left: 0; border-top: 1px solid var(--line); }
  .glance-strip dl div:nth-child(-n+2) { border-top: 0; }
  .glance-strip dl div:last-child { grid-column: 1 / -1; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .photo--inset { grid-column: 1; grid-row: auto; position: relative; top: 0; max-width: 460px; margin-bottom: 30px; }
}
@media (max-width: 820px) {
  .photo-pair { grid-template-columns: minmax(0, 1fr); }
  .photo-pair .photo { height: auto; aspect-ratio: 3 / 2; }
  .note { grid-template-columns: minmax(0, 1fr); }
  .photo--note { aspect-ratio: 4 / 3; }
  .draft { display: table; margin: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .device--hero { animation: none; }
  .story .scr, .story .scr .a-title { transition: none; }
}

/* a11y: the gift band green is deepened so its white and gold text clear 4.5:1 (was 4.11 and 4.31) */
.give { background: #25683F; }
.give-copy > p:not(.label) { color: rgba(255,255,255,.92); }

/* ================= V10: phones, share, padding ================= */

/* one rhythm: every section carries top space only, so two sections never stack their padding (was 77 to 256px) */
.hero { padding-bottom: clamp(40px, 5vw, 64px); }
.photo-pair { margin-top: 16px; }
.story, .why, .work, .goals, .tablets, .faq, .note, .spread { padding-top: var(--sec); padding-bottom: 0; }
.give { margin-top: var(--sec); }
.story { padding-bottom: 0; }
.panel:last-child { min-height: 70vh; }
.why { align-items: start; }
.why .why-head { align-self: start; }
.photo--inset { max-height: 380px; }
.note { align-items: start; }
.foot { margin-top: var(--sec); }

/* donate tablets: copy and form share the top row, the photo runs full width beneath them */
.tablets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: clamp(28px, 3.5vw, 48px); }
.photo--band { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
.photo--band img { object-position: 50% 55%; }
.form-error { font-size: 15px; color: #8E2F27; background: #FBE9E6; border-radius: 10px; padding: 12px 14px; margin: 14px 0 0; }

/* share, featured */
.spread { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.spread h2 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1; margin-bottom: 18px; }
.spread-copy > p:not(.label) { color: var(--muted); font-size: clamp(17px, 1.3vw, 19px); max-width: 42ch; margin: 0; }
.share-card { background: var(--card); border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(19,36,27,.45); }
.share-url { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 14px; padding: 8px 8px 8px 18px; }
.share-url-text { flex: 1; min-width: 0; font: 500 16px/1.2 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.share-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.sh { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 0; cursor: pointer;
  font: 600 15px/1 var(--f-sans); color: var(--ink); background: var(--card); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--line), 0 2px 0 rgba(19,36,27,.08); transition: transform .15s, box-shadow .2s, color .2s; }
.sh:hover { color: var(--green-deep); box-shadow: inset 0 0 0 1.5px var(--green), 0 4px 0 rgba(19,36,27,.08); transform: translateY(-2px); }
.sh:active { transform: translateY(1px); box-shadow: inset 0 0 0 1.5px var(--green); }
.sh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sh--native { grid-column: 1 / -1; background: linear-gradient(180deg, #3A9360, #2A7248); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 0 #1C5132; }
.sh--native:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 0 #1C5132; }
.sh--native[hidden] { display: none; }
.give-copy .share { text-decoration: none; }

/* phone menu */
.menu-btn { display: none; }
.menu { position: fixed; z-index: 29; top: 0; left: 0; right: 0; padding: 84px var(--gut) 24px; background: rgba(247,248,244,.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px -20px rgba(19,36,27,.35);
  display: grid; gap: 2px; transform: translateY(-100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
.menu.is-open { transform: none; visibility: visible; }
.menu a:not(.btn) { font: 600 22px/1 var(--f-serif); font-variation-settings: 'SOFT' 100, 'opsz' 30; text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line); }
.menu .btn { margin-top: 18px; text-align: center; padding: 18px; font-size: 17px; }

@media (max-width: 960px) {
  .menu-btn { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-left: 8px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
  .menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .top .btn--small { margin-left: auto; }
  .spread { grid-template-columns: minmax(0, 1fr); }
  .tablets { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  :root { --sec: clamp(64px, 16vw, 88px); }
  .photo--band { aspect-ratio: 3 / 2; }
  .panel:last-child { min-height: 56vh; }
  .share-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-url { padding-left: 14px; }
  .share-url-text { font-size: 15px; }
  .hero-cta .btn, .hero-cta .link { min-height: 48px; display: inline-flex; align-items: center; }
  .foot-nav a { padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .menu, .menu-btn span { transition: none; } }
.hero { padding-bottom: 16px; }
.hero-device { padding-bottom: 8px; }
/* phones: every tap target at least 44px tall */
@media (max-width: 960px) {
  .btn--small { min-height: 44px; display: inline-flex; align-items: center; }
  .give-copy .share { min-height: 44px; }
  .foot-nav a { min-height: 44px; display: flex; align-items: center; padding: 0; }
}
/* the depth block gives every .btn position:relative and it comes later in the sheet, so it had pulled the
   mobile donate dock out of position:fixed and into the page flow (16px of sideways overflow). Restated here. */
@media (max-width: 820px) {
  .btn.dock { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 40; }
}
/* header on phones: the wordmark stays on one line beside Donate and the menu */
@media (max-width: 960px) {
  .top { gap: 10px; }
  .brand { white-space: nowrap; }
}
@media (max-width: 420px) {
  .brand { font-size: 19px; gap: 9px; }
  .brand .mark { width: 28px; height: 28px; }
  .top .btn--small { padding-inline: 14px; }
}
/* share buttons fill each row, so an odd one out stretches instead of sitting alone */
.share-row { display: flex; flex-wrap: wrap; }
.share-row .sh { flex: 1 1 calc(33.333% - 10px); }
.share-row .sh--native { flex-basis: 100%; }
@media (max-width: 820px) { .share-row .sh { flex-basis: calc(50% - 10px); } .share-row .sh--native { flex-basis: 100%; } }
.letter p, .spread-copy p, .tablets-copy p, .faq details p { text-wrap: pretty; }

/* V11: every Donate button is saffron, the same construction as "Continue with $...". Everything else stays green. */
.btn--give { --face-top: #FFC94F; --face-bot: #EFAA22; --edge: #B97F0E; --glow: rgba(185,127,14,.5); color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn--give:hover { background: linear-gradient(180deg, var(--face-top), var(--face-bot)); color: var(--ink); }
.top .btn--give.is-on { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.06),
  0 var(--edge-h) 0 var(--edge), 0 0 0 4px #FCEFC8, 0 calc(var(--edge-h) + 6px) 16px -6px var(--glow); }

/* ================= V12: framed photographs, photos sized to the text beside them ================= */

/* one frame for every photo: a white mat like a mounted print, a hairline edge and a soft shadow on the paper */
.photo { background: #fff; padding: clamp(8px, .9vw, 13px); border-radius: 6px; overflow: visible;
  box-shadow: 0 0 0 1px rgba(19,36,27,.09), 0 1px 2px rgba(19,36,27,.06), 0 26px 44px -30px rgba(19,36,27,.5); }
.photo img { border-radius: 2px; }
.photo-pair { gap: clamp(14px, 1.8vw, 24px); }

/* Why English: text and photo split the row evenly and share the same top and bottom edge */
.why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.why .why-head { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; }
.photo--inset { max-height: none; aspect-ratio: 16 / 10; align-self: start; }

/* A note from Clover: the photo runs the full height of the letter column */
.note { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
.photo--note { aspect-ratio: auto; min-height: 460px; height: 100%; display: flex; }
.photo--note img { flex: 1; min-height: 0; object-position: 50% 45%; }

/* Donate tablets band */
.photo--band { aspect-ratio: 21 / 8; }

@media (max-width: 960px) {
  .why { grid-template-columns: minmax(0, 1fr); }
  .why .why-head { justify-content: flex-start; }
  .photo--inset { grid-column: 1; grid-row: auto; max-width: none; aspect-ratio: 3 / 2; margin: 28px 0 0; }
}
@media (max-width: 820px) {
  .photo--note { min-height: 0; height: auto; aspect-ratio: 4 / 3; display: block; }
  .photo--note img { height: 100%; }
  .photo-pair .photo { aspect-ratio: 3 / 2; height: auto; }
}
/* V12's two-column .note rule comes after the V9 phone rule, so restate the single column here or the note stays
   two columns on phones and the photo blows the page out to 2,769px wide */
@media (max-width: 820px) {
  .note { grid-template-columns: minmax(0, 1fr); }
  .photo--note { width: 100%; }
}
@media (max-width: 820px) { .photo--band { aspect-ratio: 3 / 2; } }

/* ================= V14: modules placed between the ruled lines ================= */
/* Layout has to be final for the placement script to measure it, so lower sections render normally. */
.work, .goals, .faq { content-visibility: visible; }
/* rows the placement script nudges must not be vertically centred, or a push of X moves the module only X/2 */
.spread { align-items: start; }

/* ================= V15: QA ================= */
/* Note photo: keep the "Donated tablets" label and both hands in frame in the tall crop */
.photo--note img { object-position: 22% 50%; }
/* Gift band: the card lines up with the top of the copy instead of floating at its centre */
.give { align-items: start; }
.gift { margin-top: 6px; }
/* iOS Safari: vh jumps as the address bar moves; small-viewport units hold still where supported */
@supports (height: 1svh) {
  .panel { min-height: 86svh; }
  .panel:last-child { min-height: 70svh; }
  @media (max-width: 820px) {
    .panel { min-height: 60svh; }
    .panel:last-child { min-height: 56svh; }
    .device-rail { height: 50svh; }
    .story .device { --dw: calc(40svh / 1.44); }
  }
}
/* smallest phones (320-360px): the header was 336px of content in 280px */
@media (max-width: 960px) { .brand { min-height: 44px; } }
@media (max-width: 360px) {
  :root { --gut: 16px; }
  .top { gap: 6px; }
  .brand { font-size: 16px; gap: 7px; }
  .brand .mark { width: 24px; height: 24px; }
  .top .btn--small { padding-inline: 12px; font-size: 13px; }
  .menu-btn { width: 40px; height: 44px; margin-left: 2px; }
}

/* ---- V15: independent review fixes ---- */
/* gift band: same measure as every other section (it ran 1752px wide at 1920) */
.give { width: calc(100% - 2 * var(--gut)); max-width: calc(var(--max) - 2 * var(--gut)); margin-inline: auto; }
/* 821-960px: the copy column was 235px beside a 440px card; stack from 960 */
@media (max-width: 960px) { .give { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .give { width: calc(100% - 20px); } }

/* menu: [hidden] must win over display:grid; slide out before hiding; button never shrinks */
.menu[hidden] { display: none; }
.menu { transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s; }
.menu.is-open { transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.menu-btn { flex: none; }

/* phones: the tablet band pins exactly under the header (was 60px under a 73px header) */
@media (max-width: 820px) { .device-rail { top: var(--hdr, 72px); } }

/* green buttons: white text clears 4.5:1 across the whole face and on hover (was 3.8 at the top, 4.3 on hover) */
.btn:not(.btn--give):not(.btn--big):not(.btn--line) { --face-top: #2E7F51; --face-bot: #236640; --edge: #17482D; }
.btn:not(.btn--give):not(.btn--big):not(.btn--line):hover { filter: none; --face-top: #2A774B; --face-bot: #205F3B; }
.sh--native { background: linear-gradient(180deg, #2E7F51, #236640); }

/* older Safari (no container units): readable fixed sizes inside the iPad mockups */
@supports not (width: 1cqw) {
  .scr { font-size: 13px; }
  .status { font-size: 11px; padding: 8px 14px 0; }
  .tabbar { font-size: 10px; }
  .home-ind { height: 4px; bottom: 6px; border-radius: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
  .menu, .menu.is-open { transition: none; }
}
@media (max-width: 960px) { .hero-cta .link { min-height: 44px; display: inline-flex; align-items: center; } }

/* V16: sources are links */
.stats cite a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.stats cite a:hover { color: var(--green); text-decoration-color: var(--green); }
@media (max-width: 960px) { .stats cite a { display: inline-block; padding: 12px 0; margin: -12px 0; } }