/* Generated by bin/build-files-skills from shared/ui/index.css. Do not edit. */
@font-face { font-family: "Aime"; src: url("/fonts/aime-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Aime"; src: url("/fonts/aime-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("/fonts/melange-grotesk-350.ttf") format("truetype"); font-weight: 350; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("/fonts/melange-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("/fonts/melange-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("/fonts/melange-grotesk-600.otf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Aime"; src: url("/fonts/aime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
:root {
    --ds-page: #fbfaf9;
    --ds-raised: #f4efec;
    --ds-white: #ffffff;
    --ds-ink: #251f21;
    --ds-ink-2: #585254;
    --ds-ink-3: #969394;
    --ds-ink-4: #c0bebf;
    --ds-hairline: #eae9ea;
    --ds-teal: #73a89a;
    --ds-red: #ed313e;
    --ds-red-border: rgb(245 170 174);
    --ds-hover: color-mix(in srgb, #251f21 5%, transparent);
    --ds-hover-strong: color-mix(in srgb, #251f21 10%, transparent);
    --ds-hover-red: color-mix(in srgb, #ed313e 5%, transparent);
    --ds-scrim: rgb(46 39 41 / 0.45);
    --ds-shadow-control: 0 1px 2px color-mix(in srgb, #251f21 5%, transparent);
    --ds-shadow-modal: 0 30px 70px rgb(46 39 41 / 0.28);
    --ds-font-display: "Aime", Georgia, serif;
    --ds-font-text: "KMR Melange Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.box-border{box-sizing:border-box}.flex{display:flex}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[52px\]{height:52px}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.flex-none{flex:none}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.border{border-width:1px}.border-0{border-width:0}.border-border{border-color:hsl(var(--border))}.border-destructive\/40{border-color:hsl(var(--destructive)/.4)}.border-ds-hairline{border-color:var(--ds-hairline)}.border-ds-ink{border-color:var(--ds-ink)}.border-ds-redBorder{border-color:var(--ds-red-border)}.border-ds-teal{border-color:var(--ds-teal)}.border-transparent{border-color:transparent}.bg-card{background-color:hsl(var(--card))}.bg-destructive\/10{background-color:hsl(var(--destructive)/.1)}.bg-ds-ink{background-color:var(--ds-ink)}.bg-ds-white{background-color:var(--ds-white)}.bg-foreground{background-color:hsl(var(--foreground))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-transparent{background-color:transparent}.p-2{padding:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.font-text{font-family:KMR Melange Grotesk,-apple-system,Helvetica Neue,Arial,sans-serif}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-sm{font-size:.8125rem}.text-sm,.text-xs{line-height:1.5}.text-xs{font-size:.75rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.leading-none{line-height:1}.tracking-\[-0\.01em\]{letter-spacing:-.01em}.text-background{color:hsl(var(--background))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-destructive{color:hsl(var(--destructive))}.text-ds-ink{color:var(--ds-ink)}.text-ds-page{color:var(--ds-page)}.text-ds-red{color:var(--ds-red)}.text-ds-teal{color:var(--ds-teal)}.text-textPrimary{color:var(--text-primary)}.text-textSecondary{color:var(--text-secondary)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline-offset-4{text-underline-offset:4px}.shadow-ds-control{--tw-shadow:var(--ds-shadow-control);--tw-shadow-colored:var(--ds-shadow-control)}.shadow-ds-control,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.transition-\[background-color\2c border-color\2c color\2c transform\]{transition-property:background-color,border-color,color,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.\[transition-duration\:120ms\]{transition-duration:.12s}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-\[1\.02\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.hover\:bg-destructive\/20:hover{background-color:hsl(var(--destructive)/.2)}.hover\:bg-destructive\/5:hover{background-color:hsl(var(--destructive)/.05)}.hover\:bg-ds-hover:hover{background-color:var(--ds-hover)}.hover\:bg-foreground\/90:hover{background-color:hsl(var(--foreground)/.9)}.hover\:bg-muted:hover{background-color:hsl(var(--muted))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary)/.8)}.hover\:text-textPrimary:hover{color:var(--text-primary)}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-ds-ink4:focus-visible{--tw-ring-color:var(--ds-ink-4)}.focus-visible\:ring-ring\/40:focus-visible{--tw-ring-color:hsl(var(--ring)/0.4)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\:scale-100:active{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:bg-ds-hoverStrong:active{background-color:var(--ds-hover-strong)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:scale-100:disabled{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:border-ds-hairline:disabled{border-color:var(--ds-hairline)}.disabled\:bg-transparent:disabled{background-color:transparent}.disabled\:text-ds-ink4:disabled{color:var(--ds-ink-4)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media not all and (min-width:768px){.max-md\:flex{display:flex}.max-md\:h-\[52px\]{height:52px}.max-md\:w-full{width:100%}.max-md\:rounded-lg{border-radius:var(--radius)}.max-md\:text-\[15px\]{font-size:15px}.max-md\:hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width:768px){.md\:px-4{padding-left:1rem;padding-right:1rem}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:h-4 svg{height:1rem}.\[\&_svg\]\:w-4 svg{width:1rem}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}
/* Files component library. Consumes the --ds-* tokens and brand @font-face
   rules from shared/ui/index.css. */
:root {
    --file-shadow: 0 1px 2px rgb(37 31 33 / 6%), 0 6px 18px rgb(37 31 33 / 5%);
    --file-pad-x: 24px;
    /* One column width for every label-and-value grid: comparison tables and Facts. */
    --file-col: 200px;
    /* A comparison column needs room for a photo; a narrower table stretches to fill instead. */
    --file-product-col: 300px;
    /* Two steps of the text scale: body, and the smaller size for captions and secondary lines. */
    --file-text: 14px;
    --file-small: 12px;
    /* How long a stateful button takes to roll to its next state; ROLL_MS in controls.tsx matches it. */
    --file-button-roll: 320ms;
    /* Running low is the one warning the design tokens have no colour for. */
    --file-low-stock: #d59b53;
}

.file-ground {
    box-sizing: border-box;
    min-height: 100%;
    padding: 24px 16px;
    background: var(--ds-raised);
    color: var(--ds-ink);
    font-family: var(--ds-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

.file-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px var(--file-pad-x);
    background: var(--ds-page);
    color: var(--ds-ink);
    display: flex;
    flex-direction: column;
    gap: 48px;
    font-family: var(--ds-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
}

.file-card[data-width="phone"] { max-width: 390px; }
.file-ground .file-card { border-radius: 24px; box-shadow: var(--file-shadow); }
.file-card > * { min-width: 0; }
.file-card a { color: var(--ds-ink); }
.file-card :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

.file-strong { font-weight: 600; }
.file-secondary { color: var(--ds-ink-2); }
.file-known { color: var(--ds-teal); font-weight: 600; }
.file-unavailable { color: var(--ds-ink-4); text-decoration: line-through; }
.file-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header */
.file-header { display: flex; flex-direction: column; gap: 24px; }
.file-title {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.file-fact { margin: 0; color: var(--ds-ink-2); font-weight: 400; }
.file-fact.is-known { color: var(--ds-teal); font-weight: 600; }
.file-intro { margin: 12px 0 0; line-height: 24px; text-wrap: pretty; }

/* Group */
.file-group { display: flex; flex-direction: column; gap: 24px; }
.file-group-label { margin: 0; font: inherit; color: var(--ds-ink-2); }
.file-group-heading {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* Rows */
.file-rows { display: flex; flex-direction: column; }
.file-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-row:last-child { border-bottom: 0; }
.file-row-slot { flex: none; width: 40px; height: 40px; border-radius: 3px; background: var(--ds-raised); overflow: hidden; }
.file-row-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-row-slot.is-number { width: 24px; height: auto; background: none; color: var(--ds-ink-2); }
.file-row-slot.is-number::after, .file-step-n::after { content: "."; }
.file-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.file-row-detail { color: var(--ds-ink-2); }
.file-row-value { flex: none; font-weight: 600; text-align: right; }

/* Facts */
.file-facts { display: flex; flex-direction: column; margin: 0; }
.file-facts > div { display: grid; grid-template-columns: min(var(--file-col), 38%) minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-facts > div:last-child { border-bottom: 0; }
.file-facts dt { color: var(--ds-ink-2); padding-right: 16px; }
.file-facts dd { margin: 0; }

/* Text */
.file-text { display: flex; flex-direction: column; gap: 32px; }
.file-heading { display: flex; flex-direction: column; }
.file-p { margin: 0; line-height: 24px; text-wrap: pretty; }
.file-bullets { margin: 0; padding: 0 0 0 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; line-height: 24px; }
.file-bullets li { display: list-item; padding-left: 2px; }
.file-bar { position: relative; padding-left: 16px; }
.file-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--ds-hairline); }
.file-key { margin: 0; font-weight: 600; line-height: 24px; }
.file-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.file-figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: var(--ds-raised); }
.file-caption, .file-figure figcaption { margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; text-wrap: pretty; }
/* A caption right after a strip, chart or table sits 12px below it, like a figure's caption, instead of a full group gap away. */
.file-photos + .file-caption { margin-top: 12px; }
.file-card > .file-photos + .file-caption { margin-top: -36px; }
.file-text > .file-photos + .file-caption { margin-top: -20px; }
.file-group > .file-photos + .file-caption, .file-chart + .file-caption, .file-table-scroll + .file-caption { margin-top: -12px; }
.file-rule { margin: 8px 0; border: 0; height: 1px; background: var(--ds-hairline); }
.file-link { color: var(--ds-ink); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ds-ink-4); }
.file-link:hover { text-decoration-color: currentColor; }

/* Callout */
.file-callout { display: flex; flex-direction: column; gap: 4px; text-wrap: pretty; }
.file-callout[data-tone="warning"] { padding: 16px; border-radius: 8px; background: var(--ds-raised); color: var(--ds-ink); }
.file-callout[data-tone="warning"]::before { display: none; }
.file-callout[data-tone="danger"] { color: var(--ds-red); }
.file-callout[data-tone="danger"]::before { background: var(--ds-red); }

/* Numbered list */
.file-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.file-steps li { display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); text-wrap: pretty; }
.file-steps li:last-child { border-bottom: 0; }
.file-steps li > span:last-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.file-step-n { flex: none; width: 24px; color: var(--ds-ink-2); }

/* Table */
.file-table-scroll { position: relative; overflow-x: auto; margin-inline: calc(-1 * var(--file-pad-x)); padding-inline: var(--file-pad-x) 0; scroll-padding-inline: var(--file-pad-x) 0; }
.file-table { table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.file-table th, .file-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ds-hairline); text-align: left; vertical-align: top; font-weight: 350; overflow-wrap: anywhere; }
.file-table tbody tr:last-child th, .file-table tbody tr:last-child td { border-bottom: 0; }
.file-table thead th { padding-top: 0; }
.file-table thead th .file-secondary { margin-left: 8px; }
.file-table tbody th { color: var(--ds-ink-2); }
.file-table td.is-best, .file-table td.file-product-price { font-weight: 600; }
.file-table.is-products { font-variant-numeric: normal; }
.file-table.is-products thead th { padding-bottom: 20px; vertical-align: top; }
.file-cell-label { display: block; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; font-weight: 350; }
.file-product-head { display: flex; flex-direction: column; }
.file-product-head-photo { position: relative; display: block; margin-bottom: 12px; }
.file-product-head-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--ds-raised); }
.file-product-head-photo > .file-product-empty { display: grid; aspect-ratio: 1; border-radius: 12px; background: var(--ds-raised); padding: 16px; }

/* Photos */
.file-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; min-width: 0; }
.file-photos img { display: block; width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--ds-raised); }
.file-photos[data-layout="strip"] { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.file-photos[data-layout="strip"]::-webkit-scrollbar { display: none; }
.file-photos[data-layout="strip"] img { flex: 0 0 auto; width: 85%; max-width: 480px; aspect-ratio: auto; scroll-snap-align: start; }
[data-can-drag], [data-can-drag] .file-product-toggle, [data-can-drag] .file-product-zoom { cursor: grab; }
[data-drag-scroll] { position: relative; }
[data-drag-scroll][data-dragging] { scroll-snap-type: none; user-select: none; }
[data-dragging], [data-dragging] .file-product-toggle, [data-dragging] .file-product-zoom { cursor: grabbing; }
.file-photos.is-single img { width: 100%; max-width: none; aspect-ratio: auto; }

/* A strip or carousel runs to the card's edges, so its scroll reads without a control. */
.file-bleed { margin-inline: calc(-1 * var(--file-pad-x)); padding-inline: var(--file-pad-x); scroll-padding-inline: var(--file-pad-x); }

.file-recommendations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: start; }
.file-recommendation { min-width: 0; padding: 20px; border: 1px solid var(--ds-hairline); border-radius: 18px; background: var(--ds-white); }
.file-recommendation-header { margin-bottom: 20px; }
.file-recommendation-meta { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 10px; }
.file-recommendation-number { flex: none; margin-right: 4px; color: var(--ds-ink-2); font-size: var(--file-small); font-weight: 500; }
.file-recommendation-eyebrow { min-width: 0; margin: 0; color: var(--ds-ink-2); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.file-recommendation-badge { flex: none; margin-left: auto; padding: 2px 7px; border: 1px solid var(--ds-hairline); border-radius: 4px; background: var(--ds-page); color: var(--ds-ink); font-size: 11px; line-height: 18px; font-weight: 500; }
.file-recommendation-title { margin: 0; font-family: var(--ds-font-display); font-size: 24px; line-height: 1.15; font-weight: 400; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.file-recommendation-photos { margin: 0 0 20px; }
.file-recommendation-photos .file-photos:not(.is-single) img { aspect-ratio: 4 / 3; }
.file-recommendation-photos > figcaption { margin-top: 12px; }
.file-recommendation-content { display: flex; flex-direction: column; gap: 24px; }
.file-recommendation-content > * { min-width: 0; }
.file-recommendation-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ds-hairline); }
.file-recommendation-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Charts: compact white panels inside the text column, type one step down from body */
.file-chart { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 8px; background: var(--ds-white); font-size: var(--file-small); line-height: 20px; }
.file-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--ds-ink-2); }
.file-chart-head > span:first-child { min-width: 0; text-wrap: pretty; }
.file-chart-head > span + span { flex: none; white-space: nowrap; }
.file-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.file-chart.is-drawn { max-width: 420px; }
.file-chart-axis { display: flex; justify-content: space-between; gap: 12px; color: var(--ds-ink-2); white-space: nowrap; }
.file-sparklines { display: flex; flex-direction: column; }
.file-sparkline { display: grid; grid-template-columns: 1fr 110px 56px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-sparkline:last-child { border-bottom: 0; }
.file-sparkline svg { width: 110px; height: 32px; }
.file-sparkline-delta { text-align: right; font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-name { font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-delta { color: var(--ds-teal); font-weight: 600; }
.file-ranges { display: flex; flex-direction: column; gap: 28px; }
.file-range { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; }
.file-range-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-range-track { position: relative; height: 20px; }
.file-range-line { position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--ds-hairline); }
.file-range-band { position: absolute; top: 7px; height: 6px; border-radius: 3px; background: var(--ds-page); }
.file-range-now { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--file-series, var(--ds-ink-2)); }
.file-range.is-highlight .file-range-now { background: var(--ds-teal); }
.file-range-scale { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.file-stack-bar { display: flex; height: 16px; gap: 2px; border-radius: 3px; overflow: hidden; }
.file-stack-parts { display: flex; flex-direction: column; }
.file-stack-part { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-stack-part:last-child { border-bottom: 0; }
.file-stack-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ds-hairline); }
.file-stack-part span:nth-child(2) { flex: 1; }
.file-stack-share { color: var(--ds-ink-2); }

/* Controls */
.file-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--ds-hairline);
    border-radius: 4px;
    background: var(--ds-white);
    color: var(--ds-ink);
    font: inherit;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    align-self: flex-start;
    max-width: 100%;
    box-shadow: var(--ds-shadow-control);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.file-button.is-compact { padding: 0 16px; }
/* An icon at a pill's end takes less side padding than text, so it sits about as far from the edge as from the top and bottom. The label must be an element beside the icon, since :first-child and :last-child skip text. */
.file-button.is-pill { border-radius: 999px; --file-button-icon-pad: 10px; }
.file-button.is-pill:has(> svg:first-child, > .file-button-slot > .file-button-face:last-child > svg:first-child) { padding-inline-start: var(--file-button-icon-pad); }
.file-button.is-pill:has(> svg:last-child, > .file-button-slot > .file-button-face:last-child > svg:last-child) { padding-inline-end: var(--file-button-icon-pad); }
/* A stateful button clips its own faces, so a push runs to the button's edge. The inset is the gap from a face to that edge: (32px height - 16px face) / 2. */
.file-button[data-state] { overflow: hidden; --file-button-inset: 8px; }
.file-button-slot { display: inline-grid; grid-template-columns: minmax(0, auto); min-width: 0; transition: width var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1); }
.file-button-face { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; justify-self: start; }
/* A row too narrow for the longest full label, "Sent to Instinct" at 148px, swaps every state with a short label to it. */
.file-button-label.is-short { display: none; }
@container file-actions (width < 150px) { .file-button-face:has(> .is-short) > .file-button-label:not(.is-short) { display: none; } .file-button-label.is-short { display: inline; } }
/* Both faces travel one face plus the inset on the same curve, so the next pushes the current out; the outgoing face also fades as it goes. */
.file-button-face.is-leaving { animation: file-button-out var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.file-button-face.is-entering { animation: file-button-in var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes file-button-out { to { transform: translateY(calc(-100% - var(--file-button-inset))); opacity: 0; } }
@keyframes file-button-in { from { transform: translateY(calc(100% + var(--file-button-inset))); } }
.file-spin { animation: file-spin 900ms linear infinite; }
@keyframes file-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .file-button-slot { transition: none; } .file-button-face.is-entering, .file-spin { animation: none; } .file-button-face.is-leaving { display: none; } }
.file-button svg { flex: none; }
/* A button never outgrows its container: the label gives way with an ellipsis and the icon keeps its size. */
.file-button > span:not(.file-button-slot), .file-button-label { min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
@media (hover: hover) { .file-button:hover { transform: scale(1.05); } }
.file-button[data-variant="primary"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-page); }
.file-button[data-variant="ghost"] { background: transparent; border-color: transparent; box-shadow: none; }
.file-button[aria-pressed="true"] { background: var(--ds-teal); border-color: var(--ds-teal); color: var(--ds-white); }
.file-button:disabled:not([data-state]) { background: transparent; border-color: var(--ds-hairline); color: var(--ds-ink-4); box-shadow: none; cursor: default; transform: none; }
/* A stateful button keeps its colours while disabled; only its label and icon say it is working or done. */
.file-button[data-state]:disabled { cursor: default; transform: none; }
.file-button.is-unavailable:disabled { text-decoration: line-through; }
.file-control { display: flex; flex-direction: column; gap: 24px; }
.file-control-head { display: flex; justify-content: space-between; gap: 16px; }
.file-control-label { color: var(--ds-ink-2); }
.file-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.file-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ds-hairline);
    border-radius: 4px;
    background: var(--ds-white);
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.01em;
    outline: none;
}
.file-field:focus { border-color: var(--ds-teal); }
.file-slider { width: 100%; height: 2px; margin: 8px 0; appearance: none; -webkit-appearance: none; border-radius: 1px; background: linear-gradient(to right, var(--ds-ink) var(--file-slider-fill, 50%), var(--ds-hairline) var(--file-slider-fill, 50%)); outline: none; accent-color: var(--ds-ink); }
.file-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-white); border: 1px solid var(--ds-hairline); box-shadow: var(--ds-shadow-control); cursor: pointer; }
.file-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ds-white); border: 1px solid var(--ds-hairline); cursor: pointer; }

