:root{
  --h: 88;
  --c-brand: hsl(var(--h) 55% 36%);
  --c-brand-dark: hsl(var(--h) 50% 22%);
  --c-brand-light: hsl(var(--h) 50% 93%);
  --c-accent: hsl(calc(var(--h) - 25) 60% 42%);
  --c-text: hsl(var(--h) 12% 20%);
  --c-sub: hsl(var(--h) 8% 42%);
  --c-line: hsl(var(--h) 18% 84%);
  --c-bg: hsl(var(--h) 25% 98%);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Gothic A1',-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.7;
}
.wrap{max-width:798px;margin-inline:auto;padding-inline:20px;}
a{color:inherit;text-decoration:none;}

/* Header H7: bordered box header */
.site-header{padding:14px 20px;}
.head-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:2px solid var(--c-brand);
  border-radius:14px;
  padding:14px 22px;
  background:#fff;
}
.logo{font-weight:700;font-size:1.2rem;color:var(--c-brand-dark);}
.site-header nav{display:flex;gap:18px;}
.site-header nav a{font-size:.94rem;color:var(--c-sub);}
.site-header nav a:hover{color:var(--c-brand);}

/* Hero V2: centered large typography */
.hero{
  background:var(--c-brand-light);
  padding-block:64px;
  text-align:center;
}
.hero h1{
  font-size:2.6rem;
  font-weight:900;
  margin:0 0 20px;
  color:var(--c-brand-dark);
  letter-spacing:-.01em;
}
.hero .lead{
  max-width:620px;
  margin-inline:auto;
  font-size:1.02rem;
  color:var(--c-sub);
}

main{padding-block:48px;}
.blk{margin-bottom:34px;}
.blk h2{
  font-size:1.28rem;
  color:var(--c-brand-dark);
  margin:0 0 12px;
}
.blk p{margin:0;color:var(--c-text);}

/* Table */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  font-size:.92rem;
  background:#fff;
}
thead th{
  background:var(--c-brand);
  color:#fff;
  padding:10px 12px;
  text-align:left;
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--c-line);
}
tbody tr:nth-child(even){background:var(--c-brand-light);}

.faq h2{color:var(--c-accent);}
.faq-item{
  border-bottom:1px solid var(--c-line);
  padding:16px 0;
}
.faq-item h3{
  font-size:1.02rem;
  margin:0 0 6px;
  color:var(--c-brand-dark);
}
.faq-item p{margin:0;color:var(--c-sub);font-size:.95rem;}

.ph{margin:0 0 48px;}
.ph-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:16px;max-width:900px;margin-inline:auto;}
.ph-row img{flex:1 1 0;min-width:0;width:100%;height:auto;display:block;border-radius:8px;}
@media (max-width:600px){.ph-row{gap:10px;}}

/* CTA C1: full-width band */
.cta{
  background:var(--c-brand);
  padding-block:44px;
  text-align:center;
}
.cta-text{
  color:#fff;
  font-size:1.1rem;
  margin:0 0 18px;
}
.cta-btn{
  display:inline-block;
  background:#fff;
  color:var(--c-brand-dark);
  font-weight:700;
  padding:13px 30px;
  border-radius:8px;
}
.cta-btn:hover{background:var(--c-brand-light);}

/* Footer F3: single-row */
footer{
  background:hsl(var(--h) 15% 15%);
  padding:14px 20px;
}
footer .wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 20px;
}
footer p{
  margin:0;
  font-size:.86rem;
  color:hsl(var(--h) 15% 78%);
}

@media (max-width:1024px){
  .wrap{padding-inline:18px;}
}
@media (max-width:768px){
  .hero h1{font-size:2.1rem;}
}
@media (max-width:480px){
  .head-box{flex-direction:column;gap:12px;}
  table{font-size:.82rem;}
}