/* ============================================================
   STEPH FORWARD — site.css
   Extracted verbatim from the inline <style> block of index.html
   on 2026-08-31 (Phase 1A). No values were changed: this file must
   render byte-identically to the single-page version it replaces.
   ============================================================ */

/* Keyboard users land on the nav first; this gets them past it. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;
  padding:12px 20px;border-radius:0 0 12px 0;background:var(--purple);color:#08081a;
  font-size:var(--t-14);font-weight:600}
.skip-link:focus{left:0}
/* ============================================================ TOKENS */
:root{
  --bg:#08081a;
  --white:#e8e6f0;
  --text:#e8e6f0;
  --muted:rgba(232,230,240,0.65);
  --muted-dim:rgba(232,229,240,0.58);

  --purple:#c084fc;
  --gradient-title:linear-gradient(100deg,#929cf1 0%,#c08fd6 100%);
  --gradient-cta:linear-gradient(100deg,#5867ea 0%,#9e53c0 100%);
  --gradient-link:linear-gradient(100deg,#929cf1 0%,#c08fd6 100%);
  --gradient-stroke:linear-gradient(100deg,#929cf1 0%,#c08fd6 100%);
  --shadow-cta:0 4px 24px rgba(168,85,247,0.25);

  /* LEGACY — from the retired "Get Found / Save Time" two-track model. Still
     used by the old .offer cards, which Round 4 replaces. Do not reach for
     these for the new service lines: the naming no longer matches, and the
     colours are assigned the wrong way round for them. */
  --track-get:#6E94DC;
  --track-save:#FF9BE8;

  /* SERVICE IDENTITY — sampled from images/logo.png rather than picked.
     The mark is a two-stop gradient running hue 234deg to 281deg; these are
     its ends. There is no pink in the logo.
       AI Search  = purple  #c08fd6   7.68:1 on --bg
       Automation = blue    #929cf1   7.78:1 on --bg */
  --service-search:#c08fd6;
  --service-automation:#929cf1;

  /* Solid controls carry white text, and the logo colours are far too light
     for that — white on either is about 2.5:1. These are the same two hues
     darkened until white clears AA, so the buttons and the accents are one
     colour family rather than two unrelated ones.
       #5867ea  hue 234deg  white 4.63:1
       #9e53c0  hue 281deg  white 4.72:1
     Worst point across the gradient: 4.63:1. */
  --service-search-solid:#9e53c0;
  --service-automation-solid:#5867ea;
  --gradient-services:linear-gradient(100deg,var(--service-automation) 0%,var(--service-search) 100%);

  /* Content surfaces are solid now, not glass. #212131 is 10% white over --bg,
     chosen to reproduce the contrast Apple's dark content card holds against
     its own page: #1d1d1f on #000 is 1.248:1, and this is 1.252:1 on our
     navy. Once the border and the highlight go, the fill is the only thing
     separating a card from the page, so it has to carry that on its own. */
  --card:#212131;
  --border:rgba(255,255,255,0.14);
  --border-strong:rgba(255,255,255,0.22);

  /* RADIUS — Apple runs a two-step scale, not one value: measured across 15
     apple.com pages on 2026-09-02, 6px appears 932 times on small elements and
     inline media, 28px 319 times on large content surfaces. Everything here
     collapses to those two plus the control pill. Cards previously carried
     five arbitrary radii (0, 20, 22, 24, 28) with no rule for which. */
  --r-surface:28px;   /* any content card, whatever its width */
  --r-inset:12px;     /* media and blocks sitting INSIDE a card */
  --r-pill:980px;     /* buttons, chips, the nav */
  /* aliases kept so existing rules keep resolving */
  --radius:var(--r-surface); --radius-sm:var(--r-inset); --radius-pill:var(--r-pill);
  --shadow-lift:
    0 6px 6px rgba(0,0,0,.015), 0 12px 12px rgba(0,0,0,.02),
    0 24px 24px rgba(0,0,0,.04), 0 48px 48px rgba(0,0,0,.06),
    inset 0 8px 10px rgba(255,255,255,.07), inset 0 -6px 8px rgba(255,255,255,.04);
  --maxw:1100px;
  --maxw-wide:1320px;
  --measure:62ch;     /* prose never runs wider than this, whatever the shell */

  /* ============================================================ TYPE RAMP
     Sizes and tracking measured from 15 apple.com pages on 2026-09-02 at
     1380px: /iphone /mac /ipad /macbook-air /watch /airpods
     /apple-intelligence /environment /services /business
     /business/small-business /education /iphone/compare /support
     /legal/privacy.

     Two rules come out of that measurement and both are load-bearing:

     1. ONE tracking value per size, and it never varies. Apple's 48px
        heading is -0.144px on all ten pages that use it. Line height and
        weight vary by context; tracking does not.

     2. Tracking is PROPORTIONAL to size, so it belongs in em, and the
        curve changes sign twice:
          80px -0.015em   48px -0.003em   40px  0        28px +0.007em
          64px -0.009em   32px +0.004em   24px +0.009em  21px +0.011em
          17px -0.022em   14px -0.016em   12px -0.010em
        Negative on display type where the letterforms already crowd,
        through zero at 40px, OPEN across 21-32px, then negative again at
        17px and below — that last flip is where Apple's text cut takes
        over from its display cut.

     The site previously tightened everything, hardest exactly where Apple
     opens up: 21px was set to -0.3px against Apple's +0.231px, and the
     40px section heading to -0.8px against Apple's zero. */
  --t-12:12px;  --ls-12:-0.010em;   /* eyebrows, legal, footer */
  --t-14:14px;  --ls-14:-0.016em;   /* captions, labels, card body */
  --t-17:17px;  --ls-17:-0.022em;   /* BODY */
  --t-21:21px;  --ls-21: 0.011em;   /* lead paragraph, hero sub */
  --t-24:24px;  --ls-24: 0.009em;   /* card title, FAQ question */
  --t-28:28px;  --ls-28: 0.007em;   /* sub-heading */
  --t-32:32px;  --ls-32: 0.004em;   /* card headline */
  --t-40:40px;  --ls-40: 0;         /* SECTION HEADING */
  --t-48:48px;  --ls-48:-0.003em;
  --t-56:56px;  --ls-56:-0.006em;   /* hero */
  /* Uppercase micro-labels are the one case that takes POSITIVE tracking
     regardless of size: capitals have no ascender/descender rhythm to space
     them, so they need it added back. Apple tracks its uppercase eyebrows
     around a tenth of an em. Previously this site used 3px on the hero
     eyebrow (a quarter of an em, visibly loose) and 1.2px on tier labels. */
  --ls-caps:0.1em;
  /* legacy names, mapped onto the ramp */
  --t-xs:var(--t-12); --t-sm:var(--t-14); --t-base:var(--t-17);
  --t-md:var(--t-21); --t-lg:var(--t-28); --t-xl:var(--t-40);
  --t-2xl:var(--t-48); --t-3xl:var(--t-56);

  /* SECTION RHYTHM — Apple's section padding is not one value. Across the
     same 15 pages: 144px dominates (54 instances), with 192px for a major
     narrative break and 112/96/75px where sections belong together. Every
     section on this site was 100/100, which read as flat because it was.
     The heading-to-content gap matters more: Apple's median is 29px, and
     this site's was 76-100px, so headings sat almost as far from their own
     paragraph as from the previous section. */
     DEVIATION FROM THE MEASURED APPLE VALUES, and why. First pass used
     Apple's own 192/144/96. It did not survive contact with this content:
     Apple's sections run 567-2241px tall because they carry full-bleed
     product photography and long narratives, so 144px of padding is about
     a fifth of the block it separates. These sections run 490-1240px of
     mostly text, where the same 144px became nearly half the block and the
     page read as a string of disconnected fragments rather than a argument.
     The values below hold Apple's RATIO of gap to content, and its 2:1.4:1
     relationship between the three steps, at this site's scale. */
  --sec-major:144px;  /* a real change of subject */
  --sec:112px;        /* standard section */
  --sec-tight:80px;   /* sections that belong together, e.g. pricing -> FAQ */
  /* Clause spacing in a long text document. Measured on an Apple support
     article, which is the true counterpart to this page — continuous prose
     broken by clause headings, not a marketing page and not an accordion.
     Its clause headings are 40px/600, the same size used here, and they sit
     52px below the end of the previous clause. 26px of section padding on
     each side produces exactly that. Apple's own privacy policy is an
     accordion, so it is not a usable reference for this layout. */
  --sec-doc:26px;
  --gap-head:36px;    /* heading to its own content; Apple's median is 29px */

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:100px;

  /* Apple's own stack: SF Pro on Apple devices, Segoe UI on Windows, Roboto on
     Android — the same fallback chain apple.com uses. The Tiny5 wordmark is
     unaffected. */
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','Segoe UI',Roboto,system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue','Segoe UI',Roboto,system-ui,sans-serif;
  --font-pixel:'Tiny5',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
/* The ramp needs an anchor. Without a font-size here the base was the
   browser's 16px, so anything that did not set a size explicitly fell off
   the scale silently. Nothing visible was inheriting it today; this stops
   the next thing that gets added from doing so. */
body{font-family:var(--font-body);font-size:var(--t-17);letter-spacing:var(--ls-17);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(720px 520px at 78% -8%, rgba(124,106,240,0.28), transparent 60%),
  radial-gradient(680px 560px at 8% 12%, rgba(201,124,240,0.16), transparent 62%),
  radial-gradient(900px 700px at 92% 78%, rgba(245,166,35,0.07), transparent 60%), var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
/* Bold alone on muted body text barely registers; emphasis takes the white too. */
p strong, li strong{color:var(--white)}
/* Visually hidden, still spoken, still in the page's text. Used where the
   layout supplies a separation the copy makes with punctuation — the em dash
   between a step number and its title, or a tier name and its badge. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-wide{max-width:var(--maxw-wide)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--white);line-height:1.14;font-weight:600;text-wrap:balance}
/* Each heading level takes the tracking that belongs to its size. Nothing
   below is allowed to set letter-spacing again without changing size too. */
h1{font-size:var(--t-56);letter-spacing:var(--ls-56)}
/* Every section heading is the SAME size. Importance is signalled by
   surrounding space, never by making one heading bigger than its peers.
   This is also the one size where a direct comparison with Apple exists:
   Apple sets 40px headings at normal tracking, so this does too. */
h2{font-size:var(--t-40);letter-spacing:var(--ls-40)}
h3{font-size:var(--t-28);letter-spacing:var(--ls-28)}
h4{font-size:var(--t-21);letter-spacing:var(--ls-21)}

/* Standard rhythm. #book takes the tight value further down: a closing CTA
   belongs to the section above it, not to a new subject. */
.section{padding:var(--sec) 0}
/* BACKGROUND RHYTHM — hero plain / help band / about plain / work band /
   faq plain / cta plain. Fades in and out so there is no hard seam; just
   enough separation that the page stops reading as one long card stack. */

/* Keyboard focus — was entirely missing */
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:4px}
/* ---- Buttons: ported from the live site. Primary = gradient fill.
   Secondary = gradient stroke + gradient text (not a grey ghost). ---- */
/* Apple's filled pill measures 17px/600 with 12px 22px padding and a 22px
   radius. Its outline variant is actually smaller and lighter (8px 16px, 400),
   but Steph wants the two the same height, so the outline takes the filled
   button's box and keeps the lighter weight. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-size:var(--t-base);line-height:20px;
  padding:12px 22px;border-radius:980px;white-space:nowrap;
  transition:opacity .2s, background .2s}
/* transparent 1px border so the filled and outline pills measure the same. */
/* Apple's filled marketing button measures 17px/400 at 44px tall, 28 times
   across the reference set. A filled pill already carries its emphasis in the
   fill; adding weight on top makes it insist rather than invite. */
.btn-primary{background:var(--gradient-cta);color:#fff;font-weight:400;
  border:1px solid transparent;box-shadow:none}
.btn-primary:hover{opacity:.88}
/* Outline keeps the brand's gradient ring rather than a flat border: the ring
   is a gradient painted into a 1px frame with a mask, and the label is the
   same gradient clipped to text. Both use the logo pair, so the outline and
   filled buttons are the same two colours at different lightness. */
.btn-outline{position:relative;background:none;font-weight:400;
  border:1px solid transparent;color:transparent;box-shadow:none}
.btn-outline::before{content:'';position:absolute;inset:0;
  border-radius:980px;padding:1px;background:var(--gradient-stroke);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.btn-outline span{background:var(--gradient-stroke);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.btn-outline:hover{background:rgba(255,255,255,.05)}

/* ---- Apple liquid glass, ported from the live site ---- */
/* Content is FLAT. Apple's "Adopting Liquid Glass" puts the material on the
   navigation and control layer only — it is meant to bring attention to the
   content underneath, and using it as the default container for the content
   itself works against that. So the whole glass apparatus comes off every
   content card: no backdrop blur, no gradient rim, no specular highlight, no
   lift shadow, and — following Apple's own dark card, which has none — no
   border either. A solid fill and the radius are all that is left.
   Glass now appears in exactly one place on the site: the nav. */
.card{position:relative;border-radius:var(--radius);
  background:
    linear-gradient(135deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 56%),
    radial-gradient(135% 95% at 50% -12%,rgba(255,255,255,.13),rgba(255,255,255,0) 56%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(165%) brightness(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(165%) brightness(1.06);
  box-shadow:0 14px 38px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.28),
    inset 0 1.5px 0 rgba(255,255,255,.62),inset 1.5px 0 0 rgba(255,255,255,.16),
    inset -1.5px 0 0 rgba(0,0,0,.12),inset 0 -1.5px 0 rgba(0,0,0,.20)}
@media (prefers-reduced-transparency:reduce){
  .card{background:var(--card);border-color:var(--border);
    backdrop-filter:none;-webkit-backdrop-filter:none}}

.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000;
  border-radius:var(--radius-pill);padding:12px 28px;
  max-width:calc(var(--maxw) - 48px);width:calc(100% - 48px);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 6px 6px rgba(0,0,0,.015), 0 12px 12px rgba(0,0,0,.02), 0 24px 24px rgba(0,0,0,.04),
    inset 0 4px 6px rgba(255,255,255,.06), inset 0 -3px 5px rgba(255,255,255,.03)}
.nav-inner{width:100%;display:flex;align-items:center;justify-content:space-between}
/* The wordmark is the one exemption from the ramp: it is set in Tiny5, a
   pixel face whose grid has nothing to do with the SF metrics everything
   else is tuned to. Its size and tracking are drawn to the mark. */
.logo{font-family:var(--font-pixel);font-size:22px;font-weight:700;letter-spacing:1px;
  background:linear-gradient(101deg,rgb(131,164,255) 0%,rgb(255,155,232) 94%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:40px;align-items:center}
.nav-links a{color:var(--white);font-size:var(--t-sm);font-weight:500;transition:color .2s}
.nav-links a:hover{color:#fff;text-shadow:0 0 12px rgba(168,85,247,.4)}
.nav-cta{font-size:var(--t-12);font-weight:600;color:#fff;background:var(--gradient-cta);
  padding:10px 20px;border-radius:var(--radius-pill);transition:transform .2s;white-space:nowrap}
.nav-cta:hover{transform:translateY(-1px)}
/* the two remaining clickables that had no hover: the wordmark and the menu button */
.logo{transition:opacity .2s}
.logo:hover{opacity:.82}
.nav-hamburger{transition:opacity .2s}
.nav-hamburger:hover{opacity:.6}
.nav-cta-mobile{display:none}
.nav-hamburger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);
  border-radius:2px;transition:transform .3s,opacity .3s}
.nav-hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ============================================================ ① HERO */
/* Top padding clears the floating nav pill, same as the live site. */
.hero{position:relative;padding:150px 0 80px;text-align:center}
/* Ported from the live site's .hero-eyebrow */

.hero-cta{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}

/* ================================================= ② HOW I HELP
   The two tracks and the four offers now live in ONE section, inside one
   framed panel — the tracks are explained once, at the top of the panel,
   instead of getting their own section and then being repeated. */
/* Blue vs pink — the two ENDS of the brand gradient. The previous pair
   (blue vs violet) sat too close together to tell the tracks apart. */

/* Same liquid-glass recipe as the live site: neutral white rim, specular
   highlight, cascading shadows. The blue/violet only survives as a soft
   ambient glow behind the panel, never as the border itself. */

/* Neutral gradient stroke — the live site's .glass-card::before */

/* Specular highlight across the top */

/* --- the two tracks, explained once. No rules inside the panel — the
   separation is whitespace; rules are reserved for inside the cards. --- */

/* Stacked and centred: icon, then title, then description.
   Bare line icon — no chip, no border. Same stroke conventions as the
   live site's .contact-half-icon svg. */

/* A clear step above the 18px card names, so the tracks read as the
   categories and the cards read as the products. */

/* --- the four offers --- */
/* PURCHASE CARD, not a feature list. Reading order is the buying order:
     name → outcome → price+timeline → button → what's included
   6 subgrid rows: h4, o-line, o-buy, o-cta, o-label, o-list(1fr).
   Rows 1–5 align across all four cards, so the four buttons sit on one
   line; only the deliverable lists run to different lengths. */

/* Glass, same recipe as the live site. The local --radius override makes the
   inherited .card::before / ::after rim and highlight follow the card radius. */

/* The default-marked card. */

/* SPACING RHYTHM — three values, nothing else:
     16  bound together (name→outcome, price→button)
     24  between groups, and symmetric on both sides of every rule
     12  inside a list
   COLOUR — three levels, nothing else:
     white   the two things being bought (name, price)
     accent  the button
     muted   literally everything else
   That is what makes the price the first thing the eye lands on. */

/* Price and timeline share one line — second and third thing an owner
   looks for, so they sit together, above the button, not in a footnote. */

/* Same label-then-value shape as "What's included", so the two blocks
   read as one system. No rule above it — the eyebrow already separates. */

/* Buttons use the site's existing .btn-outline — gradient stroke, gradient
   label — just stretched to the card width. Pinned to the card bottom, so
   all four align however long the list above them runs. */

/* Deliverables come last and quietest — they confirm the purchase, they
   don't sell it. Eyebrow label, muted list, colour only on the dots. */

/* Scope cap — the boundary of what the price buys, stated on the card. */

/* ================================================= ④ PROOF
   Two quotes, same glass recipe as the offer cards. */

/* ================================================= ⑤ MEET STEPH
   Centred stack inside the glass panel: portrait, statement, story, figures. */
/* Both glass panels share one padding value (48), which is larger than
   any gap inside either of them — so each reads as one block. */

/* Same rank as .contact-headline — one "statement inside a card" size. */

.meet-text{margin-top:16px;max-width:none}
/* balance keeps line 1 and line 2 close in length instead of a long
   line followed by a stub */
.meet-text p{color:var(--muted);font-size:var(--t-md);line-height:1.65;text-wrap:pretty}
/* The YouTube link is a secondary path, kept out of the bold hierarchy: no
   bold, a soft colour and a thin underline only, so it never competes with
   the three white highlights. Opens in a new tab (this is the About-style
   pitch and we don't want to send the reader off the site). */
.meet-text a{color:var(--service-automation);font-weight:inherit;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .2s}
.meet-text a:hover{color:var(--white)}
.meet-text p + p{margin-top:12px}

/* ---------- THREE FIGURES ----------
   The spec-figure treatment measured on Apple's site: a hairline, then the
   number at 48px/600, then a quiet caption hard against it. Three across, with
   the rule running over each column rather than between them. */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);
  max-width:900px;margin:var(--s-5) auto 0}
.stat{padding-top:var(--s-3);border-top:1px solid var(--border);text-align:left}
.stat h3{font-size:var(--t-48);font-weight:600;letter-spacing:var(--ls-48);line-height:1;
  width:max-content;max-width:100%;
  background:var(--gradient-services);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.stat p{margin-top:12px;color:var(--muted);font-size:var(--t-sm);line-height:1.5;
  max-width:none}

/* Gradient ring portrait — ported from the live site's .photo-ring */

/* ================================================= ⑥ YOUTUBE */

.video-thumb{position:relative;aspect-ratio:16/9;background:rgba(8,8,26,.5);overflow:hidden}
.video-thumb img{width:100%;height:100%;object-fit:cover}
/* Live site's .yt-play */

/* Spacing hierarchy in this section:
   title→subtitle 14  <  subtitle→button 28  <  button→videos 56
   Tightest between things that belong together, widest between groups. */

/* ================================================= FAQ
   The class-based accordion this block used to style is gone: the FAQ is
   native <details> now, and its styling lives in the Home block below and
   applies site-wide. Nothing on any page carries .faq-q, .faq-item.open or
   a .faq-icon span any more, so these rules were dead. */

/* ============================== ⑧ LET'S TALK
   Ported from the live site: one panel, a loud top half and a quiet split
   bottom, so the secondary options read as part of the same offer instead
   of competing with the booking CTA. */
/* The closing CTA is the resolution of the section above it, not a new
   subject, so it takes the tight rhythm on top and closes the page short. */
.section-contact{padding-top:var(--sec-tight);padding-bottom:var(--s-5)}

/* .section-head carries its own 48px bottom margin, which would stack on
   top of the flex gap above and push the panel 108px down instead of the
   live site's 60. The container owns the spacing here. */

/* ================================================= FOOTER */
/* Ported from the live site: divider + copyright + icon-only socials. */
.footer{padding:40px 0 24px}
.footer-divider{width:100%;height:1px;background:rgba(255,255,255,.08);margin-bottom:20px}
.footer-row{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-12)}
.footer-left{color:var(--muted)}

/* ================================================= MOTION */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
/* Reduced motion means "don't animate", not "don't change state": the
   hamburger still becomes an X and the FAQ icon still turns into a cross —
   they just get there instantly. Only movement that exists purely for
   decoration is removed outright. */
@media (prefers-reduced-motion:reduce){
  /* Entrance animations jump straight to their end state. */
  .reveal{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}

  /* Everything else keeps its end state but stops travelling to it. This
     covers the accordion's max-height slide and the hamburger's bars. */
  *,*::before,*::after{
    transition-duration:.01ms!important;transition-delay:0ms!important;
    animation-duration:.01ms!important;animation-delay:0ms!important}

  /* Lift-on-hover is movement for its own sake. The shadow change is left in
     place, so hover still gives feedback. */
  .btn-primary:hover,.btn-outline:hover,.nav-cta:hover{transform:none!important}
  

  html{scroll-behavior:auto}
}

/* ================================================= RESPONSIVE
   WHEN EDITING THIS BLOCK: if you change an element's `display` in the
   base styles, re-check every rule for it down here. flex-direction is
   inert on a grid and grid-template-columns is inert on a flex box —
   neither errors, the rule just silently stops working. That is how
   .stats ended up three-across on phones. */

/* --- 4 cards -> 2. Subgrid is dropped here: with two columns the shared
       row track no longer lines up, so each card becomes its own flex
       column and .o-list takes the slack to keep the buttons aligned. --- */

/* --- Nav pill goes full width (live site's breakpoint) --- */
@media (max-width:960px){
  .nav{top:0;border-radius:0;width:100%;left:0;transform:none;padding:12px 16px;max-width:100%}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(8,8,26,.985);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 24px;width:100%}
  .nav-cta{display:none}
  .nav-cta-mobile{display:block;color:#fff!important;font-weight:600!important}
  .nav-hamburger{display:flex;padding:12px 11px}
  
  
}

/* --- Tablet: one video column (3 into 2 leaves an orphan), stats stack --- */
@media (max-width:860px){
  
  /* .stats is a grid, so flex-direction did nothing here — it stayed three
     columns and the descriptions wrapped two words per line. */
  .stats{grid-template-columns:1fr;gap:var(--s-3);max-width:420px}
  
}

/* --- Phone --- */
@media (max-width:700px){
  :root{--s-7:64px}
  
  
  
  
  
  
  
  .faq-a-inner{padding:0 18px 20px;font-size:var(--t-sm)}
  
  .footer-row{flex-direction:column;gap:16px;text-align:center}
}

@media (max-width:420px){
  .wrap{padding:0 18px}
  
  
  
  .btn{padding:13px 24px}
}

/* ============================================================
   PHASE 2 — SKELETON STRUCTURE ONLY
   These rules exist so the four new pages are legible while their
   copy is reviewed. They are spacing and affordance, not design:
   no new colours, no new type sizes, nothing decorative. Phase 3
   replaces this whole block pattern by pattern against the mock-ups.
   ============================================================ */

/* --- No-JS fallback for the mobile nav ---
   Below 960px the nav collapses and only opens when JavaScript adds
   .open to .nav-links. With JavaScript off that left a visible
   hamburger that could not open anything, and on a four-page site the
   nav is how you get between pages. The inline bootstrap in <head>
   sets html.js before first paint, so html:not(.js) is exactly the
   JS-disabled case: show the links, hide the control that cannot work. */
@media (max-width:960px){
  /* Showing the panel is not enough: .nav is fixed and the panel is absolutely
     positioned inside it, so with no script it sat on top of the h1 rather than
     beside it. With no script the whole bar goes back into the flow and the
     page starts below it. */
  html:not(.js) .nav{position:relative}
  html:not(.js) .nav-inner{flex-direction:column;align-items:flex-start;gap:6px}
  html:not(.js) .nav-links{display:flex;position:static;background:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;padding:8px 0 0}
  html:not(.js) .nav-hamburger{display:none}
}

/* --- Native <details> FAQ ---
   The accordion is now markup, not script, so it survives JS being off.
   It needs the affordance the old button had. */
/* Superseded — the FAQ is styled once, in the Home block below, and that
   styling applies to every page's FAQ. */

/* --- Skeleton block spacing ---
   One rule: give every stacked block room to be read. */
.demo{
  padding:24px 0;border-top:1px solid var(--border)}
.demo > * + *{margin-top:12px}
.section .wrap > * + *{margin-top:20px}
/* Apple's section headings sit a median 29px above their own content; these
   sat 76-100px, which made a heading look as detached from its paragraph as
   from the previous section. */
.section > .wrap > h2 + *{margin-top:var(--gap-head)}
/* One measure for prose, whatever shell it sits in. Apple's median line is
   53 characters and its upper quartile 75; the widest line here was 106. */
.section p{max-width:var(--measure)}

/* Superseded — footer columns are styled once, in the Home block below. */

/* Superseded — the footer legal row is styled once, in the Home block below. */

.identity-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.policy-updated{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);
  font-size:var(--t-xs);color:var(--muted-dim);line-height:1.8}

/* ============================================================
   HOME — full page
   Rhythm is open -> dense -> open. Section headings are centred
   throughout; only the inside of a multi-column block is left-aligned,
   because that is where lines get long enough to need a common left edge.
   Glass is an emphasis tool, not the default container.
   ============================================================ */

/* Every section heading on Home reads at the same level and is centred. */
/* Every section heading on Home, listed once so a new section cannot quietly
   opt out of the alignment the way #meet and #proof just did. */
/* #faq and #book are not unique to Home — Automation has an #faq and About a
   #book — so these are scoped to the page as well as the section. */
#home-page #services > .wrap > h2,#home-page #method > .wrap > h2,#home-page #meet > .wrap > h2,#home-page #testimonials > .wrap > h2,#home-page #faq > .wrap > h2,#home-page #book > .wrap > h2{
  text-align:center;font-size:var(--t-xl);font-weight:600;
  letter-spacing:var(--ls-40);line-height:1.1;color:var(--white);
  max-width:24ch;margin:0 auto;text-wrap:balance}

/* ---------- HERO ---------- */
/* Not full-screen: at a ~900px laptop this leaves the next section visible at
   the fold. Mobile ignores the vh and lets content set the height. */
.hero{position:relative;text-align:center;min-height:74vh;
  display:flex;align-items:center;padding:calc(var(--s-7) + 56px) 0 var(--s-6)}
.hero .wrap{width:100%}

/* Pill with a gradient ring and gradient label, matching the outline button. */
.hero-eyebrow{position:relative;display:inline-block;padding:9px 22px;
  border-radius:var(--radius-pill);
  color:var(--service-search);
  font-size:var(--t-12);font-weight:600;letter-spacing:var(--ls-caps);
  text-transform:uppercase;margin-bottom:var(--s-3)}
.hero-eyebrow::before{content:'';position:absolute;inset:0;
  border-radius:var(--radius-pill);padding:1px;background:var(--gradient-stroke);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.hero h1{font-size:var(--t-56);font-weight:600;line-height:1.08;
  letter-spacing:var(--ls-56);color:var(--white);margin-bottom:var(--s-3)}

.hero .sub{font-size:var(--t-md);font-weight:600;letter-spacing:var(--ls-21);line-height:1.28;color:var(--muted);
  max-width:56ch;margin:0 auto var(--s-3)}


.hero-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* The hero ends without a hard edge: the section below simply starts. */
@media (max-width:960px){
  .hero{min-height:0;padding:calc(var(--s-7) + 20px) 0 var(--s-5)}
}

/* ---------- TWO PROBLEMS ----------
   Hierarchy from Steph's sketch: the service name is the top level and the
   largest thing in the card; the sentence under it explains the name, so it
   is a step smaller but still bold; a rule separates that from the examples,
   which are smaller again. Leading is tighter than the page default — the
   card was reading as loose, disconnected lines. */
/* 880px puts each card text column at ~364px, where the AI Search
   question sits at three lines and the shorter Automation one at two —
   measured, not guessed. */
.problems{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);
  max-width:880px;margin-inline:auto}
@media (max-width:860px){.problems{grid-template-columns:1fr}}
/* "Explore AI Workflow Automation →" is a nowrap label, so its min-width sets
   the card's. At 17px inside 32px padding that came to 371px against the 354px
   a 390px screen has, and pushed the whole page sideways. */
@media (max-width:700px){
  .problem{padding:var(--s-3)}
  .problem-cta .btn{width:100%;font-size:var(--t-sm);padding:13px 14px}
}
/* Below 420 even the 14px label does not fit, so it is allowed to wrap. A
   two-line button on a 320px screen is better than a page that scrolls
   sideways. */
@media (max-width:420px){
  .problem-cta .btn{white-space:normal;line-height:1.35}
}

.problem{--radius:var(--r-surface);padding:var(--s-4);text-align:center;
  display:flex;flex-direction:column}
/* Emoji are kept deliberately. What was not deliberate was their being three
   different sizes with three different gaps across three pages, so they are
   set once here and the per-page rules only position them. The stack keeps a
   colour emoji face rather than letting a platform fall back to a monochrome
   text glyph. */
.problem-ic,.tile-ic{display:block;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-size:var(--t-28);line-height:1;margin-bottom:var(--s-2)}

/* 1 — service name: biggest, boldest, in its own colour */
.problem h3{font-size:var(--t-28);font-weight:600;letter-spacing:var(--ls-28);
  line-height:1.15;margin-bottom:10px}

/* 3 — the examples, at body size. Declared before the lead and excluding it:
   `.problem p` outranks a bare `.problem-lead` by one point, so an unscoped
   lead rule silently loses. */
.problem p{color:var(--muted);font-size:var(--t-sm);line-height:18px;max-width:none}
.problem p + p:not(.problem-cta){margin-top:10px}

/* 2 — the sentence that explains the name: smaller than it, still bold */
.problem .problem-lead{color:var(--muted);font-size:var(--t-base);font-weight:400;
  line-height:1.5;margin-bottom:0}
/* the rule that separates the explanation from the examples */
.problem .problem-lead + p:not(.problem-cta){border-top:1px solid var(--border);padding-top:18px}

/* A centred text link with a chevron, the layout Steph pointed to (Apple's
   centred feature card: title, body, then a text link, not a button).
   margin-top:auto pins it to the foot so both cards' links sit on one line. */
.problem-cta{margin-top:auto;padding-top:18px}
.card-link{display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-17);font-weight:400;letter-spacing:var(--ls-17);
  text-decoration:none;transition:gap .2s}
.card-link::after{content:'\203A';font-weight:400;font-size:1.2em;line-height:0}
.card-link:hover{gap:9px}
.problem--search .card-link{color:var(--service-search)}
.problem--automation .card-link{color:var(--service-automation)}
.problem--search h3{color:var(--service-search)}
.problem--automation h3{color:var(--service-automation)}

/* ---------- METHOD — three cards ----------
   Same shape as Apple's three-up value cards: the numeral takes the place of
   their icon, there are no rules between the columns, and no link at the foot
   of each card. */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
.principle{--radius:var(--r-surface);padding:var(--s-4);text-align:left;border:0}
/* 25px = the previous 20px scaled by the 1.25 Steph asked for, filled with
   the logo gradient. At 25px/700 this counts as large text, so 3:1 applies and
   both ends clear it comfortably. */
/* The reference sets its STEP label tight to the title and the title tight to
   the body, then leaves the air between cards. 25px stays — Steph asked for the
   numeral at 1.25x — but it now sits 10px off its title instead of 18px. */
.principle-n{display:block;font-size:var(--t-24);font-weight:700;
  letter-spacing:var(--ls-24);line-height:1;margin-bottom:10px;
  background:var(--gradient-services);-webkit-background-clip:text;
  background-clip:text;color:transparent;width:max-content}
.principle h3{font-size:var(--t-21);font-weight:600;color:var(--white);
  line-height:1.25;letter-spacing:var(--ls-21);margin-bottom:10px;text-wrap:balance}
.principle p{color:var(--muted);font-size:var(--t-sm);line-height:18px;max-width:none}
@media (max-width:860px){
  .principles{grid-template-columns:1fr;gap:var(--s-3)}
}

/* ---------- MEET STEPH — centred inside a glass card ---------- */
/* Position taken from the mock-up, not its styling. The circular portrait is
   also the reason to prefer this over the side-by-side layout: images/steph.jpg
   is 253px square, which is plenty for a 150px avatar and not enough for a
   half-width portrait. */
.meet-card{--radius:var(--r-surface);max-width:calc(var(--maxw) - 48px);margin:0 auto;
  padding:var(--s-6) var(--s-5);text-align:center}
.meet-card > * + *{margin-top:18px}
.meet-portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;
  margin:0 auto;border:2px solid var(--border-strong)}
/* The lead sits between the section heading and the body, so it needs a step
   of its own rather than sharing the card-title size. */
/* Held to roughly the paragraph measure below it. Left to run free the line
   reached 954px above a 728px column and the two stopped reading as one
   block; constrained, it breaks at the full stop, which is where the sentence
   wants to break anyway. */
/* The section heading is the title; this is the line that supports it. At
   32px against a 40px heading the two competed and the hierarchy read as
   ambiguous. Dropped to the ramp's 21px/600, which is the size Apple uses
   for the supporting line in a heading lockup. */
.meet-card h3{font-size:var(--t-28);font-weight:600;color:var(--white);
  line-height:1.3;letter-spacing:var(--ls-28)}
/* text-wrap:balance evens the line lengths so a paragraph does not end with a
   line half the width of the one above it. */
/* pretty, not balance: balance evens the line lengths, which on a short
   paragraph keeps it in a narrow column no matter how much measure it is given.
   pretty fills the line and only guards the last one against an orphan. */
.meet-card p{color:var(--muted);font-size:var(--t-base);line-height:25px;
  max-width:76ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.meet-cta{padding-top:var(--s-2)}
@media (max-width:700px){
  .meet-card{padding:var(--s-5) var(--s-3)}
  .meet-portrait{width:120px;height:120px}
}

/* ---------- WHAT CLIENTS SAY — placeholder until real quotes exist ---------- */
/* Two cards tilted in opposite directions. The angle is small on purpose:
   enough to read as a pair of physical cards, not enough to make the text
   awkward to read or to cause a horizontal scrollbar. */

/* A tilt is decoration; straighten the cards when motion is reduced. */

/* ---------- REDUCED TRANSPARENCY ----------
   From Apple's "Adopting Liquid Glass": people can turn on accessibility
   settings that reduce transparency, and the guidance is to make sure custom
   elements are tested against them — system components adapt on their own,
   custom ones do not. Every glass surface here is custom, and nothing was
   answering this query, so the whole material stayed on for someone who had
   asked the OS to turn it off.

   The fallback keeps the shape, the border and the lift, and swaps the
   material for an opaque surface: no blur, no see-through background, and no
   specular highlight, since a highlight on an opaque panel reads as a stray
   gradient rather than as glass.

   #121223 is --card composited over --bg — computed, not picked — so a panel
   lands on exactly the tone it already shows and does not shift. Text on it:
   --white 14.97:1, --muted 6.82:1, both past AA. */
@media (prefers-reduced-transparency:reduce){
  .nav{background:#121223!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ---------- FAQ — apple.com/ca/apple-one, measured ----------
   Row: padding 20px 0, 1px bottom rule at rgba(255,255,255,.2), no card.
   Question: 24px/600, 35px line. Marker: a plus that rotates to a cross on
   0.3s ease-out. Apple has no :hover rule on the row or the question — every
   stylesheet on the page was searched and none exists — so neither do we. */
/* The question spanned 820px while its answer was capped at 60ch, leaving a
   wide empty column beside every open item. Both now sit on one measure. */
.faq-list{max-width:720px;margin:0 auto}
details.faq-item{--radius:0;background:none;border:0;border-radius:0;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(255,255,255,.2);padding:20px 0}
details.faq-item::before, details.faq-item::after{content:none}
details.faq-item summary{list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:0;font-size:var(--t-24);font-weight:600;line-height:35px;
  color:var(--white);text-align:left;letter-spacing:var(--ls-24)}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::marker{content:'';font-size:0}
/* The plus, drawn in CSS so no page has to carry an extra span. */
details.faq-item summary::after{
  content:'';flex:0 0 auto;width:29px;height:35px;
  background:
    linear-gradient(var(--white),var(--white)) center/17px 1.5px no-repeat,
    linear-gradient(var(--white),var(--white)) center/1.5px 17px no-repeat;
  transition:background-size .25s ease-out}
/* Open state is a MINUS, not a cross. Rotating the plus 45deg produces an X,
   which reads as "dismiss this" rather than "collapse this" — the vertical
   bar retracts instead, so the control keeps saying the same thing. */
details.faq-item[open] summary::after{background-size:17px 1.5px,1.5px 0}
.faq-a-inner{padding:12px 0 0;color:var(--muted);font-size:var(--t-base);
  line-height:25px;max-width:var(--measure);text-align:left}
.faq-a-inner > * + *{margin-top:14px}

/* ---------- LET'S TALK ---------- */
/* The two sentences sat far apart with a lot of air for very little text, so
   the first is promoted to a lead and the second follows it closely instead of
   reading as a separate block. */
.section-contact{text-align:center}
.contact-card{--radius:var(--r-surface);max-width:700px;margin:0 auto;
  padding:var(--s-5) var(--s-4)}
/* .contact-lead alone loses to .section-contact p, which is one point more
   specific, so the lead is scoped and the body rule excludes it. */
.section-contact p{color:var(--muted);font-size:var(--t-base);line-height:25px;
  max-width:56ch;margin-left:auto;margin-right:auto}
.section-contact .contact-lead{color:var(--white);font-size:var(--t-28);
  font-weight:600;line-height:1.2;letter-spacing:var(--ls-28);text-wrap:balance;
  /* 24ch broke all three of these leads onto two lines. The longest is
     "Find out what AI says before you invest in improvements" at 54 characters,
     so 56ch holds every one of them on a single line inside the card. */
  max-width:56ch;margin-left:auto;margin-right:auto}
.contact-lead + p{margin-top:14px}
/* Let's Talk lead is the card title (a question) — unified at 28px across
   every page. */
/* Balance the two lines of the body so the second is not left a short widow. */
.section-contact .contact-lead + p{text-wrap:balance}
.section-contact .hero-cta{margin-top:var(--s-4)}
@media (max-width:700px){.contact-card{padding:var(--s-4) var(--s-3)}}

/* ================================================================ ABOUT
   The page is one person's, so it opens with her face and then keeps every
   block on the same measure. Nothing here is a new pattern: the identity card,
   the two practice cards and the working-with-me card are the glass card at
   three widths, and the featured video reuses the demonstration slot's play
   affordance. */
/* Two columns at the nav's width, not the wide one. The right column is a fixed
   320px — enough for the portrait and the identity card — which leaves the left
   column exactly 700px, and 700px is what "Today, I apply that approach to AI
   Search and workflow automation for small businesses." needs to hold one line. */
#about-page .hero{text-align:left}
.about-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--s-5);align-items:center;max-width:960px;margin-inline:auto}
.about-text > * + *{margin-top:16px}
.about-text > .about-services{margin-top:var(--s-3)}
/* The page title is the largest thing on it, and the sentence under it steps
   down to the 32px the other three heroes use for the same slot. */
#about-page .hero h1{text-align:left;margin:0 0 var(--s-2)}
/* 28ch computed to 572.8px against the 573px this line needs, so it broke by
   less than a pixel. The column is 700px wide; 34ch clears it. */
/* The one line under the title. It steps down from the h1 to the 28px the
   other three heroes use for the same slot, and measures 540px against the
   700px column, so the pair of sentences holds one line — the only two-line
   break available to it would split the second sentence after its first word. */
#about-page .hero .about-stance{font-size:var(--t-28);
  line-height:1.25;letter-spacing:var(--ls-28);max-width:none;
  margin:0 0 var(--s-3);text-align:left}
#about-page .hero .about-stance strong{font-weight:600}
#about-page .hero p{margin-left:0;margin-right:0;max-width:none;text-align:left}
#about-page .hero .about-text > p:not(.about-stance){max-width:680px}
#about-page .hero .hero-cta{justify-content:flex-start;margin-top:var(--s-4)}

.about-side{display:block}

/* A thin ring standing off the photo, not a band around it. The portrait sits
   inside the card, so it is sized to leave the name the top of the card rather
   than to be the top of it. */
.identity-portrait{display:block;width:150px;height:150px;margin:0 auto 20px;
  border-radius:50%;padding:5px;border:1.5px solid var(--service-automation)}
.identity-portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  display:block;background:var(--bg)}
#about-page .hero .identity-name{font-size:var(--t-24);font-weight:600;
  line-height:1.2;letter-spacing:var(--ls-24);color:var(--white);margin:0;
  text-align:center;max-width:none;text-wrap:balance}

