/* Camino Prep — homepage styles
   Depends on tokens.css for all custom properties. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--paper-050);
  color: var(--text-900);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; background: none; border: none; cursor: pointer; }

.shell { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }

/* A quiet nod to aprovare.pt's flag stripe above its header, done in our
   own sunrise-to-horizon palette instead of a flag's colors. */
.brand-stripe { height: 3px; background: linear-gradient(90deg, var(--ascent-600), var(--dawn-500), var(--horizon-500)); }

.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0;
  background: var(--ink-900); color: var(--paper-050);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); z-index: 100;
}
.skip-link:focus { inset-inline-start: var(--space-3); top: var(--space-3); }

:focus-visible { outline: 2px solid var(--horizon-500); outline-offset: 3px; border-radius: var(--radius-sm); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ascent-600);
  margin-bottom: var(--space-3);
}
.eyebrow--on-ink { color: var(--dawn-300); }

.section__title {
  font-size: var(--fs-800);
  font-weight: 600;
  letter-spacing: -.01em;
  max-width: 24ch;
  margin-bottom: var(--space-6);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .75em 1.4em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-400);
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn--lg { padding: .9em 1.7em; font-size: var(--fs-500); }
.btn--sm { padding: .5em 1.1em; font-size: var(--fs-300); }

.btn--primary { background: var(--ascent-500); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--dawn-500); transform: translateY(-2px); box-shadow: var(--shadow-glow); }

.btn--ghost { background: transparent; color: var(--text-900); border: 1.5px solid var(--border-200); }
.btn--ghost:hover { background: var(--paper-100); }

.btn--ghost-on-ink { background: transparent; color: var(--text-on-ink-high); border: 1.5px solid var(--border-on-ink); }
.btn--ghost-on-ink:hover { background: rgba(255, 248, 240, .08); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 240, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-100);
}
.header-inner {
  display: flex; align-items: center; gap: var(--space-5);
  height: 76px;
}

.brand { display: flex; align-items: center; gap: .6rem; margin-inline-end: auto; }
.brand__mark { flex: none; }
.brand__word { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; display: inline-flex; align-items: baseline; gap: .35em; }
.brand__camino { font-style: italic; font-weight: 600; color: var(--ink-900); }
.brand__prep { font-family: var(--font-body); font-weight: 800; font-size: .52em; letter-spacing: .14em; text-transform: uppercase; color: var(--ascent-600); }

.site-nav { display: flex; gap: var(--space-4); }
.site-nav a {
  font-weight: 500; font-size: var(--fs-300); color: var(--text-600);
  position: relative; padding-block: .3em;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-inline-end: 100%; bottom: 0; height: 2px;
  background: var(--ascent-500); transition: inset-inline-end var(--dur-med) var(--ease-out);
}
.site-nav a:hover { color: var(--ink-900); }
.site-nav a:hover::after { inset-inline-end: 0; }

.nav-dropdown { position: relative; display: flex; }
.nav-dropdown__trigger {
  font: inherit; font-weight: 500; font-size: var(--fs-300); color: var(--text-600);
  background: none; border: none; padding-block: .3em; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-dropdown__trigger:hover { color: var(--ink-900); }
.nav-dropdown__panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + .6rem); inset-inline-start: 0; min-width: 190px;
  background: var(--paper-000); border: 1px solid var(--border-100);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-2); z-index: 60;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel { display: flex; }
.nav-dropdown__panel a {
  padding: .5em .7em; border-radius: var(--radius-sm);
  font-size: var(--fs-300); font-weight: 500; color: var(--text-900); white-space: nowrap;
}
.nav-dropdown__panel a:hover { background: var(--paper-100); }

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Profile chip / account menu ---------- */
.profile-chip {
  display: flex; align-items: center; gap: .5em;
  padding: .4em; border-radius: var(--radius-pill);
  color: var(--text-600); background: none; border: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.profile-chip:hover { background: var(--paper-100); color: var(--ink-900); }
.profile-chip[hidden], .profile-menu[hidden] { display: none; }
.profile-chip__icon { flex: none; }
.profile-chip__name { font-size: var(--fs-300); font-weight: 600; padding-inline-end: .3em; }

.profile-chip--anon { position: relative; }
.profile-chip--anon::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0;
  background: var(--ink-900); color: var(--text-on-ink-high);
  font-size: var(--fs-200); font-weight: 600; white-space: nowrap;
  padding: .4em .7em; border-radius: var(--radius-sm);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.profile-chip--anon:hover::after, .profile-chip--anon:focus-visible::after { opacity: 1; transform: translateY(0); }

.profile-menu { position: relative; }
.profile-menu__panel {
  position: absolute; top: calc(100% + .6rem); inset-inline-end: 0; min-width: 160px;
  background: var(--paper-000); border: 1px solid var(--border-100);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-2); z-index: 60;
}
.profile-menu__item {
  display: block; width: 100%; text-align: start;
  padding: .6em .8em; border-radius: var(--radius-sm);
  font-size: var(--fs-300); font-weight: 500; color: var(--text-900);
  background: none; border: none; cursor: pointer;
}
.profile-menu__item:hover { background: var(--paper-100); }

