/* ─────────────────────────────────────────────────────────────────────────────
   discovery.css — page-specific styling for /discovery, PLUS the shared shell's
   own scaling-system CSS (see the first block below).

   Why the shell CSS lives here instead of inline: _shell/page-template.html
   and services.html both carry that ruleset as a literal <style> tag inside
   <div class="global-css w-embed">. check-preship.py bans any inline STYLE
   tag on the six NEW_PAGES pages (discovery.html included) — a rule written
   before this shell migration existed, and this page could not touch that
   checker to fix it. Rather than fight the check or ship with FAIL(1), the
   identical ruleset moved here, unchanged, and the inline tag was dropped
   from discovery.html. Visual and behavioral result is the same as every
   other shell page; only the delivery mechanism (external vs. inline)
   differs. Same fix as faq.css. If check-preship.py's rule is ever updated
   for the new shell, this block can move back inline to match exactly.

   Loads after ptech-home.css. Reuses .ptech-rows / .ptech-row / .ptech-row__h
   for the FAQ list, and duplicates .offer-btn / .offer-cta / .cta-band
   verbatim from the homepage (same choice custom-software-orange-county.css
   made) — that button lives in index.html's own w-embed style block, not in
   ptech-home.css, so there is nothing shared to link to yet.

   Green stays the one chromatic moment. It appears exactly once on this page:
   the "10x" figure inside the guarantee callout, the single number the whole
   commercial offer turns on. Nowhere else here is green — not the price tags,
   not the stat row, not the buttons, not the tables.
   ───────────────────────────────────────────────────────────────────────────── */

/*----- Scaling System -----*/
/* Desktop */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 402;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* body */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html {scroll-behavior: initial;}
html, body {-webkit-font-smoothing: antialiased;}
svg {max-width: none; height: auto; box-sizing: border-box; vertical-align: middle;
  margin-inline: auto;
}

/* Selection */
::selection {
background-color: var(--gray);
color: var(--black);
text-shadow: none;
}
::-moz-selection {
background-color: var(--gray);
color: var(--black);
text-shadow: none;
}
/* Links */
a{
color: inherit;
text-decoration: none;
}
/* Underline Links */
[data-underline-link="target"],
[data-underline-link=""] {
  text-decoration: none;
  position: relative;
}
[data-underline-link="target"]::before,
[data-underline-link=""]::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: center;
  transform: scaleX(0) rotate(0.001deg);
}
@media (hover: hover) and (pointer: fine) {
  [data-underline-link=""]:hover::before {
    transform: scaleX(1) rotate(0.001deg);
  }
  [data-underline-link="hover"]:hover [data-underline-link="target"]::before {
    transform: scaleX(1) rotate(0.001deg);
  }
}
/* Buttons */
button {
	all: unset;
  cursor: pointer;
}
button: focus {
	outline: revert;
}
/* Buttons Scale on Hover */
[data-hover-scale] {
  transition: transform 0.3s ease;
  transform: scale(1);
}
@media (hover: hover) and (pointer: fine) {
  [data-hover-scale]:hover {
    transform: scale(0.9);
  }
}
/* Header - Menu - Hamburger */
.menu {
  pointer-events: none;
  transition: clip-path 1s cubic-bezier(.9, 0, .1, 1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

body[data-menu-status="open"] .menu {
  pointer-events: auto;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.menu-list__link {
  transform: translateY(100%) rotate(5deg);
  transition: transform 0.75s cubic-bezier(.7, 0, .3, 1);
}

body[data-menu-status="open"] .menu-list__link {
  transform: translateY(0%) rotate(0.001deg);
}

.menu-list__item:nth-child(1) .menu-list__link { transition-delay: 0s; }
.menu-list__item:nth-child(2) .menu-list__link { transition-delay: .05s; }
.menu-list__item:nth-child(3) .menu-list__link { transition-delay: .1s; }
.menu-list__item:nth-child(4) .menu-list__link { transition-delay: .15s; }

body[data-menu-status="open"]
.menu-list__item:nth-child(1) .menu-list__link { transition-delay: .3s; }

body[data-menu-status="open"]
.menu-list__item:nth-child(2) .menu-list__link { transition-delay: .35s; }

body[data-menu-status="open"]
.menu-list__item:nth-child(3) .menu-list__link { transition-delay: .4s; }

body[data-menu-status="open"]
.menu-list__item:nth-child(4) .menu-list__link { transition-delay: .45s; }

/* 3d Scroll Reveal */
.rolling-char {
  display: inline-block;
  backface-visibility: hidden;
  will-change: transform;
}

.rolling-line {
  overflow: visible !important;
  display: block;
}

/* Lang Switcher */
[data-lang-hover]:hover .lang-switcher__box {
  opacity: 1;
  visibility: visible;
}

[data-lang-hover]:hover .lang-switcher__box-inner {
  transform: translateY(0) scale(1);
}

/* ── The answer-first lead paragraph ─────────────────────────────────────────
   PATTERNS.md keeps this as a standard reusable class, but its only existing
   definition lives in ptech-pages.css (the old shell, never linked here).
   Minimal treatment so it isn't unstyled text: slightly larger, full-strength
   ink color, comfortable measure. If this gets promoted into ptech-home.css
   later, this rule just becomes redundant.
   ───────────────────────────────────────────────────────────────────────────── */

.answer-first {
  max-width: 46em;
  margin: 0 auto 1.4em;
  font-size: 1.08em;
  color: var(--ptech-bone);
}

.answer-first strong { font-weight: 600; }

/* ── Prose blocks ─────────────────────────────────────────────────────────────
   Sections that are mostly explanation rather than a list of named items —
   left-aligned at a comfortable reading width. The centered max-70 header
   block above each section is for the lede only.
   ───────────────────────────────────────────────────────────────────────────── */

.disc-prose {
  max-width: 46em;
  margin: 2.2em auto 0;
}

.disc-prose p {
  margin: 0 0 1.3em;
  color: var(--ptech-bone-dim);
}

.disc-prose p:last-child { margin-bottom: 0; }

.disc-prose strong { color: var(--ptech-bone); font-weight: 600; }

.disc-prose a[data-underline-link] { color: var(--ptech-bone); }

/* ── Numbered lists (deliverables, the two-week timeline) ────────────────────
   Plain semantic <ol>, styled to sit at the same measure and color as the
   prose blocks around it, each item's lead phrase bolded to full ink.
   ───────────────────────────────────────────────────────────────────────────── */

.disc-list {
  margin: 0 0 1.6em;
  padding-left: 1.3em;
  list-style: decimal;
}

.disc-list li {
  margin-bottom: 1em;
  padding-left: 0.3em;
  color: var(--ptech-bone-dim);
  line-height: 1.6;
}

.disc-list li:last-child { margin-bottom: 0; }

.disc-list li strong { color: var(--ptech-bone); font-weight: 600; }

/* ── Guarantee callout ────────────────────────────────────────────────────────
   The one paid commercial term on the page that has to read as safe to act
   on. Left border and slightly lifted panel mark it as a distinct claim, not
   just another paragraph; the "10x" figure inside carries the page's one
   green accent.
   ───────────────────────────────────────────────────────────────────────────── */

.disc-callout {
  max-width: 46em;
  margin: 0 auto 0.4em;
  padding: 1.3em 1.6em;
  border-left: 2px solid var(--ptech-hair);
  background: var(--ptech-ink-3);
}

.disc-callout p {
  margin: 0;
  font-size: 1.05em;
}

.disc-accent {
  color: var(--ptech-green-glow);
}

/* ── Stat strip (the intro section's at-a-glance numbers) ────────────────────
   ───────────────────────────────────────────────────────────────────────────── */

.disc-stats {
  margin-top: 2.6em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ptech-hair);
  border-top: 1px solid var(--ptech-hair);
  border-bottom: 1px solid var(--ptech-hair);
}

.disc-stat {
  background: var(--ptech-ink);
  padding: 1.8em 1.4em;
  text-align: center;
}

.disc-stat b {
  display: block;
  font-size: 2em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.3em;
}

.disc-stat span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ptech-bone-dim);
}

