/* Filename: /var/www/vhosts/webflow.pt/httpdocs/house.css
   ONE STYLESHEET, WORN BY EVERY PAGE OF THE NEW DESIGN - THE PUBLIC PAGES AND THE CUSTOMER
   LOGIN ALIKE. The pages BEHIND the login keep their own Bootstrap + styles.css stack and are
   not touched by this file at all. Two designs, two sheets, and no page ever wears both.
   SELECTOR DISCIPLINE, AND IT IS THE WHOLE REASON THIS FILE READS THE WAY IT DOES:
   base ELEMENT rules (p, a, h2, li) stay unscoped at specificity 0-0-1, and every component
   that needs to override them is a CLASS at 0-1-0. A single class outranks any number of
   elements, so .colophon beats p and .btn beats a without a prefix, a parent, or !important.
   Scoping the base rules to a wrapper inverts that - `.wrap p` at 0-1-1 silently outranks
   `.colophon`, and the component loses to the thing it was written to override.
   ABSOLUTE UNITS THROUGHOUT. Bootstrap 3 sets html{font-size:10px}, so any rem here would
   render at 62.5% wherever that stack is present and 100% where it is not - one rule, two
   sizes, which is the one thing a shared house style exists to prevent.
   THE PALETTE IS BLACK AND ONE ACCENT. Every background is pure #000 and structure is drawn in
   hairline borders, so nothing reads as a lighter box floating on the page. The two exceptions
   are deliberate and loud: a message that succeeded is solid green, one that failed is solid
   red, both in white text, because a result the visitor might miss is a result wasted. */
/* #region tokens: TWO COLOURS, ONE ACCENT, AND THE TWO VERDICTS [Foundation Layer] */
  :root { --bg: #000; --ink: #fff; --body: #d0d0d0; --mute: #8a8a8a; --faint: #4a4a4a;
    --line: #232323; --accent: #386da0; --accent-lift: #4a83bd;
    --good: #1f7a45; --bad: #a02929; }
/* #endregion */
/* #region reset: A PREDICTABLE BOX ON EVERY DEVICE [UI Layer] */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; font-size: 16px; }
  html, body { margin: 0; padding: 0; }
/* #endregion */
/* #region canvas: BLACK EVERYWHERE, ONE COLUMN, ONE WIDTH [UI Layer] */
  body { min-height: 100vh; background: var(--bg); color: var(--ink); font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; }
  .wrap, .main-container { max-width: 640px; width: auto; margin: 0 auto;
    padding: 56px 24px 48px; }
/* #endregion */
/* #region mark: THE LOGO AND THE TITLE - THE ONLY CENTRED THINGS [UI Layer] */
  .mark, .logo { text-align: center; margin: 0 0 48px; padding: 0; }
  .mark img, .logo img { width: 220px; max-width: 60vw; height: auto; display: inline-block; }
  /* The mark is the way back to the front door from every page, including the login. */
  .mark a, .logo a { display: inline-block; text-decoration: none; line-height: 0; }
  .mark a:hover, .logo a:hover { opacity: .82; }
  h1, .form-signin-heading { text-align: center; font-size: 16px; font-weight: 600;
    letter-spacing: 3.2px; text-transform: uppercase; color: var(--ink); margin: 0 0 10px;
    border: 0; padding: 0; }
  .lede { text-align: center; color: var(--mute); font-size: 14.4px; line-height: 1.65;
    margin: 0 auto 44px; max-width: 448px; }
/* #endregion */
/* #region prose: LEFT ALIGNED, ONE IDEA PER PARAGRAPH, UNSCOPED ON PURPOSE [Content Layer] */
  p { line-height: 1.75; margin: 0 0 22px; color: var(--body); font-size: 15.2px; }
  a { color: var(--accent); }
  a:hover { color: var(--accent-lift); }
  strong { color: var(--ink); font-weight: 600; }
  h2 { font-size: 12.5px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--mute); margin: 44px 0 18px; padding-bottom: 10px;
    border-bottom: 1px solid var(--line); }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em;
    color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
    padding: 2px 6px; white-space: nowrap; }
  ul { margin: 0 0 22px; padding-left: 18px; color: var(--body); }
  li { line-height: 1.75; margin-bottom: 9px; font-size: 15.2px; }
/* #endregion */
/* #region facts: MACHINE TRUTHS AS ROWS, BECAUSE THEY ARE NOT PROSE [Content Layer] */
  .facts { margin: 0 0 22px; border-top: 1px solid var(--line); }
  .facts div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0;
    border-bottom: 1px solid var(--line); }
  /* 184px, not 144: the basis has to clear the LONGEST label at 12.5px uppercase with 1.1px
     tracking, and "DNS or zone question" needs ~177px. A basis sized to the average label
     wraps the one outlier onto two lines while the value column sits half empty. */
  .facts dt { flex: 0 0 184px; color: var(--mute); font-size: 12.5px; letter-spacing: 1.1px;
    text-transform: uppercase; margin: 0; padding-top: 2px; }
  .facts dd { flex: 1 1 192px; margin: 0; color: var(--ink); font-size: 15.2px; }
