/* ===============================================================
   PaduHost - main stylesheet
   Dark brand base, muted gold accent with a champagne gradient,
   six accent tones for icons and feature sections, Plus Jakarta Sans typeface.
   =============================================================== */

:root{
  --gold:#c9a96e;
  --gold-2:#e9d3a1;            /* champagne, second stop of the gradient */
  --gold-hover:#b8975a;
  --gold-soft:rgba(201,169,110,.12);
  --bg:#0e0e0c;
  --surface:#161613;
  --surface-2:#1d1d19;
  --line:#2b2b26;
  --line-2:#3a3a33;
  --text:#ffffff;
  --text-2:#c4c4bd;
  --muted:#8d8d84;
  --dim:#6f6f68;
  --on-gold:#12120f;
  --header-bg:rgba(14,14,12,.92);
  --footer-bg:#0a0a09;
  --tint:rgba(255,255,255,.015);
  --shadow:rgba(0,0,0,.4);
  --radius:4px;

  /* Accent tones. Used by icons, section marks and the feature sections on
     the home page, through --tone (see "Tones" further down). Brighter
     here on the dark theme, deeper in the light theme below so they
     still read as text. */
  --c-blue:#6ea8fe;
  --c-green:#4ade80;
  --c-amber:#fbbf24;
  --c-red:#f87171;
  --c-purple:#c084fc;
  --c-teal:#2dd4bf;

  /* Alternating page bands (.section-alt), the cards that sit on them,
     and the soft shadow under cards. */
  --band:#141412;
  --band-card:#1b1b18;
  --elev:none;

  /* Typefaces. --display is headings, buttons and navigation, --sans is
     body text and --mono is labels and figures. The files are loaded in
     partials/head.php, so change both places together. Plus Jakarta
     Sans is drawn tighter than most, so the large headings in this file
     use about half the negative letter-spacing they had with Geist. */
  --display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Reading size. Every body-text size, and the small headings that sit
     with it (cards, FAQs, legal sections), is written as a base size
     times this number. 1 gives a 16px body with 14px card text; 1.06
     gives about 17px and 15px. Try 1.12 for larger still. Phones use
     their own value in the 600px block under "Responsive". */
  --text-scale:1.06;
  --header-h:70px;

  /* Champagne gradient. Declared once here; because --gold and --gold-2
     are redefined for the light theme on the same element, the
     gradients follow the theme with no second copy. */
  --gold-grad:linear-gradient(100deg,var(--gold) 0%,var(--gold-2) 100%);
  --gold-grad-v:linear-gradient(180deg,var(--gold) 0%,var(--gold-2) 100%);
  --gold-grad-btn:linear-gradient(110deg,var(--gold) 0%,var(--gold-2) 50%,var(--gold) 100%);
  color-scheme:dark;
}

/* ---------------------------------------------------------------
   Light theme. Applied when <html data-theme="light"> is set, which
   the toggle in the header does and the inline script in
   partials/head.php restores on the next visit. Dark stays the
   default for anyone arriving without a saved preference.
   --------------------------------------------------------------- */
:root[data-theme="light"]{
  --gold:#8a6c33;
  --gold-2:#6a4f22;            /* deeper on light, to keep text contrast */
  --gold-hover:#6f5628;
  --gold-soft:rgba(138,108,51,.10);
  --bg:#faf9f5;
  --surface:#ffffff;
  --surface-2:#f3f1ea;
  --line:#e3dfd3;
  --line-2:#ccc6b5;
  --text:#16160f;
  --text-2:#3c3c34;
  --muted:#63635a;
  --dim:#6e6e64;
  --on-gold:#ffffff;
  --header-bg:rgba(250,249,245,.92);
  --footer-bg:#f3f1ea;
  --tint:rgba(0,0,0,.02);
  --shadow:rgba(0,0,0,.14);
  --c-blue:#2563eb;
  --c-green:#15803d;
  --c-amber:#b45309;
  --c-red:#dc2626;
  --c-purple:#9333ea;
  --c-teal:#0f766e;
  --band:#ffffff;
  --band-card:#ffffff;
  --elev:0 1px 2px rgba(22,22,15,.05),0 2px 6px rgba(22,22,15,.06);
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-2);
  font-family:var(--sans);
  font-size:calc(16px * var(--text-scale));
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}

h1,h2,h3,h4,h5{font-family:var(--display);color:var(--text);margin:0;letter-spacing:-.2px;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--gold-grad);color:var(--on-gold);
  padding:10px 18px;font-family:var(--display);font-weight:700;z-index:200;
}
.skip-link:focus{left:0;}

/* ---------------- Section mark ----------------
   Three bars above a section heading, which is how a section start is
   marked across the site:
   long, medium, short, after the three units of the logo. Takes the
   section's tone colour, or gold where there is none. Markup:
   partials/mark.php. */
.mark{display:flex;align-items:center;gap:5px;width:fit-content;margin-bottom:18px;}
.mark i{display:block;height:5px;border-radius:3px;background:var(--tone,var(--gold-grad));}
.mark i:nth-child(1){width:30px;}
.mark i:nth-child(2){width:14px;}
.mark i:nth-child(3){width:5px;opacity:.55;}
.section-head .mark{margin-left:auto;margin-right:auto;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-block;font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:0;padding:13px 26px;border-radius:var(--radius);cursor:pointer;
  transition:background-color .15s ease,background-position .45s ease,border-color .15s ease,color .15s ease;
}
.btn-sm{padding:9px 16px;font-size:14px;}
/* Gradient runs gold > champagne > gold across double width; hover slides
   it along for a slow sheen instead of a flat colour change. */
.btn-primary{
  color:var(--on-gold);border:1px solid transparent;
  background-image:var(--gold-grad-btn);background-size:200% 100%;
  background-position:0 0;background-origin:border-box;
}
.btn-primary:hover{background-position:100% 0;text-decoration:none;}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);text-decoration:none;}

/* ===============================================================
   Top bar
   The slim line above the menu: the contact email on the left, display
   currency and the Client Area on the right. Unlike the header it
   is not sticky, so it scrolls away with the page. Markup:
   partials/header.php.
   =============================================================== */
.topbar{background:var(--footer-bg);border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:46px;}
.topbar-contact{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0;}
/* Each item is a flex box too. As plain text in a list item the link sat
   on the text baseline, a little below the middle of the bar. */
.topbar-contact li{display:flex;align-items:center;}
.topbar-contact a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:13px;font-weight:500;color:var(--muted);
  transition:color .15s ease;
}
.topbar-contact a:hover{color:var(--text);text-decoration:none;}
.topbar-contact i{font-size:12px;color:var(--gold);}
.topbar-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
/* The switch and the button are drawn a size smaller up here */
.topbar .currency-switch{height:30px;padding:2px;}
.topbar .currency-switch button{height:24px;padding:0 9px;font-size:11.5px;}
.topbar .btn{padding:5px 14px;font-size:13px;white-space:nowrap;}
@media (max-width:760px){
  /* No room for the contact email: currency left, Client Area right */
  .topbar-contact{display:none;}
  .topbar-actions{width:100%;justify-content:space-between;margin-left:0;}
}

/* ===============================================================
   Header and navigation
   =============================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);gap:24px;
}
.brand{
  font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:0;color:var(--text);flex-shrink:0;margin-right:auto;
}
.brand:hover{text-decoration:none;}
.brand-accent{color:var(--gold);}

.site-nav{display:flex;align-items:center;gap:28px;margin-left:auto;}
.site-nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
/* Each item is a flex box, so a link, a dropdown button and a "Soon"
   label all sit on the same centre line. */
@media (min-width:961px){
  .site-nav > ul > li{display:flex;align-items:center;}
}
.site-nav ul a{
  font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:0;
  color:var(--text-2);padding:6px 0;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.site-nav ul a:hover{color:var(--text);text-decoration:none;}
.site-nav ul a.active{color:var(--text);border-bottom-color:var(--gold);}

/* ---- Menu dropdown ----
   A menu item with children in $NAV. Opens on click or Enter, and on
   hover with a mouse on wide screens. Behaviour is in main.js. */
.site-nav .has-sub{position:relative;}
.nav-sub-toggle{
  display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 0;
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  font-family:var(--display);font-size:15px;font-weight:500;letter-spacing:0;
  color:var(--text-2);transition:color .15s ease;
}
.nav-sub-toggle:hover,.has-sub.open .nav-sub-toggle,.nav-sub-toggle.active{color:var(--text);}
.nav-sub-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
.nav-chev{
  width:6px;height:6px;margin-top:-3px;flex-shrink:0;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .18s ease,margin .18s ease;
}
.has-sub.open .nav-chev{transform:rotate(-135deg);margin-top:3px;}
.site-nav ul.nav-sub{
  position:absolute;top:calc(100% + 12px);left:-18px;z-index:110;
  display:none;flex-direction:column;align-items:stretch;gap:0;min-width:200px;padding:8px 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 12px 32px var(--shadow);
}
/* Invisible strip over the gap, so the menu stays open on the way down */
.site-nav ul.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
.has-sub.open ul.nav-sub{display:flex;}
@media (hover:hover) and (min-width:961px){
  .has-sub:hover ul.nav-sub{display:flex;}
  .has-sub:hover .nav-chev{transform:rotate(-135deg);margin-top:3px;}
}
.site-nav ul.nav-sub a{display:block;padding:9px 18px;border-bottom:0;white-space:nowrap;}
.site-nav ul.nav-sub a:hover{background:var(--gold-soft);color:var(--text);}
.site-nav ul.nav-sub a.active{background:none;color:var(--gold);}

/* Keep menu labels on one line. Between 961px and 1100px the seven
   items need the spacing tightened to fit beside the logo. */
.site-nav ul a,.nav-sub-toggle{white-space:nowrap;}
@media (min-width:961px) and (max-width:1100px){
  .header-inner{gap:16px;}
  .site-nav ul{gap:18px;}
  .site-nav ul a,.nav-sub-toggle{font-size:14px;}
}
@media (min-width:961px) and (max-width:1100px){
  .site-nav > ul > li > .nav-soon{font-size:14px;}
}

.nav-toggle{
  display:none;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);width:42px;height:38px;padding:0;
  flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--text-2);transition:.2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ===============================================================
   Sections
   =============================================================== */
