/* Shared editorial composition: graphite glass, precise edges, warm light. */
.hero{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;gap:48px;padding-top:88px;padding-bottom:96px;position:relative;isolation:isolate}
.hero:before{content:'';position:absolute;inset:24px -24px 20px;width:auto;height:auto;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#ffb4770b,transparent 60%);border-bottom:1px solid #ffffff12}
.hero-copy{display:block;text-align:center;min-width:0;max-width:min(100%,1080px)}.hero .action-row,.hero-copy>.eyebrow{justify-content:center}.hero-copy>.eyebrow{font-size:10px;letter-spacing:.12em;line-height:1.8;margin-bottom:28px}.hero h1{font-size:clamp(44px,4.6vw,66px);line-height:1.04;letter-spacing:-.055em}.hero h1>span{color:var(--accent)}.hero-summary{margin:28px auto 0;max-width:56ch;justify-self:center}.hero-description{font-size:17px;line-height:1.7;color:var(--text-secondary)}.hero-product{margin:0;width:100%;max-width:1120px;min-width:0;padding:12px;border:1px solid #ffb47730;border-radius:24px;background:linear-gradient(145deg,#ffffff06,#ffffff01);box-shadow:inset 0 1px #ffffff15;position:relative}.hero-product .demo-mount{zoom:1}.brand-symbol{width:36px;height:36px;border:0;border-radius:9px;background:none;box-shadow:none;flex-shrink:0}
.feature-presentation{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,5vw,76px);align-items:center;padding-top:80px;padding-bottom:30px}.feature-presentation+.feature-presentation{margin-top:50px;padding-top:80px}.feature-presentation .section-heading{display:block;margin:0;min-width:0}.feature-presentation .section-heading>div{max-width:none}.feature-presentation h2{}.feature-presentation .section-heading>p{margin-top:24px;font-size:16px;line-height:1.8;max-width:38ch}.feature-presentation .eyebrow{margin-bottom:22px}.feature-presentation>.demo-mount{min-width:0;zoom:1;border:0;box-shadow:none}.feature-reverse{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr)}.feature-reverse>.section-heading{grid-column:2;grid-row:1}.feature-reverse>.demo-mount{grid-column:1;grid-row:1}.feature-presentation h2 span{color:var(--text-secondary)}
.legal-page{background:var(--surface-base);min-height:100dvh}.legal-shell{max-width:1120px;margin:auto;padding:24px 32px 72px}.legal-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0 28px;border-bottom:1px solid var(--border-glass)}.legal-header .logo{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;letter-spacing:-.03em}.legal-back{font-size:14px;padding:12px 18px;border:1px solid var(--border-glass);border-radius:12px;background:#ffffff04}.legal-back:hover{border-color:var(--accent)}.legal-card{max-width:800px;margin:72px auto 0}.legal-kicker{font:11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}.legal-card h1{font-size:clamp(38px,5vw,64px);line-height:1.1;letter-spacing:-.05em;margin-bottom:24px}.legal-updated{font-size:13px;color:var(--text-muted);padding-bottom:36px;border-bottom:1px solid var(--border-glass)}.legal-section{padding-top:34px}.legal-section h2{font-size:23px;line-height:1.3;letter-spacing:-.025em;margin-bottom:14px}.legal-section p,.legal-section li,.legal-note{font-size:16px;line-height:1.85;color:var(--text-secondary)}.legal-section li+li{margin-top:10px}.legal-section ul{padding-left:22px}.legal-section a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.legal-note{border:1px solid #ffb47730;border-radius:16px;background:#ffb47706;padding:24px;margin-top:40px}.legal-footer{max-width:1056px;margin:0 auto;padding:28px 32px 40px;display:flex;justify-content:space-between;border-top:1px solid var(--border-glass);gap:24px;font-size:13px;color:var(--text-secondary)}.legal-footer nav{display:flex;gap:24px}.legal-footer a{padding-block:12px}
@media(min-width:1001px) and (max-width:1200px){.hero{gap:28px}.hero-product .demo-mount{zoom:1}.feature-presentation>.demo-mount{zoom:1}.hero .action-row{flex-wrap:wrap}}
@media(max-width:1000px){.hero{grid-template-columns:1fr;padding-top:56px;gap:40px}.hero-copy{max-width:min(100%,780px)}.hero-summary{max-width:56ch}.hero-product .demo-mount{zoom:1}.feature-presentation,.feature-reverse{grid-template-columns:1fr;gap:32px}.feature-reverse>.section-heading,.feature-reverse>.demo-mount{grid-column:auto;grid-row:auto}.feature-presentation>.demo-mount{zoom:1}.feature-presentation .section-heading>p{max-width:60ch}.feature-presentation h2{}}
@media(max-width:600px){.hero{padding-top:40px;padding-bottom:56px}.hero:before{left:0;right:0}.hero h1{font-size:44px}.hero-description{font-size:16px}.hero-product{padding:6px;border-radius:18px}.feature-presentation{padding-top:48px}.feature-presentation+.feature-presentation{margin-top:32px;padding-top:48px}.feature-presentation h2{}.legal-shell{padding:16px 20px 48px}.legal-card{margin-top:48px}.legal-header .logo{font-size:14px}.legal-back{font-size:12px;padding:12px}.legal-footer{flex-direction:column;padding-inline:20px}.legal-footer nav{gap:20px}}
@media(prefers-reduced-motion:reduce){.hero *,.feature-presentation *{animation:none!important;transition:none!important}}

/* One frame owns the radius and clipping; the toolbar belongs to its viewport. */
.demo-mount .product-window{border:1px solid var(--border-glass);border-radius:18px;overflow:clip;isolation:isolate}
.demo-mount .reference-area{position:relative}
.demo-mount .reference-area>.demo-toolbar{position:absolute;top:auto!important;bottom:40px!important;left:50%!important;transform:translateX(-50%);transition:none;max-width:calc(100% - 24px);width:max-content;z-index:10;margin:0}
.demo-mount .demo-toolbar .tool{width:44px;min-width:44px;height:44px;min-height:44px}
.demo-mount .demo-toolbar{gap:3px;padding:6px;border-radius:16px}
.demo-mount .toolbar-grip{width:16px}
.demo-mount .kiln-card{border-radius:16px!important;box-shadow:none}
.hero-footnote,.pricing-disclosure,.demo-caption,.legal-updated,.site-footer{color:var(--text-secondary)}
.hero .hero-footnote{font-size:13px}.feature-presentation .eyebrow{}
.site-header nav a,.nav-free,.site-footer nav a{min-height:44px;display:inline-flex;align-items:center}.menu-button{min-height:44px}
.demo-mount .demo-reset{min-height:44px}.demo-mount .browser-chrome{height:auto;min-height:48px}
.demo-mount .tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.demo-mount .demo-toolbar{gap:0;padding:4px}.demo-mount .toolbar-grip{display:none}.demo-mount:not([data-animation]) .reference-area>.demo-toolbar{max-width:calc(100% - 12px)}.feature-presentation .section-heading>p{font-size:16px}.hero-product{padding:0;border:0;background:none;box-shadow:none}.site-footer nav{flex-wrap:wrap}}
.demo-mount .kiln-card-art{color:#aeb7c5;font-size:11px}.demo-mount .kiln-card-info code{font-size:11px}.demo-mount .browser-url{font-size:11px}

/* The walkthrough browser is the hero’s only frame. */
.hero .hero-product{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
/* Compact browser chrome shared by walkthroughs and the interactive demo. */
.demo-mount .browser-chrome{display:block;padding:0;min-height:0;height:auto;background:#202020;border-bottom:1px solid #ffffff12}
.browser-tabstrip{height:38px;display:flex;align-items:end;gap:24px;padding:0 16px;background:#191919}
.browser-tabstrip .window-dots{align-self:center;gap:6px}.browser-tabstrip .window-dots i{width:8px;height:8px;background:#636363}
.browser-tab{display:flex;align-items:center;gap:8px;height:30px;width:190px;padding:0 12px;background:#202020;border-radius:8px 8px 0 0;color:#d4d4d4;font-size:11px}.browser-tab-close{margin-left:auto;font-size:16px;color:#ababab}
.browser-navigation{display:flex;align-items:center;gap:8px;padding:4px 12px;min-height:48px}.browser-history{display:flex;gap:16px;align-items:center;color:#898989}.browser-history svg:last-child{opacity:.45}.demo-mount .browser-reload{display:grid;place-items:center;width:36px;min-height:36px;padding:0;flex-shrink:0;border-radius:6px;color:#bcbcbc}.browser-reload:hover{background:#ffffff0a}
.demo-mount .browser-url{display:flex;align-items:center;gap:8px;min-width:0;min-height:30px;padding:0 12px;border:1px solid #ffffff08;border-radius:7px;background:#151515;text-align:left;font:11px/1.4 var(--font-sans);color:#d4d4d4}.browser-url>span{margin:0}.browser-url .browser-local{margin-left:auto;color:#ababab;font-size:10px;white-space:nowrap}.browser-extension{flex-shrink:0;margin-inline:4px}
[data-animation] .browser-reload{visibility:visible;pointer-events:none}
@media(max-width:600px){.browser-tabstrip{gap:18px;padding-inline:12px}.browser-tab{width:155px}.browser-navigation{gap:6px;padding-inline:8px}.browser-history{gap:10px}.browser-history svg:last-child{display:none}.browser-url .browser-local{display:none}.browser-extension{width:20px;height:20px;margin-inline:0}}
/* Feature demonstrations use a clean canvas; browser chrome stays in the hero and playground. */
.feature-presentation .browser-chrome,
.feature-presentation .demo-status{display:none}
.demo-mount .product-window{box-shadow:var(--glass-highlight),var(--shadow-floating),0 16px 56px -10px rgba(255,153,74,0),0 0 0 1px rgba(255,173,102,0);transition:height 800ms cubic-bezier(.4,0,.2,1),box-shadow 1200ms cubic-bezier(.42,0,.58,1),border-color 1200ms cubic-bezier(.42,0,.58,1)}
@media(hover:hover){
  .demo-mount:hover .product-window,
  .hero-product:hover .product-window,
  .feature-presentation:hover .product-window{border-color:var(--border-strong);box-shadow:var(--glass-highlight),var(--shadow-floating)}
}
@media(prefers-reduced-motion:reduce){.demo-mount .product-window{transition:none}}

.demo-natural-content{display:flow-root;position:relative;width:100%}
.demo-mount .product-window.demo-size-snap{transition:none!important}

/* Automated previews have a stable aspect ratio, independent of panel contents. */
.demo-mount[data-animation] .product-window{height:auto!important;aspect-ratio:1.3;transition:box-shadow 1200ms cubic-bezier(.42,0,.58,1),border-color 1200ms cubic-bezier(.42,0,.58,1)}
.demo-mount[data-animation] .demo-natural-content{position:absolute;top:0;width:1100px;height:calc(1100px / 1.3);transform-origin:top left;display:flex;flex-direction:column}
.demo-mount[data-animation] .demo-layout{flex:1 1 0%;height:auto!important;min-height:0}
/* Legal pages: inline links must be distinguishable without relying on color alone */
.legal-section p a,.legal-note a{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;transition:color var(--transition-fast)}
.legal-section p a:hover,.legal-note a:hover{color:var(--accent)}
.legal-footer a{display:inline-flex;align-items:center;min-height:44px}
/* Inline text links: keep a comfortable tap target without changing their look */
.persona-grid article a,.text-link{display:inline-flex;align-items:center;min-height:40px}
/* composition.css loads after landing.css; restore the narrow-width hide that its inline-flex rule overrode */
@media(max-width:1200px){.nav-free{display:none}}
/* Phones: brand + Menu only; the hero already carries the primary install action */
@media(max-width:640px){.nav-actions{display:none}}
/* Single-column pricing: the button's auto margin collapses, so space the note explicitly */
.plan-note{margin-bottom:20px}
/* Icons inside actions: one size, optically centred; the menu plus turns into a close mark when open */
.button-icon{display:inline-flex;flex-shrink:0;min-width:var(--icon-md);min-height:var(--icon-md)} /* reserves the icon before landing.mjs fills it */.button-icon .be-icon{width:var(--icon-md);height:var(--icon-md)}
.text-link .button-icon,.persona-grid article a .button-icon{margin-left:var(--space-1);vertical-align:-3px}
.menu-button .be-icon{transition:transform var(--transition-fast)}.menu-button[aria-expanded=true] .be-icon{transform:rotate(45deg)}

/* ── Motion system ─────────────────────────────────────────────
   Durations reuse the shared tokens: --motion-micro 90ms (press), --motion-state 160ms (hover/state),
   --motion-panel 220ms (menus, disclosure). Reveal is the only longer one and runs once on load. */
:root{--motion-reveal:480ms;--ease-enter:cubic-bezier(.16,1,.3,1);--ease-exit:cubic-bezier(.4,0,1,1);--nudge:2px;--rise:10px}
@media(max-width:640px){:root{--rise:6px}}

/* ── Navigation ── */
.site-header nav .nav-links{display:contents}
.nav-icon,.nav-text small,.nav-menu-footer{display:none}
.site-header nav .nav-links a{position:relative;transition:color var(--transition-fast)}
.site-header nav .nav-links a[aria-current]{color:var(--text-primary)}
@media(min-width:1001px){
  .site-header nav .nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-fast)}
  .site-header nav .nav-links a:hover::after,.site-header nav .nav-links a[aria-current]::after{transform:scaleX(1)}
}
@media(max-width:1000px){
  .site-header nav{max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain;display:grid;gap:var(--space-2);padding:var(--space-2);visibility:hidden;opacity:0;transform:translateY(-6px);transform-origin:top;pointer-events:none;
    transition:opacity var(--motion-state) var(--ease-exit),transform var(--motion-state) var(--ease-exit),visibility 0s linear var(--motion-state)}
  .site-header nav.is-open{visibility:visible;opacity:1;transform:none;pointer-events:auto;
    transition:opacity var(--motion-panel) var(--ease-enter),transform var(--motion-panel) var(--ease-enter),visibility 0s}
  .site-header nav .nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
  .site-header nav .nav-links a{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);color:var(--text-primary);font-size:var(--text-md);font-weight:500;white-space:normal;
    transition:background-color var(--transition-fast),transform var(--motion-micro) var(--ease-fluid)}
  .nav-icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid var(--border-standard);border-radius:var(--radius-sm);background:var(--surface-elevated);color:var(--text-muted);
    transition:color var(--transition-fast),border-color var(--transition-fast),background-color var(--transition-fast)}
  .nav-icon .be-icon{width:var(--icon-md);height:var(--icon-md)}
  .nav-text{display:grid;gap:2px;min-width:0}
  .nav-text small{display:block;font-size:var(--text-xs);font-weight:400;color:var(--text-muted);line-height:1.35}
  /* hover and current section share one treatment: the icon takes the inspector's selected state */
  .site-header nav .nav-links a:hover,.site-header nav .nav-links a[aria-current]{background:var(--surface-hover)}
  .site-header nav .nav-links a:hover .nav-icon,.site-header nav .nav-links a[aria-current] .nav-icon{color:var(--accent);border-color:var(--border-selected);background:var(--surface-selected-subtle)}
  .site-header nav .nav-links a:active{transform:scale(.985);background:var(--surface-active)}
  .nav-menu-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-1);padding:var(--space-3);border-top:1px solid var(--border-standard)}
  .nav-menu-footer p{font:var(--text-xs)/1.4 var(--font-mono);color:var(--text-muted)}
  /* items settle in just after the surface */
  .site-header nav.is-open .nav-links a{animation:nav-item-in var(--motion-panel) var(--ease-enter) both}
  .site-header nav.is-open .nav-links a:nth-child(2){animation-delay:25ms}.site-header nav.is-open .nav-links a:nth-child(3){animation-delay:50ms}
  .site-header nav.is-open .nav-links a:nth-child(4){animation-delay:75ms}.site-header nav.is-open .nav-links a:nth-child(5){animation-delay:100ms}
  .site-header nav.is-open .nav-links a:nth-child(6){animation-delay:125ms}
}
@media(max-width:520px){.site-header nav .nav-links{grid-template-columns:minmax(0,1fr)}.site-header nav .nav-links a{min-height:52px}}
@keyframes nav-item-in{from{opacity:0;transform:translateY(-4px)}}
.menu-button{border-radius:var(--radius-control);padding-inline:var(--space-3);transition:background-color var(--transition-fast),color var(--transition-fast)}
.menu-button:hover,.menu-button[aria-expanded=true]{background:var(--surface-hover);color:var(--text-primary)}

/* ── Actions: tactile, restrained. Arrows move in the direction they point, only on interaction. ── */
.button{transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--motion-micro) var(--ease-fluid)}
.button-icon .be-icon{transition:transform var(--transition-fast)}
@media(hover:hover){
  .button-primary:hover{transform:translateY(-1px)}
  .button-secondary:hover{border-color:var(--border-strong)}
  a:hover>.button-icon[data-icon=arrow-up-right] .be-icon{transform:translate(var(--nudge),calc(var(--nudge) * -1))}
  a:hover>.button-icon[data-icon=arrow-right] .be-icon{transform:translateX(calc(var(--nudge) + 1px))}
  a:hover>.button-icon[data-icon=arrow-down] .be-icon{transform:translateY(var(--nudge))}
  /* cards: border emphasis only, no lift or scale */
  .price-card,.persona-grid article{transition:border-color var(--transition-fast)}
  .price-card:not(.price-card--featured):hover,.persona-grid article:hover{border-color:var(--border-strong)}
}
.button:active{transform:translateY(1px);box-shadow:var(--shadow-pressed)}
.site-footer nav a,.legal-footer a{transition:color var(--transition-fast)}.site-footer nav a:hover,.legal-footer a:hover{color:var(--text-primary)}

/* ── FAQ: drawn plus/minus on the icon grid, height eases open where supported ── */
.faq-list summary{padding-block:var(--space-1);transition:color var(--transition-fast)}
.faq-list summary:hover{color:var(--accent-hover)}
.faq-list summary:after{content:'';flex-shrink:0;width:16px;height:16px;color:var(--text-muted);
  background:linear-gradient(currentColor,currentColor) center/14px 1.8px no-repeat,linear-gradient(currentColor,currentColor) center/1.8px 14px no-repeat;
  transition:background-size var(--motion-panel) var(--ease-enter),color var(--transition-fast)}
.faq-list details[open] summary:after{content:'';color:var(--accent);background-size:14px 1.8px,1.8px 0}
.faq-list details{interpolate-size:allow-keywords}
.faq-list details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size var(--motion-panel) var(--ease-enter),opacity var(--motion-panel) var(--ease-enter),content-visibility var(--motion-panel) allow-discrete}
.faq-list details[open]::details-content{block-size:auto;opacity:1}

