@font-face{font-family:"Cormorant Garamond";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/cormorant-garamond-latin-600-normal.ae062b6d.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:"Cormorant Garamond";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/cormorant-garamond-latin-ext-600-normal.4993f7f4.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:"Cormorant Garamond";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/cormorant-garamond-latin-700-normal.21a0fc1c.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:"Cormorant Garamond";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/cormorant-garamond-latin-ext-700-normal.f6cf9ae2.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:"Cormorant Garamond";font-style:italic;font-display:swap;font-weight:700;src:url(../fonts/cormorant-garamond-latin-700-italic.365e35e7.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:"Cormorant Garamond";font-style:italic;font-display:swap;font-weight:700;src:url(../fonts/cormorant-garamond-latin-ext-700-italic.ebb976cf.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-display:swap;font-weight:400;src:url(../fonts/manrope-latin-400-normal.849290ef.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-display:swap;font-weight:400;src:url(../fonts/manrope-latin-ext-400-normal.72c5354a.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-display:swap;font-weight:600;src:url(../fonts/manrope-latin-600-normal.f7ac6258.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-display:swap;font-weight:600;src:url(../fonts/manrope-latin-ext-600-normal.ff679412.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:"Cormorant-fallback";src:local("Georgia"),local("Times New Roman");size-adjust:88%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"Manrope-fallback";src:local("Arial"),local("Segoe UI");size-adjust:106%;ascent-override:108%;descent-override:30%;line-gap-override:0%}
/* ============================================================ tokens
   « Cathédrale de lumière » — warm parchment, midnight ink, liturgical
   gold, Marian blue. Colors are authored in oklch (hex refs alongside);
   every derived tint goes through color-mix in oklch.
   Contrast rule: gold is NEVER body text on parchment — it is reserved
   for ornaments, rules, icons and very large display headings (the
   dedicated -ink gradient stops all keep >= 3:1 there). Body text is
   --ink on --paper (~13.9:1). On --night, text is --night-text and gold
   accents use --gold-light (>= 10:1). Verified by scripts/check-contrast.mjs. */

:root {
  /* -- surfaces ------------------------------------------------------ */
  --paper: oklch(96.23% 0.0143 84.58);      /* #F7F2E8 */
  --paper-2: oklch(92.97% 0.0242 85.79);    /* #EFE7D6 */
  --card: oklch(98.80% 0.0082 91.48);       /* #FDFBF5 */
  --night: oklch(19.84% 0.0360 266.20);     /* #0E1526 */
  --night-2: oklch(23.09% 0.0466 266.63);   /* #131C33 */

  /* -- text ---------------------------------------------------------- */
  --ink: oklch(26.16% 0.0359 265.59);       /* #1C2436 */
  --ink-soft: oklch(43.25% 0.0455 266.72);  /* #45506A */
  --muted: oklch(52.73% 0.0422 271.53);     /* #626A84 */
  --night-text: oklch(92.61% 0.0226 87.15); /* #EDE6D6 */
  --night-muted: oklch(80.86% 0.0292 270.35); /* #B9C0D4 */

  /* -- gold ---------------------------------------------------------- */
  --gold: oklch(65.98% 0.1190 80.03);       /* #B8892E */
  --gold-light: oklch(83.62% 0.1057 90.93); /* #E3C776 */
  --gold-deep: oklch(54.84% 0.1005 80.84);  /* #8F6A1F */
  /* The only gold dark enough for SMALL text on light surfaces (>= 4.5:1). */
  --gold-text: oklch(48.89% 0.0902 81.12);  /* #7A5A18 */
  /* Decorative sweep (ornaments, night display text). */
  --grad-gold: linear-gradient(135deg, var(--gold-deep), var(--gold) 45%, var(--gold-light));
  /* Display keywords ON PARCHMENT: every stop >= 3:1 vs --paper. */
  --gold-ink-a: oklch(54.84% 0.1005 80.84); /* #8F6A1F */
  --gold-ink-b: oklch(57.81% 0.1060 80.49); /* #9A7222 */
  --gold-ink-c: oklch(62.98% 0.1172 79.91); /* #AE8025 */
  --grad-gold-ink: linear-gradient(135deg, var(--gold-ink-a), var(--gold-ink-b) 50%, var(--gold-ink-c));
  /* Button surface: every stop >= 4.5:1 vs --btn-ink label. */
  --gold-btn-a: oklch(65.98% 0.1190 80.03); /* #B8892E */
  --gold-btn-b: oklch(74.40% 0.1195 83.62); /* #D0A54A */
  --gold-btn-c: oklch(83.62% 0.1057 90.93); /* #E3C776 */
  --grad-gold-btn: linear-gradient(135deg, var(--gold-btn-a), var(--gold-btn-b) 50%, var(--gold-btn-c));
  --btn-ink: oklch(22.48% 0.0379 84.03);    /* #241A05 */

  /* -- accents ------------------------------------------------------- */
  --marian: oklch(42.79% 0.1177 264.57);    /* #2E4B8F */
  --halo: radial-gradient(closest-side, color-mix(in oklch, var(--gold-light) 26%, transparent), transparent 70%);

  /* -- lines & borders ----------------------------------------------- */
  --border: color-mix(in oklch, var(--gold) 18%, transparent);
  --border-soft: color-mix(in oklch, var(--gold) 14%, transparent);
  --border-night: color-mix(in oklch, var(--gold-light) 22%, transparent);
  --hairline: color-mix(in oklch, var(--gold) 32%, transparent);

  /* -- radii --------------------------------------------------------- */
  --r-s: 12px;
  --r-m: 18px;
  --r-arc: 999px 999px 18px 18px; /* Romanesque arch: full-round top */
  --r-pill: 999px;

  /* -- type ---------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant-fallback", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Manrope-fallback", Arial, system-ui, sans-serif;

  /* -- rhythm -------------------------------------------------------- */
  --container: 1160px;
  --gutter: clamp(20px, 4.5vw, 40px);
  --section: clamp(72px, 11vw, 128px);

  /* -- elevation (warm, soft) ---------------------------------------- */
  --shadow-1: 0 1px 2px oklch(40% 0.05 80 / 0.06), 0 8px 24px oklch(40% 0.05 80 / 0.08);
  --shadow-2: 0 2px 6px oklch(40% 0.05 80 / 0.08), 0 18px 48px oklch(40% 0.05 80 / 0.12);
  --glow-gold: 0 6px 28px color-mix(in oklch, var(--gold) 38%, transparent);

  /* -- header -------------------------------------------------------- */
  --header-h: 76px;

  accent-color: var(--gold);
  color-scheme: light;
}

/* ============================================================== base */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--gold) 45%, var(--paper-2)) transparent;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection {
  background: var(--gold);
  color: var(--paper);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: inherit;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
}

img, svg, canvas { display: block; max-inline-size: 100%; }

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

button { cursor: pointer; background: none; border: 0; padding: 0; }

ul[class], ol[class] { padding: 0; list-style: none; }

/* Focus: Marian ring with a parchment halo underneath so the indicator
   stays visible on light AND night surfaces (WCAG 2.2, never hidden by
   the sticky header thanks to scroll-margin). */
:focus-visible {
  outline: 2px solid var(--marian);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: 4px;
}

[id] { scroll-margin-block-start: calc(var(--header-h) + 24px); }

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

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.9rem;
  transform: translateY(-64px);
  opacity: 0;
}

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

/* Global parchment grain — barely-there paper texture. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

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

.section { padding-block: var(--section); }

/* Night sections — starry-sky counterpoint to the parchment. */
.on-night {
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in oklch, var(--marian) 14%, transparent), transparent 70%),
    var(--night);
  color: var(--night-text);
}

.on-night :focus-visible { box-shadow: 0 0 0 2px var(--paper); }

/* Typographic helpers ------------------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.on-night .eyebrow { color: var(--gold-light); }

.eyebrow::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  rotate: 45deg;
  background: var(--grad-gold);
  flex: none;
}

.display {
  font-size: clamp(2.2rem, 1.5rem + 3.6vw, 4.2rem);
  font-weight: 700;
}

.title-2 {
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.7rem);
  font-weight: 700;
}

.title-3 {
  font-size: clamp(1.25rem, 1.1rem + 0.9vw, 1.7rem);
  font-weight: 700;
}

/* Gold display keyword — italic, gradient-clipped. On parchment the
   -ink gradient keeps every stop >= 3:1; on night the luminous sweep. */
.gold-word {
  font-style: italic;
  background: var(--grad-gold-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline-end: 0.06em;
}

.on-night .gold-word,
.gold-word.on-night { background-image: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }

.lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

.on-night .lead { color: var(--night-muted); }

/* ============================================================ header */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  block-size: var(--header-h);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

/* Parchment translucide -> warm glass after 40px of scroll (JS toggles). */
.header.is-scrolled {
  background: color-mix(in oklch, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}

.header-inner {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.brand-mark {
  position: relative;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: var(--halo);
  pointer-events: none;
}

.brand-mark svg { inline-size: 22px; block-size: 22px; }

/* The real app logo (gold line art on transparency), sized per context.
   Always decorative: the brand name is adjacent text. */
.brand-logo {
  display: block;
  inline-size: 26px;
  block-size: 26px;
  object-fit: contain;
}

.brand-mark .brand-logo { position: relative; }

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.nav a {
  padding: 10px 14px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav a:hover { color: var(--ink); background: color-mix(in oklch, var(--gold) 10%, transparent); }

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

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

/* Language selector ------------------------------------------------- */

.lang {
  position: relative;
}

.lang > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

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

.lang > summary:hover { border-color: var(--hairline); color: var(--ink); }

.lang[open] > summary { border-color: var(--hairline); color: var(--ink); }

.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  min-inline-size: 190px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  z-index: 120;
}

.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-s);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.lang-menu a:hover { background: color-mix(in oklch, var(--gold) 10%, transparent); color: var(--ink); }

.lang-menu a[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
}

.lang-menu a[aria-current="true"]::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  rotate: 45deg;
  background: var(--grad-gold);
}

/* Pages that open on a night hero: light header ink until the glass
   parchment background appears on scroll. */
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .brand-word { color: var(--night-text); }
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .brand-mark { background: var(--night-2); border-color: var(--border-night); }
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .nav a { color: var(--night-muted); }
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .nav a:hover,
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .nav a[aria-current="page"] { color: var(--night-text); }
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .lang > summary { color: var(--night-muted); border-color: var(--border-night); }
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .lang[open] > summary,
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .lang > summary:hover { color: var(--night-text); }
html:not(.menu-open) .header.tone-night:not(.is-scrolled) .burger { color: var(--night-text); border-color: var(--border-night); }

/* Reading progress — fine golden bar under the header hairline. */
.progress {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  pointer-events: none;
}

.progress span {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--grad-gold);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Burger + mobile menu ---------------------------------------------- */

.burger {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.burger svg { inline-size: 22px; block-size: 22px; }

.burger .icon-close, .burger[aria-expanded="true"] .icon-open { display: none; }
.burger[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
  background:
    radial-gradient(120% 50% at 50% 0%, color-mix(in oklch, var(--gold-light) 14%, transparent), transparent 60%),
    var(--paper);
  overflow-y: auto;
}

html.menu-open .mobile-menu { display: flex; }
html.menu-open { overflow: hidden; }
html.menu-open .header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 1.25;
  color: var(--ink);
  padding-block: 6px;
  border-block-end: 1px solid var(--border-soft);
}

.mobile-menu nav a[aria-current="page"] { color: var(--gold-deep); }

.mobile-langs {
  margin-block-start: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mobile-langs a {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.mobile-langs a[aria-current="true"] {
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}

.mobile-cta { margin-block-start: 32px; }

/* Six localized nav items (PL/DE run long): collapse earlier than v1. */
@media (max-width: 1120px) {
  .nav, .header .lang, .header .btn { display: none; }
  .burger { display: grid; }
}

/* Offset for fixed header: every page starts under it. */
main { padding-block-start: 0; }

/* ============================================================ footer */

.footer {
  background:
    radial-gradient(110% 70% at 50% 100%, color-mix(in oklch, var(--marian) 12%, transparent), transparent 65%),
    var(--night);
  color: var(--night-text);
  position: relative;
  overflow: clip;
}

/* Prominent trust band — Fiducia is a brand pillar, not a footnote. */
.footer-trust {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-block-start: 56px;
  padding: 22px 26px;
  border: 1px solid var(--border-night);
  border-radius: var(--r-m);
  background: color-mix(in oklch, var(--gold-light) 7%, transparent);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.footer-trust:hover {
  background: color-mix(in oklch, var(--gold-light) 12%, transparent);
  border-color: color-mix(in oklch, var(--gold-light) 38%, transparent);
}

.footer-trust-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  color: var(--gold-light);
  border: 1px solid var(--border-night);
}

.footer-trust-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-trust-copy strong {
  font-family: var(--font-display);
  font-size: 1.14rem;
  letter-spacing: 0.01em;
  color: var(--night-text);
}

.footer-trust-copy > span { color: var(--night-muted); font-size: 0.95rem; }

.footer-trust-arrow {
  margin-inline-start: auto;
  color: var(--gold-light);
  transition: transform 0.25s ease;
}

.footer-trust:hover .footer-trust-arrow { transform: translateX(4px); }

@media (max-width: 560px) {
  .footer-trust { flex-wrap: wrap; }
  .footer-trust-arrow { display: none; }
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  padding-block: 56px;
}

.footer-brand .brand-word { color: var(--night-text); }

.footer-brand .brand-mark {
  background: var(--night-2);
  border-color: var(--border-night);
}

.footer-tagline {
  margin-block-start: 16px;
  max-inline-size: 30ch;
  color: var(--night-muted);
  font-size: 0.98rem;
}

.footer-social {
  margin-block-start: 22px;
  display: flex;
  gap: 10px;
}

/* Inert social placeholders — real profiles come later. */
.footer-social a {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-night);
  color: var(--night-muted);
  opacity: 0.65;
  cursor: default;
}

.footer h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-block-end: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a {
  color: var(--night-muted);
  font-size: 0.97rem;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--night-text); }

.footer-newsletter {
  border-block-start: 1px solid var(--border-night);
  padding-block: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
}

.footer-newsletter h3 { margin: 0; }

.nl-form {
  display: flex;
  gap: 10px;
  flex: 1 1 340px;
  max-inline-size: 460px;
}

.nl-form input {
  flex: 1;
  min-inline-size: 0;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-night);
  background: color-mix(in oklch, var(--night-2) 80%, transparent);
  color: var(--night-text);
}

.nl-form input::placeholder { color: var(--night-muted); }

.nl-msg {
  flex-basis: 100%;
  color: var(--gold-light);
  font-size: 0.94rem;
}

.nl-msg[hidden] { display: none; }

.footer-legal {
  border-block-start: 1px solid var(--border-night);
  padding-block: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  font-size: 0.9rem;
  color: var(--night-muted);
}

.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-legal a { color: var(--night-muted); }
.footer-legal a:hover { color: var(--night-text); }

.footer-legal .lang-inline {
  margin-inline-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.footer-legal .lang-inline a[aria-current="true"] { color: var(--gold-light); font-weight: 600; }

@media (max-width: 980px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; gap: 34px; }
  .footer-legal .lang-inline { margin-inline-start: 0; }
}

/* =========================================================== buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-block-size: 48px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  /* No transform in the transition list: GSAP drives transforms
     (magnetic hover, reveals) and a CSS transition re-smoothing every
     frame makes the scripted motion mushy or invisible. */
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}