.section{padding:88px 0;}
.section-tight{padding-top:0;}
/* Section headings are centred: the mark, the title and the line under it */
.section-head{max-width:660px;margin:0 auto 48px;text-align:center;}
.section-head h2{font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-.5px;margin-bottom:14px;}
.section-head p{font-size:calc(17px * var(--text-scale));color:var(--muted);margin:0;}


/* A band in the second page colour, to break a long page into parts.
   Cards inside it take --band-card so they still stand off the page. */
.section-alt{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-alt .feature,.section-alt .panel,.section-alt .path li{background:var(--band-card);}
/* The section after a band needs its top padding back */
.section-alt + .section-tight{padding-top:88px;}
.section-alt + .section-tight.faq{border-top:0;padding-top:16px;}

/* ---------------- Hero ---------------- */
.hero{padding:96px 0 72px;border-bottom:1px solid var(--line);}
.hero h1{font-size:56px;font-weight:800;line-height:1.08;letter-spacing:-.9px;margin-bottom:22px;}
.hero h1 .accent{color:var(--gold);}
.hero p.lead{font-size:calc(17.5px * var(--text-scale));line-height:1.6;color:var(--text-2);max-width:600px;margin:0 0 34px;}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero .from{font-family:var(--display);font-size:14px;color:var(--muted);margin-left:6px;}
.hero .from strong{color:var(--text);font-size:16px;}

/* ---------------- Trust strip ---------------- */
.strip{border-bottom:1px solid var(--line);background:var(--surface);}
.strip ul{display:grid;grid-template-columns:repeat(5,1fr);list-style:none;margin:0;padding:0;}
.strip li{
  padding:24px 18px;text-align:center;border-right:1px solid var(--line);
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--text);
}
.strip li:last-child{border-right:0;}
.strip li i{display:block;margin:0 auto 10px;font-size:16px;color:var(--tone,var(--gold));}
.strip li span{
  display:block;font-family:var(--mono);color:var(--muted);font-size:11px;letter-spacing:1.4px;
  text-transform:uppercase;margin-bottom:5px;font-weight:500;
}

/* ---------------- Plan cards ---------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.plan{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;display:flex;flex-direction:column;position:relative;
  box-shadow:var(--elev);
  transition:border-color .15s ease,transform .15s ease;
}
.plan:hover{border-color:var(--line-2);transform:translateY(-2px);}
.plan.featured{border-color:var(--gold);background:var(--surface-2);}
.plan .tag{
  position:absolute;top:-11px;left:28px;background:var(--gold-grad);color:var(--on-gold);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;padding:5px 12px;border-radius:2px;
}
.plan h3{font-size:22px;font-weight:700;letter-spacing:-.2px;margin-bottom:6px;}
.plan .tagline{font-size:calc(14px * var(--text-scale));color:var(--muted);margin:0 0 26px;min-height:44px;}
.plan .price{
  font-family:var(--display);font-size:46px;font-weight:800;color:var(--text);
  letter-spacing:-1.1px;line-height:1;
}
.plan .price .cur{font-size:20px;font-weight:500;color:var(--muted);vertical-align:top;letter-spacing:0;}
.plan .per{font-family:var(--display);font-size:14px;color:var(--muted);margin:8px 0 4px;}
.plan .annual{font-size:calc(13px * var(--text-scale));color:var(--dim);margin:0 0 26px;}
.plan .annual strong{color:var(--gold);font-weight:600;}
.plan .lifetime{
  margin:0 0 26px;padding:12px 14px;
  background:var(--gold-soft);border:1px solid rgba(201,169,110,.28);
  border-radius:var(--radius);
}
.plan .lifetime-label{
  display:block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:3px;
}
.plan .lifetime strong{
  display:block;font-family:var(--display);font-size:18px;font-weight:700;
  color:var(--text);letter-spacing:-.3px;
}
.plan .lifetime-sub{display:block;font-size:calc(12px * var(--text-scale));color:var(--muted);margin-top:2px;}
.plan ul{list-style:none;margin:0 0 30px;padding:0;flex:1;}
.plan li{
  font-size:calc(14px * var(--text-scale));color:var(--text-2);padding:9px 0 9px 24px;position:relative;
  border-bottom:1px solid var(--line);
}
.plan li:last-child{border-bottom:0;}
.plan li::before{
  /* A tick, not a chevron: the two arms must be different lengths. */
  content:"";position:absolute;left:4px;top:14px;width:5px;height:10px;
  border-right:1.75px solid var(--c-green);border-bottom:1.75px solid var(--c-green);
  transform:rotate(45deg);
}
.plan li strong{color:var(--text);font-weight:600;}
.plan .btn{text-align:center;}

/* ---------------- Comparison table ---------------- */
/* position:relative keeps the screen-reader text inside the ticks within
   the scrolling box, so a wide table cannot widen the page on a phone. */
.table-scroll{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}
table.compare{width:100%;border-collapse:collapse;min-width:660px;background:var(--surface);}
table.compare th,table.compare td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);}
table.compare thead th{
  background:var(--surface-2);font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line-2);
}
table.compare thead th:first-child{color:var(--muted);}
table.compare thead th:not(:first-child){text-align:center;}
table.compare tbody th{font-family:var(--sans);font-size:calc(14px * var(--text-scale));font-weight:500;color:var(--muted);width:30%;}
table.compare td{font-size:calc(14px * var(--text-scale));color:var(--text);text-align:center;}
table.compare tbody tr:hover{background:var(--gold-soft);}
table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{border-bottom:0;}
table.compare .group th{
  background:var(--surface-2);font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--text-2);
}
.yes{color:var(--c-green);font-weight:600;}
.yes i{font-size:15px;}
.no{color:var(--dim);}
.col-featured{background:rgba(201,169,110,.045);}

/* ---------------- Feature grid ---------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px 26px;box-shadow:var(--elev);
}
.feature h4{font-size:calc(17px * var(--text-scale));font-weight:700;margin-bottom:8px;}
.feature p{font-size:calc(14px * var(--text-scale));color:var(--muted);margin:0;line-height:1.62;}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);padding:26px 0;}
.faq-item h4{font-size:calc(17px * var(--text-scale));margin-bottom:10px;}
.faq-item p{font-size:calc(15px * var(--text-scale));color:var(--muted);margin:0;max-width:820px;}

/* ---------------- CTA panel ---------------- */
.cta{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:56px 48px;text-align:center;
}
.cta h2{font-size:34px;font-weight:800;letter-spacing:-.5px;margin-bottom:14px;}
.cta p{font-size:calc(17px * var(--text-scale));color:var(--muted);max-width:520px;margin:0 auto 30px;}
.cta .btn + .btn{margin-left:10px;}

.footnote{font-size:calc(13px * var(--text-scale));color:var(--dim);margin-top:22px;text-align:center;}

/* ===============================================================
   Legal documents
   =============================================================== */
.legal-hero{padding:64px 0 34px;border-bottom:1px solid var(--line);}
.legal-topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:20px;
}
.legal-back{
  font-family:var(--display);font-size:13px;font-weight:500;color:var(--muted);
}
.legal-back:hover{color:var(--gold);text-decoration:none;}
.lang-switch{
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.4px;
  color:var(--gold);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:6px 14px;transition:border-color .15s ease,background-color .15s ease;
}
.lang-switch:hover{
  border-color:var(--gold);background:var(--gold-soft);text-decoration:none;
}
.legal-hero h1{font-size:38px;line-height:1.15;margin-bottom:12px;}
.legal-meta{font-size:calc(13px * var(--text-scale));color:var(--dim);margin:0;}
.legal-intro{font-size:calc(17px * var(--text-scale));color:var(--text-2);max-width:680px;margin:20px 0 0;}

.legal{padding:52px 0 80px;}
.legal .wrap{max-width:820px;}
.legal h2{
  font-size:calc(20px * var(--text-scale));margin:44px 0 14px;padding-top:24px;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0;}
/* Headings that are linked to by #id stop below the sticky header. */
.legal h2[id]{scroll-margin-top:64px;}
.legal h2.legal-part{
  font-size:calc(24px * var(--text-scale));color:var(--gold);margin-top:60px;
  border-top:1px solid var(--line-2);
}
.legal h3{font-size:calc(16px * var(--text-scale));margin:28px 0 10px;}
.legal p{font-size:calc(15.5px * var(--text-scale));line-height:1.75;margin:0 0 16px;}
.legal ul,.legal ol{font-size:calc(15.5px * var(--text-scale));line-height:1.75;padding-left:22px;margin:0 0 18px;}
.legal li{margin-bottom:9px;}
.legal strong{color:var(--text);font-weight:600;}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:calc(13px * var(--text-scale));background:var(--surface-2);border:1px solid var(--line);
  border-radius:3px;padding:2px 6px;color:var(--gold);
}

.legal-facts{list-style:none;padding:0;margin:0 0 18px;}
.legal-facts li{
  display:flex;flex-wrap:wrap;gap:8px;padding:11px 0;
  border-bottom:1px solid var(--line);margin:0;font-size:calc(15px * var(--text-scale));
}
.legal-facts li:last-child{border-bottom:0;}
.legal-facts strong{
  flex:0 0 190px;color:var(--muted);font-weight:500;font-size:calc(14px * var(--text-scale));
}

.legal-table{
  width:100%;border-collapse:collapse;margin:0 0 24px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  display:block;overflow-x:auto;
}
.legal-table thead th{
  background:var(--surface-2);font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--gold);
  padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap;
}
.legal-table td{
  padding:13px 16px;font-size:calc(14px * var(--text-scale));line-height:1.6;color:var(--text-2);
  border-bottom:1px solid var(--line);vertical-align:top;
}
.legal-table tbody tr:last-child td{border-bottom:0;}
.legal-table td.yes{color:var(--c-green);font-weight:600;}
.legal-table td.no{color:var(--dim);}

