/* Lockership website. Editorial layout: text/image splits, real app screens in plain frames and realistic phones,
   a few photos where they show the section's subject, and the logo's locker wall in the call to action.
   Spacing scale: sections 112/80/56px (desktop/tablet/phone), blocks 40–48px, items 16–24px. */
@font-face { font-family: "Jakarta"; src: url("/assets/jakarta.ff6529f94f.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
:root {
  --indigo: #3D3BF3; --indigo-deep: #2A28C4; --indigo-soft: #ECECFE;
  --ink: #121317; --graphite: #474B53; --muted: #656972; --line: #E6E3DD; --paper: #FFFFFF; --bg: #FBFAF7; --sand: #F3EFE8; --night: #101120;
  --mint: #1A7F45; --mint-soft: #E3F4E8; --amber: #8A5300; --amber-soft: #FFF1DC;
  --font: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 18px; --gut: clamp(16px, 4vw, 36px); --sec: clamp(56px, 8vw, 112px); --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.62 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip }
img, svg { display: block; max-width: 100% }
img { height: auto }
picture { display: contents }
figure { margin: 0 }
a { color: var(--indigo-deep); text-underline-offset: 3px }
a:hover { color: var(--indigo) }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px }
h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; font-weight: 800 }
h1 { font-size: clamp(34px, 5.6vw, 70px); letter-spacing: -.035em }
h2 { font-size: clamp(28px, 3.8vw, 48px); letter-spacing: -.03em }
h3 { font-size: 19px; letter-spacing: -.012em; line-height: 1.3; font-weight: 700 }
p { margin: 0 }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gut) }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100 }
.skip:focus { top: 12px; color: #fff }
.ic { flex: none }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--graphite); max-width: 60ch }
.muted { color: var(--muted) }
.small { font-size: 15px }
.pill { justify-self: start; display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--amber-soft); color: var(--amber) }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--indigo); padding-bottom: 2px }
.link:hover { color: var(--indigo-deep) }
.link .ic { transition: transform .2s var(--ease) }
.link:hover .ic { transform: translateX(3px) }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s } /* solid: a backdrop blur breaks the dropdown and the phone menu panel */
.top.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px -18px rgba(18, 19, 23, .25) }
.top-in { display: flex; align-items: center; gap: 24px; min-height: 68px }
.brand { flex: none; display: flex }
.menu { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0 }
.menu-links { display: flex; align-items: center; gap: 2px; margin-inline: auto }
.menu-end { display: flex; align-items: center; gap: 12px }
.nl, .dd-btn { color: var(--ink); text-decoration: none; font: 600 15px var(--font); padding: 8px 12px; border-radius: 10px; white-space: nowrap; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background-color .15s }
.nl:hover, .dd-btn:hover, .dd.open .dd-btn { background: rgba(18, 19, 23, .05); color: var(--ink) }
.nl[aria-current="page"] { color: var(--indigo-deep) }
.dd { position: relative }
.dd-chev { transition: transform .2s var(--ease); opacity: .6 }
.dd.open .dd-chev { transform: rotate(180deg) }
.dd-panel { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; width: 340px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(18, 19, 23, .35); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s var(--ease), visibility 0s .16s }
.dd-wide .dd-panel { width: 400px }
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s var(--ease) }
.dd-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink) }
.dd-item:hover, .dd-item[aria-current="page"] { background: var(--sand) }
.dd-item b { display: block; font-size: 15px; font-weight: 700 }
.dd-item b em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--indigo-deep); background: rgba(61, 59, 243, .1); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px }
.dd-item small { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: 1px }
.dd-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(61, 59, 243, .08); color: var(--indigo); display: grid; place-items: center }
.m-only { display: none }
/* language switch: two-option segmented control, the current language is not a link */
.lsw { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper) }
.lsw a, .lsw span { min-width: 38px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.3 }
.lsw a { color: var(--muted) }
.lsw a:hover { color: var(--ink); background: var(--sand) }
.lsw span { background: var(--ink); color: #fff }
.menu .btn { color: #fff }
.menu .btn:hover { background: #000; color: #fff }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; align-items: center; justify-content: center; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; cursor: pointer }
.menu-btn .mb-close { display: none }
.top.open .menu-btn .mb-open { display: none }
.top.open .menu-btn .mb-close { display: inline-flex }
/* phones and small tablets: the menu is a full-screen panel with grouped sections */
@media (max-width: 1100px) {
  .js .menu-btn { display: inline-flex }
  .js .menu { position: fixed; left: 0; right: 0; top: 68px; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s }
  .js .top.open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s var(--ease) }
  .js .top.open { background: var(--paper); border-bottom-color: var(--line) }
  html.menu-open { overflow: hidden }
  .menu-links { flex-direction: column; align-items: stretch; margin: 0; gap: 0 }
  .dd { border-bottom: 1px solid var(--line); padding: 10px 0 12px }
  .dd-btn { pointer-events: none; padding: 8px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
  .dd-chev { display: none }
  .dd-panel, .dd-wide .dd-panel { position: static; translate: none; width: auto; padding: 0; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; transition: none }
  #dd-carriers { grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px }
  .dd-car { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff }
  .dd-item { padding: 10px 4px }
  .dd-item b { font-size: 16px }
  .nl { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; justify-content: space-between }
  .nl.m-only { display: flex }
  .menu-end { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 20px; margin-top: auto }
  .lsw { align-self: center }
  .lsw a, .lsw span { min-width: 64px; padding: 9px 16px; font-size: 14px }
  .menu .btn { justify-content: center; min-height: 52px; font-size: 16px }
  html:not(.js) .menu { flex-wrap: wrap }
  html:not(.js) .top-in { flex-wrap: wrap }
}
@media (max-width: 380px) { #dd-carriers { grid-template-columns: 1fr } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 16px var(--font); text-decoration: none; border: 1px solid var(--ink); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .2s var(--ease), box-shadow .2s }
.btn:hover { background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(18, 19, 23, .6) }
.btn:active { transform: none }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px }
.btn-ghost { background: transparent; color: var(--ink); border-color: #C9C6BE }
.btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: none }
.btn-light { background: #fff; color: var(--ink); border-color: #fff }
.btn-light:hover { background: var(--indigo-soft); color: var(--ink) }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }

/* motion: content is visible without JS; with JS it rises in when scrolled into view */
.js [data-r] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease) }
.js [data-r].in { opacity: 1; transform: none }
.h-in { animation: rise .9s var(--ease) both }
.h-in.d1 { animation-delay: .08s } .h-in.d2 { animation-delay: .16s } .h-in.d3 { animation-delay: .24s }
h1.h-in { animation-name: lift }
@keyframes rise { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@keyframes lift { from { transform: translateY(18px) } to { transform: none } }

/* photos */
.ph { position: relative; overflow: hidden; border-radius: var(--r); background: var(--sand) }
.ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 1.2s var(--ease) }
@media (hover: hover) and (pointer: fine) { .ph:hover img { transform: scale(1.03) } }

/* app screens: a plain browser frame, and a phone with a true 390×844 screen */
.frame { border-radius: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(25, 25, 70, .32), 0 2px 6px rgba(18, 19, 23, .05); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease) }
.frame-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #F6F5F2 }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D8D5CE }
.frame img { width: 100% }
.phone { width: 340px; max-width: 100%; display: grid; gap: 14px; justify-items: center; margin-inline: auto }
/* mobile screens as clean cards (no device frame): straight edges, small radius, nothing clipped */
.phone-in { width: 100%; padding: 0; border-radius: 14px; background: #fff; border: 1px solid rgba(17, 19, 23, .1); box-shadow: 0 24px 50px -28px rgba(18, 19, 23, .45), 0 2px 6px rgba(18, 19, 23, .05); overflow: hidden; transition: transform .35s var(--ease) }
.screen { position: relative; aspect-ratio: 390 / 844; border-radius: 13px; overflow: hidden; background: #f3f4f8 linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%) 0 0 / 250% 100%; animation: shimmer 1.6s linear infinite }
.screen:has(img[data-ok]) { animation: none; background: #fff }
@keyframes shimmer { to { background-position: -150% 0 } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none } }
.screen img { width: 100% }
.screen:not(.scroll) img { height: 100%; object-fit: cover; object-position: top }
/* tall buyer screens scroll slowly inside the phone (site.js sets --shift from data-shift); paused on hover */
.js .screen.scroll img { animation: pscroll 22s ease-in-out 1s infinite alternate }
.screen.scroll:hover img { animation-play-state: paused }
@keyframes pscroll { 0%, 10% { transform: none } 90%, 100% { transform: translateY(var(--shift, 0)) } }
.phone figcaption { font-size: 14px; font-weight: 700; color: inherit; opacity: .78; text-align: center }
@media (hover: hover) and (pointer: fine) { .frame:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(25, 25, 70, .38), 0 2px 6px rgba(18, 19, 23, .05) } .phone:hover .phone-in { transform: translateY(-4px) } }

/* desktop screen with a phone twin: the phone replaces it on small screens */
.dual-m { display: none }

/* hero */
.hero { padding-block: clamp(24px, 4vw, 56px) var(--sec) }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center }
.hero-copy { display: grid; gap: 24px; justify-items: start }
.hero-meta { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted) }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); animation: ping 2.4s infinite; flex: none }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(26, 127, 69, .45) } 70% { box-shadow: 0 0 0 10px rgba(26, 127, 69, 0) } 100% { box-shadow: 0 0 0 0 rgba(26, 127, 69, 0) } }
.hero-art { min-width: 0 }
.hero-ph img { aspect-ratio: 4 / 5; object-position: 34% 50% }
.hero-vid video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #e9e9ef }

