/* home.css: the Lobby (/ and /es/). Page-only rules, every selector scoped to body[data-floor="lobby"].
   Tokens come from /assets/site.css; gold (--deco-*) is decoration only, never text. No 100vw, no inline styles. */

/* ---------------------------------------------------------------- hero: the text stays in the sky
   The skyline art is held to a fixed band (40 % of the screen height) and the text block always ends above it,
   however tall the copy grows (long Spanish lines, 200 % zoom). The scrim stays dark down to that band, and the
   example caption sits on its own dark plate, so no text is ever drawn over the horizon colour or a tower. */
body[data-floor="lobby"] .hero { --skyline-band: min(40vh, 26rem); }
@supports (height: 1svh) { body[data-floor="lobby"] .hero { --skyline-band: min(40svh, 26rem); } }
body[data-floor="lobby"] .hero .skyline { height: var(--skyline-band); }
body[data-floor="lobby"] .hero > .wrap {
  padding-block-end: calc(var(--letterbox) + var(--skyline-band) + var(--s-5));
}
body[data-floor="lobby"] .hero__scrim {
  background: linear-gradient(180deg,
    rgb(5 8 10 / 0.8) 0%,
    rgb(5 8 10 / 0.62) 45%,
    rgb(5 8 10 / 0.5) calc(100% - var(--skyline-band) - var(--s-6)),
    transparent calc(100% - var(--skyline-band) + var(--s-7)));
}
body[data-floor="lobby"] .hero__title {
  max-width: 17ch;
  font-size: clamp(2rem, 1.35rem + 3vw, 4rem);
}
body[data-floor="lobby"] .hero .cta-row { margin-block-start: var(--s-5); }
@media (max-width: 63.98rem) {
  @supports (grid-template-rows: subgrid) {
    /* Phones and tablets: the worked example steps down below the skyline onto the dark street, so the towers rise
       straight above the buttons in the first view, and no text sits on the skyline art or under the docked Floors
       button. The text block keeps its exact markup; only its rows are shared with the hero (subgrid). */
    body[data-floor="lobby"] .hero { grid-template-rows: repeat(5, auto); align-content: start; }
    body[data-floor="lobby"] .hero__layers {          /* in flow (not absolute) so it spans exactly rows 1-4 */
      position: relative;
      inset: auto;
      grid-row: 1 / 5;
      grid-column: 1;
      align-self: stretch;
    }
    body[data-floor="lobby"] .hero > .wrap {
      grid-row: 1 / 6;
      grid-column: 1;
      display: grid;
      grid-template-rows: subgrid;
      padding-block: calc(var(--letterbox) + var(--s-5)) calc(var(--letterbox) + var(--s-5));
    }
    body[data-floor="lobby"] .hero .cta-row { margin-block-end: calc(var(--skyline-band) + var(--s-5)); }
    body[data-floor="lobby"] .hero__example { margin-block-start: var(--s-4); }
  }
}
body[data-floor="lobby"] .hero__example {
  padding: 0.6rem 0.85rem;
  text-wrap: pretty;
  background: rgb(5 8 10 / 0.82);
  border: 1px solid var(--deco-gold-faint);
  border-radius: var(--radius-2);
}
@media (min-width: 64rem) {
  /* Wide screens: headline column on the left, the worked example beside the buttons on the right. */
  body[data-floor="lobby"] .hero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-7);
    align-content: start;
  }
  body[data-floor="lobby"] .hero > .wrap > * { grid-column: 1; }
  body[data-floor="lobby"] .hero > .wrap > .hero__example {
    grid-column: 2;
    grid-row: 3 / span 2;
    align-self: end;
    margin: 0;
  }
  body[data-floor="lobby"] .hero__title { max-width: 18ch; }
}

