.welcomeModalBackdrop{
  position:fixed;
  inset:0;
  z-index:2147483645;
  display:grid;
  place-items:center;
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
  background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--accent) 12%,rgba(4,8,14,.9)),rgba(4,8,14,.9));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transition:opacity .34s ease,visibility .34s ease;
}
.welcomeModalBackdrop.is-open{
  opacity:1;
  visibility:visible;
}
.welcomeModal{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  width:min(600px,100%);
  /* Sized to fit without scrolling; the cap is a safety net for short viewports.
     94dvh (not 90) so a ~580px modal still clears a 640px-tall window. The
     absolute cap only binds on tall viewports, where it must stay clear of the
     natural content height (~660px) or the dialog clips for no reason. */
  max-height:min(94dvh,700px);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line));
  border-radius:24px;
  background:color-mix(in srgb,var(--panel) 96%,black 4%);
  box-shadow:
    0 30px 90px rgba(0,0,0,.6),
    0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent),
    0 0 40px color-mix(in srgb,var(--accent) 12%,transparent);
  transform:translateY(14px) scale(.988);
  transition:transform .4s cubic-bezier(.2,.85,.2,1);
}
.welcomeModalBackdrop.is-open .welcomeModal{
  transform:translateY(0) scale(1);
}
/* Hairline of accent light along the top edge. */
.welcomeModal::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent2,var(--accent)) 85%,transparent),transparent);
}
.welcomeModal::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 4%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 4%,transparent) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(to bottom,black 38%,transparent 82%);
}
.welcomeModalGlare{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.welcomeModalGlare::before{
  content:"";
  position:absolute;
  top:-30%;
  left:-45%;
  width:50%;
  height:160%;
  background:linear-gradient(108deg,transparent 42%,color-mix(in srgb,#fff 11%,transparent) 50%,transparent 58%);
  transform:rotate(10deg);
  animation:welcomeGlare 6s ease-in-out infinite;
}
@keyframes welcomeGlare{
  0%,100%{transform:translateX(-20%) rotate(10deg);opacity:0}
  16%,38%{opacity:1}
  58%,100%{transform:translateX(240%) rotate(10deg);opacity:0}
}
.welcomeModalHeader{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:11px;
  padding:26px 30px 19px;
  text-align:center;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  background:
    radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 58%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel));
}
.welcomeModalClose{
  position:absolute;
  top:13px;
  right:13px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:10px;
  background:color-mix(in srgb,var(--surface-raised,var(--panel2)) 88%,transparent);
  color:var(--muted);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.welcomeModalClose:hover{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-raised,var(--panel2)));
  color:var(--text);
  transform:rotate(90deg);
}
.welcomeLogoStage{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:17px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
  background:
    radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent2,var(--accent)) 16%,transparent),transparent 54%),
    linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--surface-raised,var(--panel2))),var(--surface-input,var(--panel)));
  box-shadow:
    0 12px 26px rgba(0,0,0,.24),
    inset 0 0 22px color-mix(in srgb,var(--accent) 11%,transparent),
    0 0 20px color-mix(in srgb,var(--accent) 12%,transparent);
}
.welcomeLogoStage img{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 13px rgba(0,0,0,.22));
}
.welcomeModalEyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 11px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-raised,var(--panel2)));
  color:var(--accent2,var(--accent));
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 9%,transparent);
}
.welcomeModalEyebrow::before,
.welcomeModalEyebrow::after{
  content:"";
  width:12px;
  height:1px;
  background:color-mix(in srgb,var(--accent2,var(--accent)) 70%,transparent);
}
.welcomeModalHeader h2{
  margin:0;
  max-width:17ch;
  font-size:clamp(1.3rem,3.4vw,1.68rem);
  line-height:1.16;
  letter-spacing:-.032em;
}
.welcomeModalHeader h2 em{
  color:var(--accent2,var(--accent));
  font-style:normal;
  text-shadow:0 0 22px color-mix(in srgb,var(--accent) 26%,transparent);
}
.welcomeModalHeader p{
  margin:0;
  max-width:44ch;
  color:var(--muted);
  font-size:.855rem;
  line-height:1.5;
}
/* Sample result, anchored by the same price-tag mark used on the Summary page's
   Suggested Selling Price tile (images/ptag.svg). Mirrors that tile's treatment:
   the art sits in an accent-tinted round stage. */
