/* /desktop (static/desktop.html, static/js/desktop-page.js).
   Its own file because app.css is at its size cap and public.css is linked from every public page.
   The chrome, buttons, steps, spec table, FAQ and closing band come from public.css; this file adds the hero
   with the framed app and the file read-back, the screenshot strip, the Precision split, the screen tour and the
   two-column free/credits block. Every selector starts with `.pk-pub .dk-` or `#dk` (tests/test_desktop_page.py
   scans for that; the one allowed exception is the light-theme swap, which starts with `[data-theme="light"] #dk`).
   Geist is self-hosted (static/fonts); Geist Mono is used only for the ExifTool read-back, which is data. */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/geist-400.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/geist-600.woff2) format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/geist-700.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/geist-mono-500.woff2) format('woff2'); }

#dk {
  --dk-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dk-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --dk-bar: color-mix(in srgb, var(--s2) 70%, var(--bg));
  --dk-shadow: 0 32px 56px -30px rgba(0, 0, 0, .72), 0 12px 22px -16px rgba(0, 0, 0, .5);
  overflow-x: clip; font-family: var(--dk-sans);
}
[data-theme="light"] #dk { --dk-shadow: 0 28px 50px -30px rgba(40, 32, 12, .42), 0 10px 20px -16px rgba(40, 32, 12, .28); }
#dk ::selection { background: rgba(var(--gold-rgb), .35); color: inherit; }

/* Links and notes kept from the first version of the page */
.pk-pub .dk-quiet { padding: 12px 8px; color: var(--pk-link); font-size: 15px; font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(var(--gold-rgb), .45); text-underline-offset: 3px; }
.pk-pub .dk-quiet:hover { text-decoration-color: currentColor; }
.pk-pub .dk-link { color: var(--pk-link); text-decoration: underline; text-decoration-color: rgba(var(--gold-rgb), .45); text-underline-offset: 3px; }
.pk-pub .dk-link:hover { text-decoration-color: currentColor; }
.pk-pub .dk-quiet:focus-visible, .pk-pub .dk-link:focus-visible, #dk .dk-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
#dk .dk-other { max-width: 560px; margin: 16px 0 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--s1); font-size: 13px; line-height: 1.55; color: var(--dim); }
#dk .dk-other[hidden] { display: none; }
#dk .dk-note { max-width: 720px; margin: 24px 0 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--s1); font-size: 13px; line-height: 1.55; color: var(--dim); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
#dk .dk-hero { position: relative; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: 48px; align-items: start;
  box-sizing: border-box; max-width: 1360px; margin: 0 auto; padding: 72px 32px 56px; }
#dk .dk-hero::before { content: ""; position: absolute; inset: 0 0 auto 30%; height: 85%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 60% 40%, var(--pk-glow), transparent 68%); filter: blur(14px); }
#dk .dk-hero-copy { padding-top: clamp(16px, 8vh, 88px); }
#dk .dk-hero h1 { margin: 0 0 24px; font-size: clamp(2.4rem, 4.2vw, 3.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; color: var(--text); }
#dk .dk-lede { max-width: 40ch; margin: 0 0 32px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--dim); }
#dk .dk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#dk .dk-cta .btn-primary svg { width: 20px; height: 20px; flex: none; }
#dk .dk-big { min-height: 56px; padding: 16px 28px; border-radius: 12px; font-size: 1.08rem; }
#dk .dk-cta .dk-big { flex: 1 1 0; min-width: 200px; justify-content: center; padding: 16px 16px; font-size: 1rem; white-space: nowrap; }
#dk .dk-below { margin: 12px 0 0; }
#dk .dk-below .dk-quiet { display: inline-block; padding: 8px 0; }
#dk .dk-fine { margin: 16px 0 0; font-size: .86rem; line-height: 1.5; color: var(--dim); }

