/* The four storefront templates as whole-site looks, html[data-template] (docs/domains/storefront.md). Loaded on every
   customer page after site.css and home.css. A template changes layout, decoration and motion only, never what a page does.
   live_demo: dotted paper, soft cards, the advisor everywhere, FAQ as a chat.
   registration: ink black on white, square edges, hard offset shadows, inked headings, crop marks, numbered lists.
   paper_playground: pastel bands, big rounded cards, chunky pill buttons, floating paper.
   shop_window: a familiar online shop: grey page, white cards, the shop's banners, a search-style advisor box and a
   category bar in the header, breadcrumbs, a floating advisor button, a help-centre FAQ and a dark footer. */

html[data-template="live_demo"] { --v-radius: 0.875rem; --v-radius-lg: 1.25rem; --v-border: 1px solid var(--color-rule); --v-shadow: 0 10px 30px color-mix(in oklch, var(--color-ink) 8%, transparent); }
html[data-template="registration"] { --v-radius: 0; --v-radius-lg: 0; --v-border: 2px solid var(--color-ink); --v-shadow: 6px 6px 0 var(--color-ink); }
html[data-template="paper_playground"] { --v-radius: 1.25rem; --v-radius-lg: 1.75rem; --v-border: 1px solid transparent; --v-shadow: 0 16px 40px color-mix(in oklch, var(--color-accent) 16%, transparent); }
html[data-template="shop_window"] { --v-radius: 8px; --v-radius-lg: 12px; --v-border: 1px solid var(--color-rule); --v-shadow: 0 1px 2px rgb(15 25 60 / 0.05); }

html[data-template] :is(.card, .account-panel, .download-card, .contact-card, .help-card, .track-empty) {
  border: var(--v-border); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow); background: var(--color-surface);
}
html[data-template] .track-empty { box-shadow: none; }

/* ---------- Page background ---------- */
html[data-template="live_demo"] body { background-color: var(--color-paper);
  background-image: radial-gradient(color-mix(in oklch, var(--color-ink) 7%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; }
html[data-template="registration"] body { background: var(--color-surface); }
html[data-template="paper_playground"] body { background: color-mix(in oklch, var(--color-accent-soft) 35%, var(--color-surface)); }
html[data-template="shop_window"] body { background: var(--color-paper-2); }
html[data-template="registration"] .section--tint { background: var(--color-surface); border-block: 2px solid var(--color-ink); }
html[data-template="paper_playground"] .section--tint { background: color-mix(in oklch, var(--color-accent-soft) 70%, var(--color-surface)); }
html[data-template="shop_window"] .section--tint { background: var(--color-surface); border-block: 1px solid var(--color-rule); }

/* ---------- Header ---------- */
html[data-template="registration"] .site-header { border-block-end: 2px solid var(--color-ink); background: var(--color-surface); backdrop-filter: none; }
html[data-template="registration"] .site-header::after { content: ""; position: absolute; inset: auto 0 -8px; height: 6px;
  background: linear-gradient(90deg, var(--color-process-cyan) 0 25%, var(--color-process-magenta) 25% 50%, var(--color-process-yellow) 50% 75%, var(--color-ink) 75%); }
html[data-template="registration"] :is(.nav-links a, .nav-tool) { border-radius: 0; color: var(--color-ink); font-weight: 750; }
html[data-template="registration"] :is(.nav-links a, .nav-tool):hover { background: none; text-decoration: underline 3px; text-underline-offset: 6px; }
html[data-template="registration"] :is(.nav-links a, .nav-tool)[aria-current="page"] { background: var(--color-ink); color: var(--color-surface); text-decoration: none; }
html[data-template="registration"] :is(.theme-toggle, .mobile-nav summary) { border: 2px solid var(--color-ink); border-radius: 0; }
html[data-template="paper_playground"] .site-header { border-block-end-color: transparent; background: color-mix(in oklch, var(--color-accent-soft) 88%, transparent); }
html[data-template="paper_playground"] :is(.nav-links a, .nav-tool, .theme-toggle, .mobile-nav summary, .mobile-menu-panel a) { border-radius: var(--radius-pill); }
html[data-template="paper_playground"] :is(.nav-links a, .nav-tool)[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }

/* ---------- Buttons, ask boxes, chips ---------- */
html[data-template="live_demo"] .button { transition: transform 160ms var(--ease-out), box-shadow 160ms, background-color 160ms; }
html[data-template="live_demo"] .button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in oklch, var(--color-accent) 30%, transparent); }
html[data-template="registration"] .button { border: 2px solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-surface); box-shadow: 4px 4px 0 var(--color-process-magenta); transition: transform 120ms, box-shadow 120ms; }
html[data-template="registration"] .button:hover { transform: translate(-2px, -2px); background: var(--color-ink); box-shadow: 6px 6px 0 var(--color-process-magenta); }
html[data-template="registration"] .button--outline { background: var(--color-surface); color: var(--color-ink); box-shadow: 4px 4px 0 var(--color-ink); }
html[data-template="registration"] .button--outline:hover { background: var(--color-surface); box-shadow: 6px 6px 0 var(--color-ink); }
html[data-template="paper_playground"] .button { border-radius: var(--radius-pill); box-shadow: 0 4px 0 color-mix(in oklch, var(--color-accent) 60%, black); transition: transform 140ms, box-shadow 140ms; }
html[data-template="paper_playground"] .button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in oklch, var(--color-accent) 60%, black); background: var(--color-accent); }
html[data-template="paper_playground"] .button:active { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in oklch, var(--color-accent) 60%, black); }
html[data-template="paper_playground"] .button--outline { box-shadow: 0 4px 0 var(--color-rule-2); }
html[data-template="shop_window"] .button { border-radius: var(--v-radius); transition: background-color 150ms, transform 120ms, box-shadow 150ms; }
html[data-template="shop_window"] .button:hover { box-shadow: 0 6px 16px color-mix(in oklch, var(--color-accent) 28%, transparent); }

