/* ------------------------------------------------------------------
   Envo design system — "Mastery in Simplification", web edition.
   Swiss editorial: strict type grid, two families, hairlines,
   structure through whitespace. Color is reserved for function.

   This file was extracted from the five hand-written pages when the
   site became multilingual. It is now the single stylesheet for all
   of them, in all six languages — change it here, not in a template.
   ------------------------------------------------------------------ */

:root {
  --canvas: #F9F8F6;
  --ink: #111111;
  --meta: #5F5C57;
  --faint: #A29E97;
  --hairline: rgba(17, 17, 17, 0.14);
  --accent: #4A90E2;
  --crimson: #D0021B;
  --serif: "Iowan Old Style", "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0B0C0E;
    --ink: #E5E5E5;
    --meta: #9BA0A6;
    --faint: #5A5F66;
    --hairline: rgba(229, 229, 229, 0.16);
    --crimson: #E0263C;
  }
}

/* Script-specific families. The Latin serif stack carries no Arabic or CJK
   glyphs, so those scripts would silently fall back to a system default that
   breaks the type grid. Give each script a stack that actually has the
   glyphs, keeping the serif/sans contrast the design depends on. */
html[lang^="ar"] {
  --serif: "Al Bayan", "Geeza Pro", "Noto Naskh Arabic", "Times New Roman", serif;
  --sans: -apple-system, "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}
html[lang^="zh"] {
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", STSong, serif;
  --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
html[lang^="ru"] {
  --serif: Georgia, "Times New Roman", "PT Serif", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.col { max-width: 680px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; }
/* Russian "Конфиденциальность" is 381px in a 32px serif; the phone column is
   327px. Any language with long compounds does this, so headings are allowed
   to break a word rather than push the whole page sideways. */
h1, h2, h3 { overflow-wrap: break-word; }

/* Masthead ---------------------------------------------------------- */
header {
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--hairline);
}
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.wordmark:hover { text-decoration: none; }
.wordmark img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.store-note {
  font-size: 12px;
  color: var(--meta);
  text-align: end;
}
.store-note b { color: var(--accent); font-weight: 500; }

/* Language switcher -------------------------------------------------
   A hairline row of endonyms, not a dropdown: six items fit, and a
   reader scanning for their own language finds it faster by shape than
   by opening a menu. The current language is ink, the rest are meta. */
.langbar {
  border-bottom: 1px solid var(--hairline);
  padding: 10px 0;
}
.langbar .col {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: baseline;
}
.langbar a {
  font-size: 12px;
  color: var(--meta);
  letter-spacing: 0.01em;
}
.langbar a[aria-current="true"] {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  cursor: default;
}
.langbar a[aria-current="true"]:hover { text-decoration: none; }

/* Hero -------------------------------------------------------------- */
.hero { padding: 88px 24px 72px; }
.hero h1 {
  font-size: clamp(30px, 4.5vw + 16px, 44px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 15em;
}
.hero p.lede {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--meta);
  max-width: 34em;
}
.hero .actions { margin-top: 40px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 12px 28px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--ink); color: var(--canvas); text-decoration: none; }
.quiet-link { font-size: 13px; color: var(--meta); }
/* U+2192 has Bidi_Mirrored=No, so an RTL layout places it correctly but leaves
   it pointing back toward where the reader came from — it reads as "back", not
   "continue". Direction is already known here, so the glyph is chosen here. */
.quiet-link::after { content: "\00A0\2192"; }
html[dir="rtl"] .quiet-link::after { content: "\00A0\2190"; }

/* Sections ---------------------------------------------------------- */
section { padding: 64px 0; border-top: 1px solid var(--hairline); }
.kicker {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
/* Letterspaced uppercase is a Latin device. In Arabic it breaks the joins
   between letters outright; in CJK it just looks wrong. */
html[lang^="ar"] .kicker,
html[lang^="zh"] .kicker { letter-spacing: 0; text-transform: none; }

section h2 { font-size: 24px; line-height: 1.25; margin-bottom: 14px; }
section > .col > p { color: var(--meta); max-width: 36em; }

/* Feature rows — no cards, structure through proximity --------------- */
.features { margin-top: 44px; display: grid; gap: 36px; }
@media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.feature h3 { font-size: 16px; line-height: 1.3; }
.feature p { margin-top: 6px; font-size: 14px; color: var(--meta); }

/* Schedule vignette — a faithful still life of the app's Today screen.
   Mirrors apps/mobile/src/components/MeetingRow.tsx: a 10px hollow circle
   for unsaved, a 3×30 accent rule for saved, crimson rule trailing for
   closed sessions. Serif carries content, sans carries metadata. */
.vignette-wrap { margin-top: 48px; display: flex; justify-content: center; }
.vignette {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 24px 20px 28px;
}
.vignette .v-station {
  font-size: 12px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.13em; text-transform: uppercase;
}
html[lang^="ar"] .vignette .v-station,
html[lang^="zh"] .vignette .v-station { letter-spacing: 0; text-transform: none; }
.vignette .v-station i { font-style: normal; color: var(--faint); letter-spacing: 0; }
.vignette .v-date { font-family: var(--serif); font-size: 22px; font-weight: 600; margin-top: 10px; }
.vignette .v-rule { height: 1px; background: var(--hairline); margin-top: 14px; }
.vignette .v-time {
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--accent); margin-top: 26px; margin-bottom: 14px;
}
/* Row: 22px indicator column, then the text block — as in the app. */
.vignette .v-meeting { display: flex; align-items: center; }
.vignette .v-mark { flex: 0 0 22px; display: flex; justify-content: flex-start; }
.vignette .v-mark span {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--faint); box-sizing: border-box;
}
.vignette .v-saved .v-mark span {
  width: 3px; height: 30px; border: none; border-radius: 1.5px;
  background: var(--accent);
}
.vignette .v-body { flex: 1; }
.vignette .v-title { font-family: var(--serif); font-size: 15px; line-height: 1.4; }
.vignette .v-title em { font-style: normal; color: var(--meta); }
.vignette .v-room { font-size: 12px; color: var(--meta); margin-top: 6px; }
.vignette .v-room b { color: var(--crimson); font-weight: 400; }
/* Closed sessions carry a 3pt crimson rule on the trailing edge. */
.vignette .v-closedrule { flex: 0 0 3px; align-self: stretch; background: var(--crimson); margin-inline-start: 9px; }
.vignette .v-div { height: 1px; background: var(--hairline); margin: 14px 0 14px 0; margin-inline-start: 26px; }
/* Room lines mix Arabic with Roman numerals; plaintext keeps each run in its
   own direction without disturbing the line's alignment, because the line
   starts with a strong Arabic character. */
