/* The templated pages (features, trades, guides, tools, about, legal), in the
   home page's design. Loaded after home.css, which carries the tokens, nav,
   footer and buttons. Class names are the generator's (build.mjs). */

.page { padding-top: 0; }
.wrap-narrow { width: 100%; max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: 72px; }
.sec-tight { padding-block: 24px; }
.sec-white { background: var(--white); border-block: 1px solid var(--line); }
.sec-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.sec-head h2 { font-size: 36px; }
.lede { font-size: 18px; line-height: 1.6; color: var(--body); }
.sec-head .lede { margin-top: 12px; }
.icon { width: 20px; height: 20px; }
.btn .icon { width: 18px; height: 18px; }
.btn-lg { padding: 16px 24px; }

/* Page hero */
.page-hero { position: relative; overflow: hidden; padding-block: 64px 56px; background: linear-gradient(var(--white), var(--cream)); }
.page-hero .wrap, .page-hero .wrap-narrow { position: relative; }
.page-hero h1 { max-width: 16ch; font-size: clamp(38px, 4vw, 52px); }
.page-hero h1 em { font-style: normal; color: var(--accent); }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero .lede { max-width: 640px; margin-top: 18px; font-size: 19px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-hero-art { position: absolute; top: 50%; right: -4%; width: 46%; max-width: 640px; opacity: .55; transform: translateY(-50%); pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 35%); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.crumbs a:hover { color: var(--teal); }
.crumbs i { font-style: normal; color: #CFCAC0; }
.crumbs span { color: var(--navy); }

/* Prose */
.prose { max-width: 780px; margin-inline: auto; font-size: 17px; line-height: 1.7; color: var(--body); }
.prose p + p, .prose ul + p, .prose ol + p, .prose p + ul { margin-top: 20px; }
.prose strong { color: var(--navy); font-weight: 700; }
.prose a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose h3 { margin: 36px 0 12px; font-size: 22px; font-weight: 800; color: var(--navy); }
.prose ul, .prose ol { margin-block: 20px; padding-left: 0; }
.prose ol { padding-left: 24px; list-style: decimal; }
.prose ul li { position: relative; padding-left: 26px; }
.prose li + li { margin-top: 10px; }
.prose ul li::before { content: ""; position: absolute; top: 11px; left: 4px; width: 9px; height: 9px; background: var(--accent); border-radius: 50%; }
.prose img { margin-block: 24px; border: 1px solid var(--line-strong); border-radius: 16px; }
.sec-head + .prose { max-width: 780px; }

/* Feature cards */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.feat:hover { border-color: var(--teal); box-shadow: 0 10px 24px rgba(18, 43, 67, .08); }
.feat-ico { display: grid; place-items: center; width: 44px; height: 44px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--teal); }
.feat-ico .icon { width: 22px; height: 22px; }
.feat h3 { font-size: 18px; font-weight: 700; }
.feat p { font-size: 15px; line-height: 1.55; color: var(--body); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step-item { position: relative; padding: 24px 24px 24px 76px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; counter-increment: step; }
.step-item::before { content: counter(step); position: absolute; top: 22px; left: 24px; display: grid; place-items: center; width: 36px; height: 36px; background: var(--accent); border-radius: 50%; font-size: 15px; font-weight: 800; color: var(--white); }
.step-item h3 { margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.step-item p { font-size: 15px; line-height: 1.55; color: var(--body); }

/* Callouts and screenshots */
.callout { max-width: 780px; margin-inline: auto; padding: 22px 26px; background: var(--sand); border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0; }
.callout p { font-size: 16px; line-height: 1.65; color: var(--body); }
.callout strong { color: var(--navy); }
.callout a { color: var(--teal); text-decoration: underline; }
.shot { margin: 0; }
.shot img { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 18px 44px rgba(18, 43, 67, .12); }
.shot figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }

/* Guides index */
.guide-group + .guide-group { margin-top: 48px; }
.guide-group > h2 { margin-bottom: 18px; font-size: 26px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.guide-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; transition: border-color .15s, box-shadow .15s; }
.guide-card:hover { border-color: var(--teal); box-shadow: 0 10px 24px rgba(18, 43, 67, .08); color: inherit; }
.guide-card h3 { font-size: 18px; font-weight: 700; line-height: 1.35; }
.guide-card p { font-size: 15px; line-height: 1.55; color: var(--body); }
.guide-card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 700; color: var(--teal); }
.guide-card .more .icon { width: 16px; height: 16px; }

/* Keep exploring */
.explore-head { margin-bottom: 24px; }
.explore-head h2 { font-size: 30px; }
.explore { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.explore-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; font-weight: 600; transition: border-color .15s; }
.explore-link:hover { border-color: var(--teal); color: var(--navy); }
.explore-link .icon { flex: none; width: 18px; height: 18px; color: var(--teal); }

/* FAQ: the home page's slate band */
#faq.sec { background: #E5E5E0; }
#faq .sec-head .lede { color: var(--body); }
.faq-list { max-width: 860px; margin-inline: auto; }
.faq-item { border-top: 1px solid #CFCBBF; }
.faq-item:last-child { border-bottom: 1px solid #CFCBBF; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 0; border: 0; background: none; color: var(--navy); font: 700 18px Manrope, system-ui, sans-serif; text-align: left; cursor: pointer; }
.faq-q .chev { flex: none; display: inline-flex; transition: transform .2s; }
.faq-q .chev .icon { width: 18px; height: 18px; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { display: none; padding-bottom: 20px; }
.faq-item.open .faq-a { display: block; }
.faq-a p { font-size: 16px; line-height: 1.6; color: var(--body); }
.faq-a a { color: var(--teal); text-decoration: underline; }

/* Closing band */
.cta-band { padding-block: 80px; background: var(--navy); color: var(--white); text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-band p { max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--on-navy); }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.cta-note { font-size: 14px; }

/* Legal */
.legal { font-size: 16px; line-height: 1.7; color: var(--body); }
.legal h2 { margin: 40px 0 12px; font-size: 24px; }
.legal h2:first-child { margin-top: 0; }
.legal p + p, .legal ul + p { margin-top: 16px; }
.legal ul, .legal ol { margin-block: 14px; padding-left: 22px; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--navy); }
.legal a { color: var(--teal); text-decoration: underline; }

/* Tool calculators (the WIP and retainage calculators) */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); overflow: hidden; background: var(--white); border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: 0 16px 40px rgba(18, 43, 67, .08); }
.calc-in { padding: 30px; background: var(--sand); }
.calc-out { padding: 30px; }
.calc-field + .calc-field { margin-top: 16px; }
.calc-field label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; }
.calc-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); color: var(--navy); font: 600 16px Manrope, system-ui, sans-serif; }
.calc-field input:focus { border-color: var(--teal); outline: 0; }
.calc-note { margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.calc-row .k { font-size: 14px; font-weight: 600; color: var(--body); }
.calc-row .v { font-size: 20px; font-weight: 800; white-space: nowrap; }
.calc-row.hero-row { padding: 16px 0 18px; }
.calc-row.hero-row .k { font-size: 15px; font-weight: 700; color: var(--navy); }
.calc-row.hero-row .v { font-size: 36px; letter-spacing: -.03em; color: var(--accent); }

@media (max-width: 960px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero-art { display: none; }
}

@media (max-width: 720px) {
  .sec { padding-block: 56px; }
  .sec-head { margin-bottom: 28px; }
  .sec-head h2, .explore-head h2 { font-size: 28px; }
  .page-hero { padding-block: 40px; }
  .page-hero h1 { max-width: none; }
  .page-hero .lede, .lede { font-size: 17px; }
  .hero-ctas .btn { justify-content: center; width: 100%; }
  .feat-grid, .steps, .calc { grid-template-columns: 1fr; }
  .calc-in, .calc-out { padding: 22px 20px; }
  .calc-row .v { font-size: 18px; }
  .calc-row.hero-row .v { font-size: 30px; }
  .faq-q { font-size: 16.5px; }
}

/* Guides: the Labor productivity hero with nothing on the right; the first section follows directly. */
:is(.page-guide, .page-tool, .page-about) .lp-hero { padding-bottom: 12px; }
:is(.page-guide, .page-tool, .page-about) .lp-hero-visual { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; align-self: stretch; min-height: 0; margin: 0; padding: 0; }
/* The guide accent phrases are long, so the underline keeps its drawn stroke
   scaled with the svg: with non-scaling-stroke the dash draws in from both ends. */
:is(.page-guide, .page-tool, .page-about) .word-accent path { vector-effect: none; stroke-width: 3.6; }
:is(.page-guide, .page-tool, .page-about) .word-glue .word-accent { display: inline-block; }
:is(.page-guide, .page-tool, .page-about) .word-glue { white-space: nowrap; }
:is(.page-guide, .page-tool, .page-about) .lp-hero + .sec { padding-top: 24px; } /* Guides that open with a plain section instead of a callout get the same gap. */
/* The pixel bulldozer on the guide heroes: scaled up crisply, driving along a hairline. */
:is(.page-guide, .page-tool, .page-about) .guide-dozer picture { display: block; width: min(100%, 360px); }
:is(.page-guide, .page-tool, .page-about) .guide-dozer img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
/* The ground strip under the hero: the dozer's wheels sit on its top edge (Alan, 2026-11-04; it replaced a hairline). */
:is(.page-guide, .page-tool, .page-about) .guide-ground { display: block; width: 100%; height: auto; margin-top: 6px; }
@media (max-width: 720px) {
  :is(.page-guide, .page-tool, .page-about) .lp-hero-grid { gap: 28px; }
  :is(.page-guide, .page-tool, .page-about) .guide-dozer picture { width: 240px; }
  :is(.page-guide, .page-tool, .page-about) .guide-ground { height: 22px; object-fit: cover; object-position: left center; }
}

/* The free tools share the guide hero; their gif is a 48px build, shown ×4. */
.page-tool .guide-dozer.is-tool picture { width: 192px; }
@media (max-width: 720px) {
  .page-tool .guide-dozer.is-tool picture { width: 144px; }
}

/* The About page: the guide hero with nothing on the right, on a white page (Alan, 2026-11-05). */
.page-about { background: #FCFDFB; } /* The top of the hero illustration is (252,253,251), so the page matches it (Alan, 2026-11-05). */
.page-about .lp-hero { padding-bottom: 24px; }
.site-header:has(+ .page-about) { background: #FCFDFB; }
/* The About hero art: Alan's rooftop line illustration as a backdrop. Big, anchored bottom-right of the hero,
   spilling past the right edge, fading out toward the copy on the left (Alan, 2026-11-05: "bigger, fade into the text"). */
.page-about .lp-hero { position: relative; overflow: clip; min-height: 390px; }
.page-about .lp-hero-copy { position: relative; z-index: 1; }
.page-about .lp-hero-visual { position: static; }
.page-about .guide-dozer .about-hero-art { position: absolute; right: -4%; top: 0; width: 82%; max-width: none; height: auto; image-rendering: auto; mask-image: linear-gradient(to right, transparent 0, transparent 26%, #000 58%), linear-gradient(to top, transparent 0, #000 22%); -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 26%, #000 58%), linear-gradient(to top, transparent 0, #000 22%); mask-composite: intersect; -webkit-mask-composite: source-in; }
@media (max-width: 720px) {
  .page-about .lp-hero { min-height: 0; padding-bottom: 0; }
  .page-about .guide-dozer .about-hero-art { position: static; width: 112%; margin: 16px 0 0 -6%; mask-image: linear-gradient(to top, transparent 0, #000 25%); -webkit-mask-image: linear-gradient(to top, transparent 0, #000 25%); }
}