/* Homepage and free-tool styles (W4). Tokens and shared components (.btn,
   .cchip, .nstep, .rcard, .route, .tabset, .faq, .plan, .tile, .sheet,
   .actbar, .embed) come from app.css. Part 1 is unscoped because tools.js
   also loads this file on blog posts and the tool pages; part 2 is the
   homepage layout, scoped under body.home. */

/* ============================================================ 1. tools */

.tool { display: grid; gap: var(--sp-4); }
.tool > * { min-width: 0; }

/* Flags: one sprite; Liechtenstein is a lettered badge (countries.js). */
.flag { width: var(--flag-w); height: var(--flag-h); border-radius: var(--flag-r); flex: none; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(21, 33, 30, .12); }
.flag--badge { display: inline-grid; place-items: center; font: 700 .5625rem/1 var(--font-body); letter-spacing: .02em; color: var(--ink-2); background: var(--bg-sunken); }

/* Country picker: chips, stepper rows, month link, "+ More" sheet. */
.picker { display: grid; gap: var(--sp-3); }
.picker-head { display: grid; gap: 2px; }
.picker__label { margin: 0; font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-body); color: var(--ink); }
.picker__hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.picker__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.picker__chips .cchip { gap: 6px; }
.cchip__n { font-variant-numeric: tabular-nums; color: var(--c-primary-text); font-weight: var(--fw-semibold); }
.picker__help { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.picker__monthlink {
  justify-self: start; min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--fw-medium) var(--fs-body)/1.3 var(--font-body); color: var(--c-primary-text);
  text-decoration: underline; text-underline-offset: 3px;
}
.picker__monthlink[hidden] { display: none; }
.picker__month .field { max-width: 16rem; }

.picked { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.picked__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; min-height: 48px; }
.picked .nstep input.nstep__val { width: 2rem; }
.picked__country .flag { margin-right: -2px; }
/* Narrow mounts (a blog embed on a phone): drop the "nights" unit so the country name stays readable. */
.picked { container-type: inline-size; }
@container (max-width: 330px) { .picked__row .nstep__unit { display: none; } }
.picked__country { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked__remove {
  width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  font-size: 1.375rem; line-height: 1; color: var(--ink-3);
}
.picked__remove:hover { background: var(--bg-sunken); color: var(--ink); }
.nstep__btn[aria-disabled="true"] { color: var(--ink-4); cursor: default; }
/* app.css's global input[type=number] rule outranks .nstep__val; restore the stepper's value box. */
.nstep input.nstep__val { width: 3rem; min-height: var(--tap); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; font: var(--fw-bold) 1.25rem/1 var(--font-display); font-variant-numeric: tabular-nums; }

.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.sheet__title { margin: 0; font-size: var(--fs-h4); }
.sheet__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); max-height: min(60vh, 26rem); overflow-y: auto; padding: 2px; }
.sheet__empty { margin: var(--sp-3) 0 0; }

/* Answer card extras used by the tools. */
.rcard__tie { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.rcard__empty { margin: 0; color: var(--ink-3); }
.rcard__trust { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); text-align: center; }
.rcard__cta { margin: 0; }
.fact__hint { display: block; margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }
/* Keep each fact's text beside its icon; hints, details and the "Why about?" button wrap below. */
.rcard__facts .fact > .ic + span { flex: 1 1 12rem; min-width: 0; }
.fact--loading span { color: var(--ink-3); }
.fact--fix { color: var(--c-fix-deep); }
.rcard--fix { box-shadow: inset 4px 0 0 var(--c-fix); }
.rcard--tool .rcard__answer { font-size: var(--fs-h3); line-height: var(--lh-heading, 1.2); }
.rcard__method { margin-top: var(--sp-3); }
.rcard--still, .rcard--still .route__pin, .rcard--still .route__line { animation: none; }
.embed__src { margin: 0; font-size: var(--fs-sm); color: var(--ink-4); }

