/* ==========================================================================
   Telos Note — homepage only (loaded after site.css on index.html).
   Ink and paper, matching the 1.2 App Store story. Every rule is scoped to
   body.home so the support and legal pages are unaffected.
   ========================================================================== */

@font-face {
  font-family: "Inter Tight";
  src: url("/marketing/v12/fonts/InterTight-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("/marketing/v12/fonts/InterTight-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("/marketing/v12/fonts/InterTight-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.home {
  --t-paper: #ffffff;
  --t-paper-deep: #ffffff;
  --t-tan: #ffffff;
  --t-night: #151416;
  --t-ink: #1a1714;
  --t-body: #3b352e;
  --t-on-night: #f7f3ec;
  --t-on-night-soft: #c9c1b4;
  --t-line: rgba(26, 23, 20, 0.12);
  --t-line-night: rgba(247, 243, 236, 0.14);
  --t-head: "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --t-muted-head: #8d8478;
  --t-max: 1240px;
  --t-pad: clamp(22px, 5vw, 64px);
  --t-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  background: var(--t-paper);
  color: var(--t-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.home ::selection {
  background: #1a1714;
  color: #ffffff;
}

/* Header: dark, to sit on the dark hero. */
body.home .site-header {
  background: rgba(11, 11, 10, 0.82);
  color: var(--t-on-night);
}

body.home .site-header.scrolled {
  border-color: rgba(247, 243, 236, 0.1);
  background: rgba(11, 11, 10, 0.92);
  box-shadow: none;
}

body.home .brand { color: var(--t-on-night); }
body.home .brand img { box-shadow: 0 0 0 1px rgba(247, 243, 236, 0.16); }
body.home .nav-links a { color: var(--t-on-night-soft); }
body.home .nav-links a:hover,
body.home .nav-links a:focus-visible { color: #fff; }
body.home .nav-cta { background: var(--t-on-night); color: var(--t-ink); }
body.home .nav-cta:hover,
body.home .nav-cta:focus-visible { background: #fff; }
body.home .menu-toggle { background: rgba(247, 243, 236, 0.1); color: var(--t-on-night); }
body.home a:focus-visible,
body.home button:focus-visible { outline-color: currentColor; }

@media (max-width: 1040px) {
  body.home .nav-links { background: #0b0b0a; }
  body.home .nav-links a { color: var(--t-on-night); border-bottom-color: rgba(247, 243, 236, 0.12); }
  body.home .nav-links .mobile-store-link { background: var(--t-on-night); color: var(--t-ink); }
}

.home .t-shell {
  width: min(100% - 2 * var(--t-pad), var(--t-max));
  margin-inline: auto;
}

/* Type -------------------------------------------------------------------- */

.home .t-display,
.home .t-title {
  margin: 0;
  font-family: var(--t-head);
  font-weight: 600;
  color: inherit;
  text-wrap: balance;
}

.home .t-display {
  font-size: clamp(44px, 4.5vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.home .t-title {
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.038em;
}

/* Second line of a heading: same face, quieter colour. Never italic. */
.home .t-display em,
.home .t-title em {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--t-muted-head);
}

.home .t-dark .t-title em {
  color: #8f877c;
}

.home .t-label {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #776e62;
}

.home .t-dark .t-label {
  color: #a39a8c;
}

.home .t-lede {
  margin: 26px 0 0;
  max-width: 34em;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--t-body);
}

.home .t-dark .t-lede {
  color: var(--t-on-night-soft);
}

/* App Store button ------------------------------------------------------- */

.home .t-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 40px;
}

.home .t-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 20px;
  border-radius: 14px;
  background: var(--t-ink);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  transition: transform 220ms var(--t-ease), box-shadow 220ms var(--t-ease);
}

.home .t-store svg {
  width: 22px;
  height: 27px;
  fill: currentColor;
}

.home .t-store small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.75;
}

.home .t-store-light {
  background: var(--t-on-night);
  color: var(--t-ink);
}

.home .t-text-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--t-ink);
  text-decoration: underline;
  text-decoration-color: rgba(26, 23, 20, 0.3);
  text-underline-offset: 6px;
}

.home .t-text-link:hover,
.home .t-text-link:focus-visible {
  text-decoration-color: currentColor;
}

/* Hero: dark stage, the hero film beside the headline ------------------------ */

.home .t-hero {
  padding: calc(72px + clamp(40px, 5vw, 76px)) 0 clamp(48px, 5vw, 72px);
  background: #0b0b0a;
  color: var(--t-on-night);
  overflow: hidden;
}

.home .t-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas: "head media" "cta media";
  column-gap: clamp(36px, 4.5vw, 72px);
  row-gap: 32px;
  align-items: center;
}

.home .t-hero-head { grid-area: head; align-self: end; }
.home .t-hero-cta { grid-area: cta; align-self: start; }
.home .t-hero-media { grid-area: media; }

.home .t-hero .t-label {
  margin-bottom: 26px;
  color: #a39a8d;
  line-height: 1.6;
}

/* All three lines in the same white, "Save time." included. */
.home .t-hero .t-display {
  font-weight: 700;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.02;
  color: var(--t-on-night);
}

.home .t-hero .t-actions {
  justify-content: flex-start;
  margin-top: 0;
  gap: 16px 26px;
}

.home .t-hero-watch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--t-on-night);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.home .t-hero-watch-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #6b645b;
  border-radius: 50%;
  transition: border-color 200ms var(--t-ease), transform 200ms var(--t-ease);
}

