/* ==========================================================================
   /join-network — the seller funnel
   --------------------------------------------------------------------------
   Page-scoped, loaded through @stack('styles') so it lands AFTER app.min.css and
   needs no minify build. Every class is prefixed .rsx- and nothing here touches a
   site-wide selector: app.min.css styles pages through ANCESTOR class names, and
   a pass that reused its names once silently deleted a design.

   REBUILT 2026-10-01 after the first version was called boring, cramped and too
   small to read. The notes from that: a yard owner has no time to read, the type
   was small, headings sat too close to their text, and nothing grabbed him.

   SO THE TYPE SCALE IS THE DESIGN. Body copy is 18px, not 15. Headlines run to
   7rem. There is roughly half as much text as before and what is left is set
   large enough to read across a desk. Money is the loudest thing on the page -
   the revenue figures are the biggest type anywhere, bigger than the headlines -
   because that is the only argument that moves a business owner.

   Anton and IBM Plex Sans are already in the layout head; no new webfont.
   ========================================================================== */

.rsx {
    --rsx-ink:    #0b0d10;
    --rsx-soft:   #4e535b;
    --rsx-faint:  #8b9098;
    --rsx-paper:  #ffffff;
    --rsx-ground: #f4f2ee;
    --rsx-rule:   #ded8d0;
    --rsx-red:    rgba(var(--primaryColor));
    --rsx-red-dk: rgba(var(--secondaryColor));
    --rsx-gold:   #f0b429;

    background: var(--rsx-paper);
    color: var(--rsx-ink);
    font-size: 18px;         /* the page's own base, not the site's 14-15px */
    line-height: 1.62;
}

.rsx p { font-size: 1rem; }

/* Display type. Anton is a condensed grotesque - it carries size without
   shouting, which is what a sign painter would use. */
.rsx h1, .rsx h2, .rsx .rsx-figure {
    font-family: 'Anton', 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.012em;
}

.rsx-kicker {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rsx-red);
    margin-bottom: 1.1rem;
}

/* ==========================================================================
   HERO — the money promise, as large as it will go
   ========================================================================== */

.rsx-hero {
    position: relative;
    background: var(--rsx-ink);
    color: #fff;
    overflow: hidden;
    padding: 0 0 clamp(58px, 8vw, 104px);
}

.rsx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
}

/* A single red wedge. The only decoration on the page. */
.rsx-hero::after {
    content: '';
    position: absolute;
    right: -14%;
    top: -30%;
    width: 60vw;
    height: 150%;
    background: var(--rsx-red);
    opacity: .13;
    transform: skewX(-13deg);
    pointer-events: none;
}

.rsx-hero > .container { position: relative; z-index: 2; }

.rsx-crumb { padding: 22px 0 clamp(38px, 6vw, 68px); font-size: .8125rem; color: rgba(255,255,255,.5); }
.rsx-crumb a { color: rgba(255,255,255,.72); text-decoration: none; }
.rsx-crumb a:hover { color: #fff; }
.rsx-crumb span { margin: 0 8px; opacity: .45; }

.rsx-hero .rsx-kicker { color: #fff; opacity: .72; margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem); }

.rsx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.rsx-hero h1 {
    font-size: clamp(2.6rem, 6.4vw, 5.4rem);
    line-height: 1.0;                              /* was .94 - the lines were touching */
    margin: 0 0 clamp(1.9rem, 3.4vw, 2.6rem);      /* and it sat on its own subheading */
}

/* The money card: the single loudest thing in the hero, and the reason the right
   half is not empty. $126,270,589 of asking prices already on the site. */
.rsx-money {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(2px);
}

.rsx-money-top { padding: clamp(26px, 3.4vw, 40px); border-bottom: 1px solid rgba(255,255,255,.18); }

.rsx-money-label {
    display: block;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: .7rem;
}

.rsx-money-big {
    display: block;
    font-family: 'Anton', 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(3.4rem, 8vw, 5.6rem);
    line-height: .88;
    letter-spacing: .005em;
    color: var(--rsx-red);
    font-variant-numeric: tabular-nums;
}

.rsx-money-note { font-size: .9375rem !important; color: rgba(255,255,255,.6); margin: .8rem 0 0 !important; }

.rsx-money-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.rsx-money-grid div { padding: clamp(18px, 2.2vw, 26px); border-right: 1px solid rgba(255,255,255,.18); }
.rsx-money-grid div:last-child { border-right: 0; }

.rsx-money-grid b {
    display: block;
    font-family: 'Anton', 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: .35rem;
}

.rsx-money-grid span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.52); line-height: 1.35; display: block; }

