/* ==========================================================================
   Techpullers Managed cPanel Hosting — landing page
   Hand-written CSS. No frameworks. Mobile-first.
   Breakpoints: 514px / 752px / 1012px / 1232px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --font: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Brand palette taken from the Techpullers logo (orange #F6770D +
     charcoal #2E2B2C) and the live techpullers.com design tokens
     (--color-brand:#C2410C, --color-dark:#1D1D1D, --color-brand-light-bg:#F9F5ED).
     Orange and warm neutrals only — no blue. */
  --c-primary:#C2410C;      /* buttons, links — 5.2:1 on white */
  --c-primary-dk:#1D1D1D;   /* hover: orange flips to dark, as on techpullers.com */
  --c-heading:#1D1D1D;      /* headings */
  --c-body:#525252;         /* body text */
  --c-muted:#D4CFC7;        /* dividers, faint rules */
  --c-accent:#EA580C;       /* badges, icon fills, accent borders */
  --c-accent-lt:#FB923C;
  --c-bg:#FFFFFF;
  --c-bg-alt:#F9F5ED;       /* brand warm cream alternate section */
  --c-border:#E7E0D5;

  /* One accent family — four hues diluted the brand. Green stays semantic
     only (table ticks, uptime chart). */
  --c-icon-1:#EA580C; --c-icon-2:#EA580C; --c-icon-3:#EA580C; --c-icon-4:#EA580C;

  --grad-dark: linear-gradient(90deg,#2E2B2C 0%,#141313 100%);
  --grad-hero-glow: radial-gradient(1200px 520px at 16% -12%, rgba(234,88,12,.26) 0%, rgba(234,88,12,0) 62%);

  --shadow-card: 0 8px 32px rgba(0,0,0,.08);
  --shadow-card-hover: 0 16px 48px rgba(0,0,0,.14);
  --shadow-cta: 0 10px 26px rgba(234,88,12,.3);

  --radius-card: 6px; --radius-btn: 4px; --radius-cta: 8px;
  --container: 1248px; --gutter: 24px;

  /* Spacing scale — every margin/padding in the sheet snaps to one of these. */
  --space-2xs:4px; --space-xs:8px;  --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-4xl:96px;
  --section-pad: var(--space-3xl);
  --transition: .3s ease;

  /* Derived tokens — accessible variants. --c-muted and --c-accent fail WCAG AA
     as text colours, so they stay on dividers, icons and fills only. */
  --c-meta:#6B6560;         /* 14px meta text on white (5.8:1) and on cream (5.3:1) */
  --c-cta-bg:#C2410C;       /* orange CTA background, white text (5.2:1) */
  --c-cta-bg-hover:#1D1D1D;
  --c-eyebrow-dark:#FB923C; /* eyebrow on the dark gradient */
  --c-on-dark:rgba(255,255,255,.82);
  --c-on-dark-soft:rgba(255,255,255,.72);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:26px;
  font-weight:400;
  color:var(--c-body);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul{padding:0;list-style:none}
a{color:var(--c-primary);text-decoration:none}
button{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:target{scroll-margin-top:96px}

h1,h2,h3,h4{color:var(--c-heading);letter-spacing:-.2px}
h1{font-size:32px;line-height:38px;font-weight:800;letter-spacing:-1px}
h2{font-size:32px;line-height:40px;font-weight:800}
h3{font-size:22px;line-height:28px;font-weight:700}   /* 24/32 from 1012px */
h4{font-size:20px;line-height:28px;font-weight:700}

.lead{font-size:18px;line-height:30px}
.big{font-size:18px;line-height:30px}
.meta{font-size:14px;line-height:22px;font-weight:400;color:var(--c-meta)}
.eyebrow{
  display:block;font-size:13px;line-height:18px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--c-primary);
  margin-bottom:14px;
}
.tlink{font-size:18px;font-weight:700;color:var(--c-primary)}
.tlink:hover,.tlink:focus-visible{text-decoration:underline}
/* Links inside running copy must not rely on colour alone. Buttons, nav,
   footer and .tlink keep their own treatment. */
main p a:not(.btn):not(.tlink),
main li a:not(.btn):not(.tlink){text-decoration:underline;text-underline-offset:3px}
.tlink svg{width:16px;height:16px;display:inline-block;vertical-align:-2px;margin-left:6px}

/* Focus */
:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px;border-radius:2px}
/* The hero and footer are dark but not .on-dark, so they need the light ring
   too — #C2410C on near-black is 2.4:1 and fails the 3:1 focus requirement. */
.on-dark :focus-visible,.site-header :focus-visible,
.hero :focus-visible,.footer :focus-visible{outline-color:#FB923C}

.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-link{
  position:absolute;left:24px;top:-100px;z-index:200;
  background:var(--c-bg);color:var(--c-primary);font-weight:700;
  padding:12px 20px;border-radius:var(--radius-btn);box-shadow:var(--shadow-card);
  transition:top .2s ease;
}
.skip-link:focus{top:16px}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;gap:var(--gutter)}
.section{padding:var(--section-pad) 0}
.section--alt{background:var(--c-bg-alt)}
.section__head{max-width:720px;margin:0 auto var(--space-2xl);text-align:center}
.section__head p{margin-top:var(--space-md)}
.section__head h2::after{
  content:"";display:block;width:48px;height:3px;border-radius:2px;
  background:var(--c-accent);margin:var(--space-md) auto 0;
}
.stack>*+*{margin-top:16px}

