/*
 * SeeAnyFile marketing site.
 *
 * No web fonts: a page that promises nothing leaves your computer should not
 * open a connection to a font CDN to say so. The system stack below covers all
 * twelve locales, including CJK, on the platforms this page is read from.
 */

:root {
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Noto Sans KR', 'Malgun Gothic', 'Hiragino Sans', 'Noto Sans JP', 'Noto Sans SC',
    'Noto Sans TC', 'Microsoft YaHei', 'Leelawadee UI', 'Noto Sans Thai', Tahoma, Arial, sans-serif;
  --font-mono: 'Cascadia Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;

  --accent: #5b5bf6;
  --accent-strong: #4747e8;
  --accent-soft: #eeeeff;
  /* Accent as text on --accent-soft; the fill colour itself is 4.3:1 there. */
  --accent-text: #4545d6;
  --cyan: #22d3ee;

  --bg: #ffffff;
  --bg-alt: #f6f7fb;
  --bg-deep: #0f1116;
  --border: #e3e5ec;
  --text: #14161c;
  --text-dim: #565d6d;
  --text-faint: #666d7e; /* 4.8:1 on --bg-alt, WCAG AA for small text */
  --shadow-lg: 0 32px 80px rgb(18 20 30 / 16%);
  --shadow-sm: 0 2px 10px rgb(18 20 30 / 6%);
  --radius: 14px;
  --maxw: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1116;
    --bg-alt: #151821;
    --bg-deep: #090b0f;
    --border: #262b36;
    --text: #eceef4;
    --text-dim: #a4abbb;
    --text-faint: #878fa1;
    --accent-soft: #1b1d33;
    --accent-text: #9a9aff;
    --shadow-lg: 0 32px 80px rgb(0 0 0 / 55%);
    --shadow-sm: 0 2px 10px rgb(0 0 0 / 35%);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* A focus ring on everything the keyboard reaches, in the accent (3:1 or
   more on both backgrounds, WCAG 2.4.7 / 1.4.11). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Windows high contrast: fills become the system's, so buttons and chips keep
   a visible edge, and focus uses the system highlight. */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .btn, .chip, .skip, .lang__menu { border: 1px solid ButtonText; }
  .lang__menu a[aria-current='true'] { outline: 2px solid Highlight; outline-offset: -2px; }
  img { forced-color-adjust: none; }
}

/* ---- header ---- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex; align-items: center; gap: 20px;
  height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }

.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--text-dim); text-decoration: none; font-size: 15px; }
.site-nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  /* The hidden nav was what pushed these to the right edge. */
  .header-actions { margin-left: auto; }
}

/* ---- language picker ---- */

.lang { position: relative; }
.lang__button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  font: inherit; font-size: 14px;
  color: var(--text-dim); background: none;
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
}
.lang__button:hover { color: var(--text); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  display: none; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px;
  padding: 8px; margin: 0;
  list-style: none;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
}
.lang[open] .lang__menu { display: grid; }
.lang__menu a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; text-decoration: none; color: var(--text-dim); white-space: nowrap;
}
.lang__menu a:hover { background: var(--bg-alt); color: var(--text); }
.lang__menu a[aria-current='true'] { color: var(--accent); font-weight: 600; }

@media (max-width: 560px) {
  .lang__menu { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; }
}

/* ---- buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px;
  font-size: 16px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; border-radius: 11px;
  cursor: pointer; transition: transform 120ms ease, background 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-strong); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg-alt); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 9px; }

/* ---- hero ---- */

.hero { padding: 76px 0 0; text-align: center; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 26px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--accent-text); background: var(--accent-soft);
  border-radius: 999px;
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 68px);
  font-weight: 800;
  margin-bottom: 20px;
  text-wrap: balance;
}

.hero__sub {
  max-width: 62ch; margin: 0 auto 30px;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--text-dim);
  text-wrap: pretty;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero__note { margin-top: 16px; font-size: 14px; color: var(--text-faint); }

.shot {
  position: relative;
  margin: 54px auto 0;
  max-width: 1000px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--bg-alt);
}
.shot img { display: block; width: 100%; height: auto; }

/* ---- trust strip ---- */

.trust { margin-top: 64px; padding: 34px 0; background: var(--bg-alt); border-block: 1px solid var(--border); }
.trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trust__item h2 { font-size: 16px; margin-bottom: 4px; }
.trust__item p { font-size: 14.5px; color: var(--text-dim); }
.trust__check { display: inline-block; margin-right: 7px; color: var(--accent); font-weight: 700; }