.rsx-hero h1 em { font-style: normal; color: var(--rsx-red); }

.rsx-hero-sub {
    font-size: clamp(1.0625rem, 1.7vw, 1.3125rem) !important;
    line-height: 1.55;
    font-weight: 300;
    color: rgba(255,255,255,.86);
    max-width: 42ch;
    margin: 0 0 clamp(1.7rem, 3vw, 2.3rem);
}

.rsx-hero-sub b { font-weight: 600; color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.rsx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 34px;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.rsx-btn-primary { background: var(--rsx-red); color: #fff; box-shadow: 0 10px 30px -12px rgba(218,26,54,.8); }
.rsx-btn-primary:hover { background: #fff; color: var(--rsx-ink); transform: translateY(-3px); }

.rsx-btn-ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.rsx-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.rsx-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.rsx-cta-note { font-size: .875rem; color: rgba(255,255,255,.6); margin: 1.1rem 0 0; }

/* ==========================================================================
   THE LOSS / GAIN BAND — the argument, in two halves
   ========================================================================== */

.rsx-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--rsx-rule);
    border-bottom: 1px solid var(--rsx-rule);
}

.rsx-split > div { padding: clamp(36px, 5vw, 62px) clamp(22px, 4vw, 54px); }

.rsx-split-bad { background: var(--rsx-ground); }
.rsx-split-good { background: var(--rsx-ink); color: #fff; position: relative; }

.rsx-split-bad .rsx-kicker { color: var(--rsx-faint); }
.rsx-split-good .rsx-kicker { color: var(--rsx-red); }

.rsx-split h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.1;
    margin: 0 0 1.4rem;      /* headings were sitting on their text before */
}

.rsx-split ul { list-style: none; margin: 0; padding: 0; }

.rsx-split li {
    position: relative;
    padding-left: 34px;
    font-size: 1.0625rem;
    line-height: 1.5;
    margin-bottom: 1.05rem;
}

.rsx-split li:last-child { margin-bottom: 0; }

.rsx-split-bad li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 15px; height: 2px;
    background: var(--rsx-faint);
}

.rsx-split-good li::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 18px; height: 11px;
    border-left: 3px solid var(--rsx-red);
    border-bottom: 3px solid var(--rsx-red);
    transform: rotate(-45deg);
}

.rsx-split-bad li { color: var(--rsx-soft); }

/* ==========================================================================
   Sections
   ========================================================================== */

