/* Maru site. Tokens first. Every rule below the token block uses a token. */

:root {
  /* Light only: the app pictures are light captures, so a dark page would not match them. */
  color-scheme: light;

  /* Color */
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --surface: #FFFFFF;
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --link: #C8003B;
  --focus: #D70040;
  --tint-soft: rgba(255, 45, 85, 0.07);
  --fill-2: rgba(120, 120, 128, 0.12);
  --fill-3: rgba(120, 120, 128, 0.08);
  --ring-color: rgba(0, 0, 0, 0.08);
  --tip-bg: #1D1D1F;
  --tip-text: #FFFFFF;

  /* The iPhone frame around a screenshot */
  --device-bezel: #1D1D1F;
  --device-screen: #E5E5EA;
  --island: #000000;

  /* App components: the system colors of iOS in light mode, and the default pink of Maru (docs/design.md) */
  --app-tint: #FF2D55;
  --app-bg: #F2F2F7;
  /* The shade over the screen behind a sheet, measured from a capture. */
  --app-dim: rgba(0, 0, 0, 0.2);
  --app-label: #000000;
  --app-label-2: #8A8A8E;
  --app-widget: #FFFFFF;
  --app-cap-off: #E5E5EA;
  --app-cap-line: #C7C7CC;
  --app-cap-shine: rgba(255, 255, 255, 0.32);
  /* The glass of a Lock Screen reminder: a light fill over a blur of the wallpaper, and a bright rim. */
  --app-banner: rgba(255, 255, 255, 0.7);
  --app-banner-rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.85);
  --app-banner-text: #000000;
  --app-banner-2: rgba(0, 0, 0, 0.55);
  --app-icon-bg: #FFFFFF;
  --app-icon-ring: #E4E4E6;
  --app-icon-mark: linear-gradient(#FF5C7C, #FF2D55);
  --wallpaper: radial-gradient(120% 80% at 0% 0%, #FFE3E9, transparent 60%), radial-gradient(90% 70% at 100% 100%, #FFB3C2, transparent 70%), linear-gradient(160deg, #FFF0F3, #FFCCD7);

  /* Top bar: a dark island that hangs from the top edge */
  --bar-bg: #1D1D1F;
  --bar-text: #FFFFFF;
  --bar-text-2: rgba(255, 255, 255, 0.72);
  --bar-fill: rgba(255, 255, 255, 0.14);
  --bar-fill-press: rgba(255, 255, 255, 0.22);
  --bar-cta-bg: #FFFFFF;
  --bar-cta-text: #1D1D1F;
  --bar-ring: 0 0 0 0 transparent;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-bar: 20px;
  --radius-full: 999px;
  --radius-icon: 22%;

  /* Duration */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --dur-close: 130ms;
  --dur-fade: 150ms;
  --dur-enter: 420ms;
  --dur-bar: 480ms;
  --dur-hero: 520ms;
  --stagger: 60ms;
  /* The page entrance starts this long after the top bar starts. The content of the bar fades in at the end of its fall. */
  --delay-page: 80ms;
  --delay-bar-content: 320ms;

  /* Easing. No rule uses "ease" or "ease-in-out". */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.17, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.35, 1.55, 0.65, 1);
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);
  /* A plain ease-in, only for a menu that closes. */
  --ease-in: cubic-bezier(0.42, 0, 1, 1);

  /* Motion distances */
  --shift-enter: 14px;
  --shift-hero: 24px;
  --scale-hero: 0.97;
  /* The hero phone is the largest picture of the page. It is in the first paint, dim, and does not start from nothing. */
  --fade-hero: 0.3;
  --shift-lift: 4px;
  --blur-enter: 4px;
  --blur-lift: 2px;
  --press: 0.98;
  --blur-glass: 20px;
  --saturate-glass: 1.6;
  --scale-menu: 0.96;
  --dim-hover: 0.82;
  --dim-press: 0.68;

  /* Shadows: layers of light with a hairline ring. No single blur. */
  /* The shadow of a cut-out picture follows its shape, so it is a filter. */
  --shadow-jar: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.14));
  --hairline: 0 0 0 0.5px var(--ring-color);
  --edge-below: 0 0.5px 0 var(--ring-color);
  --edge-above: 0 -0.5px 0 var(--ring-color);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02), var(--hairline);
  --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.02), 0 8px 12px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04), var(--hairline);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.05), 0 32px 64px rgba(0, 0, 0, 0.08), var(--hairline);

  /* Icons: Hugeicons, 24 px grid, one stroke width */
  --icon-size: 20px;
  --icon-stroke: 1.5;
  --hit: 40px;

  /* Focus ring */
  --ring-width: 2px;
  --ring-offset: 2px;
  --line: 1px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-zh: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --font-ko: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.3125rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.875rem, 4vw + 0.75rem, 3rem);
  --fs-hero: clamp(1.875rem, 5vw + 0.875rem, 4rem);
  --fs-code: 0.875em;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --track-tight: -0.03em;
  --track-body: -0.01em;
  --lh-body: 1.47;
  --lh-head: 1.08;
  --lh-lede: 1.4;
  --lh-tight: 1.3;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --gutter: 20px;
  --max: 66rem;
  --max-prose: 44rem;
  --max-lede: 34rem;
  --max-copy: 26rem;
  --max-stage: 25rem;
  --device-w: 14.5rem;
  /* On a wide screen the hero phone takes this share of the screen, so the longest headline keeps its line. */
  --hero-stage-share: 36vw;
  --menu-width: 11rem;
  --nav-h: 56px;
  --bar-cta-h: 36px;
  --badge-page: 56px;
  --brand-icon: 28px;
  /* One point of an app component at its largest. */
  --pt-max: 1.1px;
}


