/* Page content styles for a creative review page.
   The shell (sidebar, header, footer, tokens, reset) lives in app.css. */

.hero{padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px) clamp(20px,3vw,28px);max-width:1180px;margin:0 auto;}
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--thyme);font-weight:600;margin:0 0 14px;}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.15rem);line-height:1.08;letter-spacing:-.01em;margin:0 0 18px;max-width:20ch;}
.hero p.lead{font-size:clamp(1rem,1.4vw,1.12rem);color:#5a5349;max-width:64ch;margin:0 0 26px;}

/* ad switch tabs */
.adtabs{display:inline-flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:13px;padding:4px;gap:4px;}
.adtab{border:none;background:transparent;font-family:var(--sans);color:var(--muted);cursor:pointer;padding:10px 18px;border-radius:9px;font-size:.86rem;font-weight:500;transition:background .18s ease,color .18s ease;}
.adtab .lead-k{font-family:var(--serif);font-weight:600;margin-right:7px;color:var(--thyme);}
.adtab:hover{color:var(--charcoal);}
.adtab[aria-pressed="true"]{background:var(--charcoal);color:#fff;}
.adtab[aria-pressed="true"] .lead-k{color:#c9ca9a;}

.layout{max-width:1180px;margin:0 auto;padding:20px clamp(20px,4vw,48px) 72px;display:grid;grid-template-columns:minmax(300px,340px) 1fr;gap:clamp(32px,4vw,60px);align-items:start;}
.phone-col{position:sticky;top:28px;}

/* reels mockup */
.device{width:100%;max-width:340px;margin:0 auto;background:#161311;border-radius:40px;padding:11px;box-shadow:0 30px 60px -20px rgba(44,36,32,.45),0 8px 20px -12px rgba(44,36,32,.35);}
.screen{position:relative;border-radius:30px;overflow:hidden;background:#0d0d0d;aspect-ratio:9/16;font-family:var(--sans);color:#fff;transition:opacity .3s ease;}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.media-fallback{position:absolute;inset:0;display:none;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;padding:32px;color:#cfcabf;font-size:.82rem;background:#0d0d0d;}
.media-fallback a{color:#fff;}
.screen.failed video{display:none;}
.screen.failed .media-fallback{display:flex;}
.scrim-top{position:absolute;top:0;left:0;right:0;height:90px;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent);pointer-events:none;}
.scrim-bot{position:absolute;bottom:0;left:0;right:0;height:62%;background:linear-gradient(to top,rgba(0,0,0,.64),rgba(0,0,0,.15) 55%,transparent);pointer-events:none;}
.status{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:10px 18px 0;font-size:.72rem;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.4);}
.status .glyphs{letter-spacing:1px;font-size:.66rem;}
.reels-tag{position:absolute;top:34px;left:16px;z-index:3;font-size:.86rem;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5);display:flex;align-items:center;gap:6px;}
.rail{position:absolute;right:8px;bottom:104px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:17px;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.rail .act{display:flex;flex-direction:column;align-items:center;gap:3px;}
.rail svg{width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.rail .n{font-size:.66rem;font-weight:600;}
.rail .thumb{width:26px;height:26px;border-radius:7px;border:1.5px solid #fff;margin-top:3px;background:radial-gradient(circle at 30% 30%,#8b8c7e,#4d4e42);}
.reel-info{position:absolute;left:14px;right:60px;bottom:24px;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.55);}
.reel-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.avstack{display:flex;flex:none;}
.avstack .reel-av{width:29px;height:29px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:.92rem;font-weight:500;box-shadow:0 0 0 1.5px #0d0d0d;}
.avstack .reel-av.creator{background:radial-gradient(circle at 30% 30%,#b9a48c,#8a6f57 75%);}
.avstack .reel-av.chick{background:radial-gradient(circle at 30% 30%,#8b8c7e,#5c5d50 75%);margin-left:-11px;box-shadow:0 0 0 1.5px #0d0d0d;}
.reel-head .who{display:flex;flex-direction:column;line-height:1.18;min-width:0;}
.reel-head .who b{font-size:.8rem;font-weight:600;}
.reel-head .who .sp2{font-size:.71rem;opacity:.85;}
.follow{margin-left:auto;flex:none;font-size:.72rem;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.85);border-radius:6px;padding:3px 10px;background:transparent;}
.reel-cap{font-size:.8rem;line-height:1.42;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:opacity .28s ease;}
.reel-cap b{font-weight:600;margin-right:5px;}
.reel-cap .more{opacity:.8;}
.reel-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.92);color:#111;border-radius:9px;padding:11px 14px;font-size:.83rem;font-weight:600;backdrop-filter:blur(2px);transition:opacity .28s ease;}
.reel-cta svg{width:15px;height:15px;flex:none;}
.progress{position:absolute;left:0;right:0;bottom:8px;height:2px;z-index:3;padding:0 14px;}
.progress i{display:block;height:2px;background:rgba(255,255,255,.35);border-radius:2px;position:relative;}
.progress i::after{content:"";position:absolute;left:0;top:0;height:2px;width:38%;background:#fff;border-radius:2px;}
.fade-out{opacity:0 !important;}

.review-col{display:flex;flex-direction:column;gap:26px;}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px clamp(20px,2.4vw,28px);}
.panel h2{font-family:var(--serif);font-weight:500;font-size:1.28rem;margin:0 0 4px;letter-spacing:-.01em;}
.panel p.sub{margin:0 0 18px;color:var(--muted);font-size:.9rem;}

.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.pill{font-family:var(--sans);font-size:.82rem;font-weight:500;border:1px solid var(--line);background:#fff;color:var(--charcoal);padding:9px 15px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.pill .k{font-family:var(--serif);font-weight:600;font-size:.9rem;color:var(--thyme);}
.pill:hover{border-color:var(--thyme-soft);}
.pill[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
.pill[aria-pressed="true"] .k{color:#c9ca9a;}
.approved{display:none;align-items:center;gap:8px;font-size:.85rem;font-weight:500;color:#4f6a44;background:#eef2e7;border:1px solid #d7e1c9;border-radius:999px;padding:9px 15px;}
.approved svg{width:15px;height:15px;}

.field{padding:15px 0;border-top:1px solid var(--line);}
.field:first-of-type{border-top:none;}
.field .lab{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--thyme);font-weight:600;margin:0 0 7px;}
.field .val{margin:0;font-size:.95rem;color:var(--charcoal);white-space:pre-wrap;line-height:1.5;}
.field .val.cta-val{display:inline-block;background:var(--parchment);border:1px solid var(--line);padding:5px 12px;border-radius:7px;font-weight:500;font-size:.88rem;}
.field .val.dest{font-size:.86rem;color:var(--thyme);word-break:break-all;}
#copyBreakdown{transition:opacity .28s ease;}

.facts{list-style:none;margin:0;padding:0;}
.facts li{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:.92rem;}
.facts li:first-child{border-top:none;}
.facts .lab{flex:none;width:104px;color:var(--muted);font-size:.82rem;}
.facts .desc{color:var(--charcoal);}

.videolink{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--parchment);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.videolink .play{width:38px;height:38px;border-radius:50%;flex:none;background:var(--charcoal);color:#fff;display:flex;align-items:center;justify-content:center;}
.videolink .meta{min-width:0;flex:1;}
.videolink .meta b{display:block;font-size:.9rem;font-weight:600;}
.videolink .meta .ratio{font-weight:400;color:var(--muted);font-size:.78rem;}
.videolink .meta a{display:block;font-size:.78rem;color:var(--thyme);word-break:break-all;text-decoration:none;}
.videolink .meta a:hover{text-decoration:underline;}
.videolink .open{flex:none;font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--charcoal);text-decoration:none;border:1px solid var(--line);background:#fff;padding:8px 14px;border-radius:8px;transition:border-color .18s ease;}
.videolink .open:hover{border-color:var(--thyme-soft);}

.note{display:flex;gap:12px;padding:12px 0;border-top:1px dashed var(--line);font-size:.9rem;color:#5a5349;}
.note:first-child{border-top:none;}
.note .mark{flex:none;width:22px;height:22px;border-radius:50%;background:var(--parchment);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.8rem;color:var(--thyme);font-weight:600;}
.note b{color:var(--charcoal);font-weight:600;}
#notesWrap{transition:opacity .28s ease;}

.closer{background:var(--charcoal);color:#f4f1ea;border-radius:16px;padding:24px 28px;}
.closer h2{color:#fff;font-family:var(--serif);font-weight:500;font-size:1.2rem;margin:0 0 6px;}
.closer p{margin:0;color:#d8d2c4;font-size:.92rem;}
.closer b{color:#c9ca9a;}

@media (max-width:860px){.layout{grid-template-columns:1fr;}.phone-col{position:static;}.device{max-width:320px;}}