/* The request, on the home page: one bar that grows into the request.
   The hero's arrow travels into the bar's button (js/opening.js); what the
   visitor types is read against the network as they type (js/ask.js), and the
   pieces it names are drawn with the network page's flats. Pressing the button
   opens the two questions in place, and the same button carries on to Send.
   Settings are the home page's own: white under the paper hero, ink #14222c,
   blue #0866ef, Inter at 550, hairlines, the riso-blue ink of the flats.     */

.rq {
  --ink: #14222c; --sub: #4f5e64; --muted: #687378; --soft: #8a9296;
  --blue: #0866ef; --blue-deep: #0553c4; --riso: #2b6ef0; --fill: #fffdf8;
  --line: #d9dcd8; --hair: #14222c14; --warn: #b3261e;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.2, .9, .25, 1.15);
  --card-r: 44px;
  position: relative; background: #fff; color: var(--ink); scroll-margin-top: 120px;
}
.rq-inner { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; max-width: 1200px; min-height: 92svh; margin: 0 auto; padding: 110px 48px 125px; }
.rq-h { margin: 0 0 12px; font: 550 clamp(34px, 3.4vw, 48px)/1.1 Inter, sans-serif; letter-spacing: -.045em; color: var(--ink); }
.rq-sub { max-width: 60ch; margin: 0 0 42px; font: 400 17px/1.5 Inter, sans-serif; color: var(--sub); }
.rq-h, .rq-sub, .rq-foot { opacity: var(--entry-details, 1); }

