/* CrateEdit Pro — shared stylesheet */

/* ===== Marketing pages (home, features, pricing) ===== */
:root{ --ink:#0a0710; --ink-2:#120c1f; --ink-3:#1a1330; --violet:#c48bfa; --violet-2:#a86ef0; --violet-deep:#6f3fc0; --paper:#f4efff; --muted:#9a8fb4; --faint:#6f6688; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06); --lo:#e0407f; --mid:#8b5cff; --hi:#3fd0ff; --fd:'Space Grotesk',sans-serif; --fb:'IBM Plex Sans',sans-serif; --fm:'IBM Plex Mono',monospace; --wrap:1120px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ink); color:var(--paper); font-family:var(--fb); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} .wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px} .mono{font-family:var(--fm); font-weight:500; letter-spacing:.06em} .eyebrow{font-family:var(--fm); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--violet)} .btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--fd); font-weight:600; font-size:1rem; padding:.85em 1.5em; border-radius:11px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .25s ease, background .2s ease} .btn-primary{background:linear-gradient(180deg,var(--violet),var(--violet-deep)); color:#fff; box-shadow:0 8px 26px -8px rgba(150,80,240,.7), inset 0 1px 0 rgba(255,255,255,.25)} .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(150,80,240,.85), inset 0 1px 0 rgba(255,255,255,.3)} .btn-ghost{background:rgba(255,255,255,.03); color:var(--paper); border-color:var(--line)} .btn-ghost:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18)} .nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(10,7,16,.7); border-bottom:1px solid var(--line-2)} .nav-in{display:flex; align-items:center; justify-content:space-between; height:66px} .brand{display:flex; align-items:center; gap:11px; font-family:var(--fd); font-weight:600; font-size:1.06rem} .brand .mark{width:34px;height:34px} .nav-links{display:flex; align-items:center; gap:30px} .nav-links a.txt{font-size:.94rem; color:var(--muted); transition:color .2s} .nav-links a.txt:hover{color:var(--paper)} .nav .btn{padding:.55em 1.1em; font-size:.92rem} .hero{position:relative; padding:64px 0 0; text-align:center} .hero-glow{position:absolute; inset:-10% 0 auto 0; height:520px; z-index:0; pointer-events:none; background:radial-gradient(60% 70% at 50% 0%, rgba(123,63,192,.35), transparent 70%)} .hero-in{position:relative; z-index:1} .hero-logo{display:block; width:clamp(84px,11vw,116px); height:auto; margin:0 auto 22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 18px 40px rgba(139,92,255,.5)); animation:logoIn .85s cubic-bezier(.16,1,.3,1) both} @keyframes logoIn{from{opacity:0; transform:translateY(16px) scale(.92)} to{opacity:1; transform:translateY(0) scale(1)}} h1{font-family:var(--fd); font-weight:700; font-size:clamp(2.7rem,7vw,5rem); line-height:1.02; letter-spacing:-.02em; margin:20px auto 0; max-width:14ch} h1 .accent{background:linear-gradient(120deg,var(--lo),var(--mid) 45%,var(--hi)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent} .sub{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--muted); max-width:52ch; margin:22px auto 0} .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:34px 0 16px} .micro{font-family:var(--fm); font-size:.78rem; color:var(--faint); letter-spacing:.03em} .micro b{color:var(--muted); font-weight:600} .wave-stage{position:relative; margin:52px 0 0; padding:0} .wave-frame{position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.25)); overflow:hidden} .wave-frame::before, .wave-frame::after{content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none} .wave-frame::before{left:0; background:linear-gradient(90deg,var(--ink),transparent)} .wave-frame::after{right:0; background:linear-gradient(270deg,var(--ink),transparent)} #wave{display:block; width:100%; height:200px} .wave-meta{position:absolute; z-index:3; top:14px; left:20px; display:flex; gap:10px; flex-wrap:wrap} .chip{font-family:var(--fm); font-size:.72rem; font-weight:600; letter-spacing:.04em; padding:5px 10px; border-radius:7px; border:1px solid var(--line); background:rgba(10,7,16,.55); color:var(--paper); backdrop-filter:blur(6px)} .chip .k{color:var(--faint)} .playhead{position:absolute; z-index:3; top:0; bottom:0; width:1px; left:50%; background:linear-gradient(180deg,transparent,var(--violet),transparent); opacity:.5} section{position:relative} .band{padding:104px 0} .band-head{max-width:640px} .band-head h2{font-family:var(--fd); font-weight:700; font-size:clamp(2rem,4vw,2.9rem); line-height:1.08; letter-spacing:-.015em; margin:12px 0 0} .band-head p{color:var(--muted); font-size:1.08rem; margin-top:16px; max-width:56ch} .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px} .card{border:1px solid var(--line); border-radius:16px; padding:26px 24px 28px; background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.004)); transition:border-color .25s, transform .25s, background .25s} .card:hover{border-color:rgba(196,139,250,.4); transform:translateY(-4px); background:linear-gradient(180deg,rgba(196,139,250,.08),rgba(255,255,255,.01))} .card .ic{width:34px; height:34px; color:var(--violet); margin-bottom:16px} .card h3{font-family:var(--fd); font-weight:600; font-size:1.22rem; letter-spacing:-.01em} .card p{color:var(--muted); font-size:.97rem; margin-top:9px} .card .tag{display:inline-block; margin-top:16px; font-family:var(--fm); font-size:.7rem; font-weight:600; letter-spacing:.05em; color:var(--violet); text-transform:uppercase; padding:4px 9px; border:1px solid rgba(196,139,250,.28); border-radius:6px} .why{border-top:1px solid var(--line-2); background: radial-gradient(70% 100% at 50% 0%, rgba(30,20,55,.5), transparent 75%)} .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:12px} .why-item .n{font-family:var(--fm); font-size:.76rem; font-weight:600; letter-spacing:.1em; color:var(--faint)} .why-item h3{font-family:var(--fd); font-weight:600; font-size:1.3rem; margin:12px 0 8px} .why-item p{color:var(--muted); font-size:1rem} .price-card{max-width:560px; margin:44px auto 0; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--ink-2); box-shadow:0 40px 90px -40px rgba(120,60,200,.5)} .price-top{padding:40px 40px 34px; text-align:center; position:relative; background:radial-gradient(90% 130% at 50% 0%, rgba(123,63,192,.28), transparent 70%)} .price-tier{font-family:var(--fm); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--violet)} .price-num{font-family:var(--fd); font-weight:700; font-size:5rem; line-height:1; margin:14px 0 4px; letter-spacing:-.03em} .price-num sup{font-size:2rem; font-weight:600; vertical-align:super; top:-.1em; margin-right:2px} .price-once{font-family:var(--fm); font-size:.82rem; color:var(--muted); letter-spacing:.04em} .price-sub{color:var(--muted); margin-top:16px; font-size:1rem} .price-list{list-style:none; padding:30px 40px; border-top:1px solid var(--line)} .price-list li{display:flex; align-items:flex-start; gap:12px; padding:9px 0; font-size:1rem; color:var(--paper)} .price-list li span.c{color:var(--hi); flex:none; margin-top:3px} .price-list li b{color:var(--paper); font-weight:600} .price-cta{padding:6px 40px 40px} .price-cta .btn{width:100%; justify-content:center; font-size:1.1rem; padding:1em} .price-note{text-align:center; font-family:var(--fm); font-size:.76rem; color:var(--faint); margin-top:16px} footer{border-top:1px solid var(--line-2); padding:56px 0 40px; margin-top:40px} .foot-in{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap} .foot-brand{display:flex; align-items:center; gap:11px; font-family:var(--fd); font-weight:600} .foot-brand .mark{width:32px;height:32px} .foot-tag{color:var(--faint); font-size:.9rem; margin-top:12px; max-width:30ch} .foot-links{display:flex; gap:56px; flex-wrap:wrap} .foot-col h4{font-family:var(--fm); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:14px} .foot-col a{display:block; color:var(--muted); font-size:.94rem; padding:5px 0; transition:color .2s} .foot-col a:hover{color:var(--paper)} .foot-btm{border-top:1px solid var(--line-2); margin-top:44px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--fm); font-size:.78rem; color:var(--faint)} @media(max-width:860px){ .feat-grid{grid-template-columns:1fr} .why-grid{grid-template-columns:1fr; gap:32px} .band{padding:76px 0} .hero{padding:64px 0 0} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto} .hero-logo{animation:none}}

/* ===== Legal pages (terms, privacy) — scoped under body.legal so they never collide with the marketing styles above ===== */
body.legal{background:#0a0710;color:#c9c0dc;font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.7;-webkit-font-smoothing:auto}
.legal a{color:#c48bfa;text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal .top{border-bottom:1px solid rgba(255,255,255,.08);padding:18px 24px}
.legal .top .in{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.legal .brand{display:flex;align-items:center;gap:10px;color:#f4efff;font-weight:600;font-family:inherit;font-size:inherit}
.legal .brand .mark{width:30px;height:30px}
.legal .wrap{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.legal h1{color:#f4efff;font-size:2.4rem;font-weight:700;letter-spacing:-.02em;font-family:inherit;line-height:inherit;margin:0;max-width:none}
.legal .upd{color:#6f6688;font-family:'IBM Plex Mono',monospace;font-size:.82rem;margin:10px 0 8px}
.legal h2{color:#f4efff;font-size:1.15rem;margin:34px 0 8px}
.legal p{margin:8px 0}
.legal .note{margin-top:40px;padding:16px 18px;border:1px solid rgba(196,139,250,.28);border-radius:12px;background:rgba(196,139,250,.06);color:#9a8fb4;font-size:.9rem}
.legal .foot{border-top:1px solid rgba(255,255,255,.06);color:#6f6688;font-size:.82rem;font-family:'IBM Plex Mono',monospace;padding:26px 24px;text-align:center}


/* ===== Feature / marketing sub-pages (features, pricing) ===== */
.page-hero{position:relative; text-align:center; padding:clamp(72px,10vw,116px) 0 clamp(36px,6vw,56px)}
.page-hero .wrap{position:relative; z-index:1}
.page-hero h1{font-family:var(--fd); font-weight:700; font-size:clamp(2.3rem,5.2vw,3.7rem); line-height:1.05; letter-spacing:-.02em; margin:16px auto 0; max-width:18ch; text-wrap:balance}
.features{padding:8px 0 16px}
.feature-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; padding:clamp(48px,7vw,88px) 0}
.feature-row + .feature-row{border-top:1px solid var(--line-2)}
.feature-row.rev .shot{order:2}
.feature-row.rev .feature-copy{order:1}
.feature-copy h2{font-family:var(--fd); font-weight:700; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.1; letter-spacing:-.015em}
.feature-copy p{color:var(--muted); font-size:1.05rem; line-height:1.65; margin-top:14px; max-width:46ch}
.specs{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.spec{font-family:var(--fm); font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--violet); padding:5px 11px; border:1px solid rgba(196,139,250,.28); border-radius:7px; background:rgba(196,139,250,.06)}
.shot{position:relative; aspect-ratio:16/10; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(180deg,rgba(196,139,250,.07),rgba(255,255,255,.012)); box-shadow:0 40px 90px -55px rgba(123,63,192,.65)}
.shot::before{content:''; position:absolute; inset:0; background:radial-gradient(80% 100% at 50% 0%, rgba(123,63,192,.16), transparent 72%); pointer-events:none}
.shot-label{position:relative; z-index:1; text-align:center; padding:16px}
.shot-label .n{display:block; font-family:var(--fm); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.shot-label .h{display:block; margin-top:8px; font-family:var(--fm); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2}
.shot-video{aspect-ratio:1242/630}
.shot-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; display:block; background:var(--ink-2)}
.shot-video video[controls]{background:var(--ink)}
.cta{border-top:1px solid var(--line-2); text-align:center; padding:clamp(72px,10vw,120px) 0; background:radial-gradient(70% 130% at 50% 0%, rgba(123,63,192,.24), transparent 70%)}
.cta h2{font-family:var(--fd); font-weight:700; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; text-wrap:balance}
.cta .btn{margin-top:26px; font-size:1.1rem; padding:1em 1.8em}
@media(max-width:860px){
  .feature-row{grid-template-columns:1fr; gap:26px; padding:52px 0}
  .feature-row .shot, .feature-row.rev .shot{order:0}
  .feature-row .feature-copy, .feature-row.rev .feature-copy{order:1}
}


/* ===== Pricing page ===== */
.price-section{padding:0 0 clamp(36px,5vw,64px)}
.compare{padding:clamp(56px,8vw,96px) 0; border-top:1px solid var(--line-2); background:radial-gradient(70% 100% at 50% 0%, rgba(30,20,55,.42), transparent 75%)}
.compare-head{text-align:center; max-width:640px; margin:0 auto}
.compare-head h2{font-family:var(--fd); font-weight:700; font-size:clamp(2rem,4vw,2.9rem); line-height:1.08; letter-spacing:-.015em}
.compare-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; align-items:start}
.compare-col{border:1px solid var(--line); border-radius:16px; padding:28px 24px; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.004))}
.compare-col.win{border-color:rgba(196,139,250,.5); background:linear-gradient(180deg,rgba(196,139,250,.1),rgba(255,255,255,.012)); box-shadow:0 34px 80px -46px rgba(123,63,192,.65); position:relative}
.compare-badge{position:absolute; top:-11px; left:24px; font-family:var(--fm); font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,var(--violet),var(--violet-deep)); padding:4px 11px; border-radius:20px}
.compare-col h3{font-family:var(--fd); font-weight:600; font-size:1.2rem; letter-spacing:-.01em}
.compare-col .lead{font-family:var(--fm); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:8px}
.compare-col.win .lead{color:var(--violet)}
.compare-col ul{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:12px}
.compare-col li{display:flex; gap:10px; align-items:flex-start; font-size:.96rem; line-height:1.5; color:var(--muted)}
.compare-col li span.m{flex:none; color:var(--faint)}
.compare-col.win li{color:var(--paper)}
.compare-col.win li span.m{color:var(--hi); font-weight:700}
.faq{max-width:768px; margin:0 auto; padding:clamp(56px,8vw,88px) 24px}
.faq-head{text-align:center}
.faq-head h2{font-family:var(--fd); font-weight:700; font-size:clamp(1.8rem,3.5vw,2.5rem); letter-spacing:-.015em}
.faq-list{margin-top:34px; display:flex; flex-direction:column; gap:12px}
.faq-item{border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02); overflow:hidden}
.faq-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; font-family:var(--fd); font-weight:600; font-size:1.04rem; color:var(--paper); transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+'; font-family:var(--fm); font-weight:600; font-size:1.4rem; line-height:1; color:var(--violet); transition:transform .25s ease; flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--violet)}
.faq-item .a{padding:2px 20px 20px; color:var(--muted); font-size:1rem; line-height:1.65}
@media(max-width:860px){ .compare-grid{grid-template-columns:1fr; gap:14px} }


/* ===== FAQ page ===== */
.faq-group + .faq-group{margin-top:44px}
.faq-group-label{font-family:var(--fm); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); margin:0 0 16px}
.cta p{color:var(--muted); margin-top:14px; font-size:1.05rem}
.cta p a{color:var(--violet); text-decoration:none}
.cta p a:hover{text-decoration:underline}


/* ===== Mobile nav menu (hamburger) ===== */
.nav-toggle{display:none; width:42px; height:42px; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:transparent; border:1px solid var(--line); border-radius:10px; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent}
.nav-toggle:hover{border-color:rgba(255,255,255,.18)}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--paper); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:10px 24px 18px; background:rgba(10,7,16,.98); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-2); box-shadow:0 26px 44px -22px rgba(0,0,0,.75); display:none}
  .nav.open .nav-links{display:flex}
  .nav-links a.txt{display:block; font-size:1.05rem; color:var(--paper); padding:14px 2px; border-bottom:1px solid var(--line-2)}
  .nav-links a.txt:hover{color:var(--violet)}
  .nav-links .btn{width:100%; justify-content:center; margin-top:14px; padding:.85em 1.1em; font-size:1rem}
}