/* ---------------------------------------------------------------- the concierge desk + floor directory */
body[data-floor="lobby"] .lobby-chandelier { margin-block: calc(-1 * var(--s-5)) var(--s-4); }
@media (min-width: 64rem) {
  body[data-floor="lobby"] .lobby-chandelier { width: clamp(8rem, 4rem + 8vw, 12rem); }
}
body[data-floor="lobby"] .lobby-desk {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--s-5);
  align-items: start;
}
@media (min-width: 64rem) {
  body[data-floor="lobby"] .lobby-desk { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
body[data-floor="lobby"] .lobby-chips__intro { margin: 0 0 var(--s-3); font-weight: 600; color: var(--ink-1); }
/* Six chip groups as disclosures (Hick's law chunking): the first is open, the other five are one tap away. */
body[data-floor="lobby"] .lobby-chips__set { border-block-start: 1px solid var(--deco-gold-faint); }
body[data-floor="lobby"] .lobby-chips__set:last-of-type { border-block-end: 1px solid var(--deco-gold-faint); }
body[data-floor="lobby"] .lobby-chips__set > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--target);
  padding-block: var(--s-1);
  cursor: pointer;
  list-style: none;
}
body[data-floor="lobby"] .lobby-chips__set > summary::-webkit-details-marker { display: none; }
body[data-floor="lobby"] .lobby-chips__set > summary::after {     /* chevron (decor; the open list is the state) */
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-inline-end: 0.4rem;
  border-inline-end: 2px solid var(--deco-gold);
  border-block-end: 2px solid var(--deco-gold);
  transform: translateY(-25%) rotate(45deg);
}
body[data-floor="lobby"] .lobby-chips__set[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
body[data-floor="lobby"] .lobby-chips__set > summary:hover .lobby-chips__group { color: var(--ink-1); }
body[data-floor="lobby"] .lobby-chips__group {
  margin: 0;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body[data-floor="lobby"] .lobby-chips .chips { margin-block: var(--s-2) var(--s-3); }
body[data-floor="lobby"] .lobby-chips__all { margin: var(--s-4) 0 var(--s-3); }
body[data-floor="lobby"] .concierge__result:not(:empty) {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--deco-gold-faint);
}

body[data-floor="lobby"] .lobby-dir__title {
  margin: 0 0 var(--s-3);
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-floor="lobby"] .lobby-dir__title + .doors { margin-block-start: 0; }
body[data-floor="lobby"] .lobby-dir__floors {
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
body[data-floor="lobby"] .lobby-dir__floors li { margin: 0; border-block-end: 1px solid var(--deco-gold-faint); }
body[data-floor="lobby"] .lobby-dir__floors a {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--target);
  padding-block: 0.6rem;
  color: var(--ink-2);
  text-decoration: none;
}
body[data-floor="lobby"] .lobby-dir__floors a:hover strong,
body[data-floor="lobby"] .lobby-dir__floors a:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
body[data-floor="lobby"] .lobby-dir__floors strong { display: block; color: var(--brand-accent); }
body[data-floor="lobby"] .lobby-dir__text { font-size: var(--t-subhead); line-height: 1.35; }
body[data-floor="lobby"] .lobby-dir__code {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ink-1);
  border: 1.5px solid var(--deco-gold);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #111B1D, #05080A 70%);
}

/* ---------------------------------------------------------------- the bellhop + the worked example */
body[data-floor="lobby"] .lobby-clarity { background: var(--noir-0); }
body[data-floor="lobby"] .lobby-clarity__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 72rem) {
  body[data-floor="lobby"] .lobby-clarity__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  body[data-floor="lobby"] .lobby-clarity .bellhop__steps { grid-template-columns: minmax(0, 1fr); }
}
body[data-floor="lobby"] .bellhop { margin-block-start: var(--s-5); }
body[data-floor="lobby"] .lobby-worked h3 { margin-block-end: 0; }
body[data-floor="lobby"] .lobby-worked .compare caption { line-height: 1.6; }
body[data-floor="lobby"] .lobby-worked .math__body :is(p, si-p) { margin-block: var(--s-2); }
@media (max-width: 39.98rem) {
  /* Phones: each scenario keeps its three figures on one row (each month · months · interest), so the two rows
     pair column for column: 87 vs 21 months, $4,859.49 vs $1,017.91 (D30). */
  body[data-floor="lobby"] .lobby-worked .compare tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-floor="lobby"] .lobby-worked .compare td { padding-inline: 0.3rem; }
  body[data-floor="lobby"] .lobby-worked .compare td:first-of-type { padding-inline-start: 0.75rem; }
}

/* Cross-floor text links that stand alone get the full 44 px target. */
body[data-floor="lobby"] .card__cta a,
body[data-floor="lobby"] .lobby-worked__more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