.btn-gold {
  background: var(--grad-gold-btn);
  color: var(--btn-ink);
}

.btn-gold:hover { box-shadow: var(--glow-gold); }

.btn-ghost {
  border: 1px solid var(--hairline);
  color: var(--ink);
  background: transparent;
}

.btn-ghost:hover { border-color: var(--gold); background: color-mix(in oklch, var(--gold) 8%, transparent); }

.on-night .btn-ghost { color: var(--night-text); border-color: var(--border-night); }
.on-night .btn-ghost:hover { border-color: var(--gold-light); background: color-mix(in oklch, var(--gold-light) 10%, transparent); }

/* ============================================================= cards */

.card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  padding: 28px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-2);
}

.card h3 { margin-block-end: 10px; }

.card p { color: var(--ink-soft); font-size: 0.98rem; }

.on-night .card {
  background: color-mix(in oklch, var(--night-2) 92%, transparent);
  border-color: var(--border-night);
  box-shadow: none;
}

.on-night .card p { color: var(--night-muted); }
.on-night .card h3 { color: var(--night-text); }

/* Icon dot — small round pastille with a gold-stroked icon. */
.icon-dot {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--gold) 10%, var(--card));
  border: 1px solid var(--border);
  margin-block-end: 18px;
}

.icon-dot svg { color: var(--gold-deep); }

