/* ==========================================================================
   pika.insure app shell — login page
   Hand-written equivalents of the Tailwind v4 utilities the reference emits.
   Class names mirror the reference markup so the same selectors resolve on
   both sides in tools/compare.js.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/app/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
  size-adjust: 107.12%;
}
@font-face {
  font-family: F37BoltonFont;
  src: url("/assets/app/f37_bolton_light-s.p.22nq8ayiouvje.otf") format("opentype");
  font-display: swap; font-weight: 300; font-style: normal;
}
@font-face {
  font-family: F37BoltonFont;
  src: url("/assets/app/f37_bolton_regular-s.p.24wb_wzljilbn.otf") format("opentype");
  font-display: swap; font-weight: 400; font-style: normal;
}
@font-face {
  font-family: F37BoltonFont;
  src: url("/assets/app/f37_bolton_medium-s.p.0gx5ij94nd_v9.otf") format("opentype");
  font-display: swap; font-weight: 500; font-style: normal;
}
@font-face {
  font-family: F37BoltonFont;
  src: url("/assets/app/f37_bolton_bold-s.p.0u3by_bezkub2.otf") format("opentype");
  font-display: swap; font-weight: 700; font-style: normal;
}
@font-face {
  font-family: F37BoltonFont;
  src: url("/assets/app/f37_bolton_extrabold-s.p.2o46h28ms9p8s.otf") format("opentype");
  font-display: swap; font-weight: 800; font-style: normal;
}
@font-face {
  font-family: "F37BoltonFont Fallback";
  src: local("Arial");
  ascent-override: 98.89%;
  descent-override: 25.71%;
  line-gap-override: 17.8%;
  size-adjust: 101.13%;
}

/* ---------- tokens ---------- */
:root {
  --font-sans: Helvetica, Arial, sans-serif;
  --font-serif: Helvetica, Arial, sans-serif;

  --background: #f6f6f6;
  --card: #fff;
  --foreground: #191919;
  --muted-foreground: #4e4e4e;
  --primary: #ff5c00;
  --border: #d8dee4;
  --sidebar-border: #d8dee4;
  --accent: #f5f6f7;
  --ring: #ff5c00;
  --destructive: #ef4444;

  --btn-orange: #ff5c00;
  --btn-orange-hover: #ff7d33;
  --btn-orange-active: #ff9d66;
  --btn-orange-shadow: #cc4a00;

  --popover: #fff;
  --popover-foreground: #30313d;
  --accent-foreground: #30313d;
  --radius: 0.625rem;
}

/* ---------- preflight ---------- */
/* Layered so it stays a *reset*. These pages also load /styles.css for the
 * shared site header, whose utilities live in Tailwind's `utilities` layer --
 * unlayered rules here would beat them and strip the header's padding, margins
 * and borders. Inside `base` the cascade resolves the way it should: reset
 * first, utilities on top. The utilities further down this file stay unlayered
 * and so continue to win, which is what the app markup expects. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; line-height: 1.5; font-family: Helvetica, Arial, sans-serif; }
  body { line-height: inherit; background: var(--background); color: var(--foreground); }
  .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, svg { display: block; vertical-align: middle; }
  img { max-width: 100%; height: auto; }
  button, input { font: inherit; color: inherit; background: transparent; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: inherit; }
  h1, h2, h3, h4, h5, h6 {
    font-family: Helvetica, Arial, sans-serif;
    color: var(--foreground);
    letter-spacing: -0.02em;
    line-height: 1;
    font-size: inherit;
    font-weight: inherit;
  }
}

/* ---------- layout primitives ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.mx-auto { margin-inline: auto; }

/* project utilities */
.flex-column { display: flex; flex-direction: column; }
.flex-row-center { display: flex; justify-content: center; align-items: center; }

/* Shared login / quote artwork. Change the option number here to compare the
   three generated forest scenes without touching either page's markup. */
