/* ============================================================
   Oscar Headshots — pricing section (part 1 + part 2 + total bar)
   Self-sufficient: fonts, tokens, base type, section styles.
   No JavaScript. Nothing here depends on another stylesheet.

   Trimmed to exactly what this section uses. If you later publish
   the calculator, totals table or FAQ, take the fuller brand.css
   and pricing.css instead of extending this one.
   ============================================================ */


/* ---------- 1. Fonts: self-hosted, no third-party request ---------- */
/* latin-ext first, latin second — the browser picks by unicode-range.
   Change these six paths to wherever you put the .woff2 files. */

@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/montserrat-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/montserrat-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/montserrat-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/montserrat-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Weight 600 is not used by this section — add it back if you need it. */


/* ---------- 2. Tokens ----------
   Scoped to .pricing, not :root. A section stylesheet has no business
   defining custom properties on the document — a name collision with
   main.css would reach the whole site. Everything here stays inside
   the section. */

.pricing{
  --ground:      #ffffff;   /* the page behind the section — the site is white */
  --surface:     #ffffff;   /* the extras box: white, held by its border */
  --surface-2:   #eff2f6;   /* the Part cards: filled, no shadow */
  --ink:         #20324e;   /* all text, all prices — the navy */
  --ink-2:       #465772;   /* secondary text */
  --ink-strong:  #171717;   /* the line under each price — see .part-sub */
  --ink-3:       #7c899c;   /* labels only — 3.55:1, never body text */
  --rule:        #dde2e9;   /* the extras box's border */
  --rule-2:      #c7cdd6;   /* the separator dot */
  --card-rule:   #d7dde6;   /* the Part cards' border — one step darker, because
                               a tinted fill needs a slightly firmer edge */
  --navy:        #20324e;   /* structural fill: the total bar */
  --on-navy:     #ffffff;
  --teal:        #00756a;   /* action only — the button. Nothing else. */
  --teal-ink:    #00514a;   /* the hover step */
  --on-teal:     #ffffff;
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Reading measure. `ch` is the width of a ZERO, which in Montserrat is wider
     than an average prose character — 48ch works out to about 62 characters of
     real text, and it stays at 62 across every font size because ch scales
     with the font. Do not "correct" this to 62ch; that would give ~78. */
  --measure: 48ch;
}

/* ---------- 2a. Dark mode is OPT-IN, never automatic ----------
   There is deliberately no `@media (prefers-color-scheme: dark)` here.
   oscarheadshots.com is white at every screen and has no theme switch, so an
   automatic dark section would put near-black cards and pale headings on a
   white page for every visitor whose OS is set to dark — which is a large
   share of them. That is exactly what happened on the first live version.

   If the site ever gains a real dark theme, set data-theme="dark" on <html>
   and this block takes over. Do not restore the media query unless the page
   behind the section goes dark at the same time. */

:root[data-theme="dark"] .pricing{
  --ground:#0d1117;
  --surface:#161c25;   /* extras */
  --surface-2:#1e2531; /* cards — still the lighter of the two, so the
                          filled/outlined relationship survives inversion */
  --ink:#e7ebf2;    --ink-2:#a6b2c4;  --ink-3:#7b8799;
  --ink-strong:#f0f0f0;
  --rule:#27303d;   --rule-2:#374252;  --card-rule:#2f3a49;
  --navy:#3b4f6d;   --on-navy:#f2f5f8;   /* navy has to lift on a dark ground */
  --teal:#3aa99a;   --teal-ink:#7fd2c4;  --on-teal:#07100f;
}

/* ---------- 2b. Why there are two secondary inks ----------
   --ink-2 (slate) carries the connective text: the lede, every bullet, the
   extras, the button's sub-line. --ink-strong (near-black) carries only the
   one line directly under each price — the line that tells you what the
   number buys. That line is the hinge of the whole section, so it gets to be
   the darkest text in the card while the bullets stay a step back.

   #171717, not #000000: pure black on an off-white ground halates at 14–15px,
   which is the size of this text.

   If you ever want ALL secondary text near-black, change --ink-2 rather than
   adding overrides — but then also pin .part-num back to a mid grey, or the
   "PART 1" label ends up darker than the name it labels. */


/* ---------- 3. Section ---------- */