/* Identity — the entity card. Compact, centred, and the one place on the site
   where the full legal-ish name, role, location and languages sit together. */
.identity{--radius:var(--r-surface);width:100%;padding:var(--s-4) var(--s-3);text-align:center}
.identity p{color:var(--muted);font-size:var(--t-sm);line-height:1.55;max-width:none}
/* The role is the one line that names what she does, so it carries the brand
   gradient; everything under it is muted. */
#about-page .hero .identity-role{margin-top:8px;font-size:var(--t-base);
  font-weight:600;line-height:1.35;text-align:center;max-width:none;
  text-wrap:balance;color:var(--service-search)}

/* Two dividers, as in the mockup: one under the name and role, one above the
   links, so the facts in between read as their own block. Decorative. */
.identity-rule{display:block;height:1px;margin:20px 0 0;background:var(--border)}

/* Icon rows: the icon hangs in its own column so the second line of a row
   stays aligned with the first rather than tucking under the mark. */
.identity-row{display:grid;grid-template-columns:22px 1fr;gap:14px;
  align-items:start;margin-top:20px;text-align:left;font-size:var(--t-sm);letter-spacing:var(--ls-14)}
.identity-row:first-of-type{margin-top:20px}
.identity-row .row-ic{width:19px;height:19px;margin-top:3px;
  color:var(--service-automation)}
