/* Ctrak marketing landing page — WB-067, "Blueprint" visual direction.
   Values (colors, fonts, drafting-grid background, corner-bracket frame,
   section numbering, dimension-line hero tag) are taken directly from the
   approved Blueprint mockup, not reinterpreted. */

:root {
  --ground: #122a44;
  --ground-2: #0d2036;
  --line: #7fa8c9;
  --line-dim: #3f6484;
  --paper: #eaf2f7;
  --paper-dim: #b9cfdd;
  --amber: #e8971c;
  --amber-hover: #fca82f;
  --display-font: "Century Gothic", "Trebuchet MS", "Segoe UI", sans-serif;
  --body-font: "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--body-font);
  color: var(--paper);
  line-height: 1.5;
  /* Subtle drafting grid -- 1px lines every 32px, white at ~4% opacity,
     over the solid navy ground. Applied site-wide (not just the hero) so
     the whole page reads as one continuous blueprint sheet. */
  background:
    linear-gradient(var(--ground), var(--ground)),
    repeating-linear-gradient(0deg, transparent, transparent 31px, #ffffff0a 31px, #ffffff0a 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, #ffffff0a 31px, #ffffff0a 32px);
}

a {
  color: inherit;
}

h1, h2, h3 {
  line-height: 1.25;
  font-family: var(--display-font);
  color: var(--paper);
}

section {
  padding: 48px 24px;
  max-width: 960px;
  margin: 0 auto;
}

/* Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  /* White (well, --paper, the app's own light-background token), not navy
     like the rest of this page -- the logo's dark-navy "C"/"t" fill
     (#1A2235) is nearly the same value as the navy page background, so
     even with its glow outline it read as barely visible ("the logo seems
     to be hiding there"). This is exactly the pairing CtrakLogo.tsx's own
     design already anticipates: the glow exists for DARK surfaces
     (sidebar); on a LIGHT surface the plain navy/amber fill has enough
     contrast on its own, same as every light-background usage in the real
     app (TopBar, auth pages). Scoped to the header only -- the rest of
     the page (hero downward) stays the navy Blueprint palette. */
  background: var(--paper);
  border-bottom: 1px solid var(--line-dim);
}

.brand {
  display: inline-flex;
  align-items: center;
}

/* Real WB-066 logo asset (ported into this page's markup, see index.html's
   comment) sized to read clearly in the header -- was rendering as plain
   19px text before. Bumped up again after the background fix above, since
   a bigger mark reads better against the light header than it did as a
   near-invisible dark shape on dark. */
.brand-logo {
  height: 68px;
  width: auto;
}

/* Log In / Start free trial sit on the header's own light background now,
   not the page's navy -- .btn-outline's default styling (light text/
   border, meant for the navy page) would be nearly invisible here, so the
   outline button gets dark-on-light colors scoped to just this header.
   .btn-primary (amber fill, dark text) already has enough contrast on
   either background and is intentionally left unchanged. */
.site-header .btn-outline {
  color: var(--ground);
  border-color: var(--ground);
}

.site-header .btn-outline:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 11px 18px;
  min-height: 44px;
  border: 1px solid var(--line);
  color: var(--paper);
  background: transparent;
  transition: background 150ms ease, border-color 150ms ease;
}

.btn-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1204;
}

.btn-primary:hover {
  background: var(--amber-hover);
  border-color: var(--amber-hover);
}

.btn-outline:hover {
  border-color: var(--paper);
}

.btn-large {
  font-size: 14px;
  padding: 15px 28px;
}

/* Hero */

.hero {
  text-align: center;
  padding-top: 72px;
  padding-bottom: 40px;
}

.hero h1 {
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.18;
  margin: 0 auto 22px;
  /* Was 18ch -- far narrower than this actual headline needs, forcing 5
     wrapped lines. 840px (with max-width:100% for narrow viewports) wraps
     it to 2-3 lines instead, without touching the copy itself. */
  max-width: 840px;
  text-wrap: balance;
}

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 32px;
  color: var(--paper-dim);
}

