/* Home, Our promises and How it works, loaded after site.css. Colour blocking from the film (round 17): green is the Kitchen, tomato
   against yellow is the choice, purple and blue are the games, teal is Noodle. The worry demo and the film
   stay on site.css's styles. */

:root{
  --green:#2f7d55; --green-shape:#286c49;
  --tomato-shape:#ab3a19;
  --purple:#7a4f9a; --purple-shape:#6a4487;
  --blue:#2a6ea8; --blue-shape:#245f91;
  --pink:#e86a92;
  --gut:max(24px,calc((100vw - 1320px) / 2 + 24px));
  --inked:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
}
.wrap{max-width:1320px}
.band{padding:112px 0}
.title{font-size:clamp(38px,5.2vw,76px);line-height:1}

/* One voice: one tomato-deep phrase on light grounds, one yellow phrase on dark */
.acc{color:var(--tomato-deep)}.acc-teal{color:var(--teal)}.acc-purple{color:var(--purple)}
.band-green .acc,.band-tomato .acc,.band-purple .acc,.band-blue .acc,.band-teal .acc,.band-ink .acc{color:var(--yellow)}

/* Grounds */
.band-green,.band-tomato,.band-purple,.band-blue{color:var(--white)}
.band-green{background:var(--green)}
.band-tomato{background:var(--tomato-deep)}
.band-purple{background:var(--purple)}
.band-blue{background:var(--blue)}
.band-green a.deep:after,.band-tomato a.deep:after,.band-purple a.deep:after,.band-blue a.deep:after{color:var(--yellow)}
.band-green :focus-visible,.band-tomato :focus-visible,.band-purple :focus-visible,.band-blue :focus-visible{outline-color:var(--yellow)}
/* Shapes: flat, on saturated grounds only, behind everything */
.has-shape{position:relative;overflow:clip;isolation:isolate}
.has-shape:before{content:"";position:absolute;z-index:-1;pointer-events:none}
.band-green:before{left:-8%;bottom:-30%;width:64%;height:78%;background:var(--green-shape);border-radius:0 160px 0 0;transform:rotate(-7deg)}
.band-tomato:before{right:-12%;top:-18%;width:70%;height:80%;background:var(--tomato-shape);border-radius:0 0 0 180px;transform:rotate(9deg)}
.band-purple:before{left:14%;top:-16%;width:96%;height:66%;background:var(--purple-shape);border-radius:0 0 180px 0;transform:rotate(-8deg)}
.band-blue:before{right:-30%;top:-10%;width:90%;height:58%;background:var(--blue-shape);border-radius:0 0 0 160px;transform:rotate(10deg)}

/* Splits: two grounds, cut hard, no gap. The outer edge lines up with .wrap */
.split{display:grid;grid-template-columns:minmax(0,var(--a,1fr)) minmax(0,var(--b,1fr))}
.split-side{padding:104px 56px;min-width:0}
.split-side:first-child{padding-left:var(--gut)}
.split-side:last-child{padding-right:var(--gut)}

/* Inked card: where words have to sit on colour, or a product is shown */
.card{background:var(--white);color:var(--ink);border:var(--inked);border-radius:22px;box-shadow:var(--shadow);padding:22px 26px}
.card p{margin:0;color:var(--ink);font-size:19px;line-height:1.55}
.card .lede{color:var(--ink);font-size:clamp(18px,1.45vw,20px)}

/* 1. Hero, from B */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding-block:0;align-items:stretch}
.hero>.stack{padding:16px 56px 64px var(--gut)}
.hero h1{font-size:clamp(46px,6vw,88px);line-height:.96}
.hero-card{display:flex;flex-direction:column;gap:16px;border-radius:18px}
.free-tag{display:flex;align-items:center;gap:14px;max-width:none}
.hero .free-word{flex:none;margin:0;padding:6px 14px 8px;border-radius:6px;background:var(--tomato-deep);color:var(--white);font-size:28px}
.hero .free-tag{font-size:15px;line-height:1.35;color:var(--ink)}
.hero .free-tag>span b{font-family:var(--body);font-size:16px;font-weight:800;letter-spacing:0;white-space:normal;line-height:1.35}
.hero .free-tag>span b:after{margin-top:0}