#dk .dk-stage { position: relative; min-width: 0; }
#dk .dk-win { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); box-shadow: var(--dk-shadow); }
#dk .dk-win picture, #dk .dk-win picture img { display: block; width: 100%; height: auto; }
#dk .dk-bar { display: flex; align-items: center; gap: 8px; height: 32px; padding-left: 12px; background: var(--dk-bar); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--dim); }
#dk .dk-bar-icon { width: 16px; height: 16px; border-radius: 3px; }
#dk .dk-bar-title { flex: 1; }
#dk .dk-bar-ctl { display: flex; height: 100%; }
#dk .dk-bar-ctl svg { box-sizing: content-box; width: 10px; height: 10px; padding: 11px 18px; }
#dk .dk-win .dk-theme-light { display: none; }
[data-theme="light"] #dk .dk-win .dk-theme-dark { display: none; }
[data-theme="light"] #dk .dk-win .dk-theme-light { display: block; }

/* The file read-back: real ExifTool output for a photo saved from the app */
#dk .dk-proof { position: relative; z-index: 1; width: min(94%, 580px); margin: -72px 0 0 -40px; padding: 16px 20px 12px; border: 1px solid rgba(var(--gold-rgb), .35);
  border-radius: 14px; background: color-mix(in srgb, var(--s1) 96%, transparent); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .7); backdrop-filter: blur(8px); }
#dk .dk-proof figcaption { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--pk-link); }
#dk .dk-proof dl { margin: 0; font-family: var(--dk-mono); font-size: 12px; line-height: 1.55; }
#dk .dk-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
#dk .dk-row dt { margin: 0; font-weight: 500; color: var(--text); }
#dk .dk-row dd { margin: 0; min-width: 0; color: var(--dim); overflow-wrap: anywhere; }
#dk .dk-grp { display: block; font-size: 11px; color: var(--dim); opacity: .85; }
#dk .dk-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#dk .dk-kept dd { color: var(--text); }
#dk .dk-tick { margin-left: 12px; font-family: var(--dk-sans); font-size: 11.5px; color: var(--pk-link); }
#dk .dk-proof-note { margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--dim); }

/* One authored moment: the framed window settles in once. Already in place without it. */
@media (prefers-reduced-motion: no-preference) {
  #dk .dk-win { animation: dk-settle .9s cubic-bezier(.16, 1, .3, 1) both; }
  #dk .dk-proof { animation: dk-settle .9s .25s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes dk-settle { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── Sections ─────────────────────────────────────────────────────────── */
#dk .dk-sec { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 72px 32px; scroll-margin-top: 64px; }
#dk .dk-head { max-width: 68ch; margin-bottom: 40px; }
#dk .dk-sec h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; color: var(--text); }
#dk .dk-head p, #dk .dk-prec-copy p { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.65; color: var(--dim); }
#dk .dk-list { margin: 24px 0; padding-left: 20px; font-size: .98rem; line-height: 1.65; color: var(--dim); }
#dk .dk-list li { margin: 0 0 8px; padding-left: 4px; }
#dk .dk-list li::marker { color: var(--gold); }

/* Three real states of one batch: before, during, after */
#dk .dk-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
#dk .dk-strip li { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#dk .dk-shot { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--s1); box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .6); aspect-ratio: 8 / 5; }
#dk .dk-shot picture, #dk .dk-shot img { display: block; width: 100%; height: 100%; }
#dk .dk-shot img { object-fit: cover; object-position: top left; }
#dk .dk-step { display: flex; align-items: flex-start; gap: 12px; }
#dk .dk-step .step-num { flex: none; }
#dk .dk-step h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; color: var(--text); }
#dk .dk-step p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--dim); }

/* Precision split */
#dk .dk-prec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
#dk .dk-card { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--bg); box-shadow: var(--dk-shadow); }
#dk .dk-card img, #dk .dk-card picture { display: block; width: 100%; height: auto; }

/* Screen tour: tabs when JS runs, every screen stacked when it does not */
#dk .dk-tabs { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
#dk .dk-tour[data-js] .dk-tabs { display: flex; }
#dk .dk-tabs button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--s1); color: var(--dim);
  font: 600 .92rem/1.2 var(--dk-sans); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
#dk .dk-tabs button:hover { color: var(--text); border-color: rgba(var(--gold-rgb), .6); }
#dk .dk-tabs button[aria-selected="true"] { color: var(--text); border-color: rgba(var(--gold-rgb), .85); background: rgba(var(--gold-rgb), .14); }
#dk .dk-panel { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
#dk .dk-tour[data-js] .dk-panel { margin-bottom: 0; }
#dk .dk-panel[hidden] { display: none; }
#dk .dk-panel p { max-width: 64ch; margin: 0; font-size: 1rem; line-height: 1.65; color: var(--dim); }
#dk .dk-shot-win { aspect-ratio: auto; box-shadow: var(--dk-shadow); }
#dk .dk-shot-win img { height: auto; }

/* Free editor / credits */
#dk .dk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
#dk .dk-two h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
#dk .dk-two .dk-cta { margin-top: 8px; }
#dk .dk-steps { max-width: 760px; }
#dk .dk-os { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
#dk .dk-os-h { margin: 0 0 20px; font-size: 1.2rem; font-weight: 700; color: var(--text); }
#dk .dk-os .dk-note { margin-top: 20px; }
#dk .dk-vs .dk-two { gap: 48px; }
#dk .dk-vs h3 { margin: 0 0 4px; font-size: 1.2rem; font-weight: 700; color: var(--text); }
#dk .dk-vs .dk-list { margin-top: 12px; }
#dk .dk-ui { display: inline-block; padding: 1px 7px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--s2);
  font: 600 .86em/1.5 var(--dk-sans); color: var(--text); white-space: nowrap; }