/* Sections */

.section {
  border-top: 1px solid var(--line-dim);
  padding-top: 56px;
  padding-bottom: 56px;
  position: relative;
}

.section-title {
  font-size: 22px;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

.section-sub {
  color: var(--paper-dim);
  font-size: 0.95rem;
  margin: 0 0 40px;
}

/* Centered variant -- Pricing and Try the demo. */
.section--centered .section-title,
.section--centered .section-sub {
  text-align: center;
}

/* Corner-bracket frame -- screenshots and pricing cards. 1px border plus
   small L-shaped brackets at top-left/bottom-right only. Amber by default
   (screenshots, and the featured pricing card); .frame--dim swaps the
   brackets to the regular line color for the two non-featured cards. */
.frame {
  position: relative;
  border: 1px solid var(--line);
}

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--amber);
}

.frame::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.frame::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

.frame--dim {
  border-color: var(--line-dim);
}

.frame--dim::before,
.frame--dim::after {
  border-color: var(--line-dim);
}

/* Pricing card hover -- direct feedback: hovering a card only moved it
   (transform/shadow, above) and left border/button/badge untouched, so
   Growth (permanently amber-bordered + amber Select + the badge) looked
   like the only card that ever "reacted" no matter which card was
   actually hovered. Scoped to .price-card specifically -- .frame/
   .frame--dim are also used by the screenshots section, which has no
   hover-reactive elements and shouldn't gain this treatment. */
.price-card.frame--dim:hover {
  border-color: var(--amber);
}

.price-card.frame--dim:hover::before,
.price-card.frame--dim:hover::after {
  border-color: var(--amber);
}

/* Growth's border is already amber at rest -- intensify to the same
   hover shade .btn-primary:hover already uses, so it still visibly
   reacts rather than looking inert next to the other two cards now
   gaining a hover border of their own. */
.price-card-featured:hover {
  border-color: var(--amber-hover);
}

.price-card-featured:hover::before,
.price-card-featured:hover::after {
  border-color: var(--amber-hover);
}

.price-card-featured:hover .price-badge {
  background: var(--amber-hover);
}

/* Direct follow-up: Growth's border/notches/Select/badge are amber at
   REST (not just on its own hover), so while hovering a DIFFERENT card
   they stayed amber too -- reading as if Growth was still emphasized/
   reacting even when attention was clearly elsewhere. While hovering
   Starter or Pro specifically, Growth drops to the same neutral look
   those two cards already use at rest (dim border/notches, outline-style
   Select, muted badge), and returns to normal the moment nothing (or
   Growth itself) is hovered. :not(.price-card-featured) is what scopes
   this to "some OTHER card is hovered" -- hovering Growth's own Select
   button is still hovering Growth, so this rule doesn't fire then. */
.pricing-grid:has(.price-card:not(.price-card-featured):hover) .price-card-featured {
  border-color: var(--line-dim);
}

.pricing-grid:has(.price-card:not(.price-card-featured):hover) .price-card-featured::before,
.pricing-grid:has(.price-card:not(.price-card-featured):hover) .price-card-featured::after {
  border-color: var(--line-dim);
}

.pricing-grid:has(.price-card:not(.price-card-featured):hover) .price-card-featured .price-badge {
  background: var(--line-dim);
  color: var(--paper);
}

.pricing-grid:has(.price-card:not(.price-card-featured):hover) .price-card-featured .btn-primary.btn-select {
  background: transparent;
  border-color: var(--line);
  color: var(--paper);
}

/* Screenshots / "What it looks like" -- large sticky-pinned image with a
   small caption overlaid on it (rebuilt; the first version made the text
   column the dominant element and left a lot of dead space beside/below
   a comparatively small image -- direct user feedback after seeing it
   live). #sticky-scroll-area is a tall spacer (one 100vh "screen" of
   scroll per feature, plus one extra so the sticky stage has room to
   travel); index.html's script computes which pair/caption is active
   purely from how far scrolled we are through that spacer -- not from
   JS-measured image heights or IntersectionObserver thresholds on
   separate text blocks, both of which the first version relied on. */

