/* nexafix.net "coming soon" pages (2026-10-28): the email page (index.html), the business page
   (business/) and the two thank-you pages (thanks/, thanks/business/). Owner palette only.
   The download pages in get/ keep their own styles. */
:root { --navy: #010B40; --cyan: #00F5FF; --blue: #2684FF; --beige: #F7F7F2; --muted: rgba(247, 247, 242, .7); --line: rgba(247, 247, 242, .16); }
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { font-family: Inter, system-ui, sans-serif; color: var(--beige); background: var(--navy); display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--cyan); }
.bg { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(1, 11, 64, .72), rgba(1, 11, 64, .94)), url(/img/home-hero-poster.jpg) center 60% / cover no-repeat; z-index: -1; }
.bg.biz { background: linear-gradient(180deg, rgba(1, 11, 64, .82), rgba(1, 11, 64, .96)), url(/img/find-a-service-technician.jpg) center 40% / cover no-repeat; }

/* The email page keeps its centred grid; the other pages use .page (a centred column). */
main { flex: 1; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 48px 20px; text-align: center; }
main.page { display: flex; flex-direction: column; align-items: center; width: min(640px, 100%); margin: 0 auto; gap: 18px; padding: 40px 16px 24px; }
.logo { width: 240px; max-width: 70vw; height: auto; }
.page .logo { width: 200px; max-width: 60vw; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--beige); text-decoration: none; }
.biz-word { font: 700 13px Inter, sans-serif; letter-spacing: .5em; margin-right: -.5em; }
.tag { font: 600 13px Inter, sans-serif; letter-spacing: .18em; color: var(--cyan); text-transform: uppercase; }
h1 { font: 700 clamp(30px, 6vw, 52px)/1.1 Outfit, sans-serif; max-width: 16ch; }
.page h1 { font-size: clamp(28px, 7vw, 44px); max-width: 18ch; }
.lead { max-width: 52ch; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.55; color: rgba(247, 247, 242, .86); }
.page .lead { font-size: 17px; }
.fine { font-size: 13px; line-height: 1.5; color: rgba(247, 247, 242, .65); max-width: 46ch; }
.alt { font-size: 15px; line-height: 1.5; color: rgba(247, 247, 242, .8); }
footer { padding: 18px 20px 26px; text-align: center; font-size: 13px; color: rgba(247, 247, 242, .65); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--cyan); color: var(--navy); font: 700 16px Inter, sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover, .btn:focus-visible { background: #7FFAFF; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-ghost { background: transparent; color: var(--beige); border: 1.5px solid rgba(0, 245, 255, .7); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(0, 245, 255, .12); border-color: var(--cyan); }

/* Form messages and inputs */
.msg { font-size: 15px; line-height: 1.45; width: 100%; }
.msg:empty { display: none; }
.msg.ok { color: var(--cyan); font-weight: 600; }
.msg.err { color: #FFB4B4; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
input, select { font: 500 16px Inter, sans-serif; color: var(--beige); background: rgba(247, 247, 242, .08); border: 1.5px solid rgba(247, 247, 242, .35); }
input::placeholder { color: rgba(247, 247, 242, .6); }
input:focus, select:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
[aria-invalid="true"] { border-color: #FFB4B4; }

/* Email page */
.copy { display: grid; justify-items: center; gap: 14px; width: min(520px, 100%); }
.intro { font-size: 16px; line-height: 1.65; color: rgba(247, 247, 242, .74); }
.promise { font: 600 clamp(18px, 2.6vw, 21px)/1.35 Outfit, sans-serif; color: var(--beige); margin-top: 4px; text-wrap: balance; }
.copy .lead, .intro { text-wrap: balance; }
.form-lead { width: 100%; font-size: 15px; font-weight: 500; color: var(--cyan); }
/* One centred column: box full width, button centred under it (the same on phones and computers). */
.email-form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(520px, 100%); margin-top: 6px; }
.email-form input[type="email"] { width: 100%; height: 52px; padding: 0 20px; border-radius: 999px; text-align: center; }
.email-form .btn { min-width: 200px; }
.biz-cta { width: min(520px, 100%); display: grid; justify-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.biz-cta p { font-size: 15px; line-height: 1.45; color: rgba(247, 247, 242, .8); }

/* Business page */
.panel { width: 100%; text-align: left; background: rgba(247, 247, 242, .07); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font: 600 14px Inter, sans-serif; color: rgba(247, 247, 242, .92); }
.field input, .field select { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; }
.field select { appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300F5FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.field select:invalid { color: rgba(247, 247, 242, .6); }
.field option { color: var(--navy); background: #fff; }
.panel .btn { width: 100%; margin-top: 18px; }
.panel .msg { margin-top: 12px; text-align: center; }

/* Thank-you pages */
.done { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 245, 255, .14); border: 1.5px solid rgba(0, 245, 255, .6); color: var(--cyan); }
.done svg { width: 30px; height: 30px; }
.feats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; width: 100%; }
.feats li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(247, 247, 242, .06); border: 1px solid var(--line); font-size: 14px; font-weight: 600; text-align: left; line-height: 1.3; }
.feats svg { width: 20px; height: 20px; flex: none; color: var(--cyan); }
.feats.three { grid-template-columns: repeat(3, 1fr); }
.app { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; text-align: left; background: rgba(247, 247, 242, .07); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.qr { display: block; width: 172px; height: 172px; border-radius: 12px; background: #fff; }
.app h2 { font: 600 20px Outfit, sans-serif; margin-bottom: 8px; }
.app p { font-size: 15px; line-height: 1.5; color: rgba(247, 247, 242, .86); }
.app .btn { margin-top: 14px; width: 100%; }
.app .small { margin-top: 12px; font-size: 14px; color: var(--muted); }
main:not(.page) > .app { width: min(560px, 100%); }
/* Phones and tablets can't scan their own screen: no QR code there, a big download button instead. */
@media (hover: hover) and (pointer: fine) { .touch-only { display: none !important; } }
@media (hover: none), (pointer: coarse) { .desk-only { display: none !important; } .app { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .grid2, .feats.three { grid-template-columns: 1fr; }
  .panel { padding: 18px 16px; }
  .app { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}