/* Notivate website. Apple-style product pages, turned up: a night-blue stage for the hero, the
   statement and the closing, white and light-gray bands for the features, the app's navy for
   actions on light ground and a bright blue on night ground, periwinkle only where the AI is
   meant. Type is the system face (SF Pro on Apple devices, the same as in the app). The product
   carries the page: every feature band is built around a live iPad preview. Motion is CSS
   (scroll-driven where the browser supports it) plus the preview script, and stays off with
   prefers-reduced-motion. */

:root {
  color-scheme: light;

  --ink: #141b2e;
  --ink2: #5b6378;
  --ink3: #676e82;
  --paper: #ffffff;
  --tint: #f3f5f9;
  --hair: rgb(20 27 46 / 10%);
  --navy: #1e2f5c;
  --navy-hover: #2a3f78;
  --night: #070c1d;
  --night-2: #0d1630;
  --night-ink: #e8ecf6;
  --night-ink2: #9aa6c4;
  --night-hair: rgb(232 236 246 / 12%);
  --blue: #2f63e6;
  --blue-hover: #4473f0;
  --glow: #3a6df0;
  --ai: #5d7fd0;
  --ai-ink: #3a5aa8;
  --link: #2f55b5;
  --night-link: #8fb0ff;
  --warn: #6b4d06;
  --warn-wash: #fdf5e2;

  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI",
    system-ui, sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI",
    system-ui, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wrap: 1120px;
  --wrap-wide: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 52px;
  scrollbar-color: rgb(20 27 46 / 28%) transparent;
  accent-color: var(--navy);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
  caret-color: var(--blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.home {
  background: var(--night);
}

html:has(body.home) {
  scrollbar-color: rgb(154 166 196 / 45%) transparent;
}

::selection {
  background: rgb(47 99 230 / 22%);
}

.on-night ::selection {
  color: #fff;
  background: rgb(58 109 240 / 55%);
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 6px;
}

.on-night :focus-visible {
  outline-color: var(--night-link);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 80%);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hair);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wrap);
  height: 52px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header nav a {
  font-size: 13px;
  color: var(--ink2);
  transition: color 150ms ease;
}

.site-header nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.site-header nav .lang {
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Over the night stage of the landing page. */
.home .site-header {
  background: rgb(7 12 29 / 90%);
  border-bottom-color: var(--night-hair);
}

.home .site-header .brand,
.home .site-header nav a:hover {
  color: #fff;
}

.home .site-header nav a {
  color: var(--night-ink2);
}

@media (max-width: 640px) {
  .site-header nav {
    gap: 22px;
  }

  .site-header nav .extra {
    display: none;
  }
}

/* ---------- Actions ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  transition:
    background-color 200ms ease,
    box-shadow 300ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.button:hover {
  background: var(--navy-hover);
  text-decoration: none;
}

.button:active {
  transform: scale(0.97);
}

.on-night .button {
  background: var(--blue);
  box-shadow: 0 10px 30px -10px rgb(58 109 240 / 70%);
}

.on-night .button:hover {
  background: var(--blue-hover);
  box-shadow: 0 14px 36px -10px rgb(58 109 240 / 85%);
}

/* the "Learn more ›" link */
.more {
  font-size: 17px;
}

.on-night .more {
  color: var(--night-link);
}

.more::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border: solid currentColor;
  border-width: 1.6px 1.6px 0 0;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}

.more:hover::after {
  transform: translate(3px, -1px) rotate(45deg);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}

/* ---------- iPad frame around a preview ---------- */

.ipad {
  margin: 0;
  padding: clamp(8px, 1.3vw, 16px);
  border-radius: clamp(20px, 3vw, 40px);
  background: #16181d;
  box-shadow:
    inset 0 0 0 1.5px #3a3d45,
    inset 0 0 0 3px #0c0d10,
    0 2px 4px rgb(15 23 48 / 8%),
    0 40px 80px -36px rgb(15 23 48 / 45%);
}

.ipad img {
  width: 100%;
  border-radius: clamp(12px, 1.8vw, 26px);
  background: var(--tint);
}

