/* Practice Pro marketing site
   The App Store slides' look: the app's blue in a deep gradient, white heavy type with the key phrase in
   yellow, and the app's light grey page behind white tiles. Each tool section wears one of the app's own
   themes. System SF font, no external deps. */

:root {
  color-scheme: light;

  --paper:      #f0f1f5;          /* the app's default page background */
  --paper-2:    #e7e9f0;
  --white:      #ffffff;
  --ink:        #0f1733;
  --ink-dim:    #4c5675;
  --ink-dimmer: #7d86a3;
  --line:       rgba(15, 23, 51, 0.09);

  --blue:       #2f5ff3;          /* slide gradient, top */
  --blue-deep:  #1c3cbc;          /* slide gradient, bottom */
  --blue-icon:  #1f78f7;          /* the icon's tiles */
  --blue-tile:  #4a76e8;          /* lightBlue theme accent, as drawn in the widgets */
  --yellow:     #ffd43b;          /* the slides' key phrase */

  --maxw: 1160px;
  --radius: 22px;
  --radius-lg: 32px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue",
          system-ui, "Segoe UI", Roboto, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Helvetica Neue",
          system-ui, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 650; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.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;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 650; font-size: 16px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(47, 95, 243, 0.35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(47, 95, 243, 0.5); }
.btn-sm { font-size: 14.5px; padding: 9px 18px; }
.btn-text { color: rgba(255, 255, 255, 0.82); padding-left: 4px; padding-right: 4px; }
.btn-text:hover { color: #fff; }
.btn-text .chev { transition: transform .2s ease; }
.btn-text:hover .chev { transform: translateY(2px); }
.btn:focus-visible, .store-badge:focus-visible, .nav-links a:focus-visible, .chip-btn:focus-visible,
.film-tab:focus-visible {
  outline: 2px solid var(--yellow); outline-offset: 4px;
}

/* Apple's black badge, never recoloured */
.store-badge {
  display: inline-block; line-height: 0; border-radius: 9px;
  box-shadow: 0 10px 26px rgba(8, 18, 70, 0.35);
  transition: transform .15s ease, box-shadow .2s ease;
}
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(8, 18, 70, 0.45); }
.store-badge img { height: 54px; width: auto; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  background: rgba(240, 241, 245, 0.78);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 750; font-size: 17px; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 1px 0 var(--line), 0 2px 8px rgba(31, 120, 247, 0.25); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--ink-dim); }
.nav-links a { transition: color .15s ease; }
.nav-links a:hover { color: var(--ink); }

/* ---------- Type ---------- */
.eyebrow, .kicker {
  display: inline-block;
  font-size: 13px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
}
h1, h2, h3 { font-family: var(--display); margin: 0; }
.two-line { font-weight: 850; letter-spacing: -0.035em; line-height: 1.02; }
.two-line span { display: block; }
.hl { color: var(--blue); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, #3a68f6 0%, var(--blue) 30%, var(--blue-deep) 100%);
  overflow: hidden;
  padding: 72px 0 0;
}
/* The icon's tiles, faint, in the app's grid behind the copy */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055), rgba(255,255,255,0.055));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 96px, transparent 96px 112px),
                repeating-linear-gradient(0deg, #000 0 96px, transparent 96px 112px);
  -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(90deg, #000 0 96px, transparent 96px 112px),
        repeating-linear-gradient(0deg, #000 0 96px, transparent 96px 112px);
  mask-composite: intersect;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 0%, transparent 30%, rgba(14, 28, 110, 0.35) 100%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: end; }
.hero-copy { padding-bottom: 96px; }
.hero .eyebrow { color: rgba(255, 255, 255, 0.78); }
.hero h1 { font-size: clamp(42px, 5.1vw, 68px); margin: 18px 0 22px; }
.hero h1 .y { color: var(--yellow); }
.lede { font-size: 19.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 540px; margin: 0 0 30px; }
.cta-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-row.center { justify-content: center; }

.proof { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; font-size: 14.5px; color: rgba(255, 255, 255, 0.8); }
.proof .sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.3); }
.stars { display: inline-flex; align-items: center; gap: 9px; }
.stars-row { display: inline-flex; gap: 2px; }
.stars-row svg { width: 16px; height: 16px; }
.proof b { color: #fff; }
.press {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff; font-weight: 600; font-size: 13.5px;
  transition: background .2s ease, border-color .2s ease;
}
a.press:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.34); }
a.press:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.press .v { font-weight: 850; letter-spacing: -0.02em; font-size: 14.5px; }
.hero-note { margin: 16px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.65); }
.hero-note b { color: #fff; }

.hero-visual { position: relative; display: flex; justify-content: center; align-self: end; }
.hero-phone { --pw: min(360px, 78vw); margin-bottom: -150px; }
.page-dots { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); display: none; }

