/* Bantergram marketing site.
   Loads after /assets/relay-style.css and /assets/relay-alive.css (the owner's
   design system, minified). This file only adds what those two do not cover:
   SVG glyphs, the collapsing header, the new sections and pages, and the
   mobile / RTL / long-translation fixes. Logical properties on purpose. */

/* ---------- glyphs (SVG stand-ins for the design's text glyphs) ---------- */
.glyph {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

body { overflow-x: clip; }
img { max-width: 100%; }

/* ---------- headline lines ----------
   Every line is its own element so it can carry its own data-i18n key and
   wrap freely in longer languages. */
.ln { display: block; font-style: normal; }
.alive-hero h1 .tint,
.play-heading h2 .tint,
.alive-closing h2 .tint,
.steps-head h2 .tint,
.page-hero h1 .tint { color: var(--blue); }
.human-copy h2 .tint { color: #7c95d3; }
.studio-heading h2 .tint { color: #a3a9ba; }
h1, h2, h3 { overflow-wrap: break-word; }

.headline-spark { margin-left: 0; margin-inline-start: 18px; line-height: 1; }
.headline-spark .glyph { display: block; }
.mini-spark, .little-wave, .launcher-spark { display: inline-flex; line-height: 1; }

/* Longer languages get a calmer headline so nothing overflows at 360px. */
html:not([lang="en"]) .alive-hero h1 {
  font-size: clamp(38px, 10.5vw, 76px);
  letter-spacing: -0.045em;
  line-height: 1.05;
}
html:not([lang="en"]) .headline-spark { display: none; }

/* ---------- header ---------- */
.site-nav { position: relative; gap: 20px; z-index: 30; }
.site-nav .logo { letter-spacing: -1.5px; }
.site-menu {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-inline-start: auto;
  min-width: 0;
}
.site-nav .site-menu nav { margin: 0; margin-inline-end: 6px; gap: 6px; font-size: 14px; }
.site-nav nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 11px;
  border-radius: 100px;
  white-space: nowrap;
}
.site-nav nav a[aria-current="page"] { color: var(--blue); background: #f1f5ff; }
.site-nav .nav-cta { font-size: 13px; min-height: 44px; gap: 14px; white-space: nowrap; }
.lang-picker {
  height: 44px;
  max-width: 160px;
  padding-inline: 12px;
  border: 1px solid #e0e7ff;
  border-radius: 100px;
  background: #fff;
  color: #656a78;
  font-size: 13px;
  cursor: pointer;
}
.menu-toggle {
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-inline-start: auto;
  border: 1px solid #e0e7ff;
  border-radius: 15px;
  background: #f1f5ff;
  color: var(--blue);
}
.menu-toggle .icon-close-state { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open-state { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close-state { display: block; }

@media (max-width: 1020px) {
  .menu-toggle { display: grid; }
  .site-menu {
    display: none;
    position: absolute;
    inset-inline: 16px;
    top: calc(100% - 8px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e0e7ff;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 60px #223b7926;
  }
  .site-menu.open { display: flex; }
  .site-nav .site-menu nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: 16px;
    color: #3d4660;
  }
  .site-nav nav a { min-height: 50px; padding-inline: 14px; border-radius: 14px; white-space: normal; }
  .site-nav nav a:hover { background: #f5f7ff; }
  .lang-picker { width: 100%; max-width: none; height: 48px; font-size: 16px; border-radius: 14px; }
  .site-nav .nav-cta { font-size: 15px; min-height: 52px; justify-content: space-between; padding-inline: 20px; }
}

/* ---------- buttons as links ---------- */
a.button { text-align: center; }
.button .glyph { font-size: 1.15em; }
.text-action .glyph, .quiet-link .glyph { font-size: 1.1em; }
.hero-copy .quiet-link { min-height: 44px; }
.text-action { min-height: 44px; }
a.text-action { display: inline-flex; }

/* ---------- design tweaks that the SVG swap needs ---------- */
.mirror-avatar { rotate: 0deg; font-size: 20px; }
.feature-ribbon b { rotate: 0deg; display: inline-flex; font-size: 17px; }
.telegram-sticker .glyph { font-size: 32px; }
.photo-sticker b { display: inline-flex; }
.mirror-head > span:last-child { letter-spacing: 0; display: inline-flex; font-size: 20px; }
.panel-label span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.preview-head > span:last-child { display: inline-flex; }
.chat-msg small .glyph { font-size: 12px; margin-inline-start: 3px; }
.swatches button { display: grid; place-items: center; }
.swatches button .glyph { font-size: 13px; stroke-width: 2.6; }
.custom-color > span { display: inline-flex; font-size: 15px; }
.more-options summary span { display: inline-flex; }
.canvas-type > span { font-size: 22px; }
.pending-tile > button .glyph { font-size: 11px; stroke-width: 2.4; }
.lightbox-close, .dialog-close { display: grid; place-items: center; }
.lightbox-close .glyph { font-size: 16px; }
.demo-disclosure button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding-inline: 8px; }

/* Swatch colours without inline style attributes (CSP). */
.swatches [data-color="#315cff"] { --swatch: #315cff; }
.swatches [data-color="#8d58db"] { --swatch: #8d58db; }
.swatches [data-color="#14756b"] { --swatch: #14756b; }
.swatches [data-color="#d75740"] { --swatch: #d75740; }
.swatches [data-color="#252733"] { --swatch: #252733; }

/* The smile button opens plain-text smileys, not emoji. */
.emoji-picker button {
  min-width: 44px;
  min-height: 40px;
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  color: #4b618b;
}

/* ---------- how it works ---------- */
.steps-section { padding-block: clamp(46px, 7vw, 84px) clamp(50px, 7vw, 90px); }
.steps-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px 30px;
  margin-bottom: clamp(26px, 4vw, 40px);
}
.steps-head h2 {
  font-size: clamp(36px, 4.4vw, 49px);
  letter-spacing: -0.055em;
  font-weight: 500;
  line-height: 1.1;
  margin-top: 17px;
}
.steps-head > p { font-size: 16px; line-height: 1.7; color: #8390a7; max-width: 36ch; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid #e2e6ef;
  border-radius: 23px;
  background: #fff;
}
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.step-num { font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 1.5px; color: #7e88a3; }
.tile-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: #edf2ff;
  color: var(--blue);
  rotate: -6deg;
  flex-shrink: 0;
}
.tile-icon .icon { width: 24px; height: 24px; }
.step h3 { font-size: 23px; font-weight: 500; letter-spacing: -0.9px; line-height: 1.2; }
.step p { font-size: 15px; line-height: 1.7; color: #7d879a; margin-block: 10px 22px; }
.step-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: auto;
  padding: 12px 14px;
  border: 1px dashed #d3ddf6;
  border-radius: 13px;
  background: #f7f9ff;
  color: #6c7fa8;
  font-size: 13px;
}
.step-visual .icon { width: 18px; height: 18px; color: #8ea2c9; }
.step-visual code,
.step-visual span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.step-visual code { font-size: 12px; direction: ltr; }
.steps-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 22px;
  padding: 18px clamp(18px, 2.4vw, 28px);
  border-radius: 23px;
  background: #eef3ff;
  border: 1px solid #e2eaff;
}
.steps-foot > span { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #526685; line-height: 1.5; }
.steps-foot .icon { color: var(--blue); }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .steps-foot .button { width: 100%; }
}

/* ---------- sub-page hero ---------- */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding-block: clamp(22px, 5vw, 56px) clamp(28px, 4vw, 48px);
}
.page-hero h1 {
  font-size: clamp(40px, 6.6vw, 74px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.055em;
  margin-block: 20px 22px;
}
.page-hero p { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.75; color: #7d879a; max-width: 58ch; }
.page-mascot {
  width: clamp(170px, 20vw, 250px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #edf3ff;
  overflow: hidden;
  box-shadow: 0 0 75px #dbe7ff60;
  rotate: 6deg;
}
.page-mascot img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; }
@media (max-width: 720px) {
  .page-hero { grid-template-columns: 1fr; }
  .page-mascot { display: none; }
}

.band { background: #eef3ff; border-block: 1px solid #e5edfe; }
.section { padding-block: clamp(40px, 6vw, 76px); }
.section-head { margin-bottom: clamp(22px, 3vw, 34px); }
.section-head h2 {
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.12;
  margin-top: 14px;
}
.section-head p { font-size: 16px; line-height: 1.7; color: #7d879a; margin-top: 12px; max-width: 60ch; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
}
.chip.live { background: #e4f4ea; color: #2c7449; }
.chip.soon { background: #edf2ff; color: #5b76b8; }
.chip.plan { background: #fff; border: 1px solid #dfe5f3; color: #68789c; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- addon cards ---------- */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 18px;
}
.addon {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 28px);
  border: 1px solid #e2e6ef;
  border-radius: 23px;
  background: #fff;
}
.addon-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.addon h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.8px; line-height: 1.2; }
.addon p { font-size: 15px; line-height: 1.7; color: #7d879a; margin-top: 10px; }
.addon ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.addon li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: #5f6c88; }
.addon li .glyph { color: var(--blue); margin-top: 4px; font-size: 14px; stroke-width: 2.4; }
.addon-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; }
.addon.is-soon { background: #fcfdff; border-style: dashed; border-color: #d9e1f2; }
.addon.is-soon .tile-icon { background: #f3f5fb; color: #7f90b6; }

.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 23px;
  background: #eef3ff;
  border: 1px solid #e2eaff;
}
.cta-strip h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.15; }
.cta-strip p { font-size: 15px; line-height: 1.7; color: #6f7f9f; margin-top: 8px; max-width: 52ch; }
@media (max-width: 640px) { .cta-strip .button { width: 100%; } }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid #e2e6ef;
  border-radius: 23px;
  background: #fff;
}
.plan.featured { border-color: #b9c8ff; background: linear-gradient(#f4f7ff, #fff 45%); box-shadow: 0 20px 45px #314da715; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.plan-name { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -0.5px; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 18px; }
.plan-price strong { font-family: 'Space Grotesk', sans-serif; font-size: clamp(46px, 5vw, 58px); font-weight: 500; letter-spacing: -3px; line-height: 1; }
.plan-price span { font-size: 14px; color: #8d97ab; }
.plan-for { font-size: 15px; line-height: 1.65; color: #7d879a; margin-top: 14px; }
.plan ul { margin: 22px 0 26px; padding: 22px 0 0; border-top: 1px solid #edf0f6; list-style: none; display: grid; gap: 12px; }
.plan li { display: flex; gap: 11px; font-size: 15px; line-height: 1.55; color: #4f5b78; }
.plan li .glyph { color: var(--blue); margin-top: 4px; font-size: 15px; stroke-width: 2.4; }
.plan .button { width: 100%; margin-top: auto; }
.plan .button.ghost { background: #edf0ff; color: var(--blue); }
.plans-note { font-size: 14px; line-height: 1.7; color: #8d97ab; margin-top: 18px; text-align: center; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

.compare { border: 1px solid #e2e6ef; border-radius: 23px; background: #fff; overflow: hidden; }
.compare .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare table { min-width: 560px; font-size: 14px; }
.compare th, .compare td { padding: 15px 18px; text-align: start; }
.compare thead th { background: #f4f7ff; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 15px; }
.compare tbody th { font-weight: 500; color: #4f5b78; background: none; }
.compare td, .compare td:last-child { color: #68789c; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare-hint { display: none; font-size: 12px; color: #9aa6bd; padding: 10px 18px 0; }
@media (max-width: 640px) { .compare-hint { display: block; } }

.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border: 1px solid #e2e6ef; border-radius: 17px; background: #fff; padding-inline: 20px; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding-block: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #2c3550;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .glyph { color: #8393b6; transition: transform .2s; font-size: 16px; }
.faq details[open] summary .glyph { transform: rotate(45deg); }
.faq details p { font-size: 15px; line-height: 1.75; color: #6f7b95; padding-bottom: 20px; max-width: 70ch; }

/* ---------- prose (privacy, terms) ---------- */
.prose { max-width: 760px; padding-bottom: clamp(50px, 7vw, 90px); }
.prose h2 { font-size: clamp(23px, 2.6vw, 28px); font-weight: 500; letter-spacing: -0.035em; margin-block: 38px 12px; }
.prose p, .prose li { font-size: 16px; line-height: 1.8; color: #5a6680; }
.prose p + p { margin-top: 12px; }
.prose ul { margin: 12px 0 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { font-size: 13px; color: #9aa6bd; }
.prose .callout {
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: 17px;
  background: #eef3ff;
  border: 1px solid #e2eaff;
}
.prose .callout p { color: #4d6190; }

/* ---------- footer ---------- */
.site-footer { flex-wrap: wrap; border-top: 1px solid #e7ebf4; margin-top: 0; }
.site-footer > span { font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 14px; color: #68748e; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 9px; }
.footer-links a:hover { color: var(--blue); }
.no-launcher footer { padding-bottom: 25px !important; }
@media (max-width: 560px) {
  .site-footer > span { font-size: 13px; line-height: 1.6; }
  .footer-links { width: 100%; margin-inline-start: -9px; }
}

/* ---------- RTL touch-ups for the shared design CSS ---------- */
[dir="rtl"] .rich-head > span,
[dir="rtl"] .mirror-head > span:last-child,
[dir="rtl"] .mirror-topic span,
[dir="rtl"] .preview-head > span:last-child { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chat-send { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .chat-msg small { text-align: left; }
[dir="rtl"] .alive-hero h1,
[dir="rtl"] .play-heading h2,
[dir="rtl"] .human-copy h2,
[dir="rtl"] .studio-heading h2,
[dir="rtl"] .alive-closing h2 { letter-spacing: 0; }
[dir="rtl"] .alive-closing > .wrap > img { margin-right: 0; margin-left: 45px; }

/* ---------- readable type and real tap targets on phones ---------- */
@media (max-width: 800px) {
  .pill-label, .section-index, .human-copy .section-index, .alive-closing .section-index,
  .play-heading .section-index { font-size: 11px; letter-spacing: 1px; line-height: 1.6; }
  .panel-label, .panel-label span:last-child, .panel-label > span:last-child { font-size: 11px; }
  .feature-ribbon > span { font-size: 13px; }
  .human-stamps { font-size: 12px; flex-wrap: wrap; }
  .photo-caption { font-size: 10px; }
  .photo-notification strong { font-size: 13px; }
  .photo-notification div > span { font-size: 12px; }
  .hello-sticker > span { font-size: 11px; }
  .hello-sticker b { font-size: 12px; }
  .voice-sticker > span:last-child, .photo-sticker > span { font-size: 11px; }
  .hero-copy .button { font-size: 14px; }
  .hero-copy .quiet-link { font-size: 14px; }
  .hero-fineprint { font-size: 12px; }
  .canvas-top, .preview-badge { font-size: 10px; }
  .preview-head div > span { font-size: 11px; }
  .suggestion, .preview-compose { font-size: 12px; }
  .mirror-topic span, .rich-head > span { font-size: 10px; }
  .floating-top { font-size: 10px; }
  .recording-bar .record-label, .recording-bar button { font-size: 12px; }
}

@media (max-width: 580px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .hero-copy .hero-actions { flex-wrap: wrap; gap: 8px 18px; }
  .hero-copy .button { min-height: 50px; padding: 14px 20px; }
  .feature-ribbon > span { width: 100%; white-space: normal; justify-content: center; }
  .try-actions { max-width: 100%; }
  .try-pill { min-height: 44px; font-size: 13px; }
  .tool-button, .rich-chat .tool-button { width: 44px; min-width: 44px; height: 44px; }
  .chat-toolbar { gap: 0; }
  .chat-send { height: 44px; min-width: 76px; font-size: 13px; }
  .quick-demo { flex-wrap: wrap; }
  .quick-demo button, .floating-panel .quick-demo button { min-height: 44px; padding-inline: 14px; font-size: 12px; }
  .mirror-compose button { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; }
  .recording-bar { flex-wrap: wrap; }
  .recording-bar button { min-height: 44px; padding-inline: 12px; }
  .pending-tile > button { width: 28px; height: 28px; }
  .swatches { flex-wrap: wrap; gap: 8px; }
  .swatches button, .swatches .custom-color { width: 44px; height: 44px; }
  .studio-controls > input, .studio-controls textarea, .studio-controls select { min-height: 48px; }
  .more-options summary { min-height: 44px; align-items: center; }
  .switch-row { min-height: 44px; }
  .switch-row input { width: 44px; height: 26px; }
  .switch-row input:before { width: 20px; height: 20px; }
  .switch-row input:checked:before { transform: translateX(18px); }
  [dir="rtl"] .switch-row input:checked:before { transform: translateX(18px); }
  .save-design { min-height: 52px; font-size: 15px; }
  .floating-launcher { min-height: 50px; }
  .floating-launcher > span { font-size: 13px; }
  .floating-top button { width: 44px; height: 44px; }
  .alive-closing .button { min-height: 50px; font-size: 14px; }
  .steps-head > p { max-width: none; }
  .human-photo > img { height: min(355px, 86vw); }
}

@media (max-width: 380px) {
  .alive-hero h1 { font-size: clamp(48px, 16.2vw, 59px); letter-spacing: -0.065em; }
  .hero-copy .button { font-size: 13px; }
  .hero-copy .quiet-link { font-size: 13px; }
  .site-nav .logo { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.tx { font-style: normal; }