/* =========================================================
   AUDIOSTAFF B2B — HOW WE WORK (top of Prices)
   Scoped: .as-hww  ·  light / grey / dark safe
   Monochrome: no accent colour of its own.
   ========================================================= */

.as-hww {
    --hww-top-bg: #ffffff;
    --hww-top-ink: #111111;
    --hww-top-muted: #6c6c65;
    --hww-top-line: #e4e4df;
    --hww-top-soft: #f5f5f1;
    --hww-top-faint: #8e8e87;

    --hww-paper: #ffffff;
    --hww-paper-2: #fafaf7;
    --hww-soft: #f5f5f1;
    --hww-line: #e4e4df;
    --hww-text: #151515;
    --hww-muted: #65655f;
    --hww-faint: #9a9a93;

    --hww-btn-bg: #111111;
    --hww-btn-ink: #ffffff;
    --hww-btn-sub: rgba(255, 255, 255, .64);
    --hww-btn-hover: #000000;

    --hww-radius: 16px;

    position: relative;
    margin: 2px 0 18px;
    color: var(--hww-text);
    font-family: inherit;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

html[data-as-display-mode="dark"] .as-hww {
    --hww-top-bg: #17191f;
    --hww-top-ink: #f1f3f8;
    --hww-top-muted: #b4becb;
    --hww-top-line: rgba(255, 255, 255, .12);
    --hww-top-soft: #1c1f26;
    --hww-top-faint: #8d97a6;

    --hww-paper: #14161b;
    --hww-paper-2: #1a1d24;
    --hww-soft: #1a1d24;
    --hww-line: rgba(255, 255, 255, .10);
    --hww-text: #e8ebf2;
    --hww-muted: #b4becb;
    --hww-faint: #8d97a6;

    --hww-btn-bg: #ffffff;
    --hww-btn-ink: #111111;
    --hww-btn-sub: #565656;
    --hww-btn-hover: #e8e8e4;
}

.as-hww *,
.as-hww *::before,
.as-hww *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   TOP / ALWAYS VISIBLE
   --------------------------------------------------------- */

.as-hww-top {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 352px;
    gap: 34px;
    padding: 30px 32px 28px;
    overflow: hidden;
    border: 1px solid var(--hww-top-line);
    border-radius: var(--hww-radius);
    background: var(--hww-top-bg);
    color: var(--hww-top-ink);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .045);
}

html[data-as-display-mode="dark"] .as-hww-top {
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.as-hww-top::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--hww-top-ink);
    opacity: 1;
}

.as-hww.is-open .as-hww-top {
    border-radius: var(--hww-radius) var(--hww-radius) 0 0;
}

.as-hww-main {
    min-width: 0;
}

.as-hww-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--hww-top-faint);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.as-hww-kicker i {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--hww-top-ink);
    box-shadow: 0 0 0 4px rgba(127, 127, 120, .12);
}

.as-hww-title {
    max-width: 800px;
    margin: 14px 0 0;
    color: var(--hww-top-faint);
    font-family: inherit;
    font-size: clamp(26px, 2.35vw, 34px);
    font-weight: 600;
    letter-spacing: -.038em;
    line-height: 1.03;
}

.as-hww-title span {
    display: block;
    color: var(--hww-top-ink);
}

.as-hww-lead {
    max-width: 730px;
    margin: 14px 0 0;
    color: var(--hww-top-muted);
    font-size: 12.5px;
    line-height: 1.62;
}

.as-hww-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 11px 0 0;
    color: var(--hww-top-faint);
    font-size: 10px;
    line-height: 1.5;
}

.as-hww-methods b {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--hww-top-ink);
    border-radius: 999px;
    color: var(--hww-top-ink);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
}

.as-hww-methods span {
    color: var(--hww-top-line);
}

.as-hww-ddp-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 730px;
    margin: 12px 0 0;
    color: var(--hww-top-faint);
    font-size: 10.5px;
    line-height: 1.5;
}

.as-hww-ddp-line b {
    flex: 0 0 auto;
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--hww-top-ink);
    border-radius: 999px;
    color: var(--hww-top-ink);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.3;
}

.as-hww-lead b {
    color: var(--hww-top-ink);
    font-weight: 600;
}

/* Steps */

.as-hww-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 24px 0 0;
    border-top: 1px solid var(--hww-top-line);
}

.as-hww-step {
    min-width: 0;
    padding: 13px 15px 0 0;
}

.as-hww-step + .as-hww-step {
    padding-left: 15px;
    border-left: 1px solid var(--hww-top-line);
}

.as-hww-step em {
    display: block;
    color: var(--hww-top-faint);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1;
}

.as-hww-step b {
    display: block;
    margin-top: 5px;
    color: var(--hww-top-ink);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: -.005em;
    line-height: 1.25;
}