html[data-template="registration"] .ask { border-radius: 0; box-shadow: 6px 6px 0 var(--color-ink); }
html[data-template="registration"] .ask button { border-radius: 0; background: var(--color-ink); color: var(--color-surface); }
html[data-template="registration"] .ask-chips button { border: 2px solid var(--color-ink); border-radius: 0; }
html[data-template="paper_playground"] .ask { border-color: transparent; box-shadow: 0 14px 34px color-mix(in oklch, var(--color-accent) 22%, transparent); }
html[data-template="paper_playground"] .ask-chips button { border-color: transparent; background: var(--color-surface); box-shadow: 0 3px 0 var(--color-rule-2); }
html[data-template="shop_window"] .ask { border: 2px solid var(--color-accent); box-shadow: none; }
html[data-template="shop_window"] .ask-chips button { border-color: var(--color-rule-2); border-radius: var(--v-radius); }

/* ---------- Page heads ---------- */
html[data-template="live_demo"] .page-head { isolation: isolate; padding-block: 2.5rem 2.25rem; margin-block-end: var(--space-lg); }
html[data-template="live_demo"] .page-head::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; border-block-end: 1px solid var(--color-rule); background: color-mix(in oklch, var(--color-surface) 70%, transparent); }
html[data-template="live_demo"] .page-head h1 { width: fit-content; text-decoration: underline; text-decoration-color: var(--color-process-yellow); text-decoration-thickness: 0.22em;
  text-underline-offset: -0.06em; text-decoration-skip-ink: none; animation: mark-in 1100ms 200ms var(--ease-out) both; }
.page-eyebrow { justify-self: start; text-decoration: none; }