.on-night .icon-dot {
  background: color-mix(in oklch, var(--gold-light) 12%, var(--night-2));
  border-color: var(--border-night);
}

.on-night .icon-dot svg { color: var(--gold-light); }

/* ============================================================= chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 70%, transparent);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.chip svg { color: var(--gold-deep); flex: none; }

.on-night .chip {
  background: color-mix(in oklch, var(--night-2) 70%, transparent);
  border-color: var(--border-night);
  color: var(--night-muted);
}

.on-night .chip svg { color: var(--gold-light); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ======================================================== gold rule */

/* Fine golden horizontal rule; [data-rule] draws itself on entry. */
.gold-rule {
  border: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}

[data-rule] { transform-origin: 50% 50%; }

/* ======================================================= prompt bar */

.prompt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: min(100%, 560px);
  padding: 8px 8px 8px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.prompt-bar:focus-within {
  border-color: var(--gold);
  box-shadow: var(--shadow-1), 0 0 0 5px color-mix(in oklch, var(--gold) 14%, transparent);
}

.prompt-bar input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: none;
  padding-block: 8px;
  font-size: 1rem;
  color: var(--ink);
}

.prompt-bar input::placeholder { color: var(--muted); }

.prompt-bar input:focus { outline: none; }

.prompt-send {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--grad-gold-btn);
  color: var(--btn-ink);
  transition: box-shadow 0.25s ease;
}

.prompt-send:hover { box-shadow: var(--glow-gold); }

/* ======================================================== chat demo */

