@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@400;600;700&display=swap");

:root{
  --background:hsl(60 4% 95%);
  --foreground:hsl(24 9% 10%);
  --card:hsl(60 9% 97%);
  --card-foreground:hsl(24 9% 10%);
  --primary:hsl(37 92% 50%);
  --primary-foreground:hsl(47 100% 96%);
  --secondary:hsl(24 5% 44%);
  --muted:hsl(23 5% 82%);
  --muted-foreground:hsl(24 9% 10% / 0.7);
  --accent:hsl(47 100% 96%);
  --accent-strong:hsl(37 92% 50% / 0.08);
  --line:hsl(23 5% 82%);
  --radius-lg:2rem;
  --radius-md:1.5rem;
  --radius-sm:1.25rem;
  --shadow-lg:0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl:0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 12px 22px -4px hsl(37 92% 50% / 0.12);
  --container:1200px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top left, hsl(37 92% 50% / 0.24), transparent 32%),
    radial-gradient(circle at top right, hsl(24 9% 10% / 0.08), transparent 24%),
    var(--background);
  color:var(--foreground);
  font-family:"Source Sans Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select{
  font:inherit;
}

.page-shell{
  min-height:100vh;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid hsl(23 5% 82% / 0.8);
  background:hsl(60 4% 95% / 0.95);
  backdrop-filter:blur(12px);
}

.container{
  width:min(calc(100% - 32px), var(--container));
  margin:0 auto;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
}

.brand-mark{
  font-size:2rem;
  font-weight:700;
  letter-spacing:0.16em;
  color:var(--primary);
}

.topbar-badge,
.eyebrow-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid hsl(37 92% 50% / 0.2);
  background:var(--accent);
  color:var(--primary);
  border-radius:999px;
  padding:11px 18px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

.topbar-badge{
  background:hsl(37 92% 50% / 0.1);
}

.main-content{
  position:relative;
  overflow:hidden;
}

.hero{
  padding:28px 0 64px;
}

.hero-grid{
  display:grid;
  gap:16px;
  align-items:start;
  margin-bottom:24px;
}

.hero-copy{
  max-width:760px;
}

.eyebrow-badge{
  margin-bottom:6px;
  letter-spacing:normal;
  text-transform:none;
  font-size:0.88rem;
  font-weight:600;
}

.eyebrow-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--primary);
  box-shadow:0 0 0 6px hsl(37 92% 50% / 0.12);
  flex:0 0 auto;
}

.hero-title,
.section-title,
.thanks-title,
.error-title{
  margin:0;
  color:var(--foreground);
  font-family:"Source Serif Pro", Georgia, serif;
  font-weight:600;
  letter-spacing:-0.02em;
}

.hero-title{
  font-size:clamp(2.5rem, 4vw, 4.4rem);
  line-height:1.08;
}

.hero-text,
.section-text,
.side-text,
.thanks-text,
.error-text{
  color:var(--muted-foreground);
  font-size:0.98rem;
  line-height:1.65;
}

.content-grid{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card);
  box-shadow:var(--shadow-xl);
}

.panel-main{
  padding:28px;
}

.panel-side{
  padding:24px;
}

.panel-dark{
  background:var(--foreground);
  color:var(--background);
  box-shadow:0 10px 30px hsl(24 9% 10% / 0.12);
}

.section-eyebrow{
  margin:0;
  color:var(--primary);
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
}

.section-title{
  margin-top:12px;
  font-size:1.55rem;
  line-height:1.2;
}

.section-text{
  margin:10px 0 0;
}

.form-section{
  margin-top:26px;
  padding-top:26px;
  border-top:1px solid var(--line);
}

.field-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field-label{
  color:var(--muted-foreground);
  font-size:0.88rem;
}

.field-input{
  width:100%;
  height:46px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--background);
  padding:0 16px;
  color:var(--foreground);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field-input::placeholder{
  color:hsl(24 9% 10% / 0.38);
}

.field-input:focus,
.choice-input:focus,
.accept-check:focus{
  border-color:hsl(37 92% 50% / 0.6);
  box-shadow:0 0 0 4px hsl(37 92% 50% / 0.16);
}

select.field-input{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, hsl(24 9% 10% / 0.5) 50%), linear-gradient(135deg, hsl(24 9% 10% / 0.5) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
}

.is-hidden{
  display:none;
}

.choices{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  margin-top:18px;
}