#about-page .hero .identity-row{font-size:var(--t-sm);letter-spacing:var(--ls-14)}
#about-page .hero .identity-row span{color:var(--muted);line-height:1.5}
/* The role is the one line in the card that names what she does, so it takes
   the brand gradient; the location and language lines under it stay muted. */

.identity-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  margin-top:20px;padding-top:0}
.identity-links a{color:var(--service-automation);display:inline-flex;transition:color .2s}
.identity-links a svg{width:22px;height:22px;display:block}
.identity-links a:hover{color:var(--white)}

/* The two practice lines, side by side inside the hero and flat — no card, no
   glass. A single hairline between them does the separating, which is lighter
   than two panels and keeps the hero the quiet part of the page. Each name
   takes its service colour and its own mark. */
.about-services{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.about-service{padding-right:var(--s-4)}
.about-service + .about-service{padding-right:0;padding-left:var(--s-4);
  border-left:1px solid var(--border)}
.about-service h3{display:flex;align-items:center;gap:11px;
  font-size:var(--t-21);font-weight:600;line-height:1.2;letter-spacing:var(--ls-21)}
.about-service .svc-ic{flex:0 0 auto;width:22px;height:22px}
.about-service p{margin-top:10px;color:var(--muted);font-size:var(--t-sm);
  line-height:18px;letter-spacing:var(--ls-14);max-width:none}
.about-service--search h3{color:var(--service-search)}
.about-service--automation h3{color:var(--service-automation)}

/* Measured, not guessed: this paragraph holds five lines anywhere from 700px
   to 860px wide, so 780px sits in the middle of that band and stays at five
   even if the font renders a little wider or narrower. The generic inner-page
   measure is 664px, which gives six. */
#path > .wrap > p{max-width:min(100%,780px);text-wrap:pretty}
#working > .wrap > p{max-width:min(100%,780px);text-wrap:balance}
/* Sub-heading over the two chip cards. Centred to sit with the h2 above it
   and the 920px card grid below, which is itself centred. */
#working > .wrap > h3{text-align:center;text-wrap:balance;margin-top:var(--s-5)}

/* The three stages: a tall media tile, then its caption on the page beneath
   it rather than inside a card. The tile is the visual weight and the text is
   quiet under it, so the row reads as three pictures with labels — which is
   what it becomes once the three photographs exist. */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);
  align-items:start}