/* Languages. Chinese, Japanese, and Korean use their system fonts, no negative tracking, and more line height. */
:lang(zh-Hans) { font-family: var(--font-zh); line-break: strict; }
:lang(ja) { font-family: var(--font-ja); line-break: strict; }
:lang(ko) { font-family: var(--font-ko); word-break: keep-all; }
:lang(en) { font-family: var(--font); line-break: auto; word-break: normal; }
:lang(de) { hyphens: auto; hyphenate-limit-chars: 12 4 4; }
/* A short German text has no hyphen at the end of a line. Only long body text hyphenates. */
:lang(de) :is(.lede, .soon, .nots li, .qa h2) { hyphens: manual; }
:root:lang(zh-Hans), :root:lang(ja), :root:lang(ko) { --track-tight: 0; --track-body: 0; --lh-body: 1.7; --lh-head: 1.3; --lh-lede: 1.6; }
/* Korean headlines sit better a little tighter. */
:root:lang(ko) { --track-tight: -0.02em; }
/* Chinese and Japanese: trim the empty half of a full-width mark at the start and the end of a line, so a centered line is centered.
   Japanese headlines also use proportional kana and marks. */
:lang(zh-Hans), :lang(ja) { text-spacing-trim: trim-both; }
:lang(ja) :is(h1, h2) { font-feature-settings: "palt"; }
/* Japanese text breaks between phrases where the browser can do it, and not inside a word. */
:lang(ja) { word-break: auto-phrase; }
:lang(en) :is(h1, h2) { font-feature-settings: normal; }

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--link); text-decoration-thickness: var(--line); text-underline-offset: var(--space-1);
  transition: color var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}
