/* =========================================================================
   The Translation Workshop — presentation site
   Palette and typefaces carried over from the application: the two halves
   must read as one service, not as two separate products.
   ========================================================================= */

:root {
  --ink-950: #171d27;
  --ink-900: #1e2632;
  --ink-800: #2b3546;
  --paper: #ece3ce;
  --paper-soft: #f6f1e3;
  --paper-line: #cabf9e;
  --brass: #b8863b;
  --brass-dark: #8f6526;
  --wax: #7a3030;
  --success: #4b6b4e;
  --ink-text: #241c12;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --radius: 3px;
  --wrap: 1180px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-950);
  background-image:
    radial-gradient(circle at 15% 0%, rgba(184, 134, 59, 0.08), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(184, 134, 59, 0.06), transparent 40%);
  color: var(--paper-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-dark); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.wrap--narrow { max-width: 760px; }

/* --- Accessibility: skip to content -------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brass);
  color: #221704;
  padding: 0.7rem 1.2rem;
  z-index: 2000;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(23, 29, 39, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(202, 191, 158, 0.2);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 1.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--paper-soft);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--paper-soft); }
.brand__mark { color: var(--brass); font-size: 1.15rem; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: #c9c0aa;
  font-size: 0.92rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--paper-soft);
  border-bottom-color: var(--brass);
}

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(202, 191, 158, 0.4);
  border-radius: var(--radius);
  color: var(--paper-soft);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

@media (max-width: 960px) {
  .nav {
    position: fixed;
    inset: 61px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-900);
    border-bottom: 1px solid rgba(202, 191, 158, 0.2);
    padding: 0.5rem 1.5rem 1.2rem;
    max-height: calc(100vh - 61px);
    overflow-y: auto;
  }
  .nav[hidden] { display: none !important; }
  .nav a {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(202, 191, 158, 0.12);
  }
  .nav-toggle { display: block; }
  .header-actions .btn--ghost-light { display: none; }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.72rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--brass); color: #221704; }
.btn--primary:hover { background: var(--brass-dark); color: var(--paper-soft); }

/* On the dark header, --ink-text would be unreadable: this variant exists
   for the header and any ink-background section. */
.btn--ghost-light {
  background: transparent;
  border-color: rgba(202, 191, 158, 0.45);
  color: var(--paper-soft);
}
.btn--ghost-light:hover {
  background: rgba(202, 191, 158, 0.12);
  border-color: var(--brass);
  color: var(--brass);
}

/* For the light paper panels. */
.btn--ghost {
  background: transparent;
  border-color: var(--paper-line);
  color: var(--ink-text);
}
.btn--ghost:hover { background: rgba(0,0,0,0.05); }

.btn--small { padding: 0.42rem 0.85rem; font-size: 0.82rem; }
.btn--block { display: block; width: 100%; }

/* =========================================================================
   Section typography
   ========================================================================= */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 0.7rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 0.8rem;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.2rem; }

.lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #cfc7b3;
  max-width: 62ch;
}

.section { padding: 4.5rem 0; }
.section--tight { padding: 3rem 0; }
.section--paper {
  background: var(--paper);
  color: var(--ink-text);
}
.section--paper .lead { color: #4a4034; }
.section--paper .eyebrow { color: var(--brass-dark); }
.section--paper h2, .section--paper h3 { color: var(--wax); }

.section__head { max-width: 62ch; margin-bottom: 2.5rem; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.rule {
  border: none;
  border-top: 1px solid var(--paper-line);
  opacity: 0.35;
  margin: 3rem 0;
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero { padding: 5rem 0 4rem; position: relative; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero h1 { margin-bottom: 1.2rem; }
.hero h1 em {
  font-style: italic;
  color: var(--brass);
}
.hero__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.hero__note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #8b8266;
  margin-top: 1.2rem;
}

/* A panel imitating a page of the review desk: showing the product beats
   describing it. */
.specimen {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 24px 55px rgba(0,0,0,0.45);
  position: relative;
  transform: rotate(-0.6deg);
}
.specimen::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(122, 48, 48, 0.15);
  pointer-events: none;
}
.specimen__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brass-dark);
}
.specimen__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 520px) { .specimen__cols { grid-template-columns: 1fr; } }
.specimen__col-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  margin-bottom: 0.3rem;
}
.specimen__text {
  font-family: var(--font-display);
  font-size: 0.88rem;
  line-height: 1.6;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  padding: 0.7rem 0.8rem;
}
.specimen__text--target { border-left: 3px solid var(--success); }
.specimen__foot {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}
.pill {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(75, 107, 78, 0.18);
  color: var(--success);
}
.pill--brass { background: rgba(184, 134, 59, 0.2); color: var(--brass-dark); }

