/* Home V3 night continuity — Tools + How it works
   Loaded after the canonical section styles. The selectors deliberately stay
   section-scoped so the study pages and the product routes remain untouched. */

/* --------------------------------------------------------------------------
   TOOLS — cobalt workbench, paper outputs, coral action, green result
   -------------------------------------------------------------------------- */

section#tools.tw2-tool-section {
  --tw2-night: var(--uck-night-950, #0a101b);
  --tw2-night-soft: var(--uck-night-800, #162a46);
  --tw2-night-lit: var(--uck-night-700, #1c3658);
  --tw2-blue: var(--uck-blue-500, #68a8e8);
  --tw2-blue-soft: var(--uck-blue-100, #eaf3fb);
  --tw2-coral: var(--uck-coral-500, #ff315b);
  --tw2-result: var(--uck-result-600, #2f6f68);
  --tw2-result-soft: var(--uck-result-100, #dfeee9);
  --tw2-paper: var(--uck-paper-50, #fffefd);
  --tw2-paper-warm: var(--uck-paper-100, #f8f5f0);
  --tw2-grid: rgba(168, 207, 243, .095);
  color: #f7f9fc !important;
  background:
    radial-gradient(70% 54% at 101% 0%, rgba(104, 168, 232, .18), transparent 68%),
    radial-gradient(48% 38% at -6% 14%, rgba(255, 49, 91, .11), transparent 72%),
    linear-gradient(var(--tw2-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tw2-grid) 1px, transparent 1px),
    linear-gradient(118deg, var(--tw2-night) 0%, #101d30 52%, var(--tw2-night-soft) 100%) !important;
  background-size: auto, auto, 72px 72px, 72px 72px, auto !important;
}

section#tools.tw2-tool-section .uk-kicker {
  color: #ff6b85 !important;
}

section#tools.tw2-tool-section .tw2-head-title,
section#tools.tw2-tool-section .tw2-section-lead strong,
section#tools.tw2-tool-section .tw2-tool-step h3,
section#tools.tw2-tool-section .tw2-mobile-copy h3 {
  color: #f9fbff !important;
}

section#tools.tw2-tool-section .tw2-section-lead,
section#tools.tw2-tool-section .tw2-tool-step > div > p,
section#tools.tw2-tool-section .tw2-mobile-copy p {
  color: rgba(226, 235, 247, .78) !important;
}

section#tools.tw2-tool-section .tw2-tool-step > div::before {
  background: rgba(168, 207, 243, .2) !important;
}

section#tools.tw2-tool-section .tw2-tool-step > div::after {
  background: linear-gradient(180deg, var(--tw2-coral) 0%, #ff6a7c 52%, var(--tw2-blue) 100%) !important;
  box-shadow: 0 0 18px rgba(255, 49, 91, .32) !important;
}

section#tools.tw2-tool-section .tw2-tool-step .tw2-step-num {
  color: rgba(168, 207, 243, .46) !important;
}

section#tools.tw2-tool-section .tw2-tool-step.is-active .tw2-step-num,
section#tools.tw2-tool-section .tw2-mobile-copy .tw2-step-num {
  color: #ff6b85 !important;
  text-shadow: 0 0 22px rgba(255, 49, 91, .28) !important;
}

section#tools.tw2-tool-section .tw2-step-note {
  color: rgba(200, 215, 234, .6) !important;
}

section#tools.tw2-tool-section .tw2-step-note i {
  background: var(--tw2-blue) !important;
  box-shadow: 0 0 10px rgba(104, 168, 232, .45) !important;
}

section#tools.tw2-tool-section .tw2-tool-cta {
  border-color: rgba(255, 255, 255, .34) !important;
  color: #fff !important;
  background: linear-gradient(145deg, var(--tw2-coral), var(--uck-coral-600, #db1744)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 14px 30px rgba(219, 23, 68, .25) !important;
}

section#tools.tw2-tool-section .tw2-tool-cta:hover {
  border-color: rgba(255, 255, 255, .72) !important;
  color: #fff !important;
  background: linear-gradient(145deg, #ff496e, var(--tw2-coral)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .34), 0 18px 38px rgba(219, 23, 68, .34) !important;
}

section#tools.tw2-tool-section .tw2-tool-cta:focus-visible {
  outline-color: rgba(168, 207, 243, .76) !important;
}

section#tools.tw2-tool-section .tw2-stage {
  border: 1px solid rgba(168, 207, 243, .52) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(76% 72% at 8% 4%, rgba(255, 49, 91, .075), transparent 64%),
    radial-gradient(74% 68% at 98% 98%, rgba(104, 168, 232, .14), transparent 68%),
    linear-gradient(rgba(22, 42, 70, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 42, 70, .035) 1px, transparent 1px),
    linear-gradient(155deg, var(--tw2-paper) 0%, var(--tw2-paper-warm) 100%) !important;
  background-size: auto, auto, 48px 48px, 48px 48px, auto !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .96),
    0 0 0 1px rgba(10, 16, 27, .24),
    0 28px 70px rgba(1, 7, 17, .38),
    0 0 40px rgba(104, 168, 232, .08) !important;
  animation: none !important;
}

