:root{--bg:#120b14;--panel:#1d1420;--panel2:#261a29;--text:#fff5fb;--muted:#b9a7b8;--pink:#ff5da8;--pink2:#ff8bc2;--line:#493449;--green:#a8f0cf}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow-x:hidden}.ambient{position:absolute;filter:blur(90px);opacity:.22;pointer-events:none;border-radius:50%;z-index:-1}.ambient-one{width:420px;height:420px;background:#ec398f;top:50px;left:-180px}.ambient-two{width:480px;height:480px;background:#7e39b7;top:580px;right:-220px}.topbar{height:78px;max-width:1160px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{font:700 25px 'Space Grotesk';color:var(--text);text-decoration:none;letter-spacing:-1.5px}.brand span:last-child{color:var(--pink)}.brand-mark{display:inline-grid;place-items:center;color:var(--pink);border:1px solid #ff5da866;border-radius:11px;width:29px;height:29px;margin-right:5px}.topbar nav{display:flex;gap:32px}.topbar nav a{color:var(--muted);font-size:13px;text-decoration:none}.icon-btn{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer}main{max-width:1050px;margin:auto;padding:0 24px}.hero{min-height:435px;padding:92px 10px 70px;position:relative}.eyebrow,.step-label{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--pink)}.pulse{display:inline-block;width:7px;height:7px;background:var(--pink);border-radius:50%;margin-right:9px;box-shadow:0 0 12px var(--pink)}h1,h2,h3,p{margin-top:0}h1{font:700 clamp(54px,8vw,88px)/.98 'Space Grotesk';letter-spacing:-5px;margin:25px 0 20px}h1 span,.how h2 span{color:var(--pink)}.hero-copy{max-width:430px;color:var(--muted);font-size:15px;line-height:1.7}.scroll-link{display:inline-flex;gap:24px;align-items:center;margin-top:24px;color:var(--text);font-size:10px;font-weight:800;letter-spacing:1.5px;text-decoration:none;border-bottom:1px solid var(--pink);padding-bottom:9px}.scroll-link span{color:var(--pink);font-size:17px}.hero-sticker{position:absolute;color:#ffc2dd;border:1px solid #ff5da855;border-radius:30px;padding:11px 17px;font-size:9px;letter-spacing:1.3px;transform:rotate(8deg)}.sticker-one{right:8%;top:120px}.sticker-two{right:3%;bottom:82px;transform:rotate(-7deg)}.panel{background:linear-gradient(145deg,var(--panel),#1a111e);border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:0 25px 90px #0002}.section-heading,.results-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.section-heading h2,.results-top h2,.how h2{font:600 27px 'Space Grotesk';letter-spacing:-1px;margin:9px 0}.step-count{font-size:9px;letter-spacing:1.5px;color:var(--muted);border:1px solid var(--line);padding:8px 11px;border-radius:20px}.target-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:25px 0 35px}.target-card{position:relative;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:15px;padding:17px;color:var(--text);cursor:pointer;transition:.2s}.target-card:hover,.target-card.selected{border-color:var(--pink);background:#ff5da814;transform:translateY(-2px)}.target-emoji{display:block;font-size:25px;margin-bottom:11px}.target-card b{display:block;font-size:15px}.target-card small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.check{position:absolute;right:13px;top:13px;color:var(--pink);opacity:0}.selected .check{opacity:1}.mood-heading{margin-bottom:17px}.subcopy{font-size:12px;color:var(--muted);margin:6px 0 0}.mood-grid{display:flex;flex-wrap:wrap;gap:9px}.mood-chip{display:flex;align-items:center;gap:8px;padding:11px 15px;background:var(--panel2);border:1px solid var(--line);border-radius:30px;color:var(--text);font:600 12px 'DM Sans';cursor:pointer}.mood-chip.active{border-color:var(--pink);background:#ff5da820;color:var(--pink2)}.nsfw-row{display:flex;align-items:center;gap:12px;margin-top:24px;color:var(--text);font-size:12px;cursor:pointer}.nsfw-row input{position:absolute;opacity:0}.nsfw-row small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.switch{width:34px;height:19px;background:#59475a;border-radius:20px;position:relative}.switch:after{content:'';position:absolute;width:13px;height:13px;background:white;border-radius:50%;top:3px;left:3px;transition:.2s}.nsfw-row input:checked+.switch{background:var(--pink)}.nsfw-row input:checked+.switch:after{left:18px}.builder-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);margin-top:25px;padding-top:22px}.builder-actions>span{font-size:11px;color:var(--muted)}.primary-btn{background:var(--pink);color:#240d1b;border:0;border-radius:10px;padding:14px 19px;font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 7px 25px #ff5da833}.primary-btn:hover{background:#ff86bd}.primary-btn span{margin-left:12px}.results-section{padding:85px 0 65px}.pink-dot{color:var(--pink)}.secondary-btn,.load-btn{background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px 15px;font-size:11px;font-weight:700;cursor:pointer}.secondary-btn:hover,.load-btn:hover{border-color:var(--pink);color:var(--pink)}.filter-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:23px 0 12px;color:var(--muted);font-size:11px}.filter-row select{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:8px;border-radius:8px;font:inherit}.line-list{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:17px 0}.line-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:19px;display:flex;flex-direction:column;min-height:190px}.line-meta{display:flex;justify-content:space-between;align-items:center}.tag{font-size:9px;color:var(--pink2);background:#ff5da817;border-radius:20px;padding:6px 9px}.votes{font-size:10px;color:var(--muted)}.line-text{font:500 16px/1.5 'Space Grotesk';margin:18px 0 20px;flex:1}.line-actions{display:flex;align-items:center;gap:8px}.copy-btn{background:var(--pink);color:#260e1d;border:0;border-radius:8px;padding:9px 13px;font-size:10px;font-weight:800;cursor:pointer}.share-btn,.vote-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:8px 10px;font-size:10px;cursor:pointer}.vote-btn{margin-left:auto}.vote-btn:hover,.share-btn:hover{border-color:var(--pink)}.load-btn{display:block;margin:25px auto 0;padding:13px 25px}.how{margin-bottom:70px}.how h2{font-size:37px;line-height:1.15;margin:14px 0 30px}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.how-grid>div{border-top:1px solid var(--line);padding-top:16px}.how-grid b{color:var(--pink);font-size:11px}.how-grid h3{font:600 16px 'Space Grotesk';margin:13px 0 8px}.how-grid p{font-size:11px;color:var(--muted);line-height:1.7;margin:0}footer{max-width:1050px;margin:auto;border-top:1px solid var(--line);padding:30px 24px 45px;text-align:center}footer p{font-size:12px;color:var(--muted);margin:13px 0 7px}footer small{font-size:9px;color:var(--muted)}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#fff0f8;color:#321326;padding:12px 18px;border-radius:9px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:#08040bcc;display:grid;place-items:center;padding:20px;z-index:20}.modal-backdrop[hidden]{display:none}.rating-modal{position:relative;width:min(390px,100%);background:#211522;border:1px solid #65405b;border-radius:22px;padding:34px;text-align:center}.close-modal{position:absolute;right:16px;top:12px;background:none;border:0;color:#c7b3c4;font-size:25px;cursor:pointer}.modal-heart{font-size:32px;color:var(--pink);margin-bottom:15px}.rating-modal h2{font:600 28px 'Space Grotesk';margin:10px}.rating-modal p{color:#b9a7b8;font-size:12px}.rating-options{display:flex;gap:9px;margin:22px 0}.rating-options button{flex:1;background:#38263a;border:1px solid #65405b;border-radius:12px;padding:14px 4px;color:white;font-size:23px;cursor:pointer}.rating-options button span{display:block;font-size:10px;margin-top:6px}.skip-rating{background:none;border:0;color:#b9a7b8;text-decoration:underline;font-size:11px;cursor:pointer}
@media(max-width:650px){.topbar{height:65px;padding:0 18px}.topbar nav{gap:13px}.topbar nav a{font-size:10px}.hero{padding:72px 3px 65px;min-height:400px}h1{letter-spacing:-3px}.hero-sticker{display:none}main{padding:0 16px}.panel{padding:22px 17px}.section-heading h2,.results-top h2{font-size:23px}.step-count{font-size:8px;padding:7px}.target-grid{gap:8px}.target-card{padding:13px 10px}.target-card small{font-size:9px}.target-emoji{font-size:22px}.mood-chip{padding:10px 12px}.builder-actions{align-items:stretch;flex-direction:column}.primary-btn{width:100%}.results-section{padding:65px 0}.results-top{align-items:flex-end}.secondary-btn{white-space:nowrap;padding:10px}.line-list{grid-template-columns:1fr}.how-grid{grid-template-columns:1fr;gap:18px}.how h2{font-size:32px}.filter-row{padding-top:18px}}

.top-pill{font-size:9px;letter-spacing:1.5px;color:var(--pink2);border:1px solid #ff5da855;border-radius:20px;padding:9px 13px}
.results-page{max-width:1050px;margin:auto;padding:45px 24px 70px}.back-link{color:var(--muted);text-decoration:none;font-size:10px;letter-spacing:1.3px;font-weight:700}
.results-hero{padding:52px 0 38px}.results-hero h1{font-size:clamp(48px,7vw,72px)}
.results-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px}
.results-toolbar h2{font:600 28px 'Space Grotesk';margin:9px 0}.pink-dot{color:var(--pink)}
.secondary-btn,.load-btn{display:inline-block;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px 15px;font-size:11px;font-weight:700;text-decoration:none;cursor:pointer}
.secondary-btn:hover,.load-btn:hover{border-color:var(--pink);color:var(--pink)}
.results-page .line-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0}
.line-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:21px;display:flex;flex-direction:column;min-height:190px}
.line-meta{display:flex;justify-content:space-between;align-items:center}.tag{font-size:9px;color:var(--pink2);background:#ff5da817;border-radius:20px;padding:6px 9px}
.target-label{font-size:10px;color:var(--muted)}.line-text{font:500 17px/1.55 'Space Grotesk';margin:20px 0;flex:1}
.line-actions{display:flex;align-items:center;gap:9px}.copy-btn{background:var(--pink);color:#260e1d;border:0;border-radius:8px;padding:10px 14px;font-size:10px;font-weight:800;cursor:pointer}
.share-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:9px 12px;font-size:10px;cursor:pointer}
.load-btn{display:block;margin:28px auto 0;padding:14px 27px}.end-note{text-align:center;color:var(--muted);font-size:12px;margin-top:25px}
@media(max-width:650px){.top-pill{display:none}.results-page{padding:35px 16px 55px}.results-toolbar{align-items:flex-start;flex-direction:column}.results-page .line-list{grid-template-columns:1fr}.results-hero{padding:42px 0 30px}}

.topbar nav a{margin-left:22px;color:var(--muted);font-size:13px;text-decoration:none;transition:color .2s}
.topbar nav a:hover,.topbar nav a.nav-active{color:var(--pink)}
.info-page{max-width:1050px;margin:auto;padding:45px 24px 70px}
.info-page .results-hero{padding:55px 0 38px}
.info-page .how{margin:0 auto 35px}
.info-cta{max-width:1050px;margin:0 auto 35px;padding:30px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line)}
.info-cta h2{font:600 29px/1.2 'Space Grotesk';margin:10px 0}
.info-cta h2 span{color:var(--pink)}
.cta-link{display:inline-block;text-decoration:none;white-space:nowrap}
.explore-cta{margin-top:48px;padding-top:35px}
@media(max-width:650px){.topbar nav a{margin-left:12px;font-size:11px}.info-page{padding:35px 16px 55px}.info-cta{align-items:flex-start;flex-direction:column}.info-cta h2{font-size:25px}.cta-link{width:100%;text-align:center}}

