/* Foreman's pages. The page is a cool grey like a Mac's window background, and what sits on it is white, like the
   app's own tables. Black type, macOS-shaped buttons (rounded rectangles, never pills), and one accent: Efficiency
   Mode's green, used for the live readout, the timeline and focus. Red appears only inside the working model, where
   the app uses it. The Mac's own typeface throughout. No gradients. */

:root {
  --page: #f3f4f6;
  --paper: #ffffff;
  --ink: #000000;
  --text: #3b414b;
  --muted: #6b7280;
  --hair: #dde1e7;
  --hair-soft: #e9ecf0;
  --leaf: #1d8a43;
  --leaf-tint: #e3f2e8;
  --select: #dce8fb;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 10px;
  --shadow-win: 0 0 0 0.5px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06),
    0 12px 32px -10px rgba(15, 23, 42, 0.2), 0 34px 70px -28px rgba(15, 23, 42, 0.22);
  --shadow-cut: 0 0 0 0.5px rgba(15, 23, 42, 0.14), 0 8px 24px -12px rgba(15, 23, 42, 0.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; border-radius: 6px; }
b, strong { color: var(--ink); font-weight: 600; }
h1, h2, h3 { color: var(--ink); font-family: var(--display); margin: 0; font-weight: 650; }
p { margin: 0; }
kbd { font: 500 0.82em/1 var(--sans); padding: 3px 6px 4px; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 6px; background: var(--paper); color: var(--ink); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

/* ------------------------------------------------------------ buttons: the Mac's shape */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--radius); font: 600 15.5px/1 var(--sans); text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2a2e35; }
.btn--line { background: var(--paper); color: var(--ink); border-color: var(--hair); box-shadow: 0 1px 1px rgba(15, 23, 42, 0.05); }
.btn--line:hover { background: #fafbfc; border-color: #cfd4db; }
.btn--sm { height: 34px; padding: 0 13px; font-size: 14px; border-radius: 8px; }
.btn__price { font-weight: 500; opacity: 0.68; }

/* ------------------------------------------------------------ the bar, with the live readout */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(243, 244, 246, 0.86); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.nav.is-stuck { border-bottom-color: var(--hair); }
.nav__in { display: flex; align-items: center; gap: 22px; height: 58px; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 650 17px/1 var(--display); }
.wordmark img { width: 28px; height: 28px; }
.pulse { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: var(--paper); box-shadow: var(--shadow-cut); font: 500 12.5px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.pulse svg { width: 54px; height: 16px; color: var(--leaf); overflow: visible; }
.pulse b { color: var(--ink); font-weight: 600; min-width: 2.6em; text-align: right; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a { color: var(--text); font-size: 15px; text-decoration: none; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; gap: 8px; }

/* ------------------------------------------------------------ hero: the app, working */
.hero { padding: clamp(36px, 6vw, 72px) 0 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.hero__copy { padding-top: clamp(4px, 2vw, 28px); }
.hero h1 { font-size: clamp(36px, 3.9vw, 52px); line-height: 1.04; letter-spacing: -0.032em; }
.hero__lede { margin-top: 20px; font-size: 19px; line-height: 1.55; }
.hero__keys { margin-top: 16px; font-size: 16px; color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.facts { display: grid; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.facts li { display: flex; gap: 10px; align-items: baseline; }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); flex: none; transform: translateY(-2px); }

/* ------------------------------------------------------------ the working model */
.model { position: relative; background: #f6f6f7; border-radius: 12px; box-shadow: var(--shadow-win); font: 400 13px/1.25 var(--sans); color: #1d1d1f; user-select: none; -webkit-user-select: none; overflow: hidden; }
.model__bar { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 14px 0 16px; border-bottom: 1px solid #e3e3e5; }
.model__lights { display: flex; gap: 8px; }
.model__lights i { width: 12px; height: 12px; border-radius: 50%; display: block; background: #d4d4d6; }
.model__title { line-height: 1.15; }
.model__title b { display: block; font-size: 13px; color: #1d1d1f; }
.model__title span { font-size: 11px; color: #86868b; }
.model__tools { margin-left: auto; display: flex; gap: 8px; }
.tool { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #d9d9dc; border-radius: 7px; background: #fff; color: #1d1d1f; font: 500 13px/1 var(--sans); cursor: pointer; }
.tool svg { width: 15px; height: 15px; }
.tool:disabled { color: #b8b8bd; cursor: default; background: #f9f9fa; }
.tool.is-on { color: var(--leaf); border-color: #bfdcc9; }
.tool:not(:disabled):hover { background: #f3f4f6; }
.model__card { margin: 12px; background: #fff; border-radius: 10px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); overflow: hidden; }
.model__head, .row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 96px 92px; align-items: end; column-gap: 16px; padding: 0 16px; }
.model__head { padding-top: 12px; padding-bottom: 8px; border-bottom: 1px solid #ececee; color: #86868b; font-size: 12px; }
.model__head .num { text-align: right; }
.model__head .num b { display: block; font-size: 19px; font-weight: 600; color: #1d1d1f; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.model__head .sorted { color: #1d1d1f; }
.model__section { padding: 11px 16px 4px; font-weight: 600; font-size: 13px; color: #1d1d1f; }
.model__section span { color: #86868b; font-weight: 400; }
.rows { margin: 0; padding: 0 0 8px; list-style: none; }
.rows:focus-visible { outline-offset: -3px; }
.row { align-items: center; height: 40px; cursor: pointer; transition: background-color 0.12s ease, opacity 0.35s ease, height 0.35s ease; }
.row:hover { background: #f6f7f9; }
.row[aria-selected="true"] { background: var(--select); }
.row.is-gone { opacity: 0; height: 0; pointer-events: none; overflow: hidden; }
.row__name { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 16px; position: relative; }
.row__name::before { content: ""; position: absolute; left: 0; width: 6px; height: 6px; border-right: 1.5px solid #9a9aa0; border-bottom: 1.5px solid #9a9aa0; transform: rotate(-45deg); }
.row--solo .row__name::before { display: none; }
.row__name img { width: 18px; height: 18px; flex: none; }
.row__name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__count { color: #86868b; }
.row__tag { display: inline-flex; align-items: center; gap: 4px; color: #86868b; font-size: 12px; white-space: nowrap; }
.row__tag svg { width: 12px; height: 12px; color: var(--leaf); }
.row__tag[hidden], .toast button[hidden] { display: none; }
.fig { text-align: right; font-variant-numeric: tabular-nums; }
.fig b { font-weight: 400; }
.fig i { display: block; height: 2px; margin: 4px 0 0 auto; width: 64px; background: #e9ebef; border-radius: 1px; position: relative; overflow: hidden; }
.fig i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: #1f6feb; transition: width 0.6s ease; }
.power[data-level="4"], .power[data-level="3"] { font-weight: 600; }
.power[data-level="0"] { color: #a1a1a6; }
.toast { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 12px); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); padding: 9px 10px 9px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 8px 24px -6px rgba(15, 23, 42, 0.28); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13px; color: #1d1d1f; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.25s ease; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast svg { width: 16px; height: 16px; flex: none; color: #86868b; }
.toast.is-good svg { color: var(--leaf); }
.toast button { border: 0; background: #ececef; border-radius: 6px; padding: 4px 9px; font: 500 12px/1 var(--sans); color: #1d1d1f; cursor: pointer; }
.demo__under { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-top: 14px; }
.demo__hint { color: var(--ink); font-weight: 500; font-size: 16px; }
.demo__hint::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); margin-right: 9px; transform: translateY(-1px); }
.demo__reset { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font: 500 15px var(--sans); cursor: pointer; }
.demo__reset[hidden] { display: none; }
.demo__note { margin-top: 6px; color: var(--muted); font-size: 13.5px; }

/* ------------------------------------------------------------ sections */
.section { padding: clamp(84px, 11vw, 140px) 0 0; }
.section h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.028em; max-width: 18em; }
.lede { margin-top: 16px; max-width: 38em; font-size: 19px; }

/* A day on your Mac: a real sequence, so it gets times. */
.day { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.moment { display: grid; grid-template-columns: 150px minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 16px clamp(24px, 3.5vw, 48px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--hair); align-items: start; }
.moment:last-child { border-bottom: 1px solid var(--hair); }
.moment__time { font: 300 clamp(34px, 3.6vw, 50px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; padding-top: 2px; }
.moment__time small { display: block; margin-top: 8px; font: 500 13px/1.2 var(--sans); color: var(--muted); letter-spacing: 0; }
.moment h3 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; }
.moment p { margin-top: 10px; font-size: 16.5px; }
.act { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 6px 11px; border-radius: 8px; background: var(--paper); box-shadow: var(--shadow-cut); font: 600 13.5px/1 var(--sans); color: var(--ink); }
.act svg { width: 15px; height: 15px; color: var(--leaf); }
.cut { border-radius: 10px; box-shadow: var(--shadow-cut); background: var(--paper); width: 100%; }

/* Names, raw and plain. */
.names { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.decoder { margin: 0; padding: 6px 0; list-style: none; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow-cut); }
.decoder li { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 2px 22px; padding: 16px 22px; border-top: 1px solid var(--hair-soft); }
.decoder li:first-child { border-top: 0; }
.decoder__raw { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; padding-top: 1px; }
.decoder__name { color: var(--ink); font-weight: 600; font-size: 16.5px; }
.decoder__about { grid-column: 2; font-size: 15px; }

/* The pages, as a list under the whole window. */
.whole { margin-top: clamp(36px, 5vw, 56px); }
.whole .win { border-radius: 12px; box-shadow: var(--shadow-win); width: 100%; }
.pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3.5vw, 48px); margin: clamp(32px, 4vw, 48px) 0 0; }
.pages div { padding: 18px 0 20px; border-top: 1px solid var(--hair); }
.pages dt { color: var(--ink); font-weight: 600; font-size: 17px; }
.pages dd { margin: 6px 0 0; font-size: 15.5px; }

/* Efficiency Mode: the one place the green gets room. */
.leaf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(84px, 11vw, 140px); padding: clamp(28px, 5vw, 64px); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-cut); }
.leaf h2 { font-size: clamp(28px, 3vw, 40px); }
.leaf__mark { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 10px; border-radius: 8px; background: var(--leaf-tint); color: var(--leaf); font: 600 14px/1 var(--sans); }
.leaf__mark svg { width: 16px; height: 16px; }
.rules { margin: 0; padding: 0; list-style: none; }
.rules li { padding: 16px 0; border-top: 1px solid var(--hair-soft); font-size: 16px; }
.rules li:first-child { border-top: 0; padding-top: 4px; }
.rules b { display: block; font-size: 17px; margin-bottom: 4px; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.duo__panel { width: 100%; max-width: 320px; justify-self: center; border-radius: 16px; box-shadow: var(--shadow-win); }
.readout { margin-top: 24px; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted); }
.readout img { height: 28px; width: auto; border-radius: 6px; background: var(--hair-soft); }

/* ------------------------------------------------------------ price and questions */
.price { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(28px, 4vw, 48px); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-cut); }
.price__icon { width: 96px; height: 96px; }
.price h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(48px, 5vw, 64px); letter-spacing: -0.04em; }
.price h2 span { font: 400 19px/1 var(--sans); letter-spacing: 0; color: var(--muted); }
.price__terms { margin-top: 8px; font-size: 17px; }
.price__cta { display: grid; gap: 10px; }
.fine { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.fine a { color: var(--muted); }

.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:first-of-type { border-top: 1px solid var(--hair); margin-top: 28px; }
.faq summary { list-style: none; cursor: pointer; padding: 19px 36px 19px 0; position: relative; color: var(--ink); font-weight: 600; font-size: 17.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font: 300 26px/1 var(--sans); color: var(--muted); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 42em; font-size: 16.5px; }

/* ------------------------------------------------------------ footer */
.footer { margin-top: clamp(84px, 11vw, 140px); padding: 32px 0 44px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }
.footer__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer__links a, .footer__sign a { color: var(--text); text-decoration: none; }
.footer__links a:hover, .footer__sign a:hover { color: var(--ink); text-decoration: underline; }
.footer__sign { margin-left: auto; }

/* ------------------------------------------------------------ privacy and thanks */
.page { padding: clamp(44px, 7vw, 88px) 0 0; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(34px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -0.03em; }
.page h2 { margin-top: 42px; font-size: 23px; letter-spacing: -0.015em; }
.page p, .page li { font-size: 17px; }
.page .lede { font-size: 19px; }
.page h2 + p, .page p + p, .page p + ul, .page ul + p { margin-top: 12px; }
.page ul { margin: 12px 0 0; padding-left: 20px; }
.page li + li { margin-top: 8px; }
.card { margin-top: 26px; padding: 26px; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-cut); }
.card h2 { margin-top: 0; }
.card .btn { margin-top: 14px; }
.card--download { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.card--download .btn { margin-top: 0; }
.card--download .fine { flex-basis: 100%; margin-top: 0; }
.steps { margin: 14px 0 0; padding-left: 22px; }
.steps li + li { margin-top: 8px; }
.after { margin-top: 18px; font-size: 16px; color: var(--muted); }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .moment { grid-template-columns: 96px minmax(0, 1fr); }
  .moment .cut { grid-column: 1 / -1; }
  .names, .leaf, .duo { grid-template-columns: minmax(0, 1fr); }
  .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price { grid-template-columns: auto minmax(0, 1fr); }
  .price__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .nav__links, .pulse { display: none; }
  .nav__cta { margin-left: auto; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .nav__dl { display: none; }
  .hero__lede, .lede { font-size: 17.5px; }
  .model__bar { height: auto; flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .model__tools { margin-left: 0; width: 100%; }
  .model__card { margin: 8px; }
  .model__head, .row { grid-template-columns: minmax(0, 1fr) 60px 74px; column-gap: 10px; padding: 0 12px; }
  .col-mem { display: none; }
  .fig i { width: 48px; }
  .moment { grid-template-columns: minmax(0, 1fr); }
  .decoder li { grid-template-columns: minmax(0, 1fr); padding: 14px 18px; }
  .decoder__about { grid-column: 1; }
  .pages { grid-template-columns: minmax(0, 1fr); }
  .price { grid-template-columns: minmax(0, 1fr); }
  .footer__sign { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}