/* Closing line */
.file-closing { margin: 0; color: var(--ds-ink-2); }

/* Wordmark */
.file-wordmark { display: block; color: var(--ds-ink); }

/* Shopping */
.file-product { position: relative; display: flex; flex-direction: column; min-width: 0; }
.file-product-toggle, .file-product-preview {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.file-product-preview { cursor: default; }
@media (hover: hover) { .file-product-toggle:hover .file-product-name { text-decoration: underline; text-underline-offset: 3px; } }
.file-product.is-card { gap: 20px; }
/* 48px clear each side: the group's 24px gap plus this margin, and the padding below. */
.file-group > .file-product.is-card + .file-product.is-card { margin-top: 24px; padding-top: 48px; border-top: 1px solid var(--ds-hairline); }
.file-product-media { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
/* Only a strip of several photos needs one shared height; a lone photo takes the column width, because a fixed frame could only fit it by banding. */
.file-product-media > .file-photos:not(.is-single) { height: min(420px, 100cqw); }
.file-product-media > .file-photos img { width: auto; height: 100%; max-width: none; object-fit: contain; border-radius: 12px; }
.file-product-media > .file-photos.is-single img { width: 100%; height: auto; max-height: calc(100cqw * 4 / 3); object-fit: cover; }
/* Each photo sits in the button that opens the viewer, so the button takes the frame and the photo fills it. */
.file-product-zoom { all: unset; box-sizing: border-box; display: block; flex: none; border-radius: 12px; cursor: zoom-in; }
.file-photos:not(.is-single) > .file-product-zoom { height: 100%; }
.file-photos.is-single > .file-product-zoom { width: 100%; }
.file-product-thumbs { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 1px; margin: -1px; }
.file-product-thumbs::-webkit-scrollbar { display: none; }
.file-product-thumb { all: unset; box-sizing: border-box; flex: 0 0 auto; display: block; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px var(--ds-hairline); }
.file-product-thumb[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--ds-ink-3); }
.file-product-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ds-raised); }
.file-product-photo { position: relative; display: block; width: 100%; container-type: inline-size; }
.file-product-photo img, .file-product-photo .file-product-empty { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: var(--ds-raised); }
.file-product-photo img { display: block; height: auto; max-height: calc(100cqw * 4 / 3); aspect-ratio: auto; }
/* The square is the crop: contain in a fixed frame bands every photo the merchant did not shoot square. */
.file-product.is-tile .file-product-photo img { aspect-ratio: 1; object-fit: cover; }
.file-product.is-tile .file-product-photo .file-product-empty { aspect-ratio: 1; }
.file-product-empty { display: grid; place-items: center; color: var(--ds-ink-2); text-align: center; padding: 40px 16px 16px; box-sizing: border-box; }
.file-tags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; align-items: center; }
.file-pill { box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--ds-ink); color: var(--ds-white); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.file-pill.is-pick { background: var(--ds-ink); }
.file-badge { box-sizing: border-box; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--ds-white); color: var(--ds-ink); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgb(37 31 33 / 8%); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-product-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; min-width: 0; }
.file-product-name { flex: 1; min-width: 0; font-weight: 600; text-wrap: pretty; }
.file-product .file-product-name { overflow-wrap: break-word; }
.file-product-toggle .file-product-note, .file-product-preview .file-product-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.file-product-price { flex: none; font-weight: 600; color: var(--ds-teal); }
.file-product-brand { color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }
/* A tile keeps its brand line to one row so tiles in a row align; the dialog carries it in full. */
.file-product.is-tile .file-product-brand { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.file-product-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.file-product-carousel::-webkit-scrollbar { display: none; }
.file-product-carousel > .file-product { flex: none; width: clamp(200px, 29vw, 320px); scroll-snap-align: start; }

/* Product details share one gallery in page content and the modal. */
.file-product-detail { display: flex; flex-direction: column; gap: 24px; }
.file-product-gallery { position: relative; min-width: 0; container-type: inline-size; }
.file-product-gallery .file-photos { overscroll-behavior-x: contain; scroll-snap-type: none; border-radius: 12px; }
.file-product-gallery .file-photos:not(.is-single) { height: min(360px, 100cqw); }
.file-product-gallery .file-photos img { object-fit: contain; max-width: none; scroll-snap-align: none; border-radius: 12px; }
.file-product-gallery .file-photos:not(.is-single) img { width: auto; height: 100%; }
.file-product-gallery .file-photos.is-single img { max-height: calc(100cqw * 4 / 3); object-fit: cover; }
.file-product-gallery > .file-product-empty { width: 100%; aspect-ratio: 1; background: var(--ds-raised); border-radius: 12px; }
.file-product-info { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.file-product-copy { display: flex; flex-direction: column; }
.file-product-note { margin: 8px 0 0; text-wrap: pretty; }
.file-product-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; container: file-actions / inline-size; }
.file-product > .file-product-actions { margin-top: auto; padding-top: 14px; }
.file-product.is-card > .file-product-actions { padding-top: 2px; }
.file-product-actions .file-caption { margin: 0; font-size: 12px; line-height: 18px; }
.file-product-actions .file-caption button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
/* The citation always starts its own line under the note it credits. */
.file-product-source { display: block; }
/* A host reset may set svg to display block, which would drop the arrow onto its own line. */
.file-product-source svg { display: inline-block; vertical-align: -0.125em; margin-left: 3px; }
.file-product-detail .file-product-name { font-size: 22px; line-height: 1.25; }
.file-product-modal { box-sizing: border-box; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; padding: 0 24px 24px; border: 0; background: var(--ds-white); color: var(--ds-ink); box-shadow: var(--ds-shadow-modal); overflow: auto; overscroll-behavior: contain; font-family: var(--ds-font-text); font-size: var(--file-text); font-weight: 350; line-height: 24px; letter-spacing: -0.01em; }
.file-product-modal:focus { outline: none; }
.file-product-modal::backdrop { background: var(--ds-scrim); }
.file-product-modal-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; margin-inline: -24px; padding: 12px; background: var(--ds-white); }
.file-product-close { flex: none; width: 32px; padding: 0; }
.file-product-modal :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
/* A strip clips anything outside it, so a photo's focus ring sits inside the photo. */
.file-product-zoom:focus-visible { outline-offset: -2px; }

