/* ==========================================================================
   VICH face for RECC (VICH-PRODUCT-TOUCH-SPEC.md v1.4 §00, §0, §0b, §1-§2).
   ONLY the pages before sign-in load this file, after styles.css: the landing with its log in / register /
   invitation code / forgot password window (login.html) and the reset password page (reset_password.html).
   Every rule is scoped under body.vich-face. Signed-in screens never load it and look exactly like live (main);
   styles.css itself is untouched.
   ========================================================================== */

/* RECC's two typefaces, served from this site (face_head.html preloads them); the same families the app gets
   from Google Fonts, latin subset, variable weight */
@font-face { font-family: "Archivo"; src: url(/static/fonts/archivo-400-700-normal-latin.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/static/fonts/jetbrains-mono-400-600-normal-latin.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* RECC's hue (Meta blue) and the controls that take it on these pages; Signal cyan only for the live Launch
   inside the vich.si frame */
body.vich-face {
    --hue: #2D88FF; --hue-rgb: 45, 136, 255;
    --btn-bg: #2D88FF; --btn-ink: #0E0E0E; --btn-hover: #3296FF;
    --focus: #2D88FF; --marker: #2D88FF;
    --live: #23D5D5; --live-ink: #0E0E0E;
}
.vich-face .primary-btn { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
@media (hover: hover) and (pointer: fine) { .vich-face .primary-btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); } }
.vich-face input:focus, .vich-face textarea:focus, .vich-face select:focus { border-color: var(--focus); }
.vich-face a:focus-visible, .vich-face button:focus-visible, .vich-face summary:focus-visible, .vich-face [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ==========================================================================
   The VICH face (VICH-PRODUCT-TOUCH-SPEC.md §0, §0b, §1-§2): the landing page, login / register / invitation code
   and reset password (body.vich-face). Dark only: these pages set data-theme="dark" before the first paint and
   ignore the device setting and any saved choice. The vich.si night field: ground #0A0C11 with a light grain, the particle network
   in the hero, RECC's own drawings on two sections (a diagram of a campaign fanning out to ad sets and filling
   leads; location-targeting rings around a pin), every other section plain in Field / Room, soft blue light behind the key frames, square frames
   with a lit 1px edge in RECC's hue, hue buttons with ink text and small square hue markers.
   No cyan here (there is no live control on these pages).
   ========================================================================== */
body.vich-face {
    --bg: #0A0C11; --surface: #0F121A; --raised: #151925; --raised-2: #1B2030; --field: #0A0C11;
    --text: #FFFFFF; --text-soft: #CFD3D2; --muted: #AEB4B3; --quiet: #7D8496;
    --line: #252B3A; --line-strong: #363D50;
    --accent-soft: rgba(45, 136, 255, 0.08); --accent-line: rgba(45, 136, 255, 0.55);
    --hover: #2D88FF; --hover-fill: #3296FF;
    --selection-bg: #2D88FF; --selection-text: #0E0E0E;
    --overlay: rgba(10, 12, 17, 0.9);
    --link-line: rgba(45, 136, 255, 0.6);
    --frame-edge: rgba(45, 136, 255, 0.55);
    --frame-lit: 0 0 0 1px rgba(45, 136, 255, 0.1), 0 30px 90px -34px rgba(45, 136, 255, 0.38);
    --glow: radial-gradient(circle closest-side, rgba(45, 136, 255, 0.15), rgba(45, 136, 255, 0.045) 55%, transparent);  /* the one light strength on these pages */
    --join: 160px;  /* how far a band blends into the next */
    --field-grain: url(/static/img/grain.png) 0 0 / 128px 128px;
    --radius: 0px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
/* one light grain over the whole page (invisible as a pattern), under the header and dialogs */
body.vich-face::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: var(--field-grain, none); opacity: 0.045; }
/* plain sections sit on the two calm tones, so section edges read without lines:
   hero, how it works (diagram) and phone on Field · the vich.si frame and steps (rings) on Room · who it's for Field
   · the white footer */
.vich-face .showcase-section, .vich-face .workflow-section { background: var(--surface); }
.vich-face .flow-section, .vich-face .spotlight-section, .vich-face .seo-section { background: var(--bg); }
.vich-face .workflow-section, .vich-face .seo-section { border-top: 0; }
/* soft light behind the key frames: fades to nothing inside its own box, never on text */
.vich-face .vich-glow { position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; transform: translate(-50%, -50%); background: var(--glow, none); }
.vich-face .hero .vich-glow { width: min(1180px, 100%); height: min(820px, 100%);
    /* the hero is a calm Field with one soft blue light, as on the vich.si hero (no particles) */
    background: var(--glow); }
.vich-face .auth-overlay .vich-glow { width: min(820px, 100%); height: min(820px, 100%); }
/* square frames with a lit 1px edge in the hue */
.vich-face .auth-modal, .vich-face .spotlight-card { background: var(--surface); border-color: var(--frame-edge); box-shadow: var(--frame-lit); }
.vich-face .glass-card { background: var(--surface); }
.vich-face .workflow-section .glass-card { background: var(--raised); }
/* hue buttons with ink text */
.vich-face .btn-primary, .vich-face .hero-cta .btn-primary { background: var(--btn-bg); color: var(--btn-ink) !important; }
.vich-face .nav-cta.is-filled { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.vich-face .tab-btn.active { box-shadow: inset 0 -2px 0 var(--marker); }
.vich-face .custom-checkbox input:checked + .checkmark { background: var(--btn-bg); border-color: var(--btn-bg); }
.vich-face .custom-checkbox input:checked + .checkmark::after { color: var(--btn-ink); }
/* text links: underline in the hue at 60% (ink at 30% on white) */
.vich-face .auth-link, .vich-face .auth-help-tip a, .vich-face .seo-article a { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
/* small square markers in the hue before names */
/* bullets and small markers: the chevron from the VICH mark (its "A"), 9 x 7 (18:14), in RECC blue, pointing up
   (owner, all projects). Checkboxes, diagram nodes, step numbers and the ring pin keep their own shapes. */
.vich-face { --chevron: polygon(0% 100%, 50% 0%, 100% 100%, 68.3% 100%, 50% 63.4%, 31.7% 100%); }
/* square corners on the interface parts; the phone is a drawing of a real device and keeps its own corners */
.vich-face .auth-help { border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
    .vich-face .btn-primary:hover, .vich-face .hero-cta .btn-primary:hover { background: var(--btn-hover); }
    .vich-face .nav-cta.is-filled:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
}
@media (prefers-reduced-motion: reduce) { .vich-face .vich-glow { transition: none; } }

/* ==========================================================================
   RECC's drawings (VICH-PRODUCT-TOUCH-SPEC.md §0b): what RECC does on Meta, and the reach it sets. Each keeps away
   from text: it sits above the heading or clears behind it, and fades out before paragraphs and cards. Entrances run
   once, when the section comes into view (html.js + is-on, set by the page); the pulses and the ripple loop only while
   their section is on screen (is-live). Without JavaScript or with reduced motion everything is in its finished state.
   ========================================================================== */
/* "How it works" (#how-it-works): your text and visuals go into RECC, RECC builds one lead-generation campaign that
   fans out to real-estate ad sets and their ads, all feed one Instant Form, and the form fills Leads. Thin blue lines
   on dark, square nodes, mono labels, the mark's chevron travelling the dashed lines toward Leads. Wide from 1100px,
   stacked top to bottom below that so every label stays readable on tablets and phones. */
.vich-face .flow-section { position: relative; padding: 80px 0; overflow: hidden; }
.vich-face .flow { position: relative; margin: 0 auto; width: min(1300px, calc(100% - 32px)); pointer-events: none; }
.vich-face .flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.vich-face .flow .flow-v { display: none; }
.vich-face .flow .fl-line { fill: none; stroke: rgba(var(--hue-rgb), 0.42); stroke-width: 1; stroke-dasharray: 4 6; }
.vich-face .flow .fl-node { fill: var(--raised); stroke: rgba(var(--hue-rgb), 0.5); stroke-width: 1; }
.vich-face .flow .fl-node--in { fill: var(--bg); stroke: var(--line-strong); }  /* what you bring: plain, unlit */
.vich-face .flow .fl-group { fill: none; stroke: var(--line-strong); stroke-width: 1; }  /* the thin frame around what you bring */
.vich-face .flow .fl-gk { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; fill: var(--muted); }  /* its label, "Your part" */
.vich-face .flow .fl-node--recc { fill: rgba(var(--hue-rgb), 0.12); stroke: rgba(var(--hue-rgb), 0.9); }
.vich-face .flow .fl-node--leads { stroke: rgba(var(--hue-rgb), 0.85); }
.vich-face .flow .fl-ads rect { fill: rgba(var(--hue-rgb), 0.16); stroke: rgba(var(--hue-rgb), 0.55); stroke-width: 1; }
.vich-face .flow .fl-row rect { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.vich-face .flow .fl-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; fill: var(--hue); }  /* 4.8:1 on Raise */
.vich-face .flow .fl-t { font-family: var(--font-mono); font-size: 11.5px; fill: rgba(255, 255, 255, 0.8); }
.vich-face .flow .fl-r { font-family: var(--font-sans); font-weight: 600; font-size: 17px; letter-spacing: 0.14em; fill: var(--text); }
.vich-face .flow .fl-n { font-family: var(--font-sans); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; fill: var(--text); font-variant-numeric: tabular-nums; }
.vich-face .flow .fl-pulse { fill: var(--hue); opacity: 0; }
.vich-face .flow .fl-arrive { fill: none; stroke: var(--hue); stroke-width: 1.5; opacity: 0; }
/* the phone card gets its own room under the diagram */
.vich-face .spotlight-section { padding-top: 80px; }
/* sign-in pages: the wide diagram, quieter and still, as a band across the screen behind the card */
.vich-face .flow--quiet { position: absolute; z-index: -1; left: 50%; top: 50%; margin: 0; width: 1300px; transform: translate(-50%, -50%); opacity: 0.42;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%); }
.vich-face .flow--page { position: absolute; top: 61%; }  /* centred on the reset card, clear of the title above it; stays in the first screen above the footer */
.vich-face .auth-overlay { background: var(--bg); }  /* sign-in is a screen of its own, like reset: no faded landing behind the card */
/* one trip: text and visuals into RECC, RECC to the campaign, out to the ad sets, their ads to the form, the form to
   Leads; each leg 0.9s of a 5s loop, RECC and Leads light as a pulse arrives */
@keyframes flow-pulse {
    0% { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 90deg)); }
    3% { opacity: 1; }
    18% { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 90deg)); }
    21%, 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 90deg)); }
}
@keyframes flow-arrive { 0%, 16% { opacity: 0; } 18% { opacity: 0.9; } 32%, 100% { opacity: 0; } }
@media (max-width: 1099px) {
    .vich-face .flow:not(.flow--quiet) { width: min(400px, calc(100% - 32px)); }
    .vich-face .flow:not(.flow--quiet) .flow-h { display: none; }
    .vich-face .flow:not(.flow--quiet) .flow-v { display: block; }
}
@media (max-width: 768px) { .vich-face .flow-section { padding: 72px 0; } }
@media (max-width: 599px) {
    .vich-face .flow--quiet { top: auto; bottom: 8px; width: 700px; transform: translateX(-50%); opacity: 0.5; }
}

