/* src/styles/fonts.css */
/* Self-hosted web fonts (no requests to Google). Files live in public/fonts/<family>/.
   Generated from the Google Fonts css2 API (Chrome user agent): each file is a variable font
   covering the weight range shown, split into the subsets below; unicode-range values are
   exactly as Google serves them, so a browser only downloads the slices a page needs.
   CJK languages (ja, ko, zh) use system fonts; see tokens.css. Licence: public/fonts/LICENSE-OFL.txt. */

/* Playfair Display 500-700, latin */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/playfair-display/playfair-display-500-700-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;
}

/* Playfair Display 500-700, latin-ext */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/playfair-display/playfair-display-500-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Playfair Display 500-700, cyrillic */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/playfair-display/playfair-display-500-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Inter 400-700, latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter/inter-400-700-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;
}

/* Inter 400-700, latin-ext */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter/inter-400-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter 400-700, cyrillic */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter/inter-400-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Noto Naskh Arabic 500-700, arabic */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/noto-naskh-arabic/noto-naskh-arabic-500-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Noto Naskh Arabic 500-700, latin */
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/noto-naskh-arabic/noto-naskh-arabic-500-700-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;
}

/* Noto Sans Arabic 400-700, arabic */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/noto-sans-arabic/noto-sans-arabic-400-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Noto Sans Arabic 400-700, latin */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/noto-sans-arabic/noto-sans-arabic-400-700-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;
}

/* Noto Serif Devanagari 500-700, devanagari */
@font-face {
  font-family: "Noto Serif Devanagari";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/noto-serif-devanagari/noto-serif-devanagari-500-700-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* Noto Serif Devanagari 500-700, latin */
@font-face {
  font-family: "Noto Serif Devanagari";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/noto-serif-devanagari/noto-serif-devanagari-500-700-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;
}

/* Noto Sans Devanagari 400-700, devanagari */
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/noto-sans-devanagari/noto-sans-devanagari-400-700-devanagari.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}

/* Noto Sans Devanagari 400-700, latin */
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/noto-sans-devanagari/noto-sans-devanagari-400-700-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;
}

/* src/styles/tokens.css */
/* Stillock website: shared design tokens. Taken from the 2.0 app design. */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f5f1e8;          /* page cream (matches the App Store screenshots) */
  --bg-2: #efe9dd;        /* deeper cream for alternating sections */
  --card: #fefdf9;        /* cards, same as in-app cards */

  /* Ink */
  --ink: #1a1714;
  --ink-2: #2d2a25;       /* dark pills and buttons */
  --muted: #6b655b;
  --muted-2: #8e877b;
  --line: #e4dccf;
  --line-strong: #d3c9b8;

  /* Brand */
  --green: #2e5d4f;
  --green-deep: #244a3f;
  --green-soft: #dfe9e4;
  --sage: #9fb8ad;
  --sage-soft: #cfdcd5;
  --sage-light: #c9dbd2;  /* sage for small text and icons on the green band (5.2:1) */
  --terracotta: #af5530;
  --terracotta-soft: #f3ddc5;
  --gold: #b18441;
  --gold-soft: #f1e4cf;
  --on-dark: #f5f1e8;

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h-tracking: -0.02em;  /* display headings */
  --h-leading: 1.05;

  /* Shape */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Elevation (warm, soft) */
  --shadow-sm: 0 1px 2px rgba(45, 42, 37, 0.06), 0 2px 8px rgba(45, 42, 37, 0.06);
  --shadow: 0 12px 32px rgba(45, 42, 37, 0.10);
  --shadow-lg: 0 30px 60px rgba(45, 42, 37, 0.18);

  /* Layout */
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Script-specific font stacks. The Latin fonts stay first so "Stillock" and
   digits keep the brand look; the script font catches everything else. */
html[data-fonts="arabic"] {
  --font-display: "Playfair Display", "Noto Naskh Arabic", "Geeza Pro", serif;
  --font-body: "Inter", "Noto Sans Arabic", -apple-system, "Segoe UI", sans-serif;
  --h-tracking: 0;
  --h-leading: 1.3;
}
html[data-fonts="devanagari"] {
  --font-display: "Playfair Display", "Noto Serif Devanagari", "Kohinoor Devanagari", serif;
  --font-body: "Inter", "Noto Sans Devanagari", -apple-system, "Segoe UI", sans-serif;
  --h-tracking: 0;
  --h-leading: 1.3;
}
/* CJK fonts are not self-hosted (each would be hundreds of slices): system fonts come right
   after the Latin pair (Apple, then Windows), with Noto names as local fallbacks for Android/Linux. */