.hero>.strand{display:none}
.hero-side{display:flex;align-items:center;justify-content:center;background:var(--yellow);padding:24px var(--gut) 24px 56px}
.hero-scene .device-bar-kitchen,.hero-scene .kitchen-read{background:var(--green)}

/* The strands: production's, between every band. Into and out of a split they carry both colours */
.band-green+.strand{background:var(--green)}
.hero+.strand{background:var(--yellow)}
.split-choice+.strand{background:linear-gradient(90deg,var(--tomato-deep) 63.2%,var(--yellow) 63.2%)}
.games-band+.strand{background:linear-gradient(90deg,var(--purple) 50%,var(--blue) 50%)}
.strand.to-green path:first-child{fill:var(--green)}

/* 3. Read every chat: green */
.see-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:40px 64px;align-items:center}
.see-hand{margin:0;font-size:34px;line-height:1;color:var(--white);transform:rotate(-1.5deg);transform-origin:left}
.see-card{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.see-card .artefact-note{padding-top:14px;border-top:2px dashed var(--crumb);font-size:16px;line-height:1.5;color:var(--ink-2)}
.see-scene{grid-template-columns:360px minmax(0,1fr);gap:0 36px}
.see-phone{grid-column:1;box-shadow:var(--shadow);transform:rotate(-1deg)}
.see-phone .device-bar-kitchen{background:var(--green)}
.see-note{width:auto;max-width:230px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:26px}
.see-note-2,.see-note-3{grid-column:2;grid-row:1;justify-self:start;margin:0}
.see-note-2{align-self:center;margin-top:-90px;transform:rotate(3deg)}
.see-note-3{align-self:end;margin-bottom:40px;transform:rotate(-2deg)}
.see-arrow{display:none}

/* 5. The Children's Code: six white cards, heads as the film */
.code-grid{align-items:stretch;gap:24px}
.band-paper .code-item{padding:0;gap:0;background:var(--white);border:var(--inked);border-radius:20px;box-shadow:var(--shadow);overflow:clip}
.code-item h3{padding:16px 20px 0;font-size:22px;line-height:1.15;color:var(--ink)}
.code-item h3:before{content:none}
.code-item p{padding:16px 20px 20px;line-height:1.5}
.code-head{grid-template-columns:minmax(0,1fr) 280px}

/* 6. Made for 6 to 15: tomato against yellow */
.split-choice{--a:1.72fr;--b:1fr}
.split-choice>.strand{display:none;background:var(--tomato-deep)}
.band-tomato .title{color:var(--white)}
.band-tomato .lede{color:var(--white);font-size:clamp(22px,1.8vw,26px);font-weight:800;line-height:1.35}
.stamps{gap:28px 36px}
.stamp{padding:0;border:0;border-radius:0;background:none;color:var(--white);gap:6px}
.stamp-who{font-size:18px;letter-spacing:0;text-transform:none}
.stamp-age{font-size:clamp(76px,7.4vw,112px);color:var(--white)}
.stamp-note{margin-top:6px;font-size:18px;line-height:1.45;font-weight:700;color:var(--white)}
.band-tomato .stamp-note a{color:var(--white);text-decoration-thickness:2px}
.band-tomato .stamp-note a:hover{color:var(--yellow)}
.band-tomato .table-note{font-size:18px;color:var(--white)}
.made-for{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:36px}
.plate{width:min(100%,320px);height:auto;aspect-ratio:1;padding:28px;background:var(--paper);border:var(--inked);border-radius:50%;box-shadow:var(--shadow);object-fit:contain}
.made-title{font-size:clamp(40px,4.4vw,64px);line-height:1}

/* 8. The games: one card on the purple and blue split */
.games-band{background:linear-gradient(90deg,var(--purple) 50%,var(--blue) 50%)}
.strand+.band.games-band,.band.games-band:has(+.strand){padding-block:28px}
.games-card{display:grid;grid-template-columns:276px minmax(0,1fr) 276px;gap:36px;align-items:center;padding:28px}
.game-shot{position:relative;overflow:hidden;aspect-ratio:276/536;border:var(--inked);border-radius:26px;background:var(--white)}
.game-shot img{position:absolute;left:0;top:-10%;width:100%;max-width:none;height:auto}
.shot-pal img{top:-8.5%}
.games-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.games-copy .title{font-size:clamp(38px,4.1vw,60px);line-height:1.02}
.in-purple{color:var(--purple)}.in-blue{color:var(--blue)}
.games-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.games-two:has(>:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tag-teal{background:var(--teal)}
.games-open{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--ink)}
.games-open b{color:var(--teal)}
.card .games-lede{font-size:19px;font-weight:700;line-height:1.45}
.game-tag{display:inline-block;margin:0 0 10px;padding:5px 14px 7px;border-radius:999px;color:var(--white);font-size:19px;line-height:1.1}
.tag-purple{background:var(--purple)}
.tag-blue{background:var(--blue)}
.card .games-two p{font-size:16px;line-height:1.5}
.say{padding:1px 5px;border-radius:5px;background:#d9efdd;color:var(--ink);font-weight:800;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.say-vague{background:#ffe3d3}
.card .games-two .games-note{margin-top:8px;font-family:var(--hand);font-size:21px;line-height:1.15;color:var(--tomato-deep)}
.games-proof{display:grid;gap:8px;padding:14px 16px 16px;border-radius:16px;background:#fff4cc}
.card .games-proof p{font-size:15px;line-height:1.5}
.card .games-proof .games-proof-head{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.01em}
.games-link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:48px;color:var(--teal);font-weight:800;font-size:17px;line-height:1.25}
.games-link svg{flex:none}
/* 9. One Noodle: one row */
.strand+.band.grows-row,.band.grows-row:has(+.strand){padding-block:20px}
.grows-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
.grows-row .title{font-size:clamp(34px,3.5vw,50px);line-height:1.04}
.grows-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:end;text-align:center}
.grows-three .bowl{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;padding:0;background:none}
.grows-three .age-art{height:auto;padding:12px;background:var(--paper);border-radius:50%;aspect-ratio:1;object-fit:contain}
.grows-three .bowl:nth-child(1) .age-art{width:96px}
.grows-three .bowl:nth-child(2) .age-art{width:116px}
.grows-three .bowl:nth-child(3) .age-art{width:136px}
.grows-three b{font-size:22px;color:var(--white)}
.grows-three p{margin:0;font-size:15px;line-height:1.35;color:var(--on-teal)}
/* 11. Which AI: the answer, the four models, then one clear way to see more */
.strand+.band.hood-row,.band.hood-row:has(+.strand){padding-block:24px}
.hood-line{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px 40px;align-items:center}
.hood-say{grid-column:1;grid-row:1}
.hood-cta{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 22px;background:var(--yellow);border-radius:20px;color:var(--ink)}
.hood-cta p{margin:0;font-size:17px;line-height:1.45;font-weight:600;color:var(--ink)}
.hood-cta b{text-wrap:balance;display:block;margin-bottom:4px;font-family:var(--display);font-weight:800;font-size:21px;line-height:1.15;letter-spacing:-.01em}
.hood-models-wrap{grid-column:1 / -1;grid-row:2}
.hood-row .title{font-size:clamp(34px,3.5vw,50px)}
.hood-row .lede{font-size:19px;line-height:1.45}
.hood-models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.hood-models li{display:flex;flex-direction:column;gap:2px;padding:12px 18px 14px;background:var(--paper);border-radius:16px;box-shadow:5px 5px 0 var(--noodle);color:var(--ink)}
.m-job{font-family:var(--hand);font-size:24px;line-height:1.05;color:var(--tomato-deep)}
.hood-models b{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.015em}
.m-by{font-size:14px;font-weight:700;color:var(--ink-2)}
.hood-foot{margin:14px 0 0;font-size:15px;font-weight:700;color:#d7dbe3}

/* 12. Join: yellow, the big cheering Noodle */
.closer{position:relative;overflow:clip;padding-block:96px}
.closer-grid{grid-template-columns:minmax(0,1fr) 440px;gap:40px 72px}
.closer-grid>.stack{grid-column:1;grid-row:1}
.closer-art{grid-column:2;grid-row:1;width:100%;height:auto;padding:36px;aspect-ratio:1!important;background:var(--paper);border-radius:50%;object-fit:contain}
.closer-title{font-size:clamp(46px,6vw,88px);line-height:.96}
.closer-card{display:flex;flex-direction:column;gap:14px}
.closer .steps-lead{font-size:28px;line-height:1;color:var(--ink)}
.closer .next-steps{gap:0}
.closer .next-steps li{background:none;border-radius:0;padding:4px 20px 4px 0}
.closer .next-steps li+li{padding-left:20px;border-left:2px dashed var(--crumb)}
.closer-small-ink{font-size:18px;color:var(--on-yellow-muted)}
.closer .actions .btn{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}

/* Tablet and down: bands stack in the same order, first side on top, no gap */
@media(max-width:1180px){
  .stamps{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:1100px){
  .see-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:960px){
  .hero>.strand{display:block}
  .split-choice>.strand{display:block}
  .hero-side{padding:16px var(--gut) 32px;background:var(--teal)}
  .hero+.strand{background:var(--teal)}
  .split-choice+.strand{background:var(--yellow)}
  .strand.to-choice path:first-child{fill:var(--tomato-deep)}
  .band{padding:72px 0}
  .split,.split-choice{grid-template-columns:minmax(0,1fr)}
  .split-side,.split-side:first-child,.split-side:last-child{padding:72px var(--gut)}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero>.stack{padding:12px var(--gut) 48px}
  .stamps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .made-for{flex-direction:row;align-items:center}
  .plate{width:200px;flex:none;padding:18px}
  .closer-grid{grid-template-columns:minmax(0,1fr)}
  .closer-grid>.stack,.closer-art{grid-column:1;grid-row:auto}
  .closer-art{width:min(100%,320px);padding:24px;justify-self:center}
  .see-scene{grid-template-columns:360px minmax(0,1fr)}
}
@media(max-width:860px){
  .see-scene{display:flex;flex-direction:column;gap:28px}
  .see-phone{transform:none}
  .see-note,.see-note-2,.see-note-3{margin:0;font-size:24px}
}
@media(max-width:760px){
  .band{padding:48px 0}
  .split-side,.split-side:first-child,.split-side:last-child{padding:48px var(--gut)}
  .card{padding:16px 18px;border-radius:18px;box-shadow:5px 5px 0 var(--ink)}
  .card p{font-size:17px;line-height:1.5}
  .lede,.card .lede{font-size:18px;line-height:1.45}
  .stamps{grid-template-columns:minmax(0,1fr);gap:22px}
  .stamp{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr);column-gap:12px;align-items:start}
  .stamp-who{grid-column:1 / -1}
  .stamp-age{font-size:58px;margin-top:-2px}
  .stamp-note{margin-top:0}
  .code-grid{gap:16px}
  .code-head{grid-template-columns:minmax(0,1fr) 96px;gap:12px}
  .code-head .title{grid-column:1 / -1}
  .code-head{position:relative}
  .code-head>.stack{grid-column:1 / -1}
  .code-art{position:absolute;right:0;top:-8px;width:74px;order:0}
  .code-head .title{padding-right:84px}
  .code-item h3{padding:12px 16px 0;font-size:20px}
  .code-item p{padding:10px 16px 14px;font-size:16px;line-height:1.45}
  .made-for{gap:16px}
  .plate{width:116px;padding:10px}
  .made-title{font-size:34px}
  .closer{padding-block:48px}
  .closer-title{font-size:44px}
  .closer-art{width:200px;padding:16px}
  .closer .next-steps{grid-template-columns:minmax(0,1fr);gap:10px}
  .closer .next-steps li,.closer .next-steps li+li{padding:0;border:0}
  .closer .next-steps li+li{padding-top:10px;border-top:2px dashed var(--crumb)}
  .hood-grid{gap:24px}
  .spec-rows>div{padding:8px 0}
  .see-card{margin-top:10px;gap:10px}
  .see-grid{gap:24px}
  .see-scene{gap:18px}
  .see-card .artefact-note{padding-top:10px;font-size:15px}
  .see-hand{font-size:28px}
}
@media(max-width:560px){
  /* The page budget: device furniture goes before any copy does */
  .band{padding:44px 0}
  .split-side,.split-side:first-child,.split-side:last-child{padding:44px var(--gut)}
  .see-title{display:none}
  .spec-rows>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px}
  .spec-rows dt{font-size:15px}
  .spec-rows dd b{font-size:17px}
  .closer-art{width:170px;padding:14px}
  .closer .next-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px}
  .closer .next-steps li:before{grid-row:span 2;margin:0}
  :root{--gut:20px}
  .wrap{padding-inline:20px}
  .hero>.stack{padding-bottom:36px;gap:18px!important}
  .hero h1{font-size:44px}
  .hero .free-tag{align-items:flex-start;gap:10px}
  .hero .free-word{font-size:22px;padding:4px 10px 6px}
  .see-note,.see-note-2,.see-note-3{max-width:none;width:100%;font-size:22px;padding:8px 14px 10px}
  .see-notes{gap:10px;width:100%}
  .see-phone .device-bar-kitchen{padding-block:10px}
}

