/* The 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.
   It began as INSPINIA's landing page (vendor HTML5_Full_Version/landing.html)
   and keeps that palette, Open Sans, the navy line over centred headings and
   the brand tab hanging from the navbar, but no longer its 13px type, square
   3px buttons, 1px inputs and upper-case headings.

   Every size comes from the scales below. Before them the two sites carried 39
   font sizes (8.5px to 56px, in half pixels), 25 corner radii and a different
   shadow on nearly every card, so no two pages quite matched. Add a value here
   before writing a literal one in a brand file. */

:root{
  /* Colour */
  --navy:#1ab394;
  --navy-dark:#179d82;
  --navy-tint:rgba(26,179,148,0.10);
  --lp-dark:#2f4050;      /* headings, dark panels */
  --lp-text:#676a6c;      /* body copy */
  /* Secondary text was #aeaeae: 2.2:1 on white, unreadable in daylight. */
  --lp-muted:#767b80;
  --lp-faint:#9a9fa3;     /* footnotes and placeholders only */
  --lp-gray:#f4f4f4;
  --lp-border:#e7eaec;
  --danger:#ed5565;
  --warning:#f8ac59;
  --info:#23c6c8;

  /* Type: 11 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 40, weights 400 / 600 / 700 */
  --fs-2xs:11px;  --fs-xs:12px;  --fs-sm:14px;  --fs-base:16px;  --fs-lg:18px;
  --fs-xl:20px;   --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:40px;
  --fs-hero:clamp(32px, 4.4vw, 48px);

  /* Corners: tags and chips / buttons and fields / cards and panels / pills */
  --r-sm:6px;  --r-md:8px;  --r-lg:12px;  --r-pill:999px;

  /* Spacing steps used for padding, margin and gap:
     2 4 6 8 10 12 14 16 · 20 24 28 32 · 40 48 56 64 · 80 96 120 */
  --section-y:80px;

  /* Elevation: resting card / raised or hovered / floating */
  --shadow-sm:0 1px 2px rgba(47,64,80,0.06);
  --shadow-md:0 8px 24px -10px rgba(47,64,80,0.20);
  --shadow-lg:0 24px 48px -20px rgba(47,64,80,0.28);

  /* The chat widget reads the DB brand colours; on the public site it follows
     the skin 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:var(--fs-base); line-height:1.6;}
h1, h2, h3, h4{color:var(--lp-dark);}
h1{font-size:var(--fs-3xl); font-weight:700; letter-spacing:-0.02em; line-height:1.2;}
h2{font-size:var(--fs-3xl); font-weight:600; letter-spacing:-0.02em; line-height:1.2;}
h3{font-weight:600;}
h1 .accent{color:var(--navy);}
section p, .section-head p, .lead, .sub{font-size:var(--fs-base); 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:16px 20px; border-radius:0 0 var(--r-md) var(--r-md); font-family:inherit; font-size:var(--fs-sm); font-weight:700; letter-spacing:0.02em; 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 14px; border-top:3px solid transparent; border-bottom:3px solid transparent; font-size:var(--fs-sm); font-weight:600; letter-spacing:0; 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{font-weight:600; font-size:var(--fs-sm); color:var(--lp-text);}
header .btn-plain:hover{color:var(--navy);}

/* BUTTONS — INSPINIA's .btn-primary and .btn-outline. */
.btn{justify-content:center; font-family:inherit; font-size:var(--fs-sm); font-weight:600; line-height:1.4; padding:10px 20px; border-radius:var(--r-md); border:1px solid transparent; box-shadow:none; letter-spacing:0;}
.btn-lg{padding:14px 28px; font-size:var(--fs-base); border-radius:var(--r-md);}
.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:var(--shadow-md);}
.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:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy);}
.badge{font-family:inherit; font-size:var(--fs-xs); font-weight:600; border-radius:var(--r-pill); 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);}
/* Tinted, not solid: a solid navy tag on every card out-shouted the heading under it. */
.feature-tag, .service-tag, .platform-tag{font-family:inherit; font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-sm); background:var(--navy-tint); color:var(--navy-dark);}
/* On a thumbnail the tint has nothing to sit on. */
.tag-row .platform-tag, .tag-row .service-tag, .hero .platform-tag, .hero .service-tag{background:#fff; color:var(--navy-dark);}

/* HEROES — the landing carousel: the template's header photograph, left-aligned
   white caption in the hero size, bold. */
.hero, .page-head, .hosting-head{
  /* The scrim keeps the caption readable where the photograph is bright: the
     inner pages' white text ran straight across the phone's screen. */
  --hero-scrim:linear-gradient(90deg, rgba(31,44,56,.88) 0%, rgba(31,44,56,.62) 55%, rgba(31,44,56,.30) 100%);
  background:var(--hero-scrim), var(--lp-dark) url('../vendor/inspinia/img/landing/header_one.jpg') 50% 0 / cover no-repeat;
  color:#fff; padding:120px 0 96px; margin-bottom:0;
}
.page-head, .hosting-head{background-image:var(--hero-scrim), url('../vendor/inspinia/img/landing/header_two.jpg'); padding:80px 0 64px;}
.hero h1, .page-head h1, .hosting-head h1{color:#fff; font-size:var(--fs-hero); font-weight:700; letter-spacing:-0.02em; line-height:1.12;}
.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, .hosting-head .lead{color:rgba(255,255,255,.92); font-size:var(--fs-lg); font-weight:400; line-height:1.6;}
.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:var(--section-y) 0;}
.section-head{text-align:center; max-width:680px; margin-left:auto; margin-right:auto; margin-bottom:48px;}
.section-head .eyebrow{justify-content:center;}
.section-head::before{content:''; display:block; width:48px; height:3px; margin:0 auto 20px; border-radius:var(--r-pill); background:var(--navy);}
.section-head h2{font-size:var(--fs-3xl); font-weight:600; 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 — white panels on the 1px rule with the resting shadow; the ones that
   are links lift on hover. */
.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, .product-card, .plan-card, .addon-card, .faq-item, .info-card, .result-list, .principle-card, .story-stat, .engage-card, .side-card, .contact-form, .booking-form, .case, .product-chip{border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border-color:var(--lp-border);}
.auth-card, .sheet, .contact-form, .booking-form{box-shadow:var(--shadow-md);}
/* 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);}
/* Two columns at phone width left room for three words a line. */
@media(max-width:560px){ .services-grid, .process-grid, .work-grid, .addons-grid{grid-template-columns:minmax(0, 1fr);} .process-grid{gap:24px;} .process-step::after{display:none;} }
@media(max-width:560px){ .feature-grid{grid-template-columns:minmax(0, 1fr); gap:16px;} .stat-band{gap:16px;} .stat-cell{padding:24px 16px;} .stat-cell .num{font-size:var(--fs-2xl);} }
.feature-card h3, .service-card h3, .plan-mini-name{font-family:inherit; font-size:var(--fs-lg); font-weight:600; letter-spacing:-0.01em; color:var(--lp-dark);}
.feature-card p, .service-card p, .plan-mini-meta{color:var(--lp-muted); font-size:var(--fs-sm);}
.plan-mini:hover, .service-card:hover, .work-card:hover, .case:hover, .product-card:hover, .product-chip:hover, .addon-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--navy);}
/* Marked by the navy border and its badge. It used to be scaled 4% as well,
   which pushed it out of line with the cards beside it. */
