/* ═══════════════════════════════════════════════════════════════
   Persona Marketing Section Styles
   Used by: features, pricing, about, contact, privacy, terms
   (index.html has its own complete standalone CSS)
   Depends on: persona-tokens.css, persona-shared.css
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#08061a;color:var(--bg-tint);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

.page-hero{padding:90px 40px 80px;text-align:center;position:relative;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.blob-p{width:560px;height:560px;background:radial-gradient(circle,rgba(var(--purple-rgb),.42) 0%,transparent 70%);top:-200px;left:-150px;opacity:.6}
.blob-o{width:440px;height:440px;background:radial-gradient(circle,rgba(var(--orange-rgb),.26) 0%,transparent 70%);bottom:-100px;right:-100px;opacity:.5}
.hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.eyebrow{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text);padding:5px 13px;border-radius:999px;border:1px solid rgba(var(--orange-rgb),.25);background:rgba(var(--orange-rgb),.08);margin-bottom:20px}
.page-h1{font-family:var(--font-display);font-size:clamp(28px,4vw,50px);font-weight:800;line-height:1.1;letter-spacing:-1px;margin-bottom:18px}
.grad{background:var(--grad-brand-soft);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-sub{font-size:17px;color:var(--text-muted);line-height:1.7;margin-bottom:32px}
.sec{padding:92px 40px}
.sec-alt{background:rgba(var(--white-rgb),.02);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.wrap{max-width:1100px;margin:0 auto}
.wrap-narrow{max-width:760px;margin:0 auto}
.sec-head{margin-bottom:52px}
.sec-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.sec-h2{font-family:var(--font-display);font-size:clamp(20px,2.4vw,30px);font-weight:700;line-height:1.25;letter-spacing:-.3px;margin-bottom:12px}
.sec-sub{font-size:15px;color:var(--text-muted);line-height:1.7;max-width:560px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:28px}
.tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;margin-bottom:10px}
.tag-p{background:rgba(var(--purple-rgb),.18);color:var(--purple-bright-text)}
.tag-t{background:rgba(var(--teal-rgb),.12);color:var(--teal-text)}
.tag-o{background:rgba(var(--orange-rgb),.12);color:var(--orange-text)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.vis{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 0;cursor:pointer;gap:16px;font-size:15px;font-weight:600;line-height:1.4}
.faq-q svg{width:15px;height:15px;color:var(--text-faint);flex-shrink:0;transition:transform .22s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{font-size:14px;color:var(--text-muted);line-height:1.75;padding-bottom:18px;display:none}
.faq-item.open .prose h2{font-family:var(--font-display);font-size:20px;font-weight:700;margin:36px 0 12px;letter-spacing:-.2px}
.prose h3{font-size:16px;font-weight:700;margin:26px 0 8px}
.prose p{font-size:15px;color:var(--text-muted);line-height:1.8;margin-bottom:16px}
.prose ul,.prose ol{padding-inline-start:20px;margin-bottom:16px}
.prose li{font-size:15px;color:var(--text-muted);line-height:1.8;margin-bottom:6px}
/* .prose a — see persona-styles.css: it IS the .link component now (states included) */
@media(max-width:960px){
    }
@media(max-width:700px){
.page-hero{padding:60px 20px 56px}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:60px}
.feat-card{border-radius:var(--radius-md);border:1px solid var(--border);padding:26px;background:var(--bg-card);transition:border-color .2s,transform .2s}
.feat-card:hover{border-color:rgba(var(--purple-rgb),.35);transform:translateY(-2px)}
.feat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat-icon svg{width:21px;height:21px}
.feat-card h3{font-size:15px;font-weight:700;margin-bottom:8px}
.feat-card p{font-size:13.5px;color:var(--text-muted);line-height:1.65}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-bottom:80px}
.feat-row:last-child{margin-bottom:0}
/* Reorder with `order`, NOT `direction`. Using direction:rtl to swap the columns forced
   direction:ltr back onto the children — which hardcoded left-to-right text into the
   middle sections, so they never flipped in Hebrew. `order` is direction-agnostic. */