@media (max-width: 767px) {
  .disc-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .disc-stats { grid-template-columns: 1fr; }
}

/* ── Comparison tables (free-scope vs. discovery; build-cost ranges) ─────────
   ───────────────────────────────────────────────────────────────────────────── */

.disc-table-wrap {
  margin-top: 2.4em;
  overflow-x: auto;
}

.disc-table {
  width: 100%;
  min-width: 44em;
  border-collapse: collapse;
  border-top: 1px solid var(--ptech-hair);
}

.disc-table th,
.disc-table td {
  text-align: left;
  vertical-align: top;
  padding: 1em 1.3em 1em 0;
  border-bottom: 1px solid var(--ptech-hair);
  color: var(--ptech-bone-dim);
}

.disc-table thead th {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  padding-top: 0;
  padding-bottom: 0.9em;
}

.disc-table tbody th {
  color: var(--ptech-bone);
  font-weight: 500;
  white-space: nowrap;
}

.disc-table td strong { color: var(--ptech-bone); font-weight: 600; }

@media (max-width: 767px) {
  .disc-table { min-width: 40em; }
}

/* ── Disqualify list ("Who this isn't for") ───────────────────────────────────
   ───────────────────────────────────────────────────────────────────────────── */

.disc-disqualify {
  max-width: 46em;
  margin: 2.2em auto 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--ptech-hair);
}

.disc-disqualify li {
  padding: 1.3em 0;
  border-bottom: 1px solid var(--ptech-hair);
  color: var(--ptech-bone-dim);
  line-height: 1.6;
}

.disc-disqualify li strong { color: var(--ptech-bone); font-weight: 600; }

.disc-disqualify a[data-underline-link] { color: var(--ptech-bone); }

/* ── Sources ──────────────────────────────────────────────────────────────── */

.disc-sources {
  max-width: 46em;
  margin: 0.4em auto 0;
  padding-left: 1.3em;
}

.disc-sources li {
  margin-bottom: 0.8em;
  color: var(--ptech-bone-dim);
  font-size: 0.86rem;
  line-height: 1.6;
}

.disc-sources a {
  color: var(--ptech-bone-dim);
  text-decoration: underline;
  text-decoration-color: var(--ptech-hair);
  text-underline-offset: 0.15em;
}

.disc-sources a:hover { color: var(--ptech-bone); text-decoration-color: currentColor; }

/* ── FAQ / CTA meta lines ─────────────────────────────────────────────────── */

.disc-meta {
  margin-top: 1.6em;
  color: var(--ptech-bone-dim);
}

.disc-meta a[data-underline-link] { color: var(--ptech-bone); }

/* ── CTA band — same button language as the homepage's offer section.
   Duplicated here (rather than shared) because it lives in an index.html
   w-embed style block, not in ptech-home.css. Same choice
   custom-software-orange-county.css made. ───────────────────────────────────
   ───────────────────────────────────────────────────────────────────────────── */

.cta-band .container {
  border-top: 1px solid var(--ptech-hair);
}

.offer-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 0.4em;
}



.cta-band .disc-meta { text-align: center; }

@media (max-width: 767px) {
  .disc-prose,
  .disc-callout,
  .disc-disqualify,
  .disc-sources,
  .disc-stats,
  .disc-table-wrap { margin-top: 1.8em; }
}