/* The comparison, search and tool pages (agentrecast-vs-opusclip, listing-video-to-reels, real-estate-shorts-from-youtube, real-estate-video-captions-and-hooks, repurpose-home-tour-video, reel-hook-writer, zillow-listing-to-instagram-reel, real-estate-instagram-carousel, ai-voiceover-for-listing-videos), on top of styles.css. */
.guide-hero{position:relative;isolation:isolate;padding-top:70px;padding-bottom:40px;text-align:center}
.guide-hero h1{font-size:clamp(46px,6.4vw,86px);line-height:.93;max-width:960px}
.guide-hero .hero-copy{max-width:700px}
.guide-section{position:relative;padding-top:90px;padding-bottom:30px}
.guide-section .section-intro h2{font-size:clamp(34px,4.6vw,56px)}
.guide-section .section-intro p{max-width:680px;font-size:17px;color:var(--muted);line-height:1.6}
.guide-prose{max-width:760px}
.guide-prose p,.guide-prose li{color:#4f5b55;font-size:16px;line-height:1.7}
.guide-prose li{margin-bottom:8px}
.guide-prose a{text-decoration:underline}
.guide-prose a.button{text-decoration:none}
.compare-wrap{margin-top:44px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,253,248,.55)}
.compare-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.5}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare-table thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#59625c}
.compare-table thead th:nth-child(2){background:var(--acid);color:var(--ink)}
.compare-table tbody th{font-weight:750;width:26%}
.compare-table tbody td{color:#4f5b55}
.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0}
.compare-note{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.6}
.compare-note a{text-decoration:underline}
.guide-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:44px}
.guide-steps article{border-top:1px solid var(--line);padding:26px 24px;background:rgba(255,253,248,.3)}
.guide-steps span{font-size:10px;font-weight:850;letter-spacing:.14em;color:#68716b}
.guide-steps h3{margin:12px 0 8px;font-size:19px;letter-spacing:-.035em}
.guide-steps p{margin:0;color:#65706a;font-size:14px;line-height:1.6}
.faq{margin-top:36px;max-width:820px}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:750;font-size:17px;letter-spacing:-.02em}
.faq p{margin:12px 0 0;color:#4f5b55;font-size:15px;line-height:1.7}
/* A clip as it comes out: the headline in its white box for the first seconds, captions with the word highlight. */
.guide-sample{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;margin-top:44px}
.clip-frame{position:relative;width:250px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#17231d;box-shadow:0 30px 60px -30px rgba(23,35,29,.55);margin:0}
.clip-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% center}
.clip-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,22,18,.55),transparent 45%)}
.clip-headline{position:absolute;z-index:1;top:13%;left:9%;right:9%;background:#fff;color:#111;font-weight:800;font-size:16px;line-height:1.2;letter-spacing:-.02em;padding:9px 10px;border-radius:6px;text-align:center}
.clip-captions{position:absolute;z-index:1;bottom:20%;left:6%;right:6%;text-align:center;color:#fff;font-weight:850;font-size:19px;line-height:1.2;text-shadow:0 0 3px #000,0 0 6px rgba(0,0,0,.7)}
.clip-captions mark{background:none;color:#d9fa64}
.clip-time{position:absolute;z-index:1;right:10px;bottom:10px;font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:3px 6px;border-radius:4px}
.guide-sample figcaption,.sample-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:12px;max-width:250px}
.hook-tool{margin-top:36px;display:grid;gap:16px;max-width:760px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,253,248,.6)}
.hook-tool label{display:grid;gap:6px;font-weight:750;font-size:14px}
.hook-tool label small{font-weight:500;color:var(--muted)}
.hook-tool input,.hook-tool select{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fffdf8;color:var(--ink)}
.hook-tool .button{justify-self:start;border:0;cursor:pointer}
.hook-results{margin:24px 0 0;padding:0;list-style:none;max-width:760px;display:grid;gap:10px}
.hook-results li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#fffdf8}
.hook-results li span{font-weight:750;font-size:17px;letter-spacing:-.02em}
.hook-results li small{color:var(--muted);font-size:12px}
.hook-results .button{border:0;cursor:pointer}
.guide-cta{margin-top:90px}
@media (max-width:900px){.guide-steps,.guide-sample{grid-template-columns:1fr}.clip-frame{margin:0 auto}.hook-results li{grid-template-columns:1fr auto}.hook-results li small{display:none}}
@media (max-width:600px){.guide-hero{padding-top:45px}.guide-hero h1{font-size:42px}.guide-section{padding-top:65px}.guide-section .section-intro h2{font-size:34px}.compare-table th,.compare-table td{padding:13px 14px}}