/* The homepage. Shared shell in site.css, rebuilt app surfaces in live.css.
   Everything that moves here moves on transform and opacity only. The glows
   are images drawn once the way the app draws its aurora, never live blur. */

/* ------------------------------------------------------------ Type */
.home main { overflow-x: clip; }
.display { font-size: clamp(52px, 6.5vw, 100px); line-height: .94; letter-spacing: -.058em; }
.display span, .title span { color: var(--yellow); }
/* The brand as the app writes it: lowercase, the plus in yellow. */
.vplus, .title .vplus, .display .vplus { color: inherit; white-space: nowrap; }
.vplus > i { font-style: normal; color: var(--yellow); }
.title { font-size: clamp(40px, 5.2vw, 74px); line-height: .98; letter-spacing: -.052em; }
.title--small { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.045em; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 15px; font-weight: 500; color: var(--text); }
.eyebrow .icon { flex-basis: 20px; width: 20px; height: 20px; }
.body-large { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.45; }
.note { color: var(--quiet); font-size: 14px; line-height: 1.6; }
/* The app's comparison tag: 62 × 26 capsule, white at 12%, Onest 12 semibold. */
.plus { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 62px; min-height: 26px; padding: 5px 10px; border-radius: 999px; background: rgb(255 255 255 / 12%); color: var(--text); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.plus > span { color: var(--yellow); }

.section { --pad: clamp(72px, 7vw, 112px); position: relative; isolation: isolate; padding-block: var(--pad); }
.section-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 72px); }
.section-head > p:not(.feature-access) { margin-top: 24px; color: var(--muted); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.section-head--center { margin-inline: auto; text-align: center; }
/* A line break kept for phones only. */
.br-phone { display: none; }

/* Two columns: copy and one app surface. */
.split { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.split--reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.split--reverse > .split-visual { order: -1; }
.split-copy { max-width: 520px; }
.split-copy > .body-large { margin-top: 32px; }
.split-copy > p:not(.eyebrow):not(.feature-access):not(.body-large) { margin-top: 18px; color: var(--muted); font-size: 17px; }
.split-visual { min-width: 0; }

/* Native bezel canvas: 1350 × 2760. Display cutout: 1206 × 2622 at (72, 69). */
.iphone { position: relative; isolation: isolate; aspect-ratio: 1350 / 2760; }
.iphone-display { position: absolute; left: calc(72 / 1350 * 100%); top: calc(69 / 2760 * 100%); width: calc(1206 / 1350 * 100%); height: calc(2622 / 2760 * 100%); overflow: hidden; border-radius: 15% / 6.9%; background: var(--bg); }
.iphone-display > img { width: 100%; height: 100%; object-fit: contain; }
.iphone-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.app-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 12px 32px rgb(0 0 0 / 45%); }

/* ------------------------------------------------------------ Page glows
   The page sits on #121212, a step under the grey in the middle of the App
   Store screenshots (#161616 in v8), a little above the app's own black. Each section is lit
   behind what it shows by one image drawn the way AuroraBackground draws
   the Today glow: the app's blob shapes, larger and softer, laid over
   each other in the colours of that section, so the light changes hue as
   it fades instead of standing as one round spot. The Today glow itself, the
   brand gradient, lights the hero and the closing section. */
body.home { position: relative; background: #121212; }
.section-glow, .download-glow { position: absolute; z-index: -1; translate: -50% -50%; pointer-events: none; }
.section-glow img, .download-glow img { display: block; width: 100%; height: auto; }
/* Each glow is centred where it was drawn on a 1440 px page and keeps that
   size there; narrower windows scale it with the page. */
.section-glow--how { left: 50%; top: 62.8%; width: min(2320px, 161.11vw); }
.section-glow--together { left: calc(50% + min(340px, 23.61vw)); top: 54.1%; width: min(1720px, 119.44vw); }
.section-glow--perspective { left: 50%; top: 61.8%; width: min(2480px, 172.22vw); }
.section-glow--widgets { left: calc(50% - min(300px, 20.83vw)); top: 54.4%; width: min(1640px, 113.89vw); }
.section-glow--yours { left: calc(50% + min(260px, 18.06vw)); top: 31.2%; width: min(1560px, 108.33vw); }
/* The builder's glow takes the colour picked in the builder: a mask of the
   glow's shape (tint.py) filled with --habit-glow at --habit-glow-k, the
   opacity at which that colour lifts the page as much as the teal glow it
   replaced (builder.mjs). */
.section-glow--yours > i { display: block; aspect-ratio: 624 / 576; background-color: var(--habit-glow, #59ADB3); opacity: var(--habit-glow-k, .225); -webkit-mask: url('/assets/site/glow/yours-mask.webp') center / 100% 100% no-repeat; mask: url('/assets/site/glow/yours-mask.webp') center / 100% 100% no-repeat; transition: background-color .6s ease, opacity .6s ease; }
.download-glow { left: calc(50% + min(260px, 18.06vw)); top: 33.4%; width: min(1560px, 108.33vw); }

/* ------------------------------------------------------------ Glass panels
   The panels that hold the app's surfaces are glass like the menu bar: a low
   white fill that lets the section's light through, and the bar's rim drawn
   over the content. No backdrop blur: behind them there is only the page and
   its soft glows, which a blur would not change. The app's cards inside are
   a step lighter than the panel (live.css). */
.step-visual, .feature-panel, .app-frame, .builder-panel, .icon-panel, .compare-card, .compare-item { position: relative; background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 3.5%)); }
/* The rim is the panel's own shadow, a 1 px ring just outside its edge,
   lit along the top. Drawn with the panel, so nothing inside it can lift
   the rim onto a layer of its own: on iPhone a rim laid over the content
   lost its top or bottom line whenever something inside the panel moved. */
:is(.step-visual, .feature-panel, .app-frame, .builder-panel, .icon-panel, .compare-card, .compare-item, .faq-more) { box-shadow: var(--rim-ring); }

/* ------------------------------------------------------------ Intro
   The logo arrives in the middle of the first screen, holds for a beat and
   flies up into its place in the menu, shrinking, while the page shows
   through. The script at the end of index.html aims the flight (--fx, --fy,
   --fs); without it the logo still leaves for the top and the page still
   appears, so nothing can stay covered. */
.intro { display: none; }
html.has-intro:not(.intro-done) .intro { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; background: #121212; pointer-events: none; animation: intro-clear .56s cubic-bezier(.4, 0, .2, 1) .74s forwards, intro-gone 0s 1.4s forwards; }
.intro-logo { --fx: 0px; --fy: -42vh; --fs: .33; position: relative; display: block; width: min(288px, 62vw); aspect-ratio: 96 / 20; animation: intro-in .5s cubic-bezier(.2, .7, .2, 1) backwards, intro-fly .68s cubic-bezier(.7, 0, .2, 1) .62s forwards; }
.intro-mark { position: absolute; left: 0; top: 1.465%; width: 16.902%; height: 42.465%; background: var(--yellow); -webkit-mask: url('/assets/site/mark.svg') center / contain no-repeat; mask: url('/assets/site/mark.svg') center / contain no-repeat; }
.intro-type { position: absolute; left: 18.884%; top: 0; width: 81.116%; height: 100%; background: #fff; -webkit-mask: url('/assets/site/wordmark.svg') center / contain no-repeat; mask: url('/assets/site/wordmark.svg') center / contain no-repeat; }
html.has-intro .site-header .brand { visibility: hidden; animation: intro-show 0s 1.3s forwards; }
@keyframes intro-in { from { opacity: 0; transform: scale(.92); } }
@keyframes intro-fly { to { transform: translate(var(--fx), var(--fy)) scale(var(--fs)); } }
@keyframes intro-clear { to { background-color: rgb(18 18 18 / 0%); } }
@keyframes intro-gone { to { visibility: hidden; } }
@keyframes intro-show { to { visibility: visible; } }

/* ------------------------------------------------------------ Hero
   The live Today screen, as large as the column allows, with two of its
   widgets standing at its sides. Only the phone takes taps; the widgets
   follow its day and stay put. The Today glow falls behind it from above. */
.hero { position: relative; overflow-x: clip; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; padding-block: 24px 32px; }
/* The phone may run past the first screen; the copy keeps to it. On a
   desktop the copy, from the app icon to the store button, sits in the
   middle of the window under the menu bar (12 px inset and 56 px bar), so
   the button is inside the first screen at every window height. */
.hero-copy { position: relative; z-index: 2; min-width: 0; }
@media (min-width: 961px) {
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: calc(100svh - 68px); margin-top: -24px; padding-block: 16px; }
}
/* The type also follows the window height, so the store badge stays well
   inside the first screen. */
.hero .display { margin-top: 26px; font-size: clamp(52px, min(6.3vw, 10.4svh), 100px); }
.lede { max-width: 31ch; margin-top: 26px; color: rgb(255 255 255 / 79%); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.principles { display: flex; flex-wrap: wrap; align-items: center; margin-top: 26px; font-size: 16px; font-weight: 500; }
.principles > span { white-space: nowrap; }
.principles > span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%; background: var(--yellow); vertical-align: 3px; }
.hero .store-cta { margin-top: 32px; }

/* The phone grows with the window up to 480 px rather than shrinking to the
   first screen. The widgets are a real small widget's share of the phone
   (170 of 402 pt) and hang mostly past its sides, so they cover no plus.
   On a wide window the stage runs into the page margin. */
.hero-stage { --pw: clamp(320px, 30.5vw, 480px); position: relative; display: grid; place-items: center; width: calc(var(--pw) * 1.7); margin-right: calc(-1 * max(0px, (100vw - 1240px) / 2 - var(--gutter) - 8px)); justify-self: end; }
.hero-device { position: relative; z-index: 1; width: var(--pw); }
/* The glow is drawn around the phone on a 1440 px page, so it is sized and
   placed in phone widths. Its sun dims it, and it swells once with every log
   (live/hero.mjs). */
.hero-glow { position: absolute; z-index: 0; left: calc(50% + var(--pw) * 0.0125); top: calc(50% + var(--pw) * -0.1845); width: calc(var(--pw) * 3.2802); translate: -50% -50%; pointer-events: none; transition: opacity .6s ease; }
.hero-glow img { display: block; width: 100%; height: auto; opacity: .86; }
.hero-stage.is-glow-off .hero-glow { opacity: .16; }
.hero-card { position: absolute; z-index: 3; width: calc(var(--pw) * .42); pointer-events: none; }
/* The shadow is laid in layers, each reaching about twice as far as the one
   before and no darker, so it thins out evenly instead of ending in a rim. */
.hero-card > .wdg { box-shadow: var(--wdg-ring), 0 1px 2px rgb(0 0 0 / 10%), 0 3px 6px rgb(0 0 0 / 10%), 0 7px 14px rgb(0 0 0 / 11%), 0 16px 32px rgb(0 0 0 / 12%), 0 34px 68px rgb(0 0 0 / 14%); }
.hero-card--pair > .wdg { border-radius: calc(24px * var(--k, 1)); }
.hero-card--pair { left: calc(var(--pw) * -.27); top: 7%; }
.hero-card--week { right: calc(var(--pw) * -.35); top: 50%; translate: 0 -50%; }
html.js .hero-card:not(.is-in) { opacity: 0; }

/* ------------------------------------------------------------ Dots look
   The second look (?look=dots): a fixed WebGL dot field under everything,
   drawn by live/dots.mjs. Panels keep their own fills above it. */
.dots-layer { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ------------------------------------------------------------ How it works
   Three equal squares, each a slice of the app 20 pt in from its edges: the
   catalog, the Coffee card on Today, and History. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.step { display: flex; flex-direction: column; min-width: 0; }
/* Glass panels (above); the content is clipped inside, the rim drawn over it. */
.step-visual { aspect-ratio: 1; overflow: hidden; border-radius: 30px; }
/* Each step paints on its own layer. Safari on iPhone otherwise draws the
   scaled app canvas into the page tiles and can leave a hairline seam across
   its text where two tiles meet. */
.step-visual > img { width: 100%; height: 100%; object-fit: cover; }
.step-copy { padding: 30px 6px 0; }
.step-index { display: flex; align-items: center; gap: 10px; color: var(--quiet); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.step-index .icon { width: 20px; height: 20px; flex-basis: 20px; }
.step h3 { margin-top: 18px; font-size: 25px; }
.step-copy > p:last-child { margin-top: 10px; color: var(--muted); font-size: 17px; }

/* ------------------------------------------------------------ Often Together */
.app-frame { overflow: hidden; border-radius: 34px; }
.together-frame { max-width: 480px; margin-inline: auto; }
.together-frame > img { width: 100%; aspect-ratio: 394 / 540; object-fit: cover; object-position: 50% 8%; }

/* ------------------------------------------------------------ Perspective */
.perspective-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
/* Concentric corners: the screen sits 20 in, so its corner is the
   panel's 36 less those 20. */
.feature-panel { display: flex; flex-direction: column; min-width: 0; border-radius: 36px; }
.panel-copy { padding: 30px 28px 26px; }
.panel-copy .eyebrow { margin-bottom: 18px; }
.panel-copy h3 { font-size: 26px; line-height: 1.15; }
.panel-copy > p:not(.eyebrow) { margin-top: 12px; color: var(--muted); }
.panel-screen { margin: auto 20px 20px; overflow: hidden; border-radius: 16px; }
.panel-screen > img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 32%; }

/* Insights daily trend, the app's neutral cards and yellow selection. */
.insights-demo { margin: auto 20px 20px; min-width: 0; }
.period-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.period-tabs button { min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 10%); color: rgb(255 255 255 / 85%); font-size: 14px; font-weight: 600; transition: background-color .25s ease, color .25s ease; }
.period-tabs button[aria-pressed="true"] { background: var(--yellow); color: var(--bg); }
.period-tabs button:hover:not([aria-pressed="true"]) { background: rgb(255 255 255 / 14%); }
/* Title and subline set like Your rhythm: 20/25 semibold over 14/18. */
.trend-heading { display: grid; margin-bottom: 16px; }
.trend-heading h4 { margin: 0; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -.01em; }
.trend-heading > span { margin-top: 3px; font-size: 14px; line-height: 18px; color: var(--muted); }
.trend-card { padding: 12px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 16px; background: rgb(255 255 255 / 5%); }
.trend-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 16px; }
.trend-metrics > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: 12px; background: rgb(255 255 255 / 6%); }
.trend-metrics dt { font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.trend-metrics dd { order: -1; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; }
.trend-metrics [data-metric="difference"] { color: var(--yellow); }
.trend-plot { position: relative; padding-top: 12px; }
.trend-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 4px; height: 112px; border-bottom: 1px solid rgb(255 255 255 / 20%); }
.trend-bars--week { gap: 8px; }
.trend-bar { display: flex; align-items: end; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.trend-bar > span { display: block; width: 100%; height: max(4px, var(--bar-height)); border-radius: 3px 3px 0 0; background: var(--yellow); transform-origin: 50% 100%; transition: background-color .25s ease; }
.trend-bar.is-empty > span { background: rgb(255 255 255 / 12%); }
.trend-bars.has-selection .trend-bar:not([aria-pressed="true"]):not(.is-empty) > span { background: rgb(255 255 255 / 24%); }
.trend-bar[aria-pressed="true"] > span { background: var(--yellow); }
.trend-bar:focus-visible { outline-offset: 3px; }
.trend-tooltip { position: absolute; left: 0; top: 0; z-index: 2; display: grid; gap: 3px; width: max-content; max-width: 100%; padding: 8px 12px; border: 1px solid #555658; border-radius: 15px; background: #333436; pointer-events: none; font-size: 13px; line-height: 1.4; }
/* No transition: site.js draws the glide per frame. Under a transform
   transition Safari moved the tip on a layer of its own, and the layer lost
   the tip's top border until it stopped. */
.trend-tooltip strong { font-weight: 600; }
.trend-tooltip > span { color: var(--muted); }
.trend-tooltip > span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--yellow); }
.trend-axis { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
/* The chart takes up what a shorter summary leaves (site.js), so the three
   panels never jump between periods. */
.trend-summary { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 8%); color: var(--muted); font-size: 12px; line-height: 1.5; }
.insights-demo.is-waiting .trend-bar > span { transform: scaleY(0); }

/* ------------------------------------------------------------ Widgets
   The widgets as the Home Screen lays them out on a 402 pt iPhone: the medium
   widget, two small ones 22 pt apart, a label under each. */
.home-screen { position: relative; padding: clamp(8px, 2vw, 24px) 0 clamp(28px, 4vw, 52px); }
.home-screen > img { width: 100%; height: auto; aspect-ratio: 348 / 380; object-fit: cover; object-position: 50% 9%; border-radius: 24px; }
.home-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(100% * 22 / 348); width: 100%; max-width: 480px; margin-inline: auto; }
.home-grid > .home-medium { grid-column: 1 / -1; margin-bottom: clamp(14px, 2vw, 22px); }
.home-label { margin-top: 7px; text-align: center; color: rgb(255 255 255 / 92%); font-size: 13px; font-weight: 500; line-height: 16px; }