.home .t-hero-watch-icon svg { width: 12px; height: 14px; margin-left: 2px; }
.home .t-hero-watch:hover .t-hero-watch-icon,
.home .t-hero-watch:focus-visible .t-hero-watch-icon { border-color: var(--t-on-night); transform: scale(1.05); }
.home .t-hero-watch:focus-visible { outline: 2px solid var(--t-on-night); outline-offset: 4px; border-radius: 999px; }

.home .t-hero-tag {
  margin: 20px 0 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--t-on-night-soft);
}

/* Hero film: 16:10, the website master cut (Derek voice, muted until asked). */
.home .t-hero-media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(247, 243, 236, 0.08), 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

.home .t-hero-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home .t-hero-sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(247, 243, 236, 0.22);
  border-radius: 50%;
  background: rgba(11, 11, 10, 0.62);
  color: var(--t-on-night);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 200ms var(--t-ease), transform 200ms var(--t-ease);
}

.home .t-hero-sound svg { width: 20px; height: 20px; }
.home .t-hero-sound .i-on { display: none; }
.home .t-hero-sound[aria-pressed="true"] .i-on { display: block; }
.home .t-hero-sound[aria-pressed="true"] .i-off { display: none; }
.home .t-hero-sound:hover { background: rgba(11, 11, 10, 0.85); transform: scale(1.05); }
.home .t-hero-sound:focus-visible { outline: 2px solid var(--t-on-night); outline-offset: 3px; }

/* "Watch the Mac film" and its dialog (like the Habitios site) */
.home .t-film-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 20px 10px 10px;
  border: 1px solid var(--t-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--t-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 200ms var(--t-ease), box-shadow 200ms var(--t-ease);
}

.home .t-film-link:hover,
.home .t-film-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(30, 22, 14, 0.35);
}

.home .t-film-play {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--t-ink);
}

.home .t-film-play::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 9px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

.home .t-film-dialog {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.home .t-film-dialog::backdrop {
  background: rgba(10, 10, 12, 0.86);
  backdrop-filter: blur(6px);
}

.home .t-film-video {
  display: block;
  width: min(92vw, calc(84vh * 16 / 9));
  border-radius: 14px;
  background: #121214;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.home .t-film-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1714;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* Principles (copy unchanged) ---------------------------------------------- */

.home .t-principles {
  position: relative;
  z-index: 1;
  padding: 0 0 clamp(56px, 6vw, 84px);
  background: #0b0b0a;
  border-bottom: 1px solid var(--t-line-night);
}

.home .t-principles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--t-line-night);
  padding-top: 26px;
}