/* Variant pickers sit a step below the 32px purchase button, so buying stays the strongest control. */
.file-variants { display: flex; flex-direction: column; gap: 14px; }
.file-variant { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.file-variant-label { display: flex; gap: 6px; align-items: baseline; color: var(--ds-ink-2); }
.file-variant-label b { font-weight: 400; color: var(--ds-ink); }
.file-variant-label em { font-style: normal; color: var(--ds-ink-3); }
.file-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 3px 0 0 3px; }
/* The ring sits outside the colour, so a pale swatch keeps its edge against the page. */
.file-swatch, .file-dot { all: unset; position: relative; box-sizing: border-box; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-ink) 12%, transparent); }
.file-swatch { width: 24px; height: 24px; cursor: pointer; }
.file-swatch::after, .file-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 1px transparent; transition: box-shadow 120ms; }
.file-swatch[aria-pressed="true"]::after { box-shadow: 0 0 0 1.25px var(--ds-ink); }
.file-swatch.is-out::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--ds-white); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--ds-ink) 25%, transparent); }
.file-swatch:focus-visible, .file-dot:focus-visible { outline: none; }
.file-swatch:focus-visible::after, .file-dot:focus-visible::after { box-shadow: 0 0 0 2px var(--ds-ink); }
.file-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.file-size { height: 28px; min-width: 36px; padding: 0 10px; font-size: 13px; }
.file-size[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-page); }
.file-stock { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }
.file-stock::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ink-4); }
.file-stock.is-in::before { background: var(--ds-teal); }
.file-stock.is-low::before { background: var(--file-low-stock); }
.file-stock.is-out { color: var(--ds-ink); }
.file-stock.is-out::before { background: var(--ds-ink); }
.file-price-was { margin-left: 6px; color: var(--ds-ink-3); font-weight: 350; text-decoration: line-through; }
/* Compact colour dots show the range on a tile, a comparison head or an image card, and switch the photo where they can. */
.file-dots { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 20px; }
.file-dot { width: 16px; height: 16px; }
button.file-dot { cursor: pointer; }
.file-dot.is-current::after { box-shadow: 0 0 0 1px var(--ds-ink); }
.file-dots-more { margin-left: 2px; color: var(--ds-ink-3); font-size: var(--file-small); line-height: 20px; }
.file-dots-label { min-width: 0; margin-left: 4px; overflow: hidden; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.file-product.is-tile > .file-dots, .file-table.is-products thead .file-dots { margin-top: 8px; }

/* Full-screen photo viewer. It owns every gesture, so a pinch zooms the photo and never the page behind it. */
.file-viewer { box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; flex-direction: column; overflow: hidden; background: var(--ds-ink); color: var(--ds-white); font-family: var(--ds-font-text); font-size: var(--file-text); font-weight: 350; line-height: 24px; letter-spacing: -0.01em; touch-action: none; overscroll-behavior: contain; }
/* An author display value would beat the browser rule that hides a closed dialog. */
.file-viewer[open] { display: flex; }
.file-viewer:focus { outline: none; }
.file-viewer::backdrop { background: var(--ds-ink); }
.file-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 8px 20px; color: color-mix(in srgb, var(--ds-white) 72%, transparent); font-size: 13px; line-height: 20px; }
.file-viewer-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-viewer-title b { color: var(--ds-white); font-weight: 500; }
.file-viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow: hidden; touch-action: none; }
.file-viewer-stage img { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; user-select: none; -webkit-user-drag: none; cursor: zoom-in; will-change: transform; animation: file-viewer-in 200ms ease-out; }
.file-viewer-stage[data-zoomed] img { cursor: grab; }
@keyframes file-viewer-in { from { opacity: 0.35; } }
.file-viewer-button { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; background: color-mix(in srgb, var(--ds-white) 10%, transparent); color: var(--ds-white); cursor: pointer; transition: background-color 120ms; }
@media (hover: hover) { .file-viewer-button:not(:disabled):hover { background: color-mix(in srgb, var(--ds-white) 18%, transparent); } }
.file-viewer .file-viewer-button:focus-visible { outline: 2px solid var(--ds-white); outline-offset: 2px; }
.file-viewer-button:disabled { opacity: 0.3; cursor: default; }
.file-viewer-prev, .file-viewer-next { position: absolute; top: 50%; transform: translateY(-50%); }
.file-viewer-prev { left: 16px; }
.file-viewer-next { right: 16px; }
.file-viewer-dots { position: absolute; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.file-viewer-dots > span { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ds-white) 35%, transparent); }
.file-viewer-dots > .is-current { background: var(--ds-white); }
@media (prefers-reduced-motion: reduce) { .file-viewer-stage img { animation: none; } }