/* --- Editorial review desk renders ---------------------------------------
   Stylised screenshots of the review desk: source and translation side by
   side, inline editing, and the optional AI second pass. Built in CSS so the
   pages stay light and the mockups never go stale like an image would. */
.desk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}
@media (max-width: 1000px) { .desk-grid { grid-template-columns: 1fr; } }

.desk {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper-soft);
  border: 1px solid rgba(202, 191, 158, 0.22);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
.desk__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--brass);
  border-bottom: 1px solid rgba(202, 191, 158, 0.18);
  padding-bottom: 0.5rem;
}
.desk__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@media (max-width: 520px) { .desk__cols { grid-template-columns: 1fr; } }
.desk__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass);
  margin: 0 0 0.25rem;
}
.desk__text {
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.55;
  padding: 0.6rem 0.7rem;
  margin: 0;
  border-left: 3px solid var(--paper-line);
}
.desk__text--source { opacity: 0.85; }
.desk__text--target { border-left-color: var(--success); }
.desk__text del { color: var(--wax); opacity: 0.7; }
.desk__text ins {
  color: var(--success);
  text-decoration: none;
  background: rgba(75, 107, 78, 0.14);
  padding: 0 0.1em;
}
.desk__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.desk__suggest {
  background: var(--paper-soft);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: grid;
  gap: 0.4rem;
}
.desk__suggest .desk__label { color: var(--brass-dark); }
.desk__suggest p { margin: 0; font-size: 0.78rem; line-height: 1.5; }
.desk__why {
  font-size: 0.74rem;
  line-height: 1.45;
  color: #5a4a2e;
  border-left: 2px solid var(--brass);
  padding-left: 0.55rem;
  font-style: italic;
}
.desk__choice {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
}
.desk__choice--accept { background: var(--success); border-color: var(--success); color: #fff; }
.desk__choice--reject { opacity: 0.55; }
.desk figcaption { font-size: 0.76rem; line-height: 1.5; color: #b9b09a; }
.desk figcaption strong {
  display: block;
  font-size: 0.8rem;
  color: var(--paper-soft);
  margin-bottom: 0.15rem;
}

/* The editorial review, called out inside every price card. */
.price-card__review {
  margin: 0.9rem 0 0.2rem;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--brass);
  background: rgba(184, 134, 59, 0.14);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-text);
}
.price-card__review strong { color: var(--wax); }

/* =========================================================================
   Card grids
   ========================================================================= */
.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(122, 48, 48, 0.1);
  pointer-events: none;
}
.card h3,
.card .card__title { color: var(--wax); margin-bottom: 0.5rem; font-size: 1.2rem; }
.card p { margin: 0; font-size: 0.93rem; }
.card__mark {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brass-dark);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.7rem;
}

/* On a paper background the cards need a different treatment to stand out */
.section--paper .card {
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
}
.section--paper .card::before { display: none; }

/* =========================================================================
   Numbered steps
   ========================================================================= */
.steps { counter-reset: step; display: grid; gap: 1.6rem; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
}
.step__num {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--brass);
  line-height: 1;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(184, 134, 59, 0.4);
  border-radius: 50%;
  flex-shrink: 0;
}
.step__num::before { content: counter(step); }
.step h3 { margin-bottom: 0.3rem; }
.step p { margin: 0; color: #cfc7b3; font-size: 0.95rem; }
.section--paper .step p { color: #4a4034; }

/* =========================================================================
   Language list
   ========================================================================= */
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem 1.2rem;
  font-size: 0.92rem;
}
.lang-grid span {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(202, 191, 158, 0.25);
}

/* =========================================================================
   Pricing
   ========================================================================= */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }

/* Two-card layout: used now that pricing is Standard/Premium instead of
   three revision tiers. Centred with a sensible max width so two cards
   don't stretch awkwardly across a wide screen. */
.price-grid--two {
  grid-template-columns: repeat(2, minmax(280px, 420px));
  justify-content: center;
}
@media (max-width: 720px) { .price-grid--two { grid-template-columns: minmax(280px, 420px); } }

/* Three-card layout: Standard / Premium / Best Seller. The base .price-grid
   already provides three equal columns and collapses to a single column on
   narrow screens; this only centres the trio and caps its width. */
.price-grid--three {
  max-width: 1100px;
  margin: 0 auto;
}

.price-card {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card--featured {
  border: 2px solid var(--brass);
  box-shadow: 0 20px 45px rgba(0,0,0,0.4);
}
.price-card__flag {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass);
  color: #221704;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card h3 { color: var(--wax); }
.price-card__price {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--ink-text);
  margin: 0.4rem 0 0.1rem;
}
.price-card__price small {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.7;
}
.price-card__desc {
  font-size: 0.9rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--paper-line);
}
.price-card ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.9rem;
  flex: 1;
}
.price-card li {
  padding: 0.38rem 0 0.38rem 1.4rem;
  position: relative;
}
.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}
.price-card li.is-off { opacity: 0.45; }
.price-card li.is-off::before { content: "—"; color: var(--ink-text); }

.price-note {
  font-size: 0.88rem;
  color: #8b8266;
  font-style: italic;
}

/* Comparison / volume table */
.table-wrap { overflow-x: auto; }
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  overflow: hidden;
}
table.tbl th, table.tbl td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--paper-line);
}
table.tbl th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brass-dark);
  background: var(--paper-soft);
}
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td.num { font-family: var(--font-mono); white-space: nowrap; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.quote {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  position: relative;
}
.quote blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.6;
}
.quote figcaption {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--brass-dark);
}

/* =========================================================================
   Legal highlight box (privacy policy "in short" summary)
   ========================================================================= */
.legal-highlight {
  background: var(--paper-soft);
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0 2rem;
}
.legal-highlight h3,
.legal .legal-highlight .legal-highlight__title {
  margin-top: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brass-dark);
}
.legal-highlight ul { margin-bottom: 0; }
.legal-highlight li { font-size: 0.92rem; margin-bottom: 0.4rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { max-width: 780px; }
.faq details {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
  padding: 0 1.3rem;
}
.faq summary {
  cursor: pointer;
  padding: 1.05rem 0;
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 600;
  color: var(--wax);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--brass-dark);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div {
  padding: 0 0 1.2rem;
  font-size: 0.94rem;
  border-top: 1px solid var(--paper-line);
  padding-top: 1rem;
}
.faq details > div p:first-child { margin-top: 0; }
.faq details > div p:last-child { margin-bottom: 0; }

/* =========================================================================
   Closing call to action
   ========================================================================= */
.cta {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 3rem 2.5rem;
  text-align: center;
  position: relative;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(122, 48, 48, 0.18);
  pointer-events: none;
}
.cta h2 { color: var(--wax); }
.cta p { max-width: 54ch; margin: 0 auto 1.8rem; color: #4a4034; }
.cta__actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* =========================================================================
   Contact form
   ========================================================================= */
.form-card {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 2rem;
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.93rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  color: var(--ink-text);
}
.field textarea { resize: vertical; min-height: 130px; }
.field__hint { font-size: 0.8rem; opacity: 0.72; margin: 0.35rem 0 0; font-style: italic; }
.field--check label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  text-transform: none;
  font-weight: 400;
  font-size: 0.87rem;
  letter-spacing: 0;
}
.field--check input { width: auto; margin-top: 0.22rem; flex-shrink: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.contact-aside dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brass);
  margin-top: 1.4rem;
}
.contact-aside dd { margin: 0.3rem 0 0; color: #cfc7b3; }

/* =========================================================================
   Legal pages
   ========================================================================= */
.legal {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  padding: 2.5rem 2.8rem;
}
.legal h1, .legal h2, .legal h3 { color: var(--wax); }
.legal h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.legal p, .legal li { font-size: 0.94rem; }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { margin-bottom: 0.4rem; }
.legal__updated {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--brass-dark);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.legal table.tbl { margin: 1.2rem 0; font-size: 0.87rem; }
@media (max-width: 620px) { .legal { padding: 1.6rem 1.3rem; } }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  border-top: 1px solid rgba(202, 191, 158, 0.2);
  padding: 3rem 0 2rem;
  margin-top: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col h4,
.footer-col .footer-col__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brass);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: #a89f8a; font-size: 0.89rem; }
.footer-col a:hover { color: var(--paper-soft); }
.footer-col p { font-size: 0.89rem; color: #a89f8a; margin: 0.4rem 0; }

.footer-langs {
  border-top: 1px solid rgba(202, 191, 158, 0.12);
  padding-top: 1.2rem;
  margin-bottom: 1.5rem;
}
.footer-langs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
}
.footer-langs a {
  color: #a89f8a;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
}
.footer-langs a:hover,
.footer-langs a:focus-visible {
  color: var(--paper-soft);
  text-decoration: underline;
}
.footer-langs a[aria-current="true"] { color: var(--brass); }

