/* Self-hosted fonts (SIL Open Font License): Bricolage Grotesque for headings and Manrope for text, the pair the app uses.
   Variable fonts; Latin Extended carries the Turkish letters. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/*
  Design tokens.
  Palette: a cool grey paper with the app's own navy as ink, so the dark app screens carry the page. The lime of the app
  is the button colour and nothing else. The two photographs (a crow on a scarecrow, golden hour and storm) are the
  only warm colour. Type: Bricolage Grotesque for headings, Manrope for text. Corners are square; structure is thin rules.
*/
:root {
  --bg: #f3f4f8;
  --panel: #ffffff;
  --panel-2: #eceef5;
  --panel-3: #e2e6f0;
  --ink: #0a0f2b;
  --line: rgba(10, 15, 43, 0.16);
  --text: #2d3354;
  --text-strong: #0a0f2b;
  --muted: #565e82;
  --accent: #c6e24b;
  --accent-ink: #17210a;
  --link: #2c3a99;
  --gutter: clamp(20px, 3.4vw, 64px);
  --wrap: 1920px;
  --head: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --body: "Manrope", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; color: var(--text); font-family: var(--body); font-size: clamp(16px, 0.2vw + 13px, 18px); line-height: 1.65; background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--text-strong); letter-spacing: -0.02em; margin: 0; line-height: 1.08; font-weight: 700; }
