/*
 * App audit section (/services/app-audit/ and /audit/*).
 *
 * Written as plain CSS on purpose: the site's Tailwind bundle (css/output.css)
 * is built from khalaq_design/ and does not scan .php files, so utility classes
 * that are not already in the bundle would not exist at runtime. Brand tokens
 * below mirror khalaq_design/tailwind.config.js — the site palette, nothing new.
 */

.audit-page {
    --audit-blue: #6375E4;
    --audit-blue-light: #CED3F2;
    --audit-black: #121212;
    --audit-gray-text: #615F5F;
    --audit-gray-soft: #858585;
    --audit-gray-bg: #EAEAEA;
    --audit-line: #DFDFDF;

    padding-bottom: 60px;
}

.audit-page a {
    outline: 0;
}

/* ------------------------------------------------------------------ hero */

.audit-hero {
    padding: 40px 0 20px;
}

.audit-hero h1 {
    font-size: 46px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.audit-hero-text {
    max-width: 720px;
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.5;
}

.audit-scan-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    max-width: 720px;
}

/* Two fields and a button do not fit one 720px row at every text size, so the row
   is allowed to wrap: the URL keeps the wider basis because it is the longer value
   and the one the page is really asking for. */
.audit-scan-form input[type="url"] {
    flex: 3 1 260px;
}

.audit-scan-form input[type="email"] {
    flex: 2 1 190px;
}

.audit-scan-form input {
    min-width: 0;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--audit-line);
    border-radius: 28px;
    background: #fff;
    font-size: 16px;
    outline: 0;
}

.audit-scan-form input:focus {
    border-color: var(--audit-blue);
}

.audit-scan-form button {
    flex: 0 0 auto;
    height: 56px;
    padding: 0 32px;
    border: 0;
    border-radius: 28px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

/* The receipt that replaces the hero form once the URL is with us. S3 turns this
   into the real result panel; the shape it holds now is the shape that fills. */
.audit-scan-received {
    max-width: 720px;
    margin-top: 28px;
    padding: 24px 26px;
    border: 1px solid var(--audit-blue);
    border-radius: 14px;
    background: #fff;
    outline: 0;
}

.audit-scan-received-head {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.audit-scan-received p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55;
}

.audit-scan-received-next {
    font-size: 15px;
}

.audit-scan-error {
    max-width: 720px;
}

.audit-scan-note {
    max-width: 720px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.audit-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
}

.audit-platforms-label,
.audit-platform {
    font-size: 14px;
}

.audit-platform {
    color: var(--audit-gray-soft);
    font-weight: 600;
}

.audit-platform-link {
    color: var(--audit-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The tail of the platform row is a sentence, not another badge — it says the list is
   open-ended, so it must not read as one more tool with a name. */
.audit-platform-any {
    font-style: italic;
    font-weight: 500;
}

/* Amber, not the page's blue: this is the one panel on the page that stops the visitor
   rather than inviting them on, and it has to read differently from the CSRF error a few
   lines below it, which says "press the button again". */
.audit-local-warn {
    max-width: 720px;
    margin-top: 16px;
    padding: 18px 22px;
    border: 1px solid #E0A62A;
    border-left-width: 4px;
    border-radius: 14px;
    background: #FFF9EC;
}

.audit-local-warn h3 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.audit-local-warn p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.55;
}

.audit-local-warn a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Screen-reader-only label: the field is explained by its placeholder
   visually, but a form control still needs an accessible name. */
.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;
}

/* ----------------------------------------------------------- trust strip */

.audit-trust {
    margin-top: 60px;
}

.audit-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.audit-trust-tile {
    padding: 24px;
    border-radius: 12px;
    background: var(--audit-gray-bg);
}

/*
 * The lead tile is the strip's header, not a fifth number: it spans the whole
 * row so the four numbers below fill their row exactly at every breakpoint
 * (4 / 2+2 / stacked). It also restates the blue background by hand — the
 * markup's Tailwind `bg-blue-900` exists in output.css but loses to the
 * `.audit-trust-tile` rule above, which has the same specificity and loads
 * later, leaving white text on #EAEAEA.
 */
.audit-trust-grid > .audit-trust-tile:first-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    padding: 16px 24px;
    background: var(--audit-blue);
}

