@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@600;700&display=swap');

:root {
  --teal: #008184;
  --teal-2: #0b9a97;
  --teal-dark: #006b6d;
  --ink: #162222;
  --muted: #687777;
  --line: #e3ecea;
  --soft: #f4f8f7;
  --soft-teal: #eaf7f5;
  --white: #ffffff;
  --warn: #986113;
  --warn-bg: #fff7e8;
  --danger: #b42318;
  --danger-bg: #fff2f0;
  --success-bg: #e9f8f3;
  --shadow: 0 14px 44px rgba(11, 74, 72, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(0,129,132,.07), transparent 30%),
    #f5f8f7;
}
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }

.shell { max-width: 1180px; margin: 0 auto; padding: 20px 24px 40px; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0 18px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand-mark {
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--teal),var(--teal-2)); color:#fff;
  font:700 14px Montserrat,sans-serif; box-shadow:0 8px 22px rgba(0,129,132,.2);
}
.brand strong { display:block; font:700 17px Montserrat,sans-serif; }
.brand span { display:block; color:var(--muted); font-size:11px; margin-top:2px; }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; border:1px solid transparent; text-decoration:none; cursor:pointer; font-weight:700; }
.btn-primary { background:var(--teal); color:#fff; }
.btn-primary:hover { background:var(--teal-dark); }
.btn-secondary { background:#fff; border-color:var(--line); }
.btn-link { background:transparent; color:var(--muted); padding-right:0; }

.eyebrow,.section-kicker { color:var(--teal); font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:10px; }
h1,h2,h3 { font-family:Montserrat,sans-serif; margin:0; }
.dashboard-header { padding:26px 0 24px; }
.dashboard-header h1 { font-size:clamp(28px,4vw,40px); margin-top:8px; }
.dashboard-header p { margin:8px 0 0; color:var(--muted); font-size:14px; }

.contracts { display:grid; gap:24px; }
.contract-card { display:grid; gap:16px; }
.plan-hero,.section-card,.loading-card,.empty-state,.error-box {
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
}
.plan-hero { min-height:250px; display:flex; justify-content:space-between; gap:28px; align-items:stretch; padding:28px; overflow:hidden; position:relative; }
.plan-hero::after { content:""; position:absolute; width:330px; height:330px; border-radius:50%; right:-130px; top:-160px; background:rgba(0,129,132,.06); }
.plan-hero-copy { position:relative; z-index:1; flex:1; }
.status-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.status { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:800; }
.status i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.ACTIVE { color:var(--teal-dark); background:var(--success-bg); }
.status.PENDING_DELIVERY { color:#52615f; background:#eef3f2; }
.status.PENDING_PAYMENT { color:var(--danger); background:var(--danger-bg); }
.status.PENDING_ADDRESS_CONFIRMATION { color:var(--warn); background:var(--warn-bg); }
.status.PENDING_VALIDATION { color:#52615f; background:#eef3f2; }
.order-chip { color:var(--muted); background:var(--soft); padding:7px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.plan-hero h2 { font-size:clamp(23px,3vw,34px); line-height:1.15; }
.plan-hero p { color:var(--muted); line-height:1.6; max-width:650px; margin:10px 0 24px; font-size:14px; }
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:760px; }
.hero-stats div { padding:14px 15px; background:var(--soft); border-radius:14px; min-height:72px; }
.hero-stats span,.location-grid span { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }
.hero-stats strong,.location-grid strong { font-size:13px; }
.plan-badge { flex:0 0 175px; min-height:190px; border-radius:19px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:linear-gradient(145deg,#008184,#006b6d); color:#fff; position:relative; z-index:1; }
.plan-badge-ring { width:78px; height:78px; border:1px solid rgba(255,255,255,.5); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.plan-badge-ring span { font:700 31px Montserrat,sans-serif; line-height:1; }
.plan-badge-ring small { font-size:8px; letter-spacing:.14em; }
.plan-badge b { font:700 14px/1.15 Montserrat,sans-serif; text-align:center; letter-spacing:.06em; }

.notice { display:flex; gap:12px; align-items:flex-start; padding:15px 17px; background:var(--soft-teal); border:1px solid #d5ece8; border-radius:16px; }
.notice-danger { background:var(--danger-bg); border-color:#f7d1cd; }
.notice-warning { background:var(--warn-bg); border-color:#f2dcad; }
.notice-icon { width:25px; height:25px; border-radius:8px; display:grid; place-items:center; background:#fff; font-weight:900; flex:0 0 auto; }
.notice strong { font:700 13px Montserrat,sans-serif; }
.notice p { margin:4px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }

.section-card { padding:22px; box-shadow:0 8px 28px rgba(11,74,72,.045); }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.section-head.compact { margin-bottom:14px; }
.section-head h3 { font-size:18px; margin-top:5px; }
.pin-pill { padding:8px 11px; border-radius:999px; background:var(--soft-teal); color:var(--teal-dark); font-size:11px; font-weight:800; }
.location-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.location-grid div { padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:#fff; }

.year-tabs { display:inline-flex; padding:3px; background:var(--soft); border-radius:10px; }
.year-tab { border:0; background:transparent; border-radius:8px; padding:7px 11px; cursor:pointer; font-size:11px; font-weight:800; color:var(--muted); }
.year-tab.active { background:#fff; color:var(--teal-dark); box-shadow:0 2px 8px rgba(14,61,54,.08); }
.benefits-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.benefit-card { border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; gap:13px; min-height:145px; }
.benefit-icon { width:38px; height:38px; border-radius:12px; background:var(--soft-teal); color:var(--teal-dark); display:grid; place-items:center; font:700 13px Montserrat,sans-serif; flex:0 0 auto; }
.benefit-main { flex:1; min-width:0; }
.benefit-label { font-size:11px; color:var(--muted); }
.benefit-count { display:flex; align-items:baseline; gap:7px; margin-top:7px; }
.benefit-count strong { font:700 28px Montserrat,sans-serif; }
.benefit-count span { color:var(--muted); font-size:11px; }
.benefit-progress { height:5px; background:#edf2f1; border-radius:999px; overflow:hidden; margin:12px 0 7px; }
.benefit-progress i { display:block; height:100%; background:var(--teal); border-radius:999px; }
.benefit-foot { color:var(--muted); font-size:10px; }

.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.action-card { width:100%; border:1px solid var(--line); background:#fff; border-radius:15px; padding:14px; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; text-decoration:none; transition:.18s ease; }
.action-card:hover { border-color:#b8d9d5; transform:translateY(-1px); box-shadow:0 8px 20px rgba(11,74,72,.06); }
.action-card.disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.action-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--soft); color:var(--teal-dark); font-weight:800; flex:0 0 auto; }
.action-card > span:nth-child(2) { flex:1; min-width:0; }
.action-card strong { display:block; font-size:12px; }
.action-card small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.action-card b { color:#8a9896; font-size:20px; font-weight:400; }
.phase-note { margin:13px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }

.timeline { display:grid; }
.timeline-item { display:flex; gap:12px; min-height:58px; }
.timeline-rail { width:18px; display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
.timeline-dot { width:9px; height:9px; border-radius:50%; background:var(--teal); margin-top:4px; }
.timeline-rail i { width:1px; flex:1; background:var(--line); margin:5px 0; }
.timeline-copy { padding-bottom:15px; }
.timeline-copy strong { font-size:12px; }
.timeline-copy p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }

.loading-card { min-height:150px; display:flex; align-items:center; justify-content:center; gap:14px; padding:28px; }
.loading-card strong { display:block; font:700 14px Montserrat,sans-serif; }
.loading-card span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.spinner { width:28px; height:28px; border:3px solid #e3ecea; border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state,.error-box { padding:44px 24px; text-align:center; }
.empty-state { max-width:700px; margin:0 auto; }
.empty-icon { width:54px; height:54px; margin:0 auto 15px; border-radius:17px; background:var(--soft-teal); color:var(--teal-dark); display:grid; place-items:center; font:700 18px Montserrat,sans-serif; }
.empty-state h2 { font-size:21px; }
.empty-state p,.error-box p { color:var(--muted); font-size:13px; max-width:500px; margin:9px auto 18px; line-height:1.6; }
.error-box strong { color:var(--danger); }
.footer { text-align:center; color:#8a9896; font-size:10px; padding:32px 0 8px; }

@media (max-width: 840px) {
  .plan-badge { flex-basis:140px; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .hero-stats div:first-child { grid-column:span 2; }
  .location-grid { grid-template-columns:1fr 1fr; }
  .benefits-grid { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .shell { padding:12px 13px 28px; }
  .nav { padding:8px 0 12px; }
  .brand span { display:none; }
  .dashboard-header { padding:20px 2px 17px; }
  .dashboard-header h1 { font-size:27px; }
  .dashboard-header p { font-size:12px; }
  .plan-hero,.section-card { border-radius:17px; }
  .plan-hero { padding:18px; min-height:0; display:block; }
  .plan-badge { display:none; }
  .status-row { margin-bottom:16px; }
  .plan-hero h2 { font-size:23px; }
  .plan-hero p { font-size:12px; margin-bottom:18px; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .hero-stats div:first-child { grid-column:span 2; }
  .hero-stats div { padding:12px; min-height:66px; }
  .section-card { padding:16px; }
  .section-head { align-items:flex-start; }
  .section-head h3 { font-size:16px; }
  .location-grid { grid-template-columns:1fr 1fr; }
  .location-grid div { padding:11px; }
  .year-tabs { flex:0 0 auto; }
  .benefit-card { min-height:125px; }
  .action-grid { grid-template-columns:1fr; }
  .notice { padding:13px; }
}

@media (max-width: 390px) {
  .location-grid { grid-template-columns:1fr; }
  .section-head { flex-direction:column; }
  .year-tabs { align-self:flex-start; }
}