/* v2-responsive.css — production phone and tablet fixes for the Claude Design v2 pages.
 *
 * Linked on every v2 page straight after ds-v2.css (tools/v2pages.py add_responsive), so it is the last word.
 * The design pages themselves stay verbatim in src/v2/ and can be re-exported at any time; the fixes live here.
 * Found by a full sweep of the built site at 320, 375 and 768px (headless Chrome), 2026-09-29.
 * ds-v2.css wins by specificity (:not(#ds-a):not(#ds-b):not(#ds-c)) and !important, so rules that must beat it use
 * the same :not(#r-a):not(#r-b):not(#r-c) prefix and !important.
 */

/* ---- site header: Resources card labels per docs side (tools/v2pages.py RS_LABELS) ---- */
.fnav-card-rs[data-plat="app"] .rs-l,.fnav-card-rs[data-plat="legacy"] .rs-a,.fnav-card-rs:not([data-plat]) .rs-l{display:none}

/* ---- /docs/ (tools/docs_v2.py + src/docs-v2-router.js) ---------------------------------------------------------
 * The design hides the rail below 901px and the contents list below 1181px with nothing in their place, so a phone
 * reader could only move between articles through hub cards and Previous/Next. Added: a Browse menu beside the
 * search (the current side's rail) and an "On this page" list under the article intro. Toggle targets are 44px at
 * phone width (docs-toggle spec §2.3). Callouts carry the designed keycap icon; the Classic home keeps its walkthrough. */
