/* ---------------------------------------------------------------------------
 * /contact/ and /contact/document.html - what is left of the existing site's
 * css/document.css.
 *
 * It arrived here as a verbatim 6553-line copy. This is the same sheet with the
 * dead weight taken out. Every rule was tested against the two pages that link
 * it, with every runtime state forced on first - is-active, is-open, is-inview,
 * wf-active, the slick classes, the html browser flags - and 785 of its 811
 * selectors matched nothing on either page. They belong to the site this project
 * was carved out of: a price table, popups, a side menu, charts, a cost
 * calculator, sliders, tabs.
 *
 * WHAT IS KEPT, AND WHY
 *
 *   the reset gaps   the copy's own reset went earlier in favour of Tailwind's
 *                    Preflight; what stayed is the handful of declarations
 *                    Preflight does not make, on form controls
 *   the Zoho form    every .zcwf_* rule. This is the block that matters: the form
 *                    is a third-party embed inside {% raw %}, so its markup
 *                    carries no utilities and is styled from here
 *   WORDPRESS        64 selectors that match nothing TODAY and are kept anyway,
 *                    because the client carries this into WordPress and WordPress
 *                    emits the markup for them: .screen-reader-text and its
 *                    :focus, img.alignleft / .alignright / .aligncenter from the
 *                    editor, .is-style-full, and the whole Contact Form 7 set -
 *                    .wpcf7-form-control, .wpcf7-not-valid-tip, .wpcf7-list-item,
 *                    .wpcf7-response-output, .wpcf7-spinner and the form state
 *                    classes. Do not prune these on the grounds that nothing
 *                    matches: the point is that nothing matches YET.
 *
 * The originals are in git at commit 999cc85 if a rule is ever needed back.
 *
 * WHY THE @layer WRAPPER. Unlayered CSS outranks EVERY @layer whatever the
 * specificity, and this sheet is linked after style.css. @layer base puts it in
 * the same layer as Preflight - it still wins over Preflight, so the page renders
 * as the original does, while @layer components and @layer utilities now win over
 * it, which is what lets the shared header and footer work. `base` rather than a
 * new name because Tailwind declares the order `theme, base, components,
 * utilities`; a new name is appended AFTER utilities and would beat them.
 * ------------------------------------------------------------------------- */
