@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;
font-display:swap;src:url(/assets/fonts/source-serif-4-400regular.woff2) format("woff2")}

@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;
font-display:swap;src:url(/assets/fonts/source-serif-4-400italic.woff2) format("woff2")}

@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:500;
font-display:swap;src:url(/assets/fonts/source-serif-4-500medium.woff2) format("woff2")}

@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;
font-display:swap;src:url(/assets/fonts/source-serif-4-600semibold.woff2) format("woff2")}

:root{
  /* Ground and surfaces */
  --ground:#F0EEE9; --elevated:#FAFAF8; --subtle:#E8E5DE; --line:#E0DDD5;
  /* Ink */
  --ink:#2A2A35; --ink-2:#6F6F86; --ink-muted:#9A9AA8; --brand:#496275;
  --slate:#5A6A70; --violet:#8A7A92; --on-dark:#F6F4EF;
  /* Pastels */
  --peach:#F0D8CC; --roses:#EBD8DC; --orchid:#DBD2DB; --ice:#D3E4F1;
  --aqua:#CAD3C1; --lemon:#F6EBC8;
  /* Frosted glass — the signature surface */
  --glass:rgba(250,250,248,.72); --glass-edge:rgba(255,255,255,.6);
  /* Warm shadows. Never black: a neutral shadow sits on top of this palette
     rather than under it, and is one of the loudest generic-template tells. */
  --shadow-sm:0 1px 3px rgba(42,42,53,.06);
  --shadow-md:0 2px 8px rgba(42,42,53,.09);
  --shadow-lg:0 6px 16px rgba(42,42,53,.12);
  --shadow-xl:0 12px 28px rgba(42,42,53,.16);
  --gutter:clamp(24px,5vw,40px);
  --measure:68ch;
}

/* The celestial ground. Five stacked radial glows over a warm base — the app
   renders this as SVG only because React Native cannot stack radial gradients
   (see components/CelestialBackground.tsx). On the web it is what it always
   was. Opacities stay low on purpose: the glows exist so frosted surfaces above
   them have gentle colour to refract, not to be seen as colour. */
.celestial{
  background:
    radial-gradient(ellipse 80% 54% at 84% 4%,rgba(235,216,220,.72),transparent 62%),
    radial-gradient(ellipse 90% 60% at 6% 98%,rgba(219,210,219,.66),transparent 64%),
    radial-gradient(ellipse 70% 52% at 50% 54%,rgba(211,228,241,.5),transparent 66%),
    radial-gradient(ellipse 62% 50% at 98% 58%,rgba(240,216,204,.5),transparent 60%),
    radial-gradient(ellipse 80% 38% at 52% 100%,rgba(220,230,242,.55),transparent 72%),
    linear-gradient(#F2F0EA,#ECE8E1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ground)}
body{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding-inline:var(--gutter)}
.kicker{font-size:11px;line-height:14px;font-weight:500;letter-spacing:.18em;color:var(--ink-muted)}
.wordmark{font-size:16px;line-height:24px;letter-spacing:4px;color:var(--brand);text-decoration:none}
.frosted{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-edge)}

/* Primary CTA — ink-blue pill. The only filled button on the site. */
.cta{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;
  background:linear-gradient(#54718a,#42596c);color:#fff;font-size:16px;line-height:24px;
  font-weight:500;box-shadow:var(--shadow-lg);text-decoration:none}
.cta:hover{text-decoration:none;filter:brightness(1.06)}

/* Language switch — a link to the same page in the other language, not a
   client-side toggle. Each language is its own URL, so shipping both in one
   document would double the weight and put Turkish inside the English page's
   markup. */
.langswitch{display:inline-flex;align-items:center;gap:2px;border-radius:999px;padding:4px}
.langswitch a,.langswitch span{font-size:13px;line-height:18px;letter-spacing:.08em;
  padding:6px 14px;border-radius:999px;text-decoration:none}
.langswitch .on{background:var(--elevated);color:var(--ink)}
.langswitch .off{color:var(--ink-muted)}
.langswitch a:hover{text-decoration:none;color:var(--ink)}

/* Phone frames. Plain and unangled — no 3D renders. */
.phone{background:var(--elevated);padding:6px;border-radius:28px;box-shadow:var(--shadow-xl);overflow:hidden}
.phone>div{position:relative;border-radius:22px;overflow:hidden}
/* height:auto is not cosmetic — it is what keeps the natural aspect ratio.
   The width/height attributes on an img element are presentational hints, so
   width:100% overrides the width while the height hint survives untouched:
   every screenshot rendered 308px wide inside a 2778px box, squashed to 11% of
   its ratio, because the attributes still described the original PNGs. The
   attributes are worth keeping — they reserve the right box before the image
   loads, which is what stops the page reflowing under the reader — and this
   line is what makes them incapable of distorting anything. */
.phone img{display:block;width:100%;height:auto}
.fade{position:absolute;inset:auto 0 0 0;height:96px;
  background:linear-gradient(rgba(250,250,248,0),var(--elevated))}

/* Hero. Single column until there is genuinely room for two — a portrait
   photograph squeezed beside text in a narrow column is the "image in a box"
   look the type-led hero exists to avoid. Below 900px the photograph follows
   the copy at its own aspect rather than being cropped into a banner. */
.hero{display:grid;gap:clamp(40px,6vw,64px);align-items:center}
.hero-copy{max-width:34rem}
.hero-photo img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:var(--shadow-xl)}
.hero-photo{max-width:420px;margin-inline:auto}
@media(min-width:900px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(48px,6vw,80px)}
  .hero-photo{max-width:460px;margin-inline:0}
}