html[data-fonts="ja"] {
  --font-display: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --font-body: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", -apple-system, sans-serif;
  --h-tracking: 0;
  --h-leading: 1.25;
}
html[data-fonts="ko"] {
  --font-display: "Playfair Display", "AppleMyungjo", "Apple Myungjo", "Batang", "Noto Serif KR", "Noto Serif CJK KR", serif;
  --font-body: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", -apple-system, sans-serif;
  --h-tracking: 0;
  --h-leading: 1.25;
  word-break: keep-all;
}
html[data-fonts="zh"] {
  --font-display: "Playfair Display", "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Noto Serif CJK SC", serif;
  --font-body: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", -apple-system, sans-serif;
  --h-tracking: 0;
  --h-leading: 1.25;
}

/* src/styles/site.css */
/* Stillock website: site styles (header, footer, home page, dialog).
   Depends on tokens.css. Logical properties throughout so RTL just works.
   Breakpoints: 480, 720, 900, 1100. */

/* ==========================================================================
   1. Reset and base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
video,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--h-tracking);
  line-height: var(--h-leading);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
  color: inherit;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--green);
  text-underline-offset: 3px;
}

button,
select,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

::selection {
  background: var(--green-soft);
  color: var(--ink);
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink-2);
  color: var(--on-dark);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* Eyebrow: small caps label with the short green dash from the App Store screenshots. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--green);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

html:not([data-fonts="latin"]) .eyebrow {
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  text-transform: none; /* only the Latin words would change ("IPHONE"); keep the brand spelling */
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn .icon {
  width: 20px;
  height: 20px;
}

.btn-primary {
  background: var(--green);
  color: var(--on-dark);
}

.btn-primary:hover {
  background: var(--green-deep);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--card);
  border-color: var(--muted-2);
}

.btn-ghost .icon {
  color: var(--green);
}

.btn-outline-light {
  background: transparent;
  border-color: rgba(245, 241, 232, 0.55);
  color: var(--on-dark);
}

.btn-outline-light:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--green);
}

/* Arrows point the reading direction. */
[dir="rtl"] .icon-flip .icon {
  transform: scaleX(-1);
}

.icon-flip {
  display: inline-flex;
}

/* App Store badge (emitted by layout.storeButton). Apple's official artwork: never recolour,
   restyle or crop it; keep clear space of at least a quarter of its height around it. */
.store-badge {
  display: inline-block;
  flex: none;
  border-radius: 10px;
  line-height: 0;
}

.store-badge img {
  display: block;
  width: auto;
  height: 40px;  /* Apple's minimum on-screen height */
  max-width: none;
}

.store-badge--lg {
  border-radius: 13px;
}

.store-badge--lg img {
  height: 56px;
}

.store-badge:hover {
  opacity: 0.9;
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 241, 232, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(45, 42, 37, 0.06);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.logo-mark {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--green);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

.site-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding-block: 6px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

.nav-list a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.nav-list a[aria-current="page"] {
  color: var(--ink);
}

.nav-mobile-extra {
  display: none;
}

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

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
}

.nav-toggle:hover {
  background: rgba(45, 42, 37, 0.06);
}

.nav-toggle .icon {
  width: 24px;
  height: 24px;
}