html[data-template="registration"] .page-head { padding-block: 3.5rem 2.5rem; margin-block-end: var(--space-xl); border-block-end: 2px solid var(--color-ink); }
html[data-template="registration"] .page-head h1 { font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
html[data-template="registration"] .page-head p { color: var(--color-ink-2); font-size: var(--text-lg); }
html[data-template="registration"] .page-head .crop--tl { top: 1rem; left: -0.75rem; }
html[data-template="registration"] .page-head .crop--tr { top: 1rem; right: -0.75rem; }
html[data-template="registration"] .page-head .crop--bl { bottom: 1rem; left: -0.75rem; }
html[data-template="registration"] .page-head .crop--br { bottom: 1rem; right: -0.75rem; }
@media (max-width: 47.99rem) { html[data-template="registration"] .page-head .crop { display: none; } }

html[data-template="paper_playground"] .page-head { isolation: isolate; justify-items: center; padding-block: 3.5rem 3rem; margin-block-end: var(--space-xl); text-align: center; }
html[data-template="paper_playground"] .page-head::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; border-radius: 0 0 2.5rem 2.5rem;
  background: color-mix(in oklch, var(--color-accent-soft) 85%, var(--color-surface)); }
html[data-template="paper_playground"] .page-head p { margin-inline: auto; }
.head-papers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mini { position: absolute; animation: float 6s ease-in-out infinite; }
.mini-card { left: 2%; top: 26%; width: 6rem; height: 3.6rem; border-radius: 5px; background: var(--color-ink); rotate: -12deg; box-shadow: 0 12px 24px rgb(15 25 60 / 0.25); }
.mini-sticker { right: 4%; top: 14%; width: 4.25rem; height: 4.25rem; border: 4px solid white; border-radius: 50%; background: var(--color-process-yellow); rotate: 12deg; box-shadow: 0 10px 20px rgb(120 90 0 / 0.2); animation-delay: -2s; }
.mini-sheet { right: 12%; bottom: 8%; width: 3.5rem; height: 4.8rem; border-radius: 3px; background: white; rotate: 8deg; box-shadow: 0 12px 24px rgb(15 25 60 / 0.16); animation-delay: -4s; }
@media (max-width: 47.99rem) { .head-papers { display: none; } }

html[data-template="shop_window"] .page-head { padding-block: var(--space-md) var(--space-lg); }
html[data-template="shop_window"] .page-head h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }

/* Inked headings (registration): four copies under one aria-label, out of register, then snapped in. */
.is-inked { display: grid; }
.is-inked .ink { grid-area: 1 / 1; }

/* ---------- Product tiles ---------- */
html[data-template="registration"] .product-grid { counter-reset: tile; }
html[data-template="registration"] .product-tile { counter-increment: tile; }
html[data-template="registration"] .product-tile > a { padding: 0.75rem; border: 2px solid var(--color-ink); background: var(--color-surface); transform: none; transition: transform 140ms, box-shadow 140ms; }
html[data-template="registration"] .product-tile > a:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--color-ink); }
html[data-template="registration"] .product-photo { border-radius: 0; }
html[data-template="registration"] .product-photo::before { content: counter(tile, decimal-leading-zero); position: absolute; top: 0; left: 0; z-index: 1; padding: 0.25rem 0.6rem; background: var(--color-ink); color: var(--color-surface); font-weight: 800; }
html[data-template="registration"] .product-photo::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 300ms;
  background-image: radial-gradient(var(--color-process-magenta) 1.2px, transparent 1.6px); background-size: 7px 7px; mix-blend-mode: multiply; }
html[data-template="registration"] .product-tile > a:hover .product-photo::after { opacity: 0.55; }
html[data-template="registration"] .pill { border: 1.5px solid currentColor; border-radius: 0; background: none; }
html[data-template="registration"] .go { color: var(--color-ink); }
html[data-template="paper_playground"] .product-tile > a { padding: 0.75rem 0.75rem 1rem; border-radius: 1.75rem; background: var(--color-surface); box-shadow: var(--v-shadow);
  transition: transform 320ms cubic-bezier(.2,1.4,.4,1); }
html[data-template="paper_playground"] .product-tile > a:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
html[data-template="paper_playground"] .product-photo { border-radius: 1.25rem; }
html[data-template="paper_playground"] .product-tile:nth-child(3n+1) .product-photo { background: color-mix(in oklch, var(--color-process-cyan) 22%, white); }
html[data-template="paper_playground"] .product-tile:nth-child(3n+2) .product-photo { background: color-mix(in oklch, var(--color-process-magenta) 18%, white); }
html[data-template="paper_playground"] .product-tile:nth-child(3n+3) .product-photo { background: color-mix(in oklch, var(--color-process-yellow) 30%, white); }
html[data-template="paper_playground"] .pill { background: var(--color-accent-soft); color: var(--color-accent-text); }
html[data-template="shop_window"] .home-products { padding-block-start: var(--space-xl); }
html[data-template="shop_window"] .product-tile > a { height: 100%; gap: var(--space-2xs); padding-block-end: var(--space-md); overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--v-radius-lg);
  background: var(--color-surface); transform: none; transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out), border-color 200ms; }
