/* RecipeForm website. Colors match JournalStyle in the app. */

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/InterTight-Black-latin.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Slabo 13px";
  src: url("/assets/fonts/Slabo13px-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --tomato: #D85C3F;
  /* Darker tomato for small text on or against tomato: 4.5:1 with cream (and 5:1 with white). */
  --tomato-deep: #C24527;
  --cream: #F7F3EA;
  --ink: #171B19;
  --sage: #49694F;
  --gold: #F2C15E;
  --gold-ink: #B07E12;
  --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 4px; }

/* Hidden until a keyboard user tabs to it. */
.skip {
  position: absolute;
  z-index: 100;
  left: 12px;
  top: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--cream);
  font: 700 16px/1.2 var(--sans);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- Home ---------- */

body.home { background: var(--tomato); color: var(--cream); overflow-x: hidden; }

/*
  The scene is drawn on the 1586 x 992 canvas of the approved concept.
  --u is one concept pixel. Every size and position below is a multiple of it,
  so the composition keeps its proportions at any screen size.
*/
.hero {
  --u: min(100svh / 992, 100vw / 1586);
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}

.wordmark {
  position: absolute;
  z-index: 3;
  left: calc(44 * var(--u));
  top: calc(56 * var(--u));
  font-size: max(calc(44 * var(--u)), 1.75rem);
  text-decoration: none;
}

/* The app's wordmark font (Slabo 13px with a 0.45 pt stroke per side at 28 pt),
   in cream, beside the RecipeFormMark shapes. */
.wordmark { display: flex; align-items: center; gap: 0.32em; line-height: 1; }
.wordmark .mark { width: 1.3em; height: 1.3em; flex: none; }
.wm-text { font-family: "Slabo 13px", Georgia, serif; font-weight: 400; -webkit-text-stroke: 0.032em currentColor; }
.wm-text { color: var(--cream); }

.copy {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: calc(600 * var(--u));
  height: calc(992 * var(--u));
  pointer-events: none;
}
.copy > * { pointer-events: auto; }

.headline {
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(166 * var(--u));
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: calc(209 * var(--u));
  line-height: 0.85;
  letter-spacing: -0.055em;
}

.headline .tight { display: inline-block; margin-top: 0.13em; letter-spacing: -0.07em; }

/* Button row on top, Support/Privacy/Terms at the bottom, centered on the same
   column. Everything in the group is sized in --b: the layout unit, with a small
   rem floor so browser zoom still enlarges it. One unit for the whole group keeps
   the buttons and links in proportion at any window size. */
.cta-group {
  --b: max(var(--u), 0.04rem);
  --btn-w: 158;
  --btn-font: 20;
  position: absolute;
  left: calc(45 * var(--u));
  top: calc(790 * var(--u));
  bottom: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--b));
  pointer-events: none;
}
.cta-group > * { pointer-events: auto; }
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--b));
}
.cta, .badge {
  min-width: calc(var(--btn-w) * var(--b));
  min-height: calc(54 * var(--b));
  margin: 0;
  border-radius: 999px;
  white-space: nowrap;
}
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(16 * var(--b));
  border: calc(2 * var(--b)) solid var(--cream);
  background: var(--cream);
  color: var(--tomato-deep);
  font-weight: 700;
  font-size: calc(var(--btn-font) * var(--b));
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.cta:hover { background: var(--tomato-deep); color: var(--cream); }

/* Our own "coming soon" label: a black pill the same size as "Get the app"
   (white on black is 21:1). Apple has no coming-soon badge and does not allow
   imitations of its badges or the Apple logo; swap in Apple's official
   "Download on the App Store" badge once the app is live. */
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--b)) calc(14 * var(--b));
  background: #000000;
  color: #FFFFFF;
  line-height: 1.1;
}
.badge small { font-size: calc(12 * var(--b)); letter-spacing: 0.01em; }
.badge b { font-size: calc(var(--btn-font) * var(--b)); font-weight: 700; letter-spacing: -0.01em; }

.legal {
  display: flex;
  gap: calc(10 * var(--b));
  font-size: calc(14 * var(--b));
  font-weight: 700;
}
.legal a {
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: var(--tomato-deep);
  text-decoration: none;
}
.legal a:hover { text-decoration: underline; }

.scene {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(1586 * var(--u));
  height: calc(992 * var(--u));
}
.stage { position: absolute; inset: 0; }

.item {
  position: absolute;
  height: auto;
  filter: drop-shadow(calc(16 * var(--u)) calc(20 * var(--u)) calc(7 * var(--u)) rgb(84 22 8 / .42));
}
.nest       { left: calc(464 * var(--u));  top: calc(-12 * var(--u)); width: calc(314 * var(--u)); }
.lemon-half { left: calc(1140 * var(--u)); top: calc(9 * var(--u));   width: calc(184 * var(--u)); }
.lemon      { left: calc(1279 * var(--u)); top: calc(-67 * var(--u)); width: calc(333 * var(--u)); }
.butter     { left: calc(1236 * var(--u)); top: calc(160 * var(--u)); width: calc(286 * var(--u)); }
.pan        { left: calc(739 * var(--u));  top: calc(231 * var(--u)); width: calc(422 * var(--u)); transform: rotate(-10deg); transform-origin: 70% 51%; }
.salt       { left: calc(1465 * var(--u)); top: calc(165 * var(--u)); width: calc(148 * var(--u)); }
.pepper     { left: calc(1478 * var(--u)); top: calc(346 * var(--u)); width: calc(146 * var(--u)); }
.plate      { left: calc(853 * var(--u));  top: calc(424 * var(--u)); width: calc(893 * var(--u)); }
.parsley    { left: calc(346 * var(--u));  top: calc(705 * var(--u)); width: calc(544 * var(--u)); }

.arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Phone: frame image over the app screenshots, rotated together. */
.phone {
  position: absolute;
  left: calc(559 * var(--u));
  top: calc(366 * var(--u));
  width: calc(274 * var(--u));
  height: calc(411 * var(--u));
  transform: rotate(-7deg);
  filter: drop-shadow(calc(16 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u)) rgb(84 22 8 / .48));
}
.frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.screen {
  position: absolute;
  left: 20.6055%;
  top: 6.1198%;
  width: 58.9844%;
  height: 85.5469%;
  border-radius: 13% / 6%;
  overflow: hidden;
  background: #F5F2EB;
  container-type: size;
}

/* Real app screenshots, swipeable inside the phone (scroll snap). The frame sits
   on top and lets touches through to the screenshots underneath. */
.frame { pointer-events: none; }
.slides {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: pointer;
}
.slides::-webkit-scrollbar { display: none; }
.slides img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
}
.slides:focus-visible { outline: 3px solid var(--cream); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) { .slides { scroll-behavior: smooth; } }

.dots {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  justify-content: center;
  gap: 2px;
}
.dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.dots button::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  border: 1.5px solid var(--cream);
  border-radius: 50%;
}
.dots button[aria-current="true"]::before { background: var(--cream); }

/*
  Phones, tablets, tall windows and windows under 1000px wide (mobile concept E).
  Browser zoom narrows the window, so zooming a laptop to about 150% (a 1920px
  monitor to 200%) lands here, where text keeps growing with zoom.
  Left-aligned text, then a large
  upright phone with the pasta, plate and parsley tucked behind it.
  Laid out on a 390-point-wide canvas; --m is one canvas point, capped so
  tablets in portrait do not blow up. Items on the right edge are anchored
  to the right so wider screens spread out instead of stretching.
*/
@media (max-aspect-ratio: 6/5), (max-width: 999px) {
  .hero {
    --m: min(100vw / 390, 1.6px);
    --u: calc(var(--m) / 2);
    height: calc(1116 * var(--m));
    min-height: 0;
  }
  .wordmark {
    left: calc(20 * var(--m));
    top: calc(40 * var(--m));
    font-size: calc(34 * var(--m));
  }
  .copy, .scene, .stage { position: static; }
  .headline {
    left: calc(14 * var(--m));
    top: calc(128 * var(--m));
    font-size: calc(116 * var(--m));
  }
  .cta-group {
    --b: max(var(--m), 0.0625rem);
    --btn-w: 156;
    --btn-font: 19;
    z-index: 4;
    left: calc(20 * var(--m));
    top: calc(484 * var(--m));
    bottom: calc(20 * var(--m));
  }
  .pan, .lemon, .butter, .salt, .pepper, .arrows { display: none; }
  .lemon-half { left: auto; right: calc(-22 * var(--m)); top: calc(240 * var(--m)); width: calc(112 * var(--m)); z-index: 2; }
  .nest       { left: calc(-104 * var(--m)); top: calc(576 * var(--m)); width: calc(236 * var(--m)); z-index: 1; }
  .plate      { left: auto; right: calc(-176 * var(--m)); top: calc(596 * var(--m)); width: calc(330 * var(--m)); z-index: 1; }
  .parsley    { left: calc(-130 * var(--m)); top: calc(826 * var(--m)); width: calc(300 * var(--m)); z-index: 2; }
  .phone {
    left: calc(50% - 150 * var(--m));
    top: calc(576 * var(--m));
    width: calc(300 * var(--m));
    height: calc(450 * var(--m));
    transform: none;
    z-index: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

/* ---------- Text pages (Support, Privacy, Terms) ---------- */

.page-header {
  background: var(--tomato);
  color: var(--cream);
  padding: 22px 22px 56px;
}
.page-header .wordmark-link { position: static; width: fit-content; font-size: 34px; }
.page-header h1 {
  max-width: 760px;
  margin: 56px auto 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(48px, 9vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.page-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 22px 80px;
  font-size: 17px;
  line-height: 1.6;
}
.page-body h2 { margin: 40px 0 8px; font-size: 21px; line-height: 1.3; }
.page-body a { color: var(--sage); font-weight: 700; }
.notice {
  padding: 16px 18px;
  border-radius: 12px;
  background: #F6E7C3;
  color: #5A420B;
}
.page-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 22px 48px;
  border-top: 1px solid #DDD8CC;
  font-size: 14px;
  font-weight: 700;
}
.page-footer a { text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }
.page-footer a[aria-current] { color: var(--tomato); }
.page-footer .copyright { margin-left: auto; font-weight: 400; color: #5d625f; }
/* Privacy Notice and Terms of Use: long-form legal text. */
.legal-text p { margin: 0 0 18px; }
.legal-text .dates { color: #5d625f; font-size: 15px; }
.legal-text ul { margin: -6px 0 18px; padding-left: 22px; }
.legal-text li { margin-bottom: 8px; }
.legal-text a { overflow-wrap: anywhere; }
:is(.page-body, .page-footer) :focus-visible { outline-color: var(--sage); }