.home {
  --home-panel: #df7b59;
  --home-panel-deep: #c6603f;
  --home-ink: #261d18;
  --home-white: #fffdf8;
  background:
    radial-gradient(70% 32% at 50% 0%, rgba(217, 119, 87, 0.13), transparent 70%),
    var(--paper);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-180%);
  padding: 9px 13px;
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-nav { padding-bottom: 18px; }

.tool-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(50px, 7vw, 76px) clamp(22px, 6vw, 68px) 0;
  overflow: hidden;
  border: 1px solid rgba(104, 48, 29, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(55% 90% at 100% 0%, rgba(255, 245, 224, 0.28), transparent 62%),
    linear-gradient(150deg, #e89a7d 0%, var(--home-panel) 54%, #d36b49 100%);
  color: var(--home-ink);
  box-shadow: 0 22px 55px rgba(104, 48, 29, 0.16);
  text-align: center;
}

.tool-hero .eyebrow {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.tool-hero h1 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(43px, 6.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.tool-hero h1 em { color: #fff8ee; }

.hero-copy {
  max-width: 650px;
  margin: 22px auto 29px;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.5;
}

.transcript-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 650px;
  margin: 0 auto;
  padding: 7px;
  border: 1px solid rgba(58, 30, 20, 0.2);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 10px 30px rgba(75, 34, 20, 0.22);
}
.transcript-form input {
  min-width: 0;
  border: 0;
  border-radius: 9px;
  padding: 13px 15px;
  background: transparent;
  color: var(--ink);
  font: 16px/1.2 var(--serif);
}
.transcript-form input::placeholder { color: #777064; opacity: 1; }
.transcript-form input:focus-visible {
  outline: 2px solid var(--home-panel-deep);
  outline-offset: -1px;
}
.transcript-form button {
  border: 0;
  border-radius: 9px;
  padding: 13px 21px;
  background: var(--home-ink);
  color: #fff;
  font: 600 16px/1.2 var(--serif);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s;
}
.transcript-form button:hover { background: #110d0b; transform: translateY(-1px); }
.transcript-form button:active { transform: translateY(1px); }
.transcript-form button:focus-visible { outline-color: #fff; }

.form-note {
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(38, 29, 24, 0.8);
}

.hero-or {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: 470px;
  margin: 20px auto 13px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.hero-or::before, .hero-or::after { content: ""; height: 1px; background: rgba(60, 31, 20, 0.25); }

.install-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  max-width: 530px;
  margin: 0 auto 34px;
  padding: 13px 15px;
  border: 1px solid rgba(58, 30, 20, 0.17);
  border-radius: 13px;
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 7px 24px rgba(79, 36, 22, 0.14);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
}
.install-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(79, 36, 22, 0.19); }
.install-card:active { transform: translateY(0); }
.install-card img { border-radius: 11px; }
.install-card strong { display: block; font-size: 17px; line-height: 1.2; }
.install-card small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.install-arrow { padding: 0 5px; color: var(--clay-deep); font-size: 24px; transition: transform 0.18s; }
.install-card:hover .install-arrow { transform: translateX(3px); }

.quick-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 calc(clamp(22px, 6vw, 68px) * -1);
  border-top: 1px solid rgba(66, 32, 20, 0.22);
  background: rgba(101, 43, 25, 0.12);
}
.quick-points span {
  padding: 17px 14px 18px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.quick-points span + span { border-left: 1px solid rgba(66, 32, 20, 0.18); }

.home main > .home-section {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(58px, 7vw, 82px) 0;
}

.home main > .home-section + .home-section,
.home main > .home-section + .mid-cta,
.home main > .mid-cta + .home-section,
.home main > .home-section + .final-cta {
  border-top: 1px solid var(--line);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 14px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.section-tag.tag-clay { border-color: rgba(181, 83, 47, 0.22); background: rgba(217, 119, 87, 0.12); color: var(--clay-deep); }
.section-tag.tag-moss { border-color: rgba(95, 122, 78, 0.24); background: rgba(95, 122, 78, 0.11); color: #4e693e; }
.section-tag.tag-ink { border-color: rgba(34, 32, 27, 0.18); background: rgba(34, 32, 27, 0.08); color: var(--ink); }
.section-tag.tag-paper { border-color: rgba(91, 69, 50, 0.18); background: rgba(255, 253, 248, 0.65); color: var(--ink-soft); }

.home-section h2,
.mid-cta h2,
.final-cta h2 {
  font-size: clamp(30px, 4.2vw, 45px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.section-intro > p:not(.section-tag),
.feature-copy > p,
.reading-intro > p:not(.section-tag),
.prompt-heading > p:not(.section-tag),
.mid-cta p,
.final-cta > p:not(.section-tag) {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.62;
}

.process-section {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(40px, 7vw, 80px);
  align-items: start;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--clay);
}
.text-link span { color: var(--clay-deep); transition: transform 0.18s; }
.text-link:hover span { transform: translateX(3px); }

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.process-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 2px 22px;
  border-top: 1px solid var(--line);
}
.step-no {
  padding-top: 4px;
  color: var(--clay-deep);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.process-list h3 { margin-bottom: 4px; font-size: 20px; line-height: 1.25; }
.process-list p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }

.home main > .feature-showcase,
.home main > .preview-section {
  max-width: 1000px;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(38px, 6vw, 72px);
  align-items: center;
}
.home main > .preview-section { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }

.feature-copy h2 { max-width: 12em; }
.feature-copy > p + p { margin-top: 18px; }

.check-list {
  margin: 27px 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.check-list li {
  position: relative;
  padding: 10px 4px 10px 27px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 3px rgba(95, 122, 78, 0.12);
}

.product-shot { margin: 0; }
.product-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(49, 38, 22, 0.16);
}
.product-shot figcaption {
  max-width: 42em;
  margin: 13px 4px 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.quiet-note {
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-deep);
  font-size: 14.5px !important;
}
.quiet-note b { color: var(--ink); }

.reading-intro { max-width: 760px; }
.reading-intro h2 { max-width: 17em; }

.use-case-list {
  max-width: 760px;
  margin-top: 38px;
  border-bottom: 1px solid var(--line);
}
.use-case-list article {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 28px;
  max-width: none;
  margin: 0;
  padding: 22px 3px 24px;
  border-top: 1px solid var(--line);
}
.use-case-list h3 {
  width: fit-content;
  height: fit-content;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(217, 119, 87, 0.12);
  color: var(--clay-deep);
  font-size: 15.5px;
  line-height: 1.35;
}
.use-case-list article:nth-child(2) h3 { background: rgba(95, 122, 78, 0.11); color: #4e693e; }
.use-case-list article:nth-child(3) h3 { background: var(--paper-deep); color: var(--ink); }
.use-case-list p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

.home main > .prompt-section {
  max-width: 1000px;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(40px, 7vw, 76px);
  padding-right: clamp(24px, 5vw, 58px);
  padding-left: clamp(24px, 5vw, 58px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(217, 119, 87, 0.1), transparent 65%),
    var(--paper-deep);
}
.prompt-heading h2 { max-width: 7em; }
.prompt-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(99, 80, 56, 0.18);
}
.prompt-list li {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 12px;
  padding: 17px 2px 19px;
  border-top: 1px solid rgba(99, 80, 56, 0.18);
}
.prompt-list span { padding-top: 3px; color: var(--clay-deep); font-family: var(--mono); font-size: 10px; }
.prompt-list q { font-size: 16px; font-style: italic; line-height: 1.55; }

.mid-cta {
  max-width: 900px;
  margin: 0 auto;
  padding: 36px 0 39px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
}
.mid-cta h2 { margin-bottom: 9px; font-size: clamp(27px, 3.5vw, 36px); }
.mid-cta p { max-width: 48em; font-size: 15.5px; }
.mid-cta .section-tag { margin-bottom: 10px; }
.mid-cta .btn { white-space: nowrap; }

.index-section .section-aside { max-width: 21em; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.index-section .guide-index,
.index-section .faq { width: 100%; }

.final-cta {
  max-width: 900px;
  margin: 0 auto clamp(60px, 7vw, 84px);
  padding: clamp(45px, 7vw, 70px) clamp(24px, 7vw, 74px);
  border: 1px solid rgba(104, 48, 29, 0.13);
  border-radius: 22px;
  background:
    radial-gradient(60% 100% at 100% 0%, rgba(255, 245, 224, 0.3), transparent 65%),
    linear-gradient(145deg, #e89a7d, #d66d4c);
  color: var(--home-ink);
  text-align: center;
  box-shadow: 0 18px 46px rgba(104, 48, 29, 0.14);
}
.final-cta img { display: block; margin: 0 auto 16px; border-radius: 14px; box-shadow: 0 5px 16px rgba(83, 39, 24, 0.22); }
.final-cta .section-tag { margin-right: auto; margin-left: auto; border-color: rgba(80, 38, 24, 0.18); background: rgba(255, 253, 248, 0.56); color: var(--home-ink); }
.final-cta h2 { max-width: 14em; margin-right: auto; margin-left: auto; }
.final-cta > p:not(.section-tag) { max-width: 37em; margin: 0 auto 25px; color: rgba(38, 29, 24, 0.82); }
.final-cta .btn { background: var(--home-ink); box-shadow: 0 5px 14px rgba(60, 28, 18, 0.24); }
.final-cta .btn:hover { box-shadow: 0 8px 20px rgba(60, 28, 18, 0.3); }

.home footer { max-width: 900px; margin: 0 auto; }

@media (max-width: 900px) {
  .home-nav .links a:not(.btn) { display: none; }
  .home main > .home-section { max-width: 760px; }
}

@media (max-width: 820px) {
  .process-section,
  .home main > .feature-showcase,
  .home main > .preview-section,
  .home main > .prompt-section {
    grid-template-columns: 1fr;
  }
  .process-section,
  .home main > .feature-showcase,
  .home main > .preview-section { gap: 34px; }
  .preview-section .product-shot { order: 2; }
  .prompt-heading h2 { max-width: none; }
  .mid-cta { grid-template-columns: 1fr; gap: 22px; }
  .mid-cta .btn { width: fit-content; }
}

@media (max-width: 620px) {
  .home .wrap { padding-right: 15px; padding-left: 15px; }
  .tool-hero { border-radius: 18px; }
  .transcript-form { grid-template-columns: 1fr; }
  .transcript-form button { min-height: 48px; }
  .quick-points { grid-template-columns: 1fr; }
  .quick-points span + span { border-left: 0; border-top: 1px solid rgba(66, 32, 20, 0.18); }
  .install-card { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .install-card img { width: 40px; height: 40px; }
  .home main > .home-section { padding-top: 52px; padding-bottom: 56px; }
  .home main > .prompt-section { padding: 38px 20px 42px; border-radius: 15px; }
  .use-case-list article { grid-template-columns: 1fr; gap: 12px; }
  .mid-cta { padding: 31px 0 35px; }
  .mid-cta .btn { width: 100%; justify-content: center; }
  .final-cta { border-radius: 17px; }
  .final-cta .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .transcript-form button, .install-card, .install-arrow, .text-link span { transition: none; }
}