@layer base {
  .wpcf7 .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    word-wrap: normal !important;
  }

  .wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
  }

  .wpcf7 form.init .wpcf7-response-output,
  .wpcf7 form.resetting .wpcf7-response-output,
  .wpcf7 form.submitting .wpcf7-response-output {
    display: none;
  }

  .wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
  }

  .wpcf7 form.failed .wpcf7-response-output,
  .wpcf7 form.aborted .wpcf7-response-output {
    border-color: #dc3232;
  }

  .wpcf7 form.spam .wpcf7-response-output {
    border-color: #f56e28;
  }

  .wpcf7 form.invalid .wpcf7-response-output,
  .wpcf7 form.unaccepted .wpcf7-response-output,
  .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
  }

  .wpcf7-form-control-wrap {
    position: relative;
  }

  .wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
  }

  .use-floating-validation-tip .wpcf7-not-valid-tip {
    position: relative;
    top: -2ex;
    left: 1em;
    z-index: 100;
    border: 1px solid #dc3232;
    background: #fff;
    padding: 0.2em 0.8em;
    width: 24em;
  }

  .wpcf7-list-item {
    display: inline-block;
    margin: 0 0 0 1em;
  }

  .wpcf7-list-item-label::before,
  .wpcf7-list-item-label::after {
    content: " ";
  }

  .wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: relative;
  }

  form.submitting .wpcf7-spinner {
    visibility: visible;
  }

  .wpcf7-spinner::before {
    content: "";
    position: absolute;
    background-color: #fbfbfc;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .wpcf7-spinner::before {
      animation-name: blink;
      animation-duration: 2000ms;
    }
  }

  .wpcf7 [inert] {
    opacity: 0.5;
  }

  .wpcf7 input[type="file"] {
    cursor: pointer;
  }

  .wpcf7 input[type="file"]:disabled {
    cursor: default;
  }

  .wpcf7 .wpcf7-submit:disabled {
    cursor: not-allowed;
  }

  .wpcf7 input[type="url"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"] {
    direction: ltr;
  }

  .wpcf7-reflection > output {
    display: list-item;
    list-style: none;
  }

  .wpcf7-reflection > output[hidden] {
    display: none;
  }

  /* -----------------------------------------------------------------------
     * RESET REMOVED. The copy's own reset/normalize stood here - roughly 210
     * lines: the `html, body, div, span, ... video` blanket rule, `html
     * { line-height: 1 }`, the list/blockquote/table resets, `box-sizing`,
     * `body *`, `img`, the form-control block and `input[type=search]`.
     *
     * Tailwind's Preflight arrives with style.css and already does that job, so
     * the two were fighting rather than stacking. The blanket rule in particular
     * set `font-size: 100%` on `html`, which overrode base.css's 625% and shrank
     * everything rem-based on the page to 100/625 of its size.
     *
     * Anything the form actually needed from it and Preflight does not supply is
     * restated at the end of this file, under RESET GAPS - each line there is
     * one measured difference against the original page, not a guess.
     * -------------------------------------------------------------------- */

  /* NOTE: this block sits INSIDE the layer, where the reset used to be, and
     * that placement is load-bearing. Unlayered it would beat the copy's own
     * .form_control rules - padding, border, background, font-size and
     * font-weight all vanished when it was tried outside. In here it is a
     * plain element selector in the same layer, so every class rule below
     * still wins, while Preflight - earlier in the layer - loses. */

  /* ---------------------------------------------------------------------------
     * RESET GAPS. What the removed reset gave the form and Preflight does not.
     * Every line below is one measured difference against the original page - the
     * probe compared 30 computed properties on every form element at 390 and 1400.
     *
     * appearance: none      Preflight leaves native styling on input, select and
     *                       button. Without this the select keeps the OS dropdown
     *                       arrow and the submit button the OS chrome.
     * vertical-align        Preflight leaves controls on the baseline; the original
     *                       centres them, which is what lines a field up with its
     *                       label.
     * display, line-height  the labels are inline-block in the original, so each one
     *                       takes a box (87x26 at PC). As plain inline they collapse.
     * white-space, resize   the textarea is pre-line and non-resizable in the
     *                       original; Preflight leaves pre-wrap and resize:vertical.
     * outline: auto         the original's focus ring, kept as-is.
     *
     * Unlayered on purpose: it has to beat Preflight, and nothing else on this page
     * styles a form control.
     * ------------------------------------------------------------------------- */

  input,
  label,
  select,
  button,
  textarea {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    white-space: normal;
    word-break: normal;
    appearance: none;
  }

  input,
  label,
  select,
  button {
    line-height: inherit;
  }

  textarea {
    overflow: auto;
    white-space: pre-line;
    resize: none;
  }

  input:focus,
  textarea:focus,
  select:focus {
    outline: auto;
  }

  /* The copy's own print block. This file is unlayered and is linked after the
   * bundle, so on /contact/ and /contact/document.html it wins over the one in
   * src/css/base.css - the page box and the minimum width have to be the same
   * numbers there or these two pages would print at a different scale from the
   * other two. See that file for why the size is what it is. */

  @media print {
    body {
      -webkit-print-color-adjust: exact;
    }

    html,
    body {
      margin: 0;
      min-width: 1440px;
    }

    @page {
      margin: 0;

      size: 1440px 2036px;
    }

    @page :left {
      margin: 0;
    }

    @page :right {
      margin: 0;
    }

    @page :first {
      margin-top: 0;
    }
  }

  html {
    opacity: 1;
  }

  html.is-loading {
    transition: opacity 0.25s ease;
    opacity: 0;
  }

  /* Not in the copy. The layout gives <main> flex-1 inside a min-h-screen column,
   * so on a viewport taller than the content main stretches while the two-column
   * div inside it does not - 665px of white showed between the panels and the
   * footer at 1440x2000.
   *
   * It has to be done here rather than with a utility on the div: `min-height:100%`
   * resolves against the containing block's `height`, and main's height property is
   * `auto` - its size comes from flex-1 - so the percentage is indefinite and
   * computes to nothing. Making main a flex column and letting the child grow is
   * the only version that works. This sheet is linked by /contact/ and
   * /contact/document.html only, so no other page sees it. */

  /* font-family is NOT the copy's. The original site sets "Noto Sans JP" here, but
   * both Figma frames - 908:523 and 817:7834 - set every text node in Zen Kaku
   * Gothic Antique, and this rule is in @layer base ahead of base.css on source
   * order, so leaving it meant the hero inherited the old face. Worse, the page
   * never loads Noto Sans JP - only /contact/complete/ links it - so the hero was
   * falling through to the OS default sans. The form was unaffected: every .zcwf_*
   * rule names var(--font-sans) itself. */

  body {
    color: #000;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.4;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    transition: opacity 0.3s ease;
    overflow-y: scroll;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  .hidden {
    display: none;
  }

  @media (min-width: 768px), print {
    body {
      font-size: 0.16rem;
    }
  }

  @media screen and (max-width: 767.98px) {
    html {
      font-size: calc(100vw / 3.75);
      min-height: 100vh;
    }

    html::-webkit-scrollbar {
      display: none;
    }

    body {
      font-size: 0.14rem;
    }
  }

  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }

  .screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
  }

  @media (min-width: 768px), print {
    .form-module.is-style-full .form-note-tip {
      margin-top: 14px;
    }
  }

  @media screen and (max-width: 767.98px) {
    .form-module.is-style-full .input-common:not(:last-child),
    .form-module.is-style-full .select-common:not(:last-child),
    .form-module.is-style-full .textarea-common:not(:last-child) {
      margin-bottom: 0.1rem;
    }
  }

  .wpcf7 form .wpcf7-not-valid-tip {
    display: block;
    color: #e63636;
  }

  .input-common .wpcf7-form-control-wrap {
    display: block;
  }

  .input-common .wpcf7-form-control {
    width: 100%;
    border: 1px solid #bbb;
    border-radius: 3px;
    background-color: #fff;
    display: block;
    color: #000;
    -moz-appearance: textfield;
    word-break: normal;
    white-space: nowrap;
    outline: none;
  }

  .input-common .wpcf7-form-control::-webkit-input-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .input-common .wpcf7-form-control::-ms-input-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .input-common .wpcf7-form-control:-ms-input-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .input-common .wpcf7-form-control:-moz-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .input-common .wpcf7-form-control::placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .input-common .wpcf7-form-control:focus {
    border-color: #086cd0;
    background-color: #f5f8fc;
  }

  .input-common .wpcf7-form-control::-webkit-outer-spin-button,
  .input-common .wpcf7-form-control::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .input-common .wpcf7-form-control.wpcf7-not-valid {
    background-color: #ffe9e8;
  }

  .input-common .wpcf7-form-control.is-verified {
    background-image: url(/wp5/wp-content/themes/fcvanilla/img/common/icon_verify_01.svg);
    background-repeat: no-repeat;
  }

  @media (min-width: 768px), print {
    .input-common.is-flex .wpcf7-form-control-wrap {
      width: 210px;
    }

    .input-common.is-flex .wpcf7-form-control-wrap:first-of-type {
      margin-right: 0;
    }

    .input-common .wpcf7-form-control {
      height: 40px;
      padding: 2px 20px 0;
      font-size: 0.15rem;
    }

    .input-common .wpcf7-form-control.is-verified {
      padding-right: 36px;
      background-size: 20px 20px;
      background-position: center right 8px;
    }

    .input-common .wpcf7-not-valid-tip {
      margin: 8px 0 -3px;
      font-size: 0.13rem;
    }
  }

  @media screen and (max-width: 767.98px) {
    .input-common .wpcf7-form-control {
      height: 0.44rem;
      padding: 2px 0.18rem 0;
      font-size: 0.15rem;
    }

    .input-common .wpcf7-form-control.is-verified {
      padding-right: 0.36rem;
      background-size: 0.2rem 0.2rem;
      background-position: center right 0.08rem;
    }

    .input-common .wpcf7-not-valid-tip {
      margin-top: 0.08rem;
      font-size: 0.13rem;
    }
  }

  .select-common .wpcf7-form-control-wrap {
    display: block;
  }

  .select-common .wpcf7-form-control {
    font-weight: 700;
    width: 100%;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #fff url(/wp5/wp-content/themes/fcvanilla/img/common/icon_arrow_04.svg) center right no-repeat;
    display: block;
    color: #000;
    word-break: normal;
    white-space: nowrap;
    outline: none;
    cursor: pointer;
  }

  .select-common .wpcf7-form-control:focus {
    border-color: #086cd0;
    background-color: #f5f8fc;
  }

  .select-common .wpcf7-form-control.wpcf7-not-valid {
    background-color: #ffe9e8;
  }

  @media (min-width: 768px), print {
    .select-common .wpcf7-form-control {
      height: 40px;
      padding: 2px 26px 0 19px;
      background-size: 7px 17px;
      background-position: center right 15px;
      font-size: 0.15rem;
    }

    .select-common .wpcf7-not-valid-tip {
      margin: 8px 0 -3px;
      font-size: 0.13rem;
    }
  }

  @media screen and (max-width: 767.98px) {
    .select-common .wpcf7-form-control {
      height: 0.44rem;
      padding: 2px 0.5rem 0 0.18rem;
      background-size: 0.09rem 0.18rem;
      background-position: center right 0.13rem;
      font-size: 0.15rem;
    }

    .select-common .wpcf7-not-valid-tip {
      margin-top: 0.08rem;
      font-size: 0.13rem;
    }
  }

  .textarea-common .wpcf7-form-control-wrap {
    display: block;
  }

  .textarea-common .wpcf7-form-control {
    width: 100%;
    height: 100%;
    border: 1px solid #bbb;
    border-radius: 3px;
    background-color: #fff;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    outline: none;
    resize: none;
  }

  .textarea-common .wpcf7-form-control::-webkit-input-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .textarea-common .wpcf7-form-control::-ms-input-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .textarea-common .wpcf7-form-control:-ms-input-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .textarea-common .wpcf7-form-control:-moz-placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .textarea-common .wpcf7-form-control::placeholder {
    color: #bbb;
    font-weight: 700;
  }

  .textarea-common .wpcf7-form-control:focus {
    border-color: #086cd0;
    background-color: #f5f8fc;
  }

  .textarea-common .wpcf7-form-control.wpcf7-not-valid {
    background-color: #ffe9e8;
  }

  .textarea-common .wpcf7-form-control.is-verified {
    background-image: url(/wp5/wp-content/themes/fcvanilla/img/common/icon_verify_01.svg);
    background-repeat: no-repeat;
  }

  @media (min-width: 768px), print {
    .textarea-common .wpcf7-form-control {
      height: 140px;
      padding: 18px 14px;
      font-size: 0.15rem;
    }

    .textarea-common .wpcf7-form-control.is-verified {
      padding-right: 36px;
      background-size: 20px 20px;
      background-position: top 8px right 8px;
    }

    .textarea-common .wpcf7-not-valid-tip {
      margin: 8px 0 17px;
      font-size: 0.13rem;
    }
  }

  @media screen and (max-width: 767.98px) {
    .textarea-common .wpcf7-form-control {
      height: 1.2rem;
      padding: 0.18rem;
      font-size: 0.15rem;
    }

    .textarea-common .wpcf7-form-control.is-verified {
      padding-right: 0.36rem;
      background-size: 0.2rem 0.2rem;
      background-position: top 0.08rem right 0.08rem;
    }

    .textarea-common .wpcf7-not-valid-tip {
      margin-top: 0.08rem;
      font-size: 0.13rem;
    }
  }

  .checkbox-common .wpcf7-form-control-wrap,
  .checkbox-common .wpcf7-form-control,
  .checkbox-common .wpcf7-list-item,
  .checkbox-common label,
  .checkbox-common .wpcf7-list-item-label,
  .radio-common .wpcf7-form-control-wrap,
  .radio-common .wpcf7-form-control,
  .radio-common .wpcf7-list-item,
  .radio-common label,
  .radio-common .wpcf7-list-item-label {
    display: block;
    position: relative;
  }

  .checkbox-common .wpcf7-list-item,
  .radio-common .wpcf7-list-item {
    margin: 0;
    padding: 0;
    display: -ms-flexbox;
    display: flex;
  }

  .checkbox-common input:focus + .wpcf7-list-item-label::after,
  .radio-common input:focus + .wpcf7-list-item-label::after {
    border-color: #e63636;
    background-color: #f5f8fc;
  }

  .checkbox-common input:checked + .wpcf7-list-item-label::before,
  .radio-common input:checked + .wpcf7-list-item-label::before {
    background: #e63636;
  }

  .checkbox-common input:checked + .wpcf7-list-item-label::after,
  .radio-common input:checked + .wpcf7-list-item-label::after {
    border-color: #e63636;
  }

  .checkbox-common .wpcf7-list-item-label::before,
  .checkbox-common .wpcf7-list-item-label::after,
  .radio-common .wpcf7-list-item-label::before,
  .radio-common .wpcf7-list-item-label::after {
    content: "";
    border-radius: 2px;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    -ms-transform-origin: center center;
    transform-origin: center center;
  }

  .checkbox-common .wpcf7-list-item-label::before,
  .radio-common .wpcf7-list-item-label::before {
    background: #bbb;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
    -ms-transform: translateY(-50%) scale(0.5);
    transform: translateY(-50%) scale(0.5);
  }

  .checkbox-common .wpcf7-list-item-label::after,
  .radio-common .wpcf7-list-item-label::after {
    border: 1px solid #bbb;
    background: #fff;
    z-index: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  @media (min-width: 768px), print {
    .checkbox-common .wpcf7-radio,
    .radio-common .wpcf7-radio {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .checkbox-common .wpcf7-list-item-label,
    .radio-common .wpcf7-list-item-label {
      padding-left: 24px;
    }

    .checkbox-common .wpcf7-list-item-label::before,
    .checkbox-common .wpcf7-list-item-label::after,
    .radio-common .wpcf7-list-item-label::before,
    .radio-common .wpcf7-list-item-label::after {
      width: 20px;
      height: 20px;
      margin-top: -1px;
    }

    .checkbox-common .wpcf7-not-valid-tip,
    .radio-common .wpcf7-not-valid-tip {
      margin: 8px 0 -3px;
      font-size: 0.13rem;
    }
  }

  @media screen and (max-width: 767.98px) {
    .checkbox-common .wpcf7-list-item-label,
    .radio-common .wpcf7-list-item-label {
      padding-left: 0.37rem;
    }

    .checkbox-common .wpcf7-list-item-label::before,
    .checkbox-common .wpcf7-list-item-label::after,
    .radio-common .wpcf7-list-item-label::before,
    .radio-common .wpcf7-list-item-label::after {
      width: 0.26rem;
      height: 0.26rem;
      margin-top: -1px;
    }

    .checkbox-common .wpcf7-not-valid-tip,
    .radio-common .wpcf7-not-valid-tip {
      margin-top: 0.08rem;
      font-size: 0.13rem;
    }
  }

  @media screen and (max-width: 767.98px) {
    .check-box .wpcf7-list-item {
      margin-bottom: 0.2rem;
    }
  }

  .radio-common .wpcf7-list-item-label::before,
  .radio-common .wpcf7-list-item-label::after {
    border-radius: 50%;
  }

  @media (min-width: 768px), print {
    .radio-common .wpcf7-list-item {
      padding: 0 32px 10px 0;
    }

    .radio-common .wpcf7-list-item:last-child {
      padding-right: 0;
    }
  }

  @media screen and (max-width: 767.98px) {
    .radio-common .wpcf7-list-item {
      padding-bottom: 0.2rem;
    }
  }

  /* ------------------------------------------------------------------------
   * The Zoho form.
   *
   * SCOPED ON ZOHO'S OWN CONTAINER ID, not on a class of ours. Every rule below
   * used to hang off .section-form-wrapper, a class that existed on the <section>
   * for no other purpose - it carried no declarations of its own, and the
   * section's look is utilities. The markup inside is a Web-to-Lead block pasted
   * from Zoho's generator, kept behind {% raw %} because the client regenerates
   * it there and pastes it back; #crmWebToEntityForm is the id that paste brings
   * with it, so the styling survives a re-export without anyone having to add a
   * wrapper class to the new block.
   *
   * The rules are otherwise untouched. Specificity rose by one id across all of
   * them at once, so their order among themselves is unchanged, and this file is
   * unlayered - it already outranked every Tailwind layer regardless.
   * --------------------------------------------------------------------- */

  #crmWebToEntityForm .zcwf_row {
    position: relative;
    margin: auto;
    width: 100%;
  }

  /* The button row's bottom margin left 20px hanging below the button - the design
   * has the section's bottom padding start straight after it. Not in the copy.
   *
   * :has(), not :last-child. Zoho closes the form with two <script> elements after
   * this row, so the row is never the last child; :has() is the only way to reach
   * the row from the wrapper inside it. */

  #crmWebToEntityForm .zcwf_row:has(.button_wrapper) {
    margin-bottom: 0;
  }

  /* line-height is not the copy's either. Without it this div takes its inline
   * strut from body's 16px x 1.4 = 22.4px, while the design's label row is 20px
   * with a badge and 16px without. The label inside already sets line-height 1 but
   * cannot shrink its parent's strut. The 2.4px surplus repeated per row and the
   * last field ended up 20.7px below where the design puts it. */

  #crmWebToEntityForm .zcwf_col_lab {
    position: relative;
    line-height: 1;
  }

  #crmWebToEntityForm .zcwf_col_lab label {
    position: relative;
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-text);
  }

  #crmWebToEntityForm .zcwf_col_lab label span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-weight: 700;
    top: -0.01rem;
  }

  #crmWebToEntityForm .zcwf_col_fld {
    position: relative;
  }

  #crmWebToEntityForm .zcwf_col_fld textarea.form_control {
    height: auto;
  }

  #crmWebToEntityForm .zcwf_col_fld .form_control {
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #d9d9d9;
    font-family: var(--font-sans);
    color: var(--color-text);
    font-weight: 700;
    border-radius: 5px;
    transition:
      border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
  }

  #crmWebToEntityForm .zcwf_col_fld .form_control:-ms-input-placeholder {
    color: rgb(51 51 51 / 40%);
  }

  #crmWebToEntityForm .zcwf_col_fld .form_control::placeholder {
    color: rgb(51 51 51 / 40%);
  }

  #crmWebToEntityForm .zcwf_col_fld .form_control:focus {
    border: 1px solid #086cd0;
    outline: unset;
  }

  /* padding-top is not the copy's. Both designs leave 40px between the last field
   * and the button; .zcwf_row's 20px bottom margin only supplies half. The
   * `gap: 20px` further down cannot help - it needs two children, and the reset
   * button beside the submit is commented out.
   *
   * PADDING, NOT MARGIN. margin-top here collapses with the previous row's
   * margin-bottom and the pair resolves to max(20, 20) = 20, so the gap never
   * changed. Padding does not collapse. */

  #crmWebToEntityForm .zcwf_col_fld.button_wrapper {
    position: relative;
    padding-top: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    vertical-align: middle;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  #crmWebToEntityForm .zcwf_col_fld.button_wrapper .zcwf_button {
    position: relative;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    margin: 0 auto;
    background: var(--color-primary);
    box-shadow: 0 4px 2px rgb(0 0 0 / 25%);
    outline: 0;
    transition: background 0.3s ease-out;
    cursor: pointer;
  }

  #crmWebToEntityForm .zcwf_col_fld.button_wrapper .zcwf_button:hover {
    background: rgb(7 52 191 / 70%);
  }

  /* /contact/document.html only. Same button, gold instead of blue - Figma 817:7918
   * uses button/Secondary #C6A511 where /contact/ uses button/Primary. Keyed on the
   * body class the layout writes, and carrying the full ancestor chain because the
   * rule above is an id and four classes deep and would otherwise win on
   * specificity - this one is that plus .page-document. */

  .page-document #crmWebToEntityForm .zcwf_col_fld.button_wrapper .zcwf_button {
    background: var(--color-secondary);
  }

  .page-document #crmWebToEntityForm .zcwf_col_fld.button_wrapper .zcwf_button:hover {
    background: rgb(198 165 17 / 70%);
  }

  #crmWebToEntityForm .zcwf_col_help {
    position: relative;
    font-family: var(--font-sans);
    color: var(--color-text);
    font-weight: 400;
  }

  @media (min-width: 768px), print {
    #crmWebToEntityForm .zcwf_row {
      max-width: 440px;
      margin-bottom: 20px;
    }

    #crmWebToEntityForm .zcwf_col_lab {
      margin-bottom: 8px;
    }

    #crmWebToEntityForm .zcwf_col_lab label {
      font-size: 0.16rem;
      line-height: 1;
    }

    #crmWebToEntityForm .zcwf_col_lab span {
      width: 40px;
      height: 20px;
      font-size: 0.12rem;
      line-height: 19px;
      margin-right: 8px;
    }

    .is-mac #crmWebToEntityForm .zcwf_col_lab label span {
      padding-bottom: 1px;
    }

    #crmWebToEntityForm .zcwf_col_fld .form_control {
      font-size: 0.16rem;
      line-height: 1;
      padding: 0 12px;
      height: 40px;
    }

    .is-mac #crmWebToEntityForm .zcwf_col_fld .form_control {
      padding-bottom: 2px;
    }

    #crmWebToEntityForm .zcwf_col_fld textarea.form_control {
      height: 120px;
      padding: 16px;
    }

    #crmWebToEntityForm .zcwf_col_fld.button_wrapper {
      gap: 20px;
    }

    #crmWebToEntityForm .zcwf_col_fld.button_wrapper .zcwf_button {
      width: 350px;
      font-size: 0.2rem;
      line-height: 1;
      border-radius: 60px;
      padding: 20px;
    }

    #crmWebToEntityForm .zcwf_col_help {
      margin-top: 8px;
      font-size: 0.13rem;
      line-height: 1.6;
    }
  }

  @media screen and (max-width: 767.98px) {
    #crmWebToEntityForm .zcwf_row {
      margin-bottom: 0.2rem;
    }

    #crmWebToEntityForm .zcwf_col_lab {
      margin-bottom: 0.08rem;
    }

    #crmWebToEntityForm .zcwf_col_lab label {
      font-size: 0.16rem;
      line-height: 1;
    }

    #crmWebToEntityForm .zcwf_col_lab span {
      width: 0.4rem;
      height: 0.2rem;
      font-size: 0.12rem;
      line-height: 1;
      margin-right: 0.08rem;
    }

    #crmWebToEntityForm .zcwf_col_fld .form_control {
      font-size: 0.16rem;
      line-height: 1;
      padding: 0 0.12rem;
      height: 0.4rem;
      padding-bottom: 0.01rem;
    }

    #crmWebToEntityForm .zcwf_col_fld textarea.form_control {
      height: 1.2rem;
      padding: 0.16rem;
    }

    #crmWebToEntityForm .zcwf_col_fld.button_wrapper {
      gap: 0.2rem;
    }

    #crmWebToEntityForm .zcwf_col_fld.button_wrapper .zcwf_button {
      width: 3.5rem;
      max-width: 100%;
      font-size: 0.2rem;
      line-height: 1;
      border-radius: 0.6rem;
      padding: 0.2rem;
    }

    #crmWebToEntityForm .zcwf_col_help {
      margin-top: 0.08rem;
      font-size: 0.13rem;
      line-height: 1.6;
    }
  }

  img.alignright {
    display: block;
    margin: 0 0 0 auto;
  }

  img.alignleft {
    display: block;
    margin: 0 auto 0 0;
  }

  img.aligncenter {
    display: block;
    margin: 0 auto;
  }
}

