/* GrowAFK · Studio edition
   For premium clients: restraint over decoration. Ivory and ink, one deep emerald accent,
   an editorial serif, hairline rules and generous space. The product appears as a calm,
   precise nightly report, not as effects. */

:root {
  --ivory: #F4F1EA;
  --stone: #EAE5DB;
  --paper: #FBFAF6;
  --ink: #121212;
  --ink-2: #3E3B36;
  --mute: #7C766C;
  --rule: #D9D2C4;
  --emerald: #1E4D3B;
  --emerald-2: #2F6B53;
  --font-display: "Libre Caslon Display", "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--font-sans); font-weight: 400; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p, dl, dd { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 32px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
::selection { background: var(--emerald); color: var(--ivory); }

/* labels */
.kicker, .tag, .label { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.kicker, .tag { display: block; margin-bottom: 28px; }
em, .serif { font-style: italic; color: var(--emerald); }

/* status dot */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-2); display: inline-block; flex: none; animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 107, 83, 0.4); } 70% { box-shadow: 0 0 0 7px rgba(47, 107, 83, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 107, 83, 0); } }

/* ---------- nav ---------- */
.nav-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(244, 241, 234, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.4s; }
.nav-wrap.scrolled { border-bottom-color: var(--rule); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo { font-family: var(--font-display); font-size: 25px; letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.logo b { font-weight: 400; }
.logo .dot, .logo .mark { display: none; }
.status { display: none; }
.links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.links a { text-decoration: none; font-size: 14.5px; color: var(--ink-2); }
.links a.text-link { position: relative; }
.links a.text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.links a.text-link:hover::after { transform: scaleX(1); }
.links .btn-ink { color: var(--ivory); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 28px; border-radius: 0; font: 500 14.5px/1 var(--font-sans); letter-spacing: 0.02em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s; }
.btn-ink { background: var(--ink); color: var(--ivory); }
.btn-ink:hover { background: var(--emerald); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--ivory); }
.btn-light { background: var(--ivory); color: var(--ink); }
.btn-light:hover { background: #FFFFFF; }
.btn-sm { padding: 12px 18px; font-size: 13.5px; }
.text-arrow { font-size: 14.5px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; border-bottom: 1px solid var(--ink); }
.text-arrow::after { content: "→"; transition: transform 0.3s var(--ease); }
.text-arrow:hover::after { transform: translateX(4px); }
.text-arrow.light { color: var(--ivory); border-color: rgba(244, 241, 234, 0.5); }

/* ---------- hero ---------- */
.hero { padding-block: 104px 120px; }
.hero h1 { font-family: var(--font-display); font-size: clamp(3.2rem, 8.2vw, 7.6rem); line-height: 0.98; letter-spacing: -0.025em; max-width: 13ch; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: end; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--rule); }
.hero .sub { font-size: 1.22rem; font-weight: 300; color: var(--ink-2); max-width: 48ch; line-height: 1.6; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }

/* the nightly report: the product, calm and precise */
.report { margin: 88px 0 0; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 40px 80px -60px rgba(18, 18, 18, 0.35); }
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 32px; border-bottom: 1px solid var(--rule); }
.report-head b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-top: 4px; }
.report .live { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--emerald); font-weight: 500; }
.report-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.report-stats > div { padding: 28px 32px; display: flex; flex-direction: column; gap: 6px; }
.report-stats > div + div { border-left: 1px solid var(--rule); }
.report-stats b { font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; line-height: 1; letter-spacing: -0.02em; }
.report-stats small { color: var(--mute); font-size: 13.5px; }
.report-log { padding: 22px 32px 10px; }
.console-body { margin-top: 10px; display: flex; flex-direction: column; min-height: 228px; }
.log { display: grid; grid-template-columns: 80px 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #EEE9DE; font-size: 14.5px; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.log.enter { opacity: 0; transform: translateY(6px); }
.log .t { color: var(--mute); font-variant-numeric: tabular-nums; font-size: 13px; }
.log .s { color: var(--emerald-2); }
.log .s.run { color: #B08A3E; }
.log .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.log .k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.report figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 16px 32px 20px; font-size: 13px; color: var(--mute); }
.report figcaption b { color: var(--ink); font-weight: 500; }

/* ---------- sections ---------- */
.section { padding-block: 136px; }
.head { max-width: 760px; margin-bottom: 72px; }
.head h2, .proof h2 { font-family: var(--font-display); font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1.04; letter-spacing: -0.02em; }
.head p { color: var(--ink-2); font-weight: 300; font-size: 1.15rem; max-width: 52ch; margin-top: 24px; }

/* statement */
.statement { background: var(--stone); }
.big-quote { font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.12; letter-spacing: -0.02em; max-width: 20ch; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 88px; }
.three > div { border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.idx { font-family: var(--font-display); font-style: italic; color: var(--emerald); font-size: 1.2rem; }
.three h3 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; }
.three p { color: var(--ink-2); font-weight: 300; }

/* capabilities: an editorial numbered list */
.cap-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.cap-grid .head { position: sticky; top: 120px; margin-bottom: 0; }
.caps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.caps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--rule); transition: padding 0.4s var(--ease); }
.caps li:hover { padding-left: 10px; }
.caps .n { font-size: 13px; color: var(--mute); padding-top: 8px; font-variant-numeric: tabular-nums; }
.caps h3 { font-family: var(--font-display); font-size: 1.65rem; line-height: 1.2; }
.caps p { color: var(--ink-2); font-weight: 300; margin-top: 6px; max-width: 52ch; }

