:root{--bg:#07101f;--bg2:#0a1730;--panel:#0d1d38;--line:rgba(255,255,255,.11);--text:#f3f7ff;--muted:#a8b7cf;--blue:#66a8ff;--violet:#786cff;--mint:#55e6c1;--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.75;background:radial-gradient(circle at 8% 0,rgba(102,168,255,.17),transparent 30%),radial-gradient(circle at 95% 12%,rgba(120,108,255,.16),transparent 28%),linear-gradient(180deg,var(--bg),#081426 48%,var(--bg));overflow-x:hidden}a{color:inherit;text-decoration:none}.container{width:min(calc(100% - 40px),var(--max));margin:auto}.section{padding:100px 0}.section-sm{padding:62px 0}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#c9dbff;font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.eyebrow:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--blue),var(--mint))}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(46px,7vw,82px);line-height:1.08;letter-spacing:-.05em;margin-bottom:24px}h2{font-size:clamp(31px,4.2vw,50px);line-height:1.2;letter-spacing:-.04em;margin:18px 0}h3{font-size:21px;line-height:1.4;margin-bottom:10px}.lead{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:780px}.muted{color:var(--muted)}.gradient{background:linear-gradient(105deg,#fff 0,#9dccff 43%,#8c80ff 73%,#69e7ca);-webkit-background-clip:text;background-clip:text;color:transparent}.header{position:sticky;top:0;z-index:20;backdrop-filter:blur(16px);background:rgba(7,16,31,.72);border-bottom:1px solid rgba(255,255,255,.08)}.nav{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;font-weight:900}.mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 10px 30px rgba(102,168,255,.25)}.links{display:flex;gap:24px;color:#c5d1e3;font-size:14px}.links a:hover{color:white}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:850;transition:.2s}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 14px 36px rgba(91,125,255,.27)}.btn-primary:hover{transform:translateY(-2px)}.btn-ghost{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.03)}.hero{padding:108px 0 76px}.hero-grid{display:grid;grid-template-columns:1.07fr .93fr;gap:60px;align-items:center}.hero .lead{margin-bottom:31px}.actions{display:flex;gap:12px;flex-wrap:wrap}.notes{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:#b8c6da;font-size:13px}.notes span{display:flex;align-items:center;gap:7px}.check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:#06151c;font-size:11px;font-weight:900}.visual{position:relative;min-height:510px}.orb{position:absolute;border-radius:50%}.orb1{width:286px;height:286px;right:18px;top:18px;background:radial-gradient(circle at 34% 27%,rgba(255,255,255,.86),rgba(102,168,255,.72) 17%,rgba(120,108,255,.4) 47%,rgba(13,29,56,.08) 73%);box-shadow:inset -45px -55px 95px rgba(4,10,27,.45),0 60px 130px rgba(68,105,255,.24)}.orb2{width:175px;height:175px;left:-10px;bottom:45px;background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.84),rgba(85,230,193,.5) 24%,rgba(31,114,151,.16) 63%,transparent 72%)}.mock{position:absolute;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(17,35,66,.96),rgba(10,24,46,.9));box-shadow:0 26px 85px rgba(0,0,0,.32);backdrop-filter:blur(20px);border-radius:24px}.mock-main{inset:116px 18px auto 42px;padding:22px;transform:rotate(-2deg)}.mock-small{right:-8px;bottom:18px;width:245px;padding:18px;transform:rotate(3deg)}.dots{display:flex;gap:6px}.dots i{width:7px;height:7px;border-radius:50%;background:#708099}.mock-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.mock-title{font-size:12px;color:#b9c7db}.mock-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:14px}.box{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:rgba(255,255,255,.025)}.line{height:8px;border-radius:999px;background:rgba(179,197,225,.14);margin-bottom:10px}.short{width:58%}.pill{display:inline-block;margin:7px 4px 0 0;padding:6px 10px;border-radius:999px;background:rgba(102,168,255,.13);color:#bfdaff;font-size:11px}.stat{display:flex;align-items:center;justify-content:space-between;gap:15px}.stat strong{font-size:31px;letter-spacing:-.04em}.status{padding:5px 9px;border-radius:999px;background:rgba(85,230,193,.12);color:#90f4d8;font-size:11px}.chart{display:flex;align-items:end;gap:8px;height:105px;margin-top:14px}.chart i{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--blue),rgba(120,108,255,.38));min-width:18px}.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:23px 0}.strip strong{display:block;font-size:20px}.strip span{font-size:13px;color:var(--muted)}.two-col{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:start}.pain-list{display:grid;gap:12px}.pain{display:flex;gap:15px;padding:20px 22px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025)}.pain-num{min-width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,214,138,.12);color:#ffd68a;font-size:12px;font-weight:900}.pain b{display:block;margin-bottom:3px}.pain span{font-size:14px;color:var(--muted)}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,35,66,.72),rgba(10,24,46,.63));border-radius:22px;padding:28px;box-shadow:0 22px 58px rgba(0,0,0,.16)}.card:hover{border-color:rgba(102,168,255,.34)}.icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(135deg,rgba(102,168,255,.22),rgba(120,108,255,.17));font-weight:900}.card p{font-size:14px;color:var(--muted);margin-bottom:0}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.tag{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);color:#c9d5e7;font-size:12px}.strengths{grid-column:span 2}.strength{display:grid;grid-template-columns:74px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--line)}.strength:last-child{border-bottom:0}.strength-no{color:#86b8ff;font-size:13px;font-weight:900;letter-spacing:.1em}.strength p{margin-bottom:0}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:36px}.delivery-timeline{grid-template-columns:repeat(4,1fr)}.post-launch-step{border-color:rgba(85,230,193,.34);background:linear-gradient(180deg,rgba(85,230,193,.08),rgba(255,255,255,.025))}.post-launch-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.post-launch-phase{padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.post-launch-phase strong{display:block;margin-bottom:5px;color:#dceaff;font-size:14px}.post-launch-phase span{display:block;color:var(--muted);font-size:12px;line-height:1.65}.post-launch-phase.highlight{border-color:rgba(85,230,193,.32);background:rgba(85,230,193,.055)}.overlap-note{margin-top:14px;padding:12px 15px;border-radius:13px;background:rgba(102,168,255,.08);color:#c9dcf7;font-size:12px}.step{position:relative;padding:24px 20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.step:not(:last-child):after{content:"→";position:absolute;right:-13px;top:44%;color:rgba(255,255,255,.35)}.step time{color:#9ec4ff;font-size:12px;font-weight:900}.step h3{font-size:16px;margin:8px 0}.step p{font-size:13px;color:var(--muted);margin:0}.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}.price-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(17,36,68,.88),rgba(9,23,45,.82));padding:30px}.featured{border-color:rgba(102,168,255,.7);box-shadow:0 28px 80px rgba(68,105,255,.18)}.badge{position:absolute;right:18px;top:18px;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--violet));font-size:11px;font-weight:900}.kicker{color:#a8c7f5;font-size:13px;font-weight:850}.price{font-size:42px;line-height:1.2;letter-spacing:-.04em;font-weight:900;margin:10px 0 4px}.price small{font-size:14px;color:var(--muted);font-weight:700;letter-spacing:0}.price-card>p{color:var(--muted);font-size:14px}.price-card hr{border:0;border-top:1px solid var(--line);margin:22px 0}.price-card ul{list-style:none;padding:0;margin:0}.price-card li{display:flex;gap:10px;margin:10px 0;color:#ced9e9;font-size:14px}.price-card li:before{content:"✓";color:var(--mint);font-weight:900}.continue{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}.continue .price{font-size:34px}.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.techbox{padding:22px;border:1px solid var(--line);border-radius:18px}.techbox h3{font-size:15px}.techlist{display:flex;flex-wrap:wrap;gap:8px}.techlist span{padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);color:#c9d5e7;font-size:12px}.faq{display:grid;gap:12px;margin-top:34px}details{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);padding:0 20px}summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-weight:850;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:0;top:16px;font-size:24px;color:#9bbef4}details[open] summary:after{content:"−"}details p{color:var(--muted);padding:0 0 20px;margin:0}.cta{padding:50px;border:1px solid rgba(102,168,255,.3);border-radius:30px;background:radial-gradient(circle at 80% 10%,rgba(120,108,255,.2),transparent 28%),linear-gradient(135deg,rgba(16,38,74,.96),rgba(10,25,50,.92));box-shadow:0 26px 85px rgba(0,0,0,.28)}.cta-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px}.form{padding:24px;border-radius:20px;background:rgba(6,15,30,.5);border:1px solid var(--line)}.field{margin-bottom:14px}label{display:block;margin-bottom:7px;font-size:13px;color:#cad8eb;font-weight:700}input,select,textarea{width:100%;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);color:#fff;outline:none;font:inherit}textarea{min-height:118px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:rgba(102,168,255,.75)}.form-note{font-size:11px;color:#899ab3;margin:12px 0 0}footer{padding:36px 0;border-top:1px solid var(--line);color:#8798b2;font-size:13px}.footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}@media(max-width:980px){.links{display:none}.hero-grid,.two-col,.cta-grid{grid-template-columns:1fr}.visual{min-height:455px}.grid3{grid-template-columns:1fr}.strengths{grid-column:auto}.process{grid-template-columns:repeat(2,1fr)}.step:not(:last-child):after{display:none}.tech{grid-template-columns:1fr}}@media(max-width:720px){.post-launch-flow{grid-template-columns:1fr}.container{width:min(calc(100% - 28px),var(--max))}.section{padding:74px 0}.hero{padding-top:72px}h1{font-size:46px}.visual{min-height:390px}.mock-main{inset:93px 0 auto 3px}.mock-small{width:210px;right:0;bottom:0}.orb1{width:230px;height:230px}.grid2,.pricing,.continue,.strip-grid{grid-template-columns:1fr}.process{grid-template-columns:1fr}.mock-grid{grid-template-columns:1fr}.mock-grid .box:first-child{display:none}.cta{padding:28px 20px}.price{font-size:36px}.nav .btn-ghost{display:none}}

.faq-group{display:grid;gap:12px;margin-top:34px}
.faq-group:first-child{margin-top:0}
.faq-group>h3{margin:8px 0 2px;color:#dce9fb;font-size:18px}
.faq-group>h3:before{content:"";display:inline-block;width:22px;height:2px;margin:0 10px 5px 0;background:linear-gradient(90deg,var(--blue),var(--mint))}

#plans{
  background:
    radial-gradient(circle at 15% 15%, rgba(90,156,255,.12), transparent 30%),
    radial-gradient(circle at 90% 70%, rgba(84,227,190,.08), transparent 32%);
}
#plans .pricing{margin-top:44px}
#plans .price-card{
  min-height:100%;
  padding:36px;
  border-width:1px;
}
#plans .price-card.featured{
  border:2px solid rgba(90,156,255,.9);
  box-shadow:0 28px 90px rgba(66,112,255,.22);
}
#plans .price-card:not(.featured){
  border:2px solid rgba(255,255,255,.16);
}
#plans .kicker{
  display:block;
  font-size:17px;
  line-height:1.55;
  color:#eaf2ff;
  font-weight:900;
}
#plans .price{font-size:48px;margin-top:14px}
.plan-outcome{
  display:grid;
  gap:5px;
  margin:22px 0 2px;
  padding:16px 18px;
  border:1px solid rgba(90,156,255,.24);
  border-radius:15px;
  background:rgba(90,156,255,.07);
}
.plan-outcome strong{font-size:13px;color:#aecdff}
.plan-outcome span{font-size:14px;color:#dce7f7}
.plan-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:25px;
}
.plan-chips span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#d7e4f7;
  font-size:13px;
}
.plan-chips b{color:#83b7ff}
.delivery-policy{
  margin-top:24px;
  padding:28px;
  border:1px solid rgba(84,227,190,.26);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(84,227,190,.07),rgba(90,156,255,.05));
}
.delivery-policy h3{margin:8px 0 12px;font-size:24px}
.delivery-policy p{margin:9px 0;color:var(--muted)}
@media(max-width:720px){
  #plans .price-card{padding:26px 22px}
  #plans .price{font-size:39px}
}


