:root {
  --paper: #f8f6ee;
  --ink: #243c30;
  --muted: #626a5e;
  --line: #d7d9c9;
  --blue: #d6eeeb;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}
/* Theme-only tokens retain each component's original light fallback. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #18271f;
    --ink: #f3f0e4;
    --muted: #c0c9b8;
    --line: #506553;
    --blue: #9acfc8;
    --em-ink: #b5cfa7;
    --wordmark-dot: #a8c69c;
    --button-hover: #d6e5c8;
    --lede-ink: #c0c9b8;
    --hand-ink: #b5cfa7;
    --step-ink: #b5cfa7;
    --pencil-ink: #b5cfa7;
    --pencil-line: #8eaa82;
    --table-paper: #1d3026;
    --tag-line: #9acfc8;
    --tag-paper: #304739;
    --connector-ink: #93b6a2;
    --invitation-paper: #243b2e;
    --invitation-ink: #f3f0e4;
    --invitation-accent: #d6e5c8;
    --invitation-eyebrow: #c0c9b8;
    --invitation-copy: #e2e6d7;
    --invitation-line: #73866d;
    --invitation-muted: #c0c9b8;
    --light-button-ink: #243c30;
    --skip-ink: #18271f;
    --accent-link: #b6d9af;
    --capture-line: #92a286;
    --capture-shadow: #0d1711;
    --control-line: #92a286;
    --accent-current: #b5cfa7;
    --preview-line: #92a286;
    --preview-paper: #263b2e;
    --preview-ink: #f3f0e4;
    --preview-selected: #d6e5c8;
    --preview-selected-ink: #18271f;
    --preview-focus: #e1b488;
    --preview-muted: #c0c9b8;
    --preview-rule: #506553;
    --preview-rule-soft: #506553;
    --preview-window-line: #92a286;
    --preview-window-paper: #263b2e;
    --focus-soft: #9acfc8;
    --frame-focus: #9acfc8;
    --feature-plus: #b5cfa7;
    --viewer-line: #92a286;
    --viewer-paper: #1d3026;
    --viewer-ink: #f3f0e4;
    --viewer-close-paper: #263b2e;
    --viewer-backdrop: #08110ded;
    --receipt-rule: #506553;
    --receipt-heading: #f3f0e4;
    --receipt-muted: #c0c9b8;
    --receipt-current-paper: #b5cfa714;
    --voice-selected-ink: #18271f;
    --voice-focus: #e1b488;
    --voice-shadow: #00000030;
    --phone-ink: #d6dfc8;
    --phone-speaker: #52654c;
    --phone-screen-line: #92a286;
    --phone-shadow: 3px 5px 0 #0d1711;
    --phone-shell: repeating-linear-gradient(112deg, #d6dfc810 0 1px, transparent 1px 5px),
      linear-gradient(105deg, #314437, #263b2e 42%, #364a3b 77%, #2b4032);
    --playback-paper: #263b2e;
  }
  /* Keep the original light artwork on distinct paper cards. */
  .illustration-site :is(.hero-art, .intro-scene, .pantry-art, .kitchen-art, .small-study, .table-scene > figure) img,
  .illustration-site .drawn-fridge-scenes {
    background: #f8f6ee;
    border-radius: 12px;
    box-shadow: 0 0 0 1px #6e826a, 0 8px 24px #08110d40;
    mix-blend-mode: normal;
    mask-image: none;
  }
  .illustration-site .drawn-fridge-scenes {
    overflow: hidden;
  }
  .illustration-site .drawn-fridge-scenes .static-day-label {
    color: #626a5e;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 35px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 400;
}
h1,
h2 {
  font-family: var(--serif);
  letter-spacing: -0.048em;
  line-height: 1.04;
}
h2 {
  font-size: clamp(38px, 4.3vw, 65px);
}
h3 {
  font-family: var(--serif);
  font-size: 31px;
  letter-spacing: -0.025em;
}
em {
  font-weight: 400;
  color: var(--em-ink, #54734f);
}
.wrap {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 6.25%;
}
.eyebrow,
.fig-number {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  line-height: 1.6;
}
.eyebrow {
  margin-bottom: 26px;
}
.edition {
  height: 34px;
  background: #e9eddf;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3%;
  font-size: 9px;
  letter-spacing: 0.13em;
}
.edition a:hover {
  text-decoration: underline;
}
.header {
  height: 112px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 38px;
  letter-spacing: -2px;
  line-height: 1;
}
.wordmark span {
  color: var(--wordmark-dot, #77976d);
}
.header nav {
  display: flex;
  gap: 29px;
  margin: auto;
  font-size: 12px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 12px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 23px;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid var(--ink);
  border-radius: 2px;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button:hover {
  background: var(--button-hover, #3d5844);
  transform: translateY(-2px);
}
.button.small {
  padding: 11px 17px;
  gap: 22px;
}
.text-link {
  font-size: 12px;
  border-bottom: 1px solid var(--ink);
  padding-block: 5px;
  display: inline-flex;
  gap: 20px;
  align-items: center;
}
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 43% 57%;
  padding-top: 46px;
  overflow: hidden;
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding-bottom: 80px;
}
.hero .eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 25px;
}
.little-line {
  width: 27px;
  height: 1px;
  background: var(--ink);
}
h1 {
  font-size: clamp(65px, 6.6vw, 102px);
  line-height: 1.005;
  letter-spacing: -0.055em;
}
.lede {
  font-size: 14px;
  line-height: 1.85;
  color: var(--lede-ink, #5c665b);
  margin: 28px 0 28px;
}
.hero-copy > .text-link {
  margin-left: 25px;
}
.hero-art {
  align-self: center;
  margin-right: -17%;
  margin-left: -12%;
  margin-top: -30px;
}
.hero-art img {
  width: 100%;
  mix-blend-mode: multiply;
}
.hero-art figcaption {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 12px 0 30px;
}
.hand {
  font-family: "Bradley Hand", "Segoe Print", cursive;
  font-size: 23px;
  transform: rotate(-5deg);
  font-weight: 400;
  color: var(--hand-ink, #557751);
}
.hero-foot {
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 24px 0;
  font-size: 10px;
  letter-spacing: 0.09em;
}
.hero-foot span:nth-child(2) {
  margin-left: auto;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--muted);
}
.hero-foot a {
  font-size: 23px;
  margin-left: 30px;
}
.intro {
  padding-top: 110px;
  padding-bottom: 110px;
  display: grid;
  grid-template-columns: 24% 61% 15%;
  border-bottom: 1px solid var(--line);
}
.intro > .eyebrow {
  padding-top: 10px;
}
.intro p:not(.eyebrow) {
  max-width: 560px;
  margin-top: 30px;
  color: var(--muted);
  line-height: 1.85;
  font-size: 15px;
}
.margin-note {
  align-self: end;
  font-size: 19px;
  padding-bottom: 20px;
}
.loop-section {
  padding-top: 110px;
  padding-bottom: 90px;
}
.section-heading {
  text-align: center;
}
.loop-layout {
  display: grid;
  grid-template-columns: 56% 44%;
  align-items: center;
  gap: 0;
  margin-top: 60px;
}
.pantry-art {
  margin-left: -10%;
  margin-right: 3%;
  text-align: center;
}
.pantry-art img {
  mix-blend-mode: multiply;
}
.pantry-art figcaption {
  margin-top: 25px;
  font-size: 9px;
  color: var(--muted);
}
.loop-steps article {
  display: grid;
  grid-template-columns: 1fr;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.loop-steps article:first-child {
  border-top: 1px solid var(--line);
}
.step-no {
  font-family: var(--serif);
  font-style: italic;
  color: var(--step-ink, #81917a);
  font-size: 23px;
  padding-top: 5px;
}
.loop-steps p {
  color: var(--muted);
  font-size: 13px;
  max-width: 360px;
  margin-top: 9px;
}
.pencil-label {
  display: inline-block;
  font-family: "Bradley Hand", "Segoe Print", cursive;
  font-size: 17px;
  color: var(--pencil-ink, #597356);
  margin-top: 10px;
  border-bottom: 1px solid var(--pencil-line, #b9c7b0);
  line-height: 1.3;
}
.table-scene {
  background: var(--table-paper, #fffefa);
  padding-top: 100px;
  padding-bottom: 65px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.table-intro {
  text-align: center;
}
.table-intro > p:last-child {
  margin-top: 25px;
  color: var(--muted);
  font-size: 14px;
}
.table-scene > figure {
  width: 85%;
  max-width: 1411px;
  margin: 45px auto 15px;
}
.table-scene > figure img {
  mix-blend-mode: multiply;
  width: 100%;
}
.reason-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}
.reason-row > div {
  min-width: 160px;
}
.tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.15em;
  border-bottom: 1px solid var(--tag-line, #82977c);
  padding: 6px 11px;
  background: var(--tag-paper, #e5eee0);
}
.reason-row p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  margin-top: 13px;
}
.connector {
  width: 70px;
  height: 1px;
  background: var(--connector-ink, #aab9a0);
  position: relative;
}
.connector:after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--connector-ink, #aab9a0);
  border-right: 1px solid var(--connector-ink, #aab9a0);
  transform: rotate(45deg);
}
.invitation {
  background: var(--invitation-paper, #253e30);
  color: var(--invitation-ink, var(--paper));
  text-align: center;
  padding: 88px 0 60px;
}
.invitation h2 {
  font-size: clamp(60px, 7.1vw, 108px);
}
.invitation em {
  color: var(--invitation-accent, #c9d5b9);
}
.invitation .eyebrow {
  color: var(--invitation-eyebrow, #c3cfb7);
}
.invitation-inner > p:not(.eyebrow) {
  margin: 30px 0;
  color: var(--invitation-copy, #d8ddce);
  font-size: 14px;
  line-height: 1.9;
}
.button.light {
  background: #f5f4e9;
  color: var(--light-button-ink, var(--ink));
  border-color: #f5f4e9;
  margin-bottom: 50px;
}
.button.light:hover {
  background: #dbe7cf;
}
.limits {
  display: flex;
  justify-content: center;
  gap: 38px;
  border-top: 1px solid var(--invitation-line, #55674d);
  padding-top: 25px;
  font-size: 11px;
  flex-wrap: wrap;
}
.limits strong {
  font: 25px var(--serif);
  margin-right: 6px;
}
.invitation small {
  display: block;
  margin-top: 17px;
  color: var(--invitation-muted, #bac6b0);
  font-size: 10px;
}
.trust {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.trust h2 {
  font-size: clamp(35px, 3.6vw, 54px);
}
.trust-points {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin: 37px 0;
  font-size: 12px;
  color: var(--muted);
}
.trust-points p {
  padding-inline: 25px;
}
.trust-points p + p {
  border-left: 1px solid var(--line);
}
.footer {
  border-top: 1px solid var(--line);
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 45px;
  padding: 43px 0;
}
.footer-top > p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.footer-top nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
  font-size: 11px;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 22px 0 27px;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.skip {
  position: fixed;
  top: -100px;
  left: 10px;
  background: var(--ink);
  color: var(--skip-ink, white);
  padding: 12px;
  z-index: 99;
}
.skip:focus {
  top: 10px;
}
a:hover:not(.button) {
  color: var(--accent-link, #58764f);
}
.skip:hover:not(.button) {
  color: var(--skip-ink, white);
}
.loop-steps article.is-current .step-no {
  color: var(--ink);
}
@media (min-width: 1500px) {
  .wrap {
    padding-inline: 90px;
  }
  .hero-art {
    margin-right: -15%;
  }
}
@media (max-width: 1050px) {
  .header nav {
    gap: 15px;
  }
  .header {
    gap: 22px;
  }
  .header-actions {
    gap: 16px;
  }
  .header nav a:nth-child(3) {
    display: none;
  }
  .hero {
    grid-template-columns: 45% 55%;
    padding-top: 30px;
  }
  .hero-copy > .text-link {
    margin-left: 12px;
  }
  .hero-art {
    margin-left: -18%;
    margin-right: -24%;
  }
  h1 {
    font-size: 78px;
  }
  .intro {
    grid-template-columns: 25% 75%;
  }
  .margin-note {
    display: none;
  }
  .loop-layout {
    grid-template-columns: 50% 50%;
  }
  .loop-steps h3 {
    font-size: 28px;
  }
}
@media (max-width: 760px) {
  .wrap {
    padding-inline: 24px;
  }
  .edition {
    padding-inline: 18px;
    height: 32px;
    font-size: 8px;
  }
  .edition > span {
    display: none;
  }
  .header {
    height: 86px;
    gap: 10px;
  }
  .header nav {
    display: none;
  }
  .wordmark {
    font-size: 34px;
  }
  .header-actions {
    margin-left: auto;
    font-size: 11px;
    gap: 15px;
  }
  .button.small {
    padding: 9px 12px;
    gap: 12px;
    font-size: 10px;
  }
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    overflow: hidden;
  }
  .hero-copy {
    padding-bottom: 0;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 0.13em;
    margin-bottom: 22px;
  }
  h1 {
    font-size: clamp(57px, 11.5vw, 84px);
    line-height: 1.035;
    letter-spacing: -0.05em;
  }
  h1 br:nth-of-type(1),
  h1 em br {
    display: none;
  }
  h1 > br:nth-of-type(2) {
    display: block;
  }
  .lede {
    font-size: 13px;
    max-width: 330px;
    line-height: 1.8;
    margin: 23px 0;
  }
  .desktop {
    display: none;
  }
  .hero-copy > .text-link {
    margin-left: 24px;
  }
  .hero-art {
    margin: 10px -22px 5px;
    width: auto;
    align-self: stretch;
  }
  .hero-art figcaption {
    padding: 0 0 25px;
    gap: 7px;
  }
  .hero-art .hand {
    font-size: 19px;
  }
  .fig-number {
    font-size: 8px;
  }
  .hero-foot {
    width: 100%;
    padding: 20px 0;
    gap: 10px;
  }
  .hero-foot > span:first-child {
    font-size: 8px;
    letter-spacing: 0.05em;
  }
  .hero-foot > span:nth-child(2) {
    display: none;
  }
  .hero-foot > a {
    margin-left: auto;
  }
  .intro {
    display: block;
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .intro h2 {
    font-size: 40px;
  }
  .intro p:not(.eyebrow) {
    font-size: 13px;
    margin-top: 22px;
  }
  .eyebrow {
    font-size: 9px;
    margin-bottom: 22px;
  }
  .loop-section {
    padding-top: 65px;
    padding-bottom: 60px;
  }
  .section-heading {
    text-align: left;
  }
  .section-heading h2 {
    font-size: 39px;
  }
  .loop-layout {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
  }
  .pantry-art {
    margin: 0 -20px;
    width: calc(100% + 40px);
  }
  .pantry-art figcaption {
    margin-top: 0;
    margin-bottom: 30px;
  }
  .loop-steps {
    width: 100%;
  }
  .loop-steps article {
    padding: 24px 0;
    grid-template-columns: 1fr;
  }
  .loop-steps h3 {
    font-size: 29px;
  }
  .loop-steps p {
    font-size: 13px;
  }
  .pencil-label {
    font-size: 17px;
  }
  .table-scene {
    padding-top: 60px;
    padding-bottom: 45px;
  }
  .table-intro h2 {
    font-size: 40px;
  }
  .table-intro > p:last-child {
    font-size: 13px;
  }
  .table-scene > figure {
    width: 140.25%;
    max-width: none;
    margin: 35px -20.125%;
  }
  .reason-row {
    gap: 12px;
    padding-inline: 18px;
    justify-content: space-between;
  }
  .reason-row > div {
    min-width: 0;
    flex: 1;
  }
  .reason-row p {
    font-size: 17px;
  }
  .tag {
    font-size: 8px;
    padding: 5px 6px;
    letter-spacing: 0.06em;
  }
  .connector {
    display: none;
  }
  .invitation {
    padding: 60px 0 42px;
  }
  .invitation h2 {
    font-size: 65px;
  }
  .invitation-inner > p:not(.eyebrow) {
    font-size: 13px;
  }
  .button.light {
    margin-bottom: 33px;
  }
  .limits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: left;
    gap: 17px 10px;
    padding: 22px 10px 0;
  }
  .limits strong {
    font-size: 25px;
  }
  .trust {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  .trust h2 {
    font-size: 36px;
  }
  .trust h2 br {
    display: none;
  }
  .trust-points {
    gap: 0;
    font-size: 11px;
    line-height: 1.6;
    flex-direction: column;
    margin: 27px 0;
  }
  .trust-points p {
    padding: 13px 0;
  }
  .trust-points p + p {
    border-left: none;
  }
  .trust-points br {
    display: none;
  }
  .footer-top {
    flex-wrap: wrap;
    gap: 25px;
    padding: 32px 0;
  }
  .footer-top > p {
    margin-left: auto;
  }
  .footer-top nav {
    margin-left: 0;
    gap: 25px;
    width: 100%;
    justify-content: space-between;
    font-size: 11px;
  }
  .footer-bottom {
    gap: 15px;
    flex-wrap: wrap;
    font-size: 8px;
  }
  .footer-bottom > span:last-child {
    width: 100%;
  }
  .footer-bottom > a {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}
/* Keep the whole still life in view and the first action inside a laptop viewport. */
@media (min-width: 761px) {
  .header {
    height: 100px;
  }
  .hero {
    padding-top: 30px;
  }
  h1 {
    font-size: clamp(64px, 6vw, 94px);
  }
  .hero-copy {
    padding-bottom: 60px;
  }
  .hero-art {
    margin-right: -7%;
    margin-left: -8%;
    margin-top: 0;
  }
  .hero-art img {
    mask-image:
      linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
      linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
    mask-composite: intersect;
  }
  .lede {
    margin-block: 24px;
  }
}
.invitation a:focus-visible {
  outline-color: #f8f6ee;
}
.hero-art img {
  mask-image:
    linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}

/* Real application captures are printed into the study, without invented UI. */
.hero {
  grid-template-columns: 38% 62%;
  overflow: visible;
}
.hero-composition {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding-bottom: 45px;
}
.hero-composition .hero-art {
  margin: 0;
  width: 100%;
  min-width: 0;
}
.hero-composition .hero-art figcaption {
  gap: 12px;
  padding-bottom: 0;
  text-align: center;
}
.hero-composition .hero-art .hand {
  font-size: 21px;
}
.hero-composition .hero-art .fig-number {
  font-size: 8px;
  max-width: 220px;
}
.app-screen {
  min-width: 0;
}
.phone-screen {
  width: 100%;
  max-width: 393px;
}
.hero-dashboard {
  max-width: 360px;
  justify-self: end;
}
.capture-link {
  display: block;
  background: #fff;
  border: 1px solid var(--capture-line, #b8c1af);
  box-shadow: 5px 8px 0 var(--capture-shadow, #e8ebdf);
}
.capture-link img {
  width: 100%;
  height: auto;
  /* The tint and edge masks used for drawings must never alter real UI. */
  mix-blend-mode: normal;
  mask-image: none;
}
.phone-screen .capture-link img {
  aspect-ratio: 393 / 852;
}
.wide-screen .capture-link img {
  aspect-ratio: auto;
}
.capture-link:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 7px;
}
.screen-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 19px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.screen-caption .fig-number {
  color: var(--ink);
  font-size: 9px;
  letter-spacing: 0.1em;
}
.capture-open {
  color: var(--ink);
}
.inventory-spread {
  margin-top: 90px;
  padding-top: 42px;
  border-top: 1px solid var(--line);
}
.spread-heading {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10%;
  align-items: end;
  margin-bottom: 50px;
}
.spread-heading h3,
.spending-copy h3 {
  font-size: clamp(37px, 3.7vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.spread-heading > p {
  max-width: 390px;
  font-size: 14px;
  color: var(--muted);
}
.screen-pair {
  display: grid;
  grid-template-columns: minmax(0, 393px) minmax(60px, 120px) minmax(0, 393px);
  justify-content: center;
  gap: 28px;
  align-items: start;
}
.shopping-screen {
  margin-top: 100px;
}
.pair-annotation {
  align-self: center;
  color: var(--accent-link, #58764f);
  text-align: center;
}
.pair-annotation .hand {
  display: block;
  font-size: 22px;
  line-height: 1.25;
}
.pair-annotation svg {
  display: block;
  width: 100%;
  margin-top: 20px;
}
.week-spread {
  padding-top: 90px;
  padding-bottom: 20px;
}
.kitchen-opening {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 5%;
  align-items: center;
  margin-bottom: 56px;
}
.kitchen-copy h2 {
  font-size: clamp(40px, 4vw, 60px);
}
.kitchen-copy > p:not(.eyebrow),
.spending-copy > p:not(.eyebrow) {
  max-width: 410px;
  margin-top: 26px;
  font-size: 14px;
  color: var(--muted);
}
.kitchen-copy .hand,
.spending-copy .hand {
  display: inline-block;
  margin-top: 27px;
  font-size: 21px;
}
.kitchen-art {
  min-width: 0;
}
.kitchen-art img {
  width: 100%;
  mix-blend-mode: multiply;
}
.kitchen-art figcaption {
  margin-top: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 9px;
}
.wide-caption {
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}
.wide-caption > span {
  min-width: 0;
}
.spending-spread {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 6%;
  align-items: center;
  margin-top: 84px;
}
/* Let the caption carry the note; app pixels are never shrunk into a card grid. */
@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding-bottom: 38px;
  }
  .hero h1 {
    max-width: 800px;
    font-size: clamp(57px, 7.8vw, 82px);
  }
  .hero h1 br:first-of-type,
  .hero h1 em br {
    display: none;
  }
  .hero-composition {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 35px;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
  }
  .hero-dashboard {
    max-width: 340px;
  }
  .spending-spread {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .spending-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8%;
    align-items: center;
  }
  .spending-copy .eyebrow {
    grid-column: 1 / -1;
  }
  .spending-copy > p:not(.eyebrow) {
    margin-top: 0;
  }
  .spending-copy .hand {
    grid-column: 2;
    margin-top: 14px;
  }
}
@media (max-width: 760px) {
  .hero {
    overflow: visible;
  }
  .hero h1 {
    font-size: clamp(54px, 11vw, 78px);
  }
  .hero-composition {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 32px;
  }
  .hero-composition .hero-art {
    max-width: 550px;
    justify-self: center;
  }
  .hero-composition .hero-art figcaption {
    gap: 7px;
  }
  .hero-dashboard {
    width: min(100%, 340px);
    justify-self: end;
  }
  .inventory-spread {
    margin-top: 52px;
    padding-top: 30px;
  }
  .spread-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 34px;
  }
  .spread-heading h3,
  .spending-copy h3 {
    font-size: 39px;
  }
  .spread-heading > p {
    font-size: 13px;
  }
  .screen-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .screen-pair .phone-screen {
    width: min(100%, 360px);
  }
  .shopping-screen {
    margin-top: 0;
    justify-self: end;
  }
  .pair-annotation {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .pair-annotation .hand {
    font-size: 20px;
  }
  .pair-annotation svg {
    width: 80px;
    margin: 0;
    transform: rotate(90deg);
  }
  .week-spread {
    padding-top: 60px;
    padding-bottom: 0;
  }
  .kitchen-opening {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 34px;
  }
  .kitchen-copy h2 {
    font-size: 43px;
  }
  .kitchen-copy > p:not(.eyebrow),
  .spending-copy > p:not(.eyebrow) {
    font-size: 13px;
    margin-top: 22px;
  }
  .wide-caption {
    flex-direction: column;
    gap: 6px;
  }
  .spending-spread {
    margin-top: 52px;
    gap: 28px;
  }
  .spending-copy {
    display: block;
  }
  .spending-copy .hand {
    margin-top: 20px;
  }
}

/* The opening story needs a lived-in scene; keep its artwork whole. */
#how-it-works {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 26px 6%;
  padding-block: 76px;
}
#how-it-works > .eyebrow {
  grid-column: 1/-1;
  grid-row: 1;
  padding: 0;
}
#how-it-works > div {
  grid-column: 2;
  grid-row: 2;
}
#how-it-works h2 {
  font-size: clamp(32px, 3.5vw, 51px);
}
#how-it-works h2 br {
  display: none;
}
#how-it-works .margin-note {
  display: none;
}
.intro-scene {
  margin: 0;
  grid-column: 1;
  grid-row: 2;
}
.intro-scene img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  mask-image:
    linear-gradient(to right, transparent, #000 4%, #000 96%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.intro-scene figcaption {
  text-align: center;
  margin-top: 18px;
  font-size: 20px;
}
@media (max-width: 680px) {
  #how-it-works {
    grid-template-columns: 1fr;
    gap: 25px;
    padding-block: 48px;
  }
  #how-it-works > div {
    grid-column: 1;
    grid-row: 2;
  }
  .intro-scene {
    grid-row: 3;
    max-width: 500px;
  }
}

/* Center each expanded feature's phone and its explanation link. */
.illustration-site .feature-guide .feature-proof {
  margin-inline: auto;
  text-align: center;
}
.illustration-site .footer-top nav {
  flex-wrap: wrap;
  row-gap: 14px;
}
@media (max-width: 760px) {
  .illustration-site .footer-top nav {
    gap: 14px 20px;
    justify-content: flex-start;
  }
}

.illustration-site .beta-promise {
  max-width: 600px;
  margin: 36px auto 32px;
}
.illustration-site .beta-promise h3 {
  font: normal clamp(26px, 3vw, 38px)/1.2 var(--serif);
  color: #f5f4e9;
}
.illustration-site .beta-promise p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--invitation-copy, #d8ddce);
}
.illustration-site .beta-promise .beta-promise-members {
  margin-top: 8px;
  font-size: 14px;
}

/* Supporting copy should remain readable alongside the larger editorial type. */
.illustration-site :is(.eyebrow, .fig-number, .screen-caption, .chip, .limits,
  .invitation small, .footer-top p, .footer-top nav,
  .hero-art figcaption small, .kitchen-art figcaption, .pantry-art figcaption) {
  font-size: 14px;
  line-height: 1.6;
}
.illustration-site .hero-composition .hero-art figcaption small { font-size: 14px; }
.illustration-site .hero-composition .hero-art figcaption .fig-number { font-size: 14px; }
.illustration-site :is(.header nav, .header-actions, .button, .text-link,
  .tag, .hero-foot, .preview-note, .trust-points p) { font-size: 14px; }
.illustration-site .hero-foot span { font-size: 14px; }
.illustration-site .voice-story :is(.voice-story-eyebrow, .voice-story-example-note,
  .voice-story-example-label, .voice-story-interpretation strong,
  .voice-story-footnote, .voice-story-capture figcaption) { font-size: 14px; }
.illustration-site .voice-story-choices button { font-size: 14px; }
.illustration-site .receipt-playback-time { font-size: 12px; }

/* On narrow screens, present only the genuine dialog beside its choices.
   Each bottom crop starts at that capture's sheet edge, without a phone shell. */
@media (max-width: 1000px) {
  .illustration-site .voice-story-examples {
    display: flex;
    flex-direction: column;
  }
  .illustration-site .voice-story-choices { order: 1; margin-bottom: 12px; }
  .illustration-site .voice-story-capture { order: 2; margin-top: 0 !important; }
  .illustration-site .voice-story-readout { order: 3; }
  .illustration-site .voice-story-footnote { order: 4; }
  .illustration-site .voice-story-capture .drawn-phone-frame {
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }
  .illustration-site .voice-story-capture .drawn-phone-frame::before,
  .illustration-site .voice-story-capture .drawn-phone-frame::after {
    display: none;
  }
  .illustration-site .voice-story-capture .drawn-phone-frame > img {
    height: auto;
    aspect-ratio: 784 / 706;
    object-fit: cover;
    object-position: bottom;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .illustration-site .voice-story-capture img[src$="capture-voice-count.webp"] { aspect-ratio: 784 / 777; }
  .illustration-site .voice-story-capture img[src$="capture-voice-add.webp"] { aspect-ratio: 784 / 746; }
  .illustration-site .voice-story-capture img[src$="capture-voice-waste.webp"] { aspect-ratio: 784 / 762; }
}

/* Responsive app captures retain their original light image and layout. */