.rsx-section { padding: clamp(54px, 8vw, 100px) 0; }
.rsx-section-dark { background: var(--rsx-ink); color: #fff; }
.rsx-section-ground { background: var(--rsx-ground); }

/* FULL WIDTH. These were capped at 24ch, which left a heading sitting in the left
   third of the page with two thirds empty beside it - the "30% space" note. Only
   the supporting paragraph keeps a reading measure. */
.rsx-head { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.rsx-head-wide { max-width: none; }

/* The "Buyers don't ring round any more. They search." heading is one line on a
   wide screen, so it is allowed to run the full width before it wraps. */
.rsx-head h2 {
    font-size: clamp(1.9rem, 4.4vw, 3.35rem);
    line-height: 1.02;
    margin: 0 0 1.15rem;     /* breathing room: the old 12px read as cramped */
    max-width: none;
}

.rsx-head h2 em { font-style: normal; color: var(--rsx-red); }

/* FULL WIDTH, like the headings above them. The 46ch measure left every
   subheading stopping a third of the way across with the rest of the row empty,
   which is the same complaint as the headings and reads as an unfinished layout
   rather than as a reading measure. */
.rsx-head p {
    font-size: 1.1875rem !important;
    line-height: 1.6;
    color: var(--rsx-soft);
    margin: 0;
    max-width: none;
}

.rsx-section-dark .rsx-head p { color: rgba(255,255,255,.72); }

/* ==========================================================================
   BENEFIT BLOCKS — few, large, each one a single idea
   ========================================================================== */

.rsx-bens { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(20px, 3vw, 34px); }

.rsx-ben {
    position: relative;
    padding: clamp(30px, 3.4vw, 42px) clamp(26px, 3vw, 36px) clamp(32px, 3.4vw, 42px);
    background: var(--rsx-paper);
    border: 1px solid var(--rsx-rule);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* A red corner that opens out on hover. Enough movement to make the grid feel
   alive without turning a credibility page into a toy. */
.rsx-ben::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-top: 0 solid var(--rsx-red);
    border-left: 0 solid transparent;
    transition: border-width .3s cubic-bezier(.2,.7,.3,1);
}

.rsx-ben:hover::after { border-top-width: 44px; border-left-width: 44px; }

.rsx-ben::before {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 3px;
    background: var(--rsx-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .34s cubic-bezier(.2,.7,.3,1);
}

.rsx-ben:hover::before { transform: scaleX(1); }

.rsx-ben:hover {
    transform: translateY(-5px);
    border-color: var(--rsx-ink);
    box-shadow: 0 26px 56px -28px rgba(11,13,16,.46);
}

/* The number IS the pitch. Bigger than any headline on the page. */
.rsx-figure {
    display: block;
    font-size: clamp(3rem, 6vw, 4.4rem);
    line-height: .92;
    color: var(--rsx-red);
    font-variant-numeric: tabular-nums;
    margin-bottom: .55rem;
}

.rsx-ben h3 {
    font-size: 1.4375rem;
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 .75rem;
    letter-spacing: -.015em;
}

.rsx-ben p { font-size: 1.0625rem !important; line-height: 1.6; color: var(--rsx-soft); margin: 0; }

/* Bullets inside a card. Scannable beats a paragraph for somebody who will not
   read - which is the whole brief for this page. */
.rsx-ben ul { list-style: none; margin: 1rem 0 0; padding: 0; }

.rsx-ben li {
    position: relative;
    padding-left: 26px;
    font-size: 1.0625rem;
    line-height: 1.52;
    margin-bottom: .7rem;
    color: var(--rsx-ink);
}

.rsx-ben li:last-child { margin-bottom: 0; }

.rsx-ben li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 10px; height: 2px;
    background: var(--rsx-red);
}

.rsx-ben li b { font-weight: 700; }

/* ==========================================================================
   TOOLS — a compact strip, not four essays
   ========================================================================== */

.rsx-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

/* Separate panels rather than one hairline-divided slab. The slab version read
   as a table; these read as four things worth looking at. */
.rsx-tool {
    position: relative;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.14);
    padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
    overflow: hidden;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.rsx-tool::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--rsx-red);
    transition: width .32s cubic-bezier(.2,.7,.3,1);
}

.rsx-tool:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.3); transform: translateY(-4px); }
.rsx-tool:hover::before { width: 100%; }

.rsx-tool-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border: 1.5px solid var(--rsx-red);
    color: var(--rsx-red);
    margin-bottom: 1.5rem;
    transition: background .22s ease, color .22s ease;
}

.rsx-tool:hover .rsx-tool-ico { background: var(--rsx-red); color: #fff; }

.rsx-tool h3 { font-size: 1.4375rem; font-weight: 700; line-height: 1.22; margin: 0 0 .7rem; letter-spacing: -.015em; }
.rsx-tool p { font-size: 1.0625rem !important; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0; }

/* ==========================================================================
   OFFER — the loudest band on the page
   ========================================================================== */

.rsx-offer { position: relative; background: var(--rsx-red); color: #fff; padding: clamp(46px, 7vw, 80px) 0; overflow: hidden; text-align: center; }

.rsx-offer::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 8px;
    background: repeating-linear-gradient(-45deg, var(--rsx-ink) 0 16px, transparent 16px 32px);
}

.rsx-offer .rsx-kicker { color: rgba(255,255,255,.8); }

.rsx-offer h2 {
    font-size: clamp(2.4rem, 7vw, 5rem);
    line-height: .98;
    margin: 0 0 1.2rem;
}

.rsx-offer p { font-size: 1.1875rem !important; line-height: 1.55; color: rgba(255,255,255,.92); max-width: 46ch; margin: 0 auto 2rem; }

.rsx-offer .rsx-btn-primary { background: #fff; color: var(--rsx-ink); box-shadow: 0 12px 36px -14px rgba(0,0,0,.5); }
.rsx-offer .rsx-btn-primary:hover { background: var(--rsx-ink); color: #fff; }

/* ==========================================================================
   FORM
   ========================================================================== */

.rsx-form-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(30px, 5vw, 72px); align-items: start; }

.rsx-form-aside h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.02; margin: 0 0 1.15rem; }
.rsx-form-aside > p { font-size: 1.125rem !important; line-height: 1.6; color: var(--rsx-soft); margin: 0 0 2rem; max-width: 42ch; }

.rsx-assure { list-style: none; margin: 0; padding: 0; }

.rsx-assure li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rsx-rule);
    font-size: 1.0625rem; line-height: 1.5;
}