a:hover { opacity: var(--dim-hover); }
a:active { opacity: var(--dim-press); }
h1, h2 { margin: 0 0 var(--space-3); line-height: var(--lh-head); letter-spacing: var(--track-tight); text-wrap: balance; font-weight: var(--fw-bold); hyphens: manual; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
code { font: var(--fs-code) var(--font-mono); background: var(--fill-3); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
:focus-visible { outline: var(--ring-width) solid var(--focus); outline-offset: var(--ring-offset); border-radius: var(--radius-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { display: inline-block; }
.skip {
  position: fixed; left: var(--space-3); top: var(--space-3); z-index: 40;
  background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); box-shadow: var(--shadow-elevated);
  opacity: 0; pointer-events: none; transform: translateY(calc(-1 * var(--shift-lift)));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.skip:focus { opacity: 1; pointer-events: auto; transform: none; }
.lede { font-size: var(--fs-lg); line-height: var(--lh-lede); color: var(--text-2); max-width: var(--max-lede); text-wrap: balance; }
.note { font-size: var(--fs-sm); color: var(--text-2); }

/* Icons: one library, one size, one stroke. */
.icon { width: var(--icon-size); height: var(--icon-size); flex: none; stroke-width: var(--icon-stroke); }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); flex: none;
  padding: 0; border: 0; background: none; color: var(--text-2); border-radius: var(--radius-full); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-smooth), background-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.icon-btn:hover { color: var(--text); background: var(--fill-3); opacity: 1; }
.icon-btn:active { transform: scale(var(--press)); background: var(--fill-2); opacity: 1; }
.icon-btn:focus-visible { border-radius: var(--radius-full); }

/* Tooltip of an icon button. It lifts and clears a blur. It does not pop. */
.icon-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + var(--space-1)); left: 50%; z-index: 30;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--tip-bg); color: var(--tip-text); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-tight); white-space: nowrap;
  opacity: 0; pointer-events: none; filter: blur(var(--blur-lift));
  transform: translate(-50%, var(--shift-lift));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .icon-btn[data-tip]:hover::after { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
}
.icon-btn[data-tip]:focus-visible::after { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
.lang-menu[open] .icon-btn[data-tip]::after { opacity: 0; }

/* Entrance on scroll. Content is visible with no script. A group with .is-in plays the entrance of its .enter parts one time.
   The class "motion" on <html> says that motion is on. */
/* The blur clears at 60% of the time, before the movement ends, so the text is sharp when it comes to rest. */
@keyframes enter {
  from { opacity: 0; transform: translateY(var(--shift-enter)); filter: blur(var(--blur-enter)); }
  60% { filter: none; }
}
/* The page entrance: one short moment when the page loads. The bar falls in from above the top edge, and its content
   fades in at the end. The hero parts rise in order, and the hero component rises and grows to its size and settles last. */
@keyframes bar-in {
  from { transform: translateY(-100%); }
}
@keyframes fade {
  from { opacity: 0; }
}
@keyframes hero-in {
  from { opacity: var(--fade-hero); transform: translateY(var(--shift-hero)) scale(var(--scale-hero)); filter: blur(var(--blur-enter)); }
  60% { filter: none; }
}
.motion .load { animation: enter var(--dur-enter) var(--ease-smooth) both; animation-delay: calc(var(--delay-page) + var(--order, 0) * var(--stagger)); }
.motion .load-hero { animation: hero-in var(--dur-hero) var(--ease-out) both; animation-delay: var(--delay-page); }
/* A menu opens from its button: it fades in, grows from 96%, and moves a few pixels. It closes with opacity and scale only. */
@keyframes menu-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--shift-lift))) scale(var(--scale-menu)); }
}
@keyframes menu-out {
  to { opacity: 0; transform: scale(var(--scale-menu)); }
}
@keyframes fade-out {
  to { opacity: 0; }
}
@keyframes lift {
  from { opacity: 0; transform: translateY(var(--shift-lift)); filter: blur(var(--blur-lift)); }
}
.motion .is-in .enter { animation: enter var(--dur-enter) var(--ease-smooth) both; animation-delay: calc(var(--order, 0) * var(--stagger)); }
.d1 { --order: 1; }
.d2 { --order: 2; }
.d3 { --order: 3; }

