:root {
    --sh-navy: #071226;
    --sh-navy-2: #0a1933;
    --sh-panel: #0e203f;
    --sh-blue: #3978ff;
    /* Accessible brand alternatives for text and controls on light surfaces. */
    --sh-blue-on-light: #123b8f;
    --sh-green-on-light: #075e3e;
    --sh-cyan: #35d8ff;
    --sh-violet: #8057ff;
    --sh-mint: #a9ffcb;
    --sh-ink: #0a1830;
    --sh-muted: #61708a;
    --sh-paper: #eaf0f9;
    --sh-line: #dfe6ef;
    --sh-white: #fff;
    /* 3.78:1 against --sh-navy, for interactive boundaries on dark UI. */
    --sh-control-border-dark: #60718e;
    --sh-font-body: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sh-font-heading: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sh-space-1: .25rem;
    --sh-space-2: .5rem;
    --sh-space-3: .75rem;
    --sh-space-4: 1rem;
    --sh-space-6: 1.5rem;
    --sh-space-8: 2rem;
    /* Vertical rhythm between content blocks. Sections stack, so the gap a
       visitor sees is two of these added together: 72px each reads as ~144px
       between one block's last line and the next one's first. Tune here, not
       section by section. */
    --sh-section-y: 54px;
    /* The emphatic dark blocks — final CTA, decision grid — keep more air so
       they still land as a pause rather than another row. */
    --sh-section-y-lg: 70px;
    --sh-heading-gap: 28px;
    /* Hero rhythm, separate from the sections so the two can be tuned apart.
       The landing hero used to carry 150px on top — not clearing a fixed
       header (the header is in normal flow), just decorative air, and it
       pushed the headline of every internal page below the fold. */
    --sh-hero-y: 72px;
    --sh-radius-sm: .5rem;
    --sh-radius-md: .875rem;
    --sh-radius-lg: 1.125rem;
    --sh-shadow-card: 0 12px 32px rgba(22, 47, 82, .08);
    --sh-shadow-raised: 0 24px 64px rgba(4, 12, 27, .24);
    --sh-layer-header: 30;
    --sh-layer-menu: 80;
    --sh-layer-floating: 150;
    --sh-target-min: 2.75rem;
}

/* ---------------------------------------------------------------------------
   Tokens de diseño de Nexus.

   El CSS de Nexus está escrito sobre una capa de tokens —`var(--text)`,
   `var(--rounding-md)`, `var(--grayscale-lifted)`…— que esta instalación no
   declara en ninguna parte: 38 variables usadas en 367 declaraciones, con cero
   definiciones entre theme.min.css y all.min.css.

   Una declaración que apoya su valor en una variable indefinida es inválida y se
   descarta, así que todas esas reglas caían en silencio. De ahí venía buena
   parte de lo que se veía «sin integrar»: bordes y radios que no llegaban, y
   sobre todo `.btn-default:hover`, que fija `color:#fff` y toma el fondo de
   `var(--grayscale-lifted)`; al no resolverse el fondo volvía a transparente y
   el botón desaparecía al pasar el cursor.

   Se declaran aquí con la paleta del sitio, de modo que el CSS de Nexus funcione
   como fue escrito en lugar de pelearlo regla por regla.
   --------------------------------------------------------------------------- */
:root {
    --text: #0a1830;
    --text-lifted: #34455f;
    --text-muted: #61708a;
    --text-accented: #071226;
    --text-inverted: #fff;

    --bg: #fff;
    --bg-muted: #f8faff;
    --bg-lifted: #f4f7fb;
    --bg-accented: #eaf1fb;
    --bg-inverted: #071226;

    --border: #d8e2ee;
    --border-muted: #eaf0f7;
    --border-lifted: #c4d1e1;
    --border-accented: #93a8c4;

    --grayscale: #6b7a92;
    --grayscale-lifted: #8695ab;
    --grayscale-accented: #4a5668;

    --neutral: #64738a;
    --neutral-lifted: #7d8b9f;
    --neutral-accented: #4a5668;

    --error: #d1344b;
    --error-lifted: #e0576b;
    --success-accented: #0f7650;
    --warning-accented: #a8730f;
    --info-accented: #0d688f;
    --notice: #8057ff;
    --notice-lifted: #9b7aff;

    --rounding-sm: 6px;
    --rounding-md: 8px;
    --rounding-lg: 14px;
    --letter-spacing: normal;
    --disabled-opacity: .55;

    --emerald-300: #6ee7b7;
    --teal-300: #5eead4;
    --teal-400: #2dd4bf;
    --pink-400: #f472b6;
    --yellow-200: #fde68a;
    --yellow-300: #fcd34d;
}