@media (max-width: 760px) {
  .trust__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- sections ---- */

.section { padding: 84px 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section__head { max-width: 62ch; margin-bottom: 44px; }
.section__head h2 { font-size: clamp(27px, 3.6vw, 38px); font-weight: 750; margin-bottom: 12px; }
.section__head p { color: var(--text-dim); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature {
  padding: 26px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.feature h3 { font-size: 17.5px; margin-bottom: 9px; }
.feature p { font-size: 15px; color: var(--text-dim); }

@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .features { grid-template-columns: 1fr; } }

/* ---- formats ---- */

.formats { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 26px; }
.formats h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 13px; font-size: 14px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
}

@media (max-width: 640px) { .formats { grid-template-columns: 1fr; } }

/* ---- privacy ---- */

.privacy-card {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px;
  padding: 44px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.privacy-card h2 { font-size: clamp(25px, 3.2vw, 34px); margin-bottom: 14px; }
.privacy-card p { color: var(--text-dim); }
.privacy-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.privacy-list li { position: relative; padding-left: 27px; font-size: 15px; color: var(--text-dim); }
.privacy-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 15px; height: 9px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

@media (max-width: 860px) { .privacy-card { grid-template-columns: 1fr; gap: 26px; padding: 30px; } }

/* ---- roadmap ---- */

.roadmap { display: grid; gap: 10px; }
.road {
  display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 18px;
  padding: 17px 22px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px;
}
.road__phase { font-size: 13.5px; font-weight: 700; color: var(--text-faint); }
.road__title { font-size: 16px; }
.road__state { font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.road__state--done { color: #047857; background: #d1fae5; }
.road__state--next { color: #4338ca; background: #e0e7ff; }
.road__state--planned { color: var(--text-faint); background: var(--bg-alt); }

@media (prefers-color-scheme: dark) {
  .road__state--done { color: #6ee7b7; background: #06281f; }
  .road__state--next { color: #a5b4fc; background: #1b1d3a; }
}

@media (max-width: 640px) {
  .road { grid-template-columns: 1fr auto; }
  .road__phase { grid-column: 1 / -1; }
}

/* ---- faq ---- */

.faq { display: grid; gap: 10px; max-width: 800px; }
.faq details {
  padding: 18px 22px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px;
}
.faq summary { font-weight: 650; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: inline-end; color: var(--text-faint); font-weight: 400; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin-top: 11px; font-size: 15.5px; color: var(--text-dim); }

/* ---- download ---- */

.download { text-align: center; }
.download__more { margin: 16px 0 0; font-size: 14px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.download__more a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; color: var(--text-dim); }
.download__note { max-width: 56ch; margin: 14px auto 0; font-size: 14px; color: var(--text-faint); }

/* ---- news ---- */

.news { display: grid; gap: 16px; }
.release { border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; background: var(--bg); }
.release--latest { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 1px 0 rgb(0 0 0 / 2%), 0 8px 24px rgb(79 70 229 / 8%); }
.release__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.release__version { font-size: 13.5px; font-weight: 700; color: var(--text-faint); }
.release__badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #4338ca; background: #e0e7ff; }
.release__date { margin-left: auto; font-size: 13px; color: var(--text-faint); }
.release__title { margin: 8px 0 10px; font-size: 18px; }
.release__points { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-dim); line-height: 1.55; }
@media (prefers-color-scheme: dark) {
  .release__badge { color: #a5b4fc; background: #1b1d3a; }
}
@media (max-width: 560px) {
  .release { padding: 16px; }
  .release__date { margin-left: 0; width: 100%; }
}

/* ---- share ---- */

.share { padding: 60px 0; text-align: center; border-top: 1px solid var(--border); }
.share h2 { font-size: 20px; margin-bottom: 20px; font-weight: 650; }
.share__row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.share__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px;
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
}
.share__btn:hover { background: var(--bg-alt); }
.share__dot { width: 9px; height: 9px; border-radius: 50%; }
.share__status { margin-top: 14px; font-size: 14px; color: var(--accent); min-height: 21px; }

/* ---- ad slots ---- */
/* Empty and hidden until the operator switches a slot on; then a quiet,
   clearly labelled box that never looks like part of the product. */

.ad-slot { margin-top: 28px; margin-bottom: 28px; text-align: center; }
.ad-slot[hidden] { display: none; }
.ad-slot__label {
  display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
}
.ad-slot iframe {
  display: block; width: 100%; max-width: 970px; height: 120px; margin: 0 auto;
  border: 0; border-radius: 12px; background: transparent;
}
.ad-slot a { display: inline-block; max-width: 100%; border-radius: 12px; overflow: hidden; }
.ad-slot img { display: block; max-width: 100%; height: auto; max-height: 280px; }

/* ---- footer ---- */

.site-footer { padding: 58px 0 34px; background: var(--bg-alt); border-top: 1px solid var(--border); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.footer__tagline { font-size: 15px; color: var(--text-dim); margin-top: 12px; }
/* One line on a PC. Between the phone layout and a wide window the brand gets
   its own row, so the longest language (French) still fits; phones wrap. */
@media (min-width: 761px) { .footer__tagline { white-space: nowrap; } }
@media (min-width: 761px) and (max-width: 1180px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__top > :first-child { grid-column: 1 / -1; }
}
/* Lifetime visits and downloads: a pair of figures, number above its label. */
.stats { display: flex; justify-content: center; margin: 22px auto 0; padding: 0; width: fit-content; max-width: 100%;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.stat { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 10px 26px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat dt { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.stat dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.download .stats { margin-top: 18px; }
@media (max-width: 420px) { .stat { padding: 9px 16px; } .stat dd { font-size: 19px; } }
.footer__col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 12px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* 25px tall rows: a finger-sized target (WCAG 2.2 target size) at the same rhythm. */
.footer__col a { display: inline-block; padding: 3px 0; font-size: 15px; color: var(--text-dim); text-decoration: none; }
.footer__col a:hover { color: var(--text); text-decoration: underline; }

.footer__business {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-faint); line-height: 1.85;
}
.footer__business dl { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 8px 0 0; }
.footer__business dl > div { display: flex; align-items: baseline; gap: 6px; }
.footer__business dt { font-weight: 600; white-space: nowrap; }
.footer__business dd { margin: 0; }
.footer__business a { display: inline-block; padding: 5px 0; }
.footer__rights { margin-top: 18px; }
.footer__provider { margin-top: 4px; }
.footer__provider a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__provider a:hover { color: var(--accent-text); }

@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; gap: 26px; } }

/* ---- language suggestion banner ---- */

.lang-banner {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 40;
  display: none; align-items: center; gap: 14px;
  max-width: 520px; margin-inline: auto;
  padding: 14px 18px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 13px; box-shadow: var(--shadow-lg);
  font-size: 15px;
}
.lang-banner[data-show='1'] { display: flex; }
.lang-banner span { flex: 1; }

/* On a PC-width screen these sentences read as one line each; the width caps
   that keep long paragraphs readable would otherwise break them in two. A
   language whose sentence is longer than the column still wraps, balanced. */
@media (min-width: 1024px) {
  .hero__sub,
  .section__head--line,
  .download__note { max-width: none; text-wrap: balance; }
}

/* Korean breaks between words, never inside one: every element, not only
   paragraphs (an h3 once broke "실패합|니다"). overflow-wrap keeps a long
   address or URL from pushing the page sideways. */
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }

/* Thai writes no spaces between words; the browser's dictionary finds the
   breaks, so nothing here may force breaks inside a word. Its vowels and tone
   marks stack above and below the line, so headings that are tight for Latin
   would clip them, and a Thai face first keeps those marks from coming from
   a Latin font's fallback. */
:lang(th) {
  font-family: 'Leelawadee UI', 'Noto Sans Thai', Tahoma, var(--font);
  word-break: normal;
  overflow-wrap: break-word;
  line-break: auto;
}
:lang(th) h1, :lang(th) h2, :lang(th) h3 { line-height: 1.4; letter-spacing: 0; }

/* On a phone the two download buttons stack; one width reads as one choice. */
@media (max-width: 480px) {
  .download .hero__cta { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
}

/* ==== format guides, the guide list and the features page (templates/guide.mjs) ==== */

/* Breadcrumbs: the trail search engines show, and a way back up for people. */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 14px; color: var(--text-faint); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '›'; color: var(--text-faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }

.guide-hero { padding: 40px 0 56px; background: linear-gradient(180deg, var(--accent-soft), var(--bg) 78%); border-bottom: 1px solid var(--border); }
.guide-hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; margin: 16px 0 16px; text-wrap: balance; }
.guide-hero .badge { margin-bottom: 0; }
.guide-hero__lead { max-width: 62ch; font-size: clamp(17px, 1.8vw, 19px); color: var(--text-dim); text-wrap: pretty; }
.guide-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.guide-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.guide-hero--center { text-align: center; }
.guide-hero--center .crumbs ol,
.guide-hero--center .guide-hero__cta { justify-content: center; }
.guide-hero--center .guide-hero__lead { margin-inline: auto; }
.jump { justify-content: center; margin-top: 30px; }

/* The file card: what the extension looks like and how it opens, at a glance. */
.filecard {
  padding: 26px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg);
}
.filecard__icon {
  display: grid; place-items: center; width: 64px; height: 76px; margin-bottom: 18px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: #fff;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  border-radius: 8px 20px 8px 8px; box-shadow: var(--shadow-sm);
}
.filecard__title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 10px; }
.filecard__facts { display: grid; gap: 12px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.filecard__facts dt { font-size: 13px; font-weight: 600; color: var(--text-faint); }
.filecard__facts dd { margin: 2px 0 0; font-size: 15px; }
.chip--ext { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; padding: 4px 10px; }
.chip--link { text-decoration: none; color: var(--text); display: inline-flex; align-items: center; min-height: 36px; }
.chip--link:hover { border-color: var(--accent); color: var(--accent-text); }

.guide-section { padding: 64px 0; }
.guide-section .section__head { margin-bottom: 28px; }
.guide-section h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 750; margin-bottom: 22px; }
.guide-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.guide-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.shot--guide { margin: 0; }

/* Numbered steps drawn with a counter, so a screen reader still hears an ordered list. */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 50px; min-height: 34px; color: var(--text-dim); }
.steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: -2px;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-weight: 700; font-size: 15px; color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-inline-start: 30px; color: var(--text-dim); }
.checks li::before {
  content: ''; position: absolute; inset-inline-start: 2px; top: 8px;
  width: 14px; height: 8px; border-inline-start: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

.note { padding: 26px; background: var(--bg); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); }
.note h2 { font-size: 20px; margin-bottom: 14px; }
.note ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 10px; color: var(--text-dim); font-size: 15.5px; }

.section__head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; max-width: none; }
.section__head--row h2 { margin-bottom: 0; }
.section__head--row p { margin-top: 12px; }
.more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.more-link:hover { text-decoration: underline; }

.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-card {
  display: flex; flex-direction: column; gap: 6px; padding: 22px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text);
  transition: border-color 120ms ease, transform 120ms ease;
}
.guide-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.guide-card__label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); }
.guide-card__title { font-size: 17px; font-weight: 650; line-height: 1.35; }
.guide-card__exts { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); overflow-wrap: anywhere; }
.guide-card__support { margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--text-dim); }
.guide-card__support--windowsCodec { color: var(--text-dim); }

