/* INSPINIA landing page (vendor HTML5_Full_Version/landing.html), as a skin for
   both brands' public sites and client pages. Loaded last, after the brand CSS,
   so the brand files keep their layout and this sets the look: Open Sans, the
   #676a6c body text, the #1ab394 navy accent, white and #f4f4f4 gray sections,
   light 30px headings over the short navy line, flat 4px cards, square buttons,
   uppercase bold navigation with the navy top border on the active link.
   Content and markup are the brands' own; only the design follows the template. */

:root{
  --navy:#1ab394;
  --navy-dark:#179d82;
  --lp-text:#676a6c;
  --lp-muted:#aeaeae;
  --lp-gray:#f4f4f4;
  --lp-border:#e7eaec;
  --lp-dark:#2f4050;
  /* The chat widget reads the DB brand colours; on the public site it follows
     the template like everything else. */
  --theme-color:#1ab394;
  --accent-color:#1ab394;
}

/* TYPE ---------------------------------------------------------------- */
body{font-family:'Open Sans', helvetica, arial, sans-serif; color:var(--lp-text); background:#fff; font-size:13px; line-height:1.6;}
h1, h2, h3, h4{color:var(--lp-text);}
h1{font-size:30px; font-weight:300; letter-spacing:0; line-height:1.2;}
h2{font-size:30px; font-weight:300; letter-spacing:0; line-height:1.2;}
h3{font-weight:600;}
h1 .accent{color:var(--navy);}
section p, .section-head p, .lead, .sub{font-size:13px; color:var(--lp-muted);}
a{transition:color .15s ease;}
::selection{background:var(--navy); color:#fff;}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}

/* NAVBAR — the landing navbar in its scrolled state: white, a hairline under it,
   uppercase bold links that turn navy, a navy top bar on the active one, and
   the brand as a navy tab hanging from the top edge. */
header{position:sticky; top:0; background:#fff; backdrop-filter:none; border-bottom:1px solid var(--lp-border); box-shadow:none;}
header nav.wrap{height:auto; min-height:64px; align-items:stretch;}
header .logo{align-self:flex-start; background:var(--navy); color:#fff; padding:15px 20px; border-radius:0 0 5px 5px; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:0; text-transform:uppercase; transition:background .3s ease;}
header .logo:hover{background:var(--navy-dark);}
header .logo .logo-mark{display:none;}
header .logo .logo-word, header .logo .logo-word-alt{color:#fff;}
header .nav-right, header .nav-actions{align-items:center;}
header .nav-links{align-self:stretch; gap:0;}
header .nav-links a{display:flex; align-items:center; padding:0 12px; border-top:6px solid transparent; font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--lp-text);}
header .nav-links a:hover{color:var(--navy);}
header .nav-links a.active{color:var(--lp-text); border-top-color:var(--navy);}
header .btn-plain{text-transform:uppercase; font-weight:700; letter-spacing:1px; font-size:13px; color:var(--lp-text);}
header .btn-plain:hover{color:var(--navy);}

/* BUTTONS — INSPINIA's .btn-primary and .btn-outline. */
.btn{font-family:inherit; font-size:14px; font-weight:600; padding:10px 20px; border-radius:3px; border:1px solid transparent; box-shadow:none; letter-spacing:0;}
.btn-lg{padding:12px 26px; font-size:15px; border-radius:3px;}
.btn-amber, .btn-cta, .btn-indigo, .btn-ink, .btn-primary{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:none;}
.btn-amber:hover, .btn-cta:hover, .btn-indigo:hover, .btn-ink:hover, .btn-primary:hover{background:var(--navy-dark); border-color:var(--navy-dark); color:#fff; box-shadow:none;}
.btn-ghost{background:transparent; color:var(--navy); border:1px solid var(--navy);}
.btn-ghost:hover{background:var(--navy); color:#fff; box-shadow:none;}
.btn-plain{border:none;}

/* EYEBROWS / BADGES — the landing's small navy captions. */
.eyebrow{font-family:inherit; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--navy);}
.badge{font-family:inherit; font-size:11px; font-weight:600; border-radius:3px; border-color:var(--lp-border); color:var(--lp-text);}
.badge .live{background:var(--navy); box-shadow:0 0 0 4px rgba(26,179,148,0.16);}
.feature-tag, .service-tag, .platform-tag{font-family:inherit; font-weight:600; border-radius:3px; background:var(--navy); color:#fff;}

/* HEROES — the landing carousel: the template's header photograph, left-aligned
   uppercase white caption at 38px bold. */
.hero, .page-head, .hosting-head{
  background:#2f4050 url('../vendor/inspinia/img/landing/header_one.jpg') 50% 0 / cover no-repeat;
  color:#fff; padding:110px 0 90px; margin-bottom:0;
}
.page-head, .hosting-head{background-image:url('../vendor/inspinia/img/landing/header_two.jpg'); padding:80px 0 60px;}
.hero h1, .page-head h1, .hosting-head h1{color:#fff; font-size:38px; font-weight:700; text-transform:uppercase; letter-spacing:-1.5px; line-height:1.15;}
.hero h1 .accent, .page-head h1 .accent, .hosting-head h1 .accent{color:#fff; opacity:.85;}
.hero p, .hero .sub, .hero .lead, .page-head p, .page-head .lead, .hosting-head p{color:#fff; font-size:14px; font-weight:700; text-transform:uppercase; line-height:1.4;}
.hero .eyebrow, .page-head .eyebrow, .hosting-head .eyebrow{color:#fff;}
.hero .badge{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff;}
.hero .hero-note{color:rgba(255,255,255,.8);}
.hero .btn-ghost, .page-head .btn-ghost, .hosting-head .btn-ghost{color:#fff; border-color:#fff;}
.hero .btn-ghost:hover, .page-head .btn-ghost:hover, .hosting-head .btn-ghost:hover{background:#fff; color:var(--navy);}
.hero .btn-plain{color:#fff;}

/* SECTIONS — headings centred under the 60px navy line, white and gray bands. */
section{padding:60px 0;}
.section-head{text-align:center; margin-left:auto; margin-right:auto; margin-bottom:40px;}
.section-head .eyebrow{justify-content:center;}
.section-head::before{content:''; display:block; width:60px; height:1px; margin:0 auto 20px; border-bottom:2px solid var(--navy);}
.section-head h2{font-size:30px; font-weight:300; margin-top:10px;}
.features, .domains-teaser, .clients, .addons-section, .products-teaser, .offerings, .gray-section{background:var(--lp-gray); border-top:none; border-bottom:none;}

/* CARDS — flat white panels on the 1px #e7eaec rule. The product cards are
   not in this list: they keep the 16px radius products.css gives them. */
.about-stat, .feature-card, .plan-mini, .service-card, .stat-card, .stat-cell, .upsell-card, .case-card, .work-card, .offering-card, .tld-chip, .panel, .section, .auth-card, .sheet{border-radius:4px; box-shadow:none; border-color:var(--lp-border);}
.feature-grid, .stat-band{border-radius:4px; border-color:var(--lp-border); background:var(--lp-border);}
.feature-card h3, .service-card h3, .plan-mini-name{font-family:inherit; font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:-.5px; color:var(--lp-text);}
.feature-card p, .service-card p, .plan-mini-meta{color:var(--lp-muted); font-size:13px;}
.plan-mini:hover, .service-card:hover{transform:none; box-shadow:none; border-color:var(--navy);}
.plan-mini.featured{background:var(--lp-gray); border-color:var(--lp-border); transform:scale(1.04);}
.plan-mini-badge{background:var(--navy); color:#fff; border-radius:3px; font-family:inherit;}
.plan-mini-price, .stat-cell .num, .stat-value{font-family:inherit; font-weight:700; color:var(--lp-text); letter-spacing:0;}
.plan-mini-price span, .pricing-price span{color:var(--navy);}
.stat-cell .num{color:var(--navy);}

/* NAVY SECTIONS — the landing's testimonials band, for CTAs, quotes and the
   bands the brands drew in dark ink. */
.cta-banner, .process, .location-band, .transfer-box{background:var(--navy); background-image:none; border-radius:4px; color:#fff;}
.cta-banner::after{display:none;}
.cta-banner h2, .cta-banner p, .process h2, .process h3, .process p, .process .section-head p, .location-band h2, .location-band p, .transfer-box h3, .transfer-box p{color:#fff;}
.process .section-head::before, .cta-banner .section-head::before{border-color:#fff;}
.process .eyebrow, .location-band .eyebrow{color:#fff;}
.cta-banner .btn, .transfer-box .btn, .process .btn, .location-band .btn{background:#fff; border-color:#fff; color:var(--navy);}
.cta-banner .btn:hover, .transfer-box .btn:hover, .process .btn:hover, .location-band .btn:hover{background:var(--lp-gray); color:var(--navy-dark);}
.testimonial{background:var(--navy); color:#fff; padding:80px 0 90px;}
.testimonial blockquote, .testimonial .q-meta b{color:#fff; font-family:inherit; font-weight:300; font-style:italic;}
.testimonial .q-meta span{color:rgba(255,255,255,.75);}
.testimonial .q-avatar{background:#fff; color:var(--navy); font-family:inherit;}

/* FORMS — INSPINIA's .form-control. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea{
  font-family:inherit; background-color:#fff; border:1px solid #e5e6e7; border-radius:1px; color:inherit; box-shadow:none;
  transition:border-color .15s ease-in-out;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{border-color:var(--navy); background-color:#fff; box-shadow:none; outline:none;}
label{font-family:inherit; font-weight:600; color:var(--lp-text); text-transform:none; letter-spacing:0;}

/* STATUS — INSPINIA labels: primary, warning, danger, default. */
.status-chip, .inv-status, .status, .product-status, .autopay-badge{font-family:inherit; font-size:10px; font-weight:600; border-radius:.25em; padding:3px 8px; letter-spacing:0;}
.status-active, .status-available, .status.paid, .autopay-badge{background:var(--navy); color:#fff;}
.status-expiring, .status-taken, .status.unpaid{background:#f8ac59; color:#fff;}
.status-expired, .status-suspended, .status.expired{background:#ed5565; color:#fff;}
.status-neutral, .status-closed, .status.off{background:#d1dade; color:#5e5e5e;}

/* TABLES */
th{font-family:inherit; font-size:12px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--lp-text); background:#fff; border-bottom:1px solid var(--lp-border);}
td{border-top:1px solid var(--lp-border); font-size:13px;}
.mono{font-family:inherit;}

/* FOOTER — the landing closes on a gray band with small muted text. */
footer{background:var(--lp-gray); border-top:none;}
footer .logo{background:none; padding:0; color:var(--lp-text); font-family:inherit; text-transform:uppercase; font-size:14px;}
.footer-col h4{font-family:inherit; font-size:13px; font-weight:700; letter-spacing:1px; color:var(--lp-text);}
.footer-col a{color:var(--lp-muted); font-size:13px;}
.footer-col a:hover{color:var(--navy);}
.footer-about{color:var(--lp-muted);}
.footer-bottom{font-family:inherit; font-size:13px; color:var(--lp-muted); border-top-color:var(--lp-border);}

/* AUTH — the landing contact section: gray band behind the template's world map. */
.auth-wrap{background:var(--lp-gray) url('../vendor/inspinia/img/landing/word_map.png') 50% 50% no-repeat; background-size:auto;}
.auth-card h1{font-family:inherit; font-size:30px; font-weight:300; letter-spacing:0;}
.auth-card .sub{color:var(--lp-muted); font-size:13px;}
.auth-field label{font-size:13px;}
.auth-link{color:var(--navy);}

/* CLIENT DASHBOARD — the landing's surfaces carried into the portal. */
.main{background-image:none;}
.main h1{font-family:inherit; font-size:30px; font-weight:300; letter-spacing:0;}
.dash-section-head h2{font-family:inherit; font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:-.5px;}
.sidebar .logo{font-family:inherit; font-weight:700; text-transform:uppercase; font-size:14px;}
.nav-label{font-family:inherit; font-weight:600; letter-spacing:1px;}
.nav-item{border-radius:3px; font-size:13px; font-weight:600; color:var(--lp-text);}
.nav-item:hover{background:var(--lp-gray); color:var(--navy);}
.nav-item.active{background:var(--lp-gray); color:var(--navy); box-shadow:inset 3px 0 0 var(--navy);}
.nav-item.active .ic{color:var(--navy);}
.avatar{background:var(--navy); color:#fff; font-family:inherit;}
.dash-flash, .auth-status{background:#fff; border:1px solid var(--navy); border-left-width:4px; color:var(--lp-text); border-radius:3px;}
.row-action, .section-link, .ticket-link, .ticket-open{color:var(--navy);}
.toggle-btn.on{background:var(--navy); color:#fff;}

@media(max-width:768px){
  .hero, .page-head, .hosting-head{padding:80px 0 50px;}
  .hero h1, .page-head h1, .hosting-head h1{font-size:28px;}
  header .nav-links a{padding:0 8px;}
}
@media(max-width:1000px){
  .nav-item.active{box-shadow:inset 0 -2px 0 var(--navy);}
}

/* NAVBAR OVER THE HERO — as on the template: fixed, transparent, white links on
   the photograph; js/landing-nav.js adds .navbar-scroll past 80px and the bar
   turns white with the hairline under it. Applies only where the header sits
   straight on a hero, so the log-in and checkout pages keep the white bar. */
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header{position:fixed; left:0; right:0; transition:background .3s ease-in-out, border-color .3s ease-in-out;}
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header:not(.navbar-scroll){background:transparent; border-bottom-color:transparent;}
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header:not(.navbar-scroll) .nav-links a,
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header:not(.navbar-scroll) .nav-links a.active,
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header:not(.navbar-scroll) .btn-plain{color:#fff;}
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header:not(.navbar-scroll) .nav-links a:hover{color:var(--navy);}
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header:not(.navbar-scroll) .btn-ghost{color:#fff; border-color:#fff;}
body:has(> header + :is(.hero, .page-head, .hosting-head)) > header:not(.navbar-scroll) .btn-ghost:hover{background:#fff; color:var(--navy);}
body:has(> header + .hero) .hero{padding-top:170px;}
body:has(> header + :is(.page-head, .hosting-head)) :is(.page-head, .hosting-head){padding-top:140px;}

/* Brand rules that out-rank the hero caption colour. */
.hero .hero-top p.sub, .hero .hero-copy p.sub{color:#fff;}

/* The template's navy band runs edge to edge, square. */
.process{margin:0; border-radius:0; padding:60px 0;}
.process-num{color:rgba(255,255,255,.8); font-family:inherit; font-weight:700;}
.process-step p, .process .section-head p{color:rgba(255,255,255,.85);}
.process-step:not(:last-child)::after{background:rgba(255,255,255,.25);}
.process-step h3{font-family:inherit; text-transform:uppercase; letter-spacing:-.5px;}