/* ════════════════════════════════════════════════════════
   TALARA · inner pages - content flows on the same fixed,
   cross-dissolving background as the homepage. No cards.
   Reuses home.css (.scene, .sec, .kicker, masked .rl reveals,
   .btn, bgstage, nav, footer). This file only adds the few
   inner-page primitives: breadcrumb, the flowing "lead" answer,
   and the hairline index that replaces the spoke cards.
   ════════════════════════════════════════════════════════ */

/* footer is transparent and rides the last (cta) image, like the homepage -
   the footer carries data-bg="cta" so that image holds full opacity and never
   fades out underneath it (no hard ink seam). */
.footer { background: transparent; text-shadow: 0 1px 2px rgba(16,12,34,0.55), 0 2px 26px rgba(16,12,34,0.62); }

/* hero scene a touch shorter than the homepage's full-bleed 100vh */
.scene--page { min-height: 84vh; min-height: 84svh; }
.scene__eyebrow { margin-bottom: 1.7rem; }

/* inner-page images run at full vibrancy (no dark overlay), so the white text
   carries its own soft shadow for legibility - the shadow is on the text, not
   a scrim over the picture. */
.scene[data-dark] .scene__title,
.scene[data-dark] .scene__body,
.scene[data-dark] .scene__eyebrow,
.scene[data-dark] .crumbs,
.scene[data-dark] .crumbs a,
.scene[data-dark] .crumbs span { text-shadow: 0 1px 2px rgba(16,12,34,0.5), 0 2px 32px rgba(16,12,34,0.62); }
.scene[data-dark] .btn { text-shadow: none; }

/* breadcrumb (lives in the dark hero scene) */
.crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.7rem; }
.crumbs, .crumbs a, .crumbs span { color: var(--on-dark-2); }
.crumbs a { text-decoration: none; transition: color 0.2s ease; }
.crumbs a:hover { color: var(--on-dark); }

/* the AI answer / lead - a flowing serif statement, no box */
.lead-sec { padding: clamp(4rem, 9vh, 7rem) var(--pad-x); }
.lead { max-width: 940px; margin: 0 auto; }
.lead__q { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; }
.lead__q::before { content: ""; width: 22px; height: 1px; background: var(--line-2); }
.lead__a { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-size: clamp(1.55rem, 3.2vw, 2.6rem); line-height: 1.32; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
.lead__a em { font-style: normal; color: var(--indigo); }

/* hub index - hairline-separated flowing links (replaces cards) */
.index { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--line); }
.index__item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 0.4rem 2rem; padding: 1.8rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding-left 0.45s var(--ease), border-color 0.25s ease; }
.index__item:hover { padding-left: 0.7rem; border-color: var(--line-2); }
.index__main { grid-column: 1; }
.index__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.index__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.5vw, 1.95rem); letter-spacing: -0.015em; color: var(--ink); }
.index__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.index__d { font-size: 0.98rem; color: var(--ink-2); line-height: 1.55; max-width: 64ch; }
.index__arrow { grid-column: 2; color: var(--indigo); font-size: 1.3rem; transition: transform 0.4s var(--ease); }
.index__item:hover .index__arrow { transform: translateX(6px); }
@media (max-width: 600px) { .index__arrow { display: none; } }

/* dark closing scene reuses .scene; give its title the hero scale */
.scene__cta-actions { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* the masked scene title accent + inline links in flowing body copy */
.scene__title em { font-style: normal; color: #C9C4FF; }
.sec__body a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.sec__body a:hover { color: var(--indigo-700); }

/* flowing article prose (compliance, guides) - typography only, no boxes */
.prose { max-width: 760px; margin: 0 auto; }
.prose section { margin-bottom: 2.8rem; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem,2.8vw,2.1rem); letter-spacing: -0.018em; line-height: 1.15; color: var(--ink); margin-bottom: 1rem; }
.prose h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 1.4rem 0 0.5rem; }
.prose p { color: var(--ink-2); line-height: 1.78; margin-bottom: 1rem; }
.prose ul { list-style: none; display: grid; gap: 0.6rem; margin-bottom: 1.2rem; }
.prose li { position: relative; padding-left: 1.5rem; color: var(--ink-2); line-height: 1.6; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--indigo-700); }

/* glossary - hairline rows, no cards */
.glossary { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); }
.term { padding: 1.7rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(190px,0.5fr) 1fr; gap: 1.6rem; }
.term__name { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); }
.term__def { color: var(--ink-2); line-height: 1.65; }
.term__def a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 620px) { .term { grid-template-columns: 1fr; gap: 0.4rem; } }

/* CONTACT - form floats on the background; inputs are underline-minimal,
   the message gets a defined bordered field. */