.choice{
  display:flex;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:hsl(47 100% 96% / 0.5);
  padding:16px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.choice:hover{
  border-color:hsl(37 92% 50% / 0.3);
  background:var(--accent);
  transform:translateY(-1px);
}

.choice-input,
.accept-check{
  margin-top:3px;
  accent-color:var(--primary);
}

.choice-title{
  margin:0;
  font-size:1rem;
  font-weight:700;
}

.choice-price{
  margin:8px 0 0;
  font-size:1.35rem;
  font-weight:700;
  color:var(--primary);
}

.choice-note{
  margin:10px 0 0;
  color:var(--muted-foreground);
  font-size:0.88rem;
  line-height:1.5;
}

.term-box{
  margin-top:18px;
  max-height:320px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:hsl(60 4% 95% / 0.8);
  padding:20px;
  box-shadow:inset 0 1px 2px hsl(0 0% 0% / 0.05);
}

.term-box,
.term-box p,
.term-box li{
  font-size:0.88rem;
  line-height:1.65;
  color:hsl(24 9% 10% / 0.78);
}

.accept-box{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-top:16px;
  border:1px solid hsl(37 92% 50% / 0.15);
  border-radius:var(--radius-md);
  background:hsl(37 92% 50% / 0.05);
  padding:16px;
  color:hsl(24 9% 10% / 0.75);
  line-height:1.6;
}

.accept-small,
.helper-text,
.dark-list{
  font-size:0.88rem;
  line-height:1.6;
}

.helper-text{
  color:hsl(24 9% 10% / 0.6);
}

.button-primary,
.button-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border-radius:var(--radius-sm);
  padding:14px 22px;
  font-size:0.95rem;
  font-weight:700;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.button-primary{
  width:100%;
  border:0;
  background:var(--primary);
  color:var(--primary-foreground);
  cursor:pointer;
}

.button-primary:hover{
  background:hsl(37 92% 46%);
  transform:translateY(-1px);
}

.button-secondary{
  border:1px solid var(--line);
  color:var(--foreground);
}

.button-secondary:hover{
  border-color:hsl(37 92% 50% / 0.35);
  color:var(--primary);
}

.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:24px;
}

.side-stack{
  display:grid;
  gap:24px;
}

.feature-stack{
  margin-top:18px;
  display:grid;
  gap:12px;
}

.feature-card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:hsl(60 4% 95% / 0.7);
  padding:16px;
}

.feature-title{
  margin:0;
  font-size:0.95rem;
  font-weight:700;
}

.feature-text{
  margin:8px 0 0;
  color:var(--muted-foreground);
  font-size:0.86rem;
  line-height:1.55;
}

.dark-list{
  margin:18px 0 0;
  padding-left:20px;
  color:hsl(60 9% 97% / 0.8);
}

.dark-list li + li,
.plain-list li + li{
  margin-top:14px;
}

.plain-list{
  margin:24px 0 0;
  padding-left:20px;
  color:hsl(24 9% 10% / 0.75);
}

.site-footer{
  margin-top:48px;
  border-top:1px solid hsl(60 9% 97% / 0.2);
  background:var(--foreground);
  color:var(--background);
}

.site-footer-inner{
  display:grid;
  gap:24px;
  padding:28px 0 34px;
}

.footer-brand{
  font-size:1.8rem;
  font-weight:700;
  color:var(--primary);
}

.footer-copy{
  margin:10px 0 0;
  max-width:680px;
  color:hsl(60 9% 97% / 0.72);
  line-height:1.7;
}

.footer-meta{
  color:hsl(60 9% 97% / 0.6);
  font-size:0.92rem;
}

.center-shell{
  padding:40px 0 80px;
}

.center-card{
  max-width:860px;
}

.thanks-card,
.error-card{
  padding:32px;
}

.thanks-title,
.error-title{
  margin-top:12px;
  font-size:clamp(2.1rem, 3vw, 3.3rem);
  line-height:1.15;
}

.thanks-text,
.error-text{
  margin-top:18px;
}

.error-card{
  max-width:760px;
}

@media (max-width: 960px){
  .content-grid,
  .hero-grid,
  .choices,
  .field-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 720px){
  .topbar-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero{
    padding-top:28px;
    padding-bottom:56px;
  }

  .panel-main,
  .panel-side,
  .thanks-card,
  .error-card{
    padding:24px;
  }

  .section-title{
    font-size:1.7rem;
  }

  .button-row{
    flex-direction:column;
  }

  .button-secondary{
    width:100%;
  }
}