/* ── The card: a pill until it has something to show ─────────────────────── */
/* opening.css still orders the old intake form (#intake-form) after its siblings. */
.rq #intake-form.rq-card { order: 0; }
.rq-card { position: relative; isolation: isolate; border-radius: var(--card-r); transition: border-radius .5s var(--ease); }
.rq-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border: 1px solid var(--line); border-radius: inherit; box-shadow: 0 5px 25px #14222c06; transition: border-color .2s, box-shadow .35s var(--ease); }
.rq-card.is-grown { --card-r: 32px; }
.rq-card.is-grown::before { box-shadow: 0 1px 0 #fff inset, 0 18px 60px #14222c0f, 0 3px 10px #14222c06; }
.rq-card:has(.rq-bar:focus-within)::before { border-color: #0866ef80; box-shadow: 0 0 0 3px #0866ef0b, 0 5px 25px #14222c06; }
.rq-card.is-grown:has(.rq-bar:focus-within)::before { box-shadow: 0 0 0 3px #0866ef0b, 0 18px 60px #14222c0f; }
/* While the hero's arrow travels, the bar is drawn in from its right end. */
.has-opening-motion:not(.opening-used) .rq-card::before { clip-path: inset(0 0 0 calc((1 - var(--entry-reveal, 1)) * 100%) round var(--card-r)); }
.has-opening-motion:not(.opening-used) .rq-field { clip-path: inset(-20px 0 -20px calc((1 - var(--entry-reveal, 1)) * 100%)); }
.has-opening-motion:not(.opening-used) .rq-attach { opacity: var(--entry-details, 1); }

.rq-bar { position: relative; display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 10px 10px 10px 14px; box-sizing: border-box; }
.rq-attach { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sub); cursor: pointer; transition: background .2s, color .2s, transform .35s var(--spring); }
.rq-attach svg { width: 24px; height: 24px; }
.rq-attach:hover { background: #0866ef0d; color: var(--blue); }
.rq-attach:active { transform: scale(.92); }
.rq-attach:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.rq-field { position: relative; flex: 1; min-width: 0; }
.rq-field textarea { display: block; box-sizing: border-box; width: 100%; height: 28px; min-height: 28px; max-height: 112px; margin: 0; padding: 0; border: 0; background: none; outline: none; resize: none; overflow-y: auto; color: var(--ink); font: 400 21px/28px Inter, sans-serif; letter-spacing: -.025em; }
.rq-field textarea::placeholder { color: #758086; opacity: 1; }
.rq-field:has(.rq-ghost:not([hidden])) textarea::placeholder { color: transparent; }
.rq-ghost { position: absolute; inset: 50% 0 auto; transform: translateY(-50%); color: #738088; pointer-events: none; }
.rq-ghost small { display: block; margin-bottom: 3px; font: 400 10px/1.4 Inter, sans-serif; color: #7b8589; letter-spacing: .02em; }
.rq-ghost span { display: block; overflow: hidden; font: 400 21px/28px Inter, sans-serif; letter-spacing: -.025em; white-space: nowrap; text-overflow: ellipsis; }
.rq-ghost span::after { content: ""; display: inline-block; width: 1.5px; height: 22px; margin-left: 2px; vertical-align: -3px; background: var(--blue); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* The button the hero's arrow becomes. */
.rq-go-slot { position: relative; flex: none; width: 158px; height: 66px; transition: width .45s var(--ease), opacity .25s; }
.rq-go { --gap: 16px; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--gap); width: 158px; height: 66px; margin-left: auto; padding: 0 22px; border: 0; border-radius: 40px; background: var(--blue); color: #fff; font: 500 16px Inter, sans-serif; white-space: nowrap; overflow: hidden; cursor: pointer; transition: background .18s, transform .35s var(--spring); }
.rq-go span { flex: none; opacity: var(--button-label, 1); }
.rq-go svg { flex: none; width: 24px; height: 24px; transform: rotate(var(--arrow-angle, 0deg)); transition: transform .35s var(--spring); }
.rq-go:hover { background: var(--blue-deep); }
.rq-go:hover svg { transform: translateX(3px); }
.rq-go:active { transform: scale(.96); }
.rq-go:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.rq-go.is-travelling { width: var(--button-w); height: var(--button-h); padding: 0; }
.rq-go.is-travelling svg { transition: none; transform: translateX(calc((var(--button-progress) - 1) * (var(--button-label-w) + var(--gap)) * .5)) rotate(var(--arrow-angle)); }
.rq-go.is-nudge { animation: nudge .5s var(--ease); }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-2px); } }
/* Once the card is open, the button has travelled on to Send. */
.rq-card.is-open .rq-go-slot { width: 0; margin-left: -14px; opacity: 0; pointer-events: none; }

/* ── Growing rows ────────────────────────────────────────────────────────── */
.rq-grow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.rq-grow > * { min-height: 0; overflow: hidden; }
.rq-grow.is-shown { grid-template-rows: 1fr; }
.rq-grow > * > * { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .45s var(--ease); }
.rq-grow.is-shown > * > * { opacity: 1; transform: none; transition: opacity .45s .12s, transform .6s .08s var(--ease); }
.rq-grow.is-shown > * > :nth-child(2) { transition-delay: .2s, .16s; }
.rq-grow.is-shown > * > :nth-child(3) { transition-delay: .28s, .24s; }
.rq-grow.is-shown > * > :nth-child(4) { transition-delay: .36s, .32s; }

/* ── What the bar read: pieces, photos, a link, who makes it ─────────────── */
.rq-read { display: flex; flex-direction: column; gap: 14px; margin: 0 30px; }
.rq-read > :first-child { margin-top: 2px; }
.rq-read > :last-child { margin-bottom: 26px; }
.rq-found { display: flex; align-items: center; gap: 18px 40px; padding-top: 20px; border-top: 1px solid var(--hair); }
.rq-shelf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.rq-told { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.rq-quiet { margin: 0; font: 400 13px/1.45 Inter, sans-serif; color: var(--muted); }
.rq-piece { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px; }
.rq-piece svg { display: block; width: 86px; height: 86px; overflow: visible; }
.rq-piece b { font: 500 12.5px/1.3 Inter, sans-serif; color: var(--ink); text-align: center; }
.rq-piece small { font: 400 12px/1.3 Inter, sans-serif; color: var(--muted); font-variant-numeric: tabular-nums; }
.rq-photo { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px; }
.rq-photo-pic { position: relative; width: 86px; height: 86px; border-radius: 16px; background: #f3f1ea; box-shadow: inset 0 0 0 1px #14222c12; animation: pop .55s var(--spring) both; }
.rq-photo b { font: 500 12.5px/1.3 Inter, sans-serif; color: var(--ink); }
.rq-photo small { font: 400 12px/1.3 Inter, sans-serif; color: var(--muted); }
.rq-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rq-photo .rq-doc { display: grid; place-items: center; height: 100%; font: 600 12px Inter, sans-serif; letter-spacing: .04em; color: var(--sub); }
.rq-photo button { position: absolute; top: -8px; right: -2px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; font: 500 15px/1 Inter, sans-serif; cursor: pointer; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .3s var(--spring); }
.rq-photo:hover button, .rq-photo button:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .rq-photo button { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.7) rotate(-4deg); } }
.rq-said { margin: 0; font: 400 16px/1.45 Inter, sans-serif; letter-spacing: -.01em; color: var(--sub); text-wrap: pretty; }
.rq-said b { font-weight: 550; color: var(--ink); }
.rq-said .rq-seen { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.rq-said .rq-seen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.rq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; margin: 0; padding: 7px 14px 7px 11px; border-radius: 99px; background: #0866ef0d; color: var(--blue-deep); font: 500 13.5px/1.3 Inter, sans-serif; }
.rq-link svg { flex: none; width: 16px; height: 16px; }
.rq-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-read.is-example .rq-found, .rq-read.is-example .rq-chips { opacity: .62; }

/* The flats, as on the network page: outlines plotted, then the riso ink. */
.rq .fb { fill: var(--riso); }
.rq .ink { opacity: 0; transform: translate(9px, -7px); transition: opacity .16s, transform .55s var(--spring); filter: url(#rq-grain); }
.rq .on .ink { opacity: .96; transform: translate(2.2px, 1.6px); transition: opacity .3s .75s, transform .7s .75s var(--spring); }
.rq .fo { fill: var(--fill); stroke: var(--ink); stroke-width: 1.45; stroke-linejoin: round; stroke-linecap: round; transition: fill .2s .9s; }
.rq .on .fo { fill: transparent; }
.rq .fs { fill: none; stroke: var(--ink); stroke-width: .95; stroke-linecap: round; stroke-linejoin: round; }
.rq .ft { fill: none; stroke: var(--ink); stroke-width: .8; stroke-dasharray: 2.2 2; stroke-linecap: round; opacity: .85; }
.rq .fh { fill: var(--fill); stroke: var(--ink); stroke-width: .95; }
.rq .fr { stroke-width: .75; } .rq .fw { stroke-width: 1.45; } .rq .fm { stroke-width: .5; opacity: .5; } .rq .fk { stroke-width: .75; }
.rq .pending .fo, .rq .pending .fs { stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0; }
.rq .pending .ft, .rq .pending .fh { opacity: 0; }
.rq .drawing .fo, .rq .drawing .fs { stroke-dasharray: 1 1; stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1.05s cubic-bezier(.55, .05, .25, 1), fill-opacity .5s .75s, fill .2s .9s; }
.rq .drawing .ft, .rq .drawing .fh { opacity: 1; transition: opacity .45s .8s; }

/* ── The two questions ───────────────────────────────────────────────────── */
.rq-more { display: flex; flex-direction: column; gap: 30px; margin: 0 30px; }
/* The divider is drawn inside the row, so a closed row shows none of it. */
.rq-more::before { content: ""; display: block; margin-bottom: -4px; border-top: 1px solid var(--hair); }
.rq-more > :last-child { margin-bottom: 30px; }
.rq-row { min-width: 0; margin: 0; padding: 0; border: 0; }
/* A legend floated to full width lays out like any heading, not on the fieldset's edge. */
.rq-q { float: left; width: 100%; margin: 0 0 14px; padding: 0; font: 550 19px/1.3 Inter, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.rq-q + * { clear: both; }
.rq-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-seg label { position: relative; }
.rq-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rq-seg span { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 99px; background: #f4f2ec; color: var(--ink); font: 500 15px Inter, sans-serif; font-variant-numeric: tabular-nums; transition: background .2s, color .2s, transform .35s var(--spring), box-shadow .2s; }
.rq-seg label:hover span { background: #ebe8df; }
.rq-seg input:checked + span { background: var(--blue); color: #fff; box-shadow: 0 6px 16px #0866ef33; }
.rq-seg input:active + span { transform: scale(.95); }
.rq-seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.rq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rq-in { position: relative; display: block; }
.rq-in span { position: absolute; top: 9px; left: 18px; font: 500 11.5px Inter, sans-serif; letter-spacing: .01em; color: var(--muted); pointer-events: none; }
.rq-in input { box-sizing: border-box; width: 100%; height: 62px; margin: 0; padding: 25px 18px 9px; border: 1px solid var(--line); border-radius: 18px; background: #fbfaf7; color: var(--ink); font: 400 17px Inter, sans-serif; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.rq-in input::placeholder { color: #a0a7aa; }
.rq-in input:focus { border-color: #0866ef80; background: #fff; box-shadow: 0 0 0 4px #0866ef12; }
.rq-in input[aria-invalid="true"] { border-color: #b3261e80; }
.rq-e { margin: 10px 0 0; font: 500 13.5px/1.4 Inter, sans-serif; color: var(--warn); }
.rq-row.is-wrong .rq-q { animation: nudge .45s var(--ease); }

.rq-send-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.rq-promise { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 300px; max-width: 46ch; margin: 0; font: 400 14.5px/1.5 Inter, sans-serif; color: var(--sub); }
.rq-promise svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--blue); }
.rq-promise b { font-weight: 550; color: var(--ink); }
.rq-e-send { flex-basis: 100%; order: 3; margin: 0; }

/* The button that was "Quote it", now Send; then a ring, then a tick. */
.rq-send { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px; flex: none; height: 66px; min-width: 66px; padding: 0 26px 0 30px; border: 0; border-radius: 40px; background: var(--blue); color: #fff; font: 500 16px Inter, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .18s, transform .35s var(--spring), padding .4s var(--ease), gap .4s var(--ease), box-shadow .3s; }
.rq-send:hover { background: var(--blue-deep); box-shadow: 0 10px 26px #0866ef38; }
.rq-send:active { transform: scale(.96); }
.rq-send:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.rq-send svg { flex: none; width: 24px; height: 24px; }
.rq-send-arrow { transition: transform .35s var(--spring), opacity .2s; }
.rq-send:hover .rq-send-arrow { transform: translateX(3px); }
.rq-send-label { display: inline-block; max-width: 20ch; overflow: hidden; transition: max-width .4s var(--ease), opacity .2s; }
.rq-send-ring, .rq-send-check { position: absolute; top: 50%; left: 50%; width: 26px !important; height: 26px !important; margin: -13px 0 0 -13px; opacity: 0; fill: none; stroke: #fff; stroke-linecap: round; }
.rq-send-ring { stroke-width: 2; stroke-dasharray: 40 100; transition: opacity .2s; }
.rq-send-check { stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.rq-send.is-busy, .rq-send.is-sent { gap: 0; padding: 0; width: 66px; cursor: default; }
.rq-send.is-busy .rq-send-label, .rq-send.is-sent .rq-send-label { max-width: 0; opacity: 0; }
.rq-send.is-busy .rq-send-arrow, .rq-send.is-sent .rq-send-arrow { opacity: 0; width: 0; }
.rq-send.is-busy .rq-send-ring { opacity: 1; animation: spin .8s linear infinite; }
.rq-send.is-sent { background: var(--blue); }
.rq-send.is-sent .rq-send-check { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .45s .05s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Sent ────────────────────────────────────────────────────────────────── */
.rq-done { padding: 40px 40px 36px; }
.rq-done > * { animation: rise .7s var(--ease) both; }
.rq-done > :nth-child(2) { animation-delay: .08s; } .rq-done > :nth-child(3) { animation-delay: .14s; }
.rq-done > :nth-child(4) { animation-delay: .2s; } .rq-done > :nth-child(5) { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.rq-route { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 34px; padding: 0; list-style: none; counter-reset: step; }
.rq-route li { position: relative; padding-top: 24px; font: 500 13px/1.3 Inter, sans-serif; color: var(--soft); }
.rq-route li::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box; width: 13px; height: 13px; border: 1.5px solid #b9c0c3; border-radius: 50%; background: #fff; }
.rq-route li::after { content: ""; position: absolute; top: 6px; left: 13px; right: 0; height: 0; border-top: 1.5px dotted #c5cbcd; }
.rq-route li:last-child::after { display: none; }
.rq-route .is-done { color: var(--ink); }
.rq-route .is-done::before { border: 0; background: var(--blue); animation: dot .5s .35s var(--spring) both; }
/* Sent → Answered: the request is on its way, so the line runs toward the next dot. */
.rq-route .is-done::after { top: 5.25px; height: 1.5px; border: 0; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 11px); transform-origin: left; animation: reach 1.1s .55s var(--ease) both, flow 1.1s 1.65s linear infinite; }
@keyframes flow { to { background-position: 11px 0; } }
.rq-route .is-next { color: var(--ink); }
.rq-route .is-next::before { border-color: var(--blue); box-shadow: 0 0 0 0 #0866ef40; animation: wait 2.2s 1.6s ease-out infinite; }
@keyframes dot { from { transform: scale(0); } }
@keyframes reach { from { transform: scaleX(0); } }
@keyframes wait { 0% { box-shadow: 0 0 0 0 #0866ef45; } 70%, 100% { box-shadow: 0 0 0 9px #0866ef00; } }
.rq-done-h { margin: 0 0 10px; font: 550 clamp(28px, 2.6vw, 38px)/1.12 Inter, sans-serif; letter-spacing: -.045em; outline: none; }
.rq-done-line { max-width: 58ch; margin: 0; font: 400 17px/1.55 Inter, sans-serif; color: var(--sub); }
.rq-done-line b { font-weight: 550; color: var(--ink); }
.rq-uploads { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.rq-uploads li { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #f3f1ea; box-shadow: inset 0 0 0 1px #14222c12; }
.rq-uploads img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rq-uploads .rq-doc { display: grid; place-items: center; height: 100%; font: 600 11px Inter, sans-serif; color: var(--sub); }
.rq-uploads li::after { content: ""; position: absolute; inset: 0; background: #ffffffb3; transition: opacity .4s; }
.rq-uploads li[data-status="done"]::after { opacity: 0; }
.rq-uploads li[data-status="failed"]::after { background: #fff0eecc; }
.rq-uploads li i { position: absolute; right: 6px; bottom: 6px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; }
.rq-uploads li[data-status="sending"] i { border: 2px solid #0866ef30; border-top-color: var(--blue); animation: spin .8s linear infinite; }
.rq-uploads li[data-status="done"] i { background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%; animation: dot .4s var(--spring); }
.rq-uploads li[data-status="failed"] i { background: var(--warn); }
.rq-done-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; }
.rq-open[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.rq-ref { margin: 0; font: 400 13px Inter, sans-serif; color: var(--soft); }
.rq-ref code { font: 500 13px ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }
.rq-card.is-done .rq-bar, .rq-card.is-done .rq-grow { display: none; }

/* Dragging a file anywhere over the card. */
.rq-drop { position: absolute; inset: 6px; z-index: 5; display: grid; place-items: center; border: 2px dashed #0866ef80; border-radius: calc(var(--card-r) - 6px); background: #f5f9ffeb; color: var(--blue-deep); font: 550 17px Inter, sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s; }
.rq-card.is-over .rq-drop { opacity: 1; }

.rq-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin: 22px 30px 0; font: 400 13px/1.5 Inter, sans-serif; color: var(--muted); }
.rq-trust { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rq-trust span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rq-trust span::before { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid var(--blue); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.rq-card.is-done ~ .rq-foot { visibility: hidden; }

.rq .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rq .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rq { --card-r: 35px; }
  .rq-card.is-grown { --card-r: 28px; }
  .rq-inner { min-height: 0; padding: 96px 16px 90px; }
  .rq-h { max-width: 12ch; font-size: 34px; }
  .rq-sub { max-width: 32ch; margin-bottom: 30px; font-size: 15.5px; }
  .rq-bar { gap: 6px; min-height: 70px; padding: 7px 7px 7px 6px; }
  .rq-attach { width: 44px; height: 44px; }
  .rq-attach svg { width: 22px; height: 22px; }
  .rq-field textarea, .rq-ghost span { font-size: 17px; line-height: 24px; }
  .rq-field textarea { height: 24px; min-height: 24px; }
  .rq-ghost span::after { height: 18px; }
  .rq-go-slot { width: 54px; height: 54px; }
  .rq-go { --gap: 0px; width: 54px; height: 54px; padding: 0; }
  .rq-go span { display: none; }
  .rq-card.is-open .rq-go-slot { margin-left: -6px; }
  .rq-read, .rq-more { margin: 0 18px; }
  .rq-found { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
  .rq-shelf { gap: 10px 14px; }
  .rq-piece { width: 72px; }
  .rq-piece svg { width: 64px; height: 64px; }
  .rq-photo { width: 72px; }
  .rq-photo-pic { width: 64px; height: 64px; }
  .rq-said { font-size: 15px; }
  .rq-more { gap: 26px; }
  .rq-q { font-size: 17.5px; }
  .rq-seg { gap: 6px; }
  .rq-seg span { height: 44px; padding: 0 16px; font-size: 14.5px; }
  .rq-two { grid-template-columns: 1fr; gap: 10px; }
  .rq-send-row { flex-direction: column-reverse; align-items: stretch; }
  .rq-send-row .rq-send { width: 100%; }
  .rq-send-row .rq-send.is-busy, .rq-send-row .rq-send.is-sent { width: 66px; align-self: center; }
  .rq-promise { max-width: none; flex-basis: auto; font-size: 14px; }
  .rq-done { padding: 30px 22px 26px; }
  .rq-route li { font-size: 11px; }
  .rq-done-line { font-size: 15.5px; }
  .rq-done-row .rq-send { width: 100%; }
  .rq-foot { flex-direction: column; margin: 18px 18px 0; }
}
@media (max-width: 380px) {
  .rq-seg span { padding: 0 13px; }
  .rq-route li span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rq *, .rq *::before, .rq *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}