/* ===== Contact / Support page ===== */
.contact-sec{padding:clamp(8px,2vw,24px) 0 clamp(64px,9vw,104px)}
.contact-wrap{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start}
.contact-form{border:1px solid var(--line); border-radius:18px; padding:clamp(24px,3vw,34px); background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.004))}
.contact-form .field{margin-bottom:18px}
.contact-form label{display:block; font-family:var(--fm); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%; font-family:var(--fb); font-size:1rem; color:var(--paper); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:11px; padding:.8em 1em; transition:border-color .2s, box-shadow .2s, background .2s}
.contact-form textarea{resize:vertical; min-height:130px; line-height:1.6}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--faint)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none; border-color:var(--violet); background:rgba(255,255,255,.05); box-shadow:0 0 0 3px rgba(196,139,250,.18)}
.contact-form select{appearance:none; -webkit-appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 15px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.contact-form select option{background:var(--ink-2); color:var(--paper)}
.contact-form .btn-primary{width:100%; justify-content:center; margin-top:6px; font-size:1.05rem; padding:.95em}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.form-status{margin-top:16px; font-family:var(--fm); font-size:.86rem; line-height:1.5; min-height:1.2em}
.form-status.ok{color:#5fe39a}
.form-status.err{color:var(--lo)}
.contact-aside{display:flex; flex-direction:column; gap:14px}
.aside-card{border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:rgba(255,255,255,.02)}
.aside-card h3{font-family:var(--fd); font-weight:600; font-size:1.05rem; color:var(--paper)}
.aside-card p{color:var(--muted); font-size:.94rem; margin-top:7px; line-height:1.6}
.aside-card a{color:var(--violet); border-bottom:1px solid rgba(196,139,250,.35)}
.aside-card a:hover{color:var(--violet-2)}
@media(max-width:860px){ .contact-wrap{grid-template-columns:1fr; gap:24px} }
.shot:has(img[src*="batchgrid"]){aspect-ratio:1681/979}
.shot:has(img[src*="cues"]){aspect-ratio:2145/1177}
.shot:has(img[src*="key"]){aspect-ratio:1040/803}
.shot:has(img[src*="tags"]){aspect-ratio:2060/1003}
.shot:has(img[src*="editor"]){aspect-ratio:1684/980}
.shot:has(img[src*="beatgrid"]){aspect-ratio:2057/1001}

/* ===== Guides / blog ===== */
.legal.guide h1{font-family:'Space Grotesk',sans-serif}
.legal.guide h2{font-family:'Space Grotesk',sans-serif;color:#f4efff;font-size:1.35rem;margin:40px 0 10px}
.legal .kicker{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c48bfa;margin-bottom:10px}
.legal .lead{font-size:1.14rem;color:#b8aed0;margin:16px 0 8px;line-height:1.6}
.legal.guide ul,.legal.guide ol{margin:12px 0 12px 22px}
.legal.guide li{margin:7px 0}
.legal .backlink{color:#9a8fb4}
.guide-list{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.guide-card{display:block;border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:22px 24px;background:linear-gradient(180deg,rgba(196,139,250,.05),rgba(255,255,255,.01));transition:border-color .2s,transform .2s,background .2s}
a.guide-card:hover{border-color:rgba(196,139,250,.45);transform:translateY(-3px);text-decoration:none;background:linear-gradient(180deg,rgba(196,139,250,.1),rgba(255,255,255,.02))}
.guide-card .k{font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6f6688}
.guide-card h3{color:#f4efff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.24rem;margin:9px 0 6px;letter-spacing:-.01em}
.guide-card p{color:#9a8fb4;font-size:.96rem;margin:0}
.guide-card.soon{opacity:.55}
.guide-card.soon .k{color:#c48bfa}
.guide-cta{margin-top:46px;padding:30px 26px;border:1px solid rgba(196,139,250,.3);border-radius:16px;background:radial-gradient(90% 130% at 50% 0%,rgba(123,63,192,.2),transparent 70%);text-align:center}
.guide-cta h3{color:#f4efff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem;margin:0 0 8px}
.guide-cta p{color:#9a8fb4;margin:0 0 18px}
.guide-cta .cta-btn{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:600;padding:.82em 1.7em;border-radius:11px;background:linear-gradient(180deg,#c48bfa,#6f3fc0);color:#fff}
.guide-cta .cta-btn:hover{text-decoration:none;filter:brightness(1.08)}

/* ===== Guarantee badge ===== */
.guarantee{display:flex; align-items:center; justify-content:center; gap:7px; width:fit-content; max-width:100%; margin:16px auto 0; font-family:var(--fm); font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--violet); padding:8px 15px; border:1px solid rgba(196,139,250,.38); border-radius:999px; background:rgba(196,139,250,.09); text-align:center}
.guarantee svg{width:14px; height:14px; flex:none}

/* ===== Requirements note ===== */
.req-note{display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; font-family:var(--fm); font-size:.72rem; color:var(--faint); margin-top:8px}
.req-note svg{width:13px; height:13px; flex:none; opacity:.85}