/* ------------------------------------------------------------ Privacy
   Above its neighbours' glows, so the yellow is never tinted. */
.privacy-band { position: relative; z-index: 1; padding-block: clamp(72px, 7vw, 112px); background: var(--yellow); color: #17150A; }
.privacy-band .eyebrow, .privacy-band .icon { color: inherit; }
/* The yellow is a hard edge, so the sections on either side keep half a
   gap more from it than from each other. */
.section:has(+ .privacy-band) { padding-bottom: calc(var(--pad) * 1.5); }
.privacy-band + .section { padding-top: calc(var(--pad) * 1.5); }
.privacy-band :focus-visible { outline-color: #17150A; }
.privacy-band ::selection { background: #17150A; color: var(--yellow); }
.privacy-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgb(23 21 10 / 18%); }
.text-link { display: inline-flex; flex-shrink: 0; gap: 16px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 500; }
.privacy-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); padding-top: clamp(36px, 4vw, 56px); }
/* GroupedRowIconPlate on the yellow band: the glyph in a rounded plate of
   ink at 10%. */
.plate { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: rgb(23 21 10 / 10%); }
.plate .icon { width: 28px; height: 28px; flex-basis: 28px; }
.plate--small { width: 36px; height: 36px; border-radius: 10px; }
.plate--small .icon { width: 20px; height: 20px; flex-basis: 20px; }
.privacy-facts h3 { margin-top: 22px; font-size: 22px; }
.privacy-facts p { margin-top: 10px; color: #3B3613; font-size: 16px; }

/* ------------------------------------------------------------ Make it yours */
.yours-builder { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.yours-copy > .body-large { margin-top: 32px; }
.yours-copy > p:not(.eyebrow):not(.feature-access):not(.body-large), .icons-copy > p:not(.eyebrow):not(.feature-access) { margin-top: 18px; color: var(--muted); font-size: 17px; }
.yours-icons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; margin-top: clamp(96px, 11vw, 168px); }
.builder-stage { width: 100%; max-width: 760px; justify-self: end; }
.home-icon { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 32px; color: var(--text); font-size: 13px; font-weight: 500; }
.how { padding-top: clamp(56px, 6vw, 96px); }
.home-icon img { width: 76px; height: 76px; border-radius: 22.4%; box-shadow: 0 10px 30px rgb(0 0 0 / 40%), inset 0 0 0 1px rgb(255 255 255 / 10%); }

/* ------------------------------------------------------------ Vyces+
   The paywall in page order: its moving strip of real cards, then what
   changes with vyces+, on the paywall's own aurora. The strip fades into
   the page at both sides through a mask, so the light behind runs on under
   it; the padding gives the cards' shadows room inside the mask. */
.plans { position: relative; isolation: isolate; padding-bottom: clamp(72px, 8vw, 112px); }
.plans .section-head { margin-bottom: clamp(44px, 5vw, 64px); }
/* AuroraBackground .premium, drawn once to an image: yellow over orange over
   pink, lit from above behind the heading, as two copies drifting slowly
   against each other so the light shifts without leaving its place.
   Transform only; the drift rests while the section is far off screen. The
   light becomes visible 21 to 29% down the image as the copies drift, so
   that point is set 30 px above the heading at its latest: it always starts
   a little above the first line and never reaches the section above. */
.plans-glow { position: absolute; z-index: -1; left: 50%; top: calc(var(--pad) - 200px - min(1900px, 200vw) / 1.9 * .29); width: min(1900px, 200vw); aspect-ratio: 1.9; translate: -50% 0; opacity: .42; pointer-events: none; }
.plans-glow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; will-change: transform; animation: plans-drift 19s ease-in-out infinite alternate; animation-play-state: var(--glow-play, running); }
.plans-glow img + img { opacity: .7; animation-name: plans-drift-b; animation-duration: 25s; }
@keyframes plans-drift { from { transform: translate3d(-5%, 2%, 0) scale(1.04); } to { transform: translate3d(5%, -3%, 0) scale(.95); } }
@keyframes plans-drift-b { from { transform: translate3d(6%, -2%, 0) scale(.94, 1.06) scaleX(-1); } to { transform: translate3d(-4%, 3%, 0) scale(1.08, .96) scaleX(-1); } }
.plans:not(.is-near) { --glow-play: paused; }
.strip { --fade: clamp(40px, 11vw, 200px); position: relative; padding-block: 48px; margin-block: -48px calc(clamp(72px, 9vw, 128px) - 48px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); }