/* ---------- Header search ---------- */
.header-search { position: relative; width: 260px; flex: none; }
.header-search__form {
  display: flex; align-items: center; gap: .5em;
  background: var(--paper-000); border: 1.5px solid var(--border-300, rgba(11, 18, 32, 0.28));
  border-radius: var(--radius-pill); padding: .5em .9em;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.header-search__form:has(.header-search__input:focus) { border-color: var(--ascent-500); }
.header-search__icon { flex: none; color: var(--text-600); }
.header-search__input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: var(--fs-300); font-weight: 500; color: var(--text-900);
}
.header-search__input::placeholder { color: var(--text-600); }
.header-search__results {
  position: absolute; top: calc(100% + .6rem); inset-inline-start: 0; inset-inline-end: 0;
  background: var(--paper-000); border: 1px solid var(--border-100);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  max-height: 360px; overflow-y: auto; z-index: 60;
}
.header-search__result {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: .65em 1em; font-size: var(--fs-300);
}
.header-search__result:hover, .header-search__result--active { background: var(--paper-100); }
.header-search__result-label { font-weight: 600; color: var(--text-900); }
.header-search__result-meta { font-size: var(--fs-200); color: var(--text-400); white-space: nowrap; flex: none; }
.header-search__empty { padding: .85em 1em; font-size: var(--fs-300); color: var(--text-400); }

.header-search-toggle { display: none; padding: .5rem; color: var(--text-900); flex: none; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }

.mobile-nav {
  display: none; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-5);
  background: var(--paper-050); border-bottom: 1px solid var(--border-100);
}
.mobile-nav a { padding: .6rem 0; font-weight: 500; color: var(--text-600); }
.mobile-nav .btn { align-self: flex-start; margin-top: var(--space-2); }

.mobile-nav__calendar summary { padding: .6rem 0; font-weight: 500; color: var(--text-600); cursor: pointer; }
.mobile-nav__calendar a { padding: .5rem 0 .5rem 1rem; font-size: var(--fs-300); }

.site-header.is-open .mobile-nav { display: flex; }
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Background photo: Quang Nguyen Vinh, "Mountain ridge overlooking sea of
   clouds during golden hour" — pexels.com/photo/3232538, Pexels License
   (free to use, no attribution required). */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink-900) center/cover no-repeat url('/static/marketing/hero-bg.jpg');
  color: var(--text-on-ink-high);
  padding-block: var(--space-8) var(--space-7);
}
.hero__atmosphere {
  position: absolute; inset: -10% -10% 0;
  background:
    radial-gradient(60% 50% at 85% 100%, rgba(255, 182, 39, .28), transparent 70%),
    radial-gradient(45% 40% at 20% 110%, rgba(255, 106, 61, .22), transparent 70%),
    linear-gradient(100deg, rgba(11, 18, 32, .88) 0%, rgba(11, 18, 32, .74) 38%, rgba(11, 18, 32, .34) 68%, rgba(11, 18, 32, .16) 100%),
    linear-gradient(to top, rgba(11, 18, 32, .55), transparent 55%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 780px; }

/* App screenshot collage, overlaid on the hero photo's right side where the
   .hero__atmosphere gradient is lightest. 1280px was too high a cutoff --
   plenty of real browser windows (non-maximized, split-screen, smaller
   laptop panels) sit well under that and never saw the collage at all
   (reported 2026-10-16). 1040px plus a narrower text column and collage
   still leaves clearance at the low end without crowding the headline. */
.hero__shots { display: none; pointer-events: none; }
@media (min-width: 1040px) {
  /* margin-inline:auto (inherited from .shell, same element) centers
     hero__inner within the full .hero width once its own narrower
     max-width wins the cascade -- without killing that here, the text
     column drifts toward center as the viewport shrinks and collides with
     the right-anchored collage well before 1040px's low end. */
  .hero__inner { max-width: 440px; margin-inline: 0; }
  .hero__shots {
    display: block; position: absolute; z-index: 1;
    inset-block: 0; inset-inline-end: 1%; width: min(40%, 500px);
  }
}
.hero__shot {
  position: absolute; width: 100%; height: auto;
  filter: drop-shadow(0 24px 40px rgba(5, 9, 18, .45));
  opacity: 0; transform: translateY(26px) rotate(var(--rot, 0deg));
  animation: shotRise var(--dur-slow) var(--ease-out) forwards;
}
/* The phone is the anchor shot (a full, in-context app screen, including
   its own ranking card) -- the other two, tightly-cropped UI detail cards,
   fan out beside it. No separate leaderboard card: the phone screen already
   shows "Your ranking", so a second copy of it floating next to the phone
   just read as a duplicate/mistake rather than a second data point. */
.hero__shot--phone { width: 44%; top: 2%; inset-inline-start: 0; --rot: -5deg; z-index: 1; animation-delay: .45s; filter: drop-shadow(0 30px 54px rgba(5, 9, 18, .5)); }
.hero__shot--analytics { width: 54%; top: 6%; inset-inline-end: 0; --rot: -6deg; z-index: 2; animation-delay: .64s; }
.hero__shot--quiz { width: 50%; top: 58%; inset-inline-end: 4%; --rot: -3deg; z-index: 2; animation-delay: .96s; }

@keyframes shotRise { to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } }

.hero__headline {
  font-size: var(--fs-900); font-weight: 600; letter-spacing: -.015em;
  margin-bottom: var(--space-4);
  opacity: 0; transform: translateY(14px);
  animation: rise var(--dur-slow) var(--ease-out) .05s forwards;
}
.hero__headline em { font-style: italic; font-weight: 500; color: var(--dawn-300); }

.hero__sub {
  font-size: var(--fs-500); color: var(--text-on-ink-mid); max-width: 56ch;
  margin-bottom: var(--space-5);
  opacity: 0; transform: translateY(14px);
  animation: rise var(--dur-slow) var(--ease-out) .18s forwards;
}

.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); opacity: 0; transform: translateY(14px); animation: rise var(--dur-slow) var(--ease-out) .3s forwards; }
.hero__microcopy { font-size: var(--fs-300); color: var(--text-on-ink-mid); margin-bottom: var(--space-5); opacity: 0; animation: appear var(--dur-med) var(--ease-out) .42s forwards; }

@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes appear { to { opacity: 1; } }

/* ---------- Facts strip ---------- */
.strip { background: var(--paper-100); border-bottom: 1px solid var(--border-100); }
.strip__inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-block: var(--space-5);
}
.fact { display: flex; flex-direction: column; gap: .3rem; text-align: center; border-inline-start: 1px solid var(--border-200); padding-inline: var(--space-4); }
.fact:first-child { border-inline-start: none; }
.fact__num { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-700); color: var(--ink-900); }
.fact__num--feature { font-size: var(--fs-500); }
.fact__label { font-size: var(--fs-300); color: var(--text-600); }

/* ---------- Generic section ---------- */
.section { padding-block: var(--space-8); }

/* ---------- Steps ---------- */
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.step {
  position: relative; padding: var(--space-5) var(--space-4) var(--space-4);
  border-radius: var(--radius-lg); background: var(--paper-000); border: 1px solid var(--border-100);
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ascent-500); color: var(--ink-900);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-400);
  margin-bottom: var(--space-3);
}
.step h3 { font-size: var(--fs-500); margin-bottom: var(--space-2); }
.step p { color: var(--text-600); font-size: var(--fs-300); }

/* ---------- Countries ---------- */
.country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.country-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--paper-000); border: 1px solid var(--border-100);
  border-top: 4px solid var(--accent);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.country-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.country-card__head { display: flex; align-items: center; gap: .55em; }
.country-card__flag { font-size: 1.7rem; line-height: 1; flex: none; }
.country-card h3 { font-size: var(--fs-500); line-height: 1.15; }
.country-card__desc { color: var(--text-600); font-size: var(--fs-300); flex: 1; }
.country-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.country-card__cta { font-weight: 600; font-size: var(--fs-300); color: var(--ink-900); }
.country-card__price { font-size: var(--fs-200); color: var(--text-600); font-weight: 600; }

.countries__more { margin-top: var(--space-6); color: var(--text-600); }
.countries__more a { color: var(--horizon-500); font-weight: 600; }
.countries__more a:hover { text-decoration: underline; }