.tool__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; }
.tool__lede { margin: 0; color: var(--ink-2); }
.tool__stay { border: 0; margin: 0; padding: 0; min-width: 0; }

/* 90/180-day calculator */
.calc90__stays { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.calc90__stay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
.calc90__add { justify-self: start; }

/* Rates compare (homepage "Rejection rates by country, 2025") */
.cmp__chips { margin-bottom: var(--sp-3); }
.cmp__chips .cchip[aria-pressed=true] .cchip__code { display: inline; }
.cmp { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.cmp__row { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; border-bottom: 1px solid var(--line-2); }
.cmp__name { font-weight: var(--fw-medium); }
.cmp__rate { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp__rate::before { content: "· "; color: var(--ink-4); }

/* ============================================================ 2. homepage */

.home main > section { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.home .section-head { margin-bottom: var(--sp-6); }
.home .section-head h2 { margin: 0; }
.home .section-head .lede { margin: var(--sp-2) 0 0; max-width: var(--measure); }

/* Hero: the phone first screen fits in 640px (page-specs 2.3). */
.home .hero { padding: var(--sp-5) 0 var(--sp-8); }
.home .hero__grid { display: grid; gap: var(--sp-5); }
.home .hero__copy { display: grid; gap: var(--sp-2); align-content: start; }
.home .hero .eyebrow { margin: 0; font: var(--fw-semibold) var(--fs-xs)/1.4 var(--font-body); letter-spacing: var(--ls-caps, .06em); text-transform: uppercase; color: var(--c-primary-text); }
.home .hero__h { margin: 0; font: var(--fw-bold) 1.75rem/1.15 var(--font-display); letter-spacing: var(--ls-display, -.01em); color: var(--ink); text-wrap: balance; }
.home .hero__sub { margin: 0; font-size: var(--fs-body); color: var(--ink-2); }
.home .hero__why summary {
  display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; list-style: none;
  color: var(--c-primary-text); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px;
}
.home .hero__why summary::-webkit-details-marker { display: none; }
.home .hero__why p { margin: 0 0 var(--sp-2); max-width: var(--measure); color: var(--ink-2); }
.home .hero__tool { gap: var(--sp-3); padding: 0; background: none; box-shadow: none; border: 0; }
/* 8 chips + "+ More" in three rows at 343px: tighter padding and gaps on phones. */
.home .hero__tool .picker__chips { gap: 6px; }
.home .hero__tool .picker__chips .cchip { padding-inline: 7px; gap: 5px; font-size: .9375rem; }
.home .hero__tool .picker__chips .cchip__code { display: none; }
html[data-hero-variant="b"] .home .hero__h { font-size: 1.625rem; }

/* Tiles: what the readiness check looks at. */
.home .tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.home .tile { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); background: var(--bg-raised); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.home .tile p { margin: 0; color: var(--ink-2); }
.home .tile__title { margin: 0; font-size: var(--fs-h4); }
.home .tile .srcl { justify-self: start; min-height: var(--tap); display: inline-flex; align-items: center; }

/* Sample: free vs full. */
.home .sample { padding: var(--sp-4); }
.home .sample__label { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-todo-soft); color: var(--c-todo-deep); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.home .tabset__panel { padding-top: var(--sp-4); display: grid; gap: var(--sp-4); }
.home .tabset__panel[hidden] { display: none; }
.home .sample__h { margin: 0; font-size: var(--fs-h4); }
.home .sample__block { display: grid; gap: var(--sp-2); }
.home .sample__block > p { margin: 0; color: var(--ink-2); }
.home .sample .tasks, .home .sample .lockrows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.home .sample .task__check { visibility: hidden; }
.home .sample .verdict__h { margin: 0; font-size: var(--fs-h3); }
.home .sample__also { margin: 0; color: var(--ink-2); }

/* Prices */
.home .plans { display: grid; gap: var(--sp-4); }
.home .plan__title { margin: 0; font-size: var(--fs-h3); }
.home .plan__price { margin: 0; font: var(--fw-bold) var(--fs-num)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.home .plan__applied { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-primary-soft); color: var(--ink); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.home .plan__group { margin: 0; color: var(--ink-2); font-weight: var(--fw-medium); }
.home .plan__list li::before { content: "\2713"; flex: none; color: var(--c-primary-text); font-weight: var(--fw-bold); }
.home .plan__refund, .home .plan__pay { margin: 0; color: var(--ink-2); }
.home .plan__small { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }
.home .gcalc { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--bg-sunken); }
.home .gcalc[hidden] { display: none; }
.home .gcalc .nstep { justify-self: start; }
.home .gcalc__total { display: block; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--ink); }

/* How it works */
.home .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); counter-reset: none; }
.home .step { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5); }
.home .step p { margin: 0; color: var(--ink-2); }
.home .step__title { margin: 0; font-size: var(--fs-h4); }
.home .step__n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-pill); background: var(--c-primary-soft); color: var(--c-primary-text); font: var(--fw-bold) var(--fs-body)/1 var(--font-display); }
.home .steps__cta { margin: var(--sp-6) 0 0; }

