/* Page sections: shared section head, services, why + stats, pricing, process, FAQ, contact. */
.sec{position:relative;padding:6rem 0;border-top:1px solid var(--line)}
.sec.alt{background:rgba(17,17,20,.3)}
/* A section that opens its own page (pricing.php): clears the fixed header, soft blue glow behind the heading */
.sec.page-top{padding-top:calc(var(--header-h) + 4rem);border-top:0;background:radial-gradient(60rem 28rem at 15% 0,rgba(45,107,255,.14),transparent 70%),rgba(17,17,20,.3)}
.page-top h1{max-width:42rem;font-size:clamp(2.5rem,6vw,3.75rem);line-height:1.02;text-wrap:balance}
#pick,.cat{scroll-margin-top:1.25rem}
.sec-head{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3.5rem}
.sec-head .eyebrow{margin-bottom:1rem}
.sec h2{max-width:42rem;font-size:2.25rem;line-height:1.05;text-wrap:balance}
.sec-lede{max-width:36rem;margin-top:1.25rem;font-size:1.0625rem;line-height:1.65;color:var(--fg-55)}
.more-link{display:inline-flex;align-items:center;gap:.5rem;flex:none;font-size:.875rem;color:var(--fg-65);transition:color .2s}
.more-link:hover{color:#fff}
.lazy-sec{content-visibility:auto;contain-intrinsic-size:auto 1400px}
.lazy-off .lazy-sec{content-visibility:visible}
.card{border:1px solid var(--line);border-radius:1.5rem;background:var(--card);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .3s var(--ease),border-color .3s var(--ease)}
.card:hover{background:var(--card-hi);border-color:var(--line-hi)}
@media (min-width:768px){
  .sec{padding:8rem 0}
  .sec h2{font-size:3rem}
  .sec-head.split{flex-direction:row;justify-content:space-between;align-items:flex-end}
}

/* Scroll reveal (only when main.js has run) */
.reveal .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) calc(var(--i,0) * 80ms),transform .8s var(--ease) calc(var(--i,0) * 80ms),background .3s var(--ease),border-color .3s var(--ease)}
.reveal .rv.in{opacity:1;transform:none}

/* Services: numbered cards */
.svc-list{display:grid;gap:1rem}
.svc{position:relative;isolation:isolate;display:grid;grid-template-columns:auto 1fr;gap:.25rem 1.25rem;padding:1.75rem 1.5rem}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,rgba(45,107,255,.08),transparent 70%);opacity:0;transition:opacity .4s var(--ease)}
.svc:hover::before{opacity:1}
.svc-n{padding-top:.55rem;font:400 .75rem/1 var(--mono);color:var(--fg-35)}
.svc-title{font-size:1.6rem;line-height:1.1;transition:color .3s,transform .4s var(--ease)}
.svc:hover .svc-title{color:var(--blue-hi);transform:translateX(6px)}
.svc-intro{max-width:36rem;margin-top:.5rem;font-size:.95rem;color:var(--fg-45)}
.svc-tags,.work-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.svc-tags li,.work-tags li{padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);font-size:.75rem;color:var(--fg-65)}
.svc-side{grid-column:2;display:flex;align-items:center;gap:1rem;margin-top:1.25rem}
.svc-from{font:500 .8rem/1 var(--mono);color:var(--blue-hi);white-space:nowrap}
.svc-go{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid var(--line-hi);border-radius:50%;transition:background .3s,border-color .3s}
.svc-go .ar{width:14px;height:14px}
.svc:hover .svc-go{background:var(--blue);border-color:var(--blue)}
@media (min-width:768px){
  .svc{grid-template-columns:4rem 1fr auto;align-items:center;gap:0 2.5rem;padding:2.25rem 2rem}
  .svc-n{align-self:start;padding-top:1rem}
  .svc-title{font-size:2.25rem}
  .svc-side{grid-column:auto;flex-direction:column;align-items:flex-end;margin-top:0}
}

/* Pressed glow on service, plan and category cards: a blue halo layer that lights up, then fades */
.svc::after,.plan::after,.cat::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(107,149,255,.55),0 0 36px 2px rgba(45,107,255,.5),0 0 100px 12px rgba(45,107,255,.28);opacity:0;transition:opacity .3s var(--ease)}
.svc:active::after,.plan:active::after,.cat:active::before{opacity:1}
.svc.glow::after,.plan.glow::after,.cat.glow::before{animation:glow 1s var(--ease) forwards}
@keyframes glow{from{opacity:1}to{opacity:0}}