/* ---------- Phone (drawn around a 1320 x 2868 screenshot) ----------
   The screen keeps the screenshot's own proportions and the frame goes around it: a metal band
   (the border) and a black bezel (the padding), with corners concentric to the screen's. The
   Dynamic Island sits exactly where iOS draws it, so it also covers one already in a capture. */
.phone {
  --pw: 300px;
  --band: calc(var(--pw) * 0.011);
  --bezel: calc(var(--pw) * 0.034);
  --screen-r: calc(var(--pw) * 0.113);
  position: relative;
  width: var(--pw);
  padding: var(--bezel);
  border: var(--band) solid transparent;
  border-radius: calc(var(--screen-r) + var(--bezel) + var(--band));
  background:
    linear-gradient(#060608, #060608) padding-box,
    linear-gradient(150deg, #8a8d96 0%, #3a3c43 22%, #5d6068 48%, #2a2c31 72%, #6f727a 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 80px -20px rgba(10, 20, 70, 0.45),
    0 18px 36px -18px rgba(10, 20, 70, 0.35);
}
.phone .screen {
  position: relative; width: 100%;
  aspect-ratio: 1320 / 2868;
  border-radius: var(--screen-r);
  overflow: hidden; background: #000;
  transform: translateZ(0);
}
.phone.film .screen { aspect-ratio: 590 / 1284; }
.phone .screen img, .phone .screen video { width: 100%; height: 100%; object-fit: cover; }
/* Dynamic Island: iPhone 17 Pro Max captures (1320 wide) */
.phone .screen::after {
  content: ""; position: absolute; z-index: 3;
  left: 35.4%; top: 1.32%; width: 29.2%; height: 4.1%;
  border-radius: 999px; background: #000;
}
/* The films are from an iPhone 17 Pro, whose island is relatively wider */
.phone.film .screen::after { left: 34.05%; top: 1.48%; width: 31.9%; height: 4.45%; }

/* A stack of screens that crossfade or slide */
.screen.stack > * { position: absolute; inset: 0; }
.screen.pager { display: flex; }
.screen.pager .track { position: absolute; inset: 0; display: flex; transition: transform .7s cubic-bezier(.65, 0, .25, 1); }
.screen.pager .track img { flex: 0 0 100%; }

/* ---------- Sections ---------- */
.section { padding: 120px 0; position: relative; }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(36px, 4.6vw, 58px); margin: 14px 0 18px; }
.section-head p { font-size: 18.5px; color: var(--ink-dim); margin: 0 auto; max-width: 640px; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.feature.flip .feature-text { order: 2; }
.feature-text h2 { font-size: clamp(36px, 4.2vw, 54px); margin: 14px 0 22px; }
.feature-text > p { font-size: 18px; color: var(--ink-dim); margin: 0 0 26px; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.points li { position: relative; padding-left: 30px; color: var(--ink-dim); font-size: 16px; }
.points li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 5px; background: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 95, 243, 0.14);
}
.points li b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }
.fine { font-size: 13.5px; color: var(--ink-dimmer); margin: 22px 0 0; }
.feature-visual { position: relative; display: flex; justify-content: center; align-items: center; gap: 28px; }
/* Grid children may shrink below their content's width (the theme slider, long words) */
.hero-grid > *, .feature > *, .how > *, .themes-grid > *, .about-inner > * { min-width: 0; }

