/* Tara landing — built from Figma node 454:553 (1440px desktop frame) */
:root {
  --bg: #0b0a09;
  --surface: #131110;
  --surface-2: #11100f;
  --line: #33302e;
  --ink: #ede8de;
  --ink-night: #f7f4ef;
  --muted: #a39c91;
  --muted-night: #a8a5a1;
  --muted-2: #999187;
  --accent: #c77a4d;
  --accent-soft: #db9565;
  --on-accent: #140d08;

  --f-display: "42dot Sans", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --f-logo: "Playfair Display", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button, input { font: inherit; }

.page {
  width: 1440px;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 54px;
  overflow: hidden;
}
section { position: relative; width: 1440px; }

/* image helpers */
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fill  { position: absolute; inset: 0; width: 100%; height: 100%; }

/* type scale */
.h-80 { font-family: var(--f-display); font-size: 80px; letter-spacing: -3.2px; line-height: 1.04; color: var(--ink); }
.h-64 { font-family: var(--f-display); font-size: 64px; letter-spacing: -2.56px; line-height: 1.04; color: var(--ink); }
.h-56 { font-family: var(--f-display); font-size: 56px; letter-spacing: -2.24px; line-height: 1.04; color: var(--ink); }
.lh-102 { line-height: 1.02; }
.lh-086 { line-height: 0.86; }
.lead { font-size: 19px; line-height: 1.5; letter-spacing: -0.57px; color: var(--muted); }
.center { text-align: center; }
.eyebrow { font-family: var(--f-mono); font-size: 14px; line-height: 1.5; color: var(--accent); }

/* logo */
.logo { font-family: var(--f-logo); font-weight: 700; color: var(--ink); }
.logo span { color: var(--accent); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 10px;
  font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px;
  white-space: nowrap; transition: filter .18s ease-out, background-color .18s ease-out;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { border: 1px solid rgba(237,232,222,.35); color: var(--ink); }
.btn--ghost:hover { background: rgba(237,232,222,.08); }

/* ───────── 00 Hero ───────── */
.hero { height: 960px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg-clip { position: absolute; inset: 0; overflow: hidden; }
.hero__bg-1 { position: absolute; top: 0; left: -14.39%; width: 114.4%; height: 100%; }
.hero__bg-4 { position: absolute; inset: 0; width: 100%; height: 100%; object-position: bottom; }
.hero__fade-bottom { position: absolute; left: 0; top: 0; width: 1440px; height: 960px; }
.hero__fade-top { position: absolute; left: 0; top: 0; width: 1440px; height: 180px; background: linear-gradient(to bottom, rgba(11,10,9,.75), rgba(11,10,9,0)); }
.hero__logo { position: absolute; left: 64px; top: 40px; font-size: 34px; line-height: 1.5; }
.hero__nav {
  position: absolute; left: 480px; top: 52px; display: flex; gap: 32px;
  font-size: 15px; line-height: 1.5; letter-spacing: -0.45px; color: var(--ink); white-space: nowrap;
}
.hero__nav a:hover { color: var(--accent-soft); }
.hero__cta { position: absolute; left: 1207px; top: 40px; }
.hero__copy {
  position: absolute; left: 64px; top: 856px; width: 1312px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.hero__title { display: flex; align-items: flex-end; gap: 9px; }
.hero__title h1 {
  font-family: var(--f-display); font-weight: 500; color: #fff;
  font-size: 101.529px; line-height: 101.529px; letter-spacing: -4.0612px;
  width: 188.725px; height: 89.722px;
}
.hero__jobs { display: flex; flex-direction: column; gap: 3.447px; font-size: 24.129px; line-height: 1.15; letter-spacing: -0.7239px; white-space: nowrap; color: var(--ink-night); }
.hero__jobs .muted { color: var(--muted-night); }
.hero__actions { display: flex; gap: 16px; align-items: center; }

/* ───────── 01 How it sits ───────── */
.how { padding: 120px 64px; display: flex; flex-direction: column; gap: 40px; }
.how__row { display: flex; gap: 24px; align-items: flex-start; }
.how__item { display: flex; flex-direction: column; gap: 20px; }
.how__img { position: relative; height: 560px; border-radius: 8px; overflow: hidden; }
.how__img--camera { width: 832px; }
.how__img--tara { width: 456px; }
.how figcaption { display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.how h3 { font-weight: 500; font-size: 20px; letter-spacing: -0.6px; color: var(--ink); }
.how figcaption p { font-size: 17px; letter-spacing: -0.51px; color: var(--muted); }

.cam-photo { position: absolute; left: -0.02%; top: -53.67%; width: 100%; height: 197.78%; max-width: none; }

/* ───────── Voice first ───────── */
.voice { padding: 104px 64px; display: flex; flex-direction: column; gap: 40px; }
.voice__intro { display: flex; align-items: flex-end; justify-content: space-between; }
.voice__desc { width: 440px; font-size: 19px; line-height: 1.5; letter-spacing: -0.57px; color: var(--muted-night); }
.voice__headline { width: 760px; text-align: right; font-family: var(--f-display); font-size: 56px; line-height: 1.04; letter-spacing: -2.24px; color: var(--ink-night); }
.voice__scene { position: relative; height: 600px; border-radius: 8px; overflow: hidden; }
.voice__bg { position: absolute; inset: 0; }
.voice__shade { position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.voice__wave {
  position: absolute; left: 40px; top: 98px; width: 1232px; height: 240px;
  display: flex; align-items: center; justify-content: space-between; opacity: .22;
}
.voice__wave i { display: block; width: 16px; border-radius: 20px; background: var(--ink-night); }
.voice__object { position: absolute; left: 303px; top: 192px; width: 248px; height: 325px; }
.voice__exchange { position: absolute; left: 822px; top: 458px; width: 470px; display: flex; flex-direction: column; gap: 20px; }
.voice__q { font-family: var(--f-display); font-size: 34px; line-height: 1.15; letter-spacing: -1.36px; color: var(--ink-night); }
.voice__a { display: flex; gap: 12px; align-items: flex-start; }
.voice__a img { flex-shrink: 0; }
.voice__a p { flex: 1; font-size: 19px; line-height: 1.5; letter-spacing: -0.57px; color: var(--ink-night); }
.voice__note { position: absolute; left: 40px; top: 554px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: var(--muted-night); white-space: nowrap; }

/* ───────── 02 Watch · Active guidance ───────── */
.guide { position: relative; height: 900px; overflow: hidden; background: var(--bg); }
.guide__shade { position: absolute; inset: 0; pointer-events: none; }
.guide__shade--l { background: linear-gradient(to right, rgba(11,10,9,.95) 0%, rgba(11,10,9,.7) 42%, rgba(11,10,9,0) 68%); }
.guide__shade--b {
  background: linear-gradient(180deg, rgba(11,10,9,.7) 0%, rgba(11,10,9,0) 15%),
              linear-gradient(180deg, rgba(11,10,9,0) 60%, rgba(11,10,9,.95) 100%);
}
.guide__cam {
  position: absolute; left: 64px; top: 65px; display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: var(--ink); white-space: nowrap;
}
.guide__marker { position: absolute; left: 964px; top: 370px; width: 40px; height: 40px; }
.guide__ring { position: absolute; left: 0; top: 0; }
.guide__dot { position: absolute; left: 15px; top: 15px; }
.guide__marker span {
  position: absolute; left: 50px; top: 10px; white-space: nowrap;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: var(--ink);
}
.guide__copy { position: absolute; left: 64px; top: 565px; width: 560px; }
.guide__who { font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--accent); }
.guide__say { margin-top: 10px; font-family: var(--f-display); font-size: 64px; line-height: 1.04; letter-spacing: -2.56px; color: var(--ink); }
.guide__desc { margin-top: 28.44px; width: 480px; font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #c9c2b6; }
.guide__track { position: absolute; left: 64px; top: 812px; width: 1312px; height: 2px; background: rgba(255,255,255,.2); }
.guide__done { width: 524.8px; height: 2px; background: var(--accent); transform-origin: left center; }
.guide__steps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.guide .step { position: absolute; left: var(--x); top: 813px; }
.guide .step img { position: absolute; left: 0; top: 0; max-width: none; transform: translate(-50%, -50%); }
.guide .step span {
  position: absolute; left: 0; top: 17px; transform: translateX(-50%); white-space: nowrap;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a;
}
.guide .step:first-child span { transform: none; }
.guide .step:last-child span { transform: translateX(-100%); }
.guide .step--done span { color: #c9c2b6; }
.guide .step--now span { color: var(--ink); }

/* ───────── 03 Watch · While you wait ───────── */
.wait { padding: 103px 64px 118px; display: flex; flex-direction: column; align-items: center; }
.wait__head { width: 720px; display: flex; flex-direction: column; align-items: center; gap: 24.88px; text-align: center; }
.wait__head h2 { width: 720px; }
.wait__lead { width: 600px; font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #9c958a; }
.wait__cards { margin-top: 129px; display: flex; gap: 16px; }
.wcard { position: relative; width: 648px; height: 640px; padding: 32px; background: var(--surface); border-radius: 16px; overflow: hidden; }
.wcard__feed { position: relative; width: 584px; height: 314px; border-radius: 10px; overflow: hidden; }
.wcard__cam {
  position: absolute; left: 20px; top: 17px; display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: var(--ink); white-space: nowrap;
}
.wcard h3 { margin-top: 32px; width: 440px; font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1.12; letter-spacing: -0.96px; color: var(--ink); }
.wcard__desc { margin-top: 12.12px; width: 400px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }
.wcard__quote { margin-top: 32px; width: 475px; font-size: 36px; line-height: 1.2; letter-spacing: -1.08px; color: #e8a374; }
.wait__foot {
  margin-top: 56px; width: 1312px; padding-top: 25px; border-top: 1px solid #262421; text-align: center;
  font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #9c958a;
}

/* ───────── 04 Plan ───────── */
.plan { padding: 140px 0; }
.plan__head { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 52px 64px 0; }
.plan__stage { position: relative; margin-top: 64px; height: 831px; overflow: hidden; }
.plan__img { position: absolute; left: 64px; top: 0; width: 1312px; height: 620px; object-fit: cover; border-radius: 10px; }
.week {
  position: absolute; left: 82px; top: 548px; width: 1276px;
  display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 16px;
  background: #0e0d0c; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.week__strip { display: flex; gap: 10px; }
.day {
  width: 170px; height: 196px; padding: 18px 16px; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; line-height: 1.5;
}
.day__dow { font-size: 13px; letter-spacing: -0.26px; color: var(--muted); }
.day__num { font-family: var(--f-display); font-size: 36px; letter-spacing: -1.44px; color: var(--ink); }
.day__meal { width: 138px; font-weight: 500; font-size: 15px; letter-spacing: -0.45px; color: var(--ink); }
.day__note { width: 138px; font-size: 13px; letter-spacing: -0.39px; color: var(--muted); }
.day__note--accent { color: var(--accent); }
.day--today { background: var(--accent); border: 0; }
.day--today .day__dow, .day--today .day__note { color: #ffe0cc; }
.day--today .day__num, .day--today .day__meal { color: #fff5eb; }
.week__foot { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.week__family { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.avatars span {
  width: 28px; height: 28px; margin-right: -8px; border-radius: 999px; border: 2px solid #0e0d0c;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 11px; letter-spacing: -0.33px; color: var(--ink);
}
.avatars span:last-child { margin-right: 0; }
.week__mode { font-size: 13px; letter-spacing: -0.26px; line-height: normal; color: var(--muted); }
.week__swap {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 14px; cursor: pointer;
  background: transparent; border: 1px solid rgba(237,232,222,.25); border-radius: 999px;
  font-size: 13px; letter-spacing: -0.39px; color: var(--ink); line-height: normal;
}
.week__swap:hover { background: rgba(237,232,222,.06); }

/* ───────── 05 Shop ───────── */
.shop { padding: 80px 0 140px; }
.shop__head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 64px; }
.shop__stage { position: relative; margin-top: 56px; height: 780px; padding: 0 64px; display: flex; gap: 16px; }
.shop__photo { position: relative; width: 848px; height: 780px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; flex: none; }
.shop__app { position: relative; width: 448px; height: 780px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; flex: none; }

/* Phone mock-up of the Tara app's Groceries tab (Figma 654:1144) */
.phone { position: absolute; left: 69px; top: 59px; width: 306px; height: 656px; background: #0b0b0c; border: 1.162px solid #3a3a3d; border-radius: 35px; }
.phone__screen {
  position: absolute; left: .84px; top: .84px; width: 302px; height: 652px; overflow: hidden;
  background: #000; border-radius: 35px; color: #fff; line-height: normal;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif;
}
.phone__screen > * { position: absolute; }
.ios__time { left: 41.35px; top: 11.6px; font-weight: 600; font-size: 13.174px; }
.ios__island { left: 102.18px; top: 8.5px; width: 97.643px; height: 28.673px; background: #000; border-radius: 14.724px; }
.ios__bar { width: 2.325px; background: #fff; border-radius: .775px; }
.ios__battery { left: 249.42px; top: 14.7px; width: 19.374px; height: 9.299px; border: .775px solid rgba(255,255,255,.4); border-radius: 3.1px; }
.ios__battery i { position: absolute; left: .77px; top: .77px; width: 16.274px; height: 6.2px; background: #fff; border-radius: 1.55px; }
.ios__cap { left: 269.57px; top: 17.8px; width: 1.162px; height: 3.1px; background: #fff; opacity: .4; border-radius: .775px; }
.ios__home { left: 99px; top: 640px; width: 103.842px; height: 3.875px; background: #fff; border-radius: 2.325px; }
.app__title { left: 15.39px; top: 46.47px; font-weight: 700; font-size: 26.348px; letter-spacing: -0.2635px; }
.app__add { left: 258.72px; top: 48.79px; }
.app__plus { left: 267.24px; top: 57.32px; width: 10.849px; height: 10.849px; }
.app__plus img { position: absolute; left: -7.14%; top: -7.14%; width: 114.28%; height: 114.28%; max-width: none; }
.app__seg {
  left: 12.29px; top: 89.87px; display: flex; align-items: center; gap: 22px; padding: 2px 21px;
  background: #1c1c1e; border-radius: 13.949px;
  font-weight: 500; font-size: 11.624px; letter-spacing: -0.0581px; color: #98989f; white-space: nowrap;
}
.app__seg i { flex: none; width: 89.893px; height: 23.248px; background: #3a3a3c; border-radius: 11.624px; }
.app__seg b { position: absolute; left: 111.2px; top: 6.2px; font-weight: 600; color: #fff; }
.app__banner { left: 12px; top: 130px; width: 278px; padding: 7px 11px; display: flex; align-items: center; gap: 9px; background: rgba(199,122,76,.16); border-radius: 17.049px; }
.app__banner img { flex: none; }
.app__banner div { position: relative; width: 192px; height: 40.211px; }
.app__banner b { position: absolute; left: .33px; top: 0; font-weight: 600; font-size: 11.624px; letter-spacing: -0.0581px; color: #e8a374; white-space: nowrap; }
.app__banner span { position: absolute; left: 0; top: 16.21px; width: 192px; font-size: 10.074px; letter-spacing: -0.0504px; color: #98989f; }
.app__group-label { left: 24.68px; font-weight: 600; font-size: 11.624px; letter-spacing: -0.0581px; color: #98989f; white-space: nowrap; }
.app__group { left: 12.29px; width: 277.429px; background: #1c1c1e; border-radius: 17.049px; }
.app__row { position: relative; height: 40.3px; font-size: 13.174px; letter-spacing: -0.0659px; white-space: nowrap; }
.app__row + .app__row::before { content: ""; position: absolute; left: 43.4px; right: 0; top: 0; height: .387px; background: #38383a; }
.app__row > img { position: absolute; left: 12.4px; top: 10.85px; width: 18.599px; height: 18.599px; }
.app__row > span:nth-of-type(1) { position: absolute; left: 43.4px; top: 11.62px; }
.app__row > span:nth-of-type(2) { position: absolute; right: 12.4px; top: 11.62px; color: #98989f; }
.app__row--have > span:nth-of-type(2) { left: 43.4px; right: auto; top: 9.3px; color: #5c5c61; }
.app__row--have small { display: block; margin-top: 2.1px; font-size: 10.074px; letter-spacing: -0.0504px; color: #98989f; }
.app__row > span.app__done { position: absolute; left: 12.4px; top: 15.5px; width: 18.599px; height: 18.599px; }
.app__done img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.app__done .app__check { left: 4.645px; top: 5.425px; width: 9.299px; height: 7.75px; }
.app__fade { left: -.11px; top: 551.73px; width: 302.227px; height: 102.292px; background: linear-gradient(to bottom, rgba(0,0,0,0), #000 35%, #000); }
.app__cta {
  left: 12.29px; top: 587.38px; width: 277.429px; height: 40.297px; display: flex; align-items: center; justify-content: center;
  background: #c77a4c; border-radius: 33px; font-weight: 600; font-size: 13.174px; letter-spacing: -0.0659px;
}

/* "Or just say it" */
.say { margin-top: 16px; height: 487px; padding: 0 64px 120px; display: flex; flex-direction: column; align-items: center; }
.say__card {
  width: 1312px; padding: 20px; display: flex; gap: 54px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
}
.say__img { flex: none; width: 298px; height: 325px; object-fit: cover; border-radius: 8px; }
.say__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 38px; }
.say__eyebrow { font-family: var(--f-display); font-size: 14px; line-height: 1.5; color: var(--accent); }
.say__line { width: 851.75px; font-family: var(--f-display); font-size: 48px; line-height: 1.02; letter-spacing: -1.92px; color: #e8a374; }
.say__line--q { width: auto; font-size: 52px; letter-spacing: -2.08px; color: var(--muted); white-space: nowrap; }
.say__note { width: 600px; font-size: 17px; line-height: 1.5; color: var(--muted); }

/* ───────── 06 Nutrition ───────── */
.nutrition { padding: 40px 0 140px; }
.nutrition__top { padding: 0 64px; display: flex; flex-direction: column; gap: 40px; }
.nutrition__head { display: flex; align-items: flex-end; gap: 80px; }
.nutrition__desc { width: 330px; font-size: 18px; line-height: 1.5; letter-spacing: -0.54px; color: var(--muted); }
.numbers { display: flex; gap: 16px; }
.num {
  flex: 1 0 0; min-width: 0; padding: 28px; display: flex; flex-direction: column; gap: 18px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
}
.num__icon {
  width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(237,232,222,.05); border: 1px solid rgba(237,232,222,.14);
}
.num__value { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.num__value span { font-family: var(--f-display); font-size: 96px; line-height: 1.02; letter-spacing: -3.84px; color: var(--ink); }
.num__value small { font-size: 22px; line-height: 1.5; letter-spacing: -0.66px; color: var(--muted); }
.num p { font-size: 15px; line-height: 1.5; letter-spacing: -0.45px; color: var(--muted); white-space: nowrap; }
.num--accent { background: rgba(199,122,77,.08); border-color: rgba(199,122,77,.45); }
.num--accent .num__icon { background: rgba(199,122,77,.12); border-color: rgba(199,122,77,.45); }
.num--accent .num__value span { color: var(--accent); }
.dinner { position: relative; height: 748px; overflow: hidden; }
.dinner__img { position: absolute; left: 64px; top: 60px; width: 1040px; height: 640px; object-fit: cover; border: 1px solid #202020; border-radius: 30px; }
.dinner__tara {
  position: absolute; left: 980px; top: 28px; width: 400px; height: 500px; object-fit: cover;
  border: 5px solid var(--bg); border-radius: 10px;
}
.dinner__note { position: absolute; left: 64px; top: 724px; width: 560px; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--muted); }

/* ───────── 08 Hardware (recipes) ───────── */
.hardware { padding: 120px 0 240px; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.hardware__head { display: flex; align-items: flex-end; gap: 147px; }
.hw { position: relative; width: 1440px; height: 925px; overflow: hidden; overflow-x: clip; overflow-y: visible; }
.hw__bg { height: 810px; bottom: auto; }
.hw__cards { position: absolute; left: 0; top: 115px; width: 1440px; height: 621px; }
.rc { position: absolute; top: 0; width: 422px; height: 648px; }
.rc--main { height: 654px; }
.rc--glass { opacity: .72; }
.rc--glass::before {
  content: ""; position: absolute; inset: 0; border-radius: 35px;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(to bottom, rgba(115,115,115,.21), rgba(255,255,255,.39));
  /* No backdrop blur: the photo behind is already soft, and live blur made this section judder */
}
.rc__frame { position: absolute; left: 0; top: 0; width: 422px; height: 654px; }
.rc__img { position: absolute; top: 24px; width: 379px; height: 286px; object-fit: cover; border-radius: 35px; }
.rc__body { position: absolute; left: 29px; top: 336px; width: 282px; height: 259px; }
.rc h3 { position: absolute; top: 0; left: 0; width: 282px; font-family: var(--f-display); font-size: 34px; line-height: 1.15; letter-spacing: -1.36px; color: #fff; }
.rc__meta { position: absolute; top: 65px; left: 0; display: flex; gap: 16px; }
.rc__meta span { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #fff; white-space: nowrap; }
.rc__meta img { width: 24px; height: 24px; }
.rc__desc { position: absolute; top: 101px; left: 0; width: 282px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #fff; opacity: .8; }
.rc__btn {
  position: absolute; left: -8px; top: 192.5px; display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 28px; border-radius: 999px; background: var(--ink-night); color: #08090c;
  font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: -0.45px; white-space: nowrap;
}
.rc__btn img { transition: transform .18s ease-out; }
.rc__btn:hover img { transform: translateX(4px); }
.hw__scene { position: absolute; left: 0; right: 0; top: 111.28px; height: 810.43px; pointer-events: none; }
.hw__photo { position: absolute; left: .03%; right: .03%; top: 50%; aspect-ratio: 1439 / 809; transform: translateY(-50%); }
.hw__people { position: absolute; left: 29.53%; right: 23.7%; top: 9.39%; bottom: 0; }
.hw__tara { position: absolute; left: 1.5px; top: 367px; width: 123px; height: 163.845px; overflow: hidden; }
.hw__tara img { position: absolute; left: 0; top: -3.6%; width: 100%; height: 103.6%; max-width: none; }
.hw__cook { position: absolute; left: 69px; top: 0; width: 604px; height: 733px; overflow: hidden; }
.hw__cook img { position: absolute; left: .08%; top: .05%; width: 99.83%; height: 99.88%; max-width: none; }
/* Bottom fade: runs 229px past the photo into the page so the scene melts into the background */
.hw__floor { position: absolute; left: 0; top: 615px; width: 1440px; height: 539px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 18%, rgba(0,0,0,.5) 34%, rgba(0,0,0,.88) 46%, #000 54%, rgb(11,10,9) 80%); }
.hw__floor i { display: none; }
.hw__edge { position: absolute; top: 0; height: 925px; pointer-events: none; }
.hw__edge--r { left: 1039px; width: 401px; background: linear-gradient(-90deg, #000 13.83%, rgba(0,0,0,0) 100%); }
.hw__edge--l { left: 0; width: 437px; background: linear-gradient(90deg, #000 13.83%, rgba(0,0,0,0) 100%); }

/* ───────── 08 Works in your kitchen ───────── */
.kitchen { padding: 140px 64px; display: flex; flex-direction: column; gap: 64px; }
.kitchen__intro { display: flex; align-items: flex-end; justify-content: space-between; }
.kitchen__intro .eyebrow { margin-bottom: 24px; }
.stoves { display: flex; gap: 16px; }
.stove {
  flex: 1 0 0; min-width: 0; padding: 32px 28px; display: flex; flex-direction: column; gap: 56px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
}
.stove > div { display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.stove h3 { font-family: var(--f-display); font-size: 30px; letter-spacing: -1.2px; color: var(--ink); }
.stove p { font-size: 15px; letter-spacing: -0.45px; color: var(--muted); }
.kitchen__grid { position: relative; height: 415px; }
.also { position: absolute; left: 0; top: 273px; width: 1312px; display: flex; padding: 0 26px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.also__item {
  flex: 1 0 0; min-width: 0; display: flex; gap: 18px; padding: 28px 24px 4px 32px;
  border-left: 1px solid var(--line);
}
.also__item:first-child { padding-left: 0; border-left: 0; }
.also__item:last-child { flex: none; width: 407px; height: 110px; }
.also__item:first-child p { white-space: nowrap; }
.also__item img { flex-shrink: 0; }
.also__item > div { flex: 1; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.also__item h3 { font-weight: 500; font-size: 17px; letter-spacing: -0.51px; color: var(--ink); }
.also__item p { font-size: 15px; letter-spacing: -0.45px; color: var(--muted); }

/* ───────── 09 Privacy ───────── */
.privacy { padding: 120px 64px; }
.privacy__row { display: flex; align-items: center; gap: 80px; }
.privacy__text { display: flex; flex-direction: column; gap: 36px; }
.point { display: flex; flex-direction: column; gap: 8px; }
.point h3 { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 19px; line-height: 1.45; letter-spacing: -0.57px; color: var(--ink); }
.point p { width: 520px; font-size: 17px; line-height: 1.45; letter-spacing: -0.51px; color: var(--muted); }
.privacy__img { position: relative; width: 632px; height: 520px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }

/* ───────── 10 FAQ ───────── */
.faq { padding: 120px 64px; display: flex; flex-direction: column; gap: 48px; }
.faq__grid { display: grid; grid-template-columns: repeat(3, 405px); column-gap: 48px; row-gap: 40px; align-items: start; }
.faq__item { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); line-height: 1.45; }
.faq__item h3 { font-weight: 500; font-size: 19px; letter-spacing: -0.57px; color: var(--ink); }
.faq__item p { font-size: 16px; letter-spacing: -0.48px; color: var(--muted); }

/* ───────── 11 Closing CTA + footer ───────── */
.closing-wrap { background: var(--bg); border: 1px solid #161514; }
.closing {
  position: relative; overflow: hidden; padding: 200px 64px 180px;
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.closing__shade { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.closing__title, .closing__desc, .closing__form { position: relative; }
.closing__title { width: 1100px; font-family: var(--f-display); font-size: 120px; line-height: 1.02; letter-spacing: -4.8px; color: var(--ink); }
.closing__desc { width: 600px; font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #9e988c; }
.closing__form {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 24px; border-radius: 999px;
  background: rgba(237,232,222,.05); border: 1px solid rgba(237,232,222,.18);
  backdrop-filter: blur(15.45px); -webkit-backdrop-filter: blur(15.45px);
}
.closing__form input {
  width: 300px; height: 48px; padding: 0; border: 0; outline: none; background: transparent;
  font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--ink);
}
.closing__form input::placeholder { color: #6b665e; }
.closing__form:focus-within { border-color: rgba(199,122,77,.6); }
.closing__form button {
  padding: 14px 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--bg);
  font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; white-space: nowrap;
}
.closing__form button:hover { filter: brightness(1.08); }

.site-footer {
  display: flex; flex-direction: column; gap: 72px; padding: 80px 64px 48px;
  background: #080706; border-top: 1px solid #2b2926;
}
.site-footer__top { display: flex; align-items: flex-start; }
.site-footer__brand { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.site-footer__logo { font-size: 40px; line-height: normal; }
.site-footer__brand p { width: 320px; font-size: 15px; line-height: 1.5; letter-spacing: -0.45px; color: #9e988c; }
.site-footer__cols { flex: 1; display: flex; }
.site-footer__col { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer__head { margin-bottom: 18px; font-weight: 500; font-size: 14px; line-height: 1.5; letter-spacing: -0.28px; color: #9e988c; }
.site-footer__col a { font-size: 15px; line-height: 1.5; letter-spacing: -0.45px; color: var(--ink); white-space: nowrap; }
.site-footer__col a:hover { color: var(--accent-soft); }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; padding-top: 24px;
  border-top: 1px solid #2b2926; font-size: 13px; line-height: 1.5; letter-spacing: -0.39px; white-space: nowrap;
}
.site-footer__bottom p { color: #6b665e; }
.site-footer__social { display: flex; gap: 24px; }
.site-footer__social a { color: #9e988c; }
.site-footer__social a:hover { color: var(--ink); }
.hero__nav a[aria-disabled="true"], .site-footer__col a[aria-disabled="true"] { cursor: default; }
.hero__nav a[aria-disabled="true"]:hover, .site-footer__col a[aria-disabled="true"]:hover { color: var(--ink); }