/* ClonifyLab website: layout and a few components on the design system's tokens (tokens.css, loaded first).
   Every colour, size and radius is a token; type comes from the type-* classes in the markup. The design system
   (Docs/design/README.md) is the source: never add a colour here. Dark mode follows the device (prefers-color-scheme). */

/* Fonts: self-hosted (SIL Open Font License 1.1, see /fonts/OFL-*.txt), so no visitor request goes to a third party. */
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/source-sans-3-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/fonts/source-sans-3-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/source-serif-4-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/source-serif-4-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Motion (the design system's values) */
:root {
  --duration-fast: 120ms;
  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  background-color: var(--surface-page);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-synthesis: none;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) { html { color-scheme: dark; } }
[data-theme="dark"] { color-scheme: dark; color: var(--ink-primary); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
/* Flex children may shrink below their content (the scrolling nav row), so phones never get a wider page. */
.site-header, main, .site-footer, .site-root { min-width: 0; }
h1, h2, h3, p, ul, ol, figure, pre { margin-top: 0; }
h1, h2 { margin-bottom: var(--space-16); }
h3 { margin-bottom: var(--space-8); }
p, ul, ol { margin-bottom: var(--space-16); }
li + li { margin-top: var(--space-4); }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--ink-primary); text-decoration: underline; text-underline-offset: var(--underline-offset); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
strong { font-weight: 600; }
code { font-family: var(--font-mono); }
pre { background: var(--surface-sunken); border-radius: var(--radius-8); padding: var(--space-12) var(--space-16); overflow-x: auto; white-space: pre; }
.wrap-anywhere { overflow-wrap: anywhere; }
.muted { color: var(--ink-secondary); }
.lead { color: var(--ink-secondary); max-width: var(--measure); }
ul.plain { list-style: none; padding: 0; }
.skip { position: absolute; left: var(--space-16); top: calc(-1 * var(--space-80)); background: var(--surface-raised); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); z-index: 10; }
.skip:focus { top: var(--space-8); }

/* Page width */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--space-16); }
@media (min-width: 1024px) { .wrap { padding: 0 var(--space-32); } }

/* Header */
.site-header { background: var(--surface-raised); border-bottom: var(--border-width) solid var(--line-subtle); }
.header-row { display: flex; align-items: center; gap: var(--space-8) var(--space-24); flex-wrap: wrap; min-height: var(--topbar-phone); padding-top: var(--space-8); padding-bottom: var(--space-8); }
@media (min-width: 1024px) { .header-row { min-height: var(--topbar-desktop); padding-top: 0; padding-bottom: 0; } }
.brand { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--ink-primary); text-decoration: none; }
.mark { width: 32px; height: 32px; flex: none; }
.mark-ink { fill: var(--ink-primary); }
.mark-twin { fill: var(--brand); }
.site-nav { display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none; width: 100%; }
@media (min-width: 1024px) { .site-nav { width: auto; margin-left: auto; } }
.site-nav a { flex: none; display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 var(--space-12); border-radius: var(--radius-8); color: var(--ink-primary); text-decoration: none; transition: background-color var(--duration-fast) ease; }
@media (min-width: 1024px) { .site-nav a { min-height: var(--control-md); } }
.site-nav a:hover { background: var(--state-hover); }
.site-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); }

/* Sections */
.hero { padding: var(--space-48) 0 var(--space-32); }
@media (min-width: 1024px) { .hero { padding: var(--space-80) 0 var(--space-48); } }
.hero h1 { max-width: 30ch; }
.hero-grid { display: grid; gap: var(--space-32); }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 3fr 2fr; align-items: center; } }
.hero-art { display: none; }
@media (min-width: 1024px) { .hero-art { display: flex; justify-content: center; } }
.motif { width: 180px; height: auto; }
.motif-frame { fill: none; stroke: var(--ink-primary); stroke-width: var(--motif-stroke); }
.motif-overlap { fill: var(--brand); }
.section { padding: var(--space-32) 0; border-top: var(--border-width) solid var(--line-subtle); }
@media (min-width: 1024px) { .section { padding: var(--space-48) 0; } }
.below { margin-top: var(--space-16); }
@media (min-width: 1024px) { .below { margin-top: var(--space-24); } }

