:root {
  --paper:#f7f5ee;
  --surface:#fffefa;
  --ink:#20231f;
  --muted:#555b54;
  --yellow:#f3e891;
  --teal:#235d63;
  --line:#c9cbc1;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:32px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

a {
  color:var(--teal);
  text-underline-offset:5px;
}

a:hover {
  text-decoration-thickness:2px;
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:6px;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  line-height:1.08;
  letter-spacing:-.045em;
}

h1 {
  font-size:clamp(3rem,6.4vw,5.5rem);
  font-weight:650;
}

h2 {
  font-size:clamp(2.4rem,4.2vw,3.6rem);
  font-weight:600;
}

h3 {
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-.03em;
}

p {
  max-width:60ch;
}

.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto;
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:112px;
  border-bottom:1px solid var(--ink);
  gap:24px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.3rem;
  font-weight:650;
  letter-spacing:-.045em;
  text-decoration:none;
  color:var(--ink);
}

.brand img {
  border-radius:6px;
}

.brand-dot {
  margin-left:-9px;
}

.site-header nav {
  display:flex;
  gap:36px;
}

.site-header nav a {
  display:inline-flex;
  align-items:center;
  min-height:56px;
  text-decoration:none;
  color:var(--ink);
  font-size:.9rem;
  gap:8px;
}

.site-header nav a:hover {
  text-decoration:underline;
}

.hero {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:72px;
  align-items:center;
  padding-block:72px 80px;
}

.eyebrow {
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.035em;
  margin-bottom:24px;
  color:var(--teal);
}

.eyebrow span {
  margin-right:8px;
}

.muted {
  color:var(--muted);
}

.hero-description {
  font-size:1.3rem;
  line-height:1.5;
  margin-top:32px;
  letter-spacing:-.02em;
}

.intro {
  font-size:1rem;
  color:var(--muted);
  max-width:440px;
  margin-top:18px;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:32px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:58px;
  padding:14px 22px;
  border:2px solid var(--ink);
  border-radius:6px;
  color:var(--ink);
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
}

.primary {
  background:var(--yellow);
  box-shadow:3px 3px 0 var(--ink);
}

.button:hover {
  transform:translateY(-2px);
}

.text-link {
  display:inline-flex;
  align-items:center;
  min-height:56px;
  font-size:.85rem;
  gap:12px;
}

.fine-print {
  font-size:.75rem;
  color:var(--muted);
  margin-top:24px;
}

.hero-visual {
  background:#e9e9df;
  border:1px solid var(--line);
  border-radius:6px;
  padding:24px 36px 20px;
}

.visual-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.72rem;
  margin-bottom:24px;
  color:var(--muted);
}

.phone {
  max-width:288px;
  margin:auto;
  border:2px solid var(--ink);
  border-radius:28px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:10px 12px 0 #d4d6ca;
}

.phone img {
  width:100%;
}

.hero-visual figcaption {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  margin-top:28px;
  color:var(--muted);
}

.small-dot {
  width:7px;
  height:7px;
  background:var(--teal);
  border-radius:50%;
}

.principles {
  border-block:1px solid var(--ink);
}

.principle-inner {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-block:24px;
  font-size:.85rem;
  font-weight:500;
}

.principle-inner span::before {
  content:"+";
  color:var(--teal);
  margin-right:12px;
}

.features {
  padding-block:96px;
}

.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:24px;
}

.section-heading .eyebrow {
  grid-column:1/-1;
  margin-bottom:0;
}

.section-heading>p:last-child {
  color:var(--muted);
  justify-self:end;
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:56px;
}

.feature-grid article {
  border-top:2px solid var(--ink);
  padding-top:20px;
}

.feature-number {
  font-size:.8rem;
  color:var(--teal);
  font-variant-numeric:tabular-nums;
}

.feature-grid h3 {
  margin-block:24px 16px;
}

.feature-grid p {
  font-size:.95rem;
  color:var(--muted);
}

.plan-section {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:96px;
  border-block:1px solid var(--ink);
  padding-block:64px;
}

.plan-visual {
  padding:32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
}

.plan-visual img {
  width:242px;
  max-height:480px;
  object-fit:cover;
  object-position:top;
  margin:auto;
  border:1px solid var(--ink);
  border-radius:12px;
}

.plan-visual figcaption {
  text-align:center;
  margin-top:20px;
  font-size:.75rem;
  color:var(--muted);
}

.plan-copy>p:not(.eyebrow) {
  margin-top:24px;
  color:var(--muted);
}

.check-list {
  list-style:none;
  padding:0;
  margin:24px 0;
}

.check-list li {
  padding-block:12px;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
}

.check-list li::before {
  content:"✓";
  margin-right:12px;
  color:var(--teal);
}

.plan-copy .plan-note {
  font-size:.8rem;
  max-width:42ch;
}

