/* 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 { border-radius: 22px; padding: 7px 21px; font-size: 16px; font-weight: 700; background: var(--blue); color: #fff; min-width: 78px; text-align: center; line-height: 1.1; }
.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; }
#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; }
.consent-actions { display: grid; gap: 8px; }
.sheet .consent-actions .primary-button { margin: 0; }
#consent-dialog::backdrop { backdrop-filter: none; background: #0005; }
@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; }
}