.path{text-align:left}
/* Vertical rhythm, measured on apple.com/ca/macbook-pro at 1440px, and applied
   to all four pages. Three distances come out of that page:

     heading -> its own first thing          32px   (Apple 32-36)
     paragraph -> paragraph                  20px   (Apple 18, already on * + *)
     content block <-> a new idea            64px   (Apple 56-74)

   The flat 20px on `.section .wrap > * + *` is right for prose and far too
   tight everywhere a block of content meets a new paragraph — Apple never runs
   that relationship under 56px. Before this the four pages disagreed with each
   other as well: heading-to-paragraph was 14px, 20px or 32px depending on the
   page, and heading-to-block was 14px, 20px, 40px or 48px.

   `> .wrap >` rather than `.wrap >` so these are two points more specific than
   `* + *` and beat it without needing !important. */
.section > .wrap > h2 + p,
.section > .wrap > h2 + div,
.section > .wrap > h2 + ul{margin-top:var(--gap-head)}
.section > .wrap > p + div,  .section > .wrap > p + ul,
.section > .wrap > div + p,  .section > .wrap > ul + p,
.section > .wrap > div + div,.section > .wrap > ul + ul{margin-top:64px}

/* Landscape, not the tall 0.82 of the ipad-pro three-up. 3:2 is the native
   ratio of most cameras, so the three photographs will crop into it without
   losing anything. Fixed, so swapping one in cannot change the row's height. */
