/* DayFlo Washed Horizon brochureware — combined positioning control shell. */
@layer tokens {
  .washed-page {
    --wh-ink:#0B1320;
    --wh-slate:#1E293B;
    --wh-primary:#2563EB;
    --wh-teal:#0F766E;
    --wh-ocean:color-mix(in srgb,var(--wh-teal) 72%,white);
    --wh-seaglass:color-mix(in srgb,var(--wh-teal) 42%,white);
    --wh-sunrise:#E9846A;
    --wh-canvas:#F8FAFC;
    --wh-primary-dark:#1D4ED8;
    --wh-paper:#FFF9F1;
    --wh-mist:#EEF7F5;
    --wh-wash:#E4F3F0;
    --wh-sea-line:#CAE4DE;
    --wh-muted:#526174;
    --wh-muted-2:#627284;
    --wh-shadow-soft:0 7px 22px rgb(11 19 32 / 4%);
  }
}

@layer base {
  .washed-page { background:var(--wh-canvas); color:var(--wh-ink); }
  .washed-page h1,.washed-page h2,.washed-page h3 { color:var(--wh-ink); letter-spacing:-.035em; }
  .washed-page h2 { font-size:clamp(2rem,3.05vw,3.05rem); line-height:1.04; font-weight:880; }
  .washed-page h3 { font-weight:830; }
  .washed-page p { color:var(--wh-muted); }
  .washed-page .btn--primary { background:var(--wh-primary); border-color:var(--wh-primary); color:#fff; box-shadow:0 7px 18px rgb(37 99 235 / 15%); }
  .washed-page .btn--primary:hover { background:var(--wh-primary-dark); border-color:var(--wh-primary-dark); }
}

@layer layout {
  .wh-shell { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }
  .wh-eyebrow { color:#236E77!important; font-size:.69rem; line-height:1.4; font-weight:900; text-transform:uppercase; letter-spacing:.13em; }

  .washed-page .washed-header { border-block-end:1px solid rgb(80 123 127 / 17%); background:rgb(248 250 252 / 94%); backdrop-filter:saturate(1.1) blur(14px); }
  .washed-page .washed-header-inner { width:min(1240px,calc(100% - 48px)); min-height:72px; gap:18px; }
  .washed-brand { display:grid; place-items:center; width:122px; min-height:64px; margin-inline-end:auto; text-decoration:none; }
  .washed-brand img { display:block; height:auto; }
  .washed-brand-desktop img { width:116px; }
  .washed-brand-mobile { display:none; }
  .washed-page .washed-nav { margin-inline-end:10px; gap:24px; }
  .washed-page .washed-nav a { color:#44576A; font-size:.82rem; border:0; font-weight:750; text-decoration:none; }
  .washed-page .washed-nav a:hover { color:var(--wh-ink); }
  .washed-page .washed-header-cta { min-height:39px; border-radius:8px; padding:9px 16px; }

  .wh-hero { position:relative; overflow:clip; min-height:620px; background:radial-gradient(circle at 92% 12%,rgb(125 211 200 / 18%),transparent 28rem),radial-gradient(circle at 82% 0%,rgb(255 180 121 / 6%),transparent 17rem),linear-gradient(180deg,#FBFDFD 0%,#F1F8F6 100%); border-block-end:1px solid var(--wh-sea-line); }
  .wh-hero::after { content:""; position:absolute; inset:auto -8% -1px 42%; height:2px; background:linear-gradient(90deg,transparent,var(--wh-seaglass),var(--wh-ocean),transparent); opacity:.42; }
  .wh-hero-grid { position:relative; min-height:620px; display:block; }
  .wh-hero-photo { position:absolute; z-index:0; top:0; bottom:0; left:calc((100vw - min(1240px,calc(100vw - 48px)))/-2); width:min(73vw,1320px); overflow:clip; background:#EEF4F2; border:0; border-radius:0; box-shadow:none; -webkit-mask-image:linear-gradient(90deg,#000 0 58%,rgb(0 0 0 / .98) 63%,rgb(0 0 0 / .72) 74%,rgb(0 0 0 / .22) 89%,transparent 100%); mask-image:linear-gradient(90deg,#000 0 58%,rgb(0 0 0 / .98) 63%,rgb(0 0 0 / .72) 74%,rgb(0 0 0 / .22) 89%,transparent 100%); }
  .wh-hero-photo picture { position:absolute; inset:0; }
  .wh-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:31% center; }
  .wh-hero-copy { position:relative; z-index:2; width:min(45%,540px); margin-left:auto; padding:100px 0 78px; }
  .wh-hero-copy::before { content:""; position:absolute; z-index:-1; inset:-40px -56px -40px -150px; background:linear-gradient(90deg,transparent 0%,rgb(241 248 246 / .48) 28%,rgb(241 248 246 / .92) 57%,rgb(241 248 246 / .995) 79%); pointer-events:none; }
  .wh-hero-title { margin-top:13px; font-size:clamp(2.95rem,3.75vw,4.15rem); line-height:.985; font-weight:920; max-width:14.5ch; text-wrap:balance; }
  .wh-hero-title span { position:relative; display:inline-block; isolation:isolate; }
  .wh-hero-title span::after { content:""; position:absolute; z-index:-1; left:.03em; right:-.03em; bottom:.02em; height:.10em; border-radius:99px; background:color-mix(in srgb,var(--wh-sunrise) 84%,white); transform:rotate(-1.2deg); }
  .wh-hero-lede { margin-top:20px; max-width:48ch; color:#33485A!important; font-size:1.06rem; line-height:1.62; }
  .wh-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:24px; }
  .wh-actions .btn { border-radius:8px; }

  .wh-story { padding-block:74px 70px; background:#FCFDFD; border-block-end:1px solid #DCE9E6; }
  .story-head { display:grid; grid-template-columns:minmax(0,.95fr) minmax(330px,.55fr); gap:58px; align-items:end; }
  .story-head h2 { max-width:17ch; }
  .story-head>p { max-width:42ch; font-size:1rem; line-height:1.66; }

  /* The app's highlighter (nf-source-preview-document.js): solid fill, dark ink. */

  .wh-how { padding-block:64px 68px; background:#FCFDFD; border-block-end:1px solid #DCE8E5; }
  .how-head { display:flex; justify-content:space-between; gap:40px; align-items:end; }
  .how-head>p { max-width:38ch; text-align:right; font-size:.94rem; }
  .how-list { margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid #D6E5E1; }
  .how-step { display:grid; grid-template-columns:34px 1fr; gap:13px; padding:22px; border-right:1px solid #D6E5E1; }
  .how-step:last-child { border-right:0; }
  .how-step>span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#DFF3EF; color:#236E77; font-size:.72rem; font-weight:900; }
  .how-step h3 { font-size:.95rem; letter-spacing:-.015em; }
  .how-step p { margin-top:6px; font-size:.82rem; line-height:1.55; }

  .wh-closing { position:relative; overflow:clip; padding-block:62px; background:radial-gradient(circle at 9% 10%,rgb(255 180 121 / 13%),transparent 16rem),radial-gradient(circle at 82% 105%,rgb(34 211 197 / 20%),transparent 28rem),radial-gradient(circle at 61% 35%,rgb(125 211 200 / 9%),transparent 24rem),linear-gradient(135deg,#0B1320 0%,#10283A 100%); border-block-end:1px solid #173347; }
  .wh-closing::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,transparent 3%,var(--wh-seaglass) 30%,var(--wh-ocean) 64%,transparent 96%); opacity:.62; }
  .wh-closing-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:46px; align-items:center; }
  .wh-closing h2 { max-width:14ch; color:#F8FAFC; }
  .wh-closing p { margin-top:12px; max-width:49ch; color:#CAD8DE!important; font-size:.94rem; line-height:1.62; }
  .wh-closing .btn { border-radius:8px; min-width:190px; }

  .washed-page .washed-footer { background:#F7FAF9; }
  .washed-page .washed-footer-inner { width:min(1240px,calc(100% - 48px)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding-block:18px; }
  .washed-footer-brand img { width:82px; height:auto; }
  .washed-page .site-footer-nav { justify-self:center; }
  .washed-page .site-footer-nav a { color:#425A65; }
  .washed-page .site-footer-legal { text-align:right; color:#5F7078!important; }

  @media (max-width:1023.98px) {
    .washed-page .washed-nav { display:none; }
    .wh-hero-photo { width:min(80vw,920px); }
    .wh-hero-copy { width:min(48%,500px); padding-top:92px; }
    .wh-hero-title { font-size:clamp(2.75rem,5.25vw,3.9rem); }
  }

  @media (max-width:899.98px) {
    .washed-page .washed-header-inner { min-height:64px; }
    .washed-brand { width:58px; min-height:56px; }
    .washed-brand-desktop { display:none; }
    .washed-brand-mobile { display:block; }
    .washed-brand-mobile img { width:54px; }
    .wh-hero { min-height:auto; padding-block:28px 54px; }
    .wh-hero-grid { display:grid; min-height:0; grid-template-columns:1fr; gap:28px; }
    .wh-hero-copy { order:1; width:100%; max-width:700px; margin-left:0; padding:0; }
    .wh-hero-copy::before { display:none; }
    .wh-hero-photo { position:relative; order:2; top:auto; bottom:auto; left:auto; width:100%; aspect-ratio:1.55; border-radius:15px; border:1px solid rgb(75 142 139 / 18%); box-shadow:0 10px 28px rgb(11 19 32 / 7%); -webkit-mask-image:none; mask-image:none; }
    .wh-hero-photo picture { position:absolute; inset:0; }
    .wh-hero-title { max-width:12ch; }
    .story-head { grid-template-columns:1fr; gap:13px; }
    .story-head h2 { max-width:19ch; }
    .story-head>p { max-width:60ch; }
    .how-head { display:block; }
    .how-head>p { margin-top:8px; text-align:left; }
    .how-list { grid-template-columns:1fr; }
    .how-step { border-right:0; border-bottom:1px solid #D6E5E1; }
    .how-step:last-child { border-bottom:0; }
    .wh-closing-inner { grid-template-columns:1fr; gap:24px; }
    .washed-page .washed-footer-inner { grid-template-columns:1fr auto; }
    .washed-page .site-footer-nav { justify-self:end; }
    .washed-page .site-footer-legal { grid-column:1/-1; text-align:left; }
  }

  @media (max-width:639.98px) {
    .wh-shell,.washed-page .washed-header-inner,.washed-page .washed-footer-inner { width:min(100% - 28px,1240px); }
    .washed-page .washed-header-cta { min-height:44px; padding:7px 11px; }
    .wh-hero-title { font-size:clamp(2.5rem,11vw,3.5rem); }
    .wh-hero-lede { font-size:1rem; }
    .wh-actions { display:grid; grid-template-columns:1fr; gap:11px; }
    .wh-story { padding-block:54px; }
    .wh-how { padding-block:50px; }
    .how-list { margin-top:22px; }
    .how-step { padding:18px 4px; }
    .how-step h3 { font-size:.97rem; }
    .how-step p { font-size:.84rem; line-height:1.58; }
    .wh-closing { padding-block:50px; }
    .wh-closing h2 { font-size:clamp(2.15rem,10vw,3rem); }
    .washed-page .washed-footer-inner { grid-template-columns:1fr; }
    .washed-page .site-footer-nav { justify-self:start; }
    .washed-page .site-footer-legal { grid-column:auto; }
  }
}

/* Let the brochureware carry the horizon mark beyond the logo. These quiet,
   decorative fields connect the page without competing with product proof. */
@layer layout {
  .wh-story,
  .wh-closing {
    position:relative;
    isolation:isolate;
    overflow:clip;
  }

  .wh-story > .wh-shell,
  .wh-closing > .wh-shell {
    position:relative;
    z-index:1;
  }

  .wh-story::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:-1px 0 auto;
    height:82px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1600v22c-252 42-486 57-718 39C630 42 385-2 0 49Z' fill='%23EAF5F2'/%3E%3Cpath d='M0 48C385-3 630 42 882 61c232 18 466 3 718-39' fill='none' stroke='%237DD3C8' stroke-opacity='.38' stroke-width='2'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
    pointer-events:none;
  }


  .wh-closing::before {
    content:"";
    position:absolute;
    z-index:0;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cpath d='M-70 214C258 73 544 78 817 152c285 77 537 51 853-91v239H-70Z' fill='%2322D3C5' fill-opacity='.075'/%3E%3Cpath d='M-70 214C258 73 544 78 817 152c285 77 537 51 853-91' fill='none' stroke='%237DD3C8' stroke-opacity='.28' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events:none;
  }

  @media (max-width:639.98px) {
    .wh-story::before { height:58px; background-size:175% 100%; }
    .wh-closing::before { background-position:60% center; background-size:180% 100%; }
  }
}

/* FINAL MVP BROCHUREWARE: product continuity + noise-to-signal transformation. */
@layer layout {
  .washed-brand-word { display:none; }

  .washed-footer-brand--compact { display:inline-flex; align-items:center; gap:7px; color:#173751; font-size:.9rem; font-weight:900; text-decoration:none; letter-spacing:-.035em; }
  .washed-footer-brand--compact img { width:40px; height:auto; }
  .washed-footer-brand--compact span { display:inline-block; }

  @media (max-width:639.98px) {
    .washed-brand { width:auto; min-height:56px; display:flex; align-items:center; gap:6px; }
    .washed-brand-mobile { display:block; }
    .washed-brand-word { display:inline-block; color:#0B1320; font-size:1.05rem; line-height:1; font-weight:900; letter-spacing:-.04em; }
    .story-head { gap:9px; }
    .washed-footer-brand--compact img { width:38px; }
  }
}

/* Brand word at tablet widths. */
@layer layout {
  @media (min-width:640px) and (max-width:899.98px) {
    .washed-brand { width:auto; display:flex; gap:6px; }
    .washed-brand-word { display:inline-block; font-weight:900; color:var(--wh-ink); }
  }
}

/* Phase 1 launch: waitlist CTA note, example briefing, sample emails mount, "Why not just…". */
@layer layout {
  .wh-cta-note { color:#3F6670; font-size:.8rem; font-weight:760; }
  .wh-closing-action { display:grid; justify-items:center; gap:10px; }
  .wh-closing .wh-cta-note { color:#CAD8DE; }
  #sample-emails { margin-top:28px; }
  #sample-emails:empty { display:none; }

  .wh-why { padding-block:62px; background:#F4FAF8; border-block:1px solid #D6E5E1; }
  .why-list { margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .why-list article { padding:20px; border:1px solid #D6E5E1; border-radius:12px; background:#fff; }
  .why-list h3 { font-size:1rem; letter-spacing:-.015em; }
  .why-list p { margin-top:8px; font-size:.88rem; line-height:1.6; }

  @media (max-width:899.98px) {
    .why-list { grid-template-columns:1fr; gap:12px; }
  }
  @media (max-width:639.98px) {
    .wh-why { padding-block:50px; }
    .wh-actions .wh-cta-note { text-align:center; }
    .wh-closing-action { justify-items:stretch; }
    .wh-closing .wh-cta-note { text-align:center; }
  }
}

/* Site IA (2026-10-16): one header and footer on every page, the phone menu,
   the washed-horizon page band for secondary pages, and the article card used
   on the homepage and /blog/. Header and footer markup is identical on
   every page (test/shared-chrome.test.mjs); behaviour lives in /m/nav.js. */
@layer layout {
  /* ---- Header nav ---- */
  .nav-toggle { display:none; }
  .washed-page .washed-nav a { position:relative; padding-block:6px; }
  .washed-page .washed-nav a[aria-current] { color:var(--wh-ink); }
  .washed-page .washed-nav a[aria-current]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:99px; background:color-mix(in srgb,var(--wh-sunrise) 84%,white); transform:rotate(-1.2deg); }
  .washed-page .washed-header-cta[aria-current] { box-shadow:none; }

  @media (min-width:900px) {
    .washed-page .washed-nav { display:flex; gap:26px; margin-inline-end:14px; }
    /* Home is in the phone menu and the footer; on wide screens the logo is the way home. */
    .washed-page .washed-nav .nav-home { display:none; }
    /* 44px tall to tap on touch screens this wide; the underline keeps its place under the text. */
    .washed-page .washed-nav a { display:inline-flex; align-items:center; min-height:44px; }
    .washed-page .washed-nav a[aria-current]::after { bottom:5px; }
    .washed-page .washed-header-cta { min-height:44px; }
  }

  /* Sign in, for returning users: a menu item on phones (.nav-signin), and on wide
     screens a quiet text link beside the waitlist button, set off from the section links. */
  .washed-header-signin { display:none; }
  @media (min-width:900px) {
    .washed-page .washed-nav .nav-signin { display:none; }
    .washed-header-signin {
      display:inline-flex; align-items:center; min-height:44px;
      padding-inline:18px 2px; margin-inline-start:-4px;
      background:linear-gradient(var(--wh-sea-line),var(--wh-sea-line)) left center / 1px 18px no-repeat;
      color:#44576A; font-size:.82rem; font-weight:750; text-decoration:none;
    }
    .washed-header-signin:hover { color:var(--wh-ink); }
  }

  /* Phones, without JavaScript (or a browser that can't tell): the links sit in a row under the logo. */
  @media (max-width:899.98px) {
    .washed-page .washed-header-inner { flex-wrap:wrap; column-gap:10px; }
    .washed-page .washed-nav { order:3; display:flex; flex-wrap:wrap; width:100%; gap:2px 20px; padding-block:0 8px; }
    .washed-page .washed-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:.86rem; }
  }

  /* Phones, with JavaScript: a Menu button opens the same links as a panel. */
  @media (max-width:899.98px) and (scripting:enabled) {
    .washed-page .washed-header-inner { flex-wrap:nowrap; }
    .washed-page .washed-header-cta { order:2; }
    .nav-toggle {
      order:3;
      display:inline-grid; place-items:center;
      width:44px; height:44px; flex:none;
      padding:0; border:1px solid var(--wh-sea-line); border-radius:9px;
      background:#fff; color:var(--wh-ink); cursor:pointer;
    }
    .nav-toggle:hover { border-color:var(--wh-seaglass); }
    .nav-toggle-icon,
    .nav-toggle-icon::before,
    .nav-toggle-icon::after { display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .18s ease, opacity .18s ease; }
    .nav-toggle-icon { position:relative; }
    .nav-toggle-icon::before,
    .nav-toggle-icon::after { content:""; position:absolute; left:0; }
    .nav-toggle-icon::before { top:-6px; }
    .nav-toggle-icon::after { top:6px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-icon { background:transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform:translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform:translateY(-6px) rotate(-45deg); }
    .nav-toggle-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

    .washed-page .washed-nav {
      display:none;
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; flex-wrap:nowrap; gap:0;
      width:auto; margin:0; padding:6px 14px 14px;
      border-block-end:1px solid var(--wh-sea-line);
      background:#F8FAFC;
      box-shadow:0 18px 30px rgb(11 19 32 / 8%);
      z-index:60;
    }
    .washed-header.is-menu-open .washed-nav { display:flex; }
    .washed-page .washed-nav a { min-height:50px; padding:0 4px; border-bottom:1px solid #E1ECE9; color:var(--wh-ink); font-size:1.02rem; font-weight:820; }
    .washed-page .washed-nav a:last-child { border-bottom:0; }
    .washed-page .washed-nav a[aria-current]::after { left:4px; right:auto; bottom:12px; width:36px; }
  }
  @media (prefers-reduced-motion:reduce) {
    .nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after { transition:none; }
  }

  /* ---- Footer ---- */
  .washed-page .site-footer-nav { column-gap:18px; }
  .washed-page .washed-footer-inner { padding-inline:0; }
  .washed-page .site-footer-nav a[aria-current] { color:var(--wh-ink); font-weight:800; }
  @media (max-width:639.98px) {
    .washed-page .site-footer-nav { column-gap:16px; row-gap:10px; }
  }
  /* Phones and other touch screens: footer links and the footer logo are 44px tall to tap.
     Negative margins keep their old footprint; the row gap keeps link rows from overlapping. */
  @media (max-width:899.98px), (pointer:coarse) {
    .washed-page .site-footer-nav { row-gap:23px; }
    .washed-page .site-footer-nav a { display:inline-flex; align-items:center; min-height:44px; margin-block:-11.5px; }
    .washed-footer-brand { min-height:44px; margin-block:-11px; }
    .washed-page .wh-pagehead-back { min-height:44px; margin-block:-6px 8px; } /* same footprint as the 32px link */
  }

  /* ---- Page band: eyebrow + display title for every page but the homepage ---- */
  .wh-pagehead {
    --pagehead-width:44rem;
    position:relative; isolation:isolate; overflow:clip;
    padding-block:60px 84px;
    background:radial-gradient(circle at 92% 12%,rgb(125 211 200 / 18%),transparent 28rem),radial-gradient(circle at 8% 0%,rgb(255 180 121 / 7%),transparent 18rem),linear-gradient(180deg,#FBFDFD 0%,#F1F8F6 100%);
  }
  .wh-pagehead::after {
    content:""; position:absolute; z-index:-1; left:0; right:0; bottom:-1px; height:64px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C385 4 630 40 882 56c232 15 466 2 718-34v58H0Z' fill='%23F8FAFC'/%3E%3Cpath d='M0 46C385 4 630 40 882 56c232 15 466 2 718-34' fill='none' stroke='%237DD3C8' stroke-opacity='.5' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    pointer-events:none;
  }
  .wh-pagehead--wide { --pagehead-width:1240px; }
  .wh-pagehead--list { --pagehead-width:64rem; }
  .wh-pagehead-inner { width:min(var(--pagehead-width),calc(100% - 32px)); margin-inline:auto; }
  .wh-pagehead--wide .wh-pagehead-inner { width:min(var(--pagehead-width),calc(100% - 48px)); }
  .washed-page .wh-pagehead-title { margin-top:12px; max-width:20ch; font-size:clamp(2.35rem,4.4vw,3.55rem); line-height:1.01; font-weight:920; letter-spacing:-.035em; text-wrap:balance; }
  .washed-page .wh-pagehead-lede { margin-top:16px; max-width:58ch; color:#33485A; font-size:1.06rem; line-height:1.62; }
  .washed-page .wh-pagehead-meta { margin-top:16px; color:var(--wh-muted-2); font-size:.86rem; font-weight:700; }
  .wh-pagehead-back { display:inline-flex; align-items:center; min-height:32px; margin-bottom:14px; color:#236E77; font-size:.85rem; font-weight:800; text-decoration:none; }
  .wh-pagehead-back:hover { text-decoration:underline; }
  @media (max-width:639.98px) {
    .wh-pagehead { padding-block:34px 58px; }
    .wh-pagehead::after { height:40px; }
    .wh-pagehead-inner,.wh-pagehead--wide .wh-pagehead-inner { width:calc(100% - 28px); }
    .washed-page .wh-pagehead-title { font-size:clamp(2.05rem,9vw,2.6rem); }
    .washed-page .wh-pagehead-lede { font-size:1rem; }
  }

  /* ---- Article card (homepage "Latest from the blog" and /blog/) ---- */
  .article-cards { margin:0; padding:0; list-style:none; display:grid; gap:16px; }
  .article-cards > li { margin:0; min-width:0; }
  .washed-page .article-card {
    --card-accent:var(--wh-teal);
    position:relative; display:flex; flex-direction:column; gap:8px; height:100%;
    padding:22px 22px 20px; border:1px solid #D6E5E1; border-radius:12px;
    background:#fff; color:inherit; text-decoration:none; box-shadow:var(--wh-shadow-soft);
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .washed-page .article-card:hover { border-color:var(--wh-seaglass); box-shadow:0 10px 26px rgb(11 40 43 / 8%); }
  .washed-page .article-card:hover .article-card-title { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
  .washed-page .article-card--sunrise { --card-accent:#B4532F; }
  .washed-page .article-card--teal { --card-accent:var(--wh-teal); }
  .washed-page .article-card--ocean { --card-accent:#2563EB; }
  .washed-page .article-card--sage { --card-accent:#537D73; }
  .article-card-topic { display:inline-flex; align-items:center; gap:8px; color:var(--card-accent); font-size:.78rem; font-weight:850; }
  .article-card-topic::before { content:""; width:22px; height:4px; border-radius:99px; background:var(--card-accent); opacity:.85; }
  .washed-page .article-card-title { margin:2px 0 0; color:var(--wh-ink); font-size:1.18rem; line-height:1.25; font-weight:860; letter-spacing:-.02em; }
  .washed-page .article-card-desc { margin:0; color:#44576A; font-size:.93rem; line-height:1.55; }
  .washed-page .article-card-meta { margin-top:auto; padding-top:6px; color:var(--wh-muted-2); font-size:.8rem; font-weight:700; }
  @media (max-width:639.98px) {
    .washed-page .article-card { padding:18px 16px 16px; gap:6px; }
    .washed-page .article-card-title { font-size:1.08rem; }
  }
}

/* /how-it-works: the sample-email display. */
@layer layout {
  .ex-samples { padding-block:8px 64px; }
  .washed-page .ex-noscript { padding:16px; border:1px dashed var(--wh-sea-line); border-radius:12px; background:#fff; }
  @media (max-width:639.98px) {
    .ex-samples { padding-block:0 44px; }
    .ex-samples .wh-shell { width:calc(100% - 20px); }
  }
}

/* Homepage (2026-10-16 IA): section heads, examples link, latest articles,
   and a shorter problem section on phones. */
@layer layout {
  .section-head { display:grid; gap:12px; max-width:62ch; }
  .washed-page .section-head h2 { font-size:clamp(1.9rem,2.7vw,2.7rem); }
  .washed-page .section-head p { font-size:.98rem; line-height:1.66; }
  .section-head--row { max-width:none; grid-template-columns:1fr auto; align-items:end; }
  .washed-page .section-more { margin-top:18px; font-size:.92rem; font-weight:820; }
  .section-head--row .section-more { margin-top:0; }
  .section-more a { color:var(--wh-primary); text-decoration:none; }
  .section-more a:hover { text-decoration:underline; text-underline-offset:3px; }

  .wh-latest { padding-block:60px 64px; background:#F7FAF9; border-block-end:1px solid #DCE8E5; }
  .wh-latest .article-cards { margin-top:24px; }
  .article-cards--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .washed-page .wh-latest .article-card-title { font-size:1.08rem; }

  @media (max-width:899.98px) {
    .article-cards--three { grid-template-columns:1fr; gap:12px; }
  }

  @media (max-width:639.98px) {
    .wh-story { padding-block:46px 40px; }
    .washed-page .story-head h2 { font-size:2rem; }
    .washed-page .story-head>p { font-size:.95rem; line-height:1.6; }
    /* Sources become one swipeable row instead of a stack. */

    .wh-how { padding-block:44px; }
    .how-step { padding:14px 2px; }
    .wh-why { padding-block:44px; }
    .why-list { margin-top:18px; gap:10px; }
    .why-list article { padding:16px; }
    .washed-page .section-head h2 { font-size:1.9rem; }
    .wh-latest { padding-block:44px; }
    .washed-page .wh-latest .article-card-desc { display:none; }
    .wh-closing { padding-block:44px; }
  }
}

/* Homepage on phones, round two: fewer repeats, swipeable article cards. */
@layer layout {
  @media (max-width:639.98px) {
    .how-head>p { font-size:.92rem; }
    .why-list article { padding:0 0 0 14px; border:0; border-left:3px solid var(--wh-sea-line); border-radius:0; background:transparent; }
    .why-list { gap:18px; }
    .why-list p { margin-top:4px; }
    .wh-latest .wh-shell { width:100%; }
    .wh-latest .section-head { width:calc(100% - 28px); margin-inline:auto; }
    .article-cards--three {
      grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%;
      gap:10px; padding:2px 14px 6px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:14px; scrollbar-width:none;
    }
    .article-cards--three::-webkit-scrollbar { display:none; }
    .article-cards--three > li { scroll-snap-align:start; }
    .wh-latest .article-cards { margin-top:18px; }
    .wh-closing h2 { font-size:2.1rem; max-width:15ch; }
    .washed-page .wh-closing p { display:none; }
  }
}
@layer layout {
  @media (max-width:639.98px) {
    .wh-hero { padding-block:24px 40px; }
    .wh-hero-grid { gap:24px; }
    .wh-story { padding-block:36px 30px; }
    .wh-how,.wh-why,.wh-latest,.wh-closing { padding-block:34px; }
    .how-list { margin-top:16px; }
  }
}
/* Anchored sections clear the sticky header. */
@layer layout {
  .washed-page main [id], .washed-page #main { scroll-margin-top:84px; }
}

/* Homepage problem section (2026-10-17; pile 2026-10-18): today's mail as a
   pile -> DayFlo -> the evening note, then the one feature strip. Change and
   cancellation marks follow the app (cautionMark.js): a quiet "Changed from"
   line, and a struck title with a red Cancelled word. */
@layer layout {
  .flow {
    margin-top:30px;
    display:grid; grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr); align-items:center; gap:10px;
    padding:26px; border:1px solid #CFE3DE; border-radius:16px;
    background:linear-gradient(145deg,#FCFEFD 0%,color-mix(in srgb,var(--wh-teal) 5%,white) 100%);
    box-shadow:var(--wh-shadow-soft);
  }
  .flow figure { margin:0; min-width:0; }
  .inbox-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
  .inbox-head strong { color:var(--wh-ink); font-size:.98rem; font-weight:850; }
  .inbox-head span { color:var(--wh-muted-2); font-size:.82rem; font-weight:750; }
  /* Today's messages as a loose pile: newest on top, each card a little
     rotated and offset, overlapping only at the card edges so no text is
     covered. Per-card offset (--x) and tilt (--r) are layout, not motion. */
  .pile { margin:0; padding:4px 0 0; list-style:none; display:grid; }
  .pile-card {
    --x:0%; --r:0deg;
    position:relative; inline-size:min(100% - var(--x),max(76%,330px)); margin-inline-start:var(--x);
    display:grid; grid-template-columns:30px minmax(0,1fr) auto; grid-template-areas:"icon from time" "icon subject subject"; align-items:start; column-gap:10px;
    padding:12px 13px; border:1px solid #DFE8E6; border-radius:11px; background:#fff;
    box-shadow:0 1px 2px rgb(11 19 32 / 5%),0 8px 18px rgb(11 19 32 / 7%);
    rotate:var(--r);
  }
  .pile-card + .pile-card { margin-top:-3px; }
  .pile-card:nth-child(1) { --x:2%;  --r:-2.2deg; --i:5; z-index:6; }
  .pile-card:nth-child(2) { --x:22%; --r:1.6deg;  --i:4; z-index:5; background:#FFFCF6; border-color:#EDE4D6; }
  .pile-card:nth-child(3) { --x:7%;  --r:-1.3deg; --i:3; z-index:4; background:#FAFCFF; }
  .pile-card:nth-child(4) { --x:24%; --r:1.9deg;  --i:2; z-index:3; }
  .pile-card:nth-child(5) { --x:0%;  --r:-2.4deg; --i:1; z-index:2; background:#FFFCF6; border-color:#EDE4D6; }
  .pile-card:nth-child(6) { --x:15%; --r:1.2deg;  --i:0; z-index:1; background:#FAFCFF; }
  .pile-card > div { display:contents; }
  .pile-card .inbox-icon { grid-area:icon; }
  .pile-card small { grid-area:from; min-width:0; color:var(--wh-muted-2); font-size:.72rem; font-weight:750; line-height:1.3; }
  .pile-card strong { grid-area:subject; margin-top:1px; color:#1E3142; font-size:.9rem; font-weight:780; line-height:1.3; }
  .pile-card time { grid-area:time; color:var(--wh-muted-2); font-size:.72rem; font-weight:750; line-height:1.3; white-space:nowrap; }
  .inbox-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:#EEF3F6; color:#4B6274; }
  .inbox-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .inbox-icon--team { background:#E6F5F2; color:#1C7A72; }
  .inbox-icon--portal { background:#EAF1FD; color:#3460B8; }
  .inbox-icon--news { background:#FBF0E8; color:#9A5634; }

  /* The handwritten note (Caveat, OFL: assets/editorial-annotations-OFL.txt)
     points its arrow up at the messages still to come. */
  .pile-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; }
  .pile-note { flex:none; inline-size:min(220px,46%); block-size:auto; rotate:-2deg; translate:0 6px; }
  .pile-more {
    margin-inline-end:9%; padding:7px 16px; border:1px dashed #C9D9D5; border-radius:10px;
    background:rgb(255 255 255 / 60%); color:var(--wh-muted-2); font-size:.8rem; font-weight:800; white-space:nowrap;
    rotate:1.2deg; opacity:.72;
    box-shadow:0 5px 0 -2px #F4F8F7,0 5px 0 -1px #DCE7E4,0 10px 0 -4px #F4F8F7,0 10px 0 -3px #E6EEEC;
  }
  .pile-more-narrow { display:none; }
  .washed-page .inbox-fine { margin-top:10px; padding-left:4px; color:var(--wh-muted); font-size:.78rem; line-height:1.5; }

  .flow-arrow { display:grid; justify-items:center; gap:4px; color:var(--wh-teal); }
  .flow-arrow svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .flow-arrow span { font-size:.8rem; font-weight:900; letter-spacing:.02em; }

  .shows-card { padding:16px 18px 14px; }
  .shows-card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:2px; }
  .washed-page .shows-card h3 { margin:0; font-size:1.12rem; line-height:1.3; letter-spacing:-.015em; }
  .washed-page .shows-card-rest { padding-top:10px; border-top:1px solid #EDF2F1; color:var(--wh-muted-2); font-size:.84rem; }

  /* Narrow two-column layout: a tighter spread so subjects stay on one line. */
  @media (min-width:900px) and (max-width:1099.98px) {
    .pile-card { inline-size:89%; margin-inline-start:calc(var(--x) * .45); }
  }
  @media (min-width:900px) {
    .shows-card { padding:24px 28px 20px; }
    .washed-page .shows-card .df-group { margin-top:18px; }
    .washed-page .shows-card-rest { margin-top:6px; padding-top:14px; }
  }

  /* Once per page load (inline script in index.html): the messages drop
     into the pile oldest first, then the DayFlo card settles in. The armed
     state applies only while the script waits for the section to scroll
     into view; with reduced motion, no script or in print it never applies. */
  @media screen and (prefers-reduced-motion:no-preference) {
    .flow.pile-armed :is(.pile-card,.pile-more,.pile-note,.flow-arrow,.shows-card) { opacity:0; }
    .flow.pile-play .pile-card { animation:pile-drop .62s cubic-bezier(.2,.75,.25,1) calc(var(--i) * 330ms) backwards; }
    .flow.pile-play .pile-more { animation:pile-fade .6s ease-out 1.85s backwards; }
    .flow.pile-play .pile-note { animation:pile-fade .6s ease-out 2.15s backwards; }
    .flow.pile-play .flow-arrow { animation:pile-fade .5s ease-out 2.1s backwards; }
    .flow.pile-play .shows-card { animation:pile-settle .75s cubic-bezier(.2,.75,.25,1) 2.25s backwards; }
  }
  @keyframes pile-drop {
    from { opacity:0; translate:0 -56px; rotate:calc(var(--r) - 7deg); }
    45% { opacity:1; }
  }
  @keyframes pile-fade { from { opacity:0; } }
  @keyframes pile-settle { from { opacity:0; translate:0 14px; scale:.985; } }

  .feature-strip { margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px; }
  .feature-strip li { display:inline-flex; align-items:center; gap:8px; color:#2E4756; font-size:.92rem; font-weight:800; }
  .feature-strip li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--wh-teal); }

  /* How it works: three numbered steps (homepage and /how-it-works). */
  .how-list { margin:24px 0 0; padding:0; list-style:none; }
  .how-step > span { flex:none; }
  .wh-how .section-more { margin-top:18px; }
  .how-list--compact { margin-top:26px; border-block-start:1px solid #D2E4DF; } /* the band's wave closes the section; no rule below */
  .washed-page .how-list--compact h2 { font-size:.98rem; line-height:1.3; font-weight:830; letter-spacing:-.015em; }
  .how-list--compact .how-step p { margin-top:5px; font-size:.86rem; line-height:1.55; }
  .washed-page .ex-samples-title { max-width:30ch; font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.15; text-wrap:balance; }
  .washed-page .ex-samples-hint { margin-top:8px; font-size:.92rem; }
  .ex-samples #sample-emails { margin-top:20px; }

  @media (max-width:899.98px) {
    .flow { grid-template-columns:minmax(0,1fr); gap:6px; padding:18px; }
    .flow-arrow { grid-auto-flow:column; justify-content:center; align-items:center; gap:6px; }
    .flow-arrow svg { width:30px; height:30px; transform:rotate(90deg); }
    .flow-inbox, .shows-card { width:min(560px,100%); margin-inline:auto; }
  }
  @media (max-width:639.98px) {
    .flow { margin-top:20px; padding:12px; border-radius:13px; }
    .pile-card { inline-size:93%; grid-template-columns:26px minmax(0,1fr) auto; column-gap:9px; padding:9px 11px; }
    .pile-card + .pile-card { margin-top:-7px; }
    .pile-card--wide { display:none; }
    .pile-card:nth-child(1) { --x:1%; --r:-1.6deg; --i:3; }
    .pile-card:nth-child(2) { --x:7%; --r:1.3deg;  --i:2; }
    .pile-card:nth-child(5) { --x:2%; --r:-1.1deg; }
    .pile-card:nth-child(6) { --x:6%; --r:1.5deg; }
    .inbox-icon { width:26px; height:26px; border-radius:7px; }
    .inbox-icon svg { width:14px; height:14px; }
    .pile-card strong { font-size:.85rem; }
    .pile-note { inline-size:min(156px,46%); }
    .pile-foot { margin-top:2px; }
    .pile-more { margin-inline-end:3%; }
    .pile-more-wide { display:none; }
    .pile-more-narrow { display:inline; }
    .shows-card { padding:14px 14px 12px; }
    .feature-strip { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:14px; }
    .feature-strip li { align-items:baseline; font-size:.84rem; line-height:1.35; }
    .feature-strip li::before { flex:none; width:7px; height:7px; transform:translateY(-1px); }
    .how-list--compact { margin-top:20px; }
    .how-list .how-step { padding:12px 2px; gap:10px; }
    .how-step p { line-height:1.5; }
    .wh-how .section-more { margin-top:12px; }
    .why-list { gap:14px; }
  }
}

/* One DayFlo card style (2026-10-17) for every card the site draws: the
   homepage "What DayFlo shows" card and the /how-it-works results
   (samples.js). Marks follow the app (cautionMark.js): a quiet
   "Changed from" line; a struck title with a red Cancelled. */
@layer layout {
  .washed-page .df-card { border:1px solid var(--wh-sea-line); border-radius:14px; background:#fff; box-shadow:0 14px 34px rgb(15 118 110 / 10%); }
  .df-items { margin:0; padding:0; list-style:none; }
  .df-item { display:grid; gap:3px; padding:10px 0; }
  .df-items > .df-item + .df-item { border-top:1px solid #E6EEEC; }
  .df-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
  .df-when { color:#236E77; font-size:.76rem; font-weight:850; line-height:1.4; }
  .df-child { padding:0 8px; border-radius:999px; background:#EEF4F7; color:#2E4756; font-size:.72rem; font-weight:850; line-height:1.6; }
  /* One colour per child, the same on every card, so per-child sorting shows at a glance. */
  .df-child.df-kid--a, .df-avatar.df-kid--a { background:#DDF1EC; color:#0F5F57; }
  .df-child.df-kid--b, .df-avatar.df-kid--b { background:#FCE6DE; color:#9A3F25; }
  .df-child.df-kid--c, .df-avatar.df-kid--c { background:#E5ECFB; color:#2A4A9B; }
  .df-avatar { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:.68rem; font-weight:900; }
  .washed-page .shows-for { display:flex; flex-wrap:wrap; gap:4px 14px; margin:4px 0 2px; color:var(--wh-muted); font-size:.8rem; font-weight:750; }
  .df-kid { display:inline-flex; align-items:center; gap:6px; }
  .df-ask { padding:0 7px; border-radius:999px; background:#FDE9DF; color:#9A3F22; font-size:.64rem; font-weight:900; line-height:1.7; letter-spacing:.04em; text-transform:uppercase; }
  .df-kind { padding:0 7px; border-radius:999px; background:#E4F3F0; color:#1F5F66; font-size:.64rem; font-weight:900; line-height:1.7; letter-spacing:.04em; text-transform:uppercase; }
  .df-title { color:#101828; font-size:.96rem; font-weight:820; line-height:1.35; overflow-wrap:anywhere; }
  .df-title s { color:#6B7480; text-decoration-thickness:1.5px; }
  .df-cancelled { margin-left:7px; color:#B42332; font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
  .df-changed { color:var(--wh-muted); font-size:.82rem; line-height:1.4; }
  .df-facts { display:flex; flex-wrap:wrap; gap:1px 14px; }
  .df-fact { color:#44576A; font-size:.8rem; line-height:1.45; overflow-wrap:anywhere; }
  .df-fact-label { color:var(--wh-muted-2); font-weight:800; }
  .df-fact-label::after { content:":"; }
  .df-detail { color:var(--wh-muted-2); font-size:.76rem; line-height:1.4; }
  .df-tag { padding:2px 9px; border-radius:999px; background:#EEF1F4; color:#526174; font-size:.66rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
  /* A group label inside a card (Tomorrow, Needs you, Changed). */
  .washed-page .df-group { margin:12px 0 0; color:var(--wh-teal); font-size:.7rem; font-weight:900; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
  .df-group + .df-items > .df-item:first-child { padding-top:4px; }
  /* The footnote for the asterisk on an "Example*" tag (homepage card, /how-it-works). */
  .washed-page .df-footnote { margin-top:8px; color:var(--wh-muted-2); font-size:.74rem; line-height:1.45; }

  /* The chosen item, as in the app's source view: a highlighter edge that
     matches the highlighted passage. */
  .washed-page .df-card.is-chosen, .df-item.is-chosen { border-color:#E3CC86; background:color-mix(in srgb,#f6e3a8 30%,white); }

  @media (max-width:639.98px) {
    .df-item { padding:8px 0; }
    .wh-why .why-list p { font-size:.86rem; line-height:1.5; }
  }
}