.comfort {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:96px;
  padding-block:80px;
}

.comfort .secondary {
  font-size:.9rem;
  color:var(--muted);
  margin-top:16px;
}

.closing {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:48px;
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:6px;
  margin-bottom:80px;
}

.closing .eyebrow {
  margin-bottom:16px;
}

.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:32px;
  border-top:1px solid var(--ink);
  font-size:.8rem;
}

.site-footer p {
  color:var(--muted);
}

.site-footer .brand {
  font-size:1.1rem;
}

.skip-link {
  position:absolute;
  left:24px;
  top:-100px;
  background:var(--surface);
  z-index:10;
  padding:16px;
}

.skip-link:focus {
  top:16px;
}

.support-hero {
  padding-block:72px 56px;
  max-width:800px;
}

.support-hero>p:last-child {
  margin-top:24px;
  color:var(--muted);
  font-size:1.15rem;
}

.support-layout {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:72px;
  padding-bottom:80px;
  align-items:start;
}

.support-layout h2 {
  font-size:2rem;
  margin-bottom:24px;
}

.faq details {
  border-top:1px solid var(--line);
  padding-block:8px;
}

.faq details:last-child {
  border-bottom:1px solid var(--line);
}

summary {
  padding:16px 0;
  cursor:pointer;
  font-weight:600;
  line-height:1.5;
}

details p {
  padding-bottom:20px;
  color:var(--muted);
  font-size:.95rem;
}

.contact-panel {
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:32px;
}

.contact-panel p {
  margin-bottom:24px;
  color:var(--muted);
  font-size:.95rem;
}

.contact-panel .button {
  width:100%;
}

.contact-panel .fine-print {
  margin-block:20px 0;
  font-size:.75rem;
}

.contact-panel ul {
  padding-left:20px;
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:28px;
}

.back-link {
  display:inline-flex;
  align-items:center;
  min-height:56px;
  margin-top:24px;
  font-size:.9rem;
}

@media(min-width:1500px) {
  .hero {
    padding-block:88px;
  }

  .hero-visual {
    padding-block:28px;
  }

  .phone {
    max-width:310px;
  }

}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px);
  }

  .hero {
    gap:36px;
  }

  .hero-visual {
    padding-inline:24px;
  }

  .hero-actions {
    gap:8px 24px;
  }

  .plan-section,.comfort {
    gap:48px;
  }

  .feature-grid {
    gap:24px;
  }

  .support-layout {
    gap:36px;
  }

  .contact-panel {
    padding:24px;
  }

}

@media(max-width:720px) {
  .wrap {
    width:calc(100% - 40px);
  }

  .site-header {
    min-height:88px;
    gap:12px;
  }

  .brand {
    font-size:1.1rem;
    gap:8px;
  }

  .brand img {
    width:32px;
    height:32px;
  }

  .site-header nav {
    gap:20px;
  }

  .site-header nav a {
    font-size:.8rem;
  }

  .hero {
    grid-template-columns:1fr;
    padding-block:48px;
    gap:40px;
  }

  h1 {
    font-size:clamp(2.7rem,10.5vw,4.4rem);
  }

  .hero-description {
    font-size:1.15rem;
    margin-top:24px;
  }

  .hero-visual {
    max-width:420px;
    width:100%;
    justify-self:center;
  }

  .phone {
    max-width:254px;
  }

  .principle-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    font-size:.75rem;
  }

  .principle-inner span::before {
    margin-right:8px;
  }

  .features {
    padding-block:56px;
  }

  .section-heading {
    grid-template-columns:1fr;
  }

  .section-heading .eyebrow {
    grid-column:auto;
  }

  .section-heading>p:last-child {
    justify-self:start;
  }

  .feature-grid {
    grid-template-columns:1fr;
    margin-top:32px;
    gap:32px;
  }

  .feature-grid h3 {
    margin-top:16px;
  }

  .plan-section {
    grid-template-columns:1fr;
    padding-block:40px;
    gap:32px;
  }

  .plan-copy {
    grid-row:1;
  }

  .plan-visual {
    max-width:420px;
    width:100%;
    justify-self:center;
  }

  .comfort {
    grid-template-columns:1fr;
    gap:24px;
    padding-block:56px;
  }

  .closing {
    padding:28px;
    align-items:start;
    flex-direction:column;
    margin-bottom:48px;
  }

  .site-footer {
    flex-wrap:wrap;
    gap:16px;
  }

  .site-footer p {
    display:none;
  }

  .support-hero {
    padding-block:48px 40px;
  }

  .support-layout {
    grid-template-columns:1fr;
    padding-bottom:48px;
  }

  .support-hero h1 {
    font-size:3rem;
  }

  .contact-panel {
    padding:28px;
  }

}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }

  .button:hover {
    transform:none;
  }

}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}