.dx-secm{display:none;position:relative}
.dx-onpage{display:none}
.dx-walk{max-width:760px;margin:clamp(28px,4vw,48px) auto 0}
.dx-walk .dc-fig{margin:0}
.dx-rail .dx-ext{display:block;margin-top:6px}
.dx-main .dx-note > div{min-width:0}
html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-h1 + .dx-lede{margin-top:20px!important}
@media (max-width:1180px){
  .dx-onpage:not([hidden]){display:block;margin:24px 0 4px;border:1px solid var(--line);border-radius:12px;background:#fff;max-width:40rem}
  .dx-onpage summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 16px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .dx-onpage summary::-webkit-details-marker{display:none}
  .dx-onpage summary::after{content:"+";font:400 20px/1 var(--sans);color:var(--ink)}
  .dx-onpage[open] summary::after{content:"\2013"}
  .dx-onpage nav{padding:0 16px 12px}
  .dx-onpage nav a{display:block;padding:10px 0 10px 12px;border-left:1px solid var(--line);font:15.5px/1.35 var(--sans);color:var(--mute);text-decoration:none}
  .dx-onpage nav a:hover{color:var(--ink);border-left-color:var(--ink)}
  .dx-onpage nav .dx-anc{display:none}
}
@media (max-width:900px){
  .dx-tools{gap:10px}
  .dx-tools .dx-search{flex:1 1 auto;min-width:0}
  .dx-tools .dx-search input{width:100%}
  .dx-secm{display:block;flex:0 0 auto}
  .dx-secb{display:inline-flex;align-items:center;gap:8px;height:40px;max-width:44vw;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font:500 14.5px var(--sans);color:var(--ink);cursor:pointer}
  .dx-secb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dx-secb svg{width:10px;height:6px;flex:none;transition:transform .2s}
  .dx-secm.open .dx-secb svg{transform:rotate(180deg)}
  .dx-secb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .dx-secp{position:absolute;right:0;top:calc(100% + 8px);width:min(88vw,380px);max-height:min(70vh,560px);overflow:auto;overscroll-behavior:contain;z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 48px -24px rgba(20,17,13,.45);padding:6px 16px 12px}
  .dx-secp[hidden]{display:none}
  .dx-secp .dx-group{margin:0!important;padding:8px 0;border-top:1px solid var(--line)}
  .dx-secp .dx-group b{display:block;margin:6px 0 2px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  .dx-secp a{display:flex;align-items:center;min-height:42px;font:15.5px/1.3 var(--sans);color:var(--ink);text-decoration:none}
  .dx-secp a.on{font-weight:600}
  .dx-secp a.on::before{content:"";flex:none;width:6px;height:6px;margin-right:9px;border-radius:50%;background:var(--pink)}
  .dx-secp .dx-secp-home{font-weight:600;min-height:46px}
  .dx-secp .dx-off{display:none}
  .dx-seg .dx-seg-b{height:44px;padding:0 16px}
}
@media (max-width:640px){
  .dx-tools{order:2}
}

/* ================================================================================================================
 * Phone/tablet sweep, 2026-09-29: headless Chrome at 320, 375 and 768px over 32 pages; each fix below was confirmed
 * against the page's markup and CSS by the reviewer for that page family (issue ids in the comment). Most apply only
 * at phone/tablet widths; a few defects that showed at every width (docs spec card and table headers, contact error
 * colour, legal card icon, ROI bottom gap) apply everywhere.
 * ================================================================================================================ */

/* chrome — fin2-heading-clipped-phones */
/* ---- closing CTA band (.fin2 swarm) on phones: the page sheets' later desktop rules override the <=700px heading
 * margin and CTA offset, so on a 250-293px band the 38px headline (lifted up to 1.23x by the JS 3D bob) rode under the
 * 56px striped top and off the right edge, and the buttons sat on the bottom edge. Use the 340px band the design already
 * shows from 436-700px and scale the headline with the viewport (never above the current 38px). Ghost button made less
 * see-through so the flying objects behind it do not muddy "Explore the API". */
@media (max-width:700px){
  html body .fin2-in.sw:not(#r-a):not(#r-b):not(#r-c){height:340px!important}
  html body .fin2-in.sw:not(#r-a):not(#r-b):not(#r-c) .fin2-h{font-size:clamp(30px,9.4vw,38px)!important}
  html body .fin2-in.sw:not(#r-a):not(#r-b):not(#r-c) .fin2-ghost{background:rgba(255,255,255,.88)!important}
}

/* chrome — tablet-header-nav-strip */
/* ---- site header, tablet link strip (761-899px): keep the designed scroll strip but stop it butting into the wordmark
 * (it started 2px inside it via .fnav margin-left:-6px), fade its left edge too so swiped text does not slide up against
 * "Carousel", and make the links 40px tap targets (were 28px). The globe gets a 46px-tall invisible hit area. */
@media (min-width:761px) and (max-width:899px){
  html body #header .fnav:not(#r-a):not(#r-b):not(#r-c){margin-left:0!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent)}
  html body #header .fnav-track:not(#r-a):not(#r-b):not(#r-c){padding-left:14px}
  html body #header .fnav-track:not(#r-a):not(#r-b):not(#r-c) > a{height:40px}
  html body #header .nav-actions:not(#r-a):not(#r-b):not(#r-c) .lang-btn{position:relative}
  html body #header .nav-actions:not(#r-a):not(#r-b):not(#r-c) .lang-btn::after{content:"";position:absolute;inset:-8px -4px}
}

/* chrome — lang-menu-offscreen-left */
/* ---- site header, phone language menu: anchor the 220px dropdown to the right edge of the whole action group instead
 * of the globe (which sits mid-header), so it stays on screen; also open it on focus, not only on (emulated) hover. */
@media (max-width:760px){
  html body #header .nav-actions:not(#r-a):not(#r-b):not(#r-c){position:relative}
  html body #header .nav-actions:not(#r-a):not(#r-b):not(#r-c) .lang{position:static}
  html body #header .nav-actions:not(#r-a):not(#r-b):not(#r-c) .lang:focus-within .lang-menu{opacity:1;visibility:visible;transform:none}
}

/* chrome — mobile-menu-products-grid-clipped */
/* ---- mobile menu at <=359px: the two-column link grid (production-v2.css, 1fr 1fr) sized its columns to the widest
 * unbreakable content ("Marketplace" + Soon badge) and ran ~31px past the screen. Equal shrinkable columns; the badge
 * may drop under its label. */
@media (max-width:359px){
  html body #mobileNav .m-acc-inner:not(#r-a):not(#r-b):not(#r-c){grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #mobileNav .m-acc-inner:not(#r-a):not(#r-b):not(#r-c) > a{flex-wrap:wrap;row-gap:4px}
}

/* chrome — mobile-menu-under-promo-header */
/* ---- mobile menu under the promo bar: the menu's top padding assumes the 48px header; while the 30px promo bar is
 * showing (home and the screening pages, top of page only) push the menu down by the bar's height. */
@media (max-width:899px){   /* the hamburger header runs to 899px since the 2026-09-29 chrome handoff */
  html body:has(#pbar:not(.is-dismissed)) #mobileNav .m-scroll:not(#r-a):not(#r-b):not(#r-c){padding-top:calc(var(--hdr-h,48px) + 40px)!important}
}

/* chrome — phone-header-tap-targets */
/* ---- phone header tap targets: keep the designed 32px controls but give each an invisible 44-46px-tall hit area that
 * fills the 6px gaps without overlapping; the promo bar's 22px dismiss "x" gets the bar's full 30px height and 42px width. */
@media (max-width:760px){
  html body #header .nav-actions:not(#r-a):not(#r-b):not(#r-c) :is(.lang-btn,.btn-dark,.hamburger){position:relative}
  html body #header .nav-actions:not(#r-a):not(#r-b):not(#r-c) :is(.lang-btn,.btn-dark,.hamburger)::after{content:"";position:absolute;inset:-7px -4px}
  html body #pbar .pbar-x:not(#r-a):not(#r-b):not(#r-c){position:relative;inset:auto}
  html body #pbar .pbar-x:not(#r-a):not(#r-b):not(#r-c)::after{content:"";position:absolute;inset:-4px -10px}
}

/* chrome — footer-legal-row-links */
/* ---- footer links on phones and tablets: legal-row links become 40px-tall targets that never break mid-name (no more
 * "Cookie / Policy" splits; the " · " separators now normally end a line rather than start one), and column links get 35px hit areas that
 * tile the (slightly wider, 14px) gaps. */
@media (max-width:899px){
  html body footer .foot-copy:not(#r-a):not(#r-b):not(#r-c){line-height:32px}
  html body footer .foot-copy .fc-i{white-space:nowrap}
  html body footer .foot-copy:not(#r-a):not(#r-b):not(#r-c) a{display:inline-block;position:relative;padding:6px 0;line-height:20px;white-space:nowrap;vertical-align:top}
  html body footer .foot-copy:not(#r-a):not(#r-b):not(#r-c) a::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
  html body footer .foot-col:not(#r-a):not(#r-b):not(#r-c){gap:14px}
  html body footer .foot-col:not(#r-a):not(#r-b):not(#r-c) a{padding:7px 0;margin:-7px 0}
}

/* chrome — footer-success-stories-heading-overflow */
/* ---- footer column headings at <=359px: "SUCCESS STORIES" (16px, nowrap) is 151px in a 139px column; use the
 * desktop 14px heading size so it fits. */
@media (max-width:359px){
  html body footer .foot-col:not(#r-a):not(#r-b):not(#r-c) b{font-size:14px}
}

/* tenant — composer-send-button-clipped */
/* Hero composer (tenant family): payer pill + 'Modify checks' + 40px send need ~300px on one nowrap row, so under 390px the
   send button left the card. 360-389: tighter gaps and 13px labels keep the text; under 360 'Modify checks' collapses to its
   icon (accessible name kept, font-size:0), as home-v2-audit.css intended on 2026-09-21. */
@media (max-width:389px){
  .gh-opts{gap:4px!important}
  .gh-seg button{padding:0 8px!important;font-size:13px!important}
  .gh-link{font-size:13px!important}
}
@media (max-width:359px){
  .gh-link{width:40px!important;padding:0!important;justify-content:center;gap:0!important;font-size:0!important;border-radius:50%!important;background:rgba(26,24,21,.06)!important}
  .gh-link svg{display:block!important;width:16px;height:16px}
}

/* tenant — check-list-truncated-and-overlapped */
/* 'What you can check' card on phones: row titles were ellipsised ('Court and evic…') and the figure's pen hand sat on top of
   the first letters. Titles wrap, and the list paints above the figure (hand tucks behind the rows); the heading stays on top. */
@media (max-width:700px){
  #features .cx .cx-vp{z-index:4!important}
  #features .cx .cx-cap{z-index:5!important}
  #features .cx .cx-t b,#features .cx .cx-t small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
}

/* tenant — testimonial-strip-cut-at-560-tablet */
/* Testimonial scroller (<=900px) is full-bleed by design; the <=1040px stacked-grid cap of 560px was still applied, so on
   tablets the strip was clipped at x=560 with empty page to the right. */
@media (max-width:900px){#reviews .rv2{max-width:none!important}}

/* tenant — lea-phone-mock-clipped-320 */
/* 'What people love most' phone mock under 360px: the grid track sized to the card's nowrap min-content (~271px), wider than
   the blue frame, so the card, row ends and 'Connect bank' were cut. Let it shrink, wrap long lines, give the frame room. */
@media (max-width:359px){
  .lv2-box .lv2-tv{height:420px!important}
  .lv2-tv .lv2-view{grid-template-columns:minmax(0,1fr);padding:12px}
  .lv2-tv .lv3-phone,.lv2-tv .lv3-card{padding:14px}
  .lv2-tv .lv3-row{padding:10px 12px;gap:10px}
  .lv2-tv .lv3-row b,.lv2-tv .lv3-ph-top small,.lv2-tv .lv3-head small{white-space:normal}
}

/* tenant — pricing-cards-cramped-phone */
/* 'Flexible pricing' cards on phones: three nested cards leave ~224px, so the Noor ticket header, key labels, receipt rows
   and the applicant-pays receipt collided or broke word by word. Stack the ticket header, wrap labels and receipt rows with
   real gaps, keep dt on one line and give the Reusable value its own line. */
@media (max-width:440px){
  #payer .ub2-top{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:center}
  #payer .ub2-av{grid-row:1/span 2;align-self:start}
  #payer .ub2-top .ub2-pill{grid-column:2;justify-self:start}
  #payer .ub2-k small{white-space:normal!important;font-size:10.5px!important;letter-spacing:.04em!important;line-height:1.25}
  #payer .ub2-rh,#payer .ub2-tot{flex-wrap:wrap;column-gap:12px;row-gap:2px}
  #payer .ub2-rh span:last-child,#payer .ub2-tot b{margin-left:auto;text-align:right}
  #payer .fz-rcpt dt{flex:none;white-space:nowrap}
  #payer .fz-rcpt .fz-reuse{flex-wrap:wrap;row-gap:8px}
  #payer .fz-rcpt .fz-reuse dd{flex:1 1 100%;justify-content:flex-start;text-align:left}
}
/* under 360px the payer toggle's decorative icons go so 'Applicant pays' fits its 107px half on one line */
@media (max-width:359px){
  #payer .fz-seg button{font-size:14px;gap:6px;padding:0 6px}
  #payer .fz-seg button svg{display:none}
}

/* tenant — identity-panel-text-under-figure-320 */
/* 'Learn what you can check' screen: right:42% did not clear the fixed ~140px figure on small phones, so the description ran
   under the man with the clipboard at 320. Reserve at least the figure's width; shrink the panel title slightly under 360. */
@media (max-width:560px){#checks-keys .kx-panel{right:max(42%,calc(2% + 146px))}}
@media (max-width:359px){#checks-keys .kx-panel h3{font-size:30px}}

/* tenant — tiny-keycap-labels */
/* Phone text floor: keycap labels were 9px (the only name for each key), the laurel kicker 10px, testimonial tags 10-10.5px. */
@media (max-width:700px){
  #checks-keys .kx-keys small:not(#r-a),#checks-keys .kx-key small:not(#r-a){font-size:11px!important;letter-spacing:.03em!important;padding:3px 5px!important}
  .gh-laurels-t small{font-size:11px}
}
@media (max-width:900px){#reviews .rv2-tag,#reviews .rv2-q::after{font-size:11px}}

/* tenant — timeline-subtitles-right-aligned */
/* 'From 0 -> 7' timeline on phones: the subtitle stacks under the title (arrow hidden) but kept the desktop right alignment. */
@media (max-width:700px){.tl-rows .tl-t small{text-align:left}}

/* tenant — claude-wordmark-touches-card-edge-320 */
/* 'Screen anyone from CLAUDE * CAROUSEL' on phones: the nowrap wordmark plus padding was wider than the card, so the block
   overflowed, sat off-centre and the final L touched the edge. Cap the size to what the card can hold. */
@media (max-width:700px){#claude .cb-h:not(#r-a){font-size:min(clamp(28px,8.6vw,40px),calc((100vw - 72px) / 10))!important}}

/* lending — lending-receipt-carousel-loan-run-together */
/* ---- pricing receipt header (.ub2-rh, every page with the "Only what's completed" card): flex space-between with no gap,
 * so "Carousel" and "Loan 4812 · Noor A." ran together at 360-375px. Keep 8px between them; when both do not fit, the
 * reference drops to its own line, still right-aligned. */
@media (max-width:1024px){
  .ub2-rh{flex-wrap:wrap;column-gap:8px;row-gap:3px}
  .ub2-rh>span:last-child{margin-left:auto}
}

/* company — hero-ctas-misaligned-marketplace-404 */
@media (max-width:520px){
  #ycHero.ct-hero .cp-c>.pc-ctas{justify-content:center!important;margin-left:auto!important;margin-right:auto!important}
}
@media (min-width:521px) and (max-width:1024px){
  #ycHero.ct-hero .cp-c>.pc-ctas{justify-content:flex-start!important;margin-left:0!important;margin-right:0!important}
}

/* company — capital-key-labels-9px, capital-vehicle-keys-cut-off-320 */
@media (max-width:700px){
  #features #program .kx-key:not(#r-a) small{font-size:11px!important}
}
@media (max-width:560px){
  #features #program .kx-keys:not(#r-a){width:100%!important;max-width:340px!important;gap:10px!important}
  #features #program .kx-keys:not(#r-a)>li{flex:1 1 0;min-width:0!important}
  #features #program .kx-key:not(#r-a){width:100%!important}
  #program .kx-key .cp-kch{max-width:100%}
  #features #program .kx-key:not(#r-a) small{white-space:normal!important;max-width:100%;text-align:center;line-height:1.3}
}

/* company — capital-disclosures-toggle-15px */
@media (max-width:1024px){
  .cp-disc{padding-top:2px}
  .cp-disc summary{padding:14px 12px}
}

/* company — capital-hero-empty-band-tablet */
@media (min-width:561px) and (max-width:1024px){
  body #ycHero.cp-hero:not(.ct-hero){min-height:min(calc(100svh - 72px),640px)}
}

/* company — about-globe-labels-unreadable */
@media (max-width:560px){
  #a3Globe .lab text{font-size:clamp(12.5px,calc(39.5px - 4.67vw),25px)}
}

/* company — about-entity-heading-touches-keycap-320 */
@media (max-width:359px){
  #entities .a3-ent-key{width:72px;top:22px;right:20px}
}

/* company — careers-role-cards-narrow-on-phones */
@media (max-width:560px){
  #roles .cr-in{padding-left:0;padding-right:0}
  .cr-role summary{gap:12px}
}

/* forms — book-step2-header-breaks */
/* ---- /book-a-demo/ step 2 header: 'Step 2 of 2' pill + '<email> · Change' (src/v2/book-demo-v2.html .bk2-head) ---- */
@media (max-width:900px){
  .bk2-head .bk2-step{flex:none;white-space:nowrap}
  .bk2-head .bk2-chg{min-width:0;text-align:right;overflow-wrap:anywhere}
}
@media (max-width:600px){
  .bk2-head{display:grid;justify-items:start;gap:8px}
  .bk2-head .bk2-chg{max-width:100%;margin-left:0;text-align:left}
}

/* forms — contact-error-note-not-red */
/* ---- /contact/ form errors: .ct-note.is-err was overridden to grey by `body .ct-note{color:...!important}` ---- */
html body .ct-foot .ct-note.is-err{color:#A4372A!important}
  html body .ct-card:has(.ct-note.is-err) .ct-row>.ct-f:has(input:required:placeholder-shown)>span{color:#A4372A!important}
  html body .ct-card:has(.ct-note.is-err) .ct-grow textarea:required:placeholder-shown::placeholder{color:#A4372A!important}

/* forms — contact-details-email-overflows-320 */
/* ---- /contact/ 'Prefer email or a call?' list: hello@oncarousel.com (163px) overran the 146px value column at 320 ---- */
@media (max-width:360px){
  .ct-side .ct-dl>div{grid-template-columns:56px minmax(0,1fr)}
  .ct-side .ct-dl a{overflow-wrap:anywhere}
}

/* forms — contact-copy-buttons-small */
/* ---- /contact/ tap targets: Copy pill 48x25 and 19px mailto links (hit areas grown, look unchanged); chips 34px -> 40px on phones ---- */
@media (max-width:900px){
  .ct-rt .ct-copy::before{content:"";position:absolute;inset:-10px 0}
  .ct-rt .ct-rt-f a{position:relative}
  .ct-rt .ct-rt-f a::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
}
@media (max-width:600px){
  html body .ct-chips{gap:8px!important}
  html body .ct-chips .ct-chip{height:40px!important}
}

/* blog — post-h1-capped-15ch */
/* ---- blog post: title uses the full text measure on phones/tablets (carousel-home.css h1{max-width:15ch} leaks onto .bp2-h1) ---- */
@media (max-width:1023px){
#post .bp2-h1{max-width:none}
}

/* blog — post-table-cut-at-320 */
/* ---- blog post tables: scroll affordance when a wide table overflows, tighter cells so 3-column tables fit phones ---- */
@media (max-width:760px){
#post .bp2-body table{background:linear-gradient(90deg,#FAF9F5 40%,rgba(250,249,245,0)) left/28px 100% no-repeat local,linear-gradient(270deg,#FAF9F5 40%,rgba(250,249,245,0)) right/28px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(20,18,15,.24),rgba(20,18,15,0)) left/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(20,18,15,.24),rgba(20,18,15,0)) right/14px 100% no-repeat scroll}
}
@media (max-width:360px){
#post .bp2-body table{font-size:14px}
#post .bp2-body :is(th,td){padding-left:6px;padding-right:6px}
#post .bp2-body :is(th,td):first-child{padding-left:0}
#post .bp2-body :is(th,td):last-child{padding-right:0}
#post .bp2-body th{letter-spacing:.02em}
#post .bp2-body table:not(:has(tr>:nth-child(4))) :is(th,td){-webkit-hyphens:auto;hyphens:auto}
}

/* blog — post-ordered-list-type-jump */
/* ---- blog post: lists match the body paragraphs (17px/1.75, #24211C) ---- */
@media (max-width:1023px){
#post .bp2-body ul,#post .bp2-body ol{font-size:17px!important;line-height:1.75!important}
#post .bp2-body li{color:#24211C!important}
}

/* blog — post-back-link-tap-target */
/* ---- blog post: "← Blog" back link gets a 40px tap height without moving anything ---- */
@media (max-width:1023px){
#post .bp2-back{min-height:40px;margin-top:-11px;margin-bottom:9px!important}
}

/* blog — blog-index-meta-dangling-dot */
/* ---- blog index: meta row on narrow phones = category line, then "date · read time" (no dangling separator) ---- */
@media (max-width:374px){
#blog .bg-m b{flex-basis:100%}
#blog .bg-m b+i{display:none}
}

/* blog — blog-count-11px */
/* ---- blog index: article count label readable on phones/tablets ---- */
@media (max-width:1023px){
#blog .bg-count{font-size:12px;color:rgba(20,18,15,.6)}
}

/* docs — spec-card-dark-text-on-cobalt */
/* docs: 'At a glance' spec card. The docs body-scale rule forces dark dt/dd onto the cobalt card; restore the designed cream/white */
html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dx-spec dt:not(#r-a):not(#r-b):not(#r-c){color:#F3EDE2!important}
  html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dx-spec dd:not(#r-a):not(#r-b):not(#r-c){color:#fff!important}

/* docs — direct-link-list-cut-off-right-edge */
/* docs: long inline code (the example workflow URL) must wrap inside list items instead of widening the grid list past the screen */
@media (max-width:900px){
  .dx-body li{min-width:0}
  .dx-body :not(pre)>code{overflow-wrap:break-word;overflow-wrap:anywhere}
}

/* docs — table-columns-offscreen-no-cue, table-header-misaligned-with-body */
/* docs tables: header cells get the same column widths as the body so labels sit over their columns */
html body .dc-body table.dc-table thead th:first-child{width:30%}
/* phones: 2-column tables fit the card; wider tables scroll inside it with matching th/td widths and an edge shadow as the scroll cue */
@media (max-width:760px){
  html body .dc-body table.dc-table{overscroll-behavior-x:contain;background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/32px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/32px 100% no-repeat local,linear-gradient(90deg,rgba(26,24,21,.16),rgba(26,24,21,0)) 0 0/14px 100% no-repeat scroll,linear-gradient(270deg,rgba(26,24,21,.16),rgba(26,24,21,0)) 100% 0/14px 100% no-repeat scroll,#fff}
  html body .dc-body table.dc-table>:is(thead,tbody){min-width:0}
  html body .dc-body table.dc-table :is(th,td),html body .dc-body table.dc-table td:first-child{padding-left:14px;padding-right:14px}
  html body .dc-body table.dc-table :is(th,td):first-child:nth-last-child(2){width:44%;padding-right:8px}
  html body .dc-body table.dc-table :is(th,td){overflow-wrap:break-word;word-break:normal}
  html body .dc-body table.dc-table :is(th,td):first-child{-webkit-hyphens:auto;hyphens:auto}
  html body .dc-body table.dc-table :is(th,td):not(:first-child){-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 5}
  html body .dc-body table.dc-table :is(th,td):first-child:nth-last-child(3){width:9.5rem}
  html body .dc-body table.dc-table :is(th,td):first-child:nth-last-child(3)~:is(th,td){width:9rem}
  html body .dc-body table.dc-table :is(th,td):first-child:nth-last-child(4){width:8.5rem}
  html body .dc-body table.dc-table :is(th,td):first-child:nth-last-child(4)~:is(th,td){width:6rem}
}

/* docs — docs-tabs-help-hidden, sticky-docs-chrome-too-tall */
/* docs bar on phones: scroll away with the page (the site header stays pinned), and wrap the section tabs so none sit off-screen */
@media (max-width:640px){
  .dx .dx-bar{position:relative;top:auto}
  .dx .dx-tabs{flex-wrap:wrap;row-gap:0;height:auto;overflow:visible}
  .dx .dx-tab{min-height:44px}
}

/* docs — rebuild-search-placeholder-clipped-320 */
/* docs bar: search and section menu stack on narrow phones; search results stay on-screen and above the menu */
@media (max-width:640px){
  .dx .dx-tools .dx-res{left:0;right:auto;width:min(300px,calc(100vw - 36px));z-index:45}
}
@media (max-width:374px){
  .dx .dx-tools{flex-wrap:wrap}
  .dx .dx-tools .dx-search,.dx .dx-tools .dx-secm{flex:1 1 100%}
  .dx .dx-tools .dx-secb{width:100%;max-width:none;justify-content:space-between}
}

/* docs — duplicate-search-fields-home */
/* docs home on phones: the hero search is the search; hide the duplicate bar field there */
@media (max-width:640px){
  .dx.is-home .dx-tools .dx-search{display:none}
  .dx.is-home .dx-tools .dx-secm{flex:1 1 100%}
  .dx.is-home .dx-tools .dx-secb{width:100%;max-width:none;justify-content:space-between}
}

/* docs — figure-screenshots-cropped-both-sides */
/* docs screenshots: let fixed-width portal shots shrink to the frame instead of being centred and cropped */
@media (max-width:900px){
  html body .dc-figure .dc-frame img{min-width:0}
}

/* docs — step-card-title-offset */
/* docs component titles (numbered steps, article cards, guide tiles): undo the article h3 top margin inside the components */
html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dc-mstep h3{margin-top:3px!important}
  html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body :is(.dc-alist,.dc-tile) h3{margin-top:0!important}

/* docs — tiny-low-contrast-labels */
/* docs small labels: breadcrumb, hub-card links and chooser eyebrow up to the 12px eyebrow size; crumb in the docs' mute ink */
@media (max-width:1180px){
  html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-art .dx-crumb:not(#r-a):not(#r-b):not(#r-c),
  html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-art .dx-crumb *:not(#r-a):not(#r-b):not(#r-c){font-size:12px!important;color:var(--mute)!important}
  .dx .dx-hub>span:last-child{font-size:12px}
  .dx .dx-choose>p{font-size:12px}
}

/* docs — small-strip-link-tap-target */
/* docs side strip: 44px touch area for the 'other docs' link without moving its underline */
@media (max-width:1180px){
  .dx .dx-strip a{position:relative}
  .dx .dx-strip a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}

/* stories — good-company-carousel-unreachable */
/* ---- "In good company" story strip (.cst) on the carried story pages and /changelog/: home-v2-audit.css hides the
   arrows and dots, and the track only moves from them. On phones it becomes a native swipe strip with the next card
   peeking; on tablets the cards wrap to a second row. ---- */
@media (max-width:760px){
  .cst .cst-vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cst .cst-vp::-webkit-scrollbar{display:none}
  .cst .cst-track{transform:none!important}
  .cst .cst-card{flex:0 0 84%;min-width:0;scroll-snap-align:start}
}
@media (min-width:761px) and (max-width:1023px){
  .cst .cst-track{flex-wrap:wrap;transform:none!important}
}

/* stories — roi-slider-tap-targets */
/* ---- ROI calculator: slider and reset tap targets. A 44px slider box and a 36px thumb hit area, with the thumb drawn
   exactly as before (1px ink ring, 3px page-colour ring, 13px ink core); the negative margin keeps the row spacing. ---- */
@media (max-width:1023px){
  .roi-slider{height:44px;margin:3px 0 -11px}
  .roi-slider::-webkit-slider-thumb{width:36px;height:36px;margin-top:-16.5px;border:7.5px solid transparent;background:var(--ink);background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 4px var(--bg)}
  .roi-slider::-moz-range-thumb{width:21px;height:21px;border:7.5px solid transparent;background:var(--ink);background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 4px var(--bg)}
  .roi-reset{padding:11px 0;margin-top:17px}
}

/* stories — roi-gap-before-footer */
/* ---- ROI calculator: the shell puts the .fin2 banner inside main.roi, so main's bottom padding (roi.css) lands under
   the banner, above the footer ---- */
main.roi[data-v2-shell]:has(> section.fin2){padding-bottom:0}

/* stories — roi-compare-box-cramped */
/* ---- ROI calculator, 320-class phones: the before/after box keeps each value on one line so both sides line up ---- */
@media (max-width:359px){
  .roi-out{padding-left:20px;padding-right:20px}
  .roi-ba{gap:10px;padding-left:14px;padding-right:14px}
  .roi-ba-i{min-width:min-content}
  .roi-ba-i b{white-space:nowrap}
}

/* stories — changelog-bullets-mismatch */
/* ---- changelog: bullets set like the entry paragraph they follow (ds-v2.css sets that one to --ds-sub at 56ch) ---- */
@media (max-width:1023px){
  .cl-body ul{font-size:var(--ds-sub,16px);max-width:56ch}
  .cl-body ul li{font-size:inherit;line-height:var(--ds-sub-lh,1.45)}
}

/* legal — legal-tables-clipped-on-phones */
/* ---- legal (/privacy/, /cookie-policy/): tables wider than a phone column were clipped (html/body clip overflow-x); scroll them inside their own box ---- */
@media (max-width:540px){
  .lg-art table{display:block;max-width:100%;overflow-x:auto}
  .lg-art td:not(:first-child){min-width:10em}
}

/* legal — ds-v2-h2-plus-p-shrinks-and-glues-intro-paragraph, ds-v2-section-headings-oversized-on-phones, ds-v2-zeroes-h2-bottom-margin-heading-touches-block */
/* ---- legal articles: ds-v2.css's marketing h2 (34px+, margin-bottom:0) and h2+p subtitle (16px, margin-bottom:0) rules also hit .lg-art; restore legal.css's document heading and body-copy values (4 / 7 ids outrank ds-v2's 3 / 6) ---- */
@media (max-width:900px){
  html body main .lg-art:not(#r-a):not(#r-b):not(#r-c):not(#r-d) h2{font-size:clamp(24px,2.2vw,32px)!important;line-height:1.16!important;letter-spacing:-.016em!important;margin-bottom:.5em!important}
  html body main .lg-art:not(#r-a):not(#r-b):not(#r-c):not(#r-d) h2 + p:not(#r-e):not(#r-f):not(#r-g){margin-top:0!important;margin-bottom:1.05em!important;font-size:17.5px!important;line-height:1.65!important}
}

/* legal — legal-hub-cards-overflow-gutter-320 */
/* ---- legal hub: cards were floored at 300px, wider than the 280px column at 320 ---- */
@media (max-width:540px){
  .lg-cards{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
}

/* legal — legal-hub-card-icon-title-misaligned-tablet */
/* ---- legal hub: '.lg-card span{margin-top:auto}' also caught the icon chip, dropping icon+title ~13px in the shorter card of a row ---- */
.lg-card > .lg-card-ic{margin-top:0}

/* legal — legal-hub-card-meta-tiny-and-orphaned */
/* ---- legal hub: no lone 'SECTIONS' on the wrapped meta line at 320 ---- */
@media (max-width:540px){
  .lg-card > span:last-child{text-wrap:pretty}
}

/* legal — legal-toc-links-small-tap-rows */
/* ---- legal: 'On this page' menu (below 900px) rows 42px like the docs On this page list; +/– sign on the toggle ---- */
@media (max-width:900px){
  .lg-toc a{padding-top:10px;padding-bottom:10px;font-size:15.5px}
  .lg-toc a.on::before{top:11px;bottom:11px}
  .lg-tocbtn{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .lg-tocbtn::after{content:"+";font:400 20px/1 var(--sans);color:var(--ink)}
  .lg-tocbtn:has(+ .lg-toc:not([hidden]))::after{content:"\2013"}
}

/* ---- follow-up to the verification pass ---- */
/* /terms/: the disclaimer and limitation-of-liability paragraphs are marked class="allcaps" (set in capitals, as such
 * clauses conventionally are), but no stylesheet ever styled the class, on the live site either */
.lg-art .allcaps,#post .allcaps{text-transform:uppercase;letter-spacing:.01em}
/* /capital/ vehicle chips: at 11px one label wraps and the others do not, so the chips were uneven; give every label
 * room for two lines */
@media (max-width:560px){
  #features #program .kx-key:not(#r-a) small{min-height:calc(2.6em + 8px);display:flex!important;align-items:center;justify-content:center}
}
/* lending "Newest release" pill (now a link to the changelog): 30px tall, so a 44px hit area */
@media (max-width:1024px){
  body[data-page="private-credit"] a.gh-newtag{position:relative}
  body[data-page="private-credit"] a.gh-newtag::before{content:"";position:absolute;inset:-7px -4px}
}

/* ---- "Only what's completed" card (#payer, the eight product pages): the peeking figure's torso is cut straight
 * 15.1% of the image's height above its bottom edge (the fingers hang below it). The design sat the image a fixed
 * 22px over the card, which only lines the cut up at the 150px phone size; at the larger desktop/tablet sizes the
 * torso stopped ~6px short of the card and left a strip of blue. Offset by the image's own height instead (the
 * translate property composes with any transform), at every width. */
#payer .fz-card .fz-peek{bottom:100%!important;translate:0 calc(15.1% - .5px)}

/* ---- customer stories in the blog post design (tools/stories_v2.py): a quote's attribution line ---- */
#post .bp2-body blockquote p:not(.bp2-cite){margin:0 0 .5em}
#post .bp2-body blockquote .bp2-cite{margin:10px 0 0;font:500 14px/1.4 var(--sans);letter-spacing:0;color:rgba(20,18,15,.6)}

/* ---- /docs/ spacing pass (Charles, 2026-09-29) ------------------------------------------------------------------
 * Docs bar on phones: the side switch sat flush on the search row (0px), the search box was 36px beside the 40px
 * Browse button, and the tab row was 4px under them. Even 10px gaps between the three rows, 12px above the first,
 * and one 40px control height in the search row. */
@media (max-width:900px){
  .dx .dx-bar-in{padding-top:12px;row-gap:10px}
  .dx .dx-tools{margin:0}
  .dx .dx-tools .dx-search input{height:40px}
}
/* "Step by step" cards (dc-msteps): 20px padding, a 44px number column + 16px gap and the article's 18px paragraph
 * margin under the last line made each step a tall box with the text in 70% of it. Tighter card, a 28px number,
 * and the step text back to the component's own docs.css size (16.5px/1.5, no trailing margin). */
html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dc-msteps .dc-mstep{padding:16px 20px;grid-template-columns:28px minmax(0,1fr);gap:14px}
html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dc-mstep .dc-mstep-num{width:28px;height:28px;font-size:13px}
html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dc-mstep h3{margin:2px 0 4px!important}
html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dc-mstep p:not(#r-a):not(#r-b):not(#r-c){font-size:16.5px!important;line-height:1.55!important;margin:4px 0 0!important}
@media (max-width:600px){
  html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dc-msteps .dc-mstep{padding:14px 16px;gap:12px}
  html body .dx-main:not(#r-a):not(#r-b):not(#r-c):not(#r-d) .dx-body .dc-mstep p:not(#r-a):not(#r-b):not(#r-c){font-size:16px!important;line-height:1.5!important}
}

/* phones: the composer runs to the site's 16px gutter (the hero section pads it by 8vw, 30px at 375) */
@media (max-width:760px){
  .ym-lead .gh-wrap{--bleed:calc(clamp(28px,8vw,150px) - 16px);width:calc(100% + 2 * var(--bleed));max-width:calc(100vw - 32px);margin-left:calc(-1 * var(--bleed));margin-right:calc(-1 * var(--bleed))}
}

/* ---- legal documents and the changelog in the blog post design (tools/pages_v2.py) ---- */
#post .bp2-toc{margin:0 0 32px;border:1px solid rgba(20,18,15,.12);border-radius:12px;background:#fff}
#post .bp2-toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 16px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(20,18,15,.6)}
#post .bp2-toc summary::-webkit-details-marker{display:none}
#post .bp2-toc summary::after{content:"+";font:400 20px/1 var(--sans);color:#14120F}
#post .bp2-toc[open] summary::after{content:"\2013"}
#post .bp2-toc nav{display:grid;padding:0 16px 12px}
#post .bp2-toc nav a{display:block;padding:8px 0 8px 12px;border-left:1px solid rgba(20,18,15,.12);font-size:15px;line-height:1.35;color:rgba(20,18,15,.7);text-decoration:none!important;border-bottom:0!important}
#post .bp2-toc nav a:hover{color:#14120F;border-left-color:#14120F}
#post .bp2-callout{margin:1.6em 0;padding:16px 20px;border-radius:14px;background:#fff;border:1px solid rgba(20,18,15,.12)}
#post .bp2-callout p:last-child{margin-bottom:0!important}
#post .bp2-cl{display:flex;align-items:center;gap:10px;margin:-2px 0 12px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(20,18,15,.55)}
#post .bp2-cl-tag{height:22px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;border:1px solid rgba(20,18,15,.14);background:#fff;font-size:12px;color:rgba(20,18,15,.7)}

/* ---- legal documents + changelog (#post.bp2-doc, tools/pages_v2.py): a one-line title does not carry the blog's
 * 22px lede, the header needs a gap before the body when there is no cover image, and document tables read as a
 * card: plain-case header row, table-sized text, bold row labels ---- */
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-lede{font-size:19px!important;line-height:1.55!important;max-width:34em}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-by{margin-top:22px}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) header.bp2-w{padding-bottom:36px}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-toc{margin:0 0 36px}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body table{border-collapse:separate!important;border-spacing:0;width:100%;margin:1.6em 0 2em!important;border:1px solid rgba(20,18,15,.12);border-radius:14px;overflow:hidden;background:#fff;font-size:15.5px!important;line-height:1.55!important;table-layout:fixed}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body th{padding:13px 16px!important;background:rgba(20,18,15,.035);border:0;border-bottom:1px solid rgba(20,18,15,.12)!important;font-family:var(--sans)!important;font-size:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;line-height:1.4!important;color:#14120F!important;text-align:left;vertical-align:bottom}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body td{padding:14px 16px!important;border:0;border-top:1px solid rgba(20,18,15,.08)!important;font-size:15.5px!important;line-height:1.55!important;color:#3B3733!important;vertical-align:top}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body tr:first-child td{border-top:0!important}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body :is(th,td):first-child{width:22%}
html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body td:first-child{font-weight:600;color:#14120F!important}
@media (max-width:600px){
  html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-lede{font-size:17.5px!important}
  html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) header.bp2-w{padding-bottom:28px}
  html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body :is(th,td){padding:12px 12px!important;font-size:14.5px!important}
  html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body table{table-layout:auto;background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) 0 0/32px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) 100% 0/32px 100% no-repeat local,linear-gradient(90deg,rgba(26,24,21,.16),rgba(26,24,21,0)) 0 0/14px 100% no-repeat scroll,linear-gradient(270deg,rgba(26,24,21,.16),rgba(26,24,21,0)) 100% 0/14px 100% no-repeat scroll,#fff}
  html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body td:first-child{min-width:7.5em}
  html body #post.bp2-doc:not(#r-a):not(#r-b):not(#r-c) .bp2-body td:not(:first-child){min-width:12em}
}

/* ---- "On this page" keycap (legal documents' .bp2-toc, docs' .dx-onpage and sidebar .dx-toc): the blog timeline's
 * key-ink cap with a list icon, tilted like the timeline keys; it settles flat when the list is open ---- */
.toc-cap{position:relative;display:inline-block;flex:none;width:30px;height:30px;transform:rotate(-7deg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.toc-cap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(20,18,15,.18))}
.toc-cap svg{position:absolute;left:50%;top:37%;width:13px;height:13px;transform:translate(-50%,-50%)}
details[open] > summary .toc-cap{transform:rotate(0) translateY(1px)}
details > summary:hover .toc-cap{transform:rotate(-3deg) translateY(1px)}
#post .bp2-toc summary,.dx-onpage summary{justify-content:flex-start!important;gap:12px;min-height:54px!important}
#post .bp2-toc summary::after,.dx-onpage summary::after{margin-left:auto}
.dx-toc > b{display:flex!important;align-items:center;gap:10px}
.dx-toc > b .toc-cap{width:26px;height:26px}
.dx-toc > b .toc-cap svg{width:11px;height:11px}

/* ---- docs homes: "Which Carousel do you use?" as two keycaps (tools/docs_v2.py _chooser). A card is a key with a
 * 6px bottom edge; the chosen one is pressed down (4px lower, 2px edge, ink outline) and its keycap sits flat ---- */
html body .dx .dx-choose-k .dx-choose-g{gap:16px}
html body .dx .dx-pick.dx-pickey{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid rgba(20,18,15,.14);border-bottom:6px solid rgba(20,18,15,.2);box-shadow:0 14px 26px -22px rgba(20,18,15,.55)!important;transform:none;cursor:pointer;transition:transform .16s ease,border-bottom-width .16s ease,box-shadow .16s ease,border-color .16s ease}
html body .dx .dx-pick.dx-pickey:hover{transform:translateY(1px);border-bottom-width:5px;border-color:rgba(20,18,15,.3)}
html body .dx .dx-pick.dx-pickey[aria-pressed="true"]{transform:translateY(4px)!important;border-color:#14120F!important;border-bottom-width:2px;box-shadow:0 0 0 1px #14120F!important;cursor:default}
html body .dx .dx-pick.dx-pickey:focus-visible{outline:2px solid #14120F;outline-offset:3px}
.dx-pickey .dx-cap{position:relative;display:block;width:52px;height:52px;transform:rotate(-6deg);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.dx-pickey .dx-cap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(20,18,15,.2))}
.dx-pickey .dx-cap svg{position:absolute;left:50%;top:37%;width:19px;height:19px;transform:translate(-50%,-50%)}
.dx-pickey[aria-pressed="true"] .dx-cap{transform:rotate(0) translateY(2px)}
html body .dx .dx-pickey .dx-pick-t{display:grid;gap:5px;font:inherit;color:inherit}
html body .dx .dx-pickey .dx-pick-t b{display:flex;align-items:center;gap:10px;font:600 18px var(--sans);color:#14120F}
html body .dx .dx-pickey .dx-pick-t > span{font:15px/1.45 var(--sans);color:rgba(26,24,21,.66)}
.dx-pickey .dx-new{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:#14120F;color:#fff;font:600 10.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
html body .dx .dx-choose > p.dx-choose-hint{margin:16px 0 0;font:14.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;text-align:center;color:rgba(26,24,21,.62)}
@media (max-width:600px){
  html body .dx .dx-pick.dx-pickey{padding:16px;gap:14px}
  .dx-pickey .dx-cap{width:44px;height:44px}
  .dx-pickey .dx-cap svg{width:16px;height:16px}
  html body .dx .dx-choose > p.dx-choose-hint{text-align:left}
}