:root{
  --blue:#0d55e8;
  --blue2:#1168ff;
  --navy:#0c1733;
  --text:#111827;
  --muted:#5b6475;
  --line:#dbe7ff;
  --soft:#f6f9ff;
  --soft2:#edf4ff;
  --white:#fff;
  --orange:#ff7a00;
  --shadow:0 14px 38px rgba(29,74,155,.10);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.7;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1360px,calc(100% - 40px));margin:auto}
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
  border-bottom:1px solid #eef2f7;
}
.nav-wrap{height:82px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:baseline;font-weight:800;white-space:nowrap}
.brand-rank{font-size:26px;color:var(--navy)}
.brand-pro{font-size:17px;background:linear-gradient(135deg,var(--blue),#084bc9);color:#fff;padding:2px 7px;border-radius:6px;margin-left:2px}
.brand small{display:block;font-weight:500;font-size:10px;color:#52606f;margin-left:-75px;transform:translateY(18px)}
.nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:700}
.nav a:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font-weight:800;border:1px solid transparent;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#0f59e8,#064ccf);color:#fff;box-shadow:0 10px 26px rgba(13,85,232,.22)}
.btn-outline{color:var(--blue);border-color:var(--blue);background:#fff}
.btn-sm{min-height:44px;border-radius:14px;padding:0 18px;font-size:13px}
.menu-btn{display:none;margin-left:auto;border:0;background:none;font-size:26px}
.hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 20%,rgba(66,130,255,.15),transparent 32%),
    linear-gradient(180deg,#f9fbff 0,#eff5ff 100%);
  position:relative;
}
.hero:after{
  content:"";position:absolute;left:-5%;right:-5%;bottom:-70px;height:130px;background:#fff;border-radius:50% 50% 0 0/60% 60% 0 0;
}
.hero-grid{min-height:620px;padding:56px 0 72px;display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;position:relative;z-index:1}
.eyebrow,.kicker{
  display:inline-block;color:var(--blue);font-weight:800;font-size:14px;letter-spacing:.02em;
}
.eyebrow{padding:7px 13px;border:1px solid #a9c4ff;background:#f5f8ff;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:58px;line-height:1.2;margin:0 0 18px;color:#0c1530;letter-spacing:-.02em}
.hero h1 span{color:var(--blue)}
.hero h2{font-size:26px;color:#0c55dc;margin:0 0 18px}
.hero p{font-size:18px;font-weight:600;color:#2f3848;max-width:620px}
.hero-keywords{color:var(--blue)!important;font-size:15px!important}
.hero-actions{display:flex;gap:16px;margin-top:26px}
.hero-note{font-size:13px;margin-top:16px;font-weight:700;color:#41506a}
.hero-visual{position:relative}
.hero-visual img{filter:drop-shadow(0 24px 32px rgba(15,52,120,.18))}
.float-tag{
  position:absolute;background:#fff;border:1px solid #eef2f9;box-shadow:var(--shadow);
  padding:12px 18px;border-radius:14px;font-weight:800;font-size:14px;color:#14203e
}
.tag-a{top:3%;left:12%}.tag-b{left:0;top:40%}.tag-c{right:-2%;top:35%}.tag-d{right:3%;bottom:14%}.tag-e{right:4%;top:5%}
.section{padding:72px 0}
.section-soft{background:linear-gradient(180deg,#fbfdff,#f4f8ff)}
.section-heading{margin-bottom:42px;max-width:820px}
.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}
.section-heading h2{font-size:40px;line-height:1.3;margin:6px 0 12px;color:#0c1530}
.section-heading p{color:var(--muted)}
.problem-grid,.feature-grid,.benefit-grid{display:grid;gap:20px}
.problem-grid{grid-template-columns:repeat(4,1fr);gap:18px}
.icon-card,.feature-card,.benefit-card,.ba-card{
  background:#fff;border:1px solid #e6edfa;border-radius:20px;box-shadow:var(--shadow)
}
.icon-card{padding:26px 24px}
.icon-circle,.benefit-icon{
  width:54px;height:54px;border-radius:50%;background:#eef4ff;color:var(--blue);
  display:grid;place-items:center;font-weight:900;font-size:22px;margin-bottom:16px
}
.icon-card h3,.feature-card h3,.benefit-card h3{margin:0 0 8px;color:#111b37}
.icon-card p,.feature-card p,.benefit-card p{margin:0;color:#5a6475;font-size:14px}
.compare-wrap{display:grid;grid-template-columns:1fr 260px;gap:20px;align-items:stretch}
.compare-table{border:1px solid #d8e3f8;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.compare-row{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;border-bottom:1px solid #e9eef8}
.compare-row:last-child{border-bottom:0}
.compare-row>div{padding:15px 18px;font-size:14px}
.compare-head{background:#f6f8fc;font-weight:900}
.rankai-col{background:linear-gradient(135deg,#155ce8,#0e75f3);color:#fff}
.good{color:#0757dd;font-weight:800;background:#fbfdff}
.good:before{content:"✓";display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#0e62ed;color:#fff;margin-right:8px;font-size:12px}
.compare-message{background:#fff;border:1px solid #e1e9f8;border-radius:18px;box-shadow:var(--shadow);padding:28px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.mini-chart{font-size:40px;color:var(--blue)}
.compare-message h3{color:#0d58dd;font-size:24px}
.compare-message p{color:#556175;font-size:14px}
.feature-grid{grid-template-columns:repeat(3,1fr)}
.feature-card{padding:30px;min-height:350px;position:relative;overflow:hidden}
.feature-card .num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;margin-bottom:16px}
.mini-ui{margin-top:24px;background:#f7f9fd;border:1px solid #dfe7f5;border-radius:12px;padding:18px;min-height:130px}
.mini-ui>div{height:8px;background:#cdd8eb;border-radius:6px;margin:8px 0;width:90%}
.mini-ui .w70{width:68%}
.mini-ui .img-block{height:48px;width:42%;background:linear-gradient(135deg,#8bb6ff,#3679f4);margin-left:auto}
.rewrite-visual{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:42px}
.doc{width:110px;height:130px;border-radius:12px;display:grid;place-items:center;font-weight:900;border:1px solid #dde5f3}
.doc.before{background:#f4f5f7;color:#7b8494}
.doc.after{background:linear-gradient(160deg,#eaf2ff,#fff);color:var(--blue);border-color:#bcd1ff}
.node-visual{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:15px;position:relative}
.node-visual span,.node-visual strong{border:1px solid #c9dafc;background:#fff;padding:10px;border-radius:14px;text-align:center;color:#0c5be2}
.node-visual strong{grid-column:1/-1;background:#edf4ff}
.flow-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.flow-step{position:relative;background:#fff;border:1px solid #dfe8f7;border-radius:18px;padding:22px 18px;min-height:220px}
.flow-step span{display:inline-grid;place-items:center;background:var(--blue);color:#fff;width:34px;height:34px;border-radius:50%;font-weight:900}
.flow-step h3{font-size:16px;line-height:1.4;color:#0c2155}
.flow-step p{font-size:13px;color:#606b7b}
.auto-strip{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;padding:18px 22px;border:1px solid #cfe0ff;background:#f2f7ff;border-radius:18px;align-items:center}
.auto-strip strong{color:#0d55e8;margin-right:auto}
.auto-strip span{background:#fff;border:1px solid #dbe5f6;padding:7px 12px;border-radius:999px;font-size:12px}
.benefit-grid{grid-template-columns:repeat(3,1fr)}
.benefit-card{padding:30px}
.benefit-subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d9e4f8;border:1px solid #d9e4f8;border-radius:18px;overflow:hidden;margin-top:22px}
.benefit-subgrid>div{background:#fff;padding:22px 28px}
.benefit-subgrid p{margin:4px 0 0;color:#697488;font-size:14px}
.before-after-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ba-card{padding:28px}
.ba-card h3{color:var(--blue);font-size:22px;margin-top:0}
.ba-panels{display:grid;grid-template-columns:1fr 44px 1fr;gap:12px;align-items:center}
.ba-panel{padding:20px;border-radius:14px;min-height:210px}
.ba-panel.muted{background:#f5f6f8;color:#555f70}
.ba-panel.highlight{background:#f2f7ff;border:1px solid #bcd2ff}
.ba-panel ul{padding-left:19px;font-size:13px}
.ba-arrow{text-align:center;font-size:28px;color:var(--blue);font-weight:900}
.asset-flow{margin-top:26px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center;border:1px solid #d6e4ff;background:#f6f9ff;border-radius:18px;padding:26px}
.asset-flow div{text-align:center;font-weight:800;color:#0d4fc4;font-size:14px}
.asset-flow span{color:var(--blue);font-weight:900}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
details{background:#fff;border:1px solid #dfe8f7;border-radius:16px;box-shadow:0 8px 20px rgba(31,68,134,.06);padding:0 22px}
summary{list-style:none;cursor:pointer;padding:19px 38px 19px 0;font-weight:800;position:relative;color:#15203f}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:28px;height:28px;border:1px solid var(--blue);color:var(--blue);display:grid;place-items:center;border-radius:50%;font-size:18px}
details[open] summary:after{content:"−"}
details p{padding:0 0 18px;color:#657083;font-size:14px;margin:0}
.cta-section{padding-top:40px}
.cta-box{
  border-radius:26px;background:linear-gradient(135deg,#084cca,#0e6cf0);
  color:#fff;padding:40px 44px;display:grid;grid-template-columns:1.25fr .75fr;gap:34px;box-shadow:0 18px 38px rgba(4,70,186,.24)
}
.kicker.light{color:#d6e7ff}
.cta-box h2{font-size:36px;line-height:1.3;margin:6px 0 8px}
.cta-box p{color:#e6efff}
.cta-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.cta-badges span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:6px 10px;border-radius:999px;font-size:12px}
.cta-actions{display:grid;gap:14px;align-content:center}
.cta-card{background:#fff;color:#0d55e8;padding:20px 24px;border-radius:15px;display:flex;flex-direction:column}
.cta-card strong{font-size:18px}.cta-card small{color:#5a6577}
.cta-card.orange{background:var(--orange);color:#fff}
.cta-card.orange small{color:#fff0dc}
.platform-strip{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.platform-strip span{border:1px solid #cddcf8;background:#fff;color:#23446f;border-radius:999px;padding:9px 18px;font-weight:700;font-size:13px}
.site-footer{border-top:1px solid #e8edf6;padding:34px 0;background:#fbfcff}
.footer-wrap{display:flex;align-items:center;gap:30px}
.footer-links{display:flex;gap:18px;margin-left:auto;font-size:13px}
.footer-brand .brand-rank{font-size:20px}.footer-brand .brand-pro{font-size:13px}
.footer-brand small{display:none}
.footer-wrap>small{color:#7a8495}
@media (max-width:1020px){
  .nav,.site-header .btn-sm{display:none}
  .menu-btn{display:block}
  .nav.mobile-open{display:flex;position:absolute;left:20px;right:20px;top:76px;background:#fff;box-shadow:var(--shadow);border-radius:16px;padding:18px;flex-direction:column}
  .hero-grid{grid-template-columns:1fr;padding-top:54px}
  .hero-copy{max-width:760px}
  .hero-visual{max-width:760px;margin:auto}
  .problem-grid,.feature-grid,.benefit-grid{grid-template-columns:1fr 1fr}
  .compare-wrap{grid-template-columns:1fr}
  .compare-message{min-height:190px}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .before-after-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
}
@media (max-width:700px){
  .container{width:min(100% - 26px,1360px)}
  .nav-wrap{height:70px}
  .brand small{display:none}
  .hero-grid{min-height:auto;padding:45px 0 75px}
  .hero h1{font-size:39px}
  .hero h2{font-size:21px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-visual{margin-top:10px}
  .float-tag{font-size:10px;padding:7px 9px}
  .tag-c{right:0}
  .section{padding:68px 0}
  .section-heading h2{font-size:29px}
  .problem-grid,.feature-grid,.benefit-grid,.benefit-subgrid{grid-template-columns:1fr}
  .compare-row{grid-template-columns:1fr}
  .compare-head{display:none}
  .compare-row>div:first-child{font-weight:900;background:#f6f8fc}
  .flow-grid{grid-template-columns:1fr}
  .ba-panels{grid-template-columns:1fr}
  .ba-arrow{transform:rotate(90deg)}
  .asset-flow{grid-template-columns:1fr}
  .asset-flow span{transform:rotate(90deg);text-align:center}
  .cta-box{padding:30px 24px}
  .cta-box h2{font-size:29px}
  .footer-wrap{flex-direction:column;align-items:flex-start}
  .footer-links{margin-left:0;flex-wrap:wrap}
}


/* ===== V2 visual upgrade ===== */
.compare-wrap{grid-template-columns:minmax(0,1fr) 300px}
.compare-table{border-radius:22px}
.compare-row>div{padding:17px 20px;font-size:15px}
.compare-message h3{font-size:28px;line-height:1.45}
.compare-message{padding:34px 28px}
.feature-grid{gap:22px}
.feature-card{min-height:390px;padding:32px}
.feature-card h3{font-size:23px}
.feature-card p{font-size:15px}
.feature-card::after{
  content:"";position:absolute;right:-40px;bottom:-50px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle,rgba(54,121,244,.10),rgba(54,121,244,0));
}
.flow-grid{gap:14px}
.flow-step{
  min-height:250px;padding:24px 18px;
  box-shadow:0 10px 24px rgba(30,70,140,.06);
}
.flow-step h3{font-size:17px}
.flow-step p{font-size:14px}
.auto-strip{padding:20px 24px}
.benefit-card{padding:34px;min-height:260px}
.benefit-card h3{font-size:24px}
.benefit-card p{font-size:15px}
.benefit-icon{width:64px;height:64px;font-size:24px}
.ba-card{padding:32px}
.ba-card h3{font-size:24px}
.asset-flow{padding:30px 24px}
.cta-box{padding:46px 50px}
.cta-box h2{font-size:40px}

/* richer hero dashboard wrapper */
.hero-visual{min-height:500px}
.hero-visual img{width:100%;max-width:790px;margin:auto}

/* Visual infographic panels */
.benefit-visual{
  margin-top:24px;border:1px solid #d9e6ff;background:#f7faff;border-radius:18px;
  padding:22px;min-height:145px;position:relative;overflow:hidden;
}
.benefit-visual .bars{display:flex;align-items:end;gap:10px;height:90px}
.benefit-visual .bars i{display:block;width:20%;border-radius:8px 8px 3px 3px;background:linear-gradient(#9fc0ff,#1f69ef)}
.benefit-visual .bars i:nth-child(1){height:34%}
.benefit-visual .bars i:nth-child(2){height:52%}
.benefit-visual .bars i:nth-child(3){height:66%}
.benefit-visual .bars i:nth-child(4){height:82%}
.benefit-visual .bars i:nth-child(5){height:100%}
.ai-network{display:grid;place-items:center;min-height:105px;position:relative}
.ai-network .core{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#0d55e8;color:#fff;font-weight:900}
.ai-network span{position:absolute;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #bed2fb;color:#0d55e8;font-weight:800;font-size:12px}
.ai-network .n1{top:6px;left:12%}.ai-network .n2{top:10px;right:10%}.ai-network .n3{bottom:7px;left:8%}.ai-network .n4{bottom:5px;right:8%}
.asset-network{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.asset-network span{padding:12px 8px;border-radius:12px;background:#fff;border:1px solid #cfe0ff;text-align:center;font-size:12px;font-weight:800;color:#0e57db}
.asset-network .main{grid-column:1/-1;background:#edf4ff;font-size:13px}

/* More faithful before/after visual cards */
.ba-panel{min-height:230px}
.ba-panel strong{display:block;font-size:16px;margin-bottom:14px}
.ba-panel.highlight{box-shadow:inset 0 0 0 1px rgba(13,85,232,.05)}
.ba-panel.highlight::before{
  content:"";display:block;height:10px;width:86%;border-radius:999px;background:#73a3ff;margin-bottom:10px;
  box-shadow:0 22px 0 #9dbdff,0 44px 0 #d1e0ff;
}
.ba-panel.muted::before{
  content:"";display:block;height:9px;width:78%;border-radius:999px;background:#cfd6e1;margin-bottom:10px;
  box-shadow:0 22px 0 #dde2e9,0 44px 0 #e5e9ef;
}

/* Section separators like the reference design */
.section + .section{border-top:1px solid #f0f3f8}

.bridge-cta{
  margin-top:26px;padding:18px 24px;border-radius:18px;background:linear-gradient(90deg,#edf4ff,#f7faff);
  border:1px solid #d3e3ff;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center
}
.bridge-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#0d55e8;color:#fff;font-size:24px;font-weight:900}
.bridge-cta strong{display:block;font-size:20px;color:#10204a}
.bridge-cta span{display:block;color:#4f5c70;font-weight:700}


/* ===== V3 refinement ===== */
.hero{background:
  radial-gradient(circle at 82% 18%,rgba(58,118,255,.19),transparent 29%),
  radial-gradient(circle at 62% 70%,rgba(128,175,255,.10),transparent 35%),
  linear-gradient(180deg,#fbfdff 0,#eef4ff 100%);
}
.hero-grid{min-height:640px;grid-template-columns:1.02fr 1.08fr}
.hero-device-wrap{position:relative}
.hero-visual{min-height:540px}
.hero-visual img{max-width:860px}
.hero-platforms{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px
}
.hero-platforms span{
  background:#fff;border:1px solid #d8e5fb;color:#315080;
  border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;
  box-shadow:0 6px 16px rgba(22,64,135,.05)
}
.tag-f{left:4%;bottom:8%}
.float-tag{font-size:14px;padding:13px 18px}
.tag-a{top:2%;left:17%}
.tag-e{right:5%;top:2%}

.compare-v3{grid-template-columns:minmax(0,1fr) 320px}
.status{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-weight:900;margin-right:6px}
.status.warn{color:#f59e0b;border:1px solid #fbbf24}
.status.mid{color:#64748b;border:1px solid #94a3b8}
.compare-message-v3{
  background:linear-gradient(180deg,#fff,#f6f9ff);
  border:1px solid #d7e5ff;
  overflow:hidden;position:relative
}
.compare-ring{
  width:120px;height:120px;margin:0 auto 12px;border-radius:50%;
  background:conic-gradient(#0d55e8 0 280deg,#dce8ff 280deg);
  display:grid;place-items:center;position:relative
}
.compare-ring:before{
  content:"";position:absolute;inset:13px;border-radius:50%;background:#fff
}
.ring-core{
  position:relative;z-index:1;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;background:#edf4ff;color:#0d55e8;font-size:23px;font-weight:900
}
.compare-message-v3 h3 span{color:#0d55e8}
.compare-mini-points{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.compare-mini-points span{background:#fff;border:1px solid #dce7f9;border-radius:10px;padding:8px;font-size:12px;font-weight:800;color:#315080}

.flow-grid-v3{grid-template-columns:repeat(4,1fr);gap:16px}
.flow-grid-v3 .flow-step:nth-child(n+5){grid-column:span 1}
.flow-step-wide{min-height:330px;padding:26px 20px}
.flow-icon{
  width:58px;height:58px;border-radius:16px;background:#edf4ff;color:#0d55e8;
  display:grid;place-items:center;font-weight:900;font-size:18px;margin:20px 0 16px
}
.flow-ui,.score-gauge,.flow-tags,.image-placeholder,.faq-mini,.publish-ui{margin-top:20px}
.form-ui,.article-ui{background:#f7f9fd;border:1px solid #dfe7f4;border-radius:12px;padding:14px}
.form-ui i,.article-ui i{display:block;height:8px;background:#d6deeb;border-radius:5px;margin:8px 0}
.form-ui b{display:block;margin-top:12px;background:#eaf2ff;border:1px solid #cbdcff;color:#0d55e8;border-radius:9px;text-align:center;padding:9px;font-size:11px}
.article-ui i:nth-child(1){width:85%}.article-ui i:nth-child(2){width:92%}.article-ui i:nth-child(3){width:70%}.article-ui i:nth-child(4){width:80%}
.score-gauge{
  width:126px;height:126px;border-radius:50%;margin-left:auto;margin-right:auto;
  background:conic-gradient(#0d55e8 0 324deg,#dce8ff 324deg 360deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#0d55e8;
  position:relative
}
.score-gauge:before{
  content:"";position:absolute;inset:12px;border-radius:50%;background:#fff
}
.score-gauge strong,.score-gauge small{position:relative;z-index:1}
.score-gauge strong{font-size:20px}.score-gauge small{font-size:10px;color:#65748a}
.flow-tags{display:flex;gap:8px;flex-wrap:wrap}
.flow-tags b{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #cfe0ff;color:#0d55e8;font-size:12px}
.image-placeholder{height:120px;border-radius:14px;background:linear-gradient(135deg,#dce9ff,#7faaf9);position:relative;overflow:hidden}
.image-placeholder span{position:absolute;background:#fff;border-radius:50%;opacity:.8}
.image-placeholder span:nth-child(1){width:50px;height:50px;left:20px;bottom:18px}
.image-placeholder span:nth-child(2){width:34px;height:34px;right:24px;top:20px}
.image-placeholder span:nth-child(3){left:0;right:0;bottom:0;height:35px;border-radius:0;background:rgba(255,255,255,.4)}
.faq-mini{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.faq-mini i{width:30px;height:30px;border-radius:50%;background:#0d55e8;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900}
.faq-mini b{background:#f6f8fc;border:1px solid #e2e8f2;border-radius:8px;padding:9px;font-size:11px}
.publish-ui{background:#f7f9fd;border:1px solid #dfe7f4;border-radius:12px;padding:15px}
.publish-ui em{display:block;height:10px;width:56%;background:#cdd8e7;border-radius:5px;margin-bottom:14px}
.publish-ui button{width:100%;border:0;background:#0d55e8;color:#fff;padding:11px;border-radius:9px;font-weight:900}

.benefit-grid-v3{gap:22px}
.benefit-head{display:flex;align-items:center;gap:14px}
.benefit-head .benefit-icon{margin:0}
.benefit-no{display:block;color:#0d55e8;font-size:12px;font-weight:900;margin-bottom:2px}
.benefit-head h3{margin:0}
.workflow-visual{display:grid;grid-template-columns:1fr auto 110px;gap:14px;align-items:center}
.workflow-before{display:grid;gap:7px}
.workflow-before span{display:block;background:#fff;border:1px solid #d8e4f6;border-radius:8px;padding:7px 10px;font-size:11px;color:#40506a}
.workflow-arrow{font-size:28px;color:#0d55e8;font-weight:900}
.workflow-after{height:120px;border-radius:16px;background:linear-gradient(135deg,#0d55e8,#1679f6);display:grid;place-items:center;color:#fff;font-size:18px;font-weight:900}
.ai-network-v3{min-height:150px}
.ai-network-v3 .core{width:78px;height:78px;z-index:2}
.asset-visual{min-height:150px;position:relative}
.asset-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:110px;height:62px;border-radius:16px;background:#0d55e8;color:#fff;display:grid;place-items:center;font-weight:900
}
.asset-visual span{
  position:absolute;background:#fff;border:1px solid #cfe0ff;color:#0d55e8;
  border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800
}
.asset-visual .a1{left:4%;top:8%}.asset-visual .a2{right:5%;top:8%}.asset-visual .a3{left:3%;bottom:8%}
.asset-visual .a4{right:4%;bottom:8%}.asset-visual .a5{left:40%;top:4%}.asset-visual .a6{left:40%;bottom:3%}

@media (max-width:1100px){
  .flow-grid-v3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .flow-grid-v3{grid-template-columns:1fr}
  .flow-step-wide{min-height:auto}
  .workflow-visual{grid-template-columns:1fr}
  .workflow-arrow{transform:rotate(90deg);text-align:center}
  .workflow-after{height:78px}
}


/* ===== V4 final visual refinement ===== */
.feature-grid-v4{grid-template-columns:repeat(3,1fr);gap:24px}
.feature-card-v4{min-height:430px}
.editor-visual{margin-top:24px;background:#f7f9fd;border:1px solid #dfe8f7;border-radius:16px;overflow:hidden}
.editor-toolbar{height:34px;background:#eef3fa;display:flex;align-items:center;gap:6px;padding:0 12px}
.editor-toolbar i{width:7px;height:7px;border-radius:50%;background:#b9c8de}
.editor-body{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;padding:18px}
.editor-lines span{display:block;height:8px;border-radius:6px;background:#d4deec;margin:10px 0}
.editor-lines span:nth-child(1){width:92%}.editor-lines span:nth-child(2){width:74%}.editor-lines span:nth-child(3){width:84%}.editor-lines span:nth-child(4){width:64%}
.editor-image{border-radius:12px;background:linear-gradient(135deg,#8db7ff,#2f72ee);min-height:115px}
.editor-tags{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 18px}
.editor-tags b{padding:6px 9px;border-radius:999px;background:#fff;border:1px solid #cfe0ff;color:#0d55e8;font-size:11px}
.rewrite-visual-v4{margin-top:34px}
.doc-stack{position:relative;width:125px;height:148px}
.doc-stack:before{content:"";position:absolute;inset:8px -8px -8px 8px;border-radius:12px;background:#eef2f7}
.doc-card{position:relative;z-index:2;width:100%;height:100%;border-radius:12px;background:#fff;border:1px solid #dbe3ef}
.before-stack .doc-card{background:repeating-linear-gradient(to bottom,#fff 0 18px,#d7dee9 18px 24px,#fff 24px 34px)}
.after-stack .doc-card{background:linear-gradient(180deg,#eef5ff,#fff)}
.after-stack .doc-card:after{content:"";position:absolute;left:15px;right:15px;bottom:20px;height:54px;border-radius:9px;background:linear-gradient(135deg,#8db5ff,#276eea)}
.doc-stack span{position:absolute;z-index:3;bottom:10px;left:50%;transform:translateX(-50%);font-weight:900;font-size:12px;color:#234e9a}
.rewrite-arrow{font-size:30px;color:#0d55e8;font-weight:900}
.rewrite-checks{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.rewrite-checks b{padding:6px 9px;border-radius:999px;background:#f3f7ff;color:#0d55e8;border:1px solid #cfe0ff;font-size:11px}
.content-network{height:210px;margin-top:26px;position:relative}
.network-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110px;height:66px;border-radius:16px;background:#0d55e8;color:#fff;display:grid;place-items:center;font-weight:900}
.content-network span{position:absolute;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #cfe0ff;color:#0d55e8;font-weight:800;font-size:11px}
.content-network .p1{left:5%;top:8%}.content-network .p2{right:5%;top:8%}.content-network .p3{left:0;bottom:14%}.content-network .p4{right:0;bottom:14%}.content-network .p5{left:40%;top:0}.content-network .p6{left:38%;bottom:0}

.flow-grid-v3{grid-template-columns:repeat(4,1fr);justify-items:stretch}
.flow-step-5{grid-column:2}
.flow-step-6{grid-column:3}
.flow-step-7{grid-column:4}

.benefit-grid-v4{grid-template-columns:repeat(3,1fr);gap:24px}
.benefit-card-v4{min-height:420px}
.process-map{display:grid;grid-template-columns:1fr auto 125px;gap:14px;align-items:center}
.process-left{display:grid;gap:8px}
.process-left span{background:#fff;border:1px solid #d9e4f5;border-radius:8px;padding:8px 10px;font-size:11px;color:#40516d}
.process-mid{font-size:28px;color:#0d55e8;font-weight:900}
.process-right{height:160px;border-radius:16px;background:linear-gradient(135deg,#0d55e8,#1b7cf7);display:grid;place-items:center;color:#fff;font-weight:900;font-size:20px}
.ai-orbit{position:relative;min-height:175px}
.orbit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;background:#0d55e8;color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px}
.ai-orbit span{position:absolute;padding:8px 11px;border-radius:999px;background:#fff;border:1px solid #cfe0ff;color:#0d55e8;font-weight:800;font-size:11px}
.ai-orbit .o1{left:7%;top:12%}.ai-orbit .o2{right:6%;top:10%}.ai-orbit .o3{left:4%;bottom:10%}.ai-orbit .o4{right:4%;bottom:10%}.ai-orbit .o5{left:40%;top:0}.ai-orbit .o6{left:38%;bottom:0}
.asset-map{position:relative;min-height:175px}
.asset-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:72px;border-radius:16px;background:linear-gradient(135deg,#0d55e8,#1b7cf7);color:#fff;display:grid;place-items:center;font-weight:900}
.asset-map span{position:absolute;padding:8px 11px;border-radius:999px;background:#fff;border:1px solid #cfe0ff;color:#0d55e8;font-weight:800;font-size:11px}
.asset-map .m1{left:3%;top:14%}.asset-map .m2{right:3%;top:14%}.asset-map .m3{left:5%;bottom:14%}.asset-map .m4{right:5%;bottom:14%}.asset-map .m5{left:39%;top:0}.asset-map .m6{left:35%;bottom:0}

@media (max-width:1100px){
  .feature-grid-v4,.benefit-grid-v4{grid-template-columns:1fr 1fr}
  .flow-step-5,.flow-step-6,.flow-step-7{grid-column:auto}
}
@media (max-width:700px){
  .feature-grid-v4,.benefit-grid-v4{grid-template-columns:1fr}
  .process-map{grid-template-columns:1fr}
  .process-mid{text-align:center;transform:rotate(90deg)}
  .process-right{height:90px}
}


/* ===== V5 final polish ===== */

/* Stronger section kickers */
.kicker{
  font-size:15px;
  color:#0d55e8;
  letter-spacing:.04em;
  font-weight:900;
  opacity:1;
  margin-bottom:6px;
}
.section-heading.center .kicker,
.section-heading .kicker{
  position:relative;
}
.section-heading .kicker:after{
  content:"";
  display:inline-block;
  width:28px;
  height:2px;
  background:#6ea0ff;
  vertical-align:middle;
  margin-left:9px;
  border-radius:999px;
}

/* More balanced vertical rhythm */
.section{padding:68px 0}
.section-heading{margin-bottom:36px}
.section-heading h2{margin-top:4px}
.feature-card-v4,
.benefit-card-v4,
.ba-card,
.icon-card{
  box-shadow:0 12px 30px rgba(29,74,155,.08);
}

/* True centered 4 + 3 workflow */
.flow-grid-v3{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:16px;
}
.flow-grid-v3 .flow-step:nth-child(1){grid-column:1 / span 2}
.flow-grid-v3 .flow-step:nth-child(2){grid-column:3 / span 2}
.flow-grid-v3 .flow-step:nth-child(3){grid-column:5 / span 2}
.flow-grid-v3 .flow-step:nth-child(4){grid-column:7 / span 2}
.flow-grid-v3 .flow-step:nth-child(5){grid-column:2 / span 2}
.flow-grid-v3 .flow-step:nth-child(6){grid-column:4 / span 2}
.flow-grid-v3 .flow-step:nth-child(7){grid-column:6 / span 2}

/* Stronger first benefit visual: scattered work -> unified workflow */
.process-map{
  grid-template-columns:1fr auto 135px;
  min-height:175px;
}
.process-left{
  position:relative;
  gap:10px;
}
.process-left span{
  position:relative;
  padding-left:24px;
  background:#fff;
}
.process-left span:before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8fb4ff;
}
.process-left span:nth-child(2){margin-left:10px}
.process-left span:nth-child(3){margin-left:20px}
.process-left span:nth-child(4){margin-left:10px}
.process-mid{
  font-size:36px;
  text-shadow:0 6px 16px rgba(13,85,232,.18);
}
.process-right{
  height:175px;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(13,85,232,.18);
}
.process-right:before,
.process-right:after{
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.35);
  border-radius:14px;
}
.process-right:before{inset:18px}
.process-right:after{inset:34px}
.process-right{font-size:21px}

/* Slight visual uplift for benefits */
.benefit-card-v4{
  border-color:#d9e6fb;
}
.benefit-head{
  margin-bottom:14px;
}
.benefit-no{
  font-size:13px;
  letter-spacing:.04em;
}
.benefit-card-v4 p{
  min-height:78px;
}

/* Better visual contrast around before-after */
.before-after-grid{
  gap:28px;
}
.ba-card{
  border-color:#dbe7fb;
}
.asset-flow{
  background:linear-gradient(90deg,#f7faff,#eef5ff);
}

/* Final CTA breathing room */
.cta-section{padding-bottom:74px}
.cta-box{
  box-shadow:0 20px 42px rgba(4,70,186,.22);
}

/* Tablet/mobile fallback */
@media (max-width:1100px){
  .flow-grid-v3{
    grid-template-columns:repeat(2,1fr);
  }
  .flow-grid-v3 .flow-step:nth-child(n){
    grid-column:auto;
  }
}
@media (max-width:700px){
  .flow-grid-v3{
    grid-template-columns:1fr;
  }
  .process-map{
    grid-template-columns:1fr;
  }
  .process-left span:nth-child(n){
    margin-left:0;
  }
}

.process-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.process-right span{
  font-size:11px;
  letter-spacing:.08em;
  opacity:.9;
  position:relative;
  z-index:2;
}
.process-right strong{
  font-size:22px;
  position:relative;
  z-index:2;
}

/* V6 same-page modal forms */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.modal.is-open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(9,20,46,.66);backdrop-filter:blur(6px)}
.modal-panel{position:relative;z-index:1;width:min(920px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.modal-panel-wide{width:min(1020px,100%)}
.modal-close{position:absolute;right:18px;top:16px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#f2f6fc;color:#31415e;font-size:26px;cursor:pointer}
.modal-content{display:grid;grid-template-columns:.82fr 1.18fr}
.modal-copy{padding:52px 38px;background:linear-gradient(160deg,#0a4ecd,#0d6df2);color:#fff;border-radius:26px 0 0 26px}
.modal-copy h2{font-size:31px;line-height:1.35;margin:10px 0 14px}
.modal-copy p{color:#e8f1ff}
.modal-kicker{display:inline-block;font-weight:900;font-size:13px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:6px 10px;border-radius:999px}
.lead-form{padding:46px 42px 34px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-form label,.lead-form legend{display:block;font-size:13px;font-weight:800;color:#22304b}
.lead-form input[type=text],.lead-form input[type=email],.lead-form input[type=url],.lead-form input[type=tel],.lead-form select,.lead-form textarea{width:100%;margin-top:7px;margin-bottom:14px;border:1px solid #d7e1f0;border-radius:11px;padding:12px 13px;font:inherit}
.lead-form fieldset{border:0;padding:0;margin:4px 0 18px}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.check-grid label{display:flex;gap:8px;background:#f8faff;border:1px solid #e0e8f5;border-radius:10px;padding:9px 10px;font-size:12px}
.form-submit{width:100%}
.form-success{text-align:center;margin-top:14px;padding:24px;border:1px solid #cfe0ff;background:#f6f9ff;border-radius:16px}
.form-success[hidden]{display:none}
.success-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#0d55e8;color:#fff;font-weight:900;font-size:24px}
@media(max-width:820px){.modal-content{grid-template-columns:1fr}.modal-copy{border-radius:26px 26px 0 0;padding:36px 28px}.lead-form{padding:30px 24px}}
@media(max-width:560px){.form-row,.check-grid{grid-template-columns:1fr}}


/* ===== V6.1 form layout fix ===== */
/* Make text labels sit clearly above the input fields */
.lead-form .form-row > label,
.lead-form > label{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

/* Keep checkbox labels horizontal */
.lead-form .check-grid label{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:8px;
}

/* Inputs should be true block fields, not inline beside label text */
.lead-form input[type=text],
.lead-form input[type=email],
.lead-form input[type=url],
.lead-form input[type=tel],
.lead-form select,
.lead-form textarea{
  display:block;
  width:100%;
  margin-top:0;
  box-sizing:border-box;
}

/* Slightly improve spacing between stacked rows */
.lead-form .form-row{
  align-items:start;
  margin-bottom:2px;
}

/* Make the first two left-column fields line up cleanly */
#demo-form .form-row > label,
#download-form .form-row > label{
  min-width:0;
}

/* Better spacing for legend group after the top fields */
#demo-form fieldset,
#download-form fieldset{
  margin-top:8px;
}


/* ===== V6.2 unified form field styling ===== */
/* Ensure every standard field shares the same visual language */
.lead-form input:not([type="checkbox"]):not([type="radio"]),
.lead-form select,
.lead-form textarea{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  margin-top:0;
  margin-bottom:14px;
  padding:12px 13px;
  border:1px solid #d7e1f0;
  border-radius:11px;
  background:#fff;
  color:#1f2d45;
  font:inherit;
  line-height:1.4;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance:none;
  -webkit-appearance:none;
}

/* Keep textarea comfortable */
.lead-form textarea{
  min-height:112px;
  resize:vertical;
}

/* Select arrow */
.lead-form select{
  padding-right:38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #34425b 50%),
    linear-gradient(135deg, #34425b 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* Focus state consistency */
.lead-form input:not([type="checkbox"]):not([type="radio"]):focus,
.lead-form select:focus,
.lead-form textarea:focus{
  border-color:#4d86ef;
  box-shadow:0 0 0 3px rgba(13,85,232,.09);
}

/* Placeholder */
.lead-form input::placeholder,
.lead-form textarea::placeholder{
  color:#8a94a6;
}

/* Labels: consistent spacing above field */
.lead-form .form-row > label,
.lead-form > label{
  gap:8px;
}

/* Checkbox cards remain unchanged and distinct */
.lead-form .check-grid input[type="checkbox"]{
  width:auto;
  min-height:auto;
  margin:2px 0 0;
  padding:0;
  appearance:auto;
  -webkit-appearance:auto;
}


/* ===== V6.3 success state spacing fix ===== */
.form-success{
  margin-top:20px;
  padding:40px 34px 34px;
  border:1px solid #d7e4fb;
  background:#f8fbff;
  border-radius:20px;
  text-align:center;
}
.form-success h3{
  margin:0 0 10px;
  font-size:18px;
  color:#1a2f58;
}
.form-success p{
  margin:0 0 20px;
  color:#687791;
  line-height:1.7;
}
.form-success .success-icon{
  margin:0 auto 18px;
}
.form-success .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(420px,100%);
  margin:0 auto;
}
.form-success .btn + .btn{
  margin-top:14px;
}
.form-success .btn-outline{
  min-height:48px;
}

/* when form is successful, the success card becomes the main content */
.lead-form.is-complete{
  padding-top:34px;
}
.lead-form.is-complete .form-success{
  margin-top:0;
}

/* make hidden state explicit even if browser/style conflicts */
.lead-form [hidden]{
  display:none !important;
}


/* ===== V6.4 website input + success card polish ===== */
.website-help{
  margin:-7px 0 12px;
  font-size:11px;
  color:#7b8798;
}

/* Thank-you card refinement */
.form-success{
  background:linear-gradient(180deg,#fbfdff,#f4f8ff);
  border:1px solid #d3e2fb;
  box-shadow:0 10px 28px rgba(37,85,165,.08);
}
.form-success h3{
  font-size:20px;
}
.form-success .btn-primary{
  margin-top:4px;
}
.success-secondary-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:16px auto 0;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:#0d55e8;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  border-radius:8px;
}
.success-secondary-link:hover{
  background:#edf4ff;
  text-decoration:none;
}
.success-secondary-link:focus-visible{
  outline:3px solid rgba(13,85,232,.15);
  outline-offset:2px;
}


/* ===== WordPress native content templates ===== */
.wp-site-main{
  min-height:60vh;
  padding:72px 0 90px;
  background:#fff;
}
.wp-content-shell{
  width:min(920px, calc(100% - 40px));
  margin:0 auto;
}
.wp-content-shell.wide{
  width:min(1180px, calc(100% - 40px));
}
.entry-header{
  margin:0 0 34px;
}
.entry-kicker{
  margin:0 0 10px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  color:#0d55e8;
}
.entry-title{
  margin:0;
  font-size:clamp(32px,5vw,54px);
  line-height:1.18;
  letter-spacing:-.035em;
  color:#13213b;
}
.entry-meta{
  margin-top:15px;
  color:#7b8798;
  font-size:14px;
}
.entry-content{
  color:#34425b;
  font-size:17px;
  line-height:1.9;
}
.entry-content > *{
  max-width:100%;
}
.entry-content h2{
  margin:54px 0 18px;
  font-size:30px;
  line-height:1.35;
  color:#172846;
}
.entry-content h3{
  margin:38px 0 14px;
  font-size:23px;
  color:#1d3153;
}
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote{
  margin:0 0 22px;
}
.entry-content a{
  color:#0d55e8;
  text-decoration:underline;
  text-underline-offset:3px;
}
.entry-content img{
  max-width:100%;
  height:auto;
  border-radius:16px;
}
.entry-content blockquote{
  padding:20px 24px;
  border-left:4px solid #0d55e8;
  background:#f5f8ff;
  border-radius:0 12px 12px 0;
}
.post-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.post-card{
  display:block;
  padding:28px;
  border:1px solid #e3e9f2;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(36,62,110,.06);
}
.post-card h2{
  margin:10px 0 12px;
  color:#172846;
  font-size:24px;
  line-height:1.35;
}
.post-card p{
  margin:0;
  color:#66738a;
  line-height:1.75;
}
.post-card a{
  color:inherit;
  text-decoration:none;
}
.pagination{
  margin-top:42px;
}
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pagination a,
.pagination span{
  display:inline-flex;
  min-width:40px;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid #dde5f2;
  border-radius:10px;
  text-decoration:none;
}
.pagination .current{
  color:#fff;
  background:#0d55e8;
  border-color:#0d55e8;
}
@media (max-width:760px){
  .wp-site-main{padding:52px 0 70px}
  .wp-content-shell,.wp-content-shell.wide{width:min(100% - 28px,1180px)}
  .post-list{grid-template-columns:1fr}
}


/* ===== v1.0.2 form submitting state ===== */
.lead-form.is-submitting button[type="submit"]{
  cursor:wait;
  opacity:.78;
  pointer-events:none;
}
.lead-form.is-submitting button[type="submit"]::after{
  content:"";
  width:14px;
  height:14px;
  margin-left:9px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  display:inline-block;
  vertical-align:-2px;
  animation:rankai-spin .65s linear infinite;
}
@keyframes rankai-spin{
  to{transform:rotate(360deg)}
}


/* ===== v1.0.3 semantic SVG icon refinement ===== */
.rankai-card-svg{
  width:24px;
  height:24px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.why-card .icon,
.why-card .card-icon,
.problem-card .icon,
.problem-card .card-icon{
  color:#1859f0;
}


/* ===== v1.0.4 precise Before / After label fix ===== */
/* The original labels sat too close to the lower border of the mini document cards. */
.rewrite-visual-v4 .doc-stack{
  position:relative;
}

.rewrite-visual-v4 .rankai-ba-label{
  position:absolute !important;
  z-index:4 !important;
  left:50% !important;
  top:auto !important;
  bottom:18px !important;
  transform:translateX(-50%) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:68px;
  min-height:24px;
  margin:0 !important;
  padding:3px 9px !important;
  box-sizing:border-box;
  white-space:nowrap;
  line-height:1.2;
  background:rgba(255,255,255,.94);
  border-radius:5px;
}

/* Preserve enough visual breathing room around the bottom label. */
.rewrite-visual-v4 .doc-card{
  overflow:hidden;
}


/* ===== v1.0.5 precise Before / After label positions ===== */
/* Based on the verified Yellow Pencil adjustments. */
.rewrite-visual .after-stack span{
  top:89px !important;
  bottom:auto !important;
}

.rewrite-visual .before-stack span{
  top:62px !important;
  bottom:auto !important;
}


/* ===== v1.0.6 finalized semantic icon sizing ===== */
.rankai-card-svg{
  width:28px;
  height:28px;
}

.why-card .icon,
.why-card .card-icon,
.problem-card .icon,
.problem-card .card-icon{
  width:52px;
  height:52px;
}


/* ===== v1.0.8 content network connector fix =====
   SVG is a non-layout overlay only; original node positions remain untouched. */
.content-network{
  position:relative;
}

.content-network-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible;
}

.content-network-lines line{
  stroke:#cfe0ff;
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  opacity:.9;
}

.content-network .network-core,
.content-network span{
  z-index:2;
}


/* ===== v1.0.9 flow network spacing + connectors ===== */
/* Scope only to the two network diagrams inside the operating-structure section. */

.rankai-flow-network-ai,
.rankai-flow-network-asset{
  position:relative !important;
  box-sizing:border-box !important;
  padding:22px 26px !important;
  overflow:hidden !important;
}

/* Keep every chip safely away from the outer border. */
.rankai-flow-network-ai > span,
.rankai-flow-network-asset > span{
  max-width:calc(100% - 24px);
  box-sizing:border-box;
}

/* Slightly pull edge chips inward without changing their overall composition. */
.rankai-flow-network-ai .p1,
.rankai-flow-network-ai .p3,
.rankai-flow-network-asset .p1,
.rankai-flow-network-asset .p3{
  left:18px !important;
}

.rankai-flow-network-ai .p2,
.rankai-flow-network-ai .p4,
.rankai-flow-network-asset .p2,
.rankai-flow-network-asset .p4{
  right:18px !important;
}

/* Preserve the top/bottom chips with more breathing room. */
.rankai-flow-network-ai .p5,
.rankai-flow-network-asset .p5{
  top:14px !important;
}

.rankai-flow-network-ai .p6,
.rankai-flow-network-asset .p6{
  bottom:14px !important;
}

/* Subtle connector network. Pure overlay; does not participate in layout. */
.rankai-flow-network-ai::before,
.rankai-flow-network-asset::before{
  content:"";
  position:absolute;
  inset:16% 12%;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(30deg, transparent 49.45%, rgba(59,130,246,.20) 49.7%, rgba(59,130,246,.20) 50.3%, transparent 50.55%),
    linear-gradient(90deg, transparent 49.45%, rgba(59,130,246,.20) 49.7%, rgba(59,130,246,.20) 50.3%, transparent 50.55%),
    linear-gradient(150deg, transparent 49.45%, rgba(59,130,246,.20) 49.7%, rgba(59,130,246,.20) 50.3%, transparent 50.55%);
  mask-image:radial-gradient(circle at center, #000 0 58%, transparent 73%);
  -webkit-mask-image:radial-gradient(circle at center, #000 0 58%, transparent 73%);
}

.rankai-flow-network-ai > *,
.rankai-flow-network-asset > *{
  position:relative;
  z-index:2;
}

@media (max-width:700px){
  .rankai-flow-network-ai,
  .rankai-flow-network-asset{
    padding:18px 20px !important;
  }

  .rankai-flow-network-ai .p1,
  .rankai-flow-network-ai .p3,
  .rankai-flow-network-asset .p1,
  .rankai-flow-network-asset .p3{
    left:14px !important;
  }

  .rankai-flow-network-ai .p2,
  .rankai-flow-network-ai .p4,
  .rankai-flow-network-asset .p2,
  .rankai-flow-network-asset .p4{
    right:14px !important;
  }
}


/* ===== v1.1.0 Content Asset SVG diagram ===== */
.content-asset-svg-wrap{
  width:100%;
  margin-top:18px;
}

.content-asset-svg{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}


/* ===== v1.1.1 Content Asset SVG cleanup ===== */
.content-asset-svg-wrap{
  position:relative;
  width:100%;
  margin-top:18px;
  padding:0;
  overflow:visible;
  background:transparent;
  border:0;
}

.content-asset-svg-wrap::before,
.content-asset-svg-wrap::after{
  content:none !important;
}

.content-asset-svg{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0 auto;
}


/* ===== v1.1.3 benefit SVG diagrams ===== */
.benefit-svg-wrap{
  width:100%;
  margin-top:18px;
}

.benefit-svg{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0 auto;
}


/* ===== v1.1.4 feature SVG diagram ===== */
.feature-svg-wrap{
  width:100%;
  margin-top:18px;
}

.feature-svg{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0 auto;
}


/* ===== v1.1.5 Before / After title vertical alignment ===== */
.before-after-grid .ba-card strong{
  position:relative;
  top:-6px;
}


/* ===== v1.1.6 Mobile Hero RWD final override ===== */
@media (max-width:700px){

  /* The later desktop V3 rules were overriding the earlier mobile grid.
     Force the Hero back to a true single-column mobile layout. */
  .hero-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:30px !important;
    min-height:auto !important;
    padding:34px 0 58px !important;
    align-items:start !important;
  }

  .hero-copy{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .eyebrow{
    display:inline-flex;
    width:auto;
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    line-height:1.55;
    font-size:14px;
    padding:7px 12px;
    margin-bottom:20px;
  }

  .hero h1{
    font-size:clamp(38px,11vw,46px) !important;
    line-height:1.18 !important;
    letter-spacing:-.035em !important;
    margin-bottom:22px !important;
    word-break:normal;
    overflow-wrap:normal;
  }

  .hero h1 br{
    display:none;
  }

  .hero h2{
    font-size:22px !important;
    line-height:1.55 !important;
    margin-bottom:16px !important;
  }

  .hero-copy > p{
    font-size:16px;
    line-height:1.9;
  }

  .hero-keywords{
    font-size:13px !important;
    line-height:1.8 !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:24px !important;
  }

  .hero-actions .btn{
    width:100%;
    box-sizing:border-box;
    justify-content:center;
  }

  .hero-note{
    line-height:1.7;
  }

  /* Mobile visual: dashboard first, feature tags become a clean grid below it.
     No absolutely-positioned labels are allowed to overlap the headline. */
  .hero-visual{
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    margin:0 !important;
  }

  .hero-device-wrap{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }

  .hero-device-wrap > img{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto 4px !important;
  }

  .hero-device-wrap .float-tag{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-width:0;
    width:100%;
    box-sizing:border-box;
    margin:0 !important;
    padding:8px 7px !important;
    font-size:11px !important;
    line-height:1.35 !important;
    text-align:center;
    white-space:normal !important;
    border-radius:12px !important;
    box-shadow:0 5px 14px rgba(26,67,137,.07) !important;
  }

  .hero-platforms{
    margin-top:14px !important;
    gap:7px !important;
  }

  .hero-platforms span{
    padding:7px 10px !important;
    font-size:11px !important;
  }
}

@media (max-width:390px){
  .hero h1{
    font-size:36px !important;
  }

  .hero h2{
    font-size:20px !important;
  }

  .hero-device-wrap{
    grid-template-columns:1fr 1fr !important;
  }

  .hero-device-wrap .float-tag{
    font-size:10px !important;
    padding:7px 5px !important;
  }
}


/* ===== v1.1.7 Mobile GPT comparison RWD final override ===== */
@media (max-width:700px){

  /* Later desktop compare-v3 rules were forcing a wide second column,
     causing the table to collapse into a narrow vertical strip. */
  .compare-wrap,
  .compare-wrap.compare-v3,
  .compare-v3{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:18px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .compare-table{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border-radius:18px !important;
  }

  .compare-head{
    display:none !important;
  }

  .compare-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    border-bottom:1px solid #e7edf8 !important;
  }

  .compare-row:last-child{
    border-bottom:0 !important;
  }

  .compare-row > div{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding:13px 16px !important;
    font-size:14px !important;
    line-height:1.65 !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }

  /* Item title */
  .compare-row > div:first-child{
    padding:14px 16px 10px !important;
    background:#f5f8fd !important;
    color:#17243b !important;
    font-weight:900 !important;
    font-size:15px !important;
  }

  /* GPT block */
  .compare-row > div:nth-child(2){
    position:relative;
    padding-top:36px !important;
    background:#fff !important;
    color:#445169;
  }

  .compare-row > div:nth-child(2)::before{
    content:"ChatGPT / GPT";
    position:absolute;
    top:10px;
    left:16px;
    color:#6b778c;
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
  }

  /* RankAI block */
  .compare-row > div:nth-child(3){
    position:relative;
    padding-top:36px !important;
    background:#f7fbff !important;
    color:#0d55e8 !important;
    font-weight:800 !important;
  }

  .compare-row > div:nth-child(3)::before{
    content:"RankAI Pro";
    position:absolute;
    top:10px;
    left:16px;
    color:#0d55e8;
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
  }

  .compare-message,
  .compare-message-v3{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:auto !important;
    box-sizing:border-box !important;
    padding:26px 20px !important;
    border-radius:18px !important;
  }

  .compare-message-v3 h3,
  .compare-message h3{
    font-size:24px !important;
    line-height:1.45 !important;
    margin:14px 0 10px !important;
  }

  .compare-message-v3 p,
  .compare-message p{
    font-size:14px !important;
    line-height:1.75 !important;
  }

  .compare-ring{
    width:116px !important;
    height:116px !important;
    margin:0 auto 10px !important;
  }

  .compare-mini-points{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
}

@media (max-width:390px){
  .compare-row > div{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .compare-row > div:nth-child(2)::before,
  .compare-row > div:nth-child(3)::before{
    left:14px;
  }

  .compare-message-v3 h3,
  .compare-message h3{
    font-size:22px !important;
  }
}


/* ===== v1.1.8 Mobile GPT comparison cleanup ===== */
@media (max-width:700px){

  /* Must come after .compare-row display:grid, otherwise the header row reappears. */
  .compare-row.compare-head,
  .compare-head{
    display:none !important;
  }

  /* Keep the ChatGPT label above its block. */
  .compare-row > div:nth-child(2)::before{
    content:"ChatGPT / GPT" !important;
    position:absolute !important;
    top:10px !important;
    left:16px !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    color:#6b778c !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
  }

  /* Use ::after for the RankAI label so it does not collide with .good::before check icon. */
  .compare-row > div:nth-child(3)::before{
    content:"✓" !important;
    position:static !important;
    display:inline-grid !important;
    place-items:center !important;
    width:21px !important;
    height:21px !important;
    margin-right:8px !important;
    padding:0 !important;
    border-radius:50% !important;
    background:#0e62ed !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1 !important;
    vertical-align:middle !important;
  }

  .compare-row > div:nth-child(3)::after{
    content:"RankAI Pro";
    position:absolute;
    top:10px;
    left:16px;
    color:#0d55e8;
    font-size:11px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:.02em;
  }

  .compare-row > div:nth-child(3){
    padding-top:36px !important;
  }
}

@media (max-width:390px){
  .compare-row > div:nth-child(2)::before,
  .compare-row > div:nth-child(3)::after{
    left:14px !important;
  }
}


/* ===== v1.1.9 Mobile comparison labels: real HTML, no pseudo text ===== */
.mobile-compare-label{
  display:none;
}

@media (max-width:700px){

  /* Disable the previous pseudo-label approach completely. */
  .compare-row > div:nth-child(2)::before,
  .compare-row > div:nth-child(3)::after{
    content:none !important;
    display:none !important;
  }

  /* Restore the normal RankAI blue check icon. */
  .compare-row > div:nth-child(3)::before{
    content:"✓" !important;
    position:static !important;
    display:inline-grid !important;
    place-items:center !important;
    width:21px !important;
    height:21px !important;
    margin-right:8px !important;
    padding:0 !important;
    border-radius:50% !important;
    background:#0e62ed !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1 !important;
    vertical-align:middle !important;
  }

  .compare-row > div:nth-child(2),
  .compare-row > div:nth-child(3){
    padding-top:12px !important;
  }

  .mobile-compare-label{
    display:block !important;
    width:auto !important;
    margin:0 0 10px !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1.25 !important;
    letter-spacing:.02em;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }

  .mobile-gpt-label{
    color:#6b778c !important;
  }

  .mobile-rankai-label{
    color:#0d55e8 !important;
  }

  /* Keep the actual RankAI answer on one clean line-flow after the check icon. */
  .compare-row > div.good{
    line-height:1.65 !important;
  }
}


/* ===== v1.1.10 Safari-safe comparison rows ===== */
/* Explicit HTML icons + flex rows replace pseudo-element layout.
   This keeps Safari and Chrome consistent and keeps icons before the text. */

.good::before,
.compare-row > div:nth-child(2)::before,
.compare-row > div:nth-child(3)::before,
.compare-row > div:nth-child(3)::after{
  content:none !important;
  display:none !important;
}

.compare-answer-line{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

.compare-answer-text{
  display:block;
  min-width:0;
  flex:1 1 auto;
}

.rankai-check,
.status{
  flex:0 0 auto;
  margin:0 !important;
}

.rankai-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  border-radius:50%;
  background:#0e62ed;
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
}

@media (min-width:701px){
  .mobile-compare-label{
    display:none !important;
  }

  .compare-answer-line{
    align-items:center;
  }
}

@media (max-width:700px){
  .compare-row.compare-head,
  .compare-head{
    display:none !important;
  }

  .compare-row > div:nth-child(2),
  .compare-row > div:nth-child(3){
    padding:12px 16px 14px !important;
  }

  .mobile-compare-label{
    display:block !important;
    margin:0 0 10px !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .mobile-gpt-label{
    color:#6b778c !important;
  }

  .mobile-rankai-label{
    color:#0d55e8 !important;
  }

  .compare-answer-line{
    display:flex !important;
    align-items:flex-start !important;
    gap:9px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .compare-answer-text{
    font-size:14px !important;
    line-height:1.6 !important;
    font-weight:500 !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  .compare-rankai-cell .compare-answer-text{
    color:#0d55e8 !important;
    font-weight:800 !important;
  }

  .status,
  .rankai-check{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    flex-basis:22px !important;
    font-size:12px !important;
    line-height:1 !important;
    margin-top:1px !important;
  }

  .status{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

@media (max-width:390px){
  .compare-row > div:nth-child(2),
  .compare-row > div:nth-child(3){
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .compare-answer-text{
    font-size:13.5px !important;
  }
}


/* ===== v1.1.11 Mobile bridge CTA RWD ===== */
@media (max-width:700px){
  .bridge-cta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    align-items:center !important;
    justify-items:center !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin-top:22px !important;
    padding:24px 20px !important;
    text-align:center !important;
    border-radius:18px !important;
  }

  .bridge-icon{
    width:50px !important;
    height:50px !important;
    font-size:22px !important;
    margin:0 auto !important;
  }

  .bridge-cta > div:not(.bridge-icon){
    width:100% !important;
    min-width:0 !important;
  }

  .bridge-cta strong{
    display:block !important;
    font-size:20px !important;
    line-height:1.45 !important;
    margin:0 0 8px !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .bridge-cta span{
    display:block !important;
    font-size:14px !important;
    line-height:1.75 !important;
    color:#556175 !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  .bridge-cta .btn{
    width:100% !important;
    max-width:340px !important;
    min-height:48px !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    margin-top:2px !important;
  }
}

@media (max-width:390px){
  .bridge-cta{
    padding:22px 16px !important;
  }

  .bridge-cta strong{
    font-size:19px !important;
  }

  .bridge-cta span{
    font-size:13.5px !important;
  }
}


/* ===== v1.1.12 Mobile 7-step flow card refinement ===== */
@media (max-width:700px){

  .flow-grid{
    gap:18px !important;
  }

  .flow-step,
  .flow-step-wide{
    padding:24px 22px !important;
    min-height:auto !important;
    border-radius:20px !important;
  }

  .flow-step > span,
  .flow-step-wide > span{
    margin-bottom:14px !important;
  }

  .flow-icon{
    width:62px !important;
    height:62px !important;
    margin:0 0 18px !important;
    font-size:24px !important;
    border-radius:18px !important;
  }

  .flow-step h3,
  .flow-step-wide h3{
    margin:0 0 10px !important;
    font-size:22px !important;
    line-height:1.45 !important;
    text-align:left !important;
  }

  .flow-step p,
  .flow-step-wide p{
    margin:0 0 18px !important;
    font-size:15px !important;
    line-height:1.8 !important;
    text-align:left !important;
  }

  /* Keep visual/demo UI centered under left-aligned copy. */
  .flow-ui,
  .score-gauge,
  .flow-tags,
  .image-placeholder,
  .faq-mini,
  .publish-ui{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .flow-ui,
  .image-placeholder,
  .faq-mini,
  .publish-ui{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .score-gauge{
    margin-top:6px !important;
  }

  .flow-tags{
    justify-content:flex-start !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  .flow-tags b{
    padding:8px 14px !important;
  }
}

@media (max-width:390px){
  .flow-step,
  .flow-step-wide{
    padding:22px 18px !important;
  }

  .flow-icon{
    width:58px !important;
    height:58px !important;
    font-size:22px !important;
    margin-bottom:16px !important;
  }

  .flow-step h3,
  .flow-step-wide h3{
    font-size:20px !important;
  }

  .flow-step p,
  .flow-step-wide p{
    font-size:14.5px !important;
  }
}


/* ===== v1.1.14 final Japanese copy / mobile line-break polish ===== */
.compare-message-v3 h3 > span{
  display:block;
}

@media (max-width:700px){
  .compare-message-v3 h3{
    max-width:100%;
    text-wrap:balance;
  }

  .compare-message-v3 h3 > span{
    display:block;
    margin-top:2px;
  }
}


/* ===== v1.1.15 Desktop compare-message headline polish ===== */
/* The referenced screenshot is desktop, not mobile.
   Keep the shorter final Japanese copy, but size it so each phrase
   sits cleanly on its own line inside the 320px comparison side card. */
@media (min-width:701px){
  .compare-message-v3 h3{
    font-size:24px !important;
    line-height:1.45 !important;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }

  .compare-message-v3 h3 > span{
    display:block;
    margin-top:4px;
  }
}


/* ===== v1.1.16 stable SVG icon for step 05 ===== */
.flow-icon-svg svg{
  width:28px;
  height:28px;
  display:block;
  fill:none;
  stroke:#0d55e8;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:700px){
  .flow-icon-svg svg{
    width:30px;
    height:30px;
  }
}

/* ===== RankAI Pro multilingual language switcher ===== */
.language-switcher{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:600;color:#8390a6}
.language-switcher a{color:#526078;text-decoration:none;transition:color .2s ease}
.language-switcher a:hover,.language-switcher a.active{color:var(--blue)}
.nav-lang-mobile{display:none}
@media (max-width:1100px) and (min-width:701px){
  .nav-wrap{gap:18px}
  .nav{gap:16px}
  .language-switcher{font-size:11px}
}
@media (max-width:700px){
  .language-switcher{display:none}
  .nav-lang-mobile{display:block;padding-top:10px;border-top:1px solid #edf1f7;font-size:13px}
  .nav-lang-mobile a{display:inline;padding:0;color:#526078}
}

/* Public form honeypot: hidden off-screen but available to simplistic bots. */
.rankai-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}

/* ===== v1.3.12 multilingual privacy policy ===== */
.privacy-main{padding:118px 0 80px;background:linear-gradient(180deg,#f7faff 0,#fff 280px)}
.privacy-shell{max-width:960px}
.privacy-hero{padding:42px 0 36px;border-bottom:1px solid #e6edf8}
.privacy-hero .kicker{display:inline-flex;margin-bottom:14px;color:var(--blue);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.privacy-hero h1{margin:0 0 14px;color:var(--ink);font-size:46px;line-height:1.15;letter-spacing:-.035em}
.privacy-hero p{max-width:760px;margin:0 0 12px;color:#516078;font-size:18px;line-height:1.8}
.privacy-hero small{color:#8190a7}
.privacy-content{padding:18px 0 0}
.privacy-content section{padding:28px 0;border-bottom:1px solid #edf1f7}
.privacy-content section:last-child{border-bottom:0}
.privacy-content h2{margin:0 0 12px;color:var(--ink);font-size:24px;line-height:1.45}
.privacy-content p,.privacy-content li{color:#4f5e74;font-size:16px;line-height:1.9}
.privacy-content p{margin:0 0 10px}
.privacy-content ul{margin:8px 0 0;padding-left:1.35em}
.privacy-content a{color:var(--blue);text-decoration:none}
.privacy-content a:hover{text-decoration:underline}
@media (max-width:700px){
  .privacy-main{padding:88px 0 56px}
  .privacy-hero{padding:30px 0 28px}
  .privacy-hero h1{font-size:34px}
  .privacy-hero p{font-size:16px}
  .privacy-content section{padding:22px 0}
  .privacy-content h2{font-size:21px}
  .privacy-content p,.privacy-content li{font-size:15px}
}