/* Top bar: a dark island that hangs from the top edge of the page, in the middle. It is as wide as its content.
   It is solid, so it stays readable over a picture and over a block. It does not change when the page scrolls. */
.site-header { position: sticky; top: 0; z-index: 20; height: var(--nav-h); display: flex; justify-content: center; pointer-events: none; }
.nav-inner {
  position: relative; pointer-events: auto; height: var(--nav-h); padding: 0 var(--space-3) 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-6);
  background: var(--bar-bg); color: var(--bar-text); border-radius: 0 0 var(--radius-bar) var(--radius-bar); box-shadow: var(--bar-ring);
}
.motion .nav-inner { animation: bar-in var(--dur-bar) var(--ease-out) both; }
.motion .nav-inner > * { animation: fade var(--dur-fade) var(--ease-smooth) var(--delay-bar-content) both; }
/* The two corners where the island meets the top edge curve outward. */
.nav-inner::before, .nav-inner::after {
  content: ""; position: absolute; top: 0; width: var(--radius-bar); height: var(--radius-bar);
  background: radial-gradient(circle at 0 100%, transparent var(--radius-bar), var(--bar-bg) calc(var(--radius-bar) + 0.5px));
}
.nav-inner::before { right: 100%; }
.nav-inner::after { left: 100%; transform: scaleX(-1); }
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2); color: var(--bar-text); font-weight: var(--fw-semibold); text-decoration: none;
  border-radius: var(--radius-sm); transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}
.brand:active { transform: scale(var(--press)); }
.brand img { width: var(--brand-icon); height: var(--brand-icon); border-radius: var(--radius-icon); }
.nav-links { display: flex; align-items: center; gap: var(--space-1); }
.site-header .icon-btn { color: var(--bar-text-2); }
.site-header .icon-btn:hover, .site-header .lang-menu[open] summary { color: var(--bar-text); background: var(--bar-fill); }
.site-header .icon-btn:active { background: var(--bar-fill-press); }
.site-header :focus-visible { outline-color: var(--bar-text); }
.bar-cta {
  display: inline-flex; align-items: center; height: var(--bar-cta-h); padding: 0 var(--space-4); margin-left: var(--space-2);
  background: var(--bar-cta-bg); color: var(--bar-cta-text); border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}
.bar-cta:active { transform: scale(var(--press)); }

/* Language menu: a details element with plain links, so it works with no script. */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; -webkit-user-select: none; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 30; min-width: var(--menu-width);
  margin: 0; padding: var(--space-2); list-style: none;
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated);
  transform-origin: top right;
  animation: menu-in var(--dur-base) var(--ease-out);
}
/* site.js adds "closing" and waits for the end of this animation. Then it closes the menu. The close is faster than the open. */
.lang-menu.closing ul { animation: menu-out var(--dur-close) var(--ease-in) forwards; }
.lang-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--hit);
  padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.lang-menu li a:hover { background: var(--fill-3); opacity: 1; }
.lang-menu li a:active { transform: scale(var(--press)); background: var(--fill-2); opacity: 1; }
.lang-menu li a[aria-current] { font-weight: var(--fw-semibold); }
.lang-menu li a .icon { color: var(--link); }

/* App Store badge: Apple's artwork, not changed, 40 px or more high, with a clear space of one quarter of its height.
   Only the link around it answers to hover and press, and only with opacity. */
.badge {
  display: inline-block; flex: none; margin: calc(var(--badge-page) * 0.25) 0; border-radius: var(--radius-sm);
  transition: opacity var(--dur-fast) var(--ease-smooth);
}
.badge img { display: block; }

/* The download unit: Apple's badge, and under it a quiet row of the devices that the app runs on.
   The row starts at the left edge of the badge on a wide screen, and is centered with it on a narrow one.
   The gap is larger than the clear space of the badge. */