.feat-row.rev > *:first-child{order:2}
.feat-row.rev > *:last-child{order:1}
.feat-row h2{font-family:var(--font-display);font-size:clamp(18px,2.2vw,26px);font-weight:700;line-height:1.25;margin-bottom:14px;letter-spacing:-.2px}
.feat-row p{font-size:15px;color:var(--text-muted);line-height:1.75;margin-bottom:18px}
.feat-list{display:flex;flex-direction:column;gap:9px}
.feat-li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text-muted)}
.feat-ck{width:18px;height:18px;border-radius:50%;background:rgba(var(--teal-rgb),.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.feat-ck svg{width:9px;height:9px;color:var(--teal)}
.feat-visual{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-card);min-height:280px;display:flex;align-items:center;justify-content:center;padding:24px}
.phone-trio{display:flex;gap:12px;align-items:flex-end;justify-content:center}
.ph{width:90px;height:160px;border-radius:16px;border:1.5px solid rgba(var(--white-rgb),.12);background:#111;overflow:hidden;position:relative;flex-shrink:0}
.ph.big{width:110px;height:200px;border-color:rgba(var(--white-rgb),.2)}
.ph-bg{position:absolute;inset:0;background-size:cover;background-position:center top}
.ph-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,20,.9),transparent)}
.ph-cap{position:absolute;bottom:0;inset-inline:0;padding:6px 8px;font-size:8px;color:#fff;line-height:1.4;background:rgba(var(--white-rgb),.1);backdrop-filter:blur(4px)}
.tpl-demo{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.td-card{border-radius:var(--radius-sm);padding:10px 12px;background:rgba(var(--white-rgb),.04);border:1px solid var(--border-soft)}
.td-cat{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--purple-bright-text);margin-bottom:3px}
.td-name{font-size:11px;font-weight:600}
.td-meta{font-size:9.5px;color:var(--text-faint);margin-top:2px}
.flow-steps{display:flex;flex-direction:column;gap:10px;width:100%}
.flow-step{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;background:rgba(var(--white-rgb),.03);border:1px solid var(--border-soft)}
.flow-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.flow-label{font-size:11.5px;font-weight:600;flex:1}
.flow-time{font-size:10.5px;font-family:var(--font-mono);color:var(--text-faint)}
.format-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.format-pill{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;font-family:var(--font-mono)}
.compare-table{width:100%;border-collapse:collapse;margin-top:40px}
.compare-table th{padding:14px 18px;text-align:start;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--border)}
.compare-table td{padding:13px 18px;font-size:14px;border-bottom:1px solid var(--border-soft)}
.compare-table td:first-child{color:var(--text-muted)}
.compare-table td:not(:first-child){text-align:center}
.compare-table tr:last-child td{border-bottom:none}
.ck{display:flex;align-items:center;justify-content:center}
.ck svg{width:16px;height:16px;color:var(--teal)}
.ck-x svg{color:var(--text-faint)}
.cta-band{padding:80px 40px;text-align:center;background:linear-gradient(135deg,rgba(var(--purple-rgb),.12),rgba(var(--orange-rgb),.08));border-top:1px solid rgba(var(--purple-rgb),.18)}
.cta-band h2{font-family:var(--font-display);font-size:clamp(22px,3vw,36px);font-weight:800;margin-bottom:14px;letter-spacing:-.3px}
.cta-band p{font-size:16px;color:var(--text-muted);margin-bottom:32px;max-width:480px;margin-inline:auto;margin-bottom:32px}
.btn-group{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}.feat-row,.feat-row.rev{grid-template-columns:1fr;direction:ltr;gap:32px}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
  .lang-btn{ font-size:11.5px;font-weight:700;font-family:var(--font-mono);padding:4px 10px;border-radius:999px;border:none;background:transparent;color:var(--text-faint);cursor:pointer;transition:background .15s,color .15s; }
  .lang-btn.active{ background:var(--bg-card);color:var(--text);box-shadow:0 1px 3px rgba(var(--black-rgb),.12); }
      
  
/* ═══ LIGHT MODE + BUG FIXES ═══ */
  /* Design tokens now live in persona-styles.css — edit there to change colors/fonts for every page. */
