/* Ledger Plan — Growth Ledger (almanac paper, Fraunces, plates) blended with
   Site Plan (blueprint grid, dimension ticks, sheet codes, title block).
   Loaded AFTER growth-field.css and overrides surfaces only. The drawing rail,
   its SVG and every growth behaviour are inherited untouched. */

:root[data-skin], :root:has([data-skin="ledger-plan"]){
  --gf-ink:#132318;--gf-ink-2:#3c4f40;--gf-bone:#f6f2e6;--gf-paper:#fffdf6;
  --gf-deep:#006838;--gf-clay:#cfe4b4;--gf-line:rgba(19,35,24,.22);
  --lp-blue:#2f5d7c;--lp-gold:#b89b07;
  --gf-serif:"Fraunces",Georgia,serif;
  --gf-sans:"IBM Plex Sans",system-ui,sans-serif;
  --gf-mono:"IBM Plex Mono",ui-monospace,monospace;
  --lp-draft:"DM Mono",ui-monospace,monospace;
}
[data-skin="ledger-plan"]{font-weight:350}

/* the field keeps Tanveer's journey, on Growth Ledger's warmer paper */
[data-skin="ledger-plan"] .gf-story{
  background:linear-gradient(in oklch 180deg,
    #fffdf7 0%, #fbf8ec 18%, #f3f4e2 36%, #e7efd2 54%, #dbeac2 72%, #cfe4b4 88%, #c6e0aa 100%)}

/* Site Plan's drafting grid, laid over the paper.
   Painted from <body> so it cannot become a grid item or disturb the rail:
   .gf-growth must keep its own sticky positioning exactly as it is. */
[data-skin="ledger-plan"]::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(19,35,24,.05) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(19,35,24,.05) 39px 40px)}

/* Fraunces, with the optical size the Ledger used at display sizes */
[data-skin="ledger-plan"] .gf-intro h1,
[data-skin="ledger-plan"] .gf-act h2{font-variation-settings:"opsz" 144,"SOFT" 30;letter-spacing:-.025em;font-weight:400}
[data-skin="ledger-plan"] .gf-intro h1 em,
[data-skin="ledger-plan"] .gf-act h2 em{font-style:italic;font-weight:400}
[data-skin="ledger-plan"] .gf-flow li{font-variation-settings:"opsz" 60;font-weight:400}
[data-skin="ledger-plan"] .gf-stage-block strong{font-variation-settings:"opsz" 72;font-weight:400}

/* labels and every technical mark switch to the drafting mono */
[data-skin="ledger-plan"] .gf-eyebrow,[data-skin="ledger-plan"] .gf-act-no,
[data-skin="ledger-plan"] .gf-chapters a,[data-skin="ledger-plan"] .gf-demo,
[data-skin="ledger-plan"] .gf-draft,[data-skin="ledger-plan"] .gf-next,
[data-skin="ledger-plan"] .gf-readout dt,[data-skin="ledger-plan"] .gf-readout dd,
[data-skin="ledger-plan"] .gf-rail-flow,[data-skin="ledger-plan"] .gf-shot figcaption,
[data-skin="ledger-plan"] .gf-button,[data-skin="ledger-plan"] .gf-text-link,
[data-skin="ledger-plan"] .gf-scroll,[data-skin="ledger-plan"] .gf-stage-block span{font-family:var(--lp-draft)}

/* Site Plan sheet codes, hung beside the act number */
.lp-sheet{font:500 var(--t-micro)/1 var(--lp-draft);letter-spacing:.18em;color:var(--gf-deep);
  padding:4px 8px;border:1px solid currentColor;margin-left:2px}