.get { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.get .badge { margin: 0; }
/* Before the release: one plain line in place of the badge. It is not a button and has no Apple artwork. */
.soon { margin: 0; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--fill-2); font-weight: var(--fw-semibold); }
.get-devices { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); }
.get-devices li { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Hero */
.hero { text-align: center; padding: var(--space-7) 0 var(--space-8); }
.hero-grid { display: grid; gap: var(--space-6); justify-items: center; }
.hero-stage { width: 100%; max-width: var(--max-stage); display: grid; justify-items: center; container-type: inline-size; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--space-4); }
.hero .lede { margin-bottom: var(--space-5); }

/* Device frame: iPhone 17 Pro proportions around a real screenshot of 1206 x 2622. */
.device {
  width: var(--device-w); flex: none; position: relative;
  padding: calc(var(--device-w) * 0.0125);
  border-radius: calc(var(--device-w) * 0.15);
  background: var(--device-bezel);
  box-shadow: var(--shadow-float);
}
.device-screen {
  position: relative; overflow: hidden; aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--device-w) * 0.1375);
  background: var(--device-screen);
}
.device-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The hero phone. The full Today list scrolls inside the screen, and the bars stay in place over it, as in the app.
   The scroll passes to the page at each end. A mouse can drag the list (site.js). */
.device-scroll {
  position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: inherit; cursor: grab; outline: none; user-select: none; -webkit-user-select: none;
}
.device-scroll::-webkit-scrollbar { display: none; }
.device-scroll.is-dragging { cursor: grabbing; }
.device-scroll img { position: static; display: block; height: auto; }
.device-scroll + img { pointer-events: none; }
.device:has(.device-scroll:focus-visible) { outline: var(--ring-width) solid var(--focus); outline-offset: var(--ring-offset); }
/* The other screens of the hero phone. site.js adds them. Each position is a share of the capture of 1206 x 2622.
   My Items is a page over Today. History is a page that slides in from the right, as a push in the app, and the tab
   bar stays in place over it. A sheet rises over a shade, as in the app, and its top edge is at 186 of 2622. */
.device-page, .device-hits, .device-tabs, .device-dim, .device-sheet { position: absolute; inset: 0; visibility: hidden; }
.device-hits.is-on, .device-page.is-on, .device-tabs.is-on { visibility: visible; }
.device-push, .device-tabs { transition: transform var(--dur-enter) var(--ease-smooth), visibility 0s var(--dur-enter); }
.device-push { transform: translateX(100%); }
.device-push.is-on, .device-tabs.is-on { transform: none; transition-delay: 0s; }
/* A layer that only holds buttons lets a touch reach the list under it. */
.device-hits, .device-tabs { pointer-events: none; }
.device-tabs img { clip-path: inset(89% 0 0 0); }
.device-dim { background: var(--app-dim); opacity: 0; pointer-events: none; transition: opacity var(--dur-enter) var(--ease-smooth), visibility 0s var(--dur-enter); }
.device-dim.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.device-sheet {
  top: 7.094%; overflow: hidden; border-radius: 9.37% 9.37% 0 0 / 4.64% 4.64% 0 0; background: var(--app-bg);
  transform: translateY(100%); transition: transform var(--dur-enter) var(--ease-smooth), visibility 0s var(--dur-enter);
}
.device-sheet.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.device-sheet .device-scroll { border-radius: 0; }
.device-screen .device-sheet-bar { bottom: auto; height: auto; pointer-events: none; }
/* A button over a control of a capture. It is 44 pt or more of the app in each direction. */
.device-hit {
  position: absolute; top: 6.1%; height: 7.25%; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-full); -webkit-tap-highlight-color: transparent; pointer-events: auto;
}
.device-hit:focus-visible { outline-offset: calc(-1 * var(--ring-width)); border-radius: var(--radius-full); }
.hit-lead { left: 1.6%; width: 15.8%; }
.hit-calendar { left: 69.6%; width: 13.5%; }
.hit-plus { left: 83.1%; width: 14.5%; }
.hit-tab-today, .hit-tab-items { top: 90%; height: 9.2%; width: 32%; }
.hit-tab-today { left: 18%; }
.hit-tab-items { left: 50%; }
.hit-cancel, .hit-done { top: 1.4%; height: 7.8%; width: 36%; }
.hit-cancel { left: 1.6%; }
.hit-done { right: 1.6%; }
.island {
  position: absolute; left: 50%; top: calc(var(--device-w) * 0.04);
  width: calc(var(--device-w) * 0.31); height: calc(var(--device-w) * 0.092); transform: translateX(-50%);
  background: var(--island); border-radius: var(--radius-full);
}