.legal-callout{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:22px 24px;margin:0 0 30px;
}
.legal-callout h3{margin:0 0 10px;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);}
.legal-callout p{margin:0;font-size:calc(15px * var(--text-scale));}
.legal-callout-warn{border-left-color:#d98a4a;background:rgba(217,138,74,.07);}

.legal-note{
  font-size:calc(13px * var(--text-scale));color:var(--dim);font-style:italic;
  border-left:2px solid var(--line-2);padding-left:14px;margin:0 0 22px;
}

.legal-contact{
  margin-top:56px;padding-top:28px;border-top:1px solid var(--line);
}
.legal-contact h3{font-size:calc(15px * var(--text-scale));margin-bottom:10px;}
.legal-contact p{font-size:calc(14px * var(--text-scale));color:var(--muted);margin:0;}

/* Legal hub cards */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.legal-card{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;color:var(--text-2);
  transition:border-color .15s ease,transform .15s ease;
}
.legal-card:hover{border-color:var(--gold);transform:translateY(-2px);text-decoration:none;}
.legal-card h3{font-size:calc(17px * var(--text-scale));margin-bottom:9px;}
.legal-card p{font-size:calc(14px * var(--text-scale));color:var(--muted);margin:0 0 14px;line-height:1.6;}
.legal-card-go{
  font-family:var(--display);font-size:13px;font-weight:600;color:var(--gold);
}

/* ===============================================================
   Cookie banner
   =============================================================== */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--surface);border-top:1px solid var(--gold);
  box-shadow:0 -8px 32px var(--shadow);
}
.cookie-banner-inner{
  max-width:1140px;margin:0 auto;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cookie-banner p{margin:0;font-size:calc(14px * var(--text-scale));color:var(--text-2);max-width:640px;line-height:1.6;}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-settings-link{font-size:13px;color:var(--dim);margin-left:10px;}
.cookie-settings-link:hover{color:var(--gold);}

/* ===============================================================
   Footer
   =============================================================== */
.site-footer{background:var(--footer-bg);border-top:1px solid var(--line);padding:64px 0 0;}
/* The four link columns never go narrower than their longest link, so
   entries such as "Terms and conditions" stay on one line. The brand
   column gives way instead. */
.footer-grid{
  display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(max-content,1fr));
  gap:36px;padding-bottom:48px;
}
.footer-brand .brand{display:block;font-size:18px;margin-bottom:12px;}

/* PADU acronym, one word per line so the gold initials read downwards */
.brand-acronym{
  list-style:none;padding:0;margin:0 0 18px;
  font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.3px;
  color:var(--dim);line-height:1.8;
}
.brand-acronym li{margin:0;}
.brand-acronym strong{color:var(--gold);font-weight:700;}

/* Footer text uses fixed, smaller sizes rather than --text-scale, so
   the columns stay compact */
.footer-brand p{font-size:14px;color:var(--dim);margin:0 0 14px;max-width:280px;line-height:1.6;}
.footer-brand a{font-size:14px;color:var(--text-2);}

/* Email and WhatsApp, each with its icon */
.footer-contact{list-style:none;margin:0 0 20px;padding:0;}
.footer-contact li{margin:0 0 8px;}
.footer-contact a{display:inline-flex;align-items:center;gap:10px;}
.footer-contact a:hover{color:var(--gold);text-decoration:none;}
.footer-contact i{width:16px;text-align:center;font-size:14px;color:var(--gold);}

/* Social icons */
.footer-social{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--muted);font-size:14px;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.footer-social a:hover{color:var(--gold);border-color:var(--gold);background:var(--gold-soft);text-decoration:none;}
.footer-social a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.footer-col h5{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;
}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:10px;line-height:1.45;}
.footer-col a{font-size:14px;color:var(--dim);}
.footer-col a:hover{color:var(--text-2);text-decoration:none;}
.footer-bottom{
  border-top:1px solid var(--line);padding:22px 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.footer-bottom p{font-size:13px;color:var(--dim);margin:0;}

/* Payment methods, the last row of the footer */
.footer-payments{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:0 0 24px;}
.footer-payments-label{font-size:12px;color:var(--dim);}
.footer-payments ul{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;list-style:none;margin:0;padding:0;}
.footer-payments li{display:flex;align-items:center;color:var(--dim);line-height:1;}
.footer-payments i{font-size:26px;}
.pay-logo{
  display:block;height:var(--pay-height);aspect-ratio:var(--pay-ratio);background:currentColor;
  -webkit-mask:var(--pay-logo) center/contain no-repeat;mask:var(--pay-logo) center/contain no-repeat;
}
.pay-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:12.5px;font-weight:700;}
.footer-payments .pay-label i{font-size:15px;}

/* ===============================================================
   Responsive
   =============================================================== */
@media (max-width:960px){
  .nav-toggle{display:flex;}
  .site-nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:12px 24px 20px;
  }
  .site-nav.open{display:flex;}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0;}
  .site-nav ul a{display:block;padding:13px 0;border-bottom:1px solid var(--line);}
  .site-nav ul a.active{border-bottom-color:var(--line);color:var(--gold);}
  .site-nav .has-sub{position:static;}
  .nav-sub-toggle{
    display:flex;width:100%;justify-content:space-between;
    padding:13px 0;border-bottom:1px solid var(--line);
  }
  .site-nav ul.nav-sub{
    position:static;min-width:0;padding:0 0 0 16px;
    background:none;border:0;border-radius:0;box-shadow:none;
  }
  .site-nav ul.nav-sub::before{display:none;}
  .site-nav ul.nav-sub a{padding:12px 0;border-bottom:1px solid var(--line);}
  .site-nav ul.nav-sub a:hover{background:none;}

  .plans{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .strip ul{grid-template-columns:repeat(2,1fr);}
  .strip li{border-bottom:1px solid var(--line);}
  .strip li:nth-child(2n){border-right:0;}
  /* An odd item left on its own takes the full row */
  .strip li:last-child:nth-child(odd){grid-column:1 / -1;border-bottom:0;}
  .hero h1{font-size:42px;letter-spacing:-.6px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr;}
}

@media (max-width:600px){
  /* Phones are held closer, so the reading size does not grow here */
  :root{--text-scale:1;}
  .section{padding:60px 0;}
  .section-alt + .section-tight{padding-top:60px;}
  .hero{padding:64px 0 52px;}
  .hero h1{font-size:34px;letter-spacing:-.4px;}
  .hero p.lead{font-size:calc(17px * var(--text-scale));}
  .section-head h2{font-size:27px;letter-spacing:-.3px;}
  .grid-3{grid-template-columns:1fr;}
  .strip li{padding:20px 10px;font-size:14px;}
  .cta{padding:40px 24px;}
  .cta .btn + .btn{margin-left:0;margin-top:12px;}
  .footer-grid{grid-template-columns:1fr;}
  .legal-hero h1{font-size:28px;}
  .legal-facts strong{flex:0 0 100%;}
  .cookie-banner-inner{padding:16px;}
  .cookie-actions{width:100%;}
  .cookie-actions .btn{flex:1;text-align:center;}
}

/* ===============================================================
   Comparison accordion
   Append this to the END of assets/css/style.css. It must come
   after the existing "Comparison table" block so the border rules
   below override the single-tbody assumptions there.
   =============================================================== */

/* ---- Expand all / Collapse all ---- */
.compare-tools{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.compare-tools .sep{color:var(--line-2);font-size:12px;}
.cmp-all{
  background:transparent;border:0;padding:0;cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.4px;
  color:var(--muted);transition:color .15s ease;
}
.cmp-all:hover{color:var(--gold);}
.cmp-all:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}

/* ---- Section heading rows ---- */
table.compare tbody.cmp-group tr.group th{padding:0;}
.cmp-toggle{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 20px;margin:0;
  background:transparent;border:0;cursor:pointer;text-align:left;
  color:inherit;font:inherit;letter-spacing:inherit;
  transition:color .15s ease;
}
.cmp-toggle:hover{color:var(--gold);}
.cmp-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.cmp-title{
  font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;
}
.cmp-count{
  margin-left:auto;font-family:var(--sans);font-size:calc(12px * var(--text-scale));font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--dim);
}
.cmp-chev{
  width:7px;height:7px;flex-shrink:0;margin-top:-3px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .18s ease,margin .18s ease;
}
tbody.cmp-group.is-open .cmp-chev{transform:rotate(-135deg);margin-top:3px;}

/* ---- Collapse behaviour ----
   Only applied once the inline script on the page has added
   .js-compare to <html>, so the table stays fully readable
   when JavaScript is unavailable. */
html.js-compare tbody.cmp-group:not(.is-open) tr.cmp-row{display:none;}

/* ---- Section footnote row ---- */
.cmp-note td{
  text-align:left;font-size:calc(13px * var(--text-scale));font-style:italic;color:var(--dim);
  background:var(--tint);
}

/* ---- Separators, now that the table has several tbody elements ----
   The base stylesheet strips the bottom border from the last row of a
   tbody. With one tbody per section that would remove the divider in
   the middle of the table, so put it back everywhere except the very
   last row of the table. */
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td{border-bottom:1px solid var(--line);}
table.compare tbody:last-child tr:last-child th,
table.compare tbody:last-child tr:last-child td{border-bottom:0;}

/* Do not highlight the heading row on hover - it is a control, not data. */
table.compare tbody tr.group:hover{background:var(--surface-2);}

@media (max-width:600px){
  .cmp-count{display:none;}
  .cmp-toggle{padding:13px 16px;}
}

/* ===============================================================
   Footer external link marker and screen reader utility
   Append to the end of assets/css/style.css.
   =============================================================== */

/* Small outward arrow after links that leave the site. */
.footer-col a .ext{
  display:inline-block;width:7px;height:7px;margin-left:6px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.45;vertical-align:middle;
  transition:opacity .15s ease;
}
.footer-col a:hover .ext{opacity:1;}

/* Text highlighted with the mouse or a finger */
::selection{background:#f7931e;color:#17120a;}

/* Visible to screen readers only. */
.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;
}
/* ===============================================================
   FAQ accordion and feature icons
   =============================================================== */