.audit-trust-lead {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.audit-trust-tile .number {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
}

.audit-trust-tile .caption {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.4;
}

.audit-source {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    text-decoration: underline;
}

@media (max-width: 1023px) {
    .audit-trust-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
    .audit-hero h1 { font-size: 32px; }
    .audit-scan-form { flex-direction: column; }
    .audit-scan-form button { width: 100%; }
    .audit-trust-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- section basics */

.audit-page .sub-title {
    margin-top: 60px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.audit-page h2 {
    margin-top: 10px;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
}

/* ---------------------------------------------------------- what breaks */

.audit-findings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 30px;
}

.audit-finding {
    padding: 24px;
    border: 1px solid var(--audit-line);
    border-radius: 12px;
    background: #fff;
}

.audit-finding .number {
    font-size: 22px;
    font-weight: 800;
}

.audit-finding h3 {
    margin-top: 8px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.audit-finding p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
}

.audit-finding code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--audit-gray-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.audit-finding-price {
    margin-top: 14px;
    font-size: 13px;
    font-style: italic;
}

/* ----------------------------------------------------------- how it works */

.audit-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 30px;
}

.audit-step .number {
    font-size: 22px;
    font-weight: 800;
}

.audit-step h3 {
    margin-top: 6px;
    font-size: 19px;
    font-weight: 700;
}

.audit-step p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
}

.audit-how-note {
    margin-top: 26px;
    font-size: 17px;
    font-weight: 600;
}

