/* Lanes site. Soft, raised surfaces (neumorphism) on one quiet ground, Apple type, and the
   violet of the Lanes icon. Every surface is the ground colour lifted or pressed by light and
   shadow, never a tint, so the page reads as one material. */

:root {
  --ground: #e9edf2;
  --ink: #1d1d1f;
  --muted: #6b6f78;
  --accent: #6a4fe0;
  --accent-deep: #4b33b8;
  --accent-bright: #8b6cff;
  --light: rgba(255, 255, 255, 0.95);
  --dark: rgba(163, 177, 198, 0.62);
  --hairline: rgba(29, 29, 31, 0.08);
  --raise: 10px 10px 26px var(--dark), -10px -10px 26px var(--light);
  --raise-sm: 5px 5px 12px var(--dark), -5px -5px 12px var(--light);
  --press: inset 6px 6px 14px var(--dark), inset -6px -6px 14px var(--light);
  --press-sm: inset 3px 3px 7px var(--dark), inset -3px -3px 7px var(--light);
  --radius: 28px;
  --measure: 72rem;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1d2025;
    --ink: #f5f5f7;
    --muted: #a1a4ab;
    --accent: #a993ff;
    --accent-deep: #6a4fe0;
    --accent-bright: #c4b5ff;
    --light: rgba(46, 51, 59, 0.9);
    --dark: rgba(8, 9, 11, 0.75);
    --hairline: rgba(245, 245, 247, 0.08);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.wrap { width: min(var(--measure), 100% - 32px); margin-inline: auto; }

/* ---------- Navigation: one raised capsule that floats over the page ---------- */

.nav {
  position: sticky; top: 14px; z-index: 50;
  width: min(var(--measure), 100% - 24px); margin: 14px auto 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--raise-sm);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand-icon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; overflow: hidden; }
.brand-icon img { width: 100%; height: 100%; }
.nav-links { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: var(--muted); font-size: 15px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  transition: color .2s, box-shadow .25s var(--ease);
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); box-shadow: var(--press-sm); }
.nav .btn { margin-left: 4px; }
/* A phone gets one compact row: the icon (which goes home) and the pages. The App Store badge on
   every page, and Safari's own app banner, stand in for the Get the app button. */
@media (max-width: 760px) {
  .nav { top: 10px; margin-top: 10px; padding: 6px; gap: 4px; }
  .nav .brand-name, .nav .nav-get, .nav .nav-links .nav-home { display: none; }
  .nav-links { margin-left: auto; }
  .nav-links a { padding: 8px 11px; font-size: 14.5px; }
}

/* ---------- Buttons: raised, and pressed in while held ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 0;
  font: 600 16px/1 var(--font); color: var(--ink); background: var(--ground);
  box-shadow: var(--raise-sm); cursor: pointer;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), color .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { box-shadow: var(--press-sm); transform: none; }
.btn-accent { color: #fff; background: linear-gradient(135deg, var(--accent-bright), var(--accent) 55%, var(--accent-deep)); }
.btn-sm { padding: 9px 16px; font-size: 15px; }

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

h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.05; font-weight: 700; }
.display { font-size: clamp(44px, 8vw, 92px); letter-spacing: -0.045em; }
.title { font-size: clamp(34px, 5.2vw, 60px); }
.subtitle { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1.15; }
.lede { font-size: clamp(19px, 2.2vw, 23px); color: var(--muted); line-height: 1.45; max-width: 38rem; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.center { text-align: center; margin-inline: auto; }

/* ---------- Surfaces ---------- */

.card { background: var(--ground); border-radius: var(--radius); box-shadow: var(--raise); padding: clamp(24px, 3.4vw, 40px); }
.well { background: var(--ground); border-radius: var(--radius); box-shadow: var(--press); padding: clamp(24px, 3.4vw, 40px); }
.card h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 10px; }
.card p { margin: 0; color: var(--muted); }

