/* Use-case pages: /visa-limits, /residency-thresholds, /travel-history.

   Marketing surfaces, not reference reading, so they take the default `.medium`
   wash rather than `.wash-subtle`. Layout only. Palette, wash, and card fills
   come from tokens.css, which is loaded first.

   The `.device` frame block is duplicated from home.css on purpose: home.css is
   not loaded here, and the two files are the only places an iPhone frame
   appears. Every number is measured off assets/home/iphone-frame-blue.webp
   (980x2000, hole 880x1912 at 50,44). If that asset is replaced, both copies
   move together. See the longer comment in home.css for why the corner radius
   is deliberately squarer than the hole. */

/* Base typography. tokens.css carries palette and wash only, and there is no
   shared base stylesheet, so every page variant sets its own the way
   legal.css does. Without this the page falls back to the browser's serif. */
/* The radius scale lives in each layout stylesheet, not in tokens.css, which
   carries palette and wash only. Without these every `var(--radius-*)` below
   resolves to nothing, the whole border-radius declaration is dropped, and the
   buttons and cards come out square. Values match home.css. */
:root {
  --max: 1060px;
  --radius-card: 24px;
  --radius-button: 16px;
  --radius-control: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
img { max-width: 100%; display: block; }

main#main-content {
  padding: 0 0 20px;
}

.uc-hero,
.uc-problem,
.uc-blocks,
.uc-limits,
.uc-next,
.uc-cta {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.uc-hero {
  padding: 46px 0 10px;
  max-width: 62ch;
  margin-inline: auto;
}
.uc-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.uc-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.uc-hero .lede {
  font-size: clamp(1.04rem, 1.5vw, 1.2rem);
  color: var(--muted);
  margin: 0 0 26px;
}
.uc-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.uc-problem {
  max-width: 62ch;
  margin-inline: auto;
  padding: 26px 0 8px;
}
.uc-problem h2,
.uc-limits h2,
.uc-next h2,
.uc-cta h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.uc-problem p {
  color: var(--muted);
  margin: 0 0 14px;
}

.uc-blocks {
  display: grid;
  gap: 22px;
  padding: 34px 0;
}
.uc-block {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  box-shadow: var(--shadow);
}
/* Alternating sides stop three stacked blocks reading as a list of the same
   thing. The shot moves, not the copy, so reading order stays copy-second. */
.uc-block:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.uc-block:nth-child(even) .uc-shot {
  order: 2;
}
.uc-copy h3 {
  font-size: clamp(1.16rem, 1.7vw, 1.45rem);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.uc-copy p {
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 54ch;
}
.uc-copy p:last-child {
  margin-bottom: 0;
}

.uc-limits {
  max-width: 62ch;
  margin-inline: auto;
  padding: 8px 0 12px;
  border-left: 3px solid var(--blue);
  padding-left: 18px;
}
.uc-limits p {
  color: var(--muted);
  margin: 0;
}

.uc-next {
  max-width: 62ch;
  margin-inline: auto;
  padding: 40px 0 8px;
}
.uc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.uc-links a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--muted);
  font-size: 0.93rem;
}
.uc-links a:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.uc-cta {
  max-width: 62ch;
  margin-inline: auto;
  margin-top: 44px;
  margin-bottom: 60px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--blue-soft);
  text-align: center;
}
.uc-cta p {
  color: var(--muted);
  margin: 0 0 18px;
}

/* Buttons, matching the homepage. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: var(--radius-button);
  font-weight: 650;
  border: 1px solid transparent;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--action-gradient);
  box-shadow: var(--action-chrome);
  color: #fff;
}
.btn-primary:active {
  transform: scale(0.985);
  filter: brightness(0.95);
}
.btn-secondary {
  background: var(--bg-card);
  border-color: var(--line);
  color: var(--text);
}

/* iPhone frame. See the header comment. */
.device {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 980 / 2000;
  filter: var(--device-shadow);
}
.device-screen {
  position: absolute;
  top: 2.2%;
  bottom: 2.2%;
  left: 5.102%;
  right: 5.102%;
  overflow: hidden;
  border-radius: 13.636% / 6.276%;
  background: #000;
}
.device-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.device-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.device-screen .shot-light { display: none; }
html[data-theme="light"] .device-screen .shot-dark { display: none; }
html[data-theme="light"] .device-screen .shot-light { display: block; }

@media (max-width: 820px) {
  .uc-block,
  .uc-block:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
  }
  .uc-block:nth-child(even) .uc-shot { order: 0; }
  .uc-shot {
    width: min(230px, 62%);
    margin-inline: auto;
  }
  .uc-copy p { max-width: none; }
}

@media (max-width: 620px) {
  .uc-hero { padding-top: 30px; }
  .uc-actions .btn { width: 100%; }
  .uc-cta { padding: 22px; }
}