.footer-bottom {
  border-top: 1px solid rgba(202, 191, 158, 0.15);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #6f6857;
}
.footer-bottom a { color: #8b8266; }
.footer-bottom button {
  background: none;
  border: none;
  color: #8b8266;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.footer-bottom button:hover { color: var(--brass); }

/* =========================================================================
   Cookie banner (GDPR / ePrivacy)

   Requirements met: no non-essential cookie before consent; declining is as
   immediate as accepting (same level, same visual weight); granular choice;
   consent withdrawable at any time.
   ========================================================================= */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1500;
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.7rem;
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner h2 {
  font-size: 1.1rem;
  color: var(--wax);
  margin-bottom: 0.5rem;
}
.cookie-banner p { font-size: 0.89rem; margin: 0 0 1.1rem; }
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* Accept and Decline carry identical weight. That is a requirement, not an
   aesthetic preference: a less visible "decline" invalidates the consent. */
.cookie-banner__actions .btn { flex: 1 1 160px; }

.cookie-prefs { margin-top: 1.2rem; }
.cookie-prefs[hidden] { display: none !important; }
.cookie-group {
  border-top: 1px solid var(--paper-line);
  padding: 0.9rem 0;
}
.cookie-group__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.cookie-group__head strong { font-size: 0.93rem; }
.cookie-group p { font-size: 0.83rem; margin: 0.35rem 0 0; opacity: 0.8; }
.cookie-group input { width: auto; }
.cookie-group__locked {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--success);
}

.cookie-link {
  background: none;
  border: none;
  color: var(--brass-dark);
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* =========================================================================
   Quick estimate output on the pricing page
   ========================================================================= */
.estimate {
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-top: 0.5rem;
}
.estimate__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.92rem;
}
.estimate__row .num { font-family: var(--font-mono); }
.estimate__row--total {
  border-top: 1px solid var(--paper-line);
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  font-weight: 600;
  font-size: 1.05rem;
}
.estimate__row--total .num { color: var(--wax); }

/* =========================================================================
   Language switcher
   A <details> menu of real links, dressed in the site's paper palette: the
   closed control reads as the old small tab, the open list is a list of
   <a href> links so crawlers can follow every language.
   ========================================================================= */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.2rem;
}
.lang-switch__select {
  display: inline-flex;
  align-items: center;
  list-style: none;
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.4rem 1.75rem 0.4rem 0.7rem;
  border: 1px solid rgba(202, 191, 158, 0.5);
  border-radius: var(--radius);
  cursor: pointer;
  max-width: 9.5rem;
}
.lang-switch__select::-webkit-details-marker { display: none; }
.lang-switch__select::marker { content: ""; }
.lang-switch__select:hover { border-color: var(--brass); }
.lang-switch__select:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}
.lang-switch[open] > .lang-switch__select { border-color: var(--brass); }
.lang-switch__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-switch__chevron {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-55%);
  pointer-events: none;
  color: var(--ink-text);
  font-size: 0.95rem;
  line-height: 1;
}
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: 0.3rem 0;
  min-width: 9.5rem;
  list-style: none;
  background: var(--paper);
  border: 1px solid rgba(202, 191, 158, 0.5);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.lang-switch__menu a {
  display: block;
  padding: 0.35rem 0.7rem;
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible { background: rgba(202, 191, 158, 0.25); }
.lang-switch__menu a[aria-current="true"] { color: var(--wax); }

@media (max-width: 960px) {
  .lang-switch { margin-right: 0; }
  .lang-switch__select { max-width: 7.5rem; }
}

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