/* Themed bands: a section wears one of the app's themes */
.band { color: var(--t-text); background: var(--t-bg); }
.band .kicker { color: var(--t-accent); }
.band .hl { color: var(--t-accent); }
.band .feature-text > p, .band .points li { color: var(--t-dim); }
.band .points li b { color: var(--t-text); }
.band .points li::before { background: var(--t-accent); box-shadow: 0 0 0 4px var(--t-ring); }
.band .fine { color: var(--t-dim); opacity: .8; }
.band-black  { --t-bg: #000; --t-text: #fff; --t-dim: rgba(255,255,255,.66); --t-accent: #ffd60a; --t-ring: rgba(255,214,10,.18); }
.band-violet { --t-bg: linear-gradient(180deg, #5a1fd6, #4615b8); --t-text: #fff; --t-dim: rgba(255,255,255,.74); --t-accent: #ffffff; --t-ring: rgba(255,255,255,.2); }
.band-lavender { --t-bg: #ece6fc; --t-text: #2a1466; --t-dim: #5c4c8f; --t-accent: #7b4ff0; --t-ring: rgba(123,79,240,.16); }
.band-teal { --t-bg: #dff3f1; --t-text: #0b3b37; --t-dim: #3f6763; --t-accent: #11968a; --t-ring: rgba(17,150,138,.16); }

.band-black .phone, .band-violet .phone { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 80px -20px rgba(0,0,0,.6); }

.pair { display: flex; gap: 26px; align-items: flex-start; }
.pair .phone:nth-child(2) { margin-top: 70px; }

/* Stat chips that sit beside a phone */
.stat-col { display: grid; gap: 12px; }
.stat {
  padding: 14px 18px; border-radius: 16px;
  background: var(--white); box-shadow: 0 12px 30px -12px rgba(15, 23, 51, .25);
  min-width: 170px;
}
.stat .t { font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dimmer); }
.stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.band-black .stat { background: #141414; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.band-black .stat .t { color: rgba(255,255,255,.5); }
.band-black .stat .v { color: #ffd60a; }
.band-violet .stat { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.band-violet .stat .t { color: rgba(255,255,255,.65); }
.band-violet .stat .v { color: #fff; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.tag-list li {
  padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--t-ring, rgba(47,95,243,.1)); color: var(--t-accent, var(--blue));
}
.band-black .tag-list li { background: rgba(255,214,10,.12); }
.band-violet .tag-list li { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- How it works: five films in one phone ---------- */
.how {
  display: grid; grid-template-columns: 1fr auto; column-gap: 72px;
  grid-template-areas: "head visual" "tabs visual"; align-items: start;
}
.how-head { grid-area: head; align-self: end; }
.how-visual { grid-area: visual; align-self: center; }
.how-tabs { grid-area: tabs; }
.how-head h2 { font-size: clamp(36px, 4.2vw, 54px); margin: 14px 0 18px; }
.how-head > p { font-size: 18px; color: var(--ink-dim); margin: 0 0 28px; max-width: 520px; }
.film-tabs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width: 560px; }
.film-tab {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 16px 18px; border-radius: 18px; border: 1px solid transparent;
  background: transparent; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.film-tab:hover { background: rgba(255, 255, 255, 0.6); }
.film-tab .n {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; color: var(--blue); background: rgba(47, 95, 243, 0.1);
  position: relative; overflow: hidden;
}
.film-tab .n::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%);
  background: var(--blue);
}
.film-tab h3 { font-size: 19px; letter-spacing: -0.01em; font-weight: 750; margin: 1px 0 3px; }
.film-tab p { margin: 0; color: var(--ink-dim); font-size: 15.5px; }
.film-tab[aria-selected="true"] { background: var(--white); border-color: var(--line); box-shadow: 0 14px 34px -18px rgba(15, 23, 51, 0.35); }
.film-tab[aria-selected="true"] .n { background: var(--blue); color: #fff; }
.film-tab[aria-selected="true"] .n::after { background: rgba(255, 255, 255, 0.7); }
.how .phone { --pw: 320px; }

/* ---------- Widget catalog ---------- */
.catalog { background: var(--white); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -24px 0 40px; }
.chip-btn {
  font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-dim);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip-btn:hover { color: var(--ink); }
.chip-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip-btn .c { opacity: .6; font-weight: 600; margin-left: 4px; }
.wgrid { columns: 4; column-gap: 18px; }
.wcard { margin: 0 0 24px; break-inside: avoid; display: inline-block; width: 100%; }
.wcard .tile {
  display: block; width: 100%; height: auto;
  border-radius: 4.98% / 10.2%;
  box-shadow: 0 1px 0 rgba(15, 23, 51, .04), 0 10px 26px -14px rgba(15, 23, 51, .35);
  background: var(--paper);
}
.wcard.tall .tile { border-radius: 9.7%; }
.wcard .tile.cam {
  aspect-ratio: 1164 / 567; background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--blue-tile); font-size: 12.5px; font-weight: 600;
}
.wcard .tile.cam svg { width: 34%; max-width: 64px; height: auto; }
.wcard figcaption { margin-top: 10px; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.wcard figcaption span { display: block; font-size: 13px; font-weight: 500; color: var(--ink-dimmer); }
.wcard[hidden] { display: none; }
.catalog-note { text-align: center; color: var(--ink-dimmer); font-size: 14px; margin: 36px 0 0; }

/* ---------- Themes ---------- */
.themes { transition: background-color .5s ease; background: var(--th-page, #f0f1f5); }
.themes-grid {
  display: grid; grid-template-columns: auto 1fr; column-gap: 72px;
  grid-template-areas: "visual copy" "visual pick"; align-items: start;
}
.themes-visual { grid-area: visual; align-self: center; }
.themes-copy { grid-area: copy; align-self: end; }
.themes-pick { grid-area: pick; }
.themes .phone { --pw: 320px; }
.themes .phone .screen img { transition: opacity .35s ease; }
.themes-copy h2 { font-size: clamp(36px, 4.4vw, 56px); margin: 14px 0 20px; color: var(--th-text, var(--ink)); transition: color .5s ease; }
.themes-copy > p { font-size: 18px; color: var(--th-dim, var(--ink-dim)); margin: 0 0 28px; transition: color .5s ease; }
.themes .kicker { color: var(--th-accent, var(--blue)); transition: color .5s ease; }
.themes .hl { color: var(--th-accent, var(--blue)); transition: color .5s ease; }
/* The app's theme slider (ThemeSwatchSlider): 100 px slots, each a 90 x 36 pill in the page color
   with four 24 px circles, on a light frosted panel like the page retheme panel */
.theme-panel {
  position: relative; max-width: 560px; padding: 12px 0 14px;
  border-radius: 24px;
  background: rgba(226, 228, 234, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 30px -12px rgba(0, 0, 0, 0.3);
  color: #1c1c1e;
}
.theme-chevron { display: block; width: 12px; height: 7px; margin: 0 auto 6px; }
.theme-slider {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; cursor: grab;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  outline: none;
}
.theme-slider::-webkit-scrollbar { display: none; }
.theme-slider.dragging { scroll-snap-type: none; cursor: grabbing; }
.theme-slider:focus-visible { -webkit-mask: none; mask: none; box-shadow: inset 0 0 0 2px var(--blue); border-radius: 12px; }
.theme-track { display: flex; width: max-content; }
.pill-slot {
  flex: 0 0 100px; height: 44px; padding: 0; border: 0; background: none; cursor: inherit;
  display: grid; place-items: center; scroll-snap-align: center;
  -webkit-tap-highlight-color: transparent;
}
.pill { position: relative; display: block; width: 90px; height: 36px; border-radius: 18px; background: var(--p); }
.pill i { position: absolute; top: 6px; width: 24px; height: 24px; border-radius: 50%; }
.pill i:nth-child(1) { left: 7px; background: var(--c1); }
.pill i:nth-child(2) { left: 24px; background: var(--c2); }
.pill i:nth-child(3) { left: 41px; background: var(--c3); }
.pill i:nth-child(4) { left: 58px; background: var(--c4); }
.themes-note { margin: 22px 0 0; font-size: 14.5px; color: var(--th-dim, var(--ink-dim)); transition: color .5s ease; }
.themes-note b { color: var(--th-text, var(--ink)); }

/* ---------- Templates ---------- */
.templates-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.templates-list li {
  padding: 12px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--line);
  font-weight: 650; font-size: 15px;
}
.templates-list li span { display: block; font-weight: 500; color: var(--ink-dimmer); font-size: 13.5px; }

/* ---------- More ---------- */
.more { padding-top: 40px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile-card {
  padding: 22px; border-radius: 20px; background: var(--white);
  box-shadow: 0 1px 0 rgba(15, 23, 51, .04), 0 10px 28px -18px rgba(15, 23, 51, .35);
}
.tile-card svg { width: 28px; height: 28px; color: var(--blue); }
.tile-card h3 { font-size: 17px; margin: 14px 0 6px; letter-spacing: -0.01em; }
.tile-card p { margin: 0; font-size: 14.5px; color: var(--ink-dim); }

/* ---------- iPad ---------- */
.devices { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin-top: 10px; }
.ipad {
  --iw: 560px;
  --band: calc(var(--iw) * 0.007);
  --bezel: calc(var(--iw) * 0.028);
  --screen-r: calc(var(--iw) * 0.03);
  position: relative; width: var(--iw);
  padding: var(--bezel);
  border: var(--band) solid transparent;
  border-radius: calc(var(--screen-r) + var(--bezel) + var(--band));
  background:
    linear-gradient(#060608, #060608) padding-box,
    linear-gradient(150deg, #8a8d96 0%, #3a3c43 22%, #5d6068 48%, #2a2c31 72%, #6f727a 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -20px rgba(10,20,70,.4);
}
.ipad .screen { width: 100%; aspect-ratio: 2064 / 2752; border-radius: var(--screen-r); overflow: hidden; }
.ipad .screen img { width: 100%; height: 100%; object-fit: cover; }
.devices .phone { --pw: 210px; margin-left: -70px; margin-bottom: -20px; z-index: 2; }

/* ---------- Reviews + closer ---------- */
.closer {
  color: #fff; text-align: center;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  position: relative; overflow: hidden;
}
.closer .wrap { position: relative; z-index: 1; }
.closer::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 96px, transparent 96px 112px),
                repeating-linear-gradient(0deg, #000 0 96px, transparent 96px 112px);
  -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(90deg, #000 0 96px, transparent 96px 112px),
        repeating-linear-gradient(0deg, #000 0 96px, transparent 96px 112px);
  mask-composite: intersect;
}
.closer .icon { width: 92px; height: 92px; border-radius: 21px; margin: 0 auto 26px; box-shadow: 0 16px 40px rgba(8, 18, 70, .45); }
.closer h2 { font-size: clamp(38px, 5vw, 64px); margin: 0 0 16px; }
.closer h2 .y { color: var(--yellow); }
.closer .sub { font-size: 18.5px; color: rgba(255,255,255,.82); margin: 0 auto 34px; max-width: 560px; }
.closer .note { font-size: 14px; color: rgba(255,255,255,.62); margin: 18px 0 0; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 72px; text-align: left; }
.review {
  margin: 0; padding: 24px; border-radius: 22px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  display: flex; flex-direction: column; gap: 14px;
}
.review blockquote { margin: 0; font-size: 16.5px; line-height: 1.5; }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.68); }
.review .stars-row svg { width: 14px; height: 14px; }

/* ---------- About ---------- */
.about-inner { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; max-width: 900px; margin: 0 auto; }
.about-photo img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 50px -20px rgba(15,23,51,.45); }
.about-body h2 { font-size: clamp(32px, 3.6vw, 44px); font-weight: 850; letter-spacing: -0.03em; margin: 10px 0 14px; }
.about-body p { color: var(--ink-dim); font-size: 17px; margin: 0 0 14px; }
.about-body .byline { font-size: 14.5px; color: var(--ink-dimmer); }
.about-body .byline a { color: var(--blue); }

/* ---------- Under the hood ---------- */
.tech { background: var(--white); }
.tech .tiles .tile-card { background: var(--paper); box-shadow: none; border: 1px solid var(--line); }
.tech .fw { display: block; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 6px; }
.tech-note { text-align: center; color: var(--ink-dimmer); margin: 30px 0 0; font-size: 14.5px; }

/* ---------- Footer ---------- */
.footer { padding: 64px 0 48px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-dim); }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 40px; }
.footer h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.footer .fcol a { display: block; margin-bottom: 8px; }
.footer .fcol a:hover { color: var(--ink); }
.footer .fcol a.brand { display: flex; margin-bottom: 12px; color: var(--ink); }
.fine-print { font-size: 12.5px; color: var(--ink-dimmer); line-height: 1.6; }

/* ---------- Motion ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .screen.pager .track { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .wgrid { columns: 3; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) {
  .nav-links .opt { display: none; }
  .hero { padding-top: 48px; }
  .hero-grid, .feature { grid-template-columns: 1fr; gap: 48px; }
  .how { grid-template-columns: 1fr; grid-template-areas: "head" "visual" "tabs"; row-gap: 28px; }
  .themes-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "pick"; row-gap: 28px; }
  .how-head > p, .themes-copy > p { margin-bottom: 0; }
  .film-tab[aria-selected="false"] p { display: none; }
  .film-tabs { max-width: none; }
  .hero-copy { padding-bottom: 8px; text-align: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero .cta-row, .hero .proof { justify-content: center; }
  .hero-phone { --pw: min(320px, 76vw); margin-bottom: -120px; }
  .feature.flip .feature-text { order: 0; }
  .feature-text { text-align: left; }
  .section { padding: 88px 0; }
  .how .phone { --pw: min(250px, 66vw); margin: 0 auto; }
  .themes .phone { --pw: min(210px, 56vw); margin: 0 auto; }
  .theme-panel { max-width: none; }
  .about-inner { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .about-photo img { margin: 0 auto; width: 180px; height: 180px; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .ipad { --iw: min(500px, 78vw); }
  .devices .phone { --pw: min(190px, 30vw); margin-left: -16%; }
  .templates-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .wgrid { columns: 2; column-gap: 12px; }
  .wcard figcaption { font-size: 13.5px; }
  .tiles { grid-template-columns: 1fr; }
  .pair { gap: 14px; }
  .pair .phone { --pw: min(200px, 44vw); }
  .pair .phone:nth-child(2) { margin-top: 40px; }
  .feature-visual { flex-wrap: wrap; }
  .stat-col { grid-template-columns: 1fr 1fr; width: 100%; }
  .stat { min-width: 0; }
  .footer .cols { grid-template-columns: 1fr; }
  .templates-list { grid-template-columns: 1fr; }
  .lede { font-size: 17.5px; }
  .film-tab { padding: 12px 12px; gap: 12px; }
}