html[data-template="shop_window"] .product-tile > a > :not(.product-photo) { margin-inline: var(--space-sm); }
html[data-template="shop_window"] .product-tile > a:hover { border-color: color-mix(in oklch, var(--color-accent) 40%, var(--color-rule)); box-shadow: 0 14px 30px rgb(15 25 60 / 0.12); transform: translateY(-3px); }
html[data-template="shop_window"] .product-photo { margin-block-end: var(--space-2xs); border-radius: 0; }
html[data-template="shop_window"] .product-meta { margin-block-start: auto; padding-block-start: var(--space-2xs); }
html[data-template="shop_window"] .go { display: inline-flex; min-height: 40px; align-items: center; padding-inline: 0.875rem; border-radius: var(--v-radius); background: var(--color-accent); color: var(--color-accent-ink); }
@media (max-width: 47.99rem) { html[data-template="shop_window"] .go { display: none; } }

/* ---------- FAQ: live_demo a chat, registration a numbered list, paper_playground cards, shop_window a help centre ---------- */
html[data-template="live_demo"] .faq-list { gap: var(--space-lg); }
html[data-template="live_demo"] .faq-list article { display: grid; gap: var(--space-2xs); padding: 0; border: 0; }
html[data-template="live_demo"] .faq-list h2 { justify-self: end; max-width: 80%; margin: 0; padding: 0.75rem 1.125rem; border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
  background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-base); font-weight: 650; }
html[data-template="live_demo"] .faq-list p { justify-self: start; max-width: 85%; padding: 0.75rem 1.125rem; border: 1px solid var(--color-rule); border-radius: 1.25rem 1.25rem 1.25rem 0.375rem;
  background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-sm); }
html[data-template="registration"] .faq-list { counter-reset: q; gap: 0; border-block-start: 2px solid var(--color-ink); }
html[data-template="registration"] .faq-list article { counter-increment: q; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-sm); padding-block: var(--space-md); border-block-end: 2px solid var(--color-ink); }
html[data-template="registration"] .faq-list article::before { content: counter(q, decimal-leading-zero); grid-row: span 2; font-size: 2.75rem; font-weight: 800; line-height: 1; }
html[data-template="registration"] .faq-list article:nth-child(4n+1)::before { color: var(--color-process-cyan); }
html[data-template="registration"] .faq-list article:nth-child(4n+2)::before { color: var(--color-process-magenta); }
html[data-template="registration"] .faq-list article:nth-child(4n+3)::before { color: var(--color-process-yellow); }
html[data-template="registration"] .faq-list article:nth-child(4n+4)::before { color: var(--color-ink); }
html[data-template="registration"] .faq-list h2 { font-size: 1.375rem; font-weight: 800; }
html[data-template="paper_playground"] .faq-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-sm); }
html[data-template="paper_playground"] .faq-list article { padding: var(--space-md); border: 0; border-radius: 1.5rem; }
html[data-template="paper_playground"] .faq-list article:nth-child(3n+1) { background: color-mix(in oklch, var(--color-process-cyan) 18%, var(--color-surface)); }
html[data-template="paper_playground"] .faq-list article:nth-child(3n+2) { background: color-mix(in oklch, var(--color-process-magenta) 12%, var(--color-surface)); }
html[data-template="paper_playground"] .faq-list article:nth-child(3n+3) { background: color-mix(in oklch, var(--color-process-yellow) 25%, var(--color-surface)); }
html[data-template="shop_window"] .faq-list { gap: 0; padding: 0.25rem var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--v-radius-lg); background: var(--color-surface); }
html[data-template="shop_window"] .faq-list article { padding-block: var(--space-md); border-block-end: 1px solid var(--color-rule); }
html[data-template="shop_window"] .faq-list article:last-child { border-block-end: 0; }
html[data-template="shop_window"] .faq-list h2 { display: flex; gap: 0.75rem; font-size: var(--text-md); }
html[data-template="shop_window"] .faq-list h2::before { content: "Q"; color: var(--color-accent-text); font-weight: 800; }
html[data-template="shop_window"] .faq-list p { padding-inline-start: 1.75rem; }

