/* ==========================================================================
   myHosting theme overrides
   Loaded after huraga.css. Plain CSS, no build step.
   See design-system.md before editing.

   Structure:
     1. Tokens            global, light and dark
     2. Bootstrap bridge  so stock components follow the brand
     3. Global base       typography only, nothing structural
     4. .mh landing       fully scoped, never leaks into the client area
   ========================================================================== */

/* ============================ 1. tokens ================================== */
:root {
  --mh-bg:#F6F8FB; --mh-surface:#FFFFFF; --mh-surface-2:#EFF3F8;
  --mh-text:#111722; --mh-text-2:#485165; --mh-text-3:#78829A;
  --mh-border:#E2E7F0; --mh-border-2:#CFD7E4;

  --mh-brand:#1E88F0; --mh-brand-2:#0E6DD0; --mh-brand-weak:#E6F1FE; --mh-on-brand:#FFFFFF;

  /* icon hues, colour without chaos */
  --mh-h1:#1E88F0; --mh-h1-w:#E6F1FE;
  --mh-h2:#0F9E96; --mh-h2-w:#E0F5F3;
  --mh-h3:#6C5CE7; --mh-h3-w:#EDEBFD;
  --mh-h4:#D9820B; --mh-h4-w:#FCF1E0;

  --mh-ok:#128A5E; --mh-ok-w:#E3F5EC;
  --mh-no:#C4372C; --mh-no-w:#FCEBE9;

  /* Border tone for selected and hovered surfaces. In light it is the full
     colour, in dark it is muted so edges never glow against near black. */
  --mh-brand-line:#1E88F0;
  --mh-ok-line:#128A5E;
  --mh-no-line:#C4372C;

  --mh-glow:radial-gradient(900px 380px at 12% -10%, rgba(30,136,240,.13), transparent 60%),
            radial-gradient(700px 320px at 88% 0%, rgba(15,158,150,.10), transparent 60%);
  --mh-shadow:0 1px 2px rgba(17,23,34,.05);
  --mh-shadow-2:0 12px 28px -18px rgba(17,23,34,.35);

  --mh-fs-xs:12px; --mh-fs-sm:13px; --mh-fs-base:15px; --mh-fs-md:16px;
  --mh-fs-lg:18px; --mh-fs-xl:22px; --mh-fs-2xl:28px; --mh-fs-3xl:36px;
  --mh-r:8px; --mh-r-lg:12px; --mh-maxw:1120px;

  /*  Sem isto o color-scheme fica "normal" e o Chrome desenha o que e dele
      (realce de autofill, barras de deslocamento, controlos nativos) com a
      paleta da PREFERENCIA DO BROWSER, nao com a da pagina. Um utilizador com
      o Chrome em escuro via os campos preenchidos automaticamente a cinzento
      por cima de um site claro. */
  color-scheme:light;
  --mh-sans:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mh-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}

[data-bs-theme="dark"] {
  /*  O Bootstrap ja declara isto, mas o custom.css carrega depois e :root tem a
      mesma especificidade que [data-bs-theme=dark], por isso a regra clara
      acima apagaria a dele. Repetida aqui, e depois dela, para o escuro ganhar. */
  color-scheme:dark;
  --mh-bg:#080A0E; --mh-surface:#10141B; --mh-surface-2:#171C25;
  --mh-text:#E8ECF3; --mh-text-2:#A6B0C2; --mh-text-3:#76819A;
  --mh-border:#1F2632; --mh-border-2:#2B3444;

  --mh-brand:#4FA3FF; --mh-brand-2:#7CBBFF; --mh-brand-weak:#0E1F33; --mh-on-brand:#04101E;

  --mh-h1:#4FA3FF; --mh-h1-w:#0E1F33;
  --mh-h2:#2FC7BC; --mh-h2-w:#08241F;
  --mh-h3:#9585FF; --mh-h3-w:#161334;
  --mh-h4:#F0A93C; --mh-h4-w:#241803;

  --mh-ok:#37CE93; --mh-ok-w:#08231A;
  --mh-no:#FF7C70; --mh-no-w:#25100E;

  /* muted edges, roughly 45% of the accent mixed into the base border */
  --mh-brand-line:#325884;
  --mh-ok-line:#2A725E;
  --mh-no-line:#844D4E;

  --mh-glow:radial-gradient(900px 380px at 12% -10%, rgba(79,163,255,.10), transparent 60%),
            radial-gradient(700px 320px at 88% 0%, rgba(47,199,188,.07), transparent 60%);
  --mh-shadow:none;
  --mh-shadow-2:none;
}

/* ====================== 2. bootstrap bridge ============================== */
/* Stock components in the client area pick up the brand automatically. */
:root {
  --bs-primary:#1E88F0;
  --bs-primary-rgb:30,136,240;
  --bs-link-color:#1E88F0;
  --bs-link-color-rgb:30,136,240;
  --bs-link-hover-color:#0E6DD0;
  --bs-border-color:var(--mh-border);
  --bs-body-color:var(--mh-text);
  --bs-body-bg:var(--mh-bg);
}
[data-bs-theme="dark"] {
  --bs-primary:#4FA3FF;
  --bs-primary-rgb:79,163,255;
  --bs-link-color:#4FA3FF;
  --bs-link-color-rgb:79,163,255;
  --bs-link-hover-color:#7CBBFF;
}

/* ========================= 3. global base ================================ */
body { font-family:var(--mh-sans); }

/* ====================== 4. landing, scoped to .mh ======================== */
.mh { font-family:var(--mh-sans); color:var(--mh-text); background:var(--mh-bg); }
.mh *,
.mh *::before,
.mh *::after { box-sizing:border-box; }

.mh h1,.mh h2,.mh h3 {
  margin:0; font-weight:600; line-height:1.22;
  letter-spacing:-.02em; text-wrap:balance; color:var(--mh-text);
}
.mh h1{font-size:var(--mh-fs-3xl)}
@media (min-width:1000px){ .mh h1{font-size:44px} }
.mh h2{font-size:var(--mh-fs-xl)}
.mh h3{font-size:var(--mh-fs-lg)}
.mh p{margin:0}
.mh a{color:var(--mh-brand);text-decoration:none}
.mh .mono{font-family:var(--mh-mono)}

/*  A domain name is an identifier the reader will compare character by
    character -- is it .pt or .com, one L or two -- so it gets the mono face
    and normal casing, never the surrounding sentence's styling. */
.mh .mh-mono,
.mh-dash .mh-mono{font-family:var(--mh-mono);text-transform:none;letter-spacing:0}
.mh .mh-row-dom{font-family:var(--mh-mono);color:var(--mh-text-2)}

/* ---- pagina do .pt ----
   Uses the same rhythm as the rest of the site: nothing new invented, the
   section spacing and card treatment already in use. */
.mh .mh-crumb{display:flex;gap:8px;align-items:center;font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-bottom:14px}
.mh .mh-crumb a{color:var(--mh-text-2)}
.mh .mh-crumb a:hover{color:var(--mh-brand);text-decoration:underline}

.mh .mh-pt-price{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  padding:20px 22px;border:1px solid var(--mh-border);border-radius:var(--mh-r);
  background:var(--mh-surface);
}
.mh .mh-pt-price-b{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.mh .mh-pt-price-l{width:100%;font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--mh-text-3)}
.mh .mh-pt-price-b b{font-size:var(--mh-fs-xl);font-variant-numeric:tabular-nums}
.mh .mh-pt-price-p{color:var(--mh-text-3)}
.mh .mh-pt-price-v{width:100%;font-size:var(--mh-fs-xs);color:var(--mh-text-3)}
.mh .mh-pt-price p{flex:1 1 320px;margin:0;color:var(--mh-text-2);font-size:var(--mh-fs-sm);line-height:1.6}

.mh .mh-pt-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
@media (max-width:820px){ .mh .mh-pt-cols{grid-template-columns:1fr;gap:26px} }
.mh .mh-pt-cols p{color:var(--mh-text-2);line-height:1.7}

.mh .mh-pt-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.mh .mh-pt-list li{display:grid;gap:3px;padding-left:16px;border-left:2px solid var(--mh-brand-line)}
.mh .mh-pt-list b{font-size:var(--mh-fs-base)}
.mh .mh-pt-list span{color:var(--mh-text-2);font-size:var(--mh-fs-sm);line-height:1.6}

.mh .mh-pt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:18px}
@media (max-width:820px){ .mh .mh-pt-grid{grid-template-columns:1fr} }
.mh .mh-pt-grid > div{padding:16px 18px;border:1px solid var(--mh-border);border-radius:var(--mh-r);background:var(--mh-surface)}
.mh .mh-pt-grid b{display:block;margin-bottom:6px}
.mh .mh-pt-grid p{margin:0;color:var(--mh-text-2);font-size:var(--mh-fs-sm);line-height:1.6}

/*  The ticks reuse the mask the plan feature lists already use, so "included"
    reads the same way everywhere on the site. */
/*  The prose pages -- termos, privacidade, sobre: long text in a card that is as wide as the screen.
    A measure this wide is unreadable, and these are pages people are meant to
    actually read, not scroll past. Scoped to the body classes the FOSSBilling
    templates already set, so nothing else picks it up. */
body.tos .card-body,
body.privacy-policy .card-body,
body.about-us .card-body{
  max-width:76ch;line-height:1.65
}
body.tos .card-body h2,
body.privacy-policy .card-body h2,
body.about-us .card-body h2{
  font-size:1.15rem;margin:1.9em 0 .55em;padding-top:.2em
}
body.tos .card-body h2:first-child,
body.privacy-policy .card-body h2:first-child,
body.about-us .card-body h2:first-child{margin-top:0}
body.tos .card-body li,
body.privacy-policy .card-body li,
body.about-us .card-body li{margin-bottom:.4em}

.mh .mh-pt-ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.mh .mh-pt-ticks li{position:relative;padding-left:26px;color:var(--mh-text-2);font-size:var(--mh-fs-sm)}
.mh .mh-pt-ticks li::before{
  content:"";position:absolute;left:0;top:.35em;width:15px;height:15px;
  /*  --mh-ok and --mh-tick, the tokens the rest of the site already uses.
      An earlier draft invented --mh-yes, which is defined nowhere, so the
      tick would have been transparent -- a bullet list with no bullets and
      nothing to say why. */
  background-color:var(--mh-ok);
  -webkit-mask:var(--mh-tick) center/contain no-repeat;
          mask:var(--mh-tick) center/contain no-repeat;
}

.mh .mh-pt-faq{margin:18px 0 0}
.mh .mh-pt-faq dt{font-weight:600;margin-top:18px}
.mh .mh-pt-faq dt:first-child{margin-top:0}
.mh .mh-pt-faq dd{margin:6px 0 0;color:var(--mh-text-2);line-height:1.7}
.mh .mh-pt-more{margin-top:26px;font-size:var(--mh-fs-sm)}

/* ---- totais do carrinho ----

   The totals sit in their own table, the one without a thead. It inherited the
   item table's cell padding, which is right for a dense list of products and
   too tight for two lines of money -- the figures ended up against the border
   on both sides.

   More room, and the amount right-aligned with tabular figures so the cents
   line up between the tax row and the total. */
.mh-order #checkout-inner .table:not(:has(thead)) > tbody > tr > td{
  padding:14px 18px;
  font-size:var(--mh-fs-base);
}
.mh-order #checkout-inner .table:not(:has(thead)) > tbody > tr > td:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/*  The last row is the total, and it should read as the total. */
.mh-order #checkout-inner .table:not(:has(thead)) > tbody > tr:last-child > td{
  border-top:1px solid var(--mh-border);
  border-bottom:0;
  font-size:var(--mh-fs-md);
  color:var(--mh-text);
}
.mh-order #checkout-inner .table:not(:has(thead)) > tbody > tr:not(:last-child) > td{
  color:var(--mh-text-2);
}

/* ---- metodo de pagamento ----

   The gateway's own mark is replaced by the card brands. Two reasons: the
   Stripe logo is dark grey on transparent and vanishes on a dark page, and a
   customer recognises the card in their pocket rather than the company that
   moves the money.

   Matched on the inline style, which is the only thing that distinguishes one
   gateway's label from another's -- the ids are generated. So this swaps
   Stripe and leaves PayPal or anything else with its own mark.

   Deliberately NOT scoped to .mh-order. The same markup appears twice: in the
   checkout accordion (body.mh-order) and on the invoice payment page
   (body.invoice-invoice), which is where a customer lands from a payment
   e-mail. Scoped, it fixed the first and left the second showing the dark grey
   Stripe wordmark on a dark page -- invisible, which is the bug this replaced
   in the first place. The .invoice-gateway class only exists in these two
   places, so the component styles itself wherever it is used. */
.invoice-gateway label[style*="stripe.png"]{
  background-image:url("img/cards.svg") !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  width:116px !important;
  height:32px !important;
}

/*  The selectable card itself: it has to look selectable, and look selected.
    The stock markup gives the radio no visible state at all beyond Bootstrap's
    default, which on a dark ground is nearly invisible. */
.invoice-gateway{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border:1px solid var(--mh-border-2);border-radius:var(--mh-r);
  background:var(--mh-surface);cursor:pointer;
  transition:border-color .13s ease, box-shadow .13s ease;
}
.invoice-gateway:hover{border-color:var(--mh-text-3)}
.invoice-gateway:has(.btn-check:checked){
  border-color:var(--mh-brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mh-brand) 20%, transparent);
}
.invoice-gateway label.btn{border:0;padding:0;background-color:transparent}

/* ---- aviso de cookies ----
   Fixo em baixo, acima de tudo o resto, e com o mesmo desenho do resto do
   site em vez do alerta do Bootstrap. [hidden] e respeitado pelo reset, por
   isso nao ha regra de display aqui. */
.mh-cookie{position:fixed;left:0;right:0;bottom:0;z-index:1080;padding:12px}
.mh-cookie-in{
  max-width:var(--mh-w,1120px);margin-inline:auto;
  display:flex;align-items:center;gap:14px;
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r);padding:12px 14px;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.45);
}
.mh-cookie-in p{margin:0;font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.5}
.mh-cookie-x{
  margin-left:auto;flex:none;display:grid;place-items:center;
  width:30px;height:30px;border:0;border-radius:var(--mh-r);
  background:transparent;color:var(--mh-text-3);cursor:pointer;
}
.mh-cookie-x:hover{background:var(--mh-surface-2);color:var(--mh-text)}
@media (max-width:600px){ .mh-cookie{padding:8px} .mh-cookie-in{padding:10px 12px} }
.mh .tnum{font-variant-numeric:tabular-nums}
.mh .wrap{max-width:var(--mh-maxw);margin-inline:auto;padding-inline:24px}

.mh :where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--mh-brand);outline-offset:2px;border-radius:var(--mh-r);
}

/* motion */
.mh .rise{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.mh .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mh *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .mh .rise{opacity:1;transform:none}
}

/* buttons */
.mh .btn{
  font:inherit;font-weight:600;font-size:var(--mh-fs-base);
  height:40px;padding:0 18px;border-radius:var(--mh-r);border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease,background-color .13s ease,border-color .13s ease,color .13s ease,box-shadow .13s ease;
  white-space:nowrap;text-decoration:none;
}
.mh .btn-primary{background:var(--mh-brand);color:var(--mh-on-brand);box-shadow:0 6px 16px -10px var(--mh-brand)}
.mh .btn-primary:hover{background:var(--mh-brand-2);color:var(--mh-on-brand);transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--mh-brand)}
.mh .btn-primary:active{transform:none}
.mh .btn-ghost{background:var(--mh-surface);color:var(--mh-text);border-color:var(--mh-border-2)}
.mh .btn-ghost:hover{border-color:var(--mh-brand-line);color:var(--mh-brand)}
.mh .btn-plain{background:transparent;color:var(--mh-text-2)}
.mh .btn-plain:hover{color:var(--mh-brand)}
.mh .btn-sm{height:34px;padding:0 14px;font-size:var(--mh-fs-sm)}
.mh .btn-block{width:100%}