section#tools.tw2-tool-section .tw2-stage::before {
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(115deg, rgba(255, 255, 255, .3), transparent 28%, transparent 72%, rgba(104, 168, 232, .06)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .54) !important;
}

section#tools.tw2-tool-section .tw2-llm-window,
section#tools.tw2-tool-section .tw2-artifact-window,
section#tools.tw2-tool-section .tw2-human-card,
section#tools.tw2-tool-section .tw2-extract-card {
  border-color: rgba(22, 42, 70, .2) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .98),
    0 8px 22px rgba(22, 42, 70, .11),
    0 30px 68px rgba(22, 42, 70, .17) !important;
}

section#tools.tw2-tool-section .tw2-llm-topbar {
  border-color: rgba(22, 42, 70, .13) !important;
  background: linear-gradient(180deg, #fff 0%, #f3f7fb 100%) !important;
  color: var(--uck-ink-900, #171716) !important;
  box-shadow: 0 8px 22px rgba(22, 42, 70, .055) !important;
}

section#tools.tw2-tool-section .tw2-llm-topbar::after {
  background: linear-gradient(90deg, var(--tw2-blue), rgba(104, 168, 232, .28) 40%, transparent 78%) !important;
}

section#tools.tw2-tool-section .tw2-llm-model {
  border-color: rgba(22, 42, 70, .13) !important;
  color: var(--tw2-night-soft) !important;
  background: rgba(234, 243, 251, .72) !important;
}

section#tools.tw2-tool-section .tw2-artifact-topbar {
  background: linear-gradient(90deg, var(--tw2-coral) 0 3px, var(--tw2-night) 3px, var(--tw2-night-soft) 66%, var(--tw2-night-lit) 100%) !important;
}

section#tools.tw2-tool-section .tw2-artifact-base {
  background: linear-gradient(90deg, var(--tw2-night) 0%, var(--tw2-night-soft) 66%, var(--tw2-night-lit) 100%) !important;
  color: #f3f7fc !important;
}

section#tools.tw2-tool-section .tw2-artifact-base span::before {
  background: var(--tw2-blue) !important;
  box-shadow: 0 0 0 4px rgba(104, 168, 232, .14) !important;
}

section#tools.tw2-tool-section .tw2-artifact-kicker,
section#tools.tw2-tool-section .tw2-output-kicker,
section#tools.tw2-tool-section .tw2-doc-index b,
section#tools.tw2-tool-section .tw2-extract-card small {
  color: var(--tw2-coral) !important;
}

section#tools.tw2-tool-section .tw2-artifact-item b,
section#tools.tw2-tool-section .tw2-digest-row b,
section#tools.tw2-tool-section .tw2-extract-meta b {
  color: var(--tw2-result) !important;
}

section#tools.tw2-tool-section .tw2-human-actions span {
  color: #245d56 !important;
  background: var(--tw2-result-soft) !important;
}

section#tools.tw2-tool-section .tw2-extract-card blockquote {
  border-left-color: var(--tw2-result) !important;
}

