.sms-hero { padding:78px max(24px,calc((100vw - 1120px)/2)) 110px; display:grid; grid-template-columns:1fr .82fr; gap:100px; align-items:center; overflow:hidden; background:radial-gradient(circle at 78% 28%,#ccefe3 0,transparent 31%),linear-gradient(180deg,#f7fcfa,#fff); }
.pro-pill { display:inline-block; margin-bottom:16px; padding:5px 13px; color:#fff; border-radius:99px; background:var(--green); font-size:10px; font-weight:800; }
.sms-hero-visual { min-height:565px; position:relative; display:grid; place-items:center; }
.sms-phone { width:295px; min-height:500px; position:relative; z-index:2; }
.send-status { padding:10px 15px; position:absolute; top:35px; right:0; z-index:3; border:1px solid #b8dfd2; border-radius:99px; background:#fff; box-shadow:0 12px 28px rgba(13,69,51,.12); font-size:10px; font-weight:700; }
.send-status i { width:7px; height:7px; margin-right:7px; display:inline-block; border-radius:50%; background:#e7a727; }
.secure-card { padding:13px 17px; position:absolute; left:0; bottom:38px; z-index:3; display:flex; align-items:center; gap:11px; border:1px solid #b8dfd2; border-radius:12px; background:#fff; box-shadow:0 15px 35px rgba(13,69,51,.14); }
.secure-card>b { width:30px; height:30px; display:grid; place-items:center; color:#fff; border-radius:50%; background:var(--green); }
.secure-card strong,.secure-card small { display:block; }
.secure-card strong { font-size:11px; }
.secure-card small { color:var(--muted); font-size:8px; }
.sms-summary { max-width:1080px; margin:-38px auto 0; position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 15px 40px rgba(23,63,51,.08); }
.sms-summary div { padding:24px 16px; text-align:center; }
.sms-summary div+div { border-left:1px solid var(--line); }
.sms-summary strong,.sms-summary span { display:block; }
.sms-summary strong { color:var(--green); font:700 24px "DM Sans"; }
.sms-summary span { color:var(--muted); font-size:10px; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.benefit-grid article { padding:32px; border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(22,65,51,.05); }
.benefit-grid span { color:var(--green); font:700 12px "DM Sans"; }
.benefit-grid h3 { margin:20px 0 10px; font-size:18px; }
.benefit-grid p { margin:0; color:var(--muted); font-size:12px; }
.automation-section { padding:115px max(24px,calc((100vw - 1060px)/2)); color:#fff; background:var(--navy); }
.automation-flow { margin:0; padding:0; list-style:none; }
.automation-flow li { padding:0 0 28px 70px; position:relative; display:grid; grid-template-columns:1fr; }
.automation-flow li:not(:last-child)::before { content:""; width:1px; position:absolute; top:46px; bottom:0; left:22px; background:#38544b; }
.automation-flow li>span { width:46px; height:46px; position:absolute; left:0; top:0; display:grid; place-items:center; color:#71ddba; border:1px solid #416159; border-radius:50%; background:#17342b; font:700 13px "DM Sans"; }
.automation-flow li:last-child>span { color:#fff; border-color:var(--green); background:var(--green); }
.automation-flow small,.automation-flow strong { display:block; }
.automation-flow small { color:#71ddba; font-size:9px; font-weight:700; }
.automation-flow strong { margin:2px 0 3px; font-size:16px; }
.automation-flow p { margin:0; color:#9fb3ad; font-size:11px; }
.cancel-callout { margin:25px 0 0 70px; padding:24px 28px; border:1px solid #315047; border-radius:14px; background:#17342b; }
.cancel-callout span { display:inline-block; margin-bottom:10px; padding:3px 10px; color:#86e4c5; border-radius:99px; background:#204b3d; font-size:9px; font-weight:700; }
.cancel-callout strong { display:block; }
.cancel-callout p { margin:3px 0 0; color:#9fb3ad; font-size:11px; }
.message-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.message-copy>p { color:var(--muted); }
.template-card { padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--soft); }
.template-head { display:flex; justify-content:space-between; font-size:11px; }
.template-head span { color:var(--green); }
.template-text { margin-top:18px; padding:20px; min-height:150px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:13px; }
.template-text mark { color:var(--green); background:#e0f4ed; }
.template-info { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.template-info span { padding:12px 14px; border-radius:9px; background:#fff; }
.template-info small,.template-info strong { display:block; }
.template-info small { color:var(--muted); font-size:8px; }
.template-info strong { font-size:12px; }
.template-card>p { margin:12px 0 0; color:var(--muted); font-size:9px; }
.settings-section { padding:115px max(24px,calc((100vw - 1100px)/2)); background:var(--soft); }
.settings-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.settings-grid article { padding:26px 22px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.settings-grid b { width:42px; height:42px; margin-bottom:26px; display:grid; place-items:center; color:var(--green); border-radius:11px; background:var(--mint); font-size:11px; }
.settings-grid strong { display:block; margin-bottom:7px; font-size:14px; }
.settings-grid p { margin:0; color:var(--muted); font-size:11px; }
.secure-section { padding:115px max(24px,calc((100vw - 1060px)/2)); display:grid; grid-template-columns:1fr 470px; gap:90px; align-items:center; }
.secure-copy>p { color:var(--muted); }
.security-points { margin-top:28px; display:grid; gap:12px; }
.security-points span { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:700; }
.security-points b { width:28px; height:28px; display:grid; place-items:center; color:var(--green); border-radius:50%; background:var(--mint); font:700 10px "DM Sans"; }
.update-panel { padding:26px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 22px 55px rgba(16,69,52,.12); }
.update-head { padding-bottom:20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.update-head .brand-mark { width:38px; height:38px; font-size:17px; }
.update-head small,.update-head strong { display:block; }
.update-head small { color:var(--muted); font-size:8px; }
.update-head strong { font-size:13px; }
.update-panel label { margin-top:13px; display:block; color:var(--muted); font-size:9px; }
.update-panel label span { margin-top:4px; padding:9px 11px; display:block; color:var(--ink); border:1px solid var(--line); border-radius:7px; background:#fff; font-size:11px; }
.update-panel button { width:100%; margin-top:18px; padding:11px; color:#fff; border:0; border-radius:8px; background:var(--green); font:700 11px "Noto Sans JP"; }
.update-panel>p { margin:7px 0 0; color:var(--green); text-align:center; font-size:8px; }
.tracking-section { padding:115px max(24px,calc((100vw - 1040px)/2)); color:#fff; background:var(--navy); }
.usage-card { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid #315047; border-radius:18px; background:#17342b; }
.usage-card div { padding:28px; }
.usage-card div+div { border-left:1px solid #315047; }
.usage-card small { display:block; color:#9db1aa; font-size:9px; }
.usage-card strong { font:700 34px "DM Sans"; }
.usage-card span { margin-left:4px; color:#8ca29b; font-size:9px; }
.sms-pricing { padding:115px 24px; background:var(--soft); }
.pricing-explainer { max-width:850px; margin:auto; padding:38px; display:grid; grid-template-columns:260px 1fr; gap:55px; align-items:center; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 14px 38px rgba(22,65,51,.06); }
.price-main { text-align:center; }
.price-main small { display:block; color:var(--muted); font-size:10px; }
.price-main strong { color:var(--green); font:700 62px/1.2 "DM Sans"; }
.price-main strong span { font-size:24px; }
.price-copy h3 { margin-bottom:10px; font-size:17px; }
.price-copy p { color:var(--muted); font-size:11px; }
.price-copy ul { margin:15px 0 0; padding-left:18px; font-size:11px; font-weight:700; }
.notes-section { padding:115px max(24px,calc((100vw - 1100px)/2)); }
.notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.notes-grid article { padding:24px 26px; border:1px solid var(--line); border-radius:14px; }
.notes-grid strong { font-size:13px; }
.notes-grid p { margin:5px 0 0; color:var(--muted); font-size:11px; }
.data-section { padding:115px max(24px,calc((100vw - 1000px)/2)); color:#fff; background:var(--navy); }
.data-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.data-grid article { padding:27px 28px; border:1px solid #315047; border-radius:15px; background:#17342b; }
.data-grid strong { display:block; margin-bottom:7px; font-size:14px; }
.data-grid p { margin:0; color:#9fb3ad; font-size:11px; }
.sms-faq-section { padding:115px max(24px,calc((100vw - 900px)/2)); background:var(--soft); }
.sms-final .hero-actions { justify-content:center; }
@media(max-width:900px){.sms-hero{grid-template-columns:1fr;gap:45px}.sms-hero-copy{text-align:center}.sms-hero-copy .hero-actions,.sms-hero-copy .hero-points{justify-content:center}.sms-hero-visual{max-width:560px;width:100%;margin:auto}.benefit-grid{grid-template-columns:1fr}.message-section,.secure-section{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr 1fr}.secure-section{gap:45px}.update-panel{width:100%;max-width:500px;margin:auto}.usage-card{grid-template-columns:1fr 1fr}.usage-card div:nth-child(3){border-left:0}.usage-card div:nth-child(n+3){border-top:1px solid #315047}}
@media(max-width:620px){.sms-hero{padding:48px 18px 80px}.sms-hero-visual{min-height:535px}.send-status{right:0}.secure-card{left:0}.sms-summary{margin:0;grid-template-columns:1fr 1fr;border-radius:0}.sms-summary div+div{border-left:0}.sms-summary div:nth-child(even){border-left:1px solid var(--line)}.sms-summary div:nth-child(n+3){border-top:1px solid var(--line)}.sms-intro,.message-section,.secure-section,.notes-section,.data-section,.sms-faq-section{padding:80px 18px}.automation-section,.settings-section,.tracking-section,.sms-pricing{padding:80px 18px}.automation-flow li{padding-left:58px}.cancel-callout{margin-left:0}.message-section{gap:42px}.settings-grid,.data-grid{grid-template-columns:1fr}.usage-card{grid-template-columns:1fr 1fr}.usage-card div{padding:18px 14px}.pricing-explainer{padding:28px 22px;grid-template-columns:1fr;gap:25px}.notes-grid{grid-template-columns:1fr}.sms-final .hero-actions{display:grid}}
@media(max-width:620px){
  .sms-hero h1 { font-size:clamp(27px,8.2vw,34px); letter-spacing:-.055em; white-space:nowrap; }
  .sms-hero-visual { min-height:510px; padding:24px 0; }
  .sms-phone { width:min(295px,100%); min-height:470px; }
  .send-status { top:0; max-width:90%; }
  .secure-card { bottom:0; max-width:92%; }
  .automation-flow li { min-width:0; }
  .automation-flow li>div,.message-copy,.secure-copy,.price-copy { min-width:0; }
  .template-text,.template-card>p,.price-copy,.notes-grid p,.data-grid p { overflow-wrap:anywhere; }
  .security-points span { align-items:flex-start; }
  .security-points b { flex:0 0 auto; }
  .update-panel { padding:22px 18px; }
  .usage-card strong { font-size:29px; }
  .sms-final .hero-actions { width:100%; max-width:420px; margin-right:auto; margin-left:auto; }
  .sms-final .hero-actions .button { width:100%; }
}
@media(max-width:420px){
  .sms-hero { padding-top:38px; }
  .sms-hero-visual { min-height:480px; }
  .sms-phone { min-height:445px; padding:24px 16px; border-width:6px; border-radius:34px; }
  .sms-phone .bubble { margin-top:28px; padding:14px; font-size:11px; }
  .send-status { font-size:9px; }
  .secure-card { padding:10px 12px; }
  .sms-summary div { padding:20px 10px; }
  .sms-summary strong { font-size:20px; }
  .automation-flow li { padding-left:52px; }
  .automation-flow li>span { width:40px; height:40px; }
  .automation-flow li:not(:last-child)::before { top:40px; left:19px; }
  .template-card { padding:20px 16px; }
  .template-info { grid-template-columns:1fr; }
  .usage-card { grid-template-columns:1fr; }
  .usage-card div+div,.usage-card div:nth-child(3) { border-left:0; border-top:1px solid #315047; }
  .price-main strong { font-size:52px; }
}