/* ---------- Track ---------- */
html[data-template="registration"] .track-steps li span { border: 2px solid var(--color-ink); border-radius: 0; }
html[data-template="registration"] .track-steps li::after { background: var(--color-ink); }
html[data-template="registration"] .track-steps li[aria-current="step"] span { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-surface); }
html[data-template="paper_playground"] .track-steps li span { width: 2.75rem; height: 2.75rem; border: 0; background: var(--color-accent-soft); }

/* ---------- Downloads, contact, help ---------- */
html[data-template="registration"] .download-type { border-radius: 0; background: var(--color-ink); color: var(--color-surface); }
html[data-template="paper_playground"] .download-type { border-radius: 50%; background: var(--color-accent-soft); }
html[data-template="registration"] .help-icon { border-radius: 0; background: var(--color-process-yellow); color: #111; }
html[data-template="paper_playground"] .help-icon { border-radius: 50%; background: var(--color-accent-soft); }
html[data-template="paper_playground"] .contact-card:nth-child(3n+1) { background: color-mix(in oklch, var(--color-process-cyan) 14%, var(--color-surface)); }
html[data-template="paper_playground"] .contact-card:nth-child(3n+2) { background: color-mix(in oklch, var(--color-process-magenta) 10%, var(--color-surface)); }
html[data-template="paper_playground"] .contact-card:nth-child(3n+3) { background: color-mix(in oklch, var(--color-process-yellow) 20%, var(--color-surface)); }

/* ---------- Account, forms, legal ---------- */
html[data-template="registration"] .account-panel h2 { font-size: 1.75rem; font-weight: 800; }
html[data-template="registration"] :is(.account-form, .track-form) :is(input, textarea) { border: 2px solid var(--color-ink); border-radius: 0; }
html[data-template="paper_playground"] :is(.account-form, .track-form) :is(input, textarea) { border-color: transparent; border-radius: 0.875rem; background: var(--color-paper-2); }
html[data-template="registration"] .prose h2 { padding-block-start: var(--space-sm); border-block-start: 2px solid var(--color-ink); font-weight: 800; }
html[data-template="paper_playground"] .prose h2 { display: inline-block; padding: 0.25rem 0.875rem; border-radius: var(--radius-pill); background: var(--color-accent-soft); }

/* ---------- Ask strip above the footer ---------- */
html[data-template="live_demo"] .ask-strip { border-block-start: 1px solid var(--color-rule); background: color-mix(in oklch, var(--color-accent-soft) 45%, transparent); }
html[data-template="registration"] .ask-strip { border-block-start: 2px solid var(--color-ink); background: var(--color-process-yellow); color: #111; }
html[data-template="registration"] .ask-strip p { color: #222; }
html[data-template="registration"] .ask-strip .ask { border-color: #111; background: white; box-shadow: 6px 6px 0 #111; }
html[data-template="registration"] .ask-strip .ask input { color: #111; }
html[data-template="registration"] .ask-strip .ask input::placeholder { color: #444; }
html[data-template="paper_playground"] .ask-strip-inner { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 2rem; background: var(--color-accent); color: var(--color-accent-ink); }
html[data-template="paper_playground"] .ask-strip p { color: color-mix(in oklch, var(--color-accent-ink) 85%, transparent); }
html[data-template="shop_window"] .ask-strip-inner { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border: 1px solid var(--color-rule); border-radius: var(--v-radius-lg); background: var(--color-surface); }

/* ---------- Footer ---------- */
html[data-template="registration"] .footer { border-block-start: 0; background: var(--color-ink); color: var(--color-surface); }
html[data-template="registration"] .footer :is(h2, .footer-brand p, .footer-legal) { color: color-mix(in oklch, var(--color-surface) 70%, transparent); }
html[data-template="registration"] .footer .footer-legal { border-block-start-color: color-mix(in oklch, var(--color-surface) 25%, transparent); }
html[data-template="registration"] .footer-logo { color: var(--color-surface); }
html[data-template="registration"] .footer .brand-mark.has-image { padding: 4px 8px; background: white; }
html[data-template="paper_playground"] .footer { border: 0; border-radius: 2.5rem 2.5rem 0 0; background: color-mix(in oklch, var(--color-accent-soft) 80%, var(--color-surface)); }
html[data-template="shop_window"] .footer { border: 0; background: var(--color-inverse-bg); color: var(--color-inverse-ink); }
html[data-template="shop_window"] .footer :is(h2, .footer-brand p, .footer-legal) { color: var(--color-inverse-muted); }
html[data-template="shop_window"] .footer .footer-legal { border-block-start-color: color-mix(in oklch, var(--color-inverse-ink) 20%, transparent); }
html[data-template="shop_window"] .footer-logo { color: var(--color-inverse-ink); }
html[data-template="shop_window"] .footer .brand-mark.has-image { padding: 4px 8px; border-radius: 6px; background: white; }

/* ---------- Shop window's header: the advisor as a search box, then the category bar ---------- */
html[data-template="shop_window"] .site-header { background: var(--color-surface); backdrop-filter: none; }
html[data-template="shop_window"] .nav { flex-wrap: wrap; column-gap: var(--space-md); }
html[data-template="shop_window"] .nav-links { display: none !important; }
.shop-search { display: flex; flex: 1; align-items: center; max-width: 38rem; min-height: 52px; padding-inline-start: 1rem; border: 2px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-surface); }
.shop-search > .line-icon { color: var(--color-muted); }
.shop-search input { flex: 1; width: 100%; min-width: 0; min-height: 44px; padding: 0 0.75rem; border: 0; background: none; color: var(--color-ink); font: inherit; outline: none; }
.shop-search button { min-width: 44px; min-height: 44px; margin: 2px; padding-inline: 1.125rem; border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: inherit; font-weight: 700; cursor: pointer; }
.shop-search:focus-within { box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 18%, transparent); }
@media (max-width: 63.99rem) { .shop-search { order: 5; flex-basis: 100%; max-width: none; margin-block-end: var(--space-xs); } }
/* The category bar wraps onto a second row instead of scrolling: nothing is laid out past the window's edge. */
.cat-bar { order: 6; flex-basis: 100%; border-block-start: 1px solid var(--color-rule); }
.cat-inner { display: flex; flex-wrap: wrap; align-items: stretch; }
.cat-products { display: contents; }
.cat-inner a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 50px; padding: 0 0.6rem; border-block-end: 3px solid transparent;
  color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 650; text-decoration: none; white-space: nowrap; transition: color 150ms, border-color 150ms; }
.cat-inner a img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--color-rule); }
.cat-inner a:hover, .cat-inner a[aria-current="page"] { border-block-end-color: var(--color-accent); color: var(--color-accent-text); }
@media (max-width: 63.99rem) { .cat-products { display: none; } }

/* The floating advisor button, on every page but the advisor's own. */
.advisor-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-raised); display: inline-flex; align-items: center; gap: 0.5rem; min-width: 52px; min-height: 54px; padding: 0 1.25rem 0 1rem;
  border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 750; text-decoration: none;
  box-shadow: 0 10px 26px color-mix(in oklch, var(--color-accent) 40%, transparent); animation: fab-in 600ms 700ms var(--ease-out) both; }