/* Rates */
.home .rates { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.home .rates[hidden] { display: none; }
.home .rates p { margin: 0; }
.home .rates__india { color: var(--ink-2); }

/* Link cards: free tools and blog posts */
.home .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.home .linkcard {
  position: relative; display: grid; gap: var(--sp-1); height: 100%; box-sizing: border-box;
  padding: var(--sp-4) calc(var(--sp-4) + 1.5rem) var(--sp-4) var(--sp-4);
  background: var(--bg-raised); border-radius: var(--r-md); box-shadow: var(--shadow-1);
  color: var(--ink); text-decoration: none;
  transition: box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.home .linkcard:hover { box-shadow: var(--shadow-2); }
.home .linkcard__title { font-weight: var(--fw-semibold); font-size: var(--fs-h4); }
.home .linkcard__text { color: var(--ink-2); }
.home .linkcard__go { position: absolute; right: var(--sp-4); top: var(--sp-4); color: var(--c-primary-text); font-weight: var(--fw-bold); }
.home .cards__more { margin: var(--sp-4) 0 0; }

/* Closing */
.home .closing { padding: var(--band) 0; background: var(--ink); color: var(--ink-inverse); text-align: center; }
.home .closing h2 { margin: 0 0 var(--sp-2); color: var(--ink-inverse); }
.home .closing p { margin: 0 0 var(--sp-5); color: var(--ink-inverse); opacity: .9; }
.home .closing .closing__count { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); }

/* Sticky CTA: phone only (build-plan D18). */
.home .actbar[hidden] { display: none; }
.home .actbar__text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scroll reveal (motion.js): 12px rise, --dur-3; visible by default without JS. */
.js-reveal [data-reveal] { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js-reveal [data-reveal]:not(.in) { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal], .js-reveal [data-reveal]:not(.in) { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 640px) {
  .home .hero__tool { padding: var(--sp-5); background: var(--bg-raised); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
  .home .hero__tool .picker__chips { gap: var(--sp-2); }
  .home .hero__tool .picker__chips .cchip { padding-inline: var(--sp-3); gap: var(--sp-2); font-size: var(--fs-body); }
  .home .hero__tool .picker__chips .cchip__code { display: inline; }
  .home .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .home .actbar { display: none; }
  .home .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .home .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .sample { padding: var(--sp-6); }
}

@media (min-width: 960px) {
  .home .hero { padding: 4.5rem 0 3.5rem; }
  .home .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-16); align-items: start; }
  .home .hero__h { font-size: 2.75rem; line-height: 1.08; }
  html[data-hero-variant="b"] .home .hero__h { font-size: 2.5rem; }
  .home .hero__sub { font-size: var(--fs-lead); }
  .home .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .cards--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home .cards--tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .home .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media print {
  .home .actbar, .home .hero__tool, .home .closing .btn { display: none; }
}