.chat-demo {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-demo .msg {
  max-inline-size: 92%;
  padding: 14px 18px;
  border-radius: var(--r-m);
  font-size: 0.97rem;
  line-height: 1.6;
}

.chat-demo .msg-user {
  align-self: flex-end;
  background: color-mix(in oklch, var(--marian) 9%, var(--card));
  border: 1px solid color-mix(in oklch, var(--marian) 22%, transparent);
  color: var(--ink);
  border-end-end-radius: 6px;
}

.chat-demo .msg-agape {
  align-self: flex-start;
  background: color-mix(in oklch, var(--gold) 7%, var(--card));
  border: 1px solid var(--border);
  color: var(--ink);
  border-end-start-radius: 6px;
  position: relative;
}

.chat-demo .msg-agape .sender {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  margin-block-end: 8px;
}

.chat-demo .msg-agape .sender svg { inline-size: 15px; block-size: 15px; }

/* Typing effect scaffolding: the real text keeps its space (no CLS),
   the typed layer paints over it. The wrapper must be a block: an
   inline containing block collapses the absolute layer's width and the
   typed text falls into a one-word-per-line column over the badges. */
.chat-text {
  display: block;
  position: relative;
}

.chat-text .chat-typed {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.chat-demo .msg {
  min-inline-size: 0;
  overflow-wrap: break-word;
}

.chat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-badges .chip {
  font-size: 0.8rem;
  padding: 6px 12px;
}

/* ==================================================== arch figures */

/* Romanesque arch: full-round top, soft base — the visual signature. */
.figure-arch {
  position: relative;
  border-radius: var(--r-arc);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--gold-light) 16%, transparent), transparent 62%),
    var(--paper-2);
  overflow: clip;
}

.figure-arch::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: var(--r-arc);
  border: 1px solid var(--border-soft);
  pointer-events: none;
}

.on-night .figure-arch {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklch, var(--marian) 20%, transparent), transparent 65%),
    var(--night-2);
  border-color: var(--border-night);
}

/* ========================================================= checklist */

.checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-soft);
}

.checklist li svg {
  flex: none;
  margin-block-start: 3px;
  color: var(--gold-deep);
}

.on-night .checklist li { color: var(--night-muted); }
.on-night .checklist li svg { color: var(--gold-light); }

/* ======================================================= store badges */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  min-inline-size: 172px;
  border-radius: var(--r-s);
  border: 1px solid var(--border);
  background: var(--ink);
  color: var(--paper);
  text-align: start;
}

.store-badge .sb-icon { flex: none; }

.store-badge .sb-lines { display: flex; flex-direction: column; line-height: 1.25; }
.store-badge .sb-hint { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.store-badge .sb-name { font-weight: 600; font-size: 1.02rem; }

.store-badge[aria-disabled="true"] {
  opacity: 0.45;
  filter: grayscale(0.9);
  cursor: default;
}

/* ============================================================= modal */

.modal {
  inset: 0;
  margin: auto;
  inline-size: min(92vw, 480px);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  padding: 40px 34px 34px;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in oklch, var(--gold-light) 18%, transparent), transparent 60%),
    var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-2);
  text-align: center;
}

.modal::backdrop {
  background: color-mix(in oklch, var(--night) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Luminous entrance: @starting-style + transition (Esc/close reverses). */
.modal[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), overlay 0.35s ease allow-discrete, display 0.35s ease allow-discrete;
}

@starting-style {
  .modal[open] {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

.modal .modal-mark {
  margin-inline: auto;
  margin-block-end: 18px;
  inline-size: 60px;
  block-size: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  position: relative;
}

.modal .modal-mark::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: var(--halo);
}

.modal .modal-mark svg { inline-size: 30px; block-size: 30px; }
.modal .modal-mark .brand-logo { inline-size: 36px; block-size: 36px; }

.chat-demo .sender .sender-logo { inline-size: 16px; block-size: 16px; }

.modal h2 {
  font-size: 1.9rem;
  margin-block-end: 10px;
}

.modal .modal-line {
  color: var(--ink-soft);
  margin-block-end: 26px;
}

.modal .modal-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  color: var(--ink-soft);
}

.modal .modal-close:hover { background: color-mix(in oklch, var(--gold) 12%, transparent); color: var(--ink); }

/* ====================================================== dust canvas */

.dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dust canvas { inline-size: 100%; block-size: 100%; }

/* ============================================== phone mockup (v1.2)
   Sober device frame around real in-app light-theme captures
   (1170x2532). Bezel in night ink, hairline gold edge, warm shadow.
   No fake system bars: the capture is the exact app viewport. */

.phone {
  margin: 0;
  inline-size: min(340px, 78vw);
  text-align: center;
  container-type: inline-size;
}

.phone-frame {
  position: relative;
  border-radius: clamp(30px, 12.9cqi, 44px);
  padding: clamp(7px, 2.9cqi, 10px);
  background: linear-gradient(165deg, #2B3247, #141A2B 55%, #0E1526);
  box-shadow:
    0 34px 90px -34px rgba(143, 106, 31, 0.55),
    0 16px 40px -22px rgba(14, 21, 38, 0.45),
    inset 0 0 0 1px rgba(227, 199, 118, 0.16);
}

.phone-frame::after {
  /* soft glass highlight along the top edge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.10), transparent 18%);
}

.phone-frame picture { display: block; }

.phone-frame img.phone-screen {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: clamp(24px, 10.3cqi, 35px);
}

.phone > figcaption {
  margin-block-start: 14px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.on-night .phone > figcaption { color: var(--night-muted); }

/* ------------------------------------------- fan of 2-3 devices */

.phone-fan {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  isolation: isolate;
}

.phone-fan .phone { flex: none; }

.phone-fan .phone-main {
  inline-size: min(330px, 76vw);
  z-index: 2;
  filter: drop-shadow(0 6px 22px rgba(14, 21, 38, 0.12));
}

.phone-fan .phone-side {
  inline-size: min(272px, 60vw);
  z-index: 1;
  margin-block-start: 58px;
}

.phone-fan .phone-left {
  transform: rotate(-6.5deg);
  margin-inline-end: -44px;
}

.phone-fan .phone-right {
  transform: rotate(6.5deg);
  margin-inline-start: -44px;
}

@media (max-width: 860px) {
  .phone-fan .phone-side { inline-size: min(210px, 44vw); margin-block-start: 44px; }
  .phone-fan .phone-left { margin-inline-end: -34px; }
  .phone-fan .phone-right { margin-inline-start: -34px; }
}

@media (max-width: 560px) {
  /* one device, sides tucked away: the composition stays calm on mobile */
  .phone-fan .phone-side { display: none; }
  .phone-fan .phone-main { inline-size: min(300px, 80vw); }
}

/* ========================================================== home hero */

.hero {
  position: relative;
  min-block-size: 100dvh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--header-h) + 40px) 64px;
  overflow: clip;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Subtle light rays — conic slivers masked into a fan from above. */
.hero-rays {
  position: absolute;
  inset: -22% -12% 0;
  background: repeating-conic-gradient(
    from -30deg at 50% -18%,
    transparent 0deg 9deg,
    color-mix(in oklch, var(--gold-light) 70%, transparent) 11deg 13deg,
    transparent 15deg 26deg
  );
  opacity: 0.05;
  -webkit-mask-image: radial-gradient(72% 88% at 50% 0%, #000 28%, transparent 74%);
  mask-image: radial-gradient(72% 88% at 50% 0%, #000 28%, transparent 74%);
}

/* Central golden halo behind the monogram. */
.hero-halo {
  position: absolute;
  inset-block-start: 6%;
  inset-inline-start: 50%;
  inline-size: min(760px, 92vw);
  aspect-ratio: 1;
  translate: -50% 0;
  background: var(--halo);
  filter: blur(2px);
}

.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.hero-mark {
  inline-size: 76px;
  block-size: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-1);
  position: relative;
}

.hero-mark::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: var(--halo);
}

.hero-mark .brand-logo { inline-size: 48px; block-size: 48px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--card) 72%, transparent);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero-title { max-inline-size: 16ch; }

.hero-sub { max-inline-size: 58ch; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.trust-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink-soft);
}