/* ── Hero: one staged entrance on load — copy, then actions, then the product ── */
.hero h1,.hero-summary,.hero-product{animation:rise var(--motion-reveal) var(--ease-enter) both}
.hero-summary{animation-delay:80ms}.hero-product{animation-delay:180ms}
@keyframes rise{from{opacity:0;transform:translateY(var(--rise))}}

@media(prefers-reduced-motion:reduce){
  .site-header nav,.site-header nav.is-open{transform:none;transition:opacity 1ms,visibility 0s}
  .site-header nav.is-open .nav-links a,.hero h1,.hero-summary,.hero-product{animation:none}
  .button,.button-icon .be-icon,.menu-button .be-icon,.nav-icon{transition:none}
  .button-primary:hover,.button:active,a:hover>.button-icon .be-icon,.site-header nav .nav-links a:active{transform:none}
  .faq-list details::details-content{transition:none}.faq-list summary:after{transition:none}
}
/* The header keeps its own Add to Chrome above 640px; don't repeat it inside the menu there */
@media(min-width:641px){.nav-menu-footer .button{display:none}}
.site-header .nav-menu-footer .button-primary{color:var(--text-inverse);font-size:var(--text-md);flex:1 1 100%}

/* ── Animated demos ─────────────────────────────────────────────
   They render a fixed 1100px canvas that demo-sizing.mjs fits to the frame, so viewport
   breakpoints never restyle their internals (those rules are scoped to :not([data-animation])).
   The side panel ends with the window and its content clips inside, like the extension's panel. */