.on-dark{background:var(--grad-dark);color:var(--c-on-dark)}
.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .eyebrow{color:var(--c-eyebrow-dark)}
.on-dark p{color:var(--c-on-dark)}
.on-dark .tlink{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:700;text-align:center;cursor:pointer;
  border:0;transition:background var(--transition),transform var(--transition),box-shadow var(--transition),color var(--transition);
}
.btn-primary{
  background:var(--c-primary);color:#fff;font-size:16px;line-height:1;
  border-radius:var(--radius-btn);padding:0 24px;height:48px;
}
.btn-primary:hover{background:var(--c-primary-dk)}
.btn-cta{
  background:var(--c-cta-bg);color:#fff;font-size:16px;line-height:1.2;
  border-radius:var(--radius-cta);padding:13px 24px;box-shadow:var(--shadow-cta);
}
.btn-cta:hover{background:var(--c-cta-bg-hover);transform:translateY(-2px);box-shadow:0 14px 30px rgba(234,88,12,.38)}
.btn-ghost{
  background:transparent;color:#fff;font-size:16px;line-height:1;
  border:1.5px solid rgba(255,255,255,.85);border-radius:var(--radius-btn);
  padding:0 24px;height:48px;
}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-block{display:flex;width:100%}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:100;
  transition:background var(--transition),box-shadow var(--transition);
}
.site-header.is-scrolled{
  position:fixed;background:var(--c-heading);box-shadow:0 2px 18px rgba(29,29,29,.28);
}
.utility{border-bottom:1px solid rgba(255,255,255,.14);font-size:14px;line-height:20px}
.utility__inner{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;padding-top:9px;padding-bottom:9px}
.utility a{color:rgba(255,255,255,.8);font-weight:400;display:inline-flex;align-items:center;gap:7px}
.utility a:hover{color:#fff}
.utility svg{width:15px;height:15px;flex:none;opacity:.85}
.site-header.is-scrolled .utility{display:none}

.navbar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.site-header.is-scrolled .navbar__inner{height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;flex:none}
.brand__mark{width:34px;height:34px;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__text b{font-size:18px;font-weight:800;letter-spacing:-.3px}
.brand__text span{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--c-eyebrow-dark);margin-top:3px}

.nav__list{display:flex;align-items:center;gap:26px}
.nav__link,.nav__btn{
  font-size:18px;line-height:32px;font-weight:700;color:#fff;
  padding:4px 0;position:relative;display:inline-flex;align-items:center;gap:6px;
}
.nav__link::after,.nav__btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--c-accent);transform:scaleX(0);transition:transform var(--transition);
}
.nav__link:hover::after,.nav__link:focus-visible::after,
.nav__btn:hover::after,.nav__drop[open]>.nav__btn::after{transform:scaleX(1)}
.nav-cta{flex:none}

/* Dropdowns are <details>/<summary>, so they work with the keyboard and
   without JavaScript; the script only closes siblings and outside clicks. */
.nav__drop{position:relative}
.nav__btn{cursor:pointer;list-style:none}
.nav__btn::-webkit-details-marker{display:none}
.nav__caret{width:15px;height:15px;flex:none;transition:transform var(--transition)}
.nav__drop[open]>.nav__btn .nav__caret{transform:rotate(180deg)}
.nav__panel ul{display:grid}
.nav__panel a{display:block;border-radius:var(--radius-btn)}
.nav__panel b{display:block;font-size:16px;line-height:24px;font-weight:700}
.nav__panel span{display:block;font-size:13px;line-height:20px;font-weight:400}

.nav-toggle{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;padding:0 11px;background:transparent;border:0;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform var(--transition),opacity var(--transition)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile slide-in menu */
@media (max-width:1011px){
  .nav{
    position:fixed;inset:0;background:var(--c-heading);
    /* clears the utility strip + nav row so the first item never sits
       under the close button */
    padding:124px 24px 48px;transform:translateX(100%);
    transition:transform var(--transition);overflow-y:auto;
    visibility:hidden;
  }
  .nav.is-open{transform:translateX(0);visibility:visible}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__item{border-bottom:1px solid rgba(255,255,255,.14)}
  .nav__link,.nav__btn{display:flex;font-size:20px;line-height:1.4;padding:16px 0;justify-content:space-between;width:100%}
  .nav__link::after,.nav__btn::after{display:none}
  .nav__panel{padding:0 0 12px 2px}
  .nav__panel li+li{margin-top:2px}
  .nav__panel a{padding:9px 0}
  .nav__panel b{font-size:16px;color:rgba(255,255,255,.92);font-weight:700}
  .nav__panel span{color:rgba(255,255,255,.6)}
  .nav__panel a:hover b,.nav__panel a:focus-visible b{color:#fff;text-decoration:underline}
  .nav__cta-mobile{margin-top:28px}
  .nav__cta-mobile .btn{width:100%}
  body.nav-open{overflow:hidden}
}
@media (min-width:1012px){
  .nav-toggle,.nav__cta-mobile{display:none}
  .nav{display:block !important}
  .nav__panel{
    position:absolute;top:calc(100% + 16px);left:-14px;min-width:312px;z-index:60;
    background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-card);
    box-shadow:var(--shadow-card-hover);padding:10px;
  }
  /* keeps the pointer from falling through the gap under the trigger */
  .nav__panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
  .nav__panel a{padding:9px 12px}
  .nav__panel b{color:var(--c-heading)}
  .nav__panel span{color:var(--c-meta)}
  .nav__panel a:hover,.nav__panel a:focus-visible{background:var(--c-bg-alt)}
  .nav__panel a:hover b{color:var(--c-primary)}
  .nav__panel a[aria-current="page"]{background:rgba(234,88,12,.08)}
  .nav__panel a[aria-current="page"] b{color:var(--c-primary)}
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{
  /* --grad-dark stays as the base so the copy is never on bare white while the
     banner loads; the scrim over the photo keeps every text run at AA.
     148px clears the utility strip + nav row at every width; the spec's
     120px assumed a single-row header. Desktop keeps the specified 150px. */
  background:var(--grad-dark);
  padding:148px 0 64px;color:var(--c-on-dark);position:relative;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;display:block}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 48%}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,19,19,.92) 0%,rgba(20,19,19,.80) 42%,rgba(20,19,19,.72) 100%),
    var(--grad-hero-glow);
}
.hero__inner{position:relative;z-index:2}
.hero__inner{max-width:760px}
.hero .eyebrow{color:var(--c-eyebrow-dark)}
.hero h1{color:#fff;margin-bottom:20px}
.hero__lead{font-size:18px;line-height:30px;max-width:560px;color:rgba(255,255,255,.9)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__actions .btn-cta{font-size:16px;padding:16px 26px}
.hero__trust{
  display:grid;gap:var(--space-sm) var(--space-lg);margin-top:var(--space-2xl);padding-top:var(--space-lg);
  border-top:1px solid rgba(255,255,255,.18);
}
.hero__trust li{display:flex;align-items:center;gap:9px;font-size:16px;line-height:22px;color:rgba(255,255,255,.86)}
.hero__trust svg{width:19px;height:19px;flex:none;color:var(--c-eyebrow-dark)}

/* --------------------------------------------------------------------------
   7. Pricing
   -------------------------------------------------------------------------- */
.pricing{position:relative;z-index:2;padding-top:var(--space-2xl);padding-bottom:var(--section-pad)}
.billing{border:0;padding:0;margin:0 0 var(--space-xl);display:flex;justify-content:center}
.billing__pill{
  position:relative;display:inline-flex;background:#fff;border:1px solid var(--c-border);
  border-radius:999px;padding:5px;box-shadow:var(--shadow-card);
}
.billing__pill input{position:absolute;opacity:0;width:1px;height:1px}
.billing__pill label{
  position:relative;z-index:1;cursor:pointer;border-radius:999px;
  padding:11px 20px;font-size:16px;font-weight:700;color:var(--c-heading);
  line-height:1.2;transition:color var(--transition);white-space:nowrap;
}
.billing__pill label small{display:block;font-size:13px;font-weight:700;color:var(--c-meta);margin-top:2px}
.billing__pill input:checked+label{color:#fff;background:var(--c-primary)}
.billing__pill input:checked+label small{color:#fff}
.billing__pill input:focus-visible+label{outline:3px solid var(--c-primary);outline-offset:3px}

.pricing__grid{display:grid;gap:var(--space-xl) var(--space-lg)}
.plan{
  position:relative;background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius-card);padding:40px 24px 24px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;
  transition:box-shadow var(--transition),transform var(--transition);
}
.plan:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}
.plan--featured{border-top:2px solid var(--c-accent);background:#FFFAF6}
.plan__badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--c-cta-bg);color:#fff;font-size:14px;font-weight:700;line-height:1.4;
  border-radius:var(--radius-btn);padding:4px 12px;white-space:nowrap;
}
.plan__tagline{font-size:16px;line-height:24px;margin-top:8px;min-height:48px}
.plan__price{display:flex;align-items:flex-start;gap:2px;margin-top:var(--space-lg);color:var(--c-heading)}
.plan__cur{font-size:24px;font-weight:800;line-height:44px}
.plan__amt{font-size:40px;font-weight:800;line-height:44px;letter-spacing:-1px}
.plan__per{font-size:16px;font-weight:400;color:var(--c-meta);align-self:flex-end;margin-bottom:8px;margin-left:3px}
.plan__billed{font-size:14px;line-height:22px;color:var(--c-meta);margin-top:4px;min-height:22px}
.plan__gst{font-size:13px;line-height:20px;color:var(--c-meta);margin-top:2px}
.plan .btn{margin-top:var(--space-lg)}
.plan__features{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--c-border);display:grid;gap:var(--space-sm)}
.plan__features li{position:relative;padding-left:26px;font-size:16px;line-height:24px}
.plan__features svg{position:absolute;left:0;top:3px;width:17px;height:17px;color:var(--c-primary)}
.plan__features b{font-weight:700;color:var(--c-heading)}

