/* Legal pages: terms and conditions, privacy policy. Slim chalk opener, then the text beside a sticky index. */

/* ---------- opener ---------- */
.lop { position: relative; background: var(--chalk); overflow: clip; padding: calc(var(--tb) + var(--hh) + clamp(24px, 4vh, 48px)) 0 clamp(30px, 5vh, 56px); min-height: calc(var(--tb) + var(--hh) + 36svh); display: flex; align-items: center; }
.lop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.lop__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 70px); align-items: end; width: min(100% - 2 * var(--gutter), var(--maxw)); }
.lop__copy { display: grid; gap: 18px; }
.lop__title { font: 800 clamp(2.5rem, 5vw, 5rem)/.98 var(--display); font-stretch: 74%; letter-spacing: -.01em; color: var(--ink); }
.lop__lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--text); }
.lop__count { display: grid; justify-items: end; gap: 6px; text-align: right; }
.lop__count span { font: 800 clamp(5rem, 11vw, 10rem)/.8 var(--display); font-stretch: 74%; color: transparent; -webkit-text-stroke: 2px var(--brand); font-variant-numeric: tabular-nums; }
.motion .lop__count span { background: linear-gradient(105deg, transparent 35%, rgba(108, 196, 63, .55) 50%, transparent 65%) 0 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: lop-shine 4.5s ease-in-out infinite; }
@keyframes lop-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
.lop__count small { font-weight: 700; font-size: .95rem; color: var(--trail); }

/* ---------- the text ---------- */
.ldoc { position: relative; background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%231f6b53' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 60c80-40 160 30 240 0s150-60 230-20 110 40 170 10'/%3E%3Cpath d='M-20 160c80-30 170 40 250 8s150-50 220-12 110 40 170 14'/%3E%3Cpath d='M-20 270c90-35 170 40 250 6s150-55 230-15 100 40 160 12'/%3E%3Cpath d='M-20 380c90-40 160 35 250 4s150-55 220-15 110 45 170 12'/%3E%3C/g%3E%3C/svg%3E"); background-size: 1200px auto; background-position: 0 0; padding: clamp(56px, 6vw, 96px) 0 clamp(80px, 8vw, 130px); overflow: clip; }
.ldoc__grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.lidx { position: sticky; top: calc(var(--tb) + var(--hh) + 16px); }
.lidx__in { display: grid; gap: 16px; padding: 22px; border-radius: 22px; background: var(--chalk); box-shadow: inset 0 0 0 1px var(--line); }
.lidx__h { font: 800 1.2rem/1.1 var(--display); font-stretch: 85%; color: var(--ink); }
.lidx__chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lidx__chips a { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--white); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); transition: background .35s, color .35s, box-shadow .35s, transform .35s var(--ease); }
.lidx__chips a:hover { background: var(--ink); color: var(--white); box-shadow: none; }
.lidx__chips a.is-read { background: rgba(80, 170, 38, .14); box-shadow: inset 0 0 0 1px rgba(80, 170, 38, .35); }
.lidx__chips a.is-on { background: var(--brand); color: var(--ink); box-shadow: none; transform: scale(1.08); }
.lidx__list { display: grid; gap: 2px; }
.lidx__list a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .98rem; line-height: 1.25; transition: background .35s, color .35s; }
.lidx__list a span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font-weight: 800; font-size: .85rem; transition: background .35s; }
.lidx__list a:hover { background: var(--white); }
.lidx__list a.is-on { background: var(--ink); color: var(--white); }
.lidx__list a.is-on span { background: var(--brand); color: var(--ink); box-shadow: none; }
.lidx__rail { height: 4px; border-radius: 4px; background: var(--chalk-2); overflow: hidden; }
.lidx__rail i { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .lidx__rail { display: none; }
.lidx__now { font-weight: 600; color: var(--muted); font-size: .95rem; }
.lidx__now strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.ltext { min-width: 0; max-width: 120ch; }
.ltext__title span { display: block; }
.ltext__title { font: 800 clamp(1.7rem, 2.6vw, 2.5rem)/1.08 var(--display); font-stretch: 80%; color: var(--ink); margin-bottom: clamp(24px, 3vw, 40px); }
.clauses { display: grid; }
.clause { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--tb) + var(--hh) + 20px); }
.clause:last-child { border-bottom: 1px solid var(--line); }
.clause__n { font: 800 2.2rem/1 var(--display); font-stretch: 78%; color: var(--brand); font-variant-numeric: tabular-nums; transition: color .4s; }
.clause.is-on .clause__n { color: var(--trail); }
.clause p { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }

.lpart { padding: 26px 0 30px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--tb) + var(--hh) + 20px); display: grid; gap: 14px; }
.lpart:first-child { border-top: 0; padding-top: 0; }
.lpart__h { display: flex; align-items: baseline; gap: 16px; font: 800 clamp(1.6rem, 2.3vw, 2.2rem)/1.08 var(--display); font-stretch: 80%; color: var(--ink); }
.lpart__h span { flex: none; color: var(--brand); font-variant-numeric: tabular-nums; }
.lpart p, .lpart li { font-size: 1.0625rem; line-height: 1.7; }
.lpart a { color: var(--trail); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lpart__list { display: grid; gap: 8px; }
.lpart__list li { position: relative; padding-left: 28px; }
.lpart__list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }

.lask { margin-top: clamp(30px, 4vw, 50px); padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--ink); color: var(--white); display: grid; gap: 18px; }
.lask__h { font: 800 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--display); font-stretch: 82%; }
.lask__phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lask__phones a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); color: var(--white); text-decoration: none; transition: background .3s; }
.lask__phones a:hover { background: var(--trail); }
.lask__phones span { font-size: .9rem; opacity: .78; }
.lask__phones strong { font: 800 1.35rem/1.1 var(--display); font-stretch: 85%; white-space: nowrap; }

/* reading progress */
.lprog { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 120; pointer-events: none; }
.lprog i { display: block; height: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .lprog { display: none; }

@media (max-width: 1180px) {
  .lask__phones { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .ldoc__grid { grid-template-columns: minmax(0, 1fr); }
  .lidx { position: static; }
  .lidx__chips { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .lidx__rail, .lidx__now { display: none; }
  .lop__grid { grid-template-columns: minmax(0, 1fr); }
  .lop__count { justify-items: start; text-align: left; }
  .lop__count span { font-size: clamp(4rem, 18vw, 6rem); }
}
@media (max-width: 720px) {
  .clause { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .clause__n { font-size: 1.7rem; }
  .lop { min-height: 0; }
  .lop__count { grid-template-columns: auto auto; align-items: end; gap: 12px; }
  .lop__count span { font-size: 4.2rem; -webkit-text-stroke-width: 1.5px; }
  .lop__count small { padding-bottom: 6px; }
  .lidx__in { padding: 16px; gap: 10px; }
  .lidx__chips { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
}

/* =====================================================================
   404 page (404.php shares this file and legal.js)
   ===================================================================== */
.nf { position: relative; background: var(--ink); color: rgba(255, 255, 255, .86); overflow: clip; padding: calc(var(--tb) + var(--hh) + clamp(28px, 5vh, 60px)) 0 clamp(40px, 6vh, 70px); min-height: calc(var(--tb) + var(--hh) + 50svh); display: flex; align-items: center; }
.nf__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 60% at 80% 30%, rgba(31, 107, 83, .8), transparent 65%), radial-gradient(ellipse 40% 50% at 0% 100%, rgba(210, 69, 43, .14), transparent 60%); background-repeat: no-repeat; background-size: 150% 150%, 150% 150%; background-position: 100% 0%, 0% 100%; }
.nf__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: clamp(30px, 5vw, 90px); align-items: center; }
.nf__copy { display: grid; gap: 22px; justify-items: start; }
.nf__title { font: 800 clamp(2.6rem, 5vw, 5rem)/.98 var(--display); font-stretch: 74%; letter-spacing: -.01em; color: var(--white); }
.nf__lede { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.nf__links { display: flex; flex-wrap: wrap; gap: 10px; }
.nf__links a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; color: var(--white); font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); transition: background .3s, color .3s, box-shadow .3s; }
.nf__links a:hover { background: var(--white); color: var(--ink); box-shadow: none; }
.nf__links a.is-main { background: var(--brand); color: var(--ink); box-shadow: none; }
.nf__links a.is-main:hover { background: var(--brand-hi); }
.nf__phones { display: flex; flex-wrap: wrap; gap: 10px 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); width: 100%; }
.nf__phones a { display: grid; gap: 2px; min-height: 44px; color: var(--white); text-decoration: none; }
.nf__phones span { font-size: .9rem; opacity: .75; }
.nf__phones strong { font: 800 1.45rem/1.1 var(--display); font-stretch: 85%; white-space: nowrap; transition: color .3s; }
.nf__phones a:hover strong { color: var(--brand-hi); }
.nf__media { position: relative; width: min(34vw, calc(min(56svh, 540px) * .85)); }
.nf__ph { aspect-ratio: 4 / 4.7; border-radius: 60px 60px 12px 12px; overflow: clip; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -40px rgba(0, 0, 0, .7); }
.nf__ph img { width: 100%; height: 100%; object-fit: cover; }
/* the lock that never turns to Vacant (its own element, so the site's lock flip never touches it) */
.elock { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: var(--white); font: 800 .95rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.elock__word { display: inline-block; }
.elock::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(210, 69, 43, .3); }
.motion .elock::before { animation: elock-pulse 1.8s ease-in-out infinite; }
@keyframes elock-pulse { 50% { box-shadow: 0 0 0 8px rgba(210, 69, 43, .08); } }
.elock--door { position: absolute; right: 22px; top: 40%; background: rgba(12, 42, 32, .9); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); }
.nf2 { position: relative; background: var(--chalk); padding: clamp(70px, 7vw, 110px) 0; overflow: clip; }
.nf2 .wrap { position: relative; }
.nf2 .h2 { margin-bottom: clamp(28px, 3.4vw, 48px); }
@media (max-width: 960px) {
  .nf__grid { grid-template-columns: minmax(0, 1fr); }
  .nf__media { display: none; }
}
@media (max-width: 720px) {
  .nf__links a { padding: 0 16px; }
}