/* tanode landing layout. Tokens and shared components live in base.css. */

/* Temporary wordmark: lowercase needs a face with lowercase letters, so IBM Plex Mono (Bebas Neue is caps only). */
.tanode-wordmark { font: 500 28px/1 var(--ff-mono); letter-spacing: -0.03em; color: var(--green); }
.tanode-wordmark--small { font-size: 13px; letter-spacing: 0; text-transform: none; }

.site-header { color: var(--green); }
.nav { align-items: center; }
.nav__cta { border: 1px solid var(--green); padding: 10px 14px; opacity: 1 !important; }
.nav__cta:hover { background: var(--green); color: var(--paper); text-decoration: none !important; }

.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 140px; }
.hero .eyebrow a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.hero h1 { max-width: 15ch; font-size: clamp(48px, 7vw, 108px); }
.nowrap { white-space: nowrap; }
.hero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; margin-top: 40px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__what { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(63, 92, 122, .3); max-width: 58ch; color: var(--muted); }

.why { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.why h2 { max-width: 12ch; }
.why__body .lede { max-width: 38ch; }
.principle { margin-top: 32px; padding-left: 18px; border-left: 3px solid var(--gold); font-size: 14px; letter-spacing: .08em; color: var(--paper); }

.how__title { max-width: 16ch; }
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--green); }
.steps li { position: relative; padding: 28px 22px 0 0; display: grid; gap: 12px; align-content: start; }
.steps li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--sage); }
.steps li:last-child::before { background: var(--gold); border-color: var(--gold); }
.steps__num { font-size: 12px; letter-spacing: .2em; color: var(--blue); }
.steps h3 { color: var(--green); }
.steps p { font-size: 18px; line-height: 1.45; }

.why { margin-top: 32px; }
.start { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.start__body { display: grid; gap: 32px; justify-items: start; }
.start__body .eyebrow { margin-bottom: -8px; }
.vision-plate { margin: 0; position: relative; min-width: 0; }
.vision { width: 100%; aspect-ratio: 780 / 540; min-width: 0; cursor: pointer; }
.vision:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }

/* Ink-mark annotation. Tokens from the design system: --font-hand, --hand-track -0.045em, --stroke-ink 1.4px.
   --ta-ink-mark (#2E6DA4) is specified for paper; on dark green it falls below 3:1, so the
   dark-surface structural blue (#7BA0C9) carries the ink here. */
.ink-note { position: relative; display: grid; gap: 4px; justify-items: start; max-width: 26ch; margin: 0 0 -18px 8%; color: var(--line);
  font-family: 'Shadows Into Light', cursive; text-transform: uppercase; letter-spacing: -0.045em; line-height: 1.1; transform: rotate(-2deg); }
.ink-note__main { font-size: clamp(18px, 1.1vw + 10px, 23px); }
.ink-note__hint { font-size: clamp(14px, .6vw + 9px, 16px); opacity: .8; }
.ink-note__arrow { position: absolute; left: 100%; top: 18px; width: 92px; height: auto; margin-left: -12px; }

/* Contact: same rules as the Studio contact section. Top rule separates it from the dark Start section above. */
.contact { border-top: 1px solid rgba(123, 160, 201, .2); }
.contact__intro { display: grid; gap: 18px; max-width: 56ch; margin-top: 28px; color: var(--mist); }
.contact__list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; }
.contact__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; color: var(--paper); }
.contact__list .mono { width: 110px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }

.site-footer a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }

@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; border-top: 0; }
  .steps li { border-top: 1px solid var(--green); }
}
@media (max-width: 900px) {
  .why, .start { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav a:not(.nav__cta) { display: none; }
  .steps { grid-template-columns: 1fr; }
}