/* avigami.com: the only stylesheet. No framework, no web fonts (system fonts).
   Light and dark follow the visitor's system setting. Every page links this file.
   The site is built for 47 languages, three of them right-to-left (ar, he, ur): use logical
   properties (margin-inline-start, inset-inline-end, text-align: start), never left/right,
   so the layout mirrors by itself under dir="rtl".
   Colours come from the logo package (avigami/design/logo/final-avigami/NOTLAR-tasarimci.md):
   plum ground #5B2249 → #2C0F2E, cream paper #FFF4E4, tan #EDB98F, orange fold #F47A3D; on light
   grounds the "dawn" tones #4E1C40, #7C3866, #D9561E. */

:root {
  color-scheme: light dark;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Brand: the icon's plum ground and paper */
  --plum-1: #5b2249;
  --plum-2: #2c0f2e;
  --plum-grad: linear-gradient(180deg, var(--plum-1) 0%, var(--plum-2) 100%);
  --cream: #fff4e4;
  --tan: #edb98f;
  --fold: #f47a3d;

  --bg: #ffffff;
  --bg-soft: #faf5f0;
  --surface: #ffffff;
  --ink: #2a1027;
  --ink-2: #57414f;
  --ink-3: #75606f;
  --line: #eadfe0;
  --grid: rgba(78, 28, 64, .06);
  --link: #7c3866;
  --accent: #b4441a;
  --soon: #b4441a;
  /* Keyboard focus ring: 3:1 or more against every ground it is drawn on (WCAG 1.4.11). The orange fold is
     2.7:1 on white, so light grounds take the dark dawn orange (5.5:1 on white, 5.1:1 on --bg-soft). */
  --focus: #b4441a;
  --shadow: 0 1px 2px rgba(42, 16, 39, .05), 0 10px 30px rgba(42, 16, 39, .08);
  --radius: 20px;
  --header-bg: rgba(255, 255, 255, .82);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #140812;
    --bg-soft: #1d0d1b;
    --surface: #231020;
    --ink: #fff4e4;
    --ink-2: #e2cfc4;
    --ink-3: #b9a3ad;
    --line: #3a2236;
    --grid: rgba(255, 244, 228, .05);
    --link: #edb98f;
    --accent: #f7935e;
    --soon: #f7935e;
    --focus: #f47a3d;  /* 7.2:1 on --bg, 6.6:1 on --surface */
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 36px rgba(0, 0, 0, .35);
    --header-bg: rgba(20, 8, 18, .82);
  }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding keeps anchors and focused elements clear of the sticky 64px header */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
/* Links inside running text are underlined, not told apart by colour alone */
p a:not(.btn), .prose a { text-decoration: underline; text-underline-offset: .18em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The skip link's target takes the focus without a ring of its own */
main:focus { outline: none; }

h1, h2, h3 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  /* A long word (German compounds, a translated heading on a phone) breaks instead of overflowing */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.35rem; letter-spacing: -.012em; line-height: 1.2; }
p { margin: 0 0 1em; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
@media (min-width: 600px) { .wrap { width: min(1120px, 100% - 64px); } }

.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font: 600 .76rem/1.3 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lead { max-width: 38em; color: var(--ink-2); font-size: clamp(1.1rem, 1.9vw, 1.28rem); line-height: 1.55; }
.muted { color: var(--ink-3); }

.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; }
.skip-link:focus { inset-inline-start: 16px; top: 12px; z-index: 100; padding: .6rem 1rem; border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* The app icon wherever it appears: Apple's rounded square */
.app-icon { flex: none; border-radius: 22.5%; box-shadow: 0 6px 18px rgba(44, 15, 46, .25); }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
  }
}
/* One 64px row when the menu fits beside the logo; on a narrow phone in a language with long menu
   words the menu drops under the logo and never pushes the page sideways. */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 64px; padding-block: 6px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  font: 700 1.3rem/1 var(--font-display);
  letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 22.5%; }

.nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.nav a {
  padding: .5rem .85rem;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: .98rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--bg-soft); color: var(--ink); }
@media (max-width: 420px) {
  html { scroll-padding-top: 120px; }
  .nav a { padding: .45rem .6rem; font-size: .94rem; }
}