/* header */
.mh .hdr{background:var(--mh-surface);border-bottom:1px solid var(--mh-border);position:sticky;top:0;z-index:30}
.mh .hdr .wrap{display:flex;align-items:center;gap:20px;min-height:58px}
.mh .brand{display:flex;align-items:center;gap:9px;color:var(--mh-text);font-weight:700;font-size:var(--mh-fs-md);letter-spacing:-.02em}
.mh .brand .mk{
  width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--mh-brand),var(--mh-h2));color:#fff;
}
.mh .brand img{display:block;height:30px;width:auto}
.mh .hdr nav.main{display:flex;gap:20px;margin-left:6px}
.mh .hdr nav.main a{color:var(--mh-text-2);font-weight:500}
.mh .hdr nav.main a:hover{color:var(--mh-brand)}
.mh .hdr .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
.mh .ib{
  width:34px;height:34px;border-radius:var(--mh-r);border:1px solid transparent;background:transparent;
  color:var(--mh-text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .13s ease,color .13s ease;
}
.mh .ib:hover{background:var(--mh-surface-2);color:var(--mh-brand)}
/* locale selector, TomSelect enhances this in place */
.mh .hdr .form-select.js-locale-selector{
  font-size:var(--mh-fs-sm);color:var(--mh-text-2);background-color:transparent;
  border:1px solid var(--mh-border-2);border-radius:var(--mh-r);height:34px;
  padding:0 2rem 0 .6rem;width:auto;min-width:0;
}
.mh .hdr .ts-wrapper{min-width:0}
@media (max-width:880px){ .mh .hdr nav.main{display:none} }

/* sections */
.mh .sec{padding:52px 0}
.mh .sec.sm{padding:36px 0}
@media (max-width:700px){ .mh .sec{padding:36px 0} }
.mh .sh{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.mh .sh p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-top:4px}
.mh .sh .act{margin-left:auto}

/* hero */
.mh .hero{position:relative;background:var(--mh-surface);border-bottom:1px solid var(--mh-border);overflow:hidden}
.mh .hero::before{content:"";position:absolute;inset:0;background:var(--mh-glow);pointer-events:none}
/*  The starfield canvas. Sits above ::before (the ambient glow wash) and
    below .wrap, which is positioned and comes later in the DOM.

    pointer-events:none is not cosmetic: without it the canvas covers the whole
    hero and swallows every click meant for the search field. The parallax
    listener is on .hero itself, so nothing is lost by turning them off here. */
.mh .hero .hero-stars{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  pointer-events:none;
}
.mh .hero .wrap{position:relative;padding-block:56px}
@media (max-width:700px){ .mh .hero .wrap{padding-block:40px} }
.mh .hero .lead{max-width:660px}
.mh .hero .sub{color:var(--mh-text-2);font-size:var(--mh-fs-md);margin-top:10px}

.mh .srch{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;max-width:620px}
.mh .srch .fld{
  flex:1 1 320px;display:flex;min-width:0;background:var(--mh-surface);
  border:1px solid var(--mh-border-2);border-radius:var(--mh-r);
  transition:border-color .13s ease,box-shadow .13s ease;
}
.mh .srch .fld:focus-within{border-color:var(--mh-brand);box-shadow:0 0 0 3px var(--mh-brand-weak)}
.mh .srch input{flex:1;min-width:0;font:inherit;font-family:var(--mh-mono);font-size:var(--mh-fs-md);border:0;background:transparent;color:var(--mh-text);padding:0 14px;height:44px}
.mh .srch input:focus{outline:none}
.mh .srch input::placeholder{color:var(--mh-text-3)}
.mh .srch select{
  font-family:var(--mh-mono);font-size:var(--mh-fs-sm);border:0;border-left:1px solid var(--mh-border);
  background:var(--mh-surface-2);color:var(--mh-text);padding:0 10px;cursor:pointer;
}
.mh .srch select:focus{outline:none}
.mh .srch .btn{height:44px;padding:0 22px}

.mh .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.mh .chip-t{
  display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--mh-border);
  border-radius:999px;padding:4px 12px;background:var(--mh-surface);font-size:var(--mh-fs-sm);
}
.mh .chip-t b{font-family:var(--mh-mono);font-weight:500}
.mh .chip-t span{color:var(--mh-text-2);font-variant-numeric:tabular-nums}
.mh .chips .more{font-size:var(--mh-fs-sm);color:var(--mh-text-3)}

/* inline availability */
.mh .hres{
  display:none;align-items:center;gap:12px;flex-wrap:wrap;max-width:620px;
  margin-top:14px;padding:12px 16px;border-radius:var(--mh-r);
  border:1px solid var(--mh-border);background:var(--mh-surface-2);
  animation:mh-pop .22s ease;
}
@keyframes mh-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.mh .hres.on{display:flex}
.mh .hres[data-s="ok"]{background:var(--mh-ok-w);border-color:var(--mh-ok-line)}
.mh .hres[data-s="no"]{background:var(--mh-no-w);border-color:var(--mh-no-line)}
.mh .hres .dn{font-family:var(--mh-mono);font-size:var(--mh-fs-lg);min-width:0;word-break:break-all}
.mh .hres .rt{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mh .hres .px{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.mh .pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--mh-fs-sm);font-weight:600;padding:2px 10px;border-radius:999px;background:var(--mh-surface);border:1px solid currentColor}
.mh .pill.ok{color:var(--mh-ok)}
.mh .pill.no{color:var(--mh-no)}
.mh .pill em{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* three steps */
.mh .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){ .mh .steps3{grid-template-columns:1fr;gap:16px} }
.mh .st{position:relative}
.mh .st .tile{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;transition:transform .18s ease}
.mh .st:hover .tile{transform:translateY(-2px) scale(1.04)}
.mh .st h3{font-size:var(--mh-fs-base);margin-bottom:3px}
.mh .st p{font-size:var(--mh-fs-sm);color:var(--mh-text-2);max-width:34ch}
.mh .st .n{position:absolute;top:0;right:0;font-size:var(--mh-fs-2xl);font-weight:700;color:var(--mh-border);line-height:1;letter-spacing:-.04em}

/* price table */
.mh .tblw{overflow-x:auto;border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);background:var(--mh-surface)}
.mh table.pz{width:100%;border-collapse:collapse;min-width:520px;margin:0}
.mh table.pz th{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--mh-text-3);
  font-weight:600;text-align:left;padding:11px 18px;border-bottom:1px solid var(--mh-border);background:var(--mh-surface-2);
}
.mh table.pz th.r,.mh table.pz td.r{text-align:right}
.mh table.pz td{padding:13px 18px;border-bottom:1px solid var(--mh-border);font-size:var(--mh-fs-sm);vertical-align:middle}
.mh table.pz tr:last-child td{border-bottom:0}
.mh table.pz tbody tr{transition:background-color .13s ease}
.mh table.pz tbody tr:hover{background:var(--mh-brand-weak)}
.mh table.pz td.dn{font-family:var(--mh-mono);font-size:var(--mh-fs-md);color:var(--mh-text)}
.mh table.pz td.num{font-variant-numeric:tabular-nums;color:var(--mh-text-2)}
.mh .lnk{font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-brand);background:none;border:0;cursor:pointer;padding:0}

/* plans */
.mh .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mh .plans[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.mh .plan{
  background:var(--mh-surface);border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);padding:22px;
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.mh .plan:hover{border-color:var(--mh-brand-line);box-shadow:var(--mh-shadow-2);transform:translateY(-2px)}
.mh .plan .pi{flex:1;min-width:220px;display:flex;gap:14px;align-items:flex-start}
.mh .plan .pi .tile{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}
.mh .plan .pi h3{font-size:var(--mh-fs-base)}
.mh .plan .pi p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-top:2px}
.mh .plan .pi p > *:last-child{margin-bottom:0}
.mh .plan .pb{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mh .plan .amt{display:flex;align-items:baseline;gap:4px}
.mh .plan .amt b{font-size:var(--mh-fs-2xl);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mh .plan .amt span{font-size:var(--mh-fs-sm);color:var(--mh-text-3)}
.mh .plan .alt{font-size:var(--mh-fs-xs);color:var(--mh-text-3);font-variant-numeric:tabular-nums;margin-top:2px}
@media (max-width:620px){
  .mh .plan .pb{width:100%;justify-content:space-between}
  .mh .plan .pb .btn{width:100%}
}

.mh .seg2{display:inline-flex;gap:2px;background:var(--mh-surface-2);border:1px solid var(--mh-border);border-radius:var(--mh-r);padding:3px}
.mh .seg2 button{font:inherit;font-size:var(--mh-fs-sm);font-weight:500;border:0;background:transparent;color:var(--mh-text-2);padding:5px 13px;border-radius:5px;cursor:pointer;transition:background-color .13s ease}
.mh .seg2 button[aria-pressed="true"]{background:var(--mh-surface);color:var(--mh-text);font-weight:600;box-shadow:var(--mh-shadow)}
.mh .seg2 .sv{font-size:var(--mh-fs-xs);color:var(--mh-ok);font-weight:600;margin-left:5px}

/* values */
.mh .vals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){ .mh .vals{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .mh .vals{grid-template-columns:1fr} }
.mh .val{
  background:var(--mh-surface);border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);padding:18px;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.mh .val:hover{border-color:var(--mh-border-2);transform:translateY(-2px);box-shadow:var(--mh-shadow-2)}
.mh .val .tile{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:12px;transition:transform .18s ease}
.mh .val:hover .tile{transform:scale(1.06)}
.mh .val b{display:block;font-size:var(--mh-fs-base);font-weight:600;margin-bottom:3px}
.mh .val span{font-size:var(--mh-fs-sm);color:var(--mh-text-2)}

/* band */
.mh .band{
  position:relative;overflow:hidden;border-radius:var(--mh-r-lg);
  border:1px solid var(--mh-border);background:var(--mh-surface);
  padding:26px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.mh .band::before{content:"";position:absolute;inset:0;background:var(--mh-glow);pointer-events:none}
.mh .band > *{position:relative}
.mh .band .bd{flex:1;min-width:240px}
.mh .band p{font-size:var(--mh-fs-sm);color:var(--mh-text-2);margin-top:4px}

/* faq */
.mh .faq{border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);background:var(--mh-surface);overflow:hidden}
.mh .faq details{border-bottom:1px solid var(--mh-border)}
.mh .faq details:last-child{border-bottom:0}
.mh .faq summary{cursor:pointer;list-style:none;padding:15px 20px;font-weight:500;display:flex;align-items:center;gap:10px;transition:background-color .13s ease}
.mh .faq summary::-webkit-details-marker{display:none}
.mh .faq summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--mh-text-3);border-bottom:2px solid var(--mh-text-3);transform:rotate(45deg);transition:transform .18s ease;flex:none}
.mh .faq details[open] summary::after{transform:rotate(-135deg)}
.mh .faq summary:hover{background:var(--mh-surface-2)}
/*  4px of its own on top of the summary's 15px. With none, the answer began on
    the pixel the question ended on and read as a subtitle of the title rather
    than as a separate block. */
.mh .faq .a{padding:4px 20px 16px;font-size:var(--mh-fs-sm);color:var(--mh-text-2);max-width:70ch}

/* notice, holds the showcase markdown */
.mh .notice{border:1px solid var(--mh-border);border-left:3px solid var(--mh-brand-line);background:var(--mh-surface);border-radius:var(--mh-r);padding:16px 20px}
.mh .notice :where(h1,h2,h3,h4){font-size:var(--mh-fs-base);margin:0 0 4px}
.mh .notice p{color:var(--mh-text-2);font-size:var(--mh-fs-sm);margin:0 0 6px}
.mh .notice p:last-child{margin-bottom:0}
.mh .notice ul{margin:0;padding-left:18px;font-size:var(--mh-fs-sm);color:var(--mh-text-2)}

/* ==========================================================================
   Rodapé

   Era uma linha de tudo: a morada, o NIF, o telefone, o Livro de Reclamações e
   "Sobre nós" com o mesmo tamanho e a mesma cor, encostados uns aos outros. Sem
   diferença de peso não há hierarquia, e sem hierarquia o olho tem de ler tudo
   para descobrir o que é uma ligação e o que é um facto.

   Agora são quatro grupos por assunto -- marca, navegação, legal, contactos --
   e três níveis de tipo, só três:

     .mh-ftr-h / .mh-ftr-cap   12px, caixa alta, --mh-text-3   rótulo
     .mh-ftr-list a            13px, --mh-text-2               ligação
     .mh-ftr-addr              12px, --mh-text-3, sem hover    informação

   A ligação é a única coisa que reage ao rato e a única que fica mais escura
   que o resto em repouso. Um endereço postal nunca ganha sublinhado, porque não
   leva a lado nenhum.

   Espaço da escala do design-system: 40px em cima, 32px entre grupos, 24px de
   goteira, 8px entre ligações da mesma lista.
   ========================================================================== */
.mh .mh-ftr{border-top:1px solid var(--mh-border);background:var(--mh-surface);padding:40px 0 20px}
/*  .wrap é o contentor de largura máxima do sítio inteiro e era aqui um flex de
    uma linha só. Volta a ser um bloco: quem trata do arranjo é a grelha. */
.mh .mh-ftr .wrap{display:block}

/*  Primeira coluna mais larga, leva as duas marcas. As outras três repartem o
    resto em partes iguais, para os cabeçalhos de grupo alinharem. */
.mh .mh-ftr-top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:32px 24px;align-items:start;
}

/*  As duas marcas, uma sobre a outra e nunca lado a lado: lado a lado leem-se
    como parceria, empilhadas com legenda leem-se como propriedade. */
.mh .mh-ftr-brand{min-width:0}
.mh .mh-ftr-mark{display:inline-block;line-height:0}
.mh .mh-ftr-mark img{display:block;height:36px;width:auto}
.mh .mh-ftr-name{font-size:var(--mh-fs-md);font-weight:600;color:var(--mh-text);line-height:1.2}

.mh .mh-ftr-parent{margin:20px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mh .mh-ftr-parent-l{display:inline-block;line-height:0;opacity:.9;transition:opacity 140ms ease}
.mh .mh-ftr-parent-l:hover{opacity:1}
/*  28px contra os 36px do myHosting, e num símbolo quadrado contra um logótipo
    largo: a área ocupada é cerca de um quinto. Fica claro qual é a marca da
    loja sem precisar de a escrever. */
.mh .mh-ftr-parent-l img{display:block;height:28px;width:auto}

/*  Rótulos. Nem um deles é clicável, e todos partilham o mesmo tratamento para
    que seja evidente à primeira vista. */
.mh .mh-ftr-h,
.mh .mh-ftr-cap{
  font-size:var(--mh-fs-xs);line-height:1.4;color:var(--mh-text-3);
  text-transform:uppercase;letter-spacing:.08em;
}
.mh .mh-ftr-h{margin:0 0 12px;font-weight:600}
.mh .mh-ftr-cap{display:block;font-weight:500}

/*  Ligações. Um degrau acima do resto do rodapé em contraste, que é o que as
    faz parecer clicáveis num bloco de texto todo esbatido. */
.mh .mh-ftr-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mh .mh-ftr-list a{
  color:var(--mh-text-2);font-size:var(--mh-fs-sm);line-height:1.4;text-decoration:none;
}
.mh .mh-ftr-list a:hover,
.mh .mh-ftr-list a:focus-visible{color:var(--mh-brand);text-decoration:underline;text-underline-offset:2px}

/*  Informação. Está aqui para ser conferida antes de um pagamento, não para ser
    lida, por isso fica no tom mais discreto e sem qualquer estado de rato. */
.mh .mh-ftr-addr{
  margin:16px 0 0;font-style:normal;
  font-size:var(--mh-fs-xs);line-height:1.6;color:var(--mh-text-3);
}
.mh .mh-ftr-addr .mh-ftr-cap{margin-bottom:2px}

/*  A assinatura legal fecha o rodapé sozinha, atrás de um filete, para os
    grupos acima acabarem em vez de escorregarem para dentro dela. */
.mh .mh-ftr-btm{
  margin-top:32px;padding-top:18px;border-top:1px solid var(--mh-border);
  font-size:var(--mh-fs-xs);line-height:1.6;color:var(--mh-text-3);
}

/*  Quatro colunas não cabem num tablet. A coluna da marca passa a ocupar a
    largura toda e as outras três dobram para duas, o que mantém os grupos
    juntos em vez de os partir a meio. */
@media (max-width:900px){
  .mh .mh-ftr-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .mh .mh-ftr-brand{grid-column:1/-1}
}
/*  Num telemóvel é uma coluna só. Cada grupo mantém o seu cabeçalho, que é o
    que continua a dizer ao leitor onde é que uma lista acaba e outra começa. */
@media (max-width:560px){
  .mh .mh-ftr{padding:32px 0 20px}
  .mh .mh-ftr-top{grid-template-columns:minmax(0,1fr);gap:26px}
  .mh .mh-ftr-mark img{height:32px}
  .mh .mh-ftr-btm{margin-top:26px}
}

/* ==========================================================================
   Hero illustration, spinner and blurred header
   ========================================================================== */

/* two column hero, art drops away when there is no room for it */
.mh .hero .heroGrid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:40px;align-items:center;
}
@media (max-width:980px){
  .mh .hero .heroGrid{grid-template-columns:minmax(0,1fr)}
  .mh .heroArt{display:none}
}
.mh .heroArt{justify-self:center;width:100%;max-width:420px}
.mh .heroArt svg{display:block;width:100%;height:auto;overflow:visible}

/* orbit ring and pulsing nodes */
@keyframes mh-orbit-spin{to{transform:rotate(360deg)}}
@keyframes mh-node-pulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%    {transform:scale(1.28);opacity:1}
}
@keyframes mh-float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-6px)}
}
.mh .heroArt .mh-orbit{transform-origin:210px 168px;animation:mh-orbit-spin 38s linear infinite}
.mh .heroArt .mh-node{transform-box:fill-box;transform-origin:center;animation:mh-node-pulse 3.4s ease-in-out infinite}
.mh .heroArt .mh-node.n2{animation-delay:.7s}
.mh .heroArt .mh-node.n3{animation-delay:1.4s}
.mh .heroArt .mh-node.n4{animation-delay:2.1s}
.mh .heroArt .mh-tagcard{transform-box:fill-box;transform-origin:center;animation:mh-float 6s ease-in-out infinite}

/* button spinner */
.mh .btn .spin{
  display:none;width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;
  animation:mh-orbit-spin .9s linear infinite;
}
.mh .btn.is-loading .spin{display:inline-block}
.mh .btn.is-loading .ico{display:none}
.mh .btn.is-loading{cursor:progress;opacity:.9}
.mh .btn:disabled{cursor:progress}

/* frosted header, solid fallback first */
.mh .hdr{transition:box-shadow .2s ease,border-color .2s ease}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .mh .hdr{
    background:color-mix(in srgb, var(--mh-surface) 76%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
  }
}
.mh .hdr.is-stuck{box-shadow:0 8px 26px -20px rgba(17,23,34,.55)}
[data-bs-theme="dark"] .mh .hdr.is-stuck{box-shadow:0 8px 26px -18px rgba(0,0,0,.85)}

@media (prefers-reduced-motion:reduce){
  .mh .heroArt .mh-orbit,
  .mh .heroArt .mh-node,
  .mh .heroArt .mh-tagcard{animation:none}
}

/* ==========================================================================
   Order page
   Styling only. The accordion, its JS and every form name stay as shipped,
   so the cart and checkout keep working exactly as before.
   ========================================================================== */

body.mh-order{background:var(--mh-bg)}