/* ---------------------------------------------------------------------------
 * BELOW IS NOT PART OF THE COPY. Everything above this line is
 * kyufusupport_main/css/document.css verbatim, inside the @layer wrapper.
 *
 * The copied reset lists `html` among its selectors and gives it
 * `font-size: 100%` - 16px. base.css sets 625% (100px), the root this project's
 * rem values are built on, and it loses because both are in @layer base and this
 * file is linked second. Everything rem-based on the page then rendered at
 * 100/625 of its size: the header logo came out 19x8 instead of 120x50 and the
 * footer's privacy link 2.24px instead of 14px. Measured against the top page.
 *
 * Restored for PC only. Every rem in the copied rules that this page actually
 * uses sits inside its `max-width: 767.98px` block - checked, all 27 of them - so
 * the page's own layout cannot be affected by this. SP is left to the copy, which
 * sets calc(100vw / 3.75), the width that sheet was drawn against.
 * ------------------------------------------------------------------------- */

@media (width >= 768px), print {
  html {
    font-size: 625%;
  }
}

/* Same story one layer down: the copied `body { color: #000 }` now loses to the
 * `text-text` utility the layout puts on <body>, so every element that inherits
 * its colour came out #333 instead of #000. Restated unlayered. The footer is
 * unaffected - its only text, the privacy link, carries its own `text-white`. */

body {
  color: #000;
}