/* #endregion */
/* #region form: BLACK FIELDS, ACCENT ON FOCUS AND ON THE ONE BUTTON [UI Layer] */
  form { margin: 36px 0 0; }
  label { display: block; font-size: 12.5px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--mute); margin: 22px 0 7px; }
  .form-group { margin: 0 0 18px; }
  input[type=email], input[type=text], input[type=password], textarea, .form-control {
    width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
    border-radius: 4px; padding: 13px; font: inherit; font-size: 15.2px; height: auto;
    box-shadow: none; }
  input:focus, textarea:focus, .form-control:focus { border-color: var(--accent);
    outline: 2px solid rgba(56, 109, 160, .35); outline-offset: 0; box-shadow: none; }
  ::placeholder { color: #6a6a6a; opacity: 1; }
  textarea { min-height: 152px; resize: vertical; line-height: 1.65; }
  /* Chrome paints a saved-credential field with its own near-white fill that no background rule
     can reach. The inset shadow is the only surface it leaves us. */
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
  input:-webkit-autofill:active { -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; box-shadow: 0 0 0 1000px var(--bg) inset;
    transition: background-color 9999s ease-in-out 0s; }
  .btn, .btn-black { margin-top: 28px; width: 100%; background: var(--accent); color: #fff;
    border: 0; border-radius: 4px; padding: 14px; font: inherit; font-weight: 600;
    letter-spacing: .8px; cursor: pointer; display: block; text-align: center;
    text-decoration: none; text-shadow: none; box-shadow: none; }
  .btn:hover, .btn-black:hover, .btn-black:focus, .btn-black:active, .btn-black:active:focus {
    background: var(--accent-lift); color: #fff; }
  .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* The honeypot: off-screen, tab-skipped, invisible to anything with eyes. */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  /* Invisible renders a zero-size widget, so it must claim no layout at all. */
  .g-recaptcha { margin: 0; display: block; }
/* #endregion */
/* #region verdicts: SOLID RED OR SOLID GREEN, WHITE TEXT, EVERY FORM ON THE DOMAIN [UI Layer] */
  /* A result the visitor can miss is a result wasted, so these are the only filled surfaces in
     the whole design. .note is ours, .alert is what the login's JS injects - same look, because
     a customer and a complainant should never have to learn two vocabularies. */
  .note, .alert { margin: 20px 0 0; padding: 14px 17px; border: 0; border-radius: 4px;
    font-size: 14.4px; line-height: 1.65; color: #fff; }
  .note.ok, .alert-success { background: var(--good); color: #fff; }
  .note.bad, .alert-danger { background: var(--bad); color: #fff; }
  .note a, .alert a { color: #fff; text-decoration: underline; }
  /* The validator's per-field message, same vocabulary at a smaller scale. */
  .help-block { margin: 7px 0 0; padding: 8px 12px; border-radius: 4px; background: var(--bad);
    color: #fff; font-size: 13px; line-height: 1.5; }
  /* validator.min.js hardcodes $('<ul class="list-unstyled">') around every field error -
     there is no option to change it, so the list is flattened to plain text here. Without
     this the base ul rule adds 22px under the last line and the box reads bottom-heavy. */
  .help-block ul { margin: 0; padding: 0; list-style: none; }
  .help-block li { margin: 0; font-size: inherit; line-height: inherit; }
  /* Nothing inside a verdict box may leave a trailing margin behind it. */
  .note > *:last-child, .alert > *:last-child, .help-block > *:last-child { margin-bottom: 0; }
  .help-block:empty { display: none; padding: 0; }
  .messages:empty { display: none; }
  .progress { background: #111; border-radius: 4px; height: 6px; margin: 13px 0 0;
    box-shadow: none; overflow: hidden; }
  .progress-bar { background: var(--accent); box-shadow: none; height: 100%; }
/* #endregion */
/* #region legal: THE reCAPTCHA NOTICE AND THE CLOSING LINES, DELIBERATELY QUIET [Layout Layer] */
  /* Google's floating badge may be hidden ONLY where the branding is stated in the flow, which
     .attribution does. Without that sentence on the page, this rule breaches their terms. */
  .grecaptcha-badge { visibility: hidden; }
  .attribution { margin: 14px 0 0; color: var(--faint); font-size: 12px; line-height: 1.7;
    text-align: center; }
  .attribution a { color: #5a5a5a; }
  .attribution a:hover { color: var(--accent-lift); }
/* #endregion */
/* #region foot: THE MAP EVERY PAGE CARRIES, VISIBLE AND NOT APOLOGETIC [Layout Layer] */
  footer { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line);
    text-align: center; }
  /* The login's footer is a sibling of its container rather than a child, so it restates the
     column width - otherwise it would run the full width of the viewport. */
  body > footer { max-width: 640px; margin: 56px auto 0; padding: 26px 24px 48px; }
  footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
    margin-bottom: 22px; }
  footer nav a { color: var(--body); text-decoration: none; font-size: 13.6px;
    letter-spacing: .6px; }
  footer nav a:hover { color: var(--accent-lift); text-decoration: underline; }
  footer nav a[aria-current] { color: var(--ink); font-weight: 600; }
  .colophon { color: var(--faint); font-size: 12px; line-height: 1.85; margin: 0; }
  .colophon code { background: none; border: 0; padding: 0; color: #5a5a5a; }
  .colophon a { color: #5a5a5a; }
  .colophon a:hover { color: var(--accent-lift); }
/* #endregion */
/* #region account: THE LOGIN'S OWN MARKUP, MAPPED ONTO THE SAME RESULT [UI Layer] */
  /* This page loads NO Bootstrap, so the utilities its markup still names must exist here.
     .sr-only especially - without it every visually-hidden label renders as body copy. */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .text-center { text-align: center; }
  /* The card was a #222 panel ringed in a pale shadow. It is the black page now, like every
     other page on the domain - the form floats on the same void the prose does. */
  .content-card, .content-card.dark-bg { background: var(--bg); color: var(--ink);
    box-shadow: none; border: 0; border-radius: 0; padding: 0; }
  .form-signin { margin: 0 auto; max-width: none; }
  .form-signin p.text-center { margin: 22px 0 0; font-size: 14.4px; }
  .form-signin p.text-center a { font-weight: 600; }
/* #endregion */