/* ==========================================================================
   Linebooth — landing page
   Palette, type and motion match the app (organic v5.5 skin):
   one easing curve cubic-bezier(.22,1,.36,1); durations .18 / .22 / .26 / .42;
   transform + opacity only; loops only while something is live.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light dark;

  --bg:            #f5ead8;
  --surface:       #ebddc5;
  --surface-2:     #f9f4ed;
  --ink:           #201e1d;
  --muted:         #5f5b55;          /* 70% ink over cream — AA on both bg and surface */
  --accent:        #c67139;
  --accent-ink:    #8c491a;          /* accent as TEXT on cream: 6.1:1 */
  --accent-soft:   #ffe1d0;
  --line:          color-mix(in srgb, #201e1d 14%, transparent);
  --line-strong:   color-mix(in srgb, #201e1d 26%, transparent);

  /* the prompter panel is dark in BOTH themes — that is what a prompter is.
     On cream the panel already separates itself, so it needs no edge; the
     line/dim/highlight strengths below are re-stated for dark, where the panel
     and the page are both dark and the difference has to be built by hand. */
  --panel:         #221d18;
  --panel-2:       #2e2720;
  --panel-ink:     #f7efe1;
  --panel-line:    transparent;
  --ln-past:       60%;              /* past lines: 5.6:1 on the panel */
  --ln-next:       74%;
  --said-bg:       color-mix(in srgb, var(--accent) 34%, transparent);
  --said-ink:      inherit;
  --place-ink:     #f0a36c;          /* on #221d18: 8.4:1 */

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 12%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-lg: 0 14px 36px color-mix(in srgb, #2e2b25 18%, transparent);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;

  --s1: 4.4px;  --s2: 8.8px;  --s3: 13.2px;
  --s4: 17.6px; --s6: 26.4px; --s8: 35.2px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-tap: .18s;  --t-exit: .22s;  --t-panel: .26s;  --t-glide: .42s;

  --font-display: "Caprasimo", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", sans-serif;

  --page: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #221d18;
    --surface:     #372e25;          /* was #2e2720 — chips and the Studio card
                                        were within 1.14:1 of the page */
    --surface-2:   #2a231d;
    --ink:         #f7efe1;
    --muted:       #b8b0a4;          /* 70% cream over dark — 7.8:1 */
    --accent:      #c67139;
    --accent-ink:  #f6a06b;          /* accent as TEXT on dark: 8.1:1 */
    --accent-soft: #4d3526;
    --line:        color-mix(in srgb, #f7efe1 16%, transparent);
    --line-strong: color-mix(in srgb, #f7efe1 30%, transparent);

    /* the prompter, rebuilt for a dark page: a warmer surface that sits ABOVE
       the page instead of below it, an edge that carries the separation the
       luminance cannot (#71685d over the panel — 3.06:1 against the page),
       past lines dimmed less, and a solid terracotta highlight instead of a
       34% wash that measured 1.64:1 against the panel. */
    --panel:       #372e25;          /* was #1b1713 — darker than the page */
    --panel-2:     #453a2f;
    --panel-line:  var(--line-strong);
    --ln-past:     74%;              /* #c5bdb0 — 7.1:1 on the panel */
    --ln-next:     86%;              /* #dcd4c7 — 9.0:1 */
    --said-bg:     var(--accent);    /* #c67139 — 3.7:1 against the panel */
    --said-ink:    #241f1a;          /* on the highlight: 4.5:1 */
    --place-ink:   #f0a36c;          /* on #372e25: 6.4:1 */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .30);
    --shadow-md: 0 3px 10px rgb(0 0 0 / .34);
    --shadow-lg: 0 14px 36px rgb(0 0 0 / .42);
  }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-panel) ease;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.wrap { width: min(100% - 2 * var(--s6), var(--page)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: var(--s2);
  background: var(--surface); color: var(--ink);
  padding: var(--s2) var(--s4); border-radius: var(--r-md); z-index: 20;
}
.skip:focus { left: var(--s4); }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-ink);
}
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--s6);
  border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; font-weight: 600; font-size: 16px;
  cursor: pointer; text-decoration: none;
  transition: background var(--t-tap) ease, color var(--t-tap) ease,
              transform var(--t-tap) var(--ease), box-shadow var(--t-tap) ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent); color: #201e1d;   /* 4.6:1 — AA */
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: #d67f48; box-shadow: var(--shadow-md); }
.btn--quiet {
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.btn--quiet:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn--sm { min-height: 38px; padding: 0 var(--s3); font-size: 14px; }

/* ---------------------------------------------------------------- header */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
}
.top__logo { display: block; line-height: 0; }
/* the .com lockup, +25% on the wordmark it replaced (156px → 195px) */
.top__logo img { width: 195px; }
.top__nav { display: flex; align-items: center; gap: var(--s2); }
.top__lang {
  min-height: 38px; display: inline-flex; align-items: center;
  padding-inline: var(--s3); border-radius: var(--r-md);
  color: var(--ink); font-size: 15px; font-weight: 600;
  transition: background var(--t-tap) ease;
}
.top__lang:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); text-decoration: none; }
/* the header CTA is redundant next to the hero's own — hide it on phones */
@media (max-width: 559px) {
  .top__cta { display: none; }
  .top__logo img { width: 165px; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  display: grid; gap: var(--s8) var(--s8);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--s6) var(--s8);
  align-items: center;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-block: var(--s8) calc(var(--s8) * 1.4); }
}
.hero h1 {
  font-size: clamp(38px, 7.4vw, 62px);
  margin-bottom: var(--s4);
}
.hero__sub {
  font-size: clamp(16px, 1.9vw, 18px);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: var(--s6);
}
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta__note { margin-top: var(--s3); font-size: 14px; color: var(--muted); }