.plan-mini.featured, .plan-card.featured, .engage-card.featured, .offering-card.is-featured{background:#fff; border-color:var(--navy); box-shadow:var(--shadow-md); transform:none;}
.plan-name, .plan-price, .addon-price, .addon-card h3, .offering-name, .offering-price, .panel-title, .booking-day-title, .faq-item summary, .info-card h3, .side-card h3, .principle-card h3, .engage-card h3, .work-body h3, .case-body h3, .product-card h2, .pname, .domain-name .base, .tld-chip .tld, .total-row.grand{color:var(--lp-dark);}
.plan-mini-badge, .plan-badge, .engage-badge{background:var(--navy); color:#fff; border-radius:var(--r-sm); font-family:inherit;}
.plan-mini-price, .stat-cell .num, .stat-value{font-family:inherit; font-weight:700; color:var(--lp-dark); letter-spacing:-0.02em;}
.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:var(--r-lg); 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;}
/* 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 p, .transfer-box p, .location-band p{color:rgba(255,255,255,.9);}
.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:var(--section-y) 0;}
.testimonial blockquote, .testimonial .q-meta b{color:#fff; font-family:inherit; font-weight:400; font-style:normal;}
.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 #d5dadd; border-radius:var(--r-md); color:var(--lp-dark); box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{border-color:var(--navy); background-color:#fff; box-shadow:0 0 0 3px var(--navy-tint); 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:var(--lp-faint); 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);}
/* The domain search is one field: the bar is the box, so the input inside it
   carries no border of its own and the bar takes the focus ring. */
.search-bar input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), .search-bar input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):focus{border:0; box-shadow:none;}
.search-bar{border-radius:var(--r-lg);}
.search-bar:focus-within{border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-tint);}
label{font-family:inherit; font-size:var(--fs-sm); 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:var(--fs-2xs); font-weight:700; border-radius:var(--r-pill); padding:3px 10px; letter-spacing:0.02em;}
.status-active, .status-available, .status.paid, .autopay-badge{background:var(--navy); color:#fff;}
.status-expiring, .status-taken, .status.unpaid{background:var(--warning); color:#fff;}
.status-expired, .status-suspended, .status.expired{background:var(--danger); color:#fff;}
/* Premium was pale orange on a paler orange tint, which nobody could read. */
.status-premium{background:var(--lp-dark); color:#fff;}
.status-unknown{background:var(--lp-border); color:var(--lp-text);}
.status-neutral, .status-closed, .status.off{background:var(--lp-border); color:var(--lp-text);}

/* TABLES */
th{font-family:inherit; font-size:var(--fs-xs); 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:var(--fs-sm);}
.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:var(--fs-sm);}
.footer-col h4{font-family:inherit; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; color:var(--lp-dark);}
.footer-col a{color:var(--lp-muted); font-size:var(--fs-sm);}
.footer-col a:hover{color:var(--navy);}
.footer-about{color:var(--lp-muted); font-size:var(--fs-sm);}
.footer-bottom{font-family:inherit; font-size:var(--fs-xs); 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:var(--fs-3xl); font-weight:700; letter-spacing:-0.02em;}
.auth-card .sub{color:var(--lp-muted); font-size:var(--fs-base);}
.auth-field label{font-size:var(--fs-sm);}
.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:var(--fs-3xl); font-weight:700; letter-spacing:-0.02em;}
.dash-section-head h2{font-family:inherit; font-size:var(--fs-base); font-weight:600; letter-spacing:-0.01em;}
.sidebar .logo{font-family:inherit; font-weight:700; text-transform:uppercase; font-size:var(--fs-sm);}
.nav-label{font-family:inherit; font-weight:600; letter-spacing:1px;}
.nav-item{border-radius:var(--r-sm); font-size:var(--fs-sm); 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:var(--r-sm);}
.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 48px;}
  .hero p, .hero .sub, .hero .lead, .page-head p, .page-head .lead, .hosting-head p{font-size:var(--fs-base);}
  section{padding:56px 0;}
  :root{--section-y:56px;}
  header .nav-links a{padding:0 8px;}
}
@media(max-width:1000px){
  .nav-item.active{box-shadow:inset 0 -2px 0 var(--navy);}
}

