*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
.site {
  --rf-ink: #27211f;
  --rf-muted: #645752;
  --rf-red: #852638;
  --rf-wine: #562230;
  --rf-paper: #fcfaf7;
  --rf-line: #e9dfd8;
  background: var(--rf-paper);
  color: var(--rf-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.6;
}

.site a:focus-visible, .site summary:focus-visible { outline: 3px solid #a95d6b; outline-offset: 4px; }
.site section[id] { scroll-margin-top: 85px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 3; padding: 12px; background: white; }
.skip:focus { top: 12px; }
.header { background: var(--rf-paper); border-bottom: 1px solid var(--rf-line); }
.nav, .heroGrid, .section, .footer { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.nav { display: flex; min-height: 75px; justify-content: space-between; align-items: center; gap: 26px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--rf-ink); }
.wordmark > span { width: 37px; height: 37px; display: grid; place-items: center; background: var(--rf-red); color: white; border-radius: 9px; }
.wordmark strong { font-size: 24px; letter-spacing: -1.2px; line-height: 1; }
.wordmark strong span { color: var(--rf-red); }
.navLinks { display: flex; gap: clamp(15px, 2.5vw, 34px); font-weight: 600; }
.navLinks a, .footer a { color: var(--rf-muted); }
.navLinks a:hover, .footer a:hover, .textLink:hover { color: var(--rf-red); }
.login { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: 1px solid var(--rf-line); border-radius: 7px; color: var(--rf-wine); font-weight: 700; }
.login:hover { background: #f6eee9; }

.hero { background: radial-gradient(ellipse at 88% 45%, #ead8d4, transparent 56%), #f6eee7; overflow: hidden; }
.heroGrid { display: grid; grid-template-columns: 1fr minmax(0, .94fr); align-items: center; gap: clamp(28px, 6vw, 86px); padding-block: clamp(68px, 9vw, 126px); }
.kicker { display: flex; gap: 9px; align-items: center; margin: 0 0 16px; font-size: 11px; letter-spacing: .16em; font-weight: 800; color: var(--rf-red); }
.kicker span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.site h1, .site h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; letter-spacing: -.047em; font-weight: 400; text-wrap: balance; }
.site h1 { font-size: clamp(45px, 6.15vw, 82px); line-height: .99; }
.site h1 em { color: var(--rf-red); font-weight: 400; }
.intro { max-width: 460px; margin: 25px 0 28px; font-size: clamp(16px, 1.6vw, 19px); color: var(--rf-muted); }
.heroActions { display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
.primary, .textLink { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; font-weight: 750; }
.primary { padding: 11px 18px; border-radius: 8px; background: var(--rf-red); color: white; }
.primary:hover { background: var(--rf-wine); color: white; }
.textLink { color: var(--rf-wine); }
.heroNote { display: flex; gap: 7px; align-items: center; margin: 19px 0 0; color: var(--rf-muted); font-size: 13px; }
.heroNote svg { color: #47604c; }

.exampleFrame { min-width: 0; overflow: hidden; border: 1px solid #e1d3cb; border-radius: 17px; background: #fffdfb; box-shadow: 0 24px 60px #59202b24; transform: rotate(-2deg); }
.exampleTop, .exampleBottom { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 16px; color: var(--rf-muted); }
.exampleTop { border-bottom: 1px solid var(--rf-line); font-size: 12px; }
.exampleTop > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.exampleTop > span:last-child { font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.exampleBody { display: grid; grid-template-columns: 51px minmax(0, 1fr); }
.exampleSide { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 19px 7px; color: #e9cbd1; background: var(--rf-wine); }
.exampleSide > span { display: grid; width: 27px; height: 27px; place-items: center; }
.exampleSide .exampleActive { background: #794454; color: white; border-radius: 6px; }
.exampleMain { padding: clamp(12px, 3vw, 27px); }
.exampleHeading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.exampleHeading small { display: block; color: var(--rf-muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.exampleHeading strong { display: block; font-size: clamp(16px, 2.1vw, 26px); line-height: 1.2; letter-spacing: -.04em; }
.exampleHeading > span { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #f3e4e5; color: var(--rf-red); font-size: 10px; font-weight: 800; }
.exampleMetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-block: 15px; }
.exampleMetrics > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 10px; background: #f6f0eb; border-radius: 8px; }
.exampleMetrics strong { font-size: 19px; line-height: 1.2; }
.exampleMetrics svg, .exampleList svg { color: var(--rf-red); }
.exampleMetrics span { grid-column: 1 / -1; font-size: 11px; color: var(--rf-muted); }
.exampleList { border: 1px solid var(--rf-line); border-radius: 8px; padding: 8px 10px; }
.exampleList > strong { font-size: 12px; }
.exampleList > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding-block: 7px; border-top: 1px solid #f2ebe6; }
.exampleList > div > span { width: 24px; height: 24px; display: grid; place-items: center; }
.exampleList b, .exampleList small { display: block; font-size: 10px; line-height: 1.35; }
.exampleList small { color: var(--rf-muted); }
.exampleList time { white-space: nowrap; font-size: 8px; font-weight: 750; color: var(--rf-red); }
.exampleBottom { justify-content: flex-start; border-top: 1px solid var(--rf-line); font-size: 11px; }

.section { padding-block: clamp(60px, 8vw, 105px); }
.sectionHeading { max-width: 580px; margin-bottom: 32px; }
.site h2 { font-size: clamp(37px, 5vw, 60px); line-height: 1.06; }
.sectionHeading > p:last-child:not(.kicker) { margin: 15px 0 0; color: var(--rf-muted); font-size: 16px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.steps li { padding-top: 17px; border-top: 1px solid var(--rf-line); }
.steps li > span { color: var(--rf-red); font-size: 13px; letter-spacing: .12em; font-weight: 800; }
.site h3 { margin: 11px 0 7px; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.steps p, .resourceGrid p, .security li p { margin: 0; color: var(--rf-muted); font-size: 15px; }
.resources { background: #f3ece5; }
.resourceGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.resourceGrid article { border: 1px solid var(--rf-line); padding: 22px; background: var(--rf-paper); border-radius: 12px; }
.resourceGrid article > span { display: grid; place-items: center; width: 42px; height: 42px; background: #f2e4e3; color: var(--rf-red); border-radius: 9px; }
.security, .faq { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(25px, 6vw, 80px); }
.security .sectionHeading, .faq .sectionHeading { margin-bottom: 0; }
.security ul { margin: 0; padding: 0; list-style: none; }
.security li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rf-line); }
.security li:first-child { padding-top: 0; }
.security li svg { flex-shrink: 0; margin-top: 4px; color: var(--rf-red); }
.security li strong { font-size: 16px; }
.plans { background: #f7f1ec; border-top: 1px solid var(--rf-line); }
.planGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.planGrid article { display: flex; flex-direction: column; padding: clamp(18px, 2.5vw, 30px); border: 1px solid var(--rf-line); border-radius: 12px; background: var(--rf-paper); }
.planGrid h3 { margin: 0; color: var(--rf-wine); font-size: 27px; }
.planGrid p { flex: 1; margin: 9px 0 20px; color: var(--rf-muted); }
.planGrid dl { margin: 0 0 21px; }
.planGrid dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--rf-line); }
.planGrid dt { color: var(--rf-muted); }
.planGrid dd { margin: 0; white-space: nowrap; font-weight: 750; }
.planLink { display: inline-flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--rf-line); border-radius: 7px; color: var(--rf-wine); font-weight: 750; }
.planLink:hover { background: #f6eee9; }
.faq details { border-bottom: 1px solid #dfd2c9; }
.faq summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; list-style: none; cursor: pointer; padding: 16px 0; font-size: 16px; font-weight: 750; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--rf-red); flex-shrink: 0; }
.faq details[open] svg { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--rf-muted); }
.access { background: var(--rf-wine); color: #fff7f0; padding: clamp(62px, 8vw, 100px) 24px; text-align: center; }
.access > div { max-width: 690px; margin: auto; }
.access .kicker { justify-content: center; color: #f2c5cc; }
.access p:not(.kicker) { margin: 16px auto 25px; font-size: 16px; max-width: 430px; }
.access .primary { color: var(--rf-wine); background: #fff5ec; }
.access .primary:hover { background: #f0dbd6; }
.address { display: block; width: fit-content; margin: 12px auto 0; color: #fff7f0; text-decoration: underline; overflow-wrap: anywhere; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 24px; color: var(--rf-muted); }
.footer > a:last-child { display: inline-flex; align-items: center; gap: 4px; }
.footer p { margin: 0; }

@media (max-width: 900px) {
  .resourceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroGrid { gap: 28px; }
}
@media (max-width: 680px) {
  .nav, .heroGrid, .section, .footer { width: calc(100% - 40px); }
  .nav { min-height: 66px; gap: 12px; }
  .navLinks { display: none; }
  .heroGrid, .security, .faq { grid-template-columns: 1fr; }
  .heroGrid { padding-block: 52px; gap: 32px; }
  .exampleFrame { transform: none; }
  .steps, .planGrid { grid-template-columns: 1fr; gap: 18px; }
  .resourceGrid article { padding: 15px; }
  .footer { flex-wrap: wrap; }
  .footer p { order: 3; width: 100%; }
}
@media (max-width: 370px) {
  .resourceGrid { grid-template-columns: 1fr; }
  .exampleBody { grid-template-columns: 37px minmax(0, 1fr); }
}