/* Public landing only. The chat shell keeps the existing stylesheet. */
body[data-mode="chat"]:has(> #landing:not([hidden]))::before {
  background: linear-gradient(90deg,#1c1121ee 0%,#1c11219e 53%,#1c11216b),
              linear-gradient(0deg,#1c1121 2%,transparent 72%),
              url("chat69-rooftop-evening.webp") center 60% / cover no-repeat #1c1121;
}
body[data-mode="chat"] #landing:not([hidden]) {
  width: min(1152px, calc(100% - 64px)); max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(0,416px);
  column-gap:clamp(32px,6vw,84px);row-gap:26px;
  margin:clamp(24px,6vh,70px) auto 36px;padding:0;align-items:center;
}
body[data-mode="chat"] #landing .intro {
  min-width:0;margin:0;padding:10px 0 16px;background:none;border:0;box-shadow:none;text-align:left;
}
body[data-mode="chat"] #landing .landing-kicker {
  display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:0 0 9px;border-bottom:1px solid #d098b4;
  color:#f7cadc;font-size:13px;font-weight:600;letter-spacing:.025em;line-height:1.5;
}
#landing .landing-kicker svg {width:19px;height:19px;flex:0 0 19px;color:#efa7c1}
body[data-mode="chat"] #landing .intro h1 {
  max-width:none;margin:20px 0 16px;color:#fff5f0;
  font:750 clamp(41px,4.75vw,71px)/1.06 system-ui,"Segoe UI",Arial,sans-serif;letter-spacing:-.045em;text-shadow:0 2px 22px #21102499;
}
body[data-mode="chat"] #landing .intro h1 em {display:inline;font:inherit;font-style:normal;color:#f9adca}
body[data-mode="chat"] #landing #tagline {
  max-width:35ch;margin:0;color:#f9e8ee;font:400 17px/1.6 Arial,sans-serif;
}
body[data-mode="chat"] #landing .join-card {
  width:100%;min-width:0;margin:0;padding:22px 26px 19px;
  border:1px solid #f7c9da;border-top:3px solid #dc81aa;border-radius:4px;
  background:#fff5f4;color:#352331;box-shadow:0 22px 55px #11091261;
}
body[data-mode="chat"] #landing .join-card h2 {margin:8px 0 4px;color:#352331;font:700 29px/1.15 system-ui,"Segoe UI",Arial,sans-serif;letter-spacing:-.025em}
body[data-mode="chat"] #landing .join-card > p {margin:0 0 14px;color:#684e5e;font-size:14px}
body[data-mode="chat"] #landing .join-card .card-top .eyebrow {color:#783454;font-size:10px;letter-spacing:.13em}
body[data-mode="chat"] #landing .join-card .pill {color:#783454;background:#f4dce6;border:1px solid #ddb7ca;border-radius:3px}
body[data-mode="chat"] #landing #join-form {gap:9px}
body[data-mode="chat"] #landing #join-form label {color:#493141}
body[data-mode="chat"] #landing #join-form small,
body[data-mode="chat"] #landing .form-note {color:#705467}
body[data-mode="chat"] #landing #join-form .text-btn {color:#7d2d55}
body[data-mode="chat"] #landing #join-form :is(input:not([type=checkbox]),select) {
  min-width:0;min-height:42px;border-radius:3px;border-color:#d9bfc9;background:#fff;color:#352331;
}
body[data-mode="chat"] #landing #join-form input::placeholder {color:#785f6f;opacity:1}
body[data-mode="chat"] #landing #join-form .primary {
  min-height:46px;border-radius:3px;background:#85375f;color:#fff;box-shadow:none;
}
body[data-mode="chat"] #landing #join-form .primary:hover {background:#692746}
body[data-mode="chat"] #landing :is(button,input,select,summary):focus-visible {outline:2px solid #a54c77;outline-offset:2px}
body[data-mode="chat"] #landing .how-it-works {
  grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:0;border-block:1px solid #eec3d453;background:#251726e8;padding:0;
}
body[data-mode="chat"] #landing .how-it-works article {
  min-width:0;border:0;border-radius:0;background:none;box-shadow:none;padding:16px 20px;
}
body[data-mode="chat"] #landing .how-it-works article+article {border-left:1px solid #eec3d437}
body[data-mode="chat"] #landing .how-it-works h3 {color:#fff1f4}
body[data-mode="chat"] #landing .how-it-works p {color:#e6cbd8}
body[data-mode="chat"] #landing .feature-icon {color:#ffbad3;background:#f5a9cb19;border-color:#edb5d13b;border-radius:3px}
body[data-mode="chat"] #landing .index-faq {margin:0;background:#241724f2;border-color:#eec3d453}
body[data-mode="chat"] #landing .faq-intro h2 {font:700 33px/1.15 system-ui,"Segoe UI",Arial,sans-serif}
@media(max-width:820px) {
  body[data-mode="chat"] #landing:not([hidden]) {
    width:min(520px,calc(100% - 32px));grid-template-columns:minmax(0,1fr);gap:22px;margin:22px auto 30px;
  }
  body[data-mode="chat"] #landing .intro {padding:0}
  body[data-mode="chat"] #landing .intro h1 {font-size:clamp(32px,8vw,53px);margin:14px 0 9px}
  body[data-mode="chat"] #landing #tagline {font-size:15px}
  body[data-mode="chat"] #landing .join-card {padding:18px 16px}
  body[data-mode="chat"] #landing #join-form :is(input:not([type=checkbox]),select) {font-size:16px}
  body[data-mode="chat"] #landing .how-it-works {grid-template-columns:minmax(0,1fr)}
  body[data-mode="chat"] #landing .how-it-works article+article {border-left:0;border-top:1px solid #eec3d437}
}
body[data-mode="chat"] #landing .join-card #guest-nickname::placeholder {color:#785f6f}
body[data-mode="chat"] #landing .join-card .nickname-label-row small {color:#705467}
body[data-mode="chat"] #landing .join-card .card-top {margin-bottom:0}
@media (min-width:821px) and (max-height:820px) {
  body[data-mode="chat"] #landing:not([hidden]) {margin-top:20px}
}