.feature-intro {
  margin: 0 auto 48px;
  padding: 0 24px;
  max-width: 960px;
}

.feature-eyebrow {
  font-family: var(--display-font);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 10px;
}

/* Full-bleed: .screenshots overrides the generic `section` max-width/
   side-padding so the carousel below can span edge-to-edge ("I want the
   picture to be browser area" -- still the requirement, unchanged by the
   vertical-to-horizontal rework below). .feature-intro above restores its
   own inset so the heading still reads like the rest of the page's
   sections. */
.screenshots {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* "What it looks like" -- a horizontal scroll-snap carousel.

   This replaces a vertical pinned-image approach (position:sticky, then
   position:fixed, a capped stage height, a full-viewport masking backdrop,
   viewport-scaled travel math) that went through 8 rounds of real, each-
   one-different bugs: a sticky containing-block sizing bug, aspect-ratio/
   JS-height conflicts, content bleed-through around a capped fixed
   element, a z-index stacking bug once that was fixed, and a washed-out
   rendering issue after THAT was fixed. Every individual bug had a real,
   correct fix -- the pattern across all of them is that pinning a capped
   element and precisely timing its release is just a lot of interacting
   edge cases for what the actual requirement is: show 3 real product
   screenshots, let the visitor move between them.

   A horizontal carousel needs none of that machinery. Slides sit side by
   side in normal document flow; moving between them is the browser's own
   native `scroll-snap-type: x mandatory` behavior (scroll wheel + shift,
   trackpad/touch swipe, or the arrow buttons/dots below) -- not a custom
   pin/release mechanism built from scratch. No position:fixed, no
   backdrop, no z-index layering, and (since nothing hijacks the page's
   own vertical scroll) no separate narrow/tall-viewport fallback layout
   either -- the same carousel works at every breakpoint. */

.carousel {
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Native scrollbar hidden -- the dots/arrows are the intended controls,
     and a visible horizontal scrollbar under a full-bleed image reads as
     an implementation detail, not a deliberate part of the design. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  height: 85vh;
  max-height: 820px;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ground);
  /* Breathing room on all sides -- without it, a wide desktop screenshot
     (max-width:100%) can butt right up against the slide's own edges,
     leaving no room for .pair-mobile-frame's `right: -28px` overlap
     offset before `overflow: hidden` above clips it. Confirmed via a real
     screenshot: the mobile inset's right portion was cut off, hidden
     behind/past the slide boundary and the next/prev arrow buttons. */
  padding: 5vh 60px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--ground-2);
  color: var(--paper);
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
}

.carousel-arrow:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.carousel-arrow:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.carousel-arrow--prev {
  left: 16px;
}

.carousel-arrow--next {
  right: 16px;
}

.pair-inner {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}

.pair-desktop {
  display: block;
  max-width: 100%;
  max-height: calc(85vh - 12vh);
  width: auto;
  height: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.pair-mobile-frame {
  position: absolute;
  right: -28px;
  bottom: -36px;
  width: 20%;
  min-width: 110px;
  max-width: 200px;
  padding: 4px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
}

.pair-mobile {
  display: block;
  width: 100%;
  height: auto;
}

.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 72px 6vw 40px;
  max-width: 460px;
  background: linear-gradient(to top, rgba(13, 32, 54, 0.94) 0%, rgba(13, 32, 54, 0.72) 55%, rgba(13, 32, 54, 0) 100%);
  pointer-events: none;
}

.carousel-caption h3 {
  font-size: 1.4rem;
  margin: 0 0 10px;
}

