/**
 * Protean Hollow - Website Building page
 *
 * Loaded only by websites.html, so nothing here needs a page wrapper class.
 * Deliberately built from new class names rather than overrides of the shared
 * .category-card / .step-item components: this page needed a real pricing
 * table, an icon row and a process diagram, and reshaping the shared cards to
 * get them would have quietly redrawn every other page that uses them.
 */

/* =============================================
   HERO SIGNAL LINE
   Three quick credibility signals between the tagline and the pricing, so a
   scanner gets the "what am I buying" answer before the first number.
   ============================================= */

.hero-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  /* The tagline carries a space-8 bottom margin for pages that end there.
     Pulled back up rather than overriding it, so this stays a local decision. */
  margin-top: calc(var(--space-8) * -0.5);
}

.hero-signals span {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
}

.hero-signals span + span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-primary);
  margin-right: var(--space-3);
  flex-shrink: 0;
}

/* Tightened rather than left to wrap: a wrapped item carries its separator dot
   onto the new line, where it reads as a stray bullet. */
@media (max-width: 560px) {
  .hero-signals {
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }
  .hero-signals span {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
  }
  .hero-signals span + span::before { margin-right: var(--space-2); }
}

/* =============================================
   PRICING TIERS
   ============================================= */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  /* Left at stretch on purpose. Equal-height cards are what lines the price
     blocks up across the row; the flagship stands out by extending upward
     (negative margin-top below), not by being a different height. */
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-width) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  transition: var(--transition-normal);
}

.tier-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-normal);
}

.tier-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.tier-card:hover::before { transform: scaleX(1); }

/* The flagship. Heavier border, lit background, and on a wide screen it stands
   a little taller than its siblings so the eye lands on it first. */
.tier-card.is-flagship {
  border: var(--border-width-2) solid var(--accent-primary);
  background: linear-gradient(145deg, var(--surface-secondary) 0%, var(--bg-tertiary) 100%);
  box-shadow: var(--shadow-card-glow);
}

.tier-card.is-flagship::before { transform: scaleX(1); }

/* Only on the three-across layout. Once the grid wraps to two columns the
   flagship shares a row with one sibling and the lift reads as a misalignment
   rather than emphasis. Breakpoint matches the .tier-grid column change below. */
@media (min-width: 1025px) {
  .tier-card.is-flagship {
    margin-top: calc(var(--space-6) * -1);
    padding-bottom: var(--space-8);
  }
}

/* In flow rather than pinned to the corner: at this card width an absolute
   badge sat on top of the heading. */
.tier-badge {
  align-self: flex-start;
  background: var(--gradient-secondary);
  color: var(--bg-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

.tier-card h3 {
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.tier-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* Number first, condition underneath. The two figures used to run together in
   one sentence, so nobody could tell $199 and $250 apart at a glance. */
.tier-prices {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tier-price {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tier-amount {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--accent-primary);
}

/* The second figure on the flagship card, and the word-only prices on the
   quoted cards, both sit a step down from a headline number. */
.tier-price.is-secondary .tier-amount {
  font-size: var(--text-xl);
  color: var(--text-primary);
}

.tier-price.is-quote .tier-amount { font-size: var(--text-2xl); }

.tier-terms {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-snug);
}

.tier-cta {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-primary);
}

@media (max-width: 1024px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tier-grid { grid-template-columns: 1fr; } }

/* =============================================
   DOMAIN PRICING DISCLOSURE
   The full explanation is worth keeping and worth nobody having to read it
   straight after the pricing cards, so the reassurance stays visible and the
   registrar economics lesson moves behind a toggle.
   ============================================= */

.domain-note {
  max-width: 820px;
  margin: var(--space-8) auto 0;
}

.domain-note-lead {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.domain-note .faq-item { margin-bottom: 0; }

/* Was a <details> toggle. The four paragraphs behind it genuinely did stop the
   page, but folding them away meant the reassurance nobody would think to click
   for was the reassurance that stops a pricing argument later. Answer: keep it
   visible and cut it to three short columns instead of hiding it at full length. */
.domain-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-secondary);
}

.domain-fact h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.domain-fact p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 820px) { .domain-facts { grid-template-columns: 1fr; gap: var(--space-4); } }

/* =============================================
   HOSTING PLAN
   ============================================= */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.plan-item {
  padding: var(--space-6);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-width) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  transition: var(--transition-normal);
}

.plan-item:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-primary-subtle);
  border: var(--border-width) solid var(--border-accent);
  color: var(--accent-primary);
  margin-bottom: var(--space-4);
}

.plan-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.plan-item h3 {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.plan-item p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.plan-price {
  max-width: 820px;
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  text-align: center;
  border: var(--border-width) solid var(--border-accent);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, var(--surface-secondary) 0%, var(--bg-tertiary) 100%);
}

/* Scoped through .plan-price so it outranks the sibling paragraph rule below,
   which was otherwise recolouring the figure to body text. */
.plan-price .plan-amount {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--accent-primary);
  margin-top: 0;
}

.plan-amount span {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-normal);
}

.plan-price p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
}

@media (max-width: 1024px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .plan-grid { grid-template-columns: 1fr; } }

/* =============================================
   PULL QUOTE
   One line, given enough weight that somebody scanning the page still catches
   it. Not a testimonial block: no oversized quote marks, no attribution.
   ============================================= */