.mh-order .mh-order-head{margin-bottom:20px}
.mh-order .mh-order-head h1{
  font-family:var(--mh-sans);font-size:var(--mh-fs-2xl);font-weight:600;
  letter-spacing:-.02em;color:var(--mh-text);margin:0 0 4px;
}
.mh-order .mh-order-head p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:0}

/* the outer card FOSSBilling wraps the flow in, flattened */
.mh-order #orderbutton{border:0;background:transparent;box-shadow:none}
.mh-order #orderbutton > .card-body{padding:0}

/* each step becomes a card, numbered by the DOM order */
.mh-order #orderManager{counter-reset:mhstep;display:grid;gap:14px}
.mh-order #orderManager .accordion-item{
  counter-increment:mhstep;
  background:var(--mh-surface);
  border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);
  overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.mh-order #orderManager .accordion-item:has(.accordion-collapse.show){
  border-color:var(--mh-brand-line);
  box-shadow:var(--mh-shadow-2);
}

.mh-order #orderManager .accordion-header{margin:0}
.mh-order #orderManager .accordion-button{
  font-family:var(--mh-sans);font-size:var(--mh-fs-base);font-weight:600;
  color:var(--mh-text);background:transparent;
  padding:14px 20px;box-shadow:none;gap:10px;
}
.mh-order #orderManager .accordion-button::before{
  content:counter(mhstep);
  width:22px;height:22px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:var(--mh-fs-xs);font-weight:600;
  background:var(--mh-surface-2);color:var(--mh-text-3);
  border:1px solid var(--mh-border-2);
}
.mh-order #orderManager .accordion-button:not(.collapsed)::before{
  background:var(--mh-brand);color:var(--mh-on-brand);border-color:var(--mh-brand);
}
.mh-order #orderManager .accordion-button:not(.collapsed){color:var(--mh-text)}
.mh-order #orderManager .accordion-button:hover{background:var(--mh-surface-2)}
.mh-order #orderManager .accordion-button .icon{color:var(--mh-text-3)}
.mh-order #orderManager .accordion-button:not(.collapsed) .icon{color:var(--mh-brand)}
.mh-order #orderManager .accordion-body{
  padding:20px;border-top:1px solid var(--mh-border);
}

/* badges in the step headers */
.mh-order #orderManager .badge{font-weight:600;font-size:var(--mh-fs-xs)}
.mh-order #orderManager .badge.bg-info{background:var(--mh-brand)!important}

/* domain step: register / transfer switcher */
.mh-order .nav-pills{
  flex-direction:row!important;border:0!important;
  background:var(--mh-surface-2);border-radius:var(--mh-r);
  padding:3px;gap:2px!important;margin:0 0 16px!important;width:fit-content;
}
.mh-order .nav-pills .nav-link{
  font-size:var(--mh-fs-sm)!important;font-weight:500;
  color:var(--mh-text-2)!important;border-radius:5px;
  padding:5px 14px!important;margin:0!important;
}
.mh-order .nav-pills .nav-link.active{
  background:var(--mh-surface);color:var(--mh-text)!important;font-weight:600;
  box-shadow:var(--mh-shadow);
}
.mh-order .tab-content{width:100%}
.mh-order .d-flex.mb-3{flex-direction:column}

/* domain search row, sized like the storefront */
.mh-order .form-label{
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text-2);margin-bottom:6px;
}
.mh-order .input-group{max-width:520px!important}
.mh-order input[name="register_sld"],
.mh-order input[name="transfer_sld"]{
  font-family:var(--mh-mono);font-size:var(--mh-fs-md)!important;
  height:42px;padding:0 14px;
  background:var(--mh-surface);color:var(--mh-text);
  border:1px solid var(--mh-border-2);
  border-right:0;border-radius:var(--mh-r) 0 0 var(--mh-r);
}
.mh-order select[name="register_tld"],
.mh-order select[name="transfer_tld"]{
  font-family:var(--mh-mono);font-size:var(--mh-fs-sm)!important;
  height:42px;background:var(--mh-surface-2);color:var(--mh-text);
  border:1px solid var(--mh-border-2);border-radius:0 var(--mh-r) var(--mh-r) 0;
}
.mh-order input[name="register_sld"]:focus,
.mh-order input[name="transfer_sld"]:focus,
.mh-order select[name="register_tld"]:focus,
.mh-order select[name="transfer_tld"]:focus{
  border-color:var(--mh-brand);box-shadow:0 0 0 3px var(--mh-brand-weak);
}
.mh-order #domain-check,
.mh-order #transfer-check{
  height:42px;padding:0 20px;font-size:var(--mh-fs-base)!important;font-weight:600;
  background:var(--mh-brand);border-color:var(--mh-brand);color:var(--mh-on-brand);
  border-radius:var(--mh-r);
}
.mh-order #domain-check:hover,
.mh-order #transfer-check:hover{background:var(--mh-brand-2);border-color:var(--mh-brand-2)}

/* the panel revealed after a successful check */
.mh-order .onAfterDomainCheck,
.mh-order #domain-transfer-config{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--mh-border);
}
.mh-order #registration-years,
.mh-order input[name^="ns"]{
  height:38px;font-size:var(--mh-fs-base)!important;
  background:var(--mh-surface);color:var(--mh-text);
  border:1px solid var(--mh-border-2);border-radius:var(--mh-r);
}
.mh-order input[name^="ns"]{font-family:var(--mh-mono);font-size:var(--mh-fs-sm)!important}
.mh-order #registration-years{max-width:320px}
.mh-order .form-check-label{font-size:var(--mh-fs-base);color:var(--mh-text-2)}

/* generic controls inside the flow */
.mh-order .form-control,
.mh-order .form-select{
  background:var(--mh-surface);color:var(--mh-text);border-color:var(--mh-border-2);
  border-radius:var(--mh-r);
}
.mh-order .form-control:focus,
.mh-order .form-select:focus{
  border-color:var(--mh-brand);box-shadow:0 0 0 3px var(--mh-brand-weak);
}

/* cart table */
.mh-order #checkout-inner .table{
  border:1px solid var(--mh-border);border-radius:var(--mh-r);overflow:hidden;
  --bs-table-bg:var(--mh-surface);
}
.mh-order #checkout-inner .table > thead > tr > th{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--mh-text-3);background:var(--mh-surface-2);
  border-bottom:1px solid var(--mh-border);padding:10px 14px;
}
.mh-order #checkout-inner .table > tbody > tr > td{
  padding:12px 14px;border-color:var(--mh-border);
  font-size:var(--mh-fs-sm);vertical-align:middle;
}

/* buttons inside the flow follow the brand */
.mh-order .btn-primary{
  background:var(--mh-brand);border-color:var(--mh-brand);color:var(--mh-on-brand);
  font-weight:600;border-radius:var(--mh-r);
}
.mh-order .btn-primary:hover{background:var(--mh-brand-2);border-color:var(--mh-brand-2)}
.mh-order .btn-dark{
  background:transparent;color:var(--mh-text-2);border:1px solid var(--mh-border-2);
  font-weight:600;border-radius:var(--mh-r);
}
.mh-order .btn-dark:hover{border-color:var(--mh-brand-line);color:var(--mh-brand);background:transparent}

/* ==========================================================================
   Fixes: hero art composition, pill alignment, larger theme toggle
   ========================================================================== */

/* the art sits beside the copy, never under it, and never outgrows its column */
.mh .hero .heroGrid{align-items:center}
.mh .heroArt{max-width:400px;width:100%;justify-self:end}
@media (max-width:980px){ .mh .heroArt{display:none} }

/* replace the old globe animations */
.mh .heroArt .mh-arc{transform-origin:200px 160px;animation:mh-orbit-spin 46s linear infinite}
.mh .heroArt .mh-card{transform-box:fill-box;transform-origin:center;animation:mh-float 7s ease-in-out infinite}
.mh .heroArt .mh-chip{transform-box:fill-box;transform-origin:center;animation:mh-float 5.5s ease-in-out infinite}
.mh .heroArt .mh-chip-b{animation-delay:1.8s}
.mh .heroArt .mh-tick{transform-box:fill-box;transform-origin:center;animation:mh-node-pulse 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .mh .heroArt .mh-arc,
  .mh .heroArt .mh-card,
  .mh .heroArt .mh-chip,
  .mh .heroArt .mh-tick{animation:none}
}

/* status badge, text was riding high next to the dot */
.mh .pill{
  padding:4px 11px;line-height:1;
  align-items:center;justify-content:center;
}
.mh .pill em{position:relative;top:0;display:block}
.mh .hres{align-items:center}
.mh .hres .dn{line-height:1.2}

/* theme toggle was too small to read as a control */
.mh .ib{
  width:40px;height:40px;
  border:1px solid var(--mh-border);
  color:var(--mh-text-2);
}
.mh .ib svg{width:20px;height:20px}
.mh .ib:hover{background:var(--mh-surface-2);border-color:var(--mh-brand-line);color:var(--mh-brand)}

/* status pills borrow the muted edge too, currentColor was glowing in dark */
.mh .pill.ok{border-color:var(--mh-ok-line)}
.mh .pill.no{border-color:var(--mh-no-line)}

/* ==========================================================================
   Checkout shell: two columns, progress, summary rail
   Structure comes from html/mod_orderbutton_content.html.twig.
   ========================================================================== */

.mh-order .mh-cols{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}
@media (max-width:1100px){ .mh-order .mh-cols{grid-template-columns:minmax(0,1fr)} }
.mh-order .mh-flow{min-width:0}
.mh-order .mh-rail{position:sticky;top:20px;display:grid;gap:14px}
@media (max-width:1100px){ .mh-order .mh-rail{position:static} }

.mh-order .mh-sum{background:var(--mh-surface);border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow)}
.mh-order .mh-sum-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--mh-border)}
.mh-order .mh-sum-h h2{font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--mh-text-3);font-weight:600;margin:0}
.mh-order .mh-tag{font-size:var(--mh-fs-xs);font-weight:600;background:var(--mh-brand-weak);color:var(--mh-brand);padding:2px 9px;border-radius:999px}
.mh-order .mh-sum-b{padding:16px 18px}
.mh-order .mh-muted{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:0}

.mh-order .mh-li{display:flex;gap:10px;align-items:flex-start}
.mh-order .mh-li + .mh-li{margin-top:12px;padding-top:12px;border-top:1px solid var(--mh-border)}
.mh-order .mh-li-d{min-width:0}
.mh-order .mh-li-t{display:block;font-size:var(--mh-fs-sm);color:var(--mh-text);word-break:break-word}
.mh-order .mh-li-s{display:block;font-size:var(--mh-fs-xs);color:var(--mh-text-3)}
.mh-order .mh-li-a{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;font-size:var(--mh-fs-sm)}

.mh-order .mh-tot{border-top:1px solid var(--mh-border);margin-top:14px;padding-top:12px;display:grid;gap:8px}
.mh-order .mh-tr{display:flex;justify-content:space-between;font-size:var(--mh-fs-sm);color:var(--mh-text-2)}
.mh-order .mh-tr span:last-child{font-variant-numeric:tabular-nums}
.mh-order .mh-tr.mh-big{font-size:var(--mh-fs-md);font-weight:600;color:var(--mh-text);border-top:1px solid var(--mh-border);padding-top:10px}
.mh-order .mh-tr.mh-disc span:last-child{color:var(--mh-ok)}

.mh-order .mh-assure{display:grid;gap:10px;padding:14px 18px}
.mh-order .mh-assure div{display:flex;gap:9px;align-items:flex-start;font-size:var(--mh-fs-sm);color:var(--mh-text-2)}
.mh-order .mh-assure svg{flex:none;margin-top:2px;color:var(--mh-brand)}

/* the flow no longer needs its own card chrome */
.mh-order #orderbutton{background:transparent;border:0;box-shadow:none}
.mh-order #orderbutton > .card-body{padding:0}

/* ==========================================================================
   Client area chrome: header and sidebar
   Applies to layout_default, which is the logged in and order area.
   ========================================================================== */

/* ---- header ---- */
body .navbar{
  background:var(--mh-surface);
  border-bottom:1px solid var(--mh-border);
  padding-block:0;
  min-height:62px;
}
body .navbar > .container-fluid{align-items:center;gap:16px}
body .navbar-brand{display:flex;align-items:center;gap:10px;min-height:0;margin:0;padding:0}
body .navbar-brand img{height:32px}

/* one baseline for every control in the bar */
body .navbar-nav{align-items:center;gap:4px}
body .navbar-nav > li{display:flex;align-items:center}
body .navbar-nav .nav-link{
  display:inline-flex;align-items:center;
  height:38px;padding:0 12px;border-radius:var(--mh-r);
  font-size:var(--mh-fs-base);font-weight:500;color:var(--mh-text-2);
  transition:background-color .13s ease,color .13s ease;
}
body .navbar-nav .nav-link:hover{background:var(--mh-surface-2);color:var(--mh-brand)}
body .navbar-nav .nav-link.active{color:var(--mh-brand)!important;font-weight:600;background:var(--mh-brand-weak)}

/* theme toggle reads as a control, not a stray glyph */
body .navbar .js-theme-toggler{
  width:38px;height:38px;padding:0;border-radius:var(--mh-r);
  border:1px solid var(--mh-border);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--mh-text-2);
}
body .navbar .js-theme-toggler:hover{background:var(--mh-surface-2);border-color:var(--mh-brand-line);color:var(--mh-brand)}
body .navbar .js-theme-toggler .icon{width:19px;height:19px;color:inherit!important}

/* locale picker matches the other controls */
body .navbar .ts-wrapper .ts-control,
body .navbar .form-select.js-locale-selector{
  min-height:38px;height:38px;border-radius:var(--mh-r);
  border:1px solid var(--mh-border);background:var(--mh-surface);
  color:var(--mh-text-2);font-size:var(--mh-fs-sm);
  display:flex;align-items:center;
}

/* account dropdown */
body .client-dropdown .nav-link.dropdown-toggle{
  height:38px;padding:0 10px;border-radius:var(--mh-r);
  border:1px solid var(--mh-border);color:var(--mh-text);font-weight:600;
}
body .client-dropdown .nav-link.dropdown-toggle:hover{background:var(--mh-surface-2);border-color:var(--mh-brand-line)}
body .client-dropdown .dropdown-menu{border-radius:var(--mh-r-lg);border-color:var(--mh-border);padding:6px}
body .client-dropdown .dropdown-item{border-radius:6px;font-size:var(--mh-fs-base)}

/* signup call to action */
body .navbar-nav > .btn,
body .navbar .btn-outline-primary{
  height:38px;padding:0 16px;border-radius:var(--mh-r);
  font-weight:600;font-size:var(--mh-fs-base);
  background:var(--mh-brand);border-color:var(--mh-brand);color:var(--mh-on-brand);
}
body .navbar-nav > .btn:hover,
body .navbar .btn-outline-primary:hover{background:var(--mh-brand-2);border-color:var(--mh-brand-2);color:var(--mh-on-brand)}

/* ---- sidebar ---- */
#sidebarMenu .offcanvas-body{padding:0}
#sidebarMenu .nav{gap:2px}
#sidebarMenu .offcanvas-item{border:0!important;background:transparent}
#sidebarMenu .offcanvas-item:first-child{border-top:0!important}
#sidebarMenu .nav-link{
  display:flex;align-items:center;gap:11px;
  height:40px;padding:0 12px;border-radius:var(--mh-r);
  font-size:var(--mh-fs-base);font-weight:500;color:var(--mh-text-2);
  transition:background-color .13s ease,color .13s ease;
}
#sidebarMenu .nav-link .icon{width:19px;height:19px;color:var(--mh-text-3);transition:color .13s ease}
#sidebarMenu .nav-link:hover{background:var(--mh-surface-2);color:var(--mh-text)}
#sidebarMenu .nav-link:hover .icon{color:var(--mh-brand)}
#sidebarMenu .offcanvas-item.active{background:transparent!important}
#sidebarMenu .offcanvas-item.active > .nav-link,
#sidebarMenu .nav-link.active{
  background:var(--mh-brand-weak);color:var(--mh-brand)!important;font-weight:600;
}
#sidebarMenu .offcanvas-item.active > .nav-link .icon,
#sidebarMenu .nav-link.active .icon{color:var(--mh-brand)}

/* the balance block at the foot of the menu */
#sidebarMenu h4,#sidebarMenu .h4{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--mh-text-3);font-weight:600;margin:20px 0 6px;padding-inline:12px;
}

/* ==========================================================================
   Cart step and coupon field
   ========================================================================== */

.mh-order #checkout-inner .table{
  border:1px solid var(--mh-border);border-radius:var(--mh-r);overflow:hidden;
  --bs-table-bg:transparent;margin-bottom:16px;
}
.mh-order #checkout-inner .table.table-striped > tbody > tr:nth-of-type(odd) > *{--bs-table-accent-bg:transparent;background:transparent}
.mh-order #checkout-inner .table > thead > tr > th{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--mh-text-3);background:var(--mh-surface-2);font-weight:600;
  border-bottom:1px solid var(--mh-border);padding:11px 14px;
}
.mh-order #checkout-inner .table > tbody > tr > td{
  padding:13px 14px;border-color:var(--mh-border);
  font-size:var(--mh-fs-sm);vertical-align:middle;color:var(--mh-text);
}
.mh-order #checkout-inner .table > tbody > tr:last-child > td{border-bottom:0}
.mh-order #checkout-inner .table-bordered{border-collapse:separate;border-spacing:0}

/* totals table on the right of the cart step */
.mh-order #checkout-inner .col-md-6 .table td{border:0;padding:7px 0;font-size:var(--mh-fs-sm)}
.mh-order #checkout-inner .col-md-6 .table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.mh-order #checkout-inner .col-md-6 .table tr:last-child td{
  border-top:1px solid var(--mh-border);padding-top:11px;font-size:var(--mh-fs-md);
}

/* coupon: a proper field and button pair instead of raw inputs */
.mh-order #show-promo-field{
  display:inline-block;font-size:var(--mh-fs-sm);font-weight:600;
  color:var(--mh-brand);text-decoration:none;margin-bottom:8px;
}
.mh-order #show-promo-field:hover{text-decoration:underline}
.mh-order #apply-promo .control-group,
.mh-order #apply-promo .form-controls{margin:0}
.mh-order #apply-promo .input-append{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mh-order #promocode{
  flex:1 1 180px;min-width:0;width:auto;
  height:38px;padding:0 12px;
  font:inherit;font-size:var(--mh-fs-sm);
  color:var(--mh-text);background:var(--mh-surface);
  border:1px solid var(--mh-border-2);border-radius:var(--mh-r);
}
.mh-order #promocode::placeholder{color:var(--mh-text-3)}
.mh-order #promocode:focus{outline:none;border-color:var(--mh-brand);box-shadow:0 0 0 3px var(--mh-brand-weak)}
.mh-order #apply-promo .btn{height:38px;margin:0!important;border-radius:var(--mh-r);padding:0 16px}

/* nameserver fields, revealed by the switch we wire in the template */
.mh-order #nameservers{margin-top:12px}
.mh-order #nameservers input{font-family:var(--mh-mono);font-size:var(--mh-fs-sm)!important}
.mh-order .form-switch .form-check-input{width:34px;height:20px;margin-top:.1rem;cursor:pointer}
.mh-order .form-switch .form-check-input:checked{background-color:var(--mh-brand);border-color:var(--mh-brand)}
.mh-order .form-check-label{font-size:var(--mh-fs-base);color:var(--mh-text-2);cursor:pointer}

/* summary item domain in mono */
.mh-order .mh-mono{font-family:var(--mh-mono)}

/* ==========================================================================
   Header spanning, content spacing, balance card, product picker
   ========================================================================== */

/* header now sits outside .container, so it reaches the viewport edges */
body > header{background:var(--mh-surface);border-bottom:1px solid var(--mh-border)}
body > header .navbar{border-bottom:0;background:transparent}
body > header + .container{padding-top:28px}
@media (max-width:768px){ body > header + .container{padding-top:20px} }

/* account balance reads as a card, not a stray heading */
#sidebarMenu .mh-balance{
  list-style:none;margin-top:18px;padding:14px 16px;
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow);
}
#sidebarMenu .mh-balance h5{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--mh-text-3);font-weight:600;margin:0 0 4px;padding:0;
}
#sidebarMenu .mh-balance h6{
  margin:0;font-size:var(--mh-fs-xl);font-weight:600;letter-spacing:-.02em;
  color:var(--mh-text);font-variant-numeric:tabular-nums;
}
#sidebarMenu .mh-balance h6 strong{font-weight:600}

/* ---- product picker ---- */
.mh-order .mh-cat h4,
.mh-order .mh-cat .mh-cat-h{
  font-size:var(--mh-fs-base);font-weight:600;color:var(--mh-text);
  margin:0 0 2px;letter-spacing:-.01em;
}
.mh-order .mh-cat-gap{margin-top:24px}
.mh-order .mh-cat-d{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-bottom:10px}
.mh-order .mh-cat-d p{margin:0}
.mh-order .mh-cat{margin-bottom:10px}

.mh-order .mh-picker{display:grid;gap:8px}
.mh-order .mh-prod{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;text-decoration:none;
  background:var(--mh-surface);
  border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.mh-order .mh-prod:hover{
  border-color:var(--mh-brand-line);box-shadow:var(--mh-shadow-2);transform:translateY(-1px);
}
.mh-order .mh-prod-ico{
  width:42px;height:42px;flex:none;border-radius:10px;
  background:var(--mh-brand-weak);color:var(--mh-brand);
  display:grid;place-items:center;overflow:hidden;
}
.mh-order .mh-prod-ico img{width:100%;height:100%;object-fit:cover;display:block}
.mh-order .mh-prod-b{min-width:0;flex:1}
.mh-order .mh-prod-t{display:block;font-size:var(--mh-fs-base);font-weight:600;color:var(--mh-text)}
.mh-order .mh-prod-d{display:block;font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-top:1px}
.mh-order .mh-prod-r{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:12px;
  color:var(--mh-text-3);text-align:right;
}
.mh-order .mh-prod-p{display:block;font-size:var(--mh-fs-base);font-weight:600;color:var(--mh-text);font-variant-numeric:tabular-nums}
.mh-order .mh-prod-f{display:block;font-size:var(--mh-fs-xs);color:var(--mh-text-3)}
.mh-order .mh-prod-a{flex:none;transition:transform .14s ease}
.mh-order .mh-prod:hover .mh-prod-a{transform:translateX(2px);color:var(--mh-brand)}

/* change product link in the page head */
.mh-order .mh-swap{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text-2);
  text-decoration:none;padding:6px 12px;border-radius:var(--mh-r);
  border:1px solid var(--mh-border-2);background:var(--mh-surface);
  transition:border-color .13s ease,color .13s ease;
}
.mh-order .mh-swap:hover{border-color:var(--mh-brand-line);color:var(--mh-brand)}

/* ---- product configuration, tidier rhythm ---- */
/*  Higher specificity than the block further down, so the margin has to be
    right here or the description ends up glued to the product name. */
.mh-order #order .accordion-body .well > h3{
  font-size:var(--mh-fs-lg);font-weight:600;margin:0 0 16px;color:var(--mh-text);
}
.mh-order #order h4{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--mh-text-3);font-weight:600;margin:22px 0 10px;
}
.mh-order #order hr{border-color:var(--mh-border);opacity:1;margin:18px 0}
.mh-order #order .row{align-items:center}
.mh-order #config-next{margin-top:18px}

/* ==========================================================================
   Client dashboard
   Information design: the summary reads at a glance, detail sits below.
   ========================================================================== */

.mh-dash{display:grid;gap:16px}

.mh-dash .mh-notice{
  border:1px solid var(--mh-border);border-left:3px solid var(--mh-brand-line);
  background:var(--mh-surface);border-radius:var(--mh-r-lg);padding:16px 20px;
}
.mh-dash .mh-notice :where(h1,h2,h3,h4){font-size:var(--mh-fs-lg);font-weight:600;margin:0 0 4px;color:var(--mh-text)}
.mh-dash .mh-notice p{font-size:var(--mh-fs-sm);color:var(--mh-text-2);margin:0 0 6px}
.mh-dash .mh-notice p:last-child{margin-bottom:0}

.mh-dash .mh-alert{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  background:var(--mh-brand-weak);border:1px solid var(--mh-brand-line);
  border-radius:var(--mh-r);padding:12px 16px;font-size:var(--mh-fs-sm);color:var(--mh-text);
}
.mh-dash .mh-alert a{margin-left:auto;font-weight:600}

/* ---- stat row ---- */
.mh-dash .mh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1000px){ .mh-dash .mh-stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .mh-dash .mh-stats{grid-template-columns:1fr} }
.mh-dash .mh-stat{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);padding:14px 16px;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.mh-dash .mh-stat:hover{border-color:var(--mh-brand-line);box-shadow:var(--mh-shadow-2);transform:translateY(-1px)}
.mh-dash .mh-stat-i{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center}
.mh-dash .mh-stat-b{min-width:0}
.mh-dash .mh-stat-v{
  display:block;font-size:var(--mh-fs-xl);font-weight:600;letter-spacing:-.02em;
  color:var(--mh-text);font-variant-numeric:tabular-nums;line-height:1.15;
}
.mh-dash .mh-stat-l{display:block;font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-top:1px}
.mh-dash .mh-stat.mh-warn .mh-stat-v{color:var(--mh-h4)}

/* ---- cards ---- */
.mh-dash .mh-card{background:var(--mh-surface);border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow);overflow:hidden}
.mh-dash .mh-card-h{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--mh-border);
}
.mh-dash .mh-card-h h2{font-size:var(--mh-fs-base);font-weight:600;margin:0;color:var(--mh-text);letter-spacing:-.01em}
.mh-dash .mh-card-a{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.mh-dash .mh-b{
  display:inline-flex;align-items:center;height:32px;padding:0 13px;
  border-radius:var(--mh-r);font-size:var(--mh-fs-sm);font-weight:600;text-decoration:none;
  color:var(--mh-text-2);background:transparent;border:1px solid var(--mh-border-2);
  transition:border-color .13s ease,color .13s ease,background-color .13s ease;
}
.mh-dash .mh-b:hover{border-color:var(--mh-brand-line);color:var(--mh-brand)}
.mh-dash .mh-b-p{background:var(--mh-brand);border-color:var(--mh-brand);color:var(--mh-on-brand)}
.mh-dash .mh-b-p:hover{background:var(--mh-brand-2);border-color:var(--mh-brand-2);color:var(--mh-on-brand)}

.mh-dash .mh-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:900px){ .mh-dash .mh-two{grid-template-columns:minmax(0,1fr)} }

/* ---- rows ---- */
.mh-dash .mh-rows{display:grid}
.mh-dash .mh-row{
  display:flex;align-items:center;gap:14px;padding:13px 18px;text-decoration:none;
  border-bottom:1px solid var(--mh-border);transition:background-color .13s ease;
}
.mh-dash .mh-row:last-child{border-bottom:0}
.mh-dash .mh-row:hover{background:var(--mh-surface-2)}
.mh-dash .mh-row-b{min-width:0;flex:1}
.mh-dash .mh-row-t{display:block;font-size:var(--mh-fs-base);font-weight:500;color:var(--mh-text);word-break:break-word}
.mh-dash .mh-row-s{display:block;font-size:var(--mh-fs-xs);color:var(--mh-text-3);margin-top:1px}
.mh-dash .mh-row-p{
  flex:none;font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mh-dash .mh-row-per{font-weight:400;color:var(--mh-text-3);font-size:var(--mh-fs-xs)}
.mh-dash .mh-row-st{flex:none}

/* ---- key value blocks ---- */
.mh-dash .mh-kv{display:grid;padding:6px 18px 10px}
.mh-dash .mh-kv > div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--mh-border);font-size:var(--mh-fs-sm)}
.mh-dash .mh-kv > div:last-child{border-bottom:0}
.mh-dash .mh-kv span:first-child{color:var(--mh-text-3)}
.mh-dash .mh-kv span:last-child{color:var(--mh-text);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;min-width:0;word-break:break-word}
.mh-dash .mh-kv .mh-kv-warn{color:var(--mh-h4)}
.mh-dash .mh-kv .mh-kv-mail{font-weight:500;font-variant-numeric:normal}

/* ---- empty state ---- */
.mh-dash .mh-empty{padding:26px 18px;text-align:center;display:grid;gap:12px;justify-items:center}
.mh-dash .mh-empty p{margin:0;font-size:var(--mh-fs-sm);color:var(--mh-text-3)}

/* status badges keep FOSSBilling semantics, just calmer */
.mh-dash .badge{font-size:var(--mh-fs-xs);font-weight:600;padding:.32em .7em;border-radius:999px}

/*  Screen reader only. Bootstrap's .visually-hidden is not in this build, and
    a label that exists only as a shape needs a word behind it. */
.mh-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/*  FAQ, the answer that has not arrived yet.

    The body is fetched when the question is opened, because the only endpoint
    that returns one also counts a view, so the slot has to hold something in
    the meantime. A bare "A carregar…" got both halves of that wrong: it sat
    flush under the question, so it read as a subtitle of the title, and plain
    text does not look like waiting, it looks like a very short answer.

    Three bars in the shape of the paragraph that replaces them fix the second.
    The markup is built by the script that starts the request, so a closed
    question has nothing under it at all, and with JavaScript off there is no
    skeleton waiting for an answer that will never come, only the link. These
    rules are the guard for the one gap that leaves: the request starts on
    pointerdown, a moment before the question is actually open.

    The bars are decorative; the word itself rides along as .mh-sr, because a
    grey rectangle announces nothing. */
.mh .faq .mh-kb-sk{display:none}
.mh .faq details[open] .mh-kb-sk{display:grid;gap:8px;padding:4px 0}
.mh .faq .mh-kb-sk span{
  display:block;height:9px;border-radius:999px;background:var(--mh-border);
  animation:mh-kb-pulse 1.5s ease-in-out infinite;
}
.mh .faq .mh-kb-sk span:nth-child(2){width:92%;animation-delay:.15s}
.mh .faq .mh-kb-sk span:nth-child(3){width:58%;animation-delay:.3s}
@keyframes mh-kb-pulse{0%,100%{opacity:1}50%{opacity:.4}}
/*  Explicit, not left to the blanket .mh * rule above: that one only shortens
    the duration, and an infinite alternating pulse at 0.01ms is a flicker. */
@media (prefers-reduced-motion:reduce){
  .mh .faq .mh-kb-sk span{animation:none;opacity:.7}
}

.mh .faq .a p{margin:0}
.mh .faq .a p + p{margin-top:8px}
.mh .faq .a .lnk{text-decoration:underline}
.mh .sh .act .lnk{font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-brand);background:none;border:0;cursor:pointer;text-decoration:none}
.mh .sh .act .lnk:hover{text-decoration:underline}

/* ==========================================================================
   Shared header
   One component for every page, guest or client. Not scoped to .mh because it
   also renders inside layout_default.
   ========================================================================== */
.mh-hdr{
  background:var(--mh-surface);border-bottom:1px solid var(--mh-border);
  position:sticky;top:0;z-index:1030;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .mh-hdr{
    background:color-mix(in srgb, var(--mh-surface) 78%, transparent);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
  }
}
/*  A barra é mais larga do que o conteúdo das páginas.

    O conteúdo fica nos 1120px porque é a largura em que se lê bem. A barra não
    é para ler, é para caber: com mais um item no menu, os 1120 apertaram o
    "Registar .pt" e o "Criar conta" ao ponto de partirem a meio da palavra.

    flex-wrap passa a nowrap pela mesma razão -- envolver era o que produzia a
    segunda linha. Abaixo dos 900px o menu desaparece para o botão do menu
    móvel, e aí não há nada para envolver. */
.mh-hdr-in{
  max-width:1280px;margin-inline:auto;padding:0 24px;
  display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:nowrap;
}
.mh-hdr-brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--mh-text);font-weight:700;font-size:var(--mh-fs-md);letter-spacing:-.02em;
}
.mh-hdr-brand img{display:block;height:30px;width:auto}
.mh-hdr-mk{
  width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--mh-brand),var(--mh-h2));color:#fff;
}
.mh-hdr-nav{display:flex;align-items:center;gap:2px;margin-left:2px}
.mh-hdr-nav a{
  /*  nowrap: "Registar .pt" e "Iniciar sessão" são duas palavras e partiam
      entre elas, que é o que dava o cabeçalho de duas alturas. */
  display:inline-flex;align-items:center;height:38px;padding:0 10px;white-space:nowrap;
  border-radius:var(--mh-r);text-decoration:none;
  color:var(--mh-text-2);font-weight:500;font-size:var(--mh-fs-base);
  transition:background-color .13s ease,color .13s ease;
}
.mh-hdr-nav a:hover{background:var(--mh-surface-2);color:var(--mh-brand)}
.mh-hdr-rt{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

.mh-hdr-ib{
  width:38px;height:38px;flex:none;border-radius:var(--mh-r);
  border:1px solid var(--mh-border);background:transparent;color:var(--mh-text-2);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:background-color .13s ease,border-color .13s ease,color .13s ease;
}
.mh-hdr-ib:hover{background:var(--mh-surface-2);border-color:var(--mh-brand-line);color:var(--mh-brand)}

.mh-hdr-b{
  display:inline-flex;align-items:center;height:38px;padding:0 15px;white-space:nowrap;
  border-radius:var(--mh-r);text-decoration:none;font-weight:600;font-size:var(--mh-fs-base);
  color:var(--mh-text-2);border:1px solid transparent;
  transition:background-color .13s ease,border-color .13s ease,color .13s ease;
}
.mh-hdr-b:hover{color:var(--mh-brand)}
.mh-hdr-bp{background:var(--mh-brand);color:var(--mh-on-brand);border-color:var(--mh-brand)}
.mh-hdr-bp:hover{background:var(--mh-brand-2);border-color:var(--mh-brand-2);color:var(--mh-on-brand)}

.mh-hdr-accb{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  border-radius:var(--mh-r);border:1px solid var(--mh-border);
  background:transparent;color:var(--mh-text);font-weight:600;font-size:var(--mh-fs-sm);
  cursor:pointer;
}
.mh-hdr-accb:hover{background:var(--mh-surface-2);border-color:var(--mh-brand-line)}
.mh-hdr-acc .dropdown-menu{border-radius:var(--mh-r-lg);border-color:var(--mh-border);padding:6px;min-width:190px}
.mh-hdr-acc .dropdown-item{border-radius:6px;font-size:var(--mh-fs-base);padding:.45rem .7rem}

.mh-hdr .form-select.js-locale-selector,
.mh-hdr .ts-wrapper .ts-control{
  height:38px;min-height:38px;border-radius:var(--mh-r);
  border:1px solid var(--mh-border);background-color:transparent;
  color:var(--mh-text-2);font-size:var(--mh-fs-sm);
  display:flex;align-items:center;width:auto;
}
/*  O menu recolhe aos 1080 e não aos 900.

    Com nowrap, a barra deixou de partir em duas linhas mas passou a
    transbordar na faixa estreita: aos 1024px o menu, o selector de idioma e os
    dois botões não cabem, e aparecia deslocamento lateral. Recolher mais cedo
    é o que fecha a janela onde nada disto assenta -- entre os 900 e os 1080 o
    visitante passa a ter o botão do menu, que já existia e já funcionava. */
@media (max-width:1080px){
  .mh-hdr-nav{display:none}
  .mh-hdr-accb span{display:none}
}

/* the stock navbar is gone, so its wrapper must not paint anything */
body > header{background:transparent;border:0}
body .mh-hdr + .container{padding-top:28px}

/* ==========================================================================
   Client area pages: support, knowledge base, invoices, generic cards, forms
   ========================================================================== */
body .content-block .card{
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow);
}
body .content-block .card-header{
  background:transparent;border-bottom:1px solid var(--mh-border);
  padding:15px 20px;
}
body .content-block .card-header h1,
body .content-block .card-header h2,
body .content-block .card-header h3{
  font-size:var(--mh-fs-lg);font-weight:600;letter-spacing:-.01em;margin:0;color:var(--mh-text);
}
body .content-block .card-header p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:3px 0 0}
body .content-block .card-body{padding:20px}