p { margin: 0 0 14px; }
[data-lang] { display: none; }
html[data-ui="tr"] [data-lang="tr"], html[data-ui="en"] [data-lang="en"] { display: revert; }
.ac { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--body); font-weight: 800; font-size: 15.5px; padding: 14px 26px; border-radius: 3px; border: 2px solid var(--ink); cursor: pointer; background: transparent; color: var(--ink); transition: background 0.15s, color 0.15s; }
.btn:hover { background: var(--ink); color: #fff; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
a[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.btn.outline { background: transparent; }
.btn svg { width: 17px; height: 17px; flex: none; }
[hidden] { display: none !important; }
.link { font-weight: 800; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* page frame */
.box { width: 100%; }
.topbar { height: 38px; display: flex; align-items: center; padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); font-size: 13.5px; color: #b9c0e0; background: var(--ink); }
.topbar a:hover { color: #fff; }
header.main { position: sticky; top: 0; z-index: 20; height: 76px; display: flex; align-items: center; padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); background: rgba(243, 244, 248, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 800; font-size: 25px; color: var(--ink); letter-spacing: -0.025em; }
.brand img { width: 34px; height: 34px; }
nav.menu { margin-left: auto; display: flex; gap: 28px; }
nav.menu a { font-weight: 700; font-size: 15px; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
nav.menu a:hover { border-bottom-color: var(--ink); }
header.main .btn { margin-left: 32px; padding: 10px 20px; font-size: 14.5px; }
/* Eight menu items: tighter between 1020 and 1240 px so the menu never runs into the brand. */
@media (max-width: 1240px) { nav.menu { gap: 16px; } nav.menu a { font-size: 14px; } header.main .btn { margin-left: 18px; } .lang { margin-left: 16px; } }
@media (max-width: 1100px) { nav.menu { gap: 12px; } nav.menu a { font-size: 13.5px; } header.main .btn { margin-left: 14px; } .lang { margin-left: 12px; } }
@media (max-width: 1020px) { nav.menu { display: none; } header.main { height: 64px; padding: 0 16px; } header.main .btn { margin-left: auto; } .topbar { padding: 0 16px; } }

.content { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 700px) { .content { padding: 0 16px; } }

/* hero: the pitch on the paper, the photograph running off the right edge */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: clamp(500px, 34vw, 680px); padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
.hero .text { align-self: center; padding: 72px 48px 72px 0; max-width: 860px; }
.hero h1 { font-size: clamp(36px, 3.8vw, 66px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; margin-bottom: 24px; }
.hero p { font-size: clamp(17px, 0.3vw + 13px, 20px); max-width: 600px; margin-bottom: 30px; color: var(--text); }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* Download: the Windows button, and beside it an arrow that opens the other platforms (Mac, Android, iOS). */
.dl-split { position: relative; display: inline-flex; }
.dl-split .dl-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dl-split .dl-toggle { padding-left: 14px; padding-right: 14px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(23, 33, 10, 0.3); }
.dl-toggle svg { transition: transform 0.15s; }
.dl-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dl-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 18px 40px rgba(10, 15, 43, 0.16); padding: 6px; }
.dl-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 2px; color: var(--text-strong); font-weight: 800; font-size: 15px; line-height: 1.2; }
.dl-item svg { width: 18px; height: 18px; flex: none; }
a.dl-item:hover, a.dl-item:focus-visible { background: var(--panel-2); }
.dl-name { display: flex; flex-direction: column; }
.dl-name small { font-weight: 500; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.hero .meta { margin-top: 22px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.hero .photo { background: #000 url("field-1.webp") 76% 40% / cover no-repeat; min-height: 360px; }
/* the home page shows the film (assets/film, made from promo/rooktalk-film.html) instead of the photograph: a 16:9 panel
   the film fills exactly, so nothing is cropped and there are no bars */
.hero .viz { position: relative; align-self: center; aspect-ratio: 16 / 9; background: #0b0c10; }
.hero .viz video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
@media (max-width: 1000px) { .hero { grid-template-columns: 1fr; min-height: 0; padding-left: 0; } .hero .text { padding: 48px 24px 40px; max-width: none; } .hero .photo, .hero .viz { order: -1; min-height: 300px; } .hero .viz { aspect-ratio: 16 / 9; min-height: 0; } }
@media (max-width: 700px) { .hero .text { padding: 36px 16px 32px; } .hero p { font-size: 17.5px; } .hero .photo { min-height: 240px; background-position: 70% 45%; } }

/* the real app under the hero */
.hero-shot { margin-top: 64px; }
.shot img { width: 100%; height: auto; border: 1px solid rgba(10, 15, 43, 0.4); box-shadow: 0 30px 70px rgba(10, 15, 43, 0.3); }
@media (max-width: 700px) { .hero-shot { margin-top: 36px; } }

/* sections */
.sec { margin-top: 96px; }
.st { font-size: clamp(28px, 3vw, 48px); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 36px; max-width: 800px; }
.st small { display: block; font-family: var(--body); font-weight: 500; letter-spacing: 0; font-size: 18px; line-height: 1.6; color: var(--muted); margin-top: 14px; max-width: 620px; }
@media (max-width: 700px) { .sec { margin-top: 80px; } .st { margin-bottom: 26px; } .st small { font-size: 16.5px; } }

/* features: a plain ruled list, label on the left */
.feat { border-top: 2px solid var(--ink); }
.feat > div { display: grid; grid-template-columns: minmax(180px, 0.26fr) 1fr; gap: 12px 48px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.feat h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.feat p { margin: 0; max-width: 680px; }
.feat ul { list-style: none; margin: 0; padding: 0; max-width: 920px; }
.feat li { padding: 6px 0; }
.feat li b { color: var(--text-strong); font-weight: 700; }
@media (min-width: 1500px) { .feat ul { max-width: none; columns: 2; column-gap: 56px; } .feat li { break-inside: avoid; } }
@media (max-width: 700px) { .feat > div { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; } }

/* getting started: a real sequence, so the numerals mean something */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); counter-reset: step; }
.steps li { counter-increment: step; padding: 22px 28px 8px 0; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps li::before { content: counter(step); display: block; font-family: var(--head); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 12px; }
.steps h3 { font-size: 21px; margin-bottom: 6px; letter-spacing: -0.015em; }
.steps p { margin: 0; font-size: 15.5px; }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(3) { padding-left: 0; border-left: 0; } .steps li:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 22px; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } .steps li, .steps li + li { padding: 20px 0 6px; border-left: 0; } .steps li + li { border-top: 1px solid var(--line); } }

/* screens */
.gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px 28px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border: 1px solid rgba(10, 15, 43, 0.4); box-shadow: 0 24px 56px rgba(10, 15, 43, 0.26); }
.gallery figcaption { margin-top: 14px; max-width: 560px; font-size: 15.5px; }
.gallery figcaption b { display: block; font-family: var(--head); font-size: 20px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; letter-spacing: -0.015em; }
@media (max-width: 1100px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; gap: 40px; } }

/* encryption: three plain paragraphs between rules */
.how { border-top: 2px solid var(--ink); }
.how > div { display: grid; grid-template-columns: minmax(180px, 0.26fr) 1fr; gap: 12px 48px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.how h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.how p { margin: 0; max-width: 680px; }
@media (max-width: 700px) { .how > div { grid-template-columns: 1fr; gap: 4px; } }

/* plans: three columns, thin dividers, no boxes */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.plan { display: flex; flex-direction: column; padding: 30px 32px 36px 0; }
.plan + .plan { padding-left: 32px; border-left: 1px solid var(--line); }
.plan .head h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.plan .price { font-family: var(--head); font-weight: 800; font-size: 64px; color: var(--text-strong); margin: 6px 0 22px; line-height: 1; letter-spacing: -0.045em; }
.plan .price small { font-family: var(--body); font-size: 15.5px; color: var(--muted); font-weight: 600; letter-spacing: 0; margin-left: 8px; }
.plan .body { display: flex; flex-direction: column; flex: 1; }
.plan h4 { font-family: var(--body); font-size: 14.5px; letter-spacing: 0; color: var(--text-strong); font-weight: 800; margin: 20px 0 4px; }
.plan h4:first-child { margin-top: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--text); }
.plan .foot { margin-top: auto; padding-top: 26px; }
.plan .note { font-size: 15px; color: var(--muted); }
.plan .alt { font-size: 15.5px; color: var(--text-strong); font-weight: 700; margin-bottom: 4px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan, .plan + .plan { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); } }
.plans-legal { margin: 20px 0 0; font-size: 14.5px; color: var(--muted); }
/* the account page's monthly or yearly switch, drawn like the language switch */
/* next to the price on each paid plan; both switches move together */
.plan .price-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 6px 0 22px; }
.plan .price-row .price { margin: 0; }
.period { display: inline-flex; border: 2px solid var(--ink); border-radius: 3px; overflow: hidden; }
.period[hidden] { display: none; }
.period button { all: unset; cursor: pointer; padding: 8px 14px; font-weight: 800; font-size: 14px; color: var(--ink); line-height: 1.2; }
.period button + button { border-left: 2px solid var(--ink); }
.period button:hover { background: var(--panel-3); }
.period button.on { background: var(--ink); color: #fff; }
.period button:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; }
.plan .price-note { margin: -14px 0 20px; font-size: 14.5px; color: var(--muted); }
.plan .price-note a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
/* what every plan has, under the three plans */
.plans-all { padding: 26px 0 6px; border-top: 1px solid var(--line); }
.plans-all h4 { font-family: var(--body); font-size: 14.5px; letter-spacing: 0; color: var(--text-strong); font-weight: 800; margin: 0 0 4px; }
.plans-all ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
.plans-all li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--text); }
@media (max-width: 900px) { .plans-all ul { grid-template-columns: 1fr; } }

