/* ════════════════════════════════════════════════════════════════════════════
   MIKODES Daylight — overlay for the demo showcase pages (owner-approved look, 2026-11-10).
   Master: MIKODES-BRAIN/DESIGN/daylight-kit/demo/daylight.css — copied next to every showcase page by
   apply_demos.py as daylight.css and loaded AFTER page.css (and extra.css). Edit the master, re-run.

   The page is not regenerated and nothing in it is added, removed or reworded: this file only restyles the
   classes of DESIGN/demo-showcase/_template/page.css — white page, ink text, Instrument Sans, pill buttons,
   indigo only for things you press — and puts the device on a stage: the product's own accent colour as a
   soft wash. The MacBook / iPhone, its menu bar and the app inside it are left exactly as they are.

   Rules this file keeps (the demo hosts send a strict Content-Security-Policy, and Envato reviewers open them):
   - no @import, no remote url(): the font is the page's own file (font-src 'self' is all some hosts allow)
   - no transform / filter / contain on .stage or .sticky: "Full screen" needs position: fixed to mean the window
   - sizes of the device change only on wide screens and never while it is full screen
   ════════════════════════════════════════════════════════════════════════════ */

/* Instrument Sans, variable 400-700, latin. SIL Open Font License 1.1 (github.com/Instrument/instrument-sans). */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("instrument-sans.woff2") format("woff2"); }

/* tokens. The page paints with --accent (the product colour). Daylight keeps that colour for the wash only, so it
   is captured on <html> first (--wash) and <body> then points the page's accent at indigo. */
:root {
  --dl-paper: #FFFFFF; --dl-mist: #F5F6FB; --dl-ink: #0E1030; --dl-slate: #5C6180; --dl-line: #E6E8F2; --dl-line-2: #C9CCE0;
  --dl-indigo: #3B2DFF; --dl-indigo-deep: #2A1FD9; --dl-note: #FFE9A8; --dl-note-ink: #3B2A00;
  --dl-font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --wash: var(--accent); --wash-rgb: var(--accent-rgb); --wash2: var(--accent);
  --bg: #fff; --ink: #0E1030; --muted: #5C6180; --line: #E6E8F2;
  color-scheme: light;
}
/* a neighbouring hue for the second light, where the browser can turn the wheel */
@supports (color: oklch(from red l c h)) {
  :root { --wash2: oklch(from var(--accent) l c calc(h + 38)); }
}
body { --accent: #3B2DFF; --accent-rgb: 59, 45, 255; --on-accent: #fff;
  background: #fff; color: var(--dl-ink); font-family: var(--dl-font); letter-spacing: -.006em; text-rendering: optimizeLegibility; }
::selection { background: rgba(59, 45, 255, .18); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--dl-indigo); outline-offset: 3px; border-radius: 8px; }

