/* Answers — AiOS answer and card presentation spec (approved 23 Sep 2026; applied 24 Sep 2026).
   Tenant-agnostic: every colour derives from --accent / --ink / --line, every size from the --t-* ladder. Fonts and brand colours stay
   with the tenant configuration. Selectors are the production DOM (kit-renderer.js, v2-renderer.js, app.js), verified against develop
   f63c3afd; where the spec's reference CSS named a different class, the declarations were kept and the selector adapted:
     .p-document → .docrow (row), .p-button → .open (pill), .aios-answer-marker .persona → not restyled (owner kept production marker).
   Owner decisions 24 Sep 2026: card grid = spec auto-fill 280px; detail width = 2 × card + 50px; desktop answers keep the --ui-z scale
   above 1440 (D2), so a 4K answer is the 1440 answer, larger, with the same column count. */
.screen{--aios-tabband:var(--tabband,#EDF2F7);--aios-r-card:var(--radius-card,var(--r-card,var(--ds-radius-12)));--aios-r-detail:var(--ds-radius-14);--aios-r-cta:var(--ds-radius-10);--aios-gap-set:16px;--aios-card-min:280px}
#chatScroll .messages{container:answers/inline-size}
/* A detail's pinned strips (app.js pinDetail) are drawn only in the widget's panel (widget/app-overrides.css). */
.pc-pin,.pc-pin-foot{display:none}
.screen.live #chatScroll .messages{zoom:var(--ui-z,1)}
/* The label floor (FOUNDATIONS section 4; check G10; design call, 11 Nov 2026): a label never draws under 10px, also where the answers
   are magnified by less than 1 (the widget's compact panel, 0.9). Inside the magnified region the two label steps are held at the
   floor divided by the magnification, so a 10px or 11px label draws at least 10px; with a magnification of 1 or more they are their
   own size. Fact labels are capitals and take the 11px step. */
.screen.live #chatScroll .messages{--ds-fs-10:max(10px,calc(10px / var(--ui-z,1)));--ds-fs-11:max(11px,calc(10px / var(--ui-z,1)))}
/* The two 10.5px labels inside the answers (a tab's number and the picture count) keep their 10.5 and are held at the same floor. */
.screen.live #chatScroll .messages :is(.tb .n,.hcount){font-size:calc(var(--ds-fs-10) * 1.05)}

/* 1 · Answer prose -------------------------------------------------------------------------------------------------------------- */
/* Formatting holds everywhere the markdown subset renders: answer prose, detail panes, the reader, card summaries. */
.aios-answer-text strong,.screen .pane .prose strong,.screen .p-reader-body strong,.screen .card .summary strong{color:var(--accent);font-weight:700}
.aios-answer-text em,.screen .pane .prose em,.screen .p-reader-body em{font-style:italic}
.screen .pane .prose ul:not(.checklist),.screen .p-reader-body ul:not(.checklist){margin:6px 0 12px;padding-left:20px;list-style:disc}
.screen .pane .prose li,.screen .p-reader-body li{margin:0 0 5px}
/* Prose typography from the approved Golden Answers reference (token-driven; fonts and colours stay with the tenant). */
.aios-answer-text{max-width:75ch;font-size:var(--t-base);line-height:1.65;font-weight:var(--ts-body-weight);font-style:var(--ts-body-style);color:var(--ts-body-colour)}
.aios-answer-text p{margin:1em 0}.aios-answer-text > :first-child{margin-top:0}.aios-answer-text > :last-child{margin-bottom:0}
.aios-answer-text h3{margin:18px 0 6px;font-family:var(--ts-sub-font);font-size:var(--t-lg);font-weight:var(--ts-sub-weight,800);font-style:var(--ts-sub-style);line-height:1.25;color:var(--ts-sub-colour,var(--ink));letter-spacing:0;text-transform:none}
.aios-answer-text ul,.aios-answer-text ol{margin:6px 0 12px;padding-left:22px}.aios-answer-text li{margin:4px 0}
.screen .pane > * + *{margin-top:16px}
.screen .pane .prose{max-width:70ch;font-size:var(--t-sm);line-height:1.6;font-weight:var(--ts-body-weight);font-style:var(--ts-body-style);color:var(--ts-body-colour)}
.screen .pane .prose p{margin:0 0 12px}.screen .pane .prose > :first-child{margin-top:0}
.screen .pane .prose h3,.screen .pane .prose h4,.screen .pane .prose h5{font-family:var(--ts-sub-font);font-weight:var(--ts-sub-weight,800);font-style:var(--ts-sub-style);line-height:1.25}
.screen .pane .prose h5{font-size:var(--t-xs);margin:14px 0 6px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.screen .pane .prose ul:not(.checklist),.screen .pane .prose ol{margin:6px 0 12px;padding-left:22px}.screen .pane .prose li{margin:4px 0}
.aios-answer-text h5,.aios-answer-text h4{margin:14px 0 4px;font-family:var(--ts-sub-font);font-size:var(--t-md);font-weight:var(--ts-sub-weight,800);font-style:var(--ts-sub-style);line-height:1.25;color:var(--ts-sub-colour,var(--ink));letter-spacing:0;text-transform:none}
.aios-answer-text h4 + ul,.aios-answer-text h5 + ul{margin-top:4px}
.aios-answer-text ul{margin:6px 0 10px;padding-left:20px}
.aios-answer-text li{margin:0 0 4px}
.aios-answer-text li,.screen .pane .prose li,.screen .p-reader-body li{font-family:var(--ts-bullets-font);font-weight:var(--ts-bullets-weight);font-style:var(--ts-bullets-style);color:var(--ts-bullets-colour)}
.aios-answer-text a,.pane .prose a{color:var(--accent);text-decoration:none}.aios-answer-text a:hover,.pane .prose a:hover{text-decoration:underline}
/* Checklist: "- [x] item". Bare accent check, CSS columns, never one long bullet run. Prose and panes. */
.screen ul.checklist{list-style:none;padding:0;margin:10px 0 14px;columns:3 200px;column-gap:28px}
.screen ul.checklist li{display:flex;align-items:flex-start;gap:9px;margin:0 0 9px;break-inside:avoid;line-height:1.45}
.screen ul.checklist .ck{flex:0 0 auto;display:flex;width:17px;height:17px;margin-top:2px;color:var(--accent)}
.screen ul.checklist .ck svg{width:17px;height:17px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pane .prose h3{font-size:var(--t-md);margin:18px 0 6px;text-transform:none;letter-spacing:0;color:var(--ts-sub-colour,var(--ink))}
.pane .prose h4{font-size:var(--t-base);margin:16px 0 6px;text-transform:none;letter-spacing:0;color:var(--ts-sub-colour,var(--ink))}

/* 2 · NEXT follow-ups --------------------------------------------------------------------------------------------------------- */
.aios-answer-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.screen[data-device="mobile"] .aios-answer-next{gap:6px}
.aios-answer-next .next-label{margin-right:2px;font-size:var(--ds-fs-10);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6B7280);line-height:1.5}
.screen .aios-next-btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;border:2px solid color-mix(in srgb,var(--accent) 60%,#fff);border-radius:var(--ds-radius-pill);background:#fff;color:var(--ink);font:inherit;font-size:var(--t-sm);font-weight:600;line-height:1.2;cursor:pointer}
.screen .aios-next-btn:hover{background:color-mix(in srgb,var(--accent) 8%,#fff)}
.screen[data-device="mobile"] .aios-next-btn{min-height:40px;text-align:left}
.aios-next-btn .spark,.aios-next-btn .spark svg{width:17px;height:17px;flex:0 0 auto;color:var(--accent)}
.aios-next-btn .spark svg{filter:drop-shadow(0 1px 1.5px color-mix(in srgb,var(--accent) 40%,transparent))}

/* 3 · Every card-like surface: glossy lining + soft lift, identical inside detail panes (no tinted well) -------------------------
   One shadow for every card (owner, 29 Sep 2026): compare tables, forms (standalone or opened from a detail, in every state) and a
   form's sent confirmation take the same lining and resting shadow; the hover lift stays on what can be clicked (face cards, document
   rows, video), and inside a detail pane those answer hover exactly as they do at top level. The detail card keeps its own shadow. */
.screen .card,.screen .p-resource,.screen .docrow,.screen .pc .pane .set > .card,.screen .pc .pane .p-resource,.screen .tbl,.screen .frm,.screen .conf{
  border:1px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#fff) 0%,color-mix(in srgb,var(--accent) 14%,#fff) 42%,color-mix(in srgb,var(--accent) 38%,#fff) 100%) border-box;
  box-shadow:var(--ds-shadow-card),var(--ds-inset-highlight);
  transition:transform .18s ease,box-shadow .18s ease}
.screen .card:hover,.screen .docrow:hover,.screen .p-video:hover,.screen .pc .pane .set > .card:hover,.screen .pc .pane .p-video:hover{transform:translateY(-2px);
  background:linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 30%,#fff) 45%,color-mix(in srgb,var(--accent) 70%,#fff) 100%) border-box;
  box-shadow:var(--ds-shadow-card-hover)}
@media (prefers-reduced-motion:reduce){.screen .card,.screen .docrow,.screen .p-video{transition:none}.screen .card:hover,.screen .docrow:hover,.screen .p-video:hover,.screen .pc .pane .set > .card:hover,.screen .pc .pane .p-video:hover{transform:none}}
body.a11y-reduce-motion .screen .card:hover,body.a11y-reduce-motion .screen .docrow:hover,body.a11y-reduce-motion .screen .p-video:hover,body.a11y-reduce-motion .screen .pc .pane .set > .card:hover,body.a11y-reduce-motion .screen .pc .pane .p-video:hover{transform:none}
.screen .pane .set,.screen .pane .rset{background:none;padding:0}

/* 4 · Card grid: face cards, galleries and videos share one width; desktop gains columns, never bigger cards --------------------- */
.screen .set,.screen .pane .set,.screen .rset{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--aios-card-min)),1fr));gap:var(--aios-gap-set)}
.screen .set{grid-auto-rows:1fr;align-items:stretch}
.screen .set > .card{height:100%}
.screen .rset{align-items:start}
.screen .rset + .rset,.screen .set + .rset,.screen .rset + .set{margin-top:var(--aios-gap-set)}
.screen .rcell{display:flex;flex-direction:column;gap:8px;min-width:0}
.screen .rcell > .p-gallery,.screen .rcell > .p-video{margin:0;min-width:0}
.screen .rset-title{margin:0;font-size:var(--t-base);font-weight:700;line-height:1.3;color:var(--ink);text-transform:none;letter-spacing:0}
.screen .rset:not(.multi) .rset-title{display:none}

/* 5 · Face card ------------------------------------------------------------------------------------------------------------------ */
.screen .card{position:relative;display:flex;flex-direction:column;border-radius:var(--aios-r-card);overflow:hidden;cursor:pointer}
.screen .card .media{position:relative;aspect-ratio:4/3;max-height:280px;flex:0 0 auto;overflow:hidden;background:var(--lockup,#EDF2F7);border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,#fff)}
.screen[data-device="mobile"] .card .media{max-height:240px}
/* Photography fills its frame; product imagery and floorplans retain their complete silhouette. */
.screen .card .media img:not(.phlogo),.screen .pc-hero img:not(.phlogo){display:block;width:100%;height:100%;object-fit:cover;padding:0}
.screen .card .media img:not(.phlogo),.screen .pc-hero img:not(.phlogo){position:absolute;inset:0}
.screen .card .media.contain img:not(.phlogo),.screen .pc-hero.contain img:not(.phlogo){object-fit:contain;padding:8px;background:#fff}
.screen .card .cbody{display:flex;flex-direction:column;flex:1 1 auto;padding:12px 5% 16px}
/* CTA: spans the body's text column exactly, 48 high, radius 10, last, pinned to the bottom, 14 above, 16 to the bottom border.
   --cta-bg and --cta-ink are the branding API's ctaButtonBgColor and ctaButtonTextColor, set only when sent (owner, 29 Sep 2026). */
.screen .card .cta-bar{margin-top:auto;padding:14px 0 0}
.screen .cta-bar-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:0 18px;border:0;border-radius:var(--aios-r-cta);background:var(--cta-bg,var(--accent));color:var(--cta-ink,#fff);font:inherit;font-size:var(--t-sm);font-weight:800;line-height:1.2;cursor:pointer;white-space:nowrap}
.screen .cta-or{margin:8px 0;text-align:center;font-size:var(--t-2xs);font-weight:700;letter-spacing:.12em;color:var(--sub)}
.screen .card .cta-or + .cta-bar{margin-top:0;padding-top:0}

/* 6 · Detail --------------------------------------------------------------------------------------------------------------------- */
.screen .pc,.screen.live .pc,.screen.live[data-device="desktop"] .pc{width:min(100%,calc(2 * var(--card-w,280px) + 50px));max-width:100%;border-radius:var(--aios-r-detail)}
.screen .pc-hero{aspect-ratio:16/9}
.screen[data-device="mobile"] .pc-hero{aspect-ratio:16/10}
/* No rule between the tab content and the detail's CTA (reference): the CTA follows the pane directly. */
.screen .pc > .cta-bar{padding:4px 20px 16px;border:0;box-shadow:none;background:transparent;position:static}
.screen .pc > .pane{border-bottom:0}
.screen .pc > .cta-bar:has(+ .cta-or),.screen .pc > .cta-bar:has(+ .cta-bar){padding-bottom:0}
.screen .pc > .cta-or{margin:8px 20px}
.screen .pc > .cta-or + .cta-bar{padding-top:0}
.screen[data-device="mobile"] .pc > .cta-bar{padding:4px 16px 16px}
.screen[data-device="mobile"] .pc > .cta-or{margin:8px 16px}
/* Tab band: tint, numbered pills, scrolls sideways, never wraps; chevrons at whichever end has more. The branding API's detail tab
   colours (owner, 29 Sep 2026) arrive as --detail-tabband, --tab-label, --tab-on-bg, --tab-on-label and --tab-on-number, set by app.js
   only when sent; unset, every value below is what it was. */
.screen .tabrow{position:relative;display:flex;align-items:stretch;background:var(--detail-tabband,var(--aios-tabband))}
.screen .tabrow .tabscroll{display:flex;flex:1 1 auto;min-width:0;gap:5px;padding:8px 11px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.screen .tabrow .tabscroll::-webkit-scrollbar{display:none}
/* Tabs as in the reference: inactive tabs are bare text on the band (no white pill, no border); the active tab is the brand pill. */
.screen .tabrow .tb{flex:0 0 auto;white-space:nowrap;display:flex;align-items:baseline;justify-content:center;gap:7px;padding:9px 14px;border:0;border-radius:var(--ds-radius-pill);background:none;box-shadow:none;color:var(--tab-label,var(--sub));font-size:var(--t-xs);font-weight:700}
.screen .tabrow .tb .n{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--tab-label,var(--ink))}
.screen .tabrow{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.screen .pc-facts + .tabrow{border-top:0}
/* The pagination bar (sort, per page, pages) takes the tab band fill (owner ruling 24 Sep 2026). */
.screen .set-bar{background:var(--aios-tabband)}
/* Active tab takes the brand primary colour (spec §5.2); master.css's later white-pill rule is superseded. */
.screen .tabrow .tb.on{background:var(--tab-on-bg,var(--accent));color:var(--tab-on-label,#fff);border-color:var(--tab-on-bg,var(--accent));box-shadow:none}
.screen .tabrow .tb.on .n{color:var(--tab-on-number,rgba(255,255,255,.75))}
/* The "more tabs" arrows (rule L1, G3: nothing is painted over words): each takes its own place at the end of the band, on the band's
   own colour, so the row of tabs ends before it; the row fades out on the side that has more, so a tab cut at that edge is faded,
   never painted under the arrow. The tabs stay on one row that scrolls (owner, 3 Nov 2026), their words centred (17 Oct 2026). */
.screen .tabnav{display:none;flex:0 0 auto;width:34px;padding:0;margin:0;border:0;align-items:center;justify-content:center;color:var(--tab-label,var(--ink));cursor:pointer;z-index:var(--ds-z-top);background:var(--detail-tabband,var(--aios-tabband))}
.screen .tabnav.prev{order:-1}
.screen .tabrow[data-overflow-start="true"] .tabnav.prev,.screen .tabrow[data-overflow-end="true"] .tabnav.next{display:flex}
.screen .tabrow[data-overflow-end="true"] .tabscroll{-webkit-mask-image:linear-gradient(to left,transparent 0,black 24px);mask-image:linear-gradient(to left,transparent 0,black 24px)}
.screen .tabrow[data-overflow-start="true"] .tabscroll{-webkit-mask-image:linear-gradient(to right,transparent 0,black 24px);mask-image:linear-gradient(to right,transparent 0,black 24px)}
.screen .tabrow[data-overflow-start="true"][data-overflow-end="true"] .tabscroll{-webkit-mask-image:linear-gradient(to right,transparent 0,black 24px,black calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 24px,black calc(100% - 24px),transparent 100%)}
.screen .tabnav svg{width:16px;height:16px}

/* 7 · Gallery card: no title bar, 4:3 cover stage, caption inside the image, side arrows, count pill top-right ----------------- */
.screen .p-gallery{padding:0;border-radius:var(--aios-r-card);overflow:hidden}
.screen .p-gallery > h3{display:none}
.screen .p-gallery-stage{position:relative}
.screen .p-gallery-open{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.screen .p-gallery-open .p-image{width:100%;aspect-ratio:4/3;max-height:none;margin:0;overflow:hidden;background:var(--lockup,#EDF2F7)}
.screen .p-gallery-open .p-image img{display:block;width:100%;height:100%;object-fit:cover}
.screen .p-gallery .p-caption{position:absolute;left:0;right:0;bottom:0;z-index:var(--ds-z-lift);margin:0;padding:28px 14px 11px;background:linear-gradient(to top,rgba(10,16,24,.72),rgba(10,16,24,0));color:#fff;font-size:var(--t-sm);font-weight:600;line-height:1.35;pointer-events:none;min-height:0}
.screen .p-gallery .p-caption[hidden]{display:none}
.screen .p-gallery-controls{position:absolute;inset:0;display:block;pointer-events:none}
.screen .p-gallery-controls .p-button{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:var(--ds-radius-circle);background:rgba(255,255,255,.92);color:var(--ink);font-size:var(--ds-fs-18);box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:var(--ds-z-top)}
.screen .p-gallery-controls .p-button:first-child{left:10px}
.screen .p-gallery-controls .p-button:last-child{right:10px}
.screen .p-gallery-controls .p-button[hidden]{display:none}
.screen .p-gallery-controls .p-count{position:absolute;right:10px;top:10px;left:auto;bottom:auto;padding:4px 10px;border-radius:var(--ds-radius-pill);background:rgba(10,16,24,.62);color:#fff;font-size:10.5px;font-weight:700;z-index:var(--ds-z-top)}
.screen .p-gallery-controls .p-count[hidden]{display:none}
.screen .p-gallery-strip{display:flex;gap:8px;padding:10px 12px 12px;overflow-x:auto}
.screen .p-gallery-thumb{flex:0 0 auto;width:64px;height:46px;padding:0;border:0;border-radius:var(--ds-radius-8);overflow:hidden;background:var(--lockup,#EDF2F7);cursor:pointer}
.screen .p-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.screen .p-gallery-thumb.on{outline:2px solid var(--accent);outline-offset:-2px}

/* 8 · Documents: rows, two across from 420px; the pill spans the row on phones ------------------------------------------------- */
.screen .docrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.screen .docrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;min-height:0;padding:14px 16px;border-radius:var(--aios-r-detail);cursor:pointer}
.screen .docrow .mk{width:96px;height:72px}
.screen .docrow .open{justify-self:end;min-height:38px;padding:7px 14px;border-radius:var(--ds-radius-pill);border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--accent);font-size:var(--t-xs);font-weight:800;white-space:nowrap}
.screen .docrow:hover .open{background:var(--accent);color:#fff}
.screen[data-device="mobile"] .docrow{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}
.screen[data-device="mobile"] .docrow .mk{width:72px;height:54px}
.screen[data-device="mobile"] .docrow .open{grid-column:1 / -1;justify-self:stretch;display:flex;justify-content:center}

/* Full source titles remain readable at every width; do not merely replace an ellipsis with a crop. */
.screen .cname{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.screen .cname,.screen .pc-name,.screen .pc-addr,.screen .docmeta b,.screen .docmeta small,.screen .rset-title{white-space:normal;overflow-wrap:anywhere}
.screen .docmeta b,.screen .docmeta small{overflow:visible}
.screen .tabrow .tab-separator{opacity:.65;font-weight:400}
.screen .cta-bar-label{min-width:0;white-space:normal;overflow-wrap:anywhere}
.screen .cta-bar-btn{padding-top:10px;padding-bottom:10px}
/* The persona name above every answer is set in the tenant's display font (same face as card titles); colour and size unchanged. */
.aios-answer-marker .aios-marker-label{font-family:var(--brand-font-display,var(--brand-font-body,Inter)),sans-serif}
/* NEXT prompts are white surfaces on every canvas. */
.screen .aios-next-btn{background-color:#fff}
/* Safari and Firefox: a flex item with aspect-ratio + max-height derives its WIDTH from the clamped height (240 × 4/3, 280 × 4/3),
   leaving a gap beside the photo on phones, tablets and 1024 laptops. A definite width keeps the frame full-bleed; max-height then
   only trims height and the image covers. */
.screen .card .media,.screen .pc-hero{width:100%;min-width:100%;align-self:stretch}
/* Viewer by kind (24 Sep 2026): header actions, contained images, and a page card instead of framing sites that refuse to be framed. */
.screen .viewer-head h2{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.screen .viewer-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.screen .viewer-newtab{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border:1px solid color-mix(in srgb,var(--accent) 35%,#fff);border-radius:var(--ds-radius-pill);background:#fff;color:var(--accent);font-size:var(--t-sm);font-weight:700;text-decoration:none;white-space:nowrap}
.screen .viewer-newtab:hover{background:var(--accent);color:#fff;text-decoration:none}
.screen .p-reader-body > .viewer-newtab{margin-top:16px}
.screen .reader.viewer--image .viewer-body{align-items:center;justify-content:center;background:#F4F5F7}
.screen .viewer-img{display:block;max-width:100%;max-height:100%;margin:auto;object-fit:contain}
.screen .reader.viewer--page .p-reader,.screen .reader.viewer--text .p-reader{height:auto}
.screen .viewer-pagecard{display:flex;flex-direction:column;gap:14px;width:100%}
.screen .viewer-page-image{display:block;width:100%;max-height:min(360px,45cqh);object-fit:cover;border-radius:var(--aios-r-card,var(--ds-radius-12))}
.screen .viewer-page-summary{margin:0;font-size:var(--t-base);line-height:1.6;color:var(--ink)}
.screen .viewer-page-note{margin:0;font-size:var(--t-sm);color:var(--sub)}
.screen .viewer-pagecard > .viewer-newtab{align-self:flex-start}
@container (orientation:portrait) and (max-width:599px){.screen .viewer-actions .viewer-newtab{padding:6px 12px;font-size:var(--t-xs)}}
/* PDF pages drawn in the interface: a scrolling column of white pages on the neutral ground, each page full width of the viewer. */
.screen .reader.viewer--pdf .p-reader{max-width:min(980px,100%)}
.screen .viewer-pages{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px;background:#E9ECF0}
.screen .viewer-pdfpage{width:100%;max-width:900px;background:#fff;box-shadow:var(--ds-shadow-2);border-radius:var(--ds-radius-4);overflow:hidden;flex:0 0 auto}
.screen .viewer-pdfpage canvas{display:block;width:100%;height:auto}
.screen .viewer-status{margin:auto;font-size:var(--t-sm);color:var(--sub)}
@container (orientation:portrait) and (max-width:599px){.screen .viewer-pages{padding:8px;gap:8px}}
/* Always-open contact cards: no hover lift or pointer (the card itself is not a button; its routes are the links). */
.screen .card.contact-open{cursor:default}
.screen .card.contact-open:hover{transform:none}
.screen .card.contact-open .cbody:has(> .p-contact){padding:0}
.screen .card.contact-open .p-contact{border:0;box-shadow:none;background:none;padding:18px 20px}
.screen .card.contact-open .p-contact dd a{overflow-wrap:anywhere}
.screen .card.contact-open .cta-bar{padding:0 20px 18px}
/* Contact cards span two face-card columns wherever the answer column fits two (owner ruling 24 Sep 2026); phones keep one full-width column. */
@container answers (min-width:576px){.screen .set > .card.contact-open{grid-column:span 2}}
.screen .card.contact-open .p-contact dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));column-gap:28px}
/* Inline video: the governed player (AiOSWidgets.videoPlayer) fills the poster frame at 16:9. */
.screen .p-video-poster:has(> iframe,> video){aspect-ratio:16/9;background:#000}
.screen .p-video-poster > :is(iframe,video){display:block;width:100%;height:100%;border:0;background:#000}
/* Record names in the answer open the record (button styled as the bold name, with an underline on hover/focus). */
.aios-answer-text .record-link{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
.aios-answer-text .record-link strong{font-family:var(--ts-link-font);font-weight:var(--ts-link-weight,700);font-style:var(--ts-link-style);color:var(--ts-link-colour,var(--accent));text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px}
.aios-answer-text .record-link:hover strong,.aios-answer-text .record-link:focus-visible strong{text-decoration-color:var(--accent)}
.aios-answer-text .record-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* Comparison: column headers open their record; long lists in cells are single-column checklists. */
.screen .thead.topen{cursor:pointer;border-radius:var(--ds-radius-10);transition:background-color .15s ease}
.screen .thead.topen:hover{background:color-mix(in srgb,var(--accent) 5%,#fff)}
.screen .thead.topen:hover .tname{text-decoration:underline;text-underline-offset:3px}
.screen .thead-open{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.screen .thead-open:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--ds-radius-6)}
.screen .tcell .tchecks ul.checklist{columns:1;margin:0}
.screen .tcell .tchecks{font-size:inherit}
/* Class sections (owner, 30 Sep 2026; Option A locked). One heading per class, in the answer's own Header 1 (as .aios-answer-text h3
   draws a # heading): body font, --t-lg, 800, line height 1.25, --ink; in a detail tab, the tab's section heading (.pane .prose h3, --t-md).
   A block, not a flex row, so a wrapped label keeps its count beside it. Every section after the first sits under a 1px --line rule: 20px
   above the rule (the 16px widget gap plus 4px, or 20px in a pane), 28px from the rule to the heading, 6px below the heading. Tokens only. */
.screen .set-group-head{display:block;margin:0 0 6px;font-family:var(--ts-sub-font);font-size:var(--t-lg);font-weight:var(--ts-sub-weight,800);font-style:var(--ts-sub-style);line-height:1.25;color:var(--ts-sub-colour,var(--ink));letter-spacing:0;text-transform:none}
.screen .set-group-head.in-tab{font-size:var(--t-md)}
.screen .set-group-count{display:inline-block;margin-left:8px;font-family:inherit;font-size:var(--t-sm);font-weight:600;line-height:inherit;color:var(--sub);white-space:nowrap;letter-spacing:0;text-transform:none}
.screen .set-section-next{border-top:1px solid var(--line);padding-top:28px}
.screen .turn-widgets .set-section-next{margin-top:4px}
.screen .pane > .set-section-next{margin-top:20px}
.screen .set-sections{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* A detail opens on its own (owner, 30 Sep 2026): while a detail is open in an answer, its other widgets are hidden, never rebuilt, and come
   back as they were on Back. The answer text, NEXT and the accuracy line sit outside .turn-widgets and stay. */
.turn-widgets.has-open-detail > :not(.kit-frame-open){display:none}
/* An open detail can always be scrolled to the top of the conversation's view, however short it is (app.js keepDetailAtTop sets
   --aios-chat-h): a detail shows only Back and that detail (owner, 30 Sep 2026). */
/* The last view of an open frame (the detail, or the form opened from it) is at least the view's height, so whatever follows it (the
   answer's suggestions and reliability line) starts below the view at every size; a 768 by 1024 tablet showed NEXT under the detail
   and its form. They stay in place, a scroll away. */
.turn-widgets.has-open-detail > .kit-frame-open > :is(.detail-view,.form-view):last-child{min-height:var(--aios-chat-h,0px)}
/* Rosedale card pass (8 Oct 2026), every tenant that sets these: section headings inside a detail in the tenant's heading colour
   (detailHeadingColour); the incentives banner along the bottom of a card photo (incentivesBlock); a document's thumbnail with its format. */
.screen .pc .pane .prose h3,.screen .pc .pane .prose h4{color:var(--pane-heading,var(--ts-sub-colour,var(--ink)))}
.screen .media .incentives-banner{position:absolute;left:0;right:0;bottom:0;z-index:var(--ds-z-lift);display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--accent);color:#fff;font-size:var(--ds-fs-10);font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.screen .media .incentives-banner svg{width:14px;height:14px;flex:0 0 auto}
.screen .media .incentives-banner.fact-banner{font-size:var(--ds-fs-13);font-weight:700;letter-spacing:0;text-transform:none;padding:8px 12px}
/* The same banner on a detail's photo, for a class whose banner fact is drawn there too (bannerOnly, 16 Oct 2026). */
.screen .pc-hero .incentives-banner{position:absolute;left:0;right:0;bottom:0;z-index:var(--ds-z-lift);display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--accent);color:#fff;font-size:var(--ds-fs-15);font-weight:700;letter-spacing:0;text-transform:none}
.screen .pc-hero .incentives-banner svg{width:16px;height:16px;flex:0 0 auto}
.screen .docrow .mk.thumb{position:relative;padding:0;overflow:hidden;background:#fff;border:1px solid var(--line,#E2E6EC)}
.screen .docrow .mk.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.screen .docrow .mk.thumb.logo img{object-fit:contain;padding:10px 12px;box-sizing:border-box}
.screen .docrow .mk.thumb .fmt{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:var(--ds-radius-6);background:var(--ft-doc-bg,var(--accent));color:var(--ft-doc-ink,#fff);font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1.4}

/* Console Design settings (owner, 13 Oct 2026). Rules here apply only under the attribute the setting sets on <html>; a tenant that
   sets none draws exactly as before. Bullet format: Dot is the disc lists already draw; Dash, Check and Number replace it in the lists
   of an answer, a detail tab and a reader. */
html[data-bullets="dash"] .aios-answer-text ul > li,html[data-bullets="dash"] .screen .pane .prose ul:not(.checklist) > li,html[data-bullets="dash"] .screen .p-reader-body ul:not(.checklist) > li{list-style-type:"\2013\00A0\00A0"}
html[data-bullets="check"] .aios-answer-text ul > li,html[data-bullets="check"] .screen .pane .prose ul:not(.checklist) > li,html[data-bullets="check"] .screen .p-reader-body ul:not(.checklist) > li{list-style-type:"\2713\00A0\00A0"}
html[data-bullets="number"] .aios-answer-text ul > li,html[data-bullets="number"] .screen .pane .prose ul:not(.checklist) > li,html[data-bullets="number"] .screen .p-reader-body ul:not(.checklist) > li{list-style-type:decimal}
/* Card surface and card text: the face cards, at top level and inside a detail tab. The surface replaces the white inside the card's
   lining; the card's own text colours follow the card text (secondary lines at 72 percent, hairlines at 16), names keep the heading
   colour where it reads at 4.5:1 on the surface, and an action button that would sink into the surface turns over (app.js). The status
   pill sits on the photo and keeps its own colours. */
html[data-ft-cards] .screen .card,html[data-ft-cards] .screen .pc .pane .set > .card{
  --ink:var(--ft-card-body);--ink-soft:var(--ft-card-body);--sub:color-mix(in srgb,var(--ft-card-ink) 72%,var(--ft-card-bg,#fff));--muted:color-mix(in srgb,var(--ft-card-ink) 72%,var(--ft-card-bg,#fff));
  --line:color-mix(in srgb,var(--ft-card-ink) 16%,var(--ft-card-bg,#fff));--ts-heading-colour:var(--ft-card-heading);--ts-body-colour:var(--ft-card-body);
  --cta-bg:var(--ft-card-cta-bg);--cta-ink:var(--ft-card-cta-ink);color:var(--ft-card-ink);
  background:linear-gradient(var(--ft-card-bg,#fff),var(--ft-card-bg,#fff)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#fff) 0%,color-mix(in srgb,var(--accent) 14%,#fff) 42%,color-mix(in srgb,var(--accent) 38%,#fff) 100%) border-box}
html[data-ft-cards] .screen .card:hover,html[data-ft-cards] .screen .pc .pane .set > .card:hover{
  background:linear-gradient(var(--ft-card-bg,#fff),var(--ft-card-bg,#fff)) padding-box,
    linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 30%,#fff) 45%,color-mix(in srgb,var(--accent) 70%,#fff) 100%) border-box}

/* AiOS store card and store detail (store.js; owner, 8 Nov 2026). One look for every store client: the tenant's colour is the
   hover and the sale colour, text is the tenant's ink, edges follow the tenant's card radius. Buttons are black (the ink) and
   turn the tenant's colour on hover; dropdowns are the store card's own, the option name on its own line above each picker. */
/* Store tokens: the tenant's primary colour is the button, its secondary colour the highlight (hover, sale price, Save badge,
   chosen mark); a tenant without a secondary colour gets a darker primary as its hover. Text and lines fall back to the shell's. */
.screen{--st-ink:var(--ink,#0f0f0f);--st-line:var(--line,#dadada);--st-btn:var(--accent,#0f0f0f);--st-btn-ink:#fff;--st-hi:var(--brand-secondary,color-mix(in srgb,var(--accent,#0f0f0f) 78%,#000))}
/* A black hairline round every store card, no shadow (owner, 8 Nov 2026); it thickens on hover. */
html .screen article.card.store-card{cursor:pointer;border:1px solid var(--st-ink);box-shadow:none;transition:box-shadow .15s ease}
html .screen article.card.store-card:hover,html .screen article.card.store-card:focus-within{box-shadow:var(--ds-ring-line) var(--st-ink)}
.screen .card.store-card:focus-visible{outline:2px solid var(--st-hi);outline-offset:2px}
.screen .card.store-card .media{background:#fff;aspect-ratio:1/1;max-height:none}
.screen .card.store-card .media img{object-fit:contain;padding:8%}
.screen .card.store-card .st-body{gap:10px;padding:14px 14px 16px}
.screen .card.store-card .cname{margin:0;-webkit-line-clamp:3;min-height:2.5em}
.screen .card.store-card.st-loading .media{background:var(--lockup,#f2f2f2)}
.screen .card.store-card.st-loading .st-body{min-height:220px}

.screen .st-kind{margin:0;font-size:var(--t-2xs,var(--ds-fs-11));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub,#6b6b6b)}
.screen .st-save,.screen .st-out{position:absolute;top:10px;z-index:var(--ds-z-lift);padding:4px 7px;font-size:var(--t-2xs,var(--ds-fs-11));font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.screen .st-save{left:10px;background:var(--st-hi);color:#fff;font-variant-numeric:tabular-nums}
.screen .st-out{right:10px;background:var(--st-ink);color:#fff}

.screen .st-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-variant-numeric:tabular-nums}
.screen .st-now{font-size:var(--t-md,var(--ds-fs-18));font-weight:800;color:var(--st-ink)}
.screen .st-now.sale{color:var(--st-hi)}
.screen .st-was{font-size:var(--t-sm,var(--ds-fs-14));color:var(--sub,#6b6b6b)}
.screen .st-price.big .st-now{font-size:var(--t-xl,26px)}
.screen .st-price.big .st-was{font-size:var(--t-md,17px)}
.screen .st-stock{margin:0;display:flex;align-items:center;gap:8px;font-size:var(--t-sm,var(--ds-fs-13));color:var(--sub,#6b6b6b)}
.screen .st-stock::before{content:"";width:8px;height:8px;border-radius:var(--ds-radius-circle);background:#1f7a4d;flex:0 0 auto}
.screen .st-stock.out::before{background:var(--sub,#9a9a9a)}

/* Dropdown */
.screen .st-opts{display:grid;gap:10px}
.screen .st-dd{position:relative;min-width:0}
.screen .st-dd-name{margin:0 0 6px;font-size:var(--t-2xs,var(--ds-fs-11));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub,#6b6b6b);line-height:1.35;overflow-wrap:anywhere}
.screen .st-dd-box{width:100%;min-height:46px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 14px;background:#fff;color:var(--st-ink);border:1.5px solid var(--st-line);border-radius:0;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease}
.screen .st-dd-box:hover{border-color:var(--st-ink)}
.screen .st-dd-box:focus-visible{outline:none;border-color:var(--st-hi);box-shadow:var(--ds-ring-line) var(--st-hi)}
.screen .st-dd.open .st-dd-box{border-color:var(--st-ink)}
.screen .st-dd.fixed .st-dd-box{cursor:default;background:var(--lockup,#f4f4f4);border-color:transparent}
.screen .st-dd-value{font-size:var(--t-sm,var(--ds-fs-14));font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen .st-dd-chev{width:12px;height:12px;transition:transform .15s ease}
.screen .st-dd.open .st-dd-chev{transform:rotate(180deg)}
.screen .st-dd-list{position:absolute;z-index:var(--ds-z-dropdown);left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px 0;list-style:none;background:#fff;border:1.5px solid var(--st-ink);box-shadow:var(--ds-shadow-4);max-height:280px;overflow:auto;min-width:min(240px,100%)}
.screen .st-dd-list li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-size:var(--t-sm,var(--ds-fs-14));color:var(--st-ink);outline:none}
.screen .st-dd-list li:hover,.screen .st-dd-list li:focus{background:var(--lockup,#f4f4f4)}
.screen .st-dd-list li[aria-selected="true"]{font-weight:700}
.screen .st-dd-mark{width:14px;height:14px;display:grid;place-items:center}
.screen .st-dd-list li[aria-selected="true"] .st-dd-mark::after{content:"";width:8px;height:8px;background:var(--st-hi)}
.screen .st-dd-meta{display:flex;gap:10px;align-items:baseline;font-size:var(--t-xs,var(--ds-fs-12));color:var(--sub,#6b6b6b);white-space:nowrap;font-variant-numeric:tabular-nums}
.screen .st-dd-meta b{color:var(--st-ink);font-weight:700}
.screen .st-dd-list li.na .st-dd-label{color:var(--sub,#6b6b6b);text-decoration:line-through;text-decoration-thickness:1px}

/* Buttons: black, the tenant's colour on hover */
.screen .st-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:auto;padding-top:4px}
.screen .st-actions .wide{grid-column:1/-1}
.screen .st-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 14px;border:1.5px solid var(--st-btn);border-radius:0;background:var(--st-btn);color:var(--st-btn-ink);font:inherit;font-size:var(--t-xs,12.5px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:center;line-height:1.2;transition:background-color .15s ease,border-color .15s ease}
.screen .st-btn:hover,.screen .st-btn:focus-visible{background:var(--st-hi);border-color:var(--st-hi);color:#fff}
.screen .st-btn:focus-visible{outline:2px solid var(--st-hi);outline-offset:2px}
.screen .st-btn[disabled]{background:var(--lockup,#f4f4f4);border-color:var(--st-line);color:var(--sub,#6b6b6b);cursor:not-allowed}
.screen .st-note{margin:0;font-size:var(--t-sm,var(--ds-fs-13));color:var(--st-ink)}

/* Notify Me When Available */
.screen .st-notify{display:grid;gap:8px;padding:14px;border:1.5px solid var(--st-ink);background:#fff;cursor:default}
.screen .st-notify p{margin:0;font-size:var(--t-sm,13.5px);color:var(--st-ink)}
.screen .st-notify .st-notify-what{font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.screen .st-notify label{font-size:var(--t-2xs,var(--ds-fs-11));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub,#6b6b6b)}
.screen .st-notify input{min-height:44px;min-width:0;padding:0 12px;border:1.5px solid var(--st-line);border-radius:0;font:inherit;font-size:var(--ds-fs-16);color:var(--st-ink);background:#fff}
.screen .st-notify input:focus{outline:none;border-color:var(--st-hi)}
.screen .st-notify .st-notify-err{color:var(--st-hi)}
.screen .st-notify .st-notify-ok{font-weight:700}

/* Store detail: photos beside the name, price, choices and buttons; the chapters run under both */
.screen .pc.store-detail{border:1.5px solid var(--st-ink)}
.screen .st-detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.screen[data-device="mobile"] .st-detail{grid-template-columns:minmax(0,1fr)}
@container (max-width:720px){.screen .st-detail{grid-template-columns:minmax(0,1fr)}}
.screen .st-detail.st-loading{min-height:360px;background:var(--lockup,#f4f4f4)}
.screen .st-gallery{display:grid;gap:10px;padding:18px;background:#fff;align-content:start;border-right:1px solid var(--st-line)}
.screen .st-hero{position:relative;aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;cursor:zoom-in}
.screen .st-hero img{width:100%;height:100%;object-fit:contain}
.screen .st-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.screen .st-thumb{flex:0 0 64px;height:64px;padding:4px;border:1.5px solid transparent;background:#fff;cursor:pointer}
.screen .st-thumb[aria-pressed="true"]{border-color:var(--st-ink)}
.screen .st-thumb img{width:100%;height:100%;object-fit:contain}
.screen .st-info{display:grid;gap:14px;align-content:start;padding:24px;min-width:0}
.screen .st-info .pc-name{overflow-wrap:anywhere}

.screen .chapters{border-top:1.5px solid var(--st-ink)}
.screen .chapters .ch{border-bottom:1px solid var(--st-line)}
.screen .chapters .ch:last-child{border-bottom:0}
.screen .chapters .ch-head{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) 24px;align-items:center;gap:8px;padding:16px 24px;background:none;border:0;color:var(--st-ink);font:inherit;text-align:left;cursor:pointer}
.screen .chapters .ch-head:focus-visible{outline:2px solid var(--st-hi);outline-offset:-2px}
.screen .chapters .ch-head .n{font-size:var(--t-xs,var(--ds-fs-12));font-weight:700;color:var(--sub,#6b6b6b);font-variant-numeric:tabular-nums}
.screen .chapters .ch-title{font-size:var(--t-sm,var(--ds-fs-15));font-weight:800;text-transform:uppercase;letter-spacing:.02em;transition:color .15s ease}
.screen .chapters .ch-head:hover .ch-title{color:var(--st-hi)}
.screen .chapters .ch-plus{position:relative;width:16px;height:16px;justify-self:end}
.screen .chapters .ch-plus::before,.screen .chapters .ch-plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .2s ease}
.screen .chapters .ch-plus::after{transform:rotate(90deg)}
.screen .chapters .ch.open .ch-plus::after{transform:rotate(0deg)}
.screen .chapters .ch-body{padding:0 24px 22px 72px}
.screen[data-device="mobile"] .chapters .ch-head{padding:14px 16px;grid-template-columns:32px minmax(0,1fr) 22px}
.screen[data-device="mobile"] .chapters .ch-body{padding:0 16px 18px}
@media (prefers-reduced-motion:reduce){.screen .st-btn,.screen .st-dd-box,.screen .chapters .ch-plus::before,.screen .chapters .ch-plus::after,.screen .card.store-card{transition:none}}

/* ===== Soft card family (look cards.design "soft", owner, 8 Nov 2026) =====
   The answer canvas Ryan approved on 8 Nov 2026, for every class: soft cards with no outline that lift on hover and line up across a
   row like facts; a detail that opens on its photo beside the name, then numbered chapters with plusses, plain white when open; video
   tiles; document cards with a viewer inside the answer; tables a visitor can search. The tenant's colours come from its branding:
   ink and buttons from --accent, the hover and sale colour from --brand-secondary. */
:root[data-look-cards="soft"] .screen{--sf-ink:var(--st-ink,#0f0f0f);--sf-hi:var(--st-hi,#d50032);--sf-line:#e3e3e3;--sf-tile:#f4f4f4;--sf-muted:var(--sub,#5f6b77)}
/* Sets: three across, rows as tall as their content, store cards sharing their rows (subgrid) */
:root[data-look-cards="soft"] .screen .set{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:20px;align-items:start}
:root[data-look-cards="soft"] .screen .set:has(> .card.store-card){row-gap:0}
@container answers (max-width:860px){:root[data-look-cards="soft"] .screen .set{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container answers (max-width:560px){:root[data-look-cards="soft"] .screen .set{grid-template-columns:minmax(0,1fr)}}
:root[data-look-cards="soft"] .screen[data-device="mobile"] .set{grid-template-columns:minmax(0,1fr)}
:root[data-look-cards="soft"] .screen .set > .card{height:auto}

/* Store card */
:root[data-look-cards="soft"] .screen article.card.store-card{grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:10px;margin-bottom:24px;padding:12px;border:1px solid var(--sf-line);border-radius:var(--ds-radius-14);background:#fff;box-shadow:none;transition:box-shadow .25s,transform .25s,border-color .25s;min-width:0;overflow:visible}
:root[data-look-cards="soft"] .screen article.card.store-card:hover,:root[data-look-cards="soft"] .screen article.card.store-card:focus-within{border-color:#d2d2d2;box-shadow:0 14px 34px rgba(0,0,0,.10);transform:translateY(-3px)}
:root[data-look-cards="soft"] .screen .card.store-card .st-body{display:contents}
:root[data-look-cards="soft"] .screen .card.store-card .media{position:relative;aspect-ratio:1/1;border-radius:var(--ds-radius-10);background:var(--sf-tile);overflow:hidden}
:root[data-look-cards="soft"] .screen .card.store-card .media img{width:100%;height:100%;object-fit:contain;padding:9%;mix-blend-mode:multiply}
:root[data-look-cards="soft"] .screen .card.store-card .cname{margin:0;min-height:0;font-size:var(--ds-fs-15);font-weight:600;line-height:1.35;text-transform:none;letter-spacing:0;color:var(--sf-ink);-webkit-line-clamp:3;overflow-wrap:anywhere}
:root[data-look-cards="soft"] .screen .card.store-card.st-loading{grid-row:span 6}
:root[data-look-cards="soft"] .screen .st-save,:root[data-look-cards="soft"] .screen .st-out{top:10px;border-radius:var(--ds-radius-pill);padding:4px 10px;font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;z-index:var(--ds-z-top)}
:root[data-look-cards="soft"] .screen .st-now{font-size:var(--ds-fs-18);font-weight:700}
:root[data-look-cards="soft"] .screen .st-was{font-size:var(--ds-fs-13);color:var(--sf-muted)}
:root[data-look-cards="soft"] .screen .st-price.big .st-now{font-size:26px}
:root[data-look-cards="soft"] .screen .st-price.big .st-was{font-size:var(--ds-fs-15)}
/* Sold out: the photo softly greys, the tag stays in its corner, hover brings the colour back */
:root[data-look-cards="soft"] .screen .media:has(> .st-out) img,:root[data-look-cards="soft"] .screen .st-hero:has(> .st-out) img{filter:grayscale(.85);opacity:.6;transition:filter .25s ease,opacity .25s ease}
:root[data-look-cards="soft"] .screen .media:has(> .st-out)::after,:root[data-look-cards="soft"] .screen .st-hero:has(> .st-out)::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.18);pointer-events:none;z-index:var(--ds-z-lift);transition:opacity .25s ease}
:root[data-look-cards="soft"] .screen .card.store-card:hover .media img,:root[data-look-cards="soft"] .screen .st-hero:hover img{filter:none;opacity:1}
:root[data-look-cards="soft"] .screen .card.store-card:hover .media::after,:root[data-look-cards="soft"] .screen .st-hero:hover::after{opacity:0}
/* Choices: one line each, the name hidden on the card and shown above the picker in the detail */
:root[data-look-cards="soft"] .screen .card.store-card .st-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;min-width:0}
:root[data-look-cards="soft"] .screen .card.store-card .st-dd-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
:root[data-look-cards="soft"] .screen .st-dd-box{min-height:40px;height:40px;padding:0 10px;gap:8px;border:1px solid var(--sf-line);border-radius:var(--ds-radius-10);font-size:var(--ds-fs-13)}
:root[data-look-cards="soft"] .screen .st-dd-box:hover,:root[data-look-cards="soft"] .screen .st-dd.open .st-dd-box{border-color:var(--sf-ink)}
:root[data-look-cards="soft"] .screen .st-dd.fixed .st-dd-box{background:var(--sf-tile);border-color:var(--sf-tile)}
:root[data-look-cards="soft"] .screen .st-dd-value{font-size:var(--ds-fs-13);font-weight:600}
:root[data-look-cards="soft"] .screen .st-dd-chev{width:10px;height:10px}
:root[data-look-cards="soft"] .screen .st-dd-list{padding:6px;border:1px solid var(--sf-line);border-radius:var(--ds-radius-10);box-shadow:0 12px 28px rgba(0,0,0,.14);max-height:162px;min-width:200px;overscroll-behavior:contain}
:root[data-look-cards="soft"] .screen .st-dd-list li{min-height:34px;padding:7px 10px;border-radius:7px;font-size:var(--ds-fs-13);line-height:1.3;grid-template-columns:0 minmax(0,1fr) auto;gap:10px}
/* The open list (owner, 9 Nov 2026): hover is a light grey row; the chosen row is white, bold, with a tick in the brand colour, so
   the two never look alike. Keyboard focus shows as an inset ring, never as the hover fill. */
:root[data-look-cards="soft"] .screen .st-dd-list li{grid-template-columns:minmax(0,1fr) auto 14px}
:root[data-look-cards="soft"] .screen .st-dd-list li .st-dd-mark{order:3}
:root[data-look-cards="soft"] .screen .st-dd-list li:focus{background:transparent}
:root[data-look-cards="soft"] .screen .st-dd-list li:hover{background:var(--sf-tile)}
:root[data-look-cards="soft"] .screen .st-dd-list li:focus-visible{box-shadow:inset var(--ds-ring-line) #9a9a9a}
:root[data-look-cards="soft"] .screen .st-dd-list li[aria-selected="true"]{background:transparent;font-weight:700}
:root[data-look-cards="soft"] .screen .st-dd-list li[aria-selected="true"]:hover{background:var(--sf-tile)}
:root[data-look-cards="soft"] .screen .st-dd-list li[aria-selected="true"] .st-dd-mark::after{display:block;content:"";width:5px;height:9px;background:none;border:solid var(--sf-hi);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
:root[data-look-cards="soft"] .screen .card.store-card:has(.st-dd.open){z-index:var(--ds-z-dropdown-host)}
/* Buttons: black, rounded, the tenant's colour on hover */
:root[data-look-cards="soft"] .screen .st-actions{margin:0;padding:0;gap:8px}
:root[data-look-cards="soft"] .screen .st-actions.empty,:root[data-look-cards="soft"] .screen .st-extra.empty,:root[data-look-cards="soft"] .screen .st-opts.empty{min-height:0}
:root[data-look-cards="soft"] .screen .st-btn{min-height:44px;border:0;border-radius:var(--ds-radius-10);background:var(--sf-ink);color:#fff;font-size:var(--ds-fs-13);font-weight:700;letter-spacing:0;text-transform:none;transition:background .15s}
:root[data-look-cards="soft"] .screen .st-btn:hover,:root[data-look-cards="soft"] .screen .st-btn:focus-visible{background:var(--sf-hi);color:#fff}
:root[data-look-cards="soft"] .screen .st-btn.ghost{background:#fff;color:var(--sf-ink);box-shadow:inset var(--ds-ring-line) var(--sf-line)}
:root[data-look-cards="soft"] .screen .st-btn.ghost:hover{background:#fff;color:var(--sf-ink);box-shadow:inset var(--ds-ring-line) var(--sf-ink)}
:root[data-look-cards="soft"] .screen .st-notify{gap:8px;padding:12px;border:1px solid var(--sf-line);border-radius:var(--ds-radius-12)}
:root[data-look-cards="soft"] .screen .st-notify input{min-height:40px;border:1px solid var(--sf-line);border-radius:var(--ds-radius-8)}
:root[data-look-cards="soft"] .screen .st-notify input:focus{border-color:var(--sf-ink)}
:root[data-look-cards="soft"] .screen .st-notify .st-btn{min-height:40px}

/* Detail: soft panel, photo beside the name, chapters under both */
:root[data-look-cards="soft"] .screen .pc.soft-detail,:root[data-look-cards="soft"] .screen.live[data-device="desktop"] .pc.soft-detail{width:100%;max-width:100%}
:root[data-look-cards="soft"] .screen .pc.soft-detail{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;border:0;border-radius:18px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.08);overflow:visible}
:root[data-look-cards="soft"] .screen .detail-view .pc-back{display:none}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-x{position:absolute;top:12px;right:12px;z-index:var(--ds-z-over);width:36px;height:36px;border:0;border-radius:var(--ds-radius-pill);background:#fff;box-shadow:var(--ds-ring-line) var(--sf-line);cursor:pointer;font-size:var(--ds-fs-18);line-height:1;color:var(--sf-ink)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-x:hover{box-shadow:var(--ds-ring-line) var(--sf-ink)}
/* The close control is drawn as on develop in every look; only its invisible tap area is added (the tap areas rule, shell.css). The
   plain strip sits at the top of the card, which clips above it, so there its area reaches down. */
:root:not([data-look-cards="soft"]) .screen .pc .dt-x::before{top:0;bottom:min(0px,calc(100% - var(--tap)))}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-top,:root[data-look-cards="soft"] .screen .pc.soft-detail .st-detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
:root[data-look-cards="soft"] .screen[data-device="mobile"] .pc.soft-detail .dt-top,:root[data-look-cards="soft"] .screen[data-device="mobile"] .pc.soft-detail .st-detail{grid-template-columns:minmax(0,1fr)}
@container answers (max-width:760px){:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-top,:root[data-look-cards="soft"] .screen .pc.soft-detail .st-detail{grid-template-columns:minmax(0,1fr)}}
:root[data-look-cards="soft"] .screen .pc.soft-detail > *{min-width:0}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-gal,:root[data-look-cards="soft"] .screen .pc.soft-detail .st-gallery{display:grid;gap:10px;padding:18px;align-content:start;border:0;background:none}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-hero,:root[data-look-cards="soft"] .screen .pc.soft-detail .st-hero{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border-radius:var(--ds-radius-12);background:var(--sf-tile)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-hero img,:root[data-look-cards="soft"] .screen .pc.soft-detail .st-hero img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-hero.photo{aspect-ratio:4/3}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-hero.photo.soft-person{aspect-ratio:3/4;max-height:520px;background:#111}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-hero.photo img{object-fit:cover;padding:0;mix-blend-mode:normal}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-hero.photo.soft-person img{object-position:top}
:root[data-look-cards="soft"] .screen .pc.soft-detail .hcount{position:absolute;right:10px;bottom:10px;z-index:var(--ds-z-top)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-thumb{border-radius:var(--ds-radius-8);border:1px solid transparent}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-thumb[aria-pressed="true"]{border-color:var(--sf-ink)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-info,:root[data-look-cards="soft"] .screen .pc.soft-detail .st-info{position:relative;display:grid;gap:14px;align-content:start;padding:28px 24px 24px;min-width:0}
:root[data-look-cards="soft"] .screen .pc.soft-detail .dt-info .pc-name,:root[data-look-cards="soft"] .screen .pc.soft-detail .st-info .pc-name{margin:0;padding-right:36px;font-size:var(--ds-fs-24);font-weight:600;line-height:1.2;text-transform:none;letter-spacing:0;color:var(--sf-ink);overflow-wrap:anywhere}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-kind,:root[data-look-cards="soft"] .screen .soft-card .eb,:root[data-look-cards="soft"] .screen .pc.soft-detail .eb{font-size:var(--ds-fs-11);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sf-hi)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .meta,:root[data-look-cards="soft"] .screen .soft-card .meta{font-size:12.5px;color:var(--sf-muted)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .lede{margin:0;font-size:14.5px;line-height:1.6;color:#333}
:root[data-look-cards="soft"] .screen .pc.soft-detail .pairs,:root[data-look-cards="soft"] .screen .thit .pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
:root[data-look-cards="soft"] .screen .pc.soft-detail .pairs div,:root[data-look-cards="soft"] .screen .thit .pairs div{border-left:3px solid var(--sf-hi);padding-left:10px}
:root[data-look-cards="soft"] .screen .pc.soft-detail .pairs b,:root[data-look-cards="soft"] .screen .thit .pairs b{display:block;font-size:var(--ds-fs-13)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .pairs span,:root[data-look-cards="soft"] .screen .thit .pairs span{color:var(--sf-muted);font-size:13.5px}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-dd-name{margin:0 0 5px;font-size:10.5px}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-actions{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-actions .wide{grid-column:auto}
:root[data-look-cards="soft"] .screen .pc.soft-detail .st-info:has(.st-dd.open){z-index:var(--ds-z-dropdown-host)}
/* Chapters: numbered rows with plusses, a hairline between, plain white when open */
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters{padding:4px 8px 10px;border:0}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch{border:0;border-top:1px solid var(--sf-line);background:#fff}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch.open{background:#fff}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-head{grid-template-columns:40px minmax(0,1fr) 22px;padding:16px;background:none}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-title{font-size:var(--ds-fs-15);font-weight:600;text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-head:hover .ch-title{color:var(--sf-hi)}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-body{padding:0 16px 22px 64px;background:#fff;font-size:var(--ds-fs-14);line-height:1.6;min-width:0}
:root[data-look-cards="soft"] .screen[data-device="mobile"] .pc.soft-detail .chapters .ch-body{padding:0 14px 18px}
@container answers (max-width:560px){:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-body{padding:0 14px 18px}:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-head{padding:14px;grid-template-columns:30px minmax(0,1fr) 22px}}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-body .prose{max-width:74ch}
:root[data-look-cards="soft"] .screen .pc.soft-detail .chapters .ch-body .prose:has(.md-table){max-width:none}
:root[data-look-cards="soft"] .screen .pc.soft-detail .cta-stack,:root[data-look-cards="soft"] .screen .pc.soft-detail > .cta-bar{margin:0 24px 24px}

/* Soft cards for every other class */
:root[data-look-cards="soft"] .screen .soft-card{display:grid;gap:8px;align-content:start;padding:12px;border:0;border-radius:var(--ds-radius-14);background:#fff;box-shadow:none;transition:box-shadow .25s,transform .25s;min-width:0;text-align:left;height:auto}
:root[data-look-cards="soft"] .screen .soft-card[role="button"]{cursor:pointer}
:root[data-look-cards="soft"] .screen .soft-card[role="button"]:hover,:root[data-look-cards="soft"] .screen .soft-card[role="button"]:focus-visible{box-shadow:0 14px 34px rgba(0,0,0,.10);transform:translateY(-3px)}
:root[data-look-cards="soft"] .screen .soft-card .ph{position:relative;border-radius:var(--ds-radius-10);overflow:hidden;background:var(--sf-tile);aspect-ratio:3/2}
:root[data-look-cards="soft"] .screen .soft-card .ph img{width:100%;height:100%;object-fit:cover}
:root[data-look-cards="soft"] .screen .soft-card .ph.contain{aspect-ratio:1/1}
:root[data-look-cards="soft"] .screen .soft-card .ph.contain img{object-fit:contain;padding:8%;mix-blend-mode:multiply}
:root[data-look-cards="soft"] .screen .soft-article .ph{aspect-ratio:16/10}
:root[data-look-cards="soft"] .screen .soft-person .ph{aspect-ratio:3/4;background:#111}
:root[data-look-cards="soft"] .screen .soft-person .ph img{object-position:top}
:root[data-look-cards="soft"] .screen .soft-card .flag{position:absolute;right:10px;top:10px;padding:3px 8px;border-radius:var(--ds-radius-pill);background:#fff;font-size:var(--ds-fs-11);font-weight:700;color:var(--sf-ink)}
:root[data-look-cards="soft"] .screen .soft-card h4{margin:0;font-size:var(--ds-fs-15);font-weight:600;line-height:1.35;text-transform:none;letter-spacing:0;color:var(--sf-ink);overflow-wrap:anywhere}
:root[data-look-cards="soft"] .screen .soft-card h4.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:root[data-look-cards="soft"] .screen .soft-logo{justify-items:center;gap:10px;padding:16px 12px;box-shadow:var(--ds-ring-line) var(--sf-line);cursor:default}
:root[data-look-cards="soft"] .screen .soft-logo .lg{height:56px;width:100%;display:grid;place-items:center}
:root[data-look-cards="soft"] .screen .soft-logo .lg img{max-height:56px;max-width:80%;object-fit:contain}
:root[data-look-cards="soft"] .screen .soft-logo .lg-line{font-size:var(--ds-fs-12);color:var(--sf-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-look-cards="soft"] .screen .set:has(> .soft-logo){grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
:root[data-look-cards="soft"] .screen .soft-offer{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:center;padding:14px;box-shadow:var(--ds-ring-line) var(--sf-line);grid-column:1/-1}
:root[data-look-cards="soft"] .screen[data-device="mobile"] .soft-offer{grid-template-columns:minmax(0,1fr)}
@container answers (max-width:760px){:root[data-look-cards="soft"] .screen .soft-offer{grid-template-columns:minmax(0,1fr)}}
:root[data-look-cards="soft"] .screen .soft-offer .ph{aspect-ratio:2/1}
:root[data-look-cards="soft"] .screen .soft-offer .tx{display:grid;gap:10px;justify-items:start}
:root[data-look-cards="soft"] .screen .soft-offer h4{font-size:var(--ds-fs-20);font-weight:700;line-height:1.25}
:root[data-look-cards="soft"] .screen .soft-offer p{margin:0;color:var(--sf-muted)}
:root[data-look-cards="soft"] .screen .soft-offer .pill{display:inline-flex;padding:4px 10px;border-radius:var(--ds-radius-pill);background:var(--sf-tile);font-size:var(--ds-fs-12);font-weight:600}
:root[data-look-cards="soft"] .screen .soft-card .buy,:root[data-look-cards="soft"] .screen .docs .buy{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;border-radius:var(--ds-radius-10);background:var(--sf-ink);color:#fff;font:inherit;font-size:var(--ds-fs-13);font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s}
:root[data-look-cards="soft"] .screen .soft-card .buy:hover,:root[data-look-cards="soft"] .screen .docs .buy:hover{background:var(--sf-hi);color:#fff}
:root[data-look-cards="soft"] .screen .docs .buy.ghost{background:#fff;color:var(--sf-ink);box-shadow:inset var(--ds-ring-line) var(--sf-line)}
:root[data-look-cards="soft"] .screen .docs .buy.ghost:hover{background:#fff;color:var(--sf-ink);box-shadow:inset var(--ds-ring-line) var(--sf-ink)}

/* Video tile: plays in place */
:root[data-look-cards="soft"] .screen .rset.videos{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
:root[data-look-cards="soft"] .screen .vc,:root[data-look-cards="soft"] .screen .vc.p-resource{display:grid;gap:10px;margin:0;min-width:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
:root[data-look-cards="soft"] .screen .vc .vt{position:relative;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--ds-radius-12);overflow:hidden;background:#000;cursor:pointer}
:root[data-look-cards="soft"] .screen .vc .vt img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
:root[data-look-cards="soft"] .screen .vc .vt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
:root[data-look-cards="soft"] .screen .vc .vt:hover img{transform:scale(1.03)}
:root[data-look-cards="soft"] .screen .vc .pl{position:absolute;left:50%;top:50%;z-index:var(--ds-z-lift);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:var(--ds-radius-pill);background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:background .15s,transform .15s}
:root[data-look-cards="soft"] .screen .vc .pl svg{width:22px;height:22px;margin-left:4px;fill:var(--sf-ink)}
:root[data-look-cards="soft"] .screen .vc .vt:hover .pl{background:var(--sf-hi);transform:scale(1.06)}
:root[data-look-cards="soft"] .screen .vc .vt:hover .pl svg{fill:#fff}
:root[data-look-cards="soft"] .screen .vc .yt{position:absolute;left:12px;bottom:10px;z-index:var(--ds-z-lift);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
:root[data-look-cards="soft"] .screen .vc iframe,:root[data-look-cards="soft"] .screen .vc video{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--ds-radius-12);background:#000}
:root[data-look-cards="soft"] .screen .vc figcaption h5{margin:0;font-size:14.5px;font-weight:600;line-height:1.35}

/* Document card and the viewer inside the answer */
:root[data-look-cards="soft"] .screen .docs{display:grid;gap:12px}
:root[data-look-cards="soft"] .screen .doc-wrap{display:grid;gap:14px;min-width:0}
:root[data-look-cards="soft"] .screen .doc{display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;align-items:center;max-width:560px;padding:14px;border-radius:var(--ds-radius-14);background:#fff;box-shadow:var(--ds-ring-line) var(--sf-line);min-width:0}
@container answers (max-width:420px){:root[data-look-cards="soft"] .screen .doc{grid-template-columns:88px minmax(0,1fr);gap:14px}}
:root[data-look-cards="soft"] .screen .doc .pg{padding:0;border:0;border-radius:var(--ds-radius-4);overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 18px rgba(0,0,0,.12);cursor:pointer}
:root[data-look-cards="soft"] .screen .doc .pg:hover{box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 24px rgba(0,0,0,.2)}
:root[data-look-cards="soft"] .screen .doc .pg img{display:block;width:100%;height:auto}
:root[data-look-cards="soft"] .screen .doc .pg.blank{aspect-ratio:3/4;display:grid;place-items:center;font-weight:800;color:var(--sf-muted)}
:root[data-look-cards="soft"] .screen .doc .info{display:grid;gap:8px;min-width:0}
:root[data-look-cards="soft"] .screen .doc .ft{justify-self:start;padding:3px 8px;border-radius:var(--ds-radius-6);background:var(--sf-hi);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em}
:root[data-look-cards="soft"] .screen .doc h4{margin:0;font-size:var(--ds-fs-16);font-weight:600;line-height:1.3;text-transform:none;letter-spacing:0}
:root[data-look-cards="soft"] .screen .doc .meta{font-size:12.5px;color:var(--sf-muted)}
:root[data-look-cards="soft"] .screen .doc .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
:root[data-look-cards="soft"] .screen .doc .acts .buy{min-height:40px}
:root[data-look-cards="soft"] .screen .viewer-in{display:grid;border-radius:var(--ds-radius-16);overflow:hidden;background:#2b2f33;min-width:0}
:root[data-look-cards="soft"] .screen .viewer-in .vbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;background:#1d2024;color:#fff;font-size:var(--ds-fs-13)}
:root[data-look-cards="soft"] .screen .viewer-in .vbar b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-look-cards="soft"] .screen .viewer-in .vbar .sp{flex:1}
:root[data-look-cards="soft"] .screen .viewer-in .vbar a,:root[data-look-cards="soft"] .screen .viewer-in .vbar button{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:0;border-radius:var(--ds-radius-8);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer}
:root[data-look-cards="soft"] .screen .viewer-in .vbar a:hover,:root[data-look-cards="soft"] .screen .viewer-in .vbar button:hover{background:var(--sf-hi)}
:root[data-look-cards="soft"] .screen .viewer-in .vpages{display:grid;gap:16px;justify-items:center;padding:20px;max-height:640px;overflow-y:auto}
:root[data-look-cards="soft"] .screen .viewer-in .vpages img,:root[data-look-cards="soft"] .screen .viewer-in .vpages .viewer-pdfpage{width:100%;max-width:560px;height:auto;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}
:root[data-look-cards="soft"] .screen .viewer-in .vpages .more,:root[data-look-cards="soft"] .screen .viewer-in .viewer-status{margin:0;color:#fff;text-align:center;font-size:13.5px}
:root[data-look-cards="soft"] .screen .viewer-in .vtext{padding:20px;background:#fff}

/* Tables, searchable tables, compare */
:root[data-look-cards="soft"] .screen .md-table{overflow-x:auto;max-width:100%}
:root[data-look-cards="soft"] .screen .md-table table{border-collapse:collapse;width:100%;font-size:var(--ds-fs-13)}
:root[data-look-cards="soft"] .screen .md-table th,:root[data-look-cards="soft"] .screen .md-table td{padding:8px 10px;border-bottom:1px solid var(--sf-line);text-align:left;vertical-align:top}
:root[data-look-cards="soft"] .screen .md-table th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--sf-ink);white-space:nowrap}
:root[data-look-cards="soft"] .screen .tsearch{display:grid;gap:10px}
:root[data-look-cards="soft"] .screen .tsearch input{height:42px;max-width:300px;padding:0 12px;border:1px solid var(--sf-line);border-radius:var(--ds-radius-10);font:inherit;font-size:var(--ds-fs-16)}
:root[data-look-cards="soft"] .screen .tsearch input:focus{outline:none;border-color:var(--sf-ink)}
:root[data-look-cards="soft"] .screen .md-table tr.hit td{background:#f0f8f3}
:root[data-look-cards="soft"] .screen .thit .meta{margin:0;font-size:12.5px;color:var(--sf-muted)}
:root[data-look-cards="soft"] .screen .v2-comparison,:root[data-look-cards="soft"] .screen .compare-wrap{border-radius:var(--ds-radius-14);box-shadow:var(--ds-ring-line) var(--sf-line);background:#fff;overflow-x:auto}

/* Forms */
:root[data-look-cards="soft"] .screen .frm{max-width:560px;padding:20px;border-radius:var(--ds-radius-14);background:#fff;box-shadow:var(--ds-ring-line) var(--sf-line)}
:root[data-look-cards="soft"] .screen .frm input,:root[data-look-cards="soft"] .screen .frm textarea,:root[data-look-cards="soft"] .screen .frm select{border:1px solid var(--sf-line);border-radius:var(--ds-radius-10)}
:root[data-look-cards="soft"] .screen .frm input:focus,:root[data-look-cards="soft"] .screen .frm textarea:focus{border-color:var(--sf-ink);outline:none}
:root[data-look-cards="soft"] .screen .frm button[type="submit"]{border:0;border-radius:var(--ds-radius-10);background:var(--sf-ink);color:#fff}
:root[data-look-cards="soft"] .screen .frm button[type="submit"]:hover{background:var(--sf-hi)}

/* Cart card */
.screen .st-cart{display:grid;max-width:560px;border-radius:var(--ds-radius-14);background:#fff;box-shadow:var(--ds-ring-line) var(--st-line,#e3e3e3);overflow:hidden}
.screen .st-cart-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--st-line,#e3e3e3);font-size:var(--ds-fs-15)}
.screen .st-cart-head span{font-size:12.5px;color:var(--sub,#5f6b77)}
.screen .st-cart-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--st-line,#e3e3e3)}
.screen .st-cart-pic{aspect-ratio:1/1;border-radius:var(--ds-radius-10);background:var(--lockup,#f4f4f4);overflow:hidden}
.screen .st-cart-pic img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply}
.screen .st-cart-name{margin:0 0 4px;font-size:var(--ds-fs-14);font-weight:600;line-height:1.3}
.screen .st-cart-opt{margin:0;font-size:12.5px;color:var(--sub,#5f6b77)}
.screen .st-qty{display:inline-flex;align-items:center;margin-top:6px;border:1px solid var(--st-line,#e3e3e3);border-radius:var(--ds-radius-8)}
.screen .st-qty button{width:30px;height:30px;border:0;background:none;font-size:var(--ds-fs-16);cursor:pointer;color:inherit}
.screen .st-qty span{min-width:22px;text-align:center;font-weight:700;font-size:var(--ds-fs-13)}
.screen .st-cart-total{display:flex;justify-content:space-between;padding:14px 16px 6px;font-weight:700}
.screen .st-cart-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 16px 16px}
.screen .st-cart-acts .st-btn{border-radius:var(--ds-radius-10)}
.screen .st-cart-acts .st-btn.ghost{background:#fff;color:var(--st-ink);border-color:var(--st-line,#e3e3e3)}