/* Gappi website. Layout concept: a chat message on the left of the page's story becomes a booked time on the right;
   every section is one step further along that path. Colors and type come from the app itself (mint ground, white
   cards, deep teal ink, the mascot's orange antenna as the only warm accent). */
:root {
  --ground: #e4f6ef;          /* mint page ground */
  --ground-deep: #c9ede0;     /* second stop of the ground gradient */
  --card: #ffffff;
  --ink: #0d3b33;             /* deep teal text */
  --bezel: #0d3b33;           /* phone frame around screenshots */
  --ink-soft: #46655e;
  --teal: #0a7560;            /* primary, buttons */
  --teal-soft: #d3f1e6;       /* chips, pills */
  --orange: #f08a24;          /* antenna accent, used sparingly */
  --orange-soft: #ffe8d1;
  --cream: #fff6e8;           /* mascot body tone, chat bubbles */
  --line: #bfe3d6;
  --shadow: 0 1px 2px rgba(13, 59, 51, 0.06), 0 12px 32px rgba(13, 59, 51, 0.10);
  --on-teal: #ffffff;

  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.3rem + 2vw, 2.4rem);
  --step-4: clamp(2.25rem, 1.4rem + 3.8vw, 3.6rem);

  --radius-card: 22px;
  --radius-pill: 999px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 65ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b1f1b;
    --ground-deep: #10302a;
    --card: #132c27;
    --ink: #e6f5f0;
    --bezel: #02100d;
    --ink-soft: #a6c4bc;
    --teal: #3ccaa4;
    --teal-soft: #1b4239;
    --orange: #ffa552;
    --orange-soft: #4a2f17;
    --cream: #1c3a33;
    --line: #24483f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --on-teal: #062019;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0b1f1b;
  --ground-deep: #10302a;
  --card: #132c27;
  --ink: #e6f5f0;
  --bezel: #02100d;
  --ink-soft: #a6c4bc;
  --teal: #3ccaa4;
  --teal-soft: #1b4239;
  --orange: #ffa552;
  --orange-soft: #4a2f17;
  --cream: #1c3a33;
  --line: #24483f;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --on-teal: #062019;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  background-image: radial-gradient(120% 60% at 0% 0%, var(--ground-deep), transparent 60%),
                    radial-gradient(80% 50% at 100% 30%, var(--ground-deep), transparent 60%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; }
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 34ch; }
.eyebrow {
  font-family: var(--font-data); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal);
}

/* Header */
.site-header { padding-block: 18px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; }
.brand svg { width: 38px; height: 42px; }
.nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: var(--step--1); }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; }
.nav a:hover { color: var(--teal); }
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--card);
  box-shadow: var(--shadow); }
.lang a { padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-data); font-size: 0.78rem; }
.lang a[aria-current="true"] { background: var(--teal); color: var(--on-teal); }

/* Hero */
.hero { padding-block: clamp(24px, 5vw, 64px) clamp(24px, 4vw, 48px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: var(--radius-pill);
  font-weight: 700; text-decoration: none; font-family: var(--font-display); font-size: 1.05rem; }
.button-primary { background: var(--teal); color: var(--on-teal); box-shadow: var(--shadow); }
.button-primary:hover { filter: brightness(1.06); }
.button-quiet { color: var(--ink); background: transparent; border: 2px solid var(--line); }
.button svg { width: 20px; height: 20px; }
.fineprint { font-size: var(--step--1); color: var(--ink-soft); }

/* The hero demo: a message, what Gappi read, the time it offers */
.demo { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.demo-mascot { position: absolute; right: -6px; top: -54px; width: 92px; height: 104px; }
.bubble { align-self: flex-start; max-width: 92%; background: var(--card); border-radius: 22px 22px 22px 6px;
  padding: 14px 18px; box-shadow: var(--shadow); }
.bubble .from { display: block; font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 4px; }
.bubble mark { background: var(--orange-soft); color: inherit; border-radius: 6px; padding: 0 3px; }
.understood { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-left: 4px; }
.understood .label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; width: 100%; }
.chip { font-family: var(--font-data); font-size: 0.8rem; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--teal-soft); color: var(--ink); white-space: nowrap; }
.slot-card { background: var(--card); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px; }
.slot-card .label { font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; }
.slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--teal); color: var(--on-teal); border-radius: 16px; padding: 12px 14px; font-weight: 700; }
.slot .best { font-size: 0.75rem; background: var(--card); color: var(--orange); border-radius: var(--radius-pill); padding: 2px 10px; }
.slot-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot-actions span { text-align: center; padding: 10px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem; }
.slot-actions .confirm { background: var(--teal); color: var(--on-teal); }
.slot-actions .other { background: var(--teal-soft); color: var(--ink); }

