@charset "UTF-8";

/* Fasting Tracker: the app's cream, warm ink and sunrise gradient (Branding/README.md), in SF Pro Rounded. */
:root {
  color-scheme: light;
  --bg: #fff7ee;
  --surface: #ffffff;
  --surface-soft: #ffe9d4;
  --text: #2e1e17;
  --muted: #6f574a;
  --accent: #b4441b;
  --accent-deep: #ffd9a3;
  --line: #f0dcc6;
  --light: #ffead6;
  --ink: #2e1e17;
  --sunrise: linear-gradient(135deg, #ffc145 0%, #ff8a3d 48%, #f2546b 100%);
  --radius: 24px;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 7px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--bg); }
.wrap { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; inset-inline-start: 20px; padding: 12px 24px; background: var(--accent); color: var(--bg); z-index: 10; }
.skip-link:focus { top: 12px; }

.site-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.product-brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.product-brand img { border-radius: 10px; }
.product-brand span { max-width: 210px; font-size: 1.7rem; font-weight: 680; letter-spacing: -.055em; line-height: .92; }
.site-header nav { display: flex; align-items: center; gap: 34px; font-size: .875rem; font-weight: 550; white-space: nowrap; }
.nav-sections { display: flex; align-items: center; gap: 28px; }
.nav-sections a { color: var(--muted); }
.site-header nav a:hover { color: var(--accent); }
.nav-sections a[aria-current] { color: var(--text); }
.nav-download { border: 1px solid #d9bfa6; border-radius: 50px; padding: 10px 22px; }
.nav-download span { margin-inline-start: 16px; }
.language-menu summary { display: flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer; list-style: none; white-space: nowrap; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary::after { content: ""; width: 6px; height: 6px; margin-inline-start: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.language-menu summary:hover, .language-menu[open] summary { color: var(--accent); }
.language-menu summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 7px; border-radius: 4px; }
.language-menu ul { position: absolute; top: calc(100% - 12px); inset-inline-end: 0; z-index: 5; width: min(600px, 100%); margin: 0; padding: 10px; columns: 3; column-gap: 4px; list-style: none; white-space: normal; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 40px #8a3d1a24; }
.language-menu li { break-inside: avoid; }
.language-menu li a { display: block; padding: 6px 12px; border-radius: 10px; }
.language-menu li a:hover { background: var(--bg); }
.language-menu [aria-current] { color: var(--accent); font-weight: 650; }

.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; min-height: 740px; padding-block: 64px 72px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 30px; display: flex; align-items: center; gap: 12px; font-size: .75rem; font-weight: 680; letter-spacing: .13em; line-height: 1.5; }
.mini-line { width: 25px; height: 2px; background: var(--accent); flex-shrink: 0; }
h1 { margin-bottom: 28px; font-size: clamp(3.6rem, 6.6vw, 6rem); font-weight: 680; line-height: 1.04; letter-spacing: -.068em; }
h1 em, h2 em { font-style: normal; background: linear-gradient(120deg, #d4602a, #cc3d58); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-description { max-width: 430px; margin-bottom: 30px; color: var(--muted); font-size: 1.125rem; line-height: 1.7; }
.store-button { display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 26px; border-radius: 18px; background: var(--sunrise); color: var(--ink); box-shadow: 0 12px 28px #ff8a3d40; }
.store-button span { display: flex; flex-direction: column; line-height: 1.15; }
.store-button small { font-size: .75rem; }
.store-button strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.availability { margin: 14px 0 0; color: var(--muted); font-size: .8125rem; }
.explore-link { display: inline-flex; align-items: center; gap: 25px; margin-top: 46px; font-size: .875rem; }
.explore-link span, .explore-link:hover { color: var(--accent); }
.explore-link span { font-size: 1.4rem; }

.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; padding: 12px 0 45px; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 4% -4% 4%; z-index: -2; background: radial-gradient(circle, #ffd59a 0, #ffc14533 40%, transparent 68%); }
.phone { width: 300px; transform: rotate(5deg); filter: drop-shadow(14px 26px 30px #8a3d1a38); }
.phone img { width: 100%; }
/* Sunny's idle animation over the Today screenshot: a 216 px square of the 900 px capture around
   Sunny (left 341, top 581), solid out to Sunny's reach and fading out before the label below.
   The screen's own Sunny shows until the video plays. Finnish and Japanese headers sit 73 px lower. */
.phone { position: relative; }
.sunny-loop { position: absolute; left: 37.8889%; top: 31.4224%; width: 24%; height: auto; opacity: 0; transition: opacity .4s ease;
  -webkit-mask-image: radial-gradient(closest-side, #000 82.4%, transparent 97.2%); mask-image: radial-gradient(closest-side, #000 82.4%, transparent 97.2%); }
.sunny-loop--lower { top: 35.3705%; }
.sunny-loop.is-playing { opacity: 1; }
.sunny { position: absolute; top: 2%; inset-inline-start: 4%; z-index: 1; width: clamp(96px, 11vw, 132px); animation: sunny-bob 5s ease-in-out infinite; }
@keyframes sunny-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

.benefit-strip { border-block: 1px solid var(--line); }
.benefit-strip > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 25px; }
.benefit-strip .wrap > span { max-width: 180px; color: var(--muted); font-size: .75rem; letter-spacing: .1em; }
.benefit-strip ul { display: flex; flex: 1; justify-content: space-between; gap: 24px; margin: 0; padding: 0; list-style: none; font-size: 1.05rem; }

.features { padding-block: 110px 120px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 66px; }
.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -14px; color: var(--accent); }
.section-heading h2, .focus-copy h2, .details h2, .download-section h2 { margin: 0; font-size: clamp(2.75rem, 4.5vw, 4.2rem); font-weight: 620; letter-spacing: -.06em; line-height: 1.05; }
.section-heading > p:last-child { max-width: 430px; margin: 0 0 6px; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.feature-grid article { min-height: 285px; padding: 38px 34px 40px; border-inline-end: 1px solid var(--line); }
.feature-grid article:first-child { padding-inline-start: 0; }
.feature-grid article:last-child { border-inline-end: 0; padding-inline-end: 0; }
.feature-number { display: block; margin-bottom: 28px; color: var(--accent); font-size: .75rem; letter-spacing: .13em; }
.feature-grid h3 { margin-bottom: 17px; font-size: 1.5rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.22; }
.feature-grid p { color: var(--muted); }

.focus-section { overflow: hidden; background: linear-gradient(160deg, #ffe7c9, #ffd9cf); color: var(--ink); }
.focus-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; min-height: 720px; padding-block: 90px; }
.focus-copy .eyebrow { color: var(--accent); }
.focus-copy > p:not(.eyebrow) { max-width: 480px; margin: 30px 0; color: #5f4639; }
.focus-copy ul { margin: 0 0 34px; padding: 0; list-style: none; }
.focus-copy li { padding: 13px 0; border-bottom: 1px solid #2e1e171f; }
.focus-copy li::before { content: "✓"; margin-inline-end: 12px; color: #13805b; font-weight: 700; }
.text-link { display: inline-flex; gap: 24px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-weight: 600; }
.focus-visual { justify-self: center; width: 310px; margin: 0; transform: rotate(-5deg); filter: drop-shadow(18px 30px 34px #8a3d1a33); }
.focus-visual img { width: 100%; }
.focus-visual figcaption { margin: 24px -20px -55px; color: #5f4639; font-size: .8rem; text-align: center; transform: rotate(5deg); }

.weight-section .focus-visual { transform: rotate(5deg); }
.weight-section .focus-visual figcaption { transform: rotate(-5deg); }

.home-guides { padding-block: 110px 100px; }
.guide-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 30px 36px; margin-bottom: 40px; }
.guide-columns h3 { margin-bottom: 10px; font-size: 1.05rem; font-weight: 650; letter-spacing: -.02em; }
.guide-columns ul { margin: 0; padding: 0; list-style: none; }
.guide-columns li a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.guide-columns li a:hover { color: var(--accent); }

/* Guides: the app's content and colours, in the website's own layout. */
.w-hub, .w-article { --tint: #ff8a3d; }
.i { flex-shrink: 0; vertical-align: -.15em; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; color: var(--muted); font-size: .82rem; }
.breadcrumb a:hover { color: var(--accent); }
.w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: .85rem; font-weight: 550; }
.w-meta a:hover { color: var(--accent); }
.w-level { display: inline-flex; align-items: center; gap: 7px; }
.w-level::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--level); }
.w-symbol-cover { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; background: radial-gradient(circle at 70% 20%, #ffffff40, transparent 45%), var(--tint); }
.w-symbol-cover .i { width: 64px; height: 64px; }

/* The guides page. */
.w-hub { padding-block: 70px 100px; }
.w-hub-head { margin-bottom: 50px; }
.w-hub-head .eyebrow { color: var(--accent); }
.w-hub-head h1 { margin: 0; font-size: clamp(2.75rem, 4.5vw, 4.2rem); font-weight: 620; letter-spacing: -.06em; line-height: 1.05; }
.w-feature { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; margin-bottom: 56px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .2s, box-shadow .2s; }
.w-feature:hover, .w-card a:hover { transform: translateY(-3px); box-shadow: 0 18px 36px #8a3d1a1f; }
.w-feature-cover { aspect-ratio: 1206 / 660; background: var(--tint); }
.w-feature-cover img, .w-card-cover img, .w-hero img { width: 100%; height: 100%; object-fit: cover; }
.w-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 36px 40px; }
.w-feature-body .eyebrow { margin: 0; color: var(--accent); }
.w-feature-body strong { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 680; line-height: 1.1; letter-spacing: -.045em; }
.w-tabs { display: flex; gap: 26px; overflow-x: auto; margin-bottom: 10px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.w-tab { flex-shrink: 0; padding: 0 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; }
.w-tab[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.w-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.w-collection { padding-top: 48px; }
.w-collection-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 22px; }
.w-collection-head h2 { margin: 0; font-size: 1.8rem; font-weight: 640; letter-spacing: -.04em; }
.b-cards { margin: 28px 0; }
.w-collection-head p { margin: 0; color: var(--muted); }
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.w-card a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); transition: transform .2s, box-shadow .2s; }
.w-card-cover { position: relative; display: block; aspect-ratio: 1206 / 660; overflow: hidden; background: var(--tint); }
.w-badge { position: absolute; top: 12px; inset-inline-start: 12px; padding: 4px 10px; border-radius: 99px; background: var(--surface); color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.w-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.w-card-body strong { font-size: 1.12rem; font-weight: 680; line-height: 1.3; letter-spacing: -.02em; }
.w-card-sub { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.w-card-body .w-meta { margin-top: auto; padding-top: 6px; font-size: .8rem; }
.w-note { margin: 34px 0; color: var(--muted); font-size: .82rem; }

/* A guide: an article with its contents beside it. */
.w-article { padding-block: 40px 100px; }
.w-head { max-width: 820px; }
.w-head .eyebrow { margin-bottom: 18px; color: var(--accent); }
.w-head h1 { margin-bottom: 18px; font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 680; line-height: 1.06; letter-spacing: -.055em; }
.w-sub { max-width: 720px; margin-bottom: 16px; color: var(--muted); font-size: 1.22rem; line-height: 1.55; }
.w-hero { aspect-ratio: 1206 / 660; max-height: 480px; width: 100%; margin: 34px 0 50px; overflow: hidden; border-radius: 28px; background: var(--tint); }
.w-layout { display: grid; grid-template-columns: minmax(0, 700px) 260px; justify-content: space-between; gap: 64px; }
.w-body > * + * { margin-top: 24px; }
.w-body > * { margin-bottom: 0; }
.w-side { position: sticky; top: 30px; align-self: start; display: flex; flex-direction: column; gap: 30px; }
.w-toc h2, .b-takeaways h2, .w-related h2 + .w-grid { margin-top: 0; }
.w-toc h2 { margin-bottom: 12px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.w-toc ol { margin: 0; padding: 0; border-inline-start: 1px solid var(--line); list-style: none; }
.w-toc a { display: block; padding: 6px 0 6px 16px; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.w-toc a:hover { color: var(--accent); }
.w-side-app { padding: 20px; border-radius: 20px; background: linear-gradient(160deg, #ffe7c9, #ffd9cf); }
.w-side-app p { margin: 0 0 14px; font-weight: 680; line-height: 1.35; }
.w-side-app .w-button { width: 100%; padding: 12px 16px; font-size: .9rem; }
.w-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 24px; border-radius: 99px; background: var(--sunrise); color: var(--ink); font-weight: 680; box-shadow: 0 12px 28px #ff8a3d40; }
.w-button:focus-visible, .b-option:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.b-p, .b-list li, .b-steps li { color: var(--text); font-size: 1.1rem; line-height: 1.75; }
.b-h { margin-top: 52px !important; font-size: 1.75rem; font-weight: 660; line-height: 1.2; letter-spacing: -.035em; scroll-margin-top: 24px; }
.cite { margin-inline-start: 1px; font-size: .62em; font-weight: 800; line-height: 0; vertical-align: .62em; }
.cite a { color: var(--accent); }
.b-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.b-takeaways { padding: 26px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.b-takeaways h2 { margin-bottom: 14px; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.b-takeaways ul, .b-list, .b-steps ol, .w-app ul { margin: 0; padding: 0; list-style: none; }
.b-takeaways li { position: relative; padding-block: 10px; padding-inline: 30px 0; border-top: 1px solid var(--line); font-size: 1.02rem; line-height: 1.55; }
.b-takeaways li:first-child { border-top: 0; }
.b-takeaways li::before, .w-app li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #13805b; font-weight: 700; }
.b-list li { position: relative; padding-inline-start: 22px; }
.b-list li + li { margin-top: 8px; }
.b-list li::before { content: ""; position: absolute; top: .72em; inset-inline-start: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }
.b-steps h3 { margin-bottom: 12px; font-size: 1.15rem; font-weight: 680; }
.b-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.b-steps li + li { margin-top: 10px; }
.b-num { color: var(--tint); font-size: 1.3rem; font-weight: 750; line-height: 1.5; }
.b-callout { padding: 2px 0 2px 22px; border-inline-start: 3px solid var(--c); }
.b-callout .b-kicker { color: color-mix(in srgb, var(--c) 75%, #2e1e17); }
.b-callout h3 { margin: 8px 0 6px; font-size: 1.15rem; font-weight: 680; }
.b-callout p:last-child { margin: 0; color: var(--muted); line-height: 1.65; }
.b-myth { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; padding: 22px 0; border-block: 1px solid var(--line); }
.b-myth dt { padding-top: 4px; font-size: .7rem; font-weight: 750; letter-spacing: .12em; }
.b-myth dt:first-of-type { color: #c43a52; }
.b-myth dt:last-of-type { color: #13805b; }
.b-myth dd { margin: 0; line-height: 1.65; }
.b-myth-claim { color: var(--muted); font-weight: 600; text-decoration: line-through; text-decoration-color: #f2546b99; }
.b-study, .b-figure, .b-video, .b-quiz { margin-inline: 0; padding: 26px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.b-study .b-kicker { color: #6f55d8; }
.b-study h3, .b-figure h3, .b-video h3 { margin: 12px 0; font-size: 1.25rem; font-weight: 680; line-height: 1.3; letter-spacing: -.02em; }
.b-study > p { margin: 12px 0 0; color: var(--muted); line-height: 1.65; }
.b-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; color: #6f55d8; font-size: .82rem; font-weight: 600; list-style: none; }
.b-chips li + li::before { content: "·"; margin-inline-end: 4px; }
.b-source-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--accent); font-size: .85rem; font-weight: 600; }
.b-source-link:hover { text-decoration: underline; }
.b-figure .b-kicker { color: var(--accent); }
.b-figure figcaption { margin-top: 12px; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.b-axis { margin: 0 0 4px; color: var(--muted); font-size: .75rem; font-weight: 600; }
.b-axis--x { margin: 2px 0 0; text-align: end; }
.b-chart { display: block; width: 100%; max-width: 600px; height: auto; overflow: visible; }
.b-chart .grid line { stroke: var(--line); stroke-width: 1; }
.b-chart .labels text { fill: var(--muted); font-size: 11px; font-weight: 600; }
.b-chart .lines path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.b-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .82rem; font-weight: 600; }
.b-legend li { display: inline-flex; align-items: center; gap: 7px; }
.b-legend i { width: 16px; height: 4px; border-radius: 2px; }
.b-bars { display: flex; flex-direction: column; gap: 12px; }
.b-bar p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: .85rem; }
.b-bar i { display: block; height: 10px; border-radius: 5px; background: var(--c); }
.b-timeline { margin: 0; padding: 0; list-style: none; }
.b-timeline li { position: relative; display: flex; flex-direction: column; gap: 3px; padding-block: 0 22px; padding-inline: 28px 0; }
.b-timeline li::before { content: ""; position: absolute; top: 5px; inset-inline-start: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--c); }
.b-timeline li:not(:last-child)::after { content: ""; position: absolute; top: 22px; bottom: 2px; inset-inline-start: 6px; width: 1px; background: var(--line); }
.b-time { color: color-mix(in srgb, var(--c) 75%, #2e1e17); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.b-timeline strong { font-size: 1.12rem; font-weight: 680; }
.b-timeline span:last-child { color: var(--muted); line-height: 1.6; }
.b-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--line); }
.b-stats--3 { grid-template-columns: repeat(3, 1fr); }
.b-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--surface); }
.b-stat strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }
.b-stat span { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.b-video-head { display: flex; justify-content: space-between; align-items: center; margin: 0; color: var(--muted); font-size: .8rem; font-weight: 600; }
.b-video-head .b-kicker { color: var(--accent); }
.b-video video { display: block; width: 100%; max-width: 380px; height: auto; margin: 6px auto 0; border-radius: 20px; background: #fff3e6; }
.b-video figcaption { margin-top: 12px; color: var(--muted); font-size: .85rem; text-align: center; }
.b-quiz { display: flex; flex-direction: column; gap: 22px; margin-top: 52px !important; }
.b-quiz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.b-quiz-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.4rem; font-weight: 680; letter-spacing: -.03em; }
.b-quiz-head h2 .i { color: var(--accent); }
.b-quiz-head span { color: var(--muted); font-weight: 600; }
.b-q { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.b-q legend { margin-bottom: 10px; padding: 0; font-weight: 680; line-height: 1.45; }
.b-option { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.b-option:hover:not(:disabled) { border-color: var(--accent); }
.b-option:disabled { cursor: default; }
.b-option.is-right { border-color: #22b583; background: #22b5831f; }
.b-option.is-wrong { border-color: #f2546b; background: #f2546b14; }
.b-option.is-right::after { content: "✓"; color: #13805b; font-weight: 800; }
.b-option.is-wrong::after { content: "✕"; color: #c43a52; font-weight: 800; }
.b-q-expl { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.b-q-expl.is-right { color: #13805b; }
.b-quiz-result { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.b-quiz-result strong { display: block; font-size: 1.15rem; }
.b-quiz-result span { color: var(--muted); font-size: .9rem; }
.b-sources { margin-top: 52px !important; padding-top: 26px; border-top: 1px solid var(--line); }
.b-sources h2 { margin-bottom: 14px; font-size: 1.2rem; font-weight: 680; }
.b-sources ol { margin: 0; padding-inline-start: 1.4em; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.b-sources li + li { margin-top: 8px; }
.b-sources li:target { color: var(--text); }
.b-sources a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.b-sources a:hover { color: var(--accent); }

/* The invitation to the app, the next guide, related guides and the health note. */
.w-app { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; overflow: hidden; margin: 60px 0 0; padding: 44px 48px 0; border-radius: 28px; background: linear-gradient(160deg, #ffe7c9, #ffd9cf); }
.w-body .w-app { margin-top: 52px !important; padding: 34px 34px 0; }
.w-app-text { padding-bottom: 44px; }
.w-app h2 { margin-bottom: 12px; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 650; line-height: 1.1; letter-spacing: -.045em; }
.w-app p { margin: 0 0 18px; color: #5f4639; line-height: 1.6; }
.w-app ul { margin-bottom: 26px; }
.w-app li { position: relative; padding-block: 8px; padding-inline: 28px 0; border-bottom: 1px solid #2e1e171f; }
.w-app img { width: 190px; align-self: end; margin-bottom: -60px; transform: rotate(-4deg); filter: drop-shadow(14px 22px 26px #8a3d1a33); }
.w-pager { margin-top: 60px; border-block: 1px solid var(--line); }
.w-pager a { display: flex; flex-direction: column; gap: 6px; padding: 28px 0; }
.w-pager span { color: var(--muted); font-size: .85rem; font-weight: 600; }
.w-pager strong { font-size: 1.6rem; font-weight: 660; letter-spacing: -.035em; }
.w-pager a:hover strong { color: var(--accent); }
.w-related { margin-top: 60px; }
.w-related h2 { margin-bottom: 22px; font-size: 1.6rem; font-weight: 640; letter-spacing: -.035em; }
.w-health { margin-top: 60px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.w-health h2 { margin-bottom: 8px; font-size: 1.1rem; }

/* The English pages (scripts/pages_en.py): short answers, tables, link lists, the calculators, the Watch screen and the footer's links. */
.w-hero--slim { aspect-ratio: auto; height: 150px; margin: 26px 0 44px; }
.w-hero--slim .w-symbol-cover .i { width: 52px; height: 52px; }
.w-hero--apps { aspect-ratio: auto; max-height: none; margin: 26px 0 44px; overflow: visible; background: none; }
.w-hero--apps img.c-icon { width: 72px; height: 72px; object-fit: contain; }
.w-hero--apps .c-vs img.c-icon { width: 104px; height: 104px; }
.b-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.b-answer { padding: 24px 28px; border: 1px solid color-mix(in srgb, var(--c) 40%, #fff); border-radius: 22px; background: color-mix(in srgb, var(--c) 12%, #fff); }
.b-answer .b-kicker { color: color-mix(in srgb, var(--c) 55%, #2e1e17); }
.b-verdict { margin: 8px 0 6px; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.b-answer p:last-child { margin: 0; line-height: 1.65; }
.b-table { margin-inline: 0; }
.b-table figcaption { margin-bottom: 10px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.b-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.b-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }
.b-table th, .b-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.b-table tr:last-child > * { border-bottom: 0; }
.b-table thead th { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.b-table tbody th { font-weight: 650; }
.b-timeline li.is-here::before { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 28%, transparent); }
.b-timeline li.is-here strong { color: color-mix(in srgb, var(--c) 70%, #2e1e17); }
.w-links { margin-top: 60px; }
.w-body .w-links { margin-top: 40px !important; }
.w-links h2 { margin-bottom: 14px; font-size: 1.6rem; font-weight: 640; letter-spacing: -.035em; }
.w-links ul { margin: 0; padding: 0; columns: 2 260px; column-gap: 36px; list-style: none; }
.w-links li { break-inside: avoid; }
.w-links a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.w-links a:hover { color: var(--accent); }
.w-app img.w-watch { width: 200px; align-self: center; margin-bottom: 44px; border-radius: 42px; }
.explore { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.t-tool { display: flex; flex-direction: column; gap: 18px; padding: 28px 30px; border-radius: 24px; background: linear-gradient(160deg, #ffe7c9, #ffd9cf); }
.t-tool h2 { margin: 0; font-size: 1.5rem; font-weight: 680; letter-spacing: -.03em; }
.t-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.t-fields label { display: flex; flex-direction: column; gap: 6px; color: #5f4639; font-size: .85rem; font-weight: 650; }
.t-fields input, .t-fields select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #e3c4a8; border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; }
.t-fields :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.t-result { display: block; padding: 20px 22px; border-radius: 18px; background: var(--surface); }
.t-result p { margin: 0; line-height: 1.6; }
.t-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.t-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.t-big { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }
.t-result h3 { margin: 18px 0 4px; font-size: 1rem; font-weight: 680; }
.t-result ul { margin: 14px 0 0; padding: 0; list-style: none; }
.t-result li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.t-result li span:last-child { text-align: end; font-weight: 600; }
.t-result .t-tips li { display: block; font-weight: 400; }
.t-note { margin-top: 14px !important; color: var(--muted); font-size: .9rem; }
.t-private { margin: 0; color: #5f4639; font-size: .8rem; }
.t-pair { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; }
.t-pair[hidden], .t-fields [hidden] { display: none; }
.t-week { width: 100%; border-collapse: collapse; font-size: .95rem; }
.t-week th, .t-week td { padding: 9px 8px; border-top: 1px solid var(--line); text-align: start; }
.t-week thead th { border-top: 0; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.t-print { align-self: flex-start; border: 0; cursor: pointer; font: inherit; }
.t-stages { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.t-stages li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 2px 14px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border-inline-start: 6px solid var(--c); }
.t-stages .t-hour { grid-row: span 3; color: var(--muted); font-size: .85rem; font-weight: 700; }
.t-stages strong { font-size: 1.02rem; }
.t-stages span:not(.t-hour) { line-height: 1.5; }
.t-stages .t-fuel { color: var(--muted); font-size: .85rem; }
/* The app comparison pages */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-icon { flex: none; border-radius: 22.5%; box-shadow: 0 1px 2px rgba(46, 30, 23, .12), 0 6px 16px rgba(46, 30, 23, .10); background: var(--surface); }
.c-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 20px; padding: 28px 24px 22px; border-radius: 28px;
  background: radial-gradient(120% 140% at 50% 0%, #fff3e3 0%, #ffe4d4 55%, #ffd9d6 100%); }
.c-vs-app { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.c-vs-app strong { font-size: 1.2rem; font-weight: 720; letter-spacing: -.02em; }
.c-vs-app span { color: var(--muted); font-size: .82rem; }
.c-vs-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--accent);
  font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 14px rgba(46, 30, 23, .12); }
.c-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 30px 20px; border-radius: 28px;
  background: radial-gradient(120% 140% at 50% 0%, #fff3e3 0%, #ffe4d4 55%, #ffd9d6 100%); }
.c-row .c-icon:first-child { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 10px 26px rgba(255, 138, 61, .35); }
.c-vs-note { grid-column: 1 / -1; margin: 6px 0 0; color: #5f4639; font-size: .85rem; text-align: center; }
.c-matrix { margin: 0; }
.c-matrix figcaption { margin-bottom: 10px; color: var(--muted); font-size: .88rem; }
.c-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.c-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.c-matrix table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.c-matrix thead td:first-child { width: 200px; }
.c-matrix--two thead td:first-child { width: 40%; }
.c-matrix th, .c-matrix td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.c-matrix tbody tr:last-child > * { border-bottom: 0; }
.c-matrix tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); text-align: start; font-weight: 600; }
.c-matrix thead th { position: sticky; top: 0; background: var(--surface); font-weight: 650; }
.c-head { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .82rem; }
.c-head a { color: inherit; }
.c-matrix .c-ours { background: rgba(255, 138, 61, .08); }
.c-yes { color: #1a9a6c; }
.c-no { color: #c9b7ab; }
.c-yes .i, .c-no .i { vertical-align: middle; }
.c-unknown { color: var(--muted); font-size: .8rem; }
.c-chooses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.c-choose { padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.c-choose--ours { border-color: rgba(255, 138, 61, .45); background: linear-gradient(170deg, #fff6ec, var(--surface) 60%); }
.c-choose-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.c-choose h3 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.c-choose ul, .c-card ul { margin: 0; padding-inline-start: 1.1em; line-height: 1.55; }
.c-choose li, .c-card li { margin: 6px 0; }
.c-cards { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: app; }
.c-card { position: relative; padding: 22px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); counter-increment: app; }
.c-card--ours { border-color: rgba(255, 138, 61, .5); box-shadow: 0 10px 30px rgba(255, 138, 61, .12); }
.c-card-head { display: flex; align-items: center; gap: 14px; }
.c-card-head h3 { margin: 0; font-size: 1.2rem; font-weight: 720; letter-spacing: -.02em; }
.c-card-head h3::before { content: counter(app) ". "; color: var(--muted); font-weight: 600; }
.c-card-head h3 a { color: inherit; }
.c-card-head p { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.c-best { display: inline-block; margin: 14px 0 6px; padding: 4px 12px; border-radius: 999px; background: #ffe9d6; color: #9a4a12; font-size: .8rem; font-weight: 700; }
.c-card--ours .c-best { background: var(--sunrise); color: #fff; }
.c-card > p { line-height: 1.6; }
.c-more { display: inline-block; margin-top: 8px; font-weight: 650; }
.c-faqs { display: grid; gap: 10px; }
.c-faq { padding: 4px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.c-faq summary { padding: 14px 0; cursor: pointer; font-weight: 650; list-style-position: outside; }
.c-faq p { margin: 0 0 16px; line-height: 1.6; }
@media print {
  body * { visibility: hidden; }
  .t-tool, .t-tool * { visibility: visible; }
  .t-tool { position: absolute; inset: 0 0 auto 0; padding: 0; background: none; }
  .t-fields, .t-print, .t-private, .t-tool .t-note { display: none; }
  .t-result, .t-stages li { background: none; }
  .t-stages li { break-inside: avoid; }
}

.health-note { margin-bottom: 30px; padding: 30px 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.health-note h2 { margin-bottom: 10px; font-size: 1.15rem; letter-spacing: -.02em; }
.health-note p { max-width: 820px; margin: 0; color: var(--muted); }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 115px; }
.details .eyebrow { color: var(--accent); }
.detail-list article { padding: 26px 0; border-bottom: 1px solid var(--line); }
.detail-list article:first-child { padding-top: 0; }
.detail-list h3 { margin-bottom: 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; }
.detail-list p { margin-bottom: 0; color: var(--muted); }

.download-section { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; padding-block: 105px; border-top: 1px solid var(--line); }
.download-section .eyebrow { color: var(--accent); }
.download-section h2 em { color: var(--accent); font-style: normal; }
.download-section > div > p:last-child { margin: 24px 0 0; color: var(--muted); }
.download-action { justify-self: end; min-width: min(100%, 360px); }
.download-button { display: flex; justify-content: space-between; gap: 40px; padding: 19px 23px; border-radius: 100px; background: var(--sunrise); color: var(--ink); font-weight: 680; box-shadow: 0 12px 28px #ff8a3d40; }
.sunny-celebrate { width: 110px; margin: 0 auto 18px; }
.download-action p { margin: 12px 0 0; color: var(--muted); font-size: .8rem; text-align: center; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding-block: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.site-footer .product-brand span { color: var(--text); font-size: 1.05rem; letter-spacing: -.04em; }
.studio-credit { margin: 0; }
.studio-credit a { display: inline-flex; align-items: center; gap: 10px; }
.studio-credit strong { color: var(--text); font-weight: 650; }
.site-footer > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 24px; }
.site-footer a:hover { color: var(--accent); }
.social { display: inline-flex; align-items: center; gap: 14px; }
.social a { display: inline-flex; padding: 2px; }
.languages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.languages [aria-current] { color: var(--text); font-weight: 650; }

.policy-shell { display: grid; grid-template-columns: 280px 1fr; gap: 90px; padding-block: 90px 120px; }
.policy-shell aside { position: sticky; top: 32px; align-self: start; }
.policy-shell aside .eyebrow { color: var(--accent); }
.policy-shell aside h1 { margin-bottom: 22px; font-size: 4rem; }
.policy-shell aside > p:not(.eyebrow) { color: var(--muted); }
.policy-shell aside nav { display: grid; gap: 7px; margin-top: 32px; }
.policy-shell aside nav a { color: var(--muted); }
.policy-shell aside nav a:hover { color: var(--accent); }
.policy-notice { padding: 18px 22px; border: 1px solid var(--accent); border-radius: 12px; color: var(--accent); font-weight: 650; }
.policy-content section { position: relative; padding: 38px 0 42px 64px; border-bottom: 1px solid var(--line); }
.policy-content section > span { position: absolute; top: 43px; left: 0; color: var(--accent); font-size: .75rem; letter-spacing: .1em; }
.policy-content h2 { margin-bottom: 14px; font-size: 1.65rem; letter-spacing: -.04em; }
.policy-content p { margin-bottom: 0; color: var(--muted); }
.policy-content p + p { margin-top: 16px; }
.policy-content strong { color: var(--text); }
.policy-content a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.policy-content a:hover { color: var(--accent); }

/* Other languages: hyphenate long words in headings; keep Arabic letters joined and CJK untracked. */
:not(:lang(en)) > :is(h1, h2, h3) { hyphens: auto; overflow-wrap: break-word; }
:is(:lang(ar), :lang(he), :lang(hi), :lang(th), :lang(ja), :lang(ko), :lang(zh)) :is(h1, h2, h3, p, li, span, strong, small, a, figcaption) { letter-spacing: 0; }
:is(:lang(ar), :lang(he), :lang(hi), :lang(th), :lang(ja), :lang(ko), :lang(zh)) .site-header .product-brand span { letter-spacing: -.055em; }
:is(:lang(ar), :lang(he), :lang(ja), :lang(ko), :lang(zh)) :is(h1, h2) { line-height: 1.25; }
:is(:lang(hi), :lang(th)) :is(h1, h2) { line-height: 1.4; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; overflow-wrap: anywhere; }
:lang(ko) :is(h1, h2, h3, p, li) { word-break: keep-all; }

@media (max-width: 1040px) {
  .site-header.has-sections { padding-bottom: 70px; }
  .has-sections .nav-sections { position: absolute; inset-inline-start: 0; bottom: 24px; gap: 26px; }
}

@media (max-width: 900px) {
  .wrap { width: min(100% - 64px, 1280px); }
  .site-header nav { gap: 22px; }
  .nav-sections { gap: 18px; }
  .w-layout { grid-template-columns: minmax(0, 1fr); }
  .w-side { display: none; }
  .hero { min-height: 650px; }
  .focus-layout { gap: 50px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .studio-credit { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .policy-shell { grid-template-columns: 220px 1fr; gap: 48px; }
}

@media (max-width: 680px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { flex-wrap: wrap; padding-block: 20px; }
  .site-header nav { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
  .site-header.has-sections { padding-bottom: 20px; }
  .nav-sections, .has-sections .nav-sections { position: static; order: 1; width: 100%; flex-wrap: wrap; gap: 8px 20px; padding-top: 4px; }
  .nav-download { padding: 8px 15px; }
  .language-menu ul { width: 100%; columns: 2; }
  .hero { grid-template-columns: 1fr; gap: 42px; min-height: 0; padding-block: 58px 70px; }
  h1 { font-size: clamp(3.25rem, 15vw, 5rem); }
  .hero-visual { min-height: 560px; }
  .hero-visual::before { inset: 4% 0; }
  .benefit-strip > .wrap { display: block; }
  .benefit-strip .wrap > span { display: block; max-width: none; margin-bottom: 14px; }
  .benefit-strip ul { flex-wrap: wrap; justify-content: flex-start; gap: 10px 25px; }
  .features { padding-block: 78px; }
  .section-heading { grid-template-columns: 1fr; gap: 22px; }
  .section-heading .eyebrow { grid-column: auto; margin-bottom: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article, .feature-grid article:first-child, .feature-grid article:last-child { min-height: 0; padding: 34px 0; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .feature-grid article:last-child { border-bottom: 0; }
  .focus-layout { grid-template-columns: 1fr; gap: 70px; padding-block: 72px 95px; }
  .focus-visual { width: 260px; }
  .details, .download-section { grid-template-columns: 1fr; gap: 48px; padding-block: 78px; }
  .weight-section .focus-copy { order: -1; }
  .home-guides { padding-block: 78px; }
  .w-feature { grid-template-columns: 1fr; }
  .w-feature-body { padding: 24px; }
  .w-hero { margin: 24px 0 34px; border-radius: 20px; }
  .w-app, .w-body .w-app { grid-template-columns: 1fr; gap: 0; padding: 30px 24px 0; }
  .w-app img { width: 150px; justify-self: center; margin-bottom: -40px; }
  .b-stats--3 { grid-template-columns: 1fr; }
  .b-study, .b-figure, .b-video, .b-quiz, .b-takeaways { padding: 22px 20px; }
  .w-hub { padding-top: 46px; }
  .t-tool, .b-answer { padding: 22px 20px; }
  .t-big { font-size: 1.45rem; }
  .t-stages li { grid-template-columns: 1fr; }
  .t-stages .t-hour { grid-row: auto; }
  .c-vs { padding: 22px 14px 18px; gap: 10px; }
  .c-vs .c-icon, .w-hero--apps .c-vs img.c-icon { width: 72px; height: 72px; }
  .c-vs-app strong { font-size: 1.05rem; }
  .w-hero--apps img.c-icon { width: 52px; height: 52px; }
  .c-matrix th, .c-matrix td { padding: 10px 8px; }
  .c-matrix--two { font-size: .86rem; }
  .c-card { padding: 18px; }
  .b-table th, .b-table td { padding: 10px 12px; }
  .b-table table { font-size: .9rem; }
  .explore { justify-content: flex-start; }
  .download-action { justify-self: stretch; }
  .site-footer { grid-template-columns: 1fr; justify-items: start; }
  .studio-credit { grid-row: auto; grid-column: auto; justify-self: start; }
  .site-footer > div { justify-content: flex-start; }
  .languages { justify-content: flex-start; }
  .policy-shell { grid-template-columns: 1fr; gap: 45px; padding-block: 60px 85px; }
  .policy-shell aside { position: static; }
  .policy-shell aside nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
}

@media (max-width: 390px) {
  .product-brand span { max-width: 160px; font-size: 1.4rem; }
  .site-header nav { font-size: .78rem; }
  .nav-download span { margin-inline-start: 7px; }
  .phone { width: 242px; }
  .focus-visual figcaption { margin-inline: 0; }
  .sunny { width: 84px; }
  .hero-visual { min-height: 510px; }
}

@media (max-width: 350px) {
  .language-menu ul { padding: 8px; }
  .language-menu li a { padding: 6px 8px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .phone, .focus-visual, .focus-visual figcaption { transform: none; }
  .sunny { animation: none; }
  .sunny-loop { display: none; }
}