body{ background:var(--bg-deep); color:var(--text); }
.blob-p{ opacity:.22 !important; }
.blob-o{ opacity:.18 !important; }
/* Sections */
.sec-alt,.how,.characters,.faq-section,.trust-bar{ background:var(--bg-alt) !important; border-color:rgba(var(--black-rgb),.07) !important; }
/* Cards */
.card,.feat-card,.plan,.plan-card-land,.step,.help-cat-card,.contact-form-card,.sidebar-card,.article-list,.still-help{ background:var(--bg-card); border-color:rgba(var(--black-rgb),.09); }
.feat-card:hover,.help-cat-card:hover,.blog-card:hover{ border-color:rgba(var(--purple-rgb),.3); transform:translateY(-2px); }
.feat-visual{ background:var(--bg-tint); border-color:rgba(var(--black-rgb),.09); }
.plan.pro,.plan-card-land.pro{ background:linear-gradient(160deg,rgba(var(--purple-rgb),.06),rgba(var(--orange-rgb),.03),transparent) !important; border-color:rgba(var(--purple-rgb),.3) !important; }
/* Small UI elements */
.step-mockup,.tpl-mini,.timer-step,.td-card,.flow-step,.ph,.smk-char-row{ background:rgba(var(--black-rgb),.035) !important; border-color:rgba(var(--black-rgb),.07) !important; }
.timer-bar{ background:rgba(var(--black-rgb),.1) !important; }
.smk-selected{ background:rgba(var(--purple-rgb),.08) !important; }
/* Text */
.page-h1,.sec-h2,.section-title,.feat-h3,.feat-row h2,.problem-h2,.hcc-title,.value-title,.team-name,.blog-featured h2,.blog-card h3,.contact-info h2,.prose h2,.prose h3,.post-h1,.guarantee h2,.still-help h3{ color:var(--text); }
.page-sub,.feat-body,.feat-li,.feat-item,.problem-body,.hcc-sub,.value-body,.prose p,.prose li,.post-lede,.guarantee p{ color:var(--text-muted); }
.sec-label,.section-eyebrow,.step-num,.eyebrow,.blog-tag,.post-tag,.hcc-count,.blog-meta,.post-meta,.legal-updated,.legal-toc a{ color:var(--text-faint); }
.eyebrow{ background:rgba(var(--orange-rgb),.07); border-color:rgba(var(--orange-rgb),.25); color:var(--orange-text); }
.hero-eyebrow{ background:rgba(var(--orange-rgb),.07); border-color:rgba(var(--orange-rgb),.25); color:var(--orange); }
/* Compare table */
.compare-table th{ color:var(--text-faint); border-bottom-color:rgba(var(--black-rgb),.1); }
.compare-table td{ color:var(--text-muted); border-bottom-color:rgba(var(--black-rgb),.06); }.search-input, .newsletter-input{ background:var(--bg-card); border-color:rgba(var(--black-rgb),.12); color:var(--text); }.search-input:focus{ border-color:rgba(var(--purple-rgb),.4); }
/* Pricing toggle */
.toggle-track{ background:rgba(var(--black-rgb),.1); border-color:rgba(var(--black-rgb),.12); }
input:checked+.toggle-track{ background:rgba(var(--purple-rgb),.2); border-color:rgba(var(--purple-rgb),.4); }
/* Guarantee */
.guarantee{ background:rgba(var(--teal-rgb),.05); border-color:rgba(var(--teal-rgb),.2); }
/* Blog */
.blog-featured,.blog-card{ background:var(--bg-card); border-color:rgba(var(--black-rgb),.09); }
.newsletter{ background:linear-gradient(135deg,rgba(var(--purple-rgb),.07),rgba(var(--orange-rgb),.05)); border-color:rgba(var(--purple-rgb),.18); }
/* CTA band */

/* Post/support */
.post-cta{ background:linear-gradient(160deg,rgba(var(--purple-rgb),.08),rgba(var(--purple-rgb),.05)); border-color:rgba(var(--purple-rgb),.2); }
.sidebar-link{ border-bottom-color:rgba(var(--black-rgb),.06); color:var(--text-muted); }
.faq-item{ border-bottom-color:rgba(var(--black-rgb),.07); }
.faq-q svg{ color:var(--text-faint); }
.article-row:hover{ background:rgba(var(--purple-rgb),.04); }
.article-row:not(:last-child){ border-bottom-color:rgba(var(--black-rgb),.06); }  /* Footer lang dropdown */
        /* Mobile lang buttons in drawer */
        /* Nav burger icon */


/* ── Additional shared marketing styles ── */
.cta-band h2{font-family:var(--font-display,'Unbounded',sans-serif);font-size:clamp(22px,3vw,36px);font-weight:800;margin-bottom:14px;letter-spacing:-.3px}
.cta-band p{font-size:16px;color:var(--text-muted);margin-bottom:32px;max-width:480px;margin-inline:auto}@media(max-width:960px){
    }