/* ==========================================================================
   Leapdeck — leapdeck.app
   Daylight theme, one fluid page. The 1440px design board is the >=1024px
   layout, the 390px board is the <768px layout, and type scales between them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ink */
  --ink:        #1D1D1F;
  --ink-2:      #515154;
  --ink-3:      #6E6E73;

  /* surfaces */
  --surface:    #FFFFFF;
  --surface-2:  #F5F5F7;
  --tile:       #E3E3E8;

  /* hairlines, in the same order of strength the board uses */
  --line-faint:  rgba(0, 0, 0, 0.06);
  --line-soft:   rgba(0, 0, 0, 0.08);
  --line:        rgba(0, 0, 0, 0.10);
  --rule:        rgba(0, 0, 0, 0.12);
  --line-mid:    rgba(0, 0, 0, 0.14);
  --line-strong: rgba(0, 0, 0, 0.20);
  --line-hard:   rgba(0, 0, 0, 0.26);
  --line-active: rgba(0, 0, 0, 0.28);

  /* accent and signal. Both are near-black in Daylight; the board allows
     a colour here, so everything tinted reads from these three. */
  --accent:     #1D1D1F;
  --on-accent:  #FFFFFF;
  --signal:     #1D1D1F;
  --signal-06:  rgba(29, 29, 31, 0.06);
  --signal-14:  rgba(29, 29, 31, 0.14);
  --signal-18:  rgba(29, 29, 31, 0.18);
  --signal-00:  rgba(29, 29, 31, 0);

  --shell:  1180px;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);

  /* type, interpolated between the 390px and 1440px boards */
  --t-h1:       clamp(46px, 24.5px + 5.52vw, 104px);
  --t-hero-sub: clamp(18px, 14.7px + 0.86vw, 27px);
  --t-h2:       clamp(38px, 29.1px + 2.29vw, 62px);
  --t-h2-faq:   clamp(38px, 34.3px + 0.95vw, 48px);
  --t-lead:     clamp(17px, 15.5px + 0.38vw, 21px);
  --t-eyebrow:  clamp(12.5px, 11.9px + 0.14vw, 14px);
  --t-price:    clamp(38px, 35.8px + 0.57vw, 44px);

  /* rhythm */
  --sect-pt: clamp(66px, 51.9px + 3.62vw, 104px);
  --sect-pb: clamp(70px, 55.1px + 3.81vw, 110px);
  --hero-pt: clamp(128px, 102.7px + 6.48vw, 196px);
  --hero-pb: clamp(68px, 53.1px + 3.81vw, 108px);
  --gutter:  20px;
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--ink); }
a:hover { color: #000; }
button { font: inherit; }
img, svg, video { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Skip link — the fixed pill would otherwise swallow the first tab stop. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 0 0 14px 0;
  background: var(--ink);
  color: var(--surface);
  font-size: 14px;
  text-decoration: none;
}
.skip:focus { left: 0; color: var(--surface); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visible to screen readers only. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Nav — a floating pill. Centred and 880px on the desktop board, inset to the
   screen edges below 768px, where the section links drop away.
   -------------------------------------------------------------------------- */
.nav {
  /* Pinned to both edges rather than centred on a percentage width, so the
     pill never depends on what 100% resolves to. It becomes a centred
     880px pill once there is room for one. */
  position: fixed;
  left: 16px;
  right: 16px;
  top: 16px;
  z-index: 40;
  height: 54px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--line);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 768px) {
  .nav {
    top: 26px;
    height: 58px;
    padding: 0 12px 0 22px;
    border-radius: 29px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.10);
  }
}

