/* Our promises, on the colour system from home.css. A long passage sits on a white card; the words about harm never sit on colour. */
.vows-band{padding-block:88px}
.vow{align-items:center}
.vow-title{font-size:clamp(34px,4vw,56px);line-height:1.02;max-width:none}
.vow-lead .vow-title{font-size:clamp(38px,5.2vw,72px)}
.vow-card{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.vow-words .vow-card p{color:var(--ink);font-size:18px;line-height:1.5;max-width:none}
.vow-words .vow-card a{color:var(--teal)}
.band-ink .vow-title,.band-purple .vow-title,.band-green .vow-title{color:var(--white)}
/* Proofs: inked, and every Kitchen is green */
.vows-band .screen,.vows-band .paper,.vows-band .kit{border:var(--inked);box-shadow:var(--shadow);border-radius:22px}
.vows-band .screen{background:var(--white)}
.kit{background:var(--green);color:var(--white)}
.kit-top span,.kit-day,.kit-tabs span,.kit-note{color:var(--white)}
.kit-tabs span[aria-current]{color:var(--green)}
/* The silence */
#harm-at-home{padding-block:120px}
.page-hero+.strand{background:var(--yellow)}
.band-purple+.strand{background:var(--purple)}
.strand.to-purple path:first-child{fill:var(--purple)}
@media(max-width:860px){
  .vow{align-items:start}
  .vows-band{padding-block:48px}
  #harm-at-home{padding-block:64px}
}
/* Words inside a proof stay ink, whatever the band's ground */
.vows-band .paper,.vows-band .screen{color:var(--ink)}
.band-green .paper p,.band-green .paper b,.band-purple .screen p,.band-green .screen p,.band-ink .paper p{color:var(--ink)}
.vows-band .paper .proof-note,.vows-band .screen .screen-note,.vows-band .screen .screen-seen,.vows-band .paper .mail-from{color:var(--ink-2)}
.vows-band .screen .screen-dev{color:var(--teal)}
.vows-band .screen .bub-kid{color:var(--white)}
/* A sticky never sits on the label under it */
.vow .screen{margin-top:26px}
.vow .screen>.sticky,.vow:nth-child(2n) .screen>.sticky{top:-34px}
.more-link-inline{white-space:normal}
.kit-tabs{background:#00000026}
/* The one thing we keep from you: still the quietest band, now compact, with one clear passage */
#harm-at-home{padding-block:72px}
.kept-tight{grid-template-columns:200px minmax(0,1fr);gap:24px 56px;align-items:center}
.kept-tight .kept-art{position:relative;max-width:none;padding:0}
.kept-tight .kept-art .art-left{display:block;width:100%;max-width:200px;margin:0}
.kept-tight .kept-art .sticky{position:absolute;top:auto;right:-22px;bottom:18px;max-width:none;padding:5px 12px 7px;font-size:20px;white-space:nowrap;transform:none}
.kept-words{display:flex;flex-direction:column;gap:14px;max-width:820px}
.kept-tight .title{font-size:clamp(34px,4vw,56px);line-height:1.02}
.kept-lead{margin:0;font-size:21px;line-height:1.45;font-weight:700;color:var(--ink)}
.kept-small{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
@media(max-width:860px){
  #harm-at-home{padding-block:40px}
  .kept-tight{grid-template-columns:minmax(0,1fr) 104px;gap:14px}
  .kept-words{display:contents}
  .kept-tight .title{grid-column:1;grid-row:1;align-self:center;font-size:clamp(30px,8vw,44px)}
  .kept-tight .kept-art{grid-column:2;grid-row:1;margin:0}
  .kept-tight .kept-art .sticky{display:none}
  .kept-lead,.kept-small{grid-column:1 / -1}
  .kept-lead{font-size:18px}
}

/* You see every chat: the sentence runs across a green half and a calm half, with nothing boxed but the proofs */
.chats-side{display:flex;flex-direction:column;gap:18px;padding-block:72px;min-width:0}
.chats-side .vow-title{max-width:none;font-size:clamp(34px,3.7vw,54px);line-height:1.04}
.band-green .vow-title{color:var(--white)}
.band-paper.chats-side .vow-title{color:var(--ink)}
.chats-say{margin:0;font-size:18px;line-height:1.5;font-weight:700}
.band-green .chats-say{color:var(--white)}
.band-paper .chats-say{color:var(--ink)}
.chats-say.chats-small{margin-top:12px;font-size:15px;font-weight:600;opacity:.9}
.chats-side .kit,.chats-side .paper{margin:6px 0 0;border:var(--inked);box-shadow:var(--shadow);border-radius:22px}
.chats-side .kit-day{display:none}
.chats-side .paper.proof{padding:16px 22px 18px;background:var(--white);transform:none;animation:none}
.chats-side .paper:before{display:none}
.chats-side .paper p{color:var(--ink)}
.chats-side .paper .proof-note,.chats-side .paper .mail-from{color:var(--ink-2)}
.chats-side .paper-label{margin:0 0 4px;font-size:21px;line-height:1.1}
.chats-side .mail{gap:4px}
.chats-side .mail p{font-size:15px;line-height:1.35}
.chats-side .mail .mail-subject{font-size:19px!important;line-height:1.2}
.chats-side .mail-button{margin-top:8px;padding:7px 14px;font-size:14px}
.chats-side .proof-note{margin:10px 0 0;padding-top:8px;font-size:14px}
.chats-side .sticky{top:-14px;right:-10px;left:auto;max-width:none;padding:4px 10px 6px;font-size:18px;line-height:1.1;white-space:nowrap;transform:none}
.chats-next{margin:0;font-size:17px;font-weight:800;color:var(--ink)}
.chats-next a{color:var(--teal);text-underline-offset:4px}
.split-chats>.strand{display:none;background:var(--green)}
.split-chats+.strand{background:linear-gradient(90deg,var(--green) 50%,var(--paper) 50%)}
@media(max-width:960px){
  .split-chats>.strand{display:block}
  .split-chats+.strand{background:var(--paper)}
  .strand.to-chats path:first-child{fill:var(--green)}
  .chats-side{padding-block:44px}
}
@media(max-width:560px){
  .chats-side .sticky{position:static;display:inline-block;margin:0 0 8px;white-space:normal}
  .chats-say{font-size:17px}
}

/* Some magic: a night full of stars, Noodle with the wand, and the words straight on purple */
.magic-band{position:relative;overflow:clip;background:var(--purple)}
.magic-band .wrap{position:relative;z-index:1}
.magic-band .vow{align-items:center;gap:32px 64px}
.magic-band .vow-title{font-size:clamp(40px,5vw,72px)}
.magic-say p{margin:0;max-width:30em;color:var(--white);font-size:20px;line-height:1.5;font-weight:700}
.magic-say .setting{color:var(--ink)}
.magic-art{display:block;width:min(100%,400px);height:auto;margin-top:12px}
.magic-band .screen{transform:rotate(1.2deg)}
.magic-sky{position:absolute;inset:0;pointer-events:none}
.magic-sky i{position:absolute;width:var(--s,18px);height:var(--s,18px);background:var(--yellow);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle var(--t,3.2s) ease-in-out var(--d,0s) infinite}
.magic-sky i:nth-child(1){left:4%;top:12%;--s:26px;--d:.2s}
.magic-sky i:nth-child(2){left:18%;top:6%;--s:14px;--d:1.4s;--t:2.6s}
.magic-sky i:nth-child(3){left:44%;top:10%;--s:20px;--d:.8s}
.magic-sky i:nth-child(4){left:52%;top:30%;--s:12px;--d:2s;--t:2.4s}
.magic-sky i:nth-child(5){left:48%;top:62%;--s:24px;--d:.4s;--t:3.6s}
.magic-sky i:nth-child(6){left:53%;top:86%;--s:14px;--d:1.8s}
.magic-sky i:nth-child(7){left:96%;top:9%;--s:22px;--d:1.1s;--t:2.8s}
.magic-sky i:nth-child(8){left:91%;top:92%;--s:18px;--d:.6s}
.magic-sky i:nth-child(9){left:3%;top:52%;--s:14px;--d:2.3s;--t:2.6s}
.magic-sky i:nth-child(10){left:2%;top:90%;--s:20px;--d:1.2s}
.magic-sky i:nth-child(11){left:36%;top:92%;--s:12px;--d:.1s;--t:2.4s}
.magic-sky i:nth-child(12){left:78%;top:5%;--s:12px;--d:1.6s}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media(prefers-reduced-motion:reduce){.magic-sky i{animation:none}}
@media(max-width:860px){
  .magic-band .screen{transform:none}
  .magic-art{width:min(80%,300px);margin-inline:auto}
  .magic-say p{font-size:18px}
  .magic-sky i:nth-child(n+7){display:none}
  .magic-sky i:nth-child(4),.magic-sky i:nth-child(5){left:90%}
}
.magic-sky i:nth-child(1){left:2%}
@media(max-width:860px){
  .magic-sky i:nth-child(n+4){display:none}
  .magic-sky i:nth-child(1){left:90%;top:3%}
  .magic-sky i:nth-child(2){left:4%;top:33%}
  .magic-sky i:nth-child(3){left:90%;top:49%}
}

/* Some rules: the words straight on ink, the firm line leading without shouting */
.rules-say{display:flex;flex-direction:column;gap:12px}
.vow-words .rules-say p{margin:0;max-width:34em;color:#d7dbe3;font-size:18px;line-height:1.5;font-weight:600}
.vow-words .rules-say .vow-strong{color:var(--white)!important;font-size:21px;line-height:1.3}
.vow-words .rules-say a{color:var(--yellow)}

/* Every Sunday: the email arriving in an inbox */
.inbox{margin:0;background:var(--white);color:var(--ink);border:var(--inked);border-radius:22px;box-shadow:var(--shadow);overflow:clip}
.inbox-top{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--yellow);border-bottom:var(--inked);font-family:var(--display);font-size:20px}
.inbox-count{display:grid;place-items:center;min-width:24px;height:24px;margin-left:auto;padding:0 6px;border-radius:999px;background:var(--tomato-deep);color:var(--white);font-family:var(--body);font-weight:800;font-size:14px}
.inbox-row{display:grid;grid-template-columns:10px auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 16px;background:#fff4cc;border-bottom:2px solid var(--ink);font-size:15px}
.inbox-row span:nth-of-type(2){overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2)}
.inbox-row time{font-size:14px;font-weight:800;color:var(--ink-2)}
.inbox-dot{width:10px;height:10px;border-radius:50%;background:var(--teal)}
.inbox-open{padding:16px 20px 18px}
.inbox-open .proof-note{margin:12px 0 0}
@media(max-width:560px){
  .inbox-row{grid-template-columns:10px minmax(0,1fr) auto}
  .inbox-row span:nth-of-type(2){display:none}
}

/* Private by design: a shelf of tins, one for each family, with yours picked out */
.private-band{padding-block:72px 64px}
.private-wrap{display:flex;flex-direction:column;gap:28px}
.private-head{display:flex;flex-direction:column;gap:10px}
.private-head .title{font-size:clamp(40px,5vw,72px);line-height:1}
.private-head .trust-store{margin:0;max-width:52em;color:var(--ink);font-size:19px;line-height:1.5;font-weight:700}
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,.8fr);gap:clamp(8px,2vw,28px);align-items:end;margin-top:28px;padding:0 clamp(8px,2vw,28px);border-bottom:14px solid #a9683a;border-radius:0 0 6px 6px}
.tin{position:relative;height:clamp(76px,10vw,150px);margin-bottom:-1px;background:var(--crumb);color:#b89f84;border:3px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0}
.tin-lid{position:absolute;left:-7%;right:-7%;top:-3px;height:clamp(14px,1.8vw,24px);background:#e6c7aa;border:3px solid var(--ink);border-radius:6px}
.tin-lock{position:absolute;left:50%;top:52%;width:clamp(18px,2.6vw,38px);height:auto;transform:translate(-50%,-50%)}
.tin-yours{height:clamp(96px,13vw,190px);background:var(--tomato-deep);color:var(--yellow)}
.tin-yours .tin-lid{background:var(--tomato)}
.tin-label{position:absolute;left:50%;bottom:calc(100% + 8px);font-family:var(--hand);font-size:clamp(17px,1.9vw,27px);line-height:1;white-space:nowrap;color:var(--tomato-deep);transform:translateX(-50%) rotate(-2deg)}
.shelf-noodle{display:block;width:100%;height:auto;max-height:clamp(100px,14vw,210px);object-fit:contain;object-position:bottom}
.never-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.5vw,36px);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:860px){
  .private-band{padding-block:40px}
  .never-row,  .private-head .trust-store{font-size:18px}
  .tin{border-width:2px}
  .tin-lid{border-width:2px;top:-2px}
}

/* Every question is checked: the words on teal, the chat beside them, and the five steps as one noodle line */
.vows-lead{padding-block:64px 72px}
.vow-lead{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 64px;align-items:center}
.vow-lead .vow-words{gap:16px}
.vows-lead .vow-words .lead-say{margin:0;max-width:34em;color:var(--white);font-size:20px;line-height:1.45;font-weight:700}
.vow-lead .screen{margin-top:0;transform:rotate(1deg)}
.vow-lead>.steps-line{grid-column:1 / -1;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;margin:20px 0 0}
.vow-lead>.steps-line::before{content:"";position:absolute;left:24px;right:0;top:20px;height:8px;background:var(--noodle);border-radius:999px}
.vow-lead>.steps-line li{position:relative;padding:60px 0 0;font-size:16px;line-height:1.35;color:var(--white)}
.vow-lead>.steps-line li:before{left:0;top:0;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);color:var(--ink);font-size:24px;line-height:1}
.vow-lead>.steps-line b{display:block;margin-bottom:4px;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.12;letter-spacing:-.015em;color:var(--white)}
.vow-lead>.steps-note{grid-column:1 / -1;margin:0;color:var(--on-teal);font-size:16px;line-height:1.45}
@media(max-width:1000px){
  .vow-lead>.steps-line{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:8px}
  .vow-lead>.steps-line::before{left:20px;right:auto;top:8px;bottom:8px;width:8px;height:auto}
  .vow-lead>.steps-line li{padding:4px 0 0 64px;min-height:48px}
}
@media(max-width:860px){
  .vows-lead{padding-block:40px 48px}
  .vow-lead .screen{transform:none;margin-top:0}
  .vows-lead .vow-words .lead-say{font-size:18px}
}
@media(max-width:860px){
  .vow-lead{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1000px){
  .vow-lead>.steps-line::before{bottom:48px}
}
/* Round 26 crit: two paper bands now meet without a strand, so the second doesn't double the padding; the Kitchen on ink casts a yellow shadow, as cards on ink do on Home and About */
.vows-band.band-paper+.private-band{padding-top:0}
.band-ink .kit{box-shadow:6px 6px 0 var(--yellow)}
@media(max-width:600px){.never-row{grid-template-columns:minmax(0,1fr);gap:10px}}
/* Tomato means bad: "Your family" is the one teal tin, Noodle's colour, with its yellow lock */
.tin-yours{background:var(--teal);color:var(--yellow)}
.tin-yours .tin-lid{background:var(--teal-deep)}
.tin-label{color:var(--teal)}

/* Round 27, direction A (see home.css). The signature band is teal "Every question is checked" */
@media(min-width:961px){
  .split-chats{background:var(--paper)}
  .to-chats path[fill^="url"]{fill:var(--paper)}
  .chats-side.split-card :is(.vow-title,.vow-title a,.chats-say){color:var(--ink)!important}
  .vows-band.band-ink,.magic-band{background:var(--paper)}
  .vows-band.band-ink :is(.vow-title,.vow-title a,.vow-strong,.rules-say p,.vow-words>p,.more-link-inline),.magic-band :is(.vow-title,.vow-title a,.acc,.magic-say p){color:var(--ink)!important}
  .split-chats+.strand,#harm-at-home+.strand,.vows-band.band-ink+.strand,.magic-band+.strand{display:none}
}

/* Round 28: the recipe's numbers follow the site's one step style (ink disc, yellow numeral) */
.vow-lead>.steps-line li:before{background:var(--ink);border-color:var(--ink);color:var(--yellow)}

/* No hooks: an app built to keep children on it, beside Noodle waiting to be asked. */
.hooks-vs{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 22px;align-items:stretch}
.hooks-vs .screen{padding:46px 16px 18px;gap:12px;margin-top:44px}
.hooks-vs .sticky{top:-40px;left:10px;right:auto}
.hook-app{background:#f3f1f7;transform:rotate(-2deg)}
.noodle-wait{transform:rotate(1.5deg)}
.sticky-bad{background:var(--tomato);color:#fff}
.hook-top{margin:0;display:flex;justify-content:space-between;align-items:center;font-size:17px}
.hook-bell{position:relative;font-size:20px}
.hook-bell i{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;border-radius:9px;background:#e8344e;color:#fff;font:800 12px/18px var(--body);font-style:normal;text-align:center}
.hook-streak{margin:0;padding:8px 10px;border-radius:12px;background:#ffe2c4;color:#a2400f;font-weight:800;font-size:14px;line-height:1.3}
.hook-wallet{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.hook-wallet span{padding:3px 8px;border-radius:999px;background:#fff;border:2px solid #e3dcf0;font-weight:800;font-size:13px;color:var(--ink)}
.hook-xp{margin:0;display:grid;gap:3px}
.hook-xp i{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,#7b6bd8 80%,#e3dcf0 80%)}
.hook-xp small{font-size:12px;font-weight:800;color:#6a5bb8}
.hook-offer{margin:0;display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:12px;background:#fff6c9;border:2px dashed #e0a800;font-weight:800;font-size:14px;color:var(--ink)}
.hook-offer b{padding:2px 8px;border-radius:999px;background:#2fa84f;color:#fff}
.coin{display:inline-block;width:13px;height:13px;margin-right:4px;vertical-align:-2px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe680,#f5b800 60%,#c98a00);box-shadow:inset 0 0 0 1.5px #b07800}
.hook-label{margin:0;font-weight:800;font-size:14px;line-height:1.3;color:var(--ink-2)}
.hook-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hook-tiles i{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#8f7bd8,#e86a9a)}
.hook-tiles i:nth-child(2){background:linear-gradient(135deg,#4fb3d9,#7b6bd8)}
.hook-tiles i:nth-child(3){background:linear-gradient(135deg,#f2a541,#e8344e)}
.hook-tiles i:nth-child(4){background:linear-gradient(135deg,#5cc489,#2a8fbd)}
.hook-cta{margin:auto 0 0;padding:10px;border-radius:999px;background:#e8344e;color:#fff;font-weight:800;font-size:14px;text-align:center;animation:hook-pulse 1.4s ease-in-out infinite}
@keyframes hook-pulse{50%{transform:scale(1.04)}}
.wait-noodle{align-self:center;margin:auto 0 0}
.wait-box{margin:0;padding:10px 14px;border:2px solid var(--crumb);border-radius:999px;color:var(--ink-2);font-weight:700;font-size:15px}
.hooks-note{grid-column:1 / -1;margin:0;font-size:15px;line-height:1.45;color:var(--ink-2);font-weight:700}
@media(max-width:560px){.hooks-vs{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hook-cta{animation:none}}
/* Below 961px this band stays ink (desktop turns it paper above), so its words need light text. */
@media(max-width:960px){.vows-band.band-ink .vow-words>p{color:#d7dbe3}.vows-band.band-ink .vow-words>p a{color:var(--yellow)}}