/* What changes with vyces+: the spec sheet in the page, swapped for the Free
   and vyces+ switch built from its rows (live/plans.mjs). Both stand on the
   same glass as the panels above. */
.compare { position: relative; display: grid; justify-items: center; gap: 40px; }
.compare-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgb(255 255 255 / 12%); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; }
.compare-badge > i { font-style: normal; color: var(--yellow); }
.compare .mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); vertical-align: middle; }
.compare .mark::before { content: ''; width: 14px; height: 14px; background: #08090B; -webkit-mask: url('/assets/site/icons/check.svg') center / contain no-repeat; mask: url('/assets/site/icons/check.svg') center / contain no-repeat; }
.compare .mark--free { background: rgb(255 255 255 / 14%); }
.compare .mark--free::before { background: var(--text); }
.compare .dash { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: rgb(255 255 255 / 18%); vertical-align: middle; }
.compare-value { font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.compare-value--plus { color: var(--yellow); }
.compare-cta { display: grid; justify-items: center; gap: 16px; text-align: center; }
.compare-cta .store-cta { margin-top: 0; }
.compare-cta .plan-note { color: var(--muted); font-size: 14px; }

/* The spec sheet, for when scripts do not run: the features in five groups
   over two columns, each group with Free and vyces+ side by side. Free's
   ticks stay quiet; vyces+'s are the app's yellow. The column labels show
   once at the top of each column. */
.compare-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; width: min(100%, 1040px); padding: 8px 36px 24px; border-radius: 32px; }
.compare-col { min-width: 0; }
.compare-group { width: 100%; border-collapse: collapse; }
.compare-group + .compare-group { margin-top: 14px; }
.compare-group :is(th, td) { padding: 0; vertical-align: middle; }
.compare-group thead th { height: 58px; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.compare-group thead th:first-child { text-align: left; color: var(--quiet); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.compare-group :is(th, td):nth-child(2) { width: 76px; }
.compare-group :is(th, td):nth-child(3) { width: 96px; }
.compare-group tbody :is(th, td) { height: 54px; border-top: 1px solid rgb(255 255 255 / 8%); text-align: center; }
.compare-group tbody th { padding-right: 12px; text-align: left; font-size: 16px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
/* Each feature in its colour from the app's vyces+ settings list: the glyph
   in the accent on a plate of the same accent at 12%. */
.compare-group .compare-plate { display: inline-grid; place-items: center; vertical-align: middle; width: 32px; height: 32px; margin-right: 12px; border-radius: 9px; background: color-mix(in srgb, var(--tint) 12%, transparent); }
.compare-group .compare-plate .icon { width: 20px; height: 20px; flex-basis: 20px; color: var(--tint); }
@media (min-width: 761px) {
  .compare-group + .compare-group thead th:not(:first-child) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The switch: Free and vyces+ as the app's segmented control over every
   feature; the plan picked lights what it has. It opens on vyces+. */
.compare-switcher { display: grid; justify-items: center; gap: 28px; width: min(100%, 1040px); }
.compare-switch { --switch-ease: cubic-bezier(.3, 1.25, .5, 1); position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 330px); padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 7%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); }
.compare-switch::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 999px; background: rgb(255 255 255 / 16%); transition: transform .5s var(--switch-ease), background-color .3s ease; }
.compare-switch[data-plan="plus"]::before { transform: translateX(100%); background: var(--yellow); }
.compare-switch button { position: relative; z-index: 1; height: 48px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 16px; font-weight: 600; transition: color .3s ease; }
.compare-switch button > i { font-style: normal; color: var(--yellow); transition: color .3s ease; }
.compare-switch button[aria-pressed="true"] { color: var(--text); }
.compare-switch[data-plan="plus"] button[aria-pressed="true"], .compare-switch[data-plan="plus"] button[aria-pressed="true"] > i { color: #17150A; }
.compare-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; width: 100%; margin: 0; padding: 0; list-style: none; }
.compare-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: center; column-gap: 14px; min-height: 78px; padding: 14px 18px 14px 16px; border-radius: 22px; transition: opacity .45s ease var(--d, 0ms); }
.compare-item .compare-plate { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / 8%); transition: background-color .45s ease var(--d, 0ms); }
.compare-item .compare-plate .icon { width: 22px; height: 22px; flex-basis: 22px; color: var(--text); transition: color .45s ease var(--d, 0ms); }
.compare-item h3 { font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.compare-item p { margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.compare-item .compare-state { display: grid; place-items: center; }
.compare-item:not(.is-on) { opacity: .42; }
.compare-switch.is-waiting, .compare-item.is-waiting { opacity: 0; }
/* A feature that is on lights in its colour from the app. */
.compare-item.is-on .compare-plate { background: color-mix(in srgb, var(--tint, var(--yellow)) 14%, transparent); }
.compare-item.is-on .compare-plate .icon { color: var(--tint, var(--yellow)); }
/* The rest of the list behind one button, on a phone only: the switch's
   track in a full-width pill. */
.compare-more { display: none; width: 100%; height: 52px; margin-top: -14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 7%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.compare-more:active { background: rgb(255 255 255 / 11%); }

/* ------------------------------------------------------------ FAQ */
.faq-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
.faq-head { display: grid; align-content: start; gap: 32px; }
/* The rest of the questions live on the support page; this card points
   there, in the panels' surface and ring. */
.faq-more { position: relative; display: grid; gap: 16px; max-width: 400px; padding: 24px; border-radius: 22px; background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 3.5%)); }
.faq-more { justify-items: start; }
.faq-plate { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgb(255 212 0 / 12%); }
.faq-plate .icon { width: 24px; height: 24px; }
.faq-more p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.faq-link { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--yellow); color: #17150A; font-size: 15px; font-weight: 600; transition: background-color .2s ease; }
.faq-link:hover { background: #FFE04D; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 26px; cursor: pointer; font-size: 19px; font-weight: 500; letter-spacing: -.01em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary::after { content: ''; flex: 0 0 24px; width: 24px; height: 24px; background: var(--muted); mask: url('/assets/site/icons/chevron-down.svg') center / contain no-repeat; transition: transform .35s var(--ease); }
.faq details[open]:not(.is-closing) > summary::after { transform: rotate(180deg); }
.faq summary:hover { color: #fff; }
.faq details > p { max-width: 60ch; padding-bottom: 26px; color: var(--muted); font-size: 17px; }

/* ------------------------------------------------------------ Download
   Both phones whole on the bottom of the Today glow, which fades out over
   the top of the footer. Their shadow is a plain box behind each bezel: a
   drop-shadow filter is redrawn whenever its layer is. */
.download { position: relative; isolation: isolate; padding-block: clamp(72px, 7vw, 112px); }
.display--closing { margin-top: 36px; font-size: clamp(48px, 5.4vw, 84px); }
.download-copy > p { max-width: 30ch; margin-top: 26px; color: var(--muted); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.download-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.download-line { color: var(--text); }
.download-line span { color: var(--yellow); }
.download .store-cta { margin-top: 34px; }
.download-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; max-width: 720px; justify-self: end; width: 100%; padding-bottom: 72px; }
.download-screens .iphone::before { content: ''; position: absolute; z-index: -1; inset: 1.5% 3%; border-radius: 15% / 7%; box-shadow: 0 30px 60px rgb(0 0 0 / 45%); }
.download-screens .iphone:last-child { margin-top: 72px; margin-bottom: -72px; }


/* ------------------------------------------------------------ Footer
   Links in three columns, then the brand lockup across the whole width. The
   light comes from its yellow mark: a warm glow centred on the mark, and the
   letters lit by it. The mark itself is the switch that turns it off and on. */
.footer--home { position: relative; isolation: isolate; overflow: clip; padding: clamp(56px, 6vw, 88px) 0 clamp(32px, 4vw, 48px); border-top: 0; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, .7fr)); gap: 40px; }
.footer-lead > p { max-width: 30ch; margin-top: 18px; color: var(--muted); font-size: 15px; }
.footer-lead .store-badge { width: 140px; margin-top: 24px; }
.footer--home .footer-col { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; font-size: 15px; }
.footer-col > p { margin-bottom: 8px; color: var(--quiet); font-size: 13px; font-weight: 600; }
.footer--home .footer-col a { padding-block: 5px; }
/* Brand / Group 43 at full width: mark 16.226 x 8.493 at (0, .293),
   wordmark 77.871 x 20 at x 18.129, in a 96 x 20 box. */
.footer-word { position: relative; aspect-ratio: 96 / 20; margin-top: clamp(56px, 7vw, 104px); }
/* The mark and letters are one inline SVG drawn as vector paths. They were
   CSS masks before, and iPhone Safari moved masked letters by a pixel as the
   page scrolled. */
.footer-word-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
/* The mark is a button the size of the mark: it grows a little under the
   pointer and the glow behind it brightens, so it reads as something to
   press. */
.footer-switch { position: absolute; z-index: 1; left: 0; top: 1.465%; width: 16.902%; height: 42.465%; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* On a phone the mark is about 25 px tall; the press area reaches past it. */
.footer-switch::before { content: ''; position: absolute; inset: -10px; }
.footer-word-mark { fill: var(--yellow); transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease); }
.footer-word:has(.footer-switch:hover) .footer-word-mark { transform: scale(1.04); }
.footer-word:has(.footer-switch:active) .footer-word-mark { transform: scale(.97); transition-duration: .12s; }
/* Light from the mark, centred on it (-12.9% across the letters' box, 22%
   down): warm and bright on the v, falling off over y and c to nothing at
   the s. It is a circle clipped to the letters, so only their colour
   changes. Turning the glow off shrinks it back to a dot left of the letters
   and then fades it; turning it on spreads it out from the mark again. */
.footer-word-light { transform-box: fill-box; transform-origin: center; transition: transform 1.4s cubic-bezier(.2, .7, .25, 1), opacity .2s; }
.footer--home.is-glow-off .footer-word-light { transform: scale(.0045); opacity: 0; transition: transform 1s cubic-bezier(.45, 0, .75, .5), opacity .3s .8s; }
.footer-glow { position: absolute; z-index: -1; left: 8.45%; top: 23%; width: min(1000px, 92vw); translate: -49% -50%; opacity: .5; pointer-events: none; transition: opacity .9s ease; }
.footer-word:has(.footer-switch:hover) .footer-glow { opacity: .6; }
.footer--home.is-glow-off .footer-glow { opacity: 0; transition-duration: .7s; }
.footer--home.is-glow-off .footer-word:has(.footer-switch:hover) .footer-glow { opacity: .08; }
.footer-glow img { width: 100%; height: auto; }
.footer--home .footer-bottom { margin-top: clamp(28px, 3vw, 40px); color: var(--quiet); font-size: 13px; }

/* ------------------------------------------------------------ Entrances
   Hero copy rises on load, right behind the intro when there is one;
   section intros rise once as they enter. */
html.js .rise { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
html.has-intro .rise { animation-delay: calc(var(--i, 0) * 60ms + 720ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* The hero phone rises a little later and further than the copy. It uses
   `translate`, since its `transform` follows the pointer. */
html.js .hero-device > .iphone { animation: phone-in .9s var(--ease) .12s both; }
html.has-intro .hero-device > .iphone { animation-delay: .78s; }
@keyframes phone-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: none; } }
html.js .reveal { opacity: 0; transform: translateY(20px); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1100px) {
  .steps { gap: 16px; }
  .step h3 { font-size: 22px; }
  .perspective-grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
  .feature-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
  .panel-screen, .insights-demo { margin: 20px 20px 20px 0; }
  .yours-builder { grid-template-columns: 1fr; }
  .builder-stage { justify-self: center; }
  .compare-card { gap: 0 40px; padding-inline: 28px; }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-block: 48px 64px; gap: 56px; }
  .hero-stage { --pw: min(400px, 58vw); justify-self: center; margin-right: 0; }
  /* In one column each step reads number, title and line, then its screen
     right under them; the steps keep a wider gap between each other, so
     every number belongs to the screen below it. */
  .steps { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; gap: 88px; }
  .step-copy { order: -1; padding: 0 4px 20px; }
  .step h3 { margin-top: 14px; }
  .split, .split--reverse { grid-template-columns: 1fr; gap: 48px; }
  .split--reverse > .split-visual { order: 0; }
  .split-copy { max-width: 620px; }
  /* Often Together: the heading and its lead, the screen, then the rest. */
  .together .split { gap: 0; }
  .together .split-copy { display: contents; }
  .together .split-copy > * { max-width: 620px; }
  .together .split-visual { order: 1; margin-top: 32px; }
  .together .split-copy > p:not(.eyebrow):not(.body-large) { order: 2; }
  .together .split-copy > p:not(.eyebrow):not(.body-large):not(.note) { margin-top: 28px; }
  .together .split-copy > .body-large { margin-top: 20px; }
  .home-screen { max-width: 560px; margin-inline: auto; }
  /* App icons: the heading first, then the picker that answers it. The
     icon on a Home Screen beside the copy only means something next to the
     picker in two columns. */
  .yours-icons { grid-template-columns: 1fr; gap: 32px; }
  .icons-copy { order: -1; }
  .yours-icons .home-icon { display: none; }
  .icon-stage { justify-self: center; }
  .faq-inner { grid-template-columns: 1fr; gap: 32px; }
  .download-inner { grid-template-columns: 1fr; gap: 56px; }
  .download-screens { justify-self: center; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-lead { grid-column: 1 / -1; }
  .privacy-facts { grid-template-columns: 1fr; gap: 32px; }
  .privacy-facts article { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; }
  .privacy-facts article .plate { grid-row: span 2; }
  .privacy-facts h3 { margin-top: 0; }
}
@media (max-width: 760px) {
  /* Stretch, or the reports and rhythm screens shrink to nothing. The screen
     sits 12 in, so the panel's corner is its 16 plus those 12. */
  .feature-panel { display: flex; align-items: stretch; border-radius: 28px; }
  .panel-copy { padding: 24px 20px 20px; }
  .panel-copy .eyebrow { margin-bottom: 14px; }
  .panel-screen, .insights-demo { margin: 0 12px 12px; }
  .privacy-head { flex-direction: column; align-items: flex-start; }
  .faq summary { font-size: 17px; padding-block: 22px; }
  .strip { --s: .79; }
  /* One column: the sheet becomes the app's comparison card. */
  .compare-card { grid-template-columns: minmax(0, 1fr); width: min(100%, 520px); padding: 4px 18px 14px; border-radius: 26px; }
  .compare-col + .compare-col { margin-top: 14px; }
  .compare-group thead th { height: 52px; }
  .compare-group tbody :is(th, td) { height: 50px; }
  .compare-group tbody th { font-size: 15px; }
  .compare-group .compare-plate { width: 30px; height: 30px; margin-right: 10px; }
  .compare-group .compare-plate .icon { width: 18px; height: 18px; flex-basis: 18px; }
  .compare-group :is(th, td):nth-child(2) { width: 52px; }
  .compare-group :is(th, td):nth-child(3) { width: 82px; }
  .compare-value { font-size: 14px; }
  .compare .mark { width: 22px; height: 22px; }
  .compare .mark::before { width: 13px; height: 13px; }
  .compare-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .compare-list:not(.is-open) > .compare-item:nth-child(n+7) { display: none; }
  .compare-more { display: block; }
}
/* Phone: the hero reads heading, principles, phone, then the line and
   the button, the copy centred. The heading keeps more room above it than
   below. The phone is centred, as wide as the screen allows less 60 px, and
   fades out from the bottom of the second row of habits (row two ends 68%
   down the phone) to nothing at 78%, so the third row only shows through.
   The Often Together widget sits whole over the lower right habit and the
   fade under it, from 60% across, its right edge inside the screen at every
   phone width. */
@media (max-width: 640px) {
  /* In one column the glows follow the stacked visuals. The steps and the
     perspective glows are rows of colours, one per desktop column: turned
     upright they run down the stack, the first colour behind the first card.
     The single glows grow behind their visual instead of sitting as a spot. */
  .section-glow--how { left: 50%; top: 58%; width: calc(330vw + 900px); rotate: 90deg; }
  .section-glow--perspective { left: 50%; top: 54%; width: calc(330vw + 900px); rotate: 90deg; }
  .section-glow--together { left: 50%; top: 51.5%; width: 230vw; }
  .section-glow--widgets { left: 50%; top: 69%; width: 230vw; }
  /* The habit colour sits behind the preview card, the vyces+ glow behind
   the heading and the top of the strip, and the closing glow behind the
   phone: placed in px from the section top, which holds from 360 to 640. */
  .section-glow--yours { left: 50%; top: 600px; width: 230vw; }
  .plans-glow { top: calc(60px - 300vw / 1.9 / 2); width: 300vw; }
  /* Wide and centred on the heading, so the phone sits in front of a broad
     field; a smaller glow centred on the phone showed only as a ring round
     its frame. */
  .download-glow { left: 50%; top: 130px; width: 260vw; }
  /* The glow shows to about 97% of its height (58vw below the mark at
     170vw wide), and Safari shows a flat fill past the page end, under its
     toolbar. The footer runs on far enough below the mark for the glow to
     fade out whole, so it never meets the page end as a cut line. */
  .footer-glow { width: 170vw; }
  .footer--home { padding-bottom: max(32px, calc(60vw - 130px)); }
  /* The logo does not rise in on phones: iPhone Safari moved the masked
     letters and their light by a pixel when the rise ended. */
  html.js .footer-word.reveal { opacity: 1; transform: none; }
  .hero-inner { gap: 0; padding-block: 40px 8px; text-align: center; }
  .hero-copy { display: contents; }
  .hero-copy > * { position: relative; z-index: 2; }
  .hero .app-icon { display: none; }
  .hero .display { order: 1; margin-top: 0; font-size: clamp(30px, 9.2vw, 44px); }
  .hero .display br:first-of-type { display: none; }
  .hero-stage { --pw: min(360px, calc(100vw - 60px)); order: 3; display: block; width: 100%; margin-top: 24px; text-align: left; }
  .hero-device { width: var(--pw); margin-inline: auto; }
  .hero-device > .iphone { width: 100%; margin-bottom: calc(var(--pw) * -.4498); -webkit-mask-image: linear-gradient(#000 64%, rgb(0 0 0 / 55%) 70%, rgb(0 0 0 / 15%) 75%, transparent 78%); mask-image: linear-gradient(#000 64%, rgb(0 0 0 / 55%) 70%, rgb(0 0 0 / 15%) 75%, transparent 78%); }
  .hero-card--pair { left: calc(var(--pw) * .6); top: calc(var(--pw) * 1.05); }
  .hero-card--week { display: none; }
  .principles { order: 2; justify-content: center; margin-top: 16px; }
  .lede { order: 4; max-width: none; margin-top: 16px; }
  .hero .store-cta { order: 5; margin: 28px auto 0; }
  /* Phone scale: type and gaps sized for a hand-held screen. */
  .display, .display--closing { font-size: 40px; }
  .title { font-size: 32px; }
  .title--small { font-size: 28px; }
  .lede, .section-head > p:not(.feature-access), .download-copy > p, .body-large { font-size: 17px; }
  .section { --pad: 56px; }
  .how { padding-top: 64px; }
  .plans { padding-bottom: 56px; }
  .download, .privacy-band { padding-block: 56px; }
  /* A section's heading and its line read as one block: 12 between them,
     32 to what they introduce. */
  .section-head { margin-bottom: 32px; }
  .section-head > p:not(.feature-access) { margin-top: 12px; }
  .br-phone { display: inline; }
  /* Widgets to the yellow band: 20% less than the band's usual 1.5x gap
     (28 under the labels plus 84 became 28 plus 62). */
  .widgets.section { padding-bottom: calc(var(--pad) * 1.1); }
  .yours-icons { margin-top: 88px; }
  .app-icon { width: 52px; height: 52px; border-radius: 12px; }
  /* Download: the same order as the hero, centred, the heading on two
     lines, with one phone, Insights, fading out the same way from the
     bottom of its daily trend card (58% down the phone) to nothing at 74%. */
  .download-inner { gap: 0; text-align: center; }
  .download-copy { display: contents; }
  .download-copy > * { position: relative; z-index: 1; }
  .download .app-icon { display: none; }
  .display--closing { order: 1; margin-top: 0; font-size: clamp(30px, 9.2vw, 44px); }
  .display--closing br:first-of-type { display: none; }
  .download-screens { --pw: min(360px, calc(100vw - 60px)); order: 2; display: block; width: var(--pw); max-width: none; margin: 32px auto 0; padding: 0; }
  .download-screens .iphone:first-child { display: none; }
  /* The phone fades out before the Insights cards row (67.5% down): fading
     through the orange Most logged card read as a yellow band. */
  /* No drop shadow under the faded phone: the fade mask clips everything at
     the phone's own edge, so the shadow stopped in straight lines down its
     sides, a dark frame against the glow behind it. */
  .download-screens .iphone:last-child::before { content: none; }
  .download-screens .iphone:last-child { margin: 0 0 calc(var(--pw) * -.7258); translate: none !important; -webkit-mask-image: linear-gradient(#000 52%, rgb(0 0 0 / 55%) 57%, rgb(0 0 0 / 15%) 61%, transparent 64.5%); mask-image: linear-gradient(#000 52%, rgb(0 0 0 / 55%) 57%, rgb(0 0 0 / 15%) 61%, transparent 64.5%); }
  .download-copy > .download-line { order: 3; margin: 16px auto 0; white-space: nowrap; }
  .download .store-cta { order: 4; margin: 28px auto 0; }
  .step h3 { font-size: 20px; }
  .panel-copy h3 { font-size: 22px; }
  .builder-stage { max-width: none; }
}
@media (max-width: 520px) {
  .trend-metrics dd { font-size: 16px; }
  .trend-metrics dt { font-size: 12px; }
  .trend-bars { gap: 3px; }
  .period-tabs button { font-size: 12px; }
  .download-screens { width: min(380px, 100%); }
}
@media (max-width: 400px) {
  .compare-card { padding-inline: 14px; }
  .compare-group tbody th { font-size: 14px; }
}
@media (max-width: 360px) {
  .display, .display--closing { font-size: 36px; }
  .principles > span + span::before { margin: 0 10px; }
}
@media (min-width: 961px) and (max-height: 780px) {
  .hero .app-icon { width: 54px; height: 54px; border-radius: 13px; }
  .hero .display { margin-top: 24px; font-size: clamp(52px, 5.6vw, 84px); }
  .lede, .principles { margin-top: 20px; }
  .hero .store-cta { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .compare-card.reveal tbody tr, html.js .compare-card.reveal td:last-child .mark { opacity: 1; transform: none; transition: none; }
  html.js .rise, html.js .reveal { animation: none; opacity: 1; transform: none; transition: none; }
  html.js .hero-device > .iphone { animation: none; }
  .faq summary::after { transition: none; }
  .plans-glow img { animation: none; }
  .footer-word-light, .footer--home.is-glow-off .footer-word-light, .footer-glow, .footer-word-mark, .section-glow--yours > i { transition: none; }
  .compare-switch::before, .compare-item, .compare-item .compare-plate, .compare-item .compare-plate .icon { transition: none; }
}