/* Selected work: browser frame that scrolls through the site, phone view overlapping it */
.work-list{display:grid;gap:1.5rem}
.work{display:grid;gap:2.5rem;padding:1rem;overflow:hidden}
.work-shot{position:relative;display:block;padding:0 0 1.5rem}
.work-frame{display:block;overflow:hidden;border:1px solid var(--line-hi);border-radius:1rem;background:var(--ink-800);box-shadow:0 30px 80px -30px rgba(45,107,255,.45)}
.work-bar{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.work-dots{display:flex;gap:.35rem}
.work-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-hi)}
.work-url{flex:1;max-width:16rem;margin-inline:auto;padding:.3rem .75rem;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.05);font:400 .7rem/1.2 var(--mono);color:var(--fg-55);text-align:center;text-overflow:ellipsis;white-space:nowrap}
.work-screen{display:block;aspect-ratio:16/10;overflow:hidden}
.work-desk{display:block;width:100%;height:auto;transition:transform 7s cubic-bezier(.45,0,.25,1)}
.work-shot:hover .work-desk{transform:translateY(-75%)}
@media (hover:none){.work-desk{animation:peek 16s ease-in-out infinite alternate}}
@keyframes peek{0%,12%{transform:none}88%,100%{transform:translateY(-75%)}}
.work-phone{position:absolute;right:.75rem;bottom:0;width:24%;max-width:150px;height:auto;border:4px solid #1d1d22;border-radius:1.25rem;box-shadow:0 24px 50px -12px rgba(0,0,0,.85),0 0 0 1px var(--line-hi);transition:transform .5s var(--ease)}
.work-shot:hover .work-phone{transform:translateY(-6px)}
.work-body{padding:0 .75rem 1rem}
.work-body .eyebrow{margin-bottom:.75rem}
.work h3{font-size:2rem;line-height:1.1;letter-spacing:-.02em}
.work-sum{max-width:30rem;margin-top:1rem;font-size:.95rem;line-height:1.65;color:var(--fg-55)}
.work-tags{margin-top:1.25rem}
.work .btn{margin-top:2rem}
.platforms{margin-top:4.5rem}
.plat-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.plat-list li{padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);font:500 .9rem/1 var(--display);color:var(--fg-65);transition:color .3s,border-color .3s,background .3s}
.plat-list li:hover{color:#fff;border-color:rgba(45,107,255,.5);background:var(--blue-10)}
@media (min-width:960px){
  .work{grid-template-columns:1.4fr 1fr;align-items:center;gap:3.5rem;padding:1.5rem 3rem 1.5rem 1.5rem}
  .work-body{padding:0}
  .work h3{font-size:2.5rem}
}

/* Why + stats */
.why-grid{display:grid;gap:1rem}
.why{height:100%;padding:1.75rem}
.why-ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:1.5rem;border:1px solid var(--line);border-radius:.75rem;background:var(--blue-10);color:var(--blue-hi);transition:background .3s,color .3s}
.why-ic svg{width:22px;height:22px}
.why:hover .why-ic{background:var(--blue);color:#fff}
.why h3{margin-bottom:.75rem;font-size:1.25rem;line-height:1.2;letter-spacing:-.01em}
.why p{font-size:.875rem;line-height:1.65;color:var(--fg-55)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 1.5rem;margin-top:5rem;padding-top:4rem;border-top:1px solid var(--line)}
.stat{display:flex;flex-direction:column-reverse}
.stat dd{font:700 2.5rem/1 var(--display);letter-spacing:-.03em}
.stat dt{margin-top:.75rem;font-size:.875rem;color:var(--fg-45)}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){
  .why-grid{grid-template-columns:repeat(4,1fr)}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .stat dd{font-size:3.25rem}
}