.welcomePriceExample{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:2px;
  padding:7px 14px 7px 7px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:999px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--surface-raised,var(--panel2))),var(--surface-input,var(--panel)));
  box-shadow:0 8px 20px rgba(0,0,0,.16),inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent);
  text-align:left;
}
.welcomePriceExampleIcon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 16%,var(--surface-raised,var(--panel)));
}
/* ptag.svg is 1254x836 (3:2), so object-fit:contain in a square box fits to the
   WIDTH and leaves the vertical third empty -- the art reads much smaller than
   the box. Size the box to the circle's usable width and cap the height, so the
   tag grows without the circle (and therefore the chip) growing at all. */
.welcomePriceExampleIcon img{
  width:46px;
  height:32px;
  object-fit:contain;
  display:block;
}
.welcomePriceExampleCopy{
  display:grid;
  gap:1px;
  line-height:1.1;
}
.welcomePriceExampleCopy small{
  color:var(--muted);
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.welcomePriceExampleCopy b{
  color:var(--accent2,var(--accent));
  font-size:1.06rem;
  letter-spacing:-.02em;
}
.welcomePriceExample em{
  padding-left:11px;
  border-left:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
  color:var(--muted);
  font-style:normal;
  font-size:.7rem;
  white-space:nowrap;
}
.welcomeModalBody{
  position:relative;
  z-index:2;
  padding:17px 24px 14px;
}
.welcomeFeatureGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.welcomeFeature{
  position:relative;
  display:grid;
  align-content:start;
  gap:8px;
  min-height:100%;
  padding:13px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
  border-radius:15px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface-raised,var(--panel2)) 94%,var(--accent) 6%),var(--surface-input,var(--panel)));
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.welcomeFeature:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
  box-shadow:0 14px 28px rgba(0,0,0,.18),0 0 16px color-mix(in srgb,var(--accent) 9%,transparent);
}
.welcomeFeatureIcon{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));
  border-radius:11px;
  color:var(--accent2,var(--accent));
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,var(--surface-input,var(--panel))),var(--surface-raised,var(--panel2)));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent);
}
.welcomeFeatureIcon svg{
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.welcomeFeature b{
  display:block;
  font-size:.845rem;
  line-height:1.25;
  letter-spacing:-.01em;
}
.welcomeFeatureText{
  margin:0;
  color:var(--muted);
  font-size:.745rem;
  line-height:1.45;
}
.welcomeModal article{margin:0}
.welcomeModal .welcomeFeatureIcon,
.welcomeModal .welcomeFeatureIcon svg{
  position:static!important;
  float:none!important;
  padding:0!important;
}
.welcomeTrustStrip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px 20px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
  color:var(--muted);
  font-size:.7rem;
}
.welcomeTrustStrip span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.welcomeTrustStrip span::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent2,var(--accent));
  box-shadow:0 0 7px color-mix(in srgb,var(--accent) 55%,transparent);
}
.welcomeModalFooter{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 24px 17px;
  border-top:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,var(--surface-raised,var(--panel2))),var(--surface-raised,var(--panel2)));
}
.welcomeDismissLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:.79rem;
  cursor:pointer;
  user-select:none;
}
.welcomeDismissLabel input{
  width:16px;
  height:16px;
  accent-color:var(--accent);
}
.welcomeModalActions{
  display:grid;
  gap:3px;
  margin-left:auto;
  text-align:right;
}
.welcomeModalActions .btn{
  min-width:152px;
  min-height:44px;
  padding:10px 18px;
  border-color:color-mix(in srgb,var(--accent2,var(--accent)) 72%,var(--line));
  background:linear-gradient(135deg,var(--accent2,var(--accent)),var(--accent));
  box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 22%,transparent);
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease;
}
.welcomeModalActions .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 27px color-mix(in srgb,var(--accent) 32%,transparent);
}
.welcomeModalActions small{
  color:var(--muted);
  font-size:.68rem;
}
@media(max-width:720px){
  /* Icon beside the copy instead of above it — the stacked card layout was the
     main source of vertical overflow on phones. */
  .welcomeFeatureGrid{grid-template-columns:1fr;gap:8px}
  .welcomeFeature{grid-template-columns:auto 1fr;align-items:start;gap:3px 12px;padding:11px 13px}
  .welcomeFeatureIcon{grid-row:span 2;align-self:center}
  .welcomeFeatureText{font-size:.72rem;line-height:1.4}
  /* The logo stage is the single largest block of pure decoration; the eyebrow
     and headline carry the branding, so drop it rather than force a scrollbar. */
  .welcomeLogoStage{display:none}
  .welcomeModalHeader{padding:19px 18px 15px;gap:8px}
  .welcomeModalBody{padding:14px 18px 12px}
  /* The input breakdown does not fit beside the price on a phone. */
  .welcomePriceExample{gap:9px;padding:6px 13px 6px 6px}
  .welcomePriceExample em{display:none}
  .welcomePriceExampleIcon{width:44px;height:44px}
  .welcomePriceExampleIcon img{width:40px;height:28px}
  .welcomeModalFooter{align-items:stretch;flex-direction:column;gap:11px;padding:13px 18px 16px}
  .welcomeModalActions{width:100%;margin-left:0;text-align:center}
  .welcomeModalActions .btn{width:100%}
  .welcomeTrustStrip{gap:6px 14px;margin-top:12px;padding-top:11px;font-size:.67rem}
}
@media(max-width:480px){
  .welcomeModal{border-radius:19px}
  .welcomeModalEyebrow::before,
  .welcomeModalEyebrow::after{display:none}
  .welcomeModalHeader h2{max-width:none}
  .welcomeFeature:hover{transform:none}
}
/* Short viewports: drop the decorative logo before allowing a scrollbar. The
   example price chip earns its space; the logo is the cheaper thing to lose. */