/* ───────── top bar ───────── */
.top { padding: 20px clamp(16px, 4vw, 44px); font-size: 15px; }
.brand { gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.demo-badge { padding: 5px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  color: var(--dl-note-ink); background: var(--dl-note); }
.top a { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border: 1px solid var(--dl-line); border-radius: 999px;
  background: #fff; color: var(--dl-ink); font: 600 15px/1 var(--dl-font); letter-spacing: -.01em; white-space: nowrap; }
.top a:hover { color: var(--dl-ink); border-color: var(--dl-line-2); }

/* ───────── intro ───────── */
.intro { padding: 128px 20px 28px; }
.kicker { font: 600 15px/1.3 var(--dl-font); letter-spacing: -.005em; text-transform: none; color: var(--dl-slate); }
.kicker::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: -2px 10px 0 0; vertical-align: middle; border-radius: 50%; background: var(--wash);
  box-shadow: 0 0 0 4px rgba(var(--wash-rgb), .18); }
.intro h1 { max-width: 15em; margin: 20px auto 20px; font-size: clamp(40px, 6.2vw, 92px); line-height: .96; letter-spacing: -.05em; font-weight: 600; text-wrap: balance; }
.intro h1 b { color: #6E7396; font-weight: 600; }
.lede { max-width: 620px; color: var(--dl-slate); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; letter-spacing: -.012em; }
/* the notice: "This is only a demo" */
.demo-note { max-width: 620px; margin-top: 26px; padding: 16px 22px 18px; border: 0; border-radius: 24px; background: var(--dl-note); color: var(--dl-note-ink);
  font-size: 15px; line-height: 1.45; }
.demo-note strong { display: table; margin: 0 auto 9px; padding: 5px 11px; border-radius: 999px; background: var(--dl-note-ink); color: var(--dl-note);
  font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .06em; }
.cta { height: 56px; margin-top: 30px; padding: 0 28px; background: var(--dl-indigo); color: #fff; font: 600 17px/1 var(--dl-font); letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -10px rgba(59, 45, 255, .7); }
.cta:hover { background: var(--dl-indigo-deep); }
.cue { margin-top: 24px; color: var(--dl-slate); font-size: 14px; }
.cue i { border-color: var(--dl-line-2); }
.cue i::after { background: var(--dl-slate); }

/* ───────── the stage: the product's own colour as daylight, around the device ───────── */
.sticky { padding-left: clamp(18px, 4.4vw, 72px); padding-right: clamp(18px, 4.4vw, 72px); }
.sticky::before { content: ""; position: absolute; inset: 12px clamp(10px, 1.6vw, 24px); border-radius: clamp(28px, 3.6vw, 56px); pointer-events: none;
  background: rgba(var(--wash-rgb), .12);
  background:
    radial-gradient(85% 75% at 50% 108%, color-mix(in oklab, var(--wash) 46%, #fff), transparent 72%),
    radial-gradient(70% 70% at 0% 0%, color-mix(in oklab, var(--wash2) 26%, #fff), transparent 70%),
    color-mix(in oklab, var(--wash) 9%, #fff); }
body.expanded .sticky::before { display: none; }
.glow { display: none; }

/* the device keeps its own frame; only what it casts on the page changes (a soft shadow in the product's colour) */
.mac::after { left: 3%; right: 3%; bottom: -3.2cqw; height: 6.5cqw; opacity: .38; filter: blur(2.2cqw);
  background: #0E1030; background: color-mix(in oklab, var(--wash) 55%, #0E1030); }
.lid { box-shadow: inset 0 0 0 .18cqw #2c2e33, inset 0 0 0 .35cqw #0b0b0d, 0 0 0 .12cqw #54575e, 0 2.6cqw 5cqw -2.2cqw rgba(14, 16, 48, .4); }
body.phone:not(.expanded) .lid {
  box-shadow: inset 0 0 0 .6cqw #2c2e33, 0 0 0 .5cqw #4a4d54, 0 20cqw 24cqw -10cqw rgba(14, 16, 48, .45), 0 5cqw 8cqw -3cqw rgba(14, 16, 48, .28);
  box-shadow: inset 0 0 0 .6cqw #2c2e33, 0 0 0 .5cqw #4a4d54, 0 20cqw 24cqw -10cqw color-mix(in oklab, var(--wash) 50%, #0E1030), 0 5cqw 8cqw -3cqw rgba(14, 16, 48, .28); }
/* the DEMO tag in the menu bar speaks the notice's colours */
.menubar .tag { color: var(--dl-note-ink); background: var(--dl-note); }

/* controls under the device */
.controls { gap: 10px 12px; }
.controls button { height: 42px; padding: 0 20px; border: 1px solid var(--dl-line); background: #fff; color: var(--dl-ink);
  font: 600 15px/1 var(--dl-font); letter-spacing: -.01em; box-shadow: 0 1px 2px rgba(14, 16, 48, .06); }
.controls button:hover { background: #fff; border-color: var(--dl-line-2); }
.controls button.primary { border-color: transparent; background: var(--dl-indigo); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -10px rgba(59, 45, 255, .7); }
.controls button.primary:hover { background: var(--dl-indigo-deep); border-color: transparent; }
.controls .note { color: rgba(14, 16, 48, .78); font-size: 13.5px; }
.controls .note b { color: var(--dl-ink); }
.controls .note a { color: var(--dl-ink); border-bottom-color: rgba(14, 16, 48, .32); }

/* the "Sample data" switcher (extra.css, pages with more than one part): a segmented control */
.switch { gap: 2px; padding: 4px; border-color: rgba(14, 16, 48, .08); background: rgba(255, 255, 255, .62); }
.switch span { color: var(--dl-slate); font-size: 13.5px; }
.switch span::before { background: var(--wash); }
.controls .switch button { height: 34px; padding: 0 14px; border: 0; background: transparent; color: var(--dl-slate); font-size: 14px; box-shadow: none; }
.controls .switch button:hover { background: rgba(14, 16, 48, .05); }
.controls .switch button[aria-pressed="true"] { background: #fff; color: var(--dl-ink); box-shadow: 0 1px 2px rgba(14, 16, 48, .12), 0 6px 14px -8px rgba(14, 16, 48, .3); }

/* full screen. The device fills the window on every screen: on phones page.css's own width for the iPhone came
   after its full-screen rule and won, which left the app 83% wide with a strip of the page beside it. */
body.expanded .mac { width: auto; }
body.expanded .close { height: 40px; padding: 0 18px; border-color: transparent; background: var(--dl-ink); color: #fff;
  font: 600 14px/1 var(--dl-font); box-shadow: 0 10px 30px -8px rgba(14, 16, 48, .5); }

/* contact (the four 2026-11-05 pages) */
.contact { color: var(--dl-ink); box-shadow: 0 0 0 1px var(--dl-line), 0 14px 30px -12px rgba(14, 16, 48, .4); }

/* ───────── after ───────── */
.after { max-width: 1120px; padding: 72px 20px 44px; gap: 16px; }
.after div { padding: 28px; border: 0; border-radius: 28px; background: var(--dl-mist); }
.after h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.12; font-weight: 600; letter-spacing: -.03em; }
.after p { color: var(--dl-slate); font-size: 15.5px; line-height: 1.45; }
.foot { max-width: 760px; padding: 0 20px 96px; color: var(--dl-slate); font-size: 14px; }
.foot b { color: var(--dl-ink); font-weight: 600; }
.foot a { color: var(--dl-ink); border-bottom-color: var(--dl-line-2); }

/* ───────── wide screens: room for the stage around the device ───────── */
@media (min-width: 721px) {
  .sticky { padding-bottom: 86px; }
  .controls { bottom: 28px; }
  body:not(.phone):not(.expanded) .mac { width: min(1640px, 100%, calc((100vh - 132px) * 1.6)); }
  body.phone:not(.expanded) .mac { width: min(400px, 88vw, calc((100vh - 180px) * .47)); }
}

/* ───────── small screens ───────── */
@media (max-width: 720px) {
  .top { padding: 14px 16px; gap: 10px; }
  .brand { flex: 0 1 auto; min-width: 0; gap: 8px; font-size: 17px; line-height: 1.05; white-space: normal; }
  .demo-badge { flex: none; padding: 4px 8px; font-size: 10.5px; line-height: 1.2; }
  .top a { flex: none; height: 36px; padding: 0 13px; font-size: 13.5px; }
  .intro { padding: 100px 18px 24px; }
  .intro h1 { letter-spacing: -.045em; }
  .demo-note { padding: 14px 18px 16px; border-radius: 22px; font-size: 14.5px; }
  .sticky { padding-left: 14px; padding-right: 14px; }
  .sticky::before { inset: 8px; border-radius: 28px; }
  .controls { bottom: 18px; }
  .controls button { height: 38px; padding: 0 14px; font-size: 13.5px; }
  /* page.css keeps the right corner free for the contact button; a page without one centres its controls */
  body:not(:has(.contact)) .controls { padding-right: 12px; }
  .switch span { padding: 0 4px 0 8px; font-size: 12px; }
  .controls .switch button { height: 32px; padding: 0 8px; font-size: 12.5px; }
  .controls .note { font-size: 12.5px; }
  .after { padding: 48px 16px 36px; }
  .after div { padding: 22px; border-radius: 24px; }
}
@media (max-width: 380px) {
  .top { padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 15px; }
  .top a { height: 34px; padding: 0 11px; font-size: 13px; }
}
@media (max-width: 340px) {
  .brand { gap: 6px; font-size: 14px; }
  .demo-badge { padding: 3px 6px; font-size: 9.5px; }
  .top a { padding: 0 9px; font-size: 12.5px; }
}