/* Design Surrey — category and product pages
   ==================================================================
   The components every page below the top level is built from. They were
   inline in websites.html first; once there were six category pages and
   four product pages that meant ten copies of the same rules and ten
   places to fix a spacing bug. One file instead.

   Written phone-first throughout. Every block here is a single column by
   default and gains its grid at a breakpoint, because that is the order
   the traffic arrives in — not because it is a tidier way to write CSS.

   Nothing here positions a hero. Interior pages use .hero--static from
   base.css, which is the drawn artboard system with the rotator taken off. */


/* ---------- the offer grid --------------------------------------------
   Four builds, three plans, six automations — the same object each time:
   a qualifier, a name, a number, a sentence, a list, an action. */

.offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s10);
}
.offer {
  background: var(--page);
  padding: var(--s7) var(--s6) var(--s8);
  display: flex; flex-direction: column; gap: var(--s3);
}
/* the one we would rather sell */
.offer--lead { background: var(--ink-900); }
.offer--lead h3, .offer--lead .offer__amt { color: var(--bone-50); }
.offer--lead p, .offer--lead li { color: #CFCEC5; }
.offer--lead .offer__for { color: var(--brass-300); }
.offer--lead li { border-top-color: rgba(251,250,247,.18); }

.offer__for {
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-700);
}
.offer h3 { font-size: var(--h3); margin-top: var(--s2); }
.offer__amt {
  display: block; margin-top: var(--s3);
  font-size: clamp(30px, 8vw, 42px); line-height: 1;
  letter-spacing: -.045em; font-weight: 700; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.offer__amt small {
  font-size: .42em; font-weight: 500; letter-spacing: 0;
  color: var(--ink-400); margin-left: .25em;
}
.offer--lead .offer__amt small { color: #8A8D84; }
.offer p { font-size: var(--small); }
.offer ul { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.offer li { font-size: 13.5px; padding: var(--s2) 0; border-top: 1px solid var(--border); }
/* after the base, because a border-top shorthand resets border-top-color */
.offer--lead li { border-top: 1px solid rgba(251,250,247,.18); }
.offer .btn { margin-top: auto; align-self: flex-start; }
.offer--lead .btn { margin-top: var(--s5); }

@media (min-width: 600px) { .offers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .offers--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px)  { .offers--3 { grid-template-columns: repeat(3, 1fr); } }


/* ---------- the dated timeline ----------------------------------------
   Dates rather than phases. The rule draws across as the block arrives and
   the days light after it, so it reads as a week passing. */

.track { position: relative; margin-top: var(--s10); }
.track__rule {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--brass-500); transform: scaleX(0); transform-origin: left;
}
.track.rv-in .track__rule { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.2,.8,.3,1); }

.steps {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-top: none;
}
.step { background: var(--page); padding: var(--s6) var(--s5) var(--s7); position: relative; }
.step > span {
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-700);
}
.step b { display: block; margin-top: var(--s3); color: var(--ink-900); font-size: 15px; }
.step p { margin-top: var(--s2); font-size: 13.5px; line-height: 1.45; }

@media (min-width: 560px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 960px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }


/* ---------- what is always included ----------------------------------- */

.incl { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid;
        grid-template-columns: 1fr; gap: 0 var(--s12); }
.incl li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s4);
  padding: var(--s4) 0; border-top: 1px solid var(--border); font-size: var(--small);
}
.incl li::before { content: ""; width: 10px; height: 10px; background: var(--brass-500); margin-top: .5em; }
.incl b { display: block; color: var(--ink-900); }
@media (min-width: 768px) { .incl { grid-template-columns: 1fr 1fr; } }


/* ---------- the numbers row ------------------------------------------- */

.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
        background: var(--border); border: 1px solid var(--border); margin-top: var(--s10); }
