/* ==========================================================================
   Cloud India Hub — coloured homepage bands
   File: public/frontend/css/cih-color.css
   Load AFTER home-layout.css. Scoped to `.cih-page`, so no other page moves.

   WHAT THIS DOES
   --------------
   cih-sections.css section 1 set the page to two grounds — white and
   --cih-paper-2 — alternating by :nth-of-type. This file replaces that for
   the seven light bands with one saturated ground each, and carries the hero's
   glyph field across them so the whole page reads like the search band rather
   than only the top 760px.

   The four dark bands (.feature-part1, .cloud-hero, .faq-section,
   .cih-contact-cta) and the three .cih-divider strips between them are left
   exactly as they were: no hue, no glyphs.

   CONTRAST
   --------
   Every ground below is at least 5.4:1 against white, so white body text
   clears WCAG AA at normal size. Measured with the sRGB relative-luminance
   formula, not eyeballed:

     #5a52b5 6.35   #7a56bd 5.39   #356f7e 5.64   #3f5391 7.35
     #5f47a2 7.22

   Two bands are pastel instead, with ink text rather than white: the deep rose
   #9a4058 and the deep teal #2f6b66 read as maroon and bottle green next to
   each other. #f4e8ec and #e9f1ef measure 15.52 and 16.13 against --cih-ink,
   and breaking the run of solid grounds is what actually stops the page
   reading as loud. See section 11 for the text and glyph handling they need.

   These are the desaturated set. The first pass used fully saturated hues
   (#4338ca, #6d28d9, #155e75, #1e3a8a, #9f1239, #115e59, #4c1d95, all 7.1-11.0
   against white) and seven of them in a row read as loud. Each has been pulled
   back in chroma and lifted slightly in lightness, keeping the same hue family.
   Everything still clears AA: worst case is #f1ecff on #7a56bd at 4.67.

   --cih-tld-shop (#ea580c) is deliberately not used as a ground: it measures
   3.56 against white, which passes only for large text. The teal band is
   #115e59 rather than --cih-tld-xyz's sibling #0f766e: the lighter teal
   measured 4.43 against the #dfe8f5 subtitle colour, just under AA.

   The cards inside these sections stay white with ink text, so the reading
   surfaces are unchanged — the colour is the ground they sit on.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hue per band
   -------------------------------------------------------------------------- */

