@font-face {
  font-family:Caudex;
  src:url('assets/fonts/Caudex-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:Caudex;
  src:url('assets/fonts/Caudex-Bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --gold:#e2bd72;
  --gold-light:#f3dca6;
  --muted:#c3b8a6;
  --ink:#392717;
  --paper:#e8cf98;
  --line:#ad884745;
  font-family:system-ui,sans-serif;
  color:#f1e8d9;
  background:#1b1814;
  line-height:1.7;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body {
  margin:0;
  background:radial-gradient(ellipse at 80% 5%,#4f3d243d,transparent 33%),repeating-linear-gradient(125deg,#ffffff02 0 1px,transparent 1px 5px),#1b1814;
}

a {
  color:var(--gold);
  text-underline-offset:4px;
}

a:hover {
  color:var(--gold-light);
}

a:focus-visible,summary:focus-visible {
  outline:3px solid #71d7ee;
  outline-offset:5px;
}

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

figure {
  margin:0;
}

h1,h2,h3,.brand,.button,summary {
  font-family:Caudex,Georgia,serif;
}

h1,h2,h3 {
  line-height:1.17;
  font-weight:400;
}

h1 {
  font-size:clamp(2.75rem,4.2vw,4.5rem);
  letter-spacing:-.035em;
  margin:22px 0 26px;
}

h1 em {
  color:var(--gold);
  font-style:normal;
}

h2 {
  font-size:clamp(2.15rem,3.5vw,3.15rem);
  letter-spacing:-.025em;
  margin:12px 0 20px;
}

h3 {
  font-size:1.4rem;
}

p {
  margin:0 0 20px;
}

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

.eyebrow {
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--gold);
  font-weight:700;
}

.eyebrow span {
  padding-right:7px;
}

.lead {
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.85;
}

.site-header {
  border-block:1px solid var(--line);
  background:#171410ee;
}

.header-inner {
  width:min(1160px,calc(100% - 64px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:88px;
}

.brand {
  display:block;
  width:190px;
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:.82rem;
}

.site-header nav a {
  text-decoration:none;
  color:#dfd1b8;
}

.site-header nav a:hover {
  color:var(--gold-light);
}

.nav-download {
  border:1px solid #9d7c43;
  padding:8px 19px;
  background:#8a1f1729;
}

.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:75px;
  align-items:center;
  padding-block:64px 75px;
}

.hero-copy .lead {
  max-width:490px;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:15px 25px;
  min-height:54px;
  background:linear-gradient(#a42e23,#661810);
  box-shadow:inset 0 0 0 2px #39120a,inset 0 0 0 3px #dba04f66,0 5px 20px #0004;
  border:1px solid #d6a963;
  color:#ffe4a2;
  font-size:1.03rem;
  font-weight:700;
  text-decoration:none;
  text-shadow:0 1px 2px #000;
  border-radius:3px;
}

.download-icon {
  width:20px;
  height:20px;
  flex-shrink:0;
}

.button:hover {
  background:linear-gradient(#ba382a,#801e15);
  color:#fff0c9;
}

.hero-copy .button {
  margin-top:15px;
}

.hero-note {
  font-size:.75rem;
  color:var(--muted);
  margin-top:13px;
}

.hero-perks {
  list-style:none;
  padding:20px 0 0;
  border-top:1px solid var(--line);
  margin:27px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  font-size:.71rem;
  color:#c6b591;
}

.hero-perks li:before {
  content:'◆';
  font-size:.45rem;
  margin-right:8px;
  color:#b68c45;
  vertical-align:middle;
}

.hero-preview {
  position:relative;
  padding:10px;
  border:1px solid #a88b51;
  background:#171511;
  box-shadow:0 0 0 4px #393023,0 18px 70px #0008;
  transform:rotate(1deg);
}




.screenshot-link {
  display:block;
}

.screenshot-link:hover {
  outline:1px solid var(--gold);
}

figcaption {
  font-size:.65rem;
  text-align:center;
  color:#b3a589;
  margin:9px 0 0;
}

.section-rule {
  display:flex;
  align-items:center;
  gap:20px;
  color:var(--gold);
  padding-bottom:30px;
}

.section-rule:before,.section-rule:after {
  content:'';
  height:1px;
  background:linear-gradient(90deg,transparent,#b28d4d);
  flex:1;
}

.section-rule:after {
  transform:rotate(180deg);
}

.section-rule span {
  font-size:10px;
}

.parchment-section {
  color:var(--ink);
  background:radial-gradient(ellipse at center,#f3dfb0,transparent 85%),repeating-linear-gradient(25deg,#80582906 0 1px,transparent 1px 4px),#ddc18b;
  border-block:3px double #a68143;
  box-shadow:inset 0 0 45px #82511e45;
  padding:68px 0;
}

.parchment-section .eyebrow {
  color:#785022;
}

.section-heading {
  text-align:center;
  max-width:760px;
  margin:0 auto 45px;
}

.section-heading>p:last-child {
  color:var(--muted);
  font-size:.92rem;
}

.parchment-section .section-heading>p:last-child {
  color:#62492f;
}

.steps-flow {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px;
}

.steps-flow article {
  position:relative;
}

.step-number {
  font:1.1rem Caudex,Georgia,serif;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid #977245;
  outline:1px solid #a07c4640;
  outline-offset:3px;
  background:#b78c4215;
  color:#734b21;
  margin-bottom:25px;
}

.steps-flow h3 {
  font-weight:700;
  font-size:1.25rem;
}

.steps-flow p {
  font-size:.9rem;
  color:#61472d;
}

.square-note {
  border-top:1px solid #815b3440;
  padding-top:22px;
  margin:25px 0 0;
  font-size:.85rem;
  color:#674c2e;
}

code {
  font-size:.88em;
  overflow-wrap:anywhere;
  padding:2px 5px;
  background:#94774525;
  border:1px solid #9b7d4230;
  border-radius:3px;
}

.voices-section {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:90px;
  align-items:center;
  padding-block:100px;
}

.voice-preview {
  padding:8px;
  background:#181410;
  border:1px solid #a88b51;
  box-shadow:0 0 0 4px #393023,0 18px 55px #0006;
  transform:rotate(-1deg);
}

.feature-list {
  list-style:none;
  padding:0;
  margin-top:30px;
}

.feature-list li {
  padding-left:24px;
  position:relative;
  margin-top:25px;
}

.feature-list li:before {
  content:'◆';
  color:#be974f;
  font-size:8px;
  position:absolute;
  left:0;
  top:6px;
}

.feature-list h3 {
  font-size:1.18rem;
  color:#ead2a3;
  margin:0 0 7px;
}

.feature-list p {
  font-size:.86rem;
  color:var(--muted);
  margin-bottom:0;
}

.download-section {
  background:radial-gradient(ellipse at 50% 0,#4c3523aa,transparent 80%),#16130f;
  padding:72px 0;
  border-block:1px solid var(--line);
}

.download-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:940px;
  margin:auto;
}

.download-card {
  padding:30px;
  background:linear-gradient(145deg,#332b20,#241f18);
  border:1px solid #8f734553;
  box-shadow:inset 0 0 0 4px #1b171280;
}

.download-card.recommended {
  border-color:#d7af63;
  box-shadow:inset 0 0 0 4px #1b171280,0 0 30px #c49a4210;
}

.card-heading {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.card-heading h3 {
  font-size:1.9rem;
  margin:0;
  color:#f0d29a;
}

.recommendation {
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#e4c381;
  border:1px solid #9c7b433d;
  padding:3px 7px;
}

.recommendation[hidden] {
  display:none;
}

.system-requirement {
  font-size:.77rem;
  color:#bdb09a;
  margin:14px 0 24px;
}

.download-card .button {
  width:100%;
  font-size:.95rem;
  padding-inline:10px;
}

.download-card>p:not(.system-requirement) {
  font-size:.83rem;
  color:var(--muted);
  margin:22px 0 12px;
}

.small-link,.small-note {
  font-size:.76rem;
}

.small-note {
  color:#b5a68d;
}

.download-footer {
  text-align:center;
  font-size:.8rem;
  margin:30px 0 0;
}

.setup-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:100px;
}

.setup-grid>div>p:not(.eyebrow) {
  font-size:.95rem;
  color:#62472c;
  max-width:350px;
}

.text-link,.parchment-section a {
  color:#762c1e;
  font-size:.9rem;
}

.parchment-section a:hover {
  color:#461509;
}

.setup-steps {
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:setup;
}

.setup-steps li {
  counter-increment:setup;
  position:relative;
  padding-left:55px;
  margin-bottom:30px;
}

.setup-steps li:last-child {
  margin-bottom:0;
}

.setup-steps li:before {
  content:counter(setup);
  position:absolute;
  left:0;
  top:0;
  font:1.5rem Caudex;
  color:#886331;
  width:32px;
  border-bottom:1px solid #927040;
  text-align:center;
}

.setup-steps h3 {
  font-size:1.3rem;
  margin:0 0 12px;
  font-weight:700;
}

.setup-steps p {
  font-size:.86rem;
  color:#5c432a;
  margin-bottom:10px;
}

.faq-section {
  padding-block:80px;
}

.faq-list {
  max-width:820px;
  margin:auto;
}

details {
  border-bottom:1px solid var(--line);
}

summary {
  cursor:pointer;
  padding:22px 24px 22px 0;
  font-size:1.15rem;
  color:#e8d3ab;
}

details p {
  color:var(--muted);
  font-size:.9rem;
  max-width:740px;
  padding-bottom:10px;
}

.site-footer {
  padding:40px 0;
  background:#14110e;
  border-top:1px solid var(--line);
  text-align:center;
}

.site-footer img {
  margin:auto;
}

.site-footer p {
  color:#a99677;
  font:1rem Caudex;
  margin:17px 0;
}

.site-footer nav {
  display:flex;
  justify-content:center;
  gap:28px;
  font-size:.75rem;
}

.skip-link {
  position:absolute;
  left:10px;
  top:-100px;
  padding:10px;
  background:#171410;
  z-index:5;
}

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

@media(min-width:1500px) {
  .hero {
    padding-block:85px;
  }
  .hero-preview {
    max-width:445px;
  }
}

@media(max-width:950px) {
  .hero {
    gap:35px;
  }
  .hero-preview {
    transform:none;
  }
  .voices-section {
    gap:40px;
  }
  .setup-grid {
    gap:40px;
  }
  .header-inner,.wrap {
    width:calc(100% - 44px);
  }
  .hero-perks {
    display:block;
  }
  .hero-perks li {
    margin:8px 0;
  }
  .steps-flow {
    gap:25px;
  }
}

@media(max-width:700px) {
  html {
    scroll-padding-top:25px;
  }
  .header-inner {
    flex-direction:column;
    gap:12px;
    padding:16px 0;
  }
  .brand {
    width:165px;
  }
  .site-header nav {
    gap:20px;
    font-size:.73rem;
    flex-wrap:wrap;
    justify-content:center;
  }
  .nav-download {
    padding:5px 12px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .hero {
    grid-template-columns:1fr;
    gap:40px;
    padding:40px 0;
  }
  .hero-copy {
    text-align:center;
  }
  .hero-copy .lead {
    margin-inline:auto;
  }
  .hero-copy h1 {
    font-size:2.8rem;
  }
  .hero-perks {
    display:flex;
    justify-content:center;
    gap:3px 15px;
  }
  .hero-preview {
    max-width:430px;
    margin:auto;
    width:100%;
  }
  .hero-note {
    font-size:.7rem;
  }
  .section-rule {
    padding-top:15px;
  }
  .parchment-section {
    padding-block:48px;
  }
  .steps-flow {
    grid-template-columns:1fr;
    gap:16px;
  }
  .steps-flow article {
    padding-left:58px;
  }
  .step-number {
    position:absolute;
    left:0;
    top:4px;
    width:34px;
    height:34px;
  }
  .steps-flow h3 {
    margin-top:0;
  }
  .section-heading {
    margin-bottom:32px;
  }
  .voices-section {
    display:flex;
    flex-direction:column-reverse;
    padding-block:55px;
    gap:38px;
  }
  .voice-preview {
    transform:none;
    max-width:430px;
  }
  .voices-copy h2 br {
    display:none;
  }
  .download-section {
    padding-block:50px;
  }
  .download-grid {
    grid-template-columns:1fr;
  }
  .download-card {
    padding:25px;
  }
  .setup-grid {
    grid-template-columns:1fr;
    gap:32px;
  }
  .setup-grid>div>p:not(.eyebrow) {
    max-width:none;
  }
  .setup-grid h2 br {
    display:none;
  }
  .faq-section {
    padding-block:50px;
  }
  .site-footer nav {
    gap:20px;
  }
  summary {
    font-size:1.05rem;
  }
  .button {
    font-size:.98rem;
  }
  .card-heading h3 {
    font-size:1.7rem;
  }
}

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