/* ---------------------------------------------------------------- prompter */
.stage { display: grid; gap: var(--s4); }
.prompter {
  background: var(--panel);
  color: var(--panel-ink);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s4) var(--s4) var(--s6);
  overflow: hidden;
}
.prompter__bar {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3);
}
.prompter__place {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--place-ink);
  background: color-mix(in srgb, var(--place-ink) 14%, transparent);
  padding: 5px var(--s3); border-radius: 999px;
  white-space: nowrap;
}
.prompter__spacer { flex: 1 1 auto; }

/* the mic disc — breathes only while the prompter is live */
.mic { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.mic__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
}
.mic__disc svg { width: 26px; height: 26px; display: block; }
.mic__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent);
  animation: breathe 1.6s var(--ease) infinite;
}
@keyframes breathe {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}

.prompter__view {
  height: 216px;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
}
@media (min-width: 900px) { .prompter__view { height: 274px; } }
.prompter__reel {
  position: absolute; inset-inline: 0; top: 0;
  padding-top: 84px;
  will-change: transform;
  transition: transform var(--t-glide) var(--ease), opacity var(--t-exit) ease;
}
.ln {
  font-size: clamp(19px, 2.5vw, 23px);
  line-height: 1.42;
  font-weight: 500;
  padding-block: var(--s2);
  color: color-mix(in srgb, var(--panel-ink) var(--ln-past), var(--panel));
  transition: color var(--t-panel) ease, opacity var(--t-panel) ease;
}
.ln--next { color: color-mix(in srgb, var(--panel-ink) var(--ln-next), var(--panel)); }
.ln--now  { color: var(--panel-ink); }
.ln .w {
  border-radius: 6px;
  transition: background var(--t-tap) ease, color var(--t-tap) ease;
}
.ln--now .w.is-said {
  background: var(--said-bg);
  color: var(--said-ink);
  box-shadow: 0 0 0 4px var(--said-bg);   /* closes the gap at the spaces */
}
/* Arabic script lines inside the (never mirrored) chrome */
.ln[lang="ar"] { direction: rtl; text-align: right; font-family: var(--font-ar); line-height: 1.75; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface); color: var(--ink);
  /* the shadow is what lifts a chip off cream; on a dark page a shadow is
     invisible, so the edge does it instead (#71685d — 3.06:1 on the page) */
  border: 1px solid var(--line);
  border-radius: 999px; padding: 6px calc(var(--s3) - 1px);
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) { .chip { border-color: var(--line-strong); } }
.chip svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent-ink); }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--s6); }
@media (min-width: 760px) { .section { padding-block: var(--s8); } }
.section + .section { border-top: 1px solid var(--line); }
.section__head { margin-bottom: var(--s4); }
.section h2 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: var(--s2); }
.section__head p { color: var(--muted); max-width: 56ch; }