* { box-sizing: border-box; }
body { color: var(--sh-ink); font-family: var(--sh-font-body); overflow-wrap: break-word; }
.sh-public-page { margin: 0; background: var(--sh-navy); }
.sh-skip-link { position: fixed; z-index: 9999; top: 12px; left: 12px; padding: 12px 16px; border-radius: 8px; color: var(--sh-navy) !important; background: #fff; font-weight: 700; transform: translateY(-150%); transition: transform .15s; }
.sh-skip-link:focus { transform: translateY(0); }
.sh-container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
#sh-main { display: block; width: 100%; }
/* Utility bar above the main nav: client access, contact and help. Sits at a
   higher z-index than .sh-header so its dropdowns are not clipped by the
   header below it. */
.sh-topbar { position: relative; z-index: 40; border-bottom: 1px solid rgba(255,255,255,.06); background: #050e20; }
.sh-topbar-inner { display: flex; min-height: var(--sh-target-min); align-items: center; justify-content: flex-end; }
.sh-topbar-nav { display: flex; align-self: stretch; align-items: stretch; gap: 2px; }
.sh-topbar-item { display: flex; position: relative; align-items: stretch; }
.sh-topbar-trigger, .sh-topbar-link { display: inline-flex; min-height: var(--sh-target-min); padding: 0 11px; align-items: center; gap: 7px; border: 0; color: #a8b5c8; background: transparent; font: 700 12px var(--sh-font-body); white-space: nowrap; text-decoration: none !important; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
.sh-topbar-trigger:hover, .sh-topbar-trigger:focus-visible, .sh-topbar-link:hover, .sh-topbar-link:focus-visible, .sh-topbar-item:hover .sh-topbar-trigger, .sh-topbar-item:focus-within .sh-topbar-trigger { color: #fff; background: rgba(255,255,255,.05); }
.sh-topbar-icon { width: 15px; height: 15px; flex-shrink: 0; }
/* The submenus open from the bar itself, so they anchor to its bottom edge
   rather than the taller header rows below. */
/* The base .sh-submenu is built for the wide product menus: two columns with
   a 225px intro rail, and .sh-submenu-compact still splits its links two-up.
   The utility bar has no intro rail and only two or three short links, so
   without this it inherited the 225px column and squeezed each label into a
   four-word-tall stack. One column, natural width. */
.sh-topbar-item .sh-submenu { top: 100%; width: min(320px, calc(100vw - 32px)); padding: 14px; grid-template-columns: 1fr; }
.sh-topbar-item .sh-submenu .sh-submenu-links { grid-template-columns: 1fr; gap: 2px; }
.sh-topbar-item .sh-submenu .sh-submenu-links a { min-height: 0; padding: 10px 12px 10px 48px; }
.sh-topbar-item .sh-submenu .sh-submenu-links a > span { margin-top: 2px; }
.sh-submenu-eyebrow { display: block; margin: 4px 0 8px; padding: 0 4px; color: var(--sh-cyan); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sh-submenu-clients { width: min(340px, calc(100vw - 32px)); grid-template-columns: 1fr; }
.sh-submenu-clients .sh-submenu-links { grid-template-columns: 1fr; }
.sh-submenu-clients .sh-submenu-links + .sh-submenu-eyebrow { margin-top: 14px; }

.sh-header { position: relative; z-index: var(--sh-layer-header); border-bottom: 1px solid rgba(255,255,255,.09); color: #fff; background: rgba(7,18,38,.94); backdrop-filter: blur(18px); }
.sh-nav { display: flex; min-height: 82px; align-items: center; gap: 32px; }
.sh-brand { display: inline-flex; flex-shrink: 0; align-items: center; }
.sh-brand img { display: block; width: 225px; height: 50px; object-fit: contain; object-position: left center; }
.sh-menu { display: flex; align-self: stretch; align-items: stretch; gap: 3px; }
.sh-menu-item { display: flex; position: relative; align-items: stretch; }
.sh-menu-trigger { display: inline-flex; padding: 0 12px; align-items: center; gap: 6px; border: 0; color: #b9c5da; background: transparent; font: 700 12px var(--sh-font-body); white-space: nowrap; cursor: pointer; }
.sh-menu-trigger span { color: #b9c4d4; transition: transform .2s; }
.sh-menu-item:hover .sh-menu-trigger, .sh-menu-item:focus-within .sh-menu-trigger, .sh-menu-trigger[aria-expanded="true"] { color: #fff; }
.sh-menu-trigger[aria-expanded="true"] span { transform: rotate(180deg); }
.sh-submenu { display: none; position: absolute; z-index: var(--sh-layer-menu); top: calc(100% - 2px); left: -18px; width: min(920px, calc(100vw - 48px)); padding: 22px; grid-template-columns: 225px 1fr; gap: 18px; border: 1px solid rgba(122,153,204,.22); border-top: 3px solid var(--sh-cyan); border-radius: 0 0 18px 18px; background: #0b1a35; box-shadow: 0 30px 70px rgba(0,0,0,.42); }
/* The compact menus carry two or three links, and used to split them into two
   columns inside a 660px panel: 225px of that is the intro rail, which left
   each column about 178px, of which 52 went to the icon and 13 to padding. On
   ~113px of text every title broke over two lines and every description over
   three, and the panel read as compressed and ragged. One column gives each
   link the full rail, and the narrower panel keeps the block from looking empty
   around two entries. */
.sh-submenu-compact { width: min(600px, calc(100vw - 48px)); grid-template-columns: 200px 1fr; }
.sh-submenu-compact .sh-submenu-links { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.sh-submenu-right { right: -20px; left: auto; }
.sh-menu-item:hover > .sh-submenu, .sh-submenu.is-open { display: grid; }
.sh-submenu-intro { padding: 20px; border-radius: 13px; background: linear-gradient(145deg, rgba(53,216,255,.11), rgba(57,120,255,.08)); }
.sh-submenu-intro strong { display: block; margin-bottom: 9px; color: #fff; font: 700 17px var(--sh-font-heading); }.sh-submenu-intro span { color: #91a1b9; font-size: 11px; line-height: 1.6; }
.sh-submenu-links { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sh-submenu-links a { display: flex; position: relative; min-width: 0; min-height: 72px; padding: 13px 13px 13px 52px; justify-content: center; flex-direction: column; border: 1px solid transparent; border-radius: 11px; text-decoration: none !important; }
/* El icono estaba clavado a `top: 15px` mientras el texto se centra vertical-
   mente en el enlace. En cuanto el título ocupa dos líneas —«Registrar un
   dominio»— el texto se recentra y el icono queda descolgado hacia arriba. Se
   centra con el mismo criterio que el contenido. */
.sh-submenu-links a::before, .sh-submenu-groups a::before { display: grid; position: absolute; top: 50%; left: 13px; width: 28px; height: 28px; place-items: center; content: "↗"; border: 1px solid rgba(53,216,255,.2); border-radius: 8px; color: var(--sh-cyan); background: rgba(53,216,255,.07); font-size: 12px; transform: translateY(-50%); }
.sh-submenu-links a:hover, .sh-submenu-links a:focus-visible, .sh-submenu-groups a:hover, .sh-submenu-groups a:focus-visible { border-color: rgba(53,216,255,.18); background: rgba(255,255,255,.06); transform: translateY(-1px); }
/* Las descripciones se cortaban con puntos suspensivos —«Email · Calendar ·
   Cont…»— porque estaban forzadas a una sola línea. Ahora envuelven. */
.sh-submenu-links b { color: #eef4ff; font-size: 12px; }.sh-submenu-links a > span { margin-top: 5px; color: #91a1b9; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.sh-submenu-wide { width: min(940px, calc(100vw - 48px)); grid-template-columns: 1fr; }
.sh-submenu-infrastructure { right: auto; left: 50%; transform: translateX(-50%); }
.sh-submenu-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; }
.sh-submenu-groups-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.sh-submenu-groups section { min-width: 0; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.025); }
.sh-submenu-groups section > strong { display: block; margin: 3px 10px 8px; color: var(--sh-cyan); font-size: 10px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
.sh-submenu-groups a { display: flex; position: relative; min-width: 0; min-height: 58px; padding: 9px 12px 9px 50px; justify-content: center; flex-direction: column; border: 1px solid transparent; border-radius: 9px; text-decoration: none !important; }
.sh-submenu-groups a:hover, .sh-submenu-groups a:focus-visible { background: rgba(255,255,255,.06); }
.sh-submenu-groups a b { color: #eef4ff; font-size: 12px; line-height: 1.35; }
.sh-submenu-groups a span { margin-top: 3px; color: #a4b2c7; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
/* Highlighted menu item — the reusable standard.
   Add `sh-menu-featured` to any submenu link to single it out, and an optional
   `<em class="sh-menu-tag">` for the word that says why. It works in both menu
   shapes (.sh-submenu-links and .sh-submenu-groups) because the emphasis is
   carried by the border and tint, not by the layout, so nothing about the item
   has to change. It borrows the treatment .sh-submenu-promo already uses for
   the client-portal entry, which is what keeps the two consistent.
   Multiple featured links are supported when they represent distinct tasks or
   audiences. Keep the treatment selective so it retains its visual meaning. */
.sh-submenu a.sh-menu-featured { border-color: rgba(53,216,255,.28); background: linear-gradient(135deg, rgba(53,216,255,.12), rgba(57,120,255,.12)); }
.sh-submenu a.sh-menu-featured:hover, .sh-submenu a.sh-menu-featured:focus-visible { border-color: rgba(53,216,255,.45); background: linear-gradient(135deg, rgba(53,216,255,.2), rgba(57,120,255,.18)); }
.sh-submenu a.sh-menu-featured::before { color: #071226; background: var(--sh-cyan); }
.sh-menu-tag { position: absolute; top: 8px; right: 9px; padding: 2px 7px; border-radius: 999px; color: #071226; background: var(--sh-cyan); font: 700 8px/1.5 var(--sh-font-heading); letter-spacing: .09em; text-transform: uppercase; font-style: normal; }
.sh-submenu a.sh-menu-featured b, .sh-submenu a.sh-menu-featured span { padding-right: 46px; }
/* A featured item takes the whole row wherever the links are laid out in more
   than one column — the tag reserves 46px on the right of every line and the
   icon 52px on the left, which a half-width column cannot absorb. The compact
   menus are single-column now, so this only bites in the wide ones. */
.sh-submenu-links a.sh-menu-featured { grid-column: 1 / -1; }

.sh-submenu a.sh-submenu-promo { border-color: rgba(53,216,255,.2); background: linear-gradient(135deg, rgba(53,216,255,.12), rgba(57,120,255,.12)); }
.sh-submenu a.sh-submenu-promo::before { content: "→"; color: #071226; background: var(--sh-cyan); }

.sh-mobile-languages { display: none; }

.sh-nav-actions { display: flex; margin-left: auto; align-items: center; gap: 20px; }
/* Icons ride along with the labels and only take over at constrained widths. */
.sh-action-icon { display: none; width: 19px; height: 19px; flex-shrink: 0; }

.sh-language-switch { display: flex; align-items: center; gap: 5px; color: #b9c4d4; font-size: 12px; font-weight: 700; }
.sh-language-switch a { color: #8493aa; text-decoration: none; }.sh-language-switch a[aria-current="true"] { color: var(--sh-cyan); }
.sh-currency-switch { margin: 0; }
.sh-currency-switch select { min-width: 66px; min-height: var(--sh-target-min); padding: 0 25px 0 10px; border: 1px solid var(--sh-control-border-dark); border-radius: 8px; color: #dfe9f8; background-color: rgba(255,255,255,.06); font: 700 12px var(--sh-font-body); cursor: pointer; }
.sh-currency-switch select option { color: var(--sh-ink); background: #fff; }

.sh-cart-link { display: inline-grid; position: relative; width: var(--sh-target-min); height: var(--sh-target-min); place-items: center; border: 1px solid var(--sh-control-border-dark); border-radius: 9px; color: #dfe9f8 !important; text-decoration: none !important; }
.sh-action-icon-always { display: block; width: 18px; height: 18px; }
.sh-cart-count { display: grid; position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; place-items: center; border-radius: 999px; color: #061326; background: var(--sh-cyan); font-size: 11px; font-weight: 800; }
.sh-menu-button { display: none; width: var(--sh-target-min); height: var(--sh-target-min); margin-left: auto; padding: 9px; border: 1px solid var(--sh-control-border-dark); border-radius: 10px; background: transparent; }
.sh-menu-button > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: #fff; }

.sh-hero { position: relative; overflow: hidden; min-height: 820px; padding: 112px 0 0; color: #fff; background: radial-gradient(circle at 76% 35%, rgba(57,120,255,.18), transparent 28%), radial-gradient(circle at 43% 22%, rgba(128,87,255,.12), transparent 24%), var(--sh-navy); }
/* Slow-drifting glow layer behind the grid lines. Purely decorative, so it sits
   under z-index 2 (.sh-hero-grid) and is skipped entirely under reduced motion. */
.sh-hero::before { position: absolute; z-index: 0; inset: -25%; content: ""; background: radial-gradient(circle at 50% 50%, rgba(57,120,255,.22), transparent 32%), radial-gradient(circle at 62% 65%, rgba(128,87,255,.14), transparent 30%); filter: blur(10px); animation: sh-drift 18s ease-in-out infinite; pointer-events: none; }
@keyframes sh-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -4%) scale(1.04); } }
.sh-grid-lines { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(130,158,200,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(130,158,200,.2) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.sh-hero-grid { display: grid; position: relative; z-index: 2; grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr); align-items: center; gap: 88px; }
.sh-hero-copy, .sh-console { min-width: 0; }
.sh-availability, .sh-status { display: inline-flex; align-items: center; gap: 9px; color: #aab9d1; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.sh-availability i, .sh-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-mint); box-shadow: 0 0 15px var(--sh-mint); animation: sh-breathe-dot 2.6s ease-in-out infinite; }
/* Reused everywhere a "this is live" dot appears: hero availability, status
   strips and the footer's operational indicator. */
@keyframes sh-breathe-dot { 0%, 100% { box-shadow: 0 0 15px var(--sh-mint); } 50% { box-shadow: 0 0 15px var(--sh-mint), 0 0 0 6px rgba(169,255,203,.18); } }
.sh-hero h1 { max-width: 790px; margin: 24px 0; font-family: var(--sh-font-heading); font-size: clamp(36px, 3.9vw, 54px); font-weight: 700; line-height: 1.03; letter-spacing: -.055em; }
.sh-hero h1 span, .sh-final-cta h2 span { color: transparent; background: linear-gradient(90deg, var(--sh-cyan), #7398ff 53%, #ad83ff); -webkit-background-clip: text; background-clip: text; }
.sh-hero-copy > p { max-width: 680px; color: #aab7cc; font-size: 18px; line-height: 1.7; }
.sh-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.sh-button { display: inline-flex; min-height: 54px; padding: 0 22px; justify-content: center; align-items: center; gap: 20px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none !important; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.sh-button:hover, .sh-button:focus-visible { transform: translateY(-2px); }
.sh-button:active { transform: translateY(0); box-shadow: none; }
.sh-button[aria-disabled="true"], .sh-button:disabled { border-color: #dfe6ef !important; color: #718096 !important; background: #edf1f6 !important; box-shadow: none !important; cursor: not-allowed; opacity: 1; transform: none; pointer-events: none; }
.sh-button-primary { color: #061326 !important; background: linear-gradient(135deg, var(--sh-cyan), #76edff); box-shadow: 0 15px 40px rgba(53,216,255,.17); }
.sh-button-secondary { color: #fff !important; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
.sh-button-primary:hover, .sh-button-primary:focus-visible { background: linear-gradient(135deg, #77e9ff, #a5f3ff); box-shadow: 0 18px 44px rgba(53,216,255,.24); }
.sh-button-secondary:hover, .sh-button-secondary:focus-visible, .sh-button-outline:hover, .sh-button-outline:focus-visible { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.11); }
.sh-button-light:hover, .sh-button-light:focus-visible { background: #eaf6ff; box-shadow: 0 16px 36px rgba(0,0,0,.16); }
.sh-proof { display: grid; max-width: 680px; margin-top: 60px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.1); }
.sh-proof div { display: flex; padding: 24px 18px 0 0; flex-direction: column; }
.sh-proof strong { font-family: var(--sh-font-heading); font-size: 22px; }.sh-proof span { margin-top: 5px; color: #b9c4d4; font-size: 11px; }
.sh-console { position: relative; overflow: hidden; border: 1px solid rgba(111,151,221,.25); border-radius: 18px; background: rgba(10,25,51,.8); box-shadow: 0 45px 100px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.sh-console:after { position: absolute; width: 280px; height: 280px; right: -140px; bottom: -150px; content: ""; border-radius: 50%; background: rgba(53,216,255,.14); filter: blur(45px); }
.sh-console-top { display: flex; min-height: 48px; padding: 0 16px; align-items: center; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sh-console-top > span { display: flex; gap: 5px; }.sh-console-top i { width: 7px; height: 7px; border-radius: 50%; background: #52627f; }.sh-console-top i:nth-child(2){background:#3978ff}.sh-console-top i:nth-child(3){background:#35d8ff}
.sh-console-top small { color: #647590; font-family: monospace; }.sh-console-top b { margin-left: auto; padding: 5px 7px; border-radius: 4px; color: var(--sh-mint); background: rgba(169,255,203,.08); font-size: 8px; letter-spacing: .12em; }
.sh-console-body { padding: 32px; }.sh-eyebrow { color: var(--sh-cyan); font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.sh-console h2 { margin: 11px 0 0; font-family: var(--sh-font-heading); font-size: 24px; line-height: 1.18; letter-spacing: -.035em; }
.sh-stack-map { position: relative; height: 280px; margin-top: 10px; }
.sh-node { display: grid; position: absolute; z-index: 3; width: 55px; height: 55px; place-items: center; border: 1px solid rgba(94,137,207,.33); border-radius: 14px; color: #91a1bb; background: #0b1a35; font-family: monospace; font-size: 10px; font-weight: 700; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: sh-node-breathe 3.4s ease-in-out infinite; }
.sh-node-main { top: 91px; left: calc(50% - 39px); width: 78px; height: 78px; padding: 10px; border-color: rgba(53,216,255,.35); animation-delay: 0s; }.sh-node-main img { width: 100%; height: 100%; }
.sh-node.n1 { top: 15px; left: 15px; animation-delay: .3s; }.sh-node.n2 { top: 18px; right: 20px; animation-delay: .9s; }.sh-node.n3 { bottom: 12px; left: 28px; animation-delay: 1.5s; }.sh-node.n4 { right: 36px; bottom: 8px; animation-delay: 2.1s; }
@keyframes sh-node-breathe { 0%, 100% { box-shadow: 0 12px 30px rgba(0,0,0,.3); } 50% { box-shadow: 0 12px 30px rgba(0,0,0,.3), 0 0 0 6px rgba(53,216,255,.1); } }
.sh-map-line { position: absolute; z-index: 1; top: 50%; left: 50%; width: 75%; height: 1px; background: linear-gradient(90deg, transparent, rgba(53,216,255,.65), transparent); transform-origin: center; }.sh-map-line.l1{transform:translate(-50%,-50%) rotate(28deg)}.sh-map-line.l2{transform:translate(-50%,-50%) rotate(-29deg)}.sh-map-line.l3{width:45%;transform:translate(-50%,-50%) rotate(90deg)}
/* Light travelling from the core node to each edge node, the "constellation"
   motif the brand kit already defines for social assets, brought onto the
   site for the first time. Positioned as a child of .sh-map-line so it rides
   the line's own rotation without any trigonometry. */
.sh-pulse { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sh-cyan); box-shadow: 0 0 10px 2px rgba(53,216,255,.85); opacity: 0; animation: sh-pulse-travel 2.6s ease-in-out infinite; }
@keyframes sh-pulse-travel { 0% { left: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.sh-metrics { display: flex; gap: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); color: #71819b; font-size: 10px; }.sh-metrics span { display: flex; align-items: center; gap: 6px; }.sh-metrics i { width: 6px; height: 6px; border-radius: 50%; }.sh-metrics .cyan{background:var(--sh-cyan)}.sh-metrics .green{background:var(--sh-mint)}.sh-metrics b { color: #c7d1e0; }
.sh-tech-strip { display: flex; position: relative; z-index: 2; min-height: 105px; margin-top: 92px; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid rgba(255,255,255,.09); color: #586983; }.sh-tech-strip span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }.sh-tech-strip b { color: #93a1b8; font-size: 13px; }

.sh-solutions { padding: var(--sh-section-y) 0; background: #fff; }
/* The heading used to be two columns: the title on the left and a paragraph
   floated top-right. That paragraph said little and pulled the eye away from
   the title just as the section opened, so it is gone from every template.
   Single column now — the title carries the section on its own. */
.sh-section-heading { display: block; max-width: 820px; margin-bottom: var(--sh-heading-gap); }
.sh-section-heading h2, .sh-control h2, .sh-domain h2 { max-width: 760px; margin: 13px 0 0; font-family: var(--sh-font-heading); font-size: clamp(28px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -.05em; }
.sh-section-heading p { color: var(--sh-muted); line-height: 1.75; }
.sh-solutions .sh-eyebrow, .sh-control .sh-eyebrow, .sh-decision .sh-eyebrow { color: var(--sh-blue-on-light); }
.sh-solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sh-solution-card { position: relative; min-height: 460px; padding: 34px; overflow: hidden; border: 1px solid var(--sh-line); border-radius: 18px; color: var(--sh-ink) !important; background: #fff; text-decoration: none !important; transition: transform .25s, box-shadow .25s; }
.sh-solution-card:hover { transform: translateY(-5px); box-shadow: 0 30px 70px rgba(15,42,78,.12); }
/* Gradient outline that draws itself in on hover, via a padded pseudo-element
   masked down to a 1px ring. Reads on both the light cards and the dark
   featured one because cyan sits well against both grounds. */
.sh-solution-card::after { position: absolute; inset: 0; z-index: 1; padding: 1px; content: ""; border-radius: inherit; background: linear-gradient(125deg, transparent 30%, var(--sh-cyan), transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.sh-solution-card:hover::after { opacity: 1; }
.sh-card-featured { color: #fff !important; border-color: transparent; background: radial-gradient(circle at 85% 15%, rgba(53,216,255,.2), transparent 30%), var(--sh-navy-2); }
.sh-card-number { color: #53637b; font-family: monospace; font-size: 10px; letter-spacing: .12em; }.sh-card-featured .sh-card-number { color: var(--sh-cyan); }
.sh-card-symbol { display: grid; position: absolute; top: 30px; right: 30px; width: 58px; height: 58px; place-items: center; border: 1px solid #b3c2d5; border-radius: 15px; color: var(--sh-blue-on-light); background: #f5f8fd; font-family: var(--sh-font-heading); font-weight: 800; transition: transform .35s cubic-bezier(.2,.9,.3,1.3), border-color .3s, background-color .3s, color .3s; }.sh-card-featured .sh-card-symbol { border-color: rgba(53,216,255,.22); color: var(--sh-cyan); background: rgba(53,216,255,.08); }
.sh-solution-card:hover .sh-card-symbol { transform: rotate(-8deg) scale(1.1); border-color: rgba(53,216,255,.4); color: var(--sh-cyan); background: rgba(53,216,255,.08); }
.sh-solution-card:not(.sh-card-featured):hover .sh-card-symbol { border-color: var(--sh-blue-on-light); color: var(--sh-blue-on-light); background: #eef4ff; }
.sh-solution-card h3 { margin: 80px 0 12px; font-family: var(--sh-font-heading); font-size: 25px; letter-spacing: -.04em; }.sh-solution-card p { max-width: 490px; color: #3d4f69; line-height: 1.65; }.sh-card-featured p { color: #b9c4d4; }
.sh-solution-card ul { display: flex; padding: 22px 0 0; flex-wrap: wrap; gap: 10px; list-style: none; }.sh-solution-card li { padding: 7px 10px; border-radius: 6px; color: #3d4f69; background: #f2f5f9; font-size: 10px; }.sh-card-featured li { color: #b9c4d4; background: rgba(255,255,255,.06); }
.sh-solution-card > b { display: flex; position: absolute; right: 34px; bottom: 34px; left: 34px; justify-content: space-between; padding-top: 19px; border-top: 1px solid var(--sh-line); font-size: 12px; }.sh-card-featured > b { border-color: rgba(255,255,255,.12); }

.sh-live-plans { padding: var(--sh-section-y) 0; background: var(--sh-paper); }
.sh-anchor-target { scroll-margin-top: 24px; }
.sh-plan-tabs { display: flex; margin-bottom: 28px; flex-wrap: wrap; gap: 8px; }
.sh-plan-tab { min-width: var(--sh-target-min); min-height: var(--sh-target-min); padding: 0 17px; border: 1px solid #ced9e7; border-radius: 999px; color: #4c5d76; background: #fff; font: 700 12px var(--sh-font-body); cursor: pointer; }
.sh-plan-tab:hover { border-color: var(--sh-blue); color: var(--sh-blue); }
.sh-plan-tab.is-active { border-color: var(--sh-navy); color: #fff; background: var(--sh-navy); }
.sh-live-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; transition: opacity .2s; }
.sh-live-plan-grid.sh-plan-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sh-live-plan-grid.sh-plan-count-4 .sh-live-plan-card { min-height: 620px; padding: 24px; }
.sh-live-plan-grid.sh-plan-count-4 .sh-live-plan-card h3 { font-size: 22px; }
/* The tab switch on the home page fetches a new group from api.php; while it
   is in flight, renderSkeleton() in site.js fills the grid with these cards
   instead of just dimming the previous ones. */
.sh-plan-skeleton { gap: 14px; }
.sh-plan-skeleton .sk { display: block; border-radius: 6px; background: #e7edf5; position: relative; overflow: hidden; }
.sh-plan-skeleton .sk::after { position: absolute; inset: 0; content: ""; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 70%); background-size: 200% 100%; animation: sh-shimmer 1.5s ease-in-out infinite; }
.sh-plan-skeleton .sk-type { width: 40%; height: 10px; margin-bottom: 22px; }
.sh-plan-skeleton .sk-title { width: 65%; height: 22px; margin-bottom: 14px; }
.sh-plan-skeleton .sk-price { width: 50%; height: 27px; margin: 18px 0; }
.sh-plan-skeleton .sk-lines { display: grid; gap: 10px; margin-bottom: 25px; }
.sh-plan-skeleton .sk-line { height: 10px; }
.sh-plan-skeleton .sk-line:nth-child(1) { width: 92%; } .sh-plan-skeleton .sk-line:nth-child(2) { width: 78%; } .sh-plan-skeleton .sk-line:nth-child(3) { width: 85%; } .sh-plan-skeleton .sk-line:nth-child(4) { width: 60%; }
.sh-plan-skeleton .sk-button { width: 100%; height: 54px; margin-top: auto; border-radius: 10px; }
@keyframes sh-shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
.sh-live-plan-card { display: flex; min-height: 650px; padding: 30px; border: 1px solid #d9e2ed; border-radius: 18px; flex-direction: column; background: #fff; box-shadow: 0 15px 45px rgba(22,47,83,.06); }
.sh-live-plan-type { color: var(--sh-blue-on-light); font: 700 10px monospace; letter-spacing: .12em; text-transform: uppercase; }
.sh-live-plan-card h3 { margin: 22px 0 10px; font: 700 21px/1.2 var(--sh-font-heading); letter-spacing: -.035em; }
.sh-live-plan-card > p { min-height: 52px; color: var(--sh-muted); line-height: 1.6; }

.sh-plan-features { margin-bottom: 25px; }
.sh-plan-feature-section + .sh-plan-feature-section { margin-top: 19px; }
.sh-plan-feature-section h4 { margin: 0 0 8px; color: var(--sh-ink); font: 700 13px/1.35 var(--sh-font-heading); }
.sh-plan-feature-section ul { margin-bottom: 0; }
.sh-plan-details { margin-top: 20px; border: 1px solid var(--sh-line); border-radius: 10px; background: #f8faff; }
.sh-plan-details summary { padding: 13px 15px; color: var(--sh-blue-on-light); font-size: 12px; font-weight: 800; cursor: pointer; }
.sh-plan-details > div { padding: 2px 15px 15px; border-top: 1px solid var(--sh-line); }
.sh-live-plan-price { display: flex; margin: 18px 0; padding: 20px 0; align-items: baseline; gap: 7px; border-top: 1px solid var(--sh-line); border-bottom: 1px solid var(--sh-line); }
.sh-live-plan-price strong { font: 700 27px var(--sh-font-heading); }
.sh-live-plan-price > span { color: var(--sh-muted); font-size: 11px; }
.sh-live-plan-card ul { padding: 0; margin: 0 0 25px; list-style: none; }.sh-live-plan-card li { position: relative; margin: 10px 0; padding-left: 20px; color: #4d5d74; font-size: 12px; }.sh-live-plan-card li:before { position: absolute; left: 0; content: "✓"; color: var(--sh-blue); font-weight: 800; }
.sh-button-plan { width: 100%; margin-top: auto; justify-content: space-between; color: #fff !important; background: #123f9c; }
.sh-button-plan:hover, .sh-button-plan:focus-visible { background: #0d327d; box-shadow: 0 14px 30px rgba(18,63,156,.24); }
/* The only button variant meant for a light surface that is not a plan card.
   The other variants all assume the dark hero: -secondary is white text on a
   4% white fill, invisible on a white card. Named -quiet rather than -outline
   because a global `.sh-button-outline { color: #fff }` already lives in the
   final-CTA block further down and would win on source order. */
/* #2f6ae8, not --sh-blue: the brand blue on white measures 3.96:1 and this
   label is 13px bold, so it needs the 4.5 threshold. This shade clears it at
   4.83 and is the closest step to the brand colour that does. */
.sh-button-quiet { color: #2f6ae8 !important; border-color: #c3d6f7; background: #fff; }
.sh-button-quiet:hover, .sh-button-quiet:focus-visible { border-color: var(--sh-blue); background: #eef4ff; }
.sh-landing-plans { padding: var(--sh-section-y) 0; background: var(--sh-paper); }
.sh-landing-plans .sh-eyebrow { color: var(--sh-blue-on-light); }
.sh-section-heading-single { display: block; max-width: 780px; }
/* Resource ladder --------------------------------------------------------
   Scalable families (cloud, application, dedicated) get a dark console panel
   instead of the light cards. The change of surface is deliberate: these are a
   different kind of product from shared hosting, and the panel says so before
   a single number is read. */
.sh-ladder { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; }
.sh-ladder-panel { padding: 26px 28px 24px; border-radius: 18px; color: #eaf2ff; background: var(--sh-navy); }
.sh-ladder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sh-ladder-eyebrow { color: #35d8ff; font: 700 10px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.sh-ladder-step { color: #8fa6c8; font-size: 12px; }
.sh-ladder-name { margin: 14px 0 2px; font: 700 20px/1.25 var(--sh-font-heading); letter-spacing: -.02em; }
.sh-ladder-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 18px; }
.sh-ladder-price strong { font: 700 30px var(--sh-font-heading); }
.sh-ladder-price > span { color: #8fa6c8; font-size: 12px; }
.sh-ladder-slider-label { display: block; margin-bottom: 6px; color: #8fa6c8; font-size: 12px; }
.sh-ladder-range { width: 100%; height: 22px; margin: 0 0 18px; accent-color: #35d8ff; background: transparent; cursor: pointer; }
/* The meter count comes from the markup, exactly like the list rows below, and
   the variants were the half of that pair that never got written: the base rule
   stayed at three columns whatever the family declared. A two-meter family — the
   account packs, on `panel-accounts` and `plan-tier` — therefore laid its two
   tiles across two thirds of the panel and left the last third empty, with each
   value squeezed into 91px of text width. "Expansión" needs about 95, so it
   broke mid-word into "Expansió / n" and the panel grew by a line.

   That second line is also what made the plan list appear to resize when the
   selection changed: the panel and the list are the two columns of one grid, so
   a panel that is a line taller on some plans and not others changes the row
   height under both. With the meters no longer wrapping, the panel is the same
   height on all five rungs and the list stops moving. */
.sh-ladder-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sh-ladder-meters-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-ladder-meters-1 { grid-template-columns: minmax(0, 1fr); }
.sh-ladder-meter { padding: 12px 12px 11px; border-radius: 10px; background: var(--sh-navy-2); }
.sh-ladder-meter-label { display: block; margin-bottom: 5px; color: #b9c4d4; font-size: 11px; }
.sh-ladder-meter strong { font: 700 19px/1.15 var(--sh-font-heading); }
.sh-ladder-secondary { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; font-size: 13px; }
.sh-ladder-secondary-label { color: #b9c4d4; margin-right: 6px; }
.sh-ladder-cta { width: 100%; margin-top: 18px; justify-content: center; }
.sh-ladder-list { padding: 6px 0 0; }
/* One template per axis width. The default declares five columns because the
   server axis has three meters; a family with fewer — account packs have two —
   used to fall through to it and leave a phantom empty column, which is why the
   price sat a third of the way in from the right instead of at the edge. The
   count comes from the markup (`sh-ladder-row-2`), so a new axis width needs a
   line here and nothing else. */
.sh-ladder-head-row, .sh-ladder-row { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .85fr)) minmax(9ch, 1.15fr); }
.sh-ladder-head-row-2, .sh-ladder-row-2 { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(9ch, 1fr); }
.sh-ladder-head-row-1, .sh-ladder-row-1 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(9ch, 1fr); }
/* The column titles read as one line each: they are labels, not sentences, and
   the axis templates above leave room for the longest of them. */
.sh-ladder-head-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ladder-head-row { display: grid; gap: 10px; padding: 0 15px 7px; color: #3d4f69; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sh-ladder-head-row span:last-child { text-align: right; }
.sh-ladder-list ol { padding: 0; margin: 0; list-style: none; border: 1px solid #d9e2ed; border-radius: 12px; overflow: hidden; background: #fff; }
.sh-ladder-list li + li .sh-ladder-row { border-top: 1px solid var(--sh-line); }
.sh-ladder-row { display: grid; gap: 10px; width: 100%; min-height: var(--sh-target-min); padding: 11px 14px; align-items: center; border: 0; color: var(--sh-navy); background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sh-ladder-row:hover { background: #f5f8fc; }
.sh-ladder-row.is-current { color: var(--sh-blue-on-light); background: #eef4ff; font-weight: 600; }
.sh-ladder-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-ladder-row-spec { color: #4d5d74; }
.sh-ladder-row.is-current .sh-ladder-row-spec { color: inherit; }
.sh-ladder-row-price { text-align: right; font-weight: 600; }

.sh-action-section { padding: var(--sh-section-y) 0; background: var(--sh-paper); }
.sh-action-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 70px; }
.sh-action-layout .sh-integrated-form.sh-reveal { transition-delay: .1s; }
.sh-action-copy h2 { margin: 14px 0 18px; font: 700 clamp(27px, 2.9vw, 39px)/1.08 var(--sh-font-heading); letter-spacing: -.05em; }
.sh-action-copy p { color: #3d4f69; font-size: 16px; line-height: 1.75; }
.sh-integrated-form { display: flex; padding: 34px; flex-direction: column; gap: 11px; border: 1px solid var(--sh-line); border-radius: 18px; background: #fff; box-shadow: 0 22px 60px rgba(22,47,83,.08); }
.sh-integrated-form label { margin-top: 5px; color: #2c3f5b; font-size: 12px; font-weight: 800; }
.sh-integrated-form input, .sh-integrated-form textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #c7d4e3; border-radius: 9px; color: var(--sh-ink); background: #fff; font: 500 14px var(--sh-font-body); }
.sh-integrated-form textarea { min-height: 150px; resize: vertical; }
.sh-integrated-form input:hover, .sh-integrated-form textarea:hover { border-color: #9db1ca; }
.sh-integrated-form .sh-button { margin-top: 10px; border: 0; cursor: pointer; }
.sh-integrated-form > a { margin-top: 5px; color: var(--sh-blue-on-light); font-size: 12px; font-weight: 800; text-align: center; }

.sh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sh-form-grid > div { display: flex; flex-direction: column; gap: 11px; }
.sh-form-captcha { padding: 12px; border-radius: 9px; background: #f6f9fd; text-align: center; }
.sh-use-cases { background: #f8faff; }
.sh-use-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sh-use-case-grid article { padding: 30px; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-use-case-grid h3 { margin: 0 0 12px; font: 700 18px/1.3 var(--sh-font-heading); }
.sh-use-case-grid p { margin: 0; color: var(--sh-muted); line-height: 1.7; }
.sh-use-case-grid .sh-reveal:nth-child(2) { transition-delay: .08s; }
.sh-use-case-grid .sh-reveal:nth-child(3) { transition-delay: .16s; }
.sh-related-pages .sh-use-case-grid { margin: 0; padding: 0; list-style: none; }
.sh-related-pages li { display: flex; min-height: 92px; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-related-pages li a { display: flex; width: 100%; padding: 24px 26px; align-items: center; justify-content: space-between; gap: 18px; color: var(--sh-navy); font: 700 17px/1.35 var(--sh-font-heading); text-decoration: none; }
.sh-related-pages li a:hover, .sh-related-pages li a:focus-visible { color: var(--sh-blue); }
.sh-related-pages li span { color: var(--sh-cyan); font-size: 22px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--sh-mint); outline-offset: 3px; scroll-margin-block: 5rem; }
.sh-solutions :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.sh-live-plans :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.sh-control :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.sh-decision :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: var(--sh-blue-on-light);
}

/* Generic scroll-reveal: initSectionReveal() in site.js arms each .sh-reveal
   element (adds .is-armed) and then adds .in once it crosses into the
   viewport. The hidden state only exists behind .is-armed, which only JS
   applies, so content already on screen never depends on a script running —
   if JS fails, .sh-reveal elements are just always visible. */
.sh-reveal.is-armed { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.sh-reveal.is-armed.in { opacity: 1; transform: none; }
.sh-solution-grid .sh-reveal:nth-child(2) { transition-delay: .08s; }
.sh-solution-grid .sh-reveal:nth-child(3) { transition-delay: .16s; }
.sh-solution-grid .sh-reveal:nth-child(4) { transition-delay: .24s; }

/* Every animation and hover transition added for the motion pass (hero
   constellation, breathing status dots, card/badge hovers, scroll reveals,
   the catalog skeleton, the dashboard chart) is covered by one query instead
   of a reduced-motion variant per rule. Transitions collapse to near-instant
   rather than 0s so a state change (skeleton -> loaded cards, reveal -> in)
   still resolves visibly instead of flashing. */
@media (prefers-reduced-motion: reduce) {
    * , *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .sh-hero::before { display: none; }
}

/* Transactional and authenticated surfaces */
.sh-auth { display: grid; max-width: 960px; margin: 56px auto; grid-template-columns: .9fr 1fr; overflow: hidden; border: 1px solid var(--sh-line); border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(14, 39, 74, .13); }
.sh-auth-intro { padding: 52px; color: #fff; background: radial-gradient(circle at 85% 15%, rgba(53,216,255,.24), transparent 35%), var(--sh-navy); }
.sh-auth-intro h1 { margin: 16px 0; font: 700 31px/1.15 var(--sh-font-heading); letter-spacing: -.04em; }
.sh-auth-intro p { color: #aab7cc; line-height: 1.7; }
.sh-auth-intro ul { padding: 20px 0 0; list-style: none; }
.sh-auth-intro li { margin: 14px 0; color: #dce7f7; }
.sh-auth-intro li::before { margin-right: 10px; content: "✓"; color: var(--sh-mint); font-weight: 800; }
.sh-auth-card { padding: 52px; }
.sh-auth-card label { color: #293b55; font-size: 12px; font-weight: 700; }
.sh-auth-card .form-control { min-height: 50px; border-color: #cbd7e6; border-radius: 9px; }
.sh-auth-card .btn-primary { min-height: 50px; border-color: var(--sh-blue); border-radius: 9px; background: var(--sh-blue); font-weight: 700; }
.sh-field-label { display: flex; justify-content: space-between; align-items: center; }
.sh-field-label a { font-size: 11px; font-weight: 700; }
.sh-remember { display: flex; margin: 20px 0; align-items: center; gap: 9px; }
.sh-auth-register { margin: 22px 0 0; text-align: center; }
/* Third-party sign-in controls are rendered outside the authentication card.
   Give them the same measure and rhythm so they read as one action family. */
.providerPreLinking[data-link-context="login"] { width: min(960px, calc(100% - 28px)); margin: -28px auto 56px; }
.providerPreLinking[data-link-context="login"] .social-signin-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.providerPreLinking[data-link-context="login"] .social-signin-btns .btn-social { width: 100%; min-height: var(--sh-target-min); border-radius: 8px; font-size: 13px; font-weight: 700; }
.providerPreLinking[data-link-context="login"] .social-signin-btns .btn-google { display: flex; min-height: var(--sh-target-min); align-items: center; justify-content: center; }

/* On the security page the provider controls live inside a card. Keep them in
   normal flow so the explanatory copy and the linked-account table cannot be
   overlapped by the login-page positioning. */
.providerPreLinking[data-link-context="clientsecurity"] { width: 100%; margin: 20px 0 28px; }
.providerPreLinking[data-link-context="clientsecurity"] .social-signin-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.providerPreLinking[data-link-context="clientsecurity"] .btn-social,
.providerPreLinking[data-link-context="clientsecurity"] .btn-google { width: 100%; min-width: 0; }

.client-home-cards .card, .tiles .tile, .table-container, .main-content .card {
    border: 1px solid var(--sh-line);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(18, 44, 78, .06);
}
.tiles .tile { margin: 6px; overflow: hidden; background: #fff; transition: transform .2s, box-shadow .2s; }
.tiles .tile:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(18, 44, 78, .11); }
.tiles .tile .stat { color: var(--sh-navy); font-family: var(--sh-font-heading); font-weight: 800; }
.client-home-cards .card-header { border-bottom: 1px solid var(--sh-line); background: #f8faff; }
.table-list thead th { border: 0; color: #fff; background: var(--sh-navy); }
.table-list tbody tr { cursor: pointer; }
.table-list tbody tr:focus-within { outline: 3px solid rgba(53,216,255,.45); outline-offset: -3px; }

.sh-control { padding: var(--sh-section-y) 0; background: var(--sh-paper); }
.sh-control-grid { display: grid; grid-template-columns: .8fr 1.15fr; align-items: center; gap: 90px; }
.sh-control-copy > p { color: #3d4f69; font-size: 17px; line-height: 1.75; }.sh-feature-list { display: grid; margin: 28px 0; grid-template-columns: 1fr 1fr; gap: 13px; }.sh-feature-list span { color: #263b59; font-size: 13px; }.sh-feature-list i { margin-right: 9px; color: var(--sh-blue-on-light); font-style: normal; }
/* Contextual actions remain links, but share one readable and keyboard-visible treatment. */
.sh-control-copy > a, .sh-comparison-link a, .sh-domain-action-alt, .sh-landing-reviews-link a, .sh-partner-reviews-link a { display: inline-flex; min-height: var(--sh-target-min); padding: 0 var(--sh-space-1); align-items: center; color: var(--sh-blue-on-light); font-size: 13px; font-weight: 800; line-height: 1.45; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.sh-control-copy > a:hover, .sh-control-copy > a:focus-visible, .sh-comparison-link a:hover, .sh-comparison-link a:focus-visible, .sh-domain-action-alt:hover, .sh-domain-action-alt:focus-visible, .sh-landing-reviews-link a:hover, .sh-landing-reviews-link a:focus-visible, .sh-partner-reviews-link a:hover, .sh-partner-reviews-link a:focus-visible { color: #174fbf; }
.sh-dashboard { display: grid; grid-template-columns: 74px 1fr; overflow: hidden; border: 1px solid #d5deea; border-radius: 20px; background: #fff; box-shadow: 0 35px 80px rgba(22,45,80,.14); transform: rotate(1.2deg); }
.sh-dashboard-nav { display: flex; min-height: 480px; padding: 18px; align-items: center; flex-direction: column; gap: 23px; background: var(--sh-navy); }.sh-dashboard-nav img { width: 38px; height: 38px; margin-bottom: 20px; }.sh-dashboard-nav span { width: 24px; height: 5px; border-radius: 5px; background: #34445f; }.sh-dashboard-nav span:nth-child(2){background:var(--sh-cyan)}.sh-dashboard-nav i { width: 30px; height: 30px; margin-top: auto; border-radius: 50%; background: #263a5b; }
.sh-dashboard-content { padding: 40px; }.sh-dashboard-content small { color: var(--sh-blue-on-light); font-weight: 700; letter-spacing: .15em; }.sh-dashboard-content h3 { margin: 14px 0 4px; font: 700 25px var(--sh-font-heading); letter-spacing: -.04em; }.sh-dashboard-content > p { color: var(--sh-muted); }
.sh-dashboard-cards { display: grid; margin-top: 32px; grid-template-columns: 1fr 1fr; gap: 12px; }.sh-dashboard-cards article { display: flex; padding: 17px; border: 1px solid var(--sh-line); border-radius: 12px; flex-direction: column; }.sh-dashboard-cards span { color: var(--sh-muted); font-size: 9px; text-transform: uppercase; }.sh-dashboard-cards b { margin: 7px 0 14px; font-size: 13px; }.sh-dashboard-cards em { color: var(--sh-green-on-light); font-size: 9px; font-style: normal; }
.sh-chart { display: flex; height: 130px; margin-top: 28px; align-items: flex-end; gap: 8px; padding: 14px; border-radius: 12px; background: #f5f8fc; }.sh-chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(var(--sh-cyan), var(--sh-blue)); }
/* The 0-height starting point only exists once JS arms it (see
   initChartReveal in site.js) — without JS the bars keep their static
   heights below, exactly as before this change. */
.sh-chart.is-armed span { transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.8,.3,1); }
.sh-chart.is-armed.in span { transform: scaleY(1); }
.sh-chart span:nth-child(1){height:35%;transition-delay:.02s}.sh-chart span:nth-child(2){height:55%;transition-delay:.08s}.sh-chart span:nth-child(3){height:43%;transition-delay:.14s}.sh-chart span:nth-child(4){height:78%;transition-delay:.2s}.sh-chart span:nth-child(5){height:62%;transition-delay:.26s}.sh-chart span:nth-child(6){height:91%;transition-delay:.32s}.sh-chart span:nth-child(7){height:74%;transition-delay:.38s}.sh-chart span:nth-child(8){height:98%;transition-delay:.44s}

.sh-domain { padding: var(--sh-section-y) 0; color: #fff; background: var(--sh-navy-2); }.sh-domain-grid { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 70px; }.sh-domain form { display: flex; padding: 7px; border: 1px solid var(--sh-control-border-dark); border-radius: 12px; background: rgba(255,255,255,.07); }.sh-domain input { min-width: 0; min-height: 54px; padding: 0 17px; flex: 1; border: 0; color: #fff; background: transparent; }.sh-domain input:focus-visible { outline: 3px solid var(--sh-mint); outline-offset: 2px; }.sh-domain button { padding: 0 20px; border: 0; border-radius: 8px; color: #061326; background: var(--sh-cyan); font-weight: 700; }
.sh-final-cta { padding: var(--sh-section-y-lg) 0; text-align: center; color: #fff; background: radial-gradient(circle at 50% 100%, rgba(57,120,255,.34), transparent 40%), var(--sh-navy); }.sh-final-cta h2 { margin: 18px auto; font: 700 clamp(34px, 4vw, 52px)/1.02 var(--sh-font-heading); letter-spacing: -.06em; }.sh-final-cta p { color: #b9c4d4; font-size: 17px; }.sh-final-cta .sh-hero-actions { justify-content: center; }.sh-button-light { color: var(--sh-navy) !important; background: #fff; }.sh-button-outline { color: #fff !important; border-color: rgba(255,255,255,.42); }
.sh-decision { padding: var(--sh-section-y-lg) 0; background: #fff; }
.sh-decision-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sh-decision-grid a { position: relative; display: flex; min-height: 300px; padding: 28px; overflow: hidden; flex-direction: column; border: 1px solid var(--sh-line); border-radius: 16px; color: var(--sh-ink) !important; background: var(--sh-paper); text-decoration: none !important; transition: transform .25s, box-shadow .25s, border-color .25s; }
.sh-decision-grid a:hover { border-color: var(--sh-blue); box-shadow: 0 22px 50px rgba(15,42,78,.1); transform: translateY(-3px); }
.sh-decision-grid a::after { position: absolute; inset: 0; padding: 1px; content: ""; border-radius: inherit; background: linear-gradient(125deg, transparent 30%, var(--sh-cyan), transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.sh-decision-grid a:hover::after { opacity: 1; }
.sh-decision-grid span { color: var(--sh-blue-on-light); font: 700 10px monospace; letter-spacing: .12em; }
.sh-decision-grid h3 { margin: 54px 0 12px; font: 700 19px/1.25 var(--sh-font-heading); letter-spacing: -.035em; }
.sh-decision-grid p { color: var(--sh-muted); line-height: 1.65; }
.sh-decision-grid b { margin-top: auto; color: var(--sh-blue-on-light); font-size: 12px; }
.sh-decision-grid .sh-reveal:nth-child(2) { transition-delay: .07s; }
.sh-decision-grid .sh-reveal:nth-child(3) { transition-delay: .14s; }
.sh-decision-grid .sh-reveal:nth-child(4) { transition-delay: .21s; }
.sh-assurance-list .sh-reveal:nth-child(2) { transition-delay: .08s; }
.sh-assurance-list .sh-reveal:nth-child(3) { transition-delay: .16s; }
.sh-assurance { padding: var(--sh-section-y) 0; color: #fff; background: var(--sh-navy); }
.sh-assurance-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; }
.sh-assurance-grid h2 { margin: 17px 0; font: 700 clamp(28px, 2.9vw, 40px)/1.05 var(--sh-font-heading); letter-spacing: -.05em; }
.sh-assurance-grid > div > p { color: #b9c4d4; font-size: 16px; line-height: 1.7; }
.sh-assurance-list { display: grid; gap: 12px; }
.sh-assurance-list article { padding: 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035); }
.sh-assurance-list strong { color: var(--sh-cyan); }
.sh-assurance-list p { margin: 8px 0 0; color: #c7d2e3; line-height: 1.6; }

.sh-landing { background: var(--sh-paper); }
.sh-landing-hero { position: relative; overflow: hidden; padding: var(--sh-hero-y) 0; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(53,216,255,.18), transparent 30%), var(--sh-navy); }
.sh-landing-hero::before { position: absolute; z-index: 0; inset: -25%; content: ""; background: radial-gradient(circle at 55% 50%, rgba(57,120,255,.2), transparent 32%), radial-gradient(circle at 40% 65%, rgba(128,87,255,.13), transparent 30%); filter: blur(10px); animation: sh-drift 18s ease-in-out infinite; pointer-events: none; }
.sh-landing-hero-grid { position: relative; z-index: 1; }
.sh-landing-hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: 80px; }
.sh-landing-hero-grid > * { min-width: 0; }
.sh-landing-hero h1 { max-width: 850px; margin: 18px 0; font: 700 clamp(34px, 4vw, 50px)/1.02 var(--sh-font-heading); letter-spacing: -.055em; }
.sh-landing-hero p { max-width: 720px; color: #aab7ca; font-size: 18px; line-height: 1.7; }
.sh-landing-summary { padding: 30px; border: 1px solid rgba(53,216,255,.22); border-radius: 18px; background: rgba(255,255,255,.045); }
.sh-landing-summary > span { color: var(--sh-cyan); font: 700 10px monospace; letter-spacing: .12em; text-transform: uppercase; }
.sh-landing-summary > strong { display: block; margin: 18px 0 25px; font: 700 20px/1.3 var(--sh-font-heading); }
.sh-landing-summary ul { padding: 0; margin: 0; list-style: none; }
.sh-landing-summary li { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.09); color: #b5c1d2; }
.sh-landing-summary li:before { margin-right: 9px; content: "✓"; color: var(--sh-cyan); }
.sh-landing-section { padding: var(--sh-section-y) 0; }
.sh-landing-section-dark { color: #fff; background: var(--sh-navy-2); }
.sh-landing-section:not(.sh-landing-section-dark) .sh-eyebrow { color: var(--sh-blue-on-light); }
.sh-landing-section:not(.sh-landing-section-dark) a span[aria-hidden="true"] { color: inherit; }
.sh-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sh-value-grid article { min-height: 270px; padding: 30px; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-value-grid span { color: var(--sh-blue-on-light); font: 700 10px monospace; }
.sh-value-grid h3 { margin: 52px 0 12px; font: 700 20px var(--sh-font-heading); }
.sh-value-grid p { color: #3d4f69; line-height: 1.65; }
.sh-value-grid .sh-reveal:nth-child(2) { transition-delay: .08s; }
.sh-value-grid .sh-reveal:nth-child(3) { transition-delay: .16s; }
.sh-migration-grid, .sh-faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.sh-migration-grid h2, .sh-faq-layout h2 { margin: 17px 0; font: 700 clamp(28px, 2.9vw, 40px)/1.08 var(--sh-font-heading); letter-spacing: -.045em; }
.sh-migration-grid p { color: #a8b6ca; font-size: 17px; line-height: 1.75; }
.sh-faq-list details { padding: 22px 0; border-bottom: 1px solid var(--sh-line); }
/* One +/- marker language for every disclosure widget on the site, so
   on the site reads the same way. */
.sh-faq-list summary { position: relative; padding-right: 30px; cursor: pointer; font-weight: 700; list-style: none; }
.sh-faq-list summary::-webkit-details-marker { display: none; }
.sh-faq-list summary::after { position: absolute; top: 50%; right: 0; content: "+"; color: var(--sh-blue-on-light); font-size: 20px; transform: translateY(-50%); }
.sh-faq-list details[open] summary::after { content: "−"; }
.sh-faq-list p { color: #3d4f69; line-height: 1.7; }
.sh-faq-list .sh-reveal:nth-child(2) { transition-delay: .06s; }
.sh-faq-list .sh-reveal:nth-child(3) { transition-delay: .12s; }
.sh-footer { padding: 74px 0 26px; color: #91a0b7; background: #040c1b; }
.sh-footer-top { display: flex; padding-bottom: 46px; align-items: end; justify-content: space-between; gap: 45px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sh-footer-intro img { display: block; width: 245px; height: auto; }.sh-footer-intro p { max-width: 600px; margin: 18px 0 0; color: #b9c4d4; line-height: 1.75; }.sh-status { display: inline-flex; margin-top: 14px; align-items: center; color: #b9c4d4; font-size: 9px; }
.sh-footer-social { display: flex; margin-top: 17px; flex-wrap: wrap; gap: 8px 14px; }
.sh-footer-social a { display: inline-flex; min-width: var(--sh-target-min); min-height: var(--sh-target-min); padding: 0 var(--sh-space-1); align-items: center; justify-content: center; color: #9aa8bd !important; font-size: 11px; font-weight: 700; text-decoration: none !important; }
.sh-footer-social a:hover, .sh-footer-social a:focus-visible { color: var(--sh-cyan) !important; }
.sh-footer-sales { display: flex; min-width: 310px; padding: 20px 22px; justify-content: space-between; flex-direction: column; border: 1px solid rgba(53,216,255,.2); border-radius: 14px; color: #fff !important; background: rgba(53,216,255,.06); text-decoration: none !important; }
.sh-footer-sales > span { color: #7f8da4; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.sh-footer-sales strong { display: flex; margin-top: 8px; justify-content: space-between; font-size: 12px; }.sh-footer-sales i { color: var(--sh-cyan); font-style: normal; }
.sh-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; padding-top: 48px; }
.sh-footer-grid nav h2 { margin: 0 0 19px; color: #fff; font: 700 11px var(--sh-font-body); letter-spacing: .12em; text-transform: uppercase; }
.sh-footer-grid nav a { display: flex; min-width: var(--sh-target-min); min-height: 32px; margin: 0; align-items: center; color: #9aa8bd; font-size: 12px; line-height: 1.45; text-decoration: none; }.sh-footer-grid nav a:hover, .sh-footer-grid nav a:focus-visible { color: #fff; }
.sh-footer-group-stack { display: grid; align-content: start; gap: 24px; }
.sh-footer-trust { display: grid; margin-top: 44px; padding: 20px 0; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.sh-footer-trust span { display: flex; align-items: center; gap: 8px; color: #75849b; font-size: 9px; }.sh-footer-trust i { color: var(--sh-cyan); font-style: normal; }.sh-footer-trust .sh-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sh-mint); box-shadow: 0 0 12px rgba(169,255,203,.65); animation: sh-breathe-dot 2.6s ease-in-out infinite; }
.sh-footer-bottom { display: flex; padding-top: 22px; justify-content: space-between; color: #b9c4d4; font-size: 10px; }
.sh-footer-legal { display: flex; flex-wrap: wrap; gap: var(--sh-space-2) var(--sh-space-4); }.sh-footer-legal a { display: inline-flex; min-width: var(--sh-target-min); min-height: var(--sh-target-min); align-items: center; justify-content: center; color: #b9c4d4; text-decoration: none; }.sh-footer-legal a[aria-current="true"] { color: var(--sh-cyan); }
.sh-footer-legal button { min-width: var(--sh-target-min); min-height: var(--sh-target-min); padding: 0 4px; border: 0; background: none; color: #b9c4d4; font: inherit; font-size: 10px; cursor: pointer; }
.sh-footer-legal button:hover, .sh-footer-legal button:focus-visible { color: var(--sh-cyan); }
.sh-public-page #sh-main > p[style*="text-align:center"] { color: #b9c4d4; }
.sh-public-page #sh-main > p[style*="text-align:center"] a { color: #c7d2e3; }

/* Compact cookie consent card — small on purpose: a short sentence and two
   buttons, not a full-width bar. Sits above everything but the toast/overlay
   layer, bottom-left so it never covers the primary CTA a visitor came for. */
.sh-consent { position: fixed; z-index: var(--sh-layer-floating); left: 16px; bottom: 16px; width: min(320px, calc(100vw - 32px)); padding: 16px 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; color: #fff; background: var(--sh-navy); box-shadow: 0 20px 50px rgba(4,10,22,.4); opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.sh-consent.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sh-consent p { margin: 0; color: #c3cede; font-size: 12px; line-height: 1.55; }
.sh-consent p a { color: var(--sh-cyan); }
.sh-consent-actions { display: flex; margin-top: 12px; gap: 8px; }
.sh-consent-btn { display: inline-flex; min-height: var(--sh-target-min); padding: 0 14px; align-items: center; border: 1px solid transparent; border-radius: 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.sh-consent-accept { color: #061326; background: var(--sh-cyan); }
.sh-consent-accept:hover, .sh-consent-accept:focus-visible { background: #77e9ff; }
.sh-consent-reject { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
.sh-consent-reject:hover, .sh-consent-reject:focus-visible { background: rgba(255,255,255,.09); }
@media (max-width: 460px) { .sh-consent { right: 16px; width: auto; } }

/* Floating WhatsApp button — DELIBERATELY NOT STYLED HERE.
   The button is a Google Tag Manager custom HTML tag that fires on the WHMCS
   site, on blog.sitioshispanos.com and on the three help-centre hosts. Only
   the first loads this file, so styling it from here left the other two with a
   bare link and, because the icon was a Font Awesome glyph, no icon at all.
   The tag now carries its own <style> block, with the glyph as a data URI
   because GTM's validator rejects an <svg> element. Its canonical source is
   tools/gtm/whatsapp-fab.html; edit there, not here. Restyling it from this
   file would fix the WHMCS site only and hide the bug again.
   Right side, opposite the consent card on the left, so neither ever
   overlaps the other. */

/* Domain-based panel access modal. Bootstrap (already loaded by WHMCS) owns
   open/close/backdrop via data-toggle/data-dismiss; this only restyles the
   dialog and adds the status states initPanelAccess() toggles in site.js. */
.sh-panel-modal .modal-content { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(4,10,22,.35); }
.sh-panel-modal .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--sh-line); }
.sh-panel-modal .modal-title { font: 700 18px var(--sh-font-heading); letter-spacing: -.01em; color: var(--sh-ink); }
.sh-panel-modal .modal-body { padding: 22px 24px; }
.sh-panel-modal .modal-body p { margin: 0 0 16px; color: var(--sh-muted); font-size: 13px; line-height: 1.6; }
.sh-panel-modal label { display: block; margin-bottom: 6px; color: #2c3f5b; font-size: 12px; font-weight: 800; }
.sh-panel-modal input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #c7d4e3; border-radius: 9px; color: var(--sh-ink); background: #fff; font: 500 14px var(--sh-font-body); }
.sh-panel-modal input:hover, .sh-panel-modal input:focus { border-color: var(--sh-blue); }
.sh-panel-access-status { min-height: 18px; margin: 12px 0 0 !important; font-size: 12px !important; font-weight: 700; }
.sh-panel-access-status.is-checking { color: var(--sh-blue); }
.sh-panel-access-status.is-error { color: #c0392b; }
.sh-panel-access-status a { color: var(--sh-blue); font-weight: 800; }
.sh-panel-modal .modal-footer { padding: 16px 24px; border-top: 1px solid var(--sh-line); }
.sh-panel-modal .sh-consent-btn { min-height: var(--sh-target-min); padding: 0 18px; font-size: 13px; }
.sh-panel-modal .sh-consent-btn:disabled { opacity: .6; cursor: default; transform: none !important; }

/* Help search results. The list is what scrolls, so a long result set never
   pushes the modal past the viewport. */
.sh-help-modal .modal-dialog { max-width: 620px; }
.sh-help-results { max-height: 46vh; margin: 14px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.sh-help-results li + li { margin-top: 6px; }
.sh-help-results a { display: block; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--sh-ink) !important; text-decoration: none !important; transition: border-color .2s, background-color .2s; }
.sh-help-results a:hover, .sh-help-results a:focus-visible { border-color: rgba(53,216,255,.4); background: #f5f8fc; }
.sh-help-results b { display: block; color: var(--sh-navy); font: 700 13.5px/1.35 var(--sh-font-heading); }
.sh-help-results span { display: block; margin-top: 4px; color: var(--sh-muted); font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-help-browse { color: var(--sh-blue); font-size: 12.5px; font-weight: 700; }

/* Plan comparison table. The wrapper is what scrolls, so a wide table never
   makes the page body scroll sideways; the feature column stays pinned while
   the plan columns move under it. */
.sh-comparison-scroll { overflow-x: auto; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-comparison-scroll:focus-visible { outline: 3px solid var(--sh-blue); outline-offset: 3px; }
.sh-comparison-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13.5px; }
.sh-comparison-table th, .sh-comparison-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--sh-line); }
.sh-comparison-table thead th { position: sticky; top: 0; z-index: 2; color: #fff; background: var(--sh-navy); font: 700 13px var(--sh-font-heading); white-space: nowrap; }
.sh-comparison-table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 210px; color: var(--sh-ink); background: #fff; font-weight: 600; }
.sh-comparison-table td { color: #4d5d74; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-comparison-group th { color: var(--sh-blue-on-light) !important; background: #f5f8fc !important; font: 700 10px/1 var(--sh-font-body) !important; letter-spacing: .1em; text-transform: uppercase; }
.sh-comparison-table tbody:last-child tr:last-child th, .sh-comparison-table tbody:last-child tr:last-child td { border-bottom: 0; }
.sh-comparison-yes { color: #159c68; font-weight: 900; }
.sh-comparison-no { color: #9db1ca; }
.sh-comparison-note { margin-top: 18px; color: #3d4f69; font-size: 12.5px; }
.sh-comparison-note a { color: var(--sh-blue-on-light); font-weight: 700; }
/* Link out to the table from a landing's plans block. */
.sh-comparison-link { margin: 22px 0 0; text-align: center; }
.sh-comparison-link a { justify-content: center; }
@media (max-width: 700px) { .sh-comparison-table tbody th[scope="row"] { min-width: 160px; } .sh-comparison-table th, .sh-comparison-table td { padding: 11px 13px; } }

/* Nexus internal area */
.sh-internal-page { min-height: 100vh; color: var(--sh-ink); background: #f4f7fb; }
.sh-internal-page #header { color: #fff; background: var(--sh-navy); box-shadow: 0 10px 35px rgba(3, 13, 30, .16); }
.sh-internal-page #header .topbar { border-bottom: 1px solid rgba(255,255,255,.08); background: #050e20; }
.sh-internal-page #header .topbar .btn,
.sh-internal-page #header .topbar .input-group-text { color: #bdc9da; border-color: rgba(255,255,255,.12); background: transparent; }
/* La etiqueta «Conectado como:» medía 27 px de alto contra los 40 px de los
   controles vecinos, así que su centro quedaba 6 px más arriba; y la fila no
   centraba verticalmente, con lo que el bloque de notificaciones tampoco caía
   en el eje de la barra. */
.sh-internal-page #header .topbar .d-flex,
.sh-internal-page #header .topbar .active-client,
.sh-internal-page #header .topbar .btn-group { align-items: center; }
.sh-internal-page #header .topbar .input-group-text {
    display: inline-flex;
    min-height: var(--sh-target-min);
    align-items: center;
}
.sh-internal-page #header .topbar .btn { display: inline-flex; min-height: var(--sh-target-min); align-items: center; }
.sh-internal-page #header .topbar > .container { display: flex; align-items: center; min-height: 46px; }
.sh-internal-page #header .topbar > .container > .d-flex { width: 100%; }
.sh-internal-page .navbar-light { min-height: 76px; background: var(--sh-navy) !important; }
.sh-internal-page .navbar-light > .container,
.sh-internal-page .main-navbar-wrapper > .container,
.sh-internal-page .master-breadcrumb > .container,
.sh-internal-page #main-body > .container,
.sh-internal-page #footer > .container { width: min(1440px, calc(100% - 40px)); max-width: none; }
.sh-internal-page .navbar-brand img { width: 235px; height: 48px; object-fit: contain; object-position: left center; }
/* El ancho fijo de 320px más el botón excedía el grupo y el input caía a una
   segunda línea, dejando el buscador partido en dos. El grupo define el ancho y
   el campo ocupa lo que queda. */
.sh-internal-page .navbar-light .search { flex-wrap: nowrap; width: 340px; }
.sh-internal-page .navbar-light .search .form-control { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; border: 1px solid rgba(255,255,255,.14); color: #fff; background: rgba(255,255,255,.07); }
.sh-internal-page .navbar-light .search .form-control::placeholder { color: #93a2b9; }
/* El botón de la lupa quedaba blanco sobre la cabecera oscura: la capa de
   componentes del área privada pinta `.btn-default` en blanco y le ganaba a la
   regla del navbar. Se declara con la misma especificidad para que el buscador
   acompañe al selector de moneda y al carrito. */
.sh-internal-page .navbar-light .search .btn,
.sh-internal-page:not(.sh-shopping-cart) .navbar-light .search .btn-default,
.sh-internal-page .navbar-light .toolbar .nav-link { min-width: 44px; min-height: 44px; color: #dfe9f8 !important; border: 1px solid rgba(255,255,255,.14) !important; background: rgba(255,255,255,.05) !important; }
.sh-internal-page:not(.sh-shopping-cart) .navbar-light .search .btn-default:hover,
.sh-internal-page:not(.sh-shopping-cart) .navbar-light .search .btn-default:focus-visible { border-color: rgba(255,255,255,.3) !important; background: rgba(255,255,255,.12) !important; }
.sh-internal-page .navbar-light .search .input-group-text { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.sh-currency-switch-internal { margin-right: 8px; }
.sh-currency-switch-internal select { min-height: 44px; }

/* WHMCS product descriptions: semantic headings and features without native bullets. */
.sh-internal-page .package-features { padding-left: 0 !important; list-style: none !important; }
.sh-internal-page .package-features > li,
.sh-internal-page .package-features .card-body li { position: relative; margin: 10px 0; padding-left: 24px; list-style: none !important; line-height: 1.55; }
.sh-internal-page .package-features li > i { position: absolute; top: .28em; left: 0; width: 16px; text-align: center; }
.sh-internal-page .package-features li > strong { display: block; margin: 24px 0 4px; color: var(--sh-navy); font-size: 15px; }
.sh-internal-page .package-features br { display: none; }
.sh-internal-page .package-features .card { margin-top: 20px; border: 1px solid var(--sh-line); border-radius: 12px; }
.sh-internal-page .package-features .card-header { padding: 0; background: #f8faff; }
.sh-internal-page .package-features .card-header .btn { width: 100%; min-height: 48px; justify-content: center; }
.sh-internal-page .main-navbar-wrapper { min-height: 54px; border-top: 1px solid rgba(255,255,255,.07); background: var(--sh-navy-2); }
.sh-internal-page .main-navbar-wrapper #nav > li > a,
.sh-internal-page .main-navbar-wrapper .navbar-nav > li > a { display: flex; min-height: 54px; padding: 0 17px; align-items: center; color: #c3cee0 !important; font-size: 12px; font-weight: 700; text-decoration: none; }
.sh-internal-page .main-navbar-wrapper #nav > li > a:hover,
.sh-internal-page .main-navbar-wrapper #nav > li > a:focus,
.sh-internal-page .main-navbar-wrapper .navbar-nav > li > a:hover,
.sh-internal-page .main-navbar-wrapper .navbar-nav > li > a:focus { color: #fff !important; background: rgba(255,255,255,.06); }
.sh-internal-page .main-navbar-wrapper .dropdown-menu { padding: 10px; border: 1px solid var(--sh-line); border-radius: 12px; box-shadow: 0 20px 55px rgba(8, 27, 54, .16); }
.sh-internal-page .main-navbar-wrapper .dropdown-item a { padding: 9px 11px !important; border-radius: 7px; color: #34445b; }
.sh-internal-page .master-breadcrumb { border: 0; background: #fff; box-shadow: 0 1px 0 var(--sh-line); }
.sh-internal-page .master-breadcrumb .breadcrumb { margin: 0; padding: 14px 0; background: transparent; }
.sh-internal-page #main-body { min-height: 60vh; padding: 38px 0 75px; background: linear-gradient(180deg, #f4f7fb 0, #fff 420px); }
.sh-internal-page #main-body > .container > .row { align-items: flex-start; }
.sh-internal-page .primary-content { min-width: 0; padding-bottom: var(--sh-space-8); }
.sh-internal-page .primary-content :where(.text-muted, .text-secondary, .form-text) { color: #3d4f69 !important; }
.sh-internal-page:not(.sh-shopping-cart) .primary-content a:not(.btn):not(.nav-link):not(.list-group-item) { color: var(--sh-blue-on-light); }
.sh-internal-page .primary-content > .header-lined h1 { color: var(--sh-navy); font: 700 clamp(25px, 2.4vw, 34px)/1.1 var(--sh-font-heading); letter-spacing: -.04em; }
.sh-internal-page .btn-primary { border-color: #123f9c; border-radius: 8px; background: #123f9c; font-weight: 700; box-shadow: 0 10px 25px rgba(18,63,156,.18); }
.sh-internal-page .btn-success { border-color: #159c68; border-radius: 8px; background: #159c68; }
.sh-internal-page .form-control,
.sh-internal-page .custom-select { min-height: 44px; border-color: #cbd7e6; border-radius: 8px; }

.sh-internal-page .sidebar .card-sidebar { overflow: hidden; margin-bottom: var(--sh-space-4) !important; border: 1px solid #d8e2ee; border-radius: 13px; background: #fff; box-shadow: 0 12px 32px rgba(22, 47, 82, .06); }
.sh-internal-page .sidebar .card-sidebar .card-header { padding: 15px 17px; border-bottom: 1px solid #e5ebf3; color: var(--sh-navy); background: #f8faff; }
.sh-internal-page .sidebar .card-sidebar .card-title { font-size: 12px; font-weight: 800; }
.sh-internal-page .sidebar .list-group-item { padding: 12px 17px; border-color: #edf1f6; color: #506079; font-size: 12px; }
.sh-internal-page .sidebar .list-group-item:hover,
.sh-internal-page .sidebar .list-group-item.active { color: var(--sh-blue-on-light); background: #edf4ff; }
.sh-internal-page .sidebar .list-group-item.active { border-left: 3px solid var(--sh-blue-on-light); font-weight: 700; }
.sh-internal-page .sidebar .card-body { color: #56667d; font-size: 12px; line-height: 1.6; }

.sh-internal-page .tiles { margin: 0 -6px var(--sh-space-6); }
.sh-internal-page .tiles .tile { min-height: 132px; padding: 24px; border: 1px solid #d8e2ee; border-radius: 15px; background: #fff; box-shadow: 0 14px 36px rgba(22,47,82,.07); }
.sh-internal-page .tiles .tile i { color: #9fb0c6; }
.sh-internal-page .tiles .tile .stat { color: var(--sh-navy); font-size: 34px; }
.sh-internal-page .tiles .tile .title { color: #64738a; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sh-internal-page .client-home-cards .card,
.sh-internal-page .primary-content > .card,
.sh-internal-page .table-container { overflow: hidden; border: 1px solid #d8e2ee; border-radius: 14px; background: #fff; box-shadow: 0 14px 38px rgba(18,44,78,.06); }
.sh-internal-page .client-home-cards .card-header,
.sh-internal-page .primary-content > .card > .card-header { padding: 16px 19px; border-color: #e5ebf3; background: #f8faff; }
.sh-internal-page .table-list thead th,
.sh-internal-page .table-list thead th.sorting,
.sh-internal-page .table-list thead th.sorting_asc,
.sh-internal-page .table-list thead th.sorting_desc {
    padding: 14px;
    border-color: #1b2e4c !important;
    color: #fff !important;
    background-color: var(--sh-navy) !important;
}
.sh-internal-page .table-list td { padding: 14px; vertical-align: middle; border-color: #e7edf4; }

/* DataTables is used by services, tickets, domains and invoices. Treat its
   controls and table as one component instead of three unrelated rows. */
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sh-space-3) var(--sh-space-4);
    margin-bottom: var(--sh-space-8);
}
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .listtable {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: center;
    gap: var(--sh-space-3) var(--sh-space-4);
    overflow: hidden;
    padding: var(--sh-space-4);
    border: 1px solid #d8e2ee;
    border-radius: var(--sh-radius-md);
    background: #fff;
    box-shadow: var(--sh-shadow-card);
}
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_info { grid-column: 1; grid-row: 1; padding: 0; color: var(--sh-muted); font-size: 12px; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_filter { grid-column: 2; grid-row: 1; width: 100%; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_filter label { display: block; margin: 0; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 0; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .table-list { grid-column: 1 / -1; grid-row: 2; width: 100% !important; margin: 0; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_length { grid-column: 1; grid-row: 2; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_paginate { grid-column: 2; grid-row: 2; justify-self: end; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper:has(.dataTables_empty) .dataTables_length,
.sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper:has(.dataTables_empty) .dataTables_paginate { display: none; }
.sh-internal-page:not(.sh-shopping-cart) .dataTables_empty { min-height: 110px; color: var(--sh-muted); text-align: center !important; }

#tableServicesList th:nth-child(2), #tableServicesList td:nth-child(2),
#tableTicketsList th:nth-child(1), #tableTicketsList td:nth-child(1),
#tableTicketsList th:nth-child(2), #tableTicketsList td:nth-child(2) { text-align: left; }
#tableServicesList th:nth-child(3), #tableServicesList td:nth-child(3) { text-align: right; }
#tableTicketsList th:nth-child(4), #tableTicketsList td:nth-child(4) { text-align: right; }

@media (max-width: 767px) {
    .sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper,
    .sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .listtable { display: block; }
    .sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_filter { margin-bottom: var(--sh-space-3); }
    .sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_info { margin-bottom: var(--sh-space-3); }
    .sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .listtable { padding: var(--sh-space-3); overflow-x: auto; }
    .sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_length,
    .sh-internal-page:not(.sh-shopping-cart) .dataTables_wrapper .dataTables_paginate { margin-top: var(--sh-space-3); }
}
/* ---------------------------------------------------------------------------
   Área de clientes: componentes compartidos.

   Nexus arma las 81 pantallas del área privada con un puñado de componentes de
   Bootstrap. En lugar de una hoja por pantalla se estilan esos componentes una
   sola vez: .card aparece en 61 de las 81 plantillas y .btn-default en 51, así
   que casi todo el área hereda de aquí.

   Se excluye .sh-shopping-cart porque el proceso de compra tiene su propia hoja
   en el order form y no debe recibir estos valores.
   --------------------------------------------------------------------------- */
.sh-internal-page:not(.sh-shopping-cart) .card {
    margin-bottom: 22px;
    border: 1px solid #d8e2ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(18, 44, 78, .06);
}
.sh-internal-page:not(.sh-shopping-cart) .card > .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5ebf3;
    border-radius: 14px 14px 0 0;
    background: #f8faff;
}
.sh-internal-page:not(.sh-shopping-cart) .card-title {
    margin: 0;
    color: var(--sh-navy);
    font: 700 14px/1.35 var(--sh-font-heading);
    letter-spacing: -.01em;
}
.sh-internal-page:not(.sh-shopping-cart) .card-body { padding: 20px; }
.sh-internal-page:not(.sh-shopping-cart) .card-footer {
    padding: 15px 20px;
    border-top: 1px solid #e5ebf3;
    border-radius: 0 0 14px 14px;
    background: #fbfdff;
}
/* Tarjetas anidadas: sin sombra ni margen para no apilar profundidad. */
.sh-internal-page:not(.sh-shopping-cart) .card .card { margin-bottom: 0; box-shadow: none; }

/* ---------------------------------------------------------------------------
   Sistema de botones del área privada.

   WHMCS y sus módulos describen una misma acción con clases distintas según la
   pantalla (`primary`, `success`, `info`, `default` y `bg-color-*`). Se reducen
   a tres tratamientos funcionales:

   1. Primario: avanzar, guardar, pagar, crear o abrir una gestión.
   2. Secundario: volver, cancelar, filtrar o consultar sin modificar.
   3. Destructivo: eliminar, terminar o confirmar una acción irreversible.

   Los tamaños expresan jerarquía, no crean variantes visuales nuevas.
   --------------------------------------------------------------------------- */
.sh-internal-page:not(.sh-shopping-cart) .btn {
    display: inline-flex;
    min-height: var(--sh-target-min);
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 8px !important;
    font-family: var(--sh-font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: normal;
    box-shadow: none;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sh-internal-page:not(.sh-shopping-cart) .btn:hover { text-decoration: none; transform: translateY(-1px); }
.sh-internal-page:not(.sh-shopping-cart) .btn:active { transform: translateY(0); }
.sh-internal-page:not(.sh-shopping-cart) .btn i,
.sh-internal-page:not(.sh-shopping-cart) .btn .fas,
.sh-internal-page:not(.sh-shopping-cart) .btn .far,
.sh-internal-page:not(.sh-shopping-cart) .btn .fab {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    font-size: 1em;
    line-height: 1;
}
.sh-internal-page:not(.sh-shopping-cart) .btn-sm { min-height: var(--sh-target-min); padding: 0 12px; font-size: 12px; }
.sh-internal-page:not(.sh-shopping-cart) .btn-lg { min-height: 48px; padding: 0 22px; font-size: 14px; }
.sh-internal-page:not(.sh-shopping-cart) .sh-auth-card .btn-primary { min-height: 50px; }

/* Primario: se incluyen success/info porque WHMCS los usa para acciones
   positivas, no como mensajes de estado. */
.sh-internal-page:not(.sh-shopping-cart) .btn-primary,
.sh-internal-page:not(.sh-shopping-cart) .btn-success,
.sh-internal-page:not(.sh-shopping-cart) .btn-info,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-primary,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-success,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-info {
    border-color: #123f9c !important;
    color: #fff !important;
    background: #123f9c !important;
    box-shadow: 0 9px 22px rgba(18, 63, 156, .18);
}
.sh-internal-page:not(.sh-shopping-cart) .btn-primary:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-primary:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .btn-success:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-success:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .btn-info:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-info:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-primary:hover,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-primary:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-success:hover,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-success:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-info:hover,
.sh-internal-page:not(.sh-shopping-cart) .input-group .btn-info:focus-visible {
    border-color: #0d327d !important;
    color: #fff !important;
    background: #0d327d !important;
    box-shadow: 0 11px 26px rgba(13, 50, 125, .24);
}

/* Secundario. */
.sh-internal-page:not(.sh-shopping-cart) .btn-default,
.sh-internal-page:not(.sh-shopping-cart) .btn-secondary,
.sh-internal-page:not(.sh-shopping-cart) .btn-light,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-primary,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-secondary {
    border: 1px solid #cbd7e6 !important;
    color: #34455f !important;
    background: #fff !important;
}
/* El hover anterior —azul sobre azul muy claro— medía 3.68:1, por debajo del
   mínimo de 4.5:1, y el botón casi desaparecía. Se invierte a navy sólido, que
   además es el gesto de énfasis del sitio público. */
.sh-internal-page:not(.sh-shopping-cart) .btn-default:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-default:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .btn-secondary:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-secondary:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .btn-light:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-light:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-primary:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-primary:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-secondary:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-secondary:focus-visible {
    border-color: var(--sh-navy) !important;
    color: #fff !important;
    background: var(--sh-navy) !important;
}

/* Los paneles del dashboard piden su botón con `btn btn-default bg-color-<color>
   btn-xs`: `bg-color-red` pinta el fondo con el rojo de error de Nexus y
   `btn-xs` es una clase de Bootstrap 3 que en Bootstrap 4 no existe, así que el
   botón quedaba a tamaño completo dentro de la cabecera. Se unifica el color con
   el resto de los secundarios y se le devuelve el tamaño reducido. */
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn-xs,
.sh-internal-page:not(.sh-shopping-cart) .btn-xs {
    min-height: var(--sh-target-min);
    padding: 0 12px;
    border-radius: 8px !important;
    font-size: 11.5px;
}
.sh-internal-page:not(.sh-shopping-cart) .btn[class*="bg-color-"] {
    border-color: #cbd7e6 !important;
    color: #34455f !important;
    background: #fff !important;
}
.sh-internal-page:not(.sh-shopping-cart) .btn[class*="bg-color-"]:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn[class*="bg-color-"]:focus-visible {
    border-color: var(--sh-navy) !important;
    color: #fff !important;
    background: var(--sh-navy) !important;
}
/* En los paneles de inicio, rojo y azul se usaban indistintamente para acciones
   positivas (pagar, adherir, abrir ticket). Se leen como primarias; los demás
   colores heredados quedan como consultas secundarias. */
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn.bg-color-red,
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn.bg-color-blue {
    border-color: #123f9c !important;
    color: #fff !important;
    background: #123f9c !important;
}
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn.bg-color-red:hover,
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn.bg-color-red:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn.bg-color-blue:hover,
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn.bg-color-blue:focus-visible {
    border-color: #0d327d !important;
    color: #fff !important;
    background: #0d327d !important;
}
/* El botón del panel lateral llega por setFooterHtml() como .btn-success y
   ocupa el ancho de la columna. En una tarjeta de contenido, en cambio, un
   botón a todo el ancho pesa de más. */
.sh-internal-page:not(.sh-shopping-cart) .sidebar .card-footer .btn { width: 100%; justify-content: center; }
.sh-internal-page:not(.sh-shopping-cart) .btn-danger,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-danger {
    border-color: #c72f47 !important;
    color: #fff !important;
    background: #c72f47 !important;
}
.sh-internal-page:not(.sh-shopping-cart) .btn-danger:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-danger:focus-visible,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-danger:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-outline-danger:focus-visible {
    border-color: #9f2035 !important;
    color: #fff !important;
    background: #9f2035 !important;
}
.sh-internal-page:not(.sh-shopping-cart) .btn-link {
    min-height: 34px;
    padding-inline: 6px;
    color: var(--sh-blue-on-light);
    background: transparent;
    box-shadow: none;
}
.sh-internal-page:not(.sh-shopping-cart) .btn-link:hover,
.sh-internal-page:not(.sh-shopping-cart) .btn-link:focus-visible {
    color: #245fd8;
    background: #edf4ff;
    transform: none;
}
.sh-internal-page:not(.sh-shopping-cart) .btn.disabled,
.sh-internal-page:not(.sh-shopping-cart) .btn:disabled {
    border-color: #dfe6ef !important;
    color: #718096 !important;
    background: #edf1f6 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}
.sh-internal-page:not(.sh-shopping-cart) .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sh-internal-page:not(.sh-shopping-cart) .btn-group > .btn {
    margin: 0 !important;
    border-radius: 8px !important;
}
.sh-internal-page:not(.sh-shopping-cart) .card-header .btn,
.sh-internal-page:not(.sh-shopping-cart) .table .btn {
    max-width: 100%;
}
.sh-internal-page:not(.sh-shopping-cart) .btn:focus-visible {
    outline: 3px solid rgba(57, 120, 255, .35);
    outline-offset: 2px;
}

/* Tablas fuera de .table-list, que ya tiene su propio tratamiento. */
.sh-internal-page:not(.sh-shopping-cart) .table:not(.table-list) { margin-bottom: 0; }
.sh-internal-page:not(.sh-shopping-cart) .table:not(.table-list) thead th {
    padding: 13px 14px;
    border-bottom: 1px solid #dfe7f1 !important;
    border-top: 0;
    color: #64738a;
    background: #f8faff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.sh-internal-page:not(.sh-shopping-cart) .table:not(.table-list) td {
    padding: 13px 14px;
    vertical-align: middle;
    border-color: #eaf0f7;
    font-size: 13px;
}
.sh-internal-page:not(.sh-shopping-cart) .table-hover tbody tr:hover { background: #f6f9ff; }
.sh-internal-page:not(.sh-shopping-cart) .total-row td { color: var(--sh-navy); font-weight: 800; }

/* Affiliate dashboard and media kit. The withdrawal controls are separate
   actions, so they need their own rhythm instead of sharing the table's edge. */
body:has(#tableAffiliatesList) .primary-content > .row > .offset-md-2 {
    max-width: 100%;
    margin-left: 0;
    flex: 0 0 100%;
}
body:has(#tableAffiliatesList) .primary-content > .row > .offset-md-2 .table { margin-bottom: 0; }
body:has(#tableAffiliatesList) .primary-content > .text-center { margin: 18px 0 10px; }
body:has(#tableAffiliatesList) .primary-content > .text-center + .text-muted {
    max-width: 760px;
    margin: 0 auto 34px;
    line-height: 1.6;
}
.sh-affiliate-kit { margin-top: var(--sh-space-4); text-align: left; }
.sh-affiliate-kit__header { max-width: 760px; margin-bottom: 26px; }
.sh-affiliate-kit__header h2 { margin: 9px 0 10px; color: var(--sh-navy); font: 700 28px/1.15 var(--sh-font-heading); }
.sh-affiliate-kit__header p { margin: 0; color: var(--sh-muted); line-height: 1.65; }
.sh-affiliate-kit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sh-affiliate-kit__card { overflow: hidden; border: 1px solid #d8e2ee; border-radius: 15px; background: #fff; box-shadow: var(--sh-shadow-card); }
.sh-affiliate-kit__preview { display: grid; min-height: 220px; padding: 22px; place-items: center; background: #eef4ff; }
.sh-affiliate-kit__preview img { display: block; max-width: 100%; height: auto; border-radius: 7px; box-shadow: 0 12px 28px rgba(6, 19, 38, .2); }
.sh-affiliate-kit__preview--vertical { max-height: 340px; overflow: hidden; align-items: start; }
.sh-affiliate-kit__preview--vertical img { width: 135px; }
.sh-affiliate-kit__body { padding: 20px; }
.sh-affiliate-kit__body h3 { margin: 0; color: var(--sh-navy); font: 700 17px/1.3 var(--sh-font-heading); }
.sh-affiliate-kit__meta { margin: 4px 0 12px; color: var(--sh-muted); font-size: 12px; }
.sh-affiliate-kit__downloads { display: flex; margin-bottom: 18px; gap: 8px; }
.sh-affiliate-kit__downloads a { display: inline-flex; min-height: 36px; padding: 0 13px; align-items: center; border: 1px solid #c3d6f7; border-radius: 7px; color: var(--sh-blue-on-light); background: #f7faff; font-size: 12px; font-weight: 800; text-decoration: none; }
.sh-affiliate-kit__downloads a:hover,
.sh-affiliate-kit__downloads a:focus-visible { border-color: var(--sh-blue); background: #eef4ff; }
.sh-affiliate-kit__body label { display: block; margin-bottom: 7px; color: #455a77; font-size: 12px; font-weight: 700; }
.sh-affiliate-kit__body textarea { width: 100%; min-height: 112px; padding: 11px; resize: vertical; border: 1px solid #cbd7e6; border-radius: 8px; color: #30425c; background: #f8faff; font: 11px/1.45 monospace; }
.sh-affiliate-kit__copy { width: 100%; margin-top: 10px; }

@media (max-width: 991px) {
    .sh-affiliate-kit__grid { grid-template-columns: 1fr; }
    .sh-affiliate-kit__preview { min-height: 190px; }
}

/* Alertas: barra lateral de color en lugar del bloque saturado de Bootstrap. */
.sh-internal-page:not(.sh-shopping-cart) .alert {
    padding: 15px 18px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 10px;
    font-size: 13px;
}
.sh-internal-page:not(.sh-shopping-cart) .alert-success { border-color: #b6e6d0; border-left-color: #159c68; color: #0d5f41; background: #edfaf4; }
.sh-internal-page:not(.sh-shopping-cart) .alert-info    { border-color: #b9dcef; border-left-color: #1586b8; color: #0d5273; background: #ecf7fd; }
.sh-internal-page:not(.sh-shopping-cart) .alert-warning { border-color: #f2ddb0; border-left-color: #c98a15; color: #7a5307; background: #fdf7ea; }
.sh-internal-page:not(.sh-shopping-cart) .alert-danger  { border-color: #f3c3cb; border-left-color: #d1344b; color: #86182b; background: #fdeef1; }

/* Formularios */
.sh-internal-page:not(.sh-shopping-cart) .form-group { margin-bottom: 18px; }
.sh-internal-page:not(.sh-shopping-cart) .col-form-label,
.sh-internal-page:not(.sh-shopping-cart) .control-label,
.sh-internal-page:not(.sh-shopping-cart) label {
    color: #34455f;
    font-size: 12px;
    font-weight: 700;
}
.sh-internal-page:not(.sh-shopping-cart) .form-control:focus,
.sh-internal-page:not(.sh-shopping-cart) .custom-select:focus {
    border-color: var(--sh-blue);
    box-shadow: 0 0 0 3px rgba(57, 120, 255, .14);
}
.sh-internal-page:not(.sh-shopping-cart) .input-group-text {
    border-color: #cbd7e6;
    color: #64738a;
    background: #f4f7fb;
}
.sh-internal-page:not(.sh-shopping-cart) .form-check-input { margin-top: .3rem; }
.sh-internal-page:not(.sh-shopping-cart) .form-check-label { font-weight: 400; }

/* Pestañas */
.sh-internal-page:not(.sh-shopping-cart) .nav-tabs { border-bottom: 1px solid #dfe7f1; gap: 4px; }
.sh-internal-page:not(.sh-shopping-cart) .nav-tabs .nav-link {
    padding: 11px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #64738a;
    font-size: 13px;
    font-weight: 700;
}
.sh-internal-page:not(.sh-shopping-cart) .nav-tabs .nav-link:hover { color: var(--sh-blue-on-light); background: transparent; }
.sh-internal-page:not(.sh-shopping-cart) .nav-tabs .nav-link.active {
    border-bottom-color: var(--sh-blue-on-light);
    color: var(--sh-navy);
    background: transparent;
}

/* Estados y etiquetas */
.sh-internal-page:not(.sh-shopping-cart) .badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}
.sh-internal-page:not(.sh-shopping-cart) .badge-success,
.sh-internal-page:not(.sh-shopping-cart) .label-active { color: #0d5f41; background: #d7f2e6; }
.sh-internal-page:not(.sh-shopping-cart) .badge-danger { color: #86182b; background: #fbdde3; }
.sh-internal-page:not(.sh-shopping-cart) .badge-warning { color: #7a5307; background: #fbeed2; }
.sh-internal-page:not(.sh-shopping-cart) .badge-info { color: #0d5273; background: #d9eefa; }

/* Estados de servicios, facturas, dominios y tickets.
   Nexus los pinta como etiquetas de Bootstrap 3 —rectángulo saturado, texto
   blanco, `display: inline`— y además apoya varios de ellos en variables que su
   propio `:root` no define: `.status-unpaid` usa `var(--error)` y
   `.status-suspended` usa `var(--yellow-300)`, ninguna de las dos declarada. La
   declaración queda inválida, el fondo vuelve a transparente y, con el texto en
   blanco que impone `.label`, la etiqueta desaparece: eso es lo que dejaba en
   blanco la columna Estado de los tickets y la factura «Sin pagar».

   El color base se fija primero para que cualquier estado —incluidos los que no
   estén enumerados abajo— sea legible, y después se afinan los conocidos. */
.sh-internal-page:not(.sh-shopping-cart) .label.status,
.sh-internal-page:not(.sh-shopping-cart) span.label {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    color: #4a5668;
    background-color: #e7ecf3;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .02em;
}
/* `status-custom` trae el color en un atributo style, que gana por ser inline;
   ahí el texto se mantiene en blanco como espera Nexus. */
.sh-internal-page:not(.sh-shopping-cart) .label.status-custom { color: #fff; }
.sh-internal-page:not(.sh-shopping-cart) .label.status-active,
.sh-internal-page:not(.sh-shopping-cart) .label.status-paid { color: #0d5f41; background-color: #d7f2e6; }
.sh-internal-page:not(.sh-shopping-cart) .label.status-pending,
.sh-internal-page:not(.sh-shopping-cart) .label.status-suspended { color: #7a5307; background-color: #fbeed2; }
.sh-internal-page:not(.sh-shopping-cart) .label.status-unpaid,
.sh-internal-page:not(.sh-shopping-cart) .label.status-overdue { color: #86182b; background-color: #fbdde3; }
.sh-internal-page:not(.sh-shopping-cart) .label.status-cancelled,
.sh-internal-page:not(.sh-shopping-cart) .label.status-terminated,
.sh-internal-page:not(.sh-shopping-cart) .label.status-closed,
.sh-internal-page:not(.sh-shopping-cart) .label.status-expired { color: #4a5668; background-color: #e7ecf3; }

/* Listas y paginación */
.sh-internal-page:not(.sh-shopping-cart) .list-group-item { border-color: #eaf0f7; font-size: 13px; }
.sh-internal-page:not(.sh-shopping-cart) .pagination { gap: 5px; }
.sh-internal-page:not(.sh-shopping-cart) .page-link {
    min-width: 38px;
    border: 1px solid #dfe7f1;
    border-radius: 8px !important;
    color: #4d5d74;
    text-align: center;
}
.sh-internal-page:not(.sh-shopping-cart) .page-item.active .page-link {
    border-color: var(--sh-navy);
    color: #fff;
    background: var(--sh-navy);
}

/* Modales */
.sh-internal-page:not(.sh-shopping-cart) .modal-content { border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(8, 27, 54, .25); }
.sh-internal-page:not(.sh-shopping-cart) .modal-header { padding: 18px 22px; border-bottom: 1px solid #e5ebf3; }
.sh-internal-page:not(.sh-shopping-cart) .modal-footer { padding: 15px 22px; border-top: 1px solid #e5ebf3; background: #fbfdff; }

/* Compatibilidad con marcado de Bootstrap 3.
   El hook de detalles de producto genera su HTML con `col-xs-*` y con paneles
   (`panel`, `panel-heading`, `panel-body`). Nexus es Bootstrap 4 y ninguna de
   esas clases existe: las columnas no tienen ancho —todo queda apilado a ancho
   completo— y los paneles se ven sin recuadro. Se traducen aquí en lugar de
   reescribir las 900 líneas del hook, de modo que el marcado heredado siga
   funcionando aunque el hook cambie. */
.sh-internal-page:not(.sh-shopping-cart) .col-xs-1,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-2,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-3,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-4,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-5,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-6,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-7,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-8,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-9,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-10,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-11,
.sh-internal-page:not(.sh-shopping-cart) .col-xs-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
.sh-internal-page:not(.sh-shopping-cart) .col-xs-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-3  { flex: 0 0 25%;        max-width: 25%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-6  { flex: 0 0 50%;        max-width: 50%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-9  { flex: 0 0 75%;        max-width: 75%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.sh-internal-page:not(.sh-shopping-cart) .col-xs-12 { flex: 0 0 100%;       max-width: 100%; }

.sh-internal-page:not(.sh-shopping-cart) .panel:not(.panel-sidebar) {
    margin-bottom: 22px;
    border: 1px solid #d8e2ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(18, 44, 78, .06);
}
.sh-internal-page:not(.sh-shopping-cart) .panel:not(.panel-sidebar) > .panel-heading {
    padding: 16px 20px;
    border-bottom: 1px solid #e5ebf3;
    border-radius: 14px 14px 0 0;
    background: #f8faff;
}
.sh-internal-page:not(.sh-shopping-cart) .panel:not(.panel-sidebar) > .panel-heading .panel-title {
    margin: 0;
    color: var(--sh-navy);
    font: 700 14px/1.35 var(--sh-font-heading);
}
.sh-internal-page:not(.sh-shopping-cart) .panel:not(.panel-sidebar) > .panel-body { padding: 20px; }
/* Pares etiqueta/valor del detalle de servicio. */
.sh-internal-page:not(.sh-shopping-cart) .panel-body > .row { margin-bottom: 9px; font-size: 13px; }
.sh-internal-page:not(.sh-shopping-cart) .panel-body > .row:last-child { margin-bottom: 0; }

.sh-internal-page #footer { padding: 44px 0; color: #8595ad; background: #040c1b; }
.sh-internal-page #footer .nav { gap: 4px 12px; }
.sh-internal-page #footer .nav-link { display: inline-flex; min-height: var(--sh-target-min); padding: 0 6px; align-items: center; color: #aebbd0; }
.sh-internal-page #footer .btn { min-height: var(--sh-target-min); border-radius: 8px; font-size: 12px; font-weight: 700; }
.sh-internal-page #footer .copyright { color: #b9c4d4; }

@media (max-width: 1199px) {
    .sh-internal-page .main-navbar-wrapper .navbar-collapse { padding: 12px 0 18px; }
    .sh-internal-page .main-navbar-wrapper #nav > li > a,
    .sh-internal-page .main-navbar-wrapper .navbar-nav > li > a { min-height: 44px; padding-inline: 12px; }
}

/* The nav needs more room than the body copy: capping it at the 1240px content
   width is what forced the Spanish labels onto a second line at every desktop
   size, no matter how wide the monitor was. Desktop only — the narrow
   breakpoints below set their own container width. */
@media (min-width: 1081px) {
    .sh-header .sh-container { width: min(1400px, calc(100% - 48px)); }
}

/* Between the widened layout and the hamburger the Spanish labels still do not
   fit on one line, so the utility actions collapse to icons and give the menu
   back its horizontal space. The labels stay in the DOM for assistive tech. */
@media (min-width: 1081px) and (max-width: 1447px) {
    .sh-nav { gap: 18px; }
    .sh-nav-actions { gap: 12px; }
    .sh-menu-trigger { padding: 0 9px; }
    .sh-brand img { width: 195px; }
    .sh-action-icon { display: block; }

    .sh-currency-switch select { min-width: 0; padding: 0 22px 0 8px; }
}

@media (max-width: 1080px) {
    .sh-menu-button { display: block; }
    .sh-menu { display: none; position: absolute; top: 72px; right: 24px; left: 24px; max-height: calc(100vh - 90px); padding: 10px; overflow-y: auto; align-items: stretch; flex-direction: column; gap: 0; border: 1px solid var(--sh-control-border-dark); border-radius: 14px; background: #0b1a35; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
    .sh-menu.is-open { display: flex; }
    .sh-menu-item { display: block; }
    .sh-menu-trigger { width: 100%; min-height: 48px; padding: 0 12px; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); }
    .sh-submenu, .sh-submenu-compact, .sh-submenu-wide, .sh-submenu-right, .sh-submenu-infrastructure { display: none; position: static; width: auto; padding: 8px; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; background: rgba(255,255,255,.025); box-shadow: none; transform: none; }
    .sh-menu-item:hover > .sh-submenu { display: none; }
    .sh-menu-item:hover > .sh-submenu.is-open, .sh-submenu.is-open { display: grid; }
    .sh-submenu-intro { display: none; }
    .sh-submenu-links, .sh-submenu-compact .sh-submenu-links, .sh-submenu-groups, .sh-submenu-groups-two { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0; }
    .sh-submenu-groups section { padding: 8px; }
    .sh-submenu-links a, .sh-submenu-groups a { min-height: 56px; padding: 9px 12px 9px 50px; }
    /* The rule above turns submenus static so they stack inside the burger
       drawer. The utility bar is not in that drawer — its dropdowns have to
       stay floating, or they would push the whole page down when opened. */
    /* The topbar panels anchor to the BAR, not to the trigger that opened them.
       Anchored to the item (position: relative) with a fixed 320px width, a
       right-aligned trigger pushed the panel off the left edge of the viewport:
       at 390px the Clientes panel started at -149px and Contáctenos at -51px.
       Spanning the container instead can never overflow, at any width, and it
       reads as a proper mobile panel rather than a clipped desktop dropdown. */
    .sh-topbar-inner { position: relative; }
    .sh-topbar-item { position: static; }
    .sh-topbar .sh-submenu { position: absolute; top: 100%; right: 0; left: 0; width: auto; padding: 14px; border: 1px solid rgba(122,153,204,.22); border-top: 3px solid var(--sh-cyan); border-radius: 0 0 14px 14px; background: #0b1a35; box-shadow: 0 30px 70px rgba(0,0,0,.42); }
    .sh-topbar .sh-submenu-links a { padding: 11px 13px 11px 52px; }
    .sh-topbar-trigger, .sh-topbar-link { padding: 0 8px; font-size: 10.5px; }
    .sh-topbar-icon { display: none; }
    .sh-mobile-languages { display: flex; padding: 10px 12px 4px; gap: 8px; }
    .sh-mobile-languages a { min-width: 0; padding: 8px 4px; flex: 1 1 0; border: 1px solid var(--sh-control-border-dark); border-radius: 8px; color: #aebbd0; font-size: 12px; font-weight: 800; text-align: center; text-decoration: none; }
    .sh-mobile-languages a[aria-current="true"] { border-color: rgba(53,216,255,.35); color: var(--sh-cyan); }
    /* The burger held margin-left:auto and pushed the actions off-screen. Let
       the actions claim the free space and keep the burger last on the right. */
    .sh-nav-actions { order: 2; margin-left: auto; }
    .sh-menu-button { order: 3; margin-left: 0; }
    .sh-hero-grid { grid-template-columns: minmax(0, 1fr); }.sh-console { width: 100%; max-width: 650px; }.sh-tech-strip { flex-wrap: wrap; justify-content: flex-start; padding: 30px 0; }
    .sh-live-plan-grid, .sh-live-plan-grid.sh-plan-count-4, .sh-use-case-grid { grid-template-columns: 1fr 1fr; }
    .sh-action-layout { grid-template-columns: 1fr; gap: 35px; }
    .sh-control-grid { grid-template-columns: 1fr; }.sh-dashboard { max-width: 760px; }
    .sh-decision-grid { grid-template-columns: 1fr 1fr; }.sh-assurance-grid, .sh-landing-hero-grid { grid-template-columns: 1fr; gap: 45px; }
    .sh-value-grid { grid-template-columns: 1fr 1fr; }.sh-migration-grid, .sh-faq-layout { grid-template-columns: 1fr; gap: 35px; }
    .sh-footer-top { align-items: flex-start; flex-direction: column; }.sh-footer-sales { width: 100%; min-width: 0; }.sh-footer-grid { grid-template-columns: 1fr 1fr; }.sh-footer-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .sh-container { width: min(100% - 28px, 1240px); }.sh-nav { min-height: 72px; gap: 7px; }.sh-brand img { width: clamp(150px, 43vw, 180px); }
    /* Brand + currency + language + burger measured ~350px against a 332px
       container at 360px wide, so the row overflowed and pushed the burger
       off-screen. Everything here exists to make that row actually fit. */
    .sh-brand { min-width: 0; flex-shrink: 1; }
    .sh-brand img { max-width: 100%; }
    .sh-nav-actions { gap: 8px; flex-shrink: 0; }
    .sh-menu-button { flex-shrink: 0; }
    .sh-currency-switch select { min-width: 0; padding: 0 18px 0 6px; }
    .sh-language-switch { flex-shrink: 0; gap: 3px; }
    .sh-cart-link { width: var(--sh-target-min); height: var(--sh-target-min); }
    /* Mobile headings previously jumped to a fixed 42px while the available
       line length kept shrinking. A bounded fluid scale preserves hierarchy
       without turning the title into most of the first viewport. */
    .sh-hero { padding-top: clamp(44px, 12vw, 56px); }
    .sh-availability { max-width: 100%; flex-wrap: wrap; gap: 7px; font-size: clamp(8px, 2.25vw, 9px); line-height: 1.5; letter-spacing: .11em; }
    .sh-hero h1 { margin: 20px 0; overflow-wrap: normal; font-size: clamp(2.125rem, 8.5vw, 2.25rem); line-height: 1.07; letter-spacing: -.045em; }
    .sh-hero h1 span { display: block; }
    .sh-hero-copy > p { font-size: .9375rem; line-height: 1.65; }
    .sh-hero .sh-hero-actions { margin-top: 28px; align-items: stretch; flex-direction: column; }
    .sh-hero .sh-button { width: 100%; }
    .sh-proof { margin-top: 44px; grid-template-columns: 1fr; }
    .sh-proof div { padding-top: 16px; }
    .sh-console-body { padding: 22px; }.sh-tech-strip { margin-top: 60px; }
    .sh-live-plan-grid .sh-live-plan-card.is-featured { margin-top: 14px; }
    .sh-solutions, .sh-live-plans, .sh-landing-plans, .sh-control, .sh-final-cta, .sh-decision, .sh-assurance, .sh-landing-section, .sh-action-section { padding: 56px 0; }.sh-section-heading { grid-template-columns: 1fr; gap: 16px; }.sh-solution-grid, .sh-live-plan-grid, .sh-live-plan-grid.sh-plan-count-4, .sh-decision-grid, .sh-value-grid, .sh-use-case-grid { grid-template-columns: 1fr; }.sh-solution-card { min-height: 450px; padding: 26px; }
    .sh-integrated-form { padding: 24px 20px; }.sh-form-grid { grid-template-columns: 1fr; }
    .sh-landing-hero { padding: clamp(42px, 12vw, 52px) 0; }.sh-landing-hero h1 { max-width: 100%; font-size: clamp(1.875rem, 8.5vw, 2.25rem); line-height: 1.08; overflow-wrap: normal; }.sh-landing-summary { min-width: 0; padding: 24px 20px; overflow-wrap: anywhere; }.sh-landing-summary > strong { font-size: 21px; }
    .sh-control-grid { gap: 45px; }.sh-dashboard { grid-template-columns: 52px 1fr; }.sh-dashboard-nav { min-height: 430px; padding: 11px; }.sh-dashboard-content { padding: 24px 18px; }.sh-dashboard-cards { grid-template-columns: 1fr; }.sh-chart { display: none; }
    .sh-domain-grid { grid-template-columns: 1fr; gap: 30px; }.sh-domain form { align-items: stretch; flex-direction: column; }.sh-domain button { min-height: 50px; }
    .sh-footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 22px; }.sh-footer-legal a, .sh-footer-legal button { min-height: var(--sh-target-min); }.sh-footer-trust { grid-template-columns: 1fr; }.sh-footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; }.sh-footer-legal { gap: 4px 12px; }
    .sh-auth { margin: 24px 14px; grid-template-columns: 1fr; }.sh-auth-intro, .sh-auth-card { padding: 30px 24px; }.sh-auth-intro h1 { font-size: 34px; }
    .providerPreLinking[data-link-context="login"] { margin-top: -8px; margin-bottom: 40px; }
    .providerPreLinking[data-link-context="login"] .social-signin-btns,
    .providerPreLinking[data-link-context="clientsecurity"] .social-signin-btns { grid-template-columns: minmax(0, 1fr); }
    .sh-internal-page:not(.sh-shopping-cart) .card-header .btn,
    .sh-internal-page:not(.sh-shopping-cart) .card-footer .btn,
    .sh-internal-page:not(.sh-shopping-cart) .form-actions .btn,
    .sh-internal-page:not(.sh-shopping-cart) .btn-block { width: 100%; }
    .sh-internal-page:not(.sh-shopping-cart) .btn-group { display: flex; width: 100%; }
    .sh-internal-page:not(.sh-shopping-cart) .btn-group > .btn { min-width: 0; flex: 1 1 auto; }
    .sh-internal-page:not(.sh-shopping-cart) .btn-sm,
    .sh-internal-page:not(.sh-shopping-cart) .btn-xs { min-height: var(--sh-target-min); }
}
@media (max-width: 360px) {
    /* Preserve the wordmark on the narrowest supported screens. Cart and menu
       keep their 44px targets; only the three-letter currency control and the
       inter-control gaps become denser. */
    .sh-nav { gap: 5px; }
    .sh-nav-actions { gap: 5px; }
    .sh-currency-switch select { width: 50px; padding-right: 16px; padding-left: 5px; }
}
@media (max-width: 480px) {
    .sh-header .sh-language-switch { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid Highlight !important;
    }
    :where(button, input, select, textarea, [role="tab"], .sh-cart-link, .sh-menu-button) {
        border: 1px solid ButtonText !important;
        forced-color-adjust: auto;
    }
    [aria-current="true"], [aria-selected="true"], [aria-expanded="true"] {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
    .sh-live-dot, .sh-availability i, .sh-status i {
        background: CanvasText;
        box-shadow: none;
    }
}
.sh-service-access {
    margin: 0 0 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 14px;
    color: var(--sh-navy, #071226);
    background: #fff;
}

.sh-service-access h3 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.sh-service-access__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1.25rem;
    margin: 0;
}

.sh-service-access__list > div {
    min-width: 0;
}

.sh-service-access__list dt {
    margin-bottom: .2rem;
    color: #64748b;
    font-size: .8125rem;
    font-weight: 700;
}

.sh-service-access__list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.sh-service-access__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-top: 1rem;
}

.sh-service-access__security {
    margin: 1rem 0 0;
    color: #64748b;
    font-size: .8125rem;
}

@media (max-width: 575.98px) {
    .sh-service-access__list {
        grid-template-columns: 1fr;
    }
}
.sh-store-index {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid #dfe6ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(18, 44, 78, .08);
}

.sh-store-index__heading {
    max-width: 720px;
    margin-bottom: 32px;
}

.sh-store-index__eyebrow {
    margin: 0 0 8px;
    color: #3978ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sh-store-index__heading h1 {
    margin: 0 0 12px;
    color: #071226;
    font-size: clamp(1.6rem, 2.9vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.045em;
}

.sh-store-index__heading > p:last-child {
    color: #607089;
    font-size: 1rem;
}

.sh-store-group-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.sh-store-group-card {
    display: flex;
    min-height: 230px;
    padding: 24px;
    flex-direction: column;
    border: 1px solid #dfe6ef;
    border-radius: 15px;
    color: #071226 !important;
    background: linear-gradient(145deg, #fff, #f7faff);
    text-decoration: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sh-store-group-card:hover,
.sh-store-group-card:focus-visible {
    border-color: #3978ff;
    box-shadow: 0 14px 35px rgba(57, 120, 255, .12);
    transform: translateY(-2px);
}

.sh-store-group-card__count {
    align-self: flex-start;
    margin-bottom: 28px;
    padding: 5px 9px;
    border-radius: 99px;
    color: #245fd9;
    background: #eaf1ff;
    font-size: .7rem;
    font-weight: 800;
}

.sh-store-group-card h2 {
    margin: 0 0 8px;
    color: #071226;
    font-size: 1.2rem;
    font-weight: 800;
}

.sh-store-group-card p {
    margin: 0 0 22px;
    color: #607089;
    font-size: .875rem;
}

.sh-store-group-card strong {
    margin-top: auto;
    color: #3978ff;
    font-size: .82rem;
}

@media (max-width: 900px) {
    .sh-store-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .sh-store-index { width: min(100% - 20px, 1180px); padding: 22px 16px; border-radius: 14px; }
    .sh-store-group-grid { grid-template-columns: 1fr; }
    .sh-store-group-card { min-height: 190px; }
}

/* A product-group page is still catalog discovery. The order-form stylesheet
 * hides sidebars globally to focus cart/checkout; restore the category chooser
 * only on products.tpl, which marks itself with .sh-store-products. */
body.sh-shopping-cart #order-standard_cart.sh-store-products > .row {
    display: flex;
    margin-inline: -12px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

body.sh-shopping-cart #order-standard_cart.sh-store-products .cart-sidebar {
    display: block !important;
    width: 250px !important;
    max-width: 250px !important;
    padding-inline: 12px !important;
    flex: 0 0 250px !important;
}

body.sh-shopping-cart #order-standard_cart.sh-store-products .cart-body {
    width: calc(100% - 250px) !important;
    max-width: calc(100% - 250px) !important;
    padding-inline: 12px !important;
    flex: 1 1 auto !important;
}

body.sh-shopping-cart #order-standard_cart.sh-store-products .cart-sidebar .panel {
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(17, 43, 78, .06);
}

body.sh-shopping-cart #order-standard_cart.sh-store-products .cart-sidebar .list-group-item {
    display: flex;
    min-height: var(--sh-target-min);
    padding: 10px 14px;
    align-items: center;
    color: #40536d;
    border-color: #e8eef5;
    font-size: .8125rem;
}

body.sh-shopping-cart #order-standard_cart.sh-store-products .cart-sidebar .list-group-item.active {
    color: #fff;
    border-color: #3978ff;
    background: #3978ff;
}

@media (max-width: 767px) {
    body.sh-shopping-cart #order-standard_cart.sh-store-products > .row {
        display: block;
        margin-inline: 0;
    }

    body.sh-shopping-cart #order-standard_cart.sh-store-products .cart-sidebar {
        display: none !important;
    }

body.sh-shopping-cart #order-standard_cart.sh-store-products .cart-body {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 0 !important;
    }
}

/* Self-service block / unblock panel on the service overview tab. It shares the
 * card treatment of .sh-service-access so both read as one column. */
.sh-service-block {
    margin: 0 0 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 14px;
    color: var(--sh-navy, #071226);
    background: #fff;
}

.sh-service-block h3 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.sh-service-block__state {
    margin: 0 0 .75rem;
    color: #64748b;
    font-size: .875rem;
}

.sh-service-block__warning {
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border-left: 3px solid var(--yellow-300, #f0b429);
    border-radius: 0 8px 8px 0;
    background: #fdf6e3;
    font-size: .875rem;
    line-height: 1.55;
}

.sh-service-block form {
    margin: 0;
}

/* The credit balance is the only figure in the sidebar, so it is centred rather
 * than left-aligned like the surrounding menu labels. */
.sh-credit-amount {
    margin: .35rem 0 0;
    text-align: center;
}

/* Lead line and help-centre link inside the technical details card. */
.sh-service-access__intro {
    margin: -.35rem 0 1rem;
    color: #64748b;
    font-size: .875rem;
}

.sh-service-access__help {
    margin: 1rem 0 0;
    font-size: .875rem;
}

.sh-service-access__list dd br {
    line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Legal documents (/es|en/legal/*)
   Optimised for reading a contract: a measure near 70 characters, clause
   numbers in the margin so they can be scanned and cited, and a table of
   contents that sticks on wide screens.
   --------------------------------------------------------------------------- */
.sh-legal-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    color: #fff;
    background: linear-gradient(135deg, #071226, #102b55);
}

.sh-legal-hero h1 {
    margin: .35rem 0 .75rem;
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -.03em;
}

.sh-legal-lede {
    max-width: 60ch;
    margin: 0;
    color: #b9c7db;
}

/* The page background is navy; without its own surface the clause text rendered
 * dark on dark and the document was unreadable. */
.sh-legal-surface {
    color: var(--sh-ink);
    background: #fff;
}

.sh-legal-body {
    padding: clamp(2rem, 4vw, 3.5rem) 0 4rem;
}

.sh-legal-document h2,
.sh-legal-toc h2,
.sh-legal-clause > span,
.sh-legal-list li,
.sh-legal-table td {
    color: var(--sh-ink);
}

.sh-legal-notice {
    max-width: 72ch;
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--sh-cyan, #35d8ff);
    border-radius: 0 10px 10px 0;
    background: #f1f8ff;
    font-size: .9375rem;
    line-height: 1.6;
}

.sh-legal-toc {
    margin: 0 0 3rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 14px;
    background: #f8fbff;
}

.sh-legal-toc h2 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
}

.sh-legal-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.sh-legal-toc a {
    display: block;
    padding: .3rem 0;
    font-size: .9375rem;
    text-decoration: none;
}

.sh-legal-toc a:hover,
.sh-legal-toc a:focus-visible {
    text-decoration: underline;
}

.sh-legal-document > section {
    margin: 0 0 2.75rem;
    /* Anchored clause links land clear of the sticky header. */
    scroll-margin-top: 5rem;
}

.sh-legal-document h2 {
    display: flex;
    gap: .65rem;
    max-width: 46ch;
    margin: 0 0 1.1rem;
    padding-bottom: .6rem;
    align-items: baseline;
    border-bottom: 1px solid var(--sh-line, #dbe5f1);
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    letter-spacing: -.02em;
}

.sh-legal-section-number {
    color: var(--sh-blue, #3978ff);
    font-variant-numeric: tabular-nums;
}

.sh-legal-clause {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    gap: 0 .75rem;
    max-width: 76ch;
    margin: 0 0 1rem;
    scroll-margin-top: 5rem;
}

.sh-legal-clause > span {
    line-height: 1.68;
}

.sh-legal-clause-number {
    color: #64748b;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-decoration: none;
    /* Sits on the text baseline of the clause it labels. */
    line-height: 1.68;
}

.sh-legal-clause-number:hover,
.sh-legal-clause-number:focus-visible {
    color: var(--sh-blue, #3978ff);
    text-decoration: underline;
}

.sh-legal-list {
    max-width: 72ch;
    margin: -.35rem 0 1.25rem 4.5rem;
    padding: 0;
}

.sh-legal-list li {
    margin-bottom: .4rem;
    line-height: 1.62;
}

/* The two tables left in the documents — the availability credits and the
 * retention periods — have two columns each, so they sit within the reading
 * measure rather than stretching across the page. */
.sh-legal-table-wrap {
    max-width: min(100%, 40rem);
    margin: 0 0 1.5rem 4.5rem;
    overflow-x: auto;
}

.sh-legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.sh-legal-table th,
.sh-legal-table td {
    padding: .6rem .9rem;
    border: 1px solid var(--sh-line, #dbe5f1);
    text-align: left;
}

.sh-legal-table th {
    background: #f2f7fd;
    font-weight: 700;
}

.sh-legal-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sh-line, #dbe5f1);
    color: #64748b;
    font-size: .875rem;
}

.sh-legal-related {
    display: flex;
    gap: .6rem;
    margin: .5rem 0 0;
    flex-wrap: wrap;
}

.sh-legal-related a {
    display: inline-flex;
    min-height: var(--sh-target-min);
    align-items: center;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .sh-legal-clause {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .sh-legal-list,
    .sh-legal-table-wrap {
        margin-left: 0;
    }
}

@media print {
    .sh-header, .sh-footer, .sh-legal-toc { display: none !important; }
    .sh-legal-hero { padding: 0 0 1rem; color: #000; background: none; }
    .sh-legal-hero h1 { color: #000; }
    .sh-legal-document > section { break-inside: auto; }
    .sh-legal-clause { break-inside: avoid; }
}

/* Citations to the other contract documents. They are the only route to the
 * domain agreement, which the footer does not list, so they have to read as
 * links rather than as running text. */
.sh-legal-link {
    color: var(--sh-blue, #3978ff);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.sh-legal-link:hover,
.sh-legal-link:focus-visible {
    color: var(--sh-navy, #071226);
}

/* Justified body text, the usual setting for a contract. Hyphenation goes with
 * it: justifying without breaking words opens rivers of whitespace between the
 * words, and the clause column is narrow enough for that to show. The document
 * carries lang="es" or lang="en", so the browser hyphenates per language.
 * Headings, the table of contents and table cells stay ragged-right. */
.sh-legal-clause > span,
.sh-legal-list li,
.sh-legal-document p,
.sh-legal-notice {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* A URL cannot be hyphenated and does not shrink, so a clause that is mostly a
 * citation would stretch its remaining spaces across the line. */
.sh-legal-clause > span:has(.sh-legal-link) {
    text-align: left;
}

/* Wide panels anchor to the navigation bar instead of their trigger and retain
 * a readable maximum width. This prevents oversized empty surfaces on large
 * displays while keeping every column inside the available viewport. */
@media (min-width: 1081px) {
    .sh-nav {
        position: relative;
    }

    .sh-menu-item-wide {
        position: static;
    }

    .sh-submenu-wide {
        left: 50%;
        right: auto;
        width: min(1120px, 100%);
        transform: translateX(-50%);
    }
}

/* ---------------------------------------------------------------------------
   Reseñas y página de partner
   --------------------------------------------------------------------------- */
.sh-testimonials-hero,
.sh-partner-hero {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    color: #fff;
    background: linear-gradient(135deg, #071226, #102b55);
}

.sh-testimonials-hero h1,
.sh-partner-hero h1 {
    margin: .35rem 0 .75rem;
    font-size: clamp(1.9rem, 4vw, 3rem);
    letter-spacing: -.03em;
}

.sh-testimonials-lede,
.sh-partner-lede {
    max-width: 62ch;
    margin: 0;
    color: #b9c7db;
}

.sh-rating-summary {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.sh-rating-score {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.sh-rating-score strong {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
}

.sh-rating-stars {
    color: #f5b60a;
    letter-spacing: .08em;
}

.sh-review-stars {
    color: #765000;
    font-size: .8rem;
    letter-spacing: .08em;
}

.sh-rating-meta {
    margin: 0;
    color: #b9c7db;
    font-size: .9375rem;
}

/* La aclaración de cuántas se publican va junto al total, no escondida: el
 * promedio corresponde a la ficha completa, no a la selección mostrada. */
.sh-rating-note {
    display: block;
    margin-top: .2rem;
    color: #8fa5c2;
    font-size: .8125rem;
}

.sh-testimonials-body,
.sh-partner-body {
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
    color: var(--sh-ink);
    background: #fff;
}

.sh-keyword-cloud {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 16px;
    background: #f8fbff;
}

.sh-keyword-cloud h2 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
}

.sh-keyword-cloud ul {
    display: flex;
    gap: .5rem 1.1rem;
    margin: 0;
    padding: 0;
    align-items: baseline;
    flex-wrap: wrap;
    list-style: none;
}

.sh-keyword-cloud li {
    color: var(--sh-blue, #3978ff);
    font-weight: 700;
    line-height: 1.3;
}

.sh-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.sh-review-grid .sh-reveal:nth-child(2) { transition-delay: .06s; }
.sh-review-grid .sh-reveal:nth-child(3) { transition-delay: .12s; }
.sh-review-grid .sh-reveal:nth-child(4) { transition-delay: .18s; }

.sh-review-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sh-review-card {
    display: flex;
    margin: 0;
    padding: 22px;
    flex-direction: column;
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(17, 43, 78, .05);
}

.sh-review-card header {
    display: flex;
    gap: .75rem;
    margin-bottom: .9rem;
    align-items: center;
}

.sh-review-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    color: #245fd9;
    background: #eaf1ff;
    font-size: .8125rem;
    font-weight: 800;
}

.sh-review-card header b {
    display: block;
    font-size: .9375rem;
}

.sh-review-card blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.sh-review-card blockquote p {
    margin: 0;
    color: #40536d;
    font-size: .9375rem;
    line-height: 1.65;
}

.sh-review-card figcaption {
    margin-top: .9rem;
    color: #8a99ad;
    font-size: .8125rem;
}

.sh-review-empty {
    padding: 2rem;
    border: 1px dashed var(--sh-line, #dbe5f1);
    border-radius: 14px;
    color: #64748b;
    text-align: center;
}

.sh-review-cta,
.sh-partner-cta {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 18px;
    background: #f8fbff;
    text-align: center;
}

.sh-review-cta h2,
.sh-partner-cta h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
}

.sh-review-cta p,
.sh-partner-cta p {
    max-width: 58ch;
    margin: 0 auto 1.25rem;
    color: #64748b;
}

/* Bloque de reseñas dentro de las landings de producto. */
.sh-landing-reviews {
    background: var(--sh-paper, #f4f7fb);
}

.sh-landing-reviews-head {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.75rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sh-landing-reviews-head h2 {
    margin: 0;
    font: 700 clamp(1.3rem, 2.2vw, 1.75rem)/1.2 var(--sh-font-heading);
    letter-spacing: -.03em;
}

.sh-landing-reviews-head p {
    margin: 0;
    color: #64748b;
}

.sh-landing-reviews-head strong {
    color: var(--sh-ink);
    font-size: 1.35rem;
}

.sh-landing-reviews-head span {
    display: block;
    font-size: .875rem;
}

.sh-landing-reviews-link,
.sh-partner-reviews-link {
    margin: 1.5rem 0 0;
}

/* Página de partner */
.sh-partner-intro {
    max-width: 72ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sh-partner-intro h2,
.sh-partner-points h2,
.sh-partner-badges h2,
.sh-partner-reviews h2 {
    margin: 0 0 1rem;
    font: 700 clamp(1.25rem, 2vw, 1.6rem)/1.25 var(--sh-font-heading);
    letter-spacing: -.02em;
}

.sh-partner-intro p {
    color: #40536d;
    line-height: 1.7;
}

.sh-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sh-partner-grid .sh-reveal:nth-child(2) { transition-delay: .08s; }
.sh-partner-grid .sh-reveal:nth-child(3) { transition-delay: .16s; }
.sh-partner-grid .sh-reveal:nth-child(4) { transition-delay: .24s; }

.sh-partner-grid article {
    padding: 24px;
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 16px;
    background: #fff;
}

.sh-partner-grid h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

.sh-partner-grid p {
    margin: 0;
    color: #64748b;
    font-size: .9375rem;
    line-height: 1.6;
}

.sh-partner-badges ul {
    display: flex;
    gap: 20px;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: 0;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
}

.sh-partner-badges img {
    height: auto;
    max-width: 150px;
}

@media (max-width: 575.98px) {
    .sh-review-grid,
    .sh-review-grid-compact {
        grid-template-columns: 1fr;
    }
}

/* Certificaciones de cPanel University. Dos columnas en escritorio: seis en una
 * sola lista quedan largas y en tres se parten los nombres. */
.sh-partner-certs {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.sh-partner-certs-lede {
    max-width: 68ch;
    margin: 0 0 1.5rem;
    color: #64748b;
}

.sh-partner-cert-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-partner-cert-list li {
    display: flex;
    padding: 20px 14px;
    align-items: center;
    flex-direction: column;
    border: 1px solid var(--sh-line, #dbe5f1);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sh-partner-cert-list .sh-reveal:nth-child(2) { transition-delay: .05s; }
.sh-partner-cert-list .sh-reveal:nth-child(3) { transition-delay: .1s; }
.sh-partner-cert-list .sh-reveal:nth-child(4) { transition-delay: .15s; }
.sh-partner-cert-list .sh-reveal:nth-child(5) { transition-delay: .2s; }
.sh-partner-cert-list .sh-reveal:nth-child(6) { transition-delay: .25s; }

/* Only earned certifications get the hover lift. A pending one is already
   greyed out to say "not yet held"; livening it up on hover would visually
   read as an accreditation that has not happened. */
.sh-partner-cert-list li:not(.is-pending):hover {
    transform: translateY(-4px);
    border-color: rgba(53,216,255,.35);
    box-shadow: 0 16px 34px rgba(15,42,78,.14);
}

.sh-partner-cert-list img {
    width: 96px;
    height: 96px;
    margin-bottom: .9rem;
}

/* Una certificación no acreditada se atenúa en lugar de mostrarse como propia. */
.sh-partner-cert-list li.is-pending {
    background: #f8fafc;
}

.sh-partner-cert-list li.is-pending img {
    filter: grayscale(1);
    opacity: .45;
}

.sh-partner-cert-list b {
    display: block;
    color: var(--sh-ink);
    font-size: .875rem;
    line-height: 1.35;
}

.sh-cert-abbr {
    display: inline-block;
    margin-top: .45rem;
    padding: 2px 8px;
    border-radius: 99px;
    color: #245fd9;
    background: #eaf1ff;
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .04em;
}


@media (max-width: 900px) {
    .sh-ladder { grid-template-columns: 1fr; }
    .sh-ladder-head-row, .sh-ladder-row { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .8fr)) minmax(8ch, 1fr); font-size: 12px; }
        /* Both rules must point at the SAME column. `:nth-of-type` counts elements
       by tag, and every cell here is a span, so `.sh-ladder-row-spec:nth-of-type(3)`
       resolved to the RAM cell while the header hid the disk one — the narrow
       layout then listed values under the wrong headings. */
    .sh-ladder-head-row-3 span:nth-child(4), .sh-ladder-row-3 > span:nth-child(4) { display: none; }
    /* An axis with two meters has its PRICE in the fourth cell, not a third
       meter. Hiding "the fourth cell" unconditionally is what left the account
       packs listing five plans with no prices on a phone. Each width drops its
       own last meter instead. */
    .sh-ladder-head-row-2, .sh-ladder-row-2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(8ch, 1fr); }
    .sh-ladder-head-row-2 span:nth-child(3), .sh-ladder-row-2 > span:nth-child(3) { display: none; }
}

/* Below this the four columns leave the plan name about 75px, which is not
   enough to read one. The panel above already shows CPU, RAM and disk for the
   selected plan in full size, so the list drops to what it is really for down
   here: picking a plan by name and price. */
@media (max-width: 560px) {
    .sh-ladder-head-row, .sh-ladder-row { grid-template-columns: minmax(0, 1fr) minmax(8ch, auto); }
    .sh-ladder-head-row span:nth-child(2), .sh-ladder-head-row span:nth-child(3),
    .sh-ladder-row > span:nth-child(2), .sh-ladder-row > span:nth-child(3) { display: none; }
    /* Two meters: cell 2 is the only one to drop, and cell 4 — the price — has
       to come back from the rule above. */
    .sh-ladder-head-row-2 span:nth-child(4), .sh-ladder-row-2 > span:nth-child(4) { display: block; }
    .sh-ladder-row-2 > span:nth-child(4) { display: inline-flex; }
}

/* Featured plan and card hover ------------------------------------------
   `is-featured` comes from WHMCS's own Featured checkbox on the product, so
   the recommended plan is chosen where the operator already manages it. The
   card keeps the same background as its neighbours: the border, the badge and
   a slight lift carry the emphasis, which reads as a recommendation rather
   than as a different product. */
.sh-live-plan-card, .sh-product-grid .product { position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
/* Gated on a real pointer. On touch, :hover latches after a tap and the card
   stays lifted until something else is tapped, which reads as a stuck state. */
@media (hover: hover) {
    .sh-live-plan-card:hover, .sh-product-grid .product:hover { transform: translateY(-4px); border-color: var(--sh-blue); box-shadow: 0 22px 50px rgba(22,47,83,.13); }
}
.sh-live-plan-card:focus-within, .sh-product-grid .product:focus-within { border-color: var(--sh-blue); }
.sh-live-plan-card.is-featured, .sh-product-grid .product.is-featured { border: 2px solid var(--sh-blue); }
.sh-plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 4px 14px; border-radius: 999px; color: #fff; background: #123f9c; font: 700 10px/1.6 var(--sh-font-heading); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
/* The featured card needs its top padding back: the 2px border plus the badge
   would otherwise sit on top of the eyebrow. */
.sh-live-plan-card.is-featured { padding-top: 34px; }

@media (prefers-reduced-motion: reduce) {
    .sh-live-plan-card, .sh-product-grid .product { transition: none; }
    .sh-live-plan-card:hover, .sh-product-grid .product:hover { transform: none; }
}

/* Price layout ----------------------------------------------------------
   Currency code first, then the digits in a right-aligned slot wide enough
   for a seven-figure amount — several supported currencies quote in the
   hundreds of thousands per month. tabular-nums keeps every digit the same
   width, which is what makes a column of prices line up instead of drifting
   with the glyphs. */
.sh-price-cur { margin-right: .35em; color: var(--sh-muted); font-size: max(10px, .58em); font-weight: 600; letter-spacing: .04em; vertical-align: .1em; }
.sh-price-sym { margin-right: .12em; }
.sh-price-amt { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sh-ladder-row-price { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 0; }
.sh-ladder-panel .sh-price-cur { color: #8fa6c8; }
.sh-live-plan-price strong { display: inline-flex; align-items: baseline; }

/* cPanel partner block on the landings whose plans run on cPanel ---------
   Deliberately quiet: it is a trust signal next to the plans, not a second
   pitch, so it borrows the page background instead of a panel of its own. */
.sh-cpanel-partner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 34px 36px; border: 1px solid var(--sh-line); border-radius: 18px; background: #fff; }
.sh-cpanel-partner-copy h2 { margin: 10px 0 12px; font: 700 26px/1.25 var(--sh-font-heading); letter-spacing: -.02em; }
.sh-cpanel-partner-copy p { margin: 0 0 20px; color: var(--sh-muted); line-height: 1.7; }
.sh-cpanel-partner-points { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.sh-cpanel-partner-points li { display: grid; gap: 3px; padding-left: 16px; border-left: 2px solid var(--sh-blue); }
.sh-cpanel-partner-points strong { font-size: 14px; }
.sh-cpanel-partner-points span { color: var(--sh-muted); font-size: 13px; line-height: 1.6; }

@media (max-width: 900px) {
    .sh-cpanel-partner-grid { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; }
    .sh-cpanel-partner-copy h2 { font-size: 22px; }
}

/* The two reseller models, side by side ---------------------------------
   Two cards rather than a table: the rows are sentences, not figures, and a
   two-column table of prose forces a line width nobody reads comfortably on a
   phone. The definition list inside each card keeps the question and its
   answer bound together, so the pair survives the collapse to one column.

   The model being read is outlined rather than dimmed. Marking the OTHER one
   as secondary would be the wrong signal: a visitor on the wrong page needs
   the alternative to look like a door, not like a footnote. */
.sh-reseller-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sh-reseller-model { display: flex; flex-direction: column; gap: 18px; padding: 28px 30px; border: 1px solid var(--sh-line); border-radius: 18px; background: #fff; }
.sh-reseller-model.is-current { border-color: var(--sh-blue); box-shadow: 0 0 0 1px var(--sh-blue) inset; }
.sh-reseller-model header { display: grid; gap: 8px; }
.sh-reseller-model h3 { margin: 0; font: 700 20px/1.3 var(--sh-font-heading); letter-spacing: -.01em; }
.sh-reseller-model-here { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--sh-blue); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sh-reseller-model-audience { margin: 0; color: var(--sh-muted); font-size: 14px; line-height: 1.65; }
.sh-reseller-model dl { display: grid; gap: 14px; margin: 0; }
.sh-reseller-model dl > div { display: grid; gap: 3px; padding-left: 16px; border-left: 2px solid var(--sh-line); }
.sh-reseller-model.is-current dl > div { border-left-color: var(--sh-blue); }
.sh-reseller-model dt { font-size: 13px; font-weight: 700; }
.sh-reseller-model dd { margin: 0; color: var(--sh-muted); font-size: 13px; line-height: 1.6; }
.sh-reseller-model-links { display: grid; gap: 8px; padding: 0; margin: auto 0 0; list-style: none; }
.sh-reseller-model-links a { font-size: 14px; font-weight: 600; text-decoration: none; }
.sh-reseller-model-links a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .sh-reseller-model-grid { grid-template-columns: 1fr; }
    .sh-reseller-model { padding: 24px 22px; }
}

/* Affiliate programme ---------------------------------------------------
   The hero figure is the commission, because that is the one number anyone
   deciding whether to join actually wants. It comes from the WHMCS setting,
   not from copy, so it cannot drift from what gets paid. */
.sh-affiliates-figure { display: grid; gap: 6px; padding: 30px 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.04); }
.sh-affiliates-figure span { color: #8fa6c8; font: 700 11px monospace; letter-spacing: .12em; text-transform: uppercase; }
.sh-affiliates-figure strong { font: 700 64px/1 var(--sh-font-heading); letter-spacing: -.04em; color: var(--sh-cyan); }
.sh-affiliates-figure p { margin: 4px 0 0; color: #c2d2e8; font-size: 14px; line-height: 1.6; }
.sh-affiliates-closed { padding: 16px 20px; border-left: 3px solid var(--sh-blue); border-radius: 0; background: #eef4ff; color: var(--sh-navy); }
.sh-affiliates-terms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 0; }
.sh-affiliates-terms-grid > div { padding: 22px 24px; border: 1px solid var(--sh-line); border-radius: 14px; background: #fff; }
.sh-affiliates-terms-grid dt { margin-bottom: 10px; color: var(--sh-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.sh-affiliates-terms-grid dd { display: grid; gap: 6px; margin: 0; }
.sh-affiliates-terms-grid dd strong { font: 700 22px/1.2 var(--sh-font-heading); }
.sh-affiliates-terms-grid dd span { color: var(--sh-muted); font-size: 13px; line-height: 1.6; }
.sh-affiliates-fineprint { margin: 22px 0 0; color: var(--sh-muted); font-size: 13px; line-height: 1.7; }

@media (max-width: 900px) {
    .sh-affiliates-figure { padding: 24px 22px; }
    .sh-affiliates-figure strong { font-size: 48px; }
}

/* Website migration ----------------------------------------------------- */
.sh-migration-figure { display: grid; gap: 6px; padding: 30px 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.04); }
.sh-migration-figure span { color: #8fa6c8; font: 700 11px monospace; letter-spacing: .12em; text-transform: uppercase; }
.sh-migration-figure strong { font: 700 46px/1 var(--sh-font-heading); letter-spacing: -.03em; color: var(--sh-mint); }
.sh-migration-figure p { margin: 4px 0 0; color: #c2d2e8; font-size: 14px; line-height: 1.6; }
.sh-migration-steps { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: shmig; }
.sh-migration-steps li { display: grid; position: relative; gap: 4px; padding: 20px 24px 20px 64px; border: 1px solid var(--sh-line); border-radius: 14px; background: #fff; counter-increment: shmig; }
.sh-migration-steps li::before { display: grid; position: absolute; top: 20px; left: 22px; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: var(--sh-blue); content: counter(shmig); font: 700 13px var(--sh-font-heading); }
.sh-migration-steps strong { font-size: 15px; }
.sh-migration-steps span { color: var(--sh-muted); font-size: 14px; line-height: 1.7; }
.sh-migration-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.sh-migration-family-grid a { display: flex; padding: 16px 18px; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--sh-line); border-radius: 12px; background: #fff; color: var(--sh-navy); font-size: 14px; font-weight: 600; }
.sh-migration-family-grid a:hover, .sh-migration-family-grid a:focus-visible { border-color: var(--sh-blue); color: #2f6ae8; }
.sh-migration-fineprint { margin: 20px 0 0; color: var(--sh-muted); font-size: 13px; line-height: 1.7; }

@media (max-width: 900px) {
    .sh-migration-figure { padding: 24px 22px; }
    .sh-migration-figure strong { font-size: 36px; }
    .sh-migration-steps li { padding: 18px 18px 18px 58px; }
    .sh-migration-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .sh-migration-family-grid { grid-template-columns: 1fr; }
}

/* Domain pricing ---------------------------------------------------------
   The WHMCS pricing route is part of the account shell rather than the cart,
   so it needs the same tactile filters and comparison-table behaviour here. */
.sh-internal-page .domain-pricing .tld-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 24px;
}
.sh-internal-page .domain-pricing .tld-filters a {
    display: inline-flex;
    min-height: 44px;
    padding: 9px 14px;
    align-items: center;
    border: 1px solid var(--sh-line);
    border-radius: 999px;
    color: var(--sh-navy);
    background: #fff;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
}
.sh-internal-page .domain-pricing .tld-filters a:hover,
.sh-internal-page .domain-pricing .tld-filters a:focus-visible {
    border-color: var(--sh-blue);
    color: var(--sh-blue);
    background: #f4f8ff;
}
.sh-internal-page .domain-pricing .tld-filters a.badge-success {
    border-color: var(--sh-blue);
    color: #fff;
    background: var(--sh-blue);
}
.sh-internal-page #tableDomainPricing th,
.sh-internal-page #tableDomainPricing td {
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
.sh-internal-page #tableDomainPricing th:nth-child(-n+2),
.sh-internal-page #tableDomainPricing td:nth-child(-n+2) { text-align: left; }
.sh-internal-page #tableDomainPricing th:nth-child(n+3):nth-child(-n+5),
.sh-internal-page #tableDomainPricing td:nth-child(n+3):nth-child(-n+5) { text-align: right; }
.sh-internal-page #tableDomainPricing th:nth-child(n+6),
.sh-internal-page #tableDomainPricing td:nth-child(n+6) { text-align: center; }

@media (max-width: 767px) {
    .sh-internal-page .domain-pricing .tld-filters a { flex: 1 1 calc(50% - 8px); }
    .sh-internal-page #tableDomainPricing { min-width: 860px; }
    .sh-internal-page #tableDomainPricing thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--sh-navy);
    }
}

/* Supported stacks on the application-server pages.
   The audience is developers picking a runtime, so the grid is built for
   scanning: a mark to anchor each row, the stack name, and the services as
   colour-coded chips. The colour carries the meaning — after two rows you spot
   "the ones with Redis" without reading a word. */
.sh-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sh-stack {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    align-items: flex-start;
    border: 1px solid var(--sh-line);
    border-radius: var(--sh-radius-md);
    background: #fff;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sh-stack:hover {
    border-color: #b9ccf0;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(18, 44, 78, .08);
}
.sh-stack-mark {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    color: #2f6ae8;
    background: linear-gradient(140deg, #eaf1ff, #dbe7ff);
    font: 800 15px/1 var(--sh-font-heading);
    text-transform: uppercase;
}
.sh-stack-body { min-width: 0; }
.sh-stack strong {
    display: block;
    color: var(--sh-ink);
    font: 700 15px/1.35 var(--sh-font-heading);
}
.sh-stack-services {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}
.sh-stack-services em {
    padding: 3px 9px;
    border-radius: 999px;
    color: #46566d;
    background: #eef2f7;
    font: 600 11px/1.5 var(--sh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-style: normal;
    letter-spacing: .02em;
}
/* One colour per engine. Anything not listed keeps the neutral chip, so a new
   service added upstream still renders correctly instead of disappearing. */
.sh-stack-services em[data-service="postgresql"] { color: #1c4f8b; background: #e4eefb; }
.sh-stack-services em[data-service="mysql"] { color: #8a5200; background: #fdf0dc; }
.sh-stack-services em[data-service="mariadb"] { color: #7a3e12; background: #fbeadd; }
.sh-stack-services em[data-service="redis"] { color: #9b2222; background: #fbe6e6; }
.sh-stack-services em[data-service="mongodb"] { color: #1d6b3f; background: #e2f4e9; }

.sh-stacks-count {
    margin: 18px 0 0;
    color: var(--sh-muted);
    font-size: 13px;
}

/* The platform around the stack: four capabilities, each with an inline icon. */
.sh-stack-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--sh-line);
}
.sh-stack-icon {
    display: block;
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
    color: #2f6ae8;
}
.sh-stack-features strong {
    display: block;
    margin-bottom: 6px;
    color: var(--sh-ink);
    font: 700 15px/1.35 var(--sh-font-heading);
}
.sh-stack-features span {
    display: block;
    color: var(--sh-muted);
    font-size: 14px;
    line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
    .sh-stack, .sh-stack:hover { transition: none; transform: none; }
}

/* Narrow screens last, so these actually win. */
@media (max-width: 560px) {
    .sh-stack-grid { grid-template-columns: minmax(0, 1fr); }
    .sh-stack-features { grid-template-columns: minmax(0, 1fr); }
}

/* SSH terminal replay.
   A worked example of the deployment, so it looks like a terminal: dark, mono,
   left-aligned. The transcript is real markup, so it has to stay readable when
   the script never runs — no rule here hides a line by default. */
.sh-terminal { margin: 0 0 32px; }
.sh-terminal-caption {
    margin-bottom: 10px;
    color: var(--sh-muted);
    font-size: 13px;
}
.sh-terminal-window {
    overflow: hidden;
    border: 1px solid #16233c;
    border-radius: var(--sh-radius-md);
    background: #0a1526;
    box-shadow: 0 20px 50px rgba(7, 18, 38, .28);
}
.sh-terminal-bar {
    display: flex;
    gap: 7px;
    padding: 11px 14px;
    align-items: center;
    border-bottom: 1px solid #16233c;
    background: #0d1c31;
}
.sh-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2b3d59;
}
.sh-terminal-dot:first-child { background: #ff5f57; }
.sh-terminal-dot:nth-child(2) { background: #febc2e; }
.sh-terminal-dot:nth-child(3) { background: #28c840; }
.sh-terminal-title {
    margin-left: 8px;
    color: #6e819c;
    font: 600 12px/1 var(--sh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.sh-terminal-replay {
    min-width: var(--sh-target-min);
    min-height: var(--sh-target-min);
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid #24354f;
    border-radius: 7px;
    color: #8fa3c0;
    background: transparent;
    font: 600 12px/1 var(--sh-font-body);
    cursor: pointer;
}
.sh-terminal-replay:hover { color: #cfe0f7; border-color: #3a5580; }
.sh-terminal-body {
    margin: 0;
    padding: 18px 18px 22px;
    list-style: none;
    counter-reset: none;
    font: 400 13px/1.85 var(--sh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    overflow-x: auto;
}
.sh-terminal-body li { white-space: pre; color: #c6d6ee; }
/* The prompt is decoration, so it lives in CSS: a screen reader hears the
   command, not "dollar sign" before every line. */
.sh-terminal-body li[data-line="cmd"]::before {
    content: "root@app-server:~# ";
    color: #35d8ff;
}
.sh-terminal-body li[data-line="out"] { color: #8fa3c0; }
.sh-terminal-body li[data-line="ok"] { color: #5fd48a; }
.sh-terminal-body li[data-line="ok"]::before { content: "\2713 "; }
/* Only while the replay is running does an empty line collapse; without the
   script every line keeps its height and its text. */
[data-running] .sh-terminal-body li[data-pending] { visibility: hidden; }
[data-running] .sh-terminal-body li[data-line="cmd"]:not([data-pending])::after {
    content: "\258b";
    color: #35d8ff;
}

@media (max-width: 560px) {
    .sh-terminal-body { font-size: 12px; padding: 14px; }
}

/* API hosting lists the whole catalogue, so the stacks are grouped by runtime.
   The heading is the language plus its count, which is what a developer scans
   for when the question is "is my stack here?". */
.sh-stack-group + .sh-stack-group { margin-top: 28px; }
.sh-stack-group-title {
    display: flex;
    gap: 9px;
    margin: 0 0 12px;
    align-items: center;
    color: var(--sh-ink);
    font: 700 13px/1 var(--sh-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sh-stack-group-title span {
    padding: 2px 8px;
    border-radius: 999px;
    color: #2f6ae8;
    background: #eef3ff;
    font-size: 11px;
    letter-spacing: 0;
}

/* Website builder.
   Sells to somebody who does not read specs, so the page leans on pictures.
   Every graphic here is drawn in CSS/SVG: nothing to license, nothing to ship
   as a binary, crisp at any density. */
.sh-builder-hero {
    position: relative;
    padding: var(--sh-hero-y) 0;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 12% 10%, rgba(57,120,255,.42), transparent 46%), radial-gradient(circle at 88% 85%, rgba(53,216,255,.20), transparent 40%), var(--sh-navy);
}
.sh-builder-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.sh-builder-hero h1 { margin: 12px 0 0; font: 700 clamp(34px, 4.4vw, 56px)/1.03 var(--sh-font-heading); letter-spacing: -.055em; }
.sh-builder-lede { max-width: 34em; margin: 20px 0 28px; color: #b9c8de; font-size: 17px; line-height: 1.7; }
.sh-builder-included { margin: 22px 0 0; color: #8deaff; font-size: 14px; font-weight: 600; }

/* Hero screenshot. The prompt bar overlaps its lower edge, so the figure needs
   room underneath and the image its own radius. */
.sh-builder-stage { position: relative; margin: 0; padding-bottom: 34px; }
.sh-builder-stage img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    box-shadow: 0 34px 80px rgba(3,10,22,.55);
}
@keyframes sh-caret { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }

/* Steps, each with a small drawing of what happens. */
.sh-builder-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sh-builder-steps li { padding: 26px 26px 30px; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-builder-step-art { margin-bottom: 18px; border-radius: 12px; background: #f3f7ff; }
.sh-builder-step-art svg { display: block; width: 100%; height: auto; }
.sh-a-soft { fill: #fff; stroke: #d8e4f7; stroke-width: 1.5 }
.sh-a-line { fill: #cddcf3 }
.sh-a-accent { fill: #3978ff }
.sh-a-check { fill: none; stroke: #2fb875; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round }
.sh-builder-steps strong { display: block; margin-bottom: 8px; font: 700 18px/1.3 var(--sh-font-heading); }
.sh-builder-steps li > span { color: var(--sh-muted); line-height: 1.7; }

/* Template gallery: real screenshots of the templates the product ships. Four
   across so eight fit in two clean rows. The frame is fixed-ratio and the image
   is cropped from the top, because every template leads with its hero — which is
   the part worth seeing at thumbnail size. */
.sh-builder-gallery { background: #f8faff; }
.sh-builder-templates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sh-tpl { margin: 0; }
.sh-tpl img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--sh-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(18,44,78,.06);
    transition: transform .22s ease, box-shadow .22s ease;
}
.sh-tpl:hover img { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(18,44,78,.16); }
.sh-tpl figcaption { margin-top: 12px; color: var(--sh-ink); font: 600 14px/1.4 var(--sh-font-body); }

/* How it works with cPanel: the panel, an arrow, the editor. */
.sh-builder-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.sh-flow-step { margin: 0; }
.sh-flow-step img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--sh-line);
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(18,44,78,.09);
}
.sh-flow-step figcaption { margin-top: 16px; }
.sh-flow-step strong { display: block; margin-bottom: 6px; font: 700 17px/1.3 var(--sh-font-heading); }
.sh-flow-step span { color: var(--sh-muted); font-size: 14px; line-height: 1.7; }
.sh-flow-arrow { color: #b7c8e2; }
.sh-flow-arrow svg { display: block; width: 48px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sh-builder-cpanel .sh-s-card { fill: #f7f9fd; stroke: #e8eefa }
.sh-builder-cpanel .sh-flow-step:nth-child(3) .sh-s-card { fill: rgba(255,255,255,.09); stroke: none }
.sh-builder-cpanel .sh-flow-step:nth-child(3) .sh-s-line { fill: rgba(255,255,255,.16) }
.sh-builder-cpanel .sh-flow-step:nth-child(3) .sh-s-photo { fill: #2a4fa8 }

/* One layout, three screens. */
.sh-builder-devices-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.sh-builder-devices-grid h2 { margin: 13px 0 14px; font: 700 clamp(28px,2.9vw,40px)/1.08 var(--sh-font-heading); letter-spacing: -.05em; }
.sh-builder-devices-grid p { color: var(--sh-muted); line-height: 1.75; }
.sh-builder-devices-art { display: flex; gap: 16px; align-items: flex-end; justify-content: center; }
.sh-dev { display: flex; padding: 9px; flex-direction: column; gap: 6px; border: 1px solid var(--sh-line); border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(18,44,78,.10); }
.sh-dev span { border-radius: 5px; background: #e7eefa; }
.sh-dev span:first-child { background: linear-gradient(120deg,#3978ff,#35d8ff); }
.sh-dev-desktop { width: 220px; height: 148px; }
.sh-dev-desktop span:first-child { height: 56px; }
.sh-dev-desktop span { height: 15px; }
.sh-dev-tablet { width: 122px; height: 124px; }
.sh-dev-tablet span:first-child { height: 48px; }
.sh-dev-tablet span { height: 14px; }
.sh-dev-phone { width: 74px; height: 108px; border-radius: 14px; }
.sh-dev-phone span:first-child { height: 42px; }
.sh-dev-phone span { height: 12px; }

.sh-builder-features { background: #fff; }
.sh-builder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sh-builder-grid article { padding: 30px; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-builder-icon { display: grid; width: 44px; height: 44px; margin-bottom: 16px; place-items: center; border-radius: 12px; color: #2f6ae8; background: #eaf1ff; }
.sh-builder-icon svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.sh-builder-icon svg path[d^="M16"], .sh-builder-icon svg circle[r="6.5"] { fill: none; stroke-width: 2; }
.sh-builder-grid h3 { margin: 0 0 10px; font: 700 18px/1.3 var(--sh-font-heading); }
.sh-builder-grid p { margin: 0; color: var(--sh-muted); line-height: 1.7; }
.sh-builder-plans-note { margin: 26px 0 0; color: var(--sh-muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
    .sh-tpl:hover .sh-tpl-shot { transform: none; }
}
@media (max-width: 900px) {
    .sh-builder-hero-grid, .sh-builder-devices-grid { grid-template-columns: 1fr; gap: 40px; }
    .sh-builder-steps, .sh-builder-grid, .sh-builder-templates { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .sh-builder-steps, .sh-builder-grid, .sh-builder-templates { grid-template-columns: minmax(0, 1fr); }
    .sh-builder-stage { padding-bottom: 0; }
}

/* Secure hosting. A trust page, so it leans dark and calm rather than loud, and
   the artwork shows actual infrastructure — a rack, cells, two locations —
   instead of generic padlocks. Concrete pictures sell better than symbols. */
.sh-secure-hero {
    padding: var(--sh-hero-y) 0;
    color: #fff;
    background: radial-gradient(circle at 78% 22%, rgba(53,216,255,.22), transparent 46%), var(--sh-navy);
}
.sh-secure-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.sh-secure-hero h1 { margin: 12px 0 0; font: 700 clamp(30px, 3.6vw, 48px)/1.08 var(--sh-font-heading); letter-spacing: -.045em; }
.sh-secure-lede { max-width: 36em; margin: 20px 0 28px; color: #b9c8de; font-size: 17px; line-height: 1.7; }
.sh-secure-art svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.sh-sec-hull { fill: rgba(10,26,50,.55); stroke: rgba(53,216,255,.42); stroke-width: 2; stroke-linejoin: round }
.sh-sec-srv { fill: #12294a; stroke: rgba(255,255,255,.12); stroke-width: 1 }
.sh-sec-led { fill: #2fe08a }
.sh-sec-slot { fill: rgba(255,255,255,.15) }
.sh-sec-site { fill: rgba(53,216,255,.55) }
.sh-sec-scan {
    fill: none;
    stroke: #35d8ff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 14 12;
    animation: sh-sec-sweep 2.6s linear infinite;
}
@keyframes sh-sec-sweep { to { stroke-dashoffset: -52 } }

/* The layers, drawn as rings around the site with a numbered list beside them.
   The diagram is the index, not decoration: each ring carries the number of its
   entry, so a reader can move between the two without a caption. */
.sh-secure-layers { background: #f8faff; }
.sh-secure-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sh-secure-diagram svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.sh-ly { fill: none; stroke-width: 2 }
.sh-ly-1 { stroke: #b9cdf0 }
.sh-ly-2 { stroke: #9dbcf5 }
.sh-ly-3 { stroke: #7aa3ee }
.sh-ly-4 { stroke: #4f83e8 }
.sh-ly-sweep {
    fill: none;
    stroke: #2fb875;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 26 92;
    transform-origin: 180px 180px;
    animation: sh-ly-orbit 7s linear infinite;
}
@keyframes sh-ly-orbit { to { transform: rotate(360deg) } }
.sh-ly-core { fill: none; stroke: #2f6ae8; stroke-width: 2.4 }
.sh-ly-core-line { fill: #2f6ae8 }
.sh-ly-core-line.is-soft { fill: #9dbcf5 }
.sh-ly-pin circle { fill: #fff; stroke: #4f83e8; stroke-width: 2 }
.sh-ly-pin text {
    fill: #24405f;
    font: 700 13px/1 var(--sh-font-heading);
    text-anchor: middle;
}
.sh-ly-pin-outer circle { fill: #2fb875; stroke: #2fb875 }
.sh-ly-pin-outer text { fill: #fff }

.sh-secure-layers-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sh-secure-layers-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    align-items: start;
    border-top: 1px solid var(--sh-line);
}
.sh-secure-layers-list li:first-child { border-top: 0; padding-top: 0; }
.sh-ly-n {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 2px solid #4f83e8;
    border-radius: 50%;
    color: #24405f;
    background: #fff;
    font: 700 13px/1 var(--sh-font-heading);
}
.sh-secure-layers-list li:last-child .sh-ly-n { border-color: #2fb875; color: #fff; background: #2fb875; }
.sh-secure-layers-list strong { display: block; margin-bottom: 6px; color: var(--sh-ink); font: 700 17px/1.3 var(--sh-font-heading); }
.sh-secure-layers-list p { margin: 0; color: var(--sh-muted); font-size: 14px; line-height: 1.7; }

.sh-secure-isolation { background: #f8faff; }
.sh-secure-isolation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sh-secure-isolation-grid h2 { margin: 13px 0 14px; font: 700 clamp(28px,2.9vw,40px)/1.08 var(--sh-font-heading); letter-spacing: -.05em; }
.sh-secure-isolation-grid p { color: var(--sh-muted); line-height: 1.75; }
.sh-secure-list { margin: 20px 0 0; padding: 0; list-style: none; }
.sh-secure-list li { position: relative; padding: 0 0 10px 26px; color: var(--sh-ink); line-height: 1.65; }
.sh-secure-list li::before { position: absolute; top: .55em; left: 0; width: 8px; height: 8px; content: ""; border-radius: 50%; background: #2fb875; }

/* Six accounts, each in its own cell. The one in trouble carries an amber wall
   and its own badge; nothing crosses into the cells beside it. */
.sh-secure-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sh-cell {
    position: relative;
    padding: 15px 13px 20px;
    overflow: hidden;
    border: 1px solid var(--sh-line);
    border-radius: 13px;
    background: #fff;
}
.sh-cell span { display: block; height: 8px; border-radius: 99px; background: #dce6f5; }
.sh-cell i { display: block; height: 32px; margin-top: 10px; border-radius: 7px; background: #eef3fa; }
.sh-cell u {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 6px;
    border-radius: 5px;
    color: #2fb875;
    background: #e4f6ec;
    font: 700 9px/1.5 var(--sh-font-mono, ui-monospace, Menlo, monospace);
    text-decoration: none;
}
.sh-cell.is-busy { border-color: #f0a33c; background: #fff8ef; }
.sh-cell.is-busy span { background: #ffb35b; }
.sh-cell.is-busy i { background: #ffe2bd; }
.sh-cell.is-busy u { color: #b4671a; background: #ffe6c4; }
.sh-cell.is-busy b { position: absolute; inset: auto 0 0 0; height: 5px; background: linear-gradient(90deg, #ff9d2e, #ffcf8f); }

.sh-secure-backup-art svg { display: block; width: 100%; height: auto; }
.sh-sec-box { fill: #fff; stroke: var(--sh-line); stroke-width: 1.6 }
.sh-sec-box-off { fill: #f2f8f4; stroke: #9fd8b6 }
.sh-sec-line { fill: #dce6f5 }
.sh-sec-line-soft { fill: #cfe8da }
.sh-sec-live { fill: #2fb875 }
.sh-sec-pill { fill: #eaf1ff }
.sh-sec-plus { fill: none; stroke: #2fb875; stroke-width: 2.6; stroke-linecap: round }
.sh-sec-arrow { fill: none; stroke: #9db4d2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.sh-sec-check { fill: none; stroke: #2fb875; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round }

@media (prefers-reduced-motion: reduce) {
    .sh-sec-scan, .sh-ly-sweep { animation: none; }
}
@media (max-width: 900px) {
    .sh-secure-hero-grid, .sh-secure-isolation-grid, .sh-secure-layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
    .sh-secure-cells { grid-template-columns: 1fr 1fr; }
}

/* Security block on the plan pages. Same shape as the cPanel partner block —
   copy on the left, points on the right — because they play the same role:
   credentials that reassure without repeating the page they link to. */
.sh-landing-secure { background: #f8faff; }
.sh-landing-secure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sh-landing-secure-copy h2 { margin: 13px 0 14px; font: 700 clamp(26px,2.6vw,36px)/1.1 var(--sh-font-heading); letter-spacing: -.045em; }
.sh-landing-secure-copy p { margin: 0 0 22px; color: #3d4f69; line-height: 1.75; }
.sh-landing-secure-points { margin: 0; padding: 0; list-style: none; }
.sh-landing-secure-points li {
    display: grid;
    gap: 4px;
    padding: 16px 0;
    border-top: 1px solid var(--sh-line);
}
.sh-landing-secure-points li:first-child { padding-top: 0; border-top: 0; }
.sh-landing-secure-points strong { color: var(--sh-ink); font: 700 15px/1.35 var(--sh-font-heading); }
.sh-landing-secure-points span { color: #3d4f69; font-size: 14px; line-height: 1.65; }

@media (max-width: 900px) {
    .sh-landing-secure-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* Section boundaries.
   Two tints one step apart (#f4f7fb and #f8faff) read as the same colour, so the
   page looked like one long scroll. Now there is a single alternate tint with
   real presence, plus a hairline on top of every landing section.

   The hairline is what makes this robust: sections are conditional — security
   only on our own products, the cPanel block only on cPanel families — so which
   ones render varies per page and a pure light/dark alternation would collide
   the moment one is absent. The line is always there. */
.sh-landing > section { border-top: 1px solid var(--sh-line); }
.sh-landing > section.sh-landing-section-dark,
.sh-landing > section.sh-final-cta,
.sh-landing > section + section.sh-landing-section-dark,
.sh-landing-hero + section { border-top: 0; }
.sh-use-cases, .sh-landing-secure { background: var(--sh-paper); }
.sh-landing-reviews { background: #fff; }

/* ── Notificaciones segmentadas del área de clientes ───────────────────────
   Dos presentaciones sobre la misma marca .sh-notif: la franja (banner), que
   acompaña al cliente por toda el área, y la tarjeta (card), reservada al
   inicio. La severidad sólo cambia el color de acento y el glifo del icono;
   nunca la estructura, para que agregar una severidad no obligue a tocar el
   maquetado. */
.sh-notif-banners { margin: 0 0 var(--sh-space-6); }
.sh-notif {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--sh-space-3);
    border: 1px solid var(--sh-line);
    border-left: 3px solid var(--sh-accent);
    border-radius: var(--sh-radius-md);
    background: var(--sh-white);
    color: var(--sh-ink);
    font-family: var(--sh-font-body);
    --sh-accent: var(--sh-blue-on-light);
    --sh-accent-soft: rgba(57, 120, 255, .08);
}
.sh-notif-info     { --sh-accent: var(--sh-blue-on-light); --sh-accent-soft: rgba(18, 59, 143, .09); }
.sh-notif-success  { --sh-accent: #1f9d5b;          --sh-accent-soft: rgba(31, 157, 91, .09); }
.sh-notif-warning  { --sh-accent: #b3760a;          --sh-accent-soft: rgba(179, 118, 10, .1); }
.sh-notif-critical { --sh-accent: #c4362f;          --sh-accent-soft: rgba(196, 54, 47, .09); }

.sh-notif-icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--sh-accent-soft);
    color: var(--sh-accent);
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
}
.sh-notif-info .sh-notif-icon::before     { content: "i"; font-style: italic; }
.sh-notif-success .sh-notif-icon::before  { content: "\2713"; }
.sh-notif-warning .sh-notif-icon::before  { content: "!"; }
.sh-notif-critical .sh-notif-icon::before { content: "!"; }

.sh-notif-text { flex: 1 1 auto; min-width: 0; }
.sh-notif-text > strong { display: block; font-family: var(--sh-font-heading); font-weight: 700; }
.sh-notif-text p { margin: var(--sh-space-1) 0 0; color: var(--sh-muted); }

.sh-notif-close {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sh-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    /* El área de toque llega al mínimo sin agrandar el glifo, que a tamaño
       real desbalancearía la franja. */
    min-width: var(--sh-target-min);
    min-height: var(--sh-target-min);
}
.sh-notif-close:hover,
.sh-notif-close:focus-visible { color: var(--sh-ink); }

/* Franja: una línea de texto, la acción al final, altura contenida. */
.sh-notif-banner {
    align-items: center;
    padding: var(--sh-space-3) var(--sh-space-4);
    margin-bottom: var(--sh-space-2);
}
.sh-notif-banner .sh-notif-body { color: var(--sh-muted); }
.sh-notif-cta {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: var(--sh-target-min);
    align-items: center;
    color: var(--sh-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* Tarjeta: sólo en el inicio del área de clientes. */
.sh-notif-panel { margin: 0 0 var(--sh-space-8); }
.sh-notif-panel-title {
    display: flex;
    align-items: center;
    gap: var(--sh-space-2);
    margin: 0 0 var(--sh-space-4);
    font-family: var(--sh-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}
.sh-notif-badge {
    min-width: 1.375rem;
    padding: 0 .375rem;
    border-radius: .6875rem;
    background: var(--sh-blue);
    color: var(--sh-white);
    font-size: .75rem;
    line-height: 1.375rem;
    text-align: center;
}
.sh-notif-card {
    padding: var(--sh-space-4);
    margin-bottom: var(--sh-space-3);
    box-shadow: var(--sh-shadow-card);
}
.sh-notif-card.is-unread { background: var(--sh-accent-soft); }
.sh-notif-card .sh-button { margin-top: var(--sh-space-3); }

@media (max-width: 575px) {
    .sh-notif-banner { flex-wrap: wrap; }
    .sh-notif-banner .sh-notif-text { flex-basis: calc(100% - 4.5rem); }
    .sh-notif-cta { margin-left: calc(1.5rem + var(--sh-space-3)); }
}

/* ── Cuerpo enriquecido y botón de acción ─────────────────────────────────
   El mensaje se redacta con formato y se guarda ya reducido a una lista
   blanca, así que acá sólo hace falta que las etiquetas permitidas se vean
   bien dentro de la tarjeta. */
.sh-notif-body { margin: var(--sh-space-1) 0 0; color: var(--sh-muted); }
.sh-notif-body p { margin: 0 0 var(--sh-space-2); }
.sh-notif-body p:last-child { margin-bottom: 0; }
.sh-notif-body ul,
.sh-notif-body ol { margin: var(--sh-space-2) 0; padding-left: 1.25rem; }
.sh-notif-body a { color: var(--sh-accent); text-decoration: underline; }

.sh-notif-action {
    display: inline-flex;
    min-height: var(--sh-target-min);
    align-items: center;
    justify-content: center;
    margin-top: var(--sh-space-3);
    padding: .625rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-sm);
    font-family: var(--sh-font-body);
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}
.sh-notif-action.is-primary { background: var(--sh-accent); color: var(--sh-white); }
.sh-notif-action.is-primary:hover { filter: brightness(1.08); color: var(--sh-white); }
.sh-notif-action.is-secondary { border-color: var(--sh-accent); background: none; color: var(--sh-accent); }
.sh-notif-action.is-secondary:hover { background: var(--sh-accent-soft); }
.sh-notif-action.is-link { padding-left: 0; padding-right: 0; background: none; color: var(--sh-muted); text-decoration: underline; }
.sh-notif-action.is-link:hover { color: var(--sh-ink); }

/* ── Ventana emergente ────────────────────────────────────────────────────
   Se muestra una sola vez por cliente: interrumpir una vez es un mensaje,
   interrumpir en cada página es un motivo para irse. */
.sh-notif-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--sh-layer-floating);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sh-space-4);
    background: rgba(7, 18, 38, .58);
    animation: sh-notif-fade .18s ease-out;
}
.sh-notif-overlay[hidden] { display: none; }
.sh-notif-dialog {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 30rem;
    max-height: 90vh;
    padding: var(--sh-space-8);
    overflow-y: auto;
    border-top: 4px solid var(--sh-accent);
    border-radius: var(--sh-radius-lg);
    background: var(--sh-white);
    box-shadow: var(--sh-shadow-raised);
    color: var(--sh-ink);
    font-family: var(--sh-font-body);
    text-align: center;
    /* Sin esto, .sh-notif-dialog no heredaría el acento de la severidad:
       las variables viven en .sh-notif y el diálogo no es un .sh-notif. */
    --sh-accent: var(--sh-blue);
    --sh-accent-soft: rgba(57, 120, 255, .08);
    animation: sh-notif-rise .22s ease-out;
}
.sh-notif-dialog .sh-notif-icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto var(--sh-space-4);
    font-size: 1.15rem;
    line-height: 2.5rem;
}
.sh-notif-dialog h2 {
    margin: 0 0 var(--sh-space-3);
    font-family: var(--sh-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
}
.sh-notif-dialog .sh-notif-body { color: var(--sh-muted); text-align: left; }
.sh-notif-dialog-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sh-space-2);
    margin-top: var(--sh-space-6);
}
.sh-notif-dialog .sh-notif-close {
    position: absolute;
    top: var(--sh-space-2);
    right: var(--sh-space-2);
}

@keyframes sh-notif-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-notif-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .sh-notif-overlay,
    .sh-notif-dialog { animation: none; }
}

/* ══ Promotions ═══════════════════════════════════════════════════════════
   One slot per page, with two presentations. Text colours below were checked
   for WCAG contrast rather than selected visually. */
.sh-promo{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,#071226,#0d2344)}
.sh-promo::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 120% at 88% 20%,rgba(53,216,255,.16),transparent 60%),
  radial-gradient(50% 100% at 12% 90%,rgba(128,87,255,.14),transparent 60%);pointer-events:none}
.sh-promo-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:var(--sh-space-8);max-width:1180px;margin:0 auto;padding:44px 24px}
.sh-promo-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:5px 12px;
  border:1px solid rgba(53,216,255,.35);border-radius:99px;background:rgba(53,216,255,.08);
  color:var(--sh-cyan);font-family:var(--sh-font-body);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.sh-promo h2{margin:0 0 12px;color:#fff;font-family:var(--sh-font-heading);font-size:1.9rem;line-height:1.18;font-weight:800}
.sh-promo h2 em{font-style:normal;color:var(--sh-cyan)}
.sh-promo-body{margin:0;color:#b8c6da;font-family:var(--sh-font-body);font-size:1rem;line-height:1.6}
.sh-promo-body p{margin:0 0 10px}.sh-promo-body p:last-child{margin:0}
.sh-promo-body strong{color:#fff}
.sh-promo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}
.sh-promo-cta{display:inline-flex;align-items:center;gap:9px;min-height:var(--sh-target-min);
  padding:13px 26px;border-radius:var(--sh-radius-sm);color:#fff;
  /* --sh-blue is too light for white text at this size; this nearby shade
     reaches the WCAG AA contrast threshold. */
  background:#2f6bf0;
  font-family:var(--sh-font-body);font-weight:700;text-decoration:none;
  box-shadow:0 10px 26px rgba(47,107,240,.36);transition:transform .16s ease,box-shadow .16s ease}
.sh-promo-cta:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(47,107,240,.46);color:#fff;text-decoration:none}
.sh-promo-cta:focus-visible,.sh-promo-close:focus-visible,.sh-promo-dismiss:focus-visible{outline:3px solid var(--sh-cyan);outline-offset:3px}
.sh-promo-note{color:#8fa1ba;font-family:var(--sh-font-body);font-size:.86rem}
.sh-promo-close{position:absolute;top:12px;right:14px;z-index:2;min-width:var(--sh-target-min);min-height:var(--sh-target-min);
  padding:0;border:0;background:none;color:#7d8fa8;font-size:1.5rem;line-height:1;cursor:pointer}
.sh-promo-close:hover{color:#fff}

/* A CSS illustration rather than a photo: it scales without asset weight and
   does not require marketing to source an image for every promotion. */
.sh-promo-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:190px}
.sh-promo-card{width:100%;max-width:310px;padding:20px;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--sh-radius-lg);background:rgba(10,25,51,.62);backdrop-filter:blur(3px);
  box-shadow:0 20px 50px rgba(3,10,24,.5)}
.sh-promo-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sh-promo-card-top span{color:#8fa1ba;font-family:var(--sh-font-body);font-size:.78rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase}
.sh-promo-badge{padding:4px 10px;border-radius:99px;background:var(--sh-mint);color:#06301c;
  font-family:var(--sh-font-body);font-size:.74rem;font-weight:800}
/* Show the discount rather than a price. Percentages remain valid when the
   visitor changes currency. */
.sh-promo-discount{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.sh-promo-discount b{display:flex;align-items:baseline;color:var(--sh-mint);
  font-family:var(--sh-font-heading);font-size:2.6rem;font-weight:800;line-height:1}
.sh-promo-discount b span{font-size:1.35rem;margin-left:1px}
.sh-promo-discount i{color:#c9d6e6;font-family:var(--sh-font-body);font-size:.9rem;font-style:normal;line-height:1.25}
.sh-promo-list{margin:14px 0 0;padding:0;list-style:none}
.sh-promo-list li{position:relative;padding:5px 0 5px 24px;color:#c9d6e6;
  font-family:var(--sh-font-body);font-size:.9rem}
.sh-promo-list li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:8px;
  border-left:2px solid var(--sh-mint);border-bottom:2px solid var(--sh-mint);transform:rotate(-45deg)}

@media(max-width:860px){
  .sh-promo-grid{grid-template-columns:1fr;gap:var(--sh-space-6);padding:32px 20px}
  .sh-promo h2{font-size:1.55rem}
  .sh-promo-art{order:-1;min-height:0}
  .sh-promo-card{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.sh-promo-cta{transition:none}.sh-promo-cta:hover{transform:none}}

.sh-promo-overlay{position:fixed;inset:0;z-index:var(--sh-layer-floating);display:flex;
  align-items:center;justify-content:center;padding:24px;background:rgba(4,12,27,.78);
  animation:sh-promo-fade .2s ease-out}
.sh-promo-overlay[hidden]{display:none}
.sh-promo-modal{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;
  width:100%;max-width:920px;max-height:92vh;overflow:hidden;border-radius:var(--sh-radius-lg);
  background:var(--sh-white);box-shadow:0 36px 90px rgba(3,10,24,.55);
  animation:sh-promo-rise .26s ease-out}

/* Graphic side: treat the discount as the visual anchor. */
.sh-promo-modal-art{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;padding:40px 26px;
  background:linear-gradient(160deg,var(--sh-navy),#12315f)}
.sh-promo-modal-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(70% 60% at 50% 12%,rgba(53,216,255,.22),transparent 65%),
  radial-gradient(60% 50% at 20% 96%,rgba(128,87,255,.2),transparent 62%)}
.sh-promo-modal-art>*{position:relative;z-index:1}
.sh-promo-off{display:flex;align-items:baseline;gap:2px;color:var(--sh-mint);
  font-family:var(--sh-font-heading);font-weight:800;line-height:.9}
.sh-promo-off b{font-size:4.6rem}.sh-promo-off span{font-size:1.9rem}
.sh-promo-off-label{color:#fff;font-family:var(--sh-font-heading);font-size:1.05rem;
  font-weight:700;text-align:center}
.sh-promo-off-note{color:#c3d2e4;font-family:var(--sh-font-body);font-size:.84rem;text-align:center}
.sh-promo-ribbon{margin-top:6px;padding:6px 14px;border-radius:99px;
  border:1px solid rgba(169,255,203,.45);background:rgba(169,255,203,.12);
  color:var(--sh-mint);font-family:var(--sh-font-body);font-size:.8rem;font-weight:700}

/* Copy side on a light surface. */
.sh-promo-modal-copy{padding:38px 36px;overflow-y:auto;background:var(--sh-white)}
.sh-promo-modal-copy .sh-promo-eyebrow{border-color:rgba(57,120,255,.28);
  background:rgba(57,120,255,.08);color:#1d4fd8}
.sh-promo-modal-copy h2{margin:0 0 12px;color:var(--sh-ink);font-family:var(--sh-font-heading);
  font-size:1.72rem;line-height:1.2;font-weight:800}
.sh-promo-modal-copy h2 em{font-style:normal;color:#1d4fd8}
.sh-promo-modal-copy .sh-promo-body{color:var(--sh-muted);font-size:.98rem}
.sh-promo-modal-copy .sh-promo-body strong{color:var(--sh-ink)}
.sh-promo-modal-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:24px}
.sh-promo-modal-actions .sh-promo-cta{width:100%;justify-content:center;font-size:1.02rem;padding:15px 26px}
.sh-promo-dismiss{display:inline-flex;min-height:var(--sh-target-min);padding:6px 4px;align-items:center;border:0;background:none;color:#5b6b83;
  font-family:var(--sh-font-body);font-size:.9rem;text-decoration:underline;cursor:pointer}
.sh-promo-dismiss:hover{color:var(--sh-ink)}
/* The close control sits on the light panel. Initial focus goes to the offer
   action, while keyboard focus on close remains visible. */
.sh-promo-modal .sh-promo-close{top:10px;right:12px;color:#7c8ba1}
.sh-promo-modal .sh-promo-close:hover{color:var(--sh-ink)}
.sh-promo-modal .sh-promo-close:focus-visible{outline:2px solid #1d4fd8;outline-offset:2px;border-radius:6px}

@keyframes sh-promo-fade{from{opacity:0}to{opacity:1}}
@keyframes sh-promo-rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .sh-promo-overlay{padding:0;align-items:flex-end}
  .sh-promo-modal{grid-template-columns:1fr;max-height:94vh;
    border-radius:var(--sh-radius-lg) var(--sh-radius-lg) 0 0}
  .sh-promo-modal-art{flex-direction:row;gap:16px;padding:20px 24px}
  .sh-promo-off b{font-size:3rem}.sh-promo-off span{font-size:1.3rem}
  .sh-promo-off-label{text-align:left;font-size:.95rem}
  .sh-promo-off-note,.sh-promo-ribbon{display:none}
  .sh-promo-modal-copy{padding:24px}
  .sh-promo-modal-copy h2{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.sh-promo-overlay,.sh-promo-modal{animation:none}}

/* ---------------------------------------------------------------------------
   Domain privacy (WHOIS)

   The page is one argument, so it gets one strong image: the same record, read
   twice. The two panels are deliberately the same size and the same shape —
   the difference has to come from the values, not from one card being bigger
   or brighter than the other.

   The exposed panel is warm-tinted rather than red. It is not an error state:
   a public WHOIS is normal and legal, and the page is offering an option, not
   telling anyone off for not having bought it yet. */
.sh-domain-privacy .sh-landing-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; }
.sh-privacy-art svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.sh-priv-sheet { fill: rgba(10,26,50,.55); stroke: rgba(255,255,255,.14); stroke-width: 1.5 }
.sh-priv-label { fill: rgba(53,216,255,.55) }
.sh-priv-line { fill: rgba(255,255,255,.20) }
.sh-priv-mask { fill: rgba(53,216,255,.16); stroke: rgba(53,216,255,.42); stroke-width: 1 }
.sh-priv-hull { fill: rgba(10,26,50,.85); stroke: rgba(53,216,255,.42); stroke-width: 2 }
.sh-priv-shackle { fill: none; stroke: #35d8ff; stroke-width: 3.4; stroke-linecap: round }
.sh-priv-body { fill: #12294a; stroke: rgba(53,216,255,.55); stroke-width: 1.6 }
.sh-priv-keyhole { fill: #35d8ff }

/* The comparison. `dl` rather than a table: these are name/value pairs of one
   record, not rows of a dataset, and a screen reader announces them as such.

   Tinted for the same reason `.sh-use-cases` is: it is the section the page is
   built around, and the band tells the eye where to stop scrolling. */
.sh-privacy-compare { background: var(--sh-paper); }
.sh-privacy-records { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sh-privacy-record { padding: 26px 26px 22px; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-privacy-record h3 { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--sh-line); font: 700 16px/1.3 var(--sh-font-heading); }
.sh-privacy-record h3::before { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; content: ""; vertical-align: middle; }
.sh-privacy-record dl { margin: 0; }
.sh-privacy-record dl > div { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid #f0f4f9; }
.sh-privacy-record dl > div:first-child { border-top: 0; }
.sh-privacy-record dt { color: #3d4f69; font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.sh-privacy-record dd { margin: 0; color: var(--sh-ink); font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.sh-privacy-record > p { margin: 18px 0 0; color: #3d4f69; font-size: 13px; line-height: 1.6; }
.sh-privacy-record.is-exposed { background: #fffaf4; border-color: #f0e2cf; }
.sh-privacy-record.is-exposed h3::before { background: #d98a1f; }
.sh-privacy-record.is-protected h3::before { background: #1f9d63; }
.sh-privacy-hidden { display: inline-block; padding: 1px 8px; border-radius: 999px; color: #1f6d4a; background: #e6f6ee; font-size: 12px; letter-spacing: .04em; }

/* Four benefits rather than the usual three, so the cards lose the tall
   minimum: at a quarter of the width it would leave a hole under every one. */
.sh-value-grid-four { grid-template-columns: repeat(4, 1fr); }
.sh-value-grid-four article { min-height: 0; padding: 26px 24px; }
.sh-value-grid-four h3 { margin: 22px 0 10px; font-size: 18px; }
.sh-value-grid-four p { font-size: 14px; }
.sh-value-grid-four .sh-reveal:nth-child(4) { transition-delay: .24s; }

/* Price beside coverage, because neither answers the question on its own:
   "how much" is only useful once you know your extension is on the list. */
.sh-privacy-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.sh-privacy-plan-copy h2 { margin: 13px 0 14px; font: 700 clamp(26px,2.6vw,36px)/1.1 var(--sh-font-heading); letter-spacing: -.045em; }
.sh-privacy-plan-copy p { margin: 0 0 24px; color: #3d4f69; line-height: 1.75; }
.sh-privacy-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 26px; flex-wrap: wrap; }
.sh-privacy-price strong { color: var(--sh-ink); font: 700 clamp(32px,3.4vw,44px)/1 var(--sh-font-heading); letter-spacing: -.04em; }
.sh-privacy-price > span { color: #3d4f69; font-size: 14px; }
.sh-privacy-coverage { padding: 28px 30px; border: 1px solid var(--sh-line); border-radius: 16px; background: #fff; }
.sh-privacy-coverage-count { display: flex; align-items: baseline; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--sh-line); flex-wrap: wrap; }
.sh-privacy-coverage-count strong { color: var(--sh-blue); font: 700 34px/1 var(--sh-font-heading); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.sh-privacy-coverage-count span { max-width: 15em; color: #3d4f69; font-size: 14px; line-height: 1.5; }
.sh-privacy-coverage h3 { margin: 22px 0 12px; font: 700 13px/1.3 var(--sh-font-heading); letter-spacing: .01em; }
.sh-privacy-coverage > p { margin: 18px 0 0; color: #3d4f69; font-size: 13px; line-height: 1.65; }
.sh-privacy-tlds { display: flex; margin: 0; padding: 0; gap: 7px; list-style: none; flex-wrap: wrap; }
.sh-privacy-tlds li { padding: 5px 11px; border: 1px solid #d7e6ff; border-radius: 999px; color: #2f6ae8; background: #f3f7ff; font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sh-privacy-tlds.is-muted li { border-color: var(--sh-line); color: #3d4f69; background: #f6f8fb; }

/* The banner on the register and transfer pages. It sits between the search
   and the argument for the page it interrupts, so it stays one line tall on a
   desktop and never competes with the primary action above it. */
.sh-privacy-banner { padding: 22px 0; background: var(--sh-paper); }
.sh-privacy-banner-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sh-privacy-banner-icon { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--sh-blue); background: #fff; box-shadow: var(--sh-shadow-card); }
.sh-privacy-banner-icon svg { width: 24px; height: 24px; }
.sh-privacy-banner-copy { flex: 1 1 320px; min-width: 0; }
.sh-privacy-banner-copy strong { display: block; color: var(--sh-ink); font: 700 16px/1.35 var(--sh-font-heading); }
.sh-privacy-banner-copy p { margin: 4px 0 0; color: #3d4f69; font-size: 14px; line-height: 1.6; }
.sh-privacy-banner .sh-button { flex: 0 0 auto; }

/* These override rules already carrying a breakpoint of their own, and they sit
   at the end of the file, so they win on source order wherever the widths
   overlap. That means each one has to repeat the breakpoint the base rule uses
   — 1080px for the hero grid and the value grid, not a new number — or the
   layout stays wide past the point where the rest of the page has folded. */
@media (max-width: 1080px) {
    .sh-domain-privacy .sh-landing-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .sh-value-grid-four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .sh-privacy-records, .sh-privacy-plan-grid { grid-template-columns: 1fr; }
    .sh-privacy-records { gap: 16px; }
    .sh-privacy-plan-grid { gap: 34px; }
}
@media (max-width: 760px) {
    .sh-value-grid-four { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .sh-privacy-record { padding: 22px 20px 18px; }
    .sh-privacy-coverage { padding: 24px 22px; }
    .sh-privacy-coverage-count span { max-width: none; }
    .sh-privacy-banner-inner { gap: 16px; }
    .sh-privacy-banner .sh-button { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Account packs, inside the ladder panel.

   Three blocks, in the order a reseller asks the questions: what one account
   costs me, what I save against buying them one by one, and what I am actually
   selling. Only the pack families render them — every other ladder is
   untouched, which is why none of this widens or reflows the panel.

   The saving is tinted with the mint accent rather than a green of its own: it
   is the one positive number on a dark panel and the brand already has a colour
   for that. */
.sh-pack-unit { margin: -8px 0 14px; color: #b9c8de; font-size: 13px; }
.sh-pack-unit b { color: #eaf2ff; font-weight: 700; }
.sh-pack-unit-off { color: var(--sh-mint); }
.sh-pack-savings {
    display: grid;
    gap: 2px;
    margin: 0 0 18px;
    padding: 11px 13px;
    border: 1px solid rgba(169, 255, 203, .28);
    border-radius: 10px;
    background: rgba(169, 255, 203, .08);
}
.sh-pack-savings b { color: var(--sh-mint); font: 700 14px/1.35 var(--sh-font-heading); }
.sh-pack-savings > span { color: #9fb2cc; font-size: 12px; }
.sh-pack-savings s { color: #7d8ea8; }

/* The detail card under the ladder's table: what one account carries on the
   left, what every pack carries on the right. Two lists of the same shape, so
   the eye compares them without being told to. It reads as reference — quiet
   type, hairline rows — rather than as a second price list competing with the
   rows above it. */
.sh-ladder-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin-top: 16px; padding: 20px 14px; border: 1px solid var(--sh-line); border-radius: 14px; background: #fff; }
.sh-ladder-footer section { min-width: 0; }
.sh-ladder-footer strong { display: block; margin-bottom: 12px; color: var(--sh-ink); font: 700 13px/1.3 var(--sh-font-heading); }
.sh-ladder-footer ul { display: grid; margin: 0; padding: 0; gap: 9px; list-style: none; }
.sh-ladder-footer li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #f0f4f9; }
.sh-ladder-footer li:last-child { padding-bottom: 0; border-bottom: 0; }
.sh-ladder-footer li span { color: var(--sh-muted); font-size: 13px; }
.sh-ladder-footer li b { color: var(--sh-ink); font-size: 13px; text-align: right; }

@media (max-width: 700px) {
    .sh-ladder-footer { grid-template-columns: 1fr; gap: 22px; }
}

/* The two columns end on the same line. What absorbs the difference is the
   TABLE, whose rows share it out between them — a few pixels each, invisible —
   rather than the card, which was tried first and either centred its rows in a
   sea of white or spread them until they stopped reading as a list.

   The panel keeps its natural height via `align-self: start`, so this is also
   correct in the other direction: a family whose list is taller than the panel
   leaves the dark card alone instead of stretching a block of navy under its
   button. */
.sh-ladder { align-items: stretch; }
.sh-ladder-panel { align-self: start; }
.sh-ladder-list { display: flex; flex-direction: column; }
.sh-ladder-list ol { display: flex; flex: 1; flex-direction: column; }
/* The cap is insurance, not layout: the families in the catalogue have five to
   eight rungs and land near 60px a row. A future family with two or three would
   otherwise stretch each one to the height of a card, so past this point the
   column simply stops short of the panel instead. */
.sh-ladder-list li { display: flex; flex: 1; max-height: 92px; }
.sh-ladder-row { flex: 1; }

/* Homepage plan panels. One per family, all in the document, only the selected
   one visible. `[hidden]` needs the explicit rule because the grid and flex
   displays further up would otherwise beat the user-agent's `display: none`. */
.sh-plan-panel[hidden] { display: none; }