:root{
  --bg:#f4faf7;
  --bg-2:#e8f5ef;
  --card:#ffffff;
  --line:#d9ebe2;
  --text:#102a25;
  --muted:#5e756e;
  --accent:#0e8f74;
  --accent-2:#1ca282;
  --accent-soft:#def4ec;
  --radius:18px;
  --shadow:0 14px 40px rgba(9, 48, 39, 0.1);
  font-family: "Space Grotesk", "Segoe UI", Tahoma, sans-serif;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(circle at 18% 10%, #ffffff 0%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 84% 16%, #e1f6ef 0%, rgba(225,246,239,0) 34%),
    linear-gradient(165deg, var(--bg) 0%, var(--bg-2) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:860px;
  margin:36px auto;
  padding:22px;
  font-size:16px;
  line-height:1.5;
}

.header{
  text-align:center;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fffb 100%);
  box-shadow:var(--shadow);
  padding:20px 20px 16px;
}

.brand-bubble{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:fit-content;
  margin:0 auto;
  text-decoration:none;
  border:1px solid #cbe8de;
  border-radius:999px;
  padding:8px 16px 8px 8px;
  background:linear-gradient(160deg, #ffffff 0%, #e9f8f2 100%);
  box-shadow:0 10px 24px rgba(16, 76, 62, 0.12);
}

.brand-logo{
  width:70px;
  height:70px;
  object-fit:contain;
  display:block;
  margin:0;
  border-radius:999px;
  background:linear-gradient(160deg, #ffffff 0%, var(--accent-soft) 100%);
  border:1px solid #cde7dd;
  padding:8px;
  box-shadow:0 6px 18px rgba(16, 76, 62, 0.14);
}

.nav{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav-link{
  color:var(--text);
  background:#ffffff;
  border:1px solid var(--line);
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  transition:transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.nav-link:hover{
  border-color:#b8ddd0;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(8, 60, 48, 0.1);
}

.title{ margin:0; font-size:2.1rem; letter-spacing:-0.02em }

.subtitle{
  margin:0;
  color:#1b6757;
  font-family:"Libre Baskerville", Georgia, serif;
  font-weight:700;
  font-size:0.98rem;
  letter-spacing:0.02em;
  line-height:1.4;
  max-width:360px;
  text-align:left;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  padding:24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.question{
  margin:0 0 14px;
  color:var(--accent);
  font-size:1.42rem;
}

.form{ display:flex; flex-direction:column; gap:12px }

.label{
  font-size:0.93rem;
  color:var(--muted);
  font-weight:700;
}

.input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d5e8df;
  font-size:1rem;
  color:var(--text);
  background:#fbfffd;
  width:100%;
  min-width:0;
}

.input:focus{
  outline:3px solid rgba(29, 162, 130, 0.2);
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(29, 162, 130, 0.08);
}

.input--textarea{ min-height:130px; resize:vertical }
.input--short{ width:88px }

.captcha-row{ display:flex; flex-direction:column }
.captcha{ display:flex; gap:12px; align-items:center }

.actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:6px;
}

.btn{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#ffffff;
  border:0;
  padding:12px 18px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  min-height:44px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(14, 143, 116, 0.25);
}

.btn:disabled{ opacity:0.6; cursor:not-allowed }

.status{ color:var(--muted); font-size:0.95rem }

.note{
  margin-top:12px;
  color:var(--muted);
  font-size:0.92rem;
}

.footer{
  text-align:center;
  margin-top:16px;
  color:var(--muted);
}

.ad-preview{
  margin:16px 0;
  border:1px dashed #bfdcd1;
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff 0%, #f7fffb 100%);
  padding:10px 12px;
}

.ad-preview-label{
  margin:0 0 8px;
  font-size:0.74rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
}

.ad-slot{
  width:100%;
  min-height:110px;
  border:1px solid var(--line);
  border-radius:10px;
  background:repeating-linear-gradient(
    -45deg,
    #f6fcf9,
    #f6fcf9 12px,
    #edf8f3 12px,
    #edf8f3 24px
  );
}

.legal-disclaimer{
  margin:0;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8fffc;
  color:#46655e;
  font-size:0.84rem;
  line-height:1.5;
  box-shadow:0 6px 14px rgba(9, 48, 39, 0.06);
}

.visually-hidden{
  position:absolute !important;
  height:1px;
  width:1px;
  overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);
  white-space:nowrap;
}

.recaptcha-note{ font-size:0.9rem; color:var(--muted) }

.faq-list{ display:flex; flex-direction:column; gap:10px }

.faq-item{
  border:1px solid #d9ebe2;
  border-radius:12px;
  background:#fbfffd;
  padding:2px 12px;
}

.faq-item summary{
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  padding:10px 28px 10px 0;
  list-style:none;
  position:relative;
}

.faq-item summary::-webkit-details-marker{ display:none }

.faq-item summary::after{
  content:'▾';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  transition:transform 160ms ease, color 160ms ease;
}

.faq-item[open] summary::after{
  transform:translateY(-50%) rotate(180deg);
  color:var(--accent);
}

.faq-item summary:focus{ outline:none }

.faq-item summary:focus-visible{
  box-shadow:0 0 0 3px rgba(29, 162, 130, 0.25);
  border-radius:8px;
}

.faq-item .note{ margin:2px 0 12px }

.policy-list{
  margin:8px 0 14px;
  padding-left:20px;
  color:var(--muted);
}

.policy-list li{ margin:6px 0 }

.summary-card .question{ margin-bottom:8px }
.summary-intro{ margin-top:0; margin-bottom:14px }
.summary-controls{ max-width:360px; margin:0 auto }
.summary-controls .label{ display:block; text-align:left }
.summary-controls .input{ width:100% }
.summary-controls .note{ margin-top:8px; text-align:left }
.summary-content{ margin-top:22px; font-size:1.04rem }

/* Summary result */
.summary-result{ text-align:left }
.summary-question{
  font-size:1.22rem;
  font-weight:700;
  line-height:1.45;
  color:var(--text);
  margin:6px 0 0;
}
.summary-divider{
  border:none;
  border-top:1px solid var(--line);
  margin:20px 0;
}
.summary-meta{
  font-size:0.82rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--muted);
  text-align:center;
  margin:0 0 18px;
}
.summary-overall{
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:1.08rem;
  line-height:1.75;
  color:var(--text);
  border-left:3px solid var(--accent);
  margin:0 0 24px;
  padding:8px 0 8px 18px;
  font-style:italic;
}
.summary-chips-section{ margin-bottom:18px }
.chips-label{
  font-size:0.73rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:var(--muted);
  margin-bottom:9px;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  display:inline-block;
  padding:5px 14px;
  border-radius:99px;
  font-size:0.875rem;
  font-weight:500;
  line-height:1.4;
}
.chip--phrase{
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid rgba(14,143,116,0.25);
}
.chip--emotion{
  background:transparent;
  color:var(--accent-2);
  border:1.5px solid var(--accent-2);
}

/* No-summary state */
.summary-no-data{
  font-weight:600;
  font-size:1.05rem;
  margin:0 0 6px;
}
.summary-no-data-note{
  color:var(--muted);
  font-size:0.95rem;
  margin:0;
}

@media (max-width:700px){
  .container{ margin:18px 10px; padding:14px; font-size:15px }
  .header{ padding:16px 14px 14px; border-radius:18px }
  .brand-bubble{ gap:10px; padding:7px 12px 7px 7px }
  .brand-logo{ width:58px; height:58px }
  .subtitle{ font-size:0.84rem; max-width:240px }
  .nav{ gap:8px }
  .nav-link{ width:100%; text-align:center }
  .card{ padding:16px; border-radius:14px }
  .question{ font-size:1.22rem }
  .actions{ flex-direction:column; align-items:stretch }
  .btn{ width:100%; padding:13px; font-size:1rem }
  .legal-disclaimer{ font-size:0.8rem }
  .ad-slot{ min-height:96px }
}

@media (min-width:1200px){
  .container{ max-width:980px }
}