/* --------------------------------------------------------------------------
   8. Included chips
   -------------------------------------------------------------------------- */
.chips{display:grid;gap:16px}
.chip{
  display:flex;align-items:center;gap:var(--space-sm);background:#fff;
  border:1px solid var(--c-border);border-radius:var(--radius-card);
  padding:var(--space-md);transition:box-shadow var(--transition),border-color var(--transition);
}
.chip:hover{box-shadow:var(--shadow-card);border-color:var(--c-muted)}
.chip__ico{
  width:40px;height:40px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:rgba(234,88,12,.13);color:var(--c-primary);
}
.chip__ico svg{width:20px;height:20px}
.chip b{display:block;font-size:16px;font-weight:700;line-height:22px;color:var(--c-heading)}
.chip span{display:block;font-size:14px;line-height:20px;color:var(--c-meta)}

/* --------------------------------------------------------------------------
   9. Feature blocks
   -------------------------------------------------------------------------- */
.features{display:grid;gap:var(--space-xl) var(--space-lg);text-align:left}
.feature__ico{
  width:56px;height:56px;border-radius:50%;margin:0 0 20px;
  display:grid;place-items:center;
}
.feature__ico svg{width:26px;height:26px}
.feature h3{margin-bottom:10px}
.feature__ico{background:rgba(234,88,12,.13);color:var(--c-primary)}

/* --------------------------------------------------------------------------
   10. Dark bands
   -------------------------------------------------------------------------- */
.band{padding:var(--section-pad) 0}
.band__grid{display:grid;gap:var(--space-xl);align-items:center}
.band__list{display:grid;gap:12px;margin-top:24px}
.band__list li{position:relative;padding-left:28px;font-size:16px;line-height:26px;color:var(--c-on-dark)}
.band__list svg{position:absolute;left:0;top:4px;width:18px;height:18px;color:var(--c-eyebrow-dark)}
.band__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.band figure{margin:0}