.trust-line svg { color: var(--gold-deep); }

.hero-chips { justify-content: center; }

/* ------------------------------------------- hero v1.2: copy + fan */

.hero-v2 { min-block-size: auto; }

.hero-v2 .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  text-align: start;
  padding-block: clamp(16px, 3vw, 40px) 0;
}

.hero-v2 .hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-inline-size: 0;
}

.hero-v2 .hero-mark {
  inline-size: 64px;
  block-size: 64px;
}

.hero-v2 .hero-mark .brand-logo { inline-size: 40px; block-size: 40px; }

.hero-v2 .hero-title { max-inline-size: 13ch; }

.hero-v2 .hero-sub { max-inline-size: 48ch; }

.hero-v2 .hero-ctas { justify-content: flex-start; }

.hero-v2 .hero-halo {
  inset-inline-start: 74%;
  inset-block-start: 12%;
}

.hero-fan {
  padding-block: 10px 26px;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Phones sized against the fan's own grid column, never the viewport:
   46% + 2x34% - 2x7% fills the column exactly, and the ±6.5° swing of
   the rotated sides stays inside the grid gap — the composition cannot
   cross into the copy column at any width. */
.hero-fan .phone-main { inline-size: clamp(206px, 46%, 310px); }

.hero-fan .phone-side { inline-size: clamp(150px, 34%, 244px); }

.hero-fan .phone-left { margin-inline-end: max(-46px, -7%); }

.hero-fan .phone-right { margin-inline-start: max(-46px, -7%); }

@media (max-width: 980px) {
  .hero-v2 .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-v2 .hero-copy { align-items: center; }
  .hero-v2 .hero-ctas { justify-content: center; }
  .hero-v2 .hero-halo { inset-inline-start: 50%; inset-block-start: 6%; }
  .hero-fan .phone-main { inline-size: min(300px, 74vw); }
  .hero-fan .phone-side { inline-size: min(226px, 46vw); }
}

/* ======================================================== home action */

.action-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.action-copy .eyebrow { margin-block-end: 16px; }

.action-copy .title-2 { margin-block-end: 18px; max-inline-size: 22ch; }

.action-para {
  color: var(--ink-soft);
  margin-block-end: 26px;
  max-inline-size: 54ch;
}

.action-copy .checklist { margin-block-end: 30px; }

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

.action-phone {
  display: flex;
  justify-content: center;
}

/* ====================================================== home usecases */

.home-usecases { position: relative; }

.usecases-title {
  text-align: center;
  margin-block-end: clamp(36px, 5vw, 56px);
}

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.usecases-cta {
  text-align: center;
  margin-block-start: 42px;
}

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

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

/* The one future pillar wears a quiet label (truth rule). */

.card-soon { position: relative; }

.soon-pill {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  color: var(--gold-light);
  border: 1px solid var(--border-night);
  background: color-mix(in oklch, var(--gold-light) 10%, transparent);
}

/* ================================================= facts, not promises */

.facts-head {
  max-inline-size: 720px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(32px, 4.5vw, 52px);
}

.facts-head .eyebrow { margin-block-end: 14px; }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.fact {
  display: block;
  padding: 26px 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-m);
  background: var(--card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.fact:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-color: var(--border);
}

.fact .icon-dot { margin-block-end: 14px; }

.fact h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--ink);
  margin-block-end: 8px;
}

.fact p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.facts-cta {
  text-align: center;
  margin-block-start: 38px;
}

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

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

/* ============================ home "cosa puoi fare" — macro-areas (v1.3)
   Four cards, parchment, right under the hero: the breadth of Agape has to
   land before anything else. */

.can-head {
  max-inline-size: 720px;
  margin-block-end: clamp(30px, 4.5vw, 48px);
}

.can-head .eyebrow { margin-block-end: 14px; }

.can-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.can-card {
  padding: 28px 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-m);
  background: var(--card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.can-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-color: var(--border);
}

.can-card .icon-dot { margin-block-end: 16px; }

.can-card .title-3 { margin-block-end: 10px; }

.can-card p { color: var(--ink-soft); font-size: 0.97rem; }

/* The bridge to the Church's social teaching, under Mondo & Attualità. */
.can-bridge {
  margin-block-start: 14px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--border-soft);
  font-size: 0.88rem !important;
  font-style: italic;
}

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

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

/* ================== home "cosa rende Agape diversa" — words, no mockup */

.different-head {
  max-inline-size: 760px;
  margin-block-end: clamp(32px, 4.5vw, 50px);
}

