/* ============================================================
   CTRSpace — inner page components
   Extends css/site.css using the same design tokens
   (colors, radius, shadows, typography already defined there)
   ============================================================ */

/* ---------- "What Sets It Apart" numbered feature grid ---------- */
.apart-badge{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); border:1.5px solid rgba(123,0,255,.25); padding:8px 20px; border-radius:100px; background:rgba(123,0,255,.05); }
.apart-badge svg{ width:11px; height:11px; flex-shrink:0; }
.apart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px; }
.apart-card{ position:relative; border-radius:24px; overflow:hidden; display:flex; min-height:250px; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.apart-card:hover{ transform:translateY(-4px); }
.apart-card-content{ position:relative; z-index:2; flex:0 0 56%; padding:40px 32px; display:flex; align-items:flex-start; gap:16px; }
.apart-num{ font-size:40px; font-weight:800; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; }
.apart-divider{ width:2px; align-self:stretch; opacity:.18; flex-shrink:0; }
.apart-card-text h4{ font-size:20px; font-weight:800; line-height:1.28; }
.apart-card-text h4 span{ display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.apart-card-text p{ margin-top:14px; font-size:14px; line-height:1.65; }
.apart-card-wedge{ position:absolute; inset:0; left:36%; clip-path:polygon(14% 0,100% 0,100% 100%,0% 100%); display:flex; align-items:center; justify-content:center; }
.apart-card-wedge::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(currentColor 1px, transparent 1px); background-size:16px 16px; opacity:.14; color:var(--purple); }
.apart-dark .apart-card-wedge{ background:linear-gradient(160deg,#1A1650,#0D0B28); }
.apart-light .apart-card-wedge{ background:linear-gradient(160deg,#F1EFFB,#E9E7F8); }
.apart-icon-wrap{ position:relative; z-index:1; width:130px; height:130px; display:flex; align-items:center; justify-content:center; }
.apart-icon-wrap svg{ width:96px; height:96px; position:relative; z-index:2; filter:drop-shadow(0 16px 20px rgba(30,0,90,.28)); }
.apart-icon-shadow{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:74px; height:12px; border-radius:50%; background:radial-gradient(ellipse, rgba(76,0,255,.4), transparent 72%); filter:blur(1px); }
.apart-dark .apart-card-text p{ color:rgba(255,255,255,.55); }
.apart-dark .apart-divider{ background:#fff; }
.apart-light{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.apart-light .apart-card-text p{ color:var(--muted); }
.apart-light .apart-divider{ background:var(--ink); }
.apart-dark{ background:linear-gradient(135deg,#0B0A1F,#151233); color:#fff; }
@media (max-width:900px){ .apart-grid{ grid-template-columns:1fr; gap:20px; } .apart-card{ flex-direction:column; min-height:auto; } .apart-card-content{ flex:1; padding:32px 26px 0; } .apart-card-wedge{ position:relative; left:0; clip-path:none; inset:auto; padding:30px 0; margin-top:24px; } }

/* ---------- Contact page "Documentation / Support / Getting Started" help cards ---------- */
.help-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1020px; margin:0 auto; text-align:left; }
.help-card{ position:relative; background:#fff; border-radius:24px; padding:40px 28px 34px; overflow:hidden; box-shadow:0 14px 34px -18px rgba(30,10,80,.16); border:1px solid var(--line); text-align:center; transition:transform .3s ease, box-shadow .3s ease; }
.help-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(30,10,80,.22); }
.help-card::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--hc-grad); border-radius:0 0 24px 24px; }
.help-card-dots{ position:absolute; top:26px; left:26px; width:56px; height:44px; background-image:radial-gradient(var(--hc-solid) 1.4px, transparent 1.4px); background-size:12px 12px; opacity:.3; }
.help-icon-wrap{ position:relative; width:110px; height:110px; margin:0 auto 26px; display:flex; align-items:center; justify-content:center; }
.help-icon-wrap::before{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--bg-lav); }
.help-icon{ position:relative; z-index:1; width:88px; height:88px; border-radius:50%; background:var(--hc-grad); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 30px -12px rgba(60,20,180,.4); }
.help-icon svg{ width:36px; height:36px; }
.help-dot-a, .help-dot-b{ position:absolute; border-radius:50%; z-index:2; background:var(--hc-solid); }
.help-dot-a{ width:9px; height:9px; top:14px; right:0; }
.help-dot-b{ width:13px; height:13px; bottom:6px; left:-4px; }
.help-card h4{ font-size:22px; font-weight:800; color:var(--ink); }
.help-underline{ display:inline-flex; align-items:center; gap:5px; margin:10px 0 18px; }
.help-underline::before{ content:''; width:30px; height:3px; border-radius:2px; background:var(--hc-solid); }
.help-underline::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--hc-solid); }
.help-card p{ font-size:14.5px; color:var(--muted); line-height:1.65; }
@media (max-width:860px){ .help-cards{ grid-template-columns:1fr; gap:24px; } }
/* ---------- contact page info cards (Documentation / Support / Getting Started) ---------- */
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1020px; margin:0 auto; }
.contact-info-card{ position:relative; background:#fff; border-radius:22px; padding:44px 30px 36px; box-shadow:0 16px 40px -18px rgba(30,10,80,.16); overflow:hidden; text-align:center; text-decoration:none; display:block; transition:transform .3s ease, box-shadow .3s ease; }
.contact-info-card:hover{ transform:translateY(-5px); box-shadow:0 22px 46px -16px rgba(30,10,80,.22); }
.contact-info-card::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--grad); border-radius:0 0 22px 22px; }
.contact-info-card.is-blue::after{ background:linear-gradient(90deg,#00A8FF,#3030FF); }
.contact-info-dots{ position:absolute; top:22px; left:22px; width:56px; height:44px; background-image:radial-gradient(var(--purple) 1.4px, transparent 1.4px); background-size:12px 12px; opacity:.3; }
.contact-info-icon-wrap{ position:relative; width:96px; height:96px; margin:0 auto 26px; }
.contact-info-icon-wrap::before{ content:''; position:absolute; inset:4px; border-radius:50%; background:#F3F1FB; }
.contact-info-icon{ position:relative; z-index:1; width:100%; height:100%; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px -10px rgba(76,0,255,.4); }
.contact-info-card.is-blue .contact-info-icon{ background:linear-gradient(135deg,#00A8FF,#3030FF); box-shadow:0 14px 28px -10px rgba(0,90,255,.4); }
.contact-info-icon svg{ width:36px; height:36px; }
.contact-info-dot-a, .contact-info-dot-b{ position:absolute; border-radius:50%; background:var(--purple); }
.contact-info-card.is-blue .contact-info-dot-a, .contact-info-card.is-blue .contact-info-dot-b{ background:#00A8FF; }
.contact-info-dot-a{ width:9px; height:9px; bottom:6px; left:-2px; }
.contact-info-dot-b{ width:6px; height:6px; top:14px; right:-4px; }
.contact-info-title{ font-size:22px; font-weight:800; color:var(--ink); }
.contact-info-underline{ display:inline-flex; align-items:center; gap:6px; margin:10px 0 18px; }
.contact-info-underline span{ display:block; width:32px; height:3px; border-radius:2px; background:var(--grad); }
.contact-info-underline i{ display:block; width:5px; height:5px; border-radius:50%; background:var(--purple); }
.contact-info-card.is-blue .contact-info-underline span, .contact-info-card.is-blue .contact-info-underline i{ background:linear-gradient(90deg,#00A8FF,#3030FF); }
.contact-info-desc{ font-size:14.5px; color:var(--muted); line-height:1.65; }
@media (max-width:820px){ .contact-info-grid{ grid-template-columns:1fr; max-width:380px; } }

/* ---------- Team grid (About page) ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px; margin-top:56px; }
.team-card{ text-align:center; }
.team-photo{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.team-card:hover .team-photo img{ transform:scale(1.06); }
.team-card h4{ margin-top:18px; font-size:17px; font-weight:800; color:var(--ink); }
.team-card span{ display:block; margin-top:4px; font-size:13px; color:var(--purple); font-weight:700; }
@media (max-width:760px){ .team-grid{ grid-template-columns:1fr 1fr; gap:24px 20px; } }
@media (max-width:480px){ .team-grid{ grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto; } }

/* ---------- Publishing Blocks page: intro features + editorial workflow mockup ---------- */
.pub-feature{ display:flex; gap:14px; margin-top:18px; align-items:flex-start; }
.pub-feature-icon{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 18px -6px rgba(80,40,200,.4); }
.pub-feature-icon svg{ width:18px; height:18px; }
.pub-feature h5{ font-size:14.5px; font-weight:800; color:var(--ink); }
.pub-feature p{ margin-top:2px; font-size:13px; color:var(--muted); }

.flow-split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; margin-top:56px; }
.flow-item{ display:flex; gap:16px; }
.flow-item + .flow-item{ margin-top:32px; }
.flow-item-icon{ width:46px; height:46px; border-radius:14px; background:var(--bg-lav); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.flow-item-icon svg{ width:20px; height:20px; }
.flow-item h5{ font-size:16px; font-weight:800; color:var(--ink); }
.flow-item p{ margin-top:6px; font-size:13.5px; color:var(--muted); line-height:1.6; max-width:320px; }
.flow-item a{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:800; color:var(--purple); text-decoration:none; }
.flow-item a svg{ width:13px; height:13px; transition:transform .25s ease; }
.flow-item a:hover svg{ transform:translateX(3px); }

.flow-mockup{ display:flex; flex-direction:column; gap:16px; }
.flow-mock-card{ background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:20px; }
.flow-check{ width:20px; height:20px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.flow-check svg{ width:11px; height:11px; }
.flow-stat-label{ font-size:11.5px; color:var(--muted); }
.flow-stat-value{ display:block; font-size:15px; font-weight:800; color:var(--ink); margin-top:2px; }
.flow-table{ width:100%; font-size:12.5px; border-collapse:collapse; }
.flow-table th{ text-align:left; padding-bottom:10px; font-weight:700; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.flow-table td{ padding:9px 0; font-weight:600; color:var(--ink); border-top:1px solid var(--line); }
.flow-status{ display:inline-flex; align-items:center; gap:6px; }
.flow-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:#22B573; }
.flow-status.draft::before{ background:#F5A623; }
@media (max-width:900px){ .flow-split{ grid-template-columns:1fr; gap:40px; } }
.flow-timeline{ position:relative; }
.flow-timeline::before{ content:''; position:absolute; top:23px; bottom:23px; left:23px; width:2px; background:linear-gradient(180deg, var(--blue), var(--purple) 50%, var(--magenta)); opacity:.22; }
.flow-step{ width:46px; height:46px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:800; font-size:17px; position:relative; z-index:1; box-shadow:0 10px 24px rgba(123,0,255,.28); }
@media (max-width:640px){ .flow-timeline::before{ left:20px; } .flow-step{ width:40px; height:40px; font-size:15px; } }

/* ---------- Blog article end section: FAQ, Tags, Share, Author, Comments ---------- */
.article-tag{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:100px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-soft); text-decoration:none; transition:all .2s ease; }
.article-tag:hover{ background:var(--grad-soft); color:var(--purple); border-color:transparent; }

.share-block{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:28px 32px; border-radius:20px; background:var(--bg-lav); }
.share-btn{ width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .2s ease; flex-shrink:0; }
.share-btn:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px); }

.author-card{ display:flex; gap:22px; align-items:flex-start; padding:32px; border-radius:22px; border:1px solid var(--line); background:#fff; }
.author-card img{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-card-eyebrow{ font-size:12px; font-weight:800; color:var(--purple); text-transform:uppercase; letter-spacing:.05em; }
.author-card h4{ margin-top:6px; font-size:18px; font-weight:800; color:var(--ink); }
.author-card p{ margin-top:8px; font-size:14px; color:var(--muted); line-height:1.65; }

.comment-item{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.comment-item:first-child{ padding-top:0; }
.comment-avatar{ width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:14px; background:var(--grad); }
.comment-body{ flex:1; min-width:0; }
.comment-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.comment-head b{ font-size:14.5px; color:var(--ink); }
.comment-head span{ font-size:12.5px; color:var(--muted); }
.comment-body p{ margin-top:6px; font-size:14px; color:var(--ink-soft); line-height:1.65; }
.comment-signin{ margin-top:24px; padding:22px; border-radius:16px; background:var(--bg-lav); text-align:center; font-size:14px; color:var(--muted); }
.comment-signin a{ color:var(--purple); font-weight:800; text-decoration:none; }
@media (max-width:640px){ .share-block{ flex-direction:column; align-items:flex-start; } .author-card{ flex-direction:column; align-items:flex-start; } }

/* ---------- Dark FAQ card (Support page) ---------- */
.faq-dark-card{ position:relative; border-radius:32px; padding:70px 56px; background:var(--ink); overflow:hidden; }
.faq-dark-blob{ position:absolute; border-radius:50%; filter:blur(100px); z-index:0; }
.faq-dark-blob.f1{ width:400px; height:400px; background:#00A8FF; top:-140px; left:-100px; opacity:.35; }
.faq-dark-blob.f2{ width:400px; height:400px; background:#D000FF; bottom:-160px; right:-100px; opacity:.35; }
.faq-dark-head{ position:relative; z-index:1; text-align:center; max-width:600px; margin:0 auto; }
.faq-dark-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.faq-dark-head h2{ margin-top:10px; font-size:clamp(26px,3.2vw,38px) !important; font-weight:800 !important; color:#fff !important; background:none !important; -webkit-text-fill-color:#fff !important; }
.faq-dark-head p{ margin-top:14px; color:rgba(255,255,255,.55); font-size:15px; line-height:1.7; }
.faq-dark-body{ position:relative; z-index:1; display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:center; margin-top:60px; }
.faq-dark-illustration{ position:relative; height:420px; display:flex; align-items:center; justify-content:center; }
.faq-dark-item{ border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.faq-dark-item + .faq-dark-item{ margin-top:14px; }
.faq-dark-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; font-weight:700; font-size:14.5px; color:#fff; }
.faq-dark-q-icon{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; transition:all .25s ease; }
.faq-dark-q-icon svg{ transition:transform .3s ease; }
.faq-dark-item.open .faq-dark-q-icon{ background:var(--grad); }
.faq-dark-item.open .faq-dark-q-icon svg{ transform:rotate(135deg); }
.faq-dark-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-dark-item.open .faq-dark-a{ max-height:260px; }
.faq-dark-a p{ padding:0 24px 22px; color:rgba(255,255,255,.55); font-size:13.5px; line-height:1.75; }
@media (max-width:900px){ .faq-dark-card{ padding:50px 26px; } .faq-dark-body{ grid-template-columns:1fr; gap:36px; } .faq-dark-illustration{ height:280px; } }

/* ---------- Publish section: rich dashboard mockup with labeled callouts ---------- */
.pub-mockup-wrap{ position:relative; padding:0 10px; }
.pub-browser{ background:#fff; border-radius:20px; box-shadow:0 30px 60px -20px rgba(20,10,70,.25); border:1px solid var(--line); overflow:hidden; position:relative; z-index:1; }
.pub-browser-nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); }
.pub-browser-logo{ font-weight:800; font-size:14px; color:var(--ink); }
.pub-browser-logo b{ color:var(--purple); }
.pub-browser-menu{ display:flex; gap:16px; font-size:11px; font-weight:700; color:var(--muted); }
.pub-browser-menu .active{ color:var(--purple); }
.pub-browser-actions{ display:flex; align-items:center; gap:10px; }
.pub-browser-btn{ background:var(--grad); color:#fff; font-size:10.5px; font-weight:800; padding:6px 14px; border-radius:100px; }
.pub-body{ display:grid; grid-template-columns:1fr 160px; gap:16px; padding:16px; }
.pub-hero-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:8px; }
.pub-hero-card{ position:relative; border-radius:10px; overflow:hidden; background:#EFEDF8; }
.pub-hero-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.pub-hero-main{ min-height:190px; }
.pub-hero-main-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,5,30,.85), transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:12px; color:#fff; }
.pub-hero-cat{ display:inline-block; background:var(--grad); font-size:7.5px; font-weight:800; padding:3px 7px; border-radius:4px; margin-bottom:6px; width:fit-content; }
.pub-hero-title{ font-size:12px; font-weight:800; line-height:1.28; }
.pub-hero-meta{ margin-top:5px; font-size:7.5px; opacity:.75; }
.pub-hero-side{ display:flex; flex-direction:column; gap:8px; }
.pub-side-card{ border-radius:9px; overflow:hidden; border:1px solid var(--line); }
.pub-side-card img{ width:100%; height:52px; object-fit:cover; display:block; }
.pub-side-card-body{ padding:7px 9px; }
.pub-side-card-body h6{ font-size:8.5px; font-weight:800; color:var(--ink); line-height:1.3; }
.pub-side-card-body span{ font-size:7px; color:var(--muted); }
.pub-cats-head{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.pub-cats-head h5{ font-size:10.5px; font-weight:800; color:var(--ink); }
.pub-cats-head span{ font-size:8.5px; color:var(--purple); font-weight:700; }
.pub-cats-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:9px; }
.pub-cat-pill{ text-align:center; padding:9px 4px; border-radius:9px; background:#F7F6FC; }
.pub-cat-pill-icon{ width:20px; height:20px; border-radius:6px; margin:0 auto 5px; display:flex; align-items:center; justify-content:center; }
.pub-cat-pill h6{ font-size:7.5px; font-weight:800; color:var(--ink); }
.pub-cat-pill span{ font-size:6px; color:var(--muted); }
.pub-trending-head{ margin-top:16px; font-size:10.5px; font-weight:800; color:var(--ink); }
.pub-trend-item{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.pub-trend-num{ width:15px; height:15px; border-radius:50%; background:var(--grad); color:#fff; font-size:7px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pub-trend-thumb{ width:34px; height:28px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.pub-trend-text h6{ font-size:8px; font-weight:700; color:var(--ink); line-height:1.3; }
.pub-trend-text span{ font-size:6.5px; color:var(--muted); }
.pub-sidebar{ display:flex; flex-direction:column; gap:10px; }
.pub-sb-card{ border:1px solid var(--line); border-radius:10px; padding:10px 11px; }
.pub-sb-card h6{ font-size:8.5px; font-weight:800; color:var(--ink); margin-bottom:7px; }
.pub-sb-toc-item{ font-size:7px; color:var(--muted); padding:2.5px 0; display:flex; gap:5px; }
.pub-sb-toc-item b{ color:var(--purple); }
.pub-sb-pop-item{ display:flex; gap:6px; align-items:center; padding:4px 0; }
.pub-sb-pop-item img{ width:24px; height:24px; border-radius:5px; object-fit:cover; flex-shrink:0; }
.pub-sb-pop-item h6{ font-size:7px; font-weight:700; color:var(--ink); line-height:1.2; margin:0; }
.pub-sb-pop-item span{ font-size:6px; color:var(--muted); }
.pub-sb-cta{ background:var(--grad); border-radius:10px; padding:13px; color:#fff; }
.pub-sb-cta h6{ font-size:9.5px; font-weight:800; margin-bottom:4px; }
.pub-sb-cta p{ font-size:7px; opacity:.85; line-height:1.4; margin-bottom:9px; }
.pub-sb-cta a{ display:inline-block; background:#fff; color:var(--purple); font-size:7.5px; font-weight:800; padding:6px 11px; border-radius:100px; }
.pub-callout{ position:absolute; z-index:5; display:flex; align-items:center; gap:8px; background:#fff; border-radius:12px; padding:7px 14px; box-shadow:0 10px 24px -8px rgba(20,10,70,.25); font-size:11px; font-weight:800; color:var(--purple); white-space:nowrap; }
.pub-callout-blue{ color:#1C5FE0; }
.pub-callout-line{ position:absolute; border-top:2px dashed rgba(123,0,255,.4); }
.pub-callout-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--purple); }
@media (max-width:900px){ .pub-body{ grid-template-columns:1fr; } .pub-sidebar{ flex-direction:row; flex-wrap:wrap; } .pub-sidebar > *{ flex:1; min-width:150px; } .pub-callout{ display:none; } }
/* Positions live here so the overhang can be eased in before the callouts are
   hidden at 900px. They are meant to hang off the mockup, not off the page —
   between roughly 900 and 1400 the mockup sits close enough to the viewport
   edge that the full offset reached past it. */
.pub-callout-l1{ top:26%; left:-6%; }
.pub-callout-l2{ top:56%; left:-8%; }
.pub-callout-l3{ top:82%; left:-6%; }
.pub-callout-r1{ top:20%; right:-8%; }
.pub-callout-r2{ top:52%; right:-6%; }
.pub-callout-r3{ top:80%; right:-6%; }
@media (max-width:1400px){
  .pub-callout-l1, .pub-callout-l3{ left:-2%; }
  .pub-callout-l2{ left:-3%; }
  .pub-callout-r1{ right:-3%; }
  .pub-callout-r2, .pub-callout-r3{ right:-2%; }
}
@media (max-width:640px){ .pub-browser-menu{ display:none; } }

.nav-item > a.is-active, .nav-item > button.is-active{ color:var(--purple); }

/* ---------- consistent 350px page banner (breadcrumb + heading + subheading, center-aligned) ---------- */
.page-banner{ position:relative; min-height:350px; display:flex; align-items:center; justify-content:center; padding:150px 0 40px; overflow:hidden; text-align:center; background:linear-gradient(150deg, #F0F8FF, #F6F5FF 55%, #FBF3FF); }
.page-banner::before{ content:''; position:absolute; inset:0; background:radial-gradient(55% 65% at 12% 0%, rgba(58,180,255,.12), transparent 70%), radial-gradient(45% 60% at 100% 100%, rgba(208,0,255,.1), transparent 70%); pointer-events:none; }
.page-banner::after{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:1px dashed rgba(123,0,255,.16); pointer-events:none; }
.page-banner .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:760px; margin:0 auto; }
.page-banner-crumb{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 auto 16px; }
.page-banner-crumb a{ color:var(--muted); transition:color .2s ease; }
.page-banner-crumb a:hover{ color:var(--purple); }
.page-banner-crumb .current{ color:var(--purple); font-weight:800; }
.page-banner h1{ font-size:clamp(30px,4vw,46px) !important; font-weight:700 !important; line-height:1.15; letter-spacing:-0.02em; margin:0 auto; max-width:720px; }
.page-banner-sub{ margin:16px auto 0; max-width:720px; color:var(--muted); font-size:17px; line-height:1.65; }
@media (max-width:640px){ .page-banner{ min-height:280px; padding:130px 0 30px; } .page-banner-sub{ font-size:15.5px; } }

/* ---------- consistent hero-to-content spacing rhythm ---------- */
/* The page-banner already carries 40px of bottom padding, so the section
   immediately following it uses a matched 40px top (not the default 150px
   section rhythm, and not the ad-hoc 0/10/20/60px values that were previously
   scattered across pages) — giving every inner page the same banner-to-content
   gap while still using the standard 150/100/76 rhythm between all other
   sections further down the page. */
.page-banner + section{ padding-top:40px !important; }
@media (max-width:1024px){ .page-banner + section{ padding-top:32px !important; } }
@media (max-width:640px){ .page-banner + section{ padding-top:24px !important; } }

.page-banner + section.contact-content-top{ padding-top:150px !important; }
@media (max-width:1024px){ .page-banner + section.contact-content-top{ padding-top:100px !important; } }
@media (max-width:640px){ .page-banner + section.contact-content-top{ padding-top:70px !important; } }

.heading-nowrap{ white-space:nowrap; }
@media (max-width:760px){ .heading-nowrap{ white-space:normal; } }

/* ---------- lightweight intro block that follows the banner on pages that need supporting copy ---------- */
.page-intro{ padding:50px 0 0; text-align:center; }
.page-intro p.lead{ margin:0 auto; max-width:640px; color:var(--muted); font-size:16.5px; line-height:1.7; }
.page-intro-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* ---------- simple page hero (legacy, retained for reference) ---------- */
.page-hero{ position:relative; padding:150px 0 70px; text-align:center; overflow:hidden; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, rgba(123,0,255,.07), transparent 70%); pointer-events:none; }
.page-hero h1{ font-size:clamp(32px,4.6vw,54px) !important; font-weight:700 !important; line-height:1.12; letter-spacing:-0.02em; margin-top:16px; max-width:900px; margin-left:auto; margin-right:auto; }
.page-hero p.lead{ margin:20px auto 0; max-width:640px; color:var(--muted); font-size:17px; line-height:1.65; }
.page-hero-sm{ padding-bottom:56px; }
.page-hero-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; }

/* ---------- breadcrumb ---------- */
.breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--muted); }
.breadcrumb a{ color:var(--muted); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--purple); }
.breadcrumb svg{ flex-shrink:0; opacity:.5; }
.breadcrumb .current{ color:var(--ink); font-weight:700; }

/* ---------- search + filter bar (catalog pages) ---------- */
.catalog-toolbar{ display:flex; align-items:center; gap:14px; margin:0 0 28px; flex-wrap:wrap; }
.catalog-search{ display:flex; align-items:center; gap:12px; flex:1 1 260px; padding:16px 22px; border-radius:100px; border:1px solid var(--line); background:#fff; box-shadow:0 4px 16px rgba(20,10,70,.05); }
.catalog-search svg{ color:var(--purple); flex-shrink:0; }
.catalog-search input{ border:none; outline:none; flex:1; min-width:0; font-size:14.5px; color:var(--ink); background:transparent; }
.catalog-search input::placeholder{ color:var(--muted); }
.catalog-sort-wrap{ position:relative; flex-shrink:0; }
.catalog-sort{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:15px 42px 15px 22px; border-radius:100px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; }
.catalog-sort-wrap::after{ content:''; position:absolute; right:19px; top:50%; width:8px; height:8px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.catalog-filter-icon-btn{ width:52px; height:52px; border-radius:16px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; }
.filter-btn{ display:inline-flex; align-items:center; gap:8px; }
.filter-btn svg{ flex-shrink:0; }
.catalog-filters{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- editorial split (feature groups on Features page) ---------- */
.editorial-row{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.editorial-row.rev{ direction:rtl; } .editorial-row.rev > *{ direction:ltr; }
.editorial-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); }
.editorial-list{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.editorial-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-soft); font-weight:600; }
.editorial-list svg{ flex-shrink:0; margin-top:2px; color:#fff; background:var(--grad); border-radius:50%; padding:3px; width:20px; height:20px; box-shadow:0 6px 14px -4px rgba(123,0,255,.5); }
.editorial-panel{ border-radius:26px; border:1px solid var(--line); background:linear-gradient(150deg,#fff,var(--bg-lav) 120%); box-shadow:var(--shadow); padding:34px; }
/* Grid items default to min-width:auto, so a track cannot shrink below its
   content. Two of these panels are flex rows of fixed-width device mockups with
   flex-shrink:0 (120 + 280 + 76 plus two 24px gaps = 524px), which held the
   single-column track open well past a phone viewport. Letting the item shrink
   and the row wrap keeps every mockup at its designed size, just on two lines. */
.editorial-row > *{ min-width:0; }
/* Unconditional: wrapping only engages when the line genuinely does not fit, so
   the full-width desktop layout is untouched while the two-column tablet band
   (where the column is ~449px against a 524px row) stops overflowing. */
.editorial-panel{ flex-wrap:wrap; }
@media (max-width:900px){ .editorial-row{ grid-template-columns:1fr; gap:40px; } .editorial-row.rev{ direction:ltr; } }

/* ---------- generic icon-feature grid ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feat-grid-5{ grid-template-columns:repeat(5,1fr); }
/* Column counts live here rather than in a style attribute: an inline
   grid-template-columns outranks every media query below, which is why these
   grids stayed at their desktop column count all the way down to a phone. */
.feat-grid-4{ grid-template-columns:repeat(4,1fr); }
.flow-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.feat-item{ padding:26px 24px; border-radius:20px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.feat-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.feat-item-icon{ width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 10px 22px -8px rgba(80,40,200,.4); }
/* Centred feature sections: centre the icon with the text. */
#monetize .feat-item-icon,
#intelligence .feat-item-icon{ margin-left:auto; margin-right:auto; }
.feat-item h4{ font-size:15.5px; font-weight:800; color:var(--ink); }
.feat-item p{ margin-top:6px; font-size:13px; color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .feat-grid{ grid-template-columns:1fr 1fr; } .feat-grid-5{ grid-template-columns:repeat(3,1fr); } .feat-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feat-grid{ grid-template-columns:1fr; } .feat-grid-5{ grid-template-columns:1fr 1fr; } .feat-grid-4{ grid-template-columns:1fr; } .flow-stat-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- block preview (Publishing Blocks page) ---------- */
.block-showcase{ display:flex; flex-direction:column; gap:100px; }
.block-row{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.block-row.rev{ grid-template-columns:1.15fr 0.85fr; }
.block-row.rev .block-preview{ order:2; }
.block-tag{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--purple); background:var(--grad-soft); border:1px solid rgba(123,0,255,.16); padding:7px 14px; border-radius:100px; }
.block-row h3{ font-size:26px; font-weight:800; margin-top:16px; color:var(--ink); }
.block-row p{ margin-top:12px; color:var(--muted); font-size:15px; line-height:1.7; max-width:440px; }
.block-points{ margin-top:18px; display:flex; flex-direction:column; gap:10px; max-width:440px; }
.block-points li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.block-points li::before{ content:''; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--grad); }
.block-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:14px; font-weight:800; color:var(--purple); text-decoration:none; }
.block-cta svg{ width:15px; height:15px; transition:transform .25s ease; }
.block-cta:hover svg{ transform:translateX(4px); }
.block-preview{ border-radius:22px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-lg); padding:22px; }
.bp-featured{ display:flex; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.bp-featured .thumb{ width:110px; height:78px; border-radius:12px; background:var(--bg-lav); flex-shrink:0; }
.bp-featured .lines{ flex:1; }
.bp-line{ height:8px; border-radius:4px; background:var(--line); margin-bottom:8px; }
.bp-line.w60{ width:60%; } .bp-line.w80{ width:80%; } .bp-line.w40{ width:40%; } .bp-line.title{ height:11px; background:#DCD3FA; width:85%; }
.bp-list-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.bp-list-item:last-child{ border-bottom:none; }
.bp-list-item .thumb{ width:52px; height:40px; border-radius:8px; background:var(--bg-lav); flex-shrink:0; }
.bp-rank{ width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bp-toc{ display:flex; flex-direction:column; gap:4px; }
.bp-toc a{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:9px 12px 9px 18px; border-radius:10px; font-size:13px; font-weight:600; color:var(--ink-soft); transition:background .2s ease, color .2s ease; }
.bp-toc a::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background:var(--grad); opacity:.25; transition:opacity .2s ease; }
.bp-toc a:hover{ background:var(--bg-lav); color:var(--purple); }
.bp-toc a:hover::before{ opacity:.6; }
.bp-toc a.active{ background:var(--bg-lav); color:var(--purple); font-weight:800; }
.bp-toc a.active::before{ opacity:1; }
.bp-cta{ border-radius:16px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; padding:22px; text-align:center; }
.bp-cta h5{ font-size:15px; font-weight:800; } .bp-cta p{ font-size:12.5px; opacity:.85; margin-top:4px; }
.bp-cta .btn{ margin-top:14px; background:#fff; color:var(--purple); padding:10px 20px; font-size:13px; }
.bp-compare{ width:100%; border-collapse:collapse; font-size:13px; }
.bp-compare th, .bp-compare td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.bp-compare th{ color:var(--muted); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
.bp-compare td{ font-weight:600; color:var(--ink); }
.bp-compare .yes{ color:#22B573; } .bp-compare .no{ color:#C7C6DA; }
@media (max-width:900px){ .block-row, .block-row.rev{ grid-template-columns:1fr; gap:26px; } .block-row.rev .block-preview{ order:0; } }

/* ---------- blog cards ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.blog-card-thumb{ aspect-ratio:16/10; background:var(--bg-lav); position:relative; overflow:hidden; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card-thumb img{ transform:scale(1.06); }
.blog-card-cat{ position:absolute; top:14px; left:14px; padding:6px 13px; border-radius:100px; font-size:11px; font-weight:800; color:#fff; background:var(--grad); }
.blog-card-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.blog-card-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-weight:600; }
.blog-card h4{ font-size:17px; font-weight:800; margin-top:10px; line-height:1.35; color:var(--ink); }
.blog-card p{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.6; flex:1; }
.blog-card-link{ margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--purple); }
.blog-card-link svg{ transition:transform .25s ease; }
.blog-card:hover .blog-card-link svg{ transform:translateX(3px); }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-featured{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; border-radius:28px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); overflow:hidden; margin-bottom:0; }
.blog-featured-media{ aspect-ratio:4/3; background:var(--bg-lav); overflow:hidden; }
.blog-featured-media img{ width:100%; height:100%; object-fit:cover; }
.blog-featured-body{ padding:12px 44px 12px 4px; }
@media (max-width:900px){ .blog-featured{ grid-template-columns:1fr; } .blog-featured-body{ padding:0 28px 28px; } }

/* ---------- article (blog details) ---------- */
.article-layout{ display:grid; grid-template-columns:1fr 280px; gap:60px; align-items:start; text-align:left; }
.article-layout > *{ min-width:0; }
.article-left{ min-width:0; }
.article-header{ margin:0 0 36px; text-align:left; }
.article-header h1{ font-size:clamp(28px,4vw,44px) !important; font-weight:700 !important; margin-top:16px; line-height:1.2; }
.article-meta{ display:flex; align-items:center; justify-content:flex-start; gap:18px; margin-top:16px; font-size:13.5px; color:var(--muted); font-weight:600; flex-wrap:wrap; }
.article-meta span{ display:inline-flex; align-items:center; gap:6px; }
.article-featured-img{ border-radius:24px; overflow:hidden; margin:0 0 48px; width:100%; height:500px; box-shadow:var(--shadow-lg); }
.article-featured-img img{ width:100%; height:100%; display:block; object-fit:cover; }
.article-body{ max-width:none; color:var(--ink-soft); font-size:16.5px; line-height:1.85; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:44px 48px; }
@media (max-width:640px){ .article-body{ padding:28px 22px; } }
.article-body h2{ font-size:27px !important; font-weight:800 !important; margin:52px 0 18px; color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); letter-spacing:-.01em; }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ font-size:20px !important; font-weight:800 !important; margin:34px 0 12px; color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); }
.article-body p{ margin-bottom:20px; }
.article-body ul{ margin:0 0 20px 20px; display:flex; flex-direction:column; gap:8px; }
.article-body li{ list-style:disc; }
.article-inline-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:36px 0; padding:26px 30px; border-radius:20px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; }
.article-inline-cta h5{ font-size:16px; font-weight:800; } .article-inline-cta p{ font-size:13px; opacity:.85; margin:0; }
.article-inline-cta .btn{ background:#fff; color:var(--purple); flex-shrink:0; }
.article-sidebar{ position:sticky; top:100px; display:flex; flex-direction:column; gap:26px; }
.sidebar-card{ border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; }
.sidebar-card h6{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.article-share{ display:flex; gap:10px; }
.article-share a{ width:36px; height:36px; border-radius:50%; background:var(--bg-lav); color:var(--purple); display:flex; align-items:center; justify-content:center; transition:.25s; }
.article-share a:hover{ background:var(--grad); color:#fff; transform:translateY(-2px); }

/* Article page — modern prev/next navigation */
/* ---------- Previous/Next article navigation: true 3-column grid (left | divider | right) ---------- */
.article-nav2{ position:relative; display:grid; grid-template-columns:1fr 76px 1fr; align-items:stretch; min-height:300px; margin:48px 0 150px; padding:0; border-radius:30px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; }
.an2-wave-a{ position:absolute; left:0; top:0; width:50%; height:100%; background:radial-gradient(ellipse at 25% 50%, rgba(123,0,255,.05), transparent 72%); z-index:0; pointer-events:none; }
.an2-wave-b{ position:absolute; right:0; top:0; width:50%; height:100%; background:radial-gradient(ellipse at 75% 50%, rgba(58,180,255,.05), transparent 72%); z-index:0; pointer-events:none; }

.an2-side{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; min-width:0; padding:40px; text-decoration:none; }
.an2-arrow-box{ width:76px; height:76px; border-radius:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
.an2-arrow-prev{ background:linear-gradient(135deg,#EFE7FF,#DCC9FF); color:var(--purple); }
.an2-arrow-next{ background:linear-gradient(135deg,#DEEDFF,#BFDDFF); color:#1C5FE0; }
.an2-prev:hover .an2-arrow-box{ transform:translateX(-4px); }
.an2-next:hover .an2-arrow-box{ transform:translateX(4px); }

.an2-content{ min-width:0; flex:1; text-align:left; }
.an2-next .an2-content{ text-align:right; }
.an2-label{ position:relative; display:inline-block; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); padding-bottom:9px; margin-bottom:14px; }
.an2-next .an2-label{ color:#1C5FE0; }
.an2-label::after{ content:''; position:absolute; left:0; bottom:0; width:32px; height:2.5px; border-radius:2px; background:var(--purple); }
.an2-next .an2-label::after{ left:auto; right:0; background:#1C5FE0; }
.an2-content h5{ font-size:27px; font-weight:800; color:var(--ink); line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.an2-read{ display:inline-flex; align-items:center; gap:5px; margin-top:16px; font-size:14.5px; font-weight:700; color:var(--purple); }
.an2-next .an2-read{ color:#1C5FE0; flex-direction:row-reverse; }

.an2-divider{ position:relative; z-index:1; display:flex; align-items:stretch; justify-content:center; padding:36px 0; }
.an2-divider-line{ width:1px; background:var(--line); }
.an2-divider-circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:#fff; box-shadow:0 10px 26px rgba(20,10,70,.12); display:flex; align-items:center; justify-content:center; color:var(--purple); z-index:2; }

@media (max-width:1024px){
  .article-nav2{ grid-template-columns:1fr 60px 1fr; min-height:260px; }
  .an2-side{ padding:30px 26px; gap:16px; }
  .an2-arrow-box{ width:60px; height:60px; border-radius:16px; }
  .an2-content h5{ font-size:21px; }
  .an2-divider-circle{ width:46px; height:46px; }
}
@media (max-width:760px){
  .article-nav2{ grid-template-columns:1fr; }
  .an2-divider{ display:none; }
  .an2-side{ padding:26px 24px; justify-content:flex-start; }
  .an2-side + .an2-side{ border-top:1px solid var(--line); }
  .an2-next{ flex-direction:row; text-align:left; }
  .an2-next .an2-content{ text-align:left; }
  .an2-next .an2-label::after{ left:0; right:auto; }
  .an2-next .an2-read{ flex-direction:row; }
}

.article-nav{ display:flex; justify-content:space-between; gap:20px; margin:60px auto 0; max-width:720px; padding-top:30px; border-top:1px solid var(--line); }
.article-nav a{ display:flex; flex-direction:column; gap:6px; max-width:45%; }
.article-nav a:last-child{ text-align:right; align-items:flex-end; }
.article-nav small{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--purple); }
.article-nav span{ font-size:14.5px; font-weight:700; color:var(--ink); }
@media (max-width:960px){ .article-layout{ grid-template-columns:1fr; } .article-sidebar{ position:static; flex-direction:column; } .sidebar-card{ width:100%; } .article-featured-img{ width:100%; height:380px; } }
@media (max-width:640px){ .article-featured-img{ height:280px; } }

/* Article page — category badge + updated date */
.article-cat-badge{ display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:100px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--bg-lav); color:var(--purple); margin-bottom:16px; }

/* Article page — modern badge pill + meta info card */
.article-badge-pill{ display:inline-flex; align-items:center; gap:12px; padding:8px 22px 8px 8px; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:0 4px 16px rgba(20,10,70,.06); margin-bottom:22px; }
.article-badge-pill .badge-icon-circle{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#3AB4FF,#7B00FF); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.article-badge-pill .badge-label{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--purple); font-size:13.5px; }
.article-badge-pill .badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--purple); flex-shrink:0; }

.article-meta-card{ display:flex; align-items:center; flex-wrap:wrap; gap:0; background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:0 6px 22px rgba(20,10,70,.07); padding:22px 30px; position:relative; overflow:hidden; margin-bottom:28px; }
.article-meta-card::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px; background:var(--grad); }
.meta-item{ display:flex; align-items:center; gap:14px; padding:6px 26px; }
.meta-item:first-child{ padding-left:14px; }
.meta-item + .meta-item{ border-left:1px solid var(--line); }
.meta-icon{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.meta-text{ display:flex; flex-direction:column; }
.meta-label{ font-size:12px; color:var(--muted); font-weight:600; }
.meta-value{ font-size:15px; font-weight:800; color:var(--ink); margin-top:2px; white-space:nowrap; }
@media (max-width:760px){ .article-meta-card{ padding:18px; } .meta-item{ padding:8px 18px; flex:1 1 45%; } .meta-item + .meta-item{ border-left:none; } }
@media (max-width:480px){ .meta-item{ flex:1 1 100%; } }

/* Article page — checklist (problem/good lists with check icon) */
.article-checklist{ list-style:none !important; margin:20px 0 30px !important; display:flex; flex-direction:column; gap:12px !important; }
.article-checklist li{ list-style:none !important; display:flex; align-items:flex-start; gap:12px; font-size:15.5px; }
.article-checklist .ck-icon{ width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; box-shadow:0 3px 8px rgba(20,10,70,.08); }
.article-checklist.is-bad .ck-icon{ background:linear-gradient(135deg,#FF7A6B,#E1493B); color:#fff; }
.article-checklist.is-good .ck-icon{ background:linear-gradient(135deg,#4FD897,#22B573); color:#fff; }
.article-callout{ display:flex; align-items:center; gap:16px; margin:32px 0; padding:22px 26px; border-radius:18px; background:linear-gradient(135deg,#F6F3FF,#F0F6FF); border:1px solid rgba(123,0,255,.15); font-weight:600; font-size:15px; color:var(--ink); }
.article-callout .callout-icon{ width:40px; height:40px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 8px 18px -4px rgba(123,0,255,.4); }

/* Article page — 4-col icon grid */
.article-icon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:26px 0 38px; }
.article-icon-card{ padding:22px 20px; border-radius:18px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.article-icon-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.article-icon-card .aig-icon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:#fff; box-shadow:0 8px 16px -4px rgba(20,10,70,.22); }
.article-icon-card:nth-child(4n+1) .aig-icon{ background:linear-gradient(135deg,#3AB4FF,#7B00FF); }
.article-icon-card:nth-child(4n+2) .aig-icon{ background:linear-gradient(135deg,#9B4CFF,#D000FF); }
.article-icon-card:nth-child(4n+3) .aig-icon{ background:linear-gradient(135deg,#4FC3FF,#4338CA); }
.article-icon-card:nth-child(4n+4) .aig-icon{ background:linear-gradient(135deg,#FF3DD8,#7B00FF); }
.article-icon-card h5{ font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:4px; }
.article-icon-card p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.5; }
@media (max-width:760px){ .article-icon-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .article-icon-grid{ grid-template-columns:1fr; } }

/* Article page — 2-col type cards */
.article-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 38px; }
.article-type-card{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; border-radius:16px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.article-type-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.article-type-card .atc-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; box-shadow:0 8px 16px -4px rgba(20,10,70,.22); }
.article-type-card:nth-child(6n+1) .atc-icon{ background:linear-gradient(135deg,#3AB4FF,#7B00FF); }
.article-type-card:nth-child(6n+2) .atc-icon{ background:linear-gradient(135deg,#9B4CFF,#D000FF); }
.article-type-card:nth-child(6n+3) .atc-icon{ background:linear-gradient(135deg,#4FC3FF,#4338CA); }
.article-type-card:nth-child(6n+4) .atc-icon{ background:linear-gradient(135deg,#FF3DD8,#7B00FF); }
.article-type-card:nth-child(6n+5) .atc-icon{ background:linear-gradient(135deg,#4FD897,#22B573); }
.article-type-card:nth-child(6n+6) .atc-icon{ background:linear-gradient(135deg,#FFB84F,#FF7A3D); }
.article-type-card h5{ font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.article-type-card p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.5; }
@media (max-width:640px){ .article-type-grid{ grid-template-columns:1fr; } }

/* Article page — how-to layout (steps + pro tip) */
.article-howto{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; margin:26px 0 38px; align-items:start; }
.article-steps{ display:flex; flex-direction:column; gap:22px; }
.article-step{ display:flex; align-items:flex-start; gap:16px; }
.article-step-num{ width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13.5px; flex-shrink:0; box-shadow:0 8px 16px -4px rgba(123,0,255,.4); }
.article-step h5{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.article-step p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.5; }
.article-protip{ padding:26px; border-radius:20px; background:linear-gradient(160deg,#F6F3FF,#F0F6FF); border:1px solid rgba(123,0,255,.15); position:relative; overflow:hidden; }
.article-protip::before{ content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px; border-radius:50%; background:var(--grad); opacity:.12; }
.article-protip h6{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--purple); margin-bottom:12px; position:relative; }
.article-protip p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; position:relative; }
@media (max-width:760px){ .article-howto{ grid-template-columns:1fr; } }

/* Article page — inline dark newsletter CTA bar */
.article-cta-bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:44px 0 0; padding:30px 34px; border-radius:22px; background:linear-gradient(135deg, #0D0E28, #16123A 55%, #1C0F35); border:1px solid rgba(123,0,255,.35); }
.article-cta-bar-left{ display:flex; align-items:center; gap:18px; }
.article-cta-bar-icon{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#3AB4FF,#7B00FF); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.article-cta-bar h5{ font-size:17px; font-weight:800; color:#fff; }
.article-cta-bar p{ font-size:13px; color:rgba(255,255,255,.55); margin-top:4px; max-width:360px; }
.article-cta-bar-form{ display:flex; gap:8px; background:rgba(255,255,255,.06); padding:6px; border-radius:100px; border:1px solid rgba(255,255,255,.14); }
.article-cta-bar-form input{ padding:10px 16px; border-radius:100px; border:none; background:transparent; color:#fff; font-size:13.5px; outline:none; min-width:180px; }
.article-cta-bar-form input::placeholder{ color:rgba(255,255,255,.4); }
.article-cta-bar-form button{ white-space:nowrap; }
@media (max-width:760px){ .article-cta-bar{ flex-direction:column; align-items:flex-start; } .article-cta-bar-form{ width:100%; } .article-cta-bar-form input{ flex:1; min-width:0; } }

/* Article page — sidebar CTA + newsletter + popular articles */
.article-sidebar-cta h5{ font-size:16px; font-weight:800; color:#fff; line-height:1.35; }
.article-sidebar-cta p{ font-size:13px; color:rgba(255,255,255,.75); margin:10px 0 16px; line-height:1.55; }
.sidebar-news-input{ width:100%; padding:11px 16px; border-radius:11px; border:1px solid var(--line); font-size:13.5px; margin-bottom:10px; outline:none; }
.sidebar-news-input::placeholder{ color:var(--muted); }
.popular-article-item{ display:flex; gap:12px; align-items:center; }
.popular-article-item + .popular-article-item{ margin-top:14px; }
.popular-article-thumb{ width:54px; height:54px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--bg-lav); }
.popular-article-item h6{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.4; text-transform:none; letter-spacing:0; margin:0; }
.popular-article-item span{ display:block; font-size:11px; color:var(--muted); margin-top:4px; }

/* ---------- FAQ / support ---------- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; font-weight:700; font-size:15px; color:var(--ink); }
.faq-q svg{ flex-shrink:0; transition:transform .3s ease; color:var(--purple); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 24px 20px; color:var(--muted); font-size:14.5px; line-height:1.7; }
.support-topics{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .support-topics{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .support-topics{ grid-template-columns:1fr; } }
.support-topic{ padding:26px; border-radius:18px; border:1px solid var(--line); background:#fff; text-align:left; transition:transform .3s ease, box-shadow .3s ease; }
.support-topic:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(123,0,255,.25); }
.support-topic-icon{ width:42px; height:42px; border-radius:12px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.support-topic h5{ font-size:14.5px; font-weight:800; color:var(--ink); }
.support-topic p{ margin-top:6px; font-size:12.5px; color:var(--muted); }

/* ---------- auth pages ---------- */
/* ---------- Auth pages v2: light floating-card design (login & signup) ---------- */
.auth2-section{ position:relative; padding:150px 20px 90px; background:linear-gradient(150deg, #F0F8FF, #F6F5FF 55%, #FBF3FF); overflow:hidden; }
.auth2-section::before{ content:''; position:absolute; top:60px; right:6%; width:130px; height:110px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.16; pointer-events:none; }
.auth2-section::after{ content:''; position:absolute; top:10%; left:26%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(123,0,255,.06), transparent 70%); pointer-events:none; }
.auth2-grid{ position:relative; z-index:1; max-width:1220px; margin:0 auto; display:grid; grid-template-columns:1fr 440px; gap:70px; align-items:start; }

.auth2-badge{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:9px 18px; border-radius:100px; font-size:13px; font-weight:700; color:var(--purple); box-shadow:var(--shadow); }
.auth2-badge svg{ width:16px; height:16px; flex-shrink:0; }
.auth2-heading{ margin-top:20px; max-width:560px; font-size:clamp(30px,4vw,44px); font-weight:800; line-height:1.15; color:var(--ink); }
.auth2-heading span{ display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth2-sub{ margin-top:14px; color:var(--muted); font-size:15px; max-width:560px; line-height:1.6; }

.auth2-mock-card{ margin-top:36px; background:#fff; border-radius:20px; border:1px solid var(--line); box-shadow:0 24px 50px -20px rgba(30,10,80,.16); padding:20px; max-width:560px; }
.auth2-mock-top{ display:flex; align-items:center; justify-content:space-between; }
.auth2-mock-logo{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--ink); }
.auth2-mock-logo span{ width:16px; height:16px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.auth2-mock-dots{ display:flex; gap:4px; }
.auth2-mock-dots i{ width:4px; height:4px; border-radius:50%; background:var(--line); display:block; }
.auth2-mock-search{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; background:#F6F5FB; border-radius:100px; padding:12px 16px; color:var(--muted); font-size:13px; }
.auth2-mock-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.auth2-mock-item{ background:#F8F7FC; border-radius:14px; padding:14px 10px; text-align:left; }
.auth2-mock-item-icon{ width:36px; height:36px; border-radius:10px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; }
.auth2-mock-item-icon svg{ width:17px; height:17px; }
.auth2-mock-item h6{ margin-top:10px; font-size:12.5px; font-weight:800; color:var(--ink); }
.auth2-mock-item p{ margin-top:3px; font-size:10px; color:var(--muted); line-height:1.35; }

.auth2-stats{ position:relative; z-index:1; margin-top:28px; max-width:560px; display:flex; gap:26px; flex-wrap:wrap; }
.auth2-stat{ display:flex; align-items:center; gap:10px; }
.auth2-stat-icon{ width:36px; height:36px; border-radius:10px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth2-stat-icon svg{ width:16px; height:16px; }
.auth2-stat b{ display:block; font-size:17px; font-weight:800; color:var(--purple); }
.auth2-stat span{ display:block; font-size:11.5px; color:var(--muted); }

.auth2-bottom{ position:relative; z-index:1; margin-top:32px; max-width:560px; }
.auth2-bottom p:first-child{ font-weight:800; color:var(--ink); font-size:14.5px; }
.auth2-bottom p:last-child{ margin-top:4px; color:var(--muted); font-size:13.5px; line-height:1.6; }

.auth2-form-card{ position:relative; z-index:1; background:#fff; border-radius:24px; border:1px solid var(--line); box-shadow:0 30px 60px -24px rgba(30,10,80,.18); padding:44px 40px; }
.auth2-form-card h2{ font-size:28px; font-weight:800; color:var(--ink); }
.auth2-form-card h2 span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth2-form-card > p{ margin-top:8px; color:var(--muted); font-size:14.5px; line-height:1.6; }

@media (max-width:960px){ .auth2-grid{ grid-template-columns:1fr; } .auth2-form-card{ max-width:460px; margin:0 auto; } }
@media (max-width:640px){ .auth2-section{ padding:120px 16px 60px; } .auth2-mock-grid{ grid-template-columns:1fr 1fr; } .auth2-form-card{ padding:34px 24px; } }
.auth-visual{ position:relative; background:linear-gradient(160deg,#0B0D24,#16123A 55%,#1C0F35); display:flex; flex-direction:column; justify-content:space-between; padding:64px 60px 60px; color:#fff; overflow:hidden; }
.auth-visual::before{ content:''; position:absolute; top:-100px; right:-100px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,#00A8FF,transparent 70%); opacity:.28; filter:blur(20px); z-index:0; }
.auth-visual::after{ content:''; position:absolute; bottom:-120px; left:-100px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,#D000FF,transparent 70%); opacity:.24; filter:blur(20px); z-index:0; }
.auth-visual-top{ position:relative; z-index:1; }
.auth-visual-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:56px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:8px 18px; border-radius:100px; }
.auth-mock{ position:relative; z-index:1; margin-top:34px; background:#15132E; border-radius:16px 16px 4px 4px; padding:10px 10px 0; box-shadow:0 40px 70px -24px rgba(0,0,0,.5); }
.auth-mock-inner{ background:#fff; border-radius:8px 8px 0 0; overflow:hidden; }
.auth-mock-base{ height:14px; background:linear-gradient(180deg,#2A2750,#1C1A3C); border-radius:0 0 10px 10px; }
.auth-stat-row{ position:relative; z-index:1; display:flex; gap:36px; margin-top:40px; }
.auth-stat b{ display:block; font-size:24px; font-weight:800; background:linear-gradient(90deg,#4FC3FF,#D000FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth-stat span{ display:block; margin-top:4px; font-size:12.5px; color:rgba(255,255,255,.55); }
.auth-visual-quote{ position:relative; z-index:1; }
.auth-visual-quote h3{ font-size:20px; font-weight:700; line-height:1.4; }
.auth-visual-quote p{ margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.6; }

.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:150px 40px 60px; }
.auth-form-wrap{ width:100%; max-width:400px; }
.auth-form-wrap h2{ font-size:28px; font-weight:800; color:var(--ink); }
.auth-form-wrap > p{ margin-top:8px; color:var(--muted); font-size:14.5px; }
.field-group{ margin-top:20px; }
.field-group label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px; }

/* The auth screens style their fields through .auth-input-wrap; the contact and
   checkout forms use a bare .field-group, which had no input rule at all and so
   fell back to the browser's default control. Same visual language as
   .auth-input-wrap input, minus the icon inset. */
.field-group input,
.field-group textarea,
.field-group select{
  width:100%;
  padding:13px 16px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:14.5px;
  line-height:1.5;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance:none;
  appearance:none;
}

.field-group textarea{ resize:vertical; min-height:132px; }

.field-group input::placeholder,
.field-group textarea::placeholder{ color:var(--muted); opacity:.75; }

.field-group input:hover,
.field-group textarea:hover,
.field-group select:hover{ border-color:rgba(123,0,255,.28); }

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(123,0,255,.12);
  background:#fff;
}

/* :user-invalid rather than :invalid — the latter reddens every required field
   before the visitor has typed anything. */
.field-group input:user-invalid,
.field-group textarea:user-invalid{ border-color:#FF3D71; box-shadow:0 0 0 4px rgba(255,61,113,.10); }

/* Chrome paints its own yellow autofill ground over the field. */
.field-group input:-webkit-autofill,
.field-group input:-webkit-autofill:hover,
.field-group input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  caret-color:var(--ink);
}

/* Native arrow is removed by appearance:none, so draw one back. */
.field-group select{
  padding-right:42px;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.auth-input-wrap{ position:relative; }
.auth-input-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; display:flex; }
.auth-input-wrap input{ width:100%; padding:13px 16px 13px 44px; border-radius:12px; border:1.5px solid var(--line); font-size:14.5px; outline:none; transition:border-color .2s ease; background:#fff; color:var(--ink); }
.auth-input-wrap input:focus{ border-color:var(--purple); }
.auth-pass-toggle{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; padding:2px; cursor:pointer; color:var(--muted); display:flex; }
.auth-pass-toggle:hover{ color:var(--ink); }
.field-row-between{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; font-size:13.5px; }
.field-check{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); }
.field-check input{ accent-color:var(--purple); width:16px; height:16px; }
.auth2-form-card .btn{ width:100%; margin-top:20px; padding:15px; }
.auth-divider{ display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--muted); font-size:12px; font-weight:700; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.btn-social{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px; border-radius:12px; border:1.5px solid var(--line); font-weight:700; font-size:14px; color:var(--ink); background:#fff; transition:border-color .2s ease, transform .2s ease; }
.btn-social:hover{ border-color:var(--purple); transform:translateY(-1px); }
.auth-bottom{ text-align:center; margin-top:26px; font-size:14px; color:var(--muted); }
.auth-bottom a{ color:var(--purple); font-weight:800; text-decoration:none; }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } .auth-visual{ display:none; } }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } .auth-visual{ display:none; } }

/* ---------- account dashboard ---------- */
.dash-shell{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }
.dash-sidebar{ position:sticky; top:100px; border:1px solid var(--line); border-radius:20px; background:#fff; padding:14px; display:flex; flex-direction:column; gap:2px; }
.dash-sidebar a{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; font-size:14px; font-weight:700; color:var(--ink-soft); transition:background .2s ease, color .2s ease; }
.dash-sidebar a svg{ flex-shrink:0; }
.dash-sidebar a:hover{ background:var(--bg-lav); color:var(--ink); }
.dash-sidebar a.active{ background:var(--grad); color:#fff; box-shadow:0 10px 22px -8px rgba(123,0,255,.45); }
.dash-card{ border:1px solid var(--line); border-radius:20px; background:#fff; padding:28px; box-shadow:var(--shadow); }
.dash-card + .dash-card{ margin-top:22px; }
.dash-card h3{ font-size:18px !important; font-weight:800 !important; }
.dash-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap; }
.dash-row:last-child{ border-bottom:none; }
.dash-row-label{ font-size:13px; color:var(--muted); font-weight:600; }
.dash-row-value{ font-size:14.5px; font-weight:800; color:var(--ink); }
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:100px; font-size:12px; font-weight:800; }
.status-pill.active{ background:rgba(34,181,115,.12); color:#22B573; }
.status-pill.active .dot{ width:6px; height:6px; border-radius:50%; background:#22B573; }
.quick-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.quick-action{ display:flex; align-items:center; gap:14px; padding:18px; border-radius:16px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.quick-action:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.quick-action-icon{ width:38px; height:38px; border-radius:11px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quick-action span{ font-size:13.5px; font-weight:700; color:var(--ink); }
.product-card{ display:flex; align-items:center; gap:20px; padding:22px; border-radius:18px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; }
.product-card-icon{ width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.product-card h4{ font-size:17px; font-weight:800; } .product-card p{ font-size:12.5px; opacity:.85; margin-top:2px; }
.stats-row-4{ grid-template-columns:repeat(4,1fr); margin-bottom:26px; }
@media (max-width:860px){ .dash-shell{ display:block; } .dash-sidebar{ position:static; flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin-bottom:20px; } .dash-sidebar a{ flex-shrink:0; } .quick-actions{ grid-template-columns:1fr; } }
@media (max-width:640px){ .stats-row-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .stats-row-4{ grid-template-columns:1fr; } }

.license-key{ display:flex; align-items:center; gap:10px; font-family:monospace; font-size:14px; letter-spacing:.05em; color:var(--ink); background:var(--bg-lav); padding:10px 16px; border-radius:10px; }

/* ---------- cart / checkout ---------- */
.cart-layout{ display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start; }
.cart-item{ display:flex; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.cart-item-thumb{ width:100px; height:72px; border-radius:12px; overflow:hidden; flex-shrink:0; background:var(--bg-lav); }
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item-body{ flex:1; min-width:0; }
.cart-item-body h4{ font-size:15.5px; font-weight:800; color:var(--ink); }
.cart-item-body p{ font-size:13px; color:var(--muted); margin-top:4px; }
.cart-item-price{ font-size:16px; font-weight:800; color:var(--ink); flex-shrink:0; }
.cart-item-remove{ color:var(--muted); flex-shrink:0; transition:color .2s ease; }
.cart-item-remove:hover{ color:#FF3D71; }
.order-summary{ border:1px solid var(--line); border-radius:20px; background:#fff; padding:26px; box-shadow:var(--shadow); position:sticky; top:100px; }
.order-summary h4{ font-size:16px; font-weight:800; margin-bottom:18px; }
.order-row{ display:flex; justify-content:space-between; padding:9px 0; font-size:14px; color:var(--ink-soft); }
.order-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:17px; font-weight:800; color:var(--ink); }
.order-summary .btn{ width:100%; margin-top:20px; }
.cart-empty{ text-align:center; padding:80px 20px; }
.cart-empty svg{ color:var(--muted); margin-bottom:18px; }
.cart-empty h3{ font-size:22px !important; font-weight:800 !important; } .cart-empty p{ color:var(--muted); margin-top:8px; }
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr; } .order-summary{ position:static; } }

.checkout-layout{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:50px; align-items:start; }
.checkout-section{ margin-bottom:34px; }
.checkout-section h3{ font-size:16px !important; font-weight:800 !important; margin-bottom:16px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field-grid .field-group{ margin-top:0; }
.payment-placeholder{ border:1.5px dashed var(--line); border-radius:16px; padding:30px; text-align:center; color:var(--muted); font-size:13.5px; }
.payment-placeholder svg{ margin-bottom:10px; color:var(--purple); }
@media (max-width:900px){ .checkout-layout{ grid-template-columns:1fr; } .field-grid{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 0.7fr; gap:60px; align-items:start; }
.contact-side{ display:flex; flex-direction:column; gap:16px; }
.contact-side-card{ display:flex; gap:16px; padding:28px; border-radius:18px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.contact-side-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.contact-side-icon{ width:44px; height:44px; border-radius:13px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-side-card h5{ font-size:14.5px; font-weight:800; color:var(--ink); }
.contact-side-card p{ font-size:12.5px; color:var(--muted); margin-top:4px; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }

/* ---------- generic pagination reuse alias ---------- */
.simple-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:50px; }

/* Blog page — stats row */
.blog-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.blog-stat-item{ display:flex; align-items:center; gap:16px; padding:26px 22px; border-radius:20px; border:1px solid var(--line); background:#fff; box-shadow:0 2px 14px rgba(20,10,70,.05); text-align:left; }
.blog-stat-icon{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg-lav); background:color-mix(in srgb, var(--c) 12%, white); color:var(--c); }
.blog-stat-icon svg{ width:22px; height:22px; }
.blog-stat-text{ min-width:0; }
.blog-stat-value{ display:block; font-size:26px; font-weight:800; color:var(--c); line-height:1.15; }
.blog-stat-label{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); font-weight:600; }
@media (max-width:900px){ .blog-stats-row{ grid-template-columns:repeat(3,1fr); gap:20px; } }
@media (max-width:760px){ .blog-stats-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .blog-stats-row{ grid-template-columns:1fr; } }

/* Blog page — hero */
.blog-hero{ position:relative; padding:150px 0 60px; overflow:hidden; background:linear-gradient(160deg, #F6F5FF, #F0F8FF); }
.blog-hero-blob{ position:absolute; top:-140px; right:-180px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(123,0,255,.16), transparent 70%); z-index:0; pointer-events:none; }
.blog-hero-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:60px; align-items:center; position:relative; z-index:1; }
.blog-hero-title{ font-size:clamp(34px,7.4vw,90px) !important; font-weight:800 !important; line-height:1.15; letter-spacing:-0.03em; margin:0; padding-top:6px; background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, var(--purple) 75%, var(--magenta) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.blog-hero-underline{ width:64px; height:4px; border-radius:4px; background:var(--grad); margin-top:16px; }
.blog-hero-sub{ margin-top:22px; font-size:15px; line-height:1.7; color:var(--muted); max-width:none; }
.blog-hero-badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.blog-hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:100px; background:rgba(123,0,255,.08); color:var(--ink); font-size:13.5px; font-weight:700; border:1px solid rgba(123,0,255,.12); }
.blog-hero-badge svg{ width:16px; height:16px; color:var(--purple); flex-shrink:0; }
.blog-hero-visual{ position:relative; }
.blog-hero-visual img{ width:100%; border-radius:24px; box-shadow:var(--shadow-lg); display:block; border:1px solid var(--line); }
.bh-illustration{ position:relative; width:100%; max-width:600px; margin:0 auto; aspect-ratio:1.35/1; }
.bh-dots-deco{ position:absolute; top:2%; right:0; width:150px; height:110px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.28; z-index:0; }
.bh-laptop{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:76%; z-index:2; }
.bh-screen{ background:#fff; border:9px solid var(--ink); border-bottom:none; border-radius:18px 18px 0 0; overflow:hidden; box-shadow:var(--shadow-lg); }
.bh-screen-topbar{ background:var(--grad); color:#fff; font-weight:800; font-size:16px; padding:16px 20px; letter-spacing:-0.01em; }
.bh-screen-body{ padding:18px 20px 24px; }
.bh-screen-row{ display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.bh-screen-row:last-child{ margin-bottom:0; }
.bh-screen-thumb{ width:58px; height:46px; border-radius:9px; flex-shrink:0; }
.bh-thumb-a{ background:linear-gradient(135deg,#9FC9FF,#4F87F7); }
.bh-thumb-b{ background:linear-gradient(135deg,#3A3A6E,#1C1C3A); }
.bh-screen-lines{ flex:1; }
.bh-laptop-base{ height:18px; background:linear-gradient(180deg,#4a4a5f,#1c1c28); border-radius:0 0 12px 12px; position:relative; }
.bh-laptop-base::after{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:64px; height:7px; background:#0A0B1E; border-radius:0 0 7px 7px; }
.bh-mug{ position:absolute; left:-4%; bottom:30%; width:20%; z-index:3; filter:drop-shadow(0 14px 20px rgba(20,10,70,.14)); }
.bh-plant{ position:absolute; right:2%; bottom:40%; width:16%; z-index:3; filter:drop-shadow(0 14px 20px rgba(20,10,70,.14)); }
.bh-notebook{ position:absolute; right:-6%; bottom:10%; width:36%; z-index:3; filter:drop-shadow(0 14px 20px rgba(20,10,70,.14)); }
.bh-mug svg, .bh-plant svg, .bh-notebook svg{ width:100%; height:auto; display:block; }

/* Blog page — toolbar (title + filters + search in one aligned row) */
.blog-toolbar{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.blog-toolbar-title{ font-size:22px; font-weight:800; flex-shrink:0; margin:0; }
.blog-toolbar .catalog-filters{ flex:1 1 auto; justify-content:flex-start; min-width:240px; }
.blog-toolbar .catalog-search{ flex:0 1 260px; margin-left:auto; }
@media (max-width:760px){ .blog-toolbar{ flex-direction:column; align-items:stretch; } .blog-toolbar .catalog-search{ margin-left:0; flex:1 1 auto; max-width:none; } }

/* Blog page — newsletter card */
.blog-newsletter-card{ background:#fff; border-radius:28px; padding:56px 48px; box-shadow:var(--shadow-lg); border:1px solid var(--line); }
@media (max-width:640px){ .blog-newsletter-card{ padding:40px 24px; } }
.news-form-light{ background:#fff; border:1.5px solid var(--line); }
.news-form-light input{ color:var(--ink); }
.news-form-light input::placeholder{ color:var(--muted); }

/* Blog page — newsletter v2 (hero-style) */
.bn2{ position:relative; overflow:hidden; background:linear-gradient(135deg, #F3F1FF 0%, #EFF4FF 55%, #F8F1FF 100%); }
.bn2-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:60px; align-items:center; position:relative; z-index:1; }
.bn2-title{ margin-top:16px; font-size:clamp(30px,3.6vw,44px); font-weight:800; line-height:1.18; letter-spacing:-0.01em; color:var(--ink); }
.bn2-grad-a{ background:linear-gradient(90deg,#3A2FE0,#7B00FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bn2-grad-b{ background:linear-gradient(90deg,#7B00FF,#3AB4FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bn2-sub{ margin-top:18px; font-size:16px; line-height:1.6; color:var(--muted); }
.bn2-form{ margin-top:30px; max-width:460px; display:flex; align-items:center; gap:4px; padding:6px 6px 6px 18px; }
.bn2-form-icon{ color:var(--purple); display:flex; flex-shrink:0; }
.bn2-form input{ padding-left:10px; }
.bn2-form .btn-primary{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.bn2-features{ display:flex; gap:34px; flex-wrap:wrap; margin-top:36px; }
.bn2-feature{ position:relative; display:flex; align-items:center; gap:12px; }
.bn2-feature + .bn2-feature::before{ content:''; position:absolute; left:-18px; top:2px; bottom:2px; width:1px; background:var(--line); }
.bn2-feature-icon{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(20,10,70,.06); background:var(--bg-lav); background:color-mix(in srgb, var(--c) 12%, white); color:var(--c); }
.bn2-feature-icon svg{ width:19px; height:19px; stroke-linecap:round; stroke-linejoin:round; }
.bn2-feature h5{ font-size:14px; font-weight:800; color:var(--ink); }
.bn2-feature span{ display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
.bn2-visual{ position:relative; width:100%; max-width:460px; margin:0 auto; aspect-ratio:1.05/1; }
.bn2-ring{ position:absolute; top:8%; left:50%; transform:translateX(-50%); width:78%; height:78%; border:1.5px dashed rgba(123,0,255,.28); border-radius:50%; z-index:0; }
.bn2-accent-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--purple); opacity:.55; z-index:1; }
.bn2-accent-plus{ position:absolute; width:14px; height:14px; z-index:1; opacity:.5; color:var(--purple); }
.bn2-dots-deco{ position:absolute; top:0; right:4%; width:120px; height:100px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:14px 14px; opacity:.25; z-index:0; }
.bn2-wave{ position:absolute; right:-24%; bottom:-30%; width:95%; height:85%; background:linear-gradient(140deg,#D6C8FF,#B8A0F8); border-radius:60% 40% 55% 45%/55% 45% 60% 40%; opacity:.4; z-index:0; filter:blur(6px); }
.bn2-sparkle{ position:absolute; top:6%; left:20%; width:34px; height:34px; z-index:3; opacity:.8; }
.bn2-plane{ position:absolute; top:10%; right:2%; width:26px; height:26px; z-index:3; opacity:.85; transform:rotate(8deg); }
.bn2-envelope{ position:relative; width:82%; margin:14% auto 0; z-index:2; filter:drop-shadow(0 18px 26px rgba(60,20,140,.16)); }
.bn2-mug{ position:absolute; left:0%; bottom:0; width:26%; z-index:4; filter:drop-shadow(0 12px 18px rgba(60,20,140,.16)); }
.bn2-plant-mug{ position:absolute; right:3%; bottom:0; width:23%; z-index:4; filter:drop-shadow(0 12px 18px rgba(60,20,140,.16)); }
.bn2-envelope svg, .bn2-mug svg, .bn2-plant-mug svg{ width:100%; height:auto; display:block; }
@media (max-width:900px){ .bn2-grid{ grid-template-columns:1fr; gap:50px; text-align:center; } .bn2-form{ margin-left:auto; margin-right:auto; } .bn2-features{ justify-content:center; } .bn2-visual{ max-width:360px; } }
@media (max-width:900px){ .bh-illustration{ max-width:460px; } }
@media (max-width:480px){ .bh-mug{ display:none; } .bh-notebook{ width:42%; } }
@media (max-width:900px){ .blog-hero{ padding:130px 0 44px; } .blog-hero-grid{ grid-template-columns:1fr; gap:36px; text-align:center; } .blog-hero-badges{ justify-content:center; } .blog-hero-sub{ margin-left:auto; margin-right:auto; } .blog-hero .page-banner-crumb{ justify-content:center !important; } }
@media (max-width:640px){ .blog-hero{ padding:110px 0 36px; } }

/* Blog page — topic pills */
.blog-topics-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.blog-topic-pill{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px 13px 13px; border-radius:100px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; font-family:inherit; }
.blog-topic-pill:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:rgba(123,0,255,.25); }
.blog-topic-pill-icon{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Blog page — category cards */
.blog-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.blog-cat-card{ display:flex; align-items:center; gap:16px; padding:22px; border-radius:18px; border:1px solid var(--line); background:#fff; cursor:pointer; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; text-align:left; width:100%; font-family:inherit; }
.blog-cat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(123,0,255,.2); }
.blog-cat-icon{ width:48px; height:48px; border-radius:14px; background:var(--bg-lav); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.blog-cat-icon svg{ width:22px; height:22px; }
.blog-cat-card h5{ font-size:15.5px; font-weight:800; color:var(--ink); }
.blog-cat-card span{ display:block; margin-top:4px; font-size:12.5px; color:var(--muted); font-weight:600; }
@media (max-width:900px){ .blog-cat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .blog-cat-grid{ grid-template-columns:1fr; } }

/* Blog page — featured post badge + author avatar */
.blog-featured{ position:relative; }
.blog-featured-badge{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:100px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--grad); color:#fff; }
.blog-author-avatar{ width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }

/* ============================================================
   About page — editorial / storytelling components
   ============================================================ */

/* ---------- Our Story: asymmetric editorial split ---------- */
.story-split{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center; }
.story-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); }
.story-heading{ margin-top:18px; font-size:clamp(28px,3.6vw,42px); font-weight:800; line-height:1.18; letter-spacing:-0.02em; color:var(--ink); }
.story-heading em{ font-style:normal; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.story-body{ margin-top:22px; color:var(--muted); font-size:16px; line-height:1.8; max-width:480px; }
.story-body p + p{ margin-top:16px; }
.story-visual{ position:relative; }
.story-visual-card{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); transform:rotate(-2deg); background:#fff; }
.story-visual-card img{ width:100%; display:block; }
.story-visual-badge{ position:absolute; bottom:-22px; left:-26px; background:#fff; border-radius:18px; padding:16px 20px; box-shadow:var(--shadow-lg); border:1px solid var(--line); display:flex; align-items:center; gap:12px; transform:rotate(3deg); }
.story-visual-badge-icon{ width:38px; height:38px; border-radius:11px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.story-visual-badge b{ display:block; font-size:13px; font-weight:800; color:var(--ink); }
.story-visual-badge span{ font-size:11px; color:var(--muted); }
.story-visual-ring{ position:absolute; top:-30px; right:-30px; width:110px; height:110px; border-radius:50%; border:1.5px dashed rgba(123,0,255,.22); z-index:-1; }
@media (max-width:1400px){ .story-visual-ring{ top:-16px; right:-4px; width:84px; height:84px; } }
.story-visual-dot{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--grad); }
@media (max-width:900px){ .story-split{ grid-template-columns:1fr; gap:56px; } .story-visual-card{ transform:none; max-width:420px; margin:0 auto; } .story-visual-badge{ transform:none; } }

/* ---------- Why CTRSpace: large-number editorial list ---------- */
.num-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); }
.num-item{ position:relative; display:flex; align-items:flex-start; gap:24px; padding:44px 30px; border-bottom:1px solid var(--line); transition:background .3s ease; }
.num-item:nth-child(odd){ border-right:1px solid var(--line); }
.num-item:hover{ background:var(--bg-lav); }
.num-item-digit{ font-size:64px; font-weight:800; line-height:1; background:linear-gradient(180deg,var(--line),transparent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; transition:background .4s ease; letter-spacing:-.02em; }
.num-item:hover .num-item-digit{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.num-item-text h4{ font-size:18px; font-weight:800; color:var(--ink); }
.num-item-text p{ margin-top:8px; font-size:14px; color:var(--muted); line-height:1.65; max-width:340px; }
@media (max-width:760px){ .num-grid{ grid-template-columns:1fr; } .num-item:nth-child(odd){ border-right:none; } .num-item-digit{ font-size:48px; } }

/* ---------- Built for Modern Publishers: horizontal journey ---------- */
.journey{ position:relative; display:flex; justify-content:space-between; gap:0; max-width:1000px; margin:70px auto 0; }
.journey::before{ content:''; position:absolute; top:34px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,#3AB4FF,#7B00FF,#D000FF,#3AB4FF); background-size:300% 100%; opacity:.35; }
.journey-step{ position:relative; flex:1; text-align:center; padding:0 10px; }
.journey-step-num{ width:68px; height:68px; border-radius:50%; background:#fff; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-size:22px; font-weight:800; color:var(--ink-soft); position:relative; z-index:1; transition:all .4s cubic-bezier(.2,.8,.2,1); }
.journey-step.in .journey-step-num{ background:var(--grad); border-color:transparent; color:#fff; transform:scale(1.08); box-shadow:0 14px 30px -10px rgba(123,0,255,.5); }
.journey-step h4{ font-size:16px; font-weight:800; color:var(--ink); }
.journey-step p{ margin-top:8px; font-size:13px; color:var(--muted); line-height:1.6; max-width:190px; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .journey{ flex-direction:column; gap:36px; align-items:flex-start; } .journey::before{ display:none; } .journey-step{ display:flex; align-items:center; gap:18px; text-align:left; padding:0; } .journey-step-num{ margin:0; flex-shrink:0; } .journey-step p{ margin-left:0; } }

/* ---------- "From Idea to Audience" wave journey (icons + wavy connector) ---------- */
.journey2{ position:relative; max-width:1080px; margin:76px auto 0; }
.journey2-row{ position:relative; display:flex; justify-content:space-between; gap:16px; }
.journey2-step{ flex:1; max-width:250px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.journey2-num{ width:56px; height:56px; border-radius:50%; background:var(--c); color:#fff; font-size:19px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -8px var(--c); }
.journey2-step h4{ margin-top:18px; font-size:22px; font-weight:800; color:var(--c); }
.journey2-underline{ display:block; width:36px; height:3px; border-radius:2px; background:var(--c); margin:8px auto 0; }
.journey2-step p{ margin-top:14px; font-size:14.5px; line-height:1.7; color:var(--muted); }
@media (max-width:900px){ .journey2-row{ flex-direction:column; gap:36px; } .journey2-step{ max-width:340px; } }

/* ---------- What Makes CTRSpace Different: split with large type + checklist ---------- */
/* ---------- "What Makes CTRSpace Different" card grid (badges + icons + blobs) ---------- */
/* ---------- "One Experience. Every Screen." device showcase (rebuilt: clean grid, no overlap) ---------- */
.resp-section{ position:relative; overflow:hidden; }
.resp-section::before{ content:''; position:absolute; top:-60px; left:-60px; width:260px; height:260px; background:radial-gradient(circle,#3AB4FF,transparent 70%); opacity:.16; filter:blur(10px); z-index:0; pointer-events:none; }
.resp-section::after{ content:''; position:absolute; bottom:-70px; right:-70px; width:280px; height:280px; background:radial-gradient(circle,#D000FF,transparent 70%); opacity:.14; filter:blur(10px); z-index:0; pointer-events:none; }
.resp-header{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
.resp-header p{ margin-top:16px; color:var(--muted); font-size:16px; line-height:1.7; }

.resp-checks{ position:relative; z-index:1; display:flex; justify-content:center; gap:16px; margin-top:48px; flex-wrap:wrap; }
.resp-check{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); padding:12px 22px; border-radius:100px; font-size:13.5px; font-weight:700; color:var(--ink); box-shadow:0 8px 20px -10px rgba(30,10,80,.12); }
.resp-check svg{ width:15px; height:15px; color:var(--purple); flex-shrink:0; }

.resp-stage{ position:relative; z-index:1; max-width:1040px; margin:80px auto 0; padding:0 24px; }
.resp-stage::before{ content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:64%; height:36px; background:radial-gradient(ellipse, rgba(90,40,200,.22), transparent 72%); filter:blur(14px); z-index:0; pointer-events:none; }
/* The device-mockup showcase on the theme detail page. It used to be called
   .resp-devices/.resp-device, which is also the homepage's row of three icon
   CARDS in site.css — both stylesheets load on inner pages, so this section
   inherited that card's white background, padding and max-width:220px while the
   laptop mockup inside it stayed 540px and burst out over its neighbours.
   Distinct names keep the two components independent. */
.resp-showcase{ display:flex; align-items:flex-end; justify-content:center; gap:40px; flex-wrap:nowrap; }
.resp-showcase-item{ display:flex; flex-direction:column; align-items:center; min-width:0; }
/* Above the wrap breakpoint the caption pills are taken out of flow. In flow
   they are wider than the phone and tablet they label, so each flex item was
   sized by its caption rather than its device — which pushed the devices apart
   unevenly (35px on one side of the laptop, 65px on the other) and threw the
   cluster off centre. Out of flow, the items are exactly as wide as the devices
   and the 40px gap is the gap you actually see. Below 900px they stay in flow,
   where the row wraps and each item needs its caption's width reserved. */
@media (min-width:901px){
  .resp-showcase-item{ position:relative; padding-bottom:55px; }
  .resp-showcase-item .resp-device-caption{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); margin-top:0; }
}
.resp-device-caption{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--ink); box-shadow:0 6px 16px -8px rgba(30,10,80,.14); white-space:nowrap; }
.resp-device-caption svg{ width:14px; height:14px; color:var(--purple); flex-shrink:0; }

.resp-mini-nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid #EEECF8; }
.resp-mini-logo{ display:flex; align-items:center; gap:6px; font-weight:800; color:var(--ink); font-size:12px; }
.resp-mini-logo span{ width:14px; height:14px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.resp-mini-menu{ display:flex; gap:8px; }
.resp-mini-menu i{ display:block; width:5px; height:5px; border-radius:50%; background:#D8D6EC; }
.resp-mini-body{ padding:24px 28px 28px; }
.resp-mini-heading{ font-weight:800; color:var(--ink); line-height:1.28; font-size:20px; }
.resp-mini-heading .grad-text{ display:block; }
.resp-mini-sub{ margin-top:6px; color:var(--muted); font-size:13px; }
.resp-mini-search{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; background:#F6F5FB; border-radius:100px; padding:9px 9px 9px 16px; color:#B7B3D4; font-size:12px; }
.resp-mini-search span:last-child{ width:22px; height:22px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.resp-mini-grid{ margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.resp-mini-grid div{ aspect-ratio:3/4; border-radius:6px; background:linear-gradient(160deg,#E7E4FA,#F3F1FC); }

.resp-laptop{ width:540px; flex-shrink:0; }
.resp-laptop-screen{ background:#15132E; border-radius:16px 16px 4px 4px; padding:10px 10px 0; box-shadow:0 40px 70px -24px rgba(20,10,60,.35); }
.resp-laptop-inner{ background:#fff; border-radius:8px 8px 0 0; overflow:hidden; }
.resp-laptop-base{ height:16px; background:linear-gradient(180deg,#E2E1EE,#C4C2D6); border-radius:0 0 12px 12px; position:relative; }
.resp-laptop-base::before{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:80px; height:6px; background:#A7A4BE; border-radius:0 0 6px 6px; }

.resp-tablet-frame{ width:180px; background:#161428; border-radius:20px; padding:11px 9px; box-shadow:0 26px 50px -18px rgba(20,10,60,.28); flex-shrink:0; }
.resp-tablet-frame .resp-mini-nav{ padding:9px 12px; }
.resp-tablet-frame .resp-mini-logo{ font-size:9.5px; }
.resp-tablet-frame .resp-mini-logo span{ width:11px; height:11px; }
.resp-tablet-frame .resp-mini-body{ padding:12px; }
.resp-tablet-frame .resp-mini-heading{ font-size:12.5px; }
.resp-tablet-frame .resp-mini-sub{ font-size:9px; margin-top:4px; }
.resp-tablet-frame .resp-mini-search{ font-size:8.5px; padding:6px 6px 6px 10px; margin-top:8px; }
.resp-tablet-frame .resp-mini-search span:last-child{ width:14px; height:14px; }
.resp-tablet-frame .resp-mini-grid{ grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.resp-tablet-screen{ background:#fff; border-radius:10px; overflow:hidden; }

.resp-phone-frame{ position:relative; width:112px; background:#161428; border-radius:24px; padding:9px 7px; box-shadow:0 26px 50px -18px rgba(20,10,60,.28); flex-shrink:0; }
.resp-phone-frame::before{ content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:38px; height:5px; background:#000; border-radius:4px; z-index:2; }
.resp-phone-screen{ background:#fff; border-radius:16px; overflow:hidden; padding-top:6px; }
.resp-phone-screen .resp-mini-nav{ padding:7px 10px; }
.resp-phone-screen .resp-mini-logo{ font-size:8px; }
.resp-phone-screen .resp-mini-logo span{ width:9px; height:9px; }
.resp-phone-screen .resp-mini-body{ padding:10px; }
.resp-phone-screen .resp-mini-heading{ font-size:9.5px; }
.resp-phone-screen .resp-mini-sub{ display:none; }
.resp-phone-screen .resp-mini-search{ display:none; }
.resp-phone-screen .resp-mini-grid{ grid-template-columns:repeat(2,1fr); gap:6px; margin-top:10px; }

.resp-stat-bar{ position:relative; z-index:1; display:flex; align-items:stretch; justify-content:center; max-width:820px; margin:64px auto 0; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 48px -24px rgba(20,10,70,.18); overflow:hidden; }
.resp-stat{ flex:1; display:flex; align-items:center; gap:12px; padding:24px 22px; min-width:0; }
.resp-stat + .resp-stat{ border-left:1px solid var(--line); }
.resp-stat-icon{ width:40px; height:40px; border-radius:12px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.resp-stat-icon svg{ width:19px; height:19px; }
.resp-stat h6{ font-size:13.5px; font-weight:800; color:var(--ink); text-align:left; }
.resp-stat p{ font-size:11.5px; color:var(--muted); text-align:left; margin-top:2px; line-height:1.4; }
@media (max-width:700px){ .resp-stat-bar{ flex-direction:column; } .resp-stat + .resp-stat{ border-left:none; border-top:1px solid var(--line); } }

@media (max-width:900px){
  .resp-showcase{ flex-wrap:wrap; gap:40px 32px; }
  .resp-laptop{ width:100%; max-width:460px; }
}
@media (max-width:520px){
  .resp-laptop{ max-width:320px; }
  .resp-tablet-frame{ width:160px; }
  .resp-phone-frame{ width:104px; }
}
.diff-section{ position:relative; overflow:hidden; }
.diff-section::before{ content:''; position:absolute; top:-70px; right:-70px; width:300px; height:300px; background:var(--grad); opacity:.14; border-radius:55% 45% 60% 40% / 50% 55% 45% 50%; filter:blur(4px); z-index:0; }
.diff-section::after{ content:''; position:absolute; bottom:-90px; left:-90px; width:280px; height:280px; background:var(--grad); opacity:.13; border-radius:45% 55% 40% 60% / 55% 45% 55% 45%; filter:blur(4px); z-index:0; }
.diff-dots-1, .diff-dots-2{ position:absolute; width:130px; height:100px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.14; z-index:0; pointer-events:none; }
.diff-dots-1{ top:24px; left:46%; }
.diff-dots-2{ bottom:50px; right:6%; }
.diff-split{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start; }
.diff-heading{ font-size:clamp(26px,3.2vw,38px); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:var(--ink); position:sticky; top:120px; }
.diff-arrow{ position:absolute; width:80px; height:64px; margin-top:10px; color:var(--purple); opacity:.8; }
.diff-list{ display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; }
.diff-list-item{ display:flex; gap:14px; }
.diff-list-num{ font-size:13px; font-weight:800; color:var(--purple); flex-shrink:0; width:26px; }
.diff-list-item h5{ font-size:15px; font-weight:800; color:var(--ink); }
.diff-list-item p{ margin-top:5px; font-size:13px; color:var(--muted); line-height:1.6; }
.diff-cards{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.diff-card{ position:relative; background:#fff; border-radius:20px; padding:30px 26px 26px; box-shadow:0 14px 34px -16px rgba(30,10,80,.14); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; }
.diff-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(30,10,80,.2); }
.diff-card-badge{ position:absolute; top:-16px; left:24px; width:40px; height:40px; border-radius:50%; background:var(--grad); color:#fff; font-size:13.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(123,0,255,.5); z-index:2; }
.diff-card-icon{ width:62px; height:62px; border-radius:50%; background:var(--bg-lav); display:flex; align-items:center; justify-content:center; margin:16px 0 16px; }
.diff-card-icon svg{ width:27px; height:27px; color:var(--purple); }
.diff-card h5{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.3; }
.diff-card p{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.6; }
@media (max-width:1100px){ .diff-cards-4{ grid-template-columns:repeat(2,1fr); } .diff-cards-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .diff-split{ grid-template-columns:1fr; gap:36px; } .diff-heading{ position:static; } .diff-list{ grid-template-columns:1fr; } .diff-cards{ grid-template-columns:1fr; } .diff-cards-4, .diff-cards-5{ grid-template-columns:repeat(2,1fr); } .diff-arrow{ display:none; } }
@media (max-width:560px){ .diff-cards-4, .diff-cards-5{ grid-template-columns:1fr; } }

/* ---------- creative full-width visual section ---------- */
.creative-visual-section{ position:relative; background:linear-gradient(160deg,#0B0D24,#16123A 55%,#1C0F35); overflow:hidden; padding:120px 0; }
.creative-visual-section::before{ content:''; position:absolute; inset:0; background:radial-gradient(50% 50% at 15% 15%, rgba(58,180,255,.18), transparent 65%), radial-gradient(50% 50% at 90% 85%, rgba(208,0,255,.16), transparent 65%); pointer-events:none; }
.creative-visual-inner{ position:relative; z-index:1; text-align:center; }
.creative-visual-inner .eyebrow{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; }
.creative-visual-inner h2{ margin-top:16px; color:#fff; background:none; -webkit-text-fill-color:#fff; font-size:clamp(26px,3.4vw,40px); font-weight:800; }
.creative-visual-inner p{ margin:14px auto 0; max-width:520px; color:rgba(255,255,255,.6); font-size:15px; }
.creative-frame{ position:relative; max-width:920px; margin:60px auto 0; border-radius:24px; overflow:hidden; box-shadow:0 60px 120px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); transform:perspective(1400px) rotateX(3deg); }
.creative-frame-bar{ height:36px; background:#15162E; display:flex; align-items:center; gap:6px; padding:0 16px; }
.creative-frame-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.creative-frame img{ width:100%; display:block; }
.creative-float-badge{ position:absolute; top:-24px; right:6%; background:#fff; border-radius:16px; padding:14px 18px; box-shadow:0 20px 40px -12px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; z-index:2; }
.creative-float-badge-icon{ width:34px; height:34px; border-radius:10px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.creative-float-badge b{ font-size:12.5px; font-weight:800; color:var(--ink); display:block; }
.creative-float-badge span{ font-size:10.5px; color:var(--muted); }
@media (max-width:760px){ .creative-frame{ transform:none; } .creative-float-badge{ display:none; } }

/* ===========================================================================
   PRICING  (page-templates/template-pricing.php)
   =========================================================================== */

.pricing-founding-flag{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:9px 18px; border-radius:100px; background:rgba(123,0,255,.07); border:1px solid rgba(123,0,255,.14); color:var(--purple); font-size:13.5px; font-weight:700; }
.pricing-founding-flag .dot{ width:7px; height:7px; border-radius:50%; background:var(--grad); flex:0 0 7px; }

/* ---- plan cards ---------------------------------------------------------- */
.pricing-plans-section{ padding-top:70px; }
/* align-items:stretch so the three cards share a height however uneven the
   feature lists are — .pricing-was is pushed to the bottom with margin-top:auto,
   so the CTAs and list heads still line up. */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:stretch; padding-top:16px; }

.pricing-card{ position:relative; height:100%; display:flex; flex-direction:column; padding:36px 32px 30px; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:0 10px 30px rgba(20,10,70,.06); transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.pricing-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(20,10,70,.10); }

/* The recommended plan is lifted out of the row and given a gradient hairline
   rather than a heavier border, so it reads as chosen rather than just bigger. */
.pricing-card.is-featured{ border-color:transparent; transform:translateY(-14px); box-shadow:0 30px 70px rgba(80,40,200,.20); }
.pricing-card.is-featured:hover{ transform:translateY(-18px); box-shadow:0 36px 80px rgba(80,40,200,.24); }
/* Both decorations sit on z-index 1 so the badge (z-index 3) stays in front —
   ::after paints after the badge in DOM order, so without this the gradient
   accent bar was drawn straight through the "Most Popular" pill. */
.pricing-card.is-featured::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:26px; padding:1px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; }
.pricing-card.is-featured::after{ content:""; position:absolute; top:0; left:32px; right:32px; z-index:1; height:3px; border-radius:0 0 4px 4px; background:var(--grad); }

/* z-index keeps the pill above the card's gradient hairline and accent bar; the
   ring matches the page background so the border passes behind it cleanly. */
.pricing-badge{ position:absolute; top:-14px; left:50%; z-index:3; transform:translateX(-50%); padding:7px 18px; border-radius:100px; background:var(--grad); box-shadow:0 0 0 5px #fff, 0 8px 18px rgba(123,0,255,.28); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.05em; line-height:1; text-transform:uppercase; white-space:nowrap; }

/* Lifts the card's own content above the gradient hairline. The badge is
   excluded: it is absolutely positioned, and position:relative here dropped it
   back into flow at full card width. */
.pricing-card > *:not(.pricing-badge){ position:relative; z-index:2; }
.pricing-name{ font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pricing-price{ display:flex; align-items:baseline; gap:8px; margin-top:14px; }
.pricing-price strong{ font-size:46px; font-weight:800; letter-spacing:-.03em; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pricing-card:not(.is-featured) .pricing-price strong{ background:none; -webkit-text-fill-color:var(--ink); color:var(--ink); }
.pricing-price span{ font-size:14.5px; font-weight:700; color:var(--muted); }
/* align-self keeps this hugging its text: `display:inline-block` is blockified
   on a flex item, which stretched it to the full card width. */
.pricing-sites{ align-self:flex-start; margin-top:14px; padding:6px 14px; border-radius:100px; background:rgba(123,0,255,.08); border:1px solid rgba(123,0,255,.14); color:var(--purple); font-size:12.5px; font-weight:800; }
/* min-height keeps the three CTAs on one line even if a blurb wraps to an extra
   row; height:100% makes each card fill its grid track so the cards end level. */
.pricing-blurb{ margin-top:16px; min-height:76px; color:var(--muted); font-size:14.5px; line-height:1.75; }

.pricing-cta{ margin-top:24px; width:100%; justify-content:center; }
.pricing-note{ margin-top:10px; text-align:center; color:var(--muted); font-size:12.5px; font-weight:600; }

.pricing-list-head{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; font-weight:800; color:var(--ink); }
.pricing-list{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.pricing-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--ink-soft); font-size:14px; line-height:1.6; }
.pricing-list li svg{ flex:0 0 16px; margin-top:3px; color:var(--purple); }

.pricing-was{ margin-top:8px; color:var(--muted); font-size:12.5px; font-weight:600; }
.pricing-was s{ text-decoration-color:rgba(123,0,255,.45); }

/* ---- supporting strip ---------------------------------------------------- */
.pricing-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:56px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(20,10,70,.05); overflow:hidden; }
.pricing-strip > div{ position:relative; padding:28px 30px; }
.pricing-strip > div + div{ border-left:1px solid var(--line); }
.pricing-strip > div::before{ content:""; position:absolute; top:0; left:30px; width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--grad); }
.pricing-strip strong{ display:block; margin-top:6px; font-size:14.5px; font-weight:800; color:var(--ink); }
.pricing-strip span{ display:block; margin-top:8px; color:var(--muted); font-size:13.5px; line-height:1.7; }

/* ---- comparison table ---------------------------------------------------- */
.pricing-table-scroll{ margin-top:46px; overflow-x:auto; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(20,10,70,.06); }
.pricing-table{ width:100%; min-width:680px; border-collapse:collapse; font-size:14px; }

/* Not sticky: the wrapper is overflow-x:auto, which computes overflow-y to auto
   too, so a sticky header would scope to a container that never scrolls. */
.pricing-table thead th{ padding:20px; background:#fff; border-bottom:1px solid var(--line); text-align:center; font-size:13px; font-weight:800; color:var(--ink); }
.pricing-table thead th:first-child{ text-align:left; }
.pricing-table thead th.is-featured{ color:var(--purple); }

.pricing-table-group th{ padding:14px 20px; background:linear-gradient(150deg,#F7FAFF,#FAF7FF); text-align:left; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.pricing-table tbody th[scope="row"]{ padding:14px 20px; text-align:left; font-weight:600; color:var(--ink-soft); }
.pricing-table td{ padding:14px 20px; text-align:center; border-left:1px solid rgba(234,234,243,.7); }
.pricing-table tbody tr + tr th[scope="row"], .pricing-table tbody tr + tr td{ border-top:1px solid rgba(234,234,243,.7); }
/* The recommended column is tinted the full height of the table so the eye can
   follow it down, and capped top and bottom so it reads as one band. */
.pricing-table td.is-featured, .pricing-table thead th.is-featured{ background:rgba(123,0,255,.045); }
.pricing-table thead th.is-featured{ border-radius:14px 14px 0 0; box-shadow:inset 0 3px 0 var(--purple); }
.pricing-table tbody tr:hover th[scope="row"], .pricing-table tbody tr:hover td{ background:rgba(123,0,255,.028); }
.pricing-table tbody tr:hover td.is-featured{ background:rgba(123,0,255,.07); }
.pricing-table-group th{ position:relative; }

.pricing-yes{ display:inline-flex; color:var(--purple); }
.pricing-no{ color:#C8C6D6; font-weight:700; }
.pricing-val{ font-size:13px; font-weight:700; color:var(--ink); }

.pricing-table-foot{ margin-top:16px; color:var(--muted); font-size:12.5px; }

/* ---- comparison table: premium treatment --------------------------------- */
.pricing-table-scroll{ position:relative; }
.pricing-table{ table-layout:fixed; }
.pricing-table thead th:first-child{ width:38%; }

/* Header cells carry the plan, its price and a CTA, so the table is a decision
   tool rather than a spec sheet. */
.pricing-table thead th{ position:relative; padding:26px 20px 24px; vertical-align:top; }
.pricing-table-corner{ display:block; padding-top:34px; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pricing-table-plan{ display:block; font-size:15px; font-weight:800; color:var(--ink); }
.pricing-table-price{ display:block; margin-top:4px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.pricing-table-price small{ margin-left:3px; font-size:11.5px; font-weight:700; color:var(--muted); }
.pricing-table-chip{ display:inline-block; margin-bottom:8px; padding:4px 11px; border-radius:100px; background:var(--grad); color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.pricing-table thead th:not(.is-featured) .pricing-table-plan{ margin-top:26px; }

.pricing-table-cta{ display:inline-block; margin-top:14px; padding:8px 20px; border-radius:100px; border:1px solid var(--line); color:var(--ink); font-size:12.5px; font-weight:800; text-decoration:none; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.pricing-table-cta:hover{ border-color:transparent; background:var(--grad); color:#fff; }
.pricing-table thead th.is-featured .pricing-table-cta{ border-color:transparent; background:var(--grad); color:#fff; }

/* The recommended column reads as one continuous band, capped top and bottom
   rather than stopping mid-table. */
.pricing-table thead th.is-featured{ border-radius:18px 18px 0 0; box-shadow:inset 1px 0 0 rgba(123,0,255,.16), inset -1px 0 0 rgba(123,0,255,.16), inset 0 3px 0 var(--purple); }
.pricing-table td.is-featured{ box-shadow:inset 1px 0 0 rgba(123,0,255,.16), inset -1px 0 0 rgba(123,0,255,.16); }
.pricing-table tfoot td.is-featured{ border-radius:0 0 18px 18px; box-shadow:inset 1px 0 0 rgba(123,0,255,.16), inset -1px 0 0 rgba(123,0,255,.16), inset 0 -1px 0 rgba(123,0,255,.16); }

/* ---- buy row at the foot of the table ------------------------------------ */
.pricing-table tfoot td{ padding:26px 20px; text-align:center; vertical-align:top; background:#fff; border-top:1px solid var(--line); }
.pricing-table tfoot td.is-featured{ background:rgba(123,0,255,.045); }
.pricing-table tfoot th[scope="row"]{ padding:26px 20px; border-top:1px solid var(--line); vertical-align:middle; }
.pricing-table tfoot .pricing-table-corner{ padding-top:0; }

.pricing-table-buy-btn{ width:100%; justify-content:center; padding:12px 18px; font-size:13.5px; }
.pricing-table-buy-note{ display:block; margin-top:9px; font-size:12px; font-weight:700; color:var(--muted); }

/* Ticks become badges: a filled mark for included, a quiet dash for not. */
.pricing-yes{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(123,0,255,.10); color:var(--purple); }
.pricing-table td.is-featured .pricing-yes{ background:var(--grad); color:#fff; }
.pricing-no{ display:inline-block; width:26px; color:#C8C6D6; font-weight:700; }
.pricing-val{ display:inline-block; padding:5px 12px; border-radius:100px; background:rgba(20,10,70,.04); font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; }
.pricing-table td.is-featured .pricing-val{ background:rgba(123,0,255,.10); color:var(--purple); }

/* Group rows get a gradient rule so the six sections read as chapters. */
.pricing-table-group th{ padding:16px 20px; background:linear-gradient(150deg,#F5F9FF,#FAF6FF); }
.pricing-table-group th::after{ content:""; position:absolute; left:20px; bottom:0; width:34px; height:2px; border-radius:2px; background:var(--grad); }

.pricing-table tbody th[scope="row"]{ padding:16px 20px; font-size:14px; }
.pricing-table td{ padding:16px 20px; }

/* The feature name stays put while the plan columns scroll on a phone. */
@media (max-width:900px){
  .pricing-table thead th:first-child{ width:auto; }
  .pricing-table thead th:first-child,
  .pricing-table tbody th[scope="row"],
  .pricing-table tfoot th[scope="row"]{ position:sticky; left:0; z-index:2; background:#fff; box-shadow:1px 0 0 var(--line); }
  .pricing-table-group th{ position:sticky; left:0; z-index:2; }
}

@media (max-width:640px){
  /* The plan columns are ~126px wide here, which is narrower than
     "Get CTRSpace Publisher" on one line, so the label is allowed to wrap. */
  .pricing-table-buy-btn{ padding:11px 12px; font-size:12.5px; line-height:1.35; white-space:normal; }
  .pricing-table tfoot td, .pricing-table tfoot th[scope="row"]{ padding:20px 14px; }
  .pricing-table thead th{ padding:20px 14px; }
  .pricing-table tbody th[scope="row"], .pricing-table td{ padding:14px; }
  .pricing-table-price{ font-size:19px; }
  .pricing-table-cta{ padding:7px 16px; font-size:12px; }
}

/* ---- value sections ------------------------------------------------------ */
.pricing-value-section.is-alt{ background:linear-gradient(150deg, #F0F8FF, #F6F5FF 55%, #FBF3FF); }
.pricing-value-kicker{ margin-top:22px; font-size:14.5px; font-weight:700; color:var(--ink); }

.pricing-value-card{ position:relative; padding:48px 44px; border-radius:28px; background:var(--ink); color:#fff; box-shadow:0 26px 60px rgba(20,10,70,.20); overflow:hidden; }
.pricing-value-card::after{ content:""; position:absolute; right:-90px; bottom:-90px; width:280px; height:280px; border-radius:50%; background:var(--grad); opacity:.30; filter:blur(60px); }
.pricing-value-plan{ position:relative; z-index:1; display:inline-block; padding:6px 14px; border-radius:100px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.pricing-value-num{ position:relative; z-index:1; display:block; margin-top:26px; font-size:68px; font-weight:800; line-height:1; background:linear-gradient(90deg,#4FC3FF,#B000FF 60%,#FF3DD8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pricing-value-card h3{ position:relative; z-index:1; margin-top:16px; font-size:23px; font-weight:800; color:#fff; }
.pricing-value-card p{ position:relative; z-index:1; margin-top:14px; color:rgba(255,255,255,.62); font-size:14.5px; line-height:1.8; }

/* ---- lite band -----------------------------------------------------------
   No vertical padding of its own: the value section above and the FAQ section
   below both carry full .section padding, so the band would otherwise sit in a
   double gap. Element + class beats the plain `.section` padding rule. */
section.pricing-lite-section{ padding-top:0; padding-bottom:0; }
/* ---- lite band ----------------------------------------------------------- */
.pricing-lite{ display:grid; grid-template-columns:1.6fr .8fr; gap:36px; align-items:center; padding:44px 46px; border:1px solid var(--line); border-radius:26px; background:#fff; box-shadow:0 10px 30px rgba(20,10,70,.06); }
.pricing-lite-action{ text-align:right; }

/* ---- FAQ: full width, two columns, and the question is a <button> --------- */
/* align-items:start is load-bearing: grid items stretch to their row height by
   default, so a closed question sitting beside an open one was inflated into a
   tall empty box that looked like a broken item with missing content. */
.pricing-faq-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; align-content:start; margin-top:56px; }
.pricing-faq-list .faq-dark-item{ align-self:start; }
.pricing-faq-list .faq-dark-item + .faq-dark-item{ margin-top:0; }
.pricing-faq-list .faq-dark-q{ display:flex; width:100%; border:0; background:none; font-family:inherit; font-size:14.5px; font-weight:700; text-align:left; }
/* The shared .faq-dark-a animates a max-height, which means a fixed cap that
   silently clips any answer taller than it. These answers vary a lot and get
   taller as the column narrows, so this animates grid-template-rows 0fr -> 1fr
   instead: it resolves to the content's real height, so nothing can be cut off.
   max-height is neutralised for the same reason. */
.pricing-faq-list .faq-dark-a{ display:grid; grid-template-rows:0fr; max-height:none; transition:grid-template-rows .35s ease; }
/* The collapsing box must contribute zero height when closed, so it needs BOTH
   min-height:0 (a grid child's automatic minimum is its min-content height,
   which reserved one line of text) and no padding of its own (padding is not
   reduced by min-height, and the p's 22px bottom padding held the row open).
   The padding therefore lives on the p, inside the clipped wrapper. */
.pricing-faq-list .faq-dark-a-inner{ overflow:hidden; min-height:0; padding:0; }
.pricing-faq-list .faq-dark-a > p{ overflow:hidden; min-height:0; }
.pricing-faq-list .faq-dark-item.open .faq-dark-a{ grid-template-rows:1fr; max-height:none; }

/* ---- closing CTA --------------------------------------------------------- */
.pricing-cta-card{ border-radius:36px; padding:80px 40px; background:linear-gradient(135deg,#0A1E4D,#1CA9FF 45%,#3B2FE0); color:#fff; }
.pricing-cta-card h2{ font-size:clamp(26px,3.6vw,40px) !important; font-weight:800 !important; color:#fff; background:none; -webkit-text-fill-color:#fff; max-width:900px; margin:0 auto; }
.pricing-cta-card > p{ margin-top:16px; font-size:16px; opacity:.75; }
.pricing-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.pricing-cta-plan{ display:flex; flex-direction:column; gap:6px; padding:18px 26px; border-radius:18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; text-decoration:none; transition:background .25s ease, transform .25s ease; }
.pricing-cta-plan:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); }
.pricing-cta-plan strong{ font-size:15px; font-weight:800; }
.pricing-cta-plan span{ font-size:12.5px; font-weight:700; opacity:.75; }
.pricing-cta-foot{ margin-top:30px; font-size:13.5px; font-weight:700; letter-spacing:.04em; opacity:.7; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .pricing-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; }
  /* Stacked, the lift just opens an uneven gap above the card. */
  .pricing-card.is-featured, .pricing-card.is-featured:hover{ transform:none; }
  .pricing-strip{ grid-template-columns:1fr; }
  /* Column dividers become row dividers once the strip stacks. */
  .pricing-strip > div + div{ border-left:0; border-top:1px solid var(--line); }
  .pricing-faq-list{ grid-template-columns:1fr; }
  .pricing-lite{ grid-template-columns:1fr; padding:34px 30px; }
  .pricing-lite-action{ text-align:left; }
}

@media (max-width:640px){
  .pricing-card{ padding:30px 24px 26px; }
  .pricing-price strong{ font-size:36px; }
  .pricing-value-card{ padding:32px 26px; }
  .pricing-cta-card{ padding:56px 24px; border-radius:28px; }
  .pricing-cta-plan{ width:100%; }
}

/* ===========================================================================
   LEGAL DOCUMENTS  (privacy policy, terms & conditions)
   A long legal document laid out as a reference: sticky numbered contents
   beside the text, with scroll-spy marking the section being read. Shared by
   page-templates/template-privacy.php and template-terms.php.
   =========================================================================== */

.legal-updated{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:8px 16px; border-radius:100px; background:rgba(123,0,255,.07); border:1px solid rgba(123,0,255,.14); color:var(--purple); font-size:13px; font-weight:700; }

.legal-section{ padding-top:70px; }
.legal-shell{ display:grid; grid-template-columns:284px minmax(0,1fr); gap:48px; align-items:start; }

/* ---- contents rail ------------------------------------------------------- */
.legal-toc{ position:sticky; top:104px; max-height:calc(100vh - 140px); display:flex; flex-direction:column; padding:24px 20px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 10px 30px rgba(20,10,70,.06); }
.legal-toc-head{ flex:0 0 auto; padding:0 10px 14px; border-bottom:1px solid var(--line); font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.legal-toc nav{ overflow-y:auto; margin-top:12px; scrollbar-width:thin; }
.legal-toc nav::-webkit-scrollbar{ width:4px; }
.legal-toc nav::-webkit-scrollbar-thumb{ background:rgba(123,0,255,.18); border-radius:4px; }

.legal-toc ol{ margin:0; padding:0; list-style:none; counter-reset:none; }
.legal-toc li{ margin:0; }
.legal-toc a{ display:flex; gap:11px; padding:9px 10px; border-radius:12px; color:var(--ink-soft); font-size:13.5px; font-weight:600; line-height:1.5; text-decoration:none; transition:background .2s ease, color .2s ease; }
.legal-toc a:hover{ background:rgba(123,0,255,.06); color:var(--purple); }
.legal-toc-num{ flex:0 0 auto; font-size:11.5px; font-weight:800; color:var(--muted); padding-top:2px; }

/* Set by privacy.js as you scroll. */
.legal-toc a.is-current{ background:var(--grad); color:#fff; font-weight:700; }
.legal-toc a.is-current .legal-toc-num{ color:rgba(255,255,255,.8); }

/* ---- document ------------------------------------------------------------ */
.legal-body{ min-width:0; }
.legal-intro{ padding:32px 34px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(150deg,#F7FAFF,#FAF7FF); color:var(--ink-soft); font-size:16px; line-height:1.85; }
.legal-intro p + p{ margin-top:14px; }
.legal-intro strong{ color:var(--ink); }

.legal-block{ padding-top:52px; }
/* Anchor links land clear of the fixed site header. */
.legal-block{ scroll-margin-top:104px; }
.legal-block-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.legal-block-num{ flex:0 0 auto; font-size:13px; font-weight:800; color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text; }
.legal-block h2{ margin:0; font-size:25px !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); }
.legal-block h3{ margin:28px 0 12px; font-size:17px; font-weight:800; color:var(--ink); }

.legal-block p{ margin:0 0 16px; color:var(--ink-soft); font-size:15.5px; line-height:1.85; }
.legal-block p:last-child{ margin-bottom:0; }

.legal-block ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:10px; }
.legal-block ul li{ position:relative; padding-left:26px; color:var(--ink-soft); font-size:15px; line-height:1.75; }
.legal-block ul li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--grad); }
.legal-block ul li strong{ color:var(--ink); }

/* Two columns for the short scannable lists. */
.legal-block ul.legal-grid-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; }

/* A quieter aside for caveats and "please note" lines. */
.legal-note{ padding:16px 20px; border-left:3px solid rgba(123,0,255,.28); border-radius:0 12px 12px 0; background:rgba(123,0,255,.04); font-size:14.5px !important; }

/* The statements people scan for. */
.legal-callout{ display:flex; align-items:flex-start; gap:12px; margin:0 0 20px !important; padding:18px 22px; border-radius:16px; background:var(--ink); color:#fff !important; font-size:16px !important; font-weight:700; line-height:1.6; }
.legal-callout svg{ flex:0 0 18px; margin-top:2px; color:#4FC3FF; }

/* ---- contact card -------------------------------------------------------- */
.legal-contact{ margin-top:22px; padding:28px 30px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgba(20,10,70,.05); }
.legal-contact-name{ display:block; font-size:16px; font-weight:800; color:var(--ink); }
.legal-contact dl{ margin:18px 0 0; display:grid; gap:12px; }
.legal-contact dl > div{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:baseline; }
.legal-contact dt{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.legal-contact dd{ margin:0; font-size:15px; color:var(--ink-soft); }
.legal-contact dd a{ color:var(--purple); font-weight:700; text-decoration:none; }
.legal-contact dd a:hover{ text-decoration:underline; }
.legal-contact p{ margin:18px 0 0 !important; padding-top:16px; border-top:1px solid var(--line); font-size:14px !important; }

/* Deliberately conspicuous: these must be replaced before launch. */
.legal-inline-link{ display:inline-block; padding:9px 18px; border-radius:100px; background:rgba(123,0,255,.08); border:1px solid rgba(123,0,255,.16); color:var(--purple); font-size:14.5px; font-weight:700; text-decoration:none; transition:background .25s ease; }
.legal-inline-link:hover{ background:rgba(123,0,255,.14); }

.legal-placeholder{ display:inline-block; padding:4px 12px; border-radius:8px; border:1px dashed rgba(255,61,113,.5); background:rgba(255,61,113,.06); color:#FF3D71; font-size:13.5px; font-weight:700; }

/* ---- closing ------------------------------------------------------------- */
.legal-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:56px; padding:30px 34px; border-radius:22px; background:linear-gradient(135deg,#0A1E4D,#1CA9FF 45%,#3B2FE0); color:#fff; }
.legal-foot p{ margin:0; font-size:17px; font-weight:800; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .legal-shell{ grid-template-columns:1fr; gap:28px; }
  /* Above the text it must not stick, and the internal scroll is dropped so the
     rail is only as tall as its contents. */
  .legal-toc{ position:static; max-height:none; }
  .legal-toc nav{ overflow-y:visible; }
  .legal-toc ol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 16px; }
}

@media (max-width:640px){
  .legal-toc ol{ grid-template-columns:1fr; }
  .legal-intro{ padding:24px 22px; }
  .legal-block ul.legal-grid-list{ grid-template-columns:1fr; }
  .legal-block h2{ font-size:21px !important; }
  .legal-contact{ padding:22px 20px; }
  .legal-contact dl > div{ grid-template-columns:1fr; gap:4px; }
  .legal-foot{ padding:24px 22px; }
}