/* PlayheadX public landing (landing.html) and its white paper link. Standalone: does not load the app's style.css. */
:root {
  --ink:#0B0909; --ink-2:#130F0F; --ink-3:#1B1515; --ink-4:#251D1C;
  --line:rgba(241,232,218,.09); --line-2:rgba(241,232,218,.16); --line-3:rgba(241,232,218,.26);
  --cream:#F1E8DA; --cream-2:#C9BDAB; --cream-3:#A0958A;
  --brass:#D9B77E; --brass-2:#B8925A; --brass-ink:#1d1408; --brass-wash:rgba(217,183,126,.12); --brass-line:rgba(217,183,126,.42);
  --oxblood:#4A1519; --wine:#7E2A32; --sage:#9CC3A0; --bad:#E58A80;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gut:16px; --max:1120px;
  color-scheme:dark;
}
*, *::before, *::after { box-sizing:border-box; }
html { background:var(--ink); -webkit-text-size-adjust:100%; scroll-padding-top:72px; }
body { margin:0; background:var(--ink); color:var(--cream); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--brass); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }
img, svg { display:block; max-width:100%; }
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
.skip { position:absolute; left:-9999px; top:8px; background:var(--cream); color:var(--ink); padding:8px 14px; border-radius:999px; z-index:10; }
.skip:focus { left:16px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* type */
h1, h2, h3 { font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.01em; }
h1 { font-size:clamp(44px, 10.5vw, 96px); line-height:.98; letter-spacing:-.02em; }
h1 em { font-style:italic; color:var(--brass); }
h2 { font-size:clamp(34px, 6vw, 56px); line-height:1.02; letter-spacing:-.015em; }
h2 em { font-style:italic; color:var(--brass); }
h2.big { font-size:clamp(44px, 9.5vw, 88px); line-height:.98; letter-spacing:-.02em; max-width:18ch; }
h2.sm { font-size:clamp(26px, 4vw, 32px); margin-bottom:24px; }
h3 { font-size:clamp(22px, 3.4vw, 28px); line-height:1.1; }
.eyebrow { font:600 11.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:0 0 16px; }
.lede { font-size:clamp(17px, 2.2vw, 19px); color:var(--cream-2); max-width:640px; margin:18px 0 0; }
.xs { font-size:12px; }

/* header */
.top { position:sticky; top:0; z-index:5; background:rgba(11,9,9,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:20px; height:60px; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--cream); font:500 19px var(--serif); letter-spacing:.01em; }
.brand:hover { text-decoration:none; } .brand b { font-weight:400; font-style:italic; color:var(--brass); }
.mark { width:20px; height:20px; } .mark path { fill:none; stroke-linecap:round; }
.m-base { stroke:currentColor; stroke-opacity:.35; stroke-width:1.6; } .m-tick { stroke:currentColor; stroke-width:2.6; } .m-play { stroke:var(--brass); stroke-width:2.6; } .mark .m-head { fill:var(--brass); stroke:none; }
.nav { display:none; gap:24px; margin-left:auto; font-size:14px; }
.nav a { color:var(--cream-2); } .nav a:hover { color:var(--cream); text-decoration:none; }
.top .btn { margin-left:auto; } .signin { font-size:14px; color:var(--cream-2); }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px; border-radius:999px; border:0; font:600 14px var(--sans); cursor:pointer; text-decoration:none !important; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn-primary { background:var(--brass); color:var(--brass-ink); } .btn-primary:hover { background:var(--cream); }
.btn-ghost { background:transparent; color:var(--cream); border:1px solid var(--line-3); } .btn-ghost:hover { border-color:var(--brass); }
.btn-sm { height:36px; padding:0 16px; font-size:13px; }
.btn[disabled] { opacity:.6; cursor:default; }
.ctas { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:32px; }

/* sections */
section { padding:96px 0; border-top:1px solid var(--line); }
section.hero { border-top:0; padding:64px 0 0; overflow:hidden; }
figure { margin:0; }
.lede { font-size:clamp(17px, 2.2vw, 21px); line-height:1.55; max-width:600px; margin-top:24px; }

/* hero */
.hero h1 { max-width:11ch; }
.hero .note { margin-top:16px; font-size:13px; color:var(--cream-3); }

/* hero visual: the monolith. Frames flow in, creatives flow out. */
.mono { margin:56px auto 0; max-width:1200px; position:relative; }
.mono svg { width:100%; height:320px; }
.mono figcaption { display:flex; justify-content:space-between; gap:12px; padding:18px var(--gut) 40px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3); }
.mono .mono-name { color:var(--brass); font-weight:600; }
.mono .f { animation:flow-in 9s linear infinite; }
.mono .f:nth-child(1) { animation-delay:0s; } .mono .f:nth-child(2) { animation-delay:-1.125s; } .mono .f:nth-child(3) { animation-delay:-2.25s; } .mono .f:nth-child(4) { animation-delay:-3.375s; }
.mono .f:nth-child(5) { animation-delay:-4.5s; } .mono .f:nth-child(6) { animation-delay:-5.625s; } .mono .f:nth-child(7) { animation-delay:-6.75s; } .mono .f:nth-child(8) { animation-delay:-7.875s; }
@keyframes flow-in { 0% { transform:translateX(0); opacity:0; } 12% { opacity:.9; } 90% { opacity:.9; } 100% { transform:translateX(512px); opacity:0; } }
.mono .o { opacity:0; animation:flow-out 9s var(--ease) infinite; }
.mono .o1 { animation-delay:-.4s; } .mono .o2 { animation-delay:-1.9s; } .mono .o3 { animation-delay:-3.4s; } .mono .o4 { animation-delay:-4.9s; } .mono .o5 { animation-delay:-6.4s; } .mono .o6 { animation-delay:-7.9s; }
@keyframes flow-out { 0% { transform:translateX(-20px); opacity:0; } 10% { opacity:1; } 70% { opacity:1; } 100% { transform:translateX(420px); opacity:0; } }
.mono .scan { animation:scan 6s ease-in-out infinite; }
@keyframes scan { from { transform:translateY(0); } to { transform:translateY(532px); } }

