/* ============================================================
   PRISM WELLNESS — paid search landing site
   Elliott Digital · design-system build, 2026-08-10

   Scoped to .pw throughout. The scoping is inherited from the
   Snapps build, where an unscoped reset stripped padding off the
   platform's form widget. It costs nothing here and keeps this
   file drop-in compatible with the widget blocks.
   ============================================================ */



/* ============================================================
   PRISM WELLNESS — PPC landing page, design-system build
   Scoped to .pw. No global reset: an unscoped *{margin:0}
   strips padding off the native Snapps form widget.
   ============================================================ */

.pw{
  --violet-950:#1B0233;--violet-900:#2C0455;--violet-800:#3A046F;--violet-700:#49038B;
  --violet-500:#7735C4;--violet-300:#BFA0E6;--violet-100:#EBE0F7;--violet-50:#F7F2FD;
  --teal-600:#1685A6;--teal-500:#1A9AC1;--teal-300:#7CCBE0;--teal-100:#DCF0F6;
  --sand-50:#FDFCFA;--sand-100:#F8F6F1;--sand-200:#F1EDE5;--sand-300:#E2DCD1;
  --ink-900:#1D1526;--ink-700:#3B3145;--ink-500:#6B6076;--ink-200:#CAC2D1;
  --coral-500:#F0705A;--sun-500:#F0B441;--moss-500:#4FA07E;
  --hairline:#E7E2DA;
  --font-display:"Bricolage Grotesque","Public Sans","Helvetica Neue",sans-serif;
  --font-text:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --font-wordmark:"Jost","Century Gothic",var(--font-text);
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;
  --shadow-md:0 6px 20px -8px rgba(33,29,46,.14);
  --shadow-lg:0 24px 60px -24px rgba(33,29,46,.24);
  --accent:var(--violet-700);

  font-family:var(--font-text);
  font-size:16px;
  line-height:1.55;
  color:var(--ink-700);
  background:var(--sand-100);
  -webkit-font-smoothing:antialiased;
}
.pw *,.pw *::before,.pw *::after{box-sizing:border-box}
.pw p{margin:0 0 16px;text-wrap:pretty}
.pw p:last-child{margin-bottom:0}
.pw h1,.pw h2,.pw h3{font-family:var(--font-display);font-weight:700;color:var(--ink-900);
  line-height:1.05;letter-spacing:-.02em;margin:0}
.pw h4{font-family:var(--font-text);font-weight:600;color:var(--ink-900);line-height:1.25;margin:0}
.pw ul{margin:0;padding:0;list-style:none}
.pw ::selection{background:#FCE2DC;color:var(--ink-900)}

.pw-wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.pw-measure{max-width:720px}
.pw-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* --- masthead ------------------------------------------------ */
.pw-top{background:#fff;border-bottom:1px solid var(--hairline)}
.pw-top .row{max-width:1120px;margin:0 auto;padding:0 32px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.pw-mark{font-family:var(--font-wordmark);font-weight:300;letter-spacing:.2em;
  font-size:14px;text-transform:uppercase;color:var(--ink-900);display:flex;align-items:center;gap:10px}
.pw-mark i{width:11px;height:11px;display:block;border-radius:2px;font-style:normal;
  background:linear-gradient(115deg,var(--coral-500) 0 25%,var(--sun-500) 25% 50%,
    var(--teal-500) 50% 75%,var(--violet-700) 75% 100%)}
.pw-top a{font-size:15px;font-weight:600;color:var(--violet-700);text-decoration:none;white-space:nowrap}
.pw-top a:hover{color:var(--violet-800);text-decoration:underline;text-underline-offset:3px}

/* --- hero: refracted light ----------------------------------- */
.pw-hero{position:relative;overflow:hidden;background:var(--violet-950);isolation:isolate}
.pw-hero .photo{position:absolute;inset:0;z-index:0;background:var(--violet-950) center/cover no-repeat}
.pw-hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(27,2,51,.62) 0%,rgba(27,2,51,.90) 100%)}
/* Refracted light: a beam thrown from a light source at the top right, split
   into hard spectral bands. Optics, never stripes. A narrow rotated element
   gives the beam a fixed width and a visible origin at any viewport size,
   which an inset gradient does not. */
.pw-hero .glow{position:absolute;z-index:2;pointer-events:none;
  top:-190px;right:-90px;width:440px;height:440px;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,rgba(253,252,250,.30) 0%,rgba(253,252,250,.09) 38%,rgba(253,252,250,0) 66%)}
