/* Haven's own accents: warm paper, clay details, and a sheltered illustration.
   The existing h. mark, Safiro, forest and sun remain the RNDM family anchors. */
:root {
  --paper: #f7f2e9;
  --board: #e5ebe1;
  --haven-clay: #b96c4d;
  --haven-sand: #eee1ce;
}

.eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 13px;
}

.header {
  border-bottom-color: #d9d4c9;
}

.header .button-small,
.hero-actions .button,
.closing-actions .button {
  border-radius: 8px 8px 8px 2px;
}

.hero .eyebrow {
  gap: 10px;
  margin-bottom: 24px;
}

.hero {
  min-height: 620px;
  padding-block: 48px 46px;
}

.hero h1 {
  font-size: clamp(61px, 6.6vw, 95px);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.hero-you {
  color: var(--forest);
  position: relative;
  white-space: nowrap;
}

.hero-you::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 3px;
  height: 12px;
  border-bottom: 3px solid var(--haven-clay);
  border-radius: 50%;
  transform: rotate(-3deg);
}

.hero-description {
  margin-top: 27px;
  max-width: 355px;
  text-wrap: pretty;
}

.hero-actions {
  gap: 22px;
}

.demo-note {
  margin-top: 12px;
  color: var(--forest);
  font-size: 12px;
  line-height: 1.5;
}

.test-note {
  margin-top: 9px;
  font-size: 12px;
  max-width: 355px;
}

.hero-art {
  isolation: isolate;
}

.hero-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 13% 7% 8% 8%;
  background: var(--haven-sand);
  border-radius: 49% 49% 8% 8%;
  transform: rotate(-3deg);
}

.art-register {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--forest);
  align-items: center;
  padding-inline: 9% 10%;
  margin-bottom: 7px;
}

.art-register>span {
  font-style: italic;
}

.caption-rule {
  background: var(--haven-clay);
  transform: rotate(-5deg);
}

.intro-strip {
  background: var(--haven-sand);
  border-color: #d9cab5;
}

.strip-label {
  text-transform: none;
  font-size: 13px;
  font-weight: 400;
}

.preview-stage {
  border-radius: 80px 12px 12px 12px;
}

.preview-stage::before,
.preview-stage::after {
  display: none;
}

.feature-tab {
  border-left: 3px solid transparent;
  padding-inline: 16px 12px;
  transition: background .2s, color .2s;
}

.feature-tab[aria-selected="true"] {
  background: #f7f2e980;
  border-left-color: var(--forest);
}

.feature-tab[aria-selected="true"] .feature-title {
  text-decoration: none;
}

.feature-tab:hover {
  background: #f7f2e940;
}

.preview-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.weather-symbol { width: 36px; height: 36px; }
.chat-group-icon { width: 30px; height: 30px; }
.app-bottom-nav>span { gap: 5px; }
.app-bottom-nav>span>span { font-size: 10px; }
.app-top-label, .app-date, .sample-stats span { font-size: 11px; }
.preview-caption { font-size: 12px; line-height: 1.6; }
.family-note { font-size: 12px; }

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--haven-sand);
  border-block: 1px solid #d9cab5;
  padding-block: 72px;
}

.closing .eyebrow { color: var(--forest); }
.closing-actions { gap: 14px; }
.closing-actions .button { min-width: 225px; }
.closing-actions>p { color: #485347; font-size: 13px; }
.closing-actions .closing-demo-note { margin: -5px 0 10px; color: var(--forest); font-size: 12px; }
.footer-top>p, .footer-bottom { font-size: 12px; }

.footer-signature {
  display: flex;
  align-items: center;
  color: var(--forest);
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 1150px) {
  .hero h1 { font-size: 76px; }
  .art-register { font-size: 12px; }
  .strip-label { font-size: 11px; }
}

@media (max-width: 1000px) {
  .preview-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .feature-column, .preview-stage { min-width: 0; }
  .feature-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .feature-tab {
    display: flex;
    align-items: center;
    padding: 17px 14px;
    min-height: 75px;
    border: 1px solid #a9bcb0;
    border-radius: 8px 8px 8px 2px;
  }
  .feature-tab:last-of-type { border-bottom: 1px solid #a9bcb0; }
  .feature-tab[aria-selected="true"] {
    border: 1px solid var(--forest);
    box-shadow: inset 0 -3px var(--forest);
    background: var(--paper);
  }
  .feature-title { font-size: 18px; line-height: 1.35; }
  .feature-description, .feature-arrow, .feature-tab-number { display: none; }
  .preview-link { font-size: 14px; margin-top: 18px; }
  .preview-stage { width: 100%; max-width: 650px; margin-inline: auto; padding: 30px 28px 22px; }
  .preview-panel { padding: 26px; }
  .app-page-heading h3 { font-size: 26px; }
}

@media (max-width: 900px) {
  .hero { min-height: 560px; padding-block: 42px; }
  .hero h1 { font-size: 64px; }
  .hero-description { font-size: 15px; }
  .hero-actions { gap: 16px; }
  .test-note { font-size: 12px; }
  .art-register>span:first-child { max-width: none; }
  .art-register { font-size: 11px; }
}

@media (max-width: 700px) {
  .hero { min-height: 0; padding-block: 30px; gap: 24px; }
  .hero .eyebrow { font-size: 12px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(64px, 15.8vw, 91px); }
  .hero-description { font-size: 16px; margin-top: 22px; max-width: 360px; }
  .hero-actions { margin-top: 22px; gap: 20px; }
  .hero-actions .button { gap: 21px; }
  .hero-actions .text-link { font-size: 13px; }
  .demo-note { margin-top: 10px; }
  .test-note { margin-top: 8px; }
  .hero-art::before { inset: 16% 8% 9% 8%; }
  .art-register { padding-inline: 6% 9%; font-size: 12px; margin-bottom: 8px; }
  .eyebrow.section-index { font-size: 12px; }
  .feature-tab { padding: 14px 10px; min-height: 76px; }
  .feature-title { font-size: 15px; }
  .feature-column>.preview-link { font-size: 13px; }
  .preview-stage { border-top-left-radius: 48px; padding: 25px 20px 18px; }
  .preview-panel { padding: 25px 20px 17px; }
  .app-page-heading h3 { font-size: 25px; }
  .app-top-label, .app-date, .sample-stats span { font-size: 10px; }
  .preview-caption { font-size: 11px; }
  .family-note { font-size: 12px; }
  .closing { padding-block: 48px; }
  .closing .eyebrow { font-size: 12px; }
  .closing-actions .text-link { font-size: 13px; }
  .closing-actions>p { font-size: 12px; }
  .footer-top>p, .footer-bottom { font-size: 11px; }
  .footer-signature { grid-column: 1/-1; font-size: 11px; }
}

@media (max-width: 370px) {
  .hero h1 { font-size: 59px; }
  .hero .eyebrow { font-size: 11px; }
  .hero-actions { gap: 17px; }
  .hero-actions .button { font-size: 13px; padding-inline: 16px; gap: 18px; }
  .hero-actions .text-link { font-size: 12px; }
  .feature-tab { padding-inline: 8px; }
  .feature-title { font-size: 12px; }
  .preview-stage { padding-inline: 15px; }
  .preview-panel { padding-inline: 15px; }
  .app-page-heading h3 { font-size: 22px; }
  .closing .eyebrow { font-size: 11px; }
}

@media print {
  .hero-art::before { display: none; }
}