/* The Reference page add-on stylesheet.
   Loaded after /styles.css on /thereference/ only. It holds just what is
   unique to this page or deliberately different from the main site.
   Shared header, footer, buttons, and base text styles live in styles.css. */

/* Tighter section spacing than the main site */
.reference-page { --section-space: clamp(4.5rem, 8vw, 7.5rem); }

/* Page header: simplified nav (Main Site link + button) */
.reference-header-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); font-size: .92rem; font-weight: 600; }
.main-site-link { text-decoration-thickness: 1px; text-underline-offset: .35rem; text-decoration-color: transparent; }
.main-site-link:hover, .main-site-link:focus-visible { text-decoration-color: currentColor; }
.reference-page .button { gap: .6rem; }

/* Hero */
.reference-hero { position: relative; overflow: hidden; border-bottom: 1px solid rgb(31 47 70 / 14%); }
.reference-hero::before { content: ""; position: absolute; right: 0; bottom: 0; width: 57%; height: 62%; opacity: .42; background-image: repeating-linear-gradient(to bottom, transparent 0 2.7rem, rgb(73 88 65 / 11%) 2.7rem calc(2.7rem + 1px)), repeating-linear-gradient(to right, transparent 0 7.5rem, rgb(73 88 65 / 9%) 7.5rem calc(7.5rem + 1px)); -webkit-mask-image: linear-gradient(to right, transparent, #000 28%), linear-gradient(to bottom, transparent, #000 28%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 28%), linear-gradient(to bottom, transparent, #000 28%); mask-composite: intersect; pointer-events: none; }
.reference-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .8fr); align-items: center; gap: clamp(2.25rem, 5vw, 5rem); padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.reference-hero-copy { max-width: 45rem; }
.reference-hero h1 { max-width: 12ch; margin-bottom: 1rem; font-size: clamp(3rem, 6vw, 5.5rem); letter-spacing: -.04em; }
.reference-tagline { max-width: 37rem; margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.5; }
.reference-summary { max-width: 36rem; margin: 0 0 2rem; font-size: clamp(1.05rem, 1.45vw, 1.18rem); font-style: italic; }
.reference-preview { position: relative; margin: 0; padding: clamp(.65rem, 1.3vw, 1rem); border: 1px solid rgb(31 47 70 / 24%); background: var(--white); box-shadow: .85rem .85rem 0 rgb(138 159 126 / 28%); transform: rotate(1deg); }
.reference-preview img { width: 100%; height: auto; }
.reference-preview figcaption { margin-top: .65rem; color: var(--sage-dark); font-size: .78rem; text-align: center; }

/* What's inside */
.reference-intro { background: var(--white); }
.reference-intro.section { padding-block: clamp(2rem, 3.5vw, 3rem); }
.reference-intro-inner { max-width: 64rem; }
.section-marker { color: var(--pink); font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; }
.reference-intro-copy { max-width: 60rem; }
.reference-intro-copy h2 { max-width: 34ch; margin-bottom: .7rem; font-size: clamp(1.55rem, 2.3vw, 2.1rem); letter-spacing: -.02em; }
.reference-intro-copy p { max-width: 60rem; margin: 0; font-size: clamp(.96rem, 1.15vw, 1.05rem); }
.reference-intro-copy p + p { margin-top: .4rem; }
.reference-inside-heading { max-width: 48rem; margin: clamp(1.75rem, 3vw, 2.4rem) 0 .8rem; }
.reference-inside-heading .eyebrow { margin-bottom: .35rem; }
.reference-inside-heading h2 { margin-bottom: 0; font-size: clamp(1.65rem, 2.5vw, 2.25rem); letter-spacing: -.025em; }
.reference-feature-list { max-width: 60rem; margin: 0; padding: 0; list-style: none; }
.reference-feature-list li { position: relative; padding-left: 1.25rem; line-height: 1.52; }
.reference-feature-list li + li { margin-top: .55rem; }
.reference-feature-list li::before { content: ""; position: absolute; top: .72em; left: 0; width: .42rem; height: .42rem; border-radius: 50%; background: var(--pink); }
.reference-feature-list h3 { display: inline; margin: 0 .25rem 0 0; font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: inherit; }
.reference-feature-list p { display: inline; margin: 0; font-size: .96rem; }
.reference-reassurance { max-width: 56rem; margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; padding-left: 1rem; border-left: 3px solid var(--sage); font-family: var(--serif); font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.45; }

/* Signup and Kit form */
.reference-signup { color: var(--ink); background: var(--blush); }
.reference-signup.section { padding-block: clamp(2.25rem, 3.5vw, 3.25rem); }
.reference-signup-inner { max-width: 66rem; }
.reference-signup-copy { max-width: 50rem; margin-bottom: clamp(1.15rem, 2vw, 1.6rem); }
.reference-signup-copy .eyebrow { margin-bottom: .4rem; color: var(--ink); }
.reference-signup-copy h2 { margin-bottom: .6rem; font-size: clamp(1.9rem, 3vw, 2.75rem); letter-spacing: -.03em; }
.reference-signup-copy p { max-width: 46rem; margin: 0; font-size: clamp(1rem, 1.3vw, 1.1rem); }
.kit-form-shell { width: 100%; max-width: 56rem; padding-left: clamp(1rem, 2.5vw, 2rem); border-left: 3px solid var(--ink); }
.kit-form-shell > * { max-width: 100%; }
.kit-form-shell .formkit-form { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.kit-form-shell .formkit-alert.formkit-alert-success[data-element="success"] { color: var(--ink) !important; border-color: var(--ink) !important; background-color: var(--ivory) !important; }
.kit-form-shell .formkit-alert.formkit-alert-success[data-element="success"] * { color: inherit !important; }
.kit-form-shell iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.reference-fine-print { margin: 1rem 0 0 clamp(1rem, 2.5vw, 2rem); font-size: .82rem; }

/* About Footnote */
.reference-about { background: var(--white); }
.reference-about-inner { display: grid; grid-template-columns: 5rem minmax(0, 45rem); justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.reference-about-marker img { width: clamp(2.5rem, 5vw, 4.5rem); height: auto; }
.reference-about h2 { margin-bottom: 1.25rem; font-size: clamp(2.35rem, 4.5vw, 4.1rem); letter-spacing: -.03em; }
.reference-about-copy > p:not(.eyebrow) { margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.16rem); }
.reference-about-copy > p:not(.eyebrow) + p { margin-top: 1rem; }
.text-link { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.75rem; font-weight: 700; text-underline-offset: .3rem; }
.text-link span { color: var(--pink); font-size: 1.3rem; }

@media (max-width: 800px) {
  html { scroll-padding-top: 5rem; }
  .reference-page .header-inner { gap: .75rem; }
  .reference-header-nav { margin-left: auto; gap: .75rem; font-size: .86rem; }
  .reference-header-nav .button-small { min-height: 2.75rem; padding: .62rem .9rem; font-size: .86rem; }
  .reference-hero-inner { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.75rem; }
  .reference-preview { width: min(100%, 30rem); margin-inline: auto; }
}

@media (max-width: 560px) {
  .reference-page .brand img { width: clamp(8.5rem, 38vw, 10.25rem); }
  .reference-header-nav { gap: .5rem; font-size: .78rem; white-space: nowrap; }
  .reference-header-nav .button-small { min-height: 2.6rem; padding: .55rem .65rem; font-size: .78rem; }
  .reference-hero-inner { gap: 1.75rem; padding-block: 2.25rem; }
  .reference-preview { box-shadow: .55rem .55rem 0 rgb(138 159 126 / 28%); }
  .reference-about-inner { grid-template-columns: 1fr; gap: 1rem; }
  .section-marker { font-size: 2.4rem; }
  .reference-about-marker img { width: 2.4rem; }
  .kit-form-shell { padding-left: 1rem; border-left-width: 2px; }
  .reference-fine-print { margin-left: 1rem; }
  .reference-page .footer-inner { grid-template-columns: 1fr; }
  .reference-page .footer-logo { width: 8rem; }
  .reference-page .footer-future { grid-column: auto; }
}

@media (max-width: 390px) {
  .reference-header-nav .main-site-link { display: none; }
}