/* ============================================================
   LeaseLayer — shared design system
   Apple.com-style, dark tone. SF Pro system stack, near-black,
   single blue accent. Single source of truth for every page.
   ============================================================ */

:root{
  --bg:#000000; --bg-2:#08090c; --bg-3:#101114;
  --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#6e6e73;
  --accent:#2997ff; --btn:#0071e3; --btn-h:#0077ed;
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.035); --card-h:rgba(255,255,255,.06);
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Helvetica","Arial",sans-serif;
  --max:1140px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  font-family:var(--sf); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; line-height:1.5;
}
a{color:var(--accent); text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(41,151,255,.30); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

/* ---------- layout primitives ---------- */
.container{max-width:var(--max); margin:0 auto; padding:0 clamp(22px,5vw,40px)}
.container--wide{max-width:1320px; margin:0 auto; padding:0 clamp(22px,5vw,40px)}
.section{padding:clamp(72px,12vh,140px) 0; position:relative}
.section--tight{padding:clamp(48px,8vh,90px) 0}
.divider{height:1px; background:var(--hair-2); border:0}
.center{text-align:center}
.measure{max-width:62ch}
.measure--narrow{max-width:48ch}

/* ---------- type scale (Apple rhythm) ---------- */
.kicker{
  font-size:clamp(15px,1.3vw,19px); font-weight:600; color:var(--accent);
  letter-spacing:-.005em; margin-bottom:14px;
}
.display{
  font-weight:600; font-size:clamp(2.5rem,6.4vw,4.6rem); line-height:1.06;
  letter-spacing:-.022em;
}
h2,.h2{
  font-weight:600; font-size:clamp(1.9rem,4vw,3rem); line-height:1.1;
  letter-spacing:-.02em;
}
h3,.h3{
  font-weight:600; font-size:clamp(1.18rem,1.7vw,1.45rem); line-height:1.2;
  letter-spacing:-.012em;
}
.lede{
  font-size:clamp(1.1rem,1.7vw,1.5rem); font-weight:400; color:var(--text-2);
  line-height:1.45; letter-spacing:-.003em;
}
.body{font-size:clamp(1rem,1.15vw,1.16rem); color:var(--text-2); line-height:1.6}
.body strong{color:var(--text); font-weight:600}
.eyebrow-sm{font-size:13px; color:var(--text-3); letter-spacing:.02em}

/* ---------- navigation ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  height:52px; padding:0 clamp(20px,4vw,44px);
  background:rgba(0,0,0,.55); backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--hair-2);
}
.nav__brand{
  font-size:18px; font-weight:600; letter-spacing:-.012em; color:var(--text);
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
}
.nav__mark{width:22px; height:22px; display:block; flex:none}
.nav__links{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); list-style:none}
.nav__links a{color:var(--text-2); font-size:14px; transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--text)}
.nav__cta{color:var(--accent)!important}
.nav__toggle{
  display:none; background:none; border:0; color:var(--text); cursor:pointer;
  width:34px; height:34px; padding:7px; border-radius:8px;
}
.nav__toggle:hover{background:rgba(255,255,255,.08)}
.nav__toggle svg{width:20px; height:20px; display:block}

@media (max-width:780px){
  .nav__toggle{display:block}
  .nav__links{
    position:absolute; top:52px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; padding:8px 0 14px;
    background:rgba(8,9,12,.96); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--hair);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav__links.open{transform:none; opacity:1; pointer-events:auto}
  .nav__links li{padding:0 clamp(20px,4vw,44px)}
  .nav__links a{display:block; padding:13px 0; font-size:16px; border-bottom:1px solid var(--hair-2)}
  .nav__links li:last-child a{border-bottom:0}
}

/* ---------- buttons ---------- */
.btn-row{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center}
.center .btn-row{justify-content:center}
.pill{
  background:var(--btn); color:#fff!important; font-size:17px; font-weight:400;
  padding:12px 23px; border-radius:980px; display:inline-block;
  transition:background .2s ease, transform .2s ease;
}
.pill:hover{background:var(--btn-h); transform:translateY(-1px)}
.pill--ghost{background:transparent; color:var(--accent)!important; box-shadow:inset 0 0 0 1px var(--hair)}
.pill--ghost:hover{background:rgba(255,255,255,.05)}
.link-arrow{color:var(--accent); font-size:17px; display:inline-flex; align-items:center; gap:5px}
.link-arrow .chev{transition:transform .2s ease}
.link-arrow:hover{text-decoration:underline}
.link-arrow:hover .chev{transform:translateX(3px)}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:calc(100vh - 52px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(40px,9vh,90px) clamp(22px,5vw,40px);
  overflow:hidden;
}
#field{position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:0; animation:fieldin 1.7s ease .1s forwards}
@keyframes fieldin{to{opacity:1}}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(56% 48% at 50% 46%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.18) 46%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 24%, transparent 60%, rgba(0,0,0,.55) 100%);
}
.hero__inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; max-width:60ch}
.hero h1{font-weight:600; font-size:clamp(2.6rem,6.6vw,5.1rem); line-height:1.06; letter-spacing:-.022em; max-width:16ch}