/* One type system across the public start page. */
body[data-mode="chat"] #landing,
body[data-mode="chat"]:has(> #landing:not([hidden])) > :is(.topbar,footer) {
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  --landing-type:"Segoe UI",system-ui,Arial,sans-serif;
}
body[data-mode="chat"] #landing :is(.intro h1,#tagline,.join-card h2,.index-faq,.faq-intro h2,button,input,select) {
  font-family:var(--landing-type);
}
body[data-mode="chat"] #landing .intro h1 {
  font-weight:700;letter-spacing:-.045em;line-height:1.09;
}
body[data-mode="chat"] #landing #tagline {line-height:1.65}
body[data-mode="chat"] #landing .landing-kicker {font-weight:600;letter-spacing:.015em}
body[data-mode="chat"] #landing .join-card h2 {font-weight:650;letter-spacing:-.035em}
body[data-mode="chat"] #landing #join-form label {font-weight:600}
body[data-mode="chat"] #landing #join-form label.check {font-weight:400;line-height:1.5}
body[data-mode="chat"] #landing #join-form .primary {font-size:15px;font-weight:650;letter-spacing:.01em}
body[data-mode="chat"] #landing .how-it-works h3 {font-size:15px;font-weight:650}
body[data-mode="chat"] #landing .faq-item summary {font-weight:600}
body[data-mode="chat"] #landing .faq-answer p {font-size:14px;line-height:1.65}
body[data-mode="chat"]:has(> #landing:not([hidden])) > .topbar .live {font-variant-numeric:tabular-nums}
body[data-mode="chat"]:has(> #landing:not([hidden])) > footer nav a {font-size:12px;font-weight:500}

/* Give the skyline room around the shorter headline. */
body[data-mode="chat"] #landing .landing-kicker {
  width:40px;height:40px;justify-content:center;padding:0;
  border:1px solid #d098b47d;border-radius:50%;background:#28172499;
}
body[data-mode="chat"] #landing .intro h1 {margin-bottom:0}
body[data-mode="chat"]:has(> #landing:not([hidden]))::before {
  background-image:linear-gradient(90deg,#1c1121cd 0%,#1c112171 56%,#1c11216b),
                   linear-gradient(0deg,#1c1121 2%,transparent 72%),
                   url("chat69-rooftop-evening.webp");
}

  body[data-mode="chat"] #landing .landing-chat-preview {
    display:grid;gap:10px;width:min(100%,320px);margin-top:26px;
  }
  body[data-mode="chat"] #landing .landing-chat-preview p {
    justify-self:start;padding:10px 15px;border-radius:14px 14px 14px 4px;
    background:#f5cedf;color:#422538;font-size:14px;line-height:1.45;
  }
  body[data-mode="chat"] #landing .landing-chat-preview p:nth-child(even) {
    justify-self:end;border:1px solid #d098b46b;border-radius:14px 14px 4px 14px;
    background:#302031;color:#fff1f4;
  }

@media (prefers-reduced-motion:no-preference) {
  body[data-mode="chat"] #landing .landing-chat-preview p {
    animation:chat69-preview-arrive .42s ease-out backwards;
  }
  body[data-mode="chat"] #landing .landing-chat-preview p:nth-child(2) {animation-delay:.65s}
  body[data-mode="chat"] #landing .landing-chat-preview p:nth-child(3) {animation-delay:1.4s}
  body[data-mode="chat"] #landing .landing-chat-preview p:nth-child(4) {animation-delay:2.2s}
}
@keyframes chat69-preview-arrive {
  from {opacity:0;transform:translateY(9px)}
  to {opacity:1;transform:translateY(0)}
}

body[data-mode="chat"] #landing .index-faq {
  grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 24px;
}
body[data-mode="chat"] #landing .faq-intro h2 {font-size:24px;margin:0}
body[data-mode="chat"] #landing .faq-item summary {min-height:44px;padding:9px 4px}
body[data-mode="chat"] #landing .faq-answer {padding-bottom:12px}
@media(max-width:780px) {
  body[data-mode="chat"] #landing .index-faq {padding:16px}
}

body[data-mode="chat"] #landing .faq-intro h2 {
  display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.025em;
}
body[data-mode="chat"] #landing .faq-heading-mark {
  display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;
  background:#f5cedf;color:#48283d;font-size:16px;line-height:1;
}
body[data-mode="chat"] #landing .faq-intro::after {
  content:"";display:block;width:32px;height:2px;margin-top:8px;background:#e89abb;
}

@media (max-width:1023px) {
  body[data-mode="chat"] #landing .landing-chat-preview {
    gap:5px;margin-top:14px;
  }
  body[data-mode="chat"] #landing .landing-chat-preview p {
    max-width:100%;padding:5px 10px;font-size:13px;
    overflow-wrap:anywhere;
  }
}