/* Live typography and device frames stay crisp at every pixel density. */
.hero-device .device-crop { container-type: inline-size; color: #171917; background: #fff; clip-path: none; font-size: 0; line-height: 1; letter-spacing: 0; }
.hero-device .device-crop img { position: static; width: 100%; max-width: 100%; height: 100%; object-fit: cover; left: auto; top: auto; }
.hero-device .device-crop strong, .hero-device .device-crop b { font-weight: 800; }
.hero-device-print .device-crop { border: 1px solid #e3e4df; }
.mock-print-brand { height: 11%; display: flex; align-items: center; justify-content: space-between; padding-inline: 7%; font: 800 6.5cqw/1 Arial,sans-serif; letter-spacing: -.03em; }
.mock-print-brand > span { font: 700 2.7cqw/1.4 Arial,sans-serif; letter-spacing: .04em; }
.mock-print-photo { height: 48%; overflow: hidden; }
.mock-print-photo img { object-position: 64% center; }
.mock-print-copy { padding: 5%; }
.mock-print-copy > span { display: block; font: 700 2.6cqw/1.5 Arial,sans-serif; color: #6a6d64; letter-spacing: .03em; }
.mock-print-copy > strong { display: block; font: 900 10cqw/.94 Arial,sans-serif; letter-spacing: -.055em; position: relative; margin-top: 3%; }
.mock-print-copy > strong > span { color: #b79b00; position: absolute; right: 0; bottom: 0; font-size: 14cqw; }
.mock-print-copy p { font-size: 4cqw; font-weight: 700; line-height: 1.5; margin-top: 4%; letter-spacing: .02em; }
.mock-print-copy > div { font: 700 2.5cqw/1 Arial,sans-serif; border-top: 1px solid #d5d7ce; margin-top: 4%; padding-top: 4%; letter-spacing: .05em; }
.hero-device-browser .device-crop { border-radius: 2%; border: 1px solid #d5d8d4; }
.mock-browser-bar { height: 9%; display: flex; align-items: center; gap: 1.3%; padding-inline: 3%; background: #e4e8e9; }
.mock-browser-bar > i { height: 1.5cqw; width: 1.5cqw; border-radius: 50%; background: #ed7975; }
.mock-browser-bar > i:nth-child(2) { background: #e6bd58; }
.mock-browser-bar > i:nth-child(3) { background: #72bd8a; }
.mock-browser-bar > span { margin-left: 4%; padding: .8% 3%; width: 72%; background: #f8f9f7; border-radius: 2cqw; color: #4d554f; font: 500 2.2cqw/1.1 Arial,sans-serif; }
.mock-browser-bar > b { margin-left: auto; color: #647069; font: 400 3cqw Arial,sans-serif; }
.mock-site-nav { height: 12%; padding-inline: 5%; display: flex; align-items: center; justify-content: space-between; }
.mock-site-nav > strong { font: 800 3cqw/1 Arial,sans-serif; letter-spacing: -.03em; }
.mock-site-nav > span { font: 700 1.65cqw/1 Arial,sans-serif; letter-spacing: .03em; }
.mock-site-main { height: 62%; display: grid; grid-template-columns: 43% 57%; background: #f5f5ed; }
.mock-site-copy { min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 5% 4% 5% 10%; }
.mock-site-copy > span { font: 700 1.55cqw/1 Arial,sans-serif; color: #75786c; letter-spacing: .08em; }
.mock-site-copy > strong { position: relative; display: block; align-self: stretch; font: 900 5cqw/.98 Arial,sans-serif; letter-spacing: -.05em; margin-top: 6%; }
.mock-site-copy > strong > span { position: absolute; right: 2%; bottom: 0; color: #a58e00; font-size: 5.8cqw; }
.mock-site-copy p { font-size: 2.15cqw; font-weight: 700; line-height: 1.6; margin-top: 6%; letter-spacing: .03em; }
.mock-site-copy > div { width: fit-content; border-bottom: 1px solid #b5b7a9; padding-block: 2%; margin-top: 3%; font: 700 1.6cqw/1.5 Arial,sans-serif; }
.mock-site-photo { overflow: hidden; }
.mock-site-photo img { object-position: 67% center; }
.mock-site-bottom { height: 17%; display: flex; align-items: center; padding-inline: 5%; }
.mock-site-bottom > span { flex: 1; border-right: 1px solid #d9dccf; font: 800 2.5cqw/1 Arial,sans-serif; display: flex; gap: 9%; align-items: center; padding-left: 5%; }
.mock-site-bottom > span:first-child { padding-left: 0; }
.mock-site-bottom > span:last-child { border-right: 0; }
.mock-site-bottom i { font: 400 1.8cqw Arial,sans-serif; color: #878b7a; }
.hero-device-tablet .device-crop { border-radius: 2.5%; border: 2px solid #383c38; background: #10130f; }
.mock-video-scene { height: 85%; position: relative; overflow: hidden; }
.mock-video-scene > img { animation: hero-film-pan 16s ease-in-out infinite; object-position: center 56%; }
.mock-video-title { position: absolute; inset: 0; padding: 7% 6%; background: linear-gradient(90deg,#f8f7f2e8,#f8f7f280 30%,transparent 65%); }
.mock-video-title > span { font: 700 2cqw/1 Arial,sans-serif; letter-spacing: .04em; }
.mock-video-title > strong { display: block; font: 900 7.4cqw/.95 Arial,sans-serif; letter-spacing: -.055em; margin-top: 5%; }
.mock-video-title > strong > span { font-size: 8cqw; color: #ad9200; margin-left: 3%; }
.mock-video-title > small { display: block; font-size: 2.6cqw; font-weight: 700; margin-top: 4%; }
.mock-play { position: absolute; left: 64%; top: 40%; width: 13%; aspect-ratio: 1; background: #0c140a91; border: 1px solid #ffffff9e; border-radius: 50%; display: grid; place-items: center; }
.mock-play:after { content: ""; border-top: 2.9cqw solid transparent; border-bottom: 2.9cqw solid transparent; border-left: 4.3cqw solid #fff; margin-left: 1cqw; }
.mock-video-controls { height: 15%; position: relative; color: #e3e5d9; display: flex; align-items: center; gap: 4%; padding: 2% 4% 0; font: 400 2.1cqw/1 Arial,sans-serif; }
.mock-video-track { position: absolute; height: 2px; left: 4%; right: 4%; top: 7%; background: #6a6d63; }
.mock-video-track i { display: block; height: 100%; width: 27%; background: #ffe000; }
.mock-video-hd { margin-left: auto; }
.hero-device-phone .device-crop { background: #fff; border: 3px solid #191c19; border-radius: 15% / 7.3%; padding-top: 15%; box-shadow: inset 0 0 0 1px #b3b6b0; }
.mock-phone-camera { position: absolute; top: 3%; width: 30%; height: 3%; left: 35%; background: #171b16; border-radius: 8cqw; }
.mock-phone-top { display: flex; justify-content: space-between; align-items: center; padding: 4% 8% 8%; font: 700 5.7cqw/1 Arial,sans-serif; letter-spacing: -.025em; }
.mock-phone-photo { height: 55%; position: relative; overflow: hidden; }
.mock-phone-photo img { object-position: 66% center; }
.mock-phone-photo > strong { position: absolute; left: 8%; top: 7%; font: 900 12cqw/.94 Arial,sans-serif; letter-spacing: -.06em; color: #171c18; }
.mock-phone-photo > strong > span { color: #fff; font-size: 14cqw; }
.mock-phone-social { padding: 5% 7% 3%; font: 400 12cqw/1 Arial,sans-serif; white-space: nowrap; }
.mock-phone-social > span { float: right; }
.mock-phone-copy { padding-inline: 8%; line-height: 1.6; }
.mock-phone-copy > strong { font: 800 5cqw/1 Arial,sans-serif; }
.mock-phone-copy p { font-size: 5.4cqw; letter-spacing: .01em; margin-top: 4%; }
.mock-phone-copy > span { font: 700 3.8cqw/1 Arial,sans-serif; color: #646f80; display: block; margin-top: 6%; }
.mock-phone-home { position: absolute; bottom: 2.4%; left: 30%; width: 40%; height: 1.2%; background: #292d27; border-radius: 8cqw; }
@keyframes hero-film-pan { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06) translateX(-1%); } }

/* A native horizontal rail supports touch, trackpads, keyboard and buttons. */
.use-carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 3px; }
.use-carousel-toolbar > p { font-size: 13px; color: #62675a; }
.use-carousel-controls { display: flex; align-items: center; gap: 10px; }
.use-carousel-count { font: 700 11px/1 Arial,sans-serif; letter-spacing: .12em; margin-right: 12px; white-space: nowrap; }
.use-carousel-controls > button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #cbd0be; border-radius: 50%; font: 400 25px/1 Arial,sans-serif; transition: background .2s,color .2s,border-color .2s; }
.use-carousel-controls > button:not(:disabled):hover { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.use-carousel-controls > button:disabled { opacity: .28; cursor: default; }
.use-grid { --card-width: clamp(300px,30vw,360px); position: relative; display: flex; flex-wrap: nowrap; gap: 24px; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -12px; padding: 25px 12px 32px; scroll-padding-inline: 12px; cursor: grab; }
.use-grid::-webkit-scrollbar { display: none; }
.use-grid.is-auto-rail { scroll-snap-type: none; }
/* Every copy must render identically when the scroll position wraps. */
.use-grid.is-looping > .use-card { --image-scale: 1 !important; }
.use-grid > .use-card { position: relative; flex: 0 0 var(--card-width); min-width: 0; background: #fff; scroll-snap-align: start; transition: flex-basis .48s cubic-bezier(.2,.8,.2,1),transform .48s cubic-bezier(.2,.8,.2,1),box-shadow .4s,opacity .45s; }
.use-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.use-grid.is-dragging > .use-card { transform: none; transition: none; }
.use-grid > .use-card .use-image { height: 268px; aspect-ratio: auto; }
.use-grid > .use-card .use-image:after { display: none; }
.use-grid > .use-card .use-image img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.use-grid .use-copy { min-height: 137px; margin-top: 22px; padding: 0 15px 8px 18px; }
.use-grid .use-copy h3 { font-size: 22px; }
.use-grid .use-copy p { font-size: 13px; }
.use-grid .use-tags { font-size: 11px; display: block; line-height: 1.8; }
.use-grid > .use-card:focus-visible { outline: 3px solid #396bca; outline-offset: 5px; }
.use-carousel-footer { display: flex; gap: 30px; align-items: center; margin-top: 3px; }
.use-scrollbar { height: 2px; position: relative; flex: 1; background: #e5e8dc; }
.use-scrollbar > span { position: absolute; left: 0; width: 65%; height: 100%; background: #252b20; }
.use-scroll-hint { font: 700 9px/1 Arial,sans-serif; letter-spacing: .1em; color: #777e68; white-space: nowrap; }
.use-scroll-hint > span { font-size: 20px; vertical-align: middle; margin-left: 10px; color: #252b20; }
@media (hover: hover) and (pointer: fine) {
  .use-grid > .use-card:is(:hover,:focus-visible) { flex-basis: calc(var(--card-width) + 72px); transform: translateY(-8px); box-shadow: 0 14px 27px #242d1614; z-index: 1; }
}
@media (max-width: 700px) {
  .use-carousel-toolbar { align-items: center; gap: 10px; }
  .use-carousel-toolbar > p { font-size: 12px; max-width: 52%; line-height: 1.8; }
  .use-carousel-controls { gap: 8px; }
  .use-carousel-controls > button { width: 44px; height: 44px; font-size: 23px; }
  .use-carousel-count { display: none; }
  .use-grid { --card-width: min(78vw,370px); grid-template-columns: none; gap: 18px; padding-top: 22px; padding-bottom: 26px; }
  .use-grid > .use-card .use-image { height: 225px; }
  .use-grid .use-copy { min-height: 151px; padding-left: 14px; margin-top: 18px; }
  .use-grid .use-copy h3 { font-size: 20px; }
  .use-grid .use-copy p { font-size: 14px; }
  .use-grid .use-tags { font-size: 12px; }
  .use-carousel-footer { gap: 18px; }
  .use-scroll-hint { font-size: 8px; letter-spacing: .06em; }
  .use-scroll-hint > span { margin-left: 5px; }
  .hero-device-phone .device-crop { border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .mock-video-scene > img { animation: none; }
  .use-grid > .use-card { transition: none; }
  .use-grid > .use-card:is(:hover,:focus-visible) { transform: none; }
}