html[dir="rtl"] .vignette .v-room { unicode-bidi: plaintext; }

/* "10:00 – 13:00" has no strong character anywhere, which makes it the one
   string on this card that needs its direction stated rather than inferred.
   Three behaviours are possible and only one matches the app:
     unicode-bidi: plaintext  → level 0, then `text-align: start` flushes it
                                LEFT, the opposite edge from every other line
     plain RTL flow           → right-aligned but reordered to 13:00 – 10:00
     what is set below        → right-aligned, internal order left to right
   iOS resolves the same string the same way (P2/P3 find nothing strong and
   fall back to level 0), so the app renders 10:00 on the left of the range,
   hard against the right edge. The screenshot frames do too. This makes the
   website agree with both. */
html[dir="rtl"] .vignette .v-time {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* Pro block ---------------------------------------------------------- */
.pro-list { margin-top: 36px; display: grid; gap: 30px; max-width: 36em; }
.pro-list h3 { font-size: 16px; }
.pro-list p { margin-top: 5px; font-size: 14px; color: var(--meta); }
.pro-terms { margin-top: 36px; font-size: 12px; color: var(--faint); max-width: 36em; }

/* Founder note ------------------------------------------------------- */
.founder p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--ink); font-family: var(--serif); font-weight: 400; max-width: 36em; }
.founder p:first-of-type { margin-top: 0; }
.founder .signature { margin-top: 28px; font-family: var(--sans); font-size: 13px; color: var(--meta); }

/* Signup ------------------------------------------------------------- */
.signup form { margin-top: 32px; max-width: 30em; }
.signup .fieldrow { display: flex; gap: 12px; flex-wrap: wrap; }
.signup input[type="email"] {
  flex: 1 1 220px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 11px 2px;
  outline: none;
}
.signup input[type="email"]::placeholder { color: var(--faint); }
.signup input[type="email"]:focus { border-bottom-color: var(--accent); }
.signup .consent { margin-top: 18px; font-size: 12px; color: var(--faint); max-width: 32em; }
.signup .form-msg { margin-top: 18px; font-size: 14px; min-height: 1.4em; }
.signup .form-msg.ok { color: var(--accent); }
.signup .form-msg.err { color: var(--crimson); }
/* Email addresses read left-to-right in every language. */
.signup input[type="email"] { direction: ltr; text-align: start; }
html[dir="rtl"] .signup input[type="email"] { text-align: right; }
/* Honeypot. It used to sit at left: -9999px, which is fine in a left-to-right
   page and catastrophic in a right-to-left one: the off-canvas box extends the
   scrollable area, and an RTL document starts scrolled to that edge, so the
   Arabic page opened on 10,000px of blank canvas. Clipping to a 1px box hides
   it from humans, keeps it in the form for bots, and adds no overflow in
   either direction. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* App Store link -------------------------------------------------------
   Apple's badge lockup in the site's own type. It sits at the same weight
   as .btn — hairline at rest, solid ink on hover — so the two calls to
   action on the page read as one gesture repeated, not two competing ones. */
.appstore {
  margin-top: 44px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 14px 22px;
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
a.appstore:hover {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
  text-decoration: none;
}
.appstore .as-apple { font-size: 22px; line-height: 1; }
.appstore .as-text { font-size: 11px; letter-spacing: 0.02em; }
.appstore .as-text b { display: block; font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0; }

/* Footer --------------------------------------------------------------- */
footer { border-top: 1px solid var(--hairline); padding: 44px 0 64px; }
footer p { font-size: 12px; color: var(--faint); max-width: 40em; }
footer .links { margin-top: 14px; display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; }
footer .links a { font-size: 12px; color: var(--meta); }
footer .copyright { font-size: 12px; color: var(--faint); }

/* Document pages — support, terms, both privacy notes ------------------
   Same system, quieter: one column of prose, tighter footer, no hero. */
body.doc { line-height: 1.6; }
body.doc main { padding: 56px 0 80px; }
/* Scales down on a phone so a single long word does not have to break. */
body.doc h1 { font-size: clamp(26px, 6.5vw, 32px); }
body.doc h2 { font-size: 19px; margin-top: 40px; }
body.doc h3 { font-size: 16px; margin-top: 30px; }
body.doc .updated { margin-top: 10px; font-size: 12px; color: var(--faint); }
body.doc main p, body.doc main ul { margin-top: 14px; color: var(--meta); max-width: 40em; }
body.doc main ul { padding-inline-start: 20px; }
body.doc main li { margin-top: 6px; }
body.doc footer { padding: 32px 0 56px; }

/* The binding-language notice on translated legal pages. Quiet, but it
   has to be visible: it is what makes the English text authoritative. */
.binding-note {
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-size: 12px;
  color: var(--meta);
  max-width: 40em;
}