/* the locker wall: 9 doors, swinging open one after another; the open one has the logo's arrow */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9%; aspect-ratio: 1; perspective: 400px }
.door { border-radius: 22%; background: currentColor; transform-origin: 0 50%; animation: swing 9s var(--ease) infinite; position: relative }
.door::after { content: ""; position: absolute; right: 18%; top: 34%; width: 9%; height: 32%; border-radius: 9px; background: var(--indigo) }
.door.open { background: none; border: 2px solid currentColor; animation: none; display: grid; place-items: center; overflow: visible }
.door.open::after { display: none }
.door.open svg { width: 135%; max-width: none; margin-left: 50% }
.d0 { animation-delay: 0s } .d1 { animation-delay: .9s } .d2 { animation-delay: 1.8s } .d3 { animation-delay: 2.7s } .d4 { animation-delay: 3.6s } .d6 { animation-delay: 4.5s } .d7 { animation-delay: 5.4s } .d8 { animation-delay: 6.3s }
@keyframes swing { 0%, 12%, 100% { transform: rotateY(0) } 5% { transform: rotateY(-62deg) } }

/* sections */
.band { padding-block: var(--sec) }
.band-alt { background: var(--sand) }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px) }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center }
.split.split-start { align-items: start }
.split.wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px) }
.split.wide.rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) }
.split.rev > :first-child { order: 2 }
.split-copy { display: grid; gap: 22px; justify-items: start; min-width: 0 }
.split-art { min-width: 0 }
.col-title { max-width: 20ch; margin-bottom: clamp(28px, 4vw, 44px) }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end }
.pair .ph img { aspect-ratio: 3 / 4 }
.pair-ph { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 20px; align-items: center }
.pair-ph .ph img { aspect-ratio: 3 / 4 }
.note-line { margin-top: 32px; color: var(--graphite); font-size: 16px; max-width: 72ch; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center }