/* App components: the widget and the reminder, drawn in HTML.
   Every size is the size in the app in points, times --pt. A component fills the width of its container: --base is
   that width in points. --pt-max stops it at a little more than its real size. The colors are the system colors of iOS. */
.mock { --base: 370; --pt: min(var(--pt-max), 100cqw / var(--base)); flex: none; color: var(--app-label); text-align: left; letter-spacing: calc(0.47 * var(--pt)); }
/* The captures show about 0.47 pt more tracking than the same font in a browser, at every text size up to 17 pt. */

/* The reminder block: the widget and the reminder on a wallpaper, as on an iPhone. */
.wallpaper {
  width: 100%; max-width: var(--max-stage); container-type: inline-size;
  display: grid; gap: var(--space-6); justify-items: center;
  padding: var(--space-7) var(--space-3); border-radius: var(--radius-lg);
  background: var(--wallpaper); box-shadow: var(--hairline);
}
/* The medium Today widget (TodayWidget, CapsuleMark). */
.m-widget { width: calc(349.33 * var(--pt)); height: calc(164 * var(--pt)); padding: calc(17.67 * var(--pt)); background: var(--app-widget); border-radius: calc(28 * var(--pt)); box-shadow: var(--shadow-float); }
.m-widget-top { display: flex; justify-content: space-between; gap: calc(8 * var(--pt)); font-size: calc(17 * var(--pt)); line-height: calc(22 * var(--pt)); }
.m-widget-top b, .m-col b { font-weight: var(--fw-semibold); }
.m-widget-top b + b, .m-time { color: var(--app-label-2); }
.m-cols { display: flex; gap: calc(8 * var(--pt)); margin-top: calc(7.33 * var(--pt)); }
.m-col { flex: 1; min-width: 0; display: grid; align-content: start; }
.m-col b { font-size: calc(15 * var(--pt)); line-height: calc(20 * var(--pt)); white-space: nowrap; }
.m-col b.now { color: var(--app-tint); }
.m-time { font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt)); margin-top: calc(0.33 * var(--pt)); white-space: nowrap; }
.m-caps { display: flex; gap: calc(2 * var(--pt)); margin-top: calc(5.67 * var(--pt)); }
.m-caps i { position: relative; width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
.m-caps i::before {
  content: ""; position: absolute; left: calc(1.33 * var(--pt)); top: calc(6.5 * var(--pt)); width: calc(23.33 * var(--pt)); height: calc(13 * var(--pt));
  border-radius: var(--radius-full); transform: rotate(-45deg); background: var(--app-cap-off); box-shadow: inset 0 0 0 calc(1.08 * var(--pt)) var(--app-cap-line);
}
.m-caps i.on::before { background: linear-gradient(var(--app-cap-shine), transparent), var(--app-tint); box-shadow: none; }
/* The reminder on the Lock Screen, measured from a capture of iOS 26 at 3x: a glass banner with the icon, the title and
   the time in one row, and the body under them. It has the width of the widget, so the two have the same edges. */
.m-notif {
  position: relative; width: calc(349.33 * var(--pt));
  padding: calc(12.1 * var(--pt)) calc(17.67 * var(--pt)) calc(13.2 * var(--pt)) calc(64.67 * var(--pt));
  border-radius: calc(23.33 * var(--pt)); background: var(--app-banner); box-shadow: var(--app-banner-rim);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass)); backdrop-filter: blur(var(--blur-glass)) saturate(var(--saturate-glass));
}
/* The text sets the height of the banner, and the icon is in the middle of it. */
.m-app-icon { position: absolute; left: calc(14 * var(--pt)); top: 50%; translate: 0 -50%; width: calc(37.67 * var(--pt)); height: calc(37.67 * var(--pt)); border-radius: calc(8.5 * var(--pt)); background: var(--app-icon-bg); box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) var(--app-icon-ring); }
.m-app-icon::before { content: ""; position: absolute; left: calc(7.33 * var(--pt)); top: calc(13.33 * var(--pt)); width: calc(23 * var(--pt)); height: calc(11 * var(--pt)); border-radius: var(--radius-full); transform: rotate(-45deg); background: var(--app-icon-mark); }
/* The system text of the banner has the tracking of iOS, not the extra tracking of the app captures. */
.m-notif-text { display: grid; font-size: calc(15 * var(--pt)); line-height: calc(18 * var(--pt)); letter-spacing: calc(-0.15 * var(--pt)); color: var(--app-banner-text); }
/* The time sits on the baseline of the title: 1.07 pt lower in the same 18 pt line. */
.m-notif-top { display: flex; gap: calc(8 * var(--pt)); }
.m-notif b, .m-body { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-notif b { flex: 1; font-weight: var(--fw-semibold); }
.m-now { flex: none; position: relative; top: calc(1.07 * var(--pt)); font-size: calc(12 * var(--pt)); letter-spacing: 0; color: var(--app-banner-2); }

/* The photo block: three jars cut out as the app cuts out the photo of an item, on the panel with a soft shadow. */
.jars { width: 100%; max-width: var(--max-stage); display: flex; align-items: flex-end; justify-content: center; gap: var(--space-3); padding: var(--space-5) 0; }
.jars img { flex: 1 1 0; min-width: 0; height: auto; filter: var(--shadow-jar); }

/* Feature panels */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); justify-items: center; text-align: center;
  background: var(--bg-alt); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5);
  margin-bottom: var(--space-5); box-shadow: var(--hairline);
}
.feature-stage { width: 100%; display: grid; justify-items: center; container-type: inline-size; }
.feature h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.feature .lede { margin: 0 auto; max-width: var(--max-copy); }

