/* Weekly Private Advice landing page
   Scoped under .wpa-page. Relies on styles.css + homepage-redesign.css for
   nav, footer, .hpr-wrap, .hpr-eyebrow, .hpr-button, .hpr-faqs. */

.wpa-page{--edge:#D4E3DD;--soft:#44516a;}

/* ---------- signature highlighter (matches the social artwork) ---------- */
.wpa-hl{display:inline-block;background:#10B981;color:#fff;border-radius:14px;
  padding:0 14px 4px;margin:0 2px;line-height:1.1;}
.wpa-hero .wpa-hl{background:#10B981;color:#0B1220;}

/* ---------- hero ---------- */
.wpa-hero{position:relative;isolation:isolate;overflow:hidden;background:#080D18;
  color:#fff;padding:150px 0 86px;}
.wpa-hero>.hpr-wrap{position:relative;z-index:2;}
.wpa-hero-grid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,330px);
  gap:36px;align-items:center;justify-content:center;}
.wpa-hero h1{font-size:clamp(34px,4.4vw,56px);line-height:1.12;margin:14px 0 0;}
.wpa-hero h1 span.l2{display:block;}
.wpa-page .wpa-lead{font-size:16px;line-height:1.65;margin:20px 0 0;max-width:560px;color:#DCE6F2;}

/* ---------- the signup card ---------- */
.wpa-card{background:#F3FBF7;border-radius:12px;padding:26px;margin-top:28px;
  max-width:470px;box-shadow:0 24px 50px -30px #00000080;}
.wpa-card label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:#0B1220;margin-bottom:8px;}
.wpa-names{display:flex;gap:10px;margin-bottom:10px;}
.wpa-names input{flex:1 1 0;min-width:0;min-height:54px;padding:15px 16px;font:inherit;
  font-size:15px;color:#0B1220;background:#fff;border:1px solid #C9DED4;border-radius:5px;}
.wpa-names input::placeholder{color:#8A9A93;}
.wpa-names input:focus{outline:3px solid #10B981;outline-offset:1px;border-color:#10B981;}
.wpa-field{display:flex;gap:10px;}
.wpa-field input{flex:1 1 auto;min-width:0;min-height:54px;padding:15px 16px;font:inherit;
  font-size:15px;color:#0B1220;background:#fff;border:1px solid #C9DED4;border-radius:5px;}
.wpa-field input::placeholder{color:#8A9A93;}
.wpa-field input:focus{outline:3px solid #10B981;outline-offset:1px;border-color:#10B981;}
.wpa-page .wpa-submit{flex:0 0 auto;min-height:54px;padding:15px 24px;font:inherit;
  font-size:14px;font-weight:600;color:#fff;background:#0A9D6C;border:0;border-radius:5px;
  cursor:pointer;transition:background .2s,transform .2s;}
.wpa-page .wpa-submit:hover{background:#087955;transform:translateY(-2px);}
.wpa-page .wpa-submit[disabled]{opacity:.65;cursor:default;transform:none;}
.wpa-micro{font-size:10px;font-style:italic;color:#5B7368;margin:10px 0 0;line-height:1.5;letter-spacing:.01em;}
.wpa-status{font-size:13px;margin:10px 0 0;color:#0A9D6C;}
.wpa-done{background:#F3FBF7;border-radius:12px;padding:26px;margin-top:28px;max-width:470px;
  color:#0B1220;}
.wpa-done strong{display:block;font-size:19px;margin-bottom:8px;}
.wpa-done p{font-size:14px;margin:0;color:#476459;}

/* ---------- hero visual: looping desk footage ---------- */
.wpa-hero-visual{position:relative;}
.wpa-video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 46%;border-radius:12px;border:1px solid #2A3852;background:#0B1220;
  box-shadow:0 34px 70px -34px #000;}

/* ---------- generic sections ---------- */
/* .homepage-redesign paints the whole wrapper mint, so a section with no
   background of its own came out mint too: nothing alternated. Both states
   are now explicit. */
.wpa-section{padding:76px 0;background:#fff;}
.wpa-mint{background:#F3FBF7;}
.wpa-section h2{font-size:clamp(27px,3vw,36px);line-height:1.2;}
.wpa-section-intro{font-size:15px;max-width:560px;margin-top:14px;color:var(--soft);}

/* trust strip */
.wpa-origin{background:#fff;border-bottom:1px solid var(--edge);padding:22px 0;}
.wpa-origin>.hpr-wrap{display:flex;align-items:center;justify-content:center;gap:28px;
  flex-wrap:wrap;}
.wpa-origin p{font-size:13px;color:var(--soft);margin:0;}
.wpa-origin img{width:150px;height:auto;}
.wpa-origin a{font-size:13px;border-bottom:1px solid #94B4A4;padding-bottom:2px;}

.wpa-src{font-size:12px;white-space:nowrap;border-bottom:1px solid #94B4A4;padding-bottom:2px;}

/* how it works */
.wpa-steps{list-style:none;padding:0;margin:34px 0 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:26px;}
.wpa-steps li{background:#fff;border:1px solid var(--edge);border-radius:10px;padding:32px 26px;text-align:center;}
.wpa-steps .wpa-dot{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:#0B1220;color:#fff;font-size:20px;
  font-weight:700;margin:0 auto 20px;}
.wpa-steps h3{font-size:18px;margin:0;}
.wpa-steps p{font-size:14px;margin-top:10px;color:var(--soft);}

/* who it's for + credential */
.wpa-who-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;}
.wpa-who ul{list-style:none;padding:0;margin:24px 0 0;}
.wpa-who ul li{position:relative;padding-left:28px;font-size:15px;margin-bottom:14px;
  color:var(--soft);line-height:1.6;}
.wpa-who ul li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:8px;
  border-left:2px solid #10B981;border-bottom:2px solid #10B981;transform:rotate(-45deg);}
.wpa-cred{background:#0B1220;color:#fff;border-radius:12px;padding:32px;}

/* byline: small avatar beside the name */
.wpa-cred-head{display:flex;align-items:center;gap:16px;margin-top:14px;}
.wpa-avatar{width:68px;height:68px;flex:0 0 68px;border-radius:50%;object-fit:cover;
  display:block;border:2px solid #23314A;}
.wpa-cred .wpa-cred-head h3{margin:0;font-size:21px;}
.wpa-page .wpa-cred-role{font-size:12px;color:#93A7C4;margin:5px 0 0;line-height:1.5;}

/* credential chips */
.wpa-creds{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.wpa-creds li{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  color:#D7E2EE;background:#111C30;border:1px solid #24334D;border-radius:6px;
  padding:7px 11px;line-height:1.3;}
.wpa-creds li::before{content:"";width:12px;height:7px;flex:0 0 12px;
  border-left:2px solid #10B981;border-bottom:2px solid #10B981;
  transform:rotate(-45deg);margin-top:-3px;}
.wpa-cred .hpr-eyebrow{color:#5FE3B4;}
.wpa-cred p{font-size:14px;color:#C6D2E2;margin-top:12px;line-height:1.7;}

/* faq */
.wpa-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;}

/* closing band */
.wpa-closing{position:relative;isolation:isolate;overflow:hidden;background:#080D18;
  color:#fff;padding:56px 0;text-align:center;}
.wpa-closing>.hpr-wrap{position:relative;z-index:2;}
.wpa-closing h2{font-size:clamp(28px,3vw,38px);}
.wpa-closing>.hpr-wrap>p{font-size:15px;color:#C6D2E2;max-width:520px;margin:14px auto 0;}
.wpa-closing .wpa-card,.wpa-closing .wpa-done{margin:28px auto 0;text-align:left;}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .wpa-hero-grid,.wpa-who-grid,.wpa-faq-grid{gap:44px;}
}
@media(max-width:820px){
  .wpa-hero{padding:110px 0 54px;}
  .wpa-hero-grid,.wpa-who-grid,.wpa-faq-grid{grid-template-columns:1fr;gap:36px;}
  .wpa-section{padding:52px 0;}
  .wpa-steps{grid-template-columns:1fr;gap:16px;}
  .wpa-src{justify-self:start;}
  }
@media(max-width:560px){
  .wpa-field,.wpa-names{flex-direction:column;}
  .wpa-page .wpa-submit{width:100%;}
  .wpa-card,.wpa-done{padding:22px;}
}

/* ---------- contrast fixes on the dark bands ---------- */
.wpa-hero .hpr-eyebrow,
.wpa-closing .hpr-eyebrow{color:#5FE3B4;}
.wpa-hero a,.wpa-closing a{color:inherit;}

/* ============================================================
   DEVICE PREVIEWS: laptop + phone showing the email.
   .dev-view is a real scroll container: the visitor can wheel/drag it,
   and wpa-devices.js drifts it up and down while they are not touching it.
   ============================================================ */
/* more air under the What you get headline (scoped so the FAQ intro is untouched) */
.wpa-preview .wpa-section-intro{margin-top:20px;}
.dev-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:40px;}
.wpa-preview .dev-stage{margin:26px 0 0;}

.dev-view{position:relative;overflow-y:auto;overflow-x:hidden;background:#EDF1EF;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;cursor:ns-resize;
  scrollbar-width:none;-ms-overflow-style:none;}
.dev-view::-webkit-scrollbar{width:0;height:0;}
.dev-view:focus-visible{outline:3px solid #10B981;outline-offset:2px;}
.dev-strip{display:block;width:100%;height:auto;}

/* --- laptop --- */
.dev-laptop{flex:0 1 640px;max-width:640px;}
.dev-lid{background:#151F33;border:1px solid #2A3852;border-radius:12px 12px 4px 4px;
  padding:14px 14px 0;box-shadow:0 34px 70px -34px #000;}
.dev-laptop .dev-view{height:372px;border-radius:3px 3px 0 0;}
.dev-base{height:15px;background:linear-gradient(#22314D,#15203A);
  border-radius:0 0 7px 7px;position:relative;}
.dev-base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:86px;height:6px;background:#0C1524;border-radius:0 0 6px 6px;}
.dev-foot{height:7px;margin:0 -22px;background:linear-gradient(#16223A,#0D1728);
  border-radius:0 0 14px 14px;}

/* --- phone --- */
.dev-phone{flex:0 0 232px;position:relative;z-index:2;}
.dev-phone .dev-frame{background:#0B1220;border:1px solid #2A3852;border-radius:32px;
  padding:11px;box-shadow:0 30px 60px -28px #000;}
.dev-phone .dev-view{height:400px;border-radius:22px;}

@media(max-width:1000px){
  .dev-stage{gap:26px;}
  .dev-laptop{flex:1 1 auto;}
  .dev-laptop .dev-view{height:300px;}
  .dev-phone{flex:0 0 196px;}
  .dev-phone .dev-view{height:336px;}
}
@media(max-width:760px){
  .wpa-preview .dev-stage{flex-direction:column;align-items:center;gap:34px;}
  .dev-laptop{width:100%;max-width:520px;}
  .dev-laptop .dev-view{height:260px;}
  .dev-phone{margin-bottom:0;flex:0 0 auto;width:212px;}
  .dev-phone .dev-view{height:380px;}
}

/* ============================================================
   BETA TESTER QUOTES: reuses the homepage .hpr-review-* component
   from homepage-redesign.css; only the star rating is new.
   ============================================================ */
/* the carousel already carries its own breathing room, so the section's
   76px foot left a large gap before the navy band */
.wpa-quotes{padding-bottom:58px;}
.wpa-quotes .hpr-reviews-grid{margin-top:34px;grid-template-columns:1fr 1fr;align-items:stretch;}
/* both quotes carry equal weight here, so equal columns: and the author
   block is pushed to the bottom so the two rows line up across the cards. */
.wpa-quotes .hpr-reviews-grid article{display:flex;flex-direction:column;}
.wpa-quotes .hpr-review-author{margin-top:auto;}
.wpa-quotes .hpr-review-feature{position:relative;isolation:isolate;overflow:hidden;}
.wpa-quotes .hpr-review-feature>:not(.starfield){position:relative;z-index:2;}

.wpa-stars{display:inline-flex;gap:3px;flex-shrink:0;line-height:1;}
.wpa-stars i{font-style:normal;font-size:17px;color:#0A9D6C;}
.hpr-review-feature .wpa-stars i{color:#03DE96;}

/* the quotes run long: ease the type down from the homepage's 22px */
.wpa-quotes .hpr-reviews-grid blockquote{font-size:16px;line-height:1.72;margin:16px 0 26px;}

/* Highlighted phrases: the brand's green highlighter, carried over from the
   social artwork. box-decoration-break:clone keeps the rounded ends on every
   line when a phrase wraps. */
.wpa-mark{background:rgba(10,157,108,.16);color:inherit;border-radius:5px;
  padding:.12em .28em;margin:0 -.04em;font-weight:500;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.hpr-review-feature .wpa-mark{background:rgba(3,222,150,.24);color:#EAFFF6;}
/* list copy is muted grey; lift the marked phrase to ink so it reads as emphasis */
.wpa-who .wpa-mark{color:#0B1220;font-weight:600;}
/* pull a trailing full stop back against the highlight */
.wpa-who ul li .wpa-mark:last-child{margin-right:-.2em;}
.wpa-quotes .hpr-review-author div>span{font-size:12px;opacity:.75;display:block;}

@media(max-width:900px){
  .wpa-quotes .hpr-reviews-grid{grid-template-columns:1fr;}
  .wpa-quotes .hpr-reviews-grid blockquote{font-size:15px;}
}

/* ---------- logo carousel (same component as the beta page) ---------- */
.wpa-logoband{padding:20px 0;}
.wpa-logos{margin:0;}
.wpa-logos .hpr-eyebrow{text-align:center;margin-bottom:8px;}
.wpa-logos .hpr-firm-logos{margin:0 auto;padding:0;
  /* a later rule in homepage-redesign.css clears the mask, so the track was
     hard-clipping mid-logo at both edges. Put the fade back. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);}

/* ---------- navy band ----------
   White and mint sit 1.05:1 apart, which reads as one continuous field over
   six sections. One navy band (the brand panel colour, used on the homepage)
   gives the alternation something to turn against. */
.wpa-navy{position:relative;isolation:isolate;overflow:hidden;background:#080D18;color:#fff;}
.wpa-navy>.hpr-wrap{position:relative;z-index:2;}
/* script.js fills the layer with stars; homepage-redesign.js already sets
   --star-offset on any .starfield inside .homepage-redesign, but the transform
   is scoped to the homepage's own selectors, so opt this band in. */
.wpa-navy>.starfield{inset:-170px 0;transform:translate3d(0,var(--star-offset,0px),0);
  will-change:transform;}
@media(prefers-reduced-motion:reduce){.wpa-navy>.starfield{transform:none!important;}}
.wpa-navy .hpr-eyebrow{color:#5FE3B4;}
.wpa-navy h2{color:#fff;}
.wpa-navy .wpa-steps li{background:#fff;border-color:#1E2A40;color:var(--soft);}
/* the cards are white, so their text must not inherit the band's white */
.wpa-navy .wpa-steps h3{color:#0B1220;}

/* ---------- step numbers pulse left to right, on a loop ---------- */
@keyframes wpaDotPulse{
  0%   {transform:scale(1);}
  15%  {transform:scale(1.2);}
  33%  {transform:scale(1);}
  100% {transform:scale(1);}
}
.wpa-navy .wpa-steps .wpa-dot{
  animation:wpaDotPulse 3.3s ease-in-out infinite;
  will-change:transform;
}
.wpa-navy .wpa-steps li:nth-child(1) .wpa-dot{animation-delay:0s;}
.wpa-navy .wpa-steps li:nth-child(2) .wpa-dot{animation-delay:1.1s;}
.wpa-navy .wpa-steps li:nth-child(3) .wpa-dot{animation-delay:2.2s;}
@media(prefers-reduced-motion:reduce){
  .wpa-navy .wpa-steps .wpa-dot{animation:none;}
}
.wpa-logoband .hpr-logo-group>span{min-height:40px;}
/* the tall Eire mark (92px) sets the row height, not the padding */
.wpa-logoband .hpr-logo-group img{max-height:44px;}
.wpa-logoband .hpr-logo-group img.hpr-logo-tall{max-width:66px;max-height:66px;}

/* Equal padding either side of each logo, so the gap is constant and the
   slot no longer varies with how wide each mark happens to be. */
.wpa-logoband .hpr-logo-group{gap:0;padding-right:0;}
.wpa-logoband .hpr-logo-group>span{width:auto;flex:0 0 auto;padding:0 34px;}
.wpa-logoband .hpr-logo-group>span::after{right:0;}
/* .hpr-firm-logos img sets width:150px, so every mark was still being forced
   into an identical slot. Let each one take its natural width at a shared
   optical height; the 34px padding does all the spacing. */
.wpa-logoband .hpr-logo-group img{width:auto;max-width:168px;max-height:42px;}
.wpa-logoband .hpr-logo-group img.hpr-logo-tall{max-width:54px;max-height:54px;}

/* ---------- hero signup: a touch smaller than the closing one ---------- */
.wpa-hero .wpa-card,.wpa-hero .wpa-done{max-width:470px;padding:22px;}
.wpa-hero .wpa-card label{font-size:11.5px;margin-bottom:7px;}
.wpa-hero .wpa-names{gap:8px;margin-bottom:8px;}
.wpa-hero .wpa-field{gap:8px;}
.wpa-hero .wpa-names input,
.wpa-hero .wpa-field input{min-height:46px;padding:12px 14px;font-size:14px;}
.wpa-page .wpa-hero .wpa-submit{min-height:46px;padding:12px 20px;font-size:13.5px;}
.wpa-hero .wpa-micro{font-size:9.5px;margin-top:8px;}

/* ---------- final CTA: mint field ---------- */
.wpa-closing{background:#F3FBF7;color:#0B1220;}
.wpa-closing>.starfield{display:none;}
.wpa-closing .hpr-eyebrow{color:#087955;}
.wpa-closing h2{color:#0B1220;}
.wpa-closing>.hpr-wrap>p{color:#44516a;}
/* white card lifts off the mint; green button returns */
.wpa-closing .wpa-card,.wpa-closing .wpa-done{background:#fff;border:1px solid #D9EBE2;}
.wpa-closing .wpa-names input,.wpa-closing .wpa-field input{border-color:#C9DED4;}
.wpa-closing .wpa-micro{color:#476459;}
.wpa-preview-cta{margin-top:34px;text-align:center;}
.wpa-preview{padding-bottom:40px;}
/* White on the standard #10B981 is only 2.54:1, so the button green goes
   a step darker (#087955, already used on the beta page) for 5.42:1. */
.wpa-preview-cta .hpr-button{color:#fff;background:#087955;}
.wpa-preview-cta .hpr-button:hover{color:#fff;background:#0A9D6C;}
@media(max-width:820px){.wpa-video{margin:0 auto;}}

/* ---------- final CTA: devices left, copy and form right ---------- */
.wpa-closing-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;}
.wpa-page .wpa-closing{text-align:left;}
.wpa-closing-copy .hpr-eyebrow{text-align:left;}
.wpa-page .wpa-closing .wpa-card,.wpa-page .wpa-closing .wpa-done{margin:24px 0 0;max-width:460px;}
.wpa-closing-copy>p{margin-left:0;margin-right:0;}

/* smaller device pair than the What you get section */
.wpa-closing .dev-stage{margin:0;gap:0;justify-content:center;}
.wpa-closing .dev-phone{flex:0 0 250px;}
.wpa-closing .dev-phone .dev-frame{border-radius:34px;padding:11px;}
.wpa-closing .dev-phone .dev-view{height:440px;border-radius:24px;}

@media(max-width:900px){
  .wpa-closing-grid{grid-template-columns:1fr;gap:40px;}
  /* keep the form near the top on a phone */
  .wpa-closing-copy{order:1;}
  .wpa-closing-devices{order:2;}
  .wpa-page .wpa-closing .wpa-card,.wpa-page .wpa-closing .wpa-done{max-width:none;}
  .wpa-closing .dev-stage{justify-content:center;}
}
@media(max-width:620px){

    .wpa-closing .dev-phone{flex:0 0 210px;}
  .wpa-closing .dev-phone .dev-view{height:370px;}
}
/* Each mark has a different aspect ratio, so a single max-height renders them
   at very different optical weights (Lovetts read much larger than the rest).
   Sized individually to roughly equal visual area instead. */
.wpa-logoband .hpr-logo-group img[src*="lovetts"]{max-width:146px;max-height:none;}
.wpa-logoband .hpr-logo-group img[src*="empire"]{max-width:none;max-height:44px;}
.wpa-logoband .hpr-logo-group img[src*="philip-strout"]{max-width:none;max-height:43px;}
.wpa-logoband .hpr-logo-group img[src*="intrepid"]{max-width:180px;max-height:none;}
.wpa-logoband .hpr-logo-group img[src*="eire"]{max-width:62px;max-height:57px;}