/* Simples — AI 素材引擎 / Creative Engine page
   Converted 1:1 from the Claude Design handoff (design_handoff_simples_site/html/).
   Values are final: do not re-tune colours, sizes, spacing or motion timings. */

/* engine */
.sp-hero{padding-top:var(--pad-y);padding-bottom:calc(var(--pad-y)*.75);display:flex;flex-direction:column;gap:24px;animation:fadeUp var(--t-base) ease both}
.sp-hero .top{display:flex;justify-content:space-between;align-items:center}
.sp-hero h1{font-size:34px;font-weight:300;line-height:1.3;letter-spacing:0.03em}
.sp-hero h1 .num{font-family:var(--mono);letter-spacing:-0.02em}
.sp-hero p{color:var(--grey-60);max-width:640px}
.sp-hero .link{align-self:flex-start}
@media (min-width:768px){.sp-hero{gap:28px}.sp-hero h1{font-size:44px}.sp-hero p{font-size:17px}.sp-hero h1 br{display:none}}
@media (min-width:1200px){.sp-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.sp-hero .top{grid-column:span 4;flex-direction:column;align-items:flex-start;justify-content:space-between}.sp-hero .body{grid-column:5/span 8;display:flex;flex-direction:column;gap:32px}.sp-hero h1{font-size:56px}}
.sp-hero .body{display:contents}@media (min-width:1200px){.sp-hero .body{display:flex}}
.blk{padding:56px 0;display:flex;flex-direction:column;gap:24px}
.blk-h{display:flex;flex-direction:column;gap:12px}.blk-h h2{font-size:24px}.blk-h p{color:var(--grey-60);max-width:640px}
@media (min-width:768px){.blk{padding:80px 0;gap:32px}.blk-h{gap:16px}.blk-h h2{font-size:28px}}
@media (min-width:1200px){.blk{padding:120px 0;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}.blk-h{grid-column:span 4;gap:20px}.blk-h p{max-width:360px}.blk-b{grid-column:5/span 8}.blk-h h2{font-size:32px}}
.blk.full{display:flex}
.chart{position:relative;height:160px;border-left:1px solid var(--black);border-bottom:1px solid var(--black);margin-bottom:28px}
.chart svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.chart .l1{position:absolute;left:10px;top:0}.chart .l2{position:absolute;right:0;bottom:-28px}.chart .l3{position:absolute;left:calc(50% + 12px);top:12px;display:none}
@media (min-width:768px){.chart{height:220px}.chart .l3{display:block}}
@media (min-width:1200px){.chart{height:280px}}
.kpis{display:flex;flex-direction:column;gap:24px}
.kpi{border-top:1px solid var(--black);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.kpi b{font-family:var(--mono);font-weight:400;font-size:36px;line-height:1;letter-spacing:-0.02em}
.kpi span{font-size:13px;line-height:1.6;color:var(--grey-60)}
@media (min-width:768px){.kpis{display:grid;grid-template-columns:1fr 1fr}.kpi b{font-size:40px}}
@media (min-width:1200px){.kpis{padding-top:24px}.kpi{padding-top:20px}.kpi b{font-size:48px}}
.li{display:grid;grid-template-columns:40px 1fr;gap:6px 12px;align-items:baseline;padding:16px 0;border-top:1px solid var(--hairline)}
.li .no{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--grey-60)}
.li .t{font-size:17px;line-height:1.5;letter-spacing:0.02em}.li .d{grid-column:2;color:var(--grey-60)}
@media (min-width:768px){.li{grid-template-columns:56px 1fr;gap:6px 16px;padding:20px 0}.li .t{font-size:18px}}
@media (min-width:1200px){.li{grid-template-columns:80px 200px 1fr;gap:24px;padding:24px 0}.li .t{font-size:20px}.li .d{grid-column:auto}}
.matrix{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.matrix>div{background:var(--white);padding:14px;display:flex;flex-direction:column;gap:4px}
.matrix .t{font-size:16px;letter-spacing:0.02em}.matrix .s{font-size:13px;line-height:1.6;color:var(--grey-60);display:none}
.matrix .v{justify-content:flex-end}
.matrix-lg{display:none}
@media (min-width:768px){.matrix{grid-template-columns:repeat(3,1fr)}.matrix>div{padding:16px}.matrix .t{font-size:17px}.matrix .s{display:block}}
@media (min-width:1200px){.matrix{display:none}.matrix-lg{display:grid;grid-template-columns:120px repeat(5,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}.matrix-lg>div{background:var(--white);padding:20px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.6;color:var(--grey-60)}.matrix-lg .hd .t{font-size:17px;color:var(--black)}.matrix-lg .cell{min-height:72px;justify-content:flex-end;transition:color var(--t-fast)}.matrix-lg .cell:hover{color:var(--signal)}}
.mx-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.dark .label{color:var(--grey-30)}
.dark h2{font-size:30px}
.dark .note{font-size:13px;color:var(--grey-30);line-height:1.7}
.dark .ph{display:flex;flex-direction:column;gap:12px;position:relative}
@media (min-width:768px){.dark h2{font-size:40px}.dark .ph{gap:16px}.dark h2 br{display:none}}
@media (min-width:1200px){.dark .ph{flex-direction:row;justify-content:space-between;align-items:flex-end}.dark .ph .note{max-width:320px;text-align:right}.dark h2{font-size:48px}.dark h2 br{display:inline}}
.plans{display:flex;flex-direction:column;position:relative;border-bottom:1px solid var(--grey-60);margin-top:32px}
.plan{border-top:1px solid var(--grey-60);padding:20px 0;display:flex;flex-direction:column;gap:12px}
.plan .hd{display:flex;justify-content:space-between;align-items:baseline}
.plan .n{font-size:20px;letter-spacing:0.02em}.plan .tag{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--grey-30)}
.plan .pr{font-family:var(--mono);font-size:32px;line-height:1;letter-spacing:-0.02em}
.plan .d{color:var(--grey-30)}
.plan .link{border-color:var(--white);color:var(--white);align-self:flex-start}.plan .link:hover{color:var(--signal);border-color:var(--signal)}
.plan.rec{border-top-color:var(--signal);outline:1px solid var(--signal);outline-offset:-1px;padding-left:16px;padding-right:16px}
.plan.rec .tag{color:var(--signal)}
@media (min-width:768px){.plans{margin-top:40px}.plan{padding:24px 0;display:grid;grid-template-columns:140px 140px 1fr auto;gap:24px;align-items:baseline}.plan .hd{flex-direction:column;align-items:flex-start;gap:4px}.plan.rec{padding-left:24px;padding-right:24px}}
@media (min-width:1200px){.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;border-bottom:0;margin-top:64px}.plan{border-top:1px solid var(--grey-60);padding:24px 0 0;display:flex;flex-direction:column;gap:32px}.plan .hd{flex-direction:row;align-items:baseline}.plan .pr{font-size:40px}.plan .d{min-height:80px}.plan.rec{outline-offset:16px;padding-left:0;padding-right:0}}
.steps6{border-bottom:1px solid var(--hairline)}
.step6{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:baseline;padding:16px 0;border-top:1px solid var(--hairline)}
.step6 .no{font-family:var(--mono);font-size:13px;letter-spacing:0.06em}.step6 .who{font-family:var(--mono);font-size:13px;letter-spacing:0.06em;color:var(--grey-30)}.step6 .t{font-size:17px;letter-spacing:0.02em}
@media (min-width:768px){.steps6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border-top:1px solid var(--hairline)}.step6{background:var(--white);border:0;padding:24px 20px 32px 0;display:flex;flex-direction:column;gap:20px}.step6 .hd{display:flex;justify-content:space-between;padding-right:20px}.step6 .t{font-size:18px}}
@media (min-width:1200px){.steps6{grid-template-columns:repeat(6,1fr)}.step6{padding:32px 24px 40px 0;gap:28px}.step6 .t{font-size:20px}}
@media (max-width:767px){.step6 .hd{display:contents}}
.sp-cta{display:flex;flex-direction:column;gap:40px}
.sp-cta .main{display:flex;flex-direction:column;gap:20px}.sp-cta h2{font-size:32px}
.sp-cta .proof{border-top:1px solid var(--black);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.sp-cta .proof b{font-family:var(--mono);font-weight:400;font-size:40px;line-height:1;letter-spacing:-0.02em}.sp-cta .proof span{font-size:13px;line-height:1.6;color:var(--grey-60)}
@media (min-width:768px){.sp-cta{gap:48px}.sp-cta .main{gap:24px}.sp-cta h2{font-size:40px}.sp-cta .proof{flex-direction:row;gap:24px;align-items:baseline;padding-top:20px}}
@media (min-width:1200px){.sp-cta{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}.sp-cta .proof{grid-column:span 4;order:-1;flex-direction:column;gap:20px;padding-top:24px}.sp-cta .proof b{font-size:56px}.sp-cta .main{grid-column:6/span 7;gap:28px}.sp-cta h2{font-size:48px}}
.sp-cta .cta-signal{align-self:flex-start}