.different-head .eyebrow { margin-block-end: 14px; }

.different-head .title-2 { margin-block-end: 20px; }

.different-para { color: var(--ink-soft); }

.different-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.different-point {
  padding-block-start: 22px;
  border-block-start: 2px solid var(--border);
}

.different-point .icon-dot { margin-block-end: 14px; }

.different-point h3 {
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--ink);
  margin-block-end: 8px;
}

.different-point p { color: var(--ink-soft); font-size: 0.95rem; }

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

/* ===================================== home faith area + demo pair */

/* Two devices side by side for "Agape in azione": the everyday answer and
   the faith one, both visible at every width. Sized against their own grid
   column (v1.2.1 doctrine) so they can never reach the copy. */
.action-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 20px);
  align-items: start;
}

.action-pair .phone { inline-size: 100%; }

.action-pair .phone-lower { margin-block-start: clamp(20px, 3.5vw, 44px); }

@media (max-width: 460px) {
  .action-pair { grid-template-columns: 1fr; max-inline-size: 300px; margin-inline: auto; }
  .action-pair .phone-lower { margin-block-start: 0; }
}

.facts-distinction {
  margin-block-start: 16px;
  color: var(--ink-soft);
  font-size: 0.97rem;
  max-inline-size: 76ch;
}

/* ============================================ home real app screens */

.appreal-head {
  max-inline-size: 720px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(36px, 5vw, 56px);
}

.appreal-head .eyebrow { margin-block-end: 14px; }

.appreal-head .title-2 { margin-block-end: 16px; }

.appreal-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
}

.appreal-grid .phone { inline-size: min(280px, 72vw); }

.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-block-start: 20px;
}

.app-shot {
  margin: 0;
  inline-size: min(300px, 72vw);
  text-align: center;
}

.app-shot picture { display: block; }

.app-shot img {
  inline-size: 100%;
  block-size: auto;
  border-radius: 26px;
  box-shadow: 0 24px 60px -24px rgba(143, 106, 31, 0.45);
}

.app-shot figcaption {
  margin-block-start: 14px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ================================================== home transparency */

.transparency-head {
  max-inline-size: 720px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(36px, 5vw, 56px);
}

.transparency-head .eyebrow { margin-block-end: 14px; }

.transparency-head .title-2 { margin-block-end: 16px; }

.transparency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

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

/* ==================================================== home engagement */

.home-engagement {
  padding-block: clamp(48px, 7vw, 84px);
  background: var(--paper-2);
}

.engagement-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
}

.engagement-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.engagement-sub { color: var(--ink-soft); }

.engagement-inner .gold-rule { inline-size: min(320px, 60%); }

/* ===================================================== home final CTA */

.home-final { position: relative; text-align: center; }

.final-halo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: min(680px, 90vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--gold-light) 13%, transparent), transparent 70%);
  pointer-events: none;
}

.final-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.final-inner .title-2 { max-inline-size: 20ch; }

.final-inner .lead { max-inline-size: 46ch; }

.final-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-block-start: 12px;
}

/* ========================================================= page heroes */

.page-hero {
  position: relative;
  padding-block-start: calc(var(--header-h) + clamp(48px, 8vw, 96px));
  overflow: clip;
}

.page-hero .eyebrow { margin-block-end: 18px; }

.page-hero .display { margin-block-end: 22px; max-inline-size: 18ch; }

.page-hero .lead { max-inline-size: 62ch; }

/* ============================================================== about */

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

.about-copy .display { margin-block: 16px 20px; max-inline-size: 14ch; }

.about-copy .lead { max-inline-size: 54ch; }

.epigraph {
  margin-block-start: 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.epigraph-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  color: var(--gold-text);
}

.epigraph-ref {
  font-size: 0.92rem;
  color: var(--muted);
}

.about-figure {
  min-block-size: clamp(380px, 46vw, 520px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: 48px 32px;
}

.about-figure-halo {
  position: absolute;
  inset-block-start: 12%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 70%;
  aspect-ratio: 1;
  background: var(--halo);
  pointer-events: none;
}

.about-greek {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3.2rem, 2rem + 5vw, 5.4rem);
  background: var(--grad-gold-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline-end: 0.1em;
}

.about-figure-rule { inline-size: 46%; }

.about-figure-logo { inline-size: 40px; block-size: 40px; opacity: 0.85; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-figure { inline-size: min(100%, 380px); margin-inline: auto; }
}

/* Mission band — quiet parchment statement between gold rules. */
.about-mission { padding-block: clamp(30px, 5vw, 60px) ; }

.mission-inner {
  max-inline-size: 780px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.mission-inner .gold-rule { inline-size: min(300px, 60%); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 18px;
}

/* Quote band — night, dust, single serif line. */
.about-quote {
  position: relative;
  padding-block: clamp(64px, 9vw, 110px);
  text-align: center;
}

.quote-inner { position: relative; max-inline-size: 820px; }

.quote-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.8rem);
  line-height: 1.3;
  text-wrap: balance;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-cta { text-align: center; }

.about-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ====================================================== coming-soon set */

.coming-hero {
  position: relative;
  min-block-size: 100dvh;
  display: grid;
  align-items: center;
  padding-block-start: var(--header-h);
  overflow: clip;
}

.coming-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  position: relative;
}

.coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--border-night);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.coming-badge::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  rotate: 45deg;
  background: var(--grad-gold);
}

.coming-hero .display {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block-end: 0.08em;
}

.coming-hero .lead { max-inline-size: 52ch; }

.coming-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-block-start: 10px;
}

/* ============================================================== trust */

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

.trust-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.trust-hero .display { max-inline-size: 18ch; }

.trust-hero .lead { max-inline-size: 56ch; }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.pillar-card { display: flex; flex-direction: column; }

.pillar-micro {
  margin-block-start: auto;
  padding-block-start: 16px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.pillars-close {
  text-align: center;
  margin-block-start: 38px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink-soft);
}

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

/* Method — three numbered steps. */
.trust-method { padding-block-start: 0; }

/* ------------------------- registers of an answer (v1.3) */

.trust-distinction { padding-block-start: 0; }

.distinction-inner { max-inline-size: 780px; }

.distinction-inner .title-2 { margin-block-end: 14px; }

