/* HandBuiltPCs.ca - public site styles
   Copyright (c) 2026 HandBuiltPCs.ca. All rights reserved.
   Proprietary work. No part of this file, its scripts, code or configuration may be used, copied, modified,
   merged, published or distributed, in whole or in part, without prior written permission. */
/* HandBuiltPCs.ca: site styles */
:root {
  --bg: #0b0f19;
  --bg-2: #111827;
  --bg-3: #1f2937;
  --text: #f8fafc;
  --muted: #9ca3af;
  --line: #273244;
  --orange: #f97316;
  --red: #ef4444;
  --grad: linear-gradient(135deg, var(--orange), var(--red));
  --radius: 14px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.section { padding: 64px 0; }
.section-title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(239, 68, 68, .25);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(239, 68, 68, .35); }
.btn-small { padding: 9px 16px; font-size: 15px; }
.btn-ghost { background: transparent; border: 2px solid var(--orange); color: var(--text); box-shadow: none; }
.btn-ghost:hover { background: rgba(249, 115, 22, .1); box-shadow: none; }
.link-arrow { font-weight: 700; text-decoration: none; }
.link-arrow::after { content: " \2192"; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11, 15, 25, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.brand img { width: 230px; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; }
.site-nav a:not(.btn):hover { color: var(--orange); }
.menu-toggle {
  display: none;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
}

/* Hero */
.hero { position: relative; overflow: hidden; padding: 96px 0 88px; border-bottom: 1px solid var(--line); }
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 85% 20%, rgba(239, 68, 68, .22), transparent 70%),
    radial-gradient(500px 380px at 10% 90%, rgba(249, 115, 22, .16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zM28 100L0 84V66l28 16 28-16v18L28 100z' fill='none' stroke='%23f97316' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; max-width: 760px; margin-left: max(16px, calc((100% - 1120px) / 2)); }
.eyebrow { color: var(--orange); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.hero h1 { font-size: clamp(36px, 6vw, 62px); font-weight: 900; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(18px, 2vw, 21px); color: #d1d5db; max-width: 640px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 14px; }
.fine { color: var(--muted); font-size: 15px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { font-size: 20px; }
.card p { color: #cbd5e1; margin: 0; font-size: 16px; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  display: grid; place-items: center; background: rgba(249, 115, 22, .12); border: 1px solid rgba(249, 115, 22, .35);
}
.card-icon svg { width: 24px; height: 24px; fill: var(--orange); }

/* Steps */
.band { background: var(--bg-2); border-block: 1px solid var(--line); }
.steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.steps li { position: relative; padding: 22px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.steps h3 { font-size: 19px; margin-top: 10px; }
.steps p { color: #cbd5e1; font-size: 16px; margin: 0; }
.step-num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad); font-weight: 800;
}

/* Listings */
.listing-empty {
  margin-top: 20px; padding: 28px; border-radius: var(--radius);
  border: 2px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.listing-empty p { margin: 0; color: #cbd5e1; }

/* Split */
.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.split p { color: #cbd5e1; }
.parts-box { background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 24px; }
.parts-title { font-weight: 800; font-size: 19px; color: var(--text) !important; }

/* CTA band */
.cta-band { background: var(--grad); }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 40px 0; }
.cta-band h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.cta-band .btn { background: var(--bg); box-shadow: none; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 20px; color: var(--muted); font-size: 15px; }
.footer-row { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: start; }
.footer-row p { margin: 0 0 6px; }
.footer-row strong { color: var(--text); }
.footer-nav { display: flex; flex-direction: column; gap: 6px; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--orange); }
.email-reveal {
  background: none; border: 1px solid var(--line); color: var(--orange);
  border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer;
}
.footer-legal { margin-top: 24px; font-size: 14px; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--orange); }
.copyright { margin-top: 8px; font-size: 13px; }

/* Responsive */
@media (max-width: 960px) {
  .cards, .steps { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 16px 16px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav a.btn { margin-top: 12px; text-align: center; border: 0; }
  .brand img { width: 190px; }
  .hero { padding: 64px 0 56px; }
  .cards, .steps { grid-template-columns: 1fr; }
  .footer-row { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  /* Finger-sized links: at least 24 px tall to tap */
  .link-arrow, .footer-nav a, .footer-legal a { display: inline-block; padding: 6px 0; }
}

/* PC listings */
.listings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.pc-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s;
}
.pc-card:hover { transform: translateY(-3px); border-color: rgba(249, 115, 22, .6); }
.pc-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #000; }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.badge-sale { background: var(--grad); color: #fff; }
.badge-sold { background: #374151; color: #e5e7eb; }
.pc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pc-body h3 { font-size: 19px; }
.pc-specs { list-style: none; padding: 0; margin: 0 0 16px; color: #cbd5e1; font-size: 15px; }
.pc-specs li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.pc-specs li::before { content: "\25B8  "; color: var(--orange); }
.pc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.price { font-size: 24px; font-weight: 900; }
.price.sold { color: var(--muted); font-size: 20px; }
.is-sold .pc-photo img { filter: grayscale(.6) brightness(.8); }
.demo-banner {
  background: #fde047; color: #111827; text-align: center; font-weight: 800; font-size: 14px; padding: 6px 12px;
}
@media (max-width: 960px) { .listings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .listings { grid-template-columns: 1fr; } }
.pc-specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.pc-specs dt { color: var(--muted); }
.pc-specs dd { margin: 0; text-align: right; color: #e5e7eb; }
.pc-photo { overflow: hidden; }
.pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pc-photo .badge { z-index: 1; }

/* Inner pages */
.site-nav a[aria-current="page"] { color: var(--orange); }
.page-head { padding: 64px 0 40px; border-bottom: 1px solid var(--line);
  background: radial-gradient(500px 300px at 90% 0%, rgba(239, 68, 68, .18), transparent 70%); }
.page-head h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 900; }
/* A service page with its first photo next to the title: words left, a 4:3 frame right, lined up with the price box below
   it; on a phone the frame goes under the lead. Same frame as the home page (.screen, neon.css). Case swap and Handhelds
   keep a "photo coming soon" frame; the other services (.no-photo) stay one column until js/site.js fills the frame. */
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 40px; align-items: center; }
.page-head-grid.no-photo { grid-template-columns: minmax(0, 1fr); }
.page-head .page-photo { aspect-ratio: 4 / 3; }
.page-head .page-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.page-head .page-photo .photo-soon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 15px;
  border: 2px dashed rgba(255, 255, 255, .22); margin: 14px; border-radius: 10px; }
.page-head .page-photo.has-photo .photo-soon { display: none; }
@media (max-width: 860px) { .page-head-grid { grid-template-columns: 1fr; gap: 24px; } .page-head .page-photo { max-width: 560px; } }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.check-list { list-style: none; padding: 0; margin: 16px 0 18px; display: grid; gap: 10px; color: #cbd5e1; }
.check-list li { padding-left: 28px; position: relative; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--orange); font-weight: 900; }
.check-list.small { font-size: 15px; margin-top: 22px; }
.link-back { display: inline-block; margin-bottom: 22px; font-weight: 700; text-decoration: none; }
.link-back::before { content: "\2190  "; }

/* Single PC */
.pc-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
.pc-gallery { position: sticky; top: 90px; }
.pc-main-photo { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); }
.pc-main-photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.thumb { width: 78px; height: 58px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid var(--line); background: #000; cursor: pointer; }
.thumb.active { border-color: var(--orange); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.pc-info h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; margin-top: 12px; }
.pc-price { font-size: 34px; font-weight: 900; margin: 0 0 12px; }
.pc-desc { color: #cbd5e1; }
.pc-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 28px; }
.specs-title { font-size: 20px; }
.badge-inline { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.badge-inline.badge-sale { background: var(--grad); color: #fff; }
.badge-inline.badge-sold { background: #374151; color: #e5e7eb; }
@media (max-width: 860px) {
  .pc-detail, .info-grid { grid-template-columns: 1fr; }
  .pc-gallery { position: static; }
}

/* Services */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.service h2 { font-size: 19px; }
.service p { color: #cbd5e1; font-size: 16px; }
.service .link-arrow { margin-top: auto; }
.service-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0 24px; }
.service-strip li { list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-weight: 600; }
.service-strip { padding: 0; }
@media (max-width: 960px) { .services, .service-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .services, .service-strip { grid-template-columns: 1fr; } }
.service-price { font-size: 20px; font-weight: 900; color: var(--orange) !important; margin-bottom: 6px; }

/* Service detail pages */
.page-head .link-back { margin-bottom: 18px; }
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.svc-main { min-width: 0; }
.svc-h { font-size: 24px; font-weight: 800; margin-top: 34px; }
.svc-main > .svc-h:first-child { margin-top: 0; }
.check-list.dot li::before { content: "\25B8"; }
/* Custom rigs: Eric's own setup photo under the title, its label in the corner */
.custom-photo { position: relative; margin: 24px 0 0; }
.custom-photo img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); }
.custom-photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .65);
  color: #fff; font-weight: 700; font-size: 14px; }
@media (max-width: 640px) { .custom-photo img { aspect-ratio: 16 / 9; } }
/* 3D printing: Eric's printer photo (from the admin's Site photos), with a short dashed line until he uploads one */
.printer-photo .photo-soon { border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .22);
  background: var(--bg-2); color: var(--muted); font-weight: 700; font-size: 15px; text-align: center; padding: 14px 16px; }
.printer-photo:not(.has-photo) figcaption { display: none; }
.options.two { grid-template-columns: repeat(2, 1fr); }
.rate-table { border-collapse: collapse; margin-top: 18px; font-size: 15px; min-width: 280px; }
.rate-table caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 6px; }
.rate-table th, .rate-table td { text-align: left; padding: 7px 18px 7px 0; border-bottom: 1px solid var(--line); }
.rate-table th { color: #cbd5e1; font-weight: 700; }
.rate-table td:last-child, .rate-table th:last-child { text-align: right; padding-right: 0; font-weight: 800; }
@media (max-width: 960px) { .options.two { grid-template-columns: 1fr; } }
/* Service pages: more photos of Eric's work under "How it works" (admin: Site photos > Service pages), cards like the home
   page's "Recently sold" with only a label tag in the corner. Two side by side, on a phone too. 3D printing (.three) has
   three a row (two on a phone) and folds after 6 (phone: 4) behind a "See all" button until the list is opened. */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 14px; }
.shots.three { grid-template-columns: repeat(3, 1fr); }
.shot { position: relative; margin: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .15s, border-color .15s; }
.shot:hover { transform: translateY(-3px); border-color: rgba(249, 115, 22, .6); }
.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
.shot .hud { left: 12px; top: 12px; }
.shots:not(.open) .shot.fold-pc { display: none; }
.shots-more { margin-top: 16px; }
.shots-more.phone-only { display: none; }
@media (max-width: 640px) {
  .shots.three { grid-template-columns: repeat(2, 1fr); }
  .shot .hud { left: 8px; top: 8px; max-width: calc(100% - 16px); font-size: 9.5px; letter-spacing: .08em; padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shots:not(.open) .shot.fold-phone { display: none; }
  .shots-more.phone-only { display: inline-block; }
  .shots { gap: 12px; }
}
/* Numbered steps (terms: buying a PC, step by step) */
.check-list.steps-list { counter-reset: step; }
.check-list.steps-list li { counter-increment: step; }
.check-list.steps-list li::before { content: counter(step) "."; }
.note { background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 10px; padding: 14px 18px; color: #cbd5e1; margin-top: 18px; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.option { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.option.is-pick { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.option h3 { font-size: 17px; margin-bottom: 4px; }
.option p { color: #cbd5e1; font-size: 15px; margin-bottom: 8px; }
.option-tag { color: var(--orange) !important; font-weight: 800; font-size: 13px !important; text-transform: uppercase; letter-spacing: .05em; }
.option-price { color: var(--text) !important; font-weight: 700; }
.steps-compact { grid-template-columns: repeat(2, 1fr); }
.price-box { position: sticky; top: 96px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.price-label { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 700; margin: 0; }
.price-big { font-size: 30px; font-weight: 900; margin: 4px 0 10px; }
.price-box .btn { display: block; text-align: center; margin-top: 8px; }
@media (max-width: 960px) {
  .svc-layout { grid-template-columns: 1fr; }
  .price-box { position: static; }
  .options { grid-template-columns: 1fr; }
}
@media (max-width: 760px) { .steps-compact { grid-template-columns: 1fr; } }
.price-list { list-style: none; padding: 0; margin: 0 0 14px; }
.price-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.price-list span { color: #cbd5e1; }
.price-list b { white-space: nowrap; }

/* Products with stock status */
.products { display: grid; gap: 12px; margin-top: 14px; }
.product { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.product h3 { font-size: 18px; margin-bottom: 4px; }
.product p { color: #cbd5e1; font-size: 15px; margin: 0; }
.product-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.product-price { font-size: 20px; font-weight: 900; }
.stock { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 10px; border-radius: 999px; }
.stock-in { background: rgba(34, 197, 94, .15); color: #4ade80; border: 1px solid rgba(74, 222, 128, .4); }
.stock-out { background: #374151; color: #d1d5db; }
.product.is-out { opacity: .7; }
@media (max-width: 520px) { .product { flex-direction: column; align-items: flex-start; } .product-side { align-items: flex-start; } }
.advice-box { margin-top: 34px; padding: 22px 24px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(249,115,22,.14), rgba(239,68,68,.10)); border: 1px solid rgba(249,115,22,.45); }
.advice-box .svc-h { margin-top: 0; }
.advice-box p { color: #e5e7eb; }

/* Request form */
.reply-time { color: var(--orange); font-weight: 700; }
.reply-time.small { font-size: 15px; margin-top: 8px; }
.quote-form { max-width: 860px; display: grid; gap: 22px; }
.q-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: 22px 24px; margin: 0; min-width: 0; scroll-margin-top: 84px; }
.q-block legend { font-size: 20px; font-weight: 800; padding: 0 8px; margin-left: -8px; }
.q-hint { color: var(--muted); border: 2px dashed var(--line); border-radius: var(--radius); padding: 18px 22px; }
.job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.job { position: relative; display: block; cursor: pointer; }
.job input { position: absolute; opacity: 0; }
.job span { display: block; border: 2px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--bg); transition: border-color .15s; }
.job b { display: block; }
.job small { color: var(--muted); font-size: 14px; }
.job input:checked + span { border-color: var(--orange); background: rgba(249, 115, 22, .1); }
.job input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.field { margin-top: 16px; min-width: 0; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field.two > div { min-width: 0; }
.field label, .field .label { display: block; font-weight: 700; margin-bottom: 6px; }
.opt { color: var(--muted); font-weight: 400; font-size: 14px; }
.quote-form input[type="text"], .quote-form input[type="email"], .quote-form input[type="tel"], .quote-form input[type="url"],
.quote-form input[type="number"], .quote-form select, .quote-form textarea {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font: inherit; font-size: 16px;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: 2px solid var(--orange); border-color: transparent; }
.checks { display: grid; gap: 8px; }
.checks.cols { grid-template-columns: repeat(3, 1fr); }
.checks label, .agree { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin: 0; cursor: pointer; }
.checks input, .agree input { margin-top: 5px; accent-color: var(--orange); width: 18px; height: 18px; flex-shrink: 0; }
.agree { margin-top: 16px; font-weight: 700; }
.help { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.cable-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 12px; }
.cable-row label { font-weight: 700; display: grid; gap: 6px; }
.live-price { font-size: 20px; font-weight: 900; color: var(--orange); margin-top: 10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot:not(:empty) { margin-top: 14px; max-width: 100%; overflow: hidden; }
.turnstile-slot.passed { display: none; }   /* the spam check has passed: nothing left to look at */
.q-block .btn[type="submit"] { margin-top: 10px; font-size: 18px; padding: 15px 30px; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--red) !important; }
/* A missing answer: a red box around the whole question, and the page jumps to it (under the sticky header) */
.is-invalid { outline: 3px solid #f87171; outline-offset: 8px; border-radius: 8px; background: rgba(248, 113, 113, .07); scroll-margin-top: 110px; }
.field-error { color: #f87171; font-size: 15px; font-weight: 700; margin: 8px 0 0; }
.field-error::before { content: "\26A0  "; }
/* The message after Send: a box you can't miss, green when it went, red when it didn't */
.form-status { margin-top: 14px; font-weight: 700; padding: 14px 16px; border-radius: 10px; border: 2px solid; font-size: 17px; line-height: 1.4; }
.form-status.ok { color: #4ade80; border-color: #4ade80; background: rgba(74, 222, 128, .1); }
.form-status.error { color: #f87171; border-color: #f87171; background: rgba(248, 113, 113, .1); }
@media (max-width: 700px) {
  .job-grid, .field.two, .checks.cols, .cable-rows { grid-template-columns: 1fr; }
  .q-block { padding: 18px 16px; }
}
.req { color: #f87171; font-weight: 900; }
.quote-form:not(.tried) .req { display: none; }
.email-suggest { margin: 6px 0 0; font-size: 15px; color: #fbbf24; }
.email-suggest button { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: var(--orange); text-decoration: underline; cursor: pointer; }
.phone-note { margin: 6px 0 0; font-size: 14px; color: #fbbf24; }
.agree.small { font-size: 15px; font-weight: 600; margin-top: 10px; }

/* FAQ */
.faq { max-width: 860px; }
.faq .section-title { margin: 40px 0 14px; font-size: clamp(22px, 2.6vw, 28px); }
.faq .section-title:first-child { margin-top: 0; }
.faq details { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.faq details[open] { border-color: rgba(249, 115, 22, .6); }
.faq summary { cursor: pointer; padding: 16px 48px 16px 20px; font-weight: 700; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 22px; font-weight: 900; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 12px; }
.faq details p { margin: 0; padding: 0 20px 18px; color: #cbd5e1; }

/* Warranty and terms */
.terms { max-width: 860px; }
.terms-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.terms-toc a { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--text); }
.terms-toc a:hover { border-color: var(--orange); color: var(--orange); }
.terms .svc-h { scroll-margin-top: 90px; }
.terms-date { margin-top: 34px; }
.faq, .terms { margin-left: max(16px, calc((100% - 1120px) / 2)); }
.badge-reserved, .badge-inline.badge-reserved { background: #fbbf24; color: #111827; }
/* Keyboard users: a link to jump past the menu, shown only when it has focus */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--orange); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 12px; }
/* PC classes: Spark, Flare, Scorch, Wildfire */
.class-badge { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: #fff; margin-bottom: 8px; }
.class-badge-lg { font-size: 14px; padding: 4px 12px; margin: 12px 8px 0 0; }
.class-spark { background: #f59e0b; color: #111827; }
.class-flare { background: #f97316; }
.class-scorch { background: linear-gradient(135deg, #f97316, #dc2626); }
.class-wildfire { background: linear-gradient(135deg, #dc2626, #7f1d1d); box-shadow: 0 0 0 1px #fca5a5 inset; }
/* "Our classes" cards (Custom builds page) */
.class-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.class-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; scroll-margin-top: 90px; }
.class-card h3 { font-size: 19px; margin: 4px 0 10px; }
.class-specs { list-style: none; padding: 0; margin: 0 0 16px; color: #cbd5e1; font-size: 15px; display: grid; gap: 6px; }
.class-specs b { color: var(--text); }
.class-card .btn { margin-top: auto; align-self: flex-start; }
.class-card-wildfire { border-color: rgba(239, 68, 68, .55); }
a.class-badge { text-decoration: none; }
@media (max-width: 960px) { .class-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .class-grid { grid-template-columns: 1fr; } }
/* Class filter buttons on For sale / Past builds */
.class-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.class-filter button { border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.class-filter button[aria-pressed="true"] { border-color: var(--orange); background: rgba(249, 115, 22, .15); color: var(--orange); }
/* Sample builds (not built yet, price on PCPartPicker) */
.badge-sample, .badge-inline.badge-sample { background: #1f2937; color: #fbbf24; border: 1px solid rgba(251, 191, 36, .6); }
.price-link { font-weight: 800; font-size: 17px; }
.pc-price-note { font-size: 17px !important; font-weight: 600 !important; color: #cbd5e1; }
.class-range { font-weight: 800; color: var(--orange); margin: -4px 0 10px; }
/* Checkbox and radio labels: the box sits on the left and the words flow normally, so a price inside the words
   doesn't get extra gaps around it */
.checks label, .agree { display: block; position: relative; padding-left: 28px; }
.checks input, .agree input { position: absolute; left: 0; top: 0; margin-top: 5px; }
/* Sale prices and free-extra deals */
.price-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.was-price { color: var(--muted); font-size: .8em; font-weight: 600; }
.pc-price .was-price { font-size: 22px; }
.sale-tag { flex-basis: 100%; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4ade80; }
.promo-tags { margin: 0 0 14px; display: grid; gap: 6px; }
.promo-tag { margin: 0; padding: 8px 12px; border: 1px dashed rgba(74, 222, 128, .6); color: #bbf7d0; font-weight: 700; font-size: 15px; }
.pc-foot { flex-wrap: wrap; }
.pc-foot .btn { white-space: nowrap; }
/* Parts for sale */
.part-cat { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.part-desc { color: #cbd5e1; font-size: 15px; white-space: pre-line; }
.part-facts { list-style: none; padding: 0; margin: 0 0 14px; font-size: 15px; color: #cbd5e1; }
.part-facts li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.part-thumbs { padding: 10px 12px 0; margin: 0; }
.part-thumbs .thumb { width: 60px; height: 45px; }
.part-card { scroll-margin-top: 90px; }
/* "Custom build" tag: a PC built to order for a customer */
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pc-tags .class-badge { margin-bottom: 0; }
.custom-tag { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; text-decoration: none; color: #4ade80; border: 1px solid rgba(74, 222, 128, .6); }
.custom-tag-lg { font-size: 14px; padding: 4px 12px; margin: 12px 8px 0 0; vertical-align: middle; }
/* Home page: Parts and gear strip */
.part-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.mini-part { display: grid; grid-template-columns: 112px 1fr; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mini-photo { position: relative; display: block; background: #000; min-height: 112px; }
.mini-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-body { padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.mini-body h3 { font-size: 16px; margin: 0 0 8px; }
.mini-body h3 a { color: var(--text); text-decoration: none; }
.mini-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mini-foot .price { font-size: 19px; }
.mini-part.is-featured { grid-column: span 2; grid-template-columns: 220px 1fr; }
.mini-part.is-featured .mini-photo { min-height: 180px; }
.mini-desc { margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feature-tag { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: #fbbf24; color: #111827; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 960px) { .part-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .part-strip { grid-template-columns: 1fr; }
  .mini-part.is-featured { grid-column: auto; grid-template-columns: 1fr; }
  .mini-part.is-featured .mini-photo { min-height: 200px; }
}
/* Extras included with a part (one per line) */
.part-extras-title { margin: 4px 0 6px; font-weight: 800; font-size: 15px; }
.part-extras { list-style: none; padding: 0; margin: 0 0 14px; font-size: 15px; color: #cbd5e1; }
.part-extras li { position: relative; padding: 5px 0 5px 18px; border-bottom: 1px solid var(--line); }
.part-extras li::before { content: "\25B8"; position: absolute; left: 0; color: var(--orange); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }