/* ==========================================================================
   The calm pass, 2026-10-29: the lower sections (Work, the dark band, Pricing,
   Process, Reviews, FAQ, the footer). Structure and script hooks stay as they
   are in new-styles.css; this layer only retypes the finish to the measured
   calm scale in docs/CALM-PASS.md: one face at weight 500 for titles, muted
   running copy, 15px list lines, card radius 12 with a hairline and the small
   shadow. Loads last on new-home.html, folded into new-styles.css on promote.
   ========================================================================== */

/* ------------------------------ Work ------------------------------------ */
/* The capture box: radius 10 (the media radius), hairline, the small shadow.
   Every tile shares the 16:10 box and tops its capture, so six screenshots
   read as six whole websites. */
.work-three .work-shot {
  border-radius: var(--r-media);
  border: 1px solid var(--line);
  box-shadow: none;              /* a hairline or a shadow, never both (Apple pass 4) */
}
.work-three .work-tile:hover .work-shot { transform: none; box-shadow: none; border-color: var(--line-strong); }
/* The caption: the client name at h4 size, weight 500, then the category in
   muted small text; the 2px coral rule above it stays as the tile's one accent. */
.work-three .work-tile figcaption {
  gap: 2px;
  padding-top: var(--s3);
  margin-top: var(--s4);
  border-top: 2px solid var(--coral);
}
.work-three .work-tile figcaption strong {
  font-family: var(--font); font-weight: 500;
  font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--text);
}
.work-three .work-tile figcaption span { font-size: var(--fs-small); color: var(--text-muted); }

/* ------------------------------ Pricing --------------------------------- */
/* The phone wall band: its edges melt from the neighbouring grounds into the
   ink over 140px instead of a hard line, so the band arrives and leaves softly
   (Edgar 2026-10-29: "smoother in and out"). The wall scales up a touch as it
   arrives (script), from its centre. */
/* The edge fades were tried and read as a box shadow (Edgar 2026-10-29, "again the
   box shadow"): gone. The band's edges are hard; only the copy and the wall ease. */
.dw-wall { transform-origin: 50% 50%; }
/* The copy's position and opacity follow the scroll (script); the reveal
   transition would lag behind them, so it is off here. */
.js .dw-copy.reveal { transition: none; }

/* ------------------------------ Reviews: two drifting rows (round 6) ---- */
/* Round 4 stilled the rows and showed the swipe rail; Edgar 2026-10-29 sent
   the Icon Fruit team rows ("do the same as this"): two rows drifting
   opposite ways, cards sized to their own quote, the person at the top
   with the quote under, bleeding off both edges with a short soft fade. */
.mq {
  --mq-w: auto;
  gap: 20px; padding-block: var(--s3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mq-track { gap: 20px; }
.mq .review {
  width: max-content; min-width: 300px; max-width: 520px;
  padding: 24px 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none;
}
.mq .review p { flex: none; max-width: 42ch; font-size: 1.0625rem; line-height: 1.6; margin: 0; }
.mq .review .stars { order: 2; margin: 0 0 var(--s3); font-size: var(--fs-label); }
.mq .review p { order: 3; }
.mq .review .review-by { order: 1; margin: 0 0 var(--s4); padding: 0; border-top: 0; }
.mq .review .review-by img, .mq .review .review-by .initials { width: 48px; height: 48px; border-radius: 10px; }
.mq .review .review-by strong { font-size: 1.0625rem; font-weight: 600; }
.mq .review .review-by small { font-size: var(--fs-small); }
@media (max-width: 600px) {
  .mq .review { min-width: 260px; max-width: 320px; padding: 20px 22px; }
  .mq .review p { font-size: 1rem; }
}

/* ------------------------------ Why Edweb (round 3) --------------------- */
/* Copy on the left, four plain reasons on the right, no boxes: the icon, a
   short heading and one sentence each, on the alt ground. */
.why-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--gap-split); align-items: center; }
.why-side .kicker { margin-bottom: var(--s4); }
.why-side .lead { margin-top: var(--s4); margin-bottom: var(--s6); max-width: 38ch; }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); }
.why-list li { display: flex; flex-direction: column; gap: var(--s3); }
.why-list svg { width: 24px; height: 24px; color: var(--coral); margin-bottom: var(--s1); }   /* one icon size with services (Apple pass 13) */
.why-list h3 { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.why-list p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.6; }   /* list lines are one 16px (Apple pass 12) */
@media (max-width: 900px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .why-side { text-align: center; }
  .why-side .kicker { justify-content: center; }
  .why-side .lead { margin-inline: auto; }
}
@media (max-width: 600px) {
  .why-list { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .why-side .btn { width: 100%; }
}

/* The promo in the head: one quiet line in a soft coral pill (Edgar 2026-10-29:
   "this can look so much better" on the black two-line block). */
.promo {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  background: var(--coral-soft); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--coral) 28%, transparent);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  font-family: var(--font); font-weight: 400; font-size: 0.95rem; line-height: 1.3;
  box-shadow: none; transform: none; overflow: visible;
}
.promo:hover { transform: none; }
.promo::after { content: none; animation: none; }
.promo b { font-size: inherit; font-weight: 600; letter-spacing: 0; color: var(--coral-deep); padding-right: 0; border-right: 0; }
.promo > span { display: inline; flex-direction: row; font-size: inherit; font-weight: 400; }
.promo small { display: inline; font-size: inherit; font-weight: 400; opacity: 1; color: var(--text-muted); }
.promo small::before { content: ", "; }
@media (max-width: 600px) {
  .promo { font-size: 0.9rem; padding: 0.45rem 0.9rem; text-align: center; flex-wrap: wrap; justify-content: center; }
  .promo small { display: none; }   /* one line on a phone (look loop after the Apple pass) */
}

/* Review arrows below the rail at every width, never over a card (round 4;
   the phone ruling of 2026-09-05 applied to the desktop too). */
.rail-wrap .rail-nav { position: static; inset: auto; align-items: center; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); pointer-events: auto; }
.rail-wrap .rail-count { display: block; margin-right: auto; }
.rail-wrap .rail-btn { box-shadow: none; }
.rail-wrap .rail-btn[aria-disabled="true"] { opacity: 0.25; }

/* The tab row: weight 500, the chosen one 600 with an ink underline on a
   desktop (no red underlines: Edgar 2026-10-23); the width spacer (data-t)
   is set at 600 so nothing shifts. */
.tab-list--row { justify-content: center; }   /* under the centred head (Apple pass 20) */
.tab-list--row .tab { font-weight: 500; }
.tab-list--row .tab[aria-selected="true"] { font-weight: 600; color: var(--ink); }
@media (min-width: 601px) {
  .tab-list--row .tab::after { font-weight: 600; }
  .tab-list--row .tab[aria-selected="true"] { border-bottom-color: var(--ink); }
}

/* The cards: white on the warm alt ground, a hairline, the small shadow. */
.pcard { position: relative; overflow: hidden; }
.pcard-top h3 { font-size: var(--fs-h3); font-weight: 500; }
/* "Most popular": a small ink pill with paper text, normal case, at the top
   right of the card's first row. The star circle it replaces is undone here. */
.pcard-top small {
  display: inline-flex; align-items: center;
  width: auto; height: auto; border-radius: var(--r-pill);
  padding: 0.3em 0.8em;
  background: var(--ink); color: var(--paper);
  font-family: var(--font); font-size: 0.8rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.pcard-top small::before { content: none; }
/* The popular card carries a 3px coral bar along its top edge, inside the radius
   (:has is Chromium 105, Safari 15.4, Firefox 121; without it there is no bar). */
.pcard:has(.pcard-top small)::before { content: none; }   /* the pill alone marks it (Apple pass 15, with the Recommended bar gone) */
/* The figure: weight 600, about 2.4rem, -0.03em; the old price light with its
   hairline strike (the site standard); "once-off" small and muted. */
.pcard-price { align-items: baseline; gap: var(--s2); }
.pcard-price strong {
  font-family: var(--font); font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.4rem); letter-spacing: -0.03em; line-height: 1;
}
.pcard-price s { font-size: var(--fs-body); font-weight: 400; }
.pcard-price span { font-size: var(--fs-small); color: var(--text-muted); }
.pcard > p { color: var(--text-muted); }
/* Two cards a row between 601 and 900: the description holds three lines so
   the Invest buttons sit on one line across the row (reviewer, Apple pass). */