/* Image frame: the card every rendered image shares */
.file-image {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 16px;
    background: var(--ds-white);
    color: var(--ds-ink);
    border-radius: 24px;
    overflow: hidden;
    font-family: var(--ds-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
}
.file-image[data-ratio="portrait"] { width: 390px; height: 480px; }
.file-image[data-ratio="square"] { width: 390px; height: 390px; }
.file-image[data-ratio="landscape"] { width: 480px; height: 360px; }
.file-image-body { display: flex; flex-direction: column; gap: 36px; flex: 1; min-height: 0; overflow: hidden; }
.file-image-body > .file-card { padding: 0; max-width: none; background: transparent; }
.file-image-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: none; margin: 0 0 -2px; padding: 16px 0 4px; border-top: 1px solid var(--ds-hairline); color: var(--ds-ink-2); }
.file-image-footer > span { color: var(--ds-ink-3); }
.file-image-footer > span:empty { display: none; }
.file-image-footer > span:empty + .file-wordmark { margin-left: auto; }

/* Product image: the single-product PNG */
.file-product-image-photo { position: relative; flex: 1; min-height: 0; }
.file-product-image-photo img, .file-product-image-photo .file-product-empty { width: 100%; height: 100%; object-fit: contain; border-radius: 20px; background: var(--ds-raised); aspect-ratio: auto; }
.file-product-image-photo img { display: block; }
.file-product-image-tag { position: absolute; top: 12px; left: 12px; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ds-ink); color: var(--ds-white); font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.file-product-image-tag.is-pick { background: var(--ds-ink); }
.file-product-image-copy { display: flex; flex-direction: column; gap: 2px; flex: none; }
.file-product-image .file-image-body { gap: 16px; }
.file-product-image .file-image-footer { padding-top: 10px; font-size: 12px; line-height: 18px; }
.file-product-image .file-product-name { overflow-wrap: break-word; }
.file-product-image-variant { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 6px; }
/* The frame body clips at its edge, so the dots leave room for the ring and its 1px line. */
.file-product-image-variant .file-dots { gap: 5px; padding: 1px 0 1px 4px; }
.file-product-image-variant .file-dot { width: 14px; height: 14px; }
.file-product-image-size { flex: none; margin-left: auto; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }

/* Rendered images keep the smaller scale inside their fixed frame; the body size is for pages */
.file-image .file-card { font-size: var(--file-small); line-height: 20px; }
.file-image .file-title { font-size: 24px; }
.file-image .file-group-heading { font-size: 18px; }
.file-image .file-intro, .file-image .file-p, .file-image .file-bullets, .file-image .file-key { line-height: 20px; }

/* Desktop */
@media (min-width: 768px) {
    .file-ground { padding: 36px; }
    .file-card { --file-pad-x: 36px; padding: 36px; }
    .file-card[data-width="phone"] { --file-pad-x: 24px; padding: 24px 24px; }
    .file-title { font-size: 36px; }
    .file-intro, .file-closing, .file-p { max-width: 72ch; }
    .file-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .file-product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
    .file-product-modal { width: min(920px, calc(100% - 32px)); height: auto; max-height: calc(100dvh - 32px); margin: auto; border-radius: 16px; }
    .file-product.is-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
    .file-bleed { padding-inline: var(--file-pad-x) 0; scroll-padding-inline: var(--file-pad-x) 0; }
    .file-product-media > .file-photos, .file-product-gallery > .file-photos { margin-inline: 0; padding-inline: 0; }
    .file-product-detail .file-product-info { position: sticky; top: 56px; }
    .file-product-gallery .file-photos { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
    .file-product-gallery .file-photos:not(.is-single) { height: auto; }
    .file-product-gallery .file-photos img, .file-product-gallery .file-photos:not(.is-single) img { width: 100%; height: auto; }
    .file-product-media > .file-photos { display: block; overflow: visible; height: auto; }
    .file-product-media > .file-photos:not(.is-single) { height: auto; }
    .file-product-media > .file-photos > .file-product-zoom:not(:first-child) { display: none; }
    .file-product-media > .file-photos > .file-product-zoom, .file-product-gallery .file-photos > .file-product-zoom { width: 100%; height: auto; }
    .file-product-media > .file-photos img { width: 100%; height: auto; max-height: calc(100cqw * 4 / 3); object-fit: cover; }
    .file-product-thumbs { display: flex; }
}

@media (max-width: 600px) {
    .file-card .file-button, .file-card .file-product-toggle { min-height: 44px; }
    .file-card .file-button[data-state] { --file-button-inset: 14px; }
    .file-card .file-button.is-pill { --file-button-icon-pad: 14px; }
    .file-product-close { width: 44px; min-height: 44px; }
    .file-swatches { gap: 12px; }
    .file-size, .file-card .file-size { height: 32px; min-height: 32px; min-width: 38px; }
    .file-viewer-prev, .file-viewer-next { display: none; }
}

@media print {
    .file-ground { background: var(--ds-white); padding: 0; }
    .file-card, .file-ground .file-card { box-shadow: none; max-width: none; border-radius: 0; }
    .file-photos, .file-table-scroll { overflow: visible; }
}

.file-figure[data-fit="contain"] img { aspect-ratio: auto; object-fit: contain; }
.file-data-table { min-width: 100%; }
.file-data-table caption { text-align: start; color: var(--ds-ink-2); padding-bottom: 16px; }
.file-data-table th, .file-data-table td { min-width: 120px; max-width: 32ch; white-space: normal; overflow-wrap: anywhere; }
.file-data-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }
.file-data-table th button { background: none; border: 0; padding: 10px 0; color: inherit; font: inherit; text-align: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.file-chart details { border-block: 1px solid var(--ds-hairline); padding: 12px 0; }
.file-chart details > summary { cursor: pointer; min-height: 24px; padding: 10px 0; font-weight: 600; }
.file-chart details > :not(summary) { margin-top: 12px; }
@media print {
    .file-data-table { min-width: 0; }
    .file-data-table th, .file-data-table td { min-width: 0; }
}
.file-scaled-chart { max-width: 640px; width: 100%; box-sizing: border-box; }
.file-signed-bars { display: grid; gap: 14px; }
.file-signed-bars > div { display: grid; grid-template-columns: minmax(50px, 1fr) minmax(60px, 2fr) minmax(30px, auto); align-items: center; gap: 12px; }
.file-signed-bars strong { text-align: end; font-weight: 600; }
.file-bar-labels { display: flex; text-align: center; }
.file-bar-labels > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-chart-readout { margin: 0; min-height: 40px; color: var(--ds-ink-2); }
.file-scaled-chart .file-chart-axis { white-space: normal; }
.file-scaled-chart .file-chart-axis span:last-child { text-align: end; }
.file-scaled-chart [tabindex]:focus { outline: none; }
.file-scaled-chart [tabindex]:focus-visible circle:last-child { stroke-width: 3; }

.file-image .file-chart details, .file-image .file-chart-readout { display: none; }

:root {
  --ds-page: #faf6ea;
  --ds-ink: #1e2541;
  --ds-ink-2: #5c5870;
  --ds-hairline: #e6ddc2;
  --brand-cream: #f7f2df;
  --brand-red: #9e2c1b;
  --brand-red-deep: #7e2113;
  --brand-navy: #1e2541;
  --brand-gold: #b58834;
  --brand-gold-light: #d3a655;
}
html, body, #root { margin: 0; min-height: 100%; }
body { background: var(--ds-page); }
.draft-strip { color: var(--brand-gold); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 12px; }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:2px solid var(--brand-gold); padding:12px 0 20px; margin-bottom:30px; }
.site-nav a { color:var(--ds-ink); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.brand-lockup { display:flex; align-items:center; gap:12px; }
.brand-lockup img { width:88px; height:88px; display:block; }
.company-name { font-size:20px; font-weight:600; letter-spacing:0.01em; }
.site-nav div { display:flex; gap:24px; }
.site-nav div a[aria-current="page"] { text-decoration:underline; text-underline-offset:6px; text-decoration-color: var(--brand-gold); }
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:36px; margin-bottom:36px; }
.hero-copy h1 { font-size:48px; line-height:1.08; }
.hero-note { color:var(--ds-ink-2); margin-top:12px; }
.hero-art { margin:0; }
.hero-art video { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:24px; display:block; background:#111; box-shadow:0 24px 48px -24px rgb(30 37 65 / 0.45); }
.hero-art figcaption { font-size:11px; line-height:16px; color:var(--ds-ink-2); margin-top:8px; }
.file-button[data-variant="primary"] { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-cream); }
.file-button[data-variant="primary"]:hover { background: var(--brand-red-deep); border-color: var(--brand-red-deep); }
.file-button[data-variant="secondary"] { border-color: var(--brand-navy); color: var(--brand-navy); }
.brand-band { background: var(--brand-navy); border-radius:24px; padding:44px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.brand-band img { width:180px; height:180px; display:block; }
.brand-band p { color: var(--brand-cream); font-family: var(--ds-font-display); font-size:28px; line-height:1.25; margin:6px 0 0; max-width:560px; }
.brand-band span { color: var(--brand-gold-light); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; }
.upload-area { display:flex; flex-direction:column; gap:18px; padding:24px; border:1px dashed var(--brand-gold); border-radius:12px; font-weight:600; }
.upload-area input { max-width:100%; font:inherit; font-size:14px; }
.pending-field { border:1px solid var(--ds-hairline); padding:20px; margin:20px 0; border-radius:8px; }
.pending-field p { color:var(--ds-ink-2); margin:10px 0 0; }
.estimate-box { padding:24px; border:1px solid var(--ds-hairline); border-left:4px solid var(--brand-gold); border-radius:12px; }
.estimate-box span { display:block; color:var(--ds-ink-2); }
.estimate-box strong { display:block; font-size:24px; margin:8px 0; }
.estimate-box p { margin:12px 0 0; color:var(--ds-ink-2); }
.route-links { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.site-nav div { flex-wrap:wrap; }
@media (max-width:600px) {
  .site-nav { align-items:flex-start; flex-direction:column; gap:8px; margin-bottom:20px; }
  .hero { grid-template-columns:1fr; gap:20px; }
  .hero-copy h1 { font-size:36px; }
  .brand-band { padding:32px 20px; }
  .brand-band img { width:140px; height:140px; }
  .brand-band p { font-size:22px; }
}

.casting-gallery-placeholder { margin-top:24px; padding:32px; min-height:150px; border:1px dashed var(--brand-gold); border-radius:16px; display:flex; flex-direction:column; justify-content:center; }
.casting-gallery-placeholder > span { font-size:20px; font-weight:600; }
.casting-gallery-placeholder > p { margin:12px 0 0; color:var(--ds-ink-2); }
@media(max-width:600px) { .brand-lockup img { width:76px; height:76px; } .casting-gallery-placeholder { padding:24px; min-height:140px; } }

.casting-reel { width:100%; max-width:680px; margin:28px auto 0; }
.reel-stage { height:340px; position:relative; isolation:isolate; overflow:hidden; border-radius:16px; background:var(--brand-navy); }
.reel-backdrop { position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); object-fit:cover; filter:blur(24px) brightness(.48); z-index:-1; }
.reel-stage video,.reel-image { display:block; width:100%; height:100%; object-fit:contain; }
.reel-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;}
.reel-title {font-size:14px;font-weight:600;}
.reel-count {font-size:12px;margin-left:12px;color:var(--ds-ink-2);}
.reel-controls {display:flex;align-items:center;gap:4px;}
.reel-controls button {border:0;background:transparent;color:var(--brand-navy);font:inherit;font-size:13px;min-width:44px;min-height:44px;cursor:pointer;border-radius:4px;}
.reel-controls button:first-child,.reel-controls button:last-child {font-size:26px;}
.reel-controls button:hover {background:var(--ds-raised);}
.reel-controls button:focus-visible {outline:2px solid var(--brand-gold);outline-offset:2px;}
@media(max-width:600px) {.reel-stage {height:290px;}.reel-footer {gap:4px;}.reel-count {margin-left:8px;}.reel-title {font-size:13px;}}