/* 880px pill plus its two 16px insets. */
@media (min-width: 912px) {
  .nav {
    left: 50%;
    right: auto;
    width: 880px;
    transform: translateX(-50%);
  }
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.nav__brand svg { flex: none; }
.nav__word {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.nav__links {
  display: none;
  position: relative;
  align-items: center;
  gap: 2px;
}
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 32px;
  width: 0;
  margin-top: -16px;
  border-radius: 999px;
  background: var(--signal-06);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, width;
}
.nav__links.is-ready .nav__pill {
  transition:
    transform 520ms var(--ease),
    width 520ms var(--ease),
    background-color 220ms var(--ease);
}
.nav__links.is-instant .nav__pill {
  transition: none;
}
.nav__links a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  transition: color 220ms var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="true"] {
  color: #000;
}
.nav__links:hover .nav__pill {
  background: rgba(29, 29, 31, 0.09);
}

/* The board only shows the section links where there is room for all four. */
@media (min-width: 720px) {
  .nav { justify-content: flex-start; }
  .nav__links { display: flex; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__links.is-ready .nav__pill {
    transition: none !important;
  }
}

.nav__cta {
  display: flex;
  align-items: center;
  flex: none;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__cta:hover { color: var(--on-accent); }
@media (min-width: 768px) { .nav__cta { padding: 0 20px; } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: var(--sect-pt) 0 var(--sect-pb); }
.section--tint { background: var(--surface-2); }

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 12px + 0.5vw, 18px);
  text-align: center;
}

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

h2.title {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 600;
  color: var(--ink);
}

.lead {
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 540px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  /* padding-block, not the shorthand: .hero sits on the same element as
     .shell and a shorthand here would wipe out its side gutter. */
  padding-block: var(--hero-pt) var(--hero-pb);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: var(--t-h1);
  line-height: 1.03;
  letter-spacing: -0.034em;
  font-weight: 600;
  color: var(--ink);
  max-width: 14ch;
}

.hero__sub {
  margin: clamp(18px, 16px + 0.5vw, 26px) 0 0;
  font-size: var(--t-hero-sub);
  line-height: 1.35;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   The live object: the two ways to reach Space 5

   Both paths leave Space 1 at the same moment. Control and arrow stops at
   every Space in between, so its track is drawn in four separate hops. The
   leap is one curve, drawn in one motion, and it is already home while the
   walk is still on its second hop. That gap is the whole argument, so the
   timings below are the point of the animation, not decoration.

   All geometry lives in the 358 x 168 viewBox: five 62x52 keys on a 74 pitch,
   centres at x = 31, 105, 179, 253, 327. The two path() values in the
   offset-path rules trace the same curves as the <path> d attributes, so the
   heads and the strokes stay on top of each other; edit them together.

   At rest (no animation, which is what prefers-reduced-motion leaves) both
   paths are fully drawn, both heads sit on Space 5 and Space 5 is lit, so the
   still frame is a legible diagram rather than an empty one.
   -------------------------------------------------------------------------- */
.compare {
  position: relative;
  margin-top: clamp(30px, 27px + 0.95vw, 40px);
  width: 100%;
  /* The viewBox width, so the keys land at exactly the 62px the design
     board draws them at rather than a scaled-up approximation. */
  max-width: 358px;
}

.compare__state {
  margin: 0 0 10px;
  min-height: 1.2em;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

.compare__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  /* min() keeps the soft bleed the board has without pushing past the
     viewport edge on a phone. */
  width: min(150%, 100vw);
  height: 150%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--signal-14), var(--signal-00));
  pointer-events: none;
}

.compare__svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.compare__slot {
  cursor: pointer;
  outline: none;
}
.compare__slot:focus-visible .compare__key {
  stroke: var(--ink);
  stroke-width: 1.5;
}
.compare__slot:hover .compare__key {
  stroke: var(--line-hard);
}
.compare__slot[data-space="1"] {
  cursor: default;
}
.compare__slot[data-space="1"]:hover .compare__key {
  stroke: var(--line-mid);
}

/* The five Spaces. */
.compare__key {
  fill: none;
  stroke: var(--line-mid);
  stroke-width: 1;
  transition: stroke 180ms var(--ease);
}

