/* gigs.claims, on the api.insure family system (base.css). The adjuster's side of the same claim
   file: a phone receiving a matched file, the license map, the three outcomes, the terms, and a
   five-step application. Loads after base.css. */

/* ---------- hero: copy left, the phone right, tucked behind the next section ---------- */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(40px, 6vw, 96px); align-items: start; }
.hero-copy { padding-top: clamp(8px, 2vw, 40px); padding-bottom: 72px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 76px); }
/* the phone's content is fixed in size while the device scales with the column, so the hero shows
   a fixed height of it (the tallest view plus a margin) and the rest tucks under the next section */
.hero-art { position: relative; z-index: 1; height: 596px; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { justify-self: center; width: min(400px, 100%); margin-top: 8px; }
}
@media (max-width: 640px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; height: 48px; }
  .hero-art { width: min(340px, 100%); }
}

/* ---------- the phone (true aspect 402/874) ---------- */
.phone { position: relative; width: 100%; max-width: 400px; aspect-ratio: 402 / 874; margin-left: auto;
  filter: drop-shadow(0 30px 40px rgba(var(--ink-rgb), .18)) drop-shadow(0 70px 90px rgba(var(--ink-rgb), .22)); }
.ph-bezel { position: absolute; inset: 0; padding: 10px; border-radius: 62px;
  background: linear-gradient(160deg, #3a3f45, #1c2024 18%, #121518 50%, #1c2024 82%, #30353a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 2px rgba(0,0,0,.6); }
.ph-bezel::before, .ph-bezel::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2e33; }
.ph-bezel::before { left: -2px; top: 22%; height: 9%; box-shadow: 0 64px 0 #2a2e33; }
.ph-bezel::after { right: -2px; top: 28%; height: 13%; }
.ph-screen { position: relative; height: 100%; border-radius: 52px; overflow: hidden; background: #f7f3e8; color: var(--ink); }
.ph-island { position: absolute; left: 50%; top: 11px; width: 116px; height: 34px; margin-left: -58px; border-radius: 20px; background: #0b0d0f; z-index: 3; }
.ph-status { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 0 30px 0 34px; font-size: 14px; font-weight: 590; }
.ph-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.ph-sig i { width: 3px; background: var(--ink); border-radius: 1px; }
.ph-sig i:nth-child(1) { height: 5px; } .ph-sig i:nth-child(2) { height: 8px; } .ph-sig i:nth-child(3) { height: 11px; }
.ph-app { position: relative; height: calc(100% - 54px); }
.ph-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.ph-mark .brand-mark { width: 13px; height: 17px; }
.ph-mark .bm-t { fill: var(--ink); } .ph-mark .bm-b { fill: var(--acc); }
.ph-title { font-size: 15px; font-weight: 590; letter-spacing: -.015em; }
.ph-lic { margin-left: auto; font: 500 10.5px/1 var(--mono); color: var(--t3); padding: 5px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
/* one view at a time: the outgoing screen fades first, then the next one rises in */
.ph-view { position: absolute; inset: 46px 0 0; padding: 14px 14px 0; opacity: 0; transform: translateY(8px); transition: opacity .22s var(--ease), transform .3s var(--ease); pointer-events: none; }
.ph-view.on { opacity: 1; transform: none; transition: opacity .4s var(--ease) .24s, transform .6s var(--ease-fig) .24s; }
.no-js .ph-view[data-view="0"], .reduce .ph-view[data-view="0"] { opacity: 1; transform: none; }
.ph-note { display: flex; align-items: center; gap: 8px; margin: 2px 4px 12px; font-size: 12.5px; color: var(--acc-deep); font-weight: 510; }
.ph-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .14); }
.ph-file { padding: 14px 14px 14px; border-radius: 16px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 20px -14px rgba(var(--ink-rgb), .35); }
.ph-file + .ph-file { margin-top: 10px; }
.ph-file-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ph-file-h b { font-size: 15px; font-weight: 590; letter-spacing: -.015em; }
.ph-file-h span { font: 500 10.5px/1 var(--mono); color: var(--t4); }
.ph-file-s { margin-top: 3px; font-size: 12.5px; color: var(--t3); }
.ph-kv { margin: 12px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.ph-kv div { display: flex; justify-content: space-between; align-items: center; height: 31px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ph-kv dt { color: var(--t4); }
.ph-kv dd { margin: 0; font-weight: 510; color: var(--t2); }
.ph-fee { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(var(--acc-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .25); font-size: 12.5px; color: var(--acc-deep); }
.ph-fee b { font: 600 12px/1 var(--mono); }
.ph-btn { display: flex; align-items: center; justify-content: center; height: 42px; margin-top: 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 510; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.ph-btn.press { transform: scale(.97); background: #2c3942; }
.ph-file-dim { opacity: .55; }
.ph-crumb { margin: 2px 4px 12px; font: 500 11px/1.3 var(--mono); color: var(--t4); }
.ph-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ph-photos i { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 40%), linear-gradient(180deg, #9fb3bd 0 38%, #6c7a6f 38% 40%, #8d8a7c 40% 100%); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .1); }
.ph-photos i:nth-child(2) { background: linear-gradient(160deg, rgba(255,255,255,.3), transparent 40%), repeating-linear-gradient(170deg, #7d6f63 0 6px, #6f6258 6px 7px); }
.ph-photos i:nth-child(3) { background: linear-gradient(160deg, rgba(255,255,255,.3), transparent 40%), linear-gradient(180deg, #b7c2c5 0 55%, #7f8a80 55% 100%); }
.ph-sec { margin-top: 10px; padding: 11px 12px; border-radius: 12px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-2); }
.ph-sec > span { display: block; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t4); }
.ph-sec p { margin-top: 6px; font-size: 13px; color: var(--t2); }
.ph-lines { list-style: none; margin: 6px 0 0; padding: 0; }
.ph-lines li { display: flex; justify-content: space-between; gap: 8px; height: 26px; align-items: center; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.ph-lines li:last-child { border-bottom: 0; }
.ph-lines b { font-weight: 400; color: var(--t2); }
.ph-lines em { font: 500 11px/1 var(--mono); font-style: normal; color: var(--t3); }
.ph-lines li.on { background: rgba(var(--acc-rgb), .07); box-shadow: inset 2px 0 0 var(--acc); margin: 0 -12px; padding: 0 12px; }
.ph-clock p { font: 500 12px/1.3 var(--mono); color: var(--acc-deep); }
.ph-ask { margin: 2px 4px 12px; font-size: 15px; font-weight: 590; letter-spacing: -.015em; }
.ph-keys { display: grid; gap: 8px; }
.ph-key { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .35s var(--ease), background-color .35s var(--ease), transform .25s var(--ease); }
.ph-key b { font-size: 14.5px; font-weight: 590; }
.ph-key em { font-style: normal; font-size: 12.5px; color: var(--t3); }
.ph-key.on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--acc), 0 8px 18px -12px rgba(var(--acc-rgb), .7); }
.ph-key.press { transform: scale(.98); }
.ph-same { margin: 12px 4px 0; font: 500 11px/1.3 var(--mono); color: var(--t4); text-align: center; }
.ph-done { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--plate); color: var(--p-t1); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .6s var(--ease-fig); }
.ph-done.on { opacity: 1; transform: none; }
.ph-done b { font-size: 14px; font-weight: 590; }
.ph-done p { font: 500 11px/1.4 var(--mono); color: var(--p-t3); }
.ph-check { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--p-acc); }
.ph-check::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px; border: solid var(--plate); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* the bottom of the phone tucks behind the next section */
.statement.tuck { padding-top: calc(var(--sec) + 24px); }

/* ---------- how the work runs ---------- */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.how li { position: relative; display: flex; flex-direction: column; padding: 28px 32px 0 0; }
.how li + li { padding-left: 32px; border-left: 1px solid var(--line-2); }
.how-n { font: 500 12px/1 var(--mono); color: var(--acc); }
.how h3 { margin-top: 14px; font-size: 18px; letter-spacing: -.016em; }
.how p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--t3); max-width: 30em; min-height: 3.1em; }
.how-ui { margin-top: 24px; height: 148px; display: flex; align-items: center; }
.lic-card { position: relative; width: 100%; max-width: 300px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, #f6ecd2, #efe2c2); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .14), 0 14px 30px -20px rgba(var(--ink-rgb), .45); display: grid; gap: 3px; }
.lic-card .mono { color: var(--t4); }
.lic-card b { font-size: 16px; font-weight: 590; letter-spacing: -.015em; }
.lic-no { font: 500 12px/1 var(--mono); color: var(--t3); }
.lic-ok { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 11px/1 var(--mono); color: var(--acc-deep); background: rgba(var(--acc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.lic-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.push { width: 100%; max-width: 320px; padding: 13px 15px; border-radius: 18px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -20px rgba(var(--ink-rgb), .45); display: grid; gap: 2px; }
.push-app { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t4); margin-bottom: 5px; }
.push-app .brand-mark { width: 10px; height: 13px; }
.push-app .bm-t { fill: var(--ink); } .push-app .bm-b { fill: var(--acc); }
.push b { font-size: 14.5px; font-weight: 590; }
.push > span:last-child { font-size: 13px; color: var(--t3); }
.keys-mini { display: grid; gap: 8px; width: 100%; max-width: 260px; }
.keys-mini span { display: flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 510; color: var(--t2); background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px var(--line-2); }
.keys-mini span.on { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--acc); }
@media (max-width: 900px) {
  .how { grid-template-columns: 1fr; border-top: 0; }
  .how li, .how li + li { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .how p { min-height: 0; }
  .how-ui { height: auto; margin-top: 18px; }
}

/* ---------- the license map ---------- */
.tm-panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px; border-radius: 16px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12)); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -24px rgba(var(--ink-rgb), .18); }
.tm-who .mono { color: var(--t4); }
.tm-who b { display: block; margin-top: 6px; font-size: 19px; font-weight: 590; letter-spacing: -.016em; }
.tm-who p { margin-top: 4px; font-size: 14.5px; color: var(--t3); }
.tm-keys { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--t3); }
.tm-keys li { display: flex; align-items: center; gap: 10px; }
.tm-keys i { width: 14px; height: 14px; border-radius: 4px; }
.k-lic { background: var(--acc-deep); }
.k-out { box-shadow: inset 0 0 0 1px var(--line-3); background: rgba(255,255,255,.5); }
.tm-feed { margin-top: 26px; padding: 14px 16px; border-radius: 12px; background: var(--plate); color: var(--p-t1); display: grid; gap: 3px; min-height: 86px; }
.tm-feed .mono { color: var(--p-t4); }
.tm-feed b { font-size: 15px; font-weight: 590; transition: opacity .3s var(--ease); }
.tm-feed em { font: 500 12px/1.3 var(--mono); font-style: normal; color: var(--p-acc); transition: color .3s var(--ease), opacity .3s var(--ease); }
.tm-feed em.pass { color: var(--p-t3); }
.tm { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 5px; width: 100%; max-width: 560px; justify-self: center; }
.tm-t { grid-column: calc(var(--x) + 1); grid-row: calc(var(--y) + 1); aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px;
  font: 500 11px/1 var(--mono); color: var(--t4); background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease-fig); }
.tm-t.lic { color: var(--paper); background: var(--acc-deep); box-shadow: none; }
.tm-t.ping { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .35), 0 8px 18px -8px rgba(var(--acc-rgb), .8); }
.tm-t.miss { transform: scale(1.1); background: #e6dfcd; box-shadow: inset 0 0 0 1.5px var(--t3); color: var(--ink); }
@media (max-width: 1000px) { .tm-panel { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 640px) { .tm-panel { padding: 20px 16px; } .tm { gap: 4px; } .tm-t { font-size: 10px; border-radius: 5px; letter-spacing: -.02em; } }

/* ---------- the three outcomes ---------- */
.outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.out { position: relative; display: flex; flex-direction: column; padding: 28px 28px 24px; border-radius: 16px; border: 1px solid transparent;
  background: linear-gradient(180deg, #fbf8f0, #f3ecdc) padding-box, linear-gradient(180deg, rgba(var(--ink-rgb), .16), rgba(var(--ink-rgb), .08) 40%, rgba(var(--ink-rgb), .05)) border-box;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 24px 40px -28px rgba(var(--ink-rgb), .25); }
.out-k { align-self: flex-start; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; font: 600 12.5px/1 var(--mono); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line-3); }
.out-k.k-attest { color: var(--paper); background: var(--acc-deep); box-shadow: none; }
.out h3 { margin-top: 18px; font-size: 18px; letter-spacing: -.016em; }
.out p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--t3); min-height: 4.65em; }
.out-fee { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--acc-deep); }
@media (max-width: 900px) { .outs { grid-template-columns: 1fr; } .out p { min-height: 0; } }

/* ---------- the terms ---------- */
.terms-list { margin: 0; border-top: 1px solid var(--line-2); }
.terms-list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.terms-list dt { font-size: 17px; font-weight: 590; letter-spacing: -.014em; color: var(--ink); }
.terms-list dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--t3); max-width: 38em; }
@media (max-width: 900px) { .terms-list > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- the application ---------- */
.ap-page .nav-cta { display: none; }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 80px; align-items: start; }
.ap-side { position: sticky; top: calc(var(--hdr) + 32px); }
.ap-eyebrow { color: var(--acc); }
.ap-h { margin-top: 14px; font-size: clamp(36px, 4.2vw, 52px); }
.ap-body { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--t3); max-width: 28em; }
.ap-rail { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line-2); max-width: 26em; }
.ap-s > a, .ap-s > span { display: flex; align-items: center; gap: 14px; height: 48px; border-bottom: 1px solid var(--line); color: var(--t4); }
.ap-s > a:hover { color: var(--ink); }
.ap-s b { font-size: 15px; font-weight: 510; }
.ap-n { font: 500 12px/1 var(--mono); width: 22px; }
.ap-s.done > a, .ap-s.done > span { color: var(--t2); }
.ap-s.done .ap-n { color: var(--acc); }
.ap-s.now > span { color: var(--ink); box-shadow: inset 2px 0 0 var(--acc); padding-left: 14px; }
.ap-s.now .ap-n { color: var(--acc); }
.ap-banner { margin-bottom: 20px; padding: 12px 14px; border-radius: 10px; background: rgba(var(--acc-rgb), .07); box-shadow: inset 2px 0 0 var(--acc); font-size: 14px; color: var(--t2); }
.f-stack { display: grid; gap: 22px; }
.f-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-field label, .f-set legend { font-size: 14px; font-weight: 510; color: var(--t2); }
.f-field label i, .f-set legend i { font-style: normal; color: var(--t4); font-weight: 400; }
.f-field input, .f-field select { width: 100%; height: 44px; font: 400 15px/1.4 var(--sans); letter-spacing: -.01em; color: var(--ink); background: #fffdf8;
  border: 1px solid var(--line-3); border-radius: 10px; padding: 0 13px; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.f-field input.mono-in { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.f-field select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%), linear-gradient(135deg, var(--t3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.f-field input:focus, .f-field select:focus, .f-jfilter:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .16); }
.f-field [aria-invalid="true"] { border-color: var(--madder); }
.f-help { font-size: 13px; line-height: 1.5; color: var(--t4); }
.f-warn { font-size: 13px; color: #8a5a12; }
.f-err { font-size: 13px; color: var(--madder); }
.f-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.f-set legend { padding: 0; margin-bottom: 2px; }
.f-opts { display: grid; gap: 8px; }
.f-opt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 12px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: box-shadow .2s var(--ease); }
.f-opt:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.f-opt input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); background: #fff; transition: box-shadow .2s var(--ease); }
.f-opt input:checked { box-shadow: inset 0 0 0 5px var(--acc-deep); }
.f-opt:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--acc); }
.f-opt input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.f-opt span { display: grid; gap: 2px; }
.f-opt b { font-size: 14.5px; font-weight: 510; }
.f-opt em { font-style: normal; font-size: 13px; color: var(--t3); }
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chip { position: relative; cursor: pointer; }
.f-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.f-chip span { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; color: var(--t2); background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); white-space: nowrap; }
.f-chips-st .f-chip span { width: 44px; justify-content: center; padding: 0; font: 500 12px/1 var(--mono); }
.f-chip input:checked + span { color: var(--paper); background: var(--acc-deep); box-shadow: none; }
.f-chip input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.f-chip:hover span { box-shadow: inset 0 0 0 1px var(--line-3); }
.f-chip input:checked:hover + span { box-shadow: none; }
.f-jgroup + .f-jgroup { margin-top: 6px; }
.f-jgroup .mono { margin-bottom: 8px; color: var(--t4); }
.f-jfilter { width: 100%; height: 40px; font: 400 15px var(--sans); border: 1px solid var(--line-3); border-radius: 10px; padding: 0 12px; background: #fffdf8; outline: none; }
.f-cur { position: relative; }
.f-cur span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font: 500 14px var(--mono); color: var(--t3); }
.f-cur input { padding-left: 28px !important; }
.f-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.f-actions .btn { height: 44px; padding: 0 22px; font-size: 15px; }
.f-skip { margin-left: auto; font-size: 14px; color: var(--t3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.f-skip:hover { color: var(--ink); }
.ap-done { max-width: 640px; padding-top: 24px; }
.ap-check { position: relative; display: block; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 50%; background: var(--acc-deep); }
.ap-check::after { content: ""; position: absolute; left: 16px; top: 10px; width: 9px; height: 17px; border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (max-width: 1000px) {
  .ap-grid { grid-template-columns: 1fr; gap: 32px; }
  .ap-side { position: static; }
  .ap-rail { display: flex; margin-top: 24px; border-top: 0; max-width: none; gap: 6px; }
  .ap-s { flex: 1; }
  .ap-s > a, .ap-s > span { height: auto; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0 0 !important; border-bottom: 0; border-top: 2px solid var(--line-2); box-shadow: none !important; }
  .ap-s.done > a, .ap-s.done > span { border-top-color: var(--acc); }
  .ap-s.now > span { border-top-color: var(--ink); }
  .ap-s b { font-size: 12.5px; }
}
@media (max-width: 640px) {
  .ap-s b { display: none; }
  .f-field input, .f-field select, .f-jfilter { font-size: 16px; }
  .f-actions { flex-direction: column; align-items: stretch; }
  .f-actions .btn { width: 100%; height: 48px; }
  .f-skip { margin: 4px 0 0; text-align: center; }
  .form-card { padding: 22px 18px; }
}
@media (max-width: 1024px), (pointer: coarse) { .f-field input, .f-field input.mono-in, .f-field select, .f-jfilter { font-size: 16px; } }