:root{
  --bg:#f2f6f4;
  --surface:#ffffff;
  --text:#17231f;
  --muted:#66736e;
  --line:#dce6e1;
  --green:#155f45;
  --green-2:#1f8561;
  --soft:#e7f3ed;
  --amber:#9a6400;
  --amber-soft:#fff4d8;
  --red:#9d3434;
  --red-soft:#fdeceb;
  --blue:#1e6594;
  --blue-soft:#eaf4fb;
  --radius:3pt;
  --shadow:0 12px 38px rgba(18,54,40,.08);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,rgba(31,133,97,.08),transparent 24rem),var(--bg);
}
button,a{font:inherit}
button{color:inherit}
.app-shell{width:min(820px,100%);margin:auto;padding:20px 14px 46px}
.app-header{
  margin:4px 1px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.header-copy{min-width:0}
.app-header h1{margin:0;font-size:clamp(29px,5vw,38px);line-height:1.04;letter-spacing:-.045em;overflow-wrap:anywhere}
.app-header p{margin:8px 0 0;color:var(--muted);font-size:15px}
.language-switch{
  display:flex;
  flex:none;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
}
.language-switch button{
  appearance:none;
  border:0;
  border-radius:var(--radius);
  background:transparent;
  padding:8px 10px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.language-switch button[aria-pressed="true"]{
  background:var(--green);
  color:#fff;
}

.group-switcher{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:11px;
}
.group-button{
  appearance:none;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:15px;
  background:var(--surface);
  text-align:left;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:11px;
  box-shadow:0 5px 18px rgba(18,54,40,.04);
}
.group-button:hover{border-color:#a9c7ba}
.group-button[aria-pressed="true"]{
  border-color:var(--green);
  box-shadow:inset 0 0 0 1px var(--green);
  background:#f7fcf9;
}
.group-button .group-icon{font-size:24px;line-height:1}
.group-button strong{display:block;font-size:15px;line-height:1.25}
.group-button small{display:block;color:var(--muted);font-size:11px;line-height:1.4;margin-top:5px}

.hero-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:start;
  padding:22px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#145a43,#237e5f);
  color:#fff;
  box-shadow:var(--shadow);
}
.hero-copy h2{margin:9px 0 8px;font-size:28px;line-height:1.05;letter-spacing:-.035em}
.hero-copy p{margin:0;max-width:500px;font-size:13px;line-height:1.5;opacity:.86}
.status-badge{
  display:inline-block;
  padding:5px 7px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.24);
  font-size:11px;
  font-weight:800;
}
.score-block{text-align:right;min-width:112px}
.score-label{display:block;font-size:11px;font-weight:800;margin-bottom:7px;opacity:.88}
.score{font-size:50px;line-height:1;letter-spacing:-.06em}
.score-denom{font-weight:800;opacity:.66}
.recommendation{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:14px;
}
.recommendation strong{font-size:15px;line-height:1.35}
.recommendation span{font-size:11px;opacity:.76;text-align:right}

.quick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:11px 0;
}
.quick-card,.data-section{
  background:var(--surface);
  border:1px solid rgba(18,54,40,.07);
  border-radius:var(--radius);
  box-shadow:0 7px 25px rgba(18,54,40,.045);
}
.quick-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:15px;
  min-width:0;
}
.quick-icon,.metric-icon{
  display:grid;
  place-items:center;
  flex:none;
  border-radius:var(--radius);
  background:var(--soft);
}
.quick-icon{width:35px;height:35px;font-size:19px}
.quick-card div{min-width:0}
.quick-card div>span,.quick-card small{display:block;color:var(--muted);font-size:11px}
.quick-card strong{display:block;font-size:16px;margin:5px 0 4px;line-height:1.22}
.quick-card small{line-height:1.35}