.advisor-fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 45%, transparent); animation: fab-pulse 2.6s 1.5s infinite; }
.advisor-fab:hover { filter: brightness(1.08); transform: translateY(-2px); }
@keyframes fab-in { from { opacity: 0; transform: translateY(16px) scale(0.9); } }
@keyframes fab-pulse { 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
@media (max-width: 40rem) {
  .advisor-fab { right: 0.75rem; bottom: 0.75rem; min-height: 52px; padding-inline: 0.9rem; }
  .advisor-fab span { display: none; }
}

/* ---------- Marketing images: live_demo a peek carousel, registration one framed poster, paper_playground a card deck,
   shop_window the home hero. The slides share one grid cell; a moved slide stays inside its track. ---------- */
html[data-template="live_demo"] .promo-slide { width: 88%; border-radius: 1.25rem; box-shadow: var(--v-shadow); }
html[data-template="live_demo"] .promo-slide[data-pos="1"] { z-index: 1; opacity: 0.55; transform: translateX(13.6%); }
html[data-template="live_demo"] .promo[data-count="1"] .promo-slide { width: 100%; }
html[data-template="live_demo"] .promo-count { display: none; }

html[data-template="registration"] .promo-frame { padding: 1rem; border: 2px solid var(--color-ink); background: var(--color-surface); box-shadow: 8px 8px 0 var(--color-ink); }
html[data-template="registration"] .promo .crop { display: block; width: 1.5rem; height: 1.5rem; }
html[data-template="registration"] .promo .crop--tl { top: -0.75rem; left: -0.75rem; }
html[data-template="registration"] .promo .crop--tr { top: -0.75rem; right: -0.75rem; }
html[data-template="registration"] .promo .crop--bl { bottom: -0.75rem; left: -0.75rem; }
html[data-template="registration"] .promo .crop--br { bottom: -0.75rem; right: -0.75rem; }
html[data-template="registration"] .promo-slide { border-radius: 0; }
html[data-template="registration"] .promo-frame.is-flash .promo-slide.is-active img { animation: promo-ink 750ms var(--ease-out); }
@keyframes promo-ink { from { filter: drop-shadow(-10px 0 0 var(--color-process-cyan)) drop-shadow(10px 5px 0 var(--color-process-magenta)) drop-shadow(0 -7px 0 var(--color-process-yellow)); } }
html[data-template="registration"] .promo-count { color: var(--color-ink); font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-weight: 800; line-height: 1; }
html[data-template="registration"] .promo-count span { color: var(--color-muted); font-size: 0.5em; }
html[data-template="registration"] .promo-dots i { height: 8px; border-radius: 0; }
html[data-template="registration"] .promo-dots button[aria-current="true"] i { background: var(--color-process-magenta); }
html[data-template="registration"] .promo-arrows button { border: 2px solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-surface); }