/* Grids and cards */
.grid { display: grid; gap: var(--space-16); }
@media (min-width: 600px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { gap: var(--space-24); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { background: var(--surface-raised); border: var(--border-width) solid var(--line-subtle); border-radius: var(--radius-12); padding: var(--space-16); }
@media (min-width: 1024px) { .card { padding: var(--space-24); } }
.card > :last-child { margin-bottom: 0; }
.card ul { padding-left: var(--space-20); }
.plan ul { padding-left: var(--space-20); }
.steps { list-style: none; padding: 0; margin: 0; }
.steps > li + li { margin-top: 0; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-full); background: var(--neutral-soft); color: var(--ink-primary); margin-bottom: var(--space-12); }

/* Buttons (the design system's Button: one primary per view, in mulberry) */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-bottom: var(--space-16); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--control-lg); padding: 0 var(--space-20); border-radius: var(--radius-8); border: var(--border-width) solid var(--line-strong); background: var(--surface-raised); color: var(--ink-primary); text-decoration: none; transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.btn:hover { box-shadow: inset 0 0 0 var(--space-80) var(--state-hover); text-decoration: none; }
.btn:active { box-shadow: inset 0 0 0 var(--space-80) var(--state-pressed); }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: none; }
.btn--primary:active { background: var(--brand-pressed); border-color: var(--brand-pressed); box-shadow: none; }
.btn--ghost { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: var(--underline-offset); }

/* Notices (soft tone ground, no border) */
.notice { border-radius: var(--radius-8); padding: var(--space-16); }
.notice > :last-child { margin-bottom: 0; }
.notice--info { background: var(--info-soft); }
.notice--success { background: var(--success-soft); }

/* Tables */
.table-wrap { overflow-x: auto; border: var(--border-width) solid var(--line-subtle); border-radius: var(--radius-12); background: var(--surface-raised); margin-bottom: var(--space-16); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: var(--space-12) var(--space-16); border-bottom: var(--border-width) solid var(--line-subtle); }
th { background: var(--surface-sunken); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq { display: grid; gap: var(--space-12); max-width: 820px; }
.faq summary { cursor: pointer; list-style-position: outside; }
.faq details[open] summary { margin-bottom: var(--space-12); }

/* Example videos: the dark 9:16 video island */
.examples { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 1024px) { .examples { gap: var(--space-24); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.example { margin: 0; }
.video-frame { aspect-ratio: 9 / 16; background: var(--video-frame); border-radius: var(--radius-8); overflow: hidden; box-shadow: inset 0 0 0 var(--border-width) var(--line-strong); }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.example figcaption { margin-top: var(--space-12); }
.example figcaption p { margin-bottom: var(--space-4); }
.ai-line { color: var(--ink-secondary); }

/* Legal documents */
.prose { max-width: var(--measure); padding-top: var(--space-48); padding-bottom: var(--space-48); }
.prose h1 { margin-bottom: var(--space-8); }
.prose h2 { margin-top: var(--space-40); }
.prose h3 { margin-top: var(--space-24); }
.prose ul, .prose ol { padding-left: var(--space-24); }
.prose blockquote { margin: 0 0 var(--space-16); padding: var(--space-12) var(--space-16); background: var(--surface-sunken); border-radius: var(--radius-8); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose .table-wrap { max-width: none; }
.form-text p { margin-bottom: var(--space-12); }

/* Footer */
.site-footer { background: var(--surface-raised); border-top: var(--border-width) solid var(--line-subtle); padding: var(--space-32) 0; color: var(--ink-secondary); }
.site-footer a { color: var(--ink-secondary); }
.footer-grid { display: grid; gap: var(--space-24); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: var(--space-8); color: var(--ink-primary); }
.footer-brand .mark { width: 16px; height: 16px; }
.site-footer li + li { margin-top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; }
}