.carousel-caption p {
  color: var(--paper-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.sticky-progress {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
}

.sticky-progress-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.sticky-progress-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-dim);
  transition: background 0.2s ease, transform 0.2s ease;
}

.sticky-progress-dot:hover span {
  background: var(--line);
}

.sticky-progress-dot.is-active span {
  background: var(--amber);
  transform: scale(1.4);
}

.sticky-progress-dot:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .carousel-slide {
    height: 60vh;
    min-height: 320px;
  }

  .pair-desktop {
    max-height: calc(60vh - 8vh);
  }

  .carousel-caption {
    padding: 48px 24px 28px;
    max-width: none;
  }

  .carousel-arrow {
    display: none;
  }
}

/* Pricing */

/* Wider than the generic `section` 960px cap -- 3 fixed-320px cards +
   2 24px gaps need 1008px to sit in one row. Without this, .pricing-grid's
   own max-width below is moot: a flex child can never exceed its parent's
   actual rendered width regardless of its own larger max-width. */
.pricing {
  max-width: 1100px;
}

.pricing-included {
  margin-bottom: 40px;
}

.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

.price-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 320px;
  max-width: 320px;
  background: var(--ground-2);
  padding: 32px 28px 28px;
  text-align: center;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.price-card-featured {
  box-shadow: 0 8px 20px rgba(232, 151, 28, 0.18);
}

.price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #1a1204;
  font-family: var(--display-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 16px;
  white-space: nowrap;
}

.price-card h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.price-tagline {
  font-size: 0.8125rem;
  color: var(--paper-dim);
  margin: 0 0 18px;
  min-height: 2rem;
}

.price-card .price {
  margin: 0 0 20px;
}

.price-amount {
  display: block;
  font-family: var(--display-font);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--paper);
}

.price-period {
  display: block;
  font-size: 0.75rem;
  color: var(--paper-dim);
  line-height: 1.3;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex-grow: 1;
  text-align: left;
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.845rem;
  color: var(--paper-dim);
  border-bottom: 1px dotted var(--line-dim);
}

.price-features li:last-child {
  border-bottom: none;
}

.price-check {
  color: var(--amber);
  font-weight: 700;
}

.pricing-contact {
  font-size: 0.8125rem;
  color: var(--paper-dim);
  margin: 0 0 14px;
  line-height: 1.4;
}

.pricing-contact a {
  color: var(--amber);
  font-weight: 700;
  text-decoration: underline;
}

.price-card .btn-select {
  margin-top: auto;
}

/* Starter/Pro's Select is .btn-outline, whose only global :hover effect
   is a border-color tweak (transparent background stays transparent) --
   effectively invisible next to Growth's .btn-primary, which fills solid
   amber and visibly darkens on hover. Scoped to .price-card .btn-select
   specifically so this doesn't touch .btn-outline elsewhere (e.g. the
   header's Log In button, which should keep its own subtler hover).
   Triggers on hovering the CARD (.price-card.frame--dim:hover), not just
   the button directly -- direct feedback: hovering anywhere on the card
   should highlight the button along with the border, not leave it
   waiting for the mouse to land on the button specifically. Hovering the
   button itself still works too, since the button is inside the card
   (a descendant hover still counts as hovering the ancestor). */
.price-card.frame--dim:hover .btn-outline.btn-select {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1204;
}

/* Same "hover the card, not just the button" treatment for Growth's own
   Select -- .btn-primary:hover alone only fired when the button itself
   was hovered, leaving it inert while the border/badge above already
   react to hovering anywhere on the card. */
.price-card-featured:hover .btn-primary.btn-select {
  background: var(--amber-hover);
  border-color: var(--amber-hover);
}

/* Demo */

.demo {
  text-align: center;
}

.demo .btn {
  margin-top: 16px;
}

/* Footer */

.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--line-dim);
  font-size: 0.85rem;
  border-top: 1px solid var(--line-dim);
}

.site-footer a {
  color: var(--amber);
  font-weight: 600;
  margin-left: 8px;
}