/* The full-bleed band, at the design's own numbers: clamp(340px,42vw,560px).
   Roughly double the height a decorative strip would take, and that is the
   point — it is the photograph's place on the page, not a divider.

   The one place an explicit height is correct, and only because object-fit
   cover CROPS to fill. A height without object-fit STRETCHES — that was the
   screenshot bug. The design anchors at 50% 56% of the whole photograph; the
   source here is cropped to the widest window the clamp can ever show, chosen
   so that centre lands on the same point, which is why this reads 50% 50%. */
.band{line-height:0}
.band img{display:block;width:100%;height:clamp(340px,42vw,560px);
  object-fit:cover;object-position:50% 50%}

footer .legal{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px;line-height:20px;font-weight:500}

/* ── Long-form documents ─────────────────────────────────────────────────── */
.doc{display:grid;grid-template-columns:minmax(0,var(--measure));justify-content:center}
.toc{display:none}
@media(min-width:1024px){
  .doc{grid-template-columns:minmax(0,var(--measure)) minmax(0,15rem);gap:64px;justify-content:center}
  .toc{display:block}
}
.doc main{min-width:0;max-width:var(--measure)}
.doc h1{margin:0;font-size:clamp(32px,5.4vw,40px);line-height:1.14;font-weight:600;
  letter-spacing:-.012em;text-wrap:pretty}
.doc .updated{margin:16px 0 0;font-size:13px;line-height:18px;color:var(--ink-muted)}
.doc .lede{margin:32px 0 0;font-size:20px;line-height:32px;color:var(--slate);text-wrap:pretty}
/* 17/30 rather than the app's 17/26. Leading and measure are coupled: at 68ch
   the eye travels much further back to find the next line than it does on a
   phone at ~40ch, and needs more separation to land. The app's ratio was never
   tuned for this measure. */
.doc section{padding:40px 0 0;margin:40px 0 0;border-top:1px solid var(--line)}
.doc h2{margin:0 0 16px;font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.005em;
  color:var(--brand);scroll-margin-top:96px;text-wrap:pretty}
.doc p{margin:0 0 20px;font-size:17px;line-height:30px;text-wrap:pretty}
.doc p:last-child{margin-bottom:0}
.doc ul{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.doc li{position:relative;padding-left:22px;font-size:17px;line-height:30px;text-wrap:pretty}
.doc li::before{content:"";position:absolute;left:4px;top:13px;width:5px;height:5px;
  border-radius:50%;background:var(--ink-muted)}
/* Links inside a wall of prose: readable as links without shouting. Scoped to
   main — unscoped it also underlined every entry in the table of contents,
   which turned the aside into a list of ruled rows. */
.doc main a{border-bottom:1px solid rgba(73,98,117,.28);text-decoration:none}
.doc main a:hover{border-bottom-color:var(--brand);text-decoration:none}
.toc .inner{position:sticky;top:96px}
.toc nav{margin:16px 0 0;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:20px}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}