section#tools.tw2-tool-section .tw2-extract-card blockquote::before {
  color: rgba(47, 111, 104, .16) !important;
}

section#tools.tw2-tool-section .tw2-flow-line {
  background: rgba(104, 168, 232, .45) !important;
}

section#tools.tw2-tool-section .tw2-flow-line::after {
  background: var(--tw2-coral) !important;
  box-shadow: 0 0 0 6px rgba(255, 49, 91, .11) !important;
}

section#tools.tw2-tool-section .tw2-flow-node {
  border-color: var(--tw2-blue) !important;
  box-shadow: 0 0 0 8px rgba(104, 168, 232, .12) !important;
}

section#tools.tw2-tool-section .tw2-stage-chip {
  color: var(--tw2-night-soft) !important;
  border-color: rgba(22, 42, 70, .14) !important;
  background: rgba(255, 254, 253, .82) !important;
}

section#tools.tw2-tool-section .tw2-destination-label::before,
section#tools.tw2-tool-section .tw2-brand-dot.tw2-green::before {
  background: var(--tw2-result) !important;
}

section#tools.tw2-tool-section .tw2-provider-badge {
  color: #f3f7fc !important;
  border-color: rgba(168, 207, 243, .2) !important;
  background: linear-gradient(145deg, var(--tw2-night-soft), var(--tw2-night)) !important;
  box-shadow: 0 10px 28px rgba(10, 16, 27, .28) !important;
}

section#tools.tw2-tool-section .tw2-raw-note,
section#tools.tw2-tool-section .tw2-raw-note:nth-child(2),
section#tools.tw2-tool-section .tw2-raw-note:nth-child(3),
section#tools.tw2-tool-section .tw2-raw-note:nth-child(4) {
  color: #edf5ff !important;
  background: linear-gradient(145deg, var(--tw2-night-soft), var(--tw2-night)) !important;
}

section#tools.tw2-tool-section .tw2-raw-note:nth-child(2) {
  background: linear-gradient(145deg, #2b2340, var(--tw2-night-soft)) !important;
}

section#tools.tw2-tool-section .tw2-raw-note:nth-child(3) {
  background: linear-gradient(145deg, #18364d, var(--tw2-night-soft)) !important;
}

section#tools.tw2-tool-section .tw2-migration-route::before {
  background: linear-gradient(90deg, var(--tw2-blue) 0%, #8b86d8 48%, var(--tw2-coral) 100%) !important;
}

section#tools.tw2-tool-section .tw2-migration-route::after {
  border-color: var(--tw2-coral) !important;
}

section#tools.tw2-tool-section .tw2-route-packet {
  color: var(--tw2-night-soft) !important;
  border-color: rgba(104, 168, 232, .48) !important;
  background: var(--tw2-blue-soft) !important;
  box-shadow: 0 9px 24px rgba(22, 42, 70, .22) !important;
}

section#tools.tw2-tool-section .tw2-mobile-picker {
  border-color: rgba(168, 207, 243, .16) !important;
  background: rgba(10, 16, 27, .9) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18) !important;
}

section#tools.tw2-tool-section .tw2-mobile-picker button {
  color: rgba(168, 207, 243, .48) !important;
}

section#tools.tw2-tool-section .tw2-mobile-picker button.is-active {
  color: #fff !important;
  border-color: var(--tw2-coral) !important;
}

/* --------------------------------------------------------------------------
   HOW IT WORKS — blue system states, coral action, green successful output
   -------------------------------------------------------------------------- */