.nav-toggle-open,
.nav-toggle-close {
  display: grid;
  place-items: center;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-open,
.nav-toggle[aria-expanded="false"] .nav-toggle-close,
.nav-toggle:not([aria-expanded]) .nav-toggle-close {
  display: none;
}

/* Language menu */
.lang {
  position: relative;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: 11px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

.lang-btn:hover {
  background: var(--card);
}

.lang-btn .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.lang-btn .icon:last-child {
  width: 15px;
  height: 15px;
}

.lang-btn[aria-expanded="true"] .icon:last-child {
  transform: rotate(180deg);
}

.lang-pop {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 60;
  width: max-content;
  min-width: 220px;
  max-width: min(92vw, 400px);
  max-height: 70vh;
  overflow: auto;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.lang-pop[hidden] {
  display: none;
}

.lang-title {
  margin: 0 0 6px;
  padding: 4px 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.3;
  text-decoration: none;
}

/* Language names use the system font, so a non-Russian page does not download the Cyrillic Inter
   subset just to draw "Русский" (and CJK names get a proper system face). */
.lang-list a,
.lang-select select {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Language suggestion bar (site.js, English pages): fixed, so it causes no layout shift. */
.lang-suggest {
  position: fixed;
  inset-inline: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  max-width: 480px;
  margin-inline: auto;
  padding: 10px 12px 10px 20px;
  background: var(--ink-2);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
}

.lang-suggest-text {
  flex: 1 1 auto;
}

.lang-suggest-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.lang-suggest-close {
  flex: none;
  width: 36px;
  height: 36px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
}

.lang-suggest-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Breadcrumb trail (legal pages, guides, hubs). */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--muted);
}

.crumbs li + li::before {
  content: "\203A";
  margin-inline: 8px;
  color: var(--muted-2);
}

[dir="rtl"] .crumbs li + li::before {
  content: "\2039";
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.lang-list a:hover,
.lang-list a:focus-visible {
  background: var(--bg);
}

.lang-list a:focus-visible {
  outline-offset: -2px;
}

.lang-list a[aria-current] {
  color: var(--green);
  font-weight: 600;
}

.lang-list a[aria-current]::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 480px) {
  .lang-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4px;
  }
}

/* Tight desktop widths: keep everything on one line. */
@media (min-width: 900px) and (max-width: 1099px) {
  .header-row {
    gap: 16px;
  }

  .nav-list {
    gap: 14px;
  }

  .nav-list a {
    font-size: 0.88rem;
  }

  .lang-current {
    display: none;
  }
}

/* Mobile header */
@media (max-width: 899px) {
  .brand {
    margin-inline-end: auto;
  }

  .site-nav,
  .header-store {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }

  body.nav-open .site-nav {
    display: block;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow: auto;
    padding: 8px var(--gutter) 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(45, 42, 37, 0.12);
  }

  body.nav-open .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  body.nav-open .nav-list li + li {
    border-top: 1px solid var(--line);
  }

  body.nav-open .nav-list a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-block: 10px;
    color: var(--ink);
    font-size: 1.15rem;
    white-space: normal;
  }

  body.nav-open .nav-mobile-extra {
    display: block;
    margin-top: 16px;
  }

  /* A larger touch target in the open menu. */
  body.nav-open .nav-mobile-extra .store-badge img {
    height: 48px;
  }
}