/* ---------- Night stage (hero, statement, privacy, closing) ---------- */

.on-night {
  color: var(--night-ink);
  background: var(--night);
}

.on-night h1,
.on-night h2,
.on-night h3 {
  color: #fff;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: clip;
  padding: clamp(40px, 9vh, 120px) var(--gutter) clamp(24px, 4vw, 48px);
  text-align: center;
  isolation: isolate;
}

/* The light the iPad sits in: a wide blue wash rising from below, brightest behind the device. */
.hero::before {
  content: "";
  position: absolute;
  inset: 28% 0 0;
  z-index: -1;
  background:
    radial-gradient(46% 38% at 50% 52%, rgb(58 109 240 / 55%), transparent 72%),
    radial-gradient(80% 55% at 50% 60%, rgb(30 47 92 / 85%), transparent 78%);
  /* Fades out before the section ends, so the night runs on into the statement. */
  -webkit-mask-image: linear-gradient(#000 55%, transparent 96%);
  mask-image: linear-gradient(#000 55%, transparent 96%);
}

.hero h1 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(52px, 9vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
  animation: rise 900ms var(--ease-out) both;
}

.hero .sub {
  max-width: 40ch;
  margin: 22px auto 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--night-ink2);
  animation: rise 900ms var(--ease-out) 90ms both;
}

.hero .actions {
  margin-top: 32px;
  animation: rise 900ms var(--ease-out) 180ms both;
}

.soon {
  margin-top: 18px;
  font-size: 14px;
  color: var(--night-ink2);
  animation: rise 900ms var(--ease-out) 180ms both;
}

.hero-stage {
  max-width: 1120px;
  margin: clamp(36px, 7vh, 88px) auto 0;
  /* Tilts about its top edge, so the device stays in the first view on short screens. */
  transform-origin: 50% 0;
}

.hero-ipad {
  box-shadow:
    inset 0 0 0 1.5px #3a3d45,
    inset 0 0 0 3px #0c0d10,
    0 -10px 60px -20px rgb(58 109 240 / 45%),
    0 60px 120px -40px rgb(0 0 0 / 70%);
  animation: rise-device 1200ms var(--ease-out) 220ms both;
}

/* ---------- Statement ---------- */

.statement {
  padding: clamp(120px, 16vw, 220px) var(--gutter) clamp(120px, 15vw, 200px);
  background: linear-gradient(var(--night), var(--night-2) 60%, var(--night));
}

.statement p {
  max-width: 21ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(36px, 5.6vw, 72px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #fff;
}

.statement .ai-word {
  color: #a9bdf0;
}

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

.band {
  padding: clamp(96px, 13vw, 168px) var(--gutter);
  background: var(--paper);
}

.band.tint {
  background: var(--tint);
}

.band h2 {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.band h2.center {
  text-align: center;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  max-width: var(--wrap-wide);
  margin: 0 auto;
}

.split.flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

/* Beside the iPad the headline gets its column's measure, not the full band's. */
.split h2 {
  font-size: clamp(38px, 4.2vw, 60px);
}

.split.flip .copy {
  order: 2;
}

.copy p {
  margin-top: 24px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink2);
}

.copy p strong {
  color: var(--ink);
  font-weight: 600;
}

.copy .ai-note {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-size: 15px;
}

/* Feature iPads stand in a soft pool of their own light. */
.band .ipad {
  box-shadow:
    inset 0 0 0 1.5px #3a3d45,
    inset 0 0 0 3px #0c0d10,
    0 2px 4px rgb(15 23 48 / 8%),
    0 50px 90px -40px rgb(30 47 92 / 50%),
    0 30px 120px -30px rgb(58 109 240 / 28%);
}

.narrow {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- Privacy (night) ---------- */

.band.dark {
  position: relative;
  overflow: clip;
  background: var(--night);
  color: var(--night-ink);
  isolation: isolate;
}

.band.dark::before {
  content: "";
  position: absolute;
  inset: -30% 40% 30% -20%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(58 109 240 / 32%), transparent);
}

.band.dark h2 {
  max-width: 13ch;
  color: #fff;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: clamp(56px, 7vw, 88px);
}

.facts > div {
  padding-top: 26px;
  border-top: 1px solid var(--night-hair);
}

.facts h3 {
  font-size: clamp(21px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: #fff;
}

.facts p {
  margin-top: 10px;
  color: var(--night-ink2);
}

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
  max-width: 1080px;
  margin: clamp(56px, 7vw, 80px) auto 0;
}

.plan {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  background: var(--paper);
}

/* Plus is the one to pick: the night card, lifted. */
.plan.plus {
  position: relative;
  overflow: clip;
  color: var(--night-ink);
  background: var(--night-2);
  box-shadow: 0 40px 80px -40px rgb(13 22 48 / 70%);
  isolation: isolate;
}

.plan.plus::before {
  content: "";
  position: absolute;
  inset: -60% -30% 60%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(58 109 240 / 45%), transparent);
}

.plan.plus h3,
.plan.plus .price,
.plan.plus .note strong {
  color: #fff;
}

.plan.plus .price small,
.plan.plus .note {
  color: #b8c3e0;
}

.plan.plus .checks {
  border-top-color: var(--night-hair);
}

.plan.plus .checks li::before {
  border-color: #8fb0ff;
}

.plan h3 {
  font-size: 21px;
}

.price {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(44px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.price small {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink2);
}

.note {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink2);
}

.note strong {
  color: var(--ink);
  font-weight: 600;
}

.plans-note {
  margin-top: 32px;
  text-align: center;
  font-size: 15px;
  color: var(--ink2);
}

.plans-note strong {
  color: var(--ink);
  font-weight: 600;
}

.checks {
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--hair);
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 30px;
}