/* from perception to edits */
.trio { display:grid; gap:0; margin-top:56px; border-top:1px solid var(--line); }
.trio article { padding:32px 0; border-bottom:1px solid var(--line); }
.trio .n { font:600 11.5px var(--sans); letter-spacing:.14em; color:var(--brass); }
.trio h3 { font-size:clamp(28px, 3.6vw, 36px); margin:14px 0 12px; }
.trio p { margin:0; font-size:16px; color:var(--cream-2); max-width:42ch; }

/* products */
.prods { display:grid; gap:0; margin-top:56px; border-top:1px solid var(--line); }
.prods article { padding:28px 0; border-bottom:1px solid var(--line); }
.prods h3 { font-size:clamp(28px, 3.6vw, 36px); margin-bottom:10px; }
.prods p { margin:0; font-size:15.5px; color:var(--cream-2); max-width:34ch; }

/* faq */
.faq { border-top:1px solid var(--line); max-width:820px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding:20px 36px 20px 0; position:relative; font:400 21px/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:18px; font:300 24px var(--sans); color:var(--brass); transition:transform .2s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq .a { padding:0 0 22px; color:var(--cream-2); font-size:15.5px; max-width:680px; }
.faq .a p { margin:0 0 10px; }

/* request a demo */
.req { display:grid; gap:36px; }
form { display:grid; gap:18px; max-width:620px; }
.grid2 { display:grid; gap:18px; }
label { display:block; font-size:12.5px; color:var(--cream-2); margin-bottom:4px; letter-spacing:.02em; }
input, textarea { width:100%; background:transparent; color:var(--cream); border:0; border-bottom:1px solid var(--line-3); border-radius:0; padding:9px 0; font:16px var(--sans); }
input:focus, textarea:focus { outline:none; border-bottom-color:var(--brass); }
textarea { resize:vertical; min-height:96px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formrow { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.formmsg { font-size:14px; } .formmsg.err { color:var(--bad); }
.thanks { font:italic 400 28px/1.3 var(--serif); margin:0; }

/* footer */
footer { border-top:1px solid var(--line); padding:32px 0 48px; font-size:13px; color:var(--cream-3); }
footer .wrap { display:grid; gap:18px; }
footer nav { display:flex; flex-wrap:wrap; gap:18px; }
footer a { color:var(--cream-2); }

/* >= 720 */
@media (min-width:720px) {
  :root { --gut:28px; }
  section { padding:144px 0; }
  section.hero { padding:88px 0 0; }
  .hero h1 { max-width:20ch; }
  .mono { margin-top:48px; }
  .mono svg { height:auto; aspect-ratio:1080/460; }
  .mono figcaption { padding-bottom:64px; }
  .trio { grid-template-columns:repeat(3, 1fr); border-top:0; }
  .trio article { border-bottom:0; border-top:1px solid var(--line); padding:32px 32px 0 0; }
  .trio article + article { padding-left:32px; border-left:1px solid var(--line); }
  .prods { grid-template-columns:repeat(2, 1fr); column-gap:48px; }
  .grid2 { grid-template-columns:1fr 1fr; }
  .req { grid-template-columns:1.1fr 1fr; align-items:end; gap:64px; }
  footer .wrap { grid-template-columns:auto 1fr auto; align-items:center; gap:32px; }
  footer nav { justify-content:flex-end; }
}
@media (min-width:980px) {
  .nav { display:flex; }
  .top .btn { margin-left:8px; }
  .prods { grid-template-columns:repeat(4, 1fr); column-gap:0; border-top:0; }
  .prods article { border-bottom:0; border-top:1px solid var(--line); padding:32px 28px 0 0; }
  .prods article + article { padding-left:28px; border-left:1px solid var(--line); }
}
@media (max-width:420px) {
  .signin { display:none; }
  .mono figcaption span:not(.mono-name) { display:none; }
  .mono figcaption { justify-content:center; }
}

/* motion: a still composition instead of the flow */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; }
  .mono .f, .mono .o, .mono .scan { animation:none; }
  .mono .scan { transform:translateY(270px); }
  .mono .f { opacity:.9; }
  .mono .f:nth-child(1) { transform:translateX(40px); opacity:.25; } .mono .f:nth-child(2) { transform:translateX(104px); opacity:.4; } .mono .f:nth-child(3) { transform:translateX(168px); opacity:.55; } .mono .f:nth-child(4) { transform:translateX(232px); opacity:.7; }
  .mono .f:nth-child(5) { transform:translateX(296px); } .mono .f:nth-child(6) { transform:translateX(360px); } .mono .f:nth-child(7) { transform:translateX(424px); opacity:.6; } .mono .f:nth-child(8) { opacity:0; }
  .mono .o { opacity:1; }
  .mono .o1 { transform:translateX(30px); } .mono .o2 { transform:translateX(70px); } .mono .o3 { transform:translateX(150px); }
  .mono .o4 { transform:translateX(250px); opacity:.7; } .mono .o5 { transform:translateX(290px); opacity:.5; } .mono .o6 { transform:translateX(360px); opacity:.35; }
}