@media (max-width: 479px) {
  .lang-pop {
    position: fixed;
    top: calc(var(--header-h) + 4px);
    inset-inline: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 399px) {
  .lang-current {
    display: none;
  }

  .lang-btn {
    padding-inline: 9px 7px;
  }

  .brand-name {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   4. Sections (shared)
   ========================================================================== */
.section {
  padding-block: clamp(64px, 10vw, 128px);
}

main section[id] {
  scroll-margin-top: var(--header-h);
}

.section-head {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(40px, 6vw, 72px);
  text-align: center;
}

.section-head h2,
.cta h2 {
  margin-top: 16px;
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
}

.section-head .lead {
  max-width: 40rem;
  margin-top: 18px;
  margin-inline: auto;
}

.lead {
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

/* Check lists (features and plans) */
.points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.points .icon {
  width: 22px;
  height: 22px;
  margin-top: 0.12em;
  color: var(--green);
}

/* Small "Pro" pill after feature titles and points that need Stillock Pro.
   Its own line-height keeps it from stretching the line box of large headings. */
.pro-tag {
  display: inline-block;
  position: relative;
  top: -0.15em;
  margin-inline-start: 0.4em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--green-deep);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 104px);
}

.hero-grid {
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

.hero-copy {
  text-align: center;
}

.hero-title {
  margin-top: 0;
  font-size: clamp(2.75rem, 6.5vw, 4.9rem);
  font-weight: 600;
  line-height: var(--h-leading);
  letter-spacing: var(--h-tracking);
}

/* The category line ("App blocker for iPhone and iPad") is part of the H1 for search engines but
   keeps the small eyebrow look; .eyebrow sets its own font, size and tracking. */
.hero-kicker {
  text-wrap: initial;
}

.hero-title-text {
  display: block;
  margin-top: 20px;
}

html[data-fonts="arabic"] .hero-title,
html[data-fonts="devanagari"] .hero-title,
html[data-fonts="ja"] .hero-title,
html[data-fonts="ko"] .hero-title,
html[data-fonts="zh"] .hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
}

/* Japanese: break headings between phrases, not mid-word (Chrome 119+). */
html[data-fonts="ja"] h1,
html[data-fonts="ja"] h2,
html[data-fonts="ja"] h3 {
  word-break: auto-phrase;
}

.hero-sub {
  max-width: 34ch;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px; /* Apple's badge needs clear space of at least 1/4 of its height (56px -> 14px) */
  margin-top: 32px;
}

.hero-actions .btn {
  min-height: 52px;
  padding-inline: 20px 24px;
}

.hero-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  isolation: isolate;
}

/* Soft cream-to-white glow and the brand ring, centred behind the phone.
   left/translate centring is symmetric, so it is direction-safe. */
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffdf8 0%, rgba(254, 253, 249, 0.7) 40%, rgba(245, 241, 232, 0) 100%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-ring {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  max-width: none;
  color: var(--sage);
  opacity: 0.35;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-phone {
  width: min(72vw, 300px);
  filter: drop-shadow(var(--shadow-lg));
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .hero-copy {
    text-align: start;
  }

  .hero-sub {
    margin-inline: 0;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .hero-phone {
    width: clamp(250px, 30vw, 380px);
  }

  .hero-ring {
    width: clamp(760px, 66vw, 900px);
    height: clamp(760px, 66vw, 900px);
  }
}

/* ==========================================================================
   6. Band (header video)
   ========================================================================== */
.band {
  background: #f8f5ee;
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.band-video {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 823;
  object-fit: cover;
  object-position: center;
  background: #f8f5ee;
}

@media (max-width: 719px) {
  .band-video {
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   7. Features
   ========================================================================== */
.feature-list {
  display: grid;
  gap: clamp(56px, 8vw, 112px);
}

.feature {
  --tint: var(--green-soft);
  display: grid;
  gap: 32px clamp(40px, 6vw, 88px);
  align-items: center;
}

.feature-rules {
  --tint: var(--terracotta-soft);
}

.feature-schedule {
  --tint: var(--gold-soft);
}

.feature-progress {
  --tint: var(--sage-soft);
}

.feature-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: clamp(420px, 46vw, 580px);
  padding: clamp(32px, 4.5vw, 56px) 16px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 55% at 50% 38%, var(--tint) 0%, rgba(245, 241, 232, 0) 100%),
    linear-gradient(180deg, var(--card) 0%, var(--bg-2) 100%);
}

.feature-phone {
  width: clamp(240px, 26vw, 340px);
  filter: drop-shadow(0 22px 40px rgba(45, 42, 37, 0.16));
}

/* Headline first on small screens, like the App Store screenshots. */
.feature-copy {
  order: -1;
  max-width: 32rem;
}

.feature-copy h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}

.feature-lead {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.55;
}

.feature-copy .points {
  margin-top: 28px;
}

@media (min-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .feature-copy {
    order: 0;
  }

  .feature:nth-child(even) .feature-media {
    order: 2;
  }
}

/* Three smaller cards */
.feature-grid {
  display: grid;
  gap: 20px;
  max-width: 480px;
  margin-top: clamp(64px, 9vw, 120px);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

.feature-card {
  --tint: var(--green-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.feature-card-limit {
  --tint: var(--terracotta-soft);
}

.feature-card-complete {
  --tint: var(--gold-soft);
}

.feature-card-copy {
  padding: 28px 28px 0;
}

.feature-card h3 {
  font-size: 1.55rem;
  line-height: 1.15;
}

html:not([data-fonts="latin"]) .feature-card h3 {
  line-height: var(--h-leading);
}

.feature-card-copy p {
  margin-top: 10px;
  color: var(--muted);
}

.feature-card-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 300px;
  margin-top: auto;
  padding-top: 28px;
  overflow: hidden;
  background: radial-gradient(70% 80% at 50% 100%, var(--tint) 0%, rgba(254, 253, 249, 0) 100%);
}

.feature-card-phone {
  width: min(78%, 240px);
  object-fit: cover;
  object-position: top;
  filter: drop-shadow(0 16px 30px rgba(45, 42, 37, 0.14));
}

/* ==========================================================================
   8. iPhone Duo (unfolded)
   ========================================================================== */
.duo {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
}

/* The whole device is shown (no crop), centred on a soft glow. The inset is
   symmetric, so it is direction-safe. */
.duo-frame {
  position: relative;
  isolation: isolate;
  max-width: 1100px;
  margin-inline: auto;
}

.duo-frame::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -14% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffdf8 0%, rgba(254, 253, 249, 0.65) 45%, rgba(239, 233, 221, 0) 100%);
  pointer-events: none;
}

.duo-shot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--shadow-lg));
}