.pw-hero .refract{position:absolute;z-index:2;pointer-events:none;
  top:-40%;bottom:-40%;right:13%;width:150px;
  transform:rotate(17deg);transform-origin:50% 0;
  mix-blend-mode:screen;opacity:.62;filter:blur(.4px);
  background:linear-gradient(90deg,
    transparent 0 3%,
    rgba(240,112,90,.85)  3%   21%,
    rgba(240,180,65,.85)  21%  39%,
    rgba(79,160,126,.80)  39%  56%,
    rgba(26,154,193,.85)  56%  75%,
    rgba(119,53,196,.80)  75%  95%,
    transparent 95% 100%)}
.pw-hero .refract2{position:absolute;z-index:2;pointer-events:none;
  top:-40%;bottom:-40%;right:1%;width:72px;
  transform:rotate(17deg);transform-origin:50% 0;
  mix-blend-mode:screen;opacity:.26;filter:blur(2.4px);
  background:linear-gradient(90deg,
    transparent 0 5%,
    rgba(240,180,65,.75)  5%   32%,
    rgba(26,154,193,.75)  32% 64%,
    rgba(119,53,196,.75)  64% 95%,
    transparent 95% 100%)}
.pw-hero .hero-inner{position:relative;z-index:3;max-width:1120px;margin:0 auto;padding:76px 32px 72px}
.pw-hero .pw-eyebrow{color:var(--teal-300);letter-spacing:.13em}
.pw-hero h1{color:var(--sand-50);font-size:clamp(38px,5.4vw,64px);margin:14px 0 18px;max-width:15ch}
.pw-lede{font-size:19px;line-height:1.55;color:rgba(253,252,250,.84);max-width:52ch;margin:0 0 26px}

.pw-ins{background:rgba(253,252,250,.07);border:1px solid rgba(253,252,250,.20);
  border-radius:var(--radius-md);padding:16px 20px;margin:0 0 26px;max-width:56ch}
.pw-ins b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-300);margin-bottom:6px;font-weight:600}
.pw-ins p{margin:0;font-size:15px;color:rgba(253,252,250,.92);line-height:1.5}
.pw-ins .fine{font-size:13px;color:rgba(253,252,250,.62);margin-top:6px}

.pw-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pw-btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;
  background:var(--violet-700);color:var(--sand-50);border-radius:var(--radius-sm);
  font-family:var(--font-text);font-size:17px;font-weight:600;text-decoration:none;border:none;cursor:pointer;
  transition:background-color 120ms cubic-bezier(.16,1,.3,1)}
.pw-btn:hover{background:var(--violet-800);color:var(--sand-50)}
.pw-btn:active{transform:scale(.985)}
.pw-btn.on-dark{background:var(--sand-50);color:var(--violet-800)}
.pw-btn.on-dark:hover{background:#fff;color:var(--violet-950)}
.pw-tel{font-size:17px;font-weight:600;color:var(--sand-50);text-decoration:none;
  border-bottom:2px solid rgba(124,203,224,.7);padding-bottom:2px}
.pw-tel:hover{color:#fff;border-bottom-color:var(--teal-300)}
.pw-telnote{width:100%;font-size:13px;color:rgba(253,252,250,.58);margin-top:2px}

/* --- trust bar ----------------------------------------------- */
.pw-trust{background:#fff;border-bottom:1px solid var(--hairline);padding:22px 0}
.pw-trust .row{max-width:1120px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;
  gap:20px;font-size:14px;color:var(--ink-500)}
.pw-trust b{color:var(--ink-900);font-weight:600}

/* --- sections ------------------------------------------------ */
.pw-sec{padding:72px 0;background:var(--sand-100)}
.pw-sec.alt{background:#fff;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.pw-sec h2{font-size:clamp(28px,3.4vw,42px);margin:0 0 28px;max-width:20ch}
.pw-sec .intro{font-size:17px;color:var(--ink-500);max-width:62ch;margin:-14px 0 30px}

.pw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pw-step{border-top:2px solid var(--accent);padding-top:18px}
.pw-step .n{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.pw-step h4{font-size:19px;margin:10px 0 8px}
.pw-step p{font-size:15px;color:var(--ink-500);line-height:1.6}

.pw-why{display:grid;gap:16px;max-width:74ch}
.pw-why li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-500);line-height:1.6}
.pw-why li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:2px;background:var(--accent)}
.pw-why li b{color:var(--ink-900);font-weight:600}

.pw-tags{display:flex;flex-wrap:wrap;gap:9px}
.pw-tag{background:var(--sand-200);border-radius:var(--radius-pill);padding:7px 16px;
  font-size:14.5px;color:var(--ink-700)}

.pw-mods{display:grid;gap:18px;max-width:74ch}
.pw-mod{border-left:2px solid var(--accent);padding-left:18px}
.pw-mod h4{font-size:17px;margin-bottom:5px}
.pw-mod p{font-size:15px;color:var(--ink-500);line-height:1.6}

.pw-people{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pw-person{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-md);padding:20px}
.pw-sec.alt .pw-person{background:var(--sand-100)}
.pw-av{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--violet-100);
  color:var(--violet-800);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:14px;font-weight:500;margin-bottom:12px}
.pw-person h4{font-size:16px;margin-bottom:3px}
.pw-person .cred{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-500);margin-bottom:8px}
.pw-person p{font-size:14.5px;color:var(--ink-500);line-height:1.55}

