/* nhatrangdanang.com — one stylesheet, no framework, no webfonts.
   Warm paper background, editorial serif headings, one column of text. */

:root {
  --paper: #fbfaf7;
  --paper-sunk: #f4f1ea;
  --ink: #191813;
  --ink-soft: #55524a;
  --ink-mute: #6f6b61;
  --rule: #e2ddd1;
  --rule-strong: #cec8b8;
  --accent: #2c5c4f;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  --wrap: 1080px;
  --measure: 40rem;
  --gap: 1.5rem;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- links ---------- */

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.head-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

.head-nav {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
}

.head-nav a {
  font-size: 0.9375rem;      /* 15px */
  text-decoration: none;
  color: var(--ink-soft);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}

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

@media (min-width: 46rem) {
  .head-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1.25rem;
  }
  .head-nav { gap: 2rem; }
}

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 9vw, 4rem);
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.12;
}

h3 {
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: var(--measure);
}

.measure { max-width: var(--measure); }

.eyebrow {
  font-size: 0.875rem;       /* 14px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.25rem;
}

.note {
  font-size: 0.9375rem;
  color: var(--ink-mute);
  max-width: var(--measure);
}

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

section { padding: 3.25rem 0; border-top: 1px solid var(--rule); }
section:first-child { border-top: 0; }

@media (min-width: 46rem) {
  section { padding: 4.5rem 0; }
}

.section-head { max-width: var(--measure); margin-bottom: 2rem; }
.section-head p { color: var(--ink-soft); margin-top: 0.75rem; }

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

.hero { padding: 3rem 0 3.5rem; }

@media (min-width: 46rem) {
  .hero { padding: 5.5rem 0 5rem; }
}

.hero h1 { max-width: 16ch; }

.hero .lede { margin-top: 1.5rem; }

.hero .hero-sub {
  margin-top: 0.9rem;
  color: var(--ink-mute);
  max-width: var(--measure);
  font-size: 1rem;
}

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

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }

.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--paper-sunk); }

@media (max-width: 24rem) {
  .actions .btn { flex: 1 1 100%; }
}

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.textlink:hover { border-bottom-color: var(--ink); }

/* ---------- decision cards ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.card {
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  min-height: 44px;
}

a.card:hover { background: var(--paper-sunk); }

.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--ink-soft); margin: 0 0 0.7rem; font-size: 1rem; }

.card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--ink-mute);
}

.card-go { color: var(--accent); white-space: nowrap; }

@media (min-width: 40rem) {
  .cards { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  a.card:hover { background: transparent; }
  .card h3 { transition: color 0.15s ease; }
  a.card:hover h3 { color: var(--accent); }
}

@media (min-width: 62rem) {
  .cards.cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- plain category index ---------- */

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.index-list li {
  border-bottom: 1px solid var(--rule);
}

.index-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.95rem 0;
  min-height: 44px;
  text-decoration: none;
}

a.index-row:hover .index-name { color: var(--accent); }

.index-name {
  font-family: var(--serif);
  font-size: 1.125rem;
  flex: 1 1 14rem;
}

.index-line {
  flex: 2 1 20rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.index-cities {
  font-size: 0.875rem;
  color: var(--ink-mute);
  white-space: nowrap;
}

@media (min-width: 52rem) {
  .index-list.two-col {
    column-count: 2;
    column-gap: 3rem;
    border-top: 0;
  }
  .index-list.two-col li { break-inside: avoid; }
}

/* ---------- statement block ---------- */

.statement {
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.statement h2 { max-width: 20ch; }
.statement .body { max-width: var(--measure); margin-top: 1.5rem; color: var(--ink-soft); }

/* ---------- city split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 46rem) {
  .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.split h3 { font-size: clamp(1.5rem, 4vw, 1.875rem); margin-bottom: 1rem; }

.tick {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.tick li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.55rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.tick li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 1px;
  background: var(--rule-strong);
}

.label {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
}

/* ---------- tables ---------- */

.table-hint {
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 1.5rem 0 -0.75rem;
}

@media (min-width: 46rem) {
  .table-hint { display: none; }
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
}

caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--ink-mute);
  padding-bottom: 0.75rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom-color: var(--rule-strong);
}

tbody th { font-weight: 500; }

/* ---------- comparison (mobile-friendly, no table) ---------- */

.compare-list { margin: 2rem 0 0; }

