@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-Light.ttf") format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-Italic.ttf") format("truetype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype");
  font-weight:500;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype");
  font-weight:600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

:root{
  --gold:#efaa15;
  --ink:#f6f1e8;
  --muted:rgba(246,241,232,.68);
  --line:rgba(239,170,21,.30);
  --panel:rgba(16,16,16,.42);
  --glass:rgba(255,255,255,.075);
  --stage-scale:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#2a2a2a}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:"Plus Jakarta Sans";
  background:#2a2a2a;
  overflow-x:hidden;
  letter-spacing:.012em;
}
.page-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 18% 15%, rgba(239,170,21,.095), transparent 30%),
    radial-gradient(circle at 78% 22%, rgba(190,190,190,.09), transparent 34%),
    linear-gradient(135deg, #222222 0%, #343434 48%, #2a2a2a 100%);
}
.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.24));
  backdrop-filter:blur(0px);
}
.wg-topbar{
  position:sticky;
  top:0;
  z-index:50;
  height:96px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:0 clamp(22px,4vw,64px) 18px 40px;
  background:linear-gradient(180deg, rgba(42,42,42,.72), rgba(42,42,42,.26));
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wg-logo{width:clamp(190px,18vw,310px);max-width:52vw;height:auto;filter:brightness(1.06);display:block;}
.wg-nav{display:flex;gap:10px;align-items:center;margin-top:18px;font-family:"Plus Jakarta Sans", Arial, sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,241,232,.78)}
.wg-nav a{color:inherit;text-decoration:none;padding:10px 13px;border-radius:999px;transition:.25s ease}
.wg-nav a:hover{color:var(--gold);background:rgba(255,255,255,.06)}
.wg-nav .pill{border:1px solid rgba(255,255,255,.23);background:rgba(255,255,255,.06)}
main{padding:clamp(6px,2.4vw,42px) clamp(18px,4vw,64px) 90px}
/* v24: shift all below-nav content upward for a stronger initial reveal on arrival. */
.hero{max-width:1760px;margin:0 auto}
.copy-block{max-width:1420px;margin:0 0 26px 0;text-align:left}
.eyebrow{
  display:inline-block;
  color:var(--gold);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:17px;
}
h1{
  font-family:"Plus Jakarta Sans", Arial, sans-serif;
  margin:0;
  font-size:clamp(42px,5.6vw,82px);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.045em;
  max-width:1120px;
}