/* The vich.si RECC frame (from vich.main ui.css, site.css and hues.css; every rule scoped under .rf): an example of
   RECC's screen in a browser frame lit in RECC's hue, with the Meta lead ad it launches overlapping its corner.
   Launch is the one cyan thing in it (the live control). */
.vich-face .rf { position: relative; isolation: isolate; }
.vich-face .rf::before { content: ""; position: absolute; inset: -16%; z-index: -1; pointer-events: none;
    background: var(--glow); }
.vich-face .rf .browser { position: relative; display: flex; flex-direction: column; background: #0B0C0C; border: 1px solid #2B2E2E; }
.vich-face .rf .browser::after { content: ""; position: absolute; inset: -1px; pointer-events: none; border: 1px solid var(--frame-edge); box-shadow: var(--frame-lit); }  /* the same lit edge as the phone card and the sign-in window */
.vich-face .rf .browser__bar { display: flex; align-items: center; gap: 14px; flex: none; height: 44px; padding: 0 16px; border-bottom: 1px solid #1F2222; }
.vich-face .rf .browser__dots { display: flex; gap: 6px; flex: none; }
.vich-face .rf .browser__dots i { width: 9px; height: 9px; background: #2B2E2E; }
.vich-face .rf .browser__url { flex: 1; max-width: 340px; margin: 0 auto; height: 28px; line-height: 28px; text-align: center; padding: 0 10px;
    font: 400 13px/28px var(--font-mono); color: #9AA1A0; background: #151717; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vich-face .rf .browser__tag { flex: none; font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9AA1A0; }
.vich-face .rf .browser__body { flex: 1; min-height: 0; display: flex; }
.vich-face .rf .screen { container-type: inline-size; position: relative; flex: 1; display: flex; flex-direction: column; margin: 0;
    background: #0E0E0E; color: #E6E9E8; font-family: var(--font-sans); line-height: 1.4; overflow: hidden; text-align: left; }
.vich-face .rf .screen > :last-child { flex: 1; min-height: 0; }
.vich-face .rf .scr { font-size: clamp(11px, 1.9cqi, 14px); }
.vich-face .rf .scr__bar { display: flex; align-items: center; gap: .9em; flex: none; height: 3.3em; padding: 0 1.15em; border-bottom: 1px solid #262A2A; background: #0B0C0C; white-space: nowrap; }
.vich-face .rf .scr__brand { display: flex; align-items: center; gap: .55em; font-weight: 600; font-size: 1.02em; letter-spacing: -.01em; }
.vich-face .rf .scr__brand svg { width: .7em; height: auto; color: #FFFFFF; }
.vich-face .rf .scr__path { font-family: var(--font-mono); font-size: .82em; color: #9AA1A0; overflow: hidden; text-overflow: ellipsis; }
.vich-face .rf .scr__path b { color: #C9CECD; font-weight: 400; }
.vich-face .rf .scr__right { margin-left: auto; display: flex; align-items: center; gap: .6em; }
.vich-face .rf .scr__btn { display: inline-flex; align-items: center; gap: .5em; height: 2.2em; padding: 0 .95em; border: 1px solid #343838; font-size: .86em; font-weight: 600; color: #E6E9E8; white-space: nowrap; }
.vich-face .rf .scr__btn--go { background: var(--live); border-color: var(--live); color: var(--live-ink); }
.vich-face .rf .tag { display: inline-flex; align-items: center; gap: .45em; padding: .3em .6em; border: 1px solid #343838; font-family: var(--font-mono); font-size: .74em; color: #B4BAB9; white-space: nowrap; }
.vich-face .rf .dot { width: .64em; height: .5em; flex: none; background: var(--hue); clip-path: var(--chevron); }
.vich-face .rf .node { background: #151717; border: 1px solid #2F3434; padding: .75em .9em; text-align: left; }
.vich-face .rf .node__kind { font-family: var(--font-mono); font-size: max(.74em, 10px); letter-spacing: .14em; text-transform: uppercase; color: #9AA1A0; }
.vich-face .rf .node__name { font-weight: 600; font-size: 1em; margin-top: .15em; letter-spacing: -.01em; }
.vich-face .rf .recc { display: grid; grid-template-columns: 13.5em minmax(0, 1fr); }
.vich-face .rf .recc__clients { border-right: 1px solid #262A2A; background: #0B0C0C; padding: 1.15em; display: grid; align-content: start; gap: .4em; }
.vich-face .rf .recc__head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .95em; margin-bottom: .5em; }
.vich-face .rf .recc__head span { font-weight: 400; font-size: .78em; color: #8C9392; }
.vich-face .rf .client { display: flex; align-items: center; gap: .7em; padding: .6em .65em; border: 1px solid transparent; font-size: .86em; color: #C9CECD; }
.vich-face .rf .client i { width: 1.8em; height: 1.8em; flex: none; display: grid; place-items: center; background: #1F2222; font-style: normal; font-weight: 600; font-size: .9em; color: #E6E9E8; }
.vich-face .rf .client.on { border-color: #343838; background: #151717; color: #FFFFFF; }
.vich-face .rf .client.on i { background: #E6E9E8; color: #0E0E0E; }
.vich-face .rf .client--new { color: #9AA1A0; }
.vich-face .rf .client--new i { background: transparent; border: 1px dashed #3A3F3F; }
.vich-face .rf .recc__main { padding: 1.4em; display: grid; align-content: start; gap: 1.15em; }
.vich-face .rf .field__label { font-size: .78em; color: #8C9392; margin-bottom: .5em; }
.vich-face .rf .choices { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.vich-face .rf .choice { display: flex; align-items: center; gap: .7em; padding: .8em .9em; border: 1px solid #2E3232; background: #151717; font-size: .9em; }
.vich-face .rf .choice small { display: block; color: #8C9392; font-size: .82em; margin-top: .1em; }
.vich-face .rf .choice .radio { width: 1.05em; height: 1.05em; flex: none; border: 1px solid #4A4F4F; }
.vich-face .rf .choice.on { border-color: #C9CECD; }
.vich-face .rf .choice.on .radio { border: .3em solid #E6E9E8; }
.vich-face .rf .recc__creative { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: .8em; }
.vich-face .rf .thumb { aspect-ratio: 4 / 5; border: 1px solid #2E3232; background: #3A4140; position: relative; }
.vich-face .rf .thumb::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 12%; height: 10%; background: rgba(255, 255, 255, .7); }
.vich-face .rf .textarea { padding: .7em .8em; border: 1px solid #2E3232; background: #151717; font-size: .86em; line-height: 1.45; color: #C9CECD; }
.vich-face .rf .recc__structure { display: grid; grid-template-columns: minmax(0, 1fr) 1.2em minmax(0, 1fr) 1.2em minmax(0, 1fr); align-items: stretch; }
.vich-face .rf .recc__structure .node { padding: .6em .75em; }
.vich-face .rf .recc__structure .node__name { font-size: .86em; line-height: 1.25; overflow-wrap: anywhere; }  /* full names, wrapping to two lines when narrow */
.vich-face .rf .recc__join { align-self: center; height: 1px; background: #3A3F3F; }
.vich-face .rf .recc__launch { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1em; padding-top: 1.1em; border-top: 1px solid #1F2222; }
.vich-face .rf .recc__launch .scr__btn--go { height: 2.7em; padding: 0 1.4em; font-size: .95em; }
.vich-face .rf .recc__status { display: inline-flex; align-items: center; gap: .55em; font-size: .84em; color: #9AA1A0; }
.vich-face .rf .recc__status b { color: #FFFFFF; font-weight: 600; }
@container (max-width: 560px) {
    .vich-face .rf .recc { grid-template-columns: 1fr; }
    .vich-face .rf .recc__clients { display: none; }
    .vich-face .rf .recc__creative { grid-template-columns: 4em minmax(0, 1fr); }
    .vich-face .rf .recc__structure { grid-template-columns: minmax(0, 1fr); gap: .4em; }
    .vich-face .rf .recc__join { display: none; }
}
/* the lead ad, floating over the frame's corner */
.vich-face .rf .out { position: absolute; z-index: 3; left: -52px; bottom: -34px; width: 256px; margin: 0; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 26px 60px -22px rgba(0, 0, 0, 0.75), 0 24px 80px -30px rgba(var(--hue-rgb), 0.55); }
.vich-face .rf .out__cap { padding: 8px 11px 9px; background: #151925; font-size: 13px; line-height: 1.35; color: var(--text-soft); }
.vich-face .rf .out__cap::before { content: ""; display: inline-block; width: 9px; height: 7px; margin-right: 8px; vertical-align: 1px; background: var(--hue); clip-path: var(--chevron); }
.vich-face .rf .fad { background: #242526; color: #E4E6EB; font-family: var(--font-sans); text-align: left; }
.vich-face .rf .fad__head { display: flex; align-items: center; gap: 9px; padding: 11px 12px 0; }
.vich-face .rf .fad__head i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; background: var(--hue); color: var(--btn-ink); font-style: normal; font-weight: 700; font-size: 12px; }
.vich-face .rf .fad__head b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.vich-face .rf .fad__head small { display: block; font-size: 11.5px; color: #B0B3B8; }
.vich-face .rf .fad__text { margin: 0; padding: 9px 12px 10px; font-size: 13px; line-height: 1.4; color: #E4E6EB; }
.vich-face .rf .fad img { display: block; width: 100%; height: auto; aspect-ratio: 1.91 / 1; object-fit: cover; }
.vich-face .rf .fad__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #3A3B3C; }
.vich-face .rf .fad__bar small { display: block; font-size: 11px; color: #B0B3B8; }
.vich-face .rf .fad__bar b { display: block; font-size: 13px; font-weight: 600; }
.vich-face .rf .fad__btn { flex: none; padding: 7px 12px; background: #4E4F50; color: #E4E6EB; font-size: 12.5px; font-weight: 600; }
/* The frame follows the phone section: centred, with room on the left for the ad that hangs over its corner;
   under 1000px the ad sits below it */
.vich-face .showcase-section { position: relative; padding: 80px 0 114px; overflow: hidden; }  /* +34px under it for the ad's overhang */
.vich-face .showcase-section .rf { width: min(940px, calc(100% - 104px)); margin: 0 auto; }
@media (max-width: 1000px) {
    .vich-face .showcase-section { padding: 72px 0 80px; }
    .vich-face .showcase-section .rf { width: 100%; }
    .vich-face .rf .out { position: static; width: auto; max-width: 320px; margin-top: 22px; }
}
.vich-face .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Location targeting: rings around a square pin, one marked "+25 km", a slow ripple while it is on screen */
.vich-face .workflow-section { position: relative; overflow: hidden; isolation: isolate; padding-top: 160px; }  /* room for the rings above the heading */
.vich-face .reach { position: absolute; inset: 0; z-index: -1; pointer-events: none; --ru: 95px; --pin-y: 96px;
    /* soft at the top edge too, gone --reach-end from the top (40px above the cards, set by the page) */
    -webkit-mask-image: linear-gradient(transparent, #000 64px, #000 calc(var(--reach-end, 420px) * 0.55), transparent var(--reach-end, 420px));
    mask-image: linear-gradient(transparent, #000 64px, #000 calc(var(--reach-end, 420px) * 0.55), transparent var(--reach-end, 420px)); }
.vich-face .reach__in { position: absolute; inset: 0;
    -webkit-mask-image: radial-gradient(ellipse var(--reach-clear-rx, 380px) var(--reach-clear-ry, 84px) at 50% var(--reach-clear-y, 250px), rgba(0, 0, 0, 0.06) 70%, #000 100%);
    mask-image: radial-gradient(ellipse var(--reach-clear-rx, 380px) var(--reach-clear-ry, 84px) at 50% var(--reach-clear-y, 250px), rgba(0, 0, 0, 0.06) 70%, #000 100%); }
.vich-face .rings { position: absolute; left: 50%; top: var(--pin-y); width: 0; height: 0; }
.vich-face .rings i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(var(--hue-rgb), 0.2); }
.vich-face .rings .r1 { width: calc(var(--ru) * 2); height: calc(var(--ru) * 2); border-color: rgba(var(--hue-rgb), 0.4); }
.vich-face .rings .r2 { width: calc(var(--ru) * 4); height: calc(var(--ru) * 4); border-style: dashed; border-color: rgba(var(--hue-rgb), 0.26); }
.vich-face .rings .r3 { width: calc(var(--ru) * 6); height: calc(var(--ru) * 6); border-color: rgba(var(--hue-rgb), 0.19); }
.vich-face .rings .r4 { width: calc(var(--ru) * 8); height: calc(var(--ru) * 8); border-style: dashed; border-color: rgba(var(--hue-rgb), 0.13); }
.vich-face .rings .r5 { width: calc(var(--ru) * 10); height: calc(var(--ru) * 10); border-color: rgba(var(--hue-rgb), 0.08); }
.vich-face .rings .rip { width: calc(var(--ru) * 10); height: calc(var(--ru) * 10); border-color: rgba(var(--hue-rgb), 0.55); opacity: 0; transform: translate(-50%, -50%) scale(0.06); }
.vich-face .rings .pin { left: -5px; top: -5px; width: 10px; height: 10px; background: var(--hue); border: 0; border-radius: 0; transform: none; }
.vich-face .rings .pin2 { left: -12px; top: -12px; width: 24px; height: 24px; border: 1px solid rgba(var(--hue-rgb), 0.6); border-radius: 0; transform: none; }
.vich-face .rings .lab { position: absolute; left: calc(var(--ru) * 3); top: 0; transform: translate(-50%, -50%); background: var(--surface); padding: 0 7px;
    font: 400 10.5px/1.6 var(--font-mono); letter-spacing: 0.08em; color: rgba(var(--hue-rgb), 0.9); white-space: nowrap; }
@keyframes reach-ripple { from { transform: translate(-50%, -50%) scale(0.06); opacity: 0.9; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .vich-face .reach.is-live .rip { animation: reach-ripple 5.2s cubic-bezier(0.39, 0.575, 0.565, 1) infinite; }  /* ease-out-sine: an even radar pulse */
}
/* the three steps light one after another (vich.si stations, 220ms apart): a hue edge across the top and the number */
.vich-face .step-card { position: relative; }
.vich-face .step-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--hue); }
.vich-face .step-number { position: relative; color: var(--quiet); }  /* readable before it lights (4.7:1 on Raise) */
.vich-face .step-number::after { content: attr(data-n); position: absolute; inset: 0; color: var(--hue); }


/* Headings rise from a mask (vich.si title lines) */
.vich-face .rise { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.vich-face .rise > span { display: block; }

/* One-time motion, only when JavaScript runs and motion is welcome; the finished state is the default */
@media (prefers-reduced-motion: no-preference) {
    html.js .vich-face .rise > span { transform: translateY(105%); transition: transform 0.82s var(--ease-expo); }
    html.js .vich-face .is-on .rise > span, html.js .vich-face .rise.is-on > span { transform: none; }
    html.js .vich-face [data-on] .rise-after { opacity: 0; transform: translateY(20px); transition: opacity 0.64s var(--ease-out) 0.11s, transform 0.8s var(--ease-out) 0.11s; }
    html.js .vich-face [data-on].is-on .rise-after { opacity: 1; transform: none; }

    html.js .vich-face .fl-row { opacity: 0; transform: translateY(-8px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: calc(1.1s + var(--row, 0) * 0.7s); }
    /* the drawing itself is simply there (its top edge shows under the hero); the new leads come in once it is on screen */
    html.js .vich-face .is-on .fl-row { opacity: 1; transform: none; }
    html.js .vich-face .flow--quiet .fl-row { opacity: 1; transform: none; transition: none; }
    html.js .vich-face .flow.is-live .fl-pulse { animation: flow-pulse 5s cubic-bezier(0.76, 0, 0.24, 1) infinite; animation-delay: var(--d, 0s); }
    html.js .vich-face .flow.is-live .fl-arrive { animation: flow-arrive 5s linear infinite; animation-delay: 4s; }
    html.js .vich-face .flow.is-live .fl-arrive--recc { animation-delay: 0s; }

    html.js .vich-face .rings > i:not(.rip), html.js .vich-face .rings .lab { opacity: 0; transition: opacity 0.9s var(--ease-out); }
    html.js .vich-face .rings .r1 { transition-delay: 0.1s; } html.js .vich-face .rings .r2 { transition-delay: 0.2s; }
    html.js .vich-face .rings .r3, html.js .vich-face .rings .lab { transition-delay: 0.3s; }
    html.js .vich-face .rings .r4 { transition-delay: 0.4s; } html.js .vich-face .rings .r5 { transition-delay: 0.5s; }
    html.js .vich-face .is-on .rings > i:not(.rip), html.js .vich-face .is-on .rings .lab { opacity: 1; }

    html.js .vich-face .step-card::before { transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); transition-delay: calc(0.3s + var(--i, 0) * 0.22s); }
    html.js .vich-face .step-number::after { opacity: 0; transition: opacity 0.5s var(--ease-out); transition-delay: calc(0.3s + var(--i, 0) * 0.22s); }
    html.js .vich-face .workflow-grid.is-on .step-card::before { transform: none; }
    html.js .vich-face .workflow-grid.is-on .step-number::after { opacity: 1; }

    html.js .vich-face [data-on] .rf { opacity: 0; transform: translateY(20px); transition: opacity 0.64s var(--ease-out) 0.2s, transform 0.8s var(--ease-out) 0.2s; }
    html.js .vich-face [data-on] .rf .out { opacity: 0; transform: translateY(20px); transition: opacity 0.52s var(--ease-out) 0.62s, transform 0.76s var(--ease-expo) 0.62s; }
    html.js .vich-face [data-on] .rf .recc__structure .node { opacity: 0.35; transition: opacity 0.35s ease-out 0.9s; }
    html.js .vich-face [data-on] .rf .recc__structure .node:nth-child(3) { transition-delay: 1.1s; }
    html.js .vich-face [data-on] .rf .recc__structure .node:nth-child(5) { transition-delay: 1.3s; }
    html.js .vich-face [data-on] .rf .recc__status--done { opacity: 0; transform: translateY(.4em); transition: opacity 0.3s ease-out 1.7s, transform 0.3s ease-out 1.7s; }
    html.js .vich-face [data-on].is-on .rf, html.js .vich-face [data-on].is-on .rf .out, html.js .vich-face [data-on].is-on .rf .recc__status--done { opacity: 1; transform: none; }
    html.js .vich-face [data-on].is-on .rf .recc__structure .node { opacity: 1; }

}
@media (max-width: 768px) {
    .vich-face .spotlight-section { padding-top: 72px; }
    .vich-face .reach { --ru: 62px; --pin-y: 76px; }
    .vich-face .rings .lab { left: calc(var(--ru) * 2); }
}

/* ==========================================================================
   Final retouches (pre-deploy polish)
   ========================================================================== */
/* headings break into even lines and paragraphs never end on a lone word */
.vich-face h1, .vich-face h2, .vich-face h3, .vich-face .hero-message > span { text-wrap: balance; }
.vich-face p, .vich-face .hero-desc { text-wrap: pretty; }
/* every button answers a press (Emil: 0.97, 140ms ease-out); colour changes keep their own timing */
.vich-face .btn-primary, .vich-face .btn-ghost, .vich-face .nav-cta, .vich-face .primary-btn, .vich-face .nav-menu, .vich-face .tab-btn {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 140ms var(--ease-out);
}
.vich-face .btn-primary:active, .vich-face .btn-ghost:active, .vich-face .nav-cta:active, .vich-face .primary-btn:active, .vich-face .nav-menu:active, .vich-face .tab-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
    .vich-face .btn-primary:active, .vich-face .btn-ghost:active, .vich-face .nav-cta:active, .vich-face .primary-btn:active, .vich-face .nav-menu:active, .vich-face .tab-btn:active { transform: none; }
}
/* keyboard: a skip link to the content, shown only when it has focus */
.vich-face .skip-link { position: fixed; left: 16px; top: -64px; z-index: 2000; padding: 10px 14px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; font-size: 14px; }
.vich-face .skip-link:focus { top: 12px; }

/* ==========================================================================
   Finishing pass: one colour grade, soft joins between the bands, one grid
   ========================================================================== */
/* soft joins: a Field section blends into the Room band next to it over 160px, so the page reads as one piece from
   the hero to the footer (hero, diagram and phone share one Field; the Room sections stay solid, so the rings'
   "+25 km" label still cuts its ring cleanly) */
.vich-face .spotlight-section { background: linear-gradient(to bottom, var(--bg) calc(100% - var(--join)), var(--surface)); }
.vich-face .seo-section { background: linear-gradient(to bottom, var(--surface), var(--bg) var(--join)); }  /* ends on a straight edge into the white footer */
/* the diagram gets the same soft light as the hero, the phone and the frame */
.vich-face .flow-section::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; z-index: 0; width: min(1180px, 100%); transform: translateX(-50%); pointer-events: none; background: var(--glow); }  /* fits the section, so it fades out before either edge */
.vich-face .flow-section .flow { z-index: 1; }
/* the lead-ad photo sits in the palette: a little more contrast, a touch cooler, never a filter look */
.vich-face .rf .fad picture { position: relative; display: block; }
.vich-face .rf .fad img { filter: contrast(1.06) saturate(0.9) brightness(0.97); }
.vich-face .rf .fad picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(var(--hue-rgb), 0.08); mix-blend-mode: soft-light; }
/* one grid (12 columns, 24px gutters, inside the 1280px container): the diagram, the cards, the phone card and the
   rings share the container edges; the frame spans 10 columns and its ad lands on the grid's left edge; the
   audiences read in 6 columns (about 70 characters a line) */
@media (min-width: 1101px) {
    .vich-face .flow:not(.flow--quiet) { width: min(1232px, calc(100% - 48px)); }
    .vich-face .flow-section { padding: 40px 0 60px; }  /* the wide drawing carries ~40px of its own air above and ~20px below */
    .vich-face .showcase-section .rf { width: calc((100% - 264px) * 10 / 12 + 216px); }
    .vich-face .showcase-section .rf .out { left: calc(-1 * ((100% - 216px) / 10 + 24px)); }
    .vich-face .seo-section .seo-article { max-width: none; width: calc((100% - 264px) * 6 / 12 + 120px); margin: 0 auto; }
}
/* type: one section-heading size and tracking, one lede size, mono labels on one letter-spacing */
@media (min-width: 769px) {
    .vich-face .spotlight-card h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.1; }
}
.vich-face .seo-article .seo-title { margin-top: 0; letter-spacing: -0.02em; line-height: 1.1; }
.vich-face .section-header p, .vich-face .spotlight-lede { font-size: 1.1rem; line-height: 1.6; }
.vich-face .spotlight-meta { letter-spacing: 0.12em; }

/* ==========================================================================
   The white SaaS footer (VICH-PRODUCT-TOUCH-SPEC.md v1.6 §0000). White ground, ink text, the RECC ink logo, one
   sentence and an ink button; three link columns; a bottom bar with the copyright, the address and the VICH mark.
   RECC blue only as the 2px rule on top, never as text on white. Above the page grain, which stays on the dark page.
   ========================================================================== */
.vich-face .sf { position: relative; z-index: 60; background: #FFFFFF; color: #0E0E0E; border-top: 2px solid var(--hue); font-family: var(--font-sans); }
.vich-face .sf ::selection { background: #0E0E0E; color: #FFFFFF; }
.vich-face .sf__in { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }  /* its own width: the same on the landing and the reset page */
.vich-face .sf__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-top: 72px; padding-bottom: 56px; }
.vich-face .sf__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }  /* the button 40px below the logo (32px on phones), the same on all four products */
.vich-face .sf__logo { display: inline-flex; color: #0E0E0E; }
.vich-face .sf__logo svg { display: block; height: 72px; width: auto; }  /* the logo alone, 72px (60px on phones), the same on all four products */
.vich-face .sf__btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border: 0; border-radius: 0; background: #0E0E0E; color: #FFFFFF; font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 140ms var(--ease-out); }
.vich-face .sf__btn:active { transform: scale(0.97); }
.vich-face .sf__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.vich-face .sf__h { margin: 0 0 12px; font: 600 14px/1.3 var(--font-sans); letter-spacing: 0; color: #0E0E0E; }
.vich-face .sf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vich-face .sf__cols a, .vich-face .sf__link { display: inline-flex; align-items: center; min-height: 34px; padding: 0; border: 0; background: none; font: 400 15px/1.3 var(--font-sans); color: #5A5F60; text-decoration: none; cursor: pointer; transition: color 0.18s ease; }
.vich-face .sf__here { display: inline-flex; align-items: center; min-height: 34px; font: 600 15px/1.3 var(--font-sans); color: #0E0E0E; }
.vich-face .sf__cols .sf__mail { font-family: var(--font-mono); font-size: 14px; }
.vich-face .sf__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 28px;
    background: linear-gradient(#DCDFDB, #DCDFDB) top center / calc(100% - 48px) 1px no-repeat; }  /* the 1px line ends at the content edges, like the columns above */
.vich-face .sf__bar p { margin: 0; font-size: 14px; color: #5A5F60; }
.vich-face .sf__bar .sf__addr { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #0E0E0E; }
.vich-face .sf__addr svg { width: 10px; height: auto; color: #0E0E0E; }
/* focus in ink on white; underline on hover */
.vich-face .sf a:focus-visible, .vich-face .sf button:focus-visible { outline: 2px solid #0E0E0E; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .vich-face .sf__cols a:hover, .vich-face .sf__link:hover { color: #0E0E0E; text-decoration: underline; text-underline-offset: 3px; }
    .vich-face .sf__btn:hover { background: #262929; }
}
@media (prefers-reduced-motion: reduce) { .vich-face .sf__btn:active { transform: none; } }
/* phones and tablets: stacked, the link columns two-up, 44px tap targets */
@media (max-width: 860px) {
    .vich-face .sf__top { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; padding-bottom: 40px; }
    .vich-face .sf__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .vich-face .sf__cols a, .vich-face .sf__link, .vich-face .sf__here { min-height: 44px; }
    .vich-face .sf__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 599px) {  /* the same 20px side margins as the page above; logo and button scaled down to stay balanced */
    .vich-face .sf__brand { gap: 32px; }
    .vich-face .sf__logo svg { height: 60px; }
    .vich-face .sf__in { padding-left: 20px; padding-right: 20px; }
    .vich-face .sf__bar { background-size: calc(100% - 40px) 1px; }
}

/* ==========================================================================
   Text pages before sign-in (Privacy): the landing's dark field and light, one readable column, a compact bar with
   the logo and Access RECC, and the white footer. List bullets are the VICH chevron.
   ========================================================================== */
.vich-face .doc-bar { position: sticky; top: 0; z-index: 70; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.vich-face .doc-bar__in { display: flex; align-items: center; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 12px 24px; }
.vich-face .doc-bar__brand { display: flex; color: var(--text); }
.vich-face .doc-bar__brand svg { display: block; height: 40px; width: auto; }
.vich-face .doc-bar__cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; background: var(--btn-bg); color: var(--btn-ink); font: 600 14px/1 var(--font-sans); text-decoration: none; transition: background-color 0.2s ease, transform 140ms var(--ease-out); }
.vich-face .doc-bar__cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .vich-face .doc-bar__cta:hover { background: var(--btn-hover); } }
.vich-face .doc { position: relative; isolation: isolate; padding: 96px 24px 120px; }
.vich-face .doc::before { content: ""; position: absolute; left: 50%; top: 0; z-index: -1; width: min(1180px, 100%); height: 560px; transform: translateX(-50%); pointer-events: none; background: var(--glow); }
.vich-face .doc__body { max-width: 680px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--text-soft); }
.vich-face .doc__body h1 { margin: 0 0 12px; font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.vich-face .doc__updated { margin: 0 0 32px; font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); }
.vich-face .doc__lead { margin: 0 0 8px; font-size: 19px; line-height: 1.6; color: var(--text); }
.vich-face .doc__body h2 { margin: 48px 0 14px; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.vich-face .doc__body p { margin: 0 0 16px; }
.vich-face .doc__body ul { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.vich-face .doc__body li { position: relative; padding-left: 22px; }
.vich-face .doc__body li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 9px; height: 7px; background: var(--hue); clip-path: var(--chevron); }
.vich-face .doc__body strong { font-weight: 600; color: var(--text); }
.vich-face .doc__body a { color: var(--text); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .vich-face .doc__body a:hover { text-decoration-color: currentColor; } }
@media (max-width: 599px) {
    .vich-face .doc-bar__in { padding: 10px 20px; }
    .vich-face .doc-bar__brand svg { height: 36px; }
    .vich-face .doc { padding: 64px 20px 88px; }
    .vich-face .doc__body { font-size: 16px; }
    .vich-face .doc__lead { font-size: 17px; }
}