/* Shared presentation. Load after the page's original stylesheet.
   The homepage field owns inline --paper/--ink/--muted/--line/--accent/--pill
   values during its transition; these aliases keep the whole page in sync. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --paper: #f6f3ea;
  --ink: #25293e;
  --muted: #626376;
  --line: #dddbd3;
  --accent: #6263e9;
  --pill: #eeece3;
  --green: #27634e;
  --error: #a52e44;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #202137;
  --ink: #f4f1e9;
  --muted: #b6b3ca;
  --line: #424257;
  --accent: #9692ed;
  --pill: #34344e;
  --green: #a0d0b8;
  --error: #ffadba;
}

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --bg: var(--paper);
  --bg-card: var(--paper);
  --bg-card-hover: var(--pill);
  --bg-elevated: var(--pill);
  --text: var(--ink);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --border: var(--line);
  --border-light: var(--line);
  --nav-bg: var(--paper);
  --nav-bg-mobile: var(--paper);
  --cta-bg: var(--pill);
  /* Keep small accent text darker than the decorative indigo in daylight. */
  --accent-text: color-mix(in srgb, var(--accent) 78%, var(--ink));
  --accent-hover: var(--ink);
  --accent-solid: var(--ink);
  --accent-solid-hover: color-mix(in srgb, var(--ink) 92%, var(--paper));
  --accent-subtle: var(--pill);
  --accent-glow: transparent;
  --green-subtle: var(--pill);
  --hero-gradient-from: var(--ink);
  --hero-gradient-to: var(--ink);
  --control-border: var(--muted);
  --radius: 5px;
  --radius-lg: 8px;
  --max-w: 1180px;
  --text-label: 0.75rem;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

::selection { background: var(--ink); color: var(--paper); }

.container,
.nav-inner { padding-inline: clamp(1.25rem, 4vw, 3rem); }

.nav { border-bottom: 1px solid var(--line); }
.nav-inner { height: 60px; }
.nav-links { gap: clamp(1rem, 2.5vw, 2rem); }
.nav-links a { color: var(--muted); font-size: 0.875rem; }
.nav-links a:hover,
.nav-links a.active { color: var(--ink); }
.nav-brand img { width: auto; }
.theme-toggle { border-radius: 50%; color: var(--ink); }
/* Do not set display here: the original mobile media query reveals this. */
.nav-toggle { align-items: center; justify-content: center; }
.theme-toggle,
.nav-toggle { min-width: 44px; min-height: 44px; }
.nav-toggle span { background: var(--ink); }

/* Product identity shares the homepage brand, with a quiet product label. */
.asset-studio-page .nav-inner { gap: 1.25rem; }
.asset-studio-page .nav-brand { flex-shrink: 0; min-height: 44px; }
.asset-studio-page .nav-brand img {
  width: 29px;
  height: 30px;
  flex-shrink: 0;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.asset-studio-page .nav-brand-name {
  padding: 0;
  border: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--ink);
}
.asset-studio-page .nav-product-name {
  padding-left: .75rem;
  margin-left: .15rem;
  font-size: .8125rem;
  line-height: 1.4;
  white-space: nowrap;
}
.asset-studio-page .nav-product-name sup { font-size: .55em; margin-left: .1em; }
.asset-studio-page .nav-actions { flex-shrink: 0; }
.asset-studio-page .nav-actions > .btn-outline { border-color: transparent; padding-inline: .5rem; }
.asset-studio-page .nav-brand:focus-visible img { transform: rotate(180deg); }
@media (hover: hover) {
  .asset-studio-page .nav-brand:hover img { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .asset-studio-page .nav-brand img { transition: none; }
  .asset-studio-page .nav-brand:hover img,
  .asset-studio-page .nav-brand:focus-visible img { transform: none; }
}
@media (max-width: 1000px) {
  .asset-studio-page .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: .75rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  .asset-studio-page .nav-links.open { display: flex; }
  .asset-studio-page .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .65rem 0;
    font-size: 1rem;
  }
  .asset-studio-page .nav-links .nav-mobile-link:last-child { color: var(--ink); font-weight: 700; }
  .asset-studio-page .nav-toggle { display: flex; }
  .asset-studio-page .nav-actions > a.btn { display: none; }
}
@media (max-width: 480px) {
  .asset-studio-page .nav-brand { display: grid; grid-template-columns: 29px auto; column-gap: .6rem; row-gap: 0; align-content: center; }
  .asset-studio-page .nav-brand img { grid-row: 1 / 3; }
  .asset-studio-page .nav-product-name { grid-column: 2; margin: 0; padding: 0; border: 0; font-size: .6875rem; }
}

.btn { border-radius: 5px; font-weight: 600; }
.btn-primary,
.cta-section .btn-primary,
.newsletter-form button,
.skip-link,
.pricing-badge { background: var(--ink); color: var(--paper); }
.btn-primary:hover,
.cta-section .btn-primary:hover,
.newsletter-form button:hover { background: var(--accent-solid-hover); }
.btn-outline { border: 1px solid var(--control-border); }
.btn-outline:hover { border-color: var(--ink); background: var(--pill); }

.section-title,
.product-feature-main h3,
.service-detail-head h2 { font-weight: 500; letter-spacing: -0.035em; }
.section-label { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.13em; }
.section-subtitle { font-size: 1.0625rem; line-height: 1.7; }