.headline-soft{color:rgba(246,241,232,.76);}
.headline-punch{color:#ffffff;}
.lead{
  margin:25px 0 0;
  max-width:760px;
  font-family:"Plus Jakarta Sans", Arial, sans-serif;
  color:var(--muted);
  font-size:clamp(16px,1.6vw,21px);
  line-height:1.55;
}
.comparison-card{
  position:relative;
  overflow:visible;
  border-radius:0;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}
.compare-layout{
  position:relative;
  display:block;
}
.compare-main{
  min-width:0;
  width:100%;
}
.comparison-card::before{display:none}
.comparison-head{
  position:absolute;
  z-index:40;
  top:clamp(104px,7.2vw,148px);
  left:calc((1608px * var(--stage-scale)) + clamp(30px, 2.2vw, 42px));
  right:auto;
  width:min(360px, calc(100% - ((1608px * var(--stage-scale)) + clamp(30px, 2.2vw, 42px)) - 22px));
  min-width:240px;
  padding-left:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
  text-align:left;
  pointer-events:none;
}
.small-label{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--gold)}
h2{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:2px 0 0;font-size:clamp(24px,2.35vw,38px);line-height:1.08;font-weight:500;letter-spacing:-.03em;max-width:11ch}
.comparison-head p{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:0;color:rgba(246,241,232,.66);font-size:14px;line-height:1.6;max-width:360px}
.compare-shell{position:relative;z-index:2;width:100%;overflow:visible;border-radius:0;background:transparent;box-shadow:none}
.stage-holder{position:relative;width:100%;height:calc(1156px * var(--stage-scale));overflow:hidden;background:#fff;touch-action:none}
.stage-fixed{position:absolute;left:0;top:0;width:2048px;height:1156px;transform:scale(var(--stage-scale));transform-origin:top left;overflow:hidden;background:#fff;--split:1024px}
.scene{position:absolute;inset:0;z-index:1}
.scene-after{clip-path:inset(0 0 0 var(--split));z-index:2}
.screen{position:absolute;overflow:hidden;background:#fff;z-index:1}
.laptop-screen{left:292px;top:112px;width:1281px;height:801px}
.phone-screen{left:1689px;top:451px;width:246px;height:536px;border-radius:26px}
.before-screen{display:flex;align-items:flex-start;justify-content:center;background:#fff}
.before-screen img{width:100%;height:100%;object-fit:contain;object-position:center top;background:#fff}
.laptop-screen.before-screen img{object-fit:contain;padding:0;background:#fff}
.phone-screen.before-screen img{object-fit:cover;object-position:center top}
.after-screen iframe{border:0;display:block;background:#000;transform-origin:top left;pointer-events:auto}
.laptop-screen.after-screen iframe{width:1440px;height:900px;transform:scale(.89)}
.phone-screen.after-screen iframe{width:390px;height:850px;transform:scale(.631)}
.device-frame{position:absolute;inset:0;width:2048px;height:1156px;z-index:5;pointer-events:none;user-select:none}

.focus-label{
  position:absolute;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:30;
  min-width:250px;
  text-align:center;
  pointer-events:none;
}
.focus-label__text{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%) translateY(8px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  font-family:"Plus Jakarta Sans", Arial, sans-serif;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .28s ease, transform .28s ease;
  color:#fff;
  z-index:31;
}
.focus-label__text--proposed{
  color:var(--gold);
}
.focus-label__text.is-active{
  transform:translateX(-50%) translateY(0);
}

.divider{position:absolute;top:0;left:var(--split);height:1156px;width:80px;transform:translateX(-40px);z-index:18;pointer-events:auto;cursor:ew-resize;touch-action:none}
.divider::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.78);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.handle{position:absolute;left:50%;top:50%;width:86px;height:86px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.93);box-shadow:0 12px 30px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;gap:12px;color:#9a1f27;font-family:"Plus Jakarta Sans", Arial, sans-serif;font-size:40px;line-height:1;font-weight:350;pointer-events:auto}
.range{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;z-index:-1;pointer-events:none;margin:0}
.notes{max-width:1760px;margin:34px auto 0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.note-item{padding:26px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);text-align:left}
.note-item span{color:var(--gold);font-size:12px;letter-spacing:.14em}
.note-item h3{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:13px 0 10px;font-weight:500;font-size:20px;letter-spacing:-.02em}
.note-item p{font-family:"Plus Jakarta Sans", Arial, sans-serif;margin:0;color:rgba(246,241,232,.66);line-height:1.55;font-size:14px}

@media (max-width:1520px) and (min-width:1101px){
  .comparison-head{
    top:clamp(74px, 5.6vw, 104px);
    width:min(360px, calc(100% - ((1608px * var(--stage-scale)) + clamp(34px, 2.4vw, 46px)) - 28px));
    left:calc((1608px * var(--stage-scale)) + clamp(34px, 2.4vw, 46px));
    gap:8px;
  }
  .comparison-head h2{
    font-size:clamp(21px, 1.92vw, 30px);
    line-height:1.06;
    max-width:14ch;
  }
  .comparison-head .small-label{
    font-size:10px;
  }
}

@media (max-width:1420px) and (min-width:1101px){
  .comparison-head{
    top:70px;
    width:min(350px, calc(100% - ((1608px * var(--stage-scale)) + 36px) - 24px));
    left:calc((1608px * var(--stage-scale)) + 36px);
    gap:7px;
  }
  .comparison-head h2{
    font-size:clamp(20px, 1.78vw, 27px);
    line-height:1.05;
    max-width:15ch;
  }
}

@media (max-width:1100px){
  .comparison-head{
    position:relative;
    top:auto;
    right:auto;
    width:auto;
    max-width:760px;
    padding:0 0 18px 0;
  }
}
@media (max-width:900px){
  .wg-topbar{height:auto;align-items:flex-start;gap:14px;flex-direction:column}.wg-nav{flex-wrap:wrap}.notes{grid-template-columns:1fr}.comparison-card{border-radius:24px;padding:18px}.shade{display:none}.handle{width:70px;height:70px;font-size:33px}.copy-block{margin-bottom:22px}.focus-label{top:16px;min-width:220px}.focus-label__text{font-size:11px;padding:10px 15px}
}
@media (max-width:640px){
  main{padding-left:14px;padding-right:14px}.wg-logo{width:clamp(150px,42vw,230px);max-width:52vw}.comparison-card{padding:0;border-radius:0}.compare-shell{border-radius:0}.lead{font-size:15px}.wg-nav a{padding:8px 10px;font-size:10px}h1{font-size:38px}
}

/* Hide iframe scrollbars while preserving scroll functionality inside the live after site. */
.after-screen iframe{scrollbar-width:none;}
.after-screen iframe::-webkit-scrollbar{display:none;}

/* v3 refinements: let the device PNG truly float over the WG background and hide any white fringe around the live iframe. */
.compare-shell,
.stage-holder,
.stage-fixed{
  background:transparent !important;
}
.compare-shell{
  box-shadow:none;
}
/* Overscan the website layers slightly beneath the device frame so no white edge appears between content and mask. */
.laptop-screen{
  left:288px;
  top:108px;
  width:1290px;
  height:810px;
}
.phone-screen{
  left:1685px;
  top:447px;
  width:254px;
  height:544px;
  border-radius:30px;
}
.after-screen iframe{
  background:#000;
}
.laptop-screen.after-screen iframe{
  width:1440px;
  height:920px;
  transform:scale(.896);
}
.phone-screen.after-screen iframe{
  width:390px;
  height:850px;
  transform:scale(.651);
}


/* v5 typography refinements to better match WaltersGroup font usage. */
.copy-block, .comparison-head, .notes, .note-item p, .comparison-head p, .lead, .small-label, .eyebrow{font-family:"Plus Jakarta Sans";}
.copy-block h1, .comparison-head h2, .note-item h3{font-family:"Plus Jakarta Sans";font-weight:500;}
.small-label, .eyebrow{font-weight:500;}
.wg-nav .pill{font-family:"Plus Jakarta Sans";}

/* v20: mid-desktop safeguard so the side prompt never drops onto the phone. */
@media (max-width:1480px) and (min-width:1101px){
  .comparison-head{
    top:64px !important;
  }
  .comparison-head h2{
    font-size:clamp(20px, 1.65vw, 25px) !important;
    line-height:1.05 !important;
    max-width:17ch !important;
  }
}


/* v21 mobile safety: avoid loading two live iframes/videos inside a giant scaled stage on phones. */
.mobile-safe-preview{
  display:none;
}

@media (max-width:760px){
  main{
    padding-top:24px;
  }

  .copy-block{
    margin-bottom:24px;
  }

  .comparison-card{
    padding:0 !important;
  }

  .compare-main,
  .comparison-head{
    display:none !important;
  }

  .mobile-safe-preview{
    display:block;
    margin:28px 0 0;
    padding:22px;
    border-radius:26px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
  }

  .mobile-safe-preview h2{
    margin:8px 0 10px;
    font-size:clamp(28px,9vw,42px);
    line-height:1.04;
    letter-spacing:-.04em;
    max-width:12ch;
  }

  .mobile-safe-preview p{
    margin:0 0 18px;
    color:rgba(246,241,232,.72);
    font-size:15px;
    line-height:1.55;
  }

  .mobile-safe-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .mobile-safe-grid div{
    min-width:0;
  }

  .mobile-safe-grid span{
    display:block;
    margin-bottom:8px;
    color:var(--gold);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .mobile-safe-grid img{
    display:block;
    width:100%;
    aspect-ratio:9/16;
    object-fit:cover;
    object-position:top center;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.16);
    background:#111;
  }

  .notes{
    margin-top:24px;
  }
}


/* v22 value cards */
.note-item span{
  display:block;
  margin-bottom:12px;
}

@media (max-width:1500px){
  .notes{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:980px){
  .notes{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:640px){
  .notes{
    grid-template-columns:1fr;
  }
}



/* v23: exact WaltersGroup Ads page footer boilerplate */
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/PublicSans-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/PublicSans-Italic-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

.wg-footer{
  position:relative !important;
  z-index:20 !important;
  padding:54px clamp(28px, 6vw, 92px) 46px !important;
  color:#fff !important;
  background:
    linear-gradient(135deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.68) 100%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.12), rgba(255,255,255,0) 36%) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  overflow:hidden !important;
}

.wg-footer,
.wg-footer *{
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}

.wg-footer-inner{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:34px !important;
  width:100% !important;
  max-width:1320px !important;
  margin:0 auto !important;
}

.wg-footer-brand{
  max-width:520px !important;
}

.wg-footer-logo{
  display:block !important;
  width:clamp(190px,18vw,310px) !important;
  max-width:310px !important;
  height:auto !important;
  margin:0 0 18px !important;
}

.wg-footer-name{
  font-family:"Public Sans", Arial, Helvetica, sans-serif !important;
  font-size:21px !important;
  line-height:1.12 !important;
  letter-spacing:.02em !important;
  font-weight:700 !important;
  margin:0 0 10px !important;
}

.wg-footer-line,
.wg-footer-email{
  display:block !important;
  font-family:"Public Sans", Arial, Helvetica, sans-serif !important;
  font-size:14px !important;
  line-height:1.55 !important;
  font-weight:600 !important;
  color:#fff !important;
  text-decoration:none !important;
  margin:0 !important;
}

.wg-footer-email{
  margin-top:8px !important;
  font-weight:800 !important;
}

.wg-footer-social{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:0 0 auto !important;
}

.wg-social-icon{
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  border-radius:999px !important;
  color:#fff !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
  transition:color .22s ease, opacity .22s ease, transform .22s ease, background .24s ease, border-color .24s ease !important;
}

.wg-social-icon:hover,
.wg-social-icon:focus-visible{
  color:#d19a2a !important;
  opacity:1 !important;
  background:rgba(188,126,32,.55) !important;
  border-color:rgba(255,220,150,.42) !important;
  transform:translateY(-2px) !important;
}

.wg-social-icon svg{
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:#fff !important;
  stroke-width:1.7 !important;
}

.wg-social-icon svg path,
.wg-social-icon svg rect,
.wg-social-icon svg circle{
  stroke:#fff !important;
  fill:none !important;
}

.wg-social-icon[aria-label="LinkedIn"] svg path,
.wg-social-icon[aria-label="Facebook"] svg path,
.wg-social-icon[aria-label="YouTube"] svg path{
  fill:#fff !important;
  stroke:none !important;
}

.wg-footer .wg-social-icon:hover svg path,
.wg-footer .wg-social-icon:hover svg rect,
.wg-footer .wg-social-icon:hover svg circle,
.wg-footer .wg-social-icon:focus-visible svg path,
.wg-footer .wg-social-icon:focus-visible svg rect,
.wg-footer .wg-social-icon:focus-visible svg circle{
  fill:#d19a2a !important;
  stroke:none !important;
}

.wg-footer .wg-social-email:hover svg path,
.wg-footer .wg-social-email:focus-visible svg path{
  fill:none !important;
  stroke:#d19a2a !important;
}

.wg-footer .wg-cursive-signature-wrap{
  position:absolute !important;
  right:32px !important;
  bottom:24px !important;
  width:180px !important;
  max-width:180px !important;
  height:auto !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  z-index:6 !important;
  pointer-events:none !important;
  opacity:.74 !important;
  overflow:hidden !important;
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
  animation:wgFooterTinySignatureDraw 6.5s cubic-bezier(.16,1,.3,1) .35s forwards !important;
}

.wg-footer .wg-cursive-signature-logo{
  display:block !important;
  width:180px !important;
  max-width:180px !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  opacity:1 !important;
  filter:none !important;
}

.wg-footer .wg-cursive-signature-wrap.is-drawn{
  animation:wgFooterTinySignatureDraw 6.5s cubic-bezier(.16,1,.3,1) forwards !important;
}

@keyframes wgFooterTinySignatureDraw{
  from{
    clip-path:inset(0 100% 0 0);
    -webkit-clip-path:inset(0 100% 0 0);
  }
  to{
    clip-path:inset(0 0 0 0);
    -webkit-clip-path:inset(0 0 0 0);
  }
}

@media(max-width:760px){
  .wg-footer{
    padding:42px 24px 38px !important;
  }

  .wg-footer-inner{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .wg-footer-name{
    font-size:19px !important;
  }

  .wg-footer-line,
  .wg-footer-email{
    font-size:13px !important;
  }

  .wg-footer .wg-cursive-signature-wrap{
    right:20px !important;
    bottom:18px !important;
    width:150px !important;
    max-width:150px !important;
  }

  .wg-footer .wg-cursive-signature-logo{
    width:150px !important;
    max-width:150px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .wg-footer .wg-cursive-signature-wrap{
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }
}


/* v25: match WaltersGroup boilerplate behavior from the current site.
   No social circles, social icons stay beside contact info, and footer text is not heavy. */
.wg-footer{
  padding-left:var(--ads-copy-left, clamp(96px, 10.8vw, 188px)) !important;
  padding-right:var(--ads-copy-left, clamp(96px, 10.8vw, 188px)) !important;
  background:transparent !important;
  background-color:transparent !important;
  border-top:0 !important;
  box-shadow:none !important;
}

.wg-footer::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  height:200px !important;
  margin-left:calc(50% - 50vw) !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:linear-gradient(
    0deg,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.14) 35%,
    rgba(0,0,0,.06) 70%,
    rgba(0,0,0,0) 100%
  ) !important;
}

.wg-footer-inner{
  position:relative !important;
  z-index:1 !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-end !important;
  gap:44px !important;
}

.wg-footer-brand{
  margin-left:0 !important;
  padding-left:0 !important;
  max-width:520px !important;
  text-align:left !important;
}

.wg-footer-line,
.wg-footer-email{
  font-family:"Public Sans", Arial, Helvetica, sans-serif !important;
  font-size:14px !important;
  line-height:1.5 !important;
  font-weight:400 !important;
  color:#fff !important;
  text-decoration:none !important;
}

.wg-footer-email{
  margin-top:9px !important;
  font-weight:500 !important;
}

.wg-footer-social{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:20px !important;
  flex:0 0 auto !important;
  margin-left:28px !important;
  margin-right:0 !important;
  padding:0 !important;
  align-self:flex-end !important;
}

.wg-social-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:color .22s ease, opacity .22s ease, transform .22s ease !important;
}

.wg-social-icon:hover,
.wg-social-icon:focus-visible{
  background:transparent !important;
  border:0 !important;
  color:#d19a2a !important;
  opacity:1 !important;
  transform:translateY(-1px) !important;
}

.wg-social-icon svg{
  width:22px !important;
  height:22px !important;
}

.wg-social-icon svg path,
.wg-social-icon svg rect,
.wg-social-icon svg circle{
  fill:#fff !important;
  stroke:none !important;
}

.wg-social-icon:hover svg path,
.wg-social-icon:hover svg rect,
.wg-social-icon:hover svg circle,
.wg-social-icon:focus-visible svg path,
.wg-social-icon:focus-visible svg rect,
.wg-social-icon:focus-visible svg circle{
  fill:#d19a2a !important;
  stroke:none !important;
}

.wg-social-icon.wg-social-email svg{
  width:23px !important;
  height:23px !important;
}

.wg-social-icon.wg-social-email svg path{
  fill:none !important;
  stroke:#fff !important;
  stroke-width:1.75 !important;
  stroke-linejoin:round !important;
  stroke-linecap:round !important;
}

.wg-social-icon.wg-social-email:hover svg path,
.wg-social-icon.wg-social-email:focus-visible svg path{
  fill:none !important;
  stroke:#d19a2a !important;
}

@media(max-width:980px){
  .wg-footer{
    padding-left:32px !important;
    padding-right:32px !important;
  }
}

@media(max-width:760px){
  .wg-footer{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .wg-footer-inner{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:24px !important;
  }

  .wg-footer-social{
    margin-left:0 !important;
    align-self:flex-start !important;
  }

  .wg-footer-line,
  .wg-footer-email{
    font-size:13px !important;
  }
}


/* v26: top nav CTA behavior */
.wg-nav a{
  border:1px solid transparent;
}

.wg-nav .nav-proposed,
.wg-nav .nav-scope{
  border:1px solid rgba(255,255,255,.20);
  background:transparent;
  color:rgba(246,241,232,.90);
}

.wg-nav .nav-proposed:hover,
.wg-nav .nav-proposed:focus-visible,
.wg-nav .nav-scope:hover,
.wg-nav .nav-scope:focus-visible{
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:#fff !important;
}

.wg-nav .nav-start,
.wg-nav .pill.nav-start{
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:#fff !important;
}

.wg-nav .nav-start:hover,
.wg-nav .nav-start:focus-visible{
  background:#c98610 !important;
  border-color:#c98610 !important;
  color:#fff !important;
}


/* v27: force header nav buttons to final requested state */
header.wg-topbar nav.wg-nav a.nav-btn,
header.wg-topbar nav.wg-nav a.nav-btn:link,
header.wg-topbar nav.wg-nav a.nav-btn:visited{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:transparent !important;
  color:rgba(246,241,232,.92) !important;
  box-shadow:none !important;
}

header.wg-topbar nav.wg-nav a.nav-proposed,
header.wg-topbar nav.wg-nav a.nav-proposed:link,
header.wg-topbar nav.wg-nav a.nav-proposed:visited,
header.wg-topbar nav.wg-nav a.nav-scope,
header.wg-topbar nav.wg-nav a.nav-scope:link,
header.wg-topbar nav.wg-nav a.nav-scope:visited{
  background:transparent !important;
  border-color:rgba(255,255,255,.24) !important;
  color:rgba(246,241,232,.92) !important;
}

header.wg-topbar nav.wg-nav a.nav-proposed:hover,
header.wg-topbar nav.wg-nav a.nav-proposed:focus-visible,
header.wg-topbar nav.wg-nav a.nav-scope:hover,
header.wg-topbar nav.wg-nav a.nav-scope:focus-visible{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#fff !important;
}

header.wg-topbar nav.wg-nav a.nav-start,
header.wg-topbar nav.wg-nav a.nav-start:link,
header.wg-topbar nav.wg-nav a.nav-start:visited{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#fff !important;
}

header.wg-topbar nav.wg-nav a.nav-start:hover,
header.wg-topbar nav.wg-nav a.nav-start:focus-visible{
  background:#c98610 !important;
  border-color:#c98610 !important;
  color:#fff !important;
}


/* v28: add Contact button and restore darker before/after slider control style */
header.wg-topbar nav.wg-nav a.nav-contact,
header.wg-topbar nav.wg-nav a.nav-contact:link,
header.wg-topbar nav.wg-nav a.nav-contact:visited{
  background:transparent !important;
  border-color:rgba(255,255,255,.24) !important;
  color:rgba(246,241,232,.92) !important;
}

header.wg-topbar nav.wg-nav a.nav-contact:hover,
header.wg-topbar nav.wg-nav a.nav-contact:focus-visible{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#fff !important;
}

/* darker divider and handle, closer to the preferred earlier look */
.divider::before{
  width:2px !important;
  background:#efaa15 !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 0 18px rgba(239,170,21,.20) !important;
}

.handle{
  width:86px !important;
  height:86px !important;
  background:#2b2b2b !important;
  border:1px solid rgba(239,170,21,.55) !important;
  color:#efaa15 !important;
  box-shadow:0 14px 36px rgba(0,0,0,.38) !important;
  font-weight:600 !important;
}

.handle span{
  color:#efaa15 !important;
}

.handle:hover{
  background:#222 !important;
  border-color:#efaa15 !important;
}


/* v30: project investment/pricing section */
.investment-section{
  max-width:1760px;
  margin:42px auto 0;
  padding:clamp(26px,3vw,42px);
  border-radius:30px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  text-align:left;
}

.investment-copy{
  max-width:880px;
  margin-bottom:28px;
}

.investment-copy h2{
  max-width:760px;
  margin:10px 0 14px;
  font-size:clamp(32px,3.7vw,58px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.investment-copy p{
  max-width:760px;
  margin:0;
  color:rgba(246,241,232,.70);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
}

.investment-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.investment-card{
  padding:26px;
  border-radius:24px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.13);
}

.investment-card--primary{
  background:linear-gradient(135deg, rgba(239,170,21,.20), rgba(0,0,0,.16));
  border-color:rgba(239,170,21,.32);
}

.investment-card span{
  display:block;
  color:var(--gold);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:13px;
}

.investment-card h3{
  margin:0 0 12px;
  font-size:clamp(34px,3.4vw,54px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:500;
}

.investment-card h3 em{
  font-style:normal;
  font-size:.34em;
  letter-spacing:-.01em;
  color:rgba(246,241,232,.70);
}

.investment-card p{
  margin:0;
  color:rgba(246,241,232,.68);
  font-size:14px;
  line-height:1.55;
}

.payment-options{
  margin-top:16px;
  padding:24px 26px;
  border-radius:24px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns:minmax(240px,420px) 1fr;
  gap:24px;
  align-items:start;
}

.payment-options h3{
  margin:10px 0 0;
  font-size:clamp(23px,2vw,34px);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:500;
}

.payment-list{
  display:grid;
  gap:10px;
}

.payment-list p{
  margin:0;
  color:rgba(246,241,232,.72);
  font-size:15px;
  line-height:1.5;
}

.payment-list strong{
  color:#fff;
  font-weight:500;
}

@media(max-width:980px){
  .investment-grid{
    grid-template-columns:1fr;
  }

  .payment-options{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .investment-section{
    padding:22px;
    border-radius:24px;
  }

  .investment-card{
    padding:22px;
  }
}


/* v31: project investment/pricing section */
.investment-section{
  max-width:1760px;
  margin:42px auto 0;
  padding:clamp(26px,3vw,42px);
  border-radius:30px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  text-align:left;
}

.investment-copy{
  max-width:880px;
  margin-bottom:28px;
}

.investment-copy h2{
  max-width:760px;
  margin:10px 0 14px;
  font-size:clamp(32px,3.7vw,58px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:500;
}

.investment-copy p{
  max-width:760px;
  margin:0;
  color:rgba(246,241,232,.70);
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
}

.investment-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.investment-card{
  padding:26px;
  border-radius:24px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.13);
}

.investment-card--primary{
  background:linear-gradient(135deg, rgba(239,170,21,.20), rgba(0,0,0,.16));
  border-color:rgba(239,170,21,.32);
}

.investment-card span{
  display:block;
  color:var(--gold);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:13px;
}

.investment-card h3{
  margin:0 0 12px;
  font-size:clamp(34px,3.4vw,54px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:500;
}

.investment-card h3 em{
  font-style:normal;
  font-size:.34em;
  letter-spacing:-.01em;
  color:rgba(246,241,232,.70);
}

.investment-card p{
  margin:0;
  color:rgba(246,241,232,.68);
  font-size:14px;
  line-height:1.55;
}

.payment-options{
  margin-top:16px;
  padding:24px 26px;
  border-radius:24px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns:minmax(240px,420px) 1fr;
  gap:24px;
  align-items:start;
}

.payment-options h3{
  margin:10px 0 0;
  font-size:clamp(23px,2vw,34px);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:500;
}

.payment-list{
  display:grid;
  gap:10px;
}

.payment-list p{
  margin:0;
  color:rgba(246,241,232,.72);
  font-size:15px;
  line-height:1.5;
}

.payment-list strong{
  color:#fff;
  font-weight:500;
}

@media(max-width:980px){
  .investment-grid{
    grid-template-columns:1fr;
  }

  .payment-options{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .investment-section{
    padding:22px;
    border-radius:24px;
  }

  .investment-card{
    padding:22px;
  }
}


/* v32: widen Project Investment headline block slightly to avoid the widow */
.investment-copy{
  max-width:1040px !important;
}

.investment-copy h2{
  max-width:980px !important;
}


/* v34: desktop mouseovers for value and investment cards */
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .note-item,
  .investment-card,
  .payment-options{
    transition:
      transform .26s ease,
      background .26s ease,
      border-color .26s ease,
      box-shadow .26s ease;
  }

  .note-item:hover,
  .investment-card:hover{
    transform:translateY(-4px);
    background:rgba(239,170,21,.105);
    border-color:rgba(239,170,21,.48);
    box-shadow:0 18px 46px rgba(0,0,0,.22);
  }

  .investment-card--primary:hover{
    background:linear-gradient(135deg, rgba(239,170,21,.28), rgba(0,0,0,.18));
    border-color:rgba(239,170,21,.62);
  }

  .payment-options:hover{
    background:rgba(239,170,21,.075);
    border-color:rgba(239,170,21,.34);
    box-shadow:0 16px 40px rgba(0,0,0,.18);
  }
}


/* v35: allow longer pricing unit label to read cleanly */
.investment-card h3 em{
  font-size:.30em !important;
  line-height:1.15 !important;
  display:inline-block !important;
  max-width:8.5em !important;
  vertical-align:baseline !important;
}


/* v46: footer contact form only. Does not modify hero/comparison area. */
.wg-footer-form{
  width:min(360px, 100%);
  margin-left:auto;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  gap:10px;
  font-family:"Public Sans", Arial, Helvetica, sans-serif;
}

.wg-footer-form-eyebrow{
  color:#efaa15;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:2px;
}

.wg-footer-form label{
  display:grid;
  gap:5px;
  margin:0;
}

.wg-footer-form label span{
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:400;
}

.wg-footer-form input,
.wg-footer-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(0,0,0,.20);
  color:#fff;
  font:400 14px/1.3 "Public Sans", Arial, Helvetica, sans-serif;
  padding:10px 11px;
  outline:none;
  resize:vertical;
}

.wg-footer-form input:focus,
.wg-footer-form textarea:focus{
  border-color:rgba(239,170,21,.70);
  box-shadow:0 0 0 3px rgba(239,170,21,.12);
}

.wg-footer-form button{
  appearance:none;
  border:1px solid #efaa15;
  border-radius:999px;
  background:#efaa15;
  color:#fff;
  padding:11px 16px;
  font:500 11px/1 "Public Sans", Arial, Helvetica, sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}

.wg-footer-form button:hover,
.wg-footer-form button:focus-visible{
  background:#c98610;
  border-color:#c98610;
  transform:translateY(-1px);
}

@media(max-width:1180px){
  .wg-footer-inner{
    flex-wrap:wrap !important;
  }

  .wg-footer-form{
    width:100%;
    max-width:520px;
    margin-left:0;
    margin-top:8px;
  }
}

@media(max-width:760px){
  .wg-footer-form{
    width:100%;
    max-width:none;
    padding:16px;
  }
}

/* v46: value-card detail popups only. Does not modify hero/comparison area. */
.note-trigger{
  appearance:none;
  cursor:pointer;
  color:inherit;
  font:inherit;
}

.detail-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,54px);
}

.detail-modal.is-open{
  display:flex;
}

.detail-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px);
}

.detail-modal__panel{
  position:relative;
  z-index:2;
  width:min(1040px, 94vw);
  max-height:min(760px, 88vh);
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(280px,.86fr) 1.14fr;
  gap:0;
  border-radius:30px;
  background:linear-gradient(135deg, rgba(48,48,48,.98), rgba(30,30,30,.98));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 90px rgba(0,0,0,.48);
}

.detail-modal__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:4;
  width:38px;
  height:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.detail-modal__close:hover{
  background:#efaa15;
  border-color:#efaa15;
}

.detail-modal__media{
  min-height:430px;
  border-radius:30px 0 0 30px;
  position:relative;
  overflow:hidden;
  filter:saturate(1.12) contrast(1.04) brightness(1.02);
  background:url("../img/popup/visual-impact.webp") center center / cover no-repeat !important;
}

.detail-modal__media[data-tone="seo"]{
  background:url("../img/popup/seo.webp") center center / cover no-repeat !important;
}

.detail-modal__media[data-tone="search"]{
  background:url("../img/popup/search.webp") center center / cover no-repeat !important;
}

.detail-modal__media[data-tone="experience"]{
  background:url("../img/popup/experience.webp") center center / cover no-repeat !important;
}

.detail-modal__media[data-tone="investment"]{
  background:url("../img/popup/investment.webp") center center / cover no-repeat !important;
}

.detail-modal__copy{
  padding:clamp(28px,4vw,54px);
}

.detail-modal__copy h2{
  max-width:760px;
  margin:10px 0 16px;
  font-size:clamp(34px,4vw,58px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.detail-modal__copy > p{
  margin:0 0 24px;
  color:rgba(246,241,232,.74);
  font-size:17px;
  line-height:1.58;
}

.detail-modal__grid{
  display:grid;
  gap:12px;
}

.detail-modal__point{
  padding:15px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
}

.detail-modal__point strong{
  display:block;
  color:#fff;
  font-weight:500;
  margin-bottom:4px;
}

.detail-modal__point span{
  display:block;
  color:rgba(246,241,232,.68);
  font-size:14px;
  line-height:1.48;
}

@media(max-width:820px){
  .detail-modal__panel{
    grid-template-columns:1fr;
  }

  .detail-modal__media{
    min-height:230px;
    border-radius:30px 30px 0 0;
  }
}


/* v47: remove the side prompt next to the before/after device so it cannot overlap the phone */
.comparison-head{
  display:none !important;
}


/* v48: with the side prompt removed, let the before/after device use the full browser width */
@media (min-width:761px){
  .hero{
    max-width:none !important;
    width:100% !important;
  }

  .comparison-card{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }

  .compare-main,
  .compare-shell,
  .stage-holder{
    width:100vw !important;
  }
}


/* v49: center the before/after device composition within the browser */
@media (min-width:761px){
  .stage-fixed{
    left:clamp(44px, 4.4vw, 72px) !important;
  }
}


/* v51: give the footer contact form its own space and keep it clear of the cursive logo */
.wg-footer{
  padding-bottom:150px !important;
}

.wg-footer-inner{
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:clamp(34px, 4vw, 64px) !important;
}

.wg-footer-form{
  margin-left:clamp(28px, 4vw, 70px) !important;
  margin-right:260px !important;
  align-self:flex-start !important;
}

.wg-footer .wg-cursive-signature-wrap{
  right:40px !important;
  bottom:34px !important;
  z-index:2 !important;
}

@media(max-width:1180px){
  .wg-footer{
    padding-bottom:150px !important;
  }

  .wg-footer-form{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media(max-width:760px){
  .wg-footer{
    padding-bottom:130px !important;
  }

  .wg-footer .wg-cursive-signature-wrap{
    right:20px !important;
    bottom:22px !important;
  }
}


/* v52: hide visible scrollbar on popup panels while preserving scroll if content needs it */
.detail-modal__panel{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

.detail-modal__panel::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}


/* v53: restore footer baseline alignment after form spacing.
   Keep the form clear of the cursive logo without pushing the social icons/logo down. */
.wg-footer{
  padding-bottom:54px !important;
}

.wg-footer-inner{
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:44px !important;
  flex-wrap:nowrap !important;
}

.wg-footer-brand{
  flex:0 0 auto !important;
}

.wg-footer-social{
  margin-left:28px !important;
  margin-right:0 !important;
  padding:0 !important;
  align-self:flex-end !important;
  transform:none !important;
}

.wg-footer-form{
  width:360px !important;
  margin-left:70px !important;
  margin-right:250px !important;
  align-self:flex-end !important;
}

.wg-footer .wg-cursive-signature-wrap{
  right:40px !important;
  bottom:34px !important;
  width:180px !important;
  max-width:180px !important;
  z-index:6 !important;
}

.wg-footer .wg-cursive-signature-logo{
  width:180px !important;
  max-width:180px !important;
}

@media(max-width:1320px){
  .wg-footer-inner{
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }

  .wg-footer-form{
    margin-left:0 !important;
    margin-right:0 !important;
    width:min(420px, 100%) !important;
    align-self:flex-start !important;
  }
}

@media(max-width:760px){
  .wg-footer{
    padding-bottom:130px !important;
  }

  .wg-footer-social{
    margin-left:0 !important;
    align-self:flex-start !important;
  }

  .wg-footer .wg-cursive-signature-wrap{
    right:20px !important;
    bottom:22px !important;
    width:150px !important;
    max-width:150px !important;
  }

  .wg-footer .wg-cursive-signature-logo{
    width:150px !important;
    max-width:150px !important;
  }
}


/* v54: pricing card popups */
.price-trigger{
  appearance:none;
  cursor:pointer;
  color:inherit;
  font:inherit;
  text-align:left;
}

.plan-modal{
  position:fixed;
  inset:0;
  z-index:220;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,54px);
}

.plan-modal.is-open{
  display:flex;
}

.plan-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.64);
  backdrop-filter:blur(10px);
}

.plan-modal__panel{
  position:relative;
  z-index:2;
  width:min(940px, 94vw);
  max-height:88vh;
  overflow:auto;
  border-radius:30px;
  background:linear-gradient(135deg, rgba(48,48,48,.98), rgba(30,30,30,.98));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 90px rgba(0,0,0,.48);
  padding:clamp(26px,4vw,48px);
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.plan-modal__panel::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.plan-modal__close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.plan-modal__close:hover{
  background:#efaa15;
  border-color:#efaa15;
}

.plan-modal__header{
  max-width:720px;
  margin-bottom:26px;
}

.plan-modal__header h2{
  max-width:780px;
  margin:10px 0 12px;
  font-size:clamp(34px,4.4vw,62px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.plan-modal__header p{
  margin:0;
  color:rgba(246,241,232,.72);
  font-size:17px;
  line-height:1.55;
}

.plan-modal__body{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:start;
}

.plan-summary,
.payment-choice{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
}

.plan-summary__row,
.plan-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.plan-summary__row span,
.plan-total span{
  color:rgba(246,241,232,.70);
  font-size:14px;
}

.plan-summary__row strong,
.plan-total strong{
  font-size:clamp(28px,3vw,42px);
  font-weight:500;
  letter-spacing:-.04em;
}


.plan-summary__section-title{
  margin:18px 0 12px;
  color:rgba(246,241,232,.70);
  font-size:14px;
  line-height:1.2;
}

.plan-pages{
  margin:18px 0;
}

.plan-pages.is-hidden{
  display:none;
}

.plan-pages label{
  display:block;
  color:#efaa15;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.page-stepper{
  display:flex;
  align-items:center;
  width:180px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.18);
}

.page-stepper button,
.page-stepper input{
  height:42px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:center;
}

.page-stepper button{
  width:46px;
  cursor:pointer;
  font-size:22px;
}

.page-stepper button:hover{
  background:#efaa15;
}

.page-stepper input{
  width:88px;
  font:500 16px/1 "Plus Jakarta Sans", Arial, sans-serif;
}

.plan-pages p{
  margin:10px 0 0;
  color:rgba(246,241,232,.62);
  font-size:13px;
}

.hosting-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:18px 0;
  color:rgba(246,241,232,.76);
  font-size:14px;
  line-height:1.4;
}

.hosting-check input{
  margin-top:2px;
  accent-color:#efaa15;
}

.plan-total{
  padding-top:16px;
  padding-bottom:0;
  border-bottom:0;
  border-top:1px solid rgba(255,255,255,.10);
}

.payment-choice{
  display:grid;
  gap:10px;
}

.payment-choice .small-label{
  margin-bottom:3px;
}

.payment-choice__option{
  appearance:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.16);
  color:#fff;
  padding:15px 16px;
  text-align:left;
}

.payment-choice__option strong{
  font-weight:500;
}

.payment-choice__option span{
  color:rgba(246,241,232,.72);
}

.payment-choice__option:hover,
.payment-choice__option.is-selected{
  border-color:rgba(239,170,21,.66);
  background:rgba(239,170,21,.11);
}

.plan-modal__footer{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.plan-modal__footer p{
  margin:0;
  color:rgba(246,241,232,.58);
  font-size:13px;
  line-height:1.45;
  max-width:520px;
}

.plan-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:13px 22px;
  border-radius:999px;
  background:#efaa15;
  border:1px solid #efaa15;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
}

.plan-submit:hover{
  background:#c98610;
  border-color:#c98610;
}

@media(max-width:820px){
  .plan-modal__body{
    grid-template-columns:1fr;
  }

  .plan-modal__footer{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* v55: managed website option inside pricing popups */
.service-options{
  display:grid;
  gap:10px;
  margin:18px 0;
}

.service-option{
  appearance:none;
  display:grid;
  gap:5px;
  width:100%;
  padding:15px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}

.service-option:hover,
.service-option.is-selected{
  border-color:rgba(239,170,21,.62);
  background:rgba(239,170,21,.10);
}

.service-option span{
  color:#efaa15;
  font-size:10px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.service-option strong{
  font-weight:500;
  font-size:15px;
  line-height:1.25;
}

.service-option em{
  font-style:normal;
  color:rgba(246,241,232,.68);
  font-size:13px;
  line-height:1.38;
}

.service-option b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:6px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-weight:500;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
}

.service-option.is-hidden{
  display:none;
}

.hosting-check{
  display:none !important;
}


/* v56: allow managed project totals to show one-time + monthly clearly */
.plan-total{
  align-items:flex-end !important;
}

.plan-total strong,
.payment-choice__option span{
  white-space:nowrap;
}

.plan-total strong{
  font-size:clamp(25px,2.55vw,38px) !important;
}

@media(max-width:520px){
  .plan-total{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .payment-choice__option{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:6px !important;
  }
}


/* v57: project-start form popup after pricing selection */
.plan-submit{
  appearance:none;
  cursor:pointer;
}

.start-modal{
  position:fixed;
  inset:0;
  z-index:240;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,54px);
}

.start-modal.is-open{
  display:flex;
}

.start-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(10px);
}

.start-modal__panel{
  position:relative;
  z-index:2;
  width:min(980px, 94vw);
  max-height:88vh;
  overflow:auto;
  border-radius:30px;
  background:linear-gradient(135deg, rgba(48,48,48,.985), rgba(30,30,30,.985));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 90px rgba(0,0,0,.50);
  padding:clamp(26px,4vw,48px);
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.start-modal__panel::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.start-modal__close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.start-modal__close:hover{
  background:#efaa15;
  border-color:#efaa15;
}

.start-modal__header{
  max-width:760px;
  margin-bottom:22px;
}

.start-modal__header h2{
  max-width:760px;
  margin:10px 0 12px;
  font-size:clamp(34px,4.4vw,62px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.start-modal__header p{
  margin:0;
  color:rgba(246,241,232,.72);
  font-size:17px;
  line-height:1.55;
}

.start-modal__summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 0 20px;
}

.start-modal__summary div{
  padding:15px 16px;
  border-radius:18px;
  background:rgba(239,170,21,.10);
  border:1px solid rgba(239,170,21,.28);
}

.start-modal__summary span{
  display:block;
  color:#efaa15;
  font-size:10px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.start-modal__summary strong{
  display:block;
  font-weight:500;
  color:#fff;
  line-height:1.28;
}

.start-form{
  display:grid;
  gap:14px;
}

.start-form__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.start-form label{
  display:grid;
  gap:6px;
  margin:0;
}

.start-form label span{
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:400;
}

.start-form input,
.start-form textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(0,0,0,.20);
  color:#fff;
  font:400 15px/1.35 "Plus Jakarta Sans", Arial, sans-serif;
  padding:12px 13px;
  outline:none;
  resize:vertical;
}

.start-form input:focus,
.start-form textarea:focus{
  border-color:rgba(239,170,21,.70);
  box-shadow:0 0 0 3px rgba(239,170,21,.12);
}

.start-confirm{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:flex-start;
  gap:10px !important;
  color:rgba(246,241,232,.72);
  font-size:13px;
  line-height:1.45;
}

.start-confirm input{
  width:auto;
  margin-top:1px;
  accent-color:#efaa15;
}

.start-confirm span{
  color:rgba(246,241,232,.72) !important;
  font-size:13px !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

.start-form__submit{
  justify-self:start;
  appearance:none;
  border:1px solid #efaa15;
  border-radius:999px;
  background:#efaa15;
  color:#fff;
  padding:14px 24px;
  font:500 11px/1 "Plus Jakarta Sans", Arial, sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
}

.start-form__submit:hover{
  background:#c98610;
  border-color:#c98610;
}

@media(max-width:820px){
  .start-modal__summary,
  .start-form__grid{
    grid-template-columns:1fr;
  }
}


/* v58: clean homepage approval/change-request options in project-start popup */
.homepage-approval,
.homepage-changes{
  display:grid;
  gap:10px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}

.homepage-approval__label{
  color:#efaa15;
  font-size:11px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
}

.homepage-choice{
  display:flex !important;
  align-items:flex-start;
  gap:11px !important;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(0,0,0,.12);
  cursor:pointer;
}

.homepage-choice.is-active{
  border-color:rgba(239,170,21,.58);
  background:rgba(239,170,21,.10);
}

.homepage-choice input{
  width:auto !important;
  margin-top:3px;
  accent-color:#efaa15;
}

.homepage-choice span{
  display:grid;
  gap:4px;
}

.homepage-choice strong{
  color:#fff;
  font-size:14px;
  line-height:1.3;
  font-weight:500;
}

.homepage-choice em{
  color:rgba(246,241,232,.66);
  font-size:13px;
  line-height:1.4;
  font-style:normal;
}

.homepage-changes.is-hidden{
  display:none;
}

.change-checks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px 12px;
}

.change-checks label{
  display:flex !important;
  align-items:center;
  gap:8px !important;
  color:rgba(246,241,232,.72);
  font-size:13px;
  line-height:1.3;
}

.change-checks input{
  width:auto !important;
  accent-color:#efaa15;
}

.change-checks span{
  color:rgba(246,241,232,.72) !important;
  font-size:13px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

@media(max-width:640px){
  .change-checks{
    grid-template-columns:1fr;
  }
}


/* v59: short lead-in header for the five value cards */
.value-intro{
  max-width:1760px;
  margin:34px auto 18px;
  text-align:left;
}

.value-intro h2{
  max-width:760px;
  margin:10px 0 10px;
  font-size:clamp(30px,3.3vw,52px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:500;
}

.value-intro p{
  max-width:720px;
  margin:0;
  color:rgba(246,241,232,.68);
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.55;
}

.value-intro + .notes{
  margin-top:0 !important;
}


/* v60: clean link to review proposed website from the project-start popup */
.homepage-preview-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:7px;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(239,170,21,.58);
  background:rgba(239,170,21,.10);
  color:#fff;
  text-decoration:none;
  font-size:10px;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:500;
}

.homepage-preview-link:hover,
.homepage-preview-link:focus-visible{
  background:#efaa15;
  border-color:#efaa15;
  color:#fff;
}


/* v61: materials upload section inside Homepage Changes Requested. Scoped only to the project-start modal. */
.start-modal .materials-upload{
  margin-top:18px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
}

.start-modal .materials-upload__intro{
  margin-bottom:14px;
}

.start-modal .materials-upload__intro p{
  margin:8px 0 0;
  color:rgba(246,241,232,.70);
  font-size:14px;
  line-height:1.5;
}

.start-modal .materials-upload__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.start-modal .file-field{
  display:grid;
  gap:8px;
  padding:14px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
}

.start-modal .file-field input[type="file"]{
  width:100%;
  padding:9px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px dashed rgba(255,255,255,.22);
  color:rgba(246,241,232,.82);
  font-size:12px;
}

.start-modal .file-field em{
  color:rgba(246,241,232,.58);
  font-style:normal;
  font-size:12px;
  line-height:1.35;
}

@media(max-width:760px){
  .start-modal .materials-upload__grid{
    grid-template-columns:1fr;
  }

  .start-modal .materials-upload{
    padding:15px;
  }
}


/* v62: clarify typed copy/change requests and optional materials uploads */
.start-modal .typed-changes-field em,
.start-modal .materials-upload__intro .homepage-approval__label em,
.start-modal label > span em{
  color:rgba(246,241,232,.56);
  font-style:normal;
  font-weight:400;
  text-transform:none;
  letter-spacing:.02em;
}

.start-modal .typed-changes-field > em{
  display:block;
  margin-top:7px;
  color:rgba(246,241,232,.62);
  font-size:12px;
  line-height:1.4;
}

.start-modal .materials-upload__intro p{
  max-width:760px;
}

.start-modal .materials-upload{
  margin-top:20px;
}


/* v63: safer upload guidance */
.start-modal .upload-security-note{
  margin-top:8px !important;
  color:rgba(246,241,232,.62) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

.start-modal .blocked-files-note{
  margin-top:12px;
  padding:11px 13px;
  border-radius:14px;
  background:rgba(239,170,21,.08);
  border:1px solid rgba(239,170,21,.22);
  color:rgba(246,241,232,.72);
  font-size:12px;
  line-height:1.45;
}

.start-modal .blocked-files-note strong{
  color:#fff;
  font-weight:500;
}


/* v64: clarify Homepage + Additional Pages flow without altering the main layout */
.price-card-badge{
  display:inline-flex;
  margin:10px 0 12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(239,170,21,.12);
  border:1px solid rgba(239,170,21,.30);
  color:#fff;
  font-size:10px;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.price-trigger--plus:hover .price-card-badge{
  background:#efaa15;
  border-color:#efaa15;
}

.plus-pages-examples{
  margin-top:10px;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(239,170,21,.08);
  border:1px solid rgba(239,170,21,.20);
  color:rgba(246,241,232,.70);
  font-size:12px;
  line-height:1.45;
}

.plus-pages-examples strong{
  display:block;
  margin-bottom:3px;
  color:#fff;
  font-weight:500;
}

.plus-pages-examples span{
  display:block;
}


/* v65: inside page content collection for Homepage + Additional Pages */
.start-modal .inside-pages-content{
  margin:20px 0;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
}

.start-modal .inside-pages-content.is-hidden{
  display:none;
}

.start-modal .inside-pages-content__intro{
  margin:8px 0 15px;
  color:rgba(246,241,232,.70);
  font-size:14px;
  line-height:1.5;
  max-width:820px;
}

.start-modal .inside-page-checks{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:9px 12px;
  margin:0 0 16px;
}

.start-modal .inside-page-checks label{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(246,241,232,.78);
  font-size:13px;
  line-height:1.35;
}

.start-modal .inside-page-checks input{
  margin-top:2px;
  accent-color:#efaa15;
}

.start-modal .inside-materials{
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.09);
}

.start-modal .inside-materials__intro{
  margin-bottom:13px;
}

.start-modal .inside-materials__intro span{
  display:block;
  color:#efaa15;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}

.start-modal .inside-materials__intro span em,
.start-modal .inside-materials label > span em{
  color:rgba(246,241,232,.56);
  font-style:normal;
  font-weight:400;
  text-transform:none;
  letter-spacing:.02em;
}

.start-modal .inside-materials__intro p{
  margin:8px 0 0;
  color:rgba(246,241,232,.64);
  font-size:13px;
  line-height:1.45;
}

.start-modal .inside-materials__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

@media(max-width:760px){
  .start-modal .inside-page-checks,
  .start-modal .inside-materials__grid{
    grid-template-columns:1fr;
  }

  .start-modal .inside-pages-content,
  .start-modal .inside-materials{
    padding:15px;
  }
}


/* v67: replace random inside-page categories with page-by-page content blocks */
.start-modal .inside-pages-count-note{
  display:grid;
  gap:5px;
  margin:0 0 16px;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(239,170,21,.08);
  border:1px solid rgba(239,170,21,.22);
}

.start-modal .inside-pages-count-note strong{
  color:#fff;
  font-weight:500;
  font-size:13px;
}

.start-modal .inside-pages-count-note span{
  color:rgba(246,241,232,.66);
  font-size:12px;
  line-height:1.45;
}

.start-modal .inside-page-builder{
  display:grid;
  gap:14px;
}

.start-modal .inside-page-block{
  padding:16px;
  border-radius:19px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
}

.start-modal .inside-page-block__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}

.start-modal .inside-page-block__head strong{
  color:#efaa15;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}

.start-modal .inside-page-block__head span{
  color:rgba(246,241,232,.54);
  font-size:12px;
}

.start-modal .inside-page-block__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.start-modal .inside-page-block__grid label.full{
  grid-column:1 / -1;
}

.start-modal .inside-page-block .file-field{
  margin-top:0;
}

.start-modal .inside-page-checks{
  display:none !important;
}

@media(max-width:760px){
  .start-modal .inside-page-block__grid{
    grid-template-columns:1fr;
  }

  .start-modal .inside-page-block{
    padding:14px;
  }

  .start-modal .inside-page-block__head{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}


/* v68: clarify shared header/nav/footer across additional inside pages */
.start-modal .inside-pages-shared-note{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(246,241,232,.70);
  font-size:13px;
  line-height:1.5;
}

.start-modal .inside-pages-shared-note strong{
  color:#fff;
  font-weight:500;
}


/* v69: Monthly Website Care tier options */
.care-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}

.care-options.is-hidden{
  display:none;
}

.care-option{
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  border-radius:18px;
  padding:15px;
  color:#fff;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.care-option:hover,
.care-option.is-selected{
  background:rgba(239,170,21,.10);
  border-color:rgba(239,170,21,.44);
  transform:translateY(-1px);
}

.care-option span{
  display:inline-flex;
  margin-bottom:9px;
  color:#efaa15;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.care-option strong{
  display:block;
  margin-bottom:6px;
  font-size:15px;
  font-weight:500;
}

.care-option em{
  display:block;
  color:rgba(246,241,232,.64);
  font-style:normal;
  font-size:12px;
  line-height:1.45;
}

.care-option b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}

@media(max-width:760px){
  .care-options{
    grid-template-columns:1fr;
  }
}


/* v70: Monthly Website Care uses care-specific notes, not homepage approval */
.start-modal .website-care-notes{
  margin:20px 0;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
}

.start-modal .website-care-notes.is-hidden{
  display:none;
}

.start-modal .website-care-notes__intro{
  margin:8px 0 15px;
  color:rgba(246,241,232,.70);
  font-size:14px;
  line-height:1.5;
  max-width:820px;
}

.start-modal .website-care-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:9px 12px;
  margin:0 0 16px;
}

.start-modal .website-care-options label{
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(246,241,232,.78);
  font-size:13px;
  line-height:1.35;
}

.start-modal .website-care-options input{
  margin-top:2px;
  accent-color:#efaa15;
}

@media(max-width:760px){
  .start-modal .website-care-options{
    grid-template-columns:1fr;
  }

  .start-modal .website-care-notes{
    padding:15px;
  }
}


/* v71: access info for Monthly Website Care, without collecting passwords */
.start-modal .website-access-info{
  margin:16px 0;
  padding:16px;
  border-radius:18px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.10);
}

.start-modal .website-access-warning{
  margin:8px 0 14px;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(239,170,21,.08);
  border:1px solid rgba(239,170,21,.22);
  color:rgba(246,241,232,.72);
  font-size:12px;
  line-height:1.5;
}

.start-modal .website-access-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.start-modal select{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:#fff;
  border-radius:14px;
  padding:12px 13px;
  font:inherit;
  outline:none;
}

.start-modal select:focus{
  border-color:rgba(239,170,21,.50);
}

@media(max-width:760px){
  .start-modal .website-access-grid{
    grid-template-columns:1fr;
  }

  .start-modal .website-access-info{
    padding:15px;
  }
}


/* v72: clean up Monthly Website Care checkbox layout */
.start-modal .website-care-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 12px;
  margin:0 0 16px;
}

.start-modal .website-care-options label{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  min-height:46px;
  padding:11px 14px !important;
  border-radius:15px;
  text-align:left !important;
}

.start-modal .website-care-options input{
  flex:0 0 auto;
  width:15px;
  height:15px;
  margin:0 !important;
  accent-color:#efaa15;
}

.start-modal .website-care-options span{
  display:block;
  flex:1 1 auto;
  min-width:0;
  color:rgba(246,241,232,.82);
  font-size:12px;
  line-height:1.25;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-align:left !important;
}

@media(max-width:760px){
  .start-modal .website-care-options{
    grid-template-columns:1fr;
  }
}


/* v73: hard-hide homepage approval/change sections for Monthly Website Care */
.start-modal.is-care-mode #homepageApprovalGroup,
.start-modal.is-care-mode #homepageChanges,
.start-modal.is-care-mode #insidePagesContent,
.start-modal.is-care-mode .homepage-approval{
  display:none !important;
}

.start-modal.is-care-mode #websiteCareNotes{
  display:block !important;
}


/* v74: clarify monthly care update allowance */
.start-modal .website-care-scope-note{
  display:grid;
  gap:5px;
  margin:0 0 15px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(239,170,21,.08);
  border:1px solid rgba(239,170,21,.22);
}

.start-modal .website-care-scope-note strong{
  color:#fff;
  font-weight:500;
  font-size:13px;
}

.start-modal .website-care-scope-note span{
  color:rgba(246,241,232,.68);
  font-size:12px;
  line-height:1.45;
}


/* v75: add hover feedback to Payment Options panel */
.payment-options{
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.payment-options:hover{
  transform:translateY(-2px);
  border-color:rgba(239,170,21,.36);
  background:rgba(255,255,255,.065);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
}

.payment-options:hover .small-label{
  color:#efaa15;
}


/* v77: no long-term contract note on pricing cards */
.investment-card small{
  display:inline-flex;
  margin-top:16px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  color:rgba(246,241,232,.70);
  font-size:10px;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:500;
}

.investment-card:hover small{
  color:#fff;
  border-color:rgba(239,170,21,.36);
  background:rgba(239,170,21,.10);
}


/* v78: Stripe checkout links for Monthly Website Care */
.care-stripe-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  background:#efaa15;
  border:1px solid #efaa15;
  color:#111;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease;
}

.care-stripe-cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}

.care-stripe-cta.is-hidden{
  display:none;
}

.start-modal .website-care-checkout-links{
  margin-top:16px;
  padding:15px;
  border-radius:18px;
  background:rgba(239,170,21,.08);
  border:1px solid rgba(239,170,21,.22);
}

.start-modal .website-care-checkout-links strong{
  display:block;
  color:#fff;
  font-weight:500;
  font-size:13px;
  margin-bottom:5px;
}

.start-modal .website-care-checkout-links span{
  display:block;
  color:rgba(246,241,232,.68);
  font-size:12px;
  line-height:1.45;
  margin-bottom:12px;
}

.start-modal .website-care-checkout-links div{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.start-modal .website-care-checkout-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.start-modal .website-care-checkout-links a:hover{
  background:#efaa15;
  border-color:#efaa15;
  color:#111;
}


/* v79: project care options for Homepage Only and Homepage + Additional Pages */
.service-options{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.service-option[data-service="existing-hosting"].is-selected,
.service-option[data-service="managed"].is-selected{
  background:rgba(239,170,21,.10);
  border-color:rgba(239,170,21,.44);
}

@media(max-width:900px){
  .service-options{
    grid-template-columns:1fr;
  }
}


/* v80: split project installment + monthly care onto two readable lines */
.payment-choice__option span{
  text-align:right;
}

.payment-choice__option .payment-project,
.payment-choice__option .payment-care{
  display:block;
  text-align:right;
  line-height:1.22;
}

.payment-choice__option .payment-project{
  color:rgba(246,241,232,.82);
}

.payment-choice__option .payment-care{
  margin-top:3px;
  color:#fff;
  font-weight:700;
}

@media(max-width:560px){
  .payment-choice__option{
    align-items:flex-start;
  }

  .payment-choice__option span,
  .payment-choice__option .payment-project,
  .payment-choice__option .payment-care{
    text-align:left;
  }
}


/* v81: keep right-side payment amounts in the softer content gray and move plus sign to care line */
.payment-choice__option .payment-project,
.payment-choice__option .payment-care{
  color:rgba(246,241,232,.70) !important;
  font-weight:600;
}

.payment-choice__option .payment-care{
  margin-top:3px;
}


/* v84: cleaner guided layout for project option popups */
.plan-modal__panel{
  width:min(780px, 94vw) !important;
}

.plan-modal__header{
  max-width:100% !important;
  margin-bottom:18px !important;
}

.plan-modal__header h2{
  max-width:100% !important;
  font-size:clamp(34px,4vw,54px) !important;
}

.plan-modal__body{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}

.plan-summary,
.payment-choice{
  padding:22px !important;
}

.plan-summary__row{
  padding-bottom:14px;
  margin-bottom:16px;
}

.plan-summary__row strong{
  font-size:clamp(34px,4vw,50px) !important;
}

.service-options{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  margin:18px 0 !important;
}

.service-option{
  display:grid !important;
  grid-template-columns:150px minmax(170px, 220px) minmax(240px, 1fr);
  grid-template-rows:auto auto;
  align-items:start;
  gap:10px 18px;
  min-height:76px;
  padding:15px 16px !important;
}

.service-option span{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  margin:0;
}

.service-option strong{
  grid-column:2;
  grid-row:1;
  align-self:end;
  font-size:16px !important;
  line-height:1.22;
}

.service-option em{
  grid-column:3;
  grid-row:1 / span 2;
  align-self:center;
  font-size:13px !important;
  line-height:1.38;
}

.service-option b{
  grid-column:2;
  grid-row:2;
  justify-self:start;
  align-self:start;
  max-width:none;
  text-align:left;
  white-space:nowrap;
  font-size:13px !important;
  line-height:1.25;
}

.plan-pages{
  margin:18px 0 !important;
  padding:16px;
  border-radius:18px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.09);
}

.plan-pages label{
  margin-bottom:12px !important;
}

.page-stepper{
  width:190px !important;
}

.plus-pages-examples{
  margin-top:14px !important;
}

.plan-total{
  margin-top:18px;
  padding-top:18px;
  padding-bottom:0 !important;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:0 !important;
}

.payment-choice{
  display:grid;
  gap:12px;
}

.payment-choice > .small-label{
  margin-bottom:0;
}

.payment-choice__option{
  display:grid !important;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:18px;
  padding:16px 18px !important;
}

.payment-choice__option strong{
  font-size:14px;
}

.payment-choice__option > span{
  min-width:170px;
}

.plan-modal__footer{
  margin-top:14px !important;
}

@media(max-width:760px){
  .plan-modal__panel{
    width:min(96vw, 780px) !important;
    padding:24px 18px !important;
  }

  .service-option{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:7px;
  }

  .service-option span,
  .service-option strong,
  .service-option em,
  .service-option b{
    grid-column:auto;
    grid-row:auto;
  }

  .service-option b{
    justify-self:start;
    max-width:none;
    text-align:left;
    white-space:normal;
  }

  .payment-choice__option{
    grid-template-columns:1fr;
    gap:8px;
  }

  .payment-choice__option > span{
    min-width:0;
  }
}


/* v91: add small readable sublabels under project and monthly care amounts */
.payment-choice__option .payment-project,
.payment-choice__option .payment-care,
.plan-total .payment-project,
.plan-total .payment-care{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

.payment-choice__option .payment-amount,
.plan-total .payment-amount{
  color:rgba(246,241,232,.70);
  font-weight:600;
  line-height:1.15;
}

.payment-choice__option .payment-note,
.plan-total .payment-note{
  color:rgba(246,241,232,.62);
  font-size:12px;
  font-weight:500;
  line-height:1.15;
  letter-spacing:.01em;
}

.plan-total strong{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.plan-total .payment-care{
  margin-top:4px;
}

@media(max-width:560px){
  .payment-choice__option .payment-project,
  .payment-choice__option .payment-care,
  .plan-total .payment-project,
  .plan-total .payment-care,
  .plan-total strong{
    align-items:flex-start;
  }
}


/* v92: mobile interaction repair + lightweight mobile before/after slider */
.mobile-compare-slider{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:360px;
  margin:18px auto 0;
  aspect-ratio:9 / 16;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:#111;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  touch-action:none;
}

.mobile-compare-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  border:0;
  border-radius:0;
}

.mobile-compare-after{
  position:absolute;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 0 0 var(--mobile-split));
}

.mobile-compare-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--mobile-split);
  width:42px;
  transform:translateX(-21px);
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.mobile-compare-divider::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.82);
  box-shadow:0 0 0 1px rgba(0,0,0,.16);
}

.mobile-compare-divider span{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#9a1f27;
  font-size:18px;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.mobile-compare-slider input[type="range"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  z-index:5;
  cursor:ew-resize;
}

.mobile-compare-labels{
  display:flex;
  justify-content:space-between;
  max-width:360px;
  margin:10px auto 0;
  color:rgba(246,241,232,.64);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

@media(max-width:760px){
  button,
  a,
  input,
  textarea,
  select,
  .note-trigger,
  .price-trigger,
  .detail-modal__close,
  .plan-modal__close,
  .start-modal__close{
    -webkit-tap-highlight-color:rgba(239,170,21,.22);
  }

  .note-trigger,
  .price-trigger,
  .homepage-preview-link,
  .nav-btn{
    touch-action:manipulation;
  }

  .mobile-safe-grid{
    display:none !important;
  }
}


/* v93: optional logo design add-on */
.logo-addon{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:16px 0 18px;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#fff;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}

.logo-addon:hover,
.logo-addon:has(input:checked){
  border-color:rgba(239,170,21,.52);
  background:rgba(239,170,21,.09);
}

.logo-addon.is-hidden{
  display:none !important;
}

.logo-addon input{
  margin-top:4px;
  accent-color:#efaa15;
  flex:0 0 auto;
}

.logo-addon span{
  display:grid;
  gap:5px;
}

.logo-addon strong{
  color:#efaa15;
  font-size:10px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
}

.logo-addon em{
  color:rgba(246,241,232,.72);
  font-style:normal;
  font-size:13px;
  line-height:1.42;
}

.logo-addon b{
  display:inline-flex;
  width:max-content;
  margin-top:4px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
}

.logo-addon small{
  color:rgba(246,241,232,.55);
  font-size:11px;
  line-height:1.45;
  max-width:620px;
}

@media(max-width:760px){
  .logo-addon{
    padding:14px;
  }

  .logo-addon b{
    width:auto;
  }
}


/* v95: place Inside Pages directly under Homepage design/base price before care options */
.plan-summary__row + .plan-pages{
  margin-top:18px;
  margin-bottom:18px;
}


/* v96: domain/registrar clarification under WaltersGroup hosting option */
.service-option .domain-note,
.care-option .domain-note{
  display:block;
  color:rgba(246,241,232,.58);
  font-size:11.5px;
  line-height:1.38;
  max-width:520px;
}

@media(max-width:760px){
  .service-option .domain-note,
  .care-option .domain-note{
    font-size:11px;
    max-width:none;
  }
}


/* v100: remove mobile comparison intro copy; keep only the slider */
@media(max-width:760px){
  .mobile-safe-preview{
    padding:14px !important;
    margin-top:18px !important;
  }
}


/* v101: restore the original laptop + phone before/after device comparison on mobile */
@media(max-width:760px){
  .compare-main{
    display:block !important;
  }

  .comparison-head{
    display:none !important;
  }

  .mobile-safe-preview{
    display:none !important;
  }

  .comparison-card{
    padding:12px !important;
    border-radius:24px !important;
    overflow:hidden;
  }

  .compare-shell,
  .stage-holder{
    border-radius:18px !important;
  }

  .stage-holder{
    touch-action:none;
  }

  .handle{
    width:56px !important;
    height:56px !important;
    font-size:25px !important;
    gap:6px !important;
  }

  .divider{
    width:64px !important;
    transform:translateX(-32px) !important;
  }

  .focus-label{
    top:10px !important;
    min-width:190px !important;
  }

  .focus-label__text{
    font-size:9px !important;
    padding:8px 12px !important;
  }
}


/* v102: mobile-only iPhone-style before/static + after/live HTML comparison */
@media(max-width:760px){
  .compare-main,
  .comparison-head{
    display:none !important;
  }

  .mobile-safe-preview{
    display:block !important;
    margin:20px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  .mobile-phone-compare{
    width:min(330px, 86vw);
    margin:0 auto 28px;
  }

  .mobile-phone-frame{
    position:relative;
    width:100%;
    aspect-ratio:9 / 19.5;
    border-radius:38px;
    padding:9px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 18%, rgba(0,0,0,.92) 44%, rgba(255,255,255,.18) 100%);
    box-shadow:
      0 24px 56px rgba(0,0,0,.42),
      inset 0 0 0 1px rgba(255,255,255,.18);
  }

  .mobile-phone-frame::before{
    content:"";
    position:absolute;
    z-index:8;
    left:50%;
    top:16px;
    width:31%;
    height:23px;
    transform:translateX(-50%);
    border-radius:0 0 16px 16px;
    background:#050505;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
    pointer-events:none;
  }

  .mobile-phone-screen{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:30px;
    background:#111;
    touch-action:none;
    isolation:isolate;
  }

  .mobile-phone-before,
  .mobile-phone-after,
  .mobile-phone-after iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .mobile-phone-before{
    object-fit:cover;
    object-position:top center;
    background:#fff;
    z-index:1;
  }

  .mobile-phone-after{
    z-index:2;
    overflow:hidden;
    clip-path:inset(0 0 0 var(--mobile-split));
    background:#111;
  }

  .mobile-phone-after iframe{
    border:0;
    display:block;
    background:#111;
  }

  .mobile-phone-divider{
    position:absolute;
    top:0;
    bottom:0;
    left:var(--mobile-split);
    width:46px;
    transform:translateX(-23px);
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }

  .mobile-phone-divider::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:2px;
    transform:translateX(-50%);
    background:#efaa15;
    box-shadow:0 0 0 1px rgba(0,0,0,.18);
  }

  .mobile-phone-divider span{
    position:relative;
    z-index:2;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    color:#9a1f27;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    font-size:16px;
    font-weight:700;
  }

  .mobile-phone-screen input[type="range"]{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    z-index:6;
    cursor:ew-resize;
  }
}


/* v103: mobile hero headline slightly smaller/wider to encourage a clean two-line break */
@media(max-width:760px){
  .copy-block h1,
  h1{
    font-size:clamp(35px, 10.1vw, 47px) !important;
    line-height:.96 !important;
    letter-spacing:-.052em !important;
    max-width:12.9ch !important;
  }
}


/* v104: mobile comparison labels + allow live after iframe to scroll */
@media(max-width:760px){
  .mobile-phone-screen{
    touch-action:auto !important;
  }

  .mobile-phone-after{
    pointer-events:auto;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-phone-after iframe{
    pointer-events:auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-phone-screen input[type="range"]{
    pointer-events:none !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
  }

  .mobile-phone-divider{
    pointer-events:auto !important;
    touch-action:none !important;
    cursor:ew-resize;
  }

  .mobile-phone-divider span{
    pointer-events:auto !important;
  }

  .mobile-phone-focus-label{
    position:absolute;
    left:50%;
    top:14px;
    transform:translateX(-50%);
    z-index:9;
    min-width:190px;
    text-align:center;
    pointer-events:none;
  }

  .mobile-phone-focus-label__text{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%) translateY(8px);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(0,0,0,.50);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 8px 22px rgba(0,0,0,.18);
    color:#fff;
    font-size:9px;
    letter-spacing:.13em;
    line-height:1;
    text-transform:uppercase;
    opacity:0;
    transition:opacity .22s ease, transform .22s ease;
  }

  .mobile-phone-focus-label__text--proposed{
    color:#efaa15;
  }

  .mobile-phone-focus-label__text.is-active{
    transform:translateX(-50%) translateY(0);
  }
}


/* v105: make mobile before/after slider match desktop slider styling */
@media(max-width:760px){
  .mobile-phone-divider{
    width:64px !important;
    transform:translateX(-32px) !important;
  }

  .mobile-phone-divider::before{
    width:2px !important;
    background:rgba(255,255,255,.78) !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.12) !important;
  }

  .mobile-phone-divider span{
    width:56px !important;
    height:56px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.93) !important;
    color:#9a1f27 !important;
    box-shadow:0 12px 30px rgba(0,0,0,.22) !important;
    font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
    font-size:25px !important;
    line-height:1 !important;
    font-weight:350 !important;
    letter-spacing:0 !important;
    gap:6px !important;
  }
}


/* v106: mobile header uses MENU + persistent Start Project; Scope is removed on mobile */
.nav-menu-toggle,
.mobile-nav-menu{
  display:none;
}

@media(max-width:760px){
  .wg-topbar{
    align-items:flex-start !important;
    gap:14px !important;
  }

  .wg-nav{
    position:relative;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    margin-top:8px !important;
  }

  .wg-nav .nav-proposed,
  .wg-nav .nav-scope,
  .wg-nav .nav-contact{
    display:none !important;
  }

  .nav-menu-toggle{
    display:inline-flex !important;
    appearance:none;
    border:1px solid rgba(255,255,255,.30);
    background:rgba(255,255,255,.035);
    color:rgba(246,241,232,.88);
    text-decoration:none;
    padding:10px 18px;
    border-radius:999px;
    font-family:"Plus Jakarta Sans", Arial, sans-serif;
    font-size:11px;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
  }

  .wg-nav .nav-start{
    display:inline-flex !important;
    margin-left:0 !important;
  }

  .mobile-nav-menu{
    position:absolute;
    left:0;
    top:46px;
    z-index:90;
    min-width:220px;
    padding:10px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(36,36,36,.96);
    backdrop-filter:blur(16px);
    box-shadow:0 18px 46px rgba(0,0,0,.32);
  }

  .mobile-nav-menu.is-open{
    display:grid !important;
    gap:8px;
  }

  .mobile-nav-menu a{
    display:block;
    padding:11px 12px;
    border-radius:12px;
    color:rgba(246,241,232,.90);
    text-decoration:none;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .mobile-nav-menu a:hover{
    background:rgba(239,170,21,.10);
    color:#efaa15;
  }
}


/* v107: hard mobile nav fix — only MENU + START PROJECT visible; Scope removed on mobile */
.nav-menu-toggle,
.mobile-nav-menu{
  display:none;
}

@media(max-width:760px){
  .wg-topbar{
    height:auto !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    flex-direction:column !important;
    gap:12px !important;
    padding:0 28px 18px 28px !important;
  }

  .wg-nav{
    position:relative !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    margin-top:6px !important;
  }

  .wg-nav > a.nav-proposed,
  .wg-nav > a.nav-scope,
  .wg-nav > a.nav-contact{
    display:none !important;
    visibility:hidden !important;
  }

  .wg-nav > .nav-menu-toggle{
    display:inline-flex !important;
    visibility:visible !important;
    align-items:center !important;
    justify-content:center !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:1px solid rgba(255,255,255,.30) !important;
    background:rgba(255,255,255,.035) !important;
    color:rgba(246,241,232,.88) !important;
    padding:10px 18px !important;
    border-radius:999px !important;
    font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
    font-size:11px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
  }

  .wg-nav > a.nav-start{
    display:inline-flex !important;
    visibility:visible !important;
    align-items:center !important;
    justify-content:center !important;
    margin-left:0 !important;
  }

  .mobile-nav-menu{
    position:absolute !important;
    left:0 !important;
    top:46px !important;
    z-index:999 !important;
    min-width:220px !important;
    padding:10px !important;
    border-radius:18px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(36,36,36,.97) !important;
    backdrop-filter:blur(16px) !important;
    box-shadow:0 18px 46px rgba(0,0,0,.32) !important;
  }

  .mobile-nav-menu.is-open{
    display:grid !important;
    visibility:visible !important;
    gap:8px !important;
  }

  .mobile-nav-menu a{
    display:block !important;
    visibility:visible !important;
    padding:11px 12px !important;
    border-radius:12px !important;
    color:rgba(246,241,232,.90) !important;
    text-decoration:none !important;
    font-size:11px !important;
    line-height:1.1 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
}


/* v108: match WaltersGroup site mobile logo size/position */
@media(max-width:760px){
  .wg-topbar{
    padding:0 28px 18px 40px !important;
  }

  .wg-logo{
    display:block !important;
    width:clamp(150px, 42vw, 230px) !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    align-self:flex-start !important;
    object-fit:contain !important;
    object-position:left top !important;
    filter:brightness(1.06) !important;
  }
}


/* v109: mobile header controls tucked upper-right, start button below menu */
@media(max-width:760px){
  .wg-topbar{
    position:sticky !important;
    top:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-rows:auto auto !important;
    align-items:start !important;
    justify-content:stretch !important;
    column-gap:14px !important;
    row-gap:8px !important;
    padding:0 24px 18px 40px !important;
  }

  .wg-logo{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:clamp(150px, 42vw, 230px) !important;
    max-width:none !important;
    margin:0 !important;
    align-self:start !important;
    justify-self:start !important;
  }

  .wg-nav{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    width:auto !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:auto !important;
    grid-template-rows:auto auto !important;
    gap:8px !important;
    justify-items:end !important;
    align-items:start !important;
    align-self:start !important;
    justify-self:end !important;
    position:relative !important;
  }

  .wg-nav > .nav-menu-toggle{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:end !important;
    margin:0 !important;
  }

  .wg-nav > a.nav-start{
    grid-column:1 !important;
    grid-row:2 !important;
    justify-self:end !important;
    margin:0 !important;
    white-space:nowrap !important;
  }

  .mobile-nav-menu{
    left:auto !important;
    right:0 !important;
    top:44px !important;
    transform:none !important;
    text-align:left !important;
  }
}

@media(max-width:390px){
  .wg-topbar{
    padding-left:28px !important;
    padding-right:18px !important;
    column-gap:10px !important;
  }

  .wg-logo{
    width:clamp(135px, 40vw, 190px) !important;
  }

  .wg-nav > .nav-menu-toggle,
  .wg-nav > a.nav-start{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}


/* v110: repair mobile header spacing/height and keep controls upper-right */
@media(max-width:760px){
  .wg-topbar{
    position:sticky !important;
    top:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-rows:auto auto !important;
    align-items:start !important;
    justify-content:stretch !important;
    column-gap:12px !important;
    row-gap:7px !important;
    height:112px !important;
    min-height:112px !important;
    max-height:112px !important;
    overflow:visible !important;
    padding:14px 24px 14px 40px !important;
    box-sizing:border-box !important;
  }

  .wg-logo{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:clamp(150px, 42vw, 230px) !important;
    max-width:none !important;
    height:auto !important;
    margin:0 !important;
    align-self:start !important;
    justify-self:start !important;
    display:block !important;
    object-fit:contain !important;
    object-position:left top !important;
  }

  .wg-nav{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    width:auto !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:auto !important;
    grid-template-rows:auto auto !important;
    gap:7px !important;
    justify-items:end !important;
    align-items:start !important;
    align-self:start !important;
    justify-self:end !important;
    position:relative !important;
  }

  .wg-nav > a.nav-proposed,
  .wg-nav > a.nav-scope,
  .wg-nav > a.nav-contact{
    display:none !important;
    visibility:hidden !important;
  }

  .wg-nav > .nav-menu-toggle{
    display:inline-flex !important;
    visibility:visible !important;
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:end !important;
    margin:0 !important;
    padding:9px 18px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .wg-nav > a.nav-start{
    display:inline-flex !important;
    visibility:visible !important;
    grid-column:1 !important;
    grid-row:2 !important;
    justify-self:end !important;
    margin:0 !important;
    padding:10px 18px !important;
    white-space:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .mobile-nav-menu{
    left:auto !important;
    right:0 !important;
    top:44px !important;
    transform:none !important;
    text-align:left !important;
  }

  main{
    padding-top:18px !important;
  }

  .hero{
    margin-top:0 !important;
  }

  .copy-block{
    margin-top:0 !important;
  }
}

@media(max-width:390px){
  .wg-topbar{
    height:108px !important;
    min-height:108px !important;
    max-height:108px !important;
    padding:14px 18px 12px 28px !important;
    column-gap:10px !important;
  }

  .wg-logo{
    width:clamp(138px, 40vw, 190px) !important;
  }

  .wg-nav > .nav-menu-toggle,
  .wg-nav > a.nav-start{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* v110: darker before/after slider treatment, matched across desktop and mobile */
.divider::before,
.mobile-phone-divider::before{
  background:rgba(239,170,21,.86) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.22) !important;
}

.handle,
.mobile-phone-divider span{
  background:rgba(34,34,34,.90) !important;
  color:#efaa15 !important;
  border:1px solid rgba(239,170,21,.55) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.34) !important;
}

.handle span{
  color:#efaa15 !important;
}


/* v111: narrow "What changes beyond the look." on mobile to avoid widow */
@media(max-width:760px){
  .value-intro h2{
    max-width:11.4ch !important;
  }
}


/* v112: make Inside Pages feel like a top-level scope item under Homepage design */
.plan-summary__row + .plan-pages{
  margin-top:14px !important;
  margin-bottom:18px !important;
  padding:0 0 18px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  border-radius:0 !important;
  background:transparent !important;
}

.plan-summary__row + .plan-pages > label{
  display:block !important;
  margin:0 0 12px 0 !important;
  color:#efaa15 !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.plan-summary__row + .plan-pages .page-stepper{
  max-width:190px !important;
  margin-bottom:12px !important;
}

.plan-summary__row + .plan-pages > p{
  max-width:440px !important;
  margin-bottom:12px !important;
}

.plan-summary__row + .plan-pages .plus-pages-examples{
  max-width:440px !important;
}

@media(max-width:760px){
  .plan-summary__row + .plan-pages{
    margin-top:12px !important;
    padding-bottom:16px !important;
  }
}


/* v113: make major modal categories visually distinct instead of running together */
.plan-summary__row{
  margin-bottom:0 !important;
}

/* Inside pages is its own top-level scope category */
.plan-summary__row + .plan-pages{
  margin-top:18px !important;
  margin-bottom:22px !important;
  padding:18px 0 22px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

/* Monthly Maintenance + Care starts as a separate category */
.plan-summary__section-title{
  margin:22px 0 14px !important;
  padding-top:22px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  color:#efaa15 !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

/* Keep care choices visually grouped under the monthly care header */
.service-options{
  margin:0 0 24px !important;
  padding-bottom:24px !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

/* Optional Brand Add-On is a separate category, not part of monthly care */
.logo-addon{
  position:relative !important;
  margin:24px 0 24px !important;
  padding:20px 18px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.055) !important;
}

.logo-addon::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:-24px;
  height:1px;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}

.logo-addon strong{
  color:#efaa15 !important;
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

/* Standalone monthly care modal keeps its care choices as the main category */
.care-options{
  margin-top:0 !important;
  margin-bottom:24px !important;
  padding-bottom:24px !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

@media(max-width:760px){
  .plan-summary__row + .plan-pages{
    margin-top:16px !important;
    margin-bottom:22px !important;
    padding-top:16px !important;
    padding-bottom:20px !important;
  }

  .plan-summary__section-title{
    margin-top:22px !important;
    padding-top:22px !important;
  }

  .service-options{
    gap:12px !important;
    margin-bottom:24px !important;
    padding-bottom:24px !important;
  }

  .logo-addon{
    margin-top:24px !important;
    margin-bottom:24px !important;
    padding:18px 16px !important;
  }

  .logo-addon::before{
    left:16px;
    right:16px;
    top:-24px;
  }
}


/* v114: make mobile payment-option pricing feel properly scaled inside the cards */
@media(max-width:760px){
  .payment-choice__option{
    padding:18px 20px !important;
    gap:12px !important;
    min-height:112px !important;
  }

  .payment-choice__option strong{
    font-size:15px !important;
    line-height:1.15 !important;
  }

  .payment-choice__option > span{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  .payment-choice__option .payment-project,
  .payment-choice__option .payment-care{
    display:block !important;
    text-align:left !important;
    line-height:1.18 !important;
    margin:0 !important;
  }

  .payment-choice__option .payment-care{
    margin-top:8px !important;
  }

  .payment-choice__option .payment-amount{
    display:block !important;
    font-size:18px !important;
    line-height:1.12 !important;
    font-weight:700 !important;
    color:rgba(246,241,232,.88) !important;
  }

  .payment-choice__option .payment-note{
    display:block !important;
    margin-top:3px !important;
    font-size:12.5px !important;
    line-height:1.15 !important;
    font-weight:500 !important;
    color:rgba(246,241,232,.66) !important;
  }

  .payment-choice__option.is-selected .payment-amount{
    color:#fff !important;
  }
}

@media(max-width:390px){
  .payment-choice__option .payment-amount{
    font-size:17px !important;
  }
}


/* v115: clearer major categories + itemized estimate breakdown */
.plan-summary__section-title{
  color:rgba(246,241,232,.70) !important;
  font-size:14px !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-weight:500 !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  padding-top:22px !important;
  margin:22px 0 14px !important;
}

.logo-addon-heading{
  margin:24px 0 12px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(246,241,232,.70);
  font-size:14px;
  line-height:1.2;
  font-weight:500;
}

.logo-addon{
  margin-top:0 !important;
}

.logo-addon::before{
  display:none !important;
}

/* itemized estimate */
.estimate-breakdown{
  display:grid;
  grid-template-columns:repeat(3, minmax(100px, auto));
  gap:18px;
  align-items:start;
  justify-content:end;
}

.estimate-part{
  display:grid !important;
  gap:3px;
  text-align:right;
}

.estimate-part strong{
  color:#fff;
  font-size:clamp(20px, 2.2vw, 30px);
  line-height:1.05;
  font-weight:650;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.estimate-part em{
  color:rgba(246,241,232,.62);
  font-size:12px;
  line-height:1.15;
  font-style:normal;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.plan-total strong:has(.estimate-breakdown){
  display:block !important;
  width:100%;
}

.plan-total .estimate-breakdown{
  justify-content:end;
}

.start-modal__summary strong:has(.estimate-breakdown){
  display:block;
  width:100%;
}

.start-modal__summary .estimate-breakdown{
  justify-content:start;
  grid-template-columns:repeat(3, minmax(82px, auto));
  gap:16px;
}

.start-modal__summary .estimate-part{
  text-align:left;
}

.start-modal__summary .estimate-part strong{
  font-size:clamp(22px, 3vw, 34px);
}

.start-modal__summary .estimate-part em{
  font-size:12.5px;
}

@media(max-width:760px){
  .plan-summary__section-title,
  .logo-addon-heading{
    font-size:14px !important;
    margin-top:22px !important;
    padding-top:22px !important;
  }

  .plan-total{
    align-items:flex-start !important;
  }

  .plan-total .estimate-breakdown,
  .start-modal__summary .estimate-breakdown{
    grid-template-columns:1fr !important;
    gap:14px !important;
    justify-content:start !important;
  }

  .plan-total .estimate-part,
  .start-modal__summary .estimate-part{
    text-align:left !important;
  }

  .plan-total .estimate-part strong,
  .start-modal__summary .estimate-part strong{
    font-size:28px !important;
    line-height:1.04 !important;
  }

  .plan-total .estimate-part em,
  .start-modal__summary .estimate-part em{
    font-size:13px !important;
  }
}


/* v117: show secure/SEO/mobile benefits as part of the website package */
.included-benefits{
  max-width:1760px;
  margin:0 auto 20px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.included-benefit{
  min-height:118px;
  padding:20px 22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.included-benefit span{
  display:block;
  margin-bottom:10px;
  color:#efaa15;
  font-size:11px;
  line-height:1.1;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:600;
}

.included-benefit p{
  margin:0;
  color:rgba(246,241,232,.68);
  font-size:14px;
  line-height:1.48;
}

@media(max-width:980px){
  .included-benefits{
    grid-template-columns:1fr;
    gap:12px;
  }

  .included-benefit{
    min-height:0;
    padding:18px;
  }
}


/* v119: desktop benefit cards use 2 + 1 layout so they do not align one-to-one with pricing cards */
@media(min-width:981px){
  .included-benefits{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:26px !important;
  }

  .included-benefit:nth-child(3){
    grid-column:1 / -1 !important;
    max-width:620px !important;
    justify-self:center !important;
  }
}


/* v120: four benefit cards in one desktop row to avoid false 1:1 alignment with the three pricing options */
@media(min-width:981px){
  .included-benefits{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    max-width:1760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:22px !important;
  }

  .included-benefit:nth-child(3){
    grid-column:auto !important;
    max-width:none !important;
    justify-self:stretch !important;
  }

  .included-benefit{
    min-height:132px !important;
    padding:18px 20px !important;
  }
}

@media(max-width:1180px) and (min-width:981px){
  .included-benefits{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v121 dark: desktop tighten hero intro and re-center comparison device composition */
@media (min-width: 1100px){
  /* Make the comparison-section headline a little smaller so it can sit on one line on desktop */
  .comparison-head h2,
  .value-intro h2{
    font-size: clamp(52px, 4.65vw, 82px) !important;
    line-height: .96 !important;
    max-width: 18.5ch !important;
    text-wrap: balance;
  }

  /* Widen the paragraph block below the headline so it resolves closer to two lines */
  .comparison-head p,
  .value-intro p{
    max-width: 850px !important;
    width: min(850px, 100%) !important;
  }

  /* Pull the visual comparison module up a bit after the tighter headline/paragraph */
  .comparison-card{
    margin-top: clamp(18px, 2vw, 30px) !important;
  }

  /* Re-center the overall desktop device scene */
  .compare-shell,
  .comparison-stage,
  .device-comparison,
  .laptop-comparison,
  .desktop-device-comparison{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .stage-holder,
  .stage-fixed{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
  }

  /* Keep the laptop/phone grouping from drifting right */
  .device-frame,
  .laptop-frame,
  .laptop-stage,
  .comparison-laptop{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep all screen contents clipped within the laptop/phone masks */
  .screen,
  .laptop-screen,
  .screen-mask,
  .device-screen,
  .comparison-screen{
    overflow: hidden !important;
  }
}

@media (min-width: 1280px){
  .comparison-head h2,
  .value-intro h2{
    font-size: clamp(56px, 4.35vw, 78px) !important;
    max-width: 19.75ch !important;
  }

  .comparison-head p,
  .value-intro p{
    max-width: 920px !important;
  }
}


/* v122: use a single separator line between major categories and give the heading more breathing room */
.plan-summary__row + .plan-pages{
  border-bottom:0 !important;
  margin-bottom:28px !important;
  padding-bottom:12px !important;
}

.plan-summary__section-title{
  border-top:1px solid rgba(255,255,255,.12) !important;
  margin:28px 0 16px !important;
  padding-top:26px !important;
}

.service-options{
  border-bottom:0 !important;
  margin-bottom:30px !important;
  padding-bottom:2px !important;
}

.logo-addon-heading{
  border-top:1px solid rgba(255,255,255,.12) !important;
  margin:30px 0 14px !important;
  padding-top:26px !important;
}

.care-options{
  border-bottom:0 !important;
}

@media (max-width: 760px){
  .plan-summary__row + .plan-pages{
    margin-bottom:26px !important;
    padding-bottom:10px !important;
  }

  .plan-summary__section-title{
    margin:26px 0 14px !important;
    padding-top:24px !important;
  }

  .service-options{
    margin-bottom:28px !important;
    padding-bottom:0 !important;
  }

  .logo-addon-heading{
    margin:28px 0 12px !important;
    padding-top:24px !important;
  }
}


/* v123: actual desktop hero headline + device composition repair */
@media (min-width: 761px){
  /* Remove the old stage offset that was pushing the device scene off the right edge. */
  .stage-fixed{
    left:0 !important;
    top:0 !important;
    display:block !important;
    justify-content:initial !important;
    align-items:initial !important;
    overflow:hidden !important;
    transform:scale(var(--stage-scale)) !important;
    transform-origin:top left !important;
  }

  .stage-holder{
    display:block !important;
    overflow:hidden !important;
    background:transparent !important;
  }

  .compare-shell{
    overflow:visible !important;
  }

  .comparison-card{
    overflow:visible !important;
  }

  .screen,
  .laptop-screen,
  .phone-screen{
    overflow:hidden !important;
  }
}

@media (min-width: 1100px){
  /* This is the main hero headline the screenshot showed, not the side prompt. */
  .copy-block h1{
    font-size:clamp(58px, 5.15vw, 86px) !important;
    line-height:.95 !important;
    letter-spacing:-.07em !important;
    max-width:21.5ch !important;
    white-space:nowrap !important;
  }

  .copy-block .lead{
    max-width:900px !important;
    width:min(900px, 100%) !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .copy-block{
    margin-bottom:clamp(24px, 2.4vw, 38px) !important;
  }

  .comparison-card{
    margin-top:0 !important;
  }
}

@media (max-width: 1280px) and (min-width: 1100px){
  .copy-block h1{
    font-size:clamp(52px, 4.8vw, 68px) !important;
  }
}

@media (max-width: 1099px){
  .copy-block h1{
    white-space:normal !important;
  }
}


/* v124: actually reduce the desktop hero headline so one-line treatment fits the browser */
@media (min-width: 1100px){
  .copy-block h1{
    font-size:clamp(44px, 3.55vw, 62px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    max-width:none !important;
    width:calc(100vw - 96px) !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  .copy-block .lead{
    max-width:980px !important;
    width:min(980px, calc(100vw - 96px)) !important;
  }
}

@media (max-width: 1240px) and (min-width: 1100px){
  .copy-block h1{
    font-size:clamp(40px, 3.35vw, 48px) !important;
    letter-spacing:-.04em !important;
  }
}

@media (max-width: 1099px){
  .copy-block h1{
    width:auto !important;
    white-space:normal !important;
  }
}


/* v125: Stripe checkout plumbing / status */
.project-stripe-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(239,170,21,.58);
  background:rgba(239,170,21,.14);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}

.project-stripe-cta:hover{
  background:rgba(239,170,21,.26);
  border-color:rgba(239,170,21,.82);
}

.project-stripe-cta.is-disabled{
  opacity:.56;
  cursor:not-allowed;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(246,241,232,.74);
}

.project-stripe-cta.is-hidden{
  display:none !important;
}

.stripe-status{
  flex-basis:100%;
  margin:6px 0 0 !important;
  color:rgba(246,241,232,.58) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

@media(max-width:760px){
  .project-stripe-cta,
  .care-stripe-cta,
  .plan-submit{
    width:100%;
  }

  .stripe-status{
    text-align:left;
  }
}


/* v126: dynamic Stripe Checkout state */
.project-stripe-cta.is-loading{
  opacity:.82;
  pointer-events:none;
}


/* v128: widen the hosting domain note inside the care option so it does not stack into too many short lines */
.service-option[data-service="managed"]{
  grid-template-columns:150px minmax(170px, .8fr) minmax(260px, 1fr) !important;
}

.service-option[data-service="managed"] .domain-note{
  grid-column:1 / -1 !important;
  max-width:none !important;
  width:100% !important;
  margin-top:4px !important;
  padding-right:clamp(18px, 8vw, 190px) !important;
  line-height:1.45 !important;
}

@media(max-width:760px){
  .service-option[data-service="managed"]{
    grid-template-columns:1fr !important;
  }

  .service-option[data-service="managed"] .domain-note{
    grid-column:auto !important;
    padding-right:0 !important;
  }
}


/* v129: do not show Stripe checkout in the first selection popup before Request Start */
.plan-modal__footer #projectStripeCta,
.plan-modal__footer #careStripeCta,
.plan-modal__footer .stripe-status{
  display:none !important;
}

.plan-modal__footer{
  justify-content:flex-end !important;
}

.plan-modal__footer .plan-submit{
  margin-left:auto !important;
}


/* v151: verified reset-to-v130 base — preserve visible orange advance buttons */
#openStartForm,
.plan-modal__footer .plan-submit,
.start-form__submit{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#efaa15 !important;
  border:1px solid #efaa15 !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#openStartForm,
.plan-modal__footer .plan-submit{
  min-height:48px !important;
  padding:15px 26px !important;
}

.start-form__submit{
  min-height:52px !important;
  padding:16px 28px !important;
  margin-top:10px !important;
}


/* v152: inline contact thank-you overlay instead of Netlify white thank-you page */
.inline-thank-you{
  position:fixed;
  inset:0;
  z-index:200000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(12,12,11,.46);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s ease, visibility .45s ease;
}

.inline-thank-you.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.inline-thank-you__panel{
  width:min(540px, 92vw);
  border-radius:30px;
  border:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
  padding:34px 34px 32px;
  text-align:center;
  color:#f7f2e9;
}

.inline-thank-you__panel h2{
  margin:10px 0 10px;
  color:#fff;
  font-size:clamp(34px, 5vw, 54px);
  line-height:.95;
  letter-spacing:-.04em;
}

.inline-thank-you__panel p{
  margin:0 auto;
  max-width:380px;
  color:rgba(247,242,233,.76);
  font-size:15px;
  line-height:1.55;
}

.inline-thank-you.is-fading{
  opacity:0;
}

@media(max-width:760px){
  .inline-thank-you__panel{
    padding:30px 24px 28px;
    border-radius:24px;
  }
}


/* v153: make the inner monthly-care pill turn solid orange when its option is selected */
.care-card.is-selected .care-pill,
.care-card.is-active .care-pill,
.service-card.is-selected .care-pill,
.service-card.is-active .care-pill,
.plan-care-card.is-selected .care-pill,
.plan-care-card.is-active .care-pill,
.option-card.is-selected .care-pill,
.option-card.is-active .care-pill,
[data-care].is-selected .care-pill,
[data-care].is-active .care-pill,
[data-service].is-selected .care-pill,
[data-service].is-active .care-pill,
.monthly-care-card.is-selected .care-pill,
.monthly-care-card.is-active .care-pill{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(239,170,21,.24) !important;
}

/* fallback for existing selected radio/checkbox-card patterns */
input:checked + .care-pill,
input:checked ~ .care-pill,
input:checked + label .care-pill,
label:has(input:checked) .care-pill{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(239,170,21,.24) !important;
}


/* v154: make the logo add-on inner pill turn solid orange when selected */
.logo-addon-card.is-selected .care-pill,
.logo-addon-card.is-active .care-pill,
.logo-addon-card.is-selected .addon-pill,
.logo-addon-card.is-active .addon-pill,
.logo-addon-card.is-selected .pill,
.logo-addon-card.is-active .pill,
.brand-addon-card.is-selected .care-pill,
.brand-addon-card.is-active .care-pill,
.brand-addon-card.is-selected .addon-pill,
.brand-addon-card.is-active .addon-pill,
.brand-addon-card.is-selected .pill,
.brand-addon-card.is-active .pill,
.addon-card.is-selected .care-pill,
.addon-card.is-active .care-pill,
.addon-card.is-selected .addon-pill,
.addon-card.is-active .addon-pill,
.addon-card.is-selected .pill,
.addon-card.is-active .pill,
[data-logo-addon].is-selected .care-pill,
[data-logo-addon].is-active .care-pill,
[data-logo-addon].is-selected .addon-pill,
[data-logo-addon].is-active .addon-pill,
[data-logo-addon].is-selected .pill,
[data-logo-addon].is-active .pill,
input[name="logo_addon"]:checked + .care-pill,
input[name="logo_addon"]:checked ~ .care-pill,
input[name="logo_addon"]:checked + .addon-pill,
input[name="logo_addon"]:checked ~ .addon-pill,
label:has(input[name="logo_addon"]:checked) .care-pill,
label:has(input[name="logo_addon"]:checked) .addon-pill,
label:has(input[name="logo_addon"]:checked) .pill{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(239,170,21,.24) !important;
}


/* v162: safe fix — hide redundant Estimated Project Total visually only.
   Important: keep #planTotal in the DOM so the pricing modal/order flow JS does not break. */
.plan-total{
  display:none !important;
}

/* v162: remove Scope nav button/link while preserving any content section */
a[href="#scope"],
button[data-target="scope"],
button[data-scroll="scope"],
[aria-controls="scope"].nav-pill,
.nav-pill[href="#scope"]{
  display:none !important;
}

/* v162: verify/guard the required orange order buttons */
#openStartForm,
.plan-modal__footer .plan-submit,
.start-form__submit{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#efaa15 !important;
  border:1px solid #efaa15 !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* v163: website access fields use pulldown menus with optional Other text fields */
.start-modal .website-access-grid label.has-other-field{
  align-content:start;
}

.start-modal .website-access-grid .other-detail-input{
  margin-top:8px;
}

.start-modal .website-access-grid .other-detail-input.is-hidden{
  display:none;
}


/* v164: guided popup progress/navigation strip */
.modal-progress{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
}

.modal-progress__step{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:32px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
  color:rgba(246,241,232,.62);
  font:700 10px/1 "Plus Jakarta Sans", Arial, sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;
}

.modal-progress__step span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:inherit;
  font-size:10px;
  letter-spacing:0;
}

.modal-progress__step.is-active{
  border-color:rgba(239,170,21,.72);
  background:rgba(239,170,21,.16);
  color:#efaa15;
}

.modal-progress__step.is-complete{
  border-color:rgba(239,170,21,.46);
  background:rgba(239,170,21,.10);
  color:rgba(246,241,232,.88);
  cursor:pointer;
}

.modal-progress__step.is-complete:hover{
  border-color:#efaa15;
  background:rgba(239,170,21,.18);
  color:#fff;
}

.modal-progress__step:disabled{
  cursor:default;
}

@media(max-width:760px){
  .modal-progress{
    gap:6px;
    margin-bottom:14px;
  }

  .modal-progress__step{
    padding:7px 9px;
    min-height:30px;
    font-size:9px;
    letter-spacing:.075em;
  }

  .modal-progress__step span{
    width:17px;
    height:17px;
    font-size:9px;
  }
}


/* v165: mobile footer order — contact form first, WaltersGroup info/social below */
@media(max-width:760px){
  .footer-inner,
  .footer-wrap,
  .site-footer__inner,
  .site-footer .container,
  footer .container{
    display:flex !important;
    flex-direction:column !important;
  }

  .site-footer form[name="proposal-contact"],
  footer form[name="proposal-contact"],
  .site-footer .contact-form,
  footer .contact-form,
  .site-footer .footer-form,
  footer .footer-form{
    order:1 !important;
    margin-top:0 !important;
    margin-bottom:34px !important;
  }

  .site-footer .footer-brand,
  .site-footer .footer-contact,
  .site-footer .footer-info,
  .site-footer .footer-social,
  .site-footer .social-links,
  .site-footer .footer-logo,
  footer .footer-brand,
  footer .footer-contact,
  footer .footer-info,
  footer .footer-social,
  footer .social-links,
  footer .footer-logo{
    order:2 !important;
  }
}


/* v166: mobile payment option alignment — keep Pay in full numbers inside the card and match the other payment cards */
@media(max-width:760px){
  .payment-choice{
    overflow:hidden !important;
  }

  .payment-choice__option{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-align:left !important;
  }

  .payment-choice__option > span{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-align:left !important;
  }

  .payment-choice__option .estimate-breakdown{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-align:left !important;
  }

  .payment-choice__option .estimate-part,
  .payment-choice__option .payment-project,
  .payment-choice__option .payment-care{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    text-align:left !important;
    overflow:hidden !important;
  }

  .payment-choice__option .estimate-part strong,
  .payment-choice__option .payment-amount{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
    font-size:clamp(20px, 6vw, 26px) !important;
    line-height:1.05 !important;
    font-weight:800 !important;
    letter-spacing:-.045em !important;
    text-align:left !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  .payment-choice__option .estimate-part em,
  .payment-choice__option .payment-note{
    display:block !important;
    width:100% !important;
    margin:2px 0 0 !important;
    color:rgba(246,241,232,.66) !important;
    font-size:12px !important;
    line-height:1.15 !important;
    font-style:normal !important;
    text-align:left !important;
  }
}


/* v167: move long FYI copy into small click-to-open info popups */
.info-pop-trigger{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:30px;
  margin:8px 0 16px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(239,170,21,.48);
  background:rgba(239,170,21,.10);
  color:#efaa15;
  font:700 10px/1 "Plus Jakarta Sans", Arial, sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  cursor:pointer;
}

.info-pop-trigger:hover{
  background:rgba(239,170,21,.18);
  border-color:rgba(239,170,21,.72);
  color:#fff;
}

.info-pop-modal{
  position:fixed;
  inset:0;
  z-index:210000;
  display:none;
  place-items:center;
  padding:22px;
}

.info-pop-modal.is-open{
  display:grid;
}

.info-pop-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,9,.58);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.info-pop-modal__panel{
  position:relative;
  width:min(560px, 92vw);
  max-height:calc(100vh - 44px);
  overflow:auto;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(32,32,31,.95);
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  padding:34px;
  color:#f7f2e9;
}

.info-pop-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.info-pop-modal__panel h2{
  margin:10px 0 14px;
  color:#fff;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1;
  letter-spacing:-.04em;
}

.info-pop-modal__panel p{
  margin:0;
  color:rgba(247,242,233,.76);
  font-size:15px;
  line-height:1.6;
}

.info-pop-modal__note{
  margin-top:20px;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(239,170,21,.34);
  background:rgba(239,170,21,.10);
}

.info-pop-modal__note strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
}

.info-pop-modal__note span{
  display:block;
  color:rgba(247,242,233,.76);
  font-size:14px;
  line-height:1.5;
}

@media(max-width:760px){
  .info-pop-modal__panel{
    padding:30px 24px 26px;
    border-radius:24px;
  }
}


/* v168: ensure info close controls stay clickable */
.info-pop-modal__panel{z-index:2;}
.info-pop-modal__close{z-index:3; pointer-events:auto;}
.info-pop-modal__backdrop{z-index:1; pointer-events:auto;}
.info-pop-trigger{pointer-events:auto;}


/* v169: softer, smaller placeholder / hint text inside popup form fields */
.start-form input::placeholder,
.start-form textarea::placeholder,
.start-modal select.placeholder-like,
.start-modal .other-detail-input::placeholder{
  color:rgba(246,241,232,.42);
  font-size:14px;
  line-height:1.45;
  font-weight:400;
}

.start-form textarea::placeholder{
  line-height:1.5;
}

@media (max-width:760px){
  .start-form input::placeholder,
  .start-form textarea::placeholder,
  .start-modal .other-detail-input::placeholder{
    font-size:13px;
  }
}


/* v170: improve mobile spacing between monthly-help and access-notes fields */
@media (max-width:760px){
  #websiteCareNotes > label + label{
    margin-top:12px;
  }

  #websiteCareNotes > label{
    gap:8px;
  }

  #websiteCareNotes > label span{
    line-height:1.2;
  }
}


/* v171: remove redundant monthly checkout choices from the second popup */
.website-care-checkout-links{
  display:none !important;
}


/* v172: project submit should stay on page, send form, then open Stripe */
.start-form__submit.is-processing{
  opacity:.72 !important;
  cursor:wait !important;
}


/* v173: contact form thank-you overlay — stay on landing page, blur background, fade away */
.inline-thank-you{
  position:fixed;
  inset:0;
  z-index:200000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(10,10,10,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .55s ease, visibility .55s ease;
}

.inline-thank-you.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.inline-thank-you.is-fading{
  opacity:0;
}

.inline-thank-you__panel{
  width:min(540px, 92vw);
  border-radius:30px;
  border:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.10);
  padding:34px 34px 32px;
  text-align:center;
  color:#f7f2e9;
}

.inline-thank-you__panel h2{
  margin:10px 0 10px;
  color:#fff;
  font-size:clamp(34px, 5vw, 54px);
  line-height:.95;
  letter-spacing:-.04em;
}

.inline-thank-you__panel p{
  margin:0 auto;
  max-width:380px;
  color:rgba(247,242,233,.76);
  font-size:15px;
  line-height:1.55;
}


/* v175: normalize all popup/form typography to Plus Jakarta Sans */
.plan-modal,
.plan-modal *,
.start-modal,
.start-modal *,
.detail-modal,
.detail-modal *,
.info-pop-modal,
.info-pop-modal *,
.inline-thank-you,
.inline-thank-you *{
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
}

.plan-modal input,
.plan-modal textarea,
.plan-modal select,
.plan-modal button,
.start-modal input,
.start-modal textarea,
.start-modal select,
.start-modal button,
.detail-modal input,
.detail-modal textarea,
.detail-modal select,
.detail-modal button,
.info-pop-modal button{
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
}

.plan-modal input::placeholder,
.plan-modal textarea::placeholder,
.start-modal input::placeholder,
.start-modal textarea::placeholder{
  font-family:"Plus Jakarta Sans", Arial, sans-serif !important;
}


/* v176: improve mobile spacing between care help and access notes fields */
@media (max-width: 767px){
  .start-form .care-help-field{
    margin-bottom:10px;
  }

  .start-form .access-notes-field{
    margin-top:6px;
  }

  .start-form .care-help-field textarea,
  .start-form .access-notes-field textarea{
    margin-top:2px;
  }
}


/* v180: slightly narrow the main intro copy block to avoid the dangling widow */
.hero-copy p,
.hero-intro,
.proposal-intro,
.comparison-intro{
  max-width:980px !important;
}

@media(max-width:760px){
  .hero-copy p,
  .hero-intro,
  .proposal-intro,
  .comparison-intro{
    max-width:100% !important;
  }
}


/* v182: desktop-only live proposed-site preview in package popup header */
.plan-modal__header{
  position:relative;
}

.plan-modal-preview{
  position:absolute;
  top:4px;
  right:56px;
  width:224px;
  height:126px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  pointer-events:none;
}

.plan-modal-preview__stage{
  position:absolute;
  left:0;
  top:0;
  width:2048px;
  height:1156px;
  transform:scale(.109375);
  transform-origin:top left;
  background:transparent;
}

.plan-modal-preview__screen{
  position:absolute;
  overflow:hidden;
  background:#fff;
  z-index:1;
}

.plan-modal-preview__screen--laptop{
  left:292px;
  top:112px;
  width:1281px;
  height:801px;
}

.plan-modal-preview__screen--phone{
  left:1689px;
  top:451px;
  width:246px;
  height:536px;
  border-radius:26px;
}

.plan-modal-preview__screen iframe{
  display:block;
  border:0;
  background:#000;
  transform-origin:top left;
  pointer-events:none;
}

.plan-modal-preview__screen--laptop iframe{
  width:1440px;
  height:900px;
  transform:scale(.89);
}

.plan-modal-preview__screen--phone iframe{
  width:390px;
  height:850px;
  transform:scale(.631);
}

.plan-modal-preview__frame{
  position:absolute;
  inset:0;
  width:2048px;
  height:1156px;
  z-index:3;
  pointer-events:none;
  user-select:none;
}

@media (min-width: 961px){
  .plan-modal__header{
    padding-right:260px !important;
    min-height:132px;
  }

  .plan-modal__header h2,
  .plan-modal__header p,
  .plan-modal__header .small-label,
  .plan-modal__header .modal-progress{
    max-width:calc(100% - 248px);
  }
}

@media (max-width: 960px){
  .plan-modal-preview{
    display:none !important;
  }

  .plan-modal__header{
    padding-right:0 !important;
    min-height:0;
  }
}


/* v183: remove the visible box around the desktop-only popup preview */
.plan-modal-preview{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}


/* v184: keep the popup preview floating without crushing the intro text into a narrow column */
@media (min-width: 961px){
  .plan-modal__header{
    padding-right:0 !important;
    min-height:132px !important;
  }

  .plan-modal__header .modal-progress{
    max-width:560px !important;
  }

  .plan-modal__header .small-label,
  .plan-modal__header h2,
  .plan-modal__header p{
    max-width:720px !important;
  }

  .plan-modal__header p{
    width:720px !important;
  }

  .plan-modal-preview{
    top:22px !important;
    right:34px !important;
  }
}

@media (max-width: 960px){
  .plan-modal__header p{
    width:auto !important;
    max-width:100% !important;
  }
}


/* v186: keep the popup preview out of the inside-pages title and remove it from monthly-care */
.plan-modal.is-plan-additional-pages .plan-modal-preview{
  top:8px !important;
  right:22px !important;
}

.plan-modal.is-plan-hosting-care .plan-modal-preview{
  display:none !important;
}


/* v188: narrow main intro paragraph width by roughly 10% to avoid the two-word widow */
.hero .copy-block .lead{
  max-width:900px !important;
}

@media(max-width:760px){
  .hero .copy-block .lead{
    max-width:100% !important;
  }
}

/* v189: make price pills solid accent gold whenever their parent option/card is selected */
.service-option.is-selected b,
.service-option[aria-pressed="true"] b,
.logo-addon:has(input:checked) b,
.logo-addon.is-selected b,
.logo-addon.is-active b,
.care-option.is-selected b,
.care-option.is-active b,
[data-service].is-selected b,
[data-logo-addon].is-selected b,
[data-logo-addon].is-active b{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#ffffff !important;
}


/* v190: keep only one separator before Monthly Maintenance + Care */
.plan-summary__row{
  border-bottom:0 !important;
  padding-bottom:0 !important;
}

.plan-summary__section-title{
  border-top:1px solid rgba(255,255,255,.12) !important;
  padding-top:18px !important;
  margin-top:18px !important;
}

/* v190: stronger project-start heading copy */
#startModalTitle{
  max-width:100% !important;
}




/* v196: safe selected-pill rule — only small inner pills, never the large payment amount bands */
.service-option.is-selected b,
.service-option.is-active b,
.care-option.is-selected b,
.care-option.is-active b,
.logo-addon:has(input:checked) b,
.logo-addon.is-selected b,
.logo-addon.is-active b,
[data-service].is-selected b,
[data-service].is-active b,
[data-care].is-selected b,
[data-care].is-active b,
[data-logo-addon].is-selected b,
[data-logo-addon].is-active b{
  background:#efaa15 !important;
  border-color:#efaa15 !important;
  color:#ffffff !important;
}

/* v196: payment choices stay dark/glass; do not fill the amount block orange */
.payment-choice__option.is-selected > span,
.payment-choice__option.is-active > span,
[data-payment].is-selected > span,
[data-payment].is-active > span{
  background:transparent !important;
  border-color:transparent !important;
  color:inherit !important;
}


/* v197: force DMF payment amount bands to stay transparent/glass on all states */
.payment-choice__option > span,
.payment-choice__option .estimate-breakdown,
.payment-choice__option .estimate-part,
.payment-choice__option .payment-project,
.payment-choice__option .payment-care,
.payment-choice__option .payment-amount,
.payment-choice__option .payment-note,
[data-payment] > span,
[data-payment] .estimate-breakdown,
[data-payment] .estimate-part,
[data-payment] .payment-project,
[data-payment] .payment-care,
[data-payment] .payment-amount,
[data-payment] .payment-note{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

.payment-choice__option.is-selected > span,
.payment-choice__option.is-active > span,
.payment-choice__option.is-selected .estimate-breakdown,
.payment-choice__option.is-active .estimate-breakdown,
.payment-choice__option.is-selected .estimate-part,
.payment-choice__option.is-active .estimate-part,
.payment-choice__option.is-selected .payment-project,
.payment-choice__option.is-active .payment-project,
.payment-choice__option.is-selected .payment-care,
.payment-choice__option.is-active .payment-care,
[data-payment].is-selected > span,
[data-payment].is-active > span,
[data-payment].is-selected .estimate-breakdown,
[data-payment].is-active .estimate-breakdown,
[data-payment].is-selected .estimate-part,
[data-payment].is-active .estimate-part,
[data-payment].is-selected .payment-project,
[data-payment].is-active .payment-project,
[data-payment].is-selected .payment-care,
[data-payment].is-active .payment-care{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:none !important;
}


/* v200: Monthly Website Care modal cleanup
   Care-only selection should show only the two monthly care choices.
   Hide the design/build summary row, project total, logo add-on, hosting checkbox, and design handoff option. */
.plan-modal.is-plan-hosting-care .service-options,
.plan-modal.is-plan-hosting-care .hosting-check,
.plan-modal.is-plan-hosting-care .plan-pages,
.plan-modal.is-plan-hosting-care .plan-summary__row,
.plan-modal.is-plan-hosting-care .plan-total{
  display:none !important;
}

.plan-modal.is-plan-hosting-care .care-options{
  display:grid !important;
  margin-top:14px !important;
}

.plan-modal.is-plan-hosting-care .plan-summary{
  padding-top:22px !important;
}

.plan-modal.is-plan-hosting-care .plan-summary__section-title{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}


/* v201: Monthly care modal keeps care choices at top and logo add-on as a separate optional block */
.plan-modal.is-plan-hosting-care .logo-addon-heading{
  display:block !important;
  margin-top:28px !important;
  padding-top:24px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}
.plan-modal.is-plan-hosting-care .logo-addon{
  display:flex !important;
}


/* v22: remove close-button circle and center the X visually */
.detail-modal__close,
.plan-modal__close,
.start-modal__close,
.info-pop-modal__close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#ffffff !important;
  font-size:0 !important;
  line-height:1 !important;
}

.detail-modal__close::before,
.plan-modal__close::before,
.start-modal__close::before,
.info-pop-modal__close::before{
  content:"×";
  display:block;
  font-size:28px;
  line-height:1;
  font-weight:300;
  color:#ffffff;
  transform:translateY(-1px);
}

.detail-modal__close:hover,
.plan-modal__close:hover,
.start-modal__close:hover,
.info-pop-modal__close:hover{
  background:transparent !important;
  border-color:transparent !important;
}

.detail-modal__close:hover::before,
.plan-modal__close:hover::before,
.start-modal__close:hover::before,
.info-pop-modal__close:hover::before{
  color:#efaa15;
}