.demo-mount[data-animation] .demo-layout{grid-template-rows:minmax(0,1fr)!important}
.demo-mount[data-animation] .demo-layout>aside.property-panel{min-height:0;max-height:100%;overflow:hidden}
.demo-mount[data-animation] .demo-layout>aside.property-panel .panel-body{min-height:0;flex:1;overflow:hidden}
/* Camera mode (narrow frames): crop to the canvas height at a readable scale and pan with the action */
.demo-mount[data-animation][data-cropped] .product-window{aspect-ratio:auto;height:var(--frame-h)!important}
.demo-mount[data-animation][data-cropped] .demo-natural-content{transition:transform 700ms var(--ease-enter)}
@media(prefers-reduced-motion:reduce){.demo-mount[data-animation][data-cropped] .demo-natural-content{transition:none}}
/* Walkthrough loop: a brief fade hides the reset between the final result and the first beat */
.demo-mount[data-animation] .demo-natural-content{transition:opacity 320ms var(--ease-exit)}
.demo-mount[data-animation][data-cropped] .demo-natural-content{transition:opacity 320ms var(--ease-exit),transform 700ms var(--ease-enter)}
.demo-mount[data-animation][data-looping] .demo-natural-content{opacity:0}
/* Demo toolbar: same grouping, dividers and collapse behaviour as the extension toolbar (.wa-toolbar) */
.demo-toolbar .wa-divider{width:1px;height:24px;background:var(--border-standard);margin:0 2px;flex-shrink:0}
.demo-toolbar .wa-tools-collapsible{display:grid;grid-template-columns:1fr;transition:grid-template-columns var(--transition-smooth),opacity var(--transition-smooth),margin var(--transition-smooth)}
.demo-toolbar .wa-tools-inner{display:flex;align-items:center;gap:inherit;overflow:hidden;min-width:0}
.demo-toolbar .wa-tools-inner>*{flex-shrink:0}
.demo-toolbar.collapsed .wa-tools-collapsible{grid-template-columns:0fr;opacity:0;margin-right:-6px;pointer-events:none}
.demo-toolbar [data-collapse] .be-icon{transition:transform var(--transition-smooth)}
.demo-toolbar.collapsed [data-collapse] .be-icon{transform:rotate(180deg)}
/* Demo toolbar mirrors the extension's .wa-toolbar / .wa-tool-btn: 6px padding and gap, 36px tools, accent bar under the
   selected tool, and the real hover / pressed recipes. Simulated pointer states use the same rules. */
