.hero-nav{white-space:nowrap;font-size:14px;font-weight:600;line-height:1.25;letter-spacing:0!important}.site-header nav{align-items:center}.hero-nav[aria-current=page]{color:var(--blue)}.hero-page{padding-top:80px}.hero-intro{background:#eff5f8;padding:75px 5% 65px}.hero-intro-inner{max-width:1200px;margin:auto;position:relative}.hero-eyebrow{font-size:10px;letter-spacing:2px;color:#567e93}.hero-intro h1{font-size:38px;font-weight:500;letter-spacing:-1.2px;margin:12px 0 18px;line-height:1.3}.hero-intro p{font-size:15px;line-height:1.8;color:#647986;margin:0;max-width:670px;word-break:keep-all}.hero-preview-jump{display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid #7191a3;padding:10px 0;margin-top:22px;color:#356b89;font-size:13px}.hero-content{max-width:1200px;width:90%;margin:65px auto 100px}.hero-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:25px}.hero-section-heading h2{font-size:24px;letter-spacing:-.6px;font-weight:500;margin:0}.hero-section-heading p{font-size:12px;color:#7b8991;margin:0}.hero-lineups{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:22px}.hero-lineup-button{display:flex;flex-direction:column;text-align:left;gap:5px;background:#f6f8f9;border:1px solid #e3e9ed;padding:18px 16px;color:#75848d;min-height:84px;transition:background .2s,border-color .2s}.hero-lineup-button>span{font-size:10px;letter-spacing:.7px;white-space:nowrap}.hero-lineup-button>b{font-size:15px;font-weight:500;color:#233a48}.hero-lineup-button[aria-pressed=true]{background:#e8f2f7;border-color:#5692b1;color:#2b708f}.hero-preview-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:1.15fr .85fr;min-height:380px;overflow:hidden;background:var(--hero-bg,#e8f1f5);color:#183b50}.hero-preview-stage::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 72% 70%,#ffffffd9,transparent 65%)}.hero-preview-copy{padding:50px;z-index:1;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}.hero-preview-logo{width:230px;filter:brightness(0)}.hero-preview-lineup{font-size:11px;letter-spacing:2px;margin-top:25px;color:var(--hero-accent,#367b9b)}.hero-preview-copy h3{font-size:32px;line-height:1.4;letter-spacing:-1px;font-weight:500;margin:12px 0;max-width:440px;word-break:keep-all}.hero-preview-copy p{font-size:13px;line-height:1.8;color:#617884;max-width:400px;margin:0;word-break:keep-all}.hero-preview-clinic{font-size:12px;letter-spacing:.2px;border-top:1px solid #90a8b250;padding-top:15px;margin-top:30px}.hero-preview-product{position:relative;min-height:350px;display:flex;align-items:center;justify-content:center}.hero-preview-product::before{content:'';position:absolute;width:260px;height:55px;bottom:32px;border-radius:50%;background:#74939d16;filter:blur(14px)}.hero-preview-product img{position:relative;width:95%;height:340px;object-fit:contain;mix-blend-mode:multiply}.hero-preview-note{font-size:11px;color:#8b979e;margin:14px 0 0;line-height:1.7}.hero-application{margin-top:75px;border-top:1px solid #dce4e9;padding-top:40px}.hero-form{border-top:2px solid #8c9ea8;margin-top:26px}.hero-field-row{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:start;padding:25px 20px;border-bottom:1px solid #e0e6ea}.hero-field-row>label,.hero-field-row>legend,.hero-field-label{font-size:14px;line-height:1.6;padding:12px 0;margin:0;font-weight:500}.hero-field-row .required{color:#4984a2;margin-left:4px}.hero-field-row input:not([type=checkbox]),.hero-field-row select,.hero-field-row textarea{width:100%;border:1px solid transparent;background:#f6f7f8;padding:14px 16px;font-size:14px;min-height:49px;outline-offset:2px;border-radius:0}.hero-field-row input:focus,.hero-field-row textarea:focus,.hero-field-row select:focus{border-color:#aac4d2;background:white}.hero-field-row small{display:block;font-size:11px;color:#8c98a0;margin-top:8px}.hero-field-row textarea{resize:vertical}.hero-address-fields{display:grid;gap:8px}.hero-address-fields input:first-child{max-width:240px}.hero-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hero-contact-grid label{font-size:12px;color:#798791;display:grid;gap:7px}.hero-lineup-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hero-lineup-options label{display:flex;align-items:center;gap:9px;font-size:13px;padding:13px 14px;border:1px solid #dfe7eb;cursor:pointer}.hero-lineup-options label:has(input:checked){background:#edf5f8;border-color:#7eaac1}.hero-lineup-options input,.hero-consent input{width:16px;height:16px;accent-color:var(--blue);flex-shrink:0}.hero-size-custom{display:flex;align-items:center;gap:12px;margin-top:12px}.hero-size-custom label{display:grid;gap:5px;font-size:11px;color:#798791;flex:1}.hero-size-custom input{padding:10px 14px!important}.hero-consent{display:flex;align-items:flex-start;gap:10px;margin:28px 20px 0;font-size:12px;line-height:1.8;color:#61727d;cursor:pointer;word-break:keep-all}.hero-submit-row{display:flex;justify-content:center;margin-top:35px}.hero-submit{min-width:240px}.hero-submit:disabled{opacity:.55;cursor:wait}.hero-error{font-size:13px;color:#b63838;margin:20px;text-align:center}.hero-error:empty{display:none}.hero-success{margin-top:26px;background:#eef7f5;padding:30px;border-left:3px solid #478f82}.hero-success h3{font-size:20px;font-weight:500;margin:0 0 10px}.hero-success p{font-size:13px;margin:6px 0;color:#567068;overflow-wrap:anywhere}.hero-success button{font-size:12px;text-decoration:underline;padding:0;margin-top:12px}.hero-success:focus{outline:2px solid #478f82;outline-offset:4px}
.hero-process{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:30px;font-size:12px;color:#607986}.hero-process b{font-size:11px;color:#3a718e;margin-right:7px}.hero-process i{font-style:normal;color:#9cb2bd}.hero-generator{max-width:1280px;margin-top:45px}.hero-builder-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:30px;margin-top:36px;align-items:start}.hero-builder-panel{padding:28px;background:#f6f8fa;border:1px solid #e4eaee}.hero-panel-eyebrow{font-size:9px;letter-spacing:1.8px;color:#7993a3}.hero-builder-panel h2,.hero-preview-toolbar h2{font-size:20px;letter-spacing:-.5px;font-weight:500;margin:9px 0 24px}.hero-identity-options{border:0;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-identity-options legend{font-size:12px;margin-bottom:10px}.hero-identity-options label{display:flex;align-items:center;gap:7px;border:1px solid #dae4e9;background:white;font-size:12px;padding:11px;cursor:pointer}.hero-identity-options label:has(input:checked){border-color:#5d92ae;background:#eaf3f8;color:#275d7b}.hero-identity-options input{accent-color:#397b9f;width:13px;height:13px}.hero-builder-field{margin-bottom:25px}.hero-builder-field>label{font-size:12px;display:block;margin-bottom:10px}.hero-builder-field input:not([type=file]),.hero-builder-field select{width:100%;border:1px solid #dce5eb;background:white;border-radius:0;min-height:45px;padding:12px;font-size:13px;line-height:1.4}.hero-builder-field small{display:block;font-size:10px;line-height:1.8;color:#7d8f9b;margin-top:9px}.hero-builder-field .hero-size-custom input{min-width:0}.hero-local-note{font-size:10px;line-height:1.9;color:#778d9a;border-top:1px solid #dce5eb;padding-top:20px;word-break:keep-all}.hero-reset{font-size:11px;padding:5px 0;color:#607b8c;text-decoration:underline;margin-top:10px}.hero-logo-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #aabecb;background:#fff;min-height:112px;padding:15px;cursor:pointer}.hero-logo-drop span{font-size:24px;color:#7196ac;margin-bottom:7px}.hero-logo-drop b{font-size:12px;font-weight:500;color:#456c82}.hero-logo-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.hero-logo-drop:focus-within{outline:2px solid #3c799b;outline-offset:2px}.hero-logo-info{margin-top:10px;display:flex;align-items:start;gap:10px;font-size:10px;line-height:1.6;color:#4e758d}.hero-logo-info span{flex:1;overflow-wrap:anywhere}.hero-logo-info button{font-size:10px;text-decoration:underline;padding:0;flex-shrink:0}.hero-inline-error{font-size:11px;line-height:1.7;color:#b63838;margin:10px 0}.hero-inline-error:empty{display:none}.hero-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px}.hero-preview-toolbar h2{margin-bottom:20px}.hero-preview-toggle{display:flex;gap:4px;border:1px solid #dce5e9;padding:3px}.hero-preview-toggle button{font-size:11px;color:#788b95;padding:7px 12px}.hero-preview-toggle button[aria-pressed=true]{background:#e9f0f5;color:#315b74}.hero-preview-shell{padding:24px;background:#f0f2f4;border:1px solid #e4e9ed;overflow:hidden}.hero-preview-shell #hero-preview-canvas{margin:auto;position:relative;max-width:100%;min-height:1px;background:white;box-shadow:0 3px 14px #173f5010;overflow:hidden}.hero-preview-shell iframe{display:block;border:0;max-width:none;transform-origin:0 0;position:absolute;top:0;left:0;pointer-events:none}.hero-preview-caption{display:flex;justify-content:space-between;gap:12px;margin:12px 0;font-size:10px;color:#82919b}.hero-export-panel{padding:26px 0 0;margin-top:25px;border-top:1px solid #dfe6eb}.hero-export-panel h3{font-size:18px;font-weight:500;margin:0 0 8px;letter-spacing:-.4px}.hero-export-panel>div>p{font-size:12px;color:#82919b;margin:0;line-height:1.7}.hero-export-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.hero-export-actions button{font-size:12px;padding:13px 22px;min-width:175px}.hero-export-actions button:disabled{opacity:.4;cursor:not-allowed}.hero-builder-status{font-size:11px;color:#44766f;line-height:1.7;margin:14px 0 0}.hero-builder-status:empty{display:none}.hero-code-details{margin-top:18px}.hero-code-details summary{font-size:11px;color:#6a8291;cursor:pointer}.hero-code-details textarea{width:100%;height:190px;resize:vertical;border:1px solid #dce5eb;background:#f8fafb;margin-top:12px;padding:12px;font:11px/1.7 Consolas,monospace;color:#56717f;white-space:pre;tab-size:2}.hero-use-guide{border-top:1px solid #e1e8ec;padding-top:22px;margin-top:26px;font-size:11px;color:#7a8f9c;line-height:1.9}.hero-use-guide>span{font-size:9px;letter-spacing:1.7px;color:#91a4b0}.hero-use-guide ol{padding-left:17px;margin:12px 0}.hero-use-guide li{padding-left:3px;margin-bottom:6px}.hero-use-guide b{font-weight:500;color:#496779}.hero-use-guide p{font-size:10px;line-height:1.8;color:#8a9ca7;word-break:keep-all}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.hero-builder-grid{grid-template-columns:280px minmax(0,1fr);gap:20px}.hero-builder-panel{padding:22px}.hero-preview-toolbar{align-items:start}.hero-preview-toolbar h2{font-size:17px}.hero-preview-toggle button{padding:6px 9px}.hero-preview-caption{flex-direction:column;gap:5px}.hero-export-actions button{width:100%}}
@media(max-width:700px){.hero-builder-grid{grid-template-columns:1fr;gap:30px}.hero-builder-panel{padding:24px}.hero-builder-panel h2{margin-bottom:20px}.hero-process{gap:9px;font-size:10px;margin-top:24px}.hero-process b{font-size:9px;margin-right:3px}.hero-process i{font-size:9px}.hero-generator .hero-intro h1{font-size:25px}.hero-preview-toolbar h2{font-size:18px}.hero-preview-shell{padding:24px}.hero-export-actions{flex-direction:column}.hero-export-actions button{width:100%}.hero-preview-caption{font-size:10px}.hero-export-panel h3{font-size:18px}.hero-use-guide{font-size:11px}}
@media(min-width:1101px){.site-header .brand{width:390px;gap:12px}.site-header .brand-symbol{width:210px}.site-header .brand .brand-claim-text{font-size:10px}.site-header .brand-rank b{font-size:38px}.site-header nav{gap:20px}.nav-source{margin-right:0}.channel-nav{gap:16px;padding-left:18px}.site-header .channel-nav a{font-size:11px}}
@media(min-width:1101px) and (max-width:1300px){.site-header .brand{width:345px}.site-header .brand-symbol{width:180px}.site-header nav{gap:16px}.channel-nav{gap:12px;padding-left:15px}.site-header .channel-nav a{font-size:10px}.hero-nav,.site-header .nav-source>a{font-size:13px}}
@media(max-width:1100px){.header-inner{grid-template-columns:minmax(0,1fr) auto auto;gap:0 22px}.hero-nav{grid-column:3;grid-row:1;display:flex!important;align-items:center;height:65px;padding:0!important}.nav-source{margin-right:0}.channel-nav{grid-column:1/-1}.hero-page{padding-top:100px}.hero-intro{padding:55px 5%}.hero-intro h1{font-size:32px}.hero-preview-copy{padding:35px}.hero-preview-copy h3{font-size:27px}.hero-preview-product img{height:300px}.hero-lineups{gap:8px}.hero-lineup-button{padding:15px 10px}.hero-lineup-button>b{font-size:13px}.hero-lineup-button>span{font-size:8px}}
@media(max-width:900px) and (min-width:601px){.site-header .brand{width:250px;gap:9px}.site-header .brand-symbol{width:135px}.site-header .brand .brand-claim-text{font-size:7px}.brand-claim{padding-left:9px;gap:5px}.brand-rank b{font-size:28px}.header-inner{gap:0 16px}.site-header .nav-source>a,.hero-nav{font-size:12px}.hero-lineups{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-lineup-button>span{font-size:9px}.hero-field-row{grid-template-columns:145px minmax(0,1fr);gap:20px;padding:22px 12px}.hero-preview-copy{padding:28px}.hero-preview-copy h3{font-size:23px}.hero-preview-logo{width:185px}.hero-preview-stage{min-height:340px}.hero-lineup-options{grid-template-columns:1fr 1fr}}
@media(max-width:600px){html{scroll-padding-top:154px}.site-header{height:144px}.header-inner{grid-template-columns:1fr 1fr;grid-template-rows:68px 38px 38px;gap:0 18px}.site-header .brand{grid-column:1/-1;grid-row:1;width:190px;justify-self:start;gap:5px}.nav-source{grid-column:1;grid-row:2;justify-content:flex-end;height:38px}.hero-nav{grid-column:2;grid-row:2;height:38px;font-size:11px;justify-content:flex-start}.site-header .nav-source>a{padding:0!important;font-size:11px}.nav-source>button{height:34px}.channel-nav{grid-column:1/-1;grid-row:3;height:38px;gap:10px;justify-content:space-between}.site-header .channel-nav a{font-size:9px;padding:9px 0}.source-menu{top:144px}#library-page,.hero-page{padding-top:144px}.hero-intro{padding:38px 5%}.hero-intro h1{font-size:25px;letter-spacing:-.8px;margin-top:10px}.hero-intro p{font-size:12px}.hero-content{margin:38px auto 70px}.hero-section-heading{display:block;margin-bottom:20px}.hero-section-heading h2{font-size:21px}.hero-section-heading p{margin-top:8px;font-size:11px}.hero-lineups{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hero-lineup-button{min-height:72px;padding:12px}.hero-lineup-button>b{font-size:13px}.hero-lineup-button>span{font-size:8px}.hero-lineup-button:last-child{grid-column:1/-1}.hero-preview-stage{grid-template-columns:1.1fr .9fr;min-height:295px}.hero-preview-copy{padding:22px 0 22px 20px}.hero-preview-logo{width:150px;max-width:100%}.hero-preview-copy h3{font-size:19px;letter-spacing:-.6px;line-height:1.4}.hero-preview-copy p{font-size:10px}.hero-preview-lineup{font-size:8px;letter-spacing:1px;margin-top:18px}.hero-preview-clinic{font-size:10px;margin-top:20px;padding-top:12px}.hero-preview-product{min-height:290px}.hero-preview-product img{height:230px;width:120%;max-width:none}.hero-preview-product::before{width:110px;bottom:43px}.hero-preview-note{font-size:10px}.hero-application{margin-top:45px;padding-top:28px}.hero-field-row{display:block;padding:20px 0}.hero-field-row>label,.hero-field-label{display:block;padding:0 0 10px;font-size:13px}.hero-field-row input:not([type=checkbox]),.hero-field-row select,.hero-field-row textarea{font-size:13px;padding:13px 14px}.hero-lineup-options{grid-template-columns:1fr 1fr;gap:7px}.hero-lineup-options label{font-size:11px;padding:12px 10px}.hero-contact-grid{grid-template-columns:1fr;gap:13px}.hero-consent{margin:23px 0 0;font-size:11px}.hero-submit{width:100%;min-width:0}.hero-success{padding:23px}.hero-preview-jump{font-size:12px}}

/* Keep the generator columns within the available width on small screens. */
/* Vivid lineup imagery with a localized scrim for centered reversed labels. */
.hero-lineup-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 108px;
  gap: 7px;
  background: var(--lineup-surface, #f3f6f7);
  border-color: #dbe3e7;
  transition: border-color .25s, box-shadow .25s;
}
.hero-lineup-button::before,
.hero-lineup-button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-lineup-button::before {
  background: var(--lineup-photo) var(--lineup-position, center) / cover no-repeat;
  opacity: 1;
  transition: transform .4s;
}
.hero-lineup-button::after {
  background: linear-gradient(180deg, #0a1a2408, #0a1a24ad 32%, #0a1a24bf 50%, #0a1a24ad 72%, #0a1a241a);
}
.hero-lineup-button > span { color: #fff; font-weight: 500; text-shadow: 0 1px 3px #0005; }
.hero-lineup-button > b { color: #fff; line-height: 1.4; text-shadow: 0 1px 3px #0005; }
.hero-lineup-button[data-hero-preview="cleanse-tone"] {
  --lineup-photo: url('/assets/hero-simply-clean.png');
  --lineup-surface: #edf5f6;
  --lineup-position: center 55%;
  --lineup-accent: #398795;
}
.hero-lineup-button[data-hero-preview="prevent"] {
  --lineup-photo: url('/assets/cfe0a3069c6ce3.webp?lineup=20261004');
  --lineup-surface: #f6f2ed;
  --lineup-accent: #94724f;
}
.hero-lineup-button[data-hero-preview="correct"] {
  --lineup-photo: url('/assets/ad4e20c039c2f2.webp');
  --lineup-surface: #eef4ef;
  --lineup-position: center 62%;
  --lineup-accent: #5c8366;
}
.hero-lineup-button[data-hero-preview="moisturize"] {
  --lineup-photo: url('/assets/2057addd433d1a.webp');
  --lineup-surface: #f5f3f0;
  --lineup-accent: #688596;
}
.hero-lineup-button[data-hero-preview="protect"] {
  --lineup-photo: url('/assets/hero-mineral-radiance.jpg');
  --lineup-surface: #f6f5f0;
  --lineup-position: center 57%;
  --lineup-accent: #9a864c;
}
.hero-lineup-button:hover { border-color: var(--lineup-accent); }
.hero-lineup-button:hover::before { transform: scale(1.035); }
.hero-lineup-button[aria-pressed="true"] {
  background: var(--lineup-surface);
  border-color: var(--lineup-accent);
  box-shadow: inset 0 -3px 0 var(--lineup-accent), inset 0 0 0 1px #fff9, 0 3px 12px #233b4826;
}
.hero-lineup-button[aria-pressed="true"] > b::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #ffffffb3;
  border-radius: 50%;
  background: #142b39a6;
  font-size: 11px;
  line-height: 1;
}
.hero-lineup-button:focus-visible { outline: 2px solid #277494; outline-offset: 3px; }
@media (max-width: 600px) {
  .hero-lineup-button { min-height: 94px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lineup-button, .hero-lineup-button::before { transition: none; }
}
.hero-builder-grid > * { min-width: 0; }
.hero-identity-options { min-width: 0; }
@media (max-width: 700px) {
  .hero-builder-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-preview-toolbar { flex-wrap: wrap; }
  .hero-preview-toolbar h2 { margin-bottom: 12px; }
  .hero-preview-toggle { margin-bottom: 16px; }
}