/* The "what to do next" dialog after a download */
#dk .dk-thanks { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
  background: rgba(0, 0, 0, .62); overflow-y: auto; }
#dk .dk-thanks[hidden] { display: none; }
#dk .dk-thanks-card { position: relative; box-sizing: border-box; width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; padding: 32px 28px 24px;
  border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 18px; background: var(--s1); color: var(--text); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
#dk .dk-thanks-card h2 { margin: 0 32px 12px 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; outline: none; }
#dk .dk-thanks-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--dim);
  font-size: 26px; line-height: 1; cursor: pointer; }
#dk .dk-thanks-x:hover { color: var(--text); background: var(--s2); }
#dk .dk-thanks-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#dk .dk-thanks-lead, #dk .dk-thanks-next { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--dim); }
#dk .dk-thanks-steps { margin: 0 0 16px; padding-left: 22px; font-size: .95rem; line-height: 1.75; color: var(--text); }
#dk .dk-thanks-steps li { margin: 0 0 10px; padding-left: 4px; }
#dk .dk-thanks-steps li::marker { color: var(--gold); font-weight: 700; }
#dk .dk-thanks-more { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  #dk .dk-thanks:not([hidden]) { animation: dk-fade .18s ease-out both; }
  #dk .dk-thanks:not([hidden]) .dk-thanks-card { animation: dk-pop .22s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dk-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
#dk .dk-faqsec { max-width: 860px; }
#dk .dk-more { box-sizing: border-box; max-width: 980px; margin: 0 auto; padding: 8px 32px 56px; text-align: center; }
#dk .dk-more h2 { margin: 0 0 16px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
#dk .dk-more .pk-chips { justify-content: center; }

/* ── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  #dk .dk-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 20px 32px; }
  #dk .dk-hero-copy { padding-top: 0; }
  #dk .dk-hero::before { inset: 0 0 auto 0; }
  #dk .dk-proof { width: auto; margin: -32px 12px 0; }
  #dk .dk-strip { grid-template-columns: minmax(0, 1fr); }
  #dk .dk-prec, #dk .dk-two { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  #dk .dk-vs .dk-two { gap: 32px; }
  #dk .dk-sec { padding: 48px 20px; }
  #dk .dk-more { padding: 8px 20px 40px; }
}
@media (max-width: 760px) {
  #dk .dk-os { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 560px) {
  #dk .dk-big { width: 100%; justify-content: center; }
  #dk .dk-cta .dk-big { flex-basis: 100%; min-width: 0; }
  #dk .dk-thanks { padding: 12px; align-items: flex-end; }
  #dk .dk-thanks-card { padding: 28px 20px 20px; }
  #dk .dk-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #dk .dk-tabs button { flex: 1 1 100%; text-align: left; }
  #dk .dk-bar-ctl svg { padding: 11px 10px; }
}