/*
  Ounce: light theme.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Loaded only by the Ounce pages, after site.css and ounce.css, and it works by
  redefining the same tokens rather than by re-writing the components. The rest
  of the site stays dark and is untouched by this file.

  The register is Apple's product-page one: white, a soft grey for banded
  sections, near-black text, generous air, hairline rules, and colour used
  sparingly and only where it means something. Every colour below was checked
  for contrast on its own background: the brand orange at its screen value is
  about 2.5:1 on white and fails as text, so text uses a deeper shade of it and
  the bright one is kept for fills.
*/

:root {
  --bg:        #ffffff;
  --bg-2:      #ffffff00;
  --panel:     #f5f5f7;   /* the grey Apple bands its sections with */
  --panel-2:   #ececf0;
  --line:      rgba(0, 0, 0, 0.11);

  --ink:       #1d1d1f;   /* 16:1 on white */
  --ink-soft:  #45454a;   /*  9:1 */
  --muted:     #6e6e73;   /*  5.4:1, safe for small text */

  --orange:      #c2470f; /* text-safe: 5.4:1 on white */
  --orange-2:    #e2591f;
  --orange-deep: rgba(194, 71, 15, 0.30);

  --app:       #0b6bcb;   /* 5.3:1 */
  --app-2:     #1f7fe0;
}

body { background: var(--bg); color: var(--ink); }

/* ---- chrome ---- */
.site-head.is-stuck {
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--line);
}
.site-head nav a { color: var(--ink-soft); }
.site-head nav a:hover { color: var(--ink); }
.btn--primary { color: #fff; }
.btn--ghost { background: rgba(0, 0, 0, 0.02); }

/* ---- hero ---- */
.oh::before { background: radial-gradient(50% 60% at 50% 0%, rgba(11,107,203,.10), transparent 70%); }
.oh__aura span:nth-child(1) { background: radial-gradient(circle, rgba(11,107,203,.13), transparent 68%); }
.oh__aura span:nth-child(2) { background: radial-gradient(circle, rgba(226,89,31,.11), transparent 68%); }
.oh__aura span:nth-child(3) { background: radial-gradient(circle, rgba(31,127,224,.09), transparent 70%); }
.oh__icon { box-shadow: 0 20px 44px -18px rgba(11,107,203,.45); }

/* ---- panels: on white these want a hairline and almost no gradient ---- */
.card, .reg, .guard, .fmt, .why__col, .step, .form, .probe__step {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -18px rgba(0,0,0,.35);
}
.fmt { background: linear-gradient(180deg, var(--panel), #fff 70%); }
.section--alt { background: var(--panel); }
.strip { background: var(--panel); }
.price { background: linear-gradient(180deg, var(--panel), #fff 60%); }

/* ---- accents that were tuned for a dark ground ---- */
.grad { background: linear-gradient(100deg, var(--orange), #e2591f 60%, #a3380a); -webkit-background-clip: text; background-clip: text; }
.bar__cut { color: #157a4a; }
.probe__step--no  b { color: #b3261e; background: rgba(179,38,30,.10); }
.probe__step--yes b { color: #157a4a; background: rgba(21,122,74,.10); }
.probe__track { fill: var(--panel-2); }
.probe__slice { filter: drop-shadow(0 0 10px rgba(11,107,203,.45)); }
.bar__fill { box-shadow: 0 0 12px rgba(11,107,203,.30); }
.run__total b { background: linear-gradient(100deg, var(--app), #0a5aa8 60%, var(--orange)); -webkit-background-clip: text; background-clip: text; }

.ents { background: rgba(11,107,203,.05); border-color: rgba(11,107,203,.22); color: var(--ink-soft); }
.ents .none { color: #b3261e; }
.proof { background: rgba(21,122,74,.06); border-color: rgba(21,122,74,.24); }

/* ---- images: heavy black shadows read as dirt on white ---- */
.menus img { filter: drop-shadow(0 16px 28px rgba(0,0,0,.22)); }
.shot img { filter: drop-shadow(0 20px 34px rgba(0,0,0,.24)); }
.run__shot img, .demo__frame, .feat__media img {
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.40);
}
.run__shot img { border-color: var(--line); }

/* ---- footer, including the platform's own credit block ---- */
.site-foot { border-top: 1px solid var(--line); }
.footer__brand { color: var(--ink); }
.footer__copy, .footer__credit { color: var(--muted); }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--orange); }

/* ---- a little more air, which is most of what makes Apple's pages feel calm ---- */
body { font-size: 1.06rem; line-height: 1.55; }
.section { padding-block: clamp(5rem, 13vw, 10rem); }

/* ounce.css sets --app on `.ounce` itself, which beats a :root override for
   everything inside main. Same selector, later file, so the light values win.
   Without this the probe's percentages and the format tags stayed at their dark
   theme blue and sat at 2.4:1 on white. */
.ounce { --app: #0b6bcb; --app-2: #1f7fe0; }

/* the skip link only appears on keyboard focus, and was dark on dark orange */
.skip { color: #fff; }

/* ---- contrast corrections found by auditing the rendered page on white ----
   Each of these passed on the dark ground and failed once the ground turned
   white, which is exactly the class of bug a theme swap introduces. */

/* the probe's percentages sat at 4.06:1 against 4.5 needed */
.probe__marks b { color: var(--app); }

/* the platform's own legal separators are set in a cream tuned for dark */
.footer__legal span[aria-hidden="true"] { color: var(--muted); }
.footer__legal a { color: var(--ink-soft); }
.footer__legal a:hover { color: var(--orange); }

/* the fallback shown only when a browser cannot play the video sat black on the
   black video frame */
/* this fallback lives INSIDE the video element, so it is not a child of the
   figure. It only ever renders in a browser that cannot play the video at all,
   and there it must still be legible against the black frame. */
.demo__video p { color: #f5f5f7; padding: 1.5rem; margin: 0; }