/* Websnoogie front page v2 (2026-10-04). Loaded after ws-beta-base.css + the inline design-1 styles. */
:root{--wrap:1350px}
html,body{overflow-x:clip}

/* Hero ("billboard"): no right-hand card; contact on the left */
.v2 .hero{min-height:640px}
.v2 .hero .wrap{grid-template-columns:1fr;padding:84px 0 130px}
.v2 .hero-copy{max-width:640px}
.v2 .hero h1{max-width:15ch;font-size:clamp(2.6rem,1.6rem + 3.4vw,4.6rem)}
.v2 .hero::before{background:linear-gradient(90deg,rgba(20,8,6,.88) 0%,rgba(20,8,6,.66) 42%,rgba(20,8,6,.12) 78%,rgba(20,8,6,0) 100%)}
.hero-mail{margin:18px 0 0!important}
.hero-mail a{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:1.1rem;text-decoration:none;border-bottom:2px solid var(--yellow)}
.hero-mail a:hover{border-bottom-color:#fff}
.hero-mail svg{width:20px;height:20px}

/* Info bar: BBB seal | 20+ years | 99.999% */
.v2 .ribbon .wrap{grid-template-columns:repeat(3,1fr);padding:18px 30px;gap:28px}
.v2 .ribbon .bbb{justify-self:start;display:inline-flex;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.v2 .ribbon .bbb img{width:200px;height:auto;border-radius:0}
.v2 .ribbon b{font-size:1.3rem}

/* CTA area: 3 wider, larger columns */
.cta3{padding:76px 0 64px}
.cta-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:44px;align-items:start}
.cta3 h2{font-family:var(--f-display);font-size:1.6rem;line-height:1.2;margin:0 0 14px}
.cta-img{width:100%;height:320px;object-fit:cover;border-radius:18px;margin-bottom:18px}
.cta-about p{font-size:1.12rem}
.cta3 .pay-box{padding:28px}
.cta3 .price-row{padding:13px 0;font-size:1.05rem}
.cta3 .price-row .amt{font-size:1.15rem}
.cta3 .btn{padding:15px 22px;font-size:1.05rem}
.cta3 .form{gap:12px}
.cta3 .form input{padding:14px 16px;font-size:1.05rem}

/* Feature sections (web design, hosting, SEO) */
.feature{padding:88px 0}
.feature-alt{background:#f6f2ec}
.feature-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.feature-copy h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);line-height:1.08;letter-spacing:-.015em;margin:4px 0 16px;color:var(--navy)}
.feature-copy > p{font-size:1.15rem;max-width:56ch;margin:0 0 20px}
.kicker{margin:0;font-weight:800;color:var(--maroon);font-size:1rem}
.checks{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:1.08rem;font-weight:600;line-height:1.35}
.checks .ck{width:24px;height:24px;flex:none;margin-top:1px}

