@import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");
@font-face {
  font-family: "Didot LT W01 Bold";
  src: url("Fonts/1475718/b2eb2ad6-3170-4f0b-a83a-e30e6d288041.woff2") format("woff2"), url("Fonts/1475718/d1e2418c-d5dd-4a4e-8832-064986499246.woff") format("woff");
  font-display: swap;
}
:root {
  --ink: #25201e;
  --muted: #675f5b;
  --paper: #ffffff;
  --soft-paper: #f7f4f1;
  --accent: #a33a2e;
  --line: rgba(58, 43, 37, 0.13);
  --shadow: 0 24px 70px rgba(58, 30, 20, 0.14);
  --display: "Didot LT W01 Bold", Didot, "Times New Roman", serif;
  --body: "Cardo", Georgia, serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #1b1715;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #c65b49;
  color: #fff;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
video:focus-visible,
.demo-screen:focus-visible {
  border-radius: 4px;
  outline: 3px solid #f7b8a6;
  outline-offset: 5px;
}

img,
video {
  display: block;
  max-width: 100%;
}

/* With intrinsic width/height attributes on every image, the height must scale
with the constrained width or they would render stretched. It also lets the
browser reserve the right space before an image loads, so in-page anchors
such as #tie-along do not drift while lazy images arrive. */
img {
  height: auto;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
}

h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.25rem, 5vw, 3.7rem);
  letter-spacing: 0.045em;
  line-height: 1.06;
  text-transform: uppercase;
}

h3 {
  margin-bottom: 0.55rem;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-background {
  position: fixed;
  z-index: -2;
  inset: 0;
  background: #56170f url("images/bg_top.jpg") no-repeat center center/cover;
}

.page-background::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(90deg, rgba(34, 7, 2, 0.7) 0%, rgba(34, 7, 2, 0.35) 58%, rgba(34, 7, 2, 0.12) 100%), linear-gradient(0deg, rgba(27, 14, 10, 0.42), rgba(27, 14, 10, 0.04) 52%);
}

.hero {
  display: grid;
  min-height: min(720px, 78svh);
  align-items: center;
  padding: clamp(4rem, 8vh, 6rem) 0;
  color: #fff;
  text-shadow: 0 5px 24px rgba(31, 7, 2, 0.32);
}

.hero__content {
  width: min(1120px, 100% - 3rem);
  margin: 0 auto;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.hero h1 {
  max-width: 8ch;
  margin-bottom: 2rem;
  font-size: clamp(3.8rem, 8vw, 6.6rem);
  letter-spacing: 0.16em;
  line-height: 0.92;
  text-transform: uppercase;
}

.hero__slogan {
  max-width: 560px;
  margin-bottom: 2.6rem;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.55;
}

.hero__device {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}

.hero__device .phone-frame {
  --phone-w: min(300px, 100vw - 3rem);
}

.hero__try {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
}

.hero__try:hover {
  text-decoration: underline;
}

.hero__try span {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__try span {
    animation: hero-try-bounce 1.9s ease-in-out infinite;
  }
}
@keyframes hero-try-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.3em);
  }
}

/* Autoplay is only allowed while muted, so the preview starts silent and this
gives the soundtrack back. It sits above the play/pause overlay. */
.hero__sound {
  position: absolute;
  z-index: 4;
  right: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
  box-sizing: content-box;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  padding: calc(9 * var(--u));
  border: 0;
  border-radius: 50%;
  background: rgba(18, 12, 10, 0.42);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 200ms ease;
}

.hero__sound:hover,
.hero__sound:focus-visible {
  opacity: 1;
}

.hero__sound:focus-visible {
  outline-offset: 2px;
}

.hero__sound svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff;
}

.hero__sound-on,
.hero__sound-off {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-width: 1.9;
}

.hero__sound-on {
  display: none;
}

.hero__sound.is-unmuted .hero__sound-on {
  display: inline;
}

.hero__sound.is-unmuted .hero__sound-off {
  display: none;
}