.compare-row {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.compare-row:first-child { border-top: 1px solid var(--rule); }

.compare-row h3 { font-size: 1.25rem; margin-bottom: 1rem; }

.compare-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 46rem) {
  .compare-cols { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.compare-col p { font-size: 1rem; color: var(--ink-soft); margin: 0; }
.compare-col .label { margin-bottom: 0.35rem; }

.verdict {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink);
}

.verdict strong { font-weight: 600; }
.verdict.depends { color: var(--ink-mute); }

/* ---------- picks ---------- */

.pick {
  padding: 2rem 0;
  border-top: 1px solid var(--rule-strong);
}

.pick-label {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.pick h3 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; }

.facts {
  margin: 1.25rem 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
}

@media (min-width: 40rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fact { font-size: 0.9375rem; }
.fact dt { color: var(--ink-mute); }
.fact dd { margin: 0; }

.pick-block { margin: 1.1rem 0; max-width: var(--measure); }
.pick-block .label { margin-bottom: 0.3rem; }
.pick-block p { margin: 0; color: var(--ink-soft); }

.downside { border-left: 2px solid var(--rule-strong); padding-left: 1rem; }
.downside p { color: var(--ink); }

.pick-detail {
  max-width: var(--measure);
  margin: 1.25rem 0;
}

.pick-detail p {
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.pick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
}

.pick-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.pick-links a:hover { border-bottom-color: var(--ink); }

/* ---------- prose ---------- */

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: 0.55rem; color: var(--ink-soft); }

.breadcrumb {
  font-size: 0.875rem;
  color: var(--ink-mute);
  padding: 1.25rem 0 0;
}
.breadcrumb a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.breadcrumb span { margin: 0 0.4rem; }

.updated {
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 1rem;
}

.faq-item { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; }
.faq-item h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.faq-item p { color: var(--ink-soft); margin: 0; }

.sources { font-size: 0.9375rem; color: var(--ink-mute); }
.sources ul { padding-left: 1.1rem; }
.sources li { margin-bottom: 0.4rem; }

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

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0 3.5rem;
  margin-top: 1rem;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.foot-nav a {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foot-nav a:hover { color: var(--ink); }

.foot-note {
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0.75rem 0 0;
}

/* ---------- 404 ---------- */

.centered { padding: 5rem 0 6rem; }
.centered h1 { max-width: 14ch; }

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

/* ==========================================================================
   /da-nang/property-for-foreign-buyers
   The one page with a form on it. Everything below is scoped to
   .page-property so nothing here can leak into the editorial pages.

   Measurements follow the page brief: reading column 680-760px, comparison
   and data 1000-1100px, page 1180px. Nothing smaller than 14px, nothing
   tappable smaller than 44px.
   ========================================================================== */

.page-property {
  --wrap: 1180px;
  --measure: 44rem;          /* ~704px reading column */
  font-size: 1.0625rem;      /* 17px mobile */
}

@media (min-width: 46rem) {
  .page-property { font-size: 1.125rem; }   /* 18px desktop */
  .page-property .wrap { padding: 0 2rem; }
}

@media (min-width: 75rem) {
  .page-property .wrap { padding: 0 3rem; }
}

.page-property .wrap.wide { max-width: 1100px; }

/* A breadcrumb is a link people miss-tap on a phone. Give it a real target. */
.page-property .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; }
.page-property .breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
}

.page-property h1 {
  font-size: clamp(2.875rem, 7.4vw, 4.75rem);   /* 46px -> 76px */
  max-width: 18ch;
}

.page-property .lede { max-width: 42rem; }

/* h2 has no bottom margin site-wide, and most sections here follow it with a
   class that supplies its own. The plain-paragraph sections need the gap too. */
.page-property .measure > h2 + p,
.page-property .measure > h2 + ul { margin-top: 1.25rem; }

.page-property .prop-hero .actions { margin-top: 2rem; }

/* A display: flex or grid rule outranks the UA sheet's [hidden] and quietly
   shows a panel that is supposed to be closed. Nothing on this page hides by
   any other means, so this settles it once. */
.page-property [hidden] { display: none !important; }

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

/* ---------- budget lens ---------- */

.lens { background: var(--paper-sunk); }
.lens-sub { color: var(--ink-soft); margin-top: 0.9rem; }

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
}

.seg-btn {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.seg-btn:hover { border-color: var(--ink); }

.seg-btn.is-on,
.seg-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.lens-out {
  margin: 1.5rem 0 0;
  max-width: 42rem;
  font-size: 1.0625rem;
  color: var(--ink);
  min-height: 1.5rem;
}
.lens-out:empty { margin: 0; min-height: 0; }

.lens-note { margin-top: 1.25rem; }

/* ---------- project blocks ---------- */

.pj {
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule-strong);
  position: relative;
}

.pj-num {
  font-family: var(--serif);
  font-size: 0.875rem;
  color: var(--ink-mute);
  margin: 0 0 0.75rem;
  letter-spacing: 0.08em;
}

.pj h3 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); margin-bottom: 0.75rem; }

/* The budget mark is a word first. Colour only reinforces it. */
.pj-flag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--accent);
  border-radius: 2px;
}

.pj.is-marked { border-top-color: var(--accent); }

.pj-verdict {
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.pj .facts { margin: 1.75rem 0; }

@media (min-width: 40rem) {
  /* "Best for" is a sentence, not a label: it gets the whole row rather than
     leaving a hole beside a two-word status. */
  .pj .facts .fact:first-child { grid-column: 1 / -1; }
}

.pj-price {
  margin: 1.75rem 0;
  padding: 1.25rem 1.25rem 1.25rem 1.1rem;
  background: var(--paper-sunk);
  border-left: 2px solid var(--rule-strong);
  max-width: 44rem;
}
.pj-price p { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.pj-price p:last-child { margin-bottom: 0; }

.pj-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.75rem 0;
  max-width: 48rem;
}

@media (min-width: 46rem) {
  .pj-two { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

.pj-two p:not(.label) { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.pj-two .downside p:not(.label) { color: var(--ink); }

.pj-legal,
.pj-foreign {
  max-width: 44rem;
  margin: 1.75rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rule-strong);
}
.pj-legal p:not(.label),
.pj-foreign p:not(.label) { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.6rem; }

.pj-quota { color: var(--ink) !important; }
.pj-quota span { color: var(--ink-mute); }

.pj-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 1.75rem;
}
.pj-actions .textlink { margin-top: 0; }
.pj-actions .btn { font-size: 1rem; }

/* ---------- comparison ---------- */

.cmp-wide { display: none; }

.cmp-group {
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.cmp-group h3 { font-size: 1.375rem; margin-bottom: 1rem; }
.cmp-group dl { margin: 0; }
.cmp-group dl > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.cmp-group dl > div:last-child { border-bottom: 0; }
.cmp-group dt { font-size: 0.9375rem; color: var(--ink-mute); }
.cmp-group dd { margin: 0; font-size: 1rem; }

@media (min-width: 34rem) {
  .cmp-group dl > div { grid-template-columns: 15rem 1fr; gap: 1rem; }
}

@media (min-width: 62rem) {
  .cmp-wide { display: block; }
  .cmp-narrow { display: none; }
  .cmp table { min-width: 0; font-size: 1rem; }
  .cmp th, .cmp td { padding: 1rem 1.25rem 1rem 0; }
  .cmp thead th { font-size: 0.875rem; }
  .cmp tbody th { color: var(--ink-mute); font-weight: 400; width: 15rem; }
}

.cmp h2 { margin-bottom: 1.5rem; max-width: 24ch; }

/* ---------- foreign buyer check ---------- */

.check { background: var(--paper-sunk); }

.check-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}

.check-list li {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-strong);
}

.check-n {
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--ink-mute);
  flex: 0 0 2.5rem;
}

.check-t {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
}
.check-list p:not(.check-t) { margin: 0; color: var(--ink-soft); font-size: 1rem; }

@media (min-width: 62rem) {
  .check-list { grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
}

.check-law { margin-top: 2.5rem; }
.check-law p { font-size: 1rem; color: var(--ink-soft); }

.shout {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  margin: 2rem 0 0;
  max-width: 24ch;
}
.shout.small { font-size: clamp(1.25rem, 3vw, 1.5rem); }

/* ---------- cost stack ---------- */

.stack {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.stack li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--ink);
}

/* ---------- scenarios ---------- */

.scen { margin-top: 2rem; }

.scen-item {
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
  max-width: 42rem;
}
.scen-item h3 { font-size: 1.375rem; margin-bottom: 0.9rem; }
.scen-item p { color: var(--ink-soft); font-size: 1rem; }

.numbered {
  counter-reset: n;
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
}
.numbered li {
  counter-increment: n;
  position: relative;
  padding: 0.75rem 0 0.75rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--ink-soft);
}
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-family: var(--serif);
  font-size: 0.875rem;
  color: var(--ink-mute);
}

/* ---------- deep dives ---------- */

.deep-sub {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 1rem 0 1.75rem;
}
.deep .measure p:not(.deep-sub):not(.label) { color: var(--ink-soft); }

.deep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2.5rem 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 52rem) {
  .deep-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.deep-grid .tick li { font-size: 1rem; }

.deep-note,
.deep-catch { margin-top: 2.5rem; }
.deep-note h3,
.deep-catch h3 { font-size: 1.375rem; margin-bottom: 0.9rem; }
.deep-catch { border-left: 2px solid var(--rule-strong); padding-left: 1.25rem; }

/* ---------- the buyer brief ---------- */

.brief {
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule-strong);
}

.brief h2 { max-width: 18ch; margin-top: 0.5rem; }
.brief-body { margin-top: 1.25rem; color: var(--ink-soft); }
.brief .tick { margin-top: 0.75rem; }
.brief-free { margin-top: 1.5rem; font-size: 1rem; color: var(--ink); }

.bb-noscript {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  max-width: 40rem;
}

.bb {
  margin-top: 2.5rem;
  max-width: 40rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 1.5rem 1.25rem 1.75rem;
}

@media (min-width: 46rem) {
  .bb { padding: 2.25rem 2.25rem 2.5rem; }
}

.bb-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-mute);
}
.bb-start strong { color: var(--ink); font-weight: 500; }

.bb-clear {
  font: inherit;
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 0 0.5rem;
  background: none;
  border: 0;
  color: var(--ink-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bb-clear:hover { color: var(--ink); }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }

.step legend { padding: 0; margin-bottom: 0.5rem; }

.step-count {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.9rem;
}

.step-q {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  line-height: 1.15;
}
.step legend:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.step-hint { font-size: 0.9375rem; color: var(--ink-mute); margin: 0 0 1rem; }

.opts { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin: 1.25rem 0 0; }
.opts-row { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

.opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
  font-size: 1rem;
  background: var(--paper);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.opt:hover { border-color: var(--ink); }
.opt input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); flex: 0 0 auto; }
.opt:has(input:checked) { border-color: var(--ink); background: var(--paper-sunk); }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.opt.is-off { opacity: 0.45; cursor: not-allowed; }

.field { margin-top: 1.25rem; }
.field label,
.field-label {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
}
.field-label { margin-top: 1.5rem; }
.opt-tag { font-size: 0.875rem; color: var(--ink-mute); }

.field input,
.field textarea {
  font: inherit;
  font-size: 1.0625rem;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }

.field-hint { font-size: 0.875rem; color: var(--ink-mute); margin: 0.4rem 0 0; }

.step-error {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: #8a2b16;
  padding-left: 0.9rem;
  border-left: 2px solid #8a2b16;
}

.step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.step-nav .btn { flex: 1 1 auto; }

@media (min-width: 30rem) {
  .step-nav .btn { flex: 0 0 auto; }
}

.btn[disabled] { opacity: 0.55; cursor: progress; }

/* ---------- preview and success ---------- */

.bb-preview h3,
.bb-done h3 {
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  margin-bottom: 1.25rem;
}
.bb-preview h3:focus-visible,
.bb-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.brief-lines { margin: 0 0 1.75rem; border-top: 1px solid var(--rule); }
.brief-lines > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.brief-lines dt { font-size: 0.9375rem; color: var(--ink-mute); }
.brief-lines dd { margin: 0; font-size: 1.0625rem; }

@media (min-width: 30rem) {
  .brief-lines > div { grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; }
}

.consent {
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 1.25rem 0 0;
}
.consent + .consent { margin-top: 0.5rem; }

.btn-send { flex: 1 1 100%; }
@media (min-width: 34rem) { .btn-send { flex: 0 0 auto; } }

.done-close { margin-top: 1.5rem; font-size: 1.0625rem; }

/* ---------- sticky CTA (mobile only) ---------- */

.sticky-cta { display: none; }

@media (max-width: 46rem) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    border-top: 1px solid var(--rule-strong);
  }
  .sticky-cta .btn {
    width: 100%;
    min-height: 54px;
    font-size: 1.0625rem;
  }
  /* Nothing at the end of the page hides behind the bar. */
  .page-property .site-foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- legal ---------- */

.legal { background: var(--paper-sunk); }
.legal-h { font-size: clamp(1.375rem, 3.5vw, 1.75rem); }
.legal-strong { margin-top: 1.25rem; font-size: 1.0625rem; }
.legal .note { margin-top: 1.25rem; }

/* ==========================================================================
   /da-nang/destination-weddings

   The second page with a form, and a different job: a wedding is chosen by
   removing options, so the page is built to be scanned and eliminated from
   rather than admired. Same paper, same serif, more air.

   Everything below is scoped to .page-wedding. No pink, no gold, no script
   face, no hearts: the restraint is the point, and a wedding page that looks
   like a wedding page is a wedding page nobody trusts with $40,000.
   ========================================================================== */

.page-wedding {
  --wrap: 1180px;
  --measure: 45rem;          /* ~720px reading column */
  font-size: 1.0625rem;      /* 17px mobile */
}

@media (min-width: 46rem) {
  .page-wedding { font-size: 1.125rem; }    /* 18px desktop */
  .page-wedding .wrap { padding: 0 2rem; }
}

@media (min-width: 75rem) {
  .page-wedding .wrap { padding: 0 3rem; }
}

.page-wedding .wrap.wide { max-width: 1120px; }

.page-wedding .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; }
.page-wedding .breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
}

/* The h1 carries its own line break, so it needs room for the longer of the
   two lines rather than a measure that folds it into five. */
.page-wedding h1 {
  font-size: clamp(2.875rem, 5.6vw, 4.5rem);   /* 46px -> 72px */
  max-width: 26ch;
}

.page-wedding .lede { max-width: 42rem; }
.page-wedding .lede p + p { margin-top: 1.1rem; }

.page-wedding .measure > h2 + p,
.page-wedding .measure > h2 + ul { margin-top: 1.25rem; }

.page-wedding .wed-hero .actions { margin-top: 2rem; }

/* Same reasoning as the property page: a display rule outranks the UA sheet's
   [hidden] and quietly opens a panel that should be shut. */
.page-wedding [hidden] { display: none !important; }

.page-wedding .plain {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.page-wedding .plain li {
  font-size: 1rem;
  color: var(--ink-soft);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rule);
}
.page-wedding .plain li:last-child { border-bottom: 0; }

/* ---------- wedding shape ---------- */

.shape { background: var(--paper-sunk); }
.shape-sub { color: var(--ink-mute); margin-top: 0.9rem; font-size: 1rem; }

.qs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.25rem;
}

/* Four questions, one composition. On a wide screen the first three sit side
   by side and the tenth-option question takes the full row underneath: the
   shape of the answers, not an arbitrary grid. */
@media (min-width: 62rem) {
  .qs {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 2rem;
  }
  .qs .q:nth-child(4) { grid-column: 1 / -1; }
}

.q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.q-n {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0 0 0.4rem;
  letter-spacing: 0.08em;
}

.q-legend {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 3.4vw, 1.625rem);
  line-height: 1.15;
  padding: 0;
  margin-bottom: 0.35rem;
}
.q-legend:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.q-hint {
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
  min-height: 1.4em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* A chip is a real label around a real radio. It is 44px tall because a
   control you cannot hit with a thumb is not a control. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.chip:hover { border-color: var(--ink); }
.chip:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip.is-off { opacity: 0.4; cursor: not-allowed; }

.q-more {
  appearance: none;
  background: none;
  border: 0;
  padding: 0.6rem 0;
  min-height: 44px;
  margin-top: 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 1px solid var(--rule-strong);
}
.q-more:hover { color: var(--ink); border-bottom-color: var(--ink); }

.q-date { max-width: 20rem; }

/* ---------- shape result ---------- */

.result {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  max-width: 46rem;
}
.result:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (min-width: 46rem) {
  .result { padding: 2.25rem 2.5rem; }
}

.result-lead {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.1;
  margin: 0.5rem 0 1.25rem;
}
.result-start { color: var(--ink-mute); display: block; font-size: 0.5em; letter-spacing: 0.08em; text-transform: uppercase; }
.result-lead strong { font-weight: 400; }

.result-answers { margin: 0 0 1.5rem; border-top: 1px solid var(--rule); }
.result-answers > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 30rem) {
  .result-answers > div { grid-template-columns: 9rem 1fr; gap: 1rem; }
}
.result-answers dt { font-size: 0.9375rem; color: var(--ink-mute); }
.result-answers dd { margin: 0; font-size: 1rem; }

.result-line { font-size: 1.0625rem; }
.result-why { margin: 1.25rem 0; }
.result-why p:not(.label) { color: var(--ink-soft); font-size: 1rem; margin: 0.3rem 0 0; }

.result-caveats {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 1.25rem 0;
  border-left: 2px solid var(--rule-strong);
}
.result-caveats li { font-size: 1rem; color: var(--ink); margin-bottom: 0.6rem; }
.result-caveats li:last-child { margin-bottom: 0; }

.result-also { font-size: 1rem; color: var(--ink-soft); }
.result-keep { font-size: 0.9375rem; color: var(--ink-mute); margin-top: 1rem; }
.result .actions { margin-top: 1.5rem; }

/* When the four questions are borrowed by the form, the section they came
   from says so instead of collapsing into an unexplained gap. */
.shape.is-borrowed [data-shape-home]::after {
  content: 'These four questions are open in the wedding brief below.';
  display: block;
  padding: 1.5rem 0;
  color: var(--ink-mute);
  font-size: 1rem;
}

/* ---------- venue blocks ---------- */

.vn {
  border-top: 2px solid var(--rule-strong);
  padding: 2.25rem 0 2.75rem;
  max-width: 52rem;
}

.vn-num {
  font-family: var(--serif);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  margin: 0 0 1rem;
}

.vn h3 { font-size: clamp(1.625rem, 4.2vw, 2.375rem); margin-bottom: 0.75rem; }

.vn-flag {
  display: inline-block;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.35rem 0.6rem;
  margin: 0 0 1rem;
}
.vn.is-marked { border-top-color: var(--accent); }

.vn-where {
  font-size: 1rem;
  color: var(--ink);
  border-left: 2px solid var(--rule-strong);
  padding-left: 0.85rem;
  margin-bottom: 1rem;
}

.vn-verdict {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  line-height: 1.35;
  color: var(--ink);
}

.vn .facts { margin: 1.75rem 0; }
@media (min-width: 40rem) {
  .vn .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vn-spaces {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--paper-sunk);
}
.vn-spaces .note { margin-top: 0.9rem; }