/* forms follow the design system */
body .content-block .form-control,
body .content-block .form-select,
body .content-block textarea.form-control{
  background:var(--mh-surface);color:var(--mh-text);
  border:1px solid var(--mh-border-2);border-radius:var(--mh-r);
  font-size:var(--mh-fs-base);min-height:40px;padding:.5rem .75rem;
}
body .content-block textarea.form-control{min-height:120px}
body .content-block .form-control:focus,
body .content-block .form-select:focus{
  border-color:var(--mh-brand);box-shadow:0 0 0 3px var(--mh-brand-weak);
}
body .content-block .form-label{
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text-2);margin-bottom:6px;
}
body .content-block .form-text{font-size:var(--mh-fs-sm);color:var(--mh-text-3)}

/* buttons */
body .content-block .btn{
  border-radius:var(--mh-r);font-weight:600;font-size:var(--mh-fs-base);
  min-height:38px;padding:.4rem 1rem;
}
body .content-block .btn-primary{background:var(--mh-brand);border-color:var(--mh-brand);color:var(--mh-on-brand)}
body .content-block .btn-primary:hover{background:var(--mh-brand-2);border-color:var(--mh-brand-2)}
body .content-block .btn-dark,
body .content-block .btn-secondary{
  background:transparent;color:var(--mh-text-2);border:1px solid var(--mh-border-2);
}
body .content-block .btn-dark:hover,
body .content-block .btn-secondary:hover{border-color:var(--mh-brand-line);color:var(--mh-brand);background:transparent}

/* lists used by the knowledge base and ticket lists */
body .content-block .list-group{border-radius:var(--mh-r);overflow:hidden}
body .content-block .list-group-item{
  background:var(--mh-surface);border-color:var(--mh-border);
  padding:13px 16px;font-size:var(--mh-fs-base);color:var(--mh-text);
  transition:background-color .13s ease;
}
body .content-block a.list-group-item:hover{background:var(--mh-surface-2)}

/* tables */
body .content-block .table{--bs-table-bg:transparent;margin-bottom:0}
body .content-block .table > thead > tr > th{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--mh-text-3);background:var(--mh-surface-2);font-weight:600;
  border-bottom:1px solid var(--mh-border);padding:11px 14px;
}
body .content-block .table > tbody > tr > td{
  padding:12px 14px;border-color:var(--mh-border);font-size:var(--mh-fs-sm);vertical-align:middle;
}

/* breadcrumb */
body .content-block .breadcrumb{font-size:var(--mh-fs-sm);margin-bottom:16px}
body .content-block .breadcrumb a{color:var(--mh-text-3);text-decoration:none}
body .content-block .breadcrumb a:hover{color:var(--mh-brand)}

/* auth pages: one primary action, everything else a quiet line */
body .mh-alt{
  text-align:center;margin:14px 0 0;
  font-size:var(--mh-fs-sm);color:var(--mh-text-3);
}
body .mh-alt-tight{margin-top:12px}
body .mh-alt a{color:var(--mh-brand);font-weight:600;text-decoration:none}
body .mh-alt a:hover{text-decoration:underline}
body .page-login .card,
body .page-signup .card{border-radius:var(--mh-r-lg);border-color:var(--mh-border);box-shadow:var(--mh-shadow)}
body .page-login .card-body,
body .page-signup .card-body{padding:24px}

/* ==========================================================================
   Hosting plan cards, rebuilt
   Vertical card: name, description, price, action. No icon, the plan name
   carries the card. Overrides the earlier horizontal row further up.
   ========================================================================== */
.mh .plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;align-items:stretch;
}
.mh .plans[data-n="1"]{grid-template-columns:minmax(0,380px)}

.mh .plan{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);padding:24px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.mh .plan:hover{border-color:var(--mh-brand-line);box-shadow:var(--mh-shadow-2);transform:translateY(-2px)}

/* name and description */
.mh .plan .pi{display:block;min-width:0;flex:1}
.mh .plan .pi h3{
  font-size:var(--mh-fs-xl);font-weight:600;letter-spacing:-.02em;
  color:var(--mh-text);margin:0 0 6px;
}
.mh .plan .pdesc{font-size:var(--mh-fs-sm);color:var(--mh-text-2);margin-bottom:20px}
.mh .plan .pdesc p{margin:0 0 6px;line-height:1.5}
.mh .plan .pdesc p:last-child{margin-bottom:0}
.mh .plan .pdesc ul{margin:0;padding-left:18px;display:grid;gap:6px}
.mh .plan .pdesc li{line-height:1.45}

/* price and action */
.mh .plan .pb{display:block;margin-top:auto;padding-top:4px}
.mh .plan .amt{display:flex;align-items:baseline;gap:5px;margin:0}
.mh .plan .amt b{
  font-size:32px;font-weight:700;letter-spacing:-.03em;
  color:var(--mh-text);font-variant-numeric:tabular-nums;line-height:1.1;
}
.mh .plan .amt span{font-size:var(--mh-fs-base);color:var(--mh-text-3);font-weight:500}
.mh .plan .alt{
  font-size:var(--mh-fs-xs);color:var(--mh-text-3);
  font-variant-numeric:tabular-nums;margin:6px 0 0;
}
.mh .plan .pb .btn{width:100%;margin-top:18px;height:44px;font-size:var(--mh-fs-md)}

@media (max-width:620px){
  .mh .plan .pb{width:auto}
  .mh .plan .pb .btn{width:100%}
}

/* ==========================================================================
   Plan feature lists
   Convention, written by the admin in the product description:
       - 20 GB de armazenamento     -> included, green check
       - ~~CDN~~                    -> not included, grey dash
   Strikethrough works because FOSSBilling enables the GitHub flavoured
   markdown extension, so ~~x~~ becomes <del>. The line through is removed,
   the dash and the grey carry the meaning instead.
   Icons are CSS masks so they inherit token colours and follow dark mode.
   ========================================================================== */
.mh .plan .pdesc ul{
  list-style:none;margin:0;padding:0;display:grid;gap:9px;
}
.mh .plan .pdesc li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.45;
}
.mh .plan .pdesc li::before{
  content:"";flex:none;width:15px;height:15px;margin-top:2px;
  background-color:var(--mh-ok);
  -webkit-mask:var(--mh-tick) center/contain no-repeat;
          mask:var(--mh-tick) center/contain no-repeat;
}

/* a struck through item means the plan does not include it */
.mh .plan .pdesc li:has(del){color:var(--mh-text-3)}
.mh .plan .pdesc li:has(del)::before{
  background-color:var(--mh-text-3);
  -webkit-mask:var(--mh-dash) center/contain no-repeat;
          mask:var(--mh-dash) center/contain no-repeat;
}
.mh .plan .pdesc del{text-decoration:none}

:root{
  --mh-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  --mh-dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* plain paragraphs still work, for descriptions written without a list */
.mh .plan .pdesc p{margin:0 0 6px;line-height:1.5}
.mh .plan .pdesc p:last-child{margin-bottom:0}

/* more air between the plan name and what it offers */
.mh .plan .pi h3{margin-bottom:12px}
.mh .plan .pdesc{margin-top:14px}

/* ==========================================================================
   Header logo sizing, and the product configuration step
   ========================================================================== */

/* the mark was rendering at its intrinsic height and looked lost */
.mh-hdr-brand img{height:38px;width:auto;display:block}
@media (max-width:600px){ .mh-hdr-brand img{height:32px} }

/* Product configuration: the stock markup uses h3/h4 sized for a full page,
   which is far too loud inside an accordion step. */
.mh-order #order .well > h3{
  font-size:var(--mh-fs-lg);font-weight:600;letter-spacing:-.01em;
  color:var(--mh-text);margin:0 0 10px;
}
.mh-order #order h4{
  font-size:var(--mh-fs-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--mh-text-3);font-weight:600;margin:20px 0 10px;
}
.mh-order #order h4 strong{font-weight:600}
.mh-order #order .row > .col-12,
.mh-order #order .row > [class^="col-"]{font-size:var(--mh-fs-base)}
.mh-order #order span{font-size:var(--mh-fs-base)}

/* the product description inside the step, same treatment as the plan cards */
.mh-order #order .well ul{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.mh-order #order .well li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:var(--mh-fs-base);color:var(--mh-text-2);line-height:1.45;
}
.mh-order #order .well li::before{
  content:"";flex:none;width:15px;height:15px;margin-top:3px;
  background-color:var(--mh-ok);
  -webkit-mask:var(--mh-tick) center/contain no-repeat;
          mask:var(--mh-tick) center/contain no-repeat;
}
.mh-order #order .well li:has(del){color:var(--mh-text-3)}
.mh-order #order .well li:has(del)::before{
  background-color:var(--mh-text-3);
  -webkit-mask:var(--mh-dash) center/contain no-repeat;
          mask:var(--mh-dash) center/contain no-repeat;
}
.mh-order #order .well del{text-decoration:none}
.mh-order #order .well p{font-size:var(--mh-fs-base);color:var(--mh-text-2);margin:0 0 8px}

/* ==========================================================================
   Porquê a myHosting -- afirmação e prova

   O que aqui estava era uma grelha de quatro cartões, com o mesmo desenho da
   secção "Online em três passos" que vem imediatamente antes na página. Duas
   grelhas iguais seguidas fazem o olho ler a segunda como repetição da
   primeira. A composição passou a ser assimétrica -- uma frase grande de um
   lado, a prova encostada do outro -- e deixa de poder ser confundida.

   Os números 01-04 são ordem de importância, não decoração: da razão que mais
   separa a myHosting da concorrência para a que menos.
   ========================================================================== */
.mh .mh-why-c{
  display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;
  max-width:1000px;margin:0 auto;
}
@media (max-width:860px){ .mh .mh-why-c{grid-template-columns:1fr;gap:32px} }

.mh .mh-why-eb{
  margin:0 0 10px;font-family:var(--mh-mono);font-size:var(--mh-fs-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mh-brand);
}
.mh .mh-why-say h2{
  margin:0 0 14px;font-size:clamp(26px,3.2vw,34px);line-height:1.16;
  letter-spacing:-.026em;text-wrap:balance;color:var(--mh-text);
}
/*  A palavra destacada usa a cor da marca e não um peso maior: aumentar o peso
    dentro de um título que já é bold não se lê como ênfase, lê-se como erro. */
.mh .mh-why-say h2 em{font-style:normal;color:var(--mh-brand)}
.mh .mh-why-say > p{
  margin:0 0 20px;color:var(--mh-text-2);font-size:var(--mh-fs-base);
  line-height:1.6;max-width:46ch;
}
.mh .mh-why-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--mh-brand);color:#fff;text-decoration:none;
  font-weight:600;font-size:var(--mh-fs-sm);padding:10px 18px;
  border-radius:var(--mh-r);transition:background .16s ease,transform .16s ease;
}
.mh .mh-why-cta:hover{background:var(--mh-brand-2);transform:translateY(-1px)}
.mh .mh-why-cta svg{transition:transform .16s ease}
.mh .mh-why-cta:hover svg{transform:translateX(3px)}

/*  Filetes entre as provas em vez de caixas: quatro caixas seriam outra vez
    uma grelha de cartões, que é precisamente o que se veio evitar. */
.mh .mh-why-proof{display:grid}
.mh .mh-pf{
  display:grid;grid-template-columns:auto 1fr;gap:0 16px;
  padding:16px 0;border-top:1px solid var(--mh-line);
}
.mh .mh-pf:first-child{border-top:0;padding-top:0}
.mh .mh-pf-n{
  font-family:var(--mh-mono);font-size:var(--mh-fs-xs);
  color:var(--mh-brand);padding-top:3px;
}
.mh .mh-pf b{
  display:block;font-size:var(--mh-fs-md);font-weight:600;
  color:var(--mh-text);margin-bottom:2px;letter-spacing:-.005em;
}
.mh .mh-pf span{
  color:var(--mh-text-2);font-size:var(--mh-fs-sm);line-height:1.5;
}
/* ==========================================================================
   Most popular plan
   The badge sits on the card, so the grid rows stay aligned. Which plan gets
   it is decided in the template, never hardcoded here.
   ========================================================================== */
.mh .plans{align-items:stretch}
.mh .plan{position:relative}
.mh .plan.is-pop{
  border-color:var(--mh-brand-line);
  box-shadow:0 0 0 1px var(--mh-brand-line), var(--mh-shadow-2);
}
.mh .plan.is-pop:hover{box-shadow:0 0 0 1px var(--mh-brand-line), var(--mh-shadow-2)}
.mh .plan .pop{
  position:absolute;top:0;right:20px;transform:translateY(-50%);
  display:inline-flex;align-items:center;height:24px;padding:0 11px;
  border-radius:999px;background:var(--mh-brand);color:var(--mh-on-brand);
  font-size:var(--mh-fs-xs);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
}

/* ==========================================================================
   Header, mobile
   The bar never wraps. Below 900px everything but the mark and the burger
   moves into a panel that drops from under the bar.
   ========================================================================== */
.mh-hdr-in{flex-wrap:nowrap;position:relative}
.mh-hdr-menu{display:contents}

.mh-hdr-burger{
  display:none;width:40px;height:40px;flex:none;margin-left:auto;
  border-radius:var(--mh-r);border:1px solid var(--mh-border);
  background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.mh-hdr-burger span{
  display:block;width:17px;height:2px;border-radius:2px;background:var(--mh-text-2);
  transition:transform .18s ease,opacity .18s ease;
}
.mh-hdr-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mh-hdr-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mh-hdr-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .mh-hdr-in{gap:12px;padding:0 16px;min-height:58px}
  .mh-hdr-brand img{height:32px}
  .mh-hdr-burger{display:flex}

  .mh-hdr-menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--mh-surface);border-bottom:1px solid var(--mh-border);
    box-shadow:var(--mh-shadow-2);padding:12px 16px 16px;
  }
  .mh-hdr-menu.is-open{display:block}

  .mh-hdr-nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:0 0 12px}
  .mh-hdr-nav a{height:44px;padding:0 12px;font-size:var(--mh-fs-md)}

  .mh-hdr-rt{margin-left:0;flex-wrap:wrap;gap:10px}
  .mh-hdr-rt .mh-hdr-b{flex:1;justify-content:center;height:42px}
  .mh-hdr .form-select.js-locale-selector,
  .mh-hdr .ts-wrapper{flex:1 1 140px}
  .mh-hdr-accb span{display:inline}
  .mh-hdr-acc{flex:1 1 100%}
  .mh-hdr-accb{width:100%;justify-content:space-between;height:42px}
}

/* ==========================================================================
   /domains
   Centred search over the full extension table.
   ========================================================================== */
.mh-dom-top{padding-bottom:14px}
.mh-dom-lead{text-align:center;max-width:640px;margin:0 auto 26px}
.mh-dom-lead h1{
  font-size:clamp(28px,4.4vw,42px);font-weight:700;letter-spacing:-.03em;
  line-height:1.12;margin:0 0 12px;color:var(--mh-text);
}
.mh-dom-lead p{font-size:var(--mh-fs-md);color:var(--mh-text-2);margin:0}

.mh-dom-srch{max-width:620px;margin:0 auto}
.mh .srch.srch-c{margin-inline:auto}
.mh .hres.hres-c{margin-inline:auto}

.mh-dom-sh{justify-content:center;text-align:center}
.mh-dom .pz .per{color:var(--mh-text-3);font-weight:400}

/*  "Grátis" where a number would otherwise be.

    Set in the affirmative colour the rest of the site already uses for good
    news (--mh-ok, the same token as the "Available" pill), because the whole
    point of the word is that it reads as an offer rather than as a value. It
    sits in cells styled for figures, so it takes the numeric weight back to
    keep the column from looking ragged.

    Scoped to .mh so it cannot leak into the admin panel's own markup. */
.mh .mh-free{color:var(--mh-ok);font-weight:600}
.mh-dom .pz .lnk{
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-brand);
  background:none;border:0;cursor:pointer;padding:0;
}
.mh-dom .pz .lnk:hover{text-decoration:underline}

/* ==========================================================================
   Product dialog
   The picker card carries the title and the price. Everything the admin wrote
   in the description opens here, as markdown, instead of being flattened into
   a truncated line.
   ========================================================================== */
.mh-order .mh-prod-w{display:grid}
.mh-order .mh-prod-b{display:flex;align-items:center}
.mh-order .mh-prod-t{font-size:var(--mh-fs-md)}

.mh-order .mh-prod-more{
  justify-self:start;display:inline-flex;align-items:center;gap:6px;
  margin:6px 0 2px;padding:4px 2px;border:0;background:none;cursor:pointer;
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text-3);
  transition:color .13s ease;
}
.mh-order .mh-prod-more:hover{color:var(--mh-brand)}
.mh-order .mh-prod-more svg{flex:none}

.mh-dlg{position:fixed;inset:0;z-index:1080;display:grid;place-items:center;padding:20px}
.mh-dlg[hidden]{display:none}
.mh-dlg-bd{
  position:absolute;inset:0;background:rgba(10,14,22,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:mh-dlg-in .16s ease;
}
[data-bs-theme="dark"] .mh-dlg-bd{background:rgba(2,4,8,.7)}
body.mh-dlg-on{overflow:hidden}

.mh-dlg-p{
  position:relative;width:min(520px,100%);max-height:min(80vh,640px);
  display:flex;flex-direction:column;
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);box-shadow:0 24px 64px rgba(10,14,22,.28);
  animation:mh-dlg-up .18s cubic-bezier(.2,.7,.3,1);outline:none;
}
[data-bs-theme="dark"] .mh-dlg-p{box-shadow:0 24px 64px rgba(0,0,0,.6)}