/* Ensure pagination controls respect the HTML hidden attribute. */
button[hidden], .load-btn[hidden] { display: none !important; }

/* Pickup Line brand and expanded site navigation */
.brand{display:inline-flex;align-items:center;white-space:nowrap;letter-spacing:-1.35px}
.brand-main{color:var(--text)!important}
.brand-accent{color:var(--pink)!important}
.topbar{gap:18px}
.topbar .site-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(9px,1.35vw,20px);flex-wrap:wrap}
.topbar .site-nav a{margin:0;color:var(--muted);font-size:clamp(10px,.92vw,12px);white-space:nowrap;text-decoration:none;transition:color .2s}
.topbar .site-nav a:hover,.topbar .site-nav a.nav-active{color:var(--pink)}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:18px}
.footer-links a{color:var(--muted);font-size:12px;text-decoration:none}
.footer-links a:hover{color:var(--pink)}
.legal-page{padding-bottom:80px}
.legal-content{max-width:850px;margin:0 auto 30px}
.legal-content section{padding:22px 0;border-top:1px solid var(--line)}
.legal-content h2{font:600 22px 'Space Grotesk';margin:0 0 12px}
.legal-content p{color:var(--muted);font-size:14px;line-height:1.8;margin:0}
.legal-content .legal-updated{font-size:12px;color:var(--pink2);margin:0 0 12px}
@media(max-width:900px){.topbar{height:auto;min-height:78px;padding-top:14px;padding-bottom:14px;align-items:flex-start;flex-wrap:wrap}.topbar .site-nav{order:3;width:100%;justify-content:flex-start;gap:10px 18px}.top-pill{margin-left:auto}}
@media(max-width:520px){.brand{font-size:22px}.topbar .site-nav{gap:9px 14px}.topbar .site-nav a{font-size:10px}.legal-content h2{font-size:19px}}