/* Once the sound is on the button has done its job, so it fades away until
the pointer is over the phone. Touch devices have no hover, so there it
stays put — otherwise there would be no way back to muted. */
@media (hover: hover) {
  .hero__sound.is-unmuted {
    opacity: 0;
  }

  .hero__device .phone-frame:hover .hero__sound.is-unmuted,
  .hero__sound.is-unmuted:focus-visible {
    opacity: 1;
  }
}

.eyebrow {
  margin-bottom: 1.1rem;
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow--dark {
  color: var(--accent);
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.store-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: 8px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.store-badge:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.store-badge img {
  width: auto;
  height: 50px;
  object-fit: contain;
}

.store-badges__note {
  max-width: 420px;
  margin-top: 0.6rem;
  margin-bottom: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.78;
}

.hero .store-badges__note {
  color: #fff;
}

.section {
  position: relative;
  padding: clamp(5rem, 9vw, 8.5rem) 1.5rem;
}

.section--white {
  background: var(--paper);
}

.section--grey {
  background: var(--soft-paper);
}

.section-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.section-intro {
  max-width: 790px;
  margin: 0 auto clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
}

.section-intro:only-child {
  margin-bottom: 0;
}

.section-intro > p:last-child,
.section-copy > p:last-child,
.section-note {
  margin-bottom: 0;
}

.section-copy {
  max-width: 680px;
}

.section-copy--left h2,
.section-copy--left h3 {
  text-align: left;
}

.phone-frame {
  --phone-w: min(360px, 100vw - 2.5rem);
  --u: calc(var(--phone-w) / 375);
  position: relative;
  width: var(--phone-w);
  padding: calc(10 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: calc(46 * var(--u));
  background: #181818;
  box-shadow: var(--shadow);
}

.phone-frame__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 375/812;
  border-radius: calc(36 * var(--u));
  background: #fff;
}

.phone-frame__screen > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-frame--dark .phone-frame__screen {
  background: #111;
}

.phone-frame--island::before {
  position: absolute;
  z-index: 3;
  top: calc(31 * var(--u));
  left: 50%;
  width: calc(120 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(17 * var(--u));
  background: #000;
  content: "";
  transform: translateX(-50%);
}

#tie-along {
  scroll-margin-top: 1rem;
}

.knot-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.knot-tab {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.knot-tab:hover {
  border-color: rgba(58, 43, 37, 0.32);
}

.knot-tab[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.section--collage {
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.section--collage .section-shell {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.animated-collage {
  overflow: hidden;
  background: #fff;
}

.animated-collage img {
  width: 100%;
  height: auto;
}

.feature-row {
  display: grid;
  max-width: 920px;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 350px);
  align-items: start;
  gap: 0.5rem;
  margin: 0 auto;
}

.feature-row + .feature-row {
  margin-top: clamp(4rem, 8vw, 7rem);
}

.feature-row--reverse {
  grid-template-columns: minmax(260px, 350px) minmax(260px, 1fr);
}

.feature-phone {
  width: 100%;
  max-height: 610px;
  object-fit: contain;
  filter: drop-shadow(0 24px 32px rgba(37, 24, 19, 0.14));
}

.feature-list {
  display: grid;
  gap: 10rem;
}

.feature-list--right {
  text-align: right;
}

.feature-card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
}

.feature-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.phone-triptych {
  display: flex;
  max-width: 900px;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.phone-triptych > div {
  width: 34%;
  margin: 0 -1.5%;
}

.phone-triptych > div:nth-child(2) {
  position: relative;
  z-index: 2;
}

.phone-triptych img {
  border-radius: clamp(14px, 2.5vw, 28px);
  box-shadow: var(--shadow);
}

.section-note {
  max-width: 730px;
  margin: clamp(3.5rem, 7vw, 6rem) auto;
  text-align: center;
}

.filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  align-items: center;
  gap: clamp(3.5rem, 10vw, 8rem);
}

.filter-demo {
  width: min(100%, 360px);
  justify-self: center;
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.more-grid {
  display: grid;
  grid-template-columns: minmax(270px, 390px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3.5rem, 10vw, 8rem);
}

.more-image {
  width: min(100%, 390px);
  justify-self: center;
  padding: 9px;
  border-radius: 32px;
  background: #191919;
  box-shadow: var(--shadow);
}

.more-image img {
  border-radius: 24px;
}

.site-footer {
  padding: 4.5rem 1.5rem 2rem;
  background: #1b1715;
  color: #fff;
}

.site-footer__main {
  display: flex;
  width: min(980px, 100%);
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
  margin: 0 auto 3.5rem;
}

.maitai-link,
.app-icon-link {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 14px;
}

.maitai-link img {
  width: 150px;
  max-height: 70px;
}

.app-icon-link img {
  border-radius: 23%;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.footer-badges {
  display: grid;
  justify-items: center;
}

.site-footer .store-badges {
  justify-content: center;
}

.site-footer .store-badges__note {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  text-align: center;
}

.site-footer__legal {
  display: flex;
  width: min(980px, 100%);
  justify-content: center;
  gap: 2rem;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.9rem;
}

.site-footer__legal a:hover {
  color: #fff;
}

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
  .hero__device .phone-frame {
    --phone-w: min(240px, 100vw - 3rem);
  }
  .filter-grid,
  .more-grid {
    grid-template-columns: 1fr;
  }
  .more-grid {
    gap: 3.5rem;
  }
  .filter-grid {
    gap: 3rem;
  }
  .more-image {
    grid-row: 2;
  }
}
@media (max-width: 767px) {
  body {
    font-size: 1.05rem;
    line-height: 1.6;
  }
  .page-background {
    background-position: 46% center;
  }
  .page-background::after {
    background: linear-gradient(90deg, rgba(34, 7, 2, 0.7), rgba(34, 7, 2, 0.28));
  }
  .hero {
    min-height: auto;
    padding: 5rem 0;
  }
  .hero__content {
    width: min(100% - 2.5rem, 620px);
  }

  /* The frame shrinks to 240px here, which would leave a 26px sound button;
  pin it to a 44px touch target instead. */
  .hero__sound {
    width: 26px;
    height: 26px;
    padding: 9px;
  }
  .hero h1 {
    margin-bottom: 1.7rem;
    font-size: clamp(4rem, 21vw, 6.5rem);
    letter-spacing: 0.11em;
  }
  .section {
    padding: 4.5rem 1.25rem;
  }
  .section--collage {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
  .section--collage .section-shell {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
  .section-intro {
    margin-bottom: 3.5rem;
  }
  .feature-row,
  .feature-row--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .feature-row:not(.feature-row--reverse) .feature-phone {
    grid-row: 1;
  }
  /* The curved leader lines drawn into these PNGs point at the two cards of
  the desktop two-column layout; stacked they point at nothing. Crop to
  the phone itself (594x1286 of each source) with object-fit, so the
  element box stays exactly the visible size. An earlier version clipped
  and re-centred with a transform, which left the box hanging past the
  viewport and made the whole page scrollable sideways. */
  .feature-phone {
    width: min(84%, 300px);
    max-height: none;
    justify-self: center;
    aspect-ratio: 594 / 1286;
    object-fit: cover;
  }

  .feature-row:not(.feature-row--reverse) .feature-phone {
    object-position: right center;
  }

  .feature-row--reverse .feature-phone {
    object-position: left center;
  }

  /* 10rem spaces the cards against the tall phone side by side; stacked it
  is just a hole. */
  .feature-list {
    gap: 2.5rem;
  }
  .feature-list--right {
    text-align: left;
  }
  .feature-card {
    padding: 1.25rem;
  }
  .phone-triptych {
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
  }
  .phone-triptych > div {
    width: 37%;
    margin: 0 -2.4%;
  }
  .site-footer__main {
    flex-direction: column;
    gap: 2rem;
  }
}
@media (max-width: 430px) {
  .site-footer .store-badges {
    align-items: center;
    flex-direction: column;
  }
  .site-footer__legal {
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------------------ */
/*  "Tie along" demo — a replica of the app's knot-tutorial screen.     */
/*  Every value taken from the iOS app is expressed in points and       */
/*  scaled with --u (set on .phone-frame as --phone-w / 375), so the    */
/*  mockup keeps the app's proportions at any phone width.             */
/* ------------------------------------------------------------------ */

.demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The screen is a fixed-height flex column — the phone never scrolls. */
.demo-screen {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #000;
  font-family: var(--body);
  font-size: calc(19 * var(--u));
  letter-spacing: 0;
  line-height: 1.2;
  text-align: left;
  text-shadow: none;
  -webkit-user-select: none;
  user-select: none;
}

.demo-screen button {
  font: inherit;
  letter-spacing: 0;
}

/* --- status bar + navigation bar ---------------------------------- */

.demo-statusbar {
  flex: 0 0 auto;
  height: calc(44 * var(--u));
  background: #f2f2f2;
}

.demo-nav {
  display: grid;
  flex: 0 0 auto;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  height: calc(44 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: #f2f2f2;
  color: #4d4d4d;
}

.demo-nav__back {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  font-size: calc(18 * var(--u));
}

.demo-nav__back svg {
  width: calc(8 * var(--u));
  height: calc(15 * var(--u));
}

.demo-nav__title {
  overflow: hidden;
  font-size: calc(20 * var(--u));
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-heart {
  display: inline-flex;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.demo-heart svg {
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  fill: #a8a8a8;
  transition: fill 200ms ease, transform 150ms ease;
}

.demo-heart[aria-pressed="true"] svg {
  fill: #e03a3a;
}

.demo-heart.is-bumped svg {
  transform: scale(1.28);
}

/* --- video stage --------------------------------------------------- */

.demo-stage {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 1;
  background: #fff;
}

.demo-video,
.demo-poster > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.demo-poster,
.demo-stage__hit {
  position: absolute;
  display: block;
  inset: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.demo-poster {
  z-index: 3;
  background: #fff;
}

.demo-stage__hit {
  z-index: 2;
  background: none;
}

/* Only one of the two overlays is live at a time, so the tab order
 stays predictable. */
.demo-screen.is-poster .demo-stage__hit,
.demo-screen:not(.is-poster) .demo-poster {
  display: none;
}

/* btn_play/btn_pause are 151 x 148 pt at 1x — the app draws them full size. */
.demo-poster__play,
.demo-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(151 * var(--u));
  height: auto;
  transform: translate(-50%, -50%);
}

.demo-glyph {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.demo-glyph.is-visible {
  opacity: 1;
}

/* The app fades the glyph out over 0.4s but in over 0.2s. */
.demo-glyph.demo-glyph--slow {
  transition-duration: 400ms;
}

.demo-stage__error {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: calc(10 * var(--u));
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: calc(17 * var(--u));
  text-align: center;
}

.demo-stage__error[hidden] {
  display: none;
}

/* --- collapsing slider + bottom bar (app: 0.2s ease-in-out) -------- */

.demo-collapsible {
  display: grid;
  flex: 0 0 auto;
  grid-template-rows: 1fr;
  transition: grid-template-rows 200ms ease-in-out, opacity 200ms ease-in-out;
}

.demo-collapsible > div {
  min-height: 0;
  overflow: hidden;
}

.demo-screen.is-start .demo-collapsible {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* --- step slider --------------------------------------------------- */

.demo-slider {
  display: flex;
  height: calc(30 * var(--u));
  align-items: center;
  gap: calc(13.5 * var(--u));
  /* tutorialVerticalSpacing (4) + the app's extra 5pt */
  margin-top: calc(9 * var(--u));
  padding: 0 calc(27 * var(--u)) 0 calc(18.5 * var(--u));
}

.demo-slider__back {
  width: calc(25 * var(--u));
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.demo-slider__back img {
  width: 100%;
  height: auto;
}

.demo-slider__track {
  position: relative;
  height: 100%;
  flex: 1 1 auto;
  cursor: pointer;
}

/* unplayed track */
.demo-slider__track::before {
  position: absolute;
  top: 50%;
  width: 100%;
  height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: #dbdbdb;
  content: "";
  transform: translateY(-50%);
}

.demo-slider__played {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--pos, 0) * 100%);
  height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: #000;
  transform: translateY(-50%);
}

.demo-slider__loopbar {
  position: absolute;
  top: calc(2 * var(--u));
  left: calc(var(--a, 0) * 100%);
  display: none;
  width: calc((var(--b, 0) - var(--a, 0)) * 100%);
  height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u));
  background: #bdbdbd;
}

.demo-screen.is-loop .demo-slider__loopbar {
  display: block;
}

.demo-slider__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--x, 0) * 100%);
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #adadad;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.demo-slider__dot.is-reached {
  background: #000;
}

/* the decorative dot that closes the track at 100% */
.demo-slider__dot.is-end {
  cursor: default;
  pointer-events: none;
}

.demo-slider__knob {
  position: absolute;
  top: 50%;
  left: calc(var(--pos, 0) * 100%);
  z-index: 2;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%);
}

/* --- swipeable step pages ----------------------------------------- */

.demo-pager {
  flex: 0 0 auto;
  margin-top: calc(4 * var(--u));
  overflow: hidden;
  touch-action: pan-y;
}

.demo-pager__track {
  display: flex;
  transform: translateX(calc(var(--page, 0) * -100%));
  transition: transform 250ms ease;
}

.demo-pager__track.is-dragging {
  transition: none;
}

/* Pages stretch to the tallest one, so stepping never shifts the layout. */
.demo-page {
  flex: 0 0 100%;
  padding: 0 calc(19 * var(--u)) calc(7 * var(--u));
}

.demo-page__step {
  margin: 0;
  font-family: var(--body);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: calc(29 * var(--u));
}

.demo-page__lead,
.demo-page__text,
.demo-page__list {
  margin: 0;
  font-size: calc(22 * var(--u));
  line-height: calc(26 * var(--u));
}

.demo-page__list {
  padding: 0;
  list-style: none;
}

.demo-page__list li::before {
  content: "\2022\00a0";
}

/* --- loop switch + speed segmented control ------------------------- */

.demo-bar {
  display: flex;
  height: calc(32 * var(--u));
  align-items: center;
  justify-content: space-between;
  margin-top: calc(4 * var(--u));
  padding: 0 calc(19 * var(--u));
}

.demo-loop {
  position: relative;
  height: 100%;
  padding: 0 calc(14 * var(--u));
  overflow: hidden;
  border: 0;
  border-radius: calc(8 * var(--u));
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  line-height: 1;
}

.demo-loop__knob {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: calc(2 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.18);
  transform: translateX(-110%);
  transition: transform 250ms ease-in-out;
}

.demo-loop[aria-pressed="true"] .demo-loop__knob {
  transform: translateX(0);
}

.demo-speed {
  display: flex;
  height: 100%;
  padding: calc(2 * var(--u));
  border-radius: calc(9 * var(--u));
  background: rgba(0, 0, 0, 0.085);
}

.demo-speed__btn {
  padding: 0 calc(11 * var(--u));
  border: 0;
  border-radius: calc(7 * var(--u));
  background: none;
  color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  line-height: 1;
}

.demo-speed__btn[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.16);
}

/* --- blog sneak peek ----------------------------------------------- */
/* Takes whatever height is left and fades out — never scrolls. */

.demo-blog {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(18 * var(--u));
  padding: 0 calc(19 * var(--u));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 92%);
  mask-image: linear-gradient(#000 35%, transparent 92%);
}

.demo-blog__rule {
  height: 0;
  margin: 0 0 calc(10 * var(--u));
  border: 0;
  border-top: calc(0.5 * var(--u)) solid rgba(0, 0, 0, 0.2);
}

.demo-blog__title {
  margin: 0;
  font-family: var(--body);
  font-size: calc(25 * var(--u));
  font-weight: 700;
  letter-spacing: 0;
  line-height: calc(40 * var(--u));
  text-transform: none;
}

.demo-blog__text,
.demo-blog__sub {
  margin: 0;
  font-family: var(--body);
  font-size: calc(19 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
  line-height: calc(24 * var(--u));
  text-transform: none;
}

.demo-blog__sub {
  margin-top: calc(10 * var(--u));
  font-weight: 700;
}

.demo-blog__img {
  width: 100%;
  margin-top: calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
}

/* --- caption under the phone --------------------------------------- */

.demo-cta {
  max-width: 46ch;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 767px) {
  .demo-cta {
    font-size: 0.9rem;
  }
}
/*# sourceMappingURL=styles.css.map */