/* ---------------------------------------------------------------- the lobby theater */
body[data-floor="lobby"] .lobby-theater {
  background:
    radial-gradient(60% 40% at 50% 0%, rgb(134 171 167 / 0.1), transparent 70%),
    linear-gradient(180deg, #05080A, var(--noir-0) 60%);
}
body[data-floor="lobby"] .lobby-theater--second { padding-block-start: 0; background: var(--noir-0); }
body[data-floor="lobby"] .lobby-theater .theater,
body[data-floor="lobby"] .lobby-theater .parable-transcript,
body[data-floor="lobby"] .lobby-theater .video-alt { max-width: 54rem; margin-inline: auto; }
body[data-floor="lobby"] .lobby-theater .lede { margin-block-end: var(--s-5); }
body[data-floor="lobby"] .lobby-lang { justify-content: center; margin-block-end: var(--s-4); }
body[data-floor="lobby"] .lobby-lang .chip { cursor: pointer; }
body[data-floor="lobby"] .parable-shell { margin-block-end: var(--s-3); }
body[data-floor="lobby"] .video-alt { margin-block: var(--s-3) var(--s-2); text-align: center; font-size: var(--t-subhead); }
body[data-floor="lobby"] .video-alt a { display: inline-flex; align-items: center; min-height: var(--target); }

body[data-floor="lobby"] .parable-transcript {
  margin-block: var(--s-2) var(--s-4);
  color: var(--ink-2);
  border: 1px solid var(--mark-3);
  border-radius: var(--radius-2);
  background: rgb(232 255 252 / 0.02);
}
body[data-floor="lobby"] .parable-transcript > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-accent);
}
body[data-floor="lobby"] .parable-transcript[open] > summary { border-block-end: 1px solid var(--hairline); }
body[data-floor="lobby"] .parable-transcript > :not(summary) { margin-inline: clamp(1rem, 0.6rem + 2vw, 2rem); }
body[data-floor="lobby"] .parable-transcript h3 { margin-block: var(--s-4) var(--s-3); font-size: 1.25rem; }
body[data-floor="lobby"] .parable-transcript :is(p, si-p) { line-height: 1.7; }
body[data-floor="lobby"] .parable-transcript sup { font-size: 0.7em; line-height: 0; }
body[data-floor="lobby"] .parable-notes {
  margin-block: var(--s-5) var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--t-subhead);
}
body[data-floor="lobby"] .parable-notes h4 { margin: 0 0 var(--s-2); color: var(--ink-1); }
body[data-floor="lobby"] .parable-notes ul { margin: 0 0 var(--s-3); line-height: 1.6; }
body[data-floor="lobby"] .parable-notes li { overflow-wrap: anywhere; }

/* The Tin's heard-line captions (home.js), over the bottom of the picture */
body[data-floor="lobby"] .tin-caption {
  position: absolute;
  inset-inline: 4%;
  inset-block-end: 5%;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-2);
  background: rgb(5 8 10 / 0.86);
  color: var(--ink-1);
  text-align: center;
  font-size: clamp(0.95rem, 0.8rem + 0.8vw, 1.15rem);
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
}
body[data-floor="lobby"] .tin-caption:empty { display: none; }
/* Without JavaScript The Tin's player is never built: show its Vimeo link and lines instead of an empty screen. */
html:not(.js) body[data-floor="lobby"] .lobby-theater--second .theater { display: none; }

/* Click-to-load poster (home.js): a local still in the theater's own art, and one real button. No Vimeo request,
   cookie or motion until the visitor presses it; then Vimeo's player replaces the poster in place. */