/* Search-friendly, readable homepage guide */
.seo-guide{margin:42px auto 70px;padding:34px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#1d1420,#17101b)}
.seo-guide h2{font:700 clamp(25px,3vw,34px) 'Space Grotesk';letter-spacing:-1px;margin:12px 0}
.seo-guide>p{max-width:850px;color:var(--muted);font-size:14px;line-height:1.8}
.seo-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}
.seo-topic-grid article{padding:17px;border:1px solid var(--line);border-radius:15px;background:#ffffff05}
.seo-topic-grid h3{font:600 16px 'Space Grotesk';margin:0 0 8px;color:var(--text)}
.seo-topic-grid p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.seo-guide .seo-note{font-size:12px}
@media(max-width:760px){.seo-guide{padding:22px}.seo-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.seo-topic-grid{grid-template-columns:1fr}}

/* Homepage FAQ section */
.faq-section{max-width:1050px;margin:0 auto 70px;padding:34px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#1d1420,#17101b)}
.faq-section h2{font:700 clamp(25px,3vw,34px) 'Space Grotesk';letter-spacing:-1px;margin:12px 0}
.faq-intro{max-width:780px;color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 22px}
.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#ffffff05;overflow:hidden}
.faq-item summary{position:relative;cursor:pointer;list-style:none;padding:17px 48px 17px 18px;color:var(--text);font:600 15px 'Space Grotesk'}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:'+';position:absolute;right:18px;top:12px;color:var(--pink);font-size:23px;font-weight:400}
.faq-item[open] summary:after{content:'−'}
.faq-item p{margin:0;padding:0 18px 18px;color:var(--muted);font-size:13px;line-height:1.8}
@media(max-width:600px){.faq-section{padding:22px;margin-left:16px;margin-right:16px}.faq-item summary{font-size:14px}}


/* Mobile and tablet refinement */
img, svg, video, canvas { max-width: 100%; height: auto; }
button, a, select, input { touch-action: manipulation; }
button, select { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { min-width: 320px; }
main, .results-page, .info-page, footer { width: 100%; }
.topbar { width: 100%; }
.panel, .seo-guide, .faq-section, .rating-modal { min-width: 0; }
.line-text, .legal-content p, .seo-topic-grid p, .faq-item p { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .topbar { padding-left: 18px; padding-right: 18px; }
  .topbar .site-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .hero { padding-top: 58px; }
  .target-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-page, .results-page { padding-left: 18px; padding-right: 18px; }
  .info-cta { padding-left: 18px; padding-right: 18px; }
  .faq-section { margin-left: 18px; margin-right: 18px; }
}

@media (max-width: 600px) {
  .topbar {
    min-height: 0;
    padding: 13px 16px 12px;
    align-items: center;
    gap: 12px;
  }
  .brand { font-size: 22px; }
  .topbar .site-nav {
    width: 100%;
    order: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px 8px;
    justify-content: stretch;
  }
  .topbar .site-nav a {
    display: block;
    margin: 0;
    padding: 7px 2px;
    text-align: center;
    font-size: 10px;
    white-space: normal;
    line-height: 1.25;
  }
  main { padding-left: 14px; padding-right: 14px; }
  .hero { min-height: auto; padding: 52px 2px 46px; }
  h1 { font-size: clamp(42px, 12vw, 64px); line-height: 1.02; letter-spacing: -2.8px; }
  .hero-copy { max-width: 100%; font-size: 14px; }
  .panel { padding: 20px 15px; border-radius: 17px; }
  .section-heading { gap: 10px; }
  .section-heading h2, .results-top h2 { font-size: 21px; }
  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .target-card { min-width: 0; padding: 13px 11px; }
  .target-card b { font-size: 13px; }
  .target-card small { line-height: 1.4; }
  .mood-grid { gap: 8px; }
  .mood-chip { min-height: 40px; padding: 9px 12px; font-size: 11px; }
  .builder-actions { gap: 12px; }
  .builder-actions > span { line-height: 1.5; }
  .primary-btn, .secondary-btn, .load-btn { min-height: 44px; }
  .results-section { padding: 52px 0 45px; }
  .results-top { align-items: flex-start; flex-direction: column; }
  .filter-row { gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .filter-row select { max-width: 100%; }
  .line-list, .results-page .line-list { grid-template-columns: minmax(0, 1fr); }
  .line-card { min-height: 0; padding: 17px; }
  .line-actions { flex-wrap: wrap; }
  .how { margin-bottom: 48px; }
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .how h2 { font-size: 30px; }
  .results-page, .info-page { padding: 28px 14px 48px; }
  .results-hero { padding: 34px 0 25px; }
  .results-hero h1 { font-size: clamp(39px, 11vw, 58px); }
  .results-toolbar { align-items: stretch; flex-direction: column; gap: 14px; }
  .results-toolbar h2 { font-size: 23px; }
  .results-toolbar .secondary-btn { align-self: flex-start; }
  .info-cta { margin-left: 14px; margin-right: 14px; padding: 25px 0; }
  .info-cta h2 { font-size: 23px; }
  .legal-page { padding-bottom: 48px; }
  .legal-content section { padding: 18px 0; }
  .legal-content p { font-size: 13px; }
  .seo-guide { margin: 30px 0 48px; padding: 20px 16px; border-radius: 17px; }
  .seo-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-section { margin: 0 14px 48px; padding: 20px 15px; border-radius: 17px; }
  .faq-item summary { padding: 15px 42px 15px 14px; line-height: 1.45; }
  .faq-item p { padding: 0 14px 15px; }
  footer { padding: 25px 16px 35px; }
  .footer-links { justify-content: center; gap: 12px 17px; }
  .modal-backdrop { padding: 12px; }
  .rating-modal { padding: 30px 18px 22px; }
  .rating-options { gap: 6px; }
  .rating-options button { padding: 12px 2px; }
  .toast { width: calc(100% - 32px); text-align: center; bottom: 16px; }
}

@media (max-width: 360px) {
  .topbar .site-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand { font-size: 20px; }
  .step-count { max-width: 100px; text-align: center; }
  .target-card { padding: 12px 9px; }
  .line-actions { gap: 6px; }
  .copy-btn, .share-btn, .vote-btn { padding: 9px 10px; }
}


/* Mobile-only navigation and overflow corrections.
   Desktop navigation and desktop layout remain unchanged. */
.mobile-menu-toggle { display: none; }

@media (max-width: 650px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .topbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 13px 16px;
  }
  .topbar .brand { flex: 0 1 auto; min-width: 0; }
  .mobile-menu-toggle {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .2s ease, opacity .2s ease;
  }
  .topbar.mobile-nav-open .mobile-menu-toggle span:first-child {
    transform: translateY(7px) rotate(45deg);
  }
  .topbar.mobile-nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
  .topbar.mobile-nav-open .mobile-menu-toggle span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }
  .topbar .top-pill { display: none; }
  .topbar .site-nav {
    display: none;
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 9px 0 2px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .topbar.mobile-nav-open .site-nav { display: flex; }
  .topbar .site-nav a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px 8px;
    border-bottom: 1px solid #ffffff0d;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
  }
  .topbar .site-nav a:last-child { border-bottom: 0; }
  .topbar .site-nav a:hover,
  .topbar .site-nav a.nav-active { color: var(--pink); }

  main, .results-page, .info-page, footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  main { padding-left: 16px; padding-right: 16px; }
  .hero, .panel, .results-section, .how, .seo-guide,
  .faq-section, .legal-content, .info-cta {
    min-width: 0;
    max-width: 100%;
  }
  .hero { padding-left: 0; padding-right: 0; }
  h1 {
    max-width: 100%;
    font-size: clamp(39px, 11.2vw, 56px);
    letter-spacing: -2.4px;
    overflow-wrap: anywhere;
  }
  .hero-copy { max-width: 100%; }
  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-card, .line-card, .seo-topic-grid article { min-width: 0; }
  .line-list, .results-page .line-list { grid-template-columns: minmax(0, 1fr); }
  .line-text, .legal-content p, .faq-item p { overflow-wrap: anywhere; }
  .results-toolbar, .results-top, .section-heading {
    min-width: 0;
    flex-wrap: wrap;
  }
  .filter-row { min-width: 0; }
  .filter-row select { max-width: 100%; }
  .faq-section { margin-left: 0; margin-right: 0; }
  .info-cta { margin-left: 16px; margin-right: 16px; }
  .footer-links { justify-content: center; }
}

@media (max-width: 380px) {
  .topbar { padding-left: 13px; padding-right: 13px; }
  main { padding-left: 13px; padding-right: 13px; }
  .brand { font-size: 20px; }
  h1 { font-size: clamp(36px, 10.8vw, 44px); letter-spacing: -2px; }
  .panel { padding-left: 13px; padding-right: 13px; }
  .target-card { padding: 12px 9px; }
}


/* Final responsive safeguards: prevent child elements from forcing a wide page. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
body { min-width: 320px; }
main, header, footer, section, article, nav, .panel, .seo-guide, .faq-section,
.results-page, .info-page, .legal-content, .builder, .results-section {
  min-width: 0;
}
p, h1, h2, h3, small, b, span, a, label, li {
  overflow-wrap: anywhere;
}
button, input, select, textarea { font: inherit; }
button, .primary-btn, .secondary-btn, .load-btn { max-width: 100%; white-space: normal; }
img, video, iframe, svg { max-width: 100%; }
@media (max-width: 650px) {
  .topbar { max-width: 100%; }
  .topbar .brand { max-width: calc(100% - 56px); }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.4px; line-height: 1.6; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 52px); letter-spacing: -2px; line-height: 1.04; }
  .section-heading { display: flex; align-items: flex-start; gap: 8px; }
  .section-heading > div { flex: 1 1 180px; min-width: 0; }
  .section-heading h2 { overflow-wrap: anywhere; }
  .step-count { flex: 0 1 auto; max-width: 95px; white-space: normal; line-height: 1.4; }
  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-card { overflow-wrap: anywhere; }
  .mood-grid { min-width: 0; }
  .mood-chip { max-width: 100%; }
  .builder-actions { min-width: 0; }
  .builder-actions > span { min-width: 0; }
  .primary-btn { width: 100%; min-width: 0; }
  .seo-guide, .faq-section { width: 100%; }
  .seo-topic-grid { grid-template-columns: minmax(0, 1fr); }
  .seo-topic-grid article { min-width: 0; }
  .results-toolbar > *, .results-top > * { min-width: 0; max-width: 100%; }
  .line-actions > * { min-width: 0; }
  .footer-links a { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .topbar .brand { font-size: 19px; }
  .hero h1 { font-size: 36px; }
  .panel { padding-left: 12px; padding-right: 12px; }
  .section-heading { flex-wrap: wrap; }
  .step-count { max-width: none; }
  .mood-chip { padding: 9px 10px; }
}


/* Mobile viewport repair v2: constrain every layout layer and its children. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
@media (max-width: 650px) {
  *, *::before, *::after { min-width: 0; }
  body, #app, main, header, footer, section, article, nav, form,
  .topbar, .hero, .panel, .builder, .seo-guide, .faq-section,
  .results-page, .info-page, .legal-content, .results-section,
  .how, .info-cta {
    width: 100%;
    max-width: 100%;
  }
  .topbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    height: auto;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
  }
  .topbar .brand {
    flex: 1 1 auto;
    width: auto;
    max-width: calc(100% - 52px);
    overflow-wrap: normal;
    white-space: nowrap;
    font-size: clamp(19px, 5.2vw, 23px);
    letter-spacing: -1.2px;
  }
  .topbar .mobile-menu-toggle {
    flex: 0 0 40px;
    width: 40px;
    max-width: 40px;
    height: 40px;
    margin-left: auto;
  }
  .topbar .site-nav {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  main {
    padding-left: 14px;
    padding-right: 14px;
  }
  .hero {
    padding: 54px 2px 42px;
    min-height: 0;
  }
  .hero h1, h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(34px, 9.5vw, 48px);
    line-height: 1.05;
    letter-spacing: -1.8px;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .hero-copy, .seo-guide > p, .seo-topic-grid p,
  .faq-intro, .faq-item p, .legal-content p {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .panel, .seo-guide, .faq-section {
    padding: 18px 14px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 18px;
  }
  .section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .section-heading > div { flex: 1 1 100%; width: 100%; }
  .section-heading h2, .results-top h2, .how h2 {
    max-width: 100%;
    font-size: clamp(21px, 6vw, 26px);
    line-height: 1.25;
    overflow-wrap: break-word;
  }
  .step-count { max-width: 100%; }
  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-card { width: 100%; padding: 12px 10px; }
  .target-card small { overflow-wrap: anywhere; }
  .mood-grid { display: flex; flex-wrap: wrap; width: 100%; }
  .mood-chip { flex: 0 1 auto; max-width: 100%; white-space: normal; }
  .nsfw-row { width: 100%; align-items: flex-start; }
  .nsfw-row > span:last-child { flex: 1 1 auto; }
  .builder-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .builder-actions > span { width: 100%; }
  .primary-btn, .secondary-btn, .load-btn {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .seo-topic-grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .seo-topic-grid article { width: 100%; max-width: 100%; }
  .line-card, .line-actions, .results-toolbar, .results-top,
  .filter-row, .footer-links {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
  .line-actions { gap: 7px; }
  .line-actions > * { max-width: 100%; }
  .info-cta { margin-left: 0; margin-right: 0; padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 380px) {
  main { padding-left: 12px; padding-right: 12px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .panel, .seo-guide, .faq-section { padding-left: 12px; padding-right: 12px; }
  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .target-card { padding: 11px 8px; }
  .mood-chip { padding: 9px 10px; font-size: 11px; }
}


/* Responsive refinement v3: touch-friendly controls, tablet layouts and safe-area spacing. */
:where(a, button, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--pink2); outline-offset: 3px; }
button, .primary-btn, .secondary-btn, .load-btn, .copy-btn, .share-btn, .vote-btn { touch-action: manipulation; }
.topbar { position: relative; z-index: 5; }
.site-nav a, .footer-links a { line-height: 1.5; }
.line-card, .target-card, .panel, .info-cta, .line-text { overflow-wrap: anywhere; }
@media (min-width: 651px) and (max-width: 900px) {
  .topbar { padding-left: 22px; padding-right: 22px; }
  .topbar nav { gap: clamp(10px, 2vw, 22px); }
  .topbar nav a { font-size: 12px; }
  main, .results-page { padding-left: 22px; padding-right: 22px; }
  .panel { padding: 28px; }
  .results-toolbar { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 650px) {
  .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
  .mobile-menu-toggle { min-width: 44px; min-height: 44px; }
  .topbar .site-nav a { min-height: 44px; display: flex; align-items: center; }
  .hero { padding-top: clamp(42px, 12vw, 58px); }
  .hero h1 { max-width: 12ch; }
  .target-card { min-height: 112px; }
  .mood-chip { min-height: 40px; }
  .nsfw-row { min-height: 44px; }
  .builder-actions { gap: 12px; }
  .primary-btn, .secondary-btn, .load-btn { min-height: 44px; }
  .results-toolbar, .results-top { align-items: stretch; }
  .results-toolbar > *, .results-top > * { flex: 1 1 100%; }
  .filter-row { align-items: flex-start; gap: 10px; }
  .filter-row select { min-height: 40px; }
  .line-card { padding: 16px; }
  .line-actions { display: flex; flex-wrap: wrap; }
  .line-actions button { min-height: 40px; }
  .footer-links { gap: 10px 16px; }
  footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .toast { width: min(calc(100% - 28px), 420px); }
}
@media (max-width: 380px) {
  .eyebrow, .step-label { letter-spacing: 1.2px; }
  .section-heading h2 { font-size: 21px; }
  .target-card { min-height: 106px; }
  .target-card small { font-size: 10px; line-height: 1.4; }
  .line-actions { gap: 6px; }
  .copy-btn, .share-btn, .vote-btn { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Final mobile viewport containment: prevent any child from widening the page. */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
}
body { position: relative; }
@media (max-width: 650px) {
  .topbar {
    width: 100%;
    max-width: 100%;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    display: flex;
    flex-wrap: wrap;
  }
  .topbar .brand { flex: 0 1 auto; max-width: calc(100% - 56px); }
  .topbar .mobile-menu-toggle { flex: 0 0 44px; margin-left: auto; }
  main, .results-page, .info-page, footer {
    width: 100%; max-width: 100%; min-width: 0;
  }
  main { padding-left: 14px; padding-right: 14px; }
  .hero, .panel, .results-section, .how, .seo-guide, .faq-section,
  .legal-content, .info-cta, .line-list, .target-grid, .mood-grid {
    width: 100%; max-width: 100%; min-width: 0;
  }
  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-card, .line-card, .line-actions, .section-heading,
  .results-top, .results-toolbar, .filter-row { min-width: 0; }
  .target-card { overflow: hidden; }
  .target-card small, .line-text, .hero-copy { overflow-wrap: anywhere; }
  .line-list, .results-page .line-list { grid-template-columns: minmax(0, 1fr); }
  .filter-row { flex-wrap: wrap; }
  .filter-row select { min-width: 0; width: auto; max-width: 100%; }
  .ambient { max-width: 100vw; pointer-events: none; }
  .info-cta { margin-left: 0; margin-right: 0; }
}

/* Product polish: motion, daily prompt and searchable/saved collection tools. */
@keyframes card-arrive{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes soft-glow{0%,100%{box-shadow:0 0 0 #ff5da800}50%{box-shadow:0 0 28px #ff5da822}}
.line-card{animation:card-arrive .42s ease both;transition:border-color .2s,transform .2s,box-shadow .2s}
.line-card:hover{transform:translateY(-3px);border-color:#ff5da866;box-shadow:0 14px 36px #0003}
.target-card,.mood-chip,.copy-btn,.share-btn,.vote-btn,.primary-btn,.secondary-btn,.load-btn{transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
button:active{transform:scale(.98)}
.collection-tools{display:flex;gap:10px;align-items:center;margin:20px 0 8px;min-width:0}
.collection-search{display:flex;align-items:center;gap:9px;flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:0 13px;color:var(--pink);font-size:20px}
.collection-search input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:500 13px 'DM Sans';padding:13px 0}
.collection-search:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px #ff5da81c}
.collection-tools .secondary-btn{white-space:nowrap;min-height:44px}
.daily-pick{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 28px;overflow:hidden;background:linear-gradient(120deg,#291526,#1a1020 72%);animation:soft-glow 6s ease-in-out infinite}
.daily-pick h2{font:600 clamp(21px,3vw,28px) 'Space Grotesk';margin:9px 0 12px;letter-spacing:-.8px}
.daily-line{font:500 17px/1.55 'Space Grotesk';max-width:680px;margin:0 0 16px;color:var(--text)}
.daily-actions{display:flex;gap:9px;flex-wrap:wrap}
.daily-spark{font-size:72px;color:#ff5da855;line-height:1;flex:none}
.daily-pop{animation:card-arrive .32s ease both}
.vote-btn[aria-pressed="true"]{color:var(--pink2);border-color:#ff5da877;background:#ff5da817}
@media(max-width:650px){.collection-tools{align-items:stretch;flex-direction:column}.collection-tools .secondary-btn{width:100%}.daily-pick{padding:19px 15px}.daily-spark{display:none}.daily-line{font-size:15px}.daily-actions>*{min-height:42px}}
@media(prefers-reduced-motion:reduce){.line-card,.daily-pick{animation:none!important}.line-card:hover{transform:none}}