/* Buttons */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { border-color: rgba(255, 244, 228, .18); background: var(--plum-grad); color: var(--cream); box-shadow: 0 8px 22px rgba(44, 15, 46, .3); }
.btn-outline { border-color: var(--line); background: var(--surface); color: var(--ink); }
.btn-ghost { border-color: rgba(255, 244, 228, .3); background: rgba(255, 244, 228, .06); color: var(--cream); }
.btn-ghost:hover { background: rgba(255, 244, 228, .12); }

/* Release state: "Coming in 2027" until build.py's AVIGAMI_ON_APP_STORE puts Apple's badge in its place */
.status { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-weight: 600; }
.status-soon { color: var(--soon); }
.status-soon::before { content: ""; width: .6rem; height: .6rem; border: 2px solid currentColor; border-radius: 50%; }

.store-badge { display: inline-block; }
/* Apple's badge in the page's language: 50 px tall, the width follows the artwork */
.store-badge img { width: auto; height: 50px; }

/* Home: hero on the icon's plum ground, in both appearances */

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--plum-grad); color: var(--cream); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 85% 15%, rgba(244, 122, 61, .18), transparent 70%);
}
[dir="rtl"] .hero::before { background: radial-gradient(60% 70% at 15% 15%, rgba(244, 122, 61, .18), transparent 70%); }
.hero-inner { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 10vw, 8rem); }
.hero .app-icon { width: 112px; height: 112px; margin-bottom: 2rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.hero h1 { color: var(--cream); }
.hero .eyebrow { color: #f7935e; }
.hero .lead { color: #f3dcc8; }
.hero .auto-title { margin-top: 2.5rem; color: var(--cream); font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.hero .auto { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem 2rem; max-width: 60em; }
@media (min-width: 760px) { .hero .auto { grid-template-columns: 1fr 1fr; } }
.hero .auto li { position: relative; padding-inline-start: 1.6rem; color: #f3dcc8; line-height: 1.5; }
.hero .auto li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #f7935e; font-weight: 700; }
.hero .trust { max-width: 38em; margin-top: 1.75rem; color: #f3dcc8; }
.hero .roles { max-width: 60em; margin-top: 1rem; color: var(--tan); font-size: .95rem; line-height: 1.55; }
.hero .roles strong { color: var(--cream); margin-inline-end: .35em; }
.hero .release { margin-top: 2rem; }
.hero .status-soon { color: var(--tan); }
.hero .actions { margin-top: 1.5rem; }
.hero a:focus-visible { outline-color: var(--cream); }

/* Inner pages: header with a faint grid */

.page-head { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.5rem); }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(#000, transparent 92%);
  mask-image: linear-gradient(#000, transparent 92%);
}
.page-head h1 { font-size: clamp(2.2rem, 5.2vw, 3.5rem); }
.page-head .lead { margin-bottom: 0; }

.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
/* The first section right under a page header needs less space above it */
.page-head + .section { padding-top: clamp(1rem, 3vw, 2rem); }
.section-tight { padding-top: 0; }

.card { padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.card h2 { font-size: 1.35rem; letter-spacing: -.01em; }
.card > :last-child { margin-bottom: 0; }

.link-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Support */

.support-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 880px) { .support-grid { grid-template-columns: 1fr 1.35fr; } }
.mail-big { display: inline-block; margin: .25rem 0 1rem; font: 700 clamp(1.35rem, 3.6vw, 1.9rem)/1.2 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.facts { display: grid; gap: .45rem; margin: 0 0 1.25rem; padding-inline-start: 1.25rem; color: var(--ink-2); }
.never { padding: .8rem 1rem; border-inline-start: 3px solid var(--fold); border-radius: 6px; background: var(--bg-soft); font-weight: 600; }

/* Privacy policy */

.prose { max-width: 720px; }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { margin-top: 2.4rem; font-size: 1.3rem; letter-spacing: -.01em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-inline-start: 1.25rem; }
.prose li { margin-bottom: .35rem; }
/* "Draft" until build.py's PRIVACY_APPROVED: impossible to miss, in every language */
.draft-label {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .35rem .9rem;
  border: 2px solid var(--soon);
  border-radius: 8px;
  color: var(--soon);
  font: 800 clamp(1.2rem, 2.6vw, 1.5rem)/1.2 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.prose h3 { margin: 0 0 .35rem; font-size: 1.08rem; letter-spacing: -.005em; }
/* English is the original; a translated page says so at the top (privacy.translationNote) */
.translation-note { margin-bottom: 2rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); font-size: .95rem; }
/* The app's "Where your data goes" table: one card per row, the four parts as label and value */
.flows { display: grid; gap: .9rem; margin: 1.25rem 0; }
.flow { padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.flow dl { display: grid; gap: .1rem .9rem; margin: .5rem 0 0; }
@media (min-width: 600px) { .flow dl { grid-template-columns: minmax(8rem, max-content) 1fr; } }
.flow dt { color: var(--ink-3); font-size: .9rem; }
.flow dd { margin: 0 0 .35rem; color: var(--ink-2); }
.badge { display: inline-block; margin: 0 0 .25rem; padding: .1rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-3); font-size: .82rem; }

/* Crew Share landing (/s) */

.crew { max-width: 760px; }
.crew .app-icon { width: 88px; height: 88px; margin-bottom: 1.75rem; }
.crew h2 { margin-top: 2.75rem; font-size: 1.3rem; letter-spacing: -.01em; }
.crew-card { margin-top: 2rem; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.crew-card .actions { margin-top: 1.25rem; }
/* The shared legs: date, flight number, route. Never translated by the browser (translate="no"). */
.legs { display: grid; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.leg { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.leg-date { color: var(--ink-3); }
.leg-flight, .leg-route { font-family: var(--mono); font-weight: 600; }
.leg-arrow { color: var(--ink-3); }
.leg-more { color: var(--ink-3); border-style: dashed; background: none; }
.sharer { font-style: normal; }
/* Read by screen readers, not shown ("LTFM to EDDF" where the page shows LTFM → EDDF) */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crew-message { margin: 0; color: var(--ink-2); }
.steps { display: grid; gap: .6rem; margin: 0 0 1.25rem; padding-inline-start: 1.4rem; color: var(--ink-2); }
.note { padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); color: var(--ink-2); font-size: .95rem; }

/* 404 */

.lost { padding: clamp(1rem, 4vw, 2.5rem) 0 clamp(2.5rem, 7vw, 4.5rem); text-align: center; }
.lost .app-icon { width: 96px; height: 96px; margin: 0 auto 2rem; }
.lost .lead { margin-inline: auto; }
.lost .actions { justify-content: center; }

/* Footer */

.site-footer { padding: 3rem 0 2.25rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
.footer-grid { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1fr auto; align-items: start; } }
.site-footer .brand { margin-bottom: .75rem; }
.site-footer p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-nav a { color: var(--ink-2); font-weight: 500; overflow-wrap: anywhere; }
.footer-nav a:hover { color: var(--ink); }
.footer-nav a[aria-current="page"] { color: var(--ink); }

/* Language menu: plain links, every language in its own name and script */
.langs { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.5; }
.langs a { color: var(--ink-3); }
.langs a:hover { color: var(--ink); }
.langs .lang-current { color: var(--ink); font-weight: 600; }

.legal { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .8rem; line-height: 1.5; }
.legal p + p { margin-top: .4rem; }

/* Writing systems */

/* Long compound words: let the browser hyphenate headings where the language allows it */
:is(:lang(de), :lang(nl), :lang(fi), :lang(hu), :lang(sv), :lang(da), :lang(nb), :lang(el)) :is(h1, h2, h3) { hyphens: auto; }

/* Monospace fonts have no Arabic, Hebrew, Indic or Thai letters; the browser's fallback draws them
   in fixed-width cells and Arabic letters come apart. Those languages use the text font for the
   small mono labels (eyebrows). */
html:is(:lang(ar), :lang(ur), :lang(he), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(or), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(th)) { --mono: var(--font); }

/* Arabic, Hebrew and the Indic and Thai scripts: no letter-spacing (it breaks Arabic joining
   and Indic letter clusters; uppercase does nothing there) and more room for tall marks */
html:is(:lang(ar), :lang(ur), :lang(he), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(or), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(th))
  :is(h1, h2, h3, .eyebrow, .draft-label) { letter-spacing: 0; }
html:is(:lang(ar), :lang(he), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(or), :lang(ta), :lang(te), :lang(kn), :lang(ml), :lang(th)) :is(h1, h2, h3) { line-height: 1.3; }
/* Urdu is written in Nastaliq, which stacks letters diagonally and needs much more height */
html:lang(ur) body { line-height: 2; }
html:lang(ur) :is(h1, h2, h3) { line-height: 1.6; }

/* Motion off when the visitor asks for it */

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