/* ---- Collapsible FAQ, built on <details> ---- */
details.faq-item{padding:0;}
details.faq-item > summary{
  display:flex;align-items:flex-start;gap:18px;
  padding:22px 0;cursor:pointer;list-style:none;
}
details.faq-item > summary::-webkit-details-marker{display:none;}
details.faq-item > summary::marker{content:"";}
details.faq-item > summary h4{
  flex:1;margin:0;font-size:calc(17px * var(--text-scale));line-height:1.45;
  transition:color .15s ease;
}
details.faq-item > summary:hover h4,
details.faq-item[open] > summary h4{color:var(--gold);}
details.faq-item > summary:focus-visible{
  outline:2px solid var(--gold);outline-offset:4px;border-radius:2px;
}
.faq-chev{
  width:8px;height:8px;flex-shrink:0;margin-top:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .18s ease,margin .18s ease;
}
details.faq-item[open] .faq-chev{transform:rotate(-135deg);margin-top:13px;}
.faq-answer{padding:0 0 24px;animation:faq-reveal .18s ease;}
.faq-answer p{margin:0;font-size:calc(15px * var(--text-scale));color:var(--muted);max-width:820px;}
@keyframes faq-reveal{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .faq-answer{animation:none;}
  .faq-chev{transition:none;}
}

/* ---- Font Awesome icons on the feature cards ---- */
.feature-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-bottom:18px;
  border-radius:var(--radius);
  /* The flat pair is for browsers without color-mix() */
  background:var(--gold-soft);border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--tone,var(--gold)) 14%,transparent);
  border-color:color-mix(in srgb,var(--tone,var(--gold)) 32%,transparent);
  color:var(--tone,var(--gold));font-size:16px;line-height:1;
}
.feature-icon i{display:block;}


/* ===============================================================
   Theme switch
   Light, System and Dark in one 38px-high control. The pressed
   button is the visitor's choice, not the theme on screen, so
   System stays highlighted while it follows the device.
   =============================================================== */
.theme-switch{
  display:inline-flex;align-items:center;gap:2px;flex-shrink:0;
  height:38px;padding:3px;
  border:1px solid var(--line-2);border-radius:var(--radius);
}
.theme-switch button{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  background:transparent;border:0;border-radius:2px;cursor:pointer;
  color:var(--muted);font-size:13px;line-height:1;
  transition:color .15s ease,background-color .15s ease;
}
.theme-switch button:hover{color:var(--text);}
.theme-switch button[aria-pressed="true"]{background:var(--gold-soft);color:var(--gold);}
.theme-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}

/* Light theme touch-ups where a dark-only assumption was baked in. */
:root[data-theme="light"] .plan:hover{box-shadow:0 6px 18px var(--shadow);}
:root[data-theme="light"] .legal-callout-warn{background:rgba(217,138,74,.10);}
:root[data-theme="light"] .cookie-banner{box-shadow:0 -8px 32px var(--shadow);}

@media (prefers-reduced-motion:reduce){
  .theme-switch button{transition:none;}
}


/* ===============================================================
   Logo
   The lockup is inlined by header.php and footer.php. "padu"
   picks up currentColor from .brand and the "host" gradient runs
   from --gold to --gold-2, so one file serves both themes. The
   bars keep a fixed Gold to Champagne gradient, as they always
   sit on the dark tile.
   =============================================================== */
.brand{display:flex;align-items:center;line-height:0;}
.brand svg{height:26px;width:auto;display:block;}
.footer-brand .brand{display:block;margin-bottom:14px;}
.footer-brand .brand svg{height:24px;}
@media (max-width:600px){
  .brand svg{height:22px;}
}


/* ===============================================================
   Champagne gradient
   Where the gold becomes a gradient. Kept flat on purpose: body
   links, data table headings, inline code, chevrons and
   hover states. At those sizes a gradient
   does not register and flat gold reads more cleanly.
   =============================================================== */

/* ---- Gradient text ----
   The gradient paints across the element's own box, so any block
   element here is shrunk to its text with width:fit-content,
   otherwise short labels would only show the first colour. Browsers
   without text clipping keep the flat gold already set above. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .accent,
  .plan .annual strong,
  .plan .lifetime-label,
  .legal h2.legal-part span,
  .legal-callout h3,
  .footer-col h5,
  .brand-acronym strong{
    background-image:var(--gold-grad);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
}
.plan .lifetime-label,
.legal-callout h3,
.footer-col h5{width:fit-content;}

/* ---- Active nav underline ----
   Painted as a 2px background strip over the transparent border, so
   the link keeps its existing box and spacing. A dropdown gets the
   same strip when the current page is one of its items. */
.site-nav ul a.active,
.nav-sub-toggle.active{
  border-bottom-color:transparent;
  background:var(--gold-grad) left bottom / 100% 2px no-repeat border-box;
}
.site-nav ul.nav-sub a.active{background:none;}
@media (max-width:960px){
  .site-nav ul a.active{border-bottom-color:var(--line);background:none;}
  .nav-sub-toggle.active{border-bottom-color:var(--line);background:none;color:var(--gold);}
}

/* ---- Featured plan border ---- */
.plan.featured,
.plan.featured:hover{
  border-color:transparent;
  background:
    linear-gradient(var(--surface-2),var(--surface-2)) padding-box,
    var(--gold-grad) border-box;
}

/* ---- Legal callout edge ---- */
.legal-callout{position:relative;border-left-color:transparent;}
.legal-callout::before{
  content:"";position:absolute;left:-3px;top:-1px;bottom:-1px;width:3px;
  border-radius:var(--radius) 0 0 var(--radius);background:var(--gold-grad-v);
}
.legal-callout-warn::before{background:#d98a4a;}

/* ---- Cookie banner top line ---- */
.cookie-banner{border-top:0;}
.cookie-banner::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold-grad);
}


/* ===============================================================
   Hero artwork (home page)
   The rack drawing sits to the right of the hero copy on wide
   screens and is dropped below 960px, where the hero goes to a
   single column. Markup: partials/hero-rack.php.
   =============================================================== */
/* The dot fields behind the artwork reach past their boxes. Between
   961px and about 1190px the wrap has no side margin to absorb them,
   so clip sideways overflow rather than let the page scroll. */
main{overflow-x:hidden;overflow-x:clip;}

.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:40px;align-items:center;
}
.hero-art{
  position:relative;width:100%;max-width:460px;justify-self:end;
  aspect-ratio:440/400;
}
/* Faint dot field with a soft gold bloom behind the drawing */
.hero-art::before{
  content:"";position:absolute;inset:-6% -8%;pointer-events:none;
  background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
}
.hero-art::after{
  content:"";position:absolute;inset:12%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--gold-soft),transparent);
}
/* Height comes from the SVG's own width and height, so it never
   depends on the box above being sized first */
.hero-rack{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
.hero-rack .rk-stop-1{stop-color:var(--gold);}
.hero-rack .rk-stop-2{stop-color:var(--gold-2);}
.hero-rack .rk-unit{fill:var(--surface);stroke:url(#hero-rack-grad);stroke-width:1.25;}
.hero-rack .rk-slot{fill:none;stroke:var(--line-2);stroke-width:1.25;stroke-dasharray:3 5;}
.hero-rack .rk-txt{stroke:var(--line-2);stroke-width:4;stroke-linecap:round;}
.hero-rack .rk-vent{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-linecap:round;}
.hero-rack .rk-led{fill:var(--gold);}
.hero-rack .rk-led-live{fill:var(--c-green);animation:rk-pulse 2.4s ease-in-out infinite alternate;}
@keyframes rk-pulse{from{opacity:1;}to{opacity:.3;}}

/* Below 960px the hero goes to one column and the rack sits under
   the buttons, smaller */
@media (max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .hero-art{justify-self:center;max-width:380px;}
  /* Pages where the content under the hero matters more than the
     picture (domains, shared hosting) drop it instead */
  .hero-art-wide{display:none;}
}
@media (max-width:600px){
  .hero-art{max-width:300px;}
}
@media (prefers-reduced-motion:reduce){
  .hero-rack .rk-led-live{animation:none;}
  .btn{transition:none;}
}


/* ===============================================================
   About page
   =============================================================== */
.about-split{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:48px;align-items:center;
}
.about-split h2{font-size:36px;line-height:1.2;margin-bottom:16px;}
.about-split p{font-size:calc(17px * var(--text-scale));color:var(--muted);max-width:560px;margin:0 0 14px;}
.about-split p:last-child{margin-bottom:0;}

/* The mark shown large, over the same dot field as the home hero */
.about-mark{
  position:relative;margin:0;width:100%;max-width:240px;
  justify-self:center;aspect-ratio:1;
}
.about-mark::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background-image:radial-gradient(circle,var(--line-2) 1px,transparent 1.4px);
  background-size:18px 18px;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
}
.about-mark::after{
  content:"";position:absolute;inset:-15%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--gold-soft),transparent);
}
.about-mark svg{position:relative;z-index:1;display:block;width:100%;height:auto;}

.about-facts{max-width:720px;margin-left:auto;margin-right:auto;}

@media (max-width:760px){
  .about-split{grid-template-columns:minmax(0,1fr);gap:36px;}
  .about-split h2{font-size:28px;}
  .about-mark{max-width:160px;justify-self:start;}
}


/* ===============================================================
   Domain page
   Search box, price chips, TLD table, transfer steps and the hero
   artwork. Markup: domains.php and partials/hero-domain.php. The
   artwork reuses the .hero-grid and .hero-art layout from the
   "Hero artwork" block above.
   =============================================================== */

/* ---- Search box ---- */
.domain-search{display:flex;gap:10px;max-width:620px;margin:0 0 18px;}
.ds-field{position:relative;flex:1;min-width:0;}
.ds-field i{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:14px;pointer-events:none;
}
.ds-field input{
  width:100%;height:52px;margin:0;padding:0 16px 0 44px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--text);font-family:var(--display);font-size:16px;font-weight:500;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ds-field input::placeholder{color:var(--dim);font-weight:400;}
.ds-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.domain-search .btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 24px;flex-shrink:0;
}