@keyframes mh-dlg-in{from{opacity:0}to{opacity:1}}
@keyframes mh-dlg-up{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mh-dlg-bd,.mh-dlg-p{animation:none}
}

.mh-dlg-h{
  display:flex;align-items:center;gap:14px;flex:none;
  padding:18px 20px;border-bottom:1px solid var(--mh-border);
}
.mh-dlg-h h3{
  margin:0;flex:1;min-width:0;font-size:var(--mh-fs-lg);font-weight:600;
  letter-spacing:-.02em;color:var(--mh-text);
}
.mh-dlg-x{
  width:32px;height:32px;flex:none;border-radius:8px;cursor:pointer;
  border:1px solid transparent;background:none;color:var(--mh-text-3);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .13s ease,color .13s ease;
}
.mh-dlg-x:hover{background:var(--mh-surface-2);color:var(--mh-text)}

.mh-dlg-b{
  flex:1;min-height:0;overflow-y:auto;padding:18px 20px;
  font-size:var(--mh-fs-base);color:var(--mh-text-2);line-height:1.6;
}
.mh-dlg-b p{margin:0 0 10px}
.mh-dlg-b p:last-child{margin-bottom:0}
.mh-dlg-b h1,.mh-dlg-b h2,.mh-dlg-b h3,.mh-dlg-b h4{
  font-size:var(--mh-fs-base);font-weight:600;color:var(--mh-text);margin:16px 0 8px;
}
.mh-dlg-b h1:first-child,.mh-dlg-b h2:first-child,
.mh-dlg-b h3:first-child,.mh-dlg-b h4:first-child{margin-top:0}
.mh-dlg-b a{color:var(--mh-brand)}

/* same tick and dash convention as the plan cards */
.mh-dlg-b ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mh-dlg-b li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.mh-dlg-b li::before{
  content:"";flex:none;width:15px;height:15px;margin-top:4px;
  background-color:var(--mh-ok);
  -webkit-mask:var(--mh-tick) center/contain no-repeat;
          mask:var(--mh-tick) center/contain no-repeat;
}
.mh-dlg-b li:has(del){color:var(--mh-text-3)}
.mh-dlg-b li:has(del)::before{
  background-color:var(--mh-text-3);
  -webkit-mask:var(--mh-dash) center/contain no-repeat;
          mask:var(--mh-dash) center/contain no-repeat;
}
.mh-dlg-b del{text-decoration:none}

.mh-dlg-f{
  flex:none;display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-top:1px solid var(--mh-border);background:var(--mh-surface-2);
  border-radius:0 0 var(--mh-r-lg) var(--mh-r-lg);
}
.mh-dlg-f .btn{margin-left:auto}

/* ==========================================================================
   Services: list and single service
   Built on the dashboard card vocabulary, so /order/service and the client
   home read as the same product.
   ========================================================================== */
.mh-svc .mh-svc-ic{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  background:var(--mh-brand-weak);color:var(--mh-brand);
}
.mh-svc .mh-row-a{flex:none;color:var(--mh-text-3);transition:transform .14s ease,color .14s ease}
.mh-svc .mh-row:hover .mh-row-a{transform:translateX(2px);color:var(--mh-brand)}
.mh-svc .mh-card-p{padding:4px 18px 14px}
.mh-svc .mh-card-p:empty{display:none}
.mh-svc .mh-card-p .pagination{margin:0}

/* header strip on the single service page */
.mh-svc-head{display:flex;align-items:center;gap:16px;padding:20px 22px}
.mh-svc .mh-svc-ic-lg{width:48px;height:48px;border-radius:13px}
.mh-svc-head-b{min-width:0;flex:1}
.mh-svc-head-b h1{
  font-size:var(--mh-fs-xl);font-weight:600;letter-spacing:-.02em;
  margin:0;color:var(--mh-text);word-break:break-word;
}
.mh-svc-head-b p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:3px 0 0}
.mh-svc-head-st{flex:none}

.mh-svc-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:900px){ .mh-svc-cols{grid-template-columns:minmax(0,1fr)} }
.mh-svc-main{display:grid;gap:16px;min-width:0}
.mh-svc-side{position:sticky;top:84px}
@media (max-width:900px){ .mh-svc-side{position:static} }

.mh-svc .mh-kv-sub{display:block;font-size:var(--mh-fs-xs);color:var(--mh-text-3);font-weight:400}
.mh-svc-notes{padding:2px 18px 16px;font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.6}
.mh-svc-notes h3{font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text-3);margin:0 0 6px;text-transform:uppercase;letter-spacing:.05em}
.mh-svc-notes p{margin:0 0 8px}
.mh-svc-notes p:last-child{margin-bottom:0}

/* actions: one primary, the rest quiet, cancellation only tinted on hover */
.mh-svc-acts{display:grid;gap:8px;padding:14px 16px 16px}
.mh-svc .mh-act{
  display:flex;align-items:center;gap:10px;width:100%;
  height:42px;padding:0 14px;border-radius:var(--mh-r);cursor:pointer;
  border:1px solid var(--mh-border);background:var(--mh-surface);
  color:var(--mh-text-2);font-size:var(--mh-fs-base);font-weight:600;
  text-align:left;text-decoration:none;
  transition:background-color .13s ease,border-color .13s ease,color .13s ease;
}
.mh-svc .mh-act svg{flex:none;opacity:.85}
.mh-svc .mh-act:hover{background:var(--mh-surface-2);border-color:var(--mh-brand-line);color:var(--mh-brand)}
.mh-svc .mh-act-p{background:var(--mh-brand);border-color:var(--mh-brand);color:var(--mh-on-brand)}
.mh-svc .mh-act-p:hover{background:var(--mh-brand-2);border-color:var(--mh-brand-2);color:var(--mh-on-brand)}
.mh-svc .mh-act-no:hover{border-color:var(--mh-no-line);color:var(--mh-no);background:var(--mh-no-w)}

/* ==========================================================================
   Invoices
   ========================================================================== */
.mh-inv-due{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow);
}
.mh-inv-due-i{
  width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--mh-h4-w);color:var(--mh-h4);
}
.mh-inv-due-b{min-width:0;flex:1;display:block}
.mh-inv-due-b b{
  display:block;font-size:var(--mh-fs-xl);font-weight:700;letter-spacing:-.02em;
  color:var(--mh-text);font-variant-numeric:tabular-nums;line-height:1.15;
}
.mh-inv-due-b span{display:block;font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-top:2px}

.mh-inv .mh-inv-ic{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
}
.mh-inv .mh-inv-ic-no{background:var(--mh-h4-w);color:var(--mh-h4)}
.mh-inv .mh-inv-ic-ok{background:var(--mh-ok-w);color:var(--mh-ok)}
.mh-inv .mh-row-a{flex:none;color:var(--mh-text-3);transition:transform .14s ease,color .14s ease}
.mh-inv .mh-row:hover .mh-row-a{transform:translateX(2px);color:var(--mh-brand)}
.mh-inv .mh-card-p{padding:4px 18px 14px}
.mh-inv .mh-card-p:empty{display:none}
.mh-inv .mh-card-p .pagination{margin:0}

.mh-inv .mh-pay{
  display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;
  background:var(--mh-brand);color:var(--mh-on-brand);
  font-size:var(--mh-fs-xs);font-weight:700;white-space:nowrap;
}
.mh-inv .mh-row:hover .mh-pay{background:var(--mh-brand-2)}

/* segmented tabs, replacing the stock nav-tabs */
.mh-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--mh-r);background:var(--mh-surface-2);border:1px solid var(--mh-border)}
.mh-seg-b{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;
  border:0;border-radius:6px;background:none;cursor:pointer;
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text-3);
  transition:background-color .13s ease,color .13s ease;
}
.mh-seg-b:hover{color:var(--mh-text)}
.mh-seg-b.active{background:var(--mh-surface);color:var(--mh-text);box-shadow:var(--mh-shadow)}
.mh-seg-b em{
  font-style:normal;font-size:11px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:999px;background:var(--mh-border);color:var(--mh-text-2);
}
.mh-seg-b.active em{background:var(--mh-brand-weak);color:var(--mh-brand)}

/* ==========================================================================
   Product picker card
   The card is a div with a stretched overlay link, so the "see more" control
   can live inside it. The overlay sits under the button in z order.
   ========================================================================== */
.mh-order .mh-prod{position:relative}
.mh-order .mh-prod-lk{position:absolute;inset:0;z-index:1;border-radius:inherit}
.mh-order .mh-prod-b{
  position:relative;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;flex:1;
}
.mh-order .mh-prod-t{font-size:var(--mh-fs-md);font-weight:600;color:var(--mh-text)}
.mh-order .mh-prod-r{position:relative;z-index:2;pointer-events:none}

.mh-order .mh-prod-more{
  pointer-events:auto;
  display:inline-flex;align-items:center;gap:6px;
  margin:0;padding:0;border:0;background:none;cursor:pointer;
  font-size:var(--mh-fs-sm);font-weight:500;color:var(--mh-text-3);
  transition:color .13s ease;text-align:left;
}
.mh-order .mh-prod-more:hover{color:var(--mh-brand);text-decoration:underline}
.mh-order .mh-prod-more svg{flex:none}

/* ==========================================================================
   Order page header
   Title on one side, currency and the product swap on the other. Holds
   together whether or not the currency picker renders.
   ========================================================================== */
.mh-order .mh-order-head{
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.mh-order .mh-order-head-t{min-width:0;flex:1 1 320px}
.mh-order .mh-order-head-a{
  margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
@media (max-width:620px){
  .mh-order .mh-order-head-a{margin-left:0;width:100%}
  .mh-order .mh-order-head-a > *{flex:1}
}

/*  The currency partial ships a label wrapping a select, with Bootstrap
    spacing utilities baked in. Neutralise those so it lines up with the
    button beside it. */
/*  The partial ships the label with Bootstrap's .mt-2, whose margin carries
    !important, so undoing it needs the same weight. */
.mh-order .mh-order-head-a label{margin:0!important;display:block}
.mh-order .mh-order-head-a .currency_selector,
.mh-order .mh-order-head-a .ts-wrapper .ts-control{
  margin:0!important;height:38px;min-height:38px;width:auto;
  border-radius:var(--mh-r);border:1px solid var(--mh-border);
  background-color:var(--mh-surface);color:var(--mh-text-2);
  font-size:var(--mh-fs-sm);display:flex;align-items:center;
}
/*  Same height as the currency select beside it, otherwise the two controls
    sit on different baselines. */
.mh-order .mh-swap{margin:0;white-space:nowrap;height:38px;padding:0 14px}

/* ==========================================================================
   Support: ticket list, one ticket, knowledge base article
   ========================================================================== */
.mh-tik .mh-card-s{
  margin:0;padding:0 18px 12px;font-size:var(--mh-fs-sm);color:var(--mh-text-3);
}
.mh-tik .mh-tik-ic{
  width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--mh-brand-weak);color:var(--mh-brand);
}
.mh-tik .mh-tik-ic.is-closed{background:var(--mh-surface-2);color:var(--mh-text-3)}
.mh-tik .mh-row-a{flex:none;color:var(--mh-text-3);transition:transform .14s ease,color .14s ease}
.mh-tik .mh-row:hover .mh-row-a{transform:translateX(2px);color:var(--mh-brand)}
.mh-tik .mh-card-p{padding:4px 18px 14px}
.mh-tik .mh-card-p:empty{display:none}
.mh-tik .mh-card-p .pagination{margin:0}

/* head strip on one ticket */
.mh-tik-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px}
.mh-tik-head-t{min-width:0;flex:1 1 300px}
.mh-tik-head-t h1{
  font-size:var(--mh-fs-xl);font-weight:600;letter-spacing:-.02em;
  margin:0;color:var(--mh-text);word-break:break-word;
}
.mh-tik-head-t p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:4px 0 0}
.mh-tik-head-t p a{color:var(--mh-brand)}
.mh-tik-head-st{flex:none}
.mh-tik-head-a{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.mh-tik .mh-b{height:38px;padding:0 16px;font-size:var(--mh-fs-base)}

/* the conversation */
.mh-thread{display:grid;gap:14px}
.mh-msg{
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow);overflow:hidden;
  max-width:min(760px,100%);
}
/*  A staff reply is indented and tinted, so the two voices are separable
    without relying on the badge alone. */
.mh-msg.is-staff{
  margin-left:auto;border-color:var(--mh-brand-line);background:var(--mh-surface);
}
@media (max-width:700px){ .mh-msg,.mh-msg.is-staff{max-width:100%;margin-left:0} }

.mh-msg-h{
  display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-bottom:1px solid var(--mh-border);background:var(--mh-surface-2);
}
.mh-msg.is-staff .mh-msg-h{background:var(--mh-brand-weak)}
.mh-msg-av{flex:none;display:block;line-height:0}
.mh-msg-av img,.mh-msg-av > div{border-radius:50%;display:block}
.mh-msg-who{min-width:0;flex:1;display:block}
.mh-msg-who b{display:block;font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text)}
.mh-msg-who span{display:block;font-size:var(--mh-fs-xs);color:var(--mh-text-3);margin-top:1px}
.mh-msg-q{
  width:30px;height:30px;flex:none;border-radius:8px;cursor:pointer;
  border:1px solid var(--mh-border);background:var(--mh-surface);color:var(--mh-text-3);
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .13s ease,color .13s ease;
}
.mh-msg-q:hover{border-color:var(--mh-brand-line);color:var(--mh-brand)}
.mh-msg-b{padding:16px;font-size:var(--mh-fs-base);color:var(--mh-text-2);line-height:1.6}
.mh-msg-b > *:first-child{margin-top:0}
.mh-msg-b > *:last-child{margin-bottom:0}

.mh-note{
  padding:13px 16px;border-radius:var(--mh-r);text-align:center;
  background:var(--mh-surface-2);border:1px solid var(--mh-border);
  font-size:var(--mh-fs-sm);color:var(--mh-text-3);
}

.mh-reply{padding:16px 18px 18px;display:grid;gap:12px;justify-items:start}
.mh-reply .btn{min-width:120px}

/* ---- knowledge base article ---- */
.mh-kba-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
@media (max-width:940px){ .mh-kba-cols{grid-template-columns:minmax(0,1fr)} }
.mh-kba-main{display:grid;gap:18px;min-width:0}
.mh-kba-side{position:sticky;top:84px}
@media (max-width:940px){ .mh-kba-side{position:static} }

.mh-kba-head{display:grid;gap:8px;justify-items:start}
.mh-kba-cat{
  display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;
  background:var(--mh-brand-weak);color:var(--mh-brand);text-decoration:none;
  font-size:var(--mh-fs-xs);font-weight:600;
}
.mh-kba-cat:hover{background:var(--mh-brand);color:var(--mh-on-brand)}
.mh-kba-head h1{
  font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.03em;
  line-height:1.15;margin:0;color:var(--mh-text);
}
.mh-kba-meta{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:0}

/*  Shared by the knowledge base article and the news post: same kind of page,
    same prose, so the typography is one rule rather than two that drift. */
.mh-kba-body,
.mh-newsp-body{padding:24px 26px}
@media (max-width:600px){ .mh-kba-body, .mh-newsp-body{padding:18px} }
.mh-kba-body .markdown-body,
.mh-newsp-body.markdown-body{font-size:var(--mh-fs-base);color:var(--mh-text-2);line-height:1.7}
.mh-kba-body .markdown-body > *:first-child,
.mh-newsp-body.markdown-body > *:first-child{margin-top:0}
.mh-kba-body .markdown-body > *:last-child,
.mh-newsp-body.markdown-body > *:last-child{margin-bottom:0}
.mh-kba-body .markdown-body h1,
.mh-kba-body .markdown-body h2,
.mh-kba-body .markdown-body h3,
.mh-newsp-body.markdown-body h1,
.mh-newsp-body.markdown-body h2,
.mh-newsp-body.markdown-body h3{color:var(--mh-text);border-bottom:0;padding-bottom:0}
.mh-kba-body .markdown-body h1,
.mh-newsp-body.markdown-body h1{font-size:var(--mh-fs-xl)}
.mh-kba-body .markdown-body h2,
.mh-newsp-body.markdown-body h2{font-size:var(--mh-fs-lg)}
.mh-kba-body .markdown-body h3,
.mh-newsp-body.markdown-body h3{font-size:var(--mh-fs-md)}
.mh-kba-body .markdown-body a,
.mh-newsp-body.markdown-body a{color:var(--mh-brand)}

/* ==========================================================================
   Noticias: /news e /news/:slug

   The stock module renders a card inside a card inside a card, sets the post
   title at the display size of an h1, and never prints post.image on the list
   at all. On the article it prints the image as a bare <img> with no width, so
   a 1280px thumbnail from an external host ran straight out of the card.

   Everything here is sized down from that: the list is a row per post with a
   fixed 16:9 thumbnail, and the article image is a band that crops instead of
   stretching.
   ========================================================================== */
.mh-news{max-width:820px}
.mh-news-head{display:grid;gap:4px}
.mh-news-head h1{font-size:clamp(22px,2.6vw,27px);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--mh-text)}
.mh-news-head p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:0}

.mh-news-item{
  display:grid;gap:16px;align-items:start;
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);padding:16px;box-shadow:var(--mh-shadow);
}
.mh-news-item.has-img{grid-template-columns:200px 1fr}

.mh-news-thumb{display:block;border-radius:var(--mh-r);overflow:hidden;background:var(--mh-surface-2)}
.mh-news-thumb img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
}