/* the cost of silence */
.cost { background: var(--ink); color: var(--ivory); }
.cost .kicker { color: #9A948A; }
.cost-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 80px; align-items: end; }
.cost-number { font-family: var(--font-display); font-size: clamp(4rem, 11vw, 9.5rem); line-height: 0.95; letter-spacing: -0.03em; }
.cost-caption { margin-top: 24px; font-size: 1.2rem; font-weight: 300; color: #C9C3B8; max-width: 34ch; }
.cost-calc > div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #34312C; font-size: 15px; }
.cost-calc > div span { color: #B4AEA3; }
.cost-calc > div b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cost-calc p { margin-top: 24px; font-size: 14.5px; font-weight: 300; color: #A39D92; line-height: 1.6; }

/* approach */
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.phases li { border-top: 1px solid var(--ink); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.when { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald); font-weight: 500; }
.phases h3 { font-family: var(--font-display); font-size: 1.9rem; }
.phases p { color: var(--ink-2); font-weight: 300; }

/* engagements */
.engage { background: var(--stone); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.tier { padding: 40px 36px 44px; display: flex; flex-direction: column; gap: 16px; background: var(--ivory); }
.tier + .tier { border-left: 1px solid var(--ink); }
.tier.featured { background: var(--emerald); color: var(--ivory); }
.tier.featured .label { color: #B8CFC3; }
.tier h3 { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; }
.tier .price { font-family: var(--font-display); font-size: 1.6rem; display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.tier.featured .price { border-color: rgba(244, 241, 234, 0.25); }
.tier .price span { font-family: var(--font-sans); font-size: 13.5px; color: var(--mute); font-weight: 400; }
.tier.featured .price span { color: #C8DACF; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tier li { padding-left: 22px; position: relative; font-weight: 300; }
.tier li::before { content: "—"; position: absolute; left: 0; color: var(--emerald); }
.tier.featured li::before { color: #B8CFC3; }

/* proof */
.proof { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 80px; align-items: end; }
.proof p { color: var(--ink-2); font-weight: 300; font-size: 1.12rem; max-width: 50ch; margin-top: 24px; }
.proof .private { font-size: 14px; color: var(--mute); font-style: italic; }
.figures { border-top: 1px solid var(--ink); }
.figures div { display: flex; align-items: baseline; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.figures dt { font-family: var(--font-display); font-size: 3rem; line-height: 1; min-width: 4ch; }
.figures dd { color: var(--ink-2); font-weight: 300; }

/* about */
.about-section { padding-top: 0; }
.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 80px; align-items: start; padding-top: 72px; border-top: 1px solid var(--rule); }
.about .big { font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.2; letter-spacing: -0.01em; }
.about-text { display: flex; flex-direction: column; gap: 18px; padding-top: 52px; }
.about-text p { color: var(--ink-2); font-weight: 300; font-size: 1.08rem; }
.facts { margin-top: 12px; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.facts dt { color: var(--mute); }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); padding: 24px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-size: 1.35rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-sans); font-weight: 300; font-size: 1.4rem; color: var(--emerald); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); font-weight: 300; margin-top: 12px; max-width: 60ch; }

/* final */
.final { background: var(--emerald); color: var(--ivory); padding-block: 144px; }
.final .kicker { color: #B8CFC3; }
.final h2 { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 1; letter-spacing: -0.025em; max-width: 14ch; }
.final h2 em { color: #CFE3D8; }
.final-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(244, 241, 234, 0.25); }
.final-row p { color: #D9E6DE; font-weight: 300; font-size: 1.15rem; max-width: 46ch; }

/* footer */
footer { padding-block: 48px; background: var(--ivory); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--mute); font-size: 14px; }
.foot .logo { color: var(--ink); font-size: 22px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot nav { display: flex; gap: 28px; flex-wrap: wrap; }

/* booking page */
.book-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.book-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.book-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-weight: 300; }
.book-points li b { color: var(--ink); font-weight: 500; }
.book-points .n { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--emerald); }
.cal-frame { background: #FFFFFF; border: 1px solid var(--rule); overflow: auto; min-height: 680px; }
.cal-fallback { margin-top: 16px; font-size: 14px; color: var(--mute); }
.afk-note { color: var(--ink-2); font-weight: 300; }
.afk-note b { color: var(--ink); font-weight: 500; }

/* reveal: slow and quiet */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 1080px) {
  .report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-stats > div:nth-child(3) { border-left: 0; }
  .report-stats > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}
@media (max-width: 980px) {
  .cap-grid, .cost-grid, .proof, .about, .faq-grid, .book-grid, .hero-row, .final-row { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cap-grid .head { position: static; }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--ink); }
  .three { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .links .hide-m { display: none; }
  .about-text { padding-top: 0; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  .section { padding-block: 96px; }
  .hero { padding-block: 64px 80px; }
  .report-head, .report-log, .report figcaption { padding-inline: 20px; }
  .report-stats > div { padding: 22px 20px; }
  .report-stats b { font-size: 2.6rem; }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .log { grid-template-columns: 64px 18px minmax(0, 1fr); }
  .log .k { display: none; }
  .final { padding-block: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot { animation: none; }
  *, .js .reveal { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   The night: a scroll-driven story from 7 pm to 8 am.
   Without JS it is a simple list; with JS the stage pins, the clock runs,
   the page darkens into night and returns at dawn.
   ========================================================= */
.night { --bg: var(--ivory); --fg: var(--ink); background: var(--bg); color: var(--fg); transition: none; }
.night-stage { padding-block: 96px; }
.night-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.night .kicker { color: currentColor; opacity: 0.6; }
.clock { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 12.5rem); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-ampm { font-size: 0.32em; letter-spacing: 0; font-style: italic; color: var(--emerald); }
.clock-caption { margin-top: 28px; font-weight: 300; font-size: 1.1rem; opacity: 0.75; max-width: 34ch; }
.moments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.moment { border-top: 1px solid currentColor; padding-top: 18px; }
.moment time { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.moment h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; margin-top: 8px; }
.moment p { font-weight: 300; opacity: 0.75; margin-top: 8px; max-width: 44ch; }
.night-progress { display: none; }

/* scroll-driven mode */
.night.on { height: 760vh; }
.night.on .night-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-block: 0; overflow: hidden; }
.night.on .night-grid { width: 100%; }
.night.on .moments { position: relative; height: 340px; display: block; }
.night.on .moment { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.night.on .moment.now { opacity: 1; transform: none; }
.night.on .moment.past { opacity: 0; transform: translateY(-28px); }
.night.on .night-progress { display: block; position: absolute; left: 32px; right: 32px; bottom: 40px; height: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
.night.on .night-progress span { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: currentColor; }
.night.on .clock-ampm { color: inherit; opacity: 0.7; }

/* morning */
.morning { padding-top: 120px; }
.morning .report { margin-top: 0; }

/* the headline arrives word by word */
.js .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: rise 1.1s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .night-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .night.on .moments { height: 260px; }
  .night.on .night-stage { align-items: flex-start; padding-top: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .w { animation: none; opacity: 1; transform: none; }
}
/* crossfade in sequence: the old moment leaves, then the new one arrives */
.night.on .moment { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.night.on .moment.now { transition: opacity 0.6s var(--ease) 0.28s, transform 0.6s var(--ease) 0.28s; }

/* =========================================================
   Moments people share
   ========================================================= */

/* live local time under the headline */
.now-line { margin-top: 28px; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--ink-2); min-height: 1.6em; }
.now-line b { font-style: normal; font-weight: 400; color: var(--emerald); font-variant-numeric: tabular-nums; }

/* skyline: windows go dark through the night, one stays lit */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; pointer-events: none; opacity: 0.9; display: none; }
.night.on .skyline { display: block; }
.skyline .bld { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1; }
.skyline .win { fill: currentColor; fill-opacity: 0.08; transition: fill-opacity 0.6s ease, fill 0.6s ease; }
.skyline .win.lit { fill: #E9C46A; fill-opacity: 0.85; }
.skyline .win.yours { fill: #E9C46A; fill-opacity: 1; filter: drop-shadow(0 0 6px rgba(233, 196, 106, 0.9)); }
.skyline .yours-label { fill: currentColor; font: 500 11px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.night.on .night-grid { position: relative; z-index: 1; }

/* try it: a demo chat */
.demo { background: var(--stone); }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 80px; align-items: center; }
.demo-grid .head { margin-bottom: 0; }
.industries { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.industries button { font: 500 14px var(--font-sans); padding: 10px 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.25s, color 0.25s; }
.industries button[aria-selected="true"], .industries button:hover { background: var(--ink); color: var(--ivory); }
.demo-phone { background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 50px 100px -60px rgba(18, 18, 18, 0.45); display: flex; flex-direction: column; }
.demo-top { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.demo-top b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; }
.demo-top small { color: var(--emerald); font-size: 12.5px; }
.demo-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--emerald); color: var(--ivory); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; flex: none; }
.demo-chat { height: 340px; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.bub { max-width: 82%; padding: 10px 14px 20px; position: relative; font-size: 15px; line-height: 1.45; animation: bubIn 0.4s var(--ease); }
.bub.me { align-self: flex-end; background: var(--ink); color: var(--ivory); }
.bub.biz { align-self: flex-start; background: var(--stone); color: var(--ink); }
.bub time { position: absolute; right: 10px; bottom: 4px; font-size: 10.5px; opacity: 0.6; }
.bub.typing { padding: 12px 16px; }
.bub.typing span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--mute); animation: blink 1s infinite; }
.bub.typing span:nth-child(2) { animation-delay: 0.15s; } .bub.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes bubIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; }
.demo-chips button { font: 400 13.5px var(--font-sans); padding: 7px 12px; border: 1px solid var(--rule); background: var(--ivory); color: var(--ink-2); cursor: pointer; border-radius: 99px; }
.demo-chips button:hover { border-color: var(--ink); color: var(--ink); }
.demo-input { display: flex; border-top: 1px solid var(--rule); }
.demo-input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 18px 22px; font: 400 15px var(--font-sans); color: var(--ink); }
.demo-input input:focus { outline: none; }
.demo-input button { border: 0; background: var(--ink); color: var(--ivory); font: 500 14px var(--font-sans); padding: 0 24px; cursor: pointer; }
.demo-input button:hover { background: var(--emerald); }
.demo-note { padding: 12px 22px 16px; font-size: 12px; color: var(--mute); border-top: 1px solid var(--rule); }

/* calculator */
.calc label { display: block; padding: 18px 0 14px; border-bottom: 1px solid #34312C; font-size: 15px; color: #B4AEA3; }
.calc output { float: right; color: var(--ivory); font-weight: 500; font-variant-numeric: tabular-nums; }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: #3A3631; margin-top: 18px; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); border: 0; }
.calc input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); border: 0; }
.calc-out { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 22px; }
.calc-out span { color: #B4AEA3; font-size: 15px; }
.calc-out b { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; color: #CFE3D8; }

@media (max-width: 980px) { .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
@media (max-width: 640px) { .skyline { height: 24vh; } .demo-chat { height: 300px; } }

/* contact: details + a short form */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(244, 241, 234, 0.25); align-items: start; }
.contact-info > p { color: #D9E6DE; font-weight: 300; font-size: 1.15rem; max-width: 44ch; }
.contact-list { margin: 32px 0 36px; border-top: 1px solid rgba(244, 241, 234, 0.25); }
.contact-list div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(244, 241, 234, 0.25); }
.contact-list dt { color: #B8CFC3; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; }
.contact-list dd { font-family: var(--font-display); font-size: 1.35rem; overflow-wrap: anywhere; }
.contact-list a { text-decoration: none; border-bottom: 1px solid rgba(244, 241, 234, 0.35); }
.contact-list a:hover { border-color: var(--ivory); }
.lead-form { background: rgba(244, 241, 234, 0.06); border: 1px solid rgba(244, 241, 234, 0.22); padding: 32px; display: grid; gap: 18px; }
.lead-form label { display: grid; gap: 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #B8CFC3; }
.lead-form .opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.lead-form input, .lead-form select, .lead-form textarea { font: 400 16px var(--font-sans); color: var(--ivory); background: transparent; border: 0; border-bottom: 1px solid rgba(244, 241, 234, 0.4); padding: 10px 0; text-transform: none; letter-spacing: 0; border-radius: 0; resize: vertical; }
.lead-form select option { color: var(--ink); }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(244, 241, 234, 0.45); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--ivory); }
.lead-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-outline-light { border-color: rgba(244, 241, 234, 0.6); color: var(--ivory); background: transparent; }
.btn-outline-light:hover { background: var(--ivory); color: var(--ink); }
.lead-fine { font-size: 12.5px; color: #B8CFC3; opacity: 0.85; }
.foot a { border-bottom: 0; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
@media (max-width: 640px) { .contact-list div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .lead-form { padding: 24px 20px; } }
.mail-actions { display: flex; gap: 8px; margin-top: 10px; }
.mini { font: 500 12px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ivory); background: transparent; border: 1px solid rgba(244, 241, 234, 0.4) !important; padding: 6px 10px; cursor: pointer; text-decoration: none; }
.mini:hover { background: var(--ivory); color: var(--ink); }
.lead-status { min-height: 1.2em; font-size: 14px; color: var(--ivory); }
.lead-status a { color: var(--ivory); }

/* ---------- make it yours ---------- */
.make { border-block: 1px solid var(--rule); background: var(--paper); }
.make-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: 28px; }
.make-q { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.make-form { display: flex; flex-wrap: wrap; gap: 10px; }
.make-form input, .make-form select { font: 400 15px var(--font-sans); color: var(--ink); background: transparent; border: 1px solid var(--rule); padding: 14px 16px; min-width: 0; }
.make-form input { width: 240px; }
.make-form input:focus, .make-form select:focus { outline: none; border-color: var(--ink); }
.make-share { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--emerald); font-family: var(--font-display); font-size: 1.15rem; }
.make-share .text-arrow { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: var(--font-sans); color: var(--ink); }

/* ---------- leak meter ---------- */
.leak { position: fixed; left: 20px; bottom: 20px; z-index: 30; background: var(--ink); color: #F4F1EA; padding: 14px 44px 14px 18px; display: grid; gap: 2px; max-width: 290px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5); animation: bubIn 0.5s var(--ease); }
.leak-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #A39D92; }
.leak b { font-family: var(--font-display); font-weight: 400; font-size: 2rem; line-height: 1.1; color: #FF8A7A; font-variant-numeric: tabular-nums; }
.leak-sub { font-size: 13px; color: #C9C3B8; }
.leak-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: #A39D92; font-size: 20px; cursor: pointer; line-height: 1; }

/* ---------- after dark ---------- */
.afterdark-pill { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 10px; background: rgba(18, 18, 18, 0.92); color: #EDEBE5; border: 1px solid #2E2C29; padding: 10px 12px 10px 16px; font-size: 13px; backdrop-filter: blur(10px); max-width: calc(100vw - 40px); }
.afterdark-pill button { font: 500 12px var(--font-sans); background: #EDEBE5; color: #121212; border: 0; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
body.after-dark {
  --ivory: #121212; --stone: #191918; --paper: #1C1C1B;
  --ink: #EDEBE5; --ink-2: #BDB8AE; --mute: #8E897F; --rule: #2E2C29;
  --emerald: #8FD1B0; --emerald-2: #8FD1B0;
}
body.after-dark .nav-wrap { background: rgba(18, 18, 18, 0.86); }
body.after-dark ::selection { color: #121212; }
body.after-dark .btn-ink { color: #121212; }
body.after-dark .btn-ink:hover { background: #8FD1B0; color: #121212; }
body.after-dark .links .btn-ink { color: #121212; }
body.after-dark .cost { background: #0A0A0A; color: #F4F1EA; }
body.after-dark .final { background: #173B2E; color: #F4F1EA; }
body.after-dark .final .btn-light { background: #F4F1EA; color: #121212; }
body.after-dark .lead-form input, body.after-dark .lead-form select, body.after-dark .lead-form textarea, body.after-dark .contact-list dd, body.after-dark .mini, body.after-dark .lead-status, body.after-dark .lead-status a { color: #F4F1EA; }
body.after-dark .tier.featured { background: #173B2E; color: #F4F1EA; }
body.after-dark .bub.me { color: #121212; }
body.after-dark .demo-input button { color: #121212; }
body.after-dark .demo-avatar { background: #2F6B53; color: #F4F1EA; }
body.after-dark .industries button[aria-selected="true"], body.after-dark .industries button:hover { color: #121212; }
body.after-dark .leak { background: #F4F1EA; color: #121212; }
body.after-dark .leak b { color: #C8372D; }
body.after-dark .leak-sub { color: #3E3B36; }
body.after-dark .report { box-shadow: 0 40px 80px -60px rgba(0, 0, 0, 0.9); }
body.after-dark footer { background: var(--ivory); }
@media (max-width: 640px) {
  .leak { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .afterdark-pill { left: 12px; right: 12px; bottom: auto; top: 84px; font-size: 12px; }
  .make-form input { width: 100%; }
}
body.after-dark .calc output, body.after-dark .calc-out b, body.after-dark .cost-number { color: #F4F1EA; }
body.after-dark .calc-out b { color: #CFE3D8; }
body.after-dark .calc input[type="range"]::-webkit-slider-thumb { background: #F4F1EA; }
body.after-dark .calc input[type="range"]::-moz-range-thumb { background: #F4F1EA; }
.leak { left: auto; right: 20px; }
body.after-dark .leak { bottom: 80px; }
@media (max-width: 640px) { .leak { left: 12px; right: 12px; } body.after-dark .leak { bottom: 12px; } }
.leak { animation: none; }

/* setup sequence */
.boot { position: fixed; inset: 0; z-index: 60; background: #0E0E0E; color: #F4F1EA; display: grid; place-items: center; opacity: 0; transition: opacity 0.5s var(--ease); }
.boot.on { opacity: 1; }
.boot-in { width: min(640px, calc(100% - 48px)); }
.boot-title { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; margin-bottom: 36px; }
.boot-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.boot-lines li { display: flex; gap: 14px; align-items: baseline; font-size: 1.05rem; font-weight: 300; color: #C9C3B8; opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.boot-lines li::before { content: "✓"; color: #8FD1B0; font-weight: 500; }
.boot-lines li.in { opacity: 1; transform: none; }
.boot-lines li.last { font-family: var(--font-display); font-size: 1.5rem; color: #8FD1B0; margin-top: 10px; }
.boot-lines li.last::before { content: "●"; font-size: 0.7em; }

/* the lit building gets a glowing sign */
.skyline .yours-label.sign { fill: #E9C46A; opacity: 1; font: 400 15px var(--font-display); letter-spacing: 0.02em; text-transform: none; filter: drop-shadow(0 0 6px rgba(233, 196, 106, 0.8)); }

/* booking hours note */
.slots-note { margin-top: 14px; color: var(--emerald); font-size: 1rem; }
.slots-note b { font-weight: 500; }
.tier .price .from { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .tier.featured .price .from { color: #C8DACF; }