.stat-row{display:grid;gap:20px;margin-top:34px}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-card);padding:var(--space-lg)}
.stat b{display:block;font-size:32px;line-height:40px;font-weight:800;color:#fff}
.stat span{display:block;font-size:16px;line-height:23px;color:var(--c-on-dark-soft);margin-top:6px}

/* --------------------------------------------------------------------------
   11. Alternating (split) sections
   -------------------------------------------------------------------------- */
.split{display:grid;gap:var(--space-xl);align-items:center}
.split figure{margin:0}
.split__list{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}
.split__list li{position:relative;padding-left:32px}
.split__list svg{position:absolute;left:0;top:4px;width:20px;height:20px;color:var(--c-primary)}
.split__list b{display:block;font-size:16px;font-weight:700;color:var(--c-heading);line-height:26px}
.split__list span{display:block;font-size:16px;line-height:26px}

/* Renewal comparison card */
.renewal{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden}
.renewal__row{display:grid;grid-template-columns:1fr auto auto;gap:8px 14px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--c-border)}
.renewal__row:last-child{border-bottom:0}
.renewal__row--head{background:var(--c-heading);color:#fff;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.renewal__row--head span{color:#fff}
.renewal__row--ours{background:rgba(21,128,61,.07)}
.renewal__label{font-size:16px;line-height:22px;font-weight:700;color:var(--c-heading)}
.renewal__label small{display:block;font-weight:400;font-size:13px;line-height:19px;color:var(--c-meta)}
.renewal__val{font-size:16px;font-weight:700;color:var(--c-heading);text-align:right;min-width:78px}
.renewal__delta{font-size:13px;font-weight:700;text-align:right;min-width:64px;color:#B91C1C}
.renewal__row--ours .renewal__delta{color:#14612F}
.renewal__foot{padding:14px 20px;background:var(--c-bg-alt);font-size:13px;line-height:20px;color:var(--c-meta)}

/* --------------------------------------------------------------------------
   12. Comparison table
   -------------------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--c-border);border-radius:var(--radius-card);background:#fff;
}
.cmp{min-width:720px;font-size:16px}
.cmp caption{caption-side:top;text-align:left;padding:16px 20px;font-size:14px;color:var(--c-meta)}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--c-border)}
.cmp thead th{background:var(--c-heading);color:#fff;font-size:16px;font-weight:700;line-height:22px;white-space:nowrap}
.cmp thead th span{display:block;font-size:13px;font-weight:400;color:rgba(255,255,255,.78)}
.cmp tbody th{font-weight:700;color:var(--c-heading);font-size:16px;line-height:22px}
.cmp tbody tr:nth-child(even){background:var(--c-bg-alt)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td{color:var(--c-body);font-weight:400}
.cmp .is-featured{background:rgba(234,88,12,.06)}
/* accent rule instead of pure #000 next to #1D1D1D, which read as a glitch */
.cmp thead .is-featured{background:var(--c-heading);box-shadow:inset 0 3px 0 var(--c-accent)}
.cmp svg{width:18px;height:18px;vertical-align:-3px}
.cmp .yes{color:#15803D}
.cmp .no{color:var(--c-meta)}   /* --c-muted is 1.5:1 on the cream rows */
/* sticky first column while scrolling horizontally */
.cmp th:first-child{position:sticky;left:0;z-index:1;background:#fff}
.cmp thead th:first-child{background:var(--c-heading);z-index:2}
.cmp tbody tr:nth-child(even) th:first-child{background:var(--c-bg-alt)}
.cmp th:first-child::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--c-border);
}
.cmp tbody th{position:relative}

/* --------------------------------------------------------------------------
   13. Add-ons
   -------------------------------------------------------------------------- */
.addons{display:grid;gap:24px}
.addon{
  background:#fff;border:1px solid var(--c-border);border-left:3px solid var(--c-accent);
  border-radius:var(--radius-card);padding:var(--space-xl) var(--space-lg);box-shadow:var(--shadow-card);
}
.addon__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.addon__price{font-size:24px;font-weight:800;color:var(--c-heading);white-space:nowrap}
.addon__price small{font-size:14px;font-weight:400;color:var(--c-meta)}
.addon p{margin-top:10px}
.addon ul{margin-top:14px;display:grid;gap:9px}
.addon li{position:relative;padding-left:26px;font-size:16px;line-height:23px}
.addon svg{position:absolute;left:0;top:3px;width:17px;height:17px;color:var(--c-primary)}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq{max-width:840px;margin:0 auto;border-top:1px solid var(--c-border)}
.faq details{border-bottom:1px solid var(--c-border)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:var(--space-lg) 0;cursor:pointer;list-style:none;
  font-size:18px;line-height:28px;font-weight:700;color:var(--c-heading);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--c-primary)}
.faq summary svg{width:22px;height:22px;flex:none;margin-top:3px;color:var(--c-primary);transition:transform var(--transition)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq__body{padding:0 0 24px;max-width:72ch}
.faq__body p+p{margin-top:12px}

/* --------------------------------------------------------------------------
   15. Final CTA
   -------------------------------------------------------------------------- */
/* The closing CTA is the one place a full accent field earns its keep.
   White text on --c-primary is 5.2:1; the buttons invert to stay legible. */
.final{text-align:center;background:var(--c-primary);color:#fff}
.final h2{color:#fff}
.final h2::after{background:rgba(255,255,255,.55)}
.final .eyebrow{color:#fff}
.final .lead{color:#fff}
.final .btn-cta{background:#fff;color:var(--c-primary);box-shadow:0 10px 26px rgba(0,0,0,.20)}
.final .btn-cta:hover{background:#fff;color:var(--c-primary-dk);box-shadow:0 14px 30px rgba(0,0,0,.26)}
.final .btn-primary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85)}
.final .btn-primary:hover{background:rgba(255,255,255,.14);border-color:#fff}
.final :focus-visible{outline-color:#fff}
.final .container{max-width:760px}
.final__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.final__actions .btn-cta{font-size:16px;padding:16px 26px}
.final__note{margin-top:var(--space-lg);font-size:14px;line-height:22px;color:#fff}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer{background:var(--grad-dark);color:var(--c-on-dark-soft);padding:var(--space-3xl) 0 var(--space-2xl)}
.footer__grid{display:grid;gap:var(--space-xl)}
.footer h3{font-size:16px;line-height:22px;font-weight:700;color:#fff;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:var(--space-md)}
.footer__links li a{display:block;font-size:16px;line-height:28px;font-weight:400;color:rgba(255,255,255,.72);padding:6px 0}
.footer__links li a:hover,.footer__links li a:focus-visible{color:#fff;text-decoration:underline}
.footer__brand p{font-size:16px;line-height:26px;color:rgba(255,255,255,.72);margin-top:16px;max-width:38ch}
.footer__brand .brand{margin-bottom:4px}
.footer__bottom{
  margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.16);
  display:grid;gap:18px;font-size:14px;line-height:22px;color:rgba(255,255,255,.72);
}
.footer__h2--gap{margin-top:26px}
.footer__legal ul{display:flex;flex-wrap:wrap;gap:2px 24px}
.footer__legal a{display:block;font-size:14px;line-height:22px;font-weight:400;color:rgba(255,255,255,.78);padding:9px 0}
.footer__legal a:hover,.footer__legal a:focus-visible{color:#fff;text-decoration:underline}
.footer__legalese{display:grid;gap:8px}
.footer__bottom p{color:rgba(255,255,255,.72);font-size:14px;line-height:22px}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (min-width:360px){
  .hero__trust{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:514px){
  .chips{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:752px){
  h1{font-size:38px;line-height:44px}
  .footer__grid{grid-template-columns:repeat(3,1fr)}
  .pricing__grid{grid-template-columns:repeat(2,1fr)}
  .addons{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:repeat(2,1fr);gap:48px}
  .band__grid{grid-template-columns:repeat(2,1fr);gap:48px}
  .cmp th,.cmp td{padding:16px 20px}
}
@media (min-width:1012px){
  h1{font-size:44px;line-height:48px}
  h2{font-size:40px;line-height:52px}
  h3{font-size:24px;line-height:32px}
  .hero{padding:150px 0 96px}
  .hero__bg img{object-position:70% 50%}
  .hero__scrim{
    background:
      linear-gradient(90deg,rgba(20,19,19,.95) 0%,rgba(20,19,19,.91) 32%,rgba(20,19,19,.70) 58%,rgba(20,19,19,.44) 100%),
      linear-gradient(180deg,rgba(20,19,19,.35) 0%,rgba(20,19,19,0) 32%,rgba(20,19,19,.42) 100%),
      var(--grad-hero-glow);
  }
  .hero__trust{grid-template-columns:repeat(4,1fr);gap:12px 24px}
  .pricing{margin-top:-80px;padding-top:0}
  .pricing__grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .plan--featured{transform:translateY(-12px)}
  .plan--featured:hover{transform:translateY(-16px)}
  .chips{grid-template-columns:repeat(4,1fr)}
  .features{grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
  /* two-line cap so all four paragraphs start on the same row */
  .feature h3{min-height:64px}
  .footer{padding-top:var(--space-4xl)}
  .footer__grid{grid-template-columns:1.35fr repeat(4,1fr);gap:var(--space-xl)}
  .footer__legalese{grid-template-columns:1fr auto;gap:8px 32px;align-items:center}
  .split--reverse .split__media{order:2}
  .cmp{min-width:0}
  .cmp__hint{display:none}
  .table-wrap{overflow-x:visible}
}
@media (min-width:1232px){
  .split{gap:72px}
  .band__grid{gap:72px}
  .chips{gap:20px}
}

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .plan:hover,.plan--featured,.plan--featured:hover,.btn-cta:hover{transform:none}
}

/* Print */
@media print{
  .site-header,.nav-toggle,.hero__actions,.final__actions{display:none}
  body{color:#000}
}

/* --------------------------------------------------------------------------
   18. Small utilities
   -------------------------------------------------------------------------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.ta-r{text-align:right}
.plan__name{font-size:24px;line-height:32px;font-weight:700;color:var(--c-heading)}
.stat-row--stack{grid-template-columns:1fr}

/* --------------------------------------------------------------------------
   19. Narrow-screen header
   The utility strip must stay on one line, otherwise the nav row is pushed
   down onto the hero eyebrow. Below 514px the phone number and the duplicate
   header CTA are dropped — both are reachable from the slide-in menu.
   -------------------------------------------------------------------------- */
/* The utility strip must never wrap to a second line: a taller header pushes
   the nav row onto the hero, and the slide-in menu under the close button.
   Items drop out progressively; all of them stay in the slide-in menu. */
@media (max-width:751px){
  
}
@media (max-width:599px){
  .utility a.utility__phone{display:none}
}
@media (max-width:513px){
  .nav-cta{display:none}
  .utility__inner{gap:0 20px}
}
@media (max-width:751px){
  .navbar__inner{height:64px;gap:12px}
  .brand__mark{width:30px;height:30px}
  .brand__text b{font-size:16px}
}

/* Below 380px the utility strip can still wrap to two lines; give the hero
   the extra top padding so the eyebrow never sits under the nav row. */
@media (max-width:379px){
  /* Below 380px only the support address fits on one line. Phone and client
     login stay reachable from the slide-in menu. */
  .utility a.utility__login{display:none}
  .utility__inner{gap:2px 16px}
}

/* Contact links inside the slide-in menu — the open menu covers the utility
   strip, so email, phone and client login stay reachable on mobile. */
.nav__contact{display:grid;gap:var(--space-2xs);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.14)}
.nav__contact a{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);font-size:16px;font-weight:400;padding:10px 0}
.nav__contact a:hover,.nav__contact a:focus-visible{color:#fff}
.nav__contact svg{width:18px;height:18px;flex:none;color:var(--c-eyebrow-dark)}
@media (min-width:1012px){ .nav__contact{display:none} }

/* Larger touch targets for the utility strip on touch-sized screens,
   without growing the strip enough to crowd the hero. */
@media (max-width:1011px){
  .utility__inner{padding-top:2px;padding-bottom:2px}
  .utility a{padding:10px 0}
}

/* --------------------------------------------------------------------------
   20. Inner pages
   Gradient hero (no banner photo), breadcrumbs, and the prose column the
   generated product/legal pages render into.
   -------------------------------------------------------------------------- */
.hero--inner{padding-top:124px;padding-bottom:var(--space-2xl)}
.hero--inner .hero__scrim{background:var(--grad-hero-glow)}
.hero--inner h1{font-size:30px;line-height:38px}

.crumbs{margin-bottom:var(--space-md)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);font-size:14px;line-height:22px;list-style:none;padding:0;margin:0}
.crumbs li{color:rgba(255,255,255,.82)}
.crumbs li+li::before{content:"/";margin-right:var(--space-xs);color:rgba(255,255,255,.5)}
.crumbs a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover,.crumbs a:focus-visible{color:#fff}
.crumbs [aria-current="page"]{color:#fff;font-weight:700}

.prose{max-width:860px}
.prose--doc{max-width:760px}
.prose>*+*{margin-top:var(--space-md)}
.prose>h2{margin-top:var(--space-2xl)}
.prose>h3{margin-top:var(--space-xl)}
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}
.prose>.table-wrap,.prose>.split__list,.prose>.tick-list{margin-top:var(--space-lg)}
.prose p{max-width:72ch}
.prose .meta{color:var(--c-meta)}
.prose a{color:var(--c-primary);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose a:hover,.prose a:focus-visible{color:var(--c-primary-dk)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:4px;padding:1px 5px}

.tick-list{display:grid;gap:var(--space-sm)}
.tick-list li{position:relative;padding-left:28px}
.tick-list svg{position:absolute;left:0;top:4px;width:18px;height:18px;color:var(--c-primary)}
.section--alt .prose code{background:#fff}

@media (min-width:1012px){
  .hero--inner{padding-top:170px;padding-bottom:var(--space-3xl)}
  .hero--inner h1{font-size:40px;line-height:48px}
}
.hub__note{display:block;font-size:13px;line-height:20px;font-weight:700;color:var(--c-primary);margin-top:2px}
.chip b a{color:var(--c-heading);text-decoration:none}
.chip b a:hover,.chip b a:focus-visible{color:var(--c-primary);text-decoration:underline}
.ph{color:#9A3412;font-weight:700;white-space:nowrap}
.hero .ph,.on-dark .ph,.final .ph{color:var(--c-eyebrow-dark)}

/* --------------------------------------------------------------------------
   21. Inner-page section layouts
   Long-form pages were rendering as centred headings over a narrow left-aligned
   prose column, which left a dead right margin and no rhythm. Prose sections
   now use an editorial two-column layout; table sections run full width.
   -------------------------------------------------------------------------- */
.section__head--left{max-width:none;margin:0 0 var(--space-lg);text-align:left}
.section__head--left h2::after{margin-left:0;margin-right:0}

.sec-grid{display:grid;gap:var(--space-lg)}
.sec-grid__head h2{font-size:32px;line-height:40px}
.sec-grid__head h2::after{content:"";display:block;width:48px;height:3px;border-radius:2px;
  background:var(--c-accent);margin:var(--space-md) 0 0}
.sec-grid .prose{max-width:none}
.sec-grid .prose p{max-width:68ch}

/* rich "**Lead.** detail" lists become a scannable two-up card grid */
.cards2{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}
.cards2 li{position:relative;background:#fff;border:1px solid var(--c-border);
  border-radius:var(--radius-card);padding:var(--space-lg);padding-left:52px}
.cards2 svg{position:absolute;left:var(--space-lg);top:26px;width:19px;height:19px;color:var(--c-primary)}
.cards2 b{display:block;font-size:17px;line-height:26px;font-weight:700;color:var(--c-heading)}
.cards2 span{display:block;font-size:16px;line-height:26px;color:var(--c-body);margin-top:2px}
.section--alt .cards2 li{background:#fff}
.on-dark .cards2 li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.on-dark .cards2 b{color:#fff}
.on-dark .cards2 span{color:var(--c-on-dark)}
.on-dark .cards2 svg{color:var(--c-eyebrow-dark)}

/* dark prose bands */
.section.on-dark .prose p,.section.on-dark .prose li{color:var(--c-on-dark)}
.section.on-dark .prose a{color:var(--c-eyebrow-dark)}
.section.on-dark .prose h3,.section.on-dark .sec-grid__head h2{color:#fff}
.section.on-dark .tick-list svg,.section.on-dark .split__list svg{color:var(--c-eyebrow-dark)}
.section.on-dark .split__list b{color:#fff}
.section.on-dark .meta{color:rgba(255,255,255,.75)}

/* Table sections run the full container; the prose measure only governs text. */
.prose--wide{max-width:none}
.prose--wide>p,.prose--wide>ul{max-width:72ch}
.prose>.table-wrap{max-width:none}

@media (min-width:514px){
  .cards2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1012px){
  .sec-grid{grid-template-columns:320px minmax(0,1fr);gap:var(--space-3xl);align-items:start}
  .sec-grid__head{position:sticky;top:104px}
  .sec-grid__head h2::after{margin-top:var(--space-md)}
}
@media (min-width:1232px){
  .sec-grid{grid-template-columns:360px minmax(0,1fr);gap:var(--space-4xl)}
}

/* --------------------------------------------------------------------------
   22. Hub page (/hosting/)
   -------------------------------------------------------------------------- */
.hero__trust--six{grid-template-columns:1fr}
.prods{display:grid;gap:var(--space-lg)}
.prod{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-card);
  padding:var(--space-xl) var(--space-lg);box-shadow:var(--shadow-card);
  transition:box-shadow var(--transition),transform var(--transition)}
.prod:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}
.prod__ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(234,88,12,.13);color:var(--c-primary);margin-bottom:var(--space-md)}
.prod__ico svg{width:24px;height:24px}
.prod h3{margin-bottom:var(--space-sm)}
.prod h3 a{color:var(--c-heading);text-decoration:none}
.prod h3 a:hover,.prod h3 a:focus-visible{color:var(--c-primary);text-decoration:underline}
.prod p{font-size:16px;line-height:26px}
.prod__cta{margin-top:var(--space-md)}
.cmp td a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.cmp td a:hover{color:var(--c-primary-dk)}
.final__note a{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media (min-width:514px){
  .hero__trust--six{grid-template-columns:repeat(2,1fr)}
  .prods{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1012px){
  .hero__trust--six{grid-template-columns:repeat(3,1fr)}
  .prods{grid-template-columns:repeat(3,1fr)}
}

/* --------------------------------------------------------------------------
   22. Domain search (hero, /hosting/domains/)
   One pill: magnifier, input, solid CTA flush inside the right end. Chips
   below it, then a one-line promo, then the results panel phase 2 fills.
   Only /hosting/domains/ carries .domain-search, so nothing here reaches
   another page.
   -------------------------------------------------------------------------- */
.domain-search{margin:0;max-width:720px}

.domain-search__field{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:2px solid transparent;border-radius:999px;
  padding:5px 5px 5px 0;box-shadow:0 12px 34px rgba(0,0,0,.28);
}
/* The ring goes on the pill, not the bare input, so the whole control shows
   focus — the input itself has no border to highlight. */
.domain-search__field:focus-within{border-color:var(--c-eyebrow-dark)}
.domain-search__icon{
  width:20px;height:20px;flex:none;margin-left:18px;color:var(--c-meta);
}
.domain-search input[type="text"]{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--font);font-size:16px;line-height:24px;color:var(--c-heading);
  padding:14px 8px;
}
.domain-search input[type="text"]::placeholder{color:var(--c-meta);opacity:1}
/* Inside the pill the CTA is a pill too, and drops the lifted shadow it
   carries elsewhere — it is sitting on a white surface here, not the hero. */
.domain-search .btn-cta{
  flex:none;border-radius:999px;padding:0 26px;height:48px;line-height:1;box-shadow:none;
}
.domain-search .btn-cta:hover{transform:none;box-shadow:none}

.domain-search__error{
  display:flex;align-items:flex-start;gap:8px;margin-top:10px;
  font-size:14px;line-height:22px;font-weight:700;color:#FFD9C7;  /* 12.8:1 on the hero */
}
/* `display:flex` above beats the UA's `[hidden]{display:none}`, which left the
   error bullet floating under an empty message until it was asked for. */
.domain-search__error[hidden]{display:none}
.domain-search__error::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;
  background:var(--c-accent);color:#fff;font-size:12px;line-height:18px;text-align:center}

/* --- TLD chips ------------------------------------------------------------ */
.domain-search__tlds{
  display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none;
}
.domain-chip{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;
  border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(255,255,255,.10);
  font-family:var(--font);font-size:14px;line-height:1;font-weight:700;color:#fff;
  cursor:pointer;text-decoration:none;transition:background var(--transition),border-color var(--transition);
}
.domain-chip:hover,.domain-chip:focus-visible{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}
/* Section 2 underlines every in-copy link via `main li a:not(.btn):not(.tlink)`.
   Each :not() contributes its argument, so that rule is (0,2,3) and it caught
   "View more" — the only chip that is an <a>. Three classes beat two, whatever
   the element count, so this wins without touching their :not() chain. */
.domain-search__tlds a.domain-chip.domain-chip--more{text-decoration:none}
.domain-chip[aria-pressed="true"]{background:var(--c-cta-bg);border-color:var(--c-cta-bg)}
.domain-chip svg{width:14px;height:14px;flex:none}

.domain-search__promo{
  display:flex;align-items:center;gap:9px;margin:14px 0 0;
  font-size:14px;line-height:22px;color:rgba(255,255,255,.88);
}
.domain-search__promo svg{width:16px;height:16px;flex:none;color:var(--c-eyebrow-dark)}

/* --- Results panel (phase 2) ---------------------------------------------- */
.domain-results{
  margin-top:var(--space-lg);background:#fff;border-radius:var(--radius-card);
  box-shadow:var(--shadow-card-hover);overflow:hidden;color:var(--c-body);
}
.domain-results__exact{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);
  padding:var(--space-md) var(--space-lg);background:var(--c-bg-alt);
  border-bottom:1px solid var(--c-border);
}
.domain-results__name{font-size:19px;line-height:26px;font-weight:800;color:var(--c-heading);
  word-break:break-all;margin-right:auto}
.domain-results__status{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.domain-results__status::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.is-available{color:#15803D}
.is-taken{color:var(--c-meta)}
.domain-results__price{font-size:17px;font-weight:800;color:var(--c-heading);white-space:nowrap}
.domain-results__renew{display:block;font-size:12px;font-weight:400;color:var(--c-meta)}

.domain-results__tabs{display:flex;flex-wrap:wrap;gap:6px;padding:var(--space-sm) var(--space-lg) 0}
.domain-tab{
  border:0;background:transparent;border-radius:999px;padding:7px 14px;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:700;color:var(--c-meta);
}
.domain-tab:hover{background:var(--c-bg-alt);color:var(--c-heading)}
.domain-tab[aria-selected="true"]{background:var(--c-primary);color:#fff}

.domain-results__list{margin:0;padding:var(--space-sm) 0 0;list-style:none}
.domain-results__list li{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);
  padding:12px var(--space-lg);border-top:1px solid var(--c-border);
}
.domain-results__list li:first-child{border-top:0}
.domain-results__list .domain-results__name{font-size:16px;font-weight:700}
.domain-results__foot{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--c-border);
  font-size:13px;color:var(--c-meta)}
.domain-results a.btn,.domain-results button.btn{
  flex:none;border-radius:var(--radius-btn);height:40px;padding:0 18px;font-size:14px;
}
.domain-results__skeleton{padding:var(--space-lg);display:grid;gap:12px}
.domain-results__skeleton span{display:block;height:14px;border-radius:6px;
  background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);background-size:400% 100%;
  animation:domainShimmer 1.2s ease infinite}
.domain-results__skeleton span:nth-child(1){width:52%}
.domain-results__skeleton span:nth-child(2){width:78%}
.domain-results__skeleton span:nth-child(3){width:64%}
@keyframes domainShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.domain-results__skeleton span{animation:none}}

/* --- Mobile: button drops below the input, chips wrap ---------------------- */
@media (max-width:600px){
  .domain-search__field{flex-wrap:wrap;border-radius:16px;padding:8px}
  .domain-search__icon{margin-left:8px}
  .domain-search input[type="text"]{flex:1 1 auto;padding:12px 6px}
  .domain-search .btn-cta{flex:1 1 100%;margin-top:8px;justify-content:center}
  .domain-results__exact,.domain-results__list li{padding-left:var(--space-md);padding-right:var(--space-md)}
  .domain-results__name{margin-right:0;flex:1 1 100%}
  .domain-results a.btn,.domain-results button.btn{flex:1 1 100%;justify-content:center}
  .domain-results__tabs{padding-left:var(--space-md);padding-right:var(--space-md)}
}

/* --------------------------------------------------------------------------
   14. Domain landing page — review fixes (2026-09-06)
   -------------------------------------------------------------------------- */

/* --- One grid, one left edge -----------------------------------------------
   The hero markup carries .container and .hero__inner on the SAME element, so
   .hero__inner's 760px was beating .container's 1248px: hero content started
   at 364px while every section below started at 120px. The hero now shares the
   page container; line length is protected on the text children instead, so
   nothing gets a 1200px measure. */
/* Not `none`: the element IS the .container, so it must keep the page width. */
.hero__inner{max-width:var(--container)}
.hero__inner>.crumbs,
.hero__inner>.eyebrow,
.hero__inner>h1,
.hero__inner>.hero__lead{max-width:760px}

/* --- Priced extension chips ------------------------------------------------
   Two lines: the extension, then what it costs and what it renews at. The
   repeated number is the argument, so it is not abbreviated away. */
.domain-search__tlds--priced{gap:10px}
.domain-search__tlds--priced .domain-chip{
  flex-direction:column;align-items:flex-start;gap:2px;
  min-height:0;padding:9px 15px;border-radius:14px;text-align:left;
}
.domain-chip__tld{font-size:15px;line-height:20px;font-weight:800;letter-spacing:.01em}
.domain-chip__price{
  font-size:12px;line-height:17px;font-weight:700;
  color:var(--c-eyebrow-dark);white-space:nowrap;
}
.domain-chip__renew{font-weight:400;color:rgba(255,255,255,.72)}
.domain-search__tlds--priced .domain-chip--more{
  flex-direction:row;align-items:center;gap:6px;align-self:stretch;
  padding:0 16px;min-height:44px;border-radius:999px;
}

/* --- The free-domain hook, promoted out of the features grid -------------- */
.domain-search__promo{flex-wrap:wrap;gap:6px 20px;align-items:flex-start}
.domain-search__promo-item{display:flex;align-items:flex-start;gap:9px}
.domain-search__promo-item--free b{color:#fff}
.domain-search__promo em{font-style:normal;color:#fff;font-weight:700}

/* --- Before / after ---------------------------------------------------------
   One card dimmed, one in brand orange, so the contrast is readable at a
   glance instead of buried in three paragraphs. */
.compare{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}
.compare__card{
  border:1px solid var(--c-border);border-radius:var(--radius-card);
  padding:var(--space-lg);background:#fff;
}
.compare__label{
  display:inline-block;margin-bottom:var(--space-sm);
  font-size:13px;line-height:18px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.compare__list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.compare__list li{position:relative;padding-left:24px;font-size:15px;line-height:23px}
.compare__list li::before{
  position:absolute;left:0;top:9px;width:10px;height:2px;border-radius:2px;content:"";
}
.compare__card--was{background:var(--c-bg-alt);color:var(--c-meta)}
.compare__card--was .compare__label{color:var(--c-meta)}
.compare__card--was .compare__list li::before{background:var(--c-meta)}
.compare__card--now{border-color:var(--c-primary);box-shadow:0 10px 30px rgba(194,65,12,.10)}
.compare__card--now .compare__label{color:var(--c-primary)}
.compare__card--now .compare__list li{color:var(--c-heading);font-weight:600}
.compare__card--now .compare__list li::before{background:var(--c-primary)}
@media (min-width:752px){
  .compare{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
}

/* --- Grouped extension table ---------------------------------------------- */
.tldtabs{margin-top:var(--space-lg)}
.tldtabs__list{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--space-md);
  border-bottom:1px solid var(--c-border);padding-bottom:var(--space-sm);
}
.tldtab{
  /* min-height keeps the tab a 44px touch target on a phone. */
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font);font-size:14px;line-height:1;font-weight:700;
  padding:0 18px;border:1px solid var(--c-border);border-radius:999px;
  background:#fff;color:var(--c-body);cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.tldtab:hover{border-color:var(--c-primary);color:var(--c-primary)}
.tldtab[aria-selected="true"]{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.tldpanel__blurb{margin:0 0 var(--space-sm);font-size:14px;line-height:21px;color:var(--c-meta)}
.cmp--tld{min-width:0}
.cmp--tld td.is-same .ph{color:var(--c-primary)}
/* Without JavaScript every panel shows and the tab strip is pointless. */
.tldtabs:not([data-tldtabs-ready]) .tldtabs__list{display:none}
.tldtabs:not([data-tldtabs-ready]) .tldpanel[hidden]{display:block}
.tldtabs:not([data-tldtabs-ready]) .tldpanel+.tldpanel{margin-top:var(--space-lg)}

/* --- Even cards ------------------------------------------------------------
   The WHOIS caveat moved to the FAQ, and the SEO list went to six tips so the
   grid fills. Stretching the items keeps a long card from orphaning its row. */
.cards2>li{height:100%}
.cards2--three{grid-template-columns:1fr}
@media (min-width:752px){ .cards2--three{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1012px){ .cards2--three{grid-template-columns:repeat(3,1fr)} }

/* --- Section rhythm --------------------------------------------------------
   The page ran dark-cream-white-cream-dark-white-cream-orange-dark. It now runs
   dark, white, cream, orange, dark. Consecutive same-colour sections would read
   as one long slab, so the seam between them loses its double padding. */
.section+.section:not(.section--alt):not(.final){padding-top:0}
.section--alt+.section--alt{padding-top:0}

.prose__actions{margin-top:var(--space-lg)}
.prose__actions .btn svg{width:16px;height:16px}

/* Email plans reuse the hosting .plan cards; two tiers, not three. */
.pricing__grid--email{max-width:820px}
@media (min-width:1012px){ .pricing__grid--email{grid-template-columns:repeat(2,1fr)} }
.plans__note{margin-top:var(--space-lg);font-size:14px;line-height:22px;color:var(--c-meta);max-width:72ch}

/* Secondary links under the transfer hero's search form. */
.hero__actions-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;padding:0;list-style:none;width:100%}
.hero__actions-links a{
  display:inline-flex;align-items:center;min-height:44px;
  color:rgba(255,255,255,.88);font-size:15px;
  text-decoration:underline;text-underline-offset:3px;
}
.hero__actions-links a:hover,.hero__actions-links a:focus-visible{color:#fff}