/* Prompt Maschine — 1.5 teaser, Clios tools, reviews and maker's note.
   Plain CSS on top of the compiled tailwind.css. No build step; works as-is on GoDaddy. */

:root{
  --night:#0B0713;
  --ink:#0B0713;
  --violet:#8D5CF5;
  --violet-deep:#4D27BF;
  --lilac:#B897FF;
  --amber:#B897FF;
  --amber-deep:#8D5CF5;
  --paper:#F4F1EC;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- shared ---------- */
.v15-kicker{color:var(--amber);font-size:.9rem;font-weight:600;letter-spacing:.01em;margin:0 0 1rem}
.v15-title{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0}
.v15-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:#E9DEFF}
.v15-lead{margin:1.5rem 0 0;max-width:38rem;color:rgba(255,255,255,.72);font-size:1.125rem;line-height:1.75}
.v15-note{margin:1.25rem auto 0;max-width:46rem;color:rgba(255,255,255,.45);font-size:.85rem;line-height:1.65}
.v15-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.v15-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.4rem;border-radius:999px;font-size:.9rem;font-weight:600;line-height:1;transition:transform .15s ease,filter .15s ease}
.v15-btn:hover{filter:brightness(1.08)}
.v15-btn:focus-visible,.film a:focus-visible{outline:2px solid var(--lilac);outline-offset:4px}
.v15-btn-amber{background:linear-gradient(135deg,#8D5CF5 0%,#4D27BF 100%);color:#fff;box-shadow:0 10px 40px -10px rgba(141,92,245,.7)}
.v15-btn-ghost{border:1px solid rgba(255,255,255,.18);color:#fff}
.v15-btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}

/* ---------- Act II: the 1.5 band ---------- */
.act{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:clamp(4rem,9vw,8rem) 0 clamp(3rem,6vw,5rem)}
.act::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(1000px 600px at 85% 10%,rgba(141,92,245,.22),transparent 60%),
  radial-gradient(800px 500px at 10% 90%,rgba(77,39,191,.28),transparent 60%),
  linear-gradient(180deg,#0B0713 0%,#120B22 100%)}
.act::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.35;pointer-events:none;mix-blend-mode:screen}
.act-inner{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.act-head{max-width:46rem}

/* film strip: portrait phone screens from the 1.5 build */
.film-wrap{margin-top:clamp(2.5rem,5vw,4rem)}
.film{display:flex;align-items:flex-start;gap:1.1rem;overflow-x:auto;padding:1rem 1.5rem 1.5rem;scroll-snap-type:x proximity;scroll-padding:1.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.film::-webkit-scrollbar{display:none}
.film:active{cursor:grabbing}
.frame{flex:0 0 auto;scroll-snap-align:start;width:min(58vw,272px);margin:0}
.frame img,.frame video{display:block;width:100%;height:auto;border-radius:30px;background:#0B0B10;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 5px #0d0a16,0 40px 90px -40px rgba(141,92,245,.45),0 25px 50px -25px rgba(0,0,0,.9)}
.frame figcaption{margin-top:.8rem;text-align:center;font-size:.85rem;color:rgba(255,255,255,.6)}
.frame figcaption b{color:#fff;font-weight:600}
.film-hint{display:flex;align-items:center;gap:.6rem;padding:0 1.5rem;font-size:.8rem;color:rgba(255,255,255,.4)}
.film-hint svg{width:14px;height:14px;opacity:.7;flex-shrink:0}
@media(max-width:639px){.frame{width:64vw}.frame img,.frame video{border-radius:22px;box-shadow:0 0 0 3px #0d0a16,0 20px 40px -20px rgba(0,0,0,.9)}.film{padding:.75rem 1.25rem 1.25rem}}

/* the mastering chain: a real sequence, so it is numbered; each step shows its plugin card from the app */
.chain-wrap{max-width:80rem;margin:clamp(3rem,7vw,5.5rem) auto 0;padding:0 1.5rem}
.chain-wrap h3,.trio-wrap h3{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem}
.chain-wrap .chain-sub{color:rgba(255,255,255,.6);max-width:46rem;line-height:1.7;margin:0 0 2rem}
.chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem 1.25rem;position:relative}
.chain li{position:relative;min-width:0}
.chain li img{display:block;width:100%;height:auto;aspect-ratio:960/1150;object-fit:contain;object-position:top;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#131218;box-shadow:0 25px 50px -30px rgba(0,0,0,.9);margin-bottom:1.1rem}
.chain .n{display:inline-block;font-size:.75rem;color:var(--amber);letter-spacing:.04em;padding-left:1.1rem;position:relative}
.chain .n::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--lilac);box-shadow:0 0 0 3px rgba(141,92,245,.22)}
.chain b{display:block;font-size:1.05rem;font-weight:700;margin:.25rem 0 .15rem}
.chain i{display:block;font-style:normal;color:rgba(255,255,255,.55);font-size:.85rem;margin-bottom:.5rem}
.chain p{margin:0;color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.65}
@media(max-width:1023px){.chain{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:639px){.chain{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem .9rem}.chain li img{margin-bottom:.8rem}.chain p{font-size:.85rem}}

/* listen, save, share */
.trio-wrap{max-width:80rem;margin:clamp(3rem,7vw,5.5rem) auto 0;padding:0 1.5rem}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:start;margin-top:1.5rem}
.trio figure{margin:0;min-width:0}
.trio img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#131218;box-shadow:0 25px 50px -30px rgba(0,0,0,.9)}
.trio figcaption{margin-top:.9rem;color:rgba(255,255,255,.65);font-size:.9rem;line-height:1.65}
.trio figcaption b{color:#fff;font-weight:600;display:block;margin-bottom:.15rem}
@media(max-width:767px){.trio{grid-template-columns:1fr}}

/* hero trio of phone screens (mastering.html) */
.hero-trio{max-width:80rem;margin:clamp(2.5rem,5vw,4rem) auto 0;padding:0 1.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:end}
.hero-trio figure{margin:0;min-width:0}
.hero-trio img,.hero-trio video{display:block;width:100%;height:auto;border-radius:30px;border:1px solid rgba(255,255,255,.12);background:#0B0B10;box-shadow:0 0 0 5px #0d0a16,0 50px 110px -45px rgba(141,92,245,.5),0 30px 60px -30px rgba(0,0,0,.9)}
.hero-trio figure:nth-child(2){transform:translateY(-1.5rem)}
.hero-trio figcaption{margin-top:.8rem;text-align:center;font-size:.85rem;color:rgba(255,255,255,.55)}
@media(max-width:639px){.hero-trio{gap:.6rem}.hero-trio img,.hero-trio video{border-radius:16px;box-shadow:0 0 0 2px #0d0a16}.hero-trio figure:nth-child(2){transform:translateY(-.6rem)}.hero-trio figcaption{font-size:.7rem}}

/* two-column feature rows (mastering.html) */
.m-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center;margin-top:2.5rem}
.m-row img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#131218;box-shadow:0 30px 60px -35px rgba(0,0,0,.9)}
.m-row h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .75rem}
.m-row p{margin:0 0 .9rem;color:rgba(255,255,255,.68);line-height:1.75}
.m-row p:last-child{margin-bottom:0}
.m-row ul{margin:.75rem 0 0;padding-left:1.1rem;color:rgba(255,255,255,.68);line-height:1.7}
.m-row li+li{margin-top:.35rem}
.m-row.flip>div:first-child{order:2}
@media(max-width:767px){.m-row{grid-template-columns:1fr;gap:1.5rem}.m-row.flip>div:first-child{order:0}}

/* ---------- maker's note ---------- */
.note{background:var(--night);padding:clamp(4rem,9vw,7rem) 1.5rem;border-bottom:1px solid rgba(255,255,255,.05)}
.note-inner{max-width:44rem;margin:0 auto;position:relative;padding-left:1.75rem;border-left:2px solid var(--violet)}
.note-inner p{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.3vw,1.6rem);line-height:1.6;color:#EFE8FF;margin:0 0 1.1rem}
.note-inner p:last-of-type{margin-bottom:0}
.note-sign{margin-top:1.75rem;font-family:'Inter',system-ui,sans-serif;font-style:normal;font-size:.9rem;color:rgba(255,255,255,.55)}
.note-sign b{display:block;color:#fff;font-weight:600;font-size:1rem}
.note-sign a{color:var(--lilac)}

/* ---------- ratings (reviews section) ---------- */
.ratings{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1rem;margin:0 0 2.5rem}
.rating{display:inline-flex;align-items:center;gap:.75rem;padding:.8rem 1.1rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03);color:#fff;text-decoration:none;transition:border-color .15s ease}
.rating:hover{border-color:rgba(255,255,255,.3)}
.rating .num{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.rating .stars{color:#FBBF24;letter-spacing:.1em;font-size:.9rem}
.rating .where{font-size:.8rem;color:rgba(255,255,255,.6);line-height:1.3}
.rating .where b{display:block;color:#fff;font-weight:600}
.review-source{font-weight:400;color:rgba(255,255,255,.3)}

/* ---------- spotlight: nothing new, see the HTML template comment ---------- */

/* ---------- mastering.html ---------- */
.m-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);padding:clamp(3rem,7vw,6rem) 0 0}
.m-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(1000px 600px at 85% 10%,rgba(141,92,245,.25),transparent 60%),radial-gradient(800px 500px at 10% 90%,rgba(77,39,191,.30),transparent 60%),linear-gradient(180deg,#111119 0%,#1A1133 100%)}
.m-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.35;pointer-events:none;mix-blend-mode:screen}
.m-hero-inner{max-width:80rem;margin:0 auto;padding:0 1.5rem}
.m-section{max-width:80rem;margin:0 auto;padding:clamp(3.5rem,8vw,6.5rem) 1.5rem 0}
.m-section h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 0 1rem;max-width:40rem}
.m-section>p{color:rgba(255,255,255,.68);line-height:1.75;max-width:42rem;margin:0}
.m-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;margin-top:2.5rem}
.m-three div{border-top:1px solid rgba(184,151,255,.35);padding-top:1.1rem}
.m-three b{display:block;font-size:1.1rem;font-weight:700;margin-bottom:.4rem}
.m-three p{margin:0;color:rgba(255,255,255,.65);line-height:1.7;font-size:.95rem}
@media(max-width:767px){.m-three{grid-template-columns:1fr;gap:1.5rem}}

.m-faq{max-width:46rem}
.m-faq details{border-top:1px solid rgba(255,255,255,.1);padding:1.1rem 0}
.m-faq details:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.m-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.m-faq summary::after{content:"+";color:var(--lilac);font-weight:400}
.m-faq details[open] summary::after{content:"–"}
.m-faq details p{margin:.75rem 0 0;color:rgba(255,255,255,.65);line-height:1.7}

.m-wait{max-width:80rem;margin:clamp(3.5rem,8vw,6.5rem) auto 0;padding:0 1.5rem}
.m-wait-inner{border:1px solid rgba(184,151,255,.35);border-radius:24px;padding:clamp(1.75rem,5vw,3.5rem);background:radial-gradient(70% 90% at 90% 50%,rgba(141,92,245,.22),transparent 70%),linear-gradient(135deg,#1E1235,#100B1C)}
.m-wait-inner h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 .75rem}
.m-wait-inner p{color:rgba(255,255,255,.65);line-height:1.7;max-width:36rem;margin:0}
.m-form{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;max-width:34rem}
.m-form input[type=email]{flex:1 1 14rem;min-width:0;padding:.95rem 1.2rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff}
.m-form input[type=email]::placeholder{color:rgba(255,255,255,.4)}
.m-form input[type=email]:focus{outline:none;border-color:var(--violet);background:rgba(255,255,255,.08)}
.m-msg{margin-top:.9rem;font-size:.9rem;min-height:1.2em}
.m-msg.ok{color:var(--lilac)}
.m-msg.err{color:#F87171}

/* ---------- small fixes on existing sections ---------- */
.v15-banner strong{font-weight:600}
@media(prefers-reduced-motion:reduce){.v15-btn{transition:none}}

/* clips: the poster is the still; aspect ratio reserved so nothing jumps before play */
video.clip{aspect-ratio:540/1173;object-fit:cover;background:#0B0B10}

/* ---------- one theme for the whole site ----------
   Every headline accent across the site uses .text-gradient; from now on it is the serif voice (same as the 1.5 band),
   and a fine film grain sits over every page. */
.text-gradient{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.04em;background:none;-webkit-background-clip:unset;background-clip:unset;color:#E9DEFF;-webkit-text-fill-color:#E9DEFF}
body::after{content:"";position:fixed;inset:0;z-index:2147483000;background-image:var(--grain);opacity:.22;pointer-events:none;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){body::after{display:none}}

/* Original screenshot in the hero, with a website label for the unreleased feature. */
.home-preview{margin:0;height:auto;max-width:100%}
.home-preview .iphone-screen{height:auto;aspect-ratio:1290/2796}
.home-preview img{display:block;width:100%;height:auto}
.home-coming{position:absolute;top:30.8%;right:8.2%;padding:.35rem .55rem;border-radius:999px;background:#fff;color:#721628;font:700 11px/1.1 'Inter',sans-serif;box-shadow:0 3px 12px #0003}
.film:focus-visible{outline:2px solid var(--lilac);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.float{animation:none}.fade-up{animation:none;opacity:1;transform:none}}