section#how-it-works.hiw-how-it-works {
  --hiw-night: var(--uck-night-950, #0a101b);
  --hiw-night-soft: var(--uck-night-800, #162a46);
  --hiw-night-lit: var(--uck-night-700, #1c3658);
  --hiw-blue: var(--uck-blue-500, #68a8e8);
  --hiw-blue-soft: var(--uck-blue-100, #eaf3fb);
  --hiw-coral: var(--uck-coral-500, #ff315b);
  --hiw-result: var(--uck-result-600, #2f6f68);
  --hiw-result-soft: var(--uck-result-100, #dfeee9);
  --hiw-paper: var(--uck-paper-50, #fffefd);
  --hiw-ink: var(--uck-ink-900, #171716);
  background:
    radial-gradient(48% 30% at 86% 8%, rgba(104, 168, 232, .09), transparent 72%),
    linear-gradient(180deg, var(--hiw-paper) 0%, #f5f8fb 56%, var(--uck-paper-100, #f8f5f0) 100%) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step {
  border-color: rgba(255, 255, 255, .88) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 20px 44px -20px rgba(22, 42, 70, .24) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(1) {
  background:
    radial-gradient(120% 82% at 8% 4%, rgba(255, 255, 255, .82), transparent 56%),
    linear-gradient(155deg, #fff7f6 0%, #f8e8eb 100%) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(2) {
  background:
    radial-gradient(100% 128% at 98% 42%, rgba(255, 255, 255, .66), transparent 55%),
    linear-gradient(155deg, #eaf3fb 0%, #cfe2f5 100%) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(3) {
  background:
    radial-gradient(118% 88% at 82% 2%, rgba(255, 255, 255, .7), transparent 54%),
    linear-gradient(155deg, #eff7f4 0%, var(--hiw-result-soft) 100%) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:hover,
section#how-it-works.hiw-how-it-works .hiw-step:focus-visible {
  border-color: rgba(104, 168, 232, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 26px 52px -20px rgba(22, 42, 70, .3) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(3):hover,
section#how-it-works.hiw-how-it-works .hiw-step:nth-child(3):focus-visible {
  border-color: rgba(47, 111, 104, .38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 26px 52px -20px rgba(47, 111, 104, .28) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step-num::before {
  background: var(--hiw-blue) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 4px rgba(10, 16, 27, .16), 0 5px 13px rgba(104, 168, 232, .28) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(1) .hiw-step-num::before {
  background: var(--hiw-coral) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 4px rgba(10, 16, 27, .16), 0 5px 13px rgba(255, 49, 91, .26) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(3) .hiw-step-num::before {
  background: var(--hiw-result) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 4px rgba(10, 16, 27, .16), 0 5px 13px rgba(47, 111, 104, .28) !important;
}

section#how-it-works.hiw-how-it-works .hiw-visual::before {
  border-color: rgba(255, 255, 255, .94) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(234, 243, 251, .22) 46%, rgba(255, 255, 255, .36)) !important;
  box-shadow: inset 0 0 0 1px rgba(22, 42, 70, .055), inset 0 1px 0 rgba(255, 255, 255, .98), 0 20px 42px rgba(22, 42, 70, .08) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step-copy h3 {
  color: var(--hiw-ink) !important;
}

/* UCK-LEAD 01/09 — preserve a clean air gap between the glass artefact and
   its title. The original grid ended the visual exactly where copy began;
   this small buffer clears the artefact shadow without changing its scale. */
section#how-it-works.hiw-how-it-works .hiw-step-copy {
  margin-top: 12px !important;
}

section#how-it-works.hiw-how-it-works .hiw-step-copy p {
  color: #45546a !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(3) .hiw-step-copy p {
  color: #38564f !important;
}

section#how-it-works.hiw-how-it-works .hiw-capture-object,
section#how-it-works.hiw-how-it-works .hiw-choose-object,
section#how-it-works.hiw-how-it-works .hiw-result-object {
  border-color: rgba(22, 42, 70, .2) !important;
  box-shadow: 0 15px 36px rgba(22, 42, 70, .14) !important;
}

section#how-it-works.hiw-how-it-works .hiw-capture-seam {
  background: linear-gradient(90deg, #28172a 0%, var(--hiw-night) 36%, var(--hiw-night-soft) 72%, var(--hiw-night-lit) 100%) !important;
  box-shadow: inset 3px 0 var(--hiw-coral) !important;
}

section#how-it-works.hiw-how-it-works .hiw-capture-input {
  border-color: rgba(104, 168, 232, .4) !important;
  box-shadow: 0 0 0 3px rgba(104, 168, 232, .1) !important;
}

section#how-it-works.hiw-how-it-works .hiw-capture-input svg {
  color: #397dbf !important;
}

section#how-it-works.hiw-how-it-works .hiw-capture-cta {
  background-color: var(--hiw-coral) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 8px 18px rgba(219, 23, 68, .22) !important;
}

section#how-it-works.hiw-how-it-works .hiw-capture-base {
  color: #e9f2fd !important;
  background: linear-gradient(90deg, var(--hiw-night) 0%, var(--hiw-night-soft) 100%) !important;
}

section#how-it-works.hiw-how-it-works .hiw-choose-object {
  background: rgba(255, 254, 252, .97) !important;
}

section#how-it-works.hiw-how-it-works .hiw-choose-head span:last-child {
  color: #397dbf !important;
}

section#how-it-works.hiw-how-it-works .hiw-choice-icon {
  color: #64748a !important;
  background: #edf3f8 !important;
}

section#how-it-works.hiw-how-it-works .hiw-choice.hiw-is-active {
  color: var(--hiw-night-soft) !important;
  background: rgba(104, 168, 232, .12) !important;
}

section#how-it-works.hiw-how-it-works .hiw-choice.hiw-is-active .hiw-choice-icon {
  color: #fff !important;
  background: linear-gradient(145deg, var(--hiw-blue), #397dbf) !important;
}

section#how-it-works.hiw-how-it-works .hiw-choice.hiw-is-active .hiw-choice-check {
  color: #397dbf !important;
}

section#how-it-works.hiw-how-it-works .hiw-result-seam,
section#how-it-works.hiw-how-it-works .hiw-share-title {
  color: #fff !important;
  background: linear-gradient(90deg, var(--hiw-coral) 0 3px, var(--hiw-night) 3px, var(--hiw-night-soft) 68%, var(--hiw-night-lit) 100%) !important;
}

section#how-it-works.hiw-how-it-works .hiw-result-kicker {
  color: var(--hiw-result) !important;
}

section#how-it-works.hiw-how-it-works .hiw-result-line {
  background: #dce6e2 !important;
}

section#how-it-works.hiw-how-it-works .hiw-result-base,
section#how-it-works.hiw-how-it-works .hiw-share-base {
  color: #f7fffc !important;
  background: linear-gradient(90deg, #245d56 0%, var(--hiw-result) 100%) !important;
}

section#how-it-works.hiw-how-it-works .hiw-ready::before {
  background: #8bdbc6 !important;
  box-shadow: 0 0 0 5px rgba(139, 219, 198, .14) !important;
}

section#how-it-works.hiw-how-it-works .hiw-share-option svg {
  color: #397dbf !important;
  background: rgba(104, 168, 232, .12) !important;
}

section#how-it-works.hiw-how-it-works .hiw-tool-track {
  animation: none !important;
  transform: translateY(var(--hiw-shift, 0px)) !important;
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(3).hiw-show-share .hiw-share-panel {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

section#how-it-works.hiw-how-it-works .hiw-step:nth-child(3):not(.hiw-show-share) .hiw-share-panel {
  opacity: 0 !important;
  transform: translateY(10px) !important;
}

@media (max-width: 820px) {
  section#tools.tw2-tool-section {
    background-size: auto, auto, 48px 48px, 48px 48px, auto !important;
  }

  section#tools.tw2-tool-section .tw2-stage {
    border-inline: 0 !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 520px) {
  section#how-it-works.hiw-how-it-works .hiw-step {
    border-radius: 12px !important;
  }

  section#how-it-works.hiw-how-it-works .hiw-step-copy {
    margin-top: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  section#tools.tw2-tool-section .tw2-stage,
  section#tools.tw2-tool-section .tw2-scene *,
  section#how-it-works.hiw-how-it-works .hiw-capture-input::after,
  section#how-it-works.hiw-how-it-works .hiw-capture-cta,
  section#how-it-works.hiw-how-it-works .hiw-tool-track {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  section#tools.tw2-tool-section *,
  section#tools.tw2-tool-section *::before,
  section#tools.tw2-tool-section *::after,
  section#how-it-works.hiw-how-it-works *,
  section#how-it-works.hiw-how-it-works *::before,
  section#how-it-works.hiw-how-it-works *::after {
    transition-duration: .01ms !important;
  }
}