body[data-floor="lobby"] .lobby-facade {
  background:
    url("/assets/art/skyline-far.svg") 50% 100% / auto 46% repeat-x,
    radial-gradient(80% 70% at 50% 112%, var(--deco-sky-mid), transparent 72%),
    linear-gradient(180deg, #000000 0%, var(--deco-sky-top) 100%);
}
body[data-floor="lobby"] .lobby-facade.is-loaded { background: #000000; }
body[data-floor="lobby"] .lobby-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  margin: 0;
  padding: var(--s-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-1);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
body[data-floor="lobby"] .lobby-play[hidden] { display: none; }
body[data-floor="lobby"] .lobby-play:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -6px; }
body[data-floor="lobby"] .lobby-play__icon {
  position: relative;
  flex: 0 0 auto;
  width: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  height: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  border: 2px solid var(--deco-gold);
  border-radius: 50%;
  background: rgb(5 8 10 / 0.86);
  box-shadow: 0 0 0 6px rgb(5 8 10 / 0.55);
}
body[data-floor="lobby"] .lobby-play__icon::after {      /* play triangle (decor; the words name the action) */
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-block: 0.6em solid transparent;
  border-inline-start: 1em solid var(--ink-1);
  transform: translateX(0.12em);
}
body[data-floor="lobby"] .lobby-play:hover .lobby-play__icon,
body[data-floor="lobby"] .lobby-play:focus-visible .lobby-play__icon { border-color: var(--brand-accent); }
body[data-floor="lobby"] .lobby-play__title,
body[data-floor="lobby"] .lobby-play__meta {
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-1);
  background: rgb(5 8 10 / 0.84);
}
body[data-floor="lobby"] .lobby-play__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body[data-floor="lobby"] .lobby-play__meta { font-size: var(--t-footnote); color: var(--ink-2); }