.home .t-principles-grid > div {
  padding: 0 28px;
  border-left: 1px solid var(--t-line-night);
}

.home .t-principles-grid > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.home .t-principles strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--t-on-night);
}

.home .t-principles span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #a39a8d;
}

/* Bands -------------------------------------------------------------------- */

.home .t-band {
  padding: clamp(80px, 8vw, 124px) 0;
  overflow: hidden;
}

.home .t-paper { background: var(--t-paper); color: var(--t-ink); }
.home .t-paper-deep { background: var(--t-paper-deep); color: var(--t-ink); }
.home .t-tan { background: var(--t-tan); color: var(--t-ink); }
.home .t-dark { background: var(--t-night); color: var(--t-on-night); }

.home .t-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.home .t-split-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.home .t-split-flip .t-copy { order: 2; }
.home .t-split-flip .t-art { order: 1; }

.home .t-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.home .t-head .t-lede {
  margin-inline: auto;
}

/* Device art ---------------------------------------------------------------- */

.home .t-art {
  position: relative;
  margin: 0;
}

.home .t-art img {
  display: block;
  height: auto;
}

.home .t-paper .t-art img,
.home .t-paper-deep .t-art img,
.home .t-tan .t-art img {
  filter: drop-shadow(0 30px 38px rgba(30, 22, 14, 0.2)) drop-shadow(0 6px 12px rgba(30, 22, 14, 0.08));
}

.home .t-dark .t-art img {
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.5));
}

.home .t-art-single img {
  width: min(100%, 470px);
  margin-inline: auto;
}

.home .t-art-writeup,
.home .t-art-email,
.home .t-art-tele {
  aspect-ratio: 1 / 1.02;
  max-width: 720px;
  margin-inline: auto;
  width: 100%;
}

.home .t-art-writeup .t-art-back { position: absolute; right: 0; top: 0; width: 46%; }
.home .t-art-writeup .t-art-front { position: absolute; left: 0; top: 14%; width: 72%; }

.home .t-art-email { aspect-ratio: 1 / 1.16; max-width: 500px; }
.home .t-art-email .t-art-back { position: absolute; left: 50%; top: 0; width: 56%; transform: translateX(-50%); }
.home .t-art-email .t-art-front { position: absolute; left: 6%; top: 44%; width: 88%; border-radius: 26px; }

.home .t-art-tele {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  aspect-ratio: auto;
}

.home .t-art-tele .t-art-back,
.home .t-art-tele .t-art-front {
  position: static;
  width: 100%;
}

/* Notepad showcase ----------------------------------------------------------- */

.home .t-show-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(44px, 5vw, 72px);
}

.home .t-show-stage figure {
  margin: 0;
}

.home .t-show-stage img {
  display: block;
  height: auto;
}

.home .t-show-devices {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 470;
}

.home .t-show-phone {
  position: absolute;
  left: 4%;
  top: 0;
  width: 66%;
  filter: drop-shadow(0 26px 32px rgba(30, 22, 14, 0.22));
}

.home .t-show-watch {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  filter: drop-shadow(0 22px 26px rgba(20, 14, 8, 0.3));
}

.home .t-show-roles {
  margin: 26px 0 0;
}

.home .t-show-roles div {
  padding: 12px 0;
  border-top: 1px solid var(--t-line);
}

.home .t-show-roles dt {
  font-size: 14px;
  font-weight: 650;
  color: var(--t-ink);
}

.home .t-show-roles dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--t-body);
}

.home .t-show-notepad {
  width: 100%;
  max-width: 420px;
  justify-self: center;
}

