/* ==========================================================================
   The calm pass, 2026-10-29: the inner pages (packages, contact, pay,
   projects, the project pages, privacy, terms). Loads after foundation.css
   and sections.css on the new-* drafts; the home page does not load it.
   Only what those pages carry that the home page does not.
   ========================================================================== */

/* The page hero: padding-driven like the home hero, not a full screen with
   air under it (packages, projects and the project pages read as a half-empty
   first screen at 1280 x 800). */
.page-hero { min-height: 0; padding-top: calc(var(--header-h) + 3.5rem); padding-bottom: var(--band); }

/* No capitals anywhere (Edgar 2026-10-29): the small titles on the checkout
   summary, the contact aside and the stage marks. */
.co-sum-title, .stage-mark { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-small); }

/* One card finish: a hairline, no shadow (the round-4 rule, applied to the
   contact brief, the checkout summary and the index cards). */
.co-group, .co-sum, .co--light .co-sum, .co--light .co-group, .index-card, .card, .co-form { box-shadow: none; border: 1px solid var(--line); }
.co--light .co-group { background: var(--surface); }

/* The black buttons (Invest in ..., Start yours) in the brand red like every
   other primary button on the site (the home pricing rule, applied everywhere). */
.btn--ink { background: var(--coral-deep); color: var(--paper); }
.btn--ink:hover { background: var(--ink); }

/* The index card on the packages and projects heroes: the promo on one line */
.index-card .promo { margin-top: var(--s5); }

/* ------------------------------ Look loop round 1 (inner pages) --------- */
/* 1, 2: a hairline or a shadow, never both: the project pages' delivered
   panel and the contact brief's step cards. */
.process-grid, .process-grid .step, .card.step, .ct-form > *, .ct-form section, .ct-form fieldset, .co--light .co-step, .co-step, .ct .ct-step { box-shadow: none; }
/* 3: a lone last screenshot takes the full row, like the first */
.shot-grid > :last-child:nth-child(2n) { grid-column: 1 / -1; }
/* 4, 5: the checkout's small print wraps clear of the launcher; the phone number never breaks */
.co-sum > p:last-of-type { max-width: 30ch; }
.co-after a[href^="tel"], .co-sum a[href^="tel"] { white-space: nowrap; }
/* 6, 7, 8: the index cards (what it starts at, industries, at a glance): the
   value never wraps; on a narrow phone label and value stack */
.index-card li span:last-child { white-space: nowrap; }
@media (max-width: 480px) {
  .index-card li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .index-card li span:last-child { white-space: normal; text-align: left; }
}
/* 9: the packages FAQ head centred on a phone like every other head */
@media (max-width: 900px) { .faq-side { text-align: center; } }
/* 12, 19: the legal pages: no hairline above the first section, a paragraph gap under a list */
.legal > section:first-of-type, .legal > div:first-of-type { border-top: 0; padding-top: 0; }
.legal ul, .legal ol { margin-bottom: 1em; }
/* 14: the bookmark on the demo tiles in the header cart's style, paper with a hairline */
.book-mark { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; }
.book-mark:hover { background: var(--ink); color: var(--paper); }
/* 17: the contact form column starts level with the aside */
.co-main, .ct-form { border-top: 0; padding-top: 0; margin-top: 0; }
/* 17 (reviewer): the 3px progress bar above the brief was the multi-step-form tell;
   the three numbered legends carry the order on their own. */
.form-progress { display: none; }
/* 18: the delivered rail starts at the dot on every row of the three-column panel, not only the first cell */
@media (min-width: 1081px) { .process-grid--3 .step:nth-child(3n + 1)::before { left: var(--s6); } }

/* The checkout's progress labels on the label size (type sweep, the one odd size on the set) */
.co-progress li { font-size: var(--fs-label); }

/* Projects page on a phone (Edgar 2026-10-31: "too busy ... the heading is so
   down low ... so many buttons ... all before I even get to see one website").
   The heading sits up under the header and the websites follow straight after
   it: the lead, the two buttons (the phone bar carries Get in touch), the
   industries card and the portfolio band's own repeat heading are off on a
   phone. Desktop is unchanged. */
@media (max-width: 600px) {
  .page-hero--work { padding-top: calc(var(--header-h) + var(--s5)); padding-bottom: 0; }
  .page-hero--work .container { padding-block: 0 var(--s5); }
  .page-hero--work .lead,
  .page-hero--work .hero-actions,
  .page-hero--work .index-card,
  .page-hero--work + #clients .head { display: none; }
  .page-hero--work + #clients { padding-top: var(--s5); }
  /* Websites and Apps: two words side by side, not two stacked list rows. The
     chosen one is full ink, the other at 62% (the 2026-10-24 tab ruling). */
  .page-hero--work + #clients .tab-list--row {
    flex-direction: row; justify-content: flex-start; gap: var(--s6);
    border-top: 0; border-bottom: 1px solid var(--line); margin-bottom: var(--s5);
  }
  .page-hero--work + #clients .tab-list--row .tab {
    width: auto; padding: 0.6rem 0; border-bottom: 0; font-size: var(--fs-h3);
  }
  .page-hero--work + #clients .tab-list--row .tab:hover,
  .page-hero--work + #clients .tab-list--row .tab[aria-selected="true"] { padding-left: 0; }

  /* The same phone answer on Pricing and the seven project pages: the
     heading up under the header, the desktop side card and the second
     button off. A project page keeps its one button, Open the live site.
     Pricing drops both buttons (See the plans only scrolls to what now
     follows straight on) and the plans band's repeat heading. */
  .page-hero--lean { padding-top: calc(var(--header-h) + var(--s5)); padding-bottom: 0; }
  .page-hero--lean .container { padding-block: 0 var(--s6); }
  .page-hero--lean .index-card,
  .page-hero--lean .hero-actions .btn--ghost { display: none; }
  .page-hero--plans .hero-actions,
  .page-hero--plans + #plans .head { display: none; }
  .page-hero--plans + #plans { padding-top: var(--s5); }
  /* A project page shows the website before the write-up: the brief band's
     screenshots move above its heading on a phone (review 2026-10-31). */
  .page-hero--lean + .band > .container { display: flex; flex-direction: column; }
  .page-hero--lean + .band .shot-grid { order: -1; margin-bottom: var(--s6); }
}