.rsx-assure li:first-child { border-top: 1px solid var(--rsx-rule); }
.rsx-assure svg { flex: 0 0 18px; margin-top: 4px; color: var(--rsx-red); }

.rsx-form {
    background: var(--rsx-paper);
    border: 1px solid var(--rsx-rule);
    border-top: 5px solid var(--rsx-red);
    padding: clamp(26px, 3.4vw, 40px);
    box-shadow: 0 26px 60px -34px rgba(11,13,16,.4);
}

.rsx-form-head { padding-bottom: 1.2rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--rsx-rule); }
.rsx-form-head h3 { font-size: 1.375rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.012em; }
.rsx-form-head p { font-size: .9375rem !important; color: var(--rsx-faint); margin: 0; }

.rsx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rsx-field-full { grid-column: 1 / -1; }

.rsx-field label {
    display: block;
    font-size: .8125rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--rsx-soft); margin-bottom: .55rem;
}

.rsx-field label i { font-style: normal; color: var(--rsx-red); margin-left: 3px; }

.rsx-field input, .rsx-field textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1.5px solid var(--rsx-rule);
    border-radius: 0;
    background: #fbfaf8;
    font-family: inherit;
    font-size: 1.0625rem;      /* 17px — typeable on a phone without zooming */
    color: var(--rsx-ink);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.rsx-field textarea { resize: vertical; min-height: 112px; }

.rsx-field input:focus, .rsx-field textarea:focus {
    outline: none; background: #fff;
    border-color: var(--rsx-ink);
    box-shadow: 0 0 0 3px rgba(11,13,16,.08);
}