.as-hww-step span {
    display: block;
    margin-top: 3px;
    color: var(--hww-top-faint);
    font-size: 10.5px;
    line-height: 1.4;
}

/* Right side */

.as-hww-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.as-hww-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin: 0;
    padding: 0;
}

.as-hww-fact {
    min-width: 0;
    padding: 11px 0 10px;
    border-top: 1px solid var(--hww-top-line);
}

.as-hww-fact dt {
    color: var(--hww-top-faint);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.as-hww-fact dd {
    margin: 4px 0 0;
    color: var(--hww-top-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.25;
}

/* Toggle */

.as-hww-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    padding: 10px 14px;
    border: 1px solid var(--hww-btn-bg);
    border-radius: 10px;
    background: var(--hww-btn-bg);
    color: var(--hww-btn-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.as-hww-toggle:hover {
    background: var(--hww-btn-hover);
    border-color: var(--hww-btn-hover);
}

.as-hww-toggle:focus-visible {
    outline: 2px solid var(--hww-top-ink);
    outline-offset: 3px;
}

.as-hww-toggle .t {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.15;
}

.as-hww-toggle .s {
    display: block;
    margin-top: 2px;
    color: var(--hww-btn-sub);
    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.3;
}

.as-hww-toggle svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    transition: transform .22s ease;
}

.as-hww.is-open .as-hww-toggle svg {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------
   DETAILS / COLLAPSIBLE
   --------------------------------------------------------- */

.as-hww-details {
    margin: 0;
    padding: 30px 32px 26px;
    border: 1px solid var(--hww-line);
    border-top: 0;
    border-radius: 0 0 var(--hww-radius) var(--hww-radius);
    background: var(--hww-paper);
    color: var(--hww-text);
}

.as-hww[hidden],
.as-hww-details[hidden] {
    display: none !important;
}

.as-hww-dhead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hww-line);
}

.as-hww-dkicker {
    color: var(--hww-faint);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.2;
    text-transform: uppercase;
}

.as-hww-dhead h3 {
    margin: 8px 0 0;
    color: var(--hww-text);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.as-hww-dhead p {
    max-width: 850px;
    margin: 8px 0 0;
    color: var(--hww-muted);
    font-size: 11.5px;
    line-height: 1.6;
}

.as-hww-close {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--hww-line);
    border-radius: 99px;
    background: var(--hww-paper);
    color: var(--hww-text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.as-hww-close:hover {
    background: var(--hww-soft);
}

.as-hww-close:focus-visible {
    outline: 2px solid var(--hww-text);
    outline-offset: 2px;
}

/* Freight callout */

.as-hww-callout {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding: 12px 14px;
    border-left: 3px solid var(--hww-text);
    background: var(--hww-soft);
    color: var(--hww-muted);
    font-size: 11px;
    line-height: 1.55;
}

.as-hww-callout b {
    color: var(--hww-text);
    font-weight: 700;
}

/* Sections */

.as-hww-section {
    margin-top: 24px;
}

.as-hww-shead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 11px;
}

.as-hww-shead h4 {
    margin: 0;
    color: var(--hww-faint);
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.2;
    text-transform: uppercase;
}

.as-hww-shead span {
    color: var(--hww-faint);
    font-size: 9.5px;
    line-height: 1.3;
    text-align: right;
}

/* Process cards */

.as-hww-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.as-hww-pcard {
    min-width: 0;
    padding: 15px 16px 14px;
    border: 1px solid var(--hww-line);
    border-radius: 10px;
    background: var(--hww-paper-2);
}

.as-hww-pcard em {
    display: block;
    color: var(--hww-faint);
    font-size: 8.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
}

.as-hww-pcard b {
    display: block;
    margin-top: 6px;
    color: var(--hww-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.3;
}

.as-hww-pcard p {
    margin: 5px 0 0;
    color: var(--hww-muted);
    font-size: 11px;
    line-height: 1.58;
}

/* Company */

.as-hww-company {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 16px 30px;
    margin-top: 10px;
    padding: 17px 18px 15px;
    border: 1px solid var(--hww-line);
    border-radius: 10px;
    background: var(--hww-soft);
}

.as-hww-company .name {
    color: var(--hww-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.as-hww-company .addr {
    margin-top: 4px;
    color: var(--hww-muted);
    font-size: 10.5px;
    line-height: 1.6;
}

.as-hww-company .meta {
    color: var(--hww-muted);
    font-size: 10px;
    line-height: 1.65;
}

.as-hww-company .meta a {
    color: var(--hww-text);
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid var(--hww-text);
}

.as-hww-company .note {
    grid-column: 1 / -1;
    padding-top: 11px;
    border-top: 1px solid var(--hww-line);
    color: var(--hww-muted);
    font-size: 10.5px;
    line-height: 1.6;
}

.as-hww-company .note b {
    color: var(--hww-text);
    font-weight: 700;
}

/* Conditions */

.as-hww-conditions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.as-hww-cond {
    min-width: 0;
    padding: 12px 0 13px;
    border-top: 1px solid var(--hww-line);
}

.as-hww-cond em {
    display: block;
    color: var(--hww-faint);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1;
}

.as-hww-cond b {
    display: block;
    margin-top: 3px;
    color: var(--hww-text);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.32;
}

.as-hww-cond p {
    margin: 4px 0 0;
    color: var(--hww-muted);
    font-size: 10.5px;
    line-height: 1.56;
}

.as-hww-cond.is-important {
    margin: 4px 0 5px;
    padding: 12px 14px;
    border: 1px solid var(--hww-line);
    border-left: 3px solid var(--hww-text);
    border-radius: 8px;
    background: var(--hww-soft);
}

.as-hww-cond.is-important b {
    color: var(--hww-text);
}

.as-hww-cond.is-important p {
    color: var(--hww-muted);
}

/* Footer */

.as-hww-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid var(--hww-line);
    color: var(--hww-faint);
    font-size: 9.5px;
    line-height: 1.5;
}

.as-hww-foot a {
    flex: 0 0 auto;
    color: var(--hww-text);
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid var(--hww-text);
}

.as-hww-foot a:hover {
    opacity: .7;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1100px) {
    .as-hww-top {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 26px;
        padding: 26px 26px 24px;
    }

    .as-hww-details {
        padding: 26px;
    }
}

@media (max-width: 980px) {
    .as-hww-top {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .as-hww-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .as-hww-toggle {
        margin-top: 16px;
    }
}

@media (max-width: 720px) {
    .as-hww-steps {
        grid-template-columns: 1fr 1fr;
    }

    .as-hww-step:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .as-hww-step:nth-child(n+3) {
        margin-top: 8px;
        padding-top: 11px;
        border-top: 1px solid var(--hww-top-line);
    }

    .as-hww-process,
    .as-hww-conditions {
        grid-template-columns: 1fr;
    }

    .as-hww-company {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .as-hww-company .note {
        grid-column: 1;
    }
}

@media (max-width: 640px) {
    .as-hww {
        margin-bottom: 14px;
    }

    .as-hww-top {
        padding: 21px 20px 20px;
        border-radius: 13px;
    }

    .as-hww.is-open .as-hww-top {
        border-radius: 13px 13px 0 0;
    }

    .as-hww-title {
        margin-top: 12px;
        font-size: 23px;
        letter-spacing: -.032em;
        line-height: 1.06;
    }

    .as-hww-lead {
        margin-top: 12px;
        font-size: 12px;
        line-height: 1.58;
    }

    .as-hww-steps {
        display: none;
    }

    .as-hww-facts {
        grid-template-columns: 1fr 1fr;
        gap: 0 16px;
    }

    .as-hww-fact {
        padding: 10px 0 9px;
    }

    .as-hww-fact dd {
        font-size: 11.5px;
    }

    .as-hww-toggle {
        min-height: 50px;
        padding: 9px 13px;
    }

    .as-hww-toggle .s {
        font-size: 9px;
    }

    .as-hww-details {
        padding: 20px 18px 20px;
        border-radius: 0 0 13px 13px;
    }

    .as-hww-dhead {
        gap: 14px;
        padding-bottom: 14px;
    }

    .as-hww-dhead h3 {
        font-size: 18px;
    }

    .as-hww-dhead p {
        font-size: 11px;
    }

    .as-hww-close {
        width: 32px;
        height: 32px;
    }

    .as-hww-pcard {
        padding: 14px;
    }

    .as-hww-pcard p,
    .as-hww-cond p {
        font-size: 10.5px;
    }

    .as-hww-shead span {
        display: none;
    }

    .as-hww-company {
        padding: 15px;
    }

    .as-hww-foot {
        display: block;
        font-size: 9px;
    }

    .as-hww-foot a {
        display: inline-block;
        margin-top: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .as-hww-toggle,
    .as-hww-toggle svg,
    .as-hww-close {
        transition: none !important;
    }
}


/* ===== GATE ===== */

.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,20,20,.45);backdrop-filter:blur(5px)}
.gate-panel{display:flex;flex-direction:column;width:min(1120px,100%);height:92dvh;max-height:92dvh;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.28);overflow:hidden}
.gate-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:22px 30px 17px;border-bottom:1px solid #e7e7e2}
.gate-kicker{font-size:8.5px;font-weight:700;letter-spacing:.16em;line-height:1.2;text-transform:uppercase;color:#8e8e87}
.gate-head h2{margin:8px 0 0;font-size:25px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.gate-head p{margin:7px 0 0;max-width:760px;font-size:11.5px;line-height:1.55;color:#666}
.gate-lang{flex:0 0 192px}
.gate-lang label{display:block;margin-bottom:5px;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#999}
.gate-lang select{width:100%;height:38px;border:1px solid #ddd;border-radius:8px;background:#fff;padding:0 10px;font:inherit;font-size:12px;color:#111}
.gate-stepper{display:flex;align-items:center;gap:0;padding:0 30px;border-bottom:1px solid #eeece7;background:#fbfbf9}
.gate-step{display:flex;align-items:center;gap:7px;padding:12px 22px 12px 0;color:#a3a39c;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gate-step i{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid #d8d8d1;border-radius:99px;font-size:8px;font-style:normal;font-weight:700;color:#999;background:#fff}
.gate-step.is-active{color:#111}
.gate-step.is-active i{border-color:#111;background:#111;color:#fff}
.gate-step.is-done i{border-color:#111;background:#fff;color:#111}
.gate-scroll{flex:1;overflow:auto;padding:24px 30px 34px;scroll-behavior:auto}
.gate-step-panel[hidden]{display:none}
.gate-scroll .as-hww{margin:0}
.gate-scroll .as-hww-top{box-shadow:none;background:#fafaf7;border-color:#e7e7e2;border-radius:12px}
.gate-scroll .as-hww-toggle{display:none}
.gate-scroll .as-hww-side{justify-content:flex-start}
.gate-foot{border-top:1px solid #e7e7e2;padding:13px 30px 12px;background:#fff}
.gate-progress{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:9.5px;color:#777}
.gate-bar{flex:1;height:3px;border-radius:99px;background:#ecece7;overflow:hidden}
.gate-bar span{display:block;width:34%;height:100%;background:#111}
.gate-nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
.gate-nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.gate-btn{appearance:none;border:0;border-radius:9px;background:#111;color:#fff;font:inherit;font-size:11.5px;font-weight:700;padding:12px 18px;cursor:pointer}
.gate-btn.secondary{background:#fff;color:#111;border:1px solid #ddd}
.gate-btn:disabled{opacity:.34;cursor:not-allowed}
.gate-note{margin:9px 0 0;font-size:8.8px;color:#8a8a83;line-height:1.45}
.gate-note a{color:#111;text-decoration:none;border-bottom:1px solid #111}
.gate-note span{margin-left:10px}
.gate-intro{max-width:900px;margin:0 0 18px}
.gate-intro h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.gate-intro p{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:#666}
.gate-conditions{display:grid;grid-template-columns:1fr;gap:0;max-width:940px;margin:0;padding:0;list-style:none}
.gate-conditions .as-hww-cond{padding:14px 0 15px}
.gate-conditions .as-hww-cond p{font-size:11px;line-height:1.62}
.gate-recap{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gate-recap li{border:1px solid #e7e7e2;border-radius:9px;padding:12px 14px;background:#fbfbf9;font-size:10.5px;line-height:1.5;color:#555}
.gate-recap b{display:block;margin-bottom:3px;color:#111;font-size:11px}
.gate-checks{margin-top:18px;display:grid;gap:9px;max-width:920px}
.gate-check{display:flex;align-items:flex-start;gap:11px;border:1px solid #e1e1db;border-radius:10px;padding:13px 15px;background:#fff;font-size:10.5px;line-height:1.5;color:#444}
.gate-check input{margin-top:2px;width:16px;height:16px;accent-color:#111;flex:0 0 16px}
.gate-check b{color:#111}
.gate-check.is-locked{background:#fafaf7;color:#999}
.gate-only-note{margin:14px 0 0;padding:11px 14px;border-left:3px solid #111;background:#f5f5f1;font-size:10.5px;line-height:1.5;color:#555}
.gate-only-note b{color:#111}
.as-hww-methods{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:11px 0 0;font-size:10px;line-height:1.5;color:#777}
.as-hww-methods b{display:inline-block;border:1px solid #111;border-radius:99px;padding:2px 7px;color:#111;font-size:8px;font-weight:700;letter-spacing:.08em}
.as-hww-methods span{color:#b3ada1}
.as-hww-ddp{margin-top:16px;border:1px solid #e5e5df;border-radius:12px;background:#fbfbf9;padding:16px 18px}
.as-hww-ddp-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.as-hww-ddp-head span:first-child{font-size:8px;font-weight:700;letter-spacing:.14em;color:#9a9a93;text-transform:uppercase}
.as-hww-ddp-head span:last-child{font-size:9px;color:#9a9a93}
.as-hww-ddp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.as-hww-ddp-card{border:1px solid #e5e5df;border-radius:9px;background:#fff;padding:13px 14px}
.as-hww-ddp-card.is-ddp{background:#f5f5f1;border-color:#d8d8d1}
.as-hww-ddp-tag{display:inline-block;font-size:7.5px;font-weight:700;letter-spacing:.12em;color:#777;border:1px solid #ddd;border-radius:99px;padding:3px 7px;background:#fff}
.as-hww-ddp-card.is-ddp .as-hww-ddp-tag{background:#111;color:#fff;border-color:#111}
.as-hww-ddp-card b{display:block;margin-top:7px;font-size:11.5px;color:#111}
.as-hww-ddp-card ul{margin:6px 0 0;padding-left:14px;color:#666;font-size:10px;line-height:1.5}
.as-hww-ddp-card li{margin:2px 0}
.as-hww-ddp-note{margin:11px 0 0;font-size:9.5px;line-height:1.5;color:#777;border-top:1px solid #e7e7e2;padding-top:10px}
@media(max-width:640px){
 .as-hww-ddp{padding:13px 14px}
 .as-hww-ddp-head{display:block}
 .as-hww-ddp-head span:last-child{display:block;margin-top:3px}
 .as-hww-ddp-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
 .gate{padding:0}
 .gate-panel{height:100dvh;max-height:100dvh;border:0;border-radius:0}
 .gate-head{flex-direction:column;gap:12px;padding:17px 18px 14px}
 .gate-lang{width:100%;flex:none}
 .gate-head h2{font-size:20px}
 .gate-head p{font-size:11px}
 .gate-stepper{padding:0 18px;overflow-x:auto}
 .gate-step{padding:11px 14px 11px 0;font-size:8px;white-space:nowrap}
 .gate-scroll{padding:18px}
 .gate-foot{padding:11px 18px}
 .gate-recap{grid-template-columns:1fr}
 .gate-conditions .as-hww-cond p{font-size:10.5px}
 .gate-btn{padding:12px 14px}
 .gate-nav{flex-wrap:wrap}
 .gate-nav-right{width:100%}
 .gate-nav-right .gate-btn{flex:1}
 .gate .as-hww-steps{display:grid;grid-template-columns:1fr 1fr}
 .gate .as-hww-step:nth-child(3){padding-left:0;border-left:0}
 .gate .as-hww-step:nth-child(n+3){margin-top:8px;padding-top:11px;border-top:1px solid var(--hww-top-line)}
}

/* ===== GATE SCOPING / FIXES ===== */
#as-hww-gate, #as-hww-gate *, #as-hww-gate *::before, #as-hww-gate *::after { box-sizing: border-box; }
#as-hww-gate { z-index: 2147483000; }
#as-hww-gate .gate-panel > form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#as-hww-gate .gate-scroll { min-height: 0; }
html.as-hww-gate-open, body.as-hww-gate-open { overflow: hidden !important; }
.gate-error { margin: 10px 30px 0; padding: 10px 12px; border: 1px solid #e3c98f; border-left: 3px solid #111; background: #fff9ec; color: #5b4a24; font-size: 11px; line-height: 1.5; }
.gate-caption { font-size: 8.5px; color: #999; letter-spacing: .08em; text-transform: uppercase; }
.as-hww-tc-head { margin: 22px 0 10px; }
.as-hww-tc-intro { margin: 6px 0 0; color: var(--hww-muted); font-size: 11.5px; line-height: 1.6; max-width: 900px; }
.as-hww-gate-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--hww-line); }
.as-hww-gate-dhead h3 { margin: 6px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; color: var(--hww-text); }
@media (max-width: 760px) {
  .gate-error { margin: 8px 18px 0; }
  .as-hww-gate-dhead h3 { font-size: 18px; }
}

/* ===== ALIGNMENT / TYPE REFINEMENTS ===== */
.gate-scroll { scroll-behavior: auto; }
.as-hww-methods { font-size: 10.5px; }
.as-hww-methods .as-hww-methods-note { flex-basis: 100%; color: var(--hww-top-faint); }
.as-hww-ddp-line { font-size: 11px; }
.as-hww-lead { font-size: 13px; }
.as-hww-fact dt { font-size: 9px; }
.as-hww-fact dd { font-size: 13px; }
.as-hww-step span { font-size: 11px; }
#as-hww-section .as-hww-toggle { margin-top: auto; }
.as-hww-next-note { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--hww-top-line); max-width: 300px; color: var(--hww-top-faint); font-size: 10.5px; line-height: 1.55; }
.gate-head h2 { font-size: 26px; }
.gate-head p { font-size: 12px; }
.gate-step { font-size: 9px; }
.gate-intro p { font-size: 12px; }
.gate-check { font-size: 11px; }
.gate-recap li { font-size: 11px; }
.gate-note { font-size: 9.5px; }
.gate-scroll { scroll-behavior: auto; }
@media (max-width: 760px) {
  .as-hww-next-note { margin-top: 14px; padding-top: 12px; font-size: 10px; }
}

/* ===== READABILITY / RECAP ===== */
.gate-intro { max-width: 900px; }
.gate-conditions { max-width: 900px; }
.gate-conditions .as-hww-cond { padding: 15px 0 16px; }
.gate-conditions .as-hww-cond b { font-size: 12.5px; }
.gate-conditions .as-hww-cond p { font-size: 12px; line-height: 1.65; }
.gate-recap li { font-size: 11.5px; line-height: 1.5; }
.gate-recap li b { display: block; margin-bottom: 3px; font-size: 11.5px; }
.gate-recap li span { display: block; color: #55554f; }
.gate-recap li b + span { font-weight: 400; }
.as-hww-details .as-hww-conditions { grid-template-columns: 1fr; max-width: 900px; }
.as-hww-details .as-hww-conditions .as-hww-cond p { font-size: 11px; line-height: 1.62; }
.as-hww-details .as-hww-tc-head { max-width: 900px; }
html[data-as-display-mode="dark"] .gate-recap li span { color: #b7becb; }
@media (max-width: 760px) {
  .gate-conditions .as-hww-cond p { font-size: 11.5px; }
  .gate-recap li { font-size: 11px; }
}

/* ===== COMPACT / MINIMIZABLE SECTION ===== */
.as-hww[data-open="0"] .as-hww-body { display: none !important; }
.as-hww-body[hidden], .as-hww-mini[hidden] { display: none !important; }
.as-hww-mini {
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
    padding: 15px 18px; border: 1px solid #e4e4df; border-top: 3px solid #111;
    border-radius: 13px; background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.035);
}
.as-hww-mini-copy { min-width: 0; display: grid; gap: 3px; }
.as-hww-mini-kicker { font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #93938c; }
.as-hww-mini strong { font-size: 14px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; color: #111; }
.as-hww-mini-meta { font-size: 10px; line-height: 1.4; color: #7a7a73; }
.as-hww-mini-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 8px; background: #111; color: #fff;
    font: inherit; font-size: 11px; font-weight: 700; padding: 10px 13px; cursor: pointer;
}
.as-hww-mini-btn:hover { background: #000; }
.as-hww-mini-btn svg { width: 14px; height: 14px; }
.as-hww-minimize {
    margin-top: 10px; align-self: flex-start; border: 0; background: transparent;
    color: #8e8e87; font: inherit; font-size: 10px; font-weight: 600; padding: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.as-hww-minimize:hover { color: #111; }
html[data-as-display-mode="dark"] .as-hww-mini { background: #17191f; border-color: rgba(255,255,255,.12); border-top-color: #fff; }
html[data-as-display-mode="dark"] .as-hww-mini-kicker { color: #8d97a6; }
html[data-as-display-mode="dark"] .as-hww-mini strong { color: #f1f3f8; }
html[data-as-display-mode="dark"] .as-hww-mini-meta { color: #aab3c2; }
html[data-as-display-mode="dark"] .as-hww-mini-btn { background: #fff; color: #111; }
html[data-as-display-mode="dark"] .as-hww-minimize { color: #aab3c2; }
@media (max-width: 760px) {
    .as-hww-mini { align-items: flex-start; flex-direction: column; gap: 10px; padding: 13px 14px; }
    .as-hww-mini-btn { width: 100%; justify-content: center; }
    .as-hww-mini strong { font-size: 13px; }
}




/* =========================================================
   DARK — near-black with a very subtle tint
   ========================================================= */

html[data-as-display-mode="dark"] .gate {
    background:
        radial-gradient(900px 650px at 10% -10%, rgba(124, 92, 255, .10), transparent 62%),
        radial-gradient(800px 600px at 100% 0%, rgba(52, 211, 255, .05), transparent 60%),
        rgba(4, 4, 6, .82);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}
html[data-as-display-mode="dark"] .gate-panel {
    background: linear-gradient(180deg, #0d0d10 0%, #08080a 100%);
    border-color: rgba(255, 255, 255, .10);
    color: #f4f4f7;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-as-display-mode="dark"] .gate-head {
    background: rgba(255, 255, 255, .012);
    border-bottom-color: rgba(255, 255, 255, .09);
}
html[data-as-display-mode="dark"] .gate-head h2 { color: #f4f4f7; }
html[data-as-display-mode="dark"] .gate-head p { color: #b9b7c4; }
html[data-as-display-mode="dark"] .gate-kicker { color: #9b98aa; }
html[data-as-display-mode="dark"] .gate-lang label { color: #9b98aa; }
html[data-as-display-mode="dark"] .gate-lang select {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    color: #f4f4f7;
}
html[data-as-display-mode="dark"] .gate-stepper {
    background: rgba(255, 255, 255, .02);
    border-bottom-color: rgba(255, 255, 255, .07);
}
html[data-as-display-mode="dark"] .gate-step { color: #7f7c8c; }
html[data-as-display-mode="dark"] .gate-step i {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #b9b7c4;
}
html[data-as-display-mode="dark"] .gate-step.is-active { color: #ffffff; }
html[data-as-display-mode="dark"] .gate-step.is-active i { background: #ffffff; border-color: #ffffff; color: #111111; }
html[data-as-display-mode="dark"] .gate-step.is-done i { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #b9b7c4; }
html[data-as-display-mode="dark"] .gate-foot {
    background: rgba(10, 10, 12, .96);
    border-top-color: rgba(255, 255, 255, .09);
}
html[data-as-display-mode="dark"] .gate-scroll { color: #f4f4f7; }

/* Summary card: charcoal, not violet */
html[data-as-display-mode="dark"] .gate-scroll .as-hww-top,
html[data-as-display-mode="dark"] #as-hww-section .as-hww-top {
    background: linear-gradient(150deg, #141418 0%, #0c0c0f 55%, #111014 100%);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-as-display-mode="dark"] .gate-scroll .as-hww-top::before,
html[data-as-display-mode="dark"] #as-hww-section .as-hww-top::before {
    background: linear-gradient(90deg, rgba(185, 170, 255, .55), rgba(255, 255, 255, .10) 55%, transparent 82%);
}
html[data-as-display-mode="dark"] .as-hww-title { color: #b9b7c4; }
html[data-as-display-mode="dark"] .as-hww-title span { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-lead { color: #b9b7c4; }
html[data-as-display-mode="dark"] .as-hww-lead b { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-ddp-line { color: #b9b7c4; }
html[data-as-display-mode="dark"] .as-hww-ddp-line b { border-color: rgba(255, 255, 255, .16); color: #d8d5e2; }
html[data-as-display-mode="dark"] .as-hww-methods { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-methods b { border-color: rgba(255, 255, 255, .22); color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-methods-note { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-fact dt { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-fact dd { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-step em { color: #9f98b8; }
html[data-as-display-mode="dark"] .as-hww-step b { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-step span { color: #9b98aa; }

/* DDP comparison: only a faint tint on the DDP card */
html[data-as-display-mode="dark"] .as-hww-ddp {
    background: rgba(255, 255, 255, .028);
    border-color: rgba(255, 255, 255, .08);
}
html[data-as-display-mode="dark"] .as-hww-ddp-head span { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-ddp-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .09);
}
html[data-as-display-mode="dark"] .as-hww-ddp-card.is-ddp {
    background:
        radial-gradient(340px 220px at 100% 0%, rgba(124, 92, 255, .10), transparent 68%),
        linear-gradient(150deg, #15141a 0%, #0c0c0f 60%, #121016 100%);
    border-color: rgba(185, 164, 255, .16);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-as-display-mode="dark"] .as-hww-ddp-card b { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-ddp-card ul { color: #b9b7c4; }
html[data-as-display-mode="dark"] .as-hww-ddp-tag {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
    color: #d8d5e2;
}
html[data-as-display-mode="dark"] .as-hww-ddp-card.is-ddp .as-hww-ddp-tag {
    background: rgba(185, 164, 255, .08);
    border-color: rgba(185, 164, 255, .20);
    color: #d8d2e8;
}
html[data-as-display-mode="dark"] .as-hww-ddp-note { border-top-color: rgba(255, 255, 255, .07); color: #9b98aa; }

/* Company / conditions: neutral */
html[data-as-display-mode="dark"] .as-hww-company {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .08);
}
html[data-as-display-mode="dark"] .as-hww-company .name { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-company .addr,
html[data-as-display-mode="dark"] .as-hww-company .note { color: #b9b7c4; }
html[data-as-display-mode="dark"] .as-hww-company .meta { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-company .meta a { color: #ffffff; border-bottom-color: rgba(255, 255, 255, .45); }
html[data-as-display-mode="dark"] .as-hww-company .note { border-top-color: rgba(255, 255, 255, .07); }
html[data-as-display-mode="dark"] .as-hww-company .note b { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-cond { border-top-color: rgba(255, 255, 255, .07); }
html[data-as-display-mode="dark"] .as-hww-cond em { color: #8f8c9c; }
html[data-as-display-mode="dark"] .as-hww-cond b { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-cond p { color: #c9c6d6; }
html[data-as-display-mode="dark"] .as-hww-cond.is-important {
    background: linear-gradient(135deg, rgba(38, 32, 22, .72), rgba(24, 21, 16, .55));
    border-color: rgba(200, 170, 110, .16);
    border-left-color: rgba(220, 185, 120, .45);
}
html[data-as-display-mode="dark"] .as-hww-cond.is-important b { color: #d9c9a8; }
html[data-as-display-mode="dark"] .as-hww-cond.is-important p { color: #bfb49c; }

/* Recap / checks */
html[data-as-display-mode="dark"] .gate-recap li {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .08);
}
html[data-as-display-mode="dark"] .gate-recap li b { color: #ffffff; }
html[data-as-display-mode="dark"] .gate-recap li span { color: #b9b7c4; }
html[data-as-display-mode="dark"] .gate-check {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .09);
    color: #d8d5e2;
}
html[data-as-display-mode="dark"] .gate-check input { accent-color: #b9a4ff; }
html[data-as-display-mode="dark"] .gate-only-note {
    background: rgba(255, 255, 255, .035);
    border-left-color: rgba(185, 164, 255, .45);
    color: #b9b7c4;
}
html[data-as-display-mode="dark"] .gate-btn {
    background: linear-gradient(140deg, #ffffff, #e9e7f4);
    color: #111111;
}
html[data-as-display-mode="dark"] .gate-btn.secondary {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    color: #f4f4f7;
}
html[data-as-display-mode="dark"] .gate-btn:disabled { opacity: .40; }
html[data-as-display-mode="dark"] .gate-progress { color: #9b98aa; }
html[data-as-display-mode="dark"] .gate-bar { background: rgba(255, 255, 255, .07); }
html[data-as-display-mode="dark"] .gate-bar span { background: linear-gradient(90deg, rgba(185, 170, 255, .70), rgba(255, 255, 255, .40)); }
html[data-as-display-mode="dark"] .gate-note { color: #8f8c9c; }
html[data-as-display-mode="dark"] .gate-note a { color: #d8d5e2; border-bottom-color: rgba(255, 255, 255, .22); }
html[data-as-display-mode="dark"] .gate-caption { color: #8f8c9c; }
html[data-as-display-mode="dark"] .gate-error {
    background: linear-gradient(135deg, rgba(40, 34, 24, .75), rgba(24, 21, 16, .55));
    border-color: rgba(200, 170, 110, .18);
    color: #d9c9a8;
}

/* Compact bar / section details */
html[data-as-display-mode="dark"] .as-hww-mini {
    background: linear-gradient(150deg, #141418, #0b0b0d);
    border-color: rgba(255, 255, 255, .09);
    border-top-color: rgba(185, 170, 255, .32);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-as-display-mode="dark"] .as-hww-mini-kicker { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-mini strong { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-mini-meta { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-mini-btn { background: #ffffff; color: #111111; }
html[data-as-display-mode="dark"] .as-hww-details {
    background: #0c0c0f;
    border-color: rgba(255, 255, 255, .08);
}
html[data-as-display-mode="dark"] .as-hww-gate-dhead { border-bottom-color: rgba(255, 255, 255, .07); }
html[data-as-display-mode="dark"] .as-hww-gate-dhead h3 { color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-tc-intro { color: #b9b7c4; }
html[data-as-display-mode="dark"] .as-hww-dkicker { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-shead h4 { color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-shead span { color: #8f8c9c; }
html[data-as-display-mode="dark"] .as-hww-foot { border-top-color: rgba(255, 255, 255, .07); color: #9b98aa; }
html[data-as-display-mode="dark"] .as-hww-foot a { color: #ffffff; border-bottom-color: rgba(255, 255, 255, .45); }
html[data-as-display-mode="dark"] .as-hww-close { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #ffffff; }
html[data-as-display-mode="dark"] .as-hww-toggle { background: linear-gradient(140deg, #ffffff, #e9e7f4); color: #111111; border-color: transparent; }
html[data-as-display-mode="dark"] .as-hww-toggle .s { color: #565656; }
html[data-as-display-mode="dark"] .as-hww-minimize { color: #8f8c9c; }

/* Align step descriptions when titles wrap (FR/DE/PT) */
.as-hww-step b { min-height: 2.5em; }
@media (max-width: 640px) {
    .as-hww-step b { min-height: 2.4em; }
}

/* Language-aware line-height for accented / CJK / Thai copy */
html[lang^="fr"] .as-hww-title,
html[lang^="pt"] .as-hww-title,
html[lang^="vi"] .as-hww-title,
html[lang^="th"] .as-hww-title,
html[lang^="ja"] .as-hww-title,
html[lang^="zh"] .as-hww-title,
html[lang^="ko"] .as-hww-title { line-height: 1.14; }
html[lang^="th"] .gate-head h2 { line-height: 1.28; }
html[lang^="th"] .as-hww-mini strong { line-height: 1.35; }