/* Polish layer over the precompiled Tailwind build (site.css is purged, so new utilities would not exist). */

/* Header: keep the wordmark on one line. Below 1024px the three Greek nav labels
   don't fit beside it, so tablets get the existing phone menu instead of a wrapped nav. */
header > div > a[href="/"] > span:first-child { white-space: nowrap; }
header nav a { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023.98px) {
    header nav.md\:block { display: none; }
    header nav.md\:hidden { display: block; }
}

/* Hero */
.tw-hero h1 { text-wrap: balance; }

/* Form: fields had 0.5rem gutters that pushed them off the headline's left edge. */
.tw-hero form > .flex-wrap { margin-inline: -0.5rem; }
.tw-hero form label { margin-bottom: 0.25rem; font-size: 0.9375rem; font-weight: 500; }
.tw-hero form input[aria-invalid="true"] { --tw-ring-color: rgb(248 113 113); }
.tw-hero .field-error { margin-top: 0.375rem; font-size: 0.8125rem; color: rgb(185 28 28); text-align: left; }
.dark .tw-hero .field-error { color: rgb(252 165 165); }

/* intl-tel-input must stretch with its column. */
.tw-hero .iti { display: block; width: 100%; }

/* Submit: full-width tap target on phones, loading/disabled feedback everywhere. */
.tw-hero button[type="submit"] { transition-property: scale, background-color, box-shadow, opacity; transition-duration: .16s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.tw-hero button[type="submit"]:active:not(:disabled) { scale: .96; }
.tw-hero button[type="submit"]:disabled { opacity: .7; cursor: progress; }
@media (max-width: 639.98px) {
    .tw-hero button[type="submit"] { width: 100%; justify-content: center; }
}

/* Consent line: gray-400 on white was ~2.5:1. */
.tw-hero .consent { color: rgb(75 85 99); }
.dark .tw-hero .consent { color: rgb(156 163 175); }
.tw-hero .consent a { text-underline-offset: 2px; }
.tw-hero .consent a:hover { color: rgb(15 118 110); }
.dark .tw-hero .consent a:hover { color: rgb(45 212 191); }

/* Contrast: brand teal-400 is ~1.9:1 on white. In light mode use darker teals from the same family. */
html:not(.dark) .tw-hero h1 .text-primary { color: rgb(13 148 136); }           /* teal-600, large text 3.7:1 */
html:not(.dark) header nav a.text-primary { color: rgb(15 118 110); }           /* teal-700, 5.5:1 */
html:not(.dark) .tw-hero button[type="submit"] {
    background-image: linear-gradient(to right, rgb(15 118 110), rgb(13 148 136)); /* teal-700 -> teal-600 */
}
html:not(.dark) .tw-hero button[type="submit"]:hover:not(:disabled) { background-image: none; background-color: rgb(15 118 110); }

/* OTP digits: comfortable tap size, numeric feel. */
.tw-hero #enter-pin input { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* Hero image: no layout shift while loading. */
.tw-hero picture { display: contents; }



/* Floating Menu/Close button: white on teal-400 was ~1.9:1. */
html:not(.dark) header nav.md\:hidden > button { background-color: rgb(15 118 110); }

/* ---- Feel pass ---- */

/* Crisper text on macOS. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Body copy without orphans. */
.tw-hero .consent, .tw-hero .otp-hint, .tw-hero [x-show="showSuccess"] .text-xl { text-wrap: pretty; }

/* Inputs: brand focus ring (forms plugin forced blue), smooth border on hover. */
.tw-hero input { transition-property: border-color, box-shadow; transition-duration: .15s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
/* Lighter field edge: gray-300 + soft shadow instead of the forms plugin's slate-500. */
html:not(.dark) .tw-hero input:not([aria-invalid="true"]) { border-color: rgb(209 213 219); box-shadow: 0 1px 2px rgb(15 23 42 / .06); }
html:not(.dark) .tw-hero input:hover:not(:focus):not([aria-invalid="true"]) { border-color: rgb(156 163 175); }
.dark .tw-hero input:hover:not(:focus) { border-color: rgb(156 163 175); }
.tw-hero input:focus, html:not(.dark) .tw-hero input:focus:not([aria-invalid="true"]) { --tw-ring-color: rgb(13 148 136); border-color: rgb(13 148 136); box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color); }   /* teal-600, 3.7:1 on white */
.dark .tw-hero input:focus { --tw-ring-color: rgb(45 212 191); border-color: rgb(45 212 191); }
.tw-hero input[aria-invalid="true"]:not(:focus) { border-color: rgb(248 113 113); }

/* Phone field: flag box sits 1px inside a 6px-radius input, so its corners are 5px. */
.tw-hero .iti__flag-container { border-radius: 5px 0 0 5px; }
.tw-hero .iti__selected-flag { border-radius: 5px 0 0 5px; transition: background-color .15s cubic-bezier(.2, 0, 0, 1); }
.tw-hero .iti__selected-flag:hover { background-color: rgba(0, 0, 0, .08); }

/* OTP card: concentric radius, 4px inputs + 24px padding = 28px. */
.tw-hero [x-show="showPinCode && !showSuccess"] .rounded-lg { border-radius: 28px; }

/* Countdown digits don't jitter. */
.tw-hero [x-text="ring.timerString"] { font-variant-numeric: tabular-nums; }

/* Small text controls get a 40px hit area. */
.tw-hero .resend { display: inline-flex; align-items: center; min-height: 40px; padding-inline: .25rem; margin-inline: -.25rem; }
header [x-bind="toggle"] { position: relative; }
header [x-bind="toggle"]::after { content: ""; position: absolute; inset: -8px; }

/* Hero photo: hairline edge so it doesn't bleed into the page. */
.tw-hero picture img { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
.dark .tw-hero picture img { outline-color: rgba(255, 255, 255, .1); }

/* Motion. Panels that appear after load (code entry, success, errors) enter; the initial form does not. */
@keyframes tw-rise { from { opacity: 0; translate: 0 8px; filter: blur(2px); } }
@keyframes tw-rise-sm { from { opacity: 0; translate: 0 -4px; } }
@keyframes tw-icon-in { from { opacity: 0; scale: .25; filter: blur(4px); } }

.tw-hero [x-show="showPinCode && !showSuccess"] .rounded-lg > * { animation: tw-rise .4s cubic-bezier(.2, 0, 0, 1) both; }
.tw-hero [x-show="showPinCode && !showSuccess"] .rounded-lg > :nth-child(2) { animation-delay: .1s; }
.tw-hero [x-show="showPinCode && !showSuccess"] .rounded-lg > :nth-child(3) { animation-delay: .2s; }
.tw-hero [x-show="showPinCode && !showSuccess"] .rounded-lg > :nth-child(4) { animation-delay: .3s; }

.tw-hero [x-show="showSuccess"] svg { animation: tw-icon-in .3s cubic-bezier(.2, 0, 0, 1) both; }
.tw-hero [x-show="showSuccess"] .text-xl { animation: tw-rise .4s cubic-bezier(.2, 0, 0, 1) .1s both; }

.tw-hero .field-error, .tw-hero [role="alert"] { animation: tw-rise-sm .2s cubic-bezier(.2, 0, 0, 1) both; }

/* Spinner fades in instead of popping; keeps Tailwind's spin. */
.tw-hero button[type="submit"] svg.animate-spin { animation: tw-icon-in .3s cubic-bezier(.2, 0, 0, 1), spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .tw-hero *, .tw-hero *::before, .tw-hero *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
    .tw-hero button[type="submit"] svg.animate-spin { animation: spin 1.5s linear infinite !important; }
    .tw-hero button[type="submit"]:active:not(:disabled) { scale: 1; }
}

/* Light mode: teal-400 on gray-200 / white is under 2:1. */
html:not(.dark) .tw-hero [x-show="resendIsVisible"].text-primary { color: rgb(15 118 110); }   /* teal-700 */
html:not(.dark) .tw-hero [x-show="showSuccess"] svg.text-primary { color: rgb(13 148 136); }   /* teal-600 */

/* ---- Hero rework (keep brand) ---- */

/* Hero: 9rem vertical padding floated the content mid-viewport; cap at 6rem so headline, form and CTA fit the first screen. */
@media (min-width: 1024px) {
    .tw-hero-inner > div:first-child { padding-top: 6rem; padding-bottom: 4rem; }
}
.tw-lede { margin-top: 1.25rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.65; color: rgb(75 85 99); text-wrap: pretty; }
.dark .tw-lede { color: rgb(209 213 219); }
@media (max-width: 1023.98px) { .tw-lede { margin-inline: auto; } }
.tw-form-wrap { margin-top: 2rem; }

/* Facts strip: plain typographic row, no cards. Same gutters as the hero. */
.tw-facts { border-top: 1px solid rgb(229 231 235); }
.dark .tw-facts { border-top-color: rgb(31 41 55); }
.tw-facts-inner { max-width: 80rem; margin-inline: auto; padding: 4rem 1rem 4.5rem; }
@media (min-width: 640px) { .tw-facts-inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .tw-facts-inner { padding-block: 5rem 5.5rem; } }
.tw-facts-title { font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: rgb(31 41 55); }
.dark .tw-facts-title { color: #fff; }
.tw-facts-grid { display: grid; gap: 2.25rem; margin-top: 2rem; }
@media (min-width: 768px) { .tw-facts-grid { grid-template-columns: 1.15fr 1fr 1fr; gap: 3rem; } }
.tw-fact dt { font-size: 2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: rgb(15 118 110); white-space: nowrap; }
.dark .tw-fact dt { color: rgb(45 212 191); }
.tw-fact dd { margin-top: .625rem; max-width: 30ch; font-size: 1rem; line-height: 1.6; color: rgb(75 85 99); text-wrap: pretty; }
.dark .tw-fact dd { color: rgb(209 213 219); }
.tw-facts-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 2.75rem; }
.tw-facts-links a { display: inline-flex; align-items: center; gap: .375rem; min-height: 40px; font-weight: 700; color: rgb(15 118 110); text-decoration: underline; text-decoration-color: rgb(15 118 110 / .35); text-underline-offset: 4px; transition-property: text-decoration-color, color; transition-duration: .15s; }
.tw-facts-links a:hover { text-decoration-color: currentColor; }
.tw-facts-links a span { transition: translate .2s cubic-bezier(.2, 0, 0, 1); }
.tw-facts-links a:hover span { translate: 3px 0; }
.tw-facts-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.dark .tw-facts-links a { color: rgb(45 212 191); text-decoration-color: rgb(45 212 191 / .35); }

/* Facts reveal as they scroll in (where supported), one after another. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .tw-fact { animation: tw-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
        .tw-fact:nth-child(2) { animation-range: entry 10% entry 70%; }
        .tw-fact:nth-child(3) { animation-range: entry 20% entry 80%; }
    }
}