html[data-template="paper_playground"] .promo-frame { display: grid; justify-items: center; padding-block: var(--space-md) var(--space-xl); }
html[data-template="paper_playground"] .promo-track { width: min(100% - 2.5rem, 46rem); margin-inline-end: 2.5rem; }
html[data-template="paper_playground"] .promo-slide { border-radius: 1.5rem; box-shadow: 0 18px 40px rgb(15 25 60 / 0.2); }
html[data-template="paper_playground"] .promo-slide.is-active { transform: rotate(-1deg); }
html[data-template="paper_playground"] .promo-slide[data-pos="1"] { z-index: 1; opacity: 1; transform: translate(14px, 10px) rotate(2deg) scale(0.96); }
html[data-template="paper_playground"] .promo-slide[data-pos="2"] { z-index: 0; opacity: 1; transform: translate(28px, 20px) rotate(4deg) scale(0.92); }
html[data-template="paper_playground"] .promo[data-count="1"] .promo-track { margin-inline-end: 0; }
html[data-template="paper_playground"] .promo-bar { justify-content: center; }
html[data-template="paper_playground"] .promo-count { display: none; }
html[data-template="paper_playground"] .promo-dots i { width: 12px; height: 12px; border-radius: 50%; }
html[data-template="paper_playground"] .promo-arrows button { border: 0; box-shadow: 0 4px 0 var(--color-rule-2); }