.mh-news-body{min-width:0;display:grid;gap:6px;justify-items:start}
/*  h2 on /news, h3 on the landing, where the section already owns the h2.
    Same card, so the same rule serves both rather than a second style. */
.mh-news-body h2,.mh-news-body h3{font-size:var(--mh-fs-md);font-weight:600;line-height:1.3;margin:0;letter-spacing:-.01em}
.mh-news-body h2 a,.mh-news-body h3 a{color:var(--mh-text);text-decoration:none}
.mh-news-body h2 a:hover,.mh-news-body h3 a:hover{color:var(--mh-brand)}
.mh-news-meta{font-size:var(--mh-fs-xs);color:var(--mh-text-3);margin:0}
.mh-news-sum{font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.6;margin:0}
.mh-news-item .lnk{text-decoration:none}
.mh-news-item .lnk:hover{text-decoration:underline}

.mh-news-pages{display:flex;align-items:center;gap:12px}
.mh-news-pages span{font-size:var(--mh-fs-sm);color:var(--mh-text-3)}
.mh-news-pages .mh-b{height:36px;padding:0 14px}

/*  Below 620 the thumbnail column is narrower than the picture is useful, so
    it goes full width above the text instead of shrinking to a stamp. */
@media (max-width:620px){
  .mh-news-item.has-img{grid-template-columns:1fr}
}

/*  Latest news on the landing.

    Not a third news style: the card, the thumbnail, the meta line and the
    summary are the /news classes above. Only the direction changes. Three of
    them sit side by side inside the 1120px wrap, so a 200px image column would
    leave the text about forty characters wide; the picture goes on top
    instead, and the card picks up the 2px hover lift every other card on the
    landing has.

    The image is whatever the admin attached, including the SVG on the first
    post. It renders fine here; what it must not do is arrive at its intrinsic
    size, so the box is a fixed 16:9 and the picture is cropped into it. */
.mh .mh-nw{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.mh .mh-nw .mh-news-item{
  gap:12px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.mh .mh-nw .mh-news-item.has-img{grid-template-columns:1fr}
.mh .mh-nw .mh-news-item:hover{
  border-color:var(--mh-brand-line);box-shadow:var(--mh-shadow-2);transform:translateY(-2px);
}

.mh-newsp{max-width:820px}
.mh-newsp-main{display:grid;gap:18px;min-width:0}
.mh-newsp-head{display:grid;gap:6px}
.mh-newsp-head h1{
  font-size:clamp(24px,3vw,31px);font-weight:700;letter-spacing:-.03em;
  line-height:1.18;margin:0;color:var(--mh-text);
}
.mh-newsp-meta{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:0}

.mh-newsp-img{
  margin:0;border-radius:var(--mh-r-lg);overflow:hidden;
  border:1px solid var(--mh-border);background:var(--mh-surface-2);
}
/*  aspect-ratio plus object-fit is what keeps a picture of any size inside the
    column: the box is decided here, the image is cropped to fill it. Without
    it the intrinsic width wins and the layout breaks around it. */
.mh-newsp-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.mh-newsp-body{
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow);
}
.mh-newsp-nav{display:flex;gap:10px;flex-wrap:wrap}
.mh-newsp-nav .mh-b{height:38px;padding:0 16px}

.mh-kba-help{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;
  background:var(--mh-surface-2);border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);
}
.mh-kba-help-b{min-width:0;flex:1 1 280px}
.mh-kba-help-b h2{font-size:var(--mh-fs-md);font-weight:600;margin:0;color:var(--mh-text)}
.mh-kba-help-b p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:3px 0 0}
.mh-kba-help .mh-b{white-space:nowrap;height:40px;padding:0 20px}

.mh-kba-nav{display:flex;gap:10px;flex-wrap:wrap}
.mh-kba-nav .mh-b{height:38px;padding:0 16px;white-space:nowrap}
.mh-kba .mh-row-a{flex:none;color:var(--mh-text-3);transition:transform .14s ease,color .14s ease}
.mh-kba .mh-row:hover .mh-row-a{transform:translateX(2px);color:var(--mh-brand)}

/*  Aviso de NIF em falta no checkout.

    Usa o tom de erro e não o de aviso: não é uma sugestão, é a diferença entre
    a encomenda activar ou falhar depois de paga. */
/*  Nota sobre uma limitação do registo, onde antes havia um botão.

    Não é um erro nem um aviso: é a explicação de porque é que aquela acção não
    existe neste TLD. Tom neutro, sem cor de alarme, com a medida de leitura
    curta para se ler de uma vez. */
.mh-nota-reg{
  margin:0;padding:14px 16px;border-radius:var(--mh-r-lg);
  background:var(--mh-surface-2);border:1px solid var(--mh-border);
  color:var(--mh-text-2);font-size:var(--mh-fs-sm);line-height:1.6;max-width:68ch;
}

/*  O valor líquido, ao lado do número, na página do serviço. */
.mh-liq{color:var(--mh-text-3);font-size:var(--mh-fs-xs);font-weight:400;margin-left:4px}

/*  Aviso genérico com uma acção. O do NIF no checkout tinha isto embutido;
    passa a ser partilhado, porque o aviso de e-mail por confirmar é a mesma
    coisa com outro texto -- e lá o botão vinha colado à frase, porque a .row
    do FOSSBilling não lhe dava margem nenhuma. */
.mh-aviso{
  border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);
  background:var(--mh-surface);padding:16px 18px;margin:0 0 20px;
}
.mh-aviso p{margin:0 0 14px;font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.55;max-width:70ch}
.mh-aviso .mh-b{height:38px;padding:0 18px}
.mh-aviso-no{background:var(--mh-no-w);border-color:var(--mh-no-line)}
.mh-aviso-no p{color:var(--mh-no)}

/* ==========================================================================
   CKEditor 5 em tema escuro

   O editor traz a sua própria folha de estilo, toda construída sobre variáveis
   --ck-*, e por omissão é claro. Num site em escuro aparecia um retângulo
   branco no meio da página. Aqui só se redefinem essas variáveis dentro do
   tema escuro: nenhuma regra do CKEditor é reescrita, portanto uma
   actualização dele não desfaz isto.
   ========================================================================== */
[data-bs-theme="dark"] .ck.ck-editor,
[data-bs-theme="dark"] .ck.ck-body,
[data-bs-theme="dark"] .ck-body-wrapper{
  --ck-color-base-background:var(--mh-surface);
  --ck-color-base-foreground:var(--mh-surface-2);
  --ck-color-base-border:var(--mh-border);
  --ck-color-base-text:var(--mh-text);
  --ck-color-base-active:var(--mh-brand);
  --ck-color-base-active-focus:var(--mh-brand-2);
  --ck-color-text:var(--mh-text);
  --ck-color-shadow-drop:rgba(0,0,0,.45);
  --ck-color-shadow-inner:rgba(0,0,0,.25);

  --ck-color-toolbar-background:var(--mh-surface-2);
  --ck-color-toolbar-border:var(--mh-border);

  --ck-color-button-default-background:transparent;
  --ck-color-button-default-hover-background:var(--mh-surface);
  --ck-color-button-default-active-background:var(--mh-surface);
  --ck-color-button-default-disabled-background:transparent;
  --ck-color-button-on-background:var(--mh-brand-weak);
  --ck-color-button-on-hover-background:var(--mh-brand-weak);
  --ck-color-button-on-active-background:var(--mh-brand-weak);
  --ck-color-button-on-color:var(--mh-brand);
  --ck-color-button-on-disabled-background:transparent;

  --ck-color-panel-background:var(--mh-surface);
  --ck-color-panel-border:var(--mh-border);
  --ck-color-dropdown-panel-background:var(--mh-surface);
  --ck-color-dropdown-panel-border:var(--mh-border);

  --ck-color-input-background:var(--mh-surface);
  --ck-color-input-border:var(--mh-border-2);
  --ck-color-input-text:var(--mh-text);
  --ck-color-input-disabled-background:var(--mh-surface-2);
  --ck-color-input-disabled-text:var(--mh-text-3);

  --ck-color-list-background:var(--mh-surface);
  --ck-color-list-button-hover-background:var(--mh-surface-2);
  --ck-color-list-button-on-background:var(--mh-brand-weak);
  --ck-color-list-button-on-text:var(--mh-brand);

  --ck-color-tooltip-background:var(--mh-text);
  --ck-color-tooltip-text:var(--mh-bg);

  --ck-color-split-button-hover-background:var(--mh-surface);
  --ck-color-split-button-hover-border:var(--mh-border);

  --ck-color-labeled-field-label-background:var(--mh-surface);
  --ck-color-editable-blur-selection:var(--mh-surface-2);
}

/*  A área de escrita não usa variável para o fundo, e o texto colado herda a
    cor do documento de origem. Estes dois são os únicos sítios onde é preciso
    escrever uma regra em vez de redefinir uma variável. */
[data-bs-theme="dark"] .ck-editor__editable,
[data-bs-theme="dark"] .ck-editor__editable_inline{
  background:var(--mh-surface);color:var(--mh-text)
}
[data-bs-theme="dark"] .ck-editor__editable.ck-focused{border-color:var(--mh-brand)}
[data-bs-theme="dark"] .ck-placeholder::before{color:var(--mh-text-3)}
/*  O contentor do editor no tema escuro tem de ter borda visível: sem ela o
    editor e o modal ficam da mesma cor e a caixa desaparece. */
[data-bs-theme="dark"] .ck.ck-editor__main > .ck-editor__editable{border:1px solid var(--mh-border)}

.mh-nif-aviso{
  background:var(--mh-no-w);border:1px solid var(--mh-no-line);
  border-radius:var(--mh-r-lg);padding:14px 16px;margin:0 0 16px;
}
.mh-nif-aviso strong{display:block;color:var(--mh-no);font-size:var(--mh-fs-md)}
.mh-nif-aviso p{margin:4px 0 12px;font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.55;max-width:70ch}
.mh-nif-aviso .mh-b{height:36px;padding:0 16px}

/* ==========================================================================
   Bloco de contacto (/support e /support/kb)

   Era uma faixa da largura da página com um número de telefone e dois terços
   de espaço vazio. Passou a ter conteúdo que justifique a largura: telefone,
   e-mail e -- quando faz sentido -- a via dos pedidos de apoio. A /support
   esconde a terceira, porque essa página já é a área de pedidos e tem o botão
   de novo pedido logo a seguir.

   As colunas separam-se por filetes e não por espaço, para o conjunto se ler
   como um bloco só. Abaixo de 720px empilham-se e os filetes passam a
   horizontais: a mesma ideia, outra direcção.
   ========================================================================== */
.mh-dash .mh-ct,
.mh-ct{
  background:var(--mh-surface);border:1px solid var(--mh-line);
  border-radius:var(--mh-r-lg);margin-bottom:16px;overflow:hidden;
}
.mh-ct-g{display:grid;grid-template-columns:1.25fr 1fr 1fr}
/*  Com duas colunas em vez de três, a primeira deixa de precisar de tanto peso
    relativo. Onde o :has() não for suportado fica a grelha de três com duas
    células, que é degradação aceitável e não partida. */
.mh-ct-g:has(.mh-ct-c:nth-child(2):last-child){grid-template-columns:1.1fr 1fr}
.mh-ct-c{
  padding:16px 18px;border-left:1px solid var(--mh-line);
  display:flex;gap:12px;align-items:flex-start;min-width:0;
}
.mh-ct-c:first-child{border-left:0}
.mh-ct-ic{
  flex:none;display:grid;place-items:center;width:32px;height:32px;
  border-radius:9px;background:var(--mh-surface-2);color:var(--mh-brand);
}
.mh-ct-hi .mh-ct-ic{background:var(--mh-brand-weak)}
.mh-ct-b{min-width:0}
.mh-ct-l{
  margin:0;font-size:var(--mh-fs-xs);color:var(--mh-text-3);
  text-transform:uppercase;letter-spacing:.07em;font-weight:600;
}
.mh-ct-v{
  margin:3px 0 0;font-size:var(--mh-fs-md);font-weight:600;
  letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere;
}
/*  O telefone é o que se quer que seja marcado, por isso é o único que cresce.
    tabular-nums para os algarismos não dançarem. */
.mh-ct-hi .mh-ct-v{
  font-size:var(--mh-fs-xl);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.mh-ct-v a{color:var(--mh-text);text-decoration:none}
.mh-ct-v a:hover,
.mh-ct-v a:focus-visible{color:var(--mh-brand);text-decoration:underline}
.mh-ct-s{margin:3px 0 0;font-size:var(--mh-fs-xs);color:var(--mh-text-3);line-height:1.45}
/*  A nota da tarifa acompanha o número por hábito do sector, mas não compete
    com ele: barra própria, pequena, em texto terciário. */
.mh-ct-f{
  margin:0;padding:9px 18px;background:var(--mh-surface-2);
  border-top:1px solid var(--mh-line);
  font-size:var(--mh-fs-xs);color:var(--mh-text-3);line-height:1.5;
}
@media (max-width:720px){
  .mh-ct-g,
  .mh-ct-g:has(.mh-ct-c:nth-child(2):last-child){grid-template-columns:1fr}
  .mh-ct-c{border-left:0;border-top:1px solid var(--mh-line)}
  .mh-ct-c:first-child{border-top:0}
}

/* ==========================================================================
   Status badges
   Bootstrap ships these as solid blocks of colour. bg-warning in particular is
   a full strength amber that shouts on a light page and glows on a dark one.
   Here every state becomes a tinted pill: soft background, saturated text,
   hairline border. Same shape in both themes, only the tokens swap.

   The light mode foregrounds are darker than the matching --mh-* hue because
   badge text is 12px and the plain hue does not reach 4.5:1 on its own tint.
   Measured in light: amber 4.68, green 4.59, red 4.63, blue 4.61, teal 4.51.
   Dark mode clears 6:1 on all six with the hue as is.
   ========================================================================== */
:root{
  --mh-badge-ok:#107C55;   --mh-badge-ok-bg:#E3F5EC;
  --mh-badge-warn:#9C5E08; --mh-badge-warn-bg:#FCF1E0;
  --mh-badge-no:#C4372C;   --mh-badge-no-bg:#FCEBE9;
  --mh-badge-mute:#5B6478; --mh-badge-mute-bg:#EFF3F8;
  --mh-badge-brand:#186DC0; --mh-badge-brand-bg:#E6F1FE;
  --mh-badge-teal:#0C7B75;  --mh-badge-teal-bg:#E0F5F3;
}
[data-bs-theme="dark"]{
  --mh-badge-ok:#37CE93;   --mh-badge-ok-bg:#08231A;
  --mh-badge-warn:#F0A93C; --mh-badge-warn-bg:#241803;
  --mh-badge-no:#FF7C70;   --mh-badge-no-bg:#25100E;
  --mh-badge-mute:#A6B0C2; --mh-badge-mute-bg:#171C25;
  --mh-badge-brand:#4FA3FF; --mh-badge-brand-bg:#0E1F33;
  --mh-badge-teal:#2FC7BC;  --mh-badge-teal-bg:#08241F;
}

body .badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--mh-fs-xs);font-weight:600;line-height:1;
  padding:.42em .75em;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;
}

body .badge.bg-success,   body .badge.text-bg-success{
  background:var(--mh-badge-ok-bg)!important;color:var(--mh-badge-ok)!important;
  border-color:color-mix(in srgb, var(--mh-badge-ok) 22%, transparent);
}
body .badge.bg-warning,   body .badge.text-bg-warning{
  background:var(--mh-badge-warn-bg)!important;color:var(--mh-badge-warn)!important;
  border-color:color-mix(in srgb, var(--mh-badge-warn) 22%, transparent);
}
body .badge.bg-danger,    body .badge.text-bg-danger{
  background:var(--mh-badge-no-bg)!important;color:var(--mh-badge-no)!important;
  border-color:color-mix(in srgb, var(--mh-badge-no) 22%, transparent);
}
body .badge.bg-secondary, body .badge.text-bg-secondary,
body .badge.bg-light,     body .badge.text-bg-light{
  background:var(--mh-badge-mute-bg)!important;color:var(--mh-badge-mute)!important;
  border-color:var(--mh-border);
}
body .badge.bg-primary,   body .badge.text-bg-primary{
  background:var(--mh-badge-brand-bg)!important;color:var(--mh-badge-brand)!important;
  border-color:color-mix(in srgb, var(--mh-badge-brand) 22%, transparent);
}
body .badge.bg-info,      body .badge.text-bg-info{
  background:var(--mh-badge-teal-bg)!important;color:var(--mh-badge-teal)!important;
  border-color:color-mix(in srgb, var(--mh-badge-teal) 22%, transparent);
}

/*  The item counter in the order step header is a count, not a state, so it
    stays solid. It sits on an id selector, which outranks the block above, so
    its text colour has to be set here or it inherits the tinted one. */
.mh-order #orderManager .badge.bg-info{
  background:var(--mh-brand)!important;color:var(--mh-on-brand)!important;
  border-color:var(--mh-brand);
}

/*  color-mix is recent enough to be worth a fallback: without it the border
    lands on the initial value and the pill loses its edge. */
@supports not (border-color: color-mix(in srgb, red 20%, transparent)){
  body .badge{border-color:var(--mh-border)}
}

/* ==========================================================================
   Price table, tax switch
   Prices are stored net. The switch only reformats what is already rendered,
   using the rate the template resolved, so the two can never disagree.
   ========================================================================== */
.mh .chips .chip-l{
  display:inline-flex;align-items:center;height:28px;padding:0 4px;
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-brand);
  text-decoration:none;white-space:nowrap;
}
.mh .chips .chip-l:hover{text-decoration:underline}

.mh-dom-sh{align-items:flex-end}
.mh-dom-sh .act{margin-left:auto}
@media (max-width:700px){
  .mh-dom-sh{flex-direction:column;align-items:center;text-align:center}
  .mh-dom-sh .act{margin-left:0}
}
/*  Sits under the table it describes, centred, quiet but readable.
    Needs to outrank ".mh p{margin:0}", which is why the selector carries the
    section and the element name rather than just the class. */
