/* UltraTone's page on Utility. Ported from the samcedar.com landing page: Utility's header, footer and type system
   (site.css: Xanh Mono headlines, Plex Mono text, Doto labels and readouts), UltraTone's logo, ASCII hero, demo and
   teal accent. Classes the shop's stylesheet already uses get a ut- prefix: ut-cards, ut-card, ut-ticker, ut-faq,
   ut-specs, ut-meta, ut-lede, ut-hero-copy, ut-hero-cta, and the before/after divider is ba-line. */

/* ---------- jump links in the crumbs bar ---------- */
.ut-jump { display: flex; gap: 1.375rem; }
.ut-jump a { font-family: var(--body); font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); transition: color .2s; }
.ut-jump a:hover { color: var(--ink); }

/* ---------- UltraTone tokens ---------- */
:root { --ut: #3E8F9B; --ut-soft: #C9DFE5; --haze: linear-gradient(180deg, #C5D5D6 0%, #D0DDDE 42%, #C6D6D8 70%, #A1BEC2 100%); --pad: 1.875rem; }
:root[data-theme="dark"] { --ut: #6FC3CF; --ut-soft: #23383d; --haze: linear-gradient(180deg, #1B2729 0%, #1E2B2D 45%, #1A2628 72%, #132022 100%); }
html { scroll-behavior: smooth; }
img, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.logo { display: block; fill: currentColor; height: auto; aspect-ratio: 8744.08 / 1083.86; }

/* ---------- type: h2 is the Doto section label (theme.js), h3 the headline ---------- */
.ut-page h2 { font-family: var(--doto); font-weight: 900; font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); margin-bottom: 1.125rem; }
.ut-page h3 { font-family: var(--head); font-size: 3.125rem; font-weight: 500; letter-spacing: -.005em; line-height: 1.06; }
/* fixed like the body text, one step down on phones (same rule as the shop headings) */
@media (max-width: 700px) { .ut-page h3 { font-size: 2.125rem; } }
.ut-page h4 { font-family: var(--head); font-size: 1.0625rem; font-weight: 600; margin: 1rem 0 0.375rem; }
.body { font-size: 0.9375rem; line-height: 1.65; max-width: 37.5rem; margin-top: 1.125rem; }
.ut-lede { font-size: 1.0625rem; line-height: 1.55; color: var(--mid); max-width: 41.25rem; }   /* the site's top-of-page intro, as in the home hero */

/* ---------- buttons, as on Commissions ---------- */
.pill { display: inline-block; background: var(--ink); color: var(--bg); text-decoration: none; font: 900 0.75rem/1 "Doto", monospace; letter-spacing: .08em; text-transform: uppercase; padding: 0.9375rem 1.75rem; border-radius: 62.4375rem; transition: opacity .2s; }
.pill:hover { opacity: .85; }
.text-link { font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.text-link:hover { color: var(--mid); }

/* ---------- sections: full width with the site's gutter, a hairline between each ---------- */
.ut-sec { padding: 4rem var(--pad) 4.5rem; border-top: 1px solid var(--rule); }
.sec-head { margin-bottom: 2.5rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }

/* ---------- hero ---------- */
.ut-hero { padding: 1.875rem var(--pad) 3rem; }
.hero-panel { position: relative; overflow: hidden; background: var(--haze); aspect-ratio: 2.1; display: grid; place-items: center; border-radius: 0.875rem; }
.hero-lockup { position: absolute; left: 3%; top: 6%; z-index: 4; display: flex; align-items: flex-end; gap: 1rem; color: var(--ink); }
.hero-lockup .logo { width: clamp(8.75rem, 17vw, 17.5rem); }
.hero-lockup span { font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; padding-bottom: .4em; color: var(--ink); opacity: .7; }
.hero-ascii { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; margin: 0; text-align: center; white-space: pre;
  font: 900 calc(min(100vw, 100rem) * .0074)/1 "Doto", ui-monospace, monospace; color: #fff; opacity: .8; pointer-events: none; }
:root[data-theme="dark"] .hero-ascii { color: #8FB9BF; opacity: .35; }
/* the shop's render: on white in light mode (multiply drops the white into the haze), alpha in dark mode */
/* the render's silhouette in the panel's own haze, so the characters pass behind the clear casing instead of showing through it */
.hero-block { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 79%; aspect-ratio: 1; background: var(--haze); background-size: 100% calc(100% / .79); background-position: 50% 50%;
  -webkit-mask: url(/products/ultratone/assets/img/hero-mask.png) center / contain no-repeat; mask: url(/products/ultratone/assets/img/hero-mask.png) center / contain no-repeat; }
.hero-panel video { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 79%; width: auto; mix-blend-mode: multiply; }
.hero-panel video[data-dark] { mix-blend-mode: normal; }   /* same framing as the light render, so the same size */
.ut-hero-copy { padding-top: 2rem; }
.ut-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; margin-top: 1.75rem; }
.ut-meta { display: flex; gap: 1rem; margin-left: auto; font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.ut-meta span + span::before { content: '/'; margin-right: 1rem; color: var(--rule); }

/* ---------- ticker of looks ---------- */
.ut-ticker { overflow: hidden; border-top: 1px solid var(--rule); padding: 0.875rem 0; }
.ut-ticker-track { display: flex; gap: 1.75rem; width: max-content; animation: tick 90s linear infinite; }
.ut-ticker-item { display: flex; align-items: center; gap: 0.75rem; font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); white-space: nowrap; }
.ut-ticker-item i { width: 4rem; height: 0.5rem; border-radius: 1px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- readouts: the LCD, now Doto numbers in UltraTone's teal ---------- */
.readout { display: inline-flex; align-items: center; gap: 1rem; min-width: 0; }
.readout .num { font: 900 2.875rem/1 "Doto", monospace; color: var(--ut); }
.readout .stack { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.readout .cat { font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.readout .name { font-family: var(--head); font-size: 1.0625rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout.big { margin-top: 0.25rem; } .readout.big .num { font-size: 5.5rem; }

/* ---------- try it ---------- */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; align-items: stretch; }
.demo-left, .demo-right { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
/* the right column is as tall as the left, and the looks grid takes what's left of it, so its bottom
   lines up with the bottom of the photo row */
/* the readout sits at the top of its column, so its category label lines up with "Categories" */
.demo-left .readout { align-items: flex-start; }
.demo-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; }
.demo-screen { position: relative; border-radius: 0.625rem; overflow: hidden; background: #0B1D26; touch-action: none; cursor: pointer; }
.demo-screen canvas { width: 100%; height: auto; aspect-ratio: 4 / 5; }
.demo-hint { position: absolute; right: 0.75rem; bottom: 0.75rem; font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0.625rem rgba(11,29,38,.55); }
.demo-strip { height: 0.625rem; border-radius: 0.125rem; }
.demo-photos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.375rem; }
.demo-photos button { aspect-ratio: 4/5; border-radius: 0.25rem; overflow: hidden; opacity: .5; transition: opacity .15s; }
.demo-photos button img { width: 100%; height: 100%; object-fit: cover; }
.demo-photos button.on, .demo-photos button:hover { opacity: 1; }
.photos-label { display: none; }
.demo-label { font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.demo-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; }
/* categories are rounded buttons, outlined, filled in ink when picked */
.demo-cats .key { border: 1px solid var(--rule); border-radius: 0.5rem; padding: 0.5rem 0.625rem 0.5625rem; font-size: 0.75rem; color: var(--ink); text-align: left; transition: border-color .15s, background .15s, color .15s; }
.demo-cats .key:hover { border-color: var(--ink); }
.demo-cats .key.on { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; }
.demo-keys { display: flex; gap: 1.375rem; }
.demo-cats .key .sw { display: block; height: 0.1875rem; border-radius: 1px; margin-top: 0.4375rem; }
.demo-keys .key { font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); transition: color .15s; }
.demo-keys .key:hover, .demo-keys .key[aria-pressed="true"] { color: var(--ink); }
.demo-looks { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
.look { position: relative; border-radius: 0.25rem; overflow: hidden; background: #0B1D26; opacity: .6; transition: opacity .15s; }
.look.on, .look:hover { opacity: 1; }
.look.on { box-shadow: 0 0 0 0.125rem var(--bg), 0 0 0 0.1875rem var(--ink); }
.look canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look .n { position: absolute; left: 0.375rem; top: 0.375rem; font: 900 0.6875rem/1 "Doto", monospace; color: #fff; text-shadow: 0 1px 0.5rem rgba(11,29,38,.6); }
.look .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.875rem 0.375rem 0.375rem; font-size: 0.5625rem; line-height: 1.15; color: #fff; background: linear-gradient(transparent, rgba(11,29,38,.85)); text-align: left; }

/* ---------- how it works ---------- */
.split#steps { align-items: stretch; }
.how-copy { display: flex; flex-direction: column; }
.how-copy .readout.big { margin-top: auto; padding-top: 2.25rem; }
.how-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.25rem; align-items: stretch; }
.how-photo { position: relative; min-height: 13.75rem; border-radius: 0.5rem; overflow: hidden; background: #0B1D26; }
.how-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.how-shot .layers { margin-top: 0; }
.how-shot .layer { transition: opacity .45s, transform .45s cubic-bezier(.2,.7,.2,1); }
.how-shot .layers:not(.built) .layer.sub, .how-shot .layers:not(.built) .layer.group { opacity: 0; transform: translateY(0.5rem); }
.how-shot .layer span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.layers { margin-top: 1.875rem; border-radius: 0.5rem; overflow: hidden; background: #262729; box-shadow: 0 1.25rem 2.5rem rgba(11,29,38,.18); font: 500 0.8125rem/1 -apple-system, system-ui, sans-serif; color: #ddd; max-width: 28.75rem; }
.layer { display: flex; align-items: center; gap: 0.625rem; padding: 0.6875rem 0.875rem; border-top: 1px solid #1b1c1e; }
.layer:first-child { border-top: 0; }
.layer.group { background: #2f4e6b; color: #fff; }
.layer.sub { padding-left: 2.5rem; }
.ico { width: 1.625rem; height: 1.25rem; border-radius: 0.1875rem; background: #3a3b3e; flex: none; }
.ico.folder { width: 1.125rem; height: 0.875rem; background: #9a9da3; border-radius: 0.125rem; }
.ico.adj { background: linear-gradient(135deg, #fff 50%, #222 50%); width: 1.25rem; height: 1.25rem; border-radius: 50%; }
.ico.adj.grad { background: linear-gradient(90deg, #120a3a, #6a1b9a, #1fb7d6); border-radius: 0.25rem; width: 1.625rem; }
.ico.adj.curve { background: #444 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 18 C8 16 12 4 18 2' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; border-radius: 0.25rem; }
.ico.thumb { background: #3a3b3e center / cover; }
.fold { width: 0; height: 0; border-left: 0.3125rem solid transparent; border-right: 0.3125rem solid transparent; border-top: 0.4375rem solid #ddd; }

/* ---------- before / after ---------- */
.ba-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; }
.ba { position: relative; aspect-ratio: 4/5; border-radius: 0.625rem; overflow: hidden; background: #0B1D26; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .after { clip-path: inset(0 0 0 var(--at)); }
.ba .ba-line { position: absolute; top: 0; bottom: 0; left: var(--at); width: 1px; background: rgba(255,255,255,.85); }
.ba .knob { position: absolute; top: 50%; left: var(--at); width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #111110; box-shadow: 0 0.25rem 0.875rem rgba(0,0,0,.25); }
.ba .knob svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba .lab { position: absolute; top: 0.875rem; font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0.75rem rgba(11,29,38,.5); }
.ba .lab.l { left: 0.875rem; } .ba .lab.r { right: 0.875rem; }
.ba-side { display: flex; flex-direction: column; gap: 1rem; }
.ba-strip { height: 0.625rem; border-radius: 0.125rem; }
/* the picker fills the rest of the column, so its last row ends level with the big image */
.ba-thumbs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.ba-thumbs button { position: relative; border-radius: 0.25rem; overflow: hidden; opacity: .5; transition: opacity .15s; }
.ba-thumbs button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-thumbs button.on, .ba-thumbs button:hover { opacity: 1; }

/* ---------- features: three across, divided by hairlines like the site's grids ---------- */
.ut-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ut-card { background: var(--bg); padding: 1.125rem 1.125rem 1.625rem; }
.ut-card p { font-size: 0.8125rem; line-height: 1.6; color: var(--mid); }
.card-img { position: relative; aspect-ratio: 5/4; border-radius: 0.375rem; overflow: hidden; background: var(--ut-soft); }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.card-img .cap { position: absolute; left: 0.625rem; bottom: 0.625rem; z-index: 2; font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0.625rem rgba(11,29,38,.55); }
.save { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; padding: 1.375rem; background: #262729 !important; font: 500 0.8125rem/1 -apple-system, system-ui, sans-serif; color: #ddd; }
.save-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem; border-radius: 0.375rem; }
.save-row:first-child { background: #2f4e6b; color: #fff; }
.save-row.dim { opacity: .6; }
.sw { width: 3.375rem; height: 1.75rem; border-radius: 0.25rem; background: var(--g); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); flex: none; }
/* the heart as it is in the plugin, on the Ice casing's LCD (#04122a) in its screen colour (#5ac8ff):
   an outline that lights up, filled and glowing, when a look is saved */
.fav { display: grid; place-items: center; color: #5ac8ff; background: radial-gradient(ellipse at 50% 45%, #0a2246, #04122a 70%) !important; }
.fav svg path { fill: transparent; stroke: currentColor; stroke-width: 1.4; animation: lit 2.8s ease-in-out infinite; }
.fav svg { animation: beat 2.8s ease-in-out infinite; overflow: visible; }
@keyframes lit { 0%, 38% { fill: transparent; opacity: .55; filter: none; }
  46%, 90% { fill: currentColor; opacity: 1; filter: drop-shadow(0 0 0.1875rem #5ac8ff) drop-shadow(0 0 0.75rem #5ac8ff) drop-shadow(0 0 1.625rem rgba(90,200,255,.55)); }
  100% { fill: transparent; opacity: .55; filter: none; } }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 48% { transform: scale(1.1); } 56% { transform: scale(1); } }

/* ---------- panel shot and casings ---------- */
.casings { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.casings img { width: 100%; height: auto; filter: drop-shadow(0 1.875rem 2.5rem rgba(11,29,38,.18)); }
.case-list { display: grid; gap: 0.75rem; }
.case-list button { text-align: left; font-size: 1.25rem; color: var(--mid); transition: color .15s; }
.case-list button .n { font: 900 0.8125rem/1 "Doto", monospace; color: var(--ut); margin-right: 0.875rem; }
.case-list button.on, .case-list button:hover { color: var(--ink); font-weight: 700; }

/* ---------- library ---------- */
.catlist { border-top: 1px solid var(--rule); }
.cat-row { display: grid; grid-template-columns: 3rem 15rem 1fr; align-items: center; gap: 1.5rem; padding: 0.8125rem 0; border-bottom: 1px solid var(--rule); }
.cat-row .num { font: 900 0.8125rem/1 "Doto", monospace; color: var(--ut); }
.cat-row .nm { font-family: var(--head); font-size: 1.0625rem; font-weight: 500; }
.cat-row .sws { display: grid; grid-template-columns: repeat(20, 1fr); gap: 0.25rem; }
.cat-row .sws i { height: 1.375rem; border-radius: 0.125rem; transition: transform .15s; }
.cat-row .sws i:hover { transform: scaleY(1.5); }

/* ---------- specs and faq ---------- */
.ut-specs { list-style: none; border-top: 1px solid var(--rule); }
.ut-specs li { display: flex; justify-content: space-between; gap: 1.25rem; padding: 0.875rem 0; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
.ut-specs b { font: 900 0.6875rem/1.7 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
.ut-faq details { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.ut-faq details:first-child { border-top: 1px solid var(--rule); }
.ut-faq summary { list-style: none; cursor: pointer; font-family: var(--head); font-size: 1.0625rem; font-weight: 500; display: flex; justify-content: space-between; gap: 1.25rem; }
.ut-faq summary::-webkit-details-marker { display: none; }
.ut-faq summary::after { content: '+'; font: 900 1rem/1 "Doto", monospace; color: var(--ut); }
.ut-faq details[open] summary::after { content: '\2212'; }
.ut-faq p { font-size: 0.875rem; line-height: 1.65; color: var(--mid); margin-top: 0.625rem; max-width: 32.5rem; }

/* ---------- notify ---------- */
.notify { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2.5rem; }
.notify video { width: 80%; aspect-ratio: 1; justify-self: center; mix-blend-mode: multiply; }   /* square, so it holds its room before it loads */
.notify video[data-dark] { mix-blend-mode: normal; }
.notify-form { display: flex; gap: 0.75rem; margin-top: 1.625rem; flex-wrap: wrap; align-items: center; max-width: 35rem; }
.notify-form input { flex: 1 1 15rem; font: inherit; font-size: 0.8125rem; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 62.4375rem; padding: 0.875rem 1.25rem; outline: none; }
.notify-form input:focus { border-color: var(--ink); }
.notify-form .thanks { display: none; width: 100%; font: 900 0.6875rem/1 "Doto", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ut); }
.notify-form.sent .thanks { display: block; }
.notify-form.sent input, .notify-form.sent .btn { display: none; }
.notify-form .err { display: none; width: 100%; font-size: 0.8125rem; color: #c0392b; }
.notify-form .err:not(:empty) { display: block; }
.notify-form.busy .btn { opacity: .5; pointer-events: none; }
.notify-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fine { margin-top: 0.875rem; font-size: 0.75rem; color: var(--mid); }
.credits { margin-top: 1.75rem; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; }
.credits a { color: var(--mid); text-decoration: none; }
.credits a:hover { color: var(--ink); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(1.125rem); transition: opacity .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 980px) {
  .split, .ba-wrap, .notify, .demo, .casings { grid-template-columns: minmax(0, 1fr); }
  /* stacked, the looks grid has nothing to stretch against, so the tiles keep their own shape */
  .demo-looks, .ba-thumbs { flex: none; grid-template-rows: none; }
  /* Safari sizes a stretched grid item with only absolute children to nothing, so these get their width outright */
  .ba-wrap { align-items: start; }
  .ba { width: 100%; }
  .notify video { order: -1; width: min(70%, 26.25rem); }
  .look, .ba-thumbs button { aspect-ratio: 4 / 5; }
  .ut-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-row { grid-template-columns: 2.5rem 1fr; }
  .cat-row .sws { grid-column: 1 / -1; }
  .case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ut-jump { display: none; }
}
@media (max-width: 700px) {
  :root { --pad: 1.125rem; }
  .hero-panel { aspect-ratio: 4 / 5; }
  .hero-panel video { height: 70%; }
  .hero-block { height: 70%; background-size: 100% calc(100% / .7); }
  .hero-lockup { left: 1rem; top: 1rem; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .ut-meta { margin-left: 0; }
  .ut-cards { grid-template-columns: minmax(0, 1fr); }
  .cat-row .sws { grid-template-columns: repeat(10, 1fr); }
  .readout.big .num { font-size: 3.75rem; }
  .readout.big .name { white-space: normal; }
  .how-shot { grid-template-columns: minmax(0, 1fr); }
  .how-photo { width: 100%; min-height: 0; height: 0; padding-top: 75%; }
  .how-shot .layers { max-width: none; }
  /* try it, on a phone: the photo first, then categories, looks and photos as single rows that scroll sideways */
  .demo { display: flex; flex-direction: column; gap: 0.75rem; }
  .demo-left, .demo-right { display: contents; }
  .demo-left .readout { order: 1; } .demo-screen { order: 2; } .demo-strip { order: 3; }
  .demo-row { order: 4; margin-top: 0.625rem; align-items: center; } #dCats { order: 5; }
  .demo-right > .demo-label { order: 6; margin-top: 0.375rem; } #dLooks { order: 7; }
  .photos-label { display: block; order: 8; margin-top: 0.375rem; } .demo-photos { order: 9; }
  .demo-cats, .demo-looks, .demo-photos { display: flex; gap: 0.375rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); scroll-padding: 0 var(--pad); }
  .demo-cats::-webkit-scrollbar, .demo-looks::-webkit-scrollbar, .demo-photos::-webkit-scrollbar { display: none; }
  .demo-cats .key { flex: none; min-width: 5.75rem; }
  .demo-looks .look { flex: 0 0 22%; aspect-ratio: 4 / 5; }
  .look.on { box-shadow: inset 0 0 0 0.125rem var(--ink); }
  .demo-photos button { flex: 0 0 22%; }
  .how-copy .readout.big { margin-top: 0; }
}
/* touchscreens: no hold to compare, so a finger on the photo scrolls the page */
@media (pointer: coarse) {
  .demo-screen { touch-action: auto; cursor: default; }
  .demo-hint, .hold-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ut-ticker-track, .fav svg, .fav svg path { animation: none; }
  .how-shot .layer, .how-photo img { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}