/* Marco & Co. — guide pages
   An expert's handbook rather than a blog template: one reading column, expert notes in the margin on wide screens,
   and one working artifact per page (a tickable checklist, a replica of the refusal form). Structure appears only where
   the content has it: numbers for real sequences, tables for real comparisons. Uses the tokens in site.css. */

.g { padding: 22px 0 80px; }
.g-wrap { width: min(1100px, 100% - 2 * var(--gutter)); margin-inline: auto; }

.g-crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--muted); }
.g-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--line); }
.g-crumbs a { color: var(--ink-2); text-decoration: none; }
.g-crumbs a:hover { color: var(--oxford); text-decoration: underline; text-underline-offset: 3px; }

/* Head */
.g-head { max-width: 780px; padding: 30px 0 34px; }
.g-head h1 { font-weight: 300; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.16; letter-spacing: -.012em; text-wrap: balance; }
.g-lead { margin-top: 20px; max-width: 34em; font-size: clamp(17px, 1.7vw, 19.5px); line-height: 1.8; color: var(--ink-2); text-wrap: pretty; }
.g-by { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.g-by img { width: 38px; height: 38px; border-radius: 50%; }
.g-by b { display: block; font-weight: 500; color: var(--oxford); }

/* Body: a 660px column; notes float into the right margin on wide screens */
.g-body { max-width: 660px; padding-top: 40px; border-top: 1px solid var(--line); }
.g-body > h2 { margin: 60px 0 14px; font-weight: 400; font-size: clamp(24px, 2.7vw, 32px); line-height: 1.3; letter-spacing: -.005em; scroll-margin-top: 100px; text-wrap: balance; }
.g-body > h2:first-of-type { margin-top: 0; }
.g-body h3:where(:not(.g-ec *, .g-pk *, .g-fork *, .g-rx *, .g-pkx *)) { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--oxford); }
.g-body .g-table + h3 { margin-top: 36px; }
.g-body .g-table + h3 + p { margin-top: 8px; }
.g-body p:where(:not(.g-ec *, .g-pk *, .g-fork *, .g-rx *, .g-pkx *)) { font-size: 17.5px; line-height: 1.85; color: var(--ink-2); }
.g-body p:where(:not(.g-ec *, .g-pk *, .g-fork *, .g-rx *, .g-pkx *)) + p { margin-top: 14px; }
.g-body a:not(.btn):where(:not(.g-ec *, .g-pk *, .g-fork *, .g-rx *, .g-pkx *)) { color: var(--blue); text-underline-offset: 3px; }
.g-body ul.g-plain { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.g-body ul.g-plain b { font-weight: 500; color: var(--oxford); }
mark.hl { background: linear-gradient(180deg, transparent 58%, var(--mist) 58%); color: inherit; padding: 0 .06em; }

.g-note { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.g-note .lbl { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--blue); }
.g-note p { font-size: inherit !important; line-height: inherit !important; }
.g-note cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--muted); }
@media (min-width: 1080px) {
  .g-note { float: right; clear: right; width: 230px; margin: 4px -300px 18px 0; padding-top: 10px; border-top: 2px solid var(--oxford); }
}
@media (max-width: 1079px) {
  .g-note { margin: 24px 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--oxford); }
}

/* Key–value table */
.g-table { width: 100%; margin: 18px 0 4px; border-collapse: collapse; font-size: 16px; line-height: 1.65; }
.g-table th, .g-table td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.g-table tbody th { width: 30%; font-size: 14.5px; font-weight: 500; color: var(--muted); }
.g-table td { color: var(--oxford); }
.g-table td small { display: block; font-size: 14px; color: var(--ink-2); }
.g-table thead th { padding-bottom: 10px; border-bottom: 1.5px solid var(--oxford); font-size: 15px; font-weight: 500; color: var(--oxford); }
.g-table.cmp { table-layout: fixed; }
.g-table.cmp col.c-label { width: 20%; }
.g-table.cmp col.c-opt { width: 40%; }
.g-table.cmp td { color: var(--ink-2); padding-right: 24px; }
.g-table.cmp td small { margin-top: 2px; }
@media (max-width: 600px) {
  .g-table.cmp, .g-table.cmp tbody { display: block; width: 100%; }  /* the fixed column widths would otherwise squeeze the stacked rows */
  .g-table.cmp colgroup, .g-table.cmp thead { display: none; }
  .g-table.cmp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .g-table.cmp th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 0; border: 0; }
  .g-table.cmp td { padding: 0; border: 0; font-size: 15px; }
  .g-table.cmp td::before { content: attr(data-h); display: block; font-size: 13px; font-weight: 500; color: var(--blue); }
}

