/* 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);}
/* Separate cards, not tiles joined by a 1px seam: on the white page the seams
   read as one box with no space between the items. */
.feature-grid, .stat-band{gap:24px; background:transparent; border:0; border-radius:0; overflow:visible;}
.feature-card, .stat-cell{border:1px solid var(--lp-border);}
@media(max-width:560px){ .feature-grid{grid-template-columns:minmax(0, 1fr); gap:16px;} .stat-band{gap:16px;} .stat-cell{padding:22px 18px;} .stat-cell .num{font-size:24px;} }
.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;}
.transfer-box{border-radius:16px;}
.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;}
/* The fact labels kept about.css's slate grey, which vanishes on the navy band. */
.location-band .location-fact{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25);}
.location-band .location-fact .k{color:rgba(255,255,255,0.85);}
.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;}
/* The browser's placeholder grey sat within a shade of the typed text, so the
   checkout's sample "Thabo Mokoena" read as filled in beside "name is required". */
input::placeholder, textarea::placeholder{color:#a9acae; opacity:1;}
/* Fields keep their own text colour inside the white-on-photo heroes: inheriting
   there made what was typed into the domain search white on a white box. */
.hero input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), .hero select, .hero textarea, .page-head input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), .page-head select, .page-head textarea, .hosting-head input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), .hosting-head select, .hosting-head textarea{color:var(--lp-text);}
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;}