/* Homepage (index.html). Tokens and shared components: styles.css. */

/* ---------------------------------------------------------------- hero + split entry */
.hero { padding-block: clamp(2.25rem, 1rem + 4vw, 4rem) clamp(3rem, 2rem + 4vw, 5.5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) var(--s-7); align-items: end; }
.hero__kicker { grid-column: 1 / -1; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); font-weight: 650; font-stretch: 106%; color: var(--text-2); max-width: 44ch; margin-bottom: calc(-1 * var(--s-2)); }
.hero__h1 { grid-column: 1 / -1; max-width: 20ch; }
.hero__sub { align-self: start; padding-top: var(--s-2); }
.hero__sub .lead { max-width: 34ch; }
.hero__market { margin-top: var(--s-4); max-width: 40ch; font-size: .9375rem; color: var(--text-muted); }
.hero__market a { color: var(--text-2); font-weight: 600; }
.hero__actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.hero__op { margin: 0; font-size: 1rem; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; }
.hero__op a { color: var(--text); }
/* Under 900 px the doors sit right below the lead, so the hero actions would repeat them. */
@media (max-width: 900px) { .hero__actions { display: none; } }
.hero__fig { margin: 0; justify-self: end; width: min(100%, 420px); }
.hero__fig figcaption { margin-top: var(--s-3); font-size: .875rem; color: var(--text-muted); max-width: 44ch; }
.doors { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__kicker, .hero__h1 { order: 0; }
  .hero__sub { order: 1; }
  .hero__fig { order: 3; justify-self: start; }
  .doors { order: 2; grid-template-columns: minmax(0, 1fr); }
}

.door {
  --arrow-x: 0;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--s-3); min-height: 196px; padding: clamp(1.25rem, .9rem + 1.4vw, 2rem);
  border-radius: var(--r-doc); text-decoration: none; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); background: var(--bg);
  transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-std), background-color var(--t-hover);
}
.door:hover { color: var(--text); transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--text), var(--stack); --arrow-x: 5px; text-decoration: none; }
.door:active { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .door:hover, .door:active { transform: none; } }
.door__who { font-size: .875rem; font-weight: 650; color: var(--text-muted); }
.door > span { min-width: 0; overflow-wrap: break-word; }
.door__title { overflow-wrap: anywhere; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-stretch: 120%; font-weight: 820; line-height: 1; letter-spacing: -.025em; }
.door__line { font-size: 1.0625rem; line-height: 1.45; max-width: 36ch; }
.door__go { display: inline-flex; align-items: center; gap: .55rem; font-weight: 720; font-stretch: 104%; align-self: end; }
.door--host { background: var(--btn-bg); color: var(--btn-text); box-shadow: none; }
.door--host:hover { background: var(--btn-bg-hover); color: var(--btn-text); box-shadow: var(--stack); }
.door--host .door__who { color: inherit; opacity: .85; }
@media (max-width: 900px) { .door { min-height: 0; } }

/* ---------------------------------------------------------------- promise (spec sheet beside a heading) */
.promise { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) var(--s-8); }
.promise__head { position: sticky; top: 104px; align-self: start; }
.promise__head p { margin-top: var(--s-4); color: var(--text-2); max-width: 34ch; }
.promise__head .link-arrow { margin-top: var(--s-4); }
/* The homepage keeps a three-line summary; the full terms sheet belongs to /host. */
.brief { border-top: 2px solid var(--text); }
.brief li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-2) var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.brief b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-stretch: 116%; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; color: var(--text); }
.brief span { color: var(--text-2); max-width: 52ch; }
.brief__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin-top: var(--s-4); }
@media (max-width: 767px) { .brief li { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) 0; } }
@media (max-width: 900px) { .promise { grid-template-columns: minmax(0, 1fr); } .promise__head { position: static; } }

/* ---------------------------------------------------------------- data (the ink block) */
.data__intro { max-width: 60ch; }
.data__intro p { margin-top: var(--s-4); color: var(--ink-block-text); opacity: .9; }
.data__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); margin-top: var(--s-8); align-items: start; }
@media (max-width: 900px) { .data__grid { grid-template-columns: minmax(0, 1fr); } }

