/* KohinoorHosting v19.2 — refinements layered on Pulse Studio.
   Loaded after elite.css + pulse-studio.css. Sections:
   1. Premium light surface (html.surface-light)   5. Testimonials
   2. Technology strip                               6. Phone sticky CTA
   3. Footer tap targets + social icons              7. Phone hero trims
   4. Payment methods row                            8. 404 page, misc. */

:root { --kh-red:#c32d41; --kh-red-dark:#a52236; --kh-red-text:#b3263d; --kh-ink:#272329; --kh-body:#4d4450; --kh-muted:#6c6270; --kh-line:#eee5e2; --kh-warm:#fdf8f6; }

/* ============ 1. Premium light surface ============ */
.surface-light .studio-hero.hero-refresh,
.surface-light .landing-hero,
.surface-light .topic-hero {
  background:
    radial-gradient(ellipse 55% 75% at 90% 12%, rgb(239 89 103 / 12%), transparent 65%),
    radial-gradient(ellipse 45% 60% at 0% 100%, rgb(255 190 165 / 20%), transparent 70%),
    linear-gradient(180deg, #fff 0%, var(--kh-warm) 100%);
  color: var(--kh-ink);
  border-bottom: 1px solid var(--kh-line);
}
.surface-light .studio-hero h1,
.surface-light .landing-hero h1,
.surface-light .topic-hero h1 { color: var(--kh-ink); }
.surface-light .studio-hero h1 em,
.surface-light .hero-refresh h1 em,
.surface-light .landing-hero h1 em,
.surface-light .topic-hero h1 em { color: var(--kh-red); }
.surface-light .studio-hero.hero-refresh .hero-copy .eyebrow,
.surface-light .landing-grid > .landing-copy .eyebrow { color: var(--kh-red-text); }
.surface-light .hero-eyebrow > span { background: #fff0f1; border-color: #f4d3d8; color: var(--kh-red); }
.surface-light .hero-deck,
.surface-light .landing-grid .topic-tagline { color: #2f2830; }
.surface-light .studio-hero.hero-refresh .lead,
.surface-light .landing-grid .lead,
.surface-light .topic-grid .lead { color: var(--kh-body); }
.surface-light .hero-essentials li,
.surface-light .landing-grid .topic-highlights li { color: var(--kh-body); }
.surface-light .hero-essentials svg,
.surface-light .landing-grid .topic-highlights svg,
.surface-light .landing-grid .topic-cta-note svg { color: var(--kh-red); }
.surface-light .studio-hero.hero-refresh .hero-offer-note,
.surface-light .landing-grid .topic-cta-note { color: var(--kh-muted); }
.surface-light .landing-grid .topic-jump a { color: var(--kh-red-text); }
.surface-light .landing-hero .breadcrumbs { color: var(--kh-muted); }
.surface-light .landing-hero .breadcrumbs a { color: var(--kh-red-text); }

.surface-light .hero-refresh .actions .button.secondary,
.surface-light .landing-copy .actions .button.secondary { background: #fff; color: #2f2830; border-color: #dccfd2; box-shadow: 0 1px 2px rgb(40 20 25 / 5%); }
.surface-light .hero-refresh .actions .button.secondary:hover,
.surface-light .landing-copy .actions .button.secondary:hover { background: #fff5f6; border-color: var(--kh-red); color: var(--kh-red); }
.surface-light .hero-refresh .actions .button,
.surface-light .landing-copy .actions .button { box-shadow: 0 8px 22px rgb(195 45 65 / 22%); }

.surface-light .studio-composition,
.surface-light .landing-canvas { border-color: #eadcd6; box-shadow: 0 30px 70px rgb(90 35 35 / 11%), 0 2px 8px rgb(40 20 25 / 5%); }

.surface-light .hero-bottom-row { background: rgb(255 255 255 / 75%); border-top: 1px solid var(--kh-line); }
.surface-light .hero-bottom-row p { color: var(--kh-body); }
.surface-light .hero-bottom-row p > svg { color: var(--kh-red); }
.surface-light .hero-bottom-row strong { color: var(--kh-ink); }
.surface-light .hero-bottom-row a { color: var(--kh-red-text); }

.surface-light .final-box {
  background:
    radial-gradient(ellipse 60% 90% at 92% 0, rgb(239 89 103 / 14%), transparent 65%),
    radial-gradient(ellipse 50% 80% at 5% 100%, rgb(255 190 165 / 22%), transparent 70%),
    #fff;
  border: 1px solid #f0dcd8;
  color: var(--kh-ink);
  box-shadow: 0 24px 60px rgb(90 35 35 / 7%);
}
.surface-light .final-box h2 { color: var(--kh-ink); }
.surface-light .final-box h2 em { color: var(--kh-red); }
.surface-light .final-box .eyebrow { color: var(--kh-red-text); }
.surface-light .final-box > p:not(.eyebrow) { color: var(--kh-body); }
.surface-light .final-box .button.secondary { background: #fff; color: #2f2830; border-color: #dccfd2; }
.surface-light .final-box .button.secondary:hover { border-color: var(--kh-red); color: var(--kh-red); background: #fff5f6; }

.surface-light footer { background: #faf7f6; color: var(--kh-ink); border-top: 1px solid var(--kh-line); }
.surface-light .footer-grid h3 { color: var(--kh-ink); }
.surface-light .footer-about p,
.surface-light .footer-grid > div > a:not(.brand):not(.text-link),
.surface-light .footer-bottom { color: var(--kh-body); }
.surface-light .footer-grid > div > a:not(.brand):not(.text-link):hover,
.surface-light .footer-bottom a:hover { color: var(--kh-red-text); }
.surface-light footer .text-link { color: var(--kh-red-text); }
.surface-light .footer-bottom { border-color: #eadfdc; }
.surface-light footer .footer-brand { border-color: #eee2de; box-shadow: 0 1px 3px rgb(40 20 25 / 5%); }

/* ============ 2. Technology strip ============ */
.stack-strip { background: #fff; border-bottom: 1px solid var(--kh-line); padding-block: 30px 34px; }
.stack-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.stack-head .eyebrow { margin: 0; color: var(--kh-red-text); }
.stack-head .text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: .8rem; }
.stack-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.stack-grid li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--kh-line); border-radius: 13px; background: linear-gradient(180deg, #fff, #fffaf8); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.stack-grid li:hover { border-color: #f0cfd4; box-shadow: 0 10px 26px rgb(90 35 35 / 7%); transform: translateY(-2px); }
.stack-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #fff0f1; color: var(--kh-red); }
.stack-grid strong { display: block; font-size: .86rem; color: var(--kh-ink); letter-spacing: -.01em; }
.stack-grid small { display: block; margin-top: 2px; font-size: .72rem; line-height: 1.45; color: var(--kh-muted); }
@media (max-width: 1180px) { .stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .stack-strip { padding-block: 24px 26px; }
  .stack-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stack-grid li { padding: 12px; gap: 9px; flex-direction: column; }
  .stack-icon { width: 32px; height: 32px; }
}

/* ============ 3. Footer tap targets + socials ============ */
.footer-grid > div > a:not(.brand):not(.text-link) { display: flex; align-items: center; min-height: 36px; margin-bottom: 2px; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
footer .text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; }
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.socials a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid; border-radius: 12px; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.socials a:hover { transform: translateY(-2px); }
.surface-light .socials a { color: var(--kh-body); border-color: #e3d7d4; background: #fff; }
.surface-light .socials a:hover { color: var(--kh-red); border-color: #efc4cb; background: #fff5f6; }
.surface-dark .socials a:hover { color: #fff; border-color: #c49a86; }

/* ============ 4. Payment methods ============ */
.payment-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; padding: 16px 20px; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; }
.payment-label { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--kh-ink); }
.payment-label svg { color: var(--kh-red); }
.payment-row ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.payment-row li { padding: 6px 12px; border: 1px solid #e8dcd9; border-radius: 999px; background: var(--kh-warm); font-size: .76rem; font-weight: 600; color: #3d343f; }
.payment-row small { margin-left: auto; font-size: .72rem; color: var(--kh-muted); }
@media (max-width: 640px) { .payment-row small { margin-left: 0; } }

/* ============ 5. Testimonials ============ */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quote-card { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 26px; border: 1px solid var(--kh-line); border-radius: 18px; background: #fff; box-shadow: 0 14px 40px rgb(90 35 35 / 5%); }
.quote-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff0f1; color: var(--kh-red); }
.quote-card blockquote { margin: 0; flex: 1; }
.quote-card blockquote p { margin: 0; font-size: .95rem; line-height: 1.75; color: #3a323c; }
.quote-card figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--kh-line); }
.quote-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ef5967, #bd263b); color: #fff; font-weight: 700; }
.quote-card strong { display: block; font-size: .88rem; color: var(--kh-ink); }
.quote-card small { display: block; font-size: .76rem; color: var(--kh-muted); }
@media (max-width: 960px) { .quote-grid { grid-template-columns: 1fr; } }

.whatsapp-button svg { color: #1f9d55; }

/* ============ 6. Phone sticky CTA ============ */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta {
    position: fixed; z-index: 60; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100% - 96px)); /* leaves the bottom-right corner free for the chat bubble */
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 8px 8px 14px; border: 1px solid #ecdcd9; border-radius: 16px;
    background: rgb(255 255 255 / 96%); box-shadow: 0 16px 40px rgb(40 20 25 / 16%);
    -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
    transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden;
    transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
  }
  .sticky-cta[hidden] { display: none; }
  .sticky-cta.is-shown { transform: none; opacity: 1; visibility: visible; transition: transform .3s ease, opacity .3s ease; }
  .menu-open .sticky-cta { visibility: hidden; opacity: 0; }
  .sticky-cta-copy { display: flex; flex-direction: column; min-width: 0; }
  .sticky-cta-copy strong { font-size: .8rem; line-height: 1.3; color: var(--kh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta-copy small { font-size: .68rem; line-height: 1.35; color: var(--kh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta .button { flex: none; min-height: 44px; padding: 10px 14px; font-size: .8rem; gap: 6px; background: var(--kh-red); border-color: var(--kh-red); color: #fff; }
  .sticky-cta .button:hover { background: var(--kh-red-dark); border-color: var(--kh-red-dark); }
}

/* ============ 7. Phone hero trims ============
   The decorative preview art is kept on tablet/desktop. On phones it pushed
   the price and plan links ~350px further down, so it's dropped there and the
   real content (tool links, free offer, plan starting point) moves up. */
@media (max-width: 640px) {
  .home-page .idea-preview { display: none; }
  .landing-canvas .landing-scene { display: none; }
  .landing-canvas .landing-offer { border-top: 0; }
}

/* ============ 8. 404 page + misc ============ */
.notfound { padding-block: 72px 90px; background: radial-gradient(ellipse 55% 70% at 90% 0, rgb(239 89 103 / 10%), transparent 65%), linear-gradient(180deg, #fff, var(--kh-warm)); border-bottom: 1px solid var(--kh-line); }
.notfound-inner { max-width: 900px; }
.notfound .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--kh-red-text); }
.notfound h1 { margin: 16px 0 0; font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -.055em; color: var(--kh-ink); }
.notfound h1 em { color: var(--kh-red); }
.notfound .lead { max-width: 560px; margin: 18px 0 26px; color: var(--kh-body); line-height: 1.75; }
.notfound .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.notfound-sub { margin: 52px 0 16px; font-size: 1rem; letter-spacing: -.01em; }
.notfound-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.notfound-grid a { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--kh-line); border-radius: 14px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.notfound-grid a:hover { border-color: #f0cfd4; box-shadow: 0 12px 30px rgb(90 35 35 / 8%); transform: translateY(-2px); }
.notfound-grid a > span:nth-child(2) { flex: 1; min-width: 0; }
.notfound-grid strong { display: block; font-size: .9rem; color: var(--kh-ink); }
.notfound-grid small { display: block; font-size: .76rem; color: var(--kh-muted); }
.notfound-grid a > svg { color: var(--kh-red); flex: none; }
.notfound-help { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 26px; font-size: .86rem; color: var(--kh-body); }
.notfound-help svg { color: var(--kh-red); }
.notfound-help a { color: var(--kh-red-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .notfound { padding-block: 44px 60px; }
  .notfound-grid { grid-template-columns: 1fr; }
  .notfound .actions { display: grid; }
  .notfound .actions .button { width: 100%; }
}

/* Larger checklist boxes (WCAG 2.5.8 target size). */
.launch-checks input, .progress-save input { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .stack-grid li, .socials a, .notfound-grid a { transition: none !important; }
  .stack-grid li:hover, .socials a:hover, .notfound-grid a:hover { transform: none; }
}

/* Standalone text links: full-height tap targets on touch screens. */
.pricing-foot > a, .agency-strip > a, .domain-links a, .explore-more a, .service-help a, .choice-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* ============ 9. Product bar (v19.3) ============
   Desktop only. Below 1050px the Menu button already lists every hosting
   page (grouped, with the current one highlighted), so the swipe strip was
   a duplicate that showed a scrollbar on narrow windows. On desktop all
   seven links fit; the scrollbar is suppressed in case of large zoom/fonts. */
.product-nav-links { scrollbar-width: none; -ms-overflow-style: none; }
.product-nav-links::-webkit-scrollbar { display: none; }
@media (max-width: 1050px) {
  .product-nav { display: none; }
  html { scroll-padding-top: 88px; }
}