/* Review fixes: the rule switch's quiet options measured 4.02:1 on its grey; the film heading lines up with its frame */
.see-seg span{color:var(--ink-2)}
.see-seg .see-seg-on{color:#7a2c05}
@media(max-width:360px){.code-badge b{white-space:normal}}
.film-band .wrap>.stack{max-width:none;margin-inline:0}
/* Production's two link cards, at the foot of the green band: full width, white and inked */
.band-green .link-cards{grid-column:1 / -1;margin-top:16px}
.band-green .link-card,.band-green .link-card:hover{background:var(--white);color:var(--ink);border:var(--inked);box-shadow:var(--shadow)}

/* Round 18 at smaller widths */
@media(max-width:1180px){
  .games-card{grid-template-columns:220px minmax(0,1fr) 220px;gap:24px;padding:20px}
  .games-two{grid-template-columns:minmax(0,1fr);gap:16px}
}
@media(max-width:960px){
  .games-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .games-copy{grid-column:1 / -1;grid-row:1}
  .games-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grows-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hood-line{grid-template-columns:minmax(0,1fr)}
  .hood-say,.hood-cta,.hood-models-wrap{grid-column:1;grid-row:auto}
  .hood-cta{order:3}
}
@media(max-width:560px){
  .strand+.band.games-band,.band.games-band:has(+.strand){padding-block:20px}
  .games-card{gap:18px;padding:18px 16px}
  .games-two{grid-template-columns:minmax(0,1fr)}
  .games-copy .title{font-size:34px}
  .game-shot{border-radius:20px}
  .grows-three{grid-template-columns:minmax(0,1fr);text-align:left;gap:14px}
  .hood-models{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hood-models li{padding:10px 12px 12px}
  .hood-models b{font-size:18px}
  .m-job{font-size:22px}
  .hood-cta .btn{width:100%;justify-content:center}
  .grows-three .bowl{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left}
  .grows-three .age-art{grid-row:span 2;justify-self:center}
  .grows-three .bowl:nth-child(1) .age-art{width:72px}
  .grows-three .bowl:nth-child(2) .age-art{width:84px}
  .grows-three .bowl:nth-child(3) .age-art{width:96px}
  .grows-three b{align-self:end}
  .grows-three p{align-self:start}
}

/* The worry demo on a phone: the chips stay one row and the answer sits under it, so the page holds still */
@media(max-width:760px){
  .worry .worry-chips,.worry[data-touched] .worry-chips{position:relative;flex-direction:row;overflow-x:auto;gap:8px;margin-inline:-20px;padding:4px 20px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:20px}
  .worry .worry-chips::-webkit-scrollbar{display:none}
  .worry .worry-chip,.worry[data-touched] .worry-chip{flex:none;width:230px;margin:0;font-size:14px;scroll-snap-align:start}
  .worry .worry-screen{min-height:440px}
  .worry .worry-kitchen{min-height:400px}
  .worry .worry-bar{display:none}
}
@media(max-width:1100px) and (prefers-reduced-motion:no-preference){
  .worry .worry-screen,.worry .worry-kitchen{animation:worry-in .2s ease-out}
}
@keyframes worry-in{from{opacity:.25}to{opacity:1}}
/* The worry demo's Kitchen is green, as the Kitchen is everywhere else on the site (How it works'
   .hiw-kit): white text, as --on-teal is too faint on green. */
.worry .kit{background:var(--green)}
.worry .kit-top span,.worry .kit-tabs span,.worry .kit-day,.worry .kit-note{color:var(--white)}
.worry .kitchen-read{background:var(--green-shape)}
/* Round 26 crit: the demo's chat card casts the same shadow as every card; on a phone it is as tall as its reply, not 440px (it left ~150px of empty white) */
.worry .worry-screen{box-shadow:6px 6px 0 var(--ink)}
@media(max-width:600px){.worry .worry-screen{min-height:0}}
/* Tomato means bad (Sam, 6 November 2026: "tomato is bad/danger"): the hero's Free badge is teal, like the button beside it */
.hero .free-word{background:var(--teal);color:var(--white)}

/* Round 27, direction A (7 November 2026). Sam: "on a desktop the colour blocking feels OTT… I especially hate the
   sections with a vertical colour divider". Desktop only; mobile keeps its colour blocks. The record is in
   asknoodle-design-trial/round27-desktop-calm/. Every page loading this file follows the same rules:
   - Three loud moments: the hero, one signature band and the closer keep their colour. Other bands go to paper.
   - No two-colour splits: one ground, and the side that held the colour becomes a white card with a line.
   - Offset shadows on buttons only. Strands only where a colour starts or ends. */
@media(min-width:961px){
  main *{box-shadow:none!important}
  main .btn{box-shadow:4px 4px 0 var(--ink)!important}
  .has-shape:before{display:none}
  .split{gap:48px;padding:80px var(--gut);align-items:center}
  .split>.split-side,.split>.split-side:first-child,.split>.split-side:last-child{padding:0}
  .split>.split-card,.split>.split-card:first-child,.split>.split-card:last-child{padding:56px 52px;background:var(--white);border:2px solid var(--ink);border-radius:28px;overflow:clip}

  /* Home: green "Read every chat" is the signature band */
  .split-choice{background:var(--paper)}
  .split-choice .made-for{background:none}
  .split-choice .split-card :is(h2,h2 a,.lede,.stamp-who,.stamp-note,.stamp-note a,.table-note){color:var(--ink)!important}
  .split-choice .split-card :is(.acc,b,strong){color:var(--tomato-deep)!important}
  .strand.to-choice{background:var(--green)}
  .strand.to-choice path:first-of-type{fill:var(--paper)}
  .hood-band,.games-band,.grows-row{background:var(--paper)}
  .hood-band :is(h2,h2 a,.acc,.lede,.hood-say p,.hood-foot),.grows-row :is(h2,h2 a,.lede,.bowl b.h,.bowl p){color:var(--ink)!important}
  .hood-band .m-job{color:var(--teal)!important}
  .film-band .title,.film-words summary{color:var(--teal)!important}
  .hero+.strand,.split-choice+.strand,.hood-band+.strand,#childrens-code+.strand,.games-band+.strand,.grows-row+.strand{display:none}
}

/* Round 28 (7 November 2026): one numbered-step style across the site, the ink disc with a yellow numeral from
   How it works' Getting started. Home's closer, Our promises' recipe and About's beliefs follow it. */
.next-steps li:before{background:var(--ink);color:var(--yellow)}

/* Round 30 crit (7 November 2026): on a phone the games' three columns survived the 560px rule (the :has() rule above
   outranks it), so each description ran nine characters a line. One column under 600px, each pill above its text. */
@media(max-width:600px){
  .games-two,.games-two:has(>:nth-child(3)){grid-template-columns:minmax(0,1fr);gap:18px}
}