.auth-shell {
  --auth-background-image: url("/assets/app/auth-pika-forest-option-1.webp");
  background-color: var(--background);
  background-repeat: no-repeat;
}
.auth-shell .auth-visual-spacer { display: none; flex: 0 1 24rem; }
@media (min-width: 1024px) {
  .auth-shell .auth-visual-spacer { display: flex; }
  .auth-shell {
    background-image:
      linear-gradient(90deg, rgb(246 246 246 / 62%) 0%, rgb(246 246 246 / 42%) 56%, rgb(246 246 246 / 0%) 78%),
      var(--auth-background-image);
    background-position: center, right center;
    background-size: cover;
  }
}
/* Below lg the artwork used to be dropped altogether, which left a phone with a
 * form floating in an empty grey field. It cannot simply be turned on: cover-
 * cropping a 16:9 painting into a portrait viewport magnifies it to a fragment
 * and puts the form on top of the foliage, on the one page where a mistyped
 * email has to stay readable.
 *
 * So the picture becomes a band along the foot of the shell. It is sized off
 * its own height, so it reads at a natural scale rather than blown up, and
 * anchored right, which is where the pika sits -- a centred crop loses it to
 * the empty sky the desktop scrim is designed to cover.
 *
 * The wash is a second layer given exactly the band's box, so it is opaque
 * where the band starts and clear where the pika is, and the two cannot drift
 * apart however tall the form makes the shell. Sized differently they meet at
 * an edge instead of a dissolve. */
@media (max-width: 1023px) {
  .auth-shell {
    background-image:
      linear-gradient(to bottom,
        var(--background) 0%,
        rgb(246 246 246 / 58%) 34%,
        rgb(246 246 246 / 0%) 74%),
      var(--auth-background-image);
    background-position: bottom center, bottom right;
    background-size: 100% 40vh, auto 40vh;
    background-size: 100% 40svh, auto 40svh;
    /* keeps the centred form clear of the band rather than sitting in it */
    padding-bottom: 32vh;
    padding-bottom: 32svh;
  }
}
/* A landscape phone is the wide-and-short case, and a band across its foot has
 * no height to be a band with -- the picture ends up a thumbnail in the corner.
 * Wide and short is what the desktop treatment is for, so it is used here
 * below lg as well: picture to the right, scrim carrying the form. */
@media (max-width: 1023px) and (max-height: 560px) {
  .auth-shell {
    background-image:
      linear-gradient(90deg, rgb(246 246 246 / 72%) 0%, rgb(246 246 246 / 52%) 56%, rgb(246 246 246 / 0%) 86%),
      var(--auth-background-image);
    background-position: center, right center;
    background-size: cover;
    padding-bottom: 0;
  }
}

/* ---------- sizing ---------- */
/* svh, not vh: on a phone `100vh` is the height with the browser toolbar
   hidden, so a shell held to it is taller than what you can actually see and
   the page scrolls before it has any content to scroll. svh is the toolbar-
   showing height, which is the one that fits. vh stays as the fallback. */