:root[data-stage="school"] .lp-sheet{color:#dcebc6}

/* Site Plan's title block, in the rail under the readout */
.lp-titleblock{display:flex;gap:0;margin:0;border:1px solid color-mix(in srgb,currentColor 26%,transparent)}
.lp-titleblock div{flex:1;padding:9px 10px;border-right:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.lp-titleblock div:last-child{border-right:0}
.lp-titleblock dt{margin:0;font:400 9px/1.2 var(--lp-draft);letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.lp-titleblock dd{margin:5px 0 0;font:500 12px/1 var(--lp-draft);letter-spacing:.08em}
@media(max-width:1080px){.lp-titleblock{display:none}}

/* section rules gain dimension ticks, the Site Plan tell */
[data-skin="ledger-plan"] .gf-flow::before,[data-skin="ledger-plan"] .gf-flow::after{background:currentColor;opacity:.65}
[data-skin="ledger-plan"] .gf-flow{padding-block:26px}
[data-skin="ledger-plan"] .gf-flow li:not(:last-child)::after{content:"→";font-family:var(--lp-draft);opacity:.5}
[data-skin="ledger-plan"] .gf-panel::before{content:"";position:absolute;left:clamp(36px,5vw,88px);right:clamp(36px,5vw,88px);
  top:calc(var(--head-h) + 18px);height:6px;pointer-events:none;opacity:.32;
  background-image:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 26px)}
@media(max-width:1080px){[data-skin="ledger-plan"] .gf-panel::before{display:none}}

/* Growth Ledger plates: the dashboards get an ink frame with an offset shadow */
[data-skin="ledger-plan"] .gf-shot-frame{border:1.5px solid var(--gf-ink);background:#fffdf6;
  box-shadow:14px 14px 0 rgba(19,35,24,.10)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-shot-frame,
[data-skin="ledger-plan"] :root[data-stage="school"] .gf-shot-frame{border-color:rgba(253,252,244,.55);
  box-shadow:14px 14px 0 rgba(0,0,0,.16)}
[data-skin="ledger-plan"] .gf-shot-bar{background:#f6f2e6;border-bottom:1px solid rgba(19,35,24,.18)}


/* the act numeral becomes a ledger figure rather than a hollow one */
[data-skin="ledger-plan"] .gf-act::after{-webkit-text-stroke:0;color:currentColor;opacity:.07;
  font-variation-settings:"opsz" 144;font-weight:400}

/* buttons: letterpress, straight from the Ledger */
[data-skin="ledger-plan"] .gf-button{border:1.5px solid var(--gf-ink);background:var(--gf-ink);color:#fffdf6;
  transition:transform .18s ease,box-shadow .18s ease,background .18s,color .18s}
[data-skin="ledger-plan"] .gf-button:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--lp-gold);
  background:transparent;color:var(--gf-ink)}
[data-skin="ledger-plan"] .gf-button::before,[data-skin="ledger-plan"] .gf-button::after{display:none}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-button{border-color:#fffdf6}

/* masthead rule, the broadsheet cue */
[data-skin="ledger-plan"] .gf-header{border-bottom:1.5px solid var(--gf-line)}
[data-skin="ledger-plan"] .gf-chapters a i{opacity:.4}

/* ── light throughout: nothing on this page inverts to a dark band ───────── */
[data-skin="ledger-plan"] #schools{color:var(--gf-ink)}
[data-skin="ledger-plan"] #schools h2 em{color:#3f6b3a}
[data-skin="ledger-plan"] #workplaces h2 em{color:#2f5b3c}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-header,
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-growth,
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-next{color:var(--gf-ink)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-header{--scrim:rgba(251,248,239,.97);border-color:var(--gf-line)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-brand .on-dark{opacity:0}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-brand .on-light{opacity:1}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-button{background:var(--gf-ink);color:#fffdf6;border-color:var(--gf-ink)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-button:hover{background:transparent;color:var(--gf-ink)}
:root[data-stage="school"] [data-skin="ledger-plan"] .lp-sheet{color:var(--gf-deep)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-shot-frame{border-color:var(--gf-ink);box-shadow:14px 14px 0 rgba(19,35,24,.10)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-progress i,
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-progress i{color:#4f7d4b}
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-growth{color:var(--gf-ink)}
@media(max-width:1080px){
  :root[data-stage="school"] [data-skin="ledger-plan"] .gf-growth,
  :root[data-stage="office"] [data-skin="ledger-plan"] .gf-growth{color:var(--gf-ink)}
}

/* ── the drawing grows up: crayon sketch, then a steadier hand, then drafting ──
   Stage three is deliberately left exactly as the approved elevation. */
:root[data-stage="elc"]:has([data-skin="ledger-plan"]){--tone:#6f9a5c}
:root[data-stage="school"]:has([data-skin="ledger-plan"]){--tone:#4f7d4b}
:root[data-stage="office"]:has([data-skin="ledger-plan"]){--tone:#2f4b38}

/* stage one: thick, round, wobbly, drawn twice like a child would */

/* stage two: the hand steadies */

/* stage three: no filter, no rounding. The precise elevation, untouched. */

/* the sun and the grass belong to stage one only */
.lp-sun{fill:none;stroke:#e0b544;stroke-width:2.6;stroke-linecap:round}
.lp-sun-rays{fill:none;stroke:#e0b544;stroke-width:2.4;stroke-linecap:round}
.lp-grass{fill:none;stroke:#7aa85f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* they draw themselves in, like the building */
.lp-sun,.lp-sun-rays,.lp-grass{stroke-dasharray:1;stroke-dashoffset:1;
  animation:lp-draw 1.1s cubic-bezier(.16,1,.3,1) 1.5s forwards}
.lp-sun-rays{animation-delay:2s}
.lp-grass{animation-delay:2.3s}
@keyframes lp-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .lp-sun,.lp-sun-rays,.lp-grass{stroke-dashoffset:0;animation:none}
}

/* the footer was the last dark block on the page */
[data-skin="ledger-plan"] .gf-footer{background:#dcebc2;color:var(--gf-ink);border-top:1.5px solid var(--gf-line)}
[data-skin="ledger-plan"] .gf-footer a{color:var(--gf-ink)}
[data-skin="ledger-plan"] .gf-footer img{content:url("/site/assets/logo.svg")}
/* and a slightly heavier crayon at stage one */

/* the log in link shares the drafting button shape */
[data-skin="ledger-plan"] a.gf-draft{display:inline-flex;align-items:center;text-decoration:none;opacity:.75}
[data-skin="ledger-plan"] a.gf-draft:hover{opacity:1}

/* ── Bauhaus layer ───────────────────────────────────────────────────────
   Three primitives, one per audience, in Kandinsky's order: circle, triangle,
   square. Flat colour, no shadow, no gradient. The geometry carries meaning:
   each act is marked by its own form and keeps it in the rail and the plate. */
.lp-mark{width:clamp(14px,1.1vw,18px);height:auto;flex:0 0 auto;margin-right:2px}
#centres .lp-mark{fill:#b89b07}      /* circle, the centre */
#schools .lp-mark{fill:#4f7d4b}      /* triangle, the school */
#workplaces .lp-mark{fill:#132318}   /* square, the workplace */
.gf-act-no{gap:12px}

/* the hero composition: an arc, a bar and a disc, cropped by the column edge.
   Asymmetric on purpose. It anchors the eye before the headline is read. */
.lp-bauhaus{position:absolute;right:clamp(-60px,-3vw,-10px);top:auto;bottom:clamp(-40px,-4vh,-10px);
  width:clamp(180px,22vw,320px);aspect-ratio:1;z-index:0;pointer-events:none;
  opacity:0;transform:translateY(18px) rotate(-4deg);
  animation:lp-bauhaus-in 1.1s cubic-bezier(.16,1,.3,1) 1.6s forwards}
.lp-bauhaus svg{width:100%;height:100%;overflow:visible}
.lp-bauhaus .b-arc{fill:none;stroke:#4f7d4b;stroke-width:14;opacity:.34}
.lp-bauhaus .b-bar{fill:#b89b07;opacity:.4}
.lp-bauhaus .b-disc{fill:#cfe4b4;opacity:.6}
@keyframes lp-bauhaus-in{to{opacity:1;transform:none}}
.gf-intro .gf-hold{position:relative;z-index:1}
@media(max-width:1080px){
  [data-skin="ledger-plan"] .gf-intro{overflow:hidden}
  .lp-bauhaus{width:150px;top:auto;bottom:-24px;right:-18px;opacity:.72}
}

/* the plate sits on a flat colour block rather than a soft shadow */
[data-skin="ledger-plan"] .gf-shot{position:relative}
[data-skin="ledger-plan"] .gf-shot::before{content:"";position:absolute;z-index:-1;
  left:14px;top:14px;right:-14px;bottom:auto;height:100%;background:#cfe4b4;opacity:.55}
[data-skin="ledger-plan"] .gf-shot-frame{box-shadow:none}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-shot::before{background:#b89b07;opacity:.35}
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-shot::before{background:#4f7d4b;opacity:.3}

/* ── design-review fixes ─────────────────────────────────────────────────── */
/* F1: every interactive target clears 44px */
[data-skin="ledger-plan"] .gf-chapters a{min-height:44px;align-items:center;padding-bottom:0}
[data-skin="ledger-plan"] .gf-chapters a i{bottom:11px}
[data-skin="ledger-plan"] .gf-draft,[data-skin="ledger-plan"] .gf-demo{min-height:44px;display:inline-flex;align-items:center}
[data-skin="ledger-plan"] .gf-text-link{min-height:44px;align-items:center}
/* growth-field.css sets .gf-next{display:flex}, which outranks the UA rule for
   [hidden] - so the chevron kept rendering over the footer after the script had
   already hidden it at the end of the page */
[data-skin="ledger-plan"] .gf-next[hidden]{display:none}
[data-skin="ledger-plan"] .gf-next{min-height:44px}
/* F2: the lede reads at a proper measure */
[data-skin="ledger-plan"] .gf-act-lede,[data-skin="ledger-plan"] .gf-intro-copy{max-width:52ch}
[data-skin="ledger-plan"] .gf-footer a{min-height:44px;display:inline-flex;align-items:center}
/* the copy column carries a proper measure; the screen keeps its own width */
@media(min-width:1081px){
  [data-skin="ledger-plan"] .gf-act .gf-hold{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
}

/* ── no brown anywhere on this skin ──────────────────────────────────────
   The shared stylesheet still turns the header scrim sand at the workplace
   stage and drifts one leaf to clay. Both are overridden here rather than in
   growth-field.css, which Growth Field still depends on. */
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-header,
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-header::before{--scrim:rgba(251,248,239,.97)}
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-header{color:var(--gf-ink);border-color:var(--gf-line)}
/* ── the drifting leaves are the logo's own leaves ───────────────────────
   Hanwei: leaf-shaped like the mark, in the two greens. The shared sheet
   uses a generic teardrop in six tints; both silhouettes here are lifted
   straight out of assets/logo.svg, and every leaf is one of the two brand
   greens rather than a spread of tints. */
[data-skin="ledger-plan"] .gf-leaves{
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='57 0 51 90'%3E%3Cpath d='M96.062 0.0237427C97.195 5.69625 94.3588 11.5469 90.2778 15.6303C86.1968 19.7231 80.9733 22.4335 75.9896 25.3505C70.9989 28.2675 66.0176 31.5931 62.8892 36.4532C60.1622 40.6791 59.0481 45.7459 58.478 50.739C57.763 56.8035 57.8628 63.1625 59.7869 68.8682C61.186 65.4262 63.0127 62.1363 65.0912 59.0601C69.1722 53.0052 74.1986 47.6628 79.1988 42.349C85.0471 36.142 90.8835 29.9422 96.7318 23.7376C90.6793 35.0802 81.3035 44.2304 73.3791 54.352C65.4546 64.4808 58.6989 76.5741 59.4401 89.4156C60.0268 82.8428 65.3573 77.6264 71.1414 74.4529C76.9256 71.2769 83.4057 69.5025 89.102 66.184C99.8769 59.9081 107.122 47.9384 107.685 35.4722C108.255 22.8634 102.506 10.8675 96.062 0.0237427Z' fill='%23000'/%3E%3C/svg%3E");
  --leaf-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17 5 39 69'%3E%3Cpath d='M26.3101 5.46347C25.4549 9.76299 27.6023 14.1955 30.6951 17.2883C33.7879 20.3835 37.7453 22.443 41.5246 24.6545C45.3039 26.866 49.0737 29.3816 51.4539 33.0635C53.5205 36.2656 54.359 40.0995 54.7961 43.8907C55.3211 48.4752 55.2498 53.2997 53.7889 57.623C52.7271 55.0195 51.347 52.523 49.7697 50.195C46.6769 45.6129 42.8715 41.5628 39.0827 37.5412C34.6525 32.8426 30.2319 28.1416 25.8017 23.443C30.3839 32.0397 37.4864 38.9593 43.4939 46.6367C49.5013 54.3069 54.618 63.4642 54.055 73.1939C53.6108 68.2174 49.5726 64.267 45.197 61.8607C40.8215 59.4521 35.9091 58.1147 31.5859 55.5991C23.4239 50.8198 17.9319 41.7599 17.5044 32.3152C17.0768 22.7637 21.4357 13.6872 26.3101 5.46347Z' fill='%23000'/%3E%3C/svg%3E")}
[data-skin="ledger-plan"] .gf-leaves i{
  aspect-ratio:51 / 90;
  -webkit-mask:var(--leaf) center/contain no-repeat;mask:var(--leaf) center/contain no-repeat}
[data-skin="ledger-plan"] .gf-leaves i:nth-child(even){
  aspect-ratio:39 / 69;
  -webkit-mask-image:var(--leaf-b);mask-image:var(--leaf-b)}
/* the two greens of the mark: the deep leaf and the mid leaf */
[data-skin="ledger-plan"] .gf-leaves i:nth-child(1){--c:#006838;--w:34px}
[data-skin="ledger-plan"] .gf-leaves i:nth-child(2){--c:#55833D;--w:24px}
[data-skin="ledger-plan"] .gf-leaves i:nth-child(3){--c:#55833D;--w:40px}
[data-skin="ledger-plan"] .gf-leaves i:nth-child(4){--c:#006838;--w:26px}
[data-skin="ledger-plan"] .gf-leaves i:nth-child(5){--c:#55833D;--w:36px}
[data-skin="ledger-plan"] .gf-leaves i:nth-child(6){--c:#006838;--w:22px}

/* ════════════════════════════════════════════════════════════════════════
   Feedback from Tanveer and the team, 24 Aug
   2. the big centred logo returns and leaves on scroll
   3. the icon is bigger, the chrome around it is gone
   4. crayon and a hand → pencil → a precise 3D line drawing
   ════════════════════════════════════════════════════════════════════════ */

/* ── 2. hero: logo centre stage, then out of the way ─────────────────────── */
[data-skin="ledger-plan"] .gf-intro .gf-hold{text-align:center;display:grid;justify-items:center}
[data-skin="ledger-plan"] .gf-intro h1,
[data-skin="ledger-plan"] .gf-intro-copy{max-width:20ch;margin-inline:auto}
[data-skin="ledger-plan"] .gf-intro-copy{max-width:44ch}
[data-skin="ledger-plan"] .gf-eyebrow{justify-content:center}
[data-skin="ledger-plan"] .gf-intro-actions{justify-content:center}
/* the mark is 289.8x214.3, so it is tall for its width - cap it against the
   viewport height too, or on a short screen it eats the band and pushes the
   two calls to action below the fold */
.lp-herologo{width:min(520px,68vw,calc(33svh * 1.352));height:auto;margin:0 0 clamp(14px,2.4vh,32px);
  /* it fades and lifts within the first tenth of the page, then it is gone */
  opacity:clamp(0,calc(1 - var(--p,0) * 14),1);
  transform:translateY(calc(var(--p,0) * -70px)) scale(calc(1 - var(--p,0) * .5));
  transform-origin:50% 0;will-change:opacity,transform}
@media(max-width:1080px){.lp-herologo{width:min(420px,78vw,calc(30svh * 1.352));margin-bottom:20px}}

/* ── 3. the icon is the point: bigger rail, nothing else in it ───────────── */
[data-skin="ledger-plan"] .gf-story{grid-template-columns:minmax(240px,26%) minmax(0,74%)}
/* The rail is 100svh stuck at top:0, but .gf-story is pushed down by one
   header, so the rail hangs a header's worth below the fold and takes the
   drawing's base and the stage label with it. Stick it below the header and
   give it exactly the band that remains. */
[data-skin="ledger-plan"] .gf-growth{padding:18px 14px 20px;gap:14px}
@media (min-width:1081px){
  [data-skin="ledger-plan"] .gf-growth{top:var(--head-h);height:calc(100svh - var(--head-h))}
}
[data-skin="ledger-plan"] .gf-drawing-wrap{flex:1;min-height:0}
[data-skin="ledger-plan"] .gf-stage-block{align-items:center;text-align:center;gap:4px;opacity:.75}
[data-skin="ledger-plan"] .gf-stage-block strong{font-size:clamp(15px,1.1vw,18px)}
@media(max-width:1080px){
  [data-skin="ledger-plan"] .gf-drawing-wrap{flex:0 0 46%}
}

/* ── 4a. stage one: crayon, with a hand drawing it ───────────────────────── */

/* ── 4b. stage two: pencil. Graphite, finer line, a little hatching ─────── */
:root[data-stage="school"]:has([data-skin="ledger-plan"]){--tone:#46574a}

/* ── 4c. stage three: precise, and given depth ──────────────────────────── */
:root[data-stage="office"]:has([data-skin="ledger-plan"]){--tone:#2f4b38}

@media(prefers-reduced-motion:reduce){
  .lp-herologo{opacity:1;transform:none}
}

/* ── the hero stands alone: no rail beside it ────────────────────────────
   It was a cell in the same grid as the drawing, which is why the building
   sat next to the logo. It is now its own full-width section above the grid,
   so the drawing starts exactly where early learning starts. */
.lp-hero{position:relative;z-index:1;min-height:calc(100svh - var(--head-h));
  display:grid;align-content:center;justify-items:center;text-align:center;
  padding:calc(var(--head-h) + var(--s5)) clamp(24px,6vw,80px) var(--s7)}
.lp-hero .gf-hold{width:min(100%,760px);display:grid;justify-items:center}
.lp-hero h1{max-width:18ch}
.lp-hero .gf-intro-copy{max-width:46ch;margin-inline:auto}
.lp-hero .gf-eyebrow{justify-content:center}
.lp-hero .gf-intro-actions{justify-content:center}
@media(max-width:1080px){.lp-hero{min-height:auto;padding-block:calc(var(--head-h) + var(--s4)) var(--s6)}}

/* ── the line is alive: it boils, the way hand-drawn animation does ───────
   Three wobble seeds cycled at ~8fps. One frame is a still drawing; three
   frames in rotation read as a hand redrawing the same line. */
/* the boil is a cut between frames, never a tween */

/* ── the office elevation, redrawn ───────────────────────────────────────
   Punched windows read as a stock icon. A real office elevation is a curtain
   wall: continuous glazing, slim mullions, a taller lobby. It only appears at
   the workplace stage, so the crayon centre and pencil school are untouched. */
/* the tower's punched windows and the centre's flagpole step aside for it.
   The wings keep their glazing: they read as the lobby's flanking bays. */
/* the pitched cap tightens into a flush coping over the curtain wall */

/* ── each act frames itself ──────────────────────────────────────────────
   The acts are one viewport tall with their content centred, but free
   scrolling settles anywhere, so you read the tail of one act above the head
   of the next. Proximity snapping lets the scroll come to rest on a single
   act with all of it in view, while still allowing a long section to be
   scrolled through normally. scroll-margin-top keeps the sticky header off
   the first line — it also fixes the down-chevron's scrollIntoView. */
html:has([data-skin="ledger-plan"]){scroll-padding-top:var(--head-h)}
@media (min-width:1081px) and (min-height:660px){
  html:has([data-skin="ledger-plan"]){scroll-snap-type:y proximity}
  /* a snapped act starts below the header, so its own box only needs the
     remaining band — otherwise it overhangs the fold by exactly one header
     and the last line of every act sits just out of view */
  [data-skin="ledger-plan"] .gf-act{min-height:calc(100svh - var(--head-h));
    padding-top:var(--s3);padding-bottom:var(--s3)}
  [data-skin="ledger-plan"] .lp-hero,
  [data-skin="ledger-plan"] .gf-act,
  [data-skin="ledger-plan"] .lp-getapp,
  [data-skin="ledger-plan"] .gf-footer{scroll-snap-align:start}
}
/* Growth Field gives every panel a scroll-margin of header + rail + 26px.
   Here the scroller's own scroll-padding already insets the snapport by one
   header, and each act reserves the rail's band in its padding, so that
   margin would be counted a second time - landing every act well below the
   fold and pushing its base off screen. */
[data-skin="ledger-plan"] .gf-panel[id]{scroll-margin-top:0}
/* short viewports: give the content the room the padding was taking, so a
   whole act still fits between the header and the fold */
@media (min-width:1081px) and (max-height:820px){
  [data-skin="ledger-plan"] .gf-act{padding-top:20px;padding-bottom:20px}
  [data-skin="ledger-plan"] .gf-act h2{font-size:clamp(36px,4.4vw,56px)}
  [data-skin="ledger-plan"] .gf-actions{margin-top:var(--s4)}
}

/* ── the header, at three widths ─────────────────────────────────────────
   Its three groups add up to more than a phone viewport, so rather than
   letting the demo button run off the edge, each width gets the controls it
   has room for: everything on desktop, the chapters plus one action on a
   tablet, and the brand plus a menu on a phone. */
[data-skin="ledger-plan"] .lp-menu-btn{display:none}
[data-skin="ledger-plan"] .gf-header{
  backdrop-filter:blur(9px) saturate(1.06);
  -webkit-backdrop-filter:blur(9px) saturate(1.06)}
[data-skin="ledger-plan"] .gf-header::after{content:"";position:absolute;
  inset:auto 0 0;height:1px;background:currentColor;opacity:.14}

/* tablet: Drafting is an internal toggle, so it goes. The chapter links keep
   their words - Growth Field strips them to bare numerals below 1080, and
   "01 02 03" on its own names nothing. */
@media (min-width:901px) and (max-width:1080px){
  [data-skin="ledger-plan"] button.gf-draft{display:none}
  [data-skin="ledger-plan"] .gf-chapters a em{display:inline}
  [data-skin="ledger-plan"] .gf-chapters a{gap:8px;padding-bottom:8px}
  [data-skin="ledger-plan"] .gf-chapters{gap:clamp(14px,2.4vw,26px)}
}

/* phone and small tablet: brand and one control. Everything else moves into
   the sheet (below 900px the chapter links wrapped onto two lines). */
@media (max-width:900px){
  [data-skin="ledger-plan"] .gf-header{grid-template-columns:auto 1fr;padding-inline:16px}
  [data-skin="ledger-plan"] .gf-chapters,
  [data-skin="ledger-plan"] a.gf-draft,
  [data-skin="ledger-plan"] button.gf-draft,
  [data-skin="ledger-plan"] .gf-demo{display:none}
  [data-skin="ledger-plan"] .lp-menu-btn{display:inline-flex}
  [data-skin="ledger-plan"] .gf-brand{width:78px;height:46px}
  [data-skin="ledger-plan"] .gf-brand img{width:76px}
}

/* the menu control: two rules that become a cross, so open and closed are
   the same object rather than two different icons */
.lp-menu-btn{align-items:center;gap:10px;min-height:44px;padding:11px 15px;
  border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  font:500 var(--t-micro)/1.2 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s,color .3s}
.lp-menu-btn:hover,.lp-menu-btn[aria-expanded="true"]{background:currentColor}
.lp-menu-btn:hover .lp-menu-word,
.lp-menu-btn[aria-expanded="true"] .lp-menu-word{color:var(--gf-bone)}
.lp-menu-bars{display:grid;gap:5px;width:18px}
.lp-menu-bars i{display:block;height:1.5px;background:currentColor;
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .2s}
.lp-menu-btn:hover .lp-menu-bars i{background:var(--gf-bone)}
.lp-menu-btn[aria-expanded="true"] .lp-menu-bars i{background:var(--gf-bone)}
.lp-menu-btn[aria-expanded="true"] .lp-menu-bars i:first-child{transform:translateY(3.25px) rotate(45deg)}
.lp-menu-btn[aria-expanded="true"] .lp-menu-bars i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ── the sheet ───────────────────────────────────────────────────────────── */
html.lp-menu-locked{overflow:hidden}
/* the header stays above the sheet, so the brand and the control that opened
   it - now an X - remain in place instead of the page losing its top edge */
[data-skin="ledger-plan"] .gf-header{z-index:130}
html.lp-menu-locked [data-skin="ledger-plan"] .gf-header{--scrim:transparent;color:var(--gf-ink)}
html.lp-menu-locked [data-skin="ledger-plan"] .gf-header::after{opacity:0}
html.lp-menu-locked [data-skin="ledger-plan"] .gf-brand .on-dark{opacity:0}
html.lp-menu-locked [data-skin="ledger-plan"] .gf-brand .on-light{opacity:1}
.lp-menu{position:fixed;inset:0;z-index:120}
.lp-menu-scrim{position:absolute;inset:0;background:rgba(19,35,24,.34);
  opacity:0;transition:opacity .34s ease}
.lp-menu.is-open .lp-menu-scrim{opacity:1}
.lp-menu-panel:focus{outline:none}
.lp-menu-panel{position:absolute;inset:0 0 auto;
  display:grid;gap:var(--s4);padding:calc(var(--head-h) + var(--s5)) 24px var(--s5);
  background:#fbf8ef;color:var(--gf-ink);
  border-bottom:1px solid var(--gf-line);
  transform:translateY(-101%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.lp-menu.is-open .lp-menu-panel{transform:translateY(0)}
.lp-menu-eyebrow{margin:0;font:500 var(--t-micro)/1.3 var(--gf-mono);
  letter-spacing:.17em;text-transform:uppercase;opacity:.52}
.lp-menu-list{margin:0;padding:0;list-style:none;display:grid;
  border-top:1px solid var(--gf-line)}
.lp-menu-list a{display:flex;align-items:baseline;gap:16px;min-height:60px;
  padding:14px 0;border-bottom:1px solid var(--gf-line);
  color:inherit;text-decoration:none}
.lp-menu-list span{font:500 var(--t-micro)/1 var(--gf-mono);letter-spacing:.16em;opacity:.5}
.lp-menu-list em{font-family:var(--gf-serif);font-style:normal;font-weight:500;
  font-size:clamp(28px,8vw,38px);line-height:1;letter-spacing:-.03em}
.lp-menu-list a:active em,.lp-menu-list a:focus-visible em{color:var(--gf-deep)}
.lp-menu-actions{display:grid;gap:12px}
.lp-menu-demo{display:flex;align-items:center;justify-content:space-between;
  min-height:56px;padding:0 20px;background:var(--gf-ink);color:#fffdf6;text-decoration:none;
  font:500 var(--t-micro)/1.2 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase}
.lp-menu-login{display:flex;align-items:center;justify-content:center;
  min-height:52px;border:1px solid var(--gf-line);color:inherit;text-decoration:none;
  font:500 var(--t-micro)/1.2 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase}
.lp-menu-close{justify-self:start;min-height:44px;padding:0;border:0;background:none;
  color:inherit;cursor:pointer;opacity:.55;
  font:500 var(--t-micro)/1.2 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase}
@media (min-width:901px){.lp-menu{display:none}}
@media (prefers-reduced-motion:reduce){
  .lp-menu-panel,.lp-menu-scrim,.lp-menu-bars i{transition:none}
}
/* the hero's Bauhaus composition is bled off the right edge by design */
[data-skin="ledger-plan"] .lp-hero{overflow:hidden}

/* stacked layout: the rail sticks below the header as a full-width strip, so
   it overlays the top of whatever act you scroll to and the heading lands
   behind it. Every act clears the header AND the rail. */
@media (max-width:1080px){
  /* the padding already reserves the rail's band, so the scroll offset only
     needs to clear the header - counting the rail twice buries the heading
     a screen down instead */
  [data-skin="ledger-plan"] .gf-act{padding-top:calc(var(--rail-h) + var(--s4))}
}

/* the stacked rail inherits Growth Field's tone mix, which darkens to a muddy
   grey-green by the school stage and fights this skin's light-only palette.
   Keep the strip paper-light so the ink label on it stays readable. */
@media (max-width:1080px){
  [data-skin="ledger-plan"] .gf-growth{
    background:color-mix(in oklch, #faf8ee, var(--tone) calc(var(--g) * 16%))}
}

/* ── header hierarchy ────────────────────────────────────────────────────
   Three identically boxed controls give the bar no focal point and read as
   equal weight. One primary, one quiet ghost, one plain link. */
[data-skin="ledger-plan"] a.gf-draft{border:0;padding:13px 4px;opacity:.68}
[data-skin="ledger-plan"] a.gf-draft::after{content:"";display:block;height:1px;
  margin-top:5px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
[data-skin="ledger-plan"] a.gf-draft:hover::after,
[data-skin="ledger-plan"] a.gf-draft:focus-visible::after{transform:scaleX(1)}
[data-skin="ledger-plan"] button.gf-draft{opacity:.42;border-color:color-mix(in srgb,currentColor 40%,transparent)}
[data-skin="ledger-plan"] button.gf-draft:hover{opacity:.9}
[data-skin="ledger-plan"] .gf-demo{background:var(--gf-ink);color:#fffdf6;border-color:var(--gf-ink)}
[data-skin="ledger-plan"] .gf-demo:hover{background:transparent;color:var(--gf-ink)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-demo,
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-demo{
  background:var(--gf-ink);color:#fffdf6;border-color:var(--gf-ink)}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-demo:hover,
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-demo:hover{
  background:transparent;color:var(--gf-ink)}
[data-skin="ledger-plan"] .gf-header-end{gap:16px}

/* stacked layout: the sticky rail takes up to 30svh, so on a short landscape
   screen the dashboard plate is taller than the band left below it and its
   base can never be scrolled into view. Cap it to what actually fits. */
@media (max-width:1080px){
  [data-skin="ledger-plan"] .gf-shot-frame{
    max-height:calc(100svh - var(--head-h) - var(--rail-h) - 28px)}
  [data-skin="ledger-plan"] .gf-shot-frame img{
    max-height:inherit;height:auto;object-fit:contain;object-position:top}
}

/* ── About, as a menu ────────────────────────────────────────────────────── */
.lp-about{position:relative;display:flex}
.lp-about-btn{display:flex;align-items:center;gap:7px;min-height:44px;padding:9px 0;
  border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.lp-about-btn em{font-style:normal}
.lp-caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  transition:transform .28s cubic-bezier(.16,1,.3,1)}
.lp-about.is-open .lp-caret{transform:rotate(180deg)}
/* [hidden] must win: a display value here would override the UA rule and the
   menu would render open no matter what the state says */
.lp-about-menu[hidden]{display:none}
.lp-about-menu{position:absolute;top:calc(100% + 10px);left:-14px;z-index:5;
  min-width:184px;display:grid;padding:6px;
  background:#fbf8ef;border:1px solid var(--gf-line);
  box-shadow:0 18px 40px -22px rgba(19,35,24,.45);
  transform-origin:top left}
.lp-about-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--gf-ink);text-decoration:none;
  font:500 var(--t-micro)/1.2 var(--gf-mono);letter-spacing:.14em;text-transform:uppercase}
.lp-about-menu a:hover,.lp-about-menu a:focus-visible{background:color-mix(in srgb,var(--gf-deep) 10%,transparent)}
.lp-about.is-open .lp-about-menu{animation:lp-about-in .22s cubic-bezier(.16,1,.3,1) both}
@keyframes lp-about-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lp-about.is-open .lp-about-menu{animation:none}
  .lp-caret{transition:none}
}
/* the sheet's About links sit under the three sections as a quieter group */
.lp-menu-sub{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.lp-menu-sub a{display:inline-flex;align-items:center;min-height:44px;color:inherit;
  text-decoration:none;opacity:.6;
  font:500 var(--t-micro)/1.2 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase}
.lp-menu-sub a:hover{opacity:1}

/* ════════════════════════════════════════════════════════════════════════
   Hanwei's brief, 1 Sep: the rail is the app, not a building
   Each section folds into a profile card, so the home screen fills up as
   you read: ELC child, school child, adult at work.
   ════════════════════════════════════════════════════════════════════════ */

/* the phone takes whichever of the rail's two axes runs out first, so it keeps
   its proportions instead of stretching to the column */
[data-skin="ledger-plan"] .gf-drawing-wrap{container-type:size}
.ph-frame{height:min(100cqh, calc(100cqw * 17.4 / 9));
  aspect-ratio:9 / 17.4;margin-inline:auto;display:grid;place-items:stretch}
/* the query container is the shell, not the screen: a container cannot size
   its own padding or gap in its own cq units - those resolve against the next
   container out, which here was the viewport */
.ph-shell{position:relative;container-type:inline-size;
  border-radius:min(9%,34px);background:#12231a;padding:2.4%;
  box-shadow:0 30px 60px -34px rgba(19,35,24,.6), 0 0 0 1px rgba(19,35,24,.12);
  display:grid}
.ph-island{position:absolute;top:2.9%;left:50%;translate:-50% 0;z-index:3;
  width:30%;height:1.5%;min-height:8px;border-radius:99px;background:#0a1610}
.ph-home{position:absolute;bottom:1.1%;left:50%;translate:-50% 0;z-index:3;
  width:32%;height:3px;border-radius:99px;background:rgba(255,255,255,.5)}
.ph-screen{overflow:hidden;
  border-radius:min(7.4%,27px);background:#fbf8ef;color:var(--gf-ink);
  display:flex;flex-direction:column;gap:3.4cqw;padding:7cqw 5.5cqw 4cqw}

.ph-status{display:flex;justify-content:space-between;align-items:center;
  font:500 3.3cqw/1 var(--gf-mono);letter-spacing:.06em;opacity:.55}
.ph-status-icons{display:flex;gap:1.4cqw;align-items:center}
.ph-status-icons i{width:2.6cqw;height:2.6cqw;border-radius:1px;background:currentColor;opacity:.6}
.ph-status-icons i:last-child{width:5cqw;border-radius:1.5px}

.ph-appbar{display:flex;align-items:center;justify-content:space-between}
.ph-logo{width:25cqw;height:auto}
.ph-avatar-me{display:grid;place-items:center;width:9cqw;height:9cqw;border-radius:50%;
  background:var(--gf-deep);color:#fffdf6;font:500 3.6cqw/1 var(--gf-mono);letter-spacing:.04em}

.ph-greet{margin:0;font-family:var(--gf-serif);font-weight:400;
  font-size:6.6cqw;line-height:1.12;letter-spacing:-.03em}
.ph-greet strong{font-weight:500;color:var(--gf-deep)}

.ph-sectionhead{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:2cqw;border-bottom:1px solid var(--gf-line);
  font:500 2.9cqw/1 var(--gf-mono);letter-spacing:.17em;text-transform:uppercase;opacity:.6}
.ph-count{display:grid;place-items:center;min-width:5.4cqw;height:5.4cqw;
  border-radius:50%;background:var(--gf-deep);color:#fffdf6;opacity:1;
  font-size:2.7cqw;letter-spacing:0}

.ph-cards{display:grid;gap:2.6cqw}

/* a slot holds a card that may not exist yet: 0fr collapses it with no
   measuring, and the inner element clips while it does */
.ph-slot{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .62s cubic-bezier(.16,1,.3,1),opacity .34s ease}
.ph-slot-in{overflow:hidden;min-height:0}
.ph-card{border:1px solid var(--gf-line);background:#fffdf6;
  padding:3.4cqw;display:grid;gap:3cqw;
  transition:border-color .5s ease,box-shadow .5s ease,padding .5s cubic-bezier(.16,1,.3,1)}
.ph-card-head{display:flex;align-items:center;gap:3cqw}
.ph-ava{flex:none;display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;
  background:color-mix(in srgb,var(--gf-deep) 12%,#fff);
  transition:width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1)}
.ph-ava svg{width:74%;height:74%;fill:none;stroke:var(--gf-deep);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ph-ava .a-body{stroke-width:1.9}
.ph-ava[data-role="school"]{background:color-mix(in srgb,#4f7d4b 15%,#fff)}
.ph-ava[data-role="school"] svg{stroke:#3f6b3a}
.ph-ava[data-role="office"]{background:color-mix(in srgb,#2f5b3c 15%,#fff)}
.ph-ava[data-role="office"] svg{stroke:#2f5b3c}
.ph-who{display:grid;gap:.6cqw;min-width:0}
.ph-who strong{font-family:var(--gf-serif);font-weight:500;font-size:4.6cqw;
  line-height:1;letter-spacing:-.02em}
.ph-who em{font-style:normal;font:400 2.9cqw/1.25 var(--gf-mono);letter-spacing:.06em;opacity:.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-state{flex:none;margin-left:auto;width:4.6cqw;height:4.6cqw;border-radius:50%;
  border:1px solid var(--gf-line);position:relative;
  transition:background .4s ease,border-color .4s ease}
/* open: a filled dot, this is the hub you are looking at.
   folded: a tick, this one is already sorted for today. */
.ph-state::after{content:"";position:absolute;inset:24%;border-radius:50%;
  background:var(--gf-deep);opacity:0;transition:opacity .4s ease}
.ph-state::before{content:"";position:absolute;inset:0;
  background:no-repeat center/52% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.7 2.7L10 3.2' fill='none' stroke='%23fffdf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:0;transition:opacity .4s ease}

/* the detail of a card: open at its own stage, folded away afterwards */
.ph-body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .62s cubic-bezier(.16,1,.3,1)}
.ph-body-in{overflow:hidden;min-height:0;display:grid;gap:2.6cqw;
  opacity:0;transition:opacity .3s ease}
.ph-meal{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;
  padding-top:2.8cqw;border-top:1px solid var(--gf-line)}
.ph-meal-k{font:500 2.7cqw/1 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.ph-meal-v{font-family:var(--gf-serif);font-weight:500;font-size:4cqw;letter-spacing:-.02em;text-align:right}
.ph-chips{display:flex;flex-wrap:wrap;gap:1.6cqw}
.ph-chips span{padding:1.4cqw 2.4cqw;border:1px solid var(--gf-line);
  font:400 2.6cqw/1 var(--gf-mono);letter-spacing:.08em;opacity:.72}
.ph-actions{display:flex;gap:1.8cqw}
.ph-btn{flex:1;display:grid;place-items:center;padding:2.9cqw 0;
  background:var(--gf-ink);color:#fffdf6;
  font:500 2.7cqw/1 var(--gf-mono);letter-spacing:.14em;text-transform:uppercase}
.ph-btn.ghost{background:transparent;color:inherit;border:1px solid var(--gf-line)}

.ph-tabs{margin-top:auto;display:flex;justify-content:space-between;
  padding:3cqw 4cqw 1cqw;border-top:1px solid var(--gf-line)}
.ph-tabs i{width:5cqw;height:5cqw;border-radius:1.4cqw;background:currentColor;opacity:.16}
.ph-tabs i.is-on{opacity:1;color:var(--gf-deep);background:var(--gf-deep)}

/* ── the state machine ───────────────────────────────────────────────────
   present = the slot has opened; open = this section's card is expanded.
   Reading down the page opens each card in turn and folds the previous one
   into a row, which is the whole point of the interaction. */
[data-skin="ledger-plan"] .ph-slot.is-present{grid-template-rows:1fr;opacity:1}
[data-skin="ledger-plan"] .ph-slot.is-open .ph-body{grid-template-rows:1fr}
[data-skin="ledger-plan"] .ph-slot.is-open .ph-body-in{opacity:1;transition-delay:.16s}
[data-skin="ledger-plan"] .ph-slot.is-open .ph-card{
  border-color:color-mix(in srgb,var(--gf-deep) 45%,transparent);
  box-shadow:0 14px 30px -22px rgba(19,35,24,.5)}
[data-skin="ledger-plan"] .ph-slot.is-open .ph-state::after{opacity:1}
/* folded: the card keeps its identity row and loses everything else */
[data-skin="ledger-plan"] .ph-slot:not(.is-open) .ph-card{padding:2.6cqw 3.4cqw}
[data-skin="ledger-plan"] .ph-slot:not(.is-open) .ph-ava{width:8.4cqw;height:8.4cqw}
[data-skin="ledger-plan"] .ph-slot:not(.is-open) .ph-who strong{font-size:3.9cqw}
[data-skin="ledger-plan"] .ph-slot.is-present:not(.is-open) .ph-state{
  background:var(--gf-deep);border-color:var(--gf-deep)}
[data-skin="ledger-plan"] .ph-slot.is-present:not(.is-open) .ph-state::before{opacity:1}

/* the empty slot: it says the home screen is meant to hold more than one hub,
   and it keeps the screen from reading as unfinished at the first section */
.ph-add{display:flex;align-items:center;gap:3cqw;padding:3cqw 3.4cqw;
  border:1px dashed color-mix(in srgb,var(--gf-ink) 26%,transparent);
  color:var(--gf-ink);opacity:.42}
.ph-add span{display:grid;place-items:center;width:8.4cqw;height:8.4cqw;border-radius:50%;
  border:1px dashed currentColor;font:400 4.4cqw/1 var(--gf-mono)}
.ph-add em{font-style:normal;font:500 3cqw/1 var(--gf-mono);letter-spacing:.14em;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .ph-slot,.ph-body,.ph-body-in,.ph-card,.ph-ava{transition:none}
}

/* ── the About pages ─────────────────────────────────────────────────────
   About Us, FAQ and Blog, in the same language as the homepage so the
   dropdown leads somewhere real rather than to a dead link. */
.lp-page{position:relative;z-index:1;
  max-width:1040px;margin-inline:auto;
  padding:calc(var(--head-h) + var(--s6)) clamp(24px,5vw,64px) var(--s7)}
.lp-page h1{margin:0 0 var(--s4);font-family:var(--gf-serif);font-weight:400;
  font-size:clamp(40px,6.4vw,74px);line-height:1;letter-spacing:-.035em;
  font-variation-settings:"opsz" 144,"SOFT" 30}
.lp-page h1 em{font-style:italic;font-weight:400;color:var(--gf-deep)}
.lp-page h2{margin:0 0 12px;font-family:var(--gf-serif);font-weight:500;
  font-size:22px;letter-spacing:-.02em}
.lp-lede{max-width:56ch;margin:0 0 var(--s6);font-size:var(--t-lede);line-height:1.5;opacity:.82}
.lp-cols{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lp-cols section{padding-top:var(--s3);border-top:1px solid var(--gf-line)}
.lp-cols p{margin:0;line-height:1.55;opacity:.8}

.lp-faq{margin:0;display:grid}
.lp-faq > div{padding:var(--s4) 0;border-top:1px solid var(--gf-line)}
.lp-faq dt{font-family:var(--gf-serif);font-weight:500;font-size:21px;letter-spacing:-.02em}
.lp-faq dd{margin:10px 0 0;max-width:62ch;line-height:1.55;opacity:.8}

.lp-posts{margin:0;padding:0;list-style:none;display:grid}
.lp-posts a{display:grid;gap:8px;padding:var(--s4) 0;border-top:1px solid var(--gf-line);
  color:inherit;text-decoration:none}
.lp-posts a:hover strong{color:var(--gf-deep)}
.lp-post-meta{font:500 var(--t-micro)/1 var(--gf-mono);letter-spacing:.17em;
  text-transform:uppercase;opacity:.5}
.lp-posts strong{font-family:var(--gf-serif);font-weight:500;font-size:clamp(22px,2.6vw,30px);
  letter-spacing:-.025em;transition:color .3s ease}
.lp-posts em{font-style:normal;max-width:58ch;line-height:1.5;opacity:.75}

/* ── the app on a small screen ───────────────────────────────────────────
   In the stacked strip a phone bezel renders about 90px wide - a smudge, and
   a phone drawn inside a phone besides. The chrome goes and the profile
   stack itself fills the strip, so the same idea stays legible: the hubs
   still appear one by one as you read down. */
@media (max-width:1080px){
  :root:has([data-skin="ledger-plan"]){--rail-h:min(31svh,264px)}
  [data-skin="ledger-plan"] .gf-drawing-wrap{flex:1;container-type:normal}
  [data-skin="ledger-plan"] .ph-frame{height:100%;aspect-ratio:auto;width:100%}
  [data-skin="ledger-plan"] .ph-shell{background:transparent;padding:0;box-shadow:none;
    border-radius:0;container-type:inline-size}
  [data-skin="ledger-plan"] .ph-island,
  [data-skin="ledger-plan"] .ph-home,
  [data-skin="ledger-plan"] .ph-status,
  [data-skin="ledger-plan"] .ph-appbar,
  [data-skin="ledger-plan"] .ph-greet,
  [data-skin="ledger-plan"] .ph-tabs,
  [data-skin="ledger-plan"] .ph-add{display:none}
  [data-skin="ledger-plan"] .ph-screen{background:transparent;border-radius:0;
    padding:0;gap:2.2cqw;justify-content:center}
  [data-skin="ledger-plan"] .ph-sectionhead{font-size:2.2cqw;padding-bottom:1.4cqw}
  [data-skin="ledger-plan"] .ph-count{min-width:3.6cqw;height:3.6cqw;font-size:2cqw}
  [data-skin="ledger-plan"] .ph-cards{gap:1.6cqw}
  [data-skin="ledger-plan"] .ph-card{padding:2cqw 2.4cqw;gap:1.8cqw}
  [data-skin="ledger-plan"] .ph-ava{width:6cqw;height:6cqw}
  [data-skin="ledger-plan"] .ph-slot:not(.is-open) .ph-ava{width:5cqw;height:5cqw}
  [data-skin="ledger-plan"] .ph-who strong{font-size:2.9cqw}
  [data-skin="ledger-plan"] .ph-slot:not(.is-open) .ph-who strong{font-size:2.6cqw}
  [data-skin="ledger-plan"] .ph-who em{font-size:2cqw}
  [data-skin="ledger-plan"] .ph-state{width:3cqw;height:3cqw}
  [data-skin="ledger-plan"] .ph-meal{padding-top:1.8cqw}
  [data-skin="ledger-plan"] .ph-meal-k{font-size:1.9cqw}
  [data-skin="ledger-plan"] .ph-meal-v{font-size:2.6cqw}
  [data-skin="ledger-plan"] .ph-chips{gap:1.1cqw}
  [data-skin="ledger-plan"] .ph-chips span{padding:.9cqw 1.6cqw;font-size:1.8cqw}
  [data-skin="ledger-plan"] .ph-actions{gap:1.2cqw}
  [data-skin="ledger-plan"] .ph-btn{padding:1.9cqw 0;font-size:1.9cqw}
  /* the stage block no longer needs half the strip */
  [data-skin="ledger-plan"] .gf-stage-block{flex:0 0 auto}
}


/* ── Hanwei, 4 Sep: one typeface across the whole navigation ─────────────
   The chapters were set in the mono and About in the body sans, which is the
   mismatch he spotted. Poppins now covers every control in the bar and in the
   small-screen sheet. */
[data-skin="ledger-plan"] .gf-chapters a,
[data-skin="ledger-plan"] .gf-chapters a em,
[data-skin="ledger-plan"] .lp-about-btn,
[data-skin="ledger-plan"] .lp-about-btn em,
[data-skin="ledger-plan"] .lp-about-menu a,
[data-skin="ledger-plan"] .gf-draft,
[data-skin="ledger-plan"] .gf-demo,
[data-skin="ledger-plan"] .lp-menu-btn,
[data-skin="ledger-plan"] .lp-menu-word,
[data-skin="ledger-plan"] .lp-menu-eyebrow,
[data-skin="ledger-plan"] .lp-menu-list em,
[data-skin="ledger-plan"] .lp-menu-sub a,
[data-skin="ledger-plan"] .lp-menu-demo,
[data-skin="ledger-plan"] .lp-menu-login,
[data-skin="ledger-plan"] .lp-menu-close{
  font-family:"Poppins",var(--gf-sans),system-ui,sans-serif;
  font-weight:500;letter-spacing:.06em}
[data-skin="ledger-plan"] .gf-chapters a,
[data-skin="ledger-plan"] .lp-about-btn{font-size:14px;text-transform:none}
[data-skin="ledger-plan"] .gf-draft,
[data-skin="ledger-plan"] .gf-demo,
[data-skin="ledger-plan"] .lp-menu-btn{font-size:13px;text-transform:none;letter-spacing:.04em}
[data-skin="ledger-plan"] .lp-about-menu a{font-size:13.5px;text-transform:none;letter-spacing:.02em}
[data-skin="ledger-plan"] .lp-menu-list em{font-family:var(--gf-serif);letter-spacing:-.03em}


/* the numbering goes: the sheet codes, the eyebrow numerals and the giant
   ghost figure behind each section were all saying the same thing three times */
[data-skin="ledger-plan"] .lp-sheet{display:none}
[data-skin="ledger-plan"] .gf-act::after{content:none}
[data-skin="ledger-plan"] .gf-act-no span{display:none}
[data-skin="ledger-plan"] .gf-act-no{gap:10px}
[data-skin="ledger-plan"] .lp-menu-list a{gap:0}
[data-skin="ledger-plan"] .gf-stage-block{gap:0}


/* ── Hanwei, 4 Sep: the screen is a representation, not the product ──────
   It was detailed enough to be mistaken for the real UI, so the status bar,
   the chips and the meal specifics are gone. What is left says only what the
   page needs it to: who the hubs are, and that each one has an action. */
.ph-line{display:flex;gap:2.4cqw;padding-top:2.8cqw;border-top:1px solid var(--gf-line)}
.ph-line i{height:2.2cqw;border-radius:99px;background:currentColor;opacity:.16}
.ph-actions{display:flex;gap:1.8cqw}

/* ── each hub wears its section's colour ─────────────────────────────────
   The same three marks the sections use: gold for early learning, green for
   schools, ink for organisations. Set once per card and inherited by the
   avatar, the open border and the status dot, so a card is recognisably the
   section you just read. */
[data-skin="ledger-plan"] .ph-slot{--accent:var(--gf-deep)}
[data-skin="ledger-plan"] .ph-slot[data-accent="elc"]{--accent:#b89b07}
[data-skin="ledger-plan"] .ph-slot[data-accent="school"]{--accent:#4f7d4b}
[data-skin="ledger-plan"] .ph-slot[data-accent="office"]{--accent:#132318}
[data-skin="ledger-plan"] .ph-ava{background:color-mix(in srgb,var(--accent) 15%,#fff)}
[data-skin="ledger-plan"] .ph-ava svg{stroke:var(--accent)}
[data-skin="ledger-plan"] .ph-card{border-left:3px solid var(--accent)}
[data-skin="ledger-plan"] .ph-slot.is-open .ph-card{
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  border-left-color:var(--accent)}
[data-skin="ledger-plan"] .ph-slot.is-open .ph-state::after{background:var(--accent)}
[data-skin="ledger-plan"] .ph-slot.is-present:not(.is-open) .ph-state{
  background:var(--accent);border-color:var(--accent)}
[data-skin="ledger-plan"] .ph-btn{background:var(--accent)}
[data-skin="ledger-plan"] .ph-slot[data-accent="elc"] .ph-btn{color:#1a1405}

/* ── Hanwei, 4 Sep: a page per stakeholder ───────────────────────────────
   The nav now leads to these rather than to an anchor on the homepage. Each
   one carries its section's colour so the link, the page and the profile
   card in the phone all read as the same thing. */
[data-audience]{--accent:var(--gf-deep)}
[data-audience="elc"]{--accent:#b89b07}
[data-audience="school"]{--accent:#4f7d4b}
[data-audience="office"]{--accent:#132318}
.lp-mark-page{width:15px;height:15px;fill:var(--accent);margin-right:9px;vertical-align:-2px}
.lp-stake h1 em{color:var(--accent)}
.lp-stake .lp-lede{max-width:60ch}

/* families → hub → provider, the same three-step the homepage uses */
.lp-flowline{margin:var(--s6) 0 var(--s7);padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.lp-flowline li{display:flex;align-items:center;gap:18px;
  font-family:var(--gf-serif);font-weight:500;font-size:clamp(22px,3vw,34px);letter-spacing:-.025em}
.lp-flowline li + li::before{content:"";width:34px;height:1px;background:currentColor;opacity:.35}
.lp-flowline li:last-child span{color:var(--accent)}

.lp-detail{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--gf-line)}
.lp-ticks{margin:var(--s4) 0 0;padding:0;list-style:none;
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lp-ticks li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--gf-line);
  line-height:1.5;opacity:.85}
.lp-ticks li::before{content:"";position:absolute;left:0;top:20px;width:13px;height:8px;
  border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg)}

/* Blog article: reading column, byline, the four nutrients, the author */
.lp-article h1{max-width:22ch}
.lp-article .gf-eyebrow a{color:inherit}
.lp-byline{display:flex;align-items:center;gap:12px;margin:0 0 var(--s6);
  font:500 var(--t-micro)/1 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.lp-byline img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.lp-article-body{max-width:66ch}
.lp-article-body p{margin:0 0 var(--s3);line-height:1.7;opacity:.86}
.lp-article-body h2{margin:var(--s6) 0 var(--s3)}
.lp-nutrients{margin:var(--s4) 0 var(--s3);padding:0;list-style:none;counter-reset:n}
.lp-nutrients li{counter-increment:n;position:relative;padding:var(--s3) 0 var(--s3) 48px;
  border-top:1px solid var(--gf-line)}
.lp-nutrients li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:calc(var(--s3) + 4px);
  font:500 var(--t-micro)/1 var(--gf-mono);letter-spacing:.14em;color:var(--gf-deep)}
.lp-nutrients h3{margin:0 0 8px;font-family:var(--gf-serif);font-weight:500;font-size:21px;letter-spacing:-.02em}
.lp-nutrients p{margin:0}
.lp-author{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;max-width:66ch;
  margin-top:var(--s6);padding:var(--s4);background:#fbf8ef;border:1px solid var(--gf-line)}
.lp-author img{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:none}
.lp-author div{flex:1 1 260px}
.lp-author p{margin:0;line-height:1.55}
.lp-author-label{font:500 var(--t-micro)/1 var(--gf-mono);letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:8px!important}
.lp-author-name{font-family:var(--gf-serif);font-weight:500;font-size:23px;letter-spacing:-.02em;margin-bottom:6px!important}
.lp-back{display:inline-block;margin-top:var(--s5)}
/* Partners: an accreditation Nourishubs holds, shown inside that partner's card */
.lp-partner-accreditation{display:flex;align-items:center;gap:12px;margin:0;line-height:1.4;font-size:14px}
.lp-partner-accreditation img{width:64px;height:64px;flex:none}
.lp-partner .lp-partner-accreditation span{font:inherit;letter-spacing:normal;text-transform:none;color:inherit;opacity:.8}
/* Homepage early learning section: the Early Learning Australia badge */
.lp-act-badge{display:flex;align-items:center;gap:14px;margin:0 0 var(--s4)}
.lp-act-badge img{width:64px;height:64px;flex:none}
.lp-act-badge span{font:500 var(--t-micro)/1.5 var(--gf-mono);letter-spacing:.14em;
  text-transform:uppercase;opacity:.8}
.lp-act-badge strong{display:block;font:500 17px/1.3 var(--gf-serif);letter-spacing:-.01em;
  text-transform:none;opacity:1}
/* Early learning page: paragraphs inside a detail block, the four steps,
   the three benefit lists and the Early Learning Australia badge */
.lp-detail > p{max-width:62ch;margin:var(--s3) 0 0;line-height:1.6;opacity:.82}
.lp-lede:has(+ .lp-lede){margin-bottom:var(--s3)}
.lp-steps{margin-top:var(--s5);grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.lp-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.lp-steps{grid-template-columns:1fr}}
.lp-cols h3{margin:0 0 8px;font-family:var(--gf-serif);font-weight:500;
  font-size:20px;letter-spacing:-.02em}
.lp-benefits{margin-top:var(--s7)}
.lp-benefits .lp-ticks{grid-template-columns:1fr}
.lp-ela{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin:var(--s5) 0 0;padding:var(--s4);background:#fbf8ef;border:1px solid var(--gf-line)}
.lp-ela img{width:112px;height:112px;flex:none}
.lp-ela div{display:grid;gap:12px}
.lp-ela p{margin:0;line-height:1.5}
.lp-ela strong{display:block;font-family:var(--gf-serif);font-weight:500;
  font-size:clamp(19px,2vw,23px);letter-spacing:-.02em}
.lp-cta{margin-top:var(--s7);padding:var(--s5);border:1px solid var(--gf-line);
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.lp-cta h2{margin:0 0 10px}
.lp-cta p{margin:0 0 var(--s4);max-width:52ch;line-height:1.55;opacity:.82}
.lp-cta-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.lp-stake .gf-button{background:var(--accent);color:#fffdf6;border-color:var(--accent);min-width:210px}
.lp-stake .gf-button:hover{background:transparent;color:var(--gf-ink)}
[data-audience="elc"] .gf-button{color:#1a1405}
/* the nav marks the page you are on */
[data-skin="ledger-plan"] .gf-chapters a[aria-current="page"]{color:var(--accent);opacity:1}
[data-skin="ledger-plan"] .gf-chapters a[aria-current="page"] i{opacity:1;background:var(--accent)}

/* ── get the app ─────────────────────────────────────────────────────────
   Hanwei: a download CTA beside Book a demo at the top, and a full one at
   the foot of the page. The foot version carries the way out for someone
   whose centre, school or workplace is not in the app yet. */
[data-skin="ledger-plan"] .gf-button.ghost{background:transparent;color:var(--gf-ink);
  border-color:var(--gf-ink)}
[data-skin="ledger-plan"] .gf-button.ghost:hover{background:var(--gf-ink);color:#fffdf6}
:root[data-stage="school"] [data-skin="ledger-plan"] .gf-button.ghost,
:root[data-stage="office"] [data-skin="ledger-plan"] .gf-button.ghost{
  background:transparent;color:var(--gf-ink);border-color:var(--gf-ink)}

/* the colour field is painted on .gf-story, which ends at </main>. This
   section sits after it, so it carries the field the rest of the way - from
   the gradient's last stop into the footer's green - instead of dropping back
   to the flat paper and reading as a gap. */
.lp-getapp{position:relative;z-index:1;scroll-margin-top:var(--head-h);
  display:grid;justify-items:center;text-align:center;
  padding:var(--s7) clamp(24px,5vw,64px);
  background:linear-gradient(in oklch 180deg,#c6e0aa 0%,#dcebc2 100%)}
.lp-getapp-copy{width:min(100%,640px);display:grid;justify-items:center}
.lp-getapp h2{margin:0 0 var(--s3);font-family:var(--gf-serif);font-weight:400;
  font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.035em;
  font-variation-settings:"opsz" 144,"SOFT" 30}
.lp-getapp h2 em{font-style:italic;font-weight:400;color:var(--gf-deep)}
.lp-getapp-lede{max-width:48ch;margin:0 0 var(--s5);font-size:var(--t-lede);
  line-height:1.5;opacity:.82}

.lp-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.lp-store{display:inline-flex;align-items:center;gap:12px;min-height:60px;
  padding:0 22px;text-decoration:none;color:#fffdf6;background:var(--gf-ink);
  border:1.5px solid var(--gf-ink);transition:background .3s,color .3s}
.lp-store:hover{background:transparent;color:var(--gf-ink)}
.lp-store svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linejoin:round}
.lp-store:last-child svg{fill:currentColor;stroke:none}
.lp-store span{display:grid;text-align:left;gap:2px}
.lp-store em{font-style:normal;font:400 10px/1 var(--gf-mono);letter-spacing:.16em;
  text-transform:uppercase;opacity:.72}
.lp-store strong{font-family:var(--gf-serif);font-weight:500;font-size:17px;
  letter-spacing:-.01em}

.lp-noorg{max-width:46ch;margin:var(--s5) 0 0;font-size:15px;line-height:1.5;opacity:.7}
.lp-noorg a{color:var(--gf-deep);text-decoration:underline;text-underline-offset:3px}

@media (max-width:560px){
  .lp-stores{width:100%;flex-direction:column}
  .lp-store{width:100%;justify-content:center}
}

/* ── partners ────────────────────────────────────────────────────────────
   Names and a link where we have one, in the shape of the reference page.
   No invented copy about other people's companies. */
.lp-partners-head{margin:var(--s6) 0 var(--s4);font-family:var(--gf-serif);
  font-weight:500;font-size:22px;letter-spacing:-.02em}
/* each card carries its own border: a 1px-gap grid with a background behind it
   leaks a grey block wherever the last row is short of a full set */
.lp-partners{margin:0;padding:0;list-style:none;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.lp-partner > a,.lp-partner > div{display:grid;gap:10px;align-content:space-between;
  min-height:132px;padding:var(--s4);background:#fbf8ef;color:inherit;
  border:1px solid var(--gf-line);text-decoration:none;
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.lp-partner > a:hover{background:#fffdf6;border-color:var(--gf-deep);transform:translateY(-2px)}
.lp-partner strong{font-family:var(--gf-serif);font-weight:500;
  font-size:clamp(19px,2vw,23px);line-height:1.15;letter-spacing:-.02em}
.lp-partner span{font:500 var(--t-micro)/1 var(--gf-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gf-deep)}
/* partner logos sit at the top of each card, left-aligned, one shared height;
   the Early Learning Australia badge is round, so it gets a square box */
.lp-partner-logo{display:block;width:auto;max-width:100%;height:44px;object-fit:contain;object-position:left center}
.lp-partner-badge{height:104px}
/* cards in a row share the tallest card's height (the badge card) */
.lp-partner{display:grid}
/* logo, then name, then the links pinned to the bottom of the card */
.lp-partner > :is(a,div):has(.lp-partner-logo){grid-template-rows:auto auto 1fr;align-content:stretch}
.lp-partner > :is(a,div):has(.lp-partner-logo) > :last-child{align-self:end}
/* a card with more than one link (Early Learning Australia: site + feature PDF) */
.lp-partner-links{margin:0;display:flex;flex-wrap:wrap;gap:10px 20px}
.lp-partner-links a{text-decoration:none;color:inherit}
.lp-partner-links a:hover span,.lp-partner-links a:focus-visible span{text-decoration:underline;text-underline-offset:4px}
.lp-partners-more{margin:var(--s3) 0 0;font:500 var(--t-micro)/1 var(--gf-mono);
  letter-spacing:.17em;text-transform:uppercase;opacity:.5}

.lp-partner-cta{margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--gf-line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4)}
.lp-partner-cta h2{margin:0 0 8px}
.lp-partner-cta p{margin:0;max-width:48ch;line-height:1.55;opacity:.8}

/* short desktop screens: the hero now carries two calls to action, so the
   logo and the vertical rhythm both give way before anything drops below
   the fold */
@media (min-width:1081px) and (max-height:820px){
  [data-skin="ledger-plan"] .lp-herologo{width:min(430px,52vw,calc(26svh * 1.352));
    margin-bottom:clamp(10px,1.6vh,20px)}
  [data-skin="ledger-plan"] .lp-hero .gf-eyebrow{margin-bottom:var(--s3)}
  [data-skin="ledger-plan"] .lp-hero h1{font-size:clamp(34px,4.4vw,54px)}
  [data-skin="ledger-plan"] .lp-hero .gf-intro-copy{margin-top:var(--s3)}
  [data-skin="ledger-plan"] .lp-hero .gf-intro-actions{margin-top:var(--s4)}
}
@media (min-width:1081px) and (max-height:720px){
  [data-skin="ledger-plan"] .lp-herologo{width:min(330px,42vw,calc(21svh * 1.352));
    margin-bottom:10px}
  [data-skin="ledger-plan"] .lp-hero h1{font-size:clamp(30px,3.6vw,44px)}
  [data-skin="ledger-plan"] .lp-hero .gf-intro-copy{font-size:16px;margin-top:10px}
  [data-skin="ledger-plan"] .lp-hero .gf-intro-actions{margin-top:var(--s3)}
  [data-skin="ledger-plan"] .lp-hero .gf-button{min-height:50px}
}
@media (max-width:560px){
  .lp-getapp{padding-top:var(--s5);padding-bottom:var(--s5)}
  .lp-getapp-lede{margin-bottom:var(--s4)}
}

/* ── Tanveer's Canva pass on the homepage (28 Sep 2026) ───────────────────
   Headlines, ledes, the flow lines and the app section are set in Poppins:
   bold headlines with the key word in green, the hero's second line in
   italic. The drawn dashboard cards stay as they are. */
[data-skin="ledger-plan"] .lp-pop{font-family:"Poppins",var(--gf-sans),system-ui,sans-serif;font-variation-settings:normal}
[data-skin="ledger-plan"] .lp-hero h1.lp-pop{font-weight:700;font-size:clamp(30px,2.8vw,44px);line-height:1.15;letter-spacing:-.015em;max-width:none}
[data-skin="ledger-plan"] .lp-hero h1.lp-pop em{font-style:italic;font-weight:400;color:inherit}
[data-skin="ledger-plan"] .gf-intro-copy.lp-pop{font-size:clamp(16px,1.25vw,20px);line-height:1.6;max-width:52ch}
[data-skin="ledger-plan"] .gf-intro-copy.lp-pop strong{font-weight:700}
[data-skin="ledger-plan"] .gf-act h2.lp-pop{font-weight:700;font-size:clamp(28px,2.9vw,44px);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
[data-skin="ledger-plan"] .gf-act h2.lp-pop em,[data-skin="ledger-plan"] .lp-getapp h2.lp-pop em{font-style:normal;font-weight:700;color:#006838}
[data-skin="ledger-plan"] .gf-act-lede.lp-pop{font-size:clamp(16px,1.2vw,19px);line-height:1.55;max-width:42ch}
[data-skin="ledger-plan"] .gf-act-lede.lp-pop em{font-style:italic;color:inherit}
[data-skin="ledger-plan"] .lp-act-recognised{margin:var(--s3) 0 0;max-width:40ch;color:var(--lp-gold);
  font-size:clamp(16px,1.2vw,19px);line-height:1.5}
[data-skin="ledger-plan"] .gf-flow.lp-pop li{font:600 clamp(19px,1.6vw,24px)/1.2 "Poppins",var(--gf-sans),sans-serif;letter-spacing:-.01em}
[data-skin="ledger-plan"] .gf-flow.lp-pop li:not(:last-child)::after{content:"•";font:inherit;opacity:1}
/* bigger text on the demo and download buttons */
[data-skin="ledger-plan"] .lp-hero .gf-button,[data-skin="ledger-plan"] .gf-act .gf-button,
[data-skin="ledger-plan"] .gf-act .gf-text-link{font-size:13px}
/* the ELA badge sits beside the early learning headline */
[data-skin="ledger-plan"] .lp-act-ela{display:block;width:clamp(104px,10vw,168px);height:auto;margin:var(--s3) 0 0}
@media(min-width:1081px){
  [data-skin="ledger-plan"] #centres .gf-hold{position:relative}
  [data-skin="ledger-plan"] .lp-act-ela{position:absolute;top:0;right:0;margin:0}
  [data-skin="ledger-plan"] #centres h2{max-width:calc(100% - clamp(104px,10vw,168px) - 24px)}
  [data-skin="ledger-plan"] #centres .lp-act-recognised{grid-column:1}
}
/* a caption with only its label (workplace dashboard) has no divider */
[data-skin="ledger-plan"] .gf-shot figcaption span:only-child{border-right:0;padding-right:0}
/* app section */
[data-skin="ledger-plan"] .lp-getapp .gf-eyebrow.lp-pop{font:400 15px/1.4 "Poppins",sans-serif;letter-spacing:.04em;text-transform:uppercase}
[data-skin="ledger-plan"] .lp-getapp h2.lp-pop{font-weight:700;font-size:clamp(28px,3vw,44px);line-height:1.15;letter-spacing:-.02em}
[data-skin="ledger-plan"] .lp-getapp-lede.lp-pop{font-size:clamp(16px,1.2vw,18px);margin-bottom:var(--s4)}
[data-skin="ledger-plan"] .lp-noorg.lp-pop{max-width:none;font-size:clamp(15px,1.1vw,17px);opacity:.9;text-align:center}
[data-skin="ledger-plan"] .lp-noorg.lp-pop a{color:inherit}
/* the demo button and the "More for…" link sit side by side, as drawn, where
   the copy column is wide enough; narrower screens put the link underneath */
@media(min-width:1300px){
  [data-skin="ledger-plan"] .gf-act .gf-actions{flex-wrap:nowrap;gap:var(--s4)}
  [data-skin="ledger-plan"] .gf-act .gf-button{min-width:0;gap:var(--s4);flex:none;white-space:nowrap}
  [data-skin="ledger-plan"] .gf-act .gf-text-link{white-space:nowrap}
}
@media(min-width:1081px){
  /* wider copy column so the button and link fit beside each other */
  [data-skin="ledger-plan"] .gf-act .gf-hold{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
}

/* ── Audience and About pages in Poppins (28 Sep 2026) ─────────────────── */
[data-skin] .lp-page h1.lp-pop,.lp-page h1.lp-pop{font-family:"Poppins",sans-serif;font-weight:700;letter-spacing:-.02em;
  line-height:1.12;font-size:clamp(34px,4vw,56px);max-width:22ch}
.lp-page h1.lp-pop em{font-style:normal;font-weight:700;color:#006838}
.lp-page .lp-lede.lp-pop{font-family:"Poppins",sans-serif}
.lp-page .lp-lede.lp-pop strong{font-weight:600}
/* Schools: two stacked blocks, copy left and a picture or card right */
.lp-split{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--gf-line)}
.lp-split h2.lp-caps{margin:0 0 var(--s4);font:700 clamp(18px,1.6vw,23px)/1.3 "Poppins",sans-serif;
  letter-spacing:.01em;text-transform:uppercase;color:#006838;max-width:36ch}
.lp-split .lp-howto{margin:0 0 var(--s3);font:700 clamp(20px,2vw,28px)/1.2 "Poppins",sans-serif;
  text-transform:uppercase;color:#7cb342}
.lp-steps-list{margin:0 0 var(--s5);padding:0;list-style:none;display:grid;gap:var(--s4)}
.lp-steps-list h4{margin:0 0 4px;font:700 15px/1.3 "Poppins",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.lp-steps-list p{margin:0;max-width:62ch;line-height:1.55;font-family:"Poppins",sans-serif;font-size:15px;opacity:.85}
.lp-steps-list strong{color:#006838}
.lp-split-media{margin:0}
.lp-split-media img{display:block;width:100%;height:auto}
.lp-operator h2.lp-caps{margin-bottom:var(--s3)}
.lp-operator p{margin:0;padding:clamp(24px,2.6vw,40px);border-radius:32px;background:#548235;color:#fff;
  font-size:clamp(16px,1.2vw,19px);line-height:1.5;text-align:center}
@media(max-width:900px){.lp-split{grid-template-columns:1fr}}
/* Organisations: a short heading under each audience */
.lp-audiences h3{margin:0 0 10px;font:600 17px/1.35 "Poppins",sans-serif;color:#006838}
.lp-audiences p + p{margin-top:10px}
.lp-demo-row{margin-top:var(--s5)}
/* About */
.lp-about-body{max-width:62ch}
.lp-about-body p{margin:0 0 var(--s3);font-family:"Poppins",sans-serif;font-size:clamp(16px,1.15vw,18px);line-height:1.7;opacity:.86}

/* ── 29 Sep 2026 ─────────────────────────────────────────────────────────
   No dash before the section labels on any page (the homepage already had
   none). */
[data-skin="ledger-plan"] .gf-eyebrow::before{content:none;display:none}

/* ── the app strip below 1080px (29 Sep 2026) ────────────────────────────
   Phones, landscape phones and tablets all get the same strip: the app
   screen itself (app bar, "My hubs", the hub cards) at phone width, centred,
   and only as tall as its cards - no empty screen under one or two hubs, no
   cards blown up to tablet width or cut off. The stage label is dropped: it
   was clipped on phones and every section names itself anyway. */
@media (max-width:1080px){
  :root:has([data-skin="ledger-plan"]){--rail-h:clamp(190px,36svh,360px)}
  [data-skin="ledger-plan"] .gf-growth{height:auto;max-height:var(--rail-h);
    padding:10px clamp(14px,4vw,24px) 12px;justify-content:center;align-items:flex-start}
  [data-skin="ledger-plan"] .gf-stage-block{display:none}
  [data-skin="ledger-plan"] .gf-drawing-wrap{flex:0 1 440px;width:100%;max-width:440px;
    margin-inline:auto;padding-bottom:0;align-self:flex-start}
  [data-skin="ledger-plan"] .ph-frame,[data-skin="ledger-plan"] .ph-shell{height:auto;width:100%}
  [data-skin="ledger-plan"] .ph-screen{height:auto;justify-content:flex-start;gap:2cqw;
    padding:3cqw 3.6cqw 3.6cqw;background:#fffdf7;border:1px solid var(--gf-line);border-radius:5cqw;
    box-shadow:0 10px 24px -18px rgba(19,35,24,.45)}
  [data-skin="ledger-plan"] .ph-appbar{display:flex;align-items:center;justify-content:space-between}
  [data-skin="ledger-plan"] .ph-logo{height:8cqw;width:auto}
  [data-skin="ledger-plan"] .ph-avatar-me{width:7cqw;height:7cqw;font-size:3cqw}
  [data-skin="ledger-plan"] .ph-sectionhead{font-size:2.6cqw}
  [data-skin="ledger-plan"] .ph-count{min-width:4.2cqw;height:4.2cqw;font-size:2.4cqw}
  [data-skin="ledger-plan"] .ph-cards{gap:1.8cqw}
  [data-skin="ledger-plan"] .ph-who strong{font-size:3.6cqw}
  [data-skin="ledger-plan"] .ph-slot:not(.is-open) .ph-who strong{font-size:3.2cqw}
  [data-skin="ledger-plan"] .ph-who em{font-size:2.5cqw}
  [data-skin="ledger-plan"] .ph-ava{width:7.4cqw;height:7.4cqw}
  [data-skin="ledger-plan"] .ph-btn{font-size:2.4cqw;padding:2.2cqw 0}
  [data-skin="ledger-plan"] .ph-line{display:none}
}
/* short screens: the app bar goes so all three hubs still fit */
@media (max-width:1080px) and (max-height:820px){
  :root:has([data-skin="ledger-plan"]){--rail-h:clamp(190px,40svh,360px)}
  [data-skin="ledger-plan"] .ph-appbar{display:none}
}
/* landscape phones: a pinned strip would take half of a 390px-tall screen,
   so it scrolls with the page instead */
@media (max-width:1080px) and (max-height:520px){
  :root:has([data-skin="ledger-plan"]){--rail-h:0px}
  [data-skin="ledger-plan"] .gf-growth{position:relative;top:auto;max-height:none}
  [data-skin="ledger-plan"] .gf-act{padding-top:var(--s5)}
}

/* ── countries in the footer (29 Sep 2026): Mauritius, Australia, South Africa ── */
.lp-foot-mid{display:grid;gap:12px;align-content:end}
.lp-flags{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.lp-flags li{display:flex}
.lp-flag{display:block;width:22px;height:22px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(19,35,24,.18)}
.lp-flag svg{display:block;width:100%;height:100%}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}