:root{
  --cream:#FBF8F1;
  --panel-dark:#2A2A35;
  --teal:#1E6E6A;
  --teal-deep:#15514E;
  --orange:#D98A2B;
  --ink:#2A2A35;
  --ink-soft:#6B6A75;
  --card:#FFFFFF;
  --line:#EFE9DC;
  --bg-soft:#F2F1EE;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg-soft); color:var(--ink); font-family:'Segoe UI', system-ui, sans-serif;}
a{color:inherit;}

.topbar{
  display:flex; align-items:center; gap:14px; padding:18px 5vw; background:var(--card); border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px;}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--teal);}
.crumb{color:var(--ink-soft); font-size:13px;}
.crumb a{text-decoration:none; color:var(--ink-soft);}
.crumb a:hover{color:var(--teal);}
.topbar .spacer{flex:1;}
.nav-cta{background:var(--teal); color:#fff; font-weight:700; font-size:12.5px; padding:9px 16px; border-radius:20px; text-decoration:none; white-space:nowrap;}

.wrap{max-width:900px; margin:0 auto; padding:40px 5vw 80px;}
.status-badge{
  display:inline-block; background:#F2F1EE; color:var(--ink-soft); font-size:11.5px; font-weight:700;
  padding:5px 13px; border-radius:20px; margin-bottom:16px; border:1px solid var(--line);
}
h1{color:var(--teal-deep); font-size:clamp(24px,3.4vw,32px); margin-bottom:14px;}
.lead{color:var(--ink-soft); font-size:14.5px; line-height:1.75; max-width:680px; margin-bottom:34px;}

.plan-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:30px;}
.plan-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px;}
.plan-card h3{font-size:15px; margin-bottom:12px;}
.plan-card ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
.plan-card li{font-size:13.3px; color:var(--ink-soft); padding-left:16px; position:relative;}
.plan-card li::before{content:"○"; position:absolute; left:0; color:#B7B6BE; font-size:10px; top:3px;}

.note{color:var(--ink-soft); font-size:13px; line-height:1.7; background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:18px 20px;}

@media(max-width:700px){
  .plan-grid{grid-template-columns:1fr;}
  .topbar{flex-wrap:wrap;}
}