.product-feature {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 2.5rem 0;
}
.services-grid { gap: 2.5rem; }
.service-teaser {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1.75rem 0;
}
.service-teaser:hover,
.product-card:hover { background: transparent; border-color: var(--muted); }
.service-teaser h3,
.product-card h3,
.bento-card h3,
.use-case-card h3 { font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; }
.product-card p,
.service-teaser p,
.product-feature-spec p,
.bento-card p,
.use-case-card p,
.flow-step p,
.faq-item p,
.service-list li { font-size: 1rem; line-height: 1.75; }
.product-feature-spec h4,
.footer-col h4 { font-size: 0.75rem; }
.product-tag,
.feature-tag,
.product-badge { font-size: 0.75rem; }
.product-tag,
.feature-tag { border-radius: 4px; }
.product-badge { border: 1px solid var(--line); }
.flow-num { background: var(--paper); color: var(--ink); font-weight: 500; }
.faq-item summary { font-size: 1rem; }

/* Secondary pages carry the same quiet type and rules without the field. */
.services-page .page-hero,
.asset-studio-page .hero { padding: 9rem 0 4rem; text-align: left; }
.services-page .page-hero .section-label { text-align: left; }
.page-hero-title,
.asset-studio-page .hero-title {
  max-width: 19ch;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.045em;
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}
.services-page .page-hero-subtitle,
.asset-studio-page .hero-subtitle {
  max-width: 58ch;
  margin-inline: 0;
  font-size: 1.125rem;
  line-height: 1.75;
}
.services-page .page-hero-actions,
.asset-studio-page .hero .hero-actions { justify-content: flex-start; }
.asset-studio-page .hero-logo { margin-left: 0; }
.asset-studio-page .hero::before,
.asset-studio-page .cta-section::before { content: none; }
.asset-studio-page .hero-note { max-width: 74ch; font-size: 0.875rem; }
.hero-legal { font-size: 0.875rem; }
.asset-studio-page .section-title { font-weight: 500; }
.bento-icon { border-radius: 5px; }
.bento-icon.amber,
.bento-icon.rose { background: var(--pill); color: var(--accent-text); }
.style-chip,
.marquee-tag { border-color: var(--line); }
.style-scroll-outer { margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3rem)); }
.pricing-featured { box-shadow: none; }
.pricing-card { padding: 2rem 1.25rem; }
.pricing-name { font-size: 1.125rem; font-weight: 500; }
.pricing-price { font-weight: 500; letter-spacing: -0.04em; }
.pricing-desc,
.pricing-list li { font-size: 0.9375rem; }
.pricing-billing-detail,
.pricing-capacity-label,
.pricing-toggle-note { font-size: 0.8125rem; }
.pricing-badge { font-size: 0.6875rem; white-space: nowrap; }
.pricing-toggle { border-color: var(--control-border); }
.pricing-toggle-option.is-active { background: var(--ink); color: var(--paper); box-shadow: none; }
.pricing-toggle-option.is-active .pricing-toggle-saving { background: var(--paper); color: var(--ink); }
.cta-section { color: var(--ink); }
.cta-section .section-title { color: var(--ink); }
.cta-section .section-subtitle { color: var(--muted); }

/* Form boundaries and focus remain stronger than decorative section rules. */
.contact-field input,
.contact-field textarea,
.newsletter-form input[type="email"] {
  border-color: var(--control-border);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder,
.newsletter-form input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.contact-field label,
.contact-note,
.contact-caveat,
.footer-brand p,
.footer-col a { font-size: 0.875rem; }
.footer-bottom p { font-size: 0.8125rem; }
.contact-msg.error,
.newsletter-msg.error { color: var(--error); }
.newsletter-form input[type="email"] { min-width: 0; }
.footer-links { flex-wrap: wrap; }
:focus-visible,
.contact-field input:focus-visible,
.contact-field textarea:focus-visible,
.newsletter-form input[type="email"]:focus-visible,
.pricing-toggle-option:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.faq-item summary:focus-visible { outline-offset: -3px; }

/* Legal pages retain their document layout and every word of their copy. */
.legal-page .wrap { max-width: 800px; padding-top: clamp(2.5rem, 7vw, 5rem); }
.legal-page h1,
.legal-page h2,
.legal-page h3 { font-family: var(--font-display); color: var(--ink); font-weight: 500; }
.legal-page h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.04em; }
.legal-page h2 { font-size: 1.375rem; letter-spacing: -0.02em; }
.legal-page h3 { font-size: 1.125rem; }
.legal-page p,
.legal-page li { font-size: 1rem; }
.legal-page a { color: var(--accent-text); text-underline-offset: 3px; }
.legal-page a:hover { color: var(--ink); }
.legal-page .back,
.legal-page .effective,
.legal-page .legal-owner { color: var(--muted); font-size: 0.875rem; }
.legal-page .back { min-height: 44px; }
.legal-page table { font-size: 0.9375rem; }
.legal-page th,
.legal-page td { border-color: var(--line); }
.legal-page th { background: var(--pill); color: var(--ink); }
.legal-page hr { border-color: var(--line); }
.legal-page .legal-nav a { font-size: 0.9375rem; }
.legal-page .legal-nav a[aria-current="page"] { color: var(--ink); }
.legal-page a:focus-visible,
.legal-page .table-scroll:focus-visible { outline-color: var(--ink); }

@media (min-width: 901px) {
  .product-feature-side { border-left: 1px solid var(--line); padding-left: 2.5rem; }
}

@media (max-width: 640px) {
  .nav-links { gap: 0; background: var(--paper); }
  .nav-links a { font-size: 1rem; }
  .services-page .page-hero,
  .asset-studio-page .hero { padding: 7rem 0 3rem; }
  .asset-studio-page .hero .hero-actions { align-items: flex-start; }
  .services-page .page-hero-actions .btn { white-space: normal; }
  .product-feature { padding-block: 1.75rem; }
  .bento-card { padding: 1.5rem; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .pricing-toggle-option { min-height: 44px; }
}