.home .t-show-notepad .t-notepad-media {
  position: relative;
  display: block;
  width: 100%;
  filter: drop-shadow(0 40px 54px rgba(20, 14, 8, 0.34)) drop-shadow(0 8px 16px rgba(20, 14, 8, 0.1));
}

.home .t-show-macs {
  display: grid;
  gap: clamp(22px, 2.6vw, 36px);
}

.home .t-show-macs img {
  width: 100%;
  border-radius: 1.4%;
  filter: drop-shadow(0 20px 30px rgba(30, 22, 14, 0.18)) drop-shadow(0 4px 10px rgba(30, 22, 14, 0.06));
}

.home .t-show-macs figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--t-body);
}

.home .t-show-macs figcaption strong {
  margin-right: 4px;
  font-weight: 650;
  color: var(--t-ink);
}

.home .t-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.home .t-points li {
  padding: 22px 24px 0;
  border-top: 2px solid var(--t-ink);
}

.home .t-points li:first-child {
  padding-left: 0;
}

.home .t-points strong {
  display: block;
  font-family: var(--t-head);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.home .t-points span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--t-body);
}

.home .t-watches figure {
  margin: 0;
}

.home .t-watches figcaption {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a39a8c;
}

.home .t-watches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 3vw, 48px);
  max-width: 1040px;
  margin: clamp(56px, 7vw, 96px) auto 0;
}

.home .t-watches img {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.45));
}

/* Hover lift (fine pointers only) ---------------------------------------- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home .t-art img,
  .home .t-show-stage img,
  .home .t-show-notepad .t-notepad-media,
  .home .t-watches img {
    transition: transform 520ms var(--t-ease), filter 520ms var(--t-ease);
  }

  .home .t-art img:hover,
  .home .t-show-devices img:hover,
  .home .t-show-macs img:hover,
  .home .t-show-notepad .t-notepad-media:hover,
  .home .t-watches img:hover {
    transform: translateY(-8px);
  }

  .home .t-art-email .t-art-back:hover {
    transform: translate(-50%, -8px);
  }

  .home .t-store:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.35);
  }
}

/* Plans --------------------------------------------------------------------- */

.home .t-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0 8px;
  margin-top: clamp(48px, 6vw, 72px);
}

.home .t-plans article {
  padding: 32px 30px 12px;
  border-top: 1px solid var(--t-line);
}

.home .t-plans .t-plan-pro {
  position: relative;
  padding: 32px 30px 24px;
  border: 1px solid var(--t-ink);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 30px 60px -36px rgba(30, 22, 14, 0.35);
}

.home .t-plans .t-plan-tag {
  position: absolute;
  top: -13px;
  left: 32px;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--t-ink);
  color: var(--t-paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home .t-plans h3 {
  margin: 0;
  font-family: var(--t-head);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.home .t-plans p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--t-body);
}

.home .t-plans ul {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.home .t-plans li {
  padding: 12px 0;
  border-top: 1px solid var(--t-line);
  font-size: 15px;
  font-weight: 500;
}

.home .t-note {
  margin: 36px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--t-body);
}

/* FAQ ----------------------------------------------------------------------- */

.home .t-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

.home .t-faq-list details {
  border-top: 1px solid var(--t-line);
}

.home .t-faq-list details:last-child {
  border-bottom: 1px solid var(--t-line);
}

.home .t-faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--t-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--t-ink);
}

.home .t-faq-list summary::-webkit-details-marker {
  display: none;
}

.home .t-faq-list summary::after {
  content: "+";
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300;
  transition: transform 260ms var(--t-ease);
}

.home .t-faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.home .t-faq-list p {
  margin: 0 0 26px;
  max-width: 40em;
  font-size: 16px;
  line-height: 1.62;
  color: var(--t-body);
}

/* Close --------------------------------------------------------------------- */

.home .t-close {
  padding: clamp(100px, 11vw, 150px) 0;
}

.home .t-close-title {
  font-size: clamp(48px, 6vw, 84px);
}