.path-media{position:relative;aspect-ratio:3/2;border-radius:18px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(146,156,241,.16),rgba(192,143,214,.10));
  border:1px solid var(--border)}
.path-media img{width:100%;height:100%;object-fit:cover;display:block}
.path-media .tile-ic{margin:0;font-size:var(--t-40);opacity:.75}
/* `.card-caption-content.typography-caption-tile` on apple.com/ca/macbook-pro,
   which is the same thing we are building — a media tile with its caption run
   in beneath it:

     17px / 600 / line-height 21 / tracking -0.374px
     lead  #f5f5f7    sentence  #86868b    both 600, both 17px

   Body on that page is 17px/400/25px, so the caption is the same size as body
   but heavier and more tightly led, which is what makes it read as a caption
   rather than as prose. My earlier 21px came from `values-column-copy` on the
   ipad-pro page — a body column, not a tile caption. Wrong component. */
.path-cap{margin-top:var(--s-3);color:var(--muted);font-size:var(--t-base);
  font-weight:600;line-height:21px;letter-spacing:var(--ls-17);max-width:none}
.path-cap strong{font-weight:600}

/* Two figures across, under the paragraph rather than beside it — the
   arrangement Apple uses for figure.stat on macbook-pro, where each figure
   holds its own 390px column and reads left. Bare: no panel, no rule. */
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4);max-width:820px;margin-left:auto;margin-right:auto;
  align-items:stretch;text-align:left}
/* small caps label sitting above a section heading */
.section-eyebrow{font-size:var(--t-12);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:600;color:var(--service-search);
  text-align:center;margin:0 auto var(--s-2)}
/* id-scope so it beats .page-inner .section > .wrap > p */
#about-page .section > .wrap > .section-eyebrow{font-size:var(--t-12);color:var(--service-search);max-width:none;line-height:1.3}
.result{text-align:left;border-radius:var(--r-surface);padding:var(--s-4) var(--s-4);
  background:
    linear-gradient(135deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 56%),
    radial-gradient(135% 95% at 50% -12%,rgba(255,255,255,.13),rgba(255,255,255,0) 56%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(165%) brightness(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(165%) brightness(1.06);
  box-shadow:0 14px 38px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.28),
    inset 0 1.5px 0 rgba(255,255,255,.62),inset 1.5px 0 0 rgba(255,255,255,.16),
    inset -1.5px 0 0 rgba(0,0,0,.12),inset 0 -1.5px 0 rgba(0,0,0,.20)}
@media (prefers-reduced-transparency:reduce){
  .result{background:var(--card);border-color:var(--border);
    backdrop-filter:none;-webkit-backdrop-filter:none}}
/* the stat emoji sits above the figure; it rides a data attribute so it stays
   out of the copy text and the check-copy diff. */
.result::before{content:attr(data-num);display:block;
  font-size:var(--t-12);letter-spacing:var(--ls-caps);text-transform:uppercase;
  font-weight:600;line-height:1;color:var(--service-search);margin-bottom:12px}
/* These two are hero figures, not a spec row, so they take Apple's heavier
   treatment rather than the 48px/600 the three-up .stat row on AI Search uses:
   the numeral carries the block and the caption under it is deliberately
   small. 64px at 700 measures 345px inside a 466px content width. */
/* 48px/600, line-height 48, tracking -0.144px — measured on figure.stat at
   apple.com/ca/macbook-pro. 64px was overscaled and -1px far too tight for
   a figure this size. */
.result h3{font-size:var(--t-24);font-weight:600;letter-spacing:var(--ls-24);
  line-height:1.2;max-width:100%;color:var(--white);margin:0}
.result-label{margin-top:8px;color:var(--muted);font-size:var(--t-12);
  letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:600;line-height:1.3}
/* Measured: the first sentence is 255px and adding the next word takes it to
   315px, so any measure between the two breaks the line at the full stop
   rather than inside the sentence. 280px sits in the middle of that band, and
   the other note (188px) still holds one line. */
/* `.result` in the selector so this beats `.section p`'s 68ch — a bare
   `.result-note` is one point short of it and the measure never applied. */
.result-desc{margin-top:10px;color:var(--muted);font-size:var(--t-base);
  line-height:25px;letter-spacing:var(--ls-17);max-width:none}
.result-desc strong{color:var(--white);font-weight:600}
.result-rule{border:0;height:1px;background:var(--border);margin:var(--s-3) 0 var(--s-3);width:100%}
.result-stat{margin:0;font-size:var(--t-48);font-weight:600;letter-spacing:var(--ls-48);
  line-height:1;color:var(--white)}

/* Chips. One copy line of items separated by " · " — the separators are real
   text so the copy check and a screen reader both still read a list, and .vh
   hides them because the pills already do the separating. */
.chips{display:flex;flex-wrap:wrap;gap:10px;max-width:none}
/* Apple's local-nav pill, measured on apple.com/ca/apple-intelligence:
   14px/400, line-height 18, tracking -0.224px, padding 8px 15px, 1px border,
   36px tall. Ours already sat at that size and height; the leading and the
   tracking are matched here too. */
.chip{padding:8px 15px;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--muted);font-size:var(--t-sm);line-height:18px;
  letter-spacing:var(--ls-14)}
/* icon prefix for chips that declare one — no space taken when absent */
.chip[data-emoji]::before{content:attr(data-emoji);margin-right:8px;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-size:14px;line-height:1;vertical-align:middle}
/* a non-exhaustive cue at the end of a chip list, lighter than a real item */
.chip-more{border-color:transparent;background:none;color:var(--muted-dim);padding:8px 6px}
/* The two groups sit side by side, so the client list and the build list read
   as one comparison rather than as one long stack of pills. */
.chip-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);
  align-items:stretch;text-align:left;max-width:920px;margin-inline:auto}
.chip-col{--radius:var(--r-surface);padding:var(--s-4) var(--s-3)}
.chip-col > .tier-lbl{margin-top:0}
.chip-col > .chips{margin-top:16px}

@media (max-width:860px){
  .about-services, .results, .chip-cols{grid-template-columns:1fr}
  .about-service, .about-service + .about-service{padding:0;border-left:0}
  .about-service + .about-service{margin-top:var(--s-3);padding-top:var(--s-3);
    border-top:1px solid var(--border)}
  .paths{grid-template-columns:1fr}
}

@media (max-width:960px){
  .about-hero{grid-template-columns:1fr;gap:var(--s-4)}
  #about-page .hero .about-stance{max-width:none}
}

/* ---------- FOOTER ---------- */
/* The rule was sitting closer to Let's Talk than to the footer it belongs to,
   so the space above it grew and the space below it shrank. */
/* The rule introduces the footer, so it sits close to it and well clear of
   the section above. */
.footer{margin-top:var(--s-6)}
.footer-divider{border-top:1px solid var(--border)}
.footer-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;
  gap:var(--s-4);padding:var(--s-3) 0 var(--s-3)}
.footer-brand .logo{display:inline-block;margin-bottom:16px}
/* 12px throughout, as measured on apple.com. The column heading is the same
   size as its links and separates itself by colour, not by weight — the footer
   is chrome, not reading copy, so it does not follow the 16px body size. */
/* These were <h2> at 12px: three phantom section headings per page, on every
   page, telling a screen reader and a crawler that the footer contains five
   more sections than it does. The tag changed; the styling did not. */
.footer-col .footer-h{font-size:var(--t-xs);font-weight:600;color:var(--white);
  margin-bottom:14px;letter-spacing:var(--ls-12)}
.footer-col p, .footer-col li{color:var(--muted);font-size:var(--t-xs);line-height:1.6}
.footer-col ul{list-style:none}
.footer-col li + li{margin-top:10px}
/* Apple's footer hover is `text-decoration: underline` and nothing else. */
.footer-col a:hover{text-decoration:underline}
.footer-brand p{max-width:42ch}
/* Social row sits under the brand blurb, as in the mock-up. */
.footer-social{display:flex;gap:14px;margin-top:20px}
.footer-social .social{width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--border);transition:color .2s, border-color .2s}
.footer-social .social svg{width:14px;height:14px}
.footer-social .social:hover{color:var(--white);border-color:var(--border-strong)}
@media (max-width:860px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-cols{grid-template-columns:1fr}}

/* Apple gives its bottom band 37px above and 11px below, with no rule of
   its own — the space does the separating. */
.footer-row{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;padding:36px 0 12px}
.footer-left{color:var(--muted-dim);font-size:var(--t-xs)}
.footer-legal{display:flex;align-items:center;gap:18px}
.footer-legal a, .footer-legal-btn{color:var(--muted-dim);font-size:var(--t-xs);
  font-family:inherit}
.footer-legal a:hover, .footer-legal-btn:hover{text-decoration:underline}

/* ============================================================
   AI SEARCH — Round 3, upper half
   Built on the vocabulary Home settled: the same card surface,
   the same Apple type ladder, glass only where a block is meant
   to carry weight.
   ============================================================ */

/* Every section on this page centres its heading and intro, the way Home does. */
/* A heading and the sentence under it are one unit, so they sit close; the gap
   that matters is the one BELOW the pair, before the content. Everything on
   this page was separated by roughly the same amount, which is what made it
   read as cluttered. */
.page-inner .section > .wrap > h2{
  text-align:center;font-size:var(--t-40);font-weight:600;letter-spacing:var(--ls-40);
  line-height:1.1;color:var(--white);max-width:24ch;margin:0 auto var(--gap-head);
  text-wrap:balance}
/* Any paragraph that is a direct child of a section's wrap is section-level
   prose — the sentence under the heading, or the one that closes the section
   off — so it takes the heading's alignment and measure. Anything inside a
   component (a card, a step, a tier) is not affected. */
.page-inner .section > .wrap > p{
  text-align:center;color:var(--muted);font-size:var(--t-base);line-height:25px;
  max-width:62ch;margin-left:auto;margin-right:auto;text-wrap:balance}