/* The home page's grid of guides: compact, two lines each. */
.guide-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guide-link {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  text-decoration: none; color: var(--text);
}
.guide-link:hover { border-color: var(--accent); background: var(--bg-alt); }
.guide-link__label { font-size: 13px; font-weight: 700; color: var(--accent-text); }
.guide-link__title { font-size: 15px; line-height: 1.4; }
.guide-links__more { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 22px; }

.guide-cta { padding: 56px 0; background: var(--bg-deep); color: #eceef4; }
.guide-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.guide-cta h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 6px; }
.guide-cta p { color: #b4bac8; }

/* Guide pages have one more footer column (the formats); their tagline wraps. */
.footer__top--guides { grid-template-columns: 1.4fr 1fr 1.5fr 1fr; }
.footer__top--guides .footer__tagline { white-space: normal; }
.footer__formats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
@media (min-width: 761px) and (max-width: 1180px) {
  .footer__top--guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .guide-hero__grid, .guide-body, .guide-two { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .footer__top--guides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .guide-cards, .guide-links { grid-template-columns: minmax(0, 1fr); }
  .guide-hero { padding-top: 24px; }
  .filecard { padding: 20px; }
}

/* On the narrowest phones the longest languages' header (French "Français" +
   "Télécharger") was 11px wider than a 360px screen: tighter gutters there. */
@media (max-width: 420px) {
  .site-header .wrap { padding-inline: 16px; }
  .site-header__inner { gap: 10px; }
  .header-actions { gap: 8px; }
  .lang__button { padding: 0 10px; }
  .site-header .btn--sm { padding: 0 12px; }
}
.shot picture { display: block; }