.home .t-close-devices {
  margin: 26px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--t-on-night-soft);
}

/* Privacy -------------------------------------------------------------------- */

.home .t-privacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

.home .t-privacy .t-lede a {
  color: var(--t-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(26, 23, 20, 0.3);
}

.home .t-proof {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--t-line);
}

.home .t-proof li {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--t-line);
}

.home .t-proof strong {
  font-family: var(--t-head);
  font-size: clamp(20px, 1.9vw, 25px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--t-ink);
}

.home .t-proof span {
  font-size: 15px;
  line-height: 1.5;
  color: var(--t-body);
}

/* Compatibility -------------------------------------------------------------- */

.home .t-works {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 10px 28px;
  margin-top: clamp(36px, 4vw, 56px);
}

.home .t-works-label {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #776e62;
}

.home .t-works ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home .t-works li {
  font-family: var(--t-head);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--t-ink);
}

.home .t-works-note {
  grid-column: 2;
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--t-body);
}

/* Watch: new ----------------------------------------------------------------- */

.home .t-new {
  display: inline-block;
  margin: 0 0 22px;
  padding: 5px 12px;
  border: 1px solid var(--t-line-night);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: var(--t-on-night);
}

/* Keep a useful still for visitors who prefer reduced motion. */
.home .t-notepad-media video,
.home .t-notepad-media .t-notepad-poster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3% / 1.875%;
}

.home .t-notepad-media .t-notepad-poster {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .home .t-notepad-media video { display: none; }
  .home .t-notepad-media .t-notepad-poster { display: block; }
}

/* Responsive ---------------------------------------------------------------- */

@media (max-width: 1040px) {
  .home .t-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "cta";
    row-gap: 28px;
  }

  .home .t-hero-head,
  .home .t-hero-cta {
    max-width: 640px;
  }

  .home .t-show-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .home .t-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
  }

  .home .t-points li:nth-child(3) {
    padding-left: 0;
  }

  .home .t-principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .home .t-principles-grid > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .home .t-privacy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .home .t-split,
  .home .t-split-flip,
  .home .t-faq {
    grid-template-columns: 1fr;
  }

  .home .t-split-flip .t-copy,
  .home .t-split-flip .t-art {
    order: 0;
  }

  .home .t-plans {
    grid-template-columns: 1fr;
  }

  .home .t-plans article {
    padding: 32px 0 8px;
    border-left: 0;
    border-top: 1px solid var(--t-line);
  }

  .home .t-plans .t-plan-pro {
    margin: 18px 0;
    padding: 34px 24px 24px;
    border-radius: 22px;
  }

  .home .t-plans article:first-child {
    border-top: 0;
  }
}