/* ---- Price chips under the search box ---- */
.tld-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.tld-chips li{
  display:inline-flex;align-items:baseline;gap:8px;padding:6px 12px;
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--display);font-size:13px;font-weight:500;color:var(--text);
}
.tld-chips .tld{color:var(--gold);font-weight:700;}
.tld-chips .per,.tld-table .per{color:var(--dim);font-size:12px;font-weight:400;margin-left:1px;}
.tld-chips .tld-was,.tld-table .tld-was{color:var(--dim);font-weight:400;margin-right:2px;}

/* ---- Two-column comparison, built on table.compare ----
   Budget or Web Hosting, free or paid SSL. */
table.compare.compare-two{min-width:520px;}
.compare-two tbody th{width:40%;}
.compare-two td{font-weight:500;}

/* ---- Feature tips ----
   The "?" beside a comparison row (tip() in config.php). The bubble is
   one element that main.js places beside the button in use. It is
   fixed to the window so the scrolling table cannot cut it off. */
.tip{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-left:7px;padding:0;vertical-align:middle;
  border:1px solid var(--line-2);border-radius:50%;background:transparent;
  color:var(--muted);font:600 11px/1 var(--sans);cursor:help;
}
.tip-keep{white-space:nowrap;}
/* A larger target for fingers than the circle itself. */
.tip::before{content:"";position:absolute;inset:-9px;}
.tip:hover,.tip:focus-visible,.tip.is-on{color:var(--gold);border-color:var(--gold);}
.tip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.tip-pop{
  position:fixed;z-index:300;top:0;left:0;max-width:min(290px,calc(100vw - 24px));
  padding:11px 14px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.32);
  color:var(--text);font-size:calc(13px * var(--text-scale));line-height:1.55;font-weight:400;
  pointer-events:none;
}
.tip-pop[hidden]{display:none;}

/* ---- Coming soon ----
   A menu or footer entry marked 'soon' in config.php, and the home page
   card of a product that is not on sale yet. Looks like its neighbours
   but is not a link. */
.soon-tag{
  display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--mono);font-size:9.5px;font-weight:600;font-style:normal;letter-spacing:1px;line-height:1.5;
  text-transform:uppercase;color:var(--gold);vertical-align:middle;white-space:nowrap;
}
.nav-soon{cursor:default;}
/* In the main menu it takes the same size and spacing as the links beside it. */
.site-nav > ul > li > .nav-soon{
  display:inline-flex;align-items:center;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;
  font-family:var(--display);font-size:15px;font-weight:500;color:var(--dim);
}
.site-nav > ul > li > .nav-soon .soon-tag{margin-left:6px;padding:1px 6px;font-size:9px;}
.site-nav ul.nav-sub .nav-soon{display:block;padding:9px 18px;white-space:nowrap;color:var(--dim);font-size:inherit;}
.footer-col .nav-soon{font-size:14px;color:var(--dim);}
.product-from .soon-tag{margin-left:0;font-size:10.5px;padding:4px 10px;}
.product.is-soon:hover{transform:none;border-color:var(--line);}
.btn.is-disabled{cursor:default;opacity:.55;pointer-events:none;}
@media (max-width:960px){
  .site-nav ul.nav-sub .nav-soon{padding:12px 0;border-bottom:1px solid var(--line);}
  .site-nav > ul > li > .nav-soon{display:flex;padding:13px 0;border-bottom:1px solid var(--line);}
}

/* ---- VPS page ----
   One table for each line of plans, a row for each size. Built on
   table.compare, with the line's colour on its heading. */
.vps-line{margin-top:34px;}
.vps-line:first-of-type{margin-top:0;}
.vps-line-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:14px;}
.vps-line-head h3{
  font-size:20px;font-weight:700;letter-spacing:-.2px;margin:0;padding-left:14px;
  border-left:4px solid var(--tone,var(--gold));
}
.vps-line-head p{margin:0;font-size:calc(14px * var(--text-scale));color:var(--muted);}
table.compare.vps-table{min-width:720px;}
.vps-table thead th:first-child,.vps-table tbody th{width:22%;}
.vps-table tbody th{color:var(--text);font-weight:600;}
.vps-table .vps-price strong{font-size:calc(16px * var(--text-scale));color:var(--tone,var(--gold));}
.vps-table .per{color:var(--dim);font-size:12px;margin-left:1px;}
.vps-table .vps-order{width:1%;white-space:nowrap;text-align:right;}
.vps-table .btn-sm{padding:7px 16px;}

/* ---- Launch offer page ----
   The voucher drawn beside the title, and a struck-through normal
   price beside each launch price. Markup: launch.php. */
.hero-voucher{display:flex;align-items:center;}
.hero-voucher .panel{width:100%;z-index:1;}
.launch-social{justify-content:center;margin-top:28px;}
.voucher-figure{padding:30px 20px 26px;text-align:center;}
.voucher-figure strong{
  display:block;font-family:var(--display);font-size:64px;font-weight:800;line-height:1;
  letter-spacing:-2px;color:var(--text);
}
.voucher-figure strong em{font-style:normal;color:var(--gold);}
.voucher-figure span{display:block;margin-top:10px;font-size:calc(14px * var(--text-scale));color:var(--muted);}
.was{margin-left:8px;font-weight:400;color:var(--dim);text-decoration:line-through;}
.launch-code{
  display:inline-block;margin:0 2px;padding:3px 9px;border:1px dashed var(--line-2);border-radius:5px;
  font-family:var(--mono);font-size:.9em;font-weight:600;letter-spacing:1.2px;color:var(--text);
}
.launch-terms{max-width:760px;margin:0 auto;padding-left:20px;font-size:calc(14px * var(--text-scale));color:var(--muted);}
.launch-terms li{margin-bottom:8px;}

/* ---- Price table, built on table.compare ---- */
table.compare.tld-table{min-width:520px;}
/* Filter box and expand / collapse links above the price list */
.tld-tools{justify-content:space-between;flex-wrap:wrap;gap:12px 18px;}
.tld-tools-all{display:inline-flex;align-items:center;gap:10px;}
.tld-filter{
  display:flex;align-items:center;gap:10px;flex:1 1 260px;max-width:360px;padding:0 14px;height:42px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
}
.tld-filter:focus-within{border-color:var(--gold);}
.tld-filter i{color:var(--muted);font-size:13px;}
.tld-filter input{
  flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;
  color:var(--text);font-family:var(--sans);font-size:15px;
}
.tld-filter input::placeholder{color:var(--dim);}
/* hidden rows and groups stay hidden whatever the folding rules say */
.tld-table tr[hidden],.tld-table tbody[hidden]{display:none;}
.tld-none{margin:18px 0 0;text-align:center;color:var(--muted);font-size:calc(15px * var(--text-scale));}
.tld-table tbody th{width:40%;}
.tld-table .tld-name{
  display:block;font-family:var(--display);font-size:16px;font-weight:700;color:var(--text);
}
.tld-table .tld-note{display:block;font-size:calc(12px * var(--text-scale));font-weight:400;color:var(--dim);margin-top:2px;}
.tld-table td{font-family:var(--display);font-size:15px;font-weight:600;}
.placeholder-flag{color:#d98a4a;font-weight:600;}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tld-chips .tld{
    background-image:var(--gold-grad);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* ---- Transfer steps ---- */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  list-style:none;margin:0;padding:0;counter-reset:step;
}
.steps li{
  counter-increment:step;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;box-shadow:var(--elev);
}
.steps li::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:14px;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:1.4px;color:var(--tone,var(--gold));
}
.steps h4{font-size:calc(16px * var(--text-scale));margin-bottom:8px;}
.steps p{font-size:calc(14px * var(--text-scale));color:var(--muted);margin:0;line-height:1.6;}
.steps-cta{margin:28px 0 0;text-align:center;}