.pricing{
  box-sizing:border-box;

  /* main.css has `section{ display:flex; justify-content:center; align-items:center }`
     as a bare element selector. That rule is weaker than `.pricing`, but it wins
     anything `.pricing` does not declare — so without this line every child of
     the section becomes a flex item and the whole thing lays out as a row of
     squeezed columns. Declaring display explicitly is the fix. */
  display:block;

  /* Fills whatever container it is dropped into — on oscarheadshots.com that
     is .blocked_content, which is a percentage of the viewport, so the section
     lines up with the header and everything else on the page.
     Reading measure is protected INSIDE via --measure, not by starving the
     section of width. The 1400px cap only engages on very large monitors,
     where .blocked_content can exceed 1600px and the cards would go silly. */
  width:100%;
  max-width:1400px;
  margin-inline:auto;
  padding-inline:0;            /* .blocked_content already insets the page */
  padding-block:0 48px;

  /* Layout below responds to THIS section's width, not the window's. That
     matters because .blocked_content is a percentage of the viewport and
     changes by 345px between 1632px and 1633px of window — a media query
     would break at the wrong moments. Also means the section behaves
     correctly if you ever drop it in a narrower column. */
  container-type:inline-size;
  container-name:pricing;
  font-family:var(--font);
  font-size:16px;              /* do not shrink — this is why we chose Montserrat */
  font-weight:400;
  line-height:1.6;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.pricing *,
.pricing *::before,
.pricing *::after{ box-sizing:border-box; }

.pricing h1{
  font-weight:700;
  font-size:clamp(26px,5.6vw,35px);
  line-height:1.14;            /* never 1.0 */
  letter-spacing:-.022em;      /* negative on headlines */
  text-wrap:balance;
  color:var(--ink);
  margin:0 0 12px;
}

.pricing-lede{
  font-size:clamp(17px,3.4vw,19px);
  color:var(--ink-2);
  margin:0 0 44px;
  /* No measure cap: this line wraps to the container, by request. */
  text-wrap:pretty;
}
.pricing-lede strong{ color:var(--ink); font-weight:700; }

/* Uppercase label: POSITIVE tracking, the opposite of headlines */
.pricing .eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
  margin:0 0 14px;
}


/* ---------- 3b. Guards against the host stylesheet ----------
   main.css styles bare elements (`h1`, `h2`, `a`, `section a`). Those selectors
   are weak, so they only win where this file is silent — which made the H1 and
   the "Services also available" heading render in Jost, the family this brand
   moved away from, faked to bold because Jost is only loaded at 500.
   Everything in this section is Montserrat; say so rather than relying on
   inheritance, which a bare element selector overrides. */

.pricing h1, .pricing h2, .pricing p,
.pricing ul, .pricing li,
.pricing a,  .pricing span, .pricing div{ font-family:var(--font); }

/* `h1{max-width:400px}` and `h2{margin-top:-20px}` live in main.css media
   queries; neither should reach this section. */
.pricing h1, .pricing h2{ max-width:none; }

/* main.css: `a{color:#b82429}` and `section a{color:#000}` — red is the retired
   link colour and black gives no link affordance at all. Nothing in this slice
   is a body link yet, but the FAQ has one, so claim it now. */
.pricing a:not(.cta){
  color:var(--teal);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.pricing a:not(.cta):hover{ color:var(--teal-ink); text-decoration-thickness:2px; }
.pricing a:not(.cta):focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:3px; }


/* ---------- 4. The two parts ---------- */

/* Stacked by default; side by side only when each card can still hold a
   readable line. Below ~800px of section width, two columns would squeeze
   the bullets to about 35 characters. */
.formula{
  display:grid; gap:10px;
  grid-template-columns:1fr;
  align-items:stretch;
}
@container pricing (min-width:800px){
  .formula{ grid-template-columns:1fr auto 1fr; }
}
/* The "+" stays visible when the cards stack — it sits between them either
   way and it is the thing that says these two fees add up. */

/* The operator. It is the only thing on the page saying these two fees ADD,
   so it is set heavier than a stray glyph: Montserrat's "+" is thin at 400. */
.op{
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:700; line-height:1;
  color:var(--ink-2); padding:0 4px;
}

/* Filled, not elevated. The site's pages are white, so a white card can only
   separate itself with a shadow — and a soft shadow on white is nearly
   invisible on many screens, in bright light, and in print. A tint always
   reads. No box-shadow: a panel that is darker than the surface it sits on
   should not also claim to float above it. */