/* v5 pricing section */
#plans{
  background:
    radial-gradient(circle at 12% 8%,rgba(102,168,255,.14),transparent 30%),
    radial-gradient(circle at 92% 72%,rgba(84,227,190,.09),transparent 34%);
}
.plans-heading{max-width:880px}
.main-plan-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:24px;
  margin-top:46px;
  align-items:stretch;
}
.main-plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:38px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(17,36,68,.94),rgba(8,22,44,.9));
  box-shadow:0 28px 80px rgba(0,0,0,.18);
  overflow:hidden;
}
.main-plan-card:before{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-90px;
  top:-100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(102,168,255,.2),transparent 70%);
  pointer-events:none;
}
.primary-plan{
  border:2px solid rgba(102,168,255,.86);
  box-shadow:0 32px 100px rgba(66,112,255,.22);
}
.custom-plan{border:2px solid rgba(255,255,255,.16)}
.plan-card-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.plan-number{
  display:block;
  margin-bottom:10px;
  color:#83b7ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
}
.main-plan-card h3{
  margin:0;
  font-size:clamp(26px,3vw,38px);
  line-height:1.28;
  letter-spacing:-.035em;
}
.plan-type-tag,.payment-tag,.monthly-note{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:850;
}
.plan-type-tag{
  color:#d8e7fb;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.plan-summary{
  position:relative;
  z-index:1;
  min-height:104px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:15px;
}
.plan-price-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
  padding-top:23px;
  border-top:1px solid var(--line);
}
.price-label{
  display:block;
  margin-bottom:4px;
  color:#9eb1cc;
  font-size:12px;
  font-weight:750;
}
.main-plan-card .price{
  margin:0;
  font-size:46px;
}
.payment-tag{
  margin-bottom:8px;
  color:#06151b;
  background:var(--mint);
}
.payment-tag.secondary{
  color:#d9e9ff;
  border:1px solid rgba(102,168,255,.28);
  background:rgba(102,168,255,.1);
}
.billing-example{
  position:relative;
  z-index:1;
  margin-top:19px;
  padding:17px 18px;
  border-radius:16px;
  border:1px solid rgba(102,168,255,.24);
  background:rgba(102,168,255,.07);
}
.billing-example.secondary{
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.035);
}
.billing-example>strong{
  display:block;
  margin-bottom:11px;
  color:#dceaff;
  font-size:13px;
}
.billing-example>p{
  margin:0;
  color:#afbdd1;
  font-size:12px;
}
.billing-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:10px;
}
.billing-steps span{
  padding:10px;
  border-radius:11px;
  background:rgba(4,13,27,.34);
  color:#e5eefb;
  font-size:12px;
}
.billing-steps b{
  display:block;
  margin-bottom:2px;
  color:#9fc8ff;
  font-size:10px;
}
.main-plan-card .plan-outcome{
  position:relative;
  z-index:1;
  margin:18px 0 0;
}
.main-plan-card ul{
  position:relative;
  z-index:1;
  flex:1;
  list-style:none;
  padding:0;
  margin:24px 0 0;
}
.main-plan-card li{
  display:flex;
  gap:10px;
  margin:10px 0;
  color:#ced9e9;
  font-size:14px;
}
.main-plan-card li:before{
  content:"✓";
  color:var(--mint);
  font-weight:900;
}
.plan-cta{
  position:relative;
  z-index:1;
  width:100%;
  margin-top:24px;
}
.plan-divider{
  display:flex;
  align-items:center;
  gap:18px;
  margin:54px 0 34px;
  color:#a9bad1;
  font-size:13px;
  font-weight:850;
  letter-spacing:.08em;
}
.plan-divider:before,.plan-divider:after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.continuation-heading{
  display:block;
  margin-bottom:24px;
}
.continuation-heading h3{
  margin:10px 0 12px;
  font-size:30px;
}
.continuation-heading p{
  max-width:780px;
  margin:0;
  color:var(--muted);
}
.monthly-note{
  margin-top:14px;
  color:#b8c8dd;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
}
@media(max-width:980px){
  .main-plan-grid{grid-template-columns:1fr}
  .plan-summary{min-height:0}
}
@media(max-width:720px){
  .main-plan-card{padding:27px 21px}
  .main-plan-card h3{font-size:29px}
  .main-plan-card .price{font-size:38px}
  .plan-card-head,.plan-price-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .payment-tag{margin-bottom:0}
  .billing-steps{grid-template-columns:1fr}
}

.rounding-note{
  position:relative;
  z-index:1;
  margin:10px 0 0;
  color:#a9bad1;
  font-size:12px;
  font-weight:700;
}

.scope-message{
  margin-top:22px;
  padding:22px 24px;
  border:1px solid rgba(102,168,255,.23);
  border-radius:18px;
  background:rgba(102,168,255,.055);
}
.scope-message strong{
  display:block;
  margin-bottom:7px;
  color:#e6f0ff;
  font-size:16px;
}
.scope-message p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.example-card{
  display:flex;
  flex-direction:column;
}
.example-card>p{
  min-height:100px;
}
.example-scope{
  display:grid;
  gap:5px;
  margin-top:auto;
  padding:13px 14px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
}
.example-scope b{
  color:#a9cbff;
  font-size:11px;
}
.example-scope span{
  color:#d2deee;
  font-size:12px;
  line-height:1.65;
}
@media(max-width:980px){
  .example-card>p{min-height:0}
}

.duration-examples{
  background:
    radial-gradient(circle at 8% 16%,rgba(84,227,190,.08),transparent 28%),
    radial-gradient(circle at 92% 76%,rgba(102,168,255,.1),transparent 32%);
}
.duration-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:38px;
}
.duration-card{
  display:flex;
  flex-direction:column;
  padding:28px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:23px;
  background:linear-gradient(180deg,rgba(16,35,66,.75),rgba(9,23,45,.67));
}
.duration-card:nth-child(2){
  border-color:rgba(102,168,255,.35);
  box-shadow:0 22px 65px rgba(66,112,255,.10);
}
.duration-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.duration-month{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.04em;
  color:#f0f6ff;
}
.duration-label{
  max-width:145px;
  color:#9db1ce;
  font-size:11px;
  line-height:1.5;
  text-align:right;
}
.duration-card h3{
  min-height:62px;
  margin-bottom:10px;
}
.duration-card>p{
  min-height:112px;
  color:var(--muted);
  font-size:14px;
}
.duration-example,.duration-scope{
  display:grid;
  gap:7px;
  margin-top:16px;
  padding:15px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.028);
}
.duration-example b,.duration-scope b{
  color:#a9cbff;
  font-size:11px;
}
.duration-example span{
  position:relative;
  padding-left:13px;
  color:#d7e2f1;
  font-size:12px;
}
.duration-example span:before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--mint);
}
.duration-scope{
  margin-top:auto;
}
.duration-scope span{
  color:#c6d3e5;
  font-size:12px;
  line-height:1.75;
}
.duration-note{
  margin-top:22px;
  padding:22px 24px;
  border:1px solid rgba(255,214,138,.2);
  border-radius:18px;
  background:rgba(255,214,138,.045);
}
.duration-note strong{
  display:block;
  margin-bottom:7px;
  color:#f3e5c7;
}
.duration-note p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
@media(max-width:980px){
  .duration-grid{grid-template-columns:1fr}
  .duration-card h3,.duration-card>p{min-height:0}
  .duration-label{max-width:none}
}

.infrastructure-cost-note{
  margin-top:20px;
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.infrastructure-cost-note strong{
  display:block;
  margin-bottom:6px;
  color:#dce9fb;
  font-size:14px;
}
.infrastructure-cost-note p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}
.plan-cost-footnote{
  position:relative;
  z-index:1;
  margin:18px 0 0;
  color:#92a5c0;
  font-size:11px;
  line-height:1.65;
}
.plan-contract-note{
  position:relative;
  z-index:1;
  margin:18px 0 0;
  padding:13px 15px;
  border-left:3px solid var(--mint);
  border-radius:0 10px 10px 0;
  background:rgba(84,227,190,.055);
  color:#c9d8e8;
  font-size:13px;
  line-height:1.75;
}

/* v10 hero spacing adjustment */
.hero .eyebrow{
  margin-bottom:24px;
}
.hero h1{
  margin-top:0;
}
@media(max-width:720px){
  .hero .eyebrow{
    margin-bottom:20px;
  }
}

/* v12 duration label and availability adjustments */
.duration-label{
  max-width:none;
  white-space:nowrap;
}
@media(max-width:720px){
  .duration-label{
    white-space:normal;
    text-align:left;
  }
}
.quarter-capacity-note{
  margin-top:20px;
  padding:18px 20px;
  border:1px solid rgba(84,227,190,.24);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(84,227,190,.06),rgba(102,168,255,.045));
}
.quarter-capacity-note strong{
  display:block;
  margin-bottom:6px;
  color:#ddf8ef;
  font-size:14px;
}
.quarter-capacity-note p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
}

/* v13 Japanese explanatory-text wrapping */
.section .lead{
  line-break:strict;
  word-break:auto-phrase;
  overflow-wrap:normal;
  text-wrap:pretty;
}
.section:not(.hero) .lead{
  max-width:1040px;
}
.no-break{
  white-space:nowrap;
}
@supports not (word-break:auto-phrase){
  .section .lead{
    word-break:normal;
  }
}
@media(max-width:980px){
  .section:not(.hero) .lead{
    max-width:100%;
  }
}

/* v14 pricing card alignment */
#plans .main-plan-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
#plans .main-plan-card{
  width:100%;
  min-width:0;
}
#plans .main-plan-card h3{
  min-height:auto;
}
.plan-title-nowrap{
  white-space:nowrap;
}
@media(max-width:980px){
  #plans .main-plan-grid{
    grid-template-columns:1fr;
  }
  .plan-title-nowrap{
    white-space:normal;
  }
}

/* v17 PLAN 02 title */
#plans .main-plan-card h3 .plan-title-02{
  display:inline-block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
}
@media(max-width:520px){
  #plans .main-plan-card h3 .plan-title-02{
    white-space:normal;
  }
}

/* v18 pricing-card title sizing */
#plans .main-plan-card h3{
  font-size:26px;
  line-height:1.32;
  letter-spacing:-.03em;
}
#plans .plan-card-head{
  gap:12px;
}
#plans .plan-card-head > div{
  min-width:0;
}
#plans .plan-type-tag{
  flex:0 0 auto;
  min-width:max-content;
  white-space:nowrap;
  word-break:keep-all;
  writing-mode:horizontal-tb;
}
#plans .main-plan-card h3 .plan-title-02{
  white-space:nowrap;
}

/* 2カラムで窮屈になる幅では、早めに1カード表示へ切り替える */
@media(max-width:1120px){
  #plans .main-plan-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:520px){
  #plans .main-plan-card h3{
    font-size:25px;
  }
  #plans .main-plan-card h3 .plan-title-02{
    white-space:normal;
  }
}

/* v19 synchronized pricing-card rows */
#plans .plan-price-section{
  position:relative;
  z-index:1;
  min-width:0;
}

@supports (grid-template-rows:subgrid){
  #plans .main-plan-grid{
    grid-template-rows:repeat(8,auto);
  }

  #plans .main-plan-card{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 8;
    row-gap:0;
  }

  #plans .main-plan-card > [data-plan-row]{
    min-width:0;
  }

  #plans .main-plan-card > ul[data-plan-row]{
    flex:none;
  }
}