.figs div { background: var(--page); padding: var(--s6) var(--s5); }
.figs b {
  display: block; font-size: clamp(20px, 5.4vw, 27px); line-height: 1;
  letter-spacing: -.04em; color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.figs span {
  display: block; margin-top: var(--s3); font-family: var(--font-mono);
  font-size: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400);
}
@media (min-width: 768px) { .figs { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .figs--3 { grid-template-columns: repeat(3, 1fr); } }


/* ---------- questions -------------------------------------------------- */

.faq { border-top: 1px solid var(--ink-900); margin-top: var(--s8); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer; padding-block: var(--s5); min-height: var(--hit);
  font-size: 16px; font-weight: 600; color: var(--ink-900); letter-spacing: -.015em;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5);
  transition: color .2s ease;
}
.faq summary:hover { color: var(--brass-700); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-weight: 400;
  color: var(--brass-500); flex: none; font-size: 19px; transition: transform .25s ease;
}
.faq details[open] summary::after { content: "–"; transform: rotate(180deg); }
.faq details p { padding-bottom: var(--s5); font-size: var(--small); max-width: 62ch; }
@media (min-width: 768px) { .faq summary { font-size: 17px; } }


/* ---------- the closing band ------------------------------------------ */

.close-band {
  background: var(--ink-800);
  border-top: var(--field-edge) solid var(--brass-500);
}
.close-band h2 { max-width: 20ch; }
.close-band p { margin-top: var(--s6); color: #CFCEC5; max-width: 50ch; }
.close-band .btn-row { margin-top: var(--s8); }


/* ---------- product pages ---------------------------------------------
   No navigation, one offer, one action. The parts a category page does
   not need: the problem stated as a cost, and the price stated twice. */

.problem { display: grid; grid-template-columns: 1fr; gap: 1px;
           background: var(--border); border: 1px solid var(--border); margin-top: var(--s10); }
.problem > div { background: var(--page); padding: var(--s8) var(--s6) var(--s10); }
.problem > div.problem__now { background: var(--bone-100); }
.problem > div.problem__then { background: var(--ink-900); }
.problem__then h3 { color: var(--bone-50); }
.problem__then p, .problem__then li { color: #CFCEC5; }
.problem__then .problem__tag { color: var(--brass-300); }
.problem__then li { border-top-color: rgba(251,250,247,.18); }
.problem__tag {
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400);
}
.problem h3 { font-size: var(--h3); margin-top: var(--s4); }
.problem p { margin-top: var(--s4); font-size: var(--small); }
.problem ul { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.problem li { font-size: 13.5px; padding: var(--s2) 0; border-top: 1px solid var(--border); }
.problem__then li { border-top: 1px solid rgba(251,250,247,.18); }
@media (min-width: 768px) { .problem { grid-template-columns: 1fr 1fr; } }

/* the price, restated where the decision is made */
.buy {
  border: 1px solid var(--border); border-left: var(--field-edge) solid var(--brass-500);
  padding: var(--s8) var(--s6); margin-top: var(--s10);
  display: grid; grid-template-columns: 1fr; gap: var(--s6); align-items: center;
}
.buy__amt {
  font-size: clamp(30px, 8vw, 44px); line-height: 1; letter-spacing: -.045em;
  font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.buy__amt small { display: block; margin-top: var(--s3); font-size: .34em; font-weight: 500;
                  letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono);
                  color: var(--ink-400); }
.buy p { font-size: var(--small); }
@media (min-width: 768px) { .buy { grid-template-columns: auto 1fr auto; gap: var(--s10); padding: var(--s8); } }


/* ---------- the hub's six doors ----------------------------------------
   A routing card, not a summary. It carries enough to choose with — a
   price, a sentence, the names of what is inside — and stops there,
   because the category page behind it is where the explaining happens. */

.doors { display: grid; grid-template-columns: 1fr; gap: 1px;
         background: var(--border); border: 1px solid var(--border); margin-top: var(--s10); }
.door {
  background: var(--page); padding: var(--s7) var(--s6) var(--s8);
  display: flex; flex-direction: column; gap: var(--s3);
  color: var(--ink-700); transition: background-color .2s ease;
}
.door:hover { background: var(--bone-100); color: var(--ink-700); }

.door__no { font-family: var(--font-mono); font-size: var(--label);
            letter-spacing: .16em; color: var(--brass-700); }
.door h3 { font-size: var(--h3); color: var(--ink-900); letter-spacing: -.02em; }
.door__price { font-family: var(--font-mono); font-size: var(--label);
               letter-spacing: .12em; text-transform: uppercase; color: var(--brass-700); }
.door p { font-size: var(--small); margin-top: var(--s2); }
.door ul { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.door li { font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border); }
.door__go {
  margin-top: auto; padding-top: var(--s6);
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-mono); font-size: var(--label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-700);
  transition: gap .2s ease;
}
.door:hover .door__go { gap: var(--s4); }

/* The dark door, AFTER the base rules rather than before them.
   .door--lead h3 and .door h3 are both (0,1,1), so whichever is written
   last wins — and the lead block used to be written first. The result was
   the one card meant to stand out rendering ink-900 type on an ink-900
   ground: present, correct, and completely invisible. */
.door--lead { background: var(--ink-900); }
.door--lead:hover { background: #14170F; }
.door--lead h3 { color: var(--bone-50); }
.door--lead p, .door--lead li { color: #CFCEC5; }
.door--lead .door__no, .door--lead .door__price, .door--lead .door__go { color: var(--brass-300); }
.door--lead li { border-top: 1px solid rgba(251,250,247,.18); }

@media (min-width: 620px)  { .doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .doors { grid-template-columns: repeat(3, 1fr); } }


/* ---------- the stack, and the lead-magnet note ------------------------
   Nine groups of named tools. It is deliberately the most detailed block
   on the site: in a market where everyone says "we use AI and automation",
   naming the actual software is the cheapest credibility available and
   almost nobody does it. */

.stack { display: grid; grid-template-columns: 1fr; gap: 1px;
         background: var(--border); border: 1px solid var(--border); margin-top: var(--s10); }
.stack__group { background: var(--page); padding: var(--s7) var(--s6) var(--s8); }
.stack__no { font-family: var(--font-mono); font-size: var(--label);
             letter-spacing: .16em; color: var(--brass-700); }
.stack__group h3 { font-size: 17px; margin-top: var(--s3); color: var(--ink-900); letter-spacing: -.02em; }
.stack__group p { margin-top: var(--s3); font-size: 13.5px; line-height: 1.5; }
.stack__group ul { list-style: none; margin: var(--s5) 0 0; padding: 0;
                   display: flex; flex-wrap: wrap; gap: var(--s2); }
.stack__group li {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-700); border: 1px solid var(--border);
  padding: 5px var(--s3); background: var(--page);
}
.stack__note { margin-top: var(--s8); font-size: var(--small); color: var(--ink-400); max-width: 68ch; }

@media (min-width: 620px)  { .stack { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stack { grid-template-columns: repeat(3, 1fr); } }

/* what makes a lead magnet worth gating */
.lm {
  margin-top: var(--s12); padding: var(--s8) var(--s6);
  background: var(--ink-900); color: #CFCEC5;
  border-left: var(--field-edge) solid var(--brass-500);
}
.lm h3 { color: var(--bone-50); font-size: var(--h3); }
.lm > p { margin-top: var(--s4); font-size: var(--small); max-width: 62ch; }
.lm ul { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: 1px;
         background: rgba(251,250,247,.18); border: 1px solid rgba(251,250,247,.18); }
.lm li { background: var(--ink-900); padding: var(--s5) var(--s5); font-size: 13.5px; line-height: 1.5; }
.lm li b { display: block; color: var(--bone-50); margin-bottom: var(--s2); }
.lm__note { margin-top: var(--s6); font-size: 13px; color: #8A8D84; }
@media (min-width: 768px) { .lm { padding: var(--s10) var(--s8); } .lm ul { grid-template-columns: 1fr 1fr; } }