/* ==========================================================================
   PLAIN SIGHT — VISUAL LAYER
   Loaded after mobile.css on every page. Holds three things:
   1. Hero alignment, so the first section lines up with the sections below.
   2. Section tones (tint and dark) for more contrast down the page.
   3. The diagram language from the explainer video: blue line work, a light
      blue node with a halo, dashed violet connectors, violet dots, and tag
      shapes. Every diagram is inline SVG drawn for this site.
   ========================================================================== */

:root {
  --tint:           #E8ECF5;   /* pale blue section ground */
  --dg-node:        #80A8FF;   /* filled center node */
  --dg-node-soft:   #A9C3FF;   /* secondary nodes */
  --dg-halo:        #B9CCFF;   /* halo ring around a node */
  --dg-violet-soft: #A897E6;   /* lighter violet dots */
  --dg-house:       #C4C0B8;   /* neighbouring buildings */
}

@media (prefers-color-scheme: dark) {
  :root {
    --tint:           #222A38;
    --dg-node:        #5F8EF0;
    --dg-node-soft:   #3B5487;
    --dg-halo:        #4A659C;
    --dg-violet-soft: #7D6CC0;
    --dg-house:       #4A515C;
  }
}

/* ==========================================================================
   1. HERO ALIGNMENT
   The hero is a flex row, so its container shrank to the width of the text
   and centered itself. Full width puts the hero on the same left edge as
   every section beneath it.
   ========================================================================== */

.hero > .container,
.path-hero > .container {
  width: 100%;
}

.hero .hero-content {
  margin-left: 0;
}

/* Hero with a diagram on the right */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: var(--space-16);
  align-items: center;
}

.hero-split .hero-content,
.hero-split .path-hero-content {
  max-width: 640px;
}

.hero-art {
  width: 100%;
}

.hero-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero.has-art .hero-bg,
.path-hero.has-art .path-hero-bg {
  display: none;
}

/* ==========================================================================
   2. SECTION TONES
   ========================================================================== */

section.tone-tint {
  background: var(--tint);
}

section.tone-tint .work-card,
section.tone-tint .step,
section.tone-tint .pricing-card {
  background: var(--bg-surface);
}

section.tone-surface {
  background: var(--bg-surface);
}

/* Dark slate sections. Re-points every token in the subtree so the section's
   own rules pick up dark-ground values without being edited. */
section.tone-dark {
  background: var(--surface-dark);
  border-top-color: var(--surface-dark);
  --bg-primary:     var(--surface-dark);
  --bg-surface:     #262B33;
  --bg-inset:       #2B313A;
  --border:         var(--surface-dark-border);
  --border-strong:  #434A54;
  --text-primary:   var(--on-dark-primary);
  --text-secondary: var(--on-dark-secondary);
  --text-tertiary:  var(--on-dark-tertiary);
  --text-muted:     var(--on-dark-tertiary);
  --ps-white:       var(--on-dark-primary);
  --ps-blue:        var(--on-dark-accent);
  --ps-violet:      var(--on-dark-violet);
  --ps-violet-dark: var(--on-dark-violet);
  --circle-stroke:  var(--on-dark-accent);
  --dg-node:        #5F8EF0;
  --dg-node-soft:   #3B5487;
  --dg-halo:        #4A659C;
  --dg-violet-soft: #7D6CC0;
  --dg-house:       #4A515C;
}

section.tone-dark .btn-primary:hover {
  color: var(--surface-dark);
}

/* FAQ page: alternate groups sit on the tint */
.faq-group--surface {
  background: var(--tint);
}

/* ==========================================================================
   3. DIAGRAMS
   ========================================================================== */

.dg { overflow: visible; }

.dg-line   { fill: none; stroke: var(--ps-blue); stroke-width: 1.6; }
.dg-thin   { fill: none; stroke: var(--ps-blue); stroke-width: 1.1; stroke-opacity: 0.55; }
.dg-faint  { fill: none; stroke: var(--ps-blue); stroke-width: 1; stroke-opacity: 0.22; }
.dg-dash   { fill: none; stroke: var(--ps-violet-dark); stroke-width: 1.3; stroke-dasharray: 4 6; stroke-linecap: round; opacity: 0.85; }
.dg-node   { fill: var(--dg-node); stroke: var(--ps-blue); stroke-width: 2.4; }
.dg-node-s { fill: var(--dg-node-soft); stroke: var(--ps-blue); stroke-width: 1.6; }
.dg-halo   { fill: none; stroke: var(--dg-halo); stroke-width: 1.6; }
.dg-ring   { fill: none; stroke: var(--ps-blue); stroke-width: 1.4; stroke-opacity: 0.45; }
.dg-hollow { fill: var(--bg-primary); stroke: var(--ps-blue); stroke-width: 1.8; }
.dg-panel  { fill: var(--bg-surface); stroke: var(--ps-blue); stroke-width: 1.6; }
.dg-card   { fill: var(--bg-surface); stroke: var(--ps-violet-dark); stroke-width: 1.4; }
.dg-tint   { fill: var(--dg-halo); fill-opacity: 0.35; stroke: var(--ps-blue); stroke-width: 1.6; }
.dg-house  { fill: none; stroke: var(--dg-house); stroke-width: 1.1; }
.dg-ground { stroke: var(--dg-house); stroke-width: 1; }
.dg-blue   { fill: var(--ps-blue); }
.dg-violet { fill: var(--ps-violet-dark); }
.dg-violet-s { fill: var(--dg-violet-soft); }
.dg-bar    { stroke: var(--dg-violet-soft); stroke-width: 1.6; stroke-linecap: round; }
.dg-barb   { stroke: var(--ps-blue); stroke-opacity: 0.35; stroke-width: 6; stroke-linecap: round; }

.dg-text {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  fill: var(--text-primary);
}

.dg-small {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  fill: var(--ps-violet-dark);
}

.dg-query {
  font-family: var(--font-mono);
  font-size: 19px;
  fill: var(--text-primary);
}

.dg-mark {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 500;
  fill: var(--ps-blue);
}

/* Motion. Dashed lines drift toward the node, rings breathe. Both stop for
   anyone who has asked their system for reduced motion. */
@keyframes dg-flow  { to { stroke-dashoffset: -40; } }
@keyframes dg-pulse {
  0%   { transform: scale(0.82); opacity: 0; }
  35%  { opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

.dg-flow { animation: dg-flow 2.6s linear infinite; }

.dg-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: dg-pulse 3.6s ease-out infinite;
}

.dg-pulse.d2 { animation-delay: 1.2s; }
.dg-pulse.d3 { animation-delay: 2.4s; }

@media (prefers-reduced-motion: reduce) {
  .dg-flow, .dg-pulse { animation: none; }
  .dg-pulse { opacity: 0.35; }
}

/* Section layouts that pair copy with a diagram */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--space-16);
  align-items: center;
}

.split-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.split-caption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ps-violet-dark);
  text-align: center;
}

/* Small icons at the top of the approach steps */
.step-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-6);
}

/* Mini diagrams inside the Before / Now comparison */
.compare-art {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-bottom: var(--space-6);
}

/* Diagram above the closing call to action */
.cta-art {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto var(--space-8);
}

@media (max-width: 1024px) {
  .hero-split,
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .hero-art,
  .split-art {
    max-width: 440px;
  }
}

@media (max-width: 768px) {
  .hero-art {
    max-width: 340px;
    margin: 0 auto var(--space-10);
  }

  .split-art {
    max-width: 360px;
    margin: 0 auto;
  }

  .hero-split {
    gap: 0;
  }
}

/* Approach steps: number on the left, icon on the right */
.step-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.step-head .step-icon {
  margin-bottom: 0;
  width: 60px;
  height: 60px;
}

/* Dark sections: table and comparison rules use the dark border */
section.tone-dark .tc-item {
  border-right-color: var(--border-strong);
}

/* Take control list wraps cleanly in the narrower split column */
.split .tc-items {
  flex-wrap: wrap;
  row-gap: var(--space-3);
}

.split .tc-item {
  white-space: nowrap;
}

/* Before / Now diagrams share one height so the labels line up */
.compare-art {
  height: 220px;
  width: auto;
  max-width: 100%;
}