/* AboutUs: paper, ink and one orange. Loaded after the existing section styles.
   This layer changes surfaces, frames and reading color only. Content, layout
   order, illustrations, animation timing and static posters stay in their owners. */
:is(#everywhere, #global, #languages, #platforms, #worldwide, #start-now,
    #different, #why-aboutus, #gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial, .hb-prog, .hb.hb-end,
    #help-start, #how-we-work, .hb.hb-duo, .hb.hb4, .hb.hb-ar, #contact) {
  --au-section-paper: #f3f0e8;
  --au-section-ink: #101b1b;
  --au-section-orange: #f75b2b;
  --au-section-edge: #c8cec5;
  font-family: var(--au-text, var(--font));
}
:is(#everywhere, #global, #languages, #platforms, #worldwide,
    #different, #why-aboutus, #gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial, .hb-prog, .hb.hb-end) {
  --am-ink: #f3f0e8; --am-muted: #b5c1b9; --am-line: #3d4b43; --am-line2: #5b6b62;
  --am-accent: #f75b2b; --am-paper: #101b1b; --am-pill-bg: #f75b2b; --am-pill-fg: #101b1b;
  --st-bg: #101b1b; --st-bg2: #1c2928; --st-ink: #f3f0e8; --st-sub: #d7ddd0;
  --st-dim: #b5c1b9; --st-line: #3d4b43; --st-hair: #3d4b43; --st-rule: #667665;
  --st-ok: #f75b2b; --st-shade: #0000002e; --st-accent: #f75b2b;
  background: #101b1b; color: #f3f0e8;
}
:is(#start-now, #help-start, #how-we-work, .hb.hb-duo, .hb.hb4, .hb.hb-ar, #contact) {
  --al-ink: #101b1b; --al-muted: #4f5c54; --al-line: #c8cec5; --al-strong: #aab5a8;
  --al-paper: #f3f0e8; --al-soft: #e9e6dc; --al-soft2: #dedfd4;
  --al-or: #f75b2b; --al-ort: #a83813; --al-acc: #a83813;
  --al-ui: #26332f; --al-ui2: #4f5c54; --al-ui3: #647461; --al-uiline: #d6dacf;
  --al-serif: var(--au-display, var(--font));
  --am-ink: #101b1b; --am-muted: #4f5c54; --am-line: #c8cec5; --am-line2: #aab5a8;
  --am-accent: #a83813; --am-paper: #f3f0e8;
  background: #f3f0e8; color: #101b1b;
}
#contact { --st-bg: #f3f0e8; --st-ink: #101b1b; --st-dim: #4f5c54; --st-hair: #c8cec5; }
/* The process end stays ink even when its scroll marker restores the page's
   light theme. Its feedback line and button keep their own readable colors. */