/* page header (inner pages — clean, subtle static depth) */
.page-head{
  position:relative; padding:clamp(70px,13vh,150px) 0 clamp(40px,7vh,72px);
  border-bottom:1px solid var(--hair-2);
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(41,151,255,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.page-head .container{position:relative; z-index:1}

/* ---------- cards & grids ---------- */
.grid{display:grid; gap:clamp(14px,1.6vw,20px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){ .grid--3,.grid--5{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid--2,.grid--3,.grid--5{grid-template-columns:1fr} }

.card{
  background:var(--card); border:1px solid var(--hair); border-radius:20px;
  padding:clamp(22px,2.4vw,30px); transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover{background:var(--card-h); transform:translateY(-3px); border-color:rgba(255,255,255,.16)}
.card__tag{font-size:12px; font-weight:600; color:var(--accent); letter-spacing:.04em; text-transform:uppercase}
.card h3{margin:14px 0 9px}
.card p{font-size:.97rem; color:var(--text-2); line-height:1.55}

/* numbered / definition list */
.deflist{display:grid; gap:clamp(20px,3vh,38px)}
.defrow{display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:clamp(16px,3vw,48px); align-items:start}
.defrow__k{font-weight:600; font-size:clamp(1.15rem,1.7vw,1.5rem); letter-spacing:-.015em}
.defrow__k .idx{display:block; font-size:13px; font-weight:600; color:var(--accent); margin-bottom:6px; letter-spacing:.04em}
.defrow__v{color:var(--text-2); font-size:clamp(1rem,1.1vw,1.1rem); line-height:1.62}
.defrow__v strong{color:var(--text); font-weight:600}
@media (max-width:760px){ .defrow{grid-template-columns:1fr; gap:8px} }

/* callout / quote */
.callout{
  border-left:3px solid var(--accent); padding:6px 0 6px clamp(18px,3vw,28px);
  font-size:clamp(1.2rem,2.3vw,1.8rem); font-weight:600; letter-spacing:-.015em; line-height:1.28;
}
.note{
  background:var(--card); border:1px solid var(--hair); border-radius:16px;
  padding:clamp(18px,2.2vw,26px); color:var(--text-2); font-size:.97rem; line-height:1.6;
}
.note strong{color:var(--text)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hair-2); padding:clamp(40px,7vh,72px) 0 clamp(30px,5vh,52px); background:var(--bg-2)}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
.footer__brand{font-size:18px; font-weight:600; letter-spacing:-.012em}
.footer__tag{margin-top:10px; color:var(--text-3); font-size:13px; max-width:34ch; line-height:1.5}
.footer h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-bottom:14px; font-weight:600}
.footer ul{list-style:none; display:grid; gap:10px}
.footer ul a{color:var(--text-2); font-size:14px}
.footer ul a:hover{color:var(--text)}
.footer__legal{margin-top:clamp(32px,6vh,52px); padding-top:22px; border-top:1px solid var(--hair-2);
  color:var(--text-3); font-size:12px; line-height:1.6; display:grid; gap:6px}
@media (max-width:760px){ .footer__grid{grid-template-columns:1fr; gap:30px} }

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.28,.11,.32,1), transform .7s cubic-bezier(.28,.11,.32,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ---------- figures / schematic diagrams ---------- */
.figure{
  background:var(--card); border:1px solid var(--hair); border-radius:22px;
  padding:clamp(16px,2.4vw,34px);
  max-width:1240px; margin-inline:auto;
}
.figure{position:relative}
.figure svg{display:block; width:100%; height:auto; overflow:visible}
.figure figcaption{
  margin-top:20px; color:var(--text-3); font-size:13px; line-height:1.55;
  text-align:center; letter-spacing:-.002em;
}
.figure--plain{background:transparent; border:0; padding:0}
/* break out of a narrow `.container` so a diagram can render bigger
   without restructuring the surrounding HTML. No transform — keeps
   the element in normal flow so capture pipelines render it cleanly. */
.figure--wide{
  position:relative; max-width:none;
  width:min(1320px, calc(100vw - clamp(28px,6vw,64px)));
  margin-left:auto; margin-right:auto;
  left:calc(50% - min(660px, 50vw - clamp(14px,3vw,32px)));
}

/* On phones a wide schematic scaled to ~340px makes its text unreadable.
   Keep the diagram at a legible intrinsic size and let it scroll sideways. */
@media (max-width:820px){
  .figure{
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    padding:16px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
  }
  .figure > svg{min-width:760px}
  .figure > figcaption{min-width:760px}
  .figure::-webkit-scrollbar{height:6px}
  .figure::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20); border-radius:3px}
  .figure::-webkit-scrollbar-track{background:transparent}
  .figure::after{
    content:"↔ scroll"; position:sticky; left:100%; bottom:0; float:right;
    font-size:11px; color:var(--text-3); padding:4px 2px 0; white-space:nowrap;
  }
}
@media (max-width:540px){
  .figure > svg, .figure > figcaption{min-width:680px}
}
@media (max-width:600px){
  .section{padding:clamp(48px,11vh,90px) 0}
  .section--tight{padding:40px 0}
  .page-head{padding:62px 0 38px}
  .hero h1{font-size:clamp(2.1rem,8.6vw,3rem)}
  .display{font-size:clamp(2rem,8vw,2.8rem)}
  .lede{font-size:clamp(1.02rem,4.4vw,1.2rem)}
}

/* svg vocabulary — themed by the same tokens as the rest of the site */
.dg-n{fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.16); stroke-width:1}
.dg-n--on{fill:rgba(41,151,255,.10); stroke:rgba(41,151,255,.42); stroke-width:1}
.dg-n--accent{fill:rgba(41,151,255,.16); stroke:rgba(41,151,255,.62); stroke-width:1.2}
.dg-n--ghost{fill:none; stroke:rgba(255,255,255,.14); stroke-width:1; stroke-dasharray:5 5}
.dg-title{fill:var(--text); font:600 17px var(--sf); letter-spacing:-.01em}
.dg-title--sm{fill:var(--text); font:600 14px var(--sf)}
.dg-sub{fill:var(--text-2); font:400 12.5px var(--sf)}
.dg-tag{fill:var(--accent); font:600 10.5px var(--sf); letter-spacing:.10em}
.dg-tag--mute{fill:var(--text-3); font:600 10.5px var(--sf); letter-spacing:.10em}
.dg-line{stroke:rgba(255,255,255,.30); stroke-width:1.4; fill:none}
.dg-line--accent{stroke:var(--accent); stroke-width:1.7; fill:none}
.dg-line--ghost{stroke:rgba(255,255,255,.16); stroke-width:1.2; fill:none; stroke-dasharray:4 5}
.dg-elabel{fill:var(--text-3); font:500 12px var(--sf)}
.dg-divider{stroke:rgba(255,255,255,.14); stroke-width:1; stroke-dasharray:3 6}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #field{animation:none; opacity:1}
  .reveal{opacity:1; transform:none; transition:none}
  .pill,.card,.link-arrow .chev{transition:none}
}