/* Closing panel */
.closer {
  display: grid; gap: var(--space-5); justify-items: center;
  background: var(--bg-alt); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5);
  box-shadow: var(--hairline);
}
.nots { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.nots li { text-wrap: balance; background: var(--surface); border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); font-weight: var(--fw-medium); box-shadow: var(--shadow-card); text-align: center; }
.nots a { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth); }
.nots a:active { transform: scale(var(--press)); }
.closer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.closer-links a { display: inline-block; transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth); }
.closer-links a:active { transform: scale(var(--press)); }

/* Footer */
.site-footer { margin-top: var(--space-8); background: var(--bg-alt); box-shadow: var(--edge-above); color: var(--text-2); font-size: var(--fs-sm); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: var(--space-6) var(--gutter); display: grid; gap: var(--space-4); }
.site-footer p { margin: 0; font-size: var(--fs-xs); }
.footer-links, .langs ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-footer a { display: inline-block; color: var(--text-2); text-decoration: none; padding: var(--space-1) 0; transition: color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
.site-footer a:hover { color: var(--text); text-decoration: underline; opacity: 1; }
.site-footer a:active { transform: scale(var(--press)); opacity: 1; }
.footer-links a, .langs a[aria-current] { color: var(--text); }
.langs a[aria-current] { font-weight: var(--fw-semibold); }

/* A quiet hint that the page exists in the language of the browser. site.js shows it one time. */
.lang-hint {
  position: fixed; left: 0; right: 0; bottom: var(--space-4); z-index: 25; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-1); width: max-content; max-width: calc(100% - 2 * var(--space-4));
  background: var(--surface); border-radius: var(--radius-full); box-shadow: var(--shadow-elevated);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); font-size: var(--fs-sm);
  animation: lift var(--dur-slow) var(--ease-out);
}
.lang-hint a { font-weight: var(--fw-semibold); padding: var(--space-2) 0; }