.distinction-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.distinction-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 1rem;
}

.distinction-list svg { flex: none; color: var(--gold-deep); }

.distinction-close {
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--border-soft);
  color: var(--ink-soft);
  max-inline-size: 68ch;
}

.method-head {
  max-inline-size: 680px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(36px, 5vw, 54px);
}

.method-head .eyebrow { margin-block-end: 14px; }
.method-head .title-2 { margin-block-end: 14px; }

.method-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}

.method-step {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--r-m);
  border: 1px solid var(--border-soft);
  background: var(--card);
  box-shadow: var(--shadow-1);
}

.method-step .step-n {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--grad-gold-btn);
  color: var(--btn-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-block-end: 18px;
}

.method-step p { color: var(--ink-soft); font-size: 0.98rem; }
.method-step .title-3 { margin-block-end: 10px; }

@media (max-width: 860px) {
  .method-steps { grid-template-columns: 1fr; }
}

/* Security — six tiles on night. */
.security-title {
  text-align: center;
  margin-block-end: clamp(36px, 5vw, 54px);
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.security-tile .icon-dot { margin-block-end: 14px; }

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

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

/* Respect & responsibility — copy + commitments box. */
.respect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}

.respect-copy .title-2 { margin-block-end: 18px; max-inline-size: 22ch; }

.respect-para {
  color: var(--ink-soft);
  margin-block-end: 26px;
  max-inline-size: 54ch;
}

.respect-box { padding: 32px; }

.respect-box .title-3 {
  margin-block-end: 20px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--border-soft);
}

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

/* Trust band — parchment-2 statement. */
.trust-band {
  padding-block: clamp(48px, 7vw, 84px);
  background: var(--paper-2);
}

.band-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.band-inner .gold-rule { inline-size: min(320px, 60%); }

.band-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.3;
  max-inline-size: 30ch;
  text-wrap: balance;
  color: var(--ink);
}

.trust-cta { position: relative; text-align: center; }

/* ============================================================== legal */

.legal-page {
  padding-block-start: calc(var(--header-h) + clamp(40px, 7vw, 80px));
}

.legal-banner {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-s);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-block-end: 26px;
}

.legal-container { max-inline-size: 780px; }

/* The controller's own document header: subtitle and issuer line under the
   title, as delivered. */
.legal-subtitle {
  color: var(--ink-soft);
  font-weight: 600;
  margin-block: 10px 0;
}

.legal-issuer {
  color: var(--muted);
  font-size: 0.92rem;
  margin-block: 6px 0;
}

.legal-updated {
  color: var(--muted);
  font-size: 0.92rem;
  margin-block: 10px 34px;
}

.legal-updated-end { margin-block: 8px 0; }

.legal-toc {
  padding: 26px 30px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-m);
  background: var(--card);
  margin-block-end: 42px;
}

.legal-toc .title-3 { margin-block-end: 14px; }

.legal-toc ol {
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.legal-toc a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }

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

.legal-section { margin-block-end: 34px; }

.legal-section .title-3 { margin-block-end: 6px; }

/* v1.4: the real documents. Long prose needs a comfortable measure and a
   clear hierarchy — sub-heading, paragraph, list, note, table. */

.legal-intro { margin-block-end: 34px; }

.legal-intro-more { margin-block: -18px 34px; }

/* The Cookie Policy, rendered after the Privacy Notice on the same page: a
   second document, so it gets a clear break and its own title. */
.legal-annex {
  margin-block-start: 64px;
  padding-block-start: 48px;
  border-block-start: 1px solid var(--border);
}

.legal-toc-annex {
  margin-block: 18px 8px;
  font-weight: 600;
}

.legal-toc-annex a { color: var(--ink); }

.legal-section p { margin-block: 12px 0; }

.legal-h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  margin-block: 24px 4px;
}

.legal-list {
  margin-block: 12px 0;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-note {
  padding: 16px 20px;
  border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--r-s);
  background: var(--card);
  color: var(--ink-soft);
  margin-block: 18px 0;
}

/* The wrapper scrolls, never the page: a four-column provider table has to
   survive 320px without pushing the document sideways. */
.legal-table-wrap {
  margin-block: 18px 0;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-m);
  background: var(--card);
}

.legal-table-wrap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.legal-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-inline-size: 460px;
}

/* Six columns (the Cookie Policy's storage table) need room to stay readable;
   the wrapper scrolls on narrow screens. */
.legal-table--wide { min-inline-size: 820px; }

.legal-table th,
.legal-table td {
  padding: 12px 16px;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--hairline);
}

.legal-table thead th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  border-block-end: 1px solid var(--border);
}

.legal-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.legal-table tbody td { color: var(--ink-soft); }

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-block-end: 0; }

.legal-back { margin-block-start: 48px; }

/* ============================================ features & faith (v1.2) */

.features-hero,
.faith-hero,
.faq-hero {
  padding-block-start: calc(var(--header-h) + clamp(40px, 7vw, 84px));
}

.feat-hero-inner,
.faith-hero-inner,
.faq-hero-inner {
  max-inline-size: 780px;
  margin-inline: auto;
  text-align: center;
}

.feat-hero-inner .eyebrow,
.faith-hero-inner .eyebrow,
.faq-hero-inner .eyebrow { margin-block-end: 14px; }

.feat-hero-inner .display,
.faith-hero-inner .display,
.faq-hero-inner .display { margin-block-end: 18px; }

.faith-latin {
  margin-block-start: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gold-text);
}

.features-rows .container,
.faith-rows .container {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 104px);
}

.feature-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

/* Alternate sides: the phone breathes left, then right. */
.feature-row:nth-child(even) .feature-copy { order: 2; }
.feature-row:nth-child(even) .feature-shot { order: 1; }

.feature-copy .icon-dot { margin-block-end: 18px; }

.feature-copy .title-2 { margin-block-end: 14px; max-inline-size: 20ch; }

.feature-copy > p {
  color: var(--ink-soft);
  max-inline-size: 52ch;
  margin-block-end: 22px;
}

.feature-shot {
  display: flex;
  justify-content: center;
}

.feature-shot .phone { inline-size: min(300px, 74vw); }

@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row:nth-child(even) .feature-copy { order: 1; }
  .feature-row:nth-child(even) .feature-shot { order: 2; }
}