/* ---------- Why ---------- */
.why { background: var(--paper-100); }
.why__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-7); align-items: start; }
.why__intro { position: sticky; top: 100px; }
.why__lede { margin-top: var(--space-3); color: var(--text-600); font-size: var(--fs-500); max-width: 32ch; }
.why__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.why__item { padding: var(--space-4) 0; border-top: 1px solid var(--border-200); }
.why__item h3 { font-size: var(--fs-500); margin-bottom: var(--space-2); }
.why__item p { color: var(--text-600); font-size: var(--fs-300); }

/* ---------- FAQ ---------- */
.faq__list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; margin-top: var(--space-6); }
.faq__item {
  border: 1px solid var(--border-200); border-radius: var(--radius-md);
  background: var(--paper-000); padding: var(--space-4) var(--space-5);
}
.faq__item summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-500); color: var(--ink-900);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-size: 1.4em; line-height: 1; color: var(--text-600); flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { margin-top: var(--space-3); color: var(--text-600); font-size: var(--fs-400); line-height: var(--lh-normal); }
.faq__answer p { margin-bottom: var(--space-3); }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer strong { color: var(--ink-900); }
.faq__answer ol { list-style: decimal outside; margin: 0 0 var(--space-3) 1.3em; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.faq__answer ol li { display: list-item; }

/* ---------- Pricing CTA ---------- */
.pricing { position: relative; overflow: hidden; background: var(--ink-900); color: var(--text-on-ink-high); text-align: center; }
.pricing__atmosphere {
  position: absolute; inset: 0;
  background: radial-gradient(60% 70% at 50% 120%, rgba(255, 106, 61, .45), transparent 70%);
  pointer-events: none;
}
.pricing__inner { position: relative; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.pricing__title { font-size: var(--fs-800); font-weight: 600; margin-bottom: var(--space-3); }
.pricing__sub { color: var(--text-on-ink-mid); font-size: var(--fs-500); margin-bottom: var(--space-5); }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-050); border-top: 1px solid var(--border-100); padding-block: var(--space-6); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand--footer .brand__word { font-size: 1.2rem; }
.footer__countries { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-300); color: var(--text-600); font-weight: 500; }
.footer__countries a:hover { color: var(--ink-900); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-300); color: var(--text-600); font-weight: 500; }
.footer__legal-links a:hover { color: var(--ink-900); }
.footer__legal { width: 100%; font-size: var(--fs-200); color: var(--text-400); margin-top: var(--space-3); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .site-nav, .header-actions { display: none; }
  .nav-toggle { display: flex; }

  /* Search collapses to an icon button; tapping it drops down a full-width
     panel below the header bar instead of permanently reserving header
     width, which is what keeps the mobile header bar itself from growing. */
  .header-search {
    display: none; position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0; width: auto;
    padding: var(--space-3) var(--space-5); background: var(--paper-050);
    border-bottom: 1px solid var(--border-100); box-shadow: var(--shadow-sm);
  }
  .header-search__results { position: static; margin-top: var(--space-3); box-shadow: none; }
  .site-header.search-open .header-search { display: block; }
  .header-search-toggle { display: flex; }

  .why__grid { grid-template-columns: 1fr; }
  .why__intro { position: static; }
  .why__list { grid-template-columns: 1fr; }
  .steps__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .strip__inner { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .fact { border-inline-start: none; border-top: 1px solid var(--border-200); padding-top: var(--space-4); }
  .fact:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 620px) {
  /* Mobile header stays compact — brand + icon buttons only, no nav/search
     reserving height — and the hero's vertical padding is cut down sharply
     (desktop uses --space-8/--space-7, ~7rem/4.5rem) so the fold isn't
     mostly chrome on a phone screen. */
  .header-inner { height: 60px; gap: var(--space-3); }
  .brand__mark { width: 28px; height: 28px; }
  .brand__word { font-size: 1.15rem; }

  .hero { padding-block: var(--space-6) var(--space-5); }
  .hero__headline { margin-bottom: var(--space-3); }
  .hero__sub { margin-bottom: var(--space-4); }
  .hero__ctas { margin-bottom: var(--space-5); }
}

/* PWA install nudge — shown by app/static/pwa/install-prompt.js, hidden
   (attribute) until JS decides the visitor is a real install candidate. */
.pwa-install-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--ink-900);
  color: #fff;
}
.pwa-install-banner__text {
  flex: 1;
  margin: 0;
  font-size: .9rem;
}
.pwa-install-banner__action {
  flex-shrink: 0;
}
.pwa-install-banner__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  opacity: .7;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-1);
}
.pwa-install-banner__dismiss:hover {
  opacity: 1;
}
@media (max-width: 620px) {
  .pwa-install-banner { padding: var(--space-2) var(--space-3); }
  .pwa-install-banner__text { font-size: .82rem; }
}