@media (max-width: 1023px) {
    .audit-findings-grid { grid-template-columns: repeat(2, 1fr); }
    .audit-steps         { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
    .audit-page h2       { font-size: 26px; }
    .audit-findings-grid { grid-template-columns: 1fr; }
    .audit-steps         { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- pricing */

.audit-pricing-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.audit-pricing-sub {
    margin-top: 10px;
    font-size: 16px;
    font-style: italic;
}

.audit-currency {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid var(--audit-line);
    border-radius: 22px;
    background: #fff;
}

.audit-currency-btn {
    padding: 8px 18px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    font-weight: 700;
    font-size: 14px;
    color: var(--audit-gray-text);
    cursor: pointer;
}

.audit-currency-btn.active {
    background: var(--audit-blue);
    color: #fff;
}

.audit-plans {
    display: grid;
    /* Four columns, not five: Scan and Report share the first one. Five equal columns
       left every card 235px wide and turned the row into a wall of text in which the
       most expensive plan had to argue for itself in the same width as the free one. */
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 30px;
}

/* The Scan/Report card. Its two offers occupy the same space one at a time, so the
   column is one card the height of a card rather than two stacked into a column twice
   the height of the row. */
.audit-plan-tabs {
    display: inline-flex;
    grid-row: 1;
    justify-self: start;
    margin-bottom: 14px;
    padding: 3px;
    border: 1px solid var(--audit-line);
    border-radius: 20px;
    background: #fff;
}

.audit-plan-tab {
    padding: 6px 12px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    font-weight: 700;
    /* Reads as the card's heading, because it is one: it replaces the <h3> the other
       cards carry, so it matches .audit-plan h3 rather than the currency pills. */
    font-size: 17px;
    color: var(--audit-gray-text);
    cursor: pointer;
}

.audit-plan-tab.active {
    background: var(--audit-blue);
    color: #fff;
}

/* Grid, not the flex column the other cards use: the tab strip takes the first row and
   BOTH panes are placed in the second, one on top of the other. The card is therefore
   always as tall as the longer of the two offers, and throwing the switch does not make
   the pricing row jump. */
/* Two classes, because .audit-plan's display:flex is declared later in this file and
   would otherwise win on source order alone. */
.audit-plan.audit-plan-switch {
    display: grid;
    grid-template-rows: auto 1fr;
}

/* The pane, not the card, is what the CTA's margin-top:auto measures itself against. */
.audit-plan-pane {
    display: flex;
    flex-direction: column;
    grid-row: 2;
    grid-column: 1;
    min-width: 0;
}

/* [hidden] would set display:none and take the pane out of the sizing; it has to stay
   laid out for the card to keep the taller pane's height. Hidden from the reader and
   from assistive technology, still measured. */
.audit-plan-pane[hidden] {
    display: flex;
    visibility: hidden;
}

.audit-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Fills the grid row, so margin-top:auto on the CTA lands every button on the same
       line. It cost a page of white while the first column was a 793px stack of two
       cards; with that column collapsed into one switchable card the tallest and
       shortest plan are 100px apart and the shared baseline is worth it. */
    height: 100%;
    padding: 24px 18px;
    border: 1px solid var(--audit-line);
    border-radius: 14px;
    background: #fff;
}

.audit-plan.featured {
    border-color: var(--audit-blue);
    box-shadow: 0 8px 30px rgba(99, 117, 228, 0.14);
}

.audit-plan h3 {
    font-size: 18px;
    font-weight: 700;
}

.audit-price {
    margin-top: 10px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
}

.audit-plan-term {
    margin-top: 4px;
    font-size: 13px;
}

/* Sits with the price, not with the features: it is a term of the sale. */
.audit-plan-guarantee {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.audit-plan ul {
    margin-top: 16px;
    /* The gap above the CTA lives here, not on .audit-plan-cta: a margin-top on the
       CTA would override the "margin-top: auto" that pins it to the bottom of the
       card, which is exactly what a "ul + .audit-plan-cta" rule used to do. */
    margin-bottom: 22px;
    padding-left: 18px;
    list-style: disc;
    font-size: 14px;
    line-height: 1.5;
}

.audit-plan li + li {
    margin-top: 8px;
}

.audit-plan-cta {
    /* Kept for the cards that do end up sharing a height — a wrapped heading or a
       one-line difference in the bullets — so the CTA still lands on the card's floor
       rather than floating above it. */
    margin-top: auto;
    padding: 14px 12px;
    border-radius: 26px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* The reference points the prices are read against — same weight as the table, not
   the weight of the small print underneath it. */
.audit-pricing-anchor {
    margin-top: 22px;
    padding-left: 16px;
    border-left: 3px solid var(--audit-blue);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

.audit-pricing-fineprint {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 1279px) {
    /* Three then two: five cards over two rows with the free entry point and the two
       cheapest steps together on the first. */
    .audit-plans { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .audit-plan  { padding: 26px 22px; }
}

@media (max-width: 899px) {
    .audit-plans { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
    .audit-pricing-head   { flex-direction: column; align-items: flex-start; }
    .audit-plans          { grid-template-columns: 1fr; }
    .audit-pricing-anchor { font-size: 16px; }
}

/* --------------------------------------------------------------- report */

.audit-report-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 26px;
    align-items: start;
}

.audit-report-row ul {
    padding-left: 18px;
    list-style: disc;
    font-size: 16px;
    line-height: 1.6;
}

.audit-report-row li + li {
    margin-top: 10px;
}

.audit-report-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 24px;
    border: 1px dashed var(--audit-line);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
}

/* ------------------------------------------------------------ guarantee */

.audit-guarantee {
    margin-top: 60px;
    padding: 40px;
    border-radius: 16px;
}

.audit-guarantee h2 {
    font-size: 28px;
    font-weight: 800;
}

.audit-guarantee-text {
    max-width: 780px;
    margin-top: 14px;
    font-size: 18px;
    line-height: 1.5;
}

.audit-guarantee-fineprint {
    max-width: 780px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.85;
}

/* ------------------------------------------------------------------ faq */

.audit-faq-note {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.5;
}

.audit-faq-list {
    margin-top: 26px;
    border-top: 1px solid var(--audit-line);
}

.audit-faq-item {
    border-bottom: 1px solid var(--audit-line);
}

.audit-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.audit-faq-sign {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--audit-blue);
    border-bottom: 2px solid var(--audit-blue);
    transform: rotate(45deg) translateY(-4px);
    transition: transform 0.15s ease;
}

.audit-faq-item.active .audit-faq-sign {
    transform: rotate(225deg) translateY(-4px);
}

/* Preline opens an accordion by animating an inline height, and relies on overflow:hidden
   coming from its own stylesheet. This site does not have that stylesheet: khalaq_design/
   compiles Tailwind from HTML and JS only, so no class that appears solely in PHP ever
   reaches output.css — and output.css contains no .hs-accordion rule at all. Without the
   overflow, a closed answer keeps display:block with height:0 and paints its text straight
   over the question below it. The transition is Preline's too, and went missing with it. */
.audit-faq-answer {
    overflow: hidden;
    transition: height 0.25s ease;
}

.audit-faq-answer p {
    padding-bottom: 20px;
    max-width: 860px;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 639px) {
    .audit-report-row  { grid-template-columns: 1fr; }
    .audit-guarantee   { padding: 26px; }
    .audit-faq-question { font-size: 16px; }
}

/* ------------------------------------------------------------- checklist */

.audit-checklist-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.audit-filter-pill {
    padding: 9px 16px;
    border: 1px solid var(--audit-line);
    border-radius: 20px;
    background: #fff;
    font-size: 14px;
    color: var(--audit-gray-text);
    cursor: pointer;
}

.audit-filter-pill.active {
    border-color: var(--audit-blue);
    background: var(--audit-blue);
    color: #fff;
}

.audit-filter-pill .count {
    opacity: 0.7;
}

.audit-checklist-group {
    margin-top: 46px;
}

.audit-checklist-group h2 {
    font-size: 26px;
    font-weight: 800;
}

.audit-checklist-intro {
    margin-top: 8px;
    max-width: 780px;
    font-size: 15px;
    line-height: 1.5;
}

.audit-checklist-items {
    margin-top: 18px;
    border-top: 1px solid var(--audit-line);
}

.audit-checklist-items li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--audit-line);
}

.audit-item-id {
    flex: 0 0 42px;
    font-size: 13px;
    font-weight: 700;
}

.audit-item-title {
    flex: 1 1 auto;
    font-size: 16px;
    line-height: 1.45;
}

/* The translation line, on the checks whose wording only makes sense for one stack.
   Smaller and quieter than the check itself: it is there for the reader whose app
   keeps its data somewhere other than Supabase, and skipped by everyone else. */
.audit-item-detail {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
}

.audit-sev {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Severity is carried by the label text, not by colour alone. */
.audit-sev-critical { background: #F6D9D9; color: #8A1F1F; }
.audit-sev-high     { background: #F7E4CF; color: #8A4A12; }
.audit-sev-medium   { background: #F6F0CC; color: #7A6A12; }
.audit-sev-low      { background: var(--audit-gray-bg); color: var(--audit-gray-text); }

.audit-checklist-cta {
    margin-top: 60px;
    padding: 36px;
    border-radius: 16px;
}

.audit-checklist-cta h2 { font-size: 26px; font-weight: 800; }
.audit-checklist-cta p  { margin-top: 10px; font-size: 16px; }

.audit-checklist-cta-button {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 26px;
    border-radius: 26px;
    background: #fff;
    color: var(--audit-blue);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
}

@media (max-width: 639px) {
    .audit-checklist-items li { flex-wrap: wrap; }
    .audit-item-title         { flex: 1 1 100%; order: 3; }
}

/* ----------------------------------------------------------------- form */

.audit-form-block {
    margin-top: 60px;
}

.audit-form-sub {
    margin-top: 10px;
    font-size: 16px;
}

.audit-form {
    margin-top: 26px;
    max-width: 860px;
}

/* Three short labelled steps instead of one flat wall of eleven fields. */
.audit-form-note {
    margin-top: -8px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
}

.audit-form-section {
    padding-top: 22px;
    border-top: 1px solid var(--audit-line);
}

.audit-form-section + .audit-form-section {
    margin-top: 30px;
}

.audit-form-section-title {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.audit-form-optional {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    color: var(--audit-gray-text);
}

.audit-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.audit-form-error {
    margin-top: 26px;
    padding: 20px 22px;
    border: 1px solid var(--audit-blue);
    border-radius: 14px;
    background: #fff;
}

.audit-form-error h3 {
    font-size: 18px;
    font-weight: 800;
}

.audit-form-error p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
}

.audit-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.audit-form label {
    display: block;
}

.audit-form label > span,
.audit-form legend {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--audit-black);
}

.audit-form input[type="text"],
.audit-form input[type="email"],
.audit-form input[type="url"],
.audit-form select,
.audit-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--audit-line);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    font-family: inherit;
    outline: 0;
}

/* The native chevron is painted by the browser hard against the inner edge of the
   border and does not move for padding, so on a rounded field it sits in the corner.
   Dropping the native appearance and drawing our own is the only way to place it:
   an inline SVG, so it costs no request and cannot 404. The extra right padding
   keeps a long option from running underneath it. */
.audit-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* Forced-colours users get the native control back: our SVG is not repainted. */
@media (forced-colors: active) {
    .audit-form select {
        appearance: auto;
        -webkit-appearance: auto;
        padding-right: 16px;
        background-image: none;
    }
}

.audit-form input:focus,
.audit-form select:focus,
.audit-form textarea:focus {
    border-color: var(--audit-blue);
}

.audit-form-wide {
    margin-top: 18px;
}

.audit-form-radios {
    margin-top: 22px;
    padding: 0;
    border: 0;
}

.audit-form-radios label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 400;
}

.audit-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.5;
}

.audit-consent input {
    margin-top: 3px;
}

.audit-form button[type="submit"] {
    margin-top: 24px;
    padding: 14px 36px;
    border: 0;
    border-radius: 26px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
}

/* .audit-form label and .audit-consent both set a display, which outranks the UA rule
   behind the hidden attribute — without this the step script would hide nothing. */
.audit-form-block [hidden] {
    display: none !important;
}

.audit-form-intro {
    margin-top: 26px;
    padding: 24px 26px;
    border: 1px solid var(--audit-line);
    border-radius: 14px;
    background: #fff;
}

.audit-form-intro p {
    max-width: 640px;
    font-size: 15px;
    line-height: 1.55;
}

.audit-form-open {
    margin-top: 18px;
    padding: 14px 36px;
    border: 0;
    border-radius: 26px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.audit-form-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.audit-form-count {
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.audit-form-back {
    padding: 13px 22px;
    border: 1px solid var(--audit-line);
    border-radius: 26px;
    background: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.audit-form-next {
    padding: 14px 36px;
    border: 0;
    border-radius: 26px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    cursor: pointer;
}

/* Honeypot: off-screen rather than display:none — some bots skip hidden fields. */
.audit-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.audit-form-result {
    margin-top: 26px;
    padding: 26px;
    border-radius: 12px;
    background: var(--audit-gray-bg);
    text-align: center;
}

.audit-form-result h3 {
    font-size: 22px;
    font-weight: 800;
}

.audit-form-result p {
    margin-top: 8px;
    font-size: 15px;
}

@media (max-width: 639px) {
    .audit-form-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- legal / cookies */

.audit-legal h2 {
    margin-top: 34px;
    font-size: 22px;
    font-weight: 800;
}

.audit-legal h3 {
    margin-top: 22px;
    font-size: 17px;
    font-weight: 700;
}

.audit-legal p {
    margin-top: 10px;
    max-width: 820px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--audit-gray-text);
}

.audit-legal-updated {
    margin-top: 10px;
    font-size: 14px;
}

.audit-legal code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--audit-gray-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
}

.khalaq-cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 22px;
    border-radius: 14px;
    background: #121212;
    color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.khalaq-cookie-banner p {
    flex: 1 1 320px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.khalaq-cookie-banner a {
    color: #CED3F2;
    text-decoration: underline;
}

.khalaq-cookie-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.khalaq-cookie-banner button {
    padding: 10px 22px;
    border: 0;
    border-radius: 22px;
    background: #6375E4;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.khalaq-cookie-banner button.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
}