/* Was var(--s-5) — a 48px hang under the lead paragraph, which put prose that
   far from prose. The rhythm above governs both sides now. */
.page-inner .section > .wrap > h2 + p{margin-bottom:0}

/* ---------- HERO ---------- */
/* Home's hero is 74vh so the next section peeks at the fold; a service page
   opens straight into its argument, so this one is content-height. */
.page-inner .hero{min-height:0;padding:calc(var(--s-7) + 40px) 0 var(--s-6)}
/* PLACEHOLDER ARTWORK — images/hero-ai-search.jpg is generated, not a photo.
   Swap the file and this rule needs no change. It is masked away toward the
   bottom so the hero still ends without an edge, and it is dark through the
   middle band on purpose: the headline's contrast is measured against it. */
/* The 35% scrim is not decoration. Swept across viewport widths 360-2560, the
   brightest pixel that lands behind the hero's body text drops the 17px muted
   copy to 3.75:1 without it — under AA. At .35 the floor is 5.01:1. It also
   means a photograph dropped in later starts with protection rather than
   needing this measured again from scratch. */
#ai-search-page .hero{isolation:isolate}
#ai-search-page .hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background-color:#08081a;
  background-image:linear-gradient(rgba(8,8,26,.70),rgba(8,8,26,.70)),
                   url(../images/hero-ai-search.jpg);
  background-size:auto,cover;background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}

/* Same treatment for the Automation hero. The image path is a PLACEHOLDER —
   drop the real file at images/hero-ai-automation.jpg and it appears here.
   Until then the layer is just the dark ground colour (identical to --bg) so
   nothing looks broken while the file is missing. */
#automation-page .hero{isolation:isolate}
#automation-page .hero::before{content:'';position:absolute;inset:0;z-index:-1;
  background-color:#08081a;
  background-image:linear-gradient(rgba(8,8,26,.70),rgba(8,8,26,.70)),
                   url(../images/hero-ai-automation.jpg);
  background-size:auto,cover;background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}
.page-inner .hero h2{font-size:var(--t-32);font-weight:600;color:var(--white);
  line-height:1.25;letter-spacing:var(--ls-32);max-width:34ch;margin:0 auto var(--s-3);
  text-wrap:balance}
.page-inner .hero .sub, .page-inner .hero p{
  color:var(--muted);font-size:var(--t-base);line-height:25px;
  max-width:62ch;margin-left:auto;margin-right:auto}
.page-inner .hero p + p{margin-top:14px}
/* service heroes sit over a photo, so lift the body copy to white */
#ai-search-page .hero .sub, #ai-search-page .hero p,
#automation-page .hero .sub, #automation-page .hero p{color:var(--white)}
#ai-search-page .hero .also-called, #automation-page .hero .also-called{color:rgba(255,255,255,.80)}
#ai-search-page .hero .also-called strong, #automation-page .hero .also-called strong{color:var(--white)}
/* service-block descriptions are one step smaller than the hero body */
#about-page .hero .about-service p{font-size:var(--t-sm);letter-spacing:var(--ls-14);line-height:18px;max-width:none}
.page-inner .hero .hero-cta{margin-top:var(--s-4)}

/* ---------- WHY IT MATTERS ---------- */
/* Wider than the shared 62ch on purpose: the opening definition sets in three
   lines at 900px and the terminology list holds one at 860px — at 62ch they ran
   to five and to two. */
#ai-search-page .hero .sub{max-width:min(100%,900px)}
/* 197 characters over two lines needs about 810px; the shared 62ch broke it
   into five. The paragraph under it takes the same measure so the two align. */
#automation-page .hero .sub, #automation-page .hero p{max-width:min(100%,830px)}
#ai-search-page .also-called{max-width:min(100%,860px)}

#why > .wrap{text-align:center}
/* The paragraph runs to five lines at 62ch; 880px settles it at four. */
/* pretty, not balance: balance collapses the short BrightLocal line into a
   narrow centred block while the long one fills 880px, so the two read as
   different widths. pretty fills the measure. */
#ai-search-page #why > .wrap > p:not(.journey){max-width:min(100%,840px);text-wrap:pretty}
/* One line: the 24ch cap forced this question onto two lines. */
#ai-search-page #fit > .wrap > h2{max-width:none}
/* BrightLocal citation reads as a link: the AI Search accent + a thin
   underline, matching the site's other inline links. */
#why p a{color:var(--service-search);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;transition:color .2s}
#why p a:hover{color:var(--white)}
/* Stat captions match Apple's figure caption: 14px, not the 17px #why p sets. */
#why .stat p{font-size:var(--t-sm);line-height:18px}
/* `.section .wrap > * + *` sets a flat 20px between everything, which left the
   figures 20px under the paragraph and the journey line 32px under them. These
   are three separate ideas, so they get real air and the same amount of it. */
#why p{color:var(--muted);font-size:var(--t-base);line-height:25px;
  max-width:62ch;margin-left:auto;margin-right:auto}
/* One uninterrupted sentence, not a row of chips and not on glass — glass here
   made a single line of type look like a component. Flat, with the side padding
   pulled right back so the line sits at the section's own measure. */
#why .journey{color:var(--white);font-size:var(--t-21);font-weight:600;
  letter-spacing:var(--ls-21);line-height:1.5;text-align:center;
  background:
    linear-gradient(135deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 56%),
    radial-gradient(135% 95% at 50% -12%,rgba(255,255,255,.13),rgba(255,255,255,0) 56%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(165%) brightness(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(165%) brightness(1.06);
  box-shadow:0 14px 38px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.28),
    inset 0 1.5px 0 rgba(255,255,255,.62),inset 1.5px 0 0 rgba(255,255,255,.16),
    inset -1.5px 0 0 rgba(0,0,0,.12),inset 0 -1.5px 0 rgba(0,0,0,.20);border-radius:var(--r-surface);
  padding:24px 44px;width:max-content;max-width:100%;
  margin:var(--s-3) auto var(--s-6)}
#why .journey strong{font-weight:inherit}

/* ---------- TILES: three-up fit, five-up areas ----------
   Same card as Home's, centred inside because the copy here runs to two or
   three lines rather than forty words. */
/* ---- CARD TYPE, ONE LADDER ----
   Every content card on the site now uses the same three sizes: a 21px/600
   name, 14px body, and a 12px uppercase label. The one deliberate exception is
   the service name on Home's two problem cards, which stays at 28px because
   the whole point of that card is the service name.
   Titles sit close to their body (10px) and far from the block above (24px+) —
   the reference decks all separate blocks far more than they separate a title
   from the sentence it introduces. */
.fit, .area{--radius:var(--r-surface);padding:var(--s-4) var(--s-3);text-align:center}


/* The terminology line under the hero sentence, and the jump to the process. */
.also-called{margin-top:16px;color:var(--muted-dim);font-size:var(--t-sm);
  line-height:1.6;max-width:62ch;margin-left:auto;margin-right:auto}
.also-called strong{color:var(--muted)}

/* Closes the pricing section: one card, one question, one button. */

.fit h3, .area h3{font-size:var(--t-21);font-weight:600;color:var(--white);
  line-height:1.25;letter-spacing:var(--ls-21);margin-bottom:10px;text-wrap:balance}
.tile-ic + h3{margin-top:0}
.fit p, .area p{color:var(--muted);font-size:var(--t-sm);line-height:18px;
  max-width:none;text-wrap:balance}

.fits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
/* Five items: three, then the remaining two centred as their own row rather
   than left-aligned to the tracks above. */
.areas{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-3)}
.areas > .area{grid-column:span 2}
.areas > .area:nth-child(4){grid-column:2 / span 2}
.areas > .area:nth-child(5){grid-column:4 / span 2}
/* Four criteria, so 2x2 at the same 820px measure the steps and the FAQ use —
   four across at this width would put them at 245px, which is narrower than the
   pricing cards for far less reason. */

/* ---------- HOW TO AUDIT YOUR BUSINESS ----------
   The video and the five steps are one unit — watch this, get these — so they
   sit side by side rather than stacked with the list trailing off underneath. */

/* The section's own prose is centred like every other section's; only the
   two-column block inside it is left-aligned. */

/* The section-prose rule caps direct-child <p> at 62ch, which is 25px narrower
   than this pair of buttons — enough to wrap them onto two rows. */

/* ---------- DOES ANY OF THIS SOUND FAMILIAR ----------
   Three symptoms in three cards, then the conclusion under them. There is no
   heading inside these cards — the sentence is the content — so it holds 17px
   rather than the 14px the titled cards use for their supporting copy. */

/* It reads as the section's lead now rather than its conclusion, so it takes
   the lead's slot under the heading — and keeps the gradient, because it is the
   line the three cards under it are examples of. */

/* ---------- THE COST OF REPETITIVE WORK ----------
   Apple's spec figure, as measured on their site: a hairline, a quiet caption,
   then the number at 48px/600 hard against it. Theirs runs caption-number-caption
   in a row of three; there is one figure here and the approved sentence reads
   INTO its number, so the sentence is the caption and the number closes it. */

/* The question the section turns on, so it sits centred under the lead. */

.demo-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.06)}
.demo-play::after{content:'';position:absolute;top:50%;left:52%;
  transform:translate(-50%,-50%);border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent rgba(255,255,255,.8)}

/* ---------- WORKFLOW DEMONSTRATIONS — three up ----------
   Each card is a before/after pair, so the two halves are separated by a rule
   rather than by a gap: they are one comparison, not two paragraphs. */
/* The demo videos are the point of this section, so it runs wider than the
   standard 1100 wrap to give the thumbnails real presence. Still 3-across,
   still click-through to YouTube. */
@media (min-width:1200px){
  #examples > .wrap{max-width:min(1360px,calc(100vw - 80px))}
}
.demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);
  align-items:stretch}
.demo{--radius:var(--r-surface);padding:0;text-align:left;overflow:hidden;border-top:0}
.demo h3{font-size:var(--t-21);font-weight:600;color:var(--white);
  line-height:1.25;letter-spacing:var(--ls-21);margin-bottom:10px;text-wrap:balance}
.demo p{color:var(--muted);font-size:var(--t-sm);line-height:18px;max-width:none}
/* The demonstration cards now open with a thumbnail and close with a button,
   so they are flex columns and the buttons sit on one line across the row. */
.demo{display:flex;flex-direction:column}
.demo .video-thumb{display:block;position:relative;aspect-ratio:16/9;
  border-radius:0;overflow:hidden;margin:0;
  background:linear-gradient(150deg,rgba(146,156,241,.14),rgba(192,143,214,.10))}
/* the video runs edge to edge at the top; only the text is inset */
.demo > .demo-body{margin-top:0;padding:var(--s-3) var(--s-3) var(--s-4)}
.demo .video-thumb img{display:block;width:100%;height:auto;transition:transform .35s ease}
/* No backdrop-filter here. Apple's Liquid Glass guidance says not to layer the
   material on top of itself, and this play mark sits inside the .demo card,
   which is glass — three nested glass surfaces on this page. It also bought
   almost nothing: what is behind the mark is an opaque thumbnail, so a 2px
   blur on it was near-invisible while still costing a second backdrop pass. */
.demo .video-thumb .demo-play{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px;
  background:rgba(8,8,26,.62);transition:background .2s ease,transform .2s ease}
/* The thumbnail is the link now that the button is gone, so it gets the hover
   the button used to carry. */
