@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/exo-2-latin-900-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter-latin-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/rajdhani-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'TNS Exo Fallback';src:local('Arial Bold Italic'),local('Arial-BoldItalicMT');font-style:italic;font-weight:900;size-adjust:92.13%;ascent-override:108.44%;descent-override:21.82%;line-gap-override:0%}
@font-face{font-family:'TNS Inter Fallback';src:local('Arial'),local('ArialMT');font-weight:300 500;size-adjust:107.3%;ascent-override:90.3%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:'TNS Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600 900;size-adjust:101.6%;ascent-override:95.3%;descent-override:23.8%;line-gap-override:0%}

/* Top Notch Sports / The Hockey Uniform Design Studio / v4 */
:root {
  color-scheme: dark;
  --canvas: #000B1F;
  --panel: #011130;
  --panel-raised: #01153B;
  --white: #F8FAFC;
  --muted: #B8C6DB;
  --electric: #0055F0;
  --chrome-light: #ECEFF5;
  --edge-electric: linear-gradient(110deg, #053CAD, #0055F0 48%, #1D65CB 62%, #053CAD);
  --action-electric: linear-gradient(110deg, #053CAD 0%, #0055F0 48%, #1D65CB 62%, #053CAD 100%);
  --type-chrome: linear-gradient(180deg, #F8FAFC 0%, #ECEFF5 38%, #B8C6DB 61%, #6D88BC 100%);
  --copy-size: 17px;
  --line: #264072;
  --error: #ffb3b8;
  --display: 'Exo 2', 'TNS Exo Fallback', sans-serif;
  --body: 'Inter', 'TNS Inter Fallback', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; background: var(--canvas); color: var(--white); font: var(--copy-size)/1.75 var(--body); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
::selection { background: var(--chrome-light); color: var(--canvas); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, label, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
button, input, textarea, select { border-radius: 0; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex='-1']:focus-visible { outline: 2px solid var(--chrome-light); outline-offset: 5px; }
input, textarea, select { min-width: 0; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure { margin: 0; }
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
legend { padding: 0; }
button { border: 0; }
.wrap { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 15px 20px; background: var(--chrome-light); color: var(--canvas); font-weight: 700; }
.skip-link:focus { top: 16px; }
.announcement { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 33px; background: var(--edge-electric); color: #000B1F; font-size: 14px; font-weight: 700; letter-spacing: .8px; }
.status-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--edge-electric); box-shadow: 0 0 12px #B8C6DB26; }
.announcement .status-dot { background: #011130; box-shadow: none; }
.announcement-extra { margin-left: 8px; }
.site-header { position: relative; z-index: 3; border-bottom: 1px solid #F8FAFC12; }
.nav-inner { min-height: 92px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { width: 34px; height: 43px; object-fit: contain; }
.brand > span { font: 700 23px/.92 var(--display); letter-spacing: .8px; }
.brand small { display: block; margin-top: 7px; color: var(--electric); font: 600 14px/1 var(--body); letter-spacing: .8px; }
.nav-studio { margin-right: auto; border-left: 1px solid var(--line); padding-left: 28px; font-size: 14px; letter-spacing: .8px; color: var(--muted); }
.studio-mark { display: inline-flex; margin-left: 5px; padding: 1px 5px; border: 1px solid #6D88BC; color: var(--chrome-light); font-size: 14px; }
.nav-inner nav { display: flex; gap: 28px; align-items: center; font-size: 14px; }
.nav-inner nav > a, .nav-help { transition: color .2s; }
.nav-inner nav > a:hover, .nav-help:hover { color: var(--chrome-light); }
.nav-help { background: transparent; padding: 10px 0; color: var(--chrome-light); font-size: 14px; }
.nav-help span { margin-left: 7px; }
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 67% 43%, #F8FAFC06, transparent 49%); }
.hero-grid { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 64px; padding-block: 66px 68px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--chrome-light); font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: .8px; }
.line-mark { width: 23px; height: 2px; background: var(--electric); }
h1 { font: 700 clamp(76px, 7.4vw, 113px)/.91 var(--display); letter-spacing: -1.8px; margin: 28px 0 26px; }
h1 > .chrome-accent, h2 > span { color: var(--chrome-light); }
.hero-lead { color: #B8C6DB; font-size: 15px; line-height: 1.9; max-width: 440px; }
.button { min-height: 54px; display: inline-flex; justify-content: center; align-items: center; gap: 15px; padding: 15px 24px; font-size: 14px; line-height: 1.35; font-weight: 700; border-radius: 3px; transition: transform .2s, background .2s, box-shadow .2s; }
.button-electric { background: var(--action-electric); color: #000B1F; border: 1px solid #B8C6DB; box-shadow: 0 4px 20px #01051426; }
.button-electric:hover:not(:disabled) { background: var(--action-electric); box-shadow: 0 5px 26px #B8C6DB26; transform: translateY(-2px); }
.button-electric:active:not(:disabled) { transform: translateY(0); }
.button > span:last-child:not(:first-child) { margin-left: auto; }
.hero-cta { min-width: 286px; margin-top: 28px; }
.hero-cta > span { font-size: 22px; font-weight: 400; }
.hero-reassurance { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.hero-reassurance > span:first-child { color: var(--chrome-light); }
.dot-divider { margin-inline: 1px; }
.hero-stats { display: flex; gap: 29px; margin-top: 42px; padding-top: 23px; border-top: 1px solid var(--line); max-width: 460px; }
.hero-stats > div { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hero-stats > div + div { border-left: 1px solid var(--line); padding-left: 27px; }
.hero-stats strong { font: 600 36px/1 var(--display); display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.hero-stats strong > span { color: var(--chrome-light); font-size: 14px; }
.hero-stats > div > span { color: var(--muted); font-size: 14px; letter-spacing: 0.9px; white-space: normal; }
.hero-art { position: relative; padding: 4px 22px 20px 5px; }
.art-orbit { position: absolute; inset: 8% -9% 8% -10%; border: 1px solid #0055F01c; border-radius: 50%; transform: rotate(-30deg); }
.art-orbit::before { content: ''; position: absolute; inset: -34px; border: 1px solid #0055F00b; border-radius: 50%; }
.art-index { position: absolute; right: -12px; top: 30px; writing-mode: vertical-rl; font-size: 14px; color: var(--muted); letter-spacing: .8px; }
.hero-photo { position: relative; transform: rotate(3deg); background: #011130; padding: 10px; border: 1px solid #6D88BC; box-shadow: 0 26px 75px #01051488; }
.specimen-top, .hero-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .8px; font-weight: 500; }
.specimen-top { padding: 3px 5px 11px; color: var(--chrome-light); }
.specimen-top > span:last-child { display: flex; align-items: center; gap: 10px; }

.hero-photo figcaption { padding: 13px 5px 4px; color: #B8C6DB; font-size: 14px; }
.hero-photo figcaption > span:first-child { display: flex; align-items: center; gap: 5px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #F8FAFC50; flex-shrink: 0; }
.swatch.black { background: #010514; margin-right: 4px; }.swatch.electric { background: var(--edge-electric); }.swatch.pink, .swatch.teal, .swatch.navy, .swatch.lime { background: #B8C6DB; }
/* Keep the tilted sticker in flow below the photo and its colorway caption. */
.art-note { position: relative; width: max-content; max-width: 100%; margin-top: 36px; display: flex; gap: 14px; align-items: center; padding: 20px 23px; background: #011130; border: 1px solid #6D88BC; box-shadow: 0 15px 30px #01051466; transform: rotate(-3deg); }
.sparkle { font-size: 24px; line-height: 1; }
.art-note .sparkle { color: var(--chrome-light); font-size: 38px; }
.art-note > div { font: 500 18px/1.2 var(--display); letter-spacing: 0.9px; }
.art-note strong { color: var(--chrome-light); font-weight: 600; }
.note-arrow { margin-left: 10px; font-size: 30px; font-weight: 400; color: var(--chrome-light); }
.feature-ribbon { border-block: 1px solid #264072; background: #011130; }
.feature-ribbon > div { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--chrome-light); font: 500 17px/1 var(--display); letter-spacing: .8px; }
.feature-ribbon i { font: normal 21px/1 var(--body); color: var(--electric); }
.section-space { padding-block: 102px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
h2 { font: 600 clamp(36px, 3.6vw, 53px)/1.04 var(--display); letter-spacing: -.5px; }
.section-heading .eyebrow, .why-copy > .eyebrow { margin-bottom: 15px; }
.section-heading p:not(.eyebrow) { margin-top: 14px; color: var(--muted); font-size: 14px; }
.try-counter { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #264072; background: #000B1F; border-radius: 5px; color: var(--muted); font-size: 14px; }
.try-counter strong { color: var(--chrome-light); font-weight: 600; margin-right: 4px; }
.try-counter b { font-weight: inherit; }
.studio-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: 28px; align-items: start; }
.design-panel { border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(135deg, #01153B75, #000B1F); overflow: hidden; }
#genForm { padding: 28px; }
.panel-kicker { display: flex; align-items: center; gap: 9px; font-size: 14px; letter-spacing: .8px; color: var(--muted); margin-bottom: 26px; }
.step-token { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1px solid #6D88BC; color: var(--chrome-light); font-size: 14px; font-weight: 600; flex-shrink: 0; }
.panel-kicker .mini-label { margin-left: auto; font-size: 14px; letter-spacing: 0.6px; }
.prompt-label { font-size: 19px; font-weight: 600; letter-spacing: -.5px; }
.field-hint { display: block; color: var(--muted); font-size: 14px; line-height: 1.7; font-weight: 400; }
#promptHint { margin: 5px 0 15px; }
.prompt-wrap { position: relative; }
textarea, .field input, .field select, .roster-table input, .roster-table select { width: 100%; border: 1px solid #264072; background: #000B1F; color: var(--white); padding: 12px 13px; border-radius: 4px; outline-offset: 3px; transition: border-color .2s; }
textarea:hover, .field input:hover, .field select:hover, .roster-table input:hover, .roster-table select:hover { border-color: #6D88BC; }
textarea:focus, .field input:focus, .field select:focus, .roster-table input:focus, .roster-table select:focus { border-color: var(--chrome-light); }
textarea { display: block; resize: vertical; line-height: 1.85; }
textarea::placeholder, input::placeholder { color: #6D88BC; opacity: 1; }
#prompt { min-height: 190px; font-size: 14px; padding: 16px 17px 32px; }
.prompt-count { position: absolute; right: 14px; bottom: 10px; color: var(--muted); font-size: 14px; background: #000B1F; padding-left: 6px; pointer-events: none; }
.inspiration { margin-top: 25px; }
.inspiration-title { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; letter-spacing: 1.0px; margin-bottom: 14px; }
.inspiration-title > span:last-child { letter-spacing: 0; color: var(--muted); }
.chip-group { display: flex; align-items: start; gap: 12px; margin-bottom: 10px; }
.chip-label { width: 75px; flex-shrink: 0; padding-top: 9px; font-size: 14px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { display: flex; align-items: center; gap: 8px; border: 1px solid #264072; background: #011130; padding: 8px 10px; border-radius: 3px; font-size: 14px; min-height: 34px; transition: background .2s, color .2s, border-color .2s; }
.chips button > span { color: var(--muted); }
.chips button:hover { background: #01153B; border-color: #0055F0; color: var(--chrome-light); }
.chips button.added { border-color: var(--chrome-light); color: var(--chrome-light); background: #01153B; }
.logo-heading { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 10px; }
.field-title { font-weight: 500; font-size: 14px; }
.optional { color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0.3px; }
.upload-box { position: relative; border: 1px dashed #264072; border-radius: 4px; background: #000B1F60; transition: border-color .2s, background .2s; }
.upload-box.drag, .upload-box:focus-within { border-color: var(--chrome-light); background: #011130; outline: 2px solid var(--chrome-light); outline-offset: 3px; }
.upload-target { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 93px; padding: 15px; cursor: pointer; }
.upload-icon { font-size: 29px; color: var(--chrome-light); line-height: 1; }
.upload-target strong { display: block; font-size: 14px; font-weight: 500; }
.upload-target u { text-decoration-color: var(--electric); text-underline-offset: 3px; color: var(--chrome-light); }
.upload-target small { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.camera-option { text-align: center; border-top: 1px dashed #264072; }
.camera-option label { display: block; padding: 10px; color: var(--chrome-light); cursor: pointer; font-size: 14px; }
.logo-preview { display: flex; align-items: center; gap: 12px; background: #011130; border: 1px solid #264072; border-radius: 4px; padding: 10px; margin-top: 10px; }
.logo-preview img { width: 44px; height: 44px; object-fit: contain; background: #F8FAFC; border-radius: 3px; }
.logo-preview > span { font-size: 14px; overflow-wrap: anywhere; }
.logo-preview button { margin-left: auto; padding: 10px 5px; background: transparent; color: var(--muted); font-size: 14px; }
.generate-button { width: 100%; margin-top: 23px; gap: 12px; }
.generate-button > span:last-child { font-size: 20px; }
.button-note { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 10px; }
.designer-nudge { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding: 17px 28px; background: #000B1Fd0; }
.designer-initials { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid #6D88BC; border-radius: 50%; font: 600 17px/1 var(--display); color: var(--chrome-light); }
.designer-nudge p { font-size: 14px; color: var(--muted); }
.text-link { display: inline-flex; gap: 8px; align-items: center; background: transparent; padding: 5px 0; color: var(--white); font-size: 14px; text-decoration: underline; text-decoration-color: #264072; text-underline-offset: 4px; transition: color .2s; }
.text-link:hover { color: var(--chrome-light); }
.preview-panel { min-width: 0; }
.preview-header, .preview-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; letter-spacing: 1.0px; color: var(--muted); }
.preview-header { padding: 0 3px 15px; }
.preview-header > span:first-child { display: flex; align-items: center; gap: 7px; color: var(--chrome-light); }
.preview-caption { padding: 13px 3px; font-size: 14px; letter-spacing: 0.8px; }
.result-stage { position: relative; width: 100%; aspect-ratio: 1/1; border: 1px solid #264072; border-radius: 5px; background: repeating-linear-gradient(45deg, #F8FAFC03 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, #F8FAFC02 0 1px, transparent 1px 4px), #000B1F; padding: 12px; overflow: hidden; }
.result-stage:has(#resultView:not([hidden])) { aspect-ratio: 1/1; }
.result-empty { position: absolute; inset: 12px; display: flex; flex-direction: column; align-items: center; justify-content: end; padding: 36px 18px; background: linear-gradient(#F8FAFC06 1px, transparent 1px), linear-gradient(90deg, #F8FAFC06 1px, transparent 1px), radial-gradient(ellipse at center 35%, #F8FAFC05, transparent 65%), #000B1F; background-size: 32px 32px, 32px 32px, auto, auto; }
.jersey-outline { position: absolute; width: 62%; height: auto; top: 10%; color: #6D88BC; }
.stage-monogram { position: absolute; width: 8%; height: auto; top: 34%; opacity: .8; }
.empty-copy { text-align: center; margin-bottom: 8%; z-index: 1; }
.empty-copy h3 { font: 500 clamp(25px, 2.7vw, 39px)/1.03 var(--display); color: #ECEFF5; }
.empty-copy p { color: var(--muted); font-size: 14px; margin-top: 12px; }
.stage-spec { color: var(--muted); font-size: 14px; letter-spacing: .8px; text-align: center; }
.stage-corner { width: 13px; height: 13px; border: solid #6D88BC; position: absolute; }
.corner-tl { left: 16px; top: 16px; border-width: 1px 0 0 1px; }.corner-tr { right: 16px; top: 16px; border-width: 1px 1px 0 0; }.corner-bl { left: 16px; bottom: 16px; border-width: 0 0 1px 1px; }.corner-br { right: 16px; bottom: 16px; border-width: 0 1px 1px 0; }
.result-view { position: relative; height: 100%; background: #010514; }
.result-view > img { width: 100%; height: 100%; object-fit: contain; }
.watermark-tag { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; font-size: 14px; color: var(--white); border: 1px solid #F8FAFC36; border-radius: 3px; background: #000B1Fef; }
.watermark-reassurance { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0 3px 16px; }
.order-summary .watermark-reassurance { margin: 18px 0 0; }
.result-loading { position: absolute; inset: 12px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000B1F; text-align: center; isolation: isolate; }
.result-loading::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 20%, #F8FAFC0a 45%, transparent 70%); background-size: 250% 100%; animation: shimmer 2.4s linear infinite; }
.loading-jersey { color: var(--chrome-light); font-size: 75px; line-height: 1; margin-bottom: 33px; animation: slow-spin 14s linear infinite; }
.result-loading .eyebrow { font-size: 14px; letter-spacing: .8px; }
.result-loading h3 { margin: 14px 0 10px; font: 500 34px/1.1 var(--display); }
.result-loading > p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.load-track { width: 80%; height: 4px; background: #01153B; margin: 35px 0 15px; border-radius: 9px; overflow: hidden; }
.load-track span { display: block; height: 100%; width: 0; background: var(--chrome-light); transition: width 1s linear; }
.loading-time { color: var(--muted); font-size: 14px; }
.attempts { border-top: 1px solid var(--line); padding-block: 17px; }
.attempt-heading { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.attempt-heading > span:first-child { font-size: 14px; letter-spacing: 1.0px; color: var(--chrome-light); }
.attempt-row { display: flex; gap: 10px; }
.attempt-button { padding: 4px; width: 92px; min-width: 0; border: 1px solid #264072; background: #011130; border-radius: 4px; }
.attempt-button[aria-pressed='true'] { border-color: var(--chrome-light); box-shadow: 0 0 0 1px var(--chrome-light); }
.attempt-button img { width: 100%; height: 78px; object-fit: cover; border-radius: 2px; }
.attempt-button > span { display: block; font-size: 14px; padding-top: 3px; color: var(--muted); }
.attempt-button[aria-pressed='true'] > span { color: var(--chrome-light); }
.feedback { padding-top: 17px; border-top: 1px solid var(--line); }
.feedback legend { float: left; width: 100%; margin-bottom: 12px; font-weight: 600; font-size: 14px; }
.feedback-options { display: flex; gap: 10px; clear: both; }
.feedback-options label, .sets-options label { display: block; position: relative; flex: 1; cursor: pointer; }
.feedback-options input, .choice-card > input, .sets-options input { position: absolute; top: 14px; left: 12px; width: 17px; height: 17px; accent-color: var(--chrome-light); margin: 0; z-index: 1; }
.feedback-options label > span { display: block; border: 1px solid #264072; border-radius: 4px; padding: 11px 10px 11px 36px; background: #011130; font-size: 14px; }
.feedback-options input:checked + span, .sets-options input:checked + span, .choice-card input:checked + .choice-content { background: #01153B; border-color: var(--chrome-light); }
.feedback-options input:focus-visible + span, .sets-options input:focus-visible + span, .choice-card input:focus-visible + .choice-content { outline: 2px solid var(--chrome-light); outline-offset: 4px; }
.feedback-up, .feedback-down { padding: 16px 0 0; }
.feedback-up p, .feedback-down p { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.feedback-up .button { width: 100%; }
.feedback-down { display: flex; flex-wrap: wrap; gap: 0 20px; }
.feedback-down p { width: 100%; }
.feedback-down .text-link { min-height: 42px; }
.error-message { color: var(--error); border: 1px solid #6D88BC; background: #01153B; border-radius: 4px; padding: 12px; font-size: 14px; line-height: 1.6; margin-block: 14px; overflow-wrap: anywhere; }
.mock-banner { border: 1px solid #264072; background: #011130; color: #B8C6DB; padding: 13px 18px; font-size: 14px; margin-bottom: 24px; border-radius: 4px; }
.order-section { background: #000B1F; border-block: 1px solid #264072; }
.section-stamp { font-size: 14px; letter-spacing: 1.0px; color: var(--chrome-light); }
.order-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); gap: 28px; align-items: start; }
.form-block { padding: 28px; background: #011130; border: 1px solid #264072; border-radius: 6px; }
.form-block + .form-block { margin-top: 20px; }
.block-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 23px; }
.block-heading h3 { font: 500 25px/1.1 var(--display); letter-spacing: 0.4px; }
.form-block legend { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-grid.pieces-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pieces-grid + .field-hint { margin-top: 12px; }
.choice-card { position: relative; cursor: pointer; }
.choice-content { height: 100%; display: flex; flex-direction: column; border: 1px solid #264072; border-radius: 5px; padding: 21px 17px 17px; background: #000B1F; }
.choice-card > input { left: auto; right: 14px; }
.cut-icon { display: flex; align-items: center; color: var(--chrome-light); margin-bottom: 15px; height: 37px; }
.cut-icon svg { width: 39px; height: 39px; }
.choice-content > strong { font-size: 15px; font-weight: 600; }
.choice-content > span:not(.cut-icon) { color: var(--muted); font-size: 14px; margin-block: 3px 12px; }
.choice-content > b { font: 600 30px/1 var(--display); color: var(--chrome-light); }
.choice-content small { font: 400 14px/1 var(--body); color: var(--muted); }
.sets-fieldset { margin-top: 23px; }
.sets-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sets-options label > span { display: block; height: 100%; border: 1px solid #264072; padding: 40px 12px 13px; border-radius: 4px; background: #000B1F; font-size: 14px; line-height: 1.5; }
.sets-options small { display: block; color: var(--muted); font-size: 14px; margin-top: 8px; }
.sets-fieldset > .field-hint { margin-top: 11px; }
.count-pill { margin-left: auto; border: 1px solid #264072; border-radius: 3px; padding: 4px 8px; color: var(--chrome-light); font-size: 14px; white-space: nowrap; }
.roster-table { width: 100%; border-collapse: collapse; margin-top: 19px; table-layout: fixed; }
.roster-table th { text-align: left; color: var(--muted); font-size: 14px; letter-spacing: 0.5px; font-weight: 500; padding: 0 6px 10px; }
.roster-table th:nth-child(1) { width: 54px; }.roster-table th:nth-child(2) { width: 42%; }.roster-table th:nth-child(3) { width: 20%; }.roster-table th:nth-child(4) { width: 22%; }.roster-table th:nth-child(5) { width: 32px; }
.roster-table th span { font-size: 14px; }
.roster-table td { padding: 5px; border-top: 1px solid #01153B; }
.roster-table td:first-child { color: var(--chrome-light); font: 500 21px/1 var(--display); }
.roster-table input, .roster-table select { padding: 9px; min-height: 43px; font-size: 14px; }
.roster-table select { padding-right: 1px; }
.roster-label { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.remove-player { display: grid; place-items: center; min-width: 28px; min-height: 43px; padding: 0; color: var(--muted); background: transparent; font-size: 20px; }
.remove-player:hover { color: var(--error); }
.roster-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.small-button { min-height: 40px; padding: 9px 12px; background: #01153B; border: 1px solid #264072; border-radius: 4px; color: var(--chrome-light); font-size: 14px; }
.small-button:hover { border-color: var(--chrome-light); }
.roster-actions .text-link { font-size: 14px; min-height: 40px; }
.roster-minimum { margin-top: 17px; color: var(--chrome-light); font-size: 14px; }
.roster-minimum.met { color: var(--chrome-light); }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 16px; }
.field { display: flex; flex-wrap: wrap; align-content: start; gap: 7px; font-size: 14px; font-weight: 500; min-width: 0; }
.field .optional { margin-left: auto; }
.field input, .field select { min-height: 46px; font-size: 14px; }
.field textarea { font-size: 14px; }
.field input[type='date'] { min-width: 0; max-width: 100%; appearance: none; }
.wide { grid-column: 1 / -1; }
.state-zip { gap: 10px; }
.consents { border-top: 1px solid #264072; margin-top: 25px; padding-top: 21px; }
.consents > label { display: flex; align-items: start; gap: 11px; margin-bottom: 16px; cursor: pointer; color: #B8C6DB; font-size: 14px; line-height: 1.85; }
.consents input { width: 18px; height: 18px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--chrome-light); }
.consents > p { color: #B8C6DB; font-size: 14px; line-height: 1.85; }
.consents a { color: var(--chrome-light); text-decoration: underline; text-underline-offset: 3px; }
[aria-invalid='true'] { border-color: var(--error) !important; }
.order-summary { position: sticky; top: 24px; border: 1px solid #6D88BC; background: radial-gradient(ellipse at 80% 0, #F8FAFC04, transparent 70%), #011130; border-radius: 6px; padding: 25px; }
.summary-kicker { display: flex; align-items: center; gap: 9px; color: var(--chrome-light); font-size: 14px; letter-spacing: .8px; margin-bottom: 22px; }
.summary-preview { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.summary-preview img { width: 96px; height: 128px; object-fit: contain; background: #010514; border: 1px solid #264072; border-radius: 3px; }
.summary-preview .eyebrow { font-size: 14px; letter-spacing: 0.8px; }
.summary-preview h3 { font: 500 28px/1.05 var(--display); margin: 9px 0; }
.summary-preview .text-link { font-size: 14px; }
.summary-details, .price-details { border-top: 1px solid #264072; margin-top: 22px; padding-top: 19px; }
.summary-details p, .price-details p { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; margin-bottom: 11px; color: #B8C6DB; }
.summary-details strong, .price-details strong { color: var(--white); font-weight: 500; text-align: right; }
.summary-details .summary-calculation { display: block; margin-bottom: 0; font-size: 14px; color: var(--muted); }
.price-details .total-line { border-top: 1px solid #264072; padding-top: 17px; margin-top: 17px; font-size: 14px; color: var(--white); }
.total-line strong { font: 600 36px/1 var(--display); color: var(--chrome-light); }
.price-details .processing-note { font-size: 14px; display: block; }
.summary-minimum { color: var(--chrome-light); font-size: 14px; margin-top: 20px; }
.order-summary > .button { width: 100%; margin-top: 16px; }
.summary-assurance { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; margin-top: 20px; padding-top: 17px; border-top: 1px solid #264072; }
.summary-assurance > span { color: var(--chrome-light); }
.success-panel { border: 1px solid #6D88BC; background: radial-gradient(ellipse at center, #F8FAFC04, transparent 70%), #000B1F; padding: 64px 24px; text-align: center; border-radius: 7px; }
.success-icon { display: inline-grid; place-items: center; width: 55px; height: 55px; border: 1px solid var(--chrome-light); border-radius: 50%; color: var(--chrome-light); font-size: 26px; margin-bottom: 23px; }
.success-panel .eyebrow { justify-content: center; margin-bottom: 15px; }
.success-panel > p:not(.eyebrow) { margin: 18px auto 0; max-width: 540px; color: var(--muted); }
.success-panel .order-number { font-size: 18px; }
.order-number strong { color: var(--chrome-light); }
.success-panel .sent-confirmation { color: var(--chrome-light) !important; }
.success-panel .button { margin-top: 25px; min-width: 220px; }
.how-section { border-top: 1px solid #F8FAFC0d; background: #000B1F; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { position: relative; padding: 26px 26px 24px; border: 1px solid var(--line); background: linear-gradient(130deg, #01153B40, transparent); }
.how-number { display: block; font: 500 68px/.9 var(--display); color: #6D88BC; }
.how-icon { position: absolute; top: 26px; right: 26px; font-size: 25px; color: var(--chrome-light); }
.how-card h3 { font: 500 28px/1.1 var(--display); letter-spacing: 0.1px; margin-top: 34px; }
.how-card p { color: var(--muted); font-size: 14px; line-height: 1.9; margin: 14px 0 24px; }
.how-caption { display: block; border-top: 1px solid var(--line); padding-top: 17px; color: var(--chrome-light); font-size: 14px; letter-spacing: 1.0px; }
.why-section { background: radial-gradient(ellipse at 15% 60%, #F8FAFC02, transparent 65%); }
.why-grid { display: grid; grid-template-columns: 1fr 1.04fr; align-items: center; gap: 95px; }
.why-visual { position: relative; padding: 10px 25px 10px 10px; }
.uniform-photo { transform: rotate(-3deg); border: 1px solid #6D88BC; padding: 10px; background: #011130; box-shadow: 0 22px 40px #01051455; }
.uniform-photo img { width: 100%; height: auto; }
.uniform-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--chrome-light); padding: 13px 5px 4px; font-size: 14px; letter-spacing: 1.0px; }
.fabric-label { position: absolute; right: -9px; bottom: 55px; transform: rotate(3deg); background: var(--chrome-light); color: #01153B; padding: 17px 24px; font-size: 14px; letter-spacing: .8px; box-shadow: 0 10px 25px #01051455; }
.fabric-label > span { display: block; font: 600 51px/1 var(--display); margin-bottom: 6px; }
.why-copy h2 { font-size: clamp(42px, 4.3vw, 62px); }
.why-intro { color: var(--muted); margin: 23px 0 26px; font-size: 14px; max-width: 430px; }
.why-benefit { display: flex; gap: 18px; border-top: 1px solid var(--line); padding: 19px 0; }
.why-benefit > span { color: var(--electric); font: 500 17px/1.5 var(--display); }
.why-benefit h3 { font: 500 22px/1.2 var(--display); letter-spacing: 0.5px; }
.why-benefit p { color: var(--muted); font-size: 14px; margin-top: 7px; line-height: 1.8; }
.chrome-link { color: var(--chrome-light); font-size: 14px; margin-top: 10px; }
.site-footer { background: #010514; border-top: 1px solid #264072; padding-top: 40px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-top > p { font: 500 27px/1.1 var(--display); letter-spacing: 0.5px; }
.footer-top > p > span { color: var(--chrome-light); }
.back-top { display: flex; gap: 20px; align-items: center; font-size: 14px; letter-spacing: 1.0px; }
.back-top > span { font-size: 22px; color: var(--chrome-light); }
.footer-links { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--muted); margin-block: 25px 35px; }
.footer-links > span { margin-right: auto; }
.footer-links .text-link { font-size: 14px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); padding-block: 22px; color: var(--muted); font-size: 14px; }
.footer-base > div { display: flex; gap: 20px; }
.footer-base > span:last-child { letter-spacing: 1.0px; }
.footer-base a:hover, .footer-links > a:hover { color: var(--chrome-light); }
.help-modal { color: var(--white); width: min(650px, calc(100% - 32px)); max-height: calc(100dvh - 48px); max-width: none; padding: 0; border: 1px solid #6D88BC; border-radius: 8px; background: #011130; box-shadow: 0 30px 100px #010514aa; overscroll-behavior: contain; }
.help-modal::backdrop { background: #010514da; backdrop-filter: blur(8px); }
.modal-inner { position: relative; padding: 35px; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid #264072; background: #01153B; border-radius: 50%; color: var(--white); font-size: 25px; }
#helpIntro .eyebrow { font-size: 14px; padding-right: 35px; }
#helpTitle { font-size: 39px; line-height: 1.06; padding-right: 16px; margin: 20px 0 15px; }
#helpIntro > p:last-child { color: var(--muted); font-size: 14px; margin-bottom: 25px; }
.attachment-note { margin-top: 19px; color: var(--chrome-light); font-size: 14px; }
#helpForm > .button { width: 100%; margin-top: 24px; }
.help-done { padding-block: 30px; text-align: center; }
.help-done h3 { font: 500 35px/1.1 var(--display); }
.help-done p { color: var(--muted); font-size: 14px; margin: 16px 0 25px; }
.mobile-action-bar { display: none; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 12px); max-width: min(90vw, 450px); padding: 12px 18px; border: 1px solid #6D88BC; background: #01153B; color: var(--white); border-radius: 5px; font-size: 14px; box-shadow: 0 10px 40px #01051477; z-index: 20; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; text-align: center; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.js-reveal .reveal { transition: opacity .65s, transform .65s; }
.js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(15px); }
@keyframes shimmer { from { background-position: 140% 0; } to { background-position: -140% 0; } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@media (min-width: 1550px) { .hero-grid { padding-block: 86px; }.hero-art { max-width: 565px; }.hero-copy { padding-left: 12px; } }
@media (max-width: 1190px) {
  .wrap { width: calc(100% - 72px); }.nav-studio { display: none; }.hero-grid { gap: 42px; padding-block: 55px; }
  h1 { font-size: clamp(72px, 8.3vw, 100px); }.hero-lead { font-size: 14px; }.hero-stats { gap: 18px; }.hero-stats > div + div { padding-left: 18px; }.hero-stats > div > span { font-size: 14px; }
  .art-note { padding: 16px; }.art-note > div { font-size: 16px; }.art-note .sparkle { font-size: 28px; }
  #genForm { padding: 23px; }.panel-kicker .mini-label { display: none; }.studio-grid { gap: 23px; }.chip-group { display: block; }.chip-label { display: block; width: auto; padding: 0 0 6px; }.chips button { padding: 8px; }.inspiration-title { margin-bottom: 15px; }
  .order-layout { grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 20px; }.form-block { padding: 22px; }.order-summary { padding: 20px; }.summary-preview { grid-template-columns: 78px 1fr; gap: 12px; }.summary-preview img { width: 78px; height: 104px; }.summary-preview h3 { font-size: 25px; }
  .roster-table th:nth-child(1) { width: 38px; }.roster-table th:nth-child(2) { width: 38%; }.roster-table th:nth-child(3) { width: 22%; }.roster-table th:nth-child(4) { width: 24%; }.roster-table th span { display: none; }.roster-table input { padding: 9px 6px; }
  .why-grid { gap: 50px; }.how-card { padding: 23px; }.footer-top > p { font-size: 22px; }
}
@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); }.nav-inner { min-height: 78px; }.nav-inner nav { gap: 20px; }.hero-grid { gap: 23px; }.hero-art { padding-right: 10px; }.art-index { right: -15px; }
  h1 { font-size: clamp(62px, 8.6vw, 76px); }.hero .eyebrow { font-size: 14px; letter-spacing: .8px; }.hero-stats { margin-top: 28px; gap: 12px; }.hero-stats > div + div { padding-left: 12px; }.hero-stats strong { font-size: 30px; }.hero-stats > div > span { font-size: 14px; letter-spacing: 0.4px; }.hero-cta { min-width: 0; width: 100%; max-width: 310px; }.hero-reassurance { font-size: 14px; }.art-note { padding: 13px; }.art-note > div { font-size: 15px; }.note-arrow { margin-left: 0; }.hero-photo figcaption { font-size: 14px; letter-spacing: 0.5px; }.hero-photo .swatch { width: 7px; height: 7px; }
  .feature-ribbon > div { font-size: 14px; letter-spacing: 1.0px; gap: 15px; }.feature-ribbon i { font-size: 16px; }.section-space { padding-block: 75px; }.section-heading { align-items: start; gap: 18px; }h2 { font-size: 39px; }.try-counter { font-size: 14px; padding: 9px 11px; margin-top: 28px; }
  .studio-grid { gap: 18px; }#genForm { padding: 20px; }.prompt-label { font-size: 17px; }.prompt-label + p { font-size: 14px; }#prompt { font-size: 14px; padding: 13px 13px 30px; }.chips button { font-size: 14px; }.inspiration-title { font-size: 14px; letter-spacing: 0.6px; }.upload-target { padding: 13px 8px; gap: 10px; }.upload-target strong { font-size: 14px; }.upload-target small { font-size: 14px; }.generate-button { padding-inline: 14px; font-size: 14px; }.designer-nudge { padding: 15px 20px; }.designer-nudge p { font-size: 14px; }.preview-header { font-size: 14px; letter-spacing: 0.6px; }.preview-caption > span:last-child { display: none; }.empty-copy p { font-size: 14px; }.stage-spec { font-size: 14px; letter-spacing: 0.7px; }.result-empty { padding: 27px 10px; }.empty-copy { margin-bottom: 7%; }.feedback-options { flex-direction: column; }.result-loading { padding: 15px; }.result-loading h3 { font-size: 28px; }
  .order-layout { grid-template-columns: 1fr; }.order-summary { position: static; }.summary-preview { grid-template-columns: 96px 1fr; }.summary-preview img { width: 96px; height: 128px; }.summary-preview h3 { font-size: 33px; }.summary-details, .price-details { margin-top: 20px; }.summary-details p, .price-details p { font-size: 14px; }.section-stamp { display: none; }.form-block { padding: 28px; }.roster-table th:nth-child(2) { width: 44%; }.roster-table th:nth-child(1) { width: 60px; }.roster-table th:nth-child(3) { width: 21%; }.roster-table th:nth-child(4) { width: 22%; }
  .how-grid { gap: 14px; }.how-card { padding: 20px; }.how-icon { top: 20px; right: 20px; }.how-card h3 { font-size: 25px; }.how-card p { font-size: 14px; }.how-caption { font-size: 14px; letter-spacing: 0.5px; }.why-grid { gap: 34px; }.why-copy h2 { font-size: 44px; }.why-intro { font-size: 14px; }.why-benefit { gap: 12px; }.why-benefit h3 { font-size: 20px; }.why-benefit p { font-size: 14px; }.uniform-photo figcaption { font-size: 14px; letter-spacing: 0.4px; }.fabric-label { padding: 14px 17px; font-size: 14px; }.fabric-label > span { font-size: 43px; }.footer-top > p { font-size: 19px; }.footer-links { gap: 18px; font-size: 14px; }.footer-links .text-link { font-size: 14px; }.footer-base > span:last-child { display: none; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 16px; }.wrap { width: calc(100% - 36px); }body { padding-bottom: 83px; }.announcement { font-size: 14px; letter-spacing: .8px; min-height: 29px; }.announcement-extra { display: none; }.nav-inner { min-height: 76px; gap: 14px; }.brand { gap: 10px; }.brand img { width: 29px; height: 37px; }.brand > span { font-size: 21px; }.brand small { font-size: 14px; letter-spacing: .8px; }.nav-inner nav > a { display: none; }.nav-help { font-size: 14px; }.nav-help span { margin-left: 3px; }
  .hero-grid { grid-template-columns: 1fr; gap: 37px; padding-block: 38px 42px; }.hero .eyebrow { font-size: 14px; letter-spacing: .8px; }.line-mark { width: 19px; }h1 { font-size: clamp(75px, 20vw, 119px); line-height: .91; letter-spacing: -1.2px; margin: 25px 0 23px; }.hero-lead { font-size: 14px; line-height: 1.9; max-width: 380px; }.hero-lead br { display: none; }.hero-cta { max-width: none; min-height: 55px; margin-top: 24px; font-size: 14px; }.hero-reassurance { font-size: 14px; justify-content: center; margin-top: 12px; gap: 5px; }.hero-stats { margin-top: 28px; max-width: none; padding-top: 20px; gap: 16px; }.hero-stats strong { font-size: 34px; }.hero-stats strong > span { font-size: 14px; }.hero-stats > div > span { font-size: 14px; letter-spacing: 0.5px; }.hero-stats > div + div { padding-left: 16px; }
  .hero-art { width: 90%; max-width: 450px; margin: 0 auto; padding: 0 7px 21px 0; }.hero-photo { padding: 8px; transform: rotate(3deg); }.specimen-top { font-size: 14px; padding: 3px 4px 10px; }.hero-photo figcaption { font-size: 14px; padding-top: 11px; }.hero-photo .swatch { width: 8px; height: 8px; }.art-note { padding: 15px 18px; gap: 10px; }.art-note > div { font-size: 17px; }.art-note .sparkle { font-size: 30px; }.note-arrow { font-size: 27px; margin-left: 8px; }.art-index { right: -16px; font-size: 14px; }.art-orbit { inset: 2% -5% 2% -5%; }.art-orbit::before { inset: -13px; }
  .feature-ribbon > div { min-height: 51px; gap: 11px; font-size: 14px; letter-spacing: 0.9px; justify-content: center; flex-wrap: wrap; }.feature-ribbon span:nth-of-type(n+4), .feature-ribbon i:nth-of-type(n+3) { display: none; }.feature-ribbon i { font-size: 15px; }
  .section-space { padding-block: 58px; }.section-heading { display: block; margin-bottom: 24px; }.section-heading .eyebrow { font-size: 14px; letter-spacing: .8px; margin-bottom: 13px; }h2 { font-size: clamp(37px, 10vw, 55px); letter-spacing: -.3px; }.section-heading h2 > span { display: block; }.section-heading p:not(.eyebrow) { font-size: 14px; margin-top: 12px; max-width: 390px; }.try-counter { display: inline-flex; margin-top: 20px; font-size: 14px; padding: 10px 13px; }
  .studio-grid { grid-template-columns: 1fr; gap: 26px; }#genForm { padding: 21px 19px; }.panel-kicker { margin-bottom: 23px; }.panel-kicker .mini-label { display: inline; font-size: 14px; letter-spacing: 0.4px; }.prompt-label { font-size: 18px; }.field-hint { font-size: 14px; }#prompt { min-height: 200px; font-size: 16px; line-height: 1.65; padding: 14px 14px 30px; }.prompt-count { font-size: 14px; }.inspiration { margin-top: 24px; }.inspiration-title { font-size: 14px; letter-spacing: 0.7px; }.chip-group { margin-bottom: 13px; }.chip-label { font-size: 14px; padding-bottom: 7px; }.chips { gap: 7px; }.chips button { min-height: 44px; font-size: 14px; padding: 10px 12px; }.color-chips button { font-size: 14px; padding: 10px; }.upload-target { gap: 12px; min-height: 94px; padding: 16px 10px; }.upload-target strong { font-size: 14px; }.upload-target small { font-size: 14px; }.camera-option label { min-height: 44px; font-size: 14px; }.generate-button { font-size: 14px; min-height: 55px; }.designer-nudge { padding: 17px 19px; }.designer-nudge p { font-size: 14px; }.text-link { min-height: 40px; }.designer-nudge .text-link { min-height: 29px; }.logo-preview button { min-height: 44px; }
  .preview-header { font-size: 14px; padding-bottom: 13px; }.result-stage { padding: 9px; }.result-empty, .result-loading { inset: 9px; }.result-empty { padding: 28px 14px; }.jersey-outline { top: 8%; width: 61%; }.stage-monogram { top: 31%; }.empty-copy h3 { font-size: 32px; }.empty-copy p { font-size: 14px; }.empty-copy { margin-bottom: 7%; }.stage-spec { font-size: 14px; letter-spacing: 0.6px; }.preview-caption { font-size: 14px; }.preview-caption > span:last-child { display: inline; font-size: 14px; letter-spacing: 0; }.result-loading h3 { font-size: 31px; }.result-loading .eyebrow { font-size: 14px; }.loading-time { font-size: 14px; }.feedback { padding-top: 20px; }.feedback-options { flex-direction: row; gap: 8px; }.feedback-options label > span { min-height: 48px; padding: 13px 8px 13px 31px; font-size: 14px; }.feedback-options input { left: 9px; top: 15px; width: 15px; height: 15px; }.feedback-up p, .feedback-down p { font-size: 14px; }.attempt-button { width: 83px; }.attempt-button img { height: 89px; }
  .order-layout { gap: 20px; }.form-block { padding: 22px 17px; }.block-heading { gap: 10px; margin-bottom: 22px; }.block-heading h3 { font-size: 24px; }.count-pill { font-size: 14px; padding: 4px 6px; }.choice-grid { gap: 10px; }.choice-content { padding: 18px 13px; }.choice-content > strong { font-size: 14px; }.choice-content > span:not(.cut-icon) { font-size: 14px; }.choice-content > b { font-size: 29px; }.sets-options { gap: 6px; }.sets-options label > span { font-size: 14px; padding: 40px 9px 12px; }.sets-options small { font-size: 14px; }.sets-options input { left: 10px; }.sets-fieldset .field-hint { font-size: 14px; }
  .roster-table, .roster-table tbody { display: block; }.roster-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }.roster-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; margin-bottom: 12px; background: #000B1F; border: 1px solid #264072; border-radius: 5px; position: relative; }.roster-table td { display: block; padding: 0; border: 0; }.roster-table td:first-child { grid-column: 1/-1; font-size: 18px; min-height: 30px; padding-top: 4px; }.roster-table td:first-child::before { content: 'PLAYER '; font-size: 14px; font-family: var(--body); letter-spacing: 1.0px; }.roster-table td:nth-child(2) { grid-column: 1/-1; }.roster-table td:last-child { position: absolute; right: 5px; top: 5px; }.roster-label { display: block; position: static; clip-path: none; width: auto; height: auto; font-size: 14px; color: var(--muted); margin-bottom: 6px; }.roster-table input, .roster-table select { font-size: 16px; min-height: 46px; padding: 10px; }.remove-player { min-width: 44px; min-height: 44px; font-size: 23px; }.roster-actions { gap: 8px; }.small-button { min-height: 44px; font-size: 14px; padding-inline: 11px; }.roster-actions .text-link { font-size: 14px; min-height: 44px; }.roster-minimum { font-size: 14px; }
  .fields-grid { gap: 16px 12px; }.field { font-size: 14px; }.field input, .field select, .field textarea { font-size: 16px; }.field .optional { font-size: 14px; }.field .field-hint { font-size: 14px; }.state-zip { grid-column: 1/-1; }.field:has(#city) { grid-column: 1/-1; }.consents label, .consents p { font-size: 14px; line-height: 1.8; }.consents input { width: 20px; height: 20px; }.consents > label { gap: 11px; margin-bottom: 18px; }.order-summary { padding: 22px; }.summary-preview h3 { font-size: 30px; }.summary-preview .eyebrow { font-size: 14px; }.summary-preview .text-link { font-size: 14px; }.summary-assurance { font-size: 14px; }.success-panel { padding: 42px 22px; }.success-panel > p:not(.eyebrow) { font-size: 14px; }.success-panel .eyebrow { font-size: 14px; }
  .how-grid { grid-template-columns: 1fr; gap: 14px; }.how-card { padding: 23px; }.how-number { font-size: 61px; }.how-card h3 { font-size: 30px; margin-top: 24px; }.how-card p { font-size: 14px; max-width: 420px; }.how-icon { top: 25px; right: 24px; }.how-caption { font-size: 14px; letter-spacing: 0.8px; }
  .why-grid { grid-template-columns: 1fr; gap: 44px; }.why-visual { width: 91%; margin: 0 auto; padding-right: 13px; }.uniform-photo { padding: 8px; }.uniform-photo figcaption { font-size: 14px; letter-spacing: 0.5px; }.fabric-label { bottom: 38px; right: -7px; padding: 17px 20px; font-size: 14px; }.fabric-label > span { font-size: 46px; }.why-copy h2 { font-size: 48px; }.why-copy > .eyebrow { font-size: 14px; }.why-intro { font-size: 14px; }.why-benefit { padding-block: 20px; gap: 16px; }.why-benefit h3 { font-size: 24px; }.why-benefit p { font-size: 14px; }.chrome-link { font-size: 14px; }
  .site-footer { padding-top: 30px; }.footer-top { flex-wrap: wrap; gap: 26px; }.footer-top > p { width: 100%; font-size: 24px; order: 3; }.back-top { margin-left: auto; font-size: 14px; gap: 10px; }.footer-links { display: block; margin-block: 20px 26px; font-size: 14px; }.footer-links > span, .footer-links > a { display: block; }.footer-links > a { margin-top: 15px; }.footer-links .text-link { font-size: 14px; }.footer-base { font-size: 14px; padding-block: 20px; gap: 9px; }.footer-base > div { gap: 24px; }.footer-base a { display: inline-flex; align-items: center; min-height: 36px; }
  .help-modal { width: calc(100% - 20px); max-height: calc(100dvh - 24px); border-radius: 7px; }.modal-inner { padding: 26px 20px; }#helpTitle { font-size: 34px; padding-right: 0; margin-top: 25px; }.modal-close { width: 44px; height: 44px; right: 9px; top: 9px; }.help-modal .fields-grid { grid-template-columns: 1fr; }.help-modal .field { font-size: 14px; }.help-modal .consents { font-size: 14px; }.help-done h3 { font-size: 30px; }.help-done p { font-size: 14px; }
  .mobile-action-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; align-items: center; gap: 14px; justify-content: space-between; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #264072; background: #000B1Ff5; backdrop-filter: blur(18px); box-shadow: 0 -8px 35px #01051466; }.mobile-action-bar > div { min-width: 0; }.mobile-action-bar > div > span { display: block; font-size: 14px; letter-spacing: .8px; color: var(--chrome-light); }.mobile-action-bar strong { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; }.mobile-action-bar .button { min-height: 46px; min-width: 136px; padding: 12px 15px; font-size: 14px; gap: 10px; }.mobile-action-bar .button > span { font-size: 18px; }.toast { bottom: calc(90px + env(safe-area-inset-bottom)); font-size: 14px; }.modal-open .mobile-action-bar { visibility: hidden; }
}
@media (max-width: 430px) {
  .hero-grid { padding-block: 24px 22px; gap: 18px; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 28px); }.nav-help { font-size: 14px; }h1 { font-size: 64px; }.hero-reassurance { font-size: 14px; }.hero-stats { gap: 12px; }.hero-stats > div + div { padding-left: 12px; }.hero-stats > div > span { font-size: 14px; }.hero-stats strong { font-size: 30px; }.feature-ribbon > div { gap: 10px; font-size: 14px; }.panel-kicker .mini-label { display: none; }#genForm { padding: 19px 15px; }.chips button { font-size: 14px; }.color-chips button { font-size: 14px; }.form-block { padding-inline: 14px; }.choice-content > strong { font-size: 14px; }.sets-options label > span { font-size: 14px; }.sets-options small { font-size: 14px; }.feedback-options { flex-direction: column; }.fields-grid { grid-template-columns: 1fr; }.mobile-action-bar { padding-inline: 14px; gap: 8px; }.mobile-action-bar strong { font-size: 14px; }.mobile-action-bar .button { min-width: 128px; }.hero-photo figcaption { font-size: 14px; }
}
/* Readable type, metallic detail, and room for the larger scale. */
:is(.hero-lead, .section-heading p:not(.eyebrow), .how-card p, .why-intro, .why-benefit p,
    .feedback-up p, .feedback-down p, .empty-copy p, .result-loading > p:not(.eyebrow),
    #helpIntro > p:last-child, .help-done p, .success-panel > p:not(.eyebrow), .gallery-heading > p,
    .pricing-story > div > p:not(.eyebrow), .gate-intro > p:not(.eyebrow):not(.gate-assurance)) {
  font-size: var(--copy-size); line-height: 1.75;
}
:is(.field, .help-modal .field, .consents > label, .form-block legend, .roster-label, .camera-option label,
    .field-title, .upload-target strong, .feedback legend, .choice-content > strong, .sets-options label > span) { font-size: 16px; line-height: 1.65; }
:is(.field input, .field select, .field textarea, .roster-table input, .roster-table select, #prompt) { font-size: 16px; line-height: 1.65; }
.button { font-size: 16px; line-height: 1.5; }
.hero-line { display: block; }
.chrome-accent, h2 > span, .hero-stats strong, .how-number, .pricing-numbers strong, .total-line strong, .choice-content > b, #summaryQty, .step-token {
  color: var(--chrome-light); background-image: var(--type-chrome); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.chrome-accent, h2 > span { background-size: 220% 100%; animation: chrome-shimmer 12s ease-in-out infinite; }
.button-electric { position: relative; isolation: isolate; overflow: hidden; border-color: #B8C6DB; background-size: 100% 100%; text-shadow: 0 1px 0 #B8C6DB40; }
.button-electric::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, #B8C6DB80 48%, transparent 65%); transform: translateX(-140%); animation: cta-shimmer 9s ease-in-out infinite; }
.button-electric:disabled::after { animation: none; opacity: 0; }
.line-mark, .load-track span { background: var(--edge-electric); }
.hero-stats, .feature-ribbon, .uniform-gallery, .how-caption { border-image: var(--edge-electric) 1; }
.step-token { border-image: var(--edge-electric) 1; width: 30px; height: 30px; }
.hero-stats { max-width: none; gap: 18px; }
.hero-stats > div { min-width: 0; }
.hero-stats > div + div { padding-left: 18px; }
.hero-stats > div > span { font-size: 14px; line-height: 1.6; letter-spacing: .3px; white-space: normal; }
.hero-stats strong { flex-wrap: wrap; gap: 4px; }
.hero-stats strong > span { -webkit-text-fill-color: var(--chrome-light); }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 44px; }
.hero { isolation: isolate; background: #010514; }
.hero::before { content: ''; pointer-events: none; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 77% 39%, #B8C6DB24, transparent 45%), radial-gradient(ellipse at 96% 12%, #0055F020, transparent 50%); }
.hero-art::before { content: ''; position: absolute; pointer-events: none; inset: -15% -10%; background: conic-gradient(from 225deg at 70% 45%, transparent 0deg, #B8C6DB13 20deg, transparent 44deg, #B8C6DB0b 62deg, transparent 80deg); filter: blur(20px); }
.hero-photo { transform: rotate(1.5deg); padding: 10px; border: 1px solid transparent; background: linear-gradient(#011130, #011130) padding-box, var(--edge-electric) border-box; box-shadow: 0 30px 65px #01051499, 0 0 45px #B8C6DB12; }
.hero-photo picture { display: block; overflow: hidden; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 2000/1129; object-fit: cover; transform-origin: center top; }
@media (prefers-reduced-motion: no-preference) { .hero-photo img { transform: translateY(var(--hero-drift, 0px)) scale(var(--hero-scale, 1)); } }
@media (prefers-reduced-motion: reduce) { .hero-photo img { transform: none !important; } }
.hero-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 20%, #B8C6DB0b 47%, transparent 70%); background-size: 260% 100%; animation: chrome-shimmer 18s ease-in-out infinite; }
.specimen-top, .hero-photo figcaption { font-size: 14px; line-height: 1.6; letter-spacing: .3px; flex-wrap: wrap; }
.hero-photo figcaption { padding-inline: 0; }
.art-index { display: none; }
.art-note { margin-top: 30px; border: 1px solid transparent; background: linear-gradient(#011130, #011130) padding-box, var(--edge-electric) border-box; }
.hero-line { animation: hero-enter .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-line:nth-child(2) { animation-delay: .13s; }
.hero-line.chrome-accent { animation: hero-enter .9s .26s cubic-bezier(.2,.7,.2,1) both, chrome-shimmer 12s ease-in-out infinite; }
.hero-stats > div { animation: hero-enter .8s .4s both; }
.hero-stats > div:nth-child(2) { animation-delay: .5s; }.hero-stats > div:nth-child(3) { animation-delay: .6s; }
.hero-reassurance { font-size: 14px; }
.lead-gate { position: relative; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); gap: 42px; padding: 38px; margin-bottom: 26px; border: 1px solid transparent; border-radius: 9px; background: linear-gradient(#000B1F, #000B1F) padding-box, var(--edge-electric) border-box; box-shadow: 0 20px 55px #01051444; scroll-margin-top: 24px; }
.gate-intro h3, .pricing-story h3 { font: 600 clamp(36px, 3.8vw, 54px)/1.05 var(--display); margin: 25px 0 22px; }
.gate-intro > p:not(.eyebrow) { color: var(--muted); }
.gate-assurance { font-size: 14px; margin-top: 22px; }
.gate-lock { display: block; font: 500 90px/1 var(--display); color: var(--electric); margin-top: 30px; }
#leadForm .consents { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
#leadForm .consents > p { grid-column: 1/-1; }
#submitLead { width: 100%; margin-top: 24px; }
.field-error { display: block; width: 100%; color: var(--error); font-size: 14px; font-weight: 400; line-height: 1.6; }
.lead-greeting { border-left: 3px solid var(--electric); padding: 12px 18px; margin-bottom: 24px; color: var(--chrome-light); overflow-wrap: anywhere; }
.generator-lock-note { display: flex; align-items: center; gap: 12px; color: var(--chrome-light); font-size: 16px; margin: 24px 0; }
.is-locked { opacity: .48; user-select: none; }
:disabled { cursor: not-allowed; }
#prompt:disabled { background: #01153B; border-style: dashed; }
#btnGen:disabled { background: #01153B; color: #B8C6DB; border-color: #264072; text-shadow: none; }
.uniform-gallery { border-block: 1px solid; padding-block: 65px 85px; background: #000B1F; }
.gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
.gallery-heading .eyebrow { margin-bottom: 14px; }
.gallery-heading > p, .pricing-story p { color: var(--muted); }
.uniform-band { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.photo-card picture, .how-photo picture { display: block; overflow: hidden; border: 1px solid transparent; background: linear-gradient(#011130, #011130) padding-box, var(--edge-electric) border-box; }
.photo-card img { width: 100%; height: auto; object-fit: cover; }
.uniform-band picture { height: 390px; }.uniform-band img { height: 100%; object-position: center 45%; }
.photo-card figcaption, .how-photo figcaption { color: var(--muted); font-size: 14px; line-height: 1.65; padding-top: 12px; }
.pricing-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; margin-top: 65px; }
.pricing-story h3 { margin-top: 18px; }
.pricing-numbers { display: flex; gap: 35px; margin-top: 22px; }
.pricing-numbers strong { display: block; font: 600 48px/1.2 var(--display); }
.pricing-numbers span { display: block; font-size: 16px; color: var(--muted); margin-top: 4px; }
.how-photo { margin-bottom: 25px; }
.how-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center 42%; }
.how-card { display: flex; flex-direction: column; }
.how-caption { margin-top: auto; font-size: 14px; }
.how-icon { display: none; }
.how-card h3 { margin-top: 24px; }
.why-grid { gap: 55px; }
.why-visual { padding: 0; }.uniform-photo { transform: none; border: 1px solid transparent; background: linear-gradient(#011130, #011130) padding-box, var(--edge-electric) border-box; }
.uniform-photo figcaption { font-size: 14px; line-height: 1.65; letter-spacing: .3px; }
.preview-header, .preview-caption, .inspiration-title, .panel-kicker { flex-wrap: wrap; }
.panel-kicker .mini-label { display: none; }
.feedback-options { flex-direction: column; }
.feedback-options label > span { font-size: 16px; line-height: 1.65; }
.result-stage { min-height: 0; }
.stage-spec { font-size: 14px; line-height: 1.65; }.empty-copy p { max-width: 26ch; }
.chip-group { display: block; }.chip-label { width: auto; padding: 0 0 7px; display: block; }
.brand small { letter-spacing: 3px; line-height: 1.4; }
.footer-top, .footer-links { flex-wrap: wrap; }.footer-links > * { overflow-wrap: anywhere; }
@keyframes chrome-shimmer { 0%, 25% { background-position: 100% 50%; } 65%, 100% { background-position: 0% 50%; } }
@keyframes cta-shimmer { 0%, 62% { transform: translateX(-140%); } 88%, 100% { transform: translateX(140%); } }
@keyframes hero-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1100px) {
  .nav-studio { display: none; }.hero-grid { gap: 28px; }.hero-stats { gap: 10px; }.hero-stats > div + div { padding-left: 10px; }
  .lead-gate { grid-template-columns: 1fr; gap: 24px; }.gate-intro h3 br { display: none; }.gate-lock { display: none; }
  .gate-intro h3 { margin: 18px 0 12px; }.gate-assurance { margin-top: 12px; }.pricing-story { gap: 30px; }
  .studio-grid { grid-template-columns: 1fr; }.preview-panel { max-width: 660px; width: 100%; margin-inline: auto; }.result-stage { min-height: 0; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 660px; }.hero-art { width: 100%; max-width: 680px; margin-inline: auto; padding: 0 10px 20px; }
  .hero-photo { transform: rotate(1.5deg); }.hero-stats { max-width: 580px; }.hero-lead { max-width: 540px; }
  .gallery-heading { display: block; }.gallery-heading > p { margin-top: 20px; }.uniform-band picture { height: 310px; }
  .how-grid { grid-template-columns: 1fr; }.how-photo img { aspect-ratio: 3/2; }.how-photo { max-width: 620px; }
  .why-grid { grid-template-columns: 1fr; }.why-visual { max-width: 660px; width: 100%; }.why-intro { max-width: none; }
  .roster-table th:nth-child(1) { width: 64px; }
}
@media (max-width: 699px) {
  :root { --copy-size: 16.5px; }
  .hero-photo figcaption { font-size: 14px; }.hero-photo .swatch { width: 10px; height: 10px; }
  .hero-reassurance { justify-content: start; }.hero-art { max-width: none; }.art-note { margin-top: 25px; }
  .hero-stats > div > span { font-size: 14px; letter-spacing: 0; }.hero-stats { gap: 8px; }.hero-stats > div + div { padding-left: 8px; }
  .hero-stats strong { font-size: 30px; gap: 3px; }.hero-stats strong > span { font-size: 14px; }
  .lead-gate { padding: 23px 18px; }.lead-gate .fields-grid, #leadForm .consents { grid-template-columns: 1fr; }
  .gate-intro h3 br { display: initial; }.gate-intro .eyebrow { font-size: 14px; letter-spacing: .3px; }
  .uniform-gallery { padding-block: 48px; }.uniform-band { grid-template-columns: 1fr 1fr; gap: 16px; }.gallery-wide { grid-column: 1/-1; }
  .uniform-band .photo-card:last-child { grid-column: 1/-1; }.uniform-band picture { height: auto; }.uniform-band img { height: auto; }
  .uniform-band .photo-card:last-child img { aspect-ratio: 4/3; object-position: center 43%; }
  .pricing-story { grid-template-columns: 1fr; gap: 28px; margin-top: 45px; }.pricing-numbers { gap: 28px; }
  .sets-options { grid-template-columns: 1fr; }.sets-options label > span { padding: 12px 12px 12px 40px; }.sets-options small { margin-top: 3px; }
  .choice-grid { grid-template-columns: 1fr; }.choice-content { padding: 20px; }.choice-content > span:not(.cut-icon) { font-size: 14px; }
  .choice-grid.pieces-grid { grid-template-columns: 1fr; }
  .pieces-grid .choice-content { min-height: 88px; padding: 12px 44px 12px 13px; justify-content: center; }
  .pieces-grid .choice-content > span { margin-bottom: 0; }
  .feedback-options label > span { padding-left: 38px; }.feedback-options input { top: 18px; }
  .mobile-action-bar { gap: 12px; align-items: center; }.mobile-action-bar > div { flex: 1; }.mobile-action-bar > div > span { font-size: 14px; letter-spacing: 0; line-height: 1.5; }.mobile-action-bar strong { font-size: 14px; line-height: 1.5; }
  .mobile-action-bar .button { min-width: 0; flex: 1; font-size: 16px; padding: 12px; gap: 8px; }
  body { padding-bottom: 145px; }.toast { bottom: calc(145px + env(safe-area-inset-bottom)); }
  .nav-help { font-size: 14px; line-height: 1.5; text-align: right; }.nav-inner { gap: 16px; }.nav-inner nav { min-width: 0; }
  .brand > span { font-size: 21px; }.brand small { font-size: 14px; letter-spacing: 3px; }
  .result-stage { min-height: 0; }.preview-caption > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }.js-reveal .reveal:not(.in) { opacity: 1; transform: none; }.button:hover { transform: none !important; }
  .hero-photo img { transform: none !important; will-change: auto; }
  .hero-line, .hero-stats > div { opacity: 1; transform: none; }
  .button-electric::after, .hero-photo::after { display: none; }
}

/* ---- prompt coaching: rotating examples + detail check ---- */
#prompt::placeholder { transition: opacity .18s ease; opacity: .62; }
#prompt.placeholder-swap::placeholder { opacity: 0; }
.field-hint b { color: var(--electric, #0055F0); font-weight: 600; }
.example-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.example-kicker { font-size: 14px; letter-spacing: .8px; color: var(--muted); }
.example-use { background: transparent; border: 1px solid #0055F0; color: #B8C6DB; font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.example-use:hover:not(:disabled) { background: #01153B; border-color: #0055F0; }
.example-use:disabled { opacity: .45; cursor: not-allowed; }
.detail-meter { margin-top: 16px; padding: 14px 16px; border: 1px solid #01153B; border-radius: 5px; background: #000B1F; }
.detail-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; letter-spacing: .8px; }
.detail-title { color: var(--muted); }
.detail-score { letter-spacing: 0; font-weight: 600; color: #B8C6DB; }
.detail-meter[data-level="low"] .detail-score { color: #B8C6DB; }
.detail-meter[data-level="mid"] .detail-score { color: #B8C6DB; }
.detail-meter[data-level="high"] .detail-score { color: #8fe0a8; }
.detail-track { height: 6px; background: #01153B; border-radius: 3px; margin: 10px 0 12px; overflow: hidden; }
.detail-track > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0055F0, #B8C6DB); border-radius: 3px; transition: width .25s ease; }
.detail-meter[data-level="low"] .detail-track > i { background: #0055F0; }
.detail-meter[data-level="high"] .detail-track > i { background: linear-gradient(90deg, #4e9b68, #8fe0a8); }
.detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.detail-list li { font-size: 14px; color: #6D88BC; border: 1px solid #01153B; border-radius: 999px; padding: 5px 12px 5px 28px; position: relative; }
.detail-list li::before { content: "+"; position: absolute; left: 11px; top: 4px; color: #6D88BC; }
.detail-meter .detail-list li.met { color: #d8f5e1; border-color: #3f7a55; background: #000B1F; }
.detail-meter .detail-list li.met::before { content: "✓"; color: #8fe0a8; }

/* the section title already says PICK YOUR CUT */
.inspiration .chip-label { display: none; }

/* the image itself now carries the preview + ownership notices */
.result-view .watermark-tag { display: none; }

.attempt-button .attempt-sport { font-size: 14px; color: var(--chrome-light); }

/* The square preview and longer hockey copy retain the established responsive layout. */
.hero-line { font-size: .76em; }
.hero-stats strong { white-space: normal; font-size: clamp(24px, 2.6vw, 36px); }
.choice-content { padding-top: 42px; }
.summary-preview img { height: auto; aspect-ratio: 1/1; }
.attempt-button img { height: auto; aspect-ratio: 1/1; object-fit: contain; }
.jersey-outline { top: 4%; width: 40%; height: 48%; }
.stage-monogram { top: 20%; width: 6%; }
.empty-copy { margin-bottom: 3%; }
.result-empty { padding: 18px 10px; }
@media (max-width: 399px) {
  .empty-copy h3 { font-size: 25px; }
  .empty-copy p { margin-top: 6px; font-size: 14px; }
  .stage-spec { font-size: 14px; line-height: 1.3; letter-spacing: 0; }
  .loading-jersey { font-size: 36px; margin-bottom: 12px; }
  .result-loading h3 { font-size: 25px; }
  .load-track { margin-block: 16px 10px; }
}

/* Loom 1: Canada website typography, rink light and chamfered navy glass. */
:root { --label: 'Rajdhani', sans-serif; --cyan: #48BEE9; --navy-black: #010514; }
.site-header { background: linear-gradient(180deg, #011130, #010514); border-color: #1D65CB; }
.nav-inner { gap: 24px; }
.brand img { width: 160px; height: 60px; filter: drop-shadow(0 0 14px #0055F03d); }
.nav-studio { max-width: 205px; padding-left: 20px; }
.nav-inner nav { gap: 20px; }
.back-main { color: var(--muted); font-size: 14px; line-height: 1.4; text-decoration: underline; text-underline-offset: 4px; }
.nav-inner .back-main { max-width: 130px; }
.back-main:hover { color: var(--white); }
.announcement { background: #01153B; color: var(--chrome-light); border-bottom: 1px solid #0055F055; }
.announcement .status-dot, .status-dot { background: var(--cyan); box-shadow: 0 0 10px #48BEE955; }
h1, h2, h3 { font-family: var(--display); font-style: italic; font-weight: 900; }
h1, h2, h3, .chrome-accent { color: var(--white); background-image: var(--type-chrome); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
h1 { font-size: clamp(38px, 4.3vw, 62px); line-height: 1.08; letter-spacing: -1.2px; }
.hero-line { font-size: 1em; }
h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.12; }
.gate-intro h3, .pricing-story h3 { font: italic 900 clamp(28px, 3vw, 42px)/1.14 var(--display); }
.how-card h3 { font: italic 900 25px/1.2 var(--display); }
.why-copy h2 { font-size: clamp(32px, 3.5vw, 48px); }
.why-benefit h3 { font: italic 900 21px/1.2 var(--display); }
.block-heading h3, .summary-preview h3 { font: italic 900 24px/1.15 var(--display); }
.empty-copy h3, .result-loading h3, .help-done h3 { font: italic 900 clamp(24px, 2.5vw, 34px)/1.15 var(--display); }
#helpTitle { font-size: clamp(28px, 4vw, 36px); line-height: 1.2; }
.eyebrow, .announcement, .nav-studio, .nav-inner nav, .button, .panel-kicker,
.step-token, .preview-header, .preview-caption, .section-stamp, .inspiration-title,
.field-title, .optional, .detail-head, .example-kicker, .how-caption, .summary-kicker,
.feature-ribbon > div, .hero-stats strong, .hero-stats > div > span, .art-note > div,
.footer-top > p, .roster-table th { font-family: var(--label); font-weight: 700; }
.eyebrow, .panel-kicker, .preview-header, .inspiration-title { letter-spacing: 1.1px; }
.field { font-family: var(--label); font-weight: 700; letter-spacing: .3px; }
.field :is(input, select, textarea, .field-hint, .field-error) { font-family: var(--body); font-weight: 400; letter-spacing: normal; }
.button { font-size: 18px; letter-spacing: .6px; }
.button-electric { color: #F8FAFC; background: var(--action-electric); border: 1px solid #1D65CB; box-shadow: inset 0 0 0 3px #1D65CB40, 0 0 20px #0055F040; text-shadow: 0 1px 2px #000B1F; border-radius: 3px; }
.button-electric:hover:not(:disabled) { box-shadow: inset 0 0 0 3px #1D65CB60, 0 0 28px #0055F066; }
.button-electric::after { background: linear-gradient(110deg, transparent 30%, #F8FAFC26 48%, transparent 65%); }
.hero { background: #000B1F; }
.hero::before { background: radial-gradient(ellipse at 78% 40%, #0055F030, transparent 60%); }
.hero-art::before { background: radial-gradient(ellipse, #0055F026, transparent 65%); }
.hero-photo, .art-note { transform: none; }
.hero-photo { background: linear-gradient(#011130, #000B1F) padding-box, var(--edge-electric) border-box; box-shadow: 0 25px 60px #01051499, 0 0 22px #0055F038; }
.hero-photo img { object-position: center 40%; }
.art-orbit { border-color: #0055F028; }
.art-orbit::before { border-color: #0055F018; }
.hero-stats strong { font-size: clamp(24px, 2.4vw, 34px); }
.hero-stats > div > span { letter-spacing: .6px; }
.feature-ribbon { background: linear-gradient(90deg, #010514, #01153B, #010514); }
.feature-ribbon > div { font-size: 18px; }
.line-mark { height: 3px; background: #0055F0; }
.lead-gate, .design-panel, .form-block, .order-summary, .how-card, .result-stage, .help-modal {
  position: relative; border: 1px solid #1D65CB; border-radius: 0;
  background: linear-gradient(135deg, #01153Beb, #000B1Ff5);
  box-shadow: inset 0 0 0 4px #0055F015, 0 0 18px #0055F024;
  backdrop-filter: blur(12px);
}
/* Decorative inner chamfers avoid clipping form controls or focus outlines. */
:is(.lead-gate, .design-panel, .form-block, .order-summary, .how-card, .result-stage, .help-modal)::after {
  content: ''; position: absolute; inset: 7px; pointer-events: none;
  background: linear-gradient(135deg, transparent 10px, #1D65CB99 10px 11px, transparent 11px) top left,
              linear-gradient(315deg, transparent 10px, #1D65CB99 10px 11px, transparent 11px) bottom right;
  background-size: 24px 24px; background-repeat: no-repeat;
}
.design-panel { overflow: visible; }
.order-summary { position: sticky; }
.help-modal { position: fixed; }
.result-stage { overflow: hidden; }
.result-empty { background-color: #000B1F; }
.jersey-outline { color: #6D88BC; }
.stage-monogram { width: 18%; top: 20%; height: auto; filter: drop-shadow(0 0 8px #0055F066); }
.designer-initials { border-color: #1D65CB; }
.uniform-gallery, .how-section { background: #010514; }
.photo-card picture, .how-photo picture, .uniform-photo { border-color: #1D65CB; box-shadow: 0 0 16px #0055F018; }
.how-photo img { aspect-ratio: 3/4; object-fit: contain; background: #000B1F; }
.how-card:first-child .how-photo img { object-fit: cover; }
.mobile-action-bar { background: #000B1Ff5; border-color: #1D65CB; }
.site-footer { background: #010514; border-color: #053CAD; }
@media (max-width: 1190px) { .nav-studio { display: none; } }
@media (max-width: 900px) { .order-summary { position: static; } .hero-photo { transform: none; } }
@media (max-width: 699px) {
  .nav-inner { flex-wrap: wrap; gap: 4px 16px; padding-block: 12px; }
  .brand img { width: 132px; height: 50px; }
  .nav-inner nav { margin-left: auto; flex-direction: column; align-items: end; gap: 0; }
  .nav-inner nav > a.back-main { display: inline-flex; align-items: center; min-height: 44px; max-width: none; font-size: 14px; }
  .nav-inner nav > a:not(.back-main) { display: none; }
  .nav-help { min-height: 44px; padding: 7px 0; }
  h1 { font-size: clamp(30px, 9.2vw, 54px); line-height: 1.1; letter-spacing: -.7px; }
  .hero-line { font-size: 1em; }
  .hero-art { width: 100%; padding-inline: 0; }
  .hero-stats strong { font-size: 25px; }
  .feature-ribbon > div { font-size: 14px; gap: 9px; }
  .feature-ribbon i { font-size: 14px; }
  .why-copy h2 { font-size: 34px; }
  .why-benefit h3 { font-size: 20px; }
  .how-photo img { aspect-ratio: 3/4; }
  .how-card:first-child .how-photo img { aspect-ratio: 3/2; }
  .footer-links > .back-main { min-height: 44px; display: flex; align-items: center; }
}