/* two ways to choose a locker */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px) }
.way { display: grid; gap: 28px; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 3vw, 40px) }
.way .phone { width: 300px }
.way-copy { display: grid; gap: 14px; align-content: start }
.way-copy h3, .pro h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em }
.way-sub { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 14px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--amber-soft); color: var(--amber) }
.way-sub.ok { background: var(--mint-soft); color: var(--mint) }
.way .ticks li, .pro .ticks li { font-size: 16px }
.pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-bottom: clamp(32px, 4vw, 48px) }
.pro { display: grid; gap: 14px; align-content: start; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3vw, 36px) }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); width: 100%; max-width: 600px; margin-inline: auto }
.duo .phone { width: 100% }

/* full-bleed photo band with parallax */
.pband { position: relative; min-height: clamp(420px, 70vh, 700px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--night) }
.pband-img { position: absolute; inset: -12% 0; will-change: transform }
.pband-img img { width: 100%; height: 100%; object-fit: cover }
.pband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 24, 0) 30%, rgba(10, 11, 24, .8)) }
.pband-copy { position: relative; z-index: 1; width: 100%; padding-block: clamp(40px, 6vw, 80px) }
.pband-copy > div { max-width: 680px; display: grid; gap: 14px }
.pband-copy p { font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, .88); max-width: 52ch }

/* phones on a dark band */
.mobile-band { background: var(--night); color: #fff }
.mobile-band .lede { color: rgba(255, 255, 255, .78) }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) }
.phones .phone { width: 100%; max-width: 330px }
.phones .phone-in { border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8) }

/* platforms */
.plat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 80px); align-items: center }
.plat > div { display: grid; gap: 20px; justify-items: start }
.plat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.plat-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--muted) }
.plat-list li b { font-size: 19px; color: var(--muted) }
.plat-list li span { font-size: 14px; font-weight: 700 }
.plat-list li.on { border-color: var(--ink); color: var(--mint) }
.plat-list li.on b { color: var(--ink) }
.plat-list li.on span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); margin-right: 8px; vertical-align: 1px }

