/* Shared LDM studio system: tokens, light/dark schemes, header/footer theming, pills, and buttons.
   Pages opt in with a `studio` class on <body>. */
.studio {
  --bg: #f6f3ec;
  --surface: #fffdf8;
  --surface-2: #eeeae1;
  --ink: #12393c;
  --ink-soft: #4d605c;
  --line: #164b501f;
  --line-strong: #164b5040;
  --teal: #164b50;
  --teal-hi: #25636a;
  --copper: #965234;
  --live: #2f8a5b;
  --on-teal: #f6f3ec;
  --on-teal-soft: #c9dad5;
  --tint-tank: #164b50;
  --tint-hearth: #f1e2d2;
  --tint-net: #e2e9ec;
  --tint-tag: #e8e5f0;
  --tint-shelf: #ece4d4;
  --tint-photo: #e6e3dc;
  --shadow: 0 1px 2px #12393c0d, 0 12px 32px #12393c12;
  --radius: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --page: min(1240px, calc(100% - 2 * var(--gutter)));
  background: var(--bg);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .studio {
    --bg: #0d1c1e;
    --surface: #132729;
    --surface-2: #183134;
    --ink: #eaf0ed;
    --ink-soft: #a3b6b1;
    --line: #ffffff17;
    --line-strong: #ffffff30;
    --teal: #7ec4bc;
    --teal-hi: #9fd6cf;
    --copper: #e4a07a;
    --live: #6fd39d;
    --on-teal: #0d1c1e;
    --on-teal-soft: #1f3a3d;
    --tint-tank: #1a4a4e;
    --tint-hearth: #2b221c;
    --tint-net: #17262d;
    --tint-tag: #201f2b;
    --tint-shelf: #26211a;
    --tint-photo: #1b2b2d;
    --shadow: 0 1px 2px #0006, 0 16px 40px #0005;
    color-scheme: dark;
  }
  html:has(.studio) { background: #0d1c1e; scrollbar-color: #4a6763 #0d1c1e; }
}

.studio :is(h1, h2, h3) { max-width: none; font-family: var(--font-sans); font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.studio em { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--copper); }
.studio :is(a, button):focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; }
.studio main { overflow: clip; }
.studio main svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Shared header and footer, re-themed for studio pages. */
.studio .site-header.company-shell,
.studio .site-header.company-shell.is-scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); color: var(--ink); border-bottom-color: var(--line); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.studio .site-header.company-shell.is-scrolled { box-shadow: 0 6px 24px #12393c0f; }
.studio .company-shell .company-nav a { color: var(--ink); border-radius: 999px; }
.studio .company-shell .company-nav a:hover { color: var(--copper); background: var(--surface-2); }
.studio .company-shell .company-nav a[href$="#contact"] { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.studio .company-shell .company-nav a[href$="#contact"]:hover { background: var(--teal-hi); color: var(--on-teal); }
.studio .company-shell .menu-toggle { color: var(--ink); border-color: var(--line-strong); border-radius: 999px; }
.studio .site-footer.company-footer { background: var(--surface-2); color: var(--ink); }
.studio .company-footer :is(.footer-wordmark, nav h2) { color: var(--ink); }
.studio .company-footer :is(nav a, .company-footer__intro p, .company-footer__intro small) { color: var(--ink-soft); }
.studio .company-footer a:hover { color: var(--copper); }
@media (prefers-color-scheme: dark) {
  .studio .company-shell .brand__logo { filter: brightness(2.6) saturate(.55); }
  .studio .site-header.company-shell.is-scrolled { box-shadow: 0 6px 24px #0006; }
}

/* Shared controls */
.pill { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.75rem; padding: .4rem .85rem; border: 1px solid var(--line-strong); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink-soft); font-size: .82rem; font-weight: 600; letter-spacing: .01em; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 20%, transparent); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: .8rem 1.4rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, transform 220ms var(--ease); }
.button:hover { border-color: var(--ink); }
.button--primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.button--primary:hover { background: var(--teal-hi); border-color: var(--teal-hi); }
.button svg { transition: transform 220ms var(--ease); }
.button:is(:hover, :focus-visible) svg { transform: translateY(2px); }

/* Product pages: shared building blocks. Each page sets --hero-tint and adds its own layouts. */
.product-hero, .product-section, .cta-panel { width: var(--page); margin-inline: auto; }
.product-hero { margin-top: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid var(--line); border-radius: 32px; background: var(--hero-tint, var(--surface-2)); box-shadow: var(--shadow); }
.product-hero h1 { font-family: var(--font-sans); font-size: clamp(2.6rem, 5.6vw, 5rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.product-hero h1 > span { display: block; color: var(--ink-soft); }
.product-hero .pill { margin-bottom: 1.25rem; }
.product-name { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; font-size: 1.15rem; font-weight: 600; }
.product-name img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 14px #00000026; }
.product-lede { max-width: 46ch; margin-top: 1.5rem; color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; }
.product-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button--external:is(:hover, :focus-visible) svg { transform: translate(2px, -2px); }
.product-section { padding-block: clamp(4rem, 8vw, 6.5rem) 0; }
.kicker { margin-bottom: .9rem; color: var(--copper); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.section-head h2, .cta-panel h2 { font-family: var(--font-sans); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.section-head h2 { max-width: 20ch; }
.section-head > p:not(.kicker) { max-width: 58ch; margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; }
.inline-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.inline-link:hover { color: var(--copper); text-decoration-color: currentColor; }
.links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 1rem; }
.studio .shot { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 2px 6px #12393c14, 0 20px 44px #12393c24; transition: transform 380ms var(--ease); }
.studio figcaption { margin-top: .9rem; color: var(--ink-soft); font-size: .85rem; font-weight: 600; text-align: center; }
.studio figcaption span { display: block; margin-top: .15rem; font-weight: 400; font-size: .78rem; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; list-style: none; }
.card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.card h3 { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.card--rule h3::before { content: ''; display: block; width: 28px; height: 3px; margin-bottom: 1rem; border-radius: 2px; background: var(--copper); }
.card p { margin-top: .6rem; color: var(--ink-soft); font-size: .97rem; line-height: 1.6; }
.card .inline-link { margin-top: auto; padding-top: .5rem; font-size: .92rem; }

.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.plan { min-width: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.plan-label { color: var(--copper); font-size: .85rem; font-weight: 600; }
.plan h3 { margin-top: .4rem; font-family: var(--font-sans); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.plan > p:not(.plan-label) { margin-top: .6rem; color: var(--ink-soft); line-height: 1.6; }
.plan ul { display: grid; gap: .7rem; margin: 1.25rem 0 0; padding-left: 1.15rem; color: var(--ink-soft); line-height: 1.55; }
.plan li::marker { color: var(--copper); }
.plan--pro { border-color: transparent; background: var(--tint-tank); color: #f2f6f4; }
.plan--pro .plan-label, .plan--pro li::marker { color: #f3c4a6; }
.plan--pro ul, .plan--pro > p:not(.plan-label) { color: #c9dad5; }
.plan-note { max-width: 80ch; margin-top: 1.25rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }

/* Closing panel in deep teal, matching the homepage contact panel. */
.cta-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: 2rem 4rem; margin-block: clamp(4rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); padding: clamp(2rem, 5vw, 4rem); border-radius: 32px; background: var(--tint-tank); color: #f2f6f4; }
.cta-panel h2 { max-width: 18ch; }
.cta-panel p { max-width: 46ch; margin-top: 1rem; color: #c9dad5; font-size: 1.05rem; }
.cta-panel__actions { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.cta-panel .inline-link { align-self: center; color: #f2f6f4; text-decoration-color: #ffffff59; }
.cta-panel .inline-link:hover { color: #f3c4a6; }
.studio .cta-panel :focus-visible { outline-color: #f3c4a6; }
.button--light { background: #f6f3ec; border-color: #f6f3ec; color: #0d1c1e; }
.button--light:hover { background: #fff; border-color: #fff; }
.button--ghost { background: transparent; border-color: #ffffff59; color: #f2f6f4; }
.button--ghost:hover { border-color: #fff; }

/* Product subnavigation under the company header. */
.studio .product-nav { background: var(--surface-2); color: var(--ink); border-bottom: 1px solid var(--line); }
.studio .product-nav a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.studio .product-nav a:hover { color: var(--copper); }

@media (prefers-reduced-motion: no-preference) {
  .product-hero > * { animation: product-rise 700ms var(--ease) backwards; }
  .product-hero > :nth-child(2) { animation-delay: 120ms; }
}
@keyframes product-rise { from { opacity: 0; translate: 0 16px; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .studio .shot[role="button"]:is(:hover, :focus-visible) { transform: translateY(-6px); }
}
@media (max-width: 960px) {
  .cards { grid-template-columns: 1fr; }
  .cta-panel { grid-template-columns: 1fr; }
  .cta-panel__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 600px) {
  .product-hero { padding: 1.75rem 1.25rem 2rem; border-radius: 24px; }
  .product-hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .product-actions .button { flex: 1 1 auto; }
  .plan-grid { grid-template-columns: 1fr; }
  .cta-panel { border-radius: 24px; }
  .cta-panel__actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .studio :is(.shot, .button svg) { animation: none; transition: none; transform: none !important; }
}