.min-h-screen { min-height: 100vh; min-height: 100svh; }
.min-h-full { min-height: 100%; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.h-14 { height: 3.5rem; }        /* 56px */
.h-6 { height: 1.5rem; }
.h-5 { height: 1.25rem; }
.h-4 { height: 1rem; }
.h-10 { height: 2.5rem; }        /* 40px */
.h-64 { height: 16rem; }         /* 256px */
.w-\[82px\] { width: 82px; }
.w-auto { width: auto; }
.min-h-\[36px\] { min-height: 36px; }
.max-w-6xl { max-width: 72rem; } /* 1152px */
.max-w-3xl { max-width: 48rem; } /* 768px */

/* ---------- spacing ---------- */
.p-8 { padding: 2rem; }
.px-4 { padding-inline: 1rem; }
.px-3 { padding-inline: 0.75rem; }
.py-2 { padding-block: 0.5rem; }
.p-2 { padding: 0.5rem; }
.pb-1 { padding-bottom: 0.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-0\.5 { gap: 0.125rem; }

/* Tailwind v4 space-y-*: margin-block-end on every child but the last, at zero
   specificity via :where() so element rules can still win. */
:where(.space-y-1 > :not(:last-child)) { margin-block-end: 0.25rem; }
:where(.space-y-2 > :not(:last-child)) { margin-block-end: 0.5rem; }
:where(.space-y-3 > :not(:last-child)) { margin-block-end: 0.75rem; }
:where(.space-y-4 > :not(:last-child)) { margin-block-end: 1rem; }

/* ---------- grid (sign-up form) ---------- */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
/* A two-up row that cannot stay two-up on a phone. First and last name are
   short enough to share a line at any width; the row carrying the phone widget
   is not, so it is marked and stacks. */
@media (max-width: 540px) {
  .form-row-stack { grid-template-columns: minmax(0px, 1fr); }
}
.items-stretch { align-items: stretch; }
.self-stretch { align-self: stretch; }
.inline-flex { display: inline-flex; }
.overflow-hidden { overflow: hidden; }
.h-\[21px\] { height: 21px; }
.w-\[31\.5px\] { width: 31.5px; }
.rounded-\[4px\] { border-radius: 4px; }
.size-3\.5 { width: 0.875rem; height: 0.875rem; }
.\[\&\>svg\]\:h-full > svg { height: 100%; }
.\[\&\>svg\]\:w-full > svg { width: 100%; }

/* .PhoneInput / .PhoneInputInput carry no layout rules of their own here — the
   utilities on the elements (`flex items-stretch gap-2`, `w-full min-w-0`)
   fully describe the widget, matching the reference's computed styles. They
   are used only as hooks for the connector hairline further down. */

/* ---------- typography ---------- */
.text-xs { font-size: 0.75rem; line-height: calc(1 / 0.75); }
.text-sm { font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
.text-left { text-align: left; }
.text-base { font-size: 1rem; line-height: calc(1.5 / 1); }
.text-2xl { font-size: 1.5rem; line-height: calc(2 / 1.5); }
.text-\[13px\] { font-size: 13px; }
.leading-snug { line-height: 1.375; }
.leading-none { line-height: 1; }
.leading-\[1\.2\] { line-height: 1.2; }
.tracking-tight { letter-spacing: -0.025em; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-center { text-align: center; }
.whitespace-nowrap { white-space: nowrap; }
.select-none { user-select: none; }

/* ---------- colour ---------- */
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-white { background-color: #fff; }
.bg-btn-orange { background-color: var(--btn-orange); }
.text-white { color: #fff; }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-\[\#191919\] { color: #191919; }

/* ---------- borders ---------- */
.border-b { border-bottom-width: 1px; }
.border { border-width: 1px; }
.border-sidebar-border { border-color: var(--sidebar-border); }
.border-\[\#e1e1e1\] { border-color: #e1e1e1; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-\[12px\] { border-radius: 12px; }

/* ---------- misc ---------- */
.object-contain { object-fit: contain; }
.object-left { object-position: left; }
.outline-none { outline: none; }
.transition-all { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors {
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-\[color\,background-color\,transform\] {
  transition-property: color, background-color, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.duration-75 { transition-duration: 75ms; }
.placeholder\:text-\[\#949494\]::placeholder { color: #949494; }

/* the raised-button "shadow" lip: sits 4px lower than the button face so the
   darker orange shows only along the bottom edge */
.before\:absolute::before { content: ""; position: absolute; }
.before\:inset-x-0::before { left: 0; right: 0; }
.before\:top-1::before { top: 0.25rem; }
.before\:bottom-0::before { bottom: 0; }
.before\:rounded-\[12px\]::before { border-radius: 12px; }
.before\:bg-btn-orange-shadow::before { background-color: var(--btn-orange-shadow); }

/* Tailwind's `[&_svg:not([class*='size-'])]:size-4` — forces icons inside the
   button to 16px, overriding their width/height attributes. Getting this wrong
   shifts the centred label by half a pixel. */
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
.\[\&_svg\]\:shrink-0 svg { flex-shrink: 0; }
.\[\&_svg\]\:pointer-events-none svg { pointer-events: none; }

/* ---------- interaction ---------- */
.hover\:bg-accent:hover { background-color: var(--accent); }
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-btn-orange-hover:hover { background-color: var(--btn-orange-hover); }
.active\:bg-btn-orange-active:active { background-color: var(--btn-orange-active); }
.active\:translate-y-1:active { transform: translateY(0.25rem); }
/* When pressed the face drops 4px. This pseudo-element re-covers the 4px the
   button just vacated so the pointer stays inside the target and the press
   doesn't cancel — it is deliberately transparent, not a visual fill. */
.active\:after\:absolute:active::after {
  content: ""; position: absolute; left: 0; right: 0; top: -0.25rem; height: 0.25rem;
}

/* input focus ring — matches the reference's focus-visible treatment */
input.transition-all:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 50%, white);
}
input[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px #ff8092;
}
.field-error {
  margin-top: 0.5rem;
  color: #b42318;
  font-size: 0.75rem;
  line-height: 1.35;
}
.relative.inline-block:has(:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
  border-radius: 12px;
}

/* disabled treatments */
input:disabled { cursor: not-allowed; background-color: #f6f6f6; opacity: 1; }
button:disabled { pointer-events: none; }
.relative.inline-block:has(:disabled) { opacity: 0.5; pointer-events: none; }

/* ---------- country picker popover ---------- */
.w-\[300px\] { width: 300px; }
.max-h-\[300px\] { max-height: 300px; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.py-1\.5 { padding-block: 0.375rem; }
.py-3 { padding-block: 0.75rem; }
.py-6 { padding-block: 1.5rem; }
.px-2 { padding-inline: 0.5rem; }
.px-3 { padding-inline: 0.75rem; }
.flex-1 { flex: 1 1 0%; }
.ml-auto { margin-left: auto; }
.size-4 { width: 1rem; height: 1rem; }
.opacity-50 { opacity: 0.5; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.z-50 { z-index: 50; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.scroll-py-1 { scroll-padding-block: 0.25rem; }
.cursor-pointer { cursor: pointer; }
.h-full { height: 100%; }
.bg-accent { background-color: var(--accent); }
.text-accent-foreground { color: var(--accent-foreground); }
.rounded-md { border-radius: calc(var(--radius) - 2px); }  /* 8px */
.rounded-sm { border-radius: calc(var(--radius) - 4px); }  /* 6px */
.bg-popover { background-color: var(--popover); }
.bg-transparent { background-color: transparent; }
.text-popover-foreground { color: var(--popover-foreground); }
.shadow-md { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.1); }
.outline-hidden { outline: 2px solid transparent; outline-offset: 2px; }
.border-b { border-bottom-width: 1px; }
.placeholder\:text-muted-foreground::placeholder { color: var(--muted-foreground); }
[data-slot="command-item"][data-selected="true"] { background-color: var(--accent); color: var(--accent-foreground); }
[data-slot="command-item"] svg:not([class*="text-"]) { color: var(--muted-foreground); }
[data-slot="command-item"] svg { pointer-events: none; flex-shrink: 0; }
[data-slot="command-item"] svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
[data-slot="command-item"] { cursor: pointer; }

/* ---------- breakpoints ---------- */
@media (min-width: 768px) {
  .md\:px-10 { padding-inline: 2.5rem; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:flex-row { flex-direction: row; }
  .md\:max-w-md { max-width: 28rem; }   /* 448px */
  .md\:max-w-lg { max-width: 32rem; }   /* 512px */
  .md\:max-w-sm { max-width: 24rem; }   /* 384px */
  .md\:items-stretch { align-items: stretch; }
  .md\:flex { display: flex; }
  .md\:text-3xl { font-size: 1.875rem; line-height: calc(2.25 / 1.875); }
  .md\:text-base { font-size: 1rem; line-height: calc(1.5 / 1); }
  .md\:mt-4 { margin-top: 1rem; }
  .md\:gap-5 { gap: 1.25rem; }
  .md\:h-6 { height: 1.5rem; }
  .md\:h-7 { height: 1.75rem; }
  .md\:h-8 { height: 2rem; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:h-72 { height: 18rem; }          /* 288px */
  .lg\:h-80 { height: 20rem; }          /* 320px */
}

/* the country button's trailing hairline that bridges it to the tel field */
.PhoneInput > button::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  height: 1px; width: 0.5rem; transform: translateY(-50%);
  background-color: #e1e1e1;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.PhoneInput > button:focus-visible::after,
.PhoneInput > button[data-state="open"]::after,
.group:has(input:focus) > button::after { background-color: var(--primary); }
.PhoneInput > button:hover { background-color: var(--color-gray-50, #f9fafb); }
.PhoneInput > button:focus-visible,
.PhoneInput > button[data-state="open"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 50%, white);
  outline: none;
}

/* `hidden` must lose to the md:flex that reveals the illustration, so it is
   declared before the media queries above in source order would allow —
   scoped here to keep specificity equal and let source order decide. */
.hidden { display: none; }
@media (min-width: 768px) {
  .md\:flex { display: flex; }
}

/* ---------- shared site header ---------- */
/* These pages also load /styles.css for the logged-out nav, and the nav has to
   come out of it looking exactly as it does on every other page. Two things get
   in the way.

   First, the app shell is set in Inter and claims the whole document from
   `html`, so the header would be the only nav on the site not in Geist — close
   enough to pass at a glance, and wrong by a few pixels on every label. Hand it
   back the marketing face; the shell below keeps Inter.

   Second, /styles.css puts its responsive variants in Tailwind's `utilities`
   layer, and an unlayered rule beats a layered one whatever the source order —
   so the plain `.hidden`, `.flex`, `.px-3`, `.px-4` and `.text-sm` declared
   above win over the `md:`/`lg:`/`xl:` variants that are supposed to override
   them. Left alone that pins the desktop nav shut, leaves the burger showing at
   every width, empties the CTA from 768px up (its short label goes away with
   `md:hidden` while `hidden md:inline` keeps the long one hidden), and holds the
   buttons and the bar at their phone padding.

   So every breakpoint variant the header uses is re-asserted here, scoped to
   #site-header so nothing in the app shell is touched. Keep in sync with
   site/partials/header.html — a new `md:`/`lg:`/`xl:` class there needs a line
   here or it will silently do nothing on these two pages. */
#site-header {
  font-family: Helvetica, Arial, sans-serif;
}
@media (min-width: 768px) {
  #site-header .md\:inline { display: inline; }
  #site-header .md\:hidden { display: none; }
  #site-header .md\:px-4 { padding-inline: 1rem; }
  #site-header .md\:px-6 { padding-inline: 1.5rem; }
  #site-header .md\:text-body {
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-tracking);
  }
}
@media (min-width: 1024px) {
  #site-header .lg\:px-6 { padding-inline: 1.5rem; }
}
@media (min-width: 1280px) {
  #site-header .xl\:flex { display: flex; }
  #site-header .xl\:block { display: block; }
  #site-header .xl\:hidden { display: none; }
  #site-header .xl\:px-16 { padding-inline: 4rem; }
}

/* ---------- submit confirmation toast ---------- */
/* The notification host <section aria-live="polite"> already ships in the
   markup; it stays empty (and so inert) until signup.js drops a toast in. */
section[aria-label^="Notifications"] {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 356px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.app-toast {
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  padding: 16px;
  color: #191919;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.app-toast--in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: none; transform: none; }
}

/* ---------- screen gate ----------
   Sign-in is for a computer, so below a floor of 900 by 600 the form is not on
   the page. /desktop-only.js sets data-viewport on <html> before the first
   paint and keeps it current as the window is resized or the phone is turned;
   these two rules are the whole of what that attribute does here, and the same
   pair is in admin.css and partner.css for the other two sign-in pages.

   !important because the form and its heading carry utility classes that set
   display themselves. This rule covers the moment before the script's second
   pass; the script also sets `hidden` on the same elements, and that is what
   shows the notice. It has to be the script rather than a rule here, because
   the preflight rules `hidden` out from inside a cascade layer and an important
   declaration in a layer outranks an unlayered one whatever its specificity. */
html[data-viewport="small"] [data-desktop-only] { display: none !important; }

.screen-gate {
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.screen-gate h2 {
  margin: 0 0 0.75rem;
  color: var(--foreground);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.screen-gate p {
  margin: 0 0 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}
.screen-gate p:last-child { margin-bottom: 0; }
.screen-gate b { color: var(--foreground); font-weight: 600; white-space: nowrap; }

/* iOS Safari zooms the page in when a field under 16px takes focus, and does
   not zoom back out. The country picker's filter box is the only field in the
   sign-up flow set in 14px -- everything else is already 16px. */
@media (pointer: coarse) {
  #country-popper input,
  [data-radix-popper-content-wrapper] input { font-size: 16px; }
}