/* founder */
.founder { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center }
.founder-ph img { aspect-ratio: 4 / 5; object-position: 50% 40% }
.founder-copy { display: grid; gap: 22px; justify-items: start }
.founder-text { display: grid; gap: 14px; color: var(--graphite); font-size: 18px; max-width: 60ch }
.founder-text strong { color: var(--ink) }
.founder-text.big { font-size: clamp(17px, 1.5vw, 19px) }
.fnote { display: flex; gap: 16px; align-items: center; margin-top: 28px; padding: 18px 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); max-width: 640px }
.fnote img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 32% }
.fnote p { font-size: 15px; color: var(--graphite) }
.fnote p > a:last-child { display: block; margin-top: 4px; font-weight: 700; color: var(--ink); text-decoration: none }

/* lists */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--graphite); font-size: 17px }
.ticks li .ic { color: var(--mint); margin-top: 4px }
.mobile-band .ticks li { color: rgba(255, 255, 255, .8) }
.dl { margin: 0; display: grid; width: 100% }
.dl > div { padding: 18px 0; border-top: 1px solid var(--line); display: grid; gap: 6px }
.dl > div:last-child { border-bottom: 1px solid var(--line) }
.dl dt { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 18px }
.dl dt .ic { color: var(--indigo) }
.dl dd { margin: 0 0 0 32px; color: var(--graphite) }
.n { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; flex: none }
.nsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px }
.nsteps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start }
.nsteps h3 { margin-bottom: 4px }
.nsteps p { color: var(--graphite) }
.methods { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) }
.methods li { display: grid; gap: 12px; align-content: start; border-top: 2px solid var(--ink); padding-top: 22px }
.methods li .ic { color: var(--indigo); width: 28px; height: 28px }
.methods p { color: var(--graphite) }
.clinks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px }
.clinks a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid #C9C6BE; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; transition: border-color .15s, background-color .15s }
.clinks a:hover { border-color: var(--ink); background: var(--paper) }

/* sub pages */
.sub-hero { padding-block: clamp(24px, 4vw, 48px) var(--sec) }
.sub-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center }
.sub-copy { display: grid; gap: 20px; justify-items: start; min-width: 0 }
.sub-hero h1 { font-size: clamp(32px, 4.6vw, 58px) }
.sub-art { min-width: 0; display: grid; place-items: center }
.sub-art > * { width: 100% }
.sub-art > .phone { width: 340px }
.sub-ph img { aspect-ratio: 5 / 4 }
.sub-hero.plain { padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line) }
.sub-hero.about .sub-in { align-items: start }
.form-hero .sub-in { align-items: start }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); list-style: none; padding: 0; margin: 0 }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #B6B3AB }
.crumbs a { color: var(--muted) }
.big404 { font-size: clamp(90px, 16vw, 200px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--indigo) }
.small-steps { gap: 16px; margin-top: 8px } .small-steps h3 { font-size: 17px }

/* FAQ */
.qa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: start }
.qa > h2 { position: sticky; top: 110px }
.qa-more { margin-top: 24px }
.faq { display: grid }
.faq details { border-top: 1px solid var(--line) }
.faq details:last-child { border-bottom: 1px solid var(--line) }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 700; font-size: 18px; position: relative; transition: color .15s }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; background: var(--ink) }
.faq summary::before { content: ""; position: absolute; right: 12px; top: calc(50% - 6px); width: 2px; height: 14px; background: var(--ink); transition: transform .25s var(--ease) }
.faq details[open] summary::before { transform: scaleY(0) }
.faq summary:hover { color: var(--indigo-deep) }
.faq details > div { padding: 0 0 22px; color: var(--graphite); max-width: 64ch }

