/* ============================================================
   REFINE: Apple-style restraint pass (owner brief 2026-07-29)
   ============================================================
   The owner asked for "the clean look of apple.com" and was explicit:
   DO NOT change the layout or anything structural. So this file changes
   only FINISH. Nothing here touches DOM structure, grid columns, section
   order or content. What it does change: type weight and tracking,
   decorative glow, button and card surfaces, border radius, and the
   loudness of the ambient background.

   WHY A SEPARATE FILE. The treatments being softened are spread across
   styles.css, hero-ribbon.css (homepage) and theme-gold.css (inner
   pages), which load in different combinations per page. Editing three
   stylesheets in place would have left the two page surfaces drifting
   apart and made the whole direction hard to reverse if the owner does
   not like it. This loads LAST everywhere, so one <link> reverts the
   entire pass and the originals stay readable underneath.

   WHAT WAS MEASURED, NOT REMEMBERED (apple.com, 2026-07-29, playwright):
     - Display type is weight 600, NOT 700 or 800.
     - Tracking is looser than this site had it and scales with size:
       80px headline at -1.2px = -0.015em; 34px at -0.374px = -0.011em.
       This site was at a flat -0.02em to -0.025em, i.e. over-tightened.
     - Display line-height 84/80 = 1.05.
     - Body text 17px. Heading colour #1d1d1f, not pure black, so the
       dark-theme equivalent is a heading that is not pure white.
     - box-shadow on their buttons: none. No glow anywhere on the page.
     - Sections separate by flat background changes, not borders.

   WHAT IS DELIBERATELY UNTOUCHED:
     - The hero artwork and its animation. It is the owner's own art and
       a locked decision (DECISIONS.md 2026-07-14).
     - The blue and gold identity. Apple's restraint applied to this
       brand's colours is the brief; turning the site monochrome would be
       copying Apple rather than learning from it.
     - Every layout rule, breakpoint and piece of copy.
   ============================================================ */

/* ---------- 1. Type: lighter weight, looser tracking, tighter leading
     Apple's display type reads clean because it is semibold with air
     between the letters, not black with the letters jammed together.
     This site had the opposite settings, which is most of why it read
     "tech startup" rather than "considered". ---------- */
h1, h2, h3, h4, .h1, .h2, .h3 {
  font-weight: 600;
  letter-spacing: -0.012em;
}
h1, .h1 { letter-spacing: -0.017em; line-height: 1.06; }
h2, .h2 { letter-spacing: -0.015em; line-height: 1.08; }
h3, .h3 { letter-spacing: -0.008em; }
/* The nav lockup keeps its weight: it is a wordmark, not running text. */
.brand-word { font-weight: 700; letter-spacing: -0.018em; }

/* Body copy up to Apple's 17px on anything wider than a phone, where the
   extra size reads as confidence rather than crowding. */
@media (min-width: 900px) {
  body { font-size: 1.0625rem; }
  .lead { font-size: 1.2rem; line-height: 1.55; }
}

/* ---------- 2. Glow: gone
     Every glow on the site was decorative. FRONTEND_DESIGN_RULES lists
     "excessive shadows or glowing effects" as a design failure, and
     apple.com measures box-shadow: none on its buttons. Shadows stay
     only where they express real elevation (menus, the mobile bar). */
:root {
  --glow-blue: none;
  --glow-cta:  none;
  /* Softer, shorter shadows. The originals threw a 60-90px black halo
     that read as heavy on a dark background. */
  --shadow:    0 10px 30px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 18px 48px -24px rgba(0, 0, 0, 0.75);
  /* Apple's cards sit around 18px. 30px was reading as a bubble. */
  --r-lg: 18px;
  --r-xl: 20px;
}
.rh h1 .rh-blue { text-shadow: none; }
.eyebrow::before { box-shadow: none; }
.card-hover:hover { box-shadow: none; }

/* ---------- 3. Buttons: flat, pill, still
     Solid fill, no gradient, no glow, no lift on hover. Apple's buttons
     change colour and nothing else, which is what makes a page feel
     calm while you move around it. ---------- */
.btn { border-radius: var(--r-pill); font-weight: 500; letter-spacing: -0.005em; }
.btn:hover { transform: none; }

.btn-primary,
.rh .rh-btn-primary,
body.story-dark .btn-primary {
  background: var(--primary);
  border: 1px solid transparent;
  box-shadow: none;
  color: #fff;
}
.btn-primary:hover,
.rh .rh-btn-primary:hover,
body.story-dark .btn-primary:hover {
  background: var(--accent);
  transform: none;
  box-shadow: none;
  color: #fff;
}

/* Ghost: a hairline and nothing else. The backdrop blur comes off the
   BUTTONS only; the header and mega panels keep theirs, because a
   translucent blurred chrome bar is Apple-correct and load bearing for
   legibility over the hero art. */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--glass-brd2);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--glass);
  border-color: var(--glass-brd2);
  transform: none;
}