html[data-template="shop_window"] .promo-slide { border-radius: var(--v-radius-lg); }
html[data-template="shop_window"] .promo--hero .promo-slide { border-radius: 14px; box-shadow: 0 2px 10px rgb(15 25 60 / 0.08); }
html[data-template="shop_window"] .promo--hero .promo-bar { position: absolute; inset: 0; pointer-events: none; }
html[data-template="shop_window"] .promo--hero .promo-count { display: none; }
html[data-template="shop_window"] .promo--hero .promo-arrows button { position: absolute; top: 50%; translate: 0 -50%; border: 0; background: rgb(255 255 255 / 0.92);
  color: #13203f; box-shadow: 0 4px 14px rgb(0 0 0 / 0.22); opacity: 0; pointer-events: auto; transition: opacity 200ms; }
html[data-template="shop_window"] .promo--hero .promo-prev { left: 1rem; }
html[data-template="shop_window"] .promo--hero .promo-next { right: 1rem; }
html[data-template="shop_window"] .promo--hero:is(:hover, :focus-within) .promo-arrows button { opacity: 1; }
@media (hover: none) { html[data-template="shop_window"] .promo--hero .promo-arrows button { opacity: 1; } }
html[data-template="shop_window"] .promo--hero .promo-dots { position: absolute; bottom: 0.5rem; left: 50%; translate: -50% 0; border-radius: var(--radius-pill); background: rgb(0 0 0 / 0.35); pointer-events: auto; }
html[data-template="shop_window"] .promo--hero .promo-dots i { background: rgb(255 255 255 / 0.55); }
html[data-template="shop_window"] .promo--hero .promo-dots button[aria-current="true"] i { background: white; }

/* ---------- The advisor (consult.css): the conversation and the job ticket in each template ---------- */
html[data-template="live_demo"] .advisor-body { background-color: var(--color-paper);
  background-image: radial-gradient(color-mix(in oklch, var(--color-ink) 7%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; }
html[data-template="registration"] :is(.advisor, .job) { border: 2px solid var(--color-ink); border-radius: 0; box-shadow: 6px 6px 0 var(--color-ink); }
html[data-template="registration"] :is(.advisor-head, .job-head) { border-block-end: 2px solid var(--color-ink); }
html[data-template="registration"] .composer { border-block-start: 2px solid var(--color-ink); }
html[data-template="registration"] :is(.bubble p, .typing) { border-radius: 2px; }
html[data-template="registration"] .bubble.customer p { background: var(--color-ink); color: var(--color-surface); }
html[data-template="registration"] .advisor-avatar { border-radius: 0; background: var(--color-ink); }
html[data-template="registration"] :is(.choice-button, .primary, .secondary, .product-option) { border: 2px solid var(--color-ink); border-radius: 0; }
html[data-template="registration"] .primary { background: var(--color-ink); color: var(--color-surface); }
html[data-template="registration"] .choice-button:hover { background: var(--color-process-yellow); color: #111; transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--color-ink); }
html[data-template="paper_playground"] .advisor-body { background: color-mix(in oklch, var(--color-accent-soft) 60%, var(--color-surface)); }
html[data-template="paper_playground"] :is(.advisor, .job) { border-color: transparent; border-radius: 1.75rem; box-shadow: var(--v-shadow); }
html[data-template="paper_playground"] :is(.bubble p, .typing) { border-radius: 1.5rem; }
html[data-template="paper_playground"] .bubble.advisor p { background: color-mix(in oklch, var(--color-accent-soft) 80%, var(--color-surface)); }
html[data-template="paper_playground"] .job-stage { border-radius: 1.25rem; background-color: color-mix(in oklch, var(--color-process-yellow) 18%, var(--color-surface)); }
html[data-template="paper_playground"] .choice-button { border-color: transparent; box-shadow: 0 3px 0 var(--color-rule-2); }
html[data-template="shop_window"] .advisor-body { background: var(--color-paper-2); }
html[data-template="shop_window"] :is(.advisor, .job) { border: 1px solid var(--color-rule); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow); }
html[data-template="shop_window"] :is(.choice-button, .product-option) { border-radius: var(--v-radius); }
/* Shop window's header is taller (the search box and the category bar): the ticket stays clear of it. */
@media (min-width: 60rem) { html[data-template="shop_window"] .ticket-panel { top: calc(var(--header-h) + 7rem); } }
@media (max-width: 59.99rem) { html[data-template] .job { border-inline: 0; border-radius: 0; box-shadow: var(--shadow-sm); } }