/* DUKE Studio landing page (/studio). Loaded after site.css: same header, footer, fonts, tokens and buttons.
   White page, near-black text, red pills, phone frame around the example clip (the one dark accent). Matches the DUKE Studio app look. No lime offset shadows. */
video[data-autoloop]::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video[data-autoloop]::-webkit-media-controls { display: none !important; }

.st-hero { position: relative; padding: 56px 0 64px; overflow: hidden; isolation: isolate; background: var(--grain), linear-gradient(180deg, var(--sky) 0%, #f7faff 60%, #ffffff 100%); }
/* same texture as the pack pages (.pack-hero in site.css): grain, diagonal lines panel, blue skewed bar */
.st-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 52%; height: 100%; background: var(--lines), linear-gradient(135deg, #e3ebfa 0%, rgba(234, 242, 255, .3) 100%); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.st-hero::after { content: ""; position: absolute; top: 0; right: 40%; width: 18px; height: 100%; background: linear-gradient(180deg, var(--navy), var(--sky-2)); transform: skewX(-13deg); z-index: -1; opacity: .9; }
.st-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.st-kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 6px 14px; transform: skewX(-12deg); margin-bottom: 18px; }
.st-hero h1 { font-size: clamp(34px, 5vw, 56px); max-width: 12em; }
.st-hero h1 em { font-style: normal; color: var(--red); }
.st-sub { margin-top: 20px; max-width: 30em; font-size: 19px; color: #2a2f36; }
.st-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.st-fine { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--mute); }

.st-stage { display: flex; flex-direction: column; align-items: center; }
.st-phone { width: min(100%, 300px); padding: 8px; background: #111; border-radius: 40px; box-shadow: 0 30px 60px rgba(28, 63, 148, .28), 0 8px 18px rgba(17, 17, 17, .16); }
.st-screen { position: relative; aspect-ratio: 9 / 16; background: #f3f3f3; border-radius: 32px; overflow: hidden; }
.st-big, .st-big-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-big[hidden], .st-big-video[hidden], .st-stage [hidden] { display: none !important; }   /* Oct 22: display:block beat [hidden], so the poster <img> filled the phone and pushed the playing video below the clip (frozen picture + audio) */
.st-example { position: absolute; top: 14px; left: 14px; z-index: 1; background: #fff; color: #111; border: 1px solid #111; border-radius: 6px; font-size: 12px; font-weight: 800; padding: 1px 8px; }
.st-look-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin-top: 16px; max-width: 300px; font-size: 18px; }
.st-look-info strong { font-weight: 900; }
.st-look-info span { color: #2a2f36; font-size: 14px; font-weight: 500; }

.st-section { padding: 56px 0; }
.st-section .sec-head { margin-bottom: 28px; }

.st-looks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.st-look { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 6px 6px 12px; font: inherit; text-align: left; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.st-look:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(17, 17, 17, .14); }
.st-look[aria-pressed="true"] { border-color: var(--red); box-shadow: 0 8px 22px rgba(212, 35, 43, .2); }
.st-look:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.st-thumb { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #f3f3f3; }
.st-thumb img, .st-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-eg { position: absolute; left: 6px; top: 6px; background: #fff; color: #111; border: 1px solid #111; border-radius: 5px; font-size: 10.5px; font-weight: 800; padding: 0 6px; line-height: 1.5; }
.st-look-title { font-weight: 900; font-size: 15px; padding: 0 4px; line-height: 1.2; }
.st-eg-note { margin-top: 16px; font-size: 14px; color: var(--mute); }

.st-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.st-step { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, .04); }
.st-step .n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 900; margin-bottom: 14px; }
.st-step h3 { font-size: 20px; margin-bottom: 8px; }
.st-step p { font-size: 15.5px; color: #2a2f36; }

.st-trial { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; border: 2px solid var(--ink); border-radius: var(--radius); padding: 32px; background: var(--grain), linear-gradient(90deg, var(--sky) 0%, #ffffff 100%); }
.st-trial > div { flex: 1 1 380px; }
.st-trial h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.st-trial p { font-size: 17px; color: #2a2f36; }

.st-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.st-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 32px 28px 28px; }
.st-plan--best { border-color: var(--red); box-shadow: 0 16px 40px rgba(212, 35, 43, .14); }
.st-badge { position: absolute; top: -14px; left: 24px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; transform: skewX(-12deg); }
.st-plan h3 { font-size: 22px; }
.st-price { font-size: 44px; font-weight: 900; line-height: 1; margin: 14px 0 4px; }
.st-price small { font-size: 16px; font-weight: 700; color: var(--mute); }
.st-credits { font-weight: 800; }
.st-per { color: var(--mute); font-size: 14.5px; margin-bottom: 22px; }
.st-plan .btn { margin-top: auto; }
.st-note { margin-top: 24px; max-width: 760px; color: #2a2f36; font-size: 15.5px; }

.st-faq { padding-bottom: 80px; }

@media (max-width: 900px) {
  .st-hero::before { width: 100%; opacity: .55; }
  .st-hero::after { display: none; }
  .st-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .st-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .st-steps, .st-plans { grid-template-columns: 1fr; }
  .st-plan--best { margin-top: 14px; }
}
@media (max-width: 600px) {
  .st-hero { padding: 36px 0 24px; }
  .st-section { padding: 40px 0; }
  .st-cta .btn { flex: 1 1 100%; }
  .st-trial { padding: 24px 20px; }
  .st-trial .btn { width: 100%; }
}
/* Oct 20: premium styles row (4 tiles) under the 6 caption looks */
.st-premium-h { margin: 28px 0 12px; font-size: 1.15rem; font-weight: 800; color: #111; }
.st-premium-note { margin: -4px 0 14px; max-width: 760px; color: #2a2f36; font-size: 15.5px; }
.st-looks--premium { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .st-looks--premium { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Oct 20: Low Power Mode on iPhone blocks autoplay everywhere: a play badge shows on a paused demo, any tap starts them all */
.st-thumb, [data-st-looks] { position: relative; }
.needs-tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(17,17,17,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
  pointer-events: none; z-index: 3; }

/* Oct 20: the #1 selling point (Bobby): we do the cutting */
.st-cuts { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; }
.st-cuts li { position: relative; padding-left: 30px; font-weight: 700; color: #111; line-height: 1.35; }
.st-cuts li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #d4232b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.st-vs { margin: 4px 0 0; color: #444; font-size: .95rem; }

/* Oct 22: the hero phone plays the v5 explainer. "Tap for sound" (brand red pill, 44px+ tap target) sits under the phone; "Watch how it works" swaps back from a look */
.st-sound { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 190px; margin-top: 16px; padding: 10px 26px; font: inherit; font-size: 17px; font-weight: 800; color: #fff; background: var(--red); border: 2px solid var(--red); border-radius: 999px; cursor: pointer; box-shadow: 0 8px 20px rgba(212, 35, 43, .28); transition: transform .18s ease, box-shadow .18s ease; }
.st-sound:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(212, 35, 43, .34); }
.st-sound[aria-pressed="true"] { background: #fff; color: var(--red); }
.st-sound[hidden] { display: none; }
.st-sound:focus-visible, .st-watch:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.st-watch { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 8px 22px; font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; }
.st-watch:hover { border-color: var(--ink); }
.st-watch[aria-pressed="true"] { border-color: var(--red); }

/* Oct 22 (Bobby): on phones the video sits RIGHT under the headline; the paragraph, bullets and buttons follow it. Desktop unchanged. */
@media (max-width: 900px) {
  .st-hero-grid { display: flex; flex-direction: column; gap: 0; }
  .st-copy { display: contents; }
  .st-copy > .st-kicker { order: 1; }
  .st-copy > h1 { order: 2; }
  .st-hero-grid > .st-stage { order: 3; margin: 20px 0 28px; }
  .st-copy > .st-sub { order: 4; }
  .st-copy > .st-cuts { order: 5; }
  .st-copy > .st-vs { order: 6; }
  .st-copy > .st-cta { order: 7; }
  .st-copy > .st-fine { order: 8; }
}