.cih-page.cih-page > .main-container.main-container        { --sec-hue: #5a52b5; --sec-bloom: #7b74cc; }
.cih-page.cih-page > .hosting-section.hosting-section       { --sec-hue: #7a56bd; --sec-bloom: #9b7fd0; }
.cih-page.cih-page > .cih-services-section.cih-services-section  { --sec-hue: #356f7e; --sec-bloom: #4d8998; }
.cih-page.cih-page > .idx-vps.idx-vps               { --sec-hue: #3f5391; --sec-bloom: #5b71ab; }
.cih-page.cih-page > .Why-Should.Why-Should            { --sec-hue: #f4e8ec; --sec-bloom: #f9f1f4; }
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper      { --sec-hue: #e9f1ef; --sec-bloom: #f3f8f7; }

/* The support / instant-quotes band is the only top-level child whose sole
   class is .home-sec, so it has to be selected by exclusion. */
.cih-page.cih-page > section.home-sec:not(.hosting-section):not(.cih-services-section):not(.idx-vps):not(.Why-Should):not(.feature-part1):not(.cloud-hero):not(.faq-section):not(.cih-contact-cta) {
    --sec-hue: #5f47a2;
    --sec-bloom: #7c66b8;
}

/* --------------------------------------------------------------------------
   2. Ground + graphics

   cih-sections.css forces `background-image: none !important` and
   `background-color: var(--cih-paper) !important` on every top-level child,
   and alternates :nth-of-type(even) to --cih-paper-2. Those are !important, so
   these have to be too. `:nth-of-type` also counts as a class for specificity,
   which is why every selector below repeats its class — without that,
   `> section:nth-of-type(even)` (0,3,1) beats `> .cih-services-section`
   (0,3,0) and two of the seven bands keep the old pale ground.

   The glyph field is a background-image rather than a pseudo-element or an
   absolutely positioned <svg>: it needs no markup change, adds no stacking
   context, and cannot be clipped by a section that already uses ::before
   (.idx-vps and .cloud-hero both do).
   -------------------------------------------------------------------------- */

.cih-page.cih-page > .main-container.main-container,
.cih-page.cih-page > .hosting-section.hosting-section,
.cih-page.cih-page > .cih-services-section.cih-services-section,
.cih-page.cih-page > .idx-vps.idx-vps,
.cih-page.cih-page > .Why-Should.Why-Should,
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper,
.cih-page.cih-page > section.home-sec:not(.hosting-section):not(.cih-services-section):not(.idx-vps):not(.Why-Should):not(.feature-part1):not(.cloud-hero):not(.faq-section):not(.cih-contact-cta) {
    position: relative;
    background-color: var(--sec-hue) !important;
    background-image:
        url('../images/cih/section-glyphs.svg'),
        radial-gradient(64rem 32rem at 8% -24%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%),
        radial-gradient(54rem 30rem at 94% 122%, var(--sec-bloom), rgba(255, 255, 255, 0) 62%) !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-size: 640px 640px, auto, auto !important;
    background-position: 0 0, 0 0, 0 0 !important;
    background-attachment: scroll !important;
}

/* --------------------------------------------------------------------------
   3. Type that sits directly on the ground

   Whitelisted, and the sections deliberately do NOT set `color` themselves.
   Setting it on the section inherited white into every descendant that has no
   colour of its own — including `.text-gray-700` inside the white domain cards
   and the coupon popup's <h4> — and turned them white-on-white.
   -------------------------------------------------------------------------- */

.cih-page.cih-page > .hosting-section.hosting-section > .hosting-tab-container > h2,
.cih-page.cih-page > .cih-services-section.cih-services-section > h2,
.cih-page.cih-page > .cih-services-section.cih-services-section > .cih-services-eyebrow,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-hdr :is(h1, h2, h3, .idx-vps-badge),
.cih-page.cih-page > .Why-Should.Why-Should .domain-carousel > .header-section :is(h2, .main-title),
.cih-page.cih-page > .hosting-section.hosting-section .duration-selector > label,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-dur > label,
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .content-section h1,
.cih-page.cih-page > section.home-sec > .home-wrap > .home-head :is(h1, h2, h3) {
    color: #fff !important;
}

.cih-page.cih-page > .cih-services-section.cih-services-section > .cih-services-sub,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-hdr p,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-cta-note,
.cih-page.cih-page > .Why-Should.Why-Should .domain-carousel > .header-section :is(p, .main-subtitle),
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .content-section .description,
.cih-page.cih-page > section.home-sec > .home-wrap > .home-head p {
    /* Solid, not rgba: 86% white over #0f766e — the lightest ground here —
       measures 4.31 and fails AA. #dfe8f5 clears it on every ground. */
    color: #dfe8f5 !important;
}

/* --------------------------------------------------------------------------
   4. Controls that sit on the ground rather than on a card

   Toggles, duration pickers, carousel arrows and dots were drawn for a white
   page: pale borders, ink labels, white fills. On a saturated ground they
   either vanish or read as holes. Same treatment for all of them — a glass
   surface that borrows the ground instead of covering it.
   -------------------------------------------------------------------------- */

.cih-page.cih-page > .hosting-section.hosting-section .pricing-controls .billing-toggle,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-toggle {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

/* .duration-selector and .idx-vps-dur are bare flex wrappers — border-radius 0,
   padding 0 — around a label and a native <select>. Giving them the glass
   surface drew a hard-edged translucent rectangle behind the label. They get no
   surface at all; only the label and the select are touched. */
.cih-page.cih-page > .hosting-section.hosting-section .duration-selector,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-dur {
    background: transparent !important;
    border-color: transparent !important;
}

.cih-page.cih-page > .hosting-section.hosting-section .duration-selector select,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-dur select {
    background: #fff !important;
    color: var(--sec-hue) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.cih-page.cih-page > .hosting-section.hosting-section .pricing-controls button:not(.active),
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-toggle button:not(.active) {
    color: #e8eefb !important;
    background: transparent !important;
}

.cih-page.cih-page > .hosting-section.hosting-section .pricing-controls button.active,
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-toggle button.active {
    background: #fff !important;
    color: var(--sec-hue) !important;
}

.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-arrow {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-dots > *,
.cih-page.cih-page > .hosting-section.hosting-section .plans-dots > * {
    background: rgba(255, 255, 255, 0.35) !important;
}

.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-dots > .active,
.cih-page.cih-page > .hosting-section.hosting-section .plans-dots > .active {
    background: #fff !important;
}

/* The primary CTA was brand violet on white. On a violet ground that is
   invisible, so it inverts: white fill, hue label. */
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-cta-btn,
.cih-page.cih-page > section.home-sec > .home-wrap .cih-btn--primary {
    background: #fff !important;
    background-image: none !important;
    color: var(--sec-hue) !important;
    border-color: #fff !important;
}

/* .idx-vps-badge paints itself with a pale #eef2ff -> #e0e7ff gradient. White
   text on that is invisible on any ground, so the fill is replaced rather than
   just the text colour. */
.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-badge {
    background-color: rgba(255, 255, 255, 0.16) !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    color: #fff !important;
}

.cih-page.cih-page > .idx-vps.idx-vps .idx-vps-badge :is(svg, i, path) {
    color: #fff !important;
    stroke: currentColor;
}

/* The "GET IT NOW" button is drawn entirely from two custom properties defined
   in scroll.blade.php — --line_color for the pill outline, the two end caps and
   the label, --back_color for the hover fill. Overriding those two recolours
   the whole control, animation included, without touching its geometry. Setting
   a background on the <a> instead produced a white rectangle behind the pill,
   because the pill itself is made of pseudo-element line segments. */
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .buttonn {
    --line_color: #ffffff;
    --back_color: #0b4b46;
    background: transparent !important;
    border-color: transparent !important;
}

/* The strike/offer price was #ff0000 on white; on the teal ground it measures
   1.37. Amber reads as a discount and clears AA on every ground here. */
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .cta-row .price,
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .cta-row .price span {
    color: #fde68a !important;
}

/* --------------------------------------------------------------------------
   5. Card edges

   White cards on white needed a border and a soft shadow to separate. On a
   saturated ground the border reads as a grey outline and the shadow does
   nothing, so both are dropped in favour of a lift shadow.
   -------------------------------------------------------------------------- */

.cih-page.cih-page > .main-container.main-container :is(.timer-card, .domain-card-available),
.cih-page.cih-page > .hosting-section.hosting-section .plan-card,
.cih-page.cih-page > .cih-services-section.cih-services-section .cih-service-card,
.cih-page.cih-page > .idx-vps.idx-vps .plan-card,
.cih-page.cih-page > .Why-Should.Why-Should .card,
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .card {
    border-color: transparent !important;
    box-shadow: 0 18px 40px -18px rgba(8, 5, 30, 0.55), 0 2px 6px rgba(8, 5, 30, 0.18) !important;
}

/* .plan-card.popular is a violet gradient card. It stood out on a white page;
   on the violet hosting ground it merges into it and stops reading as the
   featured plan. Its own fill is left alone — the two carousels give it
   different text colours, and repainting the card broke the darker one — so it
   is separated with a ring instead. */
.cih-page.cih-page > .hosting-section.hosting-section .plan-card.popular,
.cih-page.cih-page > .idx-vps.idx-vps .plan-card.popular {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.9),
        0 22px 46px -18px rgba(8, 5, 30, 0.6) !important;
}

/* Decorative heading rules were brand violet on white; on the rose and violet
   grounds they disappear. */
.cih-page.cih-page > .Why-Should.Why-Should .domain-carousel > .header-section :is(hr, .title-underline, .main-title + span) {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
}

/* --------------------------------------------------------------------------
   6. Band edges and spacing
   -------------------------------------------------------------------------- */

/* .main-box-wrapper (1300px wide, `margin: 60px 0`, 20px radius) and
   .main-container both sat inset with their own margins. On a white page they
   read as cards; between full-bleed coloured bands they left white strips above,
   below and at both edges that looked like gaps something had failed to fill.
   Both go full-bleed like the rest. */
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper,
.cih-page.cih-page > .main-container.main-container {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* The three offer cards share a row with `align-items: stretch`, so the domain
   card is as tall as the taller "Hosting + Free Domain" card next to it. Its
   own `justify-content: space-between` then dumped all 135px of slack into one
   gap directly above the checkout button — measured `margin-top: 116px` on the
   button — which read as a hole rather than as breathing room.

   The unnamed middle wrapper (domain name + pricing) now takes the slack and
   centres its content inside it. Cards stay the same height and the button
   stays pinned to the bottom; the space is distributed instead of pooled. */
.cih-page.cih-page > .main-container.main-container .domain-card-available > div:has(.pricing-section) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

/* "Our hosting services" ran 91px of section padding plus a 55px header gap
   plus 32px inside each card — about 270px of vertical space before the first
   line of card copy. This pulls the section back without touching the shared
   --sec-y that the other bands use. */
.cih-page.cih-page > .cih-services-section.cih-services-section {
    padding-top: clamp(2.75rem, 5vw, 4rem) !important;
    padding-bottom: clamp(2.75rem, 5vw, 4rem) !important;
}

.cih-page.cih-page > .cih-services-section.cih-services-section .cih-services-sub {
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem) !important;
}

.cih-page.cih-page > .cih-services-section.cih-services-section .cih-service-card {
    padding: 26px !important;
}

/* --------------------------------------------------------------------------
   7. Motion and small screens

   The glyph field is a static background image, so there is nothing to stop
   for prefers-reduced-motion. On narrow viewports the tile is scaled down so
   the glyph density per screen stays roughly constant instead of showing two
   and a half glyphs.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
    .cih-page.cih-page > .main-container.main-container,
    .cih-page.cih-page > .hosting-section.hosting-section,
    .cih-page.cih-page > .cih-services-section.cih-services-section,
    .cih-page.cih-page > .idx-vps.idx-vps,
    .cih-page.cih-page > .Why-Should.Why-Should,
    .cih-page.cih-page > .main-box-wrapper.main-box-wrapper,
    .cih-page.cih-page > section.home-sec:not(.hosting-section):not(.cih-services-section):not(.idx-vps):not(.Why-Should):not(.feature-part1):not(.cloud-hero):not(.faq-section):not(.cih-contact-cta) {
        background-size: 400px 400px, auto, auto !important;
    }
}

/* Windows high-contrast / forced-colours: drop the decoration entirely and let
   the OS palette through. */
@media (forced-colors: active) {
    .cih-page.cih-page > .main-container.main-container,
    .cih-page.cih-page > .hosting-section.hosting-section,
    .cih-page.cih-page > .cih-services-section.cih-services-section,
    .cih-page.cih-page > .idx-vps.idx-vps,
    .cih-page.cih-page > .Why-Should.Why-Should,
    .cih-page.cih-page > .main-box-wrapper.main-box-wrapper {
        background-image: none !important;
    }
}

/* ==========================================================================
   8. Hero — P4 grape to indigo

   The hero was the only light band left.

   Note the class is repeated three times, not two, and there is no `.cih-page`
   prefix: <section class="cih-hero"> sits OUTSIDE .cih-page in the markup — the
   .cih-page wrapper opens after the hero — so any `.cih-page ...` selector
   matches nothing at all here. Repeating the class instead takes these to
   (0,4,0), which clears hero-search.css's own `.cih-hero.cih-hero .cih-tab`
   at (0,3,0).

   CONTRAST
   The gradient runs #6d28d9 -> #4c1d95 with an #a855f7 bloom top-left. The
   bloom is capped at 38% because pure white measures only 4.23 against a full
   #8b5cf6 and 3.96 against #a855f7 — at full strength the bloom would make its
   own corner fail AA no matter what colour the text is. Against the gradient
   itself white is 7.10 to 10.95 and the secondary #f1ecff is 6.15 to 9.48.
   ========================================================================== */

.cih-hero.cih-hero.cih-hero {
    background-color: #6b58a8 !important;
    background-image:
        radial-gradient(52rem 30rem at 10% 2%, rgba(168, 85, 247, 0.26), rgba(168, 85, 247, 0) 60%),
        radial-gradient(50rem 30rem at 92% 4%, rgba(79, 70, 229, 0.38), rgba(79, 70, 229, 0) 58%),
        linear-gradient(170deg, #7a56bd 0%, #7050b4 45%, #5f47a2 100%) !important;
}

/* --- Type ---------------------------------------------------------------- */

.cih-hero.cih-hero.cih-hero .cih-hero__title {
    color: #fff !important;
}

/* The accent word was brand violet, which is invisible on a violet ground. */
.cih-hero.cih-hero.cih-hero .cih-hero__title :is(span, em, b, i) {
    color: #fde68a !important;
}

.cih-hero.cih-hero.cih-hero .cih-hero__sub,
.cih-hero.cih-hero.cih-hero .cih-proof__text {
    color: #f1ecff !important;
}

.cih-hero.cih-hero.cih-hero .cih-proof__title,
.cih-hero.cih-hero.cih-hero .cih-trust__body > :first-child {
    color: #fff !important;
}

.cih-hero.cih-hero.cih-hero .cih-trust__body > :last-child {
    color: #ece7fb !important;
}

.cih-hero.cih-hero.cih-hero .cih-rail__all {
    color: #fff !important;
}

/* .cih-hero__rule is a flex CONTAINER — the visible mark is a 56px gradient
   dash in ::before plus a 6px dot in ::after. Painting the element itself drew
   a full-width bar across the hero. Only the two pseudo-elements are recoloured. */
.cih-hero.cih-hero.cih-hero .cih-hero__rule {
    background: none !important;
}

.cih-hero.cih-hero.cih-hero .cih-hero__rule::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85)) !important;
}

.cih-hero.cih-hero.cih-hero .cih-hero__rule::after {
    background: #fde68a !important;
}

/* --- Tabs ---------------------------------------------------------------- */

.cih-hero.cih-hero.cih-hero .cih-tabs {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: none !important;
}

/* Was var(--cih-muted) (#5f5680) — a mid grey-violet written for a white page.
   That is the "AI Domain Search" label that read as unclear.

   These are ID-qualified and prefixed with `html body` on purpose. The tabs
   carry #cihTabDomain / #cihTabAi, so any ID rule anywhere on the page beats a
   class selector however many times the class is repeated; and a rule in an
   in-body <style> beats one from a <head> stylesheet at equal weight. (1,3,2)
   clears both. See the note at the end of this section. */
html body .cih-hero.cih-hero .cih-tabs #cihTabDomain,
html body .cih-hero.cih-hero .cih-tabs #cihTabAi,
.cih-hero.cih-hero.cih-hero .cih-tab {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* The selected pill was var(--cih-brand) #6d28d9 — the same violet as the
   ground, so the active state disappeared. Inverted: white pill, deep violet
   label, 10.95. */
html body .cih-hero.cih-hero .cih-tabs #cihTabDomain[aria-selected="true"],
html body .cih-hero.cih-hero .cih-tabs #cihTabAi[aria-selected="true"],
.cih-hero.cih-hero.cih-hero .cih-tab[aria-selected="true"] {
    background: #ffffff !important;
    color: #4c1d95 !important;
}

html body .cih-hero.cih-hero .cih-tabs #cihTabAi svg {
    color: #ffffff !important;
}

.cih-hero.cih-hero.cih-hero .cih-tab:not([aria-selected="true"]):hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* UNVERIFIED — check this one in the browser after deploying.
   Against the live site these two tab rules would not take effect: the CSSOM
   confirms the rule matches #cihTabAi with !important and that the only
   competing declaration is `.cih-hero.cih-hero .cih-tab { color: var(--cih-muted) }`
   with no !important, yet both the computed value and the painted pixels keep
   the old grey. The same page also reports a stale computed background and
   border-radius for .main-box-wrapper while painting the new ones, so the
   live document appears not to re-resolve style for some subtrees. Everything
   else in this section was verified from rendered pixels. */

/* --- Panels and chips ----------------------------------------------------- */

/* Chips stay white on purpose. .cih-chip__ext is coloured per TLD from
   --cih-tld-*, and those hues were chosen to clear 4.5:1 against white; on a
   purple ground they measured 1.15-1.29. Keeping the chip white keeps the
   whole TLD colour system correct with no palette change. */
.cih-hero.cih-hero.cih-hero .cih-chip {
    background: #fff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 6px 18px -8px rgba(8, 5, 30, 0.5) !important;
}

.cih-hero.cih-hero.cih-hero .cih-proof {
    background: rgba(255, 255, 255, 0.13) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
}

.cih-hero.cih-hero.cih-hero .cih-proof__item + .cih-proof__item {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/* home-layout.css draws these as a near-white circle
   (color-mix(--cih-hue 15%, #fff)) with the glyph in the item's own hue. A
   translucent-white circle with a white glyph on the purple ground left the
   icons barely readable. Solid white circle, deep violet glyph instead — same
   treatment as the chips, and the highest contrast available here. */
.cih-hero.cih-hero.cih-hero :is(.cih-proof__icon, .cih-trust__icon) {
    background: #ffffff !important;
    color: #5b21b6 !important;
    box-shadow: 0 4px 12px -6px rgba(8, 5, 30, 0.6);
}

.cih-hero.cih-hero.cih-hero :is(.cih-proof__icon, .cih-trust__icon) svg {
    stroke: currentColor;
}

/* --- Decoration ----------------------------------------------------------- */

/* The art hard-codes stroke="#6d28d9" at .16 opacity, which is the ground
   colour itself here. CSS beats presentation attributes, so this lifts it to
   white without touching the markup. */
.cih-hero.cih-hero.cih-hero .cih-hero__art g {
    stroke: #ffffff !important;
    stroke-opacity: 0.16 !important;
}

.cih-hero.cih-hero.cih-hero .cih-fx-ico {
    color: #ffffff !important;
    opacity: 0.18 !important;
}

/* ==========================================================================
   9. Hero on small screens

   hero-search.css already has @media blocks at 768px and 480px; this is a
   separate pass rather than an edit to them because those set the structural
   behaviour (shell width, tab flex, iOS 16px input) and this only adjusts
   sizing on the coloured ground. Selectors repeat the class three times for
   the same reason as section 8 — the hero is outside .cih-page.

   Measured at 390px before: the headline computed to 26.6px in a 366px box,
   so it ran to within 12px of both edges, and .cih-rail was switched to
   justify-content:flex-start at 768px, which left the four chips ragged with
   "See all extensions" trailing the second row.
   ========================================================================== */

@media (max-width: 560px) {
    .cih-hero.cih-hero.cih-hero .cih-hero__head {
        padding-inline: 0.5rem;
        margin-top: 1.6rem;
    }

    .cih-hero.cih-hero.cih-hero .cih-hero__title {
        font-size: clamp(1.45rem, 6.4vw, 1.85rem);
        line-height: 1.16;
        letter-spacing: -0.02em;
    }

    .cih-hero.cih-hero.cih-hero .cih-hero__sub {
        margin-top: 0.6rem;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Back to centred, and the "see all" link gets its own full-width row so
       the chips above it stay in even pairs. */
    .cih-hero.cih-hero.cih-hero .cih-rail {
        justify-content: center;
        gap: 0.45rem;
        margin-top: 1.1rem;
    }

    .cih-hero.cih-hero.cih-hero .cih-rail > li:last-child {
        flex-basis: 100%;
        justify-content: center;
    }

    .cih-hero.cih-hero.cih-hero .cih-rail__all {
        min-height: 40px;
    }

    .cih-hero.cih-hero.cih-hero .cih-proof {
        padding: 0.9rem;
    }

    .cih-hero.cih-hero.cih-hero .cih-proof__item {
        gap: 0.7rem;
    }

    .cih-hero.cih-hero.cih-hero :is(.cih-proof__icon, .cih-trust__icon) {
        width: 38px;
        height: 38px;
    }

    .cih-hero.cih-hero.cih-hero .cih-proof__text {
        font-size: 0.83rem;
        line-height: 1.45;
    }

    .cih-hero.cih-hero.cih-hero {
        padding-bottom: 2rem;
    }
}

/* ==========================================================================
   10. Density and the plans carousel

   Measured before, at 1440px:
     --sec-y            clamp(56px, 4.4vw + 28px, 96px)  -> 91px per side
     --sec-head-gap     clamp(32px, 2.4vw + 20px, 56px)  -> 55px
     .plans-grid       clientWidth 1064, scrollWidth 1292

   The track holds four 302px cards with 28px gaps. 1064 fits three of them
   and 102px of the fourth, so at rest the last card is always sliced down the
   middle — which is the "cut" in the report, not a rendering fault.
   ========================================================================== */

/* Tokens are declared on :root in home-layout.css; overriding them on .cih-page
   pulls every section in at once without editing that file's scale. */
.cih-page.cih-page {
    --sec-y: clamp(40px, 3.2vw + 20px, 68px);
    --sec-y-tight: clamp(30px, 2.2vw + 16px, 46px);
    --sec-head-gap: clamp(22px, 1.6vw + 14px, 36px);
}

/* Grid, not a flex scroller. Four equal fractions always fit exactly whatever
   the container width or the gap value is — the flex version had to guess the
   gap in a calc(), and any container the calc did not predict put a half card
   at the edge again.

   .plans-slider reserves 56px on each side for the arrow buttons. With four
   cards fitting there is nothing to scroll, so that 112px goes back to the
   cards and the arrows and dots are hidden. Measured at a 1240px measure:
   cards go from 239px to 287px. */
.cih-page.cih-page .plans-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: visible !important;
    align-items: stretch;
}

.cih-page.cih-page .plans-slider {
    padding-inline: 0 !important;
}

.cih-page.cih-page :is(.plans-slider-arrow, .plans-dots) {
    display: none !important;
}

.cih-page.cih-page .plans-grid > .plan-card {
    flex: initial;
    width: auto;
    max-width: none;
    min-width: 0;
}

@media (max-width: 1180px) {
    .cih-page.cih-page .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Below 620px the grid goes back to being a one-card-per-view scroller. Four
   stacked plan cards is around 2,600px of page for a single section, and taking
   height out is the point of this pass. The arrows and dots come back with it,
   since here there is something to page through.

   An in-body rule in index.blade.php sets `.hosting-section .plan-card` to
   `flex-basis: 78vw` and `.plans-slider` keeps 38-44px of arrow padding; at
   390px that left a 215px card in a 282px track, the same half-card look as
   desktop. flex-shrink has to be reset too, or a 100% basis is squeezed back
   by the three siblings sharing the overflow row. */
@media (max-width: 620px) {
    .cih-page.cih-page .plans-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
    }

    .cih-page.cih-page .plans-grid > .plan-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start;
    }

    .cih-page.cih-page :is(.plans-slider-arrow, .plans-dots) {
        display: revert !important;
    }

    .cih-page.cih-page .plans-slider {
        padding-inline: 26px !important;
    }
}

/* Feature rows measured 53px each: 8px padding top and bottom around a 37px
   icon chip. Seven of those is 371px of card height for seven short lines. */
.cih-page.cih-page .plans-grid .plan-card :is(li, .plan-feature) {
    padding-block: 5px !important;
    gap: 9px !important;
    font-size: 0.84rem;
    line-height: 1.35;
}

.cih-page.cih-page .plans-grid .plan-card :is(li, .plan-feature) > :is(img, svg, .plan-feature-icon, span:first-child) {
    width: 24px;
    height: 24px;
    flex: none;
}

.cih-page.cih-page .plans-grid .plan-card {
    padding: 20px 18px !important;
}

/* The footnote is a bare <p> directly inside a section, which is the shape
   home-layout.css's section-header rules also match, so it needs its own
   declarations rather than inheriting. Given as a chip so it reads as a
   footnote rather than as body copy that lost its styling. */
.cih-page.cih-page .plans-footnote {
    display: block;
    width: fit-content;
    max-width: min(760px, 100%);
    margin: 18px auto 0 !important;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.8rem !important;
    font-weight: 500;
    line-height: 1.45;
    color: #f4f0ff !important;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cih-page.cih-page .plans-footnote a {
    color: #ffffff !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Same tightening for the other card grids, so the whole page loses the empty
   bands rather than just the pricing row. */
.cih-page.cih-page .cih-services-grid { gap: 20px; }
.cih-page.cih-page > .cih-services-section.cih-services-section .cih-service-card { padding: 22px !important; }
.cih-page.cih-page .cih-offer { padding: 22px; }
.cih-page.cih-page .cih-offer__list { gap: 11px; }
.cih-page.cih-page .cih-offer__list li { font-size: 0.9rem; }

/* At the narrower card width the two plan buttons no longer sit side by side —
   they wrapped and pushed past the card's bottom edge. Stacked full-width. */
.cih-page.cih-page .plans-grid .plan-card > :is(.btn, a.btn, button.btn) {
    width: 100%;
    margin-inline: 0;
    white-space: nowrap;
}

.cih-page.cih-page .plans-grid .plan-card > :is(.btn, a.btn, button.btn) + :is(.btn, a.btn, button.btn) {
    margin-top: 8px;
}


/* ==========================================================================
   11. The two pastel bands

   .Why-Should and .main-box-wrapper now carry a light ground, so everything
   section 3 and 4 turned white for a dark ground has to come back to ink. The
   glyph field goes with it: section-glyphs.svg is stroked white, which is
   invisible on a pastel, so these two get soft radial tints only.
   ========================================================================== */

.cih-page.cih-page > .Why-Should.Why-Should,
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper {
    background-image:
        radial-gradient(58rem 30rem at 10% -14%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%),
        radial-gradient(50rem 28rem at 92% 116%, var(--sec-bloom), rgba(255, 255, 255, 0) 62%) !important;
}

/* Type back to ink. These override the white set in section 3. */
.cih-page.cih-page > .Why-Should.Why-Should .domain-carousel > .header-section :is(h2, .main-title),
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .content-section h1 {
    color: #150e2e !important;
}

.cih-page.cih-page > .Why-Should.Why-Should .domain-carousel > .header-section :is(p, .main-subtitle),
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .content-section .description {
    color: #4a4266 !important;
}

/* The highlighted words were amber for a dark ground; on a pastel they wash
   out, so they take the brand violet instead. */
/* The highlighted word is painted with a clipped background, not a colour, so
   setting `color` alone does nothing — -webkit-text-fill-color has to be reset
   and the background removed before the new colour takes. */
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .content-section h1 :is(span, em, b, .highlight) {
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: #6d28d9 !important;
    color: #6d28d9 !important;
}

.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .cta-row :is(.price, .price span) {
    color: #b45309 !important;
}

/* "GET IT NOW" is drawn from --line_color / --back_color (scroll.blade.php).
   White lines vanish on a pastel; back to the deep violet, with the hover fill
   pale so the white label swaps to a dark one legibly. */
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .buttonn {
    --line_color: #4c1d95;
    --back_color: #ede9fe;
}

/* White cards on a pastel need an edge — the drop shadow written for a
   saturated ground does not separate them here. */
.cih-page.cih-page > .Why-Should.Why-Should .card,
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .card {
    border: 1px solid #e6dde2 !important;
    box-shadow: 0 10px 26px -16px rgba(21, 14, 46, 0.28) !important;
}

.cih-page.cih-page > .main-box-wrapper.main-box-wrapper .card {
    border-color: #dde8e5 !important;
}

/* Carousel arrows and dots were white-on-colour. */
.cih-page.cih-page > .Why-Should.Why-Should .navigation-controls :is(button, .arrow, .dot) {
    color: #4c1d95;
}

.cih-page.cih-page > .Why-Should.Why-Should .navigation-controls :is(button, .arrow) {
    background: #ffffff !important;
    border: 1px solid #e6dde2 !important;
}

/* The horizontal rule under the website band's headline was a white line. */
.cih-page.cih-page > .main-box-wrapper.main-box-wrapper hr {
    border-color: #dde8e5 !important;
    background: #dde8e5 !important;
}