a.video-thumb{transition:opacity .2s}
a.video-thumb:hover img{transform:scale(1.04)}
a.video-thumb:hover .demo-play{background:rgba(8,8,26,.9);transform:translate(-50%,-50%) scale(1.1)}

/* ---------- THE COST OF REPETITIVE WORK ----------
   One calculation, so it sits on its own card: the working small and quiet, the
   result at the figure size the AI Search page uses for its three statistics. */
/* Both opening lines of this section are 98 characters and broke across two at
   the shared 62ch. 860px holds each on one line, and the longer paragraphs
   under them tighten from four lines to three. */
#automation-page #cost > .wrap > p{max-width:min(100%,860px)}
/* Every section heading on this page sets on one line. The shared measure is
   24ch, which broke the three longest; the longest of them — "What could AI
   automation take off your plate?", 44 characters at 40px — needs about 900px,
   so one rule at 940 covers the page rather than three exceptions. */
#automation-page .section > .wrap > h2{max-width:min(100%,940px)}
/* ---------- COST CALCULATOR ----------
   Three inputs recompute the annual labour figure live. Flat content surface,
   gradient hero figure, uppercase micro-labels on --ls-caps. Default values
   render muted (a filled-in suggestion) and turn white on focus or once the
   reader sets their own. */
.calc{--radius:var(--r-surface);max-width:820px;margin:var(--s-4) auto;
  padding:var(--s-5) var(--s-4);text-align:left}
.calc-eyebrow{font-size:var(--t-12);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:600;color:var(--service-automation)}
.calc-q{margin-top:12px;font-size:var(--t-24);font-weight:600;
  letter-spacing:var(--ls-24);line-height:1.2;color:var(--white)}
.calc-inputs{margin-top:var(--s-4);display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.calc-field{flex:1 1 130px;display:flex;flex-direction:column;gap:8px}
/* the multiply signs and the fixed "52 weeks" term sit on the box row, so they
   take the label row's height as top padding, then centre in the box. */
.calc-x,.calc-const{flex:0 0 auto;display:flex;align-items:center;padding-top:25px}
.calc-x::before{content:"\00D7"}
.calc-x{color:var(--muted);font-size:var(--t-24);line-height:1}
.calc-const{font-size:var(--t-21);letter-spacing:var(--ls-21);color:var(--muted);
  white-space:nowrap}
.calc-label{font-size:var(--t-14);letter-spacing:var(--ls-14);color:var(--muted)}
.calc-box{display:flex;align-items:stretch;border:1px solid var(--border);
  border-radius:var(--r-inset);overflow:hidden;transition:border-color .2s}
.calc-box:focus-within{border-color:var(--service-automation)}
.calc-input{flex:1;min-width:0;width:100%;background:none;border:0;outline:none;
  font-family:var(--font-body);font-size:var(--t-21);letter-spacing:var(--ls-21);
  color:var(--muted);padding:12px 14px;transition:color .15s}
.calc-input:focus,.calc-input.is-set{color:var(--white)}
.calc-input::-webkit-outer-spin-button,.calc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-input[type=number]{-moz-appearance:textfield;appearance:textfield}
.calc-unit{display:flex;align-items:center;padding:0 14px;
  background:rgba(255,255,255,.03);border-left:1px solid var(--border);
  font-size:var(--t-14);letter-spacing:var(--ls-14);color:var(--muted);white-space:nowrap}
.calc-rule{display:block;height:1px;background:var(--border);margin:var(--s-4) 0}
.calc-result-label{font-size:var(--t-12);letter-spacing:var(--ls-caps);
  text-transform:uppercase;font-weight:600;color:var(--muted)}
.calc-total{margin-top:10px;display:flex;align-items:baseline;gap:10px}
.calc-amount{font-size:var(--t-48);font-weight:600;letter-spacing:var(--ls-48);
  line-height:1;background:var(--gradient-services);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.calc-per{font-size:var(--t-17);letter-spacing:var(--ls-17);color:var(--muted)}
@media (max-width:720px){.calc-inputs{flex-direction:column;align-items:stretch}
  .calc-x,.calc-const{padding-top:0;justify-content:center}}

/* The Build's conditional second price, under the first. */
.tier-alt{margin-top:8px;color:var(--muted-dim);font-size:var(--t-xs);
  line-height:1.5;text-align:center}
/* The empty ones exist only to reserve the row in the four-up layout; stacked,
   there is no row to reserve, so they collapse. */
.tier-alt:empty{display:none}

/* ---------- STEPS — numeral left, flat, no card ----------
   Scoped to this page on purpose. The Automation page still carries the Phase 2
   skeleton for its own process — five <div class="step"> with a plain <h3> and
   no .step-n / .step-t — so the subgrid here would drop each whole heading into
   the 76px numeral column. Round 4 rebuilds that page with this markup; the
   scope becomes a shared service-page class at that point, not before. */
.service-page .steps{max-width:820px;margin:0 auto}
.service-page .step{display:grid;grid-template-columns:76px 1fr;column-gap:var(--s-2);row-gap:0;
  padding:var(--s-4) 0}
.service-page .step + .step{border-top:1px solid var(--border)}
.service-page .step h3{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;
  align-items:baseline;margin:0}
.service-page .step-n{font-size:var(--t-40);font-weight:600;letter-spacing:var(--ls-40);line-height:1;
  background:var(--gradient-services);-webkit-background-clip:text;
  background-clip:text;color:transparent;width:max-content}
.service-page .step-t{font-size:var(--t-21);font-weight:600;color:var(--white);
  line-height:1.3;letter-spacing:var(--ls-21)}
/* 6 / 14 / 6, not a flat 8 / 10. The title and its first sentence are one
   unit; the paragraphs after it are separate; and "We look at:" belongs to the
   line of metrics under it, so that pair closes back up. Even gaps everywhere
   are exactly what made this section read as cluttered. */
.service-page .step > p{grid-column:2;color:var(--muted);font-size:var(--t-base);
  line-height:25px;max-width:60ch;margin-top:6px}
.service-page .step > p + p{margin-top:14px}
.service-page .step > .step-metrics{margin-top:6px}
/* Metrics / areas as one inline meta line: a muted lead-in label, then the list
   in the page accent, middot-separated, wrapping naturally. */
.service-page .step > .step-meta{grid-column:2;margin-top:12px;max-width:none;
  font-size:var(--t-12);letter-spacing:var(--ls-12);line-height:1.6;
  color:var(--service-search)}
.step-meta-lead{color:var(--muted)}

/* The lead names all four services in four sentences. At the shared 62ch it
   ran to five lines and read as a wall; wider, it settles into three. */
.service-page #process > .wrap > h2 + p{max-width:min(100%,880px)}

/* ---------- SERVICES AND PRICING — four tiers, one row ----------
   Four cards abreast is tight for this much copy, so everything inside steps
   down a size and the four CTAs share one height: the cards stretch to match,
   the buttons sit on one line across the row whether their label wraps or not.
   --tier-accent is set on the row, so the Automation page can reuse the whole
   component by changing one value. */
/* The chooser is a FAQ answer now, so it inherits that measure and alignment;
   it only needs its own leading, because each line is a routing pair rather
   than running prose. */

/* 40px, twice the 20px it was: the tag now floats in this gap, so the pair
   needs room to read as heading-then-table rather than heading-then-tag.
   The margin is set below, at a specificity that beats `.section .wrap > * + *`. */
.tiers{--tier-accent:var(--service-search);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);
  align-items:stretch}
/* Head of the card is centred — tag, name, price, delivery — and everything
   from the first label down is left-aligned, which is how the mock-up splits
   it: the head is for comparing across the row, the body is for reading down. */
.tier{--radius:var(--r-surface);padding:var(--s-4) var(--s-3);
  display:flex;flex-direction:column;text-align:left}

/* The tag straddles the card's top edge rather than sitting inside it: half
   above, half below, filled with the CTA gradient. It has to clear .card::before
   (the rim, at inset -1.5px), hence the z-index. The 36px top padding is what
   keeps its lower half off the name. */
.tier-tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  z-index:2;padding:8px 15px;border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--gradient-cta);border:0;color:#fff;
  font-size:var(--t-12);font-weight:600;letter-spacing:var(--ls-caps);
  text-transform:uppercase;line-height:1;
  box-shadow:0 8px 20px -6px rgba(88,103,234,.55)}

/* The recommended card is lifted rather than recoloured: the same glass, but
   its rim carries the brand gradient instead of the white one every other card
   uses, and the service colour washes underneath. */
/* This ring used to be `.card::before` recoloured. The card has no rim any
   more, so the featured tier carries the whole thing itself — it is the one
   place on the site that still needs an edge, to mark the default choice. */