/* Pricing: currency switch, tabs, plan cards */
.cur-card{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;flex:none}
.cur-label{font:400 .65rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.22em;color:var(--fg-35)}
.cur{display:inline-flex;align-items:center;gap:.75rem;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03)}
.cur-opt{font:500 .8rem/1 var(--mono);letter-spacing:.08em;color:var(--fg-45);transition:color .2s}
.cur-opt:hover,.cur-opt[aria-pressed=true]{color:#fff}
.switch{position:relative;width:52px;height:28px;border:1px solid var(--line-hi);border-radius:999px;background:rgba(255,255,255,.1);transition:background .3s,border-color .3s}
.knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.switch[aria-checked=true]{background:var(--blue);border-color:var(--blue)}
.switch[aria-checked=true] .knob{transform:translateX(24px)}
.cur-hint{max-width:20rem;font-size:.8rem;color:var(--fg-45)}
@media (min-width:768px){.cur-card{align-items:flex-end;text-align:right}}
.cats-label{margin-bottom:1rem;font:400 .65rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.22em;color:var(--fg-35)}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:3rem}
.cats .cat:last-child:nth-child(odd){grid-column:span 2}
.cat{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:1.25rem 1.1rem 1.1rem;border:1px solid var(--line);border-radius:1.25rem;background:var(--card);transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cat:hover{transform:translateY(-3px);background:var(--card-hi);border-color:var(--line-hi)}
.cat-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:1rem;border:1px solid var(--line);border-radius:.7rem;background:var(--blue-10);color:var(--blue-hi);transition:background .3s,color .3s,border-color .3s}
.cat-ic svg{width:19px;height:19px}
.cat-name{font:600 1rem/1.25 var(--display);letter-spacing:-.01em}
.cat-from{margin-top:auto;padding-top:.6rem;font:500 .75rem/1.3 var(--mono);color:var(--blue-hi)}
.cat-n{font-size:.75rem;color:var(--fg-45)}
.cat::after{content:"";position:absolute;top:1.1rem;right:1.1rem;width:8px;height:8px;border-radius:50%;border:1px solid var(--line-hi);transition:background .3s,border-color .3s,box-shadow .3s}
.cat[aria-selected=true]{border-color:var(--blue);background:linear-gradient(160deg,rgba(45,107,255,.18),rgba(45,107,255,.04) 60%),var(--card);box-shadow:0 12px 40px -18px rgba(45,107,255,.7)}
.cat[aria-selected=true] .cat-ic{background:var(--blue);border-color:var(--blue);color:#fff}
.cat[aria-selected=true]::after{background:var(--blue-hi);border-color:var(--blue-hi);box-shadow:0 0 0 4px rgba(107,149,255,.18)}
@media (min-width:640px){.cats{grid-template-columns:repeat(4,minmax(0,1fr))}.cats .cat:last-child:nth-child(odd){grid-column:auto}}
@media (min-width:1280px){
  .cats{grid-template-columns:repeat(8,minmax(0,1fr))}
  .cats .cat{padding:1.15rem .85rem 1rem}
  .cats .cat-name{font-size:.92rem}
}
@media (max-width:420px){.cat{padding:1rem .9rem .95rem}.cat-ic{margin-bottom:.8rem}.cat-name{font-size:.95rem}}
.price-panel+.price-panel{margin-top:4rem}
.js .price-panel{margin-top:0}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;margin-bottom:1.5rem}
.panel-head h3{font-size:1.5rem}
.panel-head p{max-width:36rem;font-size:.9rem;color:var(--fg-45)}
.panel-link{display:inline-flex;align-items:center;gap:.4rem;margin:-.5rem 0 1.5rem;font:500 .8rem/1 var(--mono);letter-spacing:.06em;color:var(--blue-hi);transition:color .2s}.panel-link:hover{color:#fff}
.plans{display:grid;gap:1rem}
.plan{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:1.75rem;animation:rise .5s var(--ease) backwards;animation-delay:calc(var(--i,0) * 60ms);transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.plan.addon{border-style:dashed}
.plan-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.plan h4{min-width:0;font:600 1.15rem/1.25 var(--display);letter-spacing:-.01em}
.chip{flex:none;max-width:55%;padding:.3rem .6rem;text-align:center;overflow-wrap:anywhere;border:1px solid rgba(45,107,255,.3);border-radius:999px;background:var(--blue-10);font:400 .62rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--blue-hi)}
.plan-desc{flex:1;margin-top:.875rem;font-size:.875rem;line-height:1.6;color:var(--fg-55)}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.plan-price .from{font:400 .65rem/1 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-35)}
.plan-price .amt{font:700 1.875rem/1 var(--display);letter-spacing:-.02em}
.plan-price .amt.soon{font-size:1.25rem;color:var(--fg-45)}
.plan-price .unit{font-size:.9rem;color:var(--fg-45)}
.plan-actions{display:flex;gap:.5rem;margin-top:1.25rem}
.plan-actions .btn{flex:1;padding-inline:.75rem}
.plan:hover .btn-quote{background:var(--blue);border-color:var(--blue);color:#fff}
.has-dialog .plan[data-plan]{cursor:pointer}
.has-dialog .plan[data-plan]:hover{transform:translateY(-3px)}
.has-dialog .plan-more{display:none}
.plan-more{margin-top:1.25rem}
.plan-more summary{cursor:pointer;font:400 .7rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--blue-hi)}
.plan-more .checks{margin-top:1rem}
.checks{display:grid;gap:.65rem}
.checks li{position:relative;padding-left:1.85rem;font-size:.9rem;line-height:1.5;color:var(--fg-65)}
.checks li::before{content:"";position:absolute;left:0;top:.08rem;width:1.25rem;height:1.25rem;border:1px solid rgba(45,107,255,.35);border-radius:50%;background:var(--blue-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%236b95ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/.65rem no-repeat}
.notes{display:grid;gap:1rem;margin-top:3.5rem}
.note{padding:1.5rem;border:1px solid var(--line);border-radius:1.25rem}
.note b{display:block;margin-bottom:.5rem;font:600 1rem/1.3 var(--display)}
.note p{font-size:.875rem;line-height:1.6;color:var(--fg-55)}
@media (min-width:640px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){.notes{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.plans{grid-template-columns:repeat(3,1fr)}}

/* Process */
.steps{display:grid;gap:1rem}
.step{padding:1.75rem}
.step .n{font:400 .75rem/1 var(--mono);letter-spacing:.2em;color:var(--blue-hi)}
.step .bar{display:block;height:1px;margin:1.25rem 0;background:linear-gradient(to right,var(--blue),transparent)}
.step h3{margin-bottom:.6rem;font-size:1.25rem}
.step p{font-size:.875rem;line-height:1.65;color:var(--fg-55)}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(5,1fr)}}