.part{
  background:var(--surface-2);
  border:1px solid var(--card-rule);
  border-radius:14px;
  padding:20px 18px;
  display:flex; flex-direction:column;
}

/* Part heading — one baseline row, never stacked.
   Three signals separate marker from name: size, colour, case. Keep all three.
   --ink-3 is NOT usable here: 3.55:1 at 16px/700 fails WCAG. */
.part-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0 0 2px; }
.part-num{
  font-size:16px; font-weight:700; letter-spacing:.06em;   /* large caps take less tracking */
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
.part-sep{ color:var(--rule-2); font-size:15px; line-height:1; }
.part-name{ font-size:20px; font-weight:700; letter-spacing:-.016em; color:var(--ink); }

/* A price is a fact, not an action — navy, never teal.
   700 is not optional: Montserrat's numerals go optically light below it. */
.part-price{
  font-size:37px; font-weight:700; line-height:1.05;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  margin:6px 0 4px;
}
.part-price .unit{
  font-size:16px; font-weight:400; color:var(--ink-2);
  letter-spacing:0; margin-left:2px;
}

/* The line under the price. Near-black, one step ahead of the bullets —
   it is what tells you what the number covers. See section 2b. */
.part-sub{ font-size:14.5px; color:var(--ink-strong); margin:0; }
.part ul{ margin:9px 0 0; padding-left:18px; font-size:14.5px; color:var(--ink-2);
          max-width:var(--measure); }
.part li{ margin-bottom:3px; }


/* ---------- 5. The total bar ---------- */

.equals{
  margin:10px 0 0;
  background:var(--navy); color:var(--on-navy);
  border-radius:14px; padding:18px 20px;
  display:flex; align-items:baseline; justify-content:flex-start;
  gap:10px; flex-wrap:wrap;   /* value sits right after the label, not pushed to the far edge */
}
.equals-label{
  font-size:15px; letter-spacing:.06em; text-transform:uppercase; opacity:.9;
}
.equals-value{
  /* 20px everywhere there is room for it. Below about a 460px window the
     formula would wrap onto a second line inside the bar, so it scales with
     the SECTION's width (cqi = 1% of the container) down to a 15px floor.
     Measured: the formula needs 355px at 20px, and a 360px phone gives the
     bar 284px of inner width. For a flat size instead, use font-size:20px. */
  font-size:clamp(14px, calc(5.43cqi - 2.5px), 20px);
  font-weight:700; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
}


/* ---------- 6. Optional extras ----------
   Deliberately NOT styled like the Part cards. The cards are FILLED; this is
   OUTLINED — same shape, same border radius, less visual weight. That is what
   keeps it from reading as a third part of the price while still being a
   findable box rather than loose text.

   Filled vs outlined replaced an earlier elevated-vs-recessed treatment, which
   only worked while the page ground was tinted. On a white page it had nothing
   to be elevated above. */

.extras{
  margin:10px 0 0;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:18px 20px;
}
.extras-title{
  font-size:16px; font-weight:700; letter-spacing:-.012em;
  color:var(--ink-2);          /* a step back from --ink, like the part markers */
  margin:0 0 8px;
  line-height:1.3;
}
.extras-sub{
  font-size:14.5px; color:var(--ink-2); margin:0 0 9px;
}
.extras ul{ margin:0; padding-left:18px; font-size:14.5px; color:var(--ink-2); }
.extras li{ margin-bottom:4px; }
.extras li:last-child{ margin-bottom:0; }

/* One per line, always. Columns were tried and rejected: three services of
   very different lengths read as ragged blocks side by side, and the eye has
   to jump horizontally to compare prices that belong in a vertical column. */


/* ---------- 7. The button ----------
   The only saturated thing in the section. If teal appears anywhere else,
   the button stops being the loudest element and this stops working.
   Uppercase, so POSITIVE tracking. 15px/700 on --teal is 5.3:1 — passes AA
   as normal text, so it does not depend on the large-text exemption. */

.cta-block{ margin-top:28px; text-align:center; }
.cta{
  display:inline-block;
  background:var(--teal); color:var(--on-teal);
  font-family:var(--font); font-weight:700; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:15px 34px; border-radius:12px;
}
.cta:hover,
.cta:focus-visible{ background:var(--teal-ink); color:var(--on-teal); }
.cta:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.cta-sub{
  margin:11px 0 0; font-size:14px; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}