.tier--featured::before{content:'';position:absolute;inset:-1.5px;
  border-radius:calc(var(--radius) + 1.5px);padding:1.5px;pointer-events:none;
  background:var(--gradient-stroke);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.tier--featured{box-shadow:0 22px 60px -14px rgba(158,83,192,.5)}
.tier-name{font-size:var(--t-24);font-weight:600;color:var(--white);text-align:center;
  line-height:1.2;letter-spacing:var(--ls-24);text-wrap:balance}
/* The number carries the brand gradient and the qualifiers around it drop to
   15px — that is how a price is normally set, and it is what lets
   "From C$750/month" hold one line in a 300px card. The qualifiers inherit the
   clipped gradient from this element rather than setting their own. */
.tier-price{margin-top:14px;font-size:var(--t-40);font-weight:600;
  text-align:center;letter-spacing:var(--ls-40);line-height:1.1;
  background:var(--gradient-services);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.tier-qual{font-size:var(--t-14);font-weight:600;letter-spacing:var(--ls-14)}
/* A qualifier that has to sit on its own line needs its own line-height —
   inside the 40px price it inherited a 44px line box and doubled the block. */
.tier-sub{display:block;font-size:var(--t-14);font-weight:600;letter-spacing:var(--ls-14);
  line-height:1.35;margin-top:2px}
/* Centred under the price with a clock. All four are one line now, so nothing
   needs reserving here for "Best for" to stay level across the row. */

.tier-clock{display:inline-block;vertical-align:-2px;width:13px;height:13px;
  margin-right:6px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
/* The labels carry the brand gradient. width:max-content matters here: a
   background-clipped gradient spans the element, so a full-width <p> would give
   "SCOPE" only the blue end and "STARTING MONTHLY SCOPE" the whole sweep.
   Sized to the text, every label reads the same. */
/* A gradient needs strokes thick enough to carry it. At 12-17px these read as
   faded rather than coloured, and a clipped gradient cannot be contrast
   checked because the text colour is technically transparent. Small labels
   take the solid service colour; the gradient stays on display type. */
.tier-lbl{margin-top:22px;font-size:var(--t-12);font-weight:600;letter-spacing:var(--ls-caps);
  text-transform:uppercase;width:max-content;max-width:100%;
  color:var(--service-search)}
.tier-body{margin-top:10px;font-size:var(--t-sm);line-height:20px;color:var(--muted)}
.tier-list{margin-top:10px;list-style:none;display:flex;flex-direction:column;
  gap:10px;font-size:var(--t-sm);line-height:20px;color:var(--muted)}
.tier-lbl + .tier-body, .tier-lbl + .tier-list{margin-top:6px}
.tier-list li{position:relative;padding-left:26px}
.tier-list li::before{content:'';position:absolute;left:0;top:2px;
  width:16px;height:16px;border:1.4px solid var(--tier-accent);border-radius:50%}
.tier-list li::after{content:'';position:absolute;left:4.6px;top:7px;
  width:6px;height:3px;border-left:1.4px solid var(--tier-accent);
  border-bottom:1.4px solid var(--tier-accent);transform:rotate(-45deg)}
.tier-list strong{color:var(--white);font-weight:600}
.tier-note{margin-top:14px;font-size:var(--t-xs);line-height:1.5;color:var(--muted-dim)}
/* Row alignment is only worth paying for when all four cards are in ONE row.
   Reserving the tallest name block (two lines plus the badge), the tallest price
   (two lines) and the tallest delivery note (three) puts every price, every
   "Best for" and every button on the same baseline across the four. In the
   two-column band the cards are wider, the text wraps less, and the same fixed
   blocks would hold up to 111px of empty space per card while aligning nothing
   between the two rows — so they apply here only. */
@media (min-width:1081px){
  .tier-name{min-height:58px}
  /* Three of the four tiers carry a delivery line under the price and one does
     not — Care is priced per month with no turnaround — so the block is
     reserved to the taller of the two and "Best for" stays level across the
     row. Same on Automation, where only the Build has a second price line. */
  #automation-page .tier-price, #ai-search-page .tier-price{min-height:64px}
}
.tier-cta{margin-top:auto;padding-top:var(--s-3)}
/* A two-line button is not a button. The labels are short enough to hold one
   line at this width, and nowrap keeps it that way — if a future label is too
   long the overflow will be obvious immediately rather than quietly wrapping. */
.tier-cta .btn{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:44px;text-align:center;white-space:nowrap;
  font-size:var(--t-base);line-height:20px;padding:8px 14px}

@media (max-width:1080px){
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);max-width:820px;margin:0 auto}
}
@media (max-width:860px){
  .fits,.areas,.demos{grid-template-columns:1fr}
  
  
  .areas > .area, .areas > .area:nth-child(4), .areas > .area:nth-child(5){grid-column:auto}
  /* One column below 860px, so the numeral, the title and the body all share a
     single left edge. The subgrid version indented the title but not the body,
     which read as a misalignment rather than a hanging numeral. */
  .service-page .step{grid-template-columns:1fr}
  .service-page .step h3{grid-column:1;display:flex;align-items:baseline;gap:14px}
  .service-page .step-n{font-size:var(--t-32)}
  .service-page .step > p{grid-column:1}
  .service-page .step > .step-meta{grid-column:1}
}
@media (max-width:640px){
  .tiers{grid-template-columns:1fr;max-width:420px}
}

/* ============================================================ SECTION RHYTHM
   The rhythm has to vary or it stops meaning anything. Three cases:

   - A pricing table and the questions about that pricing are one subject, so
     the FAQ pulls up tight against the table rather than announcing itself as
     a new topic.
   - The closing CTA resolves the page; it is not a new topic either.
   - Everything else takes the standard step.                                */
.service-page #pricing{padding-bottom:var(--sec-tight)}
.service-page #faq{padding-top:var(--sec-tight)}
/* The hero already carries its own top padding to clear the nav pill, so it
   only needs the standard step underneath it. */
.hero{padding-bottom:var(--sec-tight)}

/* ============================================================ DOCUMENT PAGES
   A policy is not a marketing page. It is one continuous argument broken
   into named clauses, and it is read top to bottom by someone looking for a
   specific answer — so the clauses have to stay visibly part of one document
   rather than reading as twelve separate announcements.

   Apple's own privacy policy makes the same distinction with the same tools:
   its section padding is 70px against the 144px on its marketing pages,
   roughly half, while its heading style stays IDENTICAL to the marketing
   section heading rather than shrinking. Measured 2026-09-02 at 1380px.

   This page had twelve sections at the full marketing rhythm, so every
   clause sat 224px from the next one and the policy read as very long and
   very empty. The heading was also free to run the full container width. */
.doc-page .section{padding:var(--sec-doc) 0}
.doc-page .section > .wrap > h2{max-width:26ch}
/* The clause heading belongs to the clause under it, not to the gap above. */
.doc-page .section > .wrap > h2 + *{margin-top:var(--s-3)}

/* ============================================================ LINE BREAKING
   Two different jobs, two different values, and they are not interchangeable.

   `balance` evens out the length of every line in a block. That is what a
   heading wants — a two-line heading should not be a full line above a
   three-word one — and it is already set on h1 to h4 above. The browser only
   applies it to short blocks, so it is wrong for body copy.

   `pretty` leaves the line lengths alone and fixes the ending: it will not
   let the last line of a paragraph hold a single word. A word stranded on
   its own line reads as a mistake, and there were 25 of them across the five
   pages. Browsers that do not support it simply wrap as before. */
p, li, dd, figcaption, summary{text-wrap:pretty}

/* Long-form reading, measured on developer.apple.com/app-store/small-business-program
   on 2026-09-02 at 1380px — a genuine text-wall document with clause headings
   and an open Q&A, which is what this page is.

   The counterintuitive part is the body size. Apple sets marketing body at
   17px and long-document body at 21px on a 78-character measure: text you
   are expected to actually read gets BIGGER, not smaller. This page was
   running the marketing 17px at 62 characters. */
/* ONE COLUMN. Everything on the reference page — h1, h2, h3 and every
   paragraph — sits at left 282 / right 282 / width 817 in a 1380 viewport.
   One left edge, one width, symmetric margins. That is what makes a long
   document feel like a document instead of a page with a hole in it.

   This page had four widths: the h1 centred at 1052, the standfirst centred
   at 730, the clause headings capped to 26ch (665) and the body at 1017 —
   so the right edge was ragged and the whole right side read as empty.

   The width is set in px, not ch. `ch` is the width of the "0" glyph, which
   in this face is about 0.62em rather than the 0.5em the audit estimated,
   so the 78ch that was meant to reproduce Apple's 817px produced 1017px. */
.doc-page .section > .wrap,
.doc-page .hero > .wrap{max-width:calc(817px + 48px)}
.doc-page .section p,
.doc-page .section li{font-size:var(--t-base);letter-spacing:var(--ls-17);
  line-height:1.7;max-width:none}
/* 28px, not the 40px marketing size — Apple sets policy section
   headings about here, and at 40px a 48-character clause title tipped to
   two lines against the 817px column. */
.doc-page .section > .wrap > h2{max-width:none;font-size:var(--t-24);
  letter-spacing:var(--ls-24);line-height:1.3}
.doc-page .section .wrap > * + p{margin-top:14px}
/* The clause level the page did not have. 24px/600, 38px above. */
.doc-page .section h3{font-size:var(--t-24);letter-spacing:var(--ls-24);
  font-weight:600;margin-top:38px}
.doc-page .section h3 + p{margin-top:12px}
/* The opening block shares the column and the left edge, so the document
   starts where every clause starts rather than centred above them. */
.doc-page .hero{text-align:left}
.doc-page .hero .sub{max-width:none;margin-left:0;margin-right:0}

/* ============================================================ CONSENT BAR
   Sits on the control layer, so it is the one other place besides the nav
   that is allowed the glass material — same recipe, same radius family.
   It is a bar, not a modal: the page stays readable and usable behind it,
   because nothing here is collected until the visitor chooses. */
.consent{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1100;
  width:calc(100% - 48px);max-width:var(--maxw);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:16px 22px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 6px 6px rgba(0,0,0,.05), 0 12px 12px rgba(0,0,0,.06),
    0 24px 40px rgba(0,0,0,.18),
    inset 0 4px 6px rgba(255,255,255,.06), inset 0 -3px 5px rgba(255,255,255,.03)}
.consent-text{margin:0;max-width:68ch;color:var(--muted);
  font-size:var(--t-14);letter-spacing:var(--ls-14);line-height:1.5}
.consent-text a{color:var(--service-search);text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:var(--s-2);flex:0 0 auto}
.consent .btn{font-size:var(--t-14);padding:9px 18px}
@media (prefers-reduced-transparency:reduce){
  .consent{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:820px){
  .consent{flex-direction:column;align-items:flex-start;border-radius:var(--r-surface);
    width:calc(100% - 24px);bottom:12px}
  .consent-actions{width:100%}
  .consent .btn{flex:1}
}

/* Two-card testimonials in dark mode. PRE-PUBLISH CHECK #11: the section is
   data-placeholder and must not ship until real approved client quotes replace
   this. Type follows the Apple ramp: 21px lead-paragraph body for the quote,
   17px/600 name, 14px/400 meta, muted rules between blocks. */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);
  max-width:1000px;margin-inline:auto;align-items:stretch}
.quote-card{--radius:var(--r-surface);margin:0;padding:var(--s-4);
  text-align:left;display:flex;flex-direction:column;gap:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.quotes > .quote-card:nth-child(1){transform:rotate(-1.4deg) translateY(6px)}
.quotes > .quote-card:nth-child(2){transform:rotate(1.4deg) translateY(-6px)}
.quotes > .quote-card:hover{transform:rotate(0) translateY(0)}
@media (prefers-reduced-motion:reduce){
  .quotes > .quote-card,
  .quotes > .quote-card:nth-child(1),
  .quotes > .quote-card:nth-child(2){transform:none;transition:none}
}
.quote-text{color:var(--white);font-size:var(--t-21);font-weight:400;
  line-height:1.5;letter-spacing:var(--ls-21);margin:0;text-wrap:pretty}
.quote-rule{border:0;height:1px;background:var(--border);margin:var(--s-3) 0;width:100%}
.quote-by{margin:0}
.quote-name{margin:0;color:var(--white);font-size:var(--t-base);font-weight:600;
  line-height:1.3;letter-spacing:var(--ls-17)}
.quote-meta{margin-top:6px;color:var(--muted);font-size:var(--t-sm);
  line-height:1.4;letter-spacing:var(--ls-14)}
@media (max-width:720px){.quotes{grid-template-columns:1fr}}

/* White star on the "Start here" tag — SVG, not an emoji. */
.tier-tag{display:inline-flex;align-items:center;gap:5px}
.tag-star{width:12px;height:12px;color:#fff;flex:0 0 auto}

/* Keep a highlighted phrase from breaking across a line (orphaned word). */
.nowrap{white-space:nowrap}
/* flow / stat arrows in the page accent */
.arrow{color:var(--service-search)}

/* ====================== RESPONSIVE TYPE SCALE (Apple breakpoints) ======================
   Apple's viewport tiers: large >1068, medium 735-1068, small <=734. Scale the
   display ramp down at each so headings don't dominate or clip. letter-spacing
   is em-based so it tracks automatically; body/label sizes (17/14/12) stay put. */
@media (max-width:1068px){
  :root{--t-56:48px; --t-48:42px; --t-40:34px}
}
@media (max-width:734px){
  :root{--t-56:38px; --t-48:34px; --t-40:29px; --t-28:24px; --t-24:21px; --t-21:19px}
}

/* Let's Talk card CTAs: on phones the two buttons wrap with mismatched widths;
   stack them and stretch to equal (full) width. */
@media (max-width:560px){
  .section-contact .hero-cta{flex-direction:column;align-items:stretch}
  .section-contact .hero-cta .btn{width:100%}
}

/* ============ MULTI-COLUMN LAYOUTS: keep their rows through tablet ============
   The stacking rules above collapse these to 1 column at <=860px. Apple stacks
   at its small tier (<735). Re-assert the columns from 735 up (placed last so it
   wins over the <=860 rules), so 2-col and 3-col grids only stack on phones. */
@media (min-width:735px){
  .problems{grid-template-columns:1fr 1fr}
  .principles{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fits{grid-template-columns:repeat(3,1fr)}
  .demos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .results,.chip-cols,.about-services{grid-template-columns:1fr 1fr}
}