@media (max-width: 600px) {
  .home .t-display em,
  .home .t-title em {
    display: inline;
  }

  .home .t-hero-media {
    border-radius: 12px;
  }

  .home .t-hero .t-label { margin-bottom: 16px; font-size: 11px; }
  .home .t-hero .t-display { font-size: clamp(36px, 10vw, 44px); }
  .home .t-hero .t-actions { flex-direction: column; align-items: stretch; gap: 18px; }
  .home .t-hero .t-store { justify-content: center; }
  .home .t-hero-watch { justify-content: center; }
  .home .t-hero-tag { text-align: center; font-size: 16px; }
  .home .t-hero-sound { right: 10px; bottom: 10px; width: 36px; height: 36px; }

  .home .t-principles-grid {
    grid-template-columns: 1fr;
  }

  .home .t-principles-grid > div {
    padding-left: 0;
    border-left: 0;
  }

  .home .t-art-tele {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home .t-art-tele .t-art-back {
    width: min(100%, 280px);
    margin-inline: auto;
  }

  .home .t-show-stage {
    grid-template-columns: 1fr;
  }

  .home .t-show-notepad {
    order: -1;
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .home .t-show-mobile {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .home .t-show-macs {
    grid-template-columns: 1fr;
  }

  .home .t-points {
    grid-template-columns: 1fr;
  }

  .home .t-points li {
    padding-left: 0;
  }

  .home .t-watches figcaption {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .home .t-works {
    grid-template-columns: 1fr;
  }

  .home .t-works-note {
    grid-column: 1;
  }

  .home .t-proof li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Two-minute product tour -------------------------------------------------- */

.home .t-tour{padding:86px 0 54px;background:#151416;color:#fff;scroll-margin-top:90px}
.home .t-tour-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px}
.home .t-tour .t-label{color:#b3b3b6;margin:0 0 18px}
.home .t-tour .t-title{font-size:clamp(34px,4vw,56px);line-height:1.04;letter-spacing:-.035em}
.home .t-tour-intro{margin:0 0 4px;color:#b9b9bd;font-size:17px;line-height:1.65;max-width:25em}
.home .t-tour-player{aspect-ratio:16/9;background:#080809;overflow:hidden;border-radius:16px}
.home .t-tour-launch{display:block;position:relative;width:100%;height:100%;border:0;padding:0;background:#080809;color:#fff;cursor:pointer;text-align:left;font:inherit}
.home .t-tour-launch img{display:block;width:100%;height:100%;object-fit:contain}
.home .t-tour-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;display:grid;place-items:center;border:1px solid #ffffff5c;border-radius:50%;background:#ffffffed;color:#111;box-shadow:0 4px 35px #0005;transition:transform .18s ease,background .18s ease}
.home .t-tour-play svg{width:30px;height:30px;margin-left:2px}
.home .t-tour-launch:hover .t-tour-play{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.home .t-tour-launch:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.home .t-tour-watch{position:absolute;bottom:24px;left:26px;padding:9px 14px;border-radius:8px;background:#080809dc;font-size:17px;font-weight:600}
.home .t-tour-watch span{margin-left:15px;color:#bbb;font-size:14px;font-weight:500}
.home .t-tour-video{display:block;width:100%;height:100%;object-fit:contain;background:#080809}
.home .t-tour-error{display:grid;place-items:center;box-sizing:border-box;width:100%;height:100%;padding:24px;color:#fff;text-align:center}
.home .t-tour-footer{display:flex;justify-content:space-between;gap:20px;margin:19px 0 0;color:#9f9fa4;font-size:13px}
.home .t-tour-footer a{color:#ddd;text-decoration:none;padding:8px 0;margin-top:-8px}
.home .t-tour-footer a:hover{text-decoration:underline}
@media(max-width:700px){.home .t-tour{padding:52px 0 34px}.home .t-tour-head{display:block;margin-bottom:24px}.home .t-tour .t-title{font-size:36px}.home .t-tour-intro{margin:19px 0 0;font-size:15px}.home .t-tour-player{border-radius:10px}.home .t-tour-play{width:54px;height:54px}.home .t-tour-play svg{width:24px;height:24px}.home .t-tour-watch{bottom:10px;left:10px;font-size:12px;padding:5px 8px}.home .t-tour-watch span{margin-left:6px;font-size:11px}.home .t-tour-footer{font-size:11px;gap:12px;flex-wrap:wrap}.home .tour-desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){.home .t-tour-play{transition:none}}

/* Hero: "Save time." in the muted warm grey, the one quieter line ---------- */
.home .t-hero .t-display .t-hero-save { color: #f2d46b; }

/* Mac screens in the Space Black bezel -------------------------------------- */
.home .t-show-macs img.t-mac-bezel { border-radius: 0; }
.home .t-art-wide { width: 100%; max-width: 820px; margin-inline: auto; }
.home .t-art-wide img { width: 100%; }

/* Your day, sorted: four persona films ------------------------------------- */
.home .t-day-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(32px, 4vw, 52px); }
.home .t-day-muted { color: var(--t-muted-head); }
.home .t-day-intro { margin: 0 0 6px; max-width: 26em; font-size: 17px; line-height: 1.55; color: var(--t-body); }
.home .t-day-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.home .t-day-card { display: flex; flex-direction: column; }
.home .t-day-film { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #151416; box-shadow: 0 24px 40px -26px rgba(30, 22, 14, 0.5); }
.home .t-day-film video { display: block; width: 100%; height: 100%; object-fit: cover; background: #151416; }
.home .t-day-launch { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 14px; border: 0; background: none; cursor: pointer; }
.home .t-day-play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(247, 243, 236, 0.94); color: #151416; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: transform 200ms var(--t-ease); }
.home .t-day-play svg { width: 14px; height: 16px; margin-left: 3px; }
.home .t-day-launch:hover .t-day-play { transform: scale(1.08); }
.home .t-day-launch:focus-visible { outline: 3px solid var(--t-on-night); outline-offset: -6px; border-radius: 20px; }
.home .t-day-card.is-playing .t-day-launch { display: none; }
.home .t-day-role { margin: 18px 0 4px; font-size: 12px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: #776e62; }
.home .t-day-card h3 { margin: 0; font-family: var(--t-head); font-size: 22px; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; }
.home .t-day-card ul { margin: 12px 0 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.4; color: var(--t-body); }

@media (max-width: 1040px) {
  .home .t-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 600px) {
  .home .t-day-head { display: block; }
  .home .t-day-intro { margin-top: 16px; }
  .home .t-day-grid { grid-template-columns: 1fr; }
  .home .t-day-film { width: min(100%, 340px); }
}

/* Teleprompter: the Mac in its bezel leads, the iPhone beside it */
.home .t-art-tele { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); max-width: 860px; }

/* Teleprompter: the bare floating Mac panel, no device behind it. */
.home .t-art-tele .t-art-front { filter: drop-shadow(0 18px 28px rgba(40, 28, 12, 0.28)); }

/* Hero: one-line lede under the headline, device list under the tag line. */
.home .t-hero-lede { margin: 22px 0 0; max-width: 46ch; font-size: 19px; line-height: 1.45; color: var(--t-on-night-soft); }
.home .t-hero-devices { margin: 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #a39a8d; }
@media (max-width: 600px) {
  .home .t-hero-lede { margin-top: 16px; font-size: 17px; }
  .home .t-hero-devices { text-align: center; }
}

/* Works with: full-width black strip, white text. */
.home .t-works-band { padding: clamp(40px, 4.5vw, 60px) 0; background: #0b0b0a; color: #ffffff; }
.home .t-works-band .t-works { margin-top: 0; }
.home .t-works-band .t-works-label,
.home .t-works-band .t-works li,
.home .t-works-band .t-works-note { color: #ffffff; }

/* Hero fills the first screen on laptops and desktops; the principles strip sits just below the fold. */
@media (min-width: 1000px) and (min-height: 620px) {
  .home .t-hero { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
}

/* Hero scale on laptops and desktops: bigger headline, the film takes the rest of the row.
   The text column is exactly as wide as the headline; the film runs nearly to the right edge
   on laptops and the whole hero (and the nav above it) caps at 1880px on large displays. */
@media (min-width: 1041px) {
  body.home .nav-shell { width: min(100% - 2 * var(--t-pad), 1880px); }
  .home .t-hero-grid {
    width: auto;
    margin-left: max(var(--t-pad), calc((100% - 1880px) / 2));
    margin-right: max(24px, calc((100% - 1880px) / 2));
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(40px, 3.5vw, 72px);
  }
  .home .t-hero .t-display { font-size: clamp(44px, 4.8vw, 92px); }
  .home .t-hero-lede { font-size: clamp(19px, 1.45vw, 24px); }
  .home .t-hero-tag { font-size: clamp(17px, 1.2vw, 20px); }
  .home .t-hero-media {
    box-shadow: 0 0 0 1px rgba(247, 243, 236, 0.18), 0 0 90px -10px rgba(247, 243, 236, 0.07), 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  }
}