.data-section{padding:19px;margin-top:11px}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}
.section-heading h2{font-size:18px;margin:0}
.section-meta{font-size:11px;color:var(--muted);font-weight:700}
.section-note,.notice{
  margin:12px 1px 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.segment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.segment-card{
  appearance:none;
  width:100%;
  text-align:left;
  background:#fbfcfc;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  cursor:pointer;
}
.segment-card:hover{border-color:#a9c7ba}
.segment-card[aria-pressed="true"]{
  border-color:var(--green);
  box-shadow:inset 0 0 0 1px var(--green);
  background:#f5fbf8;
}
.segment-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.segment-card strong{font-size:14px;line-height:1.3}
.segment-card p{font-size:11px;color:var(--muted);line-height:1.45;margin:8px 0 0}
.segment-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tag{
  display:inline-block;
  padding:4px 6px;
  border-radius:var(--radius);
  font-size:10px;
  font-weight:800;
  background:var(--soft);
  color:var(--green);
}
.tag.warning{background:var(--red-soft);color:var(--red)}
.tag.price{background:var(--blue-soft);color:var(--blue)}
.segment-check{font-size:16px;color:var(--green)}

.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.metric-grid article{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fbfcfc;
  min-width:0;
}
.metric-icon{width:30px;height:30px;font-size:16px}
.metric-grid article>div{min-width:0}
.metric-grid article>div>span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.metric-grid strong{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.metric-grid small{display:block;color:var(--muted);font-size:10px;margin-top:5px;line-height:1.35}

.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.price-card{
  padding:13px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fbfcfc;
}
.price-card .price-icon{font-size:22px;display:block;margin-bottom:9px}
.price-card span{display:block;color:var(--muted);font-size:11px}
.price-card strong{display:block;font-size:17px;margin-top:5px;line-height:1.25}
.price-card small{display:block;color:var(--muted);font-size:10px;line-height:1.4;margin-top:5px}
.price-card.wide{grid-column:1/-1}

.feature-grid,.poi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.feature-card,.poi-card{
  padding:13px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fbfcfc;
}
.feature-card>span,.poi-card>span{display:block;font-size:22px;margin-bottom:8px}
.feature-card strong,.poi-card strong{display:block;font-size:13px;line-height:1.3;margin-bottom:5px}
.feature-card small,.poi-card small{display:block;color:var(--muted);font-size:11px;line-height:1.45}
.poi-card em{display:block;color:var(--green);font-style:normal;font-size:10px;font-weight:800;margin-bottom:5px}

.ad-slot{
  min-height:90px;
  margin-top:11px;
  padding:12px;
  border:1px solid rgba(18,54,40,.07);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:0 7px 25px rgba(18,54,40,.045);
  overflow:hidden;
}
.qr-section{
  margin-top:11px;
  padding:18px;
  border:1px solid rgba(18,54,40,.07);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:0 7px 25px rgba(18,54,40,.045);
  text-align:center;
}
.qr-link{display:inline-flex;flex-direction:column;align-items:center;gap:9px;color:var(--green);font-size:13px;font-weight:800;text-decoration:none}
.qr-link img{display:block;width:160px;height:160px;border-radius:var(--radius);image-rendering:auto}
.qr-link:hover span,.qr-link:focus-visible span{text-decoration:underline}

footer{padding:23px 2px 0;text-align:center}
footer a{color:var(--green);font-weight:800;text-decoration:none;font-size:14px}
footer a:hover{text-decoration:underline}

@media(max-width:620px){
  .app-shell{padding:14px 8px 32px}
  .app-header{padding:0 3px}
  .app-header h1{font-size:32px}
  .hero-card{padding:18px;grid-template-columns:minmax(0,1fr) auto}
  .hero-copy h2{font-size:24px}
  .score{font-size:43px}
  .recommendation{align-items:flex-start}
  .quick-grid{gap:7px}
  .quick-card{padding:12px 9px;gap:8px}
  .quick-icon{width:31px;height:31px;font-size:17px}
  .quick-card strong{font-size:13px}
  .data-section{padding:15px}
  .metric-grid article{padding:10px}
  .segment-card{padding:12px}
}
@media(max-width:430px){
  .app-header{align-items:flex-start}
  .app-header h1{font-size:29px}
  .language-switch button{padding:7px 9px}
  .group-switcher{grid-template-columns:1fr}
  .hero-card{grid-template-columns:1fr}
  .score-block{text-align:left}
  .recommendation{grid-column:1;display:block}
  .recommendation span{text-align:left;margin-top:6px;display:block}
  .quick-grid{grid-template-columns:1fr}
  .quick-card{align-items:center}
  .segment-grid,.metric-grid,.pricing-grid,.feature-grid,.poi-grid{grid-template-columns:1fr}
  .price-card.wide{grid-column:auto}
}