/* ---- Hero artwork ---- */
.hero-dom{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
.hero-dom .dm-stop-1{stop-color:var(--gold);}
.hero-dom .dm-stop-2{stop-color:var(--gold-2);}
.hero-dom .dm-unit{fill:var(--surface);stroke:url(#hero-dom-grad);stroke-width:1.25;}
.hero-dom .dm-slot{fill:none;stroke:var(--line-2);stroke-width:1.25;stroke-dasharray:3 5;}
.hero-dom .dm-plus{stroke:var(--line-2);}
.hero-dom .dm-text{fill:var(--text-2);font-family:var(--display);}
.hero-dom .dm-icon{stroke:var(--gold);}
.hero-dom .dm-tick{stroke:var(--c-green);}
.hero-dom .dm-go-arrow{stroke:var(--on-gold);}
.hero-dom .dm-led{fill:var(--gold);}
.hero-dom .dm-led-live{fill:var(--c-green);animation:rk-pulse 2.4s ease-in-out infinite alternate;}
.hero-dom .dm-caret{fill:var(--gold-2);animation:dm-blink 1.1s steps(1) infinite;}
@keyframes dm-blink{50%{opacity:0;}}

@media (max-width:960px){
  .steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  table.compare.tld-table{min-width:0;}
  table.compare.tld-table th,table.compare.tld-table td{padding:14px 8px;}
  table.compare.tld-table th:first-child{padding-left:16px;}
  table.compare.tld-table thead th{font-size:10px;letter-spacing:.8px;}
  table.compare.tld-table tbody th{width:auto;}
  table.compare.tld-table td{font-size:14px;}
  .tld-table .per{display:none;}
  .domain-search{flex-wrap:wrap;}
  .ds-field{flex:1 1 100%;}
  .domain-search .btn{flex:1;}
  .steps{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .hero-dom .dm-led-live,.hero-dom .dm-caret{animation:none;}
}


/* ===============================================================
   Web hosting page
   Control panel artwork in the hero (partials/hero-hosting.php)
   and the badge on the featured column of the comparison table.
   =============================================================== */
.hero-cp{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
.hero-cp .cp-stop-1{stop-color:var(--gold);}
.hero-cp .cp-stop-2{stop-color:var(--gold-2);}
.hero-cp .cp-window{fill:var(--surface);stroke:url(#hero-cp-grad);}
.hero-cp .cp-rule,.hero-cp .cp-menu{stroke:var(--line);}
.hero-cp .cp-dot{fill:var(--line-2);}
.hero-cp .cp-track{fill:var(--line);}
.hero-cp text{font-family:var(--display);}
.hero-cp .cp-label{fill:var(--text-2);}
.hero-cp .cp-dim{fill:var(--dim);}
.hero-cp .cp-pill{fill:var(--gold-soft);fill:color-mix(in srgb,var(--c-green) 14%,transparent);stroke:color-mix(in srgb,var(--c-green) 36%,transparent);}
.hero-cp .cp-tick{stroke:var(--c-green);}
.hero-cp .cp-ok{fill:var(--c-green);}

/* ===============================================================
   SSL page
   Address bar artwork in the hero (partials/hero-ssl.php).
   =============================================================== */
.hero-ssl{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
.hero-ssl .ss-stop-1{stop-color:var(--gold);}
.hero-ssl .ss-stop-2{stop-color:var(--gold-2);}
.hero-ssl .ss-unit{fill:var(--surface);stroke:url(#hero-ssl-grad);stroke-width:1.25;}
.hero-ssl .ss-slot{fill:none;stroke:var(--line-2);stroke-width:1.25;stroke-dasharray:3 5;}
.hero-ssl .ss-text{fill:var(--text-2);font-family:var(--display);}
.hero-ssl .ss-lock,.hero-ssl .ss-scheme{fill:var(--c-green);}
.hero-ssl .ss-shackle,.hero-ssl .ss-tick{stroke:var(--c-green);}
.hero-ssl .ss-led{fill:var(--gold);}
.hero-ssl .ss-led-live{fill:var(--c-green);animation:rk-pulse 2.4s ease-in-out infinite alternate;}

/* ===============================================================
   Email hosting page
   Mailbox artwork in the hero (partials/hero-mail.php).
   =============================================================== */
.hero-mail{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
.hero-mail .ml-stop-1{stop-color:var(--gold);}
.hero-mail .ml-stop-2{stop-color:var(--gold-2);}
.hero-mail .ml-unit{fill:var(--surface);stroke:url(#hero-mail-grad);stroke-width:1.25;}
.hero-mail .ml-slot{fill:none;stroke:var(--line-2);stroke-width:1.25;stroke-dasharray:3 5;}
.hero-mail .ml-text{fill:var(--text-2);font-family:var(--display);}
.hero-mail .ml-at{fill:var(--gold);}
.hero-mail .ml-env{stroke:var(--gold);}
.hero-mail .ml-txt{stroke:var(--line-2);stroke-width:4;stroke-linecap:round;}
.hero-mail .ml-tick{stroke:var(--c-green);}
.hero-mail .ml-led{fill:var(--gold);}
.hero-mail .ml-led-live{fill:var(--c-green);animation:rk-pulse 2.4s ease-in-out infinite alternate;}

/* ===============================================================
   WordPress hosting page
   Artwork in the hero (partials/hero-wp.php). The WordPress logo is
   the icon font's own mark, placed over the left end of the first bar.
   =============================================================== */
.hero-wp{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;}
.hero-wp .wp-stop-1{stop-color:var(--gold);}
.hero-wp .wp-stop-2{stop-color:var(--gold-2);}
.hero-wp .wp-unit{fill:var(--surface);stroke:url(#hero-wp-grad);stroke-width:1.25;}
.hero-wp .wp-slot{fill:none;stroke:var(--line-2);stroke-width:1.25;stroke-dasharray:3 5;}
.hero-wp .wp-text{fill:var(--text-2);font-family:var(--display);}
.hero-wp .wp-tick{stroke:var(--c-green);}
.hero-wp .wp-led{fill:var(--gold);}
.hero-wp .wp-led-live{fill:var(--c-green);animation:rk-pulse 2.4s ease-in-out infinite alternate;}
/* 15% and 29.5% are the left end and the middle of the first bar. */
.hero-wp-logo{
  position:absolute;z-index:2;left:15%;top:29.5%;transform:translateY(-50%);
  font-size:27px;line-height:1;color:var(--text);
}

/* ===============================================================
   Hero artwork in colour (HERO_COLOUR in config.php)
   .hero-art-colour on the box around a drawing gives each part marked
   t1 to t4 its own colour, puts a two-colour glow behind the drawing
   and floats the labels from partials/hero-chips.php around it. A
   second class, such as .hero-art-budget, picks that page's colours.
   =============================================================== */
.hero-art-colour{
  --u1:var(--c-green);--u2:var(--c-blue);--u3:var(--c-amber);--u4:var(--c-purple);
  --glow-1:var(--c-blue);--glow-2:var(--c-purple);
}
.hero-art-budget{
  --u1:var(--c-teal);--u2:var(--c-blue);--u3:var(--c-green);--u4:var(--c-amber);
  --glow-1:var(--c-teal);--glow-2:var(--c-green);
}
.hero-art-reseller{
  --u1:var(--c-purple);--u2:var(--c-amber);--u3:var(--c-blue);--u4:var(--c-green);
  --glow-1:var(--c-purple);--glow-2:var(--c-amber);
}
.hero-art-domain{
  --u1:var(--c-blue);--u2:var(--c-green);--u3:var(--c-amber);--u4:var(--c-purple);
  --glow-1:var(--c-teal);--glow-2:var(--c-blue);
}
.hero-art-ssl{
  --u1:var(--c-green);--u2:var(--c-blue);--u3:var(--c-purple);--u4:var(--c-green);
  --glow-1:var(--c-green);--glow-2:var(--c-teal);
}
.hero-art-hosting{
  --u1:var(--c-blue);--u2:var(--c-purple);--u3:var(--c-amber);
  --glow-1:var(--c-amber);--glow-2:var(--c-blue);
}
.hero-art-vps{
  --u1:var(--c-red);--u2:var(--c-blue);--u3:var(--c-amber);--u4:var(--c-teal);
  --glow-1:var(--c-red);--glow-2:var(--c-blue);
}
.hero-art-mail{
  --u1:var(--c-blue);--u2:var(--c-purple);--u3:var(--c-green);--u4:var(--c-amber);
  --glow-1:var(--c-blue);--glow-2:var(--c-teal);
}
.hero-art-wp{
  --u1:var(--c-blue);--u2:var(--c-amber);--u3:var(--c-green);--u4:var(--c-purple);
  --glow-1:var(--c-blue);--glow-2:var(--c-green);
}

.hero-art.hero-art-colour::after{
  inset:-4%;border-radius:0;
  background:
    radial-gradient(closest-side at 32% 34%,color-mix(in srgb,var(--glow-1) 28%,transparent),transparent),
    radial-gradient(closest-side at 70% 68%,color-mix(in srgb,var(--glow-2) 26%,transparent),transparent);
  animation:glow-breathe 7s ease-in-out infinite alternate;
}
@keyframes glow-breathe{from{opacity:.65;}to{opacity:1;}}

.hero-art-colour .t1{--tone:var(--u1);}
.hero-art-colour .t2{--tone:var(--u2);}
.hero-art-colour .t3{--tone:var(--u3);}
.hero-art-colour .t4{--tone:var(--u4);}
/* Outlines of the bars and the open slot */
.hero-art.hero-art-colour .rk-unit,.hero-art.hero-art-colour .dm-unit,.hero-art.hero-art-colour .ss-unit,
.hero-art.hero-art-colour .ml-unit,.hero-art.hero-art-colour .ml-slot,.hero-art.hero-art-colour .ml-env,
.hero-art.hero-art-colour .wp-unit,.hero-art.hero-art-colour .wp-slot,
.hero-art.hero-art-colour .rk-slot,.hero-art.hero-art-colour .dm-slot,.hero-art.hero-art-colour .ss-slot{
  stroke:color-mix(in srgb,var(--tone) 60%,var(--line-2));
}
/* Lights, the first line of each server unit, domain endings, meters */
.hero-art.hero-art-colour .rk-led,.hero-art.hero-art-colour .dm-led,.hero-art.hero-art-colour .ss-led,
.hero-art.hero-art-colour .dm-tld,.hero-art.hero-art-colour .cp-fill,
.hero-art.hero-art-colour .ml-led,.hero-art.hero-art-colour .ml-at,
.hero-art.hero-art-colour .wp-led{fill:var(--tone);}
.hero-art.hero-art-colour .rk-txt.t1,.hero-art.hero-art-colour .rk-txt.t2,.hero-art.hero-art-colour .rk-txt.t3,
.hero-art.hero-art-colour .ml-txt.t2,.hero-art.hero-art-colour .ml-txt.t3,
.hero-art.hero-art-colour .dm-plus{stroke:color-mix(in srgb,var(--tone) 55%,var(--line-2));}
/* Every light pulses, out of step with the others */
.hero-art.hero-art-colour .rk-led,.hero-art.hero-art-colour .dm-led,.hero-art.hero-art-colour .ss-led,
.hero-art.hero-art-colour .ml-led,.hero-art.hero-art-colour .wp-led{
  animation:rk-pulse 2.4s ease-in-out infinite alternate;
}
.hero-art.hero-art-colour .rk-led.t2,.hero-art.hero-art-colour .dm-led.t2,.hero-art.hero-art-colour .ss-led.t2{animation-delay:-.9s;}
.hero-art.hero-art-colour .rk-led.t3,.hero-art.hero-art-colour .dm-led.t3,.hero-art.hero-art-colour .ss-led.t3,
.hero-art.hero-art-colour .ml-led.t3,.hero-art.hero-art-colour .wp-led.t3{animation-delay:-1.7s;}

/* ---- Floating labels ---- */
.hero-chips{list-style:none;margin:0;padding:0;}
.hero-chips li{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line-2);
  border-color:color-mix(in srgb,var(--tone) 50%,var(--line-2));
  color:var(--text);font-size:13px;font-weight:600;line-height:1.2;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  animation:chip-float 3.4s ease-in-out infinite alternate;
}
.hero-chips li i{color:var(--tone);font-size:13px;}
@keyframes chip-float{from{transform:translateY(-5px);}to{transform:translateY(5px);}}
/* Different speeds and starting points, so they never move together */
.hero-chips li:nth-child(2){animation-duration:4.1s;animation-delay:-1.3s;}
.hero-chips li:nth-child(3){animation-duration:4.6s;animation-delay:-2.4s;}
.hero-chips li:nth-child(4){animation-duration:3.8s;animation-delay:-.7s;}

/* Where they sit on the three-bar drawings. The fourth is in the open slot. */
.hero-chips li:nth-child(1){top:11%;left:3%;}
.hero-chips li:nth-child(2){top:35%;right:-7%;}
.hero-chips li:nth-child(3){top:55.5%;left:-8%;}
.hero-chips li:nth-child(4){top:66%;right:9%;}
/* The other three-bar pages each use different spots, so the labels are
   not in the same place from one page to the next. Every spot is still
   on an edge of the drawing: above the first bar, on the gap between two
   bars, or below the last one. left and right are both set, so nothing
   carries over from the rules above. */
.hero-art-budget .hero-chips li:nth-child(1){top:11%;left:auto;right:4%;}
.hero-art-budget .hero-chips li:nth-child(2){top:35.5%;left:-8%;right:auto;}
.hero-art-budget .hero-chips li:nth-child(3){top:56%;left:25%;right:auto;}
.hero-art-budget .hero-chips li:nth-child(4){top:80%;left:5%;right:auto;}

.hero-art-reseller .hero-chips li:nth-child(1){top:11%;left:15%;right:auto;}
.hero-art-reseller .hero-chips li:nth-child(2){top:35.5%;left:33%;right:auto;}
.hero-art-reseller .hero-chips li:nth-child(3){top:56%;left:auto;right:-7%;}
.hero-art-reseller .hero-chips li:nth-child(4){top:80%;left:27%;right:auto;}

.hero-art-domain .hero-chips li:nth-child(1){top:11%;left:40%;right:auto;}
.hero-art-domain .hero-chips li:nth-child(2){top:35.5%;left:-5%;right:auto;}
.hero-art-domain .hero-chips li:nth-child(3){top:56%;left:auto;right:-6%;}
.hero-art-domain .hero-chips li:nth-child(4){top:66%;left:auto;right:12%;}

.hero-art-ssl .hero-chips li:nth-child(1){top:11%;left:auto;right:-4%;}
.hero-art-ssl .hero-chips li:nth-child(2){top:35.5%;left:30%;right:auto;}
.hero-art-ssl .hero-chips li:nth-child(3){top:56%;left:-6%;right:auto;}
.hero-art-ssl .hero-chips li:nth-child(4){top:80%;left:auto;right:11%;}

.hero-art-colour .hero-wp-logo{color:var(--u1);}

.hero-art-wp .hero-chips li:nth-child(1){top:11%;left:30%;right:auto;}
.hero-art-wp .hero-chips li:nth-child(2){top:35.5%;left:auto;right:-6%;}
.hero-art-wp .hero-chips li:nth-child(3){top:56%;left:22%;right:auto;}
.hero-art-wp .hero-chips li:nth-child(4){top:80%;left:5%;right:auto;}

.hero-art-mail .hero-chips li:nth-child(1){top:11%;left:auto;right:9%;}
.hero-art-mail .hero-chips li:nth-child(2){top:35.5%;left:auto;right:-9%;}
.hero-art-mail .hero-chips li:nth-child(3){top:56%;left:-7%;right:auto;}
.hero-art-mail .hero-chips li:nth-child(4){top:80%;left:22%;right:auto;}

.hero-art-vps .hero-chips li:nth-child(1){top:11%;left:27%;right:auto;}
.hero-art-vps .hero-chips li:nth-child(2){top:35.5%;left:auto;right:8%;}
.hero-art-vps .hero-chips li:nth-child(3){top:56%;left:14%;right:auto;}
.hero-art-vps .hero-chips li:nth-child(4){top:80%;left:auto;right:-2%;}

/* On the control panel drawing they sit on the corners of the window. */
.hero-art-hosting .hero-chips li:nth-child(1){top:10%;left:-3%;}
.hero-art-hosting .hero-chips li:nth-child(2){top:59%;left:-10%;right:auto;}
.hero-art-hosting .hero-chips li:nth-child(3){top:auto;bottom:10%;left:auto;right:-5%;}

/* Up to 1280px the page has no margin beside the drawing, so it moves in
   a little to keep the labels on its right edge inside the page. */
@media (min-width:961px) and (max-width:1280px){
  .hero-art{margin-right:22px;}
}
@media (max-width:600px){
  .hero-chips li{padding:6px 10px;gap:6px;font-size:11.5px;}
  .hero-chips li i{font-size:11px;}
  .hero-chips li:nth-child(2){right:-4%;}
  .hero-chips li:nth-child(3){left:-3%;}
  .hero-chips li:nth-child(4){right:5%;}
}
/* A visitor whose device is set to reduce motion sees all of this still,
   unless HERO_MOTION_ALWAYS in config.php is true, which adds
   .hero-art-motion to the box. */
@media (prefers-reduced-motion:reduce){
  .hero-art-colour:not(.hero-art-motion) .hero-chips li,
  .hero-art.hero-art-colour:not(.hero-art-motion)::after,
  .hero-art.hero-art-colour:not(.hero-art-motion) .rk-led,
  .hero-art.hero-art-colour:not(.hero-art-motion) .dm-led,
  .hero-art.hero-art-colour:not(.hero-art-motion) .ss-led,
  .hero-art.hero-art-colour:not(.hero-art-motion) .ml-led,
  .hero-art.hero-art-colour:not(.hero-art-motion) .wp-led{animation:none;}
}

/* "Most popular" under the featured plan's name in the table header.
   Positioned, so it does not widen its column. */
table.compare thead th.col-featured{position:relative;padding-bottom:36px;}
table.compare thead th .col-badge{
  position:absolute;left:50%;bottom:11px;transform:translateX(-50%);
  padding:3px 8px;white-space:nowrap;
  background:var(--gold-grad);color:var(--on-gold);border-radius:2px;
  font-size:9px;font-weight:700;letter-spacing:1.2px;line-height:1.4;
}


/* ===============================================================
   Tones
   Six accent colours, set in :root as --c-blue and so on. Anything
   that reads --tone picks up the colour of the nearest ancestor
   that sets it: feature icons, section marks, the accent word in a
   feature heading and the drawn panels.

   Cards and trust strip items take the colours in order, so a list
   in config.php needs nothing extra. A tone-* class on a card or a
   section sets one outright.
   =============================================================== */
.feature:nth-child(6n+1),.strip li:nth-child(6n+1),.steps li:nth-child(6n+1){--tone:var(--c-blue);}
.feature:nth-child(6n+2),.strip li:nth-child(6n+2),.steps li:nth-child(6n+2){--tone:var(--c-green);}
.feature:nth-child(6n+3),.strip li:nth-child(6n+3),.steps li:nth-child(6n+3){--tone:var(--c-amber);}
.feature:nth-child(6n+4),.strip li:nth-child(6n+4),.steps li:nth-child(6n+4){--tone:var(--c-red);}
.feature:nth-child(6n+5),.strip li:nth-child(6n+5),.steps li:nth-child(6n+5){--tone:var(--c-purple);}
.feature:nth-child(6n+6),.strip li:nth-child(6n+6),.steps li:nth-child(6n+6){--tone:var(--c-teal);}

.tone-blue,.feature.tone-blue{--tone:var(--c-blue);}
.tone-green,.feature.tone-green{--tone:var(--c-green);}
.tone-amber,.feature.tone-amber{--tone:var(--c-amber);}
.tone-red,.feature.tone-red{--tone:var(--c-red);}
.tone-purple,.feature.tone-purple{--tone:var(--c-purple);}
.tone-teal,.feature.tone-teal{--tone:var(--c-teal);}


/* ===============================================================
   Currency
   The page is written in Ringgit. money() in config.php gives each
   price a data-usd attribute holding the dollar text, and main.js
   swaps it in when the visitor chooses USD.

   For someone who chose dollars on an earlier visit, head.php sets
   data-currency before the first paint and the rule below holds
   the prices back for the moment it takes main.js to swap them, so
   Ringgit never flashes first. If the script does not arrive, they
   reappear in Ringgit after a second and a half.
   =============================================================== */
:root[data-currency="usd"]:not(.currency-ready) [data-usd]{animation:currency-hold 1.5s steps(1,end) both;}
@keyframes currency-hold{from{visibility:hidden;}to{visibility:visible;}}

/* The switch, built to match the theme switch in the header */
.currency-switch{
  display:inline-flex;align-items:center;gap:2px;flex-shrink:0;
  height:38px;padding:3px;
  border:1px solid var(--line-2);border-radius:var(--radius);
}
.currency-switch button{
  height:30px;padding:0 10px;
  background:transparent;border:0;border-radius:2px;cursor:pointer;
  font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;
  color:var(--muted);white-space:nowrap;
  transition:color .15s ease,background-color .15s ease;
}
.currency-switch button span{opacity:.6;margin-right:2px;}
.currency-switch button:hover{color:var(--text);}
.currency-switch button[aria-pressed="true"]{background:var(--gold-soft);color:var(--gold);}
.currency-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
@media (prefers-reduced-motion:reduce){
  .currency-switch button{transition:none;}
}

/* The copy beside a price list, for when the top bar is out of view */
.currency-inline{display:flex;width:fit-content;margin:-22px auto 30px;}


/* ===============================================================
   Home page: product cards
   =============================================================== */
/* 250px puts four cards on a row at full width, so eight make two even
   rows, and three on a row on a laptop. */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.product{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--elev);
  transition:border-color .15s ease,transform .15s ease;
}
.product:hover{border-color:var(--line-2);transform:translateY(-2px);}
.product-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;}
.product-top .feature-icon{margin-bottom:0;}
.product-from{
  margin:0;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.2px;color:var(--muted);text-align:right;
}
.product-from strong{
  font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.5px;
  color:var(--text);margin:0 2px 0 4px;
}
.product h3{font-size:21px;font-weight:700;letter-spacing:-.2px;margin-bottom:8px;}
.product > p{font-size:calc(14px * var(--text-scale));color:var(--muted);line-height:1.62;margin:0 0 18px;}
.product .btn{text-align:center;margin-top:auto;}

/* A short list with green ticks */
.ticks{list-style:none;margin:0 0 26px;padding:0;}
.ticks li{
  position:relative;padding:5px 0 5px 24px;
  font-size:calc(14px * var(--text-scale));color:var(--text-2);
}
.ticks li::before{
  content:"";position:absolute;left:4px;top:10px;width:5px;height:10px;
  border-right:1.75px solid var(--c-green);border-bottom:1.75px solid var(--c-green);
  transform:rotate(45deg);
}


/* ===============================================================
   Feature sections (home page)
   .split puts the copy on the left and a drawn panel on the right;
   .split.flip swaps them. Everything coloured reads --tone, set by
   the tone-* class on the section. Markup: index.php.
   =============================================================== */
.split{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:72px;align-items:center;
}
.split.flip{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);}
.split.flip .split-copy{order:2;}

.split-copy h2{
  font-size:42px;font-weight:800;line-height:1.12;letter-spacing:-.7px;
  margin-bottom:18px;max-width:560px;
}
.split-copy h2 .accent{color:var(--tone,var(--gold));}
.split-copy .lead{
  font-size:calc(17px * var(--text-scale));line-height:1.6;color:var(--muted);
  max-width:540px;margin:0 0 30px;
}

.split-list{list-style:none;margin:0;padding:0;display:grid;gap:20px;max-width:540px;}
.split-list li{display:flex;align-items:flex-start;gap:16px;}
.split-list .ico,.path .ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;margin-top:2px;
  border:1px solid var(--line-2);border-radius:var(--radius);
  color:var(--tone,var(--gold));font-size:14px;
}
.split-list h4,.path h4{font-size:calc(15.5px * var(--text-scale));font-weight:700;margin-bottom:3px;}
.split-list p,.path p{font-size:calc(14px * var(--text-scale));color:var(--muted);line-height:1.55;margin:0;}
.split-note{font-size:calc(13px * var(--text-scale));color:var(--dim);margin:26px 0 0;max-width:540px;}
.split-cta{margin:30px 0 0;}

/* ---- The drawn side ---- */
.split-art{position:relative;}
/* A soft bloom of the section's colour behind the panel */
.split-art::before{
  content:"";position:absolute;inset:-12% -10%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tone,var(--gold)) 13%,transparent),transparent);
}
.panel{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 40px -22px var(--shadow),var(--elev);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
.panel-dots{display:inline-flex;gap:6px;}
.panel-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2);}
.panel-title{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--muted);
}
.chip{
  display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.3px;white-space:nowrap;
  color:var(--tone,var(--gold));
  background:var(--gold-soft);
  background:color-mix(in srgb,var(--tone,var(--gold)) 14%,transparent);
}
.panel-cells{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);}
.panel-cells div{padding:22px 16px;text-align:center;}
.panel-cells div + div{border-left:1px solid var(--line);}
.panel-cells strong{
  display:block;font-family:var(--mono);font-size:24px;font-weight:600;
  letter-spacing:-.5px;color:var(--text);line-height:1.2;
}
.panel-cells div > span,.stats li > span{
  display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);
}
.panel-foot{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 20px;border-top:1px solid var(--line);background:var(--tint);
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--text-2);
}
.panel-foot i{color:var(--tone,var(--gold));font-size:12px;}
.panel-foot .sep{color:var(--dim);font-weight:500;}
.panel-foot-ok{color:var(--tone,var(--gold));}

/* Speed: the stack as rack units, like the mark */
.stack-rows{list-style:none;margin:0;padding:16px;display:grid;gap:10px;}
.stack-rows li{
  display:flex;align-items:center;gap:13px;padding:13px 16px;
  border:1px solid var(--line);border-radius:7px;background:var(--tint);
}
.stack-rows strong{font-family:var(--display);font-size:15px;font-weight:600;color:var(--text);}
.stack-rows .tag{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);
}
.led{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--tone,var(--gold));opacity:.45;}
.led-live{opacity:1;background:var(--c-green);animation:rk-pulse 2.4s ease-in-out infinite alternate;}

/* Pricing: three years at the same price */
.bill-rows{list-style:none;margin:0;padding:22px 20px;display:grid;gap:16px;}
.bill-rows li{display:flex;align-items:center;gap:14px;}
.bill-label{
  flex:0 0 52px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);
}
.bill-bar{
  flex:1;height:26px;border-radius:5px;
  background:var(--gold-soft);
  background:linear-gradient(90deg,color-mix(in srgb,var(--tone,var(--gold)) 55%,transparent),color-mix(in srgb,var(--tone,var(--gold)) 22%,transparent));
}
.bill-rows strong{
  flex:0 0 auto;min-width:58px;text-align:right;
  font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text);
}

/* Protection: one square per day of backups kept */
.days{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;padding:22px 20px;}
.days i{
  aspect-ratio:1;border-radius:4px;
  background:var(--gold-soft);
  background:color-mix(in srgb,var(--tone,var(--gold)) 20%,transparent);
}
.days i:nth-child(3n){background:color-mix(in srgb,var(--tone,var(--gold)) 32%,transparent);}
.days i.today{background:var(--tone,var(--gold));animation:rk-pulse 2.4s ease-in-out infinite alternate;}

/* Moving in: numbered steps down a line */
.path{list-style:none;margin:0;padding:0 0 0 34px;display:grid;gap:14px;position:relative;counter-reset:path;}
.path::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:1px;background:var(--line-2);}
.path li{
  position:relative;counter-increment:path;display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--elev);
}
.path li::before{
  content:counter(path);position:absolute;left:-34px;top:22px;
  display:flex;align-items:center;justify-content:center;width:23px;height:23px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius);
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--tone,var(--gold));
}
.section-alt .path li::before{background:var(--band);}


/* ===============================================================
   Home page: figures band and FAQ
   =============================================================== */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0 auto;padding-top:0;padding-bottom:0;}
.stats li{padding:52px 16px;text-align:center;border-right:1px solid var(--line);}
.stats li:last-child{border-right:0;}
.stats strong{
  display:block;font-family:var(--mono);font-size:42px;font-weight:600;
  letter-spacing:-1.5px;line-height:1.1;color:var(--text);
}
.stats li > span{margin-top:10px;}

.faq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start;}
/* Beside the questions rather than above them, so it stays left-aligned */
.faq-split .section-head{margin:0;text-align:left;}
.faq-split .section-head .mark{margin-left:0;}
.faq-split .faq-list{border-top:1px solid var(--line);}
.faq-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px !important;}
.faq-links a{font-family:var(--display);font-size:15px;font-weight:600;}
.faq-links a::after{content:"\2192";margin-left:6px;}

@media (max-width:960px){
  .split,.split.flip{grid-template-columns:minmax(0,1fr);gap:44px;}
  .split.flip .split-copy{order:0;}
  .split-copy h2{font-size:34px;letter-spacing:-.5px;}
  .split-art{max-width:520px;}
  .stats ul{grid-template-columns:1fr 1fr;}
  .stats li{padding:36px 16px;border-bottom:1px solid var(--line);}
  .stats li:nth-child(2n){border-right:0;}
  .stats li:nth-last-child(-n+2){border-bottom:0;}
  .faq-split{grid-template-columns:minmax(0,1fr);gap:32px;}
}
@media (max-width:600px){
  .split-copy h2{font-size:28px;letter-spacing:-.3px;}
  .stats strong{font-size:32px;letter-spacing:-1px;}
  .panel-cells strong{font-size:20px;}
  .stack-rows .tag{display:none;}
  .days{gap:5px;}
}
@media (prefers-reduced-motion:reduce){
  .led-live,.days i.today{animation:none;}
  .product{transition:none;}
}

/* ===============================================================
   Phones and tablets (up to 960px)
   The page is one column here. Every opening block is centred: the
   three-bar mark, the heading, the paragraph under it and the
   buttons, in the hero and in each section. What follows a heading
   (lists with icons, numbered steps, questions, cards) keeps its
   text on the left, inside a block that sits in the middle.
   =============================================================== */
@media (max-width:960px){
  /* Hero: the copy, the buttons and the drawing are centred */
  .hero-copy,.hero > .wrap:not(.hero-grid){text-align:center;}
  .hero p.lead{margin-left:auto;margin-right:auto;}
  .hero .cta-row{justify-content:center;}
  .domain-search{margin-left:auto;margin-right:auto;}
  .tld-chips{justify-content:center;}

  /* Feature sections: the text and its panel share one centred column */
  .split-copy,.split-art{width:100%;max-width:600px;margin-left:auto;margin-right:auto;}
  .path{max-width:600px;margin-left:auto;margin-right:auto;}
  .split-copy{text-align:center;}
  .split-copy .mark{margin-left:auto;margin-right:auto;}
  /* The heading and the paragraph each have their own maximum width, so
     both need the same centring or one sits to the left of the other. */
  .split-copy h2,.split-copy .lead,.split-note{margin-left:auto;margin-right:auto;}
  .split-list{margin-left:auto;margin-right:auto;text-align:left;}
  .split-cta{text-align:center;}

  /* Home page questions: the heading above the list is centred */
  .faq-split .section-head{text-align:center;}
  .faq-split .section-head .mark{margin-left:auto;}
  .faq-split .faq-links{justify-content:center;}

  /* About page: the logo and its text are centred */
  .about-split{text-align:center;}
  .about-split .mark{margin-left:auto;margin-right:auto;}
  .about-split p{margin-left:auto;margin-right:auto;}
  .about-mark{justify-self:center;}
}

/* From 700px a tablet is wide enough for the three plan cards side by
   side, as on a desktop, with a little less padding inside each. */
@media (min-width:700px) and (max-width:960px){
  .plans{grid-template-columns:repeat(3,1fr);gap:14px;}
  .plan{padding:26px 18px;}
  .plan .tag{left:18px;}
  .plan .price{font-size:44px;}
}