.carto { margin: 0; }
.carto__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 6px; max-width: 440px; }
.tile { aspect-ratio: 1; border-radius: var(--r-doc); display: flex; flex-direction: column; justify-content: space-between; padding: .55rem .6rem; font-size: .75rem; line-height: 1.15; font-weight: 600; text-align: left; border: 1px dashed rgb(174 218 224 / .42); color: var(--ink-block-muted); background: transparent; }
.tile b { font-size: clamp(.95rem, .7rem + .9vw, 1.35rem); font-stretch: 118%; font-weight: 820; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Counted cities are filled (the key says so); the one shown is the light fill. */
button.tile { cursor: pointer; border: 1.5px solid var(--teal-400); color: #F4F8F8; background: rgb(79 167 180 / .34); transition: background-color var(--t-hover), transform var(--t-press), border-color var(--t-hover); font: inherit; font-size: .75rem; font-weight: 650; }
button.tile:hover { background: rgb(79 167 180 / .5); }
button.tile:active { transform: scale(.98); }
button.tile[aria-pressed="true"] { background: var(--teal-300); border-color: var(--teal-300); color: var(--teal-950); }
.carto__key { margin-top: var(--s-4); font-size: .8125rem; color: var(--ink-block-muted); max-width: 44ch; }
.t-wv { grid-area: 1 / 1; } .t-nv { grid-area: 1 / 2; } .t-van { grid-area: 2 / 1; } .t-bby { grid-area: 2 / 2; } .t-coq { grid-area: 2 / 3; }
.t-rmd { grid-area: 3 / 1; } .t-nw { grid-area: 3 / 2; } .t-sry { grid-area: 3 / 3; } .t-lan { grid-area: 3 / 4; } .t-dlt { grid-area: 4 / 2; }

.city { border-top: 2px solid var(--ink-block-text); padding-top: var(--s-5); }
.city[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .js .city.is-swap { animation: city-in 320ms var(--ease-out); } }
@keyframes city-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.city__name { font-size: 1rem; font-weight: 700; color: var(--teal-200); }
.city .fig__n { margin-top: var(--s-3); }
.bars { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: baseline; }
.bar__label { font-size: .9688rem; }
.bar__label a { color: var(--ink-block-text); display: inline-flex; align-items: center; min-height: 44px; }
.bar { row-gap: 0; }
.bar__n { font-weight: 780; font-stretch: 112%; font-variant-numeric: tabular-nums; font-size: 1.125rem; }
.bar__track { grid-column: 1 / -1; height: 10px; }
.bar__fill { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--teal-300); border-radius: 0 2px 2px 0; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .city .bar__fill { transform: scaleX(0); transition: transform 800ms var(--ease-out) var(--d, 0ms); }
  .js .city.is-in .bar__fill { transform: scaleX(1); }
}

.hours { margin-top: var(--s-9); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.hours h3 { color: #F4F8F8; font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); font-stretch: 112%; font-weight: 760; line-height: 1.1; }
.hours p { margin-top: var(--s-4); max-width: 44ch; }
.units { display: grid; gap: var(--s-6); }
.units__row h4 { font-size: 1rem; font-weight: 700; color: var(--ink-block-text); display: flex; justify-content: space-between; gap: var(--s-4); }
.units__row h4 span { color: var(--teal-200); font-variant-numeric: tabular-nums; font-weight: 650; }
.units svg { margin-top: var(--s-3); width: 100%; height: auto; }
.units circle { fill: none; stroke: rgb(174 218 224 / .45); stroke-width: 1.5; }
.units circle.u-long { fill: var(--teal-300); stroke: var(--teal-300); }
.units circle.u-24 { fill: #F4F8F8; stroke: #F4F8F8; }
@media (prefers-reduced-motion: no-preference) {
  .js .units circle.u-long, .js .units circle.u-24 { fill-opacity: 0; transition: fill-opacity 260ms var(--ease-std) calc(var(--i) * 40ms); }
  .js .units.is-in circle.u-long, .js .units.is-in circle.u-24 { fill-opacity: 1; }
}
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: .875rem; color: var(--ink-block-muted); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgb(174 218 224 / .6); }
.legend i.l-24 { background: #F4F8F8; border-color: #F4F8F8; } .legend i.l-long { background: var(--teal-300); border-color: var(--teal-300); }
@media (max-width: 900px) { .hours { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- person + reel */
.meet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8); align-items: center; }
.meet__copy > p { margin-top: var(--s-4); color: var(--text-2); max-width: 52ch; }
.meet .person { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.reel { margin: 0; justify-self: center; width: min(100%, 340px); }
.reel__frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-doc); overflow: hidden; background: var(--teal-950); box-shadow: 0 0 0 1.5px var(--text); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel figcaption { margin-top: var(--s-3); font-size: .875rem; color: var(--text-muted); }
@media (max-width: 900px) { .meet { grid-template-columns: minmax(0, 1fr); } .reel { justify-self: start; } }

/* ---------------------------------------------------------------- operators band */
.opband { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-8); align-items: start; }
.opband p.lead { margin-top: var(--s-4); }
.opband .link-arrow { margin-top: var(--s-4); }
.opterms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s-6); border-top: 2px solid var(--text); }
.opterms li { padding: var(--s-4) 0 var(--s-5); border-bottom: 1px solid var(--rule); }
.opterms b { display: block; font-stretch: 108%; font-size: 1.0625rem; }
.opterms span { display: block; margin-top: var(--s-1); color: var(--text-muted); font-size: .9375rem; }
@media (max-width: 900px) { .opband { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .opterms { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- close */
.close { text-align: left; }
.close h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); font-stretch: 120%; font-weight: 820; letter-spacing: -.025em; line-height: 1; max-width: 16ch; }
.close p { margin-top: var(--s-5); color: var(--text-2); max-width: 52ch; }