.duo-points {
  max-width: 32rem;
  margin-top: clamp(40px, 6vw, 72px);
  margin-inline: auto;
  gap: 20px;
}

.duo-points li {
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
  line-height: 1.5;
}

@media (min-width: 900px) {
  .duo-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    max-width: none;
  }
}

/* ==========================================================================
   8b. iPad
   ========================================================================== */
.ipad {
  padding-top: clamp(64px, 10vw, 128px);
  padding-bottom: 0;
  background: var(--bg); /* the Duo section above carries --bg-2 */
  overflow: hidden;
}

/* The iPad cut-out has a flat bottom edge; show its top and let it sit flush on
   the section edge. The lower half of the screenshot is empty, so crop to 3:2. */
.ipad-frame {
  max-width: 1100px;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.ipad-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media (max-width: 719px) {
  .ipad-frame {
    aspect-ratio: 5 / 4;
  }
}

/* ==========================================================================
   9. Privacy band
   ========================================================================== */
.privacy-band {
  background: var(--green);
  color: var(--on-dark);
}

.privacy-band .eyebrow {
  color: var(--sage-light);
}

.privacy-band .lead {
  color: rgba(245, 241, 232, 0.78);
}

.privacy-band :focus-visible {
  outline-color: var(--on-dark);
}

.privacy-cards {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .privacy-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

.privacy-card {
  padding: clamp(24px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
}

.privacy-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--sage-light);
}

.privacy-icon .icon {
  width: 24px;
  height: 24px;
}

.privacy-card h3 {
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 1.2;
}

html:not([data-fonts="latin"]) .privacy-card h3 {
  line-height: var(--h-leading);
}

.privacy-card p {
  margin-top: 10px;
  color: rgba(245, 241, 232, 0.88);
}

.privacy-more {
  margin-top: clamp(36px, 5vw, 56px);
  text-align: center;
}

/* ==========================================================================
   10. Pro
   ========================================================================== */
.plans {
  display: grid;
  gap: 20px;
  max-width: 880px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.plan {
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--radius-lg);
}

.plan-free {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.plan-pro {
  background: var(--ink-2);
  border: 1px solid var(--ink-2);
  color: var(--on-dark);
  box-shadow: var(--shadow);
}

.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.plan-pro .plan-head {
  border-bottom-color: rgba(245, 241, 232, 0.14);
}

.plan-name {
  font-size: 2.1rem;
}

.plan-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.plan-pro .points .icon {
  color: var(--sage);
}

.plan-pro :focus-visible {
  outline-color: var(--on-dark);
}

.pro-note {
  max-width: 40rem;
  margin: 32px auto 0;
  color: var(--muted);
  font-size: 0.95rem;
  text-align: center;
}

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq {
  background: var(--bg-2);
}

.faq-list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--line-strong);
}

.faq-item {
  border-bottom: 1px solid var(--line-strong);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  cursor: pointer;
  list-style: none;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.4;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: "";
}

.faq-item summary:hover .faq-q {
  color: var(--green);
}

.faq-item summary .icon {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

.faq-item[open] summary .icon {
  transform: rotate(180deg);
  color: var(--green);
}

.faq-a {
  max-width: 65ch;
  padding-bottom: 24px;
  color: var(--muted);
}

/* ==========================================================================
   12. CTA
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.cta-ring {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 820px;
  height: 820px;
  max-width: none;
  color: var(--sage);
  opacity: 0.22;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cta-inner {
  max-width: 44rem;
}

.cta h2 {
  margin-top: 0;
  font-size: clamp(2.5rem, 5.6vw, 4.2rem);
}

.cta .lead {
  margin-top: 18px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.cta-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer {
  padding-block: 56px 32px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.footer-top {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 40px;
  }
}

.footer-tagline {
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
}

html:not([data-fonts="latin"]) .footer-tagline {
  font-style: normal;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  /* Wider hit area for short labels, without moving the text. */
  padding-inline: 8px;
  margin-inline: -8px;
  color: var(--ink);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--green);
  text-decoration: underline;
}

.lang-select {
  position: relative;
  display: inline-block;
  justify-self: start;
  max-width: 100%;
}

