:root {
  color-scheme: light;
  --paper: #f7f6f1;
  --paper-2: #eeece4;
  --white: #fffefa;
  --ink: #18211b;
  --ink-2: #29352d;
  --muted: #667065;
  --line: #deded4;
  --line-strong: #c8ccc0;
  --accent: #f06445;
  --accent-dark: #d95033;
  --accent-pale: #f8dfd5;
  --moss: #506a43;
  --lime: #d7ef91;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max: 1240px;
  --ease: cubic-bezier(.2,.75,.25,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--ink); background: #f5b6a4; }
[hidden] { display: none !important; }
.shell { width: min(100% - 64px, var(--max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; left: 12px; top: -60px; padding: 12px 16px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 750; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Navigation */
.site-header { height: 76px; position: sticky; top: 0; z-index: 100; background: rgba(247,246,241,.94); border-bottom: 1px solid rgba(24,33,27,.1); backdrop-filter: blur(16px); }
.nav-wrap { width: min(100% - 64px, var(--max)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img { width: 34px; height: 34px; }
.brand-name { font-weight: 820; font-size: 18px; letter-spacing: -1px; }
.brand-name span { font-weight: 440; color: #757c70; }
.primary-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 38px); margin-left: auto; margin-right: 14px; color: #5f695d; font-size: 12px; font-weight: 650; }
.primary-nav a { position: relative; padding: 8px 0; transition: color .2s ease; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--accent); transition: right .24s var(--ease); }
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after { right: 0; }
.nav-cta { min-height: 41px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 750; border-radius: 4px; transition: background .2s ease, transform .2s var(--ease); flex: 0 0 auto; }
.nav-cta:hover { background: #334338; transform: translateY(-1px); }
.nav-cta span { color: #f49a7f; font-size: 15px; }
.menu-toggle { display: none; }

/* Hero */
.hero { min-height: 655px; padding-top: 54px; padding-bottom: 70px; display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(34px, 5.8vw, 86px); align-items: center; }
.hero-copy { position: relative; z-index: 1; padding: 20px 0 5px; }
.overline, .section-label { display: flex; align-items: center; gap: 10px; color: #626c5e; font-size: 9px; font-weight: 820; letter-spacing: 1.45px; }
.overline-mark { width: 16px; height: 16px; display: inline-flex; align-items: end; gap: 2px; padding: 3px; border: 1px solid #c4c8bb; }
.overline-mark i { display: block; width: 2px; background: var(--accent); }
.overline-mark i:nth-child(1) { height: 4px; }.overline-mark i:nth-child(2) { height: 8px; }.overline-mark i:nth-child(3) { height: 6px; }
.hero h1 { max-width: 610px; margin: 27px 0 22px; font-size: clamp(52px, 5.65vw, 78px); font-weight: 700; letter-spacing: -.075em; line-height: .99; }
.hero h1 span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.065em; }
.hero-intro { max-width: 435px; margin: 0; color: #5f695d; font-size: 15px; line-height: 1.82; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.button { min-height: 48px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border-radius: 4px; font-size: 11px; font-weight: 750; transition: transform .22s var(--ease), background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 17px; font-weight: 450; }
.button-primary { background: var(--ink); color: #fffefa; }
.button-primary span { color: #ffad94; }
.button-primary:hover { background: #334338; }
.text-button { display: inline-flex; align-items: center; gap: 11px; color: #596558; font-size: 11px; font-weight: 720; padding: 10px 0; border-bottom: 1px solid #b6bcb0; transition: color .2s ease, border-color .2s ease; }
.text-button span { color: var(--accent); font-size: 15px; }
.text-button:hover { color: var(--ink); border-color: var(--accent); }
.hero-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; color: #747b70; font-size: 10px; }
.hero-meta > span { display: flex; align-items: center; gap: 7px; }
.meta-check { width: 15px; height: 15px; display: inline-grid; place-items: center; background: #e4e9dc; color: var(--moss); font-size: 9px; border-radius: 50%; }
.hero-edition { margin-top: 50px; display: flex; align-items: center; gap: 10px; color: #8b9086; font-size: 8px; font-weight: 800; letter-spacing: 1.15px; }
.edition-line { width: 29px; height: 1px; background: var(--accent); }
.hero-visual { --demo-ink: #20291f; min-width: 0; position: relative; padding: 20px 20px 16px; background: #efeee7; border: 1px solid #dfded4; overflow: hidden; }
.hero-visual::before { content: ""; position: absolute; top: 0; right: 0; width: 105px; height: 1px; background: var(--accent); }
.visual-topbar, .visual-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #747c70; font-size: 8px; font-weight: 800; letter-spacing: 1.15px; }
.visual-label { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(240,100,69,.12); }
.visual-index { color: #92978d; font-variant-numeric: tabular-nums; }.visual-index i { color: #c6c7be; font-style: normal; margin-inline: 3px; }
.preview-app { margin: 16px 0 15px; background: #faf9f5; border: 1px solid #d6d8cf; box-shadow: 0 13px 30px rgba(30,40,30,.08); }
.preview-app-head { height: 37px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border-bottom: 1px solid #e5e5dc; color: #747d70; font-size: 8px; }
.window-controls { display: flex; gap: 4px; }.window-controls i { width: 6px; height: 6px; border-radius: 50%; background: #d1d1c9; }.window-controls i:first-child { background: #e8a28b; }.window-controls i:nth-child(2) { background: #dfd09a; }.window-controls i:nth-child(3) { background: #9cb992; }
.preview-app-title { font-weight: 700; color: #455044; }.preview-app-title b { color: #b9bdb2; padding-inline: 4px; }
.preview-state { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #7b8277; font-size: 7px; }.preview-state i { width: 5px; height: 5px; background: #689866; border-radius: 50%; }
.preview-workspace { padding: 11px; background: #e8e8df; transition: background .28s ease; }
.preview-toolbar { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: #fffefa; border: 1px solid #e1e1d8; border-bottom: 0; font-size: 8px; color: #4b5549; }
.toolbar-brand, .toolbar-actions { display: flex; align-items: center; gap: 7px; }.toolbar-brand { font-weight: 750; }.toolbar-brand-mark { width: 15px; height: 15px; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 9px; font-weight: 900; border-radius: 3px; }.toolbar-save { display: flex; align-items: center; gap: 5px; color: #747d70; font-size: 7px; }.toolbar-save i { width: 5px; height: 5px; border-radius: 50%; background: #709567; }.toolbar-more { font-size: 16px; line-height: 1; padding-left: 5px; }
.sample-page { --page-bg: #f8f6ee; --page-ink: #1d2920; --page-muted: #6f796c; --page-rule: #dfe0d5; --page-accent: #597b49; position: relative; min-height: 265px; padding: 0 15px 0; overflow: hidden; background: var(--page-bg); color: var(--page-ink); border: 1px solid #e1e1d8; transition: background .25s ease, color .25s ease; }
.sample-page.sample-noir { --page-bg: #1b1c25; --page-ink: #f5f1e9; --page-muted: #b8b3bc; --page-rule: #42404a; --page-accent: #f0a36c; }
.sample-page.sample-notebook { --page-bg: #f9f4e8; --page-ink: #2f382c; --page-muted: #7d7b6a; --page-rule: #dcd4c2; --page-accent: #b45b43; }
.sample-page.sample-harbor { --page-bg: #eef3f4; --page-ink: #132f45; --page-muted: #587080; --page-rule: #d2dfe1; --page-accent: #b88352; }
.sample-page.sample-paper { --page-bg: #f4eee2; --page-ink: #38352e; --page-muted: #777166; --page-rule: #ded4c4; --page-accent: #6e886b; }
.sample-page.sample-bio { --page-bg: #f2eafa; --page-ink: #35264c; --page-muted: #716281; --page-rule: #ded1ee; --page-accent: #8c60d5; }
.sample-nav { height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--page-rule); font-size: 7px; letter-spacing: .45px; }
.sample-wordmark { font-weight: 900; font-size: 10px; letter-spacing: -.4px; }.sample-wordmark span { color: var(--page-accent); }.sample-navlinks { color: var(--page-muted); font-size: 6px; letter-spacing: .7px; }.sample-menu { display: none; width: 14px; flex-direction: column; gap: 4px; }.sample-menu i { height: 1px; background: var(--page-ink); }
.sample-hero-content { min-height: 187px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 10px; align-items: center; padding: 15px 0 11px; }
.sample-copy { position: relative; z-index: 2; }.sample-kicker { display: block; color: var(--page-muted); font-size: 5.5px; font-weight: 850; letter-spacing: 1px; margin-bottom: 10px; }.sample-copy h2 { margin: 0; font-size: clamp(19px, 2.5vw, 31px); line-height: .99; letter-spacing: -1.25px; font-weight: 750; }.sample-copy h2 em { color: var(--page-accent); font-family: var(--serif); font-weight: 400; }.sample-copy p { max-width: 210px; margin: 10px 0 13px; color: var(--page-muted); font-size: 7px; line-height: 1.65; }.sample-link { display: inline-flex; align-items: center; gap: 12px; font-size: 7px; font-weight: 750; padding-bottom: 4px; border-bottom: 1px solid var(--page-accent); }.sample-link b { color: var(--page-accent); font-size: 11px; font-weight: 450; }
.sample-image-wrap { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }.sample-image-wrap img { width: 100%; height: 145px; object-fit: cover; object-position: center; mix-blend-mode: multiply; transition: transform .45s var(--ease), opacity .25s ease; }.sample-noir .sample-image-wrap img { mix-blend-mode: normal; }.sample-bio .sample-image-wrap img { mix-blend-mode: multiply; }
.sample-bottom { height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--page-rule); color: var(--page-muted); font-size: 5.5px; font-weight: 750; letter-spacing: .65px; }
.preview-statusbar { height: 25px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; color: #747d70; font-size: 7px; }.preview-statusbar > span:first-child { display: flex; align-items: center; gap: 6px; }.preview-statusbar i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }
.preview-app-foot { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 11px; border-top: 1px solid #e5e5dc; }.demo-hint { display: flex; align-items: center; gap: 7px; color: #747d70; font-size: 8px; }.hint-icon { display: inline-grid; place-items: center; width: 17px; height: 17px; color: var(--accent-dark); background: var(--accent-pale); border-radius: 50%; font-size: 11px; }
.hero-demo-controls { display: flex; align-items: center; gap: 4px; }.style-chip { border: 1px solid transparent; background: transparent; padding: 7px 9px; border-radius: 3px; color: #7b8277; cursor: pointer; font-size: 8px; font-weight: 750; transition: background .2s ease, color .2s ease, border-color .2s ease; }.style-chip:hover { color: var(--ink); }.style-chip.is-active { background: #e9ece3; border-color: #d9ddd1; color: var(--ink); }
.visual-caption { font-size: 7px; letter-spacing: 1px; }.visual-caption b { color: var(--accent); font-size: 13px; margin-left: 4px; font-weight: 500; }.visual-number { position: absolute; right: 20px; bottom: 4px; transform: translateY(100%); color: #a1a59a; font-size: 8px; letter-spacing: 1.1px; }

/* Capability rail */
.capability-rail { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f3f2ec; }
.capability-inner { width: min(100% - 64px, var(--max)); min-height: 86px; margin: auto; display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: center; gap: 24px; }
.rail-intro { color: #8b9186; font-size: 8px; font-weight: 850; letter-spacing: 1.35px; }.rail-item { min-height: 34px; display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--line); padding-left: 22px; font-size: 11px; font-weight: 750; }.rail-num { font-size: 9px; color: var(--accent); font-weight: 850; }.rail-glyph { margin-left: auto; color: #8a9285; font-size: 16px; font-weight: 400; }

/* Content sections */
.section { padding-top: 112px; padding-bottom: 116px; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 48px; }
.section-label { gap: 9px; }.section-label > span { color: var(--accent); font-variant-numeric: tabular-nums; }.section-label > i { display: inline-block; width: 25px; height: 1px; background: #aeb6a7; }
.section-intro h2, .lab-heading h2, .workflow-heading h2, .export-copy h2, .scope-heading h2, .faq-heading h2, .closing-copy h2 { margin: 22px 0 0; font-size: clamp(39px, 4.2vw, 56px); line-height: 1.02; font-weight: 650; letter-spacing: -.068em; }
.section-intro h2 em, .lab-heading h2 em, .workflow-heading h2 em, .export-copy h2 em, .scope-heading h2 em, .faq-heading h2 em, .closing-copy h2 em { font-family: var(--serif); color: var(--accent); font-weight: 400; letter-spacing: -.06em; }
.section-intro-aside { width: min(360px, 39%); padding-bottom: 3px; }.section-intro-aside p { margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.8; }.inline-link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid #bdc1b6; font-size: 10px; font-weight: 800; }.inline-link span { font-size: 14px; color: var(--accent); }

/* Feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 17px; }
.feature-card { min-width: 0; border: 1px solid #dedfd5; background: #fdfcf8; display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s ease, transform .25s var(--ease); }.feature-card:hover { border-color: #c6cbbd; transform: translateY(-2px); }
.feature-card-main { grid-column: span 7; }.feature-card-responsive { grid-column: span 5; }.feature-card-library { grid-column: span 5; }.feature-card-pages { grid-column: span 7; }
.feature-card-top { min-height: 42px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #efefe8; color: #828a7e; }.feature-index { font-size: 8px; font-weight: 850; letter-spacing: 1.1px; }.card-arrow { width: 22px; height: 22px; border: 1px solid #e0e2d8; display: grid; place-items: center; color: var(--accent); font-size: 13px; font-weight: 400; transition: background .2s ease, color .2s ease; }.feature-card:hover .card-arrow { background: var(--accent); color: white; border-color: var(--accent); }
.feature-card-copy { padding: 22px 24px 23px; }.feature-card-copy h3 { max-width: 390px; margin: 0 0 11px; font-size: 19px; line-height: 1.2; letter-spacing: -.8px; font-weight: 720; }.feature-card-copy p { max-width: 540px; margin: 0; color: #677064; font-size: 11px; line-height: 1.8; }.feature-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }.feature-tags span { border: 1px solid #e1e2d8; padding: 6px 8px; color: #70796d; font-size: 8px; }
/* CSS-built interface illustrations */
.mini-editor { margin: 15px 15px 0; min-height: 240px; display: grid; grid-template-columns: 34% 66%; border: 1px solid #dbddd2; background: #eeeee7; }.mini-editor-sidebar { padding: 14px 10px; background: #f9f9f4; border-right: 1px solid #dfe1d6; }.mini-sidebar-title { display: flex; align-items: center; gap: 4px; margin-bottom: 17px; }.mini-sidebar-title span:first-child { width: 15px; height: 15px; background: var(--accent); border-radius: 3px; }.mini-sidebar-title span:nth-child(2) { width: 44px; height: 4px; background: #aeb5a7; }.mini-sidebar-title span:nth-child(3) { width: 13px; height: 4px; background: #d9ddd2; margin-left: auto; }.mini-tool { display: flex; align-items: center; gap: 7px; padding: 9px 7px; margin-bottom: 5px; color: #768071; font-size: 8px; border: 1px solid transparent; }.mini-tool.active { color: var(--ink); border-color: #dfe2d6; background: #f0f2e9; }.mini-tool > b { margin-left: auto; color: #8c9387; font-size: 10px; font-weight: 450; }.mini-tool > i { width: 14px; height: 14px; display: grid; place-items: center; color: var(--moss); font-size: 10px; font-style: normal; font-weight: 800; }.tool-image { border: 1px solid #9eb19a; background: #dce5d7; }.tool-button { height: 9px !important; border-radius: 2px; background: #e5b5a6; }.tool-layout { border: 1px solid #b9bfc1; background: linear-gradient(90deg,#bec8c3 45%,transparent 45%,transparent 55%,#bec8c3 55%); }.mini-separator { height: 1px; background: #e4e6dd; margin: 14px 0; }.mini-properties > span { display: block; font-size: 7px; font-weight: 850; letter-spacing: .7px; color: #92998c; margin-bottom: 12px; }.mini-properties i { display: block; width: 90%; height: 4px; border-radius: 2px; background: #e1e3d9; margin: 8px 0; }.mini-properties i:nth-of-type(2) { width: 63%; }.mini-properties i:nth-of-type(3) { width: 75%; }
.mini-editor-canvas { padding: 11px; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; background-color: #eaebe2; background-image: linear-gradient(rgba(24,33,27,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(24,33,27,.035) 1px,transparent 1px); background-size: 15px 15px; }.mini-canvas-tag { position: absolute; left: 12px; top: 10px; color: #818a7e; font-size: 6px; font-weight: 850; letter-spacing: .7px; }.mini-canvas-page { width: 83%; height: 183px; background: #f9f7ef; border: 1px solid #d7d9cd; padding: 10px 12px; position: relative; overflow: hidden; }.mini-canvas-nav { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #e4e4d8; }.mini-canvas-nav b { font-size: 8px; letter-spacing: .6px; }.mini-canvas-nav b span { color: var(--accent); }.mini-canvas-nav i { width: 13px; height: 6px; border-top: 1px solid #7a8677; border-bottom: 1px solid #7a8677; }.mini-canvas-title { position: relative; z-index: 2; margin-top: 16px; color: #212b20; font-size: clamp(18px, 2.5vw, 25px); line-height: .95; letter-spacing: -1.4px; font-weight: 750; }.mini-canvas-title em { font-family: var(--serif); color: #678358; font-weight: 400; }.mini-canvas-line { width: 56%; height: 3px; margin-top: 10px; background: #d8dccf; }.mini-canvas-line.short { margin-top: 5px; width: 39%; }.mini-canvas-btn { height: 12px; width: 55px; background: var(--ink); margin-top: 10px; }.mini-canvas-photo { position: absolute; right: 0; bottom: 0; width: 43%; height: 73%; overflow: hidden; }.mini-canvas-photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }.selection-outline { position: absolute; inset: 43px 8px 8px 8px; border: 1px solid #e77f60; pointer-events: none; }.selection-outline i { position: absolute; width: 5px; height: 5px; background: var(--white); border: 1px solid var(--accent); }.selection-outline i:nth-child(1) { left: -3px; top: -3px; }.selection-outline i:nth-child(2) { right: -3px; top: -3px; }.selection-outline i:nth-child(3) { left: -3px; bottom: -3px; }.selection-outline i:nth-child(4) { right: -3px; bottom: -3px; }
.responsive-illustration { min-height: 255px; padding: 17px 16px 0; background: #e9e9e1; overflow: hidden; }.responsive-stage { position: relative; height: 238px; display: flex; align-items: end; justify-content: center; gap: 9px; border-bottom: 1px solid #d6d9ce; }.responsive-screen { position: relative; background: #fcfaf2; border: 1px solid #d0d3c8; overflow: hidden; box-shadow: 0 8px 19px rgba(31,41,30,.07); }.screen-mobile { width: 87px; height: 174px; z-index: 2; padding: 8px; border-radius: 9px 9px 0 0; }.screen-tablet { width: min(260px, calc(100% - 112px)); height: 205px; padding: 9px 11px; border-radius: 7px 7px 0 0; }.r-nav { height: 13px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #e0e0d6; padding-bottom: 6px; }.r-nav b { font-size: 5px; letter-spacing: .3px; }.r-nav i { width: 5px; height: 2px; background: #98a48e; }.screen-mobile .r-nav { justify-content: space-between; }.screen-mobile .r-nav i { width: 10px; height: 5px; border-top: 1px solid #87917f; border-bottom: 1px solid #87917f; background: transparent; }.r-title { margin-top: 13px; font-size: 12px; font-weight: 800; letter-spacing: -.5px; line-height: .98; }.screen-tablet .r-title { font-size: 24px; letter-spacing: -1px; margin-top: 18px; }.r-lines { display: grid; gap: 4px; margin-top: 8px; }.r-lines i { width: 83%; height: 2px; background: #d9ddd2; }.r-lines i:nth-child(2) { width: 62%; }.r-image { height: 51px; margin-top: 8px; overflow: hidden; }.r-image img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }.screen-tablet .r-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12px; align-items: center; }.screen-tablet .r-image { height: 126px; margin-top: 12px; }.r-cta { width: 43px; height: 9px; background: var(--ink); margin-top: 8px; }.viewport-pill { position: absolute; bottom: 14px; right: 4px; padding: 6px 8px; background: var(--ink); color: white; font-size: 7px; font-weight: 750; letter-spacing: .5px; }.viewport-pill i { color: var(--accent); font-style: normal; }
.library-illustration { min-height: 255px; padding: 20px 21px; background: #e9e6de; }.library-label { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid #d7d5cc; color: #727b6d; font-size: 7px; font-weight: 850; letter-spacing: .8px; }.library-label span { color: var(--accent); font-size: 13px; }.library-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 13px; }.library-option { display: grid; grid-template-columns: 39px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 9px; min-height: 79px; padding: 10px; background: #fbfaf5; border: 1px solid #deded4; }.lib-symbol { width: 39px; height: 39px; grid-row: span 2; display: grid; place-items: center; position: relative; background: #edebe3; color: var(--ink); }.lib-heading { font-size: 24px; font-weight: 700; letter-spacing: -2px; }.lib-heading span { font-family: var(--serif); font-style: italic; color: var(--accent); }.lib-image { background: #e2e9db; }.lib-image::before { content: ""; position: absolute; width: 20px; height: 15px; border: 1px solid #83987b; }.lib-image i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f0a583; top: 8px; right: 8px; }.lib-button { background: #f5ded5; }.lib-button i { display: block; width: 24px; height: 10px; background: var(--accent); border-radius: 2px; }.lib-section { display: flex; align-items: center; justify-content: center; gap: 3px; background: #e3e5dc; }.lib-section i { width: 7px; height: 21px; background: #91a287; }.lib-section i:nth-child(2) { height: 29px; background: #d7a28d; }.library-option b { font-size: 8px; font-weight: 800; }.library-option small { color: #82897d; font-size: 7px; }
.pages-illustration { position: relative; display: flex; flex-direction: column; gap: 7px; min-height: 255px; padding: 34px clamp(20px, 4vw, 55px); background: #e9e9e0; overflow: hidden; }.pages-illustration::before { content: ""; position: absolute; top: 0; bottom: 0; left: 17%; width: 1px; background: #d5d8ce; }.page-tab { position: relative; z-index: 1; min-height: 45px; display: flex; align-items: center; gap: 13px; padding: 0 13px; background: #f9f8f2; border: 1px solid #d9dcd1; color: #727c70; font-size: 10px; }.page-tab.active { border-color: #aebda4; background: #f0f4e9; color: var(--ink); box-shadow: 0 3px 8px rgba(24,33,27,.03); }.page-tab-icon { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #dfe1d7; color: #7f8c78; font-size: 12px; }.page-tab.active .page-tab-icon { color: var(--moss); background: #e1e9d8; border-color: #d5dfcb; }.page-tab > i { width: 65px; height: 3px; background: #dfe1d8; margin-left: auto; }.page-tab > b { margin-left: auto; color: #9aa094; font-size: 11px; font-weight: 450; }.page-tab-add { min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px dashed #bdc5b7; color: #778371; font-size: 9px; }.page-tab-add span:first-child { font-size: 16px; color: var(--accent); }.pages-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid #d8dbd0; color: #828b7e; font-size: 7px; font-weight: 850; letter-spacing: .85px; }

/* Interactive preview lab */
.preview-lab-section { background: var(--ink); color: #f7f6f1; padding: 104px 0 112px; overflow: hidden; }
.preview-lab-wrap { width: min(100% - 64px, var(--max)); }
.lab-heading { display: flex; justify-content: space-between; align-items: end; gap: 45px; margin-bottom: 42px; }.section-label-light { color: #bdc4b8; }.section-label-light > span { color: #f28e70; }.section-label-light > i { background: #536052; }.lab-heading h2 { color: #fbfaf5; }.lab-heading h2 em { color: #f49a7e; }.lab-heading > p { max-width: 365px; margin: 0 0 3px; color: #b2bcb0; font-size: 11px; line-height: 1.85; }
.lab-console { display: grid; grid-template-columns: 268px minmax(0,1fr); border: 1px solid #3a4439; background: #202a21; min-width: 0; }.lab-controls { display: flex; flex-direction: column; border-right: 1px solid #3a4439; padding: 24px 18px 17px; }.lab-control-group + .lab-control-group { margin-top: 27px; }.lab-control-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }.lab-control-heading span { color: #f28e70; font-size: 8px; font-weight: 850; }.lab-control-heading b { color: #d9dfd5; font-size: 10px; font-weight: 750; }.lab-template-list { display: flex; flex-direction: column; gap: 4px; }.lab-template-button { min-height: 48px; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 7px 8px; border: 1px solid transparent; background: transparent; color: #aeb8ab; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }.lab-template-button:hover { background: #29352a; color: #f7f6f1; }.lab-template-button.is-active { background: #2b382b; border-color: #4c5a49; color: white; }.template-mini-dot { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); }.dot-lumen { background: #ddd9fb; }.dot-noir { background: #242631; box-shadow: inset 0 0 0 5px #3b3e4f; }.dot-harbor { background: #dce8ed; }.dot-notebook { background: #ece0c1; }.dot-paper { background: #efe5d5; }.dot-bio { background: #dfc8fb; }.lab-template-button > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }.lab-template-button b { font-size: 9px; }.lab-template-button small { color: #96a092; font-size: 8px; }.lab-template-button > i { margin-left: auto; color: #f28e70; font-size: 12px; font-style: normal; opacity: 0; transition: opacity .2s ease; }.lab-template-button.is-active > i { opacity: 1; }
.viewport-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }.viewport-switch button { min-height: 58px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: #202a21; color: #a7b0a4; border: 1px solid #3e483c; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }.viewport-switch button:hover { border-color: #73816b; color: white; }.viewport-switch button.is-active { background: #354132; border-color: #7a8f6c; color: #f7f6f1; }.viewport-switch svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }.viewport-switch span { font-size: 7px; font-weight: 700; }.lab-control-bottom { margin-top: auto; padding-top: 24px; }.theme-toggle { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid #414b3e; padding: 10px; background: #263127; color: #e7eadf; text-align: left; cursor: pointer; }.theme-toggle-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #53604d; border-radius: 50%; color: #f2a187; font-size: 15px; }.theme-toggle > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }.theme-toggle b { font-size: 8px; }.theme-toggle small { color: #9da89a; font-size: 7px; }.toggle-track { width: 25px; height: 14px; border-radius: 10px; background: #55624e; margin-left: auto; padding: 2px; }.toggle-track i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #f6f2e8; transition: transform .22s var(--ease); }.theme-toggle[aria-pressed="true"] .toggle-track i { transform: translateX(11px); background: #f49b7d; }.lab-control-bottom p { margin: 12px 0 0; color: #869284; font-size: 8px; line-height: 1.65; }
.lab-stage-wrap { min-width: 0; display: flex; flex-direction: column; padding: 15px 16px 14px; }.lab-stage-head, .lab-stage-footer { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #a6b0a2; font-size: 8px; }.lab-stage-head > span:first-child { display: flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .9px; }.lab-stage-dot { width: 5px; height: 5px; background: #f28e70; border-radius: 50%; }.lab-stage-head > span:last-child { font-variant-numeric: tabular-nums; }.lab-stage { min-height: 486px; padding: 24px; display: flex; align-items: center; justify-content: center; flex: 1; background-color: #303a30; background-image: linear-gradient(rgba(246,246,236,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,236,.035) 1px,transparent 1px); background-size: 22px 22px; overflow: hidden; transition: background .25s ease; }.lab-console[data-skin="light"] .lab-stage { background-color: #dfe2d8; background-image: linear-gradient(rgba(24,33,27,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(24,33,27,.045) 1px,transparent 1px); }.lab-page-preview { --lp-bg: #f7f4e9; --lp-ink: #1b281d; --lp-muted: #6f796b; --lp-rule: #d7d9cd; --lp-accent: #688456; width: 100%; max-width: 900px; min-height: 370px; display: flex; flex-direction: column; padding: 0 23px; overflow: hidden; color: var(--lp-ink); background: var(--lp-bg); border: 1px solid rgba(20,28,20,.15); box-shadow: 0 20px 36px rgba(0,0,0,.14); transform: translateZ(0); transition: width .42s var(--ease), min-height .42s var(--ease), background .25s ease, color .25s ease; }.lab-page-preview.sample-noir { --lp-bg: #20212b; --lp-ink: #f5f0e8; --lp-muted: #b8b3bd; --lp-rule: #454551; --lp-accent: #f0a36c; }.lab-page-preview.sample-harbor { --lp-bg: #edf3f4; --lp-ink: #14344b; --lp-muted: #607a8a; --lp-rule: #d0dfe2; --lp-accent: #b57b4c; }.lab-page-preview.sample-notebook { --lp-bg: #f8f2e5; --lp-ink: #303a2d; --lp-muted: #7e7a68; --lp-rule: #d9d0bb; --lp-accent: #b45b43; }.lab-page-preview.sample-paper { --lp-bg: #f2ecdf; --lp-ink: #3c372e; --lp-muted: #777164; --lp-rule: #ded5c5; --lp-accent: #71886a; }.lab-page-preview.sample-bio { --lp-bg: #f0e6fb; --lp-ink: #35284b; --lp-muted: #7a6889; --lp-rule: #d7c9e9; --lp-accent: #8259c7; }
.lab-page-nav { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--lp-rule); }.lab-logo { font-size: 15px; letter-spacing: -.5px; font-weight: 900; }.lab-logo span { color: var(--lp-accent); }.lab-page-navlinks { display: flex; gap: clamp(10px, 2vw, 23px); color: var(--lp-muted); font-size: 8px; font-weight: 800; letter-spacing: .7px; }.lab-page-menu { display: none; width: 25px; height: 25px; border: 1px solid var(--lp-rule); background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }.lab-page-menu i { width: 10px; height: 1px; background: var(--lp-ink); }
.lab-page-body { display: grid; grid-template-columns: 1.04fr .96fr; gap: 26px; align-items: center; flex: 1; padding: 30px 0 25px; }.lab-page-copy { position: relative; z-index: 2; }.lab-page-kicker { color: var(--lp-muted); font-size: 8px; font-weight: 850; letter-spacing: 1.5px; }.lab-page-copy h3 { margin: 19px 0 14px; font-size: clamp(31px, 4.3vw, 55px); letter-spacing: -.08em; line-height: .96; font-weight: 750; }.lab-page-copy h3 em { color: var(--lp-accent); font-family: var(--serif); font-weight: 400; }.lab-page-copy p { max-width: 300px; margin: 0 0 20px; color: var(--lp-muted); font-size: 10px; line-height: 1.7; }.lab-page-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 30px; border-bottom: 1px solid var(--lp-accent); font-size: 9px; font-weight: 800; }.lab-page-cta b { color: var(--lp-accent); font-size: 15px; font-weight: 450; }.lab-page-image { min-height: 235px; max-height: 290px; overflow: hidden; }.lab-page-image img { width: 100%; height: 100%; min-height: 235px; max-height: 290px; object-fit: cover; mix-blend-mode: multiply; transition: transform .5s var(--ease); }.sample-noir .lab-page-image img { mix-blend-mode: normal; }.lab-page-bottom { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--lp-rule); color: var(--lp-muted); font-size: 7px; font-weight: 800; letter-spacing: .9px; }.lab-stage-footer { font-size: 7px; }.lab-stage-footer > span:first-child { display: flex; align-items: center; gap: 6px; }.lab-stage-footer i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #82a274; }
/* Responsive viewport states */
.lab-console[data-viewport="tablet"] .lab-page-preview { width: 80%; min-height: 400px; }.lab-console[data-viewport="tablet"] .lab-page-body { grid-template-columns: 1fr .9fr; gap: 13px; padding: 22px 0; }.lab-console[data-viewport="tablet"] .lab-page-copy h3 { font-size: clamp(26px,3.3vw,40px); }.lab-console[data-viewport="tablet"] .lab-page-image, .lab-console[data-viewport="tablet"] .lab-page-image img { min-height: 205px; }.lab-console[data-viewport="mobile"] .lab-page-preview { width: min(100%, 260px); min-height: 435px; padding: 0 14px; }.lab-console[data-viewport="mobile"] .lab-page-nav { min-height: 42px; }.lab-console[data-viewport="mobile"] .lab-logo { font-size: 12px; }.lab-console[data-viewport="mobile"] .lab-page-navlinks { display: none; }.lab-console[data-viewport="mobile"] .lab-page-menu { display: flex; }.lab-console[data-viewport="mobile"] .lab-page-body { grid-template-columns: 1fr; gap: 16px; padding: 20px 0 14px; }.lab-console[data-viewport="mobile"] .lab-page-copy h3 { font-size: 32px; margin: 12px 0 10px; }.lab-console[data-viewport="mobile"] .lab-page-kicker { font-size: 6px; }.lab-console[data-viewport="mobile"] .lab-page-copy p { font-size: 9px; margin-bottom: 12px; }.lab-console[data-viewport="mobile"] .lab-page-image { min-height: 150px; max-height: 150px; }.lab-console[data-viewport="mobile"] .lab-page-image img { min-height: 150px; max-height: 150px; }.lab-console[data-viewport="mobile"] .lab-page-bottom { font-size: 6px; }
.lab-console[data-skin="dark"] .lab-page-preview { --lp-bg: #202820; --lp-ink: #f5f3ea; --lp-muted: #b8c1b3; --lp-rule: #465144; --lp-accent: #f39b7d; }.lab-console[data-skin="dark"] .lab-page-image img { opacity: .91; }.lab-console[data-skin="dark"] .lab-page-copy em { color: #f39b7d; }

/* Template gallery */
.templates-section { padding-top: 110px; padding-bottom: 121px; }.template-count { display: inline-flex; align-items: center; gap: 8px; color: #81897d; font-size: 9px; font-weight: 750; }.template-count b { display: grid; place-items: center; width: 24px; height: 24px; background: var(--accent-pale); color: var(--accent-dark); font-size: 10px; border-radius: 50%; }.template-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.filter-button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid transparent; background: transparent; color: #697365; cursor: pointer; font-size: 9px; font-weight: 700; transition: background .18s ease, color .18s ease, border-color .18s ease; }.filter-button:hover { color: var(--ink); border-color: #d8dbcf; }.filter-button.is-active { border-color: #cfd5c8; background: #eeeee6; color: var(--ink); }.filter-button span { color: var(--accent); font-size: 7px; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }.template-card { min-width: 0; border: 1px solid #dedfd5; background: #fcfbf7; animation: card-enter .35s var(--ease) both; }.template-card.is-hidden { display: none; }.template-card-preview { width: 100%; display: block; border: 0; padding: 0; cursor: pointer; text-align: left; position: relative; height: 240px; overflow: hidden; background: #e8e7de; }.template-card-preview::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(20,28,20,.04); pointer-events: none; }.template-card-preview > .preview-badge { position: absolute; z-index: 4; left: 13px; top: 13px; background: rgba(250,249,243,.92); padding: 6px 7px; color: #4f594d; font-size: 7px; font-weight: 850; letter-spacing: .8px; backdrop-filter: blur(5px); }.thumb-site { position: absolute; inset: 36px 17px 10px; overflow: hidden; border: 1px solid rgba(24,33,27,.12); box-shadow: 0 8px 23px rgba(24,33,27,.09); transform: translateY(4px); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }.template-card-preview:hover .thumb-site, .template-card-preview:focus-visible .thumb-site { transform: translateY(0); box-shadow: 0 14px 28px rgba(24,33,27,.15); }.template-preview-action { position: absolute; z-index: 5; right: 11px; bottom: 11px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 9px; background: var(--ink); color: white; font-size: 8px; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s var(--ease); }.template-preview-action b { color: #f49a7e; font-size: 12px; font-weight: 450; }.template-card-preview:hover .template-preview-action, .template-card-preview:focus-visible .template-preview-action { opacity: 1; transform: translateY(0); }
.thumb-nav { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid rgba(90,90,80,.18); font-size: 6px; letter-spacing: .6px; position: relative; z-index: 2; }.thumb-nav span { font-size: 5px; letter-spacing: .7px; }.thumb-noir { background: #20212b; color: #f2f0e8; }.thumb-noir .thumb-nav { border-color: #40404b; }.thumb-noir-copy { position: absolute; z-index: 2; top: 61px; left: 14px; }.thumb-noir-copy small, .thumb-lumen-content small, .thumb-harbor-content small, .thumb-paper-content small, .thumb-notebook-content small { display: block; font-size: 5px; letter-spacing: .8px; color: #abb0b9; margin-bottom: 9px; }.thumb-noir-copy b { display: block; font-size: 18px; letter-spacing: -1px; line-height: .96; }.thumb-noir-copy em { font-family: var(--serif); font-weight: 400; color: #f2a16f; }.thumb-noir-copy i, .thumb-lumen-content i, .thumb-harbor-content i, .thumb-paper-content i { display: inline-block; font-size: 6px; font-style: normal; border-bottom: 1px solid currentColor; padding-bottom: 3px; margin-top: 11px; }.thumb-noir-art { position: absolute; right: 0; top: 50px; bottom: 22px; width: 43%; overflow: hidden; opacity: .86; }.thumb-noir-art img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }.thumb-noir-foot { position: absolute; left: 14px; right: 14px; bottom: 0; height: 22px; border-top: 1px solid #40404b; color: #a4a8b0; display: flex; align-items: center; font-size: 5px; letter-spacing: .7px; }
.thumb-lumen { background: #f8f7f0; color: #263128; }.thumb-lumen .thumb-nav b { font-size: 10px; }.thumb-lumen .thumb-nav b span { color: #e86f4c; font-size: 10px; }.thumb-lumen-content { position: absolute; z-index: 2; top: 62px; left: 15px; }.thumb-lumen-content small { color: #71806b; }.thumb-lumen-content b { display: block; font-size: 19px; line-height: .95; letter-spacing: -1.2px; }.thumb-lumen-content b em { font-family: var(--serif); font-weight: 400; color: #68845a; }.thumb-lumen-content p, .thumb-harbor-content p { font-size: 6px; color: #697465; margin: 8px 0 0; }.thumb-lumen-content i, .thumb-harbor-content i { color: #263128; }.thumb-lumen-image { position: absolute; right: 0; top: 46px; bottom: 0; width: 43%; overflow: hidden; }.thumb-lumen-image img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.thumb-harbor { background: #eef3f4; color: #14354b; }.thumb-harbor .thumb-nav { border-color: #d1dfe1; }.thumb-harbor-content { position: absolute; z-index: 2; top: 61px; left: 13px; }.thumb-harbor-content small { color: #6b8493; }.thumb-harbor-content b { display: block; font-size: 17px; line-height: .98; letter-spacing: -1px; }.thumb-harbor-content b em { font-family: var(--serif); font-weight: 400; color: #ad7a50; }.thumb-harbor-image { position: absolute; right: 0; top: 50px; bottom: 22px; width: 39%; overflow: hidden; }.thumb-harbor-image img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }.thumb-harbor-band { position: absolute; bottom: 0; left: 0; right: 0; height: 22px; background: #183d56; }
.thumb-paper { background: #f5efe4; color: #37352e; }.thumb-paper .thumb-nav { border-color: #ded4c4; }.thumb-paper .thumb-nav b { font-family: var(--serif); font-size: 10px; font-weight: 500; }.thumb-paper-content { position: absolute; top: 39px; left: 50%; width: 63%; transform: translateX(-50%); text-align: left; }.thumb-avatar { width: 29px; height: 29px; margin-bottom: 7px; display: grid; place-items: center; border-radius: 50%; background: #d8c9b3; color: #625849; font-family: var(--serif); font-size: 15px; }.thumb-paper-content small { color: #7f7a6d; }.thumb-paper-content b { display: block; font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.05; letter-spacing: -.6px; }.thumb-paper-content p { max-width: 170px; font-size: 6px; line-height: 1.55; color: #777164; }.thumb-paper-content i { color: #37352e; }.thumb-paper-rule { position: absolute; left: 18%; right: 18%; bottom: 13px; border-top: 1px solid #ddd4c4; }
.thumb-bio { display: flex; flex-direction: column; align-items: center; padding: 15px; background: #efe6f8; color: #35264b; text-align: center; }.bio-spark { position: absolute; width: 45px; height: 45px; border-radius: 50%; filter: blur(.2px); }.bio-spark-one { background: #f3c7ac; top: 10px; left: 18px; opacity: .8; }.bio-spark-two { background: #c4b1ef; right: 15px; top: 32px; opacity: .8; }.bio-person { z-index: 1; width: 33px; height: 33px; display: grid; place-items: center; margin: 3px 0 6px; border-radius: 50%; background: #6e4d9e; color: white; font-family: var(--serif); font-size: 16px; }.thumb-bio > b { z-index: 1; font-size: 10px; }.thumb-bio > small { z-index: 1; font-size: 6px; color: #79688d; margin-top: 3px; }.thumb-bio > p { z-index: 1; margin: 8px 0 9px; font-family: var(--serif); font-size: 9px; line-height: 1.25; }.bio-link { z-index: 1; width: min(100%, 185px); display: flex; justify-content: space-between; padding: 6px 8px; margin-bottom: 4px; background: #fbf8ff; border: 1px solid #dfd1ee; text-align: left; font-size: 6px; }.bio-link span { color: #8b64bb; }.bio-link.featured { background: #5b437d; color: white; border-color: #5b437d; }
.thumb-notebook { background: #f8f2e5; color: #353a2f; }.thumb-notebook .thumb-nav { border-color: #ddd3c0; }.thumb-notebook .thumb-nav b { font-family: var(--serif); font-weight: 600; font-size: 10px; }.thumb-notebook-content { position: absolute; top: 59px; left: 13px; right: 13px; }.thumb-notebook-content small { color: #8e7b67; }.thumb-notebook-content b { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: .99; letter-spacing: -.5px; }.thumb-notebook-content em { color: #ad5f46; }.thumb-notebook-content p { font-size: 6px; color: #7b786b; margin: 7px 0; }.thumb-notebook-visual { position: absolute; width: 31%; height: 95px; top: 15px; right: 0; overflow: hidden; }.thumb-notebook-visual img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }.thumb-notebook-footer { position: absolute; bottom: 0; left: 13px; right: 13px; height: 18px; border-top: 1px solid #ddd3c0; display: flex; align-items: center; color: #8c816f; font-size: 5px; letter-spacing: .8px; }
.template-card-info { min-height: 96px; padding: 16px 15px 13px; display: flex; justify-content: space-between; gap: 10px; }.template-card-info h3 { margin: 0 0 7px; font-size: 15px; letter-spacing: -.45px; }.template-card-info p { max-width: 265px; margin: 0; color: #6d7669; font-size: 10px; line-height: 1.65; }.template-category-dot { display: block; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }.template-card-foot { min-height: 37px; padding: 0 15px; border-top: 1px solid #eeeeE6; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #8a9186; font-size: 7px; letter-spacing: .8px; }.template-card-foot button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 0 7px 7px; background: transparent; border: 0; cursor: pointer; font-size: 9px; font-weight: 750; letter-spacing: 0; color: #465245; }.template-card-foot button span { color: var(--accent); font-size: 13px; font-weight: 450; }.template-card-foot button:hover { color: var(--accent-dark); }.template-empty { padding: 36px; border: 1px dashed #cbd0c3; text-align: center; color: var(--muted); font-size: 12px; }.template-note { display: flex; gap: 8px; margin: 20px 0 0; color: #7f877b; font-size: 9px; line-height: 1.6; }.template-note span { color: var(--accent); font-size: 13px; }

/* Workflow and export */
.workflow-section { background: #222d23; color: #f8f7f1; padding: 103px 0 105px; }.workflow-wrap { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(42px, 7vw, 96px); }.workflow-heading h2 { color: #f8f7f1; }.workflow-heading h2 em { color: #f4a087; }.workflow-heading > p { max-width: 330px; margin: 22px 0 0; color: #b2bcb0; font-size: 11px; line-height: 1.85; }.workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; padding-top: 2px; }.workflow-step { min-width: 0; border-top: 1px solid #52604e; padding-top: 13px; }.workflow-num { display: flex; align-items: center; justify-content: space-between; color: #f49a7e; font-size: 10px; font-weight: 850; letter-spacing: .6px; }.workflow-num span { color: #8a9787; font-size: 7px; letter-spacing: 1px; }.workflow-art { height: 138px; margin: 20px 0 22px; position: relative; background: #2d392d; border: 1px solid #42503f; overflow: hidden; }.stack-sheet { position: absolute; width: 70px; height: 90px; top: 23px; left: calc(50% - 35px); border: 1px solid #6d7963; }.sheet-back { transform: translate(14px,-6px) rotate(9deg); background: #a0ae8d; }.sheet-mid { transform: translate(-12px,0) rotate(-8deg); background: #e2bd9e; }.sheet-front { display: flex; flex-direction: column; justify-content: space-between; padding: 11px; transform: rotate(-1deg); background: #f4f1e7; color: #273327; font-size: 11px; line-height: .95; letter-spacing: -.5px; font-weight: 800; }.sheet-front em { color: var(--accent-dark); font-family: var(--serif); font-size: 15px; font-weight: 400; }.sheet-front i { align-self: end; color: var(--accent); font-size: 20px; font-style: normal; font-weight: 400; }.workflow-step h3 { margin: 0 0 10px; font-size: 14px; letter-spacing: -.4px; }.workflow-step > p { margin: 0; color: #b4beb1; font-size: 10px; line-height: 1.8; }
.workflow-art-edit { background-color: #e9e9df; background-image: linear-gradient(rgba(24,33,27,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(24,33,27,.04) 1px,transparent 1px); background-size: 14px 14px; }.edit-line { position: absolute; left: 22px; right: 22px; height: 5px; background: #cdd3c4; }.edit-line-one { top: 29px; }.edit-line-two { top: 39px; right: 51px; }.edit-selection { position: absolute; top: 54px; left: 22px; right: 42px; bottom: 23px; border: 1px solid #e66f4f; display: flex; align-items: center; justify-content: center; color: #495549; background: rgba(255,255,255,.48); font-size: 8px; font-weight: 850; letter-spacing: 1px; }.edit-selection i { position: absolute; width: 6px; height: 6px; background: white; border: 1px solid #e66f4f; }.edit-selection i:nth-child(1) { top: -3px; left: -3px; }.edit-selection i:nth-child(2) { top: -3px; right: -3px; }.edit-selection i:nth-child(3) { bottom: -3px; left: -3px; }.edit-selection i:nth-child(4) { bottom: -3px; right: -3px; }.edit-cursor { position: absolute; right: 20px; bottom: 23px; color: #dd674b; font-size: 20px; }.workflow-art-export { padding: 12px 10px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }.export-file { display: grid; grid-template-columns: 31px 1fr 14px; align-items: center; gap: 7px; min-height: 25px; padding: 3px 7px; border: 1px solid #455340; background: #354332; color: #edf0e7; font-size: 7px; }.export-file > span { display: grid; place-items: center; height: 18px; background: #f5d5c8; color: #9e4b34; font-size: 6px; font-weight: 900; }.export-file:nth-child(2) > span { background: #d5deeb; color: #4b6689; }.export-file:nth-child(3) > span { background: #d7e5c4; color: #506740; }.export-file b { font-weight: 650; }.export-file i { color: #9dcb84; font-size: 9px; font-style: normal; }.export-zip { position: absolute; right: 11px; bottom: 8px; display: flex; align-items: center; gap: 6px; color: #20291f; background: #e7f3c5; padding: 6px 7px; font-size: 7px; font-weight: 900; }.export-zip span { color: var(--accent-dark); font-size: 12px; }
.export-section { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(50px, 7vw, 100px); padding-top: 117px; padding-bottom: 120px; }.export-copy h2 { font-size: clamp(40px,4.3vw,55px); }.export-copy > p { max-width: 420px; margin: 23px 0 0; color: #626c60; font-size: 12px; line-height: 1.9; }.export-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 25px; }.export-facts > div { display: flex; align-items: center; gap: 8px; }.fact-icon { width: 27px; height: 31px; display: grid; place-items: center; font-size: 11px; font-weight: 900; }.fact-html { background: #f8dfd5; color: #a34f37; }.fact-css { background: #dfe7ef; color: #4e6d89; }.fact-assets { background: #dfe9d5; color: #4e7047; }.export-facts > div > span:last-child { display: flex; flex-direction: column; gap: 4px; }.export-facts b { font-size: 9px; }.export-facts small { color: #7b8378; font-size: 8px; }.honest-note { display: flex; gap: 10px; align-items: flex-start; max-width: 430px; margin-top: 27px; padding-top: 17px; border-top: 1px solid var(--line); }.honest-note-icon { flex: 0 0 auto; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #d4b29e; border-radius: 50%; color: #a65a3f; font-family: var(--serif); font-size: 12px; }.honest-note p { margin: 0; color: #7b8378; font-size: 9px; line-height: 1.7; }
.file-explorer { position: relative; min-width: 0; overflow: hidden; background: #fdfcf7; border: 1px solid #d8dacf; box-shadow: 0 24px 45px rgba(32,42,30,.075); }.file-explorer-bar { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 17px; border-bottom: 1px solid #e7e7de; color: #4b5749; font-size: 10px; font-weight: 800; }.file-window-controls { display: flex; gap: 4px; }.file-window-controls i { width: 7px; height: 7px; background: #cdd1c6; border-radius: 50%; }.file-window-controls i:first-child { background: #e9a18a; }.file-window-controls i:nth-child(2) { background: #e2d19a; }.file-window-controls i:nth-child(3) { background: #9db991; }.copy-structure { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dfe1d7; background: #f7f7f1; padding: 7px 9px; color: #596557; font-size: 8px; cursor: pointer; }.copy-structure span { color: var(--accent); font-size: 12px; }.copy-structure:hover { background: #eeeee6; }.file-explorer-body { padding: 14px 17px 18px; position: relative; z-index: 1; }.file-row { min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 10px; color: #52604f; font-size: 10px; }.file-root { background: #eef1e7; color: #29362a; }.file-root b { font-weight: 800; }.file-type { margin-left: auto; color: #8c9387; font-size: 7px; letter-spacing: .7px; }.folder-icon { position: relative; width: 17px; height: 12px; flex: 0 0 auto; background: #c9d8b6; border: 1px solid #b6c99e; }.folder-icon::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 3px; background: #c9d8b6; border: 1px solid #b6c99e; border-bottom: 0; }.file-branch { width: 14px; height: 21px; border-left: 1px solid #d3d7cb; border-bottom: 1px solid #d3d7cb; flex: 0 0 auto; margin-top: -8px; }.file-type-icon { width: 20px; height: 23px; display: grid; place-items: center; border-radius: 2px; font-size: 9px; font-weight: 900; }.html-file { background: #f8e2d8; color: #b85d3d; }.css-file { background: #dbe6f1; color: #4f7193; }.file-format { margin-left: auto; color: #a0a69b; font-size: 7px; }.file-explorer-status { min-height: 42px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 17px; background: #f5f5ee; border-top: 1px solid #e5e7dd; color: #7a8477; font-size: 8px; }.file-explorer-status span:first-child { display: flex; align-items: center; gap: 6px; }.file-explorer-status i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: #80a476; }.export-decoration { position: absolute; top: 50%; right: 12px; transform: translateY(-35%) rotate(-9deg); color: rgba(237,239,228,.72); font-size: 62px; font-weight: 900; letter-spacing: -5px; pointer-events: none; }

/* Honest scope */
.scope-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(42px, 8vw, 110px); padding-top: 12px; padding-bottom: 112px; }.scope-heading h2 { font-size: clamp(39px,4vw,50px); }.scope-heading > p { max-width: 290px; margin: 19px 0 0; color: #737b70; font-size: 11px; line-height: 1.8; }.scope-table { border-top: 1px solid #d8dad0; }.scope-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-height: 53px; align-items: center; border-bottom: 1px solid #e1e2d9; color: #626d60; font-size: 9px; }.scope-row span { display: flex; align-items: center; gap: 9px; }.scope-row-head { min-height: 35px; color: #899184; font-size: 7px; font-weight: 850; letter-spacing: .85px; }.scope-check, .scope-separate-icon { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; flex: 0 0 auto; font-size: 8px; font-style: normal; }.scope-check { background: #e1ead7; color: #547447; }.scope-separate-icon { background: #f4e3d9; color: #a35c42; }

/* FAQ */
.faq-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(45px, 8vw, 112px); border-top: 1px solid var(--line); padding-top: 106px; padding-bottom: 120px; }.faq-heading h2 { font-size: clamp(40px,4vw,52px); }.faq-heading > p { max-width: 270px; margin: 21px 0 0; color: #747c70; font-size: 11px; line-height: 1.8; }.faq-list { border-top: 1px solid #d9dcd1; }.faq-item { border-bottom: 1px solid #d9dcd1; }.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; padding: 17px 0; cursor: pointer; font-size: 12px; font-weight: 730; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }.faq-plus { width: 23px; height: 23px; flex: 0 0 auto; position: relative; border: 1px solid #d0d5c9; border-radius: 50%; transition: background .2s ease, border-color .2s ease; }.faq-plus::before, .faq-plus::after { content: ""; position: absolute; width: 8px; height: 1px; left: 7px; top: 10px; background: var(--ink); transition: transform .2s ease; }.faq-plus::after { transform: rotate(90deg); }.faq-item[open] .faq-plus { background: var(--accent-pale); border-color: #e8c1b4; }.faq-item[open] .faq-plus::after { transform: rotate(0); }.faq-answer { padding: 0 43px 21px 0; color: #6c7669; font-size: 11px; line-height: 1.85; animation: answer-open .22s ease both; }.faq-answer p { margin: 0; }

/* Closing / footer */
.closing-section { background: var(--ink); color: #f9f8f2; }.closing-inner { min-height: 345px; position: relative; display: grid; grid-template-columns: 65px 1fr auto; gap: 35px; align-items: start; padding-top: 67px; padding-bottom: 62px; }.closing-monogram { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }.closing-monogram img { width: 43px; height: 43px; }.closing-monogram span { color: #8f9a8b; font-size: 7px; font-weight: 850; letter-spacing: 1px; }.closing-copy .section-label { margin-top: 4px; }.closing-copy h2 { font-size: clamp(37px,4.1vw,53px); color: #faf8f1; margin-top: 20px; }.closing-copy h2 em { color: #f49a7e; }.closing-copy > p { max-width: 480px; margin: 20px 0 0; color: #b5beb0; font-size: 11px; line-height: 1.85; }.closing-action { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding-top: 54px; }.button-paper { background: #f7f3e9; color: var(--ink); }.button-paper:hover { background: #fff; }.button-paper span { color: var(--accent-dark); }.back-top { padding-bottom: 5px; border-bottom: 1px solid #647060; color: #bec6b8; font-size: 9px; }.closing-rule { position: absolute; left: 0; right: 0; bottom: 45px; height: 1px; background: #3e4a3e; }.closing-index { position: absolute; bottom: 20px; left: 0; color: #879284; font-size: 7px; font-weight: 850; letter-spacing: 1.2px; }
.site-footer { min-height: 98px; display: grid; grid-template-columns: auto 1fr 1.7fr; align-items: center; gap: 24px; }.footer-brand .brand-name { font-size: 15px; }.footer-brand img { width: 29px; height: 29px; }.site-footer > p { margin: 0; color: #858d81; font-size: 9px; }.footer-links { display: flex; justify-content: flex-end; align-items: center; gap: 21px; color: #687264; font-size: 9px; }.footer-links a { font-weight: 700; transition: color .2s ease; }.footer-links a:hover { color: var(--accent-dark); }.footer-links span { color: #8c9388; font-size: 8px; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translate(-50%, 16px); padding: 12px 16px; background: var(--ink); color: #fffefa; font-size: 11px; box-shadow: 0 10px 35px rgba(0,0,0,.16); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s var(--ease); }.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
@keyframes card-enter { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes answer-open { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (min-width: 1500px) { .hero { min-height: 700px; } }
@media (max-width: 1120px) {
  :root { --max: 1040px; }
  .hero { grid-template-columns: .82fr 1.18fr; gap: 34px; min-height: 625px; }
  .hero h1 { font-size: clamp(50px,5.6vw,68px); }
  .hero-visual { padding: 16px 15px 13px; }
  .sample-page { padding-inline: 12px; }
  .sample-copy h2 { font-size: clamp(19px,2.6vw,27px); }
  .lab-console { grid-template-columns: 245px minmax(0,1fr); }
  .lab-stage { min-height: 455px; padding: 18px; }
  .lab-page-preview { padding-inline: 18px; }
  .template-card-preview { height: 218px; }
  .thumb-site { inset-inline: 12px; }
}
@media (max-width: 900px) {
  .shell, .nav-wrap, .capability-inner, .preview-lab-wrap { width: min(100% - 44px, var(--max)); }
  .nav-wrap { gap: 16px; }
  .primary-nav { gap: 16px; margin-right: 0; font-size: 11px; }
  .nav-cta { gap: 10px; padding-inline: 11px; font-size: 10px; }
  .hero { grid-template-columns: 1fr; gap: 45px; padding-top: 62px; padding-bottom: 76px; }
  .hero-copy { max-width: 660px; }.hero h1 { max-width: 680px; font-size: clamp(60px,8vw,82px); }.hero-intro { max-width: 500px; }.hero-visual { width: min(100%, 780px); margin-inline: auto; padding: 20px; }.sample-page { padding-inline: 18px; }.sample-hero-content { min-height: 220px; }.sample-copy h2 { font-size: clamp(28px,5vw,43px); }.sample-copy p { font-size: 9px; }.sample-kicker { font-size: 7px; }.sample-image-wrap img { height: 175px; }.sample-nav { height: 42px; }.sample-wordmark { font-size: 13px; }.sample-navlinks { font-size: 8px; }.sample-bottom { height: 31px; font-size: 6px; }.preview-workspace { padding: 16px; }.preview-toolbar { height: 40px; font-size: 10px; }.toolbar-brand-mark { width: 18px; height: 18px; font-size: 10px; }.toolbar-save { font-size: 8px; }.preview-statusbar { height: 29px; font-size: 8px; }.preview-app-head { height: 42px; }.visual-caption { font-size: 8px; }.hero-edition { margin-top: 34px; }
  .capability-inner { grid-template-columns: repeat(3,1fr); gap: 0; padding: 18px 0; }.rail-intro { display: none; }.rail-item { padding-left: 14px; gap: 8px; }
  .section { padding-top: 84px; padding-bottom: 88px; }.section-intro { margin-bottom: 35px; }.section-intro h2, .lab-heading h2 { font-size: clamp(39px,6vw,54px); }.feature-card-main, .feature-card-responsive, .feature-card-library, .feature-card-pages { grid-column: span 6; }.feature-card-main, .feature-card-pages { grid-column: span 12; }.feature-card-responsive, .feature-card-library { grid-column: span 6; }.mini-editor { min-height: 220px; }.mini-canvas-page { height: 175px; }.library-illustration, .responsive-illustration { min-height: 230px; }.responsive-stage { height: 213px; }.screen-mobile { height: 155px; }.screen-tablet { height: 183px; }
  .preview-lab-section { padding: 83px 0 88px; }.lab-console { grid-template-columns: 215px minmax(0,1fr); }.lab-controls { padding: 18px 12px 13px; }.lab-stage { min-height: 420px; padding: 13px; }.lab-page-preview { padding-inline: 14px; }.lab-page-body { gap: 12px; padding: 24px 0 20px; }.lab-page-copy h3 { font-size: clamp(28px,4.1vw,43px); }.lab-page-image, .lab-page-image img { min-height: 210px; }.lab-page-navlinks { gap: 10px; font-size: 7px; }
  .templates-section { padding-top: 85px; padding-bottom: 91px; }.template-grid { gap: 14px; }.template-card-preview { height: 190px; }.thumb-site { inset: 34px 9px 9px; }.thumb-noir-copy { left: 10px; top: 51px; }.thumb-noir-copy b, .thumb-lumen-content b { font-size: 16px; }.thumb-lumen-content, .thumb-harbor-content { left: 10px; top: 50px; }.thumb-lumen-image, .thumb-harbor-image { top: 46px; }.thumb-paper-content { top: 37px; }.thumb-paper-content b, .thumb-notebook-content b { font-size: 14px; }.thumb-notebook-content { top: 52px; left: 10px; right: 10px; }.thumb-notebook-visual { height: 65px; }.template-card-info { padding: 13px 12px; }.template-card-info h3 { font-size: 13px; }.template-card-info p { font-size: 9px; }.template-card-foot { padding-inline: 12px; }
  .workflow-section { padding: 84px 0; }.workflow-wrap { grid-template-columns: 1fr; gap: 44px; }.workflow-heading h2 { font-size: 51px; }.workflow-heading > p { max-width: 500px; }.workflow-steps { gap: 14px; }.workflow-art { height: 150px; }.export-section { grid-template-columns: 1fr; gap: 42px; padding-top: 86px; padding-bottom: 89px; }.export-copy { max-width: 620px; }.file-explorer { width: 100%; }.scope-section { grid-template-columns: 1fr; gap: 34px; padding-bottom: 85px; }.scope-heading > p { max-width: 500px; }.faq-section { grid-template-columns: 1fr; gap: 31px; padding-top: 82px; padding-bottom: 89px; }.faq-heading > p { max-width: 440px; }.closing-inner { grid-template-columns: 56px 1fr auto; gap: 23px; padding-top: 55px; padding-bottom: 65px; }.closing-copy h2 { font-size: clamp(36px,5.5vw,48px); }.closing-action { padding-top: 45px; }.site-footer { grid-template-columns: auto 1fr; row-gap: 12px; padding-top: 22px; padding-bottom: 22px; }.footer-links { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: 4px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 72px; }
  .shell, .nav-wrap, .capability-inner, .preview-lab-wrap { width: min(100% - 36px, var(--max)); }
  .site-header { height: 65px; }.brand img { width: 31px; height: 31px; }.brand-name { font-size: 16px; }.nav-cta { display: none; }.menu-toggle { width: 38px; height: 38px; border: 1px solid #d8dbd0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }.menu-toggle span { display: block; width: 15px; height: 1px; background: var(--ink); transition: transform .2s ease; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }.primary-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; margin: 0; padding: 12px 18px 18px; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 18px rgba(24,33,27,.05); }.primary-nav.is-open { display: flex; }.primary-nav a { padding: 14px 2px; border-bottom: 1px solid #e7e7de; font-size: 12px; }.primary-nav a:last-child { border-bottom: 0; }
  .hero { padding-top: 48px; padding-bottom: 60px; gap: 32px; }.overline { font-size: 8px; letter-spacing: 1.2px; }.hero h1 { margin: 23px 0 18px; font-size: clamp(48px,12.3vw,69px); letter-spacing: -.078em; line-height: 1; }.hero-intro { max-width: 390px; font-size: 13px; line-height: 1.8; }.hero-actions { gap: 18px; margin-top: 25px; }.button { min-height: 46px; padding-inline: 13px; gap: 15px; font-size: 10px; }.text-button { font-size: 10px; }.hero-meta { gap: 11px 15px; margin-top: 22px; font-size: 9px; }.hero-edition { margin-top: 27px; gap: 8px; font-size: 7px; letter-spacing: .8px; }.edition-line { width: 20px; flex-shrink: 0; }
  .hero-visual { padding: 13px 10px 11px; }.visual-topbar, .visual-caption { font-size: 6px; letter-spacing: .7px; }.preview-app { margin-block: 12px; }.preview-app-head { height: 33px; padding-inline: 8px; gap: 8px; font-size: 7px; }.window-controls { gap: 3px; }.window-controls i { width: 5px; height: 5px; }.preview-state { font-size: 6px; }.preview-workspace { padding: 7px; }.preview-toolbar { height: 29px; padding-inline: 7px; font-size: 7px; }.toolbar-brand-mark { width: 14px; height: 14px; font-size: 8px; }.toolbar-save { font-size: 6px; }.toolbar-more { font-size: 12px; }.sample-page { min-height: 218px; padding-inline: 9px; }.sample-nav { height: 29px; }.sample-wordmark { font-size: 9px; }.sample-navlinks { display: none; }.sample-menu { display: flex; }.sample-hero-content { min-height: 160px; grid-template-columns: 1fr .7fr; gap: 5px; padding-block: 12px 9px; }.sample-kicker { font-size: 5px; letter-spacing: .6px; margin-bottom: 7px; }.sample-copy h2 { font-size: clamp(20px,6.3vw,27px); letter-spacing: -1px; }.sample-copy p { font-size: 6px; margin-block: 7px 8px; line-height: 1.5; }.sample-link { font-size: 6px; gap: 7px; }.sample-link b { font-size: 9px; }.sample-image-wrap img { height: 120px; }.sample-bottom { height: 22px; font-size: 4.5px; letter-spacing: .25px; }.preview-statusbar { font-size: 6px; height: 22px; }.preview-app-foot { padding: 5px 7px; align-items: flex-start; flex-direction: column; gap: 5px; }.demo-hint { font-size: 7px; }.hero-demo-controls { width: 100%; }.style-chip { flex: 1; padding: 6px 4px; font-size: 7px; }.visual-caption { gap: 6px; }.visual-number { display: none; }
  .capability-inner { grid-template-columns: 1fr; padding: 0; }.rail-item { min-height: 51px; border-left: 0; border-bottom: 1px solid var(--line); padding: 0 2px; font-size: 10px; }.rail-item:last-child { border-bottom: 0; }.rail-num { width: 22px; }.rail-glyph { margin-left: auto; }
  .section { padding-top: 69px; padding-bottom: 73px; }.section-intro { display: block; margin-bottom: 27px; }.section-intro h2, .lab-heading h2 { margin-top: 18px; font-size: clamp(37px,10vw,49px); }.section-intro-aside { width: 100%; max-width: 460px; margin-top: 19px; }.section-intro-aside p { margin-bottom: 12px; font-size: 11px; }
  .feature-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }.feature-card-main, .feature-card-responsive, .feature-card-library, .feature-card-pages { grid-column: 1; }.feature-card-copy { padding: 19px 17px 20px; }.feature-card-copy h3 { font-size: 17px; }.feature-card-copy p { font-size: 10px; }.mini-editor { margin: 10px 10px 0; min-height: 212px; grid-template-columns: 32% 68%; }.mini-editor-sidebar { padding: 11px 6px; }.mini-tool { gap: 4px; padding: 7px 4px; font-size: 7px; }.mini-tool > i { width: 11px; height: 11px; }.mini-canvas-page { height: 164px; padding: 9px; }.mini-canvas-title { font-size: 21px; }.responsive-illustration { min-height: 210px; padding-inline: 10px; }.responsive-stage { height: 198px; gap: 9px; }.screen-mobile { width: 82px; height: 146px; }.screen-tablet { width: min(235px, calc(100% - 100px)); height: 173px; }.screen-tablet .r-image { height: 103px; }.screen-tablet .r-title { font-size: 20px; }.library-illustration { padding: 17px 13px; min-height: 216px; }.library-options { gap: 7px; }.library-option { grid-template-columns: 33px 1fr; min-height: 69px; padding: 7px; gap: 2px 7px; }.lib-symbol { width: 33px; height: 33px; }.pages-illustration { min-height: 215px; padding: 24px 17px; }.page-tab { min-height: 41px; }
  .preview-lab-section { padding: 68px 0 73px; }.lab-heading { display: block; margin-bottom: 27px; }.lab-heading > p { max-width: 460px; margin-top: 18px; font-size: 10px; }.lab-console { grid-template-columns: 1fr; }.lab-controls { border-right: 0; border-bottom: 1px solid #3a4439; padding: 15px; }.lab-control-group + .lab-control-group { margin-top: 18px; }.lab-control-heading { margin-bottom: 9px; }.lab-template-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }.lab-template-button { min-height: 43px; gap: 7px; padding: 5px; }.template-mini-dot { width: 24px; height: 24px; }.lab-template-button b { font-size: 8px; }.lab-template-button small { font-size: 7px; }.lab-template-button > i { display: none; }.viewport-control-group { display: flex; align-items: center; gap: 12px; justify-content: space-between; }.viewport-control-group .lab-control-heading { flex: 0 0 auto; margin: 0; }.viewport-switch { width: min(100%, 275px); gap: 4px; }.viewport-switch button { min-height: 47px; }.viewport-switch svg { width: 14px; height: 14px; }.viewport-switch span { font-size: 6px; }.lab-control-bottom { margin-top: 15px; padding-top: 0; }.theme-toggle { min-height: 49px; padding: 7px 9px; }.theme-toggle-icon { width: 24px; height: 24px; }.lab-control-bottom p { display: none; }.lab-stage-wrap { padding: 9px 8px 8px; }.lab-stage-head, .lab-stage-footer { padding-inline: 4px; font-size: 6px; }.lab-stage { min-height: 385px; padding: 12px 8px; }.lab-page-preview { max-width: 100%; min-height: 330px; padding-inline: 12px; }.lab-page-nav { min-height: 37px; }.lab-logo { font-size: 12px; }.lab-page-navlinks { gap: 9px; font-size: 6px; }.lab-page-body { gap: 9px; padding-block: 23px 18px; }.lab-page-copy h3 { font-size: clamp(24px,7vw,37px); margin: 12px 0 9px; }.lab-page-kicker { font-size: 6px; letter-spacing: 1px; }.lab-page-copy p { font-size: 8px; margin-bottom: 13px; }.lab-page-cta { min-height: 24px; font-size: 7px; }.lab-page-image, .lab-page-image img { min-height: 170px; max-height: 205px; }.lab-console[data-viewport="tablet"] .lab-page-preview { width: 89%; min-height: 340px; }.lab-console[data-viewport="tablet"] .lab-page-copy h3 { font-size: clamp(22px,6vw,32px); }.lab-console[data-viewport="tablet"] .lab-page-image, .lab-console[data-viewport="tablet"] .lab-page-image img { min-height: 175px; }.lab-console[data-viewport="mobile"] .lab-page-preview { width: min(100%, 245px); min-height: 375px; padding-inline: 13px; }.lab-console[data-viewport="mobile"] .lab-page-nav { min-height: 38px; }.lab-console[data-viewport="mobile"] .lab-page-body { padding-block: 18px 13px; }.lab-console[data-viewport="mobile"] .lab-page-copy h3 { font-size: 29px; }.lab-console[data-viewport="mobile"] .lab-page-copy p { font-size: 8px; }.lab-console[data-viewport="mobile"] .lab-page-image, .lab-console[data-viewport="mobile"] .lab-page-image img { min-height: 125px; max-height: 125px; }.lab-page-bottom { min-height: 26px; font-size: 5px; }
  .templates-section { padding-top: 70px; padding-bottom: 73px; }.template-filters { gap: 4px; margin-bottom: 15px; padding-bottom: 12px; }.filter-button { min-height: 30px; padding-inline: 8px; font-size: 8px; }.filter-button span { font-size: 6px; }.template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.template-card-preview { height: 175px; }.template-card-preview > .preview-badge { left: 7px; top: 7px; padding: 5px 5px; font-size: 5px; }.thumb-site { inset: 30px 6px 6px; }.thumb-nav { height: 21px; padding-inline: 6px; font-size: 5px; }.thumb-nav span { font-size: 4px; }.thumb-noir-copy { left: 7px; top: 42px; }.thumb-noir-copy small, .thumb-lumen-content small, .thumb-harbor-content small, .thumb-paper-content small, .thumb-notebook-content small { font-size: 4px; margin-bottom: 6px; }.thumb-noir-copy b, .thumb-lumen-content b { font-size: 13px; }.thumb-noir-art { top: 42px; bottom: 17px; }.thumb-noir-foot { height: 17px; left: 7px; right: 7px; font-size: 4px; }.thumb-lumen-content, .thumb-harbor-content { top: 43px; left: 7px; }.thumb-lumen-content p, .thumb-harbor-content p { font-size: 5px; margin-top: 5px; }.thumb-lumen-content i, .thumb-harbor-content i, .thumb-paper-content i { font-size: 5px; margin-top: 7px; }.thumb-lumen-image, .thumb-harbor-image { top: 38px; bottom: 17px; }.thumb-harbor-content b { font-size: 12px; }.thumb-harbor-band { height: 17px; }.thumb-paper-content { top: 30px; width: 70%; }.thumb-avatar { width: 22px; height: 22px; font-size: 12px; margin-bottom: 4px; }.thumb-paper-content b { font-size: 11px; }.thumb-paper-content p { font-size: 5px; margin: 5px 0; }.thumb-paper-rule { bottom: 8px; }.thumb-bio { padding: 10px 6px; }.bio-spark { width: 30px; height: 30px; }.bio-person { width: 25px; height: 25px; margin: 4px 0; font-size: 13px; }.thumb-bio > b { font-size: 8px; }.thumb-bio > small { font-size: 5px; }.thumb-bio > p { font-size: 7px; margin: 5px 0 6px; }.bio-link { width: 100%; padding: 4px 5px; margin-bottom: 3px; font-size: 5px; }.thumb-notebook-content { top: 42px; left: 7px; right: 7px; }.thumb-notebook-content b { font-size: 12px; }.thumb-notebook-content p { font-size: 5px; margin: 5px 0; }.thumb-notebook-visual { top: 10px; height: 50px; }.thumb-notebook-footer { left: 7px; right: 7px; height: 14px; font-size: 4px; }.template-preview-action { opacity: 1; transform: none; right: 5px; bottom: 5px; padding: 5px 6px; font-size: 6px; gap: 5px; }.template-preview-action b { font-size: 10px; }.template-card-info { min-height: 94px; padding: 11px 9px 9px; gap: 5px; }.template-card-info h3 { font-size: 12px; margin-bottom: 5px; }.template-card-info p { font-size: 8px; line-height: 1.5; }.template-category-dot { width: 7px; height: 7px; }.template-card-foot { min-height: 32px; padding-inline: 8px; font-size: 5px; }.template-card-foot button { font-size: 7px; gap: 4px; }.template-card-foot button span { font-size: 10px; }.template-note { font-size: 8px; margin-top: 14px; }
  .workflow-section { padding: 70px 0 74px; }.workflow-wrap { gap: 32px; }.workflow-heading h2 { font-size: 43px; }.workflow-heading > p { font-size: 10px; margin-top: 18px; }.workflow-steps { grid-template-columns: 1fr; gap: 20px; }.workflow-step { display: grid; grid-template-columns: 75px minmax(0,1fr); grid-template-rows: auto auto 1fr; column-gap: 15px; align-items: start; }.workflow-num { grid-column: 1 / -1; }.workflow-art { grid-column: 1; grid-row: 2 / span 2; margin: 15px 0 0; height: 108px; }.workflow-step h3 { grid-column: 2; margin: 17px 0 6px; font-size: 13px; }.workflow-step > p { grid-column: 2; font-size: 9px; }.stack-sheet { width: 49px; height: 70px; top: 18px; left: calc(50% - 25px); }.sheet-front { padding: 7px; font-size: 8px; }.sheet-front em { font-size: 11px; }.sheet-front i { font-size: 15px; }.edit-selection { left: 9px; right: 18px; top: 43px; bottom: 15px; font-size: 6px; }.edit-line { left: 10px; right: 10px; height: 3px; }.edit-line-one { top: 20px; }.edit-line-two { top: 27px; right: 22px; }.edit-cursor { right: 7px; bottom: 13px; font-size: 13px; }.workflow-art-export { padding: 7px 4px; gap: 4px; }.export-file { grid-template-columns: 22px 1fr 9px; gap: 4px; min-height: 19px; padding: 2px 4px; font-size: 5px; }.export-file > span { height: 13px; font-size: 4px; }.export-zip { right: 4px; bottom: 4px; padding: 4px; font-size: 5px; }.export-zip span { font-size: 8px; }
  .export-section { padding-top: 71px; padding-bottom: 73px; gap: 30px; }.export-copy h2 { font-size: 43px; }.export-copy > p { font-size: 11px; margin-top: 19px; }.export-facts { gap: 12px; margin-top: 20px; }.export-facts > div { gap: 6px; }.fact-icon { width: 23px; height: 26px; }.export-facts b { font-size: 8px; }.export-facts small { font-size: 7px; }.honest-note { margin-top: 20px; padding-top: 13px; }.honest-note p { font-size: 8px; }.file-explorer-bar { min-height: 45px; padding-inline: 10px; font-size: 8px; gap: 7px; }.file-window-controls { gap: 3px; }.file-window-controls i { width: 5px; height: 5px; }.copy-structure { padding: 6px; font-size: 7px; gap: 4px; }.file-explorer-body { padding: 9px 9px 12px; }.file-row { min-height: 38px; gap: 7px; font-size: 8px; padding-inline: 7px; }.file-root { min-height: 36px; }.file-type { font-size: 6px; }.file-type-icon { width: 17px; height: 19px; font-size: 8px; }.folder-icon { width: 14px; height: 10px; }.file-explorer-status { padding-inline: 9px; font-size: 6px; min-height: 35px; }.export-decoration { font-size: 45px; right: 5px; }
  .scope-section { gap: 26px; padding-top: 4px; padding-bottom: 72px; }.scope-heading h2 { font-size: 42px; }.scope-heading > p { font-size: 10px; margin-top: 15px; }.scope-row { grid-template-columns: 1fr; gap: 0; padding: 9px 0; min-height: 0; font-size: 8px; }.scope-row span { min-height: 28px; }.scope-row-head { grid-template-columns: 1fr 1fr; font-size: 6px; padding: 7px 0; }.scope-row-head span:last-child { padding-left: 2px; }
  .faq-section { padding-top: 68px; padding-bottom: 75px; gap: 28px; }.faq-heading h2 { font-size: 43px; }.faq-heading > p { font-size: 10px; margin-top: 16px; }.faq-item summary { min-height: 58px; gap: 12px; padding: 14px 0; font-size: 10px; }.faq-plus { width: 21px; height: 21px; }.faq-plus::before, .faq-plus::after { top: 9px; left: 6px; }.faq-answer { padding-right: 25px; padding-bottom: 17px; font-size: 9px; }
  .closing-inner { grid-template-columns: 37px 1fr; gap: 15px; padding-top: 40px; padding-bottom: 75px; min-height: 0; }.closing-monogram img { width: 34px; height: 34px; }.closing-monogram span { font-size: 5px; letter-spacing: .5px; }.closing-copy .section-label { font-size: 7px; }.closing-copy h2 { font-size: clamp(31px,8.5vw,42px); margin-top: 18px; }.closing-copy > p { font-size: 9px; margin-top: 16px; }.closing-action { grid-column: 2; padding-top: 7px; flex-direction: row; align-items: center; gap: 15px; flex-wrap: wrap; }.closing-action .button { min-height: 41px; }.back-top { font-size: 8px; }.closing-rule { bottom: 45px; }.closing-index { bottom: 22px; font-size: 6px; }
  .site-footer { grid-template-columns: 1fr auto; gap: 8px 12px; padding-top: 18px; padding-bottom: 20px; }.footer-brand .brand-name { font-size: 13px; }.footer-brand img { width: 26px; height: 26px; }.site-footer > p { grid-column: 1 / -1; grid-row: 2; font-size: 8px; }.footer-links { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; gap: 15px; font-size: 8px; }.footer-links span { flex-basis: 100%; font-size: 7px; margin-top: 5px; }
}
@media (max-width: 390px) {
  .shell, .nav-wrap, .capability-inner, .preview-lab-wrap { width: calc(100% - 28px); }
  .hero h1 { font-size: 47px; }.hero-visual { padding-inline: 8px; }.preview-app-foot { gap: 4px; }.sample-copy h2 { font-size: 19px; }.sample-hero-content { grid-template-columns: 1fr .58fr; }.sample-image-wrap img { height: 102px; }.toolbar-save { display: none; }.template-grid { gap: 8px; }.template-card-preview { height: 158px; }.template-card-info p { font-size: 7px; }.filter-button { padding-inline: 6px; }.viewport-control-group { align-items: flex-start; flex-direction: column; gap: 8px; }.viewport-switch { width: 100%; }.lab-stage { min-height: 345px; }.lab-console[data-viewport="tablet"] .lab-page-preview { width: 100%; }.lab-console[data-viewport="tablet"] .lab-page-copy h3 { font-size: 22px; }.lab-stage-head, .lab-stage-footer { font-size: 5px; }.lab-stage-head > span:first-child { letter-spacing: .45px; }.file-explorer-status { flex-wrap: wrap; padding-block: 7px; }.file-explorer-status span:last-child { margin-left: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Public distribution section */
.hero-download-note { margin: 12px 0 0; color: #7a8276; font-size: 10px; line-height: 1.6; }
.download-section { padding-top: 0; padding-bottom: 104px; scroll-margin-top: 88px; }
.download-panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(330px, 1.08fr); gap: clamp(34px, 6vw, 80px); padding: clamp(28px, 5vw, 64px); background: #1b261e; color: #f9f8f1; position: relative; overflow: hidden; }
.download-panel::after { content: "SB"; position: absolute; right: -14px; top: -76px; font-size: clamp(180px, 28vw, 340px); line-height: 1; font-weight: 850; letter-spacing: -.12em; color: rgba(255,255,255,.025); pointer-events: none; }
.download-copy, .download-guide { position: relative; z-index: 1; min-width: 0; }
.download-copy .section-label { color: #c2c9bd; }
.download-copy h2 { margin: 24px 0 20px; font-size: clamp(39px, 4.2vw, 56px); line-height: 1.02; font-weight: 650; letter-spacing: -.068em; }
.download-copy h2 em { color: #f58f72; font-family: var(--serif); font-weight: 400; letter-spacing: -.06em; }
.download-copy > p:not(.download-small-note) { max-width: 440px; color: #c4cbc0; font-size: 13px; line-height: 1.85; margin: 0 0 25px; }
.button-paper { background: #f7f6f1; color: #17211b; }
.button-paper span { color: #df5b3b; }
.button-paper:hover { background: #d7ef91; color: #17211b; }
.download-small-note { max-width: 440px; margin: 16px 0 0; color: #aeb9ac; font-size: 10px; line-height: 1.75; }
.download-guide { align-self: center; background: #26332a; border: 1px solid rgba(245,248,239,.13); }
.download-guide-head { display: flex; align-items: center; gap: 12px; padding: 17px 19px; border-bottom: 1px solid rgba(245,248,239,.12); }
.download-drive-mark { width: 34px; height: 34px; display: grid; place-items: center; background: #d7ef91; color: #1b261e; font-size: 19px; border-radius: 3px; }
.download-guide-head > div { display: grid; gap: 4px; }
.download-guide-head b { font-size: 12px; letter-spacing: -.01em; }
.download-guide-head small { color: #aeb9ac; font-size: 10px; }
.download-file-type { margin-left: auto; padding: 6px 8px; color: #e8eddf; border: 1px solid rgba(245,248,239,.18); font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.download-step { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding: 18px 19px; border-bottom: 1px solid rgba(245,248,239,.1); }
.download-step > span { color: #f58f72; font-size: 10px; font-weight: 850; font-variant-numeric: tabular-nums; }
.download-step b { display: block; margin: 0 0 5px; font-size: 12px; }
.download-step p { margin: 0; color: #b6c0b4; font-size: 10px; line-height: 1.7; }
.download-safety { display: flex; gap: 10px; padding: 14px 19px 16px; background: rgba(0,0,0,.11); }
.download-safety > span { flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center; background: #f58f72; color: #1b261e; border-radius: 50%; font-size: 10px; font-weight: 850; }
.download-safety p { margin: 0; color: #c4cbc0; font-size: 9px; line-height: 1.75; }

/* Standalone legal / not-found pages */
.legal-body { min-height: 100vh; }
.legal-header { border-bottom: 1px solid var(--line); background: rgba(247,246,241,.95); }
.legal-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.legal-header-actions { display: flex; align-items: center; gap: 18px; color: #596558; font-size: 11px; font-weight: 700; }
.legal-header-actions a:not(.button) { padding: 10px 0; }
.legal-main { width: min(100% - 48px, 780px); margin: 0 auto; padding: clamp(54px, 8vw, 100px) 0 90px; }
.legal-eyebrow { display: flex; align-items: center; gap: 10px; color: #6b7668; font-size: 10px; letter-spacing: .13em; font-weight: 800; text-transform: uppercase; }
.legal-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.legal-main h1 { margin: 22px 0 18px; max-width: 760px; font-size: clamp(42px, 7vw, 72px); line-height: .98; letter-spacing: -.075em; font-weight: 680; }
.legal-lead { max-width: 670px; color: #5f695d; font-size: 16px; line-height: 1.85; }
.legal-effective { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 40px; padding: 8px 10px; background: #eeece4; color: #687263; font-size: 10px; }
.legal-content { border-top: 1px solid var(--line-strong); }
.legal-content section { padding: 26px 0; border-bottom: 1px solid var(--line); }
.legal-content h2 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.04em; }
.legal-content p, .legal-content li { color: #566153; font-size: 13px; line-height: 1.9; }
.legal-content p { margin: 8px 0; }
.legal-content ul { padding-left: 20px; margin: 8px 0; }
.legal-content a { color: #b84a32; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-callout { margin: 24px 0 0; padding: 16px 18px; background: #eeece4; color: #5f695d; font-size: 11px; line-height: 1.8; }
.legal-footer { border-top: 1px solid var(--line); padding: 22px 0 30px; color: #6b7468; font-size: 10px; }
.legal-footer-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.not-found-wrap { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 40px 20px 72px; }
.not-found-card { width: min(100%, 620px); padding: clamp(28px, 6vw, 58px); border: 1px solid var(--line); background: #fffefa; }
.not-found-code { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.not-found-card h1 { margin: 17px 0 15px; font-size: clamp(42px, 8vw, 68px); line-height: 1; letter-spacing: -.075em; }
.not-found-card p { max-width: 480px; color: #667065; font-size: 14px; line-height: 1.8; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-top: 24px; }

@media (max-width: 850px) {
  .download-section { padding-bottom: 72px; }
  .download-panel { grid-template-columns: 1fr; gap: 30px; padding: clamp(24px, 5.5vw, 42px); }
  .download-copy h2 { font-size: clamp(39px, 7vw, 50px); }
}
@media (max-width: 680px) {
  .hero-download-note { max-width: 320px; font-size: 9px; }
  .download-section { padding-top: 0; padding-bottom: 72px; }
  .download-panel { gap: 24px; padding: 25px 18px; }
  .download-copy h2 { font-size: clamp(37px, 10vw, 47px); }
  .download-copy > p:not(.download-small-note) { font-size: 12px; }
  .download-guide-head, .download-step { padding-inline: 13px; }
  .download-safety { padding-inline: 13px; }
  .legal-header-inner { min-height: 68px; }
  .legal-header .brand-name { font-size: 15px; }
  .legal-header .brand img { width: 30px; height: 30px; }
  .legal-header-actions { gap: 10px; font-size: 9px; }
  .legal-header-actions .button { min-height: 38px; padding-inline: 10px; gap: 7px; font-size: 9px; }
  .legal-main { width: calc(100% - 34px); padding-top: 52px; }
  .legal-main h1 { font-size: clamp(42px, 12vw, 58px); }
  .legal-lead { font-size: 14px; }
  .legal-content h2 { font-size: 17px; }
  .legal-content p, .legal-content li { font-size: 12px; }
  .legal-footer-inner { flex-direction: column; gap: 7px; }
}