/* 1カード表示では、各カードの文量に応じた自然な高さへ戻します */
@media(max-width:1120px){
  @supports (grid-template-rows:subgrid){
    #plans .main-plan-card{
      display:flex;
      grid-row:auto;
    }
  }
}
/* v20 AWS infrastructure cost reference */
.infra-cost-details{margin-top:16px;padding:0;border-color:rgba(102,168,255,.24);background:rgba(7,16,31,.32)}
.infra-cost-details summary{padding:16px 48px 16px 18px;color:#dce9fb;font-size:13px}
.infra-cost-details summary:after{right:18px;top:11px}
.infra-cost-content{padding:0 18px 18px}
.infra-cost-content>p{margin:0 0 14px;padding:0}
.infra-cost-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:12px}
.infra-cost-table th,.infra-cost-table td{padding:12px 13px;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
.infra-cost-table th:last-child,.infra-cost-table td:last-child{border-right:0}
.infra-cost-table tbody tr:last-child th,.infra-cost-table tbody tr:last-child td{border-bottom:0}
.infra-cost-table thead th{color:#dce9fb;background:rgba(102,168,255,.1);font-weight:850;white-space:nowrap}
.infra-cost-table tbody th{color:#eaf2ff;background:rgba(255,255,255,.025);font-weight:850}
.infra-cost-table td{color:var(--muted)}
.infra-cost-table .cost-range{color:#9fd2ff;font-weight:850;white-space:nowrap}
.infra-cost-notes{display:grid;gap:6px;margin-top:14px}
.infra-cost-notes p{margin:0;padding:0;color:#92a5c0;font-size:11px;line-height:1.7}
.infra-cost-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 20px}
.infra-cost-summary div{padding:13px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.025)}
.infra-cost-summary span,.infra-cost-summary small{display:block;color:#9bacc4;font-size:10px;line-height:1.55}
.infra-cost-summary strong{display:block;margin:3px 0;color:#9fd2ff;font-size:17px}
.infra-cost-section-title{margin:20px 0 10px;color:#dce9fb;font-size:13px}
.infra-cost-breakdown td{white-space:nowrap}
.infra-cost-total th,.infra-cost-total td{color:#eaf2ff;font-weight:900;background:rgba(102,168,255,.075)}
@media(max-width:720px){
  .infra-cost-content{padding:0 14px 16px}
  .infra-cost-summary{grid-template-columns:1fr}
  .infra-cost-table,.infra-cost-table tbody,.infra-cost-table tr,.infra-cost-table th,.infra-cost-table td{display:block;width:100%}
  .infra-cost-table thead{display:none}
  .infra-cost-table tbody tr{padding:14px;border-bottom:1px solid rgba(255,255,255,.1)}
  .infra-cost-table tbody tr:last-child{border-bottom:0}
  .infra-cost-table tbody th,.infra-cost-table tbody td{padding:0;border:0;background:none}
  .infra-cost-table tbody th{margin-bottom:10px;color:#eaf2ff;font-size:14px}
  .infra-cost-table tbody td{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px;margin-top:7px}
  .infra-cost-table tbody td:before{content:attr(data-label);color:#c7d8ef;font-weight:750}
  .infra-cost-table .cost-range{white-space:normal}
}
/* v21 continuation plans */
#plans .continue{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
#plans .continue .card{display:flex;min-width:0;flex-direction:column}
#plans .continue .featured,#plans .continue .custom-plan{position:relative;padding-top:34px}
#plans .continue .price{font-size:32px}
#plans .continue .price small{display:block;margin-top:5px;line-height:1.5}
.plan-name-line{display:block}
#plans .compact-launch-plan h3 .plan-name-line{margin-top:3px;color:#dceaff}
#plans .continue .kicker .plan-name-line{margin-top:2px;color:#a8c7f5}
.continuation-plan-description{min-height:100px}
.continuation-scope{display:grid;gap:7px;margin:18px 0 0;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.025)}
.continuation-scope span{color:#cad7e9;font-size:12px;line-height:1.6}
.continuation-scope span:before{content:"✓";margin-right:8px;color:var(--mint);font-weight:900}
.continuation-billing-note{display:block;margin-top:auto;padding-top:17px;color:#b8c8dd;font-size:11px;line-height:1.65}
.continuation-availability-note{display:block;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);color:#d8c59d;font-size:11px;line-height:1.65}
.continuation-terms{margin-top:18px;padding:17px 20px;border:1px solid rgba(102,168,255,.2);border-radius:16px;background:rgba(102,168,255,.045)}
.continuation-terms p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}
@media(max-width:1120px){
  #plans .continue{grid-template-columns:1fr}
  .continuation-plan-description{min-height:0}
}
/* v22 single launch plan */
#plans .main-plan-grid{grid-template-columns:minmax(0,900px);justify-content:center}
#plans .primary-plan>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media(max-width:720px){
  #plans .primary-plan>ul{grid-template-columns:1fr}
}
/* v23 compact launch plan */
#plans .main-plan-grid{
  grid-template-columns:minmax(0,720px);
  margin-top:36px;
}
#plans .compact-launch-plan{
  display:block;
  grid-template-rows:none;
  grid-row:auto;
  padding:30px;
  overflow:hidden;
}
#plans .compact-launch-plan:before{
  width:320px;
  height:320px;
  right:-120px;
  top:-160px;
}
.launch-plan-core,.launch-plan-details{
  position:relative;
  z-index:1;
  min-width:0;
  padding:0;
}
.launch-plan-details{
  border:0;
  background:none;
}
#plans .compact-launch-plan h3{
  max-width:520px;
  font-size:27px;
  line-height:1.3;
}
#plans .compact-launch-plan .plan-summary{
  min-height:0;
  margin:17px 0 0;
  color:#b8c7dc;
  font-size:14px;
  line-height:1.78;
}
#plans .compact-launch-plan .plan-price-row{
  margin-top:18px;
  padding-top:0;
  border-top:0;
}
#plans .compact-launch-plan .price{font-size:39px}
#plans .compact-launch-plan .payment-tag{
  margin-bottom:6px;
  color:#fff;
}
#plans .compact-launch-plan .plan-contract-note{
  margin-top:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-size:11px;
  line-height:1.65;
}
#plans .compact-launch-plan .billing-example{
  margin-top:16px;
  padding:14px;
}
#plans .compact-launch-plan .billing-example>strong{margin-bottom:8px}
.billing-inline{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.billing-inline span{
  padding:9px 8px;
  border-radius:10px;
  background:rgba(4,13,27,.38);
  text-align:center;
}
.billing-inline small{
  display:block;
  margin-bottom:1px;
  color:#9fc8ff;
  font-size:9px;
  font-weight:850;
}
.billing-inline strong{
  color:#eef5ff;
  font-size:13px;
}
.billing-caption{
  margin:8px 0 0;
  color:#96a8c0;
  font-size:10px;
  line-height:1.55;
}
#plans .compact-launch-plan .plan-cta{margin-top:18px}
#plans .compact-launch-plan .plan-outcome{
  margin:0;
  padding:15px 16px;
}
.launch-scope-compact{
  display:grid;
  gap:6px;
  margin-top:18px;
  padding:13px 14px;
  border-radius:13px;
  background:rgba(255,255,255,.028);
}
.launch-scope-compact span{
  color:#d3deed;
  font-size:12px;
  line-height:1.6;
}
.launch-scope-compact span:before{
  content:"✓";
  margin-right:8px;
  color:var(--mint);
  font-weight:900;
}
.launch-support{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 14px;
  margin-top:22px;
  padding:14px 15px;
  border:1px solid rgba(85,230,193,.22);
  border-radius:14px;
  background:rgba(85,230,193,.055);
}
.launch-support span{
  grid-row:span 2;
  align-self:center;
  padding:5px 8px;
  border-radius:999px;
  color:#06151b;
  background:var(--mint);
  font-size:9px;
  font-weight:900;
}
.launch-support strong{color:#e9fff9;font-size:13px}
.launch-support small{color:#9fb9b5;font-size:10px;line-height:1.5}
#plans .compact-launch-plan .plan-cost-footnote{
  margin-top:15px;
  font-size:10px;
}
.launch-plan-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.launch-plan-note{
  min-width:0;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:rgba(255,255,255,.025);
}
.launch-plan-note span{
  display:block;
  margin-bottom:3px;
  color:#90bfff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
}
.launch-plan-note strong{
  display:block;
  color:#edf5ff;
  font-size:12px;
  line-height:1.55;
}
.launch-plan-note small{
  display:block;
  margin-top:3px;
  color:#93a6c0;
  font-size:9px;
  line-height:1.55;
}
@media(max-width:900px){
  #plans .compact-launch-plan{grid-template-columns:1fr}
}
@media(max-width:520px){
  #plans .compact-launch-plan{padding:25px 21px}
  #plans .compact-launch-plan h3{font-size:27px}
  #plans .compact-launch-plan .price{font-size:37px}
  #plans .compact-launch-plan .plan-card-head{padding-right:72px}
  .launch-support{grid-template-columns:1fr;gap:5px}
  .launch-support span{grid-row:auto;width:max-content}
}
@media(max-width:720px){
  #plans .compact-launch-plan .plan-card-head{
    padding-right:72px;
  }
  .launch-plan-notes{grid-template-columns:1fr;gap:8px}
}

