/* New Sights Eyecare design tokens — generated from tokens.json */
:root{
  --color-paper: #FBFAF7;
  --color-paper-2: #F0EFED;
  --color-white: #FFFFFF;
  --color-ink: #1B2430;
  --color-ink-2: #3A4452;
  --color-muted: #5B6573;
  --color-line: #D2D4D3;
  --color-line-soft: #E6E6E3;
  --color-line-strong: #7A8391;
  --color-on-ink-2: #C9D0D8;
  --color-red-100: #F7E1DF;
  --color-red-150: #F2CFCB;
  --color-red-500: #D7262E;
  --color-red-600: #B81F27;
  --color-red-700: #991A20;
  --color-teal-100: #E4F2EF;
  --color-teal-200: #CDE9E8;
  --color-teal-300: #A8DCDB;
  --color-green-500: #2F8F5B;
  --color-green-700: #1F6B43;
  --color-logo-red: #FF0000;
  --color-overlay: rgb(27 36 48 / .5);
  --color-hover-tint: rgb(27 36 48 / .06);
  --color-press-tint: rgb(27 36 48 / .12);
  --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --shadow-sm: 0 1px 2px rgb(27 36 48 / .12);
  --shadow-md: 0 4px 12px rgb(27 36 48 / .14);
  --shadow-lg: 0 12px 32px rgb(27 36 48 / .18);
  --shadow-bar: 0 -4px 16px rgb(27 36 48 / .10);
  --radius-none: 0;
  --radius-round: 9999px;
  --gutter: max(20px, 4.45cqi);
  --max-content: 1312px;
  --section-y: clamp(48px, 6.6cqi, 96px);
  --fs-h1: clamp(40px, 5.6cqi, 80px);
  --fs-h2: clamp(32px, 3.9cqi, 56px);
  --fs-h3: clamp(22px, 1.95cqi, 28px);
  --fs-lead: clamp(17px, 1.46cqi, 21px);
  --fs-body: clamp(17px, 1.25cqi, 18px);
  --fs-small: 15px;
  --tap-min: 44px;
  --control-h: 52px;
  --bar-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width:1024px){:root{--control-h:48px;--fs-small:16px}}
.page{container-type:inline-size}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:400 var(--fs-body)/1.6 var(--font-body)}
h1,h2,h3{font-family:var(--font-heading);font-weight:600;letter-spacing:-.02em;margin:0}
a{color:var(--color-red-700);text-underline-offset:3px}
a:hover{color:var(--color-ink)}
:focus-visible{outline:2px solid var(--color-ink);outline-offset:2px}
.on-ink :focus-visible{outline-color:var(--color-paper)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Frames: hairline border only (corner registration marks removed) */
.blueprint{position:relative;border:1px solid var(--color-line)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-h);padding:0 24px;font:600 19px/1.2 var(--font-heading);border:1px solid var(--color-line-strong);background:transparent;color:var(--color-ink);text-decoration:none;cursor:pointer;border-radius:0}
.btn:hover{background:var(--color-hover-tint);border-color:var(--color-ink)}
.btn:active{background:var(--color-press-tint)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--color-red-500);border-color:var(--color-red-500);color:#fff}
.btn-primary:hover{background:var(--color-red-600);border-color:var(--color-red-600)}
.btn-primary:active{background:var(--color-red-700);border-color:var(--color-red-700)}
.btn-ghost{border-color:transparent;color:var(--color-red-700);padding:0 8px}
.btn-ghost:hover{background:var(--color-red-100);border-color:transparent}
.btn-ghost:active{background:var(--color-red-150)}
@media (min-width:1024px){.btn{font-size:17px}.btn-lg{min-height:56px;font-size:20px}}
/* Fields */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:500;font-size:17px}
.field .req{font-weight:400;color:var(--color-muted)}
.input{height:var(--control-h);padding:0 14px;font:inherit;color:var(--color-ink);background:#fff;border:1px solid var(--color-line-strong);border-radius:0}
.input:hover{border-color:var(--color-ink)}
.input:focus-visible{outline:none;border-color:var(--color-ink);box-shadow:0 0 0 2px var(--color-paper),0 0 0 4px var(--color-ink)}
.input[aria-invalid=true]{border:2px solid var(--color-red-700)}
.input:disabled{background:var(--color-paper-2);opacity:.45}
.field-error{font-size:15px;font-weight:500;color:var(--color-red-700)}