.checks li + li {
  margin-top: 10px;
}

.checks li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 2px;
  width: 15px;
  height: 8px;
  border: solid var(--navy);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* ---------- Closing (night) ---------- */

.closing {
  position: relative;
  overflow: clip;
  padding: clamp(120px, 16vw, 200px) var(--gutter);
  text-align: center;
  isolation: isolate;
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0 10% 10%;
  z-index: -1;
  background: radial-gradient(38% 42% at 50% 40%, rgb(58 109 240 / 40%), transparent 72%);
}

.app-icon {
  width: clamp(104px, 12vw, 136px);
  height: auto;
  margin: 0 auto 40px;
  border-radius: 24%;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%),
    0 24px 60px -16px rgb(58 109 240 / 70%),
    0 12px 24px -12px rgb(0 0 0 / 60%);
}

.closing h2 {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.closing p {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--night-ink2);
}

.closing .more {
  display: inline-block;
  margin-top: 28px;
}

/* ---------- Content pages (help, legal) ---------- */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 88px) var(--gutter) 0;
}

.page h1 {
  margin: 0 0 24px;
  font-size: clamp(36px, 5.4vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.page h2 {
  margin: 48px 0 10px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.page h3 {
  margin: 28px 0 8px;
  font-size: 18px;
}

.page p,
.page li {
  color: var(--ink2);
}

.page p + p {
  margin-top: 14px;
}

.page ul,
.page ol {
  margin: 14px 0;
  padding-left: 22px;
}

.page .lead {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
}

.page .button {
  margin-top: 28px;
}

.draft {
  margin: 0 0 32px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--warn-wash);
  font-size: 15px;
}

.page .draft {
  color: var(--warn);
}

details {
  border-bottom: 1px solid var(--hair);
}

.page h1 + details {
  border-top: 1px solid var(--hair);
}

summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

/* plus sign that turns into a cross */
summary::before,
summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 14px;
  height: 1.6px;
  background: var(--ink2);
  transition: transform 220ms var(--ease-out);
}

summary::after {
  transform: rotate(90deg);
}

details[open] summary::before {
  transform: rotate(45deg);
}

details[open] summary::after {
  transform: rotate(135deg);
}

details > :not(summary) {
  margin: 0;
  padding: 0 0 22px;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 0;
  background: var(--tint);
  border-top: 1px solid var(--hair);
}

main.page + .site-footer {
  margin-top: 120px;
}

.site-footer .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
  font-size: 13px;
  color: var(--ink3);
}