.contact { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: 2.5rem; } }
.contact__intro .sec__title { margin-bottom: 1rem; }
.contact__direct { margin-top: 1.6rem; font-size: 0.95rem; color: var(--ink-2); }
.contact__direct a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.cform { display: grid; gap: 1.4rem; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 480px) { .cform__row { grid-template-columns: 1fr; } }
.cform__field { display: grid; gap: 0.5rem; }
.cform__field label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cform__field input,
.cform__field select { font-family: var(--sans); font-size: 1rem; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0.55rem 0; transition: border-color 0.2s ease; }
.cform__field input::placeholder { color: var(--ink-3); opacity: 0.55; }
.cform__field input:focus,
.cform__field select:focus { outline: none; border-bottom-color: var(--indigo); }
.cform__field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23navy' stroke-width='1.4'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%236b6880'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.2rem center; background-size: 12px; padding-right: 1.4rem; }
/* the message: a defined field, not a floating line */
.cform__field--message label { margin-bottom: 0.15rem; }
.cform__field textarea { font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--ink); background: rgba(255,255,255,0.45); border: 1px solid var(--line-2); border-radius: 14px; padding: 0.95rem 1.05rem; min-height: 140px; resize: vertical; transition: border-color 0.2s ease, background 0.2s ease; }
.cform__field textarea::placeholder { color: var(--ink-3); opacity: 0.55; }
.cform__field textarea:focus { outline: none; border-color: var(--indigo); background: #fff; }
.cform__error { color: #b3261e; font-size: 0.9rem; min-height: 1.1em; margin: -0.4rem 0 0; opacity: 0; transition: opacity 0.2s ease; }
.cform__error.show { opacity: 1; }
.cform__submit { justify-self: start; }
.cform__consent { font-size: 0.78rem; line-height: 1.5; color: var(--ink-3); max-width: 52ch; }
.cform__success { padding: 1rem 0; }
.cform__success-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem,2.8vw,2.1rem); letter-spacing: -0.018em; color: var(--ink); margin-bottom: 0.8rem; }

/* compact closing CTA: sits directly on top of the footer (one closing screen, no extra scroll) */
.scene--cta { min-height: auto; padding-top: clamp(5rem, 12vh, 8rem); padding-bottom: clamp(2.5rem, 6vh, 3.5rem); }

/* CONTACT PAGE - a single full-screen hero on the image, no footer, no fade */
body:has(.scene--contact) .reveal { opacity: 1 !important; transform: none !important; }
body:has(.scene--contact) .rl__in { transform: none !important; }
.scene--contact { min-height: 100vh; min-height: 100svh; align-items: center; }
.contact-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; width: 100%; }

/* pricing: top-align the columns so the form lines up with the heading (it's taller than the text) */
.scene--quote .contact-hero { align-items: start; }
.scene--quote .contact-hero__lead { padding-top: 0.4rem; }

/* pricing quote: checklist of what every plan includes (on-dark); checkmark centered via SVG */
.quote-list { list-style: none; padding: 0; margin: 1.7rem 0 0; display: grid; gap: 0.7rem; }
.quote-list li { position: relative; padding-left: 1.95rem; color: rgba(244,244,248,0.86); line-height: 1.5; text-shadow: 0 1px 2px rgba(16,12,34,0.5); }
.quote-list li::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1px solid rgba(201,196,255,0.5); background: rgba(201,196,255,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.1 6.3l1.9 1.9 3.9-4.4' fill='none' stroke='%23C9C4FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center / 0.72rem 0.72rem no-repeat; }
.quote-trust { margin-top: 1.5rem; font-size: 0.85rem; line-height: 1.55; color: rgba(244,244,248,0.6); max-width: 50ch; text-shadow: 0 1px 2px rgba(16,12,34,0.5); }
@media (max-width: 940px) {
  .contact-hero { grid-template-columns: 1fr; gap: 2.4rem; }
  /* on mobile the stacked headline + form is taller than one screen: let it scroll, drop the 100vh lock */
  body:has(.scene--contact) { height: auto; overflow: visible; display: block; }
  body:has(.scene--contact) main { display: block; }
  .scene--contact { min-height: auto; padding-top: 6rem; padding-bottom: 3rem; }
}
.contact-hero__lead .scene__title { margin-bottom: 1.4rem; }
/* no card: the fields flow directly on the background */
.contact-hero__form { background: transparent; border: none; padding: 0; box-shadow: none; }
/* on-dark field styling */
.cform--on-dark .cform__field label { color: rgba(244,244,248,0.62); }
.cform--on-dark .cform__field input,
.cform--on-dark .cform__field select { color: var(--on-dark); border-bottom-color: rgba(255,255,255,0.26); }
.cform--on-dark .cform__field input::placeholder { color: rgba(244,244,248,0.4); }
.cform--on-dark .cform__field input:focus,
.cform--on-dark .cform__field select:focus { border-bottom-color: #C9C4FF; }
.cform--on-dark .cform__field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%23C9C4FF' stroke-width='1.4'/%3E%3C/svg%3E"); }
.cform--on-dark .cform__field select option { color: #14131C; }
.cform--on-dark .cform__field textarea { color: var(--on-dark); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
.cform--on-dark .cform__field textarea::placeholder { color: rgba(244,244,248,0.4); }
.cform--on-dark .cform__field textarea:focus { border-color: #C9C4FF; background: rgba(255,255,255,0.12); }
.cform--on-dark .cform__consent { color: rgba(244,244,248,0.5); }
.cform--on-dark .cform__error { color: #ffb4a8; }
.contact-hero__form .cform__success-title { color: var(--on-dark); }
.contact-hero__form .cform__success .scene__body { color: rgba(244,244,248,0.72); }

/* FAQ - flowing question/answer rows, no cards */
.faqs { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.qa { padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.qa__q { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem,2.2vw,1.55rem); letter-spacing: -0.012em; color: var(--ink); margin-bottom: 0.7rem; }
.qa__a { color: var(--ink-2); line-height: 1.72; }
.qa__a a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.qa__a a:hover { color: var(--indigo-700); }