/* ---------------------------------------------------------------- what it does: screenshots + floor cards */
body[data-floor="lobby"] .lobby-shots { margin-block: var(--s-6) var(--s-4); }
@media (max-width: 39.98rem) {
  /* Phones: one screenshot per row (site.css's single column), wide enough that the app's own labels can be read,
     with captions set flush left under each phone. */
  body[data-floor="lobby"] .lobby-shots .shot { width: 100%; max-width: 18rem; }
  body[data-floor="lobby"] .lobby-shots figcaption { text-align: start; }
}
body[data-floor="lobby"] .lobby-floor-cards { margin-block-start: var(--s-5); }
@media (min-width: 48rem) {
  body[data-floor="lobby"] .lobby-floor-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  body[data-floor="lobby"] .lobby-floor-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body[data-floor="lobby"] .lobby-floor-cards .floor-sign,
body[data-floor="lobby"] .lobby-founder .floor-sign {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  margin-block-end: var(--s-3);
}
body[data-floor="lobby"] .lobby-floor-cards .floor-sign { align-self: flex-start; }

/* ---------------------------------------------------------------- a look inside the Vault */
@media (min-width: 48rem) {
  body[data-floor="lobby"] .lobby-security .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  body[data-floor="lobby"] .lobby-security .card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body[data-floor="lobby"] .lobby-security .card h3 { font-size: 1.375rem; }
body[data-floor="lobby"] .lobby-delete { margin-block-start: var(--s-4); }
body[data-floor="lobby"] .lobby-delete h3 { font-size: 1.375rem; }
body[data-floor="lobby"] .lobby-more { margin-block: var(--s-5) 0; }

/* ---------------------------------------------------------------- pricing */
@media (min-width: 48rem) {
  body[data-floor="lobby"] .lobby-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
}
body[data-floor="lobby"] .lobby-plan__line { min-height: 3.25rem; font-weight: 600; color: var(--ink-1); }
body[data-floor="lobby"] .lobby-ticks { margin: 0; padding: 0; list-style: none; }
body[data-floor="lobby"] .lobby-ticks li {
  position: relative;
  margin: 0;
  padding: 0.5rem 0 0.5rem 1.9rem;
  border-block-start: 1px solid var(--hairline);
  color: var(--ink-2);
}
body[data-floor="lobby"] .lobby-ticks li::before {     /* tick glyph (decor; the words carry the meaning) */
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  inset-block-start: 0.95rem;
  width: 0.85rem;
  height: 0.45rem;
  border-inline-start: 2px solid var(--brand-accent);
  border-block-end: 2px solid var(--brand-accent);
  transform: rotate(-45deg);
}
body[data-floor="lobby"] .lobby-plan__note { margin: var(--s-3) 0 0; }
/* The LED price chip scales with its card, so "$9.99 USD/mes" never runs past the card edge (320 px, 2-up cards). */
@supports (font-size: 1cqi) {
  body[data-floor="lobby"] .lobby-plans .card { container-type: inline-size; }
  body[data-floor="lobby"] .lobby-plan__line .price { font-size: min(3rem, 10.5cqi); }
}
body[data-floor="lobby"] .lobby-disclosure { max-width: 46rem; margin-block: var(--s-5) var(--s-3); }
body[data-floor="lobby"] .lobby-soon { margin: 0; }

/* ---------------------------------------------------------------- built by one of our own */
body[data-floor="lobby"] .lobby-founder .scene__art img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- reduced motion / contrast */
@media (prefers-contrast: more) {
  body[data-floor="lobby"] .lobby-theater, body[data-floor="lobby"] .lobby-theater--second { background: var(--noir-0); }
  body[data-floor="lobby"] .tin-caption { background: #000000; }
}
@media (forced-colors: active) {
  body[data-floor="lobby"] .lobby-dir__code, body[data-floor="lobby"] .parable-transcript { border-color: CanvasText; }
  body[data-floor="lobby"] .lobby-play__icon { border-color: ButtonText; }
  body[data-floor="lobby"] .lobby-play__icon::after { border-inline-start-color: ButtonText; }
  body[data-floor="lobby"] .lobby-chips__set > summary::after { border-color: CanvasText; }
}

/* ---------------------------------------------------------------- the trailer (53 s cut of the Ledger Parable)
   Copy first on phones, the square film beside it on wide screens. The film sits in the theater frame; its two
   buttons sit under it, never over the picture (the burned-in narration lettering stays readable). */
body[data-floor="lobby"] .lobby-trailer {
  background:
    radial-gradient(55% 60% at 80% 10%, rgb(134 171 167 / 0.09), transparent 70%),
    var(--noir-0);
  border-block-start: 1px solid var(--deco-gold-faint);
}
body[data-floor="lobby"] .lobby-trailer__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "film" "actions";
}
@media (min-width: 56rem) {
  body[data-floor="lobby"] .lobby-trailer__grid {
    column-gap: var(--s-7);
    row-gap: 0;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas: "copy film" "actions film" ". film";
  }
  body[data-floor="lobby"] .lobby-trailer__copy { align-self: end; }
  body[data-floor="lobby"] .lobby-trailer__actions { margin-block-start: var(--s-5); }
}
body[data-floor="lobby"] .lobby-trailer__copy { grid-area: copy; min-width: 0; }
body[data-floor="lobby"] .lobby-trailer__copy .lede { margin-block-end: 0; }
body[data-floor="lobby"] .lobby-trailer__figure { grid-area: film; align-self: center; }
body[data-floor="lobby"] .lobby-trailer__actions { grid-area: actions; min-width: 0; }
body[data-floor="lobby"] .lobby-trailer__get { display: inline-flex; align-items: center; gap: 0.5em; min-height: var(--target); }
body[data-floor="lobby"] .lobby-trailer__note { margin-block-start: var(--s-4); color: var(--ink-3); }
body[data-floor="lobby"] .lobby-trailer__figure { width: 100%; max-width: 32rem; margin: 0 auto; }
body[data-floor="lobby"] .lobby-trailer__screen { padding: clamp(0.35rem, 0.2rem + 0.6vw, 0.6rem); }
body[data-floor="lobby"] .lobby-trailer__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #000000;
  object-fit: cover;
}
body[data-floor="lobby"] .lobby-trailer__controls { justify-content: center; gap: var(--s-2); margin-block-start: var(--s-4); }
body[data-floor="lobby"] .lobby-trailer__controls .chip { cursor: pointer; }
/* The full film (Vimeo, press to play): one 16:9 frame under the trailer. The frame's aspect-ratio is set before
   anything loads, so swapping the poster for the player moves nothing (CLS 0). */
body[data-floor="lobby"] .lobby-film { margin-block-start: var(--s-7); max-width: 52rem; }
body[data-floor="lobby"] .lobby-film__title { margin: 0 0 var(--s-4); text-align: center; }
body[data-floor="lobby"] .lobby-film__theater { padding: clamp(0.35rem, 0.2rem + 0.6vw, 0.6rem); }
body[data-floor="lobby"] .lobby-film .theater__screen { aspect-ratio: 16 / 9; overflow: hidden; }