.rsx-field input.is-bad, .rsx-field textarea.is-bad { border-color: var(--rsx-red); background: #fff6f7; }

.rsx-field-err { display: none; font-size: .8125rem; color: var(--rsx-red); margin-top: .4rem; }
.rsx-field-err.is-on { display: block; }

.rsx-form-foot { margin-top: 1.8rem; }
.rsx-submit { width: 100%; background: var(--rsx-red); color: #fff; border-color: var(--rsx-red); font-size: 1rem; padding: 22px 30px; }
.rsx-submit:hover:not(:disabled) { background: var(--rsx-ink); border-color: var(--rsx-ink); transform: translateY(-3px); }
.rsx-submit:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.rsx-form-note { font-size: .875rem !important; line-height: 1.5; color: var(--rsx-faint); margin: 1rem 0 0; text-align: center; }

.rsx-form-msg { display: none; margin-top: 1.1rem; padding: 16px 18px; font-size: 1rem; line-height: 1.5; border-left: 4px solid; }
.rsx-form-msg.is-on { display: block; }
.rsx-form-msg.is-ok { background: #f968;  background: #f1f8f2; border-color: #2e7d41; color: #1e5c2e; }
.rsx-form-msg.is-bad { background: #fff6f7; border-color: var(--rsx-red); color: var(--rsx-red-dk); }

/* ==========================================================================
   Load reveal — one orchestrated moment
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .rsx-rise { opacity: 0; transform: translateY(18px); animation: rsx-rise .66s cubic-bezier(.2,.7,.3,1) forwards; }
    .rsx-rise-1 { animation-delay: .04s; }
    .rsx-rise-2 { animation-delay: .13s; }
    .rsx-rise-3 { animation-delay: .22s; }
    .rsx-rise-4 { animation-delay: .31s; }
}

@keyframes rsx-rise { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Responsive — properly, down to 360px
   --------------------------------------------------------------------------
   Phone first in intent even though the CSS is written desktop-down: a yard
   owner reads this standing in the yard, not at a desk. Everything that is a
   grid collapses, the display type steps down so a headline cannot overflow,
   and no element keeps a width the screen cannot hold.
   ========================================================================== */

@media (max-width: 1100px) {
    .rsx-hero-grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
    .rsx-money { max-width: 560px; }
}

@media (max-width: 991px) {
    .rsx-form-wrap { grid-template-columns: 1fr; }
    .rsx-split { grid-template-columns: 1fr; }
    .rsx-tools { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .rsx { font-size: 17px; }

    .rsx-hero { padding-bottom: clamp(36px, 8vw, 54px); }
    .rsx-crumb { padding: 14px 0 22px; }
    .rsx-hero h1 { font-size: clamp(2.25rem, 10vw, 3.4rem); }
    .rsx-hero-sub { max-width: none; }

    .rsx-money { max-width: none; }
    .rsx-money-big { font-size: clamp(3rem, 15vw, 4.2rem); }

    .rsx-section { padding: clamp(42px, 10vw, 60px) 0; }
    .rsx-head h2 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); }
    .rsx-head p { font-size: 1.0625rem !important; }

    .rsx-split > div { padding: clamp(28px, 7vw, 40px) 0; }
    .rsx-split h2 { font-size: clamp(1.375rem, 6vw, 1.85rem); }
    .rsx-split li { font-size: 1rem; }

    .rsx-figure { font-size: clamp(2.6rem, 13vw, 3.6rem); }
    .rsx-offer h2 { font-size: clamp(2rem, 11vw, 3.2rem); }
    .rsx-form-aside h2 { font-size: clamp(1.75rem, 7.6vw, 2.5rem); }
}

@media (max-width: 560px) {
    .rsx-fields { grid-template-columns: 1fr; }
    .rsx-cta-row { flex-direction: column; align-items: stretch; }
    .rsx-btn { width: 100%; padding: 18px 22px; }
    .rsx-tools { grid-template-columns: 1fr; }

    /* Three stat columns do not fit a phone. One row of three becomes a stack
       with rules between, which keeps the figures legible instead of shrinking
       them to nothing. */
    .rsx-money-grid { grid-template-columns: 1fr; }
    .rsx-money-grid div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); display: flex; align-items: baseline; gap: 12px; }
    .rsx-money-grid div:last-child { border-bottom: 0; }
    .rsx-money-grid b { margin-bottom: 0; }

    .rsx-bens { gap: 16px; }
    .rsx-ben { padding: 26px 22px; }
}

@media (max-width: 400px) {
    .rsx { font-size: 16px; }
    .rsx-hero h1 { font-size: clamp(2rem, 11vw, 2.6rem); }
    .rsx-money-top { padding: 22px 20px; }
    .rsx-money-grid div { padding: 15px 20px; }
    .rsx-form { padding: 22px 18px; }
    .rsx-btn { font-size: .875rem; letter-spacing: .05em; }
}

/* ==========================================================================
   FAQ — after the form
   --------------------------------------------------------------------------
   <details>, so every answer is in the HTML whether or not it is open. That
   matters twice here: a crawler reads it, and so does an assistant answering
   "what does salvage yard software include".
   ========================================================================== */

.rsx-faq { background: var(--rsx-paper); border-top: 1px solid var(--rsx-rule); }

.rsx-faq-list { border-top: 1px solid var(--rsx-rule); }

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

.rsx-faq-item > summary {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: clamp(20px, 2.4vw, 28px) 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.012em;
    color: var(--rsx-ink);
    transition: color .16s ease;
}

.rsx-faq-item > summary::-webkit-details-marker { display: none; }
.rsx-faq-item > summary::marker { content: ''; }

.rsx-faq-item > summary::after {
    content: '';
    flex: 0 0 13px;
    width: 13px; height: 13px;
    margin-left: auto;
    margin-top: .45em;
    border-right: 2.5px solid var(--rsx-red);
    border-bottom: 2.5px solid var(--rsx-red);
    transform: rotate(45deg);
    transition: transform .22s ease;
}

.rsx-faq-item[open] > summary::after { transform: rotate(-135deg); }
.rsx-faq-item > summary:hover { color: var(--rsx-red); }

/* FULL WIDTH. This carried max-width: 82ch, which at 17px is about 656px - a
   little over half a 1170px container - so every answer stopped halfway across
   with the rest of the row empty. A reading measure is the right instinct for a
   long article; it is the wrong one for an answer sitting under its own question
   in an accordion, where the stop reads as a layout fault. */
.rsx-faq-a { padding: 0 0 clamp(22px, 2.6vw, 30px); max-width: none; }

.rsx-faq-a p {
    font-size: 1.0625rem !important;
    line-height: 1.72;
    color: var(--rsx-soft);
    margin: 0;
}

@media (max-width: 560px) {
    .rsx-faq-item > summary { gap: 12px; font-size: 1.0625rem; }
    .rsx-faq-a p { font-size: 1rem !important; }
}