/* Green Chat public site. Every marketing rule is scoped to site mode so the shared app bundle and
   native shells keep their own visual system. No external fonts, images, trackers or CDN assets. */

html:not([data-gc-mode]) body { visibility: hidden; }
html[data-gc-mode="site"] #app { display: none !important; }
html[data-gc-mode="app"] .gc-site { display: none !important; }

html[data-gc-mode="site"] {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: #f5f8f7;
}

html[data-gc-mode="site"] *,
html[data-gc-mode="site"] *::before,
html[data-gc-mode="site"] *::after { box-sizing: border-box; }

html[data-gc-mode="site"] body {
  margin: 0;
  min-width: 320px;
  color: #13211d;
  background:
    radial-gradient(circle at 12% 4%, rgba(30, 186, 125, .08), transparent 26rem),
    radial-gradient(circle at 92% 18%, rgba(73, 109, 255, .06), transparent 29rem),
    #f5f8f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-gc-mode="site"] a { color: inherit; text-decoration: none; }
html[data-gc-mode="site"] img { display: block; max-width: 100%; }
html[data-gc-mode="site"] button,
html[data-gc-mode="site"] a { -webkit-tap-highlight-color: transparent; }

.gc-site {
  --ink: #13211d;
  --muted: #61706b;
  --line: rgba(18, 51, 41, .11);
  --panel: rgba(255, 255, 255, .82);
  --panel-solid: #fff;
  --green: #087f5b;
  --green-strong: #056b4c;
  --green-soft: #e7f8f0;
  --lime: #81f4b8;
  --shadow: 0 24px 70px rgba(22, 55, 44, .12);
  overflow: hidden;
}

.gc-site .shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.gc-site .section { padding: 108px 0; position: relative; }
.gc-site .skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow);
  transform: translateY(-180%);
}
.gc-site .skip-link:focus { transform: none; }

.gc-site .site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(21, 57, 46, .08);
  background: rgba(245, 248, 247, .83);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.gc-site .header-inner { min-height: 76px; display: flex; align-items: center; gap: 34px; }
