/* Norra — landing page. Layered on style.css.

   The phone mock-ups are the App Store screenshot boards
   (design/norra-app-store-screenshots.html) rebuilt in CSS. Each `.stage` is
   one board's phone area: 1290 board-px wide, starting at the phone's top
   edge (board y = 620). Positions are written as board-px / 12.9 in `cqw`, so
   1cqw is one hundredth of the board and every number traces back to the
   board source. Inside `.phone`, 1cqw is one hundredth of the 957px device. */

body.home { padding: 0; }

.shell { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
/* Narrow sections keep the shared left edge; only their content is capped. */
.shell.narrow > *, .narrow:not(.shell) { max-width: 720px; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 16px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}

.home h1, .home h2 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}
.home h1 { font-size: clamp(42px, 6.2vw, 72px); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 22px; }
.home h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 18px; }
.home .lead { font-size: 20px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; max-width: 34ch; }
.home .copy > p:not(.lead):not(.eyebrow):not(.micro) { max-width: 46ch; color: var(--body); }
.micro { color: var(--faint); font-size: 14px; margin: 0; }

/* ---------- Header ---------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(241, 243, 247, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
}
.brand:hover { color: var(--text); }
/* The icon tile is near-white, so a hairline keeps it reading as an icon on the light page. */
.brand img { border-radius: 9px; display: block; box-shadow: 0 0 0 1px var(--hairline), 0 1px 3px rgba(11, 13, 16, 0.08); }
.brand.small { font-size: 16px; }
.brand.small img { border-radius: 6px; }
.navlinks { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.navlinks a { color: var(--muted); text-decoration: none; }
.navlinks a:hover { color: var(--text); }
.getapp {
  padding: 9px 16px; border-radius: 999px;
  background: var(--text); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.getapp:hover { color: #fff; background: #23272E; }

/* ---------- Rows ---------- */

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 72px;
  align-items: center;
}
.row.flip > .copy { order: 2; }

.hero { padding: 72px 0 40px; }
.feature { padding: 72px 0; }

.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 30px 0 16px; }
.store { display: inline-block; line-height: 0; border-radius: 10px; }
.store img { height: 54px; width: auto; }
.store:focus-visible, .getapp:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Phone mock-up ---------- */

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1290 / 2036;
  container-type: inline-size;
}
.phone {
  position: absolute; left: 12.868cqw; top: 0;
  width: 74.186cqw; aspect-ratio: 957 / 2036;
  container-type: inline-size;
  border-radius: 8.986cqw;
  background: #0F1114;
  box-shadow: inset 0 0 0 0.31cqw #3B424B, 0 4.2cqw 9.4cqw rgba(11, 13, 16, 0.28), 0 0.84cqw 2.5cqw rgba(11, 13, 16, 0.12);
}
.phone .btn { position: absolute; background: #2A2F37; width: 0.94cqw; }
.phone .b1, .phone .b2, .phone .b3 { left: -0.73cqw; border-radius: 0.52cqw 0 0 0.52cqw; }
.phone .b1 { top: 40.96cqw; height: 7.73cqw; }
.phone .b2 { top: 57.26cqw; height: 15.88cqw; }
.phone .b3 { top: 76.91cqw; height: 15.88cqw; }
.phone .b4 { right: -0.73cqw; top: 66.88cqw; height: 25.91cqw; border-radius: 0 0.52cqw 0.52cqw 0; }
.screen {
  position: absolute; inset: 1.672cqw;
  border-radius: 7.315cqw;
  overflow: hidden;
  background: var(--bg);
}
.screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Captures taken mid-scroll end in sliced text, which the rounded bottom
   corners then cut into. Fade that content out into the app background and
   redraw the home indicator over the fade, where the capture had it. */
.screen.fade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%; z-index: 1;
  background: linear-gradient(to bottom, rgba(242, 243, 247, 0), #F2F3F7 70%);
}
.screen.fade::before {
  content: ""; position: absolute; z-index: 2;
  left: 32.2%; width: 35.7%; bottom: 1.03%; height: 1.21cqw;
  border-radius: 1cqw; background: #0B0D10;
}
.notch {
  position: absolute; left: 21.42cqw; top: 0;
  width: 53.81cqw; height: 7.73cqw;
  background: #000; border-radius: 0 0 4.18cqw 4.18cqw;
}
.notch i { position: absolute; left: 19.85cqw; top: 3.13cqw; width: 10.45cqw; height: 0.94cqw; border-radius: 1cqw; background: #1B1E23; }
.notch b { position: absolute; left: 33.65cqw; top: 2.61cqw; width: 1.99cqw; height: 1.99cqw; border-radius: 50%; background: #12151A; box-shadow: inset 0 0 0 0.2cqw #24282F; }

/* A card lifted out of the capture, shown sharper than the phone behind it. */
.lift {
  position: absolute; display: block; height: auto;
  border-radius: 4.19cqw;
  box-shadow: 0 2.8cqw 6.2cqw rgba(11, 13, 16, 0.26), 0 0.62cqw 1.55cqw rgba(11, 13, 16, 0.12);
}
.lift.framed { background: #fff; border: 0.233cqw solid var(--accent); padding-bottom: 4.65cqw; }
.lift.soft { border-radius: 3.1cqw; }
.lift.padded { background: #fff; padding: 3.41cqw 4.34cqw; }
.lift.padded img { display: block; width: 100%; height: auto; }

.s-snap .lift    { left: 5.43cqw;  top: 61.40cqw; width: 76.05cqw; }
.s-menu .lift    { left: 18.37cqw; top: 84.11cqw; width: 75.58cqw; }
.s-suggest .lift { left: 5.43cqw;  top: 34.26cqw; width: 77.83cqw; }
.s-day .lift     { left: 15.50cqw; top: 75.04cqw; width: 80.39cqw; }
.s-plate .lift   { left: 5.43cqw;  top: 36.59cqw; width: 76.05cqw; }

/* Hero callouts: labels pinned to the food, as on screenshot 1. */
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leaders .ls { stroke: rgba(11, 13, 16, 0.28); stroke-width: 7; stroke-linecap: round; }
.leaders .lf { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.leaders .dot-o { fill: #fff; stroke: rgba(0, 0, 0, 0.35); stroke-width: 4; }
.leaders .dot-i { fill: var(--accent); }
.pill {
  position: absolute;
  display: flex; align-items: center; gap: 0.5em;
  height: 6.51cqw; min-height: 30px; padding: 0 1.1em;
  border-radius: 999px; white-space: nowrap;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 1.4cqw 3.1cqw rgba(11, 13, 16, 0.22);
  font-size: max(12px, 2.48cqw); letter-spacing: -0.01em;
  transform: translateY(-50%);
}
.pill b { color: var(--text); font-weight: 700; }
.pill em { color: var(--accent); font-weight: 700; font-style: normal; }
.p-rice    { left: 2.71cqw;  top: 18.97cqw; }
.p-chicken { right: 2.71cqw; top: 27.34cqw; }

/* ---------- Adaptive target (board 6) ---------- */

.tile { background: var(--surface); box-shadow: var(--lift); border-radius: 22px; }
.compare { display: flex; flex-direction: column; gap: 16px; }
.compare .tile:not(.small) {
  display: flex; align-items: center; gap: 20px;
  padding: 26px 28px;
}
.compare .tile > div { flex: 1; }
.compare .k {
  margin: 0 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.compare p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.45; }
.compare .num {
  font-family: var(--display); font-weight: 800;
  font-size: 46px; line-height: 1; letter-spacing: -0.03em;
  color: var(--muted);
}
.compare .hit { background: var(--accent-tint); border: 2px solid var(--accent); box-shadow: none; }
.compare .hit .k { color: var(--accent); }
.compare .hit p, .compare .hit .num { color: var(--text); }
.via { display: flex; align-items: center; gap: 14px; padding: 0 26px; color: var(--muted); font-weight: 500; font-size: 15px; }
.via svg { color: var(--accent); flex: none; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.compare .tile.small { padding: 22px 24px; }
.compare .small .num { display: block; font-size: 32px; color: var(--text); margin-bottom: 6px; }
.compare .small p { font-size: 14px; font-weight: 500; }

/* ---------- Bands ---------- */

.band { padding: 80px 0; }
.band p { font-size: 17px; }
.band .narrow > p:not(.eyebrow):not(.lead):not(.footnote) { max-width: 62ch; }
.band .callout { margin-top: 28px; }
.band .callout p { margin: 0; }
.head { margin-bottom: 36px; }

.facts {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.facts .tile { display: flex; gap: 20px; align-items: flex-start; padding: 28px; margin: 0; }
.facts svg {
  flex: none; width: 34px; height: 34px;
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.facts h3 { margin: 2px 0 6px; color: var(--text); font-size: 19px; letter-spacing: -0.01em; }
.facts p { margin: 0; color: var(--muted); font-size: 16px; }

.footnote { color: var(--faint); font-size: 15px !important; margin: 26px 0 0; }

.faq { background: var(--surface); border-radius: 22px; box-shadow: var(--lift); padding: 6px 28px; margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.faq details:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px;
  font-weight: 600; color: var(--text); font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--faint); font-weight: 500; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq details p { margin: 12px 0 0; max-width: 62ch; color: var(--body); font-size: 16px; }

.closing { padding: 88px 0 104px; text-align: center; }
.closing .shell { display: flex; flex-direction: column; align-items: center; }
.closing .appicon { border-radius: 23px; box-shadow: 0 0 0 1px var(--hairline), 0 14px 34px rgba(11, 13, 16, 0.16); margin-bottom: 28px; }
.closing .lead { margin: 0 auto 28px; }

/* ---------- Footer ---------- */

.sitefoot { border-top: 1px solid var(--hairline); }
.footrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 28px; padding-bottom: 36px; }
.footlinks { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.footlinks a { color: var(--muted); text-decoration: none; }
.footlinks a:hover { color: var(--accent); }
.footrow .micro { margin-left: auto; font-size: 13px; }

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 44px; }
  .row.flip > .copy { order: 0; }
  .stage { max-width: 420px; justify-self: center; }
  .compare { max-width: 560px; }
  .hero { padding: 44px 0 24px; }
  .feature { padding: 52px 0; }
  .band { padding: 60px 0; }
}

@media (max-width: 640px) {
  .shell { padding: 0 16px; }
  .navlinks { display: none; }
  .getapp { margin-left: auto; }
  .home .lead { font-size: 18px; }
  .facts { grid-template-columns: 1fr; }
  .facts .tile { padding: 22px; }
  .compare .tile:not(.small) { padding: 20px; gap: 14px; }
  .compare .num { font-size: 36px; }
  .compare .small .num { font-size: 26px; }
  .via { padding: 0 12px; }
  .faq { padding: 4px 20px; }
  .footrow .micro { margin-left: 0; width: 100%; }
}