/* Corporate direction: restrained surfaces, stronger hierarchy, a consistent grid. */
:root { --ds-page:#fff; --ds-ink:#1e2541; --ds-ink-2:#626779; --ds-hairline:#e4e6ec; }
.draft-strip {letter-spacing:.08em;font-size:10px;color:var(--ds-ink-2);padding-bottom:4px;}
.site-nav {border-bottom:1px solid var(--ds-hairline);padding:8px 0 20px;margin-bottom:28px;}
.brand-lockup img {width:88px;height:88px;}
.company-name {font-size:23px;letter-spacing:-.03em;}
.site-nav div {gap:28px;font-size:13px;font-weight:600;}
.hero {display:block;background:var(--brand-navy);margin:0 0 64px;border-top:4px solid var(--brand-gold);}
.hero-copy {padding:48px 48px 36px;max-width:840px;}
.hero-copy h1 {font-family:var(--ds-font-text);font-size:60px;font-weight:600;letter-spacing:-.055em;line-height:1.04;color:#fff;max-width:690px;}
.hero-copy header p,.hero-copy p {color:#e5e7ef;}
.hero-copy header p:first-of-type {font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-gold-light);}
.hero-copy header p:last-of-type {font-size:18px;line-height:1.6;max-width:510px;}
.hero-actions {display:flex;gap:26px;align-items:center;margin-top:26px;}
.hero-secondary {color:#fff;font-size:13px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:14px;}
.hero-note {font-size:11px;margin-top:28px;letter-spacing:.03em;}
.hero-art {position:relative;}
.hero-art video {aspect-ratio:21/7;border-radius:0;box-shadow:none;width:100%;object-fit:cover;}
.hero-art figcaption {position:absolute;bottom:14px;left:24px;color:#fff;background:var(--brand-navy);padding:4px 10px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.file-button[data-variant="primary"] {border-radius:2px;font-weight:600;}
.section-heading h2,.project-cta h2 {font-family:var(--ds-font-text);font-size:36px;font-weight:600;line-height:1.12;letter-spacing:-.04em;margin:16px 0;}
.section-heading p {color:var(--ds-ink-2);font-size:14px;line-height:1.7;max-width:380px;}
.eyebrow {font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--brand-red);}
.materials-section {margin-bottom:64px;}
.materials-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border-top:1px solid var(--ds-hairline);border-bottom:1px solid var(--ds-hairline);}
.materials-grid article {padding:28px 28px 24px;min-height:255px;display:flex;flex-direction:column;}
.materials-grid article:first-child {padding-left:0;}
.materials-grid article+article {border-left:1px solid var(--ds-hairline);}
.material-code {font-size:11px;letter-spacing:.14em;color:var(--brand-gold);font-weight:600;}
.materials-grid h3 {font-size:25px;letter-spacing:-.03em;margin:20px 0 12px;}
.materials-grid p {font-size:14px;line-height:1.8;color:var(--ds-ink-2);margin:0 0 24px;}
.materials-grid a {margin-top:auto;font-size:12px;font-weight:600;text-decoration:none;color:var(--brand-navy);min-height:44px;display:flex;align-items:center;justify-content:space-between;}
.work-section {display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;margin:0 0 64px;align-items:center;}
.standard-signature {display:flex;align-items:center;gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--ds-hairline);}
.standard-signature img {width:72px;height:72px;}
.standard-signature span {font-size:12px;line-height:1.8;color:var(--ds-ink-2);}
.standard-signature strong {color:var(--brand-navy);font-weight:600;}
.work-section .casting-reel {margin:0;max-width:none;}
.reel-stage {border-radius:2px;height:340px;}
.reel-title {font-size:12px;}
.reel-count {font-size:10px;}
.workflow-section {border-top:1px solid var(--ds-hairline);padding-top:40px;margin-bottom:56px;}
.workflow-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0;}
.workflow-grid article {border-top:2px solid var(--brand-navy);padding-top:20px;}
.workflow-grid span {font-size:10px;color:var(--brand-red);letter-spacing:.08em;font-weight:600;}
.workflow-grid h3 {font-size:16px;font-weight:600;margin:14px 0 8px;}
.workflow-grid p {font-size:13px;color:var(--ds-ink-2);line-height:1.7;}
.project-cta {display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--brand-navy);padding:36px;margin:0 0 28px;}
.project-cta .eyebrow {color:var(--brand-gold-light);}
.project-cta h2 {color:#fff;font-size:32px;margin-bottom:0;}
.upload-area,.pending-field {border-radius:2px;}
@media(max-width:700px) {
 .hero-copy {padding:32px 24px;}.hero-copy h1 {font-size:40px;}.hero-copy header p:last-of-type {font-size:16px;}.hero-actions {flex-direction:column;align-items:flex-start;gap:10px;}.hero-art video {aspect-ratio:16/8;}
 .hero,.materials-section,.work-section {margin-bottom:44px;}.work-section {grid-template-columns:1fr;gap:24px;}.section-heading h2 {font-size:30px;}
 .materials-grid article {padding:20px 12px;min-height:230px;}.materials-grid h3 {font-size:20px;}.materials-grid p {font-size:12px;}.materials-grid a {font-size:10px;gap:8px;}
 .standard-signature {margin-top:20px;padding-top:16px;}.workflow-grid {grid-template-columns:1fr;gap:12px;}.workflow-grid article {padding-top:14px;}.workflow-grid h3 {margin-top:8px;}
 .project-cta {flex-direction:column;align-items:flex-start;padding:28px 24px;}.project-cta h2 {font-size:30px;}.site-nav div {gap:24px;}.company-name {font-size:22px;}.reel-stage {height:290px;}
}
@media(max-width:350px) {.company-name {font-size:20px;}.brand-lockup {gap:8px;}.brand-lockup img {width:76px;height:76px;}.hero-copy h1 {font-size:34px;}.materials-grid {grid-template-columns:1fr;}.materials-grid article,.materials-grid article:first-child {padding:20px 0;min-height:0;}.materials-grid article+article {border-left:0;border-top:1px solid var(--ds-hairline);}.materials-grid p {margin-bottom:12px;}}
.hero-actions a.hero-secondary {color:#fff !important;text-decoration:none;}
.site-nav a.hero-secondary {color:#fff;}
.file-card h1 {font-family:var(--ds-font-text);font-weight:600;letter-spacing:-.04em;}

.capabilities-section {border-top:1px solid #dce1e9;padding:56px 0;}
.capabilities-section .section-heading {max-width:640px;margin-bottom:32px;}
.capabilities-grid {display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dce1e9;border-bottom:1px solid #dce1e9;}
.capabilities-grid article {padding:30px 24px;border-right:1px solid #dce1e9;}
.capabilities-grid article:first-child {padding-left:0;}
.capabilities-grid article:last-child {border-right:0;}
.capability-value {display:block;color:#202641;font-size:42px;font-weight:650;letter-spacing:-.045em;line-height:1.15;margin-bottom:28px;}
.capability-value small {display:block;font-size:15px;letter-spacing:0;font-weight:500;margin-top:6px;color:#6b7086;}
.capabilities-grid h3 {font-size:17px;font-weight:600;margin:0 0 12px;color:#202641;}
.capabilities-grid p {font-size:15px;line-height:1.65;color:#6b7086;margin:0 0 12px;}
@media (max-width:700px) {.capabilities-section {padding:38px 0;}.capabilities-grid {grid-template-columns:1fr;}.capabilities-grid article,.capabilities-grid article:first-child {padding:24px 0;border-right:0;border-bottom:1px solid #dce1e9;}.capabilities-grid article:last-child {border-bottom:0;}.capability-value {font-size:38px;margin-bottom:18px;}}


.rjc-membership {display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px 0 0;}
.rjc-membership .eyebrow {color:var(--brand-navy);font-size:12px;}
.rjc-membership p {font-size:15px;line-height:1.65;margin:12px 0 6px;color:var(--ds-ink);}
.membership-detail {font-size:11px;color:var(--ds-ink-2);line-height:1.6;}
.rjc-membership a {color:var(--brand-navy);font-size:12px;font-weight:600;white-space:nowrap;min-height:44px;display:flex;align-items:center;gap:16px;}
@media(max-width:700px) {.rjc-membership {flex-direction:column;align-items:flex-start;gap:10px;padding-top:24px;}}

/* Phone layout: keep metal, purity and feed status together at readable size. */
@media(max-width:700px) {
 .materials-grid {grid-template-columns:1fr;}
 .materials-grid article,.materials-grid article:first-child {padding:24px 0;min-height:0;}
 .materials-grid article+article {border-left:0;border-top:1px solid var(--ds-hairline);}
 .materials-grid h3 {font-size:25px;margin:12px 0;}
 .materials-grid p {font-size:14px;margin-bottom:18px;}
 .materials-grid a {font-size:13px;}
 .reel-footer {align-items:flex-start;flex-wrap:wrap;gap:6px;}
 .reel-count {display:inline-block;}
}

.us-draft {padding:14px 16px;background:#f4efec;font-size:13px;line-height:1.6;margin:0 0 32px;color:#585254;}
.us-draft span {font-weight:600;color:#202641;margin-right:8px;text-transform:uppercase;font-size:11px;letter-spacing:.1em;}
.us-intro {display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;margin:0 0 48px;}
.us-intro h1 {font-family:var(--ds-font-text);font-size:52px;line-height:1.08;font-weight:600;letter-spacing:-.04em;color:var(--brand-navy);margin:18px 0;}
.us-intro p {font-size:18px;line-height:1.65;margin:0 0 26px;}
.us-intro figure {margin:0;}.us-intro img {display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;}
.us-intro figcaption {font-size:12px;line-height:1.6;color:var(--ds-ink-2);margin-top:10px;}
.us-section {border-top:1px solid var(--ds-hairline);padding:36px 0;}
.us-section h2 {font-family:var(--ds-font-text);font-size:32px;line-height:1.15;font-weight:600;letter-spacing:-.035em;margin:16px 0 24px;color:var(--brand-navy);}
.us-facts {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}.us-facts h3 {font-size:18px;line-height:1.4;margin:0 0 12px;color:var(--brand-navy);}
.us-section p {font-size:15px;line-height:1.75;color:var(--ds-ink-2);}.us-context {max-width:820px;}.us-disclaimer {padding:18px 0;border-top:1px solid var(--ds-hairline);color:var(--ds-ink)!important;}
.us-sources {display:flex;flex-wrap:wrap;gap:12px 24px;}.us-sources a {font-size:13px;color:var(--brand-navy);min-height:44px;display:inline-flex;align-items:center;}
@media(max-width:700px) {.site-nav>div {flex-wrap:wrap;row-gap:6px;}.us-intro {grid-template-columns:1fr;gap:26px;}.us-intro h1 {font-size:40px;}.us-intro p {font-size:17px;}.us-facts {grid-template-columns:1fr;gap:22px;}.us-section h2 {font-size:29px;}.us-section {padding:28px 0;}}

.final-invoice-preview {margin-top:28px;padding-top:22px;border-top:1px solid var(--ds-hairline);}.final-invoice-preview h3 {font-size:20px;line-height:1.4;color:var(--brand-navy);}.final-invoice-preview p {font-size:15px;line-height:1.7;}.return-line {padding-top:16px;border-top:1px solid var(--ds-hairline);}

.campaign-brand{display:flex;align-items:center;gap:20px;padding:28px 0 32px;margin-bottom:48px;border-bottom:1px solid var(--ds-hairline);color:var(--brand-navy);font-size:26px;font-weight:600;}.campaign-brand img{width:88px;height:88px;object-fit:contain;}.campaign-hero-note{font-size:14px!important;margin-top:18px!important;color:var(--ds-ink-2);}.campaign-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0;}.campaign-fields>:last-child{grid-column:1/-1;}.campaign-quote .upload-area{margin:24px 0;}.campaign-quote{scroll-margin-top:80px;}.campaign-review{margin-top:32px;}.campaign-review h3{font-size:21px;color:var(--brand-navy);}.campaign-launch-note{padding:18px 20px;background:var(--ds-raised);font-size:13px;line-height:1.7;margin-top:30px;}.campaign-launch-note p{margin:8px 0 0;overflow-wrap:anywhere;}@media(max-width:700px){.campaign-fields{grid-template-columns:1fr;gap:18px;}.campaign-brand{gap:14px;font-size:23px;margin-bottom:34px;}.campaign-brand img{width:72px;height:72px;}}
.campaign-fields{grid-template-columns:1fr;}.campaign-quote [role="group"]{margin:22px 0;}.campaign-quote>p{margin-bottom:18px;}

*{box-sizing:border-box}body{font-family:Arial,sans-serif;font-size:16px;line-height:1.6}.file-card{max-width:1120px;margin:auto;padding:32px 40px}h1,h2,h3,p{margin-top:0}h2{font-size:32px;line-height:1.15}.file-button{display:inline-flex;align-items:center;justify-content:center;background:var(--brand-red);color:white;padding:14px 22px;border:0;text-decoration:none;font:inherit;border-radius:4px;cursor:pointer;min-height:48px}.file-button:disabled{opacity:.5}.campaign-fields label{display:flex;flex-direction:column;gap:6px;font-weight:600}.campaign-fields input,.campaign-fields textarea{font:inherit;padding:12px;border:1px solid var(--ds-hairline);border-radius:4px;background:#fffdf8;width:100%;color:var(--ds-ink)}.staging-note{background:#ece5cf;padding:16px;margin:20px 0}.form-note,.site-footer{font-size:14px;color:var(--ds-ink-2)}.site-footer{border-top:1px solid var(--ds-hairline);padding:24px 0}.honeypot{position:absolute!important;left:-10000px!important}#form-status{margin:16px 0;font-weight:600}@media(max-width:600px){.file-card{padding:20px}h2{font-size:28px}}
body{width:auto!important}.file-card{margin:0 auto}.hero-art img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px}.campaign-brand a{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none}.site-footer a{color:inherit}.hero-playback{margin-top:8px;font:inherit;font-size:12px;background:transparent;border:1px solid var(--ds-hairline);padding:8px;border-radius:6px}.hero-playback{position:absolute;top:12px;right:12px;background:#1e2541;color:#fff;border:1px solid #b58834;z-index:2}.hero-art figcaption{pointer-events:none}.hero-art video{display:block}.hero-art img{border-radius:0}.reel-controls button{min-width:44px;min-height:44px}

.file-button[data-variant="secondary"]{background:transparent;color:var(--brand-navy);border:1px solid var(--brand-navy)}

.campaign-video{position:relative}.campaign-video video,.campaign-video-poster{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#111}.campaign-video [hidden]{display:none}.campaign-video-control{position:absolute;right:10px;bottom:40px;background:#1e2541;color:#fff;border:1px solid #b58834;border-radius:4px;font:inherit;font-size:12px;min-height:36px;padding:6px 10px}