:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #000;
  --body: #737373;
  --line: #e8e8e8;
  /* Scale every visual dimension together; keep the reading breakpoint unchanged. */
  --scale: 0.9;
  --gutter: 32px;
  --content: calc(960px * var(--scale));
  --title: calc(22px * var(--scale));
  --text: calc(16px * var(--scale));
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: calc(24px * var(--scale)); }
body { margin: 0; font-size: calc(16px * var(--scale)); color: var(--ink); font-family:var(--case-font); -webkit-font-smoothing: antialiased; }
::selection { color: var(--ink); background: #d6e7ff; }
a { color: inherit; text-decoration: none; text-underline-offset: calc(5px * var(--scale)); -webkit-tap-highlight-color: #d6e7ff; }
a:focus-visible { outline: calc(2px * var(--scale)) solid var(--ink); outline-offset: calc(7px * var(--scale)); }
.skip-link { position: fixed; z-index: 2; left: calc(24px * var(--scale)); top: calc(12px * var(--scale)); padding: calc(12px * var(--scale)) calc(18px * var(--scale)); background: var(--paper); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.page-header, .reminder-case, .page-footer { width: calc((100% - 2 * var(--gutter)) * var(--scale)); max-width: var(--content); margin-inline: auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: calc(24px * var(--scale)); min-height: calc(80px * var(--scale)); }
.page-header h1 { display: flex; align-items: baseline; gap: calc(12px * var(--scale)); margin: 0; font-size: calc(14px * var(--scale)); font-weight:var(--weight-title); line-height: 1.5; }
.page-header h1 span { font-size: calc(13px * var(--scale)); font-weight:var(--weight-body); }
.text-link { display: inline-flex; gap: calc(9px * var(--scale)); align-items: center; min-height: calc(44px * var(--scale)); font-size: calc(13px * var(--scale)); line-height: 1.5; }
.text-link:hover { text-decoration: underline; }
.text-link svg { flex: none; width: calc(16px * var(--scale)); height: calc(16px * var(--scale)); }
.reminder-case { padding-block: calc(48px * var(--scale)) calc(128px * var(--scale)); }
.reminder-case:focus { outline: none; }
.feature { display: grid; align-items: center; min-width: 0; }
.feature-copy { min-width: 0; }
.feature-copy h2 { margin: 0 0 calc(18px * var(--scale)); font-size: var(--title); font-weight:var(--weight-title); line-height: 1.4; text-wrap: balance; }
.feature-copy p { margin: 0; font-size: var(--text); font-weight:var(--weight-body); line-height: 1.75; color: var(--body); text-wrap: pretty; }
.feature-media { display: block; min-width: 0; cursor: zoom-in; }
.feature-media img { display: block; width: 100%; height: auto; }
.feature-time { grid-template-columns: minmax(0, 1014fr) minmax(calc(32px * var(--scale)), 82fr) minmax(0, 584fr); }
.feature-time .feature-media { grid-column: 1; grid-row: 1; }
.feature-time .feature-copy { grid-column: 3; grid-row: 1; }
.feature-permission { grid-template-columns: minmax(0, 622fr) minmax(calc(32px * var(--scale)), 95fr) minmax(0, 1019fr); margin-top: calc(40px * var(--scale)); }
.feature-permission .feature-copy { grid-column: 1; grid-row: 1; padding-inline-start: 1.2%; }
.feature-permission .feature-media { grid-column: 3; grid-row: 1; }
.feature-widgets { gap: calc(64px * var(--scale)); margin-top: calc(128px * var(--scale)); }
.feature-widgets .feature-media { grid-row: 1; }
.feature-widgets .feature-copy { grid-row: 2; padding-inline: 1.2%; }
.feature-widgets .feature-copy p { max-width: 72ch; }
.page-footer { display: flex; justify-content: space-between; align-items: center; gap: calc(24px * var(--scale)); padding-block: calc(24px * var(--scale)) calc(40px * var(--scale)); border-top: calc(1px * var(--scale)) solid var(--line); color: var(--body); font-size: calc(13px * var(--scale)); }

@media (max-width: 760px) {
  :root { --gutter: 24px; --title: calc(20px * var(--scale)); --text: calc(15px * var(--scale)); }
  .page-header { min-height: calc(72px * var(--scale)); gap: calc(12px * var(--scale)); }
  .page-header h1 { gap: calc(8px * var(--scale)); }
  .reminder-case { max-width: calc(600px * var(--scale)); padding-block: calc(36px * var(--scale)) calc(80px * var(--scale)); }
  .feature { display: flex; flex-direction: column; align-items: stretch; gap: calc(28px * var(--scale)); }
  .feature-copy, .feature-permission .feature-copy, .feature-widgets .feature-copy { padding: 0; }
  .feature-copy h2 { margin-bottom: calc(12px * var(--scale)); line-height: 1.45; text-wrap: pretty; }
  .feature-copy p { line-height: 1.8; }
  .feature-permission, .feature-widgets { margin-top: calc(80px * var(--scale)); }
  .feature-permission .feature-media { width: min(100%, calc(460px * var(--scale))); align-self: center; }
  .feature-widgets { gap: calc(32px * var(--scale)); }
  .page-footer { padding-block: calc(20px * var(--scale)) calc(28px * var(--scale)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}