/* D4U Store · app shell.
   The standard header and footer around every app landing. The landing goes in the middle (<main>)
   and keeps its own look; the shell keeps D4U's. Every class here starts with "sh-" so it never
   collides with a product's CSS, and every color is its own --sh-* token.
   Light and dark: js/theme.js (key "d4u-theme"), the same switch as the rest of d4u.store. */

@font-face { font-family: "Onest"; src: url("../fonts/onest-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrainsmono-700-d4u.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --sh-bg: #FFFFFF; --sh-ink: #0B0D10; --sh-muted: #586373; --sh-line: #DCE1E8; --sh-blue: #1652F0;
  --sh-font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sh-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* Font sizes shared by every D4U landing. Each app keeps its own typeface; the sizes are common. */
  --sh-fs-display: clamp(40px, 5.6vw, 72px);  /* hero title (h1) */
  --sh-fs-h2: clamp(30px, 3.6vw, 44px);       /* section titles */
  --sh-fs-h3: clamp(20px, 1.8vw, 22px);       /* card and block titles */
  --sh-fs-lead: clamp(18px, 1.6vw, 20px);     /* the line under a title */
  --sh-fs-body: 17px;                         /* paragraphs */
  --sh-fs-button: 16px;                       /* every button; buttons are at least 48 px tall */
  --sh-fs-small: 14px;                        /* captions, notes, platforms */
  --sh-fs-label: 13px;                        /* eyebrows, tags, status */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sh-bg: #0E1014; --sh-ink: #F1F3F6; --sh-muted: #9AA3B0; --sh-line: #252A33; --sh-blue: #5B87FF; }
}
:root[data-theme="dark"] { --sh-bg: #0E1014; --sh-ink: #F1F3F6; --sh-muted: #9AA3B0; --sh-line: #252A33; --sh-blue: #5B87FF; color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

.sh-top, .sh-foot { font: 400 15px/1.5 var(--sh-font); color: var(--sh-ink); background: var(--sh-bg); -webkit-font-smoothing: antialiased; }
.sh-top *, .sh-foot * { box-sizing: border-box; }
.sh-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; gap: 12px 20px; }
.sh-top a, .sh-foot a { color: inherit; text-decoration: none; }
.sh-top a:focus-visible, .sh-foot a:focus-visible, .sh-theme:focus-visible { outline: 2px solid var(--sh-blue); outline-offset: 3px; border-radius: 8px; }
.sh-skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 10px; background: var(--sh-ink); color: var(--sh-bg); font: 600 14px/1 var(--sh-font); }
.sh-skip:focus { left: 16px; }

/* Header: home on the left, theme and language on the right */
/* Same as the D4U Store header: 64 px, sticky, translucent, the same sizes */
.sh-top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sh-bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--sh-line) 70%, transparent); }
.sh-top .sh-wrap { min-height: 64px; gap: 12px 24px; }
.sh-home { display: inline-flex; align-items: baseline; gap: 10px; font-size: 21px; }
.sh-home .sh-d4u { font: 700 1em/1 var(--sh-mono); letter-spacing: -.02em; }
.sh-home .sh-d4u b, .sh-powered b { color: var(--sh-blue); font-weight: 700; }
.sh-home .sh-word { font-weight: 600; font-size: 17px; }
.sh-home:hover .sh-word { color: var(--sh-blue); }
.sh-crumb { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--sh-muted); font-weight: 600; font-size: 15px; }
.sh-crumb::before { content: "/"; color: var(--sh-line); font-weight: 400; }
.sh-crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sh-lang { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid var(--sh-line); border-radius: 999px; font-size: 14px; font-weight: 600; }
.sh-lang:hover { border-color: var(--sh-blue); color: var(--sh-blue); }
.sh-theme { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--sh-line); border-radius: 50%; background: transparent; color: var(--sh-ink); cursor: pointer; }
.sh-theme:hover { border-color: var(--sh-blue); color: var(--sh-blue); }
.sh-theme svg { width: 18px; height: 18px; display: block; }
.sh-theme .i-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sh-theme .i-sun { display: block; } :root:not([data-theme="light"]) .sh-theme .i-moon { display: none; } }
:root[data-theme="dark"] .sh-theme .i-sun { display: block; }
:root[data-theme="dark"] .sh-theme .i-moon { display: none; }

/* Footer: back to the store, the company, the legal links; below, the © line and the signature */
.sh-foot { border-top: 1px solid var(--sh-line); font-size: 14px; line-height: 1.6; color: var(--sh-muted); }
.sh-foot p { margin: 0; }
.sh-foot .sh-foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px 40px; padding: 32px 0 24px; }
.sh-back { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--sh-line); border-radius: 999px; font-weight: 600; color: var(--sh-ink); }
.sh-back:hover { border-color: var(--sh-blue); color: var(--sh-blue); }
.sh-label { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sh-ink); }
.sh-company strong { color: var(--sh-ink); font-weight: 600; }
.sh-legal-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sh-legal-links a { color: var(--sh-ink); }
.sh-legal-links a:hover { color: var(--sh-blue); }
.sh-foot .sh-foot-bottom { justify-content: space-between; flex-wrap: wrap; padding: 16px 0 24px; border-top: 1px solid var(--sh-line); }
.sh-powered { color: var(--sh-muted); }
.sh-powered a { font: 700 15px/1 var(--sh-mono); color: var(--sh-ink); }

@media (max-width: 680px) {
  .sh-home .sh-word { display: none; }
}
@media (max-width: 560px) {
  .sh-foot .sh-foot-top { grid-template-columns: 1fr; }
  .sh-foot .sh-foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ───── Devices: the one phone and the one tablet every D4U page draws ─────
   A generic device, the same for every app: dark frame, even bezel, a camera dot (no Apple island:
   Apple's marketing rules don't allow drawing its products). The screen inside is a real capture
   with no frame or rounded corners of its own. Set the size with --sh-phone-w / --sh-tablet-w.
   <span class="sh-phone"><img src="img/screen-home.jpg" alt="…" width="660" height="1434"></span> */
.sh-phone, .sh-tablet { position: relative; display: block; max-width: 100%; box-sizing: border-box; background: #0E1014; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -24px rgba(0, 0, 0, .55); }
.sh-phone { --sh-phone-w: 240px; width: var(--sh-phone-w); aspect-ratio: 660 / 1434; padding: calc(var(--sh-phone-w) * .03); border-radius: calc(var(--sh-phone-w) * .16); }
.sh-phone > img, .sh-phone > .sh-screen { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--sh-phone-w) * .13); }
.sh-phone::after { content: ""; position: absolute; top: calc(var(--sh-phone-w) * .06); left: 50%; width: calc(var(--sh-phone-w) * .045); aspect-ratio: 1; border-radius: 50%; background: #0E1014; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); transform: translateX(-50%); }
.sh-tablet { --sh-tablet-w: 560px; width: var(--sh-tablet-w); aspect-ratio: 2388 / 1668; padding: calc(var(--sh-tablet-w) * .02); border-radius: calc(var(--sh-tablet-w) * .045); }
.sh-tablet > img, .sh-tablet > .sh-screen { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--sh-tablet-w) * .028); }