.site-footer .brand {
  font-size: 15px;
}

.site-footer .brand img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.site-footer nav a {
  color: var(--ink2);
}

.site-footer .copy {
  margin: 0;
}

.home .site-footer {
  background: var(--night);
  border-top-color: var(--night-hair);
}

.home .site-footer .inner,
.home .site-footer nav a {
  color: var(--night-ink2);
}

.home .site-footer .brand {
  color: #fff;
}

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

@media (max-width: 860px) {
  .split,
  .split.flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .split.flip .copy {
    order: 0;
  }

  .facts,
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts {
    gap: 32px;
  }
}

/* ---------- Motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes rise-device {
  from {
    opacity: 0;
    transform: translateY(60px) scale(0.96);
  }
}

@supports (animation-timeline: scroll()) {
  /* The one staged moment: the iPad lies tilted back in its light and stands up as you scroll
     into the page. */
  .hero-stage {
    animation: stand-up linear both;
    animation-timeline: scroll(root);
    animation-range: 0 70vh;
  }

  @keyframes stand-up {
    from {
      transform: perspective(1600px) rotateX(22deg) scale(0.9);
    }
  }

  /* The statement lights up word by word as it crosses the screen. */
  /* One timeline for the whole sentence; each word takes its turn along it. */
  .statement p {
    view-timeline: --statement block;
  }

  .statement .w {
    color: rgb(255 255 255 / 18%);
    animation: light linear both;
    animation-timeline: --statement;
  }

  .statement .w:nth-child(1) {
    animation-range: cover 14% cover 21%;
  }

  .statement .w:nth-child(2) {
    animation-range: cover 15.6% cover 22.6%;
  }

  .statement .w:nth-child(3) {
    animation-range: cover 17.2% cover 24.2%;
  }

  .statement .w:nth-child(4) {
    animation-range: cover 18.8% cover 25.8%;
  }

  .statement .w:nth-child(5) {
    animation-range: cover 20.4% cover 27.4%;
  }

  .statement .w:nth-child(6) {
    animation-range: cover 22% cover 29%;
  }

  .statement .w:nth-child(7) {
    animation-range: cover 23.6% cover 30.6%;
  }

  .statement .w:nth-child(8) {
    animation-range: cover 25.2% cover 32.2%;
  }

  .statement .w:nth-child(9) {
    animation-range: cover 26.8% cover 33.8%;
  }

  .statement .w:nth-child(10) {
    animation-range: cover 28.4% cover 35.4%;
  }

  .statement .w:nth-child(11) {
    animation-range: cover 30% cover 37%;
  }

  .statement .w:nth-child(12) {
    animation-range: cover 31.6% cover 38.6%;
  }

  .statement .w:nth-child(13) {
    animation-range: cover 33.2% cover 40.2%;
  }

  .statement .w:nth-child(14) {
    animation-range: cover 34.8% cover 41.8%;
  }

  .statement .w:nth-child(15) {
    animation-range: cover 36.4% cover 43.4%;
  }

  .statement .w:nth-child(16) {
    animation-range: cover 38% cover 45%;
  }

  .statement .w:nth-child(17) {
    animation-range: cover 39.6% cover 46.6%;
  }

  .statement .w:nth-child(18) {
    animation-range: cover 41.2% cover 48.2%;
  }

  .statement .w:nth-child(19) {
    animation-range: cover 42.8% cover 49.8%;
  }

  .statement .w:nth-child(20) {
    animation-range: cover 44.4% cover 51.4%;
  }

  .statement .ai-word.w {
    color: rgb(169 189 240 / 18%);
    animation-name: light-ai;
  }

  @keyframes light {
    to {
      color: #fff;
    }
  }

  @keyframes light-ai {
    to {
      color: #a9bdf0;
    }
  }
}

.page .rise {
  animation: rise 600ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .statement .w {
    color: #fff;
  }

  .statement .ai-word.w {
    color: #a9bdf0;
  }
}