/* Critter adapters: notebook semantic tokens are the source of all brand colors. */
body{background:var(--canvas);color:var(--text);font-family:Archivo,Arial,sans-serif}
.critter-lockup{display:inline-flex;width:145px;height:48px;align-items:center}
.critter-lockup img{width:100%;height:100%;object-fit:contain}
.critter-logo-dark{display:none}
:root:is([data-theme="dark"],[data-theme="blueprint"]) .critter-logo-light{display:none}
:root:is([data-theme="dark"],[data-theme="blueprint"]) .critter-logo-dark{display:block}
.critter-theme-control{display:flex;align-items:center;gap:10px;font:12px/18px 'Space Mono',monospace;color:var(--text-muted)}
.critter-theme-control select{font:600 14px/20px Archivo,Arial,sans-serif;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:8px;padding:9px 30px 9px 12px;min-height:40px;cursor:pointer}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.brand-eyebrow{font:12px/18px 'Space Mono',monospace;color:var(--link);margin:0 0 20px}
.landing-page .product-value{max-width:820px;margin-bottom:44px}
.landing-page #overview .product-value h1{font:600 clamp(40px,5vw,64px)/1.0625 Archivo,Arial,sans-serif;letter-spacing:-.035em;max-width:15ch;margin-bottom:24px}
.landing-page .value-lede{font-size:20px;line-height:32px;max-width:590px}
.landing-page h2,.landing-page #pro h2{font-weight:600;line-height:1.22;font-size:clamp(28px,3.3vw,36px)}
.landing-page .product-cta,.product-cta,.example-button{background:var(--accent);color:var(--on-accent);border-radius:8px;font-weight:600;transition:background 120ms ease,transform 120ms ease}
.landing-page .product-cta:hover,.product-cta:hover{background:var(--accent-hover);color:var(--on-accent)}
.landing-page .product-cta:active,.product-cta:active{background:var(--accent-pressed);transform:scale(.98)}
.landing-page .hero-presentation,.workflow-screen{background:var(--brand-surface);border:1px solid var(--border);border-radius:12px}
.landing-page .hero-presentation:before{background:none}
.hero-frame,.hero-frame .workflow-hero{background:transparent}
.landing-page .pro-benefits > li,.landing-page .pro-status{border-radius:10px}
/* The selected theme reaches the real extension chrome in every demo chapter. */
.product-page .hero-demo,.hero-demo{--demo-bg:var(--canvas);--demo-raised:var(--surface-raised);--demo-chrome:var(--surface-subtle);--demo-ink:var(--text);--demo-muted:var(--text-muted);--demo-line:var(--border);--demo-accent:var(--link);--demo-button:var(--accent);--demo-button-ink:var(--on-accent);--demo-selected:var(--selected)}
.product-page .demo-sidebar,.product-page .extension-card,.product-page .pairing-pane .mock-field{background:var(--surface-raised);color:var(--text)}
.product-page .demo-composer,.product-page .chat-user,.product-page .change-result{background:var(--surface);border-color:var(--border);color:var(--text)}
.product-page .change-result>span,.product-page .agent-label{color:var(--link)}
.hero-frame .install-logo-tile{background:var(--accent)}
.hero-frame .install-logo-tile .install-mark{width:36px;height:36px}
.product-page .target-label{background:var(--chip);color:var(--chip-text)}
.product-page .demo-tabbar,.product-page .demo-chrome{background:var(--surface-subtle);color:var(--text);border-color:var(--border)}
.product-page .demo-tab,.product-page .demo-address,.hero-frame .existing-extension{background:var(--surface-raised);color:var(--text);border-color:var(--border)}
.product-page .demo-pr,.product-page .folder-picker{background:var(--canvas);color:var(--text)}
.product-page .demo-browser{border-color:var(--border-strong)}
/* The customer's example checkout retains its own visual identity. */
.product-page .demo-app{color-scheme:light}
.terminal-prompt{color:var(--cornflower-300)}
.hero-frame .connect-terminal{background:var(--ink-950);color:var(--ink-50)}
.hero-frame .connect-terminal-title{background:var(--ink-850);color:var(--ink-50)}
.hero-frame .connect-terminal-result,.hero-frame .connect-launch-result{color:var(--cornflower-200)}
/* Compact public brand reference and email preview. */
.brand-reference{max-width:1120px;margin:auto;padding:24px}
.brand-reference main{margin:0;padding:0;max-width:none}
.brand-reference header{align-items:center}
.brand-reference h1{font:600 clamp(40px,6vw,64px)/1.0625 Archivo,Arial,sans-serif;letter-spacing:-.035em}
.brand-reference h2{font-size:32px;font-weight:600}
.brand-reference .brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.brand-reference article{padding:24px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.brand-reference .brand-example{padding:32px;background:var(--brand-surface);border-radius:10px;margin:24px 0}
.brand-reference .brand-example .critter-lockup{width:240px;height:80px}
@media(max-width:480px){.critter-theme-control label{display:none}.critter-lockup{width:121px;height:40px}.landing-page .value-lede{font-size:18px;line-height:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.access-page header{flex-wrap:wrap}
.access-page header>a:nth-child(2){font-size:13px}
.access-page .critter-theme-control label{margin:0}
.access-page .card{background:var(--surface);color:var(--text);border-color:var(--border);border-radius:10px}
.access-page input,.access-page textarea{background:var(--canvas);color:var(--text);border-color:var(--border-strong)}
.access-page button,.access-page .button{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.access-page button.secondary{background:var(--surface-raised);color:var(--text);border-color:var(--border-strong)}
.access-page #error,.access-page [role="alert"]{color:var(--error)}
.access-page :is(button,a,input,textarea,summary):focus-visible{outline-color:var(--focus)}
.access-page .brand .critter-lockup img{width:100%}
@media(max-width:520px){.access-page header>a:nth-child(2){order:3;width:100%}.access-page .critter-theme-control{margin-left:auto}}
.page>header{flex-wrap:wrap;gap:16px;padding-block:16px}
.page>header>.critter-theme-control{margin-left:auto}
.page .demo-desktop{background:var(--brand-surface);border-color:var(--border)}
.page .demo-desktop:before,.page .demo-desktop:after{background:none}
@media(max-width:600px){.page>header .header-actions{order:3;width:100%}.page>header .header-download{width:100%;justify-content:center}}

/* Standalone outlined wordmark, with explicit demo sizing. */
.critter-lockup.critter-wordmark{width:96px;height:32px}
.hero-frame .extension-lockup .critter-wordmark{width:84px;height:24px}
.hero-frame .extension-lockup .critter-wordmark img{width:100%;height:100%}
/* A quiet footer with one persistent appearance control. */
.site-footer,:is(.landing-page main,.access-page .site-frame)>footer.site-footer{display:flex!important;flex-direction:column;align-items:stretch;gap:32px;padding:40px 0 28px;margin-top:0;border-top:1px solid var(--border);font:14px/20px Archivo,Arial,sans-serif;color:var(--text-muted)}
.site-footer .footer-top,.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px}
.site-footer .footer-identity p{margin:12px 0 0;font-size:14px;color:var(--text-muted)}
.site-footer nav,:is(.landing-page,.access-page) .site-footer nav{display:flex;gap:24px;flex-wrap:wrap;margin:0;padding:0;overflow:visible}
.site-footer nav a{margin:0;padding:4px 0;font:14px/20px Archivo,Arial,sans-serif;text-decoration:none;border-radius:0}
.site-footer nav a:hover{background:transparent;color:var(--text);text-decoration:underline;text-underline-offset:4px}
.site-footer .footer-bottom{padding-top:24px;border-top:1px solid var(--border)}
.site-footer .footer-domain{font:12px/18px 'Space Mono',monospace;text-decoration:none;color:var(--text-muted)}
.footer-appearance{display:flex;align-items:center;gap:14px;font-size:12px}
.appearance-toggle{display:flex;gap:3px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.site-footer .appearance-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-muted);font:500 12px/18px Archivo,Arial,sans-serif;cursor:pointer;transition:background var(--motion-feedback),color var(--motion-feedback)}
.site-footer .appearance-toggle button:hover{background:var(--surface-subtle);color:var(--text);filter:none}
.site-footer .appearance-toggle button[aria-pressed="true"]{background:var(--surface-raised);color:var(--text);border-color:var(--border-strong);box-shadow:0 1px 3px #0000000a}
.site-footer .appearance-toggle button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.appearance-toggle svg{width:16px;height:16px;flex:none;stroke-width:1.75;transform-origin:center;transition:transform var(--motion-icon) var(--motion-ease-out)}
.appearance-toggle button:is(:hover,:focus-visible)[data-theme-choice="light"] svg{transform:rotate(45deg)}
.appearance-toggle button:is(:hover,:focus-visible)[data-theme-choice="dark"] svg{transform:rotate(-14deg)}
.appearance-toggle button:is(:hover,:focus-visible):is([data-theme-choice="system"],[data-theme-choice="blueprint"]) svg{transform:translateY(-2px)}
.access-page>.site-footer{max-width:1080px;margin:0 auto;padding-inline:24px}
.hero-frame .extension-lockup .critter-logo-dark{display:none}
:root:is([data-theme="dark"],[data-theme="blueprint"]) .hero-frame .extension-lockup .critter-logo-light{display:none}
:root:is([data-theme="dark"],[data-theme="blueprint"]) .hero-frame .extension-lockup .critter-logo-dark{display:block}
@media(max-width:700px){.site-footer .footer-top,.site-footer .footer-bottom{align-items:flex-start;flex-direction:column;gap:24px}.footer-appearance{flex-direction:column;align-items:flex-start;gap:10px;width:100%}.appearance-toggle{width:100%}.site-footer .appearance-toggle button{flex:1;padding-inline:8px}.site-footer nav,:is(.landing-page,.access-page) .site-footer nav{gap:20px}}
@media(prefers-reduced-motion:reduce){.appearance-toggle button svg{transform:none!important;transition:none!important}}
/* Mobile fidelity: resilient grids, comfortable touch targets, and readable inputs. */
.site-footer,.footer-top,.footer-bottom,.footer-appearance,.appearance-toggle{min-width:0;max-width:100%;box-sizing:border-box}
.appearance-toggle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer .appearance-toggle button{min-width:0;min-height:44px}
.site-footer nav a,.site-footer .footer-domain{display:inline-flex;align-items:center;min-height:44px}
.site-footer .wordmark,.product-masthead .wordmark{min-height:44px}
@media(max-width:780px){
 .landing-page .hero-signup-form input[type="email"],.access-page input,.access-page textarea{font-size:16px}
 .landing-page .hero-signup-actions{width:100%;min-width:0}
 .landing-page .hero-signup-form{max-width:100%}
 .landing-page .hero-signup-close{width:44px;height:44px}
 .access-page header>a,.brand-reference header>a{display:inline-flex;align-items:center;min-height:44px}
 .access-page .actions button,.access-page .actions .button,.copy,summary{min-height:44px}
 .brand-reference .brand-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
 .brand-reference article{min-width:0;overflow-wrap:anywhere}
 .brand-reference article>a{display:inline-flex;align-items:center;min-height:44px}
 .site-footer nav,:is(.landing-page,.access-page) .site-footer nav{column-gap:20px;row-gap:0}
 .site-footer .footer-top,.site-footer .footer-bottom{width:100%}
 .landing-page #overview>.hero-details{display:block!important;padding:16px 0 0;width:100%}
 .landing-page .hero-description{font-size:16px;line-height:24px;min-height:48px;margin:0 0 12px}
 .hero-review-controls,.hero-chapters{display:flex;flex-wrap:wrap;gap:8px}
 .landing-page .hero-review-controls button{min-height:44px;padding:8px 12px;font-size:13px;border:1px solid var(--border-strong);border-radius:8px}
 .landing-page .hero-keyframes{display:flex;flex-wrap:wrap;gap:8px}
 .hero-keyframes>span,.hero-keyframes [data-hero-command="reset-windows"],.hero-keyframes [data-hero-command="previous"],.hero-keyframes [data-hero-command="next"]{display:none}
 .landing-page .hero-presentation{padding:0;border:0;background:transparent;border-radius:8px}
 .landing-page .hero-presentation:before{display:none}
 .landing-page .hero-scaled{aspect-ratio:auto}
}
@media(max-width:480px){
 .landing-page .hero-signup-actions.is-expanded .hero-signup-form{grid-template-columns:minmax(0,1fr);width:100%;gap:12px}
 .landing-page .hero-signup-actions.is-expanded .hero-signup-form .product-cta{width:100%;font-size:16px}
 .landing-page .hero-signup-form .hero-email{width:100%;min-width:0}
 .landing-page .hero-signup-form input[type="email"]{min-height:48px;padding-right:52px}
 .landing-page .hero-download{width:100%;justify-content:center}
 .landing-page .signup-sign-out,.landing-page .signup-text-link{min-height:44px;display:inline-flex;align-items:center}
 .landing-page .pro-benefits > li{padding:20px}
 .site-footer .appearance-toggle button{padding:8px 4px;font-size:11px;gap:4px}
 .site-footer .footer-appearance{width:100%}
 .site-footer .appearance-toggle{width:100%}
}
@media(max-width:360px){.site-footer .appearance-toggle button{flex-direction:column;min-height:54px}.landing-page #overview .product-value h1{font-size:36px;line-height:40px}.site-footer nav,:is(.landing-page,.access-page) .site-footer nav{column-gap:16px}}
@media(max-width:780px){
 .page .demo-stage{height:640px;min-height:0;display:block}
 .page .demo-scene{position:absolute;inset:0;overflow:auto}
 .page .demo-install{overflow:hidden}
 .page [data-scene="0"] .demo-stage{height:480px}
 .page [data-scene="4"] .demo-stage{height:620px}
 .page .demo-controls button,.page .demo-play{min-height:44px}
 .page .demo-workspace{grid-template-columns:1fr;grid-template-rows:320px 320px}
 .page .demo-app{overflow:auto}
 .page .demo-sidebar{border-left:0;border-top:1px solid var(--border)}
 .page .demo-connect{grid-template-columns:1fr;grid-template-rows:260px 380px}
 .page .pairing-pane{padding:18px}
}
/* Signup layout motion is one coordinated tween; pressing never adds a scale bounce. */
.landing-page .hero-signup-actions .product-cta{transition:background var(--motion-feedback)}
.landing-page .hero-signup-actions .product-cta:active{transform:none}

/* Pricing-style Pro overview: centered introduction and two equal benefit cards. */
.product-page.landing-page main>section#pro { display:flex; flex-direction:column; align-items:center; gap:40px; padding-block:88px; }
.landing-page #pro .pro-intro { text-align:center; max-width:680px; }
.pro-mascot { position:relative; width:260px; height:180px; margin:0 auto 24px; }
.pro-cappy { position:absolute; left:50%; bottom:0; width:170px; transform:translateX(-50%); }
.pro-cappy img { width:100%; height:auto; }
.pro-mascot .cappy-theme-cycle { position:absolute; right:0; top:0; }
.landing-page #pro h2 { max-width:none; }
.landing-page #pro .pro-benefits { width:100%; max-width:960px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.landing-page #pro .pro-benefits > li { display:flex; flex-direction:column; gap:24px; min-width:0; min-height:260px; padding:40px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.landing-page #pro .pro-benefits strong { display:block; padding-bottom:24px; border-bottom:1px solid var(--border); color:var(--text); font:600 24px/32px Archivo,Arial,sans-serif; }
.landing-page #pro .pro-benefits span { color:var(--text-muted); font:400 18px/28px Archivo,Arial,sans-serif; }
.landing-page #pro .pro-status { max-width:640px; margin:0; padding:0; border:0; border-radius:0; text-align:center; color:var(--text-muted); font:400 14px/22px Archivo,Arial,sans-serif; }
@media(max-width:640px) {
 .product-page.landing-page main>section#pro { gap:32px; padding-block:56px; }
 .landing-page #pro .pro-benefits { grid-template-columns:1fr; gap:20px; }
 .landing-page #pro .pro-benefits > li { min-height:0; padding:28px; gap:20px; }
 .landing-page #pro .pro-benefits strong { padding-bottom:20px; }
}

.landing-page #pro .pro-plan-price { margin:0; color:var(--text); font:600 48px/1.1 Archivo,Arial,sans-serif; letter-spacing:-.035em; }
.landing-page #pro .pro-plan-price span { margin-left:4px; color:var(--text-muted); font:400 18px/28px Archivo,Arial,sans-serif; letter-spacing:0; }
.landing-page #pro .pro-plan-status { align-self:flex-start; padding:5px 12px; border-radius:6px; background:var(--chip); color:var(--chip-text); font:400 14px/22px Archivo,Arial,sans-serif; }

/* A unified brand sign-off with Cappy and compact, accessible theme controls. */
:is(.landing-page main,.access-page .site-frame)>footer.site-footer { gap:32px; margin:0 0 32px; padding:40px 0 24px; border:0; border-radius:0; background:transparent; }
:is(.landing-page,.access-page) .site-footer .footer-top { display:grid; grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.footer-cappy { width:100%; max-width:140px; }
.footer-cappy img { width:100%; height:auto; }
:is(.landing-page,.access-page) .site-footer .footer-identity .critter-wordmark { width:130px; height:40px; }
:is(.landing-page,.access-page) .site-footer .footer-identity p { max-width:280px; margin:16px 0 0; font:400 1.125rem/1.5555555556 Archivo,Arial,sans-serif; letter-spacing:0; color:var(--text); }
:is(.landing-page,.access-page) .site-footer nav { display:flex; flex-direction:column; align-items:flex-start; justify-self:end; gap:4px; }
:is(.landing-page,.access-page) .site-footer nav a { font-size:15px; color:var(--text-muted); }
:is(.landing-page,.access-page) .site-footer nav a:hover { color:var(--text); }
:is(.landing-page,.access-page) .site-footer .footer-bottom { flex-direction:row; align-items:center; padding-top:24px; border-top:1px solid var(--border); gap:16px; }
:is(.landing-page,.access-page) .site-footer .footer-domain { font-size:12px; }
:is(.landing-page,.access-page) .site-footer .footer-appearance { width:auto; flex-direction:row; }
:is(.landing-page,.access-page) .site-footer .appearance-toggle { width:auto; display:flex; gap:2px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--canvas); }
:is(.landing-page,.access-page) .site-footer .appearance-toggle button { flex:none; width:32px; height:32px; min-height:32px; padding:0; border-radius:50%; }
:is(.landing-page,.access-page) .site-footer .appearance-toggle svg { width:16px; height:16px; }
@media(max-width:780px) {
 :is(.landing-page,.access-page) .site-footer .footer-top { grid-template-columns:minmax(0,1fr) 140px; gap:24px; }
 :is(.landing-page,.access-page) .site-footer nav { grid-column:1/-1; justify-self:start; flex-direction:row; flex-wrap:wrap; gap:8px 24px; }
}
@media(max-width:480px) {
 :is(.landing-page main,.access-page .site-frame)>footer.site-footer { padding:28px 0 20px; border-radius:0; }
 :is(.landing-page,.access-page) .site-footer .footer-top { grid-template-columns:1fr; gap:24px; }
 :is(.landing-page,.access-page) .site-footer .footer-cappy { max-width:120px; }
 :is(.landing-page,.access-page) .site-footer .footer-identity p { max-width:240px; }
 :is(.landing-page,.access-page) .site-footer .footer-bottom { flex-wrap:wrap; gap:12px; }
}

.landing-page #pro .section-kicker { text-transform:none; letter-spacing:0; }
/* Desktop canvas only; mobile keeps the measured browser crop and transparency. */
@media(min-width:781px) {
 .landing-page .hero-presentation { background-color:var(--canvas); background-image:radial-gradient(circle, color-mix(in srgb, var(--text-muted) 24%, transparent) 1px, transparent 1px); background-size:20px 20px; }
}

/* Compact footer, with Cappy peeking over the page edge. */
:is(.landing-page main,.access-page .site-frame)>footer.site-footer { position:relative; overflow:hidden; gap:12px; margin-bottom:0; padding:32px 4px 16px; }
:is(.landing-page,.access-page) .site-footer .footer-top { grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr); align-items:end; gap:24px; }
:is(.landing-page,.access-page) .site-footer .footer-identity { grid-column:1; }
:is(.landing-page,.access-page) .site-footer .footer-identity .critter-wordmark { width:96px; height:32px; }
:is(.landing-page,.access-page) .site-footer .footer-identity p { margin-top:8px; }
:is(.landing-page,.access-page) .site-footer .footer-cappy { position:absolute; width:170px; max-width:none; bottom:28px; left:50%; transform:translateX(-50%); pointer-events:none; }
:is(.landing-page,.access-page) .site-footer nav { grid-column:3; gap:0; }
:is(.landing-page,.access-page) .site-footer .footer-bottom { border:0; padding-top:0; }
@media(max-width:780px) {
 :is(.landing-page,.access-page) .site-footer .footer-top { grid-template-columns:minmax(0,1fr) auto; align-items:start; }
 :is(.landing-page,.access-page) .site-footer nav { grid-column:2; flex-direction:column; justify-self:end; }
}
@media(max-width:600px) {
 .access-page .site-frame>footer.site-footer { padding-bottom:140px; }
 :is(.landing-page,.access-page) .site-footer .footer-top { grid-template-columns:1fr; gap:16px; }
 :is(.landing-page,.access-page) .site-footer nav { grid-column:1; flex-direction:row; justify-self:start; gap:20px; }
}

:is(.landing-page,.access-page) .site-footer nav { align-items:flex-end; text-align:right; }

@media(min-width:781px) {
 :is(.landing-page,.access-page) .site-footer nav a { min-height:30px; padding-block:4px; line-height:22px; }
}


/* Footer dots emerge gradually toward the bottom edge. */
:is(.landing-page main,.access-page .site-frame)>footer.site-footer { isolation:isolate; }
:is(.landing-page main,.access-page .site-frame)>footer.site-footer::before {
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 background-image:radial-gradient(circle, color-mix(in srgb, var(--text-muted) 24%, transparent) 1px, transparent 1px);
 background-size:20px 20px;
 -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 90%);
 mask-image:linear-gradient(to bottom, transparent 0%, black 90%);
}

.landing-page .hero-presentation { border:0; }
@media(min-width:781px) {
 .landing-page .hero-presentation { padding:0; border-radius:0; }
}

/* Full-bleed footer canvas; retain the page-column alignment for its content. */
:is(.landing-page main,.access-page .site-frame)>footer.site-footer {
 width:100vw;
 max-width:none;
 margin-inline:calc(50% - 50vw);
 padding-inline:calc(50vw - 50% + 4px);
}

/* Playback remains available on desktop as well as mobile. */
.landing-page #overview>.hero-details{display:block!important;padding:20px 0 0;width:100%;text-align:center}
.landing-page .hero-description{color:var(--text-muted);margin:0 auto 16px;max-width:640px;min-height:0;font-size:15px;line-height:1.5}
.landing-page .hero-review-controls{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.landing-page .hero-chapters,.landing-page .hero-keyframes{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.landing-page .hero-review-controls button{min-height:36px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--canvas);color:var(--text-muted);font:500 12px Archivo,Arial,sans-serif;cursor:pointer}
.landing-page .hero-review-controls button[aria-pressed=true]{background:var(--selected);border-color:var(--selected-border);color:var(--selected-text)}
.landing-page .hero-review-controls button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.landing-page .hero-keyframes [data-hero-command=previous],.landing-page .hero-keyframes [data-hero-command=next]{display:none}

/* Keep review controls available to the demo bridge, but off the public page. */
.landing-page .hero-review-controls[hidden]{display:none!important}

/* Access uses the homepage chrome while retaining its narrower setup form. */
.access-page .product-masthead,.access-page .site-frame{width:100%;max-width:1440px;margin-inline:auto;padding-inline:clamp(20px,3.5vw,56px)}
.access-page .product-masthead{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:76px;padding-block:16px}
.access-page .product-masthead .wordmark{display:flex;align-items:center;width:max-content;font-size:23px;text-decoration:none}
@media(max-width:780px){.access-page .product-masthead{flex-wrap:wrap;gap:16px}}

.access-page .site-footer .wordmark{display:flex;align-items:center;width:max-content;text-decoration:none;line-height:1}

/* Align the hero with the inset browser; give its dotted canvas more room. */
@media(min-width:781px) {
 .landing-page .product-masthead { padding-left:calc(clamp(20px,3.5vw,56px) + (min(100vw,1440px) - 2 * clamp(20px,3.5vw,56px)) * .039474); }
 .landing-page .product-masthead .critter-wordmark { width:132px; height:40px; }
 .landing-page .product-value { margin-left:3.9474%; max-width:880px; }
 .landing-page #overview .product-value h1 { font-size:clamp(48px,5vw,72px); max-width:16ch; }
 .landing-page .value-lede { max-width:760px; }
 .landing-page .hero-signup-actions .product-cta { min-width:200px; min-height:64px; font-size:18px; }
 .landing-page .hero-presentation { overflow:visible; background:none; }
 .landing-page .hero-presentation::before { display:block; inset:0 auto 0 50%; width:min(1920px,calc(100vw - 16px)); transform:translateX(-50%); filter:none; background:radial-gradient(circle,color-mix(in srgb,var(--text-muted) 24%,transparent) 1px,transparent 1px) center/14px 14px; }
}

/* Hero supporting copy uses Marketing Heading 2 with a regular weight. */
.landing-page #overview .value-lede { font-family:Archivo,sans-serif; font-size:var(--marketing-heading-2-size); line-height:var(--marketing-heading-2-leading); font-weight:400; letter-spacing:var(--marketing-heading-2-tracking); }
.landing-page .hero-signup-actions .product-cta { justify-content:center; text-align:center; color:#fff; }

/* Give the wordmark breathing room above and connect it to the hero below. */
.landing-page .product-masthead { padding-top:56px; padding-bottom:8px; }
.landing-page main>#overview.workflow-hero { padding-top:20px; }
@media(max-width:780px) {
 .landing-page .product-masthead { padding-top:36px; }
 .landing-page main>#overview.workflow-hero { padding-top:16px; }
}

/* Final hero refinements: softer copy and more air above the composition. */
.landing-page #overview .value-lede { color:var(--ink-500); font-weight:350; }
.landing-page .hero-signup-actions .product-cta { font-size:20px; }
.landing-page .product-masthead { padding-top:88px; }
@media(min-width:781px) {
 .landing-page .hero-presentation::before { top:-104px; bottom:-48px; }
}
@media(max-width:780px) {
 .landing-page .product-masthead { padding-top:56px; }
 .landing-page .hero-signup-actions .product-cta { font-size:18px; }
}

.landing-page #overview .hero-signup-actions { margin-top:40px; }
.hero-title-line { display:block; }
@media(max-width:780px) {
 .landing-page .product-masthead .critter-wordmark { width:112px; height:36px; }
 .landing-page #overview .product-value { max-width:none; margin-bottom:36px; }
 .landing-page #overview .product-value h1 { max-width:none; margin:0 0 20px; font-size:clamp(34px,9vw,40px); line-height:1.12; letter-spacing:-.025em; }
 .hero-title-line { display:inline; }
 .landing-page #overview .value-lede { max-width:36ch; font-size:22px; line-height:1.5; letter-spacing:0; color:var(--text-muted); }
 .landing-page #overview .hero-signup-actions { margin-top:28px; }
}

/* Plan inclusions stay compact inside the pricing cards. */
.landing-page #pro .plan-features { display:grid; gap:14px; list-style:none; margin:4px 0 0; padding:0; color:var(--text-muted); font:400 16px/1.5 Archivo,Arial,sans-serif; }
.landing-page #pro .plan-features > li { display:flex; align-items:baseline; gap:12px; }
.landing-page #pro .plan-features > li::before { content:"✓"; flex:none; color:var(--link); font-size:14px; }
.landing-page #pro .plan-upcoming { display:grid; gap:20px; margin-top:0; padding-left:26px; }
.landing-page #pro .plan-upcoming i { display:block; height:12px; width:78%; border-radius:4px; background:var(--border); opacity:.65; }
.landing-page #pro .plan-upcoming i:nth-child(2) { width:62%; }
.landing-page #pro .plan-upcoming i:nth-child(3) { width:70%; }

/* A single theme control follows Cappy's upward gaze. */
.cappy-theme-cycle{display:grid;place-items:center;width:60px;height:60px;padding:8px;background:transparent;border:0;box-shadow:none;color:var(--text);cursor:pointer;}
.cappy-theme-cycle svg{width:44px;height:44px;stroke-width:1.5;transition:transform 240ms ease;}
.cappy-theme-cycle svg[hidden]{display:none}
.cappy-theme-cycle:hover svg{transform:rotate(12deg)}
@media(prefers-reduced-motion:reduce){.cappy-theme-cycle svg{transition:none}.cappy-theme-cycle:hover svg{transform:none}}

/* A soft caption scrim sits just beneath the browser, over the dotted canvas. */
.landing-page #overview>.hero-details{position:relative;z-index:1;margin-top:-24px;padding:0 16px;}
.landing-page #overview .hero-description{position:relative;isolation:isolate;width:fit-content;max-width:min(800px,100%);margin:0 auto;padding:12px 24px;color:var(--text);font:300 clamp(16px,1.6vw,20px)/1.4 Archivo,Arial,sans-serif;min-height:0;text-align:center;}
.landing-page #overview .hero-description::before{content:'';position:absolute;z-index:-1;inset:-8px -20px;border-radius:50%;background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);filter:blur(10px);pointer-events:none;}
@media(max-width:780px){.landing-page #overview>.hero-details{margin-top:4px;padding:0 8px}.landing-page #overview .hero-description{padding:10px 12px;font-size:16px}.landing-page #overview .hero-description::before{inset:-4px -8px}}

/* Fade the dot layer alone; keep the demo and caption fully opaque. */
.landing-page .hero-presentation::before{
 -webkit-mask-image:radial-gradient(ellipse closest-side at center,#000 55%,rgba(0,0,0,.65) 80%,transparent 100%);
 mask-image:radial-gradient(ellipse closest-side at center,#000 55%,rgba(0,0,0,.65) 80%,transparent 100%);
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
}

/* Pricing and footer alignment. */
.product-page.landing-page main>section#pro{border-top:0;}
@media(min-width:601px){
 .landing-page .site-footer nav{position:relative;right:auto;bottom:auto;align-self:end;transform:translateY(32px);align-items:flex-end;}
}

/* A deeper blueprint canvas with clear supporting copy. */
:root[data-theme="blueprint"]:has(body.landing-page){--canvas:color-mix(in srgb,var(--cornflower-700) 60%,var(--cornflower-800));}
[data-theme="blueprint"] .landing-page #overview .value-lede{color:var(--cornflower-100);}

.landing-page #pro .pricing-signup-actions{grid-column:1/-1;display:flex;justify-content:center;margin-top:32px}
.landing-page #pro .pricing-signup-actions .product-cta{display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:56px;color:#fff;font-size:18px;text-align:center}

/* Keep the access footer at the viewport edge without covering setup content. */
body.access-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.access-page>main{width:100%;flex-shrink:0}
.access-page>.product-masthead{flex-shrink:0}
.access-page>.site-frame{margin-top:auto;flex-shrink:0}

/* Secondary wordmark treatment follows the active theme. */
.landing-page .product-masthead .critter-wordmark {
 background:var(--text-muted);
 -webkit-mask:url('/brand-assets/notebook/critter-wordmark-ink.svg') center/contain no-repeat;
 mask:url('/brand-assets/notebook/critter-wordmark-ink.svg') center/contain no-repeat;
}
.landing-page .product-masthead .critter-wordmark img { visibility:hidden; }
@media(min-width:781px) {
 .landing-page #overview .product-value h1 { max-width:22ch; }
}

/* Compact homepage hero with a lighter heading and a small CTA. */
.landing-page #overview .product-value h1 { font-size:clamp(32px,3.3333vw,48px); font-weight:500; }
.landing-page #overview .value-lede { font-size:clamp(16px,2vw,22px); color:var(--ink-600); text-align:right; }
.landing-page .product-masthead .hero-signup-actions .product-cta { min-width:136px; min-height:44px; font-size:14px; padding:9px 16px; gap:8px; border-radius:6px; }
@media(max-width:780px) {
 .landing-page #overview .product-value h1 { font-size:clamp(23px,6vw,27px); }
 .landing-page #overview .value-lede { font-size:17.6px; color:color-mix(in srgb,var(--text-muted) 90%,#000); }
 .landing-page .product-masthead .hero-signup-actions .product-cta { min-width:104px; min-height:36px; font-size:12px; padding:8px 12px; }
}

/* One compact band above the demo: headline left, context and action right. */
@media(min-width:781px) {
 .landing-page #overview .product-value { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:clamp(28px,5vw,72px); row-gap:18px; max-width:none; margin:0 3.9474% 24px; align-items:start; }
 .landing-page #overview .product-value h1 { grid-column:1; grid-row:1; margin:0; }
 .landing-page #overview .value-lede { grid-column:2; grid-row:1; max-width:38ch; justify-self:end; }
 .landing-page #overview .hero-signup-actions { grid-column:2; grid-row:1; margin:0; justify-content:flex-end; }
}
@media(max-width:780px) {
 .landing-page #overview .product-value { display:flex; flex-direction:column; margin-bottom:24px; }
 .landing-page #overview .value-lede { order:2; align-self:flex-start; text-align:left; margin-top:18px; }
 .landing-page #overview .hero-signup-actions { order:1; margin-top:0; justify-content:flex-end; }
}

/* Keep the compact hero close to the top of the viewport. */
.landing-page .product-masthead { padding-top:24px; }
@media(max-width:780px) {
 .landing-page .product-masthead { padding-top:16px; }
}

/* The CTA shares the wordmark row; both text columns start together below. */
.landing-page .product-masthead { justify-content:space-between; align-items:center; }
.landing-page .product-masthead .hero-signup-actions { margin:0; width:auto; }
@media(min-width:781px) {
 .landing-page .product-masthead { padding-right:calc(clamp(20px,3.5vw,56px) + (min(100vw,1440px) - 2 * clamp(20px,3.5vw,56px)) * .039474); }
}

/* Refine the main landing hero hierarchy. */
.landing-page .product-masthead .critter-wordmark{width:100px;height:30px}
.landing-page #overview .value-lede{font-size:clamp(20px,2.4vw,28px);line-height:1.35}
.landing-page .product-masthead .hero-signup-actions .product-cta{color:#000}
.landing-page #overview .hero-description{color:var(--text-muted);font-weight:300}
@media(max-width:780px){.landing-page .product-masthead .critter-wordmark{width:88px;height:27px}.landing-page #overview .value-lede{font-size:20px}}
@media(max-width:780px){
 .landing-page #overview .product-value{gap:12px}
 .landing-page #overview .product-value h1{margin-bottom:0}
 .landing-page #overview .value-lede{margin-top:0}
}

/* Pro waiting list: the card's button reveals an email field; the list lives in Resend. */
.landing-page #pro .pro-waitlist-form { display:grid; gap:12px; margin-top:auto; }
.landing-page #pro .pro-waitlist-form .product-cta { display:inline-flex; align-items:center; justify-content:center; justify-self:start; min-height:48px; padding:12px 20px; border:0; color:#fff; font:600 16px/24px Archivo,Arial,sans-serif; cursor:pointer; }
.landing-page #pro .pro-waitlist-form [hidden] { display:none; }
.landing-page #pro .pro-waitlist-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.landing-page #pro .pro-waitlist-field input { min-width:0; min-height:48px; padding:12px 16px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font:400 16px/24px Archivo,Arial,sans-serif; }
.landing-page #pro .pro-waitlist-field input::placeholder { color:var(--text-muted); }
.landing-page #pro .pro-waitlist-field input:focus { outline:2px solid var(--link); outline-offset:2px; border-color:transparent; }
.landing-page #pro .pro-waitlist-status { margin:0; color:var(--text-muted); font:400 14px/22px Archivo,Arial,sans-serif; }
.landing-page #pro .pro-waitlist-status:empty { display:none; }
.landing-page #pro .pro-waitlist-form.is-joined .pro-waitlist-status { color:var(--text); }
.landing-page #pro .pro-waitlist-form[aria-busy="true"] button { opacity:.6; cursor:wait; }
@media(max-width:480px) { .landing-page #pro .pro-waitlist-field { grid-template-columns:1fr; } .landing-page #pro .pro-waitlist-form .product-cta { justify-self:stretch; } }

/* Public community entry, alongside the existing extension signup. */
.landing-page .product-masthead .wall-entry-nav { display:flex; align-items:center; gap:12px; }
.landing-page .wall-entry-link { display:inline-flex; align-items:center; min-height:44px; padding:8px 4px; color:var(--text); font:500 14px/20px Archivo,Arial,sans-serif; text-decoration:none; border-radius:6px; }
.landing-page .wall-entry-link:hover { text-decoration:underline; text-underline-offset:4px; }
.landing-page .wall-entry-link:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.landing-page .product-masthead .wall-entry-nav .product-cta { min-height:44px; }