/* Inner pages */
main.prose { max-width: var(--max-prose); margin: 0 auto; padding: var(--space-7) var(--gutter) 0; }
.prose h1 { margin-bottom: var(--space-5); }
.prose h2 { margin-top: var(--space-7); }
.prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li > ul { margin-top: var(--space-2); }
.prose .lede { margin-bottom: var(--space-6); }
.qa { padding: var(--space-5) 0; border-bottom: var(--line) solid var(--ring-color); }
.qa h2 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); letter-spacing: var(--track-body); line-height: var(--lh-tight); }
.qa p { margin: 0; color: var(--text-2); }
.cards { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.card h2 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); letter-spacing: var(--track-body); }
.card p:last-child, .card ul, .card li:last-child { margin-bottom: 0; }
.summary { margin-bottom: var(--space-5); }

@media (min-width: 720px) {
  :root { --gutter: 32px; --device-w: 17.5rem; }
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; padding: var(--space-8) var(--space-7); }
  .feature.flip .feature-copy { order: 2; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hero { text-align: left; padding-top: var(--space-8); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--max-stage), var(--hero-stage-share))); align-items: center; }
  .hero-copy { align-items: flex-start; }
  .get { align-items: flex-start; }
  .get-devices { justify-content: flex-start; }
}
/* A narrow screen has no room for an island. The bar is the full width, with no round corners. */
@media (max-width: 419px) {
  .site-header { display: block; }
  .nav-inner { justify-content: space-between; gap: var(--space-2); border-radius: 0; }
  .nav-inner::before, .nav-inner::after { display: none; }
  /* The last button is at the edge of the screen. Its tooltip stays inside the screen. */
  .nav-links > .icon-btn:last-child[data-tip]::after { left: auto; right: 0; transform: translate(0, var(--shift-lift)); }
  .nav-links > .icon-btn:last-child[data-tip]:hover::after, .nav-links > .icon-btn:last-child[data-tip]:focus-visible::after { transform: none; }
}
@media (max-width: 359px) {
  :root { --gutter: 12px; --hit: 36px; }
  .nav-inner { padding: 0 var(--space-2) 0 var(--space-3); }
  .nav-links { gap: 0; }
  .bar-cta { padding: 0 var(--space-3); margin-left: var(--space-1); }
  .get-devices { column-gap: var(--space-3); }
  .get-devices li { gap: var(--space-1); }
}

/* Reduced motion: no movement, no blur, and each state shows at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .icon-btn:active, .brand:active, .bar-cta:active, .lang-menu li a:active, .nots a:active, .closer-links a:active, .site-footer a:active { transform: none; }
  .icon-btn[data-tip]::after { filter: none; transform: translate(-50%, 0); }
  /* A screen of the hero phone still fades in and out, with no movement. */
  .device-push, .device-sheet { transform: none; opacity: 0; }
  .device-push, .device-sheet, .device-tabs, .device-dim { transition: opacity var(--dur-fade) var(--ease-out), visibility 0s var(--dur-fade) !important; }
  .device-push.is-on, .device-sheet.is-on { opacity: 1; }
  .device-push.is-on, .device-sheet.is-on, .device-tabs.is-on, .device-dim.is-on { transition-delay: 0s !important; }
  /* A menu still fades in and out, with no movement. */
  .lang-menu ul { animation: fade var(--dur-base) var(--ease-out) !important; }
  .lang-menu.closing ul { animation: fade-out var(--dur-close) var(--ease-in) forwards !important; }
}

@media print {
  .site-header { position: static; }
  .lang-hint, .skip { display: none; }
}