@media(max-height:700px){
  .welcomeLogoStage{display:none}
  .welcomeModalHeader{padding-top:20px;gap:9px}
}
/* Small phones (360x640 and similar): the trust strip wraps to two lines and is
   the last piece of non-essential content, so it goes before a scrollbar does. */
@media(max-width:720px) and (max-height:680px){
  .welcomeTrustStrip{display:none}
  .welcomeModalBody{padding-bottom:14px}
  .welcomeModalHeader{padding-top:15px;gap:7px}
  .welcomeFeatureGrid{gap:6px}
  .welcomeFeature{padding:9px 12px}
  .welcomePriceExample{padding:5px 12px 5px 5px}
  .welcomePriceExampleIcon{width:40px;height:40px}
  .welcomePriceExampleIcon img{width:36px;height:25px}
  .welcomeModalHeader p{font-size:.8rem;line-height:1.38}
}
/* Legacy 320px-wide phones: feature copy wraps to four lines each. Clamp to two
   so the dialog still fits rather than trimming the features entirely. */
@media(max-width:340px){
  .welcomeFeatureText{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){
  .welcomeModalBackdrop,
  .welcomeModal,
  .welcomeModalGlare::before,
  .welcomeFeature,
  .welcomeModalActions .btn,
  .welcomeModalClose{transition:none!important;animation:none!important;transform:none!important}
}

/* The signup call to action.
   It started as a plain underlined link and was too quiet to do its job — this modal is the only
   place a visitor is invited to create an account, and paid traffic is bought against exactly that.
   Now a filled accent pill: bigger text than the line around it, real padding, and a hover lift so
   it reads as something to press rather than fine print.
   "Open calculator" is still the primary action; this is deliberately a different SHAPE rather than
   a second identical button, so the two read as "use it now" vs "keep it", not as a coin toss. */
.welcomeSignInLine{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  margin-top:9px;font-size:.76rem;color:var(--muted)}
.welcomeSignInLine .welcomeSignUpLink{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:999px;cursor:pointer;
  font-size:.95rem;font-weight:750;letter-spacing:.01em;line-height:1;
  color:var(--buttonText,#0b1220);
  background:linear-gradient(135deg,var(--accent,#3fa9ff),var(--accent2,var(--accent,#39b6ff)));
  border:1px solid color-mix(in srgb,var(--accent,#3fa9ff) 70%,transparent);
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent,#3fa9ff) 32%,transparent);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
/* A small arrow that nudges on hover — cheap, and it reads as "this goes somewhere". */
.welcomeSignInLine .welcomeSignUpLink::after{content:"→";font-size:.98em;transition:transform .16s ease}
.welcomeSignInLine .welcomeSignUpLink:hover{
  transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent,#3fa9ff) 44%,transparent)}
.welcomeSignInLine .welcomeSignUpLink:hover::after{transform:translateX(3px)}
.welcomeSignInLine .welcomeSignUpLink:focus-visible{
  outline:2px solid var(--accent,#3fa9ff);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .welcomeSignInLine .welcomeSignUpLink,
  .welcomeSignInLine .welcomeSignUpLink::after{transition:none}
  .welcomeSignInLine .welcomeSignUpLink:hover{transform:none}}
@media(max-width:520px){
  .welcomeSignInLine{justify-content:center;text-align:center}
  .welcomeSignInLine .welcomeSignUpLink{width:100%;justify-content:center}}