/* Resolve Apple's rounded system font locally; no proprietary font is shipped. */
@font-face {
  font-family: "NutriSmart System Rounded";
  src: local(".SFNSRounded-Regular"), local(".SF NS Rounded"), local("SF Pro Rounded");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "NutriSmart Rounded Fallback";
  src: url("assets/fonts/Nunito-Rounded-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+002B, U+002E, U+0030-0039;
}

:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --metric-font: "NutriSmart System Rounded", "NutriSmart Rounded Fallback", ui-rounded, system-ui, sans-serif;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -.41px;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light dark;
  --bg: #fff; --text: #000; --muted: #85858a; --line: #e5e5ea;
  --card: #f2f2f7; --blue: #0088ff; --navigation: rgb(255 255 255 / .12);
  --navigation-control: rgb(242 242 242 / .5);
  --navigation-control-rim: rgb(0 0 0 / .16);
  --glass: #f0f0f0cc; --outer: #f2f2f7;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --navigation-height: calc(72px + var(--safe-area-top));
  --navigation-glass-overdraw: max(96px, var(--safe-area-top));
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: var(--outer);
}
/* WebKit on Apple devices resolves ui-rounded to the native rounded UI face. */
@supports (font: -apple-system-body) {
  :root { --metric-font: ui-rounded, "NutriSmart System Rounded", "SF Pro Rounded", "NutriSmart Rounded Fallback", system-ui, sans-serif; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000; --text: #fff; --muted: #8e8e93; --line: #202022;
    --card: #1c1c1e; --blue: #0095ff; --navigation: rgb(0 0 0 / .08);
    --navigation-control: rgb(58 58 58 / .5);
    --navigation-control-rim: rgb(0 0 0 / .5);
    --glass: #363636b3; --outer: #101012;
  }
}
* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
a { color: var(--blue); text-decoration: none; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg .filled { fill: currentColor; stroke: none; }
.symbol-library { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, p { margin: 0; }
h2 { font-family: var(--display-font); font-size: 24px; line-height: 29px; letter-spacing: .2px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; }
.app-page { position: relative; max-width: 430px; min-height: 100dvh; margin: auto; background: var(--bg); padding-bottom: env(safe-area-inset-bottom, 0px); }
/* A fixed, zero-size anchor keeps positioning compositor-driven without a
   viewport-wide fixed box for WebKit's fixedContainerEdges tint sampling.
   Paint/layout belong to its absolute child; overflow must remain visible. */
.navigation { position: fixed; top: 0; left: 50%; z-index: 5; width: 0; height: 0; overflow: visible; background: transparent; }
.navigation-content { position: absolute; top: 0; left: 0; transform: translateX(-50%); width: min(100vw, 430px); height: var(--navigation-height); display: flex; align-items: center; justify-content: space-between; padding: calc(7px + var(--safe-area-top)) max(20px, env(safe-area-inset-right, 0px)) 21px max(20px, env(safe-area-inset-left, 0px)); background: transparent; }
.app-page > main { padding-top: var(--navigation-height); }
/* The glass must extend above the controls, into Safari's obscured top region.
   A collapsed safe-area inset alone is insufficient: overdraw only this visual
   layer, without moving controls or adding layout padding. One continuous
   backdrop avoids an unfiltered band between the header and the screen edge. */
.navigation-content::before { content: ""; position: absolute; inset: calc(-1 * var(--navigation-glass-overdraw)) 0 0; z-index: -1; pointer-events: none; opacity: 0; background: var(--navigation); backdrop-filter: blur(10px) saturate(110%); -webkit-backdrop-filter: blur(10px) saturate(110%); }
.navigation.is-scrolled .navigation-content::before { opacity: 1; }
.navigation-glass { display: none; }
/* Safari clips fixed layers at the unobscured viewport edge. Keep controls
   fixed, but paint the continuous glass in document space. The scroll timeline
   cancels document scrolling on the compositor. Its distance uses 100dvh,
   matching Safari's scroll range as its own toolbar expands/collapses. */
@supports (animation-timeline: scroll(root)) {
  .navigation-content::before { display: none; }
  .navigation-glass { display: block; position: absolute; top: calc(-1 * var(--navigation-glass-overdraw)); left: 0; width: 100%; height: calc(var(--navigation-height) + var(--navigation-glass-overdraw)); z-index: 4; pointer-events: none; opacity: 0; background: var(--navigation); backdrop-filter: blur(10px) saturate(110%); -webkit-backdrop-filter: blur(10px) saturate(110%); animation: pin-navigation-glass linear both; animation-timeline: scroll(root); }
  .app-page:has(.navigation.is-scrolled) > .navigation-glass { opacity: 1; }
  @keyframes pin-navigation-glass {
    from { transform: translateY(0); }
    to { transform: translateY(max(0px, calc(var(--navigation-document-height, 100dvh) - 100dvh))); }
  }
}
@media (max-width: 599px) { html { background: var(--bg); } }
.navigation-button { position: relative; width: 44px; height: 44px; padding: 0; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgb(255 255 255 / .12), transparent 70%), linear-gradient(155deg, rgb(255 255 255 / .055), transparent 45%, rgb(0 0 0 / .035)), var(--navigation-control); color: var(--text); backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); box-shadow: 0 0 0 .6px var(--navigation-control-rim), inset 0 1px .8px rgb(255 255 255 / .28), inset 0 -1px .8px rgb(255 255 255 / .1), 0 1px 3px rgb(0 0 0 / .16); }
.navigation-button svg { display: block; width: 44px; height: 44px; stroke-width: 2.1; }
.navigation .back-link svg { stroke-width: 2.8; }
@media (prefers-reduced-transparency: reduce) {
  .navigation-content::before { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .app-page > .navigation-glass { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .navigation-button { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.navigation-icon { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 9px; opacity: 0; }
.navigation.is-scrolled .navigation-icon { opacity: 1; }
.navigation-get { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); top: calc(13px + var(--safe-area-top)); opacity: 0; visibility: hidden; pointer-events: none; }
.navigation.is-scrolled .navigation-get { opacity: 1; visibility: visible; pointer-events: auto; }
.navigation.is-scrolled .share-button { opacity: 0; visibility: hidden; pointer-events: none; }
.product-header { display: flex; gap: 16px; padding: 1px 20px 22px; min-height: 150px; }
.app-icon { width: 118px; height: 118px; border-radius: 27px; flex-shrink: 0; }
.product-details { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
h1 { font-family: var(--display-font); font-size: 24px; line-height: 28px; letter-spacing: .2px; font-weight: 700; }
.subtitle { font-size: 17px; color: var(--muted); margin-top: 6px; line-height: 22px; }
.product-actions { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; }
.get-button { position: relative; border-radius: 22px; padding: 0; width: 78px; min-width: 78px; height: 32px; font-size: 16px; font-weight: 700; background: transparent; color: #fff; text-align: center; line-height: 1.1; }
.get-button:disabled { opacity: 1; cursor: default; }
.get-button.navigation-get { position: absolute; }
.get-label { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: var(--blue); transform-origin: left center; opacity: 1; transform: scale(1); }
.get-spinner { position: absolute; left: 0; top: 50%; width: 28px; height: 28px; opacity: 0; transform: translateY(-50%) scale(.65); pointer-events: none; }
.get-spinner::before { content: ""; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid #8e8e93; border-top-color: transparent; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .get-spinner::before { border-color: #3a3a3c; border-top-color: transparent; } }
.get-button.is-loading .get-label { opacity: 0; transform: scale(.45); }
.get-button.is-loading .get-spinner { opacity: 1; transform: translateY(-50%) scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .get-label, .get-spinner { transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1); }
  .get-button.is-loading .get-spinner { transition-delay: 70ms; }
  .get-button.is-loading .get-spinner::before { animation: get-spinner-turn 850ms linear infinite; }
  @keyframes get-spinner-turn { to { transform: rotate(360deg); } }
}
.badge-strip { margin: 0 20px; display: flex; border-top: .5px solid var(--line); border-bottom: .5px solid var(--line); overflow: auto; scrollbar-width: none; padding: 22px 0 17px; scroll-snap-type: x proximity; }
.badge-strip::-webkit-scrollbar, .screenshots::-webkit-scrollbar { display: none; }
/* Reference: 1290px iPhone capture at 3x scale, with 105/105/129pt columns. */
.badge { flex: 0 0 105px; min-width: 0; padding: 0 9px; text-align: center; color: var(--muted); position: relative; display: grid; grid-template-rows: 16px 40px 18px; justify-items: center; scroll-snap-align: start; }
.badge + .badge::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: .5px; background: var(--line); }
.badge small { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -.08px; text-transform: uppercase; white-space: nowrap; }
.badge strong { align-self: end; font-family: var(--display-font); font-size: 24px; line-height: 29px; font-weight: 600; letter-spacing: .1px; height: 29px; white-space: nowrap; }
.badge strong svg { width: 28px; height: 28px; vertical-align: middle; }
.badge[data-badge="rating"] strong,
.badge[data-badge="contentRating"] strong,
.badge .chart-number { font-family: var(--metric-font); font-weight: 700; font-variation-settings: "wght" 700; }
.badge[data-badge="chartPosition"] { flex-basis: 129px; }
.badge[data-badge="chartPosition"] strong { display: inline-flex; align-items: flex-start; gap: 2px; font-weight: 600; }
.badge[data-badge="developer"] { flex-basis: 136px; }
.badge .chart-prefix { font-size: 15px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.badge .chart-number { font-size: 24px; line-height: 29px; }
.badge .badge-caption { font-size: 14px; line-height: 18px; letter-spacing: -.28px; white-space: nowrap; max-width: 222px; overflow: hidden; text-overflow: ellipsis; }
.badge[data-badge="developer"] .badge-caption {
  width: 118px;
  max-width: 118px;
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 76%, transparent 100%);
}
.badge:first-child { padding-left: 0; }
.badge .stars { font-size: 17px; line-height: 18px; letter-spacing: .5px; }
@media (prefers-color-scheme: dark) { .badge small { color: #76767a; } }
.section { margin: 0 20px; padding: 22px 0; }
.heading-link { color: var(--text); display: inline-flex; align-items: center; gap: 7px; }
.heading-link svg { width: 14px; height: 21px; color: var(--muted); stroke-width: 3; }
.text-link { color: var(--blue); background: none; padding: 0; font-size: 16px; line-height: 1.4; }
.updates { padding-top: 12px; padding-bottom: 28px; }
.update-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 17px; line-height: 22px; margin: 14px 0 16px; }
.release-notes { font-size: 17px; line-height: 22px; }
.release-notes > strong { display: block; font-weight: 600; margin-bottom: 8px; }
.preview-section { padding-top: 16px; padding-bottom: 0; border-bottom: .5px solid var(--line); }
.preview-section h2 { margin-bottom: 16px; }
.screenshots { display: flex; overflow: auto; gap: 11px; margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.screenshot-button { padding: 0; flex: 0 0 65%; background: transparent; scroll-snap-align: start; border-radius: 28px; overflow: hidden; aspect-ratio: 1320 / 2868; }
.screenshot-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.device-details { color: var(--muted); font-size: 15px; padding: 12px 0 18px; }
.device-details summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.device-caption { display: flex; gap: 7px; align-items: center; }
.device-caption svg { width: 35px; height: 22px; }
.down-chevron { width: 17px; height: 17px; transform: rotate(90deg); }
details[open] .down-chevron { transform: rotate(-90deg); }
.device-details p { margin-top: 12px; line-height: 1.4; }
.description-section { padding-top: 18px; padding-bottom: 42px; }
.description-wrapper { position: relative; }
.description { font-size: 17px; line-height: 1.32; white-space: pre-line; }
.description.collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.more-button { display: block; margin-left: auto; }
.description.collapsed + .more-button { position: absolute; bottom: 0; right: 0; background: var(--bg); padding-left: 16px; box-shadow: -10px 0 10px var(--bg); }
.ratings-section { padding-bottom: 34px; }
.ratings-summary { display: flex; gap: 25px; justify-content: space-between; align-items: center; margin: 21px 0 23px; }
.ratings-summary > strong { font-size: 68px; line-height: 1; letter-spacing: -2.5px; font-weight: 800; }
.ratings-detail { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ratings-detail .stars { font-size: 27px; letter-spacing: 1px; line-height: 1; }
.ratings-detail > span:last-child { font-size: 18px; color: var(--muted); font-weight: 600; }
.reviews-label { margin-bottom: 18px; font-size: 19px; font-weight: 500; }
.review-carousel { position: relative; display: flex; align-items: stretch; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.review-carousel::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 100%; min-width: 0; background: var(--card); border-radius: 25px; padding: 20px; min-height: 220px; font-size: 16px; line-height: 1.35; scroll-snap-align: center; scroll-snap-stop: always; }
.review-card > strong { display: block; font-size: 18px; line-height: 24px; }
.review-top { display: flex; align-items: center; gap: 7px; margin: 14px 0 8px; }
.review-top .stars { flex-shrink: 0; font-size: 17px; line-height: 22px; letter-spacing: .5px; color: var(--text); white-space: nowrap; }
.review-top small { color: var(--muted); font-size: 17px; line-height: 22px; }
.review-card p { color: var(--muted); font-size: 16px; line-height: 22px; }
.muted-copy { font-size: 17px; line-height: 1.4; color: var(--muted); margin: 15px 0 20px; }
.muted-copy strong { font-weight: 600; }
.privacy-card { background: var(--card); border-radius: 24px; text-align: center; padding: 28px 20px 24px; margin: 20px 0 28px; }
.privacy-symbol { width: 36px; height: 36px; color: var(--blue); margin-bottom: 9px; stroke-width: 2.1; }
.privacy-card h3 { font-size: 19px; }
.privacy-card > p { font-size: 17px; line-height: 1.3; margin-top: 7px; color: var(--muted); }
.data-types { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 12px; list-style: none; margin: 22px 0 0; padding: 0; text-align: left; }
.data-types li { font-size: 15px; display: flex; align-items: center; gap: 9px; }
.data-types svg { width: 23px; height: 23px; flex-shrink: 0; }
.privacy-section > .muted-copy:last-child { margin-bottom: 0; }
.information-section h2 { margin-bottom: 10px; }
dl { margin: 0; }
.info-row { display: flex; justify-content: space-between; gap: 18px; font-size: 17px; padding: 17px 0; border-bottom: .5px solid var(--line); }
dt { color: var(--muted); flex-shrink: 0; }
dd { margin: 0; text-align: right; max-width: 75%; line-height: 1.3; }
.external-links a, .footer > a { font-size: 17px; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: .5px solid var(--line); }
.external-links svg { width: 20px; height: 20px; }
.external-links a:last-child, .footer > a:last-child { border: 0; }
.supports-section { padding-top: 20px; }
.family-sharing { display: flex; align-items: flex-start; gap: 15px; margin-top: 22px; }
.family-sharing > svg { width: 47px; height: 42px; flex-shrink: 0; stroke: none; }
.family-sharing h3 { font-size: 19px; font-weight: 500; }
.family-sharing p { color: var(--muted); font-size: 16px; line-height: 1.3; margin-top: 4px; }
.footer { padding-bottom: 30px; }
.primary-button, .secondary-button { padding: 13px 18px; border-radius: 12px; width: 100%; font-size: 16px; font-weight: 600; background: var(--blue); color: #fff; }
.secondary-button { background: var(--card); color: var(--text); }
.circle-button { background: var(--card); color: var(--blue); height: 40px; width: 40px; border-radius: 50%; font-size: 28px; line-height: 1; }
dialog { color: var(--text); background: var(--bg); border: 0; }
dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
.sheet { max-width: 420px; width: calc(100% - 32px); border-radius: 22px; padding: 25px; margin: auto; max-height: 90dvh; overflow: auto; }
.sheet h2 { margin: 6px 0 12px; }
.sheet p { font-size: 15px; line-height: 1.45; margin: 12px 0; }
.sheet .primary-button { margin: 8px 0; }
.sheet .close-dialog:not(.sheet-close) { display: block; margin: 14px auto 0; }
.sheet-close { display: block; margin-left: auto; }
.sheet input { width: 100%; padding: 12px; border: .5px solid var(--line); background: var(--card); color: var(--text); border-radius: 9px; margin: 6px 0 13px; font-size: 16px; }
.checkout-legal { font-size: 12px !important; }
.checkout-success { background: #1c1c1e; color: #fff; color-scheme: dark; --muted: #aeaeb2; --blue: #0095ff; padding-bottom: max(25px, env(safe-area-inset-bottom)); }
.checkout-success-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #34c75922; color: #30b94d; font-size: 30px; margin-bottom: 18px; }
.checkout-success h2 { font-size: 25px; letter-spacing: -.5px; }
.checkout-success .checkout-email { font-weight: 600; overflow-wrap: anywhere; }
.checkout-install { display: block; text-align: center; text-decoration: none; }
.checkout-success details { margin: 18px 0; font-size: 14px; line-height: 1.5; }
.checkout-success summary { cursor: pointer; font-weight: 600; }
.checkout-success ol { padding-left: 21px; }
.checkout-success li + li { margin-top: 10px; }
.checkout-success details p, .checkout-success .checkout-billing { font-size: 13px; color: var(--muted); }
@media (max-width: 599px) {
  .checkout-success { margin: auto 0 0; width: 100%; max-width: none; border-radius: 26px 26px 0 0; max-height: calc(100dvh - env(safe-area-inset-top) - 16px); }
}
@media (prefers-reduced-motion: no-preference) {
  .checkout-success[open] { animation: checkout-appear 200ms ease-out; }
  @keyframes checkout-appear { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}
#gallery { width: min(100vw, 650px); height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: auto; padding: 16px; background: var(--bg); overflow: hidden; }
#gallery-image { display: block; width: 100%; height: calc(100% - 105px); object-fit: contain; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; height: 40px; color: var(--muted); font-size: 14px; }
.gallery-controls { display: flex; justify-content: center; gap: 25px; margin-top: 10px; }
@media (min-width: 600px) { .app-page { border-left: .5px solid var(--line); border-right: .5px solid var(--line); } }
@media (max-width: 360px) {
  .product-header { gap: 12px; }
  .app-icon { width: 104px; height: 104px; border-radius: 23px; }
  h1 { font-size: 22px; }
  .subtitle { font-size: 14px; }
  .info-row { font-size: 15px; }
  .ratings-detail .stars { font-size: 23px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .navigation-glass, .navigation-content::before, .navigation-icon { transition: opacity 200ms ease; }
  .navigation-get, .navigation .share-button { transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .navigation.is-scrolled .navigation-get, .navigation:not(.is-scrolled) .share-button { transition-delay: 0s; }
}

.checkout-test-notice { margin: 8px 0 0; color: #ffb340; font-size: 12px; line-height: 1.3; }
.checkout-feedback { margin: 0 20px 18px; color: var(--muted); font-size: 13px; line-height: 1.4; }