/* tables (.st turns into labelled cards on phones) */
.table-wrap { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); width: 100%; overflow: hidden }
table { border-collapse: collapse; width: 100%; font-size: 16px }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top }
tr:last-child th, tr:last-child td { border-bottom: 0 }
th { font-weight: 700 }
tbody th { width: 28% }
thead th { font-size: 14px; color: var(--muted); background: #F6F5F2 }
td { color: var(--graphite) }
td .yes { color: var(--mint); font-weight: 700 }
.cmp thead th { color: var(--ink); font-size: 15px }
.kv tbody th { width: 38% }

/* call to action */
.cta-band { padding-block: var(--sec) 0 }
.cta { position: relative; overflow: hidden; background: var(--indigo); color: #fff; border-radius: 28px; padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center }
.doors-cta { width: 104px; color: rgba(255, 255, 255, .95) }
.doors-cta .door::after { background: var(--indigo) }
.cta-copy { display: grid; gap: 16px; justify-items: start }
.cta-copy p { color: #E3E3FF; max-width: 56ch }

/* prose (legal) */
.prose { max-width: 760px; display: grid; gap: 16px; color: var(--graphite) }
.prose h2 { font-size: 26px; color: var(--ink); margin-top: 20px }
.prose h3 { color: var(--ink); margin-top: 6px }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 6px }
.prose b, .prose strong { color: var(--ink) }

/* form */
.form { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 4vw, 36px); display: grid; gap: 18px; box-shadow: 0 30px 60px -40px rgba(18, 19, 23, .35) }
.field { display: grid; gap: 7px }
.field label, .field legend { font-weight: 700; font-size: 15px }
.field input[type=email], .field input[type=text], .field textarea, .field select { width: 100%; font: 500 16px var(--font); color: var(--ink); background: #fff; border: 1px solid #C9C6BE; border-radius: 12px; padding: 12px 14px; min-height: 50px }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%), linear-gradient(135deg, var(--graphite) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px }
.field textarea { min-height: 110px; resize: vertical }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft) }
.field .hint { font-size: 14px; color: var(--muted) }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0 }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.checks label { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 15px; cursor: pointer; background: #fff }
.checks input { width: 18px; height: 18px; accent-color: var(--ink) }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.form-msg { border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 15px }
.form-msg.ok { background: var(--mint-soft); color: var(--mint) }
.form-msg.err { background: #FDECEA; color: #B42318 }

/* guide links + guide index */
.glinks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px }
.glinks a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 20px 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .2s var(--ease) }
.glinks a:hover { border-color: var(--ink); transform: translateY(-2px); color: var(--ink) }
.glinks b { font-size: 17px; grid-column: 1 }
.g-time { font-size: 13px; color: var(--muted); font-weight: 600; grid-column: 1 }
.g-go { grid-column: 2; grid-row: 1 / span 2; color: var(--indigo) }
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px }
.gcard a { display: grid; gap: 10px; color: var(--ink); text-decoration: none }
.gcard a:hover h2 { color: var(--indigo-deep) }
.gthumb { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #F6F5F2; aspect-ratio: 16 / 10 }
.gthumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 1s var(--ease) }
.gcard.gphone .gthumb img { object-position: top center }
.gcard a:hover .gthumb img { transform: scale(1.03) }
.gcard h2 { font-size: 21px; letter-spacing: -.015em; transition: color .15s }
.gcard p { color: var(--graphite); font-size: 15px }
.pill-blue { display: inline-flex; align-items: center; gap: 6px; background: var(--indigo-soft); color: var(--indigo-deep) }
.gsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 64px) }
.gstep { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; align-items: start; max-width: 760px }
.gstep.has-fig { grid-template-columns: 36px minmax(0, .8fr) minmax(0, 1.2fr); max-width: none; gap: 18px clamp(24px, 4vw, 56px) }
.gs-text { display: grid; gap: 10px }
.gs-text h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em }
.gs-text p { color: var(--graphite) }
.gs-fig { min-width: 0; display: grid; place-items: center }
.gs-fig > .frame, .gs-fig > .dual, .dual { width: 100% }

/* FAQ by topic */
.fq-in { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start }
.fq-index { position: sticky; top: 100px }
.fq-index ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.fq-index a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 700 }
.fq-index a:hover { background: var(--sand) }
.fq-index a span { color: var(--muted); font-weight: 600 }
.fq-groups { display: grid; gap: clamp(40px, 5vw, 64px) }
.fq-group { display: grid; gap: 14px; scroll-margin-top: 96px }
.fq-group h2 { font-size: clamp(24px, 2.6vw, 32px) }
.fq-groups .fnote { margin-top: 0 }

