/* Shared shell for every page: type, colour, header, footer and the store
   badge. The homepage layout lives in home.css, the legal pages add
   documents.css. Colours are the app's dark theme tokens; the secondary and
   tertiary text are white at the lightness of the app's greys (64% and 46%,
   the least that keeps body text at 4.5 to 1 on the page), so they take the
   colour of what lies under them instead of a bluish grey of their own. */
@font-face {
  font-family: Onest;
  src: url('/assets/onest.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
:root { color-scheme: dark; --bg: #08090B; --surface: #101113; --surface-2: #17191D; --text: #F2F4F6; --muted: rgb(255 255 255 / 64%); --quiet: rgb(255 255 255 / 46%); --line: rgb(255 255 255 / 9%); --rim-ring: 0 -1px 0 rgb(255 255 255 / 24%), 0 0 0 1px rgb(255 255 255 / 10%); --yellow: #FFD400; --gutter: clamp(20px, 5vw, 64px); --header-offset: 92px; --ease: cubic-bezier(0.22, 0.72, 0.25, 1); }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
/* Taps answer at once: no waiting for a double tap to zoom (pinch still
   zooms), which in Safari on iPhone held taps on the app surfaces back by a
   third of a second and turned a quick second tap into a zoom. The page
   never pans sideways: glows and the plans strip reach past the edges and
   are clipped there; clip, not hidden, so the sticky header still sticks. */
html { touch-action: manipulation; overscroll-behavior-x: none; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Onest, system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(56px, 6.1vw, 82px); letter-spacing: -.055em; }
h2 { font-size: clamp(36px, 4vw, 54px); letter-spacing: -.045em; }
h3 { font-size: 22px; letter-spacing: -.025em; }
p { text-wrap: pretty; }
[id] { scroll-margin-top: var(--header-offset); }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 6px; }
::selection { background: var(--yellow); color: var(--bg); }
.wrap { width: min(1240px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 24px; padding: 12px 20px; color: var(--bg); background: var(--yellow); z-index: 30; }
.skip-link:focus { top: 12px; }

/* A floating bar across the window, inset as far from the sides as from the
   top: the logo on the left, the links in the middle of the window, the App
   Store button on the right. Equal side columns keep the links centred
   whatever the logo and the button measure. Glass: what passes under it is
   blurred, saturated and dimmed a little, under a low tint, so the bar takes
   the colour of the page beneath instead of a grey of its own and the
   links stay readable over the hero's phone and white headings. Its rim is
   lit softly along the top and fades down the sides, calmer than the
   panels' rim (v10: a brighter top read as a hard line). Scroll frames with
   the blur match the opaque bar of v8 (SITE_NOTES, v9). On the homepage a
   hairline along its lower edge fills as the page is read, and the link of
   the section in view turns white. */
.site-header { position: sticky; top: 0; z-index: 20; padding: 12px 12px 0; pointer-events: none; }
.site-header .header { pointer-events: auto; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; width: auto; max-width: none; min-height: 56px; margin: 0; padding: 0 10px; /* A touch tighter than concentric with the App Store badge (7.7 + 10). */ border-radius: 16px; background: rgb(20 20 22 / 78%); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 12px 32px rgb(0 0 0 / 24%); }
/* The glass rim: a 1 px ring cut out of a gradient, lightest on top, fading
   down the sides, faint along the bottom. Drawn over the content, so nothing
   inside can cover it. The homepage's panels wear the same ring, a step
   brighter on top (--rim-ring). */
.site-header .header::before { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); pointer-events: none; }
/* The button sits as far in from the bar's edge as from its top. The logo
   is centred on its letters, not on its box: the tail of the y would lift
   them 2 px, so the box drops by that much; it then sits as far in from the
   left as the letters do from the top. */
.site-header .brand { top: 2px; margin-left: 10px; }
.site-header .header-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 20px; }
.header-help { font-size: 14px; color: rgb(255 255 255 / 70%); transition: color .2s ease; }
.header-help:hover { color: var(--text); }
/* Figma Brand / Group 43: 3278 × 682.848, mark 554 × 290 at (0, 10), wordmark x=619. */
.brand { position: relative; display: block; flex-shrink: 0; width: 96px; height: 20px; }
.brand-mark { position: absolute; left: 0; top: .293px; width: 16.226px; height: 8.493px; background: var(--yellow); mask: url('/assets/site/mark.svg') center / contain no-repeat; }
.brand-wordmark { position: absolute; left: 18.129px; top: 0; width: 77.871px; height: 20px; filter: invert(1); }
.header nav { display: flex; gap: 26px; font-size: 14px; }
.header nav a { position: relative; padding-block: 17px; white-space: nowrap; color: rgb(255 255 255 / 70%); transition: color .2s ease; }
.header nav a:hover, .header nav a.is-current { color: var(--text); }
.header-progress { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; overflow: hidden; border-radius: 1px; }
.header-progress > i { position: absolute; inset: 0; border-radius: 1px; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.footer nav a { padding-block: 12px; white-space: nowrap; color: rgb(255 255 255 / 85%); transition: color .2s ease; }
.footer nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.nav-plus > span { color: var(--yellow); }
.store-badge { display: inline-flex; flex-shrink: 0; width: 164px; border-radius: 9px; }
.store-badge img { width: 100%; }
.store-badge--small { width: 108px; }
.store-cta { width: 160px; max-width: 100%; margin-top: 30px; }
.store-cta .store-badge { display: flex; width: 100%; }

.icon { display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; background: currentColor; mask: var(--icon) center / contain no-repeat; color: var(--yellow); }
.icon--habits-two { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h7v7H3Z M14 3h7v7h-7Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg opacity='0.4'%3E%3Cpath d='M3 14h7v7H3Z M14 14h7v7h-7Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/habits-two.svg */
.icon--sliders { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Filter, Settings'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M4.73 20.1801V13.8201M4.73 10.1801V3.82007M12 20.1801V12.0001M12 8.36007V3.82007M19.27 20.1801V15.6401M19.27 12.0001V3.82007M2 13.8201H7.45M9.27 8.36007H14.73M16.55 15.6401H22' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/sliders.svg */
.icon--history { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/History, Logs, Time'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M22.493 11.43L20.803 9.74L19.113 11.42M20.8 9.751V12.001C20.8 16.971 16.771 21 11.8 21C6.82 21 2.8 16.971 2.8 12C2.8 7.02 6.829 3 11.8 3C14.64 3 17.17 4.319 18.81 6.375M15.17 14.87L11.51 12.69V7.97' stroke='%23191A1F' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/history.svg */
.icon--link { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Link' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/link.svg */
.icon--chart { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Analytics, Chart, Stats, Bar'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M15 20.5H19.5C20.32 20.5 21 19.82 21 19V5C21 4.17 20.32 3.5 19.5 3.5H16.5C15.67 3.5 15 4.17 15 5V20.5ZM15 20.5H9M9 20.5V10.5C9 9.67 9.67 9 10.5 9H15M9 20.5V15H4.5C3.67 15 3 15.67 3 16.5V19C3 19.82 3.67 20.5 4.5 20.5H9Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/chart.svg */
.icon--report-week { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23323232' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M19.414 6.128L16.864 3.585C16.489 3.205 15.974 3 15.444 3H8.98C7.87 3 6.98 3.895 6.98 5V15.71C6.98 16.81 7.87 17.71 8.98 17.71H17.98C19.08 17.71 19.98 16.81 19.98 15.71V7.53C19.98 6.99 19.76 6.49 19.39 6.11L19.414 6.128Z'/%3E%3Cpath d='M20 8H16C15.44 8 15 7.55 15 7V3'/%3E%3Cpath d='M17 17.71V18.99C17 20.09 16.1 20.99 15 20.99H6C4.89 20.99 4 20.09 4 18.99V7.99C4 6.88 4.89 5.99 6 5.99H7'/%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/report-week.svg */
.icon--widgets { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 10H5C3.895 10 3 9.1 3 8V5C3 3.895 3.895 3 5 3H19C20.1 3 21 3.895 21 5V8C21 9.1 20.1 10 19 10Z' stroke='%23323232' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 21H16C14.89 21 14 20.1 14 19V16C14 14.895 14.89 14 16 14H19C20.1 14 21 14.895 21 16V19C21 20.1 20.1 21 19 21Z' stroke='%23323232' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 21H5C3.895 21 3 20.1 3 19V16C3 14.89 3.895 14 5 14H8C9.1 14 10 14.89 10 16V19C10 20.1 9.1 21 8 21Z' stroke='%23323232' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* /assets/site/icons/widgets.svg */
.icon--plus-circle { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpath d='M0 0h24v24H0Z'/%3E%3Cg stroke-linecap='round' stroke-width='1.5' stroke='%23323232' fill='none' stroke-linejoin='round'%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M16 12H8'/%3E%3Cpath d='M12 21v0c-4.98 0-9-4.029-9-9v0c0-4.98 4.029-9 9-9v0c4.971 0 9 4.029 9 9v0c0 4.971-4.029 9-9 9Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/plus-circle.svg */
.icon--export { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Document, Download, Export'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M20 8.49998H16.5C15.39 8.49998 14.5 7.59998 14.5 6.49998V2.99998M14.25 14.75L12 17L9.74998 14.75M12.005 12V17M19.12 6.11998L16.87 3.86998C16.3 3.29998 15.54 2.98898 14.74 2.98898H6.97998C5.31998 2.98898 3.97998 4.32898 3.97998 5.98898V17.989C3.97998 19.639 5.31998 20.989 6.97998 20.989H16.98C18.63 20.989 19.98 19.639 19.98 17.989V8.21998C19.97 7.41998 19.66 6.65998 19.1 6.08998L19.12 6.11998Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/export.svg */
.icon--shield { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Shield, Protect. Privacy'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M20.5 12.49C20.5 16.67 15.03 19.74 12.86 20.79C12.31 21.05 11.67 21.05 11.12 20.79C8.95 19.73 3.48 16.67 3.48 12.48V7.41999C3.47 6.57999 3.99 5.83999 4.77 5.53999L11.27 3.09999V3.08999C11.72 2.91999 12.22 2.91999 12.67 3.08999L19.17 5.51999C19.95 5.80999 20.46 6.54999 20.46 7.38999V12.46' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/shield.svg */
.icon--lock { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Lock'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M8 10V7C8 4.79 9.79 3 12 3C14.2 3 16 4.79 16 7V10M17 21H7C5.89 21 5 20.1 5 19V12C5 10.89 5.89 10 7 10H17C18.1 10 19 10.89 19 12V19C19 20.1 18.1 21 17 21Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/lock.svg */
.icon--infinity { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12C9.6 8.5 8.1 7 6 7C3.2 7 1.5 9.2 1.5 12S3.2 17 6 17C8.1 17 9.6 15.5 12 12S15.9 7 18 7C20.8 7 22.5 9.2 22.5 12S20.8 17 18 17C15.9 17 14.4 15.5 12 12Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* /assets/site/icons/infinity.svg */
.icon--faceid { --icon: url("data:image/svg+xml,%3Csvg version='1.1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg fill='none'%3E%3Cpath d='M0,0h24v24h-24Z'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.5,9.08v1.5'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.5,9.08v1.5'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11,13.597h0.5c0.552,0 1,-0.448 1,-1v-3.5'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.242,16.157c-1.79,1.79 -4.693,1.79 -6.483,0'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.588,3h-2.588c-1.105,0 -2,0.895 -2,2v2.588'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16.412,21h2.588c1.105,0 2,-0.895 2,-2v-2.588'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3,16.412v2.588c0,1.105 0.895,2 2,2h2.588'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21,7.588v-2.588c0,-1.105 -0.895,-2 -2,-2h-2.588'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/faceid.svg */
.icon--report-day { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23323232' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M20 8.50001H16.5C15.39 8.50001 14.5 7.60001 14.5 6.50001V3.00001M19.12 6.12001L16.87 3.87001C16.3 3.30001 15.54 2.98901 14.74 2.98901H6.98004C5.32004 2.98901 3.98004 4.32901 3.98004 5.98901V17.989C3.98004 19.639 5.32004 20.989 6.98004 20.989H16.98C18.63 20.989 19.98 19.639 19.98 17.989V8.22001C19.97 7.42001 19.66 6.66001 19.1 6.09001L19.12 6.12001Z'/%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/report-day.svg */
.icon--clock { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Clock, Time'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M8.55 3.67999C13.14 1.77799 18.4 3.95 20.3 8.54999C22.2 13.14 20.02 18.4 15.43 20.3C10.83 22.2 5.57 20.02 3.674 15.43C1.764 10.83 3.944 5.56999 8.544 3.67399' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M11.718 7.98V12.631L15.368 14.851' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/clock.svg */
.icon--presentation-chart { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-linecap='round' stroke-width='1.5' stroke='%23323232' fill='none' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='16' y2='20'/%3E%3Cline x1='8' x2='9.86' y1='21' y2='16'/%3E%3Cline x1='16' x2='14.14' y1='21' y2='16'/%3E%3Cline x1='7.5' x2='7.5' y1='12' y2='10'/%3E%3Cline x1='10.5' x2='10.5' y1='12' y2='7'/%3E%3Cline x1='13.5' x2='13.5' y1='12' y2='9'/%3E%3Cline x1='16.5' x2='16.5' y1='12' y2='7.45'/%3E%3Crect width='18' height='13' x='3' y='3' rx='2'/%3E%3C/g%3E%3Cpath fill='none' d='M0 0h24v24H0Z'/%3E%3C/svg%3E"); } /* /assets/site/icons/presentation-chart.svg */
.icon--sun { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42'/%3E%3C/svg%3E"); } /* /assets/site/icons/sun.svg */
.icon--palette { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Color Palette, Personalize'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M11.9989 6.37503C11.8389 6.37503 11.7189 6.49503 11.7189 6.64503C11.7189 6.79503 11.8389 6.91503 11.9889 6.91503C12.1389 6.91503 12.2589 6.78503 12.2589 6.63503C12.2489 6.47503 12.1289 6.35503 11.9789 6.35503M6.92392 11.999C6.92392 11.839 6.79392 11.719 6.64992 11.719C6.48992 11.719 6.36992 11.839 6.36992 11.989C6.36992 12.139 6.48992 12.259 6.63992 12.259C6.78992 12.259 6.91392 12.129 6.91392 11.979M15.9769 8.02003C15.8669 7.91003 15.6869 7.91003 15.5869 8.02003C15.4769 8.12003 15.4769 8.30002 15.5869 8.40002C15.6869 8.50002 15.8669 8.50002 15.9669 8.40002C16.0669 8.29002 16.0669 8.11003 15.9569 8.01003M8.40992 15.589C8.29992 15.479 8.11992 15.479 8.01992 15.589C7.90992 15.689 7.90992 15.869 8.01992 15.969C8.11992 16.069 8.29992 16.069 8.39992 15.969C8.49992 15.859 8.49992 15.679 8.38992 15.579M8.40992 8.41003C8.50992 8.30003 8.50992 8.12003 8.39992 8.02003C8.28992 7.91003 8.10992 7.91003 8.00992 8.02003C7.89992 8.12003 7.89992 8.30002 8.00992 8.40002C8.10992 8.50002 8.28992 8.50003 8.38992 8.39003M11.9999 21C6.94492 21 2.85992 16.83 2.99992 11.745C3.12992 7.04903 7.04492 3.12503 11.7399 2.99503C16.8269 2.84503 20.9899 6.93603 20.9899 11.991V12.991C20.9899 14.091 20.0899 14.991 18.9899 14.991H16.9199C15.5899 14.991 14.6299 16.261 14.9969 17.531L15.2469 18.431C15.6069 19.701 14.6469 20.981 13.3169 20.981H11.9669L11.9999 21Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/palette.svg */
.icon--help { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpath d='M0,0h24v24h-24Z'%3E%3C/path%3E%3Cpath d='M0,0h24v24h-24v-24Z'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20,20v-14.222c0,-0.982 -0.796,-1.778 -1.778,-1.778h-12.444c-0.982,0 -1.778,0.796 -1.778,1.778v10.667c0,0.982 0.796,1.778 1.778,1.778h10.889l3.333,1.777Z'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.998,14.791c-0.096,0 -0.174,0.078 -0.173,0.174c0,0.096 0.078,0.174 0.174,0.174c0.096,0 0.174,-0.078 0.174,-0.174c0.001,-0.096 -0.077,-0.174 -0.175,-0.174'%3E%3C/path%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.999,12.076v-0.24c0,-0.787 0.486,-1.213 0.974,-1.54c0.476,-0.32 0.953,-0.738 0.953,-1.509c0,-1.064 -0.862,-1.926 -1.926,-1.926c-1.064,0 -1.927,0.86 -1.927,1.924'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/icons/help.svg */
.icon--cloud { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6.32 9.068c-2.44.33-4.33 2.4-4.33 4.932 0 2.76 2.239 5 5 5h11c2.2 0 4-1.8 4-4 0-2.21-1.8-4-4-4 0-3.314-2.686-6-6-6C9.35 5 7.11 6.7 6.31 9.068Z'/%3E%3Cpath fill='none' d='M0 0h24v24H0Z'/%3E%3C/svg%3E"); } /* /assets/site/app/habit/cloud.svg */
.icon--iphone { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpath d='M0 0h24v24H0Z'/%3E%3Cg stroke-linecap='round' stroke-width='1.5' stroke='%23323232' fill='none' stroke-linejoin='round'%3E%3Cpath d='M16 21H8c-1.11 0-2-.9-2-2V5c0-1.105.89-2 2-2h8c1.1 0 2 .895 2 2v14c0 1.1-.9 2-2 2Z'/%3E%3Cpath d='M11.99 17.25c-.14 0-.25.11-.25.25 0 .13.11.25.25.25 .13 0 .25-.12.25-.25 0-.14-.12-.25-.26-.25'/%3E%3Cpath d='M10.75 6h2.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/app/ui/iphone.svg */
.icon--bell { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Bell, Notification'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M10.5199 20.5H13.4699M17.4999 17.359C18.5399 17.359 19.3899 16.509 19.3999 15.459C19.3899 14.919 19.1799 14.409 18.7999 14.039L17.5399 12.779V9.02003C17.5299 5.95003 15.0499 3.47003 11.9899 3.47003C11.9799 3.47003 11.9799 3.47003 11.9799 3.47003C8.90995 3.47003 6.42995 5.95003 6.42995 9.01003V12.75L5.16995 14.01C4.78995 14.38 4.56995 14.89 4.56995 15.42C4.56995 16.46 5.41995 17.31 6.46995 17.31L17.4999 17.359Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/app/ui/bell.svg */
.icon--calendar { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Icon/Calendar, Schedule'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M7.5 7V2M16.5 7V2M21 15.5H17.5C16.39 15.5 15.5 16.39 15.5 17.5V21M21 7.5V15.75V15.749C20.99 16.539 20.68 17.299 20.12 17.869L17.87 20.109C17.3 20.669 16.54 20.979 15.74 20.979H5.97998C4.31998 20.979 2.97998 19.629 2.97998 17.979V7.47C2.97998 5.81 4.31998 4.47 5.97998 4.47H17.98C19.63 4.47 20.98 5.81 20.98 7.47L21 7.5Z' stroke='%23191A1F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* /assets/site/app/ui/calendar.svg */
.icon--language { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-linecap='round' stroke-width='1.5' stroke='%23323232' fill='none' stroke-linejoin='round'%3E%3Cpath d='M7.5 4v3'/%3E%3Cpath d='M20.5 20l-4-9 -4 9'/%3E%3Cpath d='M13.39 18h6.22'/%3E%3Cpath d='M3.5 15c4.095-.33 7.676-3.91 8.001-8h-8'/%3E%3Cpath d='M11.5 15c-2.56-.21-4.798-2.45-5-5'/%3E%3C/g%3E%3Cpath fill='none' d='M0 0h24v24H0Z'/%3E%3C/svg%3E"); } /* /assets/site/app/ui/language.svg */

.footer { border-top: 1px solid var(--line); padding-block: 32px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 30px; color: var(--muted); font-size: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.menu-button, .menu-sheet { display: none; }

@media (max-width: 1000px) {
  .site-header .header { gap: 22px; }
  .header nav { gap: 20px; }
}
/* Below 820 the links fold away; the bar stays. */
@media (max-width: 820px) {
  .site-header { padding-inline: 8px; }
  /* 36 px badge in a 52 px bar: an 8 px inset all round, corner a touch
     under 7.7 + 8. */
  .site-header .header { min-height: 52px; padding-inline: 8px; border-radius: 14px; }
  .site-header .header-actions { gap: 8px; }
  .header nav, .site-header .header-help { display: none; }
  /* The menu (site.js): a sheet over the whole screen under the bar. The
     sections in large type rise in one after another, the App Store button,
     Help and the mail address sit at the bottom, and the Today glow lights
     the sheet from below. The bar loses its glass while it is open, so it
     reads as the top of the sheet; its small badge steps aside for the big
     one. The page under it does not scroll. */
  .menu-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: rgb(255 255 255 / 8%); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .3s ease; }
  .menu-button > i, .menu-button > i::before { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; border-radius: 1px; background: var(--text); transition: transform .35s var(--ease), translate .35s var(--ease); }
  .menu-button > i { translate: 0 -3px; }
  .menu-button > i::before { content: ''; translate: 0 6px; }
  html.menu-open .menu-button > i { translate: 0 0; transform: rotate(45deg); }
  html.menu-open .menu-button > i::before { translate: 0 0; transform: rotate(-90deg); }
  /* On the root only: hidden on the body too would make it the scroller and
     unstick the header. */
  html.menu-open { overflow: hidden; }
  .site-header .header { transition: background-color .3s ease, box-shadow .3s ease; }
  html.menu-open .site-header .header { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.menu-open .site-header .header::before, html.menu-open .header-progress { opacity: 0; }
  .site-header .header::before, .header-progress { transition: opacity .3s ease; }
  .site-header .store-badge--small { transition: opacity .25s ease; }
  html.menu-open .site-header .store-badge--small { opacity: 0; pointer-events: none; }
  .menu-sheet { position: fixed; z-index: 19; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow-y: auto; overscroll-behavior: contain; padding: 96px 24px max(28px, env(safe-area-inset-bottom)); background: #121212; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
  .menu-sheet::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: 0; width: 170vw; aspect-ratio: 576 / 688; translate: -50% 52%; background: url('/assets/site/glow/hero.webp') center / contain no-repeat; opacity: .5; pointer-events: none; }
  html.menu-open .menu-sheet { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
  .menu-links { display: flex; flex-direction: column; }
  .menu-links a { display: block; padding-block: 9px; color: var(--text); font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -.045em; opacity: 0; translate: 0 18px; transition: opacity .2s ease, translate 0s .3s; }
  .menu-links a > span { color: var(--yellow); }
  html.menu-open .menu-links a { opacity: 1; translate: none; transition: opacity .5s ease calc(var(--i) * 45ms + 60ms), translate .7s var(--ease) calc(var(--i) * 45ms + 60ms); }
  .menu-foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; opacity: 0; translate: 0 18px; transition: opacity .2s ease, translate 0s .3s; }
  html.menu-open .menu-foot { opacity: 1; translate: none; transition: opacity .5s ease .32s, translate .7s var(--ease) .32s; }
  .menu-store { display: flex; width: 160px; }
  .menu-store img { width: 100%; height: auto; }
  .menu-help { display: grid; place-items: center; height: 53px; border-radius: 999px; background: rgb(255 255 255 / 8%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); color: var(--text); font-size: 16px; font-weight: 600; }
  .menu-mail { grid-column: 1 / -1; justify-self: center; margin-top: 8px; padding-block: 6px; color: var(--muted); font-size: 15px; }
}
@media (max-width: 760px) {
  .footer-top { align-items: flex-start; flex-direction: column; gap: 24px; }
  .footer nav { gap: 8px 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}