.lang-select select {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-height: 42px;
  padding-block: 6px;
  padding-inline: 40px 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.lang-select select:hover {
  border-color: var(--muted-2);
}

.lang-select > .icon {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.lang-select > .icon:first-child {
  inset-inline-start: 14px;
}

.lang-select > .icon:last-child {
  inset-inline-end: 13px;
  width: 15px;
  height: 15px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-apple {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ==========================================================================
   14. Preview dialog
   ========================================================================== */
dialog.preview {
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

dialog.preview::backdrop {
  background: rgba(26, 23, 20, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.preview-inner {
  position: relative;
}

.preview-video {
  width: auto;
  height: min(86vh, 820px);
  max-width: calc(100vw - 32px);
  aspect-ratio: 9 / 19.5;
  object-fit: contain;
  border-radius: 28px;
  background: #000;
  box-shadow: var(--shadow-lg);
}

.preview-close {
  position: absolute;
  z-index: 1;
  top: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--on-dark);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.preview-close:hover {
  background: #fff;
}

.preview-close .icon {
  width: 20px;
  height: 20px;
}

@media (min-width: 480px) {
  .preview-close {
    top: -14px;
    inset-inline-end: -14px;
  }
}

body.preview-open {
  overflow: hidden;
}

/* ==========================================================================
   15. 404
   ========================================================================== */
.page-404 {
  min-height: 60vh;
  padding-block: clamp(64px, 10vw, 128px);
  text-align: center;
}

.page-404 h1 {
  margin-top: 16px;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.page-404 p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--muted);
}

.page-404 p:last-child {
  margin-top: 32px;
}

/* ==========================================================================
   16. Small screens
   ========================================================================== */
@media (max-width: 479px) {
  body {
    font-size: 16px;
  }

  .lead,
  .feature-lead {
    font-size: 1.08rem;
  }

  .hero-sub {
    font-size: 1.1rem;
  }

  .feature-card-copy {
    padding: 24px 22px 0;
  }

  .faq-item summary {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   17. Motion (only when the visitor hasn't asked for less)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .lang-btn,
  .nav-list a {
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .store-badge {
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .store-badge:hover,
  .btn:hover {
    transform: translateY(-1px);
  }

  .lang-btn .icon:last-child,
  .faq-item summary .icon {
    transition: transform 0.25s var(--ease), color 0.2s var(--ease);
  }

  .feature-card {
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }

  .feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }

  [data-reveal].in {
    opacity: 1;
    transform: none;
  }

  .feature-card[data-reveal] {
    transition: opacity 0.6s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }

  .feature-card[data-reveal].in:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   18. Print
   ========================================================================== */
@media print {
  .site-header {
    position: static;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: none;
  }

  .header-actions,
  .site-nav,
  .skip-link,
  .band,
  dialog.preview,
  .hero-actions,
  .cta-actions,
  .lang-select {
    display: none !important;
  }

  .privacy-band,
  .plan-pro {
    background: none;
    color: var(--ink);
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* src/styles/legal.css */
/* Stillock website: Privacy Policy and Terms of Use.
   Base styles (.container, .eyebrow, .btn, header, footer) live in site.css.
   Logical properties only, so the Arabic (RTL) pages mirror correctly. */

.legal {
  padding-block: clamp(48px, 8vw, 96px);
}

.legal-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
}

/* ---------- Table of contents ---------- */

.legal-aside {
  min-width: 0;
}

.toc-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list li + li {
  margin-block-start: 0.15rem;
}

.toc-list a {
  display: flex;
  gap: 0.35em;
  padding-block: 0.35rem;
  padding-inline: 0.75rem 0;
  border-inline-start: 2px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.toc-list a:hover,
.toc-list a:focus-visible {
  color: var(--ink);
  border-inline-start-color: var(--green);
}

.toc-list .num {
  color: var(--green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* Wide screens: static sticky list; the <details> copy is not rendered. */
.toc-details {
  display: none;
}

/* Small screens: the collapsible <details> card; the static list is not rendered. */
@media (max-width: 999.98px) {
  .legal-aside > .toc {
    display: none;
  }

  .toc-details {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }

  .toc-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    border-radius: 16px;
  }

  .toc-details > summary::-webkit-details-marker {
    display: none;
  }

  .toc-details > summary:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
  }

  .toc-details > summary .icon {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--muted);
    transition: transform 0.25s var(--ease);
  }

  .toc-details[open] > summary .icon {
    transform: rotate(180deg);
  }

  .toc-details[open] > summary {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-block-end: 1px solid var(--line);
  }

  .toc--compact {
    padding: 0.75rem 1.15rem 1rem;
  }

  /* Touch-sized rows in the collapsible list. */
  .toc--compact .toc-list a {
    align-items: center;
    min-height: 40px;
  }
}

@media (min-width: 1000px) {
  .legal-wrap {
    grid-template-columns: 240px minmax(0, 720px);
    justify-content: center;
  }

  .legal-aside {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    padding-block-end: 1rem;
  }
}

/* ---------- Article ---------- */

.legal-body {
  min-width: 0;
  color: var(--ink);
}

.legal-head {
  padding-block-end: 1.75rem;
  margin-block-end: 2rem;
  border-block-end: 1px solid var(--line);
}

.legal-head .eyebrow {
  margin-block-end: 0.75rem;
}

.legal-head h1 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: var(--h-leading);
  letter-spacing: var(--h-tracking);
  color: var(--ink);
  overflow-wrap: break-word;
}

.legal-updated {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.legal-intro p {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

.legal-section {
  margin-block: 2.5rem;
}

.legal-section[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.legal-section h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: var(--h-tracking);
  color: var(--ink);
}

.legal-section h2 .num {
  color: var(--green);
  margin-inline-end: 0.4em;
  font-variant-numeric: lining-nums tabular-nums;
}

.legal-section p,
.legal-section li {
  font-size: 1.05rem;
  line-height: 1.7;
}

.legal-section p {
  margin: 0 0 1rem;
}

.legal-section ul {
  margin: 0 0 1rem;
  padding-inline-start: 1.25rem;
}

.legal-section li::marker {
  color: var(--green);
}

.legal-section li + li {
  margin-block-start: 0.5rem;
}

.legal-section > :last-child {
  margin-block-end: 0;
}

.legal-intro a,
.legal-section a,
.legal-foot p a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal-intro a:hover,
.legal-section a:hover,
.legal-foot p a:hover {
  color: var(--green-deep);
  text-decoration-thickness: 2px;
}

/* Contact */
.legal-contact p {
  font-size: 1.15rem;
}

.legal-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-block-start: 0.25rem;
  font-weight: 500;
  color: var(--green);
}

.legal-contact a .icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* Footer of the article */
.legal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-block-start: 3rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--line);
}

.legal-foot p {
  margin: 0;
  color: var(--muted);
}

.legal-back .icon {
  width: 18px;
  height: 18px;
  transform: scaleX(-1); /* the arrow points back (towards the start) */
}

[dir="rtl"] .legal-back .icon {
  transform: none;
}

/* Developer placeholders that must be replaced before launch. */
mark.placeholder {
  unicode-bidi: isolate; /* English placeholder inside RTL text stays in one piece */
  white-space: nowrap;
  background: var(--gold-soft);
  color: var(--ink);
  padding: 0 0.3em;
  border-radius: 6px;
  outline: 1px dashed var(--gold);
}

/* ---------- Print ---------- */

@media print {
  .legal-aside,
  .legal-back {
    display: none !important;
  }

  .legal {
    padding-block: 0;
  }

  .legal-wrap {
    display: block;
  }

  .legal-body,
  .legal-body h1,
  .legal-body h2,
  .legal-body .num,
  .legal-body p,
  .legal-body li,
  .legal-body a,
  .legal-updated {
    color: #000 !important;
    background: #fff;
  }

  body.page-legal {
    background: #fff;
    color: #000;
  }

  .legal-section h2 {
    break-after: avoid;
  }

  .legal-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }

  mark.placeholder {
    outline: 1px dashed #000;
    background: #fff;
  }
}

/* src/styles/article.css */
/* Stillock website: content pages (guides, compare, blog, about, press) and the section hubs.
   Base styles (.container, .eyebrow, .btn, .crumbs, header, footer) live in site.css.
   Logical properties only, so the Arabic (RTL) pages mirror correctly. */

/* ---------- Article ---------- */

.article-page,
.hub-page {
  padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px);
}

.article-wrap,
.hub-wrap {
  max-width: 760px;
}

.article-head {
  margin-block: 1.25rem 2rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--line);
}

.article-head .eyebrow {
  margin-block-end: 0.9rem;
}

.article-head h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
}

.article-meta {
  margin-block-start: 0.9rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Table of contents */
.article-toc {
  margin-block-end: 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.article-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  list-style: none;
  border-radius: 16px;
}

.article-toc > summary::-webkit-details-marker {
  display: none;
}

.article-toc > summary .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--muted);
  transition: transform 0.25s var(--ease);
}

.article-toc[open] > summary .icon {
  transform: rotate(180deg);
}

.article-toc ol {
  margin: 0;
  padding: 0 1.15rem 1rem 2.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.article-toc li + li {
  margin-block-start: 0.3rem;
}

.article-toc a {
  color: var(--muted);
  text-decoration: none;
}

.article-toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Body typography */
.article-body {
  color: var(--ink);
  font-size: 1.07rem;
  line-height: 1.7;
}

.article-body > * + * {
  margin-block-start: 1.1rem;
}

.article-lead {
  padding: 1.1rem 1.3rem;
  background: var(--green-soft);
  border-inline-start: 4px solid var(--green);
  border-radius: 14px;
  font-size: 1.12rem;
}

.article-body h2 {
  margin-block-start: 2.6rem;
  font-size: 1.7rem;
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.article-body h3 {
  margin-block-start: 1.9rem;
  font-size: 1.25rem;
  line-height: 1.3;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.article-body h4 {
  margin-block-start: 1.5rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
}

.article-body p {
  margin-block-start: 1.1rem;
}

.article-body a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-body a:hover {
  color: var(--green-deep);
  text-decoration-thickness: 2px;
}

.article-body ul,
.article-body ol {
  padding-inline-start: 1.4rem;
}

.article-body li + li {
  margin-block-start: 0.45rem;
}

.article-body li::marker {
  color: var(--green);
  font-weight: 600;
}

.article-body ul ul,
.article-body ol ol,
.article-body ul ol,
.article-body ol ul {
  margin-block-start: 0.45rem;
}

.article-body blockquote {
  margin: 1.4rem 0;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--gold);
  border-radius: 14px;
  color: var(--ink);
}

.article-body blockquote > * + * {
  margin-block-start: 0.7rem;
}

.article-body img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 18px;
}

.article-body img.phone {
  display: block;
  max-width: min(100%, 300px);
  margin-block: 1.6rem;
  margin-inline: auto;
  filter: drop-shadow(var(--shadow));
}

.article-body hr {
  margin-block: 2.5rem;
  border: 0;
  border-block-start: 1px solid var(--line);
}

.article-body code {
  padding: 0.1em 0.4em;
  background: var(--bg-2);
  border-radius: 6px;
  font-size: 0.92em;
}

.article-body pre {
  overflow-x: auto;
  padding: 1rem 1.2rem;
  background: var(--ink-2);
  color: var(--on-dark);
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.article-body pre code {
  padding: 0;
  background: none;
}

/* Tables (comparisons) */
.table-wrap {
  overflow-x: auto;
  margin-block: 1.4rem;
  -webkit-overflow-scrolling: touch;
}

.article-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.45;
}

.article-body th,
.article-body td {
  padding: 0.7rem 0.8rem;
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.article-body thead th {
  background: var(--bg-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.article-body tbody th {
  font-weight: 600;
}

/* App Store badge inside the text and the closing call to action */
.article-store {
  margin-block: 1.4rem;
}

.article-cta {
  margin-block-start: 3rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--green);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  text-align: center;
}

.article-cta h2 {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  color: var(--on-dark);
}

.article-cta p {
  max-width: 48ch;
  margin: 0 auto 1.4rem;
  color: var(--sage-light);
  font-size: 1.02rem;
}

/* Related pages */
.article-related {
  margin-block-start: 2.5rem;
}

.article-related h2 {
  margin-block-end: 1rem;
  font-size: 1.3rem;
}

.article-related ul {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-related a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.article-related a:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
}

.related-section {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

html:not([data-fonts="latin"]) .related-section {
  letter-spacing: 0.02em;
  text-transform: none;
}

.related-title {
  font-weight: 600;
}

/* ---------- Hubs ---------- */

.hub-head {
  margin-block: 1.25rem 2rem;
}

.hub-head h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
}

.hub-head .lead {
  margin-block-start: 1rem;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.6;
}

.hub-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-card a {
  display: block;
  padding: 1.25rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.hub-card a:hover {
  border-color: var(--sage);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.hub-card h2 {
  font-size: 1.3rem;
  line-height: 1.25;
}

.hub-card p {
  margin-block-start: 0.5rem;
  color: var(--muted);
  line-height: 1.55;
}

.hub-date {
  font-size: 0.85rem;
}

/* ---------- Legal pages: breadcrumb row above the two-column grid ---------- */

.legal-crumbs {
  grid-column: 1 / -1;
  margin-block-end: -0.5rem;
}

@media (min-width: 1000px) {
  .legal-crumbs {
    max-width: 984px;
    width: 100%;
    margin-inline: auto;
  }
}

/* ---------- Print ---------- */

@media print {
  .article-toc,
  .article-cta,
  .article-related,
  .crumbs {
    display: none !important;
  }
}