.pw-faq{display:grid;max-width:74ch;border-top:1px solid var(--hairline)}
.pw-faq>div{padding:20px 0;border-bottom:1px solid var(--hairline)}
.pw-faq h4{font-size:17px;margin-bottom:6px}
.pw-faq p{font-size:15.5px;color:var(--ink-500);line-height:1.6}

/* --- form lead-in -------------------------------------------- */
.pw-start{background:#fff;border-top:1px solid var(--hairline);padding:64px 0 34px;scroll-margin-top:12px}
.pw-start h2{font-size:clamp(28px,3.4vw,42px);margin:0 0 10px}
.pw-start p{font-size:17px;color:var(--ink-500);max-width:56ch;margin:0}
.pw-formzone{background:#fff;padding:0 0 8px}
.pw-alert{display:flex;gap:12px;align-items:flex-start;background:#FCEFD5;
  border-left:3px solid #B4741A;border-radius:var(--radius-sm);padding:14px 18px;
  margin:22px 0 0;max-width:62ch;font-size:14.5px;color:#5A3A0C;line-height:1.5}
.pw-alert b{color:#4A2F08}

/* --- closing + footer ---------------------------------------- */
.pw-final{position:relative;overflow:hidden;background:var(--violet-950);isolation:isolate}
.pw-final .glow{position:absolute;z-index:1;pointer-events:none;
  top:-160px;left:-110px;width:380px;height:380px;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,rgba(253,252,250,.24) 0%,rgba(253,252,250,.07) 38%,rgba(253,252,250,0) 66%)}
.pw-final .refract{position:absolute;z-index:1;pointer-events:none;
  top:-40%;bottom:-40%;left:11%;width:120px;
  transform:rotate(-17deg);transform-origin:50% 0;
  mix-blend-mode:screen;opacity:.46;filter:blur(.6px);
  background:linear-gradient(90deg,
    transparent 0 3%,
    rgba(240,112,90,.8)  3%   21%,
    rgba(240,180,65,.8)  21%  39%,
    rgba(79,160,126,.75) 39%  56%,
    rgba(26,154,193,.8)  56%  75%,
    rgba(119,53,196,.75) 75%  95%,
    transparent 95% 100%)}
.pw-final .inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;
  padding:76px 32px;text-align:center}
.pw-final h2{color:var(--sand-50);font-size:clamp(28px,3.6vw,44px);margin:0 auto 14px;max-width:20ch}
.pw-final p{color:rgba(253,252,250,.8);font-size:17px;max-width:52ch;margin:0 auto 28px}

.pw-foot{background:var(--violet-950);color:rgba(253,252,250,.6);padding:26px 0 34px;font-size:13px;
  border-top:1px solid rgba(253,252,250,.14)}
.pw-foot .row{max-width:1120px;margin:0 auto;padding:0 32px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pw-foot a{color:rgba(253,252,250,.86);text-decoration:none;font-weight:600}
.pw-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* --- responsive ---------------------------------------------- */
/* Below the 1120 content width the hero loses its side gutter, so the beam
   needs a shallower angle and an outboard start to stay off the copy. */
@media(max-width:1120px){
  .pw-hero .refract{top:-15%;bottom:-15%;right:-6%;width:118px;transform:rotate(9deg)}
  .pw-hero .refract2{top:-15%;bottom:-15%;right:-18%;width:56px;transform:rotate(9deg);opacity:.22}
  .pw-final .refract{top:-15%;bottom:-15%;left:-6%;width:100px;transform:rotate(-9deg)}
}
@media(max-width:900px){
  .pw-people{grid-template-columns:repeat(2,1fr)}
  .pw-steps{grid-template-columns:1fr;gap:20px}
  .pw-trust .row{grid-template-columns:repeat(2,1fr);justify-content:stretch;gap:12px 24px}
}
@media(max-width:640px){
  .pw-wrap,.pw-top .row,.pw-trust .row,.pw-foot .row,.pw-hero .hero-inner,.pw-final .inner{padding-left:20px;padding-right:20px}
  .pw-hero .hero-inner{padding-top:52px;padding-bottom:52px}
  .pw-sec{padding:52px 0}
  .pw-people{grid-template-columns:1fr}
  /* Narrow screens: a tall hero would drag the rotated beam straight across
     the copy. Confine the refraction to a light band above the type instead,
     and open up the hero's top padding to hold it. */
  .pw-hero .hero-inner{padding-top:132px}
  .pw-hero .refract{top:-56px;bottom:auto;height:190px;right:8%;width:74px;
    transform:rotate(24deg);transform-origin:50% 0;opacity:.72;filter:blur(.6px)}
  .pw-hero .refract2{top:-56px;bottom:auto;height:180px;right:-6%;width:40px;
    transform:rotate(24deg);transform-origin:50% 0;opacity:.30;filter:blur(2px)}
  .pw-hero .glow{width:300px;height:300px;top:-165px;right:-95px}
  .pw-final .refract{top:-40px;bottom:auto;height:150px;left:8%;width:64px;
    transform:rotate(-24deg);transform-origin:50% 0;opacity:.5}
  .pw-final .glow{width:240px;height:240px;top:-135px;left:-105px}
  .pw-final .inner{padding-top:104px}
  .pw-trust .row{gap:10px;flex-direction:column}
  .pw-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.pw-btn{transition:none}.pw-btn:active{transform:none}}



/* ============================================================
   FORM — real markup on this domain, no platform widget
   ============================================================ */
.pw-form{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:30px;max-width:620px;box-shadow:var(--shadow-md)}
.pw-field{display:grid;gap:6px;margin-bottom:18px}
.pw-field:last-of-type{margin-bottom:22px}
.pw-field label{font-size:14px;font-weight:600;color:var(--ink-900)}
.pw-field .hint{font-size:13px;color:var(--ink-500);font-weight:400}
.pw-field input,.pw-field textarea{
  font:inherit;font-size:16px;color:var(--ink-900);background:var(--sand-50);
  border:1px solid var(--ink-200);border-radius:var(--radius-sm);
  transition:border-color 120ms cubic-bezier(.16,1,.3,1),box-shadow 120ms cubic-bezier(.16,1,.3,1)}
.pw-field input{height:48px;padding:0 14px}
.pw-field textarea{padding:12px 14px;resize:vertical;min-height:96px;line-height:1.55}
.pw-field input:focus,.pw-field textarea:focus{
  outline:none;border-color:var(--violet-500);background:#fff;
  box-shadow:0 0 0 3px var(--violet-100)}
.pw-field input:user-invalid,.pw-field textarea:user-invalid{border-color:var(--coral-500)}
.pw-req{color:var(--coral-500);font-weight:400}

/* Honeypot. Off-screen rather than display:none — some bots skip
   hidden fields, and screen readers get aria-hidden + tabindex -1. */
.pw-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.pw-consent{font-size:13.5px;color:var(--ink-500);line-height:1.55;margin:0 0 20px}
.pw-consent a{color:var(--violet-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pw-consent a:hover{color:var(--violet-800)}
.pw-formnote{font-size:13px;color:var(--ink-500);margin:14px 0 0;text-align:center}

/* [hidden] must beat the display below, or the error banner ships visible. */
.pw-error[hidden]{display:none}
.pw-error{display:flex;gap:12px;align-items:flex-start;background:#FDE9E5;
  border-left:3px solid var(--coral-500);border-radius:var(--radius-sm);
  padding:14px 18px;margin:0 0 22px;font-size:14.5px;color:#7A2A18;line-height:1.5}
.pw-error b{color:#5E1F11}
.pw-error ul{list-style:disc;padding-left:18px;margin:6px 0 0}
.pw-error li{margin-bottom:3px}

/* --- legal / privacy page ------------------------------------ */
.pw-legal{max-width:74ch}
.pw-legal h2{font-size:clamp(24px,2.6vw,32px);margin:38px 0 14px}
.pw-legal h2:first-child{margin-top:0}
.pw-legal p{font-size:16px;color:var(--ink-500);line-height:1.65}
.pw-legal ul{list-style:none;display:grid;gap:10px;margin:0 0 16px}
.pw-legal li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-500);line-height:1.6}
.pw-legal li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  border-radius:2px;background:var(--accent)}
.pw-legal .updated{font-family:var(--font-mono);font-size:13px;color:var(--ink-500)}

@media(max-width:640px){
  .pw-form{padding:22px;border-radius:var(--radius-md)}
}