/* ==========================================================================
   FinjanHost — site stylesheet
   Tokens are the same ones the Elementor kit defines, read out of the kit's
   own global CSS rather than sampled from a screenshot, so the static site
   and the WHMCS client area stay in step.
   ========================================================================== */

/* ---- Fonts (self-hosted; no Google Fonts request) ---------------------- */
/* Arabic faces: IBM Plex Sans Arabic for text, Cairo for headings. Both are
   limited to Arabic letters (unicode-range), so Latin words, numbers and
   prices keep Hind and Lato, and English pages never download them. */
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/plex-arabic-400.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/plex-arabic-600.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Plex Arabic';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/plex-arabic-700.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:600 900;font-display:swap;
  src:url(../fonts/cairo-arabic-var.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Hind';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/hind-5au19_a8oxmifmjaerysjq.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/hind-5au69_a8oxmidgl4ba.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/hind-5au19_a8oxmifjpberysjq.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/hind-5au19_a8oxmiflzcerysjq.woff2) format('woff2')}
@font-face{font-family:'Hind';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/hind-5au19_a8oxmifnjderysjq.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/lato-s6u9w4bmutphh6uvswipgq.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/lato-s6u9w4bmutphh50xswipgq.woff2) format('woff2')}

:root{
  --navy:#1A3E7C; --navy-deep:#042551; --navy-dark:#152F5E;
  /* ---- Accent: one orange ------------------------------------------------
     Every warm colour here used to be one of five: #FF643F (hue 12), #FE575B
     (hue 359), #B93714 (13), #BF3742 (355) and #FF9270 (14). Two different hue
     families -- orange and crimson -- mixed across buttons, ribbons, eyebrows
     and icons, and the button itself was a gradient from an orange to slate,
     so it changed hue down its own height.

     Now one hue, 21-22 degrees. That is the complement of the navy (217) and
     teal (199) the rest of the site is built from, so the warm side of the
     palette and the cool side belong to each other instead of competing.

     Contrast is measured, not assumed. The old button carried white text at
     2.94:1 and failed AA; every step below passes. */
  --accent:#C25214;          /* fills: buttons, ribbon, featured header. White 4.66:1 */
  --accent-strong:#A8450F;   /* hover, and accent text on a light ground. White 5.96:1 */
  --accent-deep:#93390D;     /* foot of the hover gradient */
  --accent-light:#FFB183;    /* on navy only: nav links, hero price. 5.86:1 on navy */
  --accent-wash:#FFF3EC;     /* palest warm ground */
  --accent-shadow:rgba(194,82,20,.34);

  /* The old names still work, so no rule below had to be rewritten. */
  --coral:var(--accent);
  --coral-alt:var(--accent-strong);
  --cta-face:var(--accent);
  --cta-face-hover:var(--accent-strong);
  /* Filled shapes -- buttons, the featured plan header, the ribbon, the switch
     -- are all the one flat accent. They used to carry a top-to-bottom gradient,
     which read as a second, lighter orange beside the flat ones. */
  --cta-underlay:none;
  --cta-underlay-hover:none;
  /* A hairline of light along the top edge instead of the old -100px inset
     flood, which existed only to rebuild a two-colour composite. */
  --cta-inset:inset 0 1px 0 rgba(255,255,255,.16);
  --cta-inset-hover:inset 0 1px 0 rgba(255,255,255,.12);
  --cta-solid:var(--accent-strong);
  --cta-shadow:var(--accent-shadow);
  --nav-active:var(--accent-light);
  --ink:#2E354E; --muted:#5B6275; --line:#DFE5F3;
  --tint:#EDF1FC; --tint-2:#DDE5F8; --bg:#F5F7FC;
  --teal:#0B6B95;
  --r:10px; --r-lg:20px; --pill:40px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --shadow-lg:0 20px 40px rgba(4,37,81,.16);
  --sp:16px;
  --font:'Hind',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --head:'Lato','Hind',-apple-system,'Segoe UI',Arial,sans-serif;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.7;
  color:var(--ink);background:#fff;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:#0A5F85}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;color:var(--navy);margin:0 0 .5em;line-height:1.15}
h1{font-size:clamp(30px,4.6vw,50px);letter-spacing:-1.2px}
h2{font-size:clamp(25px,3.4vw,38px);letter-spacing:-.8px}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.4px}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:#fff;color:var(--navy);padding:12px 20px;z-index:100}
.skip:focus{inset-inline-start:12px;top:12px}
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--navy);outline-offset:2px;border-radius:4px;
}
.site-head :where(a,button):focus-visible,
.site-foot a:focus-visible,
.hero :where(a,button):focus-visible{outline-color:#fff}

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:.3px;
  padding:13px 30px;border:none;border-radius:var(--pill);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background-color:var(--cta-face);
  background-image:var(--cta-underlay);
  box-shadow:var(--cta-inset);
  color:#fff;
}
.btn-primary:hover{
  background-color:var(--cta-face-hover);
  background-image:var(--cta-underlay);
  box-shadow:var(--cta-inset-hover),0 10px 24px var(--cta-shadow);
  color:#fff;
}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}
.btn-block{width:100%}
.btn-login{background-color:var(--cta-face);background-image:var(--cta-underlay);box-shadow:var(--cta-inset);color:#fff;padding:11px 26px}
.btn-login:hover{background-color:var(--cta-face-hover);box-shadow:var(--cta-inset-hover);color:#fff}
.ic{width:1.15em;height:1.15em;flex:0 0 auto}
.ic.sm{width:1em;height:1em}

/* ---- Header ------------------------------------------------------------ */
/* Matched to the live site: 72px bar, logo 172x36, nav centred between the
   logo and the login pill. Nav items are 14px / weight 400 / uppercase with
   1px tracking -- the live values, read off the page. */
.site-head{background:var(--navy);position:sticky;top:0;z-index:50}
.head-inner{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{flex:0 0 auto}
.brand img{width:auto;height:40px}
.mainnav{
  flex:1 1 auto;
  display:flex;
  justify-content:center;      /* centres the links, not the whole bar */
}
.mainnav ul{display:flex;gap:38px;list-style:none;margin:0;padding:0}
.mainnav a{
  color:#fff;
  font-weight:400;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:6px 0;
  display:block;
}
/* Nav links on the navy bar need their own step: the accent fill is 2.23:1 on
   navy and unreadable there. --accent-light is the same hue lifted to 5.86:1. */
.mainnav a:hover,.mainnav a.on{color:var(--nav-active)}
.btn-login{
  flex:0 0 auto;
  background-color:var(--cta-face);background-image:var(--cta-underlay);
  box-shadow:var(--cta-inset);
  color:#fff;padding:12px 28px;font-size:14px;
  text-transform:uppercase;letter-spacing:1px;
}
.btn-login:hover{background-color:var(--cta-face-hover);box-shadow:var(--cta-inset-hover);color:#fff}
.nav-toggle{
  display:none;background:transparent;
  border:1.5px solid rgba(255,255,255,.4);border-radius:8px;
  width:46px;height:42px;cursor:pointer;
}
.bars,.bars::before,.bars::after{
  display:block;height:2px;width:20px;background:#fff;margin-inline:auto;
  position:relative;transition:transform .2s ease,opacity .2s ease;
}
.bars::before,.bars::after{content:'';position:absolute;inset-inline-start:0}
.bars::before{top:-6px}.bars::after{top:6px}
.nav-toggle[aria-expanded=true] .bars{background:transparent}
.nav-toggle[aria-expanded=true] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ---- Hero -------------------------------------------------------------- */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;padding:84px 0 96px;text-align:center;
}
.hero h1{color:#fff;margin-bottom:14px}
.hero .lede{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.88);max-width:66ch;margin:0 auto 12px}
.hero .from{color:var(--accent-light);font-weight:600;margin-bottom:28px}
.hero .btn{margin-inline:6px}

/* Service strip that overlaps the hero ---------------------------------- */
.strip{margin-top:-56px;position:relative;z-index:2;padding-bottom:64px}
.strip-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  list-style:none;margin-inline:auto;padding:0;
}
.strip-card{
  position:relative;                 /* anchors the stretched link */
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:30px 26px 26px;
  display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.strip-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* Icon in a tinted disc that fills with brand colour on hover, so the card
   reads as one object rather than a heading with a link stuck underneath. */
.strip-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;
  background:var(--tint);color:var(--cta-solid);
  margin-bottom:16px;
  transition:background-color .2s ease,color .2s ease;
}
.strip-ic .ic{width:28px;height:28px}
.strip-card:hover .strip-ic{background:var(--cta-solid);color:#fff}
.strip-card h3{margin:0 0 6px;font-size:20px}
.strip-card p{color:var(--muted);font-size:15px;flex:1 1 auto;margin:0 0 18px}
.strip-link{color:inherit;text-decoration:none}
/* Without this the heading picks up the global link hover and turns teal,
   which fights the coral arrow directly beneath it. */
.strip-card:hover .strip-link,
.strip-link:hover,
.strip-link:focus{color:var(--eyebrow)}
/* Stretching the anchor makes the whole card clickable without nesting a
   block inside a link, which would be invalid and unreadable to assistive
   tech. The heading text stays the accessible name. */
.strip-link::after{content:'';position:absolute;inset:0;border-radius:inherit}
.strip-link:focus-visible{outline:none}
.strip-card:has(.strip-link:focus-visible){
  outline:3px solid var(--navy);outline-offset:3px;
}
.strip-go{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--eyebrow);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.8px;
  transition:gap .2s ease;
}
.strip-go svg{width:17px;height:17px}
.strip-card:hover .strip-go{gap:13px}

/* ---- Sections ---------------------------------------------------------- */
.section{padding:72px 0}
.section-alt{background:var(--bg)}
.section-head{text-align:center;max-width:62ch;margin:0 auto 44px}
.section-head p{color:var(--muted);margin:0}
.eyebrow{
  display:inline-block;color:var(--cta-solid);font-weight:700;font-size:16px;
  letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px;
}

/* ---- Plan cards -------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;align-items:stretch}
.plan{
  position:relative;background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.plan-head{background:var(--navy);color:#fff;padding:30px 24px;text-align:center}
/* The coral header is built from the same three layers as a primary button
   -- face colour, the vertical underlay, the inset flood -- rather than a flat
   colour that only looked the same on the day it was picked. Change the button
   and the header follows. */
.plan-featured .plan-head{
  background-color:var(--cta-face);
  background-image:var(--cta-underlay);
  box-shadow:var(--cta-inset);
}
/* The featured card lifts like the others, but its header keeps its colour:
   a second orange appearing on hover was the only place two could be seen
   side by side. */
.plan-head h3{color:#fff;font-size:26px;margin:0 0 2px}
.plan-head p{margin:0;color:rgba(255,255,255,.9);font-size:15px}
.ribbon{
  position:absolute;top:16px;inset-inline-end:-34px;transform:rotate(45deg);
  background:var(--coral);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;padding:5px 42px;z-index:1;
}
.plan-price{text-align:center;padding:26px 20px 12px;display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.plan-price .was{color:var(--muted);font-size:19px}
.plan-price .now{font-family:var(--head);font-weight:900;color:var(--navy);line-height:1;display:inline-flex;align-items:flex-start}
.plan-price .cur{font-size:26px;margin-top:6px}
.plan-price .int{font-size:64px;letter-spacing:-2px}
.plan-price .dec{font-size:26px;margin-top:6px}
.plan-price .per{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);align-self:center}
.plan-specs{list-style:none;margin:0;padding:0 24px;flex:1 1 auto}
.plan-specs li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.plan-specs li:last-child{border-bottom:none}
.plan-specs li[hidden]{display:none}
.plan-specs li:has(+ li[hidden]:last-child){border-bottom:none}
.plan-specs .ic{color:var(--coral);width:22px;height:22px}
.plan-specs b{font-weight:700;color:var(--ink)}
.plan-cta{padding:22px 24px 28px;text-align:center;margin-top:auto}
.plan-buy.is-off{opacity:.55;cursor:default;pointer-events:none}
/* 4 plans sit in one row; with 5, the last two are centred under the first 3 */
@media (min-width:1200px){
  .plans[data-count="4"]{grid-template-columns:repeat(4,1fr);gap:20px}
  .plans[data-count="5"]{grid-template-columns:repeat(6,1fr)}
  .plans[data-count="5"] > .plan{grid-column:span 2}
  .plans[data-count="5"] > .plan:nth-child(4){grid-column:2 / span 2}
}
.plans-sub{text-align:center;max-width:62ch;margin:64px auto 28px}
.plans-sub h3{margin:0 0 6px;font-size:1.5rem}
.plans-sub p{margin:0;color:var(--muted)}
.plan-cta .note{margin:12px 0 0;font-size:13px;color:var(--muted)}

/* ---- Feature / trust rows --------------------------------------------- */
.cols-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.feature{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:30px 26px}
.feature .ic{width:34px;height:34px;color:var(--coral);margin-bottom:12px}
.feature p{color:var(--muted);margin:0;font-size:15px}
/* ---- Software strip ---------------------------------------------------
   Was a row of grey logos at 75% opacity, which is the house style of every
   hosting site built in 2016. Each mark now sits in its own card with a caption
   saying what it actually does, in full colour, and the featured one -- cPanel
   -- is drawn larger in the middle of the row. */
.stack{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px;
}
.stack-item{
  flex:0 1 168px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:22px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.stack-item:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--tint-2)}
.stack-logo{display:flex;align-items:center;justify-content:center;height:36px}
.stack-logo img{height:34px;width:auto;max-width:100%;object-fit:contain}
.stack-word{
  font-family:var(--head);font-weight:700;font-size:19px;letter-spacing:-.4px;
  color:var(--navy);line-height:1;
}
.stack-cap{
  font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);
}
/* The anchor of the row: wider, lifted, and ringed in the brand coral. */
.stack-lead{
  flex:0 1 208px;padding:28px 20px;border-color:#F3CBB3;
  box-shadow:0 10px 26px rgba(194,82,20,.12);background:linear-gradient(180deg,#fff 0%,var(--accent-wash) 100%);
}
.stack-lead .stack-logo{height:44px}
.stack-lead .stack-logo img{height:42px}
.stack-lead .stack-word{font-size:23px}
.stack-lead .stack-cap{color:var(--cta-solid)}
@media (max-width:620px){
  .stack-item,.stack-lead{flex:0 1 calc(50% - 14px);padding:18px 12px}
  .stack-lead{flex-basis:100%}
}

/* ---- FAQ --------------------------------------------------------------- */
.faq{max-width:860px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.faq summary{
  cursor:pointer;padding:18px 22px;font-family:var(--head);font-weight:700;
  color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;color:var(--cta-solid);line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq .body{padding:0 22px 20px;color:var(--muted)}

/* ---- CTA band ---------------------------------------------------------- */
.band{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;text-align:center;padding:64px 0}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.88);max-width:60ch;margin:0 auto 24px}

/* ---- Forms ------------------------------------------------------------- */
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;color:var(--navy);margin-bottom:6px;font-size:15px}
.input,.textarea,.select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;
}
.textarea{min-height:170px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{
  outline:2px solid transparent;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(11,107,149,.22);
}
.alert{border-radius:var(--r);padding:14px 18px;margin-bottom:20px;border-inline-start:4px solid transparent}
.alert-ok{background:#E8F5EC;border-inline-start-color:#1E7A34;color:#14532B}
.alert-bad{background:#FDECEA;border-inline-start-color:#C0392B;color:#7F2018}
.form-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:32px}

/* ---- Footer ------------------------------------------------------------ */
/* Light footer, matching the live site: #EDF1FC ground, #2E354E headings and
   links. The one deviation is body text -- the live site uses #7A7A7A on this
   ground, which is 3.9:1 and fails at this size. --muted is the same family
   and passes. */
.site-foot{
  background:var(--tint);
  color:var(--muted);
  padding:64px 0 0;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
}
.foot-brand img{width:100%;max-width:280px;height:auto}
.foot-brand p{margin:18px 0 20px;max-width:34ch;font-size:15px}
/* ---- Ways to pay ------------------------------------------------------
   The old strip was one flattened PNG: four logos at a fixed 210px, soft on
   any screen sharper than 2014, and impossible to add a method to. These are
   text and an icon, so they are sharp everywhere and "cash in hand" -- which
   has no logo anywhere -- sits in the row like the rest. */
.site-foot .pay-h{
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--navy);margin:0 0 10px;
}
.pay-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pay{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--tint-2);border-radius:var(--pill);
  padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.pay .ic{width:17px;height:17px;color:var(--cta-solid);flex:0 0 auto}
.pay img{height:18px;width:auto}
.site-foot h3{
  color:var(--ink);
  font-size:22px;
  margin:0 0 16px;
  letter-spacing:-.3px;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:10px}
.site-foot a{color:var(--ink);font-size:15px}
.site-foot a:hover,.site-foot a:focus{color:var(--cta-solid)}

/* Bottom bar: social left, copyright right. */
.foot-base{
  border-top:1px solid var(--tint-2);
  margin-top:52px;
  padding:20px 0 24px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.foot-social{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.foot-social a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  color:var(--ink);
}
.foot-social a:hover{background:var(--tint-2);color:var(--cta-solid)}
.soc{width:20px;height:20px}
/* Copyright always sits at the trailing edge (the left, on Arabic pages). */
.foot-copy{margin:0;margin-inline-start:auto;font-size:14px}

@media (max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .site-foot{padding:44px 0 0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .foot-brand{grid-column:1 / -1}
  .foot-brand p{max-width:none}
  .foot-base{flex-direction:column;align-items:flex-start;gap:14px;text-align:start}
  .foot-copy{margin:0}
  .foot-social{margin:0}
}

/* ---- WhatsApp ----------------------------------------------------------
   A round button in the corner. Its label slides out from behind it on hover
   or keyboard focus (and once, briefly, a few seconds after the first page of
   a visit), so the button stays small but never has to be guessed at. The
   corner, the side the label opens to and the slide all follow the page
   direction, so on Arabic pages it sits bottom-left and opens to the right. */
.wa{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:40;
  display:block;width:58px;height:58px;border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.wa-btn{
  position:relative;display:grid;place-items:center;
  width:100%;height:100%;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 8px 22px rgba(4,37,81,.26),inset 0 -3px 0 rgba(0,0,0,.08);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.wa-btn svg{width:30px;height:30px}
/* A small accent dot: "someone is here". It goes away once the visitor has
   used the button, so it never nags. */
.wa-dot{
  position:absolute;top:1px;inset-inline-end:1px;
  width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2.5px solid #fff;
}
.wa-seen .wa-dot{display:none}
.wa-label{
  --wa-shift:10px;
  position:absolute;top:50%;inset-inline-end:calc(100% + 12px);
  white-space:nowrap;background:#fff;color:var(--navy);
  font-family:var(--font);font-weight:600;font-size:14.5px;line-height:1;
  padding:12px 16px;border-radius:var(--pill);
  box-shadow:0 8px 24px rgba(4,37,81,.18);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(var(--wa-shift),-50%);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
[dir="rtl"] .wa-label{--wa-shift:-10px}
.wa:hover .wa-label,.wa:focus-visible .wa-label,.wa.wa-peek .wa-label{
  opacity:1;visibility:visible;transform:translate(0,-50%);
  transition:opacity .2s ease,transform .2s ease,visibility 0s;
}
.wa:hover .wa-btn{background:#1EBE5B;transform:translateY(-2px);box-shadow:0 12px 26px rgba(4,37,81,.3),inset 0 -3px 0 rgba(0,0,0,.08)}
.wa:hover,.wa:focus{color:#fff}
.wa:focus-visible{outline:none}
.wa:focus-visible .wa-btn{outline:3px solid var(--navy);outline-offset:3px}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .strip-grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .mainnav{
    position:absolute;left:0;right:0;top:100%;background:var(--navy);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 20px 20px;display:none;box-shadow:0 14px 24px rgba(0,0,0,.25);
  }
  .mainnav.open{display:flex}
  .mainnav ul{flex-direction:column;gap:0;width:100%}
  .mainnav li{border-bottom:1px solid rgba(255,255,255,.12)}
  .mainnav a{padding:14px 0}
  /* On mobile the login pill sits beside the burger rather than in the panel,
     so signing in never needs the menu opened first. */
  .btn-login{padding:9px 18px;font-size:13px}
  .head-inner{min-height:64px;position:relative;gap:12px}
  .brand img{height:34px}
}
@media (max-width:680px){
  .hero{padding:60px 0 76px}
  .strip{margin-top:-40px}
  .strip-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
  .form-card{padding:22px}
  .wa{width:52px;height:52px;inset-block-end:16px;inset-inline-end:16px}
  .wa-btn svg{width:27px;height:27px}
  .wa-label{font-size:14px;padding:11px 14px}
  .hero .btn{display:block;width:100%;margin:0 0 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .btn:hover,.plan:hover,.wa:hover .wa-btn{transform:none}
}

/* ---- Datacenter map ----------------------------------------------------- */
/* The map is a fixed-ratio image with markers pinned as percentages, so the
   pins stay on their cities at every width without any JavaScript. */
.map-wrap{
  position:relative;
  max-width:1173px;
  margin-inline:auto;
  aspect-ratio:1173 / 580;
}
.map-img{width:100%;height:auto;display:block}
.map-area{position:relative}  /* the pins are placed on this box: the image alone */
.pin{
  position:absolute;
  width:22px;height:22px;
  margin:-11px 0 0 -11px;              /* centre the dot on its coordinate */
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 8px rgba(194,82,20,.22);
}
.pin::after{
  content:'';position:absolute;inset:-8px;
  border-radius:50%;
  border:2px solid rgba(194,82,20,.45);
  animation:pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse{
  0%  {transform:scale(.6);opacity:.9}
  70% {transform:scale(1.6);opacity:0}
  100%{transform:scale(1.6);opacity:0}
}
@media (max-width:900px){
  .map-wrap{aspect-ratio:auto;padding-bottom:0}
}
@media (max-width:560px){
  .pin{width:14px;height:14px;margin:-7px 0 0 -7px;box-shadow:0 0 0 5px rgba(194,82,20,.22)}
}
@media (prefers-reduced-motion:reduce){
  .pin::after{animation:none;opacity:0}
}

/* ==========================================================================
   Home hero — illustration version
   Gradient, pattern overlay, illustration and angled divider all taken from
   the Webhoster kit's own hero so this matches the template it came from.
   Values read out of the kit's Elementor CSS, not sampled by eye:
     gradient   linear-gradient(145deg, #1A3E7C 0%, #0B6B95 100%)
     overlay    bg_bighero.png, cover, 10% opacity
     divider    M737.9,94.7L0,0v100h1000V0L737.9,94.7z, flipped, ~65-75px
   ========================================================================== */
.hero-home{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,var(--navy) 0%,var(--teal) 100%);
  padding:96px 0 132px;          /* bottom padding clears the angled divider */
  text-align:start;
}
/* The pattern sits in its own layer so its opacity doesn't affect the text. */
.hero-bg{
  position:absolute;inset:0;
  background:url(../img/bg_bighero.png) center center / cover no-repeat;
  opacity:.10;
  pointer-events:none;
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,520px);
  align-items:center;
  gap:40px;
}
.hero-copy h1{color:#fff;margin-bottom:16px;max-width:14ch}
.hero-copy .lede{
  font-size:clamp(16px,1.5vw,19px);
  color:rgba(255,255,255,.9);
  max-width:52ch;margin:0 0 14px;
}
.hero-copy .from{color:var(--accent-light);font-weight:600;margin-bottom:28px}
.hero-actions{margin:0;display:flex;flex-wrap:wrap;gap:14px}

/* The illustration is decorative, so it carries an empty alt and is hidden
   from screen readers rather than described. */
.hero-art{justify-self:end}
.hero-art img{
  width:100%;max-width:520px;height:auto;
  animation:hero-float 5s ease-in-out infinite;
  will-change:transform;
}
/* The kit only floats this on hover, which nobody discovers on a hero.
   Running it slowly and continuously reads as life rather than fidget. */
@keyframes hero-float{
  0%,100%{transform:translateY(-8px)}
  50%    {transform:translateY(8px)}
}

/* Angled bottom edge. The fill matches the page behind it, so the hero looks
   cut rather than overlaid. */
.hero-shape{
  position:absolute;left:0;right:0;bottom:-1px;   /* -1px hides a hairline seam */
  line-height:0;pointer-events:none;z-index:1;
}
.hero-shape svg{
  display:block;
  width:calc(100% + 1.3px);
  height:75px;
  transform:rotateY(180deg);
}
.hero-shape path{fill:#fff}

/* The shortcut cards overlap the angled edge, as they do in the kit. */
.hero-home + .strip{margin-top:-72px}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:28px}
  .hero-copy h1{max-width:none;margin-inline:auto}
  .hero-copy .lede{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-art{justify-self:center;order:2}
  .hero-art img{max-width:400px}
  .hero-shape svg{height:55px}
  .hero-home + .strip{margin-top:-48px}
}
@media (max-width:680px){
  .hero-home{padding:60px 0 96px}
  .hero-art img{max-width:290px}
  .hero-shape svg{height:40px}
  .hero-actions .btn{width:100%}
  .hero-home + .strip{margin-top:-36px}
}
@media (prefers-reduced-motion:reduce){
  .hero-art img{animation:none}
}

/* ==========================================================================
   "Why choose us" — white card over a full-bleed photo
   The kit's layout: a photo band running edge to edge, with the content in a
   white card that starts in the white space above the band and finishes
   inside it. That overhang is what makes the section read as layered.
   ========================================================================== */
.whyus{
  position:relative;
  background:#fff;                 /* the strip the card overhangs into */
  padding:70px 0 0;
  isolation:isolate;
}
/* Photo band: starts below the section top so the card can overhang it, and
   runs to the very bottom so no stripe of background shows underneath. */
.whyus-media{
  position:absolute;
  /* The card stands 40px above the band (110px band offset, 70px section
     padding) and is cut 40px short of it at the foot, so the white block
     pokes out of the photo by the same amount at both ends. */
  left:0;right:0;top:110px;bottom:40px;
  /* The same gradient and pattern as the banner at the top of the page, so
     the section belongs to the site rather than to a stock photo library. */
  background:linear-gradient(145deg,var(--navy) 0%,var(--teal) 100%);
  z-index:-1;
}
/* Navy at 50% over the photo. The live site does this the other way round --
   photo at 50% over navy -- which renders the same and keeps the picture
   readable while staying on-brand. */
.whyus-media::after{
  content:'';
  position:absolute;inset:0;
  background:url(../img/bg_bighero.png) center center / cover no-repeat;
  opacity:.14;
}
.whyus .wrap{position:relative}
.whyus-card{
  background:#fff;
  border-radius:24px;
  box-shadow:0 24px 60px rgba(4,37,81,.22);
  padding:48px 52px;
  max-width:620px;
  margin-bottom:70px;              /* white below the band, matching above */
}
.whyus-card .eyebrow{margin-bottom:10px}
.whyus-card h2{margin-bottom:16px}
.whyus-intro{color:var(--muted);margin-bottom:34px}
.whyus-list{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.whyus-list li{display:flex;gap:22px;align-items:flex-start}
.whyus-list h3{font-size:21px;margin:0 0 6px}
.whyus-list p{margin:0;color:var(--muted);font-size:15px}
.whyus-ic{
  flex:0 0 auto;
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--coral);
  color:#fff;
}
.whyus-ic .ic{width:30px;height:30px}

@media (max-width:900px){
  .whyus{padding:48px 0 0}
  .whyus-media{top:80px;bottom:32px}     /* 32px of card above and below */
  .whyus-card{padding:34px 28px;max-width:none;margin-bottom:48px}
  .whyus-list li{gap:16px}
  .whyus-ic{width:54px;height:54px}
  .whyus-ic .ic{width:25px;height:25px}
}
@media (max-width:560px){
  /* At this width the card fills the viewport, so the photo would only show as
     thin slivers either side. Dropping it keeps the section honest rather than
     leaving decorative scraps. */
  .whyus-media{display:none}
  .whyus{background:var(--bg);padding:44px 0}
  .whyus-card{box-shadow:var(--shadow);border-radius:18px;margin-bottom:0}
  .whyus-list li{flex-direction:column;gap:10px}
}

/* ---- About page -------------------------------------------------------- */
/* Page heroes are shorter than the home one and have no pattern layer. */
.hero-page{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--navy) 0%,var(--teal) 100%);
  padding:64px 0 104px;text-align:start;
}
.hero-page .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.hero-page .hero-copy h1{margin-bottom:12px}
.hero-page .hero-art img{max-width:460px;animation:hero-float 6s ease-in-out infinite}

/* Stat counters */
.stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;text-align:center;
}
.stats li{
  background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:32px 20px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.stats li:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.stat-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--tint);color:var(--cta-solid);margin-bottom:14px;
}
.stat-ic .ic{width:30px;height:30px}
.stat-v{
  display:block;font-family:var(--head);font-weight:900;
  font-size:clamp(34px,4vw,46px);color:var(--navy);line-height:1;
  letter-spacing:-1.5px;margin-bottom:8px;
}
.stat-l{display:block;color:var(--muted);font-weight:600;font-size:15px}

/* Digital Bridge cards */
.bridge{background:var(--tint)}
.bridge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.bridge-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:32px 26px;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bridge-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.bridge-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--tint);color:var(--cta-solid);margin-bottom:16px;
}
.bridge-ic .ic{width:30px;height:30px}
.bridge-card h3{margin-bottom:8px}
.bridge-card p{color:var(--muted);font-size:15px;margin:0}

/* Grow Up Your Business */
.grow-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center}
.grow-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:26px}
.grow-list li{display:flex;gap:20px;align-items:flex-start}
.grow-list h3{font-size:20px;margin:0 0 5px}
.grow-list p{margin:0;color:var(--muted);font-size:15px}
.grow-ic{
  flex:0 0 auto;width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:var(--coral);color:#fff;
}
.grow-ic .ic{width:26px;height:26px}
.grow-art img{width:100%;height:auto;border-radius:var(--r-lg)}

@media (max-width:960px){
  .hero-page .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-page .hero-art{justify-self:center}
  .hero-page .hero-art img{max-width:340px}
  .grow-grid{grid-template-columns:1fr;gap:32px}
  .grow-art{order:-1}
}
@media (max-width:680px){
  .stats{grid-template-columns:1fr}
  .hero-page{padding:48px 0 76px}
  .grow-list li{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero-page .hero-art img{animation:none}
}

/* ==========================================================================
   Parity pass — matched to finjanhost.com, measured off the live page
   ========================================================================== */
:root{
  --wrap:1280px;              /* live container is 1280px, not 1240/1320 */
  --head-ink:#2E354E;         /* live headings are slate, not navy */
  --eyebrow:var(--accent-strong);  /* 5.96:1 white / 5.56:1 on --bg / 5.28:1 on tint */
  --accent-fill:var(--accent);     /* white on this is 4.66:1 */
}
h1,h2,h3,h4{color:var(--head-ink)}
h1{font-size:clamp(34px,5vw,72px);font-weight:600;letter-spacing:-2px;line-height:1}
h2{font-size:clamp(28px,3.4vw,48px);font-weight:600;letter-spacing:normal;line-height:1.15}
h3{font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:normal}
/* Live sets body leading to exactly 1.5, which is the accessibility floor
   rather than a target. 1.6 is within a hair of it visually and leaves margin
   for anyone who bumps text size. */
body{line-height:1.6}
.hero-copy h1,.hero h1{color:#fff}
.band h2,.whyus-card h2{color:var(--head-ink)}
.band h2{color:#fff}
.plan-head h3,.site-head *,.site-foot h3{color:inherit}
.site-foot h3{color:var(--head-ink)}
.plan-head h3{color:#fff}

/* -- Contrast fixes, all from a measured axe-core run -------------------- */
/* .eyebrow was #D14622: 4.25:1 on the pale section ground, so it failed on
   exactly the sections it is used in. */
.eyebrow{color:var(--eyebrow)}
/* The "Popular" ribbon was white on --coral (#FF643F) at 2.94:1. */
.ribbon{background:var(--accent-fill)}
/* The featured plan's header was white on #FE575B at 3.12:1, and its subtitle
   at 90% white was 2.79:1. Same hue, enough depth to carry white text. */
.plan-featured .plan-head{background:var(--accent-fill)}
.plan-head p{color:rgba(255,255,255,.95)}
/* Inline links inside prose need more than colour to be identifiable. */
.section p a:not(.btn),.form-card p a:not(.btn),.faq .body a:not(.btn){
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ==========================================================================
   Scroll reveal
   Matches the entrance animations the live site uses (fadeInUp / Down / Left /
   Right). Driven by IntersectionObserver rather than a scroll handler, so it
   costs nothing while idle.
   Content is only hidden once JS has confirmed it can reveal it again — the
   `.js` class is set by site.js. Without JS everything renders normally.
   ========================================================================== */
.js [data-anim]{opacity:0;will-change:opacity,transform}
.js [data-anim="up"]   {transform:translateY(40px)}
.js [data-anim="down"] {transform:translateY(-40px)}
/* Sideways reveals are back, because the recording shows them clearly on the
   hero illustration and the "why choose us" card. They widened the document
   by 8px the first time; the fix is clipping at section level (below) rather
   than abandoning the direction. */
.js [data-anim="left"] {transform:translateX(-40px)}
.js [data-anim="right"]{transform:translateX(40px)}
.js [data-anim].in{
  opacity:1;
  transform:none;
  /* .85s reads closer to the reference than .6s did -- long enough to notice,
     short enough that a fast scroller is not left waiting for content. */
  transition:opacity .85s ease-out,transform .85s cubic-bezier(.22,.61,.36,1);
}
/* Staggering: children reveal a beat after each other so a row of cards reads
   left to right instead of arriving as one block. */
.js [data-anim-delay="1"].in{transition-delay:.12s}
.js [data-anim-delay="2"].in{transition-delay:.24s}
.js [data-anim-delay="3"].in{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
}

/* A horizontally-offset reveal widens the document while it is offset, which
   showed up as an 8px horizontal scrollbar on the About page at tablet width.
   `clip` contains it without the side effects `hidden` has on sticky
   positioning. */
html{overflow-x:clip}


/* The header is sticky, so an anchored section would otherwise land underneath
   it. `scroll-margin-top` offsets the landing point by the bar's height. */
[id]{scroll-margin-top:88px}
@media (max-width:860px){[id]{scroll-margin-top:76px}}

/* ==========================================================================
   Unified page banners
   Home, Hosting Plans, About and Contact were running three different
   gradients (135deg navy->navy-deep, 145deg navy->teal, and a flat navy).
   One treatment now, so moving between pages doesn't shift the brand.
   ========================================================================== */
.hero,.hero-home,.hero-page{
  background:linear-gradient(145deg,var(--navy) 0%,var(--teal) 100%);
  position:relative;
  overflow:hidden;
  color:#fff;
}
/* Text-only banners: shorter, centred, still angled at the foot. */
.hero-plain{padding:60px 0 104px;text-align:center}
.hero-plain h1{color:#fff;margin-bottom:12px}
.hero-plain .lede{
  color:rgba(255,255,255,.9);
  max-width:62ch;margin:0 auto;
  font-size:clamp(16px,1.5vw,19px);
}
@media (max-width:680px){
  .hero-plain{padding:44px 0 76px}
}

/* The logo strip, now sitting between the service cards and the plans. */
.trustbar{padding:40px 0 56px}
.trustbar .section-head{margin-bottom:28px}
.trustbar h2{font-size:clamp(22px,2.4vw,30px)}

/* A horizontally-offset element is wider than its resting position, which is
   what produced the 8px scrollbar. Clipping on the x axis at section level
   contains it; `overflow-y` stays visible so card shadows and the hero's
   angled edge are not cut. */
.section,.strip,.whyus,.hero,.hero-home,.hero-page,.trustbar,.bridge{
  overflow-x:clip;
}

/* ==========================================================================
   Button text colour, pinned
   Two buttons were rendering dark slate on the coral gradient at 2.02:1:
     .btn-login   — the parity pass added `.site-head *{color:inherit}`, which
                    ties with `.btn-login{color:#fff}` on specificity and won
                    on source order, so the label inherited body colour.
     footer CTA   — `.site-foot a{color:var(--ink)}` is 0-0-1-1 and outranks
                    `.btn-primary{color:#fff}` at 0-0-1-0.
   Both are context rules reaching into a component that has its own colour.
   Stating it once, last, and specifically enough that no ancestor can take it
   back. A button's label must never depend on where the button sits.
   ========================================================================== */
.btn-primary,.btn-login,
a.btn-primary,a.btn-login,
.site-head .btn-login,.site-head a.btn-login,
.site-foot a.btn,.site-foot .btn-primary,
.hero .btn-primary,.band .btn-primary,
.btn-primary:hover,.btn-primary:focus,
.btn-login:hover,.btn-login:focus,
.site-foot a.btn:hover,.site-foot a.btn:focus{
  color:#fff;
}
.btn-ghost,.btn-ghost:hover,.btn-ghost:focus,
.hero .btn-ghost,.hero .btn-ghost:hover{color:#fff}

/* ==========================================================================
   Content pages added after launch — About story, Contact details, Knowledge
   Base, affiliate programme and the four legal documents. Same tokens as the
   rest of the sheet; nothing here introduces a new colour or a new radius.
   ========================================================================== */

/* ---- Long-form copy ---------------------------------------------------- */
.prose{max-width:74ch;margin-inline:auto;font-size:17px}
.prose p{color:var(--muted)}
.note{max-width:74ch;margin:22px auto 0;color:var(--muted);font-size:15px;text-align:center}

/* Arabic words inside an English page (the language switch) use the
   reader's own Arabic font, so English pages never download the Arabic ones.
   Arabic pages set their fonts once, at the end of this file. */
:not(html)[lang="ar"],.kb-ar,.kb-qar,.chip-ar{
  font-family:'Segoe UI','Noto Naskh Arabic','Geeza Pro',Tahoma,Arial,sans-serif;
  line-height:1.9;
}

/* ---- Legal documents --------------------------------------------------- */
.doc{
  max-width:820px;margin-inline:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(24px,4vw,46px);
}
.doc-tight{padding:clamp(20px,3vw,34px)}
.doc-intro p{font-size:17px;color:var(--ink)}
.doc-sec{margin-top:30px}
.doc-sec:first-of-type{margin-top:22px}
.doc h2{
  font-size:clamp(19px,2.1vw,23px);letter-spacing:-.3px;margin:0 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.doc p,.doc li{color:var(--muted)}
.doc ul,.doc ol{margin:0 0 14px;padding-inline-start:22px}
.doc li{margin-bottom:7px}
.doc li::marker{color:var(--cta-solid)}
.doc strong{color:var(--ink)}
.doc-more{max-width:820px;margin:26px auto 0;text-align:center;color:var(--muted);font-size:15px}
.doc-more ul{list-style:none;display:inline-flex;flex-wrap:wrap;gap:8px 20px;margin:6px 0 0;padding:0}

/* ---- Cards that lift (values, channels, affiliate) --------------------- */
.feature-lift{transition:transform .2s ease,box-shadow .2s ease}
.feature-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.feature-go{margin:14px 0 0;font-weight:600}

/* ---- Numbered steps ---------------------------------------------------- */
.steps{
  list-style:none;margin:0;padding:0;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));counter-reset:step;
}
.steps li{
  position:relative;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:34px 26px 28px;
}
.steps .step-n{
  position:absolute;top:-18px;inset-inline-start:26px;width:38px;height:38px;border-radius:50%;
  background:var(--cta-underlay);box-shadow:var(--cta-inset),0 6px 14px var(--cta-shadow);
  color:#fff;font-family:var(--head);font-weight:700;display:grid;place-items:center;
}
.steps .step-ic{display:block;color:var(--coral);margin-bottom:10px}
.steps .step-ic .ic{width:32px;height:32px}
.steps h3{margin-bottom:6px}
.steps p{color:var(--muted);margin:0;font-size:15px}

/* ---- Contact details --------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:start}
.contact-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:30px 28px}
.contact-card h2{font-size:clamp(20px,2.2vw,25px);margin-bottom:18px}
.contact-lines{list-style:none;margin:0;padding:0}
.contact-lines li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.contact-lines li:last-child{border-bottom:none}
.cl-ic{color:var(--coral);flex:0 0 auto}
.cl-ic .ic{width:24px;height:24px}
.cl-body{display:flex;flex-direction:column;min-width:0}
.cl-label{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:700}
.cl-body a{font-weight:600;word-break:break-word}
.resp-list{list-style:none;margin:0;padding:0}
.resp-list li{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.resp-list li:last-child{border-bottom:none}
.resp-v{font-family:var(--head);font-weight:700;color:var(--navy);font-size:20px;white-space:nowrap}
.resp-l{color:var(--muted)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---- Knowledge base ---------------------------------------------------- */
.kb-wrap{max-width:900px}
.kb-tools{margin-bottom:22px}
.kb-search{margin-bottom:14px}
.kb-cats{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--navy);
  background:var(--tint);border:1px solid var(--tint-2);border-radius:var(--pill);
  padding:7px 16px;display:inline-flex;align-items:center;gap:8px;
}
.chip:hover{background:var(--tint-2)}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-ar{opacity:.75;font-size:13px}
.status-pill{
  display:inline-block;background:#E8F8EE;color:#0F7A40;border:1px solid #C7EED5;
  border-radius:var(--pill);padding:4px 14px;font-size:14px;font-weight:700;
}
.status-pill::before{content:'● '}
.kb-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;
  overflow:hidden;scroll-margin-top:90px;
}
.kb-item summary{cursor:pointer;padding:16px 22px;list-style:none;display:flex;gap:16px;align-items:flex-start}
.kb-item summary::-webkit-details-marker{display:none}
.kb-item summary::after{content:'+';margin-inline-start:auto;font-size:24px;color:var(--cta-solid);line-height:1.1}
.kb-item[open] summary::after{content:'\2212'}
.kb-q{display:flex;flex-direction:column;gap:3px;min-width:0}
.kb-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:3px}
.kb-cat{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--teal)}
.kb-pop{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--accent-strong)}
.kb-pop .ic{width:13px;height:13px}
.kb-qen{font-family:var(--head);font-weight:700;color:var(--navy);font-size:17px;line-height:1.35}
.kb-qar{color:var(--muted);font-size:15px}
.kb-body{padding:0 22px 20px}
.kb-body p,.kb-body li{color:var(--muted)}
.kb-body ol,.kb-body ul{padding-inline-start:22px;margin:0 0 10px}
.kb-en{padding-top:2px}
.kb-ar{border-top:1px dashed var(--line);margin-top:14px;padding-top:14px}
.kb-body code{
  background:var(--tint);border:1px solid var(--tint-2);border-radius:6px;
  padding:1px 7px;font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  direction:ltr;display:inline-block;
}
.kb-empty{text-align:center;color:var(--muted);margin-top:24px}
.faq-more{text-align:center;color:var(--muted);margin-top:20px}

/* ==========================================================================
   Billing periods
   ========================================================================== */
.cycle-wrap{text-align:center;margin:0 0 34px}
.cycle-switch{
  display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;
  background:#fff;border:1px solid var(--line);border-radius:var(--pill);
  box-shadow:var(--shadow);
}
.cycle-switch .cyc{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 22px;border-radius:var(--pill);
  font-family:var(--head);font-weight:700;font-size:15px;
  color:var(--navy);line-height:1.2;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease;
}
.cycle-switch .cyc:hover{background:var(--tint);color:var(--navy)}
.cycle-switch .cyc.on{
  background-color:var(--cta-face);
  background-image:var(--cta-underlay);
  box-shadow:var(--cta-inset);
  color:#fff;
}
.cycle-switch .cyc.on:hover{color:#fff}
.cyc-save{
  font-family:var(--font);font-weight:700;font-size:11px;letter-spacing:.4px;
  text-transform:uppercase;color:#0F7A40;
}
.cycle-switch .cyc.on .cyc-save{color:rgba(255,255,255,.92)}
.cyc-note{
  font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted);
}
.cycle-switch .cyc.on .cyc-note{color:rgba(255,255,255,.85)}

/* ---- The price block on a card ---------------------------------------- */
.plan-prices{padding-top:6px}
.plan-price{padding:20px 20px 4px}
.plan-save{margin:0;text-align:center}
.plan-save span{
  display:inline-block;background:#E8F8EE;color:#0F7A40;border:1px solid #C7EED5;
  border-radius:var(--pill);padding:2px 12px;font-size:12px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;
}
.plan-billed{
  margin:12px 0 0;text-align:center;font-size:15px;color:var(--ink);
  padding:0 20px;
}
.plan-billed b{font-weight:700;color:var(--navy)}
.plan-renew{
  margin:4px 0 16px;text-align:center;font-size:13.5px;color:var(--muted);
  padding:0 20px;line-height:1.5;
}
/* A hidden period must take up no space, whatever else the sheet says. */
.plan-price-box[hidden]{display:none}


/* ==========================================================================
   Accent hover, pinned
   The gradient now carries the button's colour, so a hover that only changed
   background-color would not have been visible -- background-image sits on
   top of it. Stated once, last, for every component built from the accent.
   ========================================================================== */
/* Hover darkens a filled shape by one step of the same hue, never a gradient. */
.btn-primary:hover,.btn-primary:focus-visible,
.btn-login:hover,.btn-login:focus-visible,
.site-head .btn-login:hover{
  background-color:var(--accent-strong);
}

/* ==========================================================================
   About: "What we stand for" -- six cards, always in even rows
   (3 + 3 on a wide screen, 2 + 2 + 2 on a tablet, one column on a phone)
   ========================================================================== */
.values-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.values-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Hosting Plans page: one type of hosting at a time
   The tab bar sticks under the header, so another type is one tap away from
   anywhere in the list. Without JavaScript every group shows and the tabs
   are plain jump links.
   ========================================================================== */
:root{--head-h:72px;--tabs-h:68px}
@media (max-width:860px){:root{--head-h:64px;--tabs-h:60px}}

.hero-plans{padding-bottom:92px}
.plan-tabs{
  position:sticky;top:var(--head-h);z-index:30;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 6px 16px -12px rgba(4,37,81,.35);
}
.plan-tabs-list{
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:center;gap:clamp(8px,4vw,56px);
}
.plan-tab{
  display:flex;align-items:center;gap:12px;
  min-height:var(--tabs-h);padding:0 8px;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  color:var(--muted);
}
.plan-tab .ic{width:26px;height:26px;color:var(--muted);transition:color .18s ease}
.pt-text{display:flex;flex-direction:column;line-height:1.2}
.pt-name{font-family:var(--head);font-weight:700;font-size:17px;color:var(--ink);transition:color .18s ease}
.pt-from{font-size:13px;color:var(--muted);margin-top:2px}
.plan-tab:hover .pt-name,.plan-tab:hover .ic{color:var(--navy)}
.plan-tab.on{border-bottom-color:var(--accent)}
.plan-tab.on .ic,.plan-tab.on .pt-name{color:var(--accent-strong)}
.plan-tab:focus-visible{outline-offset:-3px}

/* Land just under the header and the tab bar */
.plan-panel[id]{scroll-margin-top:calc(var(--head-h) + var(--tabs-h))}
.plan-panel[hidden],.vps-sub[hidden]{display:none}
.plan-panel .section{padding-top:56px}

/* The three VPS types: pick one, its plans show below */
.vps-picker{display:none}
.has-plan-tabs .vps-picker{
  list-style:none;margin:0 auto 40px;padding:0;max-width:1040px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.vps-opt{
  display:flex;flex-direction:column;gap:3px;height:100%;
  background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
  padding:18px 22px;color:var(--ink);
  transition:border-color .18s ease,background-color .18s ease;
}
.vps-opt:hover{border-color:var(--tint-2);color:var(--ink)}
.vps-opt.on{border-color:var(--accent);background:var(--accent-wash)}
.vo-name{font-family:var(--head);font-weight:700;font-size:19px;color:var(--navy)}
.vo-line{font-size:14.5px;color:var(--muted);line-height:1.45}
.vo-from{margin-top:auto;padding-top:8px;font-weight:700;font-size:14px;color:var(--accent-strong)}
.vps-sub + .vps-sub{margin-top:56px}
.vps-sub-h{text-align:center;margin:0 0 24px}
/* With the picker on screen, the group names are only for screen readers */
.has-plan-tabs .vps-sub-h{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (max-width:860px){
  .plan-tab .ic{width:22px;height:22px}
  .pt-name{font-size:16px}
}
@media (max-width:680px){
  .hero-plans{padding-bottom:72px}
  .plan-tabs .wrap{width:100%}
  .plan-tabs-list{gap:0}
  .plan-tabs-list li{flex:1 1 0}
  .plan-tab{justify-content:center;text-align:center;padding:0 4px}
  .plan-tab .ic,.pt-long{display:none}
  .pt-from{font-size:12px}
  .plan-panel .section{padding-top:36px}
  .has-plan-tabs .vps-picker{grid-template-columns:1fr;gap:8px;margin-bottom:30px}
  /* name and price on one line, the description under them */
  .vps-opt{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline;padding:10px 16px}
  .vo-name{font-size:17px}
  .vo-from{grid-column:2;grid-row:1;padding-top:0;font-size:13px}
  .vo-line{grid-column:1 / -1;font-size:13.5px}
}

/* Phones: the Monthly / 1 year / 2 years switch stays on one line */
@media (max-width:680px){
  /* display:flex makes the switch a block, which text-align:center no longer
     centres -- between 461px and 680px it sat on the left. margin auto does. */
  .cycle-switch{display:flex;flex-wrap:nowrap;width:100%;max-width:420px;margin-inline:auto}
  .cycle-switch .cyc{flex:1 1 0;min-width:0;padding:8px 6px}
  .cyc-save,.cyc-note{font-size:10px;letter-spacing:.2px;white-space:normal;text-align:center}
}

/* ==========================================================================
   Plan cards look the same everywhere
   One size for the big price and one for the plan name, on every card, in
   every group, at every screen width. "/ month" always sits on its own line
   under the price; before, a wide price like $144.49 pushed it down on some
   cards and not others.
   ========================================================================== */
.plan-head h3{font-size:23px}
.plan-price{row-gap:4px}
.plan-price .int{font-size:56px}
.plan-price .per{flex-basis:100%;text-align:center}

/* ==========================================================================
   Knowledge base: group titles and small tables inside answers
   ========================================================================== */
.kb-group{
  font-size:clamp(19px,2vw,22px);letter-spacing:-.2px;
  margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.kb-list > .kb-group:first-child{margin-top:8px}
.kb-group[hidden]{display:none}
.kb-table{overflow-x:auto;margin:6px 0 14px}
.kb-body table{width:100%;border-collapse:collapse;font-size:15px}
.kb-body th,.kb-body td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.kb-body th{color:var(--navy);font-weight:700}
.kb-body thead th{background:var(--tint)}
.kb-body td{color:var(--ink)}
.kb-body tr:last-child th,.kb-body tr:last-child td{border-bottom:none}
.kb-body .kb-table + p{margin-top:0}
@media (max-width:680px){
  .kb-body table{font-size:14px}
  .kb-body th,.kb-body td{padding:7px 6px}
  .kb-body code{max-width:100%;white-space:normal;word-break:break-all}
}

/* A titled row placed straight under the Monthly / 1 year switch needs no
   extra gap above its title */
.cycle-wrap + .plans-sub{margin-top:0}

/* ==========================================================================
   Knowledge base: "copy link" button beside each question
   The button sits next to the question, outside it, so pressing it never
   opens or closes the answer. Room is kept on the right for it and the +.
   ========================================================================== */
.kb-row{position:relative}
.kb-row[hidden]{display:none}
.kb-row .kb-item summary{padding-inline-end:104px}
.kb-row .kb-item summary::after{position:absolute;top:14px;inset-inline-end:22px;margin:0}
.kb-copy{
  position:absolute;top:8px;inset-inline-end:52px;
  width:38px;height:38px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer;font-family:var(--font);
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.kb-copy:hover{background:var(--tint);border-color:var(--tint-2);color:var(--navy)}
.kb-copy .ic{width:18px;height:18px}
.kb-copy.done{background:#E8F8EE;border-color:#C7EED5;color:#0F7A40}
.kb-copy-tip{
  position:absolute;top:50%;inset-inline-end:calc(100% + 8px);transform:translateY(-50%);
  background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;line-height:1;
  padding:7px 10px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.kb-copy.done .kb-copy-tip{opacity:1}
@media (max-width:680px){
  .kb-row .kb-item summary{padding-inline-start:18px;padding-inline-end:92px}
  .kb-row .kb-item summary::after{inset-inline-end:18px}
  .kb-copy{inset-inline-end:44px}
}

/* Very small phones (under 361px): the logo, menu button and Login did not
   fit side by side, so Login stuck out 16px and the page scrolled sideways. */
@media (max-width:360px){
  .head-inner{gap:8px}
  .brand img{height:28px}
  .btn-login{padding:8px 12px}
}

/* ==========================================================================
   Legal pages: version record, and the "Legal versions" page
   ========================================================================== */
.legal-ver{
  max-width:820px;margin:0 auto 22px;padding:16px 22px;
  background:var(--tint);border:1px solid var(--tint-2);border-radius:var(--r);
  font-size:15px;
}
.legal-ver p{margin:0}
.lv-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;color:var(--ink)}
.lv-head strong{font-family:var(--head);font-size:17px;color:var(--navy)}
.lv-head span{color:var(--muted)}
.lv-fp{margin-top:6px !important;color:var(--muted);line-height:1.5}
.lv-label{font-weight:700;color:var(--ink);margin-inline-end:6px}
.legal-ver code,.lv-table code,.lc-fp code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  word-break:break-all;color:var(--ink);direction:ltr;
}
.lv-links{margin-top:10px !important;display:flex;flex-wrap:wrap;gap:6px 20px}
.lv-links a{font-weight:600}

.lc-wrap{max-width:900px}
.lc-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(18px,3vw,30px)}
.lc-drop{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:26px 16px;border:2px dashed var(--tint-2);border-radius:var(--r);
  background:var(--bg);cursor:pointer;transition:border-color .15s ease,background-color .15s ease;
}
.lc-drop:hover,.lc-drop.over{border-color:var(--accent);background:var(--accent-wash)}
.lc-drop:focus-within{outline:3px solid var(--navy);outline-offset:2px}
.lc-drop-t{color:var(--ink);font-size:16px}
.lc-drop-t strong{color:var(--accent-strong)}
.lc-drop-s{color:var(--muted);font-size:14px}
.lc-drop-name{font-weight:700;color:var(--navy);font-size:14px;word-break:break-all}
.lc-drop-name:empty{display:none}
.lc-or{text-align:center;color:var(--muted);margin:14px 0 8px;font-size:14px}
.lc-label{display:block;font-weight:600;color:var(--navy);margin-bottom:6px;font-size:15px}
.lc-paste{
  width:100%;font:inherit;font-size:15px;line-height:1.5;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);resize:vertical;min-height:130px;color:var(--ink);
}
.lc-paste:focus{border-color:var(--navy);outline:2px solid var(--navy);outline-offset:0}
.lc-actions{margin:14px 0 0;text-align:center}
.lc-privacy{margin:12px 0 0;text-align:center;color:var(--muted);font-size:13.5px}

.lc-result{margin-top:22px;padding:20px 24px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.lc-result:focus{outline:none}
.lc-result p{margin:0 0 8px}
.lc-result p:last-child{margin-bottom:0}
.lc-verdict{font-family:var(--head);font-weight:700;font-size:19px}
.lc-ok{border-color:#C7EED5;background:#F1FBF4}
.lc-ok .lc-verdict{color:#0F7A40}
.lc-bad{border-color:#F3C9C3;background:#FFF6F4}
.lc-bad .lc-verdict{color:#A42A12}
.lc-diffs{margin:12px 0 0;padding-inline-start:22px}
.lc-diffs li{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #F3C9C3}
.lc-diffs li:last-child{border-bottom:none}
.lc-ctx{color:var(--muted);font-size:14px}
.lc-ctx b{color:var(--ink)}
.lc-tag{display:inline-block;min-width:130px;font-size:13px;font-weight:700;color:var(--muted)}
.lc-diffs del{background:#FDE2DD;color:#8A1F0B;text-decoration:line-through;padding:0 3px;border-radius:3px}
.lc-diffs ins{background:#D8F3E1;color:#0B5F31;text-decoration:none;padding:0 3px;border-radius:3px}

.lv-doc + .lv-doc{margin-top:34px}
.lv-doc h3{margin:0 0 10px}
.lv-doc h3 a{color:inherit}
.lv-scroll{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.lv-table{width:100%;border-collapse:collapse;font-size:15px}
.lv-table th,.lv-table td{padding:10px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.lv-table thead th{background:var(--tint);color:var(--navy);font-weight:700;white-space:nowrap}
.lv-table tbody tr:last-child td{border-bottom:none}
.lv-table td:nth-child(3){min-width:220px}
.lv-v{white-space:nowrap;font-weight:700;color:var(--navy)}
.lv-now{display:inline-block;margin-inline-start:6px;background:#E8F8EE;color:#0F7A40;border:1px solid #C7EED5;
  border-radius:var(--pill);padding:1px 9px;font-size:12px;font-weight:700}
.lv-rec{display:block;color:var(--muted);font-size:13px}
.lv-files a{display:block;font-weight:600;white-space:nowrap}
.lv-how{display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.lv-how h3{font-size:19px;margin:0 0 8px}
.lv-how p{color:var(--muted);margin:0}
@media (max-width:860px){.lv-how{grid-template-columns:1fr}}
@media (max-width:680px){
  .legal-ver{padding:14px 16px}
  .lv-table{font-size:14px}
  .lv-table th,.lv-table td{padding:8px 10px}
  .lc-tag{display:block;min-width:0}
}
.lc-extra{margin-top:8px;padding:10px 14px;background:#fff;border:1px solid #C7EED5;border-radius:var(--r);font-size:14px;color:var(--muted)}
.lc-extra p{margin:0 0 6px}
/* Phones: each version becomes a small card instead of a wide table */
@media (max-width:680px){
  .lv-table thead{display:none}
  .lv-table,.lv-table tbody,.lv-table tr,.lv-table td{display:block;width:100%}
  .lv-table td{border-bottom:none;padding:6px 14px}
  .lv-table tr{padding:8px 0}
  .lv-table td[data-label]::before{
    content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--muted);
  }
  .lv-table td:nth-child(3){min-width:0}
  .lv-files a{display:inline-block;margin-inline-end:16px}
  .lv-scroll{overflow-x:visible}
}

/* Publish a legal version (staff helper) */
.lp-h{font-size:20px;margin:0 0 6px}
.lp-h:not(:first-child){margin-top:26px}
.lp-p{color:var(--muted);margin:0 0 12px;font-size:15px}
.lp-p code,.lp-out code{font-size:13.5px;word-break:break-all}
.lp-date{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
#lp-info{margin-top:16px}
.lp-out{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,3vw,30px);box-shadow:var(--shadow)}
.lp-out:focus{outline:none}
.lp-out h3{margin:0 0 12px;font-size:19px}
.lp-out h3:not(:first-child){margin-top:26px}
.lp-dl{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.lp-warn{margin:14px 0 0;padding:10px 14px;border-radius:var(--r);background:#FFF6E5;border:1px solid #F5D9A3;color:#7A4B00;font-size:15px}
.lp-steps{margin:0;padding-inline-start:22px}
.lp-steps li{margin-bottom:12px;color:var(--ink);line-height:1.6}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ==========================================================================
   Language switch
   Sits between the menu and Login on wide screens. On phones it shrinks to a
   round "ع" / "EN" button so the logo, the switch, Login and the menu button
   all fit on one line, down to 320px.
   ========================================================================== */
.lang-switch{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  color:#fff;font-size:14px;font-weight:600;line-height:1;
  min-height:40px;padding:0 14px;
  border:1.5px solid rgba(255,255,255,.35);border-radius:var(--pill);
  transition:border-color .18s ease,background-color .18s ease;
}
.site-head .lang-switch{color:#fff;line-height:1}
.lang-switch:hover,.lang-switch:focus-visible{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.lang-switch .ic{width:17px;height:17px;opacity:.85}
.ls-short{display:none}
/* The switch on English pages says العربية; it is drawn a size up, since
   Arabic letters look smaller than Latin ones at the same size. */
.lang-switch[lang="ar"]{font-size:15.5px}

/* Phones: logo on the start side; switch, Login and the menu button together
   on the end side. The menu used to float in the gap between them. */
@media (max-width:860px){
  .brand{margin-inline-end:auto}
  .lang-switch{order:1}
  .btn-login{order:2}
  .nav-toggle{order:3}
  .lang-switch{width:40px;min-height:40px;padding:0;border-radius:50%}
  .lang-switch .ic,.ls-long{display:none}
  .ls-short{display:inline;font-size:15px}
  .lang-switch[lang="ar"] .ls-short{font-size:18px;font-weight:700;margin-top:-2px}
}
@media (max-width:420px){
  .head-inner{gap:8px}
  .brand img{height:30px}
  .btn-login{padding:9px 14px}
  .lang-switch{width:38px;min-height:38px}
  .nav-toggle{width:42px}
}
@media (max-width:360px){
  .brand img{height:26px}
  .btn-login{padding:8px 11px;font-size:12px}
  .btn-login .ic{display:none}
}

/* A one-line note for readers whose browser is set to Arabic, on the English
   pages only. It is added by site.js and remembers being closed. */
.lang-hint{background:var(--accent-wash);border-bottom:1px solid #F3CBB3;color:var(--ink)}
.lang-hint-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;padding:9px 0;
  font-family:'Plex Arabic',Tahoma,'Segoe UI',sans-serif;font-size:15px;line-height:1.5}
.lang-hint p{margin:0}
.lang-hint-go{font-weight:700;color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
.lang-hint-x{font:inherit;font-size:20px;line-height:1;background:none;border:0;cursor:pointer;color:var(--muted);
  width:32px;height:32px;border-radius:50%}
.lang-hint-x:hover{background:rgba(0,0,0,.06);color:var(--ink)}

/* ==========================================================================
   Arabic pages
   The pages under ar/ are <html lang="ar" dir="rtl">. Almost every rule in
   this file is written with start/end rather than left/right, so the layout
   mirrors by itself. What follows is only what cannot mirror by itself.
   ========================================================================== */
html[lang="ar"]{
  --font:'Plex Arabic','Hind',Tahoma,'Segoe UI',Arial,sans-serif;
  --head:'Cairo','Lato','Plex Arabic',Tahoma,'Segoe UI',Arial,sans-serif;
}
/* Arabic letters join; any letter-spacing pulls them apart. */
html[lang="ar"] *{letter-spacing:0 !important}
html[lang="ar"] body{line-height:1.85}
/* Arabic has taller ascenders and deeper descenders than Latin, so headings
   need more room between lines, and a heavier weight to match Lato 900. */
html[lang="ar"] h1{font-weight:800;line-height:1.35;font-size:clamp(32px,4.4vw,60px)}
html[lang="ar"] h2{font-weight:800;line-height:1.45}
html[lang="ar"] :is(h3,h4){line-height:1.5}
html[lang="ar"] .hero-copy h1{max-width:16ch}
/* Small labels are set in caps and tracked in English; Arabic has neither,
   so they get a size up instead. */
html[lang="ar"] .mainnav a{font-size:15.5px}
html[lang="ar"] .eyebrow{font-size:17px}
html[lang="ar"] .btn-login{font-size:15px}
html[lang="ar"] .strip-go{font-size:14.5px}
html[lang="ar"] .stack-cap{font-size:13.5px}
html[lang="ar"] .cl-label{font-size:14px}
html[lang="ar"] .site-foot .pay-h{font-size:15px}
html[lang="ar"] .ribbon{font-size:13px;padding-block:4px}
html[lang="ar"] .cyc-save,html[lang="ar"] .cyc-note{font-size:12.5px}
html[lang="ar"] .plan-save span{font-size:13px}
html[lang="ar"] .plan-price .per{font-size:15px;font-family:var(--font);font-weight:600}
html[lang="ar"] .kb-cat{font-size:13px}
html[lang="ar"] .lc-tag{min-width:110px}
html[lang="ar"] .btn{font-size:16px}
/* Arabic has no italics; a slanted Arabic word is a faked one. */
html[lang="ar"] :is(i,em){font-style:normal}

/* A price is always read left to right ($ 3 .99), in any language. */
.plan-price .now{direction:ltr}
/* Code, file names and addresses keep their own left-to-right order inside
   Arabic sentences. */
html[dir="rtl"] code{direction:ltr;unicode-bidi:isolate}

/* ---- Things that point one way, turned round ---------------------------- */
/* The "Popular" ribbon sits on the other corner, so it slopes the other way */
html[dir="rtl"] .ribbon{transform:rotate(-45deg)}
/* The angled edge under every banner mirrors with the page */
html[dir="rtl"] .hero-shape svg{transform:none}
/* Arrows point forward, which is left in Arabic */
html[dir="rtl"] .strip-go svg{transform:scaleX(-1)}
/* Sideways reveals come in from the other side (the .in state still wins) */
html.js[dir="rtl"] [data-anim="left"]:not(.in){transform:translateX(40px)}
html.js[dir="rtl"] [data-anim="right"]:not(.in){transform:translateX(-40px)}

/* ---- Arabic legal pages: a translation of the English text --------------- */
.lv-tr{margin-top:8px !important;color:var(--ink);font-weight:600}
.lv-old{margin-top:10px !important;padding:10px 14px;border-radius:var(--r);
  background:#FFF6E5;border:1px solid #F5D9A3;color:#7A4B00}

/* ==========================================================================
   Plan specs: telling the plans apart at a glance
   A value that is unlimited or included is drawn in the accent; a line the
   plan does not have is greyed, with a dash for an icon. Comparing two cards
   becomes a matter of looking rather than reading.
   ========================================================================== */
.plan-specs li.spec-yes .ic{color:var(--accent)}
.plan-specs li.spec-yes b{color:var(--accent-strong)}
.plan-specs li.spec-no{color:var(--muted)}
.plan-specs li.spec-no .ic{color:var(--tint-2)}
.plan-specs li.spec-no b{color:var(--muted);font-weight:600}

/* ---- "and the other kinds of hosting" ----------------------------------
   Under the shared plan cards, not inside the section's lede: someone reads
   the cards first and only then wants to know what else there is. */
.plans-more{margin:44px auto 0;text-align:center;max-width:62ch}
.plans-more p{margin:0;color:var(--muted)}
.plans-more-go{margin-top:14px !important;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* A button for a second choice: the accent in outline rather than filled. */
.btn-outline{
  background:transparent;color:var(--accent-strong);
  border:1.5px solid var(--accent);box-shadow:none;
}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--accent);color:#fff;border-color:var(--accent)}