@media (min-width: 601px) and (max-width: 900px) { .pcard > p { min-height: calc(3 * 1.6em); } }
.pcard .btn { font-weight: 500; }
/* The tick lists at 15px, muted, the check at 18px */
.checks li { font-size: 1rem; color: var(--text-muted); line-height: 1.5; padding: 0.6rem 0; }
.checks svg { width: 18px; height: 18px; margin-top: 2px; color: var(--coral); }  /* one tick colour with the services ticks (reviewer 2026-10-29) */
.pcard-more .checks li { font-size: 1rem; }
.pcard-more summary { font-weight: 500; font-size: var(--fs-small); }
.pcard-time { font-size: var(--fs-small); color: var(--text-muted); }
.pricing-more { color: var(--text-muted); }

/* ------------------------------ Process --------------------------------- */
.step h3 { font-weight: 500; }
.step > p { color: var(--text-muted); }
.step-out li { font-size: 1rem; line-height: 1.5; }
.step--feature > p { color: var(--text-on-ink-muted); }

/* ------------------------------ Reviews --------------------------------- */
.review {
  padding: 24px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.review .stars { color: var(--google-star); }
.review p { font-size: 1rem; line-height: 1.6; color: var(--text); }
.review-by strong { font-weight: 600; color: var(--text); }
.review-by small { font-size: var(--fs-small); color: var(--text-muted); }
.review-by .initials { font-weight: 600; }

/* ------------------------------ FAQ ------------------------------------- */
.faq-card { border-radius: var(--r-card); }
.faq-card summary {
  font-weight: 500; font-size: 1.0625rem; line-height: 1.3;
  padding: 18px 20px;
}
.faq-card summary:hover { padding-left: 20px; color: var(--ink); }
.faq-card p { font-size: 1rem; line-height: 1.6; color: var(--text-muted); padding: 0 20px 18px; }
/* The plus turns to a cross: the two bars are centred, so the quarter turn
   plus an eighth lands as a clean x. Less motion gets the cross without the turn. */
.faq-card summary::after { flex: none; transform: rotate(0deg); }
/* One expand control with the pricing "See everything included": 24px, soft
   ink ground, ink plus (look loop after the Apple pass). */
.faq-card summary::after {
  width: 24px; height: 24px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 10px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 10px no-repeat,
    color-mix(in srgb, var(--ink) 8%, var(--paper));
}
.faq-card:hover summary::after { background-color: color-mix(in srgb, var(--ink) 14%, var(--paper)); }
.faq-card[open] summary::after { background-color: var(--coral-soft); }
.faq-card[open] summary::after { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-card summary::after { transition: none; }
}

/* ------------------------------ Footer ---------------------------------- */
.foot-col h3 { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--s3); }
.foot-col li { font-size: 1rem; color: var(--text-on-ink-muted); }
.foot-col a { font-size: 1rem; padding-block: 10px; color: var(--text-on-ink-muted); }
.foot-brand p { color: var(--text-on-ink-muted); }
/* Every footer target at least 44px: the social squares and the legal links */
.socials a { width: 44px; height: 44px; }
.foot-legal a { display: inline-block; padding-block: 11px; }
.foot-legal { align-items: center; }   /* one baseline for the copyright and the links (look loop, Apple pass) */

/* ------------------------------ Phones ---------------------------------- */
@media (max-width: 900px) {
  /* The stage switch: 44px targets, weight 500 with the chosen one 600 */
  .stage-switch button { min-height: 44px; font-weight: 500; }
  .stage-switch button[aria-selected="true"] { font-weight: 600; }
}
@media (max-width: 600px) {
  .work-three .work-tile figcaption strong { font-size: var(--fs-h4); }
  /* The price line keeps to one line at 375 (ruling 2026-10-23), including
     "From R16,499": the figure a step smaller, "once-off" at micro */
  .pcard-price strong { font-size: 1.6rem; }
  .pcard-price s { font-size: var(--fs-small); }
  .pcard-price span { font-size: var(--fs-micro); }
  /* The tab rows stack: weight 500, the chosen one 600, the hairline stays */
  .tab-list--row .tab[aria-selected="true"] { border-bottom-color: var(--line); }
  .tab-list--row .tab { font-size: var(--fs-h3); }          /* the stacked tabs on the h3 size (type scale, promote) */
  .tab-list--row .tab small { font-size: var(--fs-small); }
  .faq-card summary { padding: 16px 18px; }
  .faq-card p { padding: 0 18px 16px; }
  .review { padding: 22px; }
}

/* "See more work" sits in the middle under the three projects (Edgar 2026-10-30). */
#work .process-note { justify-content: center; }