/* how it works */
.steps { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
@media (max-width: 759px) { .steps { gap: var(--s3); } }
.step {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}
.step figure { margin: 0 0 var(--s3); }
.step svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r-md);
}
/* the illustration plate follows the prompter's own surface, so the three
   step cards and the hero panel stay one material in both themes */
.step svg .plate { fill: var(--panel); }
.step h3 { font-size: 19px; margin-bottom: var(--s1); }
.step p { color: var(--muted); font-size: 14.5px; }
.step__n {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-ink); margin-bottom: var(--s2);
}

/* privacy — the heading sits beside the paragraph on desktop */
.split { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s8); }
  .split .section__head { margin-bottom: 0; }
}
.privacy__body {
  max-width: 62ch; font-size: 16.5px;
}
.privacy__body p + p { margin-top: var(--s3); }

/* pricing */
.plans { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 820px) { .plans { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.plan {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s6) var(--s6);
}
.plan--studio { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-md); }
.plan h3 { font-size: 22px; margin-bottom: var(--s1); }
.plan__price { font-size: 15px; color: var(--muted); margin-bottom: var(--s3); }
.plan__list { display: grid; gap: var(--s1); margin-bottom: var(--s4); font-size: 15px; }
.plan__list li { display: flex; gap: var(--s2); align-items: baseline; }
.plan__list li::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: translateY(-1px);
}
.tiers { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.tier {
  flex: 1 1 92px; background: var(--bg); border-radius: var(--r-md);
  padding: var(--s3); border: 1px solid var(--line);
}
.tier b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; }
.tier span { display: block; font-size: 13px; color: var(--muted); }
.plan__note { font-size: 13px; color: var(--muted); margin-top: var(--s3); }

/* faq */
.faq { display: grid; gap: var(--s2); max-width: 68ch; }
@media (min-width: 900px) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; align-content: start; }
}
.qa {
  background: var(--surface-2); border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: var(--s3) var(--s4);
}
.qa summary {
  cursor: pointer; font-weight: 600; font-size: 16.5px;
  list-style: none; display: flex; gap: var(--s3); align-items: center;
  min-height: 30px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; margin-inline-start: auto; flex: 0 0 auto;
  width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-panel) var(--ease);
}
.qa[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.qa__a { color: var(--muted); font-size: 15.5px; padding-top: var(--s2); }
.qa__a a { font-weight: 600; }

/* ------------------------------------------------- use-case pages (/for/…)
   No new visual language: a breadcrumb line, the same dotted list the pricing
   card already uses, and the home page's chip rendered as a link. */
.crumb {
  display: flex; align-items: center; gap: var(--s2);
  padding-block: var(--s2);
  font-size: 13px; color: var(--muted);
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); }

/* columns rather than a grid: a two-column grid leaves ragged gaps whenever the
   two items in a row are different lengths, and these items are prose */
.feats { column-gap: var(--s8); font-size: 15.5px; }
@media (min-width: 760px) { .feats { columns: 2; } }
.feats li {
  display: flex; gap: var(--s2); align-items: baseline; color: var(--muted);
  break-inside: avoid; margin-bottom: var(--s3);
}
.feats li::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: translateY(-1px);
}
.feats b { color: var(--ink); font-weight: 600; }

a.chip { color: var(--ink); }
a.chip:hover { background: var(--accent-soft); text-decoration: none; }

/* ------------------------------------------------- the "Made for" strip
   Six line illustrations, one per /for/ page. No new colours and no new
   motion: the tile is the .qa surface, the icon is the chip's accent ink,
   and the only movement is the same .18s press the buttons already use. */
.usecases {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s1);
}
@media (min-width: 560px) { .usecases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } }
@media (min-width: 980px) { .usecases { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.usecases a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2); height: 100%; min-height: 116px;
  padding: var(--s3) var(--s2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink); font-size: 13.5px; font-weight: 600;
  text-align: center; line-height: 1.3; text-wrap: balance;
  transition: background var(--t-tap) ease, border-color var(--t-tap) ease,
              transform var(--t-tap) var(--ease);
}
.usecases a:hover { background: var(--accent-soft); border-color: var(--line-strong); text-decoration: none; }
.usecases a:active { transform: translateY(1px); }
.usecases svg { width: 46px; height: 34.5px; flex: 0 0 auto; color: var(--accent-ink); }
/* on dark the tile takes the chip's surface, so its edge clears 3:1 (#71685d
   against the page) the way the chips and the prompter do */
@media (prefers-color-scheme: dark) {
  .usecases a { background: var(--surface); border-color: var(--line-strong); }
}
html[lang="ar"] .usecases a { font-family: var(--font-ar); }

/* .crumb and .feats li carry dir="rtl", so their inline axis is already RTL. */
html[lang="ar"] .crumb,
html[lang="ar"] .feats li { flex-direction: row; }
/* the strip does not, so its grid is told to fill right-to-left; the tiles
   themselves are centred columns, so nothing inside them moves. */
html[lang="ar"] .usecases { direction: rtl; }

/* footer */
.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--s6) var(--s8);
  font-size: 14px; color: var(--muted);
}
.foot__grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1fr auto; align-items: start; } }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.foot__links a { color: var(--muted); }
.foot__links a:hover { color: var(--ink); }
.foot__meta { display: grid; gap: var(--s2); }
@media (min-width: 760px) { .foot__meta { justify-items: end; text-align: end; } }
.foot__mark { width: 26px; height: 26px; }
.foot__legal {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.foot__legal p { margin: 0 0 var(--s1); }
.foot__legal p:last-child { margin-bottom: 0; }
.foot__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.foot__legal a:hover { color: var(--ink); }

/* ------------------------------------------------- Arabic (AM-7: the chrome
   never mirrors — the page stays LTR and only the text runs right-to-left) */
html[lang="ar"] body {
  font-family: "Figtree", "IBM Plex Sans Arabic", "Noto Naskh Arabic", ui-sans-serif, system-ui, sans-serif;
}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  font-family: "IBM Plex Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}
html[lang="ar"] .hero h1 { font-size: clamp(33px, 6.2vw, 52px); }
html[lang="ar"] .section h2 { font-size: clamp(24px, 3.2vw, 31px); }
html[lang="ar"] .ln { font-family: var(--font-ar); line-height: 1.8; font-weight: 400; }
html[lang="ar"] .prompter__place { letter-spacing: 0; text-transform: none; font-size: 12px; }
html[lang="ar"] .step__n { letter-spacing: 0; }
html[lang="ar"] .qa summary { font-family: var(--font-ar); }
html[lang="ar"] .tier span { font-size: 12.5px; }

/* each text block stays internally consistent: content hugs the reading edge,
   while the page's structure (header, columns, card order) never flips */
/* Containers WITHOUT their own dir: the inline axis is still LTR, so the row
   has to be reversed by hand for the Arabic reading order. */
html[lang="ar"] .cta,
html[lang="ar"] .chips { justify-content: flex-end; flex-direction: row-reverse; }
/* Containers that carry dir="rtl" themselves have already flipped their inline
   axis; reversing again would put the icon, the bullet and the first link on
   the wrong edge. Say `row` explicitly so the intent is not re-broken. */
html[lang="ar"] .chip,
html[lang="ar"] .plan__list li,
html[lang="ar"] .foot__links { flex-direction: row; }
html[lang="ar"] .plan__list li::before { transform: translateY(-1px); }
html[lang="ar"] .tier { text-align: right; }
html[lang="ar"] .plan > .btn { margin-inline-start: auto; }
html[lang="ar"] .plan { display: flex; flex-direction: column; align-items: stretch; }
html[lang="ar"] .plan > .btn { align-self: flex-end; }
html[lang="ar"] .foot__meta { justify-items: end; text-align: end; }

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}