.demo-toolbar{padding:6px!important;gap:6px!important}
.demo-toolbar .toolbar-grip{width:24px;height:32px;margin-left:2px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.demo-toolbar .tool{position:relative;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:8px!important;transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--motion-micro) var(--ease-fluid)}
.demo-toolbar .tool[aria-pressed=true]::after{content:'';position:absolute;bottom:2px;left:50%;width:10px;height:2px;margin-left:-5px;border-radius:2px;background:var(--accent-indicator)}
/* page elements ([data-target]) are selected, not pressed, by the inspector */
.demo-mount .is-pressed:not([data-target]),.demo-toolbar .tool:active{background:var(--surface-active)!important;box-shadow:var(--shadow-pressed)!important;transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.demo-mount .is-pressed:not([data-target]),.demo-toolbar .tool:active{transform:none}}
/* Analysis panel header as in toggleSidePanel(): plain title, no icon */
.demo-mount .panel-heading .panel-title{color:var(--text-secondary);font:600 13px var(--font-sans)}

/* ── Phones: animated demos switch to a narrow canvas (demo-sizing.mjs sets [data-phone]) ──
   The page reflows to its narrow layout and fills the window. Side panels open on the right as in the
   extension; the phone camera (demo-sizing.mjs) zooms onto the panel or popover the cursor is working in. */