.compare__num {
  fill: var(--ink-3);
  font-size: 21px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Space target fills in the moment the leap lands, well before the walk arrives. */
.compare__key--target {
  fill: var(--signal);
  stroke: var(--signal);
}
.compare__num--target {
  fill: var(--surface);
}
.compare--auto .compare__key--target,
.compare.is-playing .compare__key--target {
  animation: lk-cmp-land 6s var(--ease) infinite;
}
.compare--auto .compare__num--target,
.compare.is-playing .compare__num--target {
  animation: lk-cmp-land-num 6s var(--ease) infinite;
}
.compare.is-playing .compare__key--target,
.compare.is-playing .compare__num--target {
  animation-iteration-count: 1;
}

.compare__path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compare__arc {
  stroke: var(--signal);
  stroke-width: 2.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.compare--auto .compare__arc,
.compare.is-playing .compare__arc {
  animation: lk-cmp-arc 6s var(--ease) infinite;
}
.compare.is-playing .compare__arc {
  animation-iteration-count: 1;
}

.compare__track {
  stroke: var(--line-hard);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.compare--auto .compare__track,
.compare.is-playing .compare__track {
  animation: lk-cmp-track 6s var(--ease) infinite;
}
.compare.is-playing .compare__track {
  animation-iteration-count: 1;
}
.compare.is-playing[data-hops]:not([data-hops="4"]) .compare__track {
  animation-name: lk-cmp-track-smooth;
}

.compare__ticks {
  stroke: var(--line-mid);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.compare__head { transform-box: view-box; }

.compare__head--leap {
  fill: var(--signal);
  offset-path: path("M31 62 Q179 -22 327 62");
  offset-rotate: 0deg;
  offset-distance: 100%;
}
.compare--auto .compare__head--leap,
.compare.is-playing .compare__head--leap {
  animation: lk-cmp-leap 6s var(--ease) infinite;
}
.compare.is-playing .compare__head--leap {
  animation-iteration-count: 1;
}

.compare__head--walk {
  fill: var(--ink-3);
  offset-path: path("M31 136 H327");
  offset-rotate: 0deg;
  offset-distance: 100%;
}
.compare--auto .compare__head--walk,
.compare.is-playing .compare__head--walk {
  animation: lk-cmp-walk 6s var(--ease) infinite;
}
.compare.is-playing .compare__head--walk {
  animation-iteration-count: 1;
}
.compare.is-playing[data-hops]:not([data-hops="4"]) .compare__head--walk {
  animation-name: lk-cmp-walk-smooth;
}

.compare__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-anchor: middle;
}
.compare__label--leap { fill: var(--ink); }
.compare__label--walk { fill: var(--ink-3); }

.hero__ctas {
  margin-top: clamp(34px, 32px + 0.57vw, 40px);
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .hero__ctas {
    max-width: none;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 26px;
  }
}

.hero__note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 26px;
  font-size: clamp(16px, 15.6px + 0.1vw, 17px);
  text-decoration: none;
  cursor: pointer;
  transition: transform 260ms var(--ease),
              background-color 260ms var(--ease),
              border-color 260ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--fill {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn--fill:hover { color: var(--on-accent); }

.btn--line {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Media placeholders
   A framed block standing in for footage that has not been shot yet. Drop a
   file into /media and swap the block for the <video> markup in the comment
   above each one; the frame styling carries over unchanged.
   -------------------------------------------------------------------------- */
.media {
  width: 100%;
  border: 2px dashed var(--line-strong);
  border-radius: clamp(28px, 25px + 0.76vw, 34px);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 26px;
  overflow: hidden;
  transition: border-color 320ms var(--ease);
}
.media:hover { border-color: rgba(0, 0, 0, 0.42); }

.media--onTint { background: var(--surface); }

.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* A frame holding real footage drops the dashed outline and its padding. */
.media:has(video) { border-style: solid; border-color: var(--line-soft); padding: 0; }

.media__play {
  width: clamp(60px, 56px + 1.1vw, 76px);
  height: clamp(60px, 56px + 1.1vw, 76px);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 320ms var(--ease);
}
.media:hover .media__play { transform: scale(1.07); }

.media__label {
  font-size: clamp(16px, 15px + 0.29vw, 20px);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.media--hero { height: clamp(220px, 8px + 54vw, 620px); }
.media--mac  { height: clamp(300px, 111px + 22.9vw, 540px); }
.media--phone {
  aspect-ratio: 4 / 7;
  height: auto;
  border-radius: clamp(32px, 28px + 0.95vw, 42px);
}
.media--phone .media__play { border-color: var(--signal); }

@media (min-width: 1024px) {
  .media--phone { height: 700px; aspect-ratio: auto; }
}

/* --------------------------------------------------------------------------
   Mac — three tabs that swap the clip above them
   -------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 24px + 1.52vw, 50px);
}

.tabs {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Three columns only once each one can still hold the description on two
   lines. Below this the text column drops under ~215px and the copy spills to
   a third line, so the cards stay stacked instead. */
@media (min-width: 1120px) {
  .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

.tab {
  border: 1px solid var(--line-soft);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 22px;
  display: flex;
  /* stretch, so the icon panel runs the full height of the card */
  align-items: stretch;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  transition: transform 320ms var(--ease),
              border-color 320ms var(--ease),
              box-shadow 320ms var(--ease);
}
.tab:hover { transform: translateY(-5px); }
.tab[aria-pressed="true"] {
  border-color: var(--line-active);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

@media (min-width: 900px) { .tab { padding: 26px; gap: 18px; } }

.tab__icon {
  width: 52px;
  flex: none;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 320ms var(--ease), color 320ms var(--ease);
}
.tab[aria-pressed="true"] .tab__icon {
  background: var(--ink);
  color: var(--surface);
}

.tab__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.tab__title {
  font-size: clamp(17px, 16.3px + 0.19vw, 19px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.tab__body {
  font-size: clamp(14px, 13.6px + 0.1vw, 15px);
  line-height: 1.55;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   iPhone — cards flanking a portrait clip on the board, stacked below 1024px
   -------------------------------------------------------------------------- */
.phone-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.phone-grid .media--phone {
  grid-column: 1 / -1;
  order: -1;
  max-width: 400px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .phone-grid {
    grid-template-columns: 300px 400px 300px;
    gap: 40px;
    align-items: center;
    justify-content: center;
  }
  /* Placed by child position, not by type: the media frame sits between the
     second and third card in the markup and would otherwise shift the count. */
  .phone-grid > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .phone-grid > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .phone-grid > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; order: 0; }
  .phone-grid > :nth-child(4) { grid-column: 3; grid-row: 1; }
  .phone-grid > :nth-child(5) { grid-column: 3; grid-row: 2; }
}

.card {
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 320ms var(--ease),
              border-color 320ms var(--ease),
              box-shadow 320ms var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

@media (min-width: 1024px) {
  .card { border-radius: 26px; padding: 24px; gap: 16px; }
}

.card h3 {
  margin: 0;
  font-size: clamp(15.5px, 14.6px + 0.24vw, 18px);
  font-weight: 600;
  color: var(--ink);
}
.card p {
  margin: 0;
  font-size: clamp(13px, 12.3px + 0.19vw, 15px);
  line-height: 1.5;
  color: var(--ink-2);
}
.card__text { display: flex; flex-direction: column; gap: 8px; }

/* The little illustration at the top of each iPhone card. */
.chip {
  height: 76px;
  border: 1px solid var(--line-faint);
  border-radius: 16px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
@media (min-width: 1024px) { .chip { height: 92px; border-radius: 18px; padding: 12px; } }

.chip--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.chip--grid span { border-radius: 11px; background: var(--tile); }
.chip--grid span.on { background: var(--signal); }

.chip__key {
  width: 52px;
  height: 52px;
  border: 2px solid var(--line-hard);
  border-radius: 50%;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip__row {
  width: 100%;
  border: 1px solid var(--line-faint);
  border-radius: 14px;
  background: var(--surface);
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chip__badge {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chip__row span:last-child { font-size: 13px; color: var(--ink); }

.chip--button { gap: 10px; }
.chip__bar {
  width: 5px;
  height: 34px;
  border-radius: 3px;
  background: var(--line-hard);
}
.chip--button span:last-child { font-size: 13px; color: var(--ink-3); }

/* Half a card title that only the wide board shows. */
.wide-only { display: none; }
@media (min-width: 1024px) { .wide-only { display: inline; } }

/* --------------------------------------------------------------------------
   Price
   -------------------------------------------------------------------------- */
.lifetime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: lk-lifetime-in 700ms var(--ease) both;
}
.lifetime__mark {
  width: 16px;
  height: 16px;
  flex: none;
}
.lifetime__ring,
.lifetime__check {
  stroke: var(--on-accent);
}
.lifetime__ring {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: lk-lifetime-ring 900ms var(--ease) 180ms both;
}
.lifetime__check {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: lk-lifetime-check 520ms var(--ease) 620ms both;
}

.plans {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.plan {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.plan--pro {
  border-color: var(--line-hard);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.09);
}
.plan__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: lk-lifetime-pulse 2.8s var(--ease) 1.1s infinite;
}

/* At the board width the two plans become one panel with a dividing rule. */
@media (min-width: 860px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 34px;
    background: var(--surface);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }
  .plan {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 36px 38px 38px;
    gap: 22px;
  }
  .plan--free { border-right: 1px solid var(--line); }
  .plan--pro { background: var(--surface-2); }
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.plan__amount {
  font-size: var(--t-price);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.plan__was {
  font-size: 17px;
  color: var(--ink-3);
  text-decoration: line-through;
}
.plan__unit { font-size: 15px; color: var(--ink-3); }

.plan > p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan li {
  font-size: clamp(15px, 14.6px + 0.1vw, 16px);
  line-height: 1.5;
  color: var(--ink-2);
}
.plan--pro li { color: var(--ink); }

@media (min-width: 860px) { .plan ul { gap: 12px; } }

.plan .btn {
  margin-top: auto;
  padding: 0;
  width: 100%;
  font-size: 16px;
}

.fine {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-3);
  text-align: center;
  max-width: 760px;
}

/* --------------------------------------------------------------------------
   Download — Mac direct + App Store, one panel.
   -------------------------------------------------------------------------- */
.get {
  width: 100%;
  max-width: 860px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.get__card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.get__card--mac {
  border-color: var(--line-hard);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.09);
}

@media (min-width: 720px) {
  .get {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 34px;
    background: var(--surface);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }
  .get__card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 36px 38px 38px;
    gap: 20px;
  }
  .get__card--mac {
    border-right: 1px solid var(--line);
    box-shadow: none;
  }
  .get__card--ios { background: var(--surface-2); }
}

.get__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.get__platform {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.get__blurb {
  margin: 0;
  font-size: clamp(20px, 18.5px + 0.4vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}

.get__card .btn {
  margin-top: 4px;
  width: 100%;
  padding: 0;
  font-size: 16px;
}

.get__meta {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

.get__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { width: 100%; max-width: 780px; margin-inline: auto; }

.faq h2 { text-align: center; font-size: var(--t-h2-faq); line-height: 1.08; letter-spacing: -0.026em; }

.faq__list { margin-top: clamp(24px, 20px + 1vw, 32px); }

.faq__item { border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }

.faq__q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 20px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  font-size: clamp(16.5px, 15.6px + 0.24vw, 19px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 768px) { .faq__q { padding: 22px 4px; gap: 24px; } }

/* A plus that loses its upright stroke when the answer is open. */
.faq__sign {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  border-radius: 1px;
  background: var(--ink-3);
}
.faq__sign::before { left: 0; top: 6.5px; width: 15px; height: 2px; }
.faq__sign::after {
  left: 6.5px; top: 0; width: 2px; height: 15px;
  transition: opacity 260ms var(--ease);
}
.faq__q[aria-expanded="true"] .faq__sign::after { opacity: 0; }

.faq__a { display: none; }
.faq__a.is-open { display: block; }
.faq__a p {
  margin: 0;
  padding: 0 4px 22px;
  font-size: clamp(15.5px, 14.8px + 0.19vw, 17px);
  line-height: 1.6;
  color: var(--ink-2);
}
@media (min-width: 768px) { .faq__a p { padding: 0 60px 22px 4px; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 36px;
}
@media (min-width: 768px) { .footer { padding: 40px 0 44px; } }

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .footer__inner { flex-direction: row; align-items: center; gap: 30px; }
}

.footer span { font-size: 13px; color: var(--ink-3); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
@media (min-width: 768px) { .footer__legal { margin-left: auto; gap: 24px; } }

.footer__legal a {
  font-size: 13.5px;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 220ms var(--ease);
}
.footer__legal a:hover { color: var(--ink); }
@media (min-width: 768px) { .footer__legal a { font-size: 13px; } }

/* --------------------------------------------------------------------------
   Prose — the privacy, terms, refunds and support pages
   -------------------------------------------------------------------------- */
.prose-page { padding-block: clamp(120px, 96px + 6.15vw, 184px) clamp(60px, 48px + 3vw, 96px); }

.prose { max-width: 720px; margin-inline: auto; }

.prose h1 {
  margin: 0;
  font-size: clamp(34px, 28.5px + 1.43vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 600;
}

.prose__meta {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}

.prose h2 {
  margin: clamp(38px, 34px + 1vw, 52px) 0 0;
  font-size: clamp(20px, 18.9px + 0.29vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.016em;
  font-weight: 600;
}

.prose p,
.prose li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.prose p { margin: 14px 0 0; }

.prose ul { margin: 14px 0 0; padding-left: 22px; }
.prose li { margin-top: 8px; }

.prose a { color: var(--ink); text-underline-offset: 3px; }

.prose__lede {
  margin-top: 22px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
/* The leap: away at 5%, landed at 18%. */
@keyframes lk-cmp-arc {
  0%,   5%  { stroke-dashoffset: 100; opacity: 1; }
  18%, 88%  { stroke-dashoffset: 0;   opacity: 1; }
  94%       { stroke-dashoffset: 0;   opacity: 0; }
  94.01%    { stroke-dashoffset: 100; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 1; }
}
@keyframes lk-cmp-leap {
  0%,   5%  { offset-distance: 0%;   opacity: 1; }
  18%, 88%  { offset-distance: 100%; opacity: 1; }
  94%       { offset-distance: 100%; opacity: 0; }
  94.01%    { offset-distance: 0%;   opacity: 0; }
  100%      { offset-distance: 0%;   opacity: 1; }
}

/* The walk: four hops with a stop at each, home only at 52%. */
@keyframes lk-cmp-track {
  0%,   5%  { stroke-dashoffset: 100; opacity: 1; }
  13%, 18%  { stroke-dashoffset: 75;  opacity: 1; }
  26%, 31%  { stroke-dashoffset: 50;  opacity: 1; }
  39%, 44%  { stroke-dashoffset: 25;  opacity: 1; }
  52%, 88%  { stroke-dashoffset: 0;   opacity: 1; }
  94%       { stroke-dashoffset: 0;   opacity: 0; }
  94.01%    { stroke-dashoffset: 100; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 1; }
}
@keyframes lk-cmp-walk {
  0%,   5%  { offset-distance: 0%;   opacity: 1; }
  13%, 18%  { offset-distance: 25%;  opacity: 1; }
  26%, 31%  { offset-distance: 50%;  opacity: 1; }
  39%, 44%  { offset-distance: 75%;  opacity: 1; }
  52%, 88%  { offset-distance: 100%; opacity: 1; }
  94%       { offset-distance: 100%; opacity: 0; }
  94.01%    { offset-distance: 0%;   opacity: 0; }
  100%      { offset-distance: 0%;   opacity: 1; }
}

/* Shorter races (Spaces 2–4): one slow crawl, still behind the leap. */
@keyframes lk-cmp-track-smooth {
  0%,   5%  { stroke-dashoffset: 100; opacity: 1; }
  52%, 88%  { stroke-dashoffset: 0;   opacity: 1; }
  94%       { stroke-dashoffset: 0;   opacity: 0; }
  94.01%    { stroke-dashoffset: 100; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 1; }
}
@keyframes lk-cmp-walk-smooth {
  0%,   5%  { offset-distance: 0%;   opacity: 1; }
  52%, 88%  { offset-distance: 100%; opacity: 1; }
  94%       { offset-distance: 100%; opacity: 0; }
  94.01%    { offset-distance: 0%;   opacity: 0; }
  100%      { offset-distance: 0%;   opacity: 1; }
}

/* Space 5, lit from the moment the leap lands. */
@keyframes lk-cmp-land {
  0%,  17%  { fill: rgba(29, 29, 31, 0); stroke: var(--line-mid); }
  20%, 88%  { fill: var(--signal);       stroke: var(--signal); }
  94%, 100% { fill: rgba(29, 29, 31, 0); stroke: var(--line-mid); }
}
@keyframes lk-cmp-land-num {
  0%,  17%  { fill: var(--ink-3); }
  20%, 88%  { fill: var(--surface); }
  94%, 100% { fill: var(--ink-3); }
}
@keyframes lk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes lk-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lk-breathe {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 0.70; }
}
@keyframes lk-lifetime-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lk-lifetime-ring {
  to { stroke-dashoffset: 0; }
}
@keyframes lk-lifetime-check {
  to { stroke-dashoffset: 0; }
}
@keyframes lk-lifetime-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

.lk-float { animation: lk-float 7s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.lk-glow  { animation: lk-breathe 9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.lk-rise  { animation: lk-rise 760ms var(--ease) both; }
.lk-d1 { animation-delay: 90ms; }
.lk-d2 { animation-delay: 180ms; }
.lk-d3 { animation-delay: 270ms; }
.lk-d4 { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .lifetime,
  .lifetime__ring,
  .lifetime__check,
  .plan__badge {
    animation: none !important;
  }
  .lifetime__ring,
  .lifetime__check {
    stroke-dashoffset: 0;
  }
  .compare--auto .compare__arc,
  .compare--auto .compare__track,
  .compare--auto .compare__head--leap,
  .compare--auto .compare__head--walk,
  .compare--auto .compare__key--target,
  .compare--auto .compare__num--target,
  .compare.is-playing .compare__arc,
  .compare.is-playing .compare__track,
  .compare.is-playing .compare__head--leap,
  .compare.is-playing .compare__head--walk,
  .compare.is-playing .compare__key--target,
  .compare.is-playing .compare__num--target {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Utilities
   Small one-offs, kept here so no element needs a style attribute and the
   Content-Security-Policy can refuse inline styles outright.
   -------------------------------------------------------------------------- */
.lead--narrow { max-width: 520px; }
.lead--mid    { max-width: 560px; }
.lead--wide   { max-width: 680px; line-height: 1.55; }

.media--heroGap { margin-top: clamp(40px, 26px + 3.6vw, 62px); }

.section--flush { padding-top: 0; }

.btn--inline { display: inline-flex; }
.prose__cta  { margin-top: 32px; }

/* A button that is not a link yet: the iPhone app before launch 2. */
.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}