/* ------------------------------------------------ sober coming list */

.coming-block {
  max-inline-size: 720px;
  margin-inline: auto;
  text-align: center;
}

.coming-block .title-2 { margin-block: 16px 12px; }

.coming-block .lead { margin-block-end: 30px; }

.coming-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.coming-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border-night);
  border-radius: var(--r-pill);
  color: var(--night-muted);
  font-size: 0.93rem;
}

.coming-list svg { color: var(--gold-light); }

.faith-trio-grid { margin-block-end: 44px; }

.faith-coming {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.features-cta,
.faith-cta { text-align: center; }

/* ================================================== faq accordion */

.faq-body { padding-block-start: 0; }

.faq-list {
  max-inline-size: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-m);
  background: var(--card);
  overflow: clip;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item[open] {
  border-color: var(--border);
  box-shadow: var(--shadow-1);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--ink);
}

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

.faq-item summary h2 {
  margin: 0;
  font: inherit;
  color: inherit;
}

.faq-item .faq-chevron {
  flex: none;
  color: var(--gold-deep);
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-item > p {
  padding: 0 24px 22px;
  color: var(--ink-soft);
  max-inline-size: 68ch;
}

.faq-cta { padding-block-start: 12px; text-align: center; }

/* ==================================== about v1.2: pastilles + trust */

.values-pastilles {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-inline-size: 1020px;
  margin-inline: auto;
}

.pastille {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 26px 18px 18px;
  inline-size: fit-content;
  max-inline-size: 460px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  background: var(--card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pastille:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
  border-color: var(--border);
}

.pastille .icon-dot { flex: none; }

.pastille .title-3 { margin-block-end: 2px; }

.pastille-copy p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Light variant of the trust band on parchment pages. */
/* ------------------- la persona al centro + dottrina sociale (v1.3) */

.person-inner,
.social-inner { max-inline-size: 820px; }

.person-inner .title-2,
.social-inner .title-2 { margin-block-end: 16px; }

.person-badges {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.person-badge {
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.94rem;
  color: var(--ink);
}

.social-themes {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}

.social-themes li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.social-themes svg { flex: none; color: var(--gold-deep); }

@media (max-width: 700px) {
  .social-themes { grid-template-columns: 1fr; }
}

.about-trustband { padding-block: 8px clamp(48px, 6vw, 72px); }

.about-trust {
  margin-block-start: 0;
  border-color: var(--border);
  background: color-mix(in oklch, var(--gold) 6%, var(--card));
}

.about-trust:hover {
  background: color-mix(in oklch, var(--gold) 11%, var(--card));
  border-color: color-mix(in oklch, var(--gold) 38%, transparent);
}

.about-trust .footer-trust-icon {
  color: var(--gold-text);
  border-color: var(--border);
}

.about-trust .footer-trust-copy strong { color: var(--ink); }

.about-trust .footer-trust-copy > span { color: var(--ink-soft); }

.about-trust .footer-trust-arrow { color: var(--gold-text); }

/* ================================================ community preview */

.community-band {
  margin-block: 34px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.community-band-line {
  max-inline-size: 56ch;
  color: var(--night-muted);
}

.community-cards { text-align: start; }

.community-today { text-align: center; }

/* ============================================================= motion
   Native page transitions, the "Alba" first-load veil, and the initial
   states of every scripted animation. Every hidden state is scoped to
   html.js (set by an inline head script, removed if GSAP is missing)
   and to prefers-reduced-motion: no-preference — without JavaScript or
   with reduced motion the page is complete and static. */

/* ------------------------------------------- native View Transitions */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 0.35s ease both;
  }
  ::view-transition-new(root) {
    animation: vt-in 0.35s ease both;
  }
}

@keyframes vt-out {
  to { opacity: 0; filter: brightness(1.07); }
}

@keyframes vt-in {
  from { opacity: 0; filter: brightness(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ----------------------------------------------------- "Alba" veil */

/* Warm parchment veil the very first paint is born from: it brightens
   away while the halo blooms behind the monogram. Present in the DOM on
   every page, visible only during the once-per-session intro. */
.alba-veil {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(90% 70% at 50% 30%, color-mix(in oklch, var(--gold-light) 26%, transparent), transparent 70%),
    var(--paper-2);
}

html.alba .alba-veil { display: block; }

/* -------------------------------------- scripted-animation initials */

@media (prefers-reduced-motion: no-preference) {
  /* Hidden starts apply only until the script hands the element back
     to CSS (is-revealed): the resting layout is always the natural one,
     even if a tween is cut short. */
  html.js [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(26px);
  }

  html.js [data-split] { visibility: hidden; }

  html.js [data-rule]:not(.is-revealed) { transform: scaleX(0); }

  /* Hero intro initials, only while the Alba intro is pending. The
     subtitle is deliberately NOT hidden: it is the largest text block
     (LCP) and the lifting veil already stages its entrance. */
  html.alba [data-hero-mark],
  html.alba [data-hero-badge],
  html.alba [data-hero-prompt],
  html.alba [data-hero-ctas],
  html.alba [data-hero-trust],
  html.alba [data-hero-chips],
  html.alba [data-hero-halo],
  html.alba [data-hero-rays] {
    opacity: 0;
  }

  /* Split lines are wrapped in clipping masks by the script. */
  .split-mask { overflow: clip; }

  /* Golden shimmer sweeping display keywords every ~8s: a moving
     highlight layered over the gold gradient, both clipped to the text. */
  html.js .gold-word {
    background-image:
      linear-gradient(105deg, transparent 40%, rgba(255, 249, 233, 0.8) 50%, transparent 60%),
      var(--grad-gold-ink);
    background-size: 240% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    animation: gold-shimmer 8s ease-in-out infinite;
  }
  html.js .on-night .gold-word,
  html.js .gold-word.on-night {
    background-image:
      linear-gradient(105deg, transparent 40%, rgba(255, 249, 233, 0.8) 50%, transparent 60%),
      var(--grad-gold);
  }
}

@keyframes gold-shimmer {
  0%, 82% { background-position: 130% 0, 0 0; }
  92%, 100% { background-position: -70% 0, 0 0; }
}

/* Smooth-scroll page: Lenis toggles these classes. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }