/* guide.css -- the Closing Guide's one style sheet, shared by guide-en.html and guide-es.html (design-guide.md 2.5).
   It is a separate file because the forms site serves the guide under "style-src 'self'": an inline <style> block
   or a style="" attribute would be refused and the guide would open unstyled (review A, finding B1).
   Published beside the guide: forms.apexbelize.com/guide/read/guide.css. ASCII only. */
@page { size: 8.5in 11in; margin: 0; }
:root {
  --green: #344734; --green-deep: #233423; --mid: #5E7A5E; --gold: #F1A638; --sand: #E7D1B5; --sand-2: #F6EFE5;
  --ink: #131C24; --ink-2: #46514B; --line: #D8D2C8; --paper: #FFFFFF;
  --head: "Adobe Caslon Pro", "Libre Caslon Text", "Big Caslon", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: "Minion Pro", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.5;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow-wrap: break-word;
}
a { color: var(--green-deep); text-underline-offset: 2px; }
a.url { overflow-wrap: normal; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; width: 100%; height: auto; }
svg text { font-family: var(--ui); }
svg .hd { font-family: var(--head); }

/* ---- the screen bar (never printed) ---- */
.bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); font-family: var(--ui); font-size: 15px;
}
.bar .wm { font-family: var(--head); font-size: 19px; letter-spacing: .3em; color: var(--green); text-decoration: none; white-space: nowrap; }
.bar .pdf {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--green); color: #fff; text-decoration: none; font-weight: 600;
}

/* ---- a page, phone first ---- */
.page { position: relative; background: var(--paper); font-size: 17px; padding: 32px 16px 36px; border-top: 8px solid var(--sand-2); }
.run, .foot { display: none; }
.wide { display: none; }
.tall { display: block; }