/* Working checklist */
.g-check { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.g-check li { border-bottom: 1px solid var(--line); }
.g-check label { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; padding: 15px 2px; cursor: pointer; }
.g-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.g-check .box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 5px; border: 1.5px solid var(--oxford); border-radius: 4px; background: #fff; }
.g-check .box svg { width: 20px; height: 16px; margin: -3px 0 0 3px; fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .3s ease; }
.g-check input:checked + .box svg { stroke-dashoffset: 0; }
.g-check input:focus-visible + .box { outline: 2px solid var(--blue); outline-offset: 3px; }
.g-check .txt b { display: block; font-size: 17px; font-weight: 500; color: var(--oxford); transition: color .2s; }
.g-check .txt > span { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.g-check input:checked ~ .txt b { color: var(--ink-2); }
.g-check-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.g-check-bar strong { font-weight: 500; color: var(--oxford); }
.g-check-bar button { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Who's travelling: plain subsections separated by rules */
.g-who { margin-top: 8px; }
.g-who section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.g-who section:first-child { border-top: 1px solid var(--line); }

/* Steps: a real sequence, so real numbers */
.g-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s; }
.g-steps li { counter-increment: s; display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.g-steps li::before { content: counter(s); font-size: 30px; font-weight: 300; line-height: 1.05; color: var(--blue); }
.g-steps b { display: block; font-weight: 500; color: var(--oxford); }

/* Plain list of points, each with a bold opening */
.g-points { margin: 18px 0 0; padding: 0; list-style: none; }
.g-points li { padding: 15px 0; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.g-points li:last-child { border-bottom: 1px solid var(--line); }
.g-points b { font-weight: 500; color: var(--oxford); }

/* Replica of the EU refusal form (Annex VI) */
.rf { margin: 26px 0 10px; border: 1px solid #C9D3E2; border-radius: 4px; background: #FCFDFE; box-shadow: 0 1px 0 #E6ECF4, 0 24px 48px -36px rgba(11, 33, 71, .45); }
.rf-head { display: grid; gap: 2px; padding: 18px 22px 15px; border-bottom: 1px solid #C9D3E2; }
.rf-head b { font-size: 16px; font-weight: 600; color: var(--oxford); }
.rf-head span { font-size: 13.5px; color: var(--muted); }
.rf-list { margin: 0; padding: 6px 0 10px; list-style: none; }
.rf-row, .rf-list summary { display: grid; grid-template-columns: 26px 22px minmax(0, 1fr) 16px; gap: 12px; align-items: start; padding: 9px 22px; font-size: 15.5px; line-height: 1.6; }
.rf-row { color: #8A93A7; }
.rf-n { padding-top: 1px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.rf-box { position: relative; width: 20px; height: 20px; margin-top: 3px; border: 1.5px solid #8F9BB2; border-radius: 3px; background: #fff; }
.rf-box svg { position: absolute; left: -2px; top: -7px; width: 28px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; transition: stroke-dashoffset .35s ease; }
.rf-list details { border-radius: 2px; }
.rf-list details[open] { background: #F2F6FB; }
.rf-list details[open] .rf-box svg { stroke-dashoffset: 0; }
.rf-list summary { cursor: pointer; list-style: none; color: var(--oxford); }
.rf-list summary::-webkit-details-marker { display: none; }
.rf-list summary::after { content: "+"; font-size: 21px; font-weight: 300; line-height: 1.1; color: var(--blue); }
.rf-list details[open] summary::after { content: "\2013"; }
.rf-list summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.rf-often { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 99px; background: var(--oxford); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.rf-explain { display: grid; gap: 12px; padding: 2px 22px 18px 82px; }
.rf-explain h4 { margin: 0 0 2px; font-size: 13.5px; font-weight: 500; color: var(--blue); }
.rf-explain p { margin: 0 !important; font-size: 15.5px !important; line-height: 1.75 !important; }
.rf-foot { padding: 12px 22px 16px; border-top: 1px solid #C9D3E2; font-size: 13.5px; color: var(--muted); }
@media (max-width: 600px) {
  .rf-row, .rf-list summary { grid-template-columns: 20px 20px minmax(0, 1fr) 14px; gap: 10px; padding: 9px 14px; font-size: 15px; }
  .rf-head, .rf-foot { padding-inline: 14px; }
  .rf-explain { padding: 2px 14px 16px 14px; }
}

/* LINE id: @ muted, the n in terracotta, so it reads as marco-n-co */
.lid { font-weight: 600; letter-spacing: .01em; color: var(--oxford); }
.lid i { font-style: normal; color: var(--muted); }
.lid em { font-style: normal; color: var(--terra); }

.g-faq { margin-top: 18px; grid-template-columns: minmax(0, 1fr) !important; }

/* Read next, sources */
.g-next { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); }
.g-next .g-next-k { display: block; font-size: 14px !important; line-height: 1.5 !important; color: var(--muted) !important; }
.g-next a { display: block; margin-top: 4px; font-size: 20px; font-weight: 400; line-height: 1.45; color: var(--oxford); text-decoration: none; }
.g-next a:hover { text-decoration: underline; text-underline-offset: 4px; }
.g-next span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.g-src { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.g-src h2 { margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.g-src ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.g-src p { margin-top: 12px; font-size: 13.5px !important; line-height: 1.7 !important; color: var(--muted) !important; }

@media (prefers-reduced-motion: reduce) {
  .g-check .box svg, .rf-box svg, .g-check .txt b { transition: none; }
}
@media print {
  .site-header, .site-footer, .mobile-bar, .g-ec, .g-pk, .g-fork, .g-rx, .g-pkx, .x-form, .g-check-bar, .g-faq, .g-next, .g-crumbs, .skip { display: none !important; }
  .g-note { float: none; width: auto; margin: 12px 0; }
  .g-body { border-top: 0; }
  body { font-size: 11pt; }
}

/* Refusal form: original wording in the language of the reader's letter, Thai underneath */
.rf-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.rf-lang-k { margin-right: 4px; font-size: 13.5px; font-weight: 500; color: var(--oxford); }
.rf-lang button { appearance: none; padding: 4px 12px; border: 1px solid #C9D3E2; border-radius: 99px; background: #fff; font: 500 13.5px/1.5 var(--font); color: var(--ink-2); cursor: pointer; touch-action: manipulation; }
.rf-lang button:hover { border-color: var(--oxford); }
.rf-lang button[aria-pressed="true"] { border-color: var(--oxford); background: var(--oxford); color: #fff; }
.rf-lang button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rf-where { margin-top: 4px; font-size: 13px !important; color: var(--muted) !important; }
.rf-t { display: grid; gap: 3px; min-width: 0; }
.rf-o { overflow-wrap: anywhere; color: var(--oxford); }
.rf-th { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.rf-row .rf-o { color: #8A93A7; }
.rf-row .rf-th { color: #A3ABBB; }
.g-table .fee-link { display: inline-block; margin-top: 2px; font-weight: 500; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Expert Check, laid out as on the home page: the claim, the counter and the three layers on the left;
   a sample report and the price on the right. It steps out of the reading column to the full guide width,
   so .g-wrap is the size container the panel measures. */
.g-wrap { container-type: inline-size; }
/* a light blue panel calls it out, the same treatment as the home page's samples block (gold stays with the Gold package) */
.g-ec { clear: both; width: 100cqw; margin: 64px 0 0; padding: 36px 40px 40px; border-radius: 28px; background: linear-gradient(160deg, #F1F5FB 0%, #E2EAF6 100%); box-shadow: inset 0 0 0 1px rgba(43, 91, 166, .18); }
.g-ec .ec-layers li:not(:last-child), .g-ec .ec-counter, .g-ec .ec-buy { background: #fff; }
.g-ec .ec-counter .is-no { background: var(--sky); }
/* site.css still carries an older two-row placement for these; here everything flows in its own column */
.g-ec .ec-layers, .g-ec .ec-key, .g-ec .ec-report { grid-column: auto; grid-row: auto; }
.g-ec-head { display: grid; gap: 12px; justify-items: start; margin-bottom: 2px; }
.g-ec .ec-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.g-ec .ec-logo img { height: 34px; }
.g-ec .ec-key { margin: 0; font-size: 13px; color: var(--muted); }
.g-ec h2 { margin: 0; font-weight: 300; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.22; letter-spacing: -.01em; color: var(--oxford); }
.g-ec-lead { max-width: 34em; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.g-ec .ec-counter { justify-self: stretch; }
.g-ec .ec-layers { gap: 8px; }
.g-ec .ec-layers li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 11px 18px 12px; border-radius: 16px; }
.g-ec .ec-layers .ec-k { margin: 0; font-size: 12.5px; }
.g-ec .ec-layers h3 { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.4; color: var(--oxford); }
.g-ec .ec-layers li:last-child h3 { color: #fff; }
.g-ec .ec-report { padding: 18px 22px 14px; }
.g-ec .er-list li { padding: 9px 0 9px 22px; }
.g-ec .er-list .er-feature { margin: 2px -10px; padding: 9px 10px 10px 32px; }
.g-ec .er-list li:last-child { padding-bottom: 2px; }
/* price | why on one row; the button gets its own full-width row until there is room for all three */
.g-ec .ec-buy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 20px; margin: 0; padding: 12px 16px; }
.g-ec .ec-buy .btn { grid-column: 1 / -1; width: 100%; margin: 0; }
@media (min-width: 1200px) {
  .g-ec .ec-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; }
  .g-ec .ec-buy { grid-template-columns: auto minmax(0, 1fr) auto; }
  .g-ec .ec-buy .btn { grid-column: auto; width: auto; padding-inline: 20px; }
}
.g-ec .ec-price strong { font-size: 24px; }
.g-ec .ec-terms { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.g-ec .ec-terms b { font-weight: 600; color: var(--oxford); }
@media (max-width: 959px) {
  .g-ec { padding: 22px 16px 18px; border-radius: 22px; }
  .g-ec .ec-logo { flex-wrap: nowrap; gap: 10px; }
  .g-ec .ec-logo img { height: 26px; }
  .g-ec .ec-key { font-size: 12px; white-space: nowrap; }
  .g-ec h2 { font-size: clamp(25px, 6.6vw, 30px); }
  .g-ec-lead { font-size: 15px; }
  .g-ec .ec-layers li { grid-template-columns: 7.6em minmax(0, 1fr); column-gap: 10px; padding: 9px 14px; }
  .g-ec .ec-layers .ec-k { font-size: 11.5px; }
  .g-ec .ec-layers h3 { font-size: 15px; }
  .g-ec .ec-report { padding: 14px 14px 10px; }
  .g-ec .er-head { flex-wrap: nowrap; }
  .g-ec .er-head b { font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
  .g-ec .er-head span { font-size: 11px; white-space: nowrap; }
  .g-ec .er-case { font-size: 13.5px; }
  .g-ec .er-list .er-feature { margin: 0 -6px; padding: 9px 8px 10px 28px; }
  .g-ec .er-list .er-feature::before { left: 10px; }
  .g-ec .ec-buy { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 12px 14px; }
}

/* The three packages: what you already have decides the package. Gold, the recommended one, wears the gold it has on the home page. */
.g-pk { clear: both; width: 100cqw; margin: 64px 0 0; }
.g-pk-head { display: grid; gap: 8px; max-width: 760px; margin-bottom: 20px; }
.g-pk-head h2 { margin: 0; font-weight: 400; font-size: clamp(24px, 2.7vw, 32px); line-height: 1.3; letter-spacing: -.005em; color: var(--oxford); scroll-margin-top: 100px; text-wrap: balance; }
.g-pk-head p { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.g-pk-base { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 2px; font-size: 15px !important; color: var(--oxford) !important; }
.g-pk-base-k { padding: 2px 10px; border-radius: 999px; background: var(--sky); font-size: 13px; font-weight: 500; color: var(--blue); }
.g-pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.g-pk-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 22px 22px 20px; border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.g-pk-card.is-gold { background: var(--gold-tint); box-shadow: inset 0 0 0 1.5px var(--gold-soft), 0 22px 44px -28px rgba(11, 33, 71, .45); }
.g-pk-top { display: flex; align-items: center; gap: 10px; }
.g-pk-top h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.3; color: var(--oxford); }
.g-pk-badge { padding: 3px 11px; border-radius: 999px; background: var(--gold-soft); color: var(--oxford); font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.g-pk-price { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.g-pk-price b { font-size: 26px; font-weight: 500; color: var(--oxford); }
.g-pk-low { font-size: 13.5px; color: var(--ink-2); }
.g-pk-low b { font-weight: 600; color: var(--oxford); }
.g-pk-dl { display: grid; gap: 12px; margin: 12px 0 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.g-pk-card.is-gold .g-pk-dl { border-top-color: #EEE0C2; }
.g-pk-dl dt { font-size: 13px; font-weight: 500; color: var(--muted); }
.g-pk-dl dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.g-pk-dl ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.g-pk-dl li { position: relative; padding-left: 20px; color: var(--oxford); }
.g-pk-dl li::before { content: ""; position: absolute; left: 1px; top: .52em; width: 10px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.g-pk-card.is-gold .g-pk-dl li::before { border-color: var(--gold); }
.g-pk-card .btn { width: 100%; margin-top: auto; }
.g-pk-foot { margin-top: 14px; font-size: 13.5px !important; line-height: 1.65 !important; color: var(--muted) !important; }
.g-pk-foot a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 959px) {
  .g-pk-grid { grid-template-columns: minmax(0, 1fr); }
  .g-pk-card { padding: 18px 18px 16px; }
}
@media (max-width: 559px) {
  /* inside the blue panel a phone has less room: each layer's label sits above its title */
  .g-ec .ec-layers li { grid-template-columns: minmax(0, 1fr); row-gap: 1px; }
  .g-ec .ec-layers h3 { grid-column: 1; }
}

/* Check or prepare: one question, two answers. The verb carries the choice, so it is the word that is marked:
   blue for ตรวจ (the Expert Check panel), gold for เตรียม (the packages, led by Gold). */
/* (the ตรวจ / เตรียม highlight, mark.g-hl, is in site.css: the home page uses it too) */
.g-ec, .g-pk, .g-rx, .g-pkx { scroll-margin-top: 84px; }
.g-fork { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 56px 0 0; }
.g-fork-q { grid-column: 1 / -1; margin-bottom: 4px; font-size: 20px; font-weight: 500; line-height: 1.45; color: var(--oxford); }
.g-fork-opt { position: relative; display: grid; gap: 3px; align-content: start; padding: 16px 46px 17px 18px; border-radius: 18px; color: var(--oxford); text-decoration: none; transition: transform .2s ease; }
.g-fork-opt.is-check { background: linear-gradient(160deg, #F1F5FB 0%, #E2EAF6 100%); box-shadow: inset 0 0 0 1px rgba(43, 91, 166, .18); }
.g-fork-opt.is-prep { background: var(--gold-tint); box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
.g-fork-opt::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .5; }
.g-fork-opt:hover { transform: translateY(-1px); }
.g-fork-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.g-fork-k { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.g-fork-opt b { font-size: 19px; font-weight: 500; line-height: 1.45; }
.g-fork-p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.g-fork + .g-ec { margin-top: 14px; }
@media (max-width: 600px) {
  .g-fork { grid-template-columns: minmax(0, 1fr); }
  .g-fork-q { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .g-fork-opt { transition: none; } }

/* Expert Check page: the claim and the three-question form side by side; on phones the form comes straight after the claim */
.x-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "intro form" "more form"; grid-template-rows: auto 1fr; gap: 24px 64px; align-items: start; padding: 28px 0 8px; }
.x-intro { grid-area: intro; display: grid; gap: 18px; justify-items: start; padding-top: 10px; }
.x-more { grid-area: more; display: grid; gap: 14px; }
.x-form { grid-area: form; }
.x-intro .ec-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.x-intro .ec-logo img { height: 34px; }
.x-intro .ec-key { margin: 0; font-size: 13px; color: var(--muted); }
.x-hero h1 { font-weight: 300; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.2; letter-spacing: -.012em; color: var(--oxford); }
.x-lead { max-width: 32em; font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.8; color: var(--ink-2); text-wrap: pretty; }
.x-facts { display: grid; max-width: 38em; margin: 0; padding: 0; list-style: none; }
.x-facts li { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 2px 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.x-facts li:last-child { border-bottom: 1px solid var(--line); }
.x-facts b { font-weight: 500; color: var(--oxford); }
.x-alt { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.x-alt a { font-weight: 500; color: var(--oxford); text-decoration: none; }
.x-alt a:hover { text-decoration: underline; text-underline-offset: 4px; }

.x-form { display: grid; gap: 16px; padding: 24px 24px 20px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -36px rgba(11, 33, 71, .45); scroll-margin-top: 80px; }
.x-form h2 { font-size: 22px; font-weight: 500; line-height: 1.35; color: var(--oxford); }
.x-form-sub { margin-top: -10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.x-qs { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
.x-qs > li { counter-increment: q; display: grid; gap: 7px; min-width: 0; }
.x-q { display: flex; align-items: center; gap: 9px; padding: 0; font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--oxford); }
.x-q::before { content: counter(q); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sky); font-size: 12.5px; font-weight: 600; color: var(--blue); }
.x-q small { font-size: 13px; font-weight: 400; color: var(--muted); }
.x-dates { min-width: 0; margin: 0; padding: 0; border: 0; }
.x-dates legend { margin-bottom: 7px; }
.x-dates-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.x-dates-row label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.x-form select, .x-form input[type="date"] { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #C9D3E2; border-radius: 12px; background-color: #fff; font: inherit; font-size: 16px; color: var(--oxford); }
.x-form select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230B2147' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
.x-form input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
.x-form select:focus-visible, .x-form input:focus-visible, .x-step button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.x-form [aria-invalid="true"] { border-color: #C44034; }
.x-hint { padding: 8px 11px; border-radius: 10px; background: rgba(214, 156, 30, .12); font-size: 13.5px; line-height: 1.55; color: #6E4E0C; }
.x-pax { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.x-step { display: inline-grid; grid-template-columns: 46px 58px 46px; height: 46px; border: 1px solid #C9D3E2; border-radius: 12px; overflow: hidden; }
.x-step button { appearance: none; padding: 0; border: 0; background: var(--soft); font: 400 22px/1 var(--font); color: var(--oxford); cursor: pointer; touch-action: manipulation; }
.x-step button:disabled { color: #B9C2D0; cursor: default; }
.x-step input { width: 100%; min-width: 0; border: 0; border-inline: 1px solid #C9D3E2; border-radius: 0; background: #fff; font: inherit; font-size: 17px; font-weight: 500; text-align: center; color: var(--oxford); -moz-appearance: textfield; }
.x-step input::-webkit-inner-spin-button, .x-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.x-price { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.x-price b { font-weight: 600; color: var(--oxford); }
.x-price s { color: var(--muted); }
.x-price em { font-style: normal; font-weight: 500; color: var(--blue); }
.x-group { width: fit-content; margin: 0; padding: 6px 11px; border-radius: 10px; background: var(--sky); font-size: 13.5px; line-height: 1.5; color: var(--oxford); }
.x-group b { font-weight: 600; }
.x-preview { width: 100%; padding: 12px 14px 14px; border-radius: 16px; background: var(--soft); box-shadow: none; }
.x-preview .vg-head { margin-bottom: 10px; padding-bottom: 8px; }
.x-preview .vg-head span { font-size: 12px; }
.x-preview .bubble { max-width: 94%; white-space: pre-line; font-size: 13.5px; line-height: 1.6; }
.x-preview .bubble i { font-style: normal; opacity: .55; }
.x-err { padding: 8px 11px; border-radius: 10px; background: rgba(196, 64, 52, .08); font-size: 14px; font-weight: 500; color: #A3342A; }
.x-send { width: 100%; }
.x-note { font-size: 12.5px; line-height: 1.55; text-align: center; color: var(--muted); }

.x .g-ec { margin-top: 80px; }
.x-how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 64px; margin-top: 80px; }
.x-how h2, .x-faq h2 { margin: 0 0 12px; font-weight: 400; font-size: clamp(24px, 2.7vw, 32px); line-height: 1.3; color: var(--oxford); }
.x-how .g-steps { margin-top: 0; }
.x-tiers { margin-top: 0; }
.x-tiers tbody th { width: auto; }
.x-tiers th small { display: block; font-weight: 400; color: var(--muted); }
.x-tiers td { white-space: nowrap; }
.x-tiers td b { font-weight: 500; color: var(--oxford); }
.x-tiers td small { display: inline; margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--blue); }
.x-small { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.x .g-pk, .x .g-pkx { margin-top: 80px; }
.x-faq { max-width: 760px; margin-top: 80px; }
.x-next { max-width: 760px; }
.x-next a + a { margin-top: 10px; }
@media (max-width: 959px) {
  .x-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "more"; gap: 22px; padding-top: 18px; }
  .x-intro { gap: 14px; padding-top: 0; }
  .x-intro .ec-logo img { height: 28px; }
  .x-facts li { grid-template-columns: minmax(0, 1fr); }
  .x-how { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 56px; }
  .x .g-ec, .x .g-pk, .x .g-pkx, .x-faq { margin-top: 56px; }
}
@media (max-width: 600px) {
  .x-form { padding: 18px 16px 16px; border-radius: 20px; }
}
/* the home page's "Expert Check Free" chip, sitting in a line of text */
.g-fork-p .pk-ec, .g-pk-base .pk-ec { vertical-align: 1px; white-space: nowrap; }
.g-fork-p .pk-ec { margin-left: 4px; background: #fff; }
/* "Read next": a word kept whole inside a link title stays in the line (the block style is for the description under it) */
.g-next a .nw, .g-next span .nw { display: inline; margin: 0; font-size: inherit; color: inherit; }

/* Refusal page, path two: Gold + Refusal Rescue as one offer, priced as its two parts.
   Gold-tinted like the "เตรียม" answer that points here, right under the blue Expert Check panel (the "ตรวจ" answer). */
.g-rx { clear: both; width: 100cqw; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px 40px; align-items: center; margin: 16px 0 0; padding: 32px 40px 34px; border-radius: 28px; background: linear-gradient(160deg, #FFFDF8 0%, var(--gold-tint) 100%); box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
.g-rx h2 { margin: 0; font-weight: 400; font-size: clamp(26px, 2.7vw, 34px); line-height: 1.3; color: var(--oxford); }
.g-rx-lead { max-width: 36em; margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.g-rx-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.g-rx-parts section { padding: 16px 18px 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #EEE0C2; }
.g-rx-parts h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--oxford); }
.g-rx-parts h3 small { font-size: 13px; font-weight: 500; color: var(--gold); }
.g-rx-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: r; }
.g-rx-steps li { counter-increment: r; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--oxford); }
.g-rx-steps li::before { content: counter(r); display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold-soft); font-size: 11.5px; font-weight: 600; color: #6F5420; }
.g-rx-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.g-rx-list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--oxford); }
.g-rx-list li::before { content: ""; position: absolute; left: 1px; top: .52em; width: 10px; height: 5px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.g-rx-list li.is-ec { padding-left: 0; }
.g-rx-list li.is-ec::before { display: none; }
.g-rx-list li.is-ec .ec-sym { width: 15px; height: 15.6px; margin-right: 5px; vertical-align: -.2em; }
.g-rx-buy { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #EEE0C2, 0 22px 44px -28px rgba(11, 33, 71, .4); }
.g-rx-price { display: grid; gap: 10px; margin: 0; }
.g-rx-price div { display: grid; gap: 1px; }
.g-rx-price div + div { padding-top: 10px; border-top: 1px solid var(--line); }
.g-rx-price dt { font-size: 13px; font-weight: 500; color: var(--muted); }
.g-rx-price dd { margin: 0; font-size: 15px; color: var(--ink-2); }
.g-rx-price b { font-size: 24px; font-weight: 500; color: var(--oxford); }
.g-rx-price small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.g-rx-credit { font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--blue); }
.g-rx-buy .btn { width: 100%; }
.g-rx-alt { font-size: 13px; line-height: 1.55; color: var(--muted); }
.g-rx-alt a { font-weight: 500; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 959px) {
  .g-rx { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 18px; border-radius: 22px; }
  .g-rx-parts { grid-template-columns: minmax(0, 1fr); }
}

/* "โดย Lead Visa Expert" with a verified badge, the blue scalloped tick people know from social profiles */
.g-rx-by { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #EEE0C2; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.g-rx-by b { font-weight: 600; color: var(--oxford); }
.g-rx-price s { margin-right: 4px; font-size: 15px; color: var(--muted); }
.g-rx-deal { margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--gold-soft); color: var(--oxford); font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }

/* The home page's package section, copied in whole (sync_packages.py) and styled by site.css; here it only needs the full width */
/* as wide as on the home page (--max), centred on the guide column, so the cards break their lines the same way */
.g-pkx { --pkx-w: min(var(--max), 100vw - 2 * var(--gutter) - 16px); clear: both; width: max(100cqw, var(--pkx-w)); margin: 72px 0 0 calc((100cqw - max(100cqw, var(--pkx-w))) / 2); }
.g-pkx .pr-head { margin-bottom: 20px; }
.g-pkx .sec-head .lead { margin-top: 2px; }
.g-pkx .diff { display: block; }
.g-pkx-foot { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.g-pkx-foot a { font-weight: 500; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 959px) { .g-pkx { width: 100cqw; margin: 56px 0 0; } }
/* Two cards (UK, Australia: no Platinum, owner 8 Nov 2026): two columns across the full width */
@media (min-width: 960px) { .g-pkx .pk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Country guides: the country's landmark fills the header, built like the home hero card: it spans the page frame,
   starts clipped to the home page's width and opens to the frame as you scroll (guide.js). The words sit on navy at left,
   on the same left edge as the article below (--gw is the guide column's width, measured inside the card). */
.g-head-photo { --gw: min(1100px, 100% + 2 * var(--frame) - 2 * var(--gutter)); --edge: calc(50% - var(--gw) / 2);
  position: relative; isolation: isolate; display: flex; align-items: flex-end; max-width: none; min-height: clamp(420px, 40vw, 560px);
  margin: 14px var(--frame) 0; padding: clamp(32px, 4vw, 56px) 0; border-radius: var(--r-hero); overflow: hidden; background: var(--oxford); color: #fff; }
.g-head-img { position: absolute; top: 0; left: calc(var(--edge) + 460px); z-index: -2; width: calc(100% - var(--edge) - 460px); height: 100%; object-fit: cover; object-position: 50% 30%; }  /* an <img> keeps its own ratio unless given a width */
.g-head-photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--oxford) calc(var(--edge) + 470px), rgba(11, 33, 71, .6) calc(var(--edge) + 600px), rgba(11, 33, 71, 0) calc(var(--edge) + 780px)); }
.g-head-text { width: var(--gw); margin-inline: auto; }
.g-head-text > * { max-width: 640px; }
.g-head-photo h1 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); }
.g-head-photo .g-lead { max-width: 27em; color: rgba(255, 255, 255, .86); font-size: clamp(16px, 1.5vw, 18px); }
.g-head-photo .g-by { color: rgba(255, 255, 255, .72); }
.g-head-photo .g-by b { color: #fff; }
.g-head-photo .g-by img { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.g-head-credit { position: absolute; right: 18px; bottom: 12px; font-size: 11.5px; color: rgba(255, 255, 255, .72); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.g-head-photo + .g-wrap .g-body { border-top: 0; }
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  /* the starting clip, before guide.js takes over (the same formula as the home hero) */
  .g-head-photo { clip-path: inset(0 calc((100% - min(var(--max), 100% + 2 * var(--frame) - 2 * var(--gutter))) / 2) round var(--r-hero)); }
  .g-head-credit { translate: calc((100vw - 2 * var(--frame) - min(var(--max), 100vw - 2 * var(--gutter))) / -2) 0; }
}
@media (max-width: 959px) {
  .g-head-photo { display: block; min-height: 0; padding: min(58vw, 300px) 0 24px; }
  .g-head-img { left: 0; width: 100%; height: min(70vw, 360px); object-position: 50% 25%; }
  .g-head-photo::before { background: linear-gradient(180deg, rgba(11, 33, 71, 0) 0, rgba(11, 33, 71, 0) min(30vw, 150px), var(--oxford) min(66vw, 340px)); }
  .g-head-text { width: auto; margin-inline: 20px; }
  .g-head-photo .g-lead { max-width: none; }
  .g-head-credit { top: 12px; bottom: auto; }
}
@media print {
  .g-head-photo { min-height: 0; margin: 0; padding: 0; background: none; color: inherit; clip-path: none; }
  .g-head-img, .g-head-photo::before, .g-head-credit { display: none; }
  .g-head-photo h1, .g-head-photo .g-lead, .g-head-photo .g-by, .g-head-photo .g-by b { color: #000; }
}
/* The guide column keeps an inset inside the home page's width, so the header's words (aligned with the column)
   always have room inside the photo card: 32px a side on wide screens, 8px more than the page gutter on phones. */
@media (min-width: 960px) {
  .g-wrap { width: min(1100px, 100% - 2 * var(--gutter) - 64px); }
  .g-head-photo { --gw: min(1100px, 100% + 2 * var(--frame) - 2 * var(--gutter) - 64px); }
}
@media (max-width: 959px) {
  .g-wrap { width: calc(100% - 2 * var(--gutter) - 16px); }
  .g-head-text { margin-inline: calc(var(--gutter) - var(--frame) + 8px); }
}

/* Guides index: one card per guide; a country guide shows its landmark, the refusal guide a corner of the refusal form */
.gi-head { max-width: 760px; padding: 30px 0 30px; }
.gi-head h1 { font-weight: 300; font-size: clamp(34px, 5vw, 56px); line-height: 1.16; letter-spacing: -.012em; color: var(--oxford); }
.gi-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 0; padding: 0; list-style: none; }
.gi-card { display: grid; grid-template-rows: auto 1fr; height: 100%; border-radius: 22px; overflow: hidden; background: var(--soft); color: var(--oxford); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s ease; }
.gi-card:hover { box-shadow: inset 0 0 0 1.5px var(--oxford); }
.gi-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.gi-visual { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--oxford); }
.gi-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gi-form { display: grid; align-content: center; gap: 10px; padding: 0 22%; background: linear-gradient(160deg, #F1F5FB 0%, #E2EAF6 100%); }
.gi-row { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 #E6ECF4; font-size: 15px; font-variant-numeric: tabular-nums; color: #8A93A7; }
.gi-row i { width: 18px; height: 18px; border: 1.5px solid #8F9BB2; border-radius: 3px; }
.gi-row.is-on { color: var(--oxford); font-weight: 500; }
.gi-row.is-on i { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.gi-text { display: grid; align-content: start; gap: 6px; padding: 20px 22px 24px; }
.gi-text b { font-size: 19px; font-weight: 500; line-height: 1.45; }
.gi-text > span { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.gi-ec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px; padding: 18px 22px; border-radius: 22px; background: linear-gradient(160deg, #F1F5FB 0%, #E2EAF6 100%); box-shadow: inset 0 0 0 1px rgba(43, 91, 166, .18); color: var(--oxford); text-decoration: none; }
.gi-ec:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
.gi-ec-k { font-size: 16px; font-weight: 600; }
.gi-ec-t { font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 759px) { .gi-list { grid-template-columns: minmax(0, 1fr); } .gi-form { padding: 0 14%; } }

/* a row label with a short qualifier under it (e.g. Italy's money table: "6–10 วัน / ต่อคนต่อวัน") */
.g-table th small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); }

/* Money calculator: trip length and party size in; the minimum per person, the group total and the sum shown out */
.g-calc { display: grid; gap: 14px; margin: 18px 0 14px; padding: 18px 20px 16px; border-radius: 18px; background: var(--sky); }
.g-calc-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.g-calc-in label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--oxford); }
.g-calc-in input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #C9D3E2; border-radius: 12px; background: #fff; font: inherit; font-size: 17px; font-weight: 500; color: var(--oxford); }
.g-calc-in input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.g-calc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g-calc-out p { display: grid; align-content: start; gap: 1px; margin: 0 !important; padding: 12px 14px; border-radius: 14px; background: #fff; font-size: 15px; line-height: 1.5; }
.g-calc-out p[hidden] { display: none; }
.g-calc-out span { font-size: 13.5px; color: var(--ink-2); }
.g-calc-out b { font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--oxford); }
.g-calc-out small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.g-calc-note { font-size: 12.5px !important; line-height: 1.6 !important; color: var(--muted) !important; }
.g-body p.g-funds-ex { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 600px) { .g-calc-out { grid-template-columns: minmax(0, 1fr); } .g-calc { padding: 16px 14px; } }
.g-body p.g-funds-src { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.g-calc-note a, .g-funds-src a { text-underline-offset: 3px; }

/* guides index, grouped (10 Oct 2026): country checklists in 3 columns, represented countries in 4 smaller ones */
.gi-sec { margin-top: 40px; }
.gi-sec:first-of-type { margin-top: 4px; }
.gi-sec h2 { margin: 0 0 6px; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: var(--oxford); }
.gi-sec-lead { max-width: 640px; margin: 0 0 16px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.gi-sec h2 + .gi-list { margin-top: 14px; }
.gi-list.is-3 .gi-text b { font-size: 18px; }
.gi-list.is-small .gi-visual { aspect-ratio: 3 / 2; }
.gi-list.is-small .gi-text { gap: 2px; padding: 14px 16px 18px; }
.gi-list.is-small .gi-text b { font-size: 17px; }
.gi-list.is-small .gi-text > span { font-size: 14.5px; line-height: 1.6; }
@media (min-width: 1024px) { .gi-list.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gi-list.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .gi-list.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* words kept whole inside the sample report (site.css makes every .er-list span a block) */
.er-list span .nw, .er-list b .nw { display: inline; margin: 0; font-size: inherit; color: inherit; }
/* countries A–Z (guides/countries.html, built by content/guides/build/build_countries.py) */
.az-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.az-card { display: grid; gap: 1px; color: var(--oxford); text-decoration: none; }
.az-img { display: block; aspect-ratio: 3 / 2; margin-bottom: 11px; border-radius: 16px; overflow: hidden; background: var(--sky); }
.az-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.az-en { font-size: 19px; font-weight: 500; line-height: 1.35; }
.az-th { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.az-card:hover .az-en { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.az-card:hover .az-img { box-shadow: 0 0 0 2px var(--oxford); }
.az-card:focus-visible { outline: none; }
.az-card:focus-visible .az-img { box-shadow: 0 0 0 3px var(--blue); }
.az-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.az-tag { padding: 3px 10px; white-space: nowrap; border-radius: 999px; background: var(--sky); color: var(--oxford); font-size: 13px; line-height: 1.5; }
.az-tag.is-non { background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold-soft); color: #6B4F1D; }
.az-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; max-width: 1000px; margin: 0 0 34px; }
.az-legend > div { display: grid; align-content: start; gap: 4px; }
.az-legend dt .az-tag { display: inline-block; margin: 0; }
.az-legend dd { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
/* refusal guide under the tiles: its own band, one compact row (.gi-sec:first-of-type would otherwise zero the margin) */
.az .gi-sec.az-ref { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line); }
.az .az-ref h2 { margin-bottom: 16px; }
.az .gi-ec { margin-top: 32px; }
.az .az-ref .gi-list { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
@media (min-width: 640px) {
  .az .az-ref .gi-card { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: none; }
  .az .az-ref .gi-visual { aspect-ratio: auto; height: 100%; min-height: 180px; }
  .az .az-ref .gi-text { align-content: center; padding: 22px 26px; }
}
@media (max-width: 1023px) { .az-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .az-legend { grid-template-columns: minmax(0, 1fr); } .az-tag { font-size: 12.5px; padding: 2px 8px; white-space: normal; } .az-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } .az-en { font-size: 17px; } .az-th { font-size: 14px; } .az-img { margin-bottom: 9px; border-radius: 12px; } }
/* topic guides (built by content/guides/build/build_topic.py) */
.g-scroll { margin: 18px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g-scroll .g-table { margin: 0; }
.g-table.g-wide { min-width: 640px; font-size: 15px; }
.g-table.g-wide tbody th { width: auto; min-width: 120px; color: var(--oxford); font-weight: 500; }
.g-table.g-wide td { padding-right: 14px; }
.g-topic-more { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.g-topic-more a { color: var(--blue); font-weight: 500; text-underline-offset: 3px; }
/* guides list: "คู่มือตามหัวข้อ" (owner's pick B, 11 Oct 2026) */
.az .gi-sec.az-topics { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line); }
.az .az-topics h2 { margin-bottom: 16px; }
.az-topics-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
.az-topics-in > .gi-list { grid-template-columns: minmax(0, 1fr); margin: 0; }
.az-topic-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.az-topic-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--oxford); text-decoration: none; }
.az-topic-list b { font-size: 17px; font-weight: 500; }
.az-topic-list span { grid-column: 1; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.az-topic-list i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 20px; color: var(--blue); }
.az-topic-list a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.az-topic-list a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 760px) { .az-topics-in { grid-template-columns: minmax(0, 1fr); } }

/* Expert Check page: the sample report on three phone screens, then the price card (owner's pick "B", 11 Oct 2026) */
.ph { --pw: 280px; width: var(--pw); flex: none; padding: 10px; border-radius: 48px; background: #111A2C; box-shadow: inset 0 0 0 1.5px #2C3852, 0 34px 60px -34px rgba(11, 33, 71, .6), 0 14px 28px -16px rgba(11, 33, 71, .35); }
.ph-scr { position: relative; overflow: hidden; border-radius: 38px; background: #fff; }
.ph-scr::before { content: ""; position: absolute; z-index: 2; top: 8px; left: 50%; width: calc(var(--pw) * .27); height: 23px; transform: translateX(-50%); border-radius: 14px; background: #111A2C; }
.ph-bar { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 2px 22px 0 28px; background: #fff; color: var(--oxford); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-ic { display: inline-flex; align-items: center; gap: 5px; }
.ph-ic svg { fill: currentColor; }
.ph-shot { display: block; width: 100%; height: auto; }
.ph-home { display: block; width: 34%; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #2C3852; }
.xr { margin: 72px 0 0; }
.xr-in { margin: 0; }   /* inside .g-wrap, which already sets the width and gutter */
.xr h2 { margin: 0 0 10px; font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.25; color: var(--oxford); }
.xr-lead { max-width: 40em; margin: 0 0 30px; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.xr-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.xr-shots figure { display: grid; justify-items: center; gap: 18px; margin: 0; }
.xr-shots figcaption { max-width: 290px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); text-align: center; }
.xr-shots figcaption b { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 500; color: var(--oxford); }
.xr-open { margin: 26px 0 0; font-size: 15px; text-align: center; }
.xr-open a { color: var(--blue); font-weight: 500; }
.g-ec.xr-buy { max-width: 560px; margin: 28px auto 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.g-ec.xr-buy::before, .g-ec.xr-buy::after { content: none; }
.g-ec.xr-buy .ec-buy { border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 860px) {
  .xr-shots { display: flex; gap: 18px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .xr-shots::-webkit-scrollbar { display: none; }
  .xr-shots li { flex: 0 0 268px; scroll-snap-align: center; }
  .xr-shots .ph { --pw: 248px; }
}