/* v24 — source: Chickabiddy Brand Guide, pp. 5–9; design-tokens.json.
   All colour fields use the approved semantic soft surfaces. Existing paper
   artwork supplies texture, while genuine app assets keep their own colours. */
:root {
  --story-ink:#3D2C26;
  --story-muted:#756256;
  --story-paper:#FFFCF7;
  --story-everyday:#F7F3EC;
  --story-sleep:#EEE7F7;
  --story-care:#FCE4D3;
  --story-widgets:#FFF0D6;
  --story-memories:#F2E6F3;
  --story-totals:#E4EEF7;
  --story-supplies:#E1F1E8;
  --story-icloud:#DFF0F0;
}
/* Retain the paper compositions, with quieter, brand-led colour fields.
   Luminosity blending preserves folds/texture without inheriting their hues. */
:root .feature-grid>.feed-card,
:root[data-theme="dark"] .feature-grid>.feed-card {
  display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
  gap:48px;align-items:center;min-height:420px;padding:44px;
  background:var(--story-everyday);color:var(--story-ink);
}
.feed-card::before {
  content:"";position:absolute;inset:0;z-index:-1;
  background:url('assets/paper-v23/everyday-final.webp') center/cover;
  filter:grayscale(1);mix-blend-mode:multiply;opacity:.13;
}
.feed-card .card-copy{padding:0;max-width:310px}
.feed-card .card-copy h3{font-size:3.75rem;line-height:1.04;letter-spacing:-1px;margin-bottom:20px}
.feed-card .card-copy p{font-size:1.13rem;line-height:1.6;max-width:290px;color:var(--story-muted)}
.feed-card .feature-proof{padding:8px 0;transform:rotate(-1deg)}
.care-categories{gap:16px 14px;align-items:stretch}
.care-categories li {
  justify-content:center;gap:8px;padding:16px 7px 14px;min-width:0;
  background:#FFFFFF;border:1px solid #DED2C5;
  border-radius:18px;box-shadow:none;
  font-family:Nunito,sans-serif;font-size:.92rem;font-weight:700;line-height:1.25;
}
.care-categories li:nth-child(2n){transform:translateY(8px)}
.care-categories img{width:72px;height:72px;filter:drop-shadow(0 3px 2px #3D2C2610)}
:root .feature-grid>.sleep-card {
  background-color:var(--story-sleep);
  background-image:linear-gradient(#EEE7F7DE,#EEE7F7DE),url('assets/paper/moonlit-paper-background.webp');
  background-blend-mode:normal;
}
.sleep-card .card-copy h3{color:var(--story-ink)}
.sleep-card .card-copy p{color:var(--story-muted)}
:root .feature-grid>.sharing-card {
  background-color:var(--story-care);
  background-image:linear-gradient(#FCE4D38C,#FCE4D38C),url('assets/paper/care-together-background.webp');
  background-blend-mode:normal,luminosity;
}
:root .feature-grid>.widgets-card {
  background-color:var(--story-widgets);
  background-image:linear-gradient(#FFF0D65C,#FFF0D65C),url('assets/paper/pocket-playground-background.webp');
  background-blend-mode:normal;
}
:root .feature-grid>.photos-card,
:root[data-theme="dark"] .feature-grid>.photos-card {
  background-color:var(--story-memories);
  background-image:linear-gradient(#F2E6F3A6,#F2E6F3A6),url('assets/paper-v23/memories-unique.webp');
  background-blend-mode:normal,luminosity;
  color:var(--story-ink);
}
:root .feature-grid>.chart-card,
:root[data-theme="dark"] .feature-grid>.chart-card {
  background-color:var(--story-totals);
  background-image:linear-gradient(#E4EEF7B3,#E4EEF7B3),url('assets/paper-v22/totals-paper.webp');
  background-blend-mode:normal,luminosity;
  color:var(--story-ink);
}
:root .feature-grid>.inventory-card,
:root[data-theme="dark"] .feature-grid>.inventory-card {
  background:var(--story-supplies);color:var(--story-ink);
}
:root .privacy-panel {
  background-color:var(--story-icloud);
  background-image:url('assets/feature-v28/icloud-flat-background.webp');
  background-blend-mode:normal;
}
.sharing-card .card-copy p,.widgets-card .card-copy p,
.photos-card .card-copy p,.chart-card .card-copy p,
.inventory-card .card-copy p,.privacy-panel p {color:var(--story-muted)}
.sharing-card figcaption,.photos-card figcaption,.chart-card figcaption,
.inventory-card figcaption{color:#5F514B}
.unified-memory{box-shadow:0 15px 28px #3D2C2614}
.chart-metric{background:var(--story-paper);color:var(--story-muted);box-shadow:0 7px 12px #3D2C260B}
.paper-chart{background:#FFFCF7C9}
.chart-name{color:var(--story-ink)}
@media(max-width:1000px) and (min-width:701px){
  :root .feature-grid>.feed-card,:root[data-theme="dark"] .feature-grid>.feed-card{grid-template-columns:minmax(185px,.65fr) minmax(0,1.35fr);gap:24px;padding:32px;min-height:380px}
  .feed-card .card-copy h3{font-size:3rem}
  .feed-card .card-copy p{font-size:1.03rem}
  .care-categories{gap:12px 10px}
  .care-categories img{width:58px;height:58px}
  .care-categories li{padding:14px 4px 12px;font-size:.8rem;border-radius:15px}
}
@media(max-width:700px){
  :root .feature-grid>.feed-card,:root[data-theme="dark"] .feature-grid>.feed-card{display:flex;gap:24px;min-height:0;padding:30px 24px 36px;align-items:stretch}
  .feed-card .card-copy{max-width:none;padding:0}
  .feed-card .card-copy h3{font-size:2.45rem;line-height:1.1;letter-spacing:-.6px;margin-bottom:14px}
  .feed-card .card-copy p{max-width:310px;font-size:1rem}
  .feed-card .feature-proof{padding:0;transform:none}
  .care-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .care-categories li{flex-direction:row;justify-content:flex-start;gap:8px;padding:12px 8px;min-height:78px;font-size:.86rem;border-radius:14px}
  .care-categories li:nth-child(2n){transform:none}
  .care-categories img{width:42px;height:48px;flex:none}
}
@media(max-width:370px){
  :root .feature-grid>.feed-card,:root[data-theme="dark"] .feature-grid>.feed-card{padding:26px 18px 30px;gap:22px}
  .feed-card .card-copy h3{font-size:2.2rem}
  .care-categories{gap:10px}
  .care-categories li{gap:6px;padding:10px 6px;font-size:.78rem;min-height:70px}
  .care-categories img{width:35px;height:42px}
}
@media(forced-colors:active){.feed-card::before{display:none}.care-categories li{border:1px solid CanvasText;box-shadow:none}}
/* Keep every activity label fully legible on the smallest phones. */
@media(max-width:700px){
  .care-categories li{flex-direction:column;justify-content:center;gap:5px;min-height:104px;padding:10px 6px 12px;font-size:.93rem}
  .care-categories img{width:54px;height:54px}
}
@media(max-width:370px){
  .care-categories li{min-height:96px;font-size:.86rem}
  .care-categories img{width:48px;height:48px}
}

/* v29: supplied app capture canvas #F7F3EC (guide #F7F3ED differs by 1 blue
   channel). Flat white raised tiles and warm separators match the capture;
   remove the old grey drop-shadow bands. No overlay changes the canvas. */
.feed-card::before{display:none}
/* v30: an unboxed row of matching Biddy device illustrations. Reversing the
   monochrome artwork keeps the outlines legible on the dark page as well. */
.coming-soon{padding-top:18px;padding-bottom:64px;text-align:center}
.coming-soon h2{font-size:2.35rem;line-height:1.15;letter-spacing:-.45px;margin-bottom:26px}
.coming-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:44px;max-width:600px;list-style:none;padding:0;margin:0 auto}
.coming-devices li{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;color:var(--secondary);font-size:.92rem;font-weight:700;line-height:1.3}
.coming-devices .device-biddy{display:block;width:100%;max-width:176px;height:auto;aspect-ratio:1;object-fit:contain;filter:grayscale(1) invert(var(--signature-reverse))}
@media(max-width:700px){.coming-soon{padding-top:12px;padding-bottom:48px}.coming-soon h2{font-size:2.1rem;margin-bottom:24px}.coming-devices{gap:14px;max-width:420px}.coming-devices li{gap:9px;font-size:.85rem}.coming-devices .device-biddy{max-width:130px}}
@media(max-width:370px){.coming-devices{gap:10px}.coming-devices li{font-size:.78rem}}
.waitlist{max-width:26rem;margin:0 auto 28px}
.waitlist-row{display:flex;gap:8px}
.waitlist input{flex:1;min-width:0;min-height:54px;border:1px solid var(--line);border-radius:99px;padding:0 18px;background:var(--surface);color:var(--cocoa);font:inherit;font-size:1rem;text-align:left}
.waitlist input:focus-visible{outline:3px solid var(--cocoa);outline-offset:3px}
.waitlist .button{flex:none;padding-inline:20px}
.waitlist .button:disabled{opacity:.6;transform:none}
#turnstile-widget{display:flex;justify-content:center;margin-top:12px}
#turnstile-widget:empty{display:none}
.waitlist-consent,.waitlist-status{font-size:.875rem;line-height:1.5;color:var(--secondary);margin:10px 0 0}
@media(max-width:700px){.waitlist{margin-bottom:22px}.waitlist-row{flex-direction:column}.waitlist .button{width:100%}}

/* v32: reserve chart geometry before JS/fonts load. Container sizing replaces
   height writes from ResizeObserver, avoiding layout shift and resize feedback. */
.paper-chart{container-type:inline-size}
#sleep-demo-chart{height:275px}
@container (max-width:379px){#sleep-demo-chart{height:236px}}
/* The rotated decorative hero field must not widen tablet-sized viewports.
   Clip horizontally without creating another scroll container. */
.hero{overflow-x:clip}

/* Legal, support and not-found pages keep the same header, type and colour. */
.legal-body{max-width:40rem;padding-top:12px;padding-bottom:72px}
.legal h1{font-size:clamp(2.6rem,5vw,3.6rem);line-height:1.08;letter-spacing:-1px;margin-bottom:12px}
.legal h2{font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1.2;letter-spacing:-.35px;margin:2.1rem 0 .65rem}
.legal h3{font-size:1.28rem;line-height:1.3;letter-spacing:-.25px;margin:1.35rem 0 .4rem}
.legal p,.legal li{font-size:1.0625rem;line-height:1.7}
.legal .meta{color:var(--secondary);font-size:.95rem;margin-bottom:1.35rem}
.legal ul{margin:0 0 1rem;padding-left:1.2rem}
.legal li+li{margin-top:.4rem}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.legal a:hover{color:var(--action-hover)}
.legal a.button{color:var(--on-action);text-decoration:none}
.legal a.button:hover{color:var(--on-action)}
.contact-todo{margin:1rem 0 0;padding:18px 20px;background:var(--cream);border:1px solid var(--line);border-radius:18px}
.contact-todo p{margin-bottom:.65rem}
.contact-todo p:last-child{margin-bottom:0}
.page-links{margin-top:1.5rem}
.privacy-panel p{text-wrap:pretty}
.privacy-panel a{color:#3D2C26;font-weight:800;text-decoration:underline;text-underline-offset:.18em}
.privacy-panel a:hover{color:#A8441C}
.footer nav{justify-self:end}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:flex-end;align-items:center;margin:0;padding:0;list-style:none;font-size:.9375rem;font-weight:800}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--secondary)}
.footer-links a:hover{color:var(--accent)}
.footer-links a[aria-current="page"]{color:var(--cocoa)}
@media(max-width:700px){
  .legal-body{padding-bottom:56px}
  .footer nav{justify-self:start}
  .footer-links{justify-content:flex-start}
}