.kicker {
  display: flex; align-items: center; gap: .6em; margin: 0 0 .55em; font-family: var(--ui); font-size: .74em;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
/* a section's kicker carries its icon from the cover's "What's inside" list, never a number: circled numbers belong
   to the eleven steps alone, which pages 2 and 7 cite by number (review "Final and Spanish", R3) */
.kicker .ki {
  flex: none; display: block; width: 2em; height: 2em; padding: .3em; border-radius: 50%;
  background: var(--sand-2); color: var(--green);
}
h2 { font-family: var(--head); font-weight: 600; font-size: 1.9em; line-height: 1.12; color: var(--green-deep); margin: 0 0 .35em; }
h3 {
  font-family: var(--ui); font-size: .76em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin: 1.1em 0 .6em;
}
p { margin: 0 0 .7em; }
.lead { font-size: 1.2em; line-height: 1.4; margin: 0 0 .9em; }
.lead b { color: var(--green-deep); }
ul.pts { list-style: none; margin: 0 0 .8em; padding: 0; }
ul.pts li { position: relative; padding-left: 1.2em; margin: 0 0 .55em; }
ul.pts li::before { content: ""; position: absolute; left: 0; top: .5em; width: .48em; height: .48em; background: var(--gold); }
ul.pts b, ol.num b, .steps b { color: var(--green-deep); }
figure { margin: 0 0 1em; }
figcaption { font-family: var(--ui); font-size: .74em; line-height: 1.4; color: var(--ink-2); margin-top: .5em; }
.sect + .sect { margin-top: 2em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.note { background: var(--sand-2); border-left: 4px solid var(--gold); border-radius: 0 6px 6px 0; padding: .75em 1em; margin: 0 0 .9em; }
.note p:last-child, .note ul:last-child, .note li:last-child { margin-bottom: 0; }
.note h3 { margin-top: 0; }
/* a draft-only tag on an element that waits for one of Francisco's answers (Q1); removed with the answer */
.note.pending { border: 2px dashed #B3261E; border-left-width: 4px; background: #FFF8F6; }
.qtag {
  display: inline-block; margin: 0 0 .45em; font-family: var(--ui); font-size: .72em; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: #B3261E; border-radius: 3px; padding: .15em .6em;
}
.small { font-size: .86em; color: var(--ink-2); }
.fig-hub { max-width: 330px; margin: 0 auto 1em; }
.fig-phone { max-width: 250px; margin: 0 auto 1em; }
.pair { display: grid; grid-template-columns: 1fr; gap: 0 1em; }

/* the cover */
.cover { padding: 0; border-top: 0; }
.cover-top { background: var(--green-deep); color: #fff; padding: 26px 16px 22px; position: relative; }
.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .8em; }
.brand .wm { font-family: var(--head); font-size: 1.25em; letter-spacing: .3em; color: #fff; }
.brand .wm2 { font-family: var(--ui); font-size: .66em; font-weight: 600; letter-spacing: .26em; color: var(--gold); }
/* .draft: the "for approval" label a draft carries on its cover (the Spanish guide, until it is read and approved) */
.draft {
  display: inline-block; margin-top: .8em; font-family: var(--ui); font-size: .62em; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand); border: 1px solid rgba(231, 209, 181, .55); border-radius: 3px; padding: .2em .6em;
}
/* .edition: the small edition line on an approved guide's cover, in place of the draft label */
.edition {
  display: block; margin-top: .8em; font-family: var(--ui); font-size: .62em; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand);
}
.ck { margin: 1.4em 0 .5em; font-family: var(--ui); font-size: .74em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.cover h1 { font-family: var(--head); font-weight: 400; font-size: 2.05em; line-height: 1.08; margin: 0 0 .4em; color: #fff; }
.cover h1 span { display: block; color: var(--sand); }
.sub { font-size: 1.05em; color: #E6DDCF; margin: 0 0 1.1em; }
.cover-art { margin: 0; }
.cover-body { padding: 24px 16px 8px; }
.cover-body h3 { margin-top: 0; }
.inside { list-style: none; margin: 0 0 1em; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 1.4em; }
.inside li { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: .8em; padding: .55em 0; border-bottom: 1px solid var(--line); }
.inside .ico { width: 2.4em; height: 2.4em; padding: .42em; border-radius: 50%; background: var(--sand-2); color: var(--green); }
.inside b { display: block; font-family: var(--head); font-weight: 600; font-size: 1.05em; line-height: 1.2; color: var(--green-deep); }
.inside .d { display: block; font-size: .84em; line-height: 1.3; color: var(--ink-2); }
.inside .p { font-family: var(--ui); font-size: .72em; color: var(--ink-2); white-space: nowrap; }
.for { display: flex; flex-wrap: wrap; align-items: center; gap: .45em .5em; margin: 0 0 1.1em; font-family: var(--ui); font-size: .8em; }
.for .k { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-right: .3em; }
.for .c { background: var(--sand-2); border: 1px solid #E4D8C6; border-radius: 999px; padding: .2em .8em; color: var(--green-deep); font-weight: 600; }
.band { background: var(--sand-2); border-radius: 8px; padding: .8em 1em; }
.also { font-family: var(--ui); font-size: .8em; line-height: 1.55; color: var(--ink-2); margin: 0; }
.also b { color: var(--green-deep); }

/* the eleven steps: a vertical, numbered timeline on a phone (Q4 = yes, 27 Sep 2026: "Figures first, then funds").
   Each number sits in its phase colour, the same numbers as the timeline picture printed on page 2. */
.steps { list-style: none; margin: 0 0 1em; padding: 0; counter-reset: s; }
.steps li { position: relative; counter-increment: s; padding: 0 0 1em 3em; line-height: 1.4; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -.1em; width: 2.1em; height: 2.1em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-family: var(--ui); font-size: .86em; font-weight: 700;
  background: var(--c); color: var(--cf);
}
.steps li::after { content: ""; position: absolute; left: .85em; top: 1.9em; bottom: .15em; width: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps .ph { display: block; font-family: var(--ui); font-size: .68em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.s1 { --c: var(--green); --cf: #fff; } .s2 { --c: var(--mid); --cf: #fff; } .s3 { --c: var(--sand); --cf: var(--ink); }
.s4 { --c: var(--gold); --cf: var(--ink); } .s5 { --c: var(--green-deep); --cf: #fff; }
.wa {
  display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; font-family: var(--ui); font-size: .72em; font-weight: 600;
  color: var(--green-deep); background: var(--sand-2); border-radius: 999px; padding: .05em .65em .05em .35em; vertical-align: .08em;
}
.wa svg { display: inline-block; width: 1.3em; height: 1.3em; }

/* numbered how-to: a plain numeral, not a circle (circled numbers are the eleven steps' own: R3) */
ol.num { list-style: none; counter-reset: n; margin: 0 0 1em; padding: 0; }
ol.num li { counter-increment: n; position: relative; padding-left: 1.7em; margin: 0 0 .7em; }
ol.num li::before {
  content: counter(n) "."; position: absolute; left: 0; top: 0; font-family: var(--ui); font-weight: 700; color: var(--green);
}

/* worked examples */
.ex { display: grid; grid-template-columns: 1fr; gap: .8em; margin: 0 0 1em; }
.card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.card .h { padding: .5em .9em; font-family: var(--ui); font-size: .8em; font-weight: 700; background: var(--green); color: #fff; }
.card.f .h { background: var(--gold); color: var(--ink); }
.card .b { padding: .65em .9em .75em; }
.card .calc { font-family: var(--ui); font-size: .86em; color: var(--ink-2); margin: 0 0 .2em; }
.card .big { font-family: var(--head); font-size: 1.75em; line-height: 1.1; color: var(--green-deep); margin: 0 0 .3em; }
.card .big small { font-family: var(--body); font-size: .5em; color: var(--ink-2); }
.card .fee { font-size: .92em; margin: 0; border-top: 1px solid var(--line); padding-top: .45em; }

/* the next step */
.wa-btn {
  display: inline-flex; align-items: center; gap: .6em; background: var(--gold); color: var(--ink); text-decoration: none;
  font-family: var(--ui); font-weight: 700; font-size: 1.1em; padding: .7em 1.4em .7em 1.1em; border-radius: 999px; min-height: 44px;
}
.wa-btn svg { width: 1.5em; height: 1.5em; }
.contacts { display: grid; grid-template-columns: 1fr; gap: .5em 1.4em; margin: 1em 0 1.1em; padding: 0; list-style: none; }
.contacts li { border-top: 1px solid var(--line); padding-top: .4em; }
.contacts .k { display: block; font-family: var(--ui); font-size: .7em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.who { display: grid; grid-template-columns: 1fr; gap: .7em; margin: 0 0 1.1em; }
.who > div { background: var(--sand-2); border-radius: 8px; padding: .7em .9em; }
.who b { display: block; font-family: var(--head); font-size: 1.12em; color: var(--green-deep); margin-bottom: .15em; }
.recap { background: var(--green-deep); color: #fff; border-radius: 10px; padding: 1em 1.2em; margin: 0 0 1em; }
.recap h3 { color: var(--gold); margin: 0 0 .6em; }
.recap ol { margin: 0; padding-left: 1.3em; }
.recap li { margin: 0 0 .3em; }
.recap b { color: var(--sand); }
.legal { font-size: .82em; color: var(--ink-2); margin: 0; }

/* ---- sheets: print, and any screen 900 px or wider ---- */
@media print, screen and (min-width: 900px) {
  .page { width: 8.5in; height: 11in; overflow: hidden; font-size: 10.9pt; line-height: 1.42; padding: .9in .62in .8in; border-top: 0; }
  .cover { display: flex; flex-direction: column; }
  .cover-body { flex: 1; display: flex; flex-direction: column; }
  .cover .band { margin-top: auto; margin-bottom: .8in; }
  .run {
    display: flex; justify-content: space-between; align-items: baseline; position: absolute; top: .4in; left: .62in; right: .62in;
    padding-bottom: 5px; border-bottom: 1px solid var(--line); font-family: var(--ui); font-size: 7.5pt; color: var(--ink-2);
  }
  .run .wm { font-family: var(--head); font-size: 9.5pt; letter-spacing: .3em; color: var(--green); }
  .run::after { content: ""; position: absolute; left: 0; bottom: -2px; width: .55in; height: 3px; background: var(--gold); }
  .foot {
    display: flex; justify-content: space-between; gap: 1em; position: absolute; left: .62in; right: .62in; bottom: .36in;
    padding-top: 5px; border-top: 1px solid var(--line); font-family: var(--ui); font-size: 7.2pt; color: var(--ink-2);
  }
  .wide { display: block; }
  .tall { display: none; }
  h2 { font-size: 2.15em; }
  .lead { font-size: 1.22em; }
  .split { display: grid; grid-template-columns: var(--l, 1fr) var(--r, 1fr); gap: .3in; align-items: center; }
  .split > figure { margin: 0; }
  .fig-hub, .fig-phone { max-width: none; margin: 0; }
  .sect + .sect { margin-top: .22in; padding-top: .2in; }
  .steps { column-count: 2; column-gap: .32in; font-size: .9em; margin-bottom: .75em; }
  .steps li { break-inside: avoid; page-break-inside: avoid; padding: .1em 0 .5em 2.35em; }
  .steps li::before { top: .05em; }
  .s-hub { --l: 2.45in; --r: 1fr; }
  .s-kyc { --l: 4.15in; --r: 1fr; }
  .s-phone { --l: 2.4in; --r: 1fr; }
  .split.top { align-items: start; }
  .steps li::after, .steps .ph { display: none; }
  .pair, .ex, .who, .contacts { grid-template-columns: 1fr 1fr; }
  .cols2 { column-count: 2; column-gap: .32in; }
  .cols2 li { break-inside: avoid; }
  .cover { padding: 0; }
  .cover-top { padding: .5in .62in .3in; }
  .draft, .edition { position: absolute; top: .5in; right: .62in; margin: 0; }
  .edition { top: .56in; }
  .ck { margin-top: .4in; }
  .cover h1 { font-size: 3.05em; }
  .sub { font-size: 1.2em; }
  .cover-body { padding: .3in .62in 0; }
  .inside { grid-template-columns: 1fr 1fr; }
}
@media screen and (min-width: 900px) {
  body { background: #E9E4DA; }
  .bar { max-width: 8.5in; margin: 18px auto 0; border: 0; border-radius: 8px; }
  .page { margin: 18px auto; box-shadow: 0 1px 3px rgba(19, 28, 36, .12), 0 10px 28px rgba(19, 28, 36, .10); }
}
@media print {
  .bar { display: none; }
  .page { break-after: page; page-break-after: always; }
  .page:last-of-type { break-after: auto; page-break-after: auto; }
}
@media print, screen and (min-width: 900px) {
  /* page 6 carries two sections and the deed line (review A, A5): a slightly tighter gap between them */
  #p6 .sect + .sect { margin-top: .16in; padding-top: .16in; }
}

/* ---- the Spanish guide (guide-es.html) ----
   Spanish runs about 10% longer than English. Every rule here is scoped to html[lang="es"], so the English sheets
   are unchanged (both measured with scratchpad sheet-fit.mjs, 27 Sep 2026). .nw keeps a phone number on one line. */
.nw { white-space: nowrap; }
@media print, screen and (min-width: 900px) {
  /* "Comprar o vender terreno en Belice:" on one line, as the English title's first line */
  html[lang="es"] .cover h1 { font-size: 2.85em; }
  /* page 3 carries two sections, as page 6 does: the same tighter gap between them */
  html[lang="es"] #p3 .sect + .sect { margin-top: .16in; padding-top: .16in; }
  /* page 7: a narrower phone picture gives the longer Spanish points more width */
  html[lang="es"] .s-phone { --l: 2.05in; }
  /* page 6 carries the longer Spanish lead and deed line (ES-6, ES-7): a slightly tighter gap between its sections */
  html[lang="es"] #p6 .sect + .sect { margin-top: .12in; padding-top: .12in; }
}