/* Geometric v2 (demo-light-3.html): layered sunrise background, "included" strip and a services bento
   with small working illustrations. Soft, diffused depth; loads after light.css, light2.css and fonts.css. */
html.l3{--lift:0 1px 2px rgba(46,24,44,.05),0 28px 56px -30px rgba(46,24,44,.24);--lift-hi:0 1px 2px rgba(46,24,44,.06),0 36px 70px -30px rgba(46,24,44,.32)}
.l3 body::before{opacity:.75}

/* hero: concentric sunrise rings rising from behind the screenshot, over the warm glow */
.l3 .d-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 76% 118%,transparent 0 52px,rgba(194,53,96,.075) 53px 54px);
  -webkit-mask-image:radial-gradient(55% 75% at 76% 100%,#000 25%,transparent 72%);mask-image:radial-gradient(55% 75% at 76% 100%,#000 25%,transparent 72%)}
.l3 .d-hero{border-bottom:0}

/* "included" strip: four promises on a white band */
.incl{background:#fff;border-block:1px solid var(--line)}
.incl-list{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.incl-list li{display:flex;gap:14px;align-items:flex-start;padding:26px clamp(14px,2vw,28px)}
.incl-list li + li{border-left:1px solid var(--line)}
.incl-list li:first-child{padding-left:0}
.incl-list svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--rose);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.incl-list span{font-size:14.5px;line-height:1.45;color:var(--fg-dim)}
.incl-list b{display:block;margin-bottom:2px;font:700 15.5px/1.3 var(--head);letter-spacing:-.01em;color:var(--fg)}

/* chooser band: a fine dot grid on paper */
.l3 .fit{background:radial-gradient(rgba(46,24,44,.1) 1px,transparent 1.3px) 0 0/22px 22px,var(--paper)}
.l3 .fit-card{border-radius:20px;box-shadow:inset 0 0 0 1px var(--line),var(--lift-hi)}

/* services bento */
.l3 #services{background:linear-gradient(180deg,#fff,var(--ink) 70%)}
.bento{display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"web phone" "seo phone" "sys sys";gap:18px}
.bx{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,30px);border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--lift);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
@media (hover:hover){.bx:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(194,53,96,.3),var(--lift-hi)}}
.bx-web{grid-area:web}.bx-phone{grid-area:phone}.bx-seo{grid-area:seo}.bx-sys{grid-area:sys}
.bx h3{margin:6px 0 0;font:700 clamp(21px,1.9vw,25px)/1.15 var(--head);letter-spacing:-.025em}
.bx > p,.bx-text p{margin:0;font-size:15.5px;color:var(--fg-dim);max-width:56ch}
.bx-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-top:auto!important;padding-top:16px;border-top:1px solid var(--line);max-width:none!important}
.bx-foot span{font-size:14px;color:var(--fg-mute)}
.bx-foot b{font:700 19px/1.2 var(--head);letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.bx-foot small{font:400 14px var(--display);letter-spacing:0;color:var(--fg-mute)}
.bx .svc-rules{flex-direction:column;gap:8px;margin:2px 0 0}

/* illustration panels */
.bx-vis{position:relative;min-height:180px;margin-bottom:6px;border-radius:14px;overflow:hidden}
.bx-web .bx-vis{background:linear-gradient(135deg,#fdeee4,#f5edfb)}
.mini-site{position:absolute;left:8%;top:18%;right:22%;bottom:-10%;display:grid;align-content:start;gap:9px;padding:16px;border-radius:10px 10px 0 0;background:#fff;box-shadow:0 18px 40px -22px rgba(46,24,44,.4)}
.mini-site i,.mini-phone i{display:block;height:7px;border-radius:4px;background:rgba(46,24,44,.1)}
.mini-site .ms-bar{height:6px;width:30%;margin-bottom:6px;background:rgba(46,24,44,.16)}
.mini-site .ms-h{height:12px;width:72%;background:rgba(46,24,44,.22)}
.mini-site .ms-h.s{width:48%}
.mini-site .ms-l{width:86%}.mini-site .ms-l.s{width:60%}
.ms-btn,.mp-btn{justify-self:start;margin-top:4px;padding:6px 12px;border-radius:8px;font:600 11.5px/1 var(--display);color:#fff;background:var(--rose)}
.mini-phone{position:absolute;right:7%;top:26%;width:86px;height:150px;display:grid;align-content:start;gap:7px;padding:22px 10px 10px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(46,24,44,.12),0 22px 40px -18px rgba(46,24,44,.45)}
.mini-phone .mp-h{height:34px;border-radius:8px;background:linear-gradient(135deg,var(--sun),var(--rose))}
.mini-phone .mp-l.s{width:70%}
.mp-btn{justify-self:stretch;text-align:center;padding:6px 0;font-size:10.5px;background:var(--fg)}

.bx-phone .bx-vis{display:grid;align-content:center;gap:10px;padding:22px 20px;min-height:230px;background:linear-gradient(160deg,#f3eefc,#fdf0ec)}
.chip-miss{justify-self:center;margin:0 0 4px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--fg-dim);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.chip-miss::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--rose);vertical-align:1px}
.bub{max-width:82%;margin:0;padding:10px 14px;font-size:14px;line-height:1.4}
.bub.out{justify-self:end;border-radius:14px 14px 4px 14px;color:#fff;background:var(--rose)}
.bub.in{justify-self:start;border-radius:14px 14px 14px 4px;color:var(--fg);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}

.bx-seo .bx-vis{display:grid;align-content:center;gap:12px;padding:20px;background:linear-gradient(135deg,#eef4fb,#f6effa)}
.mini-q{display:flex;align-items:center;gap:9px;margin:0;height:38px;padding:0 14px;border-radius:999px;font-size:14px;color:var(--fg-dim);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.mini-q svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mini-res{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.mini-res li{display:grid;gap:5px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.7)}
.mini-res li b{display:block;height:7px;width:45%;border-radius:4px;background:rgba(46,24,44,.16)}
.mini-res li span{display:block;height:6px;width:62%;border-radius:4px;background:rgba(46,24,44,.08)}
.mini-res .you{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(194,53,96,.45)}
.mini-res .you b,.mini-res .you span{width:auto;height:auto;background:none}
.mini-res .you b{font-size:14px;font-weight:700;color:var(--fg)}
.mini-res .you span{font-size:12.5px;color:var(--rose)}

.bx-sys{display:grid;grid-template-columns:1fr 1.25fr;grid-template-areas:"text vis" "foot foot";column-gap:clamp(20px,4vw,56px);align-items:center}
.bx-sys .bx-vis{grid-area:vis;min-height:0;margin:0;padding:26px 20px;background:linear-gradient(135deg,#fdf3e6,#fbeef2)}
.bx-sys .bx-text{grid-area:text}
.bx-sys .bx-foot{grid-area:foot;margin-top:16px!important}
.flow{position:relative;display:flex;justify-content:space-between;gap:8px;margin:0;padding:0;list-style:none}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:11px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sun),var(--rose),var(--violet))}
.flow li{position:relative;display:grid;justify-items:center;gap:10px;flex:1;font-size:12.5px;font-weight:500;line-height:1.25;text-align:center;color:var(--fg)}
.flow li::before{content:"";width:24px;height:24px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat,var(--rose);box-shadow:0 0 0 4px #fff}
.flow li:first-child::before{background-color:var(--sun)}
.flow li:last-child::before{background-color:var(--violet)}

/* pricing panel, founder photo and work shots pick up the same soft depth */
.l3 .d-price{border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--lift-hi)}
.l3 .d-founder img{box-shadow:var(--lift-hi)}
.l3 .d-work .d-shot{box-shadow:0 0 0 1px var(--line-hi),var(--lift-hi)}

@media (max-width:980px){
  .incl-list{grid-template-columns:1fr 1fr}
  .incl-list li:nth-child(3){border-left:0;padding-left:0}
  .incl-list li:nth-child(n+3){border-top:1px solid var(--line)}
  .bento{grid-template-columns:1fr;grid-template-areas:"web" "phone" "seo" "sys"}
  .bx-sys{grid-template-columns:1fr;grid-template-areas:"vis" "text" "foot";row-gap:14px}
}
@media (max-width:640px){
  .incl-list{grid-template-columns:1fr}
  .incl-list li{padding:18px 0;border-left:0!important}
  .incl-list li + li{border-top:1px solid var(--line)}
  .flow{flex-wrap:wrap;justify-content:center;row-gap:18px}
  .flow::before{display:none}
  .flow li{flex:0 0 30%}
  .mini-phone{display:none}
  .mini-site{right:8%}
}

/* the tall phone card: let the conversation fill the extra height instead of leaving a gap */
.bx-phone .bx-vis{flex:1 1 auto}
@media (max-width:980px){.bx-phone .bx-vis{flex:none}}

/* ---------- pricing page (pricing-v2.html) in the same design ---------- */
.l3 .d-pagehead{position:relative;overflow:hidden;isolation:isolate}
.l3 .d-pagehead::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 88% 120%,transparent 0 52px,rgba(194,53,96,.075) 53px 54px);
  -webkit-mask-image:radial-gradient(50% 90% at 88% 100%,#000 25%,transparent 72%);mask-image:radial-gradient(50% 90% at 88% 100%,#000 25%,transparent 72%)}
.l3 #websites,.l3 #partner{background:linear-gradient(180deg,#fff,var(--ink) 75%)}
.l3 #seo{background:radial-gradient(rgba(46,24,44,.1) 1px,transparent 1.3px) 0 0/22px 22px,var(--paper)}
.l3 .tier{border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--lift)}
@media (hover:hover){.l3 .tier:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(194,53,96,.3),var(--lift-hi)}}
.l3 .tier.hot{background:linear-gradient(180deg,rgba(194,53,96,.06),#fff 40%);box-shadow:inset 0 0 0 1.5px rgba(194,53,96,.55),var(--lift-hi)}
.l3 .rows{padding:4px clamp(20px,2.6vw,32px);border-top:0;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--lift)}
.l3 .rows li:last-child{border-bottom:0}
.l3 .p-callout{background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line),var(--lift)}
.l3 .p-facts li{border-top-color:var(--rose)}

/* ---------- inner pages ---------- */
/* privacy, terms and unsubscribe were written for the dark ground: switch their fixed whites to tokens */
.l3 .legal-doc h1,.l3 .legal-doc h2,.l3 .legal-doc b,.l3 .legal-doc a,.l3 .legal-doc th{color:var(--fg)}
.l3 .legal-doc .meta{color:var(--fg-mute)}
.l3 .legal-doc p,.l3 .legal-doc li,.l3 .legal-doc td{color:var(--fg-dim)}
.l3 .legal-doc h2{border-top-color:var(--line)}
.l3 .legal-doc .toc,.l3 .legal-doc th,.l3 .legal-doc td,.l3 .unsub-done{border-color:var(--line-hi)}
.l3 .legal-doc .toc{border-radius:14px;background:#fff;box-shadow:var(--lift)}
.l3 .legal-doc th{background:rgba(46,24,44,.04)}
/* booking page: the sticky summary bar becomes a white pill */
.l3 .form-foot{background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1px var(--line-hi),0 20px 44px -24px rgba(46,24,44,.35)}
.l3 .d-card{border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--lift)}
/* 404: a little air between the buttons and the quick links */
.l3 .d-ctas + .d-toc{margin-top:16px}
/* booking calendar: each date gets its own box, and the selected date wins over hover
   (the calendar re-renders under the pointer on click, so a stronger hover rule hid the selection) */
.l3 .days{gap:8px}
.l3 .day{border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-hi);transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.l3 .day:hover:not([disabled]){background:rgba(194,53,96,.06);box-shadow:inset 0 0 0 1.5px rgba(194,53,96,.55)}
.l3 .day[disabled]{background:transparent;box-shadow:inset 0 0 0 1px var(--line);opacity:.5}
.l3 .day[aria-pressed="true"],.l3 .day[aria-pressed="true"]:hover:not([disabled]){background:linear-gradient(135deg,var(--sun),var(--rose));color:#fff;box-shadow:0 10px 22px -12px rgba(194,53,96,.7);font-weight:600}
.l3 .slot:hover:not([disabled]):not([aria-pressed="true"]){background:rgba(194,53,96,.06);box-shadow:inset 0 0 0 1px rgba(194,53,96,.45)}
/* about page: the four services as a 2 x 2 grid of cards */
.about-svc{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0;padding:0;list-style:none}
.about-svc li{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--lift)}
.about-svc h3{margin:0;font:700 22px/1.2 var(--head);letter-spacing:-.02em}
.about-svc p{margin:0;font-size:16px;color:var(--fg-dim)}
.about-svc b{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font:700 17px var(--head);letter-spacing:-.01em;color:var(--fg)}
@media (max-width:640px){.about-svc{grid-template-columns:1fr}}
/* scroll fade-ins: the bento cards' own hover transition replaced the reveal transition, so their opacity snapped
   while the slide ran on a different curve, and the blur is costly on phones. Animate the same properties together. */
.l3 .bx.rv{transition:opacity .8s cubic-bezier(.3,.5,.4,1),transform .9s cubic-bezier(.25,.65,.3,1),box-shadow .6s var(--ease)}
@media (max-width:980px){.rv,.rv.pre{filter:none!important}.rv.pre{transform:translateY(28px)}.rv{transition-delay:0s!important}
  .rv{transition:opacity .8s cubic-bezier(.3,.5,.4,1),transform .9s cubic-bezier(.25,.65,.3,1)}}
/* phones: tie the fade-in to scroll position instead of a timed transition, so a card can never pop in
   (where supported; older browsers keep the timed reveal above) */
@keyframes rvIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (max-width:980px){@supports (animation-timeline:view()){
  .rv,.rv.pre{transition:none;animation:rvIn linear both;animation-timeline:view();animation-range:cover 0% cover 30%}}}
/* mobile menu: the panel unfolds from the menu button and the links drop in one after another */
@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.94)}}
@keyframes menuItem{from{opacity:0;transform:translateY(-8px)}}
.d-menu[open] nav{transform-origin:top right;animation:menuIn .34s cubic-bezier(.2,.8,.2,1)}
.d-menu[open] nav a{animation:menuItem .4s cubic-bezier(.2,.8,.2,1) backwards}
.d-menu[open] nav a:nth-child(2){animation-delay:.04s}
.d-menu[open] nav a:nth-child(3){animation-delay:.08s}
.d-menu[open] nav a:nth-child(4){animation-delay:.12s}
.d-menu[open] nav a:nth-child(5){animation-delay:.16s}
.d-menu[open] nav a:nth-child(6){animation-delay:.2s}
/* closing (ui.js adds .closing, then closes after 220ms): the panel folds back up and the X turns back into lines */
@keyframes menuOut{to{opacity:0;transform:translateY(-8px) scale(.95)}}
.d-menu.closing nav{animation:menuOut .2s cubic-bezier(.4,0,1,1) forwards}
.d-menu.closing nav a{animation:none}
.d-menu.closing summary span:first-child{top:18px;transform:none}
.d-menu.closing summary span:last-child{top:25px;transform:none}