/* FAQ */
.faq-grid{display:grid;gap:1rem}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;list-style:none;cursor:pointer;font:600 1.125rem/1.35 var(--display);letter-spacing:-.01em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-hi)}
.faq summary::after{content:"";flex:none;width:32px;height:32px;border:1px solid var(--line-hi);border-radius:50%;background:linear-gradient(#fff,#fff) center/12px 1.5px no-repeat,linear-gradient(#fff,#fff) center/1.5px 12px no-repeat;transition:transform .3s var(--ease),background-color .3s,border-color .3s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--blue);border-color:var(--blue)}
.faq details p{padding:0 3.5rem 1.5rem 0;line-height:1.7;color:var(--fg-55)}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem}
  .faq-grid .sec-head{position:sticky;top:7rem;align-self:start}
}

/* Contact: CTA head, contact lines, brief form */
.contact{isolation:isolate;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 45% at 50% 0,rgba(45,107,255,.18),rgba(45,107,255,0) 70%)}
.contact-head{max-width:48rem;margin:0 auto 4rem;text-align:center}
.contact-head .eyebrow{margin-bottom:1rem}
.contact-head h2,.contact-head .sec-lede{margin-inline:auto}
.contact-head .hero-actions{justify-content:center}
.contact-grid{display:grid;gap:1rem}
.clines{align-self:start;padding:.5rem 1.75rem}
.cline{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.35rem 1rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline .lbl{grid-column:1/-1;font:400 .65rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-35)}
.cline .val{font:500 1.05rem/1.4 var(--display);overflow-wrap:anywhere}
.copy{padding:.35rem .75rem;border:1px solid var(--line);border-radius:999px;font:400 .65rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--blue-hi);transition:border-color .2s}
.copy:hover{border-color:var(--blue)}
.brief{padding:1.75rem}
.brief h3{margin-bottom:1.5rem;font-size:1.5rem}
.field{margin-bottom:1.25rem}
.field label{display:block;margin-bottom:.5rem;font:400 .65rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-45)}
.field input,.field select,.field textarea{width:100%;padding:.875rem 1rem;border:1px solid var(--line);border-radius:.9rem;background:rgba(255,255,255,.03);font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-35)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(45,107,255,.2)}
.field select{-webkit-appearance:none;appearance:none;padding-right:2.5rem;background:rgba(255,255,255,.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23ffffff99' stroke-width='1.4'/%3E%3C/svg%3E") right 1rem center/12px no-repeat}
.field option,.field optgroup{background:var(--ink-800);color:#fff}
.field textarea{min-height:130px;resize:vertical}
.fine{margin-top:1rem;text-align:center;font-size:.8rem;color:var(--fg-35)}
@media (min-width:640px){.brief{padding:2.25rem}}
@media (min-width:1024px){.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* Package details dialog: centred card on desktop, bottom sheet on phones */
html.modal-open{overflow:hidden}
.sheet{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;width:min(42rem,calc(100% - 2rem));max-height:calc(100vh - 2rem);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line-hi);border-radius:1.5rem;background:radial-gradient(70% 40% at 50% 0,rgba(45,107,255,.16),transparent 70%),#0f0f12;color:var(--fg);box-shadow:0 40px 120px -30px rgba(0,0,0,.9)}
.sheet[open]{animation:pop .35s var(--ease)}
.sheet::backdrop{background:rgba(5,5,8,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet-inner{position:relative;padding:2rem 1.5rem 1.75rem}
.sheet-close{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-hi);border-radius:50%;color:var(--fg-65);transition:color .2s,border-color .2s,background .2s}
.sheet-close:hover{color:#fff;border-color:var(--blue);background:var(--blue)}
.sheet-close svg{width:18px;height:18px}
.sheet .eyebrow{margin-bottom:.75rem}
.pd-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding-right:3rem}
.pd-head h3{font-size:1.75rem;line-height:1.1}
.pd-head .chip{max-width:none}
.pd-price .plan-price{margin:1.25rem 0 0;padding:0;border:0}
.pd-price .amt{font-size:2.5rem}
.pd-desc{margin-top:1rem;font-size:.95rem;line-height:1.65;color:var(--fg-55)}
.pd-label{margin:1.75rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--line);font:400 .7rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.22em;color:var(--blue-hi)}
.pd-note{margin-top:1.5rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:1rem;background:rgba(255,255,255,.02);font-size:.85rem;line-height:1.55;color:var(--fg-55)}
.pd-terms{display:grid;gap:.4rem;margin-top:1rem;font-size:.8rem;line-height:1.5;color:var(--fg-45)}
.pd-terms b{color:var(--fg-65);font-weight:500}
.pd-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.75rem}
@media (min-width:640px){
  .sheet-inner{padding:2.5rem 2.5rem 2.25rem}
  .sheet .checks{grid-template-columns:1fr 1fr;column-gap:1.5rem}
  .pd-actions{flex-direction:row}
  .pd-actions .btn{flex:1}
}
@media (max-width:639px){
  .sheet{width:100%;max-width:100%;max-height:88vh;margin:auto 0 0;border-radius:1.5rem 1.5rem 0 0;border-bottom:0}
  .sheet[open]{animation:sheet-up .4s var(--ease)}
  .sheet-inner::before{content:"";position:absolute;top:.6rem;left:50%;width:2.5rem;height:4px;margin-left:-1.25rem;border-radius:4px;background:var(--line-hi)}
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}

/* Mivo Wellness teaser: cream card linking to wellness.php */
.wl-teaser .wl-card{display:grid;overflow:hidden;border-radius:1.75rem;background:#f8f4eb;color:#16241f}
.wl-copy{padding:2rem 1.5rem}
.wl-head{display:inline-flex;align-items:center;gap:.7rem;font:600 .75rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#163828}
.wl-copy h2{margin-top:1.25rem;color:#16241f}
.wl-copy p{max-width:32rem;margin-top:1rem;font-size:1rem;line-height:1.6;color:#575350}
.wl-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.wl-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border:1px solid #11302a;border-radius:999px;background:#11302a;color:#fff;font-weight:500;transition:background .2s,color .2s}
.wl-btn:hover{background:#1d4a3f}
.wl-btn-ghost{background:transparent;color:#11302a}
.wl-btn-ghost:hover{background:#11302a;color:#fff}
.wl-pic img{width:100%;height:100%;object-fit:cover;object-position:60% center}
@media (min-width:900px){
  .wl-teaser .wl-card{grid-template-columns:.9fr 1.1fr;align-items:stretch}
  .wl-copy{padding:3rem 2.5rem;align-self:center}
}