.mh-dom .sec p.mh-dom-hint{
  max-width:620px;margin:28px auto 0;text-align:center;
  font-size:var(--mh-fs-sm);color:var(--mh-text-3);line-height:1.6;
}

/* ==========================================================================
   Checkout, tax lines
   ========================================================================== */
.mh-order .mh-tr.mh-tr-note span:last-child{
  color:var(--mh-text-3);font-weight:500;font-variant-numeric:normal;
}
.mh-order .mh-sum-note{
  margin:10px 0 0;font-size:var(--mh-fs-xs);color:var(--mh-text-3);line-height:1.5;
}

/* the product swap now lives inside step 1, above the configuration form */
.mh-order .mh-swap-row{
  display:flex;margin:0 0 16px;padding:0 0 14px;
  border-bottom:1px solid var(--mh-border);
}

/* ==========================================================================
   Landing, second pass
   Three sections that used to look alike now read as three different things:
   a quiet strip, three numbered steps, and a divided grid. No section repeats
   another's shape, and none of them carries a paragraph it does not need.
   ========================================================================== */

/* ---- included with every domain ----
   One band, not four pills. The pills read as clickable filters and their
   neutral grey said nothing about inclusion; the tick does, and it is the same
   tick the plan feature lists use, so the page keeps one vocabulary for
   "you get this". */
.mh .mh-inc-band{
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  padding:26px 30px;border-radius:var(--mh-r-lg);
  border:1px solid var(--mh-border);background:var(--mh-surface);
}
.mh .mh-inc-t{min-width:0;flex:0 1 260px}
.mh .mh-inc-t h2{font-size:var(--mh-fs-lg);margin:0}
.mh .mh-inc-t p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin-top:4px}

.mh .mh-inc-list{
  list-style:none;margin:0;padding:0;flex:1 1 380px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 32px;
}
.mh .mh-inc-list li{
  display:flex;align-items:center;gap:11px;
  font-size:var(--mh-fs-base);font-weight:500;color:var(--mh-text);
}
.mh .mh-inc-list li::before{
  content:"";flex:none;width:17px;height:17px;
  background-color:var(--mh-ok);
  -webkit-mask:var(--mh-tick) center/contain no-repeat;
          mask:var(--mh-tick) center/contain no-repeat;
}
@media (max-width:860px){
  .mh .mh-inc-band{gap:24px;padding:22px}
  .mh .mh-inc-list{flex-basis:100%}
}
@media (max-width:520px){
  .mh .mh-inc-list{grid-template-columns:1fr}
}

/* ---- online in three steps ---- */
.mh .mh-steps-h{justify-content:center;text-align:center;margin-bottom:30px}
.mh .mh-steps-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--mh-border);border-radius:var(--mh-r-lg);
  overflow:hidden;background:var(--mh-surface);
}
@media (max-width:760px){ .mh .mh-steps-list{grid-template-columns:1fr} }

.mh .mh-steps-list li{
  display:block;padding:26px 24px;
  border-right:1px solid var(--mh-border);
}
.mh .mh-steps-list li:last-child{border-right:0}
@media (max-width:760px){
  .mh .mh-steps-list li{border-right:0;border-bottom:1px solid var(--mh-border)}
  .mh .mh-steps-list li:last-child{border-bottom:0}
}

/*  A numeral, not another icon tile. This is the one place on the page that
    uses figures, which is what keeps it from reading like the rows around it.

    --mh-brand, not --mh-brand-line: the border tone exists so accents do not
    glow as persistent edges in dark mode, but this is 32px text and the muted
    tone left it at 2.5:1, under the 3:1 large text floor. */
.mh .mh-steps-n{
  display:block;font-size:32px;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--mh-brand);margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.mh .mh-steps-list b{
  display:block;font-size:var(--mh-fs-md);font-weight:600;
  color:var(--mh-text);margin-bottom:4px;
}
.mh .mh-steps-list span:not(.mh-steps-n){
  display:block;font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.55;
}

/* ==========================================================================
   Authentication pages
   Login, signup and password reset share one shell, so they cannot drift.
   One primary action per page: the submit button. Everything else is a quiet
   link, because two competing full width buttons make neither one the answer.
   ========================================================================== */
.mh-auth{
  min-height:calc(100vh - 68px);
  display:flex;align-items:center;justify-content:center;
  padding:48px 20px 64px;
}
@media (max-width:600px){ .mh-auth{padding:28px 16px 40px} }

.mh-auth-box{width:100%;max-width:420px}
.mh-auth-box.is-wide{max-width:580px}

.mh-auth-brand{display:flex;justify-content:center;margin-bottom:22px}
.mh-auth-brand img{display:block;width:auto}

.mh-auth-card{
  background:var(--mh-surface);border:1px solid var(--mh-border);
  border-radius:var(--mh-r-lg);box-shadow:var(--mh-shadow-2);overflow:hidden;
}

.mh-auth-h{padding:26px 28px 0;text-align:center}
.mh-auth-h h1{
  font-size:var(--mh-fs-xl);font-weight:600;letter-spacing:-.02em;
  margin:0;color:var(--mh-text);
}
.mh-auth-h p{font-size:var(--mh-fs-sm);color:var(--mh-text-3);margin:6px 0 0}
.mh-auth-b{padding:24px 28px 28px}
@media (max-width:600px){
  .mh-auth-h{padding:22px 20px 0}
  .mh-auth-b{padding:20px}
}

/* the quiet line under the card */
.mh .mh-auth-f{
  margin:18px 0 0;text-align:center;
  font-size:var(--mh-fs-sm);color:var(--mh-text-3);
}
.mh .mh-auth-f a{color:var(--mh-brand);font-weight:600;text-decoration:none}
.mh .mh-auth-f a:hover{text-decoration:underline}

/* ---- form ---- */
.mh-form{display:grid;gap:16px}
.mh-form .mh-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:520px){ .mh-form .mh-two{grid-template-columns:1fr} }

.mh-field{display:grid;gap:6px;min-width:0}
.mh-field > label{
  display:flex;align-items:baseline;gap:10px;
  font-size:var(--mh-fs-sm);font-weight:600;color:var(--mh-text-2);
}
.mh-field-aside{
  margin-left:auto;font-size:var(--mh-fs-xs);font-weight:500;
  color:var(--mh-brand);text-decoration:none;white-space:nowrap;
}
.mh-field-aside:hover{text-decoration:underline}

.mh-field input,
.mh-field select{
  width:100%;height:42px;padding:0 13px;
  border:1px solid var(--mh-border-2);border-radius:var(--mh-r);
  background:var(--mh-surface);color:var(--mh-text);
  font-family:inherit;font-size:var(--mh-fs-base);
  transition:border-color .13s ease,box-shadow .13s ease;
}
.mh-field select{padding-right:34px;cursor:pointer}
.mh-field input::placeholder{color:var(--mh-text-3)}
.mh-field input:hover,
.mh-field select:hover{border-color:var(--mh-text-3)}
.mh-field input:focus,
.mh-field select:focus{
  outline:none;border-color:var(--mh-brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--mh-brand) 20%, transparent);
}
/*  Focus rings keep the full accent in dark mode. Section 2 forbids the accent
    only as a persistent border, and a ring is not persistent. */
/*  :user-invalid, e nao :invalid:not(:placeholder-shown).

    A segunda forma so distingue "vazio" de "preenchido" quando o campo TEM
    placeholder. Os campos do /signup e do /login nao tem -- a etiqueta esta por
    cima -- por isso :placeholder-shown nunca acertava, e um campo obrigatorio
    vazio aparecia com a borda vermelha logo ao carregar a pagina: o formulario
    de criar conta abria com quatro campos marcados como errados antes de
    alguem lhe tocar. E o mesmo problema que o bloco .mh-dmg mais abaixo ja
    tinha resolvido, so que ali estava resolvido apenas para aquela pagina.

    :user-invalid so acende depois de a pessoa mexer no campo ou submeter.
    Onde nao existir nao aparece de todo, que e a falha certa das duas. */
.mh-field input:invalid:user-invalid{border-color:var(--mh-no-line)}

/* ---- autofill (aplica-se a todo o site, nao so a estas paginas) ----

   O Chrome pinta um campo preenchido automaticamente com um fundo proprio e
   ignora `background-color` -- a declaracao dele vem do agente de utilizador e
   nao ha especificidade que a vaca. Uma sombra interior da altura do campo e
   a unica coisa que a tapa, e `-webkit-text-fill-color` a unica que recolore
   o texto.

   `:autofill` e a forma padrao e `:-webkit-autofill` a que ainda e precisa nas
   versoes mais antigas. Ficam em blocos SEPARADOS de proposito: um seletor que
   o browser nao reconhece invalida a regra inteira, por isso juntos perdia-se
   tambem o que ele reconhece. */
.mh-field input:-webkit-autofill,
.mh-field select:-webkit-autofill,
.form-control:-webkit-autofill,
.form-select:-webkit-autofill,
.mh .srch input:-webkit-autofill{
  -webkit-box-shadow:inset 0 0 0 100px var(--mh-surface);
  box-shadow:inset 0 0 0 100px var(--mh-surface);
  -webkit-text-fill-color:var(--mh-text);
  caret-color:var(--mh-text);
  border-color:var(--mh-border-2);
}
.mh-field input:autofill,
.mh-field select:autofill,
.form-control:autofill,
.form-select:autofill,
.mh .srch input:autofill{
  box-shadow:inset 0 0 0 100px var(--mh-surface);
  -webkit-text-fill-color:var(--mh-text);
  caret-color:var(--mh-text);
  border-color:var(--mh-border-2);
}

/*  Em foco a sombra interior tem de vir acompanhada do anel, senao a regra de
    foco substitui-a e o fundo do Chrome volta a aparecer. */
.mh-field input:-webkit-autofill:focus,
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill:focus{
  -webkit-box-shadow:inset 0 0 0 100px var(--mh-surface),
                     0 0 0 3px color-mix(in srgb, var(--mh-brand) 20%, transparent);
  box-shadow:inset 0 0 0 100px var(--mh-surface),
             0 0 0 3px color-mix(in srgb, var(--mh-brand) 20%, transparent);
  border-color:var(--mh-brand);
}
.mh-field input:autofill:focus,
.form-control:autofill:focus,
.form-select:autofill:focus{
  box-shadow:inset 0 0 0 100px var(--mh-surface),
             0 0 0 3px color-mix(in srgb, var(--mh-brand) 20%, transparent);
  border-color:var(--mh-brand);
}

/*  Enquanto o Chrome mostra a lista e pre-visualiza um valor, o campo conta
    como vazio para a validacao mas ja nao mostra o placeholder, portanto a
    regra do :invalid acima acendia a borda vermelha por baixo da lista aberta.
    Precisa de igualar a especificidade dela (0,3,1) para a vencer. */
.mh-field input:invalid:-webkit-autofill{border-color:var(--mh-border-2)}
.mh-field input:invalid:autofill{border-color:var(--mh-border-2)}

.mh-hint{display:block;font-size:var(--mh-fs-xs);color:var(--mh-text-3);line-height:1.5}
.mh-hint-center{text-align:center;margin:0}

.mh-check{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.5;
}
.mh-check input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--mh-brand)}
.mh-check a{color:var(--mh-brand)}

.mh-form .mh-submit{
  width:100%;height:44px;font-size:var(--mh-fs-md);font-weight:600;margin-top:2px;
}

/*  The recaptcha macro and the phone input plugin bring their own markup, so
    give them room without restyling what they render. */
.mh-form .g-recaptcha,
.mh-form .iti{display:block}
.mh-form .iti{width:100%}
.mh-form .iti input{padding-left:52px}

/* ==========================================================================
   Domain search, third state
   The registry being unreachable is not the same as the name being taken.
   Amber, not red: nothing is wrong with the domain, we just could not ask.
   ========================================================================== */
/*  Follows the same convention as ok and no: the pill keeps the surface
    background and takes its colour from the state, with a muted border so the
    accent does not glow as a persistent edge in dark mode. */
.mh .hres[data-s="err"]{background:var(--mh-h4-w);border-color:var(--mh-border-2)}
.mh .pill.err{color:var(--mh-h4);border-color:var(--mh-border-2)}

.mh .mh-srch-note{
  margin:10px 0 0;font-size:var(--mh-fs-sm);color:var(--mh-text-3);line-height:1.5;
}
.mh .srch-c + .hres-c + .mh-srch-note,
.mh-dom .mh-srch-note{text-align:center}

/* ==========================================================================
   Domain management panel
   The six tabs inside /order/service/manage/:id. Built on the cards, the
   segmented tabs and the field component that already exist: what is new here
   is only what the panel genuinely needed and nothing else had.
   Scoped under .mh-dash because the partial renders inside the service page.
   ========================================================================== */

/*  A lista de países do intl-tel-input é absoluta dentro do campo, e o campo é
    o último do formulário de WHOIS. O overflow:hidden que os cartões usam para
    cortar os cantos cortava-lhe também o menu, na borda de baixo do cartão.
    Neste cartão nenhum filho tem fundo a tocar nos cantos, portanto deixar
    transbordar não custa nada.

    O min-width:0 vem com ele: o cartão é um item de grelha e, sem overflow a
    cortar, volta a ter mínimo automático -- a tira dos separadores deixava de
    rolar e passava a esticar a coluna, o que dava barra horizontal na página
    inteira aos 375px. */
.mh-dash .mh-dmg{overflow:visible;min-width:0}

/* ---- header: title, the quiet line, the action ---- */
.mh-dash .mh-dmg-h{padding:16px 18px}
.mh-dmg-t{min-width:0;flex:1}
.mh-dash .mh-dmg-t h2{font-size:var(--mh-fs-lg);line-height:1.25;word-break:break-word}
/*  O IBM Plex Mono só é carregado em 400 e 500, portanto 600 aqui era negrito
    sintético do browser. 500 é um peso que a fonte tem mesmo. */
.mh-dmg-t h2 .mh-mono,
.mh-dmg .mh-kv .mh-mono{font-weight:500}
.mh-dmg-t p{margin:3px 0 0;font-size:var(--mh-fs-sm);color:var(--mh-text-3)}

/*  .mh-b nasceu como <a> na barra dos cartões. Aqui há botões com ícone, que
    precisam do espaço entre o glifo e a palavra e da fonte que o <button> não
    herda sozinho em todos os motores. */
.mh-dash .mh-dmg .mh-b{gap:8px}
.mh-dash .mh-dmg button.mh-b{font-family:inherit;cursor:pointer}
.mh-dash .mh-dmg .mh-b svg{flex:none;opacity:.85}

/*  Destrancar e desligar a privacidade desfazem-se mal, por isso ficam calmos
    até lhes chegar o rato, como o pedido de cancelamento na coluna ao lado. */
.mh-dash .mh-b-no:hover{border-color:var(--mh-no-line);color:var(--mh-no);background:var(--mh-no-w)}

/* ---- tab strip ----
   Seis separadores não cabem em 375px e não devem encolher, portanto é a tira
   que rola e não a página. Flex, e não block, porque num contentor com
   overflow só o flex conta o padding do lado direito como espaço a rolar. */
.mh-dmg-tabs{
  display:flex;padding:12px 18px;overflow-x:auto;
  border-bottom:1px solid var(--mh-border);scrollbar-width:thin;
}
.mh-dmg-tabs > .mh-seg{flex:0 0 auto}
.mh-dmg-tabs .mh-seg-b{white-space:nowrap}

/*  O .mh-seg não tinha anel de foco: é um <button> sem borda, e o contorno por
    omissão desaparecia contra o fundo do separador ativo. */
.mh-seg-b:focus-visible{outline:2px solid var(--mh-brand);outline-offset:1px}

/* ---- panels ---- */
.mh-dmg-p{padding:18px}
@media (max-width:520px){ .mh-dmg-p{padding:16px 14px} }

.mh-dmg-i{margin:0 0 16px}
.mh-dmg-i h3{
  font-size:var(--mh-fs-base);font-weight:600;letter-spacing:-.01em;
  margin:0 0 5px;color:var(--mh-text);text-wrap:balance;
}
.mh-dmg-i p{margin:0;font-size:var(--mh-fs-sm);color:var(--mh-text-2);line-height:1.6;max-width:68ch}

.mh-dmg-act{display:flex;gap:10px;flex-wrap:wrap}
.mh-dmg-act .mh-b{height:38px;padding:0 18px}

/* ---- forms ----
   Os pares colapsam quando a coluna aperta, não quando a janela aperta: abaixo
   dos 900px a página passa a uma coluna e o cartão fica com a largura toda,
   por isso dois campos lado a lado continuam a caber à vontade. */
.mh-dmg .mh-form .mh-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){ .mh-dmg .mh-form .mh-two{grid-template-columns:minmax(0,1fr)} }

/* um nameserver é uma cadeia técnica, como o domínio: mono */
.mh-dmg .mh-field input[name^="ns"]{font-family:var(--mh-mono);font-size:var(--mh-fs-sm)}

/*  Os campos do WHOIS chegam preenchidos e sem placeholder, e a regra geral do
    .mh-field acende a borda de erro em qualquer campo obrigatório vazio logo
    ao carregar: num contacto sem distrito era meio formulário a vermelho antes
    de alguém lhe tocar. Aqui o erro só aparece depois de a pessoa mexer no
    campo. Onde :user-invalid não existir não aparece de todo, que é a falha
    certa das duas. O :invalid a mais na segunda regra é para ela pesar tanto
    como a primeira e vencer por vir depois. */
.mh-dmg .mh-field input:invalid:not(:placeholder-shown){border-color:var(--mh-border-2)}
.mh-dmg .mh-field input:invalid:user-invalid{border-color:var(--mh-no-line)}