.demo-mount[data-animation][data-phone] .product-window{aspect-ratio:600/1000}
.demo-mount[data-animation][data-phone] .demo-natural-content{width:600px;height:1000px;transition:opacity 320ms var(--ease-exit),transform 700ms var(--ease-enter)}
@media(prefers-reduced-motion:reduce){.demo-mount[data-animation][data-phone] .demo-natural-content{transition:none}}
.demo-mount[data-animation][data-phone] .demo-layout{display:block!important;position:relative;grid-template-columns:none!important}
.demo-mount[data-animation][data-phone] .reference-area{height:100%}
.demo-mount[data-animation][data-phone][data-surface=sidebar] .demo-layout>aside.property-panel{position:absolute!important;left:auto;right:0;top:0;bottom:0;z-index:5;width:460px!important;height:100%!important;max-height:100%;border-left:1px solid var(--border-glass);box-shadow:-18px 0 48px #00000073}
/* The toolbar can't sit beside a 460px panel on a 600px canvas; it steps aside while the panel is open */
.demo-mount[data-animation][data-phone] .demo-toolbar{transition:opacity 220ms var(--ease-fluid)}
.demo-mount[data-animation][data-phone][data-surface=sidebar][data-panel=open]:not([data-peek]) .demo-toolbar{opacity:0}
.demo-mount[data-animation][data-phone] .demo-layout>aside.property-panel{transition:transform 600ms var(--ease-enter)}
.demo-mount[data-animation][data-phone][data-peek] .demo-layout>aside.property-panel{transform:translateX(100%)}
.demo-mount[data-animation][data-phone] .property-panel :is(.ai-empty-icon,.ai-empty .panel-kicker){display:none}
.demo-mount[data-animation][data-phone] .property-panel:has(.ai-suggestions,.conversation) .ai-empty{display:none}
/* Responsive view on the phone canvas: the phone preview tall on the left, tablet and desktop stacked beside it */
.demo-mount[data-animation][data-phone] .device-trio{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto 1fr;gap:18px!important;padding:20px!important}
.demo-mount[data-animation][data-phone] .device-phone{grid-row:span 2}
.demo-mount[data-animation][data-phone][data-tool=responsive] .reference-area{display:flex;flex-direction:column}
.demo-mount[data-animation][data-phone][data-tool=responsive] .responsive-comparison:not([hidden]){flex:1;display:flex!important;flex-direction:column}
.demo-mount[data-animation][data-phone][data-tool=responsive] .device-trio{flex:none;margin-block:auto}
.demo-mount[data-animation][data-phone] .device-preview>span{font-size:11px}
.demo-mount .sim-cursor.is-flipped>span{position:absolute;right:calc(100% - 8px);top:0;white-space:nowrap}
/* The toolbar sits where the extension puts it (content-script.js activateToolbar): centred, 40px above the
   bottom of the page view. The page view fills the whole demo window, so that is the window's bottom. */
.demo-mount[data-animation] .demo-layout>.reference-area{align-self:stretch!important;height:100%!important;max-height:none!important}
/* Playground on phones: one window of stable height, like a browser viewport (the toolbar lives in the
   page area, so it stays put); side panels open as a scrollable bottom sheet instead of stacking under the page. */
@media(max-width:800px){
  .playground .demo-layout{display:block!important;position:relative;height:680px!important;grid-template-columns:none!important}
  .playground .reference-area{height:100%!important;max-height:none;overflow:hidden!important}
  .playground[data-surface=sidebar][data-panel=open] .demo-layout>aside.property-panel{position:absolute!important;left:0;right:0;top:auto;bottom:0;z-index:5;width:auto!important;height:62%!important;max-height:62%!important;overflow:auto!important;border:1px solid var(--border-glass);border-bottom:0;border-radius:18px 18px 0 0!important;box-shadow:0 -18px 48px #00000073}
  .playground[data-surface=sidebar] .property-panel .panel-heading,.playground[data-surface=sidebar] .property-panel .panel-body{min-width:0!important}
  .playground[data-surface=sidebar][data-panel=open] .demo-toolbar{top:calc(38% - 64px)!important;bottom:auto!important}
  .playground .device-trio{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto 1fr}
  .playground .device-phone{grid-row:span 2}
  /* AI sheet: the composer stays pinned at the bottom; only the conversation scrolls */
  .playground[data-tool=ai][data-panel=open] .demo-layout>aside.property-panel{display:flex!important;flex-direction:column;overflow:hidden!important}
  .playground[data-tool=ai] .property-panel>.panel-body{flex:1;min-height:0!important;display:flex!important;flex-direction:column;overflow:hidden!important;padding:0!important;gap:0!important}
  .playground[data-tool=ai] .property-panel .ai-thread{flex:1;min-height:0!important;overflow-y:auto!important;padding:16px}
  .playground .property-panel :is(.ai-empty-icon,.ai-empty .panel-kicker){display:none}
  .playground .property-panel:has(.ai-suggestions,.conversation) .ai-empty{display:none}
}
/* Demo entrances: floating surfaces arrive the way the extension's do, and nothing appears by cut. */
@media(prefers-reduced-motion:no-preference){
  .demo-mount .inspect-hint>.be-floating,.demo-mount .sample-loupe{animation:be-surface-enter var(--motion-panel) var(--ease-enter) both}
  .demo-mount[data-variant][data-panel=open] .demo-layout>aside.property-panel{animation:panel-arrive 280ms var(--ease-enter) both}
  .demo-mount[data-variant][data-surface=popover] .demo-layout>aside.property-panel{animation:demo-pop 240ms var(--ease-enter) both}
  .demo-mount .responsive-comparison:not([hidden]) .device-preview{animation:rise var(--motion-reveal) var(--ease-enter) both}
  .demo-mount .responsive-comparison:not([hidden]) .device-preview:nth-child(2){animation-delay:70ms}
  .demo-mount .responsive-comparison:not([hidden]) .device-preview:nth-child(3){animation-delay:140ms}
  /* The tour cursor is shown and hidden with display as tools change; it fades in instead of cutting in. */
  [data-animation] .sim-cursor{transition:transform 1.05s cubic-bezier(.22,1,.36,1),opacity var(--motion-panel,220ms) var(--ease-enter),display var(--motion-panel,220ms) allow-discrete}
  @starting-style{[data-animation] .sim-cursor{opacity:0!important}}
}
@keyframes demo-pop{from{opacity:0;transform:translateY(6px) scale(.97)}}

/* Short legal and survey pages: the footer sits at the bottom of the window, not mid-screen under the content. */
.legal-page{display:flex;flex-direction:column}.legal-page .legal-shell{flex:1 0 auto;width:100%}.legal-page .legal-footer{width:100%}