@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/source-serif-4-700-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/public-sans-400-normal.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/public-sans-700-normal.woff2) format("woff2")}
:root{--navy:#14243B;--navy2:#0E1A2C;--paper:#FAF7F0;--amber:#E89B1C;--amber-d:#C98210;--ink:#1B1F24;--ink2:#454B54;--on-navy:#F5F2EA;--on-navy2:#D9D4C7;--line:#E2DCCF;--card:#FFFFFF;--link:#14243B}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 "Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;font-weight:700;line-height:1.2;margin:0 0 16px;color:var(--ink)}
h1{font-size:2.25rem}h2{font-size:1.85rem}h3,h4,.h3like{font-size:1.3rem}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:1.25em}li{margin-bottom:8px}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--amber);color:var(--ink);padding:12px 16px;z-index:100;font-weight:700}
.skip:focus{left:8px}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--navy);color:var(--on-navy);border-bottom:1px solid #22344F}
.head-in{display:flex;align-items:center;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-navy);text-decoration:none;font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:1.3rem;min-height:44px}
.brand img{width:36px;height:36px;border-radius:50%}
.nav-main{display:none}
.nav-main a{color:var(--on-navy);text-decoration:none;font-weight:700;font-size:1rem;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:6px}
.nav-main a:hover,.nav-main a[aria-current=page]{background:#22344F}
.head-cta{margin-left:auto}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;padding:10px 14px;border:1px solid #3A4E6B;border-radius:6px;color:var(--on-navy);font-weight:700;font-size:1rem;display:flex;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:#22344F}
.menu-list{position:absolute;right:0;top:52px;background:var(--navy);border:1px solid #3A4E6B;border-radius:8px;padding:8px;width:min(280px,calc(100vw - 32px));box-shadow:0 12px 28px rgba(0,0,0,.3)}
.menu-list a{display:flex;align-items:center;min-height:48px;padding:0 12px;color:var(--on-navy);text-decoration:none;font-weight:700;border-radius:6px}
.menu-list a:hover{background:#22344F}
.head-cta .btn{display:none}
@media (min-width:1000px){.nav-main{display:flex;gap:4px;margin-left:24px}.menu{display:none}.head-cta .btn{display:inline-flex}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:8px;background:var(--amber);color:var(--ink);font-weight:700;font-size:1rem;text-decoration:none;border:2px solid var(--amber);line-height:1.2;text-align:center;cursor:pointer;font-family:inherit}
.btn:hover{background:#F2AC38;border-color:#F2AC38}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.on-navy .btn-line{color:var(--on-navy);border-color:var(--on-navy)}
.on-navy .btn-line:hover{background:var(--on-navy);color:var(--navy)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
/* sections */
.sec{padding:64px 0}
.sec-alt{background:#F3EEE3;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.on-navy{background:var(--navy);color:var(--on-navy)}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}
.on-navy a:not(.btn){color:#fff}
.lede{font-size:1.15rem;max-width:62ch}
.narrow>*{max-width:760px}
.grid{display:grid;gap:24px}
@media (min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column}
.card .btn{margin-top:auto;align-self:flex-start}
.card p:last-of-type{margin-bottom:20px}
.on-navy .card{background:#1C2F4B;border-color:#2E4565;color:var(--on-navy)}
.on-navy .card h2,.on-navy .card h3{color:#fff}
.who{font-weight:700;color:var(--ink2);margin-bottom:8px}
.on-navy .who{color:var(--on-navy2)}
.price-line{font-weight:700}
.fine{font-size:.95rem;color:var(--ink2)}
.on-navy .fine{color:var(--on-navy2)}
/* hero */
.hero{padding:48px 0 64px}
.hero h1{font-size:2.4rem;max-width:18ch}
.hero-grid{display:grid;gap:32px;align-items:center}
.hero-cards{display:grid;gap:20px;margin-top:24px}
@media (min-width:700px){.hero-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.hero{padding:72px 0 88px}.hero h1{font-size:3.1rem}.hero-grid{grid-template-columns:1.6fr 1fr}}
.phone{background:#0B1524;border-radius:32px;padding:12px;box-shadow:0 20px 50px rgba(0,0,0,.35);max-width:300px;margin:0 auto}
.phone img{border-radius:22px;width:100%}
.shot{background:#0B1524;border-radius:20px;padding:8px;max-width:260px;margin:0 0 20px}
.shot img{border-radius:14px;width:100%}
/* trust */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust ul{list-style:none;padding:24px 0;margin:0;display:grid;gap:12px}
@media (min-width:760px){.trust ul{grid-template-columns:repeat(5,1fr);gap:20px}}
.trust li{display:flex;gap:10px;align-items:flex-start;margin:0;font-weight:700;font-size:1rem}
.trust svg{flex:none;margin-top:3px}
/* spotlight */
.split{display:grid;gap:40px;align-items:start}
@media (min-width:900px){.split{grid-template-columns:1.4fr 1fr}}
/* packages */
.pkg-grid{display:grid;gap:20px;margin:24px 0}
@media (min-width:900px){.pkg-grid{grid-template-columns:repeat(3,1fr)}}
.pkg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.pkg .price{font-family:"Source Serif 4",Georgia,serif;font-size:2rem;font-weight:700;margin:4px 0 12px}
.pkg .price span{font-family:"Public Sans",sans-serif;font-size:1rem;font-weight:400;color:var(--ink2)}
.pkg .price s{color:var(--ink2);margin-right:8px;font-size:1.4rem}
.paypal-smart-btn{min-height:48px;margin-top:16px}
.coupon-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;max-width:560px}
.coupon-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.coupon-row input{flex:1 1 180px;min-height:48px;padding:0 14px;font-size:1rem;border:2px solid #6B6F76;border-radius:8px;text-transform:uppercase;font-family:inherit;background:#fff;color:var(--ink)}
.coupon-row button{min-height:48px}
.coupon-msg{min-height:1.4em;margin:10px 0 0;font-size:1rem}
.coupon-msg.ok{color:#1E6B34;font-weight:700}
.coupon-msg.bad{color:#A3221A;font-weight:700}
/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:1rem}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--navy);color:#fff}
tbody tr:last-child td{border-bottom:0}
/* faq */
.faq{display:grid;gap:16px}
@media (min-width:900px){.faq{grid-template-columns:1fr 1fr}}
.faq div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px}
.faq h3{font-size:1.15rem;margin-bottom:8px}
.faq p{margin:0}
/* signup */
.signup form{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;max-width:560px}
.signup input{flex:1 1 220px;min-height:48px;padding:0 14px;font-size:1rem;border:2px solid #fff;border-radius:8px;font-family:inherit}
/* steps */
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:16px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin:0}
.ticks{list-style:none;padding:0}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:8px;border-left:3px solid var(--amber-d);border-bottom:3px solid var(--amber-d);transform:rotate(-45deg)}
.crumbs{font-size:.95rem;padding-top:16px}
.crumbs a{color:var(--on-navy);display:inline-flex;min-height:44px;min-width:44px;padding:0 4px;align-items:center}
.crumbs span{color:var(--on-navy2)}
.page-hero{padding:24px 0 56px}
@media (min-width:1000px){.page-hero h1{font-size:2.8rem}}
.tips-list{list-style:none;padding:0;display:grid;gap:16px}
@media (min-width:760px){.tips-list{grid-template-columns:1fr 1fr}}
.tips-list li{margin:0}
/* footer */
.site-foot{background:var(--navy2);color:var(--on-navy);padding:56px 0 32px;font-size:1rem}
.site-foot h2{font-size:1.15rem;color:#fff;margin-bottom:8px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:0}
.site-foot a{color:var(--on-navy);display:inline-flex;align-items:center;min-height:44px}
.foot-grid{display:grid;gap:24px;grid-template-columns:1fr 1fr;margin:32px 0}
@media (min-width:900px){.foot-grid{grid-template-columns:repeat(4,1fr)}}
.foot-base{border-top:1px solid #2E4565;padding-top:24px;color:var(--on-navy2)}
.mail-list li{margin-bottom:8px;overflow-wrap:anywhere}
.mail-list a{overflow-wrap:anywhere}
/* phone trims (QC November 11, 2026) */
.m-only{display:none}
@media (max-width:759px){
  .m-hide,.m-hide-block{display:none!important}
  .m-only{display:block}
  .hero{padding:20px 0 32px}
  .hero h1{font-size:1.85rem;margin-bottom:8px}
  .hero .lede{font-size:1rem;margin-bottom:0}
  .hero-cards{gap:12px;margin-top:16px}
  .hero-cards .card{padding:14px 18px}
  .hero-cards .card h2{margin-bottom:2px;font-size:1.2rem}
  .hero-cards .card .who{margin-bottom:10px;font-size:.95rem}
  .hero-cards .card p:last-of-type{margin-bottom:10px}
  .hero-cards .btn{min-height:44px;padding:10px 18px}
  .sec{padding:40px 0}
  .app-list{gap:0;border-top:1px solid var(--line)}
  .app-list .card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:16px 0}
  .app-list .card h3{margin-bottom:4px}
  .app-list .card p{margin-bottom:6px}
  .app-list .card p:last-of-type{margin-bottom:10px}
  .short-cards{gap:12px}
  .short-cards .card{padding:16px 18px}
  .short-cards .card h3{margin-bottom:4px}
  .short-cards .card p:last-of-type{margin-bottom:12px}
  .short-cards .card p:only-of-type:last-child{margin-bottom:0}
  .pkg-grid{gap:12px}
  .pkg{padding:18px}
  .faq{gap:10px}
}
.faq-d details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 20px}
.faq-d summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;list-style:none}
.faq-d summary::-webkit-details-marker{display:none}
.faq-d summary h3{font-size:1.1rem;margin:0}
.faq-d summary::after{content:"+";font-weight:700;font-size:1.4rem;line-height:1;color:var(--ink)}
.faq-d details[open] summary::after{content:"\2212"}
.faq-d details p{margin:0 0 16px}
/* Resume Help table padding */
.tbl-wrap{padding:8px}
th,td{padding:16px 20px}
/* For businesses hero illustration (desktop only) */
.biz-hero{display:grid;gap:32px;align-items:center}
.biz-art{display:none}
@media (min-width:1000px){.biz-hero{grid-template-columns:1.5fr 1fr}.biz-art{display:block;max-width:380px;width:100%;justify-self:end}}
@media (max-width:759px){.hero .phone{max-width:200px;padding:8px;border-radius:24px}.hero .phone img{border-radius:16px}.hero-grid{gap:24px}.trust ul{padding:16px 0;gap:8px}}
/* visuals round: photos, story ads, phone demos */
picture img{display:block}
.has-photo{position:relative;overflow:hidden;isolation:isolate;background:var(--navy)}
.has-photo>.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 30%;z-index:-2}
.has-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,36,59,.80) 0%,rgba(20,36,59,.90) 40%,rgba(20,36,59,.97) 100%)}
@media (min-width:1000px){
 .has-photo::before{background:linear-gradient(90deg,#14243B 0%,rgba(20,36,59,.96) 34%,rgba(20,36,59,.6) 56%,rgba(20,36,59,.12) 78%,rgba(20,36,59,0) 100%)}
 .hero.has-photo .hero-grid{grid-template-columns:minmax(0,680px) 1fr}
 .page-hero.has-photo{padding:40px 0 96px}
 .page-hero.has-photo .wrap>*{max-width:600px}
 .has-photo>.hero-bg img{object-position:right 30%}
}
.ph{border-radius:14px;overflow:hidden;background:#E2DCCF;margin:0 0 20px}
.ph img{width:100%;height:auto}
.card .ph{margin:-24px -24px 20px;border-radius:12px 12px 0 0}
.res-top{display:grid;gap:32px;align-items:start;margin-bottom:8px}
@media (min-width:900px){.res-top{grid-template-columns:1.3fr 1fr}}
.res-top .ph{max-width:560px}
/* about trio, tip thumbs */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 8px}
.trio .ph{margin:0;border-radius:12px}
.tip-thumb img{width:120px;height:auto;border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,.12);margin-bottom:14px}
@media (min-width:760px){.tip-thumb img{width:140px}}
.biz-check{display:grid;gap:24px}
.has-photo .biz-hero{grid-template-columns:1fr}
.biz-art{margin-top:28px}
@media (min-width:1000px){.biz-art{max-width:320px;justify-self:start}}
@media (min-width:1000px){
 .hero.has-photo>.hero-bg img{left:auto;right:0;width:66%;object-position:62% 30%}
 .hero.has-photo::before{background:linear-gradient(90deg,#14243B 0%,#14243B 36%,rgba(20,36,59,.7) 50%,rgba(20,36,59,.15) 68%,rgba(20,36,59,0) 100%)}
 .page-hero.has-photo>.hero-bg img{left:auto;right:0;width:62%}
 .page-hero.has-photo::before{background:linear-gradient(90deg,#14243B 0%,#14243B 40%,rgba(20,36,59,.65) 52%,rgba(20,36,59,.1) 70%,rgba(20,36,59,0) 100%)}
}
@media (min-width:1000px){
 .hero.has-photo::before{background:linear-gradient(90deg,#14243B 0%,#14243B 46%,rgba(20,36,59,.6) 58%,rgba(20,36,59,.12) 74%,rgba(20,36,59,0) 100%)}
 .hero.has-photo .lede{max-width:520px}
}
@media (min-width:1000px) and (max-width:1279px){
 .page-hero.has-photo .wrap>*{max-width:520px}
 .page-hero.has-photo::before{background:linear-gradient(90deg,#14243B 0%,#14243B 56%,rgba(20,36,59,.55) 66%,rgba(20,36,59,.1) 80%,rgba(20,36,59,0) 100%)}
 .hero.has-photo::before{background:linear-gradient(90deg,#14243B 0%,#14243B 54%,rgba(20,36,59,.55) 64%,rgba(20,36,59,.1) 80%,rgba(20,36,59,0) 100%)}
}

/* showcase: story ads and demos (round 4, Wispr-style pattern). Plain flow, no JS needed. */
.show{display:grid;gap:28px;align-items:center;background:#FBF8F1;border:1px solid var(--line);border-radius:24px;padding:32px 24px 36px;overflow:hidden;max-width:1080px;margin:0 auto}
@media (min-width:900px){.show{grid-template-columns:1fr 1fr;gap:48px;padding:56px 64px}}
.show-kicker{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A5A06;margin:0 0 12px}
.show-h{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:1.9rem;line-height:1.15;color:var(--ink);margin:0 0 14px}
@media (min-width:900px){.show-h{font-size:2.6rem}}
.show-dh{font-size:1.6rem;margin:0 0 10px}
@media (min-width:900px){.show-dh{font-size:2.1rem}}
.show-sub{font-size:1.05rem;color:var(--ink2);margin:0 0 20px;max-width:34em}
.show-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.show-badge{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:1rem}
.show-art{position:relative;display:flex;justify-content:center;padding:12px 0 8px;min-height:300px}
.show-swoosh{position:absolute;left:50%;top:50%;width:min(118%,520px);height:auto;transform:translate(-50%,-50%) rotate(-8deg);z-index:0;pointer-events:none}
.show-phone{position:relative;z-index:1;width:min(64vw,240px);background:#0B1524;border-radius:34px;padding:9px;box-shadow:0 24px 48px rgba(20,36,59,.28),0 2px 0 #2b3a52 inset;transform:rotate(-4deg)}
@media (min-width:900px){.show-phone{width:280px}}
.show-screen{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:375/720;background:#0B0B0F}
.show-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.show-screen picture{display:block;height:100%}
.show-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .3s}
.show-video.on{opacity:1}
.show-call{position:relative;z-index:2;align-self:flex-end;margin:0 0 0 -40%;width:min(78%,300px);background:#14243B;color:#F5F2EA;border-radius:16px;padding:14px 16px;box-shadow:0 16px 32px rgba(20,36,59,.35);font-size:.95rem;line-height:1.35;transform:rotate(2deg)}
.show-art:has(.show-call){padding-bottom:0}
.call-l{display:block;font-size:.8rem;font-weight:700;color:#C9D3E3;margin-bottom:2px}
.call-messy{color:#F5F2EA;margin-bottom:6px}
.call-messy s{text-decoration-line:line-through;text-decoration-color:#FF5A4A;text-decoration-thickness:3px}
.call-messy.hand s{font-family:"Bradley Hand","Segoe Print","Comic Sans MS","Chalkboard SE",cursive;font-size:1.2rem;display:inline-block;transform:rotate(-3deg)}
.call-arrow{color:#F2C46B;font-weight:700;line-height:1;margin:2px 0 6px}
.call-clean{background:#fff;color:#0B0B0F;border-radius:8px;padding:10px 12px}
.call-clean .call-l{color:#5B6270}
.call-line{display:flex;justify-content:space-between;gap:10px}
@media (max-width:899px){.show-art{flex-direction:column;align-items:center}.show-call{margin:-56px 0 0 0;align-self:center;width:min(92%,330px)}}
@media (min-width:900px){.show-art{align-items:flex-end}.show-call{position:absolute;left:0;bottom:24px;margin:0;width:260px}}
.ad-band{padding:56px 0}
.demo-col{position:relative}
@media (min-width:900px){.sticky-phone{position:sticky;top:96px}}
@media (prefers-reduced-motion:reduce){.show-video{display:none}}
.show-demo{grid-template-columns:1fr!important;background:transparent;border:0;padding:0;gap:20px;text-align:left}
.show-demo .show-art{min-height:0}
.split .show-ad,.res-top .show-ad{grid-template-columns:1fr;padding:28px 22px 32px}
.split .show-ad .show-h{font-size:1.75rem}
.split .show-ad .show-call{position:relative;left:auto;bottom:auto;margin:-56px 0 0;align-self:center;width:min(92%,320px)}
.split .show-ad .show-art{flex-direction:column;align-items:center}

/* paper plane trail: default state is the finished trail; the plane only shows while flying (JS + motion allowed) */
.trail{width:min(116%,560px);transform:translate(-50%,-50%)}
.show-demo .show-phone{width:min(54vw,210px)}
@media (min-width:900px){.show-demo .show-phone{width:260px}.trail{width:460px}}
.show-demo .show-phone{transform:rotate(-3deg)}
.show-demo{overflow:visible}
.show-demo .show-art{overflow:hidden;padding:40px 0}
.trail .trail-path{stroke-dasharray:1;stroke-dashoffset:0}
.trail .trail-plane{opacity:0}
.trail.fly .trail-plane{opacity:1}
.trail.fly .trail-path{animation:trail-draw 4s cubic-bezier(.45,0,.55,1) both}
@keyframes trail-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.trail .trail-plane{display:none}.trail .trail-path{animation:none!important}}
/* Impeccable round 4 fixes */
.hero .card .who{color:var(--on-navy)}
.narrow>p{max-width:33em}
.show{background:transparent;border:0;border-radius:0}

/* round 6: hero headline runs wider on desktop (1 to 2 lines) */
@media (min-width:700px){.hero h1{max-width:none}}
@media (min-width:1000px){.hero.has-photo h1{width:max-content;max-width:13.5em;font-size:3.5rem;line-height:1.1;text-wrap:balance}}
/* round 7: thin silver phone on every phone (Wispr reference): slim brushed-silver rim, very thin black screen
   border that is the same on all four sides, punch-hole camera inside the screen, slim side buttons, soft shadow */
.show-phone{background:linear-gradient(135deg,#F4F5F7 0%,#C9CDD3 20%,#F1F2F4 46%,#B7BCC3 72%,#E7E9EC 100%);padding:3px;border-radius:44px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 1px 1px rgba(20,36,59,.18),0 30px 50px -24px rgba(20,36,59,.5),0 14px 26px -16px rgba(20,36,59,.32);transform:rotate(-3deg)}
.show-phone::before{content:"";position:absolute;right:-2px;top:21%;width:2px;height:40px;border-radius:0 2px 2px 0;background:#A9AEB6;box-shadow:0 52px 0 #A9AEB6}
.show-phone::after{content:none}
.show-screen{box-sizing:border-box;border:5px solid #08090B;border-radius:41px;background:#08090B}
.show-screen::after{content:"";position:absolute;z-index:3;top:7px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#030405;box-shadow:0 0 0 1.5px rgba(255,255,255,.07)}
.show-demo .show-phone{transform:rotate(-2deg)}
/* paper scene: one still image (round 8: photoreal phone baked into the photo) */
.show-art.scene{display:block;position:relative;padding:0;min-height:0;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1;border-radius:20px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(20,36,59,.45)}
.scene-bg{position:absolute;inset:0}
.scene-bg img{width:100%;height:100%;object-fit:cover}

/* round 7 fixes: phone corners scale with phone size (circular, about 13% of width); screen content keeps the exact
   app aspect so nothing is cropped at the sides; the camera hole sits in the app's top stripe band */
.show-phone{border-radius:14% / 7.2%}
.show-screen{box-sizing:content-box;border-radius:12.6% / 6.5%}
.show-screen::after{top:.7%;width:3.6%;height:auto;aspect-ratio:1;margin-left:0;transform:translateX(-50%)}
/* thin border stays thin on small phones (same width on all four sides) */
.show-phone{container-type:inline-size}
.show-screen{border-width:clamp(3px,1.9cqi,5px)}
/* rim reads as metal on the off-white page: darker brushed-silver tones and a fine outer edge line */
.show-phone{background:linear-gradient(135deg,#E9EBEE 0%,#AEB3BA 18%,#E3E5E8 42%,#9EA3AB 70%,#D5D8DC 100%);box-shadow:0 0 0 1px rgba(70,76,86,.55),inset 0 0 0 1px rgba(255,255,255,.6),0 30px 50px -24px rgba(20,36,59,.5),0 14px 26px -16px rgba(20,36,59,.32)}
.show-phone::before{background:#8F959D;box-shadow:0 52px 0 #8F959D}