@font-face { font-family: "Manrope"; src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --ink: #111311; --ink-deep: #0b0d0b; --paper: #f8f6ef; --paper-deep: #eeeade; --surface: #fffefa;
  --green: #b7f34a; --green-deep: #a7e536; --muted: #5b625c; --line: #dedacf;
  --dark-line: rgba(246, 244, 236, 0.16); --on-dark: #f6f4ec; --on-dark-muted: #aeb5ad;
  --font-display: "Manrope", system-ui, sans-serif; --font-ui: "DM Sans", system-ui, sans-serif;
  --fs-h1: clamp(2.75rem, 1.87rem + 3.75vw, 5.25rem); --fs-h2-lg: clamp(2rem, 1.54rem + 1.97vw, 3.3125rem);
  --fs-h2: clamp(1.75rem, 1.53rem + 0.94vw, 2.375rem); --fs-h3: clamp(1.3125rem, 1.25rem + 0.28vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1.04rem + 0.09vw, 1.125rem); --fs-lead: clamp(1.1875rem, 1.08rem + 0.47vw, 1.5rem); --fs-small: 0.875rem;
  --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem; --space-md: 1.5rem;
  --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem;
  --width: 75rem; --gutter: clamp(1rem, .6rem + 1.7vw, 2.5rem); --section-space: clamp(4rem, 2.3rem + 7.2vw, 8rem);
  --radius: 6px; --radius-lg: 14px; --header-height: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-display); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; } a { color: inherit; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { margin-bottom: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: .98; letter-spacing: -.05em; } h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.015em; } p { margin-bottom: var(--space-md); max-width: 66ch; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; } [id] { scroll-margin-top: calc(var(--header-height) + 1rem); }
.symbol-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.container { width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-space); }
.skip-link { position: fixed; top: var(--space-xs); left: var(--space-xs); z-index: 100; padding: var(--space-2xs) var(--space-sm); background: var(--green); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; text-decoration: none; transform: translateY(calc(-100% - 2rem)); transition: transform 150ms ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { --page-progress:0; position: sticky; top: 0; z-index: 30; min-height: var(--header-height); background: rgba(11,13,11,.9); color: var(--on-dark); border-bottom: 1px solid var(--dark-line); backdrop-filter: blur(18px); transition:background-color 180ms ease; }
.site-header[data-scrolled] { background:rgba(11,13,11,.97); }
.site-header::after { content:"";position:absolute;right:0;bottom:-1px;left:0;height:1px;background:var(--green);transform:scaleX(var(--page-progress));transform-origin:left; }
.header-inner { min-height: var(--header-height); }
.header-shell { width:100%; min-height:var(--header-height); display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.brand svg { width: 17px; height: 23px; color: var(--green); fill: currentColor; }
.nav { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); }
.nav a, .site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--on-dark-muted); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 500; text-decoration: none; }
.nav a { position:relative; }
.nav a::after { content:"";position:absolute;right:0;bottom:7px;left:0;height:1px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 180ms ease; }
.nav a:hover, .nav a[aria-current="location"], .site-footer nav a:hover { color: var(--on-dark); }
.nav a:hover::after,.nav a[aria-current="location"]::after { transform:scaleX(1); }
.nav .nav-cta { display: none; }
.header-cta { min-height: 42px !important; padding: var(--space-2xs) var(--space-md) !important; font-size: var(--fs-small) !important; }
.menu-button { display: none; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; border: 1px solid var(--dark-line); border-radius: var(--radius); background: transparent; color: var(--on-dark); cursor: pointer; }
.menu-button svg { width: 20px; height: 20px; } .menu-button .close-icon { display: none; } .menu-button[aria-expanded="true"] .menu-icon { display: none; } .menu-button[aria-expanded="true"] .close-icon { display: block; }