/* PHONE NAVIGATION — below 1000px the brand files hid .nav-links and put
   nothing in their place: on a phone neither site had a way to reach Hosting,
   Services, Work or About except the footer. The links now run as a second
   row under the logo, scrolling sideways if they outgrow the screen. No
   script and no hidden menu to open. */
@media(max-width:1000px){
  header nav.wrap{flex-wrap:wrap; align-items:center; row-gap:0; column-gap:12px;}
  header .logo{align-self:flex-start;}
  header .nav-right{display:contents;}
  header .logo{margin-right:auto;}
  header .nav-links{display:flex; order:3; flex:0 0 100%; gap:0; overflow-x:auto; scrollbar-width:none; margin:0 -8px;}
  header .nav-links::-webkit-scrollbar{display:none;}
  header .nav-links a{flex:none; padding:10px 8px; border-top:0; border-bottom-width:2px; white-space:nowrap;}
  header .nav-links a.active{border-bottom-color: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:120px;}
body:has(> header + :is(.page-head, .hosting-head)) :is(.page-head, .hosting-head){padding-top:120px;}

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

/* The navy band runs edge to edge, square. */
.process{margin:0; border-radius:0; padding:var(--section-y) 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; letter-spacing:-0.01em;}

/* Room for the two-row phone header over a hero (after the rules above, which
   it has to out-rank). */
@media(max-width:1000px){
  body:has(> header + .hero) .hero{padding-top:190px;}
  body:has(> header + :is(.page-head, .hosting-head)) :is(.page-head, .hosting-head){padding-top:150px;}
}

/* Checkout and transfer steps on the photograph: the current step was drawn in
   body grey, dimmer than the steps around it. */
.page-head .steps{color:rgba(255,255,255,.7); flex-wrap:wrap;}
.page-head .steps .step.active{color:#fff;}
.page-head .steps .sep{color:rgba(255,255,255,.4);}