/* footer */
.foot { background: var(--ink); color: #C9CBD3; margin-top: var(--sec); padding-block: 64px 32px }
.foot-in { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px }
.foot h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 14px }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.foot a { color: #C9CBD3; text-decoration: none; font-size: 15px }
.foot a:hover { color: #fff; text-decoration: underline }
.foot-brand { display: grid; gap: 14px; align-content: start }
.foot-brand p { font-size: 15px; max-width: 36ch }
.foot-brand .plat { color: #fff; font-weight: 600 }
.fine { grid-column: 1 / -1; border-top: 1px solid #2A2D35; padding-top: 22px; font-size: 13px; color: #8E929C }

/* tablet */
@media (max-width: 960px) {
  .hero-in, .sub-in, .split, .split.wide, .split.wide.rev, .plat, .qa, .ways, .pros, .founder, .fq-in { grid-template-columns: minmax(0, 1fr) }
  .split.rev > :first-child { order: 0 }
  .qa > h2 { position: static }
  .hero-ph img, .hero-vid video { aspect-ratio: 4 / 3 }
  .methods { grid-template-columns: minmax(0, 1fr) }
  .founder-ph { max-width: 420px }
  .fq-index { position: static }
  .fq-index ul { display: flex; flex-wrap: wrap; gap: 8px }
  .fq-index a { border: 1px solid var(--line); background: var(--paper); padding: 8px 14px }
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .gstep.has-fig { grid-template-columns: 36px minmax(0, 1fr) }
  .gstep.has-fig .gs-fig { grid-column: 2 }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .foot-brand { grid-column: 1 / -1 }
  .phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
}

/* phones: one column, 16px gutter, images inside the gutter, phones at ~85% of the screen width */
@media (max-width: 620px) {
  body { font-size: 16px }
  h1, .sub-hero h1 { font-size: clamp(32px, 9vw, 40px) }
  h2 { font-size: clamp(26px, 7.4vw, 32px) }
  .lede { font-size: 17px }
  .actions { width: 100% }
  .actions .btn { flex: 1 1 100% }
  .split-copy > .btn { width: 100% }
  .sec-head { margin-bottom: 28px }
  .split { gap: 32px }
  .hero-in, .sub-in { gap: 32px }
  .hero-ph img, .hero-vid video { aspect-ratio: 4 / 3.4 }
  .frame-bar { display: none }
  .dual-d { display: none }
  .dual-m { display: block }
  .frame { border-radius: 12px }
  .phone, .sub-art > .phone { width: min(85vw, 340px) }
  .screen { border-radius: 11px }
  .phone-in { border-radius: 12px }
  .way { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 24px; justify-items: center; gap: 24px }
  .way .phone { width: min(78vw, 320px) }
  .way-copy { justify-self: stretch }
  .pro { padding: 22px 18px }
  .duo { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .duo .phone { width: min(85vw, 340px) }
  .pair-ph { grid-template-columns: minmax(0, 1fr) }
  .pair-ph .pair-photo { display: none }
  .pair { gap: 10px }
  .phones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 16px; scrollbar-width: none }
  .phones::-webkit-scrollbar { display: none }
  .phones .phone { flex: none; width: 78vw; max-width: 320px; scroll-snap-align: center }
  .note-line { margin-top: 24px }
  .pband { min-height: 400px }
  .founder-ph { max-width: none }
  .about .sub-art { order: -1 }
  .founder-ph img { aspect-ratio: 1; object-position: 50% 30% }
  .founder-text { font-size: 17px }
  .fnote { align-items: flex-start; padding: 16px }
  .fnote img { width: 48px; height: 48px }
  .cta { grid-template-columns: minmax(0, 1fr); border-radius: 22px; padding: 28px 20px }
  .doors-cta { width: 76px }
  .gcards { grid-template-columns: minmax(0, 1fr) }
  .gstep, .gstep.has-fig { grid-template-columns: minmax(0, 1fr); gap: 14px }
  .gstep.has-fig .gs-fig { grid-column: 1 }
  .faq summary { font-size: 17px; padding-block: 18px }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px }
  .foot { padding-block: 48px 28px }
  /* tables → labelled cards */
  .st { border: 0; background: none; border-radius: 0; overflow: visible }
  .st table, .st tbody, .st tr, .st th, .st td { display: block; width: auto }
  .st thead { display: none }
  .st tr { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px }
  .st tbody th { padding: 0 0 8px; border: 0; font-size: 17px; width: auto }
  .st td { padding: 8px 0; border: 0; border-top: 1px solid var(--line); display: grid; gap: 2px }
  .st td::before { content: attr(data-l); font-size: 13px; font-weight: 700; color: var(--muted) }
  .kv tbody th { width: 44% }
  .kv th, .kv td { padding: 12px 14px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .js [data-r] { opacity: 1; transform: none }
}

.credit { margin: 8px 2px 0; font-size: 12px; color: var(--muted) }
.credit a { color: inherit }