/* Fonts are bundled in /fonts so the pages work without Google Fonts. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/quicksand-latin-500-normal.woff2') format('woff2');}

/* Operator Outlook 2027: shared styles for the landing, sign-up and thank-you pages.
   Same file for primaryvision.co and efracs.com. Only the wordmark changes on efracs.com. */

:root {
  --paper: #F4EFE4;
  --ink: #14171C;
  --gold: #7A5C14;
  --grey: #5A5F66;
  --hairline: #D9D2BF;
  --field: #FBF8F1;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
}
a { color: var(--ink); }
a:hover { color: var(--gold); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; }
.wrap.narrow { max-width: 1200px; }

/* Header */
.top { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 28px 0; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.brand img { display: block; width: 32px; height: 48px; }
.brand span { font-family: 'Quicksand', 'Inter', sans-serif; font-weight: 500; font-size: 30px; }
.top-note { font-size: 14px; letter-spacing: 0.2em; font-weight: 500; color: var(--grey); }

/* Kicker */
.kicker { display: flex; align-items: center; gap: 18px; }
.kicker i { display: block; width: 48px; height: 2px; background: var(--gold); }
.kicker b { font-size: 16px; letter-spacing: 0.22em; font-weight: 500; color: var(--gold); }

h1 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }

/* Button (the only solid block on the page) */
.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  font: 600 18px/1 'Inter', sans-serif; letter-spacing: 0.08em;
  text-decoration: none; padding: 20px 40px; border: 0; cursor: pointer; text-align: center;
}
.btn:hover { color: var(--paper); background: #000; }

/* Footer */
.foot { border-top: 1px solid var(--ink); padding: 28px 0 56px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 15px; color: var(--grey); }

/* ---------- Landing page ---------- */
.hero { display: flex; flex-wrap: wrap; gap: 72px; padding: 48px 0 56px; align-items: flex-start; border-top: 1px solid var(--ink); }
.hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.hero-copy h1 { font-size: clamp(48px, 7vw, 104px); line-height: 1; letter-spacing: -0.015em; }
.hero-copy p { margin: 0; font-size: 21px; line-height: 1.55; max-width: 560px; }
.cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cta small { font-size: 15px; color: var(--grey); }

.hero-side { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.panel { border: 1px solid var(--ink); display: flex; flex-direction: column; }
.panel-head { padding: 18px 28px; border-bottom: 1px solid var(--ink); font-size: 14px; letter-spacing: 0.22em; font-weight: 600; }
.row { padding: 22px 28px; border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.row:last-child { border-bottom: 0; }
.row-title { display: flex; gap: 18px; align-items: baseline; }
.row-title em { font-style: normal; font-size: 15px; color: var(--gold); font-weight: 600; }
.row-title span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.1; }
.row p { margin: 0; padding-left: 37px; font-size: 16px; line-height: 1.5; }
.pills { padding-left: 37px; display: flex; gap: 8px; flex-wrap: wrap; }
.pills span { font-size: 12px; letter-spacing: 0.12em; font-weight: 600; border: 1px solid var(--ink); padding: 4px 10px; }
.fine { font-size: 14px; line-height: 1.5; color: var(--grey); }

/* ---------- Sign-up and thank-you pages ---------- */
.center { border-top: 1px solid var(--ink); padding: 72px 0 96px; display: flex; justify-content: center; }
.col { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.col.wide { max-width: 640px; gap: 26px; }
.col h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1.05; }
.col.wide h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.04; }
.lead { margin: 0; font-size: 20px; line-height: 1.5; }

form { display: flex; flex-direction: column; gap: 22px; }
.pair { display: flex; flex-wrap: wrap; gap: 22px; }
.pair > div { flex: 1 1 200px; min-width: 0; }
.pair > div.grow { flex: 2 1 200px; }
.pair.three > div { flex: 1 1 110px; }
.pair.three > div.grow { flex: 2 1 180px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; }
.field label small { font-weight: 400; color: var(--grey); font-size: 14px; }
.field input {
  width: 100%; height: 52px; padding: 0 14px; background: var(--field);
  border: 1px solid var(--ink); color: var(--ink); font: 16px 'Inter', sans-serif; border-radius: 0;
}
.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
form .btn { display: block; width: 100%; font-size: 17px; padding: 18px 24px; margin-top: 6px; }

.next { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ink); padding-top: 24px; margin-top: 12px; font-size: 16px; line-height: 1.5; }
.next h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; line-height: 1.1; }
.next a { font-weight: 600; }
.next .muted { color: var(--grey); }

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .hero { gap: 40px; }
  .panel-head, .row { padding-left: 20px; padding-right: 20px; }
}