/* Browser frame around the Nezia Care screenshot */
.browser{margin:0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(11,31,58,.22),0 0 0 1px rgba(11,31,58,.08)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#ece7e0}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:#c9c1b6}
.browser-bar i:nth-child(1){background:var(--maroon)}
.browser-bar i:nth-child(2){background:var(--yellow)}
.browser-bar i:nth-child(3){background:var(--navy)}
.browser-bar span{margin-left:12px;flex:1;background:#fff;border-radius:999px;padding:4px 14px;font-size:.85rem;color:var(--muted)}
.browser img{display:block;width:100%;height:auto;aspect-ratio:1280/800}
.browser figcaption{padding:12px 16px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line)}

/* Hosting prices + rich pop-outs */
.prices{display:grid;gap:22px;justify-items:stretch;max-width:520px;justify-self:end;width:100%}
.price-card{background:#fff;border-radius:20px;padding:26px 30px 22px;box-shadow:0 18px 44px rgba(11,31,58,.12);border-left:8px solid var(--maroon);position:relative}
.price-card + .price-card{border-left-color:var(--navy)}
.pc-name{margin:0;font-family:var(--f-display);font-weight:800;font-size:1.3rem;color:var(--navy)}
.pc-price{margin:2px 0 8px;font-family:var(--f-display);font-weight:800;font-size:4rem;line-height:1;color:var(--maroon);letter-spacing:-.02em}
.price-card + .price-card .pc-price{color:var(--navy)}
.pc-price .cur{font-size:.5em;vertical-align:.7em;margin-right:2px}
.pc-price .per{font-family:var(--f-body);font-size:1.05rem;font-weight:700;color:var(--muted);letter-spacing:0}
.tip-link{background:none;border:0;padding:4px 0;font:inherit;font-weight:700;color:var(--maroon);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.price-card + .price-card .tip-link{color:var(--navy)}
.tip-rich{display:inline-block}
.tip-panel.rich{left:0;transform:none;bottom:auto;top:calc(100% + 12px);width:min(440px,80vw);display:grid;grid-template-columns:1fr 64px;gap:16px;align-items:start;padding:18px 20px;background:var(--navy);color:#fff;border-radius:16px;font-size:.95rem;line-height:1.5}
.tip-panel.rich[hidden]{display:none}
.tip-panel.rich::after{left:28px;top:auto;bottom:100%;transform:none;border-top-color:transparent;border-bottom-color:var(--navy)}
.tip-panel.rich b{display:block;font-size:1.05rem;margin-bottom:4px;color:#fff}
.rich-list{display:block;margin-top:8px;font-size:.86rem;color:#c5cddb}
.rich-logo{width:64px;height:64px;background:#fff;border-radius:14px;padding:8px;box-sizing:border-box;object-fit:contain}

/* SEO art: Magnific image with scattered search/AI logo chips */
.seo-art{position:relative;margin:0;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(11,31,58,.22)}
.seo-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.chips{position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,31,58,.18),rgba(104,0,0,.12))}
.chip{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.chip img{width:38px;height:38px;object-fit:contain}
.chip.chip-wide{width:96px;height:52px;margin:-26px 0 0 -48px;border-radius:999px}
.chip.chip-wide img{width:74px;height:30px}
.fly.is-in .chip{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(.75s + var(--d))}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* Blog: single column */
.v2 .blog1{padding:80px 0}
.v2 .blog1 ol{max-width:none}
.v2 .blog1 a{grid-template-columns:240px 1fr;gap:28px}
.v2 .blog1 img{width:240px;height:135px;object-fit:cover}

/* Footer: map on the left, narrow seals column on the right */
.foot-grid.v2{grid-template-columns:320px 1.15fr 1fr 1fr 1fr 110px;gap:28px}
.map iframe{display:block;width:100%;height:300px;border:0;border-radius:14px;background:#1b2f4d}
.map-link{display:inline-block;margin-top:8px;font-size:.88rem}
.seals{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.seals img{display:block;width:110px;height:auto;background:#fff;border-radius:12px;padding:6px;box-sizing:border-box}

/* Section fly-in: blank until scrolled to, then the whole section flies in from the right */
.js .fly{opacity:0;transform:translateX(100%);transition:transform .9s cubic-bezier(.16,.84,.3,1),opacity .5s ease}
.js .fly.is-in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1200px){
  .foot-grid.v2{grid-template-columns:1fr 1fr 1fr;}
  .foot-grid.v2 .map{grid-column:1 / -1}
  .seals{flex-direction:row;flex-wrap:wrap;grid-column:1 / -1}
}
@media (max-width:1100px){
  .cta-grid{grid-template-columns:1fr 1fr}
  .cta-about{grid-column:1 / -1}
  .feature-grid{grid-template-columns:1fr;gap:40px}
  .prices{justify-self:stretch;max-width:none}
}
@media (max-width:959px){
  .v2 .hero .wrap{padding:56px 0 110px}
  .v2 .ribbon .wrap{grid-template-columns:1fr;gap:12px}
}
@media (max-width:640px){
  .cta-grid{grid-template-columns:1fr}
  .cta-img{height:240px}
  .checks{grid-template-columns:1fr}
  .pc-price{font-size:3.2rem}
  .chip{width:48px;height:48px;margin:-24px 0 0 -24px}
  .chip img{width:28px;height:28px}
  .v2 .blog1 a{grid-template-columns:110px 1fr;gap:14px}
  .v2 .blog1 img{width:110px;height:62px}
  .foot-grid.v2{grid-template-columns:1fr}
  .seals img{width:96px}
}
@media (prefers-reduced-motion:reduce){.js .fly{opacity:1;transform:none}.fly.is-in .chip{animation:none}}
.blog1 .more-link,.cta3 .more-link{white-space:nowrap}
.hosting-types label .tip{flex:none}
@media (max-width:640px){.hosting-types label{font-size:.92rem}}

/* ===== v3 (2026-10-04) ===== */
/* Info bar: real-size BBB seal (no frame, rounded corners) + much larger headings */
.v2 .ribbon .wrap{align-items:center;padding:16px 34px}
.v2 .ribbon .bbb{background:none;padding:0;box-shadow:none;border-radius:16px;overflow:hidden;line-height:0}
.v2 .ribbon .bbb img{width:auto;height:104px;border-radius:16px;display:block}
.v2 .ribbon b{font-size:clamp(1.6rem,1.1rem + 1.3vw,2.25rem);line-height:1.1;letter-spacing:-.01em}
.v2 .ribbon span{font-size:1.05rem;margin-top:4px;display:block}

/* Cart redesign ("Sign up now") */
.cart{padding:28px 28px 22px}
.cart h2{margin-bottom:16px}
.cart-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;cursor:pointer}
.cart-item:has(input[type=checkbox]:checked){border-color:var(--maroon);box-shadow:0 0 0 1px var(--maroon)}
.ci-text b{display:block;font-size:1.12rem;line-height:1.2}
.ci-text small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.ci-price{font-family:var(--f-display);font-weight:800;font-size:1.5rem;color:var(--navy);white-space:nowrap}
.ci-price small{font-size:.8rem;color:var(--muted);font-family:var(--f-body)}
.cart-hosting{display:block;cursor:default}
.ci-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;cursor:pointer}
.hosting-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 10px;padding:0}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt-body{display:grid;gap:2px;height:100%;border:1.5px solid var(--field);border-radius:12px;padding:10px 12px;background:#fff}
.opt input:checked + .opt-body{border-color:var(--maroon);box-shadow:0 0 0 2px var(--maroon);background:#fff8f8}
.opt input:focus-visible + .opt-body{outline:3px solid var(--yellow);outline-offset:2px}
.opt-name{display:flex;align-items:center;gap:4px;font-weight:700;font-size:.95rem}
.opt-price{font-family:var(--f-display);font-weight:800;font-size:1.35rem;color:var(--maroon)}
.opt-price small{font-size:.75rem;color:var(--muted);font-family:var(--f-body)}
.opt .help{font-size:.78rem;color:var(--muted);line-height:1.3;padding:0}
.billing{display:grid;grid-template-columns:1fr 1fr;background:#f1ece5;border-radius:999px;padding:4px}
.billing label{position:relative;cursor:pointer}
.billing input{position:absolute;opacity:0;width:1px;height:1px}
.billing span{display:block;text-align:center;padding:8px 6px;border-radius:999px;font-weight:700;font-size:.88rem;color:var(--muted)}
.billing input:checked + span{background:var(--navy);color:#fff}
.billing input:focus-visible + span{outline:3px solid var(--yellow);outline-offset:1px}
.cart-hosting.is-off .hosting-opts,.cart-hosting.is-off .billing{opacity:.4;pointer-events:none}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 2px;font-weight:700}
.cart-total b{font-family:var(--f-display);font-size:2rem;color:var(--navy)}
.cart-note{margin:0 2px 14px;font-size:.88rem;color:var(--muted);min-height:1.3em}

/* Section headings 60% larger (operator) */
.kicker{font-size:1.6rem;line-height:1.2}

/* Blog carousel: horizontal, 480px, real posts */
.blog-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.blog-head h2{margin:0}
.car-ctrls{display:flex;align-items:center;gap:12px}
.car-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);font-size:1.8rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px}
.car-btn:hover{background:var(--navy);color:#fff}
.car-btn[disabled]{opacity:.35;cursor:default;background:#fff;color:var(--navy)}
.car-count{font-weight:700;color:var(--muted);min-width:4.5em;text-align:center}
.car-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;border-radius:22px}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.slide{flex:0 0 100%;height:480px;scroll-snap-align:start;display:grid;grid-template-columns:1.15fr 1fr;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(11,31,58,.12);border:1px solid var(--line)}
.slide-img{display:block;height:100%;background:#e9e4dc}
.slide-img img{width:100%;height:100%;object-fit:cover;display:block}
.slide-img-empty{background:linear-gradient(135deg,var(--maroon),var(--navy))}
.slide-body{padding:36px 40px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.slide-meta{margin:0;font-weight:800;color:var(--maroon);font-size:.95rem}
.slide h3{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);line-height:1.12;color:var(--navy)}
.slide h3 a{text-decoration:none}
.slide h3 a:hover{text-decoration:underline}
.slide-text{margin:0;font-size:1.1rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.slide-body .btn{align-self:flex-start;margin-top:auto}
.car-dots{display:flex;justify-content:center;gap:8px;margin:18px 0 6px}
.car-dots button{width:12px;height:12px;border-radius:50%;border:0;background:#cfc8bf;padding:0;cursor:pointer}
.car-dots button[aria-current="true"]{background:var(--maroon);width:30px;border-radius:999px}
.v2 .blog1 .slide img{width:100%;height:100%;border-radius:0}

/* Footer v3 */
.foot-grid.v3{grid-template-columns:330px 1fr 1fr 1.1fr 110px;gap:36px;align-items:start}
.f-company h3{margin-top:18px}
.f-company .map iframe{height:240px}
.map-link{text-decoration:underline!important;text-underline-offset:3px}
.hours-list{margin:0;display:grid;gap:7px}
.hours-list div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:6px}
.hours-list dt{font-weight:600;color:#fff}
.hours-list dd{margin:0;color:#d6dceb;white-space:nowrap}
.h3-gap{margin-top:26px!important}
.foot-v3 .social{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:calc(3 * 52px + 2 * 12px);margin-top:18px}
.foot-v3 .social a{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.foot-v3 .social a:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--yellow)}
.foot-v3 .social img{width:26px;height:26px}

@media (max-width:1200px){
  .foot-grid.v3{grid-template-columns:1fr 1fr 1fr}
  .foot-grid.v3 .seals{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:959px){
  .slide{grid-template-columns:1fr;grid-template-rows:200px 1fr;height:480px}
  .slide-body{padding:22px 24px}
  .slide-text{-webkit-line-clamp:4;font-size:1rem}
}
@media (max-width:640px){
  .v2 .ribbon .bbb img{height:88px}
  .hosting-opts{grid-template-columns:1fr}
  .foot-grid.v3{grid-template-columns:1fr}
  .blog-head{flex-wrap:wrap}
  .slide h3{font-size:1.35rem}
  .slide-text{-webkit-line-clamp:3}
}
/* v3 fix: neutralize the old list-style blog link grid inside carousel slides */
.v2 .blog1 .slide a{display:inline;grid-template-columns:none;gap:0;padding:0;align-items:normal}
.v2 .blog1 .slide a.slide-img{display:block;height:100%}
.v2 .blog1 .slide a.btn{display:inline-flex;align-self:flex-start;padding:13px 22px}
.v2 .blog1 .slide-img img{width:100%;height:100%;object-fit:cover;border-radius:0}
/* v3: info bar = [seal + A+ text] | 20+ years | 99.999% */
.v2 .ribbon .wrap{grid-template-columns:auto 1fr 1.3fr 1fr;gap:22px 34px}
.v2 .ribbon .bbb-text{padding-left:0}
@media (max-width:959px){.v2 .ribbon .wrap{grid-template-columns:auto 1fr}.v2 .ribbon .bbb{grid-row:span 3}}
@media (max-width:959px){
  .v2 .ribbon .wrap{grid-template-columns:auto 1fr;align-items:center}
  .v2 .ribbon .bbb{grid-row:auto}
  .v2 .ribbon .wrap > div:not(.bbb-text){grid-column:1 / -1}
}

/* ===== v4 (2026-10-05) ===== */
/* Carousel: pause/play control; arrows always enabled (they wrap) */
.car-play{border:2px solid var(--navy);background:#fff;color:var(--navy);font:inherit;font-weight:800;font-size:.9rem;border-radius:999px;padding:10px 16px;cursor:pointer;margin-right:6px}
.car-play:hover{background:var(--navy);color:#fff}

/* CTA: all three columns the same height; column 1 fills its height */
.cta-grid{align-items:stretch}
.cta-col{display:flex;flex-direction:column}
.cta-about .cta-img{flex:1 1 auto;min-height:300px;height:auto;max-height:none}
.cta-about h2{margin-top:6px}
.cta-about p a{color:var(--maroon);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cta-about .checks{grid-template-columns:1fr;margin:14px 0 0;gap:10px}
.cta-about .checks li{font-size:1rem}
.cta-buy .pay-box,.cta-form .form-box{flex:1 1 auto}
/* Contact form box = same background, header and padding as "Sign up now" */
.form-box{display:flex;flex-direction:column}
.form-box h2{margin-bottom:16px}
.form-box .form{flex:1 1 auto}
.cta3 .form label{font-size:1.08rem}   /* labels 20% larger (0.9rem -> 1.08rem) */
.form-box .btn{margin-top:4px}

/* Footer: columns sized to their content, equal space between them */
.foot-grid.v3{grid-template-columns:330px max-content max-content max-content 110px;justify-content:space-between;column-gap:40px}
.foot-grid.v3 .hours-list{min-width:250px}
@media (max-width:1200px){.foot-grid.v3{grid-template-columns:1fr 1fr 1fr;justify-content:stretch}}
@media (max-width:640px){.foot-grid.v3{grid-template-columns:1fr}}
/* v4 fix: keep the contact form compact inside its stretched box */
.form-box .form{flex:0 0 auto;align-content:start;grid-auto-rows:min-content}
.form-box .form input{padding:13px 16px}
.form-note{margin:auto 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.98rem;color:var(--muted)}
.form-note a{color:var(--maroon);font-weight:700}
.cart .more-link.in-box{display:block;text-align:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.cart{display:flex;flex-direction:column}

/* ===== v5 (2026-10-05) ===== */
/* Price cards: logo on the right */
.price-card{padding-right:150px;min-height:200px}
.pc-logo{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:88px;height:88px;object-fit:contain}
/* Rich pop-outs: wider, readable paragraphs, above neighbouring cards */
.tip-rich{position:relative;display:inline-block}
.price-card:has(.tip-panel:not([hidden])){z-index:30}
.tip-panel.rich{z-index:60;width:min(540px,88vw);font-size:.95rem;line-height:1.5}
.rich-body{display:block}
.rich-p{display:block;margin-top:8px}
.tip-panel.rich b.inline{display:inline;font-size:inherit;margin:0;color:var(--yellow-2)}
.rich-list{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.18)}
/* Carousel: no meta line */
.slide-body{padding-top:40px}
@media (max-width:640px){
  .price-card{padding-right:24px;padding-top:26px}
  .pc-logo{top:22px;right:20px;transform:none;width:56px;height:56px}
  .pc-name{padding-right:70px}
}
/* v5 fix: pop-out spans its price card (never runs off-screen) */
.price-card .tip-rich{position:static}
.price-card .tip-panel.rich{left:0;right:0;width:auto;top:calc(100% + 10px);bottom:auto}
.price-card .tip-panel.rich::after{left:44px}

/* ===== v6 (2026-10-05) ===== */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{min-height:65px}
.form .msg.is-error{color:#b3261e}
.form .msg{font-size:1rem;font-weight:600}
/* v6 QA fixes (1150px): info-bar headings fit on one line; hosting options stack when the cart is narrow */
.v2 .ribbon b{font-size:clamp(1.4rem,.75rem + 1.25vw,2.25rem)}
@media (max-width:1300px){.hosting-opts{grid-template-columns:1fr}.opt-body{grid-template-columns:1fr auto;align-items:center;column-gap:10px}.opt-name{grid-column:1}.opt-price{grid-column:2;grid-row:1 / span 2;text-align:right}.opt .help{grid-column:1}}

/* ===== v7 (2026-10-05): live checkout ===== */
#checkout-live{border:0;border-radius:18px;padding:28px;width:min(460px,calc(100vw - 32px));box-shadow:0 30px 80px rgba(0,0,0,.35)}
#checkout-live::backdrop{background:rgba(11,31,58,.6)}
#checkout-live h2{margin:0 0 6px;font-family:var(--f-display)}
#checkout-live form{display:grid;gap:10px}
#checkout-live label{font-weight:600;font-size:1.02rem}
#checkout-live input{width:100%;padding:13px 16px;border:1.5px solid var(--field);border-radius:14px;font:inherit}
#checkout-live .close{position:absolute;right:14px;top:12px;background:none;border:0;font-size:1.6rem;cursor:pointer;line-height:1}
.co-summary{margin:0 0 12px;color:var(--muted);font-size:.95rem}
#checkout-live .secure-by{justify-content:flex-start;text-align:left;font-size:.85rem}
#checkout-live .msg.is-error,.cart .msg.is-error{color:#b3261e}
.checkout-banner{border-radius:14px;padding:14px 18px;margin-bottom:14px;font-weight:700}
.checkout-banner.is-ok{background:#e7f5ec;color:#0f5a2f;border:1.5px solid #17703d}
.checkout-banner.is-info{background:#f1ece5;color:var(--ink);border:1.5px solid var(--field)}
.checkout-banner.is-err{background:#fdecea;color:#8a1c14;border:1.5px solid #b3261e}

/* ===== v8 (2026-10-05): contact message field ===== */
.form textarea{width:100%;padding:13px 16px;border:1.5px solid var(--field);border-radius:14px;font:inherit;background:#fff;color:var(--ink);resize:vertical;min-height:110px}
.form textarea:focus{border-color:var(--navy);outline:3px solid rgba(245,184,0,.45);outline-offset:0}

/* ===== v9 (2026-10-05): responsive CTA + cart, 240px to 1159px =====
   Breakpoints: >=1100 desktop (3 columns) · 900-1099 tablet (photo row + cart|form) ·
   601-899 tablet (single centered column, max 640px) · <=600 phone cart · <=400 / <=340 small phones. */
.cta-grid > *{min-width:0}
.cart-item{grid-template-columns:auto minmax(0,1fr) auto}
.ci-text b,.opt-name{overflow-wrap:anywhere}
@media (max-width:1099px){
  .cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .cta-about{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:28px;align-items:center}
  .cta-about .cta-img{grid-row:1 / span 3;height:100%;min-height:260px;max-height:380px;margin:0}
  .cta-about h2{margin-top:0}
}
@media (max-width:899px){
  .cta-grid{grid-template-columns:minmax(0,1fr)}
  .cta-col{width:100%;max-width:640px;justify-self:center}
  .cta-about{max-width:none}
  .hosting-opts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:600px){
  .cta3{padding:44px 0 40px}
  .cta-about{display:flex;flex-direction:column}
  .cta-about .cta-img{height:220px;min-height:0;max-height:none;flex:none;margin-bottom:14px}
  .cta3 h2{font-size:1.4rem}
  .cart{padding:20px 16px 18px}
  .form-box{padding:20px 16px}
  .cart-item{gap:10px;padding:12px;border-radius:12px}
  .ci-text b{font-size:1.02rem}
  .ci-text small{font-size:.8rem}
  .ci-price{font-size:1.3rem}
  .cart-hosting{padding:12px}
  .ci-head{gap:10px}
  .hosting-opts{grid-template-columns:minmax(0,1fr);gap:8px;margin:10px 0 8px}
  .opt-body{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:10px}
  .opt-name{grid-column:1;font-size:.92rem}
  .opt-price{grid-column:2;grid-row:1 / span 2;text-align:right;font-size:1.25rem}
  .opt .help{grid-column:1}
  .billing span{font-size:.82rem;padding:9px 4px}
  .cart-total b{font-size:1.75rem}
  .cart-note{font-size:.82rem}
  .cta3 .btn{width:100%;padding:14px 16px}
  .cta3 .form input,.cta3 .form textarea{font-size:1rem;padding:12px 14px}
  .cta3 .form label{font-size:1rem}
  .tip-panel{width:min(260px,78vw)}
}
@media (max-width:400px){
  .cart-item{grid-template-columns:auto minmax(0,1fr)}
  .cart-item .ci-price{grid-column:2;justify-self:start;font-size:1.2rem;margin-top:-2px}
  .opt-body{grid-template-columns:minmax(0,1fr)}
  .opt-price{grid-column:1;grid-row:auto;text-align:left}
}
@media (max-width:340px){
  .billing{grid-template-columns:1fr;border-radius:14px;gap:4px}
  .billing span{border-radius:10px}
  .cart{padding:16px 12px}
  .form-box{padding:16px 12px}
  .cart-total{flex-wrap:wrap}
}
.ts-slot{min-height:65px;max-width:100%;overflow:hidden}
/* v9 fixes after exact-width (iframe) renders */
.ci-text b,.opt-name{overflow-wrap:break-word}
@media (max-width:899px){.cta-col{max-width:none}}
@media (max-width:600px){.cta-about{align-items:stretch;text-align:left}}
@media (max-width:340px){
  .cart-hosting{padding:10px}
  .ci-head{gap:8px}
  .opt-body{padding:8px}
  .opt-name{font-size:.86rem}
  .opt .help{font-size:.74rem}
  .cart-item{padding:10px;gap:8px}
  .ci-text b{font-size:.96rem}
}

/* ---- v10: thank-you page (/thank-you/?ref=…) after a PayPal purchase. The banner fits a ~800px-tall viewport. */
.thanks .ty-banner{position:relative;overflow:hidden;background:#fbf1d8;isolation:isolate}
.thanks .ty-banner picture{position:absolute;inset:0;z-index:-1}
.thanks .ty-bg{width:100%;height:100%;object-fit:cover;object-position:right center}
.thanks .ty-banner .wrap{padding:40px 0 44px}
.thanks .ty-card{max-width:640px;background:rgba(255,253,248,.95);border-radius:22px;padding:28px 32px 24px;box-shadow:0 18px 50px rgba(104,0,0,.16),0 2px 8px rgba(0,0,0,.06);border-top:6px solid var(--maroon)}
.thanks .ty-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;padding:5px 12px 5px 6px;border-radius:99px;background:#e6f4ea;color:#17703d;font-weight:800;font-size:.9rem}
.thanks .ty-kicker .ck{width:22px;height:22px}
.thanks .ty-card h1{font-family:var(--f-display);font-size:clamp(1.65rem,3.2vw,2.35rem);line-height:1.12;color:var(--navy);margin:0 0 10px;overflow-wrap:break-word}
.thanks .ty-prod{color:var(--maroon)}
.thanks .ty-lead{margin:0 0 16px;font-size:1.06rem;color:var(--ink)}
.thanks .ty-chs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.thanks .ty-ch{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid #e6dccf;color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.thanks .ty-ch:hover,.thanks .ty-ch:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,31,58,.12)}
.thanks .ty-ch > svg{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:var(--maroon);color:#fff;fill:#fff}
.thanks .ty-ch > svg path[fill="currentColor"],.thanks .ty-ch > svg circle[fill="currentColor"]{fill:#fff}
.thanks .ty-ch > span{display:grid;min-width:0}
.thanks .ty-ch b{font-size:.98rem;color:var(--navy)}
.thanks .ty-ch span span{font-size:.92rem;color:var(--muted);overflow-wrap:anywhere}
.thanks .ty-ch-text{background:var(--yellow);border-color:var(--yellow)}
.thanks .ty-ch-text > svg{background:var(--navy)}
.thanks .ty-ch-text span span{color:var(--navy);font-weight:700}
.thanks .ty-text{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-weight:700;color:var(--navy)}
.thanks .ty-text svg{flex:none;width:22px;height:22px;color:var(--maroon)}
.thanks .ty-text a{color:var(--maroon)}
.thanks .ty-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px;padding-top:12px;border-top:1px solid #eadfd0}
.thanks .ty-hours{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:600;font-size:.94rem}
.thanks .ty-hours svg{width:20px;height:20px;color:var(--navy)}
.thanks .ty-social{display:flex;gap:6px}
.thanks .ty-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #e6dccf}
.thanks .ty-social img{width:22px;height:22px}
/* one-time confetti burst; none under reduced motion */
.thanks .ty-confetti{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.thanks .ty-confetti i{position:absolute;top:-24px;width:9px;height:15px;border-radius:2px;opacity:0;animation:ty-fall var(--t) cubic-bezier(.25,.6,.45,1) var(--d) 1 forwards}
@keyframes ty-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),680px) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.thanks .ty-confetti{display:none}.thanks .ty-ch{transition:none}}
.thanks .ty-next{padding:44px 0 56px;background:#fff}
.thanks .ty-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.thanks .ty-next .pay-box{padding:26px 28px}
.thanks .ty-next h2{font-family:var(--f-display);color:var(--navy);margin:0 0 14px;font-size:1.45rem}
.thanks .ty-items{list-style:none;margin:0;padding:0}
.thanks .ty-items li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed #d9cdbd}
.thanks .ty-items b{white-space:nowrap;color:var(--maroon)}
.thanks .ty-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#fff6d6;color:var(--ink)}
.thanks .ty-ref{margin:12px 0 0;font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}
.thanks .ty-steps .btn{margin-top:16px}
.thanks .callbar{grid-template-columns:repeat(3,1fr)}
.thanks .callbar a:nth-child(2){background:var(--maroon)}
@media (max-width:900px){
  .thanks .ty-card{max-width:600px}
  .thanks .ty-bg{object-position:72% center}
  .thanks .ty-banner .wrap{padding:28px 0 32px}
}
@media (max-width:760px){.thanks .ty-grid{grid-template-columns:1fr}}
@media (max-width:600px){
  .thanks .ty-banner{background:#fbf1d8}
  .thanks .ty-banner picture{position:static;display:block}
  .thanks .ty-bg{display:block;height:auto;aspect-ratio:2/1}
  .thanks .ty-banner .wrap{padding:0 0 24px;margin-top:-56px;position:relative}
  .thanks .ty-card{padding:20px 18px 18px;border-radius:18px}
  .thanks .ty-card h1{font-size:clamp(1.4rem,6.6vw,1.75rem)}
  .thanks .ty-lead{font-size:1rem}
  .thanks .ty-chs{grid-template-columns:1fr;gap:8px}
  .thanks .ty-ch{padding:9px 12px;min-height:52px}
  .thanks .ty-ch-text{order:-1}
  .thanks .ty-next{padding:28px 0 36px}
  .thanks .ty-next .pay-box{padding:20px 18px}
  .thanks .ty-steps .btn{width:100%;justify-content:center}
  .thanks .ty-items li{flex-direction:column;gap:2px}
}
@media (max-width:340px){
  .thanks .ty-card{padding:16px 14px}
  .thanks .ty-ch > svg{width:32px;height:32px;padding:7px}
  .thanks .ty-meta{justify-content:flex-start}
}
/* v10 fit: banner bottom stays inside an ~800px-tall desktop viewport; last chip spans the row */
.thanks .ty-ch:last-child{grid-column:1 / -1}
@media (min-width:601px){
  .thanks .ty-banner .wrap{padding:30px 0 32px}
  .thanks .ty-card{max-width:690px;padding:24px 30px 20px}
  .thanks .ty-card h1{font-size:clamp(1.6rem,2.9vw,2.1rem)}
  .thanks .ty-lead{margin-bottom:14px}
  .thanks .ty-ch{padding:8px 14px}
  .thanks .ty-text{margin-top:12px}
}
@media (max-width:300px){
  .thanks .ty-ch{gap:9px;padding:8px 10px}
  .thanks .ty-ch > svg{width:28px;height:28px;padding:6px}
  .thanks .ty-ch span span{font-size:.8rem;overflow-wrap:normal}
}
.thanks .ty-text a{white-space:nowrap}

/* ---- v11: darker, easier-to-read text (operator 2026-10-06). Scoped to the v2 pages; betas /1-/5 keep the base tokens.
   v11b (operator: still too light): ink -> #0a0a0a, muted -> #211e1d, body text weight 400 -> 600 (semibold); placeholders #4a4542. */
body.v2{--ink:#0a0a0a;--muted:#211e1d;font-weight:600}
.v2 input::placeholder,.v2 textarea::placeholder{color:#4a4542;opacity:1}