.pull-quote {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  text-align: center;
}

.pull-quote::before {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 auto var(--space-5);
  background: var(--accent-tertiary);
}

.pull-quote p {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* =============================================
   PROCESS FLOW
   ============================================= */

.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  counter-reset: pstep;
}

.process-step {
  position: relative;
  padding: var(--space-6);
  background: var(--surface-glass);
  border: var(--border-width) solid var(--border-secondary);
  border-radius: var(--radius-lg);
}

.process-num {
  counter-increment: pstep;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: var(--bg-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-4);
}

.process-num::before { content: counter(pstep, decimal-leading-zero); }

.process-step h3,
.process-step h4 {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.process-step p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Connector and arrowhead, drawn across the gap at the vertical centre of the
   number badge (card padding + half the 40px badge). Only on the wide layout:
   once the row wraps, a line pointing at the card below it is a lie. */
@media (min-width: 901px) {
  .process-step:not(:last-child)::before,
  .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--space-6) + 20px);
  }

  .process-step:not(:last-child)::before {
    left: 100%;
    width: var(--space-6);
    height: 1px;
    background: var(--accent-primary);
    opacity: 0.75;
  }

  .process-step:not(:last-child)::after {
    left: calc(100% + var(--space-6) - 5px);
    margin-top: -4px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--accent-primary);
    opacity: 0.75;
  }
}

@media (max-width: 900px) { .process-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process-flow { grid-template-columns: 1fr; } }

/* =============================================
   WEBSITE vs SOFTWARE PANELS
   ============================================= */

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.fit-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: var(--space-8);
  background: var(--surface-glass);
  border: var(--border-width) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  transition: var(--transition-normal);
}

/* Always-on accent bar rather than a coloured border-top, so the hover state
   can recolour the border without wiping the bar out. */
.fit-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-primary);
}

.fit-panel.is-software::before { background: var(--accent-secondary); }

.fit-panel:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.fit-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent-primary);
  margin-bottom: var(--space-3);
}

.fit-panel.is-software .fit-label { color: var(--accent-secondary); }

.fit-panel h3 {
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.fit-panel p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.fit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
}

.fit-tags li {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border-secondary);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.fit-more {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-primary);
}

.fit-more:hover { color: var(--accent-primary-light); }

.fit-panel.is-software .fit-more { color: var(--accent-secondary); }
.fit-panel.is-software .fit-more:hover { color: var(--accent-secondary-light); }

.fit-footnote {
  max-width: 600px;
  margin: var(--space-8) auto 0;
  text-align: center;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .fit-grid { grid-template-columns: 1fr; }
  .fit-panel { padding: var(--space-6); }
}

/* =============================================
   RECENT BUILDS
   A grid, deliberately, rather than a sidebar list. Every site added from here
   on is one more card in this section and zero new navigation: the left rail
   would otherwise grow a link per client and never stop.
   ============================================= */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.work-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-width) solid var(--border-secondary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition-normal);
}

.work-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* Fixed ratio so a row of cards lines up regardless of how tall each site's
   header happens to be. Anchored to the top because the useful part of a
   screenshot is the masthead and the headline, not the middle of the page. */
.work-shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-tertiary);
  border-bottom: var(--border-width) solid var(--border-secondary);
}

.work-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-slow, 0.4s ease);
}

.work-card:hover .work-shot img { transform: scale(1.03); }

.work-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* Says plainly whether this was paid client work or one of our own properties.
   A portfolio that quietly passes off in-house sites as clients is the kind of
   thing somebody checks, so the label is on the card rather than in a footnote. */
.work-tag {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary, var(--text-secondary));
  margin-bottom: var(--space-2);
}

.work-card.is-client .work-tag { color: var(--accent-primary); }

.work-card h3 {
  font-size: var(--text-xl);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.work-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.work-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--accent-primary);
}

.work-link:hover { color: var(--accent-primary-light); }

/* One client build in a three-column grid reads as an empty shelf, so a lone
   card takes the full width and lies down instead: screenshot beside the copy
   rather than above it, which is the only way a single card fills a row
   without the image becoming absurd. Reverts to the normal grid at two. */
.work-grid.is-solo { grid-template-columns: 1fr; }

@media (min-width: 769px) {
  .work-grid.is-solo .work-card { flex-direction: row; }
  .work-grid.is-solo .work-shot {
    flex: 0 0 55%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: var(--border-width) solid var(--border-secondary);
  }
  .work-grid.is-solo .work-body { justify-content: center; padding: var(--space-6); }
}

/* Four concepts in a three-column grid leaves one card stranded on its own
   row. Two columns takes four to a clean 2x2 and stays right at six. */
.work-grid.is-concepts { grid-template-columns: repeat(2, 1fr); }

/* The route from the client row down to the concepts, for somebody whose trade
   is not the one client build. Not a sidebar link: the rail carries one entry
   for this whole page and gets no more. */
.work-more {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.work-more a { color: var(--accent-primary); font-weight: var(--font-semibold); }
.work-more a:hover { color: var(--accent-primary-light); }

@media (max-width: 1024px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
  .work-grid,
  .work-grid.is-concepts { grid-template-columns: 1fr; }
}