.hb.hb-end .hb-why { color: #f3f0e8; }
.hb.hb-end .hb-kst { color: #b5c1b9; }
.hb.hb-end .hb-btn.ink { background: #f3f0e8; color: #101b1b; }
.hb.hb-end .hb-btn.line { background: transparent; color: #f3f0e8; box-shadow: inset 0 0 0 1px #6c7e6c; }

:is(#everywhere .say-t, #global .rch-t, #languages .wld-t, #platforms .wal-t,
    #worldwide .glb-t, #start-now .go-t, #different .hb-dif-t,
    #help-start .hb-h,
    #how-we-work .hb-h, .hb.hb-duo .hb-h, .hb.hb4 .hb-h,
    #contact .hb-h) { font-family: var(--au-display, var(--font)); }
:is(#global .rch-p, #languages .wld-p, #platforms .wal-p, #worldwide .glb-p) { color: #b5c1b9; }
:is(#global .rch-t, #global .rch-h, #languages .wld-t, #platforms .wal-t, #worldwide .glb-t) { color: #f3f0e8; }
:is(#everywhere, #platforms, #worldwide, #start-now) { border-radius: 24px 24px 0 0; }
:is(#everywhere, #global, #languages, #platforms, #worldwide) .am-ctl {
  border-color: #697a70; background: #1c2928; color: #f3f0e8;
}

/* Intro examples: one neutral backing, readable paper and restrained status ink. */
#everywhere { padding-top: 104px; padding-bottom: 96px; }
#everywhere .say-t { color: #94a59b; }
#everywhere .say-t > .is-on { color: #f3f0e8; }
#everywhere .say-c { border-radius: 16px; background: #e4e1d7; box-shadow: inset 0 0 0 1px #ffffff14; }
#everywhere :is(.mk-win, .mk-paper, .mk-pane) { box-shadow: 0 10px 24px #101b1b12; }
#everywhere :is(.mk-paper, .mk-pane, .mk-win:not(.dk)) { background: #f3f0e8; color: #101b1b; }
#everywhere .mk-win.dk { background: #182525; color: #f3f0e8; }
#everywhere .mk-win.dk .mk-bar { background: #26332f; border-color: #35463e; }
#everywhere .mk-win.dk .mk-bar > span { background: #303e37; color: #c6d0c4; }
#everywhere .mk-bar { background: #e5e3d9; border-color: #c8cec5; }
#everywhere .mk-bar > span { background: #faf8f1; color: #586359; }
#everywhere :is(.mk-logo, .mk-q) { color: #101b1b; border-color: #40594b; }
#everywhere .mk-q::after { border-color: #40594b; }
#everywhere .mk-res .t { color: #26332f; }
#everywhere .mk-res > li.hit { background: #fae9de; box-shadow: inset 0 0 0 1px #edb294; }
#everywhere :is(.mk-tag.red, .mk-tag.grn, .mk-tag.amb) { background: #fce2d3; color: #9d3516; box-shadow: inset 0 0 0 1px #edb294; }
#everywhere .mk-note { background: #fce2d3; color: #9d3516; }
#everywhere .mk-ex { border: 1px solid #64786b; background: #1c2928; color: #f3f0e8; }

/* Three route cards: the same ink shell and paper document in every state. */
#global { padding-top: 96px; padding-bottom: 96px; }
#global .rch-win { border-radius: 16px; background: #1c2928; box-shadow: inset 0 0 0 1px #35483e; }
#global .rch-win::before {
  background: repeating-radial-gradient(circle at var(--cx) var(--cy, 50%), transparent 0 calc(var(--rr) - 1px), #bdcdb017 calc(var(--rr) - 1px) var(--rr));
}
#global .rch-doc { background: #f3f0e8; color: #101b1b; box-shadow: 0 12px 30px #00000014; }
#global .rch-doc-h { color: #3d4b43; }
#global .rch-dot { background: #f75b2b; box-shadow: 0 0 0 3px #f75b2b1c; }
#global .rch-tabs { background: #e5e3d9; }
#global .rch-tabs > span { color: #4f5c54; }
#global .rch-tabs > .is-on { background: #faf8f1; color: #101b1b; box-shadow: 0 1px 2px #101b1b12; }
#global .rch-sheet .t { color: #101b1b; outline-color: #f75b2b; }
#global .rch-sheet .t::before { background: #f75b2b; color: #101b1b; }
#global .rch-sheet .r { color: #26332f; border-color: #d3d9cc; }
#global .rch-sheet .r > span { color: #586359; }
#global :is(.rch-doc-h .rch-ex, .rch-sc-h .rch-ex) { color: #4f5c54; }
#global .rch-sent { background: #f75b2b; color: #101b1b; }
#global .rch-sent i { background: #101b1b; }
#global .rch-ok { border-color: #a83813; }
#global .rch-ok::before { border-color: #a83813; }
#global .rch-glow { background: radial-gradient(closest-side, #f75b2b14, transparent); }
#global .rch-chip > b { border-color: #6d82714d; background: #1c2928; color: #f3f0e8; box-shadow: 0 0 0 1px #101b1b; }
#global .rch-chip.is-on > b { border-color: #f75b2b; box-shadow: 0 0 0 4px #f75b2b12; }
#global .rch-sc { border-radius: 16px; background: #f3f0e8; color: #101b1b; box-shadow: 0 12px 30px #00000014; }
#global .rch-sc-i { background: #e5e3d9; color: #26332f; }
#global .rch-sc-i > span { color: #586359; }
#global .rch-sc-s .w { background: #e4e1d7; color: #4f5c54; }
#global .rch-sc-s .d { background: #f75b2b; color: #101b1b; }
#global .rch-sc-s .d .rch-ok, #global .rch-sc-s .d .rch-ok::before { border-color: #101b1b; }
#global .rch-tile > b { border-color: #4a594f; background: #26332f; color: #d8e0d2; box-shadow: 0 6px 14px #00000014; }
#global .rch-tile.is-on > b { border-color: #f75b2b; color: #f3f0e8; }
#global .rch-tile.rch-us > b { border-color: #f75b2b; background: #f75b2b; color: #101b1b; }
#global .rch-tile > b::before { box-shadow: 0 0 0 4px #f75b2b12, 0 0 20px #f75b2b20; }
#global .rch-tile > b::after { background: conic-gradient(from var(--rch-sw), #f75b2b00 0deg 230deg, #f7ad7b 335deg, #f75b2b00 360deg); }

/* Language cards and the platform wall share the route-card shell. */
#languages { padding-top: 96px; padding-bottom: 96px; }
#languages .wld-pan { border: 0; border-radius: 24px; background: #1c2928; box-shadow: inset 0 0 0 1px #3d4b43; }
#languages .wld-card { border-radius: 16px; background: #f3f0e8; color: #101b1b; box-shadow: 0 12px 28px #00000018; }
#languages .wld-card::after { background: #101b1b; }
#languages .wld-shot { background: #e5e3d9; color: #101b1b; }
#languages .wld-shot .t { color: #101b1b; }
#languages .wld-shot .u { color: #586359; }
#languages .wld-btn { background: #26332f; color: #f3f0e8; }
#languages :is(.wld-pill, .wld-list) { background: #f3f0e8; color: #101b1b; box-shadow: 0 10px 22px #00000014; }
#languages .wld-pill .fl { background: #e5e3d9; }
#languages .wld-flag { background: #f3f0e80c; }
#languages .wld-flag.is-on { background: #f3f0e827; }
#languages .wld-pin { background: #f75b2b; box-shadow: 0 0 12px #f75b2b55; }
#languages .wld-pin::after { border-color: #f75b2b99; }
#languages .wld-list li { color: #3d4b43; }
#languages .wld-list li.is-on { background: #fbe0cf; }
#languages .wld-list li > em { color: #586359; }
#languages .wld-list li.is-on > em { color: #a83813; }
#languages .wld-chk { color: #d4ddce; }
#languages .wld-chk li.h { color: #b5c1b9; }
#languages .wld-chk li.now > span { background: #f75b2b; color: #101b1b; }
#languages :is(.wld-ex, .wld-card-ex) { border-color: #afbeb0; background: #f3f0e8; color: #3d4b43; }
#languages .wld-card-ex { border-color: #637a66; background: #26332f; color: #f3f0e8; }
#platforms { padding-top: 96px; padding-bottom: 96px; }
#platforms .wal-row > span { border: 1px solid #3d4b43; border-radius: 16px; background: #1c2928; color: #c8d4c4; box-shadow: 0 6px 14px #0000000a; }
#platforms .wal-row > span.hi { border-color: #b3c2b1; background: #303e37; color: #f3f0e8; }
#platforms .wal-row > span.us { border-color: #f75b2b; background: #f75b2b; color: #101b1b; }
#worldwide .glb-fact { border-color: #7d966b80; background: #101b1be8; color: #bdccb3; }
#worldwide .glb-fact b { color: #f3f0e8; }
#worldwide .glb-fact i::before { background: #f75b2b; }
#worldwide .glb-fact i::after { border-color: #f75b2b; }

/* A paper page at the point where the visitor can begin. */
#start-now { padding-top: 96px; padding-bottom: 104px; }
#start-now :is(.go-t, .go-steps li) { color: #101b1b; }
#start-now .go-steps li { border-color: #c8cec5; }
#start-now .go-steps li > span { color: #a83813; }
#start-now :is(.go-p1, .go-p2) { border: 1px solid #c2cabe; border-radius: 16px; background: #e5e3d9; box-shadow: 0 10px 22px #101b1b0c; }
#start-now .go-doc { border-radius: 16px; background: #faf8f1; color: #101b1b; }
#start-now .go-doc :is(.s, li > span) { color: #586359; }
#start-now .go-doc li { border-color: #d3d9cc; }
#start-now .go-doc .ok { background: #fbe0cf; color: #a83813; }
#start-now .go-ex { border-color: #627863; background: #26332f; color: #f3f0e8; }
#start-now .go-btn { border-radius: 16px; background: #f75b2b; color: #101b1b; box-shadow: 0 3px 0 #a83813; }
#start-now .go-btn:hover { background: #ff7442; }
#start-now .go-btn:focus-visible { outline-color: #101b1b; }
#start-now .go-st { color: #4f5c54; }

/* The existing process keeps its live/static graphics. Its copper texture is
   replaced by a thin ink frame, with the same padding and inner coordinates. */
:is(#why-aboutus, #gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .am-win {
  border: 0; border-radius: 24px; background: #26332f; box-shadow: inset 0 0 0 1px #4a6152, 0 12px 28px #00000012;
}
:is(#why-aboutus, #gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .am-win::before { background: #f3f0e803; opacity: 1; }
:is(#why-aboutus, #gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .am-win::after {
  background: radial-gradient(45% 45% at 50% 50%, #f3f0e806, transparent 75%);
}
:is(#why-aboutus, #gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .am-win-in {
  --gfx-paper: #101b1b; --gfx-ink: #f3f0e8; --gfx-dim: #b5c1b9; --gfx-line: #3d4b43; --gfx-accent: #f75b2b;
  border: 1px solid #4a594f; border-radius: 16px; background: #101b1b; color: #b5c1b9;
}
:is(#why-aboutus, #gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .am-win-in > * {
  --gfx-paper: #101b1b; --gfx-ink: #f3f0e8; --gfx-dim: #b5c1b9; --gfx-line: #3d4b43; --gfx-accent: #f75b2b;
}
#why-aboutus .hb1-board {
  --c-cream: #101b1b; --c-paper: #101b1b; --c-sand: #26332f; --c-sand2: #26332f; --c-sand3: #26332f;
  --c-line: #3d4b43; --c-line2: #3d4b43; --c-rule: #566f5b; --c-mute: #9cad9c; --c-dim: #9cad9c;
  --c-sub: #b5c1b9; --c-ink: #f3f0e8; --c-ink2: #e4e9dc; --c-or: #f75b2b; --c-ort: #ffad80;
  --c-ok: #ffad80; --c-okb: transparent; --c-okl: #f75b2b;
}
#why-aboutus .hb1-meta { background: #1c2928; border-color: #3d4b43; color: #b5c1b9; }
#why-aboutus .hb1-meta .hb-nm { color: #f3f0e8; }
#why-aboutus .hb-stc.is-ok { border-color: #f75b2b80; color: #ffad80; }
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .gx { color: #b5c1b9; font-family: var(--au-text, var(--font)); }
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) :is(.gx-hd, .gx-ft) { background: #1c2928; border-color: #3d4b43; }
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) :is(.gx-nm, .gx-r-t) { color: #f3f0e8; }
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) :is(.gx-hd-m, .gx-r-s, .gx-ft-t) { color: #9cad9c; }
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .gx-chip.is-ok,
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .gx-chip.is-or { border-color: #f75b2b80; color: #ffad80; background: transparent; }
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .gx-dot.is-ok { background: #f75b2b; }
:is(#gfx-sweep, #gfx-bits, #gfx-route, #gfx-dial) .gx-hd > .gx-ic { color: #f75b2b; }

/* Paper chapters: no peach band or marble; the original evidence remains. */
#help-start::before { background: #f3f0e8; filter: none; }
#help-start :is(.hb2-it, .hb2-win) { border-color: #c8cec5; background: #faf8f1; box-shadow: 0 3px 12px #101b1b08; }
#help-start .hb2-it { border-radius: 16px; }
#help-start .hb2-it.is-sel { background: #faf8f1; box-shadow: 0 3px 12px #101b1b08; }
#help-start .hb2-win { border-radius: 16px; }
#help-start .hb2-win .hb-wh { background: #e5e3d9; }
#help-start .hb2-items { background: #f3f0e8; }
#help-start .hb2-out { border-color: #d6dacf; border-radius: 16px; background: #f3f0e8; box-shadow: 0 2px 8px #101b1b05; }
#help-start .hb2-gl { filter: saturate(.3); }
#how-we-work :is(.hb3-win, .hb3-win--b) { border: 0; border-radius: 24px; background: #e5e3d9; box-shadow: inset 0 0 0 1px #c0cabc; }
#how-we-work :is(.hb3-win, .hb3-win--b)::before { background: #e5e3d9; filter: none; }
#how-we-work .hb3-win::after { background: transparent; mix-blend-mode: normal; box-shadow: inset 0 0 0 1px #101b1b08; }
#how-we-work :is(.hb3-slip, .hb3-board) { border: 0; border-radius: 16px; background: #faf8f1; color: #26332f; box-shadow: inset 0 0 0 1px #c8cec5, 0 8px 20px #101b1b0a; }
#how-we-work .hb3-win--a .hb3-slip::before, #how-we-work .hb3-board .hb-wh { background: #e5e3d9; }
#how-we-work .hb3-row[data-r="4"] .hb3-slip { border-radius: 16px; background: #f3f0e8; box-shadow: inset 0 0 0 1px #c8cec5; }
:is(#help-start, #how-we-work, .hb.hb-duo, .hb.hb4, .hb.hb-ar) :is(.am-chip, .hb-rib) { border-color: #b6c2b0; }
:is(#help-start, #how-we-work, .hb.hb-duo, .hb.hb4, .hb.hb-ar) .hb-rib.is-or { background: #fbe0cf; color: #a83813; }
.hb.hb-duo .al-duo { border: 0; border-radius: 24px; background: #e5e3d9; box-shadow: inset 0 0 0 1px #c8cec5, 0 3px 12px #101b1b06; }
:is(#help-start, .hb.hb-duo) .al-duo { background: #e5e3d9; }
.hb.hb-duo .al-kk { border-radius: 16px; background: #faf8f1; }
.hb.hb-duo .al-kk-h { background: #e5e3d9; }
.hb.hb-duo .al-kk-c .al-kk-b { background: #e5e3d9; }
.hb.hb-duo .al-kk-u .al-kk-b { background: #fbe0cf; }
.hb.hb-duo .al-stat { border: 0; border-radius: 16px; background: #f3f0e8; box-shadow: inset 0 0 0 1px #c8cec5, 0 2px 8px #101b1b05; color: #3d4b43; }
.hb.hb-duo .al-stat-n { color: #a83813; }
:is(#help-start, #how-we-work, .hb.hb-duo, .hb.hb4, .hb.hb-ar, #contact) :is(.hb4-prom, .hb4-prom > li, .hb4-q, .hb4-fbtn, .who4, .who4 li) { border: 1px solid var(--al-line); }

/* The actual intake remains an ink document, surrounded by the paper page. */
#contact .hb5-cta::before { background: #f3f0e8; }
#contact .hb5-chips li { color: #4f5c54; }
#contact .hb5-cta, #contact .hb5-g::before { border-top-style: solid; }
#contact .hb5-win {
  --c-cream: #101b1b; --c-paper: #101b1b; --c-sand: #26332f; --c-sand2: #1c2928; --c-sand3: #1c2928;
  --c-line: #4a594f; --c-line2: #3d4b43; --c-rule: #627a64;
  --c-mute: #a4b5a2; --c-dim: #a4b5a2; --c-sub: #c3d0ba; --c-ink: #f3f0e8; --c-ink2: #e3e9d8;
  --c-or: #f75b2b; --c-ort: #ffad80; --c-orb: transparent; --c-orl: #f75b2b; --c-ok: #ffad80; --c-okb: transparent; --c-okl: #f75b2b;
  border: 0; border-radius: 24px; background: #101b1b; color: #f3f0e8; box-shadow: inset 0 0 0 1px #4a594f, 0 8px 24px #101b1b10;
}
#contact .hb5-win .hb-wh { background: #1c2928; border-color: #4a594f; color: #c3d0ba; font-family: var(--au-text, var(--font)); }
#contact .hb5-win .hb-nm { color: #f3f0e8; }
#contact .hb5-win :is(.hb-st, .hb-ad) { color: #a4b5a2; border-color: #4a594f; }
#contact .hb5-form :is(.hint, .fine, .agree-pv) { color: #b5c1b9; }
#contact :is(.hb5-pill, .hb5-form .send) { border-radius: 16px; background: #f75b2b; color: #101b1b; box-shadow: 0 3px 0 #a83813; }
#contact .hb5-tel { color: #3d4b43; }
#contact .hb5-chips li:first-child { background: #fbe0cf; color: #a83813; }

@media (max-width: 767px) {
  #everywhere { padding-top: 72px; padding-bottom: 64px; }
  #global, #languages, #platforms { padding-top: 64px; padding-bottom: 64px; }
  #start-now { padding-top: 64px; padding-bottom: 72px; }
  #global .rch-chip:not(.is-on) > b { background: #94aa91; }
  #help-start .hb2-it.is-sel { border-radius: 16px 16px 0 0; }
  #help-start .hb2-win { border-radius: 0 0 16px 16px; }
}