/* ============================================================
   Ethos Ink Core — "Studio Notes" design system
   Ported verbatim from the approved design source
   (direction-3-tight.jsx → the `d3Css` template string).
   Colors are the literal values from the `D3` token object:
     cream/paper #fdfaf2 · ink #3a2a18 · orange #ad3e12
     orangeDeep #8a2f0c · orangeSoft #d65726 · lime #dbe85a
   ============================================================ */

/* ---- Base reset (from the prototype's HTML shell) ---- */
html, body {
  margin: 0;
  padding: 0;
  background: #fdfaf2;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #3a2a18;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#root { width: 100%; }

/* Nav "book intro call" pulse dot (was an inline <style> in D3Nav) */
@keyframes d3pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============================================================
   d3Css — global system, scoped to .d3-wrap
   ============================================================ */
.d3-wrap { font-family: 'IBM Plex Sans', sans-serif; background: #fdfaf2; color: #3a2a18; font-weight: 400; max-width: 1340px; margin: 0 auto; }
.d3-wrap h1, .d3-wrap h2, .d3-wrap h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500; letter-spacing: -0.025em; }
.d3-wrap .label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(58,42,24,0.5); }
.d3-wrap .label--accent { color: #ad3e12; }
.d3-mark { background: linear-gradient(180deg, transparent 55%, #dbe85a 55% 92%, transparent 92%); padding: 0 0.08em; }
.d3-circle { display: inline-block; padding: 0.05em 0.5em; border: 1.5px solid #ad3e12; border-radius: 999px; transform: rotate(-1deg); }
.d3-cta { transition: transform .15s, box-shadow .2s; }
.d3-cta:hover { transform: translateY(-1px) rotate(-0.5deg); box-shadow: 0 12px 20px -10px rgba(58,42,24,0.4); }
.d3-card-hover { transition: transform .2s, box-shadow .2s; }
.d3-card-hover:hover { transform: translateY(-3px); }

/* Tool pills — small play on hover */
.d3-pill { transition: transform .25s cubic-bezier(.5,1.5,.3,1), background .2s, color .2s, border-color .2s; cursor: default; }
.d3-pill:hover { transform: translateY(-2px) rotate(-2deg); background: #dbe85a; border-color: #3a2a18; }

/* Lime accent dot on Why-Custom cards — pulses on card hover */
.d3-card-hover .d3-card-dot { transition: transform .35s cubic-bezier(.5,1.7,.3,1); }
.d3-card-hover:hover .d3-card-dot { transform: scale(1.45) rotate(45deg); }

/* Team photo card — straighten on hover, slight scale */
.d3-photo-card { transition: transform .4s cubic-bezier(.22,.7,.25,1), box-shadow .3s; }
.d3-photo-card:hover { transform: rotate(0deg) scale(1.02) !important; box-shadow: 0 30px 50px -28px rgba(58,42,24,0.55); }
.d3-faq summary::-webkit-details-marker { display: none; }
.d3-faq summary { list-style: none; }
.d3-faq[open] .d3-chev { transform: rotate(90deg); }

/* Hand-drawn underline / arrow svgs that draw themselves in on scroll-in */
.d3-draw path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
@supports (animation-timeline: view()) {
  .d3-draw path {
    animation: d3DrawLine 1.4s cubic-bezier(.22,.7,.25,1) forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
}

/* Tilted 'done' lime circle in WhoFor — straightened. */
.d3-done { display: inline-block; transform-origin: center; }

/* Footer email input placeholder — lighten so it reads against the orange. */
.d3-wrap footer input::placeholder { color: rgba(253,250,242,0.7); opacity: 1; }

/* Team section — between mobile (900px) and full desktop, the photos-left /
   bio-right grid squeezes the bio column too tight. Stack it below until
   there's room. */
@media (min-width: 901px) and (max-width: 1100px) {
  .d3-team-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .d3-team-grid > div:first-child { max-width: 720px; }
}

/* ============================================================
   MOBILE — single-column collapse, smaller type, hide design pickers.
   Targets viewports up to 900px. Inline styles are overridden with !important.
   ============================================================ */
@media (max-width: 900px) {
  .d3-wrap { max-width: 100% !important; margin: 0 !important; }

  /* Section padding */
  .d3-wrap > section { padding: 56px 20px !important; }
  .d3-wrap > footer { padding: 48px 20px 24px !important; }

  /* Hide right-side scroll-spy rail and the design-system pickers — they're
     for design exploration, not real-user navigation. */
  .d3-wrap > nav[aria-label="Section navigation"] { display: none !important; }
  .d3-picker { display: none !important; }

  /* Top nav: stack and hide the middle anchor links (keep logo + book cta) */
  .d3-wrap > nav:not([aria-label]) { padding: 14px 20px !important; }
  .d3-wrap > nav:not([aria-label]) > div { display: none !important; }

  /* Collapse every multi-column grid to one column — inline-style based. */
  .d3-wrap [style*="display: grid"], .d3-wrap [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Trust strip stays as 2x2 grid */
  .d3-wrap [aria-label="Trust signals"] > div {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }

  /* Tools section keeps 2-col card grid */
  .d3-wrap #stack > div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Big display headlines — scale way down */
  .d3-wrap section h1 { font-size: 44px !important; line-height: 1 !important; }
  .d3-wrap section h2 { font-size: 36px !important; line-height: 1.05 !important; }
  .d3-wrap section h3 { font-size: 24px !important; line-height: 1.1 !important; }
  .d3-wrap section blockquote { font-size: 22px !important; }
  .d3-wrap section p { font-size: 16px !important; line-height: 1.55 !important; }
  .d3-wrap section ul { font-size: 16px !important; }

  /* Pull-quote inner divs in Story / OwnAI / Problem / Faster */
  .d3-wrap section > div[style*="font-size: 5"],
  .d3-wrap section div[style*="fontFamily"][style*="fontSize: 5"] { font-size: 28px !important; }

  /* HowItWorks step cards — shrink the big numeric column */
  .d3-wrap .d3-step-card { padding: 20px 18px !important; }
  .d3-wrap .d3-step-card > div:first-child { font-size: 56px !important; }
  .d3-wrap .d3-step-card > div:last-child { font-size: 14px !important; padding: 12px 14px !important; }

  /* Use Cases cards — shrink the big italic number on mobile */
  .d3-wrap .d3-usecase-card { padding: 24px 22px 22px !important; }
  .d3-wrap .d3-usecase-card > div:first-child > span:first-child { font-size: 42px !important; }

  /* Section dots break — tighter so 9 dots fit comfortably on narrow screens */
  .d3-wrap .d3-dots { gap: 8px !important; padding: 16px 20px !important; }

  /* Mockup — keep card readable: hide its internal nav tabs, reduce padding */
  .d3-wrap [style*="northstar.app"] { font-size: 9px !important; }
  .d3-wrap [data-mockup-nav] { display: none !important; }

  /* Calendly iframe — a touch shorter on mobile */
  .d3-wrap #book iframe { min-height: 620px !important; }

  /* CTAs (buttons / links) — a hair bigger tap target */
  .d3-wrap a[href="#book"] { padding-top: 16px !important; padding-bottom: 16px !important; }

  /* Team photo cards — small-screen tilt makes them feel cramped */
  .d3-wrap .d3-photo-card { transform: rotate(0deg) !important; }

  /* Section breaks — slimmer */
  .d3-wrap .d3-break { padding: 12px 20px !important; }
}

@media (max-width: 480px) {
  .d3-wrap section h1 { font-size: 36px !important; }
  .d3-wrap section h2 { font-size: 30px !important; }
  .d3-wrap section { padding: 44px 16px !important; }
}

/* ============================================================
   Reduced-motion — respect the OS setting. Disables every
   scroll-driven and entrance animation so users with vestibular
   sensitivities (or who explicitly ask for less motion) see a
   static page. Hover decoration stays — that's user-initiated.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .d3-wrap *,
  .d3-wrap *::before,
  .d3-wrap *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  /* Kill the scroll-driven section reveals + dot ripples so content
     just appears, rather than fading in as you scroll. */
  .d3-wrap section, .d3-wrap .d3-dot, .d3-wrap .d3-break-line path { animation: none !important; }
  html { scroll-behavior: auto !important; }
}

/* HowItWorks step cards — tilt slightly on hover */
.d3-step-card { transition: transform .3s cubic-bezier(.5,1.5,.3,1), box-shadow .3s; }
.d3-step-card:hover { transform: translateY(-3px) !important; box-shadow: 0 22px 36px -22px rgba(58,42,24,0.45); }

/* Subtle paper-grain texture for full-bleed sections so they don't read as flat color. */
.d3-textured { position: relative; }
.d3-textured::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px);
  background-size: 22px 22px; opacity: 0.7;
}
.d3-textured > * { position: relative; z-index: 1; }

/* Section divider — visible orange, draws itself in on scroll, mark spins on hover. */
.d3-break-line path { stroke-dasharray: 900; stroke-dashoffset: 900; }
@supports (animation-timeline: view()) {
  .d3-break-line path {
    animation: d3DrawLine 1.6s cubic-bezier(.22,.7,.25,1) forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
}
@keyframes d3DrawLine { to { stroke-dashoffset: 0; } }

/* Animated dots section break — the lime highlight ripples through the row,
   driven by scroll position so it tracks the reader as they pass the break. */
.d3-dot { transition: background .2s; }
@supports (animation-timeline: view()) {
  .d3-dot {
    animation: d3DotLime linear both;
    animation-timeline: view();
  }
}
@keyframes d3DotLime {
  0%, 100% { background-color: #ad3e12; transform: scale(1); }
  50% { background-color: #dbe85a; transform: scale(1.8); }
}

/* Flow: kill hard borders on sections that have a wave divider below them;
   only the explicit .d3-keep-border sections (between same-color blocks)
   still get the dashed hairline. */
.d3-wrap > section { border-bottom: none !important; }
.d3-wrap > section.d3-keep-border { border-bottom: 1px dashed rgba(58,42,24,0.16) !important; }

/* Flow: gentle reveal as each section enters the viewport. Modern browsers
   (Chrome/Edge/Safari) animate via scroll-driven timelines; older browsers
   just see the static layout — no JS, no broken layout. */
.d3-wrap > section { opacity: 1; }
@supports (animation-timeline: view()) {
  .d3-wrap > section {
    opacity: 0;
    animation: d3SectionReveal 1.1s cubic-bezier(.22,.7,.25,1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 18%;
  }
  /* The hero is in view on load — don't fade it in. */
  .d3-wrap > section#idea { animation: none; opacity: 1; }
  /* Inner cards / blockquotes get a slightly different curve for a soft
     staggered feel without per-element JS. */
  .d3-wrap > section article,
  .d3-wrap > section blockquote {
    animation: d3CardReveal 1.2s cubic-bezier(.22,.7,.25,1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}
@keyframes d3SectionReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes d3CardReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slow drift for the hero's organic background shape. */
@keyframes d3Drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-30px, 20px) rotate(-3deg); }
}
.d3-drift { animation: d3Drift 24s ease-in-out infinite; }

/* ============================================================
   Static-port additions — behaviors that were React inline state
   in the prototype, now plain CSS/JS hooks. Visuals unchanged.
   ============================================================ */

/* Scroll-spy rail link states (was inline style driven by React `active`). */
.d3-rail-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 10px; border-radius: 999px; text-decoration: none;
  background: transparent; color: #3a2a18;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  transition: background .25s, color .25s;
}
.d3-rail-link .d3-rail-dot {
  width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0;
  background: transparent; border: 1.5px solid rgba(58,42,24,0.5);
  transition: background .25s, border .25s;
}
.d3-rail-link .d3-rail-label { min-width: 48px; }
.d3-rail-link.is-active { background: #3a2a18; color: #fdfaf2; }
.d3-rail-link.is-active .d3-rail-dot { background: #dbe85a; border: none; }

/* Footer form inline status message (success / error states). */
.d3-wrap .form-status {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  line-height: 1.5; margin: 10px 0 0; letter-spacing: 0.02em;
}
.d3-wrap .form-status[data-state="ok"] { color: #dbe85a; }
.d3-wrap .form-status[data-state="error"] { color: #fdfaf2; }

/* Realize the documented mobile shrink for the orange pull-quote text
   (the prototype's attribute-substring selector couldn't reach this nested
   node; a class makes the intended 28px collapse reliable). */
@media (max-width: 900px) {
  .d3-wrap .d3-pullbig { font-size: 28px !important; }
}