/* Sections */
.section { padding-block: clamp(32px, 5vw, 64px); }
.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(24px, 4vw, 44px); max-width: 46rem; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); }

/* How it works: five real steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.steps li { background: var(--card); border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.steps li::before { counter-increment: step; content: counter(step); font-family: var(--font-data); font-weight: 700;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); }
.steps li:last-child::before { background: var(--teal); color: var(--on-teal); }
.steps p { color: var(--ink-soft); font-size: 0.95rem; }

/* Languages */
.texts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.text-card { background: var(--card); border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.text-card .lang-name { font-family: var(--font-data); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.text-card blockquote { margin: 0; font-size: 1.1rem; font-weight: 600; background: var(--cream); border-radius: 18px 18px 18px 6px; padding: 12px 14px; }
.text-card blockquote mark { background: var(--orange-soft); color: inherit; border-radius: 6px; padding: 0 3px; }
.text-card .read { display: flex; flex-wrap: wrap; gap: 6px; }

/* Sources */
.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.source { background: var(--card); border-radius: var(--radius-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.source .tag { align-self: flex-start; font-family: var(--font-data); font-size: 0.75rem; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--teal-soft); color: var(--teal); }
.source p { color: var(--ink-soft); }

/* Screens */
.screens { display: flex; gap: clamp(14px, 3vw, 28px); justify-content: center; flex-wrap: wrap; }
.phone { width: min(240px, 72vw); border-radius: 36px; padding: 8px; background: var(--bezel); box-shadow: var(--shadow); }
.phone img { display: block; width: 100%; height: auto; border-radius: 28px; }
.screens figcaption { text-align: center; color: var(--ink-soft); font-size: var(--step--1); margin-top: 10px; }
.screens figure { margin: 0; display: flex; flex-direction: column; align-items: center; }

/* Privacy band */
.privacy-band { background: var(--card); border-radius: 32px; padding: clamp(24px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.privacy-band .section-head { margin-bottom: 0; }
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; }
.facts li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.55em; border-radius: 50%; background: var(--teal); }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 52rem; }
.faq details { background: var(--card); border-radius: 18px; padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; }
.faq details p { margin-top: 10px; color: var(--ink-soft); max-width: var(--measure); }

/* Long-form pages (privacy, support) */
.doc { padding-block: clamp(24px, 5vw, 56px) clamp(48px, 8vw, 96px); }
.doc article { background: var(--card); border-radius: 28px; padding: clamp(22px, 5vw, 56px); max-width: 52rem; margin-inline: auto;
  display: flex; flex-direction: column; gap: 18px; }
.doc article h1 { font-size: var(--step-3); }
.doc article h2 { font-size: var(--step-2); margin-top: 14px; }
.doc article p, .doc article li { max-width: var(--measure); }
.doc article ul, .doc article ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.doc .updated { color: var(--ink-soft); font-size: var(--step--1); }
.contact-box { background: var(--teal-soft); border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.contact-box .address { font-family: var(--font-data); font-size: 1.05rem; user-select: all; }

/* Footer */
.site-footer { padding-block: 36px 48px; color: var(--ink-soft); font-size: var(--step--1); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-soft); }
.site-footer .brand { font-size: 1.05rem; }
.site-footer .brand svg { width: 28px; height: 31px; }

/* Mascot motion: a gentle wave and bob, nothing else moves */
.mascot .arm-wave { transform-origin: 152px 150px; animation: wave 2.6s ease-in-out infinite; }
.mascot .bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(6deg); } 90% { transform: rotate(-10deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.demo .slot-card { animation: lift 0.7s cubic-bezier(.2,.8,.2,1) 0.2s both; }
@keyframes lift { from { transform: translateY(10px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .mascot .arm-wave, .mascot .bob, .demo .slot-card { animation: none; }
}

/* Narrow screens */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .demo { margin-top: 40px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:last-child { grid-column: 1 / -1; }
  .texts { grid-template-columns: minmax(0, 1fr); }
  .privacy-band { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .sources { grid-template-columns: minmax(0, 1fr); }
  .nav .nav-links { display: none; }
  .demo-mascot { width: 72px; height: 82px; top: -46px; }
  .bubble { max-width: calc(100% - 64px); }
  /* Screens become a swipeable row instead of three tall phones in a column */
  .screens { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); }
  .screens figure { flex: none; scroll-snap-align: start; }
  .phone { width: 62vw; }
}