/* Contact form */
#contact .cta-grid,#contact .cta-grid>*,#contact .form,#contact .field{min-width:0}
#contact input,#contact select,#contact textarea{min-width:0;max-width:100%}
#contact select{display:block;text-overflow:ellipsis}
/* 相談内容は開発内容の選択で4行のひな形が入るため、既定の高さでも全項目が見える高さにする。 */
#contact textarea{min-height:172px}
/* 自動設定した開発プランの表示欄。プルダウンと同じ配色にし、長い名称も折り返して表示する。 */
#contact .field-derived{display:block;width:100%;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);color:#fff;font:inherit;line-height:1.55}
#contact .field-derived[data-state="empty"]{color:#9db0cb}
.required-mark{margin-left:6px;color:#8fc1ff;font-size:11px}
.field-help{margin:6px 0 0;color:#8fa2bd;font-size:11px}
.privacy-check{display:flex;align-items:flex-start;gap:10px;margin:17px 0;color:#cbd8e9;font-size:12px;line-height:1.65}
.privacy-check input{width:18px;height:18px;flex:0 0 auto;margin:3px 0 0;accent-color:var(--blue)}
.privacy-check a,.form-note a{color:#a9ceff;text-decoration:underline;text-underline-offset:3px}
.form-status{min-height:25px;margin:13px 0 0;font-size:12px;font-weight:700}
.form-status:empty{display:none}
.form-status[data-state="error"]{color:#ffb4bc}
/* 送信成功のトースト。フォーム下部の小さな文字では完了に気付きにくいため、画面へ固定して知らせる。
   画面下部は`01_LP/analytics.js`の同意バナー（z-index 10000）と設定ボタンが使うため上部へ置き、
   重なった場合も完了表示が隠れないようにする。トップページは`light-ui`のみで使用するため、
   白背景前提の配色を1組だけ持つ。 */
.form-toast{
  position:fixed;
  left:16px;
  right:16px;
  top:16px;
  z-index:10001;
  display:none;
  align-items:flex-start;
  gap:16px;
  width:min(calc(100% - 32px),540px);
  margin:0 auto;
  padding:16px 18px;
  border:1px solid rgba(66,191,168,.5);
  border-left:5px solid #2f9c86;
  border-radius:16px;
  background:#fff;
  box-shadow:0 22px 60px rgba(20,40,74,.22);
  text-align:left;
}
.form-toast[data-state="success"]{display:flex;animation:form-toast-in .24s ease-out}
/* HTMLとCSSは別世代で配信されうるため、hidden属性でも確実に隠す。 */
.form-toast[hidden]{display:none}
.form-toast:focus{outline:none}
.form-toast:focus-visible{outline:3px solid rgba(83,104,238,.55);outline-offset:3px}
.form-toast-body{flex:1 1 auto;min-width:0}
.form-toast-title{margin:0;color:#15243b;font-size:15px;font-weight:800;line-height:1.55}
.form-toast-detail{margin:4px 0 0;color:#40536e;font-size:13px;line-height:1.7}
.form-toast-detail:empty{display:none}
.form-toast-close{
  flex:0 0 auto;
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(55,83,127,.2);
  border-radius:999px;
  background:#f7f9fd;
  color:#40536e;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.form-toast-close:hover{background:#eef2fb}
@keyframes form-toast-in{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .form-toast[data-state="success"]{animation:none}
}
@media(max-width:720px){
  .form-toast{top:12px;padding:14px 15px;gap:12px}
  .form-toast-title{font-size:14px}
}
.turnstile-container{min-height:65px;margin-top:15px}
.turnstile-container>div,.turnstile-container iframe{max-width:100%}
.form button:disabled{cursor:not-allowed;filter:saturate(.55);opacity:.72;transform:none}
.honeypot-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
select option{background:#0d1d38;color:#fff}
@media(max-width:720px){
  #contact .form{padding:20px 16px}
  #contact select{font-size:14px}
}
.insight-section{
  background:
    radial-gradient(circle at 8% 18%,rgba(255,214,138,.055),transparent 28%),
    radial-gradient(circle at 92% 76%,rgba(102,168,255,.09),transparent 32%);
}
.insight-section-solutions{
  background:
    radial-gradient(circle at 92% 18%,rgba(102,168,255,.09),transparent 30%),
    radial-gradient(circle at 8% 78%,rgba(85,230,193,.05),transparent 28%);
}
.insight-list{
  display:grid;
  gap:12px;
}
.insight-card{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:16px;
  align-items:start;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(16,35,66,.65),rgba(10,24,46,.58));
  transition:border-color .2s,transform .2s;
}
.insight-card:hover{
  transform:translateY(-2px);
  border-color:rgba(102,168,255,.34);
}
.insight-number{
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#dceaff;
  background:linear-gradient(135deg,rgba(102,168,255,.24),rgba(120,108,255,.18));
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.insight-card h3{
  margin:1px 0 5px;
  font-size:16px;
  line-height:1.55;
}
.insight-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
@media(max-width:720px){
  .insight-card{
    grid-template-columns:36px 1fr;
    gap:13px;
    padding:18px;
  }
  .insight-number{
    width:32px;
    height:32px;
    border-radius:10px;
    font-size:11px;
  }
}
/* Challenges: 見出しを全幅に置いて2行に収め、その下で説明とカードを2列に並べる。
   スマートフォン幅では、2行目の12文字が画面幅に収まるよう、この見出しだけ文字を小さくする */
#challenges .challenges-heading{
  grid-column:1 / -1;
  margin-bottom:-34px;
}
#challenges .challenges-heading h2{
  margin-bottom:0;
}
@media(max-width:980px){
  #challenges .challenges-heading{
    margin-bottom:-40px;
  }
}
@media(max-width:720px){
  #challenges .challenges-heading h2{
    font-size:min(31px,7.4vw);
  }
}
#plans .main-plan-grid{
  grid-template-columns:1fr;
  grid-template-rows:none;
  width:100%;
  max-width:none;
  justify-content:stretch;
}
#plans .compact-launch-plan{
  width:100%;
  max-width:none;
}
.extended-development-note{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 14px;
  margin-top:18px;
  padding:15px 16px;
  border:1px solid rgba(102,168,255,.24);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(102,168,255,.08),rgba(85,230,193,.045));
}
.extended-development-note>span{
  grid-row:span 2;
  align-self:center;
  padding:5px 9px;
  border-radius:999px;
  color:#dceaff;
  background:rgba(102,168,255,.14);
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}
.extended-development-note strong{color:#eef6ff;font-size:14px}
.extended-development-note small{display:block;color:#9eb0c8;font-size:10px;line-height:1.6}
@media(max-width:520px){
  .extended-development-note{grid-template-columns:1fr;gap:6px}
  .extended-development-note>span{grid-row:auto;width:max-content}
}

:root{
  --light-ink:#15243b;
  --light-muted:#627187;
  --light-line:rgba(39,67,108,.13);
  --light-surface:#ffffff;
  --light-soft:#f7f9fd;
  --light-soft-blue:#f1f5ff;
  --light-accent:#5368ee;
  --light-violet:#785ce8;
  --light-mint:#42bfa8;
  --light-shadow:0 18px 54px rgba(38,62,102,.09);
  --light-shadow-hover:0 26px 70px rgba(38,62,102,.14);
}
body.light-ui{
  --bg:#ffffff;
  --bg2:#f7f9fd;
  --panel:#ffffff;
  --line:var(--light-line);
  --text:var(--light-ink);
  --muted:var(--light-muted);
  --blue:var(--light-accent);
  --violet:var(--light-violet);
  --mint:var(--light-mint);
  color:var(--light-ink);
  background:#fff;
}
body.light-ui .header{
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(39,67,108,.1);
  box-shadow:0 8px 28px rgba(28,51,89,.05);
}
body.light-ui .header.is-scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 36px rgba(28,51,89,.11);
}
body.light-ui .brand,
body.light-ui .links,
body.light-ui .header .btn{
  color:var(--light-ink);
}
body.light-ui .links a:hover{color:var(--light-accent)}
body.light-ui .mark{
  color:#fff;
  box-shadow:0 10px 28px rgba(83,104,238,.22);
}
body.light-ui .btn-primary{
  color:#fff;
  background:linear-gradient(135deg,#5067ee,#7659e7);
  box-shadow:0 14px 34px rgba(83,104,238,.24);
}
body.light-ui .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(83,104,238,.32);
}
body.light-ui .btn-ghost{
  color:#263b58;
  border-color:rgba(55,82,128,.2);
  background:rgba(255,255,255,.8);
}
body.light-ui .btn-ghost:hover{
  color:var(--light-accent);
  border-color:rgba(83,104,238,.35);
}
body.light-ui .hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:112px;
  color:var(--light-ink);
  background:
    radial-gradient(circle at 82% 18%,rgba(90,113,255,.13),transparent 24%),
    radial-gradient(circle at 12% 78%,rgba(80,183,255,.08),transparent 25%),
    linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}
body.light-ui .hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.64;
  background-image:
    linear-gradient(rgba(91,116,169,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,116,169,.08) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.18));
}
body.light-ui .hero:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:520px;
  height:520px;
  right:-180px;
  bottom:-355px;
  border-radius:50%;
  border:1px solid rgba(94,112,240,.16);
  box-shadow:
    0 0 0 56px rgba(94,112,240,.018),
    0 0 0 112px rgba(94,112,240,.012);
}
body.light-ui .hero .eyebrow{color:#536987}
body.light-ui .hero .gradient{
  background:linear-gradient(108deg,#14243a 0%,#203c74 42%,#5368ee 70%,#785ce8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body.light-ui .hero .lead{color:#5f6f85}
body.light-ui .hero .notes{color:#53667f}
/* ボタンの下に、入口・検証プランのMVP開発への導線を1行だけ置く（Issue #456）。 */
.hero .hero-plan-link{margin:16px 0 0}
body.light-ui .hero .check{
  color:#fff;
  background:linear-gradient(135deg,#596fed,#7b60e9);
}
body.light-ui .hero .visual{min-height:500px}
body.light-ui .hero .orb1{
  opacity:.12;
  filter:saturate(.7);
}
body.light-ui .hero .orb2{
  opacity:.12;
  filter:saturate(.7);
}
body.light-ui .hero .mock{
  color:#20324b;
  border-color:rgba(48,75,120,.13);
  background:rgba(255,255,255,.94);
  box-shadow:0 34px 90px rgba(51,74,112,.18),0 0 54px rgba(83,104,238,.08);
}
body.light-ui .hero .mock-main{
  transform:perspective(1000px) rotateY(-4deg) rotateX(1deg) rotate(-1deg);
}
body.light-ui .hero .mock-small{
  border-color:rgba(66,191,168,.18);
  background:rgba(255,255,255,.96);
}
body.light-ui .hero .dots i{background:#b7c2d4}
body.light-ui .hero .mock-title,
body.light-ui .hero .muted{color:#66768c!important}
body.light-ui .hero .box{
  border-color:rgba(55,83,129,.1);
  background:#f8faff;
}
body.light-ui .hero .line{background:#dfe6f2}
body.light-ui .hero .pill{
  color:#405db2;
  background:#edf2ff;
}
body.light-ui .hero .status{
  color:#278f7d;
  background:#e6f7f2;
}
body.light-ui .hero .chart i{
  background:linear-gradient(180deg,#6177ef,#a094ef);
}
.hero-tech-chip{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(58,84,132,.14);
  border-radius:10px;
  color:#385276;
  background:rgba(255,255,255,.88);
  box-shadow:0 14px 34px rgba(44,68,107,.12);
  backdrop-filter:blur(12px);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
.hero-tech-chip:before{
  content:"";
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#5f7af3,#8467ea);
  box-shadow:0 0 13px rgba(101,121,241,.4);
}
.hero-tech-chip-ai{left:5px;top:62px}
.hero-tech-chip-stack{right:2px;top:82px}
.hero-tech-chip-launch{left:4px;bottom:44px}
body.light-ui .strip{
  color:var(--light-ink);
  border-color:var(--light-line);
  background:#fff;
  box-shadow:0 14px 34px rgba(28,57,98,.05);
}
body.light-ui .strip span{color:var(--light-muted)}
body.light-ui main>.section{
  --text:var(--light-ink);
  --muted:var(--light-muted);
  --line:var(--light-line);
  color:var(--light-ink);
  background:#fff;
  border-top:1px solid rgba(39,67,108,.055);
}
body.light-ui main>.section:nth-of-type(4n+2){
  background:linear-gradient(180deg,#fbfcff,#f8faff);
}
body.light-ui main>.section .eyebrow{color:#536987}
body.light-ui main>.section .eyebrow:before{
  background:linear-gradient(90deg,#5478ff,#7f65e8);
}
body.light-ui .card,
body.light-ui .insight-card,
body.light-ui .duration-card,
body.light-ui .step,
body.light-ui .post-launch-phase,
body.light-ui .delivery-policy,
body.light-ui .techbox,
body.light-ui details,
body.light-ui .price-card,
body.light-ui .main-plan-card{
  color:var(--light-ink);
  border-color:var(--light-line);
  background:#fff;
  box-shadow:var(--light-shadow);
}
body.light-ui .card:hover,
body.light-ui .insight-card:hover,
body.light-ui .duration-card:hover,
body.light-ui .price-card:hover{
  transform:translateY(-4px);
  border-color:rgba(83,104,238,.3);
  box-shadow:var(--light-shadow-hover);
}
body.light-ui .card p,
body.light-ui .insight-card p,
body.light-ui .duration-card>p,
body.light-ui .step p,
body.light-ui .post-launch-phase span,
body.light-ui details p,
body.light-ui .price-card>p,
body.light-ui .plan-summary{
  color:var(--light-muted)!important;
}
body.light-ui .insight-card{
  border-left:3px solid rgba(83,104,238,.4);
}
body.light-ui .insight-number{
  color:#405de8;
  background:linear-gradient(135deg,#eef2ff,#f1ecff);
}
body.light-ui #products{
  background:
    radial-gradient(circle at 0 15%,rgba(83,104,238,.05),transparent 26%),
    #fff;
}
body.light-ui .example-grid{gap:22px}
body.light-ui .example-card{
  position:relative;
  overflow:hidden;
  padding:20px 22px 24px;
}
body.light-ui .example-card .icon{
  position:absolute;
  z-index:3;
  top:33px;
  right:34px;
  width:38px;
  height:38px;
  margin:0;
  border:1px solid rgba(83,104,238,.18);
  border-radius:12px;
  color:#425fe9;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(53,77,145,.14);
  font-size:12px;
}
.product-preview{
  position:relative;
  height:132px;
  margin:-2px -2px 21px;
  overflow:hidden;
  border:1px solid rgba(56,83,130,.12);
  border-radius:17px;
  background:linear-gradient(145deg,#f6f8fd,#edf2fb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.product-preview:after{
  content:"";
  position:absolute;
  inset:auto -30px -50px auto;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(92,115,255,.13),transparent 68%);
}
.product-preview span,
.product-preview i{
  position:absolute;
  display:block;
  border-radius:6px;
}
.product-preview .preview-nav{
  left:0;
  top:0;
  bottom:0;
  width:34px;
  border-radius:0;
  background:linear-gradient(180deg,#e9eef9,#dde6f6);
}
.product-preview .preview-head{
  left:47px;
  right:18px;
  top:16px;
  height:12px;
  background:#d8e1f1;
}
.product-preview .preview-main{
  left:47px;
  right:72px;
  top:43px;
  bottom:18px;
  border:1px solid rgba(69,91,136,.1);
  background:#fff;
}
.product-preview .preview-side{
  width:43px;
  right:18px;
  top:43px;
  bottom:18px;
  border:1px solid rgba(69,91,136,.1);
  background:#f9faff;
}
.product-preview i{
  z-index:2;
  height:7px;
  background:linear-gradient(90deg,#8aa0ef,#b1a3ee);
}
.product-preview i:nth-of-type(1){left:58px;right:89px;top:55px}
.product-preview i:nth-of-type(2){left:58px;right:112px;top:75px;opacity:.68}
.product-preview i:nth-of-type(3){left:58px;right:98px;top:95px;opacity:.45}
.product-preview-audio .preview-main:after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:28px;
  height:20px;
  background:linear-gradient(90deg,transparent 0 4%,#6982ef 4% 8%,transparent 8% 14%,#8c72e8 14% 19%,transparent 19% 25%,#5675ee 25% 30%,transparent 30% 37%,#9b82ec 37% 42%,transparent 42% 50%,#6380f0 50% 55%,transparent 55% 62%,#7c66e7 62% 69%,transparent 69% 78%,#5d7bef 78% 83%,transparent 83%);
  clip-path:polygon(0 43%,5% 43%,5% 12%,9% 12%,9% 73%,14% 73%,14% 28%,19% 28%,19% 88%,25% 88%,25% 44%,31% 44%,31% 3%,37% 3%,37% 68%,43% 68%,43% 25%,50% 25%,50% 84%,57% 84%,57% 45%,64% 45%,64% 8%,70% 8%,70% 70%,78% 70%,78% 31%,85% 31%,85% 82%,91% 82%,91% 45%,100% 45%,100% 55%,0 55%);
}
.product-preview-documents .preview-main{background:repeating-linear-gradient(180deg,#fff 0 11px,#eef2fa 11px 12px)}
.product-preview-support .preview-main{background:linear-gradient(90deg,#fff 0 32%,#f4f7fc 32% 33%,#fff 33% 100%)}
.product-preview-workflow .preview-main:after{
  content:"";
  position:absolute;
  inset:15px 12px;
  background:radial-gradient(circle at 15% 50%,#687eef 0 6px,transparent 7px),radial-gradient(circle at 50% 50%,#8b72e8 0 6px,transparent 7px),radial-gradient(circle at 85% 50%,#58b8dc 0 6px,transparent 7px),linear-gradient(#cbd5e7,#cbd5e7) center/70% 2px no-repeat;
}
.product-preview-booking .preview-main{background:linear-gradient(#eef2fa 1px,transparent 1px),linear-gradient(90deg,#eef2fa 1px,transparent 1px),#fff;background-size:100% 18px,23px 100%}
.product-preview-proposal .preview-main:after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  top:16px;
  bottom:16px;
  border-left:4px solid #657bef;
  background:repeating-linear-gradient(180deg,#dfe6f3 0 6px,transparent 6px 15px);
}
body.light-ui .example-scope{
  border-color:rgba(54,82,126,.11);
  background:#f8faff;
}
body.light-ui .example-scope b{color:#4a65ca}
body.light-ui .example-scope span{color:#5d6e84}
body.light-ui .tag{
  color:#51647e;
  border-color:rgba(58,84,128,.12);
  background:#f5f7fb;
}
body.light-ui #process{
  background:
    radial-gradient(circle at 85% 10%,rgba(83,104,238,.08),transparent 28%),
    linear-gradient(180deg,#f8faff,#fff);
}
body.light-ui #process .delivery-timeline{
  padding:26px;
  border:1px solid rgba(83,104,238,.13);
  border-radius:26px;
  background:linear-gradient(135deg,#f4f7ff,#fbfaff);
  box-shadow:var(--light-shadow);
}
body.light-ui #process .step{
  border-color:rgba(83,104,238,.13);
  background:#fff;
  box-shadow:none;
}
body.light-ui #process .step time{color:#586fe6}
body.light-ui #process .step:not(:last-child):after{color:#8290aa}
body.light-ui .post-launch-step{
  border-color:rgba(66,191,168,.25)!important;
  background:#f2fbf8!important;
}
body.light-ui .post-launch-phase.highlight{
  border-color:rgba(66,191,168,.25);
  background:#effaf7;
}
body.light-ui .overlap-note{
  color:#4c6486;
  background:#eef3ff;
}
body.light-ui .delivery-policy{
  border-color:rgba(66,191,168,.24);
  background:linear-gradient(135deg,#f1fbf8,#f4f7ff);
}
body.light-ui .duration-examples{
  background:
    radial-gradient(circle at 8% 16%,rgba(66,191,168,.05),transparent 28%),
    radial-gradient(circle at 92% 76%,rgba(83,104,238,.06),transparent 32%),
    #fff;
}
body.light-ui .duration-card:nth-child(2){
  border-color:rgba(83,104,238,.28);
  box-shadow:0 22px 62px rgba(83,104,238,.1);
}
body.light-ui .duration-month{color:#324d8f}
body.light-ui .duration-label{color:#6c7d94}
body.light-ui .duration-example,
body.light-ui .duration-scope{
  border-color:rgba(55,83,127,.1);
  background:#f8faff;
}
body.light-ui .duration-example b,
body.light-ui .duration-scope b{color:#5069cb}
body.light-ui .duration-example span,
body.light-ui .duration-scope span{color:#5d6f86}
body.light-ui .duration-note{
  border-color:rgba(220,160,52,.2);
  background:#fffaf1;
}
body.light-ui .duration-note strong{color:#8a6728}
body.light-ui #plans{
  background:
    radial-gradient(circle at 10% 10%,rgba(83,104,238,.06),transparent 28%),
    #fff;
}
body.light-ui #plans .compact-launch-plan{
  border:2px solid rgba(83,104,238,.42);
  background:linear-gradient(145deg,#fff,#f6f8ff);
  box-shadow:0 30px 90px rgba(68,86,164,.14);
}
body.light-ui #plans .compact-launch-plan:before{
  opacity:.55;
  background:radial-gradient(circle,rgba(83,104,238,.12),transparent 70%);
}
body.light-ui #plans .plan-number,
body.light-ui #plans .kicker{color:#5269c8}
body.light-ui #plans .price-label{color:#6b7d96}
body.light-ui #plans .main-plan-card .price{color:#172a49}
body.light-ui #plans .payment-tag{
  color:#fff;
  background:linear-gradient(135deg,#5368ee,#785ce8);
}
body.light-ui #plans .plan-contract-note{
  color:#627187;
  border-left-color:#5368ee;
  background:#f4f6ff;
}
body.light-ui #plans .billing-example,
body.light-ui #plans .plan-outcome,
body.light-ui #plans .launch-scope-compact,
body.light-ui .launch-plan-note,
body.light-ui .continuation-scope,
body.light-ui .continuation-terms,
body.light-ui .infrastructure-cost-note{
  border-color:rgba(55,83,127,.11);
  background:#f7f9fd;
}
body.light-ui #plans .billing-inline span,
body.light-ui #plans .billing-steps span{
  color:#334a6c;
  background:#edf2fb;
}
body.light-ui #plans .billing-inline small,
body.light-ui #plans .billing-steps b,
body.light-ui .launch-plan-note span{color:#526bcf}
body.light-ui #plans .billing-inline strong,
body.light-ui .launch-plan-note strong,
body.light-ui .plan-outcome span,
body.light-ui .launch-scope-compact span,
body.light-ui .continuation-scope span{color:#40536f}
body.light-ui .launch-support{
  border-color:rgba(66,191,168,.2);
  background:#eefaf7;
}
body.light-ui .launch-support strong{color:#2f645b}
body.light-ui .launch-support small{color:#64827c}
body.light-ui .plan-divider{color:#667990}
body.light-ui .plan-divider:before,
body.light-ui .plan-divider:after{background:rgba(55,83,127,.12)}
body.light-ui #plans .continue .card{
  border-color:var(--light-line);
  background:#fff;
}
body.light-ui .continuation-billing-note{color:#687990}
body.light-ui .continuation-availability-note{
  color:#896f41;
  border-top-color:rgba(55,83,127,.1);
}
body.light-ui .techbox{background:#fff}
body.light-ui .techlist span{
  color:#52647e;
  border-color:rgba(55,83,127,.11);
  background:#f5f7fb;
}
body.light-ui .infra-cost-details{background:#f8faff}
body.light-ui .infra-cost-details summary,
body.light-ui .infra-cost-section-title{color:#334c70}
body.light-ui .infra-cost-table{border-color:rgba(55,83,127,.12)}
body.light-ui .infra-cost-table th,
body.light-ui .infra-cost-table td{
  border-color:rgba(55,83,127,.1);
}
body.light-ui .infra-cost-table thead th{
  color:#354f77;
  background:#edf2ff;
}
body.light-ui .infra-cost-table tbody th{
  color:#324764;
  background:#f8faff;
}
body.light-ui .infra-cost-table td{color:#63738a}
body.light-ui .infra-cost-table .cost-range,
body.light-ui .infra-cost-summary strong{color:#4d67ce}
body.light-ui .infra-cost-summary div{
  border-color:rgba(55,83,127,.1);
  background:#fff;
}
body.light-ui .infra-cost-total th,
body.light-ui .infra-cost-total td{
  color:#344c70;
  background:#eef3ff;
}
body.light-ui .faq-group>h3{color:#2d4363}
body.light-ui details{
  box-shadow:0 10px 34px rgba(38,62,102,.06);
}
body.light-ui summary{color:#253a58}
body.light-ui summary:after{color:#5d72e7}
body.light-ui #contact{
  background:
    radial-gradient(circle at 90% 5%,rgba(120,92,232,.08),transparent 28%),
    linear-gradient(180deg,#fff,#f8faff);
}
body.light-ui #contact .cta{
  border-color:rgba(83,104,238,.2);
  background:linear-gradient(145deg,#f4f7ff,#fff 58%,#f7f3ff);
  box-shadow:0 28px 85px rgba(48,67,120,.13);
}
body.light-ui #contact .cta .eyebrow{color:#536987}
body.light-ui #contact .form{
  color:var(--light-ink);
  border-color:rgba(55,83,127,.13);
  background:#fff;
  box-shadow:0 18px 56px rgba(42,64,100,.1);
}
body.light-ui #contact label{color:#40536e}
body.light-ui #contact input,
body.light-ui #contact select,
body.light-ui #contact textarea{
  color:#20344f;
  border-color:rgba(55,83,127,.16);
  background:#f8faff;
}
body.light-ui #contact input:focus,
body.light-ui #contact select:focus,
body.light-ui #contact textarea:focus{
  border-color:rgba(83,104,238,.58);
  box-shadow:0 0 0 3px rgba(83,104,238,.08);
}
body.light-ui #contact .field-derived{
  color:#20344f;
  border-color:rgba(55,83,127,.16);
  background:#f8faff;
}
body.light-ui #contact .field-derived[data-state="empty"]{color:#5d6e84}
body.light-ui #contact .privacy-check{color:#5d6e84}
body.light-ui #contact .privacy-check a,
body.light-ui #contact .form-note a{color:#4b63cf}
body.light-ui #contact .field-help,
body.light-ui #contact .form-note{color:#7a899d}
body.light-ui select option{color:#20344f;background:#fff}
body.light-ui footer{
  color:#5e6f86;
  border-top-color:rgba(55,83,127,.1);
  background:#fff;
}
body.light-ui footer a{color:#4d6484}
@keyframes light-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
body.light-ui .hero .mock-small{animation:light-float 6s ease-in-out infinite}
@media(max-width:980px){
  .hero-tech-chip{display:none}
  body.light-ui .hero .visual{min-height:440px}
  body.light-ui #process .delivery-timeline{padding:18px}
}
@media(max-width:720px){
  body.light-ui .hero{padding-top:86px}
  body.light-ui .hero .visual{min-height:370px}
  body.light-ui .hero .mock-main{transform:none}
  body.light-ui .example-card{padding:18px}
  .product-preview{height:118px}
  body.light-ui #process .delivery-timeline{padding:14px;border-radius:20px}
  body.light-ui #contact .cta{padding:28px 18px}
}
@media(prefers-reduced-motion:reduce){
  body.light-ui .hero .mock-small{animation:none}
  body.light-ui *{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

body.light-ui .example-grid{
  gap:20px;
}
body.light-ui .example-card{
  position:relative;
  display:flex;
  min-height:100%;
  flex-direction:column;
  overflow:hidden;
  padding:29px 28px 27px;
}
body.light-ui .example-card:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,#5068f4 0%,#7957e8 58%,#a278ec 100%);
  opacity:.88;
}
body.light-ui .example-card:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-82px;
  top:-88px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(92,104,244,.09),transparent 68%);
  pointer-events:none;
}
body.light-ui .example-card .icon{
  position:relative;
  z-index:1;
  top:auto;
  right:auto;
  width:43px;
  height:43px;
  margin:0 0 20px;
  border:1px solid rgba(80,104,244,.18);
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,#5068f4,#7957e8);
  box-shadow:0 10px 26px rgba(80,104,244,.2);
  font-size:12px;
  letter-spacing:.04em;
}
body.light-ui .example-card h3{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  padding:0;
  color:#14233a;
  font-size:20px;
  line-height:1.48;
}
body.light-ui .example-card>p{
  position:relative;
  z-index:1;
  min-height:0;
  margin-bottom:0;
  color:#607087;
  font-size:14px;
  line-height:1.78;
}
body.light-ui .example-card .example-scope{
  position:relative;
  z-index:1;
  margin-top:21px;
  border-color:rgba(80,104,244,.11);
  background:#f7f8fd;
}
body.light-ui .example-card .example-scope b{
  color:#5369d8;
}
body.light-ui .example-card .tags{
  position:relative;
  z-index:1;
  margin-top:auto;
  padding-top:18px;
}
body.light-ui .example-card .tag{
  border-color:rgba(80,104,244,.12);
  color:#566881;
  background:#f5f7fc;
}
body.light-ui .example-card:hover:before{
  height:4px;
}
@media(max-width:720px){
  body.light-ui .example-card{
    padding:25px 22px 23px;
  }
  body.light-ui .example-card .icon{
    width:40px;
    height:40px;
    margin-bottom:17px;
  }
  body.light-ui .example-card h3{
    font-size:19px;
  }
}

/* ボタンは背景色に合わせて文字色を明示し、太すぎないウェイトへ統一します。 */
body.light-ui .btn,
body.light-ui button,
body.light-ui a.btn{
  font-family:inherit;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.2;
  text-shadow:none;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-ui .btn-primary,
body.light-ui .header .btn-primary,
body.light-ui #contact .btn-primary,
body.light-ui #plans .btn-primary{
  color:#fff;
}
body.light-ui .btn-ghost,
body.light-ui .header .btn-ghost{
  color:#263b58;
}

/* 濃い背景のバッジは白文字に固定します。 */
body.light-ui .badge,
body.light-ui .payment-tag,
body.light-ui .launch-support > span{
  color:#fff;
  font-weight:750;
  letter-spacing:.02em;
  line-height:1.25;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
}
body.light-ui .payment-tag,
body.light-ui .launch-support > span{
  background:linear-gradient(135deg,#5368ee,#785ce8);
}

/* 淡色背景のバッジは黒ではなく、十分に濃い青紫で表示します。 */
body.light-ui .payment-tag.secondary,
body.light-ui .plan-type-tag,
body.light-ui .monthly-note,
body.light-ui .tag{
  color:#4055b5;
  border-color:rgba(83,104,238,.18);
  background:#f2f4ff;
  font-weight:700;
  letter-spacing:.025em;
  line-height:1.35;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
}

/* 小見出しや技術ラベルは、細い黒文字を避けて青みのある濃色へ寄せます。 */
body.light-ui .eyebrow,
body.light-ui .hero-tech-chip,
body.light-ui .plan-number,
body.light-ui .kicker{
  font-weight:750;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-ui .eyebrow{
  color:#4b5fb8;
  letter-spacing:.1em;
}
body.light-ui .hero-tech-chip{
  color:#354f73;
  letter-spacing:.015em;
}
body.light-ui .plan-number,
body.light-ui .kicker{
  color:#455bc0;
  letter-spacing:.055em;
}

/* 開発期間の6か月・9か月・12か月を、他の月次見出しと同じ青紫へ統一します。 */
body.light-ui .duration-month{
  color:#5368ee;
  font-weight:800;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
}

/* After Launchの各カードタイトルを、月次見出しと同じ青紫へ統一します。 */
body.light-ui #process .post-launch-phase > strong{
  color:#5368ee;
  font-weight:750;
  letter-spacing:.01em;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
}

/* 主力プランと継続プランの重要ラベル・見出しを明瞭にします。 */
body.light-ui #plans .compact-launch-plan h3,
body.light-ui #plans .main-plan-card h3,
body.light-ui #plans .continuation-heading h3{
  color:#223856;
  font-weight:750;
}
body.light-ui #plans .compact-launch-plan h3 .plan-name-line,
body.light-ui #plans .main-plan-card h3 .plan-title-02,
body.light-ui #plans .kicker .plan-name-line{
  color:#5368ee;
  font-weight:750;
}
body.light-ui #plans .price-label,
body.light-ui #plans .billing-example > strong,
body.light-ui #plans .plan-outcome > strong,
body.light-ui #plans .launch-plan-note > span{
  color:#4c62c8;
  font-weight:700;
}
body.light-ui #plans .plan-summary,
body.light-ui #plans .plan-contract-note,
body.light-ui #plans .plan-cost-footnote,
body.light-ui #plans .billing-caption,
body.light-ui #plans .launch-plan-note small,
body.light-ui #plans .continuation-plan-description,
body.light-ui #plans .continuation-billing-note,
body.light-ui #plans .continuation-terms p{
  color:#53657d!important;
}

/* 「3ヶ月を超える場合」のラベルと説明を、背景に埋もれない配色へ変更します。 */
body.light-ui #plans .extended-development-note{
  border-color:rgba(83,104,238,.2);
  background:linear-gradient(135deg,#f2f5ff,#f7f4ff);
}
body.light-ui #plans .extended-development-note > span{
  color:#fff;
  background:linear-gradient(135deg,#5368ee,#785ce8);
  font-weight:750;
  letter-spacing:.02em;
}
body.light-ui #plans .extended-development-note strong{
  color:#263c5d;
  font-weight:750;
}
body.light-ui #plans .extended-development-note small{
  color:#5a6d86;
}

/* インフラ・外部サービス費用の案内を本文と同等以上のコントラストにします。 */
body.light-ui #plans .infrastructure-cost-note > strong{
  color:#263c5d;
  font-weight:750;
  letter-spacing:.005em;
}
body.light-ui #plans .infrastructure-cost-note > p{
  color:#53657d;
}
body.light-ui #plans .infra-cost-details summary,
body.light-ui #plans .infra-cost-section-title{
  color:#314d77;
  font-weight:700;
}

/* FAQは太字を抑え、長い質問でも読みやすいウェイトと行間にします。 */
body.light-ui #faq summary{
  color:#253a58;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-ui #faq .faq-group > h3{
  font-weight:700;
}

/* フォーム内の必須表示も小さく潰れないようにします。 */
body.light-ui .required-mark{
  color:#4f66d5;
  font-weight:750;
  letter-spacing:.02em;
}

/* 無料相談の補足とエラー表示を白背景でも読みやすくします。 */
body.light-ui #contact .notes{
  color:#40536e;
  font-weight:600;
}
body.light-ui #contact .form-status[data-state="error"]{
  color:#c1344a;
  font-weight:750;
}

@media(max-width:720px){
  body.light-ui .btn,
  body.light-ui button,
  body.light-ui a.btn{
    letter-spacing:0;
  }
  body.light-ui .tag,
  body.light-ui .plan-type-tag,
  body.light-ui .monthly-note{
    letter-spacing:.01em;
  }
  body.light-ui #faq summary{
    font-weight:600;
    line-height:1.55;
  }
}

#consultation-flow .before-contract-steps .step{
  display:flex;
  min-width:0;
  flex-direction:column;
}
#consultation-flow .before-contract-steps .step h3{
  margin-top:10px;
}
#consultation-flow .step-channel{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  margin-top:11px;
  padding:5px 9px;
  border:1px solid rgba(83,104,238,.18);
  border-radius:999px;
  color:#445bd5;
  background:#f1f5ff;
  font-size:9px;
  font-weight:900;
  line-height:1.4;
  letter-spacing:.035em;
  white-space:normal;
}
#consultation-flow .step-channel-async{
  color:#6650c8;
  border-color:rgba(120,92,232,.18);
  background:#f6f2ff;
}
#consultation-flow .before-contract-kickoff{
  display:grid;
  grid-template-columns:minmax(150px,.35fr) minmax(0,1fr);
  gap:24px;
  align-items:center;
  margin-top:22px;
  border-color:rgba(83,104,238,.2);
  background:linear-gradient(135deg,#f7f9ff,#fff 62%);
}
#consultation-flow .before-contract-kickoff .kickoff-label{
  display:block;
  color:#5368ee;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
#consultation-flow .before-contract-kickoff .step-channel{
  margin-top:10px;
}
#consultation-flow .before-contract-kickoff h3{
  margin:0 0 7px;
  color:var(--light-ink,#15243b);
}
#consultation-flow .before-contract-kickoff p{
  margin:0;
  color:var(--light-muted,#627187);
  line-height:1.75;
}
#consultation-flow .before-contract-scope{
  margin-top:14px;
}
@media(max-width:900px){
  #consultation-flow .before-contract-kickoff{
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* v21 multi-page service site */
body.light-ui{min-height:100vh}
.header .brand{white-space:nowrap}
.header .links{gap:20px}
.header .links a[aria-current="page"]{color:var(--light-accent);font-weight:800}
.nav-actions{display:flex;align-items:center;gap:10px}
.page-hero{
  padding:92px 0 72px;
  background:
    radial-gradient(circle at 82% 14%,rgba(120,92,232,.13),transparent 30%),
    radial-gradient(circle at 8% 76%,rgba(66,191,168,.09),transparent 30%),
    linear-gradient(180deg,#fff,#f8faff);
}
.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:58px;
  align-items:center;
}
.page-hero h1{max-width:880px;color:var(--light-ink)}
.page-hero .lead{max-width:780px;margin-bottom:28px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;color:#718096;font-size:12px}
.breadcrumb a{color:var(--light-accent);font-weight:750}
.hero-summary-card{
  padding:30px;
  border:1px solid rgba(83,104,238,.18);
  border-radius:28px;
  background:linear-gradient(145deg,#fff,#f2f5ff);
  box-shadow:var(--light-shadow);
}
.hero-summary-card .price{color:var(--light-ink)}
.summary-label{
  display:block;
  margin-bottom:8px;
  color:var(--light-accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.summary-list{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.summary-list li{display:flex;gap:10px;color:#44546c;font-size:14px}
.summary-list li:before{content:"✓";color:#2f9c86;font-weight:900}
/* 担当者概要の外部リンク（GitHub）。一覧の下に1行だけ置く（Issue #463）。 */
.hero-summary-card .summary-link{margin:20px 0 0}
.hero-summary-card .summary-link+.summary-link{margin-top:10px}
/* 担当者プロフィールの案件（Issue #466）。FAQと同じアコーディオンを使い、事実の項目だけを並べる。 */
.project-history summary small{display:block;margin-top:4px;color:var(--light-muted);font-size:13px;font-weight:600}
.project-current h4{margin:0 0 4px;color:var(--light-ink);font-size:17px;line-height:1.5}
.project-current h4 small{display:block;margin-top:4px;color:var(--light-muted);font-size:13px;font-weight:600}
.project-facts{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.project-current .project-facts{padding:0}
.project-history details .project-facts{margin:0 0 20px}
.project-facts li{color:var(--light-muted);font-size:14px;line-height:1.7}
.project-facts strong{display:block;color:var(--light-ink);font-size:13px}
.project-source{margin-top:24px}
.section-heading-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:34px;
}
.section-heading-row>div{max-width:780px}
.section-heading-row .lead{margin-bottom:0}
/* 長い見出しは説明とリンクの上の全幅の行へ置き、PC幅で1行に収める。
   折り返す場合は<wbr>の位置（語句の切れ目）だけで折り返す */
.section-heading-row-wide{
  flex-wrap:wrap;
  row-gap:0;
}
.section-heading-row-wide>.section-heading-title{
  flex:0 0 100%;
  max-width:none;
}
.section-heading-row-wide h2{
  word-break:keep-all;
  overflow-wrap:anywhere;
}
/* 折り返しでリンクが説明の下へ回り込む幅でも、説明との間を空ける */
.section-heading-row-wide .text-link{
  margin-top:12px;
}
@media(max-width:720px){
  .section-heading-row-wide h2{
    font-size:min(31px,7.4vw);
  }
}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.service-grid.service-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:34px;
  border:1px solid var(--light-line);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--light-shadow);
}
.service-card.featured{
  border-color:rgba(83,104,238,.34);
  background:linear-gradient(155deg,#fff 18%,#f3f5ff);
}
.service-card.replacement{background:linear-gradient(155deg,#fff 18%,#f2fbf9)}
.service-card .badge{
  position:static;
  align-self:flex-start;
  margin-bottom:18px;
  color:#fff;
}
.service-card h3{
  margin:0 0 10px;
  color:var(--light-ink);
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-.035em;
}
.service-card>p{margin-bottom:0;color:var(--light-muted)}
.service-meta{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0}
.service-meta span{
  padding:7px 11px;
  border:1px solid rgba(83,104,238,.14);
  border-radius:999px;
  color:#44546c;
  background:#f7f9ff;
  font-size:12px;
  font-weight:800;
}
.service-card .summary-list{margin-bottom:24px}
.service-card .text-link{margin-top:auto}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--light-accent);font-weight:850}
.text-link:after{content:"→";transition:transform .2s}
.text-link:hover:after{transform:translateX(3px)}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.proof-card{
  padding:28px;
  border:1px solid var(--light-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 42px rgba(38,62,102,.07);
}
.proof-card .icon{color:#fff}
.proof-card h3{color:var(--light-ink);font-size:20px}
.proof-card p{color:var(--light-muted)}
.compact-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.compact-product{padding:24px;border:1px solid var(--light-line);border-radius:20px;background:#fff}
.compact-product span{
  display:block;
  margin-bottom:8px;
  color:var(--light-accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}
.compact-product h3{margin-bottom:8px;color:var(--light-ink);font-size:18px}
.compact-product p{margin-bottom:0;color:var(--light-muted);font-size:14px}
.compact-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.compact-process .step{background:#fff}
.compact-process .step:not(:last-child):after{color:rgba(83,104,238,.38)}
.support-strip{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:30px;
  align-items:center;
  margin-top:26px;
  padding:28px 30px;
  border:1px solid rgba(83,104,238,.17);
  border-radius:22px;
  background:linear-gradient(135deg,#f6f8ff,#f3fbf9);
}
.support-strip h3{margin-bottom:6px;color:var(--light-ink)}
.support-strip p{margin-bottom:0;color:var(--light-muted)}
.support-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.support-tags span{
  padding:9px 13px;
  border:1px solid rgba(83,104,238,.14);
  border-radius:999px;
  background:#fff;
  color:#44546c;
  font-size:12px;
  font-weight:800;
}
.representative-faq{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:30px;
}
.representative-faq details{align-self:start;background:#fff}
.faq-group{margin-top:46px}
.faq-group:first-of-type{margin-top:28px}
.faq-group h2{margin-bottom:18px;font-size:clamp(25px,3.2vw,36px)}
.faq-group .faq{margin-top:0}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.info-panel{padding:28px;border:1px solid var(--light-line);border-radius:22px;background:#fff}
.info-panel h3{color:var(--light-ink)}
.info-panel p,.info-panel li{color:var(--light-muted)}
.info-panel ul{margin:14px 0 0;padding-left:1.2em}
.info-panel li+li{margin-top:7px}
.timeline-six{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:34px;
}
.timeline-six .step{min-height:100%;background:#fff}
.decision-gate{
  margin-top:22px;
  padding:26px 28px;
  border:1px solid rgba(184,105,15,.22);
  border-radius:22px;
  background:#fffaf4;
}
.decision-gate h3{color:#7a4b0d}
.decision-gate p{color:#6f5a42}
.deliverables{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
.deliverable{
  display:flex;
  gap:13px;
  padding:18px;
  border:1px solid var(--light-line);
  border-radius:16px;
  background:#fff;
}
.deliverable>span{flex:0 0 auto;color:#2f9c86;font-weight:900}
.deliverable strong{display:block;color:var(--light-ink)}
.deliverable small{display:block;margin-top:3px;color:var(--light-muted);line-height:1.55}
.subpage-cta{
  padding:42px;
  border:1px solid rgba(83,104,238,.2);
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 8%,rgba(120,92,232,.13),transparent 30%),
    linear-gradient(135deg,#f8faff,#f2f8f7);
}
.subpage-cta h2{max-width:720px}
.subpage-cta .lead{margin-bottom:24px}
.comparison-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--light-line);
  border-radius:18px;
  background:#fff;
}
.comparison-table th,.comparison-table td{
  padding:16px 18px;
  border-bottom:1px solid var(--light-line);
  text-align:left;
  vertical-align:top;
}
.comparison-table tr:last-child th,.comparison-table tr:last-child td{border-bottom:0}
.comparison-table th{width:28%;color:var(--light-ink);background:#f8faff}
.comparison-table td{color:var(--light-muted)}
.home-contact-lead{color:#d8e1ee!important}
body.light-ui #contact .privacy-check,
body.light-ui #contact .form-note{color:#c5d0df}
/* 補足文は白いフォームの内側へ表示するため、読める明るさを保つ。 */
body.light-ui #contact .field-help{color:#627187}
body.light-ui #contact .privacy-check a,
body.light-ui #contact .form-note a{color:#d6e6ff}
@media(max-width:1050px){
  .header .links{display:none}
  /* 3列のカードは1,000px前後でリンクが2行へ折り返すため、ヘッダーがメニュー表示になる幅から1列にする。 */
  .service-grid.service-grid-3{grid-template-columns:1fr}
}
@media(max-width:900px){
  .page-hero-grid,.service-grid,.proof-grid,.info-grid,.support-strip{grid-template-columns:1fr}
  .compact-product-grid,.timeline-six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-tags{justify-content:flex-start}
}
@media(max-width:720px){
  .page-hero{padding:68px 0 54px}
  .page-hero-grid{gap:34px}
  .page-hero h1{font-size:42px}
  .hero-summary-card,.service-card,.subpage-cta{padding:25px 21px}
  .section-heading-row{display:block}
  .section-heading-row .text-link{margin-top:12px}
  .compact-product-grid,.compact-process,.timeline-six,.deliverables,.representative-faq{grid-template-columns:1fr}
  .nav-actions .btn-ghost{display:none}
  .comparison-table,.comparison-table tbody,.comparison-table tr,.comparison-table th,.comparison-table td{
    display:block;
    width:100%;
  }
  .comparison-table tr+tr{border-top:1px solid var(--light-line)}
  .comparison-table th,.comparison-table td{border-bottom:0}
  .comparison-table th{padding-bottom:6px}
  .comparison-table td{padding-top:6px}
}

@media(max-width:1050px){
  .header .nav{flex-wrap:wrap;gap:8px 14px;padding:10px 0}
  .header .links{
    order:3;
    display:flex;
    width:100%;
    gap:18px;
    overflow-x:auto;
    padding:2px 0 4px;
    white-space:nowrap;
    scrollbar-width:none;
  }
  .header .links::-webkit-scrollbar{display:none}
  .header .nav-actions{margin-left:auto}
}

/* `.reveal`の定義はファイル末尾の「v27 モーション基盤」へ集約した。
   表示の切り替え条件は`html.motion-ready`で、`html.js`を条件にしたCSSはない。
   各ページのheadが付ける`js` classは、JavaScriptが動作していることの目印として残している。 */

/* v22 subpage legibility and navigation */
body.light-ui .page-hero .gradient{
  background:linear-gradient(108deg,#14243a 0%,#203c74 42%,#5368ee 70%,#785ce8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body.light-ui .page-hero h1{
  color:#172a49;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.16;
  text-wrap:balance;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-ui .page-hero ~ .section h2{
  color:#223856;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.35;
  text-wrap:balance;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-ui .page-hero .eyebrow,
body.light-ui .breadcrumb a,
body.light-ui .summary-label{
  font-weight:700;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-ui .text-link{
  min-height:44px;
  max-width:100%;
  padding:9px 13px 9px 15px;
  border:1px solid rgba(83,104,238,.2);
  border-radius:12px;
  color:#465cc7;
  background:#f5f7ff;
  box-shadow:0 8px 22px rgba(53,76,143,.07);
  font-size:15px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:0;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s,transform .2s;
}
body.light-ui .text-link:after{
  display:grid;
  width:24px;
  height:24px;
  flex:0 0 24px;
  place-items:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#5368ee,#785ce8);
  font-size:13px;
  font-weight:700;
  line-height:1;
}
body.light-ui .text-link:hover{
  color:#354cb7;
  border-color:rgba(83,104,238,.35);
  background:#eef1ff;
  box-shadow:0 12px 28px rgba(53,76,143,.12);
  transform:translateY(-1px);
}
body.light-ui .text-link:focus-visible,
body.light-ui .header .links a:focus-visible{
  outline:3px solid rgba(83,104,238,.24);
  outline-offset:2px;
}
body.light-ui .header .links{
  align-items:center;
  gap:6px;
  color:#43546c;
  font-size:14px;
}
body.light-ui .header .links a{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:10px;
  color:#43546c;
  font-weight:600;
  line-height:1.35;
  letter-spacing:0;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:color .2s,border-color .2s,background .2s;
}
body.light-ui .header .links a:hover{
  color:#4057c4;
  border-color:rgba(83,104,238,.14);
  background:#f4f6ff;
}
body.light-ui .header .links a[aria-current="page"]{
  color:#4057c4;
  border-color:rgba(83,104,238,.2);
  background:#eef1ff;
  box-shadow:inset 0 -2px 0 rgba(83,104,238,.78);
  font-weight:700;
}
@media(max-width:1050px){
  body.light-ui .header .nav{
    gap:9px 14px;
    padding:10px 0 12px;
  }
  body.light-ui .header .links{
    order:3;
    display:grid;
    width:100%;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px;
    overflow:visible;
    padding:6px;
    border:1px solid rgba(55,83,127,.1);
    border-radius:14px;
    background:#f7f9fd;
  }
  body.light-ui .header .links a{
    min-width:0;
    padding:0 8px;
    white-space:nowrap;
    font-size:13px;
    text-align:center;
  }
}
@media(max-width:767px){
  body.light-ui .header .links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }
  body.light-ui .header .links a{
    flex:0 1 calc(33.333% - 6px);
  }
}
@media(max-width:560px){
  body.light-ui .header .links a{
    flex-basis:calc(50% - 6px);
  }
  body.light-ui .page-hero h1{
    font-size:40px;
    letter-spacing:-.03em;
  }
  body.light-ui .text-link{
    font-size:14px;
  }
}

/* v25 unified public page hero hierarchy */
body.light-ui .hero-title{
  display:grid;
  gap:4px;
  margin:0 0 26px;
  line-height:1;
  letter-spacing:0;
}
body.light-ui .hero-title-line{
  display:block;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  font-weight:800;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.light-ui .hero-title-context{
  color:#172a49;
}
body.light-ui .hero-title-outcome{
  background:linear-gradient(108deg,#203c74 0%,#5368ee 58%,#785ce8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body.light-ui .hero .hero-title-context{
  font-size:clamp(40px,3.65vw,52px);
  line-height:1.18;
  letter-spacing:-.035em;
}
body.light-ui .hero .hero-title-outcome{
  font-size:clamp(46px,4.5vw,64px);
  line-height:1.12;
  letter-spacing:-.045em;
}
body.light-ui .page-hero .hero-title{
  gap:3px;
  margin-bottom:24px;
}
body.light-ui .page-hero .hero-title-context{
  font-size:clamp(32px,2.75vw,40px);
  line-height:1.2;
  letter-spacing:-.03em;
}
body.light-ui .page-hero .hero-title-outcome{
  font-size:clamp(40px,3.45vw,52px);
  line-height:1.14;
  letter-spacing:-.045em;
}
@media(max-width:980px){
  body.light-ui .hero .hero-title{max-width:760px}
}
@media(max-width:720px){
  body.light-ui .hero .hero-title{gap:6px}
  body.light-ui .hero .hero-title-context{
    font-size:clamp(27px,8.2vw,35px);
    line-height:1.2;
    letter-spacing:-.025em;
  }
  body.light-ui .hero .hero-title-outcome{
    font-size:clamp(34px,9.5vw,43px);
    line-height:1.14;
    letter-spacing:-.035em;
  }
  body.light-ui .page-hero .hero-title{
    gap:5px;
    margin-bottom:22px;
  }
  body.light-ui .page-hero .hero-title-context{
    font-size:clamp(23px,7vw,30px);
    line-height:1.22;
    letter-spacing:-.025em;
  }
  body.light-ui .page-hero .hero-title-outcome{
    font-size:clamp(25px,8.2vw,36px);
    line-height:1.16;
    letter-spacing:-.04em;
  }
  body.light-ui .hero .visual{display:none}
}

/* v26 public identity and privacy page */
body.light-ui .hero-summary-card .summary-title{
  margin:4px 0 8px;
  color:var(--light-ink);
  font-size:clamp(24px,2.4vw,30px);
  line-height:1.35;
  letter-spacing:-.03em;
  text-wrap:balance;
}
body.light-ui .hero-summary-card .summary-title span{
  display:block;
}
body.light-ui.privacy-page{
  background:#f7f9fd;
}
body.light-ui .privacy-page-hero{
  padding-bottom:64px;
}
body.light-ui .privacy-hero-content{
  max-width:960px;
}
body.light-ui .privacy-page-title{
  max-width:none;
  margin:16px 0 20px;
  color:#172a49;
  font-size:clamp(34px,5vw,54px);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.045em;
  text-wrap:balance;
  background:linear-gradient(108deg,#203c74 0%,#5368ee 58%,#785ce8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body.light-ui .privacy-page-hero .lead{
  max-width:860px;
  margin-bottom:15px;
}
body.light-ui .privacy-meta{
  margin:0;
  color:#718096;
  font-size:13px;
}
body.light-ui .privacy-policy-section{
  padding-top:72px;
  background:
    radial-gradient(circle at 92% 6%,rgba(120,92,232,.07),transparent 24%),
    linear-gradient(180deg,#f7f9fd 0%,#fff 100%);
}
body.light-ui .privacy-policy-container{
  max-width:960px;
}
body.light-ui .privacy-policy{
  display:grid;
  gap:18px;
}
body.light-ui .privacy-card{
  padding:30px;
  border:1px solid var(--light-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 48px rgba(38,62,102,.08);
}
body.light-ui .privacy-card h2{
  margin:0 0 14px;
  color:#223856;
  font-size:clamp(21px,3vw,27px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.02em;
}
body.light-ui .privacy-card p,
body.light-ui .privacy-card li{
  color:#53657d;
}
body.light-ui .privacy-card p:last-child,
body.light-ui .privacy-card ul:last-child,
body.light-ui .privacy-card ol:last-child{
  margin-bottom:0;
}
body.light-ui .privacy-card ul,
body.light-ui .privacy-card ol{
  margin:12px 0 0;
  padding-left:1.45em;
}
body.light-ui .privacy-card li+li{
  margin-top:7px;
}
body.light-ui .privacy-card a{
  color:#465cc7;
  text-decoration:underline;
  text-underline-offset:3px;
}
body.light-ui .privacy-contact-box{
  margin-top:16px;
  padding:18px 20px;
  border:1px solid rgba(83,104,238,.22);
  border-radius:16px;
  background:#f2f5ff;
}
body.light-ui .privacy-contact-box strong{
  display:block;
  margin-bottom:6px;
  color:#263c5d;
}
body.light-ui .privacy-note{
  color:#718096!important;
  font-size:13px;
}
body.light-ui .privacy-operator-name{
  white-space:nowrap;
}
@media(max-width:720px){
  body.light-ui .privacy-page-hero{
    padding-bottom:52px;
  }
  body.light-ui .privacy-page-title{
    font-size:clamp(29px,8.2vw,36px);
    letter-spacing:-.035em;
  }
  body.light-ui .privacy-policy-section{
    padding-top:54px;
  }
  body.light-ui .privacy-card{
    padding:23px 20px;
    border-radius:18px;
  }
  body.light-ui .hero-summary-card .summary-title{
    font-size:24px;
  }
}



/* after-launch service page */
.support-strip-link{transition:transform .2s,border-color .2s,box-shadow .2s}
.support-strip-link:hover{transform:translateY(-3px)}
.support-plan-summary{display:grid;gap:12px;justify-items:end}
.support-link-label{font-size:13px;font-weight:850}
.after-launch-plan-grid{margin-top:34px;align-items:stretch}
.after-launch-plan-card{display:flex;min-width:0;flex-direction:column}
.after-launch-plan-card .summary-list{margin-top:auto}
body.light-ui .support-strip-link:hover{border-color:rgba(83,104,238,.3);box-shadow:var(--light-shadow-hover)}
body.light-ui .support-link-label{color:var(--light-accent)}
@media(min-width:1051px) and (max-width:1180px){
  body.light-ui .header .nav{gap:14px}
  body.light-ui .header .links{gap:6px;font-size:13px}
  body.light-ui .header .nav-actions .btn{padding:0 14px}
}
@media(max-width:900px){
  .support-plan-summary{justify-items:start}
}

/* v25 compact shared header navigation */
.header .links a,
.nav-actions .btn{
  white-space:nowrap;
}

/* v26 mobile collapsible header navigation */
/* スマートフォンではヘッダーの縦幅を抑えるため、ナビゲーションを開閉式にする。
   JavaScriptが無効な場合は折り返し表示のまま残し、リンクへ到達できる状態を保つ。 */
.nav-contact-mobile{
  display:none;
}
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(83,104,238,.18);
  border-radius:13px;
  background:#fff;
  color:#43546c;
  cursor:pointer;
}
.nav-toggle:hover{
  border-color:rgba(83,104,238,.34);
  background:#f4f6ff;
}
.nav-toggle:focus-visible{
  outline:3px solid rgba(83,104,238,.24);
  outline-offset:2px;
}
.nav-toggle-icon{
  position:relative;
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:background-color .2s;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s;
}
.nav-toggle-icon::before{top:-6px}
.nav-toggle-icon::after{top:6px}
.header.is-nav-open .nav-toggle-icon{background:transparent}
.header.is-nav-open .nav-toggle-icon::before{transform:translateY(6px) rotate(45deg)}
.header.is-nav-open .nav-toggle-icon::after{transform:translateY(-6px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){
  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after{transition:none}
}
@media(max-width:720px){
  .header .nav,
  body.light-ui .header .nav{
    min-height:60px;
    padding:8px 0;
    column-gap:8px;
  }
  /* 320px幅でもロゴ・無料相談・開閉ボタンが1行へ収まるよう、画面幅に応じて縮める。 */
  .header .brand{
    min-width:0;
    gap:7px;
    font-size:clamp(12px,3.4vw,15px);
  }
  /* 実機のフォントが想定より広い場合でも折り返さないよう、縮む余地はサービス名だけへ持たせる。 */
  .header .brand>span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .header .brand .mark{
    width:28px;
    height:28px;
    flex-shrink:0;
    border-radius:9px;
  }
  .header .nav-actions,
  body.light-ui .header .nav-actions{
    display:none;
  }
  .header .nav-contact-mobile,
  body.light-ui .header .nav-contact-mobile{
    display:inline-flex;
    min-height:44px;
    flex-shrink:0;
    margin-left:auto;
    padding:0 clamp(12px,3.5vw,16px);
    font-size:clamp(12px,3.2vw,13px);
    white-space:nowrap;
  }
  /* 折り返しを許すと幅が足りないときに開閉ボタンが2行目へ回るため、
     閉じた状態では1行へ固定し、縮む余地はサービス名だけへ残す。 */
  html.nav-ready .header .nav{
    flex-wrap:nowrap;
  }
  /* モバイル専用の無料相談、開閉ボタン、メニューをDOM順のまま並べ、表示順とTab順を一致させる。 */
  html.nav-ready .nav-toggle{
    display:inline-flex;
    flex-shrink:0;
  }
  html.nav-ready .header .links,
  html.nav-ready body.light-ui .header .links{
    display:none;
  }
  /* 展開時はヘッダー直下へ重ねて表示し、本文を押し下げるレイアウトシフトを避ける。 */
  html.nav-ready .header.is-nav-open .links,
  html.nav-ready body.light-ui .header.is-nav-open .links{
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:1;
    display:grid;
    width:auto;
    max-height:max(0px,calc(100vh - 60px - var(--pbs-analytics-consent-occlusion,0px)));
    max-height:max(0px,calc(100dvh - 60px - var(--pbs-analytics-consent-occlusion,0px)));
    grid-template-columns:1fr;
    gap:4px;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px 14px 16px;
    border:0;
    border-radius:0 0 18px 18px;
    background:#fff;
    box-shadow:0 18px 40px rgba(28,51,89,.16);
  }
  html.nav-ready .header.is-nav-open .links a,
  html.nav-ready body.light-ui .header.is-nav-open .links a{
    min-height:48px;
    justify-content:flex-start;
    padding:0 14px;
    font-size:15px;
    text-align:left;
  }
}

/* v27 モーション基盤（Issue #317 初期実装） */
/* 目的、避ける表現、判断基準は`01_LP/motion_guidelines.md`を正本とし、ここには実装だけを置く。
   表示パターンは「ヒーローの入場（CSSのみ）」と「スクロール表示（IntersectionObserver）」の
   2種類に絞り、スクロール連動表現は開発工程セクションだけで使う。 */
:root{
  --motion-distance:18px;
  --motion-duration:.62s;
  --motion-stagger:70ms;
  --motion-ease:cubic-bezier(.2,.7,.2,1);
}

/* 1. スクロール表示 */
/* HTMLの初期状態では本文・カード・CTAを表示する。site.jsがIntersectionObserverを
   初期化できた場合だけ`html.motion-ready`が付き、開始前の見た目へ切り替える。
   site.jsの取得・実行に失敗した場合はこのclassが付かず、表示されたまま残る。 */
.reveal{opacity:1;transform:none}
html.motion-ready .reveal{
  opacity:0;
  transform:translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) ease,
    transform var(--motion-duration) var(--motion-ease);
}
html.motion-ready .reveal.visible{opacity:1;transform:none}

/* 意味のまとまり単位で順に表示する。まとまり全体を1つの監視対象にし、子の遅延だけをずらす。 */
html.motion-ready .reveal[data-motion="stagger"]{opacity:1;transform:none}
html.motion-ready .reveal[data-motion="stagger"]>*{
  opacity:0;
  transform:translateY(var(--motion-distance));
  transition:
    opacity var(--motion-duration) ease,
    transform var(--motion-duration) var(--motion-ease);
  transition-delay:calc(var(--motion-stagger) * var(--motion-index,0));
}
html.motion-ready .reveal[data-motion="stagger"].visible>*{opacity:1;transform:none}

/* キーボード操作でフォーカスが入ったまとまりは、表示待ちにせず即座に表示する。
   フォーカスリングが見えない状態と、読み順とフォーカス順のずれを避ける。 */
html.motion-ready .reveal.motion-skip,
html.motion-ready .reveal.motion-skip>*{
  opacity:1;
  transform:none;
  transition:none;
}
[data-motion="stagger"]>*:nth-child(2){--motion-index:1}
[data-motion="stagger"]>*:nth-child(3){--motion-index:2}
[data-motion="stagger"]>*:nth-child(4){--motion-index:3}
[data-motion="stagger"]>*:nth-child(5){--motion-index:4}
[data-motion="stagger"]>*:nth-child(6){--motion-index:5}

/* 2. 開発工程の進行表示（スクロール連動はこのセクションだけ） */
/* 静止状態では4工程すべてが読め、各カード上端のアクセント線も引かれた状態になる。
   モーション初期化に成功した場合だけ0から開始し、工程が視界へ入った時点で手前の工程まで
   まとめて強調する。
   進行はカードごとの強調1系統だけで示し、カードグループ全体を横断する進捗線は置かない。
   ここは案件の達成率ではなく相談から着手までの手順を説明する箇所で、連続したバーより
   離散した4工程をカード単位で順に強調する方が内容に合う。
   強調の強さは`--step-progress`だけで決め、classは値の切り替えに使う。状態ごとに別の配色を
   書かないため、撮影時はこの変数を固定すれば静止状態を再現できる。
   影は`body.light-ui #process .step`が`none`へ固定しており、ここへ書いても適用されない。
   影で強調する場合は工程セクションを平らに見せる既存指定の見直しが必要になるため、カード
   単位の強調は上端のアクセント線とわずかな持ち上がりだけで示す。 */
.compact-process[data-motion="process"] .step{
  --step-progress:1;
  transform:translateY(calc(var(--step-progress) * -3px));
  transition:transform .45s var(--motion-ease);
}
/* 進捗の表現は装飾だけに閉じ、工程名・説明の文字色と余白は状態で変えない。 */
.compact-process[data-motion="process"] .step:before{
  content:"";
  position:absolute;
  top:-1px;
  right:15px;
  left:15px;
  height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#5368ee,#785ce8);
  transform:scaleX(var(--step-progress));
  transform-origin:left center;
  transition:transform .45s var(--motion-ease);
}
html.motion-ready .compact-process[data-motion="process"] .step{--step-progress:0}
html.motion-ready .compact-process[data-motion="process"] .step.is-active{--step-progress:1}

/* 3. ヒーローの入場 */
/* JavaScriptに依存しないCSSアニメーションで、見出し・説明・CTAの読む順番だけを示す。
   `animation-fill-mode:both`により必ず表示状態で終わるため、site.jsの成否に関わらず
   価格・期間・CTAが隠れたまま残らない。合計0.4秒で読み終える長さに収める。 */
@keyframes pbs-hero-enter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
.hero .eyebrow,
.hero .hero-title-line,
.hero .lead,
.hero .actions,
.hero .hero-plan-link,
.hero .notes,
.hero .visual,
.hero .hero-tech-chip{
  animation:pbs-hero-enter .5s var(--motion-ease) both;
}
.hero .hero-title-context{animation-delay:60ms}
.hero .hero-title-outcome{animation-delay:120ms}
.hero .visual{animation-delay:160ms}
.hero .lead{animation-delay:190ms}
.hero .actions{animation-delay:250ms}
.hero .hero-plan-link{animation-delay:280ms}
.hero .notes{animation-delay:310ms}
.hero .hero-tech-chip-ai{animation-delay:380ms}
.hero .hero-tech-chip-stack{animation-delay:430ms}
.hero .hero-tech-chip-launch{animation-delay:480ms}

/* 4. 操作結果の表示 */
/* ホバーを前提にした情報は作らず、フォーカス位置が分かる表示だけを補う。 */
/* `outline-offset`で隣接色が背景色になるため、白背景に対して3:1以上を確保できる
   不透明色を使う。半透明にすると、ブラウザ既定のフォーカスリングより弱くなる。 */
body.light-ui .btn:focus-visible,
body.light-ui .support-strip-link:focus-visible{
  outline:3px solid #5368ee;
  outline-offset:3px;
}
body.light-ui .service-card:focus-within{border-color:rgba(83,104,238,.34)}

/* 5. スマートフォンでの簡略化 */
/* 演出の距離と時間を縮め、常時動き続ける浮遊表現は停止する。 */
@media(max-width:720px){
  :root{
    --motion-distance:12px;
    --motion-duration:.5s;
    --motion-stagger:55ms;
  }
  .hero .eyebrow,
  .hero .hero-title-line,
  .hero .lead,
  .hero .actions,
  .hero .hero-plan-link,
  .hero .notes,
  .hero .visual{animation-duration:.42s}
  .hero .hero-title-context{animation-delay:40ms}
  .hero .hero-title-outcome{animation-delay:80ms}
  .hero .visual{animation-delay:110ms}
  .hero .lead{animation-delay:130ms}
  .hero .actions{animation-delay:170ms}
  .hero .hero-plan-link{animation-delay:190ms}
  .hero .notes{animation-delay:210ms}
  body.light-ui .hero .mock-small{animation:none}
}

/* 6. Reduced Motion */
/* 情報量と操作は変えず、移動・スクロール連動・浮遊だけを止める。 */
@media(prefers-reduced-motion:reduce){
  /* `scroll-behavior`は`<html>`に指定されており、`body.light-ui *`では止まらない。 */
  html{scroll-behavior:auto}
  html.motion-ready .reveal,
  html.motion-ready .reveal[data-motion="stagger"]>*{
    opacity:1;
    transform:none;
    transition:none;
  }
  .compact-process[data-motion="process"] .step,
  html.motion-ready .compact-process[data-motion="process"] .step{
    --step-progress:1;
    transform:none;
    transition:none;
  }
  /* 疑似要素は`body.light-ui *`に一致しないため、個別に遷移を止める。 */
  .compact-process[data-motion="process"] .step:before{transition:none}
  .hero .eyebrow,
  .hero .hero-title-line,
  .hero .lead,
  .hero .actions,
  .hero .hero-plan-link,
  .hero .notes,
  .hero .visual,
  .hero .hero-tech-chip,
  body.light-ui .hero .mock-small{animation:none}
}

/* コラム記事（/column/）。長文を読みやすくするため本文幅を絞り、既存のトークンと部品を使う。
   本文には表示演出を付けない（motion_guidelines.md）。見出しは句の切れ目で折り返す。 */
.article-hero{padding:72px 0 44px}
.article-hero .container,.article-main .container{max-width:780px}
body.light-ui .article-hero h1.article-title{
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.35;
  letter-spacing:-.02em;
  word-break:auto-phrase;
  margin-bottom:18px;
}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 20px;color:var(--light-muted);font-size:13px}
.article-hero .lead{font-size:17px;margin-bottom:0}
.article-main{padding:8px 0 88px}
.article-toc{margin:0 0 44px;padding:22px 24px;border:1px solid var(--light-line);border-radius:18px;background:var(--light-soft)}
.article-toc-label{margin:0 0 8px;color:var(--light-ink);font-size:14px;font-weight:800}
.article-toc ol{margin:0;padding-left:1.4em;color:var(--light-muted);font-size:15px;line-height:1.9}
.article-toc a{color:var(--light-accent)}
.article-body{color:var(--light-ink);font-size:17px;line-height:1.95}
.article-body h2{scroll-margin-top:96px;margin:56px 0 18px;padding-top:26px;border-top:1px solid var(--light-line);font-size:clamp(22px,2.4vw,28px);line-height:1.45}
.article-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.article-body h3{margin:34px 0 10px;font-size:19px;line-height:1.5}
.article-body p{margin:0 0 1.2em}
.article-body ul,.article-body ol{margin:0 0 1.4em;padding-left:1.4em}
.article-body li{margin:.3em 0}
.article-table-wrap{overflow-x:auto;margin:0 0 1.4em}
.article-table-wrap .comparison-table{font-size:15px}
.article-body a:not(.btn){color:var(--light-accent);text-decoration:underline;text-underline-offset:3px}
.article-note{margin:0 0 1.4em;padding:12px 16px;border-left:3px solid var(--light-accent);background:var(--light-soft-blue);color:var(--light-muted);font-size:14px;line-height:1.8}
.article-author{margin:56px 0 0;padding:22px 24px;border:1px solid var(--light-line);border-radius:18px;background:#fff}
.article-author-label{margin:0 0 4px;color:var(--light-muted);font-size:12px;font-weight:700}
.article-author-name{margin:0 0 6px;color:var(--light-ink);font-weight:800}
/* 説明文は名前の直後の段落。担当者のプロフィールへのリンク（Issue #466）の段落には当てない。 */
.article-author-name+p{margin:0;color:var(--light-muted);font-size:14px}
.article-author .article-author-link{margin:14px 0 0}
.article-related{margin:28px 0 0}
.article-related h2{margin:0 0 10px;font-size:16px}
.article-related ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.article-cta{margin-top:44px}
.article-cta .actions{margin-top:4px}
.column-list{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.column-card{padding:26px 28px;border:1px solid var(--light-line);border-radius:20px;background:#fff}
.column-card time{color:var(--light-muted);font-size:13px}
.column-card h2{margin:6px 0 10px;font-size:clamp(20px,2.2vw,24px);line-height:1.45}
.column-card p{margin:0 0 12px;color:var(--light-muted);font-size:15px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
@media(max-width:720px){
  .article-hero{padding:52px 0 32px}
  body.light-ui .article-hero h1.article-title{font-size:clamp(23px,6.6vw,28px)}
  .article-body{font-size:16px}
  .article-toc,.article-author{padding:18px}
  .column-card{padding:22px 20px}
}