/* The gold secondary CTA keeps its job. DECISIONS 2026-07-19: it must
   never read as disabled. So the gold text and a solid gold hairline
   stay; only the fill gradient and the glow go. */
.rh .rh-btn-gold,
body.story-dark .btn-gold {
  background: transparent;
  border: 1px solid var(--rh-gold, #DDBA6E);
  box-shadow: none;
}
.rh .rh-btn-gold:hover,
body.story-dark .btn-gold:hover {
  background: rgba(212, 168, 79, 0.10);
  transform: none;
  box-shadow: none;
}

/* ---------- 4. Cards and surfaces: flat
     The 3D tilt (translateZ on every card) is the least Apple thing in
     the component layer, and it was doing nothing for comprehension.
     Hover becomes a quiet surface change. ---------- */
.tilt { transform-style: flat; }
.tilt .tilt-inner { transform: none; }
.card { box-shadow: none; }
.card-hover { transition: background .2s var(--ease), border-color .2s var(--ease); }
.card-hover:hover { background: var(--glass-2); border-color: var(--glass-brd2); transform: none; }
.card-hover:hover .ico { transform: none; box-shadow: none; }
.link-card:hover { transform: none; }

/* The gold treatments on the inner-page theme carried the last three
   glows: a 44px gold halo on hovered cards and on the featured plan, and
   a gradient-filled tag with its own drop shadow. The featured card keeps
   its gold BORDER, which is what actually marks it out; the halo was
   doing nothing the border was not already doing, more loudly. */
body.story-dark .card-hover:hover,
.card-hover:hover { box-shadow: none; }
.card-hover:hover .ico { box-shadow: none; }
.price-card.featured { box-shadow: none; }
.price-tag {
  background: var(--gold, #D4A84F);
  box-shadow: none;
  letter-spacing: .06em;
}

/* ---------- 5. Gradient text: gone
     Apple sets headlines in one colour. A gradient across a headline is
     the single most "generic SaaS" tell on the page, and this site had
     it on every generated h1. The accent word keeps its blue. ---------- */
.grad,
body.story-dark .grad {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--baby);
}

/* ---------- 6. Ambient background: quiet, not deleted
     Two 46vw blurred radials at 0.5 opacity plus a beam and a grid were
     doing most of the visual noise. Apple has none of this. Rather than
     delete the rules (a locked motion decision, DECISIONS 2026-07-05),
     they drop to a level you notice only if you look for it, so this is
     one number to put back. ---------- */
.bg-orb { opacity: .16; }
.bg-beam { opacity: .18; }
.bg-grid { opacity: .35; }

/* Eyebrow: plain micro-type. The pill fill and the glowing dot both come
   off, so the label sits on the page instead of in a chip with a bullet
   in front of it. Apple's section labels are text and nothing else, and
   at this size the dot was reading as a stray character. */
.eyebrow {
  background: none;
  border-color: transparent;
  padding-left: 0; padding-right: 0;
  color: var(--muted);
  font-weight: 600;
}
.eyebrow::before { display: none; }

/* ---------- 7. Focus: unchanged in behaviour, tidier in form
     Keeping a visible focus ring is a hard accessibility rule; this only
     matches it to the new radius so it does not cut the pill corners. */
.btn:focus-visible { outline: 2px solid var(--baby); outline-offset: 3px; border-radius: var(--r-pill); }

/* ============================================================
   8. ALIGNMENT (owner approved 2026-07-29, second pass)
   ============================================================
   apple.com left-aligns its page headings and section headings and
   centres only the closing call to action. Ours centred nearly
   everything, which FRONTEND_DESIGN_RULES lists as a design failure
   ("center every heading and paragraph") and which is most of why the
   page still read like a template next to the reference.

   The generated content pages were already left-aligned, so this only
   moves the seven hand-written root pages onto the same axis. The
   `.cta-band` keeps its centring, deliberately: that is the one place
   Apple centres too, and it is what makes the closing ask feel like a
   destination rather than another paragraph.

   NOTE FOR REVERTING: unlike the rest of this file, this part is not
   purely CSS. Those pages carried inline `margin:0 auto` on the heading
   blocks, and an inline style beats any stylesheet, so the auto margins
   were removed from the HTML as well. Deleting this file alone leaves
   those blocks left-positioned with centred text. ---------- */
.hero-copy.center,
.section-head.center,
.section .center,
.section-tight .center,
.card.center { text-align: left; }

.section-head,
.center .section-head { margin-left: 0; margin-right: 0; max-width: 60ch; }
.center .lead,
.hero-copy.center .lead { margin-left: 0; margin-right: 0; }

/* The closing CTA band stays centred, and so does the mobile action bar
   and anything genuinely centred inside a flex row. */
.cta-band, .cta-band .center { text-align: center; }