@font-face { font-family: "DMSans"; src: url("/assets/fonts/dm-sans-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DMSans"; src: url("/assets/fonts/dm-sans-medium.ttf") format("truetype"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-semibold.ttf") format("truetype"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "IBMPlex"; src: url("/assets/fonts/ibm-plex-sans-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBMPlex"; src: url("/assets/fonts/ibm-plex-sans-light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "OpenSans"; src: url("/assets/fonts/open-sans-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenSans"; src: url("/assets/fonts/open-sans-semibold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-semibold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "OpenSans", sans-serif; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #38a9d4; outline-offset: 3px; }
::selection { color: white; background: #111; }

.selector-page { color: #f7fafc; background: #062f42; }
.selector-shell { width: min(1440px, 100%); min-height: 100dvh; margin: auto; padding: 28px clamp(20px, 4vw, 64px) 40px; }
.selector-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid #344250; }
.selector-brand { display: flex; flex-direction: column; gap:6px; text-decoration: none; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; }
.selector-brand img { width:132px; height:auto; filter:brightness(0) invert(1); }
.selector-brand span { color: #9badbc; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.selector-header p { max-width: 520px; margin: 0; color: #aebdca; font-size: 0.85rem; line-height: 1.55; }
.selector-intro { display: flex; align-items: end; justify-content: space-between; gap: 48px; padding: clamp(54px, 7vw, 96px) 0 38px; }
.selector-intro h1 { max-width: 780px; margin: 0; font-family:"Poppins",sans-serif; font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.9; }
.selector-intro p { max-width: 340px; margin: 0 0 8px; color: #9badbc; line-height: 1.55; }
.concept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.concept-card { min-width: 0; overflow: hidden; color: #101417; background: white; border: 1px solid #344250; border-radius: 16px; text-decoration: none; transition: transform 300ms cubic-bezier(.16,1,.3,1), box-shadow 300ms ease; }
.concept-card:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(0,0,0,.32); }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid rgba(0,0,0,.14); font-size: 0.68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.preview-toolbar span:first-child { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.preview-stage { position: relative; display: grid; min-height: 400px; grid-template-columns: 0.82fr 1.18fr; gap: 12px; align-items: center; padding: 22px; overflow: hidden; }
.preview-copy { position: relative; z-index: 1; }
.preview-copy strong { display: block; font-size: clamp(1.55rem, 2.5vw, 2.65rem); letter-spacing: -0.045em; line-height: .98; }
.preview-copy i { display: inline-block; margin-top: 26px; font-size: .65rem; font-style: normal; font-weight: 600; }
.preview-form { position: relative; z-index: 1; display: flex; min-height: 245px; flex-direction: column; padding: 18px; background: white; }
.preview-form span { font-size: .55rem; text-transform: uppercase; }
.preview-form b { margin: 15px 0 18px; font-size: 1rem; line-height: 1.1; }
.preview-form i { height: 30px; margin-bottom: 8px; border: 1px solid #c8c8c8; }
.preview-form button { align-self: flex-end; margin-top: auto; padding: 9px 13px; color: white; background: #111; border: 0; font-size: .58rem; }
.concept-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; border-top: 1px solid rgba(0,0,0,.14); }
.concept-caption div { display: flex; flex-direction: column; }
.concept-caption strong { font-size: 1rem; }
.concept-caption span:not(.open-arrow) { margin-top: 2px; color: #6b7378; font-size: .74rem; }
.open-arrow { width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transition: transform 180ms ease; }
.concept-card:hover .open-arrow { transform: translate(3px,-3px); }
.preview-a .preview-stage { color: #eef9fb; background: #063d52; }
.preview-a .preview-copy strong { font-family: "Newsreader", serif; font-weight: 600; }
.preview-a .preview-copy i { padding-bottom: 3px; border-bottom: 1px solid #50bad7; }
.preview-a .preview-form { color: #15323d; background: #edf7f8; border-radius: 10px; box-shadow: 0 18px 38px rgba(0,0,0,.22); }
.preview-a .preview-form i { background: white; border-color: #ccd6dc; border-radius: 6px; }
.preview-a .preview-form button { background: #308cbf; border-radius: 999px; }
.preview-b .preview-stage { background: #f4f4f4; }
.preview-b .preview-copy strong { font-family: "Poppins", sans-serif; font-weight: 600; }
.preview-b .preview-copy i { color: #055577; }
.preview-b .preview-form { border: 1px solid #c6c6c6; }
.preview-b .preview-form i { background: #f4f4f4; border: 0; border-bottom: 1px solid #8d8d8d; }
.preview-b .preview-form button { background: #308cbf; border-radius:999px; }
.preview-c .preview-stage { background: #bfe9f0; }
.preview-c .preview-stage::before { content: ""; position: absolute; width: 140px; height: 140px; right: -30px; top: -35px; background: #dceeb1; border-radius: 50%; }
.preview-c .preview-copy strong { font-family:"Poppins",sans-serif; font-weight:600; }
.preview-c .preview-copy i { padding: 7px 12px; color: white; background: #055577; border-radius: 999px; }
.preview-c .preview-form { transform: rotate(2deg); border: 2px solid #055577; border-radius: 16px; }
.preview-c .preview-form i { border: 1px solid #055577; border-radius: 6px; }
.preview-c .preview-form button { border-radius: 999px; }
.selector-footer { padding: 28px 0 0; color: #778998; font-size: .75rem; text-align: center; }

.concept-page { min-height: 100dvh; color: var(--ink); background: var(--canvas); }
.concept-nav { position: relative; z-index: 20; display: grid; min-height: 68px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.concept-nav a { text-decoration: none; }
.back-link { display:inline-flex; align-items:center; gap:8px; justify-self:start; font-size:.8rem; font-weight:600; }
.back-link::before { content:""; width:7px; height:7px; border-bottom:1.5px solid currentColor; border-left:1.5px solid currentColor; transform:rotate(45deg); }
.concept-nav nav { display: flex; gap: 6px; }
.concept-nav nav a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: var(--nav-radius); font-size: .78rem; font-weight: 700; }
.concept-nav nav a[aria-current="page"] { color: var(--button-ink); background: var(--accent); border-color: var(--accent); }
.concept-nav > span { justify-self: end; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.concept-main { min-height: calc(100dvh - 68px); }
.concept-hero { display: grid; min-height: calc(100dvh - 146px); grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(54px, 7vw, 100px) clamp(24px, 6vw, 88px); }
.concept-copy { position: relative; z-index: 1; }
.brand-lockup { display:flex; align-items:center; gap:16px; margin:0 0 34px; color:var(--brand-mark); font-family:"OpenSans",sans-serif; font-size:.74rem; font-weight:600; }
.brand-lockup img { width:132px; height:auto; }
.brand-lockup span { padding-left:16px; border-left:1px solid var(--line); }
.concept-copy h1 { max-width: 760px; margin: 0 0 28px; font-size: clamp(4rem, 7.2vw, 7.5rem); font-weight: var(--display-weight); letter-spacing: -.04em; line-height: .88; }
.concept-copy h1 em { color: var(--accent); font-family: inherit; font-style: normal; }
.concept-lede { max-width: 520px; margin: 0 0 36px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.concept-cta { display: inline-flex; min-height: 48px; align-items: center; gap: 16px; padding: 12px 22px; color: var(--button-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--button-radius); font-family:"Poppins",sans-serif; font-size: .82rem; font-weight: 600; text-decoration: none; transition: transform 180ms ease; }
.concept-cta:hover { transform: translateY(-2px); }
.concept-cta:active { transform: translateY(0) scale(.98); }
.form-art { width: 100%; max-width: 720px; justify-self: end; padding: clamp(28px, 4vw, 52px); color: var(--form-ink); background: var(--form-bg); border: var(--form-border); border-radius: var(--form-radius); box-shadow: var(--form-shadow); }
.form-art-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .76rem; font-weight: 600; }
.art-progress { height: var(--progress-height); margin: 20px 0 40px; overflow: hidden; background: var(--progress-bg); border-radius: var(--progress-radius); }
.art-progress i { display: block; width: 33.333%; height: 100%; background: var(--accent); transition: width 400ms cubic-bezier(.16,1,.3,1); }
.art-step.is-current { animation: step-enter 420ms cubic-bezier(.16,1,.3,1) both; }
@keyframes step-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.art-step-scroll { max-height: min(58dvh, 610px); overflow-y: auto; padding-right: 10px; scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
.art-step-scroll::-webkit-scrollbar { width: 7px; }
.art-step-scroll::-webkit-scrollbar-track { background: transparent; }
.art-step-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.art-step h2, .art-success h2 { margin: 0 0 28px; font-family:var(--form-display); font-size: clamp(2rem, 3vw, 3rem); font-weight: var(--form-title-weight); letter-spacing: -.035em; line-height: 1; }
.art-step h3 { margin: 34px 0 18px; font-family:var(--form-display); font-size:1.25rem; line-height:1.2; }
.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.art-step label { display: block; margin-bottom: 18px; font-size: .76rem; font-weight: 600; }
.art-step input:not([type="radio"]):not([type="checkbox"]), .art-step select { width: 100%; min-height: 48px; margin-top: 7px; padding: 11px 13px; color: var(--form-ink); background: var(--input-bg); border: var(--input-border); border-radius: var(--input-radius); outline: 0; }
.art-step input:focus, .art-step select:focus { border-color: var(--accent); box-shadow: var(--input-focus); }
.art-step input.is-invalid, .art-step select.is-invalid { border-color: #c5352a; box-shadow: 0 0 0 2px rgba(197,53,42,.16); }
.art-step fieldset { min-width:0; margin:0; padding:0; border:0; }
.art-step legend { margin-bottom:12px; font-size:.78rem; font-weight:700; }
.inline-options, .timing-options, .preference-options { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px !important; }
.inline-options legend, .timing-options legend, .preference-options legend { width:100%; }
.inline-options label, .timing-options label, .preference-options label { display:flex; min-height:46px; align-items:center; gap:9px; margin:0; padding:10px 13px; background:var(--input-bg); border:var(--input-border); border-radius:var(--input-radius); cursor:pointer; }
.art-step input[type="radio"], .art-step input[type="checkbox"] { flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--accent); }
.treatment-fieldset { margin-bottom:32px !important; }
.treatment-picker { display:grid; max-height:355px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; overflow-y:auto; padding:2px 7px 10px 2px; scrollbar-color:var(--accent) transparent; scrollbar-width:thin; }
.treatment-picker::-webkit-scrollbar { width:7px; }
.treatment-picker::-webkit-scrollbar-thumb { background:var(--accent); border-radius:999px; }
.treatment-card { position:relative; display:flex !important; min-height:194px; flex-direction:column; align-items:center; justify-content:flex-end; margin:0 !important; padding:12px; overflow:hidden; background:var(--input-bg); border:var(--input-border); border-radius:var(--input-radius); cursor:pointer; text-align:center; transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.treatment-card:hover { transform:translateY(-2px); }
.treatment-card:focus-within, .treatment-card:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.treatment-card > input { position:absolute; top:12px; left:12px; z-index:2; opacity:.01; }
.treatment-card::before { content:""; position:absolute; top:13px; left:13px; z-index:3; width:16px; height:16px; background:var(--input-bg); border:1px solid var(--line); border-radius:50%; }
.treatment-card:has(input:checked)::before { background:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 4px var(--input-bg); }
.treatment-visual { display:grid; width:72px; height:100px; place-items:center; margin:auto auto 12px; color:var(--form-ink); background:#e6eaeb; border:1px solid #b9c1c4; border-radius:8px 8px 18px 18px; font-family:"Poppins",sans-serif; font-size:1.1rem; font-weight:700; letter-spacing:-.03em; box-shadow:inset 0 -18px 0 rgba(255,255,255,.32); }
.treatment-card strong { display:block; font-family:var(--form-display); font-size:.92rem; line-height:1.15; }
.treatment-card small { margin-top:4px; color:var(--muted); font-size:.66rem; font-weight:400; }
.screening-block { padding-top:8px; border-top:1px solid var(--line); }
.screening-block > h3 { margin-top:26px; }
.screening-block > p { margin:-10px 0 22px; color:var(--muted); font-size:.78rem; }
.screening-options { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:14px !important; background:color-mix(in srgb, var(--input-bg) 72%, transparent); border:1px solid var(--line) !important; border-radius:var(--input-radius); }
.screening-options legend { padding:0 5px; }
.screening-options label { display:flex; align-items:flex-start; gap:9px; margin:0; font-weight:400; line-height:1.4; cursor:pointer; }
.screening-options input { margin-top:1px !important; }
.screening-options.is-invalid { border-color:#c5352a !important; box-shadow:0 0 0 2px rgba(197,53,42,.16); }
.schedule-fields { margin:4px 0 16px; }
.address-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:12px; }
.optional { display:inline-block; margin-left:5px; color:var(--muted); font-weight:400; }
.agreement { display:flex !important; align-items:flex-start; gap:10px; margin-top:22px; line-height:1.45; }
.agreement input { margin-top:1px !important; }
.consent-note { margin:16px 0 6px; padding:14px; color:var(--muted); background:color-mix(in srgb, var(--input-bg) 72%, transparent); border-left:3px solid var(--accent); font-size:.72rem; line-height:1.5; }
.form-message { margin: 0 0 18px; color: #a3261b; font-size: .76rem; font-weight: 600; }
.art-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 12px; }
.art-actions button, .art-success button { min-height: 46px; padding: 11px 16px; color: var(--button-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--button-radius); cursor: pointer; font-weight: 700; }
.art-actions [data-back] { color: var(--form-ink); background: transparent; border-color: var(--line); }
.art-success { padding: 40px 0 10px; }
.art-success p { color: var(--muted); }
.concept-rationale { display: grid; grid-template-columns: .35fr 1fr auto; gap: 30px; padding: 26px clamp(24px, 6vw, 88px); color: var(--footer-ink); background: var(--footer-bg); border-top: 1px solid var(--line); font-size: .76rem; }

.concept-a { --canvas:#06384c; --ink:#f3fbfc; --muted:#b8d3dc; --line:#2b6476; --accent:#50bad7; --button-ink:#053243; --brand-mark:#f3fbfc; --form-bg:#edf7f8; --form-ink:#15323d; --form-border:0; --form-radius:14px; --form-shadow:0 34px 90px rgba(0,0,0,.28); --progress-bg:#c9dde2; --progress-height:5px; --progress-radius:999px; --input-bg:#fff; --input-border:1px solid #bdd2d8; --input-radius:8px; --input-focus:0 0 0 3px rgba(48,140,191,.18); --button-radius:999px; --nav-radius:50%; --display-weight:600; --form-title-weight:600; --form-display:"Newsreader",serif; --footer-bg:#042b3a; --footer-ink:#b8d3dc; font-family:"OpenSans",sans-serif; }
.concept-a .brand-lockup img { filter:brightness(0) invert(1); }
.concept-a .concept-copy h1 { font-family:"Newsreader",serif; }
.concept-a .concept-hero { position: relative; overflow: hidden; }
.concept-a .concept-hero::after { content:""; position:absolute; right:-12vw; bottom:-28vw; width:48vw; height:48vw; border:1px solid #2b6476; border-radius:50%; }

.concept-b { --canvas:#fff; --ink:#414042; --muted:#66686a; --line:#d7e0e3; --accent:#308cbf; --button-ink:#fff; --brand-mark:#055577; --form-bg:#fff; --form-ink:#414042; --form-border:1px solid #c8d3d7; --form-radius:0; --form-shadow:none; --progress-bg:#dfe9ec; --progress-height:4px; --progress-radius:0; --input-bg:#f3f7f8; --input-border:0; --input-radius:0; --input-focus:inset 0 -2px 0 #308cbf; --button-radius:999px; --nav-radius:999px; --display-weight:600; --form-title-weight:600; --form-display:"Poppins",sans-serif; --footer-bg:#055577; --footer-ink:#fff; font-family:"OpenSans",sans-serif; letter-spacing:.08px; }
.concept-b .concept-copy h1 { font-family:"Poppins",sans-serif; }
.concept-b .concept-hero { background-image:linear-gradient(to right, transparent calc(50% - 1px), #f4f4f4 50%); }
.concept-b .art-step input:not([type="radio"]):not([type="checkbox"]), .concept-b .art-step select { border-bottom:1px solid #8ba2aa; }
.concept-b .inline-options label, .concept-b .timing-options label, .concept-b .preference-options label, .concept-b .treatment-card { border-bottom:1px solid #8ba2aa; }
.concept-b .concept-copy dl { display:grid; grid-template-columns:repeat(3,1fr); max-width:520px; margin:60px 0 0; border-top:1px solid #d9d9d9; }
.concept-b .concept-copy dl div { padding:15px 8px 0 0; }
.concept-b dt { color:#055577; font-size:.72rem; }
.concept-b dd { margin:4px 0 0; font-size:.76rem; }

.concept-c { --canvas:#bfe9f0; --ink:#055577; --muted:#245f70; --line:#055577; --accent:#055577; --button-ink:#fff; --brand-mark:#055577; --form-bg:#dceeb1; --form-ink:#173c48; --form-border:2px solid #055577; --form-radius:24px; --form-shadow:18px 18px 0 rgba(5,85,119,.13); --progress-bg:rgba(5,85,119,.18); --progress-height:8px; --progress-radius:999px; --input-bg:#fff; --input-border:1.5px solid #055577; --input-radius:8px; --input-focus:0 0 0 3px rgba(48,140,191,.2); --button-radius:999px; --nav-radius:50%; --display-weight:600; --form-title-weight:600; --form-display:"Poppins",sans-serif; --footer-bg:#055577; --footer-ink:#fff; font-family:"OpenSans",sans-serif; }
.concept-c .concept-copy h1 { font-family:"Poppins",sans-serif; }
.concept-c .concept-hero { position:relative; overflow:hidden; }
.concept-c .concept-copy h1 { position:relative; z-index:2; }
.shape-note { position:absolute; z-index:0; padding:14px 18px; border:2px solid var(--line); border-radius:8px; color:var(--ink); font-size:.72rem; font-weight:700; text-transform:uppercase; }
.note-one { top:-40px; right:8%; background:#efd4d4; transform:rotate(7deg); }
.note-two { right:26%; bottom:-80px; background:#f4ecd6; transform:rotate(-5deg); }
.concept-c .form-art { transform:rotate(1.2deg); }

@media (max-width: 980px) {
  .concept-grid { grid-template-columns:1fr; }
  .preview-stage { min-height:340px; }
  .concept-hero { grid-template-columns:1fr; }
  .form-art { max-width:none; justify-self:stretch; }
  .concept-b .concept-hero { background-image:none; }
}

@media (max-width: 640px) {
  .selector-header, .selector-intro { align-items:flex-start; flex-direction:column; }
  .selector-intro { gap:20px; }
  .selector-intro h1 { font-size:3.4rem; }
  .preview-stage { grid-template-columns:1fr; }
  .preview-form { min-height:220px; }
  .concept-nav { grid-template-columns:1fr auto; }
  .concept-nav > span { display:none; }
  .concept-nav nav { justify-self:end; }
  .concept-hero { min-height:0; gap:58px; padding:62px 20px 80px; }
  .concept-copy h1 { font-size:clamp(3.4rem,18vw,5.4rem); }
  .brand-lockup { align-items:flex-start; flex-direction:column; gap:8px; }
  .brand-lockup span { padding-left:0; border-left:0; }
  .form-art { min-width:0; padding:26px 18px; }
  .two-fields { grid-template-columns:1fr; gap:0; }
  .art-step-scroll { max-height:none; overflow:visible; padding-right:0; }
  .treatment-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .screening-options, .address-grid { grid-template-columns:1fr; }
  .concept-rationale { grid-template-columns:1fr; gap:8px; }
  .concept-b .concept-copy dl { margin-top:40px; }
  .concept-c .form-art { transform:none; }
  .shape-note { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
