/*
 * The website's driver sign-up as steps (task 189, 26 Oct 2026;
 * partials/driver-signup.blade.php on every driver sign-up form, the
 * owner's reference 1). Drawn inside four different pages (two themes, the
 * /provider/login REGISTER step, /register-driver) whose own sheets style
 * bare inputs, labels, spans and buttons - some with !important - so every
 * rule here is scoped under :is(#gt-su-x, .gt-su) (an id's weight without an
 * id in the page) and sets what those pages set.
 *
 * Measured by tests/visual/specs/driver-signup-steps.spec.ts.
 *
 *   back circle 40px · tracker circles 28px, lines 2px · card radius 16px,
 *   padding 20px (16px on a phone) · labels above, 12.5px / 500 grey ·
 *   fields 48px, radius 12px, light grey fill, icon inside · pairs side by
 *   side down to 360px · button a full-width pill, 52px, arrow after.
 *
 * Colours: the site's brand (--gt-su-brand: the page's site_color) and fixed
 * neutrals. Values dark 15px / 400 (labelled facts are never bold).
 */
:is(#gt-su-x, .gt-su) {
    --gt-su-red: var(--gt-su-brand, var(--site-color, #C23F38));
    --gt-su-tint: color-mix(in srgb, var(--gt-su-red) 9%, #FFFFFF);
    --gt-su-ink: #1A1413;
    --gt-su-soft: #5E5654;
    --gt-su-faint: #8A8F98;
    --gt-su-line: #E7E1E0;
    --gt-su-fill: #F5F4F3;
    --gt-su-surface: #FFFFFF;
    --gt-su-danger: #B4231C;
    /* Its own block formatting context, below any float the page left before it
       (the /provider/login REGISTER step's floated Bootstrap columns put the bar
       beside them, 0px wide). */
    display: flow-root; clear: both; width: 100%; max-width: 720px; margin: 0 auto; padding: 0;
    color: var(--gt-su-ink); text-align: left; font-size: 15px; line-height: 1.4;
    box-sizing: border-box;
}
:is(#gt-su-x, .gt-su) *, :is(#gt-su-x, .gt-su) *::before, :is(#gt-su-x, .gt-su) *::after { box-sizing: border-box; }
:is(#gt-su-x, .gt-su) [hidden], :is(#gt-su-x, .gt-su)[hidden] { display: none !important; }

/* ------------------------------------------------------------ the top bar */
/* Task 194: the tracker's circles sit 8px under the bar (4px margin + the strip's 4px top room for the
   active ring), the screen's title 14px under the tracker. */
:is(#gt-su-x, .gt-su) .gt-su-bar { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0 0 4px; }
:is(#gt-su-x, .gt-su) .gt-su-back {
    position: static !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
    border: 1px solid var(--gt-su-line) !important; border-radius: 999px !important; background: var(--gt-su-surface) !important;
    color: var(--gt-su-ink) !important; box-shadow: 0 1px 2px rgba(20, 10, 10, .06); cursor: pointer; float: none !important;
    font-size: 0 !important; text-decoration: none !important; transform: none !important;
}
:is(#gt-su-x, .gt-su) .gt-su-back:hover { background: var(--gt-su-fill) !important; }
:is(#gt-su-x, .gt-su) .gt-su-back:focus-visible { outline: 2px solid var(--gt-su-red); outline-offset: 2px; }
:is(#gt-su-x, .gt-su) h2.gt-su-bar-title {
    margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important;
    font-size: 20px !important; line-height: 1.25 !important; font-weight: 600 !important; color: var(--gt-su-ink) !important;
    text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
}

/* -------------------------------------------------------------- tracker */
:is(#gt-su-x, .gt-su) .gt-su-track { display: block; min-width: 0; margin: 0 0 14px; }
/* Task 194: a sideways strip - every step the same width (96px, growing to share the room when they
   all fit), scrolled with the finger (momentum, no scrollbar); the script keeps the active step in the
   middle. Top / bottom room so the active ring is not clipped by the scroll box. */
:is(#gt-su-x, .gt-su) .gt-su-steps {
    /* width 0 + min-width 100%: the strip fills its box but adds nothing to the page's own sizing - the
       host pages' shrink-to-fit columns grew to the steps' 96px each (the form 384px wide at 390, the page
       scrolled sideways) with width: 100%. */
    position: relative; display: flex; flex-wrap: nowrap; width: 0; min-width: 100%;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 0 !important; padding: 4px 0 2px !important; list-style: none !important;
}
:is(#gt-su-x, .gt-su) .gt-su-steps::-webkit-scrollbar { display: none; }
:is(#gt-su-x, .gt-su) .gt-su-step {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex: 1 0 var(--gt-su-step-w, 96px); min-width: var(--gt-su-step-w, 96px);
    margin: 0 !important; padding: 0 4px !important; float: none !important; text-align: center; list-style: none !important;
}
/* The one line a screen reader hears ("Step 2 of 5: Vehicle"); the circles are aria-hidden. */
:is(#gt-su-x, .gt-su) .gt-su-sr {
    position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* The thin line to the next step, from this circle's edge to the next one's. */
:is(#gt-su-x, .gt-su) .gt-su-step:not(:last-child)::after {
    content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px);
    height: 2px; border-radius: 2px; background: var(--gt-su-line, #E7E1E0);
}
:is(#gt-su-x, .gt-su) .gt-su-step[data-state="done"]:not(:last-child)::after { background: var(--gt-su-red, #C23F38); }
:is(#gt-su-x, .gt-su) .gt-su-dot {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--gt-su-line, #E7E1E0);
    background: var(--gt-su-fill, #F5F4F3); color: var(--gt-su-faint, #8A8F98);
    font-size: 13px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
}
:is(#gt-su-x, .gt-su) .gt-su-tick { display: none; }
:is(#gt-su-x, .gt-su) .gt-su-step[data-state="active"] .gt-su-dot {
    border-color: var(--gt-su-red, #C23F38); background: var(--gt-su-red, #C23F38); color: #FFFFFF;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gt-su-red, #C23F38) 16%, transparent);
}
:is(#gt-su-x, .gt-su) .gt-su-step[data-state="done"] .gt-su-dot { border-color: var(--gt-su-red, #C23F38); background: var(--gt-su-red, #C23F38); color: #FFFFFF; }
:is(#gt-su-x, .gt-su) .gt-su-step[data-state="done"] .gt-su-num { display: none; }
:is(#gt-su-x, .gt-su) .gt-su-step[data-state="done"] .gt-su-tick { display: block; }
:is(#gt-su-x, .gt-su) .gt-su-lbl {
    display: block; font-size: 11.5px; line-height: 1.25; font-weight: 500;
    color: var(--gt-su-faint, #8A8F98); white-space: nowrap; /* never cut or broken mid-word (task 194) */
}
:is(#gt-su-x, .gt-su) .gt-su-step[data-state="active"] .gt-su-lbl { color: var(--gt-su-red, #C23F38); font-weight: 600; }
:is(#gt-su-x, .gt-su) .gt-su-step[data-state="done"] .gt-su-lbl { color: var(--gt-su-ink, #1A1413); }

/* ------------------------------------------------------- title and cards */
:is(#gt-su-x, .gt-su) .gt-su-head { margin: 0 0 16px; }
:is(#gt-su-x, .gt-su) h3.gt-su-title {
    margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; float: none !important;
    font-size: 22px !important; line-height: 1.25 !important; font-weight: 700 !important; color: var(--gt-su-ink) !important;
    text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
}
:is(#gt-su-x, .gt-su) h3.gt-su-title:focus { outline: none; }
:is(#gt-su-x, .gt-su) .gt-su-sub, :is(#gt-su-x, .gt-su) .gt-su-card-sub {
    margin: 0 !important; padding: 0; font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--gt-su-soft); text-align: left;
}
:is(#gt-su-x, .gt-su) .gt-su-card {
    display: block; margin: 0 0 16px; padding: 20px;
    background: var(--gt-su-surface); border: 1px solid var(--gt-su-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 10, 10, .04), 0 6px 20px rgba(20, 10, 10, .05);
}
:is(#gt-su-x, .gt-su) .gt-su-card-head { margin: 0 0 16px; }
:is(#gt-su-x, .gt-su) .gt-su-card h3.gt-vs-heading {
    margin: 0 0 2px !important; padding: 0 !important; border: 0 !important; float: none !important; width: auto;
    font-size: 17px !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--gt-su-ink) !important;
    text-align: left !important; text-transform: none !important; letter-spacing: 0 !important;
}

/* ------------------------------------------------------------- the grid */
:is(#gt-su-x, .gt-su) .gt-su-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
:is(#gt-su-x, .gt-su) .gt-su-grid > * {
    grid-column: auto; width: auto !important; max-width: none !important; min-width: 0;
    margin: 0 !important; padding: 0 !important; float: none !important; flex: none !important;
}
:is(#gt-su-x, .gt-su) .gt-su-grid > .gt-su-full,
:is(#gt-su-x, .gt-su) .gt-su-grid > [data-field="service_number"],
:is(#gt-su-x, .gt-su) .gt-su-grid > [data-field="vehicle_type"] { grid-column: 1 / -1; }
/* The five vehicle fields' wrapper is display: contents, so they sit in this grid. */
:is(#gt-su-x, .gt-su) .gt-su-grid > .gt-vf { display: contents; }
:is(#gt-su-x, .gt-su) .gt-su-grid > .gt-vf > .gt-vf-field { min-width: 0; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; float: none !important; }
:is(#gt-su-x, .gt-su) .gt-su-grid > .gt-vf > [data-field="service_number"] { grid-column: 1 / -1; }

/* ------------------------------------------------------------ the fields */
:is(#gt-su-x, .gt-su) .gt-su-field { display: block; position: relative; min-width: 0; text-align: left; border: 0; }
:is(#gt-su-x, .gt-su) fieldset.gt-su-field { margin: 0; padding: 0; min-inline-size: 0; }
:is(#gt-su-x, .gt-su) .gt-su-loose { margin: 0 0 16px; }
:is(#gt-su-x, .gt-su) label.gt-su-label, :is(#gt-su-x, .gt-su) legend.gt-su-label, :is(#gt-su-x, .gt-su) .gt-vf-field > label {
    position: static !important; display: block !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; float: none !important;
    font-size: 12.5px !important; line-height: 1.35 !important; font-weight: 500 !important; color: var(--gt-su-soft) !important;
    text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; border: 0;
}
:is(#gt-su-x, .gt-su) .gt-fi-field { position: relative; display: block; width: 100%; margin: 0 !important; }
:is(#gt-su-x, .gt-su) .gt-fi-field > input.gt-su-input.gt-su-input,
:is(#gt-su-x, .gt-su) .gt-fi-field > select.gt-su-input.gt-su-input,
:is(#gt-su-x, .gt-su) .gt-fi-field > button.gt-su-input.gt-su-input {
    display: block !important; width: 100% !important; height: 48px !important; min-height: 48px !important; margin: 0 !important;
    padding: 0 14px 0 42px !important; border: 1px solid var(--gt-su-fill) !important; border-radius: 12px !important;
    background-color: var(--gt-su-fill) !important; box-shadow: none !important; float: none !important;
    font-family: inherit !important; font-size: 15px !important; line-height: 46px !important; font-weight: 400 !important; color: var(--gt-su-ink) !important;
    text-align: left !important; text-indent: 0 !important; letter-spacing: 0 !important;
}
:is(#gt-su-x, .gt-su) .gt-fi-field > select.gt-su-input.gt-su-input {
    padding-right: 36px !important; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E5654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important;
}
/* Task 199: the Vehicle Year sheet's button (vehicle-year-sheet.css) - a flex row with its own chevron. */
:is(#gt-su-x, .gt-su) .gt-fi-field > button.gt-vy-control.gt-su-input.gt-su-input { display: flex !important; padding-right: 12px !important; }
:is(#gt-su-x, .gt-su) .gt-fi-field > input.gt-su-input::placeholder { color: var(--gt-su-faint); opacity: 1; }
:is(#gt-su-x, .gt-su) .gt-fi-field > :is(input, select, button).gt-su-input:hover { border-color: var(--gt-su-line) !important; }
:is(#gt-su-x, .gt-su) .gt-fi-field > :is(input, select, button).gt-su-input:focus {
    outline: none; border-color: var(--gt-su-red) !important; background-color: var(--gt-su-surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gt-su-red) 14%, transparent) !important;
}
:is(#gt-su-x, .gt-su) .gt-fi-field > :is(input, select, button).gt-su-input[aria-invalid="true"] { border-color: var(--gt-su-danger) !important; }
/* Room for the eye on the passwords. */
:is(#gt-su-x, .gt-su) .gt-su-pw > input.gt-su-input.gt-su-input { padding-right: 44px !important; }
:is(#gt-su-x, .gt-su) .gt-su-eye {
    position: absolute !important; top: 0 !important; bottom: 0 !important; right: 2px !important; left: auto !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; margin: auto 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important;
    color: var(--gt-su-soft) !important; cursor: pointer; float: none !important; z-index: 4;
}
:is(#gt-su-x, .gt-su) .gt-su-eye:focus-visible { outline: 2px solid var(--gt-su-red); outline-offset: -2px; }
:is(#gt-su-x, .gt-su) .gt-su-eye .gt-su-eye-off { display: none; }
:is(#gt-su-x, .gt-su) .gt-su-eye[aria-pressed="true"] .gt-su-eye-on { display: none; }
:is(#gt-su-x, .gt-su) .gt-su-eye[aria-pressed="true"] .gt-su-eye-off { display: block; }
:is(#gt-su-x, .gt-su) span.gt-su-error, :is(#gt-su-x, .gt-su) span.gt-su-note {
    position: static !important; display: block; margin: 6px 0 0 !important; padding: 0 !important; background: none !important; float: none !important;
    font-size: 12.5px !important; line-height: 1.35 !important; font-weight: 500 !important; color: var(--gt-su-danger) !important; text-align: left;
}
:is(#gt-su-x, .gt-su) span.gt-su-note { color: var(--gt-su-soft) !important; }
/* The five vehicle fields' own line (message + counter) keeps its place under each field. */
:is(#gt-su-x, .gt-su) .gt-vf-field .gt-vf-foot { margin-top: 4px; }
:is(#gt-su-x, .gt-su) .gt-vf-field .gt-vf-foot:not(:has(> :not([hidden]))) { display: none; }
:is(#gt-su-x, .gt-su) [data-field="vehicle_type"] .help-block { display: block; margin-top: 6px; }

/* Radios (gender, gender preference). */
:is(#gt-su-x, .gt-su) .gt-su-radios { display: flex; flex-wrap: wrap; gap: 8px; }
:is(#gt-su-x, .gt-su) label.gt-su-radio {
    position: relative; display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; padding: 0 14px !important;
    border: 1px solid var(--gt-su-line); border-radius: 12px; background: var(--gt-su-surface); cursor: pointer; float: none !important;
    font-size: 14.5px !important; font-weight: 400 !important; color: var(--gt-su-ink) !important; text-transform: none !important;
}
:is(#gt-su-x, .gt-su) label.gt-su-radio > input { position: static !important; width: 18px; height: 18px; margin: 0 !important; accent-color: var(--gt-su-red); opacity: 1 !important; }
:is(#gt-su-x, .gt-su) label.gt-su-radio:has(> input:checked) { border-color: var(--gt-su-red); background: var(--gt-su-tint); }

/* --------------------------------------------- terms tick and the button */
:is(#gt-su-x, .gt-su) .gt-su-terms { margin: 4px 0 18px; }
:is(#gt-su-x, .gt-su) label.gt-su-tick {
    position: static !important; display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important;
    font-size: 14px !important; line-height: 1.45 !important; font-weight: 400 !important; color: var(--gt-su-soft) !important; text-align: left !important;
    text-transform: none !important; cursor: pointer; float: none !important;
}
:is(#gt-su-x, .gt-su) label.gt-su-tick > input {
    position: static !important; flex: 0 0 auto; width: 20px !important; height: 20px !important; margin: 0 !important; opacity: 1 !important;
    accent-color: var(--gt-su-red); appearance: auto !important; -webkit-appearance: checkbox !important;
}
:is(#gt-su-x, .gt-su) label.gt-su-tick a { color: var(--gt-su-red) !important; font-weight: 500; text-decoration: none; }
:is(#gt-su-x, .gt-su) label.gt-su-tick a:hover { text-decoration: underline; }
:is(#gt-su-x, .gt-su) button.gt-su-cta {
    position: static !important; display: flex !important; align-items: center; justify-content: center; gap: 10px;
    width: 100% !important; height: 52px !important; min-height: 52px; margin: 0 !important; padding: 0 24px !important;
    border: 0 !important; border-radius: 999px !important; background: var(--gt-su-red) !important; color: #FFFFFF !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--gt-su-red) 28%, transparent) !important; float: none !important;
    font-family: inherit; font-size: 16px !important; line-height: 1 !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
    cursor: pointer; transform: none !important;
}
:is(#gt-su-x, .gt-su) button.gt-su-cta + * { margin-top: 16px; }
:is(#gt-su-x, .gt-su) button.gt-su-cta:hover { filter: brightness(.95); }
:is(#gt-su-x, .gt-su) button.gt-su-cta:focus-visible { outline: 2px solid var(--gt-su-red); outline-offset: 3px; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 575.98px) {
    :is(#gt-su-x, .gt-su) .gt-su-card { padding: 16px; border-radius: 16px; }
    :is(#gt-su-x, .gt-su) .gt-su-grid { gap: 12px; }
    :is(#gt-su-x, .gt-su) h3.gt-su-title { font-size: 20px !important; }
}
/* Narrow phones, 360-430px (task 191; the owner's 390px reference): the
   half-width pairs (password + confirm, year + make, model + color, and any
   other pair a switch adds) are ~130-165px wide, too narrow for a 42px icon
   gutter plus a hint. Measured at 360px: "e.g. Land Cruiser" is 112px at 15px
   (105px at 14px) against 73px left beside the icon. So a pair drops its
   leading icon (the label above names it, as the iOS app's password pair
   does), its text starts at 12px, the hint is 14px and the columns sit 10px
   apart. Full-width fields keep their icon. Measured by
   tests/visual/specs/driver-signup-steps.spec.ts › "paired fields". */
@media (max-width: 430px) {
    :is(#gt-su-x, .gt-su) .gt-su-grid { column-gap: 10px; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-fi-field > span:is(#gt-fi-x, .gt-fi).gt-fi[data-field-icon] { display: none !important; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-fi-field > :is(input, select, button).gt-su-input.gt-su-input { padding-left: 12px !important; padding-inline-start: 12px !important; padding-right: 12px !important; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-fi-field > select.gt-su-input.gt-su-input { padding-right: 32px !important; background-position: right 10px center !important; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-su-pw > input.gt-su-input.gt-su-input { padding-right: 44px !important; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-fi-field > input.gt-su-input::placeholder { font-size: 14px; }
}
/* 360-380px: a few pixels more for the longest hint, so it still fits when
   the site font has not loaded and a wider fallback draws it ("e.g. Land
   Cruiser" is 113px at 14px Arial against 106px left at 360px). */
@media (max-width: 380px) {
    :is(#gt-su-x, .gt-su) .gt-su-card { padding: 16px 12px; }
    :is(#gt-su-x, .gt-su) .gt-su-grid { column-gap: 8px; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-fi-field > :is(input, select, button).gt-su-input.gt-su-input { padding-left: 10px !important; padding-inline-start: 10px !important; padding-right: 10px !important; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-fi-field > select.gt-su-input.gt-su-input { padding-right: 28px !important; background-position: right 8px center !important; }
    :is(#gt-su-x, .gt-su) :is(.gt-su-grid > .gt-su-field:not(.gt-su-full), .gt-su-grid > .gt-vf > .gt-vf-field:not([data-field="service_number"])) .gt-su-pw > input.gt-su-input.gt-su-input { padding-right: 44px !important; }
}
@media (max-width: 359.98px) {
    :is(#gt-su-x, .gt-su) .gt-su-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------- the Agreement step inside the steps (task 194) */
/* The sign-up's header and tracker stay over it: the header's Back is the step's Back and the
   header carries its title, so the step's own Back and heading are not drawn (the heading stays
   for the screen reader and the focus). */
:is(#gt-su-x, .gt-su) .gt-ag .gt-ag-back { display: none !important; }
:is(#gt-su-x, .gt-su) .gt-ag h2.gt-ag-title {
    position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}