.vn-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0;
}
@media (min-width: 46rem) {
  .vn-two { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.vn-two p:not(.label) { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.vn-two .downside p:not(.label) { color: var(--ink); }

.vn-price {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin: 1.5rem 0;
}
.vn-price p:not(.label) { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.6rem; }
.vn-price p:first-of-type + p { color: var(--ink); }
.vn-price p:last-child { margin-bottom: 0; }

.vn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
}
.vn-actions .textlink { margin-top: 0; }
.vn-actions .btn { font-size: 1rem; }

/* ---------- the Plan B test ---------- */

.planb { background: var(--paper-sunk); }
.planb-rows { margin-top: 2.5rem; }

.planb-row {
  border-top: 1px solid var(--rule-strong);
  padding: 1.75rem 0;
}
.planb-row h3 { font-size: 1.375rem; margin-bottom: 1.1rem; }

.planb-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 52rem) {
  .planb-cols { grid-template-columns: 1fr 1fr 1.4fr; gap: 2rem; }
}
.planb-cols p:not(.label) { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.planb-q p:not(.label) {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* ---------- weather ---------- */

.months {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem 0.5rem;
  padding: 0;
  margin: 2.25rem 0 1.5rem;
}
@media (min-width: 46rem) {
  .months { grid-template-columns: repeat(12, 1fr); gap: 0.5rem; }
}

.mo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}
.mo-m { font-size: 0.9375rem; color: var(--ink); }
.mo-bar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 5rem;
  background: var(--paper-sunk);
}
.mo-bar > span {
  display: block;
  width: 60%;
  background: var(--rule-strong);
}
.mo-drier .mo-bar > span { background: #9bb3a8; }
.mo-transition .mo-bar > span { background: #b9ab84; }
.mo-wetter .mo-bar > span { background: #7a6f5c; }
.mo-mm { font-size: 0.875rem; color: var(--ink-soft); }
.mo-d { font-size: 0.875rem; color: var(--ink-mute); }

/* 14px is the floor on this site, so the two smallest labels sit exactly on
   it rather than a hair under. */
.mo-mm, .mo-d { font-size: 0.875rem; }

.key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.key li { display: flex; align-items: center; gap: 0.5rem; }
.key li::before {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  background: var(--rule-strong);
}
.key .key-drier::before { background: #9bb3a8; }
.key .key-transition::before { background: #b9ab84; }
.key .key-wetter::before { background: #7a6f5c; }

.weather-note p { font-size: 1rem; }
.weather-note .shout { margin-top: 1.5rem; }

/* ---------- budget reality ---------- */

.budget-empty { color: var(--ink-mute); font-size: 1rem; }

.budget-out {
  margin: 1.75rem 0 2rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.budget-sum { font-size: 1rem; color: var(--ink-mute); margin-bottom: 0.5rem; }

/* The whole section exists to make one number obvious. */
.budget-big {
  font-family: var(--serif);
  line-height: 1;
  margin: 0 0 0.5rem;
}
.budget-big strong { font-size: clamp(3rem, 12vw, 5rem); font-weight: 400; }
.budget-big span { font-size: 1.125rem; color: var(--ink-soft); }

.budget-band { margin-top: 1.75rem; }
.budget-band h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.budget-band p { font-size: 1rem; color: var(--ink-soft); margin: 0; }

.budget-not {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  margin: 1.5rem 0 1.25rem;
}

.scen-risk { margin-top: 1.25rem; }

/* ---------- the copyable checklist ---------- */

.checklist {
  margin: 2rem 0 1.5rem;
  padding: 1.5rem;
  background: var(--paper-sunk);
  max-width: 46rem;
}
.checklist-fields {
  font-size: 1rem;
  color: var(--ink-mute);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule-strong);
}
.checklist ol { padding-left: 1.25rem; margin: 0; }
.checklist li { font-size: 1rem; margin-bottom: 0.7rem; }
.checklist li:last-child { margin-bottom: 0; }

.copy-status {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0;
  min-height: 1.4em;
}
.qs-copy .actions { align-items: center; }

/* ---------- the brief ---------- */

.bb-head { margin-bottom: 1.75rem; }
.bb-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.bb-sub { font-size: 1rem; color: var(--ink-soft); margin: 0; }

.known {
  padding: 1.25rem;
  background: var(--paper-sunk);
  margin-bottom: 1.75rem;
}
.known-h {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.known .brief-lines { margin-bottom: 1rem; }
.known-extra { margin-bottom: 0.5rem; }
.known-extra .note { margin-top: 0.75rem; }

.send-error {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--ink);
  background: var(--paper-sunk);
}
.send-error:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.send-error p { font-size: 1rem; margin: 0; color: var(--ink-soft); }
.send-error-h { font-weight: 500; color: var(--ink) !important; margin-bottom: 0.3rem !important; }

.page-wedding .step-nav [data-back][hidden] { display: none !important; }

@media (max-width: 46rem) {
  .page-wedding .site-foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* The brief's stand-in for the four questions, on a browser that cannot tell
   us when the visitor has arrived at the form. */
.step-missing {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
}

/* ==========================================================================
   Shared additions: on-page navigation, related decisions, the "why we ask"
   line, the per-line Change button, and print.
   ========================================================================== */

/* ---------- "on this page" ---------- */

.onpage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  padding: 0.75rem 0 0.9rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.onpage-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.onpage ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
}
.onpage a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.onpage a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.updated a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.updated a:hover { text-decoration-color: var(--ink); }
.updated-sep { color: var(--rule-strong); margin: 0 0.15rem; }

/* Anchored sections land below the top edge, not under it. */
[id] { scroll-margin-top: 1.25rem; }

/* ---------- related decisions ---------- */

.related { margin-top: 1.25rem; }
.related .index-row { text-decoration: none; }
.related .index-line { color: var(--ink-mute); }
.related-twin { margin-top: 1.25rem; font-size: 1rem; color: var(--ink-soft); }

/* ---------- forms: why we ask, change one line ---------- */

.step-why {
  font-size: 0.9375rem;
  color: var(--ink-mute);
  margin: 0 0 0.25rem;
  max-width: 34rem;
}
.step-why::before { content: "Why we ask: "; color: var(--ink-soft); }

/* Narrow: label over value, the button beside both. Wide: a third column. */
.brief-lines > div.has-change { grid-template-columns: 1fr auto; }
.brief-lines > div.has-change dt,
.brief-lines > div.has-change dd { grid-column: 1; }
.brief-lines > div.has-change .line-change { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (min-width: 30rem) {
  .brief-lines > div.has-change { grid-template-columns: 12rem 1fr auto; }
  .brief-lines > div.has-change dt { grid-column: 1; }
  .brief-lines > div.has-change dd { grid-column: 2; }
  .brief-lines > div.has-change .line-change { grid-column: 3; grid-row: auto; }
}
.line-change {
  font: inherit;
  font-size: 0.875rem;
  min-height: 44px;
  padding: 0 0.4rem;
  margin: -0.5rem 0;
  background: none;
  border: 0;
  color: var(--ink-mute);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  justify-self: end;
}
.line-change:hover { color: var(--ink); }

/* ---------- print ---------- */
/* A guide is taken to the clinic, the notary or the venue. On paper it is a
   checklist: no chrome, no form, no sticky bar, and every outbound link says
   where it goes. */

.print-only { display: none; }

@media print {
  :root { --paper: #fff; --paper-sunk: #fff; --ink: #000; --ink-soft: #222; --ink-mute: #444; }
  html { scroll-behavior: auto; }
  body { font-size: 11pt; line-height: 1.45; background: #fff; color: #000; }
  .wrap { max-width: none; padding: 0; }
  .site-head, .site-foot, .skip, .sticky-cta, .onpage, .actions, .btn,
  .brief, .shape, .lens, .pick-links a[href^="tel"], .qs-copy .actions,
  .card-go, .textlink, .result, .bb-noscript, [data-sticky] { display: none !important; }
  section { padding: 1rem 0 !important; }
  .hero { padding-top: 0 !important; }
  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; break-after: avoid; }
  h3 { break-after: avoid; }
  .pick, .pj, .vn, .faq-item, .compare-row, .scen-item, .planb-row, .cmp-group, .deep-grid > div,
  .check-list li, table tr { break-inside: avoid; }
  .statement, .check, .legal, .planb, .weather { background: #fff; border-top: 1px solid #000; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; word-break: break-all; }
  .pick-links a[href^="http"]::after { content: " " attr(href); }
  .cmp-wide { display: block !important; }
  .cmp-narrow { display: none !important; }
  .table-wrap { overflow: visible; }
  .table-hint { display: none; }
  .mo-bar { border: 1px solid #000; }
  .print-only {
    display: block;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #000;
    font-size: 9pt;
    color: #444;
  }
}

/* ---------- /kosmetolog-vietnam: the Russian landing ----------
   Scoped under body.lp. Reference: Postpone (lll.bz/forai) - an off-white
   page with a faint grid, a left-aligned editorial serif, a pill above the
   headline, the channel marks under the lead, one amber button, a dark nav
   pill. Owner's rules: visible text 18px and up, weight 400, tap targets
   44px and up, no capitals, no numbering, no captions on pictures. */
.lp {
  --lp-paper: #f8f7f3;
  --lp-card: #ffffff;
  --lp-sunk: #f0eee7;
  --lp-ink: #191813;
  --lp-soft: #55524a;
  --lp-rule: #e0dcd0;
  --lp-amber: #f8b400;
  --lp-amber-deep: #e9a700;
  --lp-wa: #1fa855;
  --lp-tg: #2795d9;
  --lp-ig: #d6336c;
  --lp-wrap: 1200px;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-size: 1.125rem;
  line-height: 1.6;
  padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
}
.lp .wrap { max-width: var(--lp-wrap); }
.lp .skip { font-size: 1.125rem; }
.lp h1, .lp h2, .lp h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.lp h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.03em; margin: 1.25rem 0 1.5rem; }
.lp h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.08; margin: 0 0 1rem; }
.lp h3 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.5rem; }
.lp h4 { font-weight: 400; font-size: 1.2rem; margin: 1.25rem 0 0.4rem; color: var(--lp-soft); }
.lp p, .lp li { font-size: 1.125rem; line-height: 1.65; }
.lp p { margin: 0 0 1rem; }
.lp a { color: inherit; }
.lp svg { flex: none; width: 1.5rem; height: 1.5rem; fill: currentColor; }
.lp a:focus-visible, .lp summary:focus-visible { outline: 3px solid var(--lp-ink); outline-offset: 3px; }

/* header: wordmark on the left, one dark pill on the right */
.lp-head { position: sticky; top: 0; z-index: 30; background: rgba(248, 247, 243, 0.92); backdrop-filter: blur(10px); }
.lp-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.lp-wordmark { font-family: var(--serif); font-size: 1.3rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lp-nav { display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem; border-radius: 14px; background: var(--lp-ink); }
.lp-nav a { display: none; align-items: center; min-height: 44px; padding: 0 0.9rem; border-radius: 10px; color: #f3f1ea; text-decoration: none; font-size: 1.125rem; }
.lp-nav a:hover { background: rgba(255, 255, 255, 0.12); }
.lp-nav a.lp-nav-cta { display: inline-flex; background: #fff; color: var(--lp-ink); padding: 0 1.1rem; }
.lp-nav a.lp-nav-cta:hover { background: var(--lp-amber); }
@media (min-width: 900px) { .lp-nav a { display: inline-flex; } }

/* hero: text on the left, one photograph on the right, a faint grid behind */
.lp-hero { position: relative; padding: 2rem 0 3rem; }
.lp-hero::before {
  content: ""; position: absolute; inset: 0 0 0 35%; pointer-events: none;
  background-image: linear-gradient(var(--lp-rule) 1px, transparent 1px), linear-gradient(90deg, var(--lp-rule) 1px, transparent 1px);
  background-size: 56px 56px; opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 72%);
}
.lp-hero-grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.lp p.lp-pill { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.45rem 0.95rem; border: 1px solid var(--lp-rule); border-radius: 10px; background: var(--lp-sunk); color: var(--lp-soft); line-height: 1.35; }
.lp-pill::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--lp-ig); }
.lp p.lp-lead { font-size: 1.35rem; line-height: 1.5; max-width: 34rem; margin: 0 0 1.75rem; color: var(--lp-soft); }
.lp-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(25, 24, 19, 0.35); }
@media (min-width: 900px) {
  .lp-hero { padding: 3.5rem 0 5rem; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 3.5rem; }
  .lp-channels { flex-wrap: nowrap; }
  .lp a.lp-btn, .lp a.lp-ch { padding-left: 1.35rem; padding-right: 1.35rem; white-space: nowrap; }
  .lp-hero-img { aspect-ratio: 4 / 5; }
}

/* the channels: one amber button, then Telegram and Instagram as equals */
.lp-channels { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lp a.lp-btn, .lp a.lp-ch { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 60px; padding: 0.8rem 1.6rem; border-radius: 999px; text-decoration: none; font-size: 1.25rem; line-height: 1.2; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.lp a.lp-btn { background: var(--lp-amber); color: var(--lp-ink); flex: 1 1 100%; }
.lp a.lp-btn:hover { background: var(--lp-amber-deep); transform: translateY(-1px); }
.lp a.lp-ch { background: var(--lp-card); border: 1px solid var(--lp-rule); flex: 1 1 0; padding-left: 1rem; padding-right: 1rem; }
.lp a.lp-ch:hover { border-color: var(--lp-ink); transform: translateY(-1px); }
.lp-ch-whatsapp svg { color: var(--lp-wa); }
.lp-ch-telegram svg { color: var(--lp-tg); }
.lp-ch-instagram svg { color: var(--lp-ig); }
.lp a.lp-btn svg { color: var(--lp-ink); }
.lp p.lp-reply { margin: 1rem 0 0; color: var(--lp-soft); }
@media (min-width: 560px) { .lp a.lp-btn, .lp a.lp-ch { flex: 0 0 auto; padding-left: 1.6rem; padding-right: 1.6rem; } }

/* sections: the heading in a narrow left column, the content on the right */
.lp-sec, .lp-end { scroll-margin-top: 4.5rem; }
.lp-sec { padding: 3.5rem 0; border-top: 1px solid var(--lp-rule); }
.lp-band { background: var(--lp-sunk); border-top: 0; }
.lp-band + .lp-sec { border-top: 0; }
.lp-cols { display: grid; gap: 2rem; }
.lp-side p { color: var(--lp-soft); max-width: 30rem; margin: 0; }
@media (min-width: 900px) {
  .lp-sec { padding: 5.5rem 0; }
  .lp-cols { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .lp-side { position: sticky; top: 6rem; }
}

/* plain lists in place of card walls */
.lp-list { display: grid; gap: 2rem 2.5rem; }
.lp-item { border-top: 1px solid var(--lp-ink); padding-top: 1.1rem; }
.lp-item p { margin: 0; color: var(--lp-soft); }
.lp p.lp-note { margin: 2rem 0 0; color: var(--lp-soft); }
@media (min-width: 640px) { .lp-list { grid-template-columns: repeat(2, 1fr); } }

/* the planning block: the owner's fixed text beside its photograph */
.lp-split { display: grid; gap: 2.5rem; align-items: center; }
.lp-img { width: 100%; height: auto; border-radius: 28px; display: block; }
.lp-dash { list-style: none; padding: 0; margin: 0 0 1rem; }
.lp-dash li { padding-left: 1.6rem; position: relative; margin-bottom: 0.6rem; }
.lp-dash li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--lp-amber); }
.lp p.lp-tip { padding: 1rem 1.25rem; border-radius: 16px; background: var(--lp-card); border: 1px solid var(--lp-rule); }
.lp-tip em { font-family: var(--serif); font-size: 1.25rem; }
.lp-cta-inline { margin: 1.5rem 0 0; display: flex; }
@media (min-width: 900px) { .lp-split { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }

/* accordions: procedures and questions, ruled rows with no boxes */
.lp-acc { border-bottom: 1px solid var(--lp-rule); }
.lp-acc details { border-top: 1px solid var(--lp-rule); }
.lp-acc details:first-child { border-top-color: var(--lp-ink); }
.lp summary { cursor: pointer; list-style: none; padding: 1.25rem 3.75rem 1.25rem 0; min-height: 44px; position: relative; font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.01em; }
.lp summary::-webkit-details-marker { display: none; }
.lp summary::after { content: "+"; position: absolute; right: 0; top: 1.1rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--lp-rule); border-radius: 50%; background: var(--lp-card); font-family: var(--sans); font-size: 1.6rem; line-height: 1; }
.lp summary:hover::after { border-color: var(--lp-ink); }
.lp details[open] > summary::after { content: "−"; background: var(--lp-amber); border-color: var(--lp-amber); }
.lp-s-title { display: block; }
.lp-s-lead { display: block; font-family: var(--sans); letter-spacing: 0; color: var(--lp-soft); font-size: 1.125rem; line-height: 1.55; margin-top: 0.35rem; }
.lp-s-body, .lp-acc details > p { padding: 0 0 1.5rem; max-width: 44rem; margin: 0; }
.lp-acc details > p { color: var(--lp-soft); }
.lp-s-body ul { margin: 0; padding-left: 1.2rem; }

/* the last screen: a dark panel with the three channels as cards */
.lp-end { padding: 2rem 0 3rem; }
.lp-panel { background: var(--lp-ink); color: #f3f1ea; border-radius: 32px; padding: 2.5rem 1.5rem; }
.lp-panel h2 { max-width: 20ch; }
.lp-panel p.lp-lead { color: #c9c5b8; max-width: 38rem; }
.lp-cards { display: grid; gap: 0.75rem; margin: 2rem 0; }
.lp a.lp-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; min-height: 84px; padding: 1rem 1.25rem; border-radius: 20px; background: #fff; color: var(--lp-ink); text-decoration: none; transition: transform 0.15s ease, background-color 0.15s ease; }
.lp a.lp-card:hover { transform: translateY(-2px); }
.lp a.lp-card.lp-ch-whatsapp { background: var(--lp-amber); }
.lp a.lp-card.lp-ch-whatsapp svg { color: var(--lp-ink); }
.lp-card svg { width: 2rem; height: 2rem; }
.lp-card-name { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.lp-card-handle { display: block; font-size: 1.125rem; color: var(--lp-soft); overflow-wrap: anywhere; }
.lp-ch-whatsapp .lp-card-handle { color: #4a3a05; }
.lp-card-go { font-size: 1.5rem; line-height: 1; display: none; }
.lp a.lp-card { grid-template-columns: auto 1fr; }
.lp-panel p.lp-cities, .lp-panel p.lp-site { color: #c9c5b8; margin: 0 0 0.5rem; max-width: 46rem; }
.lp-panel .lp-site a { display: inline-block; padding: 0.5rem 0; color: #fff; }
.lp-panel a:focus-visible { outline-color: #fff; }
@media (min-width: 900px) {
  .lp-end { padding: 3rem 0 5rem; }
  .lp-panel { padding: 4.5rem 4rem; }
  .lp-cards { grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2.5rem 0; }
  .lp a.lp-card { grid-template-columns: auto 1fr auto; }
  .lp-card-go { display: block; }
}

/* footer, and the messenger bar that phones keep under the thumb */
.lp-foot { padding: 1rem 0 2rem; color: var(--lp-soft); }
.lp-foot a { display: inline-block; padding: 0.5rem 0; }
.lp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 0.5rem; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(248, 247, 243, 0.96); border-top: 1px solid var(--lp-rule); backdrop-filter: blur(10px); }
.lp-bar a { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; border-radius: 999px; text-decoration: none; font-size: 1.125rem; background: var(--lp-card); border: 1px solid var(--lp-rule); flex: 0 0 56px; }
.lp-bar a.lp-ch-whatsapp { flex: 1 1 auto; background: var(--lp-amber); border-color: var(--lp-amber); }
.lp-bar a.lp-ch-whatsapp svg { color: var(--lp-ink); }
@media (min-width: 900px) {
  .lp { padding-bottom: 0; }
  .lp-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp a { transition: none !important; } }
@media print { .lp-bar, .lp-channels, .lp-nav, .lp-cards { display: none !important; } }