/* The POTUS card (Cara, 2026-11-06; Adam: "improve the design of the POTUS card"). One panel in
   POTUS's own look, the navy and gold of the app and its teaser: the incoming call from Mike on the
   left, POTUS on iPhone on the right (the teaser and two screens), then where it stands and the
   waitlist. Everything is in view at once; nothing hides at the end of a strip. */
#potus-drawer{padding:16px 24px 18px}
.potus-card{--navy:#0f1928;--gold:#c9a45c;--gold2:#e2c27f;--fg:#eef0f3;--muted:#a3aebb;--hair:#c9a45c33;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:452px;border-radius:14px;overflow:hidden;color:var(--fg);
  background:radial-gradient(120% 100% at 32% 18%,#1b2a43 0%,#121d2f 48%,var(--navy) 100%);box-shadow:0 18px 44px #0f19282e}
.potus-card p{margin:0}

/* the call */
.pc-call{position:relative;isolation:isolate;min-width:0;padding:30px 36px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.pc-mike{position:absolute;z-index:-1;top:0;right:0;width:64%;height:100%;object-fit:cover;object-position:58% 16%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);mask-image:linear-gradient(90deg,transparent 0,#000 46%)}
.pc-call:after{content:'';position:absolute;z-index:-1;inset:auto 0 0 0;height:46%;background:linear-gradient(0deg,#0f1928d9,transparent);pointer-events:none}
.pc-brand{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:550;letter-spacing:.16em;text-transform:uppercase}
.pc-brand img{width:24px;height:24px;border-radius:6px;box-shadow:0 0 0 1px #ffffff1f}
.pc-brand span{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.pc-who{max-width:320px}
.pc-incoming{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px!important}
.pc-incoming i{width:7px;height:7px;border-radius:50%;background:var(--gold2);animation:pc-ring 1.8s ease-out infinite}
@keyframes pc-ring{0%{box-shadow:0 0 0 0 #e2c27f88}70%,100%{box-shadow:0 0 0 9px #e2c27f00}}
.pc-name{font:400 46px/1 var(--serif);letter-spacing:-.02em;margin:0}
.pc-role{font-size:16px;color:var(--muted);margin-top:8px!important}
.pc-line{font-size:18px;line-height:1.4;margin:20px 0 22px!important}
.pc-answer{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px 0 20px;border:0;border-radius:999px;background:var(--gold);color:#132033;font:550 16px var(--sans);cursor:pointer;box-shadow:0 6px 18px #c9a45c33;transition:background .2s,transform .2s}
.pc-answer:hover{background:var(--gold2);transform:translateY(-1px)}
.pc-answer:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}
.pc-answer svg{width:19px;height:19px}
.pc-note{font-size:12px;line-height:1.55;color:var(--muted);margin-top:14px!important}
.pc-note a{color:var(--fg);text-underline-offset:.2em}

/* the product */
.pc-product{min-width:0;padding:30px 34px 26px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:20px;background:linear-gradient(180deg,#ffffff07,#ffffff00 60%)}
.pc-title{font:400 27px/1.15 var(--serif);letter-spacing:-.015em;margin:0}
.pc-phones{display:flex;gap:16px;align-items:flex-start}
.pc-phone{margin:0;flex:1 1 0;min-width:0;max-width:132px;display:flex;flex-direction:column;gap:10px}
.pc-screen{position:relative;display:block;width:100%;aspect-ratio:9/19.5;padding:0;border:2px solid #2c3b54;border-radius:18px;overflow:hidden;background:#0a121e;box-shadow:0 12px 26px #00000059;cursor:zoom-in;transition:transform .25s,border-color .25s}
.pc-screen:hover{transform:translateY(-3px);border-color:#c9a45c80}
.pc-screen:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.pc-screen img{display:block;width:100%;height:100%;object-fit:cover}
.pc-teaser .pc-screen{cursor:pointer}
.pc-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;border-radius:50%;background:#0f1928b8;border:1.5px solid var(--gold2);color:var(--gold2);backdrop-filter:blur(3px)}
.pc-play svg{width:20px;height:20px;margin-left:3px}
.pc-phone figcaption{font-size:12.5px;color:var(--muted)}
.pc-status{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:18px;border-top:1px solid var(--hair)}
.pc-status-main{font-size:15px}
.pc-status-sub{font-size:13px;color:var(--muted);margin-top:3px!important}
.pc-waitlist{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--gold);border-radius:999px;color:var(--gold2);font-size:15px;text-decoration:none;white-space:nowrap;transition:background .2s}
.pc-waitlist:hover{opacity:1;background:#c9a45c1f}
.pc-cta{display:flex;flex-direction:column;align-items:center;gap:7px}
.pc-site{font-size:12px;color:var(--muted);letter-spacing:.01em}
.pc-waitlist .arrow-out{width:.8em;height:.8em}

/* the film viewer */
#film-dialog{width:fit-content;max-width:94vw;padding:14px 14px 16px;background:#121517;border-color:#2b3034;color:#eef0f3}
#film-dialog .dialog-close{border-color:#4d5459;color:#eef0f3}
.film-dialog-body{margin-top:10px}
.film-dialog-body video{display:block;margin:0 auto;height:min(78svh,820px);aspect-ratio:9/16;max-width:100%;border-radius:8px;background:#000}

@media(max-width:1179px){.pc-wide-only{display:none!important}}
@media(max-width:1100px){
 .pc-call{padding:26px 28px}.pc-product{padding:26px 26px 22px}
 .pc-name{font-size:38px}.pc-line{font-size:16px}
 .pc-phones{gap:12px}.pc-phone{max-width:104px}.pc-screen{border-radius:15px}
 .pc-status{flex-direction:column;align-items:flex-start;gap:12px}
}
/* phones: the call, then the product, one under the other */
@media(max-width:700px){
 #potus-drawer{padding:10px}
 .potus-card{grid-template-columns:minmax(0,1fr);min-height:0;border-radius:12px}
 .pc-call{min-height:408px;padding:20px 20px 22px;gap:20px}
 .pc-mike{width:100%;height:66%;object-position:60% 14%;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
 .pc-call:after{display:none}
 .pc-who{max-width:none}
 .pc-name{font-size:34px}
 .pc-line{margin:14px 0 16px!important}
 .pc-answer{width:100%;justify-content:center}
 .pc-product{border-left:0;border-top:1px solid var(--hair);padding:20px 20px 20px;gap:16px}
 .pc-title{font-size:22px}
 .pc-phones{gap:10px}.pc-phone{max-width:none}.pc-screen{border-radius:14px}
 .pc-play{width:40px;height:40px;margin:-20px 0 0 -20px}
 .pc-status{align-items:stretch}
 .pc-cta{align-items:stretch;text-align:center}
 .pc-waitlist{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.pc-incoming i{animation:none}.pc-screen,.pc-answer{transition:none}}