/* account page: sign-in box and the signed-in card, on the same paper as the plans */
.acct { border-top: 2px solid var(--ink); padding-top: 28px; max-width: 640px; }
.acct[data-state="loading"] .acct-signed-out { visibility: hidden; }
.acct-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.acct-tab { font-family: var(--body); font-weight: 800; font-size: 14.5px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.acct-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.acct-form { display: grid; gap: 14px; }
.acct-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.acct-form input { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--text-strong); }
.acct-form input:focus { outline: 3px solid var(--link); outline-offset: 1px; }
.acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.acct-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.acct-note { margin: 0; font-size: 14px; color: var(--muted); }
.acct-err { font-size: 14.5px; font-weight: 700; color: #b3261e; }
.acct-me { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.acct-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 20px; }
.acct-name { font-weight: 800; font-size: 18px; color: var(--text-strong); }
.acct-mail { font-size: 14px; color: var(--muted); }
.acct-plan { padding-top: 20px; display: grid; gap: 10px; font-size: 16px; }
.acct-plan b { color: var(--text-strong); }
.acct-until, .muted { color: var(--muted); }
.sp { flex: 1; }
.plan .foot .btn + .note { margin-top: 10px; }
@media (max-width: 700px) { .acct-two { grid-template-columns: 1fr; } }
/* signed in: the account card on the left, the settings list beside it (one under the other on narrow screens) */
.acct[data-state="in"] { max-width: none; }
.acct-signed-in:not([hidden]) { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.acct-card { position: sticky; top: 100px; }
.acct-who { min-width: 0; }
.acct-name, .acct-mail { overflow-wrap: anywhere; }
.acct-handle { font-size: 14.5px; font-weight: 700; color: var(--text); }
.acct-avatar { flex: none; overflow: hidden; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-settings-title { font-size: 22px; margin-bottom: 8px; }
.acct-set { border-top: 1px solid var(--line); padding: 20px 0; }
.acct-set-head { display: flex; align-items: center; gap: 16px; }
.acct-set-head > div { flex: 1; min-width: 0; }
.acct-set h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.acct-set-val { margin: 0; font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }
.acct-set-form { margin-top: 18px; max-width: 560px; }
.acct-set.danger h3 { color: #b3261e; }
.acct .btn.sm { padding: 8px 16px; font-size: 14px; flex: none; }
.acct .btn.danger { border-color: #b3261e; color: #b3261e; }
.acct .btn.danger:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
.acct-ok { margin: 6px 0 0; font-size: 14.5px; font-weight: 700; color: #1d6b3a; }
.acct-err.ok { color: #1d6b3a; }
.acct-at { display: flex; align-items: stretch; }
.acct-at > span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-right: 0; border-radius: 3px 0 0 3px; background: var(--panel-2); color: var(--muted); font-weight: 800; }
.acct-at input { flex: 1; min-width: 0; border-radius: 0 3px 3px 0; }
.acct-check { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: 10px; font-weight: 600 !important; }
.acct-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
@media (max-width: 900px) { .acct-signed-in:not([hidden]) { grid-template-columns: 1fr; gap: 36px; } .acct-card { position: static; } }
.plans-legal a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* download: the stormy photograph, one button */
.band { position: relative; isolation: isolate; margin-top: 110px; padding: 90px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); background: #000 url("field-3.webp") 70% 40% / cover no-repeat; color: #e3e7f5; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 10, 32, 0.88) 0%, rgba(7, 10, 32, 0.5) 60%, rgba(7, 10, 32, 0.2) 100%); }
.band h3 { color: #fff; font-size: clamp(32px, 4vw, 64px); font-weight: 800; letter-spacing: -0.04em; max-width: 720px; margin-bottom: 18px; }
.band p { max-width: 560px; margin: 0 0 30px; font-size: 17.5px; }
.band .btn { padding: 16px 30px; font-size: 16.5px; }
.band .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.band .btn.outline { border-color: #fff; color: #fff; }
.band .cta-row { margin: 0; }
@media (max-width: 700px) { .band { padding: 72px 16px; margin-top: 90px; } }

/* about + faq */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 2px solid var(--ink); padding-top: 28px; }
.panel h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.015em; }
.panel b { color: var(--text-strong); font-weight: 700; }
.panel p:last-child { margin-bottom: 0; }
@media (max-width: 800px) { .two { grid-template-columns: 1fr; gap: 28px; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; padding: 20px 0; font-family: var(--head); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; color: var(--text-strong); list-style: none; display: flex; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 28px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 22px; margin: 0; max-width: 760px; }
.faq details p a, .hero .text p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* footer */
footer { margin-top: 120px; background: var(--ink); color: #b9c0e0; padding: 40px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; font-size: 14px; }
footer .links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 24px; }
footer .links a { font-weight: 700; font-size: 14px; color: #fff; }
footer .links a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* listings that approved RookTalk; the badge is served from this site, so no visitor request goes to them */
footer .foot-badges { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
footer .foot-badges img { display: block; width: auto; height: 50px; }
@media (max-width: 760px) { footer .links { margin-left: 0; } footer { padding: 30px 16px; margin-top: 80px; } }

/* inner pages (legal, mobile, sitemap) */
.legal, .article { margin-top: 64px; }
@media (max-width: 700px) { .legal, .article { margin-top: 36px; } }

/* legal pages */
.legal { max-width: 860px; }
.legal h1 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.035em; margin-bottom: 8px; }
.legal h2 { font-size: 22px; font-weight: 700; margin: 38px 0 10px; }
.legal p, .legal li { font-size: 16px; }
.legal .meta { color: var(--muted); font-size: 14.5px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; font-size: 16px; }
.legal dt { color: var(--muted); }
.legal dd { margin: 0; }
.legal a, .article p a, .article li a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* article pages */
.article { max-width: 920px; }
.article h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 18px; }
.article .lede { font-size: 19px; margin-bottom: 26px; }
.article h2 { font-size: 28px; font-weight: 700; margin: 44px 0 14px; letter-spacing: -0.02em; }
.article ul { padding-left: 20px; }
.article li { margin: 6px 0; }
.article ol { padding-left: 22px; }
.article ol li { margin: 8px 0; }
.note { font-size: 14.5px; color: var(--muted); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 6px; }

/* breadcrumbs, HTML sitemap */
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.sitemap { list-style: none; padding: 0; margin: 18px 0; border-top: 2px solid var(--ink); }
.sitemap li { border-bottom: 1px solid var(--line); padding: 16px 0; }
.sitemap a { font-family: var(--head); font-weight: 700; font-size: 20px; color: var(--text-strong); }
.sitemap a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sitemap small { display: block; color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* TR / EN switch (links, one page per language) */

/* TR / EN switch: two links, one page per language; sits in the header next to the download button */
.lang { display: flex; margin-left: 28px; border: 2px solid var(--ink); border-radius: 3px; overflow: hidden; }
.lang a { padding: 6px 11px; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: var(--ink); line-height: 1.2; }
.lang a + a { border-left: 2px solid var(--ink); }
.lang a:hover { background: var(--panel-3); }
.lang a.on { background: var(--ink); color: #fff; }
header.main .lang + .btn { margin-left: 14px; }
@media (max-width: 1020px) { .lang { margin-left: auto; } header.main .lang + .btn { margin-left: 10px; } }
@media (max-width: 480px) { .brand { font-size: 21px; gap: 8px; } .brand img { width: 28px; height: 28px; } header.main .btn { padding: 9px 13px; font-size: 14px; } .lang a { padding: 6px 9px; } header.main .lang + .btn { margin-left: 8px; } }

/* screenshot viewer (site.js) */
.shot img, .gallery img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(7, 10, 32, 0.94); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; text-align: center; }
.lightbox img { display: block; margin: 0 auto; width: auto; height: auto; max-width: min(96vw, 1800px); max-height: calc(100vh - 140px); border: 1px solid rgba(255, 255, 255, 0.2); background: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); cursor: zoom-out; }
.lightbox figcaption { margin: 14px auto 0; max-width: 900px; color: #e3e7f5; font-size: 15px; line-height: 1.5; cursor: default; }
.lightbox button { position: fixed; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lb-close { top: 18px; right: 18px; }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
/* on a phone the picture is shown larger than the screen and can be panned, so the small text is readable */
@media (max-width: 700px) {
  .lightbox { overflow: auto; align-items: flex-start; justify-content: flex-start; padding: 72px 0 40px; -webkit-overflow-scrolling: touch; }
  .lightbox figure { width: max-content; min-width: 100%; }
  .lightbox img { max-width: none; max-height: none; width: 1100px; margin: 0; }
  .lightbox figcaption { position: sticky; left: 14px; width: calc(100vw - 28px); margin: 14px 0 0; text-align: left; }
  .lb-close { top: 12px; right: 12px; }
  .lb-prev, .lb-next { top: 12px; bottom: auto; margin-top: 0; }
  .lb-prev { left: 12px; }
  .lb-next { left: 68px; right: auto; }
}

/* ---------- security page: centered and wider for the four-column table ---------- */
.article.compare-page { max-width: 1080px; margin-left: auto; margin-right: auto; }
.compare-wrap { overflow-x: auto; margin: 10px 0 8px; }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; min-width: 640px; }
.compare th, .compare td { padding: 14px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--head); font-weight: 800; font-size: 17px; color: var(--text-strong); border-bottom: 2px solid var(--ink); }
.compare thead th:nth-child(2) { color: var(--accent-ink); background: var(--accent); border-radius: 10px 10px 0 0; }
.compare tbody th { font-weight: 700; color: var(--text-strong); width: 26%; }
.compare td { width: 24.6%; }
.compare td.yes { background: rgba(198, 226, 75, 0.14); }
.compare td.part { background: rgba(0, 0, 0, 0.03); }
.compare td.no { color: var(--muted); }
.compare td.yes::before, .compare td.part::before, .compare td.no::before { display: block; font-weight: 800; font-size: 12px; letter-spacing: 0.02em; margin-bottom: 3px; }
.compare td.yes::before { content: "✓"; color: var(--accent-ink); }
.compare td.part::before { content: "~"; color: var(--text); }
.compare td.no::before { content: "✗"; color: var(--muted); }
@media (max-width: 640px) { .compare { font-size: 14px; } .compare th, .compare td { padding: 10px 10px; } }