.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); padding: var(--space-sm) var(--space-lg); border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.button svg, .text-link svg { width: 19px; height: 19px; } .button:not(:disabled):hover { transform: translateY(-1px); }
.button--green { background: var(--green); color: var(--ink); } .button--green:not(:disabled):hover { background: var(--green-deep); }
.button--dark { border-color: var(--dark-line); color: var(--on-dark); } .button--dark:hover { border-color: rgba(246,244,236,.42); background: rgba(246,244,236,.08); }
.button--ink { background: var(--ink); color: var(--paper); } .button--ink:not(:disabled):hover { background: #000; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.hero {
  position: relative; overflow: hidden; padding-bottom: 0; color: var(--on-dark);
  background-color: var(--ink-deep);
  background-image:
    linear-gradient(90deg, rgba(11,13,11,.98) 0%, rgba(11,13,11,.94) 38%, rgba(11,13,11,.68) 66%, rgba(11,13,11,.42) 100%),
    url("images/pagecraft-hero-materials-v2.webp");
  background-position: center, center right;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-inner { position: relative; z-index: 1; padding-top: clamp(4.5rem, 2.8rem + 5vw, 8rem); padding-bottom: 0; }
.hero-top { position:relative;display:block; }
.hero-copy { max-width: 55rem; } .hero h1 { max-width: 13ch; } .hero h1 em { color: var(--green); font-style: normal; }
.hero-lead { margin: var(--space-lg) 0 0; max-width: 47ch; color: var(--on-dark-muted); font-size: var(--fs-lead); line-height: 1.5; }
.hero .button-row { margin-top: var(--space-lg); } .hero-note { margin: var(--space-sm) 0 0; color: var(--on-dark-muted); font-family: var(--font-ui); font-size: var(--fs-small); }

.editor { width: min(88vw,90rem); margin-top: clamp(3rem, 1.5rem + 5vw, 6rem); margin-left: 50%; border: 1px solid rgba(183,243,74,.34); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background: #171a17; box-shadow: 0 42px 120px -42px rgba(0,0,0,.9),0 0 80px -54px rgba(183,243,74,.7); transform: translateX(-50%); }
.editor-topbar { min-height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: var(--space-sm); border-bottom: 1px solid var(--dark-line); }
.editor-brand { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 700; } .editor-brand svg { width: 11px; height: 15px; fill: var(--green); }
.publish-chip { justify-self: end; padding: 5px 14px; border-radius: 4px; background: var(--green); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; }
.editor-body { min-height: 460px; display: grid; grid-template-columns: 52px 175px minmax(0,1fr) 190px; }
.editor-rail, .editor-panel, .inspector { border-right: 1px solid var(--dark-line); background: #121512; }
.editor-rail { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: var(--space-md); }
.rail-dot { width: 17px; height: 17px; border: 1px solid rgba(246,244,236,.26); border-radius: 4px; } .rail-dot.active { border-color: var(--green); box-shadow: inset 0 0 0 4px #121512; background: var(--green); }
.editor-panel, .inspector { padding: var(--space-md) var(--space-sm); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--on-dark-muted); }
.editor-panel strong, .inspector strong { display: block; margin-bottom: var(--space-sm); color: var(--on-dark); } .panel-row { display: block; padding: 6px 8px; border-radius: 4px; }
.panel-row.selected { background: rgba(183,243,74,.12); color: var(--on-dark); } .panel-row.inset { padding-left: var(--space-md); } .editor-panel > i { display: block; height: 1px; margin: var(--space-md) 0; background: var(--dark-line); }
.editor-canvas { display: grid; place-items: center; padding: clamp(1rem,2.5vw,2.5rem); background: #232723; overflow: hidden; }
.canvas-page { position: relative; width: min(100%,620px); min-width: 430px; aspect-ratio: 1.45; overflow: hidden; background: #f1eee8; color: #1d211e; box-shadow: 0 20px 55px rgba(0,0,0,.3); }
.canvas-nav { height: 14%; display: flex; align-items: center; justify-content: space-between; padding-inline: 4%; font-family: var(--font-ui); font-size: var(--fs-small); }
.northhouse-logo { width: clamp(7rem,12vw,10rem); height: auto; display: block; }
.northhouse-logo--canvas { width: clamp(5.5rem,9vw,7.25rem); }
.canvas-hero { height: 86%; display: grid; grid-template-columns: 1fr 1fr; } .canvas-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 8%; }
.canvas-copy small { font-family: var(--font-ui); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; } .canvas-copy strong { margin-top: 6%; font-size: 38px; line-height: .98; letter-spacing: -.04em; }
.canvas-copy > span { margin-top: 7%; max-width: 26ch; font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1.5; color: #5a615b; } .canvas-copy > i { margin-top: 8%; padding: 8px 12px; border-radius: 3px; background: #202621; color: white; font-family: var(--font-ui); font-size: var(--fs-small); font-style: normal; }
.canvas-art { position: relative; overflow: hidden; background: #afb7ac; }
.canvas-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 61% center; }
.selection-outline { position: absolute; inset: 14% 49.3% 0 0; border: 1.5px solid #5f83ff; pointer-events: none; } .selection-outline > span { position: absolute; top: -25px; left: -1px; padding: 2px 6px; background: #5f83ff; color: white; font-family: var(--font-ui); font-size: var(--fs-small); }
.selection-outline i { position: absolute; width: 6px; height: 6px; background: white; border: 1px solid #5f83ff; } .selection-outline i:nth-of-type(1) { top: -4px; left: -4px; } .selection-outline i:nth-of-type(2) { top: -4px; right: -4px; } .selection-outline i:nth-of-type(3) { bottom: -4px; left: -4px; } .selection-outline i:nth-of-type(4) { bottom: -4px; right: -4px; }
.editor .canvas-page { transition:width .5s cubic-bezier(.2,.7,.2,1),aspect-ratio .5s cubic-bezier(.2,.7,.2,1); }
.editor[data-preview="tablet"] .canvas-page { width:min(78%,31rem);min-width:26rem;aspect-ratio:.82; }
.editor[data-preview="mobile"] .canvas-page { width:min(48%,20rem);min-width:18rem;aspect-ratio:.58; }
.editor[data-preview="tablet"] .canvas-hero,.editor[data-preview="mobile"] .canvas-hero { grid-template-columns:1fr; }
.editor[data-preview="tablet"] .canvas-art { min-height:42%; }
.editor[data-preview="mobile"] .canvas-art { display:none; }
.editor[data-preview="tablet"] .selection-outline,.editor[data-preview="mobile"] .selection-outline { inset:14% 0 0; }
.inspector { border-right: 0; border-left: 1px solid var(--dark-line); } .inspector > span { display: block; margin-top: var(--space-sm); } .inspector > div { display: flex; gap: 6px; }
.control { display: inline-block; width: 44px; height: 25px; margin-top: 5px; border: 1px solid var(--dark-line); border-radius: 4px; background: rgba(246,244,236,.05); } .control.wide { display: block; width: 100%; } .swatch { display: block; width: 100%; height: 25px; margin-top: 5px; border-radius: 4px; background: var(--paper-deep); }

.direct-edit { position: relative; overflow: hidden; background: #171c18; color: var(--on-dark); border-top: 1px solid rgba(183,243,74,.12); }
.direct-edit-stage { display: grid; gap: var(--space-2xl); }
.direct-edit-heading { max-width: 48rem; }
.direct-edit-heading h2 { max-width: 17ch; font-size: var(--fs-h2-lg); line-height: 1.02; letter-spacing: -.035em; }
.direct-edit-heading p { max-width: 46ch; margin: var(--space-sm) 0 0; color: var(--on-dark-muted); font-family: var(--font-ui); }
.type-canvas { position: relative; min-height: 34rem; display: grid; align-content: center; padding: clamp(3rem,7vw,6.5rem); border: 1.5px solid #5f83ff; background: #ebe8e0; color: var(--ink); }
.type-selection-label { position: absolute; top: 0; left: -1px; padding: .4rem .65rem; background: #5f83ff; color: white; font-family: var(--font-ui); font-size: var(--fs-small); }
.type-canvas > strong { max-width: 13ch; font-size: clamp(3.8rem,8vw,7.5rem); line-height: .86; letter-spacing: -.04em; }
.type-handle { position: absolute; width: 10px; height: 10px; border: 1px solid #5f83ff; background: white; }
.type-handle-one { top: -5px; left: -5px; } .type-handle-two { top: -5px; right: -5px; } .type-handle-three { bottom: -5px; left: -5px; } .type-handle-four { right: -5px; bottom: -5px; }
.type-controls { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; display: grid; grid-template-columns: repeat(4,1fr); background: #111511; color: var(--on-dark); }
.type-controls div { min-height: 76px; display: grid; align-content: center; gap: .2rem; padding-inline: var(--space-lg); }
.type-controls div + div { border-left: 1px solid var(--dark-line); }
.type-controls dt { color: var(--on-dark-muted); font-family: var(--font-ui); font-size: .75rem; }
.type-controls dd { margin: 0; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; }

.framework-ready [data-motion-item] { opacity:0; transform:translateY(16px); transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1); transition-delay:var(--motion-delay,0ms); }
.framework-ready [data-motion-item="media"] { transform:translateY(22px) scale(.988); }
.framework-ready [data-motion-item][data-motion-visible="true"] { opacity:1; transform:none; }
.framework-ready .hero-copy > * { animation:hero-copy-in .7s both cubic-bezier(.2,.7,.2,1); }
.framework-ready .hero-copy > *:nth-child(2) { animation-delay:.08s; }
.framework-ready .hero-copy > *:nth-child(3) { animation-delay:.16s; }
.framework-ready .hero-copy > *:nth-child(4) { animation-delay:.22s; }
@keyframes hero-copy-in { from { opacity:0;transform:translateY(24px); } to { opacity:1;transform:none; } }
@keyframes hero-editor-in { from { opacity:0;transform:translate(-50%,42px) scale(.975); } to { opacity:1;transform:translate(-50%,0) scale(1); } }
@media (min-width:40.01rem) { .framework-ready .hero .editor { animation:hero-editor-in .9s .18s both cubic-bezier(.16,.78,.25,1); } }

.fast-start { overflow: hidden; background: #dfe5d8; color: var(--ink); }
.fast-start-layout { width: min(80vw,90rem); max-width: none; padding-inline: 0; display: grid; grid-template-columns: minmax(20rem,.72fr) minmax(34rem,1.28fr); gap: clamp(3rem,8vw,7rem); align-items: center; }
.fast-start-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.fast-start-copy h2 { max-width: 12ch; font-size: var(--fs-h2-lg); line-height: 1.03; letter-spacing: -.045em; }
.fast-start-copy > p:first-of-type { max-width: 37ch; margin: var(--space-sm) 0 0; color: var(--muted); font-family: var(--font-ui); }
.fast-start-cta { margin-top: var(--space-xl); }
.start-preview { min-height: 39rem; display: grid; grid-template-rows: auto 1fr auto; background: #f4f0e8; box-shadow: 0 36px 70px -48px rgba(17,19,17,.65); transform: rotate(.65deg); transform-origin: center; }
.start-preview-bar, .start-preview-footer { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-inline: clamp(1.25rem,3vw,2.5rem); font-family: var(--font-ui); font-size: var(--fs-small); }
.start-preview-body { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 0; }
.start-preview-body > div { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-block: clamp(2rem,4vw,4rem); padding-inline: clamp(1.25rem,3vw,2.5rem); background: #ebece7; }
.start-preview-body small { font-family: var(--font-ui); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .07em; }
.start-preview-body strong { margin-top: 1.125rem; max-width: 9ch; font-size: 46px; line-height: .94; letter-spacing: -.04em; }
.start-preview-body span { margin-top: 1.25rem; max-width: 28ch; color: var(--muted); font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1.55; }
.start-preview-body > figure { position: relative; z-index: 1; min-width: 0; margin: 0; display: grid; align-content: center; gap: .7rem; overflow: visible; padding: clamp(.75rem,1.5vw,1.25rem); background: #cbd2c7; }
.start-preview-body > figure img { width: calc(100% + clamp(2rem,4vw,3.25rem)); max-width: none; margin-left: calc(-1 * clamp(2rem,4vw,3.25rem)); aspect-ratio: 4/3; display: block; object-fit: cover; }
.start-preview-body > figure figcaption { color: var(--muted); font-family: var(--font-ui); font-size: .72rem; }
.start-preview-footer { border-top: 1px solid var(--line); }

.section-heading { max-width: 45rem; margin-bottom: var(--space-2xl); } .section-heading h2 { max-width: 20ch; }
.section-heading > p:last-child, .capability-intro > p:last-child { margin: var(--space-sm) 0 0; color: var(--muted); } .section-label { margin: 0 0 var(--space-xs); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; }
.process { list-style: none; margin: 0; padding: 0 0 clamp(4rem,10vh,8rem); }
.process li { --stack-index: 0; position: sticky; top: calc(var(--header-height) + 1.5rem + (var(--stack-index) * 1.35rem)); min-height: clamp(13rem,22vw,17rem); display: grid; grid-template-columns: 7rem minmax(15rem,.8fr) minmax(0,1.2fr); gap: clamp(1.5rem,4vw,4rem); align-items: center; margin-bottom: clamp(.85rem,1.8vh,1.5rem); padding: clamp(2rem,4vw,4rem); border: 1px solid rgba(246,244,236,.2); background: rgba(13,17,14,.96); box-shadow: 0 26px 70px -42px rgba(0,0,0,.9); backdrop-filter: blur(12px); transition: border-color 260ms ease, background-color 260ms ease, transform 260ms ease; }
.process li:nth-child(2) { --stack-index: 1; background: rgba(17,22,18,.97); }
.process li:nth-child(3) { --stack-index: 2; background: rgba(20,25,21,.98); }
.process li:nth-child(4) { --stack-index: 3; margin-bottom: 0; background: #171d18; }
.process li > div { display: contents; }
.process-number { color: var(--on-dark-muted); font-family: var(--font-display); font-size: clamp(3.5rem,7vw,7rem); font-weight: 500; line-height: .75; letter-spacing: -.04em; transition: color 220ms ease; }
.process li.is-current { border-color: rgba(183,243,74,.72); }
.process li.is-current .process-number { color: var(--green); }
.process h3 { grid-column: 2; margin: 0; font-size: clamp(1.5rem,2.4vw,2.5rem); line-height: 1.04; }
.process p { grid-column: 3; margin: 0; max-width: 48ch; color: var(--on-dark-muted); font-size: 1rem; line-height: 1.6; }
.process.motion-ready li { opacity: .55; transform: translateY(1rem) scale(.985); }
.process.motion-ready li.is-visible, .process.motion-ready li.is-current { opacity: 1; transform: none; }

.capabilities {
  background-color: var(--paper-deep);
  background-image:
    linear-gradient(90deg, rgba(238,234,222,.97) 0%, rgba(238,234,222,.91) 45%, rgba(238,234,222,.74) 100%),
    url("images/pagecraft-paper-system.webp");
  background-position: center, center right;
  background-repeat: no-repeat;
  background-size: cover;
}
.capability-layout { width: min(80vw,90rem); max-width: none; padding-inline: 0; }
.capability-intro { max-width: 58rem; margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.capability-intro h2 { max-width: 17ch; }
.capability-intro > p:last-child { max-width: 42ch; margin: var(--space-sm) 0 0; }
.capability-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: rgba(17,19,17,.22); border: 1px solid rgba(17,19,17,.22); }
.capability-card { position:relative; display: grid; grid-template-rows: minmax(18rem,25vw) auto; min-width: 0; background: var(--paper); overflow: hidden; }
.capability-card::before { content:"";position:absolute;z-index:3;top:0;right:0;left:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform 360ms cubic-bezier(.2,.75,.2,1); }
.capability-card:hover::before { transform:scaleX(1); }
.capability-card-media { position: relative; min-height: 0; margin: 0; overflow: hidden; background: #111511; }
.capability-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(5,9,7,.18)); pointer-events:none; }
.capability-card-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.04); transform:scale(1.005); transition:transform 700ms cubic-bezier(.2,.75,.2,1),filter 400ms ease; }
.capability-card:hover .capability-card-media img { transform:scale(1.018); filter:saturate(.9) contrast(1.05); }
.capability-card-copy { display:grid; grid-template-columns:1fr; gap:var(--space-xs); min-height:13rem; padding:clamp(1.5rem,3vw,2.5rem); align-content:start; text-align:left; }
.capability-card-copy > span { grid-column:1/-1; color:#3f6500; font-family:var(--font-ui); font-size:.72rem; font-weight:650; letter-spacing:.07em; text-transform:uppercase; }
.capability-card-copy h3 { max-width:18ch; margin:0; font-size:32px; line-height:1.08; letter-spacing:-.03em; }
.capability-card-copy p { max-width:52ch; margin:.2rem 0 0; color:var(--muted); font-family:var(--font-ui); font-size:18px; line-height:1.55; }
.capability-card--populate .capability-card-media img,.capability-card--review .capability-card-media img { filter:saturate(.72) brightness(.96); }
.capability-mini-editor,.capability-media-library,.capability-responsive-editor,.capability-review { position:absolute; z-index:1; inset:10% 8%; overflow:hidden; border:1px solid rgba(246,244,236,.25); background:#0f1515; box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.3); color:#f6f4ec; font-family:var(--font-ui); }
.capability-mini-editor header,.capability-media-library header,.capability-responsive-editor header,.capability-review header { min-height:2.7rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem .75rem; border-bottom:1px solid rgba(246,244,236,.18); font-size:.68rem; }
.capability-mini-editor header b { display:flex; align-items:center; gap:.35rem; }.capability-mini-editor header svg{width:.65rem;height:.9rem;fill:var(--green);color:var(--green)}.capability-mini-editor header>span,.capability-media-library header>span{padding:.38rem .55rem;background:var(--green);color:var(--ink);font-weight:650}
.mini-editor-body { height:calc(100% - 2.7rem); display:grid; grid-template-columns:26% 1fr; }.mini-editor-body aside{display:grid;align-content:start;gap:.2rem;padding:.85rem .65rem;border-right:1px solid rgba(246,244,236,.16);font-size:.62rem;color:var(--on-dark-muted)}.mini-editor-body aside small{margin-bottom:.4rem;color:var(--on-dark);font-weight:650}.mini-editor-body aside i{padding:.35rem .45rem;font-style:normal}.mini-editor-body aside .active{background:rgba(183,243,74,.17);color:var(--on-dark)}
.mini-page { position:relative; margin:1rem; padding:1.35rem; overflow:hidden; background:var(--paper); color:var(--ink); }.mini-page small{display:block;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase}.mini-page strong{position:relative;z-index:2;display:block;max-width:8ch;margin-top:2.65rem;font:700 38px/.94 var(--font-display);letter-spacing:-.04em}.mini-page em{position:absolute;right:-4%;bottom:-20%;width:43%;aspect-ratio:1;border-radius:50%;background:var(--green)}.mini-page>span{position:absolute;z-index:3;top:20%;right:1.35rem;bottom:10%;left:1.35rem;border:1.5px solid #5f83ff;color:transparent;pointer-events:none}.mini-page>span::before{content:"Hero / Heading";position:absolute;left:-1.5px;top:-1.5px;transform:translateY(-100%);padding:.3rem .45rem;background:#5f83ff;color:white;font-size:.55rem}
.capability-media-library { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; inset:7% 8%; background:#f3f4f3;color:var(--ink);border-color:rgba(17,19,17,.26); }.capability-media-library header{border-color:rgba(17,19,17,.18)}.media-toolbar{display:flex;align-items:center;gap:.35rem;padding:.55rem .7rem;border-bottom:1px solid rgba(17,19,17,.14);font-size:.55rem}.media-toolbar i{padding:.32rem .42rem;border:1px solid rgba(17,19,17,.15);font-style:normal}.media-toolbar em{margin-left:auto;color:var(--muted);font-style:normal}.media-grid{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:.45rem;padding:.7rem}.media-grid img{width:100%;height:100%;min-width:0;min-height:0;display:block;object-fit:cover;border:1px solid rgba(17,19,17,.15);filter:none;transform:none}.capability-card:hover .media-grid img{filter:none;transform:none}.capability-media-library footer{min-height:2.35rem;display:flex;align-items:center;justify-content:space-between;padding:.4rem .7rem;border-top:1px solid rgba(17,19,17,.14);font-size:.58rem}.capability-media-library footer b{color:#3f6500}
.capability-responsive-editor header nav{display:flex;gap:.25rem}.capability-responsive-editor header nav>*{padding:.3rem .45rem;font-style:normal;font-weight:500}.capability-responsive-editor header nav b{background:var(--green);color:var(--ink)}.responsive-stage{height:calc(100% - 2.7rem);display:grid;grid-template-columns:1fr 26%;background:#1a2020}.responsive-page{position:relative;margin:1rem;padding:1.2rem;background:var(--paper);color:var(--ink);overflow:hidden}.capability-card .responsive-page .northhouse-logo--responsive{position:relative;z-index:1;width:5.6rem;height:auto;display:block;object-fit:contain;filter:none;transform:none;transition:none}.capability-card:hover .responsive-page .northhouse-logo--responsive{filter:none;transform:none}.responsive-page strong{position:relative;z-index:1;display:block;max-width:9ch;margin-top:1rem;font:700 38px/.94 var(--font-display);letter-spacing:-.04em}.responsive-page em{position:absolute;right:-12%;bottom:-24%;width:55%;aspect-ratio:1;border-radius:50%;background:var(--green)}.responsive-stage aside{display:grid;align-content:start;gap:.35rem;padding:1rem .7rem;border-left:1px solid rgba(246,244,236,.14);font-size:.58rem}.responsive-stage aside span{margin-top:.35rem;color:var(--on-dark-muted)}
.capability-review { display:grid;grid-template-rows:auto 1fr auto;background:#f6f7f6;color:var(--ink);border-color:rgba(17,19,17,.26); }.capability-review header{display:block;padding:.65rem .8rem;border-color:rgba(17,19,17,.16)}.capability-review header div{display:flex;align-items:center;gap:.45rem}.capability-review header i{width:.5rem;height:.5rem;border-radius:50%;background:#d94941}.capability-review header b{font-size:.68rem}.capability-review header>span{display:block;margin-top:.2rem;color:var(--muted);font-size:.55rem}.capability-review ul{list-style:none;margin:0;padding:.1rem .8rem;display:grid;grid-template-rows:repeat(6,minmax(0,1fr));align-content:stretch}.capability-review li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;padding:.16rem 0;border-bottom:1px solid rgba(17,19,17,.13);font-size:.56rem}.capability-review li>i{width:.4rem;height:.4rem;border-radius:50%;background:#d5a424}.capability-review li>i.bad{background:#d94941}.capability-review li span small{display:block;margin-top:.06rem;color:var(--muted)}.capability-review li b{color:#3f6500;font-size:.53rem}.capability-review footer{padding:.42rem .8rem;color:var(--muted);font-size:.5rem;line-height:1.25}
.capability-delivery { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(2rem,6vw,6rem); align-items:center; min-height:22rem; margin-top:clamp(2rem,4vw,3.5rem); padding:clamp(2.5rem,5vw,5rem); background:var(--green); color:var(--ink); }
.capability-delivery > div { display:grid; gap:var(--space-sm); align-content:center; }
.capability-delivery h3 { max-width:20ch; margin:0; font-size:clamp(2.35rem,4vw,4rem); line-height:1.02; letter-spacing:-.04em; }
.capability-delivery p { max-width:48ch; margin:0; color:rgba(17,19,17,.72); font-family:var(--font-ui); font-size:var(--fs-body); line-height:1.6; }
.capability-delivery .button { align-self:center; white-space:nowrap; }

.native-wordpress { background: #e8e3d7; color: var(--ink); }
.native-wordpress-heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(22rem,.85fr); gap: clamp(3rem,8vw,7rem); align-items: start; margin-bottom: var(--space-2xl); }
.native-wordpress-heading h2 { max-width: 16ch; font-size: var(--fs-h2-lg); line-height: 1.02; letter-spacing: -.045em; }
.native-wordpress-heading > p { margin: 0; color: var(--muted); font-family: var(--font-ui); }
.wordpress-admin-stage { width: min(80vw,90rem); max-width: none; min-height: 34rem; display: grid; grid-template-columns: 12rem minmax(0,1fr); padding-inline: 0; background: #f7f7f5; box-shadow: 0 34px 75px -52px rgba(17,19,17,.75); }
.wordpress-admin-stage > aside { display: flex; flex-direction: column; gap: .2rem; padding: var(--space-lg) var(--space-sm); background: #1d2327; color: #c3c4c7; font-family: var(--font-ui); font-size: var(--fs-small); }
.wordpress-admin-stage > aside strong { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: var(--space-lg); }
.wordpress-admin-stage > aside strong img { width: 38px; height: 38px; display: block; object-fit: contain; }
.wordpress-admin-stage > aside span { padding: .6rem .75rem; }
.wordpress-admin-stage > aside span.active { background: #2271b1; color: white; }
.wordpress-admin-main { min-width: 0; display: grid; grid-template-rows: auto 1fr; color: #1d2327; }
.wordpress-admin-main > header { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-inline: var(--space-xl); border-bottom: 1px solid #dcdcde; }
.wordpress-admin-main > header span, .wordpress-admin-main > header strong { display: block; } .wordpress-admin-main > header span { color: #646970; font-family: var(--font-ui); font-size: var(--fs-small); } .wordpress-admin-main > header strong { font-size: 1.25rem; }
.wordpress-admin-main > header b { color: #237a35; font-family: var(--font-ui); font-size: var(--fs-small); }
.wordpress-release-view { display: grid; grid-template-columns: minmax(20rem,.8fr) minmax(24rem,1.2fr); gap: clamp(2rem,5vw,5rem); align-items: center; padding-block: clamp(2rem,4vw,4rem); padding-inline: var(--space-xl); }
.wordpress-release-copy h3 { max-width: 15ch; font-size: clamp(1.75rem,2.4vw,2.8rem); line-height: 1.04; letter-spacing: -.04em; }
.wordpress-release-copy > p { margin: var(--space-lg) 0 0; color: #50575e; font-family: var(--font-ui); font-size: 1rem; }
.wordpress-release-copy dl { margin: var(--space-xl) 0 0; }
.wordpress-release-copy dl div { display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: .7rem; border-top: 1px solid #dcdcde; font-family: var(--font-ui); font-size: var(--fs-small); }
.wordpress-release-copy dd { margin: 0; color: #237a35; font-weight: 600; }
.wordpress-page-preview { min-height: 22rem; overflow: hidden; display:grid;grid-template-rows:auto 1fr auto;background:#f6f3eb;border:1px solid #dcdcde; }
.wordpress-page-preview > header,.wordpress-page-preview > footer { min-height:3.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.25rem;font-family:var(--font-ui);font-size:.62rem; }
.wordpress-page-preview > header { border-bottom:1px solid #dedbd3; }.wordpress-page-preview > header img{width:7.8rem;height:auto}.wordpress-page-preview > header span{color:#50575e}
.wordpress-site-hero { min-height:0;display:grid;grid-template-columns:.9fr 1.1fr; }
.wordpress-site-hero > div { display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(1.25rem,2.5vw,2rem);background:#e8e9e4; }
.wordpress-site-hero small { font-family:var(--font-ui);font-size:.55rem;text-transform:uppercase;letter-spacing:.06em; }
.wordpress-site-hero strong { max-width:13ch;margin-top:.8rem;font-size:clamp(1.35rem,1.8vw,1.85rem);line-height:.98;letter-spacing:-.035em; }
.wordpress-site-hero span { max-width:24ch;margin-top:1rem;color:#5b625c;font-family:var(--font-ui);font-size:.65rem;line-height:1.45; }
.wordpress-site-hero > img { width:100%;height:100%;min-height:16rem;display:block;object-fit:cover; }
.wordpress-page-preview > footer { border-top:1px solid #dedbd3; }.wordpress-page-preview > footer b{color:#237a35}

.text-link { margin-top: var(--space-lg); display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--green); font-family: var(--font-ui); font-size: 1rem; font-weight: 600; text-underline-offset: 4px; }
.ownership { overflow: hidden; background: var(--ink-deep); color: var(--on-dark); }
.release-story { width: min(80vw,90rem); max-width: none; padding-inline: 0; }
.release-heading { max-width: 48rem; margin-bottom: var(--space-2xl); }
.release-heading h2 { max-width: 14ch; font-size: clamp(2.75rem,5vw,5rem); line-height: .96; letter-spacing: -.055em; }
.release-heading p { max-width: 48ch; margin: var(--space-sm) 0 0; color: var(--on-dark-muted); font-family: var(--font-ui); }
.release-theatre { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) 6.5rem minmax(18rem,.92fr); min-height: 34rem; border-block: 1px solid rgba(246,244,236,.24); }
.working-surface, .release-output { min-width: 0; }
.working-surface { display: grid; grid-template-rows: auto 1fr; padding: var(--space-lg); background: #182019; }
.surface-bar, .output-bar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); color: var(--on-dark-muted); font-family: var(--font-ui); font-size: var(--fs-small); }
.surface-bar span { display: inline-flex; align-items: center; gap: .45rem; color: var(--on-dark); font-weight: 600; } .surface-bar svg { width: 11px; height: 15px; fill: var(--green); }
.surface-bar b, .output-bar b { color: var(--green); font-size: inherit; }
.surface-page { position: relative; overflow: hidden; display: grid; align-content: center; padding: clamp(2rem,5vw,5rem); background: #f0ede6; color: var(--ink); }
.northhouse-logo--surface { position: relative; z-index: 1; width: clamp(7rem,11vw,9rem); }
.surface-page > strong { position: relative; z-index: 1; margin-top: var(--space-lg); max-width: 8ch; font-size: clamp(3rem,6vw,5.8rem); line-height: .88; letter-spacing: -.065em; }
.surface-page > i { position: absolute; width: 52%; aspect-ratio: 1; right: -8%; bottom: -28%; border-radius: 50%; background: var(--green); }
.release-switch { position: relative; display: grid; place-items: center; color: var(--ink); }
.release-switch::before { content: ""; position: absolute; inset: 0 50%; width: 1px; background: rgba(183,243,74,.45); }
.release-switch span { position: relative; z-index: 1; padding: .65rem .85rem; background: var(--green); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.release-switch i { position: absolute; top: 50%; left: 50%; width: 3.25rem; height: 3.25rem; border: 1px solid rgba(183,243,74,.55); transform: translate(-50%,-50%) rotate(45deg); animation: releasePulse 2.8s ease-in-out infinite; }
@keyframes releasePulse { 50% { width: 4.6rem; height: 4.6rem; opacity: .25; } }
.release-output { display: grid; grid-template-rows: auto 1fr auto; padding: var(--space-lg); background: #101410; }
.output-bar { border-bottom: 1px solid var(--dark-line); }
.file-tree { align-self: center; display: grid; gap: .7rem; padding-block: var(--space-xl); font-family: var(--font-ui); font-size: clamp(1rem,1.8vw,1.3rem); }
.file-tree span { display: block; } .file-tree span:not(:first-child) { color: var(--on-dark-muted); } .file-tree i { display: inline-block; width: 1.7rem; color: var(--green); font-style: normal; }
.release-output > p { margin: 0; padding-top: var(--space-lg); border-top: 1px solid var(--dark-line); }
.release-output > p strong, .release-output > p span { display: block; } .release-output > p strong { color: var(--green); } .release-output > p span { margin-top: .3rem; color: var(--on-dark-muted); font-family: var(--font-ui); font-size: var(--fs-small); }
.release-link { margin-top: var(--space-xl); }

.closing { background: var(--green); } .try-pagecraft { min-height: 26rem; display: grid; align-items: center; padding-block: 0; } .closing-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-xl); align-items: center; }
.closing h2 { max-width: 20ch; font-size: var(--fs-h2-lg); line-height: 1.08; } .closing p { margin: var(--space-sm) 0 0; } .closing-actions { display: grid; justify-items: end; }
.direct-edit-heading h2,.fast-start-copy h2,.section-heading h2,.capability-intro h2,.native-wordpress-heading h2,.release-heading h2,.closing h2 { font-size:var(--fs-h2-lg); line-height:1.04; letter-spacing:-.035em; }
.direct-edit-heading > p,.fast-start-copy > p:first-of-type,.section-heading > p:last-child,.capability-intro > p:last-child,.native-wordpress-heading > p,.release-heading > p,.closing-inner > div > p { font-size:var(--fs-body); line-height:1.6; }
.site-footer { padding-block: var(--space-xl); background: var(--ink-deep); color: var(--on-dark); } .footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-xl); }
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--space-lg); } .site-footer p { margin: 0; color: var(--on-dark-muted); font-family: var(--font-ui); font-size: var(--fs-small); }

@media (max-width: 64rem) { .editor-body { grid-template-columns: 48px 150px minmax(0,1fr); } .inspector { display: none; } }
@media (max-width: 56.24rem) {
  .header-inner { position: relative; } .header-shell { grid-template-columns:1fr auto; } .header-cta { display: none; } .menu-button { display: inline-flex; }
  html.menu-open .site-header { border-bottom-color:transparent; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  html.menu-open .site-header::after { display:none; }
  html.menu-open .brand { visibility:hidden; }
  .menu-button { position:relative; z-index:2; }
  .nav { position:fixed; z-index:1; inset:0; min-height:100dvh; display:flex; visibility:hidden; align-items:flex-start; justify-content:center; flex-direction:column; gap:clamp(1rem,4vh,2rem); padding:calc(var(--header-height) + 3rem) var(--gutter) max(2rem,env(safe-area-inset-bottom)); background:var(--ink-deep); opacity:0; pointer-events:none; transform:translateY(-.5rem); transition:opacity 180ms ease,transform 220ms cubic-bezier(.2,.7,.2,1),visibility 0s linear 220ms; }
  .nav[data-open="true"] { visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
  .nav a { min-height:52px; justify-content:center; color:var(--on-dark); font-family:var(--font-display); font-size:clamp(2rem,7vw,3.5rem); font-weight:650; line-height:1.05; letter-spacing:-.035em; text-align:center; }
  .nav a:not(.nav-cta) { width:100%; justify-content:flex-start; text-align:left; }
  .nav a::after { display:none; }
  .nav .nav-cta { width:min(100%,26rem); min-height:56px; display:inline-flex; justify-content:center; margin-top:clamp(1rem,3vh,2rem); padding:var(--space-sm) var(--space-lg); border:0; border-radius:var(--radius); background:var(--green); color:var(--ink); font-family:var(--font-ui); font-size:1rem; font-weight:600; letter-spacing:0; text-align:center; }
  html.menu-open,html.menu-open body { overflow:hidden; }
  .editor-body { grid-template-columns: 46px 130px minmax(0,1fr); min-height: 360px; } .editor-canvas { padding: var(--space-md); } .canvas-page { min-width: 390px; }
  .fast-start-layout { grid-template-columns: 1fr; } .start-preview { order: -1; min-height: 34rem; transform: none; }
  .process li { grid-template-columns: 5rem minmax(12rem,.8fr) minmax(0,1.2fr); padding: var(--space-xl); }
  .native-wordpress-heading { grid-template-columns: 1fr; align-items: start; }
  .wordpress-admin-stage { grid-template-columns: 10rem minmax(0,1fr); }
  .wordpress-release-view { grid-template-columns: 1fr; }
  .release-heading { grid-template-columns: 1fr; align-items: start; } .release-theatre { grid-template-columns: 1fr; }
  .working-surface, .release-output { padding: var(--space-lg); } .release-switch { min-height: 6.5rem; }
  .release-switch::before { inset: 0 50%; }
  .closing-inner { grid-template-columns: 1fr; } .closing-actions { justify-items: start; } .footer-inner { grid-template-columns: 1fr; justify-items: start; gap: var(--space-md); } .site-footer nav { justify-content: flex-start; }
  .capabilities { background-image: linear-gradient(rgba(238,234,222,.90), rgba(238,234,222,.96)), url("images/pagecraft-paper-system.webp"); background-position: center, 62% center; }
  .capability-index { grid-template-columns:1fr; }
  .capability-card { grid-template-rows:minmax(18rem,52vw) auto; }
  .ownership { background-image: linear-gradient(rgba(11,13,11,.93), rgba(11,13,11,.89)), url("images/pagecraft-release-layers.webp"); background-position: center, 62% center; }
}
@media (max-width: 40rem) {
  .hero-inner { padding-top: var(--space-2xl); } .hero h1 { max-width: 10ch; } .button-row { align-items: stretch; flex-direction: column; } .button-row .button { width: 100%; }
  .editor { width: calc(100% + (2 * var(--gutter))); margin-inline: calc(-1 * var(--gutter)); transform: none; border-radius: 0; } .editor-topbar { min-height: 52px; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-sm); padding-inline:var(--space-sm); } .editor-topbar > div { display:none; } .viewport-switch { display: none; } .editor-brand { min-width:0; } .publish-chip { padding:.45rem .8rem; }
  .editor-body { display:block; min-height:0; } .editor-rail,.editor-panel { display: none; } .editor-canvas { min-height:0; padding:var(--space-sm); overflow:hidden; }
  .canvas-page { width:100%; min-width:0; aspect-ratio:1.18; transform:none; }
  .canvas-nav { min-height:40px; height:15%; padding-inline:4%; font-size:.58rem; } .northhouse-logo--canvas { width:4.7rem; } .canvas-nav span { display:flex; gap:.55rem; }
  .canvas-hero { height:85%; } .canvas-copy { padding:7%; } .canvas-copy small,.canvas-copy > span,.canvas-copy > i { font-size:.55rem; } .canvas-copy strong { margin-top:5%; font-size:clamp(1.45rem,7.6vw,2.15rem); } .canvas-copy > span { margin-top:5%; line-height:1.4; } .canvas-copy > i { margin-top:6%; padding:.45rem .6rem; } .selection-outline { inset:15% 49.3% 0 0; } .selection-outline > span { top:-20px; font-size:.55rem; }
  .fast-start-layout, .capability-layout, .wordpress-admin-stage, .release-story { width: calc(100% - (2 * var(--gutter))); }
  .process { padding-bottom: var(--space-xl); }
  .process li { top:calc(var(--header-height) + .65rem + (var(--stack-index) * .7rem)); min-height:0; grid-template-columns:1fr; gap:0; align-items:start; margin-bottom:.8rem; padding:var(--space-lg); }
  .process li > div { display:grid; gap:var(--space-xs); }
  .process-number { display:block; margin-bottom:var(--space-md); font-size:clamp(2.5rem,13vw,3.6rem); line-height:.8; }
  .process h3, .process p { grid-column:auto; } .process h3 { font-size:clamp(1.5rem,7vw,2rem); } .process p { margin:0; line-height:1.5; }
  .capability-index { grid-template-columns:1fr; gap:var(--space-md); border:0; background:transparent; }
  .capability-card,.capability-delivery { border:1px solid rgba(17,19,17,.22); }
  .capability-card { grid-template-rows:minmax(16rem,72vw) auto; }
  .capability-card-copy { grid-template-columns:1fr; min-height:0; }
  .capability-card-copy h3 { font-size:32px; }
  .capability-mini-editor,.capability-media-library,.capability-responsive-editor,.capability-review { inset:6% 4%; }
  .capability-delivery { grid-template-columns:1fr; min-height:0; gap:var(--space-lg); margin-top:var(--space-lg); padding:var(--space-xl) var(--space-lg); }
  .capability-delivery .button { justify-self:start; }
  .type-canvas { min-height: 31rem; padding: var(--space-xl) var(--space-md) 8rem; }
  .type-canvas > strong { font-size: clamp(3.5rem,17vw,5rem); }
  .type-controls { grid-template-columns: repeat(2,1fr); }
  .type-controls div { min-height: 64px; padding-inline: var(--space-sm); }
  .type-controls div:nth-child(3) { border-left: 0; border-top: 1px solid var(--dark-line); }
  .type-controls div:nth-child(4) { border-top: 1px solid var(--dark-line); }
  .release-heading h2 { font-size: var(--fs-h2-lg); }
  .start-preview { min-height: 30rem; } .start-preview-body { grid-template-columns: 1fr; } .start-preview-body > figure { order:-1; overflow:hidden; } .start-preview-body > figure img { width:100%; margin-left:0; }
  .native-wordpress-heading { gap:var(--space-sm); margin-bottom:var(--space-xl); }
  .wordpress-admin-stage { grid-template-columns: 1fr; padding-inline: 0; }
  .wordpress-admin-stage > aside { display: none; }
  .wordpress-admin-main > header { padding-inline: var(--space-md); }
  .wordpress-release-view { padding: var(--space-md); }
  .release-theatre { gap:var(--space-md); border:0; }
  .working-surface,.release-output { padding:var(--space-md); }
  .release-switch { min-height:4.5rem; }
  .hero { background-image: linear-gradient(rgba(11,13,11,.88), rgba(11,13,11,.93) 55%, rgba(11,13,11,.98)), url("images/pagecraft-hero-materials-v2.webp"); background-position: center, 70% top; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .button:not(:disabled):hover { transform: none; } }

.button:disabled, .nav-cta:disabled { cursor: default; opacity: 1; }