section { padding-block: clamp(64px, 10vw, 128px); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { text-align: center; }
.section-head .lede { margin-top: 18px; }
.section-head.center .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Devices: the app's own screens in Apple's product frames ---------- */

/* The images carry their frame and a transparent background, so they sit on the page in light and dark. */
.device-shot { display: block; flex: none; }
.device-shot img, img.device-shot { display: block; width: 100%; height: auto; }
.phone-shot { width: min(300px, 78vw); filter: drop-shadow(0 24px 34px var(--dark)); }

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

.hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero .lede { margin: 24px 0 36px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.store-badge { display: inline-block; height: 52px; padding: 0; border-radius: 12px; box-shadow: var(--raise-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.store-badge:hover { transform: translateY(-1px); }
.store-badge:active { box-shadow: var(--press-sm); }
.store-badge img { height: 52px; width: auto; }
.hero-devices { margin-inline: auto; width: 100%; max-width: 640px; }
.hero-devices img { display: block; width: 100%; height: auto; animation: float 8s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Feature rows: text beside a screen, alternating ---------- */

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 10vw, 140px); }
.feature.flip > :first-child { order: 2; }
.feature .device-shot { margin-inline: auto; }
.feature p { color: var(--muted); font-size: 19px; margin: 18px 0 0; max-width: 32rem; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip > :first-child { order: 0; }
}

/* ---------- Statements: big, quiet lines ---------- */

.statement { font-size: clamp(30px, 4.6vw, 54px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; max-width: 52rem; }
.statement .muted { font-weight: 700; }

.pcc { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.cloud-orb { width: clamp(120px, 16vw, 180px); aspect-ratio: 1; border-radius: 50%; box-shadow: var(--raise); display: grid; place-items: center; }
.cloud-orb svg { width: 44%; height: 44%; color: var(--accent); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@media (max-width: 640px) { .pcc { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Legal pages ---------- */

.doc { width: min(44rem, 100% - 32px); margin: clamp(48px, 8vw, 96px) auto 0; }
.doc h1 { font-size: clamp(40px, 6vw, 56px); letter-spacing: -0.035em; }
.doc .updated { color: var(--muted); margin: 14px 0 36px; font-variant-numeric: tabular-nums; }
.doc h2 { font-size: 22px; letter-spacing: -0.015em; margin: 44px 0 12px; }
.doc p, .doc li { color: color-mix(in srgb, var(--ink) 82%, var(--ground)); }
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.doc li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.doc li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.doc .summary { margin: 0 0 28px; }
.doc .summary h2 { margin-top: 0; }
.doc .summary ul { margin-bottom: 0; }
.doc .lede { color: var(--ink); max-width: none; }

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

footer { padding: 48px 0 56px; margin-top: clamp(64px, 10vw, 120px); }
.foot { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid var(--hairline); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--muted); font-size: 15px; }
.foot a:hover { color: var(--ink); }
.foot small { color: var(--muted); font-size: 14px; }
.disclaimer { color: var(--muted); font-size: 14px; max-width: 46rem; margin: 0 0 22px; }

/* ---------- Reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
/* Device screens rise from a little further and settle, after the words beside them. */
.js .reveal.rise { transform: translateY(56px) scale(.96); transition-duration: 1.1s; }
.js .reveal.rise.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.rise { opacity: 1; transform: none; transition: none; }
  .hero-devices img, .cloud-orb svg { animation: none; }
}

/* ---------- Access levels: three raised tiles, the chosen one pressed in ---------- */

.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.level { border-radius: 22px; padding: 22px; box-shadow: var(--raise-sm); }
.level.chosen { box-shadow: var(--press-sm); }
.level h3 { font-size: 20px; margin-bottom: 8px; }
.level p { margin: 0; color: var(--muted); font-size: 15.5px; }
.level .tag { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); }
@media (max-width: 760px) { .levels { grid-template-columns: 1fr; } }

/* ---------- How the devices work together: a chevron that opens four sample screens ---------- */

.together { margin-top: 36px; text-align: left; }
.together summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin-inline: auto;
  padding: 10px 18px; border-radius: 999px; list-style: none; cursor: pointer;
  color: var(--muted); font-weight: 600; font-size: 16px; transition: color .2s, box-shadow .2s var(--ease);
}
.together summary::-webkit-details-marker { display: none; }
.together summary:hover { color: var(--ink); }
.together[open] summary { color: var(--ink); box-shadow: var(--press-sm); }
.together summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.together[open] summary svg { transform: rotate(180deg); }
.together-steps {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 32px); counter-reset: step;
}
.together[open] .together-steps > li { animation: together-in .6s var(--ease) both; }
.together[open] .together-steps > li:nth-child(2) { animation-delay: .07s; }
.together[open] .together-steps > li:nth-child(3) { animation-delay: .14s; }
.together[open] .together-steps > li:nth-child(4) { animation-delay: .21s; }
@keyframes together-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.together-steps > li { counter-increment: step; }
.together-steps h3 { font-size: 20px; letter-spacing: -0.02em; margin: 22px 0 8px; }
.together-steps h3::before { content: counter(step) ". "; color: var(--accent); }
.together-steps p { margin: 0; color: var(--muted); font-size: 16px; }
/* Every screen sits on the same baseline, so the four read as one row whatever their shape. */
.shot { height: 300px; display: flex; align-items: flex-end; justify-content: center; }
.shot .device-shot { filter: drop-shadow(0 14px 20px var(--dark)); }
.device-shot.tablet { height: 280px; width: auto; }
.device-shot.tablet img { height: 100%; width: auto; }
.device-shot.handset { height: 300px; width: auto; }
.device-shot.wrist { width: 170px; height: auto; margin-bottom: 40px; }
@media (max-width: 900px) { .together-steps { grid-template-columns: 1fr 1fr; row-gap: 48px; } }
@media (max-width: 520px) {
  .together-steps { grid-template-columns: 1fr; }
  .shot { height: 260px; }
  .device-shot.tablet { height: 250px; }
  .device-shot.handset { height: 260px; }
  .device-shot.wrist { width: 150px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .together[open] .together-steps > li { animation: none; } .together summary svg { transition: none; } }

/* ---------- Small print on support ---------- */

.faq h3 { font-size: 19px; letter-spacing: -0.01em; margin: 30px 0 8px; }
.faq p { color: var(--muted); margin: 0; }
.doc code { font: 14.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 6px; border-radius: 6px; box-shadow: var(--press-sm); overflow-wrap: anywhere; }

/* Board themes: four framed iPhones in a row, two by two on narrow screens. */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.theme-shot { margin: 0; }
.theme-shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 28px var(--dark)); }
.theme-shot figcaption { margin-top: 22px; }
.theme-shot h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 6px; }
.theme-shot p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .themes { grid-template-columns: 1fr 1fr; row-gap: 48px; } }
.mac-shot { display: block; max-width: 1100px; margin: 0 auto; }
.mac-shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 32px var(--dark)); }
.mac-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(40px, 6vw, 72px); align-items: start; }
.mac-more figure { margin: 0; }
.mac-more img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 22px var(--dark)); }
.mac-more figcaption { margin-top: 18px; }
.mac-more h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 6px; }
.mac-more p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .mac-more { grid-template-columns: 1fr; row-gap: 40px; } }