.gc-site .brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.gc-site .brand img { filter: drop-shadow(0 6px 12px rgba(3, 103, 73, .18)); }
.gc-site .brand-copy { display: grid; line-height: 1.1; gap: 4px; }
.gc-site .brand-copy strong { font-size: 17px; font-weight: 700; letter-spacing: -.012em; }
.gc-site .brand-copy small { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.gc-site .main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.gc-site .main-nav a,
.gc-site .lang-link { color: #42534d; font-size: 14px; font-weight: 600; transition: color .2s ease; }
.gc-site .main-nav a:hover,
.gc-site .lang-link:hover { color: var(--green); }
.gc-site .header-actions { display: flex; align-items: center; gap: 15px; }

.gc-site .button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.gc-site .button:hover { transform: translateY(-2px); }
.gc-site .button:focus-visible,
.gc-site a:focus-visible,
.gc-site summary:focus-visible { outline: 3px solid rgba(8, 127, 91, .3); outline-offset: 3px; }
.gc-site .button-primary {
  color: #fff;
  background: linear-gradient(135deg, #0a8f67, #056f50);
  box-shadow: 0 13px 28px rgba(6, 118, 83, .23), inset 0 1px rgba(255,255,255,.2);
}
.gc-site .button-primary:hover { box-shadow: 0 17px 34px rgba(6, 118, 83, .3), inset 0 1px rgba(255,255,255,.2); }
.gc-site .button-secondary { border-color: rgba(18, 64, 49, .14); background: rgba(255,255,255,.72); color: #20332d; }
.gc-site .button-secondary:hover { border-color: rgba(8, 127, 91, .28); background: #fff; }
.gc-site .button-quiet { border-color: var(--line); background: rgba(255,255,255,.62); }
.gc-site .button-large { min-height: 56px; padding-inline: 25px; border-radius: 16px; }
.gc-site .button-small { min-height: 40px; padding-inline: 16px; border-radius: 12px; font-size: 13px; }

.gc-site .hero { padding: 91px 0 108px; }
.gc-site .hero-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); align-items: center; gap: 72px; min-width: 0; }
.gc-site .hero-grid > * { min-width: 0; }
.gc-site .hero-copy { position: relative; z-index: 2; width: 100%; }
.gc-site .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gc-site .status-dot,
.gc-site .availability i,
.gc-site .security-state i { width: 8px; height: 8px; border-radius: 50%; background: #22b47e; box-shadow: 0 0 0 5px rgba(34, 180, 126, .12); }
.gc-site h1,
.gc-site h2,
.gc-site h3,
.gc-site p { overflow-wrap: anywhere; }
.gc-site h1 {
  max-width: 730px;
  margin: 0;
  color: #10251e;
  font-size: clamp(48px, 5.7vw, 78px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 700;
}
.gc-site .hero-lead {
  max-width: 650px;
  margin: 30px 0 0;
  color: #50635c;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  letter-spacing: -.015em;
}
.gc-site .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.gc-site .hero-note { margin: 15px 0 0; color: #72807b; font-size: 13px; }
.gc-site .trust-list { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 32px 0 0; list-style: none; }
.gc-site .trust-list li { position: relative; padding-left: 20px; color: #465a53; font-size: 13px; font-weight: 650; }
.gc-site .trust-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }

.gc-site .product-stage { position: relative; min-width: 0; min-height: 550px; display: grid; place-items: center; }
.gc-site .glow { position: absolute; border-radius: 50%; filter: blur(2px); }
.gc-site .glow-one { width: 390px; height: 390px; top: 52px; right: 10px; background: radial-gradient(circle, rgba(67, 229, 157, .23), transparent 68%); }
.gc-site .glow-two { width: 330px; height: 330px; bottom: 0; left: 8%; background: radial-gradient(circle, rgba(99, 128, 255, .14), transparent 68%); }
.gc-site .app-window {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 670px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 25px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 42px 90px rgba(28, 64, 51, .18), 0 8px 25px rgba(28,64,51,.08);
  transform: perspective(1200px) rotateY(-3deg) rotateX(1.5deg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.gc-site .window-bar { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 18px; color: #586a64; border-bottom: 1px solid rgba(22,65,51,.08); font-size: 11px; font-weight: 750; }
.gc-site .window-dots { display: flex; gap: 6px; }
.gc-site .window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d5dfdc; }
.gc-site .window-dots i:first-child { background: #ff897f; }
.gc-site .window-dots i:nth-child(2) { background: #ffc963; }
.gc-site .window-dots i:last-child { background: #51d99d; }
.gc-site .window-lock { justify-self: end; color: #228765; font-size: 9px; }
.gc-site .app-layout { height: 390px; display: grid; grid-template-columns: 225px 1fr; }
.gc-site .chat-list { padding: 13px 10px; border-right: 1px solid rgba(22,65,51,.08); background: rgba(246,250,248,.75); }
.gc-site .mock-search { height: 31px; margin: 0 3px 10px; padding: 8px 11px; border-radius: 10px; color: #92a19c; background: #eaf0ee; font-size: 9px; }
.gc-site .mock-chat { min-height: 58px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; padding: 8px; border-radius: 12px; color: #2b4139; }
.gc-site .mock-chat.active { background: #e1f5ec; }
.gc-site .mock-chat span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.gc-site .mock-chat strong { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.gc-site .mock-chat small { overflow: hidden; color: #82918c; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.gc-site .mock-chat b { min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #10a471; font-size: 7px; }
.gc-site .avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 850; }
.gc-site .avatar-green { background: linear-gradient(135deg,#18bd83,#067654); }
.gc-site .avatar-violet { background: linear-gradient(135deg,#a58bff,#6d4bd5); }
.gc-site .avatar-blue { background: linear-gradient(135deg,#65a4ff,#396bd0); }
.gc-site .avatar-orange { background: linear-gradient(135deg,#ffb45d,#df713c); }
.gc-site .conversation { min-width: 0; display: grid; grid-template-rows: 57px 1fr 53px; background: linear-gradient(145deg,#f5fbf8,#eff6f3); }
.gc-site .conversation-head { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid rgba(22,65,51,.07); background: rgba(255,255,255,.67); }
.gc-site .conversation-head span:nth-child(2) { display: grid; gap: 1px; }
.gc-site .conversation-head strong { font-size: 9px; }
.gc-site .conversation-head small { color: #81908b; font-size: 7px; }
.gc-site .head-actions { color: #81908b; letter-spacing: 2px; }
.gc-site .messages { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; }
.gc-site .message { max-width: 78%; padding: 9px 11px 7px; border-radius: 13px; box-shadow: 0 3px 8px rgba(35,63,53,.05); }
.gc-site .message p { margin: 0; font-size: 8px; line-height: 1.45; }
.gc-site .message time { display: block; margin-top: 3px; color: #899691; font-size: 6px; text-align: right; }
.gc-site .message.incoming { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.gc-site .message.outgoing { align-self: flex-end; background: #d8f5e7; border-bottom-right-radius: 4px; }
.gc-site .offline-pill { align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 99px; color: #557169; background: rgba(255,255,255,.75); font-size: 6px; box-shadow: 0 4px 12px rgba(28,64,51,.06); }
.gc-site .offline-pill span { width: 5px; height: 5px; border-radius: 50%; background: #20b27d; }
.gc-site .composer { align-self: center; width: calc(100% - 28px); height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; border: 1px solid rgba(25,70,54,.09); border-radius: 12px; color: #98a49f; background: #fff; font-size: 8px; box-shadow: 0 5px 12px rgba(30,60,50,.05); }
.gc-site .composer b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #0a956a; font-size: 9px; }
.gc-site .floating-card { position: absolute; z-index: 4; min-width: 220px; display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.86); box-shadow: 0 18px 40px rgba(26,64,50,.15); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gc-site .floating-card-top { top: 42px; right: -22px; }
.gc-site .floating-card-bottom { bottom: 37px; left: -27px; }
.gc-site .floating-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 11px; color: #087e5a; background: #e1f8ed; font-size: 18px; }
.gc-site .floating-card span:last-child { display: grid; gap: 2px; }
.gc-site .floating-card strong { font-size: 10px; }
.gc-site .floating-card small { color: #778780; font-size: 7px; }

.gc-site .proof-strip { border-block: 1px solid var(--line); background: rgba(255,255,255,.55); }
.gc-site .proof-grid { min-height: 112px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; }
.gc-site .proof-grid > div { display: grid; gap: 4px; padding: 0 40px; border-left: 1px solid var(--line); }
.gc-site .proof-grid > div:first-child { padding-left: 0; border-left: 0; }
.gc-site .proof-grid strong { color: #163c2f; font-size: 16px; }
.gc-site .proof-grid span { color: var(--muted); font-size: 12px; }

.gc-site .section-heading { max-width: 710px; }
.gc-site .section-heading.centered { margin: 0 auto 54px; text-align: center; }
.gc-site .section-heading.centered .eyebrow { justify-content: center; }
.gc-site .section-heading h2,
.gc-site .privacy-copy h2,
.gc-site .final-card h2 { margin: 0; color: #132b23; font-size: clamp(36px,4.2vw,55px); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; }
.gc-site .section-heading > p:last-child,
.gc-site .section-lead { margin: 20px 0 0; color: var(--muted); font-size: 17px; }
.gc-site .feature-section { background: linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.68)); }
.gc-site .feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gc-site .feature-card { min-height: 285px; position: relative; overflow: hidden; padding: 29px; border: 1px solid var(--line); border-radius: 23px; background: var(--panel); box-shadow: 0 8px 35px rgba(30,63,52,.045); }
.gc-site .feature-card-wide { grid-column: span 2; }
.gc-site .feature-card::after { content:""; position:absolute; width:150px; height:150px; right:-80px; bottom:-85px; border-radius:50%; background:radial-gradient(circle,rgba(33,184,126,.09),transparent 70%); }
.gc-site .feature-card-accent { color: #eaf9f3; background: linear-gradient(145deg,#0d4938,#072e24); }
.gc-site .feature-card-accent::after { width: 270px; height: 270px; right: -100px; bottom: -160px; background: radial-gradient(circle,rgba(66,234,163,.2),transparent 70%); }
.gc-site .feature-number { position: absolute; right: 24px; top: 21px; color: #b9c4c0; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.gc-site .feature-card-accent .feature-number { color: rgba(255,255,255,.45); }
.gc-site .feature-icon { width: 47px; height: 47px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid rgba(8,127,91,.1); border-radius: 15px; color: var(--green); background: var(--green-soft); font-size: 23px; }
.gc-site .feature-card-accent .feature-icon { border-color: rgba(255,255,255,.1); color: #7af0b7; background: rgba(255,255,255,.08); }
.gc-site .feature-card h3 { margin: 0; color: #1a362d; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; }
.gc-site .feature-card-accent h3 { color: #fff; }
.gc-site .feature-card p { max-width: 560px; margin: 12px 0 0; color: #63736d; font-size: 14px; }
.gc-site .feature-card-accent p { color: #b9d3ca; }
.gc-site .mini-thread { position: absolute; right: 35px; bottom: 30px; width: 195px; display: grid; gap: 8px; }
.gc-site .mini-thread span { height: 24px; border-radius: 9px; background: #e7f1ed; }
.gc-site .mini-thread span:nth-child(2) { width: 75%; margin-left: auto; background: #d5f1e3; }
.gc-site .mini-thread span:nth-child(3) { width: 58%; }
.gc-site .server-line { max-width: 410px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 10px; margin-top: 24px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.06); font-size: 10px; }
.gc-site .server-line i { width: 7px; height: 7px; border-radius: 50%; background: #65e7aa; box-shadow: 0 0 0 4px rgba(101,231,170,.1); }
.gc-site .server-line b { color: #78efb6; font-size: 9px; }

.gc-site .privacy-section { background: #edf5f1; }
.gc-site .privacy-grid { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 92px; }
.gc-site .privacy-copy .section-lead { max-width: 650px; }
.gc-site .privacy-list { display: grid; gap: 25px; margin-top: 42px; }
.gc-site .privacy-list article { display: grid; grid-template-columns: 43px 1fr; gap: 16px; }
.gc-site .privacy-list article > span { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(8,127,91,.13); border-radius: 14px; color: var(--green); background: rgba(255,255,255,.65); font-size: 10px; font-weight: 850; }
.gc-site .privacy-list h3 { margin: 0; color: #1a392f; font-size: 17px; }
.gc-site .privacy-list p { margin: 6px 0 0; color: #65766f; font-size: 13px; }
.gc-site .security-panel { min-height: 620px; position: relative; display: grid; place-items: center; }
.gc-site .security-orbit { position: absolute; inset: 0; display: grid; place-items: center; }
.gc-site .orbit { position: absolute; border: 1px dashed rgba(15,129,92,.17); border-radius: 50%; }
.gc-site .orbit-one { width: 460px; height: 460px; animation: gc-spin 40s linear infinite; }
.gc-site .orbit-two { width: 345px; height: 345px; animation: gc-spin 28s linear infinite reverse; }
.gc-site .orbit::before,
.gc-site .orbit::after { content:""; position:absolute; width:12px; height:12px; border:4px solid #edf5f1; border-radius:50%; background:#25b980; box-shadow:0 4px 12px rgba(8,127,91,.2); }
.gc-site .orbit::before { left: 20%; top: 4%; }
.gc-site .orbit::after { right: 7%; bottom: 23%; }
.gc-site .shield-mark { width: 158px; height: 158px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.85); border-radius: 49px; background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(226,244,236,.8)); box-shadow: 0 30px 70px rgba(27,76,58,.15), inset 0 1px #fff; transform: rotate(45deg); }
.gc-site .shield-mark img { transform: rotate(-45deg); }
.gc-site .security-card { position: relative; z-index: 2; width: 325px; display: grid; justify-items: center; padding: 28px; border: 1px solid rgba(255,255,255,.87); border-radius: 25px; background: rgba(255,255,255,.8); box-shadow: 0 30px 70px rgba(26,66,51,.17); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.gc-site .security-state { display: flex; align-items: center; gap: 9px; color: #278665; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.gc-site .security-card > strong { margin-top: 26px; color: #1b3b30; font-size: 18px; text-align: center; }
.gc-site .security-card > small { margin-top: 4px; color: #7c8e87; font-size: 11px; }
.gc-site .pin-dots { display: flex; gap: 12px; margin: 28px 0; }
.gc-site .pin-dots i { width: 10px; height: 10px; border-radius: 50%; background: #0b8b64; box-shadow: 0 0 0 5px rgba(11,139,100,.08); }
.gc-site .security-card button { width: 100%; height: 43px; border: 1px solid rgba(8,127,91,.12); border-radius: 13px; color: #197b5b; background: #e7f7ef; font: inherit; font-size: 11px; font-weight: 750; pointer-events: none; }
.gc-site .honesty-note { position: absolute; z-index: 3; bottom: 12px; max-width: 470px; margin: 0; padding: 14px 16px; border-left: 3px solid #3eb98a; border-radius: 0 12px 12px 0; color: #60736c; background: rgba(255,255,255,.64); font-size: 11px; }
@keyframes gc-spin { to { transform: rotate(360deg); } }

.gc-site .download-section { background: #fbfcfc; }
.gc-site .download-heading { max-width: none; display: grid; grid-template-columns: 1fr 460px; align-items: end; gap: 60px; margin-bottom: 50px; }
.gc-site .download-heading > p { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.gc-site .platform-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gc-site .platform-card { min-height: 390px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: 0 10px 34px rgba(26,63,50,.045); }
.gc-site .platform-recommended { outline: 3px solid rgba(8,127,91,.12); outline-offset: 3px; }
.gc-site .platform-featured { border-color: rgba(8,127,91,.24); background: linear-gradient(155deg,#fff,#eefaf4); box-shadow: 0 18px 45px rgba(8,127,91,.1); }
.gc-site .platform-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gc-site .platform-icon { min-width: 47px; height: 47px; display: grid; place-items: center; padding: 0 9px; border-radius: 14px; color: #1a4838; background: #e8f4ef; font-size: 11px; font-weight: 900; }
.gc-site .availability { display: inline-flex; align-items: center; gap: 7px; color: #65766f; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.gc-site .availability i { width: 6px; height: 6px; box-shadow: none; }
.gc-site .availability.web i { background: #6f8ee9; }
.gc-site .platform-card h3 { margin: 28px 0 0; color: #18382d; font-size: 23px; letter-spacing: -.025em; }
.gc-site .platform-card > p { margin: 10px 0 0; color: #687971; font-size: 13px; }
.gc-site .platform-card dl { display: grid; gap: 7px; margin: 22px 0 21px; }
.gc-site .platform-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(20,60,47,.07); font-size: 10px; }
.gc-site .platform-card dt { color: #85938e; }
.gc-site .platform-card dd { margin: 0; color: #40534c; font-weight: 750; text-align: right; }
.gc-site .platform-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.gc-site .platform-actions .button { min-height: 44px; padding-inline: 10px; border-radius: 12px; font-size: 10px; white-space: nowrap; }
.gc-site .platform-card > small code { color: inherit; font-size: inherit; }
.gc-site .platform-button { width: 100%; margin-top: auto; }
.gc-site .platform-card > small { min-height: 33px; margin-top: 11px; color: #8a9792; font-size: 9px; line-height: 1.4; }
.gc-site .checksum { margin-top: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.72); }
.gc-site .checksum summary { padding: 17px 20px; color: #42564e; font-size: 12px; font-weight: 750; cursor: pointer; }
.gc-site .checksum > div { padding: 0 20px 19px; }
.gc-site .checksum p { margin: 14px 0 8px; color: var(--muted); font-size: 11px; }
.gc-site .checksum-list p:first-child { margin-top: 0; }
.gc-site .checksum code { display: block; overflow-x: auto; padding: 12px; border-radius: 10px; color: #1c5f49; background: #edf6f2; font-size: 11px; white-space: nowrap; }

.gc-site .principles-section { color: #e9f6f1; background: linear-gradient(145deg,#092b22,#0a3d2e); }
.gc-site .principles-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 105px; }
.gc-site .principles-section .eyebrow { color: #74e3ac; }
.gc-site .principles-section h2 { color: #fff; }
.gc-site .principle-list { display: grid; }
.gc-site .principle-list article { display: grid; grid-template-columns: 54px 1fr; gap: 21px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.11); }
.gc-site .principle-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }
.gc-site .principle-list article > span { color: #6ee0a9; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.gc-site .principle-list h3 { margin: 0; color: #fff; font-size: 19px; }
.gc-site .principle-list p { margin: 7px 0 0; color: #a8c2b8; font-size: 13px; }

.gc-site .faq-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 100px; }
.gc-site .faq-list { border-top: 1px solid var(--line); }
.gc-site .faq-list details { border-bottom: 1px solid var(--line); }
.gc-site .faq-list summary { position: relative; padding: 24px 45px 24px 0; color: #203d33; font-size: 17px; font-weight: 760; cursor: pointer; list-style: none; }
.gc-site .faq-list summary::-webkit-details-marker { display:none; }
.gc-site .faq-list summary::after { content:"+"; position:absolute; right:3px; top:22px; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:var(--green); background:var(--green-soft); font-size:20px; font-weight:400; transition:transform .2s ease; }
.gc-site .faq-list details[open] summary::after { transform: rotate(45deg); }
.gc-site .faq-list details p { max-width: 650px; margin: -5px 50px 23px 0; color: #65766f; font-size: 14px; }

.gc-site .final-cta { padding-top: 35px; }
.gc-site .final-card { overflow: hidden; position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; padding: 55px 60px; border-radius: 29px; color: #eaf8f3; background: linear-gradient(135deg,#0c523e,#087354); box-shadow: 0 28px 70px rgba(4,90,62,.2); }
.gc-site .final-card::after { content:""; position:absolute; width:410px; height:410px; right:-140px; top:-230px; border-radius:50%; background:radial-gradient(circle,rgba(117,246,181,.28),transparent 65%); }
.gc-site .final-card .eyebrow { color: #8cf0bd; }
.gc-site .final-card h2 { color: #fff; font-size: clamp(34px,4vw,49px); }
.gc-site .final-card p:last-child { max-width: 630px; margin: 14px 0 0; color: #b9d9cd; }
.gc-site .final-actions { position: relative; z-index: 2; display: flex; gap: 10px; }
.gc-site .final-card .button-primary { color: #07553d; background: #fff; box-shadow: 0 12px 25px rgba(0,0,0,.14); }
.gc-site .final-card .button-secondary { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }

.gc-site .site-footer { padding: 70px 0 25px; border-top: 1px solid var(--line); background: #eef3f1; }
.gc-site .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 60px; }
.gc-site .footer-brand > p { max-width: 310px; margin: 18px 0 0; color: #687872; font-size: 12px; }
.gc-site .footer-grid nav { display: grid; align-content: start; justify-items: start; gap: 11px; }
.gc-site .footer-grid nav strong { margin-bottom: 5px; color: #263f36; font-size: 12px; }
.gc-site .footer-grid nav a,
.gc-site .footer-grid nav span { color: #687872; font-size: 12px; }
.gc-site .footer-grid nav a:hover { color: var(--green); }
.gc-site .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 55px; padding-top: 22px; border-top: 1px solid var(--line); color: #7d8b86; font-size: 10px; }

@media (max-width: 1100px) {
  .gc-site .main-nav { gap: 18px; }
  .gc-site .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .gc-site .hero-copy { max-width: 800px; }
  .gc-site .product-stage { max-width: 760px; width: 100%; margin-inline: auto; }
  .gc-site .feature-grid { grid-template-columns: repeat(2,1fr); }
  .gc-site .feature-card-wide { grid-column: span 1; }
  .gc-site .mini-thread { display:none; }
  .gc-site .privacy-grid { gap: 45px; }
  .gc-site .platform-grid { grid-template-columns: repeat(2,1fr); }
  .gc-site .principles-grid,
  .gc-site .faq-grid { gap: 55px; }
  .gc-site .final-card { grid-template-columns: 1fr; }
  .gc-site .footer-grid { grid-template-columns: 1.5fr repeat(3,1fr); gap: 35px; }
}

@media (max-width: 820px) {
  html[data-gc-mode="site"] { scroll-padding-top: 72px; }
  .gc-site .shell { width: min(100% - 32px, 680px); }
  .gc-site .section { padding: 80px 0; }
  .gc-site .site-header { position: relative; }
  .gc-site .header-inner { min-height: 68px; }
  .gc-site .main-nav { display:none; }
  .gc-site .header-actions { margin-left:auto; }
  .gc-site .hero { padding-top: 65px; }
  .gc-site h1 { font-size: clamp(48px,12vw,70px); }
  .gc-site .app-window { transform: none; }
  .gc-site .floating-card-top { right: -4px; }
  .gc-site .floating-card-bottom { left: -4px; }
  .gc-site .proof-grid { grid-template-columns: 1fr; padding-block: 17px; }
  .gc-site .proof-grid > div { min-height: 66px; justify-content:center; padding: 12px 0; border-left:0; border-top:1px solid var(--line); }
  .gc-site .proof-grid > div:first-child { border-top:0; }
  .gc-site .privacy-grid,
  .gc-site .download-heading,
  .gc-site .principles-grid,
  .gc-site .faq-grid { grid-template-columns: 1fr; }
  .gc-site .privacy-grid { gap: 25px; }
  .gc-site .security-panel { min-height: 560px; }
  .gc-site .download-heading { gap: 22px; }
  .gc-site .principles-grid,
  .gc-site .faq-grid { gap: 45px; }
  .gc-site .final-card { padding: 42px 36px; }
  .gc-site .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .gc-site .footer-grid nav:last-child { display:none; }
}

@media (max-width: 590px) {
  .gc-site .shell { width: calc(100% - 24px); }
  .gc-site .section { padding: 68px 0; }
  .gc-site .brand-copy small { display:none; }
  .gc-site .header-actions .button { display:none; }
  .gc-site .hero { padding: 54px 0 70px; }
  .gc-site h1 { font-size: 48px; }
  .gc-site .hero-lead { font-size: 17px; }
  .gc-site .hero-actions { display:grid; }
  .gc-site .hero-actions .button { width:100%; }
  .gc-site .trust-list { display:grid; gap:9px; }
  .gc-site .product-stage { min-height: 450px; margin-top: 5px; }
  .gc-site .app-window { border-radius: 20px; }
  .gc-site .window-lock { display:none; }
  .gc-site .window-bar { grid-template-columns:1fr auto; }
  .gc-site .app-layout { height: 350px; grid-template-columns: 1fr; }
  .gc-site .chat-list { display:none; }
  .gc-site .floating-card { min-width: 205px; }
  .gc-site .floating-card-top { top: -17px; }
  .gc-site .floating-card-bottom { bottom: -16px; }
  .gc-site .feature-grid,
  .gc-site .platform-grid { grid-template-columns: 1fr; }
  .gc-site .feature-card { min-height: 250px; padding:24px; }
  .gc-site .section-heading h2,
  .gc-site .privacy-copy h2 { font-size: 39px; }
  .gc-site .security-panel { min-height: 540px; margin-inline:-10px; }
  .gc-site .orbit-one { width:390px; height:390px; }
  .gc-site .orbit-two { width:300px; height:300px; }
  .gc-site .security-card { width:min(310px,calc(100% - 30px)); }
  .gc-site .honesty-note { left:10px; right:10px; }
  .gc-site .platform-card { min-height: 370px; }
  .gc-site .platform-actions { grid-template-columns: 1fr; }
  .gc-site .checksum code { font-size: 9px; }
  .gc-site .final-card { padding: 35px 24px; border-radius:23px; }
  .gc-site .final-actions { display:grid; width:100%; }
  .gc-site .footer-grid { grid-template-columns: 1fr 1fr; gap:40px 25px; }
  .gc-site .footer-brand { grid-column:1 / -1; }
  .gc-site .footer-grid nav:last-child { display:grid; }
  .gc-site .footer-bottom { flex-direction:column; gap:7px; }
}

/* The public marketing site is intentionally light-only. The application itself still supports
   light, dark and system themes through ThemeController and the user's explicit setting. */

@media (prefers-reduced-motion: reduce) {
  html[data-gc-mode="site"] { scroll-behavior:auto; }
  .gc-site *, .gc-site *::before, .gc-site *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ── V80 — the boot screen: the first second the product owns ────────────────────────────────────

   Measured defect (probe var/ux-audit/tools/m_boot_v79.mjs, 390x844, app bundle throttled to a phone
   link, 2026-07-30): at t=120 ms, 350 ms, 700 ms and 1400 ms the client painted body
   rgb(243,247,245), visibleBoxes=1, svg/img=0 inside #app, text="" — a blank pale sheet. The strongest
   impression a phone app makes is the moment between the tap and the first screen, and GreenChat spent
   it looking broken.

   This lives in site.css and not in the app stylesheet on purpose. site.css is a single 12 KB file
   already linked in <head> of the served document, while the app CSS is only attached by site-loader.js
   after mode detection and the app bundle arrives later still — styling the boot screen there would
   mean styling it after the problem is over. Content-Security-Policy is style-src 'self', so an inline
   <style> would be blocked; this is the only correct place.

   Scoped to app mode: the marketing page hides #app entirely, so these rules never touch it. */

html[data-gc-mode="app"] .gc-boot {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* The exact page colour the shell paints, so the swap to the first screen is a content change and
     not a background flash. */
  background: #f3f7f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* A phone with a notch: the block is centred in the *safe* area, not in the raw viewport. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

html[data-gc-mode="app"] .gc-boot-mark {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(13, 152, 83, .22);
  animation: gc-boot-rise .5s cubic-bezier(.2, .7, .3, 1) both;
}

html[data-gc-mode="app"] .gc-boot-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #13211d;
  animation: gc-boot-rise .5s cubic-bezier(.2, .7, .3, 1) .06s both;
}

/* An indeterminate sweep, not a percentage: the client genuinely does not know how long the bundle
   takes. It is the smallest honest way to say "working", and it is the same green as the mark. */
html[data-gc-mode="app"] .gc-boot-bar {
  width: 132px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(13, 152, 83, .14);
}

html[data-gc-mode="app"] .gc-boot-bar > span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #19bd6e, #0d9853);
  animation: gc-boot-sweep 1.15s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes gc-boot-rise {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes gc-boot-sweep {
  from { transform: translateX(-115%); }
  to   { transform: translateX(240%); }
}

/* site-loader resolves the persisted app preference synchronously, before the app bundle. This
   explicit attribute wins over the OS so Light-on-dark-phone and Dark-on-light-phone never flash
   through the opposite surface. The media-query branch is only a defensive fallback for an older
   loader paired with this stylesheet during a rolling static-asset update. */
html[data-gc-mode="app"][data-gc-boot-theme="dark"] .gc-boot { background: #0f1512; }
html[data-gc-mode="app"][data-gc-boot-theme="dark"] .gc-boot-name { color: #e8f1ed; }
html[data-gc-mode="app"][data-gc-boot-theme="dark"] .gc-boot-bar { background: rgba(25, 189, 110, .18); }

@media (prefers-color-scheme: dark) {
  html[data-gc-mode="app"]:not([data-gc-boot-theme]) .gc-boot { background: #0f1512; }
  html[data-gc-mode="app"]:not([data-gc-boot-theme]) .gc-boot-name { color: #e8f1ed; }
  html[data-gc-mode="app"]:not([data-gc-boot-theme]) .gc-boot-bar { background: rgba(25, 189, 110, .18); }
}

/* Reduced motion still gets a boot screen — it simply stops moving. A static bar would read as a
   frozen app, so the sweep becomes a steady full-width line. */
@media (prefers-reduced-motion: reduce) {
  html[data-gc-